.sec {
  height: 100vh;
  background-color: #072031;
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.waves {
  position: absolute;
  left: 3vw;
  top: 2vw;
  width: 94vw;
  height: 92vh;
  background-image: url('../images/waves.png');
  background-position: 0px 0px;
  background-size: 561px;
}

.island-ipa {
  position: relative;
  display: inline-block;
  width: 60%;
  height: 70%;
  margin-top: 10%;
  margin-right: auto;
  background-image: url('../images/island-ipa.png');
  background-position: 0px 50%;
  background-size: 20vw;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-transform 50ms ease;
  transition: -webkit-transform 50ms ease;
  transition: transform 50ms ease;
  transition: transform 50ms ease, -webkit-transform 50ms ease;
  cursor: pointer;
}

.island-ipa:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.row {
  height: 100%;
}

.col3 {
  height: 100%;
}

.goose {
  height: 60%;
  margin-top: 15%;
  background-image: url('../images/Goose.png');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.col2 {
  height: 100%;
}

.island-char {
  height: 70%;
  background-image: url('../images/island-char.png');
  background-position: 0px 50%;
  background-size: 20vw;
  background-repeat: no-repeat;
}

.bierbank {
  display: block;
  height: 30%;
  margin-top: -6%;
  background-image: url('../images/bierbank.png');
  background-position: 50% 0px;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-transform 200ms linear;
  transition: -webkit-transform 200ms linear;
  transition: transform 200ms linear;
  transition: transform 200ms linear, -webkit-transform 200ms linear;
  cursor: pointer;
}

.bierbank:hover {
  -webkit-transform: rotate(7deg) rotate(-14deg);
  -ms-transform: rotate(7deg) rotate(-14deg);
  transform: rotate(7deg) rotate(-14deg);
}

.tree {
  width: 70%;
  height: 60%;
  margin-top: 11%;
  margin-right: -5%;
  margin-left: auto;
  background-image: url('../images/tree.png');
  background-position: 100% 0%;
  background-size: 15vw;
  background-repeat: no-repeat;
  cursor: pointer;
}

.tree:hover {
  -webkit-transform: translate3d(0px, 0px, 15px) rotate(5deg);
  transform: translate3d(0px, 0px, 15px) rotate(5deg);
}

.col1 {
  height: 100%;
}

.popup {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100vw;
  height: 100vh;
  background-image: url('../images/poup.png');
  background-position: 50% 50%;
  background-size: 95%;
  background-repeat: no-repeat;
}

.popup.ipa {
  display: none;
  background-position: 50% 14%;
  background-size: 40vw;
  cursor: pointer;
}

.about {
  position: absolute;
  left: 20%;
  top: 18%;
  right: 0px;
  bottom: auto;
  width: 20%;
  margin-left: 15%;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  color: #4c1e1d;
  font-size: 0.91vw;
  line-height: 1.2vw;
}

.body {
  height: 100%;
}

.frame {
  position: absolute;
  display: block;
  overflow-x: auto;
  overflow-y: auto;
  width: 100vw;
  height: 100vh;
  border-style: solid;
  border-width: 3vw 3vw 2vw;
  border-color: white;
}

.ipa-wrapper {
  height: 30%;
}

.where-to-buy {
  position: absolute;
  left: 45%;
  top: 50%;
  display: inline-block;
  width: 7%;
  height: 5%;
  -webkit-transition: opacity 150ms linear;
  transition: opacity 150ms linear;
  color: #4c1e1d;
  font-size: 0.91vw;
  line-height: 2vw;
}

.where-to-buy:hover {
  -webkit-transform: rotate(3deg) scale(1.1);
  -ms-transform: rotate(3deg) scale(1.1);
  transform: rotate(3deg) scale(1.1);
}

.pop-where {
  position: absolute;
  left: 0vw;
  top: 0px;
  right: 0vw;
  bottom: 0px;
  z-index: 100;
  display: none;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
}

.where-list {
  position: static;
  display: block;
  width: auto;
  margin-right: 1%;
  margin-bottom: auto;
  color: #4c1e1d;
  font-size: 0.91vw;
  line-height: 1vw;
}

.where-list.address {
  display: block;
  font-size: 0.7vw;
  line-height: 0.85vw;
}

.where-list.minsk {
  display: block;
  margin-top: 2px;
  margin-bottom: 2px;
}

.where-list.minsk.status {
  text-decoration: underline;
}

.where-list.minsk.status.ok {
  color: #175f31;
  font-size: 0.9vw;
}

.where-list.nl {
  display: inline-block;
  width: 30%;
}

.where-list-wrapper {
  position: absolute;
  left: 63vw;
  top: 8%;
  width: 33vw;
  height: auto;
}

.back-img {
  position: absolute;
  display: block;
  width: 33vw;
  height: 40vw;
  background-image: url('../images/pop-where.png');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.text-wrapper {
  position: relative;
  width: 60%;
  height: 100%;
  margin-top: 22%;
  margin-left: 19%;
}

.back-to-site {
  display: none;
  height: 30%;
  background-image: url('../images/bierbank.png');
  background-position: 50% 0px;
  background-size: contain;
  background-repeat: no-repeat;
}

.sec-pad {
  display: none;
}

.close-btn {
  position: absolute;
  left: 45%;
  top: 10%;
  z-index: 5;
  width: 3vw;
  height: 3vw;
  background-image: url('../images/close-128.png');
  background-position: 50% 50%;
  background-size: 64px;
  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .sec {
    display: none;
  }
  .waves {
    left: 2vw;
    top: 4vw;
    z-index: 0;
    display: none;
  }
  .row {
    display: none;
  }
  .popup.ipa {
    display: none;
    height: auto;
    background-size: 70vw;
  }
  .about {
    position: absolute;
    left: 9%;
    width: 34%;
    font-size: 1.6vw;
    line-height: 1.7vw;
  }
  .frame {
    display: none;
    border-width: 5vw;
  }
  .where-to-buy {
    position: static;
    display: none;
  }
  .pop-where {
    position: static;
    left: auto;
    top: 10%;
    display: none;
    width: 100%;
    height: 100%;
  }
  .where-list {
    margin-bottom: 0px;
    font-size: 2vw;
    line-height: 2.8vw;
  }
  .where-list.address {
    font-size: 1.7vw;
    line-height: 1.6vw;
  }
  .where-list.minsk.status.ok {
    font-size: 1.9vw;
  }
  .where-list-wrapper {
    position: static;
    left: 19vw;
    width: 100%;
    height: 70%;
  }
  .back-img {
    position: static;
    width: 65vw;
    height: 75vw;
  }
  .text-wrapper {
    position: absolute;
    left: 3%;
    top: -9%;
    width: 50%;
    height: auto;
    margin-top: 26%;
    margin-left: 23%;
  }
  .back-to-site {
    position: static;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 20vw;
    background-image: url('../images/bierbank.png');
    background-position: 50% 50%;
    background-size: 377px;
    background-repeat: no-repeat;
  }
  .sec-pad {
    display: block;
    height: auto;
    background-color: #072031;
  }
  .waves-pad {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background-image: url('../images/waves.png');
    background-position: 50% 50%;
    background-size: 561px;
  }
  .frame-pad {
    position: absolute;
    top: 0px;
    display: block;
    width: 100%;
    height: 100%;
    border: 4vw solid white;
  }
  .img-pad {
    width: 100%;
    background-image: url('../images/pop-where.png');
    background-position: 50% 50%;
    background-size: 300px;
    background-repeat: no-repeat;
  }
  .list-ing-pad {
    display: block;
    margin-top: 2%;
    margin-right: auto;
    margin-left: auto;
  }
  .back-ing-pad {
    display: block;
    height: 30vw;
    margin-top: 10%;
    margin-right: auto;
    margin-left: auto;
    background-image: url('../images/bierbank.png');
    background-position: 50% 50%;
    background-size: 65vw;
    background-repeat: no-repeat;
  }
}

@media (max-width: 767px) {
  .text-wrapper {
    width: 50%;
  }
}