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,b,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
    font-family: 'Open Sans', sans-serif;
	/*background: #e1b040;*/
	background: #050321;
}

.section {
    clear: both;
    width: 100%;
    height: 900px;
    box-sizing: border-box;
    position: relative;
}
.section:nth-child(even) {
    color: #050321;
}
.section:nth-child(odd) {
    /*background: #220044;*/
	background: #050321;
    color: white;
}
#welcome {
	font-size: 2rem;
    height: 100px;
    margin: auto;
    display: block;
    width: fit-content;
}


/*------------- welcome---------------*/
#welcome {
	width: auto;
    max-width: max-content;
    z-index: 600;
    font-size: calc(20px + 1vh);
    font-weight: 700;
    line-height: 1em;
    position: absolute;
    top: calc(16px + 0.5vh);
    left: 0;
    right: 0;
    text-align: center;
    color: black;
	letter-spacing: 1.5vw;
}	
@media (max-width: 768px) {
    #welcome {
        font-size: 6vw;
    }
}

/*------------- home---------------*/
#home {
	/*border-bottom: 15px solid #44c8f5;*/
	text-align: center;
	height: 59vh;
    background: white;
}

#home #vibes {
    position: absolute;
    top: calc(35vh - (454px / 2));
    left: 0;
    right: 0;
    text-align: center;
	animation: fadeIn 2s ease-in;
}
#vibes #rosa {
    font-size: calc(120px + 2vh + 4vw);
	font-weight: 100;
    line-height: 1em;
    position: absolute;
    top: calc(10vh);
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    text-shadow: 5px 0px #f5accc;
	position:absolute;
}
#vibes #azul {
    font-size: calc(120px + 2vh + 4vw);
	font-weight: 100;
    line-height: 1em;
    position: absolute;
    top: calc(10vh);
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    text-shadow: -5px 0px #26a9e0;
	position:absolute;
}
@media (max-width: 768px) {
    #vibes #rosa,
	#vibes #azul {
        font-size: 30vw;
    }
}


#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 59vh;
    width: 100%;
    object-fit: cover;
    z-index: 0;
}

/*------------- sec_logo---------------*/
#sec_logo {
	border-bottom: 15px solid #44c8f5;
    text-align: center;
	height: 32vh;
    background-color: white;
}

#logo {
    position: absolute;
/*    top: calc(69vh - (454px / 2));*/
    left: 0;
    right: 0;
    text-align: center;
    /*bottom: calc(32vh - (calc(150px + 40vh) / 2));*/
	top:-115px;
	max-width:95%;
	margin:auto;
}
#logo img {
	width: auto;
	max-width:95%;
    max-height: calc(150px + 20vh);
	position:relative;	
	z-index:600;
	max-width: 90%;
    margin: auto;
    display: block;
	animation: fadeIn 2s ease-in;
}
@media (max-width: 768px) {
    #logo {
		/*bottom: calc(35vh - (calc(80px + 40vh) / 2));*/
		top:-76px;
    }
}

/*--------------------------- Intro-----------------------*/

#intro {
	height:auto;
	background-color: #f6adcd;
}
#intro span {
	color: #101039;
    display: block;
    width: 90%;
    max-width: 900px;
    margin: auto;
    font-size: calc(16px + 7 * ((100vw - 320px) / 680));
    line-height: 1.3em;
    padding-top: 5vh;
    font-weight: 700;
}
#intro img {
	width: auto!important;
	max-height: 100px;
	position: relative;
	z-index: 600;
	max-width: 90%;
	margin: auto;
	display: block;
	margin-top: 4vh;
	padding-bottom: 4vh;	
}

@media (max-width: 768px) {
	#intro img {
		max-height: 70px;
	}
}



/*--------------------------- Explain-----------------------*/
#explain a {
	text-decoration: none;
}
#explain {
	height:fit-content;
	background-color: #e4eff9;
    display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom:20vh;
}
#explain .container {
    display: flex;
    justify-content: center;
	align-items: flex-start;
    width: 100%;
    max-width: 1600px;
    flex-wrap: wrap;
	margin:auto;
	gap: 10px; 
}

#explain .box {
    flex: 1 1 45%;
    margin: 10px;
    color: white;
    text-align: center;
    box-sizing: border-box;
}


#explain span {
	text-align:left;
	color: #101039;
    display: block;
    width: 100%;
    max-width: 900px;
    margin: auto;
    font-size: calc(16px + 0.5vw);
    line-height: 1.3em;

    font-weight: 700;
}
#explain .andalucia {
	padding-top: 1vh;
	color:#f5accc;
    font-size: calc(20px + 0.5vw);
	font-weight:900;
}
#explain .sevilla {
	padding-top: 1vh;
	color:#26a9e0;
    font-size: calc(20px + 0.5vw);
	font-weight:900;
}
#explain .mulish img {
	display:none;
}

.img_apartado {
	aspect-ratio:16 / 9;
}

#explain .box img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.cenefa img {
	width: auto!important;
	max-height: 100px;
	position: relative;
	z-index: 600;
	max-width: 90%;
	margin: auto;
	display: block;
	margin-top: 4vh;
	padding-bottom: 4vh;		
}



@media (max-width: 768px) {
    #explain {
        flex: 1 1 100%;
    }
	.cenefa {
		display:none;
	}
	
	#explain .mulish img {
		padding-bottom: 3vh;
		/*aspect-ratio: 16 / 9;*/
				
		width: auto !important;
		max-height: 70px;
		position: relative;
		z-index: 600;
		max-width: 90%;
		margin: auto;
		display: block;
		margin-top: 4vh;
		padding-bottom: 4vh;
		
	}

}



/*------------------------------------------------------------------------------------------*/
.comfortaa {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.mulish {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*----------------------- Pre-Footer -------------------------------*/
#pre_footer {
	height:5vh;
}
#pre_footer div {
    width: 100%;
    height: 200px;
    background-image: url(resources/mosaico_footer.png);
    background-repeat: repeat-x;
	background-size: contain;
	position:relative;
	top:-60px;
}
/*----------------------- Footer -------------------------------*/
footer {
    background-color: #101039;
    color: white;
    text-align: center;
    padding: 5em 0;
}

footer a {
    color: white;
    text-decoration: none;
}
footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
	margin:auto;
}

footer .box {
    flex: 1 1 30%;
    margin: 10px;
    padding: 20px;
    color: white;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    footer .box {
        flex: 1 1 100%;
    }
}
footer .container img {
	max-width:200px;
	width:50%;
}
footer .box.logo_andalucia img {
    max-width: 400px;
    width: 100%;
}

/* -----------------------------------------------------------------*/
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}