.activeChevron {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.inactiveChevron {
    background-color: var(--color-light-blue);
    color: var(--color-black);
}

.navigationButton {
    position: absolute;
    cursor: pointer;

    padding: 15px 10px;		/* top/bottom  left/right */
    width: 160px;
    height: 20px;

    font-family: "Nunito Sans", sans-serif;
    //font-weight: bold;
    font-size: 16px;
}


.PersonalButton {
    margin-left: 200px;
    border-radius: 25px 0px 0px 25px;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.MusicalButton {
    margin-left: 368px;
    clip-path: polygon(0% 0%, 10% 50%, 0% 100%, 90% 100%, 100% 50%, 90% 0%);
}
.AccommodationButton {
    margin-left: 536px;
    clip-path: polygon(0% 0%, 10% 50%, 0% 100%, 90% 100%, 100% 50%, 90% 0%);
}
.OtherButton {
    margin-left: 704px;
    border-radius: 0px 25px 25px 0px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 50%);
}


@media screen and (max-width: 1200px) {
    .navigationButton {
	padding: 12px 8px;
	padding-bottom: 20px;
	width: 120px;
	height: 10px;
	font-size: 13px;
    }
    .PersonalButton {
	margin-left: 30px;
    }
    .MusicalButton {
	margin-left: 156px;
    }
    .AccommodationButton {
	margin-left: 282px;
    }
    .OtherButton {
	margin-left: 408px;
    }
}

@media screen and (max-width: 700px) {
    .navigationButton {
	padding: 12px 8px;
	padding-bottom: 20px;
	width: 100px;
	height: 6px;
	font-size: 12px;
    }
    .PersonalButton {
	margin-left: 0px;
	width: 90px;
    }
    .MusicalButton {
	margin-left: 98px;
	width: 90px;
    }
    .AccommodationButton {
	margin-left: 196px;
    }
    .OtherButton {
	margin-left: 304px;
	width: 60px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15% 50%);
    }
}
@media screen and (max-width: 400px) {
    .navigationButton {
	padding: 8px 8px;
	padding-bottom: 20px;
	//width: 100px;
	//height: 6px;
	//font-size: 12px;
    }
    .PersonalButton {
	margin-left: -4px;
	width: 70px;
    }
    .MusicalButton {
	margin-left: 78px;
	width: 70px;
    }
    .AccommodationButton {
	margin-left: 159px;
	clip-path: polygon(0% 0%, 9% 50%, 0% 100%, 91% 100%, 100% 50%, 91% 0%);
    }
    .OtherButton {
	margin-left: 268px;
	width: 54px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 15% 50%);
    }
}

@media screen and (min-width: 400px) {
    .PersonalButton::after {
	content: " Info";
    }
    .MusicalButton::after {
	content: " Info";
    }
}