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

#slider {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0.7;
}
body {
  border: none;
  color: white;
  background-color: black;
  height: 100%;
  width: 100%;
  font-family: "MyWebFont", sans-serif;
  letter-spacing: 1px;
}

.ct {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 6vw;
  line-height: 0.9;
}

@media screen and (max-width: 768px) {
  .title {
    font-size: 7vw;
  }
}

.container-grid {
  position: absolute;
  padding: 15px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "Title Title Date Date"
    "Guest Guest Guest Guest"
    "first-col second-col third-col fourth-col";
}
@media screen and (max-width: 768px) {
  .container-grid {
    display: flex;
    flex-direction: column;
  }
}

.logo {
  width: 80%;
}
.Title {
  grid-area: Title;
  min-height: 50vh;
  padding-top: 10px;
}

.Date {
  grid-area: Date;
  text-align: right;
  min-height: 50vh;
  padding-top: 10px;
}
.Guest {
  grid-area: Guest;
  font-size: 6vw;
  line-height: 0.9;
  text-align-last: justify;
  min-height: 50vh;
}

.first-col {
  grid-area: first-col;
  min-height: 100vh;
}

.second-col {
  grid-area: second-col;
  min-height: 100vh;
}

.third-col {
  grid-area: third-col;
  min-height: 100vh;
}

.fourth-col {
  grid-area: fourth-col;
  min-height: 100vh;
}

@media screen and (max-width: 768px) {
  .Guest {
    padding-top: 10%;
min-height:unset;
  }
  .Title,
  .Date {
    display: none;
  }
  .container-grid {
    grid-template-columns: 1fr;
  }
  .fourth-col,.first-col, .second-col, .third-col {
    min-height: unset;
  }
}
.column {
  display: flex;
  flex-direction: column;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.column::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.column {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.col-title {
  position: sticky;
  top: 0;
}
.col-title h4 {
  font-size: 6vw;
  line-height: 0.8;
  text-align: center;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .col-title h4 {
    font-size: 7vw;
  }
  .column {
    display: block;
    overflow: unset;
  }
  .col-title {
    position: unset;
  }
  .col-title h4 {
    text-align: left;
  }
}
.calendar-item {
  display: flex;
  padding-bottom: 20px;
  line-height: 1;
}
.calendar-entry {
  list-style: none;
  padding: 0;
}
.calendar-entry .left {
  flex: 1;
}
.calendar-entry .right {
  flex: 4;
}

.c-lefttop,
.c-righttop,
.c-leftbottom,
.c-rightbottom {
  display: none;
}
#guest {
  display: none;
}
@media screen and (max-width: 768px) {
  .c-lefttop,
  .c-righttop,
  .c-leftbottom,
  .c-rightbottom {
    display: block;
    position: fixed;
    z-index: 9;
    line-height: 1;
  }
  #guest {
    display: none;
    font-size: 26px;
  }
  .c-lefttop {
    top: 10px;
    left: 10px;
  }
  .c-righttop {
    right: 10px;
    top: 10px;
  }
  .c-leftbottom {
    left: 10px;
    bottom: 10px;
  }
  .c-rightbottom {
    right: 10px;
    bottom: 10px;
    text-align: right;
  }
}