#custom-smalcode {
  /* ==========================================================================
   development helper
   ========================================================================== */ }
  #custom-smalcode .rel {
    position: relative;
    height: 100%;
    width: 100%; }
  #custom-smalcode .abs-center-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  #custom-smalcode .maxWidth {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto; }
    @media only screen and (min-width: 1440px) {
      #custom-smalcode .maxWidth {
        max-width: 80vw; } }
  @media only screen and (max-width: 767px) {
    #custom-smalcode .desktop {
      display: none; } }
  @media only screen and (min-width: 768px) {
    #custom-smalcode .mobile {
      display: none; } }
  #custom-smalcode .ratio-wrap {
    padding-bottom: 56.25%;
    height: 0;
    position: relative; }
  #custom-smalcode .abs-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
  #custom-smalcode .clearfix:after {
    clear: both;
    display: block;
    content: ""; }
  #custom-smalcode html.overflow-hidden {
    height: 100%;
    overflow: hidden; }
    #custom-smalcode html.overflow-hidden body {
      height: 100%;
      overflow: hidden; }
  #custom-smalcode .headline {
    margin-bottom: 25px;
    margin-top: 10px; }
  #custom-smalcode .orange-header {
    color: #FECB00; }
  #custom-smalcode .pos-helper {
    position: absolute;
    left: 0;
    width: 1px;
    height: 1px; }
    #custom-smalcode .pos-helper.pos-helper-1 {
      top: 50vh;
      top: calc(var(--vh) * 50); }
    #custom-smalcode .pos-helper.pos-helper-2 {
      top: 100vh;
      top: calc(var(--vh) * 100); }
    #custom-smalcode .pos-helper.pos-helper-3 {
      top: 150vh;
      top: calc(var(--vh) * 150); }
    #custom-smalcode .pos-helper.pos-helper-4 {
      top: 200vh;
      top: calc(var(--vh) * 200); }
    #custom-smalcode .pos-helper.pos-helper-5 {
      top: 250vh;
      top: calc(var(--vh) * 250); }
    #custom-smalcode .pos-helper.pos-helper-6 {
      top: 300vh;
      top: calc(var(--vh) * 300); }
  #custom-smalcode .row {
    display: -webkit-box;
    display: flex; }
    #custom-smalcode .row.align-row-top {
      -webkit-box-align: start;
              align-items: flex-start; }
    #custom-smalcode .row.align-row-end {
      -webkit-box-align: end;
              align-items: flex-end; }
    #custom-smalcode .row.align-row-center {
      -webkit-box-align: center;
              align-items: center; }
    #custom-smalcode .row.align-row-stretch {
      -webkit-box-align: stretch;
              align-items: stretch; }
    #custom-smalcode .row.no-flex {
      display: block; }
    #custom-smalcode .row.left-col-full [class^="col-"]:first-of-type {
      padding-left: 0;
      padding-right: 0; }
    #custom-smalcode .row.right-col-full [class^="col-"]:last-of-type {
      padding-left: 0;
      padding-right: 0; }
  #custom-smalcode [class^="col-"] {
    padding-right: 8px;
    padding-left: 8px; }
  #custom-smalcode .col-1 {
    width: 8.3333333333%; }
  #custom-smalcode .col-2 {
    width: 16.6666666667%; }
  #custom-smalcode .col-3 {
    width: 25%; }
  #custom-smalcode .col-4 {
    width: 33.3333333333%; }
  #custom-smalcode .col-5 {
    width: 41.6666666667%; }
  #custom-smalcode .col-6 {
    width: 50%; }
  #custom-smalcode .col-7 {
    width: 58.3333333333%; }
  #custom-smalcode .col-8 {
    width: 66.6666666667%; }
  #custom-smalcode .col-9 {
    width: 75%; }
  #custom-smalcode .col-10 {
    width: 83.3333333333%; }
  #custom-smalcode .col-11 {
    width: 91.6666666667%; }
  #custom-smalcode .col-12 {
    width: 100%; }
  @media only screen and (max-width: 1023px) {
    #custom-smalcode .row [class^="col-"] {
      padding-left: 32px;
      padding-right: 32px; }
    #custom-smalcode .row.tablet-break {
      display: block; }
      #custom-smalcode .row.tablet-break [class^="col-"].desktop {
        display: none; }
      #custom-smalcode .row.tablet-break .col-1 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-2 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-3 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-4 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-5 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-6 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-7 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-8 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-9 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-10 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-11 {
        width: 100%; }
      #custom-smalcode .row.tablet-break .col-12 {
        width: 100%; } }
  @media only screen and (max-width: 767px) {
    #custom-smalcode .row,
    #custom-smalcode .row.tablet-break {
      display: block; }
      #custom-smalcode .row [class^="col-"],
      #custom-smalcode .row.tablet-break [class^="col-"] {
        padding-left: 32px;
        padding-right: 32px; }
      #custom-smalcode .row.left-col-full [class^="col-"]:first-of-type,
      #custom-smalcode .row.tablet-break.left-col-full [class^="col-"]:first-of-type {
        padding-left: 0; }
      #custom-smalcode .row.right-col-full [class^="col-"]:last-of-type,
      #custom-smalcode .row.tablet-break.right-col-full [class^="col-"]:last-of-type {
        padding-right: 0; }
    #custom-smalcode .col-1 {
      width: 100%; }
    #custom-smalcode .col-2 {
      width: 100%; }
    #custom-smalcode .col-3 {
      width: 100%; }
    #custom-smalcode .col-4 {
      width: 100%; }
    #custom-smalcode .col-5 {
      width: 100%; }
    #custom-smalcode .col-6 {
      width: 100%; }
    #custom-smalcode .col-7 {
      width: 100%; }
    #custom-smalcode .col-8 {
      width: 100%; }
    #custom-smalcode .col-9 {
      width: 100%; }
    #custom-smalcode .col-10 {
      width: 100%; }
    #custom-smalcode .col-11 {
      width: 100%; }
    #custom-smalcode .col-12 {
      width: 100%; } }
  #custom-smalcode #grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2334;
    display: none; }
    #custom-smalcode #grid.active {
      display: block; }
    #custom-smalcode #grid div {
      height: 100%; }
    #custom-smalcode #grid .col-1 {
      position: relative; }
      #custom-smalcode #grid .col-1:after, #custom-smalcode #grid .col-1:before {
        width: 8px;
        background-color: red;
        opacity: 0.3;
        height: 100%;
        content: "";
        position: absolute;
        top: 0; }
      #custom-smalcode #grid .col-1:after {
        right: 0; }
      #custom-smalcode #grid .col-1:before {
        left: 0; }
      #custom-smalcode #grid .col-1:first-of-type:before {
        width: 100vw;
        left: calc(-100vw + 8px); }
      #custom-smalcode #grid .col-1:last-of-type:after {
        left: calc(100% - 8px);
        width: 100vw; }
  #custom-smalcode h1, #custom-smalcode h2, #custom-smalcode h3, #custom-smalcode h4, #custom-smalcode h5, #custom-smalcode h6, #custom-smalcode p {
    margin: 0; }
  #custom-smalcode .style-h1 {
    font-size: 138px;
    line-height: 138px;
    letter-spacing: -3px;
    text-transform: uppercase;
    font-family: 'Bebas Neue Pro SmE Rg';
    font-weight: bold; }
    @media only screen and (max-height: 899px) {
      #custom-smalcode .style-h1 {
        font-size: 118px;
        line-height: 118px;
        letter-spacing: -2px; } }
    @media only screen and (max-width: 1199px) {
      #custom-smalcode .style-h1 {
        font-size: 118px;
        line-height: 118px;
        letter-spacing: -2px; } }
    @media only screen and (max-height: 699px) {
      #custom-smalcode .style-h1 {
        font-size: 42px;
        line-height: 42px;
        letter-spacing: -1px; } }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h1 {
        font-size: 42px;
        line-height: 42px;
        letter-spacing: -1px; } }
  #custom-smalcode .style-h1-1 {
    font-size: 100px;
    line-height: 100px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'Bebas Neue Pro SmE Rg';
    font-weight: bold; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h1-1 {
        font-size: 48px;
        line-height: 48px;
        letter-spacing: 2px; } }
  #custom-smalcode .style-h2 {
    font-size: 95px;
    letter-spacing: 4px;
    line-height: 95px;
    font-family: 'Bebas Neue Pro SmE Rg';
    font-weight: bold;
    text-transform: uppercase; }
    @media only screen and (max-width: 1199px) {
      #custom-smalcode .style-h2 {
        font-size: 80px;
        letter-spacing: 2px;
        line-height: 85px; } }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h2 {
        font-size: 48px;
        line-height: 50px;
        letter-spacing: 2px; } }
  #custom-smalcode .style-h3 {
    font-size: 60px;
    line-height: 60px;
    font-weight: 300;
    text-transform: uppercase;
    font-family: 'Verveine';
    font-weight: normal; }
    @media only screen and (max-height: 699px) {
      #custom-smalcode .style-h3 {
        font-size: 40px;
        line-height: 48px; } }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h3 {
        font-size: 40px;
        line-height: 48px; } }
  #custom-smalcode .style-h4 {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 500; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h4 {
        font-size: 12px;
        letter-spacing: 2px; } }
  #custom-smalcode .style-h5 {
    font-size: 18px;
    letter-spacing: 1px;
    font-family: 'Bebas Neue Pro SmE Rg';
    font-weight: bold; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h5 {
        font-size: 13px;
        letter-spacing: 0px; } }
  #custom-smalcode .style-h6 {
    font-size: 22px;
    line-height: 28px;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: bold;
    text-transform: uppercase; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .style-h6 {
        font-size: 16px;
        line-height: 22px; } }
  #custom-smalcode .body-p1,
  #custom-smalcode .body-p1 p {
    font-size: 22px;
    line-height: 36px;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: normal; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .body-p1,
      #custom-smalcode .body-p1 p {
        font-size: 16px;
        line-height: 26px; } }
  #custom-smalcode .body-p2,
  #custom-smalcode .body-p2 p {
    font-size: 18px;
    line-height: 28px;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: normal; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .body-p2,
      #custom-smalcode .body-p2 p {
        font-size: 14px;
        line-height: 22px; } }
  #custom-smalcode .element-label-yellow {
    background-color: #FECB00;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 16px;
    display: inline-block; }
  #custom-smalcode .element-usp-wrap .flex-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
            align-items: flex-start;
    margin-top: 20px; }
  #custom-smalcode .element-usp-wrap .element-usp-item {
    text-align: center;
    font-size: 18px;
    font-family: 'Bebas Neue Pro SmE Rg';
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 20px;
    text-transform: uppercase;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    color: #808080; }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .element-usp-wrap .element-usp-item {
        font-size: 14px;
        line-height: 16px;
        letter-spacing: 0.5px; } }
    #custom-smalcode .element-usp-wrap .element-usp-item img {
      width: 80px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .element-usp-wrap .element-usp-item img {
        width: 60px;
        margin-bottom: 10px; } }
  @media only screen and (max-width: 767px) {
    #custom-smalcode .element-usp-wrap .flex-wrap {
      margin-top: 10px;
      flex-wrap: wrap; } }
  #custom-smalcode .element-usp-wrap:not(.no-fade) .element-usp-item,
  #custom-smalcode .element-usp-wrap:not(.no-fade) .usp-header {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
    will-change: transform, opacity;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out; }
    #custom-smalcode .element-usp-wrap:not(.no-fade) .element-usp-item.active,
    #custom-smalcode .element-usp-wrap:not(.no-fade) .usp-header.active {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0); }
  #custom-smalcode .element-image-mask {
    position: relative;
    overflow: hidden; }
    #custom-smalcode .element-image-mask .mask {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      z-index: 5;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
      will-change: transform;
      -webkit-transition: 0.8s ease-out;
      transition: 0.8s ease-out; }
      #custom-smalcode .element-image-mask .mask.active {
        -webkit-transform: translate(100%, 0);
                transform: translate(100%, 0); }
  #custom-smalcode .text-fade-in-1 {
    opacity: 0;
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
    will-change: transform, opacity;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out; }
    #custom-smalcode .text-fade-in-1.active {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0); }
  #custom-smalcode .element-feature .inner-text-wrap {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 25px; }
  #custom-smalcode .element-feature .feature-headline {
    margin-top: 5px;
    margin-bottom: 25px;
    text-transform: uppercase; }
  #custom-smalcode .element-feature .feature-subheadline {
    color: #808080; }
  #custom-smalcode .element-feature .bg-image {
    height: 488px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative; }
  @media only screen and (max-width: 1023px) {
    #custom-smalcode .element-feature .feature-headline {
      margin-top: 2px;
      margin-bottom: 10px; }
    #custom-smalcode .element-feature:not(.element-feature-4-elements) {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center; }
      #custom-smalcode .element-feature:not(.element-feature-4-elements) .bg-image,
      #custom-smalcode .element-feature:not(.element-feature-4-elements) .inner-text-wrap {
        width: 50%; }
      #custom-smalcode .element-feature:not(.element-feature-4-elements) .bg-image {
        height: 0;
        padding-bottom: 61%; }
      #custom-smalcode .element-feature:not(.element-feature-4-elements) .inner-text-wrap {
        margin-top: 0;
        padding-left: 25px;
        padding-right: 15px; }
    #custom-smalcode .element-feature.element-feature-4-elements .inner-text-wrap {
      padding-left: 20px;
      padding-right: 20px; }
    #custom-smalcode .element-feature.element-feature-4-elements .bg-image {
      height: 0;
      padding-bottom: 120%; } }
  @media only screen and (max-width: 767px) {
    #custom-smalcode .element-feature.element-feature-4-elements, #custom-smalcode .element-feature:not(.element-feature-4-elements) {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center; }
      #custom-smalcode .element-feature.element-feature-4-elements .bg-image,
      #custom-smalcode .element-feature.element-feature-4-elements .inner-text-wrap, #custom-smalcode .element-feature:not(.element-feature-4-elements) .bg-image,
      #custom-smalcode .element-feature:not(.element-feature-4-elements) .inner-text-wrap {
        width: 50%; }
      #custom-smalcode .element-feature.element-feature-4-elements .bg-image, #custom-smalcode .element-feature:not(.element-feature-4-elements) .bg-image {
        height: 0;
        padding-bottom: 61%; }
      #custom-smalcode .element-feature.element-feature-4-elements .inner-text-wrap, #custom-smalcode .element-feature:not(.element-feature-4-elements) .inner-text-wrap {
        margin-top: 0;
        padding-left: 25px;
        padding-right: 15px; } }
  #custom-smalcode .element-feature {
    opacity: 0;
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
    will-change: transform, opacity;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out; }
    #custom-smalcode .element-feature.active {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0); }
  #custom-smalcode .element-icue-software .icue-header {
    margin-bottom: 40px; }
  #custom-smalcode .element-icue-software .icue-icon {
    width: 142px;
    margin-right: 30px; }
  #custom-smalcode .element-icue-software .flex-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center; }
  @media only screen and (max-width: 767px) {
    #custom-smalcode .element-icue-software .icue-header {
      margin-bottom: 15px; }
    #custom-smalcode .element-icue-software .icue-icon {
      width: 70px;
      margin-right: 30px; } }
  #custom-smalcode .element-icue-software {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
    will-change: transform, opacity;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out; }
    #custom-smalcode .element-icue-software.active {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0); }
  #custom-smalcode .cta-learn-more {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center; }
    #custom-smalcode .cta-learn-more img {
      width: 10px;
      margin-left: 10px; }
  #custom-smalcode .cta-white {
    background-color: white;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
    display: inline-block;
    display: inline-block;
    cursor: pointer; }
  #custom-smalcode .element-zoom-image {
    position: relative;
    margin-left: 40px;
    margin-right: 40px;
    overflow: hidden; }
    #custom-smalcode .element-zoom-image .cta-white {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%) translate(0, -0.5px);
              transform: translate(-50%, -50%) translate(0, -0.5px); }
    #custom-smalcode .element-zoom-image video {
      width: 100%;
      height: auto;
      display: block; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .element-zoom-image {
        margin-left: 0;
        margin-right: 0; } }
  #custom-smalcode .element-zoom-image {
    opacity: 0;
    will-change: opacity;
    -webkit-transition: 0.8s;
    transition: 0.8s; }
    #custom-smalcode .element-zoom-image.active {
      opacity: 1; }
    #custom-smalcode .element-zoom-image .zoom-ele {
      -webkit-transform: scale(1.4);
              transform: scale(1.4);
      will-change: transform;
      -webkit-transition: 0.8s;
      transition: 0.8s; }
      #custom-smalcode .element-zoom-image .zoom-ele.active {
        -webkit-transform: scale(1);
                transform: scale(1); }
  #custom-smalcode .element-product-teaser {
    padding-top: 40px;
    padding-bottom: 30px;
    height: 100%; }
    #custom-smalcode .element-product-teaser .image-swap-element {
      padding-left: 50px;
      padding-right: 50px; }
      #custom-smalcode .element-product-teaser .image-swap-element img {
        display: none; }
    #custom-smalcode .element-product-teaser.black .image-swap-element [data-id="black"],
    #custom-smalcode .element-product-teaser.white .image-swap-element [data-id="white"],
    #custom-smalcode .element-product-teaser.red .image-swap-element [data-id="red"] {
      display: block; }
    #custom-smalcode .element-product-teaser .color-picker-wrap {
      display: -webkit-inline-box;
      display: inline-flex;
      margin-bottom: 40px; }
      #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker {
        width: 24px;
        height: 24px;
        position: relative;
        margin-right: 25px;
        cursor: pointer; }
        #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker:last-of-type {
          margin-right: 0; }
        #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker .color-bullet {
          width: 16px;
          height: 16px;
          position: absolute;
          border-radius: 100%;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
        #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker .active-indicator {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          border: 2px solid white;
          border-radius: 100%;
          opacity: 0;
          -webkit-transition: 0.2s ease-out;
          transition: 0.2s ease-out;
          will-change: opacity; }
        #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker.black .color-bullet {
          background-color: black; }
        #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker.white .color-bullet {
          background-color: white; }
        #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker.red .color-bullet {
          background-color: red; }
    #custom-smalcode .element-product-teaser.black .color-picker-wrap .color-picker.black .active-indicator,
    #custom-smalcode .element-product-teaser.white .color-picker-wrap .color-picker.white .active-indicator,
    #custom-smalcode .element-product-teaser.red .color-picker-wrap .color-picker.red .active-indicator {
      opacity: 1; }
    #custom-smalcode .element-product-teaser .cta-transparent {
      display: none; }
    #custom-smalcode .element-product-teaser.black .cta-transparent.black,
    #custom-smalcode .element-product-teaser.white .cta-transparent.white,
    #custom-smalcode .element-product-teaser.red .cta-transparent.red {
      display: inline-block; }
    #custom-smalcode .element-product-teaser .inner-title {
      font-size: 38px;
      letter-spacing: -0.8px;
      text-transform: uppercase;
      margin-bottom: 25px;
      font-family: 'Bebas Neue Pro SmE Rg';
      font-weight: bold; }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .element-product-teaser {
        padding-top: 25px;
        padding-bottom: 25px; }
        #custom-smalcode .element-product-teaser .image-swap-element {
          padding-left: 0;
          padding-right: 0; }
        #custom-smalcode .element-product-teaser .color-picker-wrap {
          margin-bottom: 25px; }
          #custom-smalcode .element-product-teaser .color-picker-wrap .color-picker {
            margin-right: 15px; }
        #custom-smalcode .element-product-teaser .inner-title {
          margin-bottom: 15px;
          font-size: 28px;
          letter-spacing: -0.4px; } }
  #custom-smalcode .element-product-teaser {
    opacity: 0;
    -webkit-transform: translate(0, 100px);
            transform: translate(0, 100px);
    will-change: transform, opacity;
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out; }
    #custom-smalcode .element-product-teaser.active {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0); }
  #custom-smalcode .cta-transparent {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 300;
    text-transform: uppercase;
    border: 1px solid white;
    display: inline-block;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family: aktiv-grotesk, sans-serif;
    font-weight: 500;
    -webkit-transition: 0.2s ease-out;
    transition: 0.2s ease-out; }
    #custom-smalcode .cta-transparent:hover {
      background-color: black;
      border: 1px solid black; }
  #custom-smalcode .element-pax-move {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    will-change: transform; }
    #custom-smalcode .element-pax-move.active {
      -webkit-transform: translate(0, -30vh);
              transform: translate(0, -30vh);
      -webkit-transform: translate(0, calc(var(--vh) * -30));
              transform: translate(0, calc(var(--vh) * -30)); }
  #custom-smalcode .element-video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #252525;
    z-index: 110;
    pointer-events: none;
    opacity: 0;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    will-change: opacity; }
    #custom-smalcode .element-video-popup.active {
      opacity: 1;
      pointer-events: all; }
    #custom-smalcode .element-video-popup .center-item {
      width: 100%; }
    #custom-smalcode .element-video-popup .inner-popup {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center;
      height: 100%;
      width: 70%;
      margin-left: auto;
      margin-right: auto; }
    #custom-smalcode .element-video-popup .close-wrap {
      margin-left: auto;
      margin-right: auto;
      width: 22px;
      cursor: pointer;
      margin-bottom: 30px; }
    #custom-smalcode .element-video-popup video,
    #custom-smalcode .element-video-popup iframe {
      width: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto; }
    #custom-smalcode .element-video-popup iframe {
      height: 100%; }
    #custom-smalcode .element-video-popup .ratio-wrap {
      padding-bottom: 56.25%;
      height: 0;
      position: relative; }
    #custom-smalcode .element-video-popup .abs-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .element-video-popup .inner-popup {
        width: 90%; } }
  #custom-smalcode .panel-hero-pdp {
    background-color: #f9f9f9;
    text-align: center;
    height: 100vh;
    height: calc(var(--vh) * 100);
    position: relative;
    overflow: hidden; }
    #custom-smalcode .panel-hero-pdp .headline-wrap {
      display: -webkit-inline-box;
      display: inline-flex;
      -webkit-box-align: center;
              align-items: center;
      margin-bottom: 25px; }
      #custom-smalcode .panel-hero-pdp .headline-wrap .element-label-yellow {
        margin-left: 20px; }
    #custom-smalcode .panel-hero-pdp .hero-device {
      position: absolute;
      height: 65vh;
      height: calc(var(--vh) * 65);
      width: auto;
      bottom: 0;
      left: 50%;
      z-index: 5; }
    #custom-smalcode .panel-hero-pdp .title-wrap {
      position: absolute;
      left: 0;
      width: 100%;
      top: 13vh;
      top: calc(var(--vh) * 13);
      z-index: 10; }
    @media only screen and (max-height: 899px) {
      #custom-smalcode .panel-hero-pdp .hero-device {
        height: 60vh;
        height: calc(var(--vh) * 60); } }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-hero-pdp {
        height: 85vh;
        height: calc(var(--vh) * 85); }
        #custom-smalcode .panel-hero-pdp .hero-device {
          height: 50vh;
          height: calc(var(--vh) * 50); } }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-hero-pdp .headline-wrap {
        margin-bottom: 10px; } }
  #custom-smalcode .panel-hero-pdp .hero-device {
    opacity: 0;
    -webkit-transform: scale(1.3) translate(-50%, 0);
            transform: scale(1.3) translate(-50%, 0);
    will-change: transform, opacity;
    -webkit-transition: 0.8s ease-out;
    transition: 0.8s ease-out; }
    #custom-smalcode .panel-hero-pdp .hero-device.active {
      opacity: 1;
      -webkit-transform: scale(1) translate(-50%, 0);
              transform: scale(1) translate(-50%, 0); }
  #custom-smalcode .panel-explosion-view {
    position: relative;
    padding-bottom: 33vw;
    padding-top: 120px; }
    #custom-smalcode .panel-explosion-view .bg-layer {
      position: relative;
      z-index: 3;
      width: 70%;
      right: 2%;
      bottom: 0;
      position: absolute;
      z-index: 5; }
      @media only screen and (max-width: 1023px) {
        #custom-smalcode .panel-explosion-view .bg-layer {
          position: relative;
          width: 100%;
          right: 0;
          margin-top: 20px; } }
    #custom-smalcode .panel-explosion-view .text-layer {
      position: relative;
      z-index: 10; }
    #custom-smalcode .panel-explosion-view .element-usp-wrap {
      margin-top: 60px; }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-explosion-view {
        padding-top: 50px;
        padding-bottom: 50px; }
        #custom-smalcode .panel-explosion-view .text-layer {
          position: relative;
          top: auto; }
        #custom-smalcode .panel-explosion-view .element-usp-wrap {
          margin-top: 40px; } }
  #custom-smalcode .panel-comfort {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #f9f9f9;
    position: relative; }
    #custom-smalcode .panel-comfort .outer-usp-wrap {
      margin-top: 60px;
      margin-bottom: 25px;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: end;
              justify-content: flex-end; }
    #custom-smalcode .panel-comfort .relative-wrap {
      position: relative;
      padding-bottom: 20vw; }
    #custom-smalcode .panel-comfort .element-image-mask .mask {
      background-color: #f9f9f9; }
    #custom-smalcode .panel-comfort .image-mask-1 {
      margin-top: 60px; }
    #custom-smalcode .panel-comfort .image-swap {
      position: absolute;
      bottom: 0;
      right: 15%;
      width: 58%;
      z-index: 5; }
      #custom-smalcode .panel-comfort .image-swap .device-left {
        position: absolute;
        bottom: 21%;
        left: 13%;
        width: 28.1%; }
      #custom-smalcode .panel-comfort .image-swap .device-right {
        position: absolute;
        bottom: 9.5%;
        right: 11.5%;
        width: 44%; }
        #custom-smalcode .panel-comfort .image-swap .device-right.wireless {
          bottom: 13.5%; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-comfort {
        padding-top: 50px;
        padding-bottom: 40px; } }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-comfort {
        text-align: right;
        overflow: hidden;
        /*.element-image-mask{
      width: 60%;
      display: inline-block;
    }*/ }
        #custom-smalcode .panel-comfort .relative-wrap {
          padding-bottom: 30px; }
        #custom-smalcode .panel-comfort .image-mask-1 {
          margin-top: 0;
          margin-bottom: 0;
          width: 50%; }
        #custom-smalcode .panel-comfort .image-mask-2 {
          width: 80%;
          display: inline-block; }
        #custom-smalcode .panel-comfort .outer-usp-wrap {
          margin-top: 40px;
          margin-bottom: 30px; }
        #custom-smalcode .panel-comfort .image-swap {
          right: -5%;
          left: auto;
          width: 75%;
          bottom: -5%; } }
  #custom-smalcode .panel-comfort .image-swap .device-left {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    will-change: transform; }
    #custom-smalcode .panel-comfort .image-swap .device-left.active {
      -webkit-transform: rotate(20deg) translate(-18%, 11%);
              transform: rotate(20deg) translate(-18%, 11%); }
  #custom-smalcode .panel-comfort .image-swap .device-right {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    will-change: transform; }
    #custom-smalcode .panel-comfort .image-swap .device-right.active {
      -webkit-transform: rotate(-20deg) translate(12%, 13%);
              transform: rotate(-20deg) translate(12%, 13%); }
  #custom-smalcode .panel-connectivity {
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative; }
    #custom-smalcode .panel-connectivity .element-usp-wrap-2 {
      margin-top: 0;
      margin-left: 60px; }
    #custom-smalcode .panel-connectivity .row-image-usp {
      margin-top: 50px; }
    #custom-smalcode .panel-connectivity .usp-outer-wrap {
      display: -webkit-box;
      display: flex;
      margin-bottom: 40px; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-connectivity {
        padding-top: 40px;
        padding-bottom: 0; }
        #custom-smalcode .panel-connectivity .row-image-usp {
          margin-top: 30px; }
        #custom-smalcode .panel-connectivity .element-usp-wrap-2 {
          margin-top: 30px;
          margin-bottom: 25px;
          margin-left: 0; }
        #custom-smalcode .panel-connectivity .col-image {
          padding-left: 0;
          padding-right: 0; }
        #custom-smalcode .panel-connectivity .usp-outer-wrap {
          display: block; } }
  #custom-smalcode .panel-features {
    padding-top: 110px;
    padding-bottom: 50px;
    position: relative;
    background-color: #f9f9f9;
    text-align: center; }
    #custom-smalcode .panel-features .row-features {
      margin-top: 40px; }
    #custom-smalcode .panel-features .element-feature {
      text-align: left; }
    #custom-smalcode .panel-features .headline {
      margin-bottom: 0; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-features {
        padding-bottom: 35px;
        padding-top: 65px; }
        #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"] {
          padding-left: 0;
          padding-right: 0;
          margin-bottom: 25px; }
          #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"]:last-of-type {
            margin-bottom: 0; }
          #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"]:nth-child(odd) .element-feature {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
                    flex-direction: row-reverse; }
            #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"]:nth-child(odd) .element-feature .inner-text-wrap {
              padding-right: 25px;
              padding-left: 15px; }
        #custom-smalcode .panel-features.panel-features-4-elements .row-features {
          display: -webkit-box;
          display: flex;
          -webkit-box-align: start;
                  align-items: flex-start;
          flex-flow: wrap; }
          #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"] {
            width: 50%;
            margin-top: 30px; }
            #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"]:nth-child(1), #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"]:nth-child(2) {
              margin-top: 0; } }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features, #custom-smalcode .panel-features.panel-features-4-elements .row-features {
        display: block; }
        #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"], #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"] {
          padding-left: 0;
          padding-right: 0;
          margin-bottom: 25px;
          width: 100%;
          margin-top: 0; }
          #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"]:last-of-type, #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"]:last-of-type {
            margin-bottom: 0; }
          #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"]:nth-child(odd) .element-feature, #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"]:nth-child(odd) .element-feature {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
                    flex-direction: row-reverse; }
            #custom-smalcode .panel-features:not(.panel-features-4-elements) .row-features [class^="col-"]:nth-child(odd) .element-feature .inner-text-wrap, #custom-smalcode .panel-features.panel-features-4-elements .row-features [class^="col-"]:nth-child(odd) .element-feature .inner-text-wrap {
              padding-right: 25px;
              padding-left: 15px; } }
  #custom-smalcode .panel-programmable {
    padding-top: 120px;
    padding-bottom: 40px;
    position: relative; }
    #custom-smalcode .panel-programmable .row-icue-usps {
      margin-top: 40px; }
    #custom-smalcode .panel-programmable .usp-outer-wrap {
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: end;
              justify-content: flex-end; }
    #custom-smalcode .panel-programmable .element-usp-wrap-1 {
      margin-right: 50px; }
    #custom-smalcode .panel-programmable .element-zoom-image {
      margin-top: 40px; }
    #custom-smalcode .panel-programmable .element-usp-wrap {
      margin-top: 50px; }
    @media only screen and (min-width: 1024px) {
      #custom-smalcode .panel-programmable .col-text {
        padding-right: 50px; } }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-programmable {
        padding-top: 65px;
        padding-bottom: 0; }
        #custom-smalcode .panel-programmable .element-icue-software {
          margin-top: 50px; }
        #custom-smalcode .panel-programmable .usp-outer-wrap {
          display: block; }
        #custom-smalcode .panel-programmable .element-usp-wrap-1 {
          margin-right: 0; }
        #custom-smalcode .panel-programmable .element-usp-wrap-1,
        #custom-smalcode .panel-programmable .element-usp-wrap-2 {
          margin-top: 40px; } }
  #custom-smalcode .panel-hero-category {
    position: relative;
    height: 100vh;
    height: calc(var(--vh) * 100);
    text-align: center;
    background-color: black; }
    #custom-smalcode .panel-hero-category .bg-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
      #custom-smalcode .panel-hero-category .bg-layer .bg-image {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center; }
    #custom-smalcode .panel-hero-category .headline-layer {
      position: absolute;
      top: 45%;
      left: 0;
      width: 100%; }
    #custom-smalcode .panel-hero-category .headline {
      margin-top: 25px;
      margin-bottom: 35px; }
    #custom-smalcode .panel-hero-category .link-list {
      display: -webkit-inline-box;
      display: inline-flex;
      text-transform: uppercase;
      font-size: 30px;
      line-height: 30px;
      text-transform: uppercase;
      font-family: 'Bebas Neue Pro SmE Rg';
      font-weight: bold; }
      @media only screen and (max-width: 767px) {
        #custom-smalcode .panel-hero-category .link-list {
          font-size: 16px; } }
      #custom-smalcode .panel-hero-category .link-list a {
        display: block;
        margin-right: 60px; }
        #custom-smalcode .panel-hero-category .link-list a:last-of-type {
          margin-right: 0; }
    #custom-smalcode .panel-hero-category .read-more-layer {
      position: absolute;
      bottom: 0;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0);
      white-space: nowrap; }
      #custom-smalcode .panel-hero-category .read-more-layer .text {
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 3px;
        font-family: aktiv-grotesk, sans-serif;
        font-weight: 500; }
        @media only screen and (max-width: 767px) {
          #custom-smalcode .panel-hero-category .read-more-layer .text {
            font-size: 12px;
            letter-spacing: 2px; } }
      #custom-smalcode .panel-hero-category .read-more-layer .animation-wrap {
        height: 40px;
        overflow: hidden;
        position: relative; }
        #custom-smalcode .panel-hero-category .read-more-layer .animation-wrap .line {
          width: 2px;
          height: 34px;
          position: absolute;
          bottom: 0;
          left: 50%;
          -webkit-transform: translate(-50%, 0);
                  transform: translate(-50%, 0);
          background-color: white;
          -webkit-animation: heroLineMove 2s infinite;
                  animation: heroLineMove 2s infinite;
          will-change: transform; }
    #custom-smalcode .panel-hero-category .video-layer {
      position: absolute;
      right: 20px;
      bottom: 20px;
      width: 185px;
      cursor: pointer; }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-hero-category .style-h1 {
        font-size: 82px;
        line-height: 92px;
        letter-spacing: -1px; } }
  #custom-smalcode .panel-hero-category .video-layer .play-icon,
  #custom-smalcode .panel-hero-category-video-layer-mobile .video-layer .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 16px; }
  #custom-smalcode .panel-hero-category-video-layer-mobile {
    text-align: center;
    padding-top: 75px;
    padding-bottom: 50px;
    padding-left: 32px;
    padding-right: 32px;
    background-color: #363636; }
    #custom-smalcode .panel-hero-category-video-layer-mobile .video-layer {
      position: relative;
      margin-top: 30px; }

@-webkit-keyframes heroLineMove {
  from {
    -webkit-transform: translate(-50%, -45px);
            transform: translate(-50%, -45px); }
  to {
    -webkit-transform: translate(-50%, 45px);
            transform: translate(-50%, 45px); } }

@keyframes heroLineMove {
  from {
    -webkit-transform: translate(-50%, -45px);
            transform: translate(-50%, -45px); }
  to {
    -webkit-transform: translate(-50%, 45px);
            transform: translate(-50%, 45px); } }
  #custom-smalcode .panel-hero-category .bg-layer {
    opacity: 1;
    will-change: opacity; }
    #custom-smalcode .panel-hero-category .bg-layer.active {
      opacity: 0; }
  #custom-smalcode .panel-hero-category {
    overflow: hidden; }
    #custom-smalcode .panel-hero-category .bg-layer .inner-fade-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      will-change: opacity;
      opacity: 1; }
      #custom-smalcode .panel-hero-category .bg-layer .inner-fade-layer.active {
        opacity: 0; }
    #custom-smalcode .panel-hero-category .bg-layer .inner-move-up-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
    #custom-smalcode .panel-hero-category .bg-layer img {
      height: 82%;
      width: auto;
      position: absolute;
      top: 9.5%;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0); }
    #custom-smalcode .panel-hero-category .bg-layer.width-full img {
      width: 36%;
      height: auto;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
    #custom-smalcode .panel-hero-category .element-image-mask .mask {
      background-color: black;
      -webkit-transition: 1s ease-out;
      transition: 1s ease-out; }
  #custom-smalcode .panel-hero-category .headline-layer .style-h6,
  #custom-smalcode .panel-hero-category .headline-layer .headline,
  #custom-smalcode .panel-hero-category .headline-layer a {
    will-change: opacity;
    opacity: 0; }
    #custom-smalcode .panel-hero-category .headline-layer .style-h6.fade-in,
    #custom-smalcode .panel-hero-category .headline-layer .headline.fade-in,
    #custom-smalcode .panel-hero-category .headline-layer a.fade-in {
      opacity: 1; }
  #custom-smalcode .panel-hero-category .headline-layer .style-h6,
  #custom-smalcode .panel-hero-category .headline-layer .headline {
    -webkit-transition: 1s ease-out;
    transition: 1s ease-out; }
  #custom-smalcode .panel-hero-category .headline-layer a {
    -webkit-transition: 0.4s ease-out;
    transition: 0.4s ease-out; }
  #custom-smalcode .panel-hero-category .bg-layer {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    will-change: opacity, transform;
    -webkit-transition: 2s ease-out;
    transition: 2s ease-out; }
    #custom-smalcode .panel-hero-category .bg-layer.zoom-in {
      -webkit-transform: scale(1);
              transform: scale(1); }
    #custom-smalcode .panel-hero-category .bg-layer .bg-image,
    #custom-smalcode .panel-hero-category .bg-layer img {
      opacity: 0;
      will-change: opacity;
      -webkit-transition: 0.4s ease-out;
      transition: 0.4s ease-out; }
      #custom-smalcode .panel-hero-category .bg-layer .bg-image.fade-in,
      #custom-smalcode .panel-hero-category .bg-layer img.fade-in {
        opacity: 1; }
    #custom-smalcode .panel-hero-category .bg-layer .bg-image {
      -webkit-transition: 1s ease-out;
      transition: 1s ease-out; }
    #custom-smalcode .panel-hero-category .bg-layer .inner-move-up-layer {
      -webkit-transform: translate(0, 50px);
              transform: translate(0, 50px);
      will-change: transform;
      -webkit-transition: 0.5s ease-out;
      transition: 0.5s ease-out; }
      #custom-smalcode .panel-hero-category .bg-layer .inner-move-up-layer.active {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0); }
  #custom-smalcode .panel-hero-category .read-more-layer {
    -webkit-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
    will-change: transform;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out; }
    #custom-smalcode .panel-hero-category .read-more-layer.fade-in {
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0); }
  @media only screen and (max-width: 767px) {
    #custom-smalcode .panel-hero-category .headline {
      margin-top: 0;
      margin-bottom: 0; }
    #custom-smalcode .panel-hero-category .link-list a {
      margin-right: 40px; }
    #custom-smalcode .panel-hero-category .bg-layer img {
      height: 55%;
      top: 23.5%; }
    #custom-smalcode .panel-hero-category .bg-layer .bg-image {
      top: auto;
      height: 65%;
      bottom: 30vw; } }
  #custom-smalcode .panel-meet-the-family {
    padding-top: 120px;
    padding-bottom: 60px;
    text-align: center;
    position: relative;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#363636), color-stop(52%, #4B4B4B), color-stop(68%, #414141));
    background-image: -webkit-linear-gradient(top, #363636 0%, #4B4B4B 52%, #414141 68%);
    background-image: linear-gradient(180deg, #363636 0%, #4B4B4B 52%, #414141 68%); }
    #custom-smalcode .panel-meet-the-family > .maxWidth {
      position: relative;
      z-index: 99; }
    #custom-smalcode .panel-meet-the-family .headline-wrap {
      margin-bottom: 25px; }
    #custom-smalcode .panel-meet-the-family .row-teasers {
      margin-top: 70px; }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-meet-the-family {
        padding-top: 70px;
        padding-bottom: 40px; }
        #custom-smalcode .panel-meet-the-family .headline-wrap {
          margin-bottom: 15px; }
        #custom-smalcode .panel-meet-the-family .row-teasers {
          margin-top: 30px; }
          #custom-smalcode .panel-meet-the-family .row-teasers [class^="col-"] {
            padding-left: 4px;
            padding-right: 4px; } }
  #custom-smalcode .panel-audio-quality-2 {
    position: relative;
    padding-top: 110px;
    padding-bottom: 23vw; }
    #custom-smalcode .panel-audio-quality-2 .element-usp-wrap {
      margin-top: 60px; }
    #custom-smalcode .panel-audio-quality-2 .element-image-mask .mask {
      background-color: #414141; }
    #custom-smalcode .panel-audio-quality-2 .text-layer {
      position: relative;
      z-index: 10; }
    #custom-smalcode .panel-audio-quality-2 .bg-layer {
      width: 70%;
      right: 2%;
      bottom: 0;
      position: absolute;
      z-index: 5; }
      @media only screen and (max-width: 1023px) {
        #custom-smalcode .panel-audio-quality-2 .bg-layer {
          position: relative;
          width: 100%;
          right: 0;
          margin-top: 20px; } }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-audio-quality-2 {
        padding-top: 50px;
        padding-bottom: 30px; }
        #custom-smalcode .panel-audio-quality-2 .element-usp-wrap {
          margin-top: 40px; }
        #custom-smalcode .panel-audio-quality-2 .element-image-mask {
          margin-top: 15px; } }
  #custom-smalcode .product-sequence {
    position: relative; }
    #custom-smalcode .product-sequence img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0; }
      #custom-smalcode .product-sequence img.active {
        opacity: 1; }
      #custom-smalcode .product-sequence img:first-of-type {
        position: relative; }
  #custom-smalcode .panel-comfort-2 {
    padding-top: 110px;
    position: relative;
    background: -webkit-gradient(linear, left top, left bottom, from(#414141), color-stop(68%, #4a4a4c));
    background: -webkit-linear-gradient(top, #414141 0%, #4a4a4c 68%);
    background: linear-gradient(180deg, #414141 0%, #4a4a4c 68%); }
    #custom-smalcode .panel-comfort-2 .bg-layer {
      position: absolute;
      top: 50%;
      left: 0;
      width: 70%;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%); }
    #custom-smalcode .panel-comfort-2 .text-layer {
      position: relative; }
    #custom-smalcode .panel-comfort-2 .outer-usp-wrap {
      margin-top: 60px;
      margin-bottom: 20px;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: end;
              justify-content: flex-end; }
    #custom-smalcode .panel-comfort-2 video {
      width: 100%;
      height: auto; }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-comfort-2 {
        padding-top: 50px;
        padding-bottom: 50px;
        text-align: right; }
        #custom-smalcode .panel-comfort-2 .row-image {
          margin-top: -50px; }
          #custom-smalcode .panel-comfort-2 .row-image video {
            width: 120px;
            height: auto;
            display: inline-block; } }
  #custom-smalcode .panel-category-sticky,
  #custom-smalcode .panel-category-sticky-mobile {
    background-color: #4a4a4c; }
    #custom-smalcode .panel-category-sticky .pos-helper-1,
    #custom-smalcode .panel-category-sticky-mobile .pos-helper-1 {
      top: 60vh;
      top: calc(var(--vh) * 60); }
    #custom-smalcode .panel-category-sticky .pos-helper-2,
    #custom-smalcode .panel-category-sticky-mobile .pos-helper-2 {
      top: 120vh;
      top: calc(var(--vh) * 120); }
    #custom-smalcode .panel-category-sticky .seperator,
    #custom-smalcode .panel-category-sticky-mobile .seperator {
      margin-top: 25px;
      margin-bottom: 15px;
      width: 34px;
      height: 2px;
      background-color: #FECB00; }
    #custom-smalcode .panel-category-sticky .sticky-layer,
    #custom-smalcode .panel-category-sticky-mobile .sticky-layer {
      height: 100vh;
      height: calc(var(--vh) * 100);
      width: 100%;
      overflow: hidden; }
    #custom-smalcode .panel-category-sticky .image-wrap,
    #custom-smalcode .panel-category-sticky-mobile .image-wrap {
      position: absolute;
      left: 0;
      width: 100%;
      top: 50%;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%); }
      #custom-smalcode .panel-category-sticky .image-wrap .images-outer-wrap,
      #custom-smalcode .panel-category-sticky-mobile .image-wrap .images-outer-wrap {
        position: relative;
        -webkit-transform: scale(1.5);
                transform: scale(1.5); }
        #custom-smalcode .panel-category-sticky .image-wrap .images-outer-wrap.active,
        #custom-smalcode .panel-category-sticky-mobile .image-wrap .images-outer-wrap.active {
          -webkit-transform: scale(1);
                  transform: scale(1); }
      #custom-smalcode .panel-category-sticky .image-wrap .images,
      #custom-smalcode .panel-category-sticky-mobile .image-wrap .images {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0; }
        #custom-smalcode .panel-category-sticky .image-wrap .images img,
        #custom-smalcode .panel-category-sticky-mobile .image-wrap .images img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0; }
          #custom-smalcode .panel-category-sticky .image-wrap .images img.active,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .images img.active {
            opacity: 1; }
      #custom-smalcode .panel-category-sticky .image-wrap .pfb-1,
      #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0; }
        #custom-smalcode .panel-category-sticky .image-wrap .pfb-1.active,
        #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1.active {
          opacity: 1; }
        #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator,
        #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator {
          width: 26px;
          height: 26px;
          position: absolute;
          cursor: pointer; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator .inner-bullet,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator .inner-bullet {
            width: 12px;
            height: 12px;
            background-color: white;
            position: absolute;
            border-radius: 100%;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            -webkit-transition: 0.2s ease-out;
            transition: 0.2s ease-out;
            will-change: transform; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator .inner-circle,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator .inner-circle {
            width: 26px;
            height: 26px;
            border-radius: 100%;
            border: 1px solid #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            -webkit-transition: 0.2s ease-out;
            transition: 0.2s ease-out;
            will-change: width, height, opacity; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator:not(.active) .inner-circle,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator:not(.active) .inner-circle {
            -webkit-animation: indicatorLoop 2s infinite;
                    animation: indicatorLoop 2s infinite; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.active .inner-bullet,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.active .inner-bullet {
            background-color: #FECB00; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.active .inner-circle,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.active .inner-circle {
            border: 1px solid #FECB00; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.indicator-1,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.indicator-1 {
            top: 47%;
            left: 69%; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.indicator-2,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.indicator-2 {
            top: 77%;
            left: 66%; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.indicator-3,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.indicator-3 {
            top: 75%;
            left: 6%; }
          #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.indicator-4,
          #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.indicator-4 {
            top: 62%;
            left: 57%; }
            @media only screen and (max-width: 767px) {
              #custom-smalcode .panel-category-sticky .image-wrap .pfb-1 .indicator.indicator-4,
              #custom-smalcode .panel-category-sticky-mobile .image-wrap .pfb-1 .indicator.indicator-4 {
                top: 59%;
                left: 55%; } }
    #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity,
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity {
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
      -webkit-transform: translate(0, 90vh);
              transform: translate(0, 90vh);
      -webkit-transform: translate(0, calc(var(--vh) * 90));
              transform: translate(0, calc(var(--vh) * 90)); }
      #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity.active,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity.active {
        -webkit-transform: translate(0, 50vh) translate(0, -50%);
                transform: translate(0, 50vh) translate(0, -50%);
        -webkit-transform: translate(0, calc(var(--vh) * 50)) translate(0, -50%);
                transform: translate(0, calc(var(--vh) * 50)) translate(0, -50%); }
      #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity.fadeAway,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity.fadeAway {
        -webkit-transform: translate(0, 0vh) translate(0, -100%);
                transform: translate(0, 0vh) translate(0, -100%); }
      #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .element-usp-wrap,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .element-usp-wrap {
        margin-top: 60px;
        margin-bottom: 25px; }
        #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .element-usp-wrap .element-usp-item,
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .element-usp-wrap .element-usp-item {
          opacity: 0.3; }
          #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .element-usp-wrap .element-usp-item.active,
          #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .element-usp-wrap .element-usp-item.active {
            opacity: 1; }
      #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .info-elements-wrap,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-elements-wrap {
        position: relative; }
      #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .info-element,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; }
        #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .info-element.active,
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element.active {
          opacity: 1; }
        #custom-smalcode .panel-category-sticky .inner-panel-wrap-connectivity .info-element .info-headline,
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element .info-headline {
          margin-bottom: 25px; }
    #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-title,
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-title {
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
      -webkit-transform: translate(0, 100vh);
              transform: translate(0, 100vh);
      -webkit-transform: translate(0, calc(var(--vh) * 100));
              transform: translate(0, calc(var(--vh) * 100));
      pointer-events: none; }
      #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-title.active,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-title.active {
        -webkit-transform: translate(0, 10vh);
                transform: translate(0, 10vh);
        -webkit-transform: translate(0, calc(var(--vh) * 10));
                transform: translate(0, calc(var(--vh) * 10)); }
    #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides,
    #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -webkit-transform: translate(0, 100vh);
              transform: translate(0, 100vh);
      -webkit-transform: translate(0, calc(var(--vh) * 100));
              transform: translate(0, calc(var(--vh) * 100));
      pointer-events: none; }
      #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides.active,
      #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides.active {
        -webkit-transform: translate(0, 10vh) translate(0, 25px);
                transform: translate(0, 10vh) translate(0, 25px);
        -webkit-transform: translate(0, calc(var(--vh) * 10)) translate(0, 25px);
                transform: translate(0, calc(var(--vh) * 10)) translate(0, 25px); }
      #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .images-slide-wrap,
      #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .images-slide-wrap {
        position: relative; }
      #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask,
      #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        -webkit-transition: 0.2s ease-out;
        transition: 0.2s ease-out; }
        #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask.active,
        #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask.active {
          opacity: 1; }
        #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask .mask,
        #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask .mask {
          background-color: #4a4a4c;
          -webkit-transition: none;
          transition: none; }
          #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask .mask.transition-allowed,
          #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask .mask.transition-allowed {
            -webkit-transition: 0.5s ease-out;
            transition: 0.5s ease-out; }
        #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask:before, #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask:after,
        #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask:before,
        #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask:after {
          content: "";
          position: absolute;
          left: 0;
          width: 100%;
          height: 1px;
          background: black; }
        #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask:before,
        #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask:before {
          top: 0; }
        #custom-smalcode .panel-category-sticky .prepare-for-battle-image-slides .element-image-mask:after,
        #custom-smalcode .panel-category-sticky-mobile .prepare-for-battle-image-slides .element-image-mask:after {
          bottom: 0; }
    #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos,
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -webkit-transform: translate(0, 150vh);
              transform: translate(0, 150vh);
      -webkit-transform: translate(0, calc(var(--vh) * 150));
              transform: translate(0, calc(var(--vh) * 150));
      pointer-events: none; }
      #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos.active,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos.active {
        -webkit-transform: translate(0, 58vh);
                transform: translate(0, 58vh);
        -webkit-transform: translate(0, calc(var(--vh) * 62));
                transform: translate(0, calc(var(--vh) * 62)); }
      #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos .pfb-infos-wrap,
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos .pfb-infos-wrap {
        position: relative; }
        #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info,
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info {
          padding-left: 25px;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          -webkit-transition: 0.4s ease-out;
          transition: 0.4s ease-out;
          will-change: opacity, transform;
          -webkit-transform: translate(-30px, 0);
                  transform: translate(-30px, 0); }
          #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info.active,
          #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info.active {
            opacity: 1;
            -webkit-transform: translate(0, 0);
                    transform: translate(0, 0); }
          #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info.fade-out,
          #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info.fade-out {
            opacity: 0;
            -webkit-transform: translate(30px, 0);
                    transform: translate(30px, 0); }
          #custom-smalcode .panel-category-sticky .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info .pfb-info-headline,
          #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle-infos .pfb-infos-wrap .pfb-info .pfb-info-headline {
            margin-top: 5px; }
  #custom-smalcode .panel-category-sticky-mobile .seperator {
    margin-top: 12px;
    margin-bottom: 8px; }
  #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity {
    position: relative;
    -webkit-transform: none;
            transform: none;
    padding-top: 40px;
    padding-bottom: 30px; }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-elements-wrap {
      max-width: 500px; }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .element-usp-wrap {
      margin-top: 30px;
      margin-bottom: 40px; }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .element-usp-item {
      -webkit-transition: 0.2s ease-out;
      transition: 0.2s ease-out; }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element {
      position: relative;
      opacity: 1; }
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element .info-headline {
        margin-bottom: 12px; }
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element .bg-layer {
        padding-top: 30px; }
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-wrap-connectivity .info-element .text-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%; }
  #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle {
    padding-top: 60px;
    padding-bottom: 40px; }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .row-headline {
      text-align: center; }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .image-wrap {
      position: relative;
      top: 0;
      -webkit-transform: none;
              transform: none;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 40px;
      margin-bottom: 30px; }
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .image-wrap .pfb-1 {
        opacity: 1; }
      @media only screen and (max-width: 767px) {
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .image-wrap {
          width: 100%; } }
    #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .prepare-for-battle-slides {
      max-width: 500px;
      margin-left: auto;
      margin-right: auto; }
      #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .prepare-for-battle-slides .images-slide-wrap .element-image-slide .inner-slide {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: start;
                align-items: flex-start; }
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .prepare-for-battle-slides .images-slide-wrap .element-image-slide .inner-slide img,
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .prepare-for-battle-slides .images-slide-wrap .element-image-slide .inner-slide .pfb-info {
          width: 50%; }
        #custom-smalcode .panel-category-sticky-mobile .inner-panel-prepare-for-battle .prepare-for-battle-slides .images-slide-wrap .element-image-slide .inner-slide .pfb-info {
          padding-left: 20px; }

@-webkit-keyframes indicatorLoop {
  0% {
    width: 26px;
    height: 26px;
    opacity: 1; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }

@keyframes indicatorLoop {
  0% {
    width: 26px;
    height: 26px;
    opacity: 1; }
  100% {
    width: 60px;
    height: 60px;
    opacity: 0; } }
  #custom-smalcode .panel-programmable-black {
    position: relative;
    padding-bottom: 50px;
    padding-top: 5vh;
    background-color: #4a4a4c; }
    #custom-smalcode .panel-programmable-black .row-with-space {
      margin-bottom: 50px; }
    #custom-smalcode .panel-programmable-black .row-usps {
      margin-top: 65px;
      margin-bottom: 65px; }
    #custom-smalcode .panel-programmable-black .cta-white {
      color: black; }
    #custom-smalcode .panel-programmable-black .legal-text {
      margin-top: 60px;
      font-size: 14px;
      line-height: 22px;
      font-family: aktiv-grotesk, sans-serif;
      opacity: 0.7; }
      @media only screen and (max-width: 1023px) {
        #custom-smalcode .panel-programmable-black .legal-text {
          margin-top: 20px;
          margin-bottom: 50px; } }
    #custom-smalcode .panel-programmable-black .element-icue-software {
      margin-bottom: 50px; }
    @media only screen and (min-width: 1024px) {
      #custom-smalcode .panel-programmable-black .col-text {
        padding-right: 50px; } }
    @media only screen and (max-width: 1023px) {
      #custom-smalcode .panel-programmable-black {
        padding-top: 60px;
        padding-bottom: 30px; }
        #custom-smalcode .panel-programmable-black .element-icue-software {
          margin-top: 25px; }
          #custom-smalcode .panel-programmable-black .element-icue-software .icue-header {
            margin-bottom: 20px; }
        #custom-smalcode .panel-programmable-black .row-usps {
          margin-top: 40px;
          margin-bottom: 30px; }
        #custom-smalcode .panel-programmable-black .usp-outer-wrap {
          display: block; }
        #custom-smalcode .panel-programmable-black .element-usp-wrap-1 {
          margin-right: 0; }
        #custom-smalcode .panel-programmable-black .element-usp-wrap-1,
        #custom-smalcode .panel-programmable-black .element-usp-wrap-2 {
          margin-top: 40px; } }
  #custom-smalcode .panel-discover-more {
    position: relative;
    height: 100vh;
    height: calc(var(--vh) * 100);
    overflow: hidden;
    background-color: #4a4a4c; }
    #custom-smalcode .panel-discover-more .bg-layer {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      -webkit-transform: scale(1.5);
              transform: scale(1.5);
      opacity: 0; }
      #custom-smalcode .panel-discover-more .bg-layer.active {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1; }
    #custom-smalcode .panel-discover-more .img-wrap {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      bottom: 0; }
      #custom-smalcode .panel-discover-more .img-wrap img {
        height: 90%;
        width: auto;
        position: absolute;
        bottom: 0;
        right: 10vw;
        opacity: 0;
        -webkit-transition: 0.3s ease-out;
        transition: 0.3s ease-out;
        will-change: opacity; }
        #custom-smalcode .panel-discover-more .img-wrap img.active {
          opacity: 1; }
    #custom-smalcode .panel-discover-more .text-layer {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      -webkit-transform: translate(0, -50%);
              transform: translate(0, -50%);
      text-align: center; }
      #custom-smalcode .panel-discover-more .text-layer .discover-headline {
        text-transform: uppercase;
        font-family: 'Verveine';
        font-weight: normal;
        font-size: 60px;
        line-height: 60px;
        margin-top: 40px;
        margin-bottom: 70px; }
      #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap {
        font-size: 40px;
        text-transform: uppercase;
        font-family: 'Bebas Neue Pro SmE Rg';
        font-weight: bold; }
        #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap a {
          margin-right: 50px;
          opacity: 0.5;
          -webkit-transition: 0.2s ease-out;
          transition: 0.2s ease-out;
          will-change: opacity; }
          #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap a.active {
            opacity: 1; }
          #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap a:last-of-type {
            margin-right: 0; }
    @media only screen and (max-width: 767px) {
      #custom-smalcode .panel-discover-more {
        height: 70vh;
        height: calc(var(--vh) * 70); }
        #custom-smalcode .panel-discover-more .img-wrap img {
          width: 110%;
          right: 55%;
          -webkit-transform: translate(50%, 0);
                  transform: translate(50%, 0);
          height: auto; }
        #custom-smalcode .panel-discover-more .text-layer {
          top: 0;
          -webkit-transform: none;
                  transform: none; }
          #custom-smalcode .panel-discover-more .text-layer [class^="col-"] {
            padding-left: 0;
            padding-right: 0; }
          #custom-smalcode .panel-discover-more .text-layer .discover-headline {
            padding-left: 15px;
            padding-right: 15px;
            margin-top: 30px;
            margin-bottom: 130px; }
          #custom-smalcode .panel-discover-more .text-layer .discover-headline {
            font-size: 40px;
            line-height: 48px; }
          #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap {
            font-size: 30px; }
            #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap a {
              margin-right: 0;
              display: block;
              width: 100%; }
              #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap a:last-of-type {
                margin-right: 0; }
              #custom-smalcode .panel-discover-more .text-layer .menu-items-wrap a:not(.active) {
                pointer-events: none; } }

/* ==========================================================================
   general
   ========================================================================== */
body {
  margin: 0;
  color: #000;
}

#custom-smalcode {
  --vh: 1vh;
  background-color: #fff;
  position: relative;
  z-index: 1; }
  #custom-smalcode img {
    display: block;
    width: 100%;
    height: auto; }
  #custom-smalcode a {
    color: inherit;
    text-decoration: none; }
  #custom-smalcode ul,
  #custom-smalcode li {
    margin: 0;
    padding: 0;
    list-style-type: none; }
  #custom-smalcode * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box; }
  #custom-smalcode .slick-slide {
    outline: 0; }
  #custom-smalcode.device-is-touch .touch-hide {
    display: none; }
  #custom-smalcode.device-is-touch .mobile.touch-show {
    display: block; }
  #custom-smalcode:not(.device-is-touch) .touch-show {
    display: none; }
  @media only screen and (max-width: 767px) {
    #custom-smalcode.device-is-touch .touch-hide, #custom-smalcode:not(.device-is-touch) .touch-hide {
      display: none; }
    #custom-smalcode.device-is-touch .mobile.touch-show, #custom-smalcode:not(.device-is-touch) .mobile.touch-show {
      display: block; } }