@charset "utf-8";
/* CSS Document */

/* CSS Styles Body Tamaño de Fuente, Color de Fondo */
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;1,600;1,700&display=swap");
* {
  text-decoration: none;
  list-style: none;	
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 18px;
}

body {
  font-family: "Nunito", sans-serif;
  background-color:#fff;
  outline: none;
}
/* END CSS Styles Body Tamaño de Fuente, Color de Fondo */

/* CSS STYLES PARA CAJAS DE TEXTOS Y FORMS PARA FORMULARIOS */
.wrap {width: 100%;	height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 20px;}
.checkbox {	width:15px;	height:15px;}
.inputset {background-color: #ecececdd; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 100%; color: #333; outline: none;
  		   border-radius: 5px;}
input{ background-color: #fff; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 100%; color: #333; outline: none;  	
       border-radius: 5px;}
.inputlok {background-color:#666; border: none; font-size: 14px; padding: 10px 12px; margin: 8px 0; width: 100%; color: #FFF; outline: none;
       border-radius: 5px;}
/* END CSS STYLES PARA CAJAS DE TEXTOS Y FORMS PARA FORMULARIOS */

/*  CSS STILES PARA DAR ESPACIO ENTRE CLASS O DIV  */
.separator {display: flex; justify-content: center; margin-top: 100px;}
 hr {margin-top: 5px; margin-bottom: 5px; border-top-width: 1px; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;
	border-top-style: solid; border-top-color: #eee;}
/* END CSS STILES PARA DAR ESPACIO ENTRE CLASS O DIV  */


/*  CSS STILES ENLACES ESPECIALES COLORES AZUL, BLANCO Y GRIS DEFINIDO  */
A.navblack, A.navblack:VISITED, A.navblack:ACTIVE, A.navblack:FOCUS, A.navblack:LINK{
	color:#333;	text-decoration: none; list-style-image: none; list-style-type: none;}
A.navblue, A.navblue:VISITED, A.navblue:ACTIVE, A.navblue:FOCUS, A.navblue:LINK{
  font-size:16px; color: #273C53; text-decoration: none; list-style-image: none; list-style-type: none;}
A.navwhite, A.navwhite:VISITED, A.navwhite:ACTIVE, A.navwhite:FOCUS, A.navwhite:LINK{
  font-size:16px;color: #fff; text-decoration: none; list-style-image: none; list-style-type: none;}
A.navgray, A.navgray:VISITED, A.navgray:ACTIVE, A.navgray:FOCUS, A.navgray:LINK{
  font-size:16px; color:#3D434A; text-decoration: none; list-style-image: none; list-style-type: none;}
/*  END CSS STILES ENLACES ESPECIALES COLORES AZUL, BLANCO Y GRIS DEFINIDO  */

/* CSS STYLES PARA ADAPTAR IMAGENES*/
.imgicon  { font-size: 48px; color: #00A6E2;}
.imgdrop { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%;}
.imgdropcenter {max-width: 100%; vertical-align: middle; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%;}
.imglogo{width:200px; height:122px;} /* CSS coloca la imagen con este tamaño*/
.imgbgray {filter: grayscale(1); max-width: 100%} /* CONVIERTE LA IMGEN DE COLOR A GRIS */
.imgresp {max-width: 100%; }/* CSS acomoda la imagen con tamaño de acuerdo al DIV o CLASS */
.imgbor {max-width: 100%; border-radius:5px;} /* CSS acomoda la imagen y redondea el borde con tamaño de acuerdo al DIV o CLASS */
img.txtcenter{ max-width: 100%; vertical-align: middle;} /* CSS centra la imagen con el texto */
/* END CSS STYLES PARA ADAPTAR IMAGENES*/



.txtbluemid{color:#2A5B83;font-weight: bold;}
.txtblue{color:#2A5B83;font-size:32px;font-weight: bold;}
.txtwhite{color:#FFF;font-size:32px;font-weight: bold;}
.txtsubwhite{color:#fff;font-size:22px;	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}


/* CSS - STYLES COLORES DE FONDO */
.bggray { background-color: #3D434A; color: #FFF; padding: 20px; text-align: center;}
.bggraycl { background-color: #f2f2f2; color: #FFF; padding: 20px;}
.bgwhite {background:#fff; padding: 20px; text-align: center;}
.bgtrans {padding: 20px; text-align: center;}
/* END CSS -  STYLES COLORES DE FONDO */ */

/* CSS STYLES PARA BOTONES EN GENERAL */
/* BOTONES REDONDEADOS BLANCO Y AZUL */
.btncirgray {background-color: #3D434A;	border-radius:28px;	display:inline-block; cursor:pointer; color:#FFF; font-family: 'Open Sans', sans-serif;
	font-size:18px;	padding:10px 40px; text-decoration:none; border: 5px solid #F8B004;}
.btncirgray:hover {background-color:#136C6;}
	
.btnciryellow{background-color: #F8B004; border-radius:28px; display:inline-block; cursor:pointer; color:#3D434A; font-family:'Open Sans', sans-serif;	font-size:18px;	padding:10px 40px; text-decoration:none; border: 5px solid #0A3246;}

.btncirwhite {background-color: #fff; border-radius:28px; display:inline-block;	cursor:pointer;	color:#333;	font-family: 'Open Sans', sans-serif;
	font-size:18px;	padding:10px 40px; text-decoration:none; border: 5px solid #00A6E2;}
.btncirwhite:hover {background-color:#136C6;}
/* END BOTONES REDONDEADOS BLANCO Y AZUL */

.btngray {width: 100%; display: inline-block; color: #fff; font-family: "Nunito", sans-serif; font-size:18px; background-color: #3D434A;
  border: none; outline: none; cursor: pointer; border-radius: 35px; transition: 0.3s; padding: 12px 36px;; }
.btnblue {width: 100%; display: inline-block; color: #fff; font-family: "Nunito", sans-serif; font-size:18px; background-color: #268FFF;
  border: none; outline: none; cursor: pointer; border-radius: 35px; transition: 0.3s; padding: 12px 36px;;}

/* CSS Styles para botones en general */


/* CSS STYLE para contador JavaScrip */
.counter { text-align:center;color:#FFF;font-size:32px;font-weight: bold;}
/* END CSS STYLE para contador JavaScrip */


.cardblue{background:#273C53;color:#FFF;border-radius:8px;padding: 20px;height:auto;margin-top: -60px;box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}

/* CSS Styles para boton servicios post*/
.cardservpost{background-color: #273C53;color:#fff;	border-radius:35px;	font-size:18px;	border: 1px solid #273C53;text-align:center;
	padding:5px;width:auto;}
.cardservpost:hover{background-color: #fff;	color:#273C53;box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
/* END CSS Styles para boton servicios post*/
.card { background-color: white; border-radius:5px; padding: 20px; margin-top: 20px;}
.card:hover { background-color: #fff; color:#fff; border-radius:5px; padding: 20px; margin-top: 20px; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}

.cardwhite{background:#fff;color:#333;border-radius:8px;padding: 20px;height:auto;margin-top: 5px;border-top-width: 0.5px;
border-right-width: 0.5px;border-bottom-width: 0.5px;border-left-width: 0.5px;border-top-style: solid;border-right-style: solid;
	border-bottom-style: solid;	border-left-style: solid;border-top-color: #DDD;border-right-color: #DDD;border-bottom-color: #DDD;
	border-left-color: #DDD;margin-bottom: 10px;}
.cardtrans{color:#333;border-radius:8px;padding: 20px;height:auto;margin-top: 5px;border-top-width: 0.5px;border-right-width: 0.5px;
	border-bottom-width: 0.5px;border-left-width: 0.5px;margin-bottom: 10px;}
/* CSS Styles para alinear iconos con texto al centro despues de la imagen*/




/* CSS Styles para columnas responsivas */
#webcont{width: 1150px; margin: 0 auto;}
@media (max-width: 840px){#webcont{width: 100%;}}

.cl15 {float: left; width: 10%; padding: 5px;}
.cl20 {float: left; width: 20%; padding: 5px;}
.cl25 {float: left; width: 25%; padding: 5px;}
.cl30 {float: left; width: 30%; padding: 5px;}
.cl33 {float: left; width: 33.33%; padding: 5px;}
.cl40 {float: left; width: 40%; padding: 5px;}
.cl45 {float: left; width: 45%; padding: 5px;}
.cl50 {float: left; width: 50%; padding: 5px;}
.cl60 {float: left; width: 60%; padding: 5px;}
.cl70 {float: left; width: 70%; padding: 5px;}
.cl75 {float: left; width: 75%; padding: 5px;}
.cl80 {float: left; width: 80%; padding: 5px;}
.cl100 {float: left; width: 100%; padding: 5px;}
.cont:after {content: ""; display: table; clear: both;}
@media screen and (max-width:600px) {.cl15, .cl20, .cl25, .cl30, .cl33, .cl40, .cl45, .cl50, .cl60, .cl70, .cl80, .cl75, .cl100 {width: 100%;}}
/* END CSS STYLES ANCHO FIJO WEB Y COLUMNAS RESPONSIVAS VARIOS TAMAÑOS */
/* END CSS Styles para columnas responsivas */

/* CSS styles para barra de navegación footer o pie de pagina */
.navunder {
  overflow: hidden;
}
.navunder a {
  float: left;
  display: block;
  font-size:16px;
  color: #333;
  text-align: center;
  padding: 12px 10px;
  text-decoration: none;
}
.navunder a:hover {
  color: #000;
}
/* END CSS styles para barra de navegación footer o pie de pagina */


/* CSS STYLE ANIMACIONES E IMAGENES ESPECIALES */
.moveanimation {position: relative; max-width: 100%; -webkit-animation: move-animation 2s ease-in-out infinite; animation: move-animation 2s 
             ease-in-out infinite; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
@-webkit-keyframes move-animation {0% {top: 3px;} 50% {top: -3px;} 100% {top: 3px;}}
.moveanimat {position: relative; max-width: 100%; -webkit-animation: move-animation 2s ease-in-out infinite; animation: move-animation 2s              ease-in-out infinite;}
@-webkit-keyframes move-animation {0% {top: 3px;} 50% {top: -3px;} 100% {top: 3px;}}
/* END CSS STYLE ANIMACIONES E IMAGENES ESPECIALES */

/*  CSS STYLES PARA BARRA DE NAVEGACION */
.navbar input[type="checkbox"],
.navbar .hamburger-lines {display: none;}
.container {max-width: 1300px; width: 100%; margin: auto;}
.navbar {position: fixed;width: 100%;background: #FFF;color: #3D434A;border-bottom-width: 0.5px;border-bottom-style: solid;border-bottom-color: #f2f2f2; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
.navbar-container { display: flex; justify-content: space-between; align-items: center; height: 64px;}
.menu-items { order: 2;  display: flex;}
.logo {order: 1; font-size: 1.8rem;	width: 30%;}
.menu-items li,
button {list-style: none; margin-left: 1.5rem; font-size: 1.1rem; display: flex; align-items: center;}
.navbar a {color: #3D434A; text-decoration: none; font-weight: 500; transition: color 0.3s ease-in-out;}
.navbar a:hover {color: #0088A9;}
@media (max-width: 768px) {.navbar-container input[type="checkbox"], .navbar-container .hamburger-lines {display: block; }
.navbar-container { display: block;  position: relative;  height: 64px; }
.navbar-container input[type="checkbox"] {position: absolute; display: block; height: 32px; width: 30px; top: 20px; left: 20px;  z-index: 5;
opacity: 0; cursor: pointer;}
.navbar-container .hamburger-lines {display: block; height: 28px; width: 35px; position: absolute; top: 20px; left: 20px; z-index: 2;
display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.navbar-container .hamburger-lines .line {display: block; height: 4px; width: 100%; border-radius: 10px; background: #3D434A;  }
.navbar-container .hamburger-lines .line1 {transform-origin: 0% 0%; transition: transform 0.3s ease-in-out;}
.navbar-container .hamburger-lines .line2 {transition: transform 0.1s ease-in-out;}
.navbar-container .hamburger-lines .line3 {transform-origin: 0% 100%; transition: transform 0.3s ease-in-out;}
.navbar .menu-items {padding-top: 100px; background: #FFF; height: 100vh; max-width: 300px; transform: translate(-150%); display: flex;
flex-direction: column; margin-left: -40px; padding-left: 40px; transition: transform 0.5s ease-in-out; overflow: scroll;}
.navbar .menu-items li {margin-bottom: 1.8rem; font-size: 1rem; font-weight: 500;}
button {width: fit-content; margin-left: 1rem;}
.logo {position: absolute;top: 12px; right: 15px; width:50%; font-size: 1.7rem;}
.navbar-container input[type="checkbox"]:checked ~ .menu-items {transform: translateX(0);}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {transform: rotate(45deg);}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {transform: scaleY(0);}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {transform: rotate(-45deg);}
} @media (max-width: 500px) {.navbar-container input[type="checkbox"]:checked ~ .logo {display: none; }}
/*  END STYLES PARA BARRA DE NAVEGACION */