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

/* 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:20px;	height:20px;}
.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;}
.topmarque {overflow: hidden; background: #ddd; border-radius: 5px; color:#000; font-size:18px;}
.septext{margin: 10px; margin-top: 0;}	
/* END CSS STILES PARA DAR ESPACIO ENTRE CLASS O DIV  */


/*  CSS STILES ENLACES ESPECIALES COLORES AZUL, BLANCO Y GRIS DEFINIDO  */
A.textbotones, A.textbotones:VISITED, A.textbotones:ACTIVE, A.textbotones:FOCUS, A.textbotones: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 SUBMENU RESPONSIVE */
.dropbtn { background-color: #FFF; color: #3D434A; border-radius:5px; padding: 10px; font-size: 18px; border: none; cursor: pointer;}
.dropdown {position: relative; display: inline-block;}
.dropdown-content {display: none; position: absolute; background-color: #FFF; color:#3D434A; border-radius:5PX;
  min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color:#3D434A; padding: 12px 16px; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: #FFF;;}
.show {display:block;}
/* END CSS STYLES PARA SUBMENU RESPONSIVE */

/* 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*/

.center{
  Padding:10px;
  position: fixed;
  border-radius: 3px;
  left: 50%;
  transform: translate(-50%, -50%);
  
}
.titulonoticia{background-color: #CC0000; color:#fff; border-radius:5px; padding: 10px; text-align: center;}
.txtbluemid{color:#2A5B83; font-size:24px;}
.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; border-radius:5px; color: #FFF; padding: 20px; text-align: center;}
.bggraycl { background-color: #ddd; border-radius:5px; color: #000; padding: 20px; text-align: center;}
.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 */

.btnvermas {
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	background-color:#d0451b;
	border-radius:3px;
	border:1px solid #942911;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:10px 35px;
	text-decoration:none;

}
.btnvermas:hover {
	background-color:#bc3315;
}
.btnvermas:active {
	position:relative;
	top:1px;
}
.btnred {
	box-shadow:inset 0px 1px 0px 0px #cf866c;
	background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
	background-color:#d0451b;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:12px 30px;
	text-decoration:none;
}
.btnred:hover {
	background-color:#d0451b;
	color:·fff;
}
.btnred:active {
	position:relative;
	top:1px;
}

.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: 15px solid #0A3246; }

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

	
.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 */



.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*/

table {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #000; font-size: 14px; margin: 15px;
    border: #ccc 1px solid; -moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1; box-shadow: 0 1px 2px #d1d1d1;}
table th {padding: 21px 25px 22px 25px; border-top: 1px solid #fafafa; border-bottom: 1px solid #e0e0e0;}
table tr {text-align: center; padding-left: 20px;}
table td {color: #fff; padding: 18px; border-top: 1px solid #ffffff; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0;
    background: #333;}
table tr.even td {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #000; font-size: 14px; background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);}
table tr:hover td {}
.table-container{width: 100%; overflow-y: auto; _overflow: auto;  margin: 0 0 1em;}
.table-container::-webkit-scrollbar{-webkit-appearance: none; width: 14px; height: 14px;}
.table-container::-webkit-scrollbar-thumb{border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3);}


/* CSS Styles para columnas responsivas */
#center{width: 60%; margin: 0 auto;}
#webcont{width: 1200px; 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 */

.imgzoom{
border-radius: 8%;
max-width: 80%; 
porder: 1px solid #ddd;
border-radius: 5px;
padding: 5px;
background:#FFFFFF;
display:block!important;
-webkit-transition:-webkit-transform 1s ease-out;
-moz-transition:-moz-transform 1s ease-out;
-o-transition:-o-transform 1s ease-out;
-ms-transition:-ms-transform 1s ease-out;
transition:transform 1s ease-out;
}
.imgzoom:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}


/* 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 */

.clasimglogo {opacity: 0.5; filter: alpha(opacity=50); border: 1px solid #C00; border-radius: 50px;
	background:#FFFFFF; -moz-border-radius: 50%; -webkit-border-radius: 50%; padding: 8px; width: 150px; height: 150px;}
.clasimglogo:hover {box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); opacity: 1.0; filter: alpha(opacity=100);}


/*  CSS STYLES PARA BARRA DE NAVEGACION */
#menu {height: 50px; list-style: none; padding-top: 20px; padding-right: 25px;	padding-left: 30px;	border-radius: 5px;
	padding-bottom: 20px; margin-left: 60px; margin-bottom: 20px;}
#menu ul { left: 30px; top: -9999px; z-index: 1; }
#menu li {display: block; float: left; height: 30px; position: relative; width: 150px; margin-right: 2px;}
#menu li a {color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background:#EC1B24; border-radius: 5px;}
#menu li a:hover{ background-color:#222;}
@-webkit-keyframes animation1 { 0% 
{ -webkit-transform: scale(1); 
} 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } }
@-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } }
#menu li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards;}
#menu li:hover > a { z-index: 4; }
#menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; }
#menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; }
#menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; }
#menu ul li a:hover{ background:#111; }
/*  END STYLES PARA BARRA DE NAVEGACION */

menul {list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;}
uli a {display: block; color: #000; padding: 8px 16px; text-decoration: none;}
/* Change the link color on hover */
uli a:hover {background-color: #000; border-radius: 5px; color: white; text-decoration: none;}