/* RESET
----------------------------------------------------------------------------------------------------*/
a, abbr, acronym, address, applet, article, aside, audio, 
b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, 
fieldset, figcaption, figure, form, footer, 
header, hgroup, h1, h2, h3, h4, h5, h6, html, 
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, output, p, pre, q, ruby, 
s, samp, section, main, small, span, strike, strong, sub, summary, sup, 
tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,
u, ul, var, video { 
	font-family: inherit; 
	font-size: 100%; 
	font-weight: inherit; 
	font-style: inherit; 
	vertical-align: baseline; 
	white-space: normal;
	text-align: left; 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0;
	background: transparent; 
}

article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section, main { 
	display: block; 
}
								  
ol, ul { 
	list-style: none; 
}
blockquote, q {
	quotes: none; 
}

table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}

/* MAIN
----------------------------------------------------------------------------------------------------*/

body {
	font-family: 'Exo 2', sans-serif;
	font-weight: 300;
	font-size: 14pt;
	line-height: 20pt;
}

b {
	font-weight: 700;
}

h1, h2 {
	text-align: center;
	font-size: 1.75em;
	line-height: 1.15em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.10em;
}

h3 {
	text-align: inherit;
	line-height: 1.5em;
	font-size: 1.25em;
	font-weight: 700;
}

@media screen and (max-width: 480px) { 
	h1, h2 {
		font-size: 1.25em;
	}

	h1, h2 {
		font-size: 1.10em;
	}
}

h2 {
	margin: 0 0 1em 0;
}

p {
	margin: 0 0 2em 0;
}

/*	MAIN CONTAINER */
.container { 
	max-width: 800px;
	margin: 0 auto; 
} 

.logo {
	width: 60%; 
	display: block;
	float: right
}

@media screen and (max-width: 950px) { 
	.logo {
		width: 100%;
	}
}

@media screen and (max-width: 550px) { 
	.logo {
		width: 150%;
	}
}

.banner {
	position: relative;
	width: 100%;
	height: 100vh;
	background: url("images/keyshot.jpg") no-repeat;
	background-position: center;
	background-size: cover;
	background-attachment:fixed;
}

.menu {
    color: white;
    padding: 0.3em;
    background-color: rgba(0, 0, 0, 0.8);
    font-size: 0.8em;
	text-transform: uppercase;
    text-align: center;
}

.menu a:link, .menu a:visited, .menu a:hover {
    padding-left: 1em;
    padding-right: 1em;
    color: white;
    text-decoration: none;
}

.menu a:hover {
    text-decoration: underline;
}

body.is-mobile > .banner {
	background-attachment: scroll; 
}

.tagline {
	display: inline-block;
	position: relative;
	color: white;
	text-align: center;
	font-size: 2.75em;
	line-height: 1.0em;
	font-weight: 400;

    animation-duration: 1s; 
    animation-fill-mode: both; 
    animation-iteration-count:1; 
	animation-name: tagline;
}

@media screen and (max-width: 640px) { 
	.tagline {
		font-size: 2.00em;
	}
}

@media screen and (max-width: 480px) { 
	.tagline {
		font-size: 1.4em;
	}
}

@media screen and (max-width: 320px) { 
	.tagline {
		font-size: 1.0em;
	}
}

.tagline:before, .tagline:after {
	position: absolute;
	content: "";
	width: 110%;
	height: 3px;
	background: white;
}

.tagline:before {
	top: -0.2em;
	left: -5%;
}

.tagline:after {
	bottom: -0.3em;
	right: -5%;
}

@keyframes tagline { 
    0% { 
        opacity: 0; 
		transform: translateY(100px); 
    } 
    100% { 
        opacity: 1; 
		transform: translateY(0); 
    } 
} 

.section-fast {
	background-color: #ff00b4;
	color: white;
}

.section-white {
	clear: both;
	background-color: white;
}

.section-black {
	background-color: black;
	color: white;
}

.section-fast a:link, .section-fast a:visited, .section-fast a:hover,
.section-banner a:link, .section-banner a:visited, .section-banner a:hover,
.section-black a:link, .section-black a:visited, .section-black a:hover
{
	color: white;
}

.section-banner {
	background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("images/keyshot.jpg");
	background-position: center;
	background-size: cover;
	background-attachment:fixed;
	color: white;
}

body.is-mobile > .section-banner {
	background-attachment: scroll; 
}

.wrapper {
	padding: 4em 0 4em 0;
}

@media screen and (max-width: 480px) { 
	.wrapper {
		padding: 2em 0 2em 0;
	}
}

.fast {
	color: #ff00b4;
	font-weight: 700;
}

/* Responsive Columns */

.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
	clear: both;
	padding: 0px;
	margin: 0px;
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
		width: 100%;
	}
}

.col2 {
	display: block;
	float:left;
	margin: 1% 0 1% 2.5%;
}
.span_1_of_2_left { width: 47%; text-align: right; }
.span_1_of_2_right { width: 47%; text-align: left;  }

@media only screen and (max-width: 800px) {
	.col2 { margin: 1% 0 1% 0%; width: 100%; }
	.span_1_of_2_left, .span_1_of_2_right { width: 100%; text-align: center;}
}

/* Wallpapers */

.wallpapers { 
	max-width: 900px;
	margin: 0 auto; 
} 

.wallpapers h2 {
	height: 1em; line-height: 1em; overflow:hidden;
	margin-bottom: 0.2em;
}

.wallpapers .head {
	margin-bottom: 1em;
}

ul.wallpapers {
	padding-left: 2px;
	height: 394px;
}

ul.wallpapers li {
	float: left;
	padding: 0;
	margin: 15px;
	line-height: 0;
	list-style-type: none;
	position: relative;
	overflow: hidden;
}

ul.wallpapers li span {
	position: absolute;
	left: 0;
	bottom: -300px;
	width: 100%;
	height: 130px;
	background: rgba(0, 0, 0, 0.8);
	display: block;
	transition: all 500ms ease;
	padding-top: 20px;
}

ul.wallpapers li:hover span {
	bottom: 0;
}

ul.wallpapers li a {
	font-size: 12pt;
	display: block;
	text-align: center;
	line-height: 180%;
	color: white;
	text-decoration: none;
}

ul.wallpapers li a:hover {
	background-color: white;
	color: black;
}
/* YouTube */

.video-container {
	width: 90vw; height: 25.3125vw;
	margin: 0 auto;
}

.video-block {
	width: 48%; 
	float: left;
	margin: 0 2%;
	padding-bottom: 2em;
}

.video-block:nth-child(odd) { margin: 0; } /* all browsers except IE6 and lower */

.video-container h2 {
	height: 1em; line-height: 1em; overflow:hidden;
}

/*https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php*/
.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-download {
	text-align: center;
}

@media only screen and (max-width: 1280px) {
	.video-container {
		height: auto;
	}
	.video-container2 {
		width: 90vw; height: 50.625vw;
	}
	.video-container h2 {
		padding-top: 2em;
	}
	.video-download {
		padding-top: 25px;
	}
	.video-block {
		display: block;
		clear: both;
		width: 100%;
		float: none;
		margin: 0;
	}
}

/* Swiper */
/*http://stackoverflow.com/questions/1495407/css-maintain-div-aspect-ratio*/
.swiper-container {
/*width: 100%; height: 56.25vw;*/
width: 90vw; height: 50.625vw;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #000;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}

/* Animation */

.animated { 
    animation-duration: 2s; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
} 

@keyframes fadeOutDown { 
    0% { 
        opacity: 0; 
        transform: translateY(0); 
    } 
    10% { 
        opacity: 1;
	}		
	50% {
        opacity: 1; 
        transform: translateY(0); 
	}
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
} 

.fadeOutDown { 
    animation-name: fadeOutDown; 
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
}

/* Styles */

a:link, a:visited, a:hover
{
}

.smallprint {
	margin: 0px auto;
	color:#aaaaaa;
	font-size: 11pt; 
	line-height: 16pt;
	text-align: center; 
	padding-top: 0.5em;
	padding-bottom: 1em;
}

.smallprint a:link, .smallprint a:visited, .smallprint a:hover
{
	color:#cccccc;
}