body {
	/* background: url(../images/texture_subtle_grunge.jpg); */
	background-color: #060C0F; 
	font-family: 'Helvetica Neue', arial, sans-serif;
	font-weight: 200;
	margin: auto;
	padding: 0;
}

h1 {
	font-family: 'font-family: 'Source Sans Pro', sans-serif;', sans-serif;
	font-size: 4em;
	font-weight: 900;
	letter-spacing: -3px;
	margin: 0 0 20px;
	text-align: center;
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #bbb;
}
hr {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
	margin: 25px 0;
	clear: both;
}


/* GENERIC WRAPPER */

.wrapper {
	margin: auto;
	width: 90%;
	padding: 10px 0;
}
.container {
	width: 1280px;
	margin: 0 auto;
}


/* LOGO WRAPPER */
.logoBannerWrap{
	background-color: #060C0F;
	width: 100%;
	margin: auto;
	padding: 0;
	text-align: center;
	}
	
.logoBanner{
	max-width: 1300px;
	margin: auto;
	background-size: auto 100%;	
	position: relative; /* makes the absolute positioning in the child div work */
}

.logoBanner img{
	display: block;
	width: 100%;
	max-width: 1300px;
	height: auto;
}

.pageRight{
	margin: 0 auto;
	display: inline-block;
	position: absolute;
	font-size: 0px;
	padding: 0px;
	top: 0;
	right: 0;
	height: auto;
	max-width: 110px;
	width: 8.46%;
	}
		
.pageRight img {
	display: block;
	max-width: 110px;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
	}	
	
.pageRight:hover img {	
	-webkit-transform:translateX(10px); /* Safari and Chrome */
    -moz-transform:translateX(.90); /* Firefox */
    -ms-transform:translateX(.90); /* IE 9 */
    -o-transform:translateX(.90); /* Opera */
     transform:translateX(10px);	
}





.wrapperLogo {
	margin: auto;
	width: 100%;
	height: auto;
	background-color: #000;
	background-size: auto 100%;
	padding: 0px 0;	
	position: relative;
}

.centerLogo {
	width: 100%;
	height: auto;
	max-width: 1300px;
	position: relative;
	margin: 0 auto;
	font-size: 0px;
	padding: 0px 0;
	background: url(../images/bg/logoBG.gif);
	background-size: auto 100%;
}


.containerLogo {
	font-size: 0;
	position: relative;
	height: auto;
	width: 16.23%;
	margin: 0;
	padding: 0px;
}

.containerLogo img{
	width: 100%;
	max-width: 211px;
	}
	


.containerMenu {
	font-size: 0;
	width: 13%;
	max-width: 100px;
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0px;

	/* margin: 0 auto; */
}

.containerMenu img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
	}
	
.containerMenu:hover img {	
	-webkit-transform:translateY(-4px); /* Safari and Chrome */
    -moz-transform:translateY(.90); /* Firefox */
    -ms-transform:translateY(.90); /* IE 9 */
    -o-transform:translateY(.90); /* Opera */
     transform:translateY(-4px);	
}









/* VIDEO ROW */

.wrapperVid {
/* removes thin horizontal line between divs in Chrome */
	margin: -1px auto;
	width: 100%;
	height: auto;
	background-image: url(../images/bg/vidcenter.jpg);
	background-repeat: repeat-x;
	background-size: auto 100%;
	padding: 0px 0;
	
}


.wrapperVidSnow {
/* removes thin horizontal line between divs in Chrome */
	margin: -1px auto;
	width: 100%;
	height: auto;
	background-image: url(../images/bg/vidCenterSnow.jpg);
	background-repeat: repeat-x;
	background-size: auto 100%;
	padding: 0px 0;
	
}

.wrapperVidVHS {
	margin: -1px auto;
	width: 100%;
	height: auto;
	background-image: url(../images/bg/vidCenterVHS.jpg);
	background-repeat: repeat-x;
	background-size: auto 100%;
	padding: 0px 0;
	
}

.containerVid {
	max-width: 1300px;
	height: auto;
	margin: 0 auto;
	font-size: 0px;
	padding: 0px;
}


.videoWrapColor {
	max-width: 1300px;
	position: relative;
	margin: 0 auto;
	text-align: center;
	background-color: #FF3333;
	}

.video {
	max-width: 1280px;
	position: relative;
	margin: 0 auto;
	text-align: center;
	}

.video img {
	width: 100%;
	max-width: 1300px;
	}
	
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:0px;
	/* padding-top:30px; // changed to 0 when some videos had a gap on top */
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}




	
	
/* TITLE WRAPPER */
.wrapperTitle {
	width: 100%;
	height: auto;
	background-color: #FF3333;
	background-size: auto 100%;
	padding: 0px 0;
}


.containerTitle {
	max-width: 1300px;
	height: auto;
	margin: -1px auto;
	font-size: 0px;
	padding: 0px;
	background-size: auto 100%;
}


.containerTitle img {
	width: 50%;
	max-width: 585px;
	}




/* CAST BAR */
.wrapperCast {
	/* removes thin horizontal line between divs in Chrome */
	margin: -1px auto;
	width: 100%;
	height: auto;
/* cast wrap background was too small a resolution - when it was being scaled up it created a thin line between the div */
	position: relative;
	top: 0px;
	background-image: url(../images/bg/castwrap1.gif);
	background-repeat: repeat-x;
	background-size: auto 100%;
	padding: 0px 0;
	background-color: #f33;

}


.containerCast {
/* removes thin horizontal line between divs in Chrome */
	max-width: 1300px;
	height: auto;
	margin: 0 auto;
	font-size: 0px;
	padding: 0px;
	position: relative;
}


.castCover {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 1300px;
	height: auto;
	margin: 0 auto;
	font-size: 0px;
	padding: 0px;
}



.castProfile {
	position: relative;
	/* dont hide overflow so cast bio doesnt get cut off when browser is scaled */
	/* overflow: hidden; */
	display: inline-block;
	width: 10%; /* this value + 2 should = 33% */
	font-size: 16px;
	font-size: 1rem;
	vertical-align: top;
}

.castProfile img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
	}
	
.castProfile:hover img {	
	-webkit-transform:translateY(-4px); /* Safari and Chrome */
    -moz-transform:translateY(.90); /* Firefox */
    -ms-transform:translateY(.90); /* IE 9 */
    -o-transform:translateY(.90); /* Opera */
     transform:translateY(-4px);	
}

.more {
	max-width: 436px;
	width: 33.33%;
	height: auto;
	position: relative;
	}
	
.more img{
	width: 100%;
	}	



	


/* This section is crucial in getting the nav menu to align with the video player

/* This number should be just below the .container size */
/* because the wrapper is set to 90%, this is 10% over in order to work */
@media (max-width: 1300px) {
	
	
	.containerVid {
		width: auto;
		padding: 0 100px;
	}
	
	.videoWrapColor {
		width: auto;
		padding: 0 10px;
	}
	.containerTitle {
		/* width: auto; */
		padding: 0 100px;
	}

	.containerCast {
		/* width: auto; */
		padding: 0 100px;
	}
	.centerLogo {
		width: auto;
		padding: 0 100px;
	}
	
	.logoBannerWrap{
		width: auto;
		padding: 0 100px;
		}

	.containerMenu {
	/*	width: auto */
		padding: 0 100px;
	}
		
	.container {
		width: auto;
		padding: 0 10px;
	}
	
	.rslides {
		width: auto;
		padding: 0 100px;
	}
	
}