#go_strand-canvas-wrapper {
	position: relative;
	overflow: hidden;
	margin-bottom: 50px;
}
#go_strand-canvas {
	width: 100%;
}
#go_strand-zoom-buttons {
	position: absolute;
    top: 15px;
    right: 15px;
}
#go_strand-zoom-buttons .btn {
	padding: 5px 10px;	
}
#go_strand-year-button-wrapper {
	width: 100%;
}
#go_strand-year-slider-wrapper {
	width: 100%;
}
#go_strand-year-slider-wrapper input {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 100%; /* Full-width */
	height: 4px; /* Specified height */
	background: black; /*#d3d3d3; /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
}
/* Mouse-over effects */
#go_strand-year-slider-wrapper input:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

#go_strand-year-slider-wrapper input[type="range"]::-webkit-slider-container {
/*	margin: 0 -10px; */
	min-block-size: 0;
    transform: translateY(calc(-50% + 2px)); /* 2px is helft van hoogte slider */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#go_strand-year-slider-wrapper input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 5px solid #FFE700;
 /*   border-color: var(--primary); */
    border-radius: 50%;
    background: black;
    outline: 2px solid black;
    cursor: pointer;
	
	/*
	width: 28px;  
	height: 20px; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	background: #000;
	background: var(--primary);
	background-clip: padding-box;
	cursor: pointer;
	*/
}

#go_strand-year-slider-wrapper input::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #000;
  background: var(--primary);
  cursor: pointer; /* Cursor on hover */
}


#go_strand-year-slider-wrapper datalist {
	display: flex;
	justify-content: space-between;
	color: #000;
	color: var(--primary);
	width: 100%;
    cursor: pointer;
}

.go_strand-tickmark {
	padding: 0;
}

#go_strand-year-background-button-wrapper {
	width: 120px;
}

#go_strand-heden,
#go_strand-verleden {
	display: none;
}
#go_strand-heden + label ,
#go_strand-verleden + label {
	width: 38px;
	height: 38px;
	border: 1px solid #ccc;
	cursor: pointer;
	margin-bottom: 0;
	margin-right: 5px;
	float: right;
	filter: grayscale(100%);
	transition: all 0.3s;
}
#go_strand-heden + label {
	background-image: url("img/btn-heden.jpg");
	background-size: contain;
}
#go_strand-verleden + label {
	background-image: url("img/btn-verleden.jpg");
	background-size: contain;
}

#go_strand-heden + label:hover,
#go_strand-verleden + label:hover {
	filter: grayscale(0%);
}
#go_strand-heden:checked + label,
#go_strand-verleden:checked + label {
	filter: grayscale(0%);
	border-color: #41a6ff;
	border-color: var(--primary);
}

@media only screen and (max-width: 850px) {
	.pageWrapper {
	    padding-top: 20px!important;
	}	
}