@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
	--rojo-fair-play: #FF0F00;
	--negro: #212429;
	--gris-fair-play: #58585A;
	--gris-medio: #ACB5BD;
	--gris-claro: #F0F0F0;
}

/*-----------------------------
Header global
-----------------------------*/
header{
	width: 100%;
	height: 57px;
	margin: 0;
	top: 0;
	padding: 0 15px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: white;
	position: -webkit-sticky;
	position: sticky;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	border-radius: 0 0 5px 5px;
  -webkit-box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.16);
	font-weight: 400;
	z-index: 1;
}

h1{
	margin: auto 0;
}

h1 a{
	width: 135px;
	height: 21.91px;
	display: block;
	background: url("../img/logo.png") no-repeat center / cover;
	text-indent: -9999px;
}

.boton{
	text-align: center;
	display: inline-block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	color: white;
	text-decoration: none;
	font-size: 10.4px;
	font-weight: 500;
	border-radius: 2.5px;
	-webkit-box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.16);
	        box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.16);
	cursor: pointer;
}

.boton_principal{
	background-color: var(--rojo-fair-play);
}

.boton_principal:active{
	background-color: #c92a2a;
}

.boton_secundario{
	background-color: var(--gris-medio);
}

.boton_secundario:active{
	background-color: #868e96;
}

/*-- Esconder menú de navegación en móvil --*/

#nav_principal{
	display: none;
}

#social_media_header{
	display: none;
}


/*-- Menú de hamburguesa --*/

/*-- Botón --*/
.ham {
  /* always keep ham on top of everything */
  z-index: 1000;
  width: 36px;
  height: 36px;
	margin: auto 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  /* show the menu image */
  background-image: url("https://ljc-dev.github.io/testing0/ham.svg");
  background-size: 100%;
}

.showClose {
  background-image: url("https://ljc-dev.github.io/testing0/ham-close.svg");
}

/*-- Contenido --*/
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  background: #3E3E3E;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
  /* hide the menu above the screen by default */
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  /* transition adds a little animation when sliding in and out the menu */
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.showNav {
  /* show the menu */
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.navbar ul {
  width: 100%;
  height: 100%;
	margin: 0;
	padding: 75px 20px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column wrap;
	flex-flow: column wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
  list-style: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar ul li{
	width: 100%;
	margin-bottom: 10px;
	text-align: right;
}

.navbar ul li a {
	width: 100%;
	height: 45px;
	padding: 2.8% 6%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #4c4c4c;
	display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 17px;
	border-radius: 2.5px;
}

.navbar ul li a:hover, .navbar ul li a:focus {
	background-color: #5c5c5c;
}

#social_media_ham{
	width: 100%;
	margin-top: 20px;
	margin-right: 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
}

#social_media_ham a{
	width: 23px;
	height: 23px;
	margin-left: 12px;
	text-indent: -9999px;
}

#social_media_ham a:nth-child(1){
	background: url("../img/icons/linkedin.png") no-repeat 0 2px / 20px;
}

#social_media_ham a:nth-child(2){
	background: url("../img/icons/instagram.png") no-repeat 0 2px / 20px;
}

#social_media_ham a:nth-child(3){
	background: url("../img/icons/facebook.png") no-repeat 0 2px / 20px;
}

#social_media_ham a:nth-child(4){
	width: 32px;
	background: url("../img/icons/youtube.png") no-repeat 0 2px / 30px;
}
/*-----------------------------
Fin de header global
-----------------------------*/



/*-----------------------------
Footer global
-----------------------------*/
footer{
	padding: 50px 15px 30px 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	color: #B0B0B0;
	background-color: #2E2E2E;
}

#mc_embed_signup{
	width: 100%;
	margin-bottom: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

#mc_embed_signup form{
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

#mc_embed_signup_scroll{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

.mc-field-group{
	width: 72%;
}

.mc-field-group label{
	display: none;
}

.mc-field-group input{
	width: 100%;
	height: 28px;
	padding: 0 7px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font: inherit;
	font-size: 12px;
	border: none;
	border-radius: 3px 0 0 3px;
}

#btn_submit{
	width: 28%;
}

#btn_submit input{
	width: 100%;
	height: 28px;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	border: none;
	border-radius: 0 3px 3px 0;
}

footer h2{
	width: 100%;
	margin: 0 0 15px 0;
	font-weight: 500;
	font-size: 14px;
	color: white;
}

#correo_telefono, #social_media_footer{
	width: 180px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

#correo_telefono a, #social_media_footer a{
	display: inline-block;
	font-size: 10px;
	font-weight: 300;
	color: #B0B0B0;
}

#correo_telefono a{
	height: 15px;
	margin-bottom: 5px;
	text-indent: 25px;
}

#correo_telefono a:nth-child(1){
	background: url("../img/icons/mail.png") no-repeat 0 2px / 15px;
}

#correo_telefono a:nth-child(2){
	background: url("../img/icons/telephone.png") no-repeat 0 2px / 13px;
}

#correo_telefono a:nth-child(4){
	margin-top: 10px;
}

#social_media_footer{
	width: 100%;
	margin: 25px auto 0 auto;
	padding: 0 22%;
-webkit-box-sizing: border-box;
        box-sizing: border-box;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

#social_media_footer a{
	width: 23px;
	height: 23px;
	text-indent: -9999px;
}

#social_media_footer a:nth-child(1){
	background: url("../img/icons/linkedin.png") no-repeat 0 2px / 23px;
}

#social_media_footer a:nth-child(2){
	background: url("../img/icons/instagram.png") no-repeat 0 2px / 21px;
}

#social_media_footer a:nth-child(3){
	background: url("../img/icons/facebook.png") no-repeat 0 2px / 21px;
}

#social_media_footer a:nth-child(4){
	width: 31px;
	background: url("../img/icons/youtube.png") no-repeat 0 2px / 30px;
}

#copyright_info{
	width: 100%;
	margin: 30px 0 0 0;
	font-size: 9px;
	font-weight: 300;
	text-align: center
}
/*-----------------------------
Fin footer global
-----------------------------*/



@media (min-width: 440px){
	.boton{
		font-size: 12px;
		font-weight: 700;
	}
	
	#social_media_footer{
		width: auto;
		margin: 0 0 0 auto;
		padding: 0;
	-webkit-box-sizing: border-box;
					box-sizing: border-box;
		-webkit-box-pack: end;
				-ms-flex-pack: end;
						justify-content: flex-end;
	}
	
	#social_media_footer a:nth-child(2), #social_media_footer a:nth-child(3), #social_media_footer a:nth-child(4){
		margin-left: 15px;
	}
}


@media (min-width: 768px){
	
	/*-----------------------------
	Header 768px
	-----------------------------*/
	header{
		padding: 0 30px;
	}
	
	/*-- Esconder menú de hamburguesa --*/
	.ham, .navbar{
		display: none;
	}
	
	/*-- Menú principal --*/
	
	#nav_principal{
		width: 320px;
		margin: auto auto auto 35px;
		display: inline-block;
	}
	
	#nav_principal>ul{
		margin: 0;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
				-ms-flex-flow: row wrap;
						flex-flow: row wrap;
		-webkit-box-pack: justify;
				-ms-flex-pack: justify;
						justify-content: space-between;
		list-style: none;
	}
	
	header>nav>ul li a{
		font-size: 15px;
		color: #444;
		text-decoration: none;
	}
	
	header>nav>ul li{
		margin: auto 0;
	}
	
	header>nav>ul li:nth-child(3) a{
		padding: 5px 10px;
		font-size: 12px;
	}
	
	/*-- Redes sociales menú --*/

	#social_media_header{
		width: 110px;
		height: 17px;
		margin: auto 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
				-ms-flex-flow: row wrap;
						flex-flow: row wrap;
		-webkit-box-pack: end;
				-ms-flex-pack: end;
						justify-content: flex-end;
	}
	
	#social_media_header a{
		width: 17px;
		height: 17px;
		margin-left: 8px;
		text-indent: -9999px;
	}
	
	#social_media_header a:nth-child(1){
		background: url("../img/icons/linkedin_drk.png") no-repeat 0 2px / 15px;
	}

	#social_media_header a:nth-child(2){
		background: url("../img/icons/instagram_drk.png") no-repeat 0 2px / 15px;
	}

	#social_media_header a:nth-child(3){
		background: url("../img/icons/facebook_drk.png") no-repeat 0 2px / 15px;
	}

	#social_media_header a:nth-child(4){
		width: 22px;
		background: url("../img/icons/youtube_drk.png") no-repeat 0 2px / 21px;
	}
	/*-----------------------------
	Fin header 768px
	-----------------------------*/
	
	
	/*-----------------------------
	Footer 768px
	-----------------------------*/
	footer{
		padding: 30px;
	}
	/*-----------------------------
	Fin footer 768px
	-----------------------------*/
		
	#cookieConsent{
		padding-left: 3rem;
		padding-right: 3rem;
	}
	
	#cookieConsent a.cookieConsentOK {
		width: 10rem;
		float: right;
	}
}




@media (min-width: 1024px){
	
	/*-----------------------------
	Footer 1024px
	-----------------------------*/
	footer{
		padding: 50px 120px 30px 120px;
	}
	/*-----------------------------
	Fin footer 1024px
	-----------------------------*/
	
}




@media (min-width: 1280px){
	
	/*-----------------------------
	Footer 1280px
	-----------------------------*/
	footer{
		padding: 50px 15% 30px 15%;
	}
	/*-----------------------------
	Fin footer 1280px
	-----------------------------*/
	
}