.menu-container {
    width: 175px;
    display: flex;
    flex-direction: column;
    color: #fff;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

@media (max-width: 767px) {
    .menu-hidden__mobile {
        display: none;
    }
}


.menu-container a {
    width: 100% ;
}

.menu-item {
    width: 100%;
    display: flex;
    flex: 1 1 0px;
    flex-grow: 1;
    padding: 18px;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.menu-item:hover:after {
    position: absolute;
    content: '';
    width: 32px;
    height: 50%;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    background-color: currentColor;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    z-index: 2;
}

.menu-item::after, .menu-item:after {
    z-index: 3;
}

.menu-item a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.menu-item__image {
    padding: 0;

}

.menu-item img {
    max-width: calc(100% - 20px)
}

.menu-item span, .menu-item:hover span, .menu-item:hover a, .menu-container a, .menu-container a:hover {
    color: #fff;
    text-decoration: none;
}


.menu-item__home {
    background-color: #175E48;
    color: #175E48;
}

.menu-item__whatis {
    background-color: #27A267;
    color: #27A267;
}

.menu-item__diag {
    background-color: #28A37D;
    color: #28A37D;
}

.menu-item__cap {
    background-color: #28A39B;
    color: #28A39B;
}

.menu-item__lib {
    background-color: #2CB6AE;
    color: #2CB6AE;
}

.menu-item__cons {
    background-color: #00A69C;
    color: #00A69C;
}