@-ms-viewport{width:device-width;}
:root{
  --fucsia:#bf0c8e;
  --turquesa:#8addd2;
  --grisClaro:#eaeaea;
  --grisOscuro:#b3b3b3;
  --naranja:#ff6600;
  --naranjaOscuro:#d15808;
  --morado:#572263;
  /*--lila:#f4eff9;*/
  /*--lila:#decfdf;*/
  --lila:#fde4ef;
  --verde:#8cd813;
}

.noButton{
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 24px;
  border: 1px solid #ffffff;
  font: normal normal 20px Roboto;
  color: #000;
  text-decoration: none;
}

/*
.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 12px 24px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    background: #ff00ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff00ff), to(#cc00cc));
    background: -moz-linear-gradient(top, #ff00ff, #cc00cc);
    background: linear-gradient(to bottom, #ff00ff, #cc00cc);
    text-shadow: #800080 1px 1px 1px;
    font: normal normal bold 20px Roboto;
    color: #ffffff;
    text-decoration: none;
}*/

.button{

  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 12px 24px;
  box-shadow:inset 0px 1px 3px 0px #ffffff;
  background:linear-gradient(to bottom, #bf0c8e 5%, #eb008d 100%);
  background-color:#bf0c8e;
  border-radius:5px;
  border:1px solid #ffffff;
  color:#ffffff;
  
  text-decoration:none;
  text-shadow:0px -1px 0px #800080;

}

/*
.button:hover,
.button:focus {
    background: #ff00ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ff00ff), to(#f500f5));
    background: -moz-linear-gradient(top, #ff00ff, #f500f5);
    background: linear-gradient(to bottom, #ff00ff, #f500f5);
    color: #ffffff;
    text-decoration: none;
}*/

.button:hover,
.button:focus {
  background:linear-gradient(to bottom, #eb008d 5%, #bf0c8e 100%);
	background-color:#eb008d;
  color: #ffffff;
  text-decoration: none;
}


.button:active {
  /*
    background: #cc00cc;
    background: -webkit-gradient(linear, left top, left bottom, from(#cc00cc), to(#cc00cc));
    background: -moz-linear-gradient(top, #cc00cc, #cc00cc);
    background: linear-gradient(to bottom, #cc00cc, #cc00cc);*/
    top:1px;

}

select {border-radius:5px;background:white;border: thin solid black}
input {border-radius:5px;border: thin solid black}
a{text-decoration:none;cursor:pointer;outline:none;}
a:visited {text-decoration: none;}
body {background:var(--grisOscuro);margin: 0 auto 0 auto;font-family:Roboto, sans-serif;}
#menu{z-index:102;position: -webkit-sticky;position: sticky;top: 0;overflow: auto;max-height: 80vh;margin:auto;width:100%;}
.menu2{
  width:100%;
  max-width:800px;
  /*background:var(--fucsia);*/
  background:linear-gradient(to bottom, #bf0c8e 5%, #eb008d 100%);
  background-color:#bf0c8e;
  margin:auto;
  border:thin var(--morado) solid;
  border-bottom:0;
  box-sizing: border-box;/* Fixes the issue with border affecting total width */
}
div{overflow:auto}
.ancho{width:100%}
.center{text-align:center}
.left{text-align:left}
.right{text-align:right}
.bold{font-weight:bold}
h1{font-size:50px;font-family:Lato, sans-serif;font-weight:900;color:var(--fucsia);margin:0}

.descTitle{font-size:20px;font-family:Lato, sans-serif;font-weight:900;}
/*h1{font-size:50px;font-family:Lato, sans-serif;font-weight:900;color:white;margin:0}*/

/*h2{font-size:16px;font-family:Roboto, sans-serif;font-weight:400;font-style:italic;}*/
h2{font-size:16px;font-weight:400;}
.shadow{text-shadow: 0px 0px #000000, 0 0 0.0em black, 0 0 0.2em black;}
.white-shadow{text-shadow: 1px 1px 1px #FFFFFF;}
.de{font-size:40px;}
.superGrande{font-size:50px}
.grande{font-size:35px}
.mediano{font-size:25px}
.chico{font-size:20px}
.micro{font-size:15px}

.topliltit{margin-top:2%;padding:1;font-size:20px;color:#fff}

.topbigtit{padding:1;font-size:35px;color:#fff}

.float{position:relative;float:left;}

.socialTop{margin-top:3.8%;}

/*.formulario {color:black;width:100%;background:var(--lila);font-weight:400;border-bottom:thin var(--lila) solid;}*/

/*.formulario {color:black;width:100%;background:var(--lila);font-weight:400;border-top:thin var(--morado) solid;}*/


#rol {
  background-image: url('https://limateens.com/images/rol.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#brochure {
  background-image: url('https://limateens.com/images/brochure.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


#whatsapp{z-index:1000;position:fixed; bottom:2%;right:2%;}

.botonera{margin-top:4%;width:100%;text-align:center;}

.logButton {background:var(--turquesa);border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer;float:left;position:relative;}

.logButton *{float:left;position:relative;}

.logButton div{width:86%;border:0;padding:0;margin:0;}

.logButton picture{width:9.5%;margin-top:1%}

.logButton picture>img{width:100%;height:auto;}

/*

.botonera div{background:var(--turquesa);border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer}

.botonera *{float:left;position:relative;}

.botonera div>div{width:86%;border:0;padding:0;margin:0;}

.botonera picture{width:9.5%;margin-top:1%}

.botonera picture>img{width:100%;height:auto;}*/

.cancelButton{background:white;border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer}

.saveButton{background:var(--turquesa);border:thin black solid;width:40%;margin:2.6%;padding:2%;cursor:pointer}

#temporada {margin:4% 0 2% 0}

#hamburger{padding-bottom:0%;width:60%;margin:auto;}

#hamburger div{border-radius: 2px}

#horariosDiv{max-width:95%}

.hamwhite{width:100%;padding-bottom:10%;background:white}

.ham{width:100%;padding-bottom:15%;}

.cursor{cursor:pointer}

.texto-con-contorno {
  color: white; /* Color del texto */
  text-shadow: 
      -1px -1px 0 black, /* Sombra superior izquierda */
      1px -1px 0 black,  /* Sombra superior derecha */
      -1px 1px 0 black,  /* Sombra inferior izquierda */
      1px 1px 0 black;   /* Sombra inferior derecha */

}

/*
.lazy-background {
  float:left;
  position:relative;
  width:49.8%;
  margin:0.1%;
  padding-bottom:74%;
  border-top: thin var(--lila) solid;
  border-bottom:thin var(--lila) solid;
  background-repeat: no-repeat;
  background-size: 100% auto;

}*/

.lazy-background {
  border-top: thin var(--morado) solid;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.lazy-fotitos{
  width:50%;
  padding-bottom:90%;
}

.lazy-chics {
  width:100%;
  padding-bottom:70%;
}

#portada {
  width:100%;  
}

.divShadow{
  box-shadow: 1px 1.3px 4px -9px rgba(0,0,0,0.47);
-webkit-box-shadow: 1px 1.3px 4px -9px rgba(0,0,0,0.47);
-moz-box-shadow:1px 1.3px 4px -9px  rgba(0,0,0,0.47);
}

.no-detect {
  user-select: none;
  touch-action: manipulation; /* Prevents triggering unintended links */
}

.lazy-title{font-size:20px;font-family:Lato, sans-serif;font-weight:900;text-align:right;padding:0.5% 2% 0.5%;width:60%;margin:2% 0;position:absolute;color:var(--fucsia);border-bottom-right-radius:5px;border-top-right-radius:5px;border:thin rgba(255,255,255) solid;border-left:0;background:rgba(140,216,19,1);}

/*.lazy-title{font-size:20px;text-align:right;padding:0.5% 2% 0.5%;width:60%;border-bottom-right-radius:5px;border-top-right-radius:5px;border:thin rgba(255,255,255) solid;border-left:0;background:rgba(0,0,0,0.7);margin:2% 0;position:absolute;color:white}*/

/*.lazyBtn{width:42%;background:red;border:thin white solid;padding:4%;margin:100% 0 0 24%;position:absolute;text-align:center;color:white;}*/
.lazyBtn{width:42%;margin:100% 0 0 24%;position:absolute;}

/*.lazyDesc{width:98%;background:rgba(0,0,0,0.7);color:white;padding:1%;position:absolute;bottom:0}*/

.lazyDesc{width:98%;padding:1%;position:absolute;bottom:0;background: rgb(140,216,19);background: rgb(140,216,19);background: linear-gradient(90deg, rgba(140,216,19,1) 0%, rgba(140,216,19,1) 89%, rgba(128,198,18,1) 100%);}

#sesion.visible {background-image:url("images/sesion-de-fotos.webp");background-size: 100% auto;}

#autoestima.visible {background-image:url("images/autoestima2.webp");background-size: 100% auto;}

#desfiles.visible {background-image: url("images/desfiles.webp");background-size: 100% auto;}

#maquillaje.visible {background-image: url("images/modelolt1.webp");background-size: 100% auto;}

#peinado.visible {background-image: url("images/alumnaslt1.webp");background-size: 100% auto;}

#chics.visible {background-image: url("images/chicasteen1.webp");background-size: 100% auto;}

.celular{margin-left:1%;width:250px;}

.twingo {width:198.4px;margin:0.1%;}

.lds-facebook {display: inline-block;position: relative;width: 80px;height: 80px;}
.lds-facebook div {display: inline-block;position: absolute;left: 8px;width: 16px;background: var(--fucsia);animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
.lds-facebook div:nth-child(1) {left: 8px;animation-delay: -0.24s;}
.lds-facebook div:nth-child(2) {left: 32px;animation-delay: -0.12s;}
.lds-facebook div:nth-child(3) {left: 56px;animation-delay: 0;}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
.iframe-container{position: relative;width: 100%;height: 0;}*/

.iframe-container iframe{position: absolute;top:0;left: 0;width: 100%;height: 100%;}

.iframe-container {
  position: relative;
  width: 100%; /* Full width */
  height: 0; /* Initial height, will be set by JavaScript */
  padding-bottom: 56.25%; /* Aspect ratio for 16:9 videos */
}

/* Adjust padding-bottom for different aspect ratios using media queries if needed */
@media (max-aspect-ratio: 4/3) {
  .iframe-container {
    padding-bottom: 75%; /* Aspect ratio for 4:3 videos */
  }
}

@keyframes lds-facebook {0% {top: 8px;height: 64px;}50%, 100% {top: 24px;height: 32px;}}


@media screen and (max-width: 800px) {
  h1{font-size:6vw;}
  h2{font-size:2vw}
  .de{font-size:5vw;}
  .grande{font-size:30px}
  .mediano{font-size:25px}
  .chico{font-size:17px}
  .micro{font-size:14px}
  .logButton picture{margin-top:1%}
  /*.logButton{font-size:2.6vw}*/
  .lazy-title{font-size:3vw}
  .topliltit{margin-top:2%;padding:1;font-size:17px}
  .topbigtit{padding:1;font-size:30px}

}

@media screen and (max-width: 450px) {
  h1{font-size:7.5vw;}
  h2{font-size:4vw}
  .de{font-size:5vw;}
  .grande{font-size:6vw}
  .mediano{font-size:5vw}
  .chico{font-size:4vw}
  .micro{font-size:3vw}
  .socialTop{margin-top:4.2%;}
  .logButton picture{margin-top:6%}
  /*.logButton{font-size:3.2vw}*/

  /*.lazy-background{width:100%;margin:0;padding-bottom:150%;}*/
  .lazy-fotitos{width:100%;margin:0;padding-bottom:180%;}
  .lazy-title{width:48%;font-size:5vw}
  .button{font-size:5vw}
  .noButton{font-size:5vw}
  .celular{width:60%;}
  .twingo{width:49.8%;}
  .topliltit{padding:1;font-size:4vw}
  .topbigtit{padding:1;font-size:5vw}

  
}