html { margin: 0px; padding: 0px;}

* { margin: 0px; padding: 0px;}

/* SET font size to 62.5% to ease em calculations 1 em = 10px */
body { background: #222; color: #7B7B7D; font-family: Arial,helvetica,"Helvetica Neue",tahoma,geneva,sans-serif; font-size: 62.5%; }

#container { margin:auto; position:absolute; bottom:0; top:20px; left:0; right:0; width: 100%; max-width:1100px; height:auto; border:0px solid #fff;}
.site-footer { background: #000; margin-top: 30px; height: 100px; text-align: right; padding: 30px 30px; margin-left: -15px; margin-right: -15px;}
.home header {border-bottom: 1px solid #222; margin-bottom: 10px;}

/* HOME*/
header .row {padding-top: 30px;}
.identity-header img, .header-image img{ width: 100%;}
.header-image-masthead img {width: 90%; margin-left: 5%;}
.identity-header  {height: 60px;}
.links-header p a {float: right; color: #222; font-size: 1.2em;}
.header-image { position: relative;}
.header-image-masthead {position: absolute; top: 50%; transform: translateY(-50%); }
.header-overlay-text {position: absolute; bottom: 0px; text-align: center; width: 100%; padding: 10px 0; background: rgba(34, 34, 34, 0.4); margin-left: -15px; border-top: 1px solid #222;}
.header-overlay-text p {padding: 8px 0;}
.header-overlay-container {position: absolute; bottom: 0px; left: 0px; right: 0px; text-align: center;}

.films, .commercials, .music {width: 100%; padding: 0 5%;}
.films img, .commercials img, .music img {width: 100%;}
.films h2, .commercials h2, .music h2 {display: block; text-align:center; margin: 35px 0 ; font-size: 3em;}

.com h2:first-of-type {font-size: 2em; border-bottom: 0px solid #222; border-top: 1px solid #222;margin: 15px 0; text-align: center; padding: 10px 0;}

.film h2 {font-size: 2em; border-bottom: 1px solid #222; border-top: 1px solid #222;margin: 15px 0; text-align: center; padding: 10px 0;}
.home {background: #fff;}

	p.shooting-detail {color: #222; font-size: 1em; line-height: 1.4em; margin-top: 8px;}
	
	.section-thumb a {
	  overflow: hidden;
	  position: relative;
	  display: block;
	}

	.section-thumb a:hover .figure {
	background: rgba(24, 24, 24, 0.5);
	  width: 100%;
	  height: 100%;
	  top:0;
	  left: 0;
	}


	.section-thumb .figure {
		text-align: center;
	  -webkit-transition: all 0.5s;
	  transition: all 0.5s;
	  position: absolute;

	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	}
	
	.inner {
		position: relative;
		  top: 50%;
		  transform: translateY(-50%);
		  opacity: 0;
	}
	
	.inner img {width: 50px; margin-top: -25px;}
	
	.section-thumb a.figure .inner {   -webkit-transition: all 0.5s;
  transition: all 0.5s; opacity: 0;}
	.section-thumb a:hover .figure .inner { opacity: 1; }
	

	
	

.col-md-8,.col-md-10  {background-image: url("../images/home/home-col-bg.jpg"); background-repeat: repeat-y; padding: 4px;}

/* TYPOGRAPHY */
p {font-size: 1.3em; color: #fff; letter-spacing: 2px;}

h1 { font-size: 2.5em; font-weight: 200; color: #222;text-transform:uppercase; margin-bottom: 35px;}

h2 { font-size: 2.0em; font-weight: 600; color: #222; }

h3 { font-size: 1.4em; font-weight: 300; color: #222;}


/* PROJECTS */
.links-header-projects p a {float: right; color: #fff; font-size: 1.2em;}

/* Links */
a {color: #000; text-decoration: none;-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-duration: 0.5s;
	transition-property: color;
	-webkit-transition-property: color;
	-moz-transition-property: color;}

a:hover {color: #c0c0c0;}

.image_width {width: 100%;}

ul.headerlinks {list-style-type: none; margin: 5px 0; width: 100%; text-align: right;}

ul li {display: inline; }

ul li a { font-size: 1.5em;}

#videoLinks2 a {color: #fff;}
#videoLinks2 a:hover {color: #c0c0c0;}

.dark p {color: #222 !important;}
.dark a {color: #222 !important;}
.dark a:hover {color: #c0c0c0 !important; }

.links-header-light a {color: #fff;}
.links-header-light a:hover {color: #ccc;}

/* BIOG */

#alexreynoldsbiography {width: 700px; height: auto; background: rgba(255, 255, 255, 0.7);margin-left: 110px; padding: 30px 70px 30px 30px;}
#alexreynoldsbiography p {color: #000; font-size: 1.2em; font-weight: none; line-height: 1.7em;}
#alexreynoldsbiography  p.header {font-size: 1.5em; font-weight: bold;}
#alexreynoldsbiography a {font-size: 1.2em;}
#biogLinks {width: 870px; height: auto; background: none; margin: 20px 0 20px 110px; }
#biogLinks p {color: #000; font-size: 1.2em; font-weight: bold; line-height: 1.8em; letter-spacing: 1px;}
#biogLinks2 {width: 870px; height: auto; background: none; margin: 20px 0 20px 110px; }

#biogLinks2 p {color: #fff; font-size: 1.2em; font-weight: bold; line-height: 1.8em; letter-spacing: 1px;}

.homeLink2 {position: absolute; top: 150px; left: 1050px;}
.homecontactLink {position: absolute; top: 350px; left: 940px;}
.homecreditsLink {position: absolute; top: 575px; left: 1000px;}
.navmobile { display: none;}

/* VIDEOS */
.videosLogo {margin-left: 100px; }
.homeLink {position: absolute; top: 70px; right: 250px;}
.workLink {position: absolute; top: 170px; left: 30px;}
.videosCreditsLink {position: absolute; top: 360px; left: 0px;}
.videosContactLink {position: absolute; top: 500px; left: 120px; z-index: 1;}


.videoCopy { height: 260px; background: rgba(255, 255, 255, 0.5); position: relative; padding: 10px ;}
.videoCopy p {color: #4c4b4b; font-size: 1.2em; line-height: 1.4em;}
.highlight {color: #000; font-weight: none;}
#videoHolder {background:  rgba(0, 0, 0, 0.8); padding: 10px;}
#videoLinks2 {width: 100%; margin: 0px 0 0 -15px;  position: absolute; }
#videoLinks2 p {color: #fff; line-height: 1.8em; letter-spacing: 1px; font-size:1.2em; margin-bottom: 20px;text-align: right;}
.selected { color: #000; font-weight: bold;}


.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.imageWrapper {
	position: relative;
	width: auto;
	height: auto;
}



/* CREDITS */
.content{margin-left:200px; width:65%; height:450px; padding-top:20px; overflow:visible; background:rgba(0, 0, 0, 0.7); border-left: 3px solid #fff;padding-left: 20px; margin-top:0px;}
.linksHolder{margin:20px 0 0 200px; width:55%; height:auto; overflow:visible; background:rgba(255, 255, 255, 0.2);padding: 0px 2px; font-size: 0.9em; padding: 6px 4px;}
.linksHolder a {color: #fff; text-decoration: none; font-size: 0.9em;}
.linksHolder a.selected { color: #000; font-weight: bold;}
.linksHolder a:hover {color: #000; text-decoration: none;}
/*.content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px; font-style:italic;} */
.content p:nth-child(3n+0){color:#c96;}
.clients {width: 33.3%; height: auto; float: left; font-size: 1.2em; padding-bottom: 20px; color: #fff;}
.clientsWider {width: 50%; height: auto; float: left; font-size: 1.35em; padding-bottom: 20px; color: #fff;}

.creditsbiogLink {position: absolute; top: 350px; left: 50px;}
.creditscontactLink {position: absolute; top: 525px; left: 0px;}
.creditshomeLink {position: absolute; top: 200px; left: 0px;}

table.profile-table > thead > tr > th {
    border: none;
    padding: 0px;
    vertical-align: top;
    width: 25%;
}

td p {
	letter-spacing: 1px;
}
td.notes p { font-size: 1em; }

td.company p { font-size: 1em; }

div.title p b {
    font-size: 1em;
    display: block;
    margin-top: -2px;
}
div.title p  {
    font-size: 1em;
}

.linksHolder {margin-left: 0px;}

.content {
     margin-left: 0px; 
     width: 95%;}

 .tv-credits table thead {
    border-bottom: 1px solid #fff;
    /* display: block; */
}

 table tr {
    border-bottom: 1px solid #3c423f;
}
table tr td {
    padding: 7px 10px 7px 0px;
    /* display: block; */
}
table thead th{
    padding-bottom: 30px;
    /* display: block; */
}
table td {
    padding-right: 15px;
        vertical-align: top;
}

.clientsWider .item { padding: 6px 0;     border-bottom: 1px solid #3c423f;}

/* CONTACT */
.contact #biogLinks2 {display: none;}

	.clientsWider.credits-cont, .clientsWider.credits-cont2 {
    width: 100%; 
}

.clientsWider.credits-cont2 span.work-title { width: 33%; }
	span.work-title {
    width: 50%;
    display: inline-block;
        letter-spacing: 1px;
}

.details { font-size: 1.2em; margin-top: 10px;
    display: inline-block;     letter-spacing: 1px;}

    span.production {
    width: 50%;
    display: inline-block;
        letter-spacing: 1px;
}

table.profile-table.table-no-striping.table th {
	text-align: left;
	    padding-bottom: 5px;
}


@media screen and (max-width:1056px) {
	
	h1 { font-size: 2.2em; font-weight: 200;}

	#container {max-width:990px; width: 100%; height:auto}
	
	/* BIOG */
	#alexreynoldsbiography {width: 550px; height: 750px;margin-left: 70px; padding: 40px 70px 0 30px;}
	#alexreynoldsbiography a {font-size: 1.5em;}
	#biogLinks {width: 700px; height: auto; background: none; margin: 20px 0 20px 70px; }
	#biogLinks p {color: #000; font-size: 1.2em; font-weight: bold; line-height: 1.8em;}
	
	/* WORK */
	.identity-header {
	    height: 50px;
	}
	.videoCopy p {color: #565656; font-size: 1.3em;}
	.highlight {color: #000;}
	.selected { color: #000; font-weight: bold;}
	
	/* CREDITS */
	#identity2 {position: relative; top: 20px; text-align:center; float: left; max-width: 980px; width: 100%;}
	.linksHolder{margin:140px 0 0 200px; width:70%; height:auto; overflow:visible; background:rgba(255, 255, 255, 0.2);padding: 0px 2px; font-size: 0.9em; padding: 6px 4px;}
	
	.content{margin-left:200px;  height:300px; clear: both; width: 70%;}
	.clients {width: 210px; height: auto; float: left; font-size: 1.2em; padding-bottom: 20px; color: #fff;}
	.clientsWider {width: 50%; height: auto; float: left; font-size: 1.2em; padding-bottom: 20px; color: #fff;}

	.creditsbiogLink {position: absolute; top: 350px; left: 50px;}
	.creditscontactLink {position: absolute; top: 525px; left: 0px;}
	.creditshomeLink {position: absolute; top: 200px; left: 0px;}
	
	
}

@media screen and (max-width:960px) {
	.header-overlay-text { display: none; }
}

@media screen and (max-width:760px) {
	
	ul.headerlinks {text-align: center; margin-bottom: 15px;}
	
	
	.no-padding {padding: 0 !important;}
	
	p a {font-size: .8rem ;}
	
	#container {height: auto; padding-bottom: 30px; max-width: 767px;}
	
	/* TYPOGRAPHY */
	h1 { margin-bottom: 20px;}
	
	/* HOME*/
	#videoHolder {max-width: 810px;}
	#videoLinks2 {max-width: auto; height: auto; background: none; padding: 0px 0 0 2%;  position: relative; width: 100%; clear: both; top: 40px;}
	.films .row {margin-bottom: 15px;}
	/* WORK PAGES */
	.margins {margin: 0px !important;}
	.videoCopy {  top: 30px; height: 160px;}
	#videoHolder {width: 100%; height: auto;  position: relative;  margin: 0 ; float: left; padding: 2.5%; clear: both; top: 0px; background: #222;}
	
	/* BIOG */
	#alexreynoldsbiography {width: 100%; height: auto; margin:0; padding: 10% 10%; }
	#alexreynoldsbiography a {font-size: 1.5em;}
	.links {display: none;}
	#biogLinks2 {display: none;}
	
	/* CREDITS */
	.linksHolder{margin:50px 1% 0 1%; width:94%; height:auto; overflow:visible; background:rgba(255, 255, 255, 0.2);padding: 0px 2px; font-size: 0.9em; padding: 2%;}
	.content{margin:0px 1% 0 1%; width:96%; height:410px;  padding: 2% 0 0 2%;}

}
@media screen and (min-width:667px) {
.desk-text{ display: block; }
.mob-text{ display: none;}
}