/* gondole */
[id="index_logo"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

[id="index_logo"] svg {
    display: block;
    width:100%;
    height: auto;
}

[id="gondole"] {
    position: relative;
    overflow: hidden;
}


[id="gondole"] video {
    height: auto;
}

[id="gondole"] h1 {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-weight: 400;
    color : var(--sand-gold);
    margin-bottom: 40px;
}

[id="gondole"] h1:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 90%;
    bottom: 90%;
    border-left: 1px solid var(--sand-gold);
    border-top: 1px solid var(--sand-gold);
}

[id="gondole"] h1:after {
    content: "";
    display: block;
    position: absolute;
    top: 90%;
    left: 90%;
    right: 0;
    bottom: 0;
    border-right: 1px solid var(--sand-gold);
    border-bottom: 1px solid var(--sand-gold);
}

[id="gondole"] h1 span {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    /*text-shadow: -1px -1px black;*/
}

[id="gondole"] img,
[id="gondole"] video {
    width: 100%;
}

[id="gondole"] h1 {
    font-size: 3vw;
}

[id="gondole"] h1 span {
    font-size: 6vw;
}

[id="index_logo"] {
    width: 25%;
}

/*mobile portrait*/
@media screen and (max-width: 767px) and (orientation: portrait) {

    [id="gondole"] h1 {
        font-size: 1.3rem;
        /*width: 100%;*/
        white-space: wrap;
        padding: 1rem;
    }

    [id="gondole"] h1 span {
        font-size: 2rem;
    }

    [id="gondole"] img {
        /*filter: blur(1px) brightness(0.7);*/
    }

    [id="index_logo"] {
        width: 50%;
    }
}

@media (min-width: 1024px) {

    [id="gondole"] img,
    [id="gondole"] video {
        /*filter: blur(10px) brightness(0.3);*/
        transition: filter 2000ms;
    }

    [id="gondole"]:hover img,
    [id="gondole"]:hover video {
        /*filter: blur(0px) brightness(1.2);*/
    }

}