@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: auto; }
body {
	margin: 0;
	padding: 0;
    font-family: 'Nunito', sans-serif;
    overflow-x: hidden;
    overflow-y: auto;
}
.container {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}
img { max-width: 100%; }
a { text-decoration: none; }
header {
    position: fixed;
    width: 100%;
    top: 0;
    box-sizing: border-box;
    padding: 5px;
    background-color: rgba( 0, 0, 0, 0.4 );
    z-index: 5;
}
header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .container img { width: 180px; }
header .container a {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
}
header .container .sociales a { margin: 0 5px; }
header .container .sociales a:nth-child(2) { font-size: 14px; }
.mainMenu {
    list-style: none;
    display: none;
    width: 100%;
    text-align: center;
    margin: 50px 0;
    padding: 0;
}
.mainMenu li { margin: 5px 0; }
.mainMenu li a {
    color: #fff;
    font-size: 20px;
    padding: 5px;
}
.banner {
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
ul#scene {
	padding: 0;
	margin: 0;
	width: 105%;
	height: 110vh;
	overflow: hidden;
	top: -5%;
	left: -5%;
}
.layer {
	width: 105%;
	height: 110vh;
	overflow: hidden;
}
.layer1, .layer2, .layer3, .layer4, .layer5 {
	background-size: cover;
	background-position: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: -1%;
	top: -1%;
}
.layer1 { background-image: url( '../images/header.webp' ); z-index: 1; }
.layer2 {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}
.layer3 img:first-child {
    width: 100px;
    height: auto;
    position: absolute;
    right: 20%;
    top: 40%;
}
.layer3 img:nth-child(2) {
    width: 100px;
    height: auto;
    position: absolute;
    left: 20%;
    bottom: 30%;
}
.layer3 img:nth-child(3) {
    width: 70px;
    height: auto;
    position: absolute;
    left: 60%;
    top: 20%;
}
.layer3 img:last-child {
    width: 60px;
    height: auto;
    position: absolute;
    left: 35%;
    top: 50%;
}
.layer4 { background-image: url( '../images/back-bottom.webp' ); z-index: 2; }
.layer5 { z-index: 3; }
.layer5 img:first-child {
    width: 250px;
    height: auto;
    position: absolute;
    left: 20%;
    top: 40%;
}
.layer5 img:nth-child(2) {
    width: 150px;
    height: auto;
    position: absolute;
    right: 30%;
    top: 30%;
}
.layer5 img:last-child {
    width: 270px;
    height: auto;
    position: absolute;
    right: 10%;
    bottom: 50px;
}
.gift {
    background-color: transparent;
    margin-top: -60px;
    background-color: #AF1CEB;
    background-size: cover;
    padding-bottom: 80px;
}
.gift .container {
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
.gift .container p {
    font-size: 30px;
    color: #fff;
    text-align: center;
}
.gift .container .regalo { position: relative; min-width: 375px; }
.gift .container .regalo .brillo img:first-child {
    position: absolute;
    top: 20px;
    right: 35px;
}
.gift .container .regalo .brillo img:nth-child(2) {
    position: absolute;
    top: 50px;
    right: -10px;
}
.gift .container .regalo .brillo img:last-child {
    position: absolute;
    top: 100px;
    right: 30px;
}
.instalaciones {
    background-color: transparent;
    margin-top: -95px;
    background-image: url( '../images/back-azul.webp' );
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
    padding: 120px 0 50px;
    text-align: center;
}
.instalaciones h2 {
    width: 320px;
    font-size: 50px;
    margin: 20px auto;
    text-align: center;
    color: #fff;
}
.bottomSection, .topSection {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: auto;
}
.topSection { margin-top: -120px; }
.gift .bottomSection { margin-top: -20px; }
.swiper-container {
    width: 100%;
    margin: 40px 0;
    padding: 45px 0;
    overflow: hidden;
}
.swiper-slide {
    opacity: 0.4;
    overflow: hidden;
    transition: 0.7s;
}
.swiper-slide img { width: 100%; }
.swiper-slide-active {
    opacity: 1;
    z-index: 1;
    transform: scale(1.5);
}
.swiper-button-prev:after, .swiper-button-next:after { color: #fff; }
.gallery { background-color: #9FDF40; }
.collage a { transition: 0.4s all; }
.collage a img { border: 5px solid #9FDF40; }
.paquetes {
    background-image: url( '../images/back-rosa.webp' );
    background-position: center center;
    background-size: cover;
    padding: 100px 0;
}
.paquetes .container {
    display: flex;
    align-items: center;
}
.paquetes h2, .contacto h2, .paquetesList h2 {
    width: 450px;
    max-width: 100%;
    color: #fff;
    font-size: 60px;
    line-height: 60px;
    text-align: center;
}
.paquetes .container h2 span, .contacto h2 span, .paquetesList h2 span {
    font-size: 30px;
    display: block;
    line-height: 35px;
    font-weight: normal;
}
.paquetes .container .info { text-align: center; position: relative; }
.paquetes .container img { position: absolute; right: 0; margin-top: 150px; z-index: 2; }
.boton {
    display: inline-block;
    width: auto;
    box-sizing: border-box;
    padding: 20px 40px;
    border-radius: 60px;
    background-color: #fff;
    color: #000;
    transition: 0.4s all;
    margin: 0 auto;
    font-family: 'Nunito', sans-serif;
    font-size:20px;
}
.boton:hover {
    background-color: #000;
    color: #fff;
}
.contacto {
    background-image: url( '../images/back-verde.webp' );
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    margin-top: -30px;
    padding: 130px 0;
}
.contacto h2, .paquetesList h2 { width: 100%; text-align: center; }
.dFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row wrap;
}
.contacto .bloque { width: 48%; margin: 1%; }
#contactoForm { text-align: center; }
#contactoForm input[type="text"], #contactoForm input[type="email"], #contactoForm input[type="number"], #contactoForm input[type="date"], #contactoForm textarea {
    display: block;
    font-family: 'Nunito', sans-serif;
    min-width: 96%;
    width: 100%;
    max-width: 100%;
    padding: 15px 20px;
    border-radius: 50px;
    box-sizing: border-box;
    border: none;
    font-size: 20px;
    margin-bottom: 15px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 57px; 
}
input[type=date]:invalid::-webkit-datetime-edit, ::placeholder {
    color: #9A9A9A !important;
}
input[type=date]{
     -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em; 
}
#contactoForm textarea {
    border-radius: 30px;
    height: 185px;
}
#contactoForm button { border: none;  color: #9a9a9a;}
.mapa {
    background-image: url( '../images/back-azul.webp' );
    background-position: center center;
    background-size: cover;
    box-sizing: border-box;
    padding: 100px 0;
}
.mapa .topSection { margin-top: -220px; }
.mapa .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row wrap;
    padding: 0 20px;
    box-sizing: border-box;
}
.mapaFrame {
    border: none;
    width: 50%;
    height: 400px;
}
.mapa .infoContacto {
    color: #fff;
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
}
.mapa .infoContacto .datos {
    display: flex;
    align-items: center;
    font-size: 25px;
    box-sizing: border-box;
    padding: 15px; 
    color: #fff;
    text-decoration: none;
}
.mapa .infoContacto .datos i { font-size: 50px; margin-right: 10px; }
.mapa .infoContacto h3 { margin: 50px 10px 15px; font-size: 25px; font-weight: normal; }
.mapa .infoContacto .sociales {
    display: flex;
    align-items: center;
}
.mapa .infoContacto .sociales a {
    color: #0BC4CE;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    background-color: #fff;
    border: 1px solid #fff;
    margin: 0 15px;
    transition: 0.4s all;
}
.mapa .infoContacto .sociales a:hover {
    background-color: #0BC4CE;
    color: #fff;
}
.paquetesList {
    background-image: url( '../images/back-rosa.webp' );
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 80px 50px;
    box-sizing: border-box;
    color: #fff;
}
.paquetesList .centered {
	text-align: center;
	margin: 40px auto;
}
.paquetesList .boton {
    display: block;
    width: 100%;
    border-radius: 0;
    color: #FF3DAC;
    padding: 8px;
    text-align: center;
}
.paquetesList .download {
	margin: 20px auto;
    display: block;
    width: 100%;
    border-radius: 0;
    color: #FF3DAC;
    padding: 8px;
    text-align: center;
}
.paquetesList .download {
    display: inline-block;
    width: auto;
    box-sizing: border-box;
    padding: 20px 40px;
    border-radius: 60px;
    background-color: #fff;
    color: #000;
    transition: 0.4s all;
    margin: 0 auto;
    font-family: 'Nunito', sans-serif;
    font-size:20px;
}
.paquetesList .download:hover {
    background-color: #000;
    color: #fff;
}
.table {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.table table { width: 100%; }
.table table b { font-size: 30px; }
.table table td, .table table th { padding: 5px; box-sizing: border-box; }
.table table td.names {
	white-space: nowrap;
    min-width: 240px;
    font-weight: bold;
    line-height: 30px;
}
.table table td.border {
    border: 2px dashed #fff;
    text-align: center;
    line-height: 30px;
}
.ofertas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row wrap;
    background-color: #9FDF40;
}
.ofertas .descuento {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    padding: 25px 15px;
    color: #fff;
    text-align: center;
}
.ofertas .descuento h2 { font-size: 40px; margin: 0; line-height: 50px; }
.ofertas .descuento h3 { font-size: 30px; margin: 0; line-height: 30px; }
.ofertas .descuento b { font-size: 80px; line-height: 100px; margin: 0; display: block; }
.ofertas .descuento p { font-size: 20px; line-height: 20px; margin: 0; text-align: center; }
.ofertas .descuento p b { font-size: 30px; line-height: 30px; display: block; }
.ofertas .descuento.desc1 { background-color: #ff3dac; }
.ofertas .descuento.desc2 { background-color: #ebe030; }
.ofertas .descuento.desc3 { background-color: #af1ceb; }
.ofertas .descuento.desc4 { background-color: #0bc4ce; }
footer { padding: 10px 0; }
footer p {
    text-align: center;
    text-transform: uppercase;
    font-size: 18px
}
.wa-float{
	position:fixed;
	width: 50px;
	height: 50px;
	bottom: 20px;
	right: 20px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	box-shadow: 2px 2px 3px #999;
	z-index:100;
}

.wa-icon{
	margin-top: 10px;
}
#contactoForm .boton { width: 136px; height: 67px;}
#contactoForm .boton.loading {
    background-image: url( '../images/loading.gif' );
    background-position: center center;
    background-size: cover;
}
#contactoForm .boton.loading span{
    display: none;
}
.scrollIcon {
    display: none;
    align-items: center;
    justify-content: flex-end;
}
.scrollIcon div {
    width: 50px;
    height: 50px;
    transform: rotate( 270deg );
}
.collage { margin: 0 auto; }
/* .grid-item { height: 250px; width: auto; display: block; }
.grid-item img { width: 100%; height: auto; max-height: 100%; max-width: 100%; } */
/*Responsive Style*/
@media screen and ( max-width: 1280px ) {
    .gift .container p { font-size: 25px; }
}
@media screen and ( max-width: 1150px ) {
    .paquetes .container img { width: 65%; }
}
@media screen and ( max-width: 1085px ) {
    .gift .container p { font-size: 20px; }
    .layer5 img:first-child { left: 15%; }
    .contacto { padding: 100px 0; }
    .paquetes { padding: 100px 0 36px; }
    .mapa .topSection { margin-top: -180px; }
}
@media screen and ( max-width: 890px ) {
    .gift .container { padding-right: 40px; }
    .layer5 img:first-child { left: 10%; }
    .layer5 img:nth-child(2) { top: 20%; }
    .layer3 img:nth-child(3) { left: 40%; }
    .paquetes .container img { width: 60%; }
    .contacto { padding: 80px 0; }
    .ofertas .descuento h2 { font-size: 40px; line-height: 40px; }
    .ofertas .descuento h3 { font-size: 20px; line-height: 20px; }
    .ofertas .descuento b { font-size: 70px; line-height: 90px;  }
    .ofertas .descuento p { font-size: 15px; line-height: 15px;  }
    .ofertas .descuento p b { font-size: 20px; line-height: 20px; }
}
@media screen and ( max-width: 840px ) {
    .table table td.border { min-width: 150px ;}
	.table table td.names {min-width: 200px;}
}
@media screen and ( max-width: 767px ) {
    .gift .container { display: block; padding: 0 20px 50px; text-align: center; }
    .gift .container .regalo { min-width: initial; width: 375px; max-width: 95%; margin: -20px auto; }
    .layer5 img:first-child { width: 180px; left: 8%; }
    .contacto .bloque { width: 98%; margin: 0 1%; }
    .paquetes .container { display: block; }
    .paquetes h2 { margin: 0 auto 50px; max-width: 100%; }
    .paquetes .container img { position: relative; width: 90%; margin: 0 auto; }
    .paquetes h2, .contacto h2, .paquetesList h2 { font-size: 50px; }
    .paquetes .container h2 span, .contacto h2 span { font-size: 25px; }
    .mapaFrame, .mapa .infoContacto { width: 100%; }
    .ofertas .descuento { width: 100%; }
    .paquetesList { padding: 80px 15px; }
	.scrollIcon { display: flex; }
}
@media screen and ( max-width: 730px ) {
    .mapa .topSection { margin-top: -130px; }
}
@media screen and ( max-width: 650px ) {
    .layer5 img:first-child { width: 150px; left: 5%; }
    .layer5 img:nth-child(2) { width: 110px; }
    .layer5 img:last-child { width: 240px; }
    .layer3 img:first-child { right: 10%; }
    .layer3 img:last-child { top: 35%; }
}
@media screen and ( max-width: 580px ) {
    .layer5 img:first-child { top: 25%; }
    .layer5 img:nth-child(2) { top: 27%; right: 10%; width: 100px; }
    .layer5 img:last-child { right: 21%; width: 150px; bottom: 40px; }
}
@media screen and ( max-height: 600px ) {
    .layer5 img:last-child { width: 110px; bottom: 25x; }
}