@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

*{margin:0px; padding:0px;}

body{
	font-family: 'Roboto', sans-serif;
	background-color:#F2F2F2;
}

.info, .exito, .alerta, .error
{
	font-family: 'Roboto', sans-serif;
	font-size:10pt;
	border: 1px solid;
	margin: 11px;
	padding:11px 11px 11px 50px;
	background-repeat: no-repeat;
	background-position: 10px center;
	display:block; 
	clear:both;
	text-align:left;
}

.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('../images/msg/info.png');
}

.exito {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('../images/msg/exito.png');
}

.alerta {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('../images/msg/alerta.png');
}

.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('../images/msg/error.png');
}

/* ===============================================================================
=============================================================== INICIO DE SESIÓN =
=============================================================================== */

.sesion
{
	width:100%; 
	max-width:300px; 
	margin:7% auto 0px; 
	padding:14px 66px 33px; 
	text-align:center;
	background-color: #FFF;
	border-radius: 22px;
}

  .sesion img{max-width:80%; height:auto; display:block; margin:28px auto;}
  
  .sesion label
  {
	  font-weight:bold; 
	  color:#4d4d4d; 
	  font-size:11pt; 
	  margin-bottom: 5px;
	  display:block; 
	  width:100%; 
	  text-align:left;
  }
  
  .sesion input[type=text]
  ,.sesion input[type=password]{
	  display:block; 
	  margin:0px 0px 22px;
	  border:solid 1px #f2f2f2;
	  border-radius:3px;
	  padding:6px 8px;
	  width:94%;
	  text-align:left;
}

.sesion input[type=submit]
{
	background-color:#3C73A7;
	border:solid 1px #3C73A7;
	border-radius:3px;
	padding:22px;
	margin:11px 0px;
	color:#FFF;
	font-weight:bold;
	cursor: pointer;
}

.sesion input[type=submit]:hover
{
	background-color:#2f5b83;
	border:solid 1px #2f5b83;
}

nav{text-align:center; display:block; border-bottom:1px solid #7e7e7e;}

nav ul{list-style:none; text-align:center; display:inline-block; overflow:hidden}

nav ul li{float:left; padding:14px 17px;} nav ul li a{color:#333; font-weight:bold; text-decoration:none; text-transform:uppercase;}

nav ul li a:hover{background-color:#2957a4; color:#FFF;}

/* ===============================================================================
============================================================== TAMAÑOS GENERALES =
=============================================================================== */
#header, #main, #colophon, nav{width:100%; max-width:750px; margin:0px auto;}

#header{overflow:hidden; padding:21px 0px 7px; border-bottom:solid 1px #7E7E7E;}

  #header img{width:100%; max-width:250px; height:auto; float:left;}
  
  #header h2{color:#848484; font-size:14pt; float:right; margin-top:49px; text-transform:uppercase;}
  
#main{padding:7px 0px;}

#colophon{overflow:hidden; padding:7px 0px 21px; border-top:solid 1px #7E7E7E;}

  #colophon{color:#848484; font-size:11pt; font-weight:bold;}
  
  #colophon .left{float:left;}
  
  #colophon .rigth{float:right;}

/* ===============================================================================
=========================================================== FORMULARIO DE CORREO =
=============================================================================== */
#correo{width:100%; display:block; clear:both;}

.form-table{display:table; width:100%; table-layout:fixed;}

.form-row{display:table-row}

  .correo label{display:table-cell; width:27%; font-weight:bold;}
  
  .correo select{display:table-cell; }
  
  .correo input[type=text]
  , .correo input[type=password]
  , .correo input[type=email]
  , .correo input[type=tel]
  , .correo input[type=number]
  , .correo select{
	  display:table-cell; 
	  margin:14px 0px;
	  border:solid 2px #A4A4A4;
	  border-radius:3px;
	  padding:6px 3%;
	  width:94%;
	  text-align:left;
  }
  
  .correo input[type=submit], .form-btn input[type=submit], .form-btn a{
	  background-color:#58ACFA;
	  border:solid 1px #3C3AEF;
	  border-radius:3px;
	  width:100%;
	  padding:6px 8px;
	  margin:14px 0px;
	  color:#FFF;
	  font-size:11pt;
	  text-decoration:none;
	  display:inline-block;
	  text-align:center;
  }
  
  .form-btn{display:block; overflow:hidden; text-align:center; width:100%;}
    
	.form-btn input[type=submit], .form-btn a{margin:14px 3px; width:100%; max-width:250px;}
  
  .correo input[type=submit]:hover, .form-btn input[type=submit]:hover, .form-btn a:hover{
	  background-color:#3C3AEF;
	}

  .correo p, .form-table p{font-size:10pt; font-weight:bold; clear:both; display:block; width:100%; color:#8C8C8C;}
  
  .cel3{display:block;}
  
  .cel3 label{display:block; width:27%; font-weight:bold; float:left; margin:14px 0px;}
  
  .cel3 input[type=text], .cel3 select{
	  width:31%;
	  float:left;
	  display:inline-block;
	}
	
  .cel3 select{margin-left:1%;}
  
/*|================================================================================================================== */
/*| TABLA CSS */
/*|================================================================================================================== */
.CssTable {
	margin:0px;padding:0px;
	width:100%;
	border:1px solid #ffffff;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.CssTable table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	margin:0px;padding:0px;
}.CssTable tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.CssTable table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.CssTable table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.CssTable tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.CssTable tr:hover td{
	
}
.CssTable tr:nth-child(odd){ background-color:#e5e5e5; }
.CssTable tr:nth-child(even)    { background-color:#ffffff; }.CssTable td{
	vertical-align:middle;
	
	
	border:1px solid #ffffff;
	border-width:0px 1px 1px 0px;
	text-align:center;
	padding:7px;
	font-size:11px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CssTable tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CssTable tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CssTable tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CssTable tr:first-child td{
		background:-o-linear-gradient(bottom, #2957a4 5%, #2957a4 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2957a4), color-stop(1, #2957a4) );
	background:-moz-linear-gradient( center top, #2957a4 5%, #2957a4 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#2957a4", endColorstr="#2957a4");	background: -o-linear-gradient(top,#2957a4,2957a4);

	background-color:#2957a4;
	border:0px solid #ffffff;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CssTable tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #2957a4 5%, #2957a4 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2957a4), color-stop(1, #2957a4) );
	background:-moz-linear-gradient( center top, #2957a4 5%, #2957a4 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#2957a4", endColorstr="#2957a4");	background: -o-linear-gradient(top,#2957a4,2957a4);

	background-color:#2957a4;
}
.CssTable tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CssTable tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}


/* =============================================================================== */
/* = RESPONSIVE STYLE ============================================================ */
/* =============================================================================== */
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px)
{
	.sesion
	{
		margin:30% auto 0px; 
		padding:11px 22px 29px; 
		border-radius: 7px;
	}

	  .sesion input[type=text]
	  ,.sesion input[type=password]{
		  padding:14px 8px;
	}
}