@keyframes buttonsAnim {
    from {
        left: 125vw;
    }
    to {
        left: 78.85vw;
    }
}
@keyframes apAnim {
    0% {
        top: 100%;
        opacity: 0;
    }
    25% {
        top: 100%;
        opacity: 0;
    }
    100% {
        top: 3.88%;
        opacity: 1;
    }
}
.filter {
    opacity: 0.7;
}
.foreground * {
    position: absolute;
}
.foreground .element{
    width: auto;
    height: 93%;
    top: 3.88%;
    left: 13.54%;
    animation: apAnim 1.6s ease-in-out;
}
.foreground .logo-img {
    width: 18.07%;
    top: 7.77%;
    left: 61.71%;
}
.button-list {
    position: absolute;
    bottom: 4.35vh;
    left: 78.85vw;
    z-index: 5;
    animation: buttonsAnim 1s ease-in-out;
}
.button-item span {
    padding-left: 3.75vw;
    padding-right: 1.45vw;
}
.button-item a {
    width: 25.41vw;
    height: 7.87vh;
    background-color: rgba(0, 0, 0, 0.3);
    clip-path: polygon(16.2% 0, 100% 0, 83.8% 100%, 0 100%, 16.2% 0);
    margin: 1.38% auto;
    display: flex;
    align-items: center;
    font-size: 3.24vh;
    color: #fff;
    transition: 200ms;
}
.button-item a:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.button-item:nth-child(2) a {
    margin-left: -17%;
}
.button-item:nth-child(3) a {
    margin-left: -34%;
}
.button-item:nth-child(4) a {
    margin-left: -51%;
}
.button-item:nth-child(5) a {
    margin-left: -68%;
}
.button-item:nth-child(6) a {
    margin-left: -85%;
}
.button-item img {
    object-fit: contain;
    margin-top: 0.46vh;
}
.button-item:nth-child(1) img {
    width: 3.9vw;
    height: 4.72vh;
}
.button-item:nth-child(2) img {
    width: 3.43vw;
    height: 6.11vh;
}
.button-item:nth-child(3) img {
    width: 2.6vw;
    height: 6.29vh;
}
.button-item:nth-child(4) img {
    width: 3.8vw;
    height: 5.27vh;
}
.button-item:nth-child(5) img {
    width: 3.17vw;
    height: 5.92vh;
}
.button-item:nth-child(6) img {
    width: 4.42vw;
    height: 5.64vh;
}