@import url(https://fonts.googleapis.com/css?family=Monoton|Montserrat&subset=latin-ext);
  /* latin */

  @font-face {
      font-family: 'Monoton';
      font-style: normal;
      font-weight: 400;
      src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v9/5h1aiZUrOngCibe4TkHLQg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* cyrillic-ext */

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }

  /* cyrillic */

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  /* vietnamese */

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
      unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  /* latin-ext */

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
      unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* latin */

  @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @keyframes a {
      0% {
          opacity: 0;
          transform: translate3d(0, 10rem, 0)
      }

      to {
          opacity: 1;
          transform: translateZ(0)
      }
  }

  .bg__item {
      background: url(../img/36364.jpg) no-repeat;
  }

  .fadeInUp {
      animation: a 1s
  }

  @keyframes b {
      0% {
          opacity: 0;
          transform: translate3d(0, -10rem, 0)
      }

      to {
          opacity: 1;
          transform: translateZ(0)
      }
  }

  .fadeInDown {
      animation: b .4s
  }

  [class*=" icon-"]:before,
  [class^=icon-]:before {
      font-family: fontello;
      font-style: normal;
      font-weight: 400;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
  }

  .icon-right-open:before {
      content: "\e800"
  }

  .icon-cancel:before {
      content: "\e801"
  }

  body {
      font-family: Montserrat, Arial, Helvetica, sans-serif;
      font-size: 16px;
      line-height: 1.4
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      text-transform: uppercase
  }

  h1 {
      font-family: Monoton, Arial, Helvetica, sans-serif;
      font-size: 4rem
  }

  h1,
  h2 {
      line-height: 1.1
  }

  h2 {
      font-size: 1.8rem
  }

  h3 {
      font-size: 2.2rem
  }

  h3,
  h4 {
      line-height: 1.1
  }

  h4 {
      font-size: 1.8rem
  }

  h5,
  h6 {
      font-size: 1.6rem;
      line-height: 1.1
  }

  p {
      font-size: 1.8rem
  }

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

  html {
      font-size: 62.5%
  }

  body,
  html {
      width: 100%;
      height: 100%
  }

  body {
      overflow-x: hidden;
      min-width: 320px;
      background: #fff;
      color: #333;
      z-index: 0;
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat
  }

  ul {
      list-style-type: none;
      margin: 0;
      padding: 0
  }

  .clearfix:after {
      content: "";
      display: block;
      clear: both
  }

  .btn,
  .transition {
      transition: all .25s ease
  }

  img {
      display: block;
      max-width: 100%;
      height: auto
  }

  .grayscale {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%)
  }

  .main {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 480px;
      z-index: 1;
      overflow: hidden
  }

  .adult {
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 2rem;
      z-index: 3;
      text-align: center;
      color: #000;
      text-transform: uppercase;
      font-size: 1rem
  }

  .btnbox {
      width: 100%
  }

  .btn,
  .btnbox {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      align-items: center
  }

  .btn {
      width: 90%;
      min-height: 5.4rem;
      line-height: 1;
      max-width: 25rem;
      padding: 2rem;
      position: relative;
      color: #000;
      font-size: 1.6rem;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      letter-spacing: .1rem;
      border-radius: 5rem;
      cursor: pointer;
      border: 1px solid transparent
  }

  .btn--primary {
      color: #fff;
      background-color: #e263c7;
      background-image: linear-gradient(to bottom, #a9097078, #ed5eef, #e7b7df94, #cc47b5, #a9097078);
      box-shadow: inset 0px -4px 1px rgba(0, 0, 0, .5), inset 0px 4px 1px rgba(255, 255, 255, .3);
  }

  .btn--primary:hover {
      box-shadow: none;
  }

  .btn--primary:active {
      box-shadow: none;
  }

  .btn--accent {
      color: #fff;
      background-color: hsla(0, 3%, 12%, 0.4);
  }

  .btn--accent:hover {
      color: #fff;
      background-color: hsla(0, 3%, 12%, 0.81);
  }

  .stepbox {
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      overflow: hidden;
      z-index: 2;
      transition: all .6s ease
  }

  .step,
  .stepbox {
      width: 100%;
      height: 100%
  }

  .step {
      position: absolute;
      left: 100%;
      top: 0;
      transition: all 1s
  }

  .step:first-child {
      left: 0
  }

  .step:first-child .step__inner .btnbox,
  .step:first-child .step__inner h2,
  .step:first-child .step__inner h6,
  .step:first-child .step__inner p {
      left: 0;
      opacity: 1
  }

  .step__inner {
      width: 100%;
      height: 100%;
      -ms-flex-direction: column;
      flex-direction: column;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      padding: 1rem;
      position: relative;
      color: #fff
  }

  .step__inner h2,
  .step__inner h6,
  .step__inner p {
      position: relative;
      left: 5rem;
      opacity: 0;
      transition: all 1.4s cubic-bezier(.68, -.55, .265, 1.55)
  }

  .step__inner p {
      position: relative;
      left: 5rem;
      opacity: 0;
      transition: all 1.2s linear
  }

  .step__inner .btnbox {
      position: relative;
      left: 5rem;
      transition: all .8s cubic-bezier(.785, .135, .15, .86)
  }

  .step__header h1 {
      text-align: center;
      color: #fff;
      font-size: 2.5em;
}

  .step.stepIn {
      left: 0
  }

  .step.stepIn .btnbox,
  .step.stepIn h2,
  .step.stepIn h6,
  .step.stepIn p {
      left: 0;
      opacity: 1
  }

  .step.stepOut {
      left: -100%
  }

  .bg {
      position: fixed !important
  }

  .bg,
  .bg:after {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 0
  }

  .bg:after {
      content: "";
      display: block;
      position: fixed;
      background-image: linear-gradient(105deg, rgba(108, 30, 232, 0.4), rgba(52, 255, 199, 0.4));
  }

  .bg__item {
      display: none;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0
  }

  .bg__item.active {
      display: block
  }

  .bg__item.blur {
      -webkit-filter: blur(8px);
      filter: blur(8px)
  }

  @media (min-width: 360px) {
      html {
          font-size: 75%
      }
  }
 @media (max-width: 360px) {
    .step__header h1 {
        font-size: 2em;
    }
  }

  @media (min-width: 768px) {
      html {
          font-size: 87.5%
      }

      .stepbox {
          max-width: 40rem;
          max-height: 50rem
      }

      .step {
          overflow: hidden;
          padding: 1rem .5rem
      }

      .step__inner {
          border-radius: .5rem
      }
  }

  @media (min-width: 1300px) {
      html {
          font-size: 100%
      }
    .step__header h1 {
    font-size: 3.5em;
}
  }


 .topclose {

     background: linear-gradient(0deg, #800000 0%, #C20000 100%);
     border-radius: 10px;
     border: 2px solid #fff;
     color: #fff;
     display: inline-block;
     font-size: 24px;
     font-weight: 600;
     height: 35px;
     min-width: 35px;
     position: fixed !important;
     right: 0 !important;
     text-align: center;
     text-transform: uppercase;
     top: 0 !important;
     width: 10px;
     z-index: 999 !important;

 }

 .rounded {
     border-radius: .25rem !important;
 }

 .btn-danger {
     color: #fff;
     background-color: #dc3545;
     border-color: #dc3545;
 }


  .videobgbox {
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
  }

  .video {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition-duration: 0ms;
      object-fit: cover;
  }

  .videobgbox:after {
      content: "";
      display: block;
      background: #0006;
      background-size: 2px 2px;
      z-index: 0;
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
  }