@charset "UTF-8";
/* CSS Document 
INICIO DE SESIÓN
DIRECCIÓN GENERAL DE TECNOLOGÍAS DE LA INFORMACIÓN Y GOBIERNO DIGITAL
*/

html {
	box-sizing: border-box;}

*, *:before, *:after {
  box-sizing: inherit;}

body {
	font-size: 13px;	
	padding:10px 10px;
	color:#fff;
	font-family: 'Avenir';
	background:url("https://imagenes.leon.gob.mx/sistema-info-v2.jpg") bottom;
	background-repeat:no-repeat;
	background-color:#0094ff;
	background-size:cover;
	background-position:center;
    background-position-y: initial; 	
	overflow-x:hidden;}

@font-face {
    font-family: 'Avenir';
    src: url('font/Avenir-Light.eot');
    src: url('font/Avenir-Light.eot?#iefix') format('embedded-opentype'),
        url('font/Avenir-Light.woff') format('woff'),
        url('font/Avenir-Light.ttf') format('truetype'),
        url('font/Avenir-Light.svg#Avenir-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Avenir';
    src: url('font/Avenir-Medium.eot');
    src: url('font/Avenir-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/Avenir-Medium.woff') format('woff'),
        url('font/Avenir-Medium.ttf') format('truetype'),
        url('font/Avenir-Medium.svg#Avenir-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Avenir';
    src: url('font/Avenir-Black.eot');
    src: url('font/Avenir-Black.eot?#iefix') format('embedded-opentype'),
        url('font/Avenir-Black.woff') format('woff'),
        url('font/Avenir-Black.ttf') format('truetype'),
        url('font/Avenir-Black.svg#Avenir-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;}


#page{
	margin: 0 auto;
	width: 90%;
	max-width: 1368px;
	padding:10px 10px 10px 10px; }

#escudo{
	margin: 0 auto;
	width: 100px;
	text-align: center;
	padding: 10px 10px;}

.logotipo{
	width:100%;
	margin-bottom: 10px;}

h1{
	text-transform: uppercase;
	color:#fff;
	font-size:25px;
	font-weight: 900;
	line-height: 30px;
	text-align: center;
	margin: 10px 0px 5px 0px;}

h2{
	text-transform: uppercase;	
	color:#fff;
	font-size: 25px;
	font-weight: 300;
	line-height: 25px;
	text-align: center;
	margin: 0px 0px 20px 0px;}

h3{
	text-transform: uppercase;	
	color:#fff;
	font-size: 20px;
	font-weight: 900;
	line-height: 25px;
	text-align: center;
	margin: 0px 0px 20px 0px;}

#caja{
	margin: 0 auto;
	padding:50px 5px 50px 5px;
	width: 60%;
	background: rgba(23, 107, 251, 0.5);
	border-radius: 10px;}

#caja-bienvenida{
	margin: 0 auto;
	padding:50px 5px 50px 5px;
	width: 85%;
	background: rgba(23, 107, 251, 0.5);
	border-radius: 10px;}

.input-usuario {
	margin: 0 auto;
	width:80%;
	background-image: url('img/usuario.svg');
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size:35px;
	display: flex;
	align-items: center;
	padding:20px 0px 20px 45px;
	height: 50px;
	border-bottom: 1px solid #fff;}

.input-usuario input { 
	width:90%;
	background:transparent;
	color:#fff;
	font-weight: 500;
	font-size: 16px;
	border: none;}

.input-usuario input:focus { 
	outline: none;}

.input-usuario input::placeholder {
	font-weight: 500;
	color:#fff !important;}

.input-password {
	margin: 0 auto;
	width:80%;
	background-image: url('img/password.svg');
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size:35px;
	display: flex;
	align-items: center;
	padding:20px 0px 20px 45px;
	height: 50px;
	border-bottom: 1px solid #fff;}

.input-password input { 
	width:90%;
	background:transparent;
	color:#fff;
	font-weight: 500;
	font-size: 16px;
	border: none;}

.input-password input:focus { 
	outline: none;}

.input-password input::placeholder {
	font-weight: 500;
	color:#fff !important;}

.input-direccion {
	margin: 0 auto;
	width:38%;
	background-image: url('img/direccion.svg');
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size:35px;
	display: flex;
	align-items: center;
	padding:20px 0px 20px 45px;
	height: 50px;
	border-bottom: 1px solid #fff;}

.input-direccion input { 
	width:90%;
	background:transparent;
	color:#fff;
	font-weight: 500;
	font-size: 16px;
	border: none;}

.input-direccion input:focus { 
	outline: none;}

.input-direccion input::placeholder {
	font-weight: 700;
	color:#fff !important;}

.centrar-boton{
	margin: 0 auto;
	width: 180px;
	padding: 20px 0px;}

.boton-iniciar{
	width: 180px;
	height:50px;
	border:0px;
	border-radius: 5px;
    background:#3e6be8;
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	margin-top: 10px;}

.boton-iniciar:hover{
	background: #ffc000;
	cursor: pointer;}

#contenedor-botones{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;}	

.mod-boton{
	display: -webkit-flex;
	-webkit-flex-direction: column; }

.info-red{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding-bottom: 25px;
	margin-left:30px;}	

a.boton-gmail{
	margin: 0 auto;
	display: block;
	width:180px;
	height:55px;
	line-height: 16px;
	border-radius: 5px;
    background:#ffffff url("img/google.svg") 0 0  no-repeat;
	background-position:left;
	background-size:45px;
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	color: #3e6be8;
	padding:10px 10px 10px 50px;}

a:hover.boton-gmail{
    background-position: -30px 0;
	text-decoration:none;
	color:#3e6be8;
    background:#bfd0f7 url("img/google.svg") 0 0 no-repeat;
	background-position:left;	
	background-size:45px;} 

a.boton-facebook{
	margin: 0 auto;
	display: block;
	width:180px;
	height:55px;
	line-height: 16px;
	border-radius: 5px;
    background:#ffffff url("img/facebook.svg") 0 0  no-repeat;
	background-position:left;
	background-size:45px;
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	color: #3e6be8;
	padding:10px 10px 10px 50px;}

a:hover.boton-facebook{
    background-position: -30px 0;
	text-decoration:none;
	color:#3e6be8;
    background:#bfd0f7 url("img/facebook.svg") 0 0 no-repeat;
	background-position:left;	
	background-size:45px;} 

a.boton-recuperar{
	margin: 0 auto;
	display: block;
	width:275px;
	height:40px;
	line-height: 20px;
    background:url("img/recuperar.svg") 0 0  no-repeat;
	background-position:left;
	background-size:35px;
	text-align: left;
	text-decoration: none;
	font-size: 16px;
	font-weight: 900;
	color: #fff;
	padding:10px 10px 10px 50px;}

a:hover.boton-recuperar{
    background-position: -30px 0;
	text-decoration:none;
	color:#ffc000;
    background:url("img/recuperar-roll.svg") 0 0 no-repeat;
	background-position:left;	
	background-size:35px;} 

footer{
	margin: 0 auto;
	padding: 20px;
	width: 60%;}

#contenedor-logos{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;}	

.mod-img{
	display: -webkit-flex;
	-webkit-flex-direction: column; }

.info-entidad{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	margin-right:10px;}	

.entidad{
	text-align: center;
	padding: 10px;
	width: 82%;
	margin: 0 auto;}

.detalle{
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;}

.logo{
	width: 70%;
	margin:0px 0px 5px 0px}

.txt{
	padding: 20px;
	text-align: center;
	margin: 0 auto;
	width: 95%;
	font-size: 18px;
	line-height:24px;}

.nota{
	font-weight: 900;}

.espacio{
	padding:10px 0px 25px 0px;}

.error{
	margin: 0 auto;
	width: 80%;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 5px;	
	padding: 20px;
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 900;
	line-height: 18px;
	color:#ba3232;}

/*--------------------------------------------
			MEDIA QUERY
----------------------------------------------*/
@media (max-width:1170px) {
	
	#page{width: 95%; padding: 0px;}
	
	#escudo{width:80px;}	
	
	#caja{width: 98%}
	
	#caja-bienvenida{ padding:35px 5px 35px 5px; width:90%;}

	h1{font-size:20px; line-height: 23px;}

	h2{font-size: 20px; line-height: 23px;}

	h3{font-size: 18px; line-height: 22px;}

	.boton-iniciar{ font-size: 13px;}	

	footer{ padding: 10px; width: 98%;}	
	
	.txt{padding:10px; width: 98%; font-size: 16px; line-height:22px;}
	
	.input-direccion {width:50%; }
	
}

@media (max-width: 668px) {
	#page{width: 99%;}

	h1{font-size:16px; line-height: 18px;}

	h2{font-size: 16px; line-height: 18px;}

	h3{font-size: 14px; line-height:16px;}
	
	#caja{width:98%}	
	
	#caja-bienvenida{ width:98%;}
	
	#contenedor-logos {-webkit-flex-direction: column; width: 100%; }		

	.entidad{width: 70%;}	
	
	#contenedor-botones{-webkit-flex-direction: column; width: 100%; }	

	.info-red{ margin-left:0px;}		
	
	.input-direccion {width:70%; }	

	.input-direccion input::placeholder { font-size: 13px;}	
}

@media (max-width: 414px) {
	.entidad{width:100%;}	
	
	.detalle{ font-size: 14px; line-height: 16px;}	
	
	.logo{width:60%;}	

	a.boton-recuperar{width:251px; height:40px; line-height: 16px; font-size: 14px;}	
	
	#caja-bienvenida{ width:99%;}
	
	.txt{width: 99%; font-size: 14px; line-height:18px;}	
	
	.input-direccion {width:82%; }	
	
}