style.css

@import url(http://fonts.googleapis.com/css?family=Lato);
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500');

/* Reset */
html, body { 
	font-family: 'Roboto', sans-serif;
}

html, body, ul, li {
	margin: 0;
	padding: 0;
}

a:link, a:visited {
	text-decoration: none;
	color:#57B286;
}
a:hover {
	text-decoration: underline;
	color: #48FFA7;
}

a.set-active {
	color: #ff4081;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	nav {
		height: 150px;
	}
		
	img.carousel-image {
		height: 200px;
		width: auto; 
	}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    nav {
		height: 200px;
	}
	
	img.carousel-image {
		height: 500px;
		width: auto;
	}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 900px) {
	nav {
		height: 50px;
		background-color: #212121;
	}
	
	nav .nav-title {
		text-align:center;
		font-size: 1.3em;
		font-weight: 700;
		padding: 10px;
	}
	
	nav ul.nav-menu {
		list-style-type:none;
		text-align: center;
	}
	
	nav ul.nav-menu li {
		display: inline;
		padding: 10px;
	}
	
	/*-----------------------------------CAROUSEL-----------------------------------*/
	
	.carousel {
		height: auto;
		width: auto;
		padding-top: 15px;
		padding-bottom: 15px;
		border-top: 1px solid #444;
		border-bottom: 1px solid #444;
		list-style-type: none;
		overflow: hidden;
		-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
		transition: background 1s;
	}
	
	#fade-left {
		height: 10%;
		width: 200px;
		position: absolute;
		z-index: 12;
		background: -moz-linear-gradient(left,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.35)), color-stop(85%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0) 85%,rgba(255,255,255,0) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
	}
	
	#fade-right {
		right: 0px;
		height: 100%;
		width: 200px;
		position: absolute;
		z-index:12;
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,0.35) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(15%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.35))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,0.35) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,0.35) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,0.35) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,0.35) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#59ffffff',GradientType=1 ); /* IE6-9 */
	}
	
	.carousel-list {
		margin: 0;
		padding: 0;
		display: table;
		list-style-type: none;
	}
	
	.carousel-list li {
		position: relative;
		display: table-cell;
		padding-right: 5px;
		width: auto;
		/*opacity: 0.4;*/
		/*filter: alpha(opacity=40); /* For IE8 and earlier */
		/*-webkit-transition: opacity 0.2s ease-in-out;
		-moz-transition: opacity 0.2s ease-in-out;
		-o-transition: opacity 0.2s ease-in-out;
		-ms-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;*/
		/*-webkit-backface-visibility: hidden;
		-webkit-transform:translate3d(0,0,0);*/
	}
	
	.carousel img.carousel-image {
		display: block;
		height: 400px;
		padding: 0;
		margin: 0;
	}
	
	.carousel li.focus img.carousel-image {
		/*opacity: .999;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	
	.carousel li .carousel-image-overlay {
		opacity: 0;
		position: absolute;
		z-index: 10;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		height: 0;
	}
	
	.carousel li .carousel-image-title {
		left: 0;
		top: 0;
		font-size: 1.15em;
		color: white;
		background: black;
		padding: 5px;
	}
	
	.carousel li .carousel-image-info {
		right: 0;
		bottom: 0;
		font-size: 1.15em;
		color: white;
		background: black;
		padding: 5px;
		margin-right: 5px;
	}
	
	.carousel li.focus .carousel-image-overlay {
		opacity: 1;
		height: 1.3em;
		filter: alpha(opacity=100); /* For IE8 and earlier */	
	}
	
	/*-----------------------------------SET NAV-----------------------------------*/
	
	.sets {
		color: black; /* white */
		position: absolute;
		z-index: 11;
		top: 0;
		left: 0;
		/*opacity: 0.9;*/
		height: 100%;
		background-color: #000;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		box-shadow: 3px 3px 2px #444;
	}
	
	.sets.set-visible {
		padding-left: 10px;
		width: 14%;
		min-width: 185px;		
	}
	
	.sets.set-hidden {
		width: 0%;
		min-width: 0px;
	}
	
	.sets .sets-title {
		font-size: 1.3em;
		padding: 20px 10px;	
	}
	
	.sets .set-box, .sets .sets-title {
		-webkit-transition: all .1s ease-in-out;
		-moz-transition: all .1s ease-in-out;
		-o-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		transition: all .1s ease-in-out;
	}
	
	.sets.set-hidden .set-box, .sets.set-hidden .sets-title {
		display: block;
		opacity: 0;
		overflow: hidden;
	}
	
	.sets.set-visible .set-box, .sets.set-visible .sets-title {
		display: block;
		opacity: 1;
		overflow: hidden;
	}
	
	.sets.set-visible .set-box {
		padding: 5px 10px 5px 10px;
	}
	
	.sets.set-visible .sets-title {
		width: 100px; /* prevent words from wrapping down */
	}
	
	.sets .sets-close {
		position: absolute;
		right: 20px;
		bottom: 50px;
		border: 1px solid red;
	}
	
	/*-----------------------------------INFO-----------------------------------*/
	
	.info {
		display: table;
		width: 100%;
		padding: 10px 5px 10px 5px;
	}
	.info ul {
		list-style-type: none;
		display: table-row;
		width: 100%;
	}
	
	.info ul li {
		text-align: center;
		width: 20%;
		height: 100px;
		display: table-cell;
	}
	
	.info ul li .info-title {
		text-size: 1.15em;
		font-weight: bold;
	}
	
	.info ul li #info-fstop-circle {
		border-radius:50%;
		behavior: url(PIE.htc); /* IE8 */
		border: 2px solid #57B286;
		width: 0px;
		height: 0px;
		left: 50%;
		margin-left: 0px;
		position: relative;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		margin: 10px 0px 10px 0px;
	}
	
	.info ul li .info-fstop {
		font-style:italic;
	}
	
	.info ul li .info-speed {
		
	}
	
	.info-speed-wrapper {
	  margin: 10px 0px 10px 0px;
	  width: 100px; /* Set the size of the progress bar */
	  height: 100px;
	  position: absolute; /* Enable clipping */
	  left: 50%;
	  margin-left: -40px;
	  clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
	}
	/* Set the sizes of the elements that make up the progress bar */
	.info-speed-circle {
	  width: 80px;
	  height: 80px;
	  border: 2px solid #57B286;
	  border-radius: 50px;
	  position: absolute;
	  clip: rect(0px, 50px, 100px, 0px);
	}
	/* Using the data attributes for the animation selectors. */
	/* Base settings for all animated elements */
	div[data-anim~=base] {
	  -webkit-animation-iteration-count: 1;  /* Only run once */
	  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
	  -webkit-animation-timing-function:ease-out; /* Linear animation */
	}

	.info-speed-wrapper[data-anim~=wrapper] {
	  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
	  -webkit-animation-delay: .5s; /* Wait half of the animation */
	  -webkit-animation-name: close-wrapper; /* Keyframes name */
	}

	.info-speed-circle[data-anim~=left] {
	  -webkit-animation-duration: 1s; /* Full animation time */
	  -webkit-animation-name: left-spin;
	}

	.info-speed-circle[data-anim~=right] {
	  -webkit-animation-duration: .5s; /* Half animation time */
	  -webkit-animation-name: right-spin;
	}
	/* Rotate the right side of the progress bar from 0 to 180 degrees */
	@-webkit-keyframes right-spin {
	  from {
		-webkit-transform: rotate(0deg);
	  }
	  to {
		-webkit-transform: rotate(0deg);
	  }
	}
	/* Rotate the left side of the progress bar from 0 to 360 degrees */
	@-webkit-keyframes left-spin {
	  from {
		-webkit-transform: rotate(0deg);
	  }
	  to {
		-webkit-transform: rotate(-45deg);
	  }
	}
	/* Set the wrapper clip to auto, effectively removing the clip */
	@-webkit-keyframes close-wrapper {
	  to {
		clip: rect(auto, auto, auto, auto);
	  }
	}

	
}

@media only screen 
and (min-width: 320px) 
and (max-width : 800px) {
/*--------------------------------NAV-------------------------*/
	nav {
		height: 50px;
	}
	
	nav .nav-title {
		text-align:center;
		font-size: 1.3em;
		font-weight: 700;
		margin: 10px;
	}
	
	nav ul.nav-menu {
		list-style-type:none;
		text-align: center;
	}
	
	nav ul.nav-menu li {
		display: inline;
		margin: 10px;
	}
	
	.carousel img.carousel-image {
		display: block;
		height: auto;
		width: 100%;
		padding: 0;
		margin: 0;
	}
		
	/*-----------------------------------SET NAV-----------------------------------*/
	/*---------------------make each set's clickable area 100%---------------------*/
	.sets {
		color: white;
		/*float: left;*/
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.9;
		height: 500px;
		background-color: #000;
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	
	.sets.set-visible {
		z-index: 11;
		padding-left: 10px;
		width: 200px;
	}
	
	.sets.set-hidden {
		z-index: -1;
		height: 0%;
		width: 0%;
	}
	
	.sets .sets-title {
		font-size: 1.3em;
		padding: 20px 10px;	
	}
	
	.sets .set-box, .sets .sets-title {
		-webkit-transition: all .1s ease-in-out;
		-moz-transition: all .1s ease-in-out;
		-o-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		transition: all .1s ease-in-out;
	}
	
	.sets.set-hidden .set-box, .sets.set-hidden .sets-title {
		display: block;
		opacity: 0;
		overflow: hidden;
	}
	
	.sets.set-visible .set-box, .sets.set-visible .sets-title {
		display: block;
		opacity: 1;
		overflow: hidden;
	}
	
	.sets.set-visible .set-box {
		padding: 5px 10px 5px 10px;
	}
	
	.sets.set-visible .sets-title {
		width: 100px; /* prevent words from wrapping down */
	}
	
	.sets .sets-close {
		position: absolute;
		right: 20px;
		bottom: 50px;
	}
}

@media only screen 
and (min-height: 740px) {
	nav {
		height: 70px;
	}
	
	.carousel img.carousel-image {
		display: block;
		height: 550px;
		padding: 0;
		margin: 0;
	}
}