/*REFERENCES*/
#references {width:100%;margin:0;background:white;}
#references ul {width:90%;margin:0 auto;padding:96px 0 0 0;}
#references li {display:inline-block;}
#references li img {max-width:256px;}
/*SLOGAN*/
#slogan p {font-size:48px;width:60%;margin:0 auto;padding:128px 0;font-family: OpenSans-SemiBold,serif;text-align:center;}
/*SOLUTIONS-OVERVIEW*/
#solutions-and-services {text-align:left;width:100%;margin:16px 0;padding:16px 0;z-index:2;position:relative;}
#solutions-and-services .header {margin-left:5%;}
#solutions-and-services h1 {margin:96px 0;}
#solutions-and-services ul {width:98%;display:block;margin:0 auto;position:relative;}
#solutions-and-services li {width:33%;display:inline-block;margin-top:32px;}
#solutions-and-services .faq-topic {display:inline-flex;position:relative;cursor:pointer;width:94%;height:560px;margin:0 auto;}
#solutions-and-services .faq-topic:hover .design-arrow {right:32px;opacity:1;}
#solutions-and-services .design-line {width:48px;height:3px;margin:16px 0;}
#solutions-and-services .design-arrow {opacity:0;width:48px;position:absolute;bottom:32px;right:64px;}
#solutions-and-services .information-holder {padding:32px;}
#solutions-and-services .design-hr {background:white;border:none;width:32px;margin:32px 0 0 32px;height:3px;}
/*QUOTE*/
#reference-quote {position:relative;margin:128px auto;}
#reference-quote .quote-icon {width:64px;height:64px;font-size:64px;}
#reference-quote .quote {color:white;width:100%;margin:0;padding:32px 0;text-align: left;}

/*ABOUT-US*/
#about-us {position:relative;}
#about-us h2 {width:100%;margin:0 0 32px 0;}
#about-us h3 {margin:64px 0 0 0;font-size:18px;font-weight:lighter;}
#about-us .continuation-div {width:100%;display:flex;margin:32px auto;}
#about-us .continuation-div .surrounder {margin:32px auto;padding-bottom:64px;}
#about-us .content-holder {width:100%;display: inline-block;}

/*BLOG-OVERVIEW*/
#blog-overview {position:relative;}
#blog-overview .surrounder {width:80%;margin:0 auto;}
#blog-overview ul {width:100%;display:inline-block;}
#blog-overview li {width:25%;display:inline-block;float:left;margin-bottom:64px;}
#blog-overview .blog-entry {margin:0 auto;width:320px;height:512px;border-radius:6px;box-shadow:0 0 10px 5px rgba(0,0,0,.1);cursor:pointer;}
#blog-overview .blog-entry:hover {scale:1.1;box-shadow:0 0 40px 5px rgba(0,0,0,.4);}
#blog-overview .image-holder {overflow: hidden;width:100%;height:192px;border-top-left-radius:6px;border-top-right-radius:6px;}
#blog-overview .teaser-image {width:100%;}
#blog-overview .information-holder {height:265px;padding:12px;overflow:hidden;}
#blog-overview h3 {font-size:20px;}
#blog-overview .date-text{font-size:14px;padding:8px 0;}

/*CALL-TO-ACTION*/
#call-to-action .surrounder {margin:128px auto;padding:64px 0 128px 0;border-radius:16px;width:80%;display:flex;}
#call-to-action .button {margin-top:64px;}

@media screen and (max-width: 1800px){
    /*SOLUTIONS-OVERVIEW*/
    #solutions-overview .faq-topic {width:80%;height:480px;}
    /*REFERENCES-OVERVIEW*/
    #services-overview .faq-topic {width:80%;height:480px;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:33.3%;}
}

@media screen and (max-width: 1300px) {
    /*SOLUTIONS-AND-SERVICES-OVERVIEW*/
    #solutions-and-services li {width:49%;}
    #solutions-and-services .faq-topic {height:384px;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:50%;}
    /*SLOGAN*/
    #slogan p {font-size:32px;}
}

@media screen and (max-width: 1000px) {
    /*REFERENCES*/
    #references li img {width:192px;}
    /*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%;}
    /*BLOG-OVERVIEW*/
    #blog-overview .surrounder {width:100%;}
}
@media screen and (max-width: 800px) {
    /*COMMON*/
    /*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%;}
    /*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-AND-SERVICES-OVERVIEW*/
    #solutions-and-services li {width:100%;}
    /*BLOG-OVERVIEW*/
    #blog-overview li {width:100%;}
}

@media screen and (max-width: 600px) {
    /*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-OVERVIEW*/
    #services-overview .blog-entry {width:90%;}
    /*BLOG-OVERVIEW*/
    #blog-overview .blog-entry {width:90%;}
}