#intro-video, #intro-image {
    filter: var(--videofilter);
}

.Introduction-success-send {
    display: none;

}


/*----------- DESCTOP ---------------------------------------------------*/
@media screen and (min-width: 769px) {

    .Introduction {
        position: relative;
        width: 100%;
        margin-top: -176px;
        z-index: 200;
    }

    #intro-video, #intro-image {
        min-width: 1586px;
        display: block;
    }

    .intro-video-wrapper,
    .intro-image-wrapper,
    .Introduction-Desc {
        overflow: hidden;
        height: 668px;

    }

    .Introduction-Desc {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        z-index: 400;
        padding-top: 254px;
        background: linear-gradient(180deg, #ffffff00 88%, var(--color0) 86px, var(--color4));
    }

    .Introduction-Header {
        display: block;
        transform: translateX(-10%) scale(0.8) !important;
        font-size: xxx-large;
        font-weight: 500;
        margin-bottom: 40px;
        color: var(--color7);
    }

    .Introduction-About {
        display: block;
        font-weight: 500;
        font-size: xx-large;
        margin: 24px 0 38px 0px;
        color: var(--color7);
    }

    .intro-content-wrapper {
        display: grid;
        grid-template-columns: 6fr 3fr;
        gap: 24px;
        overflow: visible;
    }

    .intro-illustration {
        display: flex;
        flex-direction: row-reverse;
    }

    .intro-monitor {
        width: 384px;
        transform: scale(1.2) translateY(-28px) translateX(-32px);
        position: relative;
        filter: var(--brightness);
    }

    .intro-content {
        text-align: left;
    }

    .intro-content a{
        margin: 0 18px 18px 0;
        /* width: 14vw; */
    }


}


/*----------- MOBILE ----------------------------------------------------*/
@media screen and (max-width: 768px) {

    /*--------- CONTENT ----------------------------*/

    .Introduction {
        position: relative;
        width: 100%;
        margin-top: -198px;
        z-index: 200;
    }

    .intro-video-wrapper,
    .intro-image-wrapper,
    .Introduction-Desc {
        overflow: hidden;
        height: 856px;

    }

    .Introduction-Desc {
        position: absolute;
        margin-top: 0vw;
        padding-top: 44vw;
        box-sizing: border-box;
        z-index: 500;
        background: linear-gradient(180deg, #ffffff00 94%, var(--color0) 40px, var(--color2));
    }

    .intro-content-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }


    .Introduction-Header {
        display: block;
        font-size: x-large;
        margin-bottom: 24px;
        font-weight: 500;
        color: var(--color7);
        /*	text-shadow: 1px 1px 14px #00000059;*/
    }


    .Introduction-About {
        display: block;
        font-size: larger;
        line-height: 1.5;
        margin-bottom: 1.8rem;
        /*	text-shadow: 1px 1px 14px #00000059;*/
    }

    .intro-content {
        text-align: left;
    }

    .intro-content a{
        margin: 0 0 18px 0;
        /* width: 40vw; */
    }

    .intro-illustration {
        padding: 14px 0 32px 0;
        text-align: center;
    }

    .intro-illustration img{
        width: 70%;
    }





}