#routekaart {
	position: relative;
	width: 100%;
	max-width: 1814px;
  padding-top: 50%;
	background-image: url('routekaart.png');
	background-repeat: no-repeat;
	background-size: cover;
  background-position: center;
	overflow: hidden;
}

#routekaart.logo {
	background-image: url('routekaart-logo.png');
}

.routekaart-button, .routekaart-button:hover, .routekaart-button:focus {
	display: block;
	position: absolute;
	width: 14.11245865490628%;
	height: 28.22491730981257%;
	max-width: 256px;
	max-height: 256px;
	outline: solid .06em #00bff3;
	border-radius: 100%;
}

.routekaart-button:hover, .routekaart-button:focus {
	background-color: #fff;
}

.routekaart-button::before, .routekaart-button::after {
	position: absolute;
	content: "";
	width: 86%;
	height: 86%;
	margin: 7%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 100%;
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-ms-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.routekaart-button::before {
	outline: solid .12em #00bff3;
	box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.1);
  -moz-box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.1);
  -webkit-box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.1);
  -o-box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.1);
}

.routekaart-button::after {
	opacity: 0;
	background-color: #00bff3;
	box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.05);
  -moz-box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.05);
  -webkit-box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.05);
  -o-box-shadow: 1vw 1vw .75vw rgba(0,0,0,0.05);
}

.routekaart-button:hover::before,
.routekaart-button:focus::before {
	outline-color: transparent !important;
}

.routekaart-button:hover::after,
.routekaart-button:focus::after {
	opacity: 100;
}

#routekaart-button-5:hover, #routekaart-button-6:hover, #routekaart-button-7:hover,
#routekaart-button-5:focus, #routekaart-button-6:focus, #routekaart-button-7:focus {
	background-color: #ffd66e;
}

#routekaart-button-5, #routekaart-button-6, #routekaart-button-7,
#routekaart-button-5::before, #routekaart-button-6::before, #routekaart-button-7::before {
	outline-color: #ff2e24;
}

#routekaart-button-5::after, #routekaart-button-6::after, #routekaart-button-7::after {
	background-color: #ff2e24;
}

#routekaart-button-1 {
	top: 60.41896361631753%;
	left: 3.08710033076075%;
}

#routekaart-button-2 {
	top: 23.26350606394708%;
	left: 8.213891951488423%;
}

#routekaart-button-3 {
	top: 23.15325248070562%;
	left: 29.54796030871003%;
}

#routekaart-button-4 {
	top: 11.24586549062845%;
	left: 46.36163175303197%;
}

#routekaart-button-5 {
	top: 60.97023153252481%;
	left: 53.14222712238148%;
}

#routekaart-button-6 {
	top: 63.39581036383682%;
	left: 78.99669239250276%;
}

#routekaart-button-7 {
	top: 31.64277839029768%;
	left: 84.0683572216097%;
}

#routekaart-button-1::before {
	background-image: url('routekaart-button-1.png');
}

#routekaart-button-2::before {
	background-image: url('routekaart-button-2.png');
}

#routekaart-button-3::before {
	background-image: url('routekaart-button-3.png');
}

#routekaart-button-4::before {
	background-image: url('routekaart-button-4.png');
}

#routekaart-button-5::before {
	background-image: url('routekaart-button-5.png');
}

#routekaart-button-6::before {
	background-image: url('routekaart-button-6.png');
}

#routekaart-button-7::before {
	background-image: url('routekaart-button-7.png');
}

#routekaart-button-1::after {
	background-image: url('routekaart-button-1h.png');
}

#routekaart-button-2::after {
	background-image: url('routekaart-button-2h.png');
}

#routekaart-button-3::after {
	background-image: url('routekaart-button-3h.png');
}

#routekaart-button-4::after {
	background-image: url('routekaart-button-4h.png');
}

#routekaart-button-5::after {
	background-image: url('routekaart-button-5h.png');
}

#routekaart-button-6::after {
	background-image: url('routekaart-button-6h.png');
}

#routekaart-button-7::after {
	background-image: url('routekaart-button-7h.png');
}