/*HOME*/
#home {background-image:url("./../assets/home-background.jpg");}
/*PRODUCTS*/
#products {position:relative;text-align:left;}
#products .products-holder {width:100%;display:block;margin:0 auto;padding-bottom:128px;}
#products .products-holder li {display:inline-block;width:24%;}
#products .flip-card {background: transparent;width:300px;height:300px;perspective:1000px;margin:32px auto;}
#products .flip-card-inner {position: relative;width: 100%;height: 100%;transition: transform 0.5s;transform-style: preserve-3d;}
#products .flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
#products .flip-card-front, .flip-card-back {border-radius:16px;position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;top: 0;left: 0;box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);}
#products .flip-card-front {background: #F2DEC4;display: flex;justify-content: center;align-items: center;overflow: hidden;}
#products .flip-card-front img {width: 100%;height: 100%;object-fit: cover;}
#products .flip-card-back {background: #F2DEC4;color: white;transform: rotateY(180deg);padding: 16px;box-sizing: border-box;}
#products .flip-card-back p {margin-top:8px;height:80%;overflow:hidden;text-overflow: ellipsis;}
/*ORIGIN*/
#origin a {color:#775168;}
/*SHOWROOM*/
#showroom {padding:64px 0;}
#showroom .showroom-div {position:relative;width:100%;display:flex;justify-content:left;align-items:center;}
#showroom .showroom-headline {float:left;text-align:left;position:absolute;margin-left:32px;}
#showroom .showroom-div img {width:100%;}
#showroom .color-accent {position:absolute;top:0;left:0;right:0;bottom:0;background: rgb(119, 81, 104, 0.5);}
#showroom .design-line {width:64px;height:2px;background:white;float:left;margin:24px 32px 0 16px;}
#showroom .showroom {position:absolute;top:16px;right:16px;width:45%;}
/*BRANDS*/
#brands .brands-holder {width:100%;margin:128px 0;}
#brands .brands-holder li {margin-right:32px;display:inline-block;}
#brands .brands-holder li img {max-width:200px;max-height:120px;}
/*ORIGIN*/
#origin .big-p {font-size:48px;width:90%;margin:0 auto;padding:128px 0 32px 0;font-family:"Now",serif;text-align:center;}
#origin p {text-align:left;padding-bottom:128px;}
/*CALL-TO-ACTION*/
#call-to-action p {padding:32px 0;font-family:"Now",serif;font-size: 28px;}
#call-to-action .arrow-down {width:64px;height:64px;animation: jump 0.5s ease-in infinite;cursor: pointer;}
@keyframes jump {0% {transform: translateY(0);}50% {transform: translateY(-30%);}}

@media screen and (max-width: 1900px) {
    #products .products-holder li {width:49%;}
}

@media screen and (max-width: 1300px) {
    /*HOME*/
    #home .background-video {display:none;}
    /*PRODUCTS*/
    #products .products-holder li {width:100%;}
    /*SERVICES*/
    #services h1 {margin:64px 0;}
    #services .background-design-text {font-size:96px;}
    /*BENEFITS*/
    #benefits li {width:50%;}
    #benefits .benefits-item .hover-content {height:60%;}
    #benefits .benefits-item:hover .hover-content {height:60%;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview li {width:50%;}
    #solutions-overview .faq-topic {height:384px;}
    #solutions-overview .design-arrow {opacity:1;right:32px;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:50%;}
}

@media screen and (max-width: 1000px) {
    /*QUOTE*/
    #quote .ceo-image {margin:-32px 64px 0 0;width:256px;float:right;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .design-arrow {width:32px;}
    /*services*/
    #services li {width:100%;margin-top:16px;}
    #services .faq-topic {height:420px;}
    /*BLOG-OVERVIEW*/
    #blog-overview .surrounder {width:100%;}
}
@media screen and (max-width: 800px) {
    /*SERVICES*/
    #services h1 {margin:32px 0;}
    #services li {width:100%;}
    /*QUOTE*/
    #quote .image-holder {width:100%;display: inline-block;text-align: center;}
    #quote .ceo-image {margin:-32px auto 0 auto;float:none;}
    #quote .quote {width:90%;}
    /*BENEFITS*/
    #benefits .info-text {margin:16px 0;}
    #benefits li {width:50%;}
    #benefits h3 {padding:16px 16px 0 16px;}
    #benefits .hover-content p {padding:16px 16px 0 16px;}
    /*STEP-BY-STEP*/
    #step-by-step .process-content {height:448px;}
    #step-by-step .step-by-step-slide {height:320px;}
    #step-by-step .prev, .next {width:40px;height:40px;cursor:pointer;padding-top:192px;font-weight: bold;font-size: 32px;transition: 0.6s ease;user-select: none;}
    #step-by-step .left {margin-left:2px;}
    #step-by-step .right {margin-right:2px;}
    /*SME*/
    #sme .content-div {width:100%;}
    #sme .separator {display:none;}
    #sme .left-div p {padding-left:0;}
    #sme .right-div p {padding-left:0;}
    /*ABOUT-US*/
    #about-us .content-div {width:100%;}
    #about-us .separator {display:none;}
    #about-us .left-div p {padding-left:0;}
    #about-us .right-div p {padding-left:0;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .faq-topic {width:100%;}
    #solutions-overview li {width:100%;}
    /*services*/
    #services .faq-topic {width:100%;}
    #services li {width:100%;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:100%;}
}

@media screen and (max-width: 600px) {
    /*HOME*/
    /*BENEFITS*/
    #benefits li {width:100%;}
    #benefits .benefits-item {width:100%;}
    /*STEP-BY-STEP*/
    #step-by-step .process-content {height:512px;}
    #step-by-step .step-by-step-slide {height:400px;}
    #step-by-step .prev, .next {width:32px;height:32px;padding-top:212px;}
    #step-by-step .left {margin-left:0;}
    #step-by-step .right {margin-right:0;}
    /*TECHNOLOGIES*/
    #technologies .content-holder {height:1024px;}
    #technologies h3 {margin-top:40px;}
    #technologies .info-text {width:90%;}
    #technologies .separator {width:90%;margin:0 0 0 5%;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .blog-entry {width:90%;}
    /*services*/
    #services .blog-entry {width:90%;}
    /*BLOG-OVERVIEW*/
    #blog-overview .blog-entry {width:90%;}
}