@media screen and (max-height: 1100px) and (max-width: 1920px) {

  .weh {
    height: 44em;
  }

  .navi {
    right: -.5em;
    top: 8.875em;
  }

  .navi2 {
    bottom: 7.875em;
    left: 1.5em;
  }

  .navi a {
    width: calc(150px - 20px);
    padding-right: 20px;
    height: 47px;
  }

  .side {
    position: absolute;
    left: 4em;
    top: 6.5em;
  }

  .iza {
    height: 250px;
    image-rendering: -webkit-optimize-contrast;
  }

  .side>.one {
    width: 100%;
  }

  .side>.one>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 5em;
    left: 12em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.one:hover .textbox {
    width: 150px;
    height: 75px;
    left: 18.5em;
    top: 1em;
    opacity: 1;
  }

  .side>.two {
    position: absolute;
    left: 14.5em;
    top: 7.5em;
    width: 100%;
  }

  .side>.two>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: initial;
    bottom: 2em;
    left: 3.5em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.two:hover .textbox {
    width: 180px;
    height: 85px;
    left: 2em;
    opacity: 1;
    bottom: -6em;
  }

  .side>.three {
    position: absolute;
    left: 3em;
    top: 16em;
    width: 100%;
  }

  .side>.three>.textbox {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid black;
    position: absolute;
    top: 8em;
    left: 8em;
    transition: all .3s ease;
    opacity: 0;
  }

  .side>.three:hover .textbox {
    width: 200px;
    height: 100px;
    left: 13em;
    top: 9em;
    opacity: 1;
  }

  .textbox {
    z-index: 5;
    font-size: .875em;
  }

  .textbox p {
    margin: 0;
    height: 70px;
    overflow: auto;
  }

  .box {
    width: 47em;
    height: 27em;
    margin-left: 2em;
  }

  .ugh {
    left: 30%;
    bottom: 3em;
  }

  .ugh img {
    height: 200px;
    margin-right: 3.75em;
  }

  .psyche img {
    height: 270px;
  }


  .yaya img {
    height: 85%;
    right: 3.75em;
  }
  
}

@media screen and (max-height: 1300px) and (max-width: 2200px) {

  .side {
    top: 11em;
  }

 .weh {
  height: 54em;
 }

 .weh>.box {
  height: 30em;
 }

 .navi {
  top: 12.5em;
 }

 .navi2 {
  bottom: 11.5em;
 }

 .ugh {
  bottom: 5.5em;
 }
}

@media screen and (min-width: 3840px) {
  #welc {
    height: 200px;
    left: 25%;
    top: 15em;
  }

  #bottle {
    left: 32.5%;
    bottom: 30.25%;
  }

  .box {
    transform: scale(1.75);
  }

  .maphilighted {
    transform: scale(1.65);
    left: 13em;
    top: 25em;
  }

  .ugh {
    left: 33%;
    bottom: 10em;
  }

  .gallery img {
    image-rendering: -webkit-optimize-contrast;
  }

  .ugh img {
    margin-right: 7.5em;
    height: 340px;
  }

  .psyche img {
    height: 450px;
  }

  .hearts {
    height: 25px;
    background-size: cover;
    width: 25.5em;
  }

  #heartT {
    top: 28.5%;
  }

  #heartB {
    bottom: 29.75%;
  }
}