body {
  padding-top: 80px;
  --transition-multiplier: .1s;
}

.button {
  background-color: var(--secondary-background-color);
  background-position: center;
  color: var(--main-text-color);
  border-radius: 12px;
  padding: 8px 16px;
  transition-property: background-color, color, border;
  transition-duration: var(--transition-multiplier);
  transition-timing-function: linear;
  border-width: 1px;
  font-weight: 600;
  border-color: var(--secondary-background-color);
  border-style: solid;
  display: inline-block;
  user-select: none;
}

.button:hover {
  background-color: var(--secondary-background-hover-color);
  border-color: var(--secondary-background-hover-color);
}

.button:active {
  background-color: var(--active-background-color);
  border-color: var(--active-background-color);
}

.button:disabled {
  pointer-events: none;
  cursor: default;
  background-color: var(--light-background-active-color);
  color: var(--main-disabled-color);
  border-color: var(--light-background-active-color);
}

.button_primary {
  background-color: var(--main-accent-color);
  color: #ffffff;
  border-color: var(--main-accent-color);
}

.button_primary:hover {
  color: #ffffff;
  background-color: var(--seondary-accent-color);
  border-color: var(--seondary-accent-color);
}

.button_primary:active {
  color: #ffffff;
  background-color: var(--active-accent-color);
  border-color: var(--active-accent-color);
}

.button_secondary {
  border-color: var(--main-accent-color);
  color: var(--main-accent-color);
  background-color: var(--main-background-color);
}

.button_secondary:hover {
  border-color: var(--seondary-accent-color);
  color: var(--seondary-accent-color);
  background-color: var(--light-background-color);
}

.button_secondary:active {
  border-color: var(--active-accent-color);
  color: var(--active-accent-color);
  background-color: var(--light-background-active-color);
}

.button_link-blue {
  background-color: transparent;
  border-color: transparent;
  color: var(--link-text-color);
}

.button_link-blue:hover {
  color: var(--link-text-color);
  background-color: transparent;
  border-color: transparent;
  filter: grayscale(.2);
}

.button_link-blue:active {
  background-color: transparent;
  border-color: transparent;
  filter: grayscale(.3);
}

.title {
  font-weight: 600;
  font-size: 54px;
  line-height: 64px;
}

.download-button_macos > span {
  background-image: url("/images/icons/apple-logo-white.svg");
}

.download-button_windows > span {
  background-image: url("/images/icons/windows-logo-white.svg");
}

.download-button_ios > span {
  background-image: url("/images/icons/apple-logo-white.svg");
}

.download-button_android > span {
  background-image: url("/images/icons/google-play-logo-white.svg");
}

.download-button_blank > span {
  padding-left: 0;
}

.carousel__nav {
  display: none;
}

.carousel__viewport {
  margin: 0 -16px;
  max-width: unset;
  padding: 0 16px;
}

.show-popup {
  overflow: hidden;
}

@media screen and (max-width: 768px) and (min-width: 681px) {
  .title {
    font-size: 40px;
    line-height: 52px;
  }
}

@media screen and (max-width: 680px) {
  body {
    padding-top: 62px;
  }

  .container {
    padding: 0 16px;
  }

  .title {
    font-size: 32px;
    line-height: 44px;
  }

  .button_primary:hover {
    color: #ffffff;
    background-color: var(--main-accent-color);
    border-color: var(--main-accent-color);
  }

  .button_secondary:hover {
    border-color: var(--main-accent-color);
    color: var(--main-accent-color);
    background-color: var(--main-background-color);
  }

  .download-button_short > span {
    background-image: none;
    padding-left: 0;
  }
}