/* Start:/wheel/style.css?175423441515597*/
body.wheel {
  background: linear-gradient(330deg, rgb(7, 4, 20) 41.245%, rgb(22, 16, 43) 55.76%, rgb(77, 26, 70) 83.898%, rgb(139, 74, 106) 114.573%);
  color: #fff;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

main.container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  height: 100%;
}

.wheel .header__navi li a {
  color: #fff;
}
@media (max-width: 768px) {
  .wheel .header__mobile-btn span {
    background: #fff;
  }
  .wheel .header__mobile-btn.active span {
    background: #000;
  }
}
.wheel .footer {
  display: none;
}
.wheel .breadcrumbs li, .wheel .breadcrumbs a {
  color: #fff;
}
.wheel .breadcrumbs li::after, .wheel .breadcrumbs a::after {
  background: #fff;
}
.wheel h1, .wheel .h1 {
  font-weight: 500;
  line-height: 102.02%;
  color: #F1FDC2;
  margin-top: 5vh;
  margin-bottom: 40px;
  z-index: 9;
}
.wheel h1-desc, .wheel .h1-desc {
  text-align: center;
  z-index: 9;
}
@media (max-width: 1366px) {
  .wheel h1, .wheel .h1 {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .wheel h1, .wheel .h1 {
    font-size: 24px !important;
    padding-inline: 30px;
    line-height: 1.2;
    margin-block: 2vh 4vh;
  }
  .wheel h1-desc, .wheel .h1-desc {
    line-height: 1.4;
  }
}
@media (max-height: 770px) {
  .wheel h1, .wheel .h1 {
    margin-block: 2vh;
  }
}
.wheel .modal .h1 {
  margin-top: 0;
}
.wheel.scrolled .header {
  color: #000;
}
.wheel.scrolled .header__navi li a {
  color: #000;
}
.wheel #dark_bg:after {
  opacity: 0.6;
}

.circle-container {
  position: relative;
  display: flex;
  justify-content: end;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: calc(100% + var(--margin-container) * 2);
  margin-left: calc(var(--margin-container) * -1);
  overflow: clip;
}

.circle {
  --size: 500px;
  position: relative;
  bottom: -530px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: #ddd;
  transition: all 0.25s ease;
  transform: rotate(0deg) translate3d(0, 0, 0);
  will-change: transform;
  -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
@media (max-width: 1399px) {
  .circle {
    --size: 380px;
    bottom: -400px;
  }
}
@media (max-width: 767px) {
  .circle {
    --size: 360px;
    bottom: -300px;
  }
}
@media (max-height: 770px) {
  .circle {
    --size: 320px;
    bottom: -330px;
  }
}

.card {
  --width: 368px;
  --height: 466px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: var(--width);
  height: var(--height);
  background: #212121;
  color: white;
  padding: 20px 40px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  -webkit-transform: translate(-50%, -50%) translate3d(0, 0, 0);
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  z-index: 1;
}
.card::after {
  --padding: 8px;
  content: "";
  position: absolute;
  inset: var(--padding);
  display: block;
  border-radius: inherit;
  border: 1px solid #F5DDA4;
  pointer-events: none;
}
.card .title {
  font-family: "Nunito";
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  background: linear-gradient(180deg, #F5DDA4 0%, #D6A56A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  pointer-events: none;
  z-index: 99;
}
.card .title + span {
  max-width: 30px;
  max-height: 30px;
  z-index: 99;
}
.card .ellipse {
  position: absolute;
}
.card .ellipse-1 {
  position: absolute;
  width: 256px;
  height: 256px;
  left: calc(50% - 128px);
  top: calc(50% - 128px);
  background: var(--color);
  opacity: 0.7;
  filter: blur(55.2px);
}
.card .ellipse-2 {
  position: absolute;
  width: 138px;
  height: 138px;
  left: calc(50% - 69px);
  top: calc(50% - 69px);
  background: #776BAA;
  opacity: 0.7;
  filter: blur(22.9px);
}
.card .logo {
  position: absolute;
}
.card .logo .svg {
  height: 100%;
  max-width: 100%;
}
.card .logo .svg path {
  fill: var(--color);
}
.card.active {
  cursor: pointer;
  z-index: 5;
}
.card.left-neighbor, .card.right-neighbor {
  z-index: 4;
}
@media (max-width: 1399px) {
  .card {
    width: calc(var(--width) * 0.8);
    height: calc(var(--height) * 0.8);
  }
  .card .title {
    font-size: 24px;
    line-height: 1.2;
    margin-top: -24%;
  }
}
@media (max-width: 767px) {
  .card {
    --width: 305px;
    --height: 386px;
  }
  .card .title {
    font-size: 20px;
  }
  .card .ellipse {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card .ellipse-1 {
    width: 178px;
    height: 178px;
  }
  .card .ellipse-2 {
    width: 96px;
    height: 96px;
  }
}
@media (max-height: 770px) {
  .card {
    padding: 20px;
  }
  .card .title {
    font-size: 18px;
  }
}

.controls {
  position: absolute;
  padding-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: url("/wheel/img/elipse-d.svg") no-repeat center;
  border-radius: 4px;
  color: #212121;
  font-family: "Nunito";
  font-weight: 600;
  font-size: 18px;
  width: 452px;
  height: 73px;
  scale: 1.2;
  z-index: 9;
}
.controls .btn {
  background: transparent;
  border: 0;
  align-self: auto;
  box-shadow: none;
  padding: 12px 15px;
}
.controls .btn#rotate-right {
  scale: -1 1;
}
@media (max-width: 767px) {
  .controls {
    flex-wrap: wrap;
    gap: 0;
    height: 90px;
    background-image: url("/wheel/img/elipse-m.svg");
    scale: 1;
  }
  .controls__text {
    width: 100%;
    text-align: center;
    order: 1;
  }
  .controls #rotate-left {
    order: 2;
  }
  .controls #rotate-right {
    order: 3;
  }
}
@media (max-height: 770px) {
  .controls {
    height: 80px;
    background-position: 50% 0;
  }
}

.modal.modal-shops {
  background: #212121;
  overflow: hidden;
}
.modal.modal-shops::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: 50%;
  left: 30%;
  transform: translate(-60%, -50%);
  background: var(--color);
  filter: blur(150px);
  pointer-events: none;
  z-index: -1;
}
.modal.modal-shops::after {
  --padding: 8px;
  content: "";
  position: absolute;
  inset: var(--padding);
  display: block;
  border-radius: inherit;
  border: 1px solid #F5DDA4;
  pointer-events: none;
}
.modal.modal-shops .shopList a:hover {
  background: #3b3939;
}
.modal.modal-shops .close:after, .modal.modal-shops .close:before {
  background: #F5DDA4;
}
@media (max-width: 767px) {
  .modal.modal-shops .close {
    top: 22px;
    right: 22px;
  }
}

.modal.modal-wheel {
  border-radius: 24px;
  overflow: hidden;
}
.modal.modal-wheel.modal-first {
  width: min(900px, 100% - 60px);
  background: linear-gradient(33.04deg, #8B4A6A 12.6%, #271434 92.56%);
  border-radius: 24px;
}
.modal.modal-wheel.modal-product {
  width: min(1300px, 100% - 60px);
  background: #212121;
}
.modal.modal-wheel.modal-product::after {
  --padding: 8px;
  content: "";
  position: absolute;
  inset: var(--padding);
  display: block;
  border-radius: inherit;
  border: 1px solid #F5DDA4;
  pointer-events: none;
}
.modal.modal-wheel.modal-product .h1 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 80px;
}
.modal.modal-wheel.modal-product .h1 img {
  max-width: 30px;
  max-height: 30px;
  z-index: 99;
}
.modal.modal-wheel.modal-product .title {
  font-family: "Nunito";
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  background: linear-gradient(180deg, #F5DDA4 0%, #D6A56A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  z-index: 99;
}
.modal.modal-wheel.modal-product .element-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.modal.modal-wheel.modal-product .element-logo .svg {
  height: 100%;
}
.modal.modal-wheel.modal-product .element-logo .svg path {
  fill: var(--color);
}
.modal.modal-wheel.modal-product .modal-content-main {
  --gap: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.modal.modal-wheel.modal-product .modal-content-main .left-col {
  position: relative;
  width: calc(45% - var(--gap));
  min-height: 150px;
}
.modal.modal-wheel.modal-product .modal-content-main .left-col::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  background: var(--color);
  filter: blur(150px);
  pointer-events: none;
}
.modal.modal-wheel.modal-product .modal-content-main .left-col img {
  position: relative;
  max-height: 320px;
  z-index: 8;
}
.modal.modal-wheel.modal-product .modal-content-main .right-col {
  width: calc(55% - var(--gap));
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 33px;
  color: #F5F5F5;
  z-index: 1;
}
.modal.modal-wheel.modal-product .modal-content-main .left-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal.modal-wheel.modal-product .modal-content-main .btn-row {
  flex: 1 1 100%;
  gap: 12px;
}
.modal.modal-wheel.modal-product .modal-content-main .btn-row a.btn {
  color: #251C3A;
  background: linear-gradient(109.54deg, #F9F9AC 29.95%, #EAFFD4 46.89%), #FCFDF7;
  box-shadow: none;
}
.modal.modal-wheel.modal-product .modal-content-main .btn-row span.btn {
  background: transparent;
  border-color: #F9F9AC;
  box-shadow: none;
}
.modal.modal-wheel.modal-product .modal-content-main .btn-row span.btn span {
  background: linear-gradient(109.54deg, #F9F9AC 29.95%, #EAFFD4 46.89%), #FCFDF7;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.modal.modal-wheel .h1,
.modal.modal-wheel .modal-content {
  color: #F5F5F5;
}
.modal.modal-wheel .close:after, .modal.modal-wheel .close:before {
  background: #F5F5F5;
}
.modal.modal-wheel ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  text-align: center;
  font-size: 24px;
  padding: 0;
}
.modal.modal-wheel .btn-row {
  display: flex;
  justify-content: center;
  margin-top: 65px;
}
@media (max-width: 1399px) {
  .modal.modal-wheel .btn-row {
    margin-top: 0;
  }
  .modal.modal-wheel.modal-product .h1 {
    margin-bottom: 30px;
  }
  .modal.modal-wheel.modal-product .title {
    font-size: 28px;
  }
  .modal.modal-wheel.modal-product .modal-content-main .right-col {
    font-size: 20px;
    line-height: 1.4;
  }
}
@media (max-width: 768px) {
  .modal.modal-wheel {
    max-height: 90vh;
  }
  .modal.modal-wheel.modal-first ul {
    font-size: 16px;
  }
  .modal.modal-wheel.modal-product .h1 {
    flex-direction: column;
    margin-bottom: 20px;
  }
  .modal.modal-wheel.modal-product .title {
    font-size: 20px;
  }
  .modal.modal-wheel.modal-product .title + img {
    display: none;
  }
  .modal.modal-wheel.modal-product .modal-content {
    padding-top: 20px;
  }
  .modal.modal-wheel.modal-product .modal-content-main {
    --gap: 30px;
  }
  .modal.modal-wheel.modal-product .modal-content-main .left-col {
    width: 100%;
  }
  .modal.modal-wheel.modal-product .modal-content-main .left-col::before {
    width: 232px;
    height: 232px;
    transform: translate(-50%, -50%);
  }
  .modal.modal-wheel.modal-product .modal-content-main .left-col img {
    max-height: 180px;
  }
  .modal.modal-wheel.modal-product .modal-content-main .right-col {
    width: 100%;
    font-size: 14px;
    line-height: 1.2;
  }
  .modal.modal-wheel.modal-product .modal-content-main .btn-row {
    flex-direction: column;
    margin-top: -10px;
  }
  .modal.modal-wheel.modal-product .modal-content-main .btn-row .btn {
    width: 100%;
    justify-content: center;
    border: 1px solid;
  }
}
@media (max-width: 576px) {
  .modal.modal-wheel.modal-product {
    width: min(1300px, 100% - 30px);
  }
  .modal.modal-wheel.modal-product .title {
    font-size: 18px;
  }
  .modal.modal-wheel.modal-product .modal-content-main {
    --gap: 20px;
  }
}

.elements-container {
  position: absolute;
  top: 5vh;
  left: 50%;
  width: 100%;
  height: calc(100% - 5vh);
  transform: translateX(-50%);
  pointer-events: none;
}
.elements-container .element {
  position: absolute;
  translate: 0 -500%;
  opacity: 0;
  transition: 0.5s ease;
}
.elements-container .element.active {
  translate: 0 0;
  opacity: 1;
}
.elements-container .element-1 {
  top: 3vh;
  left: 0;
}
.elements-container .element-2 {
  top: 15vh;
  left: 40vw;
  scale: 0.4;
  rotate: 40deg;
}
.elements-container .element-3 {
  bottom: 15vh;
  left: -5vw;
  scale: 0.6;
  rotate: 16deg;
}
.elements-container .element-4 {
  top: 15vh;
  right: 11vw;
  rotate: 8deg;
}
.elements-container .element-5 {
  bottom: 1vh;
  right: -5vw;
  scale: 0.6;
  rotate: -35deg;
}
.elements-container .element-6 {
  top: 25vh;
  right: 3vw;
}
.elements-container .element-7 {
  top: 30vh;
  left: 32vw;
  rotate: 250deg;
}
.elements-container .element-8 {
  bottom: 11vh;
  left: 3vw;
  scale: 0.6;
}
.elements-container .element-9 {
  top: 18vh;
  left: 22vw;
}
.elements-container .element-10 {
  top: 30vh;
  left: 5vw;
}
.elements-container .element-11 {
  top: 26vh;
  right: 33vw;
  scale: 0.8;
}
.elements-container .element-12 {
  top: 6vh;
  right: 5vw;
}
.elements-container .element-13 {
  top: 35vh;
  right: -4vw;
}
.elements-container .element-14 {
  top: 10vh;
  left: 10vw;
  scale: 0.6;
}
.elements-container .element-15 {
  top: 20vh;
  left: -1vw;
  scale: 0.4;
}
.elements-container .element-16 {
  top: 20vh;
  right: 24vw;
  scale: 0.7;
}
.elements-container .element-17 {
  bottom: 10vh;
  right: 2vw;
  scale: 0.7;
}
.elements-container .element-18 {
  bottom: 15vh;
  right: -10vw;
  scale: 0.4;
}
.elements-container .element-round {
  width: 20px;
  aspect-ratio: 1;
  background: #FFD040;
  border-radius: 50%;
}
@media (max-width: 1199px) {
  .elements-container {
    width: 100%;
  }
  .elements-container .element {
    scale: 0.8;
  }
}
@media (max-width: 768px) {
  .elements-container .element {
    scale: 0.4;
  }
  .elements-container .element-2, .elements-container .element-3, .elements-container .element-4, .elements-container .element-6, .elements-container .element-7, .elements-container .element-8, .elements-container .element-10, .elements-container .element-11, .elements-container .element-13, .elements-container .element-round {
    display: none;
  }
  .elements-container .element-9 {
    left: 18vw;
  }
  .elements-container .element-14 {
    left: 35vw;
  }
}
@media (max-width: 576px) {
  .elements-container .element-2, .elements-container .element-4, .elements-container .element-round {
    display: none;
  }
}

.interactive {
  position: absolute;
  transition: transform 0.5s ease;
}

.wheel .loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*# sourceMappingURL=style.css.map */

/* End */
/* /wheel/style.css?175423441515597 */