/*   GENERALES    */
.container{}

/*   HEADER    */
header{position: fixed;top: 0;left: 0;right: 0;background:rgba(248,248,248,0.9);z-index: 999999;padding: 10px 0;-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;height: 60px;}
header .logo{float: left;}
header .logo svg{display: block;width: 90px;height:60px;height: auto;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.menu{float: right;padding-top: 17px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.menu li{float: left;padding-left: 30px;}
.menu li a{color:#0e4b6d;font-size: 22px;line-height: 1em;font-weight: normal;font-family: "Trade Gothic LT Condensed Bold";display: block;text-transform: uppercase;position: relative;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.menu li a:before {content: ""; position: absolute; width: 100%; height: 1px; bottom: -10px; left: 0; background-color: rgba(0,75,109,0.7); visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.menu li a:hover{}
.menu li a:hover:before {visibility: visible; -webkit-transform: scale(1); transform: scale(1);}
.menu li.active a{color:#8acde3;}
.menu li.active a:before{background-color: rgba(137,204,226,0.7);}
header #performance path, header #performance polygon{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
header.smaller{height: 34px;}
header.smaller .logo svg{width:50px;height:34px; }
header.smaller .menu{padding-top: 6px;}
header.smaller .menu li a{font-size: 20px;}
header.smaller .menu li a:before{bottom: -6px;}
header.smaller #performance path, header.smaller #performance polygon{fill:rgba(137,204,226,0);}

#menu-dos{display: none;}

#hamburguesa{position: absolute;width: 26px;height: 26px;right: 20px;top:26px;cursor: pointer;display: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
header.smaller #hamburguesa{top:14px;}
#hamburguesa span{background:#0e4b6d;height: 2.5px;width: 100%;border-radius: 2px;display: block;position: absolute;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
#hamburguesa span:nth-child(1){top:3px;}
#hamburguesa span:nth-child(2){top:11px;}
#hamburguesa span:nth-child(3){top:19px;}
#hamburguesa.close span:nth-child(1){top:11px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);}
#hamburguesa.close span:nth-child(2){top:11px;opacity: 0;}
#hamburguesa.close span:nth-child(3){top:11px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);}

/*   ANIMACION DEL HEADER    */
@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9;top:-100%;top:1/9; /* IE9 only */ } to { opacity:1;top:0; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9;top:-100%;top:1/9; /* IE9 only */ } to { opacity:1;top:0; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9;top:-100%;top:1/9; /* IE9 only */ } to { opacity:1; top:0;} }

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn 1;
    -moz-animation:fadeIn 1;
    animation:fadeIn 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;

}

/*   SLIDER    */
section.principal{height: 100vh;position: relative;}
.cont-slider{position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: -1;background: #192836;}
.slide{}
.bg-image{height: 100vh;background-position:center center;background-repeat: no-repeat;background-size: cover; }
.image01{background-image:url(../images/slider-01.jpg);}
.image02{background-image:url(../images/slider-02.jpg);}
.image03{background-image:url(../images/slider-03.jpg);}
.tabla{display: table;height: 100vh;width: 100%;}
.tabla .celda{display: table-cell;vertical-align: bottom;padding-bottom:100px;}
.tabla .texto{color:#FFF;}
.tabla .texto h2{font-size: 50px;line-height: 1em;font-weight: normal;font-family: "Trade Gothic LT Condensed Bold";}
.tabla .texto h3{font-size: 36px;line-height: 1.2em;font-weight: normal;font-family: "Trade Gothic LT Condensed";}

/*   SECCIONES    */
.seccion{padding: 80px 0;}
h2.title{font-size: 40px;line-height: 1.2em;font-weight: normal;font-family: "Trade Gothic LT Condensed Bold";color: #0e4b6d;text-transform: uppercase;margin-bottom: 0.5em;}
.seccion.celeste{background: #f5fafd;}
.seccion.celeste h2.title{color: #8acde3;}
.seccion.gris{background: #f5f5f3;}
.fuente p{font-size: 27px;line-height: 1.5em;text-align: justify;}

/*   NOSOTROS    */
#nosotros .img-responsive{margin: -30px auto 0;width: 60%;}

/*   EQUIPO    */
#equipo .img-responsive{margin: -50px auto 0;width: 90%;}

/*   MISION    */
#mision{background: url(../images/bg-mision.jpg) center top no-repeat;background-attachment: fixed;position: relative;color:#FFF;}
#mision:before{background:rgba(0,0,0,0.35);position: absolute;left: 0;top:0;right:0;bottom:0;z-index: 0;content: "";}
#mision .container{position: relative;z-index: 1;}
#mision h2{color:#FFF;}
#mision p{padding-bottom: 10px;}

/*   METODOLOGÍA DE TRABAJO    */
#metodologia{}
#metodologia h3{color:#0e4b6d;font-family: "Trade Gothic LT Condensed Bold", serif;font-size:30px;text-transform: uppercase;margin-bottom: 0.5em;text-align: center;}
#metodologia p{text-align: justify;font-size: 16px;}
#metodologia article:hover .img-expand{-webkit-transform: scale(1.09,1.09);-ms-transform: scale(1.09,1.09);transform: scale(1.09,1.09);-webkit-transition: all .5s;}
#metodologia .cont-img{padding: 1em;}
#metodologia{}
.img-metodologia{display: block;margin: 0 auto;}

/*   NUESTRAS SOLUCIONES    */
#mision{}
.box-d{position:relative;overflow: hidden;}
.box-uno .cont-img{background: url(../images/bg-estrategia.jpg) center top no-repeat;background-size: cover;}
.box-dos .cont-img{background: url(../images/bg-desarrollo.jpg) center top no-repeat;background-size: cover;}
.box-tres .cont-img{background: url(../images/bg-implementacion.jpg) center top no-repeat;background-size: cover;}
.box-d .cont-img{height: 360px;}
.box-d img{width: 100%;height: auto;display: block;}
.box-d h3{position: absolute;background: rgba(14,75,109,0.8);bottom:0;color:#FFF;font-family: "Trade Gothic LT Condensed Bold", serif;font-size:24px;line-height:1.2em;width: 100%;padding:15px 0;text-align: center;z-index: 2;font-weight: normal;}
.box-d .solapa{position: absolute;height:100%;width: 100%;bottom:-100%;left:0;background: rgba(14,75,109,0.6);z-index: 1;}
.box-d:hover .solapa{bottom:0;}
.solapa .tabla{display:table;height:100%;margin:0 auto;}
.solapa .tabla ul{display:table-cell;vertical-align:middle;font-size:16px;color:#FFF;padding: 0 30px 30px;}
.solapa .tabla ul li{padding:5px 0;font-size: 20px;}

/*   NUESTROS CLIENTES    */
#clientes p{margin-bottom: 1em;}
.clientes{text-align: center;}
.clientes li{display: inline-block;width:14.2857%;margin-right: -4px;position: relative;}
.clientes li:before{position: absolute;left: -1px;height: 100%;width: 1px;background: #d4d4d4;content: "";}
.clientes li:first-child:before{display: none;}
.clientes{margin-bottom:1.5em;}
.clientes.noauto{margin-bottom:0;}
.clientes.noauto li{width:20%;}
.clientes li img{display: block;width: 100%;height: auto;max-width: 160px;margin: 0 auto;}

/*   CONTACTO    */
#contacto{background: #f4fafc url(../images/bg-contacto.png) right bottom no-repeat;padding-bottom: 0}
#contacto h2{text-align: center;}
#contacto p{text-align: center;}
#contacto .right{text-align: right;float: right;width: calc(100% - 160px);font-size: 16px;}
#contacto .bottom{padding: 30px 0;background: rgba(235,235,235,0.44);}
.logo-footer{float: left;}
.logo-footer svg{display: block;width: 100%;height: auto;max-width:90px;}
.cont-enviar{background: #8acde3;color: #FFF;border: none;font-size: 18px;padding: 0 20px;cursor: pointer;position: relative;text-align: center;border-radius: 3px;height: 42px;line-height: 42px;cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.formulario{width: 50%;max-width:580px;margin: 2em auto 4em;}
.cont-enviar span{display: inline-block;position: relative;z-index: 2;}
.cont-enviar .fa{display: inline-block;position: relative;z-index: 2;}
.cont-enviar .bt-enviar{position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 100%;border: none;background: transparent;z-index: 1;border-radius: 3px;}
.cont-enviar:hover{background: #2b89c4;}
.cont-enviar input:hover{cursor: pointer;}
.campo{}
.campo input{padding: 0 20px;width: calc(100% - 42px);border: 1px solid #f0f4f5;border-radius: 3px;height: 42px;line-height: 42px;color: #555555;font-size: 16px;margin-bottom:18px; }
.campo textarea{padding: 13px 20px;width: calc(100% - 42px);border: 1px solid #f0f4f5;border-radius: 3px;height: 80px;line-height: 1.2em;color: #555555;font-size: 16px;margin-bottom:16px;}

/*   FOOTER    */
footer{text-align: center;color: #FFF;font-size:16px;background-color: #555;padding: 20px;}