/*HOME*/
#home {background-image:url("./../assets/glory-and-art-home-background.JPG");}
/*SLOGAN*/
#slogan p {font-size:48px;width:90%;margin:0 auto;padding:128px 0;font-family:"Now",serif;text-align:center;}
/*SOLUTIONS-OVERVIEW*/
#services {text-align:left;width:100%;margin-bottom:32px;z-index:2;position:relative;}
#services h2 {font-weight:lighter;}
#services ul {width:100%;display:block;margin:0 auto;}
#services li {display:inline-block;margin:0;padding:0;}
#services .faq-topic {position:relative;cursor:pointer;width:420px;margin-right:16px;height:560px;overflow:hidden;background:white;}
#services .background-design-text {width:100%;transform:translateY(-50%) scale(0);font-size:128px;position:absolute;top:50%;text-align:center;font-family:"Now",serif;color: rgb(119, 81, 104, 0.5);}
#services .faq-topic:hover .background-design-text {z-index:5;transform: translateY(-50%) scale(1);}
#services .design-line {width:48px;height:3px;margin:16px 0;}
#services .design-arrow {opacity:0;width:48px;position:absolute;bottom:32px;right:64px;}
#services .information-holder {padding:64px 32px;z-index:10;}
#services .information-holder p {position:absolute;top:160px;left:32px;right:32px;bottom:32px;z-index:10;overflow:hidden;text-overflow:ellipsis;}
#services .design-hr {background:white;border:none;width:32px;margin:32px 0 0 32px;height:3px;}
/*ORIGIN*/
#story .big-p {font-size:48px;width:90%;margin:0 auto;padding:128px 0 32px 0;font-family:"Now",serif;text-align:center;}
#story p {text-align:left;padding-bottom:64px;}
#story .profile-picture {height:256px;border-radius:50%;}
/*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: 1300px) {
    /*HOME*/
    #home .background-video {display:none;}
    /*SERVICES*/
    #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;}
    /*TECHNOLOGIES*/
    #technologies .content-holder {margin-top:8px;height:720px;}
    #technologies .content-holder .technologies-li {display:block;width:100%;height:15%;}
    #technologies .content-holder .content {padding:8px 0;}
    #technologies .logo-img {max-width:96px;max-height:96px;margin:8px auto;}
    #technologies .info-text {width:80%;margin:8px auto;}
    #technologies .content-holder .plus-icon {width:32px;height:32px;margin:0;}
    #technologies .content-holder .folded-content {display:none;}
    #technologies .content-holder .expanded {height:55%;}
    #technologies .separator {height:1px;width:80%;margin:0 0 0 10%;}
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .design-arrow {width:32px;}
    /*services*/
    #services li {width:100%;margin-top:16px;}
    #services .faq-topic {height:420px;width:100%;}
    /*BLOG-OVERVIEW*/
    #blog-overview .surrounder {width:100%;}
}
@media screen and (max-width: 800px) {
    /*SERVICES*/
    #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) {
    /*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%;}
}