/*  Fonts  */

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

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

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

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



/* ESTRUCTURA */
body{
    background: #1ff2cd;
}
.content {
	height:auto;
	padding:80px 50px 120px 50px;
}
.wrapper {
   margin: 0 auto;
}
.row {
    padding: 50px;
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}
header {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 40px;
	min-height: 100%;
	padding: 0 10px;
	background: rgba(16, 16, 16, 0.23);	
	float: left;
	margin-right: 10px;
	overflow: hidden;
	z-index: 8888;
}

/* TEXTO */
.txt-center{ text-align:center;}
.txt-right{ text-align:right;}
.txt-left{ text-align:left;}
.txt-black{ color: #000;}
.txt-white{ color: #fff;}

h1 { 
	font-size: 130px; 
	line-height: 105px; 
	letter-spacing: -5px; 
	font-family: 'avenirblack',"montserratbold", Arial, "raleway-regular"; 
}
h2 { 
	font-size: 90px; 
	line-height: 80px; 
	padding-bottom:50px; 
	letter-spacing: -5px; 
	font-family: 'avenirblack',"montserratbold", Arial, "raleway-regular"; 
}
h3 { 
	font-size: 40px; 
	line-height: 30px; 
	padding-bottom:20px; 
	letter-spacing: -2.5px; 
	font-family: 'avenirheavy',"montserratbold", Arial, "raleway-regular"; 
}
h4 { 
	font-size: 20px; 
	line-height: 20px; 
	letter-spacing: -1px; 
	padding:30px 0; 
	font-family: 'avenirheavy',"montserratbold", Arial, "raleway-regular"; 
	color: rgba(255, 255, 255, 0.37);
}
h5 { 
	font-size: 25px; 
	line-height: 20px; 
	padding-bottom:18px; 
	letter-spacing: -2px; 
	font-family: 'avenirheavy',"montserratbold", Arial, "raleway-regular"; 
}

p {
    font-family: 'avenirmedium', Arial, "raleway-regular";
	font-size:20px;
	line-height:26px;
	color: #fff;
}
p.copy {
    font-family: 'avenirmedium', Arial, "raleway-regular";
	font-size:12px;
	line-height:40px;
	color: #000;
}

@media (max-width:700px){
	h1 { font-size: 75px; line-height: 65px; letter-spacing: -5px; padding-top:10px;}
	h2 { font-size: 60px; line-height: 55px; letter-spacing: -2px;}
	h3 { font-size: 25px; line-height: 20px; letter-spacing: -2px;}
	h4 { font-size: 20px; line-height: 20px; letter-spacing: -1px;}
	h5 { font-size: 20px; line-height: 10px; letter-spacing: -1px; padding-bottom:10px; }
}


/* ESPACIOS INTERNOS */

.small_01 {
    padding: 0px 80px 0 80px;
}
.small_02 {
    padding: 50px 250px;
}
@media (max-width:1100px){
	.small_01 {
		padding: 80px 0px 0px 0px;
	}
	.small_02 {
		padding: 30px 0px;
	}
}


/* BOTONES */
a {
	text-decoration:none;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
	z-index:9999;
}


.btn {
	padding: 12px 100px;
	margin-top: 50px;
	border-color: #fff;
	border-radius: 50px;
    font-family: 'avenirheavy', Arial, "raleway-regular";
	font-size: 14px;
	border-color: #fff;
	color: #fff;
	background-color: transparent;
	border-style:solid;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
	color: #000;
	background-color: #fff;
	outline: 0;
}

.btn.small {
	padding: 12px 70px;
	margin-top: 50px;
	border-color: #fff;
	border-radius: 50px;
    font-family: 'avenirheavy', Arial, "raleway-regular";
	font-size: 14px;
	border-color: #fff;
	color: #fff;
	background-color: transparent;
	border-style:solid;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}
.btn.small:hover,
.btn.small:focus,
.btn.small:active,
.btn.small.active {
	color: #000;
	background-color: #fff;
	outline: 0;
}

.btn_black {
	padding: 12px 100px;
	margin-top: 50px;
	border-color: #000;
	border-radius: 50px;
    font-family: 'avenirheavy', Arial, "raleway-regular";
	font-size: 14px;
	border-color: #000;
	color: #000;
	background-color: transparent;
	border-style:solid;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}
.btn_black:hover,
.btn_black:focus,
.btn_black:active,
.btn_black.active {
	color: #fff;
	background-color: #000;
	outline: 0;
}

.btn_black.small {
	padding: 12px 50px;
	margin-top: 50px;
	border-color: #000;
	border-radius: 50px;
    font-family: 'avenirheavy', Arial, "raleway-regular";
	font-size: 14px;
	border-color: #000;
	color: #000;
	background-color: transparent;
	border-style:solid;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}
.btn_black.small:hover,
.btn_black.small:focus,
.btn_black.small:active,
.btn_black.small.active {
	color: #fff;
	background-color: #000;
	outline: 0;
}



.btn_mail a {
	float:right;
	position:fixed;
	top:20px;
	right:70px;
	margin-top: 10px;
    font-family: 'avenirblack', Arial, "raleway-regular";
	font-size: 20px;
	color: #fff;
	text-decoration:none;
	background-color: transparent;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
	z-index:9999;
}
.btn_mail a:hover {
	color: rgba(255, 255, 255, 0.37);
}

.btn_mail_black a {
	color: #000;
	text-decoration:none;
	background-color: transparent;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}

.btn_mail_black a:hover {
	color: rgba(255, 255, 255, 0.37);
}

.btn_close a{
	width: 40px;
	height: 40px;
	float:right;
	position:fixed;
	right:15px;
	margin-top: 55px;
    font-family: 'avenirblack', Arial, "raleway-regular";
	font-size: 20px;
	color: #fff;
	text-decoration:none;
	z-index:9999;
	text-align: center;
	line-height: 42px;
	background: 0 0;
	background-color: transparent;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}
.btn_close a:hover{
	text-decoration:none;
	color: rgba(255, 255, 255, 0.37);
}

.btn-social {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-top: 15px;
	margin: 5px;
	border: 3px solid #000;
	border-radius: 100%;
	text-align: center;
	font-size: 20px;
	line-height: 42px;
	background: 0 0;
	transition: all .1s ease-in-out;
	color: #000;
}
.btn-social:hover,
.btn-social:focus,
.btn-social:active,
.btn-social.active {
	border: solid 3px #fff;
	color: #fff;
}
	
@media (max-width:700px){
	.btn-social {
		width: 35px;
		height: 35px;
		border: 3px solid #000;
		border-radius: 100%;
		text-align: center;
		font-size: 15px;
		line-height: 35px;
	}
	.btn_close a{
		right:10px;
		margin-top: 40px;
	}
}

/* IMAGENES */
.img-centered {
    margin: 0 auto;
}



/* LISTAS */
li{
    list-style: none;
}

ul.social{
    list-style: none;
    margin-bottom: 5px;
}

ul.social li{
	display: inline-block;
    float: left;
    position: relative;
    margin: 0 10px 15px 0;
}


/*  LOGO  */
.logo img{
	margin: 20px 10px;
	position: fixed;
	z-index: 5555;
	opacity: 1;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;}
.logo img:hover{
	opacity: .5;
}

@media (min-width:700px) and (max-width:1100px){
	.logo img{
		margin: 20px 10px;
	}
}
@media (max-width:700px){
	.logo img{
		margin: 10px 10px;
	}
}


/*  MAIN  */
.main{
    width: 100%;
    height: 100%;
	padding: 0px 0px 0px 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 55;
    clear: both;
}


/*  HOME  */
/*#intro {
	background: url('../img/img_home_intro.png') no-repeat center;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
	min-height:700px;
}
*/
#intro h1{
	font-size:160px;
}
#intro h4{
	color:#000;
}
#intro .bajada {
	margin: 0 auto 50px auto;
	width:400px;
}
@media (max-width:700px){
	#intro h1 { font-size: 95px; line-height: 80px; letter-spacing: -5px; padding-top:10px;}
}

#ypf {
	background: url('../img/bg_light.png') no-repeat center top 10px;
	background-color:#350f55;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#ford {
	background: url('../img/bg_light.png') no-repeat center top -50px;
	background-color:#005492;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#packasap {
	background: url('../img/bg_light.png') no-repeat center top;
	background-color:#86b81b;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#icbc {
	background: url('../img/bg_light.png') no-repeat center top;
	background-color:#cb181e;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#bimbo {
	background: url('../img/bg_light.png') no-repeat center top -70px;
	background-color:#f6c180;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#mulen {
	background: url('../img/bg_light.png') no-repeat center top 140px;
	background-color:#b2dde1;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#oblivion {
	background: url('../img/bg_light.png') no-repeat center top 140px;
	background-color:#004959;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}

.img-home-ypf {
    margin: -20% 0 0 35%;
	z-index:9999;
}
.img-home-packasap {
    margin: -30% 0 0 50%;
	z-index:9999;
}
.img-home-icbc {
    margin: -32% 0 0 45%;
	z-index:9999;
}
.img-home-bimbo {
    margin: -25% 0 0 45%;
	z-index:9999;
}
.img-home-ford {
    margin: -15% 0 0 30%;
	z-index:9999;
}
.img-home-mulen {
    margin: -5% 0 0 30%;
	z-index:9999;
}
.img-home-oblivion {
    margin: -5% 0 0 30%;
	z-index:9999;
}
.bajada {
	margin: 0 0 50px 0;
	width:400px;
}

@media (max-width:1100px){
	#ypf {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top -60px;
		background-color:#350f55;
	}
	#ford {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top -120px;
		background-color:#005492;
	}
	#packasap {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top;
		background-color:#86b81b;
	}
	#icbc {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top;
    	background-color:#cb181e;
	}
	#bimbo {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top -120px;
		background-color:#f6c180;
	}
	#mulen {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top -120px;
		background-color:#b2dde1;
	}
	#oblivion {
		padding:30px 0 60px 0;
		background: url('../img/bg_light_mobile.png') no-repeat center top -120px;
		background-color:#004959;
	}
	.img-home-packasap {
		margin: 0 auto 30px auto;
	}
	.img-home-ypf {
		margin: 0 auto 30px auto;
	}
	.img-home-icbc {
		margin: 0 auto 30px auto;
	}
	.img-home-ford {
		margin: 0 auto 30px auto;
	}
	.img-home-bimbo {
		margin: 0 auto 30px auto;
	}
	.img-home-mulen {
		margin: 0 auto 30px auto;
	}
	.img-home-oblivion {
		margin: 0 auto 30px auto;
	}
	.bajada {
		margin-top: 20px;
		width:100%;
	}
}



/* PROJECTS GRID */
.project_grid.row {
    padding: 40px 35px;
}
.project_grid>img {
	margin: 0 auto 30px auto;
	z-index:9999;
}
.project_grid>h2 {
	text-align:center; 
	font-size: 60px; 
	line-height: 50px; 
	letter-spacing: -2px; 
	margin-bottom:2px;
}
.project_grid>h4 { 
	text-align:center; 
	font-size: 15px; 
	line-height: 10px; 
	letter-spacing: -1px;
	margin-top:-40px; 
	padding: 0 0 30px 0;
	font-family: 'avenirheavy',"montserratbold", Arial, "raleway-regular"; 
}

.main .work .caption.ypf {
	background-color:rgba(53, 15, 85, 0.95);
}
.main .work .caption.icbc {
	background-color:rgba(203, 24, 30, 0.94);
}
.main .work .caption.packasap {
	background-color:rgba(134, 184, 27, 0.95);
}
.main .work .caption.ford {
	background-color:rgba(0, 84, 146, 0.97);
}
.main .work .caption.bimbo {
	background-color:rgba(246, 193, 128, 0.96);
}
.main .work .caption.mulen {
	background-color:rgba(178, 221, 225, 0.97);
}
.main .work .caption.oblivion {
	background-color:rgba(0, 73, 89, 0.96);
}
.main .work{
    display: block;
    width: 50%;
    height: 300px;
    float: left;
    position: relative;
    overflow: hidden;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}
.main.work.caption a{
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}
.main .work .media{
    width: 100%;
    vertical-align: middle;
}
.main .work .caption{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    background: rgba(0, 0, 0, 0.82);
    opacity: 0;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}
.main .work a:hover .caption{
    opacity: 1;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}
.work .caption .work_title{
    display: block;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -40px;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}
.main .work .caption h1{
    position: relative;
    display: inline-block;
    max-width: 50%;
    padding: 0;
    z-index: 77;
}

/* PROJECTS INTERNA */
.content_project {
	height:auto;
	padding:80px 0px 120px 0px;
}
.project.row {
    padding: 10px 50px;
}
.bajada.project {
	margin: 0 auto;
	width:50%;
}
.img-proyect {
    margin-top: -60px;
	z-index:9999;
}
.project>h1 { 
	font-size: 185px; 
	line-height: 150px; 
	letter-spacing: -5px; 
	margin-bottom:-120px;
}
.project>h4 { 
	font-size: 20px; 
	line-height: 20px; 
	letter-spacing: -1px; 
	padding: 0 0 30px 0;
	font-family: 'avenirheavy',"montserratbold", Arial, "raleway-regular"; 
}
.bg_info{
    display: block;
    width: 100%;
    min-height: 200px;
    float: left;
    position: relative;
    overflow: hidden;
	background-color: rgba(8, 8, 8, 0.15);
	margin: 50px 0;
	padding: 40px 0 80px 0;
	text-align:center;
}
.bg_white{
    display: block;
    width: 100%;
    min-height: 200px;
    float: left;
    position: relative;
	background-color: #fff;
	padding: 40px 0 80px 0;
	text-align:center;
	margin-top: -50px;
}
.bg_light_project {
	background: url('../img/bg_light_project.png') no-repeat center bottom;
    display: block;
    width: 100%;
    min-height: 200px;
    float: left;
    position: relative;
	padding: 40px 0 80px 0;
	margin-top: -50px;
}

#ypf_project {
	background: url('../img/bg_light.png') no-repeat center top 10px;
	background-color:#350f55;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#ford_project {
	background: url('../img/bg_light.png') no-repeat center top -150px;
	background-color:#005492;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#packasap_project {
	background: url('../img/bg_light.png') no-repeat center top 140px;
	background-color:#86b81b;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#packasap_project .project>h1 { 
	font-size: 185px; 
	line-height: 150px; 
	letter-spacing: -5px; 
	margin-bottom:-90px;
}
#icbc_project {
	background: url('../img/bg_light.png') no-repeat center top;
	background-color:#cb181e;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#bimbo_project {
	background: url('../img/bg_light.png') no-repeat center top -70px;
	background-color:#f6c180;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#mulen_project {
	background: url('../img/bg_light.png') no-repeat center top -250px;
	background-color:#b2dde1;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#mulen_project .project>h1 { 
	font-size: 185px; 
	line-height: 150px; 
	letter-spacing: -5px; 
	margin-bottom:-60px;
}
#oblivion_project {
	background: url('../img/bg_light.png') no-repeat center top 80px;
	background-color:#004959;
	background-size: auto;
	-webkit-background-size: auto;
	-moz-background-size: auto;
	-o-background-size: auto;
}
#oblivion_project .project>h1 { 
	font-size: 185px; 
	line-height: 150px; 
	letter-spacing: -5px; 
	margin-bottom:-60px;
}

h2.thanks { 
	font-size: 90px; 
	line-height: 80px; 
	padding-bottom:10px; 
	letter-spacing: -5px; 
	font-family: 'avenirblack',"montserratbold", Arial, "raleway-regular"; 
}

.main .work.project{
    display: block;
    width: 50%;
    height: 170px;
    float: left;
    position: relative;
    overflow: hidden;
    transition:all .2s linear;
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
}


@media (max-width:700px){
	.main .work.project{
		width: 100%;
		height: 100px;
	}
	.bajada.project {
		width:80%;
	}
	.project.row {
		padding: 10px 0px;
	}
	.project>h1 { 
		font-size: 100px; 
		line-height: 95px; 
		letter-spacing: -2px; 
		margin-bottom:-100px;
	}
	.project>h4 { 
		font-size: 14px; 
		line-height: 10px; 
		letter-spacing: -1px; 
		padding: 0 0 10px 0;
		font-family: 'avenirheavy',"montserratbold", Arial, "raleway-regular"; 
	}
	.bg_white{
	padding: 40px 20px 80px 20px;
	}
	#ypf_project {
		background: url('../img/bg_light.png') no-repeat center top -180px;
		background-color:#350f55;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#ford_project {
		background: url('../img/bg_light.png') no-repeat center top -280px;
		background-color:#005492;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#packasap_project {
		background: url('../img/bg_light.png') no-repeat center top 50px;
		background-color:#86b81b;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#packasap_project .project>h1 { 
		font-size: 130px; 
		line-height: 100px; 
		letter-spacing: -5px; 
		margin-bottom:-60px;
	}
	#icbc_project {
		background: url('../img/bg_light.png') no-repeat center top -150px;
		background-color:#cb181e;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#icbc_project .project>h1 { 
	font-size: 105px; 
	line-height: 95px; 
	letter-spacing: -2px; 
	margin-bottom:-80px;
	}
	#bimbo_project {
		background: url('../img/bg_light.png') no-repeat center top -190px;
		background-color:#f6c180;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#mulen_project {
		background: url('../img/bg_light.png') no-repeat center top -280px;
		background-color:#b2dde1;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#mulen_project .project>h1 { 
		font-size: 135px; 
		line-height: 110px; 
		letter-spacing: -2px; 
		margin-bottom:-60px;
	}
	#oblivion_project {
		background: url('../img/bg_light.png') no-repeat center top -320px;
		background-color:#004959;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#oblivion_project .project>h1 { 
		font-size: 115px; 
		line-height: 110px; 
		letter-spacing: -2px; 
		margin-bottom:-50px;
	}
	h2.thanks { 
		font-size: 50px; 
		line-height: 45px; 
		padding-bottom:10px; 
		letter-spacing: -2px; 
	}
}
@media (min-width:700px) and (max-width:1100px){
	.main .work.project{
		width: 100%;
		height: 100px;
	}
	.project.row {
		padding: 30px 10px;
	}
	.bg_white{
	padding: 40px 20px 80px 20px;
	}
	#packasap_project {
		background: url('../img/bg_light.png') no-repeat center top 280px;
		background-color:#86b81b;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#icbc_project {
		background: url('../img/bg_light.png') no-repeat center top 100px;
		background-color:#cb181e;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#mulen_project {
		background: url('../img/bg_light.png') no-repeat center top -170px;
		background-color:#b2dde1;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
	#oblivion_project {
		background: url('../img/bg_light.png') no-repeat center top -120px;
		background-color:#004959;
		background-size: auto;
		-webkit-background-size: auto;
		-moz-background-size: auto;
		-o-background-size: auto;
	}
}


/*  ABOUT  */
#clients {
	padding:50px 0;
	margin-bottom:150px;
}
#agencies {
	padding:50px 0;
	margin-top:150px;
}
.logos {
	padding:30px 0;
	margin-bottom:50px;
}
.logo_client{
    display: block;
    width: 20%;
    height: auto;
	padding:25px 0;
    float: left;
    position: relative;
    overflow: hidden;
}
.logo_agency{
    display: block;
    width: 25%;
    height: auto;
	padding:5px 0;
    float: left;
    position: relative;
    overflow: hidden;
}
@media (max-width:700px){
	.logo_client{
		width: 50%;
	}
	.logo_agency{
		width: 50%;
		padding:15px 0;
	}
}
@media (min-width:700px) and (max-width:1100px){
	.logo_client{
		width: 25%;
	}
	.logo_agency{
		width: 25%;
		padding:20px 0;
	}
}



/*  Work Page  */
.top{
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: block;
	background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.work_nav{
    display: block;
    width: 100%;
	left:50%;
	right:50%;
}

.work_nav .btn{
    float: left;
}

.work_nav ul{
    list-style: none;
}

.work_nav ul li{
    display: block;
    float: left;
    margin: 10px 10px 1px 1px;
    position: relative;
}

.work_nav a{
    display: block;
    width: 50px;
    height: 50px;
	line-height:50px;
	margin-top: 15px;
	border: solid 2px #757171;
	border-radius: 100%;
	color: #757171;
	background: 0 0;
	transition: all .3s ease-in-out;
	text-align: center;
}

.work_nav a:hover,
.work_nav a:focus,
.work_nav a:active,
.work_nav a.active {
	border: solid 2px #15ad9e;
	color: #15ad9e;
}


.content_header{
    position: absolute;
	left: 50%;
	right:50%;
	width:100%;
}



a.like{
	color: #fff;
}

a:hover.like{
	color: rgba(255, 255, 255, 0.37);
}


/*  Tooltip  */
.tooltip{
    display: block;
    padding: 7px 10px;
    background: #15ad9e;
    color: #fff;
    font-size: 12px;
    position: absolute;
    white-space: nowrap;
    z-index: 999;
    opacity: 0;
    text-align: center;
    letter-spacing: .5px;
	margin-bottom:5px;

}

.tooltip:after{
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 3px 3px 0 3px;
    border-color: #15ad9e transparent transparent transparent;
    display: block;
    text-align: center;
    position: absolute;
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
}







/*  Responsive code  */
@media (max-width:1099px){
    .main .work{
        width: 50%;
		height:300px;
    }
    .main{
        width: 100%;
        position: relative;
        padding-left: 0;
    }
}

@media (min-width:1100px) {
	#mobile { display:none; }
}


@media (min-width:700px) and (max-width:1100px){
	#compu { display:none; }
    header .logo{
		width:30%;
		margin: 25px 0 0 20px;
	}
	.box{
        width: 33.33%;
    }
	#box { display:none; }

}

@media (orientation: landscape) and (min-width:500px) and (max-width:750px) {
    .content_header{
		left: 35%;
	}

	.box{
        width: 25%;
    }
	#box2 { display:none; }
	#compu { display:none; }
	
}

@media (max-width:1100px){
	
	.content{
		padding: 0px 10px;
		text-align:center;
	}
     .main .work{
        width: 100%;
    }
	.row{
		padding: 20px 40px 0 40px;
		text-align:center;
	}
	.box{
        width: 33.33%;
    }
	
	#compu { display:none; }
	#box1 { display:none; }
	#box2 { display:none; }

}



/*  Work Devices  */

/*  CelBlanco+CelNegro  */
.cel_wb_left{
    width: 50%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:10%;

}

.cel_wb_right{
    width: 50%;
    height: auto;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
    z-index: 100;
	margin-left:-19%;
}

/*  3CelFrente  */
.cel_white_01{
    width: 33.33%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:10%;

}

.cel_white_02{
    width: 33.33%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	z-index: 100;
	margin-left:-11%;
	margin-top:2%;
}


.cel_white_03{
    width: 33.33%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:-11%;
	margin-bottom:50px;
}

/*  Tablet+Cel White  */
.tablet_white_left{
    width: 77%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:10%;

}

.cel_white_right{
    width: 23%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
    z-index: 100;
	margin-left:-20%;
	margin-top:-3%;
}

/*  Tablet+Cel Black  */
.tablet_black_left{
    width: 77%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:8%;
	margin-bottom:10%;
}

.cel_black_right{
    width: 23%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
    z-index: 100;
	margin-left:-16%;
	margin-top:-0.5%;
}

/*  Objeto+Imac  */
.objeto{
    width: 28%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:10%;
	margin-top:38%;
    z-index: 100;
}

.imac{
    width: 77%;
    height: 100%;
    display: block;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
	margin-left:-17%;
	margin-top:-0.5%;
}



.box_work_left {
    width: 40%;
    height: 100%;
	margin-right:40px;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
	text-align:right;
}

.box_work_right {
    width: 35%;
    height: 100%;
	margin-top:250px;
	padding-left: -5px;
	padding-top: 10px;    
	display: block;
    float: left;
    position: relative;
    overflow: hidden;
	text-align:left;
}


.box_work {
    width: 50%;
    height: 100%;
	margin-bottom: 150px;
    display: block;
    float: left;
    position: relative;
    overflow: hidden;
}


/*  Close work btn  */

.modal-content {
    padding: 30px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.close-modal {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.close-modal:hover {
    opacity: .3;
}

.close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #e8e8e8;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #e8e8e8;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}



/*  Contact Form  */


.btn-send {
	padding: 10px 100px;
	margin-top: 50px;
	border-color: #15ad9e;
	border-radius: 50px;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	border-color: #15ad9e;
	color: #fff;
	background-color: #15ad9e;
	border-style:solid;
    transition:all .1s linear;
    -webkit-transition:all .1s linear;
    -moz-transition:all .1s linear;
    -o-transition:all .1s linear;
}

.btn-send:hover {
	color: #15ad9e;
	background-color: #1b1b1b;
}

::-moz-selection {
    text-shadow: none;
    background: #fff;
	color:#000;
}

::selection {
    text-shadow: none;
    background: #fff;
	color:#000;
}

/* TRANSICIONES */
.rotacion{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotacion:hover{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

.desplazar-der{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.desplazar-der:hover{
-webkit-transform: translate(5px, 0px);
-moz-transform: translate(5px, 0px);
-o-transform: translate(5px, 0px);
-ms-transform: translate(5px, 0px);
transform: translate(5px, 0px);
}

.desplazar-izq{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.desplazar-izq:hover{
-webkit-transform: translate(-5px, 0px);
-moz-transform: translate(-5px, 0px);
-o-transform: translate(-5px, 0px);
-ms-transform: translate(-5px, 0px);
transform: translate(-5px, 0px);
}

.zoom{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.zoom:hover{
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

.todo {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.todo.open-sidebar {
    left: 240px;
}
 
.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
	top: 0;
    height: 100%;
    background: #f3f3f3;
    z-index: 0;
}
#sidebar {
    background: #2290c9;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #196c96;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #196c96;
}