* {
    color: black;
    font-family: 'Spline Sans', sans-serif;
    font-weight: 600;
}

#header_logo{
    margin: 0 !important;
    padding: 30px 0;
    background: url('/images/circles-pattern.svg'), #2B2E34;
    background-repeat: no-repeat;
}

#header_logo a{
    color: white;
    font-weight: 700;
    font-size: 45px;
    text-decoration: none;
}

.navbar, .navbar-collapse{
    background-color: #EFEFEF;
}

ul.navbar-nav li, ul.navbar-nav li a{
	max-height: 50px !important;
}

ul.navbar-nav li a{
    color: #282B2F !important;
    font-size: 14px !important;
    
	/* Pascal 20 -> 14 om taal toe te voegen*/
	padding-left: 14px;
    padding-right: 14px;
}

.navbar .nav > li > a,
.navbar-inverse .navbar-nav > .active > a:hover{
    transition: all ease-out 0.1s;
}

.navbar-inverse .navbar-nav > .active a{
	background-color: transparent !important;
}

.navbar-inverse .navbar-nav > .active a:hover{
	background-color: #43B02A !important;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #282B2F !important;
    background-color: #43B02A;
}

/*
.navbar-nav li:last-of-type{
	padding: 0 !important;
}

.navbar-nav li:last-of-type a{
	background-color: #2367C5 !important;
	color: white !important;
	transition: all ease-out 0.1s;
}

.navbar-nav li:last-of-type.active a{
	background-color: #2367C5 !important;
	color: white !important;
}

.navbar-nav li:last-of-type.active a:hover{
	background-color: rgba(35, 103, 197, 0.9) !important;
	color: white !important;
}

.navbar-nav li:last-of-type a::before{
	content: url('/images/pijl-start-scan.svg');
	position: relative;
	top: 3px;
	margin-right: 8px;
}

.navbar-nav li:last-of-type a:hover{
    background-color: rgba(35, 103, 197, 0.9) !important;
    color: white !important;
}*/
/* Pascal: vervangt bovenstaande omdat er nu 2 zijn */
.navbar-nav li.startbtn{
	padding: 0 !important;
	margin-right:20px; /* Pascal */
}

.navbar-nav li.startbtn a{
	background-color: #2367C5 !important;
	color: white !important;
	transition: all ease-out 0.1s;
}

.navbar-nav li.startbtn.active a{
	background-color: #2367C5 !important;
	color: white !important;
}

.navbar-nav li.startbtn.active a:hover{
	background-color: rgba(35, 103, 197, 0.9) !important;
	color: white !important;
}

.navbar-nav li.startbtn a::before{
	content: url('/images/pijl-start-scan.svg');
	position: relative;
	top: 3px;
	margin-right: 8px;
}

.navbar-nav li.startbtn a:hover{
    background-color: rgba(35, 103, 197, 0.9) !important;
    color: white !important;
}

/* Pascal */
.navbar-nav li.taal .sel {
	margin-top:-10px;
}
.navbar-nav li.taal A:hover {
	background-color: inherit;
}


.home{
	position: relative;
	overflow: hidden;
	z-index: 50;
}

.home::after{
	content: url('/images/bollen.png');
	position: absolute;
	right: 0;
	bottom: -5px;
}

.home .illustratie{
	pointer-events: none;
	position: absolute;
	right: -100px;
	z-index: 900;
}

.home .green-bg{
	background-color: #43B02A;
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
	position: relative;
}

.home-intro-col{
	padding-right: 75px;
}

.home-intro-col .home-intro{
	background-color: white;
	padding: 0 75px;
	padding-top: 25px;
	padding-bottom: 70px;
	z-index: 500;
	position: relative;
}

.home-intro-col .home-intro h1{
	color: #43B02A;
	font-size: 44px;
	max-width: 70%;
	line-height: 54px;
}

.home-intro-col .home-intro h1{
	margin-bottom: 35px;
}

.home-intro-col .home-intro p{
    font-size: 16px !important;
    font-weight: 400!important;
    line-height: 30px;
    margin-bottom: 50px;
}

.home-intro-col .home-intro p:first-of-type{
    font-weight: 600 !important;
    font-size: 18px !important;
}

.home-intro-col .home-intro .manual{
	display: inline-block;
	float: right;
	text-decoration: none;
}

.home-intro-col .home-intro .manual span{
	font-weight: 700;
	color: #2B2E34;
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 2px solid #43B02A;
	z-index: 9999;
	position: relative;
	transition: all ease-out 0.1s;
}

.home-intro-col .home-intro .manual:hover span{
	color: #43B02A;
}

.home-intro-col .home-intro .manual::before{
	content: url('/images/pijl-groen.svg');
	position: relative;
	top: 3px;
	margin-right: 12px;
	transition: all ease-out 0.1s;
}

.home-intro-col .home-intro .manual:hover::before{
	margin-right: 10px;
}

.green-bg .button-wrap{
	position: absolute;
	width: 100%;
	bottom: 50px;
}

.green-bg .button-wrap .cta-col{
	text-align: right;
}

.green-bg .button-wrap .cta-col .startscan-cta{
	display: inline-block;
	background-color: #2B2E34;
	color: white;
	padding: 17px 25px;
	position: relative;
	z-index: 2000;
	transition: all ease-in 0.1s;
	text-decoration: none;
}

.green-bg .button-wrap .cta-col .startscan-cta:hover{
	background-color: rgba(43, 46, 52, 0.95);
}

.green-bg .button-wrap .cta-col .startscan-cta::before{
	content: url('/images/pijl-blauw.svg');
	position: relative;
	top: 3px;
	margin-right: 12px;
	transition: all ease-in 0.1s;
	position: relative;
	left: 0;
}

.green-bg .button-wrap .cta-col .startscan-cta:hover::before{
	left: 5px;
}

.home .black-bg{
	background-color: #2B2E34;
}

.home-modules{
	margin-top: 50px;
	position: relative;
	z-index: 100;
}

.home-modules .module{
	border: 2px solid #2367C5;
	padding: 23px 25px;
	position: relative;
	margin-bottom: 35px;
	background-color: #2B2E34;
}

.home-modules .module .module-title{
	display: inline-block;
	margin-bottom: 5px;
}

.home-modules .module .module-title span{
	color: #2367C5;
	text-transform: uppercase;
	font-size: 20px;
}

.home-modules .module .module-desc{

}

.home-modules .module .module-desc p{
	margin-bottom: 0;
	font-size: 14px;
	color: white;
}

.infographics-wrap{
	padding: 25px 12%;
}

#maincontent .container h3 {
    font-size: 45px;
    color: #43B02A;
    margin-bottom: 15px;
}

.vraag-header .info-row{
    border-bottom: 2px solid #C7C7C7;
    padding-bottom: 3px;
}

.vraag-header .info-row span{
    color: #C7C7C7;
    font-size: 12px;
}

.vraag-header .info-row .info{
    text-transform: uppercase;
}

.vraag-header .info-row .minutes{
    float: right;
}

.vraag-header{
    padding-left: 35px;
    padding-right: 35px;
}

.vraag-header:first-of-type{
    margin-bottom: 30px;
    margin-top: 50px;
}

.vraag-header .progress{
    border: 2px solid black;
    border-radius: 40%;
    height: 13px;
    width: 35px;
}

.vraag-header .progress.on{
    background-color: #43B02A;
}

.vraag-header .progresslabel{
    float: left;
    margin-right: 15px;
    position: relative;
    bottom: 5px;
}

.heading-banner{
    background-color: #2367C5;
    padding: 15px 0;
    margin: 10px 0;
}

.heading-banner .heading-wrap{
    padding: 0 35px;
}

.heading-banner .heading-wrap h4{
    color: white;
    font-weight: 600;
    font-size: 30px;
}

.scan-content label{
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 26px;
    position: relative;
    bottom: 3px;
    cursor: pointer;
}

.scan-content b span{
    display: inline-block;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 30px;
}

.scan-content input[type="text"], .scan-content textarea{
    background-color: #EFEFEF;
    border: none;
    border-radius: 0;
}

input[type="submit"]{
    border-radius: 0;
    background-color: #2367C5 !important;
    transition: all ease-out 0.1s;
    padding: 13px 30px;
}

input[type="submit"]:hover{
    background-color: rgba(35, 103, 197, 0.9) !important;
}

.scan-nav{
	margin-bottom: 50px;
}

.content-page{
	padding: 75px 0;
	position: relative;
}

.content-page .content-bg{
	max-width: 33%;
	position: absolute;
	bottom: 0;
	right: 0;
}

.content-page h1{
	margin-top: 0 !important;
	color: #2367C5 !important;
	font-size: 42px;
	margin-bottom: 40px !important;
}

.content-page p, .content-page ul, .content-page ol{
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 28px !important;
	margin-bottom: 25px;
}

.content-page ul li, .content-page ol li{
	margin-bottom: 10px;
}

.content-page p{
	margin-bottom: 25px;
}

.content-page h2{
	margin-top: 50px !important;
	margin-bottom: 25px !important;
	font-size: 21px;
	line-height: 33px;
}

.content-page h3{
	font-size: 20px !important;
	font-weight: 600 !important;
	color: black !important;
	margin-top: 40px !important;
	margin-bottom: 10px !important;
}

.content-page p a,
.content-page ul a,
.content-page ol a{
	font-weight: 600 !important;
	color: #2367C5 !important;
	transition: all ease-in 0.1s !important;
	text-decoration: none;
}

.content-page p a:hover,
.content-page ul a:hover,
.content-page ol a:hover{
	color: rgba(35, 103, 197, 0.9) !important;
}

.content-page input{
	border-radius: 0 !important;
	margin-top: 5px;
	margin-bottom: 25px;
}

.content-page input[type="submit"]{
	height: auto !important;
	margin-top: 25px;
}

.tutorial{
	width: 100%;
	height: 450px;
}

/* Footer */

.footer-photo{
	height: 315px;
	background-image: url('/images/footer-foto.png');
	background-size: cover;
	background-position: center center;
	position: relative;
}

.footer-photo a{
	display: inline-block;
	padding: 15px 30px;
	background-color: #2367C5;
	color: white;
	font-size: 18px;
	text-decoration: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all ease-out 0.1s;
}

.footer-photo a:hover{
	background-color: rgba(35, 103, 197, 0.9);
}

.footer-photo a::before{
	content: url('/images/pijl-groen.svg');
	position: relative;
	top: 3px;
	margin-right: 12px;
	transition: all ease-out 0.1s;
	left: 0;
}

.footer-photo a:hover::before{
	left: 5px;
}

.footer{
    background-color: #2B2E34 !important;
    margin-top: 0 !important;
}

.footer p:first-of-type a{
    color: #43B02A !important;
    text-decoration: none;
}

.footer p{
    color: white !important;
    font-size: 12px;
    padding-right: 45px;
}

.footer p:last-of-type{
    font-weight: 400;
    font-size: 10px;
}

.footer p:last-of-type a{
    text-decoration: none;
    transition: all ease-in 0.1s;
}

.footer p:last-of-type a:hover{
    color: #43B02A !important;
}

.footer .footer-pattern img{
	position: relative;
	bottom: -35px;
	max-width: 100%;
}

.footer .eu-wrap a{
	display: inline-block;
	vertical-align: top;
}

.footer .eu-wrap span{
	display: inline-block;
	width: 70%;
	margin-left: 10px;
	color: white;
	font-size: 11px;
	line-height: 15px;
}

.footer .footer-logos a{
	display: inline-block;
}

.footer .footer-logos a:first-of-type{
	margin-bottom: 15px;
	margin-right: 30px !important;
}

.footer .footer-logos a:nth-of-type(2){
	margin-bottom: 15px;
}

.footer .footer-logos a:nth-of-type(3){
	margin-bottom: 15px;
}

.final-footer{
    padding: 10px 0;
    font-size: 10px;
}

.final-footer .container div{
    float: right;
}

.final-footer .container div a{
    color: black;
    text-decoration: none;
    transition: all ease-in 0.1s;
}

.final-footer .container div a:last-of-type{
    border-bottom: 2px solid #43B02A;
}

.final-footer .container div a:hover{
    color: #43B02A;
}


/* Responsive Design */

@media only screen and (max-width: 1600px) {
	.infographics-wrap{
		padding: 25px 8%;
	}
}

@media only screen and (max-width: 1600px) {
	.infographics-wrap{
		padding: 25px 5%;
	}
}

@media only screen and (max-width: 1200px) {

	.home .illustratie{
		right: -235px;
	}

	.content-page .content-bg{
		display: none;
	}

	.infographics-wrap{
		padding: 25px 3%;
	}

}

@media only screen and (max-width: 992px) {

	#header_logo{
		padding: 15px 0;
	}

	#header_logo a{
		font-size: 32px;
	}

	.home .illustratie{
		display: none;
	}

	.home-intro-col{
    	padding-right: 15px;
    }

   	.green-bg .button-wrap{
		display: none;
	}

    .footer .footer-pattern{
    	display: none;
    }

   	.footer-photo{
		height: 350px;
	}

	.infographics-wrap{
		padding: 25px 0%;
	}

}

@media only screen and (max-width: 767px) {

	.navbar-header{
		width: calc(100% + 0px);
	}

	.navbar-collapse{
		width: calc(100% + 15px) !important;
	}

	.home-intro-col .home-intro{
		padding: 20px 25px 60px 25px;
	}

	.home-intro-col .home-intro h1{
		font-size: 26px;
		line-height: 34px;
		margin-bottom: 20px;
		max-width: none;
	}

	.home-intro-col .home-intro p {
	    font-size: 16px !important;
	    line-height: 26px;
	    margin-bottom: 25px;
	}

	.home-intro-col .home-intro p:first-of-type {
	    font-size: 16px !important;
	    line-height: 26px !important;
	}

	.navbar-toggle{
		border-radius: 0;
		margin-right: 0;
	}

	.content-page{
		padding: 50px 0;
	}

	.content-page h1{
		font-size: 32px;
		margin-bottom: 20px !important;
	}

	.content-page p{
		margin-bottom: 25px;
	}

	.content-page h2{
		margin-top: 35px !important;
		margin-bottom: 15px !important;
		font-size: 24px;
		line-height: 34px;
	}

	.content-page h3{
		font-size: 18px !important;
		margin-top: 30px !important;
		margin-bottom: 10px !important;
	}

	.tutorial{
		width: 100%;
		height: 275px;
	}

	.footer-photo{
		height: 250px;
	}

	.footer-photo a::before{
		display: block;
		position: static;
		text-align: center;
		margin-right: 0;
	}

	.footer-photo a{
		padding: 10px 15px;
		text-align: center;
		width: 55%;
	}

	.footer p{
		padding-right: 0;
	}

	.footer .eu-wrap{
		margin-bottom: 25px;
	}

	.footer .eu-wrap span{
		text-align: left;
	}

	.footer .footer-logos a{
		margin: 0 15px !important;
		margin-bottom: 10px !important;
	}

}