.header {
  background-color: transparent;
}
i-navigation {
  background-color: transparent;
}
i-navigation-wrapper {
  background-image: url(deco-desktop.png);
  background-position: top center;
  background-repeat: no-repeat;
}
@media (max-width: 1023px) {
  i-navigation-wrapper {
    background-image: url(deco-mobile.png);
  }
}
@media (min-width: 1024px) {
  .xmas-aspot-content {
    justify-content: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    height: 340px;
    width: 100%;
  }
  i-navigation-menu-item[category-id="600"]::after,
  i-navigation-menu-item[category-id="700"]::after {
    content: " ";
    background-image: url(star.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    float: right;
  }
  i-navigation-menu-item[category-id="600"]::after {
    width: 23px;
    height: 23px;
    margin-top: -32px;
    margin-right: -5px;
  }
  i-navigation-menu-item[category-id="700"]::after {
    width: 34px;
    height: 34px;
    margin-top: -50px;
    margin-right: -12px;
  }
}
.xmas-aspot-container {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
  height: 480px;
  overflow: hidden;
  position: relative;
}
.xmas-aspot-anim {
  position: absolute;
  display: block;
  width: 1600px;
  height: 480px;
  margin: 0 auto;
  overflow: hidden;
  --DURATION: 3s;
  perspective-origin: 600px 600px;
  perspective: 600px;

  top: 0;
  left: calc(50% - 800px);
}

.xmas-aspot-anim__snowflakes {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: calc(38% - 1500px);
  width: 3000px;
  height: 100%;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 46.5%,
    rgba(0, 0, 0, 0) 48.5%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 46.5%,
    rgba(0, 0, 0, 0) 48.5%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(0, 0, 0, 1) 100%
  );
}

.xmas-aspot-anim__snowlayer {
  position: absolute;
  top: calc(50% - 800px);
  left: calc(50% - 800px);
  width: 1600px;
  height: 1600px;
  transform-origin: center center;
  background-image: url(snowflakes.png);
  background-repeat: repeat;
  background-size: 80px 80px;
  animation: zoom var(--DURATION) infinite linear both;
  opacity: 0;
}

.xmas-aspot-anim__snowlayer:nth-child(1) {
  background-position: 50% 50%;
  --ANGLE: 15deg;
  --ANGLE_END: 30deg;
  animation-delay: calc(var(--DURATION) * 0);
}

.xmas-aspot-anim__snowlayer:nth-child(2) {
  background-position: 20% 60%;
  --ANGLE: -8deg;
  --ANGLE_END: -16deg;
  animation-delay: calc(var(--DURATION) * 0.25);
}

.xmas-aspot-anim__snowlayer:nth-child(3) {
  background-position: -20% -30%;
  --ANGLE: 10deg;
  --ANGLE_END: 20deg;
  animation-delay: calc(var(--DURATION) * 0.5);
}

.xmas-aspot-anim__snowlayer:nth-child(4) {
  --ANGLE: -20deg;
  --ANGLE_END: -40deg;
  background-position: 40% -80%;
  animation-delay: calc(var(--DURATION) * 0.75);
}

.xmas-aspot-anim__snowlayer:nth-child(5) {
  --ANGLE: 2deg;
  --ANGLE_END: 4deg;
  background-position: -20% 30%;
  animation-delay: calc(var(--DURATION) * 1);
}

.xmas-aspot-anim__wind {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: calc(38% - 1500px);
  width: 3000px;
  height: 100%;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 46.5%,
    rgba(0, 0, 0, 0) 48.5%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 46.5%,
    rgba(0, 0, 0, 0) 48.5%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 1) 51%,
    rgba(0, 0, 0, 1) 100%
  );
}

.xmas-aspot-anim__windlayer {
  position: absolute;
  top: calc(50% - 800px);
  left: calc(50% - 800px);
  width: 1600px;
  height: 1600px;
  transform-origin: center center;
  background-image: url(snowflakes-2.png);
  background-repeat: repeat;
  background-size: 150px 150px;
}

.xmas-aspot-anim__windlayer:nth-child(1) {
  background-position: 50% 50%;
  animation: rotate_1 2s infinite linear both;
  animation-delay: calc(var(--DURATION) * 0);
  animation-duration: 4s;
}

.xmas-aspot-anim__windlayer:nth-child(2) {
  background-position: 20% 60%;
  animation: rotate_1 2s infinite linear both;
  animation-delay: calc(var(--DURATION) * 0.25);
  animation-duration: 3s;
}

.xmas-aspot-anim__windlayer:nth-child(3) {
  background-position: -20% -30%;
  animation: rotate_2 2s infinite ease-in-out both;
  animation-delay: calc(var(--DURATION) * 0.5);
  animation-duration: 6s;
}

.xmas-aspot-anim__windlayer:nth-child(4) {
  background-position: 40% -80%;
  animation: rotate_2 2s infinite ease-in-out both;
  animation-delay: calc(var(--DURATION) * 0.75);
  animation-duration: 8s;
}

.xmas-aspot-anim__windlayer:nth-child(5) {
  background-position: -20% 30%;
  animation: rotate_2 2s infinite ease-in-out both;
  animation-delay: calc(var(--DURATION) * 1);
  animation-duration: 12s;
}

@keyframes rotate_1 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(3);
  }

  25% {
    opacity: 1;
    transform: rotate(90deg) scale(3);
  }

  50% {
    opacity: 0.75;
    transform: rotate(180deg) scale(2);
  }

  75% {
    opacity: 0.5;
    transform: rotate(270deg) scale(1.5);
  }

  100% {
    opacity: 0;
    transform: rotate(360deg) scale(1);
  }
}

@keyframes rotate_2 {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(0deg) scale(3);
  }

  25% {
    opacity: 1;
    transform: translateX(10%) rotate(90deg) scale(3);
  }

  50% {
    opacity: 0.75;
    transform: translateX(-10%) rotate(180deg) scale(2);
  }

  75% {
    opacity: 0.5;
    transform: translateX(0) rotate(270deg) scale(1.5);
  }

  100% {
    opacity: 0;
    transform: translateX(10%) rotate(360deg) scale(1);
  }
}

@keyframes zoom {
  0% {
    opacity: 0;
    filter: blur(0.2);
    transform: translate3D(0, 0, 0) rotate(0deg) scale(4);
  }

  50% {
    opacity: 1;
    filter: blur(0);
    transform: translate3D(0, 0, 0) rotate(var(--ANGLE)) scale(2);
  }

  100% {
    opacity: 0;
    filter: blur(0);
    transform: translate3D(0, 0, 0) rotate(var(--ANGLE_END)) scale(1);
  }
}

@media (max-width: 1023px) {
  .xmas-aspot-container {
    height: 430px;
  }
  .xmas-aspot-anim {
    left: calc(50% - 520px);
    height: 430px;
  }
  .xmas-aspot-container img {
    width: auto;
    height: 430px;
    margin: 0 auto !important;
  }
  .xmas-aspot-anim__wind,
  .xmas-aspot-anim__snowflakes {
    left: calc(50% - 260px - 75vw);
    width: 150vw;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 36%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0) 53%,
      rgba(0, 0, 0, 1) 55%,
      rgba(0, 0, 0, 1) 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 36%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0) 53%,
      rgba(0, 0, 0, 1) 55%,
      rgba(0, 0, 0, 1) 100%
    );
  }

  .xmas-aspot-anim__snowlayer {
    top: calc(50% - 75vw);
    left: calc(50% - 75vw);
    width: 150vw;
    height: 150vw;
  }

  .xmas-aspot-anim__windlayer {
    top: calc(50% - 75vw);
    left: calc(50% - 75vw);
    width: 150vw;
    height: 150vw;
    background-size: 150px 150px;
  }

  .xmas-aspot-anim__snowlayer:nth-child(3),
  .xmas-aspot-anim__snowlayer:nth-child(4),
  .xmas-aspot-anim__snowlayer:nth-child(5) {
    display: none;
  }
  .xmas-aspot-anim__windlayer:nth-child(3),
  .xmas-aspot-anim__windlayer:nth-child(4),
  .xmas-aspot-anim__windlayer:nth-child(5) {
    display: none;
  }
  @keyframes rotate_2 {
    0% {
      opacity: 0;
      transform: translateX(0) rotate(0deg) scale(2);
    }

    25% {
      opacity: 1;
      transform: translateX(10%) rotate(90deg) scale(2);
    }

    50% {
      opacity: 0.75;
      transform: translateX(-10%) rotate(180deg) scale(1.5);
    }

    75% {
      opacity: 0.5;
      transform: translateX(0) rotate(270deg) scale(0.75);
    }

    100% {
      opacity: 0;
      transform: translateX(10%) rotate(360deg) scale(0.5);
    }
  }
}

/*=====================================================*/
@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
  .aspot.major .blocktext-responsive-mobile{
    background-color: rgba(255, 255, 255, 0.8);
    padding: 40px;
  }
}


@media (max-width: 480px) {
  img.Desktop{
    display: none;
  }
  .aspot.major img{
    margin-left: unset;
  }
}

/*DTW Edits*/
.blocktext .Tag,.major .blocktext .Text,.btn-Aspot{
  font-family: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book", Helvetica, Arial, 'Microsoft Jhenghei', sans-serif !important;
}
.major h2{
 font-family: ClarinsRegular, Clarins, 'Microsoft Jhenghei' !important;
}


/*DTW Responsive Edits*/
/*iPhone 6/7/8/plus, XR, 11, X, 12 and 11.*/
@media (max-width: 480px) {
  .aspot.major img{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}