@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Alex+Brush);

.clr {clear: both;}

body {margin: 0; background-color: #000; font-family: "Source Sans Pro", verdana, arial, sans-serif; color: #eee;}
#header {width: 100%; height: 725px; background-size: cover; background-position: center; text-align: center; position: relative;}
#header > #logo {width: 50%; position: absolute; bottom: 0; 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: "Alex Brush", cursive; font-size: 50pt; font-weight: normal; margin: .5em auto;}
h2 {text-align: center; font-family: "Alex Brush", cursive; font-size: 40pt; font-weight: normal; margin: .5em auto;}
iframe {border: 0;}
a {color: #fff;}
.center {text-align: center;}
.small {font-size: 12pt;}

#cast {max-width: 1040px; margin: 0 auto; text-align: center;}
#cast > div {display: inline-block; text-align: center; vertical-align: top; margin: 10px; cursor: pointer;}
#cast > div > img {opacity: .6;}
#cast > div.active > img {opacity: 1;}
#cast-text {max-width: 800px; margin: 1em auto;}
#cast-text h3 {max-width: 800px; font-family: "Alex Brush", cursive; font-size: 30pt; font-weight: normal; text-align: center; margin: 0 auto;}
#cast-text > div {display: none;}
#cast-text > div.active {display: block;}

#drake-change
{
 width: 640px;
 text-align: center;
 margin: 0 auto;
}

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;}
}

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

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

}

@media only screen and (max-width: 640px)
{
 #drake-change {width: 100%;}
 #drake-change img {width: 100%;}
}

@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;}
}