.skylounge {
  --color-light: #FFFFFF;
  --color-middle: #FFFFFF;
  --color-dark: #343434;
  --color-primary: #343434;
  --color-font: #343434;
}

.skylounge * {
  font-family: 'Rasch Sans Light', 'Open Sans', sans-serif;
}

.skylounge a {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
}

.skylounge #logo-right {
  position: relative;
  /* align-content: center; */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* align-items: flex-start; */
  width: 100%;
  top: -3rem;
}

.skylounge #logo-left img {
  width: 900px;
}

.skylounge #logo-right img {
  width: 170px;
}

@media all and (max-width: 550px) {
  .skylounge #logo-left {
    top: 11rem;
    display: block;
    position: relative;
    margin: 0 auto;
    width: 300px;
  }

  .skylounge #logo-right {
    position: absolute;
    top: .1rem;
    left: 1rem;
    width: 100%;
    justify-content: center;
  }
}

.skylounge h1,
.skylounge h2,
.skylounge h3,
.skylounge h4,
.skylounge h5 {
  font-family: 'Montserrat', 'Rasch Sans', sans-serif;
  color: var(--color-primary);
  font-weight: 100;
}

.skylounge .wrapper-inner h2 {
  text-transform: none;
}

/*.skylounge h2 {*/
/*  font-family: 'RecifeDisplay', 'Open Sans', sans-serif;*/
/*  letter-spacing: 5px;*/
/*}*/

.skylounge .light:not(.is-child-paragraph) {
  background-color: var(--color-light);
}

.skylounge .middle:not(.is-child-paragraph) {
  background-color: var(--color-middle);
}

.skylounge .dark:not(.is-child-paragraph) {
  background-color: var(--color-dark);
}

.skylounge .primary:not(.is-child-paragraph) {
  background-color: var(--color-primary);
}

.skylounge .light p,
.skylounge .middle p {
  color: var(--color-font);
}

.skylounge .primary p,
.skylounge .primary h1,
.skylounge .primary h2,
.skylounge .primary h3,
.skylounge .primary h4,
.skylounge .primary h5,
.skylounge .dark p,
.skylounge .dark h1,
.skylounge .dark h2,
.skylounge .dark h3,
.skylounge .dark h4,
.skylounge .dark h5 {
  color: var(--color-light);
}

.skylounge h1 {
  font-size: 64px;
}

.skylounge h2 {
  font-size: 64px;
}

.skylounge h3 {
  font-size: 56px;
}

.skylounge .dark:not(.is-child-paragraph) .media .description p,
.skylounge .primary:not(.is-child-paragraph) .media .description p {
  color: #F0F1F3;
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
}

.skylounge .light:not(.is-child-paragraph) .media .description p,
.skylounge .middle:not(.is-child-paragraph) .media .description p {
  color: #7F7F7F;
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
}

.skylounge article.media.image[view_mode = 'tapete_1_1'] img {
  border-radius: unset;
  border: none;
  margin: 0 auto;
}

.skylounge .slick-prev {
  background: url(../factory/arrow_left_black.svg) 50% 43% no-repeat;
  width: 3rem;
  left: 5rem;
}

.skylounge .slick-next {
  background: url(../factory/arrow_right_black.svg) 50% 43% no-repeat;
  width: 3rem;
  right: 5rem;
}

.skylounge .dark .slick-prev,
.skylounge .primary .slick-prev {
  background: url(../factory/arrow_left_white.svg) 50% 43% no-repeat;
}

.skylounge .dark .slick-next,
.skylounge .primary .slick-next {
  background: url(../factory/arrow_right_white.svg) 50% 43% no-repeat;
}

.front.skylounge .scroll-down {
  width: 42px;
  right: 9vw;
  top: 85vh;
}

.front.skylounge .scroll-down img {
  width: 42px;
}

.skylounge footer #block-footertext span {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
}

.skylounge footer nav#block-fusszeile ul li a {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
  color: var(--color-light);
}

.skylounge #block-brandingderwebsite img {
  width: 400px;
}

.skylounge.not-front #logos {
  display: none;
}

.skylounge #block-sprachumschalter ul li a {
  text-decoration: none;
  color: var(--color-light);
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
}

.skylounge #block-sprachumschalter ul li:hover a,
.skylounge #block-sprachumschalter ul li.is-active a {
  font-family: 'Rasch Sans Bold', 'Open Sans', sans-serif;
}

.skylounge .narrow > * {
  max-width: 159rem;
}

.skylounge #logos {
  top: 4em;
}

.skylounge .paragraph:not(.is-child-paragraph) > .p-big {
  /*padding-top: 12rem !important;*/
  /*padding-bottom: 12rem !important;*/
}

.skylounge footer, .skylounge footer a {
  background-color: var(--color-dark);
  color: var(--color-light);
}

.skylounge footer #block-brandingderwebsite {
  align-items: center;
}

.skylounge [data-items-in-a-row="8"] > div {
  align-items: baseline;
}

.skylounge [data-items-in-a-row="8"] article.media.image[view_mode = 'tapete_1_1'] {
  padding: 1em;
}

.skylounge footer > div > nav {
  justify-content: flex-end;
}

/*
first slider
 */
.skylounge #block-client-content > article > div > div.paragraph:first-of-type {
  min-height: 100vh;
  padding-bottom: 12rem;
}
.skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
  max-width: 137rem;
  top: 14rem;
}
.skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-list .is-child-paragraph img {
  width: 100%
}

.skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next {
  right: -5rem;
}
.skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
  left: -5rem;
}

.skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next,
.skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
  background-position-y: 50%;
}

/*
In case the slider images should have a box-shadow, you can add this to the CSS:

.skylounge article.media.image[view_mode = 'tapete_1_1'] img {
  box-shadow: 0 20px 35px #00000029;
}
.skylounge .wide .slick-list {
  max-width: calc(170rem - 25px);
  margin: 0 auto;
  padding: 0;
}
*/

@media screen and (min-width: 1501px) {
  .front.skylounge .scroll-down {
    right: 5vw;
  }
}

@media screen and (max-width: 1500px) {
  .front.skylounge .scroll-down {
    right: 3rem;
  }

  .skylounge .slick-prev {
    width: 2rem;
    left: 2rem;
  }

  .skylounge .slick-next {
    width: 2rem;
    right: 2rem;
  }

  .skylounge h1 {
    font-size: 48px;
  }

  .skylounge h2 {
    font-size: 80px;
  }

  .skylounge h3 {
    font-size: 55px;
  }
}

@media screen and (max-width: 1400px) {
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 125rem;
  }

  .skylounge .slick-prev {
    width: 2.5rem;
    left: 1rem;
  }

  .skylounge .slick-next {
    width: 2.5rem;
    right: 1rem;
  }

  .skylounge h1 {
    font-size: 43px;
  }

  .skylounge h2 {
    font-size: 70px;
  }

  .skylounge h3 {
    font-size: 50px;
  }

}

@media screen and (max-width: 1330px) {
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type {
    min-height: unset;
    padding-bottom: 20rem;
  }

  .skylounge #logos {
    max-width: 94vw;
  }

  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 90vw;
  }

  .skylounge h1 {
    font-size: 40px;
  }

  .skylounge h2 {
    font-size: 60px;
  }

  .skylounge h3 {
    font-size: 47px;
  }
}

@media screen and (max-width: 1050px) {
  .skylounge h1 {
    font-size: 36px;
  }

  .skylounge h2 {
    font-size: 55px;
  }

  .skylounge h3 {
    font-size: 42px;
  }
}

@media screen and (max-width: 900px) {
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next {
    right: -3rem;
    width: 2rem;
  }
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
    left: -3rem;
    width: 2rem;
  }

  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 85vw;
  }

  .skylounge #block-sprachumschalter ul {
    height: 16px;
  }

  .skylounge h1 {
    font-size: 32px;
  }

  .skylounge h2 {
    font-size: 50px;
  }

  .skylounge h3 {
    font-size: 40px;
  }

}

@media screen and (max-width: 786px) {
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next {
    right: -3rem;
    width: 2rem;
  }
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-prev {
    left: -3rem;
    width: 2rem;
  }

  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
    max-width: 85vw;
  }

  .skylounge #logo-right img {
    width: 200px;
    margin: 0 auto;
  }

  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
    top: 17rem;
  }

  .skylounge #block-client-content > article > div > div.paragraph:first-of-type {
    padding-bottom: 23rem;
  }

  .skylounge #logos {
    max-width: 90vw;
  }

  .skylounge h1 {
    font-size: 27px;
  }

  .skylounge h2 {
    font-size: 40px;
  }

  .skylounge h3 {
    font-size: 33px;
  }
}

@media screen and (max-width: 550px) {
  .skylounge #block-client-content > article > div > div.paragraph:first-of-type > .row {
    top: 25rem;
  }

  .skylounge #block-client-content > article > div > div.paragraph:first-of-type {
    padding-bottom: 33rem;
  }

  .skylounge #block-sprachumschalter ul.active {
    height: 100%;
  }

  .skylounge #block-sprachumschalter {
    z-index: 999999;
  }

  .skylounge h1 {
    font-size: 22px;
  }

  .skylounge h2 {
    font-size: 30px;
  }

  .skylounge h3 {
    font-size: 27px;
  }
}

.skylounge #block-client-local-tasks ul li a {
  color: var(--color-dark);
}

.skylounge .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .wrapper-inner {
  align-items: stretch;
}
.skylounge .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .paragraph--type--etagen-media-image > div,
.skylounge .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .paragraph--type--etagen-media-image article {
  height: 100%;
}
.skylounge .paragraph--type--etagen-wrapper:not([data-items-in-a-row="8"]) .paragraph--type--etagen-media-image img {
  height: 100%;
  object-fit: cover;
}