body {
  color: var(--cae-color-text);

  &>div.main {
    height: calc(100vh - var(--cae-height-mainmenu));

    &>div.workarea {
      height: 100%;
      overflow-y: scroll;

      @media(width <=768px) {
        scroll-snap-type: none;
      }

      @media(width > 768px) {
        scroll-snap-type: y mandatory;

      }

      &>div.panel {

        position: relative;

        &.mandatory-scroll-snapping {
          scroll-snap-align: start;
        }

        &.mandatory-scroll-snapping-end {
          scroll-snap-align: end;
        }

        >.background {
          position: absolute;
        }

        >.content {
          height: 100%;
        }

        &#panel1, &#panel2, &#panel3, &#panel4, &#panel5, &#panel6, &#panel7 {
          display: flex;
        }

        &#panel1 {

          @media(width <=576px) {
            &>canvas {
              transform: scaleX(2) translateX(-25%);
            }
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            z-index: 1;
            position: relative;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            .arrow-below {
              position: absolute;
              bottom: 3em;
              width: 100%;
              text-align: center;
              color: white;

            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;


                .title {
                  font-weight: 500;
                  font-size: 3.125em;
                }

                .content {
                  font-weight: 400;
                  font-size: 1.5625em;
                  text-align: justify;
                }
              }
            }

            .right {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-right: 1em;

                .circle {
                  border-radius: 50%;
                  height: 100%;
                  width: 100%;

                  object, svg {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            height: max(691px, calc(100vh - var(--cae-height-mainmenu)));

            >.content {
              flex-direction: column-reverse;
              gap: 1em;

              .horizontal-part {
                width: 100%;

                .boundary {
                  margin: 1em 0 0 0;
                  width: 80%;
                }
              }

              .arrow-below {
                display: none;
              }

              .left {
                align-items: center;

                .bloc {
                  align-items: center;
                  gap: 1em;

                  .title {
                    text-align: center;
                    font-size: 1.875em;
                  }

                  .content {
                    text-align: center;
                    font-size: 1.25em;
                  }

                  .bottom {
                    margin-bottom: 1em;
                  }
                }
              }
            }
          }
        }

        &#panel2 {

          --animspeed: 1.5s;

          [class*="triggered-"] {
            visibility: hidden;
          }

          @media(width <=576px) {
            &>canvas {
              transform: scaleX(2) translateX(-25%);
            }
          }

          #waves1 {
            &.fade-in {
              -webkit-animation: fade-in 0.2s ease-out both;
              animation: fade-in 0.2s ease-out both;
            }
          }

          #waves2 {
            &.fade-in {
              -webkit-animation: fade-in calc(var(--animspeed) / 2 * 3) ease-out both;
              animation: fade-in calc(var(--animspeed) / 2 * 3) ease-out both;
              animation-delay: 0s;
            }

          }

          >.content {
            position: relative;

            display: flex;
            flex-direction: column;
            gap: 0;
            width: 100%;
            display: flex;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            --title-height: 5em;

            .arrow-below {
              position: absolute;
              bottom: 3em;
              width: 100%;
              text-align: center;
              color: white;

            }

            .vertical-part {
              display: flex;

              &.top {
                width: 100%;
                font-size: 2em;
                font-weight: 500;
                color: var(--cae-color-violet);
                align-items: center;
                justify-content: center;
                height: var(--title-height);
                text-align: center;
              }

              &.bottom {

                height: calc(100vh - var(--cae-height-mainmenu) - var(--title-height));

                display: flex;
                flex-direction: row;
                gap: 2em;

                .horizontal-part {

                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .bloc {

                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-items: center;
                    gap: 1.25em;
                    margin: 1em;

                    color: var(--cae-color-text-inverse);

                    .title {
                      font-size: 1.5625em;
                      font-weight: 500;
                      text-align: center;
                    }

                    .content {
                      font-size: 1.25em;
                      font-weight: 400;
                      text-align: center;
                    }

                  }

                  &.left {

                    .bloc {

                      &.slide-down {
                        -webkit-animation: slide-down var(--animspeed) ease-out both;
                        animation: slide-down var(--animspeed) ease-out both;
                      }
                    }

                  }

                  &.middle {

                    .boundary {
                      .circle {
                        --radius: 600px;
                        display: flex;
                        position: relative;
                        max-width: var(--radius);
                        max-height: var(--radius);

                        object {
                          width: 50%;
                          height: 100%;

                          &.naelis {
                            position: absolute;
                            z-index: 150;
                            width: 100%;
                            height: 100%;
                          }

                          &.slide-left {
                            -webkit-animation: slide-left var(--animspeed) ease-out both;
                            animation: slide-left var(--animspeed) ease-out both;
                            translate: 3px;
                          }

                          &.slide-right {
                            -webkit-animation: slide-right var(--animspeed) ease-out both;
                            animation: slide-right var(--animspeed) ease-out both;
                            translate: -3px;
                          }
                        }
                      }
                    }
                  }

                  &.right {
                    .bloc {
                      &.slide-down {
                        -webkit-animation: slide-down var(--animspeed) ease-out both;
                        animation: slide-down var(--animspeed) ease-out both;
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width > 992px) {
            &>.content {
              .vertical-part {
                &.bottom {
                  .left {
                    flex: 2 1 0;
                  }

                  .middle {
                    flex: 3 1 0;
                  }

                  .right {
                    flex: 2 1 0;
                  }
                }
              }
            }
          }



          @media(width <=992px) {

            height: max(1000px, calc(100vh - var(--cae-height-mainmenu)));

            /* smartphone and tablet */
            .arrow-below {
              display: none;
            }

            &>.content {

              .vertical-part {

                &.bottom {
                  gap: 0;
                  flex-wrap: wrap;

                  .left {
                    order: 2;
                    width: 50%;
                    flex: 50%;
                    flex-basis: min-content;

                  }

                  .middle {
                    order: 1;
                    flex: 100%;
                    width: 100%;

                    .circle {
                      --radius: 500px !important;
                    }
                  }

                  .right {
                    order: 3;
                    width: 50%;
                    flex: 50%;
                    flex-basis: min-content;
                  }

                  .bloc {

                    min-height: 20em;
                    justify-content: space-between;

                    .title {
                      align-content: center;
                    }

                    .content {
                      align-content: center;
                    }
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            height: max(1200px, calc(100vh - var(--cae-height-mainmenu)));

            /* smartphone */
            &>.content {

              .vertical-part {

                &.top {
                  font-size: 1.375em;
                  margin: 1em 0;
                }

                &.bottom {

                  gap: 3em;

                  .left {
                    flex: 100%;
                  }

                  .middle {
                    flex: 100%;
                  }

                  .right {
                    flex: 100%;
                  }

                  .bloc {
                    min-height: auto;

                    .title {
                      font-size: 1.25em !important;
                    }

                    .content {
                      font-size: 1.125em !important;
                    }
                  }

                }
              }
            }
          }

        }

        &#panel3 {
          background-color: var(--cae-color-background-blue);

          @media(width <=1200px) {
            height: min(75cqw, calc(100vh - var(--cae-height-mainmenu)));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            position: relative;

            &>.background {
              position: absolute;
              height: 100%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
              }

              .extend {
                display: none;
              }
            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 1em;

                object {
                  position: absolute;
                  width: 100%;
                  height: 100%;

                  &.clouds {
                    z-index: 10;
                    height: auto;
                  }

                  &.schema {
                    z-index: 30;
                  }
                }

                svg#digital_hub_3, svg#digital_hub_4 {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 30;

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .fade-in {
                    -webkit-animation: fade-in 1s ease-out both;
                    animation: fade-in 1s ease-out both;
                  }
                }

                div.pipes {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 20;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 0;

                  &.fade-in {
                    -webkit-animation: fade-in 1.5s ease-out both;
                    animation: fade-in 1.5s ease-out both;
                  }

                  div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 60px;

                    overflow: hidden;
                    width: 100%;

                    video {
                      width: 67%;
                      height: 67%;
                      transform: translate(-3%, 5%);
                    }
                  }
                }
              }
            }

            .right {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-blue);
              z-index: 30;
              container-type: inline-size;

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;
                font-size: min(2cqw, 1em);

                .title {
                  font-weight: 500;
                  font-size: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  text-align: justify;
                }
              }
            }



          }

          @media(width <=576px) {
            height: max(1050px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {
              flex-direction: column;

              &>.background {

                >.svg_background {
                  transform: rotate(90deg) scaleX(1) scaleY(2.3) translate(-180px, 0px);
                  transform-origin: center;
                }

                .extend {
                  display: block;
                  background-color: #C8FBFC;
                  height: 55%;
                  width: 100vw;
                  position: absolute;
                  bottom: 0;
                }
              }

              .horizontal-part {
                width: 100%;
              }

              .left {

                .boundary {
                  margin-left: 0;
                  width: 95%;

                  object {

                    &.clouds {}

                    &.schema {}
                  }

                  svg#digital_hub_3, svg#digital_hub_4 {}

                  div.pipes {

                    div {

                      video {}
                    }
                  }
                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;

                .bloc {

                  align-items: center;
                  font-size: 1em;

                  .title {
                    font-size: 1.25em;
                  }

                  .content {
                    font-size: 1em;
                  }
                }
              }
            }
          }
        }

        &#panel4 {
          background-color: var(--cae-color-background-blue);

          @media(width <=1200px) {
            height: min(75cqw, calc(100vh - var(--cae-height-mainmenu)));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            position: relative;

            &>.background {
              position: absolute;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
              }
            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 1em;

                object {
                  position: absolute;
                  width: 100%;
                  height: 100%;

                  &.clouds {
                    z-index: 10;
                    height: auto;
                  }

                  &.schema {
                    z-index: 30;
                  }
                }

                svg#digital_hub_4 {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 30;

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-right-amort {
                    -webkit-animation: slide-right-amort 1s ease-out both;
                    animation: slide-right-amort 1s ease-out both;
                    animation-delay: 0.2s;
                  }

                  .fade-in {
                    -webkit-animation: fade-in 1.5s ease-out both;
                    animation: fade-in 1.5s ease-out both;
                  }
                }

                div.pipes {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 20;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 0;

                  &.fade-in {
                    -webkit-animation: fade-in 2s ease-out both;
                    animation: fade-in 2s ease-out both;
                  }

                  div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 60px;

                    overflow: hidden;
                    width: 100%;

                    video {
                      width: 80%;
                      height: 80%;
                      transform: translate(0%, 2%);
                      border-radius: 220px;
                    }
                  }
                }
              }
            }

            .right {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-blue);
              z-index: 30;
              container-type: inline-size;

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;
                font-size: min(2.4cqw, 1em);

                .title {
                  font-weight: 500;
                  font-size: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  text-align: justify;
                }
              }
            }
          }

          @media(width <=576px) {
            height: max(1050px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {
              flex-direction: column-reverse;

              &>.background {

                >.svg_background {
                  transform: rotate(-90deg) scaleX(1) scaleY(2.3) translate(180px, 0px);
                  transform-origin: center;
                }

                .extend {
                  display: block;
                  background-color: #C8FBFC;
                  height: 55%;
                  width: 100vw;
                  position: absolute;
                  bottom: 0;
                }
              }

              .horizontal-part {
                width: 100%;
              }

              .left {

                .boundary {
                  margin-left: 0;
                  width: 95%;

                  object {

                    &.clouds {}

                    &.schema {}
                  }

                  svg#digital_hub_3, svg#digital_hub_4 {}

                  div.pipes {

                    div {

                      video {}
                    }
                  }
                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;

                .bloc {

                  align-items: center;
                  font-size: 1em;

                  .title {
                    font-size: 1.25em;
                  }

                  .content {
                    font-size: 1em;
                  }
                }
              }
            }
          }
        }

        &#panel5 {
          background-color: var(--cae-color-background-blue);

          @media(width <=1200px) {
            height: min(75cqw, calc(100vh - var(--cae-height-mainmenu)));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;
            position: relative;

            &>.background {
              position: absolute;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 5;

              >.svg_background {
                width: 100%;
              }
            }

            .horizontal-part {
              width: 50%;
              height: 100%;
            }

            .left {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;

              .boundary {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                position: relative;
                margin-left: 1em;

                object {
                  position: absolute;
                  width: 100%;
                  height: 100%;

                  &.clouds {
                    z-index: 10;
                    height: auto;
                  }

                  &.schema {
                    z-index: 30;
                  }
                }

                svg#digital_hub_5 {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 30;

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .fade-in {
                    -webkit-animation: fade-in 1s ease-out both;
                    animation: fade-in 1s ease-out both;
                  }
                }

                div.pipes {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  z-index: 20;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 0;

                  &.fade-in {
                    -webkit-animation: fade-in 1.5s ease-out both;
                    animation: fade-in 1.5s ease-out both;
                  }

                  div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 60px;

                    overflow: hidden;
                    width: 100%;

                    video {
                      width: 80%;
                      height: 80%;
                      transform: translate(4%, 2%);
                      border-radius: 200px;
                    }
                  }
                }
              }
            }

            .right {

              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1.825em;
              color: var(--cae-color-text-inverse);
              z-index: 30;
              container-type: inline-size;

              .bloc {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-items: center;
                gap: 1.825em;
                width: 80%;
                font-size: min(2cqw, 1em);

                .title {
                  font-weight: 500;
                  font-size: 1.5625em;
                }

                .content {
                  font-weight: 300;
                  font-size: 1.25em;
                  text-align: justify;
                }
              }
            }
          }

          @media(width <=576px) {
            height: max(800px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {
              flex-direction: column;

              &>.background {

                >.svg_background {
                  transform: rotate(90deg) scaleX(1) scaleY(2.3) translate(-160px, 0px);
                  transform-origin: center;
                }

                .extend {
                  display: block;
                  background-color: #7000FF;
                  height: 55%;
                  width: 100vw;
                  position: absolute;
                  bottom: 0;
                }
              }

              .horizontal-part {
                width: 100%;
              }

              .left {

                .boundary {
                  margin-left: 0;
                  width: 95%;

                  object {

                    &.clouds {}

                    &.schema {}
                  }

                  svg#digital_hub_3, svg#digital_hub_4 {}

                  div.pipes {

                    div {

                      video {}
                    }
                  }
                }
              }

              .right {
                text-align: center;
                margin-bottom: 1em;
                container-type: normal;

                .bloc {

                  align-items: center;
                  font-size: 1em;

                  .title {
                    font-size: 1.25em;
                  }

                  .content {
                    font-size: 1em;
                  }
                }
              }
            }
          }
        }

        &#panel6 {
          background-color: var(--cae-color-background-violet);

          @media (width <=1200px) {
            height: auto;
            padding: 2em 0;
          }

          >.content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2em;

            >.vertical-part {

              --bs-gutter-x: 1.5rem;
              --bs-gutter-y: 0;

              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              gap: 2em;
              padding: 0em 2.5em;

              >.row {
                --bs-gutter-x: 1.5rem;
                --bs-gutter-y: 0;
              }

              .horizontal-part {

                display: flex;
                align-items: center;
                flex-direction: column;

                .illustration {
                  transform: translate(0, 2em);
                  margin: auto;

                  object, svg {
                    margin: auto;
                    display: block;
                  }
                }

                .bloc {
                  background-color: var(--cae-color-violet);
                  color: white;
                  padding: 3.75em 2.5em 2.5em 2.5em;
                  border-radius: 0.625em;
                  height: 100%;

                  .title {
                    font-weight: 500;
                    font-size: 1.5625em;
                    text-align: center;
                    margin-bottom: 1em;
                  }

                  p {
                    font-weight: 500;
                    font-size: 1em;
                  }

                  ul {
                    li {
                      font-weight: 300;
                      font-size: 1em;
                    }
                  }
                }
              }
            }
          }
        }

        &#panel7 {
          background-color: var(--cae-color-background-violet);
          height: 360px;

          &>.background {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          >.content {
            display: flex;
            flex-direction: row;
            gap: 0;

            .horizontal-part {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              margin: 30px;

              &>div {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;

                svg#digital_hub_7 {

                  .slide-down-amort {
                    -webkit-animation: slide-down-amort 2s ease-out both;
                    animation: slide-down-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-up-amort {
                    -webkit-animation: slide-up-amort 2s ease-out both;
                    animation: slide-up-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .slide-left-amort {
                    -webkit-animation: slide-left-amort 2s ease-out both;
                    animation: slide-left-amort 2s ease-out both;
                    animation-delay: 0s;
                  }

                  .fade-in {
                    -webkit-animation: fade-in 1s ease-out both;
                    animation: fade-in 1s ease-out both;
                  }
                }

                button {
                  width: 200px;
                  font-size: 1rem;

                  &.slide-right-amort {
                    -webkit-animation: slide-right-amort 2s ease-out both;
                    animation: slide-right-amort 2s ease-out both;
                    animation-delay: 0s;
                  }
                }
              }


            }
          }
        }

        &#panel8 {

          background-color: var(--cae-color-background-blue);

          @media(width <=1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          --animspeed: 1.5s;

          [class*="triggered-"] {
            visibility: hidden;
          }

          >.content {
            position: relative;

            display: flex;
            flex-direction: column;
            gap: 0;
            width: 100%;
            display: flex;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            --title-height: 6em;

            .arrow-below {
              position: absolute;
              bottom: 3em;
              width: 100%;
              text-align: center;
              color: white;

            }

            .vertical-part {
              display: flex;
              flex-direction: column;
              margin: 0.625em;

              &.top {
                width: 100%;
                font-size: 1.875em;
                font-weight: 500;
                color: var(--cae-color-violet);
                align-items: center;
                justify-content: center;
                height: var(--title-height);
                text-align: center;

                div.partners {
                  font-weight: 400;
                  font-size: 0.8em;
                }
                div.partners2 {

                }
              }

              &.bottom {

                height: calc(100vh - var(--cae-height-mainmenu) - var(--title-height));

                display: flex;
                flex-direction: row;
                gap: 2em;

                .horizontal-part {

                  display: flex;
                  align-items: center;
                  justify-content: center;


                  &.left {
                    flex: 2 1 0;

                    .boundary {
                      .circle {
                        --radius: 600px;
                        display: flex;
                        position: relative;
                        max-width: var(--radius);
                        max-height: var(--radius);

                        object, svg {
                          width: 100%;
                          height: 100%;
                        }

                        svg#digital_hub_8 {


                          .slide-down-amort {
                            -webkit-animation: slide-down-amort 2s ease-out both;
                            animation: slide-down-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .slide-up-amort {
                            -webkit-animation: slide-up-amort 2s ease-out both;
                            animation: slide-up-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .fade-in, &.fade-in {
                            -webkit-animation: fade-in 1s ease-out both;
                            animation: fade-in 1s ease-out both;
                          }
                        }
                      }
                    }
                  }

                  &.right {
                    flex: 2 1 0;

                    .bloc {

                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-items: center;
                      gap: 1.25em;
                      margin: 1em;
                      width: 100%;

                      color: var(--cae-color-violet);

                      .title {
                        font-size: 1.5625em;
                        font-weight: 500;
                        text-align: left;
                        width: 100%;
                      }

                      .content {
                        font-size: 1.25em;
                        font-weight: 400;
                        text-align: left;
                      }
                    }

                  }

                }
              }
            }
          }

          @media(width <=992px) {

            >.content {
              .vertical-part {
                &.bottom {
                  .horizontal-part {
                    &.right {
                      .bloc {
                        .content {
                          ul {
                            padding-left: 0;
                            padding-right: 0;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=768px) {

            --height: max(1100px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {


              .arrow-below {}

              .vertical-part {
                margin: 0;


                &.top {
                  font-size: 1.5625em;
                  height: auto;
                  margin-bottom: 20px;

                  div.partners {
                    font-size: 0.72em;
                    margin: 10px;
                  }
                }

                &.bottom {

                  .horizontal-part {


                    &.left {

                      .boundary {
                        .circle {

                          object, svg {}

                          svg#digital_hub_8 {}
                        }
                      }
                    }

                    &.right {

                      .bloc {

                        .title {
                          font-size: 1.25em;
                        }

                        .content {
                          font-size: 1em;

                          ul {
                            padding-left: 0;
                            padding-right: 0;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            height: max(1100px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {


              .arrow-below {}

              .vertical-part {
                margin: 0;


                &.top {
                  font-size: 1.25em;
                  height: auto;
                  margin-bottom: 20px;

                  span {
                    font-size: 0.9em;
                    margin: 10px;
                  }
                }

                &.bottom {

                  flex-direction: column;

                  .horizontal-part {


                    &.left {

                      .boundary {
                        .circle {
                          --radius: 500px;

                          object, svg {}

                          svg#digital_hub_8 {}
                        }
                      }
                    }

                    &.right {

                      .bloc {

                        .title {
                          font-size: 1.25em;
                          text-align: center;
                        }

                        .content {
                          font-size: 1em;

                          ul {
                            padding-left: 1rem;
                            padding-right: 1rem;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        &#panel9 {

          background-color: var(--cae-color-background-violet);

          @media(width <=1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          @media(width >1200px) {
            height: calc(100vh - var(--cae-height-mainmenu));
          }

          --animspeed: 1.5s;

          [class*="triggered-"] {
            visibility: hidden;
          }

          >.content {
            position: relative;

            display: flex;
            flex-direction: column;
            gap: 0;
            width: 100%;
            display: flex;
            max-width: var(--width-main);
            margin-left: auto;
            margin-right: auto;

            --title-height: 5em;

            .arrow-below {
              position: absolute;
              bottom: 3em;
              width: 100%;
              text-align: center;
              color: white;

            }

            .vertical-part {
              display: flex;
              flex-direction: column;
              margin: 0.625em;

              &.top {
                width: 100%;
                font-size: 1.875em;
                font-weight: 500;
                color: var(--cae-color-violet);
                align-items: center;
                justify-content: center;
                height: var(--title-height);
                text-align: center;

                div.customers {
                  font-weight: 400;
                  font-size: 0.8em;
                }
                div.customers2 {

                }
              }

              &.bottom {

                height: calc(100vh - var(--cae-height-mainmenu) - var(--title-height));

                display: flex;
                flex-direction: row;
                gap: 2em;

                .horizontal-part {

                  display: flex;
                  align-items: center;
                  justify-content: center;


                  &.right {
                    flex: 2 1 0;

                    .boundary {
                      .circle {
                        --radius: 600px;
                        display: flex;
                        position: relative;
                        max-width: var(--radius);
                        max-height: var(--radius);

                        object, svg {
                          width: 100%;
                          height: 100%;
                        }

                        svg#digital_hub_9 {


                          .slide-down-amort {
                            -webkit-animation: slide-down-amort 2s ease-out both;
                            animation: slide-down-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .slide-up-amort {
                            -webkit-animation: slide-up-amort 2s ease-out both;
                            animation: slide-up-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .slide-right-amort {
                            -webkit-animation: slide-right-amort 2s ease-out both;
                            animation: slide-right-amort 2s ease-out both;
                            animation-delay: 0s;
                          }

                          .fade-in, &.fade-in {
                            -webkit-animation: fade-in 1s ease-out both;
                            animation: fade-in 1s ease-out both;
                          }
                        }
                      }
                    }
                  }

                  &.left {
                    flex: 2 1 0;

                    .bloc {

                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-items: center;
                      gap: 1.25em;
                      margin: 1em;
                      width: 100%;

                      color: var(--cae-color-violet);

                      .title {
                        font-size: 1.5625em;
                        font-weight: 500;
                        text-align: left;
                        width: 100%;
                      }

                      .content {
                        font-size: 1.25em;
                        font-weight: 400;
                        text-align: left;
                      }
                    }

                  }

                }
              }
            }
          }

          @media(width <=992px) {

            >.content {
              .vertical-part {
                &.bottom {
                  .horizontal-part {
                    &.left {
                      .bloc {
                        .content {
                          ul {
                            padding-left: 0;
                            padding-right: 0;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=768px) {

            --height: max(1100px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {


              .arrow-below {}

              .vertical-part {
                margin: 0;


                &.top {
                  font-size: 1.5625em;
                  height: auto;
                  margin-bottom: 20px;

                  div.customers {
                    font-size: 0.72em;
                    margin: 10px;
                  }
                }

                &.bottom {
                  height: auto;

                  .horizontal-part {


                    &.right {

                      .boundary {
                        .circle {

                          object, svg {}

                          svg#digital_hub_8 {}
                        }
                      }
                    }

                    &.left {

                      .bloc {

                        .title {
                          font-size: 1.25em;
                        }

                        .content {
                          font-size: 1em;

                          ul {
                            padding-left: 0;
                            padding-right: 0;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          @media(width <=576px) {

            height: max(1200px, calc(100vh - var(--cae-height-mainmenu)));
            --height: max(2.5cqw, calc(100vh - var(--cae-height-mainmenu)));
            --min-height: 500px;

            >.content {


              .arrow-below {}

              .vertical-part {
                margin: 0;


                &.top {
                  font-size: 1.25em;
                  height: auto;
                  margin-bottom: 20px;

                  span {
                    font-size: 0.9em;
                    margin: 10px;
                  }
                }

                &.bottom {
                  height: auto;
                  flex-direction: column-reverse;

                  .horizontal-part {


                    &.right {

                      .boundary {
                        .circle {
                          --radius: 500px;

                          object, svg {}

                          svg#digital_hub_8 {}
                        }
                      }
                    }

                    &.left {

                      .bloc {

                        .title {
                          font-size: 1.25em;
                          text-align: center;
                        }

                        .content {
                          font-size: 1em;

                          ul {
                            padding-left: 1rem;
                            padding-right: 1rem;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

      }
    }
  }
}