*{margin:0;padding:0;outline:0;border:none;box-sizing:border-box;}
::selection{background:#6d675d;color:#fff;text-shadow:none;}
::-moz-selection{background:#6d675d;color:#fff;text-shadow:none;}
::-webkit-selection{background:#6d675d;color:#fff;text-shadow:none;}
body{font:15px/20px 'Gotham','Open Sans',Verdana,Arial,sans-serif;text-align:center;color:#000;background:#fcfcfc;margin:0 auto;}
a{text-decoration:none;color:#4d4943;transition:color 400ms ease-out;-moz-transition:color 400ms ease-out;-webkit-transition:color 400ms ease-out;}
a:hover{color:#bcb2a0;}
.clear{clear:both;}

.animated{visibility:hidden;}
.visible{visibility:visible;}

#wrap{margin:0 auto;position:relative;}

#header{padding:25px 5%;position:fixed;left:0;top:0;width:100%;z-index:9999;transition:all 250ms ease-out;-moz-transition:all 250ms ease-out;-webkit-transition:all 250ms ease-out;}
#header.fixed{padding:12px 5%;background:/*#fcfcfc rgba(255,255,255,.5)*/;}
#header h1{float:left;width:25%;min-width:150px;max-width:200px;transition:all 250ms ease-out;-moz-transition:all 250ms ease-out;-webkit-transition:all 250ms ease-out;}
#header h1 img{display:block;width:100%;height:auto;}
#header.fixed h1{float:left;max-width:165px;}

#menu_button{float:right;position:relative;z-index:999;width:35px;height:35px;cursor:pointer;margin:7px 0 0;overflow:hidden;}
#menu_button span{position:absolute;display:block;left:0;width:100%;height:2px;background:#4d4943;transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-webkit-transition:all 100ms ease-out;}
#menu_button:hover span{background:#bcb2a0;}
#menu_button span.top{top:0;}
#menu_button span.middle{top:13px;}
#menu_button span.bottom{top:26px;}
#menu_button:hover span.top{top:2px;}
#menu_button:hover span.bottom{top:24px;}
#menu_button.active span{background:#fff;}
#menu_button.active span.top{box-shadow:none;transform:rotate(45deg);width:110%;top:50%;margin-top:-2.5px;}
#menu_button.active span.middle{box-shadow:none;left:200%;opacity:0;}
#menu_button.active span.bottom{box-shadow:none;transform:rotate(135deg);width:110%;top:50%;margin-top:-2.5px;}
#menu{position:fixed;z-index:998;text-align:left;width:100%;padding:150px 5% 75px;height:100vh;right:-150%;top:0;background:#4d4943;color:#fff;overflow:auto;transition:all 500ms;-moz-transition:all 500ms;-webkit-transition:all 500ms;}
#menu.active{right:0;box-shadow:-5px 0 5px rgba(0,0,0,.2);}
#menu .datos{font-size:125%;float:left;margin:15px 0 0;}
#menu .datos a{color:#fff;}
#menu li{list-style:none;transition:all 500ms;-moz-transition:all 500ms;-webkit-transition:all 500ms;}
#menu li a{position:relative;display:block;padding:5px 0;text-align:right;font:350%/120% 'Gotham';border-radius:3px;width:auto;color:#fcfcfc;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition:all 300ms ease-out;-moz-transition:all 300ms ease-out;-webkit-transition:all 300ms ease-out;}
#menu .menu:hover li a{color:#666;}
#menu .menu li a:hover{color:#fcfcfc;}

#inicio{position:relative;height:100vh;overflow:hidden;}
#inicio .scroll{position:absolute;left:50%;bottom:25px;width:30px;margin:0 0 0 -15px;cursor:pointer;}
#inicio .scroll-container{display:block;border-radius:15px;width:100%;height:50px;border:2px solid #666;}
#inicio .scroll-ball{display:block;border-radius:100%;position:absolute;left:7px;top:7px;width:16px;height:16px;background:#666;
-webkit-animation: scroll 1200ms infinite ease-in;
-moz-animation: scroll 1200ms infinite ease-in;
-o-animation: scroll 1200ms infinite ease-in;
animation: scroll 1200ms infinite ease-in;}

@keyframes scroll{ 0%{top:7px;} 100%{ top:28px; }  }
@-webkit-keyframes scroll{ 0%{top:7px;} 100%{ top:28px; }  }
@-moz-keyframes scroll{ 0%{top:7px;} 100%{ top:28px; }  }
@-o-keyframes scroll{ 0%{top:7px;} 100%{ top:28px; }  }


.back{position:absolute;left:auto;top:0;width:100%;height:100%;padding:0 10px;display:flex;align-items:center;justify-content:center;background:url(../img/intro.jpg) no-repeat right center;background-size:cover;}
.front{position:absolute;left:auto;top:0;width:100%;height:100%;padding:0 10px;display:flex;align-items:center;justify-content:center;background:#fcfcfc;
-webkit-animation: latido 2500ms infinite ease-in;
-moz-animation: latido 2500ms infinite ease-in;
-o-animation: latido 2500ms infinite ease-in;
animation: latido 2500ms infinite ease-in;}

.bajada_container{overflow:hidden;}
.bajada{font:bold 500%/110% 'Gotham';margin:0 auto;letter-spacing:-1px;text-align:center;color:rgba(77,63,67, 1);cursor:default;
}

@keyframes latido{ 0%{background:rgba(252,252,252,1);} 50%{ background:rgba(252,252,252,.8); } 100%{ background:rgba(252,252,252,1); } }
@-webkit-keyframes latido{ 0%{background:rgba(252,252,252,1);} 50%{ background:rgba(252,252,252,.8); } 100%{ background:rgba(252,252,252,1); } }
@-moz-keyframes latido{ 0%{background:rgba(252,252,252,1);} 50%{ background:rgba(252,252,252,.8); } 100%{ background:rgba(252,252,252,1); } }
@-o-keyframes latido{ 0%{background:rgba(252,252,252,1);} 50%{ background:rgba(252,252,252,.8); } 100%{ background:rgba(252,252,252,1); } }

.bajada.white{color:#fff;text-shadow:0 0 10px rgba(0,0,0,.5);-webkit-animation:none;-moz-animation:none;-o-animation:none;animation:none;}

.titulo_container{overflow:hidden;margin:0 auto 50px;}
.titulo{font:bold 350%/110% 'Gotham';letter-spacing:-1px;text-align:center;color:rgba(77,63,67, 1);}
.titulo.left{text-align:left;}

.nosotros{position:relative;}
.explicacion{float:left;width:50%;padding:5%;}
.explicacion p{font:300 175%/150% 'Gotham';letter-spacing:-1px;text-align:left;color:rgba(77,63,67,1);}
.iphone{float:left;width:50%;position:relative;overflow:hidden;}
.iphone img{display:block;width:100%;height:auto;max-width:350px;margin:0 auto;}

.servicios{float:left;width:50%;padding:0 5%;}
.servicio{margin:15px auto;padding:0 0 0 65px;position:relative;}
.servicio .icon{position:absolute;left:0;top:10px;width:50px;}
.servicio h3{font:110%/120% 'Gotham';margin:0 0 5px;text-transform:uppercase;color:#4D4A44;}
.servicio p{font:300 100%/135% 'Gotham';}
.macbook{float:right;width:50%;position:relative;overflow:hidden;}
.macbook img{display:block;position:relative;right:0;bottom:0;}

.seccion{padding:50px 0;text-align:left;overflow:hidden;}

#clientes{}
#clientes ul{width:80%;margin:0 auto;}
#clientes li{float:left;width:33.3%;list-style:none;padding:30px 0;}
#clientes li img{display:block;width:100%;margin:0 auto;max-width:120px;height:auto;transition:all 300ms ease-out;-moz-transition:all 300ms ease-out;-webkit-transition:all 300ms ease-out;}
#clientes li:hover img{transform:scale(.95);opacity:.7;}

#contacto{padding:50px 5%;}
#contacto span{display:block;background:#4d4943;width:1px;height:120px;margin:5px auto;}
#contacto form{width:100%;max-width:600px;margin:0 auto;}
#contacto .bloque{margin:10px 0;padding:10px 0;border-bottom:1px dotted #4d4943;}
#contacto input,
#contacto textarea{float:left;width:75%;background:transparent;font:300 125%/150% 'Gotham';}
#contacto textarea{height:140px;resize:none;}
#contacto button{position:relative;color:#fff;display:block;background:#4d4943;width:100%;border:none;text-transform:uppercase;padding:20px 0;font:110%/100% 'Gotham';text-align:center;margin:15px auto 0;cursor:pointer;transition:all 300ms ease-out;-moz-transition:all 300ms ease-out;-webkit-transition:all 300ms ease-out;}
#contacto button:hover{background:#bcb2a0;}
#contacto button:active{top:2px;}
#contacto .msj{display:none;width:100%;color:#4d4943;border:none;text-transform:uppercase;padding:20px 0;font:110%/125% 'Gotham';text-align:center;margin:15px auto 0;}

#whatsapp{position:fixed;width:60px;height:auto;right:15px;bottom:10px;}
#whatsapp img{display:block;width:100%;height:auto;}

#footer{padding:0 5% 25px;text-align:center;font:300 100%/110% 'Gotham',Arial,Helvetica,sans-serif;color:#4d4943;}
#footer a.ts{font-size:90%;margin:5px auto 10px;text-decoration:underline;display:inline-block;}