html {
	/* Allow scrolling here, since body is overflow: hidden. */
	overflow: auto;
	
	/* MEXICAN FLAG background gradient
	background:
		-webkit-linear-gradient(left, green, green, white, white, red, red);
	*/

	background: black /* GRAHAM ADDED - BLACK BG */

}

body {
	position: relative;
	margin: 0;
	
	/* Stop elements positioned outside body, like the parallax layers, from growing body. */
	overflow: hidden;
	font-family: "FIDO", Helvetica, sans-serif;
}

a {
	text-decoration: none;
}

a img {
	-webkit-transition: -webkit-filter 0.7s;
	transition: filter 0.7s;
}

a:hover img {
	-webkit-filter: brightness(1.5);
	filter: brightness(1.5);
}

.shadowed {
  -webkit-filter: drop-shadow(0px 0px 15px rgba(128, 0, 0, 1));
  filter: drop-shadow(0px 0px 15px rgba(0, 0, 255, 1));
}

#logo {
	display: block;
	width: 66%;
	max-width: 960px;
	
	/* Out of the flow, #logo won't interfere with #videosection's positioning. */
	position: absolute;
	
	/* Center an absolute element */
	left: 50%;
	
	/* Center an absolute element */
	top: 50vh;
	
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
}

@keyframes pulse {
	from {
		opacity: 0.2;
	}
	
	to {
		opacity: 1;
	}
}

#scrollprompt {
	display: block;
	
	position: absolute;
	
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	
	top: 80vh;
}

.pulsing {
	-webkit-animation: pulse 0.75s ease-in-out infinite alternate;
    animation: pulse 0.75s ease-in-out infinite alternate;	
}

.paused {
	-webkit-animation-play-state: paused;
	animation-play-state: paused !important;
}

#videosection {
	position: relative;

 	max-width: 960px;
	min-width: 540px;
	width: 90%;

	margin-left: auto;
	margin-right: auto;
}

#video {
	position: relative;
	width: 100%;
}

/* Changes #video's height to keep a 16:9 aspect ratio. */
/* This psuedo-element technique doesn't break when #video reaches max-width, */
/* which would happen when this padding-top trick was on #video. */
#video:before {
	content: "";
	display: block;
	padding-top: 56.25%; /* 9/16 for 16:9 */
}

/* Defeat the padding and aspect-ratio trick to position and size the actual video. */
#video > img, #video > iframe {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

ul#screenshots {
    list-style: none;
    margin: auto;
    margin-top: 30px;
    padding: 0;
    width: 660px;
}

ul#screenshots li {
    padding: 0;
    margin: 10px;
    display: inline-block;
}

ul#screenshots li a img{
    display: block;
    width: 200px;
    padding: 0;
    margin: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
}

ul#screenshots li a:hover img {
    opacity: 0.5;
}

#comingsoon {
	padding-top: 2%; /* 10% of video height would be padding-top: 5.625%;, which is 540/960 as a padding-top percentage. */
}

h2 {
	margin: 0;
	
	text-align: center;
	font-size: 50pt;
	font-weight: normal;
	
	color: #e86606; /* Colour for black background */
	/* color: black; */ /* Colour for mexican background */
}

h3 {
	margin: 0;
	
	text-align: center;
	font-size: 25pt;
	font-weight: normal;
	
	color: #e86606; /* Colour for black background */
	/* color: black; */ /* Colour for mexican background */
}

#comingsoon h3 {
	width: 50%;
	text-align: center;
	min-width: 520px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.1;
}

#comingsoon img {
	display: block;
	
	margin-left: auto;
	margin-right: auto;
	
	padding-top: 2%; /* Just under 5% of video height */
}

#footer {
	
	padding-top: 0px;
	padding-bottom: 20px;	
		
	width: 100%;
	text-align: center;


	/* Black background */
	background-color: black;

	/* Mexican Flag Background */
/*	background:
		-webkit-linear-gradient(left, green, green, white, white, red, red);
*/

	z-index: 50;
}

#footer .qrcode {
	left: 90%;

	width: 150px;
	height: 150px;

	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
	
	float: right;
}

#footer .awards {

	max-width: 300px;
	max-height: 150px;

	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;

	display: block;
    margin-left: auto;
    margin-right: auto
}

#footer .icon {
	width: 44px;
	height: 44px;
	
	padding-right: 20px;
	padding-left: 20px;
	
	display: inline-block;
}

#footer a {
	color: #b9c08d; /* colour for black background */
	/* color: black; */ /* colour for mexican background */
}

.footerlink:hover {

	text-decoration: underline;

	-webkit-text-decoration-color: #bbaf9d;
	-moz-text-decoration-color: #bbaf9d;
	text-decoration-color: #bbaf9d;
}

/* Layers */

#mainsection {
	position: relative;
	width: 100%;
	margin-top: 100vh;
}

#subscribe {
    display: block;
    width: 450px;
    height: 30px;
    margin: 20px auto 50px auto;
}

#subscribe h3 {
    /*-webkit-transform: translateZ(0);*/
    font-size: 18px;
    margin-bottom: 35px;
}

#subscribe .text,#subscribe .submit {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    float: left;
    height: 20px;
    border: 0;
    padding: 10px;
    margin: 0;
    font-family: Helvetica,sans-serif;
    font-size: 20px;
    outline: 0;
    font-weight: normal;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

#subscribe .text {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
    width: 290px;
    background-color: #b9c08d; 
    color: #998337;
}

#subscribe .submit {
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    height: 40px;
    width: 140px;
    background-color: #e86606;
    color: black;
    cursor: pointer;
    -webkit-transition: background-color .1s;
    -moz-transition: background-color .1s;
    -o-transition: background-color .1s;
    transition: background-color .1s;
}

#subscribe .submit:hover {
	-webkit-filter: brightness(1.2);
	filter: brightness(1.2);
}

#subscribe .submit:active {
	-webkit-filter: brightness(0.9);
	filter: brightness(0.9);
}

input.text::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color: grey;
}

input.text:-moz-placeholder,textarea:-moz-placeholder {
    color: grey;
}

input.text.placeholder,textarea.placeholder {
    color: grey!important;
}


/* GJS: Deal with all of the media section below */

/* Applies when the screen is 'tall', not wide. */
@media only screen and (max-aspect-ratio: 1/1) {
	
}

/* At this size, the video section can't have any padding. */
@media only screen and (max-width: 600px) {
	
	#videosection {
	
		width: 100%;
	
		margin-left: auto;
		margin-right: auto;
		
		min-width: unset;
	}

	h2 {
		text-align: center;
		font-size: 40pt;
	}
	
	h3 {
		text-align: center;
		font-size: 25pt;
	}

}


@media only screen and (max-width: 480px) {
	
	#mainsection {
		margin-top: 55vh;
	}
	
	#scrollprompt {
		display: none;
	}
	
	#logo {		
		/* Center an absolute element */
		top: 25vh;
	}
	
	#clouds {
		top: 12.5vh;
	}
	
	#comingsoon {
		padding-top: 10%; /* 10% of video height would be padding-top: 5.625%;, which is 540/960 as a padding-top percentage. */
	}
	
	h2 {
		text-align: center;
		font-size: 28pt;
	}
	
	h3 {
		text-align: center;
		font-size: 20pt;
	}

	#footer .icon {		
		padding-right: 10px;
		padding-left: 10px;
	}
	
	#subscribe {
    display: block;
    width: 300px;
    height: 30px;
    margin: 20px auto 50px auto;
	}

	#subscribe .text {
		width: 190px;
	}

	#subscribe .submit {
		width: 90px;
	}

}

@media only screen and (max-width: 320px) {
	
	#subscribe {
    display: block;
    width: 250px;
    height: 30px;
    margin: 20px auto 50px auto;
	}
	
	#subscribe .text {
		width: 150px;
	}
	
	#subscribe .submit {
		width: 80px;
	}
	
	h2 {
		text-align: center;
		font-size: 22pt;
	}
	
	h3 {
		text-align: center;
		font-size: 15pt;
	}
}