@charset "UTF-8";
/* CSS Document *
ADMINISTRADOR DE CONTENIDOS - PLANTILLA OFICIAL
DIRECCIÓN DE TECNOLOGÍAS - MUNICIPIO DE LEÓN, GUANAJUATO
NAVIDAD EN TU PARQUE
-----------------------------------------------------------*/

html {
	box-sizing: border-box;}


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


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

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Bold.eot');
    src: url('font/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Bold.woff2') format('woff2'),
        url('font/Poppins-Bold.woff') format('woff'),
        url('font/Poppins-Bold.svg#Poppins-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;}

@font-face {
    font-family: 'Poppins';
    src: url('font/Poppins-Thin.eot');
    src: url('font/Poppins-Thin.eot?#iefix') format('embedded-opentype'),
        url('font/Poppins-Thin.woff2') format('woff2'),
        url('font/Poppins-Thin.woff') format('woff'),
        url('font/Poppins-Thin.svg#Poppins-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;}

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

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'stroke7pixeden';
	src:url('font/stroke7pixeden.eot?u58ytb');
	src:url('font/stroke7pixeden.eot?#iefixu58ytb') format('embedded-opentype'),
		url('font/stroke7pixeden.woff?u58ytb') format('woff'),
		url('font/stroke7pixeden.ttf?u58ytb') format('truetype'),
		url('font/stroke7pixeden.svg?u58ytb#stroke7pixeden') format('svg');}

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

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

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

body {
	margin: 10px;
	padding:0px 50px; 
	color:#888888;
	font-family: 'Poppins';
	font-weight: 100;
	background: #f2f7f9 url("img/back.png") 0 0  no-repeat;
	background-position:top left;	
	background-size:96%;
	font-size:16px;}

main#content {
	margin:0 auto;
	width:90%;
	max-width: 1260px;
	padding:10px 0px 20px 0px;}

#encabezado{
	background: #0194fe;
	padding: 15px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;}

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

.conten-imagen-social{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	margin:10px 0px;
	text-align: center;}

.dato-identidad{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	text-align: left;
	margin-bottom: 5px;
	margin-right: 10px;}	

.logo{
	float: left;
	width:280px;
	margin-right:5px;}

.logo-b{
	float: left;
	width: 180px;
	height: 70px;
	margin-right:5px;}

.socialmedia{
	padding: 10px;}

a.facebook{
	float: right;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/facebook.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:10px;}

a:hover.facebook{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/facebook-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 35px;} 

a.x{
	float: right;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/x.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:10px;}

a:hover.x{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/x-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:30px 30px;} 

a.instagram{
	float:right;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/instagram.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:10px;}

a:hover.instagram{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/instagram-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 350px;} 

a.tiktok{
	float: right;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/tiktok.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:10px;}

a:hover.tiktok{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/tiktok-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 350px;} 

a.youtube{
	float: right;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:url("img/youtube.svg") 0 0  no-repeat;
	background-position:center;
	background-size:35px 35px;
	margin-bottom: 10px;
	margin-right:10px;}

a:hover.youtube{
    background-position: -35px 0;
	text-decoration:none;
    background:url("img/youtube-roll.svg") 0 0 no-repeat;
	background-position:center;	
	background-size:35px 350px;} 

#parque{
	margin-bottom: 20px;}

.banner{
	width: 100%;}

#elementos{
	width: 75%;
	position: absolute;
	margin-top: -160px;}


.mod-element-b{
	float:right;
	width:40%;
	margin-right: 10px;
	text-align: right;}

.adorno-b{
	width:40%;}

.txt-intro{
	padding:100px 15px 15px 15px;
	margin-top: 260px;
	margin: 0 auto;
	width: 70%;}

.txt-intro h2{
	color:#615d50;
	font-size:20px;
	text-align: center;
	padding: 10px 10px;
	margin:20px 0px;}

#caja-busqueda{
	margin: 0 auto;
	width:65%;
	height:auto;
	padding:35px 10px;
	border:1px solid #ccc;
	border-radius: 5px;}

.input-buscar{
	width:98%;
	background-image: url('img/globos.png');
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size:45px;
	display: flex;
	align-items: center;
	padding:10px 0px 10px 65px;
	height:75px;
	border: 0px;
	margin:0 auto; }

.input-buscar input { 
	width:99%;
	font-size: 16px;
	background: transparent;
	border: none;
	font-family: 'Poppins' !important}

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

.input-buscar input::placeholder {
	color:#888;}

.input-lista {
	width:100%;
	padding:0px;
	height:50px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 0px;
	border-radius: 0px;
	margin:0 auto;}

.input-lista select{
	background: transparent;
	width: 100%;
	height:50px;
	color:#888;
	font-size: 16px;
	padding:5px;
	font-family: 'Poppins';
	border:0px; }

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

.boton-buscar{
	width: 200px;
	height:50px;
	border:0px;
	border-radius:5px;
    background:#005eb8;
	font-size: 16px;
	font-family: 'Poppins';
	font-weight: 900;
	color: #fff;
	margin-top: 15px;}

.boton-buscar:hover{
	cursor: pointer;}

#paginacion{
	margin: 0 auto;
    width:95%;
    height: 30px;
    padding: 25px 15px 45px 15px;}

a.bot-pag-next{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:#acc897 url("img/flecha.svg") 0 0  no-repeat;
	background-position: center;
	background-size: 25px 25px;
	line-height:30px;
	margin:7px;
	border-radius:3px;}

a:hover.bot-pag-next{
    background-position: -35px 0;
	text-decoration:none;
    background:#e6af60 url("img/flecha-roll.svg") 0 0 no-repeat;
	background-position: center;
	background-size: 25px 25px;} 		

a.bot-pag-back{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:#acc897 url("img/flecha-bis.svg") 0 0  no-repeat;
	background-position: center;
	background-size: 25px 25px;	
	border-radius:3px;
	margin:7px;}

a:hover.bot-pag-back{
    background-position: -35px 0;
	text-decoration:none;
    background:#ffc000 url("img/flecha-bis-roll.svg") 0 0 no-repeat;
	background-position: center;
	background-size: 25px 25px;} 		

a.bot-pag{
	float: left;
    display: block;
    width:35px;
    height:35px;
	line-height:35px;
	font-size: 14px;
	font-family: 'Poppins';
	font-weight: 300;
	background: #dee0e2;
    text-decoration: none;
	text-align: center;
	color:#005eb8;
    /*background:#;*/
	margin:7px;
	border-radius:3px;}

a:hover.bot-pag{
    background-position: -25px 0;
	text-decoration:none;
	color:#fff;
    background:#0194fe;} 

.bot-pag-activo{
	float: left;
    display: block;
    width:35px;
    height:35px;
	font-family: 'Poppins';
	line-height: 35px;
	font-size: 14px;
    text-align: center;
	color:#fff;
    margin:7px;
	border-radius: 3px;
	background-position: -25px 0;
	text-decoration:none;
    background:#40a155;}

.espacio{
	clear: both;
	padding: 20px;
	margin: 20px 0px 20px 0px;}

/*#contenedor-eventos{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; }	*/

#contenedor-eventos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


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

/*.detalle{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding:10px 5px;}	*/
.mod-info.detalle {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.mod-evento{
	clear: both;
	background:#e2e2e2;
	margin: 5px 5px 15px 0px;
	border-radius: 5px;}

.fecha{
	float: left;
	width:18%;
	height: 210px;
	background: #fff;
	padding: 40px 30px 20px 30px;
	text-align: center;
	color:#0194fe;
	font-size: 22px;
	border-radius: 5px;
	font-weight: 900;
	margin-right: 10px;}

.info-detalle{
	float: left; 
	width: 75%;
	font-weight: 500;
	color:#888;
	padding: 20px 5px 20px 5px}

.info-detalle a{
	color:#888;
	text-decoration: none;}

.info-detalle a:hover{
	color:#005eb8;
	text-decoration: none;}

.nota{
	font-weight: 900;}

.vineta{
	width: 60px;
	margin: 10px 0px;}

.hora{
	width:78%;
	background: #f24848;
	color:#fff;
	padding: 5px;
	margin: 10px 0px;
	border-radius: 5px;}

.categoria{
	font-weight: 900;
	font-style: italic;}

.ico-categoria{
	vertical-align: middle;
	margin-right: 10px;
	width: 30px;}

#adorno-principal{
	margin:10px 0px 0px 0px;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	padding:115px 0px 20px 20px;
	background:url("img/ornamento-principal.svg") 0 0  no-repeat;
	background-position:top center;	
	background-size:50%;}

footer{
	clear: both;
	margin:75px 0px 10px 0px;
	padding: 20px 10px;
	background: #40a155;
	border-radius: 5px;}

.logo-footer{
	width: 90%;
	text-align:right}

.pie{
	width:55%;
	margin: 10px;}

.txt{
	color:#fff;
	font-weight: 500;
	line-height: 20px;
	font-size: 16px;
	line-height: 22px;
	padding: 10px;}

.mod-evento-detalle{
	clear: both;
	height: 370px;
	background:#e2e2e2;
	margin: 5px 5px 15px 0px;
	border-radius: 5px;}

.fecha-detalle{
	float: left;
	width:18%;
	height: 370px;
	background: #fff;
	padding: 40px 30px 20px 30px;
	text-align: center;
	color:#0194fe;
	font-size: 22px;
	border-radius: 5px;
	font-weight: 900;
	margin-right: 15px;}

.info-detalle-int{
	float: left; 
	width: 48%;
	font-weight: 500;
	color:#888;
	padding: 20px 5px 20px 5px}

.foto{
	float: left;
	width: 32%;
	padding: 20px;
	text-align: center;}

.imagen{
	width: 100%;}

.ruta{
	padding: 15px;
	text-align: right;
	font-weight: 400;
	color:#888;
	line-height: 20px;}

.ruta a{
	color: #888;
	font-weight: 900;
	text-decoration: none;}

.ruta a:hover{
	color: #f24848;
	font-weight: 900;
	text-decoration: none;}

.ico-ruta{
	width: 35px;
	vertical-align: middle;
	margin-right: 10px;}

a.borrar{
	float:right;
	width:50px;
	height: 50px;
	line-height: 45px;
    display: block;
    text-decoration: none;
	background:#8dcce9 url("img/borrar.svg") no-repeat center;
	background-size:30px;
	border-radius: 5px;
	margin:16px 0px 0px 10px;}

a:hover.borrar{
    background-position: -120px 0;
	text-decoration:none;
	background:#dee0e2 url("img/borrar-roll.svg") no-repeat center;
	background-size:30px;}

.registros{
	border-bottom: 1px solid #ccc;
	padding: 10px;
	width: 270px;
}


/*--------------------------------------------
			MEDIA QUERY
----------------------------------------------*/
@media (max-width:1255px) {
	.logo{ width: 220px;}

	.logo-b{ width:150px; height: 50px;}	
	
	#elementos{width:80%; margin-top: -90px;}
	
	
}

@media (max-width:1050px) {

	body {padding:25px 0px; background-size: 75%;}	
	
	main#content { width:100%; padding:15px 0px 0px 0px;}
	
	.logo{ width: 180px;}

	.logo-b{ width:160px;}	

	a.facebook{ width:25px; height:25px; background-size:25px 25px; margin-right:5px;}
	
	a:hover.facebook{ background-size:25px 25px;} 
	
	a.x{ width:25px; height:25px; background-size:25px 25px; margin-right:5px;}
	
	a:hover.x{ background-size:25px 25px;} 
	
	a.instagram{ width:25px; height:25px; background-size:25px 25px; margin-right:5px;}
	
	a:hover.instagram{ background-size:25px 25px;} 
	
	a.tiktok{ width:25px; height:25px; background-size:25px 25px; margin-right:5px;}	
	
	a:hover.tiktok{ background-size:25px 25px;} 
	
	a.youtube{ width:25px; height:25px; background-size:25px 25px; margin-right:5px;}
	
	a:hover.youtube{ background-size:25px 25px;} 	
	
	#elementos{width:90%;}
			
	.adorno-b{width:50%; margin-left: 200px;}	
	
	.fecha{font-size:16px; padding: 40px 20px 20px 20px;}
	
	.vineta{ width: 40px;}
	
	.info-detalle{ font-size: 14px; line-height: 20px;}
	
	#adorno-principal{ padding:148px 0px 0px 20px; background-size: 70%;}
	
	.txt{ font-size: 14px; line-height: 16px;}
	
	.logo-footer{margin: 0 auto; text-align: center;}
	
	.fecha-detalle{font-size:16px; padding: 40px 20px 20px 20px;}
		
	.info-detalle-int{ font-size: 14px; line-height: 20px;}
	
	.ruta{font-size: 14px;line-height:16px;}
	
	.ico-ruta{width: 25px;}
	
	
	
}

@media (max-width:812px) {
	#encabezado{ padding: 5px;}	

	#contenedor-identidad{-webkit-flex-direction: column; width: 100%; }	

	.logo{ width:225px;}	
	
	.logo-b{ width: 200px;}	
	
	#elementos{width:80%; margin-top: -50px;}
	
	.adorno-b{width:58%; margin-left: 180px;}
	
	.txt-intro{ width: 95%; padding:70px 15px 15px 15px;}

	.txt-intro h2{ font-size:16px; margin:10px 0px;}	
	
	#caja-busqueda{ width:90%;}
	
	#contenedor-eventos{-webkit-flex-direction: column; width: 100%; }	
	
	#adorno-principal{ padding:55px 20px; background-size: 70%;}

	.hora{ width:90%;}
	
	.txt{ margin: 0 auto; width: 90%; text-align: center;}
	
	.mod-evento-detalle{ height:650px; }
	
	.fecha-detalle{ height: 650px;}	
	
	.info-detalle-int{ width:78%;}

	.foto{ float:none; width: 65%; margin: 0 auto;}	

	 .mod-info.detalle {grid-template-columns: 1fr;  }
	}

@media (max-width:525px) {
	.logo{ width:205px;}	
	
	.logo-b{ width:160px;}	
	
	#elementos{width:80%; margin-top:70px;}
		
	.adorno-b{ width:70%; margin: -150px 0px 0px 100px}
	
	.info-detalle-int{ width:70%;}
	
}

@media (max-width:430px) {
	.logo{ width:210px;}	
	
	.logo-b{ width:130px;}	
	
	#elementos{width:72%;}
	
}