*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}



body {
   background-color: black;
   color: white;
   width: 100%;
}

#roba {
   position: fixed;
   z-index: 3;

}

.title {
   color: rgb(255, 69, 0);
   font-family: 'Amatic SC';
   font-size: 5.5em;
   font-weight: normal;
   margin: 30px 15px 0px 0px;
   z-index: 2;
   position: absolute;
   top: 8px;
   right: 100px;
}


#the-o1 {
   position: relative;
   top: 4px;

}

#the-i1 {
   position: relative;
   right: 97px;
   top: 41px;
   font-size: 2.4em;
   font-weight: 100;
}

#questions {
   position: absolute;
   width: 60px;
   top: 800px;
   left: 200px;
   font-size: 8em;
  
}

#itty-container {
   display: flex;
   position: relative;
   flex-flow: column nowrap;
   align-items: center;

}

#ittyStar {
   display: block;
   width: 72vw;
   position: relative;
   z-index: -1;
}




/* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
/* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
/* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */

.zoom1 {
   color: white;
   transition: scale 1s;
}

.zoom1:hover {
   scale: 1.05;
   z-index: 99;
}

.zoom2 {
   transition: scale 2s;
}

.zoom2:hover {
   scale: 1.10;

}

.zoom3 {
   transition: scale 2s;
}

.zoom3:hover {
   scale: 1.25;

}

.zoom4 {
   transition: scale 2s;
}

.zoom4:hover {
   scale: 1.8;
}

.zoom5 {
   transition: scale 2s;
}

.zoom5:hover {
   scale: 4;
}



 



 
 /* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
 /* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
 /* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
 /* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
 /* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
 /* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
  


/* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
/* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */
/* øˆøˆøˆøøˆøˆøˆøˆøˆøˆøˆøˆøˆøøˆøˆøˆøˆ */


#MammaMia-cigar-container {
   position: relative;
}



#MammaMia-cigar {
   position: absolute;
   top: -90px;
   left: -800px;
   border: 1px solid red;
   z-index: 0;
   opacity: 0.7;
}

#estrellas-1-container {
   /* border: 1px solid blue; */
   display: flex;
   flex-flow: row wrap;
   padding: 10px;
   justify-content: space-evenly;
   position: relative;
   top: 0px;
   z-index: 1;
   border: 1px solid blue;

}

.estrella {
   object-fit: contain;
   /* border: 1px solid red; */
   max-height: 200px;
   width: auto;

}

#water-remote-11 {
   position: relative;
   top: 0px;
   left: 0px;
}

#estrellas-3-container {
   display: flex;
   flex-flow: row wrap;
   justify-content: left;
   width: 40%;
   position: relative;
   top: 0px;
   left: 500px;
   z-index: -1;
   gap: 15px;
   border: 1px solid blue;
   box-shadow: 0px 0px 8px 4px white;
}

.estrellas-3 {

   width: auto;
   height: 100px;
}

#setting-earth-1-container {
 
   position: absolute;
   top: 80vh;
   display: block;
   text-align: center;
   border: 1px solid blue;
}

#setting-earth-1 {
   opacity: 0.7;
}



#cluster-surfing-pelican-bw-purple-container {
   width: 100%;
   padding: 20px;
   border: 1px solid aqua;
   box-shadow: 0px 0px 8px 4px white inset;
   /* background-image: url('opt-images/river-water-bw.jpg'); */
   /* background-size: cover; */

}

#cluster-surfing-pelican-bw-purple {
   width: 100%;
  
}

#goose-three-center-soft-container {
   width: 80%;
   height: auto;
   padding: 22px;
   border: 1px solid white;
   display: flex;
   justify-content: center;
   box-shadow: 0px 0px 10px 3px white;
}

#goose-three-center-soft {
   /* width: 90%; */
   border: 1px solid white;
   width: 100%;
   box-shadow: 0px 0px 7px 3px white;
   padding: 10px;
   
}

#georgia-bite-container {
   
   position: absolute;
   right: 200px;
}


#georgia-bite {
   width: 40%;
   /* position: relative;
   top: 0px;
   left: 0px; */
   opacity: .8;
   border: 5px solid rgb(252, 252, 228);
   padding: 10px;
   border-radius: 4px;
}

#sad-santa {
   border: 2px solid red;
   padding: 20px;
   box-shadow: 0px 0px 7px 2px white inset;
}

#sad-seal {
   width: 1200px;
   border: 1px solid white;
   padding: 20px;
}





#pagina-5 {
   border: 1px solid white;
   box-shadow: 0px 0px 7px 2px white inset;
   padding: 10px;
}
#river-water-bw-container {
   border: 1px solid white;
   box-shadow: 0px 0px 7px 2px white;
   position: relative;
   /* padding: 40px; */
   width: 96vw;
   height: auto;
   padding: 10px;
}

#river-water-bw {
   width: 100%;
   height: auto;
   opacity: 1;
}

#cypress-dusk-container {
   position: absolute;
   border: 2px solid white;
   box-shadow: 0px 0px 7px 2px white; 
   padding: 30px;
   }

   #cypress-dusk {
      width: 26vw;
      opacity: 1;
      box-shadow: 0px 0px 14px 7px white; 
   }
   



#pagina-6 {
   border: 1px solid white;
   position: relative;
   margin: 10px;
}


#eel-center-container {
   position: absolute;
   border: 1px solid white;
   padding: 10px;
   box-shadow: 0px 0px 12px 6px white; 
}

#eel-center {
   border:1px solid white;
   box-shadow: 0px 0px 12px 4px white; 
}


#eel-left-container {
   border: 1px solid white;
   padding: 10px;
   position: absolute;
   left: 20px;
   box-shadow: 0px 0px 7px 2px white; 
}


#eel-right-container {
   border: 1px solid white;
   padding: 10px;
   position: absolute;
   right: 20px;
   box-shadow: 0px 0px 7px 2px white; 
   
}


.eel-left-right {
   /* border: 1px solid white; */
   width: 27vw;
   box-shadow: 0px 0px 7px 2px white; 
   opacity: 0.9;
}



/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/



/* #tower-bots-container {
   background-image: url('opt-images/tower-bots-1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
  

} */

.tower-bots {
   border: 1px solid orange;
   /* width: 400px; */
   padding: 1px;
   margin: 2px;
  
}

#tower-bots-1 {
   position: absolute;
   width: 100px;
   top: 499px;
   left: 200px;
}

#tower-bots-2 {
   position: absolute;
   width: 100px;
   top: 899px;
   left: 700px;
}

#tower-bots-3 {
   position: absolute;
   width: 300px;
   top: 99px;
   left: 25px;
}

#tower-bots-4 {
   position: absolute;
   width: 700px;
   top: 9px;
   left: 500px;
}

#tower-bots-5 {
   position: absolute;
   width: 300px;
   top: 799px;
   left: 600px;
}

#tower-bots-6 {
   position: absolute;
   width: 500px;
   top: 49px;
   left: 400px;
}

#tower-bots-7 {
   position: absolute;
   width: 300px;
   top: 799px;
   left: 400px;
}





.paginas {
   flex: 0 0 100%; 
   flex-direction: column;                  /* full container width */
   scroll-snap-align: start;         /* snap start edge */
   scroll-snap-stop: always;         /* prevent skipping */
   
   display: grid;
   place-items: center;
   position: relative;
   height: 100vh; 
   padding: 20px;
 }






/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/



.capitulos {
   display: flex;
   flex-direction: column;     
   overflow-y: auto;                 /* horizontal scrolling */
   scroll-snap-type: y mandatory;    /* must snap */
   scroll-behavior: smooth;          /* glide motion */
   -webkit-overflow-scrolling: touch;/* momentum on iOS */
 
   width: 100%;
   height: 100vh;                    /* optional: full screen height */
   margin: 0;
   padding: 0px 0px 0px 0px;
   gap: 0;                           /* clean snap positions */
 }

 /* #region santa-ana-page-classes */

.paginas2 {
   height: 100vh;         /* ← REQUIRED for scroll snapping */ 
   flex: 0 0 100%; 
   flex-direction: column;                /* full container width */
   scroll-snap-align: start;         /* snap start edge */
   scroll-snap-stop: always;         /* prevent skipping */
   position: relative;
   color: white;
   background-color: black;
   padding: 20px;
 }


.versions {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  width: 100%;
  height: 100%;
}

.version {
   flex: 0 0 100%;     /* each version fills full width */
   height: 100%;       /* full page height */
   scroll-snap-align: start;
 
   position: relative; /* so you can position arrows inside */
 
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: black;
   border: none;
   padding: 10px 20px;
   font-size: 2rem;
   cursor: pointer;
   color: white;
   backdrop-filter: blur(10px);
 }
 
 .arrow.left { left: 10px; }
 .arrow.right { right: 10px; }


 .initial {
   width: 400px;

}
 
 /* #endregion version-0-santa-ana-creek-zooming */

 
 .santa-ana-creek-zooming {
   position: absolute;
   border: 1px solid white;
   padding: 2px;
 }

 .santa-ana-creek-zooming:hover {
   z-index: 9999 !important;
 }
 
 
.santa-zoom-img {
   width: 100%;
   padding: 10px;
   /* border: 1px solid red;
   box-shadow: 0px 0px 8px 4px white; */
}

.santa-zoom-img:hover {
   z-index: 101;
}




/* #region  version-0 */

#santa-ana-creek-zooming-bw-1-container {
   top: 15vw;
   left: 20vw;
   width: 60vw;
   opacity: 0.9;
   /* border: 1px solid yellow; */
   z-index: 16;
}

#santa-ana-creek-zooming-bw-2-container {
   top: 800px;
   left: 60px;
   width: 300px;
   opacity: 0.4;
   /* border: 3px solid darkred; */
}

#santa-ana-creek-zooming-bw-3-container {
   opacity: 0.8;
   top: 40px;
   right: 1200px;
   width: 400px;
   /* border: 1px solid purple; */
}

#santa-ana-creek-zooming-bw-4-container {
   top: 400px;
   left: 220px;
   width: 300px;
   opacity: 0.7;
   /* border: 1px solid white; */
   z-index: 17

}

#santa-ana-creek-zooming-bw-5-container {
  opacity: 0.5;
  top: 50px;
  right: 100px;
  width: 500px;
  /* border: 1px solid orange; */
}

#santa-ana-creek-zooming-bw-6-container {
  opacity: 0.6;
  top: 400px;
  right: 600px;
  width: 500px;
  /* border: 1px solid green; */
}


#santa-ana-creek-zooming-bw-7-container {
   
   top: 600px;
   right: 90px;
   width: 600px;
   opacity: 0.8;
   /* border: 3px solid pink; */
   z-index: 18;
   
}

/* #endregion version-2-santa-ana-creek-zooming */






/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/





/* #region version-1-santa-ana-creek-zooming */


#santa-ana-creek-zooming-bw-1-1-container {
   top: 15vw;
   left: 20vw;
   width: 20vw;
   opacity: 0.9;
   /* border: 1px solid yellow; */
   z-index: 16;
}

#santa-ana-creek-zooming-bw-2-1-container {
   top: 400px;
   left: 390px;
   width: 20vw;
   opacity: 0.8;
   /* border: 1px solid red; */
   z-index: 15;
}

#santa-ana-creek-zooming-bw-3-1-container {
   opacity: 0.8;
   top: 80px;
   right: 1200px;
   width: 400px;
   /* border: 1px solid purple; */
}

#santa-ana-creek-zooming-bw-4-1-container {
   top: 400px;
   left: 220px;
   width: 300px;
   opacity: 0.7;
   /* border: 1px solid white; */
   z-index: 17

}

#santa-ana-creek-zooming-bw-5-1-container {
  opacity: 0.8;
  top: 508px;
  left: 100px;
  width: 500px;
  /* border: 1px solid orange; */
  z-index: 2;
}

#santa-ana-creek-zooming-bw-6-1-container {
  opacity: 1;
  top: 0px;
  right: 0px;
  width: 70vw;
  /* border: 1px solid green; */
}


#santa-ana-creek-zooming-bw-7-1-container {
   top: 600px;
   right: 90px;
   width: 600px;
   opacity: 0.8;
   /* border: 3px solid pink; */
   z-index: 18;
}

#santa-ana-creek-zooming-bw-8-1-container {
   top: 800px;
   right: 800px;
   width: 300px;
   opacity: 0.7;
   /* border: 1px double red; */
   z-index: 18;
}


/* #endregion version-1 */


.angry-bird-containers {
   position: absolute;
   padding: 15px;
   border: 1px solid red;
   opacity: .7;
}

#angry-bird-1-container {
   top: 4px;
   left: 20vw;
   opacity: 4;

}
#angry-bird-2-container {
   top: 67px;
   left: 40vw;

}
#angry-bird-3-container {
   top: 20px;
   left: 70vw;

}
#angry-bird-4-container {
   top: 45px;
   left: 80vw;

}
#angry-bird-5-container {
   top: 35vh;
   left: 17vw;

}
#angry-bird-6-container {
   top: 89vh;
   left: 45vw;

}
#angry-bird-7-container {
  top: 65vh;
   left: 76vw;

}
#angry-bird-8-container {
   top: 34vh;
   left: 12vw;

}
#angry-bird-9-container {
   top: 6vh;
   left: 12vw;
}


#storm-day-day2-container {
   position: relative;
   border: 3px solid darkblue;
   height: 90vh;
}


.storm-day-day2-image-container {
   position: absolute;
   border: 1px solid blue;
   padding: 20px;
   /* opacity: 0.6; */
}

.storm-day-day2 {
   width: 100%;
   height: auto;
   display: block;
}




#image-container-1 {
   top: 80vh;
   left: 60vw;
   width: 20vw;
}
#image-container-2 {
   top: 60vh;
   left: 12vw;
   width: 40vw;
}

#image-container-3 {
   top: 20vh;
   left: 10vw;
   width: 80vw;
   opacity: 0.9;
   z-index: 6;
}

#image-container-4 {
   top: 79vh;
   left:20vw;
   width: 27vw;
}

#image-container-5 {
   top: 10vh;
   left: 60vw;
   width: 19vw;
}

#image-container-6 {
   top: 4vh;
   left: 2vw;
   width: 60vw;
}
#image-container-7 {
   top: 38vh;
   left: 1vw;
   width: 40vw;
}
























/* Modal container */
.img-modal {
  display: flex;            /* always flex, we control visibility with opacity + pointer-events */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;     /* cannot click when hidden */
  transition: opacity 0.8s ease-out;
}

.img-modal-content {
   width: 80%;
}

/* When visible */
.img-modal.show {
  opacity: 1;
  pointer-events: auto;     /* clickable again */
}

/* Image fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.img-modal.show .img-modal-content {
  animation: fadeIn 0.3s ease-out forwards;
}
















/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
/* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/

























@media (max-width: 768px) {

   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   /* ¨¨¨¨√√ç∆©√∂ß∆˙ç√˚˙∆∆˙∑©∂˚˙©ç˙˚. ßmedia ç∫√∂√ç˙ß√ç˙ßç˙ßç˙*/
   #the-o1 {
      position: relative;
      top: 4px;

   }

   #the-i1 {
      position: relative;
      right: 53px;
      top: 26px;
      font-size: 2.4em;
      font-weight: 100;
   }

   #title {
      position: relative;
      top: -20px;
      left: -90px;
      right: auto;
      text-align: center;
      padding-right: 0;
      padding-top: 0px;
      font-size: 3em;
      margin: -30px 0px 0px 0px;
      width: 100%;
      color: rgb(255, 69, 0);

      /* border: 2px solid green; */

   }

   #questions {
      display: block;
      position: relative;
      top: -380px;
      left: 0px;
      width: 90vw;
   }

   #ittyStar {
      display: block;
      width: 100vw;
      position: relative;
      top: -100px;
      left: 30px;
      z-index: -1;
      /* border: 2px solid white; */
   }




   #MammaMia_cigar {
      width: 80vw;
      position: relative;
      top: 10px;
      left: -10px;
      border: 1px solid red;
      opacity: 0.8;
   }

   #estrellas-1-container {
      position: relative;
      top: 0px;
      border: 1px solid blue;
      display: flex;
      flex-flow: row wrap;
      padding: none;
      margin-top: none;
      width: 100%;
      justify-content: space-evenly;
   }


   .estrella {
      border: 1px solid red;
      max-height: 100px;

   }

   #water-remote-11 {
      position: relative;
      top: 0px;
      left: 0px;
   }

   #estrellas-3-container {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      /* height: 300px; */
      width: 100%;
      position: relative;
      top: 0px;
      left: 0px
   }

   .estrellas-3 {
      height: 40px;
      border: 1px solid blue;
      object-fit: contain;
   }

   #georgia-bite {
      width: 90%;
      position: relative;
      top: -200px;
      left: 0px;
      opacity: .8;
      border: 5px solid rgb(252, 252, 228);
      padding: 10px;
      border-radius: 4px;
   }

  
}