/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Page Styles
================================================== */
	#background_wrapper{
		min-height:85%;
		position:relative;
	}
	#header_background{
		background:url('../images/header_background.jpg');
		background-size:100% 100%;
		background-repeat:no-repeat;
		background-position:center;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		z-index:-2\9;
	}
	#mobile_background{
		display:none;
		background:url('../images/mobile_background.jpg');
		background-size:100% 100%;
		background-repeat:no-repeat;
		background-position:center;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	#horses{
		position:absolute;
		margin:auto;
		left:0;
		right:0;
		bottom:0;
		bottom:-50px\9;
		z-index:-1\9;
	}
	#horses div{
		display:inline;
		vertical-align:bottom;
	}
	#horse_1, #horse_2, #horse_3, #horse_4{
		display:inline;
	}
	#mobile_horses{
		display:none;
		position:absolute;
		bottom:-30px;
		width:100%;
		margin:0 auto;
	}
	#header_container{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		text-align:center;
	}
	#open_menu{
		display:none;
		position:absolute;
		right:0px;
	}
	#mobile_navigation{
		display:none;
	}
	#mobile_navigation_header{
		border-bottom:1px solid #cbb8a5;
		text-align:right;
	}
	#mobile_navigation_header img{
		margin:20px 20px 10px 20px;
	}
	#mobile_social{
		margin-top:3em;
	}
	#header_title{
		padding-top:5em;		
	}
	#header_title h1{
		text-transform:uppercase;
		color:#020202;
		font-weight:200;
	}
	strong { 
		font-size:115%;
	}
	#logo_background{
		background-color:#000;
		text-align:center;
		height:100px;
		padding:1.5em 0;
	}
	#mobile_logo_background{
		display:none;
		background-color:#000;
		text-align:center;
		height:100px;
		padding:1.5em 0;
	}
	#header_logo img{
		padding-bottom:2em;
	}
	#nav_background{
		background-color:#171717;
		padding:1em 0;
		height:60px;
		z-index:2;
		top:0;
		width:100%;
	}
	#nav_background{
		position:relative;
	}
	#nav_links{
		text-align:center;
	}
	.home_link, .trailer_link, .synopsis_link, .director_link, .cast_link {
		font-size:1.8em;
		display:inline-block;
		margin:0 1em;
		border-radius:20px;
		width:80px;
		border:1px solid #171717;
		padding:0.6em 0.8em;
		cursor:pointer;
	}
	.home_link, .trailer_link:hover, .synopsis_link:hover, .director_link:hover, .cast_link:hover {
		border:1px solid #cbb8a5;
	}
	#nav_links a{
		color: #cbb8a5;
	}
	#nav_top{
		float:right;
		margin-top:10px;
		cursor:pointer;
	}
	/*#movie_trailer_container{
		position:relative;
		padding-bottom:56.25%;
	}
	#movie_trailer_container_mobile{
		display:none;
		position:relative;
		padding-bottom:56.25%;
		width:100%;
	}*/
	#background_video_container{
		position:relative;
		overflow:hidden;
		width:100%;
		max-height:590px;
		
	}
	#background_video_container video{
		width:100%;
	}
	#video_buttons_container{
		position:absolute;
		margin:auto;
		right:0;
		left:0;
		top:15%;
		bottom:0;
		display:table-row;
	}
	#info_trailer_btn_container:hover , #trailer_btn_container:hover , #storyboards_btn_container:hover {
		opacity:0.9;
	}
	.info_trailer_btn_frame, .trailer_btn_frame, .storyboards_btn_frame{
		background-color:rgba(203,184,165,0.5);
		padding:5px;
		max-width:236px;
		margin:0 auto;
		position:relative;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	.info_trailer_btn_frame h3, .trailer_btn_frame h3, .storyboards_btn_frame h3{
		text-align:center;
		bottom:5%;
		position:absolute;
		width:100%;
	}
	.mobile_trailer_frame{
		display:none;
	}
	#info_trailer_btn{
		background:url('../images/video_btn_1.jpg');
		height:394px;
	}
	#trailer_btn{
		background:url('../images/video_btn_2.jpg');
		height:394px;
	}
	#storyboards_btn{
		background:url('../images/video_btn_3.jpg');
		height:394px;
	}
	#movie_trailer_container_mobile iframe, #movie_trailer_container iframe{
		width:100%;
		height:100%;
		position:absolute;
		padding:10px 20px;
		max-width:236px;
	}
	#movie_trailer_content{
		position:absolute;
		bottom:30%;
		left:0;
		right:0;
		margin:auto;
	}
	#info_trailer{
		background-color:rgba(23,23,23,0.6);
		padding:15px 20px;
		height:42px;
		margin:-25px auto 0 auto;
	}
	#info_trailer h3{
		display:block;
		margin-top:-15px;
		font-size:30px;
	}
	#info_trailer h4{
		display:inline-block;
		font-size:16px;
		margin-top:-10px;
	}
	#info_trailer img{
		display:inline-block;
		float:left;
		margin-right:20px;
	}
	#trailer, #storyboards{
		display:table-cell;
		vertical-align:bottom;
	}
	#trailer img, #storyboards img{
		display:inline-block;
		margin-right:10px;
	}
	#trailer h5, #storyboards h5{
		display:inline-block;
		text-decoration:underline;
		font-size:20px;
	}
	#synopsis_background{
		background:url('../images/synopsis_background.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		padding-bottom:3em;
	}
	#synopsis_heading{
		text-align:center;
		padding:3.5em 0 2em 0;
	}
	#synopsis_heading h2{
		font-size:3.8em;
		text-transform:uppercase;
	}
	#synopsis_content_left p, #synopsis_content_right p{
		font-size:1.7em;
		line-height:1.5em;
	}
	#director_background{
		background:url('../images/director_background.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		background-position:bottom;
		text-align:center;
		padding-bottom:3em;
	}
	#director_name{
		padding:2.5em 0 0em 0;
	}
	#director_name h3{
		font-size:2.8em;
		text-transform:uppercase;
	}
	#director_title{
		margin-top:-10px;
		padding-bottom:1em;
	}
	#director_title h4{
		font-size:1.6em;
		text-transform:uppercase;
	}
	#director_image img{
		border:5px solid #000;
		margin:1.5em 0;
	}
	#director_brief p{
		font-size:1.6em;
		line-height:1.3em;
		text-align:left;
	}
	.social_links{
		text-align:center;
		margin-top:3em;
		margin-bottom:3em;
	}
	.social_links img{
		margin:0 0.3em;
	}
	.social_links img:hover{
		opacity:0.8;
	}
	.social_links img:active{
		opacity:0.5;
	}
	#second-owl-demo, #owl-demo{
		width:800px;
		margin:0 auto;
		-webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	.owl-item{
		-webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	#owl-demo h5{
		font-size:0.8em;
		margin-top:20px;
	}
	#roopesh h5, #steve h5, #hugues h5, #jamie h5{
		font-size:24px;
		margin:20px 0 40px 0;
	}
	#owl-demo h6{
		font-size:0.6em;
	}
	#creative_container, #cast_container{
		-webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	#cast_title h2, #creative_title h2{
		text-align:center;
		text-transform:uppercase;

	}
	#cast_arrow{
		height:25px;
		display:none;
	}
	#creative_detail, #cast_detail{	
		margin-top:-50px;
		margin-bottom:50px;
		background-color:#2c2a2a;
		box-shadow:5px 5px 5px #000;
		padding:10px 20px 1px 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
		color:#2c2a2a;
	}
	.cast_detail_mobile{
		display:none;
		margin-top:30px;
		background-color:#2c2a2a;
		padding:10px 20px 1px 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	#rupert_grint, #sean_bean, #charles_dance, #jason_flemyng, #james_darcy, #neil_maskell, #sam_spruell, #roopesh, #steve, #hugues, #jamie{
		cursor:pointer;
	}
	#steve img{
		height:200px;
	}
	.owl-item{
		width:300px;
	}
	.cast_detail_mobile p{
		font-size:0.6em;
		line-height:1.2em;
		text-align:left;
	}
	#creative_detail p, #cast_detail p{
		font-size:1.6em;
		line-height:1.5em;
		color:#cbb8a5;
	}
	#player_background{
		background-color:#000;
	}
	#video_player video{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
	}
	#who_background{
		padding:6em 0 4em 0;
	}
	#who_background hr{
		border-top:0;
		border-bottom:5px solid #cbb8a5;
		width:100px;
		margin:1em auto;
	}
	#who_heading{
		padding:2em;
	}
	#who_heading h3{
		text-align:center;
		font-size:2.8em;
		text-transform:uppercase;
		margin:0 0 1em 0;
	}
	#who_heading h4{
		text-align:center;
		font-size:1.7em;
		text-transform:uppercase;
		margin-top:-40px;
	}
	#who_vincent, #who_mark, #who_adam{
		text-align:center;
	}
	#who_vincent h3, #who_mark h3, #who_adam h3{
		margin:0.5em 0;
	}
	#who_vincent p, #who_mark p, #who_adam p{
		font-size:1.4em;
		line-height:1.5em;
		text-align:center;
		width:90%;
		margin:0 auto;
	}
	#who_vincent img, #who_mark img, #who_adam img{
		border:5px solid #000;
	}
	#who_detail{	
		margin-top:2em;
		background-color:#2c2a2a;
		box-shadow:5px 5px 5px #000;
		padding:10px 20px 1px 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
		color:#2c2a2a;
	}
	#who_detail p{
		font-size:1.6em;
		line-height:1.5em;
		color:#cbb8a5;
	}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.home_link, .trailer_link, .synopsis_link, .director_link, .cast_link {
			margin:0 0.2em;

		}
		#nav_top{
			padding-right:20px;
		}
		#horse_1 img{
			max-width:164px;
		}
		#horse_2 img{
			width:115px;
		}
		#horse_3 img{
			width:161px;
		}
		#horse_4 img{
			width:175px;
		}
		#second-owl-demo, #owl-demo{
			width:600px;
			margin:0 auto;
		}

		#background_video_container{
			
		}
		#background_video_container video{
			display:inline-block;
		}
		#video_buttons_container{
			top:10%;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		#video_buttons_container{
			top:6%;
		}
		#roopesh h5, #steve h5, #hugues h5, #jamie h5{
			margin:20px 0 0px 0;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#nav_container{
			width:100%;
		}
		#background_video_container video{
			display:none;
		}
		#video_buttons_container{
			position:relative;
			margin:0 auto;
			text-align:center;
			display:block;
		}
		#info_trailer_btn_container, #trailer_btn_container, #storyboards_btn_container{
			width:100%;
		}
		.info_trailer_btn_frame, .trailer_btn_frame, .storyboards_btn_frame{
			margin:1em auto;
			position:relative;
		}
		.info_trailer_btn_frame h3, .trailer_btn_frame h3, .storyboards_btn_frame h3{
			text-align:center;
			bottom:5%;
			position:absolute;
			width:100%;
		}
		#info_trailer_btn_frame br, #trailer_btn_frame br, #storyboards_btn_frame br{
			display:none;
		}
		#info_trailer_btn{
			background:url('../images/video_btn_1.jpg');
			background-size:cover;
			height:100px;
		}
		#trailer_btn{
			background:url('../images/video_btn_2.jpg');
			background-size:cover;
			height:100px;
		}
		#storyboards_btn{
			background:url('../images/video_btn_3.jpg');
			background-size:cover;
			height:100px;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.home_link, .trailer_link, .synopsis_link, .director_link, .cast_link {
			margin:0;

		}
		#nav_background{
			height:50px;
		}
		.home_link, .trailer_link, .synopsis_link, .director_link, .cast_link {
			font-size:1.6em;
			border-radius:20px;
			padding:0.6em 0.3em;
		}
		#nav_top img{
			width:60%;
			margin-top:5px;
		}
		#horse_1 img{
			width:117px;
		}
		#horse_2 img{
			width:82px;
		}
		#horse_3 img{
			width:115px;
		}
		#horse_4 img{
			width:125px;
		}
		#second-owl-demo, #owl-demo{
			width:300px;
			margin:0 auto;
		}
		#who_vincent, #who_mark, #who_adam{
			padding-bottom:3em;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		body{
			background:#000;
			background-size:auto;
			background-attachment:fixed;
			background-repeat: no-repeat;
		}
		#mobile_background{
			display:block;
			position:fixed;
			z-index:-1;
		}
		#mobile_navigation{
			display:block;
			background-color:#000;
			position:fixed;
			z-index:9999;
			right:0;
			top:0;
			width:80%;
			overflow:none;
			margin-right:-80%;
			height:100%;
		}
		.home_link{
			margin-top:50px;
		}
		.home_link, .trailer_link, .synopsis_link, .director_link, .cast_link {
			display:block;
			width:100%;
			padding:0.7em 0;
			border:none;
		}
		.home_link, .trailer_link:hover, .synopsis_link:hover, .director_link:hover, .cast_link:hover {
			border:none;
		}
		#open_menu{
			display:block;
			text-align:right;
			margin:20px;
		}
		#header_background{
			background:none;
		}
		#header_container{
		}
		#header_title{
			display:none;
		}
		#mobile_horses{
			display:block;
		}
		#horses{
			display:none;
		}
		#header_logo{
			width:100%;
		}
		#header_logo img{
			width:240px;
			margin-left:-5%;
		}
		#logo_background{
			display:none;
		}
		#mobile_logo_background{
			display:block;
			background-color:#000;
		}
		#nav_background{
			display:none;
		}
		.movie_trailer_container{
			margin:10% 0;
			display:none;
		}
		.desktop_trailer_frame{
			display:none;
		}
		.mobile_trailer_frame{
			display:block;
		}
		#movie_trailer_container_mobile{
			display:block;
		}
		#synopsis_background{
			background:none;
		}
		#director_background{
			background:none;
		}
		#synopsis_heading h2{
			color:#000;
		}
		#synopsis_content_left p, #synopsis_content_right p{
			color:#000;
		}
		#director_name h3{
			color:#000;
		}
		#director_title h4{
			color:#000;
		}
		#director_brief p{
			color:#000;
		}
		#second-owl-demo, #owl-demo{
			width:180px;
			margin:0 auto;
		}
		#second-owl-demo h5, #owl-demo h5{
			color:#000;
		}
		#second-owl-demo h6, #owl-demo h6{
			color:#000;
		}
		#creative_container, #cast_container{
			margin:0;
			width:100%;
		}
		#second-owl-demo, #owl-demo{
			width:240px;
		}
		.owl-theme .owl-controls .owl-buttons .owl-prev{
		  left: -50px !important;
		  top: 130px !important; 
		}
		.owl-theme .owl-controls .owl-buttons .owl-next{
		  right: -50px !important;
		  top: 120px !important; 
		}
		#creative_detail, #cast_detail{
			display:none;
		}
		.cast_detail_mobile{
			display:block;
			width:220px;
		}
		#who_background hr{
			border:4px solid #000;
			margin-top:-5em;
		}
		#who_heading h3{
			color:#000;
		}
		#who_heading h4{
			color:#000;
		}
		#who_vincent, #who_mark, #who_adam{
			margin-bottom:2em;
		}
		#who_vincent h3, #who_mark h3, #who_adam h3{
			color:#000;
		}
		#who_vincent p, #who_mark p, #who_adam p{
			color:#000;
		}
	}


/* #Font-Face
================================================== */

	@font-face {
	    font-family: 'garamondpremrpro';
	    src: url('../fonts/garamondpremrpro-webfont.eot');
	    src: url('../fonts/ggaramondpremrpro-webfont.eot?iefix') format('eot'),
	         url('../fonts/garamondpremrpro-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }

	@font-face {
	    font-family: 'trajanpro-regular';
	    src: url('../fonts/trajanpro-regular-webfont.eot');
	    src: url('../fonts/trajanpro-regular-webfont.eot?iefix') format('eot'),
	         url('../fonts/trajanpro-regular-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }