.module-case {
    overflow: clip;
  }






  
  .sn-scrollytelling div.pagination {
    position: absolute;
    left: calc(60 * var(--px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }





  .sn-scrollytelling .scene {
    height: 200vh;
  }
  
  .sn-scrollytelling.mbux .scene {
    height: 100vh;
    display: grid;
    place-items: center;
  }
  
  .sn-scrollytelling .scene[data-scene="1"] {
    height: 100vh;
  }

  
  
  
  
  
  
  
  .sn-scrollytelling:is(.me-app, .software-factory, .mbux) .stage {
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
  }
  
  .sn-scrollytelling .stage-inner {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
  }
  
  .sn-scrollytelling .stage-header {
    padding: calc(50 * var(--px)) 0;
    text-align: center;
    flex-shrink: 0;
  }
  
  .sn-scrollytelling .stage-body {
    flex-grow: 1;
    height: 100%;
    position: relative;
    z-index: 3;
  }
  
  .sn-scrollytelling .scene-number {
    margin-bottom: 10px;
  }
  
  .sn-scrollytelling .scene-number > span {
    display: inline-block;
    --size: max(32px, calc(32 * var(--px)));
    width: var(--size);
    height: var(--size);
    text-align: center;
    line-height: var(--size);
    border-radius: 50%;
    background: var(--base-color-white);
    color: var(--base-color-black);
    font-family: var(--base-font-2-bold);
    font-size: max(23px, calc(23 * var(--px)));
  }
  
  @media (max-width: 750px) {
    
    .sn-scrollytelling .stage-header {
      margin-top: 70px;
    }
    
  }
  
  @media (max-width: 500px) {
    
    .sn-scrollytelling .stage-header {
      position: relative;
      z-index: 2;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  .sn-scrollytelling .device,
  .sn-scrollytelling .annotations {
    position: absolute;
    /*aspect-ratio: 320 / 625;*/
    aspect-ratio: 320 / 660;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: calc(100% - 50px);
  }
  
  .sn-scrollytelling.mbux .device {
    opacity: 0;
    transition: opacity .5s var(--ttf-7);
    pointer-events: none;
    left: auto;
    right: 0;
  }
  
  .sn-scrollytelling.mbux[data-current-scene="3"] .device {
    opacity: 1;
  }
  
  .sn-scrollytelling .device {
    /*--border-radius: 4% 4% 16% 16% / 2% 2% 7% 7%;*/
    --border-radius: 16% 16% 16% 16% / 7% 7% 7% 7%;
  }
  
  .sn-scrollytelling .device-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  
  .sn-scrollytelling .device-frame img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  
  .sn-scrollytelling .device-content {
    position: absolute;
    top: 3%;
    left: 4.7%;
    right: 4.7%;
    bottom: 2.2%;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--border-radius);
  }
  
  .sn-scrollytelling .dc-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: 500ms var(--ttf-7);
    transition-property: opacity, transform;
  }
  
  .sn-scrollytelling .device-content .media {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  
  .sn-scrollytelling .dc-scene.prev {
    transform: scale(0.8) translateX(-40%);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
  }

  .sn-scrollytelling .dc-scene.next {
    transform: scale(0.8) translateX(40%);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
  }
  
  .sn-scrollytelling.mbux .dc-scene {
    transform: none;
    opacity: 1;
  }
  
  
  @media (max-width: 600px) {
    
    .sn-scrollytelling .device {
      height: calc(100% - 200px);
    }
    
    .sn-scrollytelling.mbux .device {
      left: 50%;
      right: auto;
    }
    
  }
  
  
  
  
  
  
  
  
  .sn-scrollytelling .annotations {
    z-index: 15;
    pointer-events: none;
  }
  
  .sn-scrollytelling .annotations .cpy-20 {
    --min-font-size: .875rem;
  }
  
  .sn-scrollytelling .annotations-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    --x: calc(410 * var(--px));
    --x-factor: 1;
    --y: calc(170 * var(--px));
    --y-factor: 1;
    transform: translate(calc(var(--x) * var(--x-factor)), calc(var(--y) * var(--y-factor)));
    transition: 500ms var(--ttf-7);
    transition-property: transform, opacity;
  }
  
  .sn-scrollytelling .annotations-wrap[data-position*="left"] {
    --x-factor: -1;
  }
  
  .sn-scrollytelling .annotations-wrap[data-position*="top"] {
    --y-factor: -1;
  }
  
  .sn-scrollytelling .annotations-wrap[data-position*="middle"] {
    --y: 0px;
  }
  
  .sn-scrollytelling .annotations-wrap[data-position*="overlap"] {
    --x: calc(295 * var(--px));
  }
  
  .sn-scrollytelling .annotations-wrap[data-position="hidden"] {
    opacity: 0;
    --x: 0px;
    --y: 0px;
  }
  
  .sn-scrollytelling .annotation {
    position: absolute;
    width: max(180px, min(330px, calc(330 * var(--px))));
    box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-sizing: border-box;
    padding: .75em 1.35em .9em 1.2em;
    background: var(--base-color-white);
    color: var(--base-color-black);
    transform: translate(-50%, -50%);
  }
  
  .sn-scrollytelling.software-factory .annotation {
    width: max(180px, min(375px, calc(375 * var(--px))));
  }
  
  .sn-scrollytelling .annotation p strong {
    font-weight: normal;
    font-family: var(--base-font-1-bold);
  }
  
  .sn-scrollytelling .annotation.cpy-20 {
    line-height: 1.2;
  }
  
  @media (max-width: 600px) {

    .sn-scrollytelling .annotations .cpy-20 {
      --min-font-size: 1.125rem;
    }
    
    .sn-scrollytelling .annotations {
      top: auto;
      bottom: 25px;
      left: 30px;
      right: 30px;
      height: 152px;
      transform: none;
      aspect-ratio: auto;
    }
    
    .sn-scrollytelling .annotations-wrap {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: none;
    }
    
    .sn-scrollytelling .annotation {
      width: 100% !important;
      max-width: 330px;
      margin-inline: auto;
      height: auto;
      transform: none;
      position: absolute;
      left: auto;
      right: auto;
      bottom: 0;
      top: auto;
    }
    
  }
  
  @media (max-width: 450px) {
    
    .sn-scrollytelling .annotation {
      max-width: none;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  .sn-scrollytelling .stage-hot-spot-images,
  .sn-scrollytelling .stage-hot-spots {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  
  .sn-scrollytelling .stage-hot-spots .hot-spots {
    opacity: 1;
    transition: opacity;
    transition-duration: 1s;
  }
  
  .sn-scrollytelling .stage-hot-spots .hot-spots.is-hidden {
    opacity: 0;
    transition-duration: 0s;
  }
  
  .sn-scrollytelling .hot-spot-image {
    position: relative;
    height: 100%;
    max-height: calc(850 * var(--px));
    max-width: min(1400px, 100vw);
    aspect-ratio: 1400 / 850;
    margin: auto;
  }
  
  .sn-scrollytelling .hot-spot-image .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: lighten;
    opacity: 0;
    transform: scale(0.5);
    transition: 1.5s var(--ttf-7);
    transition-property: opacity, transform;
  }
  
  .sn-scrollytelling .hot-spot-image .image:first-child img {
    transform: scale(3);
  }
  
  .sn-scrollytelling .hot-spot-image .image.current img {
    opacity: 1;
    transform: none;
  }
  
  .sn-scrollytelling .hot-spot-image .hot-spots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  
  .sn-scrollytelling .hot-spot {
    position: absolute;
    --initial-delay: 0ms;
  }  
  
  .sn-scrollytelling .hot-spot[data-hot-spot="1"] {
    top: 39%;
    left: 35%;
  }
  
  .sn-scrollytelling .hot-spot[data-hot-spot="2"],
  .sn-scrollytelling .hot-spot[data-hot-spot="3"],
  .sn-scrollytelling .hot-spot[data-hot-spot="4"] {
    top: 47%;
    left: 50%;
    transform: skew(-33deg, 16deg);
  }
  
  .sn-scrollytelling .hot-spot .icon > span.icon {
    display: block;
    --size: calc(42 * var(--px));
    width: var(--size);
    height: var(--size);
    position: relative;
  }
  
  .sn-scrollytelling .hot-spot .icon > span.icon:not(.has-image) {
    border-radius: 50%;
    background: linear-gradient(180deg, #DC267F 0%, #E1B000 100%);
  }
  
  .sn-scrollytelling .hot-spot .icon > span.icon.has-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: auto;
    max-width: none;
  }
  
  .sn-scrollytelling .hot-spot[data-hot-spot="4"] .icon > span.icon.has-image img {
    width: 120%;
  } 
  
  .sn-scrollytelling .hot-spot .icon > span.rings {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --size: calc(230 * var(--px));
    width: var(--size);
    height: var(--size);
    opacity: 0.7;
  }
  
  .sn-scrollytelling .hot-spot span.rings > span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --ring-size: calc(.63043478260869565217 * var(--size));
    width: var(--ring-size);
    height: var(--ring-size);
    background: url(../../imgs/hot-spot-ring-1.png) no-repeat center center;
    background-size: contain;
    animation: pulsate infinite 2s;
    animation-delay: calc(0ms + var(--initial-delay));
    --animation-scale: 1.1;
  }
  
  .sn-scrollytelling .hot-spot span.rings > span:nth-child(2) {
    --ring-size: calc(.82608695652173913043 * var(--size));
    background: url(../../imgs/hot-spot-ring-2.png) no-repeat center center;
    background-size: contain;
    animation: pulsate infinite 2s;
    animation-delay: calc(150ms + var(--initial-delay));
    --animation-scale: 1.2;
  }
  
  .sn-scrollytelling .hot-spot span.rings > span:nth-child(3) {
    --ring-size: var(--size);
    background: url(../../imgs/hot-spot-ring-3.png) no-repeat center center;
    background-size: contain;
    animation: pulsate infinite 2s;
    animation-delay: calc(300ms + var(--initial-delay));
    --animation-scale: 1.35;
  }
  
  @keyframes pulsate {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }
    10% {
      opacity: 0;
      transform: translate(-50%, -50%);
    }
    40% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(var(--animation-scale, 1));
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(calc(var(--animation-scale, 1) * 0.98));
    }
  }
  
  
  @media (max-width: 500px) {
    
    .sn-scrollytelling .stage-hot-spot-images,
    .sn-scrollytelling .hot-spot-image {
      scale: 1.5;
    }
    
    .sn-scrollytelling .stage-hot-spots {
      z-index: 2;
    }
    
  }
  
  
  
  
  
  
  
  
  
  
  
  
  .sn-scrollytelling .loop {
    aspect-ratio: 1019 / 419;
    width: min(1019px, calc(1019 * var(--px)));
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .sn-scrollytelling .loop > div {
    position: absolute;
    width: 35.32875368007850834100%;
    height: 41.52744630071599045300%;
  }
  
  .sn-scrollytelling .loop > div > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 500ms;
  }
  
  .sn-scrollytelling .loop > div > div.active {
    z-index: 2;
    opacity: 0;
  }
  
  .sn-scrollytelling[data-current-scene="1"] .loop > div.loop-top-left > div.active,
  .sn-scrollytelling[data-current-scene="2"] .loop > div.loop-bottom-left > div.active,
  .sn-scrollytelling[data-current-scene="3"] .loop > div.loop-top-right > div.active,
  .sn-scrollytelling[data-current-scene="4"] .loop > div.loop-bottom-right > div.active {
    opacity: 1;
  }
  
  .sn-scrollytelling[data-current-scene="1"] .loop > div.loop-top-left > div.inactive,
  .sn-scrollytelling[data-current-scene="2"] .loop > div.loop-bottom-left > div.inactive,
  .sn-scrollytelling[data-current-scene="3"] .loop > div.loop-top-right > div.inactive,
  .sn-scrollytelling[data-current-scene="4"] .loop > div.loop-bottom-right > div.inactive {
    opacity: 0;
  }
  
  .sn-scrollytelling .loop .loop-bottom-left {
    left: 2.35525024533856722200%;
    bottom: 0;
  }
  
  .sn-scrollytelling .loop .loop-bottom-left .inactive {
    background-image: url(../../imgs/loop-bottom-left.svg);
  }
  
  .sn-scrollytelling .loop .loop-bottom-left .active {
    background-image: url(../../imgs/loop-bottom-left-active.svg);
  }
  
  .sn-scrollytelling .loop .loop-bottom-right {
    right: 2.35525024533856722200%;
    bottom: 0;
  }
  
  .sn-scrollytelling .loop .loop-bottom-right .inactive {
    background-image: url(../../imgs/loop-bottom-right.svg);
  }
  
  .sn-scrollytelling .loop .loop-bottom-right .active {
    background-image: url(../../imgs/loop-bottom-right-active.svg);
  }
  
  .sn-scrollytelling .loop .loop-top-left {
    top: 0;
    left: 0;
    width: 38.272816486751717369%;
    height: 41.52744630071599045300%;
  }
  
  .sn-scrollytelling .loop .loop-top-left .inactive {
    background-image: url(../../imgs/loop-top-left.svg);
  }
  
  .sn-scrollytelling .loop .loop-top-left .active {
    background-image: url(../../imgs/loop-top-left-active.svg);
  }
  
  .sn-scrollytelling .loop .loop-top-right {
    top: 0;
    right: 0;
    width: 38.272816486751717369%;
    height: 41.52744630071599045300%;
  }
  
  .sn-scrollytelling .loop .loop-top-right .inactive {
    background-image: url(../../imgs/loop-top-right.svg);
  }
  
  .sn-scrollytelling .loop .loop-top-right .active {
    background-image: url(../../imgs/loop-top-right-active.svg);
  }
  
  .sn-scrollytelling .loop .loop-middle {
    top: 50%;
    left: 50%;
    width: 16.48675171736997055900%;
    height: 40.09546539379474940300%;
    transform: translate(-50%, -50%);
  }
  
  .sn-scrollytelling .loop .loop-middle .inactive {
    background-image: url(../../imgs/loop-middle.svg);
  }
  
  
  @media (max-width: 600px) {
    
    .sn-scrollytelling .loop {
      top: calc((100% - 200px) / 2);
    }
    
  }