@charset "UTF-8";
/* media CSS */

@media only screen and (max-height: 740px) {
    #content-slider .h1-wrapper {
        bottom: 8em !important;
    }
}



@media only screen and (max-width: 1780px) { /*________________________________________________________________________ : 1.25 TYPO 1.2 */
    /* TYPO */
    #content-slider h1 {
        font-size: 6.92em;
    }
    #main h1 {
        font-size: 5.33em;
    }
    h2 {
        font-size: 3em;
    }
    #main #counter h2 span {
        font-size: 2.75em;
    }
    #header h1,
    h3,
    #main #news p.news-date {
        font-size: 2.33em;
    }
    h4,
    #main p, #main ul {
        font-size: 2em;
    }
    #main #news p.trigger,
    #main .controls ul,
    #main #projects .project-titel,
    #main #projects ul.project-navigation,
    #main .flex-list p,
    #menu ul > li > a {
        font-size: 1.67em;
    }
    #footer p,
    #sub-nav ul > li > a {
        font-size: 1.33em;
    }
    #content-slider h1 span.border:after {
        bottom: -33px;
        height: 12px;
    }
    #main h2:after,
    #main #news p.news-date:after {
        bottom: -23px;
        width: 408px;
        height: 12px;
    }
    #main #news p.news-date:after {
        bottom: -18px;
    }
    
    /* PROPORTION */
    /* container */
    .inside {
        width: 134.08em;
    }
    #content-slider .h1-wrapper {
        right: 15.04em;
        bottom: 19.36em;
    }
    .banner {
        height: 49.6em;
        margin-bottom: 6.08em;
    }

    /* header/menu footer/sub-menu  */
    #header, #footer {
        padding: 1.6em 5.12em;
    }
    #header.large {
        height: 12.8em;
    }
    #header.small {
        height: 9.4em;
    }
    #footer {
        height: 7.2em;
    }
    #menu ul > li {
        margin-left: 5.44em;
    }
    #sub-nav ul > li  {
        margin-left: 3.68em;
    }
    #menu ul > li > a:after {
        height: 3px;
        bottom: -5px;
    }
    #sub-nav ul > li > a:after {
        height: 2px;
        bottom: -3px;
    }
    
    /* main */
    #main {
        padding-top: 20.48em;
        padding-bottom: 12.48em;
    }
    #news .post {
        margin-bottom: 14.4em;
    }
    #news .post .anchor {
        top: -12.8em;
    }
    #news .toggle-section {
        margin-top: 5.12em;
    }
    #news .trigger,
    #main #projects ul.project-navigation li {
        width: 226px;
    }
    #news .images-container {
        margin-bottom: 6.4em;
    }
    #projects .controls,
    #counter,
    #awards .flex-list .list-item {
        margin-bottom: 4.8em;
    }
    #projects .mix-container .mix .image-container,
    #projects .projects-container .item .image-container {
        margin-bottom: 1.12em;
    }
    #projects .mix-container .mix .project-titel,
    #projects .projects-container .item .project-titel {
        min-height: 2em;
        margin-bottom: 0.8em;
    }
    #main #projects ul.project-navigation {
        margin-top: 3.52em;
    }
    #main #projects ul.project-navigation li {
        margin-right: 3px;
    }
    #projects .project-images {
        margin-top: 6.72em;
    }
    #philosophy {
        margin-bottom: 8em;
    }
    #counter {
        margin-top: 0.8em;
    }
    #counter .flex-list .list-item {
        padding: 2.24em 1.6em;
    }
    #awards {
        margin-bottom: 3.04em;
    }
    #team .flex-list .list-item img {
        margin-bottom: 1.2em;
    }
}



@media only screen and (max-width: 1460px) { /*________________________________________________________________________ : 1.2 TYPO 1.1 */
    /* TYPO */
    #content-slider h1 {
        font-size: 6em;
    }
    #main h1 {
        font-size: 4.8em;
    }
    h2 {
        font-size: 2.7em;
    }
    #main #counter h2 span {
        font-size: 2.5em;
    }
    #header h1,
    h3,
    #main #news p.news-date {
        font-size: 2.12em;
    }
    h4,
    #main p, #main ul {
        font-size: 1.8em;
    }
    #main #news p.trigger,
    #main .controls ul,
    #main #projects .project-titel,
    #main #projects ul.project-navigation,
    #main .flex-list p,
    #menu ul > li > a {
        font-size: 1.6em;
    }
    #footer p,
    #sub-nav ul > li > a {
        font-size: 1.3em;
    }
    #content-slider h1 span.border:after {
        bottom: -30px;
        height: 10px;
    }
    #main h2:after,
    #main #news p.news-date:after {
        bottom: -21px;
        width: 371px;
        height: 10px;
    }
    #main #news p.news-date:after {
        bottom: -16px;
    }
    
    /* PROPORTION */
    /* container */
    .inside {
        width: 111.73em;
    }
    #content-slider .h1-wrapper {
        right: 12.53em;
        bottom: 16.13em;
    }
    .banner {
        height: 41.33em;
        margin-bottom: 5.07em;
    }
    #main .h1-wrapper {
        width: 100%;
        text-align: left;
    }

    /* header/menu footer/sub-menu  */
    #header, #footer {
        padding: 1.33em 4.27em;
    }
    #header.large {
        height: 10.67em;
    }
    #header.small {
        height: 9em;
    }
    #footer {
        height: 6.5em;
    }
    #menu ul > li {
        margin-left: 4.53em;
    }
    #sub-nav ul > li  {
        margin-left: 3.07em;
    }
    
    /* main */
    #main {
        padding-top: 17.07em;
        padding-bottom: 10.4em;
    }
    #news .post {
        margin-bottom: 12em;
    }
    #news .post .anchor {
        top: -11em;
    }
    #news .toggle-section {
        margin-top: 4.27em;
    }
    #news .trigger,
    #main #projects ul.project-navigation li {
        width: 205px;
    }
    #news .images-container {
        margin-bottom: 5.33em;
    }
    #projects .controls,
    #counter,
    #awards .flex-list .list-item {
        margin-bottom: 4em;
    }
    #projects .controls ul li {
        width: 32.74021352313167%;
    }
    #projects .mix-container .mix .image-container,
    #projects .projects-container .item .image-container {
        margin-bottom: 0.93em;
    }
    #main #projects ul.project-navigation {
        margin-top: 2.93em;
    }
    #projects .project-images {
         margin-top: 5.6em;
    }
    #philosophy {
        margin-bottom: 6.67em;
    }
    #counter {
         margin-top: 0.67em;
    }
    #counter .flex-list .list-item {
        padding: 1.87em 1.33em;
    }
    #awards {
        margin-bottom: 2.53em;
    }
    #team .flex-list .list-item img {
        margin-bottom: 1em;
    } 
}



@media only screen and (max-width: 1220px) { /*________________________________________________________________________ : 1.21 TYPO 1.1 1.05 */
    /* TYPO */
    #content-slider h1 {
        font-size: 5.5em;
    }
    #main h1 {
        font-size: 4.4em;
    }
    h2 {
        font-size: 2.4em;
    }
    #main #counter h2 span {
        font-size: 2.3em;
    }
    #header h1,
    h3,
    #main #news p.news-date {
        font-size: 2em;
    }
    h4,
    #main p, #main ul {
        font-size: 1.65em;
    }
    #main #news p.trigger,
    #main .controls ul,
    #main #projects .project-titel,
    #main #projects ul.project-navigation,
    #main .flex-list p,
    #menu ul > li > a {
        font-size: 1.5em;
    }
    #footer p,
    #sub-nav ul > li > a {
        font-size: 1.3em;
    }
    #content-slider h1 span.border:after {
        bottom: -26px;
        height: 9px;
    }
    #main h2:after,
    #main #news p.news-date:after {
        bottom: -18px;
        width: 336px;
        height: 9px;
    }
    #main #news p.news-date:after {
        bottom: -14px;
    }
    
    /* PROPORTION */
    /* container */
    .inside {
        width: 92.34em;
    }
    #content-slider .h1-wrapper {
        right: 10.36em;
        bottom: 13.33em;
    }
    .banner {
        height: 34.16em;
        margin-bottom: 4.19em;
    }

    /* header/menu footer/sub-menu  */
    #header, #footer {
        padding: 1.1em 3.53em;
    }
    #header.large {
        height: 9.8em;
    }
    #header.small {
        height: 8.4em;
    }
    #footer {
        height: 6em;
    }
    #menu ul > li {
        margin-left: 3.2em;
    }
    #sub-nav ul > li  {
        margin-left: 2.54em;
    }
    
    /* main */
    #main {
        padding-top: 14.11em;
        padding-bottom: 8.6em;
    }
    #news .post {
        margin-bottom: 9.92em;
    }
    #news .post .anchor {
        top: -10em;
    }
    #news .toggle-section {
        margin-top: 3.53em;
    }
    #news .trigger,
    #main #projects ul.project-navigation li {
        width: 195px;
    }
    #news .images-container {
        margin-bottom: 4.4em;
    }
    #projects .controls,
    #counter,
    #awards .flex-list .list-item {
        margin-bottom: 3.31em;
    }
    #projects .mix-container .mix .image-container,
    #projects .projects-container .item .image-container {
        margin-bottom: 0.8em;
    }
    #main #projects ul.project-navigation {
        margin-top: 2.42em;
    }
    #main #projects ul.project-navigation li {
        margin-right: 3px;
    }
    #projects .project-images {
        margin-top: 4.63em;
    }
    #philosophy {
        margin-bottom: 5.51em;
    }
    #counter {
        margin-top: 0.6em;
    }
    #counter .flex-list .list-item {
        padding: 1.55em 1.1em;
    }
    #awards {
        margin-bottom: 2.1em;
    }
    #team .flex-list .list-item img {
        margin-bottom: 0.8em;
    } 
}



@media only screen and (max-width: 1020px) { /*________________________________________________________________________ FLUID MENU RESP */
    /* MENU RESP */
    .open-nav,
    .close-nav {
	    display: block;
    }
    #menu.toggle {
        width: 100%;
    }
    #menu {
        position: fixed;
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        overflow-x: hidden;
        background: rgba(255,255,255,0.95); 
        transition:0.5s ease;
        z-index: 909;
    }
    #menu ul {
        padding: 4em;
        padding-top: 10em;
        box-sizing: border-box;
    }
    #menu ul > li {
        display: block;
        text-align: center;
        margin-left: 0;
        margin-bottom: 2.2em;
    }
    #menu ul > li > a {
        position: relative;
        font-size: 2em;
    }
    #menu ul > li > a:after {
        height: 4px;
        bottom: -6px;
    }
    
    /* FLUID */
    .inside {
        width: 100%;
    }
    .inside,
    #header,
    #footer {
        padding-left: 10%;
        padding-right: 10%;
    }
    .flex-content,
    .flex-end {
        flex-direction: column;
        justify-content: flex-start;
    }
    .flex-content .left,
    .flex-content .right,
    .flex-end .item {
        width: 100%;
    }
    #news .flex-content .left {
        width: 33%;
        margin-bottom: 3em;
        align-items: flex-start;
    }
    #projects .flex-content .left {
        width: 48.50835322195704%;
        margin-bottom: 3.6em;
    }
    
    /* PROPORTION */
    #content-slider .h1-wrapper {
        right: 10%;
        bottom: 52%;
    }
    /* header footer */
    #footer {
        height: auto;
        flex-direction: column-reverse;
	    justify-content: flex-start;
        align-items: flex-start;
        padding-top: 2em;
        padding-bottom: 2.8em;
    }
    #sub-nav {
        margin-bottom: 1.6em;
    }
    #sub-nav ul > li  {
        margin-left: 0;
        margin-right: 2.5em;
    }
    /* main */
    #news .post {
        margin-bottom: 8em;
    }
    #projects .controls ul li,
    #projects .controls ul li.large,
    #projects .mix-container .mix,
    #projects .projects-container .item {
        width: 49.40688018979834%; /* 833/1686 */
    }
}



@media only screen and (max-width: 700px) { /*________________________________________________________________________ SMARTPHONE */
    /* TYPO */
    #content-slider h1,
    #main h1 {
        font-size: 3.8em;
    }
    h2,
    #main #counter h2 span {
        font-size: 2em;
    }
    #header h1,
    h3,
    #main #news p.news-date,
    #menu ul > li > a {
        font-size: 1.8em;
    }
    h4,
    #main p, #main ul {
        font-size: 1.5em;
    }
    #main #news p.trigger,
    #main .controls ul,
    #main #projects .project-titel,
    #main #projects ul.project-navigation,
    #main .flex-list p {
        font-size: 1.4em;
    }
    #footer p,
    #sub-nav ul > li > a {
        font-size: 1.2em;
    }
    #content-slider h1 span.border:after {
        bottom: -22px;
        height: 7px;
    }
    #main h2:after,
    #main #news p.news-date:after {
        bottom: -16px;
        width: 290px;
        height: 7px;
    }
    #main #news p.news-date:after {
        bottom: -12px;
    }
    
    /* PROPORTION */
    /* container */
    .inside,
    #header,
    #footer {
        padding-left: 8%;
        padding-right: 8%;
    }
    #content-slider .h1-wrapper {
        right: 8%;
        bottom: 50%;
    }
    .banner {
        height: 20em;
        margin-bottom: 4em;
    }
    
    /* header footer */
    #header.large {
        height: 9em;
    }
    #header.small {
        height: 8em;
    }
    .open-nav img {
        width: 5em;
    }
    #sub-nav ul > li  {
        margin-right: 2.4em;
    }
    
    /* main */
    #main {
        padding-top: 14em;
        padding-bottom: 8em;
    }
    #news .flex-content .left {
        width: 49.52471482889734%;
    }
    #news .toggle-section {
        margin-top: 3.4em;
    }
    #news .trigger,
    #main #projects ul.project-navigation li {
        width: 182px;
    }
    #news .images-container {
        margin-bottom: 4em;
    }
    #projects .controls,
    #counter,
    #awards .flex-list .list-item {
        margin-bottom: 3.2em;
    }
    #projects .controls ul li,
    #projects .controls ul li.large,
    #projects .mix-container .mix,
    #projects .projects-container .item {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #projects .controls ul,
    #projects .mix-container,
    #projects .projects-container {
        margin-left: 0;
        margin-right: 0;
    }
    #main #projects ul.project-navigation {
        margin-top: 2.4em;
    }
    #projects .controls ul li,
    #main #projects ul.project-navigation li {
        margin-bottom: 3px;
    }
    #projects .project-images {
        margin-top: 4em;
    }
    #counter.flex-list {
        flex-direction: column;
        justify-content: flex-start;
    }
    #counter .flex-list .list-item {
        width: 100%;
        padding: 1.4em 1em;
        margin-bottom: 0.8em;
    }
    #philosophy,
    #services {
        margin-bottom: 5.4em;
    }
    #services .flex-list .list-item {
        width: 44.09660107334526%; /* 493/1118 */
    }
    #awards {
        margin-bottom: 4em;
    }
    #team .flex-list .list-item,
    #awards .flex-list .list-item {
        width: 43.76114081996435%; /* 491/1122 */
    }
}



@media only screen and (max-width: 390px) {
    #content-slider h1,
    #main h1 {
        font-size: 3.6em;
    }
    #main p, #main ul {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    .banner {
        height: 18em;
    }
    #news .images-container,
    #projects .project-images {
        flex-direction: column;
        justify-content: flex-start;
    }
    #news .images-container .image,
    #projects .project-images img,
    #projects .project-images img.small {
        width: 100%;
        margin-bottom: 0.8em;
    }
    #projects .flex-content .left {
        width: 100%;
    }
}



@media only screen and (max-width: 380px) {
    #content-slider h1,
    #main h1 {
        font-size: 3.4em;
    }
}



@media only screen and (max-width: 340px) {
    #content-slider h1,
    #main h1 {
        font-size: 3em;
    }
    .banner {
        height: 16em;
    }
    .open-nav img {
        width: 4.2em;
    }
}