@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&display=swap');
*{
  margin:  0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}
main{
  display: flex;
  overflow: hidden;
}
a{
  text-decoration: none;
}

.am-btn{
  cursor: pointer;
}

body{
  background-color: #b5d5e0;
  transition: background-color 0.5s ease-in-out;
  -webkit-transition: background-color 0.5s ease-in-out;
}

.social-sidebar{
  border-radius: 0px 10px 10px 0px;
  background-color: #1d3557;
  padding: 18px 10px 18px 8px;
  height: fit-content;
  position: fixed;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 10px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 10000;
}

.social-med-btn{
  cursor: pointer;
}
.social-sidebar .social-med-btn:hover{
  color: #1d3557 !important;
}


#container{
  overflow: hidden;
}
section{
  /* margin-top: 10vh; */
  min-height: 100vh;
  max-height: 100vh;
  min-width: 100vw;
  max-width: 100vw;
  overflow: visible;
}

.res-nav{
  width: 100vw;
  height: 0vh;
  z-index: 200000;
  position: absolute;
  background-color: orange;
  transition: height 1s ease-in-out;
  -webkit-transition: height 1s ease-in-out;
  overflow: hidden;
}
.res-nav ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}
.res-nav button{
  background-color: transparent;
  border: none;
  color: white;
  font-weight: 500;
  font-size: large;
}
.res-nav.opened{
  height: 100vh;
}

#nav-icon4 {
  width: 50px;
  height: 100%;
  position: relative;
  margin: 10px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 80%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 15px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 30px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span{
  background-color: white;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 5px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  top: 35px;
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 34px;
  left: 8px;
}

.res-menu-btn{
  display: none;
}






nav{
  display: flex;
  flex-direction: row;
  padding: 0 3.5%;
  justify-content: space-between;
  position: absolute;
  width: 100vw;
  height: fit-content;
  background: rgba( 255, 255, 255, 0.3 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 5.5px ); 
  -webkit-backdrop-filter: blur( 5.5px ); 
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  z-index: 2000000;
}
nav button{
  background: transparent;
  border: none;
  padding: 1.5rem 1.4rem;
  font-weight: 700;
  font-size: 1fr;
  color: #1d3557;
  border-bottom: 3px solid transparent;
  text-align: center;
}
button{
  background: transparent;
}
nav button:hover{
  border-bottom: 3px solid #1d3557;
}

.reg-btn{
  border-radius: 100px;
  padding: 13px 17px;
  min-width: max-content;
  font-weight: 600;
  background-color: #1d3557 !important;
  color: #fff !important;
}

#aud, .faq_btn{
  background-color: salmon;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: none;
  position: fixed;
  bottom: 20px;
  /* left: 20px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20000;
  cursor: pointer;
}
#aud{
  right: 20px;
}
.faq_btn{
  left: 20px;
}

#aud img, .faq_btn img{
  height: 35px;
  width: 35px;
  mix-blend-mode: soft-light;
}
#moon{
  aspect-ratio: 1/1;
  position: fixed;
  width: 15%;
  /* width: 200px; */
  z-index: -4;
  top: 100%;
  right: 10vw;
  /* right: 25%; */
  border-radius: 50%;
  box-shadow: 0px 0px 50px 30px  rgb(255, 255, 255);
}
#moon img{
  width: 100%;
  height: 100%;
}
img{
  -webkit-user-drag: none;
}
#sun{
  aspect-ratio: 1/1;
  width: 15%;
  /* height: 200px; */
  background-color: #ffe8b2;
  border-radius: 50%;
  position: fixed;
  z-index: -2;
  top: 5%;
  left: 9%;
  box-shadow: 0px 0px 50px 30px  rgb(255, 255, 255);
}
.outer, .inner{
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #ffe198;
  width: 85%;
  /* width: 165px; */
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.inner{
  aspect-ratio: 1/1;
  width: 80%;
  background-color: #ffdb7d;
}

.header{
  width: 40%;
  position: relative;
  margin-left: 30%;
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
#logo{
  width: 30vw;
}

section:nth-child(1){
  flex-direction: column;
}
section:nth-child(1) a{
  align-self: center;
  width: 20%;
  display: flex;
  justify-content: center;
  padding: 1% 1.5%;
}



.about{
  width: 40%;
  line-height: 29px;
  color: #1d3557;
  position: relative;
  display: inline;
  float: left;
  left: 10vw;
  margin-top: 10%;
}
.theme-content, .events-text-cont{
  color: #1d3557;
  width: 35%;
  margin-left: 10vw;
  position: relative;
  margin-top: 10%;
}
.footer{
  color: #fbfbf2;
  display: flex;
  flex-direction: column;
  margin-left: 10vw;
  width: 40vw;
  position: relative;
  margin-top: 10%;

}
.social-media{
  display: flex;
  flex-direction: row;
  margin: 10px 0 15px;
  column-gap: 20px;

}
.social-med-btn{
  border: 2px solid #fbfbf2;
  border-radius: 50%;
  padding: 10px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fbfbf2;
}

.social-med-btn-1{
  border: 1.5px solid #fbfbf2;
  border-radius: 50%;
  padding: 10px;
  width: 30px !important;
  height: 30px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fbfbf2;
}

.social-med-btn:hover{
  border: 1.5px solid #fbfbf2;
  background-color: #fbfbf2;
  color: #7f5690;
}
.btn-container{
  display: flex;
  column-gap: 20px;
  margin-top: 10px;
}
.events-img{
  width: 30vh;
  height: 35vh;
  background-position: center;
  background-size: cover;
  /* display: inline-block; */
  border: 0.7rem solid white;
  border-radius: 20px;
  position: relative;
  background-repeat: no-repeat;
}
.white-overlay{
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  color: #1d3557 !important;
  font-size: 27px;
}
.white-overlay{
  transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
}
.events-img:hover .white-overlay{
  opacity: 100%;
}

.events-img:nth-child(1){
  transform: rotate(-14deg);
  margin: 7% 0 0 5%;
}
.events-img:nth-child(2){
  transform: rotate(14deg);
  margin: 8% 3% 0 19%;
}
.events-img:nth-child(3){
  transform: rotate(4deg);
  left: 10%;  
  top: 8%;
}
.gallery-sec img{
  border: 5px solid white;
  border-radius: 13px;
  position: relative;
}
section{
  display: flex;
}
.login-btn, .regis-btn{
  background: transparent;
  border: 2px solid white;
  padding: 2.2% 3.5%;
  color: white;
  border-radius: 50px;
  font-weight: 600;
}
.login-btn:hover, .regis-btn:hover{
  background-color: white;
  color: #7f5690;
}
.initiative img{
  height: 15vh;
  max-width: 50vw;
  position: relative;
  top: 13vh;
  left: 11vw;
}
.initiative h1{
  font-size: 11vh;
  position: relative;
  color: #1d3557;
  left: -35vw;
  top: 22vh;
  height: 20vh;
}
.init-content{
  position: relative;
  min-width: 28vw;
  top: 18vh;
  color: #1d3557;
  right: 15vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}
.init-content img{
  left: 0;
  top: 0;
  border: 2px solid white;
  border-radius: 5px;
  /* height: 20vh;
  width: auto; */
  width: 80%;
  height: auto;
}
.init-content button{
  background-color: transparent;
  border: 2px solid #1d3557 ;
  /* margin: 1% 0 ; */
  padding: 3% 6%;
  border-radius: 20px;
  font-weight: 600;
}
.init-content button:hover{
  background-color: #1d3557;
  color: white;
  font-weight: 600;
}

.timer-cont{
  min-width: 100vw;
  padding: 0 40vw;
  max-height: 20vh;
  display: flex;
  column-gap: 5vw;
  color: #1d3557;
  font-weight: 700;
  flex-direction: column;
  z-index: 1;
  position: relative;
  margin-bottom: 15px;
}
.header button{
  background-color: #b5d5e0;

}

.val-cont{
  display: flex;
  justify-content: space-around;
}
.days h1, .hours h1, .mins h1, .seconds h1{
  font-size: 3vw;
}
.days, .hours, .mins, .seconds{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
  padding: 10px 0;
  width: 8vw;
}
.days{
  border-radius: 10px 0 0 10px;
}
.seconds{
  border-radius: 0 10px 10px 0;
}



/* aftermovie */
.header-btn-cont{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
}
.header-btn-cont button{
  border-radius: 100px;
  padding: 13px 17px;
  min-width: max-content;
  font-weight: 600;
  border: 2px solid #1d3557;
  color: #1d3557;
}
.header button:hover{
  background-color: #1d3557;
  color: #fff;
}
.header a{min-width: max-content; }
iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 8px solid white;
  border-radius: 30px;
  width: 65vw;
  aspect-ratio: 1.77/1;
}


.stats-cont{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  height: min-content;
  width: 80vw;
  position: relative;
  left: 50%;
  top: 15%;
  transform: translate(-50%, 0);
  row-gap: 30px;
  color: white;
}
.stats-tile{
  display: flex;
  align-items: center;
  column-gap: 20px;
  justify-self: center;
}

.stats-tile h1{
  font-size: 50px;
}
.stats-tile span{
  font-weight: 500;
}



.theme-vid{
  position: relative;
  margin: 42vh 0 0 0;
  width: 40vw;
  height: auto;
  left: 0;
  transform: none;
  top: 0;

}
.theme-container{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 40vh;
  column-gap: 5vw;
}
.theme-content{
  margin-left: 0;
  margin-top: 22vh;
}

.banner{
  position: absolute;
  top: 3vh;
  width: 30vw;
  transition: all 0.5 ease-in;
  -webkit-transition:  all 0.5s ease-in;
}
.banner:nth-child(2){
  right: 0;
}





@keyframes fadeUp{
  0% {opacity: 0}
  100% {opacity: 100%;}
}

@media screen and (max-width: 1250px) {
  nav{padding: 0 10vw;}
  .nav-btns{display: none;}
  .res-menu-btn{ display: inline;}
}

@media screen and (max-width: 1090px) {  /*tablet*/
  .init-content img{display: none;}

  iframe{
    width: 90vw;
    border: 3px solid white !important;
    border-radius: 10px;

  }
  nav{
    padding: 0 10vw;
  }

  .initiative h1{
    font-size: 8vw;
  }
  .init-content{
    right: 50vw;
    transform: translate(-40%, 0);
    top: 35vh;
    min-width: 70vw;
    line-height: 25px;
    font-size: 18px;
  }
  .header{
    margin-top: 25vh !important;
  }
  .header img{
    width: 50vw !important;
  }
  .nav-btns{
    display: none;
  }
  .res-menu-btn{
    display: inline;
  }
  .about, .theme-content{
    margin: 24% 0 0 20%;
    width: 55vw;
  }
  .about p, .theme-content p{
    width: 100% !important;
    font-size: 1.5vh !important;
    line-height: 2vh !important;
    text-align: center;
    width: 100%;
  }
  .about h1, .theme-content h1{
    text-align: center;
    font-size: 35px !important;
    margin-bottom: 15px !important;
    /* line-height: 1.8rem; */
  }
  .events-img{
    height: 25vh;
    min-width: 40vw;
    border: 0.8vh solid white;
  }
  .events-img:nth-child(1){
    top:10%;
    left: 0%;
  }
  .events-img:nth-child(2){
    top:20%;
    left: -10%; 
  }
  .events-img:nth-child(3){
    top: 40%;
    left: -90%;
  }
  .footer{
    margin: 43% 15%;
  }
  .footer h1{
    font-size:40px !important;
  }
  .login-btn, .regis-btn{
    padding: 3.3% 5.6%;
    font-size: 95%;
  }
  .timer-cont p{
    font-size: 35px !important;
  }
  
  .days, .hours, .mins, .seconds{
    font-size: 12px !important;
  }
  .timer-cont p{
    min-width: 100%;
    text-align: center;
    /* margin-bottom: 3vh; */
  }
  .stats-tile img{
    width: 60px;
    height: 60px;
  }
  .stats-cont{
    width: 100vw;
  }
  .stats-tile h1{
    font-size: 30px;
  }

  .theme-container{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 5vh;
    width: 100vw;
  }
  .theme-vid{margin: 0; width: 60vw;}
  .theme-content{margin: 40vh 0 0 0 !important;}
}

.bg-none{background: none !important;}
.mobile-dessert{
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: none;
  z-index: 10;
}


@media screen and (max-width: 900px){
  .banner{top: 5vh; width: 30vw;}
}



@media screen and (max-width: 500px){ /*mobile*/
  .banner{display: none;}
  iframe{width: 92vw !important;}

  main{flex-direction: column; height: fit-content; padding-bottom: 30vh;}
  /* #container{overflow-y: scroll !important} */
  nav, .res-nav{position: fixed}
  .mobile-dessert{display: block;}

  section{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh !important;
    min-height: max-content;
    background: none !important;
  }
  .footer-sec{ margin-bottom: 10vh !important; }
  .events-sec{margin-top: 20vh;}
  .header-sec{margin-top: 4vh;}
  
  #moon, #sun{display: none;}

  .header, .about, .theme-content, .theme-container, .stats-cont{margin: 0 !important;}
  .about{left: 0;}
  .initiative img, .initiative h1, .init-content{
    top:0 !important; 
    left: 0 !important; 
    position: relative !important; 
    height: max-content;
  }
  .initiative{flex-direction: column; row-gap: 2vh;}
  .init-content{
    right: 0vw !important; 
    transform: translate(0, 0);
    width: 70vw;
    font-size: 13px;
    line-height: 20px;
  }
  .stats-tile{color: #1d3557 !important;}
  .stats-tile img{filter: invert(75%)}
  .stats-cont{top: 0;}
  .footer{
    top: 0;
    left: 0;
    margin: 0;
    text-align: center;
    color: #1d3557 ;
  }
  .social-med-btn{border-color: #1d3557 !important;}
  .footer i, .footer a{color: #1d3557 !important;}
  .events-img{
    margin: 0 !important;
    position: relative;
  }
  .events-img:nth-child(1){
    top: -20vh !important;
    left: 10vw !important;
  }
  .events-img:nth-child(2){
    top: 10vh !important;
    left: 10vw !important;
  }
  .events-img:nth-child(3){
    top: -20vh !important;
    left: -15vw !important;
  }

  #aud, .faq_btn{
   height: 50px;
   width: 50px;
  }
  .faq_btn img{
    width: 25px;
    height: auto;
  }
  .social-sidebar{
    padding: 10px 5px 10px 4px;
  }
  .social-sidebar .social-med-btn{
    border: 0;
  }

  .header-btn-cont{
    flex-direction: column;
    row-gap: 20px;
  }
  .header-btn-cont button{
    padding: 10px 12px;
  }
  .white-overlay{
    font-size: 22px;
  }
  .header img{
    width: 70vw !important;
  }
  .about, .theme-content{
    margin-top: 25vh;
  }
  .about h1, .theme-content h1{
    font-size: 22px !important;
    line-height: 22px;
    margin-bottom: 10px !important;
  }
  .about p, .theme-content p{
    line-height: 18px !important;
  }
  .footer{
    width: 65vw;
    margin-top: 70%;
  }
  .footer h1, .footer p, .btn-container, .social-media{
    max-width: 100%;
    text-align: center;
  }
  .footer h1{
    font-size: 28px !important;
  }
  .footer p{
    font-size: 14px;
  }
  
  .social-media{
    justify-content: space-around;

  }
  .social-med-btn{
    width: 40px;
    height: 40px;
    border: 1px solid white;
  }
  .social-med-btn-1{
    width: 30px !important;
    height: 30px !important;
    border: 1px solid white;
  }
  .social-med-btn i{
    font-size: 150% !important;
  }
  .btn-container{
    justify-content: space-around;
    padding: 0 20%;
  }
  .login-btn, .regis-btn{
    padding: 6% 10%;
    border: 1px solid white;
  }
  .timer-cont p{
    font-size: 8vw;
  }
  .timer-cont h1{
    font-size: 17px;
  }
  .theme-content{margin-top: 55vh;}
  .theme-vid{width: 70vw;}
}

@media screen and (min-width: 1000px) and (min-height: 1200px){   /* ipad pro*/
  .header{
    margin-top: 25vh;
  }
  /* .header img{
    width: 70vw !important;
  } */
  /* .about, .theme-content{
    margin: 24% 0 0 20%;
    width: 55vw;
  } */
  /* .footer{
    margin-top: 30%;
  } */
  .footer p, .footer h1{
    text-align: left !important;
  }
  .about p, .theme-content p, .footer p{
    width: 100% !important;
    font-size: 1.5vh !important;
    line-height: 2vh !important;
    text-align: center;
    width: 100%;
  }
  .about h1, .theme-content h1, .footer h1{
    text-align: center;
    font-size: 40px !important;
    margin-bottom: 15px !important;
    /* line-height: 1.8rem; */
  } 
  .social-media, .btn-container{
    width: 100%;
    column-gap: 5%;
  }
  .login-btn, .regis-btn{
    padding: 3.7% 6.6%;
    font-size: 1.2em;

  }

  .events-img{
    height: 25vh;
  }
  .events-img:nth-child(1){
    top:7%;
    left: 2%;
  }
  .events-img:nth-child(2){
    top:19%;
    left: -10%;
  }
  .events-img:nth-child(3){
    top: 37%;
    left: -7%;

  }
}

@media screen and (max-height: 750px) and (min-width: 1000px){  /* small height desktop*/
  .header img{
    width: 25vw !important;
  }
  .about, .theme-content{
    margin: 7% 0 0 4%  !important;
    width: 42vw;
  }
  .about h1, .theme-content h1{
    margin-bottom: 18px !important;
  }
  .about p, .theme-content p{
    line-height: 3vh !important;
  }
  .events-img:nth-child(1){
    margin-left: 13%;
  }
  .init-content{
    right: 5vw;
  }
  .theme-container{
    margin-top: 10vh;
    font-size: 0.8rem;
  }
  .theme-vid{
    margin-top: 20vh;
  }
  .theme-content{top: -5vh;}
}

@media screen and (max-width: 700px){
  .init-content{
    /* right: 50vw; */
    top: 35vh;
    min-width: 70vw;
    font-size: 13px;
    line-height: 20px;
  }
  .timer-cont{
    flex-direction: column;
    padding: 0 20vw;
  }
  .timer-cont span{
    font-size: 10px;
  }
  .timer-cont p{
    min-width: 100%;
    text-align: center;
    margin-bottom: 3vh;
  }
  .lightboxImg{
    min-width: 85vw;
  }
  .stats-cont{
    top: 30vh;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media screen and (min-width: 900px) {
  .stats-tile h1{
    width: 120px;
  }
}

@media screen and (max-width: 400px){
  .stats-cont{
    top:15vh;
    grid-template-columns: 1fr;
  }
  .stats-tile img{
    width: 40px;
    height: 40px;
  }
  .stats-tile h1{
    font-size: 20px;
  }
  .stats-tile span{
    font-size: 11px;
  }
}

/* Snackbar */

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 80px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
  animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 80px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 80px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 80px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 80px; opacity: 1;}
  to {top: 0; opacity: 0;}
}


/* lightbox styling   */
.lightbox, .am-lightbox{
  min-height: 100vh;
  position: fixed;
  width: 100vw;
  background: rgba( 255, 255, 255, 0.25 );
  backdrop-filter: blur( 25px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  top: 0;
  left: 0;
  display: none;
  z-index: 1;
}
.lightboxImg{
  max-height: 70vh;
  max-width: 50vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.close{
  width: 1.6rem;
  aspect-ratio: 1/1;
  position: absolute;
  right: 3vw;
  top: 13vh;
  cursor: pointer;
  
}
.close img{
  position: relative;
  width: 80%;
}

/* .theme-content{
  margin-top: 0% !important;
  padding-top: 0;
}
.theme-content iframe{
  position: absolute;
  width: 40vw;

} */

.theme-content iframe{
  z-index: 1;
  /* position: absolute; */
  margin-top: -10vh;
  
}