/*Fonts*/
@font-face {
    font-family: 'montserratbold';
    src: url('../font/montserrat-bold-webfont.woff2') format('woff2'), url('montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratmedium';
    src: url('../font/montserrat-medium-webfont.woff2') format('woff2'), url('montserrat-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratregular';
    src: url('../font/montserrat-regular-webfont.woff2') format('woff2'), url('montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratsemibold';
    src: url('../font/montserrat-semibold-webfont.woff2') format('woff2'), url('montserrat-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*Suppression de l'ombrage au focus de l'input ou du contour*/
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
textarea:focus,
button:focus,
a:focus,
select:focus,
[tabindex="-1"]:focus,
.uneditable-input:focus {
    border-color: none;
    box-shadow: none !important;
    outline: 0 none;
}


/* Extra small devices (portrait phones, less than 576px) */
body {
    font-family: 'montserratregular', Arial, Helvetica, sans-serif;
}

nav {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.bg-light {
    background-color: #fff !important;
}

.custom-nav {
    height: 95px;
    position: fixed;
    width: 100%;
    z-index: 20;
}

.lien-redirection {
    color: #3C8C03;
}

.lien-redirection:hover,.lien-redirection:focus,.lien-redirection:active {
    color: #3C8C03;
}

footer {
    margin: 20px 0px;
    text-align: center;
}

#isolation-combles, #baguetteBox-figure-3 img {
    transform: rotate(-90deg);
}

.lightbox {
    overflow: hidden;
}

.logo-mentions {
    margin: 0 0 50px 50% !important;
    transform: translateX(-50%) !important;
}

.mention-link {
    color: #3C8C03;
}

.mention-link:hover {
    color: #3C8C03;
}

.navbar-collapse .navbar-nav:nth-of-type(2) {
    display: none;
}

.navbar-nav {
    background: #fff;
    padding: 25px;
    margin-top: -2px;
}

.navbar-brand {
    margin: 0px;
}

/*Classe pour le menu dynamique*/
.nav-up {
    top: -150px;
}

.menu-link {
    color: rgba(0,0,0,1) !important;
    display: inline-block;
    font-family: 'montserratmedium', Arial, Helvetica, sans-serif;
    margin-right: 35px;
    width: 180px;
    text-align: left;
}

    .menu-link:hover {
        color: #3C8C03 !important;
        font-family: montserratsemibold, Arial, Helvetica, sans-serif;
    }

/*___Retour vers le haut___*/
.cRetour {
    border-radius: 3px;
    padding: 10px;
    font-size: 0.9375rem;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
    z-index: 99999;
    transition: all ease-in 0.2s;
    position: fixed;
    cursor: pointer;
    bottom: 1em;
    right: 20px;
    display: none;
}

    .cRetour:before {
        content: "\25b2";
    }

    .cRetour:hover {
        background: rgba(0, 0, 0, 1);
        transition: all ease-in 0.2s;
    }
/*___*/


/*____Page d'intro____*/
.first-part {
    background: url(../images/cork-bark.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    min-height: 100vh;
}

.logo-content {
    height: 393px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 380px;
}
/*___________________*/





/*____La soci�t� ECOLIEGE____*/
#entreprise h3 {
    color: #fff;
    border: 4px solid #fff;
    border-left: 2px solid #3C8C03;
    border-right: 2px solid #3C8C03;
    font-size: 2.25rem;
    font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    left: 0px;
    right: 0px;
    padding: 33px;
    position: initial;
    text-align: center;
    top: 40px;
}

.entreprise-section {
    color: #fff;
    margin-top: auto !important;
}

.logo-blc {
    height: auto;
    width: auto;
}

.logo-content h4 {
    color: #fff;
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
}

/*Transitions de page fa�on �corce*/
.first-part:after {
    background: url(../images/edge-top-grn.png);
    position: absolute;
    margin-top: 98vh;
    z-index: 5;
}

.third-part:before {
    background: url(../images/edge-bot-grn.png);
    margin-top: -12px;
    z-index: 5;
}

.third-part:before, .first-part:after {
    content: "";
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    width: 100%;
    height: 160px;
}
/*fin de gestion de transition*/

.second-part {
    background-color: #3C8C03;
    height: 100%;
    min-height: 70vh;
    position: relative;
}

.title {
    margin-top: 70px;
}

.content-text {
    margin-top: 70px;
}
/*___________________*/


/*____Caracteristiques Techniques____*/
.table > tbody > tr > td, .table > thead > tr > th {
     vertical-align: middle;
}

.table > tbody > tr > td hr {
    margin-left: -.75rem;
    margin-right: -.75rem; 
}
/*___________________*/



/*____Nos produits____*/

/*Carousel*/
.carousel-caption {
    height: 100%;
}

    .carousel-caption h4 {
        color: #3C8C03;
        font-family: 'montserratbold', Arial, Helvetica, sans-serif;
        font-size: 1.875rem;
        margin-bottom: 25px;
    }

    .carousel-caption p {
        font-size: 1.125rem;
    }

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 57px;
    height: 138px;
}

.carousel-control-next-icon {
    background: url(../images/next.svg);
    background-repeat: no-repeat;
    background-size: auto;
}

.carousel-control-prev-icon {
    background: url(../images/prev.svg);
    background-repeat: no-repeat;
    background-size: auto;
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    margin: 10% 0;
    padding: 0px 17%;
}

    .carousel-item img {
        width: 100%;
        height: 304px;
        object-fit: cover;
    }

#carouselProduct {
    height: 60vh;
}

.carousel-text {
    color: #000;
    margin-top: auto;
    margin-bottom: auto;
    text-align: left;
}

.carousel-left {
    float: left;
    width: 75%;
}
/*--------*/

#products h3 {
    color: #000;
    border: 4px solid #000;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    font-size: 2.25rem;
    font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    left: 0px;
    right: 0px;
    padding: 33px;
    text-align: center;
    top: 100px;
}

.third-part {
    background-color: #fff;
    height: 100%;
    min-height: 100vh;
    position: relative;
}
/*___________________*/





/*____Gallerie____*/
#gallery h3 {
    color: #fff;
    border: 4px solid #fff;
    border-left: 2px solid #3C8C03;
    border-right: 2px solid #3C8C03;
    font-size: 2.25rem;
    font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    left: 0px;
    right: 0px;
    padding: 33px;
    text-align: center;
    top: 80px;
}

.card {
    background-color: none;
    border: none;
    border-radius: initial;
}

.card-img-top {
    border-radius: 0px;
    height: 261px;
    object-fit: cover;
}

.gallery-container {
    margin-top: 320px;
}

.fourth-part {
    background-color: #3C8C03;
    height: 100%;
    min-height: 100vh;
    position: relative;
}

    .fourth-part .col-md-3 {
        padding: 0px !important;
    }
/*___________________*/

/*Modal*/
.close {
    font-size: 2rem;
    font-family: montserratsemibold, Arial, Helvetica, sans-serif;
}

.modal-dialog {
    max-width: 700px;
}

.modal-header {
    border-bottom: none;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: 0px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Google map*/
.mapouter {
    overflow: hidden;
    height: 300px;
    width: 100%;
    margin-left: 50%;
    margin-bottom: 50px;
    transform: translateX(-50%);
}

.gmap_canvas {
    background: none !important;
    height: 300px;
    width: 600px;
}

/*Donn�es modal*/
.logo-modal {
    width: 150px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.coordonnees {
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}
/*----*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    body {
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    }

    nav {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .contact-link {
        color: #fff;
        font-family: 'montserratbold', Arial, Helvetica, sans-serif;
    }

        .contact-link:hover {
            color: #593621;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
        }

    .custom-nav {
        height: 95px;
        z-index: 20;
    }

    .navbar-brand {
        margin: 0 87px;
    }

    /*Classe pour le menu dynamique*/
    .nav-up {
        top: -150px;
    }

    .menu-link {
        color: rgba(0,0,0,1) !important;
        display: inline-block;
        font-family: 'montserratmedium', Arial, Helvetica, sans-serif;
        margin-right: 35px;
        width: 180px;
        text-align: center;
    }

        .menu-link:hover {
            color: #3C8C03 !important;
            font-family: montserratsemibold, Arial, Helvetica, sans-serif;
        }

    .cRetour {
        border-radius: 3px;
        padding: 10px;
        font-size: 0.9375rem;
        text-align: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.25);
        z-index: 99999;
        transition: all ease-in 0.2s;
        position: fixed;
        cursor: pointer;
        bottom: 1em;
        right: 20px;
        display: none;
    }

        .cRetour:before {
            content: "\25b2";
        }

        .cRetour:hover {
            background: rgba(0, 0, 0, 1);
            transition: all ease-in 0.2s;
        }



    /*____Page d'intro____*/
    .first-part {
        background: url(../images/cork-bark.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        min-height: 100vh;
    }
    /*___________________*/


    /*____Caract�ristiques____*/
    .caract-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .caract-part:before {
            background: url(../images/edge-bot-grn.png);
            margin-top: -8px;
            z-index: 5;
            content: "";
            background-size: 100%;
            background-repeat: no-repeat;
            display: block;
            width: 100%;
            height: 120px;
        }

    #caracteristiques h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    #caracteristiques-container {
        margin-top: 0px;
    }

    /*___________________*/


    /*____La soci�t� ECOLIEGE____*/
    #entreprise h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .entreprise-section {
        color: #fff;
    }

    .logo-blc {
        height: auto;
        width: auto;
    }

    .logo-content h4 {
        color: #fff;
        margin-top: 30px;
        text-align: center;
        text-transform: uppercase;
    }

    /*Transitions de page fa�on �corce*/
    .first-part:after {
        background: url(../images/edge-top-grn.png);
        position: absolute;
        margin-top: 98vh;
        z-index: 5;
    }

    .third-part:before {
        background: url(../images/edge-top-grn.png);
        margin-top: -15px;
        z-index: 5;
    }

    .third-part:before, .first-part:after {
        content: "";
        background-size: 100%;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 120px;
    }
    /*fin de gestion de transition*/

    .second-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 70vh;
        position: relative;
    }

    .title {
        margin-top: 70px;
    }

    .content-text {
        margin-top: 70px;
    }
    /*___________________*/





    /*____Nos produits____*/

    /*Carousel*/
    .carousel-caption {
        float: left;
    }

        .carousel-caption h4 {
            color: #fff;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
            font-size: 1.875rem;
            margin-bottom: 25px;
        }

        .carousel-caption p {
            font-size: 1.125rem;
        }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 57px;
        height: 138px;
    }

    .carousel-control-next-icon {
        background: url(../images/next_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-control-prev-icon {
        background: url(../images/prev_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-item {
        margin: 10% 0;
        padding: 0px 17%;
    }

        .carousel-item img {
            width: 304px;
            height: 304px;
        }

    #carouselProduct {
        height: 60vh;
        width: 100%;
    }

    .carousel-left {
        width: 75%;
        float: left;
    }

    .carousel-text {
        color: #fff;
        margin-top: auto;
        margin-bottom: auto;
        text-align: left;
    }
    /*--------*/

    #products h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .third-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .third-part p {
            color: #fff;
        }
    /*___________________*/





    /*____Gallerie____*/

    /*Library*/
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #BD8D5D;
    }

    .card {
        background-color: #BD8D5D;
    }

    .text-overlay {
        color: white;
        font-size: 1.25rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    .card:hover .overlay {
        opacity: 0.9;
    }
    /*---*/

    #gallery h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .card-img-top {
        border-radius: 0px;
        height: 261px;
        object-fit: cover;
    }

    .gallery-container {
        margin-top: 320px;
    }

    .fourth-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .fourth-part .col-md-3 {
            padding: 0px !important;
        }
    /*___________________*/


    /*Modal*/
    .close {
        font-size: 2rem;
        font-family: montserratsemibold, Arial, Helvetica, sans-serif;
    }

    .modal-dialog {
        max-width: 700px;
    }

    .modal-header {
        border-bottom: none;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: 0px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.left.fade.in .modal-dialog {
        left: 0;
    }

    /*Google map*/
    .mapouter {
        overflow: hidden;
        height: 300px;
        width: 600px;
        margin-left: 50%;
        margin-bottom: 50px;
        transform: translateX(-50%);
    }

    .gmap_canvas {
        background: none !important;
        height: 300px;
        width: 600px;
    }

    /*Donn�es modal*/
    .logo-modal {
        width: 150px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .coordonnees {
        margin-bottom: 50px;
        margin-top: 50px;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }
    /*----*/
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    }

    nav {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .contact-link {
        color: #fff;
        font-family: 'montserratbold', Arial, Helvetica, sans-serif;
    }

        .contact-link:hover {
            color: #593621;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
        }

    .custom-nav {
        height: 95px;
        z-index: 20;
    }

    .navbar-brand {
        margin: 0 87px;
    }

    /*Classe pour le menu dynamique*/
    .nav-up {
        top: -150px;
    }

    .menu-link {
        color: rgba(0,0,0,1) !important;
        display: inline-block;
        font-family: 'montserratmedium', Arial, Helvetica, sans-serif;
        margin-right: 35px;
        width: 180px;
        text-align: center;
    }

        .menu-link:hover {
            color: #3C8C03 !important;
            font-family: montserratsemibold, Arial, Helvetica, sans-serif;
        }

    .cRetour {
        border-radius: 3px;
        padding: 10px;
        font-size: 0.9375rem;
        text-align: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.25);
        z-index: 99999;
        transition: all ease-in 0.2s;
        position: fixed;
        cursor: pointer;
        bottom: 1em;
        right: 20px;
        display: none;
    }

        .cRetour:before {
            content: "\25b2";
        }

        .cRetour:hover {
            background: rgba(0, 0, 0, 1);
            transition: all ease-in 0.2s;
        }



    /*____Page d'intro____*/
    .first-part {
        background: url(../images/cork-bark.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        min-height: 100vh;
    }
    /*___________________*/


    /*____Caract�ristiques____*/
    .caract-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .caract-part:before {
            background: url(../images/edge-bot-grn.png);
            margin-top: -42px;
            z-index: 5;
            content: "";
            background-size: 100%;
            background-repeat: no-repeat;
            display: block;
            width: 100%;
            height: 120px;
        }

    #caracteristiques h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    #caracteristiques-container {
        margin-top: 0px;
    }

    /*___________________*/


    /*____La soci�t� ECOLIEGE____*/
    #entreprise h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .entreprise-section {
        color: #fff;
    }

    .logo-blc {
        height: auto;
        width: auto;
    }

    .logo-content h4 {
        color: #fff;
        margin-top: 30px;
        text-align: center;
        text-transform: uppercase;
    }

    /*Transitions de page fa�on �corce*/
    .first-part:after {
        background: url(../images/edge-top-grn.png);
        position: absolute;
        margin-top: 95vh;
        z-index: 5;
    }

    .third-part:before {
        background: url(../images/edge-top-grn.png);
        margin-top: -42px;
        z-index: 5;
    }

    .third-part:before, .first-part:after {
        content: "";
        background-size: 100%;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 120px;
    }
    /*fin de gestion de transition*/

    .second-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 70vh;
        position: relative;
    }

    .title {
        margin-top: 70px;
    }

    .content-text {
        margin-top: 70px;
    }
    /*___________________*/





    /*____Nos produits____*/

    /*Carousel*/
    .carousel-caption {
        float: left;
    }

        .carousel-caption h4 {
            color: #fff;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
            font-size: 1.875rem;
            margin-bottom: 25px;
        }

        .carousel-caption p {
            font-size: 1.125rem;
        }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 57px;
        height: 138px;
    }

    .carousel-control-next-icon {
        background: url(../images/next_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-control-prev-icon {
        background: url(../images/prev_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-item {
        margin: 10% 0;
        padding: 0px 17%;
    }

        .carousel-item img {
            width: 304px;
            height: 304px;
        }

    #carouselProduct {
        height: 60vh;
        width: 100%;
    }

    .carousel-left {
        width: 75%;
        float: left;
    }

    .carousel-text {
        color: #fff;
        margin-top: auto;
        margin-bottom: auto;
        text-align: left;
    }
    /*--------*/

    #products h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .third-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .third-part p {
            color: #fff;
        }
    /*___________________*/





    /*____Gallerie____*/

    /*Library*/
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #BD8D5D;
    }

    .text-overlay {
        color: white;
        font-size: 1.25rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    .card:hover .overlay {
        opacity: 0.9;
    }
    /*---*/

    #gallery h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .card-img-top {
        border-radius: 0px;
        height: 261px;
        object-fit: cover;
    }

    .gallery-container {
        margin-top: 320px;
    }

    .fourth-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .fourth-part .col-md-3 {
            padding: 0px !important;
        }
    /*___________________*/


    /*Modal*/
    .close {
        font-size: 2rem;
        font-family: montserratsemibold, Arial, Helvetica, sans-serif;
    }

    .modal-dialog {
        max-width: 700px;
    }

    .modal-header {
        border-bottom: none;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: 0px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.left.fade.in .modal-dialog {
        left: 0;
    }

    /*Google map*/
    .mapouter {
        overflow: hidden;
        height: 300px;
        width: 600px;
        margin-left: 50%;
        margin-bottom: 50px;
        transform: translateX(-50%);
    }

    .gmap_canvas {
        background: none !important;
        height: 300px;
        width: 600px;
    }

    /*Donn�es modal*/
    .logo-modal {
        width: 150px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .coordonnees {
        margin-bottom: 50px;
        margin-top: 50px;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }
    /*----*/
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    }

    nav {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .contact-link {
        color: #fff;
        font-family: 'montserratbold', Arial, Helvetica, sans-serif;
    }

        .contact-link:hover {
            color: #593621;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
        }

    .custom-nav {
        height: 95px;
        z-index: 20;
    }

    .navbar-brand {
        margin: 0 87px;
    }

    /*Classe pour le menu dynamique*/
    .nav-up {
        top: -150px;
    }

    .menu-link {
        color: rgba(0,0,0,1) !important;
        display: inline-block;
        font-family: 'montserratmedium', Arial, Helvetica, sans-serif;
        margin-right: 35px;
        width: 180px;
        text-align: center;
    }

        .menu-link:hover {
            color: #3C8C03 !important;
            font-family: montserratsemibold, Arial, Helvetica, sans-serif;
        }

    .cRetour {
        border-radius: 3px;
        padding: 10px;
        font-size: 0.9375rem;
        text-align: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.25);
        z-index: 99999;
        transition: all ease-in 0.2s;
        position: fixed;
        cursor: pointer;
        bottom: 1em;
        right: 20px;
        display: none;
    }

        .cRetour:before {
            content: "\25b2";
        }

        .cRetour:hover {
            background: rgba(0, 0, 0, 1);
            transition: all ease-in 0.2s;
        }



    /*____Page d'intro____*/
    .first-part {
        background: url(../images/cork-bark.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        min-height: 100vh;
    }
    /*___________________*/


    /*____Caract�ristiques____*/
    .caract-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .caract-part:before {
            background: url(../images/edge-bot-grn.png);
            margin-top: -42px;
            z-index: 5;
            content: "";
            background-size: 100%;
            background-repeat: no-repeat;
            display: block;
            width: 100%;
            height: 120px;
        }

    #caracteristiques h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    #caracteristiques-container {
        margin-top: 0px;
    }

    /*___________________*/


    /*____La soci�t� ECOLIEGE____*/
    #entreprise h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .entreprise-section {
        color: #fff;
    }

    .logo-blc {
        height: auto;
        width: auto;
    }

    .logo-content h4 {
        color: #fff;
        margin-top: 30px;
        text-align: center;
        text-transform: uppercase;
    }

    /*Transitions de page fa�on �corce*/
    .first-part:after {
        background: url(../images/edge-top-grn.png);
        position: absolute;
        margin-top: 95vh;
        z-index: 5;
    }

    .third-part:before {
        background: url(../images/edge-top-grn.png);
        margin-top: -42px;
        z-index: 5;
    }

    .third-part:before, .first-part:after {
        content: "";
        background-size: 100%;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 120px;
    }
    /*fin de gestion de transition*/

    .second-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 70vh;
        position: relative;
    }

    .title {
        margin-top: 70px;
    }

    .content-text {
        margin-top: 70px;
    }
    /*___________________*/





    /*____Nos produits____*/

    /*Carousel*/
    .carousel-caption {
        float: left;
    }

        .carousel-caption h4 {
            color: #fff;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
            font-size: 1.875rem;
            margin-bottom: 25px;
        }

        .carousel-caption p {
            font-size: 1.125rem;
        }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 57px;
        height: 138px;
    }

    .carousel-control-next-icon {
        background: url(../images/next_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-control-prev-icon {
        background: url(../images/prev_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-item {
        margin: 10% 0;
        padding: 0px 17%;
    }

        .carousel-item img {
            width: 304px;
            height: 304px;
        }

    #carouselProduct {
        height: 60vh;
        width: 100%;
    }

    .carousel-left {
        width: 75%;
        float: left;
    }

    .carousel-text {
        color: #fff;
        margin-top: auto;
        margin-bottom: auto;
        text-align: left;
    }
    /*--------*/

    #products h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .third-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .third-part p {
            color: #fff;
        }
    /*___________________*/





    /*____Gallerie____*/

    /*Library*/
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #BD8D5D;
    }

    .text-overlay {
        color: white;
        font-size: 1.25rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    .card:hover .overlay {
        opacity: 0.9;
    }
    /*---*/

    #gallery h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .card-img-top {
        border-radius: 0px;
        height: 261px;
        object-fit: cover;
    }

    .gallery-container {
        margin-top: 320px;
    }

    .fourth-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

        .fourth-part .col-md-3 {
            padding: 0px !important;
        }
    /*___________________*/


    /*Modal*/
    .close {
        font-size: 2rem;
        font-family: montserratsemibold, Arial, Helvetica, sans-serif;
    }

    .modal-dialog {
        max-width: 700px;
    }

    .modal-header {
        border-bottom: none;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: 0px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.left.fade.in .modal-dialog {
        left: 0;
    }

    /*Google map*/
    .mapouter {
        overflow: hidden;
        height: 300px;
        width: 600px;
        margin-left: 50%;
        margin-bottom: 50px;
        transform: translateX(-50%);
    }

    .gmap_canvas {
        background: none !important;
        height: 300px;
        width: 600px;
    }

    /*Donn�es modal*/
    .logo-modal {
        width: 150px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .coordonnees {
        margin-bottom: 50px;
        margin-top: 50px;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }
    /*----*/
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
    }

    nav {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .contact-link {
        color: #fff;
        font-family: 'montserratbold', Arial, Helvetica, sans-serif;
    }

        .contact-link:hover {
            color: #593621;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
        }

    .custom-nav {
        height: 95px;
        z-index: 20;
    }

    .navbar-brand {
        margin: 0 87px;
    }

    /*Classe pour le menu dynamique*/
    .nav-up {
        top: -150px;
    }

    .menu-link {
        color: rgba(0,0,0,1) !important;
        display: inline-block;
        font-family: 'montserratmedium', Arial, Helvetica, sans-serif;
        margin-right: 35px;
        width: 180px;
        text-align: center;
    }

    .menu-link:hover {
        color: #3C8C03 !important;
        font-family: montserratsemibold, Arial, Helvetica, sans-serif;
    }

    .cRetour {
        border-radius: 3px;
        padding: 10px;
        font-size: 0.9375rem;
        text-align: center;
        color: #fff;
        background: rgba(0, 0, 0, 0.25);
        z-index: 99999;
        transition: all ease-in 0.2s;
        position: fixed;
        cursor: pointer;
        bottom: 1em;
        right: 20px;
        display: none;
    }
.cRetour:before{ content: "\25b2"; }
        .cRetour:hover {
            background: rgba(0, 0, 0, 1);
            transition: all ease-in 0.2s;
        }



    /*____Page d'intro____*/
    .first-part {
        background: url(../images/cork-bark.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        min-height: 100vh;
    }
    /*___________________*/


    /*____Caract�ristiques____*/
    .caract-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

    .caract-part:before {
        background: url(../images/edge-bot-grn.png);
        margin-top: -42px;
        z-index: 5;
        content: "";
        background-size: 100%;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 120px;
    }

    #caracteristiques h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    #caracteristiques-container {
        margin-top: 0px;
    }

    /*___________________*/


    /*____La soci�t� ECOLIEGE____*/
    #entreprise h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .entreprise-section {
        color: #fff;
    }

    .logo-blc {
        height: auto;
        width: auto;
    }

    .logo-content h4 {
        color: #fff;
        margin-top: 30px;
        text-align: center;
        text-transform: uppercase;
    }

    /*Transitions de page fa�on �corce*/
    .first-part:after {
        background: url(../images/edge-top-grn.png);
        position: absolute;
        margin-top: 95vh;
        z-index: 5;
    }

    .third-part:before {
        background: url(../images/edge-top-grn.png);
        margin-top: -42px;
        z-index: 5;
    }

    .third-part:before, .first-part:after {
        content: "";
        background-size: 100%;
        background-repeat: no-repeat;
        display: block;
        width: 100%;
        height: 120px;
    }
    /*fin de gestion de transition*/

    .second-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 70vh;
        position: relative;
    }

    .title {
        margin-top: 70px;
    }

    .content-text {
        margin-top: 70px;
    }
    /*___________________*/





    /*____Nos produits____*/

        /*Carousel*/
    .carousel-caption {
        float: left;
    }

        .carousel-caption h4 {
            color: #fff;
            font-family: 'montserratbold', Arial, Helvetica, sans-serif;
            font-size: 1.875rem;
            margin-bottom: 25px;
        }

        .carousel-caption p {
            font-size: 1.125rem;
        }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        width: 57px;
        height: 138px;
    }

    .carousel-control-next-icon {
        background: url(../images/next_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

    .carousel-control-prev-icon {
        background: url(../images/prev_w.svg);
        background-repeat: no-repeat;
        background-size: auto;
    }

        .carousel-item {
            margin: 10% 0;
            padding: 0px 17%;
        }

        .carousel-item img {
            width: 304px;
            height: 304px;
        }

        #carouselProduct {
            height: 60vh;
            width: 100%;
        }

        .carousel-left {
            width: 75%;
            float: left;
        }

        .carousel-text {
            color: #fff;
            margin-top: auto;
            margin-bottom: auto;
            text-align: left;
        }
        /*--------*/

    #products h3 {
        color: #fff;
        border: 4px solid #fff;
        border-left: 2px solid #3C8C03;
        border-right: 2px solid #3C8C03;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .third-part {
        background-color: #3C8C03;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

    .third-part p {
        color: #fff;
    }
    /*___________________*/
    




    /*____Gallerie____*/

    /*Library*/
    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: .5s ease;
        background-color: #BD8D5D;
    }

    .text-overlay {
        color: white;
        font-size: 1.25rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    .card:hover .overlay {
        opacity: 0.9;
    }
    /*---*/

    #gallery h3 {
        color: #000;
        border: 4px solid #000;
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        font-size: 2.25rem;
        font-family: 'montserratregular', Arial, Helvetica, sans-serif;
        left: 30%;
        right: 30%;
        padding: 33px;
        text-align: center;
        top: 122px;
    }

    .card-img-top {
        border-radius: 0px;
        height: 261px;
        object-fit: cover;
    }

    .gallery-container {
        margin-top: 320px;
    }

    .fourth-part {
        background-color: #fff;
        height: 100%;
        min-height: 100vh;
        position: relative;
    }

    .fourth-part .col-md-3 {
        padding: 0px !important;
    }
    /*___________________*/


    /*Modal*/
    .close {
        font-size: 2rem;
        font-family: montserratsemibold, Arial, Helvetica, sans-serif;
    }

    .modal-dialog {
        max-width: 700px;
    }

    .modal-header {
        border-bottom: none;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: 0px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    .modal.left.fade.in .modal-dialog {
        left: 0;
    }

    /*Google map*/
    .mapouter {
        overflow: hidden;
        height: 300px;
        width: 600px;
        margin-left: 50%;
        margin-bottom: 50px;
        transform: translateX(-50%);
    }
    .gmap_canvas {
        background: none !important;
        height: 300px;
        width: 600px;
    }

    /*Donn�es modal*/
    .logo-modal {
        width: 150px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .coordonnees {
        margin-bottom: 50px;
        margin-top:50px;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
    }
    /*----*/
}