/* Copyright Mehdi Hachem from Weynspire - Follow me on LinkedIn: https://www.linkedin.com/in/mehdi-hachem-54a8672b0/ */

.tree_img_in_one {
    position: relative;
    width: 80%;
    padding-top: 50%;
    margin: 2rem auto;

    >.block {
        position: absolute;
        height: 60%;
        width: 30%;
        perspective: 1000px;

        &:nth-of-type(1) {
            height: 60%;
            top: 10%;
            left: 17%;
            width: 15%;
        }

        &:nth-of-type(2) {
            top: 0;
            left: 35%;
        }

        &:nth-of-type(3) {
            height: 60%;
            top: 10%;
            left: 64%;
            width: 15%;
        }
    }

    >.block>.side {
        position: absolute;
        top: 0;
        left: 0;

        background-size: auto 100%;
        box-shadow: -1vw 0.5vw 1vw rgba(0, 0, 0, 0.3);

        &.-main {
            height: 100%;
            width: 100%;
            transform: rotateY(30deg);
            transform-origin: 0 50%;
        }

        &.-left {
            height: 100%;
            width: 20%;
            transform-origin: 0 50%;
            transform: rotateY(-60deg) translateX(-100%);
            filter: brightness(40%);
        }
    }

    >.block:nth-of-type(1)>.side {
        &.-main {
            background-position: 4% 50%;
            background-size: auto 130%;
        }

        &.-left {
            background-position: 0 50%;
            background-size: auto 130%;
        }
    }

    >.block:nth-of-type(2)>.side {
        &.-main {
            background-position: 50% 0;
        }

        &.-left {
            background-position: 28.5% 0;
        }
    }

    >.block:nth-of-type(3)>.side {
        &.-main {
            background-position: 96% 50%;
            background-size: auto 130%;
        }

        &.-left {
            background-position: 78% 50%;
            background-size: auto 130%;
        }
    }
}









.scroll-text {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    border: 1px solid #000000;
    padding: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-text::-webkit-scrollbar {
    display: none;
}

.h1-apropos {
    border-bottom: 2px solid black;
    padding-bottom: 2px;
}

.text-apropos {
    margin-left: 5vw;
    line-height: 1.6;
}

.div-img-apropos {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 4vh;
    right: 2vw;
}

.spacing-page {
    height: 20vh;
}

.border-img {
    width: 100%;
    height: 424.34px;
    padding: 50px;
    position: relative;
}

@media screen and (max-width: 820px) {
    .text-apropos {
        margin-top: 100%;
    }

    .border-img {
        width: 95vw;
    }

    .spacing-page {
        height: 5vh;
    }



}

@media screen and (max-width: 768px) {
    .text-apropos {
        margin-top: 100%;
    }

    .border-img {
        width: 95vw;
    }

    .spacing-page {
        height: 5vh;
    }


}

@media screen and (max-width: 560px) {
    .text-apropos {
        margin-top: 5vh;
        margin-left: 10vw;
    }

    .div-img-apropos {
        right: 8%;
    }

    .spacing-page {
        height: 5vh;
    }
}

@media screen and (max-width: 414px) {
    .m-img {
        width: 95%;
    }

    .text-apropos {
        margin-top: 5vh;
        margin-left: 8vw;
    }

    .div-img-apropos {
        right: 8%;
    }

    .spacing-page {
        height: 5vh;
    }
}

@media screen and (max-width: 376px) {
    .m-img {
        width: 95%;
    }

    .div-img-apropos {
        right: 8%;
    }

    .text-apropos {
        margin-top: 5vh;
        margin-right: 10vw;
    }

    .spacing-page {
        height: 5vh;
    }
}