.sameLevelNavigationWrapper .h2 {
    text-align: center;
    margin-bottom: var(--space-30);
}

.sameLevelNavigation {
    display: flex;
    padding: 0 4.5rem;
    justify-content: center;
    width: 100%;
}

.navigationEntryWrapper {
    /*width: 100%;*/
    position: relative;
    overflow: hidden;
}

.navigationEntryInnerWrapper {
    display: flex;
    flex-direction: row;
    justify-content:  flex-start;
}


.sameLevelNavigation .navigationEntry {
    width: calc(17.5rem - 1rem);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;

    margin: 0 0.5rem;
    text-align: center;
    padding: var(--space-10) var(--space-30);
    background-color: var(--color-grey);
    flex-shrink: 0;
    transition: opacity 0.2s, background-color 0.2s;
    word-break: break-word;
}
.sameLevelNavigation .navigationEntry a {
    text-decoration: none;
}

.sameLevelNavigation .navigationEntry:hover {
    opacity: 0.7;
}

.sameLevelNavigation .navigationEntry:hover .h5,
.sameLevelNavigation .navigationEntry.active .h5 {
    color: var(--color-grey);
}

.sameLevelNavigation .control .icon {
    font-size: 3rem;
    color: var(--color-text);
    opacity: 0.5;
    transition: opacity 0.2s;
    cursor: pointer;
}


.sameLevelNavigation .control:hover .icon {
    opacity: 1;
}

.sameLevelNavigation .control {
    position: absolute;
    top: 50%;
    height: 4rem;
    width: 4rem;
    background-color: var(--color-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2rem;
}

.sameLevelNavigation .control.control-left { left: 0; }
.sameLevelNavigation .control.control-right { right: 0; }