﻿@font-face{
	font-family:autovendi-kenteken;
	src:url(../webfonts/autovendi-kenteken.eot);
	src:local("☺"),url(../webfonts/autovendi-kenteken.woff) format("woff"),url(../webfonts/autovendi-kenteken.ttf) format("truetype"),url(../webfonts/autovendi-kenteken.svg) format("svg");
	font-weight:400;
	font-style:normal
}
html body{
	background-color:#FAFAFA;
	font-family:'Signika', sans-serif;
	font-size:16px;
	margin:0;
	padding:0
}

.home-title{
	color: #333333;
	font-weight: 900;
	line-height: 1.2;
	font-size: 42px;
}

#filterexpandbutton{
	display: none;
}

.rounded-borders {
	border-radius: 4px;
}

.sidebar ul{
	display: block;
}

.voorbeeldimg{
	width: 100%;
	height: auto;
}



.sidebar li .submenu{ 
	list-style: none; 
	margin: 0;
	margin-left: 1rem;
	margin-right: 1rem;
	padding: 0; 
	padding-left: 1rem; 
	padding-right: 1rem;
	padding-bottom: 1rem;
}
.sidebar .addlines:nth-child(odd){
	background-color: #f0f0f0;
}

.sidebar ul li .filter-item{
	padding: 0.1rem 2rem;
}
nav ul .has-submenu .nav-link{
	color: #f9215a;
}
nav ul .has-submenu .nav-link:hover{
	color: rgb(33, 37, 41);
}

#filterbox{
	text-align: center;
}
.filterbox-item{
	display: inline-block;
	position: relative;
	background-color: #FEDA02;
	padding: 5px;
	cursor: pointer;
	border-radius: 10px;
}

.cart{
	top: 25px;
	right: 30px;
	z-index: 1000;
}

#cartbutton{
	font-size: 1.5em;
	width: 60px;
	height: 60px;
	text-align: center;
	padding: 12px 0;
	line-height: 1.428571429;
	border-radius: 30px;
	background: #FEDA02;
	color: #4E4E50;
	animation: pulser 3s infinite;
}

.cart-bubble{
	position: absolute;
	top: -12px;
	left: -5px;
	padding-top: 3px;
	background-color: #d9215a;
	width: 30px;
	height: 30px;
	text-align: center;
	font-size: 0.7em;
	border-radius: 15px;
	color: #FAFAFA;
}

@keyframes pulser {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(254,218,2, .3);
		box-shadow: 0 0 0 0 rgba(254,218,2, .3)
	}
	70% {
		-moz-box-shadow: 0 0 0 20px rgba(254,218,2, 0);
		box-shadow: 0 0 0 20px rgba(254,218,2, 0)
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(254,218,2, 0);
		box-shadow: 0 0 0 0 rgba(254,218,2, 0)
	}
}

#besteloverzichtimg{
	height: 100px;
	width: 100px;
	margin-top: 5%;
}

button.btn{
	position:relative;
	width:100%;
	font-size:18px;
	border:none !important;
	border-radius:6px
}
button.btn.btn-success{
	background-color:#26a55c
}
button.btn.btn-success:hover{
	background-color:#179c4f
}
button.btn.btn-success:focus{
	box-shadow:none
}
.toast-container{
	position:absolute;
	top:0;
	right:0;
	padding-right:3rem;
	z-index:9999
}
#top_kenteken{
	position:fixed;
	top:-120px;
	left:0;
	width:100%;
	padding: 10px 0 20px 0;
	background-color:#f9215a;
	z-index:999;
	box-shadow:0px 5px 29px 0px rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)
}
#top_kenteken button.btn{
	margin-top:8px;
	padding:15px;
	font-size:18px
}
#top_kenteken label{
	color:#fff;
	font-size:24px;
	text-align:center;
	line-height:70px;
	display:block
}
#top_kenteken .kentekenveld2{
	width:15%
}
#top_kenteken .kentekenveld{
	width:85%
}
#top_kenteken .ckteken{
	width:100%;
	margin-top:7px
}
#top_kenteken .kenteken-input-holder{
	width:100%;
	min-height:55px
}
.dotring{
	margin:0 auto;
	border:2px dotted #FFAD13;
	-webkit-border-radius:25px;
	border-radius:25px;
	width:18px;
	height:19px;
	z-index:99;
	margin-top: 4px;
}
.kentekenveld,.kentekenveld2{
	height:60px;
	display:block;
	float:left
}
.kenteken-input{
	background:#f0b504 none repeat scroll 0 0;
	border:2px solid #000000;
	border-radius:5px;
	min-height:55px;
	padding:6px 4px 6px 38px;
	width:100%;
	outline:none;
	text-align:center;
	font-size:50px;
	text-transform:uppercase;
	font-family:autovendi-kenteken, "arial black", arial;
	font-weight:700
}
.kentekenveld{
	width:87.5%;
	border:2px solid;
	-webkit-border-radius:0 5px 5px 0;
	border-radius:0 5px 5px 0;
	color:#000;
	z-index:50;
	background:#f0b504
}
.kentekenveld2{
	padding:5px;
	border-top:2px solid #000;
	border-left:2px solid #000;
	border-bottom:2px solid #000;
	-webkit-border-radius:5px 0 0 5px;
	border-radius:5px 0 0 5px;
	color:#FFF;
	font-weight:700;
	width:12.5%;
	text-align:center;
	background:#0066a6;
	background:-moz-linear-gradient(left, #0066a6 0, #0066a6 100%);
	background:-webkit-gradient(left top, right top, color-stop(0, #0066a6), color-stop(100%, #0066a6));
	background:-webkit-linear-gradient(left, #0066a6 0, #0066a6 100%);
	background:-o-linear-gradient(left, #0066a6 0, #0066a6 100%);
	background:-ms-linear-gradient(left, #0066a6 0, #0066a6 100%);
	background:linear-gradient(to right, #0066a6 0, #0066a6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066a6', endColorstr='#0066a6', GradientType=1 );
	z-index:51
}
.kentekenveld>label{
	font-weight:300;
	margin-bottom:0
}
.kent.groot{
	font-family:autovendi-kenteken,"arial black",arial;
	font-weight:900;
	font-size:35px;
	text-transform:uppercase;
	width:100%;
	text-align:center;
	color: black;
}
.kent.groot,.ktekenf{
	height:56px;
	line-height: 56px;
	border:none;
	outline:none;
	background-color:transparent
}
nav.navbar-light{
	background-color:#e7f4f6 !important
}
nav.navbar-light .navbar-toggler{
	border:none;
	outline:none;
	box-shadow:none
}
nav.navbar-light .navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28232, 54, 102, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
nav.navbar-light ul.navbar-nav li.nav-item{
	padding:0 20px
}
header{
	position:relative;
	background-image:url("../images/header/cars-00.png"),url("../images/header/trees_front.png"),url("../images/header/trees_back.png"),url("../images/header/skyline_mountains-01.png"),url("../images/header/sun_clouds.png"),url("../images/header/background.png");
	background-repeat:repeat-x;
	background-position:0, 0, 0, 0, 0, 0;
	background-size:2419px, 2419px, 2419px, 2419px, 2419px, 2419px;
	animation:70s para infinite linear;
	width:100%;
	height:400px;
	overflow:hidden
}
header img{
	position:absolute;
	height:80px;
	left:45%;
	top:80%
}
header div.logo{
	position:relative;
	background-image:url("../images/logo2.svg");
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	width:210px;
	height:80px;
	margin:-20px 10px 0 10px;
	display:flex
}
header h1{
	position:relative;
	padding-top:50px;
	font-size:42px;
	font-weight:900;
	color:#f9215a;
	text-align:center;
	display:flex;
	justify-content:center
}
header h2{
	font-size:26px;
	font-weight:300;
	color:#f9215a;
	text-align:center
}
header div.box{
	max-width:45%;
	margin:0 auto;
	overflow:hidden
}
header div.box button.btn {
	width: 25% !important;
}
.kenteken-info{
	color:#333333;
	font-size:42px;
	font-weight:900;
	text-align:center;
	text-shadow:0 3px rgba(0,0,0,0.15);
	padding: 50px 0;
}
.page-title{
	position: relative;
	padding-top: 50px;
	font-size: 3rem;
	font-weight: 900;
	color: #f9215a;
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 0;
	margin-bottom: .5rem;
	line-height: 1.2;
}
.page-subtitle{
	display: flex;
	font-size: 26px;
	font-weight: 300;
	color: #f9215a;
	justify-content: center;
	text-align: center;
	margin-top: 0;
	margin-bottom: .5rem;
	line-height: 1.2;
	padding-top: 0;
}
section{
	position:relative;
	padding:150px 0
}
section.details{
	padding:0px 0px 100px 0px !important
}
section:first-of-type{
	padding:0
}
section.color-pink{
	background-color:#f9215a;
	color:#FFFFFF
}
section.color-pink p{
	color:#FFFFFF
}
section h1{
	color:#333333;
	font-size:42px;
	font-weight:900;
	text-align:center;
	text-shadow:0 3px rgba(0,0,0,0.15)
}
section h1.heading{
	padding-bottom:50px
}
section h1.heading2{
	padding:50px 0
}
section h2{
	font-size:32px;
	font-weight:900;
	text-shadow:0 3px rgba(0,0,0,0.15)
}
section p{
	color:#606470;
	text-align:justify
}
div.box{
	position:relative;
	background-color:rgba(255,255,255,0.8);
	width:100%;
	height:auto;
	padding:20px;
	margin-bottom:20px;
	border-radius:10px;
	box-shadow:0px 5px 15px 0px rgba(0,0,0,0.08),0 1px 2px 0 rgba(0,0,0,0.06)
}
div.box div.box-step{
	position:relative;
	background-color:#f9215a;
	width:50px;
	height:50px;
	margin:0 auto 30px auto;
	color:#FFFFFF;
	font-size:24px;
	font-weight:900;
	text-align:center;
	line-height:50px;
	border-radius:50%
}
div.box h2{
	margin-bottom:20px;
	color:#f9215a;
	text-transform:uppercase;
	text-align:center
}
div.box p{
	color:#606470;
	text-align:center
}
div.box .ckteken{
	width:70%
}
div.box button.btn{
	width:auto!important;
	padding:17px;
	float:right
}
div.oddEven{
	position:relative;
	padding:10px
}
div.oddEven:nth-child(odd){
	background-color:#fff
}
div.oddEven:nth-child(even){
	background-color:#f0f0f0
}
div.oddEven span{
	float:right
}
div.footer_spacer{
	position:relative;
	background-color:#f9215a;
	background-image:url("../images/flatline_park.svg");
	background-position:center 95%;
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	height:200px;
	box-shadow:inset 0px 2px -2px 2px rgba(255,255,204,0.7),inset 0px -2px -2px 2px rgba(255,255,204,0.7)
}
footer{
	position:relative;
	background-color:#FFFFFF;
	width:100%;
	padding:150px 0 10px 0
}
footer img{
	margin-bottom:20px
}
footer strong{
	font-size:18px;
	margin-bottom:10px;
	display:block
}
footer p{
	margin:0;
	color:#333;
	font-size:14px;
	font-weight:300;
	text-align:justify
}
footer p i.uil{
	margin-right:5px;
	font-size:20px;
	color:#f9215a
}
footer p a{
	color:#333;
	font-size:14px;
	text-decoration:none;
	transition:all .3s
}
footer p a:hover{
	color:#f9215a
}
footer ul{
	list-style-type:none;
	margin:0;
	padding:0
}
footer ul li{
	margin-bottom:3px
}
footer ul li a{
	color:#f9215a;
	text-decoration:none;
	transition:all .3s
}
footer ul li a:hover{
	color:#f9215a;
	padding-left:10px
}
div.footer_copyright{
	position:relative;
	background-color:#FFFFFF;
	width:100%;
	padding:20px 0;
	color:#606470;
	font-size:14px
}
div.footer_copyright hr{
	background-color:rgba(0,0,0,0.2)
}
div.footer_copyright a{
	color:#606470;
	text-decoration:none;
	font-size:14px;
	padding:0 10px;
	border-right:1px solid rgba(0,0,0,0.1);
	transition:all .3s
}
div.footer_copyright a:hover{
	color:#f9215a
}
div.footer_copyright a:first-of-type{
	padding:0 10px 0 0
}
div.footer_copyright a:last-of-type{
	border-right:none
}
div.footer_copyright span{
	float:right;
	display:block
}

.checktypes{
	width: 100%;
	font-size: 1.2rem;
}
.checktypes div::before{
	content: "\2713";
	padding-right: 5px;
	color: #27AE60;
}

.share-buttons{
	text-align: center;
}

.share-button{
	display: inline-block;
	position: relative;
	color: white;
	height: 34px;
	width: 34px;
	border-radius: 17px;
	font-size: 20px;
	margin-right: 5px;
}
.share-button:hover{
	color: white;
	cursor: pointer;
}
.share-button i{
	margin-top: 7px;
}
#twitter{
	background-color: #00A2F5;
}
#facebook{
	background-color: #4867AA;
}
#link{
	background-color: #495057;
}
#bestelnl {
	text-align: center;
	float: none;
}
.kenteken-image{
	float: right;
}


/*		Vergelijker		*/

.vergelijk-wrapper{
	overflow-x: scroll;
}

.vergelijk-header{
	display: block;
}

.vergelijk-content{
	display: block;
}

.vergelijk-table{
	width: auto;
	margin: 20px auto;
	text-align: left;
}
.vergelijk-title{
	width: auto;
	margin: 0 auto;
	text-align: left;
}
.vergelijk-table tbody tr .colum {
	min-width: 250px;
	max-width: 250px;
	white-space: normal;
	vertical-align: middle;
}

.vergelijk-kenteken {
	font-size: 35px!important;
}

.inthistcarousel {
	width: 320px;
	float: right;
}
.inthistcarousel .carouselControls .carousel-inner .carousel-item {
	height: 200px;
}
.inthistcarousel .carouselControls .carousel-inner .carousel-item img {
	padding-left: auto;
	padding-right: auto;
	max-height: 200px;
}

.oddevenbutton{
	padding: 3px!important;
}

@keyframes para{
	/*
	    100%{
		   background-position:50%, 50%, 30%, 30%, 0, 0
	    }
	*/
	from {
		background-position: 0;
	}

	to {
		background-position: -4838px, -4838px, -2419px, -2419px, 0, 0
	}
}
@media screen and (max-width: 1200px){
	header div.box{
		max-width:80%
	}
	footer{
		text-align:center
	}
	footer p{
		text-align:center
	}
	footer .row>*{
		margin-bottom:40px
	}
}
@media screen and (max-width: 992px){
	.inthistcarousel {
		float: unset;
		margin-right: auto;
		margin-left: auto;
		padding-top: 30px;
	}
	.page-title{
		font-size: 1.8rem;
	}
	.cart{
		top: unset;
		bottom: 30px!important;
	}
	.toast-container{
		width:100%;
		left:0;
		padding-right:0
	}
	.toast-container .toast{
		width:100%;
		border-radius:0
	}
	.toast-container .toast .toast-body{
		text-align:center
	}
	#top_kenteken{
		z-index:999
	}
	#top_kenteken label{
		font-size:18px
	}
	#top_kenteken .dotring{
		margin-top:5px;
		width:18px;
		height:19px
	}
	#top_kenteken .kent.groot{
		height:auto;
		font-size:35px;
		line-height:normal
	}
	nav.navbar-light{
		margin-bottom:-55px;
		z-index:99
	}
	header img{
		left:35%
	}
	header div.logo{
		z-index:99
	}
	header div.box div.kentekenveld2{
		width:15%
	}
	header div.box div.kentekenveld2 .dotring{
		margin-top:5px;
		width:18px;
		height:19px
	}
	header div.box div.kentekenveld{
		width:85%
	}
	section.color-pink img{
		display:none
	}
	div.footer_copyright{
		text-align:center
	}
	div.footer_copyright span{
		margin-top:10px;
		float:none
	}
	.kent.groot {
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 768px){
	#filter{
		display: block;
	}
}
@media screen and (max-width: 768px){
	#top_kenteken label{
		line-height:20px
	}
	header img{
		left:25%
	}
	header h1{
		font-size:26px
	}
	.page-subtitle{
		font-size: 16px;
	}
	header h2{
		font-size:16px
	}
	header div.logo{
		width:110px;
		height:50px;
		margin-top:-15px
	}
	header div.box{
		max-width:100%
	}
	section{
		padding:60px 0 !important
	}
	section:first-of-type{
		padding-bottom:0 !important
	}
	section.color-pink img{
		display:none
	}
	section h1,section h2{
		font-size:28px
	}
	section div.box{
		margin-bottom:40px
	}
	footer{
		padding:60px 0 0 0 !important
	}
	div.footer_copyright a{
		text-align:center;
		font-size:12px
	}
	div.footer_copyright .float-end{
		padding-top:20px
	}
	#filterexpandbutton{
		display: block;
	}
	.kent.groot {
		font-size: 2rem;
	}
}

@media screen and (max-width: 576px){

	#mijnbestelimg{
		display: none;
	}
	.kenteken-image{
		float: unset;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 15%;
		height: auto;
	}
}

@media screen and (max-width: 500px){
	.col-9 .ckteken .kentekenveld2 .dotring{
		display: none;
	}

	.kentekenveld .kent.groot{
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 380px){
	header h1{
		font-size:18px
	}
	.page-title{
		font-size: 1.2rem;
	}
	.page-subtitle{
		font-size: 14px;
	}
	header h2{
		font-size:14px
	}
	header div.logo{
		width:90px;
		height:40px
	}
	a .ckteken .kentekenveld2 .dotring{
		display: none;
	}
	#bsnl{
		display: none;
	}
	.kentekenveld {
		width: 85%;
	}
	.kentekenveld2 {
		width: 15%;
	}
}
