@media(max-width: 768px) {
  html, body {overflow-x: hidden;}
  html {width: 100vw;font-size: 12px;}
  body {width: 100%;font-size:1em;}
  h1{font-family: Alumni Sans;font-weight: 900;font-size: 40px;line-height: 40px;text-align: center;text-shadow: 3px 3px 2.6px 0px #000000B2;}
  h2{font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 15px;line-height: 100%;text-align: center;}
  h3{font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 14px;line-height: 100%;letter-spacing: 0;text-align: center;}

  #historiaModal.modal .modal-dialog{max-width: 100vw;}
  #whatsapp {
      height: 40px;
      width: 40px;
      position: fixed;
      top: 86vh;
      left: 88%;
      background-image: url(/static/nueva_web/imgs/whatsapp_logo.png);
      background-size: cover;
      z-index: 10;
  }

  /* MENU MOBILE */
  #menu_mobile #logo {height: 15rem;}
  #menu_mobile #nav-icono-blanco {display:none;}
  #menu_mobile #nav-icono-verde {display:block;}
  #menu_mobile #navbarNav {position: fixed;width: 100vw;min-height: 100vh;top: 0;left: 0;z-index: 1100;background: var(--verde-oscuro);}
  #menu_mobile .navegacion {margin-top: 3rem;margin-left: 6rem;}
  #menu_mobile .nav-item a {font-weight: 500;font-size: 1.5em;text-decoration: none;}
  #menu_mobile a, a.nav-link {color: white;background: var(--verde-oscuro);}
  #menu_mobile li.seleccionado a {background: white;width: fit-content;color: var(--verde-oscuro);padding: 0 1rem;border-radius: 0.8rem;}

  /*INDEX*/
  #btn-quienes-somos{width: 129px;height: 20px;opacity: 1;border-radius: 17.5px;padding: 0px;font-size: 12px;} 
  #juridica-inicio {background-color: var(--verde-oscuro);height: unset;position: absolute;bottom: -2rem;width: 80%;padding-top: 0rem;height: 12vh;}
  #juridica-inicio h3{text-shadow: 0px 1px 2.8px 0px #00000040;font-size: 17px;position: absolute;top: 0.8em;}
  #juridica-inicio p{font-family: Montserrat;font-weight: 500;font-style: Medium;font-size: 1em;line-height: 100%;text-align: center; width: 90%;position: absolute;top: 4em;}

  /*SECCION SALONES */
  #salones{height: 130vh;}
  #salones #contenedor-superior{position: relative;top: 0;width: 80%;height: 30vh;background-color: var(--verde-oscuro);}
  #salones #contenedor-superior h4{font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 1em;line-height: 100%;text-align: center;text-transform: uppercase;text-shadow: 0px 4px 4px 0px #00000040;}
  #salones #contenedor-superior p{font-family: Montserrat;font-weight: 400;font-style: Regular;font-size: 1em;line-height: 100%;letter-spacing: 0%;text-align: center;width: 100%;margin:auto;}
    #salones #contenedor-superior b{
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    word-break: break-word;
    white-space: normal;
  }
 #salones h2{font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 15px;text-align: center;width:49%;}
 #salones p{font-family: Montserrat;font-weight: 400;font-style: normal;text-align: center;}
 #salones .col-izquierda p#celebra-con-nosotros{display:none}
 #salones .col-derecha{ margin: auto;width:60%}
 #salones .col-derecha img {width: 100%;height: 31vh;border-radius: 14px;opacity: 1;margin: auto;}
 #salones a.btn.btn-redondeado {
  background-color: var(--azul);
  color: white;
  position: relative;
  bottom:8rem;
  left: 0; 
  margin: auto;
  width: 153px;
  height: 23px;
  border-radius: 21px;
  opacity: 1;
  font-family: Montserrat;
  font-weight: 500;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
  padding: 6px 0px 0 0;}

  /*SECCION ACTIVIDADES  */
  #actividades {height: auto;}
  #actividades .title{height: 5rem;margin-top: 8rem;margin-bottom: 3rem;}
  #actividades #titulo-actividades {text-shadow: 0px 4px 4px #00000040;}

  #actividades .icono-actividad {font-size: 3em;}
  #actividades .image-container {height: calc(40vh + 18rem); display: grid!important;position: relative;}

  #actividades .image-container .natacion .imagen, #actividades .image-container .gimnasio .imagen {background-size: cover;background-position-y: center;height: 20vh;}
  #actividades .image-container .natacion .renglon, #actividades .image-container .gimnasio .renglon {top: 20vh;z-index: 0;height: 1rem;}
  #actividades .image-container .background-imagen{height: 20vh;background-color: #00000070;z-index: 11;color: white;}
  #actividades .image-container .natacion .imagen, #actividades .image-container .gimnasio .imagen, 
  #actividades .image-container .background-imagen, #actividades .image-container .natacion .renglon,
  #actividades .image-container .gimnasio .renglon {width: 70%;margin: 0 15%;}

  #actividades .image-container .natacion{top:0rem}
  #actividades .image-container .natacion .btn-redondeado {top: calc(20vh + 3rem);left: calc(50% - 5.5rem);height: 3rem;width: 11rem;padding: 0;}

  #actividades .image-container .gimnasio{top:0rem}
  #actividades .image-container .gimnasio .btn-redondeado {top: calc(20vh + 3rem);right: calc(50% - 5.5rem);left: auto;height: 3rem;width: 11rem;padding: 0;background-color: var(--azul);}

  #actividades .image-container .natacion .background-imagen, #actividades .image-container .gimnasio .background-imagen {margin: 0 15%;}
  #actividades .descarga-horarios {padding-bottom: 5rem;}

  #actividades a{font-family: Montserrat;font-weight: 400;font-style: Regular;font-size: 10px;line-height: 100%;letter-spacing: 0%;text-align: center;text-decoration: underline;text-decoration-style: solid;text-decoration-thickness: 0%;text-decoration-skip-ink: auto;color: white;}
  #actividades .modal .modal-dialog {max-width: 100vw;font-size: 10px;padding: 0}
  #actividades .modal .modal-dialog .modal-body {padding: 0}
  #actividades .modal .modal-dialog .modal-body > p {text-align: center;}
  #actividades .modal .modal-dialog .modal-body .d-flex{padding: 3rem;}
  
/*SECCION COLONIA*/
  #colonia{
        background-image: url(/static/nueva_web/imgs/colonia_mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 0rem;
    }
#colonia .contenedor-azul{position:relative;top: 0;left: 0;width: 100%;height: 80vh;}
#colonia .contenedor-leyenda {
  background-color: var(--azul);
  height: 35vh;
  width: 25rem;
  position: absolute;
  right: 0;

}
#colonia .contenedor-leyenda p,#colonia .contenedor-leyenda h2{
      color:white;
      font-family: Montserrat;
      font-weight: 400;
      font-style: Regular;
      font-size: 12px;
      line-height: 1.18;
    }
#colonia .contenedor-leyenda h3{
  font-family: Montserrat;
  font-weight: 700;
  font-style: Bold;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  margin-bottom: 0.3em;
}
#colonia .sticker{        
   background-image: url(/static/nueva_web/imgs/sticker.png);
        background-repeat: no-repeat;
        width: 10rem;
        /*position: absolute;*/
        height: 7rem;
        top: -3rem;
        left: -5rem;
        background-size: contain;
        transform: rotate(-13.69deg);
        z-index: 11;
  }
  
 #colonia .btn-redondeado{
  background-color:white;color:var(--azul);
  font-size: 1em;
  padding: 0;
  width: 7rem;}

  #coloniaModal.modal .modal-dialog { max-width: 100%;}
  #coloniaModal.modal .modal-body{padding: 1rem;}
  #coloniaModal .swiper{min-height: 10rem;height: 10rem;}
  #coloniaModal .swiper-slide img{height: 80%;}

  #contacto .btn-change-form {border-left: solid 0.5rem var(--verde-oscuro);}
  #contacto .input_text, .input_message_text {height: 3rem;}
  #contacto textarea.form-control {height: 10rem;}
  #contacto .btn-enviar {width: 11rem;font-size: 1.3em;padding: 0.5rem 2rem;}

  /*MODAL ASOCIATE*/
  #asociate .modal-dialog{width: 97vw;max-width: 97vw;}
  #asociate .modal-dialog label{font-size: 0.7em;}
  #asociate .modal-dialog .form-control{height:2rem;}
  #asociate .modal-dialog span{color:var(--verde-oscuro);font-size:0.8em;}
  #asociate .btn-redondeado{width: 9rem;font-size: 1em;padding: 2px 0;}
  
}

@media (min-width: 1055px) and (max-width: 1682px) {
  #colonia {background-position-y: 0rem;}
  #colonia .contenedor-azul {
    position: relative;
    top: -14px;
    left: 0;
    width: 40%;
    height: 78vh;
    padding-top: 5%;
  }
  #colonia .contenedor-leyenda {height: 79vh;}
  #colonia .sticker {width:22rem}
}


@media (min-width: 768px) and (max-width: 1054px) {
  #colonia {background-position-y: 0rem;}
  #colonia .contenedor-leyenda h3{font-size:1.4em;}
  #colonia .contenedor-leyenda h2{font-size:1.2em;}
  #colonia .contenedor-leyenda p {font-size:1.1em;}
  #colonia .sticker{width:14rem;}
  #colonia .btn-redondeado {background-color: white;color: var(--azul);font-size: 1em;padding: 4px 41px;}
}