@font-face {
  font-family: 'Main';
  src: url(../fonts/main.ttf);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
}

img {
  width: 100%;
  display: block;
}

.block-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.app {
  font-family: 'Marvin';
  background-image: url(../image/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  font-weight: bolder;
  height: 100vh;
  overflow: hidden;
  display: block;
  position: relative;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.girls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.girls .girl {
  bottom: 0;
  left: 23%;
  position: absolute;
  width: 37%;
  opacity: 0;
  -webkit-transition: all ease .8s;
  transition: opacity ease .8s;
}

.girls .girl_active {
  opacity: 1;
}

.avatars {
  position: absolute;
  top: 7%;
  left: 12%;
  width: 7%;
}

.avatars .avatar {
  margin-top: 20%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-box-shadow: 2px 2px 2px rgba(48, 48, 48, 0);
          box-shadow: 2px 2px 2px rgba(48, 48, 48, 0);
  border: 3px solid #e702b500;
}

.avatars .avater_active {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  border: 3px solid #e702b5bd;
  -webkit-box-shadow: 2px 2px 2px #303030;
          box-shadow: 2px 2px 2px #303030;
}

.questions {
  position: absolute;
  right: 3.4%;
  top: 27%;
  width: 40%;
  opacity: 1;
}
.bg-d {
  display: block;
}
.bg-m {
  display: none;
}

.logo {
  position: absolute;
  width: 40%;
  top: -10%;
  left: -5%;
}

.qt {
  color: white;
  font-family: 'main';
  position: absolute;
  width: 100%;
  text-align: center;
  text-shadow: 4px 0px 0px #e702b5, -4px 0px 0px #3346bb;
  letter-spacing: 0.2vw;
}

.qt .qt-word {
  color: #ff5fdf;
}

.question-text1 {
  top: 20%;
  left: 0%;
  font-size: 4.5vw;
  line-height: 90px;
}

.question-text1 p:first-child {
  margin-left: -20%;
  font-size: 6vw;
}

.question-text2 {
  top: 20%;
  left: 0%;
  font-size: 3.8vw;
  line-height: 90px;
  letter-spacing: 0.1vw;
  opacity: 0;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
}

.question-text2 p:first-child {
  margin-left: -30%;
  font-size: 6vw;
}

.question-text3 {
  top: 20%;
  width: 85%;
  left: 5%;
  font-size: 2.5vw;
  line-height: 50px;
  letter-spacing: 0.2vw;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  opacity: 0;
}

.text-bitch {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.qtext2 {
  left: -15%;
  font-size: 3vw;
}

.qtext2 .q-style1 {
  font-size: 5vw;
}

.qtext2 .q-style2 {
  margin-left: 170px;
}

.buttons-block {
  position: absolute;
  width: 115%;
  left: -2%;
  top: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.buttons-block .button {
  display: block;
  cursor: pointer;
  position: relative;
  -ms-flex-preferred-size: 48%;
      flex-basis: 48%;
  -webkit-animation: btn 1s ease;
          animation: btn 1s ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.buttons-block .button:last-child {
  margin-left: -11%;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

.buttons-block .button .btnhoverp {
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}

.buttons-block .button .btnhover {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  opacity: 1;
}

.buttons-block .button .text {
  position: absolute;
  top: 42.5%;
  left: 0;
  text-align: center;
  color: white;
  width: 100%;
  font-size: 1.6vw;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-shadow: 1px 0px 0px #e702b5, -1px 0px 0px #3346bb;
}

.buttons-block .button:hover .btnhoverp {
  opacity: 0;
}

.bb2 {
  width: 60%;
  left: 23%;
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
  -webkit-transition: all ease .8s;
  transition: all ease .8s;
  display: none;
}

.bb2_active {
  display: block;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 1;
}

@-webkit-keyframes btn {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes btn {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


@media (min-width: 1280px) and (max-width: 1440px) and (orientation: landscape) {
  .question-text1,
  .question-text2,
  .question-text3 {
    top: 16%;
  }

  .buttons-block {
    top: 55%;
  }
}

@media (max-width: 1000px) and (orientation: landscape) {
.avatars {display: none;}


.girls .girl  {
  bottom: auto;
  top: 0%;
 
  left: 15%;
}

 
 
 .logo {
   display: none;
 }
 .bg-d {
  display: none;
}
.bg-m {
  display: block;
}

.question-text1 {
  top: 30%;
 
  font-size: 6vw;
  line-height: 50px;
}
.question-text1 p:first-child {
  font-size: 7vw;
}

.buttons-block {
 
  top: auto;
  bottom: 0;
}
.buttons-block .button{
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  -webkit-animation: btn 1s ease;
          animation: btn 1s ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
  .buttons-block .button .text {
    font-size: 2.6vw ;
    top: 37%;
  }
  .question-text2{
    top: 33%;
  
    font-size: 4vw;
    line-height: 50px;
  }
  .question-text2 p:first-child{
    font-size:7vw;
  }
  .question-text3 {
    font-size: 3vw;
    top: 25%;
    width: 90%;
    line-height: 3.1vw;
  }  
}
@media screen and (max-width:1024px) and (orientation:portrait) {
  .avatars {display: none;}
 
  .questions {
     top: auto;
     bottom: -3%;
     left: 15%;
     width: 70%;
  }
  .girls .girl  {
    bottom: auto;
    top: 5%;
    width: 100%;
    left: 0%;
  }
 
  .logo {
    display: none;
  }
  /* .bg-d {
   display: none;
 }
 .bg-m {
   display: block;
 } */
 
 .question-text1 {
   top: 25%;
  
   font-size: 8vw;
   line-height: 8vw;
 }
 .question-text1 p:first-child {
   font-size: 9vw;
 }
 
 .buttons-block {
  
   top: auto;
   bottom: 5%;
 }
 .buttons-block .button{
   -ms-flex-preferred-size: 50%;
       flex-basis: 50%;
   -webkit-animation: btn 1s ease;
           animation: btn 1s ease;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
 }
   .buttons-block .button .text {
     font-size: 4vw ;
     top: 40%;
   }
   .question-text2{
     top: 25%;
   
     font-size: 8vw;
     line-height: 8vw;
   }
   .question-text2 p:first-child{
     font-size: 9vw;
   }
   .question-text3 {
     font-size: 5vw;
     top: 15%;
     width: 85%;
     line-height: 5vw;
   }
 }


@media screen and (max-width:515px) and (orientation:portrait) {
 .avatars {display: none;}

 .questions {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    
 }
 .girls .girl  {
   bottom: auto;
   top: 5%;
   width: 100%;
   left: 0%;
 }

 .logo {
   display: none;
 }
 .bg-d {
  display: none;
}
.bg-m {
  display: block;
}

.question-text1 {
  top: 30%;
 
  font-size: 12vw;
  line-height: 50px;
}
.question-text1 p:first-child {
  font-size: 14vw;
}

.buttons-block {
 
  top: auto;
  bottom: 0;
}
.buttons-block .button{
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  -webkit-animation: btn 1s ease;
          animation: btn 1s ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
  .buttons-block .button .text {
    font-size: 6vw ;
    top: 40%;
  }
  .question-text2{
    top: 33%;
  
    font-size: 12vw;
    line-height: 50px;
  }
  .question-text2 p:first-child{
    font-size: 14vw;
  }
  .question-text3 {
    font-size: 8vw;
    top: 25%;
    width: 90%;
    line-height: 8vw;
  }
}