@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	box-sizing: border-box;
	/*	font-family: 'Philosopher', sans-serif;
	font-family: 'Raleway', sans-serif; */
}

.comunicate {
	cursor: pointer;
	display: flex;
	justify-content: center;
	position: sticky;
	bottom: 0;
	right: 1em;
	left: 1em;
	z-index: 9950;
}

.comunicate h3 {
	background-color: #982900;
	padding: 1em;
	margin: 1em;
	border-radius: .3em;
	box-shadow: 0 .5em 2em #d1d1d1;
	font-family: "Raleway";
	color: white;
	font-weight: 200;
	font-size: 1em;
}

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

/* GENERAL */

a {
	text-decoration: none;
}

p {
	padding: 1em 0 1em 0;
}

h1 {
	display: inline;
	color: white;
	font-size: 2.5em;
	font-family: "Philosopher";
	border-bottom: 2px solid;
	border-color: white;
}

h2 {
	font-family: "Philosopher";
	color: #0e5d6c;
	padding: .5em 0 .5em 0;
}

h3 {
	padding: .5em 0 1em 0;
	color: #b46245;
	font-weight: 300;
	font-size: 1em;
}

h4 {
	font-weight: 400;
	text-align: end;
	padding: .5em 0 .5em 0;
	color: #0e5d6c;
}

h5 {
	color: white;
	font-size: 7pt;
	font-weight: 500;
	text-align: center;


}

img {
	max-width: 100%;
	height: auto;
}

body {
	display: flex;
	flex-direction: column;
	align-content: space-between;
	min-height: 100vh;
}

.titulos {
	padding: 1em 0 1em 0;
}

/* CONTENEDORA GENERAL */

.contenedora {
	max-width: 80em;
	margin: auto;
	padding: 2em;
}

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

/* ENCABEZADO */

.encabezado {
	height: 25em;
	background: url("../imagenes/header3.jpg") center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.texto1 {
	padding-top: 13em;
	text-align: center;
}

.texto1 h2 {
	font-weight: 100;
	font-size: 1.5em;
	color: white;
}



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

.puntocolor {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background-color: #b46245;
	margin: 0 1em 0 0;
}

.puntoblanco {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background-color: white;
	margin: 0 1em 0 0;
}

.adorno {
	display: flex;
	flex-direction: row;
}

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

/* ACTIVIDADES DEL MES */

.headeractividades {
	margin-top: 70px;
}

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

/* SECCIÓN SUPERIOR EXPLICACION Y REGISTRO */

.explicacion {
	margin: 0 0 2em 0;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.explicacion img {
	display: block;
	object-fit: cover;
	height: 20em;
	width: 100%;
	border-radius: .3em .3em 0 0;
}

.explicaciontexto {
	display: flex;
	background-color: #b46245;
	border-radius: 0 0 .3em .3em;
	box-shadow: 0 .5em 2em #d1d1d1;
	padding: 1em;
	color: white;
	text-align: center;
}

.explicacion h2 {
	padding: 0 .1em 0 .1em;
	font-family: 'Philosopher';
	font-size: 0em;
	color: white;
}

.registro {
	font-size: .8em;
	display: block;
	border-radius: .3em;
	box-shadow: 0 .5em 2em #d1d1d1;
	padding: 2em;
	background-color: #b46245;
	color: white;
}

.registro .punto {
	background-color: white;
}

.registro h2 {
	color: white;
}

.form input {
	display: block;
	width: 100%;
	border-radius: .3em;
	height: 2.5em;
	text-align: center;
}

.registro a {
	margin-top: 2em;
	display: flex;
	background-color: #0A2E33;
	color: white;
	height: 2.5em;
	align-items: center;
	justify-content: center;
	border-radius: .3em;
}

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

/* ACUMAR Y NOTICIAS */

.acumarreap figure {
	position: relative;
	width: 100%;
	overflow: hidden;
	max-height: 25em;
	margin: 0 2em 0 0;
	border-radius: .3em;
	box-shadow: 0 .5em 2em #d1d1d1;
}

.acumarreap img {
	object-fit: cover;
	height: 100%;
	border-radius: .3em;
}

.acumarreap figcaption {
	background-color: rgb(15, 69, 79, .9);
	color: white;
	font-weight: 300;
	padding: 1em;
	position: absolute;
	width: 100%;
	height: 80%;
	top: calc(100% - 3em);
}

.acumar {
	display: flex;
	flex-direction: column;
	margin-top: 2em;
	margin-bottom: 2em;
	min-height: 30em;
	background: url("../imagenes/equipo-acumar.jpg") center center;
	justify-content: flex-end;
	align-content: flex-end;
	align-items: flex-end;
}

.acumar .adorno h2 {
	color: white;
}

.acumar p {
	text-align: end;
	color: #d1d1d1;
}

.enlaceacumar {
	max-width: 30em;
	padding: 1em;
	border-style: solid;
	border-color: white;
	border-width: 1px;
	border-radius: .5em;
	color: white;
	text-align: center;
}

.enlaceacumar a:visited {
	text-decoration: none;
	color: white;
}

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

/* GIGANTE DE ACERO */

.gigante {
	height: 25em;
	background: url("../imagenes/historia.jpg") center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.titulo {
	padding-top: 13em;
}

.gigante .punto {
	background-color: white;
}

.gigante h3,
.gigante h2 {
	color: white;
}

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

/* HISTORIA Y CIFRAS */

.cifras ul li {
	border-bottom: 2px solid;
	border-color: #D0CEB2;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

.cifras ul h2 {
	padding: 0;
	margin: 0;
	font-family: 'Raleway';
	color: #B46245;
	font-size: 2em;
	text-align: end;
}

.cifras ul h3 {
	padding: 0;
	text-align: end;
}

.cifras p {
	max-width: 50%;
	font-size: .8em;
	font-weight: 600;
}

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

/* LINEA CRONOLOGICA */

.fondotiempo {
	background-color: #0A2E33;
}

.lineatiempo {
	color: white;
}

.lineatiempo h3,
.lineatiempo h2 {
	color: white;
}

.lineatiempo .punto {
	background-color: white;
}

.lineatiempo ul {
	display: flex;
	flex-direction: column;
	border-left: 2px solid;
	border-color: #D0CEB2;
}

.lineatiempo ul li {
	margin: 0 .5em 0 .5em;
}

.lineatiempo p {
	padding: 0;
	font-weight: 250;
	line-height: 17pt;
}

.lineatiempo ul h2 {
	font-family: 'Raleway';
	color: #D0CEB2;
	font-size: 1.5em;
	font-weight: 800;
}

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

/* COMO LLEGO */

.fondocomollego {
	background-color: #306d6d;
}

.headercomollego {
	margin-top: 70px;
}

.headercomollego h3,
.headercomollego h2 {
	color: white;
}

.punto {
	background-color: white;
}

.direccion ul {
	padding: 1em 0 0 0;
}

.direccion li {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	padding: .5em 0 .5em 0;
}

.direccion i {
	color: #b46245;
	font-size: 2em;
	padding: 0 .5em 0 0;
}

.direccion p {
	color: #0A2E33;
	padding: 0;
	font-size: .8em;
}

.direccion a {
	margin-top: 2em;
	display: flex;
	background-color: #b46245;
	color: white;
	height: 2.5em;
	align-items: center;
	justify-content: center;
	border-radius: .3em;
}

.direccion a:hover {
	font-weight: 400;
	background-color: rgb(255, 69, 0);
	transition: all .2s ease-out;
}

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

/* TRANSPORTE */

.transporte ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.transporte li {
	text-align: center;
	margin: .5em;
	padding: 0 1em 0 1em;
	border-style: solid;
	border-width: 2px;
	border-radius: .3em;
	border-color: #b46245;
}

.transporte ul h2 {
	font-family: 'Raleway';
	color: #b46245;
	font-size: 1em;
}

.transporte li:hover {
	background-color: #e3a089;
	transition: all .5s ease-out;
}

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

.imagenes {
	display: flex;
	width: 100%;
	flex-direction: row;
}

.logomenu {
	height: 2.5em;
	padding: 0 1em 0 1em;
}

.logo {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.logo h4 {
	color: aliceblue;
	font-weight: 600;
	padding: 0 0 .5em 1em;
	border-left: 1px inset;
	border-color: white;
}

.logo h5 {
	border-left: 1px inset;
	border-color: white;
}

.logofooter {
	display: flex;
	color: aliceblue;
	font-weight: 600;
	padding-left: 3em;
}

.logofooter h4 {
	color: white;
}

header {
	background-color: #0A2E33;
	font-family: 'Raleway';
}

header .contenedora {
	background-color: #0A2E33;
	position: fixed;
	max-width: 100%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 1em 2em 1em 2em;
	align-items: center;
	z-index: 9998;
}

.visible {
	background-color: #0f454f;
	left: 50%;
	transition: all .25s ease;
}

#menuburger {
	background-color: rgba(0, 0, 0, 0.0);
	color: white;
	cursor: pointer;
	height: 2em;
	width: 2em;
	display: flex;
	position: relative;
	z-index: 9999;
}

#menuburger i {
	padding: 0;
	margin: auto;
}

header nav ul {
	background-color: rgba(0, 0, 0, 0.0);
	position: fixed;
	left: 100%;
	top: 0;
	height: 100vh;
	width: 50%;
	z-index: 9990;
	padding-top: 5em;
	transition: all .5s ease;
}

header nav ul li {
	background-color: white;
	min-width: 5em;
	margin: .15em;
	list-style: none;
}

ul li {
	list-style: none;
}

header nav ul li a {
	background-color: #0f454f;
	color: #ffffff;
	font-weight: 400;
	font-size: .9em;
	padding: .30em .4em;
	text-align: center;
	display: block;
}


header nav ul li a:hover {
	background-color: white;
	color: #0A2E33;
	font-weight: 400;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: dimgrey;
	font-family: 'Raleway';
	background-color: #0A2E33;
}


main {
	display: block;
	flex-grow: 1;
	background-color: white;
}

.evento {
	background-color: #ddd5b6;
	padding: 2em;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 30em;
	border-radius: .3em;
	box-shadow: 0 .5em 2em #d1d1d1;
}

.videoresponsive {
	display: flex;
	justify-content: center;
	width: 100%;
	height: auto;
}

.videoresponsive iframe {
	width: 100%;
	height: auto;
	border-radius: .3em;
}

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

/* EVENTO BLANCO Y NEGRO */

.eventobyn {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.eventobyn img {
	object-fit: cover;
	width: 100%;
	display: block;
	object-fit: cover;
}

.eventobyn figure {
	position: relative;
	overflow: hidden;
	margin: .2em;
	width: 100%;
}

.eventobyn figcaption {
	text-align: end;
	font-family: 'Philosopher';
	font-size: 1.5em;
	background-color: black;
	opacity: .8;
	color: white;
	font-weight: 500;
	padding: 1em;
	position: absolute;
	width: 100%;
	height: 100%;
	top: calc(100% - 2.8em);
	transition: all .6s ease-out;
}

.eventobyn figcaption span {
	font-size: .7em;
	text-align: end;
	display: block;
	padding-top: 1em;

}

.eventobyn figure:hover figcaption {
	display: flex;
	flex-direction: column;
	color: white;
	top: 0;
	transition: all .3s ease-out;
}

.eventobyn2 {
	display: flex;
	flex-direction: column;
}

.eventobyn2 figure {
	height: 100%;
}

.eventobyn2 img {
	height: 100%;
}


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

/* FOOTER Y LOGOS */

footer {
	text-align: center;
	color: darkgray;
	font-size: .8em;
}


#fadu {
	padding: .35em;
	width: 15em;
}


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

/* ACTIVIDADES SEMANA - INDEX */


.actividadessem1 .actividadessemana {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.actividadessemana .cover {
	height: 20em;
}

.actividadessemana .cover img {
	max-width: 17em;
	height: 100%;
	object-fit: cover;
	border-radius: .3em;
}

.actividadessemana figure {
	margin: 1em;
	position: relative;
	overflow: hidden;
	border-radius: .3em;
}

.actividadessemana figcaption {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: rgb(15, 69, 79, .9);
	color: white;
	font-weight: 300;
	padding: 1em;
	position: absolute;
	width: 100%;
	height: 80%;
	top: calc(100% - 3em);
	transition: all .6s ease-out;
}

.actividadessemana figcaption span {
	display: block;
	padding-top: 1em;
	font-size: .8em;
}

.actividadessem1 figure h3 {
	background-color: white;
	border-radius: .3em;
	color: rgb(15, 69, 79, .9);
	font-weight: 300;
	font-size: 1em;
	padding: .5em;
	text-align: center;
	transition: all .6s ease-out;
	margin: 2em 0 1em 0;
}

.actividadessemana figure:hover figcaption {
	display: flex;
	flex-direction: column;
	color: white;
	top: 5em;
	transition: all .3s ease-out;
	overflow: visible;
	z-index: 9900;
}

.actividadessemana figure h3:hover {
	background-color: rgb(237, 86, 30);
	color: white;
	top: 5em;
	transition: all .3s ease-out;
}


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

/* ACTIVIDADES PRINCIPAL - MES TODAS */


.actividades .principal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-bottom: 3em;
	padding-top: 3em;
	border-bottom: 1px inset;
	border-color: #0e5d6c;
}

.actividades .datos {
	padding-left: 2em;
	padding-right: 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.actividades .datos h2 {
	font-weight: 500;
	font-size: 2em;
}

.actividades .datos h4 {
	font-weight: 300;
	color: rgb(15, 69, 79, .9);
}

.actividades .datos h3 {
	background-color: rgb(181, 99, 69, .8);
	border-radius: 13em;
	color: white;
	font-weight: 500;
	padding: .5em;
	text-align: center;
	transition: all .6s ease-out;
	margin-top: 2em;
}

.actividades .datos h3:hover {
	background-color: rgb(237, 86, 30);
	color: white;
	top: 5em;
	transition: all .3s ease-out;
}

.principal img {
	display: block;
	width: 100%;
	height: 20em;
	object-fit: cover;
}

.principal figure {
	margin: 0;
	position: relative;
	overflow: hidden;

}

.principal figcaption {
	background-color: rgb(15, 69, 79, .9);
	color: white;
	font-weight: 500;
	padding-left: 1em;
	position: absolute;
	width: 100%;
	height: 100%;
	top: calc(100% - 3em);
	transition: all .6s ease-out;
	font-family: 'Philosopher';
}

.principal figcaption span {
	display: block;
	padding: 1em;
	font-size: .8em;
}

.principal figure:hover figcaption {
	display: flex;
	flex-direction: column;
	color: white;
	top: 5em;
	transition: all .3s ease-out;
}


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

/* ACTIVIDADES MES - TODAS LAS DE ABAJO */


.actividades .actividades2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.actividades2 .cover {
	height: 20em;

}

.actividades2 .cover img {
	max-width: 17em;
	height: 100%;
	object-fit: cover;
	border-radius: .3em;
}

.actividades2 figure {
	margin: 1em;
	position: relative;
	overflow: hidden;
	border-radius: .3em;
}

.actividades2 figcaption {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: rgb(15, 69, 79, .9);
	color: white;
	font-weight: 300;
	padding: 1em;
	position: absolute;
	width: 100%;
	height: 80%;
	top: calc(100% - 3em);
	transition: all .6s ease-out;
}

.actividades2 figcaption span {
	display: block;
	padding-top: 1em;
	font-size: .8em;
}

.actividades figure h3 {
	background-color: white;
	border-radius: .3em;
	color: rgb(15, 69, 79, .9);
	font-weight: 300;
	font-size: 1em;
	padding: .5em;
	text-align: center;
	transition: all .6s ease-out;
	margin: 2em 0 1em 0;
}

.actividades2 figure:hover figcaption {
	display: flex;
	flex-direction: column;
	color: white;
	top: 5em;
	transition: all .3s ease-out;
	overflow: visible;
	z-index: 9900;
}

.actividades2 figure h3:hover {
	background-color: rgb(237, 86, 30);
	color: white;
	top: 5em;
	transition: all .3s ease-out;
}

.redes {
	display: flex;
	justify-content: center;

}

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

/* ACTIVIDADES PASADAS - TODAS LAS DE ABAJO */

.pasadas {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.pasadas figure {
	border-radius: .3em;
}

.pasadas img {
	object-fit: cover;
}

.pasadas figcaption {
	justify-content: space-between;
	text-align: end;
	font-weight: 300;
	font-size: .9em;
	padding: .5em 0 1em 0;
}

.pasadas h3 {
	display: flex;
	align-items: center;
}


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

/* DISPOSITIVOS DESDE 600PX DE ANCHO*/

@media (min-width: 960px) {


	#menuburger {
		display: none;
	}

	/* se muestran el menu horizontal */
	header nav ul {
		display: flex;
		flex-wrap: wrap;

		/* para que el menú vuelva al "fondo" */
		position: relative;
		top: auto;
		left: auto;
		height: auto;
		width: 100%;
		padding-top: 0;
	}

	header nav ul.visible {
		left: auto;
	}


	/* MEDIAQUERY 1200PX */

	@media screen and (min-width: 1200px) {

		/* REAPERTURA LAMMENS */

		.acumarreap {
			display: flex;
			flex-direction: row;
		}

		.evento {
			background-color: #ddd5b6;
			padding: 2em;
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			display: flex;
			flex-direction: row;
			min-height: 30em;
		}

		.eventotexto {
			max-width: 40%;
			padding: 0 2em 0 0;
		}

		/* ACTIVIDADES PASADAS - TODAS LAS DE ABAJO */

		.pasadas {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.pasadas figure {
			max-width: 15em;
			padding: 1em;
		}

		.pasadas img {

			border-radius: .3em;
		}

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

		/* EVENTO BLANCO Y NEGRO */

		.eventobyn {
			display: flex;
			flex-direction: row;
			justify-content: center;
			max-height: 35em;
		}

		.eventobyn img {
			object-fit: cover;
			width: 100%;
			display: block;
			object-fit: cover;
		}

		.eventobyn figure {
			position: relative;
			overflow: hidden;
			margin: .2em;
			width: 100%;
		}

		.eventobyn figcaption {
			text-align: end;
			font-family: 'Philosopher';
			font-size: 1.5em;
			background-color: black;
			opacity: .7;
			color: white;
			font-weight: 500;
			padding: 1em;
			position: absolute;
			width: 100%;
			height: 100%;
			top: calc(100% - 3em);
			transition: all .6s ease-out;
		}

		.eventobyn figcaption span {
			font-size: .7em;
			text-align: end;
			display: block;
			padding-top: 1em;

		}

		.eventobyn figure:hover figcaption {
			display: flex;
			flex-direction: column;
			color: white;
			top: 0;
			transition: all .3s ease-out;
		}

		.eventobyn2 {
			display: flex;
			flex-direction: column;
		}

		.eventobyn2 figure {
			height: 100%;
		}

		.eventobyn2 img {
			height: 100%;
		}

		/* LINEA CRONOLOGICA */

		.lineatiempo ul {
			display: flex;
			flex-direction: row;
			border-left: 0;
			border-top: 2px solid;
			border-color: #D0CEB2;
		}

		/* EXPLICACION Y SUPERIOR */

		.explicacion h2 {
			padding: 0 .1em 0 .1em;
			font-family: 'Philosopher';
			font-size: 6em;
			color: white;
		}

		.superior {
			padding: 2em;
			margin: auto;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.historia {
			max-width: 70%;
			margin: 0 2em 0 0;
		}

		.explicacion {
			max-width: 70%;
			margin: 0 2em 0 0;
		}

		.registro {
			max-width: 25%;
		}

		.mapa {
			padding: 0 2em 0 0;
			object-fit: cover;
			width: 70%;
		}

		.comollego {
			display: flex;
		}



		.actividades .principal {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding-bottom: 3em;
			padding-top: 3em;
			border-bottom: 1px inset;
			border-color: #0e5d6c;
		}

		.actividades .datos {
			padding-left: 2em;
			padding-right: 2em;
			width: 50%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.actividades .datos h2 {
			font-weight: 500;
			font-size: 2em;
		}

		.actividades .datos h4 {
			font-weight: 300;
		}

		.actividades .datos h3 {
			background-color: rgb(181, 99, 69, .8);
			border-radius: 13em;
			color: white;
			font-weight: 500;
			padding: .5em;
			text-align: center;
			transition: all .6s ease-out;
		}

		.actividades .datos h3:hover {
			background-color: rgb(237, 86, 30);
			color: white;
			top: 5em;
			transition: all .3s ease-out;
		}

	}