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

html {
  min-height: -webkit-fill-available;
  scroll-behavior: smooth;
}

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;
}

h1{
  color: antiquewhite;
  font-size: min(5vw, 80px);
  margin: 0;
  letter-spacing: 1vw;
  }

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

h2{
  color: antiquewhite;
  font-size: min(7.2vh, 54px);
  margin: 0;
  }

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

h3{
  color: antiquewhite;
  font-size: min(5vh, 38px);
  margin-left: 2vw;
  }

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

h4{
  color: antiquewhite;
  font-size: min(2vw, 32px);
  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}}
  
.spacer{flex: 1}

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

.language{
  height: 35px;
  width: 35px;
  margin-top: 1vh;
  margin-left: 1vw;
  cursor: pointer
}

.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;
}

#title{
  color: antiquewhite;
  font-size: min(5vw, 78px);
  margin: 0;
  letter-spacing: 1vw;
}

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

.description-text {
  color: antiquewhite;
  font-size: min(1.3vw, 20px);
  margin-left: 2vw;
  margin-right: 2vw
}

.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:disabled {
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(70,70,70,.4),
              inset 0 -2px 5px 1px rgba(71,71,71,1),
              inset 0 -1px 1px 3px rgb(168, 168, 168);
  background-image: linear-gradient(160deg, rgb(83, 83, 83), rgb(108, 108, 108), rgb(219, 219, 219), rgb(117, 117, 117), rgb(83, 83, 83));
  border: 1px solid rgb(88, 88, 88);
  color: rgb(58,58,58);
  text-shadow: 0 2px 2px rgba(168, 168, 168, 1);
  transition: all 0s ease-in-out;
  pointer-events: none;
}

.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);
}

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

#levels{
  min-height: 100vh;
  width: 100%;
  background-color:rgb(0, 0, 0);
  text-align: center;
}

.banner-title{
  color: antiquewhite;
  font-size: min(7.2vh, 54px);
  margin: 0;
}

#levels{margin-bottom: 50vh}

#contact{
  min-height: 100vh;
  width: 100%;
  background-color:rgb(0, 0, 0);
}

.event-grid-vertical-spacer {grid-row: span 3;}

.event-grid-minor-spacer {grid-row: span 2;}

.question-mark-container {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: right;
}

.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: 1500;
  text-align: left;
}

.clarification-text {
  font-size: min(2.2vh, 18px);
  color: antiquewhite;
  margin: 0 
}

.question-mark-container:hover .clarification-div {
  opacity: 1;
}

.question-icon {
  height: 18px;
  width: 18px;
  fill: rgb(136, 127, 116);
  transition: all 0.2s;
  cursor: pointer;}

.current-level-div {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
}

.current-level-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.current-level-text {
  color: antiquewhite;
  font-size: min(1.9vh, 15px);
  margin: 5px;
  font-family: Geneva, Verdana, sans-serif;
}

.challenge-selector-container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  justify-content: right;}

.level-changer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(18, 18, 18);
  left: 3%;
  width: 100px;
  height: 30px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(97, 97, 97);
  pointer-events: none;
}

.change-text {
  font-size: min(1.6vh, 12px);
  color: antiquewhite;
  font-family: Geneva, Verdana, sans-serif;
  margin-left: -2px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#challenge-selector {
  width: 100px;
  opacity: 0}

#challenge-selector:focus {opacity: 1;}

.booking-event-grid {
  display: grid;
  gap: 5px;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-auto-rows: 1fr;
}

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

.booking-text {
    color: antiquewhite;
    font-size: min(2.4vh, 18px);
    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;
}

.calendar-div {
  background-color: rgb(5, 5, 5); 
  grid-row: span 2;
  display: grid;
  grid-template-columns: repeat(7, 14.28%);
  grid-template-rows: repeat(8, 12.5%);
}

@media (max-width: 600px) {.calendar-div {width: 72vw; grid-row: span 1}}

.calendar-text {
  color: antiquewhite;
  font-size: min(2.2vh, 17px);
  margin: 5px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
@media (max-width: 600px) {.calendar-text {font-size: 12px;}}

.calendar-header{
  grid-column: span 7;
  display: flex;
  flex-direction: row;
}

.previous-month {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.next-month {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.current-month {
  flex: 5; 
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.calendarIcon {height: 25%}

.weekday {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(19, 15, 41);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.weekdayMarker {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(19, 15, 41);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dayLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(19, 15, 41);
  grid-column: span 7;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.dayDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: rgb(44, 246, 219);
  transition: all 0.5s;
}

#booked-text {
  color: rgb(41, 40, 45);
}

#selected-text {
  color: rgb(10, 0, 40);
  font-weight: 900;
}

.timeDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.innerTimeDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: rgb(22, 69, 0);
  height: 80%;
  width: 90%;
  transition: all 0.5s;
}

.booking-details-container {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.textboxes-div {
  display: flex;
  position:relative;
  color: black;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.8s ease-in-out;
  background-color: #000000;
}

.textboxes-div2 {
  display: flex;
  position:relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.8s ease-in-out;
  background-color: black;
}

@media (min-width: 600px) {.textboxes-div2 {width: 100%; height: 100px;}}

#venue-question-container {margin-top: 20px}

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

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

#venue-question-text {margin-right: 20px;}

.yesbox {margin-right: 15px; margin-top: -1px}

.nobox {margin-left: 15px; margin-top: -1px}

#postcode-textbox {width: 82px}

#address-textbox {width: 287px}

#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;
  width: 395px;
  height: 80px;
  font-family: Geneva, Verdana, sans-serif;
}

.price-div {
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.terms-link {color: antiquewhite}

@media (max-width: 600px) {.content {width: 100%;
                                      margin-left: 0;}}

@media (max-width: 600px) {#title {font-size: 4vh; font-weight: 500;}}
@media (max-width: 600px) {.banner-title {font-size: 28px; line-height: 10vh;}}
@media (max-width: 600px) {.description-text {font-size: 16px; margin: 15px}}
@media (max-width: 600px) {#phone {font-size: 11px;}}
@media (max-width: 600px) {#email {font-size: 11px;}}
@media (max-width: 600px) {.booking-event-grid {width: 85vw}}
@media (max-width: 600px) {.booking-text {font-size: 16px;}}
@media (max-width: 600px) {.clarification-div {left: 30px}}
@media (max-width: 600px) {.calendar-div {width: 72vw; grid-row: span 1}}

@media (max-width: 600px) {.booking-details-container {grid-row: span 1}}
@media (max-width: 600px) {.textboxes-div {flex-direction: column;}}
@media (max-width: 600px) {.textboxes-div2 {flex-direction: column;}}
@media (max-width: 600px) {#venue-question-text {font-size: 15px}}
@media (max-width: 600px) {#venue-answer {flex-direction: row;}}
@media (max-width: 600px) {#postcode-textbox {margin: 15px}}
@media (max-width: 600px) {#address-textbox {width: 60vw; margin: 15px; margin-top: 30px}}
@media (max-width: 600px) {#phone-textbox {width: 60vw; margin: 15px}}
@media (max-width: 600px) {#email-textbox {width: 60vw; margin: 15px}}
@media (max-width: 600px) {#comment-area {width: 60vw; height: 40vw; margin: 15px}}
@media (max-width: 600px) {.terms-agreement-text {font-size: 12px;}}
.message {
  margin: 12px;
  width: 20vw; 
  min-width: 330px; 
  height: auto}

.a {
  display: grid; 
  align-content: center; 
  justify-content: right
}

.b {
  display: grid; 
  align-content: center; 
  justify-content: left
}

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

#last-bookings-div {
  min-height: 10vw;
  margin-bottom: 20vw;
}

@media (max-width: 600px) {
  #last-bookings-div {
    margin-bottom: 40vw}}

.error-text {
  color: rgb(181, 0, 0);
  font-size: 1em;
  line-height: 1.1em;
  margin-top: -5px
}

.bookings-outer-div{
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  scroll-behavior: smooth;
}

#bookings-banner{
  width: 100%;
  height: 35vh;
  background-image: linear-gradient(to bottom, 
  rgba(42, 42, 42, 0.281), 
  rgb(0, 0, 0)), 
  url(Images/Bookings.webp);
  background-size: cover;
  text-align: center;
  line-height: 35vh;
}

@media (max-width: 600px) {#bookings-title {
  font-size: 32px; line-height: 15vh;}}

.bookings-sidebar {background: linear-gradient(black, rgb(36, 46, 85), rgb(36, 46, 85))}

@media (max-width: 600px) {#bookings-banner {height: 15vh;
  background-image: linear-gradient(to bottom, 
  rgba(42, 42, 42, 0.281), 
  rgb(0, 0, 0)), 
  url(Images/m-Bookings.webp)}}

.bookings-content{
  display: grid;
  grid-template-columns: 10fr 20fr 40fr 20fr 10fr;
  grid-template-rows: 1fr;
}

@media (max-width: 600px) {
  .bookings-content {grid-template-columns: 1fr 1fr 300px 1fr 1fr;}}

.bookings-info-div {
  height: auto;
  display: flex;
  flex-direction: column}

.bookings-modular-div {
  display:flex;
  width: 100%;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  text-align: center;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  background-color: black;
  }

.packages-div {
  margin-bottom: 0
}

.post-packages-div {
  padding-top: 30px;
  transition: all .5s ease-in-out;
}

#first-bookings-div {
  margin-top: 30px;
}

.bookings-text {
  color: antiquewhite;
  font-size: min(1.2vw, 18px);
  margin: 5px
}

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

.bookings-header {
  background-color: rgb(19, 25, 46);
  width: 100%;
  border-radius: 7px;
  margin-bottom: 20px;
}

.bookings-header-text {
  color: antiquewhite;
  font-size: min(2vw, 32px);
  margin: 10px 20px 10px 20px
}

@media (max-width: 600px) {
  .bookings-header-text {font-size: 20px;}}

.package-header-container {
  position: relative;
  display:flex;
  flex-direction: column;
  background-color: black;
  width: 32vw;
  min-height: 5vw;
  justify-content: center;
  align-items: center;
  transition: all .5s ease-in-out;
  padding-top: 0.5vw;
}

@media (max-width: 600px) {
  .package-header-container {width: 300px;
                            height: 95px;}}

.package-header {
  height: 4.5vw;
  display: flex;
  flex-direction: row;
  border-radius: 7px;
}

@media (max-width: 600px) {
  .package-header {min-height: 50px;}}

.package-header:hover .triangle{transform: rotate(-180deg)}

#budget-package-header {
  background-color: #1d422e;
}

#default-package-header {
  background-color: #18234a;
}

#premium-package-header {
  background-color: #281647;
}


.package-selector-div {
  display:flex;
  width: 5vw;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .package-selector-div {width: 60px;}}

.masterBox {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Chrome, Safari, Opera */
  transform: scale(2);
  height: 30px;
}

.package-text-div {
  display:flex;
  width: 22vw;
  justify-content: left;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 600px) {
  .package-text-div {width: 180px;}}

.package-header-text {
  color: antiquewhite;
  font-size: min(1.5vw, 24px);
  margin-left: 4vw;
}

@media (max-width: 600px) {
  .package-header-text {font-size: 16px;}}

.package-expansion-div {
  display:flex;
  width: 5vw;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 600px) {
  .package-expansion-div {width: 60px;}}

.triangle-div{
  width: 50px;
  height: 50px;
  margin: auto;
  text-align:center;

  .triangle{
    fill: transparent;
    stroke: antiquewhite;
    stroke-width: 3;
    transition: all 0.8s ease-in-out;

  @keyframes mymove {
    0%   {opacity:0}
    50%  {opacity:1}
    100% {opacity:0}
  }

    transform-origin: 25px 25px;
  }
}

.elements-div {
  position: relative;
  transition: all .5s ease-in-out;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.package-description-div {
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: left;
  border-radius: 7px;
  background-color: #181716;
}

@media (max-width: 600px) {
  .package-description-div {height: 90px}}

.package-description-text {
  color: rgb(156, 146, 133);
  font-size: min(0.92vw, 15px);
  font-style: italic;
  margin: 20px
}

@media (max-width: 600px) {
  .package-description-text {
    font-size: 11.5px;
    font-stretch: condensed;
    margin: 14px 7px 15px 7px}}

.additional-div-container{
  display: flex;
  width: 32vw;
  height: 1.8vw;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

@media (max-width: 600px) {
  .additional-div-container {
    width: 300px;
    height: 20px}}

.additional-div{
  display: flex;
  flex-direction: row;
  width: 30vw;
  height: 1.2vw;
  margin-left: 2vw;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  background-color: #3b3000;
}

@media (max-width: 600px) {
  .additional-div {
    width: 280px;
    height: 18px;
    border-radius: 2px;
    margin-left: 20px;}}

.additional-text{
  color: antiquewhite;
  font-size: min(0.7vw, 11px);
  margin: 0;
  line-height: 100%;
}

@media (max-width: 600px) {
  .additional-text {
    font-size: 10px;
    margin: 2px}}

.labels-div {
  display: flex;
  flex-direction: row;
  width: 30vw;
  height: 3vw;
  margin-left: 2vw;
  background-color: #000000;
}

@media (max-width: 600px) {
  .labels-div {
    width: 280px;
    height: 40px;
    margin-left: 20px}}

.element-header-container{
  position: relative;
  display:flex;
  background-color: black;
  width: 30vw;
  height: 3vw;
  justify-content: center;
  align-items: center;
  transition: all .5s ease-in-out;
  padding-left: 2vw;
}

@media (max-width: 600px) {
  .element-header-container {
    width: 280px;
    height: 40px;
    padding-left: 20px}}

.element-header{
  transition: all .5s ease-in-out;
  display: flex;
  flex-direction: row;
  width: 30vw;
  height: 2.6vw;
  border-radius: 5px;
  background-color: #473f37;
}

@media (max-width: 600px) {
  .element-header {
    width: 280px;
    height: 36px;}}

#budget-element-header {
  background-color: #1d422e;
}

#default-element-header {
  background-color: #18234a;
}

#premium-element-header {
  background-color: #281647;
}


.element-header:hover .small-triangle{transform: rotate(-180deg)}

.element-header:hover .qmark{
  fill: antiquewhite;
}

.element-selector-div {
  display:flex;
  min-width: 3vw;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .element-selector-div {width: 26px}}

.box-cover {
  position:absolute; 
  width: 1vw;
  height: 1vw;
  z-index: 9;
}

@media (max-width: 600px) {
  .box-cover {width: 20px; height: 20px}}

.element-text-label-div {
  display:flex;
  width: 13.5vw;
  justify-content: left;
  align-items: center;
}

@media (max-width: 600px) {
  .element-text-label-div {width: 126px}}

.element-text-div {
  display:flex;
  width: 13.5vw;
  justify-content: left;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 600px) {
  .element-text-div {width: 126px}}

.element-header-text {
  color: antiquewhite;
  font-size: min(1vw, 16px);
  margin-left: 2vw;
}

@media (max-width: 600px) {
  .element-header-text {
    font-size: 12px;
    margin-left: 4px}}

.element-pricing-label {
  color: antiquewhite;
  font-size: min(1vw, 16px);
}

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

.element-pricing-label-div {
  display:flex;
  width: 8.5vw;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .element-pricing-label-div {width: 95px}}

.element-pricing-div {
  display:flex;
  width: 8.5vw;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 600px) {
  .element-pricing-div {width: 86px}}

.element-pricing-text {
  color: antiquewhite;
  font-size: min(1vw, 16px);
}

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

.element-expansion-div {
  display:flex;
  width: 5vw;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

@media (max-width: 600px) {
  .element-expansion-div {width: 40px}}

.question-div{
  width: 25px;
  height: 25px;
  margin: auto;
  display:flex;
  justify-content: center;
  align-items: center;

  .qmark{
    height: 18px;
    width: 18px;
    fill: rgb(179, 167, 151);
    transition: all 0.2s;
    cursor: pointer;

  @keyframes mymove {
    0%   {opacity:0}
    50%  {opacity:1}
    100% {opacity:0}
    }
  }
}

.element-description-container {
  position: relative;
  display: flex;
  width: 30vw;
  flex-direction: row;
  margin-left: 2vw;
  background-color: black;
  text-align: left;
}

@media (max-width: 600px) {
  .element-description-container {
    width: 280px;
    margin-left: 20px}}

.element-description-div {
  display: flex;
  width: 30vw;
  flex-direction: row;
  border-radius: 5px;
  background-color: #181716;
  text-align: left;
  margin-top: 0.2vw;
  margin-bottom: 0.5vw;
  padding: 15px
}

@media (max-width: 600px) {
  .element-description-div {
    width: 280px;
    padding: 11px}}

.element-description-text {
  color: rgb(188, 176, 161);
  font-size: min(1vw, 16px);
  margin: 0 10px 0 10px
}

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

.package-closer {
  min-width: 40vw;
  min-height: 1vw;
  background-color: #000000;
  transition: all 0.5s ease-in-out;
}

@media (max-width: 600px) {
  .package-closer {
    width: 300px;
    height: 10px}}

.post-package-wrapper {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.details-board {
  position: sticky;
  top: 88vh;
  height: 12vh;
  width: 30vw;
  border-radius: 7px 7px 0 0;
  display: grid;
  grid-template-columns: 1fr 10fr 10fr 10fr 1fr;
  grid-auto-rows: 4fr 10fr 15fr 5fr 4fr;
  background-color: #171717;
  z-index: 1000;
}

@media (max-width: 600px) {
  .details-board {
    width: 300px;
    top: 90vh;
    height: 10vh;}}

.details-cell {
  display:flex;
  justify-content: center;
  align-items: center;
}

#top-aligned {
  align-items: start;
}

#bottom-aligned {
  align-items: end;
}

.details-label {
  color: antiquewhite;
  font-size: min(0.9vw, 14px);
  margin: 0px
}

@media (max-width: 600px) {
  .details-label {
    font-size: 11px}}

.details-value {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: rgb(255, 205, 141);
  font-size: min(1.75vw, 28px);
  margin: 0px
}

@media (max-width: 600px) {
  .details-value {
    font-size: 18px}}

.excl-moms {
  color: antiquewhite;
  font-size: min(0.8vw, 13px);
  margin: 0px
}

@media (max-width: 600px) {
  .excl-moms {font-size: 9px}}

.bookings-calendar-grid {
  display: grid;
  width: 80%;
  height: 30vw;
  grid-template-rows: 1fr 1fr;
}

@media (max-width: 600px) {
  .bookings-calendar-grid {
    height: 335px;
    display: flex}}

#venue-cost-div{
  display: flex;
  padding: 25px
}

#venue-cost {
  font-size: min(1.3vw, 20px)
}

@media (max-width: 600px) {
  #venue-cost {
    font-size: 18px}}

.transit-fee-grid {
  display: grid;
  margin-top: 10px;
  height: 6vw;
  width: 20vw;
  grid-template-columns: 1fr 10fr 14fr 1fr;
  grid-auto-rows: 4fr 5fr 6fr 5fr 4fr;
}

@media (max-width: 600px) {
  .transit-fee-grid {
    width: 200px;
    height: 100px}}

#transit-fee-label{
  margin: 0
}

#transit-fee {
  font-size: min(1.3vw, 20px);
}

@media (max-width: 600px) {
  #transit-fee {
    font-size: 18px;
    margin-bottom: -2px;}}

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

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

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

#transport-moms-text {margin: 10px}

#bookings-comment-area {
  background-color: rgb(24, 24, 24);
  color: rgb(90, 90, 90);
  resize: none;
  font-size: 16px;
  width: 395px;
  height: 80px;
  margin: 40px;
  font-family: Geneva, Verdana, sans-serif;
}

@media (max-width: 600px) {
  #bookings-comment-area {
    width: 290px;
    margin: 20px 0 20px 0}}

.error-div{
  display: none;
  padding: 15px
}

.send-div {
  display: none;
  width: 27vw;
  margin: 40px
}

@media (max-width: 600px) {
  .send-div {
    width: 290px;
    margin: 20px 0 20px 0}}

.send-div-text{
  color: antiquewhite;
  font-size: min(1.1vw, 18px);
  margin: 5px;
  line-height: 160%;
}

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

.send-span{
  display: none
}

#book-button{
  margin: 30px
}

@media (max-width: 600px) {
  #book-button {
    margin: 50px 30px 30px 30px}}

#send-button{
  margin: 20px
}

.error-text {
  color: rgb(181, 0, 0);
  font-size: 1em;
  line-height: 1.1em;
  margin-top: -5px
}

.info-sent-div {
  display: none;
  opacity: 0;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 10000;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,0.5);
  transition: all .2s ease-in-out;
}

.info-sent-slate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
  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;
}

@media (max-width: 600px) {
  .info-sent-slate {
    width: 90vw;
    height: 80vw}}

#info-text{font-size: min(2vw, 32px)}

@media (max-width: 600px) {
  #info-text {font-size: 6vw;}}

@media (min-width: 1000px) {
  input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
  }}


#room-feedback {
  width: 20vw;
  margin-bottom: 20px
}

@media (max-width: 600px) {
  #room-feedback {width: 300px;}}

#feedback-wrapper {height: auto}

#feedback-text-div {cursor: default;}

#feedback-title {
  margin: 0.8vw;
  font-size: min(1.4vw, 22px)
}

@media (max-width: 600px) {
  #feedback-title {font-size: 16px}}

#feedback-description {
  font-size: min(1.1vw, 18px);
  margin: 1.3vw;
  text-align: justify;}

@media (max-width: 600px) {
  #feedback-description {
    font-size: 13px;
    margin: 20px}}

::placeholder {color: rgb(112, 112, 112)}
:-ms-input-placeholder {color: rgb(42, 42, 42)}
::-ms-input-placeholder {color: rgb(42, 42, 42)}

@media (max-width: 600px) {
  .phone-invisible {display: none}}