@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");
@font-face {
    font-family: 'Impact';
    src: url('fonts/Impact.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

html {
    scroll-behavior: smooth;
}

body {
	line-height: 1;
}

blockquote, q {
	quotes: none;
}

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

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		box-sizing: border-box;
	}

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

	body, input, textarea, select {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 400;
		color: #77787b;
		font-size: 14pt;
		line-height: 1.75em;
		letter-spacing: 0.025em;
	}

	h1 {
		font-weight: 700;
		font-size: 1.4em;
		color: #484d55;
		text-align: center;
	}

    h2 {
		color: #5b81bf;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1em;
    }

	a {
		-moz-transition: color .25s ease-in-out;
		-webkit-transition: color .25s ease-in-out;
		-ms-transition: color .25s ease-in-out;
		transition: color .25s ease-in-out;
		color: #717479;
	}

	a:hover {
		text-decoration: none;
	}

	strong, b {
		font-weight: 700;
		color: #9c9c9c;
	}


	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	em, i {
		font-style: italic;
	}

	hr {
		border: 0;
		border-top: solid 1px #575757;
		margin: 2em 0 2em 0;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	.nobr {
		white-space: nowrap;
	}

	br.clear {
		clear: both;
	}

	p, ol, dl, table, blockquote, form {
		margin-bottom: 2em;
	}

/* Section/Article */

	section,
	article {
		margin: 0 0 4em 0;
	}

	section > :last-child,
	article > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

/* Citas */
.quote {
	font-style: italic;
}

/* Icons */
.icon {
    width: 1.3em;
}

/* Descripcion de imagen */
figcaption {
	font-size: 0.9em;
	font-style: italic;
	margin: 0em 0em 0.5em 0em;
}

/* Elemento para lanzar mensajes */
.popupMsg {
        position: fixed;
        top: 3em;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border-radius: 5px;
        z-index: 9999;
        transition: opacity 0.5s ease-in-out;
    }

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

/* Nav */
#nav {
	z-index: 10;
	position: fixed;
	display: flex;
	top: 1em;
	width: 100%;
	align-items: center;
	justify-content: center;
}

	#nav > ul {
		display: flex;
        list-style: none;
		border-radius: 0.35em;
		box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.25);
		padding: 0.3em 1em;
		background-color: rgba(0, 0, 0, 0.406);
		align-items: center;
	}

		#nav > ul > li > a {
			display: flex;
			padding: 0 1em;
			opacity: 75%;
			color: #dedede;
			text-decoration: none;
		}

		#nav > ul > li > a:hover {
			opacity: 100%;
		}
	
/* Mail Pop Up */
#epop {
	position: relative;
    cursor: pointer;
}

#epop::after {
    content: attr(data-epop);
    position: absolute;
    background-color: rgb(0, 0, 0, 0.5);
	color: white;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#epop:hover::after {
    visibility: visible;
    opacity: 1;
}

/* Contenido */
.contenido {
	margin-top: 22em;
	background-color: #ececec;
	margin-bottom: 0;
	text-align: center;
	border-top: 1px solid #bfbfbf;
	transition: background-color 0.3s ease;
 }

/* Container */
.container {
	margin: 0 auto;
	max-width: 100%;
	width: 68em;
	padding: 4em;
	justify-content: center;
}

.container > img {
	align-self: center;
	width: 65%;
	margin: 2em 2em 0em 2em;
}

.container > p {
	margin: 1em 4em;
}

/* Footer */
.footer {
	font-size: 0.9em;
	text-align: right;
	padding: 0 2em;
}

/* ------------------------------------------------------------------------------------ */
/* Homepage */
.homepage {
    background-image: url('img/sietepicos.jpg');
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

	.hero {
		display: flex;
		gap: 3em;
		text-align: justify;
		align-items: center;
		position: relative;
		top: 14em;
        width: fit-content;
		margin: auto;
		transform: translateX(-20%);
		padding: 3em;
		border: 0.9em solid rgb(0, 0, 0);
	}

		.hero h1 {
			display: none;
			font-weight: 500;
			text-align: justify;
			text-transform: uppercase;
			color: #ffffff;
			font-size: 3em;
			letter-spacing: 0.3em;
			padding: 0;
            text-decoration: none;
		}

		#subtitle {
			width: 12em;
			color: #e9e9e9;
			text-transform: uppercase;
			margin: 0;
			display: block;
			letter-spacing: 0.2em;
			font-size: 1.2em;
		}

		#logo-lps {
			width: 8em;
			height: 8em;
			border-radius: 50%;
		}
    
    #logo-hre {
	width: 16em;
    }

.button-style1 {
    padding: 1em 2em;
    border: 1px solid;
    border-radius: 0.35em;
    font-weight: 600;
    background-color: #5c82ab;
    color: #ededed;
    text-decoration: none;
}
.button-style1:hover {
    background-color: #4183c9;
}

/* CURSOS */
#cursos-info {
	margin: 2em;
	text-indent: 1em;
    color: rgb(255, 255, 255);
	text-align: justify;
	justify-content: center;
	display: flex;
	flex-direction: row;
	gap: 6em;
	align-items: center;
}

#cursos-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

#cursos-button > p {
	font-size: 1.4em;
	text-align: center;
	font-weight: 700;
	color: rgb(255, 255, 255);
}

#cursos-button:hover > p {
	color: #86b3e0;
  }

#cursos-button:hover #logo-hre {
	content: url("./img/cursosBlue.png");
  }

/* ABOUT US */
#h1-about > p {
	margin: 0.5em;
}

#about-us {
	max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
	text-align: justify;
	width: 70%;
	margin: auto;
	text-indent: 0.5em;
}

#about-us > div > ul > li {
	list-style: disc;
}

/* SERRANIA */
#serrania-info {
    text-align: justify;
    color: #444444;
	text-indent: 1em;
	align-items: center;
    margin: 0 20%;
}

#serrania-mas {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #b5b5b5;
    padding: 0.5em;
    width: fit-content;
    margin: auto;
    transform: scale(1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease;
}

#serrania-mas:hover {
    transform: scale(1.05);
    box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.2);
}

/* PAMELA */
#pamela-info {
	text-align: justify;
	display: flex;
	text-indent: 1em;
	align-items: center;
	margin-bottom: 1em;
	margin-right: 2em;
	gap: 5em;
}

#pamela-img {
	margin-left: 7em;
	width: 10em;
}

.video-yt {
	position: relative;
	max-width: 100%;
	width: 560px;
	height: 340px;
	margin: 2em 2em;
}

/* Boton perfiles */
.profile-link {
	text-decoration: none;
	width: fit-content;
}

.profile-btn {
	display: flex;
	gap: 1em;
	background-color: rgb(243, 243, 243);
	border: 1px solid #d1d1d1;
	border-radius: 0.6em;
	padding: 0.5em 0.6em;
	width: fit-content;
	align-items: center;
	cursor: pointer;
    transition: background-color 0.3s ease;
}

.profile-btn > li {
	display: flex;
}

.profile-btn:hover {
	background-color: rgb(239, 239, 239);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-btn:active {
	background-color: rgb(210, 210, 210);
}

.profile-pic {
	width: 3em;
	border-radius: 50%;
	border: 1px solid black;
}

.profile-icon {
	width: 2em;
}

#feed-widget {
    width: 100%;
}

/* Lista de documentos de interes */
.recursos {
    list-style: none;
    padding-left: 0;
    margin-top: 4em;
}

    .recursos li {
        border-top: solid 1px #b5b5b5;
        padding: 0.5em 0 0 0;
        margin: 0.5em 0 0 0;
		color: #ececec;
    }

    .recursos li > a {
        text-decoration: none;
		color: #ececec;
    }
	
    .recursos li > a:hover {
        color: #8195df
    }

        .recursos li:first-child {
            border-top: 0;
            padding-top: 0;
            margin-top: 0;
        }
/* Partners */
	.partners {
		display: none;
		flex-wrap: wrap;
		gap: 5em;
		align-items: center;
		justify-content: center;
	}

	.partner {
		width: 10em;
	}

/*------------------------------------SERRANIA---------------------------------*/
.serrania {
    background-image: url('img/fondo-serrania.jpeg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

#serrania-impact {
    text-align: justify; 
    color: #333333; 
    font-family: Impact;
    font-size: 4em; 
    margin: 0.5em; 
    font-weight: 400;
}

#intro-serrania {
    color: #656464;
    margin: 1em auto;
	text-indent: 1em;
	text-align: justify;
}

#objetivos-serrania {
    margin: 0 12%;
}

#objetivos-serrania > li {
    margin-top: 0.5em;
}

#serrania-pics {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2em;
    margin: 2em auto;
}

#serrania-pic {
    width: 400px;
}

#descarga-guia {
    display: flex;
    flex-direction: row;
    margin: 2em auto;
    align-items: center;
    gap: 3em;
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
}

#descarga-guia:hover{
    transform: scale(1.03);
}

#descarga-guia > img {
    width: 400px;
}


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

/* -------------------------------------------------------------------------------------- */
/* Version XL */

	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 12pt;
			}
	}

/* Version Grande */

	@media screen and (max-width: 1400px) {

            #serrania-pic {
                width: 300px;
            }

		/* Hero */
		.hero {
			margin-left: 15em;
			margin-right: 15em;
		}

	}

/* Version Mediana */
@media screen and (max-width: 1000px) {
    #serrania-pics {
        flex-rows:
    }
 }

/* ----------------------------- VERSION MOVIL --------------------------------- */

	@media screen and (max-width: 736px) {

		/* Basic */

			body, input, select, textarea {
				line-height: 1.5em;
				font-size: 10.5pt;
				letter-spacing: 0;
			}

			h1 { font-size: 1.3em; }

			h2, h3, h4, h5, h6 {
				font-size: 1.2em;
				letter-spacing: 0.05em;
				margin: 0 0 1em 0;
			}

			hr {
				margin: 1em 0 1em 0;
			}

			.hero {
				margin-right: 10em;
			}

			.hero > p {
				font-size: 1em;
			}

		/* Section/Article */

			section, article {
				clear: both;
			}

			header br {
				display: none;
			}

			header.style1 {
				padding: 0 0 1em 0;
			}

				header.style1 h2 {
					font-size: 1.5em;
					letter-spacing: 0.075em;
					line-height: 1.25em;
				}

				header.style1 p {
					font-size: 1em;
					letter-spacing: 0;
					display: block;
					margin: 0;
				}
		.contenido {
			font-size: 1.1em;
		}
		.container {
			padding: 3em;
		}
		.container > img {
			width: 90%;
			margin: 1em 1em 0em 1em;
		}
		.container > p {
			margin: 1em 0em;
		}

		.epop::after {
			position: fixed;
			text-align: center;
			top: 4em;
		}

		#epop:hover::after {
			visibility: hidden;
			opacity: 0;
		}

		/* Hero */

			.hero {
				flex-direction: column;
				gap: 2em;
				margin-left: 3.5em;
				margin-right: 4.5em;
				padding: 2em;
				top: 15em;
				transform: translateX(0);
			}

			#logo-lps {
				width: 8em;
				height: 8em;
			}

			.hero > h1 {
				font-size: 2em;
			}

			#subtitle {
				width: 8em;
			}

		#about-us {
			width: 100%;
			margin: 0;
			}

        #cursos-info {
            margin: 2em 0;
			flex-direction: column;
			gap: 1em;
        }

        #serrania-info {
            margin: 2em 0;
        }
		
		#logo-hre {
			width: 10em;
		}

		#cursos-button > p {
			font-size: 1.2em;
		}

		#pamela-info {
			margin-right: 0;
		}

		#pamela-img {
			display: none;
		}

        #feed-widget {
            width: 100%;
        }

		/* Partners */
		.partners {
			gap: 2em;
		}
	
		.partner {
			width: 7em;
		}

		/* About Us */
		.text-about {
			top: 8em;
			margin: 2em;
			border: 0.9em solid rgb(0, 0, 0);
		}

		.video-yt { /*QueDA RRARISIMOO*/
			width: 258px;
			height: 145px;
			margin: 1em 0em;
		}

        /* Serrania */

        #serrania-pic {
            width: 250px;
        }

        #descarga-guia {
            flex-direction: column;
            gap: 0;
        }

        #descarga-guia > img {
            width: 300px;
        }
        
        .serrania {
            background-position: 70% center;
        }

	}