@font-face {
  font-family: beuster;
  src: url(/assets/beuster_bold.woff);
}

a {
  all: unset;
}

#myVideo {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -100;
}

.container {
  position: relative;
  width: 80%;
  height: 90%;
  top: 40px;
  margin: 0 auto;
  z-index: 1;
  text-align: center;
}

.logo {
  margin: 0 auto;
  width: 300px;
  padding-top: 50px;
  padding-bottom: 120px;
}

/* --- Modernisierte Media Queries --- */

@media only screen and (min-resolution: 3dppx) {
  .logo {
    width: 400px;
    padding-top: 100px;
    padding-bottom: 160px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  .logo {
    width: 400px;
    padding-top: 80px;
    padding-bottom: 120px;
  }
}

.buttons_container {
  margin: auto;
  position: relative;
}

.button {
  position: relative;
  font-family: beuster;
  color: #ffed00;
  font-size: 24px;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 7%;
  cursor: pointer;
}

@media only screen and (min-resolution: 3dppx) {
  .button {
    font-size: 24px;
    padding-bottom: 12%;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  .button {
    font-size: 24px;
    padding-bottom: 12%;
  }
}

.button:hover {
  opacity: 0.4;
  transition: 0.5s;
}

#booknow {
  width: 40%;
  height: auto;
  max-width: 250px;
}

@media only screen and (min-resolution: 3dppx) {
  #booknow {
    width: 80%;
    max-width: 500px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #booknow {
    width: 80%;
    max-width: 500px;
  }
}

#voucher {
  width: 40%;
  height: auto;
  max-width: 250px;
}

@media only screen and (min-resolution: 3dppx) {
  #voucher {
    width: 80%;
    max-width: 500px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #voucher {
    width: 80%;
    max-width: 500px;
  }
}

#call {
  width: 10%;
  height: auto;
  max-width: 75px;
}

@media only screen and (min-resolution: 3dppx) {
  #call {
    width: 20%;
    max-width: 150px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #call {
    width: 20%;
    max-width: 150px;
  }
}

#mail {
  width: 10%;
  height: auto;
  max-width: 75px;
}

@media only screen and (min-resolution: 3dppx) {
  #mail {
    width: 20%;
    max-width: 150px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #mail {
    width: 20%;
    max-width: 150px;
  }
}

#infos {
  width: 25%;
  height: auto;
  max-width: 160px;
}

@media only screen and (min-resolution: 3dppx) {
  #infos {
    width: 50%;
    max-width: 320px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #infos {
    width: 50%;
    max-width: 320px;
  }
}

#imprint {
  color: #ff205e;
  font-size: 15px;
}

@media only screen and (min-resolution: 3dppx) {
  #imprint {
    font-size: 30px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #imprint {
    font-size: 30px;
  }
}

#menu {
  width: 25%;
  height: auto;
  max-width: 160px;
  padding-bottom: 0;
}

@media only screen and (min-resolution: 3dppx) {
  #menu {
    width: 50%;
    max-width: 320px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  #menu {
    width: 50%;
    max-width: 320px;
  }
}

.warning_text {
  position: relative;
  font-family: beuster;
  color: black;
  font-size: 15px;
  border: 10px;
  border-style: solid;
  background-color: rgba(255, 255, 255, 0.9);
  top: 40px;
  padding: 20px;
}

@media only screen and (min-resolution: 3dppx) {
  .warning_text {
    font-size: 30px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  .warning_text {
    font-size: 30px;
  }
}

.resmio_widget {
  top: 50px;
  position: relative;
}

@media only screen and (min-resolution: 3dppx) {
  .resmio_widget {
    top: 260px;
    position: relative;
    -ms-zoom: 0.75;
    -moz-transform: scale(2);
    -moz-transform-origin: 1 0;
    -o-transform: scale(2);
    -o-transform-origin: 1 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 1 0;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  .resmio_widget {
    top: 260px;
    position: relative;
    -ms-zoom: 0.75;
    -moz-transform: scale(2);
    -moz-transform-origin: 1 0;
    -o-transform: scale(2);
    -o-transform-origin: 1 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 1 0;
  }
}

.livetable_widget iframe {
  top: 50px;
  width: 75%;
  height: 75%;
  max-width: 750px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

iframe {
  color: black;
  border: 10px;
  border-style: solid;
  margin: 20px;
}

#close {
  font-family: beuster;
  color: #ff205e;
  font-size: 40px;
  margin-bottom: 80px;
}

#close2 {
  font-family: beuster;
  color: #ffed00;
  font-size: 40px;
}

#close3 {
  font-family: beuster;
  color: #ffed00;
  font-size: 40px;
}

.infos {
  font-family: beuster;
  color: #ffed00;
  font-size: 15px;
}

@media only screen and (min-resolution: 3dppx) {
  .infos {
    font-size: 30px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  .infos {
    font-size: 30px;
  }
}

p,
h1,
h2 {
  font-family: beuster;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.85); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal_content {
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
}

@media only screen and (min-width: 375px) and (max-width: 667px) and (min-resolution: 2dppx) {
  .modal_content {
    margin: 10% auto; /* 15% from the top and centered */
    padding: 20px;
    width: 80%; /* Could be more or less, depending on screen size */
  }
}

#book_modal .modal_content {
  padding-top: 60px;
}

#info_modal .modal_content {
  padding-top: 250px;
}

#voucher_modal .modal_content {
  margin-top: 60px;
}