﻿#head-picture img {
    max-width: 100%;
}

#first-section li{
    padding:10px 0;
    border-bottom:1px solid #ccc;
}

#third-section h3, #fourth-section h3, #fifth-section h3 {
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: 0em;
    text-align: left;
    color: #1B75B4;
    background-color: white !important;
    padding-left: 4rem;
}

#third-section p, #fourth-section p, #fifth-section p {
    color: black !important;/
}

#third-section g, #fourth-section g, #fifth-section g{
    font-size: 50px;
}

#third-section button, #fourth-section button, #fifth-section button {
    border: none;
    background-color: transparent;
    width: 100%;
    padding-left: 3rem;
    font-family: Inter;
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: 0em;
    text-align: left;
    color: #1B75B4;
    text-transform: uppercase;
}

.borderSection {
    border-top: 1px solid #A2C8DE
}

.paddingContour {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
    background-color: #2A70B1;
    color: white;
}

.triangle0 {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0px;
    left: 117px;
}
.triangle1 {
    border-bottom: 851px solid transparent;
    border-left: 123px solid #1B75B4;
    z-index: 1;
}
.triangle2 {
    border-bottom: 851px solid transparent;
    border-left: 99px solid #67c0ff;
    z-index: 2;
}
.triangle3 {
    border-bottom: 851px solid transparent;
    border-left: 72px solid #ffffff;
    z-index: 3;
}

.paddingRight {
    text-align: right;
    padding-right: 0;
    margin: 0px;
}

.paddingLeft{
    padding-left: 4rem;
    padding-top: 1rem;
}

#second-section {
    background-color: transparent;
    margin-bottom: 3px;
}

    #second-section .top-section {
        padding: 25px 15px 50px 15px;
        position: relative;
        border-bottom: solid 2px #fff;
        font-size:24px;
    }

        #second-section .top-section:after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            border-bottom: solid 50px #333;
            border-left: solid 50vw transparent;
            border-right: solid 50vw transparent;
        }

        ul span {
            font-size:15px;
        }

section.content-section {
    margin: 0;
    color: black;
}
    section.content-section a {
        color: #ededed;
        text-decoration:underline;
    }

        section.content-section a:hover {
            color: #1b75b4;
        }

    .content-section .row {
        background-size: 70%;
        background-position: right;
    }

.content-section .row [class*="col-"] {
    background: white;
}

.content-section h3 {
    margin: 0 -15px;
}

section.content-section {
    border-top: 1px solid #fff;
    margin: 0;
}

.pd-2 {
    padding: 2rem;
}

.bg1 {
    background: linear-gradient( rgba(102, 102, 102, 0.8), rgba(102, 102, 102, 0.8) ), url(/Content/Images/slider/pour-votre-sante-nettoyage-thermopompe.jpg) no-repeat #4d5051;
}

.bg2 {
    background: linear-gradient( rgba(102, 102, 102, 0.8), rgba(102, 102, 102, 0.8) ), url(/Content/Images/slider/pour-votre-confort-nettoyage-climatiseur.jpg) no-repeat #4d5051;
}

.bg3 {
    background: linear-gradient( rgba(102, 102, 102, 0.8), rgba(102, 102, 102, 0.8) ), url(/Content/Images/slider/pour-faire-des-economies-nettoyage-air-climatise.jpg) no-repeat #4d5051;
}
#head-picture {
    position: relative;
}
.clim {
    position:absolute;
    bottom:-100px;
    height:400px;
    right:100px;
}

#ServiceProfessionnelles {
    padding: 0 150px;
}
#ServiceProfessionnelles h1 {
    margin-bottom:50px;
}
    #ServiceProfessionnelles h2 {
        color: #1b75b4;
        text-transform: none;
    }

#ServiceProfessionnelles img {
    width:100%;
    margin-bottom:25px;
}

    #ServiceProfessionnelles li::before {
        border-left: 10px solid #999;
    }

.slanted-box {
    text-align: center;
    width: 100%;
    color: #fff;
    max-width:700px;
    padding: 25px 100px 5px;
}

    .slanted-box.slanted-box-gray {
        background: url(/Content/Images/le-saviez-vous.png);
        background-repeat: no-repeat;
        background-size: 100%100%;
        margin-bottom: 50px;
    }
#ServiceProfessionnelles .slanted-box.slanted-box-gray h2 {
    color: #fff;
    font-weight: bold;
    margin-bottom: 0;
}

.slanted-box.slanted-box-blue {
    background: url(/Content/Images/estimation-gratuite.png);
    background-repeat: no-repeat;
    background-size: 100%100%;
    padding: 50px;
    margin-top: 50px;
}

#ServiceProfessionnelles .slanted-box.slanted-box-blue h2 {
    font-weight: 300;
    color: #fff;
    line-height: 40px;
    font-size: 50px;
}

    #ServiceProfessionnelles .slanted-box.slanted-box-blue h2 b {
        font-weight: bold;
        display:block;
    }

#CTA {
    background: #1b4d75;
    color: #fff;
    padding: 50px 150px;
}

.more {
    border: 1px solid #1b75b4;
    border-radius: 25px;
    color: #1b75b4;
    padding: 5px 40px;
    font-weight: 300;
    display: inline-block;
}

    .more:hover {
        background: #1b75b4;
        color: #fff;
        text-decoration: none;
    }

#sixth-section {
    border-bottom: 10px solid #991f23;
    padding-bottom:25px;
}

@media(max-width:991px) {
    .clim {
        display:none;
    }
    .slanted-box.slanted-box-gray {
        background: #818181;
    }
    #CTA {
        padding:50px;
    }

    .imgTablette{
        width: inherit;
    }
}
@media(max-width:767px) {
    #ServiceProfessionnelles {
        padding: 25px;
    }
    .slanted-box, .slanted-box.slanted-box-blue {
        padding: 25px 75px;
    }

    #ServiceProfessionnelles .slanted-box.slanted-box-blue h2 {
        font-size:24px;
    }
}