#smoke {
  position: absolute;
  display: none;
  top: -130px;
  left: 112px;
  opacity: 0;
  -webkit-transition: 2s 2s;
  transition: 2s 2s;
}

#vosk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#vosk img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#vosk input {
  width: 90%;
  padding: 9px;
  margin-bottom: 20px;
  font-size: 16px;
  border: 1px solid #caa789;
  border-radius: 2px;
}

#vosk form p {
  margin: 6px;
  font-style: italic;
  font-weight: bold;
}

#vosk .name-form {
  margin: 150px 0px 0px 50px;
}

#vosk .name-form button {
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 5px;
}

#vosk .block {
  position: relative;
  width: 320px;
  height: 400px;
  -webkit-transition: .5s;
  transition: .5s;
  overflow: hidden;
}

#vosk .block.left {
  background-image: url("img/fon-1-left.jpg");
}

#vosk .block.right {
  background-image: url("img/fon-1-right.jpg");
}

@media screen and (max-width: 639px) {
  #vosk .block.left {
    background-image: url("img/fon-1-left-mobile.jpg");
  }
  #vosk .block.right {
    background-image: url("img/fon-1-right-mobile.jpg");
  }
}

#vosk .block .svitok2,
#vosk .block .status,
#vosk .block .result-img,
#vosk .block .svecha,
#vosk .block > img {
  display: none;
}

#vosk.background-2 .block .name-form {
  display: none;
}

#vosk.background-2 .block.left {
  background-image: url("img/fon-2-left.jpg");
}

#vosk.background-2 .block.right {
  background-image: url("img/fon-2-right.jpg");
}

@media screen and (max-width: 639px) {
  #vosk.background-2 .block.left {
    background-image: url("img/fon-2-left-mobile.jpg");
  }
  #vosk.background-2 .block.right {
    background-image: url("img/fon-2-right-mobile.jpg");
  }
}

#vosk.background-2 .block > img, #vosk.background-2 .block .svecha {
  display: block;
}

#vosk.background-2 .block .result-img {
  display: block;
  position: absolute;
  top: 500px;
  left: 45px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: top 2s, left 2s, -webkit-transform 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  transition: top 2s, left 2s, -webkit-transform 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  transition: transform 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75), top 2s, left 2s;
  transition: transform 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75), top 2s, left 2s, -webkit-transform 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);
  z-index: 10;
}

#vosk.background-2 .block .result-img .simvol {
  position: absolute;
  top: 50px;
  left: 50px;
}

#vosk.background-2 .block .arrow-btn {
  opacity: 0;
  position: absolute;
  z-index: -1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  top: 15px;
  cursor: pointer;
}

#vosk.background-2 .block .arrow-btn.left {
  left: 15px;
}

#vosk.background-2 .block .arrow-btn.right {
  right: 15px;
}

#vosk.background-2 .block .arrow-btn:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

#vosk.background-2 .block .status {
  display: block;
  position: absolute;
  top: 351px;
  left: 30px;
  width: 268px;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
  color: #140202;
}

#vosk.background-2 .block .svitok2 {
  display: block;
  position: absolute;
  top: 94px;
  left: 26px;
  width: 261px;
  height: 272px;
  overflow-y: auto;
}

#vosk.background-2 .block .svitok2 ol {
  padding-left: 20px;
}

#vosk.background-2 .block .svitok2 li {
  margin-bottom: 6px;
  font-size: 15px;
}

#vosk.background-2 .block .svitok2 .answer {
  text-align: center;
}

#vosk.background-2 .block .svitok2 .answer b {
  text-transform: uppercase;
}

#vosk.background-2 .block .svitok2 .btn-again {
  cursor: pointer;
}

#vosk.background-2 .block .svitok2 .btn-again:hover {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

#vosk.background-2 .block .miska-img, #vosk.background-2 .block .svecha {
  position: absolute;
  top: -50px;
  left: -300px;
  -webkit-transition: 1s;
  transition: 1s;
}

#vosk.background-2 .block .svecha {
  -webkit-transition: 2.3s;
  transition: 2.3s;
}

#vosk.background-2 .block .svecha .fire {
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity 3s 2.3s;
  transition: opacity 3s 2.3s;
  top: -4px;
  left: 26px;
}

#vosk.background-2 .block .polovnik-img {
  position: absolute;
  left: 50px;
  top: -200px;
  -webkit-transition: 2s;
  transition: 2s;
}

#vosk.background-2 .block .potok-img, #vosk.background-2 .block .otlivka-img {
  position: absolute;
  opacity: 0;
}

#vosk.first .block .miska-img {
  top: 125px;
  left: 50px;
}

#vosk.first .block .svecha {
  top: 148px;
  left: 215px;
}

#vosk.first .block .svecha .fire {
  opacity: 1;
}

#vosk.first .block #smoke {
  display: block;
}

#vosk.second .block .svecha {
  top: 217px;
  left: 182px;
}

#vosk.second .block .svecha .fire {
  opacity: 1;
}

#vosk.second .block .polovnik-img {
  top: 8px;
  left: 44px;
}

#vosk.second .block #smoke {
  display: block;
  opacity: .3;
}

#vosk.third .block .miska-img {
  top: 220px;
  left: 58px;
  -webkit-transition: 1s 1s;
  transition: 1s 1s;
}

#vosk.third .block .polovnik-img {
  top: -71px;
  left: -18px;
  -webkit-transform: rotate(43deg);
          transform: rotate(43deg);
  -webkit-transition: 1s 2s;
  transition: 1s 2s;
}

#vosk.third .block .potok-img {
  opacity: 1;
  -webkit-transition: 1s 2.5s;
  transition: 1s 2.5s;
  top: 105px;
  left: 99px;
}

#vosk.third .block #smoke {
  display: block;
}

#vosk.fourth .block .miska-img {
  top: 220px;
  left: 58px;
}

#vosk.fourth .block .polovnik-img {
  top: -1px;
  left: -17px;
}

#vosk.fourth .block .potok-img {
  opacity: 0;
  top: 105px;
  left: 99px;
  -webkit-transition: .5s;
  transition: .5s;
}

#vosk.fourth .block .otlivka-img {
  opacity: 1;
  -webkit-transition: 1s;
  transition: 1s;
  top: 242px;
  left: 99px;
}

#vosk.result-scr .block .result-img {
  top: 62px;
  left: 18px;
}

#vosk.result-scr .block .arrow-btn {
  opacity: 1;
  z-index: 1;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@media only screen and (min-width: 638px) and (max-width: 680px) {
  #vosk .block.left {
    background-image: url("img/fon-1-left.jpg");
    background-size: cover;
  }
  #vosk .block {
    width: 300px;
    height: 375px;
  }
  #vosk .block.right {
    background-image: url("img/fon-1-right.jpg");
    background-size: cover;
  }
  #vosk.background-2 .block .status {
    top: 328px;
    left: 25px;
  }
  #vosk.background-2 .block .svitok2 li {
    margin-bottom: 5px;
    font-size: 14px;
  }
  #vosk .answer {
    font-size: 14px;
    width: 238px;
  }
  #vosk.background-2 .block .svitok2 ol {
    font-size: 14px;
    width: 238px;
  }
}

.fire {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-animation-name: flicker;
          animation-name: flicker;
  -webkit-animation-duration: 3ms;
          animation-duration: 3ms;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.fire .flame {
  bottom: 0;
  position: absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  -webkit-transform: rotate(-45deg) scale(1.5, 1.5);
          transform: rotate(-45deg) scale(1.5, 1.5);
}

.fire .red {
  left: 2.5px;
  width: 25px;
  height: 25px;
  background: OrangeRed;
  -webkit-box-shadow: 0px 0px 5px 4px OrangeRed;
          box-shadow: 0px 0px 5px 4px OrangeRed;
}

.fire .orange {
  left: 5px;
  width: 20px;
  height: 20px;
  background: orange;
  -webkit-box-shadow: 0px 0px 9px 4px orange;
          box-shadow: 0px 0px 9px 4px orange;
}

.fire .yellow {
  left: 7.5px;
  width: 15px;
  height: 15px;
  background: gold;
  -webkit-box-shadow: 0px 0px 9px 4px gold;
          box-shadow: 0px 0px 9px 4px gold;
}

.fire .white {
  left: 7.5px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  background: white;
  -webkit-box-shadow: 0px 0px 9px 4px white;
          box-shadow: 0px 0px 9px 4px white;
}

@-webkit-keyframes flicker {
  0% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  20% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  40% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  60% {
    -webkit-transform: rotate(1deg) scaleY(1.04);
            transform: rotate(1deg) scaleY(1.04);
  }
  80% {
    -webkit-transform: rotate(-2deg) scaleY(0.92);
            transform: rotate(-2deg) scaleY(0.92);
  }
  100% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
}

@keyframes flicker {
  0% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  20% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  40% {
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  60% {
    -webkit-transform: rotate(1deg) scaleY(1.04);
            transform: rotate(1deg) scaleY(1.04);
  }
  80% {
    -webkit-transform: rotate(-2deg) scaleY(0.92);
            transform: rotate(-2deg) scaleY(0.92);
  }
  100% {
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
}
/*# sourceMappingURL=style.css.map */