body, html {
  height: 100%;
  margin: 0;
  font: 400 16px/1.5 "open sans", sans-serif;
  color: #777;
}

a {
  text-decoration: none;
  color: #777;
}

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

#menu {
  z-index: 2;
}

#menu-bar {
  width: 45px;
  height: 40px;
  margin: 30px 0 20px 20px;
  cursor: pointer;
}

.bar {
  height: 5px;
  width: 100%;
  background-color: #fff;
  display: block;
  border-radius: 5px;
  transition: 0.3s ease;
}

.upscalefont  {
font: 500 16px/1.5 "merriweather", serif;
}

.subhead {
font: 500 1.7rem/1.5 "merriweather", serif;
letter-spacing: 7px;
text-transform: uppercase;
}


#bar1 {
  transform: translateY(-4px);
}

#bar3 {
  transform: translateY(4px);
}

.nav {
  transition: 0.3s ease;
  display: none;
}

.nav ul {
  padding: 0 22px;
}

.nav li {
  list-style: none;
  padding: 6px 0;
}

.nav li a {
  color: white;
  font-size: 16px;
  text-decoration: none;
}

.nav li a:hover {
  font-weight: 600;
}

.menu-bg, #menu {
  top: 0;
  left: 0;
  position: absolute;
}

.menu-bg {
  z-index: 1;
  width: 0;
  height: 0;
  margin: 30px 0 20px 20px;
  background: radial-gradient(circle, #222, #4C4C4C);
  opacity: 0.9;
  border-radius: 50%;
  transition: 0.3s ease;
}

.change {
  display: block;
}

.change .bar {
  background-color: white;
}

.change #bar1 {
  transform: translateY(4px) rotateZ(-45deg);
}

.change #bar2 {
  opacity: 0;
}

.change #bar3 {
  transform: translateY(-6px) rotateZ(45deg);
}

.change-bg {
  width: 520px;
  height: 460px;
  transform: translate(-60%,-30%);
}

.bgmain-1, .bgmainhistory, .bgmainvenue, .bgmainwhatson, .bgmain-2, .bgmain-3, .bgmain-4, .bgmain-5, .bgmain-6, .bgmain-7, .bgmain-8, .bgmaincontact, .bgmain-social {
  position: relative;
  opacity: 0.9;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgmain-2 {
  position: relative;
  opacity: 1.0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bgmain-1 img {
  position: relative;
  left: 0;
  top: 0;
  text-align: center;
  color: #000;
}

.bgmain-1 {
  background-image: url("../images/introbgtop.jpeg");
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bgmainvenue img {
 position: relative;
 left: 0;
 top: 0;
 text-align: center;
 color: #000;
}

.bgmainvenue {
  background-image: url("../images/venuebgtop.jpeg");
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.logo {
  position: relative;
  left: 0;
  top: 20%;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
  text-align: center;
}

.logowhatson {
  position: absolute;
  left: 0;
  top: 31%;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
    text-align: center;
}

.bgmain-2 {
  background-image: url("../images/introbgmid.jpg");
  height: 50vh;
}

.bgmain-8 {
  background: transparent;
  height: 500px;
}

.bgmain-3 {
  background-image: url("../images/introbgbottom.jpg");
height: 100vh;
}

.bgmain-social {
  background-color: #fff;
height: 115px;
}

.bgmain-4 {
  background-image: url("../images/venuebgbottom.jpg");
  height: 100vh;
  opacity: 1.0;
}

.bgmain-5 {
  background-image: url("../images/whatsonbgbottom.jpg");
height: 100vh;
}

.bgmain-7 {
  background-image: url("../images/contactbgbottom.jpg");
  height: 80vh;
}

.bgmain-6 {
  background-image: url("../images/historybgbottom.jpg");
  height: 100vh;
}

.bgmainhistory img {
 position: relative;
  left: 0;
  top: 0;
  text-align: center;
  color: #000;
}

.bgmainhistory {
  background-image: url("../images/historybgtop.jpeg");
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bgmainwhatson img {
  position: relative;
  left: 0;
  top: 0;
  text-align: center;
  color: #000;
}

.bgmainwhatson {
  background-image: url("../images/whatsonbgtop.jpeg");
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.bgmaincontact img {
  position: relative;
  left: 0;
  top: 0;
  text-align: center;
  color: #000;
}

.bgmaincontact {
  background-image: url("../images/contactbgtop.jpeg");
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.caption {
  position: relative;
  top: 20%;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
  color: #000;
  text-align: center;
}

.caption {
  font: 400 46px "merriweather", serif;
  background-color: transparent;
  color: #fff;
  letter-spacing: 10px;
  line-height: 52px;
  text-shadow: 10px 5px 20px black;
}

.sizebump {
 font: 400 34px "merriweather", serif;
 letter-spacing: 8px;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 70px auto;
  padding-bottom: 50px;
  width: 75%;
}

.containervenue {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 60px auto 30px auto;
  padding-bottom: 50px;
  width: 90%;
}

.containerimages {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 50px auto;
  padding-bottom: 6 0px;
  width: 75%;
}

.box2 {
  text-align: center;
}

.box2 img {
  height: auto;
  max-width: 100%;
  opacity: 0.9;
   }
   
.box3 {
text-align: center;
}

.box3 img {
  height: auto;
  max-width: 100%;
  opacity: 0.9;
   }
  
.box {
  text-align: center;
}

.box img {
  width: 255px;
  height: 350px;
  object-fit: cover;
  display: block;
  padding: 0px 8px;
  margin: 0px auto;
}

.box h2 {
  margin: 14px 0;
  font-size: 14px;
}

.box p {
  margin: 0;
  font-size: 12px;
  color: #555;
  text-align: left;
}

.intro {
  background-color: transparent;
  max-width: 600px;
  margin-right: 0px;
  margin-left: 0px;
  height: 800px;
}

.image {
  margin: 40px 30px 45px 60px; /* Adjust the spacing between the image and the text */
}

.text {
  margin-left: 10px;
  font-size: 13px;
  line-height: 20px;
}

.contact {
  margin: 0px auto;
  padding: 0px auto;
  height: auto;
}

.contact h1 {
  position: absolute;
  left: 0;
  top: 5%;
  width: 100%;
  font: 500 36px/1.5 "merriweather", serif;
  color: #fff;
  text-align: center;
  padding: 0px auto;
}

.contactvenue {
  display: flex;
  margin: 70px auto 0px auto;
  padding: 0px auto;
  height: auto;
}

.contactvenue h1 {
  position: absolute;
  left: 0;
  top: 15%;
  width: 100%;
  font: 500 32px/1.5 "merriweather", sans-serif;
  color: #fff;
  text-align: center;
  padding: 0px auto;
}

.contactwhatson {
  margin: 0px auto;
  padding: 0px auto;
  height: auto;
}

.contactwhatson h1 {
  position: absolute;
  left: 0;
  top: 10%;
  width: 100%;
  font: 500 36px/1.5 "merriweather", serif;
  color: #fff;
  text-align: center;
  padding: 0px auto;
}

.contacthistory {
  margin: 0px auto;
  padding: 0px auto;
  height: auto;
}

.contacthistory h1 {
  position: absolute;
  left: 0;
  top: 5%;
  width: 100%;
  font: 500 36px/1.5 "merriweather", serif;
  color: #4C4C4C;
  text-align: center;
  padding: 0px auto;
}

.social-media-section {
  position: absolute;
  left: 0px;
  top: 25%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

.social-media-sectionwhatson {
  position: absolute;
  left: 0px;
  top: 0%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

.social-media-sectionwhatson p {
  font: 600 14px/1.5 "open sans", sans-serif;
  color: #777;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  padding: 0px 15px 5px 2px;
}

.social-media-sectioncontact {
  position: absolute;
  left: 0px;
  top: 25%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

.social-media-sectioncontact p {
  font: 600 14px/1.5 "open sans", sans-serif;
  color: #777;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  padding: 0px 15px 5px 2px;
}

.social-media-sectionhistory {
  position: absolute;
  left: 0px;
  top: 20%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

.social-media-sectionhistory p {
  font: 600 14px/1.5 "open sans", sans-serif;
  color: #777;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  padding: 0px 15px 5px 2px;
}

.social-media-sectionsecondary {
  position: absolute;
  left: 0px;
  top: 0%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

.social-media-sectionsecondary p {
  font: 600 14px/1.5 "open sans", sans-serif;
  color: #777;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  padding: 0px 15px 5px 2px;
}

.social-media-icon {
  margin: 0px 10px;
}

.social-media-icon img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.social-media-icon img:hover {
  transform: scale(1.1);
}

.section {
  background-color: white;
  display: flex;
  margin: 60px auto;
  padding: 0px 15px;
}

.content {
  background-color: transparent;
  margin: 0px auto;
  padding: 0px auto;
  height: auto;
}

.contentvideo {
  background-color: black;
  margin: 70px auto 0px auto;
  padding: 0px auto;
  height: auto;
}

.content p {
  max-width: 670px;
  line-height: 28px;
}

.sectionquote {
  background-color: #F7F7F7;
  display: flex;
  margin: 0px auto;
  padding: 0px 15px;
}

.sectionvideo {
  background-color: #222;
  display: flex;
  margin: 75px auto 0px auto;
  padding: 50px 15px;
}

.contentquote {
  background-color: transparent;
  margin: 75px auto;
  padding: 0px auto;
  height: 290px;
}

.contentquotevenue {
  background-color: transparent;
  margin: 80px auto;
  padding: 0px auto;
  height: 290px;
}

.contentquotehistory  {
  background-color: transparent;
  margin: 80px auto 60px auto;
  padding: 0px auto;
  height: 290px;
}

.contentquotehistory p {
  font: 300 19px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.contentquotehistory h2 {
  font: 300 15px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.contentquotewhatson  {
  background-color: transparent;
  margin: 80px auto 30px auto;
  padding: 0px auto;
  height: 290px;
}

.contentquotecontact {
  background-color: transparent;
  margin: 30px auto 40px auto;
  padding: 0px auto;
  height: 290px;
}

.contentquotecontact p {
  font: 300 19px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.contentquotewhatson p {
  font: 300 19px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.sectionwhatson {
  background-color: #fff;
  display: flex;
  margin: 0px auto;
  padding: 0px 15px;
  height: auto;
  opacity: 0.9;
}

.contentcontact {
  background-color: transparent;
  margin: 30px auto 30px auto;
  padding: 0px auto;
  width: 500px;
  height: auto;
}


.contentwhatson {
  background-color: transparent;
  margin: 30px auto 50px auto;
  padding: 0px auto;
  width: 500px;
  height: auto;
}

.contentwhatson p {
  font: 400 16px/1.5 "open sans", sans-serif;
  color: #666;
  max-width: 670px;
 text-align: center;
 letter-spacing: 1px;
 padding-bottom: 8px;
}

.contentwhatson h3 {
 font: 500 18px/1.5 "open sans", sans-serif;
  text-transform: uppercase;
    letter-spacing: 4px;
    color: #777;
    padding-bottom: 20px;
    text-align: center;
} 

.listnudge {
padding-bottom: 40px;
}

.contentquote p {
  font: 300 19px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.contentquote h2 {
  font: 300 15px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.contentquotevenue p {
  font: 300 19px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.contentquotevenue h2 {
  font: 300 15px/1.6 "merriweather", serif;
  color: #777;
  max-width: 670px;
 text-align: center;
}

.sectionvenue {
  display: flex;
  margin: 0px auto;
  padding: 0px 15px;
}

.contentvenue {
  background-color: transparent;
  margin: 70px auto 0px auto;
  padding: 0px auto;
  height: auto;
}

.sectionhistory {
  display: flex;
  margin: 0px auto;
  padding: 0px 15px;
}

.contenthistory {
  background-color: transparent;
  margin: 70px auto 50px auto;
  padding: 0px auto;
  height: auto;
}

.contenthistory p {
  font: 400 16px/1.5 "open sans", sans-serif;
  color: #777;
  max-width: 670px;
    line-height: 28px;
}

.contenthistory h3 {
 font: 500 18px/1.5 "open sans", sans-serif;
  text-transform: uppercase;
    letter-spacing: 4px;
  color: #777;
    padding-bottom: 20px;
    text-align: center;
} 

.contentvenuemain {
  background-color: transparent;
  margin: 0px auto 20px auto;
  padding: 0px auto;
  height: auto;
}

.highlight {
  font-weight: 400;
  border-bottom: 1px dotted #999;
}

.highlightmail {
  font-weight: 350;
  border-bottom: 0;
  color: #333;

}

.contentvenue p {
  font: 400 16px/1.5 "open sans", sans-serif;
  color: #777;
  max-width: 670px;
    line-height: 28px;
}

.contentvenue h3 {
 font: 500 18px/1.5 "open sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #777;
  padding-bottom: 20px;
  text-align: center;
} 

.contentvenuemain p {
  font: 400 16px/1.5 "open sans", sans-serif;
  color: #777;
  max-width: 670px;
    line-height: 28px;
}

.contentvenuemain h3 {
 font: 500 18px/1.5 "open sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #777;
  padding-bottom: 20px;
  text-align: center;
} 

.sectionfooter {
  background-color: #3F3F3F;
  display: flex;
  margin: 0px auto;
  padding: 0px 15px;
}

.contentfooter {
  background-color: transparent;
  margin: 0px auto;
  padding: 0px auto;
}

.footermenu {
  margin: 0px auto 40px auto; /* Center the line horizontally */
   width: 100%;
   text-align: center;
}

.footermenu a {
   width: 100%;
  font-weight: 400;
  color: #fff;
  font-size: 0.68rem;
  line-height: 21px;
  letter-spacing: 2px;
  text-transform: uppercase;
    margin: auto 12px auto 12px; 
}

.footermenu a:hover {
 color: #fff; 
 }
 
 .footermenu a:visited {
 color: #fff; 
 }

.contentfooter p {
  max-width: 570px;
  font-weight: 400;
  color: #fff;
  font-size: 0.88rem;
  margin: 0px auto 20px auto;
  line-height: 21px;
}

.contentfooterimg {
  margin: 20px auto 10px auto; /* Center the line horizontally */
   width: 100px;
}

.content h1 {
  font: 500 16px/1.5 "open sans", sans-serif;
  color: #777;
  padding-top: 80px;
  font-weight: 500;
  padding-bottom: 15px;
}

 .content h3 {
  font: 500 18px/1.5 "open sans", sans-serif;
  text-transform: uppercase;
  color: #777;
  padding-bottom: 25px;
  letter-spacing: 4px;
    text-align: center;
}

.content h4 {
  font: 400 18px "merriweather", serif;
  color: #888;
  padding-bottom: 2px;
  line-height: 30px;
}

.rounded-button {
  font-size: 16px;
  margin: 70px auto 30px auto;
  padding: 13px 18px;
  border: 1px solid #f5cf47;
  border-radius: 5px;
  background-color: #f5cf47;
  color: #777;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  display: flex;
  }

.rounded-button:hover {
  background-color: #f5d973;
}

.rounded-button a, a:hover {
  text-decoration: none;
  color: #777;
}

.rounded-buttoncheck {
  font-size: 16px;
  margin: 70px auto 0px auto;
  padding: 13px 18px;
  border: 1px solid #f5cf47;
  border-radius: 5px;
  background-color: #f5cf47;
  color: #777;
  width: 155px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  display: flex;
  }

.rounded-buttoncheck:hover {
  background-color: #f5d973;
}

.rounded-buttoncheck a, a:hover {
  text-decoration: none;
  color: #777;
}


.image-container {
  flex-shrink: 0;
  margin-left: 80px;
  margin-top: 30px;
}

.image-container img {
  border-radius: 2px;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
}

.orange-line {
  width: 80px;
  height: 3px; /* Adjust the height as needed */
  background-color: orange;
  margin: 0 auto; /* Center the line horizontally */
}

.pink-line {
  width: 80px;
  height: 3px; /* Adjust the height as needed */
  background-color: pink;
  margin: 0 auto 120px auto; /* Center the line horizontally */
}

.green-line {
  width: 80px;
  height: 3px; /* Adjust the height as needed */
  background-color: #A8D4C1;
  margin: 0 auto; /* Center the line horizontally */
}

.red-line {
  width: 80px;
  height: 3px; /* Adjust the height as needed */
  background-color: #c9658c;
  margin: 70px auto 0px auto; /* Center the line horizontally */
}

.blue-line {
  width: 80px;
  height: 3px; /* Adjust the height as needed */
  background-color: #86A6D6;
  margin: 70px auto 0px; /* Center the line horizontally */
}

.grey-line {
  width: 80px;
  height: 3px; /* Adjust the height as needed */
  background-color: #B9B9B9;
  margin: 0 auto; /* Center the line horizontally */
}

.weight {
font-weight: 600; 
}

.maillink {
 font-weight: 500; 
 font-size: 14px;
 letter-spacing: 2px;
 
}

.quotemark {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgmain-1, .bgmainvenue, .bgmainhistory, .bgmain-2, .bgmain-3, .bgmainwhatson, .bgmaincontact {
    background-attachment: scroll;
  }

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .container, .containervenue {
    flex-direction: column;
    width: 90%;
    padding-bottom: 10px;
  }

  .box img{
    width: 100%;
    height: auto;
  }

  .image-container img {
    width: 100%;
    height: auto;
  }

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}