@charset "utf-8";

:root {
	--violet: #6e57a0;
	--yellow: #ffeb3c;
	--green: #8cbf4d;
	--dark: #353535;
}

@font-face {
  font-family: 'Flama', sans-serif;
  src: url('../fonts/Flama-Basic.woff');
}

@font-face {
  font-family: 'Flama Book', sans-serif;
  src: url('../fonts/Flama-Book.woff');
}

@font-face {
  font-family: 'Flama Medium', sans-serif;
  src: url('../fonts/Flama-Medium.woff');
}

@font-face {
  font-family: 'Flama Semicondensed', sans-serif;
  src: url('../fonts/FlamaSemicondensed-Basic.woff');
}

@font-face {
  font-family: 'Flama Semicondensed Medium', sans-serif;
  src: url('../fonts/FlamaSemicondensed-Medium.woff');
  font-weight: 500;
}

@font-face {
  font-family: 'Flama Semicondensed Black', sans-serif;
  src: url('../fonts/FlamaSemicondensed-Black.woff');
  font-weight: 900;
}


/**Text**/

p{
	font-family: 'Flama Book',sans-serif;
	font-weight: normal;
	color: var(--dark);
	font-size: .9em;
}


h2{
	font-family: 'Flama Semicondensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--violet);
}

h3{
	font-family: 'Flama Semicondensed', sans-serif;
	text-transform: uppercase;
}

/**Navbar**/

.navbar{
	background-color: #66519c;
}

.navbar-brand{
	font-family: 'IBM Plex Mono', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.navbar-brand span{
	font-weight: 300;
}

.nav-link{
	font-family: 'IBM Plex Mono', sans-serif;
	color: white!important;
}

.nav-link:hover{
	color: var(--yellow)!important;
	border-bottom: solid 2px var(--yellow);
}


/**Header**/

#header{
	background-image: url('../img/header.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100vh;
}

.logo-ppal{
	max-width: 250px;
}

.subtitulo{
	font-family: 'IBM Plex Mono', sans-serif;
	font-size: 1.1em;
	text-align: center;
}

.premios p{
	font-family: 'Flama Semicondensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.2em;
	color: var(--yellow);
}

.premios p span{
	background-color: var(--green);
	color: white;
}

.bcp{
	max-width: 100px;
}

.btn{
	border-radius: 12px;
}

.btn-primary{
	background-color: var(--yellow);
	color: var(--violet);
	border: none;
	font-family: 'Flama Semicondensed', sans-serif;
	font-size: 1.5em;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.btn-primary:hover{
	background-color: var(--green);
}






/**Objetivos**/

.separador{
	width: 50px;
	height: 3px!important;
	background-color: var(--yellow);
	opacity: 1;
}


/*organizacion*/

.organizacion-text{
	line-height: 2em;
}

.organizadores{
	font-family: 'Flama Semicondensed', sans-serif;
	font-size: 1.3em;
	color: var(--green);
	letter-spacing: 3px;
	text-transform: uppercase;
}

.organizador-text p{
	color: var(--violet);
	font-family: 'Flama Semicondensed', sans-serif;
	text-transform: uppercase;
	border-left: solid 3px var(--green);
	padding-left: 5px;
}

.organizador-text p span{
	font-weight: 300;
	color: var(--violet)!important;
	letter-spacing: 0!important;
}




/*Desafios**/

#desafios{
	background-color: var(--violet);
}


.eje{
	background-image: url('../img/fondo-titulo.png');
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 30px;
	color: var(--violet);
	font-family: 'Flama Semicondensed Black', sans-serif!important;
	font-weight: 900;
}

.eje span{
	font-family: 'Flama Semicondensed', sans-serif!important;
	font-weight: 500;
}




/**Inscripciones**/

#inscripciones{
	background-image: url('../img/fondo-inscripcion-mobile.jpg');
	background-position: bottom right;
	background-size: contain;
	background-repeat: no-repeat;
}


#inscripciones h2 span{
	background-color: var(--violet);
	color: white;
}

#inscripciones p span{
	color: var(--violet);
	text-transform: uppercase;
	font-family: 'Flama Semicondensed', sans-serif;
	font-size: 1.5em;
}

.btn-secondary{
	background-color: var(--green);
	border: none;
	color: white;
}

.btn-secondary:hover{
	background-color: var(--violet);
}

.bases{
	color: var(--violet);
}



/**Etapas**/

#etapas{
	background-color: #f2f2f2;
}

.etapa{
	font-size: 1.3em;
	font-family: 'Flama Book', sans-serif;
	color: var(--violet);
}
.etapa span{
	text-transform: uppercase;
	font-family: 'Flama Semicondensed', sans-serif;
	letter-spacing: 3px;
}


/**resumenes**/
#resumenes{
	background-color: #f2f2f2;
}

.participante a{
	font-size:1.5em;
	font-family: 'Flama Book', sans-serif;
	font-weight: 600;
	color: var(--violet);
	text-decoration: none;
	transition-duration: .2s;
}

.participante a:hover{
	color: var(--green);
}

.participante a i.fas{
	font-size: .8em;
}

.icon-yellow{
	color: var(--yellow);
}

/**sponsors**/

 .owl-nav {
	width: 100%;
	top: 30%;
	position: absolute;
	color: #fff;
	font-size: 1em;
}


.owl-carousel .owl-nav button.owl-prev {
 	position: absolute;
	left: -1%;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background-color: var(--violet)!important;
	opacity: 1;
}

.owl-carousel .owl-nav button.owl-next {
 	position: absolute;
	right: -1%;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background-color: var(--violet)!important;
	opacity: 1;
}

footer .owl-nav{
	display: none;
}


/**Contacto**/

#contacto{
	background-color: var(--green);

}

.btn-danger{
	background-color: var(--violet);
	border: none;
	font-family: 'Flama Semidondensed', sans-serif;
	text-transform: uppercase;
}

.btn-danger:hover{
	background-color: var(--yellow);
	color: var(--violet);
}


/**Gracias**/

#gracias{
	background-image: url('../img/header.jpg');
	background-size: cover;
	height: 100vh;
}



/**Footer***/

footer{
	background-color: var(--violet);
}



footer .subtitulo{
	color: var(--yellow);
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 2px;
}





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

	.logo-ppal{
		max-width: 350px;
	}

	.subtitulo{
		font-size: 1.3em;
		text-align: left;
	}

	.premios p{
		font-size: 1.5em;
	}

	#inscripciones{
		background-image: url('../img/fondo-inscripcion.jpg');
		background-position: right;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.eje{
		background-size: contain;
	}
}