.magicwalls {
  --color-light: #FFFFFF;
  --color-middle: #F2F0ED;
  --color-dark: #E6E4E1;
  --color-primary: #E11B1E;
  --color-font: #7F7F7F;
}

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

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

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

.magicwalls #logo-left img {
  width: 300px;
}

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

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

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

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

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

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

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

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

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

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

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

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

.magicwalls h1 {
  font-size: 50px;
}

.magicwalls h2 {
  font-size: 90px;
}

.magicwalls h3 {
  font-size: 60px;
}

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

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

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

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

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

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

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

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

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

.magicwalls footer {
  background-color: #000;
  color: #fff;
}

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

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

.magicwalls #block-brandingderwebsite img {
  width: 170px;
}

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

.magicwalls #block-sprachumschalter ul li a {
  text-decoration: none;
  color: #000;
  font-family: 'Rasch Sans', 'Open Sans', sans-serif;
}

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

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

.magicwalls #logos {
  top: 4em;
}

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

.magicwalls footer, .magicwalls footer a {
  background-color: var(--color-middle);
  color: var(--color-font);
}

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

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

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

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

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

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

.magicwalls #block-client-content > article > div > div.paragraph:first-of-type > .row .slick-next,
.magicwalls #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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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