#what #cocktails-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
}

#what .packages .top {
  padding: 35px 55px 35px 55px;
  border-top: 1px solid;
  position: sticky;
  top: -1px;
  z-index: 999;
  background: white;
  border-bottom: 1px solid;
}

#what .packages .buttons {
  flex-direction: row-reverse;
}

#what .packages .buttons button {
  margin-right: 35px;
}

#what .packages .buttons button:first-child {
  margin-right: 0;
}

#what .packages .wrapper {
  padding-left: 64px;
  padding-bottom: 0;
  padding-right: 0;
  padding-top: 0;
}

#what .city h3,
#what .city h4 {
  padding: 10px 55px;
  min-height: 58px;
  border-top: 1px solid;
}

#what
  .bottom
  .city-packages
  .wp-block-lazyblock-bar-package:first-child
  h3:first-child,
#what
  .bottom
  .city-packages
  .wp-block-lazyblock-bar-package:first-child
  h4:first-child {
  border-top: none;
}

#what .city h3 {
  background: #f8f8f8;
}

#what .city h4 {
  line-height: 1.2;
  background: url(../assets/row_arrow.svg) 95%/20px no-repeat;
  transition: 0.3s;
}

#what .city h4:hover {
  background-color: #f7fff8;
}

#what .city .sticky {
  width: 40%;
  order: 2;
  position: sticky;
  top: 128px;
  max-height: calc(100vh - 128px);
}

#what .city-packages {
  border-right: 1px solid;
  width: 60%;
}

#what .wp-block-lazyblock-city-gallery,
#what .packages .slick-slider,
#what .packages .slick-slider .slick-list,
#what .packages .slick-slider .slick-track,
#what .packages .slick-slider .slick-track .slick-slide * {
  height: 100%;
  max-height: calc(100vh - 128px);
}

#what .slide-out-content {
  position: fixed;
  z-index: 99999999;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  max-width: 715px;
  background: white;
  border-left: 1px solid;
  transform: translateX(100%);
  -webkit-transition: all 700ms cubic-bezier(0.965, 0.025, 0.485, 0.945);
  -o-transition: all 700ms cubic-bezier(0.965, 0.025, 0.485, 0.945);
  transition: all 700ms cubic-bezier(0.965, 0.025, 0.485, 0.945);
  -webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.485, 0.945);
  -o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.485, 0.945);
  transition-timing-function: cubic-bezier(0.965, 0.025, 0.485, 0.945);
}

#what .slide-out-content.active {
  transform: translateX(0);
}

#what .slide-out-content .top_slide_out {
  padding: 30px 23px;
  position: relative;
  border-bottom: 1px solid;
}

#what .slide-out-content .bottom_slide_out {
  background-size: 415px !important;
  background-position: 420px 50vh !important;
  background-repeat: no-repeat !important;
}

#what .slide-out-content .close {
  background: url(../assets/package-close.svg) center/99% no-repeat;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 23px;
  transform: translateY(-50%);
  padding: 10px;
}

#what .slide-out-content .inner {
  padding: 35px;
  max-height: calc(100vh - 86px);
  overflow: scroll;
}

#what .slide-out-content .inner > *:last-child {
  margin-bottom: 150px;
}

#what .slide-out-content strong {
  font-family: montserrat, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.723rem;
  line-height: 1.4rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#what .slide-out-content em {
  font-family: meno-display, serif;
  font-weight: 400;
}

#what .slide-out-content p > s {
  font-size: 1.3rem;
  line-height: 1.8rem;
  background: transparent;
  font-family: meno-display, serif;
  font-weight: 300;
  text-decoration: none;
}

#what .cocktails {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

#what .cocktails .wrapper {
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 0;
}

#what .cocktails .one-third .inner {
  padding-right: 30px;
}

#what .cocktails .slider {
  overflow: hidden;
}

#what .cocktails .slider .slick-slide {
  margin-left: -130px;
  transform: translateX(-25vw);
}

#what .cocktails .slider .slick-slide p {
  opacity: 0;
  transition: opacity 0.3s;
}

#what .cocktails .slider .slick-slide.slick-active.slick-current p {
  opacity: 1;
}

#what .cocktails .slider .slick-slide div div {
  padding: 0 85px;
}

#what .cocktails .arrows div {
  background: url(../assets/row_arrow.svg) center/95% no-repeat;
  width: 15px;
  height: 31px;
  display: inline-block;
}

#what .cocktails .arrows div.left {
  transform: rotate(-180deg);
  margin-right: 35px;
}

#what .cocktails .slider .slick-slide img {
  margin-bottom: 15px;
}

#what .lab .wrapper,
#what .guild .wrapper {
  padding-bottom: 0;
  padding-top: 0;
}

#what .guild .wrapper {
  /* padding-left: 85px; */
}

#what .lab .two-thirds,
#what .guild .two-thirds {
  padding-left: 3.5vw;
}

#what .large_image .wrapper {
  padding: 25% 25% 25% 60px;
}

#what .guild img {
  max-width: 305px;
  margin-left: auto;
  margin-right: auto;
}

#what .panel.bg {
  padding: 25%;
}

@media screen and (min-width: 1440px) {
  #what .cocktails .slider .slick-slide {
    transform: translateX(-27vw);
  }
}

@media screen and (min-width: 860px) and (max-width: 1060px) {
  #what .cocktails .slider .slick-slide {
    transform: translateX(-23vw);
  }
}

@media screen and (max-width: 1200px) and (min-height: 900px) {
  #what .city .sticky,
  #what .wp-block-lazyblock-city-gallery,
  #what .packages .slick-slider,
  #what .packages .slick-slider .slick-list,
  #what .packages .slick-slider .slick-track,
  #what .packages .slick-slider .slick-track .slick-slide * {
    max-height: calc(80vmin - 129px);
  }
}

@media screen and (max-width: 860px) {
  #what .city > *,
  #what .city .sticky {
    position: static;
    width: 100%;
  }
  #what .city-packages {
    order: 3;
  }
  #what .wp-block-lazyblock-city-gallery,
  #what .packages .slick-slider,
  #what .packages .slick-slider .slick-list,
  #what .packages .slick-slider .slick-track,
  #what .packages .slick-slider .slick-track .slick-slide * {
    height: 80vw;
  }
  #what .packages .top {
    padding: 25px;
  }
  #what .packages .top .flex {
    flex-direction: column;
    text-align: center;
  }
  #what .packages .buttons {
    flex-direction: row !important;
    justify-content: center;
  }
  #what .packages .buttons button {
    margin: 15px 10px 0 !important;
  }
  #what .city h3,
  #what .city h4 {
    padding: 15px 25px;
    min-height: 25px;
  }
  #what .city h4 {
    background: url(../assets/row_arrow.svg) 95%/10px no-repeat;
  }
  #what .cocktails .one-third .inner {
    padding-right: 0;
    padding-left: 0;
  }
  #what .lab .wrapper,
  #what .guild .wrapper {
    padding-left: 25px !important;
  }

  #what .lab h2,
  #what .guild h2 {
    font-size: 2.777rem;
    line-height: 3.222rem;
  }

  #what .guild img {
    max-width: 150px;
  }
  #what .slide-out-content h5 {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 767px) {
  #what .cocktails .wrapper > * {
    width: 100%;
  }
  #what .cocktails .wrapper .one-third {
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
  }
  #what .cocktails .slider .slick-slide {
    margin-left: 0;
    transform: translateX(-50vw);
    /* transform: none; */
  }
  #what .cocktails .slider .slick-slide div div {
    padding: 0 25px;
  }
  #what .lab .wrapper > *,
  #what .guild .wrapper > * {
    width: 100%;
  }
  #what .lab .two-thirds,
  #what .guild .two-thirds {
    padding-top: 25px;
    padding-left: 0;
  }
  #what .lab .two-thirds,
  #what .guild .two-thirds {
  }
  #what .slide-out-content .bottom_slide_out {
    background-size: 58vw !important;
    /* background-position: 52vw 51vh !important; */
    background-position: 52vw 55vh !important;
  }
  #what .slide-out-content .inner {
    max-height: calc(100vh - 70px);
  }
}

@media screen and (max-width: 600px) {
  #what .city h4 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  #what .cocktails .slider .slick-slide {
    transform: translateX(-13vw);
  }
}

@media screen and (max-width: 380px) {
  #what .packages .buttons button {
    padding-left: 15px;
    padding-right: 15px;
  }
}
