:root {
  --card-width: 325px;
  --card-height: 492px;
  --card-transition-duration: 800ms;
  --card-transition-easing: ease;
}
body {
  background: #000;
}
.app {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -5;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  background: #000;
}
.app__bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0/50%);
  z-index: 1;
  opacity: 0.8;
}
.app__bg__image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
  width: 100%;
  height: 100%;
  transition: transform 1000ms ease, opacity 1000ms ease;
  overflow: hidden;
}
.app__bg__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app__bg__image.current--image {
  opacity: 1;
  --image-translate-offset: 0;
}
.app__bg__image.previous--image,
.app__bg__image.next--image {
  opacity: 0;
}
.app__bg__image.previous--image {
  --image-translate-offset: -25%;
}
.app__bg__image.next--image {
  --image-translate-offset: 25%;
}
.cardList {
  position: absolute;
  width: calc(3 * var(--card-width));
  height: auto;
}
.cardList__btn {
  --btn-size: 35px;
  width: 31px;
  height: 42px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  border: none;
}
.cardList__btn.btn--left {
  left: 20%;
  background: url(../img/promo/arrowbtn_l.png);
}
.cardList__btn.btn--right {
  right: 20%;
  background: url(../img/promo/arrowbtn_r.png);
}
.cardList__btn .icon {
  width: 100%;
  height: 100%;
}
.cardList__btn .icon svg {
  width: 100%;
  height: 100%;
}
.cardList .cards__wrapper {
 position: relative;
 width: 100%;
 perspective: 1000px;
 margin-bottom: 75px;
}
.card {
  --card-translateY-offset: 100vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--card-translateX-offset))
    translateY(var(--card-translateY-offset))
    rotateY(var(--card-rotation-offset)) scale(var(--card-scale-offset));
  display: inline-block;
  width: var(--card-width);
  height: var(--card-height);
  transition: transform var(--card-transition-duration)
    var(--card-transition-easing);
  user-select: none;
}
.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1;
  opacity: calc(1 - var(--opacity));
}
.card.current--card:before {
  content: "";
  background: url(../img/promo/card_frame.png);
  opacity: 1;
  transition: none;
  width: 318px;
  height: 505px;
  left: 50%;
  transform: translate(-50%, 0px);
}
.card__image {
  position: relative;
  width: 100%;
  height: 100%;
}
.card__image img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card.current--card {
  --current-card-rotation-offset: 0;
  --card-translateX-offset: 0;
  --card-rotation-offset: var(--current-card-rotation-offset);
  --card-scale-offset: 1;
}
.card.previous--card {
  --card-translateX-offset: calc(-1 * var(--card-width) * 0.94);
  --card-rotation-offset: -35deg;
}
.card.next--card {
  --card-translateX-offset: calc(var(--card-width) * 0.94);
  --card-rotation-offset: 35deg;
}
.next--card .online_container {
  display: none;
}
.previous--card .online_container {
  display: none;
}
.card.previous--card,
.card.next--card {
  --card-scale-offset: 0.9;
  --opacity: 0.5;
}
.infoList {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--card-height);
  pointer-events: none;
}
.infoList .info__wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  transform-style: preserve-3d;
}
.next--card .infoList:before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #5d5d5d;
}
.next--card .infoList:after {
  content: "";
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #5d5d5d;
}
.previous--card .infoList:before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #5d5d5d;
}
.previous--card .infoList:after {
  content: "";
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #5d5d5d;
}
.previous--card a {
  display: none;
}
.next--card a {
  display: none;
}
.info__link {
  padding: 10px 20px;
  border: 1px solid #eee7d1;
  width: 100px;
  display: block;
  border-radius: 5px;
  color: #fff;
  font-family: trajanpro3semibold;
  background: rgb(0 0 0/40%);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50px);
  text-align: center;
  z-index: 999;
}
.info__link:hover {
  background: rgb(255 255 255/10%);
  border: 1px solid #fff;
  color: #ffc070;
}
.info {
  margin-bottom: calc(var(--card-height) / 8);
  transform: translateZ(2rem);
  transition: transform var(--card-transition-duration)
    var(--card-transition-easing);
}
.info.current--info img {
  width: 235px;
}
.info.current--info {
  opacity: 1;
  display: block;
  text-align: center;
  margin-bottom: 110px;
}
.info.previous--info,
.info.next--info {
  opacity: 0;
  display: none;
}
.loading__wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000;
  z-index: 200;
}
.loading__wrapper .loader {
  position: relative;
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.loading__wrapper .loader span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;
  transform: scaleX(0);
  transform-origin: left;
}
.app:before {
  content: "";
  background: url(../img/promo/bg_decorate.png) top left;
  width: 40%;
  height: 291px;
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}
.app:after {
  content: "";
  background: url(../img/promo/bg_decorate_r.png) top right;
  width: 40%;
  height: 291px;
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}
#footer {
  background: linear-gradient(180deg, #e7e6e3, #dddbd6);
  position: absolute;
  margin-top: 0;
  width: 100%;
  bottom: 0;
}
.app_mobile {
  display: none;
}
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.popup-overlay .popup {
  background: url(../img/promo/modal_card.png);
  width: 547px;
  height: 317px;
  position: relative;
}
.popup_in {
  position: absolute;
  top: 80px;
  left: 260px;
  width: 47%;
  height: 62%;
}
.popup_in img {
  width: 200px;
}
.popup_in h3 {
  font-family: trajanpro3semibold;
  margin: 10px 0;
  font-size: 18px;
}
.popup_select {
  width: 16em;
  margin: 2.5em auto;
  color: #332f29;
  text-transform: uppercase;
  position: relative;
  transition: width 0.5s;
  will-change: width;
}
.popup_select .option {
  padding: 0.2em;
  cursor: pointer;
  font-family: trajanpro3semibold;
  font-size: 13px;
  background: linear-gradient(0deg, #84765b, white);
  border-radius: 5px;
  border: 2px solid #fff;
  line-height: 32px;
  position: relative;
  z-index: 1;
}
.popup_select .option:not(.active) {
  display: none;
  opacity: 0;
  transform: translateY(-50%);
}
.popup_select.visible {
  -webkit-animation: bounce 1s;
  animation: bounce 1s;
  width: 18em;
}
.popup_select.visible:before,
.popup_select.visible:after {
  border-color: #fff;
}
.popup_select.visible:before {
  opacity: 0;
}
.popup_select.visible:after {
  opacity: 1;
}
.popup_select.visible .option {
  color: #fff;
  display: block;
}
.popup_select.opacity .option {
  transform: translateZ(0);
  opacity: 1;
}
.popup_select.opacity .option:nth-child(0) {
  transition: opacity 0.5s 0s, transform 0.5s 0s;
}
.popup_select.opacity .option:nth-child(1) {
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
}
.popup_select.opacity .option:nth-child(2) {
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.popup_select.opacity .option:nth-child(3) {
  transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
}
.popup_select.opacity .option:nth-child(4) {
  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}
.popup_select.opacity .option:nth-child(5) {
  transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}
.popup_select.opacity .option:nth-child(6) {
  transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
}
.popup_select.opacity .option:nth-child(7) {
  transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
}
.popup_select.opacity .option:nth-child(8) {
  transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
}
.popup_select.opacity .option:nth-child(9) {
  transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
}
.popup_select.withBG .option {
  transition: background-color 0.1s;
}
.popup_select.withBG .option:not(.placeholder):hover {
  background-color: #5aafee;
}
.popup_select.withBG .option:not(.placeholder).active {
  background-color: #5aafee;
}
.popup_select:after,
.popup_select:before {
  content: "";
  position: absolute;
  top: 1.5em;
  right: 1em;
  width: 0.35em;
  height: 0.35em;
  border: 0.2em solid #fff;
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: opacity 0.2s;
  z-index: 2;
}
.popup_select:before {
  border-left: none;
  border-top: none;
  top: 1.2em;
}
.popup_select:after {
  border-right: none;
  border-bottom: none;
  opacity: 0;
}
.popup_select img {
  width: 27px;
  height: 22px;
  position: relative;
  top: 5px;
}
a.close,
a.submit {
  margin-top: 0;
  display: inline-block;
  color: #fff;
  background-color: rgb(149 137 114);
  border-radius: 5px;
  padding: 0.5rem 30px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  margin-right: 1rem;
  border: 1px solid #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -15px);
}
.online_container {
  border: none;
  color: #fff;
  margin-top: 15px;
  font-size: 12px;
}
@media screen and (max-width: 1180px) {
  #footer {
    margin-top: 0;
  }
  .app:after {
    display: none;
  }
  .app:before {
    display: none;
  }
  .cardList {
    margin-bottom: 120px;
  }
  :root {
    --card-width: 220px;
    --card-height: 333px;
    --card-transition-duration: 800ms;
    --card-transition-easing: ease;
  }
  .card.current--card:before {
    width: 220px;
    height: 350px;
    background-size: cover;
  }
  .info__link {
    padding: 6px 16px;
    width: 90px;
  }
  .info.current--info img {
    width: 190px;
  }
}
@media screen and (max-width: 720px) {
  .app_mobile {
    display: flex;
  }
  :root {
    --card-width: 300px;
    --card-height: 452px;
    --card-transition-duration: 800ms;
    --card-transition-easing: ease;
  }
  .card.current--card:before {
    width: 292px;
    height: 463px;
  }
  .info__link {
    padding: 8px 18px;
    width: 94px;
  }
  .info.current--info img {
    width: 200px;
  }
  .app {
    display: none;
  }
  .app_mobile {
    background: url(../img/promo/promo_bg1.png);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    padding-bottom: 45px;
  }
  .card {
    --card-translateY-offset: 0;
    position: relative;
    left: 0;
  }
  .card.current--card {
    --card-scale-offset: 1.1;
    margin: 30px 0;
    --card-translateX-offset: none;
    margin: 20px auto;
  }
  #footer {
    position: relative;
  }
}
.app__bg {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1s;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.cards__wrapper {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 2.5s;
}
@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}