.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%;
  background-color: #fffbeb;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  perspective-origin-x: 50%;
  perspective-origin-y: 150%;
}

.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%;
}

.sec-pad {
  display: none;
}

.sec-home {
  height: 100vh;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  perspective-origin-x: 50%;
  perspective-origin-y: 50%;
}

.usd {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background-image: url('../images/usd.svg');
  background-position: 50% 50%;
  background-size: auto 98%;
  background-repeat: no-repeat;
}

.curr-wrapper {
  position: fixed;
  left: 41%;
  top: 15%;
  right: auto;
  width: 18vw;
  height: 28vw;
  margin-right: auto;
  margin-left: auto;
}

.euro {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background-image: url('../images/euro.svg');
  background-position: 50% 50%;
  background-size: 99%;
  background-repeat: no-repeat;
}

.rub {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background-image: url('../images/rub.svg');
  background-position: 50% 50%;
  background-size: auto 92%;
  background-repeat: no-repeat;
}

.down-center {
  position: fixed;
  left: 35%;
  bottom: 8%;
  display: none;
  width: 30%;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #c38737;
  font-size: 1vw;
  line-height: 1.2vw;
  text-align: center;
}

.bb {
  display: none;
  width: 100%;
  height: 100%;
  background-image: url('../images/bb.svg');
  background-position: 50% 50%;
  background-size: 97%;
  background-repeat: no-repeat;
}

.scroll-down {
  position: fixed;
  right: 4%;
  bottom: 4%;
  display: block;
  width: 4vw;
  height: 4vw;
}

.scroll-down-front {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #c38635;
}

.scroll-down-back {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #c38635;
  background-image: url('../images/bb-floralWhite.svg');
  background-position: 50% 50%;
  background-size: auto 60%;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}

.scroll-down-text {
  position: relative;
  top: 25%;
  color: #fffbeb;
  font-size: 0.85vw;
  line-height: 1vw;
  text-align: center;
}

.scroll-down-wrapper {
  position: fixed;
  display: none;
}

.bb-shield {
  position: fixed;
  left: 37.9%;
  top: 13.6%;
  z-index: 200;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 25.2vw;
  height: 31.6vw;
  background-image: url('../images/BB-shield-str.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.logo-background {
  position: fixed;
  z-index: 100;
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: #c38635;
  opacity: 1;
}

.bb-shield-wrapper {
  position: fixed;
  z-index: 200;
  display: none;
  opacity: 0;
}

.reinheitsgebot {
  position: fixed;
  left: 20%;
  bottom: 8%;
  z-index: 300;
  display: block;
  width: 60%;
  opacity: 1;
  color: #fffbeb;
  font-size: 2vw;
  line-height: 2.2vw;
  text-align: center;
}

.reinheitsgebot-wrapper {
  position: fixed;
  z-index: 300;
  display: none;
  opacity: 0;
}

.reinheitsgebot-crowns {
  position: fixed;
  left: 40%;
  top: 23%;
  z-index: 400;
  width: 9vw;
  height: 7vw;
  background-image: url('../images/Reinheitsgebot-Crowns.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: scale(3) translate(-7vw, -1vw);
  -ms-transform: scale(3) translate(-7vw, -1vw);
  transform: scale(3) translate(-7vw, -1vw);
}

.reinheitsgebot-crowns-wrapper {
  position: fixed;
  z-index: 400;
  display: none;
  opacity: 0;
}

.water {
  position: fixed;
  top: 21%;
  right: 39%;
  width: 10vw;
  height: 11vw;
  background-image: url('../images/water.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: scale(2.6) translate(9vw, -1vw);
  -ms-transform: scale(2.6) translate(9vw, -1vw);
  transform: scale(2.6) translate(9vw, -1vw);
}

.water-wrapper {
  position: fixed;
  z-index: 150;
  display: none;
  opacity: 0;
}

.malt-wrapper {
  position: fixed;
  z-index: 150;
  display: none;
  opacity: 0;
}

.hops-wrapper {
  position: fixed;
  z-index: 150;
  display: none;
  opacity: 0;
}

.hops {
  position: fixed;
  top: 47%;
  right: 40%;
  width: 8vw;
  height: 10vw;
  background-image: url('../images/hops.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: scale(3) translate(12vw, 2vw);
  -ms-transform: scale(3) translate(12vw, 2vw);
  transform: scale(3) translate(12vw, 2vw);
}

.malt {
  position: fixed;
  left: 41%;
  top: 48%;
  width: 8vw;
  height: 10vw;
  background-image: url('../images/malt.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: scale(3) translate(-7vw, 2vw);
  -ms-transform: scale(3) translate(-7vw, 2vw);
  transform: scale(3) translate(-7vw, 2vw);
}

.door {
  position: fixed;
  left: 33%;
  top: 4%;
  z-index: 600;
  width: 34vw;
  height: 45vw;
  background-image: url('../images/door-BRAWN.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transform: perspective(1200px) rotateX(0deg) rotateY(-120deg) rotateZ(0deg);
  transform: perspective(1200px) rotateX(0deg) rotateY(-120deg) rotateZ(0deg);
  transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
}

.door-wrapper {
  position: fixed;
  z-index: 600;
  display: none;
  opacity: 0;
}

.sec-wrapper {
  display: block;
  height: 200vh;
}

.sec-wrapper-2 {
  height: 100vh;
}

.bb-logo {
  position: fixed;
  left: 40%;
  top: 8%;
  z-index: 800;
  width: 20vw;
  height: 25vw;
  background-image: url('../images/BB-logo-brown.svg');
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: -webkit-transform 1000ms ease;
  transition: -webkit-transform 1000ms ease;
  transition: transform 1000ms ease;
  transition: transform 1000ms ease, -webkit-transform 1000ms ease;
}

.bb-logo:hover {
  -webkit-transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
}

.left-menu {
  position: fixed;
  left: 7%;
  top: 15%;
  z-index: 700;
  width: 30vw;
  height: 5vw;
  border-bottom: 2px solid #fffbeb;
  opacity: 0;
}

.right-menu {
  position: fixed;
  top: 15%;
  right: 7%;
  z-index: 700;
  width: 30vw;
  height: 5vw;
  border-bottom: 2px solid #fffbeb;
  opacity: 0;
}

.menu-but {
  display: inline-block;
  width: 15vw;
  height: 100%;
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  transition: -webkit-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
  font-family: 'Open Sans', sans-serif;
  color: #fffbeb;
  font-size: 1.5vw;
  line-height: 3vw;
  text-align: center;
  text-decoration: none;
}

.menu-but:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  color: #e6aa0f;
}

.slogan-text {
  position: fixed;
  left: 30%;
  bottom: 5%;
  z-index: 800;
  width: 40vw;
  opacity: 0;
  font-family: 'Open Sans', sans-serif;
  color: #fffbeb;
  font-size: 1.5vw;
  line-height: 2.6vw;
  text-align: center;
}

.bb-logo-wrapper {
  position: fixed;
  z-index: 800;
}

@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%;
  }
  .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;
  }
  .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%;
  }
}