/* CSS Document */
body {
	overflow-x:hidden;
	overflow-y:scroll;
	margin:0;
	padding:0;
}
a:link {
	color:inherit;
	text-decoration:none;
	font-weight:900;
}
a:visited {
	color:inherit;
}
a:hover {
	color:inherit;
	text-decoration:underline;
}
a:active {
	color:inherit;
}



.page {
	position:relative;
	display: inline-block;
	height:100vh;
	width:100%;
	padding:3vh 3vw;
	box-sizing:border-box;
	
	-webkit-box-shadow: inset 0px 0px 12VW 3px rgba(0, 0, 0, 0.31);
	-moz-box-shadow:    inset 0px 0px 12VW 3px rgba(0, 0, 0, 0.31);
	box-shadow:         inset 0px 0px 12VW 3px rgba(0, 0, 0, 0.31);
}
	.page > h1{
		font-family:"HelveticaNeue-Bold", "Helvetica_bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-weight:500;
		font-size:52px;
		margin:0;
		width:47vw;
	}
	.page > h3{
		margin:0;
		width:47vw;
	}
	.page > p{
		margin:0;
		width:47vw;
	}
	
.project {
	position:absolute;
	top:3vw;
	right:3vw;
	bottom:3vw;
	width:45vw;
	box-sizing:border-box;
	overflow:hidden;
	
	border-radius:1.2vh;
}
	.project .display{
		position:absolute;
/*		right:1%;
		top:1%;
		left:1%;
		height:60%;	*/
		
		right: 3%;
		top: 3%;
		left: 3%;
		height: 57%;
		
		background:#eee;	
		border-radius:0.8vh;
		
		text-align:center;
	}
	.project .controls{
		position:absolute;
		right:1%;
		bottom:1%;
		left:1%;
		height:37%;		
	}
		/* SIMPLE BUTTON */
		.controls .button-container{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			width:66%;	
		}
			.controls .button-container .button{
				width:95%;
				margin-top:10vh;
				height:15vh;
				border-radius:3vh;
				float:right;
				
				text-transform:uppercase;
				
				cursor:pointer;
			}
			.controls .button-container .button p{
				font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica,  Arial,"Lucida Grande", sans-serif; 
				text-align:center;
				line-height: 15vh;
				font-size: 3vh;
				text-align:center;
				vertical-align:central;
				margin:0;
				padding:0;
			}
		
		/* ON - OFF DIAL */
		.controls .dial-container{
			position:absolute;
			top:0;
			bottom:0;
			right:0;
			width:33%;	/**/
			background:url('../images/dial-background.svg') no-repeat;
			background-size:100% 100%;
			background-position:50% 50%;
		}
		
			.controls .dial{
				position:absolute;
				top:0;
				left:0;
				bottom:0;
				right:0;
				
				background:url('../images/dial.svg') no-repeat;
				background-size:68% 68%;
				background-position:50% 50%;
				
				overflow: hidden;
				-webkit-transition-duration: 0.8s;
				-moz-transition-duration: 0.8s;
				-o-transition-duration: 0.8s;
				transition-duration: 0.8s;
				-webkit-transition-property: -webkit-transform;
				-moz-transition-property: -moz-transform;
				-o-transition-property: -o-transform;
				transition-property: transform;
				
				cursor:pointer;
			}

			.controls .dial.dial-on{
				
				-webkit-transform: rotate(40deg);
				-moz-transform: rotate(40deg);
				-o-transform: rotate(40deg);
			}
			.controls .dial.dial-off{
				
				-webkit-transform: rotate(-40deg);
				-moz-transform: rotate(-40deg);
				-o-transform: rotate(-40deg);
			}
	
#intro {
	background:#090 url('../images/animate.svg') no-repeat;
	background-size:102% auto;
	background-position:0% 90%;
	color:#FD0;
	
}


/*  BOUNCE  */

#bounce {
	color:#444;
	
	background:#eee url('../images/bounce-background.gif') no-repeat bottom left;
	background-size:25% auto;
}
	#bounce .project {	
		background-color:#444;
		color:#eee;
	}
		#bounce .project .display{
			vertical-align:bottom;
			
			background: #eeeeee; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #b7b7b7 100%); /* FF3.6+ */
			background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eeeeee), color-stop(100%,#b7b7b7)); /* Chrome,Safari4+ */
			background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%,#b7b7b7 100%); /* Chrome10+,Safari5.1+ */
			background: -o-radial-gradient(center, ellipse cover, #eeeeee 0%,#b7b7b7 100%); /* Opera 12+ */
			background: -ms-radial-gradient(center, ellipse cover, #eeeeee 0%,#b7b7b7 100%); /* IE10+ */
			background: radial-gradient(ellipse at center, #eeeeee 0%,#b7b7b7 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#b7b7b7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}
			#bounce .project .display img{
				width:28vw;
				max-height: 37vh;
				height:auto;	
				position:absolute;
				left:50%;
				margin-left:-14vw;
				bottom:5vh;
			}

	#bounce .controls .button-container .button{
		color:#444;
		background:#eee;
		
		-webkit-box-shadow: inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #444444;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #444444;
		box-shadow:         inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #444444;
	}
	#bounce .controls .button-container .button:hover{
		background:#ddd;
		-webkit-box-shadow: inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #444444;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #444444;
		box-shadow:         inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #444444;
	}	
	
	
	
/*  FLASH  */		
			
#flash {
	color:#F90;
	
	background:#444 url('../images/flash-background.png') no-repeat bottom left;
	background-size:25% auto;
}
	#flash .project {	
		background-color:#F90;
		color:#444;
	}
		#flash .project .display{
			vertical-align:bottom;
			
			background: #444; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover, #444 0%, #222 100%); /* FF3.6+ */
			background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#444), color-stop(100%,#222)); /* Chrome,Safari4+ */
			background: -webkit-radial-gradient(center, ellipse cover, #444 0%,#222 100%); /* Chrome10+,Safari5.1+ */
			background: -o-radial-gradient(center, ellipse cover, #444 0%,#222 100%); /* Opera 12+ */
			background: -ms-radial-gradient(center, ellipse cover, #444 0%,#222 100%); /* IE10+ */
			background: radial-gradient(ellipse at center, #444 0%,#222 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}
			#flash .project .display img{
				width:20vw;
				max-height: 46vh;
				height:auto;	
				position:absolute;
				left:50%;
				margin-left:-10vw;
				bottom:5vh;
			}
			#flash .project .display img.flashlight{
			}

	#flash .controls .button-container .button{
		color:#F90;
		background:#eee;
		
		-webkit-box-shadow: inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #F90;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #F90;
		box-shadow:         inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #F90;
	}
	#flash .controls .button-container .button:hover{
		background:#ddd;
		-webkit-box-shadow: inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #F90;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #F90;
		box-shadow:         inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #F90;
	}	
	


/*  PULSE  */	
	
	#pulse {
	color:#E10005;
	
	background:#eee url('../images/pulse.svg') no-repeat bottom left;
	background-size:54% auto;
}
	#pulse .project {	
		background-color:#E10005;
		color:#eee;
	}
		#pulse .project .display{
			vertical-align:bottom;
			
			background: #eeeeee; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #ddd 100%); /* FF3.6+ */
			background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eeeeee), color-stop(100%,#ddd)); /* Chrome,Safari4+ */
			background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%,#ddd 100%); /* Chrome10+,Safari5.1+ */
			background: -o-radial-gradient(center, ellipse cover, #eeeeee 0%,#ddd 100%); /* Opera 12+ */
			background: -ms-radial-gradient(center, ellipse cover, #eeeeee 0%,#ddd 100%); /* IE10+ */
			background: radial-gradient(ellipse at center, #eeeeee 0%,#ddd 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ddd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}
			#pulse .project .display img{
				width:28vw;
				max-height: 37vh;
				height:auto;	
				position:absolute;
				left:50%;
				margin-left:-14vw;
				bottom:5vh;
			}

	#pulse .controls .button-container .button{
		color:#E10005;
		background:#eee;
		
		-webkit-box-shadow: inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #E10005;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #E10005;
		box-shadow:         inset 0px 0px 0px 1vh #eee, 
							inset 0px 0px 0px 2vh #E10005;
	}
	#pulse .controls .button-container .button:hover{
		background:#ddd;
		-webkit-box-shadow: inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #E10005;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #E10005;
		box-shadow:         inset 0px 0px 0px 1vh #ddd, 
							inset 0px 0px 0px 2vh #E10005;
	}	
	
	
	
/*  PULSE  */	
	
	#rubberBand {
	color:#f3d400;
	
	background:#3eb2eb url('../images/rubberBand-background.png') no-repeat bottom left;
	background-size:14% auto;
}
	#rubberBand .project {	
		background-color:#f3d400;
		color:#3eb2eb;
	}
		#rubberBand .project .display{
			vertical-align:bottom;
			
			background: #eeeeee; /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover, #eee 0%, #aaa 100%); /* FF3.6+ */
			background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eeeeee), color-stop(100%,#aaa)); /* Chrome,Safari4+ */
			background: -webkit-radial-gradient(center, ellipse cover, #eee 0%,#aaa 100%); /* Chrome10+,Safari5.1+ */
			background: -o-radial-gradient(center, ellipse cover, #eee 0%,#aaa 100%); /* Opera 12+ */
			background: -ms-radial-gradient(center, ellipse cover, #eee 0%,#aaa 100%); /* IE10+ */
			background: radial-gradient(ellipse at center, #eee 0%,#aaa 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#aaaaaa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}
			#rubberBand .project .display img{
				width:28vw;
				max-height: 37vh;
				height:auto;	
				position:absolute;
				left:50%;
				margin-left:-14vw;
				bottom:16vh;
			}

	#rubberBand .controls .button-container .button{
		color:#f3d400;
		background:#3eb2eb;
		
		-webkit-box-shadow: inset 0px 0px 0px 1vh #3eb2eb, 
							inset 0px 0px 0px 2vh #f3d400;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #3eb2eb, 
							inset 0px 0px 0px 2vh #f3d400;
		box-shadow:         inset 0px 0px 0px 1vh #3eb2eb, 
							inset 0px 0px 0px 2vh #f3d400;
	}
	#rubberBand .controls .button-container .button:hover{
		background:#3eb2eb;
		-webkit-box-shadow: inset 0px 0px 0px 1vh #3eb2eb, 
							inset 0px 0px 0px 2vh #f3d400;
		-moz-box-shadow:    inset 0px 0px 0px 1vh #3eb2eb, 
							inset 0px 0px 0px 2vh #f3d400;
		box-shadow:         inset 0px 0px 0px 1vh #3eb2eb, 
							inset 0px 0px 0px 2vh #f3d400;
	}	
	
	#rubberBand .controls .dial-container{
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		width:33%;	/**/
		
		background:url('../images/rubber-dial-background.svg') no-repeat;
		background-size:100% 100%;
		background-position:50% 50%;
	}
	
	#rubberBand .controls .dial{
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		
		
		background:url('../images/rubber-dial.svg') no-repeat;
		background-size:68% 68%;
		background-position:50% 50%;
	}