html{
	height: 100%;
}

body{	
	min-height: 100%;
	background: #333333;
	font-family: Montserrat, sans-serif;
	text-align: justify;

}

.grecaptcha-badge {
    display: none !important;
}

.inverted{
	color: #ffffff;
}


section.white{
	background: #ffffff;
	padding:15px 0 15px;
}

section.grey{
	background: #a7b1c9;
	padding:15px 0 2rem;
}


section.sand{
	background: #f5f7ed;
	padding:15px 0 2rem;
}

section.bg-car{	
	background: #000000 url('images/car.jpg') no-repeat center bottom;
	background-size: cover;
	min-height: 75vh;
	padding:2rem 0;
}	


section.bg-owner{	
	background: #bbbdb0 url('images/car-owner.jpg') no-repeat left center ;
	background-size: cover;
	min-height: 75vh;
	padding:2rem 0;
}	

section.quiz{
	min-height: 55vh;
	background: #f5f7ed;
}	


section.space-1{
	padding:1rem 0 ;
}

section.space-2{
	padding:2rem 0 ;
}

section.space-4{
	padding:4rem 0 ;
}

.black-box{
	background: rgba(0,0,0,0.85);
	border-radius:6px;
	padding:30px;
	margin: 2rem 0;
	
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}

.light-box{
	background: rgba(255,255,255,255.85);
	color:#333333;
	border-radius:6px;
	padding:30px;
	margin: 2rem 0;
	
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}


.recommendations{
	margin-top:1.5rem;
	text-align:center;
	font-size:0.8rem;
	color:#454748;
	font-weight:600;
}

	.recommendations div{
		padding-top: 34px;
	}


	.recommendations div.no-payment{
		background:url('/images/intro-no-payment.svg') top center no-repeat;
		background-size:28px;
	}

	.recommendations div.confidential{
		background:url('/images/intro-confidential.svg') top center no-repeat;
		background-size:28px;
	}

	.recommendations div.regulated{
		background:url('/images/intro-regulated.svg') top center no-repeat;
		background-size:28px;
	}

	.recommendations div.recommended{
		background:url('/images/intro-recommended.svg') top center no-repeat;
		background-size:28px;
	}
	

.inverted .recommendations{
	color:#ffffff;
}

	.inverted .recommendations div.no-payment{
		background:url('/images/inv-intro-no-payment.svg') top center no-repeat;
		background-size:28px;
	}

	.inverted .recommendations div.confidential{
		background:url('/images/inv-intro-confidential.svg') top center no-repeat;
		background-size:28px;
	}

	.inverted .recommendations div.regulated{
		background:url('/images/inv-intro-regulated.svg') top center no-repeat;
		background-size:28px;
	}

	.inverted .recommendations div.recommended{
		background:url('/images/inv-intro-recommended.svg') top center no-repeat;
		background-size:28px;
	}
	

.quote{
	border-left:2px solid #8993ac;
	padding-left:50px;
	background:url('/images/quote.svg') 5px 5px no-repeat;
	background-size:35px;
}
	.quote span{
		display: block;
		font-style: italic;
		font-size: 0.8rem;
		color: #8993ac;
		font-weight: 600;
	}

.navbar-brand .logo{
	height:50px;
}

.navbar-light {
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}

	.navbar-light .navbar-nav .nav-link {
		color: rgba(0,0,0,.8);
		font-weight:600;
	}	

	.extra{
		padding:0 5px;
		color:#ffffff;
		background:#2685b5;
		border-radius:4px;	
		white-space: nowrap;
	}

	.extra:hover{
		background:#3e7db2;
	}


	.extra a, .extra a:hover, .extra  a:active {
		color:#ffffff !important;
	}
	
.navbar-light .secure {
    display: block;
    float: right;
    color: #70a84c;
    font-size: 15px;
    font-weight: 400;
    padding-left: 32px;
    background: url('../images/intro-confidential.svg') left center no-repeat;
    background-size: contain;
}	
	
		
h1{
font-size:2.5rem;
font-weight:600;
}

h2{
	font-size:1.75rem;
	margin-top: 2rem;
}

h3{
	font-size:1.45rem;
}	

h4{
	font-size:1.15rem;
}	


.promo{
    font-size: 2.5rem;
	line-height: 1;
	font-weight:700;
	color: #70a84c;
}

.image{
	width:100%;
	min-height:50vh;
	position:relative;
	margin:2rem 0 1rem;
}

	.image.bmw{
		background: url('images/bmw.jpg') no-repeat center center;
		background-size: cover;			
	}
	.image.wolksvagen{
		background: url('images/wolksvagen.jpg') no-repeat center center;
		background-size: cover;			
	}
	
	.image.icon:after{
		display:block;
		content:'';
		width:80px;
		height:80px;
		position:absolute;
		top: 50%;
		left:50%;
		margin-top:-40px;
		margin-left:-40px;
		border-radius:50%;
		border:4px solid #ffffff;
	}	
		.image.icon.payment:after{
			background: url('images/pound.svg') no-repeat center center;
			background-size: 50px 50px;	
		}
		.image.icon.documents:after{
			background: url('images/documents.svg') no-repeat center center;
			background-size: 50px 50px;	
		}
	
	

.faqs{
	list-style: none;
	padding:0;
	margin:0;
}

	.faqs li{
		background: rgba(255,255,255,0.8);
		border-radius:4px;
		margin:0.5rem 0;
		transition: background 0.3s;
	}
	
		.faqs li a{
			display:block;
			padding:1rem 55px 1rem 15px;
			color: #333333;
			text-decoration: none;
			position:relative;
			font-size:1.15rem;
			
		}	
		.faqs li a:after{
			display:block;
			content:'';
			position:absolute;
			top:5px;
			left:auto;
			right:10px;
			bottom:5px;
			width:36px;
			background: url('images/faq.svg') no-repeat center right;
			background-size: contain;			
		}

		.faqs li:hover {
			background: rgba(255,255,255,1);		
		}
		.faqs li:hover a:after{
			animation: shake 2.6s both;			
		}
			
.answers h3{
	min-height:40px;
	background: url('images/faq.svg') no-repeat center left;	
	background-size: 36px auto;	
	padding:1rem 0 1rem 50px;
	margin-top:2rem;
	font-weight:600;
	color:#2685b5 !important;
	border-top: 1px dotted #8993ac;
	
}

.result{
	display: block;
	margin:2rem auto 1rem;
	max-width:120px;
}

.button{
		width:100%;
		max-width:320px;
		padding:20px;
		font-size:1.1rem;
		line-height:1;
		font-weight:700;
		text-transform:uppercase;
		text-align:center;
		border-radius:4px;
		display:block;
		margin:1.5rem 0 0;
		cursor:pointer;
		white-space: normal;
	}
	
	.button:hover{
		text-decoration:none;
	}

		.button.main{
			color:#ffffff;
			background:#2685b5;
			border:0;
			transition:all .5s;
		}
		
		.blue .button.main,
		.dark-blue .button.main{
			background:#3e7db2;
			color:#ffffff;
			border:0;
			transition:all .5s;
		}
		
		.button.center{
			margin:2rem auto 0;
		}
		
		.button.wide{
			max-width:initial;
		}
		
			.button.main:hover{
				color:#ffffff;
				background:#3e7db2;
			}
		
			.blue .button.main:hover,
			.dark-blue .button.main:hover{
				color:#3e7db2;
				background:#ffffff;
			}

footer{
	padding-top:2em;
	background: #333333;
}	
	
	footer .footer-menu{
		text-align:center;
	}
		
		footer .footer-menu a{
			font-size:0.85rem;
			color:#ffffff;
			margin:5px 15px;			
		}
		
		footer .footer-menu a:hover{
			color:rgba(255,255,255,0.75);
			text-decoration:none;			
		}
		
	footer hr{
		margin:25px 0;
		border-color:rgba(255,255,255,0.2);
	}
	
	footer .disclaimer{
		font-size:0.75rem;
		line-height:1.1;
		color:#ffffff;
	}
	
	
#back-to-top {
    position: fixed;
    right: 0;
    bottom: 30px;
    background-color: #fff;
    width: 180px;
    height: 50px;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    z-index: 999;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,.2);
    font-size: 16px;
	font-weight:600;
    color: #333937;
    -webkit-box-align: center;
    align-items: center;
    padding: 5px;
    opacity: 0;
    transition: visibility 0s linear 0s,opacity .25s;
	cursor:pointer;
}	

	#back-to-top .round {
		width: 40px;
		height: 40px;
		background: url(/images/to-top.svg) 50% 50% no-repeat;
		background-size: contain;		
		float:left;
	}

	#back-to-top .btn-text {
		
		float:left;
		margin-left: 20px;
		line-height: 40px;
}

		
.steps p, .steps h4{
	text-align: center;
	margin:1rem auto;
}	
.steps h4{
	font-weight:600;
}

.steps .step{
	margin:20px 10px 0;
	background: #ffffff;
	border-radius:6px;
	padding:20px;
	
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.step span{
	display:block;
	width:80px;
	height:80px;
	margin:0 auto 20px;
}


.features .feature{
	margin:20px 10px 0;
	background: #ffffff;
	border-radius:6px;
	padding:20px 20px 10px 120px;
	
	position:relative;
	box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}

.feature h2{
	margin-top:0;
}

.feature span{
	position:absolute;
	top:50%;
	margin-top: -40px;
	left:15px;
	display:block;
	width:80px;
	height:80px;
}

	.step .st-1 {
		background: url(/images/st-1.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.step .st-2 {
		background: url(/images/st-2.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.step .st-3 {
		background: url(/images/st-3.svg) 50% 50% no-repeat;
		background-size: contain;
	}

	.feature .pro-1 {
		background: url(/images/feature-1.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.feature .pro-2 {
		background: url(/images/feature-2.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.feature .pro-3 {
		background: url(/images/feature-3.svg) 50% 50% no-repeat;
		background-size: contain;
	}
	.feature .pro-4 {
		background: url(/images/feature-4.svg) 50% 50% no-repeat;
		background-size: contain;
	}


input, textarea{
	margin-bottom:1rem;
}
 label{
	margin-bottom:0.6rem;
}

.checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin: 0 !important;
  font-size:.75rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 10px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #ffffff;
  border: 2px solid #c1c1c1;
  border-radius:4px;
}

.checkbox:hover input ~ .checkmark {
  background-color: #e8e8e8;
}

.checkbox input:checked ~ .checkmark {
  background-color: #ffffff;
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox input:checked ~ .checkmark:after {
  display: block;
}

.checkbox .checkmark:after {
  left: 4px;
  top: 0;
  width: 6px;
  height: 12px;
  border: solid #2685b5;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



@media (min-width: 992px){
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 1rem;
		padding-left: 1rem;
	}
}

@media (max-width: 991px){
		.photo-cover,
		.mini-cover{	
			width:100%;
			min-height: 25vh;
		}
}

@media (max-width: 767px){
	.black-box {
		padding: 10px;
		margin: 0;
	}
	
	.button.main {
		margin:10px auto 0;
	}
	
	span.sub{
		text-align: center;
	}
	
	.photo-cover{
		margin-bottom:10px;
	}
	
	h1{		
		text-align: left;
		font-size:1.5rem;
		font-weight: 600;
	}	
	.text-center h1{
		text-align: center;
	}
	
	.success-icon{
		display:none;
	}

}

/* Animations */


.jump {
    -webkit-animation: jump 1.5s ease 0s infinite normal ;
    animation: jump 1.5s ease 0s infinite normal ;
 }

	@keyframes jump {
	  0%{
		transform: translateY(0);
	  }
	  20%{
		transform: translateY(0);
	  }
	  40%{
		transform: translateY(-20px);
	  }
	  50%{
		transform: translateY(0);
	  }
	  60%{
		transform: translateY(-10px);
	  }
	  80%{
		transform: translateY(0);
	  }
	  100%{
		transform: translateY(0);
	 }
	}


	@-webkit-keyframes jump {
	  0%{
		-webkit-transform: translateY(0);
	  }
	  20%{
		-webkit-transform: translateY(0);
	  }
	  40%{
		-webkit-transform: translateY(-20px);
	  }
	  50%{
		-webkit-transform: translateY(0);
	  }
	  60%{
		-webkit-transform: translateY(-10px);
	  }
	  80%{
		-webkit-transform: translateY(0);
	  }
	  100%{
		-webkit-transform: translateY(0);
	 }
	}

.shake{
	animation: shake 2.6s infinite both;
}


	@keyframes shake {
	  10%, 40% {
		transform: translate3d(-1px, 0, 0);
	  }
	  
	  15%, 35% {
		transform: translate3d(2px, 0, 0);
	  }

	  20%, 25%, 30% {
		transform: translate3d(-4px, 0, 0);
	  }

	  22%, 28% {
		transform: translate3d(4px, 0, 0);
	  }
	}
	
	@-webkit-keyframes shake {
	  10%, 40% {
		-webkit-transform: translate3d(-1px, 0, 0);
	  }
	  
	  15%, 35% {
		-webkit-transform: translate3d(2px, 0, 0);
	  }

	  20%, 25%, 30% {
		-webkit-transform: translate3d(-4px, 0, 0);
	  }

	  22%, 28% {
		-webkit-transform: translate3d(4px, 0, 0);
	  }
	}

	
	
.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

	@keyframes pulse {
		0% {
			transform: scale(0.95);
			opacity: 1;		
		}
		50% {
			transform: scale(1);
			opacity: 1;	
		}	
		100% {
			transform: scale(0.95);
			opacity: 1;	
		}			
	}

	@-webkit-keyframes pulse {
		0% {
			-webkit-transform: scale(0.95);
			opacity: 1;		
		}
		50% {
			-webkit-transform: scale(1);
			opacity: 1;	
		}	
		100% {
			-webkit-transform: scale(0.95);
			opacity: 1;	
		}			
	}