/* Guillermo Navarro CSS - Aug 2014*/


* {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.active {margin-top:1px;}

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

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


/*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:#585858; 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 {text-shadow: 0px 1px 2px #b5b5b5;}
#main-nav li.active a:hover {color:#585858;}



/* CONTENT */

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

#close-video.active {
	display:block;
	float:right;
	margin:12px 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  a img{
	overflow:hidden;
	z-index:1;
    }
	
	
.mediabox-item  a:hover img, .mediabox-item .active img  {}


	
.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  .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;}

	
	
/* CONTACT */

	#contact-container {
		float:left;
		background-color:#fefefe;
		border:1px solid #a1a1a1;
		margin-top:12px;
		}
	
	#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;
	}
	
	
	

/* FOOTER */


footer {

}

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




.copyright {float:right;margin:1em .4em 0 0; color:#5a5a5a; letter-spacing:.2em; font-size:1.1em;}
.tekkie {float:left; color:#5a5a5a; background:url(../images/tekkie.gif) no-repeat left; padding-left:15px; text-decoration:none; margin:25px 0 6px 0; display:block; clear:both;}


/* MEDIA QUERIES */


/* 1024 */

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

	
.mediabox-item  {
	width:331px;
	height:331px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:1018px; margin:10px 8px;}
#main-container {max-width:1018px;}
#mediabox-container {margin-top:-579px; width:1012px;}
#mediabox-container.active {margin-top: 1px;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.1em;}
#media-player #video {height:566px; width:1005px; margin-left:6px;}
#media-player #video iframe{width:1005px; height:566px;}
footer {width:1012px;}
.mediabox-item.empty {display:none;}
#contact-container .contact-container {width:286px;}
 
 }
 
 /* 768 */
 
 @media only screen 
 and (min-device-width : 768px)
 and (orientation: portrait)
 {
 
 h1{
	margin-left:6px;
	}
	
.mediabox-item  {
	width:372px;
	height:372px;
	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;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.1em;}
#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;}
 }

 /* 600 */
 
 @media only screen 
and (max-device-width : 600px) 
and (orientation: landscape)

{
h1{
	background:url(../images/guillermo-navarro-logo-mobile.jpg) no-repeat ;
	height:46px;
	margin-left:6px;
	}
	
.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;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.1em;}
#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;}
}

/* 568 iphone 5*/

@media only screen 
and (max-device-width : 568px)
and (orientation: landscape)
 {

h1{
	background:url(../images/guillermo-navarro-logo-mobile.jpg) no-repeat ;
	height:46px;
	margin-left:6px;
	}
	
.mediabox-item  {
	width:272px;
	height:272px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:562px; margin:10px 8px;}
#main-container {max-width:562px;}
#mediabox-container {margin-top:-323px; width:562px;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.1em;}
#media-player #video {height:313px; width:556px; margin-left:6px;}
#media-player #video iframe{width:556px; height:313px;}
footer {width:594px;}
.copyright {float:left; font-size:.7em; margin-left:1em;}
.mediabox-item.empty {display:none;}
	
}

	
/* 480 portrait*/

@media only screen 
and (max-device-width : 480px) 
and (orientation: portrait)
{
h1{
	background:url(../images/guillermo-navarro-logo-mobile.jpg) no-repeat ;
	height:46px;
	margin-left:6px;
	}
.mediabox-item  {
	width:368px;
	height:368px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:368px; margin:10px 8px;}
#main-container {max-width:380px;}
#mediabox-container {margin-top:-224px; width:368px;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.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;}
}

	
/* 480 landscape*/

@media only screen 
and (max-device-width : 480px) 
and (orientation: landscape)
{
h1{
	background:url(../images/guillermo-navarro-logo-mobile.jpg) no-repeat ;
	height:46px;
	margin-left:6px;
	}
.mediabox-item  {
	width:380px;
	height:380px;
	float:left;
	background-color:#cccccc;
	margin:0 0 5px 6px;
	}
	
nav  {width:380px; margin:10px 8px;}
#main-container {max-width:380px;}
#mediabox-container {margin-top:-240px; width:380px;}
#main-nav li a {padding:.2em 1em 0 0; font-size:1.1em;}
#media-player #video {height:230px; width:380px; margin-left:6px;}
#media-player #video iframe{width:380px; height:230px;}
footer {width:380px;}
.mediabox-item.empty {display:none;}
.copyright{float:left; margin-left:1em; font-size:.7em;}
.tekkie {float:left; margin-left:.6em; font-size:.8em;}
}


/* IPHONE 3/4 320 */

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

 {
h1 {
	background:url(../images/guillermo-navarro-logo-320.jpg) no-repeat ;
	height:41px;
	margin-left:6px;
	}
	
.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;}
}


/* SPINNING CIRCLE */

.circle {
	display:none;
    background-color: rgba(0,0,0,0);
    border: 1px solid rgba(0,183,229,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);
    };
}