@keyframes slide-in-left {
  0% {
    transform: translateX(-200px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50px);
    opacity: 0;
  }
}


@keyframes fade-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
@keyframes tilt-in-top-1 {
  0% {
    transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}

body{
  background-color: var(--color-lavender);
}

body.fixed-position{
  position: fixed;
} 


h3{
  margin:0;
  font-size: 60px;
}

.and-sign{
  background-image: url("/templates-static/andCoEdition/images/UND.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

/*Back to top*/
#return-to-top {
    z-index: 100;
    position: fixed;
    bottom: 50%;
    right: 20px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.7);
    width: 56px;
    height: 56px;
    display: block;
    opacity: 0;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    visibility: hidden;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}

#return-to-top.active{
  opacity: 1;
  visibility: visible;}

#return-to-top svg {
    color: #000;
    margin: 0;
    position: relative;
    left: 14px;
    top: 16px;
    height: 24px;
    width: 24px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@media only screen and (min-width: 800px) {
  #return-to-top:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  #return-to-top:hover svg {
      color: #fff;
      left: 6px;
  }
}

@media only screen and (max-width: 799px) {
  #return-to-top {
    bottom: 40px;
    right: calc(50% - 28px);
  }

  #return-to-top svg {
    transform: rotate(90deg);
    left:16px;
  }
}

.decor-card-img{
  position: relative;
  z-index: 2;
}

.decor-card-icon{
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 38px;
  height: 30px;
  background-size: cover;
  transition: all 1.0s ease;
}

@media only screen and (max-width: 799px) {
  .decor-card-icon{
    opacity: 1;
  }
}

@media only screen and (min-width: 800px) {
  .decor-card-icon{
    opacity: 0;
  }
}

.decor-card:hover .decor-card-icon{
  opacity: 1;
}

.decor-card-icon.digital-druck-blau-kontur{
  background-image: url("/templates-static/andCoEdition/images/icons/IP_Icon_Digitaldruck_Blau Kontur.svg");
}

.decor-card-icon.digital-druck-blau{
  background-image: url("/templates-static/andCoEdition/images/icons/IP_Icon_Digitaldruck_Blau.svg");
}

.decor-card-icon.digital-druck-weiss-kontur{
  background-image: url("/templates-static/andCoEdition/images/icons/IP_Icon_Digitaldruck_Weiss_Kontur.svg");
}

.decor-card-icon.flooring-blau-kontur{
  background-image: url("/templates-static/andCoEdition/images/icons/IP_Icon_Flooring_Blau_Kontur.svg");
}

.decor-card-icon.flooring-blau{
  background-image: url("/templates-static/andCoEdition/images/icons/IP_Icon_Flooring_Blau.svg");
}

.decor-card-icon.flooring-weiss-kontur{
  background-image: url("/templates-static/andCoEdition/images/icons/IP_Icon_Flooring_Weiss_Kontur.svg");
}

/*Decor Cards*/
.decor-card img{
  display: block;
  width: 156px;
  height: 156px;
  overflow: hidden;
  object-fit: cover;
}

.decor-card{
  text-decoration: none;
  color:inherit;
  opacity: 0;
}

.decor-card:hover{
  z-index: 10;
}

.decor-card:hover .decor-name{
  opacity: 1;
}

.decor-name{
  color: var(--color-black);
  font-family: 'Founders Grotesk';
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 120%;
  margin-bottom: 8px;
  margin-top: 0px;
  opacity: 0;
  text-transform: uppercase;
  animation: 1s ease 0s 1 normal none fade-out-bottom;
}

@media only screen and (max-width: 799px) {
  .decor-name{
    opacity: 1;
    font-size: 18px;
    margin-bottom: 4px;
  }
  .decor-card img{
    width: 30vw;
    height: 30vw;
    overflow: hidden;
    object-fit: cover;
  }

}

.nav-wrapper{
  height:100%;
  z-index: 2;
}
.burger{
  display: none;
  cursor: pointer;
}

.bar{
  display: block;
  width: 24px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}

#horizontal-wrapper{
  position: absolute;
  height:100vh;
  width: 100vw;
  overflow-y: scroll;
  /* overflow-x: hidden; */
}

.footer{
  align-self: stretch;
  padding: 40px 32px 40px 0;
  display: flex;
  flex-direction: column;
  align-items:flex-end;
  justify-content: space-between;
}

@media only screen and (max-width: 799px) {
  .footer{
    flex-direction: row;
    padding: 40px 24px 40px 24px;
  }
}

.ip-logo{
  height: 100px;
  width: 100px;
  background: url("/templates-static/andCoEdition/images/Logo_IP.svg") 100% 100% no-repeat;
  background-size: contain;
  background-position: center center;
}

.footer .interprint-toppan{
    display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer .interprint-link img{
  display: block;
  width: 96px;
}


.imprint-link{
  position:inherit;
  text-decoration: none;
  font-size: 14px;
  color: #333;
  font-family: var(--font-founders-grotesk);
  transition: all 0.3s ease;
}

.imprint-link:hover{
  color:black;
}

.link-IP{
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.link-IP .bi-arrow-left{
  height: 20px;
  width: 20px;
}

.flooring-decor{
  animation: 1s ease 0.5s 1 normal forwards fade-in;
}

@media only screen and (max-width: 799px) {
  .link-IP .bi-arrow-left{
    height: 3vh;
    width: 3vh;
  }
  .link-IP{
    justify-content: center;
  }
}

.and-co-typo{
  position: absolute;
  left: 5vh;
  top: 2vh;
  z-index: 10;
  height: 30vh;
}

@media only screen and (max-width: 799px) {
  .and-co-typo{
    height:80px;
    top: 64px;
    left: 16px;
  }
}

.and-co-typo img{
  display: block;
  height:100%;
  width: auto;
}








            @media only screen and (min-width: 800px) {
              #horizontal-wrapper{
                height:100vh;
                width: 100vw;
                overflow-x: Sscroll;
                overflow-y: hidden;
              }

              main{
                -webkit-transform-origin: left top;
                -moz-transform-origin: left top;
                -ms-transform-origin: left top;
                -o-transform-origin: left top;
                transform-origin: left top;
                position: relative;
                height: 100vh;
                width: fit-content;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
              }


              p{
                font-size: clamp(14px, 2vh, 28px);
                line-height: 120%;
                margin: 0 0;
                color: var(--color-black);
              }

              .card-helia{
                animation: 1s ease 0.8s 1 normal forwards fade-in;
              }

              .card-pescali{
                animation: 1s ease 1.5s 1 normal forwards fade-in;
              }

              .card-salva-oak{
                position: absolute;
                top: 45px;
                animation: 1s ease 0.8s 1 normal forwards fade-in;
              }

              .card-quentin{
                animation: 1s ease 0.8s 1 normal forwards fade-in;
                position: absolute;
                left:111px;
                top:0;
              }
              .card-stan{
                animation: 1s ease 0.4s 1 normal forwards fade-in;
                position: absolute;
                left:0;
                top:114px;
              }

              .card-enzo{
                animation: 1s ease 0.4s 1 normal forwards fade-in;
              }

              .card{
                animation: 1s ease 0.8s 1 normal forwards fade-in;
              }

              .card-flooring-co-creation{
                animation: 1s ease 0.4s 1 normal forwards fade-in;
                position: absolute;
                bottom:0;
                right:0;
              }

            .and-sign {
              margin-top: 4.8vh;
              position: relative;
              height: 26vh;
              width: 20vh;
              text-transform: uppercase;
            }
            .serif,
            .sans {
              font-weight: 200;
              margin: 0;
              line-height: 91.36%;
              font-family: var(--font-reckless-neue);
            }
            .sans {
              font-weight: 400;
              line-height: 96.99%;
              font-family: var(--font-founders-grotesk);
            }
            .nav-link {
              align-self: stretch;
              position: relative;
              font-size: clamp(14px, 2.5vh, 40px);
              text-transform: uppercase;
              color: var(--color-darkolivegreen);
              text-align: left;
              text-decoration: none;
              cursor: pointer;
              transition: all 0.3s ease;
            }
            .nav-link:hover {
              color: var(--color-black);
            }
            .nav-wrapper,
            .nav {
              align-self: stretch;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: flex-start;
            }
            .nav {
              padding: 0 0 0 var(--padding-5xs);
              gap: 3vh;
            }
            .nav-wrapper {
              align-items: center;
              background-color: var(--color-yellowgreen);
              padding: 0 24px;
              box-sizing: border-box;
              gap: var(--gap-35xl);
              opacity: 0;
              height: 100%;
              width: 35vh;
              justify-content: flex-end;
              padding-bottom: 10vh;
            }
            .nav-wrapper.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-left;
            }
            .redrectangle {
              width: 31.5vh;
              height: 100%;
              z-index: 0;
            }
            .co1,
            #redrectangle1 {
              align-self: stretch;
              position: relative;
            }
            .co1 {
              width: 60vh;
            }
            #redrectangle1 {
              flex: 1;
              background-color: var(--color-orangered);
            }
            .co-scale {
              align-self: stretch;
              height: 35vh;
              flex-shrink: 0;
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              justify-content: center;
              opacity: 0;
              z-index: 0;
            }
            .co-scale.animate {
              animation: 1s ease 0.4s 1 normal forwards slide-in-top;
            }
            .serif{
              margin: 0;
              line-height: 91.36%;
            }
            .heading6{
              margin: 0;
              position: relative;
            }
            .heading6 {
              align-self: stretch;
              font-size: inherit;
              text-transform: uppercase;
              font-family: inherit;
            }
            .hero-text-wrapper,
            .herotext,
            .herotextwrapper {
              align-self: stretch;
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
            }
            .hero-text-wrapper {
              flex-direction: row;
              padding: 0 var(--padding-61xl);
              box-sizing: border-box;
              width: 80%;
              max-width: 900px;
              font-size: clamp(14px, 2vh, 28px);
              font-family: var(--font-founders-grotesk);
            }
            .herotext,
            .herotextwrapper {
              flex-direction: column;
            }
            .herotext {
              gap: 5vh;
            }
            .herotextwrapper {
              padding: 0 0 var(--padding-69xl) var(--padding-61xl);
              opacity: 0;
              z-index: 1;
              font-size: clamp(32px, 7vh, 72px);
              font-family: var(--font-reckless-neue);
            }
            .herotextwrapper.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }
            .arrow,
            .arrow-child {
              position: absolute;
              right: -1.41px;
              bottom: -0.7px;
              width: 63.91px;
              height: 64.91px;
            }
            .arrow {
              text-decoration: none;
              margin: 0 !important;
              right: 60.5px;
              bottom: 62.5px;
              width: 62.5px;
              height: 63.5px;
              flex-shrink: 0;
              cursor: pointer;
              z-index: 2;
            }
            .co,
            .hero {
              align-self: stretch;
              display: flex;
              justify-content: flex-start;
            }
            .co {
              flex: 1;
              flex-direction: column;
              align-items: flex-start;
              position: relative;
              gap: var(--gap-58xl);
            }
            .hero {
              width: 140vh;
              flex-shrink: 0;
              flex-direction: row;
              align-items: center;
              min-width: 1200px;
              text-align: left;
              font-size: 40vh;
              color: var(--color-black);
              font-family: var(--font-reckless-neue);
            }
            .imgbed-icon,
            .imgslate-icon {
              position: absolute;
              margin: 0 !important;
              flex-shrink: 0;
              overflow: hidden;
              object-fit: cover;
            }
            .imgslate-icon {
              top: -60px;
              left: 34px;
              width: 65vh;
              height: vh5;
              opacity: 0;
              bottom: 25vh;
              z-index: 0;
            }
            .imgslate-icon.animate {
              animation: 1s ease 0.4s 1 normal forwards slide-in-bottom;
            }
            .imgbed-icon {
              top: 23px;
              left: 937px;
              width: 25vh;
              height: 40vh;
              opacity: 0;
              z-index: 1;
            }
            .imgbed-icon.animate{
              animation: 1s ease 0.4s 1 normal forwards fade-in;
            }
            .being1,
            .well1 {
              margin: 0;
              position: absolute;
              text-transform: uppercase;
              font-weight: 400;
            }
            .well1 {
              bottom: 139px;
              left: 25px;
              font-size: inherit;
              font-family: inherit;
            }
            .being1 {
              bottom: -5px;
              left: 0;
              font-size: var(--font-size-161xl);
              font-family: var(--font-founders-grotesk);
            }
            .sectionheading {
              position: relative;
              width: 514px;
              height: 318px;
              flex-shrink: 0;
              opacity: 0;
              z-index: 2;
            }
            .sectionheading.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }

            .cardmayru.animate {
              animation: 1s ease 0.2s 1 normal forwards fade-in;
            }
            .flooring-decor2.animate {
              animation: 1s ease 0.5s 1 normal forwards fade-in;
            }
            .cards {
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              justify-content: flex-start;
              gap: var(--gap-9xl);
            }
            .well-being-p {
              margin: 0;
              align-self: stretch;
              position: relative;

            }
            .cards-and-text {
              z-index: 3;
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: flex-end;
              gap: var(--gap-23xl);
              opacity: 0;
              font-size: var(--font-size-5xl);
              color: var(--color-gray);
              font-family: var(--font-founders-grotesk);
            }
            .cards-and-text.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-right;
            }
            .content {
              position: absolute;
              bottom: 0;
              left: calc(50% - 612px);
              background-color: var(--color-silver-200);
              width: 1224px;
              height: 65vh;
              display: flex;
              flex-direction: row;
              padding: 0 var(--padding-base) var(--padding-21xl) var(--padding-31xl);
              box-sizing: border-box;
              align-items: flex-end;
              justify-content: flex-start;
              gap: var(--gap-75xl);
            }

            .cardlux.animate {
              animation: 1s ease 0s 1 normal forwards fade-in;
            }
            .decor-card:hover .decor-name{
              animation: 1s ease 0s 1 normal none fade-in-bottom;
              opacity: 1;
            }

            .cardlevo.animate {
              animation: 1s ease 0.2s 1 normal forwards fade-in;
            }

            .lux-and-levo {
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              justify-content: flex-start;
              gap: var(--gap-base);
            }

            .imgkitchen-icon {
              position: relative;
              width: 335px;
              height: 40vh;
              flex-shrink: 0;
              overflow: hidden;
              object-fit: cover;
            }

            .img-kitchen-wrapper {
              display: flex;
              flex-direction: row;
              padding: 31px 0 0 var(--padding-21xl);
              align-items: flex-start;
              justify-content: flex-start;
            }

            .cardrayaoak {
              text-decoration: none;
              position: absolute;
              top: 100px;
              left: 0;
              width: 156px;
              height: 187px;
              opacity: 0;
              color: inherit;
            }
            
            .cardrayaoak.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }

            .cardcalia {
              text-decoration: none;
              position: absolute;
              top: 0;
              left: 133px;
              opacity: 0;
              color: inherit;
            }
            .cardcalia.animate {
              animation: 1s ease 0.4s 1 normal forwards fade-in;
            }
            .calia-and-raya {
              position: relative;
              flex-shrink: 0;
            }
            .well-being-images {
              position: absolute;
              width: 100%;
              top: 30px;
              right: 0;
              left: 0;
              display: flex;
              flex-direction: row;
              padding: 0 0 0 var(--padding-13xl);
              box-sizing: border-box;
              align-items: flex-start;
              justify-content: flex-start;
              gap: 106px;
              font-size: var(--font-size-5xl);
              color: var(--color-gray);
              font-family: var(--font-founders-grotesk);
            }
            .well-being {
              align-self: stretch;
              position: relative;
              width: 1224px;
              flex-shrink: 0;
              z-index: 1;
              text-align: left;
              font-size: var(--font-size-141xl);
              color: var(--color-black);
              font-family: var(--font-reckless-neue);
            }
            .co-2,
            .exist1 {
              margin: 0;
              position: relative;
              line-height: 70%;
              text-transform: uppercase;
              font-weight: 400;
            }
            .co-2 {
              font-size: clamp(40px, 14vh, 200px);
              font-weight: 200;
              font-family: inherit;
            }
            .exist1 {
              font-size: clamp(44px, 16vh, 200px);
              font-family: var(--font-founders-grotesk);
            }
            .header-text {
              position: absolute;
              top: 11px;
              left: 525px;
              display: flex;
              flex-direction: column;
              padding: var(--padding-5xl) 0;
              align-items: flex-start;
              justify-content: flex-start;
              gap: var(--gap-mid);
            }
            .header {
              position: relative;
              background-color: var(--color-lightsalmon);
              width: 1197px;
              height: 35vh;
              flex-shrink: 0;
              overflow: hidden;
              opacity: 0;
              z-index: 0;
            }
            .header.animate {
              animation: 1s ease 0.2s 1 normal forwards slide-in-top;
            }
            .img-decor-icon {
              bottom: 241px;
              left: 222px;
              width: 263px;
              height: 391px;
              opacity: 0;
              z-index: 1;
            }
            .img-decor-icon.animate {
              animation: 1s ease 0.4s 1 normal forwards slide-in-bottom;
            }
            .img-decor-icon,
            .flooring-decor,
            .img-table-icon {
              position: absolute;
              margin: 0 !important;
              flex-shrink: 0;
              overflow: hidden;
              object-fit: cover;
            }
            .img-table-icon {
              bottom: 290px;
              left: 179px;
              width: 263px;
              height: 391px;
              opacity: 0;
              z-index: 2;
            }
            .img-table-icon.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-top;
            }
            .flooring-decor {
              bottom: 0;
              left: -90px;
              width: 156px;
              height: 156px;
              z-index: 0;
            }
            .image1-icon,
            .image2-icon,
            .text {
              align-self: stretch;
              position: relative;
            }
            .text {
              margin: 0;
              line-height: 120%;
              display: inline-block;
              width: 80%;
              z-index: 1;
            }
            .image1-icon,
            .image2-icon {
              max-height: 100%;
              width: 25vh;
              flex-shrink: 0;
              overflow: hidden;
              object-fit: cover;
              opacity: 0;
              height: 40vh;
            }
            .image1-icon.animate {
              animation: 1s ease 0.4s 1 normal forwards fade-in-bottom;
            }
            .image2-icon.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in-top;
            }
            .images,
            .text-and-images {
              align-items: flex-start;
              justify-content: flex-start;
            }
            .images {
              flex: 1;
              display: flex;
              flex-direction: row;
              gap: var(--gap-base);
              z-index: 2;
            }
            .text-and-images {
              width: 586px;
              flex-shrink: 0;
              flex-direction: column;
              padding: var(--padding-21xl) 0;
              box-sizing: border-box;
              position: relative;
              gap: var(--gap-5xl);
            }
            .co-exist-content,
            .content1,
            .text-and-images {
              align-self: stretch;
              display: flex;
            }
            .content1 {
              flex: 1;
              flex-direction: row;
              align-items: flex-start;
              justify-content: flex-end;
              z-index: 3;
              font-size: clamp(14px, 2vh, 28px);
              font-family: var(--font-founders-grotesk);
            }
            .co-exist-content {
              flex-direction: column;
              align-items: flex-end;
              justify-content: flex-start;
              position: relative;
            }

            .card-aurum.animate {
              animation: 1s ease 0.8s 1 normal forwards fade-in;
            }
            .card-avno-oak.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }




            .card-linia.animate {
              animation: 1s ease 0.4s 1 normal forwards fade-in;
            }
            .decor-list {
              display: flex;
              flex-direction: column;
              padding: var(--padding-13xl) 0 0;
              align-items: flex-start;
              justify-content: flex-start;
              gap: var(--gap-5xl);
              opacity: 0;
              z-index: 100;
              margin-left: -68px;
              font-size: var(--font-size-5xl);
              font-family: var(--font-founders-grotesk);
            }
            .decor-list.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-top;
            }
            .co-exist {
              z-index: 0;
              margin-left: -118px;
              text-align: left;
              font-size: clamp(80px, 14vh, 200px);
              color: var(--color-black);
              font-family: var(--font-reckless-neue);
            }
            .co-exist{
              align-self: stretch;
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              justify-content: flex-start;
            }
            .img-bathtub-icon {
              position: absolute;
              top: 0;
              left: 246px;
              width: 274px;
              height: 276px;
              overflow: hidden;
              object-fit: cover;
              opacity: 0;
            }
            .img-bathtub-icon.animate {
              animation: 1s ease 0.4s 1 normal forwards fade-in-top;
            }
            .images-child {
              position: absolute;
              bottom: 92px;
              left: 118px;
              background-color: var(--color-thistle);
              width: 679px;
              height: 405px;
              opacity: 1;
            }
            .images-child.animate {
              animation: 1.2s ease 0.6s 1 normal backwards scale-up;
            }
            .img-kitchen-icon,
            .img-red-icon {
              position: absolute;
              overflow: hidden;
              object-fit: cover;
            }
            .img-red-icon {
              bottom: 312px;
              left: 0;
              width: 215px;
              height: 320px;
            }
            .img-kitchen-icon {
              bottom: calc(150px + 6vh);
              left: 246px;
              width: 475px;
              height: 357px;
            }
            .helia-and-pescali,
            .flooring-new-industrial {
              position: absolute;
              opacity: 0;
            }
            .flooring-new-industrial {
              bottom: 0;
              left: 59px;
              overflow: hidden;
              background-size: cover;
              background-repeat: no-repeat;
              background-position: top;
            }
            .flooring-new-industrial.animate {
              animation: 1s ease 0s 1 normal forwards fade-in-bottom;
            }
            .helia-and-pescali {
              top: 44px;
              left: 667px;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: flex-start;
              gap: var(--gap-2xl);
            }
            .helia-and-pescali.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-right;
            }
            .images1 {
              position: absolute;
              height: calc(100% - 116px);
              top: 0;
              bottom: 116px;
              left: 93px;
              width: 881px;
            }
            .industrial1,
            .new1 {
              position: relative;
              line-height: 70%;
              text-transform: uppercase;
              display: inline-block;
              width: 935px;
            }
            .new1 {
              font-size: var(--font-size-141xl);
              font-family: var(--font-reckless-neue);
              font-weight: 200;
              z-index: 0;
            }
            .industrial1 {
              font-weight: 400;
              font-size: var(--font-size-161xl);
              z-index: 1;
            }
            .text1 {
              margin: 0 !important;
              position: absolute;
              right: 2px;
              bottom: 139px;
              font-size: clamp(14px, 2vh, 28px);
              line-height: 120%;
              display: inline-block;
              width: 503px;
              z-index: 2;
            }
            .section-headingg {
              position: absolute;
              bottom: 50px;
              left: 346px;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: flex-start;
              gap: var(--gap-mid);
              font-size: var(--font-size-141xl);
            }
            .new-industrial {
              align-self: stretch;
              position: relative;
              width: 1281px;
              flex-shrink: 0;
              text-align: left;
              font-size: var(--font-size-5xl);
              color: var(--color-black);
              font-family: var(--font-founders-grotesk);
            }
            .red-background {
              position: absolute;
              bottom: 20vh;
              left: 1385px;
              background-color: var(--color-orangered);
              width: 562px;
              height: 50vh;
              opacity: 0;
            }
            .red-background.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }
            .brown-background {
              position: absolute;
              top: 0;
              left: 238px;
              background-color: var(--color-tan-100);
              width: 1147px;
              height: 80vh;
            }

            .blue-stair-icon {
              position: absolute;
              top: 1px;
              right: 122px;
              width: 484px;
              height: 329px;
              overflow: hidden;
              object-fit: cover;
              opacity: 0;
            }
            .blue-stair-icon.animate {
              animation: 1s ease 0.8s 1 normal forwards fade-in;
            }

            .card-stan {
              top: 114px;
              left: 0;
            }
            .quentin-and-stan {
              position: absolute;
              bottom: 50vh;
              left: 127px;
              width: 267px;
              height: 301px;
              opacity: 0;
            }
            .quentin-and-stan.animate {
              animation: 1s ease 0s 1 normal forwards tilt-in-top-1;
            }
            .paragraph {
              margin: 0;
              position: relative;
              line-height: 120%;
              display: flex;
              align-items: flex-end;
              width: 503px;
              opacity: 0;
            }
            .paragraph.animate,
            .red-chair-icon.animate {
              animation: 1s ease 0.4s 1 normal forwards fade-in;
            }
            .header-text-co-creation,
            .text2 {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: flex-start;
            }
            .header-text-co-creation {
              padding: var(--padding-5xl) 0;
              gap: var(--gap-mid);
              font-size: clamp(80px, 14vh, 200px);
              font-family: var(--font-reckless-neue);
            }
            .text2 {
              padding: var(--padding-21xl) 0 0;
            }
            .floor-icon,
            .red-chair-icon {
              position: relative;
              width: 34vh;
              height: 48vh;
              flex-shrink: 0;
              overflow: hidden;
              object-fit: cover;
              opacity: 0;
            }
            .floor-icon {
              width: 28vh;
              height: 43vh;
            }
            .floor-icon.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }
            .content2,
            .images2 {
              display: flex;
              align-items: flex-start;
            }
            .images2 {
              flex-direction: row;
              justify-content: flex-start;
              gap: var(--gap-22xl);
              opacity: 0;
            }
            .images2.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-bottom;
            }
            .content2 {
              position: absolute;
              height: calc(100% - 1px);
              top: 1px;
              bottom: 0;
              left: 419px;
              flex-direction: column;
              justify-content: space-between;
              font-size: clamp(14px, 2vh, 28px);
            }
            .img-yellow-chair {
              position: absolute;
              top: 148px;
              right: 0;
              width: 206px;
              height: 306px;
              overflow: hidden;
              object-fit: cover;
            }
            .co-creation {
              align-self: stretch;
              position: relative;
              width: 1591px;
              flex-shrink: 0;
              margin-left: -186px;
              text-align: left;
              font-size: var(--font-size-5xl);
              color: var(--color-black);
              font-family: var(--font-founders-grotesk);
            }
            .sustainability-child {
              position: absolute;
              bottom: 0;
              left: 213px;
              background-color: var(--color-orangered);
              width: 90vh;
              height: 70vh;
              opacity: 0;
            }
            .sustainability-child.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }
            .img-plant-icon {
              position: relative;
              width: 40vh;
              height: 60vh;
              flex-shrink: 0;
              overflow: hidden;
              object-fit: cover;
            }

            .sustainability-text-wrapper{
              display:flex;
              align-self: stretch;
              flex-direction: column;
              justify-content: end;
              min-width: 400px;
              width: 42vh;
              gap:64px;
              padding-top:12vh;
              
            }

            .sustainability-text {
              position: relative;
              min-height: 156px;
              z-index: 1;
            }

            .sustainability-text p{
              position:absolute;
              bottom: 0px;

            }

            .decor-img {
              position: absolute;
              bottom: 0;
              left: 0;
              background-color: var(--color-white);
              width: 156px;
              height: 156px;
              overflow: hidden;
            }

            .card {
              position: relative;
              flex-shrink: 0;
              overflow: hidden;
            }
            .cards-enzo {
              /* position: absolute;
              bottom: 0;
              left: 0; */
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              justify-content: flex-start;
              gap: var(--gap-8xl);
            }
            .img-living-room {
              top: 0;
              left: 0;
              width: 26vh;
              height: 40vh;
              opacity: 0;
            }
            .img-living-room.animate {
              animation: 1s ease 0s 1 normal forwards fade-in-bottom;
            }
            .img-blue-icon,
            .img-living-room,
            .img-red-stair {
              position: absolute;
              overflow: hidden;
              object-fit: cover;
            }
            .red-stair{
              flex:1;
              position:relative;
            }
            .img-red-stair {
              position: absolute;
              height:100%;
              width: 70vh;
              left: -10vh;
              opacity: 0;
              z-index: 1;
            }
            .img-red-stair.animate {
              animation: 1s ease 0s 1 normal forwards tilt-in-top-1;
            }
            .img-blue-icon {
              z-index: 0;
              width: 30vh;
              height: 40vh;
              right: -35vh;
              bottom:10vh;
            }

            .card-mika{
              position: absolute;
              left: 0;
            }
            .card-mika {
              text-decoration: none;
              top: 106px;
              height: 187px;
              opacity: 0;
              color: inherit;
            }
            .card-mika.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in;
            }

            .card-cantara,
            .cards3 {
              position: absolute;
              opacity: 0;
            }
            .card-cantara {
              top: 0;
              left: 134px;

            }
            .card-cantara.animate {
              animation: 1s ease 0.8s 1 normal forwards fade-in;
            }
            .cards3 {
              position:relative;
              width: 290px;
              height: 293px;
              z-index: 3;
            }
            .cards3.animate {
              animation: 1s ease 0s 1 normal forwards slide-in-right;
            }
            .content3 {
              gap: 40px;
              align-self: stretch;
              position: relative;
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              width: fit-content;
              /* width: 1249px; */
              flex-shrink: 0;
            }
            .sustainability-content {
              /* position: absolute; */
              padding-left: 140px;
              height: 84vh;
              display: flex;
              flex-direction: row;
              align-items: flex-end;
              justify-content: flex-start;
              gap: var(--gap-11xl);
            }
            .heading7 {
              margin: 0;
              padding-left: 35vh;
              font-size: clamp(60px, 16vh, 200px);
              text-transform: uppercase;
              font-weight: 400;
              font-family: inherit;
              opacity: 0;
            }
            .heading7.animate {
              animation: 1s ease 0.6s 1 normal forwards fade-in-bottom;
            }
            .card-amaury {
              text-decoration: none;
              left: 0;
              opacity: 0;
              color: inherit;
            }
            .card-amaury.animate {
              animation: 1s ease 0.7s 1 normal forwards fade-in-top;
            }
            .card-amaury,
            .card-kreto,
            .cards4 {
              position: absolute;
              top: 0;
              height: 187px;
            }
            .card-kreto {
              text-decoration: none;
              left: 211px;
              width: 156px;
              opacity: 0;
              color: inherit;
            }
            .card-kreto.animate {
              animation: 1s ease 1.2s 1 normal forwards fade-in-top;
            }
            .cards4 {
              left: 138px;
              width: 367px;
            }
            .sustainability {
              align-self: stretch;
              position: relative;
              flex-shrink: 0;
              text-align: left;
              font-size: var(--font-size-5xl);
              color: var(--color-black);
              font-family: var(--font-founders-grotesk);
            }

            }

@media only screen and (max-width: 799px) {

  p{
    font-size: var(--font-size-sm);
    color: var(--color-black);
    line-height: 120%;
    font-family: var(--font-founders-grotesk);
    margin: 0;

  }

.co-2,
.exist1 {
  margin: 0;
  position: relative;
  line-height: 70%;
  text-transform: uppercase;
  font-weight: 400;
}
.co-2 {
  font-size: inherit;
  font-family: inherit;
}
.exist1 {
  font-family: var(--font-founders-grotesk);
}


.and-sign {
  position: relative;
  height:40px;
  width: 25px;
  line-height: 85.6%;
  text-transform: uppercase;
}
.serif,
.sans {
  font-weight: 200;
  margin: 0;
  line-height: 91.36%;
  font-family: var(--font-reckless-neue);
}
.sans {
  font-weight: 400;
  line-height: 96.99%;
  font-family: var(--font-founders-grotesk);
}

.herotext .sans,
.herotext .serif{
  font-size: 22px;
}

.nav-link {
  text-align: center;
  align-self: stretch;
  position: relative;
  font-size: clamp(14px, 2.5vh, 40px);
  line-height: 70%;
  text-transform: uppercase;
  color: var(--color-darkolivegreen);
  text-decoration: none;
  cursor: pointer;
}

.hav-link:hover {
  color: var(--color-black);
}

.nav-wrapper,
.nav {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
}
.nav {
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  justify-content: flex-end;
  display: flex;
  visibility: hidden;
  opacity: 0;
  padding: 0 40px;
  align-items: center;
  gap: 5vh;
}
.nav-wrapper {
  position: absolute;
  background-color: var(--color-yellowgreen);
  width: 92px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 200px 32px 80px 32px;
  box-sizing: border-box;
  gap: var(--gap-35xl);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.nav-wrapper.active{
  position: fixed;
  width: 100%;
  height: 100vh;
}

.nav-wrapper.active .nav {
  opacity: 1;
  visibility: visible;
}

.hero.active .co-scale{
  position: fixed;
}

.hero.active{z-index: 100;}

.nav-wrapper.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-left;
}
.redrectangle {
  width: 92px;
}
.co1{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
#redrectangle1 {
  width: 100%;
  display: flex;
  padding-top: 16px;
  align-items: flex-start;
  flex-direction: row-reverse;
  padding-right: 16px;
  flex: 1;
  position: relative;
  background-color: var(--color-orangered);
  height: 100%;
  transition: all 0.2s ease;
}

#redrectangle1.active{
  background-color: rgba(0,0,0,0);
}

.burger{
  display: block;
}

.burger.active .bar:nth-child(2){
  opacity: 0;
}

.burger.active .bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}

.burger.active .bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

.co-scale {
  width: calc(100% - 88px);
  height: 152px;
  right:0;
  align-self: stretch;
  position: absolute;
  display: flex;
  flex-direction: row;
  padding: 0 0 4px;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  z-index: 5;
}
.co-scale.animate {
  animation: 1s ease 0.4s 1 normal forwards slide-in-top;
}
.serif {
  margin: 0;
  line-height: 91.36%;
}

.heading6 {
  align-self: stretch;
  font-size: inherit;
  text-transform: uppercase;
  font-family: inherit;
}

.hero-text-wrapper,
.herotext,
.herotextwrapper {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.hero-text-wrapper {
  flex-direction: row;
  font-size: var(--font-size-sm);
  font-family: var(--font-founders-grotesk);
}
.herotext,
.herotextwrapper {
  flex-direction: column;
}
.herotext {
  gap: var(--gap-base);
}
.herotextwrapper {
  padding: 200px 24px 350px 92px;
  opacity: 0;
  z-index: 1;
  font-size: 32px;
  font-family: var(--font-reckless-neue);
}
.herotextwrapper.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}
.arrow,
.arrow-child {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62.5px;
  height: 63.5px;
}
.arrow {
  text-decoration: none;
  margin: 0 !important;
  right: 60.5px;
  bottom: 62.5px;
  flex-shrink: 0;
  display: none;
  cursor: pointer;
  z-index: 2;
}
.co,
.hero {
  align-self: stretch;
  display: block;
}
.co {
  padding-left: 40px;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  font-size: 48px;
  font-family: var(--font-founders-grotesk);
}
.hero {
  z-index: 1;
  position: relative;
  flex-direction: row;
  align-items: center;
  text-align: left;
  font-size: var(--font-size-21xl);
  color: var(--color-black);
  font-family: var(--font-reckless-neue);
}
.imgbed-icon,
.imgslate-icon {
  position: absolute;
  margin: 0 !important;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
.imgslate-icon {
  width: 75vw;
  top: -42px;
  right: 121px;
  left: 24px;
  height: 55vw;
  opacity: 0;
  z-index: 1;
}
.imgslate-icon.animate {
  animation: 1s ease 0.4s 1 normal forwards slide-in-bottom;
}
.imgbed-icon {
  top: -127px;
  right: 26px;
  width: 40vw;
  height: 65vw;
  z-index: 2;
  opacity: 0;
}

.imgbed-icon.animate {
  animation: 1s ease 0.8s 1 normal forwards slide-in-right;
}

.being1,
.well1 {
  margin: 0;
  position: relative;
  line-height: 70%;
  text-transform: uppercase;
  font-weight: 400;
}
.well1 {
  font-size: inherit;
  font-family: inherit;
}
.being1 {
  font-size: var(--font-size-46xl);
  font-family: var(--font-founders-grotesk);
}
.sectionheading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
  opacity: 0;
  z-index: 2;
}
.sectionheading.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}

.cardmayru.animate {
  animation: 1s ease 0.5s 1 normal forwards fade-in;
}


.flooring-decor2.animate {
  animation: 1s ease 0.2s 1 normal forwards fade-in;
}
.cards {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: 24px;
  gap: 24px;
}
.well-being-p {
  margin: 0;
  align-self: stretch;
  position: relative;
}
.cards-and-text,
.content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}
.cards-and-text {
  gap: var(--gap-23xl);
  opacity: 0;
  z-index: 3;
  font-size: var(--font-size-5xl);
  color: var(--color-gray);
  font-family: var(--font-founders-grotesk);
}
.cards-and-text.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-right;
}
.content {
  background-color: var(--color-silver-200);
  padding: var(--padding-13xl) var(--padding-base) var(--padding-21xl)
    var(--padding-21xl);
  position: relative;
}
.cardlux {
  position: absolute;
  top: 0;
  right: 35vw;
  opacity: 0;
  color: inherit;
  z-index: 2;
}
.cardlux.animate {
  animation: 1s ease 0s 1 normal forwards fade-in;
}

.cardlevo {
  position: absolute;
  right: 0px;
  top: 24px
}
.cardlevo.animate {
  animation: 1s ease 0.2s 1 normal forwards fade-in;
}
.lux-and-levo {
  align-self: stretch;
  position: relative;
  height: 187px;
  flex-shrink: 0;
}
.imgkitchen-icon {
  position: relative;
  width: 70vw;
  height: 110vw;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
.img-kitchen-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: -24px;
}


.cardrayaoak {
  text-decoration: none;
  position: absolute;
  top: 100px;
  left: 0;
  opacity: 0;
  color: inherit;
}
.cardrayaoak.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}

.cardcalia {
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 100px;
  opacity: 0;
  color: inherit;
}
.cardcalia.animate {
  animation: 1s ease 0.4s 1 normal forwards fade-in;
}
.calia-and-raya {
  position: relative;
  width: 289px;
  height: 287px;
  flex-shrink: 0;
  margin-top: -79px;
}
.well-being-images {
  align-self: stretch;
  padding: var(--padding-20xl) var(--padding-21xl) 85px;
  font-size: var(--font-size-5xl);
  color: var(--color-gray);
  font-family: var(--font-founders-grotesk);
}
.header-text,
.well-being,
.well-being-images {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.well-being {
  align-self: stretch;
  z-index: 1;
  text-align: left;
  font-size: var(--font-size-41xl);
  color: var(--color-black);
  font-family: var(--font-reckless-neue);
}
.header-text {
  padding: var(--padding-5xl) 0;
  gap: var(--gap-mid);
}
.header {
  padding: 16px 40px 96px 40px;
  align-self: stretch;
  position: relative;
  background-color: var(--color-lightsalmon);
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 0;
}
.header.animate {
  animation: 1s ease 0.2s 1 normal forwards slide-in-top;
}
.img-decor-icon,
.img-table-icon {
  position: absolute;
  margin: 0 !important;
  top: -27vw;
  right: 0px;
  width: 40vw;
  height: 60vw;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
}
.img-decor-icon.animate {
  animation: 1s ease 0.4s 1 normal forwards slide-in-bottom;
}
.img-table-icon {
  top: -35vw;
  right: 25px;
  z-index: 2;
}
.img-table-icon.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-top;
}
.image1-icon,
.image2-icon,
.text {
  align-self: stretch;
  position: relative;
}
.text {
  margin: 0;
  line-height: 120%;
  z-index: 0;
}
.image1-icon,
.image2-icon {
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  opacity: 0;
}
.image1-icon.animate {
  animation: 1s ease 0.4s 1 normal forwards fade-in-bottom;
}
.image2-icon.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in-top;
}
.images {
  align-self: stretch;
  height: 55vw;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
  z-index: 1;
}
.flooring-decor {
  position: absolute;
  margin: 0 !important;
  right: -40px;
  bottom: -38px;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
  z-index: 0;
}
.text-and-images {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--padding-21xl) 0;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  gap: var(--gap-5xl);
}
.co-exist-content,
.content1 {
  align-self: stretch;
  display: flex;
}
.content1 {
  flex-direction: row;
  padding: 0 var(--padding-21xl);
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 3;
  font-size: var(--font-size-sm);
  font-family: var(--font-founders-grotesk);
}
.co-exist-content {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
}
.card-aurum {
  position: absolute;
  top: 0;
  left: 67px;
}
.card-aurum.animate {
  animation: 1s ease 0.8s 1 normal forwards fade-in;
}
.card-avno-oak,
.card-linia {
  position: absolute;
  top: 300px;
  left: 40px;
}
.card-linia.animate {
  animation: 1s ease 0.4s 1 normal forwards fade-in;
}
.card-avno-oak {
  top: 210px;
  left: 132px;
}
.card-avno-oak.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}
.decor-list {
  align-self: stretch;
  position: relative;
  height: 473px;
  flex-shrink: 0;
  opacity: 0;
  z-index: 100;
  font-size: var(--font-size-5xl);
  font-family: var(--font-founders-grotesk);
}
.decor-list.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-top;
}
.co-exist {
  z-index: 1;
  text-align: left;
  font-size: var(--font-size-41xl);
  color: var(--color-black);
  font-family: var(--font-reckless-neue);
}
.co-exist {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  
}
.img-red-icon {
  position: absolute;
  z-index: 0;
  top: -267px;
  right: 33px;
  width: 30vw;
  height: 50vw;
  overflow: hidden;
  object-fit: cover;
}
.images-child {
  z-index: 0;
  position: absolute;
  width: calc(100% - 59px);
  right: 0;
  bottom: 393px;
  left: 59px;
  background-color: var(--color-thistle);
  height: 405px;
  opacity: 1;
}
.images-child.animate {
  animation: 1.2s ease 0.6s 1 normal backwards scale-up;
}
.img-kitchen-icon {
  position: absolute;
  right: 0px;
  top: calc(20% - 20vw);
  width: 55vw;
  height: 40vw;
  min-width: 300px;
  min-height: 200px;
  overflow: hidden;
  object-fit: cover;
}
.card-helia,
.card-pescali,
.flooring-new-industrial {
  position: absolute;
  opacity: 0;
}
.flooring-new-industrial {
  right: 0;
  bottom: 527px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.flooring-new-industrial.animate {
  animation: 1s ease 0s 1 normal forwards fade-in-bottom;
}
.card-helia,
.card-pescali {
  text-decoration: none;
  color: inherit;
}
.card-helia {
  top: 71px;
  left: 61px;
}
.card-helia.animate {
  animation: 1s ease 0.4s 1 normal forwards fade-in;
}
.card-pescali {
  top: 0;
  right: 27px;
}
.card-pescali.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}
.helia-and-pescali,
.img-bathtub-icon {
  position: absolute;
  left: 0;
  opacity: 0;
}
.helia-and-pescali {
  width: 100%;
  top: 743px;
  right: 0;
  height: 258px;
}
.helia-and-pescali.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-right;
}
.img-bathtub-icon {
  z-index: 1;
  top: 20vw;
  width: 30vw;
  height: 30vw;
  min-width: 100px;
  min-height: 100px;
  overflow: hidden;
  object-fit: cover;
}
.img-bathtub-icon.animate {
  animation: 1s ease 0.4s 1 normal forwards fade-in-top;
}
.images1 {
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  height: 1001px;
}
.new1 {
  font-size: 50px;
  font-weight: 400;
  line-height: 70%;
  text-transform: uppercase;
  font-family: var(--font-reckless-neue);
}
.industrial1,
.new1,
.text1 {
  align-self: stretch;
  position: relative;
}
.industrial1 {
  font-size: 55px;
  font-weight: 400;
  line-height: 70%;
  text-transform: uppercase;
}
.text1 {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 120%;
}
.section-headingg {
  position: absolute;
  width: 100%;
  top: 427px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--padding-21xl);
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mid);
  font-size: var(--font-size-41xl);
}
.new-industrial {
  z-index: 0;
  align-self: stretch;
  position: relative;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-black);
  font-family: var(--font-founders-grotesk);
}
.red-background {
  position: absolute;
  bottom: 20vh;
  left: 1385px;
  background-color: var(--color-orangered);
  width: 562px;
  height: 50vh;
  display: none;
  opacity: 0;
}
.red-background.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}
.brown-background {
  position: absolute;
  width: calc(100% - 20vw);
  top: 94px;
  left: 0;
  background-color: var(--color-tan-100);
  height: 668px;
}

.card-flooring-co-creation{
  animation: 1s ease 0.8s 1 normal forwards fade-in;
  position: absolute;
  bottom: -24px;
  right: 8vw;
}

.card-salva-oak {
  animation: 1s ease 0.8s 1 normal forwards fade-in;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 8px;
  color: inherit;
}
.blue-stair-icon {
  position: absolute;
  top: 329px;
  left: 44px;
  width: 289px;
  height: 197px;
  overflow: hidden;
  object-fit: cover;
  opacity: 0;
}
.blue-stair-icon.animate {
  animation: 1s ease 0.8s 1 normal forwards fade-in;
}
.header-text-co-creation {
  order:0;
  display: flex;
  flex-direction: column;
  padding: var(--padding-5xl) 0 40px 0;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-mid);
}
.paragraph {
  order:1;
  margin: 0;
  align-self: stretch;
  position: relative;
  opacity: 0;
}



.paragraph.animate,
.red-chair-icon.animate {
  animation: 1s ease 0.4s 1 normal forwards fade-in;
}
.text2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: var(--padding-21xl) 0 0;
  align-items: flex-start;
  justify-content: flex-start;
}
.floor-icon,
.red-chair-icon {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  opacity: 0;
}
.floor-icon.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}
.content2,
.images2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.images2 {
  align-self: stretch;
  height: 60vw;
  flex-shrink: 0;
  flex-direction: row;
  opacity: 0;
}

.images2.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-bottom;
}
.content2 {
  position: absolute;
  width: 100%;
  top: 569px;
  right: 0;
  left: 0;
  flex-direction: column;
  padding: 0 var(--padding-21xl);
  box-sizing: border-box;
  font-size: var(--font-size-41xl);
  font-family: var(--font-reckless-neue);
}
.img-yellow-chair {
  position: absolute;
  top: 413px;
  right: 0;
  width: 30vw;
  height: 50vw;
  overflow: hidden;
  object-fit: cover;
}
.card-quentin {
  animation: 1s ease 1.2s 1 normal forwards fade-in;
  position: absolute;
  top: 0;
  left: 111px;
}
.card-stan {
  position: absolute;
  animation: 1s ease 1.4s 1 normal forwards fade-in;
  top: 114px;
  left: 40px;
}
.quentin-and-stan {
  position: absolute;
  right: 20vw;
  bottom: 1088px;
  width: 267px;
  height: 301px;
  opacity: 0;
}
.quentin-and-stan.animate {
  animation: 1s ease 0s 1 normal forwards tilt-in-top-1;
}
.co-creation {
  align-self: stretch;
  position: relative;
  height: 1332px;
  flex-shrink: 0;
  margin-top: -48px;
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-black);
  font-family: var(--font-founders-grotesk);
}
.sustainability-child {
  visibility: hidden;
}
.sustainability-child.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}
.heading7 {
  width: 80%;
  font-size: 10vw;
  padding: 80px 16px 40px 16px;
  background-color: var(--color-orangered);
  margin: 0;
  align-self: stretch;
  position: relative;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  opacity: 0;
  z-index: 1;
  order:1;
}
.heading7.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in-bottom;
}
.card-amaury,
.card-kreto {
  flex-shrink: 0;
  opacity: 0;
}
.card-kreto.animate {
  animation: 1s ease 1.2s 1 normal forwards fade-in-top;
}
.card-amaury.animate {
  animation: 1s ease 0.7s 1 normal forwards fade-in-top;
}
.cards3 {
  order:3;
  z-index: 2;
  position: relative;
  width: 100%;
  height: 50vw;
}
.img-plant-icon,
.img-red-stair {
  overflow: hidden;
  object-fit: cover;
}
.img-plant-icon {
  position: relative;
  width: 65vw;
  height: 90vw;
  margin-left: auto;
  margin-right: 32px;
}
.img-red-stair {
  z-index: 0;
  left: 0;
  width: 70vw;
  height: 45vw;
  opacity: 0;
}
.img-red-stair.animate {
  animation: 1s ease 0s 1 normal forwards tilt-in-top-1;
}
.sustainability-text {
  order:1;
  padding: 0 40px;
  margin: 0;
}
.red-stair{
  margin-bottom: 64px;
  order:2;
  position: relative
}

.img-blue-icon,
.img-living-room {
  z-index:1;
  overflow: hidden;
  object-fit: cover;
}
.img-living-room {
  margin-top: -12vw;
  margin-left: 5vw;
  width: 50vw;
  height: 75vw;
  opacity: 0;
  margin-bottom: 20vw;
}
.img-living-room.animate {
  animation: 1s ease 0s 1 normal forwards fade-in-bottom;
}
.img-blue-icon {
  position: absolute;
  bottom: 30vw;
  right: 10vw;
  width: 30vw;
  height: 45vw;
}

.decor-img {
  bottom: 0;
  background-color: var(--color-white);
  height: 156px;
  overflow: hidden;
}

.card-mika.animate {
  animation: 1s ease 0.6s 1 normal forwards fade-in;
}

.card-mika{
  position: absolute;
  right: 8vw;
  bottom:0;
  z-index: 2;
}

.card-cantara,
.cards4 {
  order: 2;
}
.card-cantara {
  text-decoration: none;
  top: 0;
  position: absolute;
  right: 35vw;
  color: inherit;
}
.card-cantara.animate {
  animation: 1s ease 0.8s 1 normal forwards fade-in;
}
.cards4 {
  padding: 0 16px;
  display: flex;
  gap: 16px;

}
.cards4.animate {
  animation: 1s ease 0s 1 normal forwards slide-in-right;
}
.card-enzo {
  animation: 1s ease 0s 1 normal forwards fade-in;
  position: relative;
}
.card {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  animation: 1s ease 0.4s 1 normal forwards fade-in;
}

.sustainability-text-wrapper{
  order:1;
}
.cards-enzo {
  order:2;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--gap-8xl);
  margin-bottom: 6vw;
  margin-top: 12vw;
  padding-left: 32px;
}
.content3 {
  order:3;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  position: relative;
  flex-shrink: 0;
}
#main,
.sustainability,
.sustainability-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sustainability-content {
  order:3;
  align-self: stretch;
  justify-content: flex-end;
  gap: var(--gap-11xl);
  z-index: 3;
}
#main,
.sustainability {
  position: relative;
  justify-content: flex-start;
}
.sustainability {
  align-self: stretch;
  gap: 19px;
  text-align: left;
  font-size: var(--font-size-5xl);
  color: var(--color-black);
  font-family: var(--font-founders-grotesk);
}
#main {
  background-color: var(--color-lavender);
  width: 100%;
  overflow-x: auto;
  padding-bottom: 40px;
}


}