@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');

.bg-video{
  position: absolute;
  z-index: -10;
  height: 100vh;
  width: 100vw;
  object-fit: fill;
}

@keyframes navAnimOpen {
  0% {display: none;opacity: 0;max-height: 0;}
  1% {display: block;opacity: 0;}
  100% {opacity: 1;max-height: 396px;}
}

.background{
  position: fixed;
  z-index: -10;
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-shadow: 0 0 80px 20px rgba(0,0,0,1) inset;
}
.vid{
  height: 100%;
  object-fit: fill;
  width: 100%;
}

/*.calendar {*/
/*max-width: 500px;*/
/*background-color: rgba(200, 200, 200, 0.5);*/
/*  border-radius: 5px;*/
/*  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);*/
/*}*/

.calendar{
  box-shadow: 0px 3px 8px 0px rgb(0,0,0,50%);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /*max-width: 500px;*/
  text-shadow: 1px 1px rgba(255,255,255,0.1);
}

.date {
  border-radius: 5px;
}

.date-available {
  background-color: #00c4a7;
}

.date-unavailable {
  color: rgba(0,0,0, 0.2);
  background-color: rgba(200, 0, 0, 0.5);
  border-radius: unset;
}

.date-not-this-month {
  color: rgba(0,0,0, 0.2);
}

.button{
  background-color: transparent;
  border: none;
  text-transform: capitalize;
}

.date-menu {
  background-color: rgba(255, 255, 255, 0.5);
  text-transform: capitalize;
  text-align: center;
}

.dropdown-item {
  padding: 0 !important;
}
.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.dropdown-item.is-active{
  background-color: rgba(55, 55, 55, 0.5) !important;
}

h1 {
  font-family: 'Tenor Sans';
}

#header{
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.7);
  padding: 5px;
  margin-bottom: 15px;
  box-shadow: black 1px 1px 5px;
}

.selected-button{
  padding: 5px;
  margin-bottom: 15px;
  font-weight: bold;
  text-shadow: 0px 7px 11px #4f4f4f;
}

.locales {
  min-width: 100%;
  text-align: center;
}

.map{
  box-shadow: 0px 3px 8px 0px rgb(0,0,0,50%);
  height: 500px;
}


.media{
  box-shadow: 0px 3px 8px 0px rgb(0,0,0,50%);
}

.yt-video{
  width: 100%;
  aspect-ratio : 2 / 1;
  box-shadow: 0px 3px 8px 0px rgb(0,0,0,50%);
}