@media (max-width: 768px) {
    body, html{font-size: 15px;}
    
    #layout-content {
        padding: 60px 7px 40px 7px;
    }
    #layout-content #content {
        padding-top: 20px;
        padding-left: 0;
    }

    #layout-content .mobile-banner
    {
        padding: 0 15px 8px 15px;
    }

    body.body-home #layout-content .mobile-banner
    {
        padding: 0 0;
    }
    
    #layout-header{
        display: none;
    }
    #layout-navigation{
        left:0;
        right: 0;
        width: auto;
        z-index: 900;
        font-size: 1.4rem;
    }
    #layout-navigation nav.navbar{
        display: none;
    }


    #layout-navigation .mobile{
        display: block;
        text-align: right;
        padding: 7px 15px 7px 15px;;
    }
    #layout-navigation .mobile:after{
        content: ' ';
        display: block;
        clear: both;
        height: 1px;
        margin-top: -1px;
        overflow: hidden;
    }
    #layout-navigation .mobile .nav-fixed{
        float:left;
        text-align: left;
    }
    #layout-navigation .mobile .nav-fixed ul
    {
        display: block;
    }
    #layout-navigation .mobile .nav-fixed li
    {
        display: inline-block;
    }
    #layout-navigation .mobile .nav-fixed li a{
        display: block;
        padding: 7px 8px;
    }
    #layout-navigation .mobile .nav-fixed li:first-child a{
        padding-left: 0;
        padding-right: 0;
    }
    #layout-navigation .mobile .nav-fixed li:last-child a{
        padding-right: 0;
    }
    #layout-navigation .mobile .nav-toggler{
        padding: 7px 0;
    }
    #layout-navigation .mobile .nav-toggler button.navbar-toggler{
        font-size: 1.5rem;
        color: white;
    }

    #layout-navigation .background {
        margin: 0 -36px;
        padding: 0 36px;
    }
    #layout-navigation .background.nav-shadow {
        box-shadow: 0 0 7px rgba(0,0,0,.7);
    }
    #layout-navigation .navbar{
        padding-top: 0;
    }
    #layout-navigation .navbar  ul {
        width: 100%;
    }
    #layout-navigation .navbar ul li a {
        padding: 14px 0;
        text-align: center;
    }
    #layout-navigation .navbar ul li ul li a {
        padding: 7px 0;
    }
    
    #layout-navigation .navbar ul li.active,
    #layout-navigation .navbar ul li.pre-active
    {
        background-color: var(--color_nav2);
    }
    #layout-navigation .navbar ul li.active ul {
        display: block;
    }
    
    #layout-navigation .social-networks {
        margin-top: 0;
        padding-bottom: 25px;
        display: none;
    }
    #layout-navigation .social-networks a{
        display: block;
        text-align: center;
        padding: 7px 0;
    }

    #layout-navigation .navigation-after,
    #layout-navigation .submenu
    {
        display: none;
    }
    
    #layout-footer{
        padding: 10px 0;
    }
    #layout-footer ul{
        display: block;
        padding-left: 0;
        font-size: .85rem;
        text-align: center;
        margin: 0;
    }
    #layout-footer ul li a 
    {
        padding: 3px 0;
    }

    #layout-footer ul li a:after
    {
        padding: 0 2px 0 4px;
    }
    
    
    .spectacle-container.spectacle-container-list .col-spectacle {
        padding-left: 15px;
        padding-bottom: 15px;
      }
    
    .content{
        padding-left: 0;
    }
    
    .swiper {
        /*height: 280px;*/
     }
    .swiper .swiper-slide-container{
        padding: 25px 0;
    }
    
    .content-strip{
        margin: 0 -7px;
    }
    
}
@media (min-width: 768px) and (max-width: 992px) {
    body, html{font-size: 15px;}
    #layout-content{padding-bottom: 58px;}

    #layout-content #content .content-spectacle h2{
        margin-top: 25px;
    }
    
    .swiper .swiper-slide-container{
        padding: 25px 0;
    }


    #layout-header header .brand img
    {
        height: 180px;
    }

    body.body-home #layout-header header .brand img{
        height: 240px;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    body, html{font-size: 16px;}
    #layout-content{padding-bottom: 58px;}

    .content-spectacle dt{
        width: 120px;
    }
    .content-spectacle dd{
        padding-left: 135px;
    }
    
    .swiper .swiper-slide-container{
        padding: 25px 0;
    }


    #layout-header header .brand img
    {
        height: 200px;
    }

    .col-billetterie-info .content-strip p.img {
        padding: 0 5px;
    }
}
@media (min-width: 1200px) {
    .content-spectacle .description {
        column-count: 2;
        column-gap: 30px;
    
    }
}


@media (min-width: 1200px)  and (max-width: 1400px) {
    .swiper .swiper-slide-container{
        padding: 25px 0;
    }
    
    .col-billetterie-info .content-strip p.img {
        padding: 0 25px;
    }
}