/* ==========================================================================
   INNOVART STYLES
   ========================================================================== */

html {-webkit-font-smoothing: antialiased; 	overflow-x:hidden;}

body{
	font-family:"Innovart", Arial, Helvetica, sans-serif; 
	font-size:14px;
	line-height:20px;
	color:#222;
	margin:0;
	padding:0;
	background-color:#444;
	font-style:normal;
	font-weight:normal;
	overflow-x:hidden;
	}	

h1,h2,h3,h4,p,a{font-family:"InnovartLight", Arial, Helvetica, sans-serif;  margin:0; padding:0; font-style:normal; font-weight:normal;}

h1{font-family:"Playfair Display", serif; font-size:26px; line-height:34px;}
h2{font-family:"InnovartLight", Arial, Helvetica, sans-serif; font-size:26px; line-height:32px;}
h3{font-family:"Innovart", Arial, Helvetica, sans-serif; font-size:22px; line-height:30px; letter-spacing:0.2}
p{font-family:"InnovartLight", Arial, Helvetica, sans-serif; font-size:14px; line-height:22px;}

a { color:#222;
	text-decoration:none;
	/*transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;*/
}

a:hover {color:#222; text-decoration:underline; cursor:pointer;}

em {font-style:normal;}
h1 em {font-style:italic;}

img, img a, img a:hover {border:0;}

strong {font-family: "InnovartBold", Arial, Helvetica, sans-serif;  font-style:normal; font-weight:normal;}

.container {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;}

.clear {margin:0!important;}

@font-face{ 
	font-family: 'InnovartBold';
	src: url('../fonts/innovart-bold.eot');
	src: url('../fonts/innovart-bold.eot?iefix') format('eot'),
	     url('../fonts/innovart-bold.woff') format('woff'),
	     url('../fonts/innovart-bold.ttf') format('truetype'),
	     url('../fonts/innovart-bold.svg#webfont') format('svg');
	font-weight:normal;
	font-style:normal;
}

@font-face{ 
	font-family: 'InnovartLight';
	src: url('../fonts/innovart-light.eot');
	src: url('../fonts/innovart-light.eot?iefix') format('eot'),
	     url('../fonts/innovart-light.woff') format('woff'),
	     url('../fonts/innovart-light.ttf') format('truetype'),
	     url('../fonts/innovart-light.svg#webfont') format('svg');
	font-weight:normal;
	font-style:normal;
}

@font-face{ 
	font-family: 'Innovart';
	src: url('../fonts/innovart.eot');
	src: url('../fonts/innovart.eot?iefix') format('eot'),
	     url('../fonts/innovart.woff') format('woff'),
	     url('../fonts/innovart.ttf') format('truetype'),
	     url('../fonts/innovart.svg#webfont') format('svg');
	font-weight:normal;
	font-style:normal;
}

div, ul, li{
	display:block;
	margin:0;
	padding:0;
	list-style:none;}
	
input, label {font-family: Arial, Helvetica, sans-serif; }

.left {float:left;}
.right {float:right;}


/* ==========================================================================
   Header
   ========================================================================== */

#header {
	position:relative;
	display:inline-block;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	background-color:#FFF;
	font-size: 13px;}

#header .left,
#header .right {	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#header .left {display:block; background-color:#222; float:left; width:33.3%; padding: 27px 0 28px;}
#header .left .logo {width:135px; height:25px; margin-left:30px; background-image:url(../img/innovart.png); background-size:cover; display:block;}

#header .right {display:block; background-color:#FFF; float:left; width:66.6%; padding:30px;}
#header .menu {font-size:15px; line-height:20px; height:20px; float:left;}
#header .menu ul {float:left;}
#header .menu li {float:left; margin-right:20px;}
#header .menu li:last-child {margin-right:0;}
#header .menu a {color:#222;}
#header .menu a.active{color:#BBB;}
#header .menu a.active:hover {cursor:default; text-decoration:none;}

#header .toggle {display:none; float:right; opacity:0.8}
#header .toggle .label {display:block; float:left; font-size:16px; font-family:"InnovartBold", Arial, Helvetica, sans-serif; text-transform:uppercase; height:30px; line-height:30px; margin-right:20px;}

#header .toggle .open,
#header .toggle .close {display:block; width:20px; height:20px; float:left; cursor:pointer}

#header .toggle .open {background-image:url(../img/open.png); background-size:cover;}
#header .toggle .close {background-image:url(../img/close.png); background-size:cover; display:none; }


#header .menu-mobile {
	display:none;
	width:100%;
	float:left;
	font-size:20px;
	line-height:30px;
	background:#eaeaea;
	text-align:left;
	padding:30px;}
	
#header .menu-mobile a {color:#222;}
#header .menu-mobile a.active{color:#BBB;}
#header .menu-mobile a.active:hover {cursor:default; text-decoration:none;}


/* ==========================================================================
   Boxes
   ========================================================================== */
   
.box{
    position: relative;
    overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	float:left;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	color:#888;
	text-align:center;}

.box .wrapper {
	display: table;
	width: 100%;
	height: 100%;}
	
.box .wrapper .cover {
    display: table-cell;
    vertical-align: middle;}

.simple {width:33.3%; text-align: center; background-color:#222;}
.simple:before{content: ""; display: block;padding-top:66.6%;}

.doble {width:33.3%; text-align: center; background-color:#333!important;}
.doble:before{content: ""; display: block;padding-top:66.6%;}

.tall {width:33.3%; text-align: center; background-color:#222;}
.tall:before{content: ""; display: block; padding-top:66.6%;}

.small {width:33.3%; text-align: center; background-color:#222; border-right:1px solid #888; border-bottom:1px solid #222;}

.full {width:100%; text-align: center; background-color:#222; margin:0 auto 2px;}
.full:before{content: ""; display: block;padding-top:60%;}

.banner {width:100%; text-align: center; background-color:#222;}
.banner:before{content: ""; display: block;padding-top:45%;}

.box-content{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;	
	-webkit-transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out;
	background-size:cover;
	background-position:center center;}
   
/* ==========================================================================
   Content
   ========================================================================== */
   
#content {
	position:relative;
	display:inline-block;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	background-color:#222;
}

#content .container {
	width:100%;
	max-width:640px;
	margin:60px auto;
}

.tall .box-content {padding:30px;}
.tall .box-content h1 {text-align:left; max-width:300px; font-size:30px; line-height:38px; color:#f5f5f5;}
.tall .box-content p  {text-align:left; max-width:420px; font-size:15px; line-height:22px; color:#888;} 

.simple .box-content {text-align:left; background-color:rgba(0, 0, 0, 0.7); opacity:0}
.simple .box-content:hover {opacity:1}
.simple .box-content h1 {position:absolute; top:30px; left:30px; font-size:26px; color:#FFF;}
.simple .box-content h2 {position:absolute; top:50px; left:30px; font-size:20px; color:#888;}
.simple .box-content h3 {
	position:absolute;
	bottom:30px;
	left:30px;
	font-size:16px;
	color:#FFF;
}

.doble .box-content {text-align:left;}
.doble .box-content h1 {margin:40px 90px 0 40px; font-size:20px; line-height:26px; color:#FFF;}
.doble .box-content h2 {margin:0 90px 0 40px; font-size:20px; line-height:26px; color:#888;}
.doble .box-content h3 {margin:40px 30px 30px 40px; font-size:15px; color:#CCC; float:left;}
.doble .box-content p {margin:30px 60px 30px 40px; font-size:25px; line-height:32px; color:#CCC; clear:both; }
.doble .box-content a {margin:30px 30px 30px 40px; font-size:20px; line-height:26px; color:#CCC;}


.center .box-content{opacity:0.3!important;background-color:#111!important;}

.center .box-content:hover {opacity:1!important;}

.center .box-content h1 {
	position:relative;
	top:auto;
	left:auto;
	font-size:44px;
	color:#FFF;
	text-align:center;
}

/* ==========================================================================
   Agency
   ========================================================================== */

#content.agency {
	background-color:#222;
	color:#888;
}

#content.agency .container{
	width:80%;
	max-width:860px;
	padding:60px 0;
	clear:both;
}

#content.agency .container h1 {font-size:42px; line-height:50px; color:#fff;}
#content.agency .container h3 {font-size:15px; margin-bottom:30px;}
#content.agency .container p {font-size:20px; line-height:26px; margin-bottom:20px;}

#content.agency .container ul {margin:60px auto; float:left}
#content.agency .container ul li {width:45%; margin-right:10%; float:left; }
#content.agency .container ul li:last-child {margin-right:0;}

/* ==========================================================================
   Clients
   ========================================================================== */

#content.clients {
	background-color:#222;
	color:#888;
}

#content.clients .container{
	width:80%;
	max-width:860px;
	padding:60px 0;
	clear:both;
}

#content.clients .container h1 {font-size:42px; line-height:50px;}
#content.clients .container h3 {font-size:15px; margin-bottom:30px;}
#content.clients .container p {font-size:20px; line-height:26px; margin-bottom:20px;}

#content.clients .container ul {margin:60px auto; float:left}
#content.clients .container ul li {width:23%; margin:0 1% 8% 1%; float:left; }
#content.clients .container ul li:last-child {margin-right:0;}

/* ==========================================================================
   Services
   ========================================================================== */

#content.services {
	background-color:#F0F0F0;
	color:#222;
}

#content.services .container{
	width:80%;
	max-width:860px;
	clear:both;
}

#content.services .container h1 {font-size:42px; line-height:50px;}
#content.services .container h3 {font-size:15px; margin-bottom:30px;}
#content.services .container p {font-size:20px; line-height:26px; margin-bottom:20px;}

#content.services .container ul {width:100%; margin:60px auto; float:left}
#content.services .container ul li {width:30%; margin-top:15px; margin-right:5%; float:left; }
#content.services .container ul li:last-child {margin-right:0;}

/* ==========================================================================
   Contact
   ========================================================================== */

#content.contact {
	background-color:#F0F0F0;
	color:#222;
}

#content.contact .container{
	width:80%;
	max-width:860px;
	padding:0;
	clear:both;
}

#content.contact .container h3 {font-size:15px; margin-bottom:30px;}
#content.contact .container h1 {font-size:42px; line-height:45px; margin-bottom:60px; max-width: 640px}
#content.contact .container p {font-size:20px; line-height:26px; margin-bottom:20px;}
#content.contact .container p strong {font-size:16px;}
#content.contact .container p a {text-decoration:underline;}

#map {
    position: relative;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color:#888;
}

#map_canvas {
  	  position: absolute;
	  width:100%!important;
	  height:auto!important;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
}

#map_canvas:before {
	content: "";
	display: block;
	padding-top: 45.3%;
}

/* ==========================================================================
   Work
   ========================================================================== */
   
#header.project {position:fixed; z-index:999}

#content.work {padding-top:80px;}

#content.work {background-color:#222; color:#ccc; clear:both;}

#content.work .left-column,
#content.work .right-column {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;}

#content.work .left-column {width:33.3%; padding:30px; float:left; }
#content.work .right-column {width:66.6%; float:left;}

#content.work .title,
#content.work .date,
#content.work .text,
#content.work .nav {width:100%; margin:auto; margin-top:30px; }

#content.work .title {margin-top:0;}
#content.work .title h1 {font-size:30px; line-height:38px; color:#ddd;}

#content.work .text {max-width:420px; margin:0; margin-top:30px;}
#content.work .text p {font-size:16px; line-height:24px; color:#bbb;}
#content.work .text a {color:#bbb;}
#content.work .text a:hover {color:#fff;}

#content.work .date h3 {font-size:12px; line-height:15px; margin-right:30px; display:inline; color:#666;}

#content.work .nav {padding:30px 0 0;  letter-spacing:0.2; max-width:380px; margin:30px 0;}
#content.work .nav a {color:#999;}
#content.work .nav a:hover {color:#fff; text-decoration:none;}

#content.work .sticky {
	position:fixed;
	width:33.3%;
	padding-top:30px;
	padding-right:60px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;}
	
#up {
	position:fixed;
	bottom:40px;
	display:block;
	height:20px;
	color:#999;}
	
#up:hover {color:#fff; text-decoration:none;}

.videoWrapper {
	position: relative;
	padding-bottom: 54%; /* 16:9 */
	padding-top:25px;
	height: 0;
	overflow:hidden;
	background-color:#333;
	background-image:url(../img/fancybox_loading@2x.gif);
	background-size:20px 20px;
	background-repeat:no-repeat;
	background-position:center center;
	margin:auto;
	margin-bottom:2px;}

.videoWrapper iframe,
.videoWrapper object,  
.videoWrapper embed  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:#181617;}

/* ==========================================================================
   Team
   ========================================================================== */

#content.team .doble .box-content h1 {color:#FFF;}
#content.team .doble .box-content h2 {color:#CCC;}
#content.team .doble .box-content h3 {color:#888;}
#content.team .doble .box-content p {color:#888;}
#content.team .doble .box-content a {color:#888;}

#content.team .small {
	position:relative;
}

#content.team .small .teammate {
	bottom:0;
	background-color:#222;
	width:100%;
	padding:20px 0 40px;
	text-align:left;
	z-index:9999;
}

#content.team .small .teammate h1 {font-family: "InnovartBold", Arial, Helvetica, sans-serif; font-size:20px; line-height:26px; color:#888; margin:0 20px}
#content.team .small .teammate h2 {font-family: "InnovartLight", Arial, Helvetica, sans-serif;font-size:20px; line-height:26px; color:#888; margin:0 20px;}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
	position:relative;
	display:inline-block;
	float:left;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	font-size:14px;
	color:#666;
	background-color:#444;
}

#footer a{color:#666;}
#footer a:hover{color:#666;}

#footer .left {float:left; width:33.3%; padding:80px 0 30px; height:30px; }
#footer .left .logo {width:135px; height:25px; margin-left:30px; background-image:url(../img/innovart.png); background-size:cover; display:block; opacity:0.3;}

#footer .left .logo:hover {opacity:1;}

#footer .contact {float:left; width:33.3%; padding:70px 0 0; }
#footer .contact span {display:block; width:70%; max-width: 340px;}

#footer .social {float:left; width:33.3%; padding:0;}

#footer .social li {display:block; margin:0 1px; height:40px; float:left; background-color:#333;}
#footer .social li.follow {padding:0 15px; line-height:40px; }

#footer .social li a {display:block; width:30px; height:30px; margin:5px; background-position:center center; opacity:0.3;}
#footer .social li a.facebook {background-image:url(../img/facebook.png); background-size:cover;}
#footer .social li a.linkedin {background-image:url(../img/linkedin.png); background-size:cover;}
#footer .social li a.email {background-image:url(../img/email.png); background-size:cover;}

#footer .social li a:hover {opacity:1;}

#footer .copyright {display:block; float:left; margin:50px 0 0}


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

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}



/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (min-width:1920px) {
.videoWrapper {padding-bottom:43%;}
} 


@media screen and (min-width:1537px) {
/*#content.work .right-column {padding-top:30px; margin:auto; background-color:#333;}*/
} 

@media screen and (max-width:1380px) {
/*
.tall:before{padding-top:130%;}	
.text .box-content h3 {font-size:10px; line-height:14px; margin:25px 0 20px 25px}
.text .box-content p {font-size:13px; line-height:18px; margin:0 40px 20px 25px}
.text .box-content a {font-size:13px; line-height:18px; margin:0 25px 25px 25px}
*/

} 

@media screen and (max-width:1080px) {
/*
.doble .box-content h1 {margin:30px 40px 0 30px; font-size:20px; line-height:24px; }
.doble .box-content h2 {margin:0 40px 0 30px; font-size:20px; line-height:24px;}
.doble .box-content h3 {margin:30px 15px 25px 30px; font-size:15px; line-height:24px;}
.doble .box-content p {margin:20px 30px 30px 30px; font-size:20px; line-height:28px;}
.doble .box-content a {margin:20px 30px 30px 30px; font-size:20px; line-height:28px;}
*/
} 



@media screen and (max-width:1320px) {
	
.simple {width:50%;}
.simple:before{padding-top:66.6%;}

.tall {width:50%;}
.tall:before{padding-top:66.6%;}

#header .left {width:50%}
#header .right {width:50%}

#header .left.off {width:33.3%}
#header .right.off {width:66.6%}
} 

@media screen and (max-width:1280px) {
    
.tall .box-content h1 {max-width:300px; font-size:30px; line-height:38px;}
.tall .box-content p  {max-width:420px; font-size:15px; line-height:22px;} 
    
}

@media screen and (max-width:1024px) {
	
#header .toggle {display:block;}
#header .menu {display:none;}
	
#header .left.off {width:50%}
#header .right.off {width:50%}
#content.work .left-column {width:100%; text-align:center; max-width:none;}
#content.work .right-column {width:100%;}

#content.work .title,
#content.work .date,
#content.work .text {max-width:420px;}
#content.work .nav {max-width:none;}

#content.work .text {margin:auto; margin-top:30px;}
#content.work .title {margin-top:30px;}
#content.work .date h3 {margin:0 10px;}
    
.tall {width:100%; height: auto;}
.tall:before {display: none;}
.tall .wrapper {height: auto;}
.tall .box-content {position:relative; top:auto; float:left;}
.tall .box-content h1 {font-size: 25px; line-height: 30px;}
.tall .box-content p {font-size:15px; line-height:22px;}

.text:before{display:none;}
.text .box-content {position:relative; top:auto; float:left; padding-bottom:20px;}
.text .box-content p {max-width:480px;}
.text .box-content a {clear:both;}

.doble {width:50%;}
.doble:before {padding-top:66.6%;}

.doble .box-content h1 {font-size:15px; line-height:20px; }
.doble .box-content h2 {font-size:15px; line-height:20px;}
.doble .box-content h3 {margin:30px 15px 15px 30px; font-size:10px; line-height:20px;}
.doble .box-content p {font-size:15px; line-height:24px;}
.doble .box-content a {font-size:15px; line-height:24px;}

.small {width:50%;}

#content.services .container h1,
#content.agency .container h1,
#content.clients .container h1,
#content.contact .container h1  {font-size:26px; line-height:34px;}

#content.services .container p,
#content.agency .container p,
#content.clients .container p,
#content.contact .container p {font-size:15px; line-height:24px;}

#content.team .small .box-content .teammate h1 {font-size:15px; line-height:22px;}
#content.team .small .box-content .teammate h2 {font-size:15px; line-height:22px;}

#footer .left,
#footer .contact,
#footer .social,
#footer .copyright {width:auto; padding:30px 0 0 0; margin-left:30px; float:left; clear:both;}

#footer .copyright {margin:30px;}
    
#footer .left .logo {margin-left:0;}

#content.work .title .nav li {display:none;}
#content.work .sticky {position:relative;width:auto;padding:0;}

#up {display:none;}

}

@media screen and (max-width:820px) {
/*
#content.clients .container ul {width:auto; float:none;}
#content.clients .container ul li {width:50%; margin:30px auto; float:left;}
#content.clients .container ul li img {display:block; margin:auto;}

.doble {width:100%;}
.doble:before{padding-top:66.6%;}

.doble .box-content h1 {margin:40px 90px 0 40px; font-size:20px; line-height:26px;}
.doble .box-content h2 {margin:0 90px 0 40px; font-size:20px; line-height:26px;}
.doble .box-content h3 {margin:40px 30px 30px 40px; font-size:15px;}
.doble .box-content p {margin:30px 60px 30px 40px; font-size:25px; line-height:32px; }
.doble .box-content a {margin:30px 30px 30px 40px; font-size:20px; line-height:26px;}
*/
}

@media screen and (max-width:768px) {

.text:before {display:none;}
.text .box-content {position:relative;}

.simple {width:100%;}
.simple:before{padding-top:66.6%;}

.doble .box-content h1 {margin:30px 40px 0 30px; font-size:26px; line-height:34px; }
.doble .box-content h2 {margin:0 40px 0 30px; font-size:20px; line-height:24px;}
.doble .box-content h3 {margin:30px 15px 25px 30px; font-size:15px; line-height:24px;}
.doble .box-content p {margin:20px 30px 30px 30px; font-size:20px; line-height:28px;}
.doble .box-content a {margin:20px 30px 30px 30px; font-size:20px; line-height:28px;}

.text .box-content h3 {margin:30px 0px 30px 30px; font-size:12px; line-height:15px;}
.text .box-content p {margin:0 60px 30px 30px; font-size:18px; line-height:24px; clear:both; }
.text .box-content a {margin:0 30px 30px 30px; font-size:18px; line-height:24px;}

.small {width:50%;}

#content .container {margin:30px auto;}

#content.agency .container,
#content.clients .container,
#content.contact .container,
#content.services .container {width:100%; padding:10px 30px;}

#content.services .container ul li {width:100%; margin:0;}
#content.services .container ul li p {margin:0;}

#content.agency .container ul li {width:100%; margin-bottom:30px;}

.videoWrapper {padding-bottom:53%;}
.box .wrapper {height: auto;}
    
#content.services .container ul li:last-child {margin-top: 30px}
.remove {display: none;}
}

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

#header .left {width:100%;}
#header .right {position:absolute; width:0%; right:0; padding: 30px 0;}
 
#header .right {width:auto; padding:30px 0; background-color:#222;}
#header .right .toggle {margin-right:30px; }
#header .right .toggle .label {display:none;}
#header .right .toggle .open {background-image:url(../img/open-w.png);}
#header .right .toggle .close {background-image:url(../img/close-w.png); }

#header .right .menu {position:absolute;left:0;}
#header .right .menu a {color:#CCC; font-size:18px;}
#header .right .menu a:hover {color:#CCC;}

#content.work .title {position:relative; padding:0;}
#content.work .title h1 {height:auto; line-height:35px; margin:30px 30px 0}
#content.work .title .nav {display:none;}
.bx-wrapper {display:none;}

.text .box-content h3 {margin:25px 0 20px 30px}
.text .box-content p {margin:0 40px 20px 30px}
.text .box-content a {margin:0 25px 25px 30px}

.doble {width:100%;}
.doble:before {padding-top:85%;}

.doble .box-content h1 {margin:30px 40px 0 30px;font-size:15px; line-height:20px; }
.doble .box-content h2 {margin:0 40px 0 30px;font-size:15px; line-height:20px;}
.doble .box-content h3 {margin:30px 15px 15px 30px; font-size:10px; line-height:20px;}
.doble .box-content p {margin:20px 30px 20px 30px;font-size:15px; line-height:22px;}
.doble .box-content a {margin:20px 30px 20px 30px;font-size:15px; line-height:22px;}
		
.small {width:100%;}

.tall:before {display:none;}
.tall .box-content {position:relative;}
.tall .box-content h1 {position:relative; font-size: 26px; line-height: 34px;}
.tall .box-content a {position:relative; font-size:18px; line-height:22px; display:block; margin:30px; bottom:auto; }
	
#content.services .container h1,
#content.agency .container h1,
#content.clients .container h1,
#content.contact .container h1 {font-size:26px; line-height:34px;}

#content.services .container h3,
#content.agency .container h3,
#content.clients .container h3,
#content.contact .container h3 {font-size:11px; line-height:18px;}

#content.contact .container p strong {font-size:11px;}

#content.clients .container ul {width:auto; float:none;}
#content.clients .container ul li {width:auto; margin:30px auto; float:none;}
#content.clients .container ul li img {display:block; margin:auto;}

#content.work .bottom .nav li {font-size:13px;}

.videoWrapper {padding-bottom:52%;}

}

@media screen and (max-width:360px) {

#content.work .bottom .nav li {font-size:13px;}

.doble {width:100%;}
.doble:before {padding-top:105%;}

.small {width:50%;}
#content.team .small .teammate {padding:20px 0;}
#content.team .small .teammate h1 {font-size:11px; line-height:15px;}
#content.team .small .teammate h2 {font-size:11px; line-height:15px;}

.tall {width:100%;}
.tall:before{padding-top:66.6%;}

#map_canvas:before {padding-top: 100%!important;}



}

/* ==========================================================================
   For animation purposes
   ========================================================================== */

#content,
.slider {opacity:0; background-color:#222;}