:root {
  --font-family: "TTNormsPro", sans-serif;
  --font-family-bold: "Druk Text Wide Cyr", sans-serif;
  --clr-dark: #1d252d;
  --clr-light: #fff;
  --clr-primary: #5f45ba;
  --clr-primary-100: #493492;
  --clr-secondary: #f6e200;
  --clr-secondary-100: #f7b738;
  --clr-danger: #ff1a1a;

  --clr-neutral-50: #f3f3f4;
  --clr-neutral-60: #f5f5f5;
  --clr-neutral-75: #e5e5e5;
  --clr-neutral-90: #f9f9f9;
  --clr-neutral-100: #d6d6d6;
  --clr-neutral-600: #a1a5a7;
  --clr-neutral-1000: #606567;
  --clr-neutral-2000: #2a3a46;

  --theme-clr-text: var(--clr-dark);
  --theme-clr-danger: var(--clr-danger);
  --theme-bg: var(--clr-light);
  --theme-text: 16px;
  --theme-leading: 140%;

  --primary: var(--clr-dark);
  --primary-s: var(--clr-neutral-2000);
  --primary-g: rgba(14, 30, 51, 0.5);
  --secondary: var(--clr-secondary);
  --secondary-p: var(--clr-primary);
  --secondary-s: var(--clr-secondary-100);
  --secondary-text: var(--clr-neutral-2000);
  --bg: var(--theme-bg);
  --border: rgba(14, 30, 51, 0.22);
  --surface: #ffffff;
  --red: var(--clr-danger);
}
:root {
  --modal-v-safezone: 5rem;
  --modal-h-safezone: 10rem;

  --close-btn-color: var(--primary);
  --close-btn-v-offset: 2rem;
  --close-btn-h-offset: 2rem;
  --close-btn-width: 1.8rem;
  --close-btn-weight: .2rem;

  --popup-padding: 4rem;

  --modal-fade: rgba(24, 65, 136, .2);
}
@media (max-width: 768px) {
:root {
    --popup-padding: 3rem 1.6rem
}
  }
.modal-wrap {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1044;
    overflow-x: hidden;
    position: fixed;
  }
.modal-wrap:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
.modal-bg {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1042;
    overflow-x: hidden;
    position: fixed;
    background: var(--modal-fade);
  }
.modal-content {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: linear;
    z-index: 1043;
    pointer-events: none;
  }
@media (max-width: 768px) {
.modal-content {
      height: 100%;
      background-color: #fff;
      transition-property: transform
  }
    }
.modal-content:not(.init) {
      opacity: 0;
      transform: scale(1.03) translateZ(0);
    }
@media (max-width: 768px) {
.modal-content:not(.init) {
        opacity: 1;
        transform: translateX(100%) translateZ(0)
    }
      }
.modal-content #modalYoutubeVideo {
      text-align: center;
    }
.modal-popup {
    position: relative;
    display: flex;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    min-width: 48rem;
    margin: var(--modal-v-safezone) auto;
    pointer-events: all;
  }
@media (max-width: 768px) {
.modal-popup {
      min-width: auto;
      width: 100%;
      margin: 0
  }
    }
.modal-popup__inner {
      width: 100%;
      padding: var(--popup-padding);
      background-color: #ffffff;
    }
.modal-popup__inner span {
        display: block;
        margin-bottom: 2rem;
      }
@media (max-width: 768px) {
.modal-popup__inner .btn {
          height: 5rem;
          padding: 1.7rem 4rem
      }
        }
.modal-popup__btns {
      display: flex;
      justify-content: space-between;
    }
@media(max-width: 500px) {
.modal-popup__btns {
        flex-direction: column
    }
      }
.modal-popup__btns .btn {
        width: calc(50% - 10px);
      }
@media(max-width: 500px) {
.modal-popup__btns .btn {
          width: 100%;
          margin-bottom: 10px
      }
        }
.modal-close {
    position: absolute;
    top: var(--close-btn-v-offset);
    right: var(--close-btn-h-offset);
    width: var(--close-btn-width);
    height: var(--close-btn-width);
    padding: 1.5rem;
    cursor: pointer;
  }
.modal-close:hover:before, .modal-close:hover:after {
        background-color: var(--secondary);
      }
.modal-close:before, .modal-close:after {
      content: '';
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      width: var(--close-btn-width);
      height: var(--close-btn-weight);
      margin: auto;
      background-color: var(--close-btn-color);
      transition: background-color .3s ease;
    }
.modal-close:before {
      transform: rotate(45deg);
    }
.modal-close:after {
      transform: rotate(-45deg);
    }
.modal-form__success:empty, .modal-form__error:empty {
        margin: 0;
      }
.modal-form__success {
      margin-top: .7rem;
      color: var(--green);
    }
.modal-form__error {
      color: var(--red);
    }
.modal-form .b-check {
      margin: 2rem 0;
    }
.modal-form .b-form__item {
        margin-bottom: 2rem;
      }
.modal-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
[data-modal] {
  cursor: pointer;
}
[data-modal] > * {
    pointer-events: none;
  }
.form-input {
    display: block;
    margin-bottom: 2rem;
  }
.form-input__title {
      margin-bottom: .8rem;
      font-size: 1.4rem;
    }
.form-input__error {
      margin-top: .5rem;
      font-size: 1.2rem;
      color: var(--red);
    }
.form-input input {
      width: 100%;
      border: .1rem solid var(--border);
      padding: 1.2rem 1.5rem;
      transition: border-color .3s ease;
    }
.form-input input:hover, .form-input input:focus {
        border-color: var(--primary);
      }