/*FUENTES*/
@font-face{	font-family: 'extra'; /*Nombre que se le asigna a la fuente*/
	src:url('../fonts/LibreFranklin-ExtraBold.ttf');
}

@font-face{	font-family:'black';
	src:url('../fonts/black/LibreFranklin-Black.otf') format('opentype');
}

@font-face{	font-family:'regular';
	src:url('../fonts/LibreFranklin-Regular.ttf');
}

@font-face{	font-family:'bold';
	src:url('../fonts/LibreFranklin-Bold.ttf');
}	

@font-face{	font-family:'mediana';
	src:url('../fonts/black/LibreFranklin-Medium.otf') format('opentype');
}	

@font-face{	font-family:'delgada';
	src:url('../fonts/LibreFranklin-Thin.ttf');
}	

@font-face{	font-family:'fina';
	src:url('../fonts/LibreFranklin-Light.ttf');
}
strong{
	font-weight: 900;
}

/*HTML*/
html{
   /* touch-action: manipulation;
    -ms-touch-action: manipulation;
    zoom: reset;
    zoom: 100%;*/

 	touch-action: pan-y; 
	-ms-touch-action: none;
	-webkit-touch-callout: none; 
	-webkit-text-size-adjust: none; 
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none; 
	 text-size-adjust: none;
	 zoom: 1; 
}

	/*scroll-behavior: smooth;
	overflow-x: hidden;
	transition-duration: 5s;
	
/*---------------- COLORES, FONDOS Y PADDINGS-----------------*/
.blanco{
	color:rgb(255, 255, 255);
}

.fondo-blanco{
	background-color:rgb(255, 255, 255);
}

.azul{	
	color: rgb(13, 77, 163);
}

.fondo-azul{	
	background-color: rgb(13, 77, 163);
	border-radius: 1.5rem;
}

.fondo-azul-padding{	
	background-color: rgb(13, 77, 163);
	border-radius: 1.5rem;
    padding: .5rem;
}

.fondo-azul-degradado{	
	background: linear-gradient(RGB(13,77,163), RGB(22,22,78) );
}

.amarillo{
	color: rgb(255, 221,0);	
	text-decoration: none;
}
	
.fondo-amarillo{
	background-color: rgb(255, 221,0);
	padding: 1rem 1rem 1rem 1rem;
	border-radius: 1rem;
}
	
/*con padding*/
.fondo-amarillo-2{
	background-color: rgb(255, 221,0);
	padding: .3rem 1rem 1.5rem 1rem;
}

.fondo-europa{
	background-image: url('../img/fondo_europa.jpg');
	background-size: cover;
	padding: 2rem;
	padding-top: 1rem;
	border-radius: 2rem;
	color:white;	
}

.azul-h1{
	display: inline-grid;
	width: 100%;
	background-color: rgb(13, 77, 163);
	margin: 1rem 0 1rem 0;
	border-radius: .5rem;
	justify-items: center;
    align-items: center;
	justify-content: center;
	align-content: center;
	text-align: center;
}

.franja-azul{
	border-bottom: 1.5rem solid rgb(13, 77, 163);
}	

.centrado{
	align-items: center;
	justify-content: center;	
	text-align:  center;
}

.inline{
	display: inline;
}

.right{
	align-items: right;
	justify-content: right;	
	text-align: right;
}

.padding{
	padding: 0 1rem 0 1rem;
}


.enlace_index{
    color:white;
      text-decoration: none;

}

.enlace_index:hover{
    color:white;
   

        text-decoration: underline;
}

/*----------------CARACTERÍSTICAS TEXTOS------------------*/	
p{	
	text-align: justify;
	font-size: 1rem;
	line-height: 1.4em;
}

h1{	
	font-family: 'black';
	text-align: justify;
	font-size: 2em;
}		
	
h2{	
	font-family: 'mediana'; 
	font-size: 1.5em;
	text-align: justify;
}

h3{	
	font-family: 'bold';
	font-size: 1.4em;
}

h4{
	font-family: 'mediana';
	font-size: 1.1em;
}

h5{ 
	font-family: 'mediana';
	font-size: 1rem; 
}

h6{  
	font-family:'delgada';
	font-size: 0.9rem;
	/*font-weight: lighter;*/	
}

.pie-foto{ 
	font-family: 'fina';
	font-size: 1rem;
}

.indice{
	font-size: 1.2rem;
	font-family:'bold';
}

.destacado	{
	font-weight: bold;	
}

/*-----------SECCIONES ------------------*/
*{/*con este símbolo selecionamos todo*/
	font-family: 'regular';
}

body{	
	background-color: #fffff2;
	scroll-behavior: smooth;
	overflow-x: hidden;
	transition-duration: 5s;
}

/*---------- CABECERA-----------------------*/
.cabecera{
	display: block;
	background-image: url('../img/1366_2000.jpg');
	height: 15rem;
	background-size: cover;
	padding-left:0.25rem;
	padding-top:2rem;
}

.titulo-cabecera{
  	padding-top: 1.2rem;
	padding-left: 2rem;
	font-family: 'black';
	font-size: 3em;	
}

.subtitulo-cabecera{
	padding-left: 2rem;
	font-family: 'bold';
	font-size: 1.5em;
}

/*-----------BANNER FIJO ---------------------*/

.boletin{
	position:fixed;
	width:200px;
	height:25px;
	top:0;
	bottom:0;
	right:0px;
	z-index:1;
	text-align:center;
	line-height:5px;
	font-family: 'bold', cursive;
	font-size:1rem;
	border-radius: 0 0 15px 15px;
	cursor:pointer;	
	box-shadow: 1px 1px 1px 1px rgb(0,0,0,0.5);
}

a #banner{
	color:rgb(13, 77, 163);
}

/*---------- LISTA-----------------------*/
ul{
	padding: 0 0 0 .5rem;
}

ul .lista {
	list-style: none;
	padding-left: 3rem;
	background-image: url(../img/star-azul.svg);
	padding-top:1rem; /*Espacio entre items*/
	background-position:1rem 1rem;
	background-size: 1rem 1rem;
	background-repeat: no-repeat; 	
	line-height: 1.4rem;	
	text-align: justify;
}

/*-------------NAVEGACION-----------*/
/*.movil{/*Menú desplegable
	visibility: hidden;
}*/

.ordenador{/*Menú o índice normal*/
	margin-top: 2rem;
}

.ordenador div{	
	display: block;		
	background-color: rgb(255, 221,0);
	border-radius: .5rem;
	color: rgb(13, 77, 163);	
	padding: .1rem 2.5rem .1rem 2.5rem;
	margin:.4rem 0 .4rem 0 ;
	font-size: 1.1rem;
}
	
.ordenador div:hover{/*al pasar por encima*/
	background-color:rgb(13, 77, 163);
	color: white;
	text-decoration: none;
	transition-duration: 0.5s;
}

.ordenador div:visited{/*visitado*/
	background-color:#bababa;
	color: white;
}

/*---------- ÍNDICE-----------------------*/
.enlaceIndice{			
	color: rgb(13, 77, 163);	
	text-decoration: underline ;
	font-weight: bold;
	font-size: 1.1rem;
	text-decoration: none;					
}

.enlaceIndice:hover {	
	color:white;
	texto-decoration: underline;		
}

/*--------------ESTILOS GRID---------------*/
/*--------------NOTICIAS--------------*/
.container{
	padding: 0 5rem 0 5rem;
	margin: 0 0 0 0;
}

.noticias{
	font-size: 4rem;
}

.contenedor{
	display: grid;
	max-width: 100%;
	grid-template-columns: 1fr;
	border: 0.1rem solid #ccc;
	padding: 3rem 3rem 3rem 3rem;
	text-align: center;
	margin: 0 0 2rem 0;
}

/*--------------FOTOS---------------*/
.foto_noticia img {
	max-width: 60%;
	height: auto;
	border-bottom: 1.5rem solid rgb(13, 77, 163) ;
	margin: 0;	
}

/*.foto_noticia img:hover {
	filter: brightness(80%);  Atenuamos la imagen al pasar el ratón 
}*/

/*--------------CONVOCATORIAS---------------*/

.foto-premios{
	max-width: 60%;
	height: auto;
	border-bottom: 1.5rem solid rgb(13, 77, 163);
	padding: auto;
}

.justificado-premios{
	padding: 0 2rem 0 2rem;
	text-align: top;
}
/*------------------------------SLIDER 1 FOTOS--------------------------------*/
/*proporciones del slider*/
.carousel{
    position: relative;
    width:100%;   /*Ajusta el ancho según las necesidades*/
    max-width: 100%; 
    height: 100%; 
    margin: auto;
    overflow: hidden;
    padding-top: 2em; 
    
}

.carousel-images{
    display: flex;
    animation: slide 30s infinite; /* Cambia las imágenes cada 10 segundos*/ 
    transition: transform 0.5s ease;
    background-size: cover; 
    border-bottom: 2rem solid rgb(13, 77, 163);   
}

@keyframes slide {
/*esto hace que el slide de imágenes se mueva solo, el porcentaje positivo se refiere a lo que se va a ver de imagen,
 y el porcentaje negativo se refiere al desplazamiento horizontal que va a hacer el slide*/
    /*0% { transform: translateX(0); }/*indica que está en el punto 0, es decir en el inicio sin movimiento
    50% { transform: translateX(-100%);}/*llega en el movimiento hasta el 50%
    50% { transform: translateX(-100%);}/*llega hasta el final
    0% { transform: translateX(0);}*//*vuelve al inicio*/
}

.image{
    flex: 0 0 100%;
    width: 1200px;
    height: 60rem; /* Ajusta la altura según tus necesidades */
    background-size: cover;
    justify-content: center;
    align-items: center;
}
/*botones*/
.carousel-buttons {/*botón del carrusel*/
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/*----------------------MOVIMIENTO DEL SLIDER---------------*/
/*con esto le damos movimiento a las imágenes  de forma manual haciendo clip en los círculos*/
input[type="radio"] {/* establece la visualización de los elementos de entrada tipo radio a "none", 
lo que significa que estos elementos estarán ocultos en la interfaz de usuario.*/
    display: none;
}

input[type="radio"]:checked ~ .carousel-images {
	/*Esta transformación desplaza horizontalmente el contenido del carrusel de imágenes
	en una cantidad calculada basada en el índice seleccionado.*/
    transform: translateX(calc(-100% * var(--index)));
}

/*----------------------BOTONES CAROUSEL---------------*/
.carousel-buttons label {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgb(13, 77, 163); /* Color de fondo del botón */
    margin: 0 5px;
    cursor: pointer;
}

/*estas reglas definen como se va a comportar mediante los botones nuestro carrusel*/
input[type="radio"]#image1:checked ~ .carousel-images {
    --index: 0;
}
input[type="radio"]#image2:checked ~ .carousel-images {
    --index: 1;
}
input[type="radio"]#image3:checked ~ .carousel-images {
    --index: 2;
}
input[type="radio"]#image4:checked ~ .carousel-images {
    --index: 3;
}
input[type="radio"]#image5:checked ~ .carousel-images {
    --index: 4;
}

input[type="radio"]:nth-of-type(1):checked ~ .carousel-buttons label:nth-of-type(1),
input[type="radio"]:nth-of-type(2):checked ~ .carousel-buttons label:nth-of-type(2),
input[type="radio"]:nth-of-type(3):checked ~ .carousel-buttons label:nth-of-type(3),
input[type="radio"]:nth-of-type(4):checked ~ .carousel-buttons label:nth-of-type(4),
input[type="radio"]:nth-of-type(5):checked ~ .carousel-buttons label:nth-of-type(5)

{
    background-color: rgb(255, 221, 0); /* Estilo para el botón activo */

}


/*------------------------------SLIDER 2 FOTOS QUITAR ESTO SI SE ACTIVA EL SLIDER 2-------------------------------

.carousel-2{
    position: relative;
    width:100%;   
    max-width: 100%; 
    height: 100%; 
    margin: auto;
    overflow: hidden;
    padding-top: 2em; 
}

.carousel-images-2{
    display: flex;
    animation: slide 30s infinite;  
    transition: transform 0.5s ease;
    background-size: cover; 
    border-bottom: 2rem solid rgb(13, 77, 163);  
}

.imagen{
    flex: 0 0 100%;
    height: 40rem; 
    background-size: cover;
}

.carousel-buttons-2 {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}


input[type="radio"] {
    display: none;
}

input[type="radio"]:checked ~ .carousel-images-2 {
	
    transform: translateX(calc(-100% * var(--index)));
}


.carousel-buttons-2 label {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgb(13, 77, 163); 
    margin: 0 5px;
    cursor: pointer;
}

input[type="radio"]#imagen1:checked ~ .carousel-images-2 {
    --index: 0;
}
input[type="radio"]#imagen2:checked ~ .carousel-images-2 {
    --index: 1;
}
input[type="radio"]#imagen3:checked ~ .carousel-images-2 {
    --index: 2;
}
input[type="radio"]#imagen4:checked ~ .carousel-images-2 {
    --index: 3;
}
input[type="radio"]#imagen5:checked ~ .carousel-images-2 {
    --index: 4;
}

input[type="radio"]:nth-of-type(1):checked ~ .carousel-buttons-2 label:nth-of-type(1),
input[type="radio"]:nth-of-type(2):checked ~ .carousel-buttons-2 label:nth-of-type(2),
input[type="radio"]:nth-of-type(3):checked ~ .carousel-buttons-2 label:nth-of-type(3),
input[type="radio"]:nth-of-type(4):checked ~ .carousel-buttons-2 label:nth-of-type(4),
input[type="radio"]:nth-of-type(5):checked ~ .carousel-buttons-2 label:nth-of-type(5)

{
    background-color: rgb(255, 221, 0); 
}*/

/*SLIDER 2 OTROS BOLETINES*/

#slider2 {
  	margin: 0;
  	border: 1px solid #ccc; 
  	border-radius: 1.5rem;
  	user-select: none;/*La propiedad CSS controla si el usuario puede seleccionar texto.
   Esto no tiene ningún efecto en el contenido cargado como parte de la interfaz de usuario de un 
   navegador (su Chrome ), excepto en los cuadros de texto.user-select*/
}

#slider {
  	position: relative;
 	width: 25%;
  	height: 35vw;
  	margin: 3rem auto;
  	perspective: 1400px;/*La función CSS define una transformación que establece la distancia entre 
  el usuario y el plano z=0, la perspectiva desde la que estaría el espectador si la interfaz bidimensional fuera tridimensional.
   Su resultado es un tipo de datos. perspective() <transform-function>/*/
  	transform-style: preserve-3d;/*La propiedad transform-style CSS establece si el elemento hijo 
  esta posicionado en el espacio 3D (preserve-3d) o esta integrado(flat) en el plano del elemento.*/
  	border-radius: 12px;  /* Rounded corners */
}

/*--------------BOTONES DEL SLIDE----------*/ 
/*Botones de radio para control deslizante*
#slider .botonSlider[type=radio] {
  display: inline;
  position: relative;
  bottom: -31.5rem;
  left: 10rem;
  width: 15px;  /* Un poco mas grande *
  height: 15px;  /* Un poco mas grande *
  margin: 0 1rem 0 0;
  background: rgb(173, 197, 23); 
  border: 2px solid rgb(63, 48, 33); 
  border-radius: 50%; 
  cursor: pointer;
  transform: translateX(-83px);
  transition: background 300ms ease, border 300ms ease;  /* Smooth transition *
}

#slider .botonSlider[type=radio]:checked {
  background: #FF5A5F; 
  border: 2px solid #FF5A5F;  
}*/

/*--------------IMÁGENES DEL SLIDE----------*/ 
/* Labels y imágenes */
#slider label,
#slider label .pdf {
  	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 12px;
	transition: transform 400ms ease, opacity 400ms ease;  /* agrega una transición de opacidad */
}

.visualizar{
	position: absolute;
	z-index: 6;
	display: inline-flex;
	font: 100% 'black';
	width: 20%;
	height: 10%;
	text-align: center;
	justify-content: center;
	align-items: center;
	right: 17%;
	bottom: 40%;
	border-radius: 1.5rem;
	padding: .4rem 3rem .5rem 3rem;
	background-color: rgb(13, 77, 163,.5);
	color: rgb(255, 221, 0, 1);
	text-shadow: 0 2px 5px rgba(0,0,0, 1);
  	text-decoration: none;
  	border: 0.3rem solid rgb(255, 255, 255, .5);

  	&:hover{/*esto se refiere a la letra*/
  		color: rgb(255, 221, 0,.4);
  		right: 17%;
		bottom: 40%;
  		opacity: 1;
  		transform: scale(1.1); /* nivel de zoom */
  	}
}

/*--------------ZOOM---------->
/* Nueva incorporación para el efecto Zoom */
.zoom-container {
  	overflow: hidden; /* Ocultar la parte de la imagen que se extiende fuera del div.*/
}

/* Zoom effect */
.zoom-container:hover {
  	cursor: default; /* Cambiar el cursor al icono de acercamiento */
}

.zoom-container.can-zoom:hover .pdf {
  	transform: scale(1.4); /* nivel de zoom */
  	transition: transform .5s ease-in-out;
}

/*--------------COLOCACIÓN DE LAS IMÁGENES EN CAROUSEL EN 3D---------->

/* Reglas de transición existentes */
#s1:checked ~ #slide1, 
#s2:checked ~ #slide2, 
#s3:checked ~ #slide3, 
#s4:checked ~ #slide4, 
#s5:checked ~ #slide5 {
  	box-shadow: 0 13px 26px rgba(0,0,0, 0.2), 0 12px 6px rgba(0,0,0, 0.1);
  	transform: translate3d(0%, 0, 0px);/*Translate3d() transforma un elemento reposicionándolo
  (traduciéndolo) tridimensionalmente a lo largo de los ejes x, y y z.*/
}

#s1:checked ~ #slide2, 
#s2:checked ~ #slide3, 
#s3:checked ~ #slide4, 
#s4:checked ~ #slide5, 
#s5:checked ~ #slide1 {
  	box-shadow: 0 6px 10px rgba(0,0,0, 0.2), 0 2px 2px rgba(0,0,0, 0.1);
  	transform: translate3d(40%, 0, -100px);/*translate3d()Acepta tres argumentos .
   Aquí está la sintaxis:element {transform: translate3d(x, y, z);}*/
}

#s1:checked ~ #slide3,
#s2:checked ~ #slide4,
#s3:checked ~ #slide5,
#s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
 	box-shadow: 0 1px 4px rgba(0,0,0, 0.2);
  	transform: translate3d(80%, 0, -250px);/*Tenga en cuenta lo siguiente: -El x argumento puede 
ser una longitud o un valor porcentual. Especifica la distancia que desea mover el elemento
desde su posición original en el eje x.
-El y argumento puede ser una longitud o un valor porcentual. Define la distancia que desea mover el 
elemento desde su posición original en el eje y.
-zSólo puede ser una longitud, no un porcentaje. Define la distancia que desea mover el elemento desde 
su posición original en el eje z.*/
}

#s1:checked ~ #slide4,
#s2:checked ~ #slide5,
#s3:checked ~ #slide1,
#s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  	box-shadow: 0 1px 4px rgba(0,0,0, 0.2);
  	transform: translate3d(-80%, 0, -250px);
}

#s1:checked ~ #slide5,
#s2:checked ~ #slide1,
#s3:checked ~ #slide2,
#s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  	box-shadow: 0 6px 10px rgba(0,0,0, 0.2), 0 2px 2px rgba(0,0,0, 0.1);
  	transform: translate3d(-40%, 0, -100px);
}

/*--------------LOGOS---------------*/
.logos{
	align-items: center;
	justify-content: center;
	width: 20%;	
	padding: 0;
	margin: 3rem 0 .3rem 0;
	align-items: center;	
}

.caja-logos{
	display:flex;
	align-items: center;
	justify-content: space-around;		
}

/*-----------FOOTER---------------*/
footer{
	height: 5rem;
	border-top: 2rem solid rgb(255,221,0);
	padding-bottom: .3rem;
}

/*--------------SIMBOLOS FOOTER---------------*/
.material-symbols-outlined {/*con esto modificamos las características de los íconos*/
	color: rgb(255,221,0);	
	 font-variation-settings:
	  'FILL' 1,
	  'wght' 1,
	  'GRAD' 0,
	  'opsz' 24,
}

.material-symbols-outlined:hover {	
	color:white;		
}  
 
.iconos{
	align-items: center;
	justify-content: center;		
}

.caja-iconos{
	display:flex;
	align-items: center;
	justify-content: space-around;		
}

.enlaces-iconos{/*le quito el subrayado a los enlaces*/
	text-decoration: none;
	font-size: 0.7rem;
}

.enlaces-premios:hover{
    color:white;
}

.info-adicional{
	text-decoration: none;
}

.texto-premios{
	display: inline;
	text-decoration: none;
}

/*---------------------------------------------------------------------------------------------------*/

/*--------------CARACTERÍSTICAS PARA MÓBIL---------------*/
@media screen and (max-width:768px) {/*lo que hacemos con esto es definir
unas características particulares para cuando la pantalla es de menor tamaño a 568px*/

	/*--------------TEXTOS--------------*/
	body{
		overflow-x: hidden;
	}
	p {	
		text-align: justify;
		font-size: .8rem;
		line-height: 1.4rem;
	}	
	h1{	
		font-family: 'black', sans-serif;
		text-align: justify;
		font-size: 1.4rem;
	}		
		
	h2{	
		font-family: 'mediana', sans-serif;
		font-size: 1.1rem;
		text-align: justify;
	}

	h3{	
		font-family: 'bold';
		font-size: 1.2rem;
	}

	h4{
		font-family: 'mediana';
		font-size: 1.1rem;
	}

	h5{ 
		font-family: 'mediana';
		font-size: 1rem; 
	}

	h6{  
		font-family:'delgada';
		font-size: 0.9rem;	
	}

	/*--------------BANNER FIJO--------------*/
	.boletin{
		position:fixed;
		width:200px;
		height:25px;
		top:0;
		bottom:0;
		right:0px;
		z-index:1;
		text-align:center;
		line-height:5px;
		font-family: 'bold', cursive;
		font-size:1rem;
		border-radius: 0 0 1rem 1rem;
		cursor:pointer;	
		box-shadow: 1px 1px 1px 1px rgb(0,0,0,0.5);
	}

	/*--------------CABECERA--------------*/
	.titulo-cabecera{
		padding-top: 1.2rem;
		padding-left: 2rem;
		font-family: 'black';
		font-size: 2.5rem;	
		color: white;
	}

	.subtitulo-cabecera{
		padding-left: 2rem;
		font-family: 'bold';
		font-size: 1.2rem;
	}

	/*--------------NAVEGACIÓN--------------*/
	.ordenador div{	
		display: block;		
		background-color: rgb(255, 221,0);
		border-radius: .5rem;
		color: rgb(13, 77, 163);	
		padding: .05rem 1.5rem .05rem 1.5rem;
		margin:.4rem 0 .4rem 0 ;
	}

	.indice{
		font-size: 1rem;
		text-align: justify;

	}

	/*--------------NOTICIAS--------------*/
	.container{
		padding: 0;
		margin: 0;
	}

	.contenedor {
	    	display: grid;
	      	grid-template-columns: 1fr; 
	      	grid-template-rows: auto; 
	      	padding: .8rem;  
   }

	.noticias{
		margin: 1rem 0 -1rem 0;
		font-size: 2rem;
	}

	/*--------------FOTO NOTICIAS--------------*/
	.foto_noticia img {
			max-width: 100%;
			height: auto;
			border-bottom: .8rem solid rgb(13, 77, 163) ;
	}

	/*--------------NAVEGACIÓN--------------*/
	.ordenador div{	
			display: block;		
			background-color: rgb(255, 221,0);
			border-radius: .5rem;
			color: rgb(13, 77, 163);	
			padding: .05rem 1.5rem .05rem 1.5rem;
			margin:.4rem 0 .4rem 0 ;
	}

	/*--------------LISTAS--------------*/
	 li .material-symbols-outlined {/*con esto modificamos las características de los íconos*/
		color: rgb(13, 77, 163);
		font-variation-settings:
	  	'FILL' 1,
	  	'wght' 1000,
	  	'GRAD' 0,
	  	'opsz' 24,
	}

	ul{
		padding: 0 0 0 0rem;
	}

	ul .lista {
		list-style: none;
		padding-left: 3rem;
		background-image: url(../img/star-azul.svg);
		padding-top:1rem; /*Espacio entre items*/
		background-position: 1.5rem 1.3rem;
		background-size: .8rem .8em;
		background-repeat: no-repeat; 	
		line-height: 1.4rem;	
		text-align: justify;
		font-size: .8rem;

	}

	/*--------------IMÁGENES SLIDER 1--------------*/
	
	.carousel-images{
        padding-top: 0.5em;
       
    }
    
    .image {
    	width: 100%;
        height: 20rem;
    }

    .carousel-buttons {
        bottom: 1rem;
    }

    .carousel-buttons label {
    	width: .5rem;
    	height: .5rem; 
	}

	/*SLIDER BOLETINES*/

	#slider {
	 	position: relative;
	  	width: 35%;
	 	height: 45vw;
	  	margin: 3rem auto;
	  	perspective: 1400px;/*La función CSS define una transformación que establece la distancia entre 
	  el usuario y el plano z=0, la perspectiva desde la que estaría el espectador si la interfaz bidimensional fuera tridimensional.
	   Su resultado es un tipo de datos. perspective() <transform-function>/*/
	  	transform-style: preserve-3d;/*La propiedad transform-style CSS establece si el elemento hijo 
	  esta posicionado en el espacio 3D (preserve-3d) o esta integrado(flat) en el plano del elemento.*/
	  	border-radius: 12px;  /* Rounded corners */
	}

	/* Existing transition rules */
	#s1:checked ~ #slide1, 
	#s2:checked ~ #slide2, 
	#s3:checked ~ #slide3, 
	#s4:checked ~ #slide4, 
	#s5:checked ~ #slide5 {
	  	box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
	  	transform: translate3d(0%, 0, 0px);
	}

	#s1:checked ~ #slide2, 
	#s2:checked ~ #slide3, 
	#s3:checked ~ #slide4, 
	#s4:checked ~ #slide5, 
	#s5:checked ~ #slide1 {
	  	box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
	  	transform: translate3d(40%, 0, -100px);
	}

	#s1:checked ~ #slide3,
	#s2:checked ~ #slide4,
	#s3:checked ~ #slide5,
	#s4:checked ~ #slide1,
	#s5:checked ~ #slide2 {
	  	box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
	  	transform: translate3d(80%, 0, -250px);
	}

	#s1:checked ~ #slide4,
	#s2:checked ~ #slide5,
	#s3:checked ~ #slide1,
	#s4:checked ~ #slide2,
	#s5:checked ~ #slide3 {
	  	box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
	  	transform: translate3d(-80%, 0, -250px);
	}

	#s1:checked ~ #slide5,
	#s2:checked ~ #slide1,
	#s3:checked ~ #slide2,
	#s4:checked ~ #slide3,
	#s5:checked ~ #slide4 {
	  	box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
	  	transform: translate3d(-40%, 0, -100px);
	}

	/*--------------LOGOS--------------*/
	.logos{
		align-items: center;
		justify-content: center;
		width: 50rem;	
		padding: 0 .5rem 0 .5rem;
		margin: .3rem 0 .3rem 0;
		align-items: center;
	}

	/*--------------CONVOCATORIAS Y PREMIOS--------------*/
	.texto{/*le quito el subrayado a los enlaces*/
			display: none;
	}

	.texto-premios{
			color:rgb(173, 197, 23)
	}

	/*--------------FOOTER--------------*/
	footer{
		height: 3rem;
		border-top: 1rem solid rgb(255,221,0);
		padding-bottom: .3rem;
	}

	.enlaces-iconos{/*le quito el subrayado a los enlaces*/
		text-decoration: none;
		font-size: 0rem;

	}

	/*--------------INFO ADICIONAL--------------*/
	.info-adicional{
		font-size: .8rem;
	}
	.info-adicional span{
		font-size: 1.5rem;
	}
	
}