@media (max-width: 1400px){
    /* ### LAYOUT ### */
    .container{
        max-width: 1140px;
    }
}

@media (max-width: 1200px){
    /* ### LAYOUT ### */
    .container{
        max-width: 960px;
    }
    #main {
        margin-top: 100px;
    }
    #main > .img-banner {
        height: 330px;
    }

    /* ### ###### ### */
    /* ### FOOTER ### */
    /* ### ###### ### */
    footer#footer .footer-inner-container {
        grid-template-columns: 60% 40%;
        height: 400px;
    }
    footer#footer .footer-inner-container > div {
        margin-bottom: 40px;
    }
    footer#footer h3 {
        margin-top: 40px;
    }
    footer#footer .footer-inner-container > .footer-dev-container {
        padding-bottom: 40px;
    }

    /* ### HEADER ### */
    header#header {
        height: 100px;
    }
    header#header .header-navbar-brand h3 {
        font-size: 20px;
    }
    header#header .header-navbar {
        position: absolute;
        top: 0;
        right: -420px;
        width: 420px;
        height: 100vh;
        background: #fff;
        transition: .2s;
        z-index: 5;
    }
    header#header .header-navbar.active {
        right: 0;
    }
    header#header .header-navbar #menu-main-menu{
        flex-direction: column;
        align-items: start;
        justify-content: start;
        height: 100%;
        padding: 70px 0;
    }
    header#header .header-navbar #menu-main-menu > li {
        margin-right: 0;
        margin-left: 50px;
        margin-bottom: 40px;
    }
    header#header .header-navbar #menu-main-menu > li:before,
    header#header .header-navbar #menu-main-menu > li:after{
        display: none;
    }
    header#header .header-navbar #menu-main-menu li a{
        text-align: start;
        white-space: initial;
    }
    header#header .header-navbar #menu-main-menu .dropdown-menu{
        position: relative ! important;
        transform: none ! important;
        margin: 0 ! important;
        padding: 0;
        border: 0;
        inset: 0 ! important;
        padding-left: 5px;
        max-width: 90%;
    }
    header#header .header-navbar #menu-main-menu .dropdown-menu.show li{
        margin: 0;
    }
    
    /* ### BURGER MENU ### */
    header#header .header-navbar-toggler {
        display: flex;
        justify-content: end;
    }
    header#header .header-navbar-toggler.cross-toggler{
        left: 20px;
        top: 20px;
    }
    header#header .header-navbar-toggler.cross-toggler .burger-menu {
        width: 30px;
        height: 20px;
    }
    header#header .header-navbar-toggler.cross-toggler .burger-menu .item-burger-menu {
        height: 4px;
    }
    header#header .header-navbar-toggler.cross-toggler .burger-menu .item-burger-menu:first-of-type {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    header#header .header-navbar-toggler.cross-toggler .burger-menu .item-burger-menu:last-of-type {
        bottom: 50%;
        transform: translate(0, -50%) rotate(45deg);
    }
    header#header .header-navbar-toggler.cross-toggler .burger-menu:hover  > .item-burger-menu:nth-of-type(2){
        width: 100%;
    }

    /* ### ACCUEIL ### */
    #accueil > .right-col{
        grid-template-columns: 1fr 1fr;
    }

    /* ### ATELIERS ### */
    #ateliers .left-col {
        display: none;
    }
    #ateliers .main-col {
        width: 75%;
    }

    #festival .events-container{
        grid-template-columns: repeat(3 ,1fr);
    }

    #en-images .galleries-container,
    #en-images .gallery-video{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px){
    /* ### LAYOUT ### */
    .container{
        max-width: 720px;
    }
    h1.page-title{
        font-size: 28px;
        padding: 10px 10px;
        padding-top: 45px;
    }
    h1.page-title:before, 
    h1.page-title:after {
        top: -10px;
        width: 100vw;
        height: 40px;
    }
    h1.page-title:after{
        display: none;
    }
    h1.page-title:before {
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        background-position: center;
        background-size: cover;
    }
    /* ### ACCUEIL ### */
    #accueil{
        flex-direction: column;
    }
    #accueil > .left-col,
    #accueil > .right-col{
        width: 100%;
    }
    #accueil > .left-col{
        margin-bottom: 20px;
    }
    #accueil > .left-col img{
        display: none;
    }

    #a-propos .blocks-container .block:nth-of-type(2n+2){
        flex-direction: column;
    }
    #a-propos .blocks-container .block:nth-of-type(2n+1) .second-part,
    #a-propos .blocks-container .second-part{
        position: relative;
        margin-left: 0;
        max-width: 100%;
        margin-top: 20px;
        right: initial;
        left: initial;
        top: initial;
        bottom: initial;
    }
    #a-propos .blocks-container .second-part.second-img-part{
        display: none;
    }

    #accueil .right-col .block-articles{
        padding-right: 20px;
    }
    #accueil .right-col .block-articles:hover:before {
        width: 100%;
        height: 100%;
    }
    .block-corner:before {
        height: 100%;
    }

    /* ### ATELIERS ### */
    #ateliers .main-col {
        width: 100%;
    }
    #ateliers .block-atelier {
        display: block;
    }
    #ateliers .left-col {
        width: 100%;
    }
     #ateliers .right-col{
        width: calc(100% - 75px);
     }
    #ateliers .main-col {
        padding-left: 45px;
    }
    #ateliers .right-col {
        margin-top: 50px;
        margin-left: 45px;
    }
    #ateliers .right-col img {
        width: 225Px;
    }

    #festival .events-container{
        grid-template-columns: repeat(2 ,1fr);
    }
    #festival .block-festival-info {
        display: block;
    }
    #festival .block-festival-info .right-col{
        display: none;
    }
    #festival .block-festival-info .left-col {
        width: 100%;
        padding: 0;
    }

    #en-images .galleries-container,
    #en-images .gallery-video{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    /* ### LAYOUT ### */
    .container{
        max-width: 540px;
    }
    h1.page-title{
        font-size: 24px;
    }
    #main {
        margin-top: 80px;
    }
    #main > .img-banner {
        height: 200px;
    }

    /* ### HEADER ### */
    .admin-bar header#header {
        top: 46px;
    }
    header#header {
        height: 80px;
    }
    header#header .header-navbar-brand h3 {
        font-size: 18px;
    }
    .header-navbar-toggler .burger-menu {
        width: 39px;
        height: 32px;
    }
    header#header .header-inner-container{
        grid-template-columns: 180px 1fr;
    }

    /* ### ###### ### */
    /* ### FOOTER ### */
    /* ### ###### ### */
    footer#footer .footer-inner-container {
        grid-template-columns: 1fr;
    }

    /* ### ACCUEIL ### */
    #accueil > .right-col{
        grid-template-columns: 1fr;
    }

    #en-images .galleries-container,
    #en-images .gallery-video{
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 576px){
    /* ### LAYOUT ### */
    .page-content {
        margin: 50px auto;
    }
    h1.page-title{
        padding-top: 25px;
    }
    h1.page-title:before, h1.page-title:after {
        height: 25px;
    }

    /* ### HEADER ### */
    header#header .header-navbar {
        right: -80%;
        width: 80%;
    }

    #festival .events-container{
        grid-template-columns: 1fr;
    }

    #wrapper .bubble-info-post .right-col{
        width: 0;
    }
    #wrapper .bubble-info-post .right-col img{
        display: none;
    }
    #wrapper .bubble-info-post .left-col{
        width: 100%;
    }
    
}