#portfolio-menu {
    display: none;
    overflow: visible;
}

#vertical-hexgrid {
    margin-left: 850px;
    display: grid;
    grid-template-columns: repeat(var(--Nhexa), 1fr);
    grid-gap: var(--gap);

    opacity: 0;

    overflow: visible;
}

.vertical-hex {
    width: var(--size);
    height: calc(var(--size) / 1.1111111);

    margin-right: calc(var(--size) / 2);
    color: #fff;
    overflow: visible;

    filter: brightness(60%);
    -webkit-filter: brightness(60%);
    -moz-filter: brightness(60%);
    -o-filter: brightness(60%);
    -ms-filter: brightness(60%);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;


}

.vertical-hex:hover {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
    -moz-filter: brightness(120%);
    -o-filter: brightness(120%);
    -ms-filter: brightness(120%);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

.vertical-hex.active {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;


}

.hex-clip {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;

    -webkit-mask-image: url(/images/svg/hexagon.svg);
    mask-image: url(/images/svg/hexagon.svg);
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vertical-hex:nth-child(2n) {
    margin-top: calc(var(--size) * .5);
    margin-right: calc(var(--size) * -.25);
    margin-bottom: calc(var(--size) * -.5);
    margin-left: calc(var(--size) * -.75);
}

.vertical-hex-img {
    height: 100%;
}


.vertical-hex-text {
    position: absolute;
    text-align: center;
    font-family: 'Aldrich', sans-serif;
    font-size: 1.2vw;
    letter-spacing: -1px;
    color: #eee;
    -webkit-text-stroke: 1px #1F2633;
    text-shadow: 0px 2px #1F2633;
}

.vertical-hex.active .vertical-hex-text {
    color: #1F2633;
    -webkit-text-stroke: 0px #1F2633;
}

.vertical-hex-textbox {
    position: absolute;
    width: 100%;
    height: 2vw;
    background-color: #1F2633;
    opacity: 0.75;
}

.vertical-hex.active .vertical-hex-textbox {
    background-color: #FFB000;
}

.border-hex {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(/images/svg/hexagon_border.svg);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.outline-hex {
    width: 104%;
    height: 105%;
    position: absolute;
    background-image: url(/images/svg/hexagon_ouline.svg);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.vertical-hex.active .outline-hex {
    background-image: url(/images/svg/hexagon_ouline-active.svg);
}