/*
==================================================
DIRECCIÓN DE TECNOLOGÍAS DE LA INFORMACIÓN Y
GOBIERNO DIGITAL - MUNICIPIO DE LÉON GTO.
==================================================
 */

html {
	box-sizing: border-box;}

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

body { 
	background-color:#f9f6ef; 
	font-family: 'Poppins'; 
	font-weight: normal;}

@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.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-Black.eot');
    src: url('../font/Poppins-Black.eot?#iefix') format('embedded-opentype'),
        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-Light.eot');
    src: url('../font/Poppins-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/Poppins-Light.woff') format('woff'),
        url('../font/Poppins-Light.svg#Poppins-Light') format('svg');
    font-weight: 300;
    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.woff') format('woff'),
        url('../font/Poppins-Regular.svg#Poppins-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;}

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

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


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, header, hgroup, section {
	display: block;}

html, body {
	margin:0;
	padding:0;
	height:100%;}

blockquote, q {
	quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;}

table {
	border-collapse: collapse;
	border-spacing: 0;}

.clearfix:after {
  content: "";
  display: table;
  clear: both;}

.container {
  max-width: 1366px;
  margin:0 auto;
/*	
	min-height:100%;
	position:relative;*/}

/*.preload {
	width:100%;
	height:100%;
	position:fixed;
	background:rgba(0,0,0,0.8);
}

/* mulai dari bawah ini */

.wrapper {
	padding:0 20px;}

header{
	width: 100%;
	padding:10px 0px;}

header {
	height:160px;
	background:#fff;
	padding-top: 10px;
	box-shadow: 5px 5px 30px -10px rgba(0, 0, 0, 0.3);}

.identidad{
	margin: 0 auto;
	padding: 5px;
	width: 240px;
	text-align: center;}

.logo{ width: 230px; margin:0px 0px;}

/*==================================================
				SOCIAL MEDIA
====================================================
*/

#redes{
	clear: both;
	height: 40px;
	margin: 10px 0px;
	padding:0px 15px 0px 15px;}

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

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

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

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

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

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

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

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

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

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

a.bot-site{
	float: right;
    display: block;
    width:140px;
    height:50px;
	margin-right: 10px;
    background:url("../img/escudo.svg") 0 0  no-repeat;
	background-position:left;
	background-size:35px 35px;
	line-height:50px;
    text-decoration: none;
	text-align: center;
	color:#005ebb;
	padding-left: 35px;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 1px;}

a:hover.bot-site{
    background-position: -100px 0;
    background:url("../img/escudo-roll.svg") 0 0  no-repeat;
	background-position:left;
	background-size:35px 35px;
	text-decoration:none;
	color:#c5a862} 

/*==================================================
				SLIDE PRINCIPAL
====================================================
*/

.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
	z-index: 1;
  background-color: #e2e2e2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
	z-index: 0;	
}

.slider {
  position: relative;
  width: 9999px;}

.slider:before,
.slider:after {
  display: table;
  content: ' ';}

.slider:after {
  clear: both;}

.slider__item {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  height: 100%;}

.slider__item img {
  display: block;
  max-width: 100%;
  height: auto;}

.slider__switch span {
  color: #fff;
  display: block;
  width: 32px;
  height: 32px;}

/* Arrows */
.slider__switch {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  padding: 10px 5px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
  border-radius: 1px;
  background: #000;
  opacity: .3;
  transition: opacity .15s ease;
  fill: #fff;}

.slider__switch--prev {
  left: 10px;}

.slider__switch--next {
  right: 10px;}

.slider__switch:hover {
  opacity: .85;}

.slider__switch[disabled] {
  visibility: hidden;
  opacity: 0;}

.slider__caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: block;
  max-width: 500px;
  padding: 10px;
  color: #fff;
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 20px 10px rgba(0,0,0,.4);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */}

.slider__caption[disabled] {
  opacity: 0;
  visibility: hidden;}

.slider-nav {
  line-height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  z-index: 99999;
  filter: alpha(opacity=90); /* ie8 */}

.slider-nav__control {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 3px;
  -webkit-transition: background .5s ease;
     -moz-transition: background .5s ease;
       -o-transition: background .5s ease;
          transition: background .5s ease;
  border: 2px solid #fff;
  border-radius: 50%;
  background: transparent;}

.slider-nav__control.is-active {
  width: 12px;
  height: 12px;
  background: #fff;}

.slider.has-touch {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor:    -moz-grabbing;}




/*==================================================
				BIENVENIDA
====================================================
*/

#botones{
	width: 85%;
	margin-top:-210px;}

a.bot-leon{
	float: left;
    display: block;
    width:20%;
	height: 130px;
    text-decoration: none;
	color: #fff;
	text-align: right;
	font-size: 50px;
	line-height: 100px;
	font-family: 'Fairyland';
    background:url("../img/450.jpg") top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-position-y: initial;	
	padding:20px 5px 20px 5px;}

a:hover.bot-leon{
    background-position: -330px 0;
	text-decoration:none;
	color:#fff;
    background:url("../img/450-roll.jpg") top center;
	background-position:center; 
	background-repeat:no-repeat;
	background-size:cover;
	background-position-y: initial;	} 

a.bot-agenda{
	float: left;
    display: block;
    width:20%;
	height: 130px;
    text-decoration: none;
	color: #fff;
	text-align: right;
	font-size: 50px;
	line-height: 100px;
	font-family: 'Fairyland';
    background:url("../img/agenda.jpg") top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-position-y: initial;	
	padding:20px 5px 20px 5px;}

a:hover.bot-agenda{
    background-position: -330px 0;
	text-decoration:none;
	color:#fff;
    background:url("../img/agenda-roll.jpg") top center;
	background-position:center; 
	background-repeat:no-repeat;
	background-size:cover;
	background-position-y: initial;	} 

a.bot-historia{
	float: left;
    display: block;
    width:20%;
	height: 130px;
    text-decoration: none;
	color: #fff;
	text-align: right;
	font-size: 50px;
	line-height: 100px;
	font-family: 'Fairyland';
    background:url("../img/historia.jpg") top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-position-y: initial;	
	padding:20px 5px 20px 5px;}

a:hover.bot-historia{
    background-position: -330px 0;
	text-decoration:none;
	color:#fff;
    background:url("../img/historia-roll.jpg") top center;
	background-position:center; 
	background-repeat:no-repeat;
	background-size:cover;
	background-position-y: initial;	} 

#bienvenida{
	padding:210px 35px 40px 35px;
	background:url("../img/back-bienvenida.jpg") top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-position-y: initial;}

#bienvenida h1{
	clear: both;
	font-family: 'Baskerville';
	font-weight: normal;
	font-style: italic;
	color:#c5a862;
	font-size:80px;
	line-height: 45px;
	margin:220px 10px 50px 10px;
	text-align: center;}

.txt-450{
	margin: 0 auto;
	width: 70%;
	color:#fff;
	font-size: 18px;
	text-align: justify;
	padding: 10px;
	font-weight: 300;
	line-height: 24px;}

.txt-450 span, .txt-450 strong{
	font-weight: 900;}

/*==================================================
				AGENDA DE ACTIVIDADES
====================================================
*/
#agenda{
	background: #fff;
	padding: 60px 35px;}

#agenda h1{
	color:#c5a862;
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size:50px;
	line-height: 70px;}

.evento{
	height: 200px;
	padding: 15px;
	color:#888888;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 20px;}

.img-evento{
	float: left;
	width:30%;
	margin-right:10px;}

.fecha-evento{
	float: left;
	width: 160px;
	padding: 5px;
	height: 40px;
	margin-bottom: 10px;
	color:#005ebb}

.disciplina{
	float: left;
	width: 30%;
	padding: 5px;
	height: 40px;
	margin-bottom: 10px;
	color:#c5a862;}

.ico{
	float: left;
	width: 35px;
	margin-right:5px;}

.info{
	float: left;
	width: 60%;
	padding:5px 10px;}

.info b{
	font-weight: 900;}

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

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

a.agenda-actividades{
	margin: 0 auto;
    display: block;
    width:285px;
    height:70px;
    text-decoration: none;
	color: #888;
	font-weight: 900;
	font-size: 18px;
	line-height:24px;
    background:url("../img/calendario.svg") 0 0  no-repeat;
	background-position:left;
	background-size: 60px 60px;
	padding:10px 0px 0px 70px;
	border-radius: 10px;
	border: 1px solid #c5a862;}

a:hover.agenda-actividades{
    background-position: -330px 0;
	text-decoration:none;
	color:#c5a862;
    background:url("../img/calendario.svg") 0 0 no-repeat;
	background-position:left;	
	background-size:60px 60px;} 

.detalle-agenda{
	font-size: 20px;
	font-weight: normal;
	color:#c5a862;
	font-family: 'Baskerville';}

/*==================================================
				HISTORIA
====================================================
*/
#historia{
	padding:220px 35px 60px 35px;
	background:#faf8f5 url("../img/back-tiempo.png") top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-position-y: initial;}

#historia h1{
	text-align: center;
	color:#fff;
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size:80px;
	line-height: 80px;}

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

.conten-tiempo{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	margin:20px 0px;
	text-align: center;}

.dato-info{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding: 5px;
	margin-bottom: 5px;
	margin-right: 10px;
	text-align: center;}	

.dato-info h2{
	margin: 5px 0px;
	color:#c5a862;
	text-align: center;
	font-size: 30px;
	font-family: 'Baskerville';
	font-style: italic;
	font-weight: normal;}

.dato-info a{
	text-decoration: none;
	color:#888;
	font-size: 18px;
	line-height: 24px;}
		
.dato-info a:hover{
	color:#c5a862;}

.foto-periodo{
	width: 85%;}

/*==================================================
				PERSONAJES ILUSTRES
====================================================
*/
#pesonajes{
	padding:30px 10px 90px 10px;
	background:#faf8f5 url("../img/leon.png") top left;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left;
	background-position-y: initial;}

#pesonajes h1{
	text-align: center;
	color:#c5a862;
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size:50px;
	line-height: 55px;}

.personaje{
	width: 75%;
	height: 200px;
	padding: 20px 10px;
	margin: 0 auto;}

.personaje a{
	text-decoration: none;
	color:#888;
	line-height: 24px;
	font-size: 18px;}

.personaje a:hover{
	color:#c5a862;}

.personaje span{
	font-style: italic;}

.selfie{
	width: 160px;
	float: left;
	margin-right: 20px;
	margin-bottom:30px;}

.personaje h3{
	color:#888;
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size:28px;
	margin: 10px 0px;
	line-height:30px;}

a.personajes-historicos{
	margin: 0 auto;
    display: block;
    width:280px;
    height:70px;
    text-decoration: none;
	color: #888;
	font-weight: 900;
	font-size: 18px;
	line-height:24px;
    background:url("../img/peronajes.svg") 0 0  no-repeat;
	background-position:left;
	background-size: 60px 60px;
	padding:10px 0px 0px 70px;
	border-radius: 10px;
	border: 1px solid #c5a862;}

a:hover.personajes-historicos{
    background-position: -330px 0;
	text-decoration:none;
	color:#c5a862;
    background:url("../img/peronajes.svg") 0 0 no-repeat;
	background-position:left;	
	background-size:60px 60px;} 

/*==================================================
				EL EDITORIAL
====================================================
*/
#editorial{
	padding: 40px 30px 40px 30px;
	background: #ffffff;}

#editorial h1{
	text-align: center;
	color:#c5a862;
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size:50px;
	line-height:55px;}

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

.conten-articulo{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	margin:20px 0px;}

.dato-revista{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding: 5px;
	margin-bottom: 5px;
	margin-right: 10px;}	

.info-editorial{
	margin: 0 auto;
	width: 85%;
	padding: 10px;}

.info-editorial a{
	text-align: left;
	text-decoration: none;
	color:#888;
	font-size: 16px;
	line-height: 20px;}

.info-editorial a:hover{
	text-decoration: none;
	color:#005ebb; }

.etiqueta{
	clear: both;
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size: 25px;
	line-height: 27px;
	text-align: left;}

.img-editorial{
	width: 100%;
	margin: 10px 0px;}

.fecha-art{
	float: left;
	width:135px;
	padding: 5px;
	height: 40px;
	text-align: left;
	font-size: 14px;
	line-height: 28px;
	margin-bottom: 10px;
	color:#005ebb}

.autor{
	float: left;
	width: 47%;
	padding: 5px;
	height: 40px;
	text-align: left;
	font-size: 14px;
	line-height: 28px;
	margin-bottom: 10px;
	color:#005ebb;}

.ico-art{
	float: left;
	width: 25px;
	margin-right:5px;}

a.el-editorial{
	margin: 0 auto;
    display: block;
    width:165px;
    height:70px;
    text-decoration: none;
	color: #c5a862;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size: 18px;
	line-height:70px;
    background:url("../img/editorial.svg") 0 0  no-repeat;
	background-position:left;
	background-size: 60px 60px;
	padding:0px 0px 0px 70px;
	border-radius: 10px;
	border: 1px solid #c5a862;}

a:hover.el-editorial{
    background-position: -330px 0;
	text-decoration:none;
	color:#005ebb;
    background:url("../img/editorial-roll.svg") 0 0 no-repeat;
	background-position:left;	
	background-size:60px 60px;
	border: 1px solid #005ebb;} 

.txt-editorial{
	margin: 0 auto;
	width: 70%;
	color:#888;
	font-size: 18px;
	text-align: justify;
	padding: 10px;
	font-weight: 300;
	line-height: 24px;}

/*==================================================
				FOOTER
====================================================
*/
footer{
	display:block;
	padding:40px 20px 20px 20px;
	background:#005ebb;}

.info-pagina {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-pagina > div {
	margin: 0px; }

.box-identidad {
	flex-basis:230px;
	flex-grow: 1;
	order: 1;
	text-align: center;
	padding: 20px;}

.box-menu {
	flex-basis:750px;
	flex-grow: 3; 
	order: 2;}

.leon{
	width:220px;
	margin-bottom: 20px;}

.box-menu  ul {
	width:100%;
	height:30px;
	margin:5px 0px;
	padding: 5px;
	text-transform: uppercase;}

.box-menu li {
	list-style: none; 
	float: left;
	padding:5px; }
	
.box-menu  li a{
	color: #fff;
	font-size: 16px;
	line-height:16px;
	height: 16px;
	font-weight: 100;
	text-decoration: none;
	outline: none; }

.box-menu li a:hover {
	text-decoration:none;
	color:#c5a862; }
/*==================================================
				COPY
====================================================
*/
#copy{
	height:80px;
	line-height:30px;
	background: #c5a862;
	padding: 20px;
	color:#fff;
	font-weight: 100;}

.nota-copy{
	font-weight: 900;}

.redes{
	float: right;
	width: 170px;
	height: 30px;
	margin: 10px;}

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------
			RUTA DE NAVEGACIÓN
----------------------------------------------*/
.espacio{
	margin: 30px 0px;}

.ruta{
	clear:both;
	padding: 20px 20px;
	text-align: right;
	font-size: 16px;
	color:#888;
	line-height: 18px;	}

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

.ruta a:hover{
	color:#0194fe;
	text-decoration: none;}


/*==================================================
				GALERÍA FOTOGRÁFICA
====================================================
*/
#galeria{	
	margin:0 auto;
	width: 95%;
	padding: 90px 15px 250px 15px;
	background: #ede6d9;
	border-radius: 8px;}

#galeria h1{
	font-size: 75px;
	font-family: 'Fairyland';
	font-weight: normal;
	color:#a37a1f;
	margin: 10px 0px 0px 0px;}

.txt-galeria{
	margin: 0 auto;
	width: 70%;
	padding:10px 30px 50px 30px;
	color:#888;
	font-weight: 300;
	font-size: 18px;
	line-height: 25px;}

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

.txt-galeria a:hover{
	color:#005ebb;
	text-decoration: none;}

.ornamento{
	float:left;
	width: 120px;
	margin-bottom: 90px;
	margin-right: 10px;}

#indice-galerias{
	float: left;
	width: 42%;
	height: 190px;
	padding: 10px;
	border-radius: 10px;
	background: #e2ddd0;
	margin: 40px 35px;}

#indice-galerias ul {
	height: 120px;
	margin: 10px 5px 20px 5px;
	padding: 0px;	}

#indice-galerias li {
	list-style: none;
	clear: both;
	padding:0px 0px 5px 0px;}
	
#indice-galerias  li a{
	color: #888;
	font-size: 18px;
	line-height: 24px;
	text-decoration: none;
	outline: none;
	padding:0px 0px 10px 35px;
	background: url("../img/vineta.svg") no-repeat;
	background-size:25px 25px;}

#indice-galerias li a:hover {
	text-decoration:none;
	background: url("../img/vineta-roll.svg") no-repeat;
	color:#0094ff;
	background-size:25px 25px;}

#galeria h2{
	font-size: 35px;
	font-family: 'Baskerville';
	font-weight: normal;
	color:#005ebb;
	letter-spacing: 1px;
	margin: 10px 0px 0px 0px;}

.linea{
	height: 1px;
	margin: 10px 0px;
	background: #005ebb;}

.ilustra{
	vertical-align: middle;
	width: 100px;
	margin-right: 10px;}

/*==================================================
				SECCIÓN EL EDITORIAL
====================================================
*/
#editorial-secc{
	padding: 40px 0px;
	background: #fff;}

.citilla{
	padding: 10px 0px;
	margin-bottom: 20px;
	text-align: center;}

.banner{width: 100%;}

.info-tit-secc{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-tit-secc > div {
	margin: 0px; }

.box-titulo {
	flex-basis:305px;
	flex-grow: 1;
	order: 1;
	text-align: center;
	padding: 20px;}

.box-titulo h1{
	color:#c5a862;
	font-family: 'Baskerville';
	font-style: italic;
	font-weight: normal;
	font-size: 45px;
	line-height: 45px;
	text-align: center;}

.box-descripcion {
	flex-basis:650px;
	flex-grow: 3; 
	order: 2;}

.txt{
	font-size: 18px;
	line-height: 24px;
	color:#888;
	padding: 20px 55px;
	text-align: justify;}

.info-edi-prin{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-edi-prin > div {
	padding: 20px 60px;
	margin: 0px; }

.box-editorial {
	flex-basis:670px;
	flex-grow: 1;
	order: 1;
	text-align: left;
	padding: 20px;}

.box-editorial a{
	text-align: left;
	text-decoration: none;
	color:#888;
	font-size: 16px;
	line-height: 20px;}

.box-editorial a:hover{
	text-decoration: none;
	color:#005ebb; }

.box-editorial-menu {
	flex-basis:380px;
	flex-grow: 3; 
	order: 2;}

.box-editorial-menu a{
	text-align: left;
	text-decoration: none;
	color:#888;
	font-size: 16px;
	line-height:18px;}

.box-editorial-menu a:hover{
	text-decoration: none;
	color:#005ebb; }

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

a.bot-pag-next{
	float: left;
    display: block;
    width:35px;
    height:35px;
    text-decoration: none;
    background:#dee0e2 url("../img/anterior.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:#005ebb url("../img/anterior.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:#dee0e2 url("../img/siguiente.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:#005ebb url("../img/siguiente.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:#888;
    
	margin:7px;
	border-radius:3px;}

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

/*.bot-pag-activo{
	float: left;
    display: block;
    width:25px;
    height:25px;
	line-height: 25px;
	font-size: 13px;
    text-align: center;
	color:#fff;
    margin:5px;
	border-radius: 5px;
	background-position: -25px 0;
	text-decoration:none;
    background:#3c105e;}*/


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

.foto-editorial{
	padding: 20px 0px;
	text-align: center;
	margin-bottom: 20px;}
	

/*==================================================
				DETALLE EDITORIAL
====================================================
*/
.tit-editorial{
	color:#005ebb;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size: 25px;
	line-height: 30px;
	border-left: 1px solid #c5a862;
	padding:20px 20px;}

.info-detalle-editorial{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-detalle-editorial > div {
	padding: 20px 50px;
	margin: 0px; }

.box-txt-editorial {
	flex-basis:500px;
	flex-grow: 3;
	order: 1;
	text-align: justify;
	padding: 10px;
	font-size: 18px;
	line-height: 24px;
	color:#888;}

.box-txt-editorial strong{
	font-weight: 900;}

.box-img-editorial {
	flex-basis:400px;
	flex-grow: 1; 
	order: 2; 
	text-align: center;}

.img-editorial-detalle{
	width:90%;
	margin-bottom: 10px;}

.lista-editorial{
	width:90%;
	background:#f1eae0;
	padding: 15px;
	border-radius: 5px;
	margin: 0 auto;}

.lista-editorial a{
	color:#888;
	text-decoration: none;}

.lista-editorial a:hover{
	color:#005ebb;}

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

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

.info-menu-lista{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding:10px 5px;}	

#galeria-art{
	margin: 0 auto;
	width: 90%;
	border-radius: 5px;
	background: #e4eef4;
	padding: 25px; }

#galeria-art h1{
	color:#0091fe;
	margin: 10px 0px 20px 0px;
	text-align: left;
	font-weight: 600;
	letter-spacing: 1px;
	font-family: 'Baskerville';
	font-style: italic;
	font-weight: normal;
	font-size:30px;
	line-height:32px;}

#mixedSlider { position: relative; }

#mixedSlider .MS-content {
  white-space: nowrap;
  overflow: hidden;
  margin: 20px 5px 20px 5px; }

#mixedSlider .MS-content .item {
	display: inline-block;
	width: 33%;
	height: 100%;
	text-align: center;
	position: relative;
	vertical-align: top;
	overflow: hidden;
	white-space: normal;
	padding:5px;}

#mixedSlider .MS-content .item .imgTitle {  position: relative; }

#mixedSlider .MS-content .item .imgTitle .blogTitle {
	color: #fff;
	margin: 0px;}

#mixedSlider .MS-content .item .imgTitle img {
	height: auto;
	width:70%;}

#mixedSlider .MS-content .item .imgTitle a img {
	border: 0px;  }

#mixedSlider .MS-content .item .imgTitle a:hover img {
	border: 0px;}

#mixedSlider .MS-content .item p {
	color:#fff;
	margin: 0px;
	line-height: 20px;
	 font-size: 14px;}

#mixedSlider .MS-content .item a { color: #fff; text-decoration: none; }

#mixedSlider .MS-content .item a:hover {
	color:#024abb;}

#mixedSlider .MS-controls button {
  position: absolute;
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 50px;
  top: 45px;
  color: rgba(0, 0, 0, 0.4);
  transition: 0.15s linear;}

#mixedSlider .MS-controls button:hover {
  color: rgba(0, 0, 0, 0.8);}

#mixedSlider .MS-controls .MS-right {
  right: 0px;}

.img-arti {
	width:70% !important;
	margin: 10px 0px 10px 0px;
	border-radius: 50%;}



/*==================================================
				AGENDA DE ACTIVIDADES
====================================================
*/
#agenda-actividades{
	padding: 80px 0px;
	background: #fff;}

#agenda-actividades h1{
	color:#c5a862;
	font-size: 45px;
	font-family: 'Baskerville';
	font-weight: normal;
	color:#a37a1f;
	margin: 20px 50px;}

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

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

#caja-busqueda{
	margin: 0 auto;
	width:65%;
	height:50px;
	padding:5px;
	border:1px solid #615d50;
	border-radius: 5px;}

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

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

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

.input-buscar input::placeholder {
	color:#615d50;}

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

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

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

#borrafiltro {
    /*float: left;*/
    padding: 5px;
    background: #c5a862;
    font-family: 'Poppins';
    font-weight: 900;
    font-style: normal;
    color: #fff;
    margin-left: 10px;
    border: 1px solid #fff;
    border-radius: 5px;
    cursor: pointer;
}
a#borrafiltro {
   text-decoration: none;
}

.lista{
	clear: both;
	padding: 30px 50px;}

#contenedor-eventos{
	/*display: flex;
	display: -webkit-flex;
	-webkit-flex-flow: row wrap; */
	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:#f9f6ef;
	margin: 5px 5px 5px 0px;
	border-radius: 5px;}

.fecha-agenda{
	float: left;
	width:18%;
	height: 195px;
	border: 1px solid #c5a862;
	background: #fff;
	padding: 40px 30px 20px 30px;
	text-align: center;
	color:#888;
	font-size: 22px;
	border-radius: 5px;
	font-weight: 300;
	margin-right: 10px;}

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

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

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

.nota{
	font-weight: 900;}

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

.hora{
	width:78%;
	border: 1px solid #c5a862;
	color:#888;
	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;}

#reproduce{
	margin: 0 auto;
	width:60%;
	height: 460px;
	font-size: 0px;
	background: #f9f5ed;
	border-radius: 5px;
	padding: 20px;
	-webkit-box-shadow: inset 0 0px 0 rgba(0, 0, 0, .2), 0 0px 30px rgba(0, 0, 0, .2);
    -moz-box-shadow: inset 0 0px 0 rgba(0, 0, 0, .2), 0 0px 30px rgba(0, 0, 0, .2);
    box-shadow: inset 0 0px 0 rgba(0, 0, 0, .2), 0 0px 30px rgba(0, 0, 0, .2);	
	text-align: center;
	margin: 20px auto;}

.registros{
	clear: both;
	height:50px;
	padding:20px 30px;}

.total-regisros{
	float: left;
	width: 200px;
	height: 45px;
	line-height: 45px;
	background: #005eb8;
	color:#fff;
	text-align: center;
	font-weight: 900;
	font-size: 16px; }

.numero-regisros{
	float: left;
	width: 90px;
	height: 45px;
	line-height: 45px;
	background: #dee0e2;
	color:#005eb8;
	text-align: center;
	font-weight: 900;
	font-size: 16px; }


/*==================================================
				FICHA PERSONAJE HISTÓRICO
====================================================
*/
.persona{
	padding:120px 10px 120px 10px;
	background:#faf8f5 url("../img/back-persona.jpg") top left;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left;
	background-position-y: initial;}

.ficha-persona{
	width:65%;
	height: 200px;
	padding: 20px 10px;
	margin: 0 auto;
	color:#fff;
	font-size: 18px;
	font-weight: 300;
	line-height: 24px;}

.ficha-persona h3{
	font-style: italic;
	font-family: 'Baskerville';
	font-weight: normal;
	font-size:30px;
	margin: 10px 0px;
	line-height:32px;}

.resena{
	padding:50px 40px 50px 40px;
	background:#fffbf4 url("../img/back-resena.jpg") top left;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left;
	background-position-y: initial;}

.orla{
	margin: 0 auto;
	width:35%;
	padding: 20px 10px;
	text-align: center;}

.color{
	width:100%;
	margin-top: -195px;}

.txt-persona{
	margin: 0 auto;
	width: 70%;
	padding: 30px 10px 60px 10px;
	text-align: justify;
	color:#888;
	font-size: 18px;
	line-height: 26px;
	font-weight: 300;}

.txt-persona strong, b{
	font-weight: 900;}

/*==================================================
				MEMORABILIA
====================================================
*/
#memorabilia{
	padding:70px 40px 70px 40px;
	background:#fffbf4 url("../img/back-resena.jpg") top left;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left;
	background-position-y: initial;}

.info-memoria-secc{
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;}

.info-memoria-secc > div {
	margin: 0px; }

.box-tit-memoria{
	flex-basis:305px;
	flex-grow: 1;
	order: 1;
	text-align: center;
	padding: 20px;}

.box-tit-memoria h1{
	color:#c5a862;
	font-family: 'Baskerville';
	font-style: italic;
	font-weight: normal;
	font-size: 45px;
	line-height: 45px;
	text-align: center;}

.box-memoria-descripcion {
	flex-basis:650px;
	flex-grow: 3; 
	order: 2;}

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

.conten-memoria{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	margin:20px 0px;
	text-align: center;}

.item-memoria{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding: 10px;
	margin: 15px 10px 15px 0px;
	text-align: center;}	

.item-memoria a{
	color:#888;
	text-decoration:none;
	font-size: 18px;
	line-height: 24px;}

.item-memoria a:hover{
	color:#0094ff;
	text-decoration:none;}

.img-memoria{
	width:60%;
	border-radius:60%;
	margin: 5px;}

/*==================================================
				MÁS PERSONAJES
====================================================
*/

#lista-personajes{
	padding:70px 40px 70px 40px;
	background:#f8f7f6 url("../img/back-personas.jpg") top left;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left;
	background-position-y: initial;	}

.tit-mas-pesonas{
	margin: 0 auto;
	width: 550px;
	height: 170px;
	padding: 10px;}

.tit-mas-pesonas h1{
	color: #888;
	font-weight: 900;
	font-size: 25px;
	line-height:30px;}

.detalle-mas{
	color: #c5a862;
	font-size:40px;
	font-family: 'Baskerville';
	font-weight: normal;}

.ilus-personas{
	float: left;
	width: 140px;
	margin-right: 10px;}

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

.dato-persona-ficha{
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	margin:20px 0px;}

.detalle-persona{
	flex: 1;
	-webkit-flex: 1;
	-webkit-order: 1;
	padding: 5px;
	text-align: center;
	line-height: 18px;
	margin-bottom: 5px;
	margin-right: 20px;}	

.detalle-persona h3{
	color: #c5a862;
	font-size:28px;
	font-style: italic;
	margin: 10px 0px;
	font-family: 'Baskerville';
	font-weight: normal;}

.detalle-persona a{
	font-size: 16px;
	color:#888; 
	text-decoration: none;}

.detalle-persona a:hover{
	color:#005ebb;  }

.detalle-persona span{
	font-style: italic;}

.marco{
	margin: 0 auto;
	width: 100%;
	padding:50px 50px 50px 50px;
	background:url("../img/marco.svg") top center;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	background-position-y: initial;	
	text-align: center;}

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

/*==================================================
				PERIODO HISTORIA
====================================================
*/

.intro-periodo{
	padding:60px 70px 30px 70px;
	color:#888;
	text-align: justify;
	font-size: 18px;
	font-weight: 300;
	line-height: 22px;}

.intro-periodo h1{
	font-size: 45px;
	font-family: 'Baskerville';
	font-weight: normal;	
	color:#c5a862;}

.intro-periodo span{
	color:#888;
	font-family: 'Poppins';
	font-weight: 900;
	font-size: 30px;
	font-style: normal;}

 #timeline {
    width:850px;
    height: 350px;
    overflow: hidden;
    margin: 50px auto;
    position: relative;
    background:url('../img/dot.gif') left 45px repeat-x; }

#dates {
	width:850px;
	height: 60px;
	overflow: hidden; }

#dates li {
	list-style: none;
	float: left;
	width: 100px;
	height: 50px;
	font-size: 24px;
	text-align: center;
	background: url('../img/biggerdot.png') center bottom no-repeat;}

#dates a {
	color:#0094ff;
	text-decoration: none;
	font-weight: 900;
	font-size: 20px;
	line-height: 35px;
	padding-bottom: 10px;}

#dates .selected {
	 font-size: 38px;}
    
#issues {
	width: 850px;
    height: 350px;
    overflow: hidden;} 

#issues li {
	width: 800px;
	height: 350px;
	list-style: none;
	float: left;}

#issues li.selected img {
	-webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);}

#issues li img {
	float: left;
	width:20%;
	margin: 10px 5px 10px 5px;
	background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
    zoom: 1;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    -webkit-transform: scale(0.7,0.7);
    transform: scale(0.7,0.7);}

#issues li h1 {
	color: #0094ff;
    font-size: 22px;
	font-style: italic;
    margin: 20px 10px;}

#issues li p {
	color: #888;
	font-size: 18px;
	padding:10px;
    margin:0px 20px 0px 20px;
    font-weight: normal;
    line-height: 22px; }

#issues li a{
	text-decoration: none;}
    
#grad_left,
#grad_right {
	width: 100px;
	height: 350px;
	position: absolute;
	top: 0;}

#grad_left {
	left: 0;}

#grad_right {
	right: 0;}

#next,
#prev {
	position: absolute;
    top: 0;
    font-size: 70px;
    top: 170px;
    width: 22px;
	height: 38px;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;}

      #next:hover,
      #prev:hover {
        background-position: 0 -76px;
      }
      #next {
        right: 0;
        background-image: url('../img/next.png');
      }
      #prev {
        left: 0;
        background-image: url('../img/prev.png');
      }
        #next.disabled,
        #prev.disabled {
          opacity: 0.2;
        }

/*==================================================
				DETALLE DEL EVENTO
====================================================
*/

.mod-evento-detalle{
	clear: both;
	height: 370px;
	background:#d6d1c5;
	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:#0094ff;
	font-size: 22px;
	border-radius: 5px;
	font-weight: 900;
	margin-right: 15px;}

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

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

.imagen{
	width: 100%;}



/*==================================================
				MEDIA QUERY
====================================================
*/

@media screen and (max-width: 1140px) {
	.container { width: 100%;}
	
	a.bot-leon{ width:22%; font-size: 30px;}
	
	a.bot-agenda{ width:22%; font-size: 30px;}
	
	a.bot-historia{ width:22%; font-size: 30px;}
	
	#bienvenida{ /*padding:120px 10px 50px 10px;*/
	padding: 210px 10px 50px 10px;}
	
	#bienvenida h1{ font-size:50px;}

	.txt-450{ width:90%; font-size: 15px; line-height: 20px;}
	
	#agenda{padding:40px 15px;}	

	#agenda h1{ font-size:40px;}
	
	.evento{padding: 10px; font-size: 14px; line-height: 18px;}
	
	.fecha{ height: 30px; margin-bottom: 5px;}

	.disciplina{ height: 30px; margin-bottom: 5px;}
		
	.ico{width: 25px;}

	.img-evento{ width:33%; margin-right:5px;}
	
	.info{ width: 63%; padding:5px 5px;}
	
	#historia{ padding:120px 35px 140px 35px;}	
	
	#historia h1{ font-size:50px; line-height:55px;}
	
	.dato-info h2{ font-size:20px;}

	.dato-info a{ font-size: 14px; line-height:18px;}
	
	.personaje{ width: 95%; height: 180px; }

	#pesonajes h1{ font-size:30px; line-height: 35px;}
	
	.personaje h3{ font-size:20px; line-height:22px;}
	
	.personaje a{ line-height:15px; font-size: 14px;}
	
	.selfie{width: 130px; margin-right: 10px;}
	
	#editorial{ padding: 40px 15px 40px 15px;}

	#editorial h1{ font-size:30px; line-height:35px;}
	
	.txt-editorial{ width: 85%; font-size: 14px; padding:5px; line-height: 18px;}
	
	.info-editorial{ width: 95%; padding: 5px;}
	
	.etiqueta{ font-size: 22px; line-height: 22px;}
	
	.info-editorial a{ font-size: 14px; line-height:16px;}
	
	#galeria-art h1{ font-size:22px; line-height:25px;}
	
	.box-menu  li a{ font-size: 14px; line-height:14px; height: 14px;}

	#copy{ font-size: 14px; line-height: 18px; height: 65px;}	

	.espacio{margin: 20px 0px 30px 0px;}	
		
	.ruta{font-size: 14px; line-height: 16px;	}	

	#galeria h1{ font-size: 45px; margin: 0px}	
	
	.txt-galeria{ width: 95%; font-size: 14px; line-height: 18px;}
	
	.ornamento{width: 80px; margin-bottom: 90px;}
	
	#indice-galerias{  margin: 20px 10px; width: 47%;}

	#indice-galerias  li a{ font-size: 14px; line-height: 18px; padding:0px 0px 10px 25px; background-size:20px 20px;}
	
	#indice-galerias  li a:hover{  padding:0px 0px 10px 25px; background-size:20px 20px;}

	#galeria h2{ font-size:25px;}	
	
	.ilustra{ width:70px;}
	
	.box-titulo { flex-basis:180px; padding: 10px;}
	
	.box-titulo h1{ font-size: 30px; line-height: 35px;}
	
	.box-descripcion { flex-basis:500px;}
	
	.txt{ font-size: 14px; line-height: 18px; padding: 20px 30px;}
	
	.info-edi-prin > div { padding: 5px 10px;}
	
	.box-editorial { flex-basis:480px; padding: 5px;}
	
	.box-editorial-menu {flex-basis:210px;}	
	
	.autor{clear: both; width: 95%; height: 30px; padding: 0px;}
	
	#agenda-actividades h1{ font-size: 30px; margin: 20px 30px;}
	
	.txt-intro{ padding:5px 15px 15px 15px; width: 80%;}
	
	.txt-intro h2{ font-size:14px; margin:5px 0px;}	
	
	#caja-busqueda{ width:90%;}
	
	.input-buscar input { font-size: 14px;}
	
	.lista{ padding: 30px 20px;}
	
	.fecha-agenda{font-size:16px; padding: 60px 20px 20px 20px;}
	
	.mod-evento{ height: 250px;}

	.tit-editorial{ font-size: 18px; line-height:22px; padding:15px 15px; border-left: 0px;}
	
	.info-detalle-editorial > div { padding: 20px 20px}	
	
	.box-txt-editorial { flex-basis:400px; font-size: 15px; line-height: 20px;}
	
	.box-img-editorial { flex-basis:250px;}
	
	.persona{padding:80px 10px 80px 10px;}	

	.ficha-persona{ width:80%; font-size: 16px; line-height: 20px;}
	
	.ficha-persona h3{  font-size:22px; line-height:26px;}
	
	.resena{padding:50px 0px 50px 0px;}

	.orla{ width:42%;}
	
	.txt-persona{ width: 85%; font-size: 14px; line-height: 18px;}
	
	#memorabilia{ padding:50px 25px 50px 25px;}	
	
	.box-tit-memoria { flex-basis:180px; padding: 10px;}
	
	.box-tit-memoria h1{ font-size: 30px; line-height: 35px;}
	
	.box-memoria-descripcion { flex-basis:500px;}

	.item-memoria a{ font-size: 14px; line-height: 20px;}

	#lista-personajes{ padding:70px 20px 70px 20px;}	

	.tit-mas-pesonas{ width: 450px; height: 150px;}

	.tit-mas-pesonas h1{ font-size: 18px; line-height:25px;}

	.detalle-mas{ font-size:28px;}

	.ilus-personas{ width: 90px;}	
	
	.detalle-persona h3{ font-size:20px; line-height:25px;}

	.detalle-persona a{ font-size: 13px; line-height: 18px;}	
	
	.marco{  padding:30px 25px 30px 25px;}
	
	.foto{ width:85%;}
	
	.intro-periodo{ padding:40px 20px 20px 20px; font-size: 14px; line-height: 20px;}

	.intro-periodo h1{ font-size: 30px;}	
	
	.intro-periodo span{ font-size:22px;}

	 #timeline { width:700px;}
	
	#dates ul { width:700px;}

	#dates a { font-size: 16px;}

	#dates .selected { font-size:28px;}

	#issues {width: 700px;} 

	#issues li { width: 700px;}	
	
	#issues li h1 { font-size:16px; margin:10px 5px;}
	
	#issues li p { font-size: 14px; margin:5px; line-height: 16px; }
	
}

@media (max-width:1024px) {
	/*body {  padding:25px;}
	
	main#content {width:98%;}		*/
	
	#reproduce{	width:70%; height: 420px;}
	
	/*#preparate{ font-size: 15px; line-height: 20px; padding:50px 10px 50px 10px;}*/
	
	.img-memoria{	width:190px; border-radius:190px;}	
	
}


@media screen and (max-width: 812px) {
	.registros{ padding:20px 10px;}
	
	#galeria{	padding: 90px 15px 60px 15px;}	
	
	#indice-galerias{  float: none; width:96%; height: 160px;}

	#paginacion{ width:95%; padding: 25px 5px 45px 5px;}
	
	#contenedor-eventos{-webkit-flex-direction: column; width: 100%; }	
	
	.ficha-persona{ width:98%; font-size: 14px; line-height: 18px; padding: 20px 0px;}
	
	#memorabilia{ padding:50px 10px 50px 10px;}	
	
	#contenedor-memorabilia{ -webkit-flex-direction: column; }
	
	.img-memoria{	width:210px; border-radius:210px;}	
	
	.mod-evento-detalle{ height:auto; }
	
	.fecha-detalle{ height: auto; 	font-size: 15px; width:20%;}	
	
	.foto-evento{ float:none; width: 65%; margin: 0 auto;}	
	
	.hora{ width:100%;}
	
	#timeline { width:645px;}
	
	#dates ul { width:645px;}

	#issues {width: 645px;} 

	#issues li { width: 645px;}	
	
}



@media screen and (max-width: 668px) {
	#contenedor-linea{ -webkit-flex-direction: column; }
	
	.foto-periodo{width: 50%;}
	
	#contenedor-editorial{ -webkit-flex-direction: column; }
	
	.fecha-art{ padding: 0px; height: 30px; margin-bottom: 5px;}
		
	.redes{ float: none; margin: 0 auto; padding: 10px;}
	
	#copy{ text-align: center; height: 110px;}	
	
	.info-edi-prin{-webkit-flex-direction: column; width: 100%; }
	
	.tit-editorial{ border-top: 1px solid #005ebb; margin:0px 10px;}
	
	.img-editorial-detalle{	width:50%;}
	
	#contenedor-lista{-webkit-flex-direction: column; width: 100%; }	

	#reproduce{ width: 80%;  height: 260px; margin-bottom: 40px;}

	#bienvenida{ padding:130px 10px 50px 10px;}
	
	#mixedSlider .MS-content .item {width:50%;}

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

	.fecha-agenda { width: 20%;}

	.personaje { width: 95%; height: 340px;}
	
	.orla{ width:65%;}
	
	#lista-personajes{ padding:20px 10px 50px 10px;}	
	
	.tit-mas-pesonas{ width: 300px; height: 150px;}
	
	.tit-mas-pesonas h1{ font-size: 14px; line-height:22px;}

	.detalle-mas{ font-size:22px;}
	
	.ilus-personas{ width:60px;}	
	
	#contenedor-personas{-webkit-flex-direction: column; width: 100%; }	
	
	.marco{width: 80%;  padding:70px 25px 70px 25px;}
	
	.info-detalle-int{ width:70%; padding: 20px 5px 20px 5px}

	.foto{ width:50%;}
	
	#timeline { width:400px;}
	
	#dates ul { width:400px;}

	#issues {width:400px;} 
	
	#issues li h1 { font-size:14px; margin:5px 0px;}

	#issues li { width:400px;}	
	
	#dates a { font-size: 13px;}

	#dates .selected { font-size:18px;}

}

@media screen and (max-width: 590px) {
	.logo{ width: 170px;}
	
	#redes{ padding:5px 15px 0px 15px;}	
	
	a.facebook{ width:20px; height:20px; background-size:20px 20px;}
	
	a:hover.facebook{ background-size:20px 20px;}
	
	a.x{ width:20px; height:20px; background-size:20px 20px;}
	
	a:hover.x{ background-size:20px 20px;}
	
	a.instagram{ width:20px; height:20px; background-size:20px 20px;}
	
	a:hover.instagram{ background-size:20px 20px;}
	
	a.tiktok{ width:20px; height:20px; background-size:20px 20px;}
	
	a:hover.tiktok{ background-size:20px 20px;}
	
	a.youtube{ width:20px; height:20px; background-size:20px 20px;}
	
	a:hover.youtube{ background-size:20px 20px;}
	
	a.bot-site{ width:110px; height: 25px; background-size:20px 20px; padding-left: 20px;
		line-height: 25px; font-size: 14px;}

	a:hover.bot-site{ background-size:20px 20px;} 

	#agenda h1{ font-size:28px;}
	
	.info{ width: 95%;}
	
	.evento{ height:220px;}
	
	#botones{ width: 97%; margin-top:-130px;}
	
	/*a.bot-leon{ width:27%; font-size: 18px;}*/
	a.bot-leon{ width: 31%; font-size: 22px;
		padding-top: 60px;
	}
	
	/*a.bot-agenda{ width:27%; font-size: 18px;}*/
	a.bot-agenda{ width: 31%; font-size: 22px;
		padding-top: 60px;
	}
	
	/*a.bot-historia{ width:27%; font-size: 18px;}*/

	a.bot-historia { width: 31%; font-size: 22px;
		padding-top: 60px;
	}
	
	.fecha-detalle{ width:23%; font-size: 13px;}
	
	#mixedSlider .MS-content .item {width:90%;}
	
}

@media screen and (max-width: 480px) {
	.header .col:nth-child(1) {
		width:5%;
	}

	.header .col:nth-child(2) {
		width:90%;
	}

	.header .col:nth-child(3) {
		width: 5%;
	}
	
	#timeline { width:300px;}
	
	#dates ul { width:300px;}

	#issues {width:300px;} 

	#issues li { width:300px;}	
	
}

@media screen and (max-width: 385px){
	header,
	.header,
	.header .col {
		height: auto;
	}
	
	
}