@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,400i,700,700i,900,900i');
* {padding: 0; margin: 0; vertical-align: top}
body {font-family: 'Lato'; color: #333}
a {text-decoration: none}
.align {max-width: 1200px; margin: 0 auto;}
.clear {clear: both}

header {z-index: 3}
header .topbar {background-color: #224ea8; height: 42px;}
header .topbar .datos{float: right; list-style: none}
header .topbar .datos li{display: inline-block; color: #fff; line-height: 40px; font-size: 14px }
header .topbar .datos li:nth-child(2){margin-left: 20px}
header .topbar .datos li i{line-height: 40px; margin-right: 4px}
header nav {height: 90px; box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.18);}
header nav img {float: left; height: 90px}
header nav .noresponsive {list-style: none; float: right; line-height: 90px}
header nav .noresponsive li{display: inline-block; text-transform: uppercase; color: #333 !important; padding: 0px 15px 0px 15px; box-sizing: border-box; font-weight: 600; font-size: 15px; transition: .3s}
header nav .noresponsive li:hover{color: #224ea8 !important; transition: .3s; background-color: #f6f6f6}
.responsive {display: none}
.boton-responsive {display: none}

@media screen and (max-width: 1220px) { 
  .align {width: 90%; margin: 0 auto}
}
@media screen and (max-width: 1220px) { 
  header nav a {color: #333}
  .noresponsive {display: none}
  .responsive {display:none;  position: absolute; width: 100%; left: 0px; top: 132px; z-index: 99999 }
  .responsive li {display: block; padding: 20px; background-color: #fff; border-top: 1px solid #eee }
  .responsive li:active {background-color: #3a59d9; color: #fff}
  .boton-responsive {display: block; float: right; line-height: 90px; font-size: 40px}
  .boton-responsive i {line-height: 90px;}
}
@media screen and (max-width: 406px) { 
  header nav img {float: left; height: 70px; margin-top: 10px}
  .topbar ul {display: none}
}

#loading {position: fixed; z-index: 99999999999999; width: 100%; height:100%; background-color: #f8f8f8; color: #000; }

.banner {background-color: #999; background-image: url('../img/banner.jpg'); background-size: cover; padding: 20px 0px 20px 0px }
.video {width: 740px; height: 440px; background-color: transparent; margin: 0 auto;  border:10px solid; border-color: rgba(0,0,0,0.35); }
.video video {margin-top: -22px;}

#banner-video {width: 100% !important; margin-top: -9.5%;  z-index: 1}
.bg {width:100%; overflow: hidden; background-color: #224ea8; z-index: 2; }

@media screen and (max-width: 1220px) { 
  .bg {width: 100%; height: auto}
}

#banner {background-image: url('../img/banner.jpg'); background-size: cover; text-align: center; padding: 80px 0px 80px 0px}
#banner h1 {color: #fff; font-weight: 900; font-size: 32px; text-transform: uppercase;}

.slogan-index {background-color: #224ea8; padding: 40px 0px 40px 0px; color: #fff; background-image: url('../img/slogan.jpg'); background-size: cover;  }
.slogan-index b {font-size: 50px; vertical-align: bottom; line-height: 48px}
.slogan-index i {font-size: 50px; vertical-align: bottom; margin-right: 5px; margin-bottom: 0px}
.slogan-index h2 {font-size: 25px; text-transform: uppercase; font-weight: 900; float: left;}
.slogan-index .boton {float: right; background-color: #fff; padding: 10px 20px 10px 20px; color: #333; text-transform: uppercase; font-weight: 800; margin-top: 5px}
.slogan-index .boton:hover {background-color: rgba(0,0,0,0.3); color: #fff}

.slogan {background-color: #2b62d5; padding: 30px 0px 30px 0px; color: #fff;   }
.slogan b {font-size: 35px; vertical-align: bottom; line-height: 35px}
.slogan i {font-size: 35px; vertical-align: bottom; margin-right: 5px; margin-bottom: 5px}
.slogan h2 {font-size: 20px; text-transform: uppercase; font-weight: 900; float: left; m}
.slogan .boton {float: right; background-color: #fff; padding: 10px 20px 10px 20px; color: #333; text-transform: uppercase; font-weight: 800; margin-top: 5px; font-size: 15px}
.slogan .boton:hover {background-color: rgba(0,0,0,0.3); color: #fff}

@media screen and (max-width: 1220px) { 
  .slogan-index .align {max-width: 90%; margin: 0 auto}
  .slogan .align {max-width: 90%; margin: 0 auto}
}
@media screen and (max-width: 900px) { 
  .slogan-index .align {text-align: center;}
  .slogan-index .align h2 {float: none}
  .slogan-index .align .boton {float: none; display: inline-block; margin-top: 10px; }
  .slogan .align {text-align: center;}
  .slogan .align h2 {float: none}
  .slogan .align .boton {float: none; display: inline-block; margin-top: 10px; }
}
@media screen and (max-width: 687px) {
  .slogan-index .align h2 {font-size: 18px}
} 

.servicios {padding: 80px 0px 80px 0px; text-align: center;}
.servicios h2 {text-transform: uppercase; text-align: center; font-size: 27px; font-weight: 800}
.servicios .bar {height: 1px; background-color: #333; width: 40px; margin: 0 auto; margin-top:  20px; margin-bottom: 20px}
.servicios .servicios-ul {text-align: center; margin-top: -10px}
.servicios .servicios-ul li {width: 32%; display: inline-block; margin-top: 60px}
.servicios .servicios-ul li i {float: left; width: 20%; font-size: 45px; color: #224ea8}
.servicios .servicios-ul li article {float: right; width: 80%; text-align: left;}
.servicios .servicios-ul li article h3{text-transform: uppercase; font-size: 17px; font-weight: 800}
.servicios .servicios-ul li article p{}
.servicios .boton {background-color: #224ea8; padding: 10px 20px 10px 20px; color: #fff; text-transform: uppercase; font-weight: 800; margin-top: 50px; display: inline-block;}
.servicios .boton:hover {background-color: #3d6fd8}

@media screen and (max-width: 1220px) { 
  .servicios .servicios-ul {width: 900px; margin: 0 auto}

  @media screen and (max-width: 920px) { 
    .servicios .servicios-ul {width: 90%; margin: 0 auto}
    .servicios .servicios-ul li {width: 48%}
  }
  @media screen and (max-width: 600px) { 
    .servicios .servicios-ul li article h3 {font-size: 14px}
    .servicios .servicios-ul li article p {font-size: 13px}
  }
  @media screen and (max-width: 474px) { 
    .servicios .servicios-ul {width: 90%; margin: 0 auto}
    .servicios .servicios-ul li {width: 100%; margin-top: 20px}
  }
}

.nosotros-index {}
.nosotros-index figure {width: 50%;float: left; height: 600px; overflow:hidden; position: relative; }
.nosotros-index figure img {width: 100%; position: absolute; top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;}
.nosotros-index section{width: 50%; float: right; background-color: #f1f1f1; height: 600px; padding: 50px ;box-sizing: border-box; z-index: 9}
.nosotros-index section h1 {font-size: 32px}
.nosotros-index section .bar {height: 1px; background-color: #333; width: 40px;  margin-top:  20px; margin-bottom: 20px}
.nosotros-index  .boton {background-color: #224ea8; padding: 10px 20px 10px 20px; color: #fff; text-transform: uppercase; font-weight: 800; margin-top: 30px; display: inline-block;}
.nosotros-index  .boton:hover {background-color: #3d6fd8}
.nosotros-index article {vertical-align: middle;}
.nosotros-index section ul {list-style: none; margin-top: 25px}
.nosotros-index section ul li {height: 20%; width: 22%; background-color: #ccc; display: inline-block; margin-left: 10px}
.nosotros-index section ul li:nth-child(1) {margin-left: 0px}
.nosotros-index section ul li img{}

@media screen and (max-width: 1185px) {
  .nosotros-index figure {width: 100%; float: none}
  .nosotros-index section {width: 90%; margin: 0 auto; margin-top: -520px; height: auto; float: none; z-index: 9999; position: relative;}
}
@media screen and (max-width: 508px) {
  .nosotros-index section {margin-top: -500px}

}
@media screen and (max-width: 520px) {
  .nosotros-index section ul li {width: 100%; margin: 0 auto; margin-top: 10px}
}


.nosotros-section {padding: 80px 0px 80px 0px; text-align: center;}
.nosotros-section h2 {text-transform: uppercase; text-align: center; font-size: 27px; font-weight: 800}
.nosotros-section .bar {height: 1px; background-color: #333; width: 40px; margin: 0 auto; margin-top:  20px; margin-bottom: 20px}
.nosotros-section p {text-align: justify;}
.nosotros-section .fotos {background-color: #3267d6; margin-top: 60px; padding: 40px 0px 40px 0px}
.nosotros-section .fotos li {display: inline-block; width: 250px; height: 250px; background-color: #f1f1f1}
.nosotros-section .fotos li img {width: 100%}
.nosotros-section .equipo {padding: 80px 0px 80px 0px}
.nosotros-section .equipo .equipo-lista {text-align: center;}
.nosotros-section .equipo .equipo-lista li { display: inline-block; margin: 10px}
.nosotros-section .equipo .equipo-lista li h2 {font-size: 16px; margin-top: 10px}
.nosotros-section .equipo .equipo-lista li h3 {font-size: 14px}
.nosotros-section .equipo .equipo-lista li i {height: 30px; width: 30px; text-align: center; line-height: 30px; color: #fff; background-color: #222; border-radius: 100px; margin-top: 10px; font-size: 15px; padding-left: 0.2px}
.nosotros-section .equipo .equipo-lista li i:hover {background-color: #3267d6; }
.nosotros-section .equipo .equipo-lista li figure{width: 200px; height: 200px; overflow:hidden; border-radius: 2000px;}
.nosotros-section .equipo .equipo-lista li img {width: 100%}
 
.clientes {padding: 80px 0px 80px 0px; text-align: center;}
.clientes h2 {text-transform: uppercase; text-align: center; font-size: 27px; font-weight: 800}
.clientes .bar {height: 1px; background-color: #333; width: 40px; margin: 0 auto; margin-top:  20px; margin-bottom: 20px}
.clientes ul {text-align: center;}
.clientes ul li {display: inline-block; width: 19%}
.clientes ul li img {width: 100%}

.servicios-section  {padding: 80px 0px 80px 0px; text-align: center;}
.servicios-section  h2 {text-transform: uppercase; text-align: center; font-size: 27px; font-weight: 800}
.servicios-section  h3 {text-transform: uppercase; text-align: center; font-size: 20px; font-weight: 300}
.servicios-section  .bar {height: 1px; background-color: #333; width: 40px; margin: 0 auto; margin-top:  20px; margin-bottom: 20px}
.servicios-section ul {text-align: center;}
.servicios-section ul li{width: 32.5%; background-color: #f1f1f1; display: inline-block; height: 500px; overflow: hidden; position: relative;}
.servicios-section ul img{width: 100%; transform: scale(1.3); transition: .2s}
.servicios-section ul li:hover > img {transform: scale(1.2); transition: .2s}
.servicios-section ul li p {position: absolute; bottom: 0px; padding: 20px; box-sizing: border-box; color: #fff; font-size: 25px; text-align: left; font-weight: 600}
.servicios-section strong {font-size: 19px}

@media screen and (max-width: 1220px) { 
  .servicios-section ul img {height: 100%; width: 150%}
}
@media screen and (max-width: 990px) { 
  .servicios-section ul li {height: 300px;}
  .servicios-section ul img {width: 100%}
}
@media screen and (max-width: 650px) { 
  .servicios-section ul li {height: auto; width: 100%; margin-top: 10px; height: 300px}
  .servicios-section ul img {width: 100%; height: auto;}
}

.servicios-lista li {height: auto !important; padding: 30px; box-sizing: border-box;text-align: left; min-height: 260px; margin-left: -4px }
.servicios-lista li h2 {font-size: 18px; text-transform: none;}
.servicios-lista li {font-weight: 300; color: #fff; transition: .2s }
.servicios-lista li:hover {opacity: .95; transition: .2s}
.servicios-lista li:nth-child(odd) {background-color: #224ea8 !important}
.servicios-lista li:nth-child(even) {background-color: #2b62d5 !important}
.unico {width: 80% !important; text-align: center !important;}



.contacto {background-color: #222; width: 100%; padding: 70px 0px 70px 0px; text-align: center; color: #fff}
.contacto h2 {text-transform: uppercase; font-size: 30px}
.contacto p {margin-bottom: 40px}
.contacto form {width: 49%; float: left;}
.contacto form input, textarea{font-family: 'Lato'; width: 100%; padding: 15px; box-sizing: border-box; border:none; border-radius: 3px; margin-top: 10px}
.contacto textarea {min-height: 200px}
.contacto .datos {width: 49%; float: right;}
.contacto .datos li {display: block; list-style: none; text-align: left; font-size: 18px; margin-top: 8px}
.contacto .datos li i{margin-right: 5px; text-align: center !important; width: 25px; font-size: 23px}
.contacto .datos iframe {margin-top: 20px}
.contacto button {background-color: #3a59d9; padding: 15px 20px 15px 20px; font-family: 'Lato'; border:none; color: #fff; font-size: 16px; margin-top: 15px; float: left;}

@media screen and (max-width: 1250px) { 
  .contacto form {float: none; width: 90%; margin: 0 auto}
  .contacto .datos {float: none; width: 90%;  margin: 0 auto; margin-top: 20px}
  .contacto button {float: none; width: 100%; box-sizing: border-box;}
}

footer {background-color: #224ea8; padding: 40px 0px 40px 0px; text-align: center; color: #fff}
footer a { color: #fff}




.spinner {
	position: absolute;
  width: 70px;
  height: 70px;
  text-align: center;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);

}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #224ea8;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }