#switchToRussian {
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.4em;
}
#switchToFrench {
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1.4em;
}
.domainPresentationWindow {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
    border: solid 5px black;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 4em;
    filter: grayscale(0%);
    z-index: 5;
    background-color: white;
}
.presentationServicesTitle {
    font-size: 4rem;
    grid-row: 1/2;
    grid-column: 1/20;
    margin: 0;
}
.presentationServicesText1 {
    grid-row: 2/3;
    grid-column: 2/19;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10%; 
    font-size: 200%;
    font-weight: bold;
}
.presentationServicesText2 {
    grid-row: 3/4;
    grid-column: 2/19;
    margin-top: 0;
    text-align: center;
    font-size: 200%;
}
.presentationServicesText3 {
    grid-row: 4/5;
    grid-column: 2/19;
    margin-top: 0;
    text-align: center;
    font-size: 200%;
}
.presentationServicesExemple {
    grid-row: 19/20;
    grid-column: 2/19;
    margin-top: 0;
    text-align: center;
    font-size: 130%;
}
html{
cursor: url("images/Hand.png"), auto;
        overflow-x: hidden;
}
a {
        cursor: url("images/Arrow.png"), auto;
}

@media (min-width: 1100px) {
    html {
        font-size: 18px;
    }
    button {
        cursor: url("Arrow.png"), auto;
    }

    .sidebar {
        width: 3.6%;
        height: 100vH; /* Full height */
        background-color: #1e1e20;
        color: white;
        padding: 15px;
        box-sizing: border-box;
        position: fixed; /* Fixed position */
        left: 0;
        top: 0;
        overflow-y: auto; /* Scroll if the content is too long */
        z-index: 21;
        border-right: solid 2px white;
        overflow-x: hidden;
    }

        .sidebar img {
            height: 12%;
            margin-left: 0px;
            display: none;
            transform: translateX(-0.7em);
            z-index: 32;
        }

        .sidebar h2 {
            text-align: center;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
            display: none;
            z-index: 31;
        }

            .sidebar ul li {
                margin: 2em 0 0 0;
                width: 95%;
                border: 5px outset white;
                border-radius: 10px;
                user-select: none;
            }

                .sidebar ul li a {
                    color: white;
                    text-decoration: none;
                    display: block;
                    padding: 10px 15px;
                    border-radius: 5px;
                    text-align: center;
                    font-family: "Baskervville SC", serif;
                    font-weight: 400;
                    font-size: 150%;
                }

                    .sidebar ul li a:hover {
                        background-color: #fff;
                        color: black;
                    }

                    .sidebar ul li a:active {
                        background-color: #555;
                        border: 5px inset #fff;
                    }


    body {
        margin: 0;
        padding: 0;
    }

    .background {
        background: url(images/bgMarble.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        position: absolute;
        width: 200%;
        z-index: -6;
        overflow-y: auto; /* Scroll if the content is too long */
        background-attachment: fixed;
    }

    #homeBackground {
        height: 180%;
    }

    #servicesBackground {
        height: 840%;
    }

    #contactBackground {
        height: 120%;
    }

    h1, h2 {
        text-align: center;
    }

    .baskervville-sc-regular {
        font-family: "Baskervville SC", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        font-size: 500%;
        margin-top: 0%;
        margin-left: 0;
        color: white;
    }

    .mainHeader {
        z-index: 19;
        background-color: #1e1e20;
        user-select: none;
        position: fixed;
        width: 100%;
        max-width: none;
        box-shadow: 20px 0 10px 10px rgba(0, 0, 0, 0.8);
        height: 14%;
        display: grid;
        grid-template-rows: repeat(10, 10%);
        grid-template-columns: repeat(20, 1fr);
    }
    #buttonArea {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 7;
        grid-row-end: 10;
    }
    #batiProfitTitle {
        grid-column-start: 8;
        grid-column-end: 17;
        grid-row-start: 1;
        grid-row-end: 7;
        margin: 0;
        font-size: 1em;
    }

    .instagramBatiProfit {
        grid-column-start: 15;
        grid-column-end: 20;
        grid-row-start: 2;
        grid-row-end: 5;
    }

        .instagramBatiProfit img {
            height: 20px;
            width: 20px;
        }

        .instagramBatiProfit a {
            position: relative;
            font-weight: bold;
            font-family: "Noto Sans", sans-serif;
            text-decoration: none;
            font-size: 170%;
            color: white;
        }

    .telephoneBatiProfit {
        grid-column-start: 3;
        grid-column-end: 10;
        grid-row-start: 2;
        grid-row-end: 6;
    }

        .telephoneBatiProfit img {
            height: 30px;
            width: 30px
        }

        .telephoneBatiProfit a {
            position: relative;
            font-weight: bold;
            font-family: "Noto Sans", sans-serif;
            text-decoration: none;
            font-size: 170%;
            color: white;
        }

    #mailIcon {
        width: 20px;
        height: 20px;
    }

    .mailBatiProfit {
        color: white;
        font-family: "Noto sans", sans-serif;
        font-size: 1.5em;
        font-weight: bold;
        grid-column-start: 15;
        grid-column-end: 22;
        grid-row-start: 7;
        grid-row-end: 10;
        z-index: 30;
    }

        .mailBatiProfit p {
            padding: 0;
            margin: 0;
        }

    #sidebarOpeningButton {
        position: absolute;
        bottom: 50%;
        height: 5em;
        background: rgba(0, 0, 0, 0);
        offset: none;
        box-shadow: none;
    }

        #sidebarOpeningButton div {
            transform: translateX(-0.45em) rotate(45deg);
            height: 10%;
            width: 100%;
            border: solid white 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
            border-radius: 4px;
        }

        #sidebarOpeningButton:hover div {
            border: solid yellow 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
        }

    #sidebarClosingButton {
        position: absolute;
        bottom: 5%;
        height: 5%;
        width: 80%;
        background: rgba(0, 0, 0, 0);
        offset: none;
        box-shadow: none;
        display: none;
        outline: none;
    }

        #sidebarClosingButton div {
            transform: translateX(5.25em) rotate(225deg);
            height: 40%;
            width: 8%;
            border: solid white 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
            border-radius: 4px;
        }

        #sidebarClosingButton:hover div {
            border: solid red 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
        }

    #underlinedLogoSidebar {
        border: solid 1px white;
        position: absolute;
        top: 12%;
        display: none;
        width: 80%;
        height: 0;
    }

    .mainContent {
        margin-top: 2em;
        height: 75%;
        width: 90%;
        background-color: #fff;
        filter: blur(0.2px);
        opacity: 0.8;
        position: absolute;
        border: solid black 3px;
        border-radius: 4em;
        left: 6%;
        display: flex;
        flex-flow: column wrap;
    }

        .mainContent h1 {
            font-family: 'Baskerville Old Face';
            font-size: 220%;
            margin-bottom: 0;
            margin-top: 0.2em;
            margin-bottom: 0.2em;
        }

    .presentationText {
        text-align: center;
        font-size: 120%;
        margin: 0;
        margin-bottom: 2%;
    }
    .presentationDomain {
        text-decoration: underline;
        margin: 0;
        text-align: center;
        font-size: 150%;
    }

    .sampleVideo {
        z-index: 100;
        border-radius: 50px;
        margin-top: 10%;
    }

    #sampleVideo1 {
        margin-left: 10%;
        height: 36%;
        width: 18%;
        transform: rotate(-3deg);
    }

    #sampleVideo2 {
        margin-left: 15%;
        transform: translateY(-2em);
        height: 36%;
        width: 18%;
        z-index: -3;
    }

    #sampleVideo3 {
        margin-left: 15%;
        transform: rotate(3deg);
        height: 36%;
        width: 18%;
    }

    .bigTextWant {
        font-weight: bolder;
        font-size: 2.3em;
        color: black;
    }

    #wantLink:hover {
        color: darkslategrey;
    }

    #btpWindow {
        width: 50%;
        height: 80%;
        left: 5%;
        top: 30%;
        position: absolute;
    }

    #renovationWindow {
        width: 50%;
        height: 90%;
        right: 5%;
        top: 210%;
        position: absolute;
    }

    #plomberieWindow {
        width: 50%;
        height: 80%;
        left: 5%;
        top: 380%;
        position: absolute;
    }

    #instalElecWindow {
        width: 50%;
        height: 80%;
        right: 5%;
        top: 530%;
        position: absolute;
    }

    #menuiserieWindow {
        width: 50%;
        height: 80%;
        left: 5%;
        top: 700%;
        position: absolute;
    }

    /* BTP */
    .presentationServicesPhotos {
        height: 28em;
        width: 16em;
        position: absolute;
        border: solid .4em black;
        border-radius: 17px;
    }

    #btpimage1 {
        position: absolute;
        left: 60em;
        top: 20em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(-15em) translateY(0em);
        transition: transform 2s;
    }

        #btpimage1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #btpimage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #btpimage1.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

    #btpimage2 {
        left: 60em;
        top: 20em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(15em) translateY(0em);
        transition: transform 2s;
    }

        #btpimage2.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #btpimage2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #btpimage2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #btpimage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

    #btpVideo1 {
        position: absolute;
        left: 60em;
        top: 20em;
        filter: grayscale(0%);
        z-index: 5;
        border: solid .4em black;
        border-radius: 17px;
        transform: translateX(0em) translateY(10em);
        transition: transform 2s, z-index 2s;
    }

        #btpVideo1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #btpVideo1.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #btpVideo1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #btpVideo1.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

    #btpVideo2 {
        position: absolute;
        left: 60em;
        top: 20em;
        z-index: 1;
        border: solid .4em black;
        border-radius: 17px;
        transform: translateX(0em) translateY(-10em);
        transition: transform 2s, z-index 2s;
    }

        #btpVideo2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #btpVideo2.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #btpVideo2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #btpVideo2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

    #shadowBTP {
        position: absolute;
        left: -10em;
        top: 8em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 120%;
        width: 180%;
        filter: blur(70px);
    }

    #separationBar1 {
        position: absolute;
        top: 68em;
        width: 100%;
        border: double 40px black;
    }
    /* RENOVATION */
    #renovationVideo1 {
        position: absolute;
        top: 90em;
        filter: grayscale(100%);
        z-index: 3;
        left: 15em;
        transform: translateX(-15em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo1.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #renovationVideo1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #renovationVideo1.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(10em) !important;
        }

        #renovationVideo1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

    #renovationVideo4 {
        position: absolute;
        top: 90em;
        left: 15em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(15em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo4.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(10em) !important;
        }

        #renovationVideo4.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #renovationVideo4.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #renovationVideo4.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

    #renovationVideo2 {
        position: absolute;
        top: 90em;
        left: 15em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(0em) translateY(10em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #renovationVideo2.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #renovationVideo2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

    #renovationVideo3 {
        position: absolute;
        top: 90em;
        left: 15em;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(-10em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo3.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #renovationVideo3.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(10em) !important;
        }

        #renovationVideo3.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #renovationVideo3.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

    .presentationServicesVideos {
        border: solid 0.4em black;
        border-radius: 17px;
        height: 28em;
        width: 16em;
    }

    #shadowRenovation {
        position: absolute;
        left: -10em;
        top: 76em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
    }

    #separationBar2 {
        position: absolute;
        top: 136em;
        width: 100%;
        border: double 40px black;
    }

    /* PLOMBERIE */
    #plomberieImage1 {
        position: absolute;
        top: 155em;
        filter: grayscale(100%);
        z-index: 3;
        left: 60em;
        transform: translateX(-15em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieImage1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #plomberieImage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #plomberieImage1.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

    #plomberieImage2 {
        position: absolute;
        top: 155em;
        filter: grayscale(100%);
        z-index: 3;
        left: 60em;
        transform: translateX(0em) translateY(-10em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieImage2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #plomberieImage2.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #plomberieImage2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #plomberieImage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

    #plomberieImage3 {
        position: absolute;
        top: 155em;
        filter: grayscale(100%);
        z-index: 3;
        left: 60em;
        transform: translateX(15em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieImage3.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #plomberieImage3.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #plomberieImage3.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #plomberieImage3.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

    #plomberieVideo {
        position: absolute;
        top: 155em;
        left: 60em;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(10em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieVideo.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #plomberieVideo.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #plomberieVideo.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #plomberieVideo.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

    #shadowPlomberie {
        position: absolute;
        left: -10em;
        top: 143em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
    }

    #separationBar3 {
        position: absolute;
        top: 202em;
        width: 100%;
        border: double 40px black;
    }
    /* INSTALLATION ELECTRIQUE */
    #instalElecImage1 {
        position: absolute;
        top: 220em;
        filter: grayscale(100%);
        z-index: 3;
        left: 15em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(-15em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecImage1.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #instalElecImage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #instalElecImage1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(10em) !important;
        }

    #instalElecVideo1 {
        position: absolute;
        top: 220em;
        left: 15em;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(-10em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecVideo1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #instalElecVideo1.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(10em) !important;
        }

        #instalElecVideo1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #instalElecVideo1.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

    #instalElecImage2 {
        position: absolute;
        top: 220em;
        left: 15em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(15em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecImage2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(10em) !important;
        }

        #instalElecImage2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #instalElecImage2.pose0 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #instalElecImage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

    #instalElecVideo2 {
        position: absolute;
        top: 220em;
        left: 15em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(0em) translateY(10em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecVideo2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #instalElecVideo2.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #instalElecVideo2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #instalElecVideo2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-1em) !important;
        }

    #shadowInstalElec {
        position: absolute;
        left: -10em;
        top: 209em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
    }

    #separationBar4 {
        position: absolute;
        top: 268em;
        width: 100%;
        border: double 40px black;
    }
    /* MENUISERIE */
    #menuiserieImage1 {
        position: absolute;
        top: 288em;
        left: 60em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateY(0em) translateX(15em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieImage1.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #menuiserieImage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #menuiserieImage1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

    #menuiserieImage2 {
        position: absolute;
        top: 288em;
        left: 60em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateY(-10em) translateX(0em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieImage2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(0em) !important;
        }

        #menuiserieImage2.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #menuiserieImage2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #menuiserieImage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

    #menuiserieImage3 {
        position: absolute;
        top: 288em;
        left: 60em;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateY(0em) translateX(-15em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieImage3.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #menuiserieImage3.pose0 {
            z-index: !important;
            transform: translateX(15em) translateY(0em) !important;
        }

        #menuiserieImage3.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

        #menuiserieImage3.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

    #menuiserieVideo {
        position: absolute;
        top: 288em;
        left: 60em;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateY(10em) translateX(0em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieVideo.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-15em) translateY(0em) !important;
        }

        #menuiserieVideo.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-10em) !important;
        }

        #menuiserieVideo.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(15em) translateY(00em) !important;
        }

        #menuiserieVideo.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(10em) !important;
        }

    #menuiserieShadow {
        position: absolute;
        left: -10em;
        top: 275em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
    }

    #separationBar5 {
        position: absolute;
        top: 335em;
        width: 100%;
        border: double 40px black;
    }

    .presentationServicesButtons {
        width: 5em;
        height: 20em;
        background: rgba(0, 0, 0, 0);
        offset: none;
        border: none;
    }

    #buttonToTheRightBTP {
        top: 47em;
        left: 103em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftBTP {
        top: 47em;
        left: 76em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    .arrowButton {
        width: 3.2em;
        height: 3em;
        border-radius: 1em;
        background: rgba(0, 0, 0, 0);
        border-right: solid 0.8em white;
        border-top: solid 0.8em white;
        transform: rotate(45deg);
        transition: transform 1s, height 1s, width 1s, border-color 1s;
    }

    .arrowToTheLeft {
        transform: rotate(-135deg);
    }

    .arrowToTheRight:hover {
        border-color: dimgrey;
        transform: translateX(2em) rotate(45deg);
        height: 4.5em;
        width: 4.8em;
        filter: blur(.1em);
    }

    .arrowToTheRight:active {
        border-color: black;
        transform: translateX(2em) rotate(45deg);
        height: 4.5em;
        width: 4.8em;
        filter: blur(.1em);
    }

    .arrowToTheLeft:hover {
        transform: rotate(-135deg) translateX(4em) translateY(-2em);
        filter: blur(.1em);
        height: 4.5em;
        width: 4.8em;
        border-color: dimgrey;
    }

    .arrowToTheLeft:active {
        transform: rotate(-135deg) translateX(4em) translateY(-2em);
        filter: blur(.1em);
        height: 4.5em;
        width: 4.8em;
        border-color: black;
    }

    #buttonToTheLeftRenovation {
        top: 115em;
        left: 16em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightRenovation {
        top: 115em;
        left: 42em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftPlomberie {
        top: 230em;
        left: 76em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightPlomberie {
        top: 230em;
        left: 104em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftInstalElec {
        top: 290em;
        left: 15em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightInstalElec {
        top: 290em;
        left: 43em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftMenuiserie {
        top: 410em;
        left: 75em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightMenuiserie {
        top: 410em;
        left: 104em;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    .presentationServicesText {
        font-family: 'Baskerville Old Face';
        color: darkslategrey;
        font-weight: 700;
        font-size: 180%;
        text-align: center;
        margin: 0;
    }

 

    #contactFirst {
        position: absolute;
        text-align: center;
        z-index: 10;
        width: 20em;
        height: 5em;
        left: 17%;
        top: 8%;
        font-size: 3em
    }

    .container {
        position: absolute;
        background: rgba(0, 0, 0, 0.7);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 1);
        max-width: 500px;
        width: 100%;
        animation: fadeIn 1.5s ease-in-out;
        top: 34%;
        left: 31%;
    }

    #formH1 {
        text-align: center;
        margin-bottom: 20px;
        color: white;
    }

    label {
        display: block;
        margin-bottom: 10px;
        font-size: 1.1em;
    }

    input, textarea {
        width: calc(100% - 20px);
        padding: 10px;
        margin-bottom: 20px;
        border: none;
        border-radius: 5px;
        font-size: 1em;
    }

    textarea {
        resize: none;
        height: 100px;
    }

    #formButton {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #000;
        color: #fff;
        font-size: 1.2em;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
        z-index: 10;
    }

        #formButton:hover {
            background-color: #00aa00;
        }

        #formButton:active {
            background-color: #007700;
        }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .formLabel {
        color: white;
    }



    #switchToRussian {
        z-index: 50;
        width: 220px;
        height: 30px;
        color: white;
        background-color: #1c1c10;
    }

    #switchToFrench {
        z-index: 50;
        width: 220px;
        height: 30px;
        color: white;
        background-color: #1c1c10;
    }
}

@media (500px <= width <= 1100px) {
    html {
        font-size: 15px;
    }
    button {
        cursor: url("Arrow.png"), auto;
    }

    .sidebar {
        width: 3.6%;
        height: 100vH; /* Full height */
        background-color: #1e1e20;
        color: white;
        padding: 15px;
        box-sizing: border-box;
        position: fixed; /* Fixed position */
        left: 0;
        top: 0;
        overflow-y: auto; /* Scroll if the content is too long */
        z-index: 21;
        border-right: solid 2px white;
        overflow-x: hidden;
    }

        .sidebar img {
            height: 12%;
            margin-left: 0px;
            display: none;
            transform: translateX(-0.7em);
            z-index: 32;
        }

        .sidebar h2 {
            text-align: center;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
            display: none;
            z-index: 31;
        }

            .sidebar ul li {
                margin: 2em 0 0 0;
                width: 95%;
                border: 5px outset white;
                border-radius: 10px;
                user-select: none;
            }

                .sidebar ul li a {
                    color: white;
                    text-decoration: none;
                    display: block;
                    padding: 10px 15px;
                    border-radius: 5px;
                    text-align: center;
                    font-family: "Baskervville SC", serif;
                    font-weight: 400;
                    font-size: 150%;
                }

                    .sidebar ul li a:hover {
                        background-color: #fff;
                        color: black;
                    }

                    .sidebar ul li a:active {
                        background-color: #555;
                        border: 5px inset #fff;
                    }


    body {
        margin: 0;
        padding: 0;
    }

    .background {
        background: url(images/bgMarble.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        position: absolute;
        width: 200%;
        z-index: -6;
        overflow-y: auto; /* Scroll if the content is too long */
        background-attachment: fixed;
    }

    #homeBackground {
        height: 180%;
    }

    #servicesBackground {
        height: 830%;
    }

    #contactBackground {
        height: 140%;
    }

    h1, h2 {
        text-align: center;
    }

    .baskervville-sc-regular {
        font-family: "Baskervville SC", serif;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        font-size: 500%;
        margin-top: 0%;
        margin-left: 0;
        color: white;
    }

    .mainHeader {
        z-index: 19;
        background-color: #1e1e20;
        user-select: none;
        position: fixed;
        width: 100%;
        max-width: none;
        box-shadow: 20px 0 10px 10px rgba(0, 0, 0, 0.8);
        height: 14%;
        display: grid;
        grid-template-rows: repeat(10, 10%);
        grid-template-columns: repeat(20, 1fr);
    }

    #buttonArea {
        grid-column-start: 2;
        grid-column-end: 5;
        grid-row-start: 3;
        grid-row-end: 4;
    }

    #batiProfitTitle {
        grid-column-start: 8;
        grid-column-end: 16;
        grid-row-start: 1;
        grid-row-end: 3;
        font-size: 0.5em;
        text-align: center;
    }

    .instagramBatiProfit {
        grid-column-start: 8;
        grid-column-end: 13;
        grid-row-start: 7;
        grid-row-end: 9;
    }

        .instagramBatiProfit img {
            height: 20px;
            width: 20px;
        }

        .instagramBatiProfit a {
            position: relative;
            font-weight: bold;
            font-family: "Noto Sans", sans-serif;
            text-decoration: none;
            font-size: 1.3em;
            text-align: center;
            color: white;
        }

    .telephoneBatiProfit {
        grid-column-start: 2;
        grid-column-end: 10;
        grid-row-start: 7;
        grid-row-end: 9;
    }

        .telephoneBatiProfit img {
            height: 20px;
            width: 20px
        }

        .telephoneBatiProfit a {
            position: relative;
            font-weight: bold;
            font-family: "Noto Sans", sans-serif;
            text-decoration: none;
            font-size: 1.3em;
            text-align: center;
            color: white;
        }

    #mailIcon {
        width: 20px;
        height: 20px;
        align-self: flex-start;
    }

    .mailBatiProfit {
        color: white;
        font-family: "Noto sans", sans-serif;
        font-size: 1.3em;
        text-align: center;
        font-weight: bold;
        grid-column-start: 13;
        grid-column-end: 22;
        grid-row-start: 7;
        grid-row-end: 9;
        z-index: 30;
    }

        .mailBatiProfit p {
            padding: 0;
            margin: 0;

            align-self: flex-start;
        }

    #sidebarOpeningButton {
        position: absolute;
        bottom: 50%;
        height: 5em;
        background: rgba(0, 0, 0, 0);
        offset: none;
        box-shadow: none;
    }

        #sidebarOpeningButton div {
            transform: translateX(-0.45em) rotate(45deg);
            height: 10%;
            width: 100%;
            border: solid white 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
            border-radius: 4px;
        }

        #sidebarOpeningButton:hover div {
            border: solid yellow 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
        }

    #sidebarClosingButton {
        position: absolute;
        bottom: 5%;
        height: 5%;
        width: 80%;
        background: rgba(0, 0, 0, 0);
        offset: none;
        box-shadow: none;
        display: none;
        outline: none;
    }

        #sidebarClosingButton div {
            transform: translateX(5.25em) rotate(225deg);
            height: 40%;
            width: 8%;
            border: solid white 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
            border-radius: 4px;
        }

        #sidebarClosingButton:hover div {
            border: solid red 5px;
            border-left: solid rgba(0, 0, 0, 0) 1px;
            border-bottom: solid rgba(0, 0, 0, 0) 1px;
        }

    #underlinedLogoSidebar {
        border: solid 1px white;
        position: absolute;
        top: 12%;
        display: none;
        width: 80%;
        height: 0;
    }

    .mainContent {
        margin-top: 2em;
        height: 75%;
        width: 90%;
        background-color: #fff;
        filter: blur(0.2px);
        opacity: 0.8;
        position: absolute;
        border: solid black 3px;
        border-radius: 4em;
        left: 6%;
        display: flex;
        flex-flow: column wrap;
    }

        .mainContent h1 {
            font-family: 'Baskerville Old Face';
            font-size: 220%;
            margin-bottom: 0;
            margin-top: 0.2em;
            margin-bottom: 0.2em;
        }

    .presentationText {
        text-align: center;
        font-size: 120%;
        margin: 0;
        margin-bottom: 2%;
    }

    .presentationDomain {
        text-decoration: underline;
        margin: 0;
        text-align: center;
        font-size: 150%;
    }

    .sampleVideo {
        z-index: 100;
        border-radius: 50px;
        margin-top: 10%;
    }

    #sampleVideo1 {
        margin-left: 10%;
        height: 36%;
        width: 18%;
        transform: rotate(-3deg);
    }

    #sampleVideo2 {
        margin-left: 15%;
        transform: translateY(-2em);
        height: 36%;
        width: 18%;
        z-index: -3;
    }

    #sampleVideo3 {
        margin-left: 15%;
        transform: rotate(3deg);
        height: 36%;
        width: 18%;
    }

    .bigTextWant {
        font-weight: bolder;
        font-size: 2.3em;
        color: black;
    }

    #wantLink:hover {
        color: darkslategrey;
    }
    #btpWindow {
        width: 90%;
        height: 60%;
        left: 8%;
        top: 20%;
        position: absolute;
    }

    #renovationWindow {
        width: 90%;
        height: 80%;
        left: 8%;
        top: 170%;
        position: absolute;
    }

    #plomberieWindow {
        width: 90%;
        height: 70%;
        left: 8%;
        top: 340%;
        position: absolute;
    }

    #instalElecWindow {
        width: 90%;
        height: 70%;
        left: 8%;
        top: 500%;
        position: absolute;
    }

    #menuiserieWindow {
        width: 90%;
        height: 70%;
        left: 8%;
        top: 660%;
        position: absolute;
    }

    /* BTP */
    .presentationServicesPhotos {
        height: 220px;
        width: 123px !important;
        position: absolute;
        border: solid .4em black;
        border-radius: 17px;
    }

    #btpimage1 {
        position: absolute;
        left: 40%;
        top: 110%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(-5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #btpimage1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #btpimage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #btpimage1.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

    #btpimage2 {
        position: absolute;
        left: 40%;
        top: 110%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #btpimage2.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #btpimage2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #btpimage2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #btpimage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

    #btpVideo1 {
        height: 25%;
        width: 25%;
        position: absolute;
        left: 40%;
        top: 110%;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(7em);
        border: solid .4em black;
        border-radius: 17px;
        transition: transform 2s, z-index 2s;
    }

        #btpVideo1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #btpVideo1.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #btpVideo1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #btpVideo1.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

    #btpVideo2 {
        height: 25%;
        width: 25%;
        position: absolute;
        left: 40%;
        top: 110%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(0em) translateY(-7em);
        border: solid .4em black;
        border-radius: 17px;
        transition: transform 2s, z-index 2s;
    }

        #btpVideo2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #btpVideo2.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #btpVideo2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #btpVideo2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

    #shadowBTP {
        position: absolute;
        top: 10%;
        z-index: 4;
        left: -4em;
        background-color: rgba(0,0,0, 0.9);
        height: 180%;
        width: 140%;
        filter: blur(70px);
        display: none;
    }

    #separationBar1 {
        position: absolute;
        top: 68em;
        width: 100%;
        border: double 40px black;
        display: none;
    }
    /* RENOVATION */

    #renovationVideo1 {
        height: 25%;
        width: 25%;
        position: absolute;
        top: 280%;
        filter: grayscale(100%);
        z-index: 3;
        left: 40%;
        transform: translateX(-5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo1.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #renovationVideo1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #renovationVideo1.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

        #renovationVideo1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

    #renovationVideo4 {
        height: 25%;
        width: 25%;
        position: absolute;
        top: 280%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo4.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

        #renovationVideo4.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #renovationVideo4.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #renovationVideo4.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

    #renovationVideo2 {
        height: 25%;
        width: 25%;
        position: absolute;
        top: 280%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(0em) translateY(7em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #renovationVideo2.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #renovationVideo2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

    #renovationVideo3 {
        height: 25%;
        width: 25%;
        position: absolute;
        top: 280%;
        left: 40%;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(-7em);
        transition: transform 2s, z-index 2s;
    }

        #renovationVideo3.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #renovationVideo3.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

        #renovationVideo3.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #renovationVideo3.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

    .presentationServicesVideos {
        border: solid 0.4em black;
        border-radius: 17px;
        height: 220px !important;
        width: 123px !important;
        align-self: center;
    }

    #shadowRenovation {
        position: absolute;
        left: -10em;
        top: 76em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
        display: none;
    }

    #separationBar2 {
        position: absolute;
        top: 136em;
        width: 100%;
        border: double 40px black;
        display: none;
    }

    /* PLOMBERIE */
    #plomberieImage1 {
        position: absolute;
        top: 440%;
        filter: grayscale(100%);
        z-index: 3;
        left: 40%;
        transform: translateX(-5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieImage1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #plomberieImage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #plomberieImage1.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

    #plomberieImage2 {
        position: absolute;
        top: 440%;
        filter: grayscale(100%);
        z-index: 3;
        left: 40%;
        transform: translateX(0em) translateY(-7em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieImage2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #plomberieImage2.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #plomberieImage2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #plomberieImage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

    #plomberieImage3 {
        position: absolute;
        top: 440%;
        filter: grayscale(100%);
        z-index: 3;
        left: 40%;
        transform: translateX(5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieImage3.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #plomberieImage3.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #plomberieImage3.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #plomberieImage3.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

    #plomberieVideo {
        position: absolute;
        top: 440%;
        left: 40%;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(7em);
        transition: transform 2s, z-index 2s;
    }

        #plomberieVideo.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #plomberieVideo.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #plomberieVideo.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #plomberieVideo.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

    #shadowPlomberie {
        position: absolute;
        left: -10em;
        top: 143em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
        display: none;
    }

    #separationBar3 {
        position: absolute;
        top: 202em;
        width: 100%;
        border: double 40px black;
        display: none;
    }
    /* INSTALLATION ELECTRIQUE */
    #instalElecImage1 {
        position: absolute;
        top: 600%;
        filter: grayscale(40%);
        left: 40%;
        transform: translateX(-5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecImage1.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #instalElecImage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #instalElecImage1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

    #instalElecVideo1 {
        position: absolute;
        top: 600%;
        left: 40%;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateX(0em) translateY(-7em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecVideo1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #instalElecVideo1.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

        #instalElecVideo1.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #instalElecVideo1.pose2 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

    #instalElecImage2 {
        position: absolute;
        top: 600%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(5em) translateY(0em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecImage2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

        #instalElecImage2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #instalElecImage2.pose0 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #instalElecImage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

    #instalElecVideo2 {
        position: absolute;
        top: 600%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateX(0em) translateY(7em);
        transition: transform 2s, z-index 2s;
    }

        #instalElecVideo2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #instalElecVideo2.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #instalElecVideo2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #instalElecVideo2.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em) !important;
        }

    #shadowInstalElec {
        position: absolute;
        left: -10em;
        top: 209em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
        display: none;
    }

    #separationBar4 {
        position: absolute;
        top: 268em;
        width: 100%;
        border: double 40px black;
        display: none;
    }
    /* MENUISERIE */
    #menuiserieImage1 {
        position: absolute;
        top: 760%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateY(0em) translateX(5em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieImage1.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #menuiserieImage1.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #menuiserieImage1.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

    #menuiserieImage2 {
        position: absolute;
        top: 760%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateY(-7em) translateX(0em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieImage2.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em) !important;
        }

        #menuiserieImage2.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #menuiserieImage2.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #menuiserieImage2.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

    #menuiserieImage3 {
        position: absolute;
        top: 760%;
        left: 40%;
        filter: grayscale(100%);
        z-index: 3;
        transform: translateY(0em) translateX(-5em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieImage3.pose3 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #menuiserieImage3.pose0 {
            z-index: !important;
            transform: translateX(5em) translateY(0em) !important;
        }

        #menuiserieImage3.pose1 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

        #menuiserieImage3.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

    #menuiserieVideo {
        position: absolute;
        top: 760%;
        left: 40%;
        filter: grayscale(0%);
        z-index: 5;
        transform: translateY(7em) translateX(0em);
        transition: transform 2s, z-index 2s;
    }

        #menuiserieVideo.pose0 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em) !important;
        }

        #menuiserieVideo.pose1 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em) !important;
        }

        #menuiserieVideo.pose2 {
            filter: grayscale(100%);
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(00em) !important;
        }

        #menuiserieVideo.pose3 {
            filter: grayscale(0%);
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em) !important;
        }

    #menuiserieShadow {
        position: absolute;
        left: -10em;
        top: 275em;
        z-index: 4;
        background-color: rgba(0,0,0, 0.9);
        height: 140%;
        width: 180%;
        filter: blur(70px);
        display: none;
    }

    #separationBar5 {
        position: absolute;
        top: 335em;
        width: 100%;
        border: double 40px black;
        display: none;
    }

    .presentationServicesButtons {
        width: 5em;
        height: 20em;
        background: rgba(0, 0, 0, 0);
        offset: none;
        border: none;
    }

    .arrowButton {
        width: 1.6em;
        height: 1.5em;
        border-radius: .5em;
        background: rgba(0, 0, 0, 0);
        border-right: solid 0.8em white;
        border-top: solid 0.8em white;
        transform: rotate(45deg);
        transition: transform 1s, height 1s, width 1s, border-color 1s;
    }

    .arrowToTheLeft {
        transform: rotate(-135deg);
    }

    .arrowToTheRight:hover {
        border-color: dimgrey;
        transform: translateX(2em) rotate(45deg);
        height: 4.5em;
        width: 4.8em;
        filter: blur(.1em);
    }

    .arrowToTheRight:active {
        border-color: black;
        transform: translateX(2em) rotate(45deg);
        height: 4.5em;
        width: 4.8em;
        filter: blur(.1em);
    }

    .arrowToTheLeft:hover {
        transform: rotate(-135deg) translateX(4em) translateY(-2em);
        filter: blur(.1em);
        height: 4.5em;
        width: 4.8em;
        border-color: dimgrey;
    }

    .arrowToTheLeft:active {
        transform: rotate(-135deg) translateX(4em) translateY(-2em);
        filter: blur(.1em);
        height: 4.5em;
        width: 4.8em;
        border-color: black;
    }

    #buttonToTheRightBTP {
        top: 103%;
        left: 59%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftBTP {
        top: 103%;
        left: 33%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftRenovation {
        top: 275%;
        left: 33%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightRenovation {
        top: 275%;
        left: 59%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftPlomberie {
        top: 435%;
        left: 33%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightPlomberie {
        top: 435%;
        left: 59%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftInstalElec {
        top: 595%;
        left: 33%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightInstalElec {
        top: 595%;
        left: 59%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheLeftMenuiserie {
        top: 755%;
        left: 33%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    #buttonToTheRightMenuiserie {
        top: 755%;
        left: 59%;
        position: absolute;
        filter: grayscale(0%);
        z-index: 5;
    }

    .presentationServicesText {
        font-family: 'Baskerville Old Face';
        color: darkslategrey;
        font-weight: 700;
        font-size: 1em;
        align-self: center;
        text-align: center;
        margin: 0;
    }


    #contactFirst {
        position: absolute;
        top: 15%;
        left: 8%;
        width: 90%;
        text-align: center;
        z-index: 10;
        height: 5em;
        font-size: 2em
    }

    .container {
        position: absolute;
        background: rgba(0, 0, 0, 0.7);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 1);
        max-width: 500px;
        width: 100%;
        animation: fadeIn 1.5s ease-in-out;
        top: 40%;
        left: 16%;
    }

    #formH1 {
        text-align: center;
        margin-bottom: 20px;
        color: white;
    }

    label {
        display: block;
        margin-bottom: 10px;
        font-size: 1.1em;
    }

    input, textarea {
        width: calc(100% - 20px);
        padding: 10px;
        margin-bottom: 20px;
        border: none;
        border-radius: 5px;
        font-size: 1em;
    }

    textarea {
        resize: none;
        height: 100px;
    }

    #formButton {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 5px;
        background-color: #000;
        color: #fff;
        font-size: 1.2em;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
        z-index: 10;
    }

        #formButton:hover {
            background-color: #00aa00;
        }

        #formButton:active {
            background-color: #007700;
        }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .formLabel {
        color: white;
    }



    #switchToRussian {
        z-index: 50;
        width: 220px;
        height: 30px;
        color: white;
        background-color: #1c1c10;
    }

    #switchToFrench {
        z-index: 50;
        width: 220px;
        height: 30px;
        color: white;
        background-color: #1c1c10;
    }
}

    @media (max-width: 500px) {
        html {
            font-size: 10px;
        }

        button {
            cursor: url("Arrow.png"), auto;
        }

        .sidebar {
            width: 1em;
            background-color: #1e1e20;
            height: 100vH;
            color: white;
            padding: 15px;
            box-sizing: border-box;
            position: fixed; /* Fixed position */
            left: 0;
            top: 0;
            overflow-y: auto; /* Scroll if the content is too long */
            z-index: 21;
            border-right: solid 2px white;
            overflow-x: hidden;
        }

            .sidebar img {
                height: 7.1em;
                margin-left: 0px;
                display: none;
                transform: translateX(-0.7em);
                z-index: 32;
            }

            .sidebar h2 {
                text-align: center;
            }

            .sidebar ul {
                list-style-type: none;
                padding: 0;
                display: none;
                z-index: 31;
            }

                .sidebar ul li {
                    margin: 2em 0 0 0;
                    width: 95%;
                    border: 5px outset white;
                    border-radius: 10px;
                    user-select: none;
                }

                    .sidebar ul li a {
                        color: white;
                        text-decoration: none;
                        display: block;
                        padding: 10px 15px;
                        border-radius: 5px;
                        text-align: center;
                        font-family: "Baskervville SC", serif;
                        font-weight: 400;
                        font-size: 150%;
                    }

                        .sidebar ul li a:hover {
                            background-color: #fff;
                            color: black;
                        }

                        .sidebar ul li a:active {
                            background-color: #555;
                            border: 5px inset #fff;
                        }


        body {
            margin: 0;
            padding: 0;
        }

        .background {
            background: url(images/bgMarble.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: -6;
            overflow-y: auto; /* Scroll if the content is too long */
            background-attachment: fixed;
        }

        #homeBackground {
            height: 130%;
        }

        #servicesBackground {
            height: 760%;
        }

        #contactBackground {
            height: 160%;
        }

        h1, h2 {
            text-align: center;
        }

        .baskervville-sc-regular {
            position: absolute;
            font-family: "Baskervville SC", serif;
            font-weight: 400;
            font-style: normal;
            text-decoration: none;
            color: white;
        }

      
        .mainHeader {
            z-index: 19;
            background-color: #1e1e20;
            user-select: none;
            position: fixed;
            width: 100%;
            max-width: none;
            box-shadow: 20px 0 10px 10px rgba(0, 0, 0, 0.8);
            height: 14%;
            display: grid;
            grid-template-rows: repeat(20, 10%);
            grid-template-columns: repeat(20, 1fr);
        }
        #buttonArea {
            grid-column-start: 3;
            grid-column-end: 7;
            grid-row-start: 7;
            grid-row-end: 10;
        }
        #batiProfitTitle {
            grid-column-start: 3;
            grid-column-end: 10;
            grid-row-start: 1;
            grid-row-end: 7;
            margin: 0;
            font-size: 4em !important;
            text-decoration: none;
        }
        .instagramBatiProfit {
            grid-column-start: 13;
            grid-column-end: 24;
            grid-row-start: 4;
            grid-row-end: 4;
            display: flex;
            flex-flow: row-reverse;
        }

            .instagramBatiProfit img {
                height: 15px;
                width: 15px;
                order: 2;
                padding-top: 4px;
            }

            .instagramBatiProfit a {
                font-weight: bold;
                font-family: "Noto Sans", sans-serif;
                text-decoration: none;
                font-size: 1.7em;
                color: white;
            }


        .telephoneBatiProfit {
            grid-column-start: 24;
            grid-column-end: 12;
            grid-row-start: 6;
            grid-row-end: 6;
            display: flex;
            flex-flow: row-reverse;
        }

            .telephoneBatiProfit img {
                height: 15px;
                width: 15px;
                transform: rotate(45deg);
                order: 2;
                padding-top: 4px;
            }

            .telephoneBatiProfit a {
                font-weight: bold;
                font-family: "Noto Sans", sans-serif;
                text-decoration: none !important;
                font-size: 1.7em;
                margin-right: 0;
                color: white !important;
            }



        .mailBatiProfit {
            grid-column-start: 24;
            grid-column-end: 9;
            grid-row-start: 8;
            grid-row-end: 10;
            display: flex;
            flex-flow: row-reverse;
        }
        #mailIcon {
            width: 20px;
            height: 23px;
            order: 2;
        }
            .mailBatiProfit a {
                color: white;
                font-family: "Noto sans", sans-serif;
                font-weight: bold;
                font-size: 1.7em !important;
            }

        #sidebarOpeningButton {
            position: absolute;
            bottom: 50%;
            height: 5em;
            background: rgba(0, 0, 0, 0);
            offset: none;
            box-shadow: none;
        }

            #sidebarOpeningButton div {
                transform: translateX(-0.45em) rotate(45deg);
                height: 10%;
                width: 100%;
                border: solid white 5px;
                border-left: solid rgba(0, 0, 0, 0) 1px;
                border-bottom: solid rgba(0, 0, 0, 0) 1px;
                border-radius: 4px;
            }

            #sidebarOpeningButton:hover div {
                border: solid yellow 5px;
                border-left: solid rgba(0, 0, 0, 0) 1px;
                border-bottom: solid rgba(0, 0, 0, 0) 1px;
            }

        #sidebarClosingButton {
            position: absolute;
            bottom: 5%;
            height: 5%;
            width: 80%;
            background: rgba(0, 0, 0, 0);
            offset: none;
            box-shadow: none;
            display: none;
            outline: none;
        }

            #sidebarClosingButton div {
                transform: translateX(5.25em) rotate(225deg);
                height: 40%;
                width: 8%;
                border: solid white 5px;
                border-left: solid rgba(0, 0, 0, 0) 1px;
                border-bottom: solid rgba(0, 0, 0, 0) 1px;
                border-radius: 4px;
            }

            #sidebarClosingButton:hover div {
                border: solid red 5px;
                border-left: solid rgba(0, 0, 0, 0) 1px;
                border-bottom: solid rgba(0, 0, 0, 0) 1px;
            }

        #underlinedLogoSidebar {
            border: solid 1px white;
            position: absolute;
            top: 12%;
            display: none;
            width: 80%;
            height: 0;
        }

        .mainContent {
            width: 60%;
            background-color: #fff;
            filter: blur(0.2px);
            opacity: 0.8;
            border: solid black 3px;
            border-radius: 4em;
            top: 20%;
            height: fit-content;
            left: 23%;
            position: absolute;
        }

            .mainContent h1 {
                text-align: center;
                font-family: 'Baskerville Old Face';
                font-size: 3em;
                margin-top: 0.2em;
                margin-bottom: 0;
            }

            .mainContent p {
                margin-left: 10%;
                margin-right: 10%;
                margin-top: 5%;
                font-size: 120%;
                position: relative;
                text-align: center;
                width: auto;
            }

        .presentationDomain {
            width: 100%;
            text-decoration: underline;
            text-align: center;
            margin-top: 30px;
        }

        .sampleVideo {
            z-index: 10;
            border: unset 5px black;
            height: 25%;
            width: 25%;
            border-radius: 50px;
            position: absolute;
        }

        #sampleVideo1 {
            position: absolute;
            left: 10%;
            top: 90%;
            transform: rotate(-3deg);
            height: 40%;
            width: 40%;
            margin: 0;
        }

        #sampleVideo2 {
            transform: rotate(3deg);
            position: absolute;
            height: 40%;
            width: 40%;
            right: 2%;
            top: 90%;
            padding: 0;
            margin: 0;
        }

        #sampleVideo3 {
            display: none;
        }

        .bigTextWant {
            text-align: center;
            position: absolute;
            font-weight: bolder;
            font-size: 2.3em;
            left: 2px !important;
            color: black;
            margin: 0;
            padding: 0;
        }

        #wantLink:hover {
            color: darkslategrey;
        }

        #btpWindow {
            width: 90%;
            height: 60%;
            left: 8%;
            top: 20%;
            position: absolute;
        }

        #renovationWindow {
            width: 90%;
            height: 60%;
            left: 8%;
            top: 170%;
            position: absolute;
        }
        #plomberieWindow {
            width: 90%;
            height: 70%;
            left: 8%;
            top: 310%;
            position: absolute;
        }

        #instalElecWindow {
            width: 90%;
            height: 70%;
            left: 8%;
            top: 460%;
            position: absolute;
        }

        #menuiserieWindow {
            width: 90%;
            height: 70%;
            left: 8%;
            top: 610%;
            position: absolute;
        }

        /* BTP */
        .presentationServicesPhotos {
            height: 220px;
            width: 123px !important;
            position: absolute;
            border: solid .4em black;
            border-radius: 17px;
        }

        #btpimage1 {
            position: absolute;
            left: 40%;
            top: 110%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(-5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #btpimage1.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #btpimage1.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #btpimage1.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

        #btpimage2 {
            position: absolute;
            left: 40%;
            top: 110%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #btpimage2.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #btpimage2.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #btpimage2.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #btpimage2.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

        #btpVideo1 {
            height: 25%;
            width: 25%;
            position: absolute;
            left: 40%;
            top: 110%;
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em);
            border: solid .4em black;
            border-radius: 17px;
            transition: transform 2s, z-index 2s;
        }

            #btpVideo1.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #btpVideo1.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #btpVideo1.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #btpVideo1.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

        #btpVideo2 {
            height: 25%;
            width: 25%;
            position: absolute;
            left: 40%;
            top: 110%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(-7em);
            border: solid .4em black;
            border-radius: 17px;
            transition: transform 2s, z-index 2s;
        }

            #btpVideo2.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #btpVideo2.pose1 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #btpVideo2.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #btpVideo2.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

        #shadowBTP {
            position: absolute;
            top: 10%;
            z-index: 4;
            left: -4em;
            background-color: rgba(0,0,0, 0.9);
            height: 180%;
            width: 140%;
            filter: blur(70px);
            display: none;
        }

        #separationBar1 {
            position: absolute;
            top: 68em;
            width: 100%;
            border: double 40px black;
            display: none;
        }
        /* RENOVATION */

        #renovationVideo1 {
            height: 25%;
            width: 25%;
            position: absolute;
            top: 250%;
            filter: grayscale(100%);
            z-index: 3;
            left: 40%;
            transform: translateX(-5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #renovationVideo1.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #renovationVideo1.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #renovationVideo1.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

            #renovationVideo1.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

        #renovationVideo4 {
            height: 25%;
            width: 25%;
            position: absolute;
            top: 250%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #renovationVideo4.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

            #renovationVideo4.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #renovationVideo4.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #renovationVideo4.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

        #renovationVideo2 {
            height: 25%;
            width: 25%;
            position: absolute;
            top: 250%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em);
            transition: transform 2s, z-index 2s;
        }

            #renovationVideo2.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #renovationVideo2.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #renovationVideo2.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

        #renovationVideo3 {
            height: 25%;
            width: 25%;
            position: absolute;
            top: 250%;
            left: 40%;
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em);
            transition: transform 2s, z-index 2s;
        }

            #renovationVideo3.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #renovationVideo3.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

            #renovationVideo3.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #renovationVideo3.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

        .presentationServicesVideos {
            border: solid 0.4em black;
            border-radius: 17px;
            height: 220px !important;
            width: 123px !important;
            align-self: center;
        }

        #shadowRenovation {
            position: absolute;
            left: -10em;
            top: 76em;
            z-index: 4;
            background-color: rgba(0,0,0, 0.9);
            height: 140%;
            width: 180%;
            filter: blur(70px);
            display: none;
        }

        #separationBar2 {
            position: absolute;
            top: 136em;
            width: 100%;
            border: double 40px black;
            display: none;
        }

        /* PLOMBERIE */
        #plomberieImage1 {
            position: absolute;
            top: 400%;
            filter: grayscale(100%);
            z-index: 3;
            left: 40%;
            transform: translateX(-5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #plomberieImage1.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #plomberieImage1.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #plomberieImage1.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

        #plomberieImage2 {
            position: absolute;
            top: 400%;
            filter: grayscale(100%);
            z-index: 3;
            left: 40%;
            transform: translateX(0em) translateY(-7em);
            transition: transform 2s, z-index 2s;
        }

            #plomberieImage2.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #plomberieImage2.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #plomberieImage2.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #plomberieImage2.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

        #plomberieImage3 {
            position: absolute;
            top: 400%;
            filter: grayscale(100%);
            z-index: 3;
            left: 40%;
            transform: translateX(5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #plomberieImage3.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #plomberieImage3.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #plomberieImage3.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #plomberieImage3.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

        #plomberieVideo {
            position: absolute;
            top: 400%;
            left: 40%;
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(7em);
            transition: transform 2s, z-index 2s;
        }

            #plomberieVideo.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #plomberieVideo.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #plomberieVideo.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #plomberieVideo.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

        #shadowPlomberie {
            position: absolute;
            left: -10em;
            top: 143em;
            z-index: 4;
            background-color: rgba(0,0,0, 0.9);
            height: 140%;
            width: 180%;
            filter: blur(70px);
            display: none;
        }

        #separationBar3 {
            position: absolute;
            top: 202em;
            width: 100%;
            border: double 40px black;
            display: none;
        }
        /* INSTALLATION ELECTRIQUE */
        #instalElecImage1 {
            position: absolute;
            top: 550%;
            filter: grayscale(40%);
            left: 40%;
            transform: translateX(-5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #instalElecImage1.pose1 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #instalElecImage1.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #instalElecImage1.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

        #instalElecVideo1 {
            position: absolute;
            top: 550%;
            left: 40%;
            filter: grayscale(0%);
            z-index: 5;
            transform: translateX(0em) translateY(-7em);
            transition: transform 2s, z-index 2s;
        }

            #instalElecVideo1.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #instalElecVideo1.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

            #instalElecVideo1.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #instalElecVideo1.pose2 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

        #instalElecImage2 {
            position: absolute;
            top: 550%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(5em) translateY(0em);
            transition: transform 2s, z-index 2s;
        }

            #instalElecImage2.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

            #instalElecImage2.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #instalElecImage2.pose0 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #instalElecImage2.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

        #instalElecVideo2 {
            position: absolute;
            top: 550%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateX(0em) translateY(7em);
            transition: transform 2s, z-index 2s;
        }

            #instalElecVideo2.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #instalElecVideo2.pose1 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #instalElecVideo2.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #instalElecVideo2.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(7em) !important;
            }

        #shadowInstalElec {
            position: absolute;
            left: -10em;
            top: 209em;
            z-index: 4;
            background-color: rgba(0,0,0, 0.9);
            height: 140%;
            width: 180%;
            filter: blur(70px);
            display: none;
        }

        #separationBar4 {
            position: absolute;
            top: 268em;
            width: 100%;
            border: double 40px black;
            display: none;
        }
        /* MENUISERIE */
        #menuiserieImage1 {
            position: absolute;
            top: 700%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateY(0em) translateX(5em);
            transition: transform 2s, z-index 2s;
        }

            #menuiserieImage1.pose1 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #menuiserieImage1.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #menuiserieImage1.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

        #menuiserieImage2 {
            position: absolute;
            top: 700%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateY(-7em) translateX(0em);
            transition: transform 2s, z-index 2s;
        }

            #menuiserieImage2.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(0em) !important;
            }

            #menuiserieImage2.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #menuiserieImage2.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #menuiserieImage2.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

        #menuiserieImage3 {
            position: absolute;
            top: 700%;
            left: 40%;
            filter: grayscale(100%);
            z-index: 3;
            transform: translateY(0em) translateX(-5em);
            transition: transform 2s, z-index 2s;
        }

            #menuiserieImage3.pose3 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #menuiserieImage3.pose0 {
                z-index: !important;
                transform: translateX(5em) translateY(0em) !important;
            }

            #menuiserieImage3.pose1 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

            #menuiserieImage3.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

        #menuiserieVideo {
            position: absolute;
            top: 700%;
            left: 40%;
            filter: grayscale(0%);
            z-index: 5;
            transform: translateY(7em) translateX(0em);
            transition: transform 2s, z-index 2s;
        }

            #menuiserieVideo.pose0 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(-5em) translateY(0em) !important;
            }

            #menuiserieVideo.pose1 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(0em) translateY(-7em) !important;
            }

            #menuiserieVideo.pose2 {
                filter: grayscale(100%);
                filter: grayscale(100%);
                z-index: 3;
                transform: translateX(5em) translateY(00em) !important;
            }

            #menuiserieVideo.pose3 {
                filter: grayscale(0%);
                filter: grayscale(0%);
                z-index: 5;
                transform: translateX(0em) translateY(7em) !important;
            }

        #menuiserieShadow {
            position: absolute;
            left: -10em;
            top: 275em;
            z-index: 4;
            background-color: rgba(0,0,0, 0.9);
            height: 140%;
            width: 180%;
            filter: blur(70px);
            display: none;
        }

        #separationBar5 {
            position: absolute;
            top: 335em;
            width: 100%;
            border: double 40px black;
            display: none;
        }

        .presentationServicesButtons {
            width: 5em;
            height: 20em;
            background: rgba(0, 0, 0, 0);
            offset: none;
            border: none;
        }

        .arrowButton {
            width: 1.6em;
            height: 1.5em;
            border-radius: .5em;
            background: rgba(0, 0, 0, 0);
            border-right: solid 0.8em white;
            border-top: solid 0.8em white;
            transform: rotate(45deg);
            transition: transform 1s, height 1s, width 1s, border-color 1s;
        }

        .arrowToTheLeft {
            transform: rotate(-135deg);
        }

        .arrowToTheRight:hover {
            border-color: dimgrey;
            transform: translateX(2em) rotate(45deg);
            height: 4.5em;
            width: 4.8em;
            filter: blur(.1em);
        }

        .arrowToTheRight:active {
            border-color: black;
            transform: translateX(2em) rotate(45deg);
            height: 4.5em;
            width: 4.8em;
            filter: blur(.1em);
        }

        .arrowToTheLeft:hover {
            transform: rotate(-135deg) translateX(4em) translateY(-2em);
            filter: blur(.1em);
            height: 4.5em;
            width: 4.8em;
            border-color: dimgrey;
        }

        .arrowToTheLeft:active {
            transform: rotate(-135deg) translateX(4em) translateY(-2em);
            filter: blur(.1em);
            height: 4.5em;
            width: 4.8em;
            border-color: black;
        }
        #buttonToTheRightBTP {
            top: 103%;
            left: 67%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheLeftBTP {
            top: 103%;
            left: 33%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheLeftRenovation {
            top: 235%;
            left: 33%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheRightRenovation {
            top: 235%;
            left: 67%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheLeftPlomberie {
            top: 395%;
            left: 33%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheRightPlomberie {
            top: 395%;
            left: 67%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheLeftInstalElec {
            top: 540%;
            left: 33%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheRightInstalElec {
            top: 540%;
            left: 67%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheLeftMenuiserie {
            top: 690%;
            left: 33%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        #buttonToTheRightMenuiserie {
            top: 690%;
            left: 67%;
            position: absolute;
            filter: grayscale(0%);
            z-index: 5;
        }

        .presentationServicesText {
            font-family: 'Baskerville Old Face';
            color: darkslategrey;
            font-weight: 700;
            font-size: 1em;
            align-self: center;
            text-align: center;
            margin: 0;
        }

        #contactFirst {
            position: absolute;
            text-align: center;
            z-index: 10;
            width: 80%;
            height: 5em;
            left: 15%;
            top: 15%;
            font-size: 2em
        }

        .container {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 1);
            max-width: 500px;
            width: 60%;
            animation: fadeIn 1.5s ease-in-out;
            margin-top: 50%;
            left: 20%;
        }

        #formH1 {
            text-align: center;
            margin-bottom: 20px;
            color: white;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        input, textarea {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 20px;
            border: none;
            border-radius: 5px;
            font-size: 1em;
        }

        textarea {
            resize: none;
            height: 100px;
        }

        #formButton {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background-color: #000;
            color: #fff;
            font-size: 1.2em;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
            z-index: 10;
        }

            #formButton:hover {
                background-color: #00aa00;
            }

            #formButton:active {
                background-color: #007700;
            }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .formLabel {
            color: white;
        }



        #switchToRussian {
            z-index: 50;
            width: 100%;
            height: 30px;
            color: white;
            background-color: #1c1c10;
        }

        #switchToFrench {
            z-index: 50;
            width: 100%;
            height: 30px;
            color: white;
            background-color: #1c1c10;
        }
    }