#contieneHeaderLanding {
  background-image: url(../images/fondoHeader.webp);
  background-size: contain;
  background-position: center;
}


.fondoAzul {
  background-color: #004954;
}

#homeAvatar {
  width: 70%;
  max-width: 700px;
  margin: auto;
  padding: 120px 0;
}
#homeAvatar img {
  width: 100%;
  max-width: 500px;
  margin: auto;
  display: block;
  margin-bottom: 40px;
}
#homeAvatar #homeMenu {
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background-color: #024355;
  color: white;
  border-radius: 10px;
}
#homeAvatar #homeMenu ul {
  display: flex;
  justify-content: space-around;
}
#homeAvatar #homeMenu ul li {
  text-align: center;
  letter-spacing: 2px;
}
#homeAvatar #homeMenu ul li a {
  cursor: pointer;
  color: white;
  transition: 0.5s ease-in-out;
}
#homeAvatar #homeMenu ul li a:hover {
  color: aqua;
}


/********************************************************
/////////////////////////////////////////////////////////
            C  A  M  A  S  T  R  O  S
/////////////////////////////////////////////////////////
********************************************************/
#contieneCamastrosMapaPlaya {
  width: 100%;
  padding: 120px 0;
  background-color: #008598;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya {
  width: 80%;
  max-width: 950px;
  margin: auto;
  background-color: #d5c0a7;
  border-radius: 10px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form {
  color: white;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #contienehorario {
  padding: 30px 0 0 30px;
  color: rgb(117, 84, 0);
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #contienehorario label {
  font-weight: bold;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #contieneCamastros {
  background-image: url(../images/fondoPlaya.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgb(226, 181, 66);
  color: rgb(117, 84, 0);
  border-radius: 5px;
  padding: 0 30px;
  padding-bottom: 40px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form .etiquetaCamastro {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 5px;
  border: 2px solid rgb(117, 84, 0);
  border-radius: 4px;
  margin-bottom: 5px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form select {
  border: 0;
  padding: 4px;
  border-radius: 4px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #mapaPlayaRestaurante {
  margin-left: 45%;
  background-color: rgb(117, 84, 0);
  padding: 9% 1%;
  border-radius: 15px;
  width: 40%;
  text-align: center;
  font-weight: 600;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya li {
  display: inline-block;
  text-align: center;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya .margenSeparador {
  margin-left: 20%;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya li input {
  width: 2rem;
  padding: 3px;
  border: 0;
  text-align: center;
  border-radius: 2px;
  font-size: 1rem;
  font-weight: 600;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form h5 {
  font-size: 0.7rem;
  font-weight: 600;
  margin-top: 10px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #camastrosPin input {
  width: 4rem;
  padding: 4px;
  border: 0;
  border-radius: 4px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #botonReservarCamastro {
  border: 0;
  padding: 8px 20px;
  border-radius: 8px;
  letter-spacing: 2px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #tituloPlaya {
  width: 100%;
  font-size: 1.5rem;
  display: block;
  text-align: center;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya form #tituloPlaya img {
  width: 45px;
}
#contieneCamastrosMapaPlaya #camastrosMapaPlaya  #AvisoMapa {
  width: 80%;
  margin: auto;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4rem;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 10px 20px;
  border-radius: 5px;
  color: rgb(62, 62, 62);
}

#contieneCamastrosMapaAlberca {
  width: 100%;
  padding: 120px 0;
  background-color: #008598;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca {
  width: 80%;
  max-width: 950px;
  margin: auto;
  border-radius: 10px;
  background-color: #004954;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca h2 {
  width: 100%;
  text-align: center;
  color: white;
  font-size: 1.4rem;
  padding: 30px 0;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca #fondoAlberca {
  width: 100%;
} 
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contienehorario {
  padding-bottom: 30px;
  padding-left: 20px;
  color: white;
  font-size: 0.8rem;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form select {
  border: 0;
  padding: 4px;
  border-radius: 4px;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros {
  position: relative;
  width: 100%;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros .itemCamastro {
  position: absolute;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  transform: translate(-50%, -100%);
  background-color: rgb(202, 255, 103);
  padding: 5px;
  border: 0;
  border-radius: 4px;
  border: 1px solid rgb(83, 83, 83);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro01 {
  left: 30.9%;
  top:35.9%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro02 {
  left: 32.4%;
  top:33%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro03 {
  left: 34%;
  top:30%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro04 {
  left:36.1%;
  top:26.2%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro05 {
  left:37.9%;
  top:23.1%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro06 {
  left:39.7%;
  top:20%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro07 {
  left:41.8%;
  top:16%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro08 {
  left:43.5%;
  top:12.8%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro09 {
  left:45.2%;
  top:9.5%;
  transform: rotate(-60deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro10 {
  left:46%;
  top:1.5%;
  transform: rotate(-90deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro11 {
  left:46%;
  top:-2%;
  transform: rotate(-90deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro12 {
  left:51.5%;
  top:12.5%;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro13 {
  left:54.3%;
  top:12.5%;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro14 {
  left:57%;
  top:12.5%;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro15 {
  left:59.7%;
  top:12.5%;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro16 {
  left:62.5%;
  top:12.5%;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro17 {
  right:38%;
  top:13%;
  transform: rotate(70deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro18 {
  right:34%;
  top:25%;
  transform: rotate(70deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro19 {
  right:32.5%;
  top:30%;
  transform: rotate(70deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro20 {
  right:31.2%;
  top:33.3%;
  transform: rotate(70deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro21 {
  right:30.5%;
  top:36.5%;
  transform: rotate(70deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro22 {
  right:27.3%;
  top:47%;
  transform: rotate(32deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro23 {
  right:24.5%;
  top:50%;
  transform: rotate(48deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro24 {
  right:22.3%;
  top:53.5%;
  transform: rotate(58deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro25 {
  right:28.5%;
  bottom:22%;
  transform: rotate(160deg);
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #camastrosPin {
  color: white;
  padding-top: 20px;
  padding-left: 40px;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #camastrosPin input {
  width: 4rem;
  padding: 4px;
  border: 0;
  border-radius: 4px;
}
#contieneCamastrosMapaAlberca #camastrosMapaAlberca form #botonReservarCamastro {
  border: 0;
  padding: 8px 20px;
  border-radius: 8px;
  letter-spacing: 2px;
}


/********************************************************
/////////////////////////////////////////////////////////
            R  E  S  E  R  V  A  S
/////////////////////////////////////////////////////////
********************************************************/
#contieneReservas {
  width: 100%;
  min-height: 100%;
  position: relative;
  padding: 120px 0;
  text-align: center;
  color: white;
}
#contieneReservas #reservasLogo {
  width: 80%;
  max-width: 350px;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 20px;
}
#contieneReservas .tituloSeccion {
  font-size: 1.4rem;
}
#contieneReservas #formularioReservas {
  width: 80%;
  margin: auto;
  padding-top: 40px;
}
#contieneReservas #formularioReservas input {
  width: 4rem;
  padding: 5px;
  border-radius: 5px;
  border: 0;
}
#contieneReservas #formularioReservas button {
  padding: 8px 20px;
  border: 0;
  border-radius: 4px;
  margin-top: 15px;
  letter-spacing: 1px;
  background-color: darkorchid;
  color: white;
  transition: 0.5s ease-in-out;
}
#contieneReservas #formularioReservas button:hover {
  background-color: rgb(87, 1, 130);
  cursor: pointer;
}
#contieneReservas  #contieneReservasConfirmadas table {
 width: 90%;
 max-width: 800px;
 margin: auto;
 margin-top: 40px;
 padding: 20px 10px;
 border-radius: 5px;
 background-color: rgba(255, 255, 255, 0.661);
 color: rgb(37, 37, 37);
}
#contieneReservas  #contieneReservasConfirmadas table tr th {
  padding: 5px;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid gray;
}
#contieneReservas  #contieneReservasConfirmadas table tr td {
  padding: 5px;
  border-radius: 0 0 5px 5px;
  border-bottom: 1px solid gray;
}


#bloqueoOrientacion {
  display: none;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color: rgb(249, 249, 249);
  background-color: #328496;
  width: 100vw;
  height: 100vh;
  padding-top: 40vh;
}
#bloqueoOrientacion p {
  width: 90%;
  margin: auto;
  display: block;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
}
.botonDeshabilitado {
  background-color: red;
  color: white;
  border: 0;
  border-radius: 3px;
  padding: 0 3px;
}
.botonBloqueado {
  background-color: rgb(43, 43, 43);
  color: white;
  border: 0;
  border-radius: 3px;
  padding: 0 3px;
}

/********************************************************
/////////////////////////////////////////////////////////
            S  P  A
/////////////////////////////////////////////////////////
********************************************************/
#spaHero {
  width: 100%;
  padding-bottom: 40px;
  background-color: white;
}
#spaContieneCalendario {
  width: 100%;
  display: none;
  /*display: flex;*/
  background-color: white;
  color: rgb(57, 57, 57);
  padding: 60px 0;
}
.flexible {
  display: flex!important;
}
.bloque {
  display: block!important;
}
#spaContieneCalendario #spaCalendario {
  width: 60%;
  padding: 3%;
}
#spaContieneCalendario #spaCalendario #contieneEncabezado {
  text-align: center;
}
#spaContieneCalendario #spaCalendario #contieneEncabezado h2 {
  font-size: 1.5rem;
  font-weight: bold;
}
#spaContieneCalendario #spaCalendario #contieneEncabezado p {
  width: fit-content;
  display: block;
  margin: auto;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: rgb(64, 62, 62);
  color: greenyellow;
  padding: 4px 8px;
  border-radius: 3px;
}
#spaDiasCalendario {
  width: 100%;
  padding: 60px 0;
}
#spaDiasCalendario .dia {
  font-size: 1.1rem;
  line-height: 3rem;
  width: 10%;
  text-align: center;
  display: inline-block;
  margin-bottom: 5px;
  border: 1px solid rgb(213, 213, 213);
  transition: 0.5s ease-in-out;
}
#spaDiasCalendario .dia:hover {
  background-color: #008598;
  color: white;
  cursor: pointer;
}
.diaNoDisponible {
  font-size: 1.1rem;
  line-height: 3rem;
  width: 10%;
  text-align: center;
  display: inline-block;
  margin-bottom: 5px;
  border: 1px solid rgb(213, 213, 213);
  opacity: 0.5;
  cursor: not-allowed!important;
}
#spaContieneCalendario #spaTexto {
  display: none;
  width: 40%;
}
#spaContieneCalendario #spaTexto h5 {
  text-align: center;
}

#contieneSpaHorasCalendario {
  display: none;
  width: 100%;
}
#contieneSpaHorasCalendario #spaHorasCalendario {
  display: block;
  width: 100%;
  background-color: white;
  color: rgb(57, 57, 57);
}
#contieneSpaHorasCalendario #spaHorasCalendario .hora {
  font-size: 1rem;
  line-height: 1.3rem;
  width: 90px;
  padding: 15px 5px;
  text-align: center;
  display: inline-block;
  margin-bottom: 5px;
  border: 1px solid rgb(213, 213, 213);
  margin: 5px;
  transition: 0.5s ease-in-out;
}
#contieneSpaHorasCalendario #spaHorasCalendario .hora:hover {
  background-color: #008598;
  color: white;
  cursor: pointer;
}
.citaSeleccionada {
  background-color: #008598;
  color: white;
}
#formularioConfirmacionSpa {
  width: 80%;
  margin: auto;
  background-color: #d1d6d7;
  padding: 10%;
  border-radius: 8px;
}
#formularioConfirmacionSpa input {
  width: 100%;
  padding: 5px;
  border: 0;
  border-radius: 5px;
  margin: 5px 0;
}
.inputCompletado {
  background-color: #cdedce;
  color: rgb(55, 110, 1);
  border: 1px solid rgb(6, 182, 6)!important;
}

.contieneServiciosSpa {
  background-color: rgb(238, 235, 235);
}
.contieneServiciosSpa .contieneMitades {
  width: 80%;
  margin: auto;
}
.contieneServiciosSpa .contieneMitades .imagenServiciosSpa {
 text-align: center;
}
.contieneServiciosSpa .contieneMitades .imagenServiciosSpa #portadaSpa {
  width: 80%;
  max-width: 500px;
  margin: auto;
  display: block;
}
.contieneServiciosSpa .contieneMitades .opcionesServiciosSpa {
  text-align: center;
}
.contieneServiciosSpa .contieneMitades .opcionesServiciosSpa p {
  font-size: 0.8rem;
  font-style: italic;
  margin-bottom: 6px;
}
.contieneServiciosSpa .contieneMitades .opcionesServiciosSpa form label {
  font-weight: 600;
}
.contieneServiciosSpa .contieneMitades .opcionesServiciosSpa form select {
  border: 0;
  padding: 9px;
  border-radius: 5px;
  max-width: 100%;
}
.contieneServiciosSpa .contieneMitades .opcionesServiciosSpa form option {
  border: 0;
}
#duracionMasaje, #botonServiciosSpa {
  display: none;
}










/***************************************************************************************************************
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> M  Ó  V  I  L  E  S      V  E  R  T  I  C  A  L <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
**************************************************************************************************************/

@media (hover: none) and (pointer: coarse) and (orientation: portrait)   {
  
    #contieneHeaderLanding {
      background-color: #328496;
      padding: 120px 0;
    }
    #homeAvatar {
      padding: 0;
    }
    #homeAvatar #homeMenu {
      padding: 30px 0;
    }
    #homeAvatar #homeMenu ul {
      display: block;
    }
    #homeAvatar #homeMenu ul li {
      width: 100%;
      text-align: center;
      padding: 5px 0;
    }

    /********************************************************************************************

       C  A  M  A  S  T  R  O  S     M  O  V  I  L  E  S      V  E  R  T  I  C  A  L 

    ********************************************************************************************/
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya {
    width: 100%;
    max-width: 100%;
    border-radius: 0px;
  }
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form  {
      box-sizing: border-box;
    }
    #camastrosMapaPlaya {
      /*display: none;*/
      width: fit-content;
      overflow: scroll;
      padding: 0px;
    }
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form #contieneCamastros {
      width: fit-content;
      padding: 0px;
    }
    .separadorFilasCamastros {
      display: block;
      width: 2rem;
    }
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-bottom: 15px;
    }
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya li label {
      font-size: 0.6rem;
      padding: 10px 3px;
      background-color: #755400;
      color: #d5c0a7;
      border: 0;
    }
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya .margenSeparador {
      margin-left: 0%;
    }
    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form .filaMapaPlaya li input {
      width: fit-content;
      padding: 3px;
    }

    #contieneCamastrosMapaPlaya #camastrosMapaPlaya form #mapaPlayaRestaurante {
      margin-top: 5%;
      width: fit-content;
    }
    /*#bloqueoOrientacion {
      display: block;
    }*/



    #contieneCamastrosMapaAlberca {
      padding: 90px 0;
    }
    #contieneCamastrosMapaAlberca #camastrosMapaAlberca {
      width: 100%;
      border-radius: 0;
      overflow: hidden;
    }
    #contieneCamastrosMapaAlberca #camastrosMapaAlberca #fondoAlberca {
      width: 170%;
      margin-left: -35%;
    } 

    #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro01 {
        left:23.8%;
        top:29%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro02 {
        left:25.6%;
        top:26.5%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro03 {
        left:27.5%;
        top:24%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro04 {
        left:29.6%;
        top:21.5%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro05 {
        left:31.4%;
        top:19%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro06 {
        left:33.2%;
        top:16.4%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro07 {
        left:35.4%;
        top:14%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro08 {
        left:37.5%;
        top:11.5%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro09 {
        left:40%;
        top:9%;
        transform: rotate(-60deg);
      }
      
       #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro10 {
        left:47%;
        top:0.5%;
        transform: rotate(-90deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro11 {
        left:47%;
        top:-2%;
        transform: rotate(-90deg);
      }

      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros .itemCamastro {
        font-size: 0.5rem;
        padding: 1px;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro12 {
        left:49%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro13 {
        left:53.3%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro14 {
        left:57.3%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro15 {
        left:61.7%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro16 {
        left:66%;
        top:12.5%;
      }

      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro17 {
        right:30%;
        top:12%;
        transform: rotate(70deg);
      }
      
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro18 {
        right:29%;
        top:16%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro19 {
        right:23%;
        top:24%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro20 {
        right:23%;
        top:27%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro21 {
        right:23%;
        top:30%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro22 {
        right:9.9%;
        top:41.7%;
        transform: rotate(32deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro23 {
        right:6%;
        top:45%;
        transform: rotate(48deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro24 {
        right:2%;
        top:48%;
        transform: rotate(58deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro25 {
        right:28.5%;
        bottom:28%;
        transform: rotate(160deg);
      }

      #spaHero {
        width: 100%;
        padding-bottom: 40px;
      }
      #spaContieneCalendario {
        width: 100%;
        padding: 0 20px 40px 20px;
      }
      #spaContieneCalendario #spaCalendario {
        width: 100%;
      }
      #spaContieneCalendario #spaTexto {
        width: 100%;
      }

  }


  /***************************************************************************************************************
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> M  Ó  V  I  L  E  S      H  O  R  I  Z  O  N  T  A  L <<<<<<<<<<<<<<<<<<<<<<<<<<<
*****************************************************************************************************************/


  @media screen and (max-device-height: 480px) and (orientation: landscape) {
    
      #contieneCamastrosMapaPlaya #camastrosMapaPlaya {
        width: 100%;
        max-width: 100%;
        overflow: scroll;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca {
        width: 100%;
        max-width: 100%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro01 {
        left:32.3%;
        top:32%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro02 {
        left:33.6%;
        top:29.5%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro03 {
        left:35%;
        top:27%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro04 {
        left:37.2%;
        top:23%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro05 {
        left:38.5%;
        top:20.5%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro06 {
        left:40%;
        top:18%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro07 {
        left:41.5%;
        top:14.8%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro08 {
        left:42.7%;
        top:12.4%;
        transform: rotate(-60deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro09 {
        left:44%;
        top:10%;
        transform: rotate(-60deg);
      }
      
       #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro10 {
        left:47%;
        top:0.5%;
        transform: rotate(-90deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro11 {
        left:47%;
        top:-2%;
        transform: rotate(-90deg);
      }

      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros .itemCamastro {
        font-size: 0.5rem;
        padding: 1px;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro12 {
        left:49%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro13 {
        left:51.5%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro14 {
        left:54%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro15 {
        left:56.5%;
        top:12.5%;
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro16 {
        left:59%;
        top:12.5%;
      }
      
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro18 {
        right:36%;
        top:17%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro19 {
        right:32.5%;
        top:23%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro20 {
        right:31.7%;
        top:26%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro21 {
        right:30.5%;
        top:29%;
        transform: rotate(70deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro22 {
        right:27.3%;
        top:38%;
        transform: rotate(32deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro23 {
        right:24.9%;
        top:42%;
        transform: rotate(48deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro24 {
        right:22.3%;
        top:46%;
        transform: rotate(58deg);
      }
      #contieneCamastrosMapaAlberca #camastrosMapaAlberca form #contieneCamastros #camastro25 {
        right:28.5%;
        bottom:28%;
        transform: rotate(160deg);
      }
}