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

/*	 INCIA BODY
	================================================================================ */
body{
	@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
	@icon-font-path: "../fonts/glyphicons-halflings-regular.ttf";
	@icon-font-name: "glyphicons-halflings-regular";
	width:100%;
	min-width:300px;
	background-color:#e7e7e7 !important;
}
/*	 TERMINA BODY
	================================================================================ */


/*	 INCIA HEADER
	================================================================================ */
header{
	width:95%;
	height:auto;
	min-width:300px;
	margin:0 auto;
}
/*	 ENCABEZADO ===================================================== */
header #encabezado{
	width:300px;
	float:left;
}
		header .logo {
			color:#666;
			font-size:40px;
			line-height:80px;
			float:left;
			margin:10px 0;
		}
			header .logo a {
				margin-left:5px;
				padding:20px 0;
				background-image:url(../img/LogotipoWEB-500.png);
				background-position:center;
				background-repeat:no-repeat;
				background-size:contain;
			}
				header .logo a .ocultar {
					visibility:hidden;
				}
/*	 TÍTULO ADMIN ================================================= */
header #admin{
	width:300px;
	text-align:right;
	margin-top:37px;
	display:block;
	float:right;
}
header #admin a span.icon-user-tie{
	margin-right:10px;
	font-size:25px;
	padding-top:10px;
}
/*	 TERMINA HEADER
	================================================================================ */
	

/*	 INCIA SECTION
	================================================================================ */
	section{
		width:100%;
		min-width:300px;
		height:auto;
		float:left;
	}
	section center h1{
		font-size:2.3em;
	}
	section .color-blue {
	color:#44618b;
	}
/*	 Inicia Contenedor
	================================================ */
	section .contenedor{
		width:100%;
		min-width:300px;
		min-height:420px;
		margin-top:20px;
		background-color:#44618b;
	}
/*	 Inicia Centrar
	================================================ */
	section .contenedor .centrar{
		width:90%;
		min-width:300px;
		height:100%;
		margin:0 auto;
		padding-bottom:30px;
	}
/*	 Inicia avatar
	================================================ */
	section .contenedor #avatar{
		/*float:left;*/
		display:inline-block;
		/*margin-left:100px;*/
	}
	#avatar img{
		width:200px;
		margin-top:-150px;
	}
/*	 Inicia txtIntro
	================================================ */	
	section .contenedor .txtIntro{
		/*float:left;*/
		display:inline-block;
		width:65%;
		min-width:300px;
		height:auto;
		margin-top:0px;
		margin-left:40px;
		padding:15px;
		color:#fff;
		text-align:justify;
		font-size:1.3em;
		/*border:2px #ccc dashed;*/
	}
	
/*	 Inicia centrarTablas
	================================================ */	
	section .contenedor .centrar .centrarTablas{
		display:block;
		margin-top:30px;
		width:100%;
		min-width:300px;
		height:auto;
	}
	.centrarTablas .ID{
		width:20%;
		text-align:center;
		display:inline-block;
	}
	.centrarTablas .btnConsulta{
		margin-left:10px;
		display:inline-block;
	}
	.centrarTablas hr{
		margin-top:30px;
		border-top: 3px #ccc dashed;
	}
/*	 Estilos para tablas
	================================================ */	
	section .contenedor .centrarTablas table th{		
		width:300px;
		font-weight:bolder;
		text-align:center;
		vertical-align:middle !important;
	}
	section .contenedor .centrarTablas table td{
		vertical-align:middle !important;
		width:300px !important;
	}
	
/*	 Estilos btl_Certificado
	=========================== */	
	section .contenedor .centrarTablas .tbl_certificado{
		margin-top:-21px;
	}
/*	 Inicia Contenedor Información de la empresa
	================================================ */
	section .contenedor2{
		width:90%;
		margin:0 auto;
		min-width:300px;
		min-height:200px;
		margin-top:20px;
	}
	section .contenedor2 .blq-info{
		display:inline-block;
		min-width:300px;
		width:48%;
		text-align:center;
		/*border: 2px #3c3c3c dashed;
		border-radius:6px;*/
		padding:0 10px;
		padding-bottom:15px;
	}
	section .contenedor2 .contacto{
		float:right;
	}
/*	 Termian Contenedor Información de la empresa
	================================================ */		
/*	 TERMINA SECTION
	================================================================================ */
	
	
	
/*	 INCIA FOOTER
	================================================================================ */
footer{
	width:100%;
	height:50px;
	text-align:center;
	font-size:0.9em;
	margin:0 auto;
	padding:17px 0;
	float:left;
	margin-top:10px;
	/*position:absolute;
	bottom:0;*/
}
/*	 TERMINA FOOTER
	================================================================================ */
	

/*	 INICIA LOGIN
	================================================================================ */
/*	 Estilos MATE
	================================================ */	
	#mate{
		position:fixed;
		width:100%;
		height:100%;
		background-color:rgba(51,51,51,.6);
	}
	.oculto{
		display:none;
	}
/*	 Estilos LOGIN
	================================================ */	
	#login{
		width:30%;
		min-width:300px;
		height:420px;
		position:absolute;
		left:33%;
		top:17%;
		border-radius:6px;
		background-color:#5cb85c;
	}
	#login #centrarLogin{
		padding:5px;
	}
	
	#login #centrarLogin span{
		font-size:15px;
		color:#fff;
		position:absolute;
		right:16px;
		top:12px;
	}
	
	#login #centrarLogin h3,h4{
		margin-top:25px;
		padding:0 5px;
		color:#fff !important;
	}
/*	 IMG LOGIN
	================================================ */	
	#centrarLogin img{
		width:120px;
		margin-top:15px;
	}
/*	 FORM LOGIN
	================================================ */	
	#centrarLogin form{
		margin-top:15px;
	}
	#centrarLogin form label{
		font-size:1.2em;
		font-weight:lighter;
		color:#fff;
	}
	#centrarLogin form input.form-control{
		width:100%;
	}
	#centrarLogin form .btnLogin{
		margin-top:10px;
	}
	
	#login .closeLogin{
		cursor: pointer;
	}

/*	 TERMINA LOGIN
	================================================================================ */
	
	
	
	
	
	
/*	 INCIA RESPONSIVE
	================================================================================ */
/* PANTALLAS MENORES A 1024PX -------------------------------------------------------*/
@media screen and (max-width: 1024px){	
/* ------------- LOGIN ------------------*/	
	
/* ------------- LOGIN ------------------*/	
	#mate #login{
		width:40%;
		height:450px;
		margin:0 auto;
	}
	
	#login #centrarLogin span{
		/*right:0;*/
		/*top:12px;*/
		margin-left:340px;
		/*margin-top:35px;*/
	}

	
	#centrarLogin form label{
		font-weight:400;
		width:80%;
	}
	
	#centrarLogin form input.form-control {
		height:44px;
	}
	
}
/* PANTALLAS MENORES A 768PX -------------------------------------------------------*/
@media screen and (max-width: 768px){
/* ------------- TITULO PAGINA ------------------*/
	section center h1 {
		font-size:2.1em;
		padding:0 20px;
	}
	section center h2 {
		padding:0 20px;
	}
	/* ------------- AVATAR ------------------*/
	#avatar img{
		margin-top:-260px;
	}

/* ------------- TXTINTO ------------------*/
	section .contenedor .txtIntro {
		margin-left:10px;
		width:60%;
	}

/* ------------- INPUT ID ------------------*/	
	.centrarTablas .ID {
		width:30%;
	}
	
	
/* ------------- LOGIN ------------------*/	
	#mate #login{
		width:50%;
		position:initial;
		margin:0 auto;
		margin-top:160px;
	}
	
	#login #centrarLogin span{
		position:relative;
		right:0;
		top:12px;
		margin-left:320px;
		margin-top:35px;
	}

	
	#centrarLogin form label{
		font-weight:400;
		width:80%;
	}
	
	#centrarLogin form input.form-control {
		height:44px;
	}
}

/* PANTALLAS MAYORES A 640PX LANDSCAPE-------------------------------------------------------*/
@media screen and (max-width: 640px){
	header #admin{
	width:250px;
	}
/*	 Inicia Contenedor Información de la empresa
	================================================ */
		section .contenedor2 .blq-info{
		min-width:250px;
		}
/*	 Termina Contenedor Información de la empresa
	================================================ */
	
/*/* ------------- MATE ------------------/	
	#mate {
		position:fixed;
		top:0;
	}
/* ------------- LOGIN ------------------/	
	#mate #login{
		height:442px;
		left:55px;
		top:36px;
	}*/
}
/* PANTALLAS MENORES A 639PX (300px) PORTRAIT -------------------------------------------------------*/
@media screen and (max-width: 480px){
	header{
		width:100%;
	}
	
	header #encabezado{
		float:none;
		margin:0 auto;
	}
	.logo{
		float:none;
		margin:0px;
		text-align:center;
		font-size:42px;
	}
	.logo a{
		padding:10px 0;
	}
	
	header #admin{
		float:none;
		margin:0 auto;
		text-align:center;
	}
/* ------------- TITULO PAGINA ------------------*/
	section center h1 {
		font-size:2.1em;
		padding:0 20px;
	}
	section center h2 {
		padding:0 20px;
	}
/*	 Inicia Contenedor Información de la empresa
	================================================ */
	section .contenedor2{
		width:100%;
	}
	section .contenedor2 .blq-info{
		display:block;
		width:90%;
		margin:0 auto;
	}
	section .contenedor2 .contacto{
		float:none;
	}
/*	 Termian Contenedor Información de la empresa
	================================================ */	
/* ------------- AVATAR ------------------*/
	#avatar{
		margin-left:62px;
	}
	#avatar img{
		margin-top:30px;
		margin-left:0;
}
/* ------------- TXTINTO ------------------*/
	section .contenedor .txtIntro {
		margin-left:0;
		width:100%;
	}
/* ------------- INPUT ID ------------------*/	
	.centrarTablas .ID {
		display:block;
		width:70%;
		margin:0 auto;
		margin-bottom:10px;
	}
	
	

/* ------------- MATE ------------------*/	
	#mate {
		position:fixed;
		top:0;
	}
/* ------------- LOGIN ------------------*/	
	#mate #login{
		width:90%;
		height:450px;
		margin:0 auto;
		margin-top:20px;
	}
	
	#login #centrarLogin h3,h4{
		margin-top:30px;
		padding:0 2px;
	}
	
	#login #centrarLogin span{
		right:10%;
		top:10px;
	}
	
	#centrarLogin img {
		margin-top:5px;
	}
	
	#centrarLogin form label{
		width:80%;
	}
	#centrarLogin form input.form-control {
		height:45px;
	}
}

/*	 TERMINA RESPONSIVE
	================================================================================ */