:root{
    --global--color-body      : #474747;
    --global--color-primary   : #a3cd3a;
    --global--color-heading   : #005f6d;
	--global--color-secondary : #005f6d;
    --global--color-green     : #99bf39;
    --global--color-green-perf: #a3cc3c;
}

.green-bg{
    background: var(--global--color-green)
}

.grey-bg{
    background: #ffffff!important;
}

.primary-color{
    color: var(--global--color-primary);
}

.secondary-color{
    color: var(--global--color-secondary);
}

/* ========================================= Header ============================================= */
.justify-self-end{
    justify-self: end!important;
}

.header, .top-header{
    height: auto!important;
}

.blue-bg{
    background-color: var(--global--color-heading);
}

.black-border{
    border: 1px solid black;
}

.auto-height{
    max-width: 100%!important;
    width: 320px!important;
}

/* ========================================= Header ============================================= */
#back-to-top:hover{
    border: 2px solid var(--global--color-green-perf);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* ========================================= Error 404 ============================================= */

.error-title{
    font-size: 15vh;

    /* color: #cfc547; */

    text-shadow: 10px 10px 25px #005e6d50,
    -10px 10px 25px #005e6d50,
    -10px -10px 25px #005e6d50,
    10px -10px 25px #005e6d50;
}

/* ========================================= Home ============================================= */

.img-actu-slider{
    width: 40rem;
    height: 20rem;
}

.img-actu-slider:hover{
    -webkit-filter:brightness(30%);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.actu-img-div{
    position: relative;
}

.div-actu-desc{
    text-shadow: 0 0 2px #000;
    bottom: 5px;
    left: 5px;
    position: absolute;
}

.home-white-div{
    background: #fefefe;
    border-radius: 10px;
    height: 15rem;
}

.round-img-home{
    border-radius: 10%;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.cpe-panel-title{
    margin-bottom: 12px;
}

.white-div-home-height{
    height: 24rem;
}

/* ======================================= Qui Sommes Nous ====================================== */

.text-shadow-map{
    text-shadow: 4px 4px 4px black;
}

engagements-rse-cards{
    border: 1px solid var(--global--color-body);
}

.presentation-img{
    max-height: 17rem;
}

.reseau-national-img{
    width: 50em;
}

.fa-circle-small{
    color: var(--global--color-body);
}

#features-1 > div > div > div.row.d-flex.justify-content-around.mb-5 > div > ul > li:nth-child(2){
    height: 20em;
}

.green-bg-qui-sommes-nous{
    background: var(--global--color-green);
    border-radius: 40px;
}

.blue-bg-qui-sommes-nous{
    background: var(--global--color-heading);
    border-radius: 40px;
}

.text-div-qui-sommes-nous{
    width: 90%;
    height: 20%;
}

.text-notre-histoire{
    width: 45%;
}

.img-christian-delmotte{
    width: 100%;
    max-height: 30rem;
    border-radius: 10px;
}

.img-temperia-pro{
    background-image: url('../assets/images/background/logo3lignes.jpg');
    border-radius: 10px;
    width: 50%;
}

.large-bg-tuyau-temperia{
    background-image: url('../assets/images/background/thumbnails/tuyau-temperia-min.webp');
    background-position: 50%, 50%;
    background-size: cover;
    width: 100%;
    height: 40em;
}

.img-map-temperia{
    width: 2rem;
    height: 2rem;
}

.chart-div{
    position: relative;
}

.chartCa,
.chartEffectif,
.chartSite{
    position: relative;
}

.chart-text-percent{
    position: absolute;
    top: 40%;
    right: 38%;
}

.chart-text-year{
    position: absolute;
    top: 51%;
    right: 38%;
}

.animation-anchor{
    width: 0;
    height: 0;
    position: absolute;
    bottom: -80px;
}

.chiffres-icons{
    font-size: 70px;
}

.chiffres-home{
    background: rgb(247, 247, 247);
    border-radius: 10px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.green-chiffres{
    color: var(--global--color-primary);
}

.blue-chiffres{
    color: var(--global--color-secondary);
}


/* ========================================== Nos secteurs d'activités ============================================= */

.text-div-secteurs{
    width: 63%;
}

.diagonal-div-secteurs{
    background-image: url('../assets/images/background/Plante.png');
    background-position: 50%, 50%;
    background-size: cover;
    width: 35%;
}

.white-stripe-secteurs{
    background: #fff;
    width: 2em;
    
}

.green-card-body{
    background: var(--global--color-green);
}

.blue-card-body{
    background: #1f7f95;
}

.large-bg-tuyau{
    background-image: url('../assets/images/background/nos-secteurs-tuyau-2.png'); 
    background-size: cover;
    background-position: 50%, 50%;
    position: relative;
    width: 100%;
    height: 40em;
}

.new-bg-tuyau{
    display: none;
}

.div-text-large-bg-secteurs,
.div-text-large-bg-secteurs-sante,
.div-text-large-bg-secteurs-contrat{
    position: absolute;
    bottom: 0;
}


.blue-div-secteurs{
    background: var(--global--color-heading);
    width: 30rem;
    height: 5rem;
    border-radius: 0 10px 0 0;
}

.green-div-secteurs{
    background: var(--global--color-green);
    border-radius: 0 10px 0 0;
    width: 40rem;
    height: 18rem;
}

.diagonal-div-secteurs-2{
    background-image: url('../assets/images/background/Paysage.png');
    background-position: 50%, 50%;
    background-size: cover;
    width: 35%;
}

.blue-div-contexte-secteurs{
    background-image: url('../assets/images/background/Icone\ 3.png');
    background-size: cover;
    background-position: 45%, 55%;
    border-radius: 15px;
    height: 15em;
    width: 15em;
}

.green-div-contexte-secteurs{
    background: var(--global--color-green);
    border-radius: 15px;
    max-height: 15em;
    max-width: 60em;
}

.my-blue-title{
    color: var(--global--color-heading);
}

.large-bg-ventilos{
    background-image: url('../assets/images/background/ventilos.png'); 
    background-size: cover;
    background-position: 50%, 50%;
    position: relative;
    width: 100%;
    height: 40em;
}

.green-div-secteurs-2{
    background: var(--global--color-green);
    border-radius: 0 10px 0 0;
    max-width: 50em;
    max-height: 10em;
}

.div-comment-secteurs,
.div-offres-secteurs{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 20px;
}

.img-offres-secteurs{
    height: 15rem;
    width: 15rem;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* .img-offres-secteurs-sante{
    background-image: url('../assets//images/background/thumbnails/sante-sector.jpg');
    background-size: cover;
    background-position: 50%, 50%;
    height: 15rem;
    width: 15rem;
} */

.div-offres-links{
    color: var(--global--color-heading);
}

.div-offres-links:hover{
    color: var(--global--color-green);
}

/* ======================================== Nos Solutions ============================================== */

/* Performance Energetique */
.img-solutions{
    width: 100%;
}


.green-card-body-perf{
    background: var(--global--color-green-perf);
}

.img-perf-ener{
    height: 8rem;
}

/* Decret Tertiaire */
.efficacite-energetique-graph-blue{
    background: var(--global--color-heading);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px 15px 0 0;
    height: 25rem;
}

.efficacite-energetique-graph-green{
    background: var(--global--color-green);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px 15px 0 0;
    height: 25rem;
}

.efficacite-energetique-graph-blue-solution{
    background: var(--global--color-heading);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px 15px 0 0;
    height: 24rem;
}

.efficacite-energetique-graph-green-solution{
    background: var(--global--color-green);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border-radius: 15px 15px 0 0;
    height: 24rem;
}

.efficacite-energetique-graph{
    border-radius: 0 0 15px 15px;
    border: 1px solid rgba(128, 128, 128, 0.459);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.graph-white-bg{
    background: #FEFEFE;
}

.graph-blue-bg{
    background: var(--global--color-heading);
}

/* Travaux Energetiques */
.img-tour-aero{
    width: 20rem;
    height: 100%;
    border-radius: 0 50px 0 0;
}

.blue-div-solutions{
    background: var(--global--color-heading);
    border-radius: 0 10px 0 0;
}

.green-div-solutions{
    background: var(--global--color-green);
    border-radius: 30px 0 0 30px;
}

.hidden-img-div-solutions{
    visibility: hidden;
    height: 0;
    width: 0;
}


/* Contrat Performance energetique */

.img-lycee-theas{
    max-width: 25rem;
    max-height: 20rem;
}

/* ======================================= Nos Services ====================================== */
.anchor{
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

.img-nos-services{
    object-fit: cover;
}

.bootstrap-cards-services{
    width: 22rem;
}

.nos-services-img{
    /* height: 10rem; */
    width: 100%;
}

.new-card-panel{
    border: 1px solid rgb(199, 199, 199);
    height: 30rem;
}

.new-card-content{
    height: 15rem;
}

.project-content{
    padding: 10px!important;
}

/* ============================== Contact ================================== */

textarea.form-control{
    height: 15em;
    padding: 1.5em;
}

.user-agree-text{
    color: rgb(158, 158, 158);
}

/* =========================================== Nos Actualités ============================================== */
.future-photo{
    border: 1px solid black;
    height: 20em;
}

/* ================================================= Nos Réalisations =========================================== */
.project-panel .project-panel-holder .project-content .project-title h4 a{ /* "Titre" des projets dans le premier slider de la page "Nos Realisations" */
    text-transform: none!important;
}

.img-industriel-slider{
    width: 40rem;
    height: 20rem;
}

.div-irm-installation{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.img-irm-installation{
    max-width: 25rem;
    max-height: 20rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.img-tertiaire-slider{
    width: 25rem;
    height: 20rem;
}

.form-select{
    /* display:block;
    width:100%;
    padding:.75em;
    font-size:1rem;
    font-weight:400;
    line-height:1.5;
    color:#212529;
    background-color:#fff;
    background-clip:padding-box;
    border:1px solid #eaeaea;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:.25rem;
    transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out */
}

.logos-confiance{
    background:rgba(0, 0, 0, 0.089);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.position-rel-realisations{
    position: relative;
}

.photo-realisations-text{
    position: absolute;
    top: 2%;
    left: 2%;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 2px black;
}

/* ========================================== Pages d'erreurs ============================================= */
.error-div{
    height: 60vh;
}

/* ================================================= Fiches =============================================== */
.small-img-fiche{
    border: 1px solid grey;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 30rem;
    max-height: 25rem;
}

.big-img-fiche{
    border: 1px solid grey;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    max-height: 38rem;
    width: 100%;
}

.text-fiche{
    font-size: 16px;
}


/* ================================================= MediaQueries =========================================== */
@media (max-width: 1500px){
    .h1-home{
        font-size: 60px!important;
    }

    .new-card-panel{
        height: 35rem;
    }
    
    .new-card-content{
        height: 18rem;
    }

    .img-christian-delmotte{
        position: static;
        width: 70%;
        margin-top: 2rem;
    }

    .text-notre-histoire{
        width: 100%;
    }

    .efficacite-energetique-graph-blue,
    .efficacite-energetique-graph-green{
        height: 28rem;
    }
}

@media (max-width: 1200px){
    .h1-home{
        font-size: 50px!important;
    }

    /* .efficacite-energetique-graph-blue,
    .efficacite-energetique-graph-green{
        height: 20rem;
    } */

    .efficacite-energetique-graph-blue-solution,
    .efficacite-energetique-graph-green-solution{
        height: 20rem;
    }
}


@media (max-width: 990px){

    #back-to-top:before{
        display: none;
    }

    .blue-div-solutions{
        width: 80%;
    }

    .green-div-solutions{
        width: 100%;
        border-radius: 20px;
    }

    .large-bg-lycee{
        background-image: none;
    }

    .new-bg-lycee{
        background-image: url("../assets/images/background/lycee-theas.png");
        background-size: cover;
        background-position: 50%, 50%;
        height: 25rem;
        width: 70%;
    }

    .large-bg-lycee{
        display: block;
        position: static;
        background-image: none;
        height: auto;
        width: auto;
    }

    .img-solutions-tour-aero{
        display: none;
    }

    .hidden-img-div-solutions{
        visibility: visible;
        height: 100%;
        width: 100%;
    }

    .img-tour-aero{
        border-radius: 20px;
        height: 15rem;
        width: 25rem;
    }
    

    /* ============================= Collectivites ============================= */

    .white-stripe-secteurs{
        display: none;
    }

    .diagonal-div-secteurs{
        display: none;
    }

    .text-div-secteurs{
        margin: 0!important;
        width: 80%;
    }

    /* ============================= Nos Services ============================ */

    .new-card-panel{
        height: 35rem;
    }
    
    .new-card-content{
        height: 18rem;
    }

    .green-div-contexte-secteurs{
        max-height: none;
    }

    #back-to-top{
        border-radius: 50%;
    }

    .white-div-home-height{
        height: 27rem;
    }
}

@media (max-width: 765px){
    .large-bg-tuyau{
        background-image: none;
        height: 20rem;
        margin-bottom: 0;
        position: static;
        width: auto;
    }

    .new-bg-tuyau{
        display: block;
        height: 20rem;
        width: 20rem;
        background-image: url('../assets/images/background/thumbnails/nos-secteurs-tuyau-2.png'); 
        background-size: cover;
        background-position: 50%, 50%;
    }

    .blue-div-secteurs{
        width: auto;
        height: auto;
        padding: 10px;
    }
    
    .green-div-secteurs{
        width: auto;
        height: auto;
    }

    .new-bg-lycee{
        height: 20rem;
    }

    .div-text-large-bg-secteurs,
    .div-text-large-bg-secteurs-sante,
    .div-text-large-bg-secteurs-contrat{
        position: static;
    }

    .chart-text-percent{
        position: absolute;
        top: 40%;
        right: 40%;
    }
    
    .chart-text-year{
        position: absolute;
        top: 51%;
        right: 40%;
    }
}

@media (max-width: 575px){

    .h1-home{
        font-size: 32px!important;
    }

    /* ============================= Qui sommes nous ============================ */
    .img-christian-delmotte{
        width: 100%;
    }

    /* ============================= Nos Services ============================ */
    .new-card-panel{
        height: 32rem;
    }
    
    .new-card-content{
        height: 16rem;
    }

    /* ================================= Industriels ============================ */
    .large-bg-tuyau{
        margin-bottom: 8rem;
    }

    .img-irm-installation{
        height: 100%;
        width: 100%;
    }

    .new-bg-lycee{
        height: 15rem;
        width: 80%;
    }

    h2{
        font-size: 34px;
    }

    h3{
        font-size: 28px;
    }
}