@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,700|Varela+Round&subset=latin-ext');

.clr {clear: both;}

body {margin: 0; font-family: "Fira Sans", verdana, arial, sans-serif; color: #fff; background: #000 url(../img/back.jpg) repeat-y center top; background-attachment: fixed;}
#header {width: 100%; height: 800px; background-size: cover; background-position: top center; text-align: center; position: relative;}
#header > #logo {width: 50%; position: absolute; bottom: 50px; left: 50%; margin-left: -25%;}
#header > #logo > img {width: 100%;}
header {display: none; width: 100%; height: 80px; padding: 5px; background-color: rgba(0, 0, 0, .6); position: fixed; top: 0; z-index: 1000;}
p {max-width: 800px; margin: 1em auto; font-size: 16pt; line-height: 1.4em;}
h1 {text-align: center; font-family: "Varela Round", Verdana, sans-serif; font-size: 30pt; font-weight: normal; margin: .5em auto; text-transform: uppercase;}
h2 {clear: both; text-align: center; font-family: "Varela Round", Verdana, sans-serif; font-size: 24pt; font-weight: normal; margin: .5em auto; text-transform: uppercase;}
iframe {border: 0;}
a {color: #666;}
.center {text-align: center;}
.right {text-align: right;}
.small {font-size: 12pt;}

#slide {margin-top: 0; }

#cast {max-width: 1040px; margin: 0 auto; text-align: center;}
#cast > div {display: inline-block; text-align: center; vertical-align: top; margin: 5px; cursor: pointer;}
#cast > div > img {opacity: .4; border: 2px solid #888;}
#cast > div.active > img {opacity: 1;}
#cast-text {max-width: 800px; margin: 1em auto;}
#cast-text h3 {max-width: 800px; font-family: "Varela Round", cursive; font-size: 30pt; font-weight: normal; text-align: center; margin: 0 auto;}
#cast-text > div {display: none;}
#cast-text > div.active {display: block;}

#gfx-comp
{
 width: 1280px;
 text-align: center;
 margin: 0 auto;
}

#gfx-comp > div
{
 margin-top: 1em;
}

#gfx-comp > div > img.comp-th
{
 border: 2px solid #888;
 cursor: pointer;
}

div.video {max-width: 1280px; margin: 0 auto;}

@media only screen and (min-width: 1900px)
{
 #header > #logo {width: 36%; margin-left: -18%;}
}

@media only screen and (max-width: 1280px)
{
 #header > #logo {width: 50%; margin-left: -25%;}
 div.video {margin: 0 auto; width: 98%; position: relative; padding-bottom: 56.25%; height: 0;}
 div.video > iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

 #gfx-comp {width: 100%;}
 #comp-hilo img {width: 100%;}
}

@media only screen and (max-width: 1060px)
{
 iframe#banner970 {display: none;}
 #cast > div {width: 13%; margin: 0 1%;}
 #cast > div > img {width: 100%;}
}

@media only screen and (max-width: 860px)
{
 img.width100 {max-width: 100%;}
 #header > #logo {width: 70%; margin-left: -35%; bottom: 10px;}
 #header {height: 400px;}
 p {margin: 1em;}
}

@media only screen and (max-width: 860px)
{
 #gfx-comp {display: none;}
}

@media only screen and (max-width: 480px)
{
 header {height: 40px; overflow: hidden;}
 h1 {font-size: 30pt;}
 h2 {font-size: 24pt;}
 #cast-text h3 {font-size: 20pt;}
 header img {height: 40px;}
 #header > #logo {width: 90%; margin-left: -45%;}
 .parallax-window {height: 400px !important;}
}