@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300italic,300,100italic,400italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900');

@font-face {
	font-family: 'fontello';
	src: url('../fonts/fontello.eot?10933389');
	src: url('./fonts/fontello.eot?10933389#iefix') format('embedded-opentype'),
		 url('../fonts/fontello.woff?10933389') format('woff'),
		 url('../fonts/fontello.ttf?10933389') format('truetype'),
		 url('../fonts/fontello.svg?10933389#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
  }


/****************************
Genéricas
****************************/

.linkBook{
	outline: none;
	border: none;
	text-decoration: none;
}

.icon-mobile {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: never;   
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	font-variant: normal;
	text-transform: none;   
	line-height: 1em;   
	margin-left: .2em;   
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }


body {
	font-weight: 300;
	font-family: 'Lato', sans-serif;
	background-color: #FFF;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}

.modal-title {
    line-height: 1.42857;
    margin: 0;
	font-weight: bold;
}

.padding0{
	padding: 0px;
}

.bgGray{
	background-color: #f5f5f5;
}

.paddingPhotos0{
	padding: 0px;
}

.paddingBottom10{
	padding-bottom: 10px;
}

.paddingRight10{
	padding-right: 10px;
}

.linkAll{
	outline: none;
	border: none;
	text-decoration: none;
}

.bgElement1 {
    position: absolute; /* Coloca el div de manera absoluta respecto al contenedor más cercano */
    top: 165px; /* Ajusta la posición desde la parte superior (puedes ajustarlo según necesites) */
    left: 0; /* Alinea desde la parte izquierda */
    width: 100%; /* Ancho del 100% */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
}

.bgElement1 img {
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.bgElement2 {
    position: absolute; /* Coloca el div de manera absoluta respecto al contenedor más cercano */
    top: 105px; /* Ajusta la posición desde la parte superior (puedes ajustarlo según necesites) */
    left: 0; /* Alinea desde la parte izquierda */
    width: 100%; /* Ancho del 100% */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
}

.bgElement2 img {
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.bgElement3 {
    width: 100%; /* Ancho del 100% */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
	margin-top: -5px;
	position: absolute;
}

.bgElement3 img {
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.bgElement6{
    width: 100%; /* Ancho del 100% */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
}

.bgElement6 img {
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.img-responsive{
	width:100%;
	height:auto;
}

#surfLevels{
	margin-top: -130px;
	position: absolute;
}

#premiunSurfCoaching{
	margin-top: -130px;
	position: absolute;
}

.bgElement5 {
    position: absolute; /* Coloca el div de manera absoluta respecto al contenedor más cercano */
    top: 0px; /* Ajusta la posición desde la parte superior (puedes ajustarlo según necesites) */
    left: 0; /* Alinea desde la parte izquierda */
    width: 100%; /* Ancho del 100% */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
}

.positionRelative{
	position: relative;
}

.bgDetails{
	top: 261px;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0.7;
	position: absolute;
}

.bgGray2{
	background-color: #f5f5f5;
	width: 100%;
	height: 500px;
}


#surfPrices{
	margin-top: -130px;
	position: absolute;
}

#surfSkateLevels{
	margin-top: -130px;
	position: absolute;
}

#premiunSurfSkateCoaching{
	margin-top: -130px;
	position: absolute;
}

#surfSkatePrices{
	margin-top: -130px;
	position: absolute;
}

#movementMobilityFlow{
	margin-top: -160px;
	position: absolute;
}

#movementYoga{
	margin-top: -160px;
	position: absolute;
}

#movementPrices{
	margin-top: -130px;
	position: absolute;
}

#recoveryIceBath{
	margin-top: -160px;
	position: absolute;
}

#recoveryBreathwork{
	margin-top: -160px;
	position: absolute;
}

#recoveryMassages{
	margin-top: -160px;
	position: absolute;
}

#recoveryPrices{
	margin-top: -130px;
	position: absolute;
}

#aboutPlayaEncuentro{
	margin-top: -130px;
	position: absolute;
}

#aboutHotelBoutique{
	margin-top: -190px;
	position: absolute;
}

#aboutGeneral{
	margin-top: -190px;
	position: absolute;
}


/****************************
FIN Genéricas
****************************/

/****************************
Header
****************************/
.containerScroll {
	position: absolute;  /* Lo posiciona en relación al contenedor */
	top: -135px;           /* Lo coloca en la parte inferior */
	left: 50%;           /* Lo centra horizontalmente */
	transform: translateX(-50%); /* Ajusta para que esté perfectamente centrado */
	z-index: 1;          /* Asegura que el contenido esté por encima del video */
	text-align: center;
}

.containerScrollSurf {
	position: absolute;  /* Lo posiciona en relación al contenedor */
	top: -171px;           /* Lo coloca en la parte inferior */
	left: 50%;           /* Lo centra horizontalmente */
	transform: translateX(-50%); /* Ajusta para que esté perfectamente centrado */
	z-index: 1;          /* Asegura que el contenido esté por encima del video */
	text-align: center;
}

.containerScrollAbout {
	position: absolute;  /* Lo posiciona en relación al contenedor */
	top: -105px;           /* Lo coloca en la parte inferior */
	left: 50%;           /* Lo centra horizontalmente */
	transform: translateX(-50%); /* Ajusta para que esté perfectamente centrado */
	z-index: 1;          /* Asegura que el contenido esté por encima del video */
	text-align: center;
}

.containerScrollFaq {
	position: absolute;  /* Lo posiciona en relación al contenedor */
	top: -135px;           /* Lo coloca en la parte inferior */
	left: 50%;           /* Lo centra horizontalmente */
	transform: translateX(-50%); /* Ajusta para que esté perfectamente centrado */
	z-index: 1;          /* Asegura que el contenido esté por encima del video */
	text-align: center;
}

.scrollLabel{

}

.scrollLabel:before{
	content: '';
	display: inline-block;
	width: 65px;
  	height: 105px;
	background-image: url('../images/scrollLabel.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px; /* Espaciado con el texto */
	position: relative;
	left: 4px; /* Ajusta la posición superior */

}

.headerContentContainer{
	height: 0px;
	z-index: 1015222;
	width:100%;
}

.menu_bar2 {
	display:none;
}

.logoContainerMobile{
	width: 81px;
	z-index: 1;
	float: left;
	margin-top: -4px;
}

.menuBarFlotante{
	display: none;
	position: fixed;
	width:100%;
	z-index: 152522;
	margin-top: -100px;
	padding-right: 15px;
	background-color: #174768;
	height: 50px;
	line-height: 45px;
}

#menuBarID{
	display: none;
}

.menuBar{
	font-size: 11px;
	float: left;
	color: #FFF;
	height: 50px;
	padding-left: 15px;
	text-align: left;
	padding-top: 10px;
	line-height: 50px;
}

.logoBlanco{
	display: none;
	float: left;
	height: 50px;
	padding-left: 10px;
}

.mobileIconBar{
	width: 20px;
	display: inline-block;
}

.mobileIconBar2{
	width: 105px;
	margin-left: 07px;
	display: inline-block;
}


.subMenu {
    display: none;
    position: absolute;
    top: 40px; /* Muestra el submenú debajo del enlace principal */
    left: 22px;
    background-color: #FFF; /* Ajusta según tu diseño */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Sombra para el submenú */
    z-index: 1; 
	width: 230px;
	font-size: 12px;
	padding: 25px;
	padding-top: 20px;
	text-transform: none;
	padding-bottom: 10px;
	border-radius: 0px;
	text-align: left;
	color: #858585;
}

.subMenuMovement {
	width: 140px;
}

.subMenuRecovery {
	width: 140px;
}

.subMenuAbout{
	width: 210px;
}


.subMenu a {
    padding: 0px; /* Ajusta según tu diseño */
    color: #858585; /* Ajusta según tu diseño */
    text-decoration: none;
}

.subMenu a:hover {
    padding: 0px; /* Ajusta según tu diseño */
    color: #0389D0; /* Ajusta según tu diseño */
    text-decoration: none;
}

.headerContainer{
	height: 120px;
	background-color: #FFF;
	position: absolute;
	box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2); /* Sombra en la parte inferior */
	z-index: 5;
	width:100%;
}

.headerContainerBar{
	border-bottom:  1px solid #FFF;
}

.subHeaderContainer{
	color: #FFF;
	font-size: 12px;
	font-weight: 600;
	background-color: none; 
	margin-top: 12px; 
}

.subHeaderMenuContainer{
	width: 100%;
	height: 42px;
	line-height: 42px;
	margin-top: 17px;
}

.botonesMenuContainer{
	text-align: right;
	vertical-align: top;
	padding-left: 15px;
	padding-right: 25px;
}

.logoContainerWeb{
	width: 105px;
	z-index: 1;
	float: left;
	margin-left: 0px;
	margin-top: -09px;
}

.barMenu{
	font-size: 11.5px;
	color: #FFF;
	font-weight: 400;
	margin-top: 25px;
	float: right;
	letter-spacing: 0.2px;
    display: flex;
    flex-direction: row;
}


#menuUL{
	display: none;	
}

.linkHeader {
	position: relative;
	color: #000;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.linkHeaderOn {
	position: relative;
	color: #0389D0;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.linkHeaderSubMenu {
	position: relative;
	color: #000;
	font-weight: 600;
	text-decoration: none;
}

.linkHeaderMenu{
	display: inline-block;
	position: relative;	
	font-size: 13px;
	padding-left: 30px;
}

.linkHeaderMenu:hover .subMenu {
    display: block;
}

.linkHeaderContainer{
	display: inline-block;
	padding-left: 25px;	
	padding-right: 25px;
	border-right: 2px solid #FFF;
}

.linkHeaderContainer2{
	display: inline-block;
	padding-left: 25px;	
	padding-right: 0px;
	border-right: 0px solid #FFF;
}

.linkHeader:hover, .linkHeader:focus  {
	color: #0389D0;
	text-decoration: none;
}

.linkHeader:hover::before {
	transform: scaleX(1);
	color: #FFF;
	transform-origin: bottom left;
}

.linkHeaderOn:hover, .linkHeaderOn:focus  {
	color: #0389D0;
	text-decoration: none;
}

.linkHeaderOn:hover::before {
	transform: scaleX(1);
	color: #FFF;
	transform-origin: bottom left;
}

 /* Línea fija debajo del enlace */
 .linkHeader2::after {
	content: '';
	position: absolute;	
	bottom: -7px; /* Separación de 5px */
	left: 0;
	width: 100%;
	height: 2px;
	background: #FFF;
}


.buttonGeneric1{
	position: relative;
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
	background-color: #0389D0;
	padding: 15px;
	font-weight: 600;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 20px;
	text-decoration: none;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px; 
	border-radius: 50px;
}

.buttonGeneric1:visited, .buttonGeneric1:focus, .buttonGeneric1:active{
	position: relative;
	color: #fff;
	font-size: 12px;
	padding: 15px;
	font-weight: 600;
	background-color: #0389D0;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
}

.buttonGeneric1:hover{
	position: relative;
	color: #fff;
	font-size: 12px;
	padding: 15px;
	font-weight: 600;
	background-color: #000;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
}

#botonMenuNav{
	display: none;
}

#nav_no_mostrar{
	display: none;	
}

.menuBarMobile{
	position: fixed;
	width:100%;
	z-index: 152522;
	margin-top: -50px;
	padding-right: 35px;
	background-color: #174768;
	height: 50px;
	line-height: 53px;
}

/* Si necesitas ajustar el contenedor principal para centrado */
.header-container {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.video-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 ratio */
	background: black;
	overflow: hidden;
}

.video-zoom-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scale(1); /* Ajusta este valor para más o menos zoom */
	transform-origin: center;
	pointer-events: none; /* Desactiva clics */
}

.responsive-video {
	width: 100%;
	height: 100%;
	border: none;
	opacity: 0.90;
}


.headerContainerFaq {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/footer.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	padding: 100px;
	padding-bottom: 0px;
	top: 120px;
	padding-top: 80px;
	position: relative;
	height: 350px;
}


/****************************
FIN Header
****************************/


/****************************
Botón Asistente Virtual
****************************/

.assistant-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 65px;
	height: 65px;
	z-index: 9999999999;
}

.assistant {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Inicialmente sin sombra */
}

.assistant img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes borderPulse {
	0% {
		box-shadow: 0 0 0 0x rgba(41, 167, 26, 0.35);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(41, 167, 26, 0.35);
	}
	100% {
		box-shadow: 0 0 0 0px rgba(41, 167, 26, 0.35);
	}
}

.assistant:hover {
	animation: borderPulse 1s infinite; /* Animación continua */
}

.assistant::before {
	content: '';
	position: absolute;
	top: -4px;
	left: -4px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
}

.assistant-container:hover .tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.tooltip {
	position: absolute;
	bottom: 15%;
	color: #000;
	font-weight: 600;
	right: 100%;
	margin-right: 10px;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	width: 150px;
}

.tooltip::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -5px;
	margin-top: -10px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
}

.buttonTop {
    width: 60px;
	z-index: 9999999999;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 20px;  /* Lo coloca en la parte superior */
    right: 10px; /* Ajusta según la ubicación deseada */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
	display: none;
    transition: transform 0.3s;
}


.buttonTop img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/****************************
FIN Botón Asistente Virtual
****************************/

/****************************
Carousel
****************************/
.indicatorCarousel{
	margin-top: 390px;
	width: 25px;
	right: 0;
	bottom: inherit;
	left: inherit;
	margin-right: 45px;
	border: 0px solid  #F00;
}

.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0.0);
    border: 1px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 1px 5px 1px 1px;
    text-indent: -999px;
    width: 10px;
}

.carousel-caption {
	text-shadow: none;
	left: 0;
	right: 0;
	padding-bottom: 0px;
}

.carousel-indicators .active {
    background-color: #fff;
    height: 12px;
    margin-bottom: 0;
    margin-top: 0;
	margin-right: 4px;
    width: 12px;
    border-radius: 10px;
	border: solid 1px #fff;
	padding: 1px;
	background-clip: content-box; /* support: IE9+ */
}

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.sliderCarousel{
	min-height: 800px; 
	background-color: #fff; 
	border-bottom: 6px solid #174768; 
	box-shadow: 0px 5px 0px #FFEDE3;
}

.slidersRowIndex{
	width:100%;
	position:absolute;
	z-index: 2;
}
.margin0{
	margin: 0px;
}

#botonMenuSolo{
	display: none;
}

.containerSlider {
	height: 385px;
	margin-top: 210px;
	position: absolute;
}

.bgSliderContainer{
	background-image: url(../website_files/slider/1.jpg); 
	background-repeat: no-repeat; 
	background-position: bottom; 
	background-color: #174768;
	background-size: cover;
}

.bgSliderContainer2{
	background-image: url(../website_files/slider/2.jpg); 
	background-repeat: no-repeat; 
	background-position: bottom; 
	background-color: #174768;
	background-size: cover;
}

.bgSliderContainer3{
	background-image: url(../website_files/slider/3.jpg); 
	background-repeat: no-repeat; 
	background-position: 0px 0px; 
	background-color: #174768;
	background-size: cover;
}

.bgSliderContainerAll{
	background-image: url(../website_files/slider/1.jpg); 
	background-repeat: no-repeat; 
	background-position: bottom; 
	background-color: #174768;
	background-size: cover;
}

.containerSlider2 {
	height: 355px;
	margin-top: 50px;
	position: absolute;
}

.letrasSliderAll1{
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.1px;
	font-size: 36px;
	margin-bottom: 05px;
	max-width: 600px;
}

.letrasSliderAll2{
	color: #fff;
	font-weight: 400;
	letter-spacing: 0px;
	font-size: 14px;
	line-height: 18px;
	max-width: 600px;
}

.letrasSliderAll3{
	color: #fff;
	font-weight: 400;
	letter-spacing: 0px;
	font-size: 14px;
	line-height: 18px;
	max-width: 500px;
}

.sliderCarouselAll2 {
	min-height: 478px;
	background-color: #fff;
	border-bottom: 6px solid #66A4D8;
	box-shadow: 0px 5px 0px #FFEDE3;
}

.sliderCarouselAll{
	min-height: 348px; 
	background-color: #fff; 
	border-bottom: 6px solid #66A4D8; 
	box-shadow: 0px 5px 0px #FFEDE3;
}


/****************************
FIN Carousel
****************************/

/****************************
reviews
****************************/

.reviewContainerGeneric{
	margin-top: 45px;
}

.reviewsTitle {
	display: flex; /* Activa Flexbox */
	justify-content: center; /* Centra horizontalmente */
	align-items: center; /* Centra verticalmente */
	height: 450px; /* Opcional: ajusta el contenedor a la altura completa de la pantalla */
}

/* Estilo opcional para la imagen */
	.reviewsTitle img {
	max-width: 100%; /* Evita que la imagen desborde */
	height: auto; /* Mantiene las proporciones */
}

.photoReview{
	width: 36px !important;
	border-radius: 100%;
}

.starContainer{
	margin-bottom: 10px;
}

.starStyle{
	width: 15px !important;
	display: inline-block !important;
}

/* Estilos para el contenedor del review */
.reviewContainer {
    border-radius: 15px;
    padding: 35px;
    padding-left: 10px;
    width: 100%;
    padding-right: 10px;
    margin-bottom: 0px;
    position: relative; /* Necesario para el tooltip */
}

.contentGeneric4{
	max-width: 1100px;
	margin-top: 70px;
}

.reviewContainer2 {
    background-color: #f0f0f0;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; 
    border-radius: 15px;
    padding: 35px;
    padding-left: 25px;
    width: 100%;
    padding-right: 25px;
	display: inline-block;
    margin-bottom: 25px;
}

.reviewTitle{
	margin-bottom: 05px; 
	display: flex; /* Activamos Flexbox */
    justify-content: left; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 50px; /* Opcional: ajusta la altura a la altura de la ventana */
}

/* Contenedor para el contenido del review */
.reviewContent {
    max-width: 100%; /* Ajusta según tus necesidades */
}

/* Contenido truncado */
.reviewContentTruncado {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: justify;
    margin-bottom: 15px;
    overflow: hidden; /* Oculta el texto que se desborda */
    line-height: 1.4em; /* Controla la altura de las líneas */
}

/* Contenido completo, oculto inicialmente */
.reviewContentCompleto {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: justify;
    line-height: 1.4em; /* Controla la altura de las líneas */
    margin-bottom: 15px;
    overflow: hidden; /* Oculta el texto por defecto */
    display: none; /* Oculta el contenido completo inicialmente */
}

/* Contenido completo, oculto inicialmente */
.reviewContentCompleto2 {
    font-size: 13px;
    font-weight: 500;
    color: #000;
    text-align: justify;
    line-height: 1.4em; /* Controla la altura de las líneas */
    margin-bottom: 15px;
}

.reviewFoto{
	display: inline-block;
}

.reviewContainerDatos{
	display: inline-block;
	margin-left: 10px;
}

.reviewFoto, .reviewContainerDatos {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
}

.reviewNombre{
	font-size: 15px;
	font-weight: 600;
	color: #000;
	margin-bottom: 0px;
	line-height: 20px;
	text-align: left;
}

.reviewFecha{
	font-size: 12px;
	font-weight: 600;
	color: #8F8F8F;
	line-height: 15px;
	text-align: left;
}

.reviewlinea{
	height: 10px;
	width: 50px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px; 
	border-radius: 6px;
	background-color: #C2C2C2;
}


.owl-nav button {
	position: absolute;
	top: 50%;
	background-color: #C2C2C2 !important;
	color: #fff;
	margin: 0;
	transition: all 0.3s ease-in-out;
  }

  .owl-nav button.owl-prev {
	left: 0;
  }
  .owl-nav button.owl-next {
	right: 0;
  }
  
  .owl-dots {
	text-align: center;
	padding-top: 0px;
  }
  .owl-dots button.owl-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: inline-block;
	background: #E9E9E9 !important;
	margin: 0 3px;
  }
  .owl-dots button.owl-dot.active {
	background-color: #C2C2C2 !important;
	width: 35px;
	border-radius: 35px;

  }
  .owl-dots button.owl-dot:focus {
	outline: none;
  }
  .owl-nav button {
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  background: rgba(255, 255, 255, 0.38) !important;
  }
  span {
	  font-size: 70px;    
	  position: relative;
	  top: -5px;
  }
  .owl-nav button:focus {
	  outline: none;
  }

/****************************
reviews
****************************/


/****************************
Footer Photo
****************************/

.footerPhotos{
    margin-top: 60px;
}

.footerPhoto {
	height: 250px;
}

.footerPhoto2 {
	height: 510px;
}


/****************************
FIN Footer Photo
****************************/

/****************************
Footer
****************************/

.footerContainer {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/footer.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	padding: 100px;
	padding-bottom: 0px;
	margin-top: 10px;
	padding-top: 80px;
}

.footerContainer2 {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/footer.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	padding: 100px;
	padding-bottom: 0px;
	margin-top: 10px;
	padding-top: 80px;
}


.footerLetras{
	font-size: 12px;
	color: #FFF;
	font-weight: 600;
	margin-top: 40px;
	text-align: center;
	padding: 25px;
	border-top: 1px solid #FFF;
}

.titleFooter{
	font-size: 16px;
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.detailsFooterButton{
	display: inline-block;
	margin-left: 05px;
	margin-right: 05px;
	color: #FFF;
}

.botonRedesFooter{
	cursor: pointer;
}

.buttonSocialMedia{
	color: #FFF;
	font-size: 22px !important;
}

.detailsFooter{	
	color: #FFF;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px;
}

.iconPhone{

}

.iconPhone:before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('../images/phone.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px; /* Espaciado con el texto */
	position: relative;
	top: 4px; /* Ajusta la posición superior */

}

.iconEnvelope{

}

.iconEnvelope:before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('../images/envelope.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px; /* Espaciado con el texto */
	margin-right: 8px; /* Espaciado con el texto */
	position: relative;
	top: 4px; /* Ajusta la posición superior */

}

.iconLocation{

}

.iconLocation:before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('../images/location.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px; /* Espaciado con el texto */
	margin-right: 8px; /* Espaciado con el texto */
	position: relative;
	top: 4px; /* Ajusta la posición superior */

}

.containerReview{
	display: inline-block;
}

.reviewGoogle{

}

.reviewGoogle:before{
	content: '';
	display: inline-block;
	width: 95px;
	height: 40px;
	background-image: url('../images/reviewGoogle.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px; /* Espaciado con el texto */
	position: relative;
	left: 4px; /* Ajusta la posición superior */

}

/****************************
FIN Footer
****************************/

/****************************
Home
****************************/

.contentGenericHome{
	position: absolute;
	margin-top: 70px;
	width: 100%;
}

.contentGenericAbout{
	position: absolute;
	margin-top: 40px;
	width: 100%;
}

.contentGenericSurf{
	position: absolute;
	margin-top: 106px;
	width: 100%;
}


.contentGenericFaq{
	position: absolute;
	margin-top: 190px;
	width: 100%;
}

.containerTitle {
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en columna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Centra el texto dentro de los div internos */
    padding: 20px; /* Añade espacio interno opcional */
	margin-top: 35px;
}

.smallTitle {
    font-size: 13px;
    font-weight: bold;
	color: #0389D0;
	margin-bottom: 0px;
}

.bigTitle {
    font-size: 40px;
    font-weight: 700;
	margin-bottom: 0px;
}

.middleTitle {
    font-size: 14px;
    max-width: 700px;
    font-weight: 400;
}

.containerServices{
	margin-top: 100px;
}

.servicesContainer1 {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/services/service1.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	width: 100%;
	height: 550px;	
	position: relative;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-end; /* Alinea los hijos al fondo del contenedor */
	padding-bottom: 25px;
}

.servicesContainer2 {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/services/service2.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	width: 100%;
	height: 550px;	
	position: relative;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-end; /* Alinea los hijos al fondo del contenedor */
	padding-bottom: 25px;
}

.servicesContainer3 {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/services/service3.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	width: 100%;
	height: 550px;	
	position: relative;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-end; /* Alinea los hijos al fondo del contenedor */
	padding-bottom: 25px;
}

.servicesContainer4 {
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
				url('../images/services/service4.jpg'); /* Imagen de fondo */
	background-size: cover; /* La imagen cubre todo el fondo */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	width: 100%;
	height: 550px;	
	position: relative;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: flex-end; /* Alinea los hijos al fondo del contenedor */
	padding-bottom: 25px;
}

.titleServiceContainer{
	text-align: center;
	display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra horizontalmente los hijos */
    text-align: center;
}

.titleService{
	color: #FFF;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 35px;
}

.buttonService{
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
	background-color: #0389D0;
	padding: 10px;
	display: inline-block;
	font-weight: 600;
	padding-left: 25px;
	padding-right: 25px;
	text-decoration: none;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px; 
	border-radius: 50px;
}

.buttonService:Hover{
	color: #0389D0;
	background-color: #FFF;
	cursor: pointer;
}

.reviewButtonRedMore{
	margin-top: 35px;
}

.buttonReadMore{
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
	background-color: #ccc;
	padding: 10px;
	display: inline-block;
	font-weight: 600;
	padding-left: 25px;
	padding-right: 25px;
	text-decoration: none;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px; 
	border-radius: 50px;
}

.buttonReadMore:Hover{
	color: #FFF;
	background-color: #0389D0;
	cursor: pointer;
}


.containerTitleFaq {
    display: flex;
	color: #FFF;
    flex-direction: column; /* Asegura que los elementos estén en columna */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Centra el texto dentro de los div internos */
    padding: 20px; /* Añade espacio interno opcional */
	margin-top: 25px;
}

.bigTitleFaq {
    font-size: 40px;
    font-weight: 700;
	margin-bottom: 0px;
}

.middleTitleFaq {
    font-size: 14px;
    max-width: 700px;
    font-weight: 400;
}


.containerTitleAll {
    display: flex; /* Activa Flexbox para organizar los elementos en fila */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos verticalmente */
    gap: 20px; /* Espaciado entre los elementos */
    text-align: center; /* Asegura que el texto dentro de los hijos también esté centrado (opcional) */
}

/* Estilo para el título grande */
.bigTitleAll {
    font-size: 55px; /* Ajusta el tamaño del texto */
    font-weight: bold; /* Título en negrita */
    flex-shrink: 0; /* Evita que este div se reduzca si no hay espacio */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
	border-right: 2px solid #0389d0;
	padding-right: 20px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Estilo para el título medio */
.middleTitleAll {
    font-size: 14px; /* Ajusta el tamaño del texto */
    flex-grow: 1; /* Permite que este div ocupe el espacio sobrante */
    max-width: 550px; /* Ajusta el ancho máximo si es necesario */
	text-align: justify;
	font-weight: 500;
	
}

/* Estilo para el título medio */
.middleTitleAll2 {
    font-size: 16px; /* Ajusta el tamaño del texto */
    flex-grow: 1; /* Permite que este div ocupe el espacio sobrante */
    max-width: 550px; /* Ajusta el ancho máximo si es necesario */
	text-align: justify;
	font-weight: 500;
	
}

.contentGenericFooter{
	width: 100%;
}

/****************************
FIN Home
****************************/

/****************************
Surf
****************************/

.containerTitleLevel {
    display: flex; /* Activa Flexbox para organizar los elementos en fila */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos verticalmente */
    gap: 15px; /* Espaciado entre los elementos */
    text-align: center; /* Asegura que el texto dentro de los hijos también esté centrado (opcional) */
	margin-bottom: 25px;
}

/* Estilo para el título grande */
.bigTitleLevel {
    font-size: 22px; /* Ajusta el tamaño del texto */
    font-weight: bold; /* Título en negrita */
    flex-shrink: 0; /* Evita que este div se reduzca si no hay espacio */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
	border-right: 2px solid #0389d0;
	padding-right: 15px;
	font-weight: 600;
	text-transform: uppercase;
}

/* Estilo para el título medio */
.middleTitleLevel {
    font-size: 14px; /* Ajusta el tamaño del texto */
    flex-grow: 1; /* Permite que este div ocupe el espacio sobrante */
    max-width: 550px; /* Ajusta el ancho máximo si es necesario */
	text-align: justify;
	line-height: 18px;
	font-weight: 500;
	display: flex;
	align-items: center; /* Centra verticalmente */
	min-height: 72px;
	
}


.titleSurfLevels{
	margin-top: 55px;
}


.titleSurfLevelsPrices{
	margin-top: -35px;
}

.levelTitle{
	padding: 05px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #0389d0;
	color: #FFF;
	font-size: 16px;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
}

.levelDescription{
	color: #000;
	font-size: 14px;
	margin-top: 20px;
	margin-bottom: 20px;
	font-weight: 400;
}

.levelDetailsTitle{
	color: #000;
	font-size: 15px;
	font-weight: 600;
	padding-top: 0px;
}

.levelDetailsInfo{
	color: #000;
	font-size: 13px;
	font-weight: 400;
	padding-left: 10px;
}

.levelInfo {
    display: flex;
    align-items: stretch; /* Alinea el contenido superiormente */
    gap: 25px; /* Espaciado entre levelPhoto y levelDetails */
}

.levelPhoto {
	max-width: 300px; /* El contenedor tendrá un ancho máximo de 350px */
    width: 100%; /* Asegura que se adapte a diseños responsivos */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Previene desbordes de la imagen */
}

.levelPhoto img {
    width: 100%; /* La imagen se ajusta al ancho del contenedor */
    height: 100%; /* La imagen se ajusta al alto del contenedor */
	border-radius: 15px;
    object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente sin deformarse */
}

.levelDetails {
    flex: 2; /* levelDetails ocupará el doble de espacio que levelPhoto */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaciado entre secciones */
    border-radius: 8px; /* Opcional: bordes redondeados */
}

.containerLevel{
	margin-top: 40px;
	margin-bottom: 30px;
	padding-left: 15px;
	padding-right: 15px;
}

.levelDetailsDesc {
    position: relative;
    padding-left: 20px; /* Espacio para el símbolo */
    text-indent: 0px; /* Alinea el texto con el símbolo */
	margin-bottom: 05px;
}

.levelDetailsDesc:before {
    content: "•"; /* Agrega el símbolo */
    position: absolute;
    left: 0; /* Ubica el símbolo en el margen izquierdo */
    color: #333; /* Color del símbolo */
    font-size: 16px; /* Tamaño del símbolo, ajustable */
    line-height: 1; /* Asegura que el símbolo esté alineado verticalmente */
}

.customRow {
    display: flex;
    flex-wrap: wrap; /* Asegura que las columnas se adapten en pantallas más pequeñas */
    margin: 0; /* Elimina márgenes no deseados */
	margin-top: 0px;
}

.customColumn {
    flex: 1; /* Ambas columnas ocupan el mismo espacio en pantallas grandes */
    display: flex;
    flex-direction: column;
}

.detailsSurfContainer {
    display: flex;	
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
	margin-right: 20px;
	padding-top: 25px;
	text-align: justify;
}

.marginTop35{
	margin-top: 35px !important;
}

.detailsSurfPhotos {
    display: flex;
    flex: 1; /* Asegura que el contenedor de fotos ocupe todo el espacio disponible */
    gap: 25px; /* Espaciado entre fotos */
    height: 100%; /* Igual altura que el contenedor principal */
}

.detailsSurfPhoto {
    flex: 1; /* Cada foto toma el mismo ancho disponible */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Previene que las imágenes se salgan del contenedor */
    height: 100%; /* Ajusta la altura al contenedor padre */
	border-radius: 15px;
}

.detailsSurfPhoto img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: 100%; /* La imagen ocupa todo el alto del contenedor */
    object-fit: cover; /* La imagen mantiene sus proporciones */
}

.detailsSurf {
    position: relative;
    padding-left: 20px; /* Espacio para el símbolo */
    text-indent: 0px; /* Alinea el texto con el símbolo */
	margin-bottom: 05px;
	margin-bottom: 15px;
	font-weight: 400;
}

.detailsSurf:before {
    content: "•"; /* Agrega el símbolo */
    position: absolute;
    left: 0; /* Ubica el símbolo en el margen izquierdo */
    color: #333; /* Color del símbolo */
    font-size: 16px; /* Tamaño del símbolo, ajustable */
    line-height: 1; /* Asegura que el símbolo esté alineado verticalmente */
}

.customTableContainer{
	max-width: 650px;
	margin-top: 25px;
	font-weight: 600;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 85px;
}

.customTable {
    width: 100%; /* La tabla ocupa todo el ancho disponible */
    border-collapse: collapse; /* Une las líneas de los bordes */
    text-align: left; /* Alinea el texto a la izquierda */
}

.customTable th, 
.customTable td {
    border: 0px solid #ddd; /* Bordes finos */
    padding: 10px; /* Espaciado interno */
	padding-right: 20px;
}

.customTable th:nth-child(2), 
.customTable td:nth-child(2),
.customTable th:nth-child(3),
.customTable td:nth-child(3) {
    white-space: nowrap; /* Evita el salto de línea solo en las columnas 2 y 3 */
}

.customTable thead {
    background-color: #4CAF50; /* Color de fondo del encabezado */
    color: white; /* Texto en blanco */
}

.customTable tbody tr:nth-child(odd) {
    background-color: #FFF; /* Color para filas impares */
}

.customTable tbody tr:nth-child(even) {
    background-color: #F3F3F3; /* Color para filas pares */
}

.levelInfoSurfSkate {
    display: inline-block;
}

.levelPhoto1 {
	margin-bottom: 25px;
}


.levelPhoto1 img {
    width: 100%; /* La imagen se ajusta al ancho del contenedor */
    height: 100%; /* La imagen se ajusta al alto del contenedor */
	border-radius: 15px;
    object-fit: cover; /* Asegura que la imagen se recorte proporcionalmente sin deformarse */
}

.levelDetailsInfoMovement{
	color: #000;
	font-size: 13px;
	font-weight: 400;
	text-align: justify;
}

.movementTitle{
	padding: 05px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #F5F65D;
	color: #000;
	font-size: 16px;
	display: inline-block;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 25px;
}

/****************************
FIN Surf
****************************/

/****************************
Faqs
****************************/
 /* Estilos de Categorías */
 .faq-categories {
	margin-bottom: 40px;
	text-align: center;
	font-weight: 400;
	font-size: 14px;
}

.category-button {
	margin: 5px;
	padding: 10px 15px;
	border: none;
	color: #000;
	cursor: pointer;
	border-radius: 5px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
}

.category-button:hover {
	background: #0389D0;
	color: #FFF;
}

.category-button.active {
	background: #0389D0 !important;
	color: white;
}

/* Estilos de Preguntas */
.faq-container {
	max-width: 1000px;
	margin: 0 auto;
	text-align: justify;
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 80px;
}

.faq-item {
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.faq-item h3 {
	margin: 0 0 5px;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
}

/****************************
FIN Faqs
****************************/


/****************************
About
****************************/

.titleAbout{
	margin-top: 15px;
}

.detailsAboutContainer {
    display: flex;	
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
	padding-top: 25px;
	text-align: justify;
}

.marginTop35{
	margin-top: 35px !important;
}

.detailsAboutPhotos {
    display: flex;
    flex: 1; /* Asegura que el contenedor de fotos ocupe todo el espacio disponible */
    gap: 25px; /* Espaciado entre fotos */
    height: 100%; /* Igual altura que el contenedor principal */
}

.detailsAboutPhotoContainer {
    position: relative;
    flex: 1;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
}

.detailsAboutPhotoOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    padding: 20px;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    line-height: 1.5;
    font-family: 'Lato', sans-serif;
}

.detailsAboutPhoto {
    flex: 1; /* Cada foto toma el mismo ancho disponible */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Previene que las imágenes se salgan del contenedor */
    height: 350px; /* Altura específica de la imagen */
	border-radius: 15px;
}

.detailsAboutPhoto img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: 100%; /* La imagen ocupa todo el alto del contenedor */
    object-fit: cover; /* La imagen mantiene sus proporciones */
}

.detailsAboutTitle{
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 20px;
}

.detailsAbout {
    position: relative;
    padding-left: 20px; /* Espacio para el símbolo */
    text-indent: 0px; /* Alinea el texto con el símbolo */
	margin-bottom: 05px;
	margin-bottom: 15px;
	font-weight: 400;
}

.detailsAbout:before {
    content: "•"; /* Agrega el símbolo */
    position: absolute;
    left: 0; /* Ubica el símbolo en el margen izquierdo */
    color: #333; /* Color del símbolo */
    font-size: 16px; /* Tamaño del símbolo, ajustable */
    line-height: 1; /* Asegura que el símbolo esté alineado verticalmente */
}

.detailsAboutNoBullets {
    position: relative;
    padding-left: 0px;
    text-indent: 0px;
	margin-bottom: 05px;
	margin-bottom: 15px;
	font-weight: 400;
}

.titleWaveSeasons{
	margin-top: 75px;
	padding-left: 30px;
	padding-right: 30px;
}

.titleWaveSeason{
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 20px;
}

.waveSeasonTitle{
	font-weight: 600;
	font-size: 22px;
	color: #0389d0;
	margin-bottom: 05px;
	text-align: center;
	margin-top: 20px;
}

.waveSeasonDescription{
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 50px;
	text-align: center;
}

.titleBoutiqueHotel{
	margin-top: 75px;
	padding-left: 30px;
	padding-right: 30px;
}

.containerTitleBoutiqueHotel {
    text-align: left; /* Centra el texto dentro de los div internos */
    display: flex;
	padding-right: 25px;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    height: 100%; /* Asegura que tome todo el alto */
}

.smallTitleBoutiqueHotel {
    font-size: 13px;
    font-weight: bold;
	color: #0389D0;
	margin-bottom: 10px;
}

.bigTitleBoutiqueHotel {
    font-size: 35px;
    font-weight: 700;
	line-height: 38px;
	margin-bottom: 10px;
}

.middleTitleBoutiqueHotel {
    font-size: 14px;
    max-width: 700px;
    font-weight: 400;
	text-align: justify;
	margin-bottom: 25px;
}

.buttonBookNow{
	font-size: 13px;
	font-weight: 600;
	color: #FFF;
	background-color: #0389D0;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	text-transform: uppercase;
	text-decoration: none;	
}

.buttonBookNow:Hover{
	background-color: #000;
	text-decoration: none;	
	outline: none;
	border: none;
}
.colHotelBoutique {
    display: flex;
    align-items: center; /* Asegura que el contenido se alinee verticalmente */
}

.videoAboutMobile{
	display: none;
}


.containerTitleAboutParallel {
    text-align: center; /* Centra el texto dentro de los div internos */
	padding-right: 25px;
}

.smallTitleAboutParallel {
    font-size: 13px;
    font-weight: bold;
	color: #0389D0;
	margin-bottom: 10px;
}

.bigTitleAboutParallel{
    font-size: 35px;
    font-weight: 700;
	line-height: 38px;
	margin-bottom: 30px;
}

.middleTitleAboutParallel {
    font-size: 14px;
    font-weight: 400;
	text-align: justify;
	margin-bottom: 25px;
}

.detailsAboutParallelPhoto {
	border-radius: 15px;
	margin-bottom: 25px;
}

.borderRadius15{
	border-radius: 15px;
}

.containerAboutParallel{
	margin-top: 140px;
	padding-left: 30px;
	padding-right: 30px;
	margin-bottom: 115px;
}

.subTitlesAbout{
	text-align: center;
	padding: 25px;
	background-color: #0389D0;
	color: #FFF;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el texto horizontalmente */
    flex-grow: 1; /* Hace que todos crezcan igual */
	border-radius: 15px;
	margin-top: 25px;
}

.subTitlesAboutName{
    font-size: 18px;
    font-weight: 600;
}

.subTitlesAboutDetails{
    font-size: 14px;
    font-weight: 400;
}

.subTitlesAbout2{
	text-align: center;
	padding: 25px;
	background-color: #F5F65D;
	color: #000;
	display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el texto horizontalmente */
    flex-grow: 1; /* Hace que todos crezcan igual */
	border-radius: 15px;
	margin-top: 25px;
}

.rowsubTitlesAbout {
    display: flex;
    flex-wrap: wrap; /* Permite que se ajusten en pantallas pequeñas */
}

.rowsubTitlesAbout > div {
    display: flex;
}

.videoContainer {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
}

/* Superposición blanca semitransparente */
.video-overlay {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8) url('../website_files/home/poster.jpg') no-repeat center center; 
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
	border-radius: 15px;
}

/* Botón de Play */
.play-button {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-size: 30px;
    color: black;
    cursor: pointer;
    display: flex;
	padding-left: 10px;
    align-items: center;
    justify-content: center;
}

.play-button:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Video */
.responsive-video2 {
    width: 100%;
    height: auto;
    display: block;
}
/****************************
FIN About
****************************/


@media screen and (min-width: 992px) {
	.linkHeaderMenu{
		display: inline-block;
		padding-left: 20px;
		font-size: 12px;
	}

}

@media screen and (min-width: 1200px) {
	.linkHeaderMenu{
		display: inline-block;
		padding-left: 25px;				
		
	}
	
}

@media screen and (max-width: 1280px) {
	.botonesMenuContainer {
		text-align: right;
		vertical-align: top;
		padding-left: 15px;
		padding-right: 25px;
	  }

	  .footerContainer {
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
					url('../images/footer.jpg'); /* Imagen de fondo */
		background-size: cover; /* La imagen cubre todo el fondo */
		background-position: center; /* Centra la imagen */
		background-repeat: no-repeat; /* Evita que se repita */
		padding: 35px;
		padding-bottom: 0px;
		margin-top: 10px;
		padding-top: 80px;
	  }
}



@media screen and (max-width: 1200px) {
	.containerServices {
		margin-top: 70px;
	  }

	  
	.containerLevel{
		margin-top: 40px;
		margin-bottom: 10px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.levelInfo {
		display: inline-block;
		align-items: flex-start; /* Alinea el contenido superiormente */
		gap: 25px; /* Espaciado entre levelPhoto y levelDetails */
	}

	.levelPhoto {
		max-width: 1000px;
		width: 100%;
		height: 350px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border-radius: 10px; /* Opcional: bordes redondeados */
		margin-bottom: 25px;
	  }
	
	.levelPhoto img {
		max-width: 1000px; /* Ajusta el tamaño de la imagen */
		height: auto;
		margin-bottom: 15px;
		border-radius: 10px; /* Opcional: bordes redondeados */
	}
	
	.levelDetails {
		display: flex;
		flex-direction: column; /* Mantiene el contenido de detalles en columna */
		gap: 12px; /* Espaciado entre secciones dentro de levelDetails */
	}
}


@media screen and (max-width: 991px) {
	.containerServices {
		margin-top: 55px;
	}
	
	.detailsAboutPhotos {
		display:  inline-block
	}


	.bgGray2{
		background-color: #f5f5f5;
		width: 100%;
		height: 800px;
	}
	
	/* Estilo para el título medio */
	.middleTitleLevel {
		font-size: 14px; /* Ajusta el tamaño del texto */
		flex-grow: 1; /* Permite que este div ocupe el espacio sobrante */
		max-width: 550px; /* Ajusta el ancho máximo si es necesario */
		text-align: justify;
		line-height: 18px;
		font-weight: 500;
		min-height: 60px;		
	}
	
	.bgElement2 {
		position: absolute; /* Coloca el div de manera absoluta respecto al contenedor más cercano */
		top: 170px; /* Ajusta la posición desde la parte superior (puedes ajustarlo según necesites) */
		left: 0; /* Alinea desde la parte izquierda */
		width: 100%; /* Ancho del 100% */
		height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
		opacity: 0.7;
	}

	.videoAboutMobile{
		display: inline-block;
	}
	
	.containerAboutParallel{
		margin-top: 110px;
		padding-left: 30px;
		padding-right: 30px;
		margin-bottom: 180px;
	}

	.titleWaveSeasons{
		margin-top: 25px;
		padding-left: 30px;
		padding-right: 30px;
	}

	.titleWaveSeason{
		font-size: 30px;
		font-weight: 700;
		margin-bottom: 0px;
	}

	.waveSeasonDescription{
		font-weight: 400;
		font-size: 14px;
		margin-bottom: 30px;
		text-align: center;
	}

	.containerTitleBoutiqueHotel {
		text-align: center; /* Centra el texto dentro de los div internos */
		display: flex;
		flex-direction: column;
		padding-right: 0px;
		justify-content: center; /* Centra verticalmente */
		height: 100%; /* Asegura que tome todo el alto */
	}

	.smallTitleBoutiqueHotel {
		font-size: 13px;
		font-weight: bold;
		color: #0389D0;
		margin-bottom: 0px;
	}

	.bigTitleBoutiqueHotel {
		font-size: 30px;
		font-weight: 700;
		line-height: 38px;
		margin-bottom: 20px;
	}

	.smallTitleAboutParallel {
		font-size: 13px;
		font-weight: bold;
		color: #0389D0;
		margin-bottom: 0px;
	}

	
	.titleAbout{
		margin-top: 0px;
	}

	.bigTitleAboutParallel {
		font-size: 30px;
		font-weight: 700;
		line-height: 38px;
		margin-bottom: 20px;
	}

	.middleTitleBoutiqueHotel {
		font-size: 14px;
		max-width: 700px;
		font-weight: 400;
		text-align: justify;
		margin-bottom: 25px;
		margin-top: 20px;
	}

	.colHotelBoutique {
		display: inline-block;
		align-items: center; /* Asegura que el contenido se alinee verticalmente */
	}

	.containerScrollFaq {
		position: absolute;  /* Lo posiciona en relación al contenedor */
		top: -145px;           /* Lo coloca en la parte inferior */
		left: 50%;           /* Lo centra horizontalmente */
		transform: translateX(-50%); /* Ajusta para que esté perfectamente centrado */
		z-index: 1;          /* Asegura que el contenido esté por encima del video */
		text-align: center;
	}

	.assistant-container {
		position: fixed;
		bottom: 15px;
		right: 15px;
		width: 65px;
		height: 65px;
		z-index: 9999999999;
	  }

	.customRow {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		margin-top: 0px;
	  }
	

	.bigTitleFaq {
		font-size: 30px;
		font-weight: 700;
		line-height: 35px;
		margin-bottom: 05px;
		max-width: 350px;
	}
	
	.middleTitleFaq {
		font-size: 14px;
		max-width: 750px;
		font-weight: 400;
	}	
	
	.headerContainerFaq {
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
					url('../images/footer.jpg'); /* Imagen de fondo */
		background-size: cover; /* La imagen cubre todo el fondo */
		background-position: center; /* Centra la imagen */
		background-repeat: no-repeat; /* Evita que se repita */
		padding: 0px;
		padding-bottom: 0px;
		top: 90px;
		padding-top: 80px;
		position: relative;
		height: 350px;
	}

	
	.contentGenericFaq{
		position: absolute;
		margin-top: 170px;
		width: 100%;
	}

	.containerScroll {
		position: absolute;  /* Lo posiciona en relación al contenedor */
		top: -80px;           /* Lo coloca en la parte inferior */
		left: 50%;           /* Lo centra horizontalmente */
		transform: translateX(-50%); /* Ajusta para que esté perfectamente centrado */
		z-index: 1;          /* Asegura que el contenido esté por encima del video */
		text-align: center;
	}

	.bgElement1 {
		position: absolute; /* Coloca el div de manera absoluta respecto al contenedor más cercano */
		top: 180px; /* Ajusta la posición desde la parte superior (puedes ajustarlo según necesites) */
		left: 0; /* Alinea desde la parte izquierda */
		width: 100%; /* Ancho del 100% */
		height: auto; /* La altura se ajustará automáticamente para mantener la proporción de la imagen */
	}
	
	.bgElement1 img {
		width: 100%; /* Asegura que la imagen ocupe el 100% del ancho del contenedor */
		height: auto; /* Mantiene la proporción de la imagen */
	}
		
	.paddingPhotos0{
		padding: 0px;
	}
	
	.paddingBottom10{
		padding-bottom: 0px;
	}
	
	.paddingRight10{
		padding-right: 0px;
	}

	.paddingBottomMobile10{
		padding-bottom: 10px;
	}
	
	.paddingRightMobile10{
		padding-right: 10px;
	}

	.footerPhotos{
		padding-left: 0px;		
		padding-right: 0px;
		margin-top: 100px;	
	}

	.contentGeneric4{
		margin-top: 145px;
	}

	.reviewsTitle {
		display: flex; /* Activa Flexbox */
		justify-content: center; /* Centra horizontalmente */
		align-items: center; /* Centra verticalmente */
		height: 0px; /* Opcional: ajusta el contenedor a la altura completa de la pantalla */
	}

	.servicesContainer1 {
		height: 450px;	
	}

	.servicesContainer2 {
		height: 450px;	
	}

	.servicesContainer3 {
		height: 450px;	
	}

	.servicesContainer4 {
		height: 450px;	
	}

	.contentGenericHome{
		position: absolute;
		margin-top: 15px;
		width: 100%;
	}

	.padding0{
		padding: 20px;
		padding-bottom: 10px;
	}

	.paddingLeft{
		padding-left: 10px;
	}

	.paddingRight{
		padding-right: 10px;		
	}

	.headerContainer {
		width: 80%;
		height:100%;
		margin:0;
		position: absolute;
		left:-100%;
		/*top:0px;*/
		overflow:auto;
	}

	.titleFooterMobile{
		margin-top: 25px;
		margin-bottom: 0px;
	}

	.reviewGoogle::before {
		content: '';
		display: inline-block;
		width: 71px;
		height: 47px;
		background-image: url('../images/reviewGoogle.svg');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 8px;
		position: relative;
		left: 4px;
		top: 08px;
	  }

	  .footer-container {
		display: flex;
		align-items: center; /* Centra los elementos verticalmente */
		justify-content: center; /* Centra los elementos horizontalmente */
		gap: 10px; /* Espacio entre los elementos */
	  }
	  
	  .detailsFooterButton {
		display: flex;
		align-items: center;
		justify-content: center;
	  }
	  
	  .containerReview {
		display: flex;
		align-items: center;
		justify-content: center;
	  }

	  .video-container {
		position: relative;
		width: 100%;
		height: auto;
		margin-top: 89px;
		overflow: hidden;
		background: black;
	  }

	.customTable th, 
	.customTable td {
		border: 0px solid #ddd; /* Bordes finos */
		padding: 10px; /* Espaciado interno */
		padding-right: 10px;
	}

	.menu_bar2 {
		display:block;
		width:100%;
		padding-top: 10px;
		z-index: 152522;
		background-color: #FFF;
		height: 90px;
		position: absolute;
		z-index: 2525;
		width:100%;
		box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2);
	}
	
	#menuUL{
		display: block;	
	}

	#menuBarID{
		display: block;
	}

	.menuBarFlotante{
		display: none;
		position: fixed;
		width:100%;
		z-index: 152522;
		margin-top: 0px;
		padding-right: 35px;
		background-color: #174768;
		border-bottom: 1px solid #FFF;
		height: 50px;
		line-height: 45px;
	}

	.botonMenuMobile {
		margin-right: 0px;
		margin-top: 20px;
		margin-left: 20px;
		z-index: 2525252;
		top: 0px;
		position: absolute;
		right: 25px;
	}

	#submenuSurf{
		display: none;
		padding-left: 60px;
	}

	#submenuSurfSkate{
		display: none;
		padding-left: 60px;
	}

	#submenuMovement{
		display: none;
		padding-left: 60px;
	}

	#submenuRecovery{
		display: none;
		padding-left: 60px;
	}

	#submenuAbout{
		display: none;
		padding-left: 60px;
	}	

	.menuMobile {
		margin-top: 89px;
		width: 100%;
		position: absolute;
		display: none;
		background: rgba(255, 255, 255, 0.9);
		z-index: 2020;
		font-size: 13px;
		font-weight: 700;
		overflow: auto;
		text-align: left;
		border-bottom: 1px solid #FFF;
	}

	header nav {
		font-size: 12px;
		font-weight: 700;
		text-align: left;
		line-height: 55px;
	}

	header nav ul {
		display: block;
		list-style:none;
		overflow:hidden;
		margin-left: -40px;
	}
	
	header nav ul li {
		border-bottom: 1px solid #FFF;
		width: 100%;
		color: #000;
		padding-left: 25px;
		text-decoration:none;
	}

	header nav ul li:hover{
		background-color: #0389d0;
		text-decoration:none;
		color: #FFF !important;
	}

	header nav ul li:active{
		background-color: #0389d0;
		text-decoration:none;
		color: #FFF;
	}	

	header nav ul li span {
	}
	
	header nav ul a{
		text-decoration:none;
		color: #174768;
	}
	
	header nav ul a:hover {
		text-decoration:none;
		color: #FFF !important;
	}

	header nav ul a:active {
		text-decoration:none;
		color: #FFF;
	}

	#surfLevels{
		margin-top: -90px;
		position: absolute;
	}
	
	#premiunSurfCoaching{
		margin-top: -90px;
		position: absolute;
	}
	
	#surfPrices{
		margin-top: -90px;
		position: absolute;
	}

	#surfSkateLevels{
		margin-top: -90px;
		position: absolute;
	}
	
	#premiunSurfSkateCoaching{
		margin-top: -80px;
		position: absolute;
	}
	
	#surfSkatePrices{
		margin-top: -90px;
		position: absolute;
	}
	
	#movementMobilityFlow{
		margin-top: -140px;
		position: absolute;
	}
	
	#movementYoga{
		margin-top: 450px;
		position: absolute;
	}
	
	#movementPrices{
		margin-top: -100px;
		position: absolute;
	}

	#recoveryIceBath{
		margin-top: -100px;
		position: absolute;
	}
	
	#recoveryBreathwork{
		margin-top: 490px;
		position: absolute;
	}
	
	#recoveryMassages{
		margin-top: 1050px;
		position: absolute;
	}
	
	#recoveryPrices{
		margin-top: -100px;
		position: absolute;
	}
		
	#aboutPlayaEncuentro{
		margin-top: -70px;
		position: absolute;
	}
	
	#aboutHotelBoutique{
		margin-top: -130px;
		position: absolute;
	}
	
	#aboutGeneral{
		margin-top: -130px;
		position: absolute;
	}
	

}

@media screen and (max-width:767px) {
	.containerTitleAll {
		display: flex; /* Activa Flexbox para organizar los elementos en fila */
		flex-direction: column; /* Coloca los hijos uno debajo del otro */
		justify-content: center; /* Centra los elementos horizontalmente */
		align-items: center; /* Alinea los elementos verticalmente */
		gap: 0px; /* Espaciado entre los elementos */
		padding-left: 15px;
		padding-right: 15px;
		text-align: center; /* Asegura que el texto dentro de los hijos también esté centrado (opcional) */		
	}

	.titleSurfLevels{
		margin-top: 25px;
	}

	.containerLevel{
		margin-top: 40px;
		margin-bottom: 10px;
		padding-left: 0px;
		padding-right: 0px;
	}

	
	.levelPhoto {
		max-width: 1000px;
		width: 100%;
		height: 415px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		border-radius: 10px; /* Opcional: bordes redondeados */		
		margin-bottom: 20px;
	  }
	

	.levelInfo {
		display: inline-block;
		align-items: flex-start; /* Alinea el contenido superiormente */
		gap: 25px; /* Espaciado entre levelPhoto y levelDetails */
	}
	
	.levelPhoto img {
		max-width: 1000px; /* Ajusta el tamaño de la imagen */
		height: auto;
		margin-bottom: 15px;
		border-radius: 10px; /* Opcional: bordes redondeados */
	}
	
	.levelDetails {
		display: flex;
		flex-direction: column; /* Mantiene el contenido de detalles en columna */
		gap: 12px; /* Espaciado entre secciones dentro de levelDetails */
	}
	
	/* Estilo para el título grande */
	.bigTitleAll {
		font-size: 40px; /* Ajusta el tamaño del texto */
		font-weight: bold; /* Título en negrita */
		flex-shrink: 0; /* Evita que este div se reduzca si no hay espacio */
		white-space: nowrap; /* Evita que el texto se divida en varias líneas */
		border-right: 0px solid #0389d0;
		padding-right: 20px;
		font-weight: 600;
		text-transform: uppercase;
	}
	
	/* Estilo para el título medio */
	.middleTitleAll {
		font-size: 14px; /* Ajusta el tamaño del texto */
		flex-grow: 1; /* Permite que este div ocupe el espacio sobrante */
		max-width: 550px; /* Ajusta el ancho máximo si es necesario */
		text-align: center;
		font-weight: 500;
	}


	.containerServices {
		margin-top: 35px;
	}

	.footerPhoto2 {
		height: 250px;
	}
	
	.paddingPhotos0{
		padding: 0px;	
	}

	.padding0{
		padding: 20px;
		padding-bottom: 10px;
	}
	
	.paddingBottomMobile10{
		padding-bottom: 10px;
	}
	
	.paddingRightMobile10{
		padding-right: 10px;
	}

	.paddingLeft{
		padding-left: 20px;
	}

	.paddingRight{
		padding-right: 20px;		
	}

	.bigTitle {
		font-size: 30px;
		font-weight: 700;
		margin-bottom: 05px;
		line-height: 30px;
		margin-top: 05px;
		margin-bottom: 10px;
	}

	.middleTitle {
		font-size: 14px;
		max-width: 700px;
		font-weight: 400;
	}
}