@import url('resets.css');

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');

/* El diseño a los PLACEHOLDER (El texto gris que sale en los campos del formulario) */
::-webkit-input-placeholder {opacity:1;}
::-moz-placeholder {opacity:1;}
::-moz-placeholder {opacity:1;}
:-ms-input-placeholder {opacity: 1;}

body {font-family: 'Open Sans', sans-serif;font-size:18px;line-height:22px;color:#454545;font-weight:400;background:#f0f0f0;}

/* Para explorer 8 ó menor */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/* Tendrán una breve animación al interactuar */
a, input[type=button] {-webkit-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;transition:all 0.4s ease-out;}

/* estilos basicos */
ul, p {margin-bottom:15px;}
a {color:#0098da;}
a:hover {color:#8dd8f8;}
b, strong{font-weight:700;}
u {text-decoration:underline;}
h1, #H2Sign {text-shadow:0 0 5px #000;}
h1, #H2Sign, .h1 {font-size:48px;line-height:54px;color:#FFF;text-transform:uppercase;margin:15px 0 20px;}
h2, h3, h4, h5, h6 {font-size:26px;line-height:30px;color:#0098da;margin:10px 0;}
h2 {color:#454545;}
h3 {font-size:22px;line-height:26px;}
.center {text-align:center;}
.btn, #btningresar {display:inline-block;padding:12px 20px;color:#FFF;font-weight:700;background:#0098da;text-decoration:none;margin:20px 0;cursor:pointer;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
#btningresar {width:150px;}
.button1 {border:2px solid #0098da;background:none;color:#0098da;}
.button1:hover {border:2px solid #8dd8f8;background:none;color:#8dd8f8;}
.btn:hover {color:#FFF;background:#8dd8f8;}
.up {position:fixed;bottom:1%;right:1%;background:#8e8e8e;padding:8px 10px;}

/* generales del sitio */
.clear {max-width:1020px;padding:0 2%;width:96%;position:relative;display:block;overflow:hidden;clear:both;margin:auto;}
section {padding:60px 0;position:relative;}
.minibox {max-width:820px;margin:auto;}

#header {width:100%;z-index:999999;border-bottom:1px solid #e1e1e1;}

.columnas .columna {width:46%;margin:0 1%;display:inline-block;vertical-align:top;text-align:left;}
.doscolumnas .columna img {width:100%;heigt:auto;}
.trescolumnas .columna {width:29%;margin:0 1%;text-align:center;}
.cuatrocolumnas .columna {width:18%;padding:0 2%;margin:0 1%;text-align:center;}
.trescolumnas .columna img {width:auto;}
.cuatrocolumnas .columna img {width:100%;}

/* header */
header {padding:10px 0;overflow:hidden;background:#FFF;}
header * {display:inline-block;vertical-align:middle;margin:0;color:#454545;text-decoration:none;}
header .logo {float:left;}
header .menu {float:right;}
header .menu li a {padding:0 10px;}
header .menu li a:hover {color:#0098da;}
header .menu li.icon a {padding:0 0 0 3px;}
header .menu a.btn {margin:0;}
header .menu li.icon a {color:#8dd8f8;}
header .menu li.icon a:hover, header .logo:hover {opacity:0.4;}
header i {font-size:26px;}


/*slider */
.slider {background:url(../images/bg-slide.jpg) no-repeat top center;}
.slider {overflow:hidden;}
.slider video {position:absolute;top:0;left:0;height:480px;/*width:100%;/*height:auto;*/}
.slider .swiper-container {background:url(../images/apple.png) no-repeat top center;padding-top:21px;display:block;width:591px;height:358px;margin:auto;position:relative;}
.slider .mascara {background:url(../images/slider-mascara.png) no-repeat right top;}
.slider .swiper-pagination {bottom:0 !important;}
.slider .swiper-pagination-bullet {padding:3px;}
.slider .mascara img {margin:-5px 0;}
.slider .descript {position:absolute;top:30%;right:2%;width:48%;}

.bgoscur {background:#8e8e8e;}

/* nosotros */
.nosotros {background:#bdbdbd;}
.nosotros .tooltip {background:#454545;font-style:italic;padding:2%;margin:20px 0;position:relative;}
.nosotros .tooltip .tipy {width:16px;height:26px;background:url(../images/tooltip.png) no-repeat center center;position:absolute;right:100px;top:-25px;}
.nosotros .tooltip h2 {color:#FFF;}

/* tecnologia */
.tecnologia {background:#FFF;}
.tecnologia * {color:#454545;}
.tecnologia li {background:url(../images/li.png) no-repeat 0 13px;padding:5px 5px 5px 15px;display:inline-block;margin:5px 0;}
.tecnologia .columna {vertical-align:middle;}

/* footer */
.contacto iframe {width:40%;margin:0;display:inline-block;margin:0 2% 30px 0;vertical-align:top;border:3px solid #e1e1e1 !important;}
.contacto ul {display:inline-block;width:55%;vertical-align:top;}
.contacto ul li {line-height:26px;display:inline-block;clear:both;}
.contacto ul li.map {width:40%;}
.contacto ul li * {display:inline-block;vertical-align:middle;}
.contacto ul li img {margin:0 5px 0 0;}
.contacto ul li.tel {background:#dfdfdf;padding:5px;}

/* form */
form {background:#FFF;padding:6%;margin:0 0 10px;width:88%;overflow:hidden;-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}
form label {display:block;margin:20px 0 5px;}
form input, form textarea {background:#eaeaea;padding:2%;border:0;display:inline-block;width:96%;font-family: 'open_sanslight',arial,helvetica,sans-serif;font-size:16px;line-height:20px;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
form textarea {width:96%;max-width:96%;min-width:96%;}
form .btn {width:180px;float:right;}
form sup {color:red;}

input.error, textarea.error {width:96%;background:#ffcad5;}
label.error {color:#fe0000;display:block;}

.blogin {background:#0a3352;}
.blogin .login {max-width:400px;width:96%;padding:2%;margin:auto;color:#FFF;min-height:650px;}
.blogin .slider video{    /*width: 100vw; /* Could also use width: 100%; */
   /* height: 100vh;*/ height: 440px;
  /*  object-fit: cover; */
    position: fixed; /* Change position to absolute if you don't want it to take up the whole page */
    left: 0px;
    top: 0px;
    z-index: -1;*/}
.blogin .login span {display:block;margin:10px 0;}
.blogin .login input {width:96%;padding:2%;border:0;display:block;margin:10px 0 5px;}
.blogin .login .fpassword {color:#FFF;display:block;margin:20px 0 0 0;}

/*footer */
footer {background:#272727;text-align:center;padding:20px 0;}
footer * {color:#FFF;text-decoration:none;}
footer ul {border-bottom:2px solid #cecece;padding:20px 0;}
footer li {display:inline-block;margin:0 10px;}
footer .datos strong, footer .datos a {color:#0098da;}
footer .firma {font-size:10px;color:#8e8e8e;}
footer .firma img {max-width:50px;height:auto;}

/*Google Play*/
.gplay .icon {max-width:90px;display:block;margin:20px auto;}
.gplay {border:1px solid #e1e1e1;background:#FFF;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;text-align:center !important;}
.gplay .btn {background:#000;}
.gplay .btn:hover {background:#f0820b;}

section.appdos {padding-bottom:0;}

.slogan {background:#0098da;text-align:center;}
.slogan h2 {font-size:38px;line-height:42px;color:#FFF;}

/* responsive */
@media screen and (max-width:1000px){ 

h1 {font-size:46px;line-height:52px;}
.slider .descript {width:55%;}
form input, form textarea {width:94%;max-width:94%;min-width:94%;padding:2%;}
form .btn {width:100%;float:none;max-width:100%;}

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

body {font-size:16px;line-height:20px;}
.clear {width:90%;padding:0 5%}

header {text-align:center;}
header .logo {float:none;display:inline-block;}
header ul {float:none;width:100%;}
header li {width:94%;text-align:center;border-bottom:1px solid #cecece;padding:10px;}
header li.icon {display:inline-block;width:auto;border:none;padding:10px 0;}


.columnas .columna, .marcas li {width:100%;margin:1% 0;text-align:center;}
.slider {text-align:center;}
.slider .swiper-container {transform: scale(0.7);}
.slider .swiper-container img {width:76%;}
.slider img{width:100%;}
.slider .mascara {background:none;}
.slider .descript {width:100%;text-align:center;bottom:0;top:auto;}

h1 {font-size:26px;line-height:32px;}

.nosotros .tooltip {padding:5%;width:90%;}
.nosotros .tooltip h2 {font-size:22px;line-height:28px;}

section img {width:100%;}

.contacto iframe, .contacto ul {display:block;width:100%;margin:0 0 15px;}

}

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

	.slider .swiper-container {background:#000000;width:100% !important;height:auto !important;transform: scale(1);padding:5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
	.slider .swiper-container img {width:96%;margin:5px 0;}
	.slider .swiper-pagination {bottom:15px !important;}
	
	.preheight {min-height:350px;}
	
	

}