.home-intro {
    display: flex;
    align-items: center;
    max-height: calc(var(--vh, 1vh) * 100);
    transition: max-height 0.6s linear;
    position: relative;
    min-height: 600px;
    overflow: hidden;
    height: 100vh;
    height: calc(var(--vh) * 100);
}

.home-intro .section-details {
    max-width: 800px;
    text-align: center;
    margin: 0 auto;
}

.home-intro h1 {
    font-size: 3em;
    margin-bottom: 0.25em;
}

/* logo intro */
.intro-logo {
    position: absolute;
    width: 100%;
    padding: 2em;
    opacity: .03;
    object-fit: cover;
    height: 100%;
}

.intro-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-circle img {
    width: 100%;
}


/* Screens */
.scene {
    position: absolute;
    top: 10%;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    opacity: .8;
}

.intro-screen img {
    width: 100%;
}

/* Intro loader */
.intro-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s ease-out 2s;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;

}

.loader-logo {
    max-width: 15em;
    max-height: 15em;
    padding: 2em;
    z-index: 3;
}

.loader-logo svg {
    width: 100%;
}


.carrousel-square .csl {
    opacity: 0;
    filter: blur(5em);
}


.intro-loader .intro-loader-bg {
    background: var(--carrousel_grey);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
    width: 100%;
    height: 100%;
}

.intro-loader.loading .intro-loader-bg {
    left: 0;
}

/* text */
body.home .home-intro h1,
body.home .home-intro .big-text,
body.home .home-intro .btn {
    position: relative;
}


/* ===================================== Responsive  ===================================== */

/*  Tablet Portrait  */
@media screen and (min-width: 768px) {

    .home-intro h1 {
        font-size: 4em;
    }

    .logo-circle {
        width: 40em;
        height: 40em;
        margin-left: -20em;
        margin-top: -20em;
    }

    .scene {
        top: 0;
    }

}

/* Desktop  */
@media screen and (min-width: 1024px) {

    .home-intro h1 {
        font-size: 4.5em;
    }

    .logo-circle {
        width: 50em;
        height: 50em;
        top: 50%;
        margin-top: -25em;
        margin-left: -5em;
    }

}