@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Bold.woff2") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu-Regular.woff2") format("woff");
  font-weight: 400;
}

:root {
	--primary: #E2231A;
	--primary-light: #F5B5CE;
}

html {
    font-family: Arial;
}
body{
	font-size:16px;
	line-height:1.5;
}
h1,h2,h3,h4,h5 {
    font-family: Ubuntu, Arial;
}
h1{
	margin:0 0 5px;
	font-size:225%;
	line-height: 1.1;
}
h2{
	margin:0;
	line-height: 1;
	font-size:125%;
	font-weight:normal;
	color:#666666;
}
	h2 b{
		font-weight:normal;
		color:#000;
	}
a{
	color:#666666;
}
a:hover{
	color:#fabb00;
}
select {
	padding:5px 10px;
	border:solid 1px #CCCCCC;
}
input[type=text], input[type=email], button{
	width:360px;
	max-width:100%;
	height:50px;
	padding:0 10px;
	border:solid 1px #CCCCCC;
	box-sizing:border-box;
}
input:focus{
	border-color:#fabb00;
	outline: none;
}
input[readonly]{
	border-color:#EEE;
	cursor:default;
}
button {
	margin-top: 32px;
	padding-left: 35px;
	padding-right: 35px;
	width: auto;
	background-color: #FFF;
}
input[type=text].small, input[type=email].small, button.small{
	height: 35px;
}
button.small {
	margin-top: 13px;
	padding-left: 15px;
	padding-right: 15px;
}
label.small {
	display: inline-block;
	margin-top: 13px;
}
#filter-highlight,
#filter-self-scan,
#filter-training_branch,
#filter-branch_type {
	color: #666;
}
#filter-highlight:hover,
#filter-self-scan:hover,
#filter-training_branch:hover,
#filter-branch_type:hover {
	color: #000;
}
	#filter-highlight.highlight,
	#filter-self-scan.highlight,
	#filter-training_branch.highlight,
	#filter-branch_type.highlight {
		background-color: #fabb00;
		color: #FFF;
	}
label.radio{
	display:inline-block;
	cursor:pointer;
}
	label.radio input[type=radio]{
		position:absolute;
		top:0;
		left:0;
		opacity:.01;
	}
	label.radio span{
		display:inline-block;
		position:relative;
		padding-left:32px;
		line-height:30px;
	}
	label.radio span:before{
		content:"";
		position:absolute;
		top:50%;
		left:0;
		margin-top:-12px;
		width:24px;
		height:24px;
		border-radius:50%;
		background:#FFF;
		box-sizing:border-box;
		border:solid 1px #CCC;
	}
	label.radio span:after{
		content:"";
		position:absolute;
		top:50%;
		left:6px;
		margin-top:-6px;
		width:12px;
		height:12px;
		border-radius:50%;
	}
	label.radio:hover span:before, label.radio input:focus ~ span:before{
		border-color:#333;
	}
	label.radio input:checked ~ span:after{
		background:#fabb00;
	}
.pure-g{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
    align-content: flex-start;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	margin-top:45px;
	margin-left:-15px;
	width:calc(100% + 30px);
}
	.pure-g > *{
		padding:30px 15px 0;
		box-sizing:border-box;
	}
.form-field{
	display:inline-flex;
	flex-direction: column;
	width:100%;
}
.form-field + .form-field{
	margin-top:30px;
}
	.form-field b{
		display:block;
		margin-bottom: 8px;
		font-size:87.5%;
	}
	.form-field-error{
		margin-top:4px;
		color:#D0021B;
		font-size:87.5%;
		order:2;
	}
		.form-field-error + input{
			border-color:#D0021B;
		}
.msg{
	margin-bottom:2em;
	padding:10px 20px;
	background:#fabb00;
	font-weight:bold;
	color:#fff;
}
.errors{
	margin-bottom:2em;
	padding:10px 20px;
	background:#D0021B;
	font-weight:bold;
	color:#FFF;
}
.button{
	display:inline-block;
	position:relative;
	padding:16px 24px;
	border:none;
	text-decoration: none;
	line-height: 1;
	font-weight:bold;
	font-size:106.25%;
	border-radius: 8px;
	color:#fff;
	background-color: var(--primary);
}
.button-icon-left{
	padding-left:56px;
	padding-right:40px;
}
	.button-icon-left svg,
	.button-icon-left img{
		position:absolute;
		top:50%;
		left:24px;
		margin-top:-7px;
		width:14px;
		height:14px;
	}
.button-icon-right{
	padding-right:56px;
	padding-left:40px;
}
	.button-icon-right svg,
	.button-icon-right img{
		position:absolute;
		top:50%;
		right:24px;
		margin-top:-7px;
		width:14px;
		height:14px;
	}
.button-float{
	box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
}
.button:hover{
	background-color: var(--primary-light);
	color: var(--primary);
}
.button-black{
	background:#000;
	color:#FFF;
}
	.button-black svg{
		fill:#FFF;
	}
.button-black:hover{
	background:#1A1A1A;
	color:#FFF;
}
.button-pink{
	background:#D9007D;
	color:#FFF;
}
	.button-pink svg{
		fill:#FFF;
	}
.button-pink:hover{
	background:#FA209E;
	color:#FFF;
}
.button-yellow{
	background:#fabb00;
	color:#fff;
}
.button-yellow svg path {
	fill: #fff;
}
.button-yellow:hover{
	background:#f1c53f;
	color:#fff;
}
.buttons-float-left, .buttons-float-right{
	position:fixed;
	bottom:40px;
}
.buttons-float-left{
	left:auto;
}
.google-maps-container + .buttons-float-left {
	left: 80px;
}
.buttons-float-right{
	right:80px;
}

[class*="button-arrow"],[class*="button-arrow"]:hover {
	background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: none;
    padding: 0;
    margin: 0;
    margin-block-start: 0;
    display: flex;
    align-items: center;
    height: 68px;
    width: 163px;
    justify-content: center;
	padding: 0 14px 0 0 !important;
    box-sizing: border-box;
}
[class*="button-arrow-large"], [class*="button-arrow-large"]:hover {
	width: 204px;
}
[class*="button-arrow"]:hover {
	opacity: .9;
	box-shadow: none;
	outline: none;
}
[class*="button"][class*="-back"], [class*="button"][class*="-back"]:hover {
	padding: 0 0 0 18px !important;
}
@media (max-width:35.5em) {
	[class*="button-arrow"],[class*="button-arrow"]:hover {
		height: 60px;
		width: 115px;
	}
	[class*="button-arrow-large"], [class*="button-arrow-large"]:hover {
		width: 170px;
	}
}


.progress-bar{
	position:absolute;
	top:70px;
	right:80px;
}
	.progress-bar-step{
		float:left;
		width:10px;
		height:10px;
		border-radius:50%;
		background:#E7E7E7;
	}
	.progress-bar-step + .progress-bar-step{
		margin-left:10px;
	}
	.progress-bar-current-step{
		background:#fabb00;
	}
.language-bar {
	position: absolute;
	top: 20px;
	right: 75px;
}
	.language-bar .language img {
		max-width: 20px;
		padding: 5px;
	}
.cancel-dialog-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 70, 204, 0.1);
	z-index: 50;
	display: none;
}
	.cancel-dialog {
		position: fixed;
		top: 50%;
		left: 50%;
		background-color: white;
		border-radius: 3px;
		-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
		padding: 32px;
		max-width: 450px;
	}
		.cancel-dialog h3 {
			margin-top: 0;
			font-weight: bold;
			font-size: 112%;
		}
		.cancel-dialog-buttons {
			margin-top: 48px;
			vertical-align: bottom;
			text-align: right;
		}
			.cancel-dialog-buttons button {
				margin-left: 24px;
			}
.google-maps-block{
	position:fixed;
	top:80px;
	left:80px;
	width:346px;
	z-index:2;
}
.google-maps-block.google-maps-block-right{
	left:auto;
	right:80px;
}
	.google-maps-text,
	.google-maps-alert{
		padding:35px;
		border-radius: 3px;
		box-shadow: 0 1px 5px 0 rgba(0,0,0,0.25);
		background:#FFF;
	}
	.google-maps-text h1,
	.google-maps-alert h1 {
		font-size: 200%;
	}
	.google-maps-alert {
		position: relative;
		margin-top: 32px;
	}
		.google-maps-alert__close {
			position: absolute;
			top:0;
			right:0;
			width:32px;
			height:32px;
		}
			.google-maps-alert__close::before {
				content:"";
				position: absolute;
				top:50%;
				left:50%;
				width:16px;
				height:2px;
				background: #666 ;
				transform: translate(-50%, -50%) rotate(45deg);
			}
			.google-maps-alert__close::after {
				content:"";
				position: absolute;
				top:50%;
				left:50%;
				width:16px;
				height:2px;
				background: #666;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
	.google-maps-block form{
		display:flex;
    	flex-direction: row;
		border-radius: 3px;
		margin-top:32px;
		box-shadow: 0 1px 5px 0 rgba(0,0,0,0.25);
		background:#FFF;
	}
		.google-maps-block__input[type=text]{
			flex:1 1 auto;
			padding:0 35px;
			width:100%;
			border-right:0;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.google-maps-block form button{
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
.google-maps{
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
}
	.google-maps .store{
		display:block;
	}
.store{
	display:none;
	float:left;
	position:relative;
	padding:32px;
	/* padding-bottom: 10px; */
	font-size:16px;
	line-height:1.5;
	white-space: nowrap;
	/* box-shadow: 0 1px 5px 0 rgba(0,0,0,0.25);
	background:#FFF; */
}
	.store b{
		display:block;
	}
	.store a{
		position:absolute;
		top:0px;
		right:0px;
		transform:translate(50%, -50%);
		z-index:1;
	}
	.store a.info-window-close {
		position: absolute;
		top: 13px;
		left: -13px;
		height: 26px;
		width: 26px;
	}
	.info-window-close:before, .info-window-close:after {
		content:"";
		position: absolute;
		top:50%;
		left:50%;
		width:16px;
		height:2px;
		background: #666 ;
	}
	.info-window-close:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.info-window-close:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.store .store__language {
		max-width: 20px;
	}
.date-months{
	display:flex;
	flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
	border: 1px solid #DDDDDD;
	border-radius: 3px;
	visibility: hidden;
}
	.date-months a{
		flex: 1 1 auto;
		text-align: center;
		text-decoration: none;
		padding:5px 0;
		color:#000;
	}
	.date-months a:hover{
		background:#FAFAFA;
	}
	.date-months a.date-month-selected{
		background:#fabb00;
		font-weight: bold;
	}
	.date-months a[disabled]{
		background:#F6F6F6;
		color:#DDD;
	}
	.date-months a + a{
		border-left:solid 1px #DDD;
	}
.date-month{

}
	.date-month > b{
		display:block;
		margin:30px 0 20px;
	}
		.date{
			display:block;
			position:relative;
			padding:32px;
			border: 1px solid #DDDDDD;
			border-radius: 3px;
			text-decoration:none;
			color:#000;
		}
		.date-selector {
			opacity: 0;
		}
		.date-selector:checked + .date,
		.date-selected{
			border-color:#fabb00;
		}

			.date-selector:checked + .date::before,
			.date-selected::before{
				content:"";
				position:absolute;
				top:-16px;
				right:-16px;
				width:32px;
				height:32px;
				border-radius:50%;
				background:#fabb00;
			}
			.date-selector:checked + .date::after,
			.date-selected::after{
				content:"";
				position:absolute;
				top:-10px;
				right:-6px;
				width:6px;
				height:12px;
				border-right:solid 4px #FFF;
				border-bottom:solid 4px #FFF;
				transform:rotate(45deg);
			}
			.date b{
				display:block;
			}
.date-next-button{
	display:none;
}
.date-next-button.show-button {
	display:block;
}
.confirm-change{
	position:relative;
	display:block;
}
	.confirm-change a{
		position:absolute;
		top:0;
		left:200px;
		white-space: nowrap;
		font-weight: normal;
	}
.browser-ie-warning{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:10px 20px;
	background:#CD0025;
	color:#FFF;
	text-align: center;
	z-index:2;
}
.header{
	position:fixed;
	top:0;
	left:0;
	width:50vw;
	height:100vh;
	background: no-repeat center center url(../images/bg-kruidvat.jpg);
	background-size:cover;
}
@media (max-width: 64em) {
	.header {
		background-image: url(../images/bg_mobile-kruidvat.jpg);
		background-position: top center;
	}
}
	.header::before{
		content:"";
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height:50%;
		opacity: 0.5;
		background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
	}
	.header-text{
		position:absolute;
    	width: 62%;
		left:9.6%;
		bottom: 94px;
		/* bottom:12.3%; */
		font-size:212.5%;
		color:#FFF;
		font-weight:900;
		line-height: 1;
	}
	.header-text__logo {
		max-width: 400px;
		width: 100%;
	}
	@media screen and (max-width: 64em) {

		.header-text__logo {
			max-width: 150px;
		}
		.header-text {
			bottom: 12.3%;
		}
	}
		.header-text b{
			display:block;
			font-weight:900;
			font-size:200%;
		}

.header__logo {
	position: absolute;
	left: 10px;
	bottom: 0;
    width: 250px;
}
.header__ruit {
	position: absolute;
	right: 50px;
	bottom: 80px;
    width: 260px;
    height: 260px;
}
.header__logo__figure, .header__ruit__figure {
	width: 100%;
	height: 100%;
}
.header__logo__text, .header__ruit__text {
    color: #fff;
    text-align: center;
    font-family: Ubuntu, Arial;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    translate: 0 -50%;
    padding: 20px;
    box-sizing: border-box;
    font-size: 33px;
	line-height: 1;
}
.header__logo__text span {
	font-size: 200%;
	line-height: 1;
}
.header__ruit__text {
	font-size: 30px;
	font-weight: 800;
}

@media (max-width:80em) {
	.header__logo__text {font-size: 28px;}
	.header__ruit {width: 190px;height: 190px;}
	.header__ruit__text {font-size: 22px;}
}

@media (max-width:64em) {
	.header__ruit {display: none;}
	.header__logo {width: 150px;}
	.header__logo__text {font-size: 20px;}
}

@media (max-width:35.5em) {
}

.content{
	margin-left:50%;
	width: 50%;
	min-height:100vh;
	padding:110px 120px;
	box-sizing:border-box;
}
.presence{
	position:relative;
	margin-top:30px;
}
	.presence-radio{
		position:absolute;
		top:0;
		right:0;
		font-weight:bold;
	}
		.presence-radio label{
			display:inline-block;
			margin-left:20px;
			font-weight:normal;
		}
	.presence textarea{
		display:block;
		margin-top:10px;
		width:100%;
		height:100px;
	}
label.disabled {
	color:gray;
}
@media (max-width:80em){
	.progress-bar{
		top:55px;
		right:70px;
	}
	.language-bar {
		right: 65px;
	}
	.content{
		padding:70px;
	}
	.google-maps-block{
		top:30px;
		left:30px;
		/* width:400px; */
	}
	.google-maps-block.google-maps-block-right{
		left:auto;
		right:30px;
	}
}
@media (max-width:64em){
	.progress-bar{
		top:220px;
		right:40px;
	}
	.language-bar {
		right: 35px;
	}
	.buttons-float-left, .buttons-float-right{
		bottom:20px;
	}
	.buttons-float-left{
		left:40px;
	}
	.buttons-float-right{
		right:40px;
	}
	.google-maps-container{
		display: flex;
		height:100vh;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
	}
		.google-maps-block{
			position:relative;
			top:0;
			left:0;
			width:100%;
		}
		.google-maps-block.google-maps-block-right{
			left:auto;
			right:0;
		}
			.google-maps-text,
			.google-maps-alert{
				box-shadow: none;
				padding:25px;
			}
			.google-maps-block form{
				border-radius:0;
				margin-top:0;
				box-shadow: none;
			}
			.google-maps-alert {
				margin-top: 0;
			}
		.google-maps{
			flex: 1 1 auto;
			height:auto;
		}
	.header{
		position:relative;
		width:auto;
		height:300px;

	}
	.content{
		margin:0;
		width:auto;
		padding:40px 40px 100px;
	}
}
@media (max-width:35.5em){
	h1{
		font-size:150%;
	}
	.progress-bar{
		top:120px;
	}
	.button{
		padding:12px 18px;
	}
	.button-icon-left{
		padding-left:30px;
	}
	.button-icon-right{
		padding-right:30px;
	}
		.button-icon-left svg,
		.button-icon-left img{
			left:10px;
		}
		.button-icon-right svg,
		.button-icon-right img{
			right:10px;
		}
	.header{
		height:150px;
	}
		.header-text{
			font-size:150%;
		}
	.date-months{
		flex-wrap: wrap;
	}
		.date-months a{
			width:16.66%;
			box-sizing: border-box;
		}
		.date-months a:nth-child(7){
			border-left:0;
		}
		.date-months a:nth-child(n+7){
			border-top:solid 1px #E7E7E7;
		}
		.confirm-change a{
			left:auto;
			right:0;
		}
	.content{
		min-height:0;
	}
}


label.checkbox{
	position:relative;
	cursor: pointer;
}
	label.checkbox input[type=checkbox]{
		position:absolute;
		top:0;
		left:0;
		opacity:.01;
	}
	label.checkbox span{
		display:inline-block;
		position:relative;
		padding-left:38px;
		line-height:30px;
	}
	label.checkbox input[type=checkbox][disabled] ~ span{
		opacity:.5;
		cursor:default;
	}
	label.checkbox input[type=checkbox][disabled] ~ span:after {
		border-color:#EEE;
	}
	label.checkbox:hover input[type=checkbox][disabled] ~ span:before, label.checkbox input[type=checkbox][disabled]:focus ~ span:before{
		border-color:#C2C2C2;
	}
	label.checkbox:hover input[type=checkbox][disabled] ~ span:after, label.checkbox input[type=checkbox][disabled]:focus ~ span:after{
		border-color:#EEE;
	}
	label.checkbox span:before{
		content:"";
		position:absolute;
		top:0;
		left:0;
		width:28px;
		height:28px;
		border-radius:4px;
		background:#FFF;
		border:solid 1px #C2C2C2;
	}
	label.checkbox span:after{
		content:"";
		position:absolute;
		top:6px;
		left:5px;
		width:14px;
		height:6px;
		border-left:solid 5px #EEE;
		border-bottom:solid 5px #EEE;
		transform:rotate(-45deg);
	}
	label.checkbox:hover span:before, label.checkbox input:focus ~ span:before{
		border-color:#333;
	}
	label.checkbox:hover span:after, label.checkbox input:focus ~ span:after{
		border-color:#DDD;
	}
	label.checkbox input:checked ~ span:after{
		border-color:#f19352;
	}
.language {
	text-decoration: none;
}
	.language img {
		padding: 20px;
		max-width: 100px;
	}

.dagje-samenwerken {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    max-width: 500px;
    translate: -40px 0;
	margin-top: -30%;
	margin-bottom: 30px;
}
@media (max-width:64em) {
	.dagje-samenwerken {display:none}
}