@import "https://fonts.google.com/specimen/Montserrat";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
:focus {
  outline: 0
}
img {
  border: none;
  display: block
}
ol,
ul {
  list-style: none
}
iframe {
  border: none !important;
  width: 0 !important;
  height: 0 !important
}
a {
  text-decoration: none;
  cursor: pointer !important
}
p {
  margin-bottom: 2rem
}
html,
body {
  height: 100vh
}
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  position: relative
}
body {
  font-family: Montserrat;
  color: #fff;
  line-height: 1.3;
  font-size: 2.6rem;
  background: #000;
  font-weight: 300
}
.slider-block {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1
}
.slider-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 0.6s linear;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}
.slider-item.visible {
  opacity: 1
}
.item1 {
  background-image: url(../images/1b.jpg)
}
.item2 {
  background-image: url(../images/2b.jpg)
}
.item3 {
  background-image: url(../images/3b.jpg)
}
.item4 {
  background-image: url(../images/4b.jpg)
}
.wrap {
  position: relative;
  height: 100vh;
  min-height: 400px;
  text-align: center
}
.step-block {
  max-width: 630px;
  width: 96%;
  margin: 0 auto
}
.step-item {
  display: none
}
.step-item.visible {
  display: block
}
.content-block {
  padding: 3rem 0;
  width: 96%;
  margin: 0 auto
}
.slogan-title {
  font-size: 2.4rem;
  margin-bottom: 2rem;
  display: none;
  font-weight: 700
}
.timer-block {
  display: none
}
.timer-title {
  font-size: 2.4rem;
  font-weight: bold;
  margin-top: 25 px;
}
.timer {
  font-size: 4rem;
  font-weight: 700
}
.main-slogan {
  text-transform: uppercase;
  font-size: 6rem;
  /* letter-spacing: 14px; */
  /* text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff; */
  text-shadow: -4px 0px 0px #ff00f0, 4px 0px 0px #38eeff;
  /* -ms-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg); */
  max-width: 80%;
  margin: 2.5rem auto 4rem;
  font-weight: 700
}
.main-slogan .neon {
  font-family: Montserrat;
  color: #feff93;
  /* letter-spacing: 18px; */
  /* text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3), 0 0px 15px #fff, 0 0 10px #38eeff, 0 0 50px #38eeff; */
  /* font-weight: 100; */
  /* -ms-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg) */
}
.question-title {
  margin-bottom: 3rem;
  line-height: 1.2;
  font-size: 2.4rem;
  font-weight: 400
}
.buttons-block {
  text-align: center;
  font-size: 0
}
.step-btn {
  /* border: 2px solid #00c7cb; */
  display: inline-block;
  width: 50%;
  min-width: 50px;
  margin: 0 1rem;
  height: 6rem;
  line-height: 6rem;
  cursor: pointer;
  transition: all 0.3s linear;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase
}
/* .step-btn:hover {
border-color: #00c7cb;
background: #00c7cb;
color: #000
} */
.yes-btn {
  background-color: #00ffff;
  /* border-color: #a4a8ad; */
  color: #fff;
  border-radius: 30px;
  border-right: 4px solid #ff00f0;
  border-bottom: 4px solid #ff00f0;
}
.yes-btn:hover {
  border: none;
}
.yes-btn,
.no-btn {
  width: 25%
}
.no-btn {
  background-color: #fff;
  /* border-color: #a4a8ad; */
  color: #8d8a8a;
  border-radius: 30px;
  border-right: 4px solid #feff93;
  border-bottom: 4px solid #feff93;
}
.no-btn:hover {
  border: none;
}
.submit-btn {
  text-transform: uppercase;
  text-transform: uppercase;
  background-color: #00ffff;
  /* border-color: #a4a8ad; */
  color: #fff;
  border-radius: 30px;
  border-right: 4px solid #ff00f0;
  border-bottom: 4px solid #ff00f0;
}
.submit-btn:hover {
  border: none;
}
@media (max-width: 800px) {
  html {
    font-size: 55%
  }
  .step-btn {
    width: 90%;
    margin: 0.5rem 0
  }
}
@media (max-width: 600px) {
  .question-title {
    font-size: 2rem
  }
  .main-slogan {
    font-size: 4rem
  }
}
@media (min-width: 800px) {
  .slogan-title {
    margin-top: 16rem;
  }
}