@charset "utf-8";
/* CSS Document VEYDEN */

body {
	margin: 0px;
	font-family: "Gotham", Helvetica Neue, Helvetica, Arial, sans-serif;
	overflow-x: hidden;
}

/* blue colour rgba(59,155,171,1) */
/* red colour rgba(171,37,36,1) */

/* Mobile Layout: 480px and below. */
@media only screen and (min-width: 350px) {
	#originalshowreel{
		width:250px;
	}
	#abrieffriendshipmp4{
		width:250px;
	}
	#soundcolliderlive{
		width:250px;
	}
}

/* Tablet Layout: 481px to 600px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
	#originalshowreel{
		width:350px;
	}
	#abrieffriendshipmp4{
		width:350px;
	}
	#soundcolliderlive{
		width:350px;
	}
}

/* Desktop Layout: 600px to a max of 769px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 600px) {
	#originalshowreel{
		width:400px;
	}
	#abrieffriendshipmp4{
		width:400px;
	}
	#soundcolliderlive{
		width:400px;
	}
}

/* Desktop Layout: 769px to what gets streched to.  Desktop. */
@media only screen and (min-width: 769px) {
	#originalshowreel{
		width:700px;
	}
	#abrieffriendshipmp4{
		width:700px;
	}
	#soundcolliderlive{
		width:700px;
	}
}

/* Head part */

#mainheader {
	position: fixed;
	top: 0;
	height: 50px;
	width: 100%;
	background-image: linear-gradient(to bottom, rgba(59,155,171,1),  rgba(59,155,171,0));
	z-index: 10;
}

#headerhidebackground {
	position: fixed;
	top: 0px;
	height: 60px;
	width: 100%;
	background-color: rgba(255,255,255,1.00);
	z-index: 9;
}

#logoontopnobackground {
	position: absolute;
	width: 125px;
	right: 10px;
}

#righttitlebackground {
	position: fixed;
	top: 0;
	right: 0;
	height: 80px;
	width: 300px;
	background-image: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
	z-index: 9;
}

#topbar {
	position: fixed;
	top: 80px;
	width: 230px;
	right: 0;
	border: 2px solid transparent;
	border-image: linear-gradient(to left, rgba(59,155,171,1),rgba(59,155,171,0));
	border-image-slice: 1;
	z-index: 9;
}

#pagetitle {
	position: fixed;
	width: 230px;
	left: 10px;
	top: 10px;
	font-size: 25px;
	text-decoration-style: solid;
	z-index: 10;
}

#pagetitlebackground{
	position: fixed;
	background-color: #FFFFFF;
	left: 0;
	top: 50px;
	height: 10px;
	width: 100%;
	z-index: 0;
}

#pagetitleunderline {
	position: fixed;
	top: 50px;
	width: 50%;
	border: 2px solid transparent;
	border-image: linear-gradient(to right, rgba(59,155,171,1),rgba(59,155,171,0));
	border-image-slice: 1;
	z-index: 10;
}

#gobackbutton{
	position: fixed;
	top: 58px;
	left: 10px;
	z-index: 10;
}

#gobackbuttonbackground{
	position: fixed;
	background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
	top: 58px;
	height: 22px;
	left: 0;
	width: 80px;
	z-index: 9;
}

/* main menu */

#mainmenu {
	position: fixed;
	top: 50px;
	right: 120px;
	background: none;
	border: none;
	color: rgba(0,0,0,1.00);
	z-index: 10;
}

.overlay {
  width: 0;
  position: fixed;
  z-index: 1;
  top: 80px;
  right: 0;
  bottom: 34px;
  background-image: linear-gradient(to right, rgba(59,155,171,1), rgba(59,155,171,1), rgba(59,155,171,1), rgba(59,155,171,0));
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 50%;
  text-align: center;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: rgba(171,37,36,1);
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  right: 5px;
  font-size: 30px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 5px;
  width: 300px;
  }
}


#thebuttontogoback{
	text-decoration-style: solid;
	color: rgba(171,37,36,1);
	text-decoration-line: none;
}

/* main body */

#maininfo{
	position: absolute;
	left: 25px;
	top: 80px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 50px;
	width: 100%;
	z-index: 0;
	overflow: auto;
}

.textbits{
	position: relative;
	width: 80%;
}

.textbits2{
	position: relative;
	width: 85%;
}

#rightbarstopper{
	position:fixed;
	right: 0;
	height: 100%;
	bottom: 30px;
	border: 2px solid rgba(59,155,171,1);
	z-index: 10;
}

/* about page */

#about {
	top: 170px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

#about2 {
	top: 225px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

#aboutopen {
	top: 170px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

/* projects page */

#projects {
	top: 225px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 10;
}

#projects2 {
	top: 280px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

#projectsopen {
	top: 170px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 10;
}

.dragonimages {
  width: 100%;
  max-width: 1450px;
  height: auto;
}

/* news page */

#news {
	top: 280px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

#news2 {
	top: 335px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 1;
}

#newsopen {
	top: 170px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

/* contacts page */

#contact {
	top: 335px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 9;
}

#contact2 {
	top: 390px;
	text-align: left;
	background-image: linear-gradient(rgba(59,155,171,1), rgba(59,155,171,0));
	z-index: 1;
}

#contactopen {
	top: 170px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 10;
}

/* links page */

#links {
	top: 390px;
	text-align: left;
	background-image: linear-gradient(rgba(59,155,171,1), rgba(59,155,171,0));
	z-index: 9;
}

#linksopen {
	top: 170px;
	text-align: left;
	background-color: rgba(59,155,171,1);
	z-index: 10;
}

#48klink {
	color: #000000;
	text-decoration-line: none
}

/* Image grid */

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  background: rgba(59,155,171,1);
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 32.7%;
  max-width: 32.7%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a three column-layout after 1100px */
@media screen and (max-width: 1465px) {
  .column {
    flex: 32.7%;
    max-width: 50%;
  }
}

/* Responsive layout - makes a three column-layout after 800px */
@media screen and (max-width: 1100px) {
  .column {
    flex: 32.7%;
    max-width: 50%;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 100%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

/* footer stuff */

#thefooter{
	position: fixed;
	width: 100%;
}

#footercolour {
	position: fixed;
	bottom: 30px;
  	border: 2px solid rgba(59,155,171,1);
	width: 100%;
	z-index: 10;
}

#footercover {
	position: fixed;
	bottom: 0;
	height: 30px;
	width: 100%;
	background-color: rgba(255,255,255,1.00);
	z-index: 9;
}

#footerlinks {
	position: fixed;
	bottom: 5px;
	left: 10px;
	z-index: 10;
}

#footerlinks a {
	position: fixed;
	bottom: 5px;
	color: rgba(171,37,36,1);
	text-decoration-style: solid;
	text-decoration-line: none;
	left: 10px;
}

#footercopyright {
	position: fixed;
	bottom: 5px;
	right: 10px;
	z-index: 10;
}

#footerbackground {
	position: fixed;
	background-color: #FFFFFF;
	bottom: 0;
	left: 0;
	height: 10px;
	width: 100%;
	z-index: 9;
}