@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  --primary-color: #c8ac6b;
  /* --primary-color: #d7a8a2; */
  --secondary-color: #262b3f;
  --shiny-color: white;
  --black-color: black;
  --hover-red: rgb(223, 5, 5);
  --calendar-backg: #262b3f;
  --color-calendar: #e0a597;
  --events-bkg: #1f253c;
}
.errorHandle {
  color: red;
}
.blue {
  color: blue;
}
.container {
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  color: var(--primary-color);
}
.main-body {
  max-width: 80%;
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;

  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: 10;
}

/* Transitions */
.transition-1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: var(--black-color);
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease-out;
}
.transition-1.is-active {
  opacity: 1;
  pointer-events: all;
}
.transition-2 {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  bottom: 0;
  z-index: 10000;
  background: var(--black-color);

  transition: 0.5s ease-out;
}
.transition-2.is-active {
  left: 0;
}

.transition-3 {
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 10000;
  background: var(--black-color);

  transition: 0.5s ease-out;
}
.transition-3.is-active {
  top: 0;
}
.trans-popup {
  position: fixed;
  top: 0;
  left: -50%;
  width: 50%;
  bottom: 0;
  z-index: 100001;
  background: var(--black-color);
  transition: 0.75s ease-out;
}
.trans-popupB {
  position: fixed;
  top: 0;
  right: -50%;
  width: 50%;
  bottom: 0;
  z-index: 100001;
  background: var(--black-color);
  transition: 0.75s ease-out;
}
.trans-popup.popactive {
  left: 0;
}
.trans-popupB.popactiveB {
  right: 0;
}
/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
  background: black;
  height: 10px;
  border: 1px solid var(--primary-color);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.logo {
  cursor: pointer;

  background: rgb(16, 16, 16);
  padding: 5px;
  border: 0px solid rgb(50, 50, 50);
  border-radius: 0px 0px 5px 5px;
  cursor: pointer;
}
.logo img {
  position: relative;
  width: 90px;
}
.top-part {
  width: 100%;
  height: 10px;
  z-index: 10001;
}
.nav-links {
  list-style: none;
}
.nav-links li {
  display: inline-block;
}
.nav-links li a {
  text-decoration: none;
  color: var(--primary-color);
  text-transform: uppercase;
  line-height: 0px;
  padding: 20px 15px;
  transition: all 1.5s ease 0s;
}
.nav-links li a ion-icon {
  padding-right: 7px;
}
.nav-links li a:hover {
  background: red;
  transition: all 1.5s ease 0s;
}
/* Hamburger menu */
.ham-menu {
  position: absolute;
  right: 5em;
}
.ham-menu div ion-icon {
  font-size: 2.5em;
}
.hamburger,
.close-menu {
  display: none;
  cursor: pointer;
}
/* Body of html */
.active {
  background: rgb(132, 14, 14);
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(6, 6, 25, 0.53);
  mix-blend-mode: screen;
  z-index: -10;
}
/* .container .video-img img {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: -11;
} */

.container video {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: -11;
}

.middle-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.clubname {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  flex-direction: column;
  justify-content: center;
  margin: auto;
}
.clubname h2 {
  font-size: 6em;
  text-transform: uppercase;
  border: 1px solid var(--primary-color);
  padding: 0px 20px;
  color: var(--shiny-color);
  border-right: 0;
  border-left: 0;
  /* -webkit-text-stroke: 1px var(--primary-color);
  -webkit-text-fill-color: transparent; 
  animation: glow-1;*/
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #e60073, 0 0 8px #e60073,
    0 0 10px #e60073, 0 0 12px #e60073, 0 0 14px #e60073;
}
.clubname p {
  font-size: 1.8em;
  text-transform: uppercase;
  margin-top: 0.7em;
  color: var(--shiny-color);
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073,
    0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
}

.musicplayed {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 20px;
}
.musicplayed p {
  font-size: 1.4em;
  color: var(--shiny-color);
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073,
    0 0 25px #e60073, 0 0 30px #e60073, 0 0 35px #e60073;
}
.musicplayed ion-icon {
  padding: 0 5px 0 5px;
  font-size: 0.7em;
  color: red;
}
.eventlinks {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin: auto;
}
.thumbevent {
  display: block;
  padding: 10px 70px;

  /* box-shadow: 3px 8px 22px rgba(0, 0, 0, 0.95); */
}

.thumbevent img {
  width: 180px;
  height: 120px;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
  cursor: pointer;
}

.thumbevent .moreinfo {
  position: relative;
  /* background: linear-gradient(45deg, #262b3f, #070606); */
  background: var(--primary-color);
  padding: 10px 20px;
  top: -40px;
  border-radius: 0 0 5px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: var(--primary-color);
  cursor: pointer;
}

.img-overlay {
  position: relative;
  top: 0px;
  width: 180px;
  height: 120px;
  border-radius: 5px 5px 0 0;
  transition: 0.9s ease-in-out;
  background: black;
  margin-top: -122px;
  opacity: 0.3;
  cursor: pointer;
}

.img-overlay:hover {
  transform: scale(1);
  opacity: 0.5;
  background: red;
}
.saturday-events-home,
.fridays-events-home {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 10002;
  background-image: url(../images/events/genBack.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.event-transition-1,
.event-transition-1-fr {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 50%;
  background: black;
  z-index: 10003;

  transition: 0.5s ease-out;
}

.event-transition-2,
.event-transition-2-fr {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  left: 50%;
  background: var(--shiny-color);
  z-index: 10003;
  transition: 0.9s ease-out;
}

.trans-top-1,
.trans-top-1-fr {
  left: -100%;
  transition: 0.9s ease-out;
}
.trans-top-2,
.trans-top-2-fr {
  top: -100%;
  transition: 0.9s ease-out;
}
.event-close,
.event-close-fr {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--primary-color);
  background: var(--hover-red);
  cursor: pointer;
}
.event-close ion-icon,
.event-close-fr ion-icon {
  font-size: 1.2em;
  padding: 0.5em;
}
.fri-sat-events {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(50em, 1fr));
}
.fri-sat-flyers {
  width: 49vw;
  color: var(--shiny-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.sat-upcoming-events {
  margin-bottom: 1.3em;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.sat-event-date {
  color: var(--primary-color);
  margin-bottom: 1em;
}
.sat-event-date p {
  font-size: 1.3em;
  text-transform: uppercase;
}
.sat-upcoming-events h1 {
  position: relative;
  top: 33px;
  font-size: 3.5em;
  color: var(--hover-red);
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.3;
  z-index: -1;
}

.fri-sat-flyers h3 {
  font-size: 1.8em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.fri-sat-flyers img {
  width: 45%;
}
.fri-sat-content {
  width: 49vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.moreinfo p {
  color: var(--black-color);
  font-size: 1em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
}
.event-date {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -123px;
  left: 0;
  width: 70px;
  color: var(--black-color);
  background: var(--primary-color);
}

.event-date .event-day h2 {
  font-size: 3em;
  font-weight: 800;
  color: var(--black-color);
  /* -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black; */
  text-shadow: 0 0 1px #fff, 0 0 3px #fff;
}
.event-date .event-month h6 {
  font-size: 1.3em;
  font-weight: 600;
}
.event-date .event-month p {
  font-weight: 300;
}
.down-items {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.social-links {
  right: 0px;
}
.social-links a {
  text-decoration: none;
  color: var(--primary-color);
  font-size: 12px;
  transition: all 0.4s ease 0s;
}
.social-links ion-icon {
  font-size: 1.3em;
  margin-right: 10px;
}
.social-links a:hover {
  color: var(--shiny-color);
}

.audioform,
.audiopause {
  margin-right: 10px;
}
.button {
  appearance: none;
  background: var(--primary-color);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 5px;
  border-radius: 2px;
  color: var(--black-color);
  font-weight: 600;
  transition: 0.4s;
}
.button-1 {
  border: 1px solid var(--shiny-color);
  background-image: linear-gradient(to right, transparent 50%, red 50%);
  background-size: 200%;
  background-position: 0%;
}
.button-1:hover {
  color: white;
  background-position: 100%;
}
.button-2 {
  background-image: linear-gradient(to top, transparent 50%, #68dea0 50%);
  background-size: 100% 200%;
  background-position: 0% 100%;
}
.button-2:hover {
  background-position: 0% 0%;
}

.btn-audio {
  appearance: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 5px;
  border-radius: 2px;
  color: var(--primary-color);
  font-weight: 600;
  transition: 0.4s;
}
.btn-audio-1 {
  background-image: linear-gradient(to right, transparent 50%, #c8ac6b 50%);
  background-size: 200%;
  background-position: 0%;
}
.btn-audio-1:hover {
  color: var(--black-color);
  background-position: 100%;
}

.audio-hide {
  display: none;
}
.hide-popUp {
  display: none;
}
.popup-page {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */
  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9),
      rgba(16, 16, 47, 0.92)
    ),
    url(../images/events/fiesta.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  z-index: 1000;
}

.info-page {
  display: grid;
  width: 100vw;
  grid-gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(50em, 1fr));
}
.left-page {
  z-index: 10px;
  border-right: 0px solid var(--primary-color);
  top: 0;
  height: 100vh;
  color: var(--primary-color);
}
.put-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.friday-event {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.friday-event h2 {
  font-size: 3em;
  color: var(--primary-color);
  font-weight: 700;
  text-transform: uppercase;
}
.free-entry {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.friday-event p {
  font-size: 1.2em;
  padding-top: 10px;
  color: var(--primary-color);
  text-transform: uppercase;
}
.left-page img {
  width: 30em;
  border: 10px solid var(--primary-color);
}
.right-page {
  height: 100vh;
}
.friday-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.info-right-event {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.margin-20 {
  margin-top: 2em;
}
.event-info h5 {
  position: relative;
  font-size: 2em;
  text-transform: uppercase;
  color: var(--black-color);
  /* padding: 2px 10px; */
  background: var(--primary-color);
  box-shadow: 2px 3px var(--shiny-color);
  top: -70px;
}

.popup-date {
  position: absolute;
  display: flex;
  background: var(--primary-color);
  padding: 2px 4px;
  margin-top: -20px;
  box-shadow: 2px 3px var(--shiny-color);
}
.pop-day {
  color: var(--black-color);
}
.pop-day h5 {
  font-size: 3em;
  font-weight: 900;
}
.pop-event-m {
  color: var(--black-color);
}
.free-entry {
  background: var(--primary-color);
}
.free-entry h6 {
  font-size: 1.6em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  color: var(--black-color);
  box-shadow: 3px 2px 3px var(--shiny-color);
}

.info-right-event h2 {
  font-size: 2em;
  color: #453b23;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.info-right-event h5 {
  color: var(--hover-red);
  font-size: 1.2em;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--primary-color);
  border-left: 0px;
  border-right: 0;
}
.info-right-event p {
  color: var(--primary-color);
  font-size: 1.2em;
  padding: 0 1em;
  align-items: center;
  margin-bottom: 0.5em;
}
.event-music {
  margin-bottom: 5px;
}
.event-music ion-icon {
  padding: 0px 10px;
  font-size: 5px;
}
.info-right-event h6 {
  color: var(--primary-color);
  text-transform: uppercase;
  font-size: 1.3em;
  margin-bottom: 20px;
}
.dj-reservation {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.dj-reservation p {
  color: var(--primary-color);
  text-transform: uppercase;
}
.dj-reservation h4 {
  color: var(--hover-red);
  font-size: 1.2em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 20px;
  margin-bottom: 10px;
  border: 1px solid var(--primary-color);
  border-left: 0;
  border-right: 0;
}
.dj-reservation span {
  border: 1px solid var(--primary-color);
  border-left: 0;
  border-right: 0;
  padding: 3px;
}
.dj-reservation a {
  color: var(--primary-color);
  margin-bottom: 5px;
  font-size: 1.2em;
  text-decoration: none;
}
.dj-reservation .book-reservation {
  color: var(--black-color);
  margin-top: 2em;
  font-size: 1em;
  padding: 5px 10px !important;
  text-transform: uppercase;
}

.dj-reservation E-mail {
  margin-top: 10px;
}
.event-address {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--primary-color);

  text-transform: uppercase;
}
.event-address h4 {
  font-size: 1.4em;
  text-transform: uppercase;
  color: var(--hover-red);
  margin-left: -20px;
}
.event-address p {
  margin-bottom: 3px;
}
.event-address ion-icon {
  font-size: 1em;
  padding-right: 10px;
}
.dj-reservation ion-icon {
  font-size: 1em;
  padding-right: 10px;
}
.info-right-event h5 ion-icon {
  font-size: 1em;
  padding-right: 10px;
}

.close-event {
  position: absolute;
  top: 0px;
  right: 0;
  background: var(--hover-red);

  transition: all 1.5s ease 0s;
  color: white;
  cursor: pointer;
}
.close-page p {
  padding: 10px;
}

/* Event Page CSS */
.modify-background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: -11;
  background: black;
}

.modify-background img {
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 96vh;
  opacity: 0.3;
}
.event-body {
  max-width: 80%;
  /* width: 80%; */
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  right: 0;
  /* left: 40px; */
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  background-color: rgba(99, 29, 29, 0);
}
.event-name h2 {
  font-size: 3em;
  color: var(--primary-color);
  font-weight: 600;
  text-transform: uppercase;
  margin: 20px;
}
.event-header {
  /* display: grid;

  grid-gap: 1em;
  
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); */
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  margin: 20px;
}

.event-header .col {
  padding: 1em 1.5em;
  height: 18em;
  width: 18em;

  display: flex;

  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.event-img {
  display: flex;

  justify-content: center;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--primary-color);
  cursor: pointer;
}
.event-img h3 {
  padding: 10px 0;
  text-transform: uppercase;
}
.event-img img {
  width: 18em;
  height: 10em;
  object-fit: cover;
  border-bottom: 2px solid var(--primary-color);
}
.event-img p {
  border-bottom: 0;
  text-transform: uppercase;
  padding: 1em 0;
  font-weight: 500;
}
.event-img h5 {
  padding: 5px 5px;
  background: var(--primary-color);
  color: var(--black-color);
}
.social-event {
  margin-top: 20px;
}
.address-event {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.address-event h3 {
  font-size: 1.5em;
  text-transform: uppercase;
}
.social-icons {
  margin-top: 5px;
}
.social-icons a {
  color: var(--primary-color);

  padding: 5px;
}
.social-icons a:hover {
  color: white;
}
.social-icons ion-icon {
  margin-top: 5px;
  font-size: 1.4em;
}
.footer {
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--primary-color);
  background: var(--black-color);
  width: 100%;
  z-index: 10;
}
.policy-private,
.designed-by {
  padding: 10px 20px;
}
.policy-private a,
.designed-by p {
  color: var(--primary-color);
  font-size: 1em;
  padding-right: 10px;
  text-decoration: none;
}

/* Contact Us comes here */
.contact-form {
  width: 60%;
}
.contact-theme {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.contact-theme h1 {
  color: rgb(81, 10, 10);
  font-size: 4em;
  text-transform: uppercase;
  font-weight: 800;
}
.contact-theme p {
  position: absolute;
  top: 1.5em;
  font-size: 1.3em;
  text-transform: uppercase;
}
form {
  transition: all 4s ease-in-out;
}
.form-control {
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #3a3a3a;
  color: var(--shiny-color);
  font-size: 1.2em;
  padding-bottom: 5px;
  margin-bottom: 1.6em;
}
.submit {
  font-size: 1.2em;
  text-transform: uppercase;
}
.btn-gen {
  appearance: none;
  background: var(--primary-color);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 20px;
  border-radius: 2px;
  color: var(--black-color);
  font-weight: 600;
  transition: 0.4s;
}
.btn-gen-1 {
  background-image: linear-gradient(to right, transparent 50%, #ffffff 50%);
  background-size: 200%;
  background-position: 0%;
}
.btn-gen-1:hover {
  background-position: 100%;
}
.textArea textarea,
.form-email input,
.form-name input,
.form-tel input,
.form-subject input,
.amt-invited input,
.reserve-date input {
  width: 100%;
}
.reserve-date {
  margin-bottom: 1em;
}
.reserve-date div {
  color: grey;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.reserve-date input {
  user-select: none;
}
.submit-btn {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.contact-addr {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;
}
.contact-addr h6 {
  font-size: 2em;
  margin-bottom: 3px;
  text-transform: uppercase;
  color: var(--hover-red);
}
.contact-addr p {
  font-size: 1.2em;
  text-transform: uppercase;
}
.contact-email {
  margin-bottom: 0.5em;
}
.contact-email h4 {
  font-size: 1.5em;
}
.contact-email a {
  font-size: 1.1em;
  text-decoration: none;
  color: var(--hover-red);
}
.divide-line {
  margin-bottom: 3.3em;
  width: 20%;

  border: 1px dotted var(--primary-color);
}
.contact-social-media {
  position: absolute;
  right: 0;
}
.contact-social-media a {
  display: flex;
  color: var(--primary-color);
  margin-bottom: 1.7em;
}
.contact-social-media a:hover {
  color: white;
}
.contact-social-media ion-icon {
  font-size: 1.3em;
}
.video-container{
  width: 80vw;
  margin: 80px auto;
}
.video-container h3{
  margin: 10px auto;
  font-size: 16px;
  text-align: center;
}
.vid-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.vid-col{
  flex-basis: 50%;
  min-width: 250px;
}
.video-thumbnail{
  width: 95%;
  margin: auto;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.small-img-row{
  display: flex;
  background-color: #000000;
  margin: 20px 0;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  width: 86%;
}
.small-img{
  position: relative;
}

.small-img img{
  width: 150px;
}
.small-img-row p{
  margin-left: 20px;
  color: #707070;
  font-size: 15px;
  line-height: 22px;

}
.video-player{
  position: absolute;
	display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.video-player video{
  width: 650px;
  height: 450px;
  margin: auto;
  
}
@media screen and (max-width:680px) {
  .video-player video{
    width: 96vw;
    height: 350px;
  }
}

@media screen and (max-width: 950px){
.vid-row{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}
.small-img-row{
  width: 96%;
}

.vid-col {
  flex-basis: 100%;
  min-width: 450px;
}
.video-container{
  width: 95vw;
  margin: 80px auto;
}
}

@media screen and (max-width: 450px){
  .vid-col {
    flex-basis: 50%;
    min-width: 350px;
  }
}
.play-btn{
  width: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  cursor: pointer;
}
.small-img .play-btn{
  width: 35px;
}
.all-thumbs {
  min-height: 70vh;
  padding: 2em;
  top: 30px;

  display: grid;

  column-gap: 2em;
  row-gap: 2.5em;
  grid-template-columns: repeat(5, 1fr);
}
.thumb-img {
  width: 150px;
  height: 100px;
}
.thumb-img a {
  text-decoration: none;
  color: var(--shiny-color);
}
.img-form {
  width: 100%;
  height: 100%;
}
.img-form img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
}
.img-form img:hover {
  opacity: 0.7;
  border-radius: 15px 25px 0 0;
  transition: opacity 0.3s ease-in;
  transition: border-radius 0.3s ease-in-out;
}

.thumbs-date {
  background: var(--primary-color);
  color: var(--black-color);
  padding: 2px 0;
  font-weight: 700;
  width: 100%;
  border-radius: 0 0 10px 10px;
}
.thumbs-date p {
  margin-left: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.gallery-topic {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.gallery-topic-date h2 {
  font-size: 2.2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: rgb(84, 17, 17);
  letter-spacing: 1px;
  padding: 0;
}

.gallery-topic-date p {
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-top: -2rem;
}
.View-all-gallery {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.View-all-gallery a {
  color: var(--black-color);
  font-weight: 700;
  padding: 2px 6px;
  background: var(--primary-color);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}
.View-all-gallery a:hover {
  color: var(--shiny-color);
}
.all-gallery-grid {
  width: 80vw;
  height: 75vh;
}

.all-months-thumbs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 1rem;
  grid-template-areas:
    "month-1 month-2 month-3 month-4"
    "month-1 month-5 month-6 month-4"
    "month-7 month-8 month-9 month-9"
    "month-10 month-11 month-12 month-12"
    "month-13 month-11 month-14 month-15"
    "month-16 month-17 month-18 month-18"
    "month-19 month-20 month-21 month-22"
    "month-19 month-23 month-23 month-24"
    "month-25 month-26 month-27 month-28"
    "month-29 month-30 month-31 month-28"
    "month-32 month-33 month-33 month-34"
    "month-35 month-36 month-37 month-38"
    "month-39 month-40 month-41 month-42"
    "month-39 month-43 month-44 month-45"
    "month-46 month-47 month-44 month-48"
    "month-49 month-47 month-50 month-50"
    "month-51 month-52 month-53 month-54";
}

.every-month-thumbs {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.months-thumb-1 {
  grid-area: month-1;
  height: 28.5rem;
  background-image: url(../images/2019Dec21/1.jpg);
}
.months-thumb-2 {
  grid-area: month-2;
  background-image: url(../images/2019Nov24/1.jpg);
}
.months-thumb-3 {
  grid-area: month-3;
  background-image: url(../images/2019Nov17/1.jpg);
}
.months-thumb-4 {
  grid-area: month-4;
  height: 28.5rem;
  background-image: url(../images/2019Oct18/5.jpg);
}
.months-thumb-5 {
  grid-area: month-5;
  background-image: url(../images/2019LAXOct10/3.jpg);
}
.months-thumb-6 {
  grid-area: month-6;
  background-image: url(../images/2019Sept14/1.jpg);
}
.months-thumb-7 {
  grid-area: month-7;
  background-image: url(../images/2019Aug17/8.jpg);
}
.months-thumb-8 {
  grid-area: month-8;
  background-image: url(../images/2019Aug03/1.jpg);
}
.months-thumb-9 {
  grid-area: month-9;
  background-image: url(../images/2019July20/6.jpg);
}
.months-thumb-10 {
  grid-area: month-10;
  background-image: url(../images/2019June29/3.jpg);
}
.months-thumb-11 {
  grid-area: month-11;
  height: 28.5rem;
  background-image: url(../images/2019May25/1.jpg);
}
.months-thumb-12 {
  grid-area: month-12;
  background-image: url(../images/2019May11/6.jpg);
}
.months-thumb-13 {
  grid-area: month-13;
  background-image: url(../images/2019April13/1.jpg);
}
.months-thumb-14 {
  grid-area: month-14;
  background-image: url(../images/2019March23/1.jpg);
}
.months-thumb-15 {
  grid-area: month-15;
  background-image: url(../images/2019March16/29.jpg);
}
.months-thumb-16 {
  grid-area: month-16;
  background-image: url(../images/2019Feb02/2.jpg);
}
.months-thumb-17 {
  grid-area: month-17;
  background-image: url(../images/2019Jan12/1.jpg);
}
.months-thumb-18 {
  grid-area: month-18;
  background-image: url(../images/2018Dec15/20.jpg);
}
.months-thumb-19 {
  grid-area: month-19;
  height: 28.5rem;
  background-image: url(../images/2018Dec31/1.jpg);
}
.months-thumb-20 {
  grid-area: month-20;
  background-image: url(../images/2018Nov17/2.jpg);
}
.months-thumb-21 {
  grid-area: month-21;
  background-image: url(../images/2018Oct13/1.jpg);
}
.months-thumb-22 {
  grid-area: month-22;
  background-image: url(../images/2018Sept15/10.jpg);
}
.months-thumb-23 {
  grid-area: month-23;
  background-image: url(../images/2018Aug18/4.jpg);
}
.months-thumb-24 {
  grid-area: month-24;
  background-image: url(../images/2018July21/6.jpg);
}
.months-thumb-25 {
  grid-area: month-25;
  background-image: url(../images/2018July14/1.jpg);
}
.months-thumb-26 {
  grid-area: month-26;
  background-image: url(../images/2018June16/9.jpg);
}
.months-thumb-27 {
  grid-area: month-27;
  background-image: url(../images/2018May26/10.jpg);
}
.months-thumb-28 {
  grid-area: month-28;
  height: 28.5rem;
  background-image: url(../images/2018May12/21.jpg);
}
.months-thumb-29 {
  grid-area: month-29;
  background-image: url(../images/2018April27/2.jpg);
}
.months-thumb-30 {
  grid-area: month-30;
  background-image: url(../images/2018April14/1.jpg);
}
.months-thumb-31 {
  grid-area: month-31;
  background-image: url(../images/2018March31/6.jpg);
}
.months-thumb-32 {
  grid-area: month-32;
  background-image: url(../images/2018March24/1.jpg);
}
.months-thumb-33 {
  grid-area: month-33;
  background-image: url(../images/2018March04/20.jpg);
}
.months-thumb-34 {
  grid-area: month-34;
  background-image: url(../images/2018Feb24/1.jpg);
}
.months-thumb-35 {
  grid-area: month-35;
  background-image: url(../images/2018Feb10/1.jpg);
}
.months-thumb-36 {
  grid-area: month-36;
  background-image: url(../images/2018Jan13/9.jpg);
}
.months-thumb-37 {
  grid-area: month-37;
  background-image: url(../images/2017Dec31/1.jpg);
}
.months-thumb-38 {
  grid-area: month-38;
  background-image: url(../images/2017Nov25/5.jpg);
}
.months-thumb-39 {
  grid-area: month-39;
  height: 28.5rem;
  background-image: url(../images/2017Oct14/1.jpg);
}
.months-thumb-40 {
  grid-area: month-40;
  background-image: url(../images/2017Sept23/21.jpg);
}
.months-thumb-41 {
  grid-area: month-41;
  background-image: url(../images/2017Aug12/4.jpg);
}
.months-thumb-42 {
  grid-area: month-42;
  background-image: url(../images/2017July15/7.jpg);
}
.months-thumb-43 {
  grid-area: month-43;
  background-image: url(../images/2017June17/20.jpg);
}
.months-thumb-44 {
  grid-area: month-44;
  height: 28.5rem;
  background-image: url(../images/2017May20/1.jpg);
}
.months-thumb-45 {
  grid-area: month-45;
  background-image: url(../images/2017April15/1.jpg);
}
.months-thumb-46 {
  grid-area: month-46;
  background-image: url(../images/2017March18/1.jpg);
}

.months-thumb-47 {
  grid-area: month-47;
  height: 28.5rem;
  background-image: url(../images/2017Feb18/1.jpg);
}
.months-thumb-48 {
  grid-area: month-48;
  background-image: url(../images/2017Jan21/15.jpg);
}
.months-thumb-49 {
  grid-area: month-49;
  background-image: url(../images/2016Nov26/nov2016_1.jpg);
}
.months-thumb-50 {
  grid-area: month-50;
  background-image: url(../images/2016June18/3.jpg);
}
.months-thumb-51 {
  grid-area: month-51;
  background-image: url(../images/2016May14/1.jpg);
}
.months-thumb-52 {
  grid-area: month-52;
  background-image: url(../images/2016April16/1.jpg);
}
.months-thumb-53 {
  grid-area: month-53;
  background-image: url(../images/2016March05/1.jpg);
}
.months-thumb-54 {
  grid-area: month-54;
  background-image: url(../images/2016Feb13/1.jpg);
}

.every-month-thumbs a {
  color: var(--black-color);
  text-decoration: none;
  text-transform: uppercase;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  background: rgba(12, 0, 0, 0.4);
  transition: all ease-in-out 500ms;
}
.every-month-thumbs a:hover {
  background: rgba(0, 0, 0, 0.9);
}
.gallery-period {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
}
.all-dates-gallery {
  background: var(--primary-color);
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}
.gallery-month {
  font-size: 2.1rem;
  font-weight: 700;
  padding-left: 3px;
  letter-spacing: -2px;
}
.day-year {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.gallery-day,
.gallery-yr {
  padding: 3px;
  padding-top: 0;
  padding-bottom: 0;
}
.gallery-day {
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-weight: 800;
  text-decoration: underline;
}
.show-galleries {
  display: none;
}

.dark-bg-transparency {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
}
.overlay-galleries {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 3000;
  cursor: pointer;
}

.show-images img {
  object-fit: cover;
  width: 75vw;
  height: 75vh;
}
.forward-backward-btn {
  position: absolute;
  top: 50%;
  width: 75vw;
  display: flex;
}

.forward-backward-btn .forward-btn,
.forward-backward-btn .backward-btn {
  background: var(--hover-red);
  width: 30px;
  position: absolute;
  transition: all ease-in-out 300ms;
  cursor: pointer;
}
.forward-backward-btn .forward-btn {
  right: 0;
}
.forward-backward-btn .backward-btn {
  left: 0;
}
.forward-backward-btn .forward-btn:hover,
.forward-backward-btn .backward-btn:hover {
  background: var(--black-color);
}
.forward-backward-btn .forward-btn ion-icon,
.forward-backward-btn .backward-btn ion-icon {
  color: var(--shiny-color);
  font-weight: 100;
  font-size: 1.7rem;
  height: 20px;
}
.forward-backward-btn .forward-btn ion-icon {
  position: relative;
  right: -14px;
}
/* .menu-btn-div {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid white;
  transition: all ease-in-out 300ms;
}
.menu-btn_burger {
  width: 30px;
  height: 1px;
  background: white;
  border-radius: 2px;
  transition: all ease-in-out 300ms;
  cursor: pointer;
}
.menu-btn_burger::before,
.menu-btn_burger::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 1px;
  background: white;
  border-radius: 2px;

  transition: all ease-in-out 300ms;
  cursor: pointer;
}
.menu-btn_burger::before {
  transform: translateY(-8px);
}
.menu-btn_burger::after {
  transform: translateY(8px);
}
.menu-btn-div.open .menu-btn_burger {
  transform: translateX(-50px);
  background: transparent;
}
.menu-btn-div.open .menu-btn_burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn-div.open .menu-btn_burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
} */
.all-gallery-thumbs {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 1rem;
  grid-template-areas:
    "thumb-1 thumb-1 thumb-2 thumb-3"
    "thumb-4 thumb-5 thumb-7 thumb-3"
    "thumb-4 thumb-6 thumb-7 thumb-8"
    "thumb-9 thumb-9 thumb-10 thumb-11"
    "thumb-12 thumb-13 thumb-10 thumb-14"
    "thumb-12 thumb-15 thumb-15 thumb-14"
    "thumb-16 thumb-17 thumb-18 thumb-19"
    "thumb-20 thumb-17 thumb-21 thumb-22"
    "thumb-20 thumb-23 thumb-23 thumb-24";
}

.gallery-thumbs-img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.gallery-thumbs-img div {
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  transition: all ease-in-out 900ms;
}
.gallery-thumbs-img div:hover {
  opacity: 1;
}

.gallery-thumbs-img div a {
  text-decoration: none;
  text-transform: uppercase;
  color: var(--shiny-color);
  font-size: 1.2rem;
}
.all-gallery-thumbs .thumb-img-1 {
  grid-area: thumb-1;
  background-image: url(../images/2016Nov26/nov2016_24.jpg);
}
.all-gallery-thumbs .thumb-img-2 {
  grid-area: thumb-2;
  background-image: url(../images/2016Nov26/nov2016_2.jpg);
}
.all-gallery-thumbs .thumb-img-3 {
  grid-area: thumb-3;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_1.jpg);
}
.all-gallery-thumbs .thumb-img-4 {
  grid-area: thumb-4;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_3.jpg);
}

.all-gallery-thumbs .thumb-img-5 {
  grid-area: thumb-5;
  background-image: url(../images/2016Nov26/nov2016_4.jpg);
}
.all-gallery-thumbs .thumb-img-6 {
  grid-area: thumb-6;

  background-image: url(../images/2016Nov26/nov2016_5.jpg);
}
.all-gallery-thumbs .thumb-img-7 {
  grid-area: thumb-7;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_6.jpg);
}
.all-gallery-thumbs .thumb-img-8 {
  grid-area: thumb-8;

  background-image: url(../images/2016Nov26/nov2016_7.jpg);
}
.all-gallery-thumbs .thumb-img-9 {
  grid-area: thumb-9;
  background-image: url(../images/2016Nov26/nov2016_8.jpg);
}

.all-gallery-thumbs .thumb-img-10 {
  grid-area: thumb-10;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_9.jpg);
}
.all-gallery-thumbs .thumb-img-11 {
  grid-area: thumb-11;
  background-image: url(../images/2016Nov26/nov2016_10.jpg);
}
.all-gallery-thumbs .thumb-img-12 {
  grid-area: thumb-12;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_11.jpg);
}
.all-gallery-thumbs .thumb-img-13 {
  grid-area: thumb-13;
  background-image: url(../images/2016Nov26/nov2016_12.jpg);
}
.all-gallery-thumbs .thumb-img-14 {
  grid-area: thumb-14;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_13.jpg);
}
.all-gallery-thumbs .thumb-img-15 {
  grid-area: thumb-15;

  background-image: url(../images/2016Nov26/nov2016_14.jpg);
}
.all-gallery-thumbs .thumb-img-16 {
  grid-area: thumb-16;
  background-image: url(../images/2016Nov26/nov2016_15.jpg);
}
.all-gallery-thumbs .thumb-img-17 {
  grid-area: thumb-17;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_16.jpg);
}
.all-gallery-thumbs .thumb-img-18 {
  grid-area: thumb-18;

  background-image: url(../images/2016Nov26/nov2016_17.jpg);
}
.all-gallery-thumbs .thumb-img-19 {
  grid-area: thumb-19;

  background-image: url(../images/2016Nov26/nov2016_18.jpg);
}
.all-gallery-thumbs .thumb-img-20 {
  grid-area: thumb-20;
  height: 29.5rem;
  background-image: url(../images/2016Nov26/nov2016_19.jpg);
}
.all-gallery-thumbs .thumb-img-21 {
  grid-area: thumb-21;
  background-image: url(../images/2016Nov26/nov2016_20.jpg);
}
.all-gallery-thumbs .thumb-img-22 {
  grid-area: thumb-22;
  background-image: url(../images/2016Nov26/nov2016_21.jpg);
}
.all-gallery-thumbs .thumb-img-23 {
  grid-area: thumb-23;
  background-image: url(../images/2016Nov26/nov2016_23.jpg);
}
.all-gallery-thumbs .thumb-img-24 {
  grid-area: thumb-24;
  background-image: url(../images/2016Nov26/nov2016_22.jpg);
}
.thumbs-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.images-container {
  margin-top: -40px;
  width: 90%;
  height: 90%;
}
.thumbs-expand {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1rem;
  grid-template-areas:
    "gallery-p gallery-p gallery-p gallery-p gallery-p gallery-p"
    "img-1 img-2 img-2 img-3 img-4 img-5"
    "img-6 img-7 img-8 img-9 img-10 img-11"
    "img-18 img-13 img-14 img-9 img-12 img-11"
    "img-18 img-17 img-15 img-19 img-16 img-20";
}

.gallery-name p {
  grid-area: gallery-p;
  color: var(--shiny-color);
  background: rgba(0, 0, 0, 0.7);
}
.gallery-name h1 {
  -webkit-text-stroke: var(--primary-color);
  -webkit-text-stroke-width: 1px;
}
.thumbs-expand .gallery-img {
  width: 100%;
  height: 10rem;
  opacity: 0.7;
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  background-position: center;
  cursor: pointer;
}
.thumbs-expand .gallery-img:hover {
  opacity: 0.2;
  transition: opacity ease-in 0.35s;
}

.thumbs-expand .img-1 {
  grid-area: img-1;
  background-image: url(../images/thumbs/1.jpg);
}

.thumbs-expand .img-2 {
  grid-area: img-2;
  background-image: url(../images/thumbs/2.jpg);
}

.thumbs-expand .img-3 {
  grid-area: img-3;
  background-image: url(../images/thumbs/3.jpg);
}

.thumbs-expand .img-4 {
  grid-area: img-4;
  background-image: url(../images/thumbs/4.jpg);
}
.thumbs-expand .img-5 {
  grid-area: img-5;
  background-image: url(../images/thumbs/5.jpg);
}
.thumbs-expand .img-6 {
  grid-area: img-6;
  background-image: url(../images/thumbs/6.jpg);
}

.thumbs-expand .img-7 {
  grid-area: img-7;
  background-image: url(../images/thumbs/7.jpg);
}
.thumbs-expand .img-8 {
  grid-area: img-8;
  background-image: url(../images/thumbs/8.jpg);
}
.thumbs-expand .img-9 {
  grid-area: img-9;
  height: 21.5rem;
  background-image: url(../images/thumbs/9.jpg);
}
.thumbs-expand .img-10 {
  grid-area: img-10;
  background-image: url(../images/thumbs/10.jpg);
}
.thumbs-expand .img-11 {
  grid-area: img-11;
  height: 21.5rem;
  background-image: url(../images/thumbs/11.jpg);
}
.thumbs-expand .img-12 {
  grid-area: img-12;
  background-image: url(../images/thumbs/12.jpg);
}
.thumbs-expand .img-13 {
  grid-area: img-13;
  background-image: url(../images/thumbs/13.jpg);
}
.thumbs-expand .img-14 {
  grid-area: img-14;
  background-image: url(../images/thumbs/14.jpg);
}
.thumbs-expand .img-15 {
  grid-area: img-15;

  background-image: url(../images/thumbs/15.jpg);
}
.thumbs-expand .img-16 {
  grid-area: img-16;
  background-image: url(../images/thumbs/16.jpg);
}
.thumbs-expand .img-17 {
  grid-area: img-17;
  background-image: url(../images/thumbs/17.jpg);
}
.thumbs-expand .img-18 {
  grid-area: img-18;
  height: 21.5rem;
  background-image: url(../images/thumbs/18.jpg);
}
.thumbs-expand .img-19 {
  grid-area: img-19;
  background-image: url(../images/thumbs/19.jpg);
}
.thumbs-expand .img-20 {
  grid-area: img-20;
  background-image: url(../images/thumbs/20.jpg);
}
.img-window {
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  cursor: pointer;
}
.img-window img {
  width: 80vw;
  height: 80vh;
  object-fit: cover;
}
.img-btn-next,
.img-btn-prev {
  display: block;
  padding: 1.5rem 2rem;
  color: var(--primary-color);
  position: absolute;
  top: 48vh;
  cursor: pointer;
  background-color: var(--hover-red);

  text-transform: uppercase;
  z-index: 500;
}
.img-btn-next {
  border-radius: 0px 20px 20px 0px;
}
.img-btn-prev {
  border-radius: 20px 0px 0px 20px;
}
.img-btn-next:hover,
.img-btn-prev:hover {
  opacity: 0.7;
}
.img-text-vip{
  position: absolute;
  bottom: 10px;
  z-index: 100;
  margin: 0 auto;
	background-color: #000000;
	
}
.img-text-vip p{
  padding: 10px;
	margin: auto;
	color: white;
	text-transform: uppercase;
	font-weight: 500;
}
.policy-private a:hover {
  color: var(--shiny-color);
}
.scroll-page {
  display: grid;
  grid-row-gap: 1px;
  grid-template-columns: repeat(autofill, minmax(20em 1fr));
}
.terms-header {
  margin-bottom: 1px;
  padding: 0;
}
.terms-header h2 {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 700;
  padding: 3px 0;
}
.terms-header h6 {
  text-transform: uppercase;
  padding: 1px 0;
  font-size: 1em;
}
.terms-header h3 {
  font-size: 1.3em;
  text-transform: uppercase;
}
.terms-header p {
  font-size: 1.1em;
  opacity: 0.8;
}
.terms-header .terms-conditions {
  margin-top: 0.7em;
}
.terms-header .terms-conditions span {
  text-transform: uppercase;
  font-weight: 700;
  padding-right: 5px;
}
.terms-header .terms-conditions a {
  color: var(--primary-color);
  text-decoration: none;
}
.terms-header .terms-conditions a:hover {
  color: var(--shiny-color);
}
.terms-header .contact-impressum {
  margin-top: 0.7em;
}
.terms-header .contact-impressum span {
  text-transform: uppercase;
  padding-right: 5px;
  font-weight: 700;
}
.terms-header .haftungs-theme,
.terms-header .copyright-impressum,
.terms-header .urheberrecht {
  margin-top: 0.7em;
}
.scroll-bg {
  width: 100%;
  margin: 1% auto;
}
.scroll-div {
  width: 100%;

  height: 75vh;
  overflow: hidden;
  overflow-y: scroll;
}

.scroll-object {
  padding: 1em;
}
::-webkit-scrollbar {
  width: 0.25vw;
}
::-webkit-scrollbar-track {
  background: grey;
  border-radius: 1em;
}
::-webkit-scrollbar-thumb {
  background-color: rgb(132, 14, 14);
  border-radius: 1em;
}
html {
  scrollbar-width: normal;
  scrollbar-color: rgb(132, 14, 14) var(--primary-color);
}

.all-events-topics {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: row;
}
.all-events-topics h1 {
  font-size: 3.2rem;
  color: rgb(83, 0, 0);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
}
.all-events-topics p {
  margin-top: -2.45rem;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 600;
}
.all-events-display {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}
.every-event-displayed {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  margin-bottom: 1rem;
}
.event-dividing-line {
  margin-top: 3rem;
  width: 50%;
  height: 1px;
  border-bottom: 1px dotted var(--primary-color);
}
.event-images-displayed img {
  width: 18vw;
  border: 10px solid var(--primary-color);
}
.event-infos-displayed {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.entry-events-displayed {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 80%;
}
.events-date-displayed {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.events-date-displayed h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
}
.events-date-displayed .events-date-displayed-new {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  background: var(--primary-color);
  font-size: 2.5rem;
  color: var(--black-color);
  padding: 1px 10px;
  border: 1px solid rgb(164, 163, 163);
}
.events-displayed-show-day h3 {
  font-size: 2.5rem;
  font-weight: 700;
  padding-right: 2px;
}
.events-displayed-month-yrs h6 {
  font-weight: 700;
  text-transform: uppercase;
}
.events-displayed-month-yrs {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.entry-events-displayed h6 {
  font-size: 1.4rem;
  text-transform: uppercase;
  margin: 0.5rem 0;
  color: var(--hover-red);
  border: 1px solid var(--primary-color);
  border-left: 0;
  border-right: 0;
  padding: 3px 15px;
}
.entry-events-displayed p {
  margin-top: 1rem;
  font-size: 1.1rem;
}
/* .events-flyerholders {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;

  margin-bottom: 5px;
}
.events-day-rows {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 102px;
  padding: 5px;
  margin-right: 5px;
  background-color: var(--events-bkg);
  border: 1px solid grey;
}
.events-day-rows .ev-day,
.events-day-rows .ev-mth,
.events-day-rows .ev-fly1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2px;
  width: 100%;
}
.events-day-rows .ev-fly1,
.events-day-rows .ev-fly2,
.events-day-rows .ev-fly3,
.events-day-rows .ev-fly4 {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
.events-day-rows .ev-fly1 {
  background-image: url(../images/events/aug191.jpg);
}
.events-day-rows .ev-fly2 {
  background-image: url(../images/events/saturdaysAUG.jpg);
}
.events-day-rows .ev-fly3 {
  background-image: url(../images/events/dancehall.jpg);
}
.events-day-rows .ev-fly4 {
  background-image: url(../images/events/dancehall.jpg);
}
.events-day-rows .ev-day,
.events-day-rows .ev-mth {
  border-bottom: 1px solid var(--calendar-backg);
}
.events-day-rows .ev-day p {
  text-transform: uppercase;
} */
.loader-page {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--black-color);
  z-index: 10003;
}
.loading-circle {
  height: 4rem;
  width: 4rem;
  transform-origin: bottom center;
  animation: rotate 3s linear infinite;
}
.circle {
  width: 2rem;
  height: 2rem;
  background: var(--primary-color);
  border-radius: 50%;
  transform: scale(0);
  animation: grow 2.5s linear infinite;
}
.circle:nth-child(2) {
  background: var(--hover-red);
  animation-delay: 1.5s;
}
.circle-1 {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transform: scale(0);
  background: var(--shiny-color);
  animation: getBig 2.5s linear infinite;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes grow {
  to {
    transform: scale(1);
  }
}
@keyframes getBig {
  to {
    transform: scale(2);
  }
}
.cookies-display {
  position: absolute;
  width: 100vw;
  background: var(--shiny-color);
  color: var(--black-color);
  font-weight: 600;
  top: 50vh;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1233;
}
.cookies-message p {
  font-size: 1.2rem;
  padding: 10px;
}
.cookies-message a {
  color: var(--hover-red);
}
.cookies-message button {
  padding: 0 5px;
  color: var(--shiny-color);
  background: var(--black-color);
  cursor: pointer;
}

.reservation-container {
  width: 80vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.for-reservations-call {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 2rem;
}
.reservations-title h3 {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--hover-red);
  padding: 5px 20px;
  border: 1px solid var(--primary-color);
  border-left: 0;
  border-right: 0;
  margin-bottom: 1rem;
}
.reservations-title span {
  padding-right: 1rem;
  font-size: 1.5rem;
}
.reservation-numbers a {
  text-decoration: none;
  font-size: 1.2rem;
  color: var(--primary-color);
}
.reservations-email-format {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px dotted var(--primary-color);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  margin-bottom: 2rem;
}
.reservations-email-format a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 1.6rem;
  color: var(--hover-red);
}

.fill-form-directives {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.fill-form-directives h4 {
  font-size: 1.2rem;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-transform: uppercase;
  padding: 5px 10px;
}
.reservation-calendar {
  width: 45rem;
  max-height: 24rem;
  background: var(--calendar-backg);
  margin: 2rem 0;
}
.all-date-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgb(128, 0, 0);
}
.info-date-selected h6 {
  text-transform: uppercase;
}
.reservation-month {
  width: 100%;
  height: 3rem;
  background: rgb(132, 14, 14);
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}
.fill-reservation-form {
  margin-bottom: 5rem;
}
.reservation-month .prev-reservation,
.reservation-month .next-reservation {
  padding: 10px 10px;
  cursor: pointer;
}
.today {
  background: var(--primary-color);
  color: var(--primary-color);
}
.prev-reservation:hover,
.next-reservation:hover {
  background-color: var(--black-color);
}
.reservation-date-month {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.reservation-date-month h3 {
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 2px;
}
.weekdays {
  height: 2rem;
  width: 100%;
  padding: 0 0.3rem;
  display: flex;

  align-items: center;
}
.weekdays .reserve-days-name {
  font-size: 1.1rem;
  width: calc(45rem / 7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.reserve-days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.3rem;
}
.reserve-days div {
  height: 1.7rem;
  width: calc(45rem / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
  transition: background 1s;
}

.prev-date,
.next-date {
  opacity: 0.4;
}
.today {
  background: var(--hover-red);
}
.reserve-days div:hover:not(.today) {
  background: rgb(132, 14, 14);
  cursor: pointer;
}
.all-img-display,
.img-gallery-react {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  width: 100%;
}
.single-thumbs-display img,
.thumbs-display-react img {
  width: 15vw;
  height: 32vh;
  object-fit: cover;
}
.single-thumbs-display,
.thumbs-display-react {
  position: relative;
  cursor: pointer;
}
.single-thumbs-display::after,
.thumbs-display-react::after {
  content: "";
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;

  background: red;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: all ease-in-out 1s;
}
.single-thumbs-display:hover::after,
.thumbs-display-react:hover::after {
  opacity: 0.5;
}
.show-all-photos {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.overlay-dark-background {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1223;
}
.photo-display-images {
  position: absolute;
  top: 20vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1322;
}
.img-show-disp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.img-show-disp img {
  width: 720px;
  height: 500px;
  object-fit: contain;
}
.prev-next-btn-gallery {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.forward-back-btn {
  padding: 10px;
  background: var(--hover-red);
  cursor: pointer;
}
.forward-next-btn {
  padding: 10px;
  background: var(--hover-red);
  cursor: pointer;
}
.forward-back-btn ion-icon,
.forward-next-btn ion-icon {
  color: var(--shiny-color);
  font-size: 1.2rem;
  font-weight: 800;
}
.form-is-invalid {
  outline: 1px solid red !important;
}
.find-more-events {
  padding: 2rem;
}

.find-more-events p {
  color: white !important;
  font-size: 1.3rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-direction: row;
  padding-bottom: 2rem;
}
.find-more-events a img {
  color: red !important;
  padding-left: 0.1rem;
  height: 3rem;
  width: 10rem;
}
.find-more-events a img:first-child {
  object-fit: contain;
}
.find-more-events a:hover {
  color: var(--primary-color) !important;
}
.plusteen-page {
  display: flex;
  flex-direction: column;

  width: 75vw;
}
.plusteen-header {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: stretch;
}

.plusteen-theme-left h1 {
  font-size: 3rem;
  font-weight: 600;
  color: var(--shiny-color);

  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073,
    0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
.plusteen-theme-right,
.plusteen-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.plusteen-theme-day {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 3px solid #e60073;
  border-radius: 50%;
  padding: 2.8rem 1rem;
}
.plusteen-theme-day h6,
.plusteen-theme-day p,
.plusteen-theme-open-time {
  color: var(--shiny-color);
  text-transform: uppercase;
}

.plusteen-theme-open-time {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  background: #e60073;
}

.plusteen-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0;
}
.plusteen-dj-music,
.plusteen-dj {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.plusteen-content-thema h1 {
  color: var(--shiny-color);

  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #e60073, 0 0 8px #e60073,
    0 0 10px #e60073, 0 0 12px #e60073, 0 0 14px #e60073;

  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 700;
}
.plusteen-content-party {
  background: #e60073;
  padding: 0.2rem 0.8rem;
}
.plusteen-content-party p {
  color: var(--shiny-color);
  font-size: 1.3rem;
  text-transform: uppercase;
}
.plusteen-dj-music {
  margin-top: 1.5rem;
}
.plusteen-dj h6 {
  color: var(--shiny-color);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  background: #e60073;
}
.plusteen-dj p {
  color: var(--shiny-color);
  text-transform: uppercase;
}
#hidden-input {
  display: none;
}
.change-view {
  opacity: 0;
}
.info-right-event h4 {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
@media (max-width: 1020px) {
  .event-header {
    width: 100%;
    height: 100%;
  }
  .event-header .col {
    height: 13em;
    width: 13em;
  }
  .event-img img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 640px) {
  .img-show-disp img {
    width: 80vw;
    height: 400px;
    object-fit: cover;
  }
  .every-event-displayed {
    flex-direction: column;
  }
  .event-images-displayed img {
    width: 80vw;
  }
  .events-date-displayed h2 {
    font-size: 1.9rem;
  }
  .entry-events-displayed {
    width: 100%;
  }
  .event-body {
    width: 80%;
    /* left: 40px; */

    bottom: 0;
  }
  .all-img-display {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .single-thumbs-display img {
    width: 25vw;
    height: 22vh;
  }
  .event-header {
    padding: 20px;
  }
  .reservation-numbers a {
    font-size: 1rem;
  }
  .reservation-calendar {
    width: 80vw;
    max-height: 30rem;
  }

  .weekdays .reserve-days-name {
    font-size: 1rem;
    width: calc(75vw / 7);
  }
  .reserve-days div {
    height: 3rem;
    width: calc(75vw / 7);
  }
  .social-event {
    margin-bottom: 10px;
  }
  .col {
    margin-bottom: 30px;
  }
  .event-img span {
    display: none;
  }

  .policy-private,
  .designed-by {
    padding: 10px 0;
  }
  .policy-private a {
    margin-left: 55px;
  }
  .all-months-thumbs {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "month-1 month-1"
      "month-2 month-3"
      "month-4 month-5"
      "month-6 month-6"
      "month-7 month-8"
      "month-9 month-10"
      "month-11 month-12"
      "month-11 month-13"
      "month-14 month-14"
      "month-15 month-16"
      "month-17 month-18"
      "month-19 month-18"
      "month-20 month-21"
      "month-22 month-23"
      "month-24 month-24"
      "month-25 month-26"
      "month-27 month-26"
      "month-28 month-29"
      "month-30 month-31"
      "month-32 month-33"
      "month-34 month-34"
      "month-35 month-36"
      "month-37 month-36"
      "month-38 month-39"
      "month-40 month-40"
      "month-41 month-42"
      "month-43 month-44"
      "month-45 month-46"
      "month-45 month-47"
      "month-48 month-49"
      "month-50 month-50"
      "month-51 month-52"
      "month-54 month-52"
      "month-53 month-53";
  }
  .months-thumb-11,
  .months-thumb-18,
  .months-thumb-26,
  .months-thumb-36,
  .months-thumb-45,
  .months-thumb-52 {
    height: 28.5rem;
  }
  .months-thumb-4,
  .months-thumb-19,
  .months-thumb-28,
  .months-thumb-39,
  .months-thumb-44,
  .months-thumb-47 {
    height: 14rem;
  }
  .all-gallery-thumbs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "thumb-1 thumb-1"
      "thumb-2 thumb-3"
      "thumb-2 thumb-4"
      "thumb-5 thumb-5"
      "thumb-6 thumb-7"
      "thumb-8 thumb-7"
      "thumb-9 thumb-9"
      "thumb-10 thumb-11"
      "thumb-10 thumb-12"
      "thumb-13 thumb-13"
      "thumb-14 thumb-15"
      "thumb-16 thumb-17"
      "thumb-18 thumb-17"
      "thumb-19 thumb-19"
      "thumb-20 thumb-21"
      "thumb-20 thumb-22"
      "thumb-23 thumb-24";
    grid-gap: 0.5rem;
  }
  .all-gallery-thumbs .gallery-thumbs-img {
    height: 7rem;
  }
  .all-gallery-thumbs .thumb-img-2 {
    height: 14.5rem;
  }
  .all-gallery-thumbs .thumb-img-7 {
    height: 14.5rem;
  }
  .all-gallery-thumbs .thumb-img-10 {
    height: 14.5rem;
  }
  .all-gallery-thumbs .thumb-img-17 {
    height: 14.5rem;
  }
  .all-gallery-thumbs .thumb-img-20 {
    height: 14.5rem;
  }
  .thumbs-expand {
    grid-template-columns: 1fr 1fr 1fr;

    grid-gap: 0.5rem;
    grid-template-areas:
      "img-1 img-2 img-2 "
      "img-1 img-4 img-5 "
      "img-7 img-8 img-9 "
      "img-10 img-11 img-11 "
      "img-13 img-14 img-15 "
      "img-13 img-16 img-17 "
      "img-3 img-6 img-6"
      "img-18 img-18 img-12";
  }

  .thumbs-expand .gallery-img {
    height: 7rem;
  }
  .thumbs-expand .img-1 {
    height: 15rem;
  }
  .thumbs-expand .img-6 {
    height: 7rem;
  }
  .thumbs-expand .img-9 {
    height: 7rem;
  }

  .thumbs-expand .img-11 {
    height: 7rem;
  }
  .thumbs-expand .img-13 {
    height: 15rem;
  }

  .thumbs-expand .img-15 {
    height: 7rem;
  }
  .thumbs-expand .img-18 {
    height: 7rem;
  }
}
@media (max-width: 540px) {
  .event-name h2 {
    font-size: 2em;
  }
  .event-header {
    padding: 5px;
  }
  .event-header .col {
    height: 10em;
    width: 10em;
  }

  .event-img {
    width: 12em;
    height: 12em;
  }
  .event-img h3 {
    padding: 1em;
    margin-bottom: 0px;
    background: black;
  }
  .event-img p {
    padding: 3px 0px;
  }
  .event-img h5 {
    padding: 3px 10px;
  }

  .thumb-img {
    width: 10rem;
    height: 8rem;
  }

  .find-more-events p {
    flex-direction: column;
  }
}
@media (max-width: 500px) {
  .plusteen-content-thema h1 {
    font-size: 1.85rem;
  }
  .event-header {
    display: grid;

    grid-gap: 1em;

    grid-template-columns: repeat(auto-fill, minmax(14em, 2fr));
  }

  .social-links {
    display: none;
  }
	.container{
		min-height: 100vh;
	}
}

@media (max-width: 365px) {
  .event-header {
    display: grid;

    grid-gap: 1em;

    grid-template-columns: repeat(auto-fill, minmax(10em, 2fr));
  }
  /* .all-thumbs {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 0.2em;
    row-gap: 0.2em;
  }
  .thumb-img {
    width: 18rem;
    height: 7rem;
    padding: 0.5rem;
  } */
}
@media (max-width: 300px) {
  .event-img {
    width: 8em;
    height: 8em;
  }
  .event-name h2 {
    font-size: 1.5em;
  }
  .event-header .col {
    height: 8em;
    width: 8em;
  }
  .event-img h5 {
    padding: 5px 5px;
  }
  .event-img p {
    font-size: 0.8em;
  }
  .musicplayed p {
    margin-left: 49px;
  }
  .clubname {
    font-size: 1em;
    margin-left: 30px;
  }
  .middle-items {
    z-index: -10;
  }
  .friday-popUp {
    z-index: 1200;
  }
  .contact-street {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .contact-street span ion-icon {
    display: none;
  }
  .contact-tel-nr p {
    font-size: 8px;
  }
  /* .all-thumbs {
    grid-template-columns: repeat(1, 1fr);
  }
   .thumb-img {
    width: 10em;
    height: 8em;
  } */
  .contact-form {
    padding-left: 10px;
  }
}
@media (max-width: 780px) {
  .down-menu-mobile {
    display: flex;
  }

  header nav {
    position: absolute;
    top: 7em;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--hover-red);
    z-index: 10000;
    display: flex;
    justify-content: center;
  }

  .nav-links li {
    top: 10em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
  }
  .nav-links li a {
    width: 95vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1em;
    padding-bottom: 1em;
    background: black;
  }
  header .logo {
    position: absolute;
    left: 5em;
  }

  .menu-disp {
    display: none;
  }
  .ham-menu {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
  /* header {
    position: absolute;
    display: flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: red;
    padding: 0px 0px;
    height: 100vh;
    left: 0;
    z-index: 13;
  }
  .nav ul {
    display: block;
  }
  .logo {
    position: absolute;
    top: 0;
    left: 50vw;
    padding: 5px;
    margin-left: -40px;
  }
  .logo img {
    width: 80px;
  }
  .nav-links li {
    display: block;
    padding: 12px 0;
  }
  .nav-links li a {
    color: white;
    font-size: 1.8em;
    padding: 10px;
  }
  .nav-links li a .menu-text {
    display: none;
  }
  .nav-links ion-icon {
    font-size: 1.1em;
  }
  .nav-links li a:hover {
    background: black;
  } */

  .fri-sat-flyers {
    width: 99vw;
  }
  .fri-sat-content {
    width: 99vw;
  }

  .clubname {
    padding: 10px;
  }
  .clubname h2 {
    font-size: 5em;
  }
  .clubname p {
    font-size: 1.3em;
  }

  .musicplayed {
    padding-bottom: 5px;
  }
  .eventlinks {
    flex-direction: column;
  }

  .thumbevent {
    padding: 5px 10px;
  }
  .thumbevent img {
    width: 160px;
    height: 100px;
  }
  .img-overlay {
    width: 160px;
    height: 100px;
    margin-top: -100px;
  }
  .event-date {
    top: -102px;
  }
  .trans-popup {
    left: -100%;
    width: 100%;
  }
  .trans-popupB {
    display: none;
  }
  .active {
    background: black;
  }
  .contact-form {
    width: 100%;
  }
  .contact-social-media {
    position: relative;
    left: 0%;
    top: 20px;
  }
  .contact-social-media a {
    display: inline-block;
    margin-right: 10px;
  }
  .contact-theme {
    position: relative;
    left: 0px;
  }
  .all-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 680px) {
  .info-page {
    height: 100vh;
  }
  .popup-page {
    height: 100vh;
  }
}
@media (max-width: 940px) {
  .info-page {
    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
  }
}
@media (max-width: 740px) {
  .info-page {
    grid-template-columns: repeat(auto-fill, minmax(40em, 1fr));
  }
}
@media (max-width: 430px) {
  .info-page {
    grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
  }
  .all-img-display {
    grid-template-columns: 1fr 1fr;
  }
  .single-thumbs-display img {
    width: 37vw;
    height: 23vh;
  }
}
@media (max-width: 645px) {
  /* .logo {
    padding: 5px;
    margin-left: -45px;
  }
  .logo img {
    width: 90px;
  } */
  /* .all-thumbs {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1em;
    row-gap: 1em;
  } */
}
@media (max-width: 600px) {
  .thumbevent .moreinfo {
    position: relative;
    padding: 5px 3px;
  }
  .clubname h2 {
    font-size: 5em;
  }
  .clubname p {
    font-size: 1.3em;
  }
  .musicplayed p {
    font-size: 1.1em;
  }
  .thumbevent {
    display: block;
    padding: 10px 20px;
    /* box-shadow: 3px 8px 22px rgba(0, 0, 0, 0.95); */
  }
  .down-items {
    margin-top: -10px;
  }
}
@media (max-width: 450px) {
  .main-body {
    right: 0px;
  }
  .clubname h2 {
    font-size: 3.3em;
  }

  .musicplayed p {
    font-size: 1.1em;
  }
  .musicplayed ion-icon {
    padding: 0 2px 0 2px;
  }

  .audioform {
    padding: 2px 5px;
  }
  .social-links {
    display: flex;
  }

  .audioplay span ion-icon {
    padding-right: 2px;
    padding-left: 2px;
  }
  .audioplay p {
    padding-right: 2px;
  }
  .audiopause {
    padding: 2px 5px;
  }
  .thumbevent {
    display: block;
    padding: 5px 10px;
    /* box-shadow: 3px 8px 22px rgba(0, 0, 0, 0.95); */
  }
  .down-items {
    margin-top: -10px;
  }
  .all-thumbs {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 1.2em;
    row-gap: 2.2em;
  }
  .thumb-img {
    width: 75vw;
    height: 20vh;
    padding: 0.5rem;
  }
}