@media screen and (max-width: 400px) {

}

@media screen and (max-width: 767px){
    #heroScene #ctaBloc{text-align:center}
    #ctaBloc .phone, #ctaBloc .devis{
        font-size: 2rem;
        height: 64px;
        line-height: 61px;
        display: inline-block;
    }
    #ctaBloc .phone span, #ctaBloc .devis span{
        width: 64px;
        height: 64px;
        background-size: cover;
        margin-top: -4px;
    }
    #ctaBloc .devis{
        font-size: 1.5rem;
        line-height: 58px;
    }
    #ctaBloc .devis span{
        margin-top: -6px;
        background-position: 0px -1px;
    }
    #ctaBloc .devis:hover span{
        background-position: -55px 0;
    }
    .homeIntro .container{
        flex-direction: column;
        padding: 0;
    }
    .homeIntro .sectionHeading{padding:0;text-align:center;font-size:2.5rem;margin-bottom:2rem}
    .homeSectionContent .blocTextContent h4{margin-left:0;font-size: 3rem;margin-top: 20px;}
    .homeSectionContent .blocTextContent {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        order: 1;
    }
    .modularSection{padding: 0 1.5rem;width: 100vw;overflow: hidden;}
    .homeSectionContent .row{margin-left:-1.5rem;margin-right:-1.5rem}
    .homeIntro .sectionContent{
        margin: 0;
        padding: 2rem 0 0;
        border: none;
        text-align: center;
        border-top: 1px solid #000;
    }
    .blocTextContent {
        border-top: 2px solid #fbbc0f;
        border-right: none !important;
        border-left: none !important;
    }
    .blocImageOnly:after{top:inherit;bottom: -13px;left: 50% !important;margin-left:-15px;right: inherit !important;}
    .blocImageOnly {
        border-bottom: 2px solid #fbbc0f;
        border-left: none !important;
        border-right:none !important;
        height: 300px;
        order: 0;
    }
    .homeIntro{padding-top:1.5rem; padding-bottom:1.5rem}
    #homeNews{margin-top:0}
    .googleReview .sectionHeading{font-size: 3rem;margin-top:  2rem;}
    .mediaSlider img{max-width:100%}
    #listingHeading #ctaBloc > a, #detailsHeading #ctaBloc > a{margin-top:0 !important;margin-bottom:25px !important}
    #listing.template2 h1.headingTitle, #detailsHeading h1.headingTitle, #ContactHeading h1{font-size:3rem}
    #listing.template2 #listingHeading>div, #details.template1 #detailsHeading>div, #ContactHeading > div{padding-top:110px;position: relative;}
    #listing.template2 #listingHeading, #details.template1 #detailsHeading, #ContactHeading{min-height:inherit}
    footer{background-size:cover}
    .footer-nav{flex-direction:column;margin:2rem 0}
    .footer-nav li{padding:0}
    .footer-nav li a{padding:10px 0}
    #details.template1 #postGallery, #details.template1 #postGallery .galleryItem{height:auto !important;/* min-height:300px */}
    #postDetails > .row > .col-md-6:last-child{padding:0;border:none}
    #devisForm{padding:2rem 0}
    #devisForm .form-input-wrapper{background-position: .5rem 50% !important;}
    #devisForm .buttons{flex:1}
    #relatedPost > h3{font-size: 2.5rem !important;}
    #relatedPost > h3:before{width: 9%;left: -10px;}
    #relatedPost .postItem{border-bottom:2px solid #fff}
    #relatedPost .postContent > p{height:100px;overflow:hidden}
    .contactItems{flex-direction:column}
    #formContainer > div, #contactHoraire{padding-left:2rem;padding-right:2rem}
    #contactPage .row .col-md-6.pr-0:first-child{height:400px}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #heroScene{height:500px;}
    #heroScene > div{padding-top:77px}
    #heroScene #ctaBloc{text-align: center;width: 100%;}
    #ctaBloc .phone, #ctaBloc .devis{
        font-size: 2rem;
        height: 64px;
        line-height: 61px;
        display: inline-block;
        margin: 10px 15px;
        /* width: auto !important; */
    }
    #ctaBloc .phone{/* width: 281px; */}
    #ctaBloc .phone span, #ctaBloc .devis span{
        width: 64px;
        height: 64px;
        background-size: cover;
        margin-top: -4px;
    }
    #ctaBloc .devis{
        font-size: 1.5rem;
        line-height: 58px;
    }
    #ctaBloc .devis span{
        margin-top: -6px;
        background-position: 0px -1px;
    }
    #ctaBloc .devis:hover span{
        background-position: -55px 0;
    }
    .homeIntro .container{
        /* flex-direction: column; */
        padding: 0;
    }
    .homeIntro .sectionHeading{/* padding:0; *//* text-align:center; *//* font-size:2.5rem; *//* margin-bottom:2rem; */}
    .homeSectionContent .blocTextContent h4{margin-left:0;font-size: 3rem;margin-top: 20px;}
    .homeSectionContent .blocTextContent {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        /* order: 1; */
    }
    .modularSection{padding: 0 1.5rem;width: 100vw;overflow: hidden;}
    .homeSectionContent .row{margin-left:-1.5rem;margin-right:-1.5rem}
    .homeIntro .sectionContent{
        /* margin: 0; */
        /* padding: 2rem 0 0; */
        /* border: none; */
        /* text-align: center; */
        /* border-top: 1px solid #000; */
    }
    .blocTextContent {
        /* border-top: 2px solid #fbbc0f; */
        /* border-right: none !important; */
        /* border-left: none !important; */
    }
    .blocImageOnly:after{/* top:inherit; *//* bottom: -13px; *//* left: 50% !important; *//* margin-left:-15px; *//* right: inherit !important; */}
    .blocImageOnly {
        /* border-bottom: 2px solid #fbbc0f; */
        /* border-left: none !important; */
        /* border-right:none !important; */
        /* height: 300px; */
        /* order: 0; */
    }
    .homeIntro{padding-top:1.5rem; padding-bottom:1.5rem}
    #homeNews{margin-top:0}
    .googleReview .sectionHeading{font-size: 3rem;margin-top:  2rem;}
    .mediaSlider img{max-width:100%}
    #listingHeading #ctaBloc > a, #detailsHeading #ctaBloc > a{margin-top:0 !important;margin-bottom:25px !important}
    #listing.template2 h1.headingTitle, #detailsHeading h1.headingTitle, #ContactHeading h1{font-size:3rem}
    #listing.template2 #listingHeading>div, #details.template1 #detailsHeading>div, #ContactHeading > div{padding-top:110px;position: relative;}
    #listing.template2 #listingHeading, #details.template1 #detailsHeading, #ContactHeading{min-height:inherit}
    footer{background-size:cover}
    .footer-nav{/* flex-direction:column; */margin: 2rem 0;}
    .footer-nav li{/* padding:0 */}
    .footer-nav li a{padding: 0 15px;text-align: center;}
    #details.template1 #postGallery, #details.template1 #postGallery .galleryItem{height:auto !important;/* min-height:300px */}
    #postDetails > .row > .col-md-6:last-child{padding:0;border:none}
    #devisForm{padding:2rem 0}
    #devisForm .form-input-wrapper{background-position: .5rem 50% !important;}
    #devisForm .buttons{flex:1}
    #relatedPost > h3{font-size: 2.5rem !important;}
    #relatedPost > h3:before{width: 9%;left: -10px;}
    #relatedPost .postItem{border: 1px solid #fff;}
    #relatedPost .postContent > p{height:100px;overflow:hidden}
    .contactItems{/* flex-direction:column */}
    #formContainer > div, #contactHoraire{padding-left:2rem;padding-right:2rem}
    #contactPage .row .col-lg-6.pr-0:first-child{height:400px}
    #homeNews #postsList .postImage{height:250px}
}

@media screen and (max-width:1024px){
    #mainMenu{
        padding: 0;
        display: flex;
        width: 100vw !important;
        margin: 0;
        top: 0;
        left: 0;
    }
    .navbar-brand{order:0;padding: 10px 0;position: relative;z-index: 1;}
    .navbar-brand img{
        width: 150px;
        height: auto;
        margin-left: 10px;
    }
    button.navbar-toggler{
        height: auto;
        padding: 15px 15px 14px;
        margin: 0;
        order:2;
        position: absolute;
        top: 0;
        right: 0;
    }
    .hamburger-box{
        transform: scale(0.7);
        transform-origin: 50% 50%;
    }
    div#mainNav{order:2;height: 0;width: 100vw !important;position: absolute;left: -100vh;top: 0;background: rgba(0, 0, 0, 0.8);padding: 80px 10px 20px !important;z-index: 0;opacity: 0;}
    div#mainNav.show{left:0;opacity: 1;height: 100vh;}
    div#mainNav .nav-item:after{display:none}
}

@media screen and (min-width: 1025px) and (max-width: 1600px) {
    .homeSectionContent .blocTextContent{padding-left:10% !important; padding-right: 10% !important}
}