@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

body { margin: 0; padding: 10px; font-family: 'Poppins', sans-serif; color:#7E8083; box-sizing: border-box;}

img[src="imagenes/logo.png"] { max-width: 100%; height: auto; width: 250px;}
input, select, textarea { background-color: #e5e5e5 !important;}
.bg-light { font-size: 20px; background-color: white !important;}
/*estilos secundarios*/
p { font-size: 17px;}
.container {
  max-width: 960px;
}

video { 
  width: 100% !important;
  max-width: 100% !important;}
.active { border-bottom: 1px solid black;}
.container-fluid { padding:0;}
.navbar { font-size: 17px;}
.my-3 img { max-width: 100%; width: 100%; height: auto;}
header .col-md-6 { display: flex; justify-content: flex-end; }
.fondo { background-color: #DADEE3;}
header { height:400px ; display: flex;    width: 100%; }
header .botones { width: 30%; font-size: 80%;}
#titulos { flex-direction: column; justify-content: center;  color: black; text-transform: uppercase;  align-items: flex-start; }
#titulos h1 {  font-size: 50px; padding-bottom: 20px; }
#titulos p { font-size: 30px; color: gray; }
video { width: 80%; height: auto; }
.division { display: flex;}
.contenedor-formulario { padding: 20px;}
footer .col-md-3 { border-width: 0 1px 0 0px; border-color: #ccc; border-style: dashed; }
.lead { color: #a0a0a6;}
footer h3 { border-bottom: 1px solid #ccc;}
.boton-otro { background-color: #b8d433; color: white;}
nav { font-family: 'Open Sans', sans-serif;}

footer { padding: 40px; font-size: 0.5em; background-color: #fff; color: #333;  margin-top: 20px;   }

footer.container-fluid p, footer a { color: black; text-align: left; font-size: 12px;}

#social { position: fixed; left: 95%; top: 80%; width: 280px; }
#social img { width:80px;}
.botones { background-color: #48B1DD; font-size: 18px; padding: 15px; color: black; font-weight: bold; text-transform: uppercase; color:white; margin-bottom: 10px; }
#collapseExample { position: fixed; left: 81%; top:20%; width: 350px; padding: 10px; text-align: center;}
form { padding: 10px;}
#contenedor-principal h1 { font-size: 35px;}
.margenes .col-md-6 { margin-bottom: 10px;}
.margenes { margin: 40px  0 0 ;  padding: 20px;text-align: center; }
.redondeado {  border-radius: 20px 10px;}

section.tracking { width: 100%;}
.tracking { display: flex; justify-content: center; align-items: center;}
.tracking div { display: flex; flex-direction: column; align-items: center;}
.tracking img { width: 20%; height: auto; margin-left: 15px;} 
img + span::after { font-size: 15px; text-align: center; color: black;}
.tracking div:last-of-type img + span::after { content: 'GPS'; }
.tracking div:first-of-type img +  span::after{ content: 'Telefonos Android';  }
.tracking div:nth-of-type(2) img +  span::after{ content: 'Tabletas';  }


.proceso div:last-of-type img + span::after { content: 'Beneficios & Resultados'; }
.proceso div:first-of-type img +  span::after{ content: 'Tareas & Procesos';  }
.proceso div:nth-of-type(2) img +  span::after{ content: 'Seguridad & control';  }
.proceso img { width: 50%;}
.animacion {border-radius: 20px;}

footer { padding: 10px; width: 100%; font-size: 13px; background-color: #333; color: white;}
footer p, footer a { color: white;}

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

#otra { width: 30%;}
 .soluciones .col-md-4 { margin: 0; color: black; }
 .soluciones h2 { font-size: 20px;}
 .soluciones p { font-size: 17px;}
.soluciones h2 span { font-size: 30px;}
.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

.flexible { display: flex; justify-content: center; align-items: center;}

footer p  { color: white !important;}
.product-device::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}


/*
 * Extra utilities
 */

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.flex-equal > * {
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
}
@media (max-width: 768px) {
  h1 { font-size: 80%;}
  header h1, header h2 { font-size: 80%;}
  p{ font-size: 80%;}
  .flex-md-equal > * {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }
  #titulos h1 { padding: 0; margin-top: 20px;}


header { height: auto;}
header .botones { width: 100%;}
header video { width: 100%; }

#imagen-plataforma { width: 100%;}
.overflow-hidden { overflow: hidden;}

div.row.p-5 { padding: 15px !important;}
.espacios { padding: 0 !important;}

}

@media (max-width: 1500px) {
  #collapseExample {left: -5%; top:25%; width: 300px;}
#social { left: 0;}
  .linea { display: none;}


}






