@font-face {
	font-family: 'FugazOneRegular';
	font-display: fallback;
	src: url(web/files/FugazOneregular.woff) format('woff');
}
@font-face {
	font-family: 'RalewayMedium';
	font-display: fallback;
	src: url(web/files/Raleway-Medium.woff) format('woff');
}

* {margin: 0; padding: 0;}
html {
	font-family: "RalewayMedium";
	font-size: 14px;
}
a {text-decoration: none;}
button {
	border: 0;
	font-family: 'FugazOneRegular';
}
.clear {clear: both;}
.verde-fondo {background-color: #52A391; color: #fff;}
.azul-fondo {background-color: #0C263A; color: #fff;}
.rojo-fondo {background-color: #c53218; color: #fff;}
.azul {color: #0C263A;}
.azul_titulo{color: rgb(70, 70, 145)}
.negro-fondo {background-color: #000; color: #fff;}
.negro {color: #000;}
.blanco {color: #fff;}
.amarillo {color: #ffe5a6;}
.bold {font-weight: bold;}

footer {
	float: left;
	height: 40px;
	width: 100%;
	background-color: #52A391;
}
@media only screen and (max-width: 1700px) {
	header .enlaces {width: 85%;}
}
@media only screen and (max-width: 1360px) {
	header .enlaces.enlaces-publico a {margin-right: 3%;}
}
@media only screen and (max-width: 1120px) {
	header .enlaces.enlaces-publico a {
		margin-right: 2%;
		font-size: 1.2rem;
	}
}
@media only screen and (max-width: 1000px) {
	header .enlaces {display: none;}
	header #boton-menu-mobile {display: block;}
}
#menu-mobile {
	display: none;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
	z-index: 1001;
}
#menu-mobile a {
	border-bottom: 1px solid #ccc;
	line-height: 2rem;
	width: 100%;
	display: block;
	padding: 1rem 1rem 0.8rem;
	box-sizing: border-box;
	font-size: 1.4rem;
}


@media only screen and (max-width: 1700px) {
	#inicio .bloques-imagenes > div.tercero .chico {
		margin-left: 34vw;
	}
	#inicio .bloques-imagenes > div.cuarto {
		margin-top: -5%;
	}
}
@media only screen and (max-width: 860px) {
	#inicio .bloques-imagenes > div {
		text-align: center;
	}
	#inicio .bloques-imagenes > div.tercero {
		display: none;
	}
	#inicio .bloques-imagenes > div.cuarto {
		margin-top: 10%;
	}
}
@media only screen and (max-width: 663px) {
	#inicio {padding: 30px 5% 50px;}
	#inicio .bloques-imagenes > div.primero .texto-bonos-calahorra {
		width: 90%;
	}
	#inicio .bloques-imagenes > div.cuarto a {margin-bottom: 1rem;}
}

#inicio-publico {position: relative;}
#inicio-publico .promo-texto {
	font-size: 1.2rem;
    width: 50%;
    text-align: left;
    margin: 3rem auto 0;
}
#inicio-publico .enlace-establecimientos {
	font-size: 1.4rem;
    position: absolute;
    top: 40px;
    right: 100px;
}
#inicio-publico .bloques-imagenes {margin-bottom: 10rem;}
#inicio-publico .establecimientos {
	background-image: url(https://bonoscalahorra.com/web/files/bg_establecimientos1.jpg);
	background-repeat: no-repeat;
	width: 112%;
	height: 315px;
	background-size: cover;
	margin-left: -6%;
	text-align: center;
}
#inicio-publico .establecimientos a {
	font-family: 'FugazOneRegular';
	font-size: 2rem;
	padding: 0.6rem 3rem 0.3rem;
	margin-top: 130px;
	display: inline-block;
}
#inicio-publico .redes-texto {
	margin-top: 70px;
	margin-bottom: 20px;
}

#inicio-publico #textos-explicacion {
	margin: 50px auto;
    width: 80%;
}
#inicio-publico #textos-explicacion p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
}
#inicio-publico #textos-explicacion p.azul {font-weight: bold;}
#inicio-publico #textos-explicacion p.subtitulo {
	margin-bottom: .5rem;
	font-weight: bold;
}

#inicio-publico .icono-ayuntamiento-fondo
, #establecimientos .icono-ayuntamiento-fondo {
	text-align: center;
}
#inicio-publico .icono-ayuntamiento-fondo img
, #establecimientos .icono-ayuntamiento-fondo img {
	width: 200px;
}
#inicio-publico #bloques-explicacion {
	text-align: center;
	margin: 5vw 0;
}
#inicio-publico #bloques-explicacion > div {
	display: inline-block;
	width: 400px;
	background-color: #fffdfd;
	padding: 50px;
	height: 430px;
	vertical-align: middle;
	margin: 0px 4%;
	box-sizing: border-box;
	text-align: left;
}
#inicio-publico #bloques-explicacion .que-son {
	background-image: url(web/files/cajasfondo_bonos.png);
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center;
}
#inicio-publico #bloques-explicacion .como-funciona {
	background-image: url(web/files/cajasfondo_funcionan.png);
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center;
}
#inicio-publico #bloques-explicacion .plazos {
	background-image: url(web/files/cajasfondo_plazos.png);
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center;
}
#inicio-publico #bloques-explicacion > div h1 {
	margin-bottom: 2.6rem;
	font-size: 1.2rem;
}
#inicio-publico #bloques-explicacion > div p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	text-align: justify;
}
#inicio-publico #bloques-explicacion > div a {font-size: 1.4rem;}
@media only screen and (max-width: 1765px) {
	#inicio-publico #bloques-explicacion > div {
		margin: 0px 3%;
	}
}
@media only screen and (max-width: 1635px) {
	#inicio-publico #bloques-explicacion > div {
		margin: 0px 1%;
	}
}
@media only screen and (max-width: 1430px) {
	#inicio-publico #bloques-explicacion > div {
		display: block;
		margin: 50px auto;
	}
}
@media only screen and (max-width: 550px) {
	#inicio-publico #textos-explicacion {width: 90%;}
	#inicio-publico .enlace-establecimientos {
		font-size: 1.4rem;
		position: static;
		display: block;
		text-align: center;
		margin-top: -50px;
		margin-bottom: 50px;
	}
	#inicio-publico .bloques-imagenes {margin-bottom: 5rem;}
	#inicio-publico .bloques-imagenes > div.primero {
		text-align: center;
		margin-bottom: 4rem;
	}
	#inicio-publico .bloques-imagenes > div.primero .texto-bonos-calahorra {width: 90%;}
	#inicio-publico .bloques-imagenes > div.segundo {text-align: center;}
	#inicio-publico .bloques-imagenes > div.segundo a {position: static;}
	#inicio-publico .bloques-imagenes > div.tercero {display: none;}
}
@media only screen and (max-width: 450px) {
	#inicio-publico .establecimientos a {font-size:1.4rem;}
	#inicio-publico #bloques-explicacion > div {
		width: 300px;
		height: 320px;
		padding: 35px;
	}
	#inicio-publico #bloques-explicacion > div h1 {
		margin-bottom: 1rem;
		font-size: 1.2rem;
	}
	#inicio-publico #bloques-explicacion > div p {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	#inicio-publico #bloques-explicacion > div a {font-size: 1.2rem;}
}


#apuntate {
	position: relative;
	float: left;
	width: 80%;
	padding: 100px 10% 50px;
}
#apuntate #contenido {float: left;}
#apuntate h1 {
	font-size: 1.8rem;
	margin-bottom: 1rem;
}
#apuntate h1 + p {font-size: 1.4rem;}
#apuntate .volver
, #apuntate form > button
, #apuntate form .boton * {
	font-family: 'FugazOneRegular';
	font-size: 1.4rem;
	text-transform: uppercase;
	float: left;
	padding: .5rem 1rem .4rem;
	text-align: center;
}
#apuntate > p {
	margin-bottom: 5rem;
	font-size: 1.2rem;
}
#apuntate form {float: left;}
#apuntate form h2 {
	font-size: 1.4rem;
	text-transform: uppercase;
	margin: 2rem 0;
	float: left;
	width: 100%;
}
#apuntate form a {
	text-decoration: underline;
	color: blue;
}
#apuntate form input[type="text"] 
, #apuntate form select {
	float: left;
	width: 72%;
	margin-right: 2%;
	margin-bottom: 1rem;
	border: 1px solid #000;
	padding: .8rem 1rem .6rem;
	font-size: 1.4rem;
	box-sizing: border-box;
	background: transparent;
}
#apuntate form .boton {
	text-align: center;
	float: left;
	width: 100%;
}
#apuntate form .boton * {
	width: 150px;
	margin: 50px auto;
	float: none;
}
#apuntate form .bloque-dos
, #apuntate form label {
	float: left;
	width: 100%;
}
#apuntate form .bloque-dos input
, #apuntate form .bloque-dos select {width: 35%;}
#apuntate form label {
	margin-bottom: 1rem;
	font-size: 1.2rem;
}
#apuntate form label span {vertical-align: middle;}
#apuntate form label input[type="checkbox"] {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	margin: 0 47px 0 32px;
	border: 1px solid #000;
}
#apuntate form label input[type="file"] {display: none;}
#apuntate form label button.adjuntar {
	font-family: "RalewayMedium";
	margin: 0;
	width: auto;
	padding: 0.4rem 0.8rem 0.4rem;
	margin-right: 1rem;
	font-size: 1.2rem;
}
#apuntate form label .archivo-subido {
	color: green;
	display: none;
}
@media only screen and (max-width: 1200px) {
	#apuntate form input[type="text"] {
		width: 90%;
	}
	#apuntate form .bloque-dos input {
		width: 44%;
	}
}
@media only screen and (max-width: 850px) {
	#apuntate form input[type="text"] {
		width: 100%;
		margin-right: 0;
	}
	#apuntate form .bloque-dos input {
		width: 100%;
	}
}
@media only screen and (max-width: 600px) {
	#apuntate form label input[type="checkbox"] {margin: 0 10px;}
}

.fondo-chico {
	position: absolute;
	width: 950px;
	height: 835px;
	right: 0;
	opacity: 0.2;
	background-image: url(web/files/img_campana_notext.png);
	background-repeat: no-repeat;
	z-index: -1;
}
#informacion {
	float: left;
	width: 100%;
	padding: 100px 10% 50px;
	box-sizing: border-box;
}
#informacion h1 {
	opacity: 1;
	font-size: 1.8rem;
	margin-bottom: 2rem;
}
#informacion h2 {
	font-size: 1.4rem;
	margin: 2.4rem 0;
}
#informacion p
, #informacion a {
	font-size: 1.4rem;
	line-height: 2.4rem;
}
#informacion a {text-decoration: underline;}
#informacion div.apuntate {
	text-align: center;
	margin: 10rem 0 8rem;
}
#informacion div.apuntate a
, #informacion div.volver a {
	font-size: 1.8rem;
	font-family: 'FugazOneRegular';
	text-decoration: none;
	padding: 1rem 3rem 0.7rem;
}


#contacto .fondo {
	background-color: #52A391;
	text-align: center;
	float: left;
	width: 100%;
	background-size: 100% 90%;
	background-repeat: no-repeat;
}
#contacto .fondo h1 {
	font-family: 'FugazOneRegular';
	font-size: 2.4rem;
	margin: 6rem 0 0;
}
#contacto .fondo .hr {
	display: block;
	width: 75px;
	height: 2px;
	margin: 2rem auto;
	padding: 0;
	background-color: #0C263A;
	box-shadow: none;
}
#contacto .fondo h2 {font-size: 1.8rem;}
#contacto .fondo p {font-size: 1.6rem;}
#contacto .fondo div {
	display: inline-block;
	width: 25%;
	margin: 3% 1% -50px;
	background-color: #fff;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
	padding: 20px 50px;
	box-sizing: border-box;
	height: 200px;
	vertical-align: middle;
}
#contacto .fondo div span {
	display: block;
	font-weight: bold;
	font-size: 1.4rem;
	margin-bottom: 2rem;
}
#contacto .fondo div p {font-size: 1.4rem;}
#contacto + footer {
	position: absolute;
	bottom: 0;
	text-align: center;
	height: 200px;
	background-size: 100% 40px;
	background-repeat: no-repeat;
	background-position-y: bottom;
}
#contacto + footer img {width: 250px;}
#logo-contacto {
	width: 100%;
    float: left;
    text-align: center;
    padding-top: 200px;
}

@media only screen and (max-width: 1500px) {
	#contacto .fondo div {
		height: 210px;
	}
}
@media only screen and (max-width: 1100px) {
	#contacto .fondo div {
		height: auto;
		width: 75%;
		margin: 3% auto 0%;
	}
	#contacto + footer {
		position: static;
		height: 200px;
	}
	#logo-contacto {padding-top: 50px;}
}

#politica {
	float: left;
	width: 80%;
	padding: 100px 10% 50px;
}
#politica h1 {margin: 1rem 0;}
#politica h2 {margin: .5rem 0;}
#politica p {line-height: 1.4rem;}


#banner {
	background-image: url(https://bonoscalahorra.com/web/files/bg_establecimientos1.jpg);
	background-repeat: no-repeat;
    width: 100%;
    height: 315px;
	background-size: cover;
	text-align: center;
	float: left;
}
#banner img {
	height: 250px;
	margin: 40px 0;
}
@media only screen and (max-width: 600px) {
	#banner {height: 215px;}
	#banner img {height: 150px;}
}

/*#establecimientos {
	padding: 50px 5%;
	text-align: center;
	background-color: #52A391;
	float: left;
	width: 100%;
	box-sizing: border-box;
}
#establecimientos .establecimientos p {
	font-size: 1.4rem;
	margin-bottom: .2rem;
}
#establecimientos .establecimientos p + p {font-weight: bold;}
#establecimientos #listado-establecimientos {
	background-color: #fff;
	margin: 50px;
	padding: 80px 50px;
}
#establecimientos #listado-establecimientos table {
	width: 100%;
	border: 1px solid #000;
	border-collapse: collapse;
}
#establecimientos #listado-establecimientos table tr {border: 1px solid #000;}
#establecimientos #listado-establecimientos table th
, #establecimientos #listado-establecimientos table td {
	text-align: left;
	border: 1px solid #000;
	padding: 0.6rem 1rem 0.5rem;
	font-size: 1.2rem;
	text-transform: uppercase;
}
#establecimientos #listado-establecimientos table td + td {text-align: center;}
@media only screen and (max-width: 750px) {
	#establecimientos #listado-establecimientos table td {font-size: 1rem;}
	#establecimientos #listado-establecimientos table td + td {display: none;}
	#establecimientos #listado-establecimientos {
		margin: 50px 0;
		padding: 30px 20px;
	}
}*/

#modal-aviso-covid {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgb(0 0 0 / 40%);
	z-index: 1000;
}
#modal-aviso-covid .contenido {
	/* display: none; */
	position: absolute;
    width: 50%;
    top: 25%;
    left: 25%;
    background-color: #fff;
    padding: 4rem 2rem;
    box-sizing: border-box;
    
}
#modal-aviso-covid .contenido button.cerrar {
	cursor: pointer;
	position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #fdc558;
    border-radius: 50%;
    width: 30px;
	height: 30px;
	font-family: 'RalewayMedium';
	font-weight: bold;
	font-size: 1.2rem;
}
#modal-aviso-covid .contenido p {
	font-size: 1.6rem;
	line-height: 2rem;
	text-align: center;
}
#modal-aviso-covid .contenido p .destacado {
	font-size: 2rem;
	font-weight: bold;
	line-height: 3rem;
}