/*
COLORES
Azul: #006997
Azul claro: #edf4f8
Dorado: #d8c17f
*/

.montserrat{font-family: 'Montserrat', sans-serif;}
.poppins{font-family: 'Poppins', sans-serif;}

/*
.fs72{font-size:72px; line-height:76px;}
.fs58{font-size:58px;}
.fs55{font-size:55px;}
.fs50{font-size:50px; line-height:54px;}
.fs42{font-size:42px;}
.fs40{font-size:40px; line-height:64px;}
.fs36{font-size:36px;}
.fs28{font-size:28px;}
.fs25{font-size:25px;}
.fs24{font-size:24px;}
.fs20{font-size:20px; line-height:24px;}
.fs18{font-size:18px;}
.fs16{font-size:16px;}
*/

.fs72{font-size:72px; line-height:76px;font-size: 3.75vw; line-height: 4vw;}
.fs58{font-size:58px;font-size: 3.02vw;}
.fs55{font-size:55px;font-size: 2.85vw;}
.fs50{font-size:50px; line-height:54px; font-size: 2.6vw; line-height: 2.82vw;}
.fs42{font-size:42px; font-size: 2.18vw;}
.fs40{font-size:40px; line-height:64px; font-size: 2.1vw; line-height: 3.3vw;}
.fs36{font-size:36px; font-size: 1.87vw;}
.fs28{font-size:28px; font-size: 1.46vw;}
.fs25{font-size:25px; font-size: 1.3vw;}
.fs24{font-size:24px;font-size: 1.25vw;}
.fs20{font-size:20px; line-height:24px;font-size: 1.05vw;line-height: 1.25vw;}
.fs18{font-size:18px;}
.fs16{font-size:16px;}

.regular{font-weight:400;}
.medium{font-weight:500;}
.semi{font-weight:600;}
.bold{font-weight:700;}

.azul{color:#006997;}
.azulclaro{color:#edf4f8;}
.dorado{color:#d8c17f;}
.blanco{color:#ffffff;}

.bgazul{background-color:#006997; color:#FFF;}
.bgazulclaro{background-color:#edf4f8; color:#006997;}
.bgdorado{color:#d8c17f; color:#FFF;}
.bgblanco{color:#ffffff; color:#006997;}

/* General */
html{scroll-behavior: smooth;}
img{max-width:100%;height:auto;}
.separador-azul{background-color:#006997;width:150px;height:5px;margin:30px auto;}

/* Menu */
.menu-item {display:inline-block;vertical-align:middle;}
.menu-item:hover{text-decoration:none;color:#d8c17f;}
.menu-item-btn{display:inline-block;border:solid 2px #d8c17f;padding:10px 20px !important;text-align:center;border-radius:99px;max-width:250px;}
.menu-item-btn:hover{text-decoration:none;color:#FFF;background-color:#d8c17f;}

/* Banner main */
.btn-reserva{border:solid 2px #006997;border-radius:99px;padding:15px 30px;display:inline-block;}
.btn-reserva:hover{background-color:#006997;text-decoration:none; color:#FFF;}
.subtexto-main{max-width:85%;}

/* Playas */
.recuadro-playa{border-radius:10px; overflow:hidden;width: 100%; position:relative;margin-bottom:30px;}
.imagen-playa img{width:100%; height:auto;}
.titulo-playa{position: absolute; bottom: 0px; width: 100%; text-align: center; background-color: rgba(217,194,128,0.8); min-height: 100px; line-height: 100px;padding:10px}
.disponibilidad-playa{margin-bottom:50px;}
.disponibilidad-linea{display:block;width:100%;}
.disponibilidad-linea .fecha, .disponibilidad-linea .aforo, .disponibilidad-linea .estado{display:inline-block;}
.disponibilidad-linea .fecha{width: 75%;position:relative;bottom:4px;text-align:left;text-transform: capitalize; text-align: center;} 
.disponibilidad-linea .aforo{width:19%;text-align:center;margin-right:1%;} 
.disponibilidad-linea .estado{text-align:center;position:relative;bottom:2px;}
.disponibilidad-linea .estado a.disponible{display:block;background-color:#006997;color:#FFF;border-radius:99px;width:100%;padding:3px;border:solid 2px #006997;}
.disponibilidad-linea .estado a.disponible:hover{display:block;color:#006997;background-color:#FFF;text-decoration:none;}
.disponibilidad-linea .estado .agotado{display:block;background-color:#d8c17f;color:#FFF;border-radius:99px;width:100%;padding:3px;border:solid 2px #d8c17f;cursor:no-drop;}

/* Reserva */
.pasos-reserva{visibility:hidden;}
.pasos-reserva .paso-reserva{margin:1.7vw 0;line-height:34px;padding-left:23px;}
.pasos-reserva .paso-reserva:first-child{margin-top:0;}
.pasos-reserva .paso-reserva:last-child{margin-bottom:0;}
.pasos-reserva .paso-reserva .numero{border:solid 4px #d8c17f; border-radius:99px; display:block; float:left; text-align:center; width:48px; height:48px; margin-right:30px;background-color:#FFF;line-height:42px;}
.pasos-reserva:before{content:'';width:8px;height:100%;position:absolute;left: 68px;top:0;background-color:#edf4f8;display:block;z-index:-1;}
.pasos-reserva .paso-reserva a:hover{text-decoration:none;color:#006997;}
.btn-reserva-dorado{display:inline-block;border:solid 2px #d8c17f;padding:0px 30px;text-align:center;border-radius:99px;font-size:12px;margin-left:20px; color:#006997;position:relative;bottom:3px;}
.btn-reserva-dorado:hover{border:solid 2px #d8c17f;background-color:#d8c17f;color:#FFF !important;}

#video-reserva{visibility:hidden;}
.video-proceso{margin-bottom:15px;}
button:focus {outline:0;}
.video-proceso button, .video-proceso button:focus{position:absolute;z-index:10;left:50%;top:48%;border-radius:100%;background-color:transparent;border:none; transform: translate(-50%, -50%);}
.video-proceso button img, .video-proceso button img:focus{border-radius:100%;}
.video-proceso button:hover img{background-color:#FFF;border-radius:100%;}

/* Modal video */
#frame-video .modal-dialog {      max-width: 75%;      margin: 100px auto;  }
.modal-body {  position:relative;  padding:0px;}
.close {  position:absolute;  right:-30px;  top:-30px;  z-index:999;  font-size:2rem; font-weight: normal; color:#fff;  opacity:1; }

/* Punto físico */
.marca-punto-fisico{background:transparent url(../img/marca-punto-fisico-h.png) no-repeat top center; width: 23vw; height: 6vw; background-size: contain; transform: rotate(-90deg); text-align: center; position: absolute; left: -7vw; top: 6.2vw;}
.marca-punto-fisico .rotate{transform: rotate(-90deg);}
.mapa-playas img{max-width:28vw;}
#mapa-playas{visibility: hidden}
.subtexto-fisico{max-width:85%;}

/* Panorámica */
.panoramica-benidorm{min-height:55vh;background:#FFF url(../img/benidorm-panoramica.jpg) no-repeat center center;}

/* Contacto */
.redes-contacto a{margin-right:20px;}
#formulario-contacto{width:100%;}
#formulario-contacto input, #formulario-contacto textarea{width:100%;border:solid 1px #006997; border-radius:10px;line-height:24px;min-height:40px;padding:15px 20px;margin-bottom:20px;}
#formulario-contacto textarea{min-height:150px;}
#formulario-contacto input[type=submit]{text-transform:uppercase;border:none;background-color:#d8c17f;}
#form-ok, #form-error{display:none;}
input:focus {outline:0;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #006997;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #006997;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #006997;
}

/* Footer */
.footer{padding:7vw 7vw 3vw !important;}
.footer-enlaces a{display:block;}
.redes-footer{margin-top:30px; margin-bottom:20px;}
.redes-footer a{margin-right:20px;}
.redes-footer a img{height:20px;}

@media screen and (min-width:1921px){
.fs72{font-size:72px; line-height:76px;}
.fs58{font-size:58px;}
.fs55{font-size:55px;}
.fs50{font-size:50px; line-height:54px;}
.fs42{font-size:42px;}
.fs40{font-size:40px; line-height:64px;}
.fs36{font-size:36px;}
.fs28{font-size:28px;}
.fs25{font-size:25px;}
.fs24{font-size:24px;}
.fs20{font-size:20px; line-height:24px;}
.fs18{font-size:18px;}
.fs16{font-size:16px;}
}
@media screen and (max-width:1540px){
	.subtexto-main{max-width:90%;}
	.menu-item.fs20{font-size: 1.2vw;line-height: 1.35vw;}
}

@media screen and (max-width:1250px){
	.menu-item{margin-left: 1rem!important;margin-right: 1rem!important;}
}

@media screen and (max-width:1220px){
	.menu-item-btn{padding:10px !important;}
}

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

.fs72{font-size:52px; line-height:56px;}
.fs58{font-size:42px;}
.fs55{font-size:38px;}
.fs50{font-size:36px; line-height:42px;}
.fs42{font-size:32px;}
.fs40{font-size:30px; line-height:44px;}
.fs36{font-size:28px;}
.fs28{font-size:22px;}
.fs25{font-size:20px;}
.fs24{font-size:18px;}
.fs20{font-size:16px; line-height:20px;}
.menu-item.fs20{font-size:17px; line-height:20px;}
.fs18{font-size:14px;}
.fs16{font-size:12px;}

}

@media screen and (max-width:1200px){
.menu-item{margin-left: 0.7rem!important;margin-right: 0.7rem!important;}
}
@media screen and (max-width:1100px){

.fs72{font-size:48px; line-height:52px;}
.fs58{font-size:38px;}
.fs55{font-size:36px;}
.fs50{font-size:34px; line-height:38px;}
.fs42{font-size:30px;}
.fs40{font-size:28px; line-height:44px;}
.fs36{font-size:26px;}
.fs28{font-size:20px;}
.fs25{font-size:18px;}
.fs24{font-size:18px;}
.fs20{font-size:16px; line-height:20px;}
.menu-item.fs20{font-size:16px; line-height:20px;}
.fs18{font-size:14px;}
.fs16{font-size:12px;}
}

@media screen and (max-width:1100px){
	.pasos-reserva{width:100%;max-width:100%;flex:0 0 100%;margin-bottom:50px;}
	.video-reserva{width:100%;max-width:100%;flex:0 0 100%;margin-bottom:50px;}
	.pasos-reserva .paso-reserva{margin:30px 0;}
	.marca-punto-fisico{font-size:20px !important;line-height:36px !important;}
}

@media screen and (max-width:1023px){
.subtexto-fisico{max-width:100%;}
.subtexto-main{max-width:100%;}

.fs72{font-size:44px; line-height:48px;}
.fs58{font-size:38px;}
.fs55{font-size:36px;}
.fs50{font-size:34px; line-height:38px;}
.fs42{font-size:30px;}
.fs40{font-size:28px; line-height:44px;}
.fs36{font-size:26px;}
.fs28{font-size:20px;}
.fs25{font-size:18px;}
.fs24{font-size:18px;}
.fs20{font-size:16px; line-height:20px;}
.menu-item.fs20{font-size:16px; line-height:20px;}
.fs18{font-size:14px;}
.fs16{font-size:12px;}

}
@media screen and (min-width:992px){
	.container{max-width:1080px;}
}
@media screen and (min-width:1200px){
	.container{max-width:1240px;}
	/* .disponibilidad-linea .fecha{width: 40%} */
}
@media screen and (min-width:2000px){
	.container{max-width:70%;}
}
@media screen and (max-width:992px){
	#telefono-contacto > span{
		display: block;
		font-size: 0.7em;
	}

	#email-contacto > span {
		display: block;
		font-size: 0.7em;
	}
	.disponibilidad-linea .fecha{bottom:0;}
	.mapa-playas img{max-width:100%;}

	.w-xs-75 {
		width:75% !important;
	}
}
@media screen and (min-width:768px) and (max-width:991px){
	.container{max-width:90%;}
}

@media screen and (max-width:767px){
	.mapa-playas img{max-width:300px;margin:50px auto 0;}
	.marca-punto-fisico{font-size:18px !important;line-height:30px !important;height:46px;width:175px;/*top:48px;*/}
	.marca-punto-fisico{transform: rotate(0);top: 15px;right: 0;left:unset;}
	#formulario-contacto{margin:40px auto;}
	.footer .col-12{text-align:center !important; margin-bottom:30px;}
	.btn-reserva-dorado{margin-left:0; margin-top:20px;}
	.pasos-reserva .paso-reserva .numero{margin-bottom:30px;}
	.video-proceso button{max-width:120px;}
	.telefono{text-align:center;}
	.telefono a{display:block;}
	.redes-contacto{text-align:center;}
	.panoramica-benidorm{background-size:contain;min-height:0;padding-top:41% !important;}
}

.cursor{ cursor: pointer;}

#accordion .card {
	border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
	background: transparent !important;
	border-bottom: 0 !important;
	border-color: #d8c17f;
}

#accordion .card .card-header {
	background: transparent !important;
	border-bottom-width: 0 !important;
}

.card {
	border-radius: 10px;
}

.btn.safety {
	background-color: #006997;
	border: #006997;
	color: white;
}

.chartNumber {
	bottom: -5px !important;
}

.availabilityChart .percentage{
	position: relative;
	bottom: 30px;
	/* font-size: 0.7em; */
}

.btn.safety.disabled {
	background-color: #d8c17f;
}

.sentence::first-letter{
	text-transform: uppercase;
}