/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1200px) {
    
    /*-------------------------------------------------------------------------*/
    /*----------------------------MENU-----------------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    #nav-fixed{
        display: none;
    }
    
    #nav-fixed .row{
        margin: 0 20px 0 20px;
        width: calc(100% - 185px);
    }
    
    #nav-fixed .col-fixed-menu{
        padding: 10px;
    }
    
    #nav-fixed .col-fixed-menu.principal{
        font-size: 1rem;
    }
    
    .container_menus{
        height: 40px;
    }
    .site-header #navbar > ul > li > a, .site-header #navbar > ul > li > i {
        height: 40px;
        line-height: 40px;
    }
    .service-sidebar, .sidebar-link{
        display: none;
    }
    
    .bloc-menu{
        margin-bottom: 0;
    } 
    
    .contenu_page, .contenu_categorie, .contenu_accueil, .pub_footer{
        padding: 0 15px;
    }
    
    .bouton-precedent{
        margin-bottom: 0;
    }
    
    .bouton-precedent, .bouton-suivant{
        padding: 0;
    }
    
    .bouton-suivant .bloc-titre, .bouton-precedent .bloc-titre {
        height: 150px;
    }
    
    .partager{
        margin-left: -15px;
        width: calc(100% + 30px);
        font-size: 1.1rem;
        height: 150px;
    }
    
    #menu{
        display: block;
    }
    
    #bloc-avant, #bloc-apres{
        bottom: 25px;
        width: 150px;
        height: 150px;
        left: 25px;
    }
    
    #bloc-apres{
        left: auto;
        right: 25px;
    }
    
    #bloc-avant p, #bloc-apres p{
        font-size: 1rem;
    }
    
    #bloc-avant p b, #bloc-apres p b{
        font-size: 1.8rem;
        line-height: 3rem;
    }
    
    .bloc-menu span.bloc-menu-titre, .bloc-menu h2, .bouton-projet, .bouton-projet:hover, .bouton-projet:focus, .bouton-projet:active,
    .logo-hauts-de-france span {
        font-size: 1rem;
    }
    
    /*-------------------------------------------------------------------------*/
    /*------------------------------ACCUEIL------------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    #actualites .petite_actu .infos_actu, #actualites .moyenne_actu .infos_actu{
        padding: 15px 20px;
    }
    
    #newsletter .titre-newsletter {
        font-size: 2.5rem;
    }
    
    /*-------------------------------------------------------------------------*/
    /*---------------------------TEMOIGNAGES-----------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    
    #contenu-temoignage .container-photo-temoignage{
        height: 150px;
        width: 150px;
        margin: auto auto 15px auto;
    }
    
    .autre-temoignage .container-photo-temoignage{
        width: 50px;
        height: 50px;
    }
}

@media (min-width: 992px) and (max-width: 1450px) {
    /* TABLEAU DE BORD */

    .sidebar ul{
        padding: 30px 15px;
    }
    
    .tableau-de-bord-etape-titre{
        font-size: 16px;
    }
    
    .tableau-de-bord-etape-progression{
        font-size: 14px;
    }
    
    .tableau-de-bord-activite-bloc h3{
        margin-bottom: 1em;
    }
    
    .tableau-de-bord-activite-bloc{
        padding: 15px;
    }
}

@media (max-width: 1450px) {
    .tableau-de-bord-activite-detail{
        font-size: 14px;
    }
    
    .tableau-de-bord-activite-date{
        font-size: 12px;
    }
}

@media (min-width: 1200px) and (max-width: 1550px) {
    .topbar .btn-contact{
        padding: 13px 5px;
        font-size: 12px;
    }
    
    .topbar .btn-contact img{
        max-height: 20px;
    }
}

/* Portrait tablets and small desktops */
@media (max-width: 991px) {
    
    #nav-fixed{
        display: none;
    }
    
    .margin-top-45-responsive{
        margin-top: 45px;
    }
    
    /*------------------------------------------------------------------------*/
    /*--------------------------HEADER/MENU-----------------------------------*/
    /*------------------------------------------------------------------------*/
    
    .topbar {
        margin-top: 15px;
    }
    
    .mobile_toggle{
        display: block;
    }
    
    .site-header #navbar, .site-header #menu{
        display: none;
    }
    
    .padding-header{
        padding: 15px;
    }
    
    .navigation{
        display: none;
    }
    
    .logo-mobile{
        display: block;
    }
    
    .container_header{
        max-width: 100%;
        margin-left: auto;
    }
    
    .btn-contact{
        display: none;
    }
    
    .mobile_toggle{
        margin-bottom: 50px;
    }
    
    .mobile_toggle .navbar-header{
        background: #8DC63F;
    }
    
    .mobile_toggle.copropriete .navbar-header {
        background: #0050A4;
    }
    
    .padding-header .f-right{
        float: initial;
    }
    
    .container_header .search, #nav-fixed .search {
        width: 100%;
    }
    
    .container_header .bouton-search, #nav-fixed .bouton-search {
        left: auto;
        right: 0;
    }
    .logo-france-renov{
        display:none;
    }
    .france-renov-mobile, .france-renov-mobile .logo-france-renov{
        display: inline-block;
        width: 100px;
        position: absolute;
        top: 0;
        left: 35%;
    }
    .logo-hauts-de-france, .row-hauts-de-france{
        display: none;
    }
    
    #menu-mobile ul{
        list-style: none;
        padding: 0;
    }
    
    .bloc-menu-mobile:first-child{
        border-top: 2px solid #8DC63F;
    }
    
    .bloc-menu-mobile{
        background: #0050A4;
        border-bottom: 2px solid #8DC63F;
        width: 100%;
        text-align: center;
        position: relative;
    }
    
    .bloc-menu-mobile a{
        display: block;
        padding: 15px 0;
    }
    
    .bloc-menu-mobile span{
        font-size: 1.2rem;
        color: #fff;
        text-align: center;
    }
    
    .bloc-menu-mobile i{
        position: absolute;
        font-size: 1.5rem;
        top: 17px;
        color: #fff;
        right: 30px;
    }
    
    .bloc-menu-mobile .ssmenu-mobile{
        display: none;
    }
    
    .bloc-menu-mobile .ssmenu-mobile li a{
        border-top: 2px solid #8DC63F;
        color: #fff;
        font-size: 1.2rem;
        text-align: left;
        padding: 15px 30px;
    }
    
    .bloc-menu-mobile .ssmenu-mobile li i{
        position: relative;
        top: auto;
        right: auto;
        font-size: 1.2rem;
    }
    
    .bouton-projet-mobile{
        font-family: "Oswald", sans-serif;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        color: #fff;
        background: #8DC63F;
        width: 100%;
        padding: 15px 0;
    }
    
    .bouton-projet-mobile.copropriete{
        background: #0050A4;
    }
    
    /*------------------------------------------------------------------------*/
    /*-----------------------------ACCUEIL------------------------------------*/
    /*------------------------------------------------------------------------*/
    
    /* BANNIERE */
    
    .slide-img{
        height: 400px;
        background-position: center;
    }
    
    .carousel{ height: 400px; }
    
    .slide .slide-texte p{
        font-size: 1.5rem;
    }
    
    /* FORMULES */
    
    #tarif .padding-60{
        padding: 60px 10px;
    }
    
    #tarif .nom-formule, #tarif .tarification .prix {
        font-size: 1.7rem;
    }
    
    /* ACTU */
    
    #actualites .petite_actu img {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
        max-height: inherit;
    }
    
    #actualites .moyenne_actu .container_img, #actualites .moyenne_actu img{
        height: auto;
    }
    
    #actualites .petite_actu .infos_actu{
        border: 2px solid #8DC63F;
        border-radius: 0 0 10px 10px;
        overflow: hidden;
    }
    
    #actualites .petite_actu .infos_actu.copropriete{
        border: 2px solid #0050A4;
    }
    
    #actualites .infos_actu h3{
        font-size: 1.1rem;
    }
    
    #actualites .grande_actu .infos_actu p{
        font-size: 0.8rem;
        line-height: 1rem;
    }
    
    #actualites .infos_actu i{
        font-size: 2rem;
        padding: 10px;
    }
    
    #actualites .grande_actu{
        margin-bottom: 25px;
    }
    
    /* TEMOIGNAGES */
    
    #temoignage .bloc-temoignage {
        margin-bottom: 15px;
    }
    
    /* NEWSLETTER */
    
    #newsletter .titre-newsletter{
        font-size: 2rem;
    }
    
    #newsletter .sous-titre-newsletter, #newsletter .texte-newsletter, #newsletter .champ-newsletter{
        margin-bottom: 1rem;
    }
    
    .button-flottant{ display: none; }
    
    /*-------------------------------------------------------------------------*/
    /*----------------------------TEMOIGNAGES----------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    #bloc-avant, #bloc-apres{
        display: none;
    }
    
    .haut-page-temoignage, .image-page-temoignage{
        margin-left: 0;
        max-width: 100%;
    }
    
    .haut-page-temoignage h3{
        font-size: 2rem;
        padding: 30px 15px;
    }
    
    .haut-page-temoignage .bloc-haut{
        min-height: 300px;
    }
    
    .haut-page-temoignage .bloc-haut p b{
        font-size: 3rem;
    }
    
    #page-temoignage .container-photo-temoignage{
        max-height: 300px;
    }
    
    .autres-temoignages .col-lg-10pt{
        padding: 30px 0;
        width: 100%;
    }
    
    /*-------------------------------------------------------------------------*/
    /*----------------------------NOS REALISATIONS-----------------------------*/
    /*-------------------------------------------------------------------------*/
    
    #liste-realisation .liste{
        padding: 40px 15px;
    }
    
    /*-------------------------------------------------------------------------*/
    /*------------------------SECTIONS PERSONNALISEES--------------------------*/
    /*-------------------------------------------------------------------------*/
    
    .padding-section{
        padding: 60px;
    }
    
    /*-------------------------------------------------------------------------*/
    /*-------------------------ARTICLES----------------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    .moyenne_actu img{
        width: 100%;
    }
    
    .moyenne_actu{
        margin-bottom: 15px;
    }
    
    h1{
        font-size: 2rem;
    }
    
    #actualites .padding-30{ padding: 30px 0; }
    
    /*-------------------------------------------------------------------------*/
    /*-------------------------------FOOTER------------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    .site-footer .col-footer {
        padding-left: 0;
    }
    
    .site-footer .col-footer:last-child .widget {
        padding: 0 15px;
    }
    
    /* ESPACE PARTICULIER */
    
    .menu-sidebar{
        display: none;
    }
    
    .menu-mobile{
        display: block;
    }
    
    .menu-mobile{
        position: fixed;
        bottom: 0;
        background: #fff;
        width: 100%;
        border-top: 1px solid #ddd;
        box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
        left: 0;
        padding: 15px;
    }
    
    .menu-mobile ul{
        position: relative;
        width: 100%;
    }
    
    .menu-mobile ul li{
        display: inline-block;
        width: calc(20% - 5px);
        text-align: center;
        margin-bottom: 0;
    }
    
    .menu-mobile .menu-mobile-principal{
        border-radius: 50px;
        background: #fff;
        height: 70px;
        line-height: 65px;
        position: absolute;
        top: -35px;
    }
    
    .menu-mobile i{
        margin: 0;
        width: auto;
    }
    
    .menu-mobile ul li i{
        margin: 0;
        font-size: 24px;
        width: auto;
        color: #000;
        vertical-align: middle;
    }
    
    .menu-mobile ul li:not(.menu-mobile-principal) a{
        height: 50px;
        width: 50px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .menu-mobile ul li:not(.menu-mobile-principal) a i{
        line-height: 50px;
    }
    
    .menu-mobile ul li.active:not(.menu-mobile-principal) a, .menu-mobile ul li.active:not(.menu-mobile-principal) a:hover, .menu-mobile ul li.active:not(.menu-mobile-principal) a:active, .menu-mobile ul li.active:not(.menu-mobile-principal) a:focus{
        border-radius: 100px;
    }
    
    .menu-mobile ul li.menu-mobile-principal.active{
        border: 2px solid transparent;
    }
    
    .menu-mobile ul li.menu-mobile-principal.active i{
        color: #fff;
    }
    
    .menu-mobile .menu-apres-principal{
        margin-left: calc(20% - 5px);
    }
    
    .sidebar ul{
        padding: 0;
        margin: 0;
    }
    
    .tableau-de-bord-header-fond{
        display: none;
    }
    
    .tableau-de-bord-header-margin{
        margin: 0 0 0 10px;
        padding: 15px;
        width: calc(100% - 22px);
    }

    .bg-tableau-de-bord.fullwidth{
        width: 100%;
    }
    
    .tableau-de-bord-header-margin{
        padding: 15px 0 0 0;
    }
    
    .tableau-de-bord{
        margin-bottom: 100px;
    }
    
    .btn-recap .btn:last-child{
        float: initial;
    }
}

@media (max-width: 991px) and (min-width: 768px) {

}

/* Landscape phones and portrait tablets */
@media  (max-width: 767px) {
    
    #temoignage .bloc-temoignage:hover .fond-temoignage{
        display: none;
    }

    #temoignage .bloc-temoignage:hover .titre-temoignage{
        display: block;
    }
    
    /* FOOTER */
    
    #form-newsletter .btn{
        margin: auto;
    }
    
    .upper-footer{
        background: #073150;
    }
    
    /* COMPTEUR */
    
    #chiffres .image-centre{
        width: 100%;
        text-align: center;
        margin: 15px 0;
    }
    
    /*-------------------------------------------------------------------------*/
    /*-----------------------ETUDE DE FAISABILITE------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    #barre-progression .texte_etape {
        display: none !important;
    }
    
    #barre-progression, #barre-progression #pourcentage, #barre-progression #pourcentage_etape_actuelle{
        height: 40px;
    }
    
    .pourcentage_barre, #barre-progression{
        left: 25px;
        width: calc(100% - 50px);
    }
    
    .section-formulaire{
        padding: 45px 0;
    }
    
    .section-formulaire .col-image{
        padding-left: 10px;
    }
    
    .step-image{
        height: 75px;
        width: 75px;
    }
    
    .step-title{
        padding-right: 10px;
    }
    
    .step-title h5{
        font-size: 1rem;
        padding: 7.5px 15px 7.5px 30px;
        top: 20px;
        left: 65px;
        width: calc(83.3% - 15px);
        height: 35px;
    }
    
    .sans-image .step-title h5{
        width: calc(100% - 20px);
        left: 10px;
        top: 25px;
    }
    
    .step-title i{
        padding-top: 0;
    }
    
    .section-formulaire .padding-form{
        padding: 15px 10px 15px 10px;
    }
    
    .section-formulaire .sans-image.padding-form{
        padding: 90px 10px 15px 10px;
    }
    
    .section-formulaire .adresse{
        font-size: 1rem;
    }
    
    .section-formulaire label.control-label{
        text-align: left;
        padding-left: 15px;
    }
    
    .col-technicien{
        padding: 0;
    }
    
    .carte_identite{
        padding: 15px 0;
        height: auto;
    }
    
    .carte_identite .col-sm-4{
        height: 250px;
    }
    
    .carte_identite .col-sm-8{
        padding: 15px;
    }
    
    .carte_identite .border-identite {
        width: 100%;
        left: 0;
    }
    
    .carte_identite .img-technicien {
        padding: 15px 0;
        width: 100%;
    }
    
    .carte_identite .border-img-identite{
        margin: auto;
    }
    
    .carte_identite .img-entreprise{
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
        margin-top: 15px;
    }
    
    /* ESPACE PARTICULIER */
    
    .tableau-de-bord-etape-titre{
        font-size: 18px;
    }
    
    .tableau-de-bord-etape-progression{
        font-size: 14px;
    }
}

/* Portrait phones only */
@media (max-width: 480px){
    
    .PC{
        display: none;
    }
    
    .mobile{
        display: block;
    }
    
    .col {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .topbar{
        margin-top: 15px;
    }
    
    .no-padding-responsive{
        padding: 0;
    }
    
    .label-checkbox{
        max-width: 80%;
    }
    
    #cookieChoiceInfo span{
        display: block;
        margin-bottom: 5px;
    }
    
    /*------------------------------------------------------------------------*/
    /*-----------------------------ACCUEIL------------------------------------*/
    /*------------------------------------------------------------------------*/
    
    #nav-fixed{
        display: none;
    }
    
    .titre-section h2, .titre-section h3, .titre-section h4{
        font-size: 1.5rem;
        padding: 10px 15px;
    }
    
    /* PRESENTATION */
    
    #profil .col-sm-6{
        margin-bottom: 30px;
    }
    
    #profil{
        padding: 45px 15px;
    }
    
    /* ACTUALITES */
    
    #actualites .grande_actu, #actualites .moyenne_actu, #actualites .petite_actu{
        padding: 0 15px;
    }

    #actualites .petite_actu .infos_actu, #actualites .moyenne_actu .infos_actu {
        padding: 15px 15px 50px 15px;
    }
    
    #actualites .grande_actu .infos_actu{
        padding: 30px 50px;
    }
    
    #actualites .grande_actu .container_img, #actualites .grande_actu img{
        height: 275px;
    }
    
    #actualites .grande_actu .infos_actu .date_actu{
        font-size: 0.8rem;
    }

    #actualites .grande_actu .infos_actu h3{
        font-size: 1.25rem;
    }

    #actualites .grande_actu .infos_actu p{
        font-size: 0.8rem;
        line-height: 1rem;
    }

    #actualites .grande_actu .infos_actu i{
        font-size: 2rem;
    }
    
    /* TEMOIGNAGES */
    
    #temoignage .col-lg-4{
        padding-left: 15px;
    }
    
    #temoignage .col-lg-4:last-child{
        margin-bottom: 0;
    }
    
    /* FOOTER */
    
    .site-footer .widget{
        margin-bottom: 30px;
    }
    
    .border-mobile{
        display: block;
    }
    
    /*
    .site-footer .col-footer .widget {
        border-right: none;
    }
    
    .site-footer .col-footer{
        border-bottom: 3px solid #8DC63F;
    }
    
    .site-footer .col-footer:last-child{
        border-bottom: none;
        background: #fff;
    }
    
    .site-footer .col-footer:last-child span, .site-footer .col-footer:last-child p, .site-footer .col-footer:last-child li{
        color: #333 !important;
    }
    */
    
    #titre-page h1{
        padding: 0 30px;
    }
    
    #contenu-page{
        padding: 30px;
    }
    
    /* COMPTEURS */
    
    #chiffres .border-chiffre {
        width: 200px;
        height: 200px;
    }
    
    #chiffres img {
        height: 65px;
    }
    
    #chiffres p, #chiffres .second-compteur span{
        font-size: 2rem;
    }
    
    #chiffres h3, #chiffres .second-compteur{
        font-size: 0.8rem;
    }
    
    /*------------------------------------------------------------------------*/
    /*------------------PAGE UN TEMOIGNAGE/UNE REALISATION--------------------*/
    /*------------------------------------------------------------------------*/
    
    #page-temoignage{
        padding: 0;
    }
    
    #page-temoignage .image-page-temoignage{
        padding: 15px 0;
    }
    
    #contenu-temoignage{
        padding: 15px 0;
    }
    
    #contenu-temoignage .col-lg-3{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #contenu-temoignage .container-photo-temoignage{
        height: 150px;
        width: 150px;
        margin: auto auto 15px auto;
    }
    
    .autre-temoignage .container-photo-temoignage{
        width: 50px;
        height: 50px;
    }
    
    #contenu-temoignage .carte-temoignage{
        max-height: 150px;
        margin: 15px auto auto auto;
    }
    
    #contenu-temoignage h1{
        font-size: 1.5rem;
    }
    
    .autre-temoignage h2{
        font-size: 0.8rem;
    }
    
    .autres-temoignages .autres-plus{
        margin: 15px auto;
    }
    
    /*-------------------------------------------------------------------------*/
    /*-----------------------PAGE NOS REALISATIONS-----------------------------*/
    /*-------------------------------------------------------------------------*/
    
    #nos-realisations .marque-centre{
        display: flex; 
        justify-content: center; 
        align-items: center;
        margin-bottom: 25px;
    }
    
    #nos-realisations .marque-centre img{
        margin: auto;
    }
    
    #nos-realisations .custom-input{
        margin-bottom: 25px !important;
    }
    
    #liste-realisation .liste{
        height: auto;
    }
    
    #immoListing_with_map{
        display: none;
    }
    
    /*-------------------------------------------------------------------------*/
    /*------------------------SECTIONS PERSONNALISEES--------------------------*/
    /*-------------------------------------------------------------------------*/
    
    .padding-section{
        padding: 60px 15px;
        background-position: top;
    }
    
    .section-faq .panel-title{
        padding: 5px 10px;
    }
    
    /*-------------------------------------------------------------------------*/
    /*-----------------------ESPACE PARTICULIER--------------------------------*/
    /*-------------------------------------------------------------------------*/
    
    .card-document{
        padding: 0.75rem;
    }
    
    .card-document .card-document-titre, .card-document .card-document-poids{
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
    }
    
    .sidebar-logo-align{
        text-align: left;
        padding: 20px 0;
    }
    
    .sidebar .logo{
        max-width: 75px;
        max-height: auto;
        margin: 0;
    }
    
    .sidebar h1{
        margin-bottom: 0;
        vertical-align: middle;
        font-size: 1.5rem;
        color: #666;
    }
    
    /* TABLEAU DE BORD */
    
    .tableau-de-bord-etape-formulaire, .tableau-de-bord-etape-formulaire a{
        font-size: 12px;
    }
    
    .tableau-de-bord-etape-formulaire{
        padding: 10px 45px 10px 20px;  
        width: calc(100% - 15px);
    }
    
    .tableau-de-bord-etape-formulaire-icone{
        font-size: 22px;
        height: 34px;
    }
    
    .tableau-de-bord-etape-formulaire-icone i
    {
      font-size: 22px;
      line-height: 34px;
    }
    
    .tableau-de-bord-etape-texte{
        width: calc(100% - 50px);
    }
    
    .tableau-de-bord-etape-lien, .tableau-de-bord-etape-lien-long{
        top: 50px;
        left: 25px;
    }
    
    .tableau-de-bord-etape-numero{
        width: 50px;
        height: 50px;
    }
    
    .tableau-de-bord-etape-numero i{
        font-size: 24px;
    }
    
    .order-2-mobile{
        order: 2;
    }
}

@media (min-width: 992px) and (max-width: 1300px) {
    .logo-france-renov-1{
        height: auto !important;
        max-width: 125px;
        margin-top: 20px;
    }
    
    .logo-france-renov-2{
        max-height: 50px;
        margin-top: 25px;
    }
}

@media (min-width: 1301px) and (max-width: 1570px) {
    .logo-france-renov-1{
        height: auto !important;
        max-width: 150px;
        margin-top: 10px;
    }
    
    .logo-france-renov-2{
        max-height: 50px;
        margin-top: 25px;
    }
}