@font-face {
    font-family: "main";
    src: url(calluna.otf);
  }

  html {
    min-height: -webkit-fill-available;
  }

  body {
    background-color: rgb(0, 0, 0);
    margin: 0%;
    position: relative;
    font-family: "main", 'Times New Roman', serif;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  #booking-section {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: -10;
  opacity: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-content: center;
  justify-content: center;
}

.booking-slate {
  height: 95vh;
  width: 70vw;
  display: flex;
  flex-direction: column;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1));
  border-radius: 32px;
  border-style: solid;
  border-color: rgba(154, 125, 87, 0.436);
  border-width: 2px;
}

#bookings-header-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 15vh;
  margin-bottom: -5px;
}

.bookings-header-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

#close-button-container {
  display: flex;
  justify-content: right;
  align-items: top;
}

#close-button {
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin-top: 32px;
  margin-right: 32px;
  background-color: rgba(0, 0, 0, 0);
  border-style: none;
  transition: all 0.2s}

#X-icon {
  height: 32px;
  width: 32px;
  fill: rgb(116, 106, 90);
  transition: all 0.2s;
}

#close-button:hover #X-icon{fill:rgb(67, 8, 8)}

.enquiry-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex:3;
}

.vertical-centered-flexdiv{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex:0.7
}

.horizontal-centered-flexdiv{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex:0.7
}

.enquiry-sent-div{
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  height: 90%;
  width: 30%;
  background-color: rgb(16, 123, 64);
  transition: opacity 0.2s;
  opacity: 100;
  z-index: -1;
}

.checkmark{
  height: 20px;
  width: 20px
}

.clarification-div {
  position: absolute;
  background-color: rgba(5, 5, 5, 0.95);
  border-style: solid;
  border-width: 2px;
  border-color: rgb(45, 41, 38);
  left: 175px;
  width: 27vh;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  pointer-events: none;
  z-index: 15;
}

.booking-text-div{
  display:flex;
  align-items: center;
}

.booking-text {
    color: antiquewhite;
    font-size: min(2.15vh, 16px);
    margin: 5px
}

.direct-booking-text {
  color: rgb(172, 162, 148);
  font-size: min(2vh, 15px);
  margin: 5px
}

.select-event {
  background-color: rgb(24, 24, 24);
  color: antiquewhite;
  height: 30px;
  width: 190px;
  font-size: 14px;
  padding: 4px;
  border-radius: 4px;
  border-color: rgb(189, 189, 189);
  margin: 5px;
}

.textboxes-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.contact-box{
  background-color: rgb(24, 24, 24);
  color: antiquewhite;
  height: 20px;
  font-size: 16px;
  padding: 4px;
  margin: 5px; 
}

@media (max-width: 600px) {.contact-box {margin-top: 10px; margin-bottom: 5px}}

#email-textbox {width: 265px}

#phone-textbox {width: 104px}

#comment-area {
  background-color: rgb(24, 24, 24);
  color: rgb(90, 90, 90);
  resize: none;
  font-size: 16px;
  padding: 4px;
  width: 390px;
  height: 142px;
  margin: 5px;
  font-family: Geneva, Verdana, sans-serif;
}

#terms-div{flex:0.5}

@media (max-width: 600px) {#terms-div{margin: 0 5vw 0 5vw}}

.terms-agreement-text{
  color: antiquewhite;
  font-size: 12px;
  margin-top: 20px;
}

.terms-link {color: antiquewhite}

  #neotitlebanner{
    width: 100%;
    height: 20vh;
    background-image: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.6), 
    rgb(0, 0, 0)), 
    url(Images/TitleBanner_c.webp);
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 20vh;
    margin-bottom: -1px;
  }

  .neoHomeTagline{
    display: flex;
    flex-direction: column;
    height: 27.5vh;
    background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0.95));
    font-style: italic;
    line-height: 5.5vh;
    padding: 0 25vw 0 25vw;
  }
  @media (max-width: 600px) {.neoHomeTagline {
    padding: 0 15vw 0 15vw;
    line-height: 16px;
    height: 15vh}}

  .neoTaglineText{
    color: antiquewhite;
    font-style: italic;
    font-size: 1.8vw;
    margin: 0;
  }
  @media (max-width: 600px) {.neoTaglineText {font-size: 15px; margin-bottom: 0px; line-height: 20px}}

  .leftTextDiv{text-align: left;}
  .centerTextDiv{text-align: center;}
  .rightTextDiv{text-align: right;}
  #neoSeparatorText{line-height: 3.5vh;}

  h1{
    color: antiquewhite;
    font-size: 5vw;
    margin: 0;
    letter-spacing: 1vw;
    }

  @media (max-width: 600px) {h1 {font-size: 4vh; font-weight: 500;}}

  h2{
    color: antiquewhite;
    font-size: 3.6vw;
    margin: 0;
    }

  @media (max-width: 600px) {h2 {font-size: 28px; line-height: 10vh;}}

  h3{
    color: antiquewhite;
    font-size: 2.5vw;
    margin: 0;
    }

  @media (max-width: 600px) {h3 {font-size: 21px; margin: 10px}}

  h4{
    color: antiquewhite;
    font-size: 2vw;
    margin: 0;
    }

  @media (max-width: 600px) {h4 {font-size: 32px; margin-bottom: 24px}}

  h5{
    color: antiquewhite;
    font-size: 1.1vw;
    margin: 0;
    font-weight: 100;
  }

  @media (max-width: 600px) {h5 {font-size: 11px; margin-bottom: 0px}}

  #nrs {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}

  .mobile-break {display: none}

  #menu{
    position: fixed;
    height:100vh;
    width: 15vw;
    background-color: rgb(5, 5, 5);
    display: flex;
    flex-direction: column;
  }

  .spacer{flex: 1}

  .triple-spacer{flex: 3}

  #logo{
    height: 25vh;
    background-image: url(Images/PELogo.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .button-container{
    display: flex;
    flex-direction: row;
    text-align: center;
    width: 15vw;
  }

  #menu-buttons{
    flex: 3;
  }

  .menu-button{
    color: antiquewhite;
    background-color: rgb(21, 21, 21);
    font-size: 1vw;
    margin: 1vh;
    min-width: 8vw;
    height: 5.5vh;
    border-width: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.25s;
  }

  .menu-button:hover{
    background-color: rgb(125, 120, 104);
  }

  .menu-button:active{
    background-color: rgb(255, 255, 255);
    color: black
  }

  .mobile-nav {display: none}

  #mobile-bar {
    position:fixed;
    height: 8vh;
    width: 100vw;
    background-color: rgb(5, 5, 5);
    z-index: 500;
    display: none;
    flex-direction: row;
  }

  .mobile-bar-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8vh
  }

  .mobile-language {height: 5vh; opacity: 0; pointer-events: none;}

  .mobile-spacer {flex: 1; display: none}

  .mobile-logo {height: 80%; opacity: 0.5;}

  .mobile-menu-icon {
    height: 5vh;
    width: 5vh;
    margin: 1.5vh;
    background-image: url(Images/mobile-icon.png);
    background-size: cover;
    background-position: center;}

  #mobile-menu {
    position:fixed;
    display: flex;
    flex-direction: column;
    height: 45vh;
    width: 100%;
    margin-top: -80vh;
    z-index: 400;
    transition: all 0.2s;
  }

  .mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    height: 8vh;
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
    background-color: rgba(18, 11, 3, 0.95);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(96, 90, 83);
    border-radius: 5px;
  }
  
  .mobile-menu-text{
    color: antiquewhite;
    font-family: Geneva, Verdana, sans-serif;
  }

  .content{
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 85vw;
    height: 100vh;
    margin-left: 15vw;
    background-color: rgb(0, 0, 0);
    scroll-behavior: smooth;
  }

  .section-spacer {
    width: 100%;
    height: 30vh
  }
  @media (max-width: 600px){.section-spacer{height: 20vh}}

  #home{
    min-height: 100vh;
    width: 100%;
    background-color:black;
  }

  .mobile-menu-spacer {
    width: 100%;
    height: 8vh;
    display: none}

  #title{
    color: rgb(245, 209, 148);
    font-size: 5vw;
    margin: 0;
    letter-spacing: 1vw;
  }

  .blackText{color: black;}

  #WWH{
    min-height: 80vh;
    width: 100%;
    background-image: url(Images/about.webp);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 600px) {#WWH {background-image: url(Images/m-about.webp)}}

  #transitionbanner-in{
    width: 100%;
    height: 5vh;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0))
  }
  @media (max-width: 600px) {#transitionbanner-in{height: 2.5vh}}

  .WWHBoxesDiv{
    display: flex;
    flex-direction: row;
  }
  @media (max-width: 600px) {.WWHBoxesDiv {
    flex-direction: column;
    height: 60vh}}

  .WWHBox{
    background: linear-gradient(to bottom, 
    rgba(23, 17, 9, 0.95),
    rgba(23, 17, 9, 0.8));
    width: 17vw;
    border-radius: 15px;
    padding: 2vh
  }
  @media (max-width: 600px) {.WWHBox {
    height: 16vh;
    max-height: 100px;
    width: 80vw;
    padding: 2vw 5vw 2vw 5vw;
    margin: 0 5vw 0 5vw;}}
  @media (max-width: 330px) {.WWHBox {
    max-height: 110px;}}

  .WWH-tagline-div {
    text-align: center;
    margin: 1vw 0 1vw 0;
  }

  #WWH-question {
    color: rgb(255, 232, 220)
  }
  @media (max-width: 600px) {#WWH-question {
    font-size: 20px;
    margin: 0}}

  #WWH-tagline {
    font-weight: 800;
    color: antiquewhite}
  @media (max-width: 600px) {#WWH-tagline {
    font-size: 12px;}}
  
  #WWH-text {
    font-style: italic;
    color: rgb(209, 196, 179)
  }
  @media (max-width: 330px) {#WWH-text {font-size: 11px}}

  #game-events-banner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.35), 
    rgb(0, 0, 0)), 
    url(Images/GamesBanner-c.webp);
    background-size: cover;
    background-position: top;
  }

  #about-text{
    color: antiquewhite;
    margin: 5vw, 5vh;
    font-size: 3vh;
    line-height: 5vh;
  }

  #transitionbanner-out{
    width: 100%;
    height: 5vh;
    background: linear-gradient(to top, black, rgba(0, 0, 0, 0))
  }
  @media (max-width: 600px) {#transitionbanner-out{height: 2.5vh}}

  #scenarios {min-height: 100vh}

  .minor-tagline{
    color: antiquewhite;
    font-size: min(1.5vw, 24px);
    margin: 0;
    font-style: italic;
  }
  @media (max-width: 600px) {.minor-tagline {font-size: 14px; 
    line-height: 12px;
    margin-right: 4vh;
    margin-left: 4vh;
    margin-bottom: 4vh;
  }}

  @media (max-width: 600px) {#scenarios-tagline {height: 12vh}}

  .taglinebanner{
    width: 100%;
    height: 10vh;
    background-color: black;
    text-align: center;
    font-style: italic;
    line-height: 6vh;
  }

  .scenarios-wrapper{
    display: flex;
    flex-direction: row;
  }
  @media (max-width: 600px) {.scenarios-wrapper {
    flex-direction: column;
    align-items: center;}}

  .scenario-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 27vw;
    background-color: rgb(32, 4, 4);
    border-radius: 6px;
  }
  @media (min-aspect-ratio: 17/9) {.scenario-wrapper {min-height: 60vh}}
  @media (max-aspect-ratio: 17/9) {.scenario-wrapper {max-height: 60vh}}
  @media (max-width: 600px) {.scenario-wrapper {
    width: 94vw;
    text-align: left;
    margin-bottom: 20px;
    max-height: 50vh}}

  .scenario-title {
    font-size: 2.8vh;
    line-height: 8vh;}
  @media (max-width: 600px) {.scenario-title{
    font-size: 18px;
    line-height: 20px;
    margin: 10px}}

  .scenario-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%
  }
  @media (max-width: 600px) {.scenario-div {
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;}}

  .scenario-element-div {
    display: flex;
    flex: 1;
    width: 24vw;
    min-height: 11vw;
    margin: 1vh 1vw 1vh 1vw;
  }
  @media (max-width: 600px) {.scenario-element-div {
    width: 100%;
    height: 160px;
    margin: 1vw 1vw 1vw 2vw;}}

  .product-img {
    height: 10vw;
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    box-shadow: 0px 0px 16px 8px rgba(5, 5, 5, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #criminal-img-div {
    background-image: url(Images/criminal.webp)}
  
  #magic-img-div {
    background-image: url(Images/magic-c.webp);
    background-position: bottom}

  #secret-img-div {
    background-image: url(Images/illuminati-c.webp)}

  #story-div {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    width: 22.5vw;
    padding: 2vh 0.75vw 0 0.75vw;
  }
  @media (max-width: 600px) {.story-div {
    width: 100%;
    margin: 1vw 2vw 1vw 1vw}}

  .story-text {    
    font-size: min(1vw, 18px);
    font-style: italic;
    font-stretch: ultra-condensed;
    color: rgb(154, 141, 125);
    text-align: justify;
    text-justify: distribute;
    margin: 0 1vh 1vh 1vh;
  }
  @media (min-width: 320px) {.story-text {font-size: 9.5px}}
  @media (min-width: 340px) {.story-text {font-size: 10px}}
  @media (min-width: 360px) {.story-text {font-size: 10.5px}}
  @media (min-width: 392px) {.story-text {font-size: 11px}}
  @media (min-width: 438px) {.story-text {font-size: 11.5px}}
  @media (min-width: 480px) {.story-text {font-size: 12px}}
  @media (min-width: 600px) {.story-text {font-size: min(1vw, 18px)}}

  .enquiry-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 15vh;
  }

  .golden-btn {
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: .3em;
    height: 2.75em;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 1em;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
                inset 0 -2px 5px 1px rgba(139,66,8,1),
                inset 0 -1px 1px 3px rgb(207, 187, 109);
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
    color: rgb(120,50,5);
    text-shadow: 0 2px 2px rgba(207, 187, 109, 1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position:center;
  }
  
  .golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                  inset 0 -2px 5px 1px #b17d10,
                  inset 0 -1px 1px 3px rgba(207, 187, 109,1);
    border: 1px solid rgba(165,93,7,.6);
    color: rgba(120,50,5,.8);
  }
  
  .golden-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
                inset 0 -2px 5px 1px #b17d10,
                  inset 0 -1px 1px 3px rgba(207, 187, 109,1);
  }





  #pricing{min-height: 100vh}

  #pricingbanner{
    background-image: 
    linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/Referral.webp);;
  }

  #pricing-chart{
    display:flex;
    flex-direction: column;
    width: 68vw;
    margin: 3vw 12vw 0 5vw}
  
  @media (max-width: 600px){#pricing-chart{
    width: 97vw;
    margin: 5vw 1.5vw 0 1.5vw}}

  .pricing-row{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 2.7vh;
    border-radius: 6px 0px 0px 6px;
    transition: all .5s ease-in-out;
  }

  @media (max-width: 600px){.pricing-row{height: 2.4vh}}

  .spacer-row{
    height: 1vh;
    z-index: 90;
  }

  .narrow-row{height: 1.75vh}

  .pc {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .description-row{
    position: relative;
    background-color: black;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 6px 0px 0px 6px;
  }

  .element-description-cell{
    display: flex;
    flex: 5.8;
    align-items: start;
    justify-content: start;
    margin: 1.5vh 0 3vh 0;
    background-color: rgb(26, 19, 12);
    border-radius: 8px;
    cursor: pointer;
  }

  .element-description-text {
    color: antiquewhite;
    font-size: 1.1vw;
    margin: 1vw;
  }

  @media (max-width: 600px){.element-description-text{font-size: 12px}}

  .element-category-cell {flex: 1.6; justify-content: start; border-radius: 6px 0px 0px 6px;}
  .infocell {flex: 0.3; justify-content: end; background-color: black;}
  .small-spacer-div{flex: 0.1; background-color: black;}
  .element-div{flex: 1.3; justify-content: start; background-color: black;}
  .element-price-div{flex: 1; justify-content: center; background-color: black;}
  .budget-div{flex: 1.2; background-color: rgb(29 66 46)}
  .default-div{flex: 1.2; background-color: rgb(24 35 74)}
  .premium-div{flex: 1.2; background-color: rgb(40 22 71)}
  .custom-div{flex: 1.2; background-color: rgb(25, 25, 25)}
  .large-spacer-div{flex: 0.5; background-color: black;}
  .medium-spacer-div{flex: 1.2; background-color: black;}

  @media (max-width: 600px){.element-category-cell{display: none}}
  @media (max-width: 600px){.infocell{display: none}}
  @media (max-width: 600px){.small-spacer-div{display: none}}
  @media (max-width: 600px){.element-price-div{display: none}}
  
  @media (max-width: 600px){.element-div{flex: 2}}

  .infosvg{
    height: 8px;
    width: 8px;
    fill: rgb(255, 255, 255);
    transition: all 0.2s;
    cursor: pointer;
  }

  .info-button{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    width: 14px;
    border-radius: 14px;
    background-color: rgb(0, 94, 176);
    transition: all 0.2s;
    cursor: pointer;
  }

  @media (max-width: 600px){.infosvg{height: 5px; width: 5px}}
  @media (max-width: 600px){.info-button{height: 10px; width: 10px}}

  .element-row {cursor: pointer;}
  .element-row:hover .element-category-cell{background-color: rgb(30, 30, 30)}
  .element-row:hover .infocell{background-color: rgb(30, 30, 30)}
  .element-row:hover .info-button{background-color: rgb(255, 255, 255)}
  .element-row:hover .small-spacer-div{background-color: rgb(30, 30, 30);}
  .element-row:hover .element-div{background-color: rgb(30, 30, 30);}
  .element-row:hover .element-price-div{background-color: rgb(30, 30, 30);}
  .element-row:hover .budget-div{flex: 1.2; background-color: rgb(44 81 61)}
  .element-row:hover .default-div{flex: 1.2; background-color: rgb(39 50 89)}
  .element-row:hover .premium-div{flex: 1.2; background-color: rgb(55 37 86)}
  .element-row:hover .custom-div{flex: 1.2; background-color: rgb(40, 40, 40)}

  .package-title {
    color: antiquewhite;
    font-size: 1.2vw;
    font-weight: 900;
    margin: 0;
  }
  @media (min-width: 600px){.package-title{font-weight: 800}}

  @media (min-width: 320px) {.package-title {font-size: 10px}}
  @media (min-width: 340px) {.package-title {font-size: 11px}}
  @media (min-width: 360px) {.package-title {font-size: 11.5px}}
  @media (min-width: 400px) {.package-title {font-size: 12px}}
  @media (min-width: 600px) {.package-title {font-size: 1.2vw}}

  .moms-text {
    color: rgb(164, 154, 140);
    font-size: 0.7vw;
    margin: 0;
  }

  @media (min-width: 320px) {.moms-text {font-size: 7px}}
  @media (min-width: 340px) {.moms-text {font-size: 8px}}
  @media (min-width: 360px) {.moms-text {font-size: 9px}}
  @media (min-width: 400px) {.moms-text {font-size: 10px}}
  @media (min-width: 600px) {.moms-text {font-size: 0.7vw}}

  .element-text{
    color: antiquewhite;
    font-size: 0.9vw;
    margin: 0;
  }
  @media (min-width: 320px) {.element-text {font-size: 8px}}
  @media (min-width: 340px) {.element-text {font-size: 9px}}
  @media (min-width: 360px) {.element-text {font-size: 10px}}
  @media (min-width: 400px) {.element-text {font-size: 11px}}
  @media (min-width: 600px) {.element-text {font-size: 0.9vw}}

  @media (min-width: 320px) {#package-details {font-size: 7.5px}}
  @media (min-width: 340px) {#package-details {font-size: 8.5px}}
  @media (min-width: 360px) {#package-details {font-size: 9px}}
  @media (min-width: 400px) {#package-details {font-size: 10px}}
  @media (min-width: 600px) {#package-details {font-size: 0.9vw}}

  .title-price-text{
    color: antiquewhite;
    font-size: 1vw;
    margin: 0;
  }

  @media (min-width: 320px) {.title-price-text {font-size: 9px}}
  @media (min-width: 340px) {.title-price-text {font-size: 9.5px}}
  @media (min-width: 360px) {.title-price-text {font-size: 10px}}
  @media (min-width: 400px) {.title-price-text {font-size: 11px}}
  @media (min-width: 600px) {.title-price-text {font-size: 1vw}}

  .background-text {
    color:rgb(154, 141, 125)
  }

  .column-title{
    color:rgb(128, 117, 104);
    font-size: 0.9vw;
    font-weight: 800;
    margin: 0;
  }

  @media (min-width: 320px) {.column-title {font-size: 8px}}
  @media (min-width: 340px) {.column-title {font-size: 9px}}
  @media (min-width: 360px) {.column-title {font-size: 10px}}
  @media (min-width: 400px) {.column-title {font-size: 11px}}
  @media (min-width: 600px) {.column-title {font-size: 0.9vw}}

  .element-price-text{
    color: rgb(154, 141, 125);
    font-size: 0.8vw;
    margin: 0;
  }

  .offer-text{
    color: antiquewhite;
    font-size: 0.6vw;
    margin: 0;
  }
  @media (max-width: 600px){.offer-text{font-size: 8px;}}

  .qmark-text{
    color: antiquewhite;
    font-size: 1.2vw;
    margin: 0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
  @media (max-width: 600px){.qmark-text{font-size: 14px;}}

  .placeholder-text{
    color: rgb(0, 0, 0);
    font-size: 1.4vw;
    margin: 0;
  }

  .element-category-text {
    color:rgb(76, 65, 47);
    font-size: 1vw;
    font-weight: 800;
    margin: 0 0 0 0.5vw
  }

  #price {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: antiquewhite;
    font-weight: 900;
  }

  .post-pc {
    position: relative;
    background-color: black;
    width: 100%;
    height: 10vh
  }


  .transport-fee-div{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    height: 70vh
  }
  @media (max-width: 600px){.transport-fee-div{height: 50vh}}

  .transport-fee-text{
    font-size: 1.4vw;
  }
  @media (max-width: 600px){.transport-fee-text{font-size: 11.5px}}

  .transportIMG{
    max-width: min(30vw, 360px);
  }
  @media (max-width: 600px){.transportIMG{max-width: min(80vw, 360px)}}

  #levels{
    min-height: 100vh;
    width: 100%;
    background-color:rgb(0, 0, 0);
    text-align: center;
  }
  
  .sectionbanner{
    width: 100%;
    height: 15vh;
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 15vh;
  }

  #levelsbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/LevelsBanner-c.webp);
  }
  
  .banner-title{
    color: antiquewhite;
    font-size: min(7.2vh, 54px);
    margin: 0;
  }

  #levels{margin-bottom: 50vh}

  .levels-content {
    height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .levels-text{
    color: antiquewhite;
    margin: 0px;
    font-size: min(2.7vh, 24px);
  }

  .levels-text-div {
    display: flex; 
    flex: 3;
    align-items: center;
    line-height: 200%;}

  #level-advice {text-align: left}



  .banner-title{
    color: antiquewhite;
    font-size: 7.2vh;
    margin: 0;
  }

  #about{
    min-height: 100vh;
    width: 100%;
    background-image: url(Images/about-c.webp);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 600px) {#about {display: flex; 
                                    align-items: center; 
                                    justify-items: auto;
                                    background-image: url(Images/m-about-c.webp)}}
  
  #about-div{
    background: linear-gradient(to bottom, 
    rgba(23, 17, 9, 0.95),
    rgba(23, 17, 9, 0.8));
    min-width: 10vw;
    max-width: 60vw;
    min-height: 10vh;
    border-radius: 15px;
    margin: auto;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 3vh;
    padding-bottom: 3vh;
    text-align: justify;
    text-justify: distribute;
  }
  
  #about-text{
    color: antiquewhite;
    margin: 5vw, 5vh;
    font-size: min(3vh, 22px);
    line-height: 5vh;
  }

  #FAQ{margin-bottom: 50vh}

  #faqbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/FAQBanner-c.webp);
  }
  @media (max-width: 600px) {#faqbanner{display: none}}
  
  #m-faqbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/m-FAQBanner-c.webp);
  }
  @media (min-width: 600px) {#m-faqbanner{display: none}}
  
  .FAQ-content{
    min-height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: justify; 
    text-justify: distribute;
  }
  
  .FAQ-section {
    color: rgb(95, 88, 79);
    font-size: min(2vw, 32px);
    margin-left: 10vw;
    margin-right: 20vw;
    margin-top: 2em;
    margin-bottom: 0.8em;
  }
  
  .FAQ-question {
    color: rgb(255, 225, 187);
    font-size: min(1.56vw, 24px);
    margin-left: 10vw;
    margin-right: 20vw;
    margin-top: 0.75em;
    margin-bottom: 0em;
  }
  
  .FAQ-answer {
    color: antiquewhite;
    font-size: min(1.2vw, 20px);
    line-height: 150%;
    margin-left: 10vw;
    margin-right: 20vw;
    margin-top: 0.8em;
    margin-bottom: 1em;
  }
  
  @media (max-width: 600px){.FAQ-content{text-align: left}}
  @media (max-width: 600px){.FAQ-section{font-size: 1.4em;}}
  @media (max-width: 600px){.FAQ-question{font-size: 1.1em;}}
  @media (max-width: 600px){.FAQ-answer{font-size: 1em;}}
  
  #upcoming{
    height: 100vh;}

  @media (max-width: 600px){#upcoming{height: 70vh;}}

  #upcomingbanner{
    background-image: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.5), 
    rgb(0, 0, 0)), 
    url(Images/Bookings.webp);
  }

  @media (max-width: 600px) {#upcomingbanner{background-image: linear-gradient(to bottom, 
                                                            rgba(0, 0, 0, 0.5), 
                                                            rgb(0, 0, 0)), 
                                                              url(Images/m-Bookings.webp)}}


  .upcoming-element {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #major-upcoming-element {
    height: 100%
  }
  
  .upcoming-tagline{
    color: antiquewhite;
    font-size: 2vw;
    margin-top: 5vh 2vw 0 2vw;
    text-align: center;
    }

  @media (max-width: 600px) {.upcoming-tagline {font-size: 24px; margin-top: 24px}}

  .upcoming-text{
    color: antiquewhite;
    font-size: 1.3vw;
    margin-bottom: 3vh;
    font-weight: 100;
    text-align: center;
  }

  @media (max-width: 600px) {.upcoming-text {font-size: 16px; margin-bottom: 24px}}

  #contact{
    min-height: 100vh;
    width: 100%;
    background-color:rgb(0, 0, 0);
  }
  
  #contactbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/contact.webp);
  }
  
  .contact-content {
    height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .contact-text-div {align-items: center}
  
  .contact-text {
    color: antiquewhite; 
    font-size: min(1.5vw, 22px);
    }
  
  .contact-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 3fr 2fr;
    grid-template-rows: 3fr 1fr 3fr;
    gap: 2px;
  }
  
  #horizontal-grid-spacer {grid-column: span 5}
  
  #contact-vertical-grid-spacer {grid-row: span 3}
  
  .contact-cell {
    display:flex;
    align-items: center;
    justify-content: left;
  }
  
  .contact-info {
    display:flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 8px 8px rgb(0, 0, 0) inset;
  }
  
  #phone-div {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.8), 
      rgba(0, 0, 0, 0.8)), 
      url(Images/phone.webp)}
  
  #email-div {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.9), 
      rgba(0, 0, 0, 0.9)), 
      url(Images/email.webp)}
  
  .bannerlink{text-decoration: none}

  .social-media-div {
    height: 25vh; 
    width: 100%; 
    display: flex;
    justify-content: center;
  }
  
  .social-media-button {
    height: 70px;
    width: 70px;
    margin: 20px;
    background-color: rgb(0, 0, 0);
    border-style: solid;
    border-color: rgb(59, 57, 44);
    border-width: 3px;
    cursor: pointer;
    transition: all 0.2s
  }
  
  #instagram-button:hover {
    border-color:rgb(221, 42, 123);
    box-shadow: 0 0 8px 3px rgb(221, 42, 123)
  }
  
  #facebook-button:hover {
    border-color:rgb(66, 103, 178);
    box-shadow: 0 0 8px 3px rgb(66, 103, 178)
  }
  
  #linkedin-button:hover {
    border-color:rgb(0, 114, 177);
    box-shadow: 0 0 8px 3px rgb(0, 114, 177)
  }
  
  #instagram-button:hover #instagram-svg{fill:rgb(221, 42, 123)}
  
  #facebook-button:hover #facebook-svg{fill:rgb(66, 103, 178)}
  
  #linkedin-button:hover #linkedin-svg{fill:rgb(0, 114, 177)}
  
  .social-media-icon {
    height: 32px;
    width: 32px;
    fill: rgb(59, 57, 44);
    transition: all 0.2s;}
  
  #instagram-svg{height: 30px}
  
  #facebook-svg{height: 28px}
  
  #linkedin-svg{height: 48px}
  
  #footer{
    background-image: linear-gradient(to top, 
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.9)), 
    url(Images/footer.webp);
    margin-bottom: -1px;
  }
  
  .footer-text{
    color: antiquewhite;
    font-size: min(3vh, 22px);
    margin: 0;
  }


  


  @media (max-width: 600px) {.banner-title {font-size: 28px; line-height: 10vh;}}
  @media (max-width: 600px) {.taglinebanner {height: 5vh}}


  @media (max-width: 600px) {.spacer {display: none;}}

  @media (max-width: 600px) {#menu {display: none;}}
  @media (max-width: 600px) {#mobile-bar {display: flex;}}
  @media (max-width: 600px) {#mobile-menu {display: flex;}}
  @media (max-width: 600px) {.mobile-menu-spacer {display: block}}
  @media (max-width: 600px) {.mobile-spacer {display: block}}
  @media (max-width: 600px) {.content {width: 100%;
                                        margin-left: 0;}}
  
  @media (max-width: 600px) {#eventbanner-container {padding: 0;}}
  @media (max-width: 600px) {.event-img {margin-top: 1vh;
                                          margin-bottom: 1vh;
                                          margin-right: 4%;
                                          margin-left: 4%;
                                          width: 92%;
                                          height: max(23vh, 150px)}}
  @media (max-width: 600px) {#eventbanner-container {flex-direction: column; height: 76vh}}
  @media (max-width: 600px) {#title {font-size: 4vh; font-weight: 500;}}
  @media (max-width: 600px) {#neotitlebanner {height: 12vh; 
                                            line-height: 10vh;
                                            background-image: linear-gradient(to bottom, 
                                            rgba(0, 0, 0, 0.6), 
                                            rgb(0, 0, 0)), 
                                            url(Images/m-TitleBanner-c.webp);}}
  @media (max-width: 600px) {#taglinebanner {height: 5vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}}
  @media (max-width: 600px) {#tagline {font-size: 16px; line-height: 5vh; margin-top: -2vh}}
  @media (max-width: 600px) {#dark-spacer {background-color: black;}}
  @media (max-width: 600px) {.home-banner-title {font-size: 20px; line-height: 18px;}}
  @media (max-width: 600px) {.home-banner-text {font-size: 16px; line-height: 14px; margin: 0}}
  @media (max-width: 600px) {.home-banner-tagline {font-size: 14px}}
  @media (max-width: 600px) {.wide-screen-break {display:none}}
  @media (max-width: 600px) {.event-gradient {opacity: 0.8}}
  @media (max-width: 600px) {#game-img {background-image: url(Images/m-competition-c.webp)}}
  @media (max-width: 600px) {#hunt-img{background-image: url(Images/m-hunt-c.webp)}}
  
  @media (max-width: 600px) {#about {display: flex; 
                                      align-items: center; 
                                      justify-items: auto;
                                      background-image: url(Images/m-about-c.webp)}}
  @media (max-width: 600px) {#about-div {max-width: none;
                                          width: 80%; 
                                          margin-left: 10%; 
                                          margin-right: 10%;
                                          margin-top: auto;
                                          margin-bottom: auto;
                                          padding: none}}
  @media (max-width: 600px) {#about-text {font-size: 17px;
                                          line-height: 25px;
                                          margin-top: 1.5vh;
                                          margin-bottom: 1.5vh;
                                          margin-left: 10px;
                                          margin-right: 10px}}
  
  @media (max-width: 600px) {.banner-title {font-size: 28px; line-height: 10vh;}}
  @media (max-width: 600px) {.sectionbanner {height: 10vh}}
  @media (max-width: 600px) {.taglinebanner {height: 5vh}}
  @media (max-width: 600px) {.minor-tagline {font-size: 14px; 
                                              line-height: 12px;
                                              margin-right: 4vh;
                                              margin-left: 4vh;
                                              margin-bottom: 4vh;
  }}
  @media (max-width: 600px) {.event-text {font-size: 18px}}
  @media (max-width: 600px) {.mobile-break {display: block}}
  
  @media (max-width: 600px) {#room-events-banner{background-image: linear-gradient(to bottom, 
                                                                  rgba(42, 42, 42, 0.281), 
                                                                  rgb(0, 0, 0)), 
                                                                    url(Images/m-RoomsBanner-c.webp)}}
  @media (max-width: 600px) {.event-instruction-grid {height: max(80vh, 500px);
                                                      grid-template-rows: 1fr 3fr 3fr 3fr 1fr;
                                                      justify-items: center;
                                                      align-items: center;}}
  @media (max-width: 600px) {#game-instruction-grid {height: max(100vh, 500px)}}
  @media (max-width: 600px) {.instructions-cell {align-items: center; justify-content: center;}}
  @media (max-width: 600px) {.product-container {width: 90vw;
                                                  height: max(85vh, 560px);
                                                  margin: 5vw}}
  @media (max-width: 600px) {.product-title {font-size: 21px; margin: 10px}}
  @media (max-width: 600px) {.product-header {flex-direction: column; min-height: 70px;}}
  @media (max-width: 600px) {.product-title-div {flex: 3}}
  @media (max-width: 600px) {.difficulties-container {flex: 2}}
  @media (max-width: 600px) {.difficulties-text {font-size: 11px;
                                                  margin-left: 12px;
                                                  margin-right: 10px;
                                                  margin-bottom: 0}}
  @media (max-width: 600px) {.unavailable-difficulty {font-size: 10px}}
  @media (max-width: 600px) {#difficulties {margin-right: 10px}}
  @media (max-width: 600px) {.product-body {flex-direction: column; height: auto}}
  @media (max-width: 600px) {.product-img-container {margin: 10px; margin-top: 20px; flex: 12}}
  @media (max-width: 600px) {.product-img {margin: 0px}}
  @media (max-width: 600px) {.fingerprint {display: block}}
  @media (max-width: 600px) {.product-description {margin: 10px}}
  @media (max-width: 600px) {.description-text {font-size: 16px; margin: 15px}}
  @media (max-width: 600px) {.product-specifics {margin: 10px}}
  @media (max-width: 600px) {.specifics-text {font-size: 20px}}
  @media (max-width: 600px) {.book-side {margin: 10px; flex:5}}
  @media (max-width: 600px) {.book-button-container {margin: 0}}
  @media (max-width: 600px) {#games-container {height: max(95vh, 630px)}}
  
  @media (max-width: 600px) {#game-events-banner{background-image: linear-gradient(to bottom, 
                                                                  rgba(42, 42, 42, 0.281), 
                                                                  rgb(0, 0, 0)), 
                                                                    url(Images/m-GamesBanner-c.webp);
                                                                  background-position: center;}}
  
  @media (max-width: 600px) {#levelsbanner{background-image: linear-gradient(to bottom, 
                                                            rgba(42, 42, 42, 0.281), 
                                                            rgb(0, 0, 0)), 
                                                              url(Images/m-LevelsBanner-c.webp)}}     
                                                                                                                            @media (max-width: 600px) {.levels-text {font-size: 17px; line-height: 150%;}}
  @media (max-width: 600px) {#levels-guide {margin-right: 20vw; margin-left: 20vw; text-align: center;}}
  @media (max-width: 600px) {#find-out-button {height: 60px; width: 120px; font-size: 16px}}
  
  @media (max-width: 600px) {.contact-text-div {display: flex; text-justify: distribute}}
  @media (max-width: 600px) {.contact-text {font-size: 15px; margin-right: 20px; margin-left: 20px}}
  @media (max-width: 600px) {#phone {font-size: 11px;}}
  @media (max-width: 600px) {#email {font-size: 11px;}}
  @media (max-width: 600px) {#contact-vertical-grid-spacer {display: none}}
  @media (max-width: 600px) {.contact-grid {grid-template-columns: 1fr 1fr;}}
  @media (max-width: 600px) {.social-media-div {margin-right: 50px; margin-left:50px}}
  @media (max-width: 600px) {.social-media-button {margin: 10px}}
  @media (max-width: 600px) {#instagram-button {border-color:rgb(221, 42, 123); box-shadow: 0 0 8px 3px rgb(221, 42, 123)}}
  @media (max-width: 600px) {#facebook-button {border-color:rgb(66, 103, 178); box-shadow: 0 0 8px 3px rgb(66, 103, 178)}}
  @media (max-width: 600px) {#linkedin-button {border-color:rgb(0, 114, 177); box-shadow: 0 0 8px 3px rgb(0, 114, 177)}}
  @media (max-width: 600px) {#instagram-svg {fill:rgb(221, 42, 123)}}
  @media (max-width: 600px) {#facebook-svg {fill:rgb(66, 103, 178)}}
  @media (max-width: 600px) {#linkedin-svg {fill:rgb(0, 114, 177)}}
  
  @media (max-width: 600px) {#footer{background-image: linear-gradient(to top,
                                                      rgba(0, 0, 0, 0.7), 
                                                      rgba(0, 0, 0, 0.9)), 
                                                        url(Images/m-footer.webp); height: 100px; line-height: 100px;}}
  @media (max-width: 600px) {#footer-text{font-size: 10px}} 
  @media (max-width: 600px) {.booking-slate {border-radius: 16px;
                                              width: 90vw;
                                              height: 120vh; 
                                              margin-top: 2.5vh}}
  @media (max-width: 600px) {#bookings-header-grid {width: 90vw; 
                                                    grid-template-rows: 9vh 1fr; 
                                                    grid-template-columns: 50px 1fr 50px;}}
  
  @media (max-width: 600px) {#selector-flexdiv {flex: 0.4}}
  
  @media (max-width: 600px) {#close-button {margin: 10px}}
  @media (max-width: 600px) {#X-icon {height: 20px}}
  @media (max-width: 600px) {.booking-text {font-size: 16px; margin: 15px}}
  @media (max-width: 600px) {#selector-text {font-size: 14px; margin-right: 5px}}                                         
  
  @media (max-width: 600px) {.clarification-div {left: 30px}}
  
  @media (max-width: 600px) {.wide-screen-break{display: none}}
  @media (max-width: 600px) {.textboxes-div {flex-direction: column; margin-top: 10px;}}
  @media (max-width: 600px) {#phone-textbox {width: 80vw; margin: 5px; margin-top: 10px}}
  @media (max-width: 600px) {#email-textbox {width: 80vw; margin: 5px; margin-top: 10px}}
  @media (max-width: 600px) {#comment-area {width: 80vw; height: 30vw; margin: 10px 15px 15px 15px}}
  @media (max-width: 600px) {.terms-agreement-text {font-size: 14px;}}
  @media (max-width: 600px) {.direct-booking-text {margin: 15px}}
  @media (max-width: 600px) {#enquire-button {height: 40px; 
                                              width: 180px; 
                                              font-size: 14px;
                                              background-color: rgb(48, 48, 48);}}
  @media (max-width: 600px) {#check-div {width: 90%}}                                            
  @media (max-width: 600px) {#book-button {height: 40px; 
                                          width: 180px; 
                                          font-size: 14px;
                                          background-color: rgb(48, 48, 48);
                                          margin-bottom: 40px;
  }}