html, body{ height: 100%; width: 100%; margin: 0; padding: 0; background: #000000; }

.cl{ clear: both;}

textarea:focus, input:focus{ outline: 0;}

.videoWrap { width: 100%; height: auto; opacity: 0.3}
video{ width: 100%; height: auto; opacity: 0.3; z-index: 0;}
.bkPoster{ width: 100%; height: 100%; position: absolute; display: none;}
.cargaReel{ width: 20px; height: 20px; position: absolute; top: 50%; margin-top: -10px; left: 50%; margin-left: -10px; z-index: 1;}

a { text-decoration: none; color: inherit;}
header{ background: #000; position: relative; height: auto; width: 100%; overflow: hidden;}
.menuDesplegado{ width: 100%; height: 100%; background: url(images/bkMenu.jpg) no-repeat center center; background-size: cover; position: absolute; z-index: 15; display: none; opacity: 0;}
.menuDesplegado ul{ margin: 0; padding: 0; margin-top: 50px;}
.menuDesplegado ul li{ width: 100%; height: 60px; line-height:60px; text-align: center; font-size: 34px; font-family: 'LatinotypeArquitectaLight'; color: #fff; text-transform: uppercase; cursor: pointer;}
.menuDesplegado ul li span{ color: #f73776;}
.menuDesplegado ul li:hover,..menuDesplegado ul li:hover span{ color: #999999}
.holdRedes{ width: 110px; margin: 0 auto; margin-top: 20px;}
.holdRedes ul{ margin: 0; padding: 0;}
.holdRedes ul li, .holdRedes ul a{ display:block; list-style-type: none; float: left; width: 30px; height: 30px; margin-right: 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #fff; text-align: center; color: #000; font-size: 14px; line-height: 33px;}
.holdRedes ul li:nth-of-type(3), .holdRedes ul a:nth-of-type(3){ margin-right: 0; }
.holdRedes ul a:hover li{ background: #333; color: #fff;}
.contenedor{ width: 1000px; margin: 0 auto; position: relative;}
.contNav{ opacity: 0; position: absolute; top: 0; left: 50%; margin-left: -500px; z-index: 10;}
.botNav{ width: 110px; height: 30px; line-height: 30px; position: absolute; margin-top: 42px; font-family: 'LatinotypeArquitectaMedium'; font-size: 14px; color: #ffffff; cursor: pointer; z-index: 11}
.botNav span{  margin-left: 20px; line-height: 30px; font-size: 14px; margin-top: -31px; display: block;}
.botCierra{ color: #fff; cursor: pointer; width: 50px; height: 50px; margin: 0 auto; text-align: center; font-size: 40px; margin-top: 30px;}
.botNav:hover{ color: #999}
.botRedes{ width: 150px; float: right; line-height: 30px;  margin-top: 42px;}
.botRedes ul{ margin: 0; padding: 0;}
.botRedes ul li{ list-style-type: none; float: left; height: 30px; width: 30px; line-height: 30px; font-family: 'LatinotypeArquitectaMedium'; font-size: 14px; text-align: center; color: #ffffff; text-transform: uppercase;}
.botRedes ul li a:hover{ color: #999}
.botRedes ul li span{ font-family: 'LatinotypeArquitectaLight'; color: #999}
.botRedes ul li:nth-of-type(1){width: 60px;}
.botRedes ul li img{display: block; float: left;}
.logo{ width: 120px; height: 90px; position: absolute; left: 50%; margin-left: -60px; top: 20px;}
.logo img{ width: 100%; height: auto;}

.fraseInicial{ font-size: 70px; line-height: 70px; font-family: 'LatinotypeArquitectaLight'; height: 210px; color: #fff; width: 860px; position: absolute; left: 50%; margin-left: -430px; top: 50%; margin-top: -55px; opacity: 0;}
.fraseInicial span{ color: #f73776;}
.entraFrase{ margin-top: -105px; opacity: 1;}
.fraseDown { position: absolute; font-size: 16px; font-family: 'LatinotypeArquitectaHeavy'; text-align: center; width: 220px; left: 50%; margin-left: -110px; bottom: 80px; color: #fff; opacity: 0; cursor: pointer;}
.arrowDown{position: absolute; font-size: 16px; font-family: 'LatinotypeArquitectaHeavy'; text-align: center; width: 40px; left: 50%; margin-left: -20px; bottom: 40px; color: #fff; opacity: 0; cursor: pointer;}


/* MAIN ----------- */

.main{ background-color: #000000 !important; padding-bottom: 40px;}
.main p{ color: #fff; font-family: 'HelveticaNeueLTStdRoman'; font-size: 11.5px; text-align: center; line-height: 16px;}
.main p span{ color: #f73776;}
.main .divisor{ font-family: 'HelveticaNeueLTStdBd'; font-size: 17px }
.infoEmpresa{ padding: 40px 0 0 0;}
.descHacemos{ width: 300px; margin: 0 auto; opacity: 0;}

.contCols{ width: 100%; padding-top: 40px;}
.marketing .abierto{ height: 160px; }
.digital .abierto{ height: 230px; }
.estrategica .abierto{ height: 450px; }
.colclientes .abierto{ height: 280px; }

.col{ width: 320px; margin-right: 20px; float: left; margin-top: 130px; opacity: 0;}
.col:nth-of-type(3){ margin-right: 0;}
.ico{ width: 100px; height: 100px; background:#353535; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin: 0 auto; }
.ico img{ width: 60px; height: 60px; margin: 0 auto; display: block; padding-top: 20px;}

.titulo,.tituloAtencion,.tituloClientes,.tituloRedes,.tituloHacemos,.tituloTrayectoria,.tituloContacto{ font-family: 'LatinotypeArquitectaLight'; font-size: 34px; text-align: center; text-transform: uppercase; color: #fff; margin-top: 20px; opacity: 0;}
.titulo span,.tituloAtencion span,.tituloRedes span,.tituloHacemos span,.tituloTrayectoria span,.tituloContacto span{ color: #f73776;}
.tituloRedes{ color: #000;}
.titulo{ opacity: 1; font-size: 24px; height: 45px; line-height: 45px; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff;}
.tituloAtencion{  height: 45px; line-height: 45px; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff;}
.btMasInfo{ width: 200px; height: 40px; line-height: 40px; border: 2px solid #fff; text-align: center; font-family: 'LatinotypeArquitectaBold'; margin: 0 auto; margin-top: 20px; color: #fff; cursor: pointer; margin-bottom: 20px; }
.btMasInfo:hover{ background: #fff; color: #000;}
.circleDown{ font-family: 'LatinotypeArquitectaHeavy'; text-align: center; width: 30px; height: 30px; line-height: 30px; margin: 0 auto; color: #fff;}
.circleDown img{ width: 100%; height: auto;}
#menosMain,#menosClientes{ display: none;}
.oculto,.ocultoClientes{ height: 0; overflow: hidden;}

.rotado{ -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg);}

.abreInfo,.cierraInfo{ text-align: center; width: 30px; height: 30px; line-height: 30px; margin: 0 auto; color: #fff; cursor: pointer;}
.abreInfo img,.cierraInfo img{ width: 100%; height: auto;}
.cierraInfo{ display: none;}


/* CLIENTES ----------- */

.clientes{ background: #111; padding: 50px 0;}
.imgClientes{ width: 600px; margin: 0 auto; padding-top: 40px; margin-top: 130px; opacity: 0;}
.imgClientes img{ width: 100%; height: auto;}

.colDoble{ width: 600px; margin: 0 auto; padding-top: 40px;}
.clientes p{ color: #fff; font-family: 'HelveticaNeueLTStdRoman'; font-size: 11.5px; text-align: center; line-height: 16px;}
.clientes p span{ color: #f73776;}
.colDoble .ico{ background: #e1e1e1; }
.clientes .divisor{ font-family: 'HelveticaNeueLTStdBd'; font-size: 17px }
.colDoble .subtitulo{  font-family: 'LatinotypeArquitectaLight'; font-size: 14px;}
.contCollage{ width: 100%; height: 200px; overflow: hidden;}
.contCollage img{ width: 100%; height: auto;}

/* TRAYECTORIA ----------- */

.trayectoria{ background: #000; padding-top: 50px;}
.trayectoria .colDoble{ margin-bottom: 40px;}
.trayectoria p{ color: #fff; font-family: 'HelveticaNeueLTStdRoman'; font-size: 11.5px; text-align: center; line-height: 16px;}
.trayectoria p span{ color: #f73776;}
.imgFrase{ padding: 150px 0; background: url(images/bkTrayectoria.jpg) no-repeat center center; background-size: cover; position: relative;}
.fraseTrayectoria{ width: 620px; margin: 0 auto; }
.fraseTrayectoria p{ line-height: 40px; font-size: 34px; margin: 10px 0; padding: 0 20px; text-align: center; background: #fff; display: inline-block; text-transform: uppercase;font-style: italic; color: #000; font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;}
.fraseTrayectoria p:nth-of-type(2){ margin-left: 20px;}
.tapaBorde{ position: absolute; width: 100%; height: 200px; top: 0; width: 100%; background: url(images/tapaTrayec.png) no-repeat center top; background-size: cover; }
.tapaBorde img{ width: 100%; height: auto;}


/* REDES ----------- */

.redes{ background: #fff; padding: 50px 0;}

.colRedes{ width: 1000px; margin:0 auto; margin-top: 40px;}
.cols{ width: 320px; margin-right: 20px; float: left; }
.cols:nth-of-type(3){ margin-right: 0;}
.cols a{color: #1b95e0; text-decoration: none; outline: 0; font-size: 12px;}
.red:nth-of-type(2){margin-right: 0;}
.tituloInstagram{ font: 14px/1.4 Helvetica, Roboto, 'Segoe UI', Calibri, sans-serif; font-size: 22px; font-weight: 300;color: #292F33; height: 44px; line-height: 44px; margin-bottom: 5px; border-bottom: 1px solid rgba(145, 165, 180, 0.6);}
.instaFoto{ width: 106px; height: 106px; float: left; }
.instaFoto img{ width: 106px; height: 106px;}
.timeline-Footer{ display: none !important;}

/* CONTACTO ----------- */

.contacto{ padding: 50px 0; }
.contContacto{ width: 600px; margin: 0 auto; margin-top: 30px;}
.contContacto a:hover{ color: #f73776;}
.contacto p{ text-align: center; font-size: 14px;font-family: 'LatinotypeArquitectaLight'; color: #fff; }
.contacto p span{ color: #f73776; font-size: 18px; font-family: 'LatinotypeArquitectaBold';}
.contacto p a:hover{ text-decoration: underline; }

.contContacto form { margin-bottom: 30px; }
.contContacto form input, .contContacto form textarea{ width: 100%; height: 30px; line-height: 30px; border: 1px solid #fff; color: #fff; font-family: 'LatinotypeArquitectaLight'; font-size: 14px; text-align: center; background: #000; resize: none; padding: 0; margin-bottom: 10px;}
.contContacto form textarea { height: 60px; }

.contContacto form .botEnviar{ height: 30px; background: #fff; color: #000; font-family: 'LatinotypeArquitectaBold'; font-size: 18px; text-align: center; padding: 0 1px; cursor: pointer; }

.contContacto ul{ margin: 0; padding: 0; width: 90px; margin:0 auto; line-height: 30px; height: 30px; margin-top: 30px; margin-bottom: 30px;}
.contContacto ul li{ list-style-type: none; float: left; height: 30px; width: 30px; line-height: 30px; font-family: 'LatinotypeArquitectaMedium'; font-size: 14px; text-align: center; color: #ffffff; text-transform: uppercase;}
.contContacto ul li a:hover{ color: #999}

/* FOOTER ----------- */

.footer{ width: 100%; padding: 40px 0; background: #000000;}
.contFooter{ padding: 30px; height: 80px; width: 520px; margin: 0 auto;}
.logoFooter{ width: 107px; height: 80px; float: left;}
.logoFooter img{ width: 100%; height: auto;}
.claimFooter{ width: 383px; height: 80px; float: left; color: #fff; font-family: 'HelveticaNeueLTStdRoman'; font-size: 10px; line-height: 39px; margin-top: 12px; margin-left: 30px;}

.claimFooter a:hover{ text-decoration: underline;}

/* GRACIAS ----------- */

.gracias{ width: 300px; height: 120px; position: absolute; top: 50%; margin-top: -60px; left: 50%; margin-left: -150px; }
.tituloGracias{  font-family: 'LatinotypeArquitectaBold'; font-size: 24px; text-align: center; color: #f73776;; margin-bottom: 30px;}
.mensajeGracias{  font-family: 'LatinotypeArquitectaLight'; font-size: 18px; text-align: center; color: #fff;}

/* SMALL screens ----------- */

@media only screen and (min-width : 1340px) {
    .contenedor{ width: 1300px;}
    .contNav{ margin-left: -650px;}
    .col{ width: 410px; margin-right: 35px; float: left; margin-top: 130px; opacity: 0;}
    .colDoble{ width: 840px;}
    .menuDesplegado ul{ margin-top: 170px;}
}

@media only screen and (max-width : 1020px) {
    .contenedor{ width: 740px;}
    .contNav{ margin-left: -370px;}
    .fraseInicial{margin-left: -280px; width: 500px; font-size: 50px; line-height: 50px;}
    video{ width: auto; height: 100%; }
    .col{ width: 234px; margin-right: 19px;}
    .titulo{ font-size: 16px;}
    .colRedes{ width: 320px;}
    .entraFrase{margin-top: -75px;}
}

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

    .contenedor{ width: 300px;}
    .contNav{margin-left:-150px}
    .botRedes{ width: 30px;}
    .botRedes ul li{ display: none;}
    .botRedes ul li:nth-of-type(1){ display: block;}
    .logo{ top: 12px;}
    .fraseInicial{ margin-left: -140px; width: 300px; font-size: 30px; line-height: 30px;}
    .fraseTrayectoria{ width: 300px;}
    .fraseTrayectoria p{ font-size: 14px;}
    .col{ width: 300px; margin-right: 0;}
    .imgClientes{ width: 300px;}
    .colDoble{ width: 300px;}
    .titulo,.tituloAtencion,.tituloClientes,.tituloRedes,.tituloHacemos,.tituloTrayectoria,.tituloContacto{font-size: 20px; }
    .redes .contenedor{ width: 320px;}
    .contFooter{ width: 300px; margin: 30px 0; padding: 0;}
    .logoFooter{ float: none; margin: 0 auto;}
    .claimFooter{ text-align: center; width: 300px; margin-left: 0;}
    .menuDesplegado ul li{ font-size:24px}
    .holdRedes ul li{font-size: 14px;}
    .contContacto{ width: 300px; }
}
@media only screen and (max-width : 320px) {}

/*  ANIMACIONES */
.entraElementos,.entraMenu{ opacity: 1;}
.entraCols{ margin-top: 0; opacity: 1;}
.main{ -webkit-transition: height 0.1s linear; transition: height 2s ease-in;}
.entraFrase,.entraMenu,.menuDesplegado{
  -webkit-transition: all 0.8s ease-out;
  -moz-transition: all 0.8s ease-out;
  -ms-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
}
.entraElementos,.entraCols{
  -webkit-transition: all 1.2s ease-out;
  -moz-transition: all 1.2s ease-out;
  -ms-transition: all 1.2s ease-out;
  -o-transition: all 1.2s ease-out;
  transition: all 1.2s ease-out;
}

.ocultoClientes,.oculto{
  -webkit-transition: height 1.2s ease-out;
  -moz-transition: height 1.2s ease-out;
  -ms-transition: height 1.2s ease-out;
  -o-transition: height 1.2s ease-out;
  transition: height 1.2s ease-out;
}



/* ----- FONTS ---------------------------------------------------------------------------------------------------------------------------------------*/

@font-face {
    font-family: 'LatinotypeArquitectaBook';
    src: url('fonts/LatinotypeArquitectaBook.eot');
    src: url('fonts/LatinotypeArquitectaBook.eot') format('embedded-opentype'),
         url('fonts/LatinotypeArquitectaBook.woff2') format('woff2'),
         url('fonts/LatinotypeArquitectaBook.woff') format('woff'),
         url('fonts/LatinotypeArquitectaBook.ttf') format('truetype'),
         url('fonts/LatinotypeArquitectaBook.svg#LatinotypeArquitectaBook') format('svg');
}

@font-face {
    font-family: 'LatinotypeArquitectaMedium';
    src: url('fonts/LatinotypeArquitectaMedium.eot');
    src: url('fonts/LatinotypeArquitectaMedium.eot') format('embedded-opentype'),
         url('fonts/LatinotypeArquitectaMedium.woff2') format('woff2'),
         url('fonts/LatinotypeArquitectaMedium.woff') format('woff'),
         url('fonts/LatinotypeArquitectaMedium.ttf') format('truetype'),
         url('fonts/LatinotypeArquitectaMedium.svg#LatinotypeArquitectaMedium') format('svg');
}


@font-face {
    font-family: 'LatinotypeArquitectaHeavy';
    src: url('fonts/LatinotypeArquitectaHeavy.eot');
    src: url('fonts/LatinotypeArquitectaHeavy.eot') format('embedded-opentype'),
         url('fonts/LatinotypeArquitectaHeavy.woff2') format('woff2'),
         url('fonts/LatinotypeArquitectaHeavy.woff') format('woff'),
         url('fonts/LatinotypeArquitectaHeavy.ttf') format('truetype'),
         url('fonts/LatinotypeArquitectaHeavy.svg#LatinotypeArquitectaHeavy') format('svg');
}
@font-face {
    font-family: 'LatinotypeArquitectaBold';
    src: url('fonts/LatinotypeArquitectaBold.eot');
    src: url('fonts/LatinotypeArquitectaBold.eot') format('embedded-opentype'),
         url('fonts/LatinotypeArquitectaBold.woff2') format('woff2'),
         url('fonts/LatinotypeArquitectaBold.woff') format('woff'),
         url('fonts/LatinotypeArquitectaBold.ttf') format('truetype'),
         url('fonts/LatinotypeArquitectaBold.svg#LatinotypeArquitectaBold') format('svg');
}
@font-face {
    font-family: 'LatinotypeArquitectaBlack';
    src: url('fonts/LatinotypeArquitectaBlack.eot');
    src: url('fonts/LatinotypeArquitectaBlack.eot') format('embedded-opentype'),
         url('fonts/LatinotypeArquitectaBlack.woff2') format('woff2'),
         url('fonts/LatinotypeArquitectaBlack.woff') format('woff'),
         url('fonts/LatinotypeArquitectaBlack.ttf') format('truetype'),
         url('fonts/LatinotypeArquitectaBlack.svg#LatinotypeArquitectaBlack') format('svg');
}

@font-face {
    font-family: 'HelveticaNeueLTStdBdCn';
    src: url('fonts/HelveticaNeueLTStdBdCn.eot');
    src: url('fonts/HelveticaNeueLTStdBdCn.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdBdCn.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdBdCn.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdBdCn.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdBdCn.svg#HelveticaNeueLTStdBdCn') format('svg');
}


@font-face {
    font-family: 'HelveticaNeueLTStdMd';
    src: url('fonts/HelveticaNeueLTStdMd.eot');
    src: url('fonts/HelveticaNeueLTStdMd.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdMd.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdMd.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdMd.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdMd.svg#HelveticaNeueLTStdMd') format('svg');
}
@font-face {
    font-family: 'HelveticaNeueLTStdRoman';
    src: url('fonts/HelveticaNeueLTStdRoman.eot');
    src: url('fonts/HelveticaNeueLTStdRoman.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdRoman.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdRoman.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdRoman.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdRoman.svg#HelveticaNeueLTStdRoman') format('svg');
}

@font-face {
    font-family: 'LatinotypeArquitectaLight';
    src: url('fonts/LatinotypeArquitectaLight.eot');
    src: url('fonts/LatinotypeArquitectaLight.eot') format('embedded-opentype'),
         url('fonts/LatinotypeArquitectaLight.woff2') format('woff2'),
         url('fonts/LatinotypeArquitectaLight.woff') format('woff'),
         url('fonts/LatinotypeArquitectaLight.ttf') format('truetype'),
         url('fonts/LatinotypeArquitectaLight.svg#LatinotypeArquitectaLight') format('svg');
}


@font-face {
    font-family: 'HelveticaNeueLTStdBd';
    src: url('fonts/HelveticaNeueLTStdBd.eot');
    src: url('fonts/HelveticaNeueLTStdBd.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdBd.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdBd.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdBd.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdBd.svg#HelveticaNeueLTStdBd') format('svg');
}