@media (max-width: 575.98px) {
    .hero-bg img {
        height: 100%;
        width: auto;
    }
     .hero-bisquine{
    position: absolute;
    left: 0px;
    top: 0px;
}
     .square {
         max-height: 500px;
        /* bottom: -90px;*/
         width: 100%;
         right: 0px;
     }
    .address-menu {
        display: none;
    }
    a.menu-link {
        font-size: 30px;
    }
     .social{
         right:0px;
     }
     .social ul li{
         display: block;
         text-align: left;
     }
    .service-item {
        width: 100% !important;
    }

    /*.about-text-bg {
        display: none;
    }*/
    .about-img::before,.balade-img::before {
    right: 8px;
    top: -8px;
    z-index: -1;
    }
    /*.left-bg {
        display: none
    }*/

    /*.right-bg {
        display: none;
    }*/

    .toggle-btn::before {
        display: none;
    }
    .hero-title h1 {
        font-size: 35px;
    }
    .links::before {
        display: none;
    }
     .roellinger-link {
    left: 18px;
    }
     .roellinger-link img{
    max-height: 30px;
    }
    .roellinger-link a{
    font-size: 12px;
    /*top: 4px;*/
    margin-left: 4px;
    }
    .news-text p {
        display: none;
    }
    .hero-title {
        padding: 0 30px;
    }

    .title h2 {
        font-size: 30px;
    }
    .book-text .title h2 {
    font-size: 26px;
     }
    .line-between {
        height: 50px;
        margin-top: -25px;
    }
    .title {
      text-align: center !important;
      padding: 2px 0;
    }
    .about-text {
        padding: 20px 0px;
        z-index: 1;
    }
    .about-img {
        margin-top: 30px !important;
    }
    .title:before, .mid-title .title:before {
        content: '';
        position: absolute;
        transform: translate(-50%, -50%) rotate(45deg);
        top: 50%;
        left: 50%;
        width: 80px;
        height: 80px;
        z-index: 1;
        background: url(../content/cc-ecole/images/text-bg-dark.png) repeat;
        background-size: 10px;    
    }
    /* .title-section-balade:after {
        content: '';
        position: absolute;
        top: -130px;
        left: -15px;
        width: 120px;
        height: 120px;
        z-index: 1;
        transform: scale(0.7);
     
}*/
    .service {
        margin-bottom: 10px;
    }

    .mb-30 {
        margin-bottom: 30px !important;
    }
    .section-layout {
        padding: 50px 0;
    }
    .balade-text {
    padding: 20px 2px;
    }
}

/* // Extra small devices (portrait phones, less than 576px) */
@media (min-width: 575.98px) and (max-width: 767.98px) {
    .address-menu {
        display: none;
    }
    .links::before {
        display: none;
    }
    .left-bg {
        display: none
    }

    .right-bg {
        display: none;
    }
    .toggle-btn::before {
        display: none;
    }
    .hero-title h1 {
        font-size: 40px;
    }
     .roellinger-link {
    left: 18px;
    }
     .roellinger-link img{
    max-height: 30px;
    }
    .roellinger-link a{
    font-size: 12px;
    /*top: 4px;*/
    margin-left: 4px;
    }
    .news-text p {
        display: none;
    }
 
    .roellinger-link {
    left: 18px;
    }
    .section-layout {
        padding: 70px 0;
    }
}

/* // Small devices (landscape phones, less than 768px) */
@media (min-width: 767.98px) and (max-width: 991.98px) {
    .about-text {
    padding: 40px 40px;
    z-index: 9;
    }
    .address-menu {
        display: none;
    }
    .links::before {
        display: none;
    }
     .roellinger-link {
    left: 18px;
    }
     .roellinger-link img{
    max-height: 30px;
    }
    .roellinger-link a{
    font-size: 12px;
    /*top: 4px;*/
    margin-left: 4px;
    }
   /* .left-bg {
        display: none
    }*/

  /*  .right-bg {
        display: none;
    }*/
    .section-layout {
        padding: 70px 0;
    }
    .about-img{
        max-width: 500px;
    } 
    .about-img::before {
    bottom: 40px;
    width: 100%;
    right: -20px;
    top: -20px;
    z-index: -1;
    }
    .balade-img::before {
    bottom: 40px;
    width: 100%;
    right: 20px;
    top: -20px;
    z-index: -1;
    }
    .contact-text{
        padding: 0 4rem; 
    }
}

/* // Medium devices (tablets, less than 992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

   /* .left-bg {
        display: none
    }*/

   /* .right-bg {
        display: none;
    }*/
    
     
    .roellinger-link {
    left: 2%;
    }
    .roellinger-link img{
    max-height: 35px;
    }
    .roellinger-link a{
    font-size: 12px;
    /*top: 4px;*/
    margin-left: 4px;
    }
    a.menu-link {
        font-size: 40px;
    }

    .section-layout {
        padding: 100px 0;
    }
    .hero-title h1 {
    color: #000;
    margin: 0 !important;
    letter-spacing: 2px;
    font-size: 40px;
    font-weight: 900;
    }
    .about-img::before {
    bottom: 40px;
    width: 100%;
    right: -20px;
    top: -20px;
    z-index: -1;
    }
    .balade-img::before {
    bottom: 40px;
    width: 100%;
    right: 20px;
    top: -20px;
    z-index: -1;
    }
}
@media (min-width: 1200px) and (max-width: 1499px) {
    .hero-title h1 {
    color: #000;
    margin: 0 !important;
    letter-spacing: 2px;
    font-size: 40px;
    font-weight: 900;
    }
    .about-img::before {
    bottom: 40px;
    width: 100%;
    right: 30px;
    top: -30px;
    z-index: -1;
    }
    .balade-img::before {
    bottom: 40px;
    width: 100%;
    right: -30px;
    top: -30px;
    z-index: -1;
    }
    .contact-img::before {
    bottom: 40px;
    width: 100%;
    right: 30px;
    top: -30px;
    z-index: -1;
    }
    .roellinger-link {
    left: 2%;
    }
    .roellinger-link img{
    max-height: 40px;
    }
    .roellinger-link a{
    font-size: 12px;
    /*top: 4px;*/
    margin-left: 4px;
    }
}
@media
only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 1200px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( min-resolution: 200dpi),
only screen and (min-width: 1200px)and ( min-resolution: 1.25dppx)
{
    .roellinger-link {
    left: 2%;
    }
}
/* // Large devices (desktops, less than 1200px) RETINA */
@media (min-width: 1200px) and (max-width: 4000px) {
    .work-item {
        height: 350px;
    }

    .mt-60-lg {
        margin-top: 60px !important;
    }

    .section-layout {
        padding: 100px 0;
    }


    a.menu-link {
        font-size: 40px;
    }

    .detail-title {
        margin-top: -300px;
    }
   
}