/* Comm'une Couleur Landing Page - Responsifs */

/* =Media Queries for Nav
===============================*/
@media all and (max-width: 1024px) {
    /* display: flex active la mise en page définie dans style.css
       (align-items: center + justify-content: center).
       float: right le place à droite du logo (qui est float: left). */
    #nav-trigger {
        display: flex;
        float: right;
    }

    nav#nav-main {
        display: none;
    }

    nav#nav-mobile {
        display: block;
    }

    nav#nav-mobile li {
        display: block;
    }

    #header aside {
        display: none;
    }
}

/* Landscape mobile & down
===============================*/
@media (max-width: 480px) {

    /* #scrollUp est créé en JS avec style.display inline → !important nécessaire pour le surcharger sur mobile */
    #scrollUp {
        display: none !important;
    }

    .row {
        padding: 15px;
    }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-2-3, .col-3-4, .col-9-10, .col-61, .col-38, .row {
        width: 100%;
    }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-2-3, .col-3-4, .col-9-10, .col-61, .col-38 {
        padding-right: 0;
        padding-left: 0;
    }

    /*-----------------Header Elements-----------------*/
    #header .row {
        padding: 0 15px;
    }

    #header.nav-solid [class*="col-"] {
        padding: 0;
    }

    /*Logo*/
    #logo h2 {
        padding: 0;
    }

    /* Social */
    #header aside {
        clear: both;
        padding: 0;
    }

    #header ul.social-icons {
        margin-top: 0;
    }

    #banner-content.row {
        padding-top: 85px;
    }

    /*-----------------Sections-----------------*/

    /* Call to Action*/
    .call-to-action {
        padding-bottom: 25px;
    }

    /* Video */
    .lbv-lightbox iframe, .lbv-lightbox object, .lbv-lightbox embed {
        height: 270px;
    }

    /* Footer */
    #landing-footer #copyright {
        float: left;
        width: 50%;
    }

    #landing-footer .social-icons {
        float: right;
        width: 50%;
    }

    /*-----------------Typography-----------------*/
    h1 {
        font-size: 38px;
    }

    #banner h1 {
        font-size: 48px;
    }
}

/* Mobile to Tablet Portrait
===============================*/
@media (min-width: 480px) and (max-width: 767px) {

    /* #scrollUp est créé en JS avec style.display inline → !important nécessaire */
    #scrollUp {
        display: none !important;
    }

    .row {
        padding: 15px 0;
    }

    .col-1, .col-2, .col-5, .col-7, .col-9, .col-11, .col-2-3, .col-3-4, .col-61, .col-38, .row {
        width: 100%;
    }

    .col-3, .col-4, .col-6, .col-8, .col-10, .col-12 {
        width: 50%;
    }

    /*-----------------Header Elements-----------------*/
    #header .row {
        padding: 0;
    }

    #header aside {
        display: inline-block;
        position: absolute;
        top: 40px;
        right: 60px;
        padding-top: 3px;
        padding-right: 5px;
    }

    #header.nav-solid aside {
        top: 20px;
    }

    #header aside ul {
        margin-top: 0;
        padding-top: 6px;
    }

    #banner-content.row {
        padding-top: 85px;
    }

    /*Navigation*/
    nav#nav-mobile ul {
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*-----------------Sections-----------------*/

    /* Video */
    .lbv-lightbox iframe, .lbv-lightbox object, .lbv-lightbox embed {
        height: 370px;
    }

    /* Footer */
    #landing-footer #copyright {
        float: left;
        width: 50%;
    }

    #landing-footer .social-icons {
        float: right;
        width: 50%;
    }

}

/* Landscape Tablet to Desktop
===============================*/
@media (min-width: 768px) and (max-width: 1024px) {

    /*-----------------Header Elements-----------------*/
    #header aside {
        display: inline-block;
        position: absolute;
        top: 40px;
        right: 60px;
        padding-top: 3px;
        padding-right: 5px;
    }

    #header.nav-solid aside {
        top: 20px;
    }

    #header aside ul {
        margin-top: 0;
        padding-top: 6px;
    }

    /*Navigation*/
    nav#nav-mobile ul {
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*-----------------Sections-----------------*/

    /* Video */
    .lbv-lightbox iframe, .lbv-lightbox object, .lbv-lightbox embed {
        height: 432px;
    }

}