@charset "UTF-8";
@font-face {
  font-weight: 700;
  font-family: "Quicksand";
  font-style: "normal";
  src: url(../assets/fonts/quicksand-bold.eot);
  src: local("☺"), url(../assets/fonts/quicksand-bold.woff) format("woff"), url(../assets/fonts/quicksand-bold.ttf) format("truetype"), url(../assets/fonts/quicksand-bold.svg) format("svg"); }

@font-face {
  font-weight: 400;
  font-family: "Quicksand";
  font-style: "normal";
  src: url(../assets/fonts/quicksand-regular.eot);
  src: local("☺"), url(../assets/fonts/quicksand-regular.woff) format("woff"), url(../assets/fonts/quicksand-regular.ttf) format("truetype"), url(../assets/fonts/quicksand-regular.svg) format("svg"); }

@font-face {
  font-weight: 700;
  font-family: "Montserrat";
  font-style: "normal";
  src: url(../assets/fonts/montserrat-bold.eot);
  src: local("☺"), url(../assets/fonts/montserrat-bold.woff) format("woff"), url(../assets/fonts/montserrat-bold.ttf) format("truetype"), url(../assets/fonts/montserrat-bold.svg) format("svg"); }

@font-face {
  font-weight: 400;
  font-family: "Montserrat";
  font-style: "normal";
  src: url(../assets/fonts/montserrat-regular.eot);
  src: local("☺"), url(../assets/fonts/montserrat-regular.woff) format("woff"), url(../assets/fonts/montserrat-regular.ttf) format("truetype"), url(../assets/fonts/montserrat-regular.svg) format("svg"); }

.header__user-name, .nav-menu__link, .nav-menu__sub-link, .log-in-form__text, .input__description, .input__element, .mobile-footer__text, .radio-buttons__content, .toggle__label, .desktop-footer__text, .desktop-footer__subscription-item, .desktop-footer__link, .desktop-footer__copyright {
  color: #1f2041;
  font-weight: 400;
  font-size: 14px;
  font-family: "Montserrat", "Arial", sans-serif; }

.button, .nav-menu__link_active, .input__heading, .radio-buttons__name, .toggle__name, .desktop-footer__title, .desktop-footer__subscription-title {
  color: #1f2041;
  font-weight: 700;
  font-size: 12px;
  font-family: "Montserrat", "Arial", sans-serif;
  text-transform: uppercase; }

.log-in-form__title {
  color: #1f2041;
  font-weight: 700;
  font-size: 24px;
  font-family: "Quicksand", "Arial", sans-serif; }

@font-face {
  font-weight: normal;
  font-family: "MaterialIcons-Regular";
  font-style: normal;
  src: url(../assets/fonts/materialicons-regular.eot);
  src: local("☺"), url(../assets/fonts/materialicons-regular.woff) format("woff"), url(../assets/fonts/materialicons-regular.ttf) format("truetype"), url(../assets/fonts/materialicons-regular.svg) format("svg"); }

html,
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%; }

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: unset; }

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

a {
  text-decoration: none; }

.header {
  background-color: white;
  box-shadow: 0 10px 20px rgba(31, 32, 65, 0.05); }
  .header__container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px; }
    .header__container_opened {
      padding: 0; }
  .header__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0; }
  .header__with-nav-menu-buttons {
    display: flex;
    align-items: center; }
    @media screen and (max-width: 992px) {
      .header__with-nav-menu-buttons {
        position: absolute;
        top: 65px;
        right: -110%;
        z-index: 3;
        display: none;
        width: 100%;
        overflow: auto;
        background: white;
        box-shadow: 0 4px 2px -2px rgba(36, 36, 36, 0.17);
        transition: all 0.4s ease; } }
  @media screen and (max-width: 992px) {
    .header__with-opened-menu {
      right: 0;
      display: block; } }
  .header__link {
    margin-right: 20px; }
    @media screen and (max-width: 992px) {
      .header__link {
        display: none; } }
  @media screen and (max-width: 992px) {
    .header__link-sign {
      display: none; } }
  .header__user-name {
    opacity: 0.5; }
    @media screen and (max-width: 992px) {
      .header__user-name {
        display: none; } }
  .header__burger {
    display: none; }
    @media screen and (max-width: 992px) {
      .header__burger {
        position: relative;
        display: block;
        width: 40px;
        height: 35px; }
        .header__burger .header__burger-element, .header__burger::after, .header__burger::before {
          position: absolute;
          width: 100%;
          height: 3px;
          margin: 0 auto;
          background: #515758; }
        .header__burger .header__burger-element {
          top: 16px; }
        .header__burger::after, .header__burger::before {
          content: ""; }
        .header__burger::after {
          bottom: 5px; }
        .header__burger::before {
          top: 5px; } }
    .header__burger_opened {
      margin-left: 20px; }
  @media screen and (max-width: 992px) {
    .header_with-opened-burger .header__burger-element {
      opacity: 0;
      transition: 0.5s; }
    .header_with-opened-burger::before {
      top: 16px;
      transform: rotate(38deg);
      transition: 0.4s; }
    .header_with-opened-burger::after {
      bottom: 16px;
      transform: rotate(-38deg);
      transition: 0.4s; } }
  .header__line {
    margin-left: 21px; }

.logo {
  height: 40px; }

.button {
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
  text-decoration: none;
  background-color: #fff;
  border: none;
  cursor: pointer; }
  .button:disabled {
    opacity: 0.5;
    transition: opacity 0.4s ease; }
  .button_bordered {
    position: relative;
    color: #bc9cff; }
    .button_bordered::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 2px;
      background: linear-gradient(to top, #8ba4f9, #bc9cff);
      border-radius: 26px;
      content: "";
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
              mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude; }
    .button_bordered:hover::before {
      opacity: 0.5;
      transition: opacity 0.4s ease; }
  .button_directed {
    position: relative;
    width: 100%;
    padding-right: 49px;
    padding-left: 45px;
    color: #fff;
    text-align: center;
    background: linear-gradient(to bottom, #bc9cff, #8ba4f9);
    border-radius: 22px;
    transition: opacity 0.4s ease; }
    .button_directed:hover {
      opacity: 0.5;
      transition: opacity 0.4s ease; }
    .button_directed::before {
      position: absolute;
      top: 10px;
      right: 10px;
      display: inline-block;
      font-weight: normal;
      font-size: 24px;
      font-family: "MaterialIcons-Regular";
      text-transform: none;
      background-color: #fff;
      -webkit-background-clip: text;
      content: "arrow_forward";
      -webkit-text-fill-color: transparent;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      -moz-osx-font-smoothing: grayscale; }
    @media (max-width: 420px) {
      .button_directed {
        padding-right: 15px;
        padding-left: 15px; }
        .button_directed::before, .button_directed::after {
          content: none; } }
  .button_solid {
    color: #fff;
    background: linear-gradient(to bottom, #bc9cff, #8ba4f9);
    border-radius: 22px; }
    .button_solid:hover {
      opacity: 0.5;
      transition: opacity 0.4s ease; }
  .button_texted {
    padding: 0; }
  .button_color_violent {
    width: auto;
    height: auto;
    color: #bc9cff; }
  .button_color_black {
    width: auto;
    height: auto;
    color: #1f2041;
    opacity: 0.5; }
  .button_size_small {
    padding-top: 9px;
    padding-bottom: 10px; }
  .button_size_big {
    padding-top: 14px;
    padding-bottom: 15px; }
  .button_size_long {
    padding: 14px 26px 15px 26px; }
  .button_hidden {
    display: none; }
  .button_hovered {
    opacity: 0.5;
    transition: opacity 0.4s ease; }

.nav-menu {
  margin-top: 2px; }
  .nav-menu__list {
    display: flex;
    align-items: baseline; }
    @media screen and (max-width: 992px) {
      .nav-menu__list {
        display: block;
        text-align: left; } }
  .nav-menu__checkmark {
    display: inline-block;
    font-size: 24px;
    font-family: "MaterialIcons-Regular";
    text-transform: none;
    vertical-align: middle;
    background-color: rgba(31, 32, 65, 0.75);
    -webkit-background-clip: text;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.4s transform;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale; }
    .nav-menu__checkmark_direction_up {
      transform: rotate(180deg); }
  .nav-menu__item {
    position: relative;
    margin-right: 20.7px; }
    @media screen and (max-width: 992px) {
      .nav-menu__item {
        margin: 40px 0 40px 20px; } }
  .nav-menu__link {
    cursor: pointer;
    opacity: 0.5; }
    .nav-menu__link_active {
      font-size: 14px;
      text-transform: none;
      opacity: 0.75; }
    .nav-menu__link_opened {
      font-size: 18px; }
  .nav-menu__sub-list {
    position: absolute;
    left: -5px;
    min-width: 100%;
    padding-left: 5px;
    background-color: white;
    opacity: 0;
    transition: opacity 0.4s ease; }
    @media screen and (max-width: 992px) {
      .nav-menu__sub-list {
        display: none; } }
    .nav-menu__sub-list_opened {
      z-index: 1;
      opacity: 1;
      transition: opacity 0.4s ease; }
  .nav-menu__sub-link {
    opacity: 0.5; }
  .nav-menu__sub-item {
    padding-top: 10px; }

.footer {
  flex: 0 0 auto; }

.social-nets__link {
  padding-left: 22px; }

.log-in-form {
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  padding: 29px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12); }
  @media screen and (max-width: 390px) {
    .log-in-form {
      padding: 15px; } }
  .log-in-form__title {
    margin-top: 8px;
    margin-bottom: 23px;
    letter-spacing: 1.3px; }
  .log-in-form__email {
    margin-bottom: 10px; }
  .log-in-form__submit {
    margin-top: 20px;
    margin-bottom: 42px; }
  .log-in-form__registration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px; }
  .log-in-form__text {
    color: #000; }
    @media screen and (max-width: 420px) {
      .log-in-form__text {
        max-width: 115px; } }

.input {
  position: relative;
  display: flex; }
  .input__heading {
    position: absolute;
    top: -20px;
    left: 1px; }
  .input__description {
    position: absolute;
    top: -20px;
    right: 0;
    color: rgba(31, 32, 65, 0.5);
    font-size: 12px;
    text-transform: uppercase; }
  .input__element {
    position: relative;
    flex-grow: 1;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding-right: 15px;
    padding-left: 14px;
    color: rgba(31, 32, 65, 0.75);
    line-height: 24px;
    letter-spacing: -0.2px;
    border-color: rgba(31, 32, 65, 0.25);
    border-width: 1px;
    border-radius: 4px;
    outline: none;
    transition: all 0.4s ease; }
    .input__element:focus, .input__element:hover {
      border-color: rgba(31, 32, 65, 0.5);
      transition: border-color 0.4s ease; }
    .input__element::-moz-placeholder {
      opacity: 0.25;
      -moz-transition: opacity 0.4s ease;
      transition: opacity 0.4s ease; }
    .input__element:-ms-input-placeholder {
      opacity: 0.25;
      -ms-transition: opacity 0.4s ease;
      transition: opacity 0.4s ease; }
    .input__element::placeholder {
      opacity: 0.25;
      transition: opacity 0.4s ease; }
    .input__element:hover::-moz-placeholder, .input__element:focus::-moz-placeholder {
      opacity: 0.75;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease; }
    .input__element:hover:-ms-input-placeholder, .input__element:focus:-ms-input-placeholder {
      opacity: 0.75;
      -ms-transition: all 0.4s ease;
      transition: all 0.4s ease; }
    .input__element:hover::placeholder, .input__element:focus::placeholder {
      opacity: 0.75;
      transition: all 0.4s ease; }
    .input__element_straightened {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0; }
    .input__element_border-color_bright {
      border-color: rgba(31, 32, 65, 0.5); }
    .input__element_hovered {
      border-color: rgba(31, 32, 65, 0.5); }
      .input__element_hovered::-moz-placeholder {
        opacity: 0.75;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      .input__element_hovered:-ms-input-placeholder {
        opacity: 0.75;
        -ms-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      .input__element_hovered::placeholder {
        opacity: 0.75;
        transition: all 0.4s ease; }
    .input__element_directed {
      padding-right: 45px; }
    @media screen and (max-width: 350px) {
      .input__element {
        padding-left: 10px; } }
  .input__date-dropdown {
    position: relative; }
    .input__date-dropdown::-moz-placeholder {
      color: #1f2041;
      opacity: 0.75;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease; }
    .input__date-dropdown:-ms-input-placeholder {
      color: #1f2041;
      opacity: 0.75;
      -ms-transition: all 0.4s ease;
      transition: all 0.4s ease; }
    .input__date-dropdown::placeholder {
      color: #1f2041;
      opacity: 0.75;
      transition: all 0.4s ease; }
  .input__checkmark {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 10px;
    font-size: 24px;
    font-family: "MaterialIcons-Regular";
    text-transform: none;
    background-color: rgba(31, 32, 65, 0.5);
    -webkit-background-clip: text;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    pointer-events: none; }
    @media screen and (max-width: 350px) {
      .input__checkmark {
        padding-right: 5px; } }
  .input__subscription {
    position: absolute;
    top: 12px;
    right: 0; }
  .input__default-button {
    position: absolute;
    top: -12px;
    right: 0;
    display: inline-block;
    padding: 10px;
    font-size: 24px;
    font-family: "MaterialIcons-Regular";
    text-transform: none;
    background-color: #bc9cff;
    -webkit-background-clip: text;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale; }

.mobile-footer {
  display: none;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(31, 32, 65, 0.05); }
  @media screen and (max-width: 768px) {
    .mobile-footer {
      display: block; } }
  .mobile-footer__content {
    margin: auto;
    padding: 120px 20px 96px;
    text-align: center; }
    @media screen and (max-width: 420px) {
      .mobile-footer__content {
        padding: 50px 0; } }
  .mobile-footer__text {
    padding: 20px 0 24px;
    opacity: 0.75; }
  .mobile-footer__social-nets {
    padding-right: 22px; }

.radio-buttons__name {
  margin-bottom: 17px; }

.radio-buttons__group {
  display: flex;
  justify-content: space-between;
  max-width: 220px; }

.radio-buttons__label {
  position: relative;
  display: inline-flex;
  outline: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.radio-buttons__content {
  display: flex;
  align-items: center;
  color: rgba(31, 32, 65, 0.5);
  cursor: pointer; }
  .radio-buttons__content::before {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 1px solid rgba(31, 32, 65, 0.25);
    border-radius: 50%;
    content: ""; }
  .radio-buttons__content::after {
    position: absolute;
    top: 50%;
    left: 10px;
    display: none;
    width: 12px;
    height: 12px;
    background: linear-gradient(180deg, #bc9cff 0%, #8ba4f9 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    content: ""; }

.radio-buttons__input {
  position: absolute;
  z-index: -1;
  width: 0;
  opacity: 0; }
  .radio-buttons__input:focus + .radio-buttons__content {
    color: #1f2041; }
    .radio-buttons__input:focus + .radio-buttons__content::before {
      box-shadow: 3px 3px 3px #bc9cff; }

.radio-buttons__input:checked + .radio-buttons__content {
  color: #1f2041; }
  .radio-buttons__input:checked + .radio-buttons__content::before {
    border-color: #bc9cff; }
  .radio-buttons__input:checked + .radio-buttons__content::after {
    display: block; }

.toggle {
  padding-bottom: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .toggle__name {
    margin-bottom: 19px;
    line-height: 6px; }
  .toggle__text {
    padding-left: 50px; }
  .toggle__input {
    position: relative;
    width: 0;
    margin: 0;
    vertical-align: top;
    cursor: pointer; }
    .toggle__input::before {
      display: inline-block;
      box-sizing: border-box;
      width: 40px;
      height: 20px;
      border: solid 1px rgba(31, 32, 65, 0.25);
      border-radius: 10px;
      content: ""; }
    .toggle__input::after {
      position: absolute;
      top: 4px;
      left: 5px;
      width: 12px;
      height: 12px;
      background-color: rgba(31, 32, 65, 0.25);
      border-radius: 10px;
      transition: 0.4s;
      content: ""; }
    .toggle__input:checked::before {
      border-color: #bc9cff; }
    .toggle__input:checked::after {
      background: linear-gradient(180deg, #bc9cff 0%, #8ba4f9 100%);
      transform: translateX(18px);
      transition: 0.4s; }
  .toggle__label {
    display: flex;
    color: rgba(31, 32, 65, 0.75);
    cursor: pointer; }

.desktop-footer {
  display: block;
  background-color: #f4f4f6;
  box-shadow: 0 10px 20px rgba(31, 32, 65, 0.05); }
  @media screen and (max-width: 768px) {
    .desktop-footer {
      display: none; } }
  .desktop-footer__container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px; }
  .desktop-footer__content {
    display: flex;
    margin-bottom: 1px;
    padding-bottom: 80px;
    background-color: white; }
  .desktop-footer__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white; }
  .desktop-footer__top {
    background-color: white; }
  .desktop-footer__bottom {
    background-color: white; }
  .desktop-footer__text {
    padding-top: 17px;
    line-height: 24px;
    opacity: 0.75; }
  .desktop-footer__logo {
    width: 22%;
    padding-top: 100px; }
  .desktop-footer__navigation {
    width: 13%;
    margin-left: 3.9%;
    padding-top: 104px; }
  .desktop-footer__about {
    width: 10%;
    margin-left: 4.2%;
    padding-top: 104px; }
  .desktop-footer__support {
    width: 13%;
    margin-left: 7.2%;
    padding-top: 104px; }
  .desktop-footer__subscription {
    width: 22.4%;
    margin-left: auto;
    padding-top: 104px; }
  .desktop-footer__title {
    padding-bottom: 21px; }
  .desktop-footer__subscription-title {
    padding-bottom: 18px; }
  .desktop-footer__item {
    padding-bottom: 20px; }
  .desktop-footer__subscription-item {
    padding-bottom: 22px;
    line-height: 24px;
    opacity: 0.75; }
  .desktop-footer__link {
    opacity: 0.5; }
  .desktop-footer__copyright {
    padding: 26px 0;
    opacity: 0.75; }
  .desktop-footer__social {
    margin-top: 1px;
    margin-right: 1px; }

.sign-in {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  min-height: 702px;
  background-image: url(../assets/images/registration.png);
  background-repeat: no-repeat;
  background-position: 48% 53%;
  background-size: cover; }
  .sign-in__form {
    display: flex;
    justify-content: center;
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
    padding: 20px; }
    @media screen and (max-width: 390px) {
      .sign-in__form {
        padding: 20px 10px; } }