/*!***********************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!./scss/main.scss ***!
  \***********************************************************************************************************/
@charset "UTF-8";
/*
    Название переменной конкретного цвета генерируется через сервис: http://chir.ag/projects/name-that-color/.
    Значение цвета всегда указывается в HEX-формате в нижнем регистре (кроме исключительных случаев).
*/
/* This stylesheet generated by Transfonter (https://transfonter.org) on February 25, 2018 4:00 PM */
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: italic;
  src: url(../fonts/Roboto-MediumItalic.eot?c000f0984de5d20c8eab);
  src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url(../fonts/Roboto-MediumItalic.eot?c000f0984de5d20c8eab?#iefix) format("embedded-opentype"), url(../fonts/Roboto-MediumItalic.woff?9a91a0398c5cb21f0199) format("woff"), url(../fonts/Roboto-MediumItalic.ttf?ff1379d2f5bd26261cb2) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: italic;
  src: url(../fonts/Roboto-Italic.eot?7588d6373c3525bc74cd);
  src: local("Roboto Italic"), local("Roboto-Italic"), url(../fonts/Roboto-Italic.eot?7588d6373c3525bc74cd?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Italic.woff?0d0bf30e7eeb4f6e7fd5) format("woff"), url(../fonts/Roboto-Italic.ttf?4302c2e2c9e789c4c7ea) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: bold;
  font-style: normal;
  src: url(../fonts/Roboto-Bold.eot?6490694b37b0ee09bd91);
  src: local("Roboto Bold"), local("Roboto-Bold"), url(../fonts/Roboto-Bold.eot?6490694b37b0ee09bd91?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Bold.woff?3f2cbde6b72e8d05669f) format("woff"), url(../fonts/Roboto-Bold.ttf?5e9f6556d3c0bf6230f0) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  src: url(../fonts/Roboto-Regular.eot?30b57652c88c5dbd65de);
  src: local("Roboto"), local("Roboto-Regular"), url(../fonts/Roboto-Regular.eot?30b57652c88c5dbd65de?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Regular.woff?31012f9b3e3da44f87e8) format("woff"), url(../fonts/Roboto-Regular.ttf?25e40da956314b12d333) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  src: url(../fonts/Roboto-Medium.eot?f9f0c87146a33023da7e);
  src: local("Roboto Medium"), local("Roboto-Medium"), url(../fonts/Roboto-Medium.eot?f9f0c87146a33023da7e?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Medium.woff?b14ca2d2b289afceb0b0) format("woff"), url(../fonts/Roboto-Medium.ttf?ef677e217f2009c16854) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: bold;
  font-style: italic;
  src: url(../fonts/Roboto-BoldItalic.eot?e5f75ce1f7e72a64d436);
  src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"), url(../fonts/Roboto-BoldItalic.eot?e5f75ce1f7e72a64d436?#iefix) format("embedded-opentype"), url(../fonts/Roboto-BoldItalic.woff?997a1e8970d2b7e50fff) format("woff"), url(../fonts/Roboto-BoldItalic.ttf?1e46c5294501ef46e23b) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 100;
  font-style: italic;
  src: url(../fonts/Roboto-ThinItalic.eot?bc4d192a93ba33f68109);
  src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"), url(../fonts/Roboto-ThinItalic.eot?bc4d192a93ba33f68109?#iefix) format("embedded-opentype"), url(../fonts/Roboto-ThinItalic.woff?d5937d18c46d7ae260b6) format("woff"), url(../fonts/Roboto-ThinItalic.ttf?491dd1cc3dfda2b79d09) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: normal;
  src: url(../fonts/Roboto-Black.eot?d747b63eb41cdc64e3dd);
  src: local("Roboto Black"), local("Roboto-Black"), url(../fonts/Roboto-Black.eot?d747b63eb41cdc64e3dd?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Black.woff?88d7f1b3ca9a9494d8e3) format("woff"), url(../fonts/Roboto-Black.ttf?8e5479279b074720e15f) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: url(../fonts/Roboto-Light.eot?d592a653abb7a57fedd8);
  src: local("Roboto Light"), local("Roboto-Light"), url(../fonts/Roboto-Light.eot?d592a653abb7a57fedd8?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Light.woff?df0f59d80526acc6d0cd) format("woff"), url(../fonts/Roboto-Light.ttf?13d61ef8e609b548d9b5) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: italic;
  src: url(../fonts/Roboto-LightItalic.eot?0ad9ca04101ace1b39d1);
  src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url(../fonts/Roboto-LightItalic.eot?0ad9ca04101ace1b39d1?#iefix) format("embedded-opentype"), url(../fonts/Roboto-LightItalic.woff?3c494714cdd1de859813) format("woff"), url(../fonts/Roboto-LightItalic.ttf?ca7144f68f54653d3728) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 900;
  font-style: italic;
  src: url(../fonts/Roboto-BlackItalic.eot?32f9679ea3ede2ca14de);
  src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url(../fonts/Roboto-BlackItalic.eot?32f9679ea3ede2ca14de?#iefix) format("embedded-opentype"), url(../fonts/Roboto-BlackItalic.woff?3123587706218b4d8187) format("woff"), url(../fonts/Roboto-BlackItalic.ttf?508cb30d2090ab879d2f) format("truetype"); }

@font-face {
  font-family: 'Roboto';
  font-weight: 100;
  font-style: normal;
  src: url(../fonts/Roboto-Thin.eot?ae807ad4142f3eae2e0c);
  src: local("Roboto Thin"), local("Roboto-Thin"), url(../fonts/Roboto-Thin.eot?ae807ad4142f3eae2e0c?#iefix) format("embedded-opentype"), url(../fonts/Roboto-Thin.woff?674b1d2bd9d781457c17) format("woff"), url(../fonts/Roboto-Thin.ttf?7d12c80b1925091e4fec) format("truetype"); }

@font-face {
  font-family: 'DearType';
  font-weight: 700;
  font-style: normal;
  src: url(../fonts/DearType-LifehackSansBold.otf?fc5cce7302da7dde4832); }

@font-face {
  font-family: 'DearType';
  font-weight: 500;
  font-style: normal;
  src: url(../fonts/DearType-LifehackSansMedium.otf?481a95d268ca6c05fd21); }

.fade-enter {
  opacity: 0 !important; }

.fade-enter-active {
  transition: 0.3s !important; }

.fade-leave-active {
  opacity: 0 !important;
  transition: 0.3s !important; }

.fade-out-in-enter {
  opacity: 0 !important; }

.fade-out-in-enter-active {
  transition: 0.3s 0.3s !important; }

.fade-out-in-leave-active {
  opacity: 0 !important;
  transition: 0.3s !important; }
  .fade-out-in-leave-active.swiper-2 {
    height: 0 !important;
    overflow: hidden !important; }

.fade-up-enter {
  transform: translate3d(0, -0.5rem, 0) !important;
  opacity: 0 !important; }

.fade-up-enter-active {
  transition: 0.3s !important; }

.fade-up-leave-active {
  transform: translate3d(0, 0.5rem, 0) !important;
  opacity: 0 !important;
  transition: 0.3s !important; }

* {
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; }
  *::before, *::after {
    box-sizing: border-box; }

button,
input,
textarea {
  background: none;
  border: 0;
  border-radius: 0;
  outline: none; }

a {
  color: inherit;
  text-decoration: none; }

#app.active {
  font-size: 16px; }
  @media all and (max-width: 1350px) {
    #app.active {
      font-size: 14px; } }
  @media all and (max-width: 1300px) {
    #app.active {
      font-size: 13px; } }
  @media all and (max-width: 1024px) {
    #app.active {
      font-size: 11px; } }
  @media screen and (max-width: 900px), (orientation: portrait) {
    #app.active {
      font-size: 4.375vmin; } }
  @media screen and (width: 768px) {
    #app.active {
      font-size: 3vmin; } }

@media screen and (max-width: 1000px) {
  .forDesktop {
    display: none !important; } }

@media screen and (min-width: 1001px) {
  .forMobile_or_p {
    display: none !important; } }

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
img,
strike,
center,
dl,
dt,
dd,
ol,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
audio,
video {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

#app {
  overflow: hidden;
  font-family: Roboto, Arial;
  color: #fff;
  background: black; }
  #app .gradient {
    z-index: -2;
    pointer-events: none; }

header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 21px 0;
  background: #000;
  border-radius: 0px 0px 32px 32px; }

.chip {
  position: absolute;
  top: 24px;
  left: -47px;
  z-index: 1;
  width: 138px; }
  .chip.z-1 {
    z-index: -1; }
  .chip.chipx {
    z-index: 2; }

.container {
  width: 91%;
  max-width: 328px;
  margin: 0 auto; }

.intro {
  position: relative; }
  .intro__title {
    position: relative;
    z-index: 1;
    margin: 7px auto; }
    .intro__title img {
      position: absolute;
      top: 0;
      left: 0; }
  .intro__packs {
    position: relative;
    z-index: 1;
    height: 427px; }
    .intro__packs img {
      position: absolute; }
      .intro__packs img.pack1 {
        top: 105px;
        left: -133px;
        width: 286px; }
      .intro__packs img.pack2 {
        top: 99px;
        right: -127px;
        width: 299px; }
      .intro__packs img.gradient2 {
        display: none; }
      .intro__packs img.line1 {
        top: 280px;
        left: 18px;
        width: 102px; }
      .intro__packs img.line2 {
        top: 288px;
        right: 38px;
        width: 88px; }
    .intro__packs-arrow {
      position: absolute;
      top: 261px;
      left: 50%;
      width: 122px;
      transform: translateX(-50%); }
      .intro__packs-arrow img {
        width: 100%; }
      .intro__packs-arrow .arrows {
        top: 15px;
        left: 50%;
        width: 67%;
        transform: translateX(-50%); }
  .intro br {
    display: none; }
  .intro .gradient {
    position: absolute;
    top: -440px;
    left: calc(50% - 170px - 555px);
    z-index: 1 !important;
    width: 1060px;
    pointer-events: none; }
  .intro .gradient2 {
    top: -583px;
    right: calc(50% - 170px - 555px);
    left: auto; }
  .intro p {
    position: relative;
    z-index: 2;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 24px; }
  .intro-places {
    position: relative;
    height: 200px; }
    .intro-places img {
      position: absolute;
      z-index: 3; }
    .intro-places .arrow1 {
      top: -12px;
      left: -14px;
      width: 109px; }
    .intro-places .arrow2 {
      top: 94px;
      right: -14px;
      width: 109px; }
    .intro-places .in {
      position: absolute;
      z-index: 10;
      font-family: DearType;
      font-size: 40px;
      line-height: 32px;
      letter-spacing: 0.04em;
      text-shadow: 0px 0px 16px #FF00CC, 0px 0px 4px #FF00CC, 0px 0px 8px #FF00CC, 0px 0px 24px #FF00CC;
      transform: rotate(5deg); }
      .intro-places .in br {
        display: block; }
    .intro-places .in1 {
      top: 10px;
      right: calc(50% - 139px); }
    .intro-places .in2 {
      top: 102px;
      left: calc(50% - 162px);
      text-shadow: 0px 0px 16px #00D5FF, 0px 0px 4px #00D5FF, 0px 0px 8px #00D5FF, 0px 0px 24px #00D5FF;
      transform: rotate(-5deg); }
    .intro-places .chip {
      top: -195px;
      right: -89px;
      left: auto; }
    .intro-places .gradient {
      z-index: 0; }

.rules {
  position: relative; }
  .rules .chip {
    top: -52px;
    left: -54px;
    z-index: 2;
    width: 163px; }
    .rules .chip.chip2 {
      top: auto;
      bottom: -41px;
      left: -33px;
      z-index: 0;
      width: 140px; }
  .rules-content {
    position: relative;
    z-index: 1;
    height: 700px;
    padding-top: 54px; }
    .rules-content:after {
      content: '';
      position: absolute;
      top: -336px;
      right: -410px;
      z-index: -1;
      width: 960px;
      height: 149%;
      background: url(../img/r-bg.png) no-repeat top left/cover;
      pointer-events: none; }
  .rules__title {
    position: relative;
    margin-bottom: 44px;
    margin-left: 10px; }
    .rules__title .arrow {
      position: absolute;
      top: 33px;
      left: 255px; }
  .rules__rule {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700; }
    .rules__rule img {
      margin-top: -35px;
      margin-right: -9px; }
    .rules__rule span {
      color: #00D5FF; }
    .rules__rule p {
      margin-top: -3px; }

.mix {
  height: 650px;
  --packHeight: 160px; }
  .mix .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px; }
  .mix__title {
    position: relative;
    display: flex;
    justify-content: center;
    width: 79%;
    height: 110px;
    margin: 4px auto; }
    .mix__title img {
      position: absolute; }
    .mix__title-res {
      height: 50px; }
    .mix__title-result {
      position: relative;
      z-index: 1;
      width: calc(100% - 6px);
      margin-top: 14px;
      margin-left: 3px;
      font-family: DearType;
      font-size: 32px;
      line-height: 1;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1.3px;
      transform: rotate(-3deg); }
      .mix__title-result span {
        color: #00D5FF;
        word-spacing: -8px; }
      .mix__title-result.back {
        position: absolute;
        top: 0;
        left: 3px;
        z-index: -1;
        width: 100%;
        margin-top: 0;
        margin-left: 0;
        color: #9D1C83; }
        .mix__title-result.back span {
          color: #9D1C83; }
  .mix h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: center; }
  .mix__dnd-container {
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    z-index: 5;
    display: flex;
    align-items: center;
    width: 100vw;
    height: var(--packHeight);
    margin-right: 18px; }
    .mix__dnd-container.start {
      justify-content: flex-end; }
    .mix__dnd-container img {
      height: 100%; }
    .mix__dnd-container .smooth-dnd-container {
      width: 30%;
      height: 100%;
      margin: 0 10px;
      pointer-events: none; }
      .mix__dnd-container .smooth-dnd-container {
        height: 92%; }
      .mix__dnd-container .smooth-dnd-container:last-of-type {
        margin: 0 !important; }
      .mix__dnd-container .smooth-dnd-container[data-disabled="true"] {
        pointer-events: none; }
        .mix__dnd-container .smooth-dnd-container[data-disabled="true"] * {
          pointer-events: none; }
    .mix__dnd-container .smooth-dnd-draggable-wrapper {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      pointer-events: all; }
      .mix__dnd-container .smooth-dnd-draggable-wrapper.disabled {
        pointer-events: none; }
      .mix__dnd-container .smooth-dnd-draggable-wrapper.animated {
        pointer-events: none; }
      .mix__dnd-container .smooth-dnd-draggable-wrapper.smooth-dnd-ghost {
        z-index: 20;
        height: var(--packHeight) !important;
        transform: scale(1.1);
        opacity: 1;
        animation-name: target;
        animation-duration: 0.5s;
        animation-play-state: running;
        animation-fill-mode: forwards;
        pointer-events: all; }

@keyframes target {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.9); }
  100% {
    transform: scale(1.1); } }
  .mix .drop-container {
    position: absolute;
    top: 227px;
    left: 71px;
    z-index: 3;
    height: 125px !important;
    filter: drop-shadow(0px 0px 16px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 4px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 8px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 24px rgba(0, 213, 255, 0.6)); }
    .mix .drop-container > div {
      height: 125px !important;
      transform: none !important; }
    .mix .drop-container.disabled {
      pointer-events: none; }
    .mix .drop-container img {
      position: relative;
      z-index: 3;
      transform: none !important; }
    .mix .drop-container .question {
      position: absolute;
      top: 5%;
      left: 50%;
      z-index: -2;
      transform: translate(-50%, 0) !important; }
    .mix .drop-container .resImg {
      position: absolute;
      top: 8px;
      left: 10px;
      z-index: 1;
      width: 84px;
      transform: rotate(-10deg) !important; }
      .mix .drop-container .resImg img {
        width: 100%;
        object-fit: contain;
        filter: none; }
  .mix .drop-container2 {
    top: 205px;
    right: 70px;
    left: auto;
    filter: drop-shadow(0px 0px 16px rgba(255, 0, 204, 0.6)) drop-shadow(0px 0px 4px rgba(255, 0, 204, 0.6)) drop-shadow(0px 0px 8px rgba(255, 0, 204, 0.6)) drop-shadow(0px 0px 24px rgba(255, 0, 204, 0.6)); }
    .mix .drop-container2 .resImg {
      top: 9px;
      left: 11px;
      transform: rotate(12deg) !important; }
  .mix .drop-container3 {
    top: 256px;
    left: -5px;
    filter: none; }
    .mix .drop-container3 .resImg {
      z-index: 5; }
  .mix .drop-container4 {
    top: 238px;
    right: -5px;
    left: auto;
    filter: none; }
    .mix .drop-container4 .resImg {
      z-index: 5; }
  .mix .swiper {
    position: relative;
    left: calc((50% - 50vw) / 2);
    width: 100vw;
    margin-top: 15px;
    overflow: hidden;
    transform: none !important; }
    .mix .swiper:before, .mix .swiper:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0%;
      bottom: 0;
      z-index: 2;
      width: 80px;
      background: linear-gradient(270deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
      pointer-events: none; }
    .mix .swiper:before {
      right: auto;
      left: 0%;
      background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%); }
    .mix .swiper img {
      width: 100%;
      height: var(--packHeight);
      object-fit: contain;
      transform-origin: center center;
      transition: transform 0.2s, opacity 0.2s, filter 0.2s; }
    .mix .swiper .swiper-slide:not(.swiper-slide-active) img {
      transform: scale(0.92); }
    .mix .swiper .swiper-slide .disabled {
      filter: brightness(0.2); }
    .mix .swiper .swiper-button {
      position: absolute;
      top: 44%;
      left: 25px;
      z-index: 900;
      width: 40px;
      height: 62px;
      background: url(../img/arrow.svg) no-repeat right center/40%;
      transform: translateY(-50%);
      filter: drop-shadow(0px 0px 16px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 4px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 8px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 24px rgba(0, 213, 255, 0.6));
      transition: 0.2s; }
      .mix .swiper .swiper-button:hover {
        filter: drop-shadow(0px 0px 16px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 24px rgba(0, 213, 255, 0.6)); }
      .mix .swiper .swiper-button.swiper-button-prev {
        transform: translateY(-50%) rotate(-180deg); }
      .mix .swiper .swiper-button.swiper-button-next {
        right: 26px;
        left: auto; }
    .mix .swiper .swiper-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 1rem;
      margin-top: 12px; }
    .mix .swiper .swiper-pagination-bullet {
      width: 5px;
      height: 5px;
      margin: 0 8px;
      background: white;
      border-radius: 50%; }
      .mix .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
        box-shadow: 0px 0px 16px #00D5FF, 0px 0px 4px #00D5FF, 0px 0px 8px #00D5FF, 0px 0px 24px #00D5FF, inset 0px 0px 1px #00D5FF;
        transform: scale(1.3); }
  .mix #giftsSwiper .swiper-slide img {
    transform: scale(0.7); }
  .mix #giftsSwiper .swiper-slide.swiper-slide-active {
    position: relative;
    z-index: 2; }
    .mix #giftsSwiper .swiper-slide.swiper-slide-active img {
      position: relative;
      z-index: 2;
      transform: scale(1); }
  .mix .gradient {
    position: absolute;
    z-index: -1; }
  .mix .gradient1 {
    top: 231px;
    left: 50%;
    transform: translateX(-50%); }
  .mix .gradient2 {
    top: 76px;
    left: 50%;
    transform: translateX(-50%); }
  .mix .gradient4 {
    top: -37px;
    left: 50%;
    transform: translateX(-50%); }
  .mix__next {
    display: block;
    width: fit-content;
    margin: 165px auto 0; }
    .mix__next.first {
      margin-top: 310px; }
    .mix__next.second {
      margin-top: 15px; }
  .mix__twister {
    position: relative; }
    .mix__twister.animate {
      animation: 1.2s ease-in-out 0s normal none infinite running trambling-animation; }
    .mix__twister .chips-wrapper {
      position: absolute;
      bottom: 51%;
      left: 50%;
      z-index: 10;
      display: flex;
      justify-content: center;
      width: 180px;
      height: 140px;
      overflow: hidden;
      border-radius: 50%;
      transform: translateX(-50%);
      pointer-events: none; }
      .mix__twister .chips-wrapper .chips {
        animation-name: to-down;
        animation-duration: 1.5s;
        animation-delay: 1s;
        animation-fill-mode: forwards; }

@keyframes to-down {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(60%); } }
  .mix__back {
    position: absolute;
    right: 10px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
    text-decoration: underline;
    text-shadow: 0px 0px 4px #00D5FF, 0px 0px 20px #00D5FF, 0px 0px 9px #00D5FF; }
    .mix__back img {
      width: 60px;
      margin-bottom: 4px; }
    .mix__back span {
      position: relative;
      z-index: 3; }
  .mix__result .float {
    position: absolute; }
    .mix__result .float img {
      width: 100%; }
    .mix__result .float:nth-of-type(1) {
      bottom: 215px;
      left: 4px;
      width: 156px; }
      .mix__result .float:nth-of-type(1) img {
        transform: rotate(-14deg); }
    .mix__result .float:nth-of-type(2) {
      right: 2px;
      bottom: 220px;
      width: 162px; }
      .mix__result .float:nth-of-type(2) img {
        transform: rotate(10deg); }
    .mix__result .float:nth-of-type(3) {
      bottom: 172px;
      left: 77px;
      width: 120px; }
    .mix__result .float:nth-of-type(4) {
      right: 108px;
      bottom: 282px;
      width: 110px; }

.winners {
  position: relative;
  z-index: 1;
  padding-bottom: 67px; }
  .winners.empty:before {
    top: -65px;
    right: 50%;
    width: 120%;
    max-width: 450px;
    height: 300px;
    background: url(../img/bg-w_def.png) no-repeat center center/contain; }
  .winners.empty .arrow {
    bottom: 31px;
    left: calc(50% - 190px - 33px); }
  .winners.empty .arrow2 {
    right: calc(50% - 188px - 33px);
    bottom: 35px;
    left: auto; }
  .winners:before {
    content: '';
    position: absolute;
    top: -305px;
    right: calc(50% + 219px);
    z-index: -1;
    width: 866px;
    height: 776px;
    background: url(../img/bg-w.png) no-repeat top right/cover;
    transform: translateX(50%);
    pointer-events: none; }
  .winners__title {
    position: relative;
    width: 66%;
    margin: 42px auto 0; }
    .winners__title img {
      position: absolute; }
  .winners p {
    margin-bottom: 20px;
    padding-top: 25px;
    line-height: 1.5;
    text-align: center; }
  .winners .winner {
    margin-bottom: 8px;
    font-weight: 700;
    text-align: center;
    color: #00D5FF; }
  .winners .arrow {
    position: absolute;
    bottom: 92px;
    left: calc(50% - 160px - 33px);
    width: 120px; }
  .winners .arrow2 {
    right: calc(50% - 160px - 33px);
    bottom: 85px;
    left: auto; }
  .winners .chip1 {
    top: -100px;
    left: -40px;
    z-index: 1;
    width: 118px; }
  .winners .chip2 {
    top: -60px;
    right: -120px;
    left: auto;
    z-index: -2;
    width: 178px; }
  .winners .chip3 {
    top: 247px;
    left: -2px;
    z-index: -3;
    width: 148px; }

.ruffle {
  position: relative;
  z-index: 1; }
  .ruffle__title {
    height: 173px; }
    .ruffle__title img {
      position: absolute; }
  .ruffle__step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px; }
    .ruffle__step img {
      margin-top: -35px;
      margin-right: -8px;
      margin-left: -25px; }
    .ruffle__step p span {
      color: #00D5FF; }
  .ruffle .hash-tag {
    font-family: DearType;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0px 0px 16px #00D5FF, 0px 0px 4px #00D5FF, 0px 0px 8px #00D5FF, 0px 0px 24px #00D5FF; }
    .ruffle .hash-tag span {
      display: block;
      transform: rotate(-6deg); }
  .ruffle .hash-tag1 {
    will-change: transform; }
  .ruffle .hash-tag2 {
    margin: -6px 88px 20px;
    text-shadow: 0px 0px 16px #FF00CC, 0px 0px 4px #FF00CC, 0px 0px 8px #FF00CC, 0px 0px 24px #FF00CC;
    will-change: transform; }
  .ruffle p {
    line-height: 24px; }
  .ruffle__rules {
    display: block;
    width: fit-content;
    margin: 15px auto; }
  .ruffle .chip1 {
    top: 86px;
    right: -55px;
    left: auto; }
  .ruffle .chip2 {
    top: 160px;
    right: -38px;
    left: auto;
    width: 117px; }
  .ruffle .chip3 {
    top: 328px;
    left: -94px; }
  .ruffle .chip4 {
    top: 336px;
    right: -68px;
    left: auto;
    width: 160px; }
  .ruffle .gradient {
    position: absolute;
    min-width: 500px;
    min-height: 500px; }
  .ruffle .gradient1 {
    top: -260px;
    z-index: -1; }
  .ruffle .gradient2 {
    top: 110px;
    left: -480px;
    z-index: -1; }
  .ruffle .gradient3 {
    top: auto;
    right: -300px;
    bottom: -435px;
    left: auto;
    z-index: -1; }

.try {
  position: relative;
  z-index: 1; }
  .try__title {
    display: block;
    height: auto;
    margin: 59px auto 10px; }
    .try__title p {
      position: static !important;
      margin-bottom: 20px !important;
      transform: rotate(-3deg) !important; }
  .try__content {
    position: relative;
    z-index: 1; }
    .try__content:before {
      content: '';
      position: absolute;
      top: -65px;
      left: 50%;
      z-index: -1;
      width: 484px;
      height: 520px;
      background: url(../img/bg.svg) no-repeat top center/cover;
      transform: translateX(-50%); }
  .try__icons {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 288px;
    margin: 18px auto 26px; }
  .try p {
    margin-bottom: 56px;
    line-height: 24px;
    text-align: center; }
  .try .button {
    display: block;
    width: fit-content;
    margin: 10px auto 15px; }
  .try .chip1 {
    top: -111px;
    left: -51px;
    width: 100px; }
  .try .chip2 {
    top: -55px;
    left: -90px;
    width: 160px; }
  .try .chip3 {
    top: -73px;
    right: -54px;
    left: auto;
    width: 120px; }
  .try .chip4 {
    top: auto;
    right: -56px;
    bottom: 126px;
    left: auto;
    width: 130px; }
  .try .chip5 {
    top: auto;
    right: -63px;
    bottom: 36px;
    left: auto;
    width: 160px; }
  .try .chip6 {
    top: auto;
    bottom: -57px;
    left: -114px;
    width: 190px; }
  .try .gradient {
    position: absolute;
    min-width: 500px;
    min-height: 350px; }
  .try .gradient1 {
    bottom: -300px;
    left: -325px;
    z-index: -1; }
  .try .gradient2 {
    right: -470px;
    bottom: -410px;
    z-index: -1; }

footer {
  position: relative;
  z-index: 2;
  padding: 39px 9px 16px;
  background: #000;
  border-radius: 32px 32px 0 0; }
  footer .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
  footer img {
    margin-left: 12px; }
  footer a.rules-link {
    display: block;
    padding-top: 27px;
    font-size: 10px;
    text-decoration: underline; }
    footer a.rules-link:hover {
      text-decoration: none; }
  footer p {
    margin-top: 13px;
    font-size: 10px;
    line-height: 16px;
    opacity: 0.56; }

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6); }
  .modal__scroll {
    position: relative;
    display: flex;
    width: 100vw;
    overflow: auto; }
  .modal__closer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 106px; }
  .modal__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 450px;
    height: fit-content;
    margin: 50px auto 0;
    padding: 120px 0 148px;
    overflow: hidden;
    background: url(../img/bg.png) no-repeat center center/100%;
    /* &:before {
       content: '';
       position: absolute;
       top: -18px;
       left: 50%;
       z-index: -1;

       width: 100%;
       min-width: 350px;
       height: 600px;

       background: url("@/assets/img/modal/bg.png") no-repeat center center / contain;

       transform: translateX(-50%);
     }*/ }
    @media screen and (max-width: 340px) {
      .modal__content {
        padding: 60px 0 80px;
        background-size: 120%; } }
  .modal__title {
    margin-top: 50px; }
  .modal p {
    width: 290px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
    text-align: center; }
    .modal p:nth-of-type(2) {
      width: 250px; }
    .modal p span {
      font-weight: 700;
      color: #FF00CC; }
  .modal__button {
    margin: 20px auto; }
  .modal a {
    width: 190px;
    margin-top: -8px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    text-decoration: underline; }

.share-vk {
  display: none; }

canvas {
  position: relative;
  z-index: 5000;
  background: black; }

@media screen and (min-width: 400px) and (max-width: 1000px) {
  .mix .swiper {
    left: calc(50% - 200px);
    width: 400px; }
  .mix__dnd-container {
    left: calc(50% - 200px);
    width: 400px; } }

.twister-title {
  position: relative;
  width: 100%;
  min-height: 50px; }
  .twister-title.blue p:nth-of-type(1) {
    color: #009DBC; }
  .twister-title.fz56 p {
    font-size: 56px;
    line-height: 48px;
    letter-spacing: 1.5px; }
  .twister-title.fz48 p {
    font-size: 48px;
    line-height: 40px;
    letter-spacing: 1px; }
  .twister-title.rRotate p {
    transform: translateX(-50%) rotate(3deg); }
  .twister-title p {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    padding-top: 0;
    font-family: DearType;
    font-size: 64px;
    line-height: 66px;
    font-weight: 700;
    text-align: center;
    color: #9D1C83;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    transform: translateX(-50%) rotate(-3deg); }
    .twister-title p span {
      display: block; }
    .twister-title p:nth-of-type(1) {
      top: 2px;
      left: calc(50% + 4px); }
    .twister-title p:nth-of-type(2) {
      top: 4px;
      left: calc(50% + 3px);
      color: #000; }
    .twister-title p:nth-of-type(3) {
      top: 2px;
      left: calc(50%);
      color: #fff; }

.light-link {
  text-decoration: underline;
  text-shadow: 0px 0px 4px #00D5FF, 0px 0px 20px #00D5FF, 0px 0px 9px #00D5FF;
  transition: text-shadow 0.2s; }
  .light-link:hover {
    text-decoration: none;
    text-shadow: 0px 0px 2px #00D5FF, 0px 0px 12px #00D5FF; }

@media screen and (min-width: 1001px) {
  html {
    font-size: 16px; } }
  @media screen and (min-width: 1001px) and (max-width: 1550px) {
    html {
      font-size: 14px; } }
  @media screen and (min-width: 1001px) and (max-width: 1250px) {
    html {
      font-size: 13px; } }

@media screen and (min-width: 1001px) {
  #app {
    position: relative; }
    #app .gradients {
      position: absolute;
      top: 0;
      left: 50%;
      min-width: 100%;
      height: 100%;
      overflow: hidden;
      transform: translateX(-50%);
      pointer-events: none; }
      #app .gradients img {
        min-width: 100%; }
      #app .gradients .gradient1 {
        display: block;
        min-height: 81.25rem;
        margin-bottom: -80rem; }
      #app .gradients .gradient2 {
        min-width: 100%;
        min-height: 193.125rem;
        margin-bottom: -40rem; } }
      @media screen and (min-width: 1001px) and (min-width: 1921px) {
        #app .gradients .gradient2 {
          max-height: 193.5rem; } }

@media screen and (min-width: 1001px) {
      #app .gradients .gradient3 {
        min-width: 100%;
        min-height: 212.5rem;
        margin-bottom: -100rem; }
      #app .gradients .gradient4 {
        min-width: 100%;
        min-height: 137.5rem;
        margin-bottom: -70rem; }
      #app .gradients .gradient5 {
        min-width: 100%;
        min-height: 5rem; }
    #app .chip {
      display: none; }
    #app .chips {
      position: relative;
      pointer-events: none; }
      #app .chips picture {
        position: absolute; }
      #app .chips__chip {
        position: absolute; }
      #app .chips .chip1 {
        top: -1.3rem;
        left: calc(50% - 52.6rem); }
      #app .chips .chip2 {
        top: -8.7rem;
        right: 0.6rem; }
      #app .chips .chip3 {
        top: 18.3rem;
        right: 0; }
      #app .chips .chip4 {
        top: 21rem;
        left: -20rem; }
      #app .chips .chip5 {
        top: 53.9rem;
        right: calc(50% - 55rem); }
      #app .chips .chip6 {
        top: 84.9rem;
        right: -21rem; }
      #app .chips .chip7 {
        top: 93rem;
        left: calc(50% - 57rem);
        z-index: 20; }
      #app .chips .chip8 {
        top: 116rem;
        left: -6rem; }
      #app .chips .chip9 {
        top: 118.4rem;
        right: 6rem; }
      #app .chips .chip10 {
        top: 165.4rem;
        left: calc(50% - 69rem); }
      #app .chips .chip11 {
        top: 182.4rem;
        left: calc(50% - 70rem);
        z-index: 90; }
      #app .chips .chip12 {
        top: 204.4rem;
        left: calc(50% - 54rem); }
      #app .chips .chip13 {
        top: 232.4rem;
        left: calc(50% - 50rem); }
      #app .chips .chip14 {
        top: 255.4rem;
        right: -16rem;
        z-index: 20; }
      #app .chips .chip15 {
        top: 280.4rem;
        left: calc(50% - 51rem); }
      #app .chips .chip16 {
        top: 297.4rem;
        right: -8rem; }
      #app .chips .chip17 {
        top: 322.7rem;
        left: -25rem;
        z-index: 2; }
      #app .chips .chip18 {
        top: 362.7rem;
        left: calc(50% - 56rem); }
      #app .chips .chip19 {
        top: 348.7rem;
        left: calc(50% - 43rem); }
      #app .chips .chip20 {
        top: 336.7rem;
        right: -21rem;
        z-index: 10; }
    #app .gifts {
      pointer-events: none; }
      #app .gifts .gift {
        position: absolute;
        z-index: 20; }
        #app .gifts .gift img {
          animation: 2s ease-in-out 0s normal none infinite running float; }
        #app .gifts .gift:nth-of-type(1) {
          animation-delay: 0.33333s; }
        #app .gifts .gift:nth-of-type(2) {
          animation-delay: 0.66667s; }
        #app .gifts .gift:nth-of-type(3) {
          animation-delay: 1s; }
        #app .gifts .gift:nth-of-type(4) {
          animation-delay: 1.33333s; }
        #app .gifts .gift:nth-of-type(5) {
          animation-delay: 1.66667s; }
        #app .gifts .gift:nth-of-type(6) {
          animation-delay: 2s; }
        #app .gifts .gift:nth-of-type(7) {
          animation-delay: 2.33333s; }
        #app .gifts .gift:nth-of-type(8) {
          animation-delay: 2.66667s; }
        #app .gifts .gift:nth-of-type(9) {
          animation-delay: 3s; }
        #app .gifts .gift img {
          width: 100%; }
      #app .gifts .gift1 {
        top: 42rem;
        right: -4rem;
        width: 21rem; }
      #app .gifts .gift2 {
        top: 73.8rem;
        left: -4rem;
        width: 21rem;
        transform: rotate(45deg); }
      #app .gifts .gift3 {
        top: 148.4rem;
        right: -4.5rem;
        z-index: 2;
        width: 19rem;
        transform: rotate(28deg); }
      #app .gifts .gift4 {
        top: 197rem;
        right: 9rem;
        z-index: 1;
        width: 17.4rem;
        transform: rotate(-24deg); }
      #app .gifts .gift5 {
        top: 226.5rem;
        left: 7.8rem;
        width: 25.4rem;
        transform: rotate(-1deg); }
      #app .gifts .gift6 {
        top: 278.5rem;
        left: -4rem;
        z-index: 20;
        width: 24rem;
        transform: rotate(25deg); }
      #app .gifts .gift7 {
        top: 307.5rem;
        right: 6rem;
        width: 24.4rem;
        transform: rotate(-25deg); }
      #app .gifts .gift8 {
        bottom: 66.5rem;
        left: 1rem;
        width: 24.4rem;
        transform: rotate(-20deg); }
      #app .gifts .gift9 {
        bottom: 8.6rem;
        left: 8.2rem;
        width: 27.4rem;
        transform: rotate(-20deg); }
  header {
    padding: 24px 0; }
    header img {
      height: 4.5rem; }
  .container {
    max-width: 38.75rem; }
  .intro__title {
    margin: 2.25rem auto; }
    .intro__title img {
      width: 38.375rem; }
  .intro__packs {
    height: 26.5625rem;
    margin-bottom: 14.5rem; }
    .intro__packs-arrow {
      top: 24.0125rem;
      left: calc(50% + 1.3rem);
      width: 15.4rem;
      cursor: pointer;
      transition: transform 0.2s; }
      .intro__packs-arrow:hover {
        animation-play-state: paused; }
      .intro__packs-arrow .arrows {
        top: 1.7rem; }
    .intro__packs img.pack1 {
      top: 10rem;
      left: -24.4rem;
      width: 40.6rem;
      transform: rotate(-7deg); }
    .intro__packs img.pack2 {
      top: 8rem;
      right: -24rem;
      width: 39.9rem;
      transform: rotate(0deg); }
    .intro__packs img.line1 {
      top: 14.7rem;
      left: -20.9rem;
      width: 35.6rem; }
    .intro__packs img.line2 {
      top: 22.7rem;
      right: -22.4rem;
      width: 35.1rem; }
  .intro p {
    margin-bottom: 1.9rem;
    padding: 0 4.4rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 300;
    text-align: center; }
    .intro p.second {
      padding: 0; }
    .intro p br {
      display: block; }
    .intro p span {
      font-weight: 700; }
  .intro-places .arrow1 {
    top: -2.4rem;
    left: -13.5rem;
    width: 16.3rem;
    cursor: pointer; }
  .intro-places .in {
    font-size: 6.25rem;
    line-height: 5rem;
    cursor: pointer; }
  .intro-places .in1 {
    top: 2.3rem;
    right: 4.6rem; }
  .intro-places .arrow2 {
    top: 15rem;
    right: -10.3rem;
    width: 16.5rem;
    cursor: pointer; }
  .intro-places .in2 {
    top: 13.8rem;
    left: 1.2rem;
    width: 50rem; }
  .rules {
    margin-top: 11rem;
    padding-top: 5rem; }
    .rules .container {
      max-width: 70rem; }
    .rules-content {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      height: 48rem;
      padding-top: 16rem; }
      .rules-content:after {
        top: -29rem;
        right: auto;
        left: 50%;
        width: 83rem;
        height: 53rem;
        background-image: url(../img/r-bg_d.png);
        background-position: center center;
        background-size: contain;
        transform: translate(-50%, 50%); }
    .rules__title {
      position: absolute;
      top: 5rem;
      right: calc(50% + 1.8rem);
      width: 34.2rem;
      transform: translateX(50%); }
      .rules__title img {
        width: 100%; }
        .rules__title img.arrow {
          top: -2.6rem;
          right: 2rem;
          left: auto;
          width: 11.2rem; }
        .rules__title img.arrow2 {
          top: 15.4rem;
          right: auto;
          left: 2rem;
          transform: rotate(-198deg);
          transform-origin: bottom center; }
    .rules__rule p {
      padding-top: 0.3rem;
      font-size: 1.5rem;
      line-height: 1.4; }
    .rules__rule img {
      margin-top: -2rem;
      margin-right: 0.1rem; }
    .rules__rule:nth-of-type(3) {
      margin-left: 11.5rem; }
    .rules__rule:nth-of-type(4) {
      margin-top: -3.8rem;
      margin-left: 10.4rem; }
    .rules__rule:nth-of-type(5) {
      margin-top: -3.8rem;
      margin-left: 4.5rem; }
    .rules__rule:nth-of-type(6) {
      margin-top: -4rem;
      margin-right: 12rem;
      margin-left: 20.3rem; }
  .mix {
    position: relative;
    z-index: 9999;
    min-height: 75rem;
    padding-top: 3.6rem; }
    .mix .container {
      max-width: 72rem; }
    .mix h3 {
      margin-top: 2.2rem;
      font-size: 1.5rem; }
    .mix__title-result {
      width: 55%;
      margin: 1.3rem auto;
      font-size: 4.5rem;
      line-height: 0.9; }
    .mix .swiper {
      left: 0;
      width: 100%;
      margin-top: 2.8rem; }
      .mix .swiper:before, .mix .swiper:after {
        top: 1.5rem;
        bottom: 5rem;
        width: 18rem; }
      .mix .swiper:before {
        left: 0; }
      .mix .swiper:after {
        right: 0; }
      .mix .swiper img {
        height: 18rem; }
      .mix .swiper .swiper-slide img {
        transform: scale(0.6) !important; }
      .mix .swiper .swiper-slide.swiper-slide-prev img, .mix .swiper .swiper-slide.swiper-slide-next img {
        transform: translateX(1.7rem) scale(0.9) !important; }
      .mix .swiper .swiper-slide.swiper-slide-prev img {
        transform: translateX(-1.7rem) scale(0.9) !important; }
      .mix .swiper .swiper-slide.swiper-slide-active img {
        transform: none !important; }
      .mix .swiper .swiper-button {
        top: 39%;
        left: 2.5rem;
        z-index: 52222000;
        width: 3rem;
        height: 5.5rem;
        cursor: pointer; }
        .mix .swiper .swiper-button.swiper-button-next {
          right: 2.5rem; }
      .mix .swiper .swiper-pagination {
        height: 5rem;
        margin-top: 1.8rem; }
      .mix .swiper .swiper-pagination-bullet {
        width: 9px;
        height: 9px;
        margin: 0 18px;
        cursor: pointer; }
        .mix .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
          transform: scale(1.8); }
    .mix #giftsSwiper .swiper-slide {
      margin: 2rem 0 -2rem; }
    .mix__dnd-container {
      left: calc(50% - 36rem);
      max-width: 72rem;
      height: 18.8rem; }
      .mix__dnd-container.start .smooth-dnd-container {
        margin: 0 !important; }
      .mix__dnd-container .smooth-dnd-container {
        width: 20%; }
        .mix__dnd-container .smooth-dnd-container .smooth-dnd-draggable-wrapper {
          transform: scale(0.6); }
        .mix__dnd-container .smooth-dnd-container:nth-of-type(2) .smooth-dnd-draggable-wrapper, .mix__dnd-container .smooth-dnd-container:nth-of-type(4) .smooth-dnd-draggable-wrapper {
          transform: scale(0.9); }
        .mix__dnd-container .smooth-dnd-container:nth-of-type(3) .smooth-dnd-draggable-wrapper {
          transform: scale(1); }
      .mix__dnd-container .smooth-dnd-draggable-wrapper {
        cursor: grab; }
        .mix__dnd-container .smooth-dnd-draggable-wrapper.smooth-dnd-ghost {
          height: 18.8rem !important;
          transform: scale(0.9); }
    .mix .drop-container {
      top: 29.6rem;
      left: calc(50% - 12.1rem); }
      .mix .drop-container > div {
        width: 11.8rem;
        height: 15rem !important; }
        .mix .drop-container > div img:nth-of-type(1) {
          width: 100%; }
      .mix .drop-container .question {
        top: 29%;
        width: 6rem; }
      .mix .drop-container .resImg {
        top: 2.1rem;
        left: 2rem;
        width: 7.7rem; }
      .mix .drop-container.drop-container2 {
        top: 27.6rem;
        right: calc(50% - 12.1rem);
        left: auto; }
        .mix .drop-container.drop-container2 .resImg {
          top: 2.1rem;
          left: 2rem;
          width: 7.7rem; }
      .mix .drop-container.drop-container3 {
        top: 31.9rem;
        left: calc(50% - 24.1rem);
        width: 14rem; }
        .mix .drop-container.drop-container3 img {
          width: 100%; }
        .mix .drop-container.drop-container3 .resImg {
          top: 2.1rem;
          left: 2rem;
          width: 10rem; }
      .mix .drop-container.drop-container4 {
        top: 28.9rem;
        left: calc(50% + 13.1rem);
        width: 14rem; }
        .mix .drop-container.drop-container4 img {
          width: 100%; }
        .mix .drop-container.drop-container4 .resImg {
          top: 2.1rem;
          left: 2rem;
          width: 10rem; }
    .mix__next {
      width: 18rem;
      margin: 19.5rem auto 0;
      cursor: pointer; }
      .mix__next img {
        width: 100%; }
      .mix__next.first {
        margin-top: 27.3rem; }
    .mix__twister {
      width: 16rem;
      margin: 16.5rem auto 0; }
      .mix__twister .chips-wrapper {
        width: 18rem;
        height: 14rem; }
        .mix__twister .chips-wrapper img {
          width: initial; }
    .mix__back {
      top: 2rem;
      right: calc(50% - 36rem);
      bottom: auto;
      z-index: 999999;
      font-size: 18px;
      cursor: pointer; }
      .mix__back span {
        transition: 0.2s; }
      .mix__back:hover .light {
        box-shadow: inset 0px 0px 0px #00D5FF;
        filter: drop-shadow(0px 0px 16px #00D5FF) drop-shadow(0px 0px 24px #00D5FF); }
      .mix__back:hover span {
        text-decoration: none;
        text-shadow: 0px 0px 2px #00D5FF, 0px 0px 15px #00D5FF, 0px 0px 9px #00D5FF; }
      .mix__back img {
        width: 4rem;
        margin-bottom: 0.5rem;
        margin-left: -0.4rem; }
    .mix #giftsSwiper {
      /*& + .mix__dnd-container {
        max-width: 69rem;
      }*/ }
      .mix #giftsSwiper .swiper-slide.swiper-slide-next img {
        transform: translateX(2.5rem) scale(0.9) !important; }
      .mix #giftsSwiper .swiper-slide.swiper-slide-prev img {
        transform: translateX(-2.5rem) scale(0.9) !important; }
      .mix #giftsSwiper .swiper-slide.swiper-slide-active img {
        transform: scale(1.15) !important; }
    .mix .result-container .mix__next {
      width: 25rem; }
    .mix__result .float {
      position: absolute;
      z-index: 99;
      pointer-events: none; }
      .mix__result .float img {
        position: static;
        width: 100%; }
      .mix__result .float:nth-of-type(1) {
        bottom: 4.2rem;
        left: -12.5rem;
        width: 33rem; }
        .mix__result .float:nth-of-type(1) img {
          transform: rotate(-13deg); }
      .mix__result .float:nth-of-type(2) {
        right: -13.2rem;
        bottom: 4.2rem;
        width: 33rem; }
        .mix__result .float:nth-of-type(2) img {
          transform: rotate(9deg); }
      .mix__result .float:nth-of-type(3) {
        bottom: 15.8rem;
        left: calc(50% - 26.2rem);
        width: 23rem;
        max-height: 23.75rem; }
        .mix__result .float:nth-of-type(3) img {
          transform: rotate(19deg); }
      .mix__result .float:nth-of-type(4) {
        right: calc(50% - 28.2rem);
        bottom: 17.8rem;
        width: 24rem;
        max-height: 23.75rem; }
        .mix__result .float:nth-of-type(4) img {
          transform: rotate(14deg); }
  .winners:before {
    top: -5.7rem;
    right: 50%;
    width: 49rem;
    height: 43rem;
    background-image: url(../img/bg-w_d.png);
    background-position: center center;
    background-size: contain;
    transform: translateX(50%); }
  .winners.empty:before {
    top: -6rem;
    max-width: 50rem;
    height: 30rem; }
  .winners.empty .arrow {
    left: calc(50% - 23rem); }
    .winners.empty .arrow.arrow2 {
      right: calc(50% - 22rem);
      bottom: 0;
      left: auto; }
  .winners__title {
    width: 74%;
    margin: 83px auto 0; }
    .winners__title img {
      width: 100%; }
  .winners p {
    width: 30rem;
    margin: 0 auto 2.8rem;
    padding-top: 2rem;
    font-size: 1.5rem;
    line-height: 1.3; }
  .winners .winner {
    margin-bottom: 1.5rem;
    font-size: 1.5rem; }
  .winners .arrow {
    bottom: 5rem;
    left: calc(50% - 23rem);
    width: 13rem; }
    .winners .arrow.arrow2 {
      right: calc(50% - 22rem);
      bottom: 5rem;
      left: auto;
      width: 13rem; }
  .ruffle {
    padding-top: 2.5rem; }
    .ruffle .container {
      max-width: 54rem; }
    .ruffle__title {
      position: relative;
      width: 50rem;
      height: 18rem !important;
      margin: 0 auto; }
      .ruffle__title img {
        width: 100%; }
    .ruffle__step {
      max-width: 37rem;
      margin: 0 auto 2.6rem;
      font-size: 1.5rem; }
      .ruffle__step p {
        margin-top: -0.6rem;
        line-height: 1.3; }
        .ruffle__step p span {
          font-weight: 700; }
    .ruffle .hash-tag {
      font-size: 7.5rem;
      text-align: center; }
    .ruffle .hash-tag1 {
      margin-top: -0.4rem;
      padding-right: 3.7rem; }
    .ruffle .hash-tag2 {
      margin: -1rem 0;
      padding-left: 4rem; }
    .ruffle .container > p {
      margin: 3.8rem -1rem 0;
      font-size: 1.75rem;
      line-height: 2.25rem;
      text-align: center; }
    .ruffle__rules {
      width: 21rem;
      margin: 2.5rem auto 11rem; }
      .ruffle__rules img {
        width: 100%; }
  .try {
    padding-bottom: 1.5rem; }
    .try .container {
      max-width: 54rem; }
    .try__title {
      margin: 8.7rem auto 1rem; }
    .try__content:before {
      top: -8.5rem;
      left: 50%;
      width: 88rem;
      height: 51rem;
      background-image: url(../img/bg_d.svg);
      background-size: contain; }
    .try__icons {
      width: 43rem;
      margin: 3.2rem auto 26px; }
      .try__icons img {
        height: 11.9rem; }
    .try p {
      margin: 3rem auto 7rem;
      font-size: 1.5rem;
      line-height: 2rem; }
    .try .button {
      width: 21rem;
      margin: 2rem auto;
      cursor: pointer; }
  footer {
    padding: 1.5rem;
    border-radius: 1.0625rem 1.0625rem 0 0; }
    footer .container {
      max-width: 78.3rem; }
    footer a.rules-link {
      font-size: 0.75rem; }
    footer p {
      width: 26rem;
      margin-top: 0.6rem;
      font-size: 0.75rem; }
    footer .social {
      margin-top: 1.9rem;
      margin-bottom: -2.4rem; }
      footer .social a {
        margin-right: -0.8rem;
        margin-left: 1rem;
        transition: 0.2s; }
        footer .social a:hover {
          filter: drop-shadow(0px 0px 16px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 4px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 8px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 24px rgba(0, 213, 255, 0.6)); }
  .modal__scroll {
    display: flex;
    justify-content: center;
    align-items: center; }
  .modal__content {
    max-width: 60rem;
    margin: 0 auto;
    padding: 5rem 0;
    background-image: url(../img/bg_d.png);
    background-position: center center;
    background-size: contain;
    /*&:before {
        top: -5.4rem;
        left: 50%;

        width: 60rem;
        height: 50rem;
      }*/ }
    .modal__content p {
      width: 100%;
      margin-top: 0.2rem;
      font-size: 1.5rem;
      line-height: 1.3; }
      .modal__content p:nth-of-type(2) {
        width: 100%;
        margin-top: 0.7rem; }
  .modal__closer {
    top: calc(50% - 24rem);
    right: calc(50% - 25.4rem);
    cursor: pointer;
    filter: drop-shadow(0px 0px 16px #00D5FF) drop-shadow(0px 0px 4px #00D5FF) drop-shadow(0px 0px 8px #00D5FF) drop-shadow(0px 0px 24px #00D5FF);
    transition: 0.2s; }
    .modal__closer:hover {
      filter: drop-shadow(0px 0px 16px #00D5FF) drop-shadow(0px 0px 24px #00D5FF); }
  .modal__title {
    width: 28rem;
    margin-top: 0; }
  .modal__button {
    width: 19rem;
    margin: 1.4rem auto;
    cursor: pointer; }
  .modal a {
    width: fit-content;
    margin-top: 0;
    font-size: 1.125rem; }
  .twister-title {
    width: 100%;
    height: 7rem; }
    .twister-title.fz48 {
      height: auto; }
      .twister-title.fz48 p {
        font-size: 5.625rem !important;
        line-height: 4.5rem !important; }
    .twister-title p {
      position: absolute;
      top: 0;
      left: 50%;
      width: 100%;
      margin-bottom: 0;
      padding: 0;
      font-family: DearType;
      font-size: 7.5rem !important;
      line-height: 6.5rem !important;
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.3125rem;
      transform: translateX(-50%) rotate(-2.1deg); }
    .twister-title img {
      width: 100%; } }

@media screen and (min-width: 1000px) and (max-width: 1550px) {
  .chips__chip {
    transform: scale3d(0.7, 0.7, 1) !important; }
    .chips__chip.chip3 {
      transform-origin: right center; }
  #app .gradients .gradient1 {
    margin-bottom: -110rem; }
  #app .chips .chip10 {
    top: 140.4rem;
    left: calc(50% - 62rem); }
  #app .chips .chip11 {
    display: none; }
  #app .gifts .gift4 {
    top: 214rem; } }

@media screen and (min-width: 1000px) and (max-width: 1300px) {
  .chips__chip {
    transform: scale3d(0.6, 0.6, 1) !important; }
  #app .chips .chip10 {
    left: calc(50% - 55rem); } }

@media screen and (min-width: 1001px) and (max-width: 1200px) {
  .chips__chip {
    transform: scale3d(0.5, 0.5, 1) !important; }
  #app .gradients .gradient2 {
    margin-top: -15rem; }
  #app .chips .chip11 {
    left: calc(50% - 87rem); }
  #app .chips .chip20 {
    display: none; }
  #app .gifts .gift4 {
    right: 4.2rem; }
  #app .gifts .gift5 {
    left: 1.8rem; }
  #app .gifts .gift7 {
    right: -3rem; }
  #app .gifts .gift8 {
    left: -8rem; }
  #app .gifts .gift9 {
    display: none; }
  .ruffle .container > p, .ruffle__step p, .intro p {
    text-shadow: 0 0 18px black; }
  .mix__result .float:nth-of-type(1) {
    bottom: 7rem;
    left: -2.5rem;
    width: 28rem; }
  .mix__result .float:nth-of-type(2) {
    right: -2.5rem;
    bottom: 7rem;
    width: 28rem; }
  .mix__result .float:nth-of-type(3) {
    left: calc(50% - 21rem);
    width: 20rem; }
  .mix__result .float:nth-of-type(4) {
    right: calc(50% - 19rem);
    width: 20rem; }
  .mix .result-container .mix__next {
    width: 18rem; }
    .mix .result-container .mix__next.first {
      margin-top: 34.3rem; } }

@media screen and (min-width: 2030px) {
  .mix .swiper:before, .mix .swiper:after {
    display: none; }
  .mix .swiper .swiper-slide:not(.swiper-slide-active) {
    filter: brightness(0.3); }
  .mix .swiper .swiper-slide.swiper-slide-next, .mix .swiper .swiper-slide.swiper-slide-prev {
    filter: brightness(0.8); } }

@media screen and (min-width: 1001px) and (max-width: 1300px) {
  #app .chips .chip15 {
    top: 288.4rem;
    left: calc(50% - 59rem); }
  #app .chips .chip16 {
    display: none; }
  #app .chips .chip17 {
    display: none; }
  #app .chips .chip20 {
    top: 329.7rem;
    right: -27rem; }
  #app .gifts .gift7 {
    right: 1rem; }
  .modal__content {
    padding: 3.5rem 0; }
  .modal__closer {
    top: calc(50% - 20rem); } }

.chipx {
  transition: opacity 0.3s 0.6s; }
  .chipx:not(.animated) {
    opacity: 0; }

.intro .gradient1 {
  transition: opacity 0.4s 0s, transform 0.4s 0s;
  transform-origin: top left; }
  .intro .gradient1:not(.animated) {
    transform: scale(0.8) !important;
    opacity: 0; }

.intro .gradient2 {
  transition: opacity 0.4s 0.1s, transform 0.4s 0.1s;
  transform-origin: top right; }
  .intro .gradient2:not(.animated) {
    transform: scale(0.8) !important;
    opacity: 0; }

.intro .intro__title {
  transition: opacity 0.3s 0.5s; }
  .intro .intro__title:not(.animated) {
    opacity: 0; }

.intro .pack1 {
  transition: opacity 0.3s 0.5s, transform 0.3s 0.5s; }
  .intro .pack1:not(.animated) {
    transform: rotate(-20deg) !important;
    opacity: 0; }

.intro .pack2 {
  transition: opacity 0.3s 0.7s, transform 0.3s 0.7s; }
  .intro .pack2:not(.animated) {
    transform: rotate(20deg) !important;
    opacity: 0; }

.intro .line1 {
  transition: opacity 0.3s 0.8s, transform 0.3s 0.8s; }
  .intro .line1:not(.animated) {
    transform: translate(-20px, -20px) !important;
    opacity: 0; }

.intro .line2 {
  transition: opacity 0.3s 0.9s, transform 0.3s 0.9s; }
  .intro .line2:not(.animated) {
    transform: translate(20px, -20px) !important;
    opacity: 0; }

.intro__packs-arrow {
  animation: 3s linear 1s normal none infinite running pulse-opacity; }
  .intro__packs-arrow img {
    transition: opacity 0.4s 1.2s; }
    .intro__packs-arrow img:not(.animated) {
      opacity: 0; }

.intro p.wow {
  transition: opacity 0.25s 1.4s, transform 0.5s 1.4s;
  transition-timing-function: ease-in-out; }
  .intro p.wow:not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.intro .intro-places .chip {
  transition: opacity 0.4s 0.5s; }
  .intro .intro-places .chip:not(.animated) {
    opacity: 0; }

.intro .intro-places .arrow1, .intro .intro-places .arrow2 {
  transition: opacity 0.3s 0s, transform 0.3s 0s; }

.intro .intro-places:not(.animated) .arrow1, .intro .intro-places:not(.animated) .arrow2 {
  transform: scale(0.8);
  opacity: 0; }

.intro .intro-places.animated .arrow1, .intro .intro-places.animated .arrow2 {
  animation: 1.2s ease-in-out 0s normal none running trambling-animation; }

.intro .intro-places .in1, .intro .intro-places .in2, .intro .intro-places .gradient {
  transition: opacity 0.4s 0.1s, transform 0.4s 0.1s; }
  .intro .intro-places .in1:not(.animated), .intro .intro-places .in2:not(.animated), .intro .intro-places .gradient:not(.animated) {
    transform: scale(0.8) !important;
    opacity: 0; }

.rules .chip {
  transition: opacity 0.4s 0s; }
  .rules .chip:not(.animated) {
    opacity: 0; }

.rules .chip2 {
  transition: opacity 0.4s 0.8s; }
  .rules .chip2:not(.animated) {
    opacity: 0; }

.rules-content:after {
  transition: opacity 0.5s; }

.rules-content:not(.animated):after {
  opacity: 0; }

.rules__title {
  transition: opacity 0.4s 0s; }
  .rules__title:not(.animated) {
    opacity: 0; }
  .rules__title .arrow {
    transform-origin: top center;
    transition: opacity 0.5s, transform 0.5s; }
  .rules__title:not(.animated) .arrow {
    transform: rotate(-90deg);
    opacity: 0; }

.rules__rule {
  transition: opacity 0.2s 0s, transform 0.4s 0s;
  transition-timing-function: ease-in-out; }
  .rules__rule:not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.mix .gradient1 {
  transition: opacity 0.4s 0s, transform 0.4s 0s; }
  .mix .gradient1:not(.animated) {
    transform: scale(0.8) translateX(-50%);
    opacity: 0; }

.mix .drop-container.error {
  transform-origin: center center;
  animation: 1.2s ease-in-out 0s normal none running trambling-animation; }

.mix .result-container .gradient {
  animation: 3s ease-in-out 0s normal none infinite running pulse-opacity; }

.mix .result-container .mix__result .float {
  animation: 2s ease-in-out 0s normal none infinite running float; }
  .mix .result-container .mix__result .float:nth-of-type(2) {
    animation-delay: 0.3s; }
  .mix .result-container .mix__result .float:nth-of-type(3) {
    animation-delay: 0.2s; }
  .mix .result-container .mix__result .float:nth-of-type(4) {
    animation-delay: 0.4s; }

.winners:before {
  transition: opacity 0.5s; }

.winners .arrow {
  transition: opacity 0.3s 0s, transform 0.3s 0s; }

.winners .arrow.aos-animate {
  animation: 1.2s ease-in-out 0s normal none running trambling-animation; }

.winners:not(.animated):before {
  opacity: 0; }

.winners .chip {
  transition: opacity 0.5s 0.5s; }
  .winners .chip:not(.animated) {
    opacity: 0; }

.winners p.wow {
  transition: opacity 0.3s 0s, transform 0.6s 0s;
  transition-timing-function: ease-in-out; }
  .winners p.wow:not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.winners .winner:nth-of-type(5) {
  transition: opacity 0.25s 0.5s, transform 0.5s 0.5s;
  transition-timing-function: ease-in-out; }
  .winners .winner:nth-of-type(5):not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.winners .winner:nth-of-type(6) {
  transition: opacity 0.25s 0.6s, transform 0.5s 0.6s;
  transition-timing-function: ease-in-out; }
  .winners .winner:nth-of-type(6):not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.winners .winner:nth-of-type(7) {
  transition: opacity 0.25s 0.7s, transform 0.5s 0.7s;
  transition-timing-function: ease-in-out; }
  .winners .winner:nth-of-type(7):not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.winners .winner:nth-of-type(8) {
  transition: opacity 0.25s 0.8s, transform 0.5s 0.8s;
  transition-timing-function: ease-in-out; }
  .winners .winner:nth-of-type(8):not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.winners .winner:nth-of-type(9) {
  transition: opacity 0.25s 0.9s, transform 0.5s 0.9s;
  transition-timing-function: ease-in-out; }
  .winners .winner:nth-of-type(9):not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.ruffle .gradient, .ruffle__rules {
  transition: opacity 0.4s 0s, transform 0.4s 0s; }
  .ruffle .gradient:not(.animated), .ruffle__rules:not(.animated) {
    transform: scale(0.8) !important;
    opacity: 0; }

.ruffle__title {
  transition: opacity 0.4s 0s; }
  .ruffle__title:not(.animated) {
    opacity: 0; }

.ruffle .chip {
  transition: opacity 0.5s 0.5s; }
  .ruffle .chip:not(.animated) {
    opacity: 0; }

.ruffle__step, .ruffle p.wow {
  transition: opacity 0.3s 0s, transform 0.6s 0s;
  transition-timing-function: ease-in-out; }
  .ruffle__step:not(.animated), .ruffle p.wow:not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.ruffle .hash-tag1.aos-animate, .ruffle .hash-tag2.aos-animate {
  animation: 1.2s ease-in-out 0.4s normal none running trambling-animation-low; }

.try .chip {
  transition: opacity 0.5s 0.5s; }
  .try .chip:not(.animated) {
    opacity: 0; }

.try__title, .try p.wow {
  transition: opacity 0.3s 0s, transform 0.6s 0s;
  transition-timing-function: ease-in-out; }
  .try__title:not(.animated), .try p.wow:not(.animated) {
    transform: translateX(20px);
    opacity: 0; }

.try__icons {
  transition: opacity 0.4s 0s, transform 0.4s 0s; }
  .try__icons:not(.animated) {
    transform: scale(0.8) !important;
    opacity: 0; }

.try .pulse.wow {
  transition: opacity 0.4s 0s, transform 0.4s 0s;
  transition: 0.2s; }
  .try .pulse.wow:not(.animated) {
    transform: scale(0.8) translateX(-50%);
    opacity: 0; }

@keyframes trambling-animation {
  0%, 50%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg); }
  10%, 30% {
    transform: translate3d(0, 0, 0) rotate(-10deg); }
  20%, 40% {
    transform: translate3d(0, 0, 0) rotate(10deg); } }

@keyframes trambling-animation-low {
  0%, 50%, 100% {
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 5deg); }
  10%, 30% {
    transform: translate3d(0, 0, 0) rotate(-5deg); }
  20%, 40% {
    transform: translate3d(0, 0, 0) rotate(5deg); } }

@keyframes pulse {
  0%, 100% {
    transform: scale3d(0.95, 0.95, 1); }
  70% {
    transform: scale3d(1.05, 1.05, 1); } }

@keyframes pulse-opacity {
  0%, 100% {
    transform: translateX(-50%) scale3d(0.97, 0.97, 1);
    opacity: 0.7; }
  50% {
    transform: translateX(-50%) scale3d(1.03, 1.03, 1);
    opacity: 1; } }

@keyframes float {
  0% {
    transform: translatey(0px); }
  50% {
    transform: translatey(-10px); }
  100% {
    transform: translatey(0px); } }

.checkViewChip.hidden {
  visibility: hidden; }
  .checkViewChip.hidden > * {
    transform: none !important;
    visibility: hidden !important; }

.light {
  transform: translate3d(0, 0, 0);
  filter: drop-shadow(0px 0px 16px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 4px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 8px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 24px rgba(0, 213, 255, 0.6));
  transition: 0.2s; }
  .light:hover {
    box-shadow: inset 0px 0px 0px rgba(0, 213, 255, 0.6);
    filter: drop-shadow(0px 0px 16px rgba(0, 213, 255, 0.6)) drop-shadow(0px 0px 24px rgba(0, 213, 255, 0.6)); }

.chip {
  will-change: transform; }

/*!*********************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js!../node_modules/swiper/src/swiper.scss ***!
  \*********************************************************************************************************************************/
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-container-no-flexbox .swiper-slide {
  float: left; }

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box; }

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0); }

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap; }

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform; }

.swiper-slide-invisible-blank {
  visibility: hidden; }

/* Auto Height */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height; }

/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px; }
  .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {
    transform-style: preserve-3d; }
  .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; }
  .swiper-container-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {
  touch-action: pan-y; }

.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {
  touch-action: pan-x; }


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