@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn,  img, ins, kbd, q, s, samp,
small, strike,  sub, sup, tt, var,u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html, body {
	width: 100%;
	height: 100%;
	min-height: 100%;	
	font-family: 'Montserrat', sans-serif;
	font-size:14px;
	line-height: 150%;
	-webkit-text-size-adjust: none;
}


html, body, a {	color: #262262;}

.bg	{ 	position: fixed;	top: 0px;	left: 0px;	right: 0px;	bottom: 0px; 	background: #fff url("../img/bg.jpg") no-repeat center center;	background-size: cover;	}

#container, #border1, #border2{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

.centered{ position: relative; width: 100%; margin: 0 auto 0 auto; 	}
.centered{  transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear;	}

.container{	position: relative;	float: left;	width: 100%; }
::before, ::after{ content:''; } 
.trans, ::before, ::after{ transition:all .2s linear; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }


#blok{
	position: fixed;
	bottom: 125px;
	right: 40px;
	width: 320px;
	background: #fff;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
	box-sizing: border-box;
	border-radius: 15px;
	padding: 45px 50px 140px ;
	font-weight: normal;
	font-weight: 500;
}

#blok:before {
	position: absolute;
	bottom: 10px;
	left: 40px;
	right: 40px;
	height: 120px;
	background: url("../img/kesari-consultancy-liggend.svg") no-repeat center center;
	background-size:  320px auto;
	border-top: 1px solid #ddd;
}


.rij {  text-decoration: none; }
a.rij:hover {  text-decoration: underline; }
.rij.icoon:before { position: absolute; top: 0px; left: 0px; width: 25px; height: 25px; background:Red; }



.rij.naam  { font-weight: bold; font-size: 26px; padding: 0 0 10px;  }
.rij.functie  { font-style: italic; color: #F99B1C; font-size: 15px;  font-weight: 500; padding-bottom: 20px; line-height: 130%; }

.rij.adres  {  padding: 3px 0 10px 38px; }
.rij.email  {  padding: 3px 0 10px 38px; }
.rij.telefoon  {  padding: 3px 0 10px 38px; }
.rij.kvk  {  padding: 3px 0 10px 38px; }
.rij.bedrijf  {  padding: 3px 0 10px 38px; font-weight: bold; }


.rij.adres:before  { background: url("../img/svg-adres.svg") no-repeat center center; background-size: auto 80%;}
.rij.email:before  { background: url("../img/svg-email.svg") no-repeat center center; background-size: auto 50%;}
.rij.telefoon:before  { background: url("../img/svg-telefoon.svg") no-repeat center center; background-size: auto 80%;}
.rij.kvk:before  { background: url("../img/svg-kvk.svg") no-repeat center center; background-size: auto 80%;}
.rij.bedrijf:before  { background: url("../img/svg-bedrijf.svg") no-repeat center center; background-size: auto 80%;}

#blok #vanaf{
	position: absolute;
	top: -20px;
	right: -20px;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	background:#262262;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 20px 0 0 0;
	box-sizing: border-box;
	font-size: 10px;
	line-height: 140%;
	text-transform: uppercase;
	transform: rotate(-10deg);
	display:none;
}

#blok #vanaf span { font-size: 16px; }

.logobalk{ position: fixed; bottom: 0; left: 0; right: 0;  background: rgba(0,0,0,0.5); padding: 20px 20px; box-sizing: border-box; overflow: hidden; }
.logobalk .logobalkoverflow{ position: relative;float: left; width: 1360px;  }
.logobalk .logo{ position: relative; float: left; height: 50px; margin-right: 30px; animation: fadeIn 1s forwards;  opacity: 0; }
.logobalk .logo1{ width: 160px; background: url("../img/logo-rijkswaterstaat.svg") no-repeat center center; background-size: contain; }
.logobalk .logo2{ width: 140px; background: url("../img/logo-wijtechniek.svg") no-repeat center center; background-size: auto 60%; }
.logobalk .logo3{ width: 180px; background: url("../img/logo-svb.svg") no-repeat center center; background-size: contain; }
.logobalk .logo4{ width: 160px; background: url("../img/logo-ofed.webp") no-repeat center center; background-size: auto 100%; }
.logobalk .logo5{ width: 90px; background: url("../img/logo-oomt.svg") no-repeat center center; background-size: auto 40%; }
.logobalk .logo6{ width: 90px; background: url("../img/logo-utrecht.svg") no-repeat center center; background-size: auto 90%; }
.logobalk .logo7{ width: 100px; background: url("../img/logo-OOC.svg") no-repeat center center; background-size: auto 100%; }
.logobalk .logo8{ width: 180px; background: url("../img/logo-gemeenteveenendaal.svg") no-repeat center center; background-size: auto 80%; }


/* Fade-in keyframes */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Staggered animation delays */
.logobalk .logo1 { animation-delay: 0s; }
.logobalk .logo2 { animation-delay: 0.3s; }
.logobalk .logo3 { animation-delay: 0.6s; }
.logobalk .logo4 { animation-delay: 0.9s; }
.logobalk .logo5 { animation-delay: 1.2s; }
.logobalk .logo6 { animation-delay: 1.5s; }
.logobalk .logo7 { animation-delay: 1.8s; }
.logobalk .logo8 { animation-delay: 1.8s; }

@media screen and (min-width: 1320px) and (max-width: 1660px) {
	
	.logobalk .logobalkoverflow{  width: 1200px;  }
	.logobalk .logo{  height: 40px; margin-right: 20px; }
	.logobalk .logo1{ width: 140px;  background-size: contain; }
	.logobalk .logo2{ width: 130px;  background-size: auto 70%; }
	.logobalk .logo3{ width: 160px;  background-size: contain; }
	.logobalk .logo4{ width: 110px;  background-size: auto 100%; }
	.logobalk .logo5{ width: 70px;  background-size: auto 40%; }
	.logobalk .logo6{ width: 70px;  background-size: auto 90%; }
	.logobalk .logo7{ width: 80px;  background-size: auto 100%; }
	.logobalk .logo8{ width: 160px;  background-size: auto 80%; }	
}

@media screen and (min-width: 1024px) and (max-width: 1319px) {
	
	.logobalk .logobalkoverflow{  width: 850px; }
	.logobalk .logo{  height: 35px; margin-right: 20px; }
	.logobalk .logo1{ width: 90px;  background-size: contain; }
	.logobalk .logo2{ width: 120px;  background-size: auto 70%; }
	.logobalk .logo3{ width: 90px;  background-size: contain; }
	.logobalk .logo4{ width: 90px;  background-size: auto 100%; }
	.logobalk .logo5{ width: 60px;  background-size: auto 40%; }
	.logobalk .logo6{ width: 50px;  background-size: auto 90%; }
	.logobalk .logo7{ width: 60px;  background-size: auto 90%; }
	.logobalk .logo8{ width: 120px;  background-size: auto 75%; }	
}

@media screen and (min-width: 740px) and (max-width: 1023px) {
	
	.logobalk .logobalkoverflow{  width: 650px;  }
	.logobalk .logo{  height: 40px; margin-right: 20px; }
	.logobalk .logo1{ width: 140px;  background-size: contain; }
	.logobalk .logo2{ width: 140px;  background-size: auto 70%; }
	.logobalk .logo3{ width: 140px;  background-size: contain; }
	.logobalk .logo4{ width: 90px;  background-size: auto 100%; }
	.logobalk .logo5{ width: 70px;  background-size: auto 40%; }
	.logobalk .logo6{ width: 70px;  background-size: auto 90%; }
	.logobalk .logo7{ width: 80px;  background-size: auto 90%; }
	.logobalk .logo8{ width: 140px;  background-size: auto 75%; }	
}


@media screen and (min-width: 1px) and (max-width: 739px) {
	
	body{  }
	
	#container{ bottom:auto;  position: relative; float: left; width: 100%; right: auto; left: auto; top: auto; }
	
	.centered{ width: 300px; }
	.bg	{ 	background: #fff url("../img/bg-mobiel.jpg") no-repeat center top;	background-size: cover;	}
	
	#blok{
		right: auto;
		bottom: auto;
		position: relative; float: left;
		width: 100%;
		margin-top: 130px;
		margin-bottom: 20px;
		font-size: 12px;
		padding: 40px 45px 120px ;
	}
	
	#blok:before { bottom: 5px; height: 100px;  background-size: 290px auto; }
	
	.rij.functie { padding-bottom: 15px; }
	.rij.adres  {  padding: 3px 0 7px 38px; }
	.rij.email  {  padding: 3px 0 7px 38px; }
	.rij.telefoon  {  padding: 3px 0 7px 38px; }
	.rij.kvk  {  padding: 3px 0 7px 38px; }
	.rij.bedrijf  {  padding: 3px 0 7px 38px;  }
	
	.logobalk{ position: relative; float: left; bottom: auto; width: 100%; padding: 10px 0 50px; background: none; }

	
	
	.logobalk .logobalkoverflow{ position: relative; float: none; width: 300px; margin: 0 auto 0 auto;  }
	.logobalk .logo{  height: 40px; width: 50%; margin: 20px 0 0 0; }
	.logobalk .logo5{  width: 33%; }
	.logobalk .logo6{  width: 33%; }
	.logobalk .logo7{  width: 30%; }


}