/* ==========================================================================
   main animations
   ========================================================================== */
.cam-animated-panel-collection {
  height: 1070vh;
  background: white;
  position: relative;
  z-index: 79;
  color: black; }
  .cam-animated-panel-collection .pos-helper {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px; }
    .cam-animated-panel-collection .pos-helper.pos-helper-0 {
      top: 0vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-1 {
      top: 50vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-2 {
      top: 100vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-3 {
      top: 150vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-4 {
      top: 200vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-5 {
      top: 250vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-6 {
      top: 300vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-7 {
      top: 350vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-8 {
      top: 400vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-9 {
      top: 450vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-10 {
      top: 500vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-11 {
      top: 550vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-12 {
      top: 600vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-13 {
      top: 625vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-14 {
      top: 675vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-15 {
      top: 725vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-16 {
      top: 775vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-17 {
      top: 825vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-18 {
      top: 875vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-19 {
      top: 925vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-20 {
      top: 975vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-21 {
      top: 1025vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-22 {
      top: 1075vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-23 {
      top: 1125vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-24 {
      top: 1175vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-25 {
      top: 1225vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-26 {
      top: 1275vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-27 {
      top: 1325vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-28 {
      top: 1375vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-29 {
      top: 1425vh; }
    .cam-animated-panel-collection .pos-helper.pos-helper-30 {
      top: 1475vh; }
  .cam-animated-panel-collection .pos-helper-walls {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px;
    top: 895vh; }
  .cam-animated-panel-collection .sticky-layer {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden; }
  .cam-animated-panel-collection .product-sequence {
    display: none;
    position: relative;
    height: 100%; }
    .cam-animated-panel-collection .product-sequence.active {
      display: block; }
    .cam-animated-panel-collection .product-sequence img {
      position: absolute;
      top: 0px;
      left: 50%;
      width: 100%;
      height: auto;
      transform: translate(-50%, 0);
      opacity: 0; }
      .cam-animated-panel-collection .product-sequence img.active {
        opacity: 1; }
  .cam-animated-panel-collection .product-sequence {
    width: auto !important;
    left: 50% !important;
    transform: translate(-50%, 0); }
    .cam-animated-panel-collection .product-sequence img {
      height: 100%;
      width: auto; }
      .cam-animated-panel-collection .product-sequence img:nth-child(1) {
        position: relative; }
    .cam-animated-panel-collection .product-sequence.product-sequence-6:before {
      content: "";
      position: absolute;
      left: -1px;
      top: 0;
      height: 100%;
      width: 40%;
      background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
      z-index: 5; }
    .cam-animated-panel-collection .product-sequence.product-sequence-6:after {
      content: "";
      position: absolute;
      right: -1px;
      top: 0;
      height: 100%;
      width: 40%;
      background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
      transform: rotate(-180deg);
      z-index: 5; }
  .cam-animated-panel-collection .sequence-panel-1 {
    position: relative;
    height: 100%; }
  .cam-animated-panel-collection .product-sequence-21,
  .cam-animated-panel-collection .product-sequence-22,
  .cam-animated-panel-collection .product-sequence-23,
  .cam-animated-panel-collection .product-sequence-24,
  .cam-animated-panel-collection .product-sequence-25,
  .cam-animated-panel-collection .product-sequence-26,
  .cam-animated-panel-collection .product-sequence-27,
  .cam-animated-panel-collection .product-sequence-28,
  .cam-animated-panel-collection .product-sequence-29,
  .cam-animated-panel-collection .product-sequence-30 {
    opacity: 0; }
    .cam-animated-panel-collection .product-sequence-21.fade-in,
    .cam-animated-panel-collection .product-sequence-22.fade-in,
    .cam-animated-panel-collection .product-sequence-23.fade-in,
    .cam-animated-panel-collection .product-sequence-24.fade-in,
    .cam-animated-panel-collection .product-sequence-25.fade-in,
    .cam-animated-panel-collection .product-sequence-26.fade-in,
    .cam-animated-panel-collection .product-sequence-27.fade-in,
    .cam-animated-panel-collection .product-sequence-28.fade-in,
    .cam-animated-panel-collection .product-sequence-29.fade-in,
    .cam-animated-panel-collection .product-sequence-30.fade-in {
      opacity: 1; }
  .cam-animated-panel-collection .abs-wrap-outer-text,
  .cam-animated-panel-collection .abs-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute; }
  @media only screen and (min-width: 768px) {
    .cam-animated-panel-collection .mobile-indicator-wrap {
      pointer-events: none; } }
  .cam-animated-panel-collection .text-ratio-wrap {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
    left: 50%;
    width: 177.8vh;
    height: 100%; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box {
      opacity: 0;
      transform: translate(0, 30px);
      will-change: opacity, transform; }
      .cam-animated-panel-collection .text-ratio-wrap .info-box.active {
        opacity: 1;
        transform: translate(0, 0); }
      .cam-animated-panel-collection .text-ratio-wrap .info-box.fade-out {
        opacity: 0;
        transform: translate(0, -30px); }
    .cam-animated-panel-collection .text-ratio-wrap .info-box {
      position: absolute;
      max-width: 200px; }
      @media only screen and (max-width: 1023px) {
        .cam-animated-panel-collection .text-ratio-wrap .info-box {
          max-width: 150px; } }
      .cam-animated-panel-collection .text-ratio-wrap .info-box .box-title {
        position: relative;
        font-size: 20px;
        line-height: 28px;
        font-family: 'UniversNextLight';
        font-weight: 300; }
        @media only screen and (max-width: 1023px) {
          .cam-animated-panel-collection .text-ratio-wrap .info-box .box-title {
            font-size: 16px;
            line-height: 24px; } }
      .cam-animated-panel-collection .text-ratio-wrap .info-box .indicator-wrap {
        position: absolute;
        top: 15px;
        left: calc(100% + 10px); }
        @media only screen and (max-width: 1023px) {
          .cam-animated-panel-collection .text-ratio-wrap .info-box .indicator-wrap {
            top: 13px; } }
        .cam-animated-panel-collection .text-ratio-wrap .info-box .indicator-wrap .line {
          height: 1px;
          width: 100%;
          background: black; }
        .cam-animated-panel-collection .text-ratio-wrap .info-box .indicator-wrap .dot {
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          background: black;
          right: 0;
          top: -5px; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box-1 {
      top: 57%;
      right: 73%;
      text-align: right; }
      .cam-animated-panel-collection .text-ratio-wrap .info-box-1 .indicator-wrap {
        width: 12vh; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box-2 {
      top: 45%;
      left: 73%; }
      .cam-animated-panel-collection .text-ratio-wrap .info-box-2 .indicator-wrap {
        width: 12vh;
        right: calc(100% + 10px);
        left: auto; }
        .cam-animated-panel-collection .text-ratio-wrap .info-box-2 .indicator-wrap .dot {
          left: 0;
          right: auto; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box-3 {
      top: 58%;
      left: 73%; }
      .cam-animated-panel-collection .text-ratio-wrap .info-box-3 .indicator-wrap {
        width: 12vh;
        right: calc(100% + 10px);
        left: auto; }
        .cam-animated-panel-collection .text-ratio-wrap .info-box-3 .indicator-wrap .dot {
          left: 0;
          right: auto; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box-4 {
      top: 36%;
      left: 69%; }
      .cam-animated-panel-collection .text-ratio-wrap .info-box-4 .indicator-wrap {
        width: 12vh;
        right: calc(100% + 10px);
        left: auto; }
        .cam-animated-panel-collection .text-ratio-wrap .info-box-4 .indicator-wrap .dot {
          left: 0;
          right: auto; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box-5 {
      top: 30%;
      right: 73%;
      text-align: right; }
      .cam-animated-panel-collection .text-ratio-wrap .info-box-5 .indicator-wrap {
        width: 12vh; }
    .cam-animated-panel-collection .text-ratio-wrap .info-box-6 {
      top: 48%;
      right: 70%;
      text-align: right;
      max-width: 230px; }
      @media only screen and (max-width: 1023px) {
        .cam-animated-panel-collection .text-ratio-wrap .info-box-6 {
          max-width: 200px;
          right: 66%; } }
      .cam-animated-panel-collection .text-ratio-wrap .info-box-6 .indicator-wrap {
        width: 15vh; }

body:not(.portrait-ratio) .mobile-indicator {
  display: none; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator {
  width: 32px;
  height: 32px;
  position: absolute;
  opacity: 0;
  will-change: opacity, transform;
  transform: translate(0, 20px); }
  body.portrait-ratio .cam-animated-panel-collection .mobile-indicator.active {
    opacity: 1;
    transform: translate(0, 0); }
  body.portrait-ratio .cam-animated-panel-collection .mobile-indicator.fade-out {
    opacity: 0; }
  body.portrait-ratio .cam-animated-panel-collection .mobile-indicator .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #2574C3;
    border-radius: 100%;
    opacity: 0.5; }
  body.portrait-ratio .cam-animated-panel-collection .mobile-indicator .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2574C3;
    width: 18px;
    height: 18px;
    border-radius: 100%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-wrap {
  position: absolute;
  top: 0;
  transform: translate(-50%, 0);
  left: 50%;
  width: 177.8vh;
  height: 100%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-1 {
  top: 60%;
  left: 43%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-2 {
  top: 35%;
  left: 54%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-3 {
  top: 60%;
  left: 54.5%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-4 {
  top: 32%;
  left: 58%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-5 {
  top: 32%;
  left: 50%; }

body.portrait-ratio .cam-animated-panel-collection .mobile-indicator-6 {
  top: 30%;
  left: 49%; }

body.portrait-ratio .cam-animated-panel-collection .sequence-panel-1 {
  height: 80%;
  top: 10%; }

body.portrait-ratio .cam-animated-panel-collection .product-sequence.product-sequence-6:before {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  top: -1px;
  left: 0;
  width: 100%;
  height: 20%; }

body.portrait-ratio .cam-animated-panel-collection .product-sequence.product-sequence-6:after {
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  transform: none;
  bottom: -1px;
  top: auto;
  right: 0;
  width: 100%;
  height: 20%; }

body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap {
  width: 100%; }
  body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box {
    text-align: center !important;
    max-width: 250px;
    left: 50% !important;
    width: 100%;
    right: auto !important;
    top: 75% !important;
    transform: translate(-50%, 30px); }
    body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box .indicator-wrap {
      display: none; }
    body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box .box-title {
      font-size: 20px;
      line-height: 28px; }
    body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box.active {
      transform: translate(-50%, 0); }
    body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box.fade-out {
      opacity: 0;
      transform: translate(-50%, -30px); }
  body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box-2 {
    top: 22%;
    right: 50px;
    left: auto; }
  body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box-3 {
    left: 50px;
    right: auto;
    top: 50%; }
  body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box-4 {
    left: 50px;
    top: 50%; }
  body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box-5 {
    left: 50px;
    top: 50%; }
  body.portrait-ratio .cam-animated-panel-collection .text-ratio-wrap .info-box-6 {
    left: 50px;
    right: auto;
    top: 40%;
    top: 69% !important; }