/*--------------------------------------------------------*\
    1280PX
\*--------------------------------------------------------*/

@media only screen and (max-width:1280px) {
    .wrapper{
        padding-left: 30px!important;
        padding-right: 30px!important;
    }

    .navigation ul li a{
        font-size: 20px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide h4{
        font-size: 20px;
        line-height: 22px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide h3{
        font-size: 30px;
        line-height: 34px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .texte{
        font-size: 36px;
        line-height: 50px;
        margin-left: 80px;
        /* padding-right: 100px; */
    }

    section.pourconstruire .contenu .row_2 .slider .slide .complement{
      padding-left: 30px;
    }
}

/*--------------------------------------------------------*\
    1140PX
\*--------------------------------------------------------*/

@media only screen and (max-width:1140px) {
    .titres a{
        font-size: 45px;
    }

    section.wendel .contenu .slide .titre_image .image{
        width: 300px;
        height: 400px;
    }

    section.wendel .contenu .texte h2{
        font-size: 40px;
        margin-bottom: 45px;
        line-height: 45px;
    }

    section.wendel .contenu .texte h3{
        font-size: 16px;
    }

    section.temps_fort .contenu .row_2 .slider .slide .image{
        width: 360px;
        height: 260px;
    }

    section.temps_fort .contenu .row_2 .slider{
        max-width: 750px;
    }

    section.temps_fort .contenu .row_2 .slider .slide{
        min-height: 450px;
    }

    section.temps_fort .mois ul li, section.temps_fort .contenu .row_2 .slider .slick-dots button{
        font-size: 13px;
    }

    section.sengage .contenu .slider .slide p{
        font-size: 49px;
    }

    a.button{
        min-width: 225px;
        height: max-content;
    }

    section.pourconstruire .contenu .row_1 h2{
        padding-right: 30px;
    }

    section.temps_fort, section.temps_fort .contenu{
      height: auto;
      min-height: 0;
    }


    .en .titres a{
      font-size: 38px;
      /* line-height: 47px; */
    }
}

/*--------------------------------------------------------*\
    940PX
\*--------------------------------------------------------*/

@media only screen and (max-width:940px) {
    section.temps_fort .contenu .row_2 .slider .slide{
        -webkit-flex-direction       :column;
            -ms-flex-direction       :column;
                flex-direction       :column;
    }

    section.temps_fort .contenu .row_2 .slider .slide .texte{
        margin-left: 0;
        margin-top: 20px;
    }

    section.temps_fort .contenu .row_2 .slider .slide .image{
        width: 100%;
        max-width: 500px;
        height: auto;
    }

    section.temps_fort .contenu .row_2 .slider .slide .texte{
        width: 100%;
        max-width: 500px;
    }

    section.temps_fort .contenu .row_2 .slider{
        max-width: 600px;
    }

    section.temps_fort .mois ul, section.temps_fort .slick-dots{
        -webkit-flex-wrap            :wrap;
    		-ms-flex-wrap            :wrap;
    			flex-wrap            :wrap;
    }


    section.temps_fort .mois ul li:before, section.temps_fort .slick-dots li:before{
        display: none;
    }

    section.temps_fort .mois ul li, section.temps_fort .contenu .row_2 .slider .slick-dots button{
        margin: 0 15px 10px 15px;
    }

    .titres a{
        font-size: 35px;
        /* line-height: 38px; */
    }

    .en .titres a{
        font-size: 31px;
        /* line-height: 33px; */
    }

    header .row_2{
        padding: 0 20px;
    }

    .titres{
      height: 650px;
      min-height: 0;
    }

    section.wendel, section.wendel .contenu, section.sengage, section.sengage .contenu{
      height: auto;
      min-height: 0;
    }


    section.pourconstruire .contenu .row_2 .slider .slide .texte{
        margin-left: 60px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide{
        min-height: 0;
        height: auto;
        padding-bottom: 50px;
    }

    section.pourconstruire .slick-arrow.slick-next{
        right: 20px;
    }

    section.pourconstruire .contenu .row_2 .slider .slick-prev{
        left: 20px;
    }


}



/*--------------------------------------------------------*\
    770PX
\*--------------------------------------------------------*/

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



    .navigation ul li{
        display: none;
    }

    .navigation ul li.current{
        display: block;
    }

    section.wendel .contenu .slide{
        display: block;
    }

    section.wendel .contenu .slide .texte{
        margin-top: 50px;
    }

    section.wendel .contenu .slide .titre_image .image{
        width: 250px;
        height: 350px;
    }

    section.wendel .contenu .texte h2{
        font-size: 35px;
        line-height: 40px;
    }

    section.sengage .contenu{
        padding: 25px 0 60px 0;
    }

    section.sengage .contenu .slider .slide p{
        font-size: 30px;
        line-height: 34px;
    }

    section.sengage .contenu .slider .slide h2{
        font-size: 14px;
    }

    section.pourconstruire .contenu .row_1 h2{
        font-size: 30px;
    }

    section.temps_fort .contenu .row_2 .slider .slide{
        min-height: 0;
    }

    section.temps_fort .contenu .row_2 .slider{
        max-width: 70%;
    }


    section.pourconstruire .contenu .row_2 .slider .slide .texte{
        font-size: 30px;
        line-height: 35px;
    }

    .titres{
        height: 430px;
    }

    .trait_droit{
        top: 40px;
        margin-right: -300px;
    }

    .trait_gauche{
        bottom: 40px;
        margin-left: -300px;
    }

    .titres a, .en .titres a{
        font-size: 25px;
        line-height: 27px;
        display: block;
        margin: 10px 0;
        /* display: inline-block; */
    }

    .titres p{
        padding: 0 15px;
        line-height: 42px;
    }

}

/*--------------------------------------------------------*\
    680PX
\*--------------------------------------------------------*/

@media only screen and (max-width:680px) {
    section.temps_fort .contenu h2{
        font-size: 20px;
    }

    section.wendel .slick-next, section.sengage .slick-next{
        font-size: 0;
        color: transparent;
        min-width: 50px;
        padding-left:15px;
    }

    section.wendel .slick-next i, section.sengage .slick-next i{
        font-size: 30px;
        color: #526a80;
    }

    section.sengage .slick-next i{
        color: #fff;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .wrapper{
        display: block;
        padding-bottom: 50px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .texte{
        /* padding-right: 50px; */
        margin-top: 50px;
        margin-left: 0;

        font-size: 25px;
        line-height: 30px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .complement{
        position: static;
        margin-top: 50px;
    }


    header .row_2 .logo{
        width: 140px;
        height: auto;
    }

    header .row_2 .logo img{
        width: 100%;
        height: auto;
    }

    .lang{
        width: 140px;
    }

    h1{
        width: 140px;
        font-size: 16px;
        line-height: 18px;
    }

    header .retour{
        margin-left: 30px;
        font-size: 14px;
    }

    header .telecharger{
        width: auto;
        padding: 0 20px;
        font-size: 14px;
    }

    section.temps_fort .contenu .row_1, section.pourconstruire .contenu .row_1{
        margin-top: 0;
        display: block;
        text-align: center;
    }

    section.temps_fort .contenu h2, section.pourconstruire .contenu .row_1 h2{
        text-align: center;
        padding-right: 0;
        margin-bottom: 10px;
    }

    section.pourconstruire .contenu .row_1{
        padding-bottom: 50px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .complement{
        padding-left: 0;
    }

    footer .row_1{
        padding: 20px 30px;
    }


}

/*--------------------------------------------------------*\
    480PX
\*--------------------------------------------------------*/

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

    header .row_1{
        display: block;
        height: 70px;
    }

    header .retour{
        display: block;
        margin-left: 0;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }

    header .telecharger{
        display: block;
        height: 35px;
        line-height: 35px;
    }

    .lang, h1, header .row_2 .logo{
        width: auto;
    }

    h1{
        text-align: right;
    }

    header .row_2 .logo img{
        width: 100px;
    }

    .titres a{
        font-size: 25px;
        line-height: 25px;
    }

    .en .titres a{
        font-size: 22px;
        line-height: 23px;
    }

    .titres p{
        line-height: 45px;
    }

    footer .logo img{
        width: 100px;
    }

    section.temps_fort .contenu .row_2 .slider{
        max-width: 100%;
    }

    section.temps_fort .mois ul, section.temps_fort .slick-dots{
        display: block;
        text-align: center;
    }

    section.temps_fort .slick-arrow{
        display: none!important;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .wrapper{
        width: 70%;
    }

    section.pourconstruire .slick-arrow.slick-next{
        right: 15px;
    }

    section.pourconstruire .contenu .row_2 .slider .slick-prev{
        left: 15px;
    }

    section.pourconstruire .contenu .row_2 .slider .slick-prev:before{
        width: 40px;
    }

    section.pourconstruire .contenu .row_2 .slider .slick-next:before{
        width: 40px;
    }

}

/*--------------------------------------------------------*\
    390PX
\*--------------------------------------------------------*/

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

    section.wendel .contenu .slide .titre_image .image{
        width: 200px;
        height: 300px;
    }

    section.wendel .contenu .slide .titre_image p strong{
        font-size: 18px;
    }

    section.wendel .contenu .slide .titre_image p span{
        font-size: 14px;
        line-height: 15px;
        display: inline-block;
    }

    section.wendel .contenu .texte h2{
        font-size: 25px;
        line-height: 30px;
    }

    a.button{
        font-size: 12px;
    }

    section.sengage .contenu .slider .slide p{
        font-size: 25px;
        line-height: 29px;
    }

    section.temps_fort .contenu h2, section.pourconstruire .contenu .row_1 h2{
        font-size: 25px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .texte{
        font-size: 24px;
        line-height: 28px;
    }

    section.pourconstruire .contenu .row_2 .slider .slide .texte .auteur_position p{
        font-size: 15px;
    }

    header .row_2{
        padding: 0 10px;
    }

    .titres{
        height: 330px;
    }

    .trait_droit{
        top: -10px;
    margin-right: -300px;
    }

    .trait_gauche{
        bottom: -10px;
        margin-left: -300px;
    }


}

/*--------------------------------------------------------*\
    340PX
\*--------------------------------------------------------*/

@media only screen and (max-width:340px) {
    h1{
        font-size: 14px;
    }

    a.button{
        min-width: 0;
    }
}