@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: 15.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;

}