/* CSS Styles Body Tamaño de Fuente, Color de Fondo */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
  text-decoration: none;
  list-style: none;	
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  font-size: 18px;
}

body {
 font-family: 'Lato', Arial, sans-serif;
  background: #eee;
  outline: none;
}
/* END CSS Styles Body Tamaño de Fuente, Color de Fondo */

/*  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 STILES PARA DAR ESPACIO ENTRE CLASS O DIV  */
.space{display: flex; justify-content: center; margin-top: 50px;}
.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 - STYLES COLORES DE FONDO */
.bggray { background-color: #3D434A; color: #FFF; padding: 20px; text-align: center;}
.bggreenrad { background-color: #5EC2A0; color: #FFF; padding: 20px; border-radius:5px;}
.bggreen { background-color: #5EC2A0; 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 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;	padding: 10px 12px; margin: 8px 0;	width: 100%; color: #333; outline: none;
	border-radius: 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;}
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 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 BOTONES EN GENERAL */
/* BOTONES REDONDEADOS BLANCO Y AZUL */
.btncirgray {background-color: #3D434A;	border-radius:28px;	display:inline-block; cursor:pointer; color:#FFF; padding:10px 40px; text-decoration:none; border: 5px solid #F8B004;}
.btncirgray:hover {background-color:#136C6;}

.btncirgreen{background-color: #5EC2A0; border-radius:28px; display:inline-block; cursor:pointer; color:#FFF; padding:10px 40px; text-decoration:none; border: 5px solid #3D434A; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));}
.btncirgreen:hover {color:#FFF;}

	
.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-size:18px;	padding:10px 40px; text-decoration:none; border: 5px solid #5EC2A0;}
.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 Styles para boton servicios post*/
.cardlogin { width: 350px; color:#3D434A; padding: 20px; text-align: center;}
.cardbeige{background:#fef9e7; color:#fff; border-radius:5px;	padding: 15px; height:auto;	margin-top: 5px; margin-bottom: 10px; 
border: 0.5px solid #ddd;}
.cardline{background:#FFF; color: #3D434A;	border-radius:5px;	padding: 5px; border: 0.5px solid #DDD;}
.cardblue{background:#d6eaf8; color:#FFF; border-radius:5px;	padding: 15px; height:auto;	margin-top: 5px; margin-bottom: 10px; 
border: 0.5px solid #ddd;}
.cardwhitedrop{background:#fff;	color:#333;	border-radius:8px; padding: 15px; height:auto;margin-top: 5px; margin-bottom: 10px; 
border: 0.5px solid #ddd; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%;}


.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 ADAPTAR IMAGENES*/
.imgicon  {filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); max-width: 100%; vertical-align: middle;}
.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*/


/* CSS TEXTOS ESPECIALES PARA TITULOS */
h1{color:#fff; font-family:"Times New Roman", Times, serif; }
.txttitle{font-family:"Times New Roman", Times, serif; font-size:30px; }
.txtwhitep{color:#fff;}
.txtwhite{font-family:'Arial Black', Gadget, sans-serif; Color:#FFF; font-size:40px; font-weight: bold; }
.txtgray{font-family:'Arial Black', Gadget, sans-serif; color:#3D434A;	font-size:40px;}
.txtcolor{font-family:'Arial Black', Gadget, sans-serif; color:#5EC2A0;	font-size:40px;}
.txtgraynor{font-family:"Times New Roman", Times, serif; color:#3D434A;}
.txtgreen{font-family:'Arial Black', Gadget, sans-serif;  color:#5EC2A0; font-size:20px;}
.txtgreennor{color:#5EC2A0;}
.txtspc{font-family:"Times New Roman", Times, serif; font-size:40px; font-size:26px; color:#FFF;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); }
/* END CSS TEXTOS ESPECIALES PARA TITULOS */

/** CSS STYILE ICONO O LOGO RENDONDO AL INCIAR SESION */
.clasicono {border: 2px solid #5EC2A0; border-radius: 5px; background:#FFFFFF; -moz-border-radius: 50%; -webkit-border-radius: 50%;
    		padding: 8px; width: 100px; height: 100px; vertical-align: middle;  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
			filter: grayscale(1);}
.clasicono:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); opacity: 1.0; filter: alpha(opacity=100);} /* For IE8 and earlier */
/** END CSS STYILE ICONO O LOGO RENDONDO AL INCIAR SESION */

/* CSS Styles para columnas responsivas */
#center{width: 60%; margin: 0 auto;}
@media (max-width: 840px){#navcont{width: 100%;}}
#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 */