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



@media only screen and (max-width: 1700px) { /*________________________________________________________________________ : 1.25 */
    /* TYPO */
    h1,
    #main p.font-beyond {
        font-size: 3.92em;
    }
    h2,
    #main p.large, #main ul.large, #footer p.large {
        font-size: 2.88em;
    }
    h3 {
        font-size: 2.4em;
    }
    #header .header-bottom p {
        font-size: 1.84em;
    }
    h4,
    #main p.medium, #main ul.medium, #footer p.medium {
        font-size: 1.76em;
    }
    #main p.small, #main ul.small, #footer p.small,
    #menu ul > li > a,
    #menu > ul > li:before {
        font-size: 1.6em;
    }
    
    /* PROPORTIONS */
    .inside {
        width: 132.8em;
    }
    section {
        padding-top: 4.32em;
    }
    section .inside {
        padding-bottom: 2.56em;
    }
    .flex-footer {
        margin-top: 2.56em;
        margin-bottom: 3.36em;
    }
    .flex-intro {
        margin-top: 4em;
        margin-bottom: 3.36em;
    }
    .border-box {
        margin-bottom: 3.36em;
    }
    .float {
        margin: 0 0 1.6em 1.6em;
    }
    .header-top {
        padding: 5.12em 0 1.76em 0;
    }
    .header-bottom {
        padding-top: 6.88em;
        padding-bottom: 7.52em;
    }
    #menu > ul > li:last-child {
        margin-left: 3.04em;
    }
    #main ul li:before {
        top: 3px;
        width: 10px;
        height: 15px;
        background-size: 10px;
    }
    #footer {
        padding: 2.64em 0;
    }
}




@media only screen and (max-width: 1400px) { /*________________________________________________________________________ : 1.1 */
    /* TYPO */
    h1,
    #main p.font-beyond {
        font-size: 3.4em;
    }
    h2,
    #main p.large, #main ul.large, #footer p.large {
        font-size: 2.6em;
    }
    h3 {
        font-size: 2.2em;
    }
    #header .header-bottom p {
        font-size: 1.7em;
    }
    h4,
    #main p.medium, #main ul.medium, #footer p.medium {
        font-size: 1.6em;
    }
    #main p.small, #main ul.small, #footer p.small,
    #menu ul > li > a,
    #menu > ul > li:before {
        font-size: 1.5em;
    }
    
    /* PROPORTIONS */
    .inside {
        width: 120.7em;
    }
    section {
        padding-top: 3.9em;
    }
    section .inside {
        padding-bottom: 2.3em;
    }
    .flex-footer {
        margin-top: 2.3em;
        margin-bottom: 3em;
    }
    .flex-intro {
        margin-top: 3.6em;
        margin-bottom: 3em;
    }
    .border-box {
        margin-bottom: 3em;
    }
    .float {
        margin: 0 0 1.5em 1.5em;
    }
    .header-top {
        padding: 4.6em 0 1.6em 0;
    }
    .header-bottom {
        padding-top: 6.2em;
        padding-bottom: 6.8em;
    }
    #menu > ul > li:last-child {
        margin-left: 2.8em;
    }
    #main ul li:before {
        top: 3px;
        width: 9px;
        height: 13px;
        background-size: 9px;
    }
    #footer {
        padding: 2.4em 0;
    }
}




@media only screen and (max-width: 1260px) { /*________________________________________________________________________ : fluid */
    .inside {
        width: 100%;
        box-sizing: border-box;
    }
    #header .inside,
    section,
    #footer {
        padding-left: 3%;
        padding-right: 3%;
    }
    h1,
    #main p.font-beyond {
        font-size: 3.2em;
    }
    .header-bottom .inner .right {
        margin-top: 0;
    }
    #header h1 br {
        display: none;
    }
    .flex-footer .item:nth-child(2) {
        margin-left: -15%;
    }
}




@media only screen and (max-width: 940px) { /*________________________________________________________________________ : 1-Spalter */
    #header .inside,
    section,
    #footer {
        padding-left: 12%;
        padding-right: 12%;
    }
    .inner {
        padding: 0 4%;
    }
    .header-bottom .inner {
        flex-direction: column;
        justify-content: center;
    }
    .header-bottom .inner .left {
        width: 33%;
        margin-left: 0;
        margin-bottom: 6em;
    }
    .header-bottom .inner .right {
        width: 100%;
        text-align: center;
    }
    .flex-intro {
        flex-direction: column-reverse;
        justify-content: flex-start;
    }
    .flex-intro .left {
        width: 100%;
        margin-left: 0;
        padding: 3em 2.3em 1em;
    }
    .flex-intro .right {
        width: 66%;
        margin-bottom: 1em;
    }
    .border-box {
        padding: 3em 2.3em 1em;
        margin-left: 0;
    }
    .extend {
        margin-left: 0;
    }
    .flex-footer {
        flex-direction: column;
        justify-content: flex-start;
    }
    .flex-footer .item:nth-child(2) {
        margin-left: 0;
    }
    .start h3 {
        margin-left: 0;
    }
    /* PROPORTIONS */
    section {
        padding-top: 3em;
    }
    section .inside {
        padding-bottom: 2em;
    }
    .flex-footer {
        margin-top: 2em;
        margin-bottom: 3em;
    }
    .flex-intro {
        margin-top: 3em;
        margin-bottom: 3em;
    }
    .border-box {
        margin-bottom: 3em;
    }
    .float {
        width: 33%;
        margin: 0 0 1em 1em;
    }
    .header-top {
        padding: 4em 0 1.2em 0;
    }
    .header-bottom {
        padding-top: 4em;
        padding-bottom: 3em;
    }
    #menu > ul > li:last-child {
        margin-left: 2.4em;
    }
}



@media only screen and (max-width: 560px) {
    #header .inside,
    section,
    #footer {
        padding-left: 4%;
        padding-right: 4%;
    }
    .inner {
        padding: 0 4%;
    }
    .header-bottom .inner .left {
        width: 50%;
        margin-bottom: 4em;
    }
    .flex-intro .right {
        width: 100%;
    }
    /* TYPO */
    h1,
    #main p.font-beyond {
        font-size: 3em;
    }
    h2,
    #main p.large, #main ul.large, #footer p.large {
        font-size: 2.4em;
    }
    h3 {
        font-size: 2em;
    }
    #header .header-bottom p {
        font-size: 1.6em;
    }
    h4,
    #main p.medium, #main ul.medium, #footer p.medium {
        font-size: 1.5em;
    }
    #main p.small, #main ul.small, #footer p.small,
    #menu ul > li > a,
    #menu > ul > li:before {
        font-size: 1.45em;
    }
}

@media only screen and (max-width: 400px) {
    #menu > ul > li {
        margin-bottom: 1em;
    }
}