/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

body {
  font-family: sans-serif;
  background-color: #F7F4F4; }

.spaceHolder {
  display: none; }

img {
  max-width: 100%; }

body {
  width: 100vw;
  background-color: #000;
  position: relative;
  margin: 0;
  overflow-x: hidden; }

.wrapper {
  position: fixed;
  overflow: hidden;
  top: 0;
  width: 100vw;
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  background-color: #F8F6F6; }

.fakeScroll {
  width: 50%; }

.wrapperConetent {
  position: absolute;
  width: 100%;
  height: 100%; }

.slide {
  display: none; }

.plus {
  position: absolute;
  transition: all 1s;
  width: 33.33%;
  height: 33.33%;
  top: 0;
  overflow: hidden;
  z-index: 0;
  left: 0; }
  @media screen and (max-width: 600px) {
    .plus {
      display: none; } }
  .plus.plus--fadeOut {
    transform: translateX(150vw); }
  .plus img {
    width: 100%; }

.plus--2 {
  top: 0%;
  left: 66.66%;
  transform: translateX(0vw); }

.wrapper--4 .plus--0 {
  top: 66.66%;
  left: 0; }

.wrapper--4 .plus--1 {
  top: 33.33%;
  left: 0; }

.wrapper--4 .plus--2 {
  top: 0%;
  left: 0; }

.iconbox {
  display: flex;
  justify-content: flex-start; }
  @media screen and (max-width: 600px) {
    .iconbox {
      flex-direction: column; } }
  .iconbox .iconbox__circle {
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    margin-right: 5px; }
    @media screen and (max-width: 600px) {
      .iconbox .iconbox__circle {
        margin-bottom: 5px; } }

.timebar {
  position: absolute;
  top: 7vh;
  /* Fallback for browsers that do not support Custom Properties */
  top: calc(var(--vh, 1vh) * 7);
  height: 86vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 86);
  width: 0px;
  z-index: 2;
  border-right: solid 1px #D8D8D8; }
  @media screen and (max-width: 600px) {
    .timebar {
      right: 0;
      display: none; } }
  @media screen and (min-width: 600px) {
    .timebar {
      left: 33.33%; } }
  .timebar .timebarColor {
    width: 4px;
    margin-left: -2px;
    background-color: #D2CFCF;
    transition: all 1s;
    height: 0%;
    border-radius: 30vw; }

.section--intro {
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100); }

.logo {
  width: 70%; }
  @media screen and (max-width: 601px) {
    .logo {
      margin-left: 15%; } }
  .logo .logo--inner {
    fill: #000; }

.intro {
  opacity: 1;
  position: absolute;
  top: 0;
  display: block;
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  background-color: #F7F4F4;
  transition: transform 1s;
  z-index: 99;
  font-family: aktiv-grotesk-extended, sans-serif;
  padding-left: 5vw;
  padding-right: 5vw; }
  .intro::after {
    content: "";
    background-image: url(src/img/logo.svg);
    background-repeat: no-repeat;
    background-size: 600%;
    animation: introbgAnimation 1.5s forwards;
    opacity: 0.03;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1; }

@keyframes introbgAnimation {
  0% {
    background-position: left 16.5% center; }
  100% {
    background-position: left 17% center; } }
    @media screen and (max-width: 600px) {
      .intro::after {
        background-position: left center; }
      @keyframes introbgAnimation {
        0% {
          background-position: left 13.5% center; }
        100% {
          background-position: left 17% center; } } }
  .intro span {
    font-size: 0.5em;
    font-weight: normal !important; }
  @media screen and (min-width: 601px) {
    .intro {
      display: flex;
      justify-content: flex-start;
      align-items: center; } }
  .intro span {
    font-weight: bold; }
  .intro a {
    text-decoration: none;
    color: #000;
    margin-top: 15px;
    display: inline-block;
    position: relative; }
    @media screen and (max-width: 600px) {
      .intro a {
        margin-top: 10px; } }
    .intro a:after {
      content: "";
      position: absolute;
      bottom: 7px;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #000; }
      @media screen and (max-width: 600px) {
        .intro a:after {
          bottom: 5px; } }
  @media screen and (min-width: 601px) {
    .intro .intro--left {
      width: 33.33vw;
      height: 80vh;
      /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 80);
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-right: solid 1px #D8D8D8; } }
  @media screen and (max-width: 600px) {
    .intro .intro--left {
      width: 100%;
      margin-top: 20vh;
      /* Fallback for browsers that do not support Custom Properties */
      margin-top: calc(var(--vh, 1vh) * 20); }
      .intro .intro--left .logo {
        width: auto !important;
        margin-left: 0 !important; } }
  .intro .intro--left p {
    display: none; }
  @media screen and (min-width: 601px) {
    .intro .intro--right {
      width: 66.66vw;
      height: 100vh;
      /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 100);
      padding-right: 5%;
      padding-left: 5%;
      display: flex;
      justify-content: flex-start;
      align-items: center; }
      .intro .intro--right p {
        width: 100%;
        font-size: 4vw;
        line-height: 1.2em; } }
  @media screen and (max-width: 600px) {
    .intro .intro--right p {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 28px;
      line-height: 1.2em; } }
  .intro.intro--fadeOut {
    transform: translateX(0%) translateY(-100%); }

.elementFadeInIntro {
  opacity: 0;
  animation: IntroFadeInAnimation 0.5s forwards; }

@keyframes IntroFadeInAnimation {
  0% {
    opacity: 0;
    transform: translateY(-100px); }
  100% {
    opacity: 1;
    transform: translateY(0px); } }
  .elementFadeInIntro.elementFadeInIntron--1 {
    animation-delay: 0.2s; }
  .elementFadeInIntro.elementFadeInIntro--2 {
    animation-delay: 0.3s; }

.scrolldownButton {
  width: 2vw;
  cursor: pointer;
  height: 2vw;
  position: fixed;
  top: 94vh;
  /* Fallback for browsers that do not support Custom Properties */
  top: calc(var(--vh, 1vh) * 94);
  left: 4vw;
  border-radius: 50%;
  z-index: 999;
  border: solid #D2CFCF 2px;
  background-color: #fff;
  top: 87vh;
  /* Fallback for browsers that do not support Custom Properties */
  top: calc(var(--vh, 1vh) * 87); }
  @media screen and (max-width: 600px) {
    .scrolldownButton {
      width: 2.3vw;
      height: 2.3vw;
      top: 92vh;
      /* Fallback for browsers that do not support Custom Properties */
      top: calc(var(--vh, 1vh) * 92); } }
  @media screen and (max-width: 600px) {
    .scrolldownButton {
      background-color: #fff;
      width: 9.2vw;
      height: 9.2vw;
      position: fixed;
      border: solid #D2CFCF 1px;
      top: 92vh;
      top: calc(var(--vh, 1vh) * 92);
      left: auto;
      right: 4vw;
      margin-top: 0vw;
      margin-left: 3px; } }
  .scrolldownButton.scrolldownButton--down {
    margin-left: 2.5vw; }
  @media screen and (max-width: 600px) {
    .scrolldownButton.scrolldownButton--up {
      margin-top: -12.5vw; } }
  .scrolldownButton.scrolldownButton--up:before {
    transform: rotate(180deg);
    margin-top: 0vw; }
  .scrolldownButton:focus {
    outline: none; }
  .scrolldownButton:before {
    width: 100%;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    background-image: url(src/img/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    margin-top: 0.1vw;
    z-index: 800; }
  .scrolldownButton:after {
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    z-index: 500;
    transition: all 0.1s ease-in-out; }
  .scrolldownButton.buttonOnClick:after {
    width: 110%;
    height: 110%;
    top: -5%;
    left: -5%;
    transition: all 0.1s ease-in-out; }

@media screen and (max-width: 600px) {
  .end {
    padding-top: 30vh;
    /* Fallback for browsers that do not support Custom Properties */
    padding-top: calc(var(--vh, 1vh) * 30);
    display: flex;
    flex-direction: column; } }

@media screen and (max-width: 600px) {
  .end .logo {
    padding-left: 0;
    margin-left: 0; } }

.end .link--inline {
  margin-top: 0;
  margin-bottom: 0; }

.end a::after {
  bottom: 0; }

@media screen and (max-width: 600px) {
  .end .intro--left {
    width: 100%;
    margin-top: 0; } }

@media screen and (max-width: 600px) {
  .end .intro--left {
    height: auto; } }

.end .intro--left p {
  display: block;
  margin-top: 40px;
  line-height: 1.4em;
  font-size: 16px;
  display: block; }
  @media screen and (min-width: 600px) {
    .end .intro--left p {
      margin-right: 5%; } }
  @media screen and (max-width: 600px) {
    .end .intro--left p {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 19px; } }
  .end .intro--left p a {
    color: #000; }

.end .intro--right {
  display: flex;
  padding-right: 5%; }
  @media screen and (max-width: 600px) {
    .end .intro--right {
      height: auto;
      padding-right: 0%;
      width: 100%;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin-top: 0; } }
  .end .intro--right a {
    background-color: #000;
    border-radius: 200vw;
    color: #fff;
    font-size: 18px;
    padding: 0px 30px;
    line-height: 3.5em;
    margin-right: 30px; }
    @media screen and (max-width: 600px) {
      .end .intro--right a {
        font-size: 13px; } }
    .end .intro--right a::after {
      display: none; }
    .end .intro--right a:last-child {
      color: #000;
      background-color: #fff;
      border: solid 1px #DDDCDC; }

.imageBoxWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; }

.home {
  margin-top: 4vw;
  background-color: #fff;
  width: 87.5% !important;
  height: 140vw !important;
  /* Fallback for browsers that do not support Custom Properties */ }
  @media screen and (max-width: 600px) {
    .home {
      width: 100% !important;
      margin-top: 0vw; } }
  .home img {
    display: block; }
  .home .home__content {
    display: flex; }
    .home .home__content .home__main {
      width: 63%; }
    .home .home__content .home__sidebar {
      width: 37%; }

.homevrai .elementFadeIn {
  animation-delay: 0s !important; }

.homevrai .elementFadeIn {
  opacity: 1 !important;
  animation: none;
  transform: translateY(0); }

.homevrai .banner {
  position: relative;
  width: 60vw;
  height: 16.5vw; }
  @media screen and (max-width: 600px) {
    .homevrai .banner {
      width: 90vw;
      height: 23.5vw; } }
  .homevrai .banner .banner__iconBox {
    position: absolute;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 13vw;
    left: 5vw;
    overflow: hidden; }
    @media screen and (max-width: 600px) {
      .homevrai .banner .banner__iconBox {
        width: 17vw;
        left: 12vw; } }
    .homevrai .banner .banner__iconBox .banner__iconList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      animation: iconListAnimation 10s infinite alternate; }

@keyframes iconListAnimation {
  0% {
    transform: translateX(0vw); }
  30% {
    transform: translateX(0vw); }
  33% {
    transform: translateX(-13vw); }
  63% {
    transform: translateX(-13vw); }
  66% {
    transform: translateX(-26vw); }
  100% {
    transform: translateX(-26vw); } }
      @media screen and (max-width: 600px) {
        @keyframes iconListAnimation {
          0% {
            transform: translateX(0vw); }
          30% {
            transform: translateX(0vw); }
          33% {
            transform: translateX(-17vw); }
          63% {
            transform: translateX(-17vw); }
          66% {
            transform: translateX(-34vw); }
          100% {
            transform: translateX(-34vw); } } }
      .homevrai .banner .banner__iconBox .banner__iconList .banner__icon:nth-child(1) {
        padding: 2vw; }
      .homevrai .banner .banner__iconBox .banner__iconList .banner__icon:nth-child(2) {
        padding: 1vw; }
      .homevrai .banner .banner__iconBox .banner__iconList .banner__icon:nth-child(3) {
        padding: 2vw; }
  .homevrai .banner .banner__textBox {
    width: 35.2vw;
    position: absolute;
    left: 24.8vw;
    height: 7.4vw;
    top: 4vw;
    overflow: hidden; }
    @media screen and (max-width: 600px) {
      .homevrai .banner .banner__textBox {
        width: 49vw;
        position: absolute;
        left: 36.8vw;
        height: 9.4vw;
        top: 6vw;
        overflow: hidden; } }
    .homevrai .banner .banner__textBox .banner__textList {
      animation: textListAnimation 10s infinite alternate; }
      @media screen and (max-width: 600px) {
        .homevrai .banner .banner__textBox .banner__textList {
          height: auto; } }

@keyframes textListAnimation {
  0% {
    transform: translateY(0%); }
  32% {
    transform: translateY(0%); }
  34% {
    transform: translateY(-33.33%); }
  66% {
    transform: translateY(-33.33%); }
  68% {
    transform: translateY(-66.66%); }
  100% {
    transform: translateY(-66.66%); } }

.section--trio--full .elementFadeIn:nth-child(1) {
  width: 37%; }

.section--trio--full .elementFadeIn:nth-child(2) {
  width: 25.97%; }

.section--trio--full .elementFadeIn:nth-child(3) {
  width: 37%; }

.section--all .elementFadeIn {
  width: 100% !important; }

.box--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start; }

.elementFadeIn {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInHome 0.3s forwards; }

@keyframes fadeInHome {
  0% {
    opacity: 0;
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    transform: translateY(0px); } }
  @media screen and (max-width: 600px) {
    @keyframes fadeInHome {
      0% {
        opacity: 0;
        transform: translateY(-5px); }
      100% {
        opacity: 1;
        transform: translateY(0px); } } }

.home__main {
  width: 100%; }
  .home__main .elementFadeIn {
    width: 41%;
    opacity: 0; }
    .home__main .elementFadeIn:nth-child(odd) {
      width: 59%; }

.home__content__sectionSplit .home__intro {
  width: 61.58% !important; }

.home__content__sectionSplit .home__sidebar {
  width: 38.42% !important; }

.home__header .elementFadeIn {
  animation: fadeInHome  0.7s  forwards; }
  .home__header .elementFadeIn:nth-child(1) {
    animation-delay: 0.7s; }
  .home__header .elementFadeIn:nth-child(2) {
    animation-delay: 1.1s; }
  .home__header .elementFadeIn:nth-child(3) {
    animation-delay: 1.5s; }
  .home__header .elementFadeIn:nth-child(4) {
    animation-delay: 1.9s; }

.home .home__intro {
  animation-delay: 2s; }
  .home .home__intro .home__intro--hero {
    width: 100% !important;
    animation-delay: 2s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(1) {
    animation-delay: 3s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(2) {
    animation-delay: 3.6s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(3) {
    animation-delay: 4.2s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(4) {
    animation-delay: 4.8s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(5) {
    animation-delay: 5.4s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(6) {
    animation-delay: 6s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(7) {
    animation-delay: 6.6s; }
  .home .home__intro .home__main__intro .elementFadeIn:nth-child(8) {
    animation-delay: 7.2s; }

.home .section--redation .elementFadeIn {
  animation-delay: 8.2s; }

.home .section--redation .section__content .elementFadeIn:nth-child(1) {
  animation-delay: 8.8s; }

.home .section--redation .section__content .elementFadeIn:nth-child(2) {
  animation-delay: 9.4s; }

.home .section--redation .section__content .elementFadeIn:nth-child(3) {
  animation-delay: 10s; }

.home .banner--abonememnt .elementFadeIn {
  animation-delay: 10.7s; }

.home .section--liban .elementFadeIn {
  animation-delay: 11.7s; }

.home .section--liban .section__content--1 .elementFadeIn:nth-child(1) {
  animation-delay: 12.3; }

.home .section--liban .section__content--1 .elementFadeIn:nth-child(2) {
  animation-delay: 12.7s; }

.home .section--liban .section__content--1 .elementFadeIn:nth-child(3) {
  animation-delay: 13.3s; }

.home .section--liban .section__content--2 .elementFadeIn:nth-child(1) {
  animation-delay: 13.6s; }

.home .section--liban .section__content--2 .elementFadeIn:nth-child(2) {
  animation-delay: 14s; }

.home .section--liban .section__content--2 .elementFadeIn:nth-child(3) {
  animation-delay: 14.4s; }

.dossier {
  height: 215vw !important; }
  @media screen and (max-width: 600px) {
    .dossier {
      height: 340vw !important; } }
  .dossier .home__header .elementFadeIn:nth-child(1) {
    animation-delay: 0.3s; }
  .dossier .home__header .elementFadeIn:nth-child(2) {
    animation-delay: 0.7s; }
  .dossier .home__header .elementFadeIn:nth-child(3) {
    animation-delay: 1s; }
  .dossier .home__news {
    animation: fadeInHome  1s  forwards;
    animation-duration: 0.4s; }
    .dossier .home__news .newslineBox {
      height: 0px;
      overflow: hidden;
      animation: newslineboxheightDossier 1s linear 1s forwards; }

@keyframes newslineboxheightDossier {
  0% {
    height: 0vw; }
  100% {
    height: 15vw; } }
  .dossier .home__intro .elementFadeIn:nth-child(1) {
    animation-delay: 1.5s; }
  .dossier .home__intro .elementFadeIn:nth-child(2) {
    animation-delay: 1.7s; }
  .dossier .home__intro .elementFadeIn:nth-child(3) {
    animation-delay: 2.2s; }
  .dossier .home__intro .elementFadeIn:nth-child(4) {
    animation-delay: 2.7s; }
  .dossier .home__intro .elementFadeIn:nth-child(5) {
    animation-delay: 3.2s; }
  .dossier .home__intro .elementFadeIn:nth-child(6) {
    animation-delay: 3.4s; }
  .dossier .home__intro .elementFadeIn:nth-child(7) {
    animation-delay: 3.9s; }
  .dossier .home__intro .elementFadeIn:nth-child(8) {
    animation-delay: 4.1s; }
  .dossier .home__intro .elementFadeIn:nth-child(9) {
    animation-delay: 4.6s; }
  .dossier .home__intro .elementFadeIn:nth-child(10) {
    animation-delay: 4.8s; }

.article {
  height: 140vw !important; }
  .article .article__main__intro .elementFadeIn {
    width: 100% !important;
    display: block; }
  .article .home__header .elementFadeIn:nth-child(1) {
    animation-delay: 0.7s; }
  .article .home__news {
    animation-delay: 1s; }
    .article .home__news .newslineBox {
      animation-delay: 1.2s;
      animation: newslineboxheightArticle 1s linear 1.2s forwards; }

@keyframes newslineboxheightArticle {
  0% {
    height: 0vw; }
  100% {
    height: 14vw; } }
  .article .article__main__intro--1 .elementFadeIn:nth-child(1) {
    animation-delay: 1s; }
  .article .article__main__intro--1 .elementFadeIn:nth-child(2) {
    animation-delay: 1.5s; }
  .article .article__main__intro--1 .elementFadeIn:nth-child(3) {
    animation-delay: 2.5s; }
  .article .article__main__intro--1 .elementFadeIn:nth-child(4) {
    animation-delay: 5s; }
  .article .article__main__intro--1 .elementFadeIn:nth-child(5) {
    animation-delay: 5.5s; }
  .article .article__main__intro--1 .elementFadeIn:nth-child(6) {
    animation-delay: 6.5s; }
  .article .article__main__intro--1 .elementFadeIn:nth-child(7) {
    animation-delay: 7.5s; }
  .article .article__main__intro--2 .elementFadeIn:nth-child(1) {
    animation-delay: 8.5s; }
  .article .article__main__intro--2 .elementFadeIn:nth-child(2) {
    animation-delay: 9s; }
  .article .banner--newsletetr:nth-child(1) {
    animation-delay: 9s; }

.notre {
  background-color: #343233;
  height: 240vw !important; }
  @media screen and (max-width: 600px) {
    .notre {
      height: 574vw !important; } }
  .notre .home__header .elementFadeIn:nth-child(1) {
    animation-delay: 0.7s; }
  .notre .home__header .elementFadeIn:nth-child(2) {
    animation-delay: 1s; }
  .notre .home__header .elementFadeIn:nth-child(3) {
    animation-delay: 1.3s;
    margin-top: -7vw; }
  .notre .home__header .elementFadeIn:nth-child(4) {
    animation-delay: 2s; }
  .notre .home__content__sectionSplit--1 .split--left {
    animation-delay: 2.5s !important; }
  .notre .home__content__sectionSplit--1 .split--right {
    animation-delay: 2.7s !important; }
  .notre .banner--1 .elementFadeIn:nth-child(1) {
    animation-delay: 3s; }
  .notre .banner--1 .elementFadeIn:nth-child(2) {
    animation-delay: 3.5s; }
  .notre .home__content__sectionSplit--2 .split--left:nth-child(1) {
    animation-delay: 4s !important; }
  .notre .home__content__sectionSplit--2 .split--right:nth-child(1) {
    animation-delay: 4.5s !important; }

.imageBox {
  position: absolute;
  top: 0;
  left: 33.33%;
  width: 66.66%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start; }
  @media screen and (max-width: 600px) {
    .imageBox {
      transition: none;
      width: 100% !important;
      left: 0 !important;
      max-height: 66.66%;
      top: 33.33% !important; } }
  .imageBox img {
    transition: all 0.1s 0.9s; }

.imageBox > div, .imageBox > img {
  transition: opacity 0.5s;
  opacity: 0; }

.imageBox.fadeIn > div, .imageBox.fadeIn > img {
  opacity: 1; }

.imageBox.fadeOut > div, .imageBox.fadeOut > img {
  opacity: 0; }

.websiteFullImage {
  width: 100%;
  height: auto; }
  .websiteFullImage img {
    width: 100%; }

.imageBox--center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

.imageBox--0 .home .home__header .elementFadeIn {
  animation: none; }

.imageBox--1 .home .home__header {
  opacity: 0.3; }
  .imageBox--1 .home .home__header .elementFadeIn {
    animation: none; }

.imageBox--1 .home .home__intro {
  opacity: 0.3; }

.imageBox--1 .home .home__sidebar {
  opacity: 1; }

.imageBox--1 .phoneContent__content {
  position: relative; }

.imageBox--1 .sliderMobil {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 300%;
  animation: sliderMobil 12s infinite; }

@keyframes sliderMobil {
  0% {
    transform: translateX(0); }
  23% {
    transform: translateX(0); }
  25% {
    transform: translateX(-33.33%); }
  48% {
    transform: translateX(-33.33%); }
  50% {
    transform: translateX(-66.66%); }
  73% {
    transform: translateX(-66.66%); }
  75% {
    transform: translateX(-33.33%); }
  98% {
    transform: translateX(-33.33%); }
  100% {
    transform: translateX(0); } }
  .imageBox--1 .sliderMobil img {
    width: 33.33%; }

.imageBox--2 .websiteFullImage {
  opacity: 1;
  animation: scrollBannerAniamtion 1.5s ease-in-out 0.5s forwards; }

@keyframes scrollBannerAniamtion {
  0% {
    transform: translateY(0%); }
  100% {
    transform: translateY(-40%); } }
  @media screen and (max-width: 600px) {
    .imageBox--2 .websiteFullImage {
      animation: scrollBannerAniamtionXS 1.5s ease-in-out 0.5s forwards; }
    @keyframes scrollBannerAniamtionXS {
      0% {
        transform: translateY(0%); }
      100% {
        transform: translateY(-55%); } } }
  .imageBox--2 .websiteFullImage .img--fadeout {
    animation: imgFadeOut 3s 0s forwards; }

@keyframes imgFadeOut {
  0% {
    opacity: 1; }
  85% {
    opacity: 1; }
  100% {
    opacity: 0.3; } }

.imageBox--3 img {
  transition-delay: 0s; }

.imageBox--3 .home img {
  opacity: 0.3; }

@keyframes aniamtionFadeInOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  51% {
    opacity: 0.3; }
  100% {
    opacity: 0.3; } }

.imageBox--3 .home .homeHeader--1 {
  animation: aniamtionFadeInOut 6s forwards infinite; }

.imageBox--3 .home .homeStart--1 {
  width: 63%; }

.imageBox--3 .home .homeStart--2 {
  width: 37%;
  animation: aniamtionFadeInOut 6s 3s forwards infinite; }

.imageBox--9 {
  background-color: #fff; }
  .imageBox--9 .directWrapper {
    position: relative;
    transform-origin: top left; }
    .imageBox--9 .directWrapper .directWrapper__main {
      position: absolute;
      top: 0;
      left: 0; }
    .imageBox--9 .directWrapper .directWrapper__header {
      opacity: 0.15; }
    .imageBox--9 .directWrapper .directWrapper__banner {
      position: absolute;
      top: 2vw;
      left: 0;
      width: 100%;
      transform: translateY(0);
      animation: bannerFadeIn 1s 0.5s forwards; }

@keyframes bannerFadeIn {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(5vw); } }
      @media screen and (max-width: 600px) {
        @keyframes bannerFadeIn {
          0% {
            transform: translateY(0); }
          100% {
            transform: translateY(8vw); } } }
      .imageBox--9 .directWrapper .directWrapper__banner .wrapper--button {
        position: absolute;
        width: 9%;
        left: 18.5%;
        top: 20%; }
        @media screen and (max-width: 600px) {
          .imageBox--9 .directWrapper .directWrapper__banner .wrapper--button {
            display: none; } }
        .imageBox--9 .directWrapper .directWrapper__banner .wrapper--button .button__blink {
          position: absolute;
          border-radius: 50%;
          background-color: #Fff;
          width: 11.5%;
          height: 37%;
          top: 31%;
          left: 9%;
          transform-origin: center; }

@keyframes buttonBlink {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }

.imageBox--1 .phoneContent__content .elementFadeIn, .imageBox--4 .phoneContent__content .elementFadeIn, .imageBox--10 .phoneContent__content .elementFadeIn {
  display: block; }

.imageBox--1 .phoneWrapper, .imageBox--4 .phoneWrapper, .imageBox--10 .phoneWrapper {
  width: 20vw;
  height: 39vw;
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 600px) {
    .imageBox--1 .phoneWrapper, .imageBox--4 .phoneWrapper, .imageBox--10 .phoneWrapper {
      height: 56vh;
      /* Fallback for browsers that do not support Custom Properties */
      height: calc(var(--vh, 1vh) * 56);
      width: 29vh;
      /* Fallback for browsers that do not support Custom Properties */
      width: calc(var(--vh, 1vh) * 29); } }
  .imageBox--1 .phoneWrapper .phoneContentWrapper, .imageBox--4 .phoneWrapper .phoneContentWrapper, .imageBox--10 .phoneWrapper .phoneContentWrapper {
    right: 4%;
    top: 7%;
    bottom: 8%;
    left: 4%;
    position: absolute;
    overflow: hidden; }
    @media screen and (max-width: 600px) {
      .imageBox--1 .phoneWrapper .phoneContentWrapper, .imageBox--4 .phoneWrapper .phoneContentWrapper, .imageBox--10 .phoneWrapper .phoneContentWrapper {
        bottom: 8%; } }
    .imageBox--1 .phoneWrapper .phoneContentWrapper .phoneContent, .imageBox--4 .phoneWrapper .phoneContentWrapper .phoneContent, .imageBox--10 .phoneWrapper .phoneContentWrapper .phoneContent {
      height: auto;
      width: 100%;
      position: absolute;
      transform: translateY(0); }
  .imageBox--1 .phoneWrapper .phoneShape, .imageBox--4 .phoneWrapper .phoneShape, .imageBox--10 .phoneWrapper .phoneShape {
    position: absolute;
    top: 0;
    width: 100%; }

.imageBox--4 .phoneContentWrapper .phoneContent__content {
  animation: mobilScrollAnimationtest 6s 1s forwards;
  background-color: #fff; }

@keyframes mobilScrollAnimationtest {
  0% {
    transform: translateY(0vw); }
  100% {
    transform: translateY(-50%); } }

.imageBox--10 .phoneContentWrapper .phoneContent__content {
  position: relative; }
  .imageBox--10 .phoneContentWrapper .phoneContent__content img {
    background-color: #fff;
    transform: translateY(0%);
    animation: mobilScrollAnimation 10s linear 0.1s infinite; }

@keyframes mobilScrollAnimation {
  0% {
    transform: translateY(0%); }
  30% {
    transform: translateY(0%); }
  50% {
    transform: translateY(-70%); }
  80% {
    transform: translateY(-70%); }
  100% {
    transform: translateY(0%); } }

.imageBox--12 {
  background-color: #ffffff; }
  .imageBox--12 .imageBox__bannerBox {
    width: 90%;
    margin-left: 5%;
    position: relative;
    height: 100vh;
    height: 100vh;
    /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden; }
    @media screen and (max-width: 600px) {
      .imageBox--12 .imageBox__bannerBox {
        margin-top: -30%; } }
  .imageBox--12 .banner__bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.15; }
  .imageBox--12 .banner__teaser {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    width: 60vw;
    height: 35vw; }
    @media screen and (max-width: 600px) {
      .imageBox--12 .banner__teaser {
        width: 90vw;
        height: 53vw; } }
    .imageBox--12 .banner__teaser .banner__teaserList {
      display: flex;
      justify-content: flex-start;
      width: 180vw;
      height: 35vw;
      animation: teaserListAnimation 10s infinite; }
      @media screen and (max-width: 600px) {
        .imageBox--12 .banner__teaser .banner__teaserList {
          width: 270vw;
          height: 159vw; } }

@keyframes teaserListAnimation {
  0% {
    margin-left: 0vw; }
  30% {
    margin-left: 0vw; }
  35% {
    margin-left: -60vw; }
  65% {
    margin-left: -60vw; }
  70% {
    margin-left: -120vw; }
  100% {
    margin-left: -120vw; } }
      @media screen and (max-width: 600px) {
        @keyframes teaserListAnimation {
          0% {
            margin-left: 0vw; }
          30% {
            margin-left: 0vw; }
          35% {
            margin-left: -90vw; }
          65% {
            margin-left: -90vw; }
          70% {
            margin-left: -180vw; }
          100% {
            margin-left: -180vw; } } }
      .imageBox--12 .banner__teaser .banner__teaserList .banner__teaserListElement {
        width: 60vw;
        height: 35vw; }
        @media screen and (max-width: 600px) {
          .imageBox--12 .banner__teaser .banner__teaserList .banner__teaserListElement {
            width: 90vw;
            height: 53vw; } }
        .imageBox--12 .banner__teaser .banner__teaserList .banner__teaserListElement img {
          position: absolute; }
        .imageBox--12 .banner__teaser .banner__teaserList .banner__teaserListElement .banner__teaserListElement--text {
          width: 90%;
          margin-left: 5%;
          top: 50%;
          transform: translateY(-57%);
          animation: teasertextListAnimation 3.333s infinite; }

@keyframes teasertextListAnimation {
  0% {
    margin-top: -100%;
    opacity: 0; }
  5% {
    margin-top: -100%;
    opacity: 0; }
  15% {
    margin-top: 0%;
    opacity: 1; }
  85% {
    margin-top: 0%;
    opacity: 1; }
  95% {
    margin-top: 100%;
    opacity: 0; }
  100% {
    margin-top: 100%;
    opacity: 0; } }

.imageBox--13 .websiteFullImage {
  width: 90% !important;
  margin-top: 4vw;
  margin-left: 5%;
  animation: scrollAniamtion 5s linear 1.5s forwards; }

@keyframes scrollAniamtion {
  0% {
    transform: translateY(0vw); }
  100% {
    transform: translateY(-40%); } }
  @media screen and (max-width: 600px) {
    .imageBox--13 .websiteFullImage {
      width: 100% !important;
      margin-left: 0%;
      animation: scrollAniamtionXS 5s linear 1.5s forwards; }
    @keyframes scrollAniamtionXS {
      0% {
        transform: translateY(0vw); }
      100% {
        transform: translateY(-20%); } } }

.imageBox--11 .websiteFullImage {
  width: 90%;
  margin-top: 4vw;
  margin-left: 5%;
  animation: scrollAniamtionRedaction 1.5s linear 0.5s forwards; }
  @media screen and (max-width: 600px) {
    .imageBox--11 .websiteFullImage {
      margin-left: 0%;
      animation: scrollBannerAniamtionXS1 1.5s ease-in-out 0.5s forwards; }
    @keyframes scrollBannerAniamtionXS1 {
      0% {
        transform: translateY(0%); }
      100% {
        transform: translateY(-65%); } } }

@keyframes scrollAniamtionRedaction {
  0% {
    transform: translateY(0vw); }
  100% {
    transform: translateY(-50%); } }

@keyframes aniamtionFadeInOut {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  51% {
    opacity: 0.3; }
  100% {
    opacity: 0.3; } }

.imageBox--11 .redaction--1 {
  animation: aniamtionFadeInOut 3s 0.7s forwards; }

.imageBox--11 .redaction--3 {
  animation: aniamtionFadeInOut 3s 0.7s forwards; }

.imageBox--14 .websiteFullImage {
  width: 90%;
  margin-top: 4vw;
  margin-left: 5%;
  animation: scrollAniamtion 5s linear 1s forwards; }

@keyframes scrollAniamtion {
  0% {
    transform: translateY(0vw); }
  100% {
    transform: translateY(-40%); } }
  @media screen and (max-width: 600px) {
    .imageBox--14 .websiteFullImage {
      width: 100%;
      margin-left: 0%;
      animation: scrollAniamtionXS 5s linear 1s forwards; }
    @keyframes scrollAniamtionXS {
      0% {
        transform: translateY(0vw); }
      100% {
        transform: translateY(-20%); } } }

.imageBox--5 {
  background-color: #fff; }
  .imageBox--5 img {
    opacity: 0; }

@keyframes logoFadeInOut {
  0% {
    opacity: 0; }
  15% {
    opacity: 1; }
  50% {
    opacity: 1; }
  65% {
    opacity: 0; }
  100% {
    opacity: 0; } }
  .imageBox--5 .logo--old {
    width: 50%;
    position: absolute;
    left: 25%;
    animation: logoFadeInOut 6s ease-in-out forwards infinite; }
  .imageBox--5 .logo--new {
    width: 70%;
    left: 15%;
    position: absolute;
    animation: logoFadeInOut 6s ease-in-out 3s forwards infinite; }

.imageBox--6 {
  background-color: #fff;
  padding: 0 10%; }
  .imageBox--6 .imageBox__textBox {
    color: #000;
    width: 25vw; }
    @media screen and (max-width: 600px) {
      .imageBox--6 .imageBox__textBox {
        width: 80vw; } }
    .imageBox--6 .imageBox__textBox span {
      text-transform: uppercase;
      font-size: 16px;
      font-family: aktiv-grotesk, sans-serif;
      font-weight: 500;
      font-style: normal;
      margin-bottom: calc(1.25 * 16px);
      display: block;
      color: #777272;
      position: relative; }
      @media screen and (max-width: 600px) {
        .imageBox--6 .imageBox__textBox span {
          margin-bottom: calc(1.25 * 2.5vw);
          font-size: 3vw; } }
      @media screen and (min-width: 601px) {
        .imageBox--6 .imageBox__textBox span:before {
          content: "";
          width: 3vw;
          height: 1px;
          position: absolute;
          background-color: grey;
          display: block;
          left: -1vw;
          top: 0.3vw;
          transform: translateX(-100%); }
        .imageBox--6 .imageBox__textBox span:after {
          content: "Aktiv-Grotesk";
          font-family: "Aktiv-Grotesk",sans-serif;
          font-size: 14px;
          position: absolute;
          left: -4vw;
          transform: translateX(-110%) translateY(-50%);
          top: 0.3vw; } }
    .imageBox--6 .imageBox__textBox h4 {
      font-family: poynter-oldstyle-display, serif;
      font-weight: 600;
      font-style: normal;
      font-size: calc(3 * 16px);
      line-height: calc(3.25 * 16px);
      margin-bottom: calc(1.25 * 16px);
      position: relative; }
      @media screen and (max-width: 600px) {
        .imageBox--6 .imageBox__textBox h4 {
          font-size: calc(3 * 2.5vw);
          line-height: calc(3.25 * 2.5vw);
          margin-bottom: calc(1.25 * 2.5vw); } }
      @media screen and (min-width: 601px) {
        .imageBox--6 .imageBox__textBox h4:before {
          content: "";
          width: 3vw;
          height: 1px;
          position: absolute;
          background-color: grey;
          display: block;
          left: -1vw;
          transform: translateX(-100%);
          top: 1vw; }
        .imageBox--6 .imageBox__textBox h4:after {
          content: "Poynter Oldstyle Display";
          position: absolute;
          left: -4vw;
          transform: translateX(-110%) translateY(-50%);
          font-family: "Aktiv-Grotesk",sans-serif;
          font-size: 14px;
          top: 1vw; } }
    .imageBox--6 .imageBox__textBox p {
      font-family: aktiv-grotesk, sans-serif;
      font-weight: 400;
      font-style: normal;
      line-height: calc(2 * 16px);
      font-size: calc(1.375 * 16px);
      position: relative; }
      @media screen and (max-width: 600px) {
        .imageBox--6 .imageBox__textBox p {
          line-height: calc(2 * 2.5vw);
          font-size: calc(1.375 * 2.5vw); } }
      @media screen and (min-width: 601px) {
        .imageBox--6 .imageBox__textBox p.active:before {
          content: "";
          width: 3vw;
          height: 1px;
          position: absolute;
          background-color: grey;
          display: block;
          left: -1vw;
          top: 0.7vw;
          transform: translateX(-100%); }
        .imageBox--6 .imageBox__textBox p.active:after {
          content: "Aktiv-Grotesk";
          font-family: "Aktiv-Grotesk",sans-serif;
          font-size: 14px;
          position: absolute;
          left: -4vw;
          transform: translateX(-110%) translateY(-50%);
          top: 0.7vw; } }

.imageBox--8 {
  background-color: #FFDF8A;
  display: flex;
  flex-direction: column;
  justify-content: space-around; }
  .imageBox--8 .row {
    width: 100%;
    display: flex;
    margin-bottom: 5px;
    justify-content: space-around;
    align-items: center;
    margin-left: 5%; }
    .imageBox--8 .row:nth-child(odd) {
      margin-left: -5%; }
  .imageBox--8 img {
    opacity: 0;
    transition: all 1s;
    width: 20%;
    transform-origin: center; }
    @media screen and (max-width: 600px) {
      .imageBox--8 img {
        width: 18%; } }
    .imageBox--8 img:nth-child(1) {
      transform: translateY(-20px) scale(1);
      animation: icon--1 0.5s forwards;
      z-index: 1; }

@keyframes icon--1 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(2) {
      transform: translateY(-20px) scale(1);
      animation: icon--2 0.5s forwards;
      z-index: 2; }

@keyframes icon--2 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(3) {
      transform: translateY(-20px) scale(1);
      animation: icon--3 0.5s forwards;
      z-index: 3; }

@keyframes icon--3 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(4) {
      transform: translateY(-20px) scale(1);
      animation: icon--4 0.5s forwards;
      z-index: 4; }

@keyframes icon--4 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(5) {
      transform: translateY(-20px) scale(1);
      animation: icon--5 0.5s forwards;
      z-index: 5; }

@keyframes icon--5 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(6) {
      transform: translateY(-20px) scale(1);
      animation: icon--6 0.5s forwards;
      z-index: 6; }

@keyframes icon--6 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(7) {
      transform: translateY(-20px) scale(1);
      animation: icon--7 0.5s forwards;
      z-index: 7; }

@keyframes icon--7 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(8) {
      transform: translateY(-20px) scale(1);
      animation: icon--8 0.5s forwards;
      z-index: 8; }

@keyframes icon--8 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(9) {
      transform: translateY(-20px) scale(1);
      animation: icon--9 0.5s forwards;
      z-index: 9; }

@keyframes icon--9 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(10) {
      transform: translateY(-20px) scale(1);
      animation: icon--10 0.5s forwards;
      z-index: 10; }

@keyframes icon--10 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(11) {
      transform: translateY(-20px) scale(1);
      animation: icon--11 0.5s forwards;
      z-index: 11; }

@keyframes icon--11 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(12) {
      transform: translateY(-20px) scale(1);
      animation: icon--12 0.5s forwards;
      z-index: 12; }

@keyframes icon--12 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(13) {
      transform: translateY(-20px) scale(1);
      animation: icon--13 0.5s forwards;
      z-index: 13; }

@keyframes icon--13 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(14) {
      transform: translateY(-20px) scale(1);
      animation: icon--14 0.5s forwards;
      z-index: 14; }

@keyframes icon--14 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(15) {
      transform: translateY(-20px) scale(1);
      animation: icon--15 0.5s forwards;
      z-index: 15; }

@keyframes icon--15 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(16) {
      transform: translateY(-20px) scale(1);
      animation: icon--16 0.5s forwards;
      z-index: 16; }

@keyframes icon--16 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(17) {
      transform: translateY(-20px) scale(1);
      animation: icon--17 0.5s forwards;
      z-index: 17; }

@keyframes icon--17 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(18) {
      transform: translateY(-20px) scale(1);
      animation: icon--18 0.5s forwards;
      z-index: 18; }

@keyframes icon--18 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }
    .imageBox--8 img:nth-child(19) {
      transform: translateY(-20px) scale(1);
      animation: icon--19 0.5s forwards;
      z-index: 19; }

@keyframes icon--19 {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(1) rotate(0deg); }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg); } }

.imageBox--7 {
  background-color: #ffffff; }
  .imageBox--7 body {
    height: 100vh;
    /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw; }
  .imageBox--7 .grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .imageBox--7 .gridBox {
    background-color: transparent;
    width: 10%;
    height: 10%;
    perspective: 1000px;
    overflow: hidden;
    border-radius: 50%;
    position: absolute; }
  .imageBox--7 .gridBox:nth-of-type(1) {
    width: 7vw;
    height: 7vw;
    background-color: #1B1A1A; }
  .imageBox--7 .gridBox:nth-of-type(2) {
    width: 7vw;
    height: 7vw;
    background-color: #323030; }
  .imageBox--7 .gridBox:nth-of-type(3) {
    width: 7vw;
    height: 7vw;
    background-color: #817C7C; }
  .imageBox--7 .gridBox:nth-of-type(4) {
    width: 7vw;
    height: 7vw;
    background-color: #E7E3E3; }
  .imageBox--7 .gridBox:nth-of-type(5) {
    width: 7vw;
    height: 7vw;
    background-color: #EEE5D4; }
  .imageBox--7 .gridBox:nth-of-type(6) {
    width: 7vw;
    height: 7vw;
    background-color: #FFDF8A; }
  .imageBox--7 .gridBox:nth-of-type(7) {
    width: 7vw;
    height: 7vw;
    background-color: #8EB9E4; }
  .imageBox--7 .gridBox:nth-of-type(8) {
    width: 7vw;
    height: 7vw;
    background-color: #DD3B31; }
  .imageBox--7 .gridBox:nth-of-type(1) {
    transform: rotate(calc(45deg * 1)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation1 2s ease-in-out calc(0.25s * 1) forwards; }

@keyframes rotateAnimation1 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 1)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 1)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 1)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 1)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(2) {
    transform: rotate(calc(45deg * 2)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation2 2s ease-in-out calc(0.25s * 2) forwards; }

@keyframes rotateAnimation2 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 2)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 2)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(3) {
    transform: rotate(calc(45deg * 3)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation3 2s ease-in-out calc(0.25s * 3) forwards; }

@keyframes rotateAnimation3 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 3)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 3)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(4) {
    transform: rotate(calc(45deg * 4)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation4 2s ease-in-out calc(0.25s * 4) forwards; }

@keyframes rotateAnimation4 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 4)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 4)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(5) {
    transform: rotate(calc(45deg * 5)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation5 2s ease-in-out calc(0.25s * 5) forwards; }

@keyframes rotateAnimation5 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 5)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 5)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(6) {
    transform: rotate(calc(45deg * 6)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation6 2s ease-in-out calc(0.25s * 6) forwards; }

@keyframes rotateAnimation6 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 6)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 6)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(7) {
    transform: rotate(calc(45deg * 7)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation7 2s ease-in-out calc(0.25s * 7) forwards; }

@keyframes rotateAnimation7 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 7)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 7)) translateY(15vw) scale(1); } }
  .imageBox--7 .gridBox:nth-of-type(8) {
    transform: rotate(calc(45deg * 8)) translateY(20vw) scale(1);
    opacity: 0;
    animation: rotateAnimation8 2s ease-in-out calc(0.25s * 8) forwards; }

@keyframes rotateAnimation8 {
  0% {
    opacity: 0;
    transform: rotate(calc(45deg * 8)) translateY(15vw) scale(1); }
  20% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translateY(15vw) scale(1.5); }
  50% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translateY(15vw) scale(1); }
  100% {
    opacity: 1;
    transform: rotate(calc(45deg * 8)) translateY(15vw) scale(1); } }

.textBox {
  position: absolute;
  top: 0%;
  left: 0;
  height: 100%;
  width: 33.33%;
  padding: 4vw;
  font-size: 1.2em;
  line-height: 1.3em;
  z-index: 1;
  font-family: aktiv-grotesk, sans-serif; }
  .textBox h2 {
    font-family: aktiv-grotesk-extended, sans-serif;
    text-transform: uppercase; }
    @media screen and (min-width: 600px) {
      .textBox h2 {
        margin-bottom: 40px; } }
    @media screen and (max-width: 600px) {
      .textBox h2 {
        font-size: 0.8em; } }
    .textBox h2 span {
      font-weight: bold; }
  @media screen and (max-width: 600px) {
    .textBox h2 + p {
      margin-bottom: 10px;
      margin-top: 10px; } }
  .textBox h3 {
    font-family: aktiv-grotesk-extended, sans-serif;
    padding-top: 20px;
    font-weight: bold;
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative; }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .textBox h3 {
        padding-top: 10px;
        margin-bottom: 10px; } }
    @media screen and (max-width: 600px) {
      .textBox h3 {
        margin-bottom: 7px;
        padding-top: 10px; } }
    @media screen and (max-width: 321px) {
      .textBox h3 {
        margin-bottom: 3px; } }
  @media screen and (max-width: 600px) {
    .textBox {
      height: 33.33%;
      width: calc(100%) !important;
      left: 0 !important;
      top: 0% !important;
      font-size: 0.95em;
      line-height: 1.2em;
      padding: 25px; } }
  @media screen and (max-width: 321px) {
    .textBox {
      width: 100vw !important;
      font-size: 0.8em; } }

.textBox p {
  max-width: 450px;
  font-weight: 400;
  color: #1B1A1A; }
  @media screen and (max-width: 600px) {
    .textBox p {
      overflow: scroll; } }

@media screen and (max-width: 600px) {
  .textBox .textBoxWrapper {
    position: relative; }
    .textBox .textBoxWrapper p {
      padding-bottom: 30px; }
    .textBox .textBoxWrapper::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 25px;
      background: linear-gradient(0deg, #F8F6F6 0%, #F8F6F6 30%, rgba(255, 255, 255, 0) 100%);
      bottom: -2px;
      left: 0;
      z-index: 6; }
  .textBox .textBox--shortSuper p {
    height: calc(33.33vh - 66px);
    height: calc(((var(--vh, 1vh) * 33.33)) - 66px); }
  .textBox .textBox--short p {
    height: calc(33.33vh - 90px);
    height: calc(((var(--vh, 1vh) * 33.33)) - 95px); }
  .textBox .textBox--long p {
    height: calc(33.33vh - 120px);
    height: calc(((var(--vh, 1vh) * 33.33)) - 105px); } }

.textBox .textBox--text {
  opacity: 0;
  transition: all 0.3s;
  transition-delay: 0s; }

.textBox.fadeIn .textBox--text {
  opacity: 1;
  background-color: transparent; }

.textBox.fadeOut .textBox--text {
  opacity: 0;
  background-color: transparent; }

.textBox--0 h2, .textBox--3 h2, .textBox--5 h2,
.textBox--9 h2, .textBox--12 h2, .textBox--15 h2, .textBox--16 h2 {
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 0s; }

.textBox--0.fadeIn .textBox--text, .textBox--3.fadeIn .textBox--text, .textBox--5.fadeIn .textBox--text,
.textBox--9.fadeIn .textBox--text, .textBox--12.fadeIn .textBox--text, .textBox--15.fadeIn .textBox--text, .textBox--16.fadeIn .textBox--text {
  transition-delay: 1s; }

.textBox--0.fadeIn h2, .textBox--3.fadeIn h2, .textBox--5.fadeIn h2,
.textBox--9.fadeIn h2, .textBox--12.fadeIn h2, .textBox--15.fadeIn h2, .textBox--16.fadeIn h2 {
  opacity: 1; }

.textBox--0.fadeOut .textBox--text, .textBox--3.fadeOut .textBox--text, .textBox--5.fadeOut .textBox--text,
.textBox--9.fadeOut .textBox--text, .textBox--12.fadeOut .textBox--text, .textBox--15.fadeOut .textBox--text, .textBox--16.fadeOut .textBox--text {
  transition-delay: 1s; }

.textBox--0.fadeOut h2, .textBox--3.fadeOut h2, .textBox--5.fadeOut h2,
.textBox--9.fadeOut h2, .textBox--12.fadeOut h2, .textBox--15.fadeOut h2, .textBox--16.fadeOut h2 {
  opacity: 0; }


/*# sourceMappingURL=bundle.css.map*/