* {padding:0; margin:0;}
body {font-size:10px; font-family:helvetica, sans-serif;}
img a, img {border:none;}



#main-container {max-width:1155px;  background-color:#ffffff; margin:0 auto; padding-bottom:100px; overflow:hidden;}

#mediabox-container {
	width:100%;
	background-color:#ffffff;
	float:left;
	position:relative;
	z-index:10;
	margin-top:-605px;
	-webkit-transition: all 4s linear;
	-o-transition: all .4s linear;
	-moz-transition: all .4s linear;
	-ms-transition: all .4s linear;
	-kthtml-transition: all .4s linear;
	transition: all .4s linear;
}

#mediabox-container.gallery {margin-top:0;}

#mediabox-container.active {margin-top:1px;}

/*  HEADER */
header {margin:25px auto;}

h1 {
	background:url(../images/dylan-barnes-logo.jpg) no-repeat ;
	height:27px;
	text-indent:-9999em;
	margin:.8em 0 4px 0;
}

.icons {float:left;  margin-top:20px; margin-right:6px;}
.icons a {padding-right:12px;}
/*NAV */

nav {width:680px; float:left; margin-bottom:.8em;}
#main-nav li {float:left; list-style-type:none;}
#main-nav li a, #footer-nav li a {padding:1em .7em .6em 0; text-decoration:none; text-transform:uppercase; float:left; font-size:1.2em; color:#9a9a9a; letter-spacing:.2em;
	-webkit-transition: color .6s ease-out;
    -moz-transition: color .6s ease-out;
    -o-transition: color .6s ease-out;
    transition: color .6s ease-out;
	}
#main-nav li a:hover, #footer-nav li a:hover{color:#fd4239;}
#main-nav li a span,#footer-nav li a span {padding-left:.7em; color:#bbbbbb;}
#main-nav li.active a, #footer-nav li.active a {text-shadow: 0px 1px 2px #787878; color:#444444}
#main-nav li.active a:hover, #footer-nav li.active a:hover {color:#444444;}



/* CONTENT */

#close-video {opacity:0;margin-top:-25px; float:right;}

#close-video.active {
	display:block;
	float:right;
	margin:-5px 5px;
	-webkit-opacity:1;
    -moz-opacity: 1;
    -o-transition-opacity 1;
	opacity:1;
	-webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;

	}
	
#close-video button {
	color:#333333;
	background-color:#ffffff;
	padding:3px 5px;
	border:1px solid #999999;
	font-size:1.2em;
	border-radius: 12px 12px 12px 12px;
	-moz-border-radius: 12px 12px 12px 12px;
	-webkit-border-radius: 12px 12px 12px 12px;
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .35);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .35);
	box-shadow: 0 0 4px rgba(0,0,0, .35);
	outline:none;
	cursor:pointer;
	}


	
.mediabox-item {
	width:380px;
	height:380px;
	float:left;
	margin:0 5px 5px 0;
	position:relative;
	}
	
.mediabox-item, .mediabox-static  a img{
	overflow:hidden;
	z-index:1;
    }
	
	
.mediabox-item  a:hover img, .mediabox-item .active img , .mediabox-static  a:hover img, .mediabox-static .active img  {opacity:.9;}


	
.mediabox-item dt {
	-webkit-opacity:.9;
    -moz-opacity: .9;
    -o-transition-opacity .9;
	opacity:.9;
	background-color:#1a1a1a;
	position:absolute;
	top:10px;
	left:10px;
	color:#ffffff;
	font-size:1.2em;
	text-transform:uppercase;
	letter-spacing:.2em;
	padding:4px 2px 1px 4px;
	text-shadow: 0px 1px 2px #7a7a7a;
    filter: dropshadow(color=#7a7a7a, offx=0, offy=1);
	z-index:2;
	-webkit-box-shadow: -3px 3px 7px -2px rgba(36,36,36,0.88);
	-moz-box-shadow: -3px 3px 7px -2px rgba(36,36,36,0.88);
	box-shadow: -3px 3px 7px -2px rgba(36,36,36,0.88);
	}
	
.mediabox-item.lev-2 dt  {background-color:#ffffff; color:#222222;}

.mediabox-item  .dir-info {
	position:absolute;
	width:90%;
	bottom:10px;
	left:10px;
	}
	
.mediabox-item  .dir-info.active span{
	background-color:#1a1a1a; 
	filter: dropshadow(color=#7a7a7a, offx=0, offy=1);
	-webkit-box-shadow: -3px 3px 7px -2px rgba(36,36,36,0.88);
	-moz-box-shadow: -3px 3px 7px -2px rgba(36,36,36,0.88);
	box-shadow: -3px 3px 7px -2px rgba(36,36,36,0.88);
	-webkit-opacity:.9;
    -moz-opacity: .9;
    -o-transition-opacity .9;
	opacity:.9;
	color:#ffffff;
	font-size:1em;
	text-transform:uppercase;
	letter-spacing:.2em;
	text-shadow: 0px 1px 2px #7a7a7a;
	padding:2px 2px 2px 4px;
	}
	
	
	
.mediabox-item .media {float:left;}


/* VIDEO PLAYER */

#media-player {
    -webkit-transition: opacity 2s ease-out;
    -moz-transition: opacity 2s ease-out;
    -o-transition: opacity 2s ease-out;
    transition: opacity 2s ease-out;
    opacity: 0; 
	max-width:1150px;
	margin-top:50px;
	}

#media-player #video {height:600px; width:100%; background-color:#000000;}
#media-player.active {opacity: 1;}

#showreel #media-player   {opacity: 1;}

	
	
/* CONTACT */

#contact #mediabox-container {margin-top:0;}

.contact-info {float:left; border-top:1px solid #eeeeee; border-bottom:1px solid #eeeeee; margin:0 0 12px; padding:6px 0; width:99.6%; font-size:.9rem; color:#eeeeee; text-transform:scentence; text-align:center; background-color: #222222;}
.contact-info a {text-decoration:none; color:#ffffff;}
.contact-info a:hover {text-decoration:underline;}

	#contact-container {
		float:left;
		background-color:#fefefe;
		border:1px solid #a1a1a1;
		}
	
	#contact-container h2 {
		margin:0 0 30px 25px;
		color:#555555;
		font-size:16px;
		padding:25px 0 ;
		text-transform:uppercase;
		letter-spacing:.1em;
		}
	
	
	#contact-container p,#contact-container a {margin-top:0;margin-bottom:5px;color:#555555;font-size:13px; text-align:left;}
	#contact-container a:hover {text-decoration:underline;}
	#contact-container .contact-container {float: left; margin: -7px 26px 80px;width: 330px;}
	#contact-container .contact-names {font-weight:900; color:#555555;}
	.download-docs {float:left; margin-top:30px; margin-right:25px;}
	#contact-container .doc-download a{color:#555555;padding-bottom:.5em;}
	#contact-container .company {color:#555555; font-size:1.3em;}
	#contact-container .company.wme {font-size:2em;}
	#contact-container .email, #contact-container .email a {padding-bottom:1em;}
	
	#contact-container .cat-title {  
		background:url(../images/2-col-icon.png) no-repeat left;
		border-bottom: 1px solid #a1a1a1;
		color: #4a4a4a;
		font-size: 1.7em;
		font-weight: 200;
		letter-spacing: 0.07em;
		padding-left:22px;
	}
	
/* BOI & CV */

.barnes-bio,  .barnes-cv {float:left; width:48.6%; margin-top:12px;}
.barnes-bio a {color:#9a9a9a;}
.barnes-bio a:hover {color:#444444;}
.barnes-bio {margin-right:2rem;}
.barnes-bio h2,  .barnes-cv h2 {text-transform:uppercase; font-size:1rem; color:#9a9a9a; border-bottom:1px solid #eeeeee;}
.barnes-bio h3 {margin:24px 0 -12px; font-size:1rem; color:7a7a7a;}
.bio-cv {font-size:.8rem; color:#444444; margin:1rem 0; line-height:1.3rem;}
.barnes-cv table{margin:1rem 0;  margin-bottom:2rem;} 

/* TABLES */

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
	
	
/* TESTIMONIALS */

.testimonial {padding-left:1em; margin-bottom:5em; border-left:2px solid #cccccc;}
.testimonial p.test {font-style:italic; line-height:1.5em;}
.testimonial p.test-who {font-weight:bold; font-size:1.1em!important;}
	
	
/* GALLERY */
.mediabox-static  {
	width:187px;
	height:187px;
	float:left;
	margin:0 5px 5px 0;
	position:relative;
	overflow:hidden;
}
/* FOOTER */


footer {

}

footer ul {width:680px; float:left; margin-bottom:.8em;}
footer li {float:left; list-style-type:none;}

.social-like {float:left; clear:both;}
.social-like p, .social-links p{float:left; margin-right:12px;}
.social-links a {text-decoration:none; color:#9a9a9a; text-transform:uppercase; line-height:2em; float:left;}
.social-links a:hover {color:#222222;}
.social-links {width:100%; clear:both; margin-top:1em; float:left;}

.copyright {float:right;margin:1em .4em 0 0; color:#5a5a5a; letter-spacing:.2em; font-size:1.1em;}
.tekkie p {padding:2rem 4px 0 0; float:right; clear:both;}
.tekkie a {color:#444444; font-size:.6rem; text-decoration:none;}
.tekkie img {margin-top:-4px; vertical-align:middle;}
.tekkie a:hover {text-decoration:none;}
.tekkie-link {float:right;}


/* MEDIA QUERIES */


/* 1024 */

@media only screen
and (max-width : 1024px)
 {
 
 h1{
	margin-left:6px;
	}
	

	
.mediabox-item  {
	width:330px;
	height:330px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:1014px; margin:10px 8px;}
#main-container {max-width:1014px;}
#mediabox-container {margin-top:-579px; width:1012px;}
#mediabox-container.active {margin-top: 1px;}
#main-nav li a, #footer-nav li a  {padding:.2em 1em 0 0; font-size:1.1em;}
#media-player #video {height:566px; width:1002px; margin-left:6px;}
#media-player #video iframe{width:1002px; height:566px;}
footer {width:1012px;}
.mediabox-item.empty {display:none;}
.mediabox-static  {width:197px;height:197px;}
#contact-container .contact-container  {width:285px;}
.barnes-bio, .barnes-cv {width:99%; padding:0 2rem 0 .3rem;}
.contact-info  {margin:0 6px 12px 6px; width:98.8%;}
 }
 

 
 /* 768 */
 
 @media only screen and (max-width : 768px)
 {
 
.mediabox-item  {
	width:246px;
	height:246px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:762px; margin:10px 8px;}
#main-container {max-width:762px;}
#mediabox-container {margin-top:-439px; width:762px;}
#media-player #video {height:426px; width:750px; margin-left:6px;}
#media-player #video iframe{width:750px; height:426px;}
footer {width:750px;}
.copyright {float:left; font-size:.7em; margin-left:1em;}
.mediabox-item.empty {display:none;}
#contact-container .contact-container {width:200px;}
#mediabox-container.active {margin-top: 2px;}
.mediabox-static  {width:188px;height:188px;}
.mediabox-static {margin:0 2px 2px 0;}
 }
 
  @media only screen 
and (max-width : 668px) 

{

.mediabox-item  {
	width:317px;
	height:317px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:762px; margin:10px 8px;}
#main-container {max-width:640px;}
#mediabox-container {margin-top:-439px; width:762px;}
#media-player #video {height:426px; width:640px; margin-left:6px;}
#media-player #video iframe{width:640px; height:426px;}
footer {width:750px;}
.copyright {float:left; font-size:.7em; margin-left:1em;}
.mediabox-item.empty {display:none;}
#contact-container .contact-container {width:260px;}
#mediabox-container.active {margin-top: 2px;}
.mediabox-static  {width:159px;height:159px;}
.mediabox-static {margin:0 2px 2px 0;}
.mediabox-item.lev-2.three{display:none;}
.contact-info  {margin:0 6px 12px 6px; width:100%;}
}
 

 /* 600 */
 
 @media only screen 
and (max-width : 601px) 

{

	
.mediabox-item  {
	width:288px;
	height:288px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:594px; margin:10px 8px;}
#main-container {max-width:594px;}
#mediabox-container {margin-top:-340px; width:594px;}
#media-player #video {height:327px; width:582px; margin-left:6px;}
#media-player #video iframe{width:582px; height:327px;}
footer {width:594px;}
.copyright {float:left; font-size:.7em; margin-left:1em;}
.mediabox-item.empty {display:none;}
.mediabox-item.lev-2.three{display:none;}
.mediabox-static  {width:196px;height:196x;}
#contact-container .contact-container  {width:240px;}
}

 @media only screen 
and (max-width : 569px) 

{

	
.mediabox-item  {
	width:268px;
	height:268px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:594px; margin:10px 8px;}
#main-container {max-width:594px;}
#mediabox-container {margin-top:-340px; width:594px;}
#media-player #video {height:327px; width:542px; margin-left:6px;}
#media-player #video iframe{width:542px; height:327px;}
footer {width:594px;}
.copyright {float:left; font-size:.7em; margin-left:1em;}
.mediabox-item.empty {display:none;}
.mediabox-item.lev-2.three{display:none;}
.mediabox-static  {width:182px;height:182x;}
#contact-container .contact-container  {width:220px;}
.contact-info  {margin:0 6px 12px 6px; width:98.2%;}
}



	
/* 480 portrait*/

@media only screen 
and (max-width : 480px) 

{

.mediabox-item  {
	width:368px;
	height:368px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:480px; margin:20px 8px;}
#main-container {max-width:380px;}
#mediabox-container {margin-top:-224px; width:368px;}
#main-nav li a , #footer-nav li a {padding:.2em .1em 0; font-size:1em;}
#media-player #video {height:214px; width:368px; margin-left:6px;}
#media-player #video iframe{width:368px; height:214px;}
footer {width:368px;}
.mediabox-item.empty {display:none;}
.copyright{float:left; margin-left:1em; font-size:.7em;}
.tekkie {float:left; margin-left:.6em; font-size:.8em;}
.mediabox-item.lev-2.one, .mediabox-item.lev-2.three {display:none;}
.mediabox-static  {width:182px;height:182px;}
#contact-container .contact-container  {width:320px;}
.contact-info  {margin:0 12px 12px 6px; width:94%; padding:6px;}
}

  @media only screen 
and (max-width : 376px) 

{
.mediabox-item.lev-2, #contact #mediabox-container {width:350px; height:350px;}

.contact-info p {font-size:.8rem;}
.barnes-bio, .barnes-cv {width:97.5%; padding:0 2rem 0 .3rem;}
nav {margin-left:3px;}
}



/* IPHONE 3/4 320 */

@media only screen
and (max-width : 320px)

 {

	
.mediabox-item  {
	width:316px;
	height:316px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:316px; margin:10px 8px;}
#main-container {max-width:316px;}
#mediabox-container {margin-top:-184px; width:316px;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.1em;}
#media-player #video {height:178px; width:316px; margin-left:6px;}
#media-player #video iframe{width:316px; height:174px;}
footer {width:316px;}
.copyright {float:none;text-align:center;}
.mediabox-item.empty {display:none;}
#contact-container .contact-container  {width:260px;}
.mediabox-static  {width:156px;height:156px;}

}


/* SPINNING CIRCLE */

.circle {
	display:none;
    background-color: rgba(0,0,0,0);
    border: 1px solid rgba(0,255,255,0.9);
    opacity: .6;
    border-right: 1px solid rgba(0,0,0,0);
    border-left: 1px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
	position:absolute;
	top:14px;
	right:16px;
}

.circle1 {
	display:none;
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .2;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    position: absolute;
    top: 16px;
	right:18px;
    -moz-animation: spinoffPulse .5s infinite linear;
    -webkit-animation: spinoffPulse .5s infinite linear;
}

.circle.active, .circle1.active {display:block;}


@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Title"; }
	td:nth-of-type(2):before { content: "Character"; }
	td:nth-of-type(3):before { content: "Company"; }
	td:nth-of-type(4):before { content: "Director"; }

}