/*  
Theme Name: Hartley Studios
Theme URI: 
Description: 
Version: 
Author: 
Author URI: 
License:
License URI: 
*/

/* Reset Styles */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
div, nav, header, footer, aside { display: block; }


/* General Structure */

body {
	background: #efefef;
	text-align: center;
	font-family: 'Gill Sans', Helvetica, Arial, 'Sans Serif';
	font-size: 18.24px;
	color: #666666;
}

	.container {
		display: block;
		margin: auto;
		text-align: left;
		width: 1000px;
		position: relative;
	}
	
	a { color: #666666; text-decoration: none; }
	a:hover { color: #333; }
	
	.clearfix { display: block; clear: both; }
	
	
	/* Site Header */

	#site-header {
		background: #000000;
		height: 35px;
	}
		#site-header a { color: #FFF; }
		#site-header h1 {
			line-height: 33px;
			font-size: 25px;
			font-weight: 300;
			float: left;
			padding: 2px 0 0 4px;
			text-transform: uppercase;
		}
		#site-header nav {
			float: right;
			padding: 2px 0 0 0;
		}
			#site-header nav li {
				margin: 0 0 0 73px;
				margin: 0 0 0 53px;
				line-height: 33px;
				font-size: 15px;
				font-weight: 300;
				display: inline-block;
				text-transform: uppercase;
			}
			#site-header nav li:first-child { margin: 0px; }

	
	/* Home Slider */

	#home-slider {
		margin: 0 0 22px 0;
		position: relative;
	}
		#home-slider .overlay {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 10;
		}
		#home-slider ul {
			position: relative;
			height: 563px;
		}
			#home-slider ul li {
				position: absolute;
				top: 0px;
				left: 0px;
				display: none;
			}
			#home-slider ul li:first-child { display: block; }
				#home-slider ul li img { display: block; }


	/* Home */

	.ctas { margin: 0 -12px 20px -12px; }
		#ctas a {
			float: left;
			width: 33.3%;
			padding: 0 12px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			position: relative;
		}
			#ctas a img { width: 100%; display: block; }
			#ctas h3 {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				font-size: 15px;
				font-weight: 300;
				color: #333333;
				text-align: center;
				line-height: 32px;
				text-transform: uppercase;
			}


	/* Main */

	#page-header { margin: 0 0 22px 0; }
		#page-header img { display: block; width: 100%; height: auto; }
	
	#main { }
		.row {
			clear: both;
			margin: 0 -12px 20px -12px;
		}
		.box {
			padding: 30px 50px 10px 62px;
			background: #FFF;
			border-left: 12px solid #efefef;
			border-right: 12px solid #efefef;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		} 	
		.box-half {
			width: 50%;
			display: table-cell;
			padding-bottom: 15px;
		}
		.box h3 {
			font-size: 22px;
			color: #333333;
			margin: 0 0 27px 0;
		}
		.box h2 {
			font-size: 33px;
			font-weight: 300;
			color: #333333;
			margin: 0 0 25px 0;
			padding: 12px 0 0 0;
		}
			.box h2 img { margin: 0 10px 0 0; vertical-align: top; }
		.box p {
			font-size: 21px;
			line-height: 25px;
			margin: 0 0 26px 0;
		}
		.box-home-top {
			padding-top: 17px;
		}
		.box-home-top p, 
		.box-page p {
			font-size: 18.24px;
			line-height: 21px;
			margin: 0 0 24px 0;
		}


	/* News */

	.box-news .news-image {
		float: right;
		margin: -16px -30px 8px 60px;
	}


	/* Gallery */

	.showreel iframe {
		width: 100%;
		height: 568px;
	}

	.flexslider {
		background: transparent;
		padding: 0px;
		margin: 0px;
		border: none;
	}

	#gallery-images {
		position: relative;
		margin: 0 0 17px 0;
	}
		#gallery-images .container {
			overflow: hidden;
		}
		#gallery-images .flex-direction-nav .flex-prev,
		#gallery-images .flex-direction-nav .flex-next {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 50%;
			height: 100%;
			z-index: 10;
			text-align: left;
			text-indent: -9999px;
		}
		#gallery-images .flex-direction-nav .flex-next { left: 50%; }
		#gallery-images .flex-direction-nav .flex-prev:after,
		#gallery-images .flex-direction-nav .flex-next:after { display: none; }
		#gallery-images.videos .flex-direction-nav { display: none; }
		#gallery-images ul.slides li img,
		#gallery-images ul.slides li iframe {
			display: block;
			width: 100%;
			height: auto;
		}
		#gallery-images ul.slides li iframe { height: 568px; }
		/*#gallery-images ul.slides {
			position: relative;
			top: 0px;
			left: 0px;
			width: 1000000px;
		}
			#gallery-images ul.slides li {
				float: left;
				width: 1000px;
				text-align: center;
			}
				#gallery-images ul.slides li img {
					display: block;
					width: 100%;
					height: auto;
				}*/

	#gallery-thumbs {
		margin: 0 0 13px 0;
	}
		#gallery-thumbs .thumbs-holder {
			padding: 0 80px 0 80px;
		}
			#gallery-thumbs .thumbs-holder .arrow {
				width: 50px;
				float: left;
				height: 50px;
				background: url(./images/left-arrow.png) no-repeat left center;
			}
			#gallery-thumbs .thumbs-holder .arrow-right {
				float: right;
				background: url(./images/right-arrow.png) no-repeat right center;
			}
			#gallery-thumbs .thumbs-holder .thumbs-inner {
				float: left;
				width: 740px;
				padding: 0 50px;
				overflow: hidden;
				position: relative;
				height: 50px;
			}
				#gallery-thumbs .thumbs-holder .thumbs-inner ul {
					position: relative;
					height: 50px;
					top: 0px;
					left: 0px;
				}
					#gallery-thumbs .thumbs-holder .thumbs-inner ul li {
						float: left;
						display: block;
					}
						#gallery-thumbs .thumbs-holder .thumbs-inner ul li img { display: block; }
			#gallery-thumbs .flex-direction-nav .flex-prev,
			#gallery-thumbs .flex-direction-nav .flex-next {
				left: -50px;
				top: -52px;
				margin: 0px;
				height: 50px;
				width: 50px;
				opacity: 1!important;
				text-align: left;
				text-indent: -9999px;
				background: url(./images/left-arrow.png) no-repeat left center;
			}
			#gallery-thumbs .flex-direction-nav .flex-prev:after,
			#gallery-thumbs .flex-direction-nav .flex-next:after { display: none; }
			#gallery-thumbs .flex-direction-nav .flex-next {
				left: auto;
				width: 45px;
				right: -45px;
				background: url(./images/right-arrow.png) no-repeat right center;
			}
		#gallery-thumbs .gallery-controls {
			position: absolute;
			top: 12px;
			right: 2px;
		}
			#gallery-thumbs .gallery-controls a.pause {
				width: 20px;
				height: 22px;
				background: url(./images/pause.png) no-repeat;
				display: inline-block;
			}
			#gallery-thumbs .gallery-controls a.play {
				width: 20px;
				height: 23px;
				background: url(./images/play.png) no-repeat;
				display: inline-block;
			}

	#gallery-nav { margin: 0 0 20px 0; }
		#gallery-nav .container {
			background: #FFF;
			padding: 37px 0;
		}
			#gallery-nav .container ul {
				display: table;
				width: 100%;
			}
				#gallery-nav .container ul li {
					display: table-cell;
					font-size: 13.2px;
					font-weight: bold;
					text-align: center;
				}
					#gallery-nav .container ul li a { color: #999; }
					#gallery-nav .container ul li.active a,
					#gallery-nav .container ul li a:hover { color: #333333; }

	#main .video-holder {
		margin: -30px -50px 30px -62px;
		border-bottom: 16px solid #efefef;
	}
		#main .video-holder iframe {
			display: block;
			width: 100%;
			height: 280px;
		}


	/* Social */

	#social {
		margin: 0 0 14px 0;
		padding: 20px 0 0 0;
	}
		#social .container { text-align: right; }
		#social a {
			display: inline-block;
			margin: 0 0 0 3px;
		}


	/* Site Footer */

	#site-footer { margin: 0 0 30px 0; }
	#site-footer .container {
		background: #4c4c4c;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		padding: 34px 45px 0 65px;
	}
		#site-footer p {
			float: left;
			line-height: 50px;
			font-size: 15px;
			font-weight: 300;
			color: #FFF;
			text-transform: uppercase;
		}
		#site-footer nav {
			float: right;
		}
			#site-footer nav li {
				display: inline-block;
				margin: 0 0 0 18px;
				line-height: 50px;
				font-size: 15px;
				font-weight: 300;
				text-transform: uppercase;
			}
				#site-footer nav li a { color: #FFF; }

@media all and (max-width: 700px) and (min-width: 0px) {
		
	.container {
		width: 580px;
	}
	#site-header { height: auto; padding: 10px 0; }
	#site-header h1 { float: none; padding: 0px; }
	#site-header nav {
		float: none;
		overflow: auto;
	}
		#site-header nav ul {
			display: block;
		}
		#site-header nav li {
			margin: 0 20px 0 0!important;
		}

	#home-slider ul { height: 327px; }
	#home-slider img { width: 100%; height: auto; }

	.box { padding: 30px 30px 10px 30px; }
	.box-half { width: auto; display: block; }
	.box-half { margin-bottom: 20px; }
	#main .video-holder { margin-left: -30px; margin-right: -30px; }

	#gallery-thumbs .thumbs-holder { padding: 0px; }
	#gallery-thumbs .thumbs-holder .thumbs-inner { width: 400px; }
	#gallery-images ul.slides li iframe { height: 330px; }

	.box-news .news-image { float: none; margin: 0 0 20px 0; }
	.box-news .news-image img { max-width: 100%; height: auto; }

	#site-footer .container { padding: 0 20px; }
	#site-footer p { float: none; }
	#site-footer nav { float: none; margin-top: -20px; }
		#site-footer nav li { margin: 0 20px 0 0; }

}

@media all and (max-width: 600px) and (min-width: 0px) {
		
	.container {
		width: 440px;
	}
	#home-slider ul { height: 248px; }
	#ctas a { float: none; width: 100%; display: block; margin: 0 0 20px 0; height: 80px; overflow: hidden; }

	#gallery-nav .container ul li { display: block; margin-bottom: 15px; }

	#gallery-thumbs .thumbs-holder .thumbs-inner { width: 280px; }

}

@media all and (max-width: 460px) and (min-width: 0px) {
		
	.container {
		width: 280px;
	}

	#site-header nav li { display: block; }

	#home-slider ul { height: 158px; }

	#gallery-images ul.slides li iframe { height: 160px; }

	#gallery-thumbs .thumbs-holder .thumbs-inner { width: 120px; }

	#site-footer nav ul { padding: 20px 0; }
	#site-footer nav li { display: block; line-height: 30px; }

}