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

@media only screen and (max-width: 1540px) {  /*________________________________________________________________________ : 1.25 */
    /* TYPO */
    h1 {
        font-size: 4.6em;
    }
    h2,
    #header p {
        font-size: 2.5em;
    }
    h3,
    #main p,
    #main ul,
    #footer p,
    #sub-nav ul > li > a,
    #sub-nav > ul > li:after {
        font-size: 1.8em;
    }
    
    /* PROPORTIONS */
    .inside {
        width: 113.6em;
    }
    section {
        padding-top: 6.4em;
        padding-bottom: 3.2em;
    }
    #header .header-top .inside {
        height: 8.5em;
    }
    #header .header-logo .inside {
        height: 23.8em;
    }
    #header .header-logo .inside img {
        width: 40.3em;
        margin-top: 1.1em;
    }
    #header .header-banner {
        height: 44.4em;
    }
    #main p.logo-vod {
        margin-top: 6em;
    }
    #footer .inside {
        height: 24em;
        padding-top: 4em;
        padding-bottom: 7.7em;
    }
    #footer .footer-logo {
        background-size: 37.1em;
        width: 37.1em;
        height: 24em;
    }
}



@media only screen and (max-width: 1279px) {  /*________________________________________________________________________ : 1.25 */
    /* TYPO : 1.2 */
    h1 {
        font-size: 3.8em;
    }
    h2,
    #header p {
        font-size: 2.1em;
    }
    h3,
    #main p,
    #main ul,
    #footer p,
    #sub-nav ul > li > a,
    #sub-nav > ul > li:after {
        font-size: 1.5em;
    }
    
    /* PROPORTIONS */
    .inside {
        width: 90.9em;
    }
    section {
        padding-top: 5.1em;
        padding-bottom: 2.6em;
    }
    #header .header-top .inside {
        height: 6.8em;
    }
    #header .header-logo .inside {
        height: 19em;
    }
    #header .header-logo .inside img {
        width: 32.2em;
        margin-top: 0.9em;
    }
    #header .header-banner {
        height: 35.5em;
    }
    #main p.logo-vod {
        margin-top: 5.4em;
    }
    #footer .inside {
        height: 19.2em;
        padding-top: 3.2em;
        padding-bottom: 6.2em;
    }
    #footer .flex-columns .item {
        margin-right: 4.4em;
    }
    #footer .footer-logo {
        background-size: 29.7em;
        width: 29.7em;
        height: 19.2em;
    }
}



@media only screen and (max-width: 1000px) {  /*________________________________________________________________________ FLUID / 1-SPALTER */
    .inside {
        width: 100%;
        box-sizing: border-box;
        padding-left: 15%;
        padding-right: 15%;
    }
    .flex-columns {
        flex-direction: column;
    }
    
    /* TYPO */
    h1 {
        font-size: 3.2em;
    }
    #header p {
        font-size: 1.8em;
        margin-bottom: 0.4em;
    }
    #footer p {
        margin-bottom: 1.2em;
    }
    
    /* HEADER */
    #header .header-top .inside {
        height: auto;
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    #header .header-logo .inside {
        height: 15.2em;
    }
    #header .header-logo .inside img {
        width: 25.8em;
        margin-top: 0.6em;
    }
    #header .header-banner {
        height: 28.4em;
    }
    
    /* MAIN */
    #main .flex-columns {
        justify-content: flex-start;
    }
    #main .flex-columns .image {
        width: 50%;
        margin-bottom: 3em;
    }
    #main .flex-columns .text {
        width: 100%;
        justify-content: flex-start;
    }
    #main .flex-columns .text p:last-child {
        margin-bottom: 2.4em;
    }
    #main p.logo-vod {
        padding-left: 7em;
        margin-top: 4.4em;
        margin-right: 0;
    }
    
    /* FOOTER */
    #footer .inside {
        height: auto;
    }
    #footer .flex-columns .item {
        justify-content: flex-start;
        margin-right: 0;
    }
    #footer .flex-columns .item:last-child {
        flex-direction: column-reverse;
    }
    #sub-nav {
        margin-top: 3em;
    }
    #footer .footer-logo {
        display: none;
        /*position: relative;
        background-position: bottom right;
        width: 100%;
        background-size: 19.8em;
        height: 12.8em;*/
    }
}



@media only screen and (max-width: 580px) {  /*________________________________________________________________________ SMARTPHONE */
    .inside {
        padding-left: 10%;
        padding-right: 10%;
    }
    section {
        padding-top: 4.4em;
        padding-bottom: 2.2em;
    }
    .mobile-only {display: block !important}
    .screen-only {display: none !important}
    
    /* TYPO */
    h1 {
        font-size: 3em;
    }
    #header p {
        font-size: 1.5em;
    }
    strong em {
        font-size: 1.2em;
    }
    #main p, #main ul {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    
    /* HEADER */
    #header .header-logo .inside {
        height: 12em;
    }
    #header .header-logo .inside img {
        width: 20em;
        margin-top: 0.4em;
    }
    #header .header-banner {
        height: 22em;
    }
    
    /* MAIN */
    #main .flex-columns .image {
        width: 100%;
    }
    #main p.logo-vod {
        padding-left: 0;
        padding-top: 6em;
        margin-top: 4em;
        padding-bottom: 0;
    }
}