/*!
 * Start Bootstrap - Agency v5.2.2 (https://startbootstrap.com/template-overviews/agency)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-agency/blob/master/LICENSE)
 */
 

html, body {
overflow-x: hidden!important;
max-width: 100vw!important;
display: block;

  font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/header-bg.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}

.schilder:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/schilderbg.jpg) no-repeat center center!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}

.spuiten:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/spuitbg.jpg) no-repeat center center!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}

.behangen:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/behangbg.jpg) no-repeat center center!important;
  -webkit-background-size: contain!important;
  -moz-background-size: contain!important;
  -o-background-size: contain!important;
  background-size: contain!important;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}
.schoonmaak:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/schoonmaakbg.jpg) no-repeat center center!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}

.houtrot:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/houtrotbg.jpg) no-repeat center center!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}

.ruiten:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(../img/ruitbg.jpg) no-repeat center center!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    animation: backgrounda 5s ease-in-out infinite alternate!important;
  
}

@keyframes backgrounda {
    0% {
        transform: scale(1.0);
	
    }
    100% {
        transform: scale(1.2) rotate(2deg);
	
    }

}

p {
  line-height: 1.75;
}

a {
  color: #2f586e;
}

a:hover {
	color: #e8ca82!important;
	text-decoration: none!important;
}

.hr {
	display: block;
	height: 1px;
	width: 300px;
	background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(46,191,201,1) 0%, rgba(46,191,201,1) 31%, rgba(46,191,201,0) 87%);
}

a:hover {
  color: #2ebfc9;
}

.float {
	position: fixed;
	z-index: 800;
	bottom: 10px;
	left: 10px;
	height: 60px;
	width: 60px;
	border-radius: 180px;
	background-color: #385769;
	line-height: 60px;
	color: white;
	font-size: 26px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transform: rotate(0deg);
	text-align: center;
		-webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.1);
box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.1);
}

.float:hover {
	width: 70px;
	height: 70px;
	line-height: 65px;
	transform: rotate(360deg);
}

.float a {
	color: white!important;
}
.text-primary {
  color: #2ebfc9 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

}

#referenties {

	padding-top: 90px;
	position: relative;
	display: block;
	width: 100vw;
}
.bgwit {
	background-color: white;

}

.bgsecundair {
	background: #eaeff4!important;
	transition: all 1s;
	-webkit-transition: all 1s;
}

.carousel-inner {
	display: block;
	position: relative;
	width: 100vw;
	padding-left: 100px;
	padding-right: 100px;
	margin-left: auto;
	margin-right: auto;
}
.carousel-control-next {
	color: black !important;
	z-index: 100000;
	position: absolute;
	right: 0px;
	top: 0;
	color: black;
	
}


.carousel-control-prev {
	color: black !important;
	z-index: 100000;
	position: absolute;
	left: 0px;
	top: 0;
	color: black;
	
}

.page-section {
  padding: 100px 0;
}

.page-section h2.section-heading {
  font-size: 36px;
  margin-top: 10px;
  letter-spacing: 2px;
  line-height: 26px;
  margin-bottom: 40px;
  font-weight: 300;

}

.page-section h2.section-heading b {

  font-weight: 700!important;

}

.page-section h2.section-heading span {
  font-size: 14px;
  margin-top: -10px;
  font-weight: 400;
  letter-spacing: 1.1px;
  color: #ff8300;


  margin-bottom: 35px;
}

.page-section h3.section-subheading {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 75px;
  text-transform: none;
  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@media (min-width: 768px) {
  section {
    padding: 150px 0;
  }
}

::-moz-selection {
  background: #2ebfc9;
  text-shadow: none;
}

::selection {
  background: #2ebfc9;
  text-shadow: none;
}

img::-moz-selection {
  background: transparent;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

.btn {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-weight: 700;
}

.btn-xl {
  font-size: 18px;
  padding: 20px 40px;
}

.btn-primary {
	border-radius: 20px;
	color: #fff!important;
text-transform: uppercase;
text-decoration: none;
background: rgb(61,201,211);
background: linear-gradient(0deg, rgba(61,201,211,1) 50%, rgba(46,191,201,1) 50%);
  box-shadow: 0 0 0 0.2rem #31c1cb !important;
border: 2px solid #fafafa !important;
    -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: white !important;
background: rgb(61,201,211);
background: linear-gradient(180deg, rgba(61,201,211,1) 50%, rgba(46,191,201,1) 50%);
  box-shadow: 0 0 0 0.2rem #3dc9d3 !important;
border: 2px solid #fafafa !important;


}

.btn-primary:active, .btn-primary:focus {
  box-shadow: 0 0 0 0.2rem #31c1cb !important;
}




.btn-primarya {
	color: #fff!important;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
text-decoration: none;
background: none;
border: 2px solid #fff;
    -webkit-transition: all 0.6s;
  transition: all 0.6s;
  margin: 5px;
  position: relative;
  z-index: 1;
     
  
}


.btn-primarya:hover .buttonbg {
	width: 100%;
	height: 100%;
	border-bottom-right-radius: 0px;
}
.btn-primaryaa {
	color: #385769!important;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
text-decoration: none;
background: none;
border: 2px solid #385769;
    -webkit-transition: all 0.6s;
  transition: all 0.6s;
  margin: 5px;
  position: relative;
  z-index: 5;
     
  
}
.btn-primaryaa:hover .buttonbg {
	width: 100%;
	height: 100%;
	border-bottom-right-radius: 0px;
	z-index: 0;
}
.buttonbg {
	display: block;
	height: 0%;
	width: 0%;
	background: #385769;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	z-index: -1!important;
	border-bottom-right-radius: 100%;
}

.btn-primarya:hover, .btn-primarya:focus, .btn-primarya:active {
  color: white !important;
border: 2px solid #385769;

}

.btn-primaryaa:hover, .btn-primaryaa:focus, .btn-primaryaa:active {
  color: white !important;
border: 2px solid #385769;


}

.btn-primarya:active, .btn-primarya:focus {

}


.btn-primaryb {
	color: #fff!important;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 2px;
text-decoration: none;
background: #ffb840;
border: 2px solid #ffb840;

    -webkit-transition: all 0.6s;
  transition: all 0.6s;
  margin: 5px;
  
}

.btn-primaryb:hover, .btn-primaryb:focus, .btn-primaryb:active {
  color: white !important;
background: #ffb840;
border: 2px solid #ffb840;
-webkit-box-shadow: 0px 0px 31px 2px rgba(255,185,64,1);
-moz-box-shadow: 0px 0px 31px 2px rgba(255,185,64,1);
box-shadow: 0px 0px 31px 2px rgba(255,185,64,1);

}

.btn-primaryb:active, .btn-primaryb:focus {
  box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important;
}


#mainNav .navbar-toggler {
  font-size: 12px;
  right: 0;
  padding: 13px;
  text-transform: uppercase;
  color: rgba(0,0,0,.4);
  border: 0;
  z-index: 800;

  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#mainNav .navbar-brand {
  color: #ffffff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

}

#mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: #d2973b;
}

#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 95%;
  font-weight: 400;
  padding: 0.75em 0;
  letter-spacing: 1.3px;
  color: white;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #d2973b;

}


header.masthead h2{
letter-spacing: 2px;
font-weight: 400;
text-transform: none;
  font-size: 22px !important;
}

header.masthead h3{
	margin-top: 20px;
	margin-bottom: 20px;
letter-spacing: 1.2px;
font-size: 18px!important;
font-weight: 400;
line-height: 22px!important;
}


.logovlak {
	position: absolute;
	display: block;
	height: 200px;
	width: 350px;
	transform: rotate(45deg);
	top:-180px;
	border: 2px solid rgba(255,255,255,.4);
	left: -60px;
background-color: #385769;
	z-index: 0;
	-webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.1);
box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.1);
		  animation: vanboven 2s ease-in-out!important;
		  transition: all 0.5s;
		  -webkit-transition: all 0.5s;
		  
}

.alleendesktop {
	display: none;
}

.alleenmobiel {
	display: block;
}
@keyframes vanlinks {
    0% {
       left: -800px;
	   
	
    }
    100% {
        left: 0px;
	
    }
}

.vlak {
	width: 102vw;
	height: 140vh;
	position: absolute;
	top: -100px;
	left: 0px;
	transform: rotate(0deg);
	background: rgb(216,171,78);
background: linear-gradient(138deg, rgba(216,171,78,.9) 21%, rgba(235,196,114,.95) 55%, rgba(192,149,62,.9) 85%);
	display: block;
	z-index: 0;
	  animation: vanlinks 2s ease-in-out!important;
	  border-right: 15px solid rgba(255,255,255,.2);
	
}

.vlaksub {
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(0deg);
	background: rgb(216,171,78);
background: linear-gradient(138deg, rgba(216,171,78,.8) 21%, rgba(235,196,114,.85) 55%, rgba(192,149,62,.8) 85%);
	display: block;
	z-index: 0;
	  animation: vanlinks4 3s ease-in-out!important;
	  border-right: 15px solid rgba(255,255,255,.2);
	
}

@media (max-width: 992px) {
	header.masthead .btn-primarya {
	  color: white !important;
border: 2px solid #385769;background: #385769;
}

.navbar-collapse {
	background: #0d1f2d;
padding: 20px;
padding-top: 100px;
margin-top: -95px;
width: 100vw!important;
border: 1px solid rgba(0,0,0,.1);


}
}
	
	@media (min-width: 992px) {
	
	.vlak {
	width: 63%;
	height: 140vh;
	position: absolute;
	top: -100px;
	left: -100px;
	transform: rotate(-5deg);
	background: rgb(216,171,78);
background: linear-gradient(138deg, rgba(216,171,78,.9) 21%, rgba(235,196,114,.95) 55%, rgba(192,149,62,.9) 85%);
	display: block;
	z-index: 0;
	  animation: vanlinks 2s ease-in-out!important;
	  border-right: 15px solid rgba(255,255,255,.2);
	
}
	.alleendesktop {
	display: block;
}

.alleenmobiel {
	display: none;
}

@keyframes vanlinks {
    0% {
       left: -800px;
	   
	
    }
    100% {
        left: -100px;
	
    }
}

@keyframes vanlinks4 {
    0% {
       left: -100%;
	   
	
    }
    100% {
        left: 0px;
	
    }
}

.logovlak {
	position: absolute;
	display: block;
	height: 200px;
	width: 350px;
	transform: rotate(45deg);
	top:-180px;
	border: 2px solid rgba(255,255,255,.4);
	left: 130px;
background-color: #385769;
	z-index: 0;
	-webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.2);
		  animation: vanboven 2s ease-in-out!important;
		  transition: all 0.5s;
		  -webkit-transition: all 0.5s;
		  
}
  #mainNav {
    padding-top: 5px;
    padding-bottom: 15px;
    transition: padding-top 0.3s, padding-bottom 0.3s;
    border: none;
    background: none;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    transition: all 0.3s;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 1.1em 1em !important;
	  margin-top: 5px;
	  transition: all 0.5s;
	  -webkit-transition: all 0.5s;
  }
  
    #mainNav .navbar-nav .nav-item .nav-link:hover {
    padding: 1.1em 1em !important;
	  margin-top: 0px;
	  text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
  }
  #mainNav.navbar-shrink {
 
   background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5200630594034489) 100%);
transition: all 0.5s;
	-webkit-transition: all 0.5s;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
    padding: 20px 0;
  }
  
  header.masthead h1{
letter-spacing: 1px;
font-weight: 400;
font-size: 38px;
text-transform: uppercase!important;
color: white !important;

}

header.masthead h2{
letter-spacing: 1px;
font-size: 20px!important;
font-weight: 400;
text-transform: none!important;
}
}

header.masthead {
  text-align: center;
  color: white;
 width: 100vw;
    min-height: 50vh;
	padding-bottom: 60px;
background: rgb(13,30,46);
background: linear-gradient(138deg, rgba(13,30,46,0.208018241476278) 21%, rgba(28,54,78,0.28084737312893904) 55%);

  background-position: center center;
  background-size: cover;
}

header.masthead2 {

    min-height: 100vh!important;
}

.fotooverlay{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(336deg, rgba(0,0,0,0.10157566444546573) 23%, rgba(56,193,203,0.25003504819896705) 79%);
}



header.masthead .intro-text {
  padding-top: 0px;
  padding-bottom: 100px;
}

header.masthead .intro-text .intro-lead-in {
  font-size: 22px;

  line-height: 22px;
  margin-bottom: 25px;
  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

header.masthead .intro-text .intro-heading {
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 25px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.padding40 {
	
	padding: 40px;
}

  header.masthead .intro-text2 {
    padding-top: 110px!important;
    padding-bottom: 50px!important;
  }

@media (min-width: 900px) {
	.padding40 {
	
	padding: 100px;
}
  header.masthead .intro-text {
    padding-top: 200px;
    padding-bottom: 0px;
  } 

  header.masthead .intro-text2 {
    padding-top: 130px!important;
    padding-bottom: 50px!important;
  }
  header.masthead .intro-text .intro-lead-in {
    font-size: 40px;

    line-height: 40px;
    margin-bottom: 25px;
    font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
  header.masthead .intro-text .intro-heading {
    font-size: 75px;
    font-weight: 700;
    line-height: 75px;
    margin-bottom: 50px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
}



.hetlogo:hover .logovlak {
	top: -170px!important;
}

.hetlogo {
	position: relative!important;
	bottom: 0;
	left: 85px;
	margin-top: 0px;
}


.vector {
	height: 690px;
	position: absolute;
	right: 27%;
	top: -610px;
	z-index: 200;
	animation: vanlinks2 2s ease-in-out!important;
}

.vectorsubpagina {
	height: 350px;
	position: absolute;
	right: 14%;
	top: -330px;
	z-index: 200;
	animation: vanlinks3 2s ease-in-out!important;
}

.vectorsubpagina2 {
	height: 500px;
	position: absolute;
	right: 14%;
	top: -460px;
	z-index: 200;
	animation: vanlinks6 2s ease-in-out!important;
}

.vector2 {
	height: 650px;
	position: absolute;
	right: 27%;
	top: -590px;
	z-index: 200;
		  animation: heenenweer 2s ease-in-out infinite alternate!important;
}




@keyframes vanlinks2 {
    0% {
       top: 0;
	
    }
    100% {
        	top: -610px;
	
    }
}

@keyframes vanlinks3 {
    0% {
      top: 200px;
	
    }
    100% {
        	 top: -330px;
	
    }
}

@keyframes vanlinks6 {
    0% {
      top: 200px;
	
    }
    100% {
        	 top: -460px;
	
    }
}

@keyframes buttonaa {
    0% {
      border-radius: 10px!important;
	
    }
    100% {
        	 border-radius: 100px!important
	
    }
}




@keyframes vanboven {
    0% {
       top: -500px;
	
    }
    100% {
        top: -170px;
	
    }
}
.service-heading {
  margin: 15px 0;
  text-transform: none;
}

.witteschuinelijn {
width: 100vw;
height: 80px;
background: white;
transform: rotate(-2deg);
display: block;
margin-top: -145px;
position: relative;
z-index: 00;
padding: 0!important;
}

.witteschuinelijn3 {
width: 100vw;
height: 80px;
background: #eaeff4!important;
transform: rotate(-2deg);
display: block;
margin-top: -145px;
position: relative;
z-index: 00;
padding: 0!important;
}
.blauweschuinelijn {
width: 100vw;
height: 70px;
background: #eaeff4;
transform: rotate(-2deg);
display: block;
margin-top: -190px;
position: relative;
z-index: 00;
padding: 0!important;
}

#overons {
	position: relative;
  background-size: cover;
margin-top: 0px;
background: white;
padding: 0px; 
padding-top: 120px;
padding-bottom: 120px;

}

#overons h3 {
	font-size: 24px;
	font-weight: 600;
	margin-top: 5px;
	margin-left: 0!important;
	padding-left: 0 !important;
	padding: 10px;
}

#overons h2 {
	font-size: 40px;
	font-weight: 400;
	margin-top: 60px;
	padding-bottom: 20px;
	color: #385769!important;
	
}

#overons p .btn-primary {
	padding: 15px !important;
	font-size: 16px;
	
}

#overons p {
	line-height: 34px;
	font-weight: 300;
	font-size: 22px;
	letter-spacing: 1.4px;
	margin-top: 60px;
}

#overons2 {
	position: relative;
background: white;
  background-size: cover;
margin-top: 0px;

padding: 0px; 
padding-top: 200px;
padding-bottom: 85px;

}

#overons2 h3 {
	font-size: 24px;
	font-weight: 600;
	margin-top: 5px;
	margin-left: 0!important;
	padding-left: 0 !important;
	padding: 10px;
}

#overons2 h1 {
	font-size: 40px;
	font-weight: 600;
}

#overons2 p .btn-primary {
	padding: 15px !important;
	font-size: 16px
}

#overons2 p {
	line-height: 34px;
	font-weight: 300;
	font-size: 20px;
	letter-spacing: 1.4px;
}

#overons2 img {
	max-width: 95%!important;
	margin: auto;
	border: 3px solid #fafafa;
}

.counters {
	margin-top: 50px;
	padding-top: 50px;
	border-top: 1px dotted rgba(0,0,0,.1);

}

.counters p {
	margin-top: 10px!important;
	font-size: 20px!important;
}

.count-box {
	display: block;
	background: rgb(198,203,209);
background: linear-gradient(90deg, rgba(198,203,209,1) 0%, rgba(234,239,244,1) 89%);
	border-radius: 100%;
	width: 130px;
	height: 130px;
	line-height: 130px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-weight: 600;
	font-size: 30px;
	color: white;
	position: relative;
	transition: all 0.8s;
	-webkit-transition: all 0.8s;
}

.count-box:hover {
		background: rgb(198,203,209);
background: linear-gradient(90deg, rgba(198,203,209,1) 0%, rgba(234,239,244,1) 19%);
}

.count-box i {
		  animation: opneer 2s ease-in-out infinite alternate!important;
		  color: #385769!important;
}

@keyframes opneer {
    0% {
       font-size: 30px;
	   
	
    }
    100% {
        font-size: 40px;
	
    }
}
@keyframes opneer2 {
    0% {
       font-size: 50px;
	   
	
    }
    100% {
        font-size: 70px;
	
    }
}

.counthover {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #e8ca82;
	border-radius: 100%;
	width: 100%;
	height: 100%;
	line-height: 130px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-weight: 600;
	font-size: 30px;
	color: white;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	opacity: 1;
}

.count-box:hover .counthover {
	width: 1%;
	height: 100%;
	opacity: 1;
}

.count-box span {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.count-box:hover span {
	opacity: 0;
}



.rondjebox:hover .rondje {

	
}

.rondjebox:hover .rondje i {
		transform: rotate(360deg);
			color: #fff;
			
	
}

.rondjebox:hover .rondje img {
		transform: rotate(360deg);
		filter: invert(68%) sepia(97%) saturate(338%) hue-rotate(131deg) brightness(80%) contrast(98%);
		
	
}

.rondje i {
	color: #2f586e;
	font-size: 60px;

		transition: all 0.5s;
	-webkit-transition: all 0.5s;
	margin: 20px;
}

.rondje img {
	margin: 5px;
	transform: rotate(0deg);
		transition: transform 0.5s;
	-webkit-transition: transform 0.5s;
}

.rondjebox p {
	font-size: 16px !important;
	letter-spacing: 1.2px;
	line-height: 20px !important;
	color: #3e3e3e !important;
	font-weight: 300;
	z-index: 1!important;
	position: relative;
	
}

.rondjebox {
	background: white;
	padding: 30px;
	min-height: 400px;
	display: block;
	position: relative;
	margin: 10px;
	margin-top: 10px;
	transition: all 0.5;
	-webkit-transition: all 0.5s;


}

.rondjebox2 {

	padding-bottom: 0px!important;
	min-height: 460px!important;



}

.leesmeer {
	position: absolute;
	bottom: 20px;
	right: 20px;
}

.rondjebox h3 {
	position: relative;
	z-index: 1;
	color: #2f586e!important;
	transition: all 0.5;
	-webkit-transition: all 0.5s;
}

.rondjebox:hover h3 {
	position: relative;
	z-index: 1;
	color: #fff!important;
	transition: all 0.5;
	-webkit-transition: all 0.5s;
}

.rondjebox:hover {
	margin-top: 0px;
	-webkit-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.09);
-moz-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.09);
box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.09);
}

.rondjeboxbg {
	position: absolute;
	top: 0;
	right: 0;
	width: 15%;
	height: 15%;
	background: #e8ca82;
		transition: all 0.5;
	-webkit-transition: all 0.5s;
	border-bottom-left-radius: 100px;
	z-index: 0!important;
}

.rondjebox:hover .rondjeboxbg {
	width: 100%;
	height: 100%;
	display: block;
	border-bottom-left-radius: 0px;
	z-index: -1;
	
}

.rechtsbg {
	  background: url(../img/rechts.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100vh;
}
.rightborder {
	border-right: 1px solid rgba(0,0,0,.1);
}

.leftborder {
	border-left: 1px solid rgba(0,0,0,.1);
}
#portfolio h2, #referenties h2, #contact h2 {
	font-size: 50px;
	font-weight: 400;
	margin-top: 20px;
	padding-bottom: 20px;
	line-height: 52px;
	color: #385769!important;
	
}

#referenties h2 i, #portfolio h2 i {
font-weight: 300!important;
margin-top: 20px;
		  animation: linksrechts 1.5s ease-in-out infinite alternate!important;
}

@keyframes linksrechts {
    0% {
       padding-left: 30px;
	   
	
    }
    100% {
        padding-left: 0px;
	
    }
}

#portfolio .portfolio-item {
  right: 0;
  margin: 0 0 15px;
  
  
}

#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;	-webkit-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.09);
-moz-box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.09);
box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.09);
}




#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 2%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  opacity: 1;
	background: rgb(216,171,78);
background: linear-gradient(138deg, rgba(216,171,78,.9) 21%, rgba(235,196,114,.95) 55%, rgba(192,149,62,.9) 85%);
}

#portfolio .portfolio-item:hover  .portfolio-link .portfolio-hover{
   width: 100%;
  height: 100%;
}

#portfolio .portfolio-item:hover  .portfolio-link .portfolio-hover .portfolio-hover-content{
   opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0;
    transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
  font-size: 50px;
   animation: opneer2 2s ease-in-out infinite alternate!important;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}

#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  background-color: #e8ca82;
}

#portfolio .portfolio-item .portfolio-caption a {
 font-weight: 500 !important;
 color: black !important;
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 
}

#portfolio .portfolio-item .portfolio-caption a:hover {

 color: #2ebfc9 !important;
 text-decoration: none !important;
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 
}

#portfolio .portfolio-item .portfolio-caption h4 {
  margin: 0;
  text-transform: none;
    font-weight: 400;
  font-size: 18px;
  letter-spacing: 1.2px;
}

#portfolio .portfolio-item .portfolio-caption p {
  font-size: 16px;
  font-style: italic;
  margin: 0;
  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#portfolio  {
	min-height: 50vh;
	position: relative;
	background: white;
  background-size: cover;
margin-top: 0px;
padding-top: 50px;
padding-bottom: 50px;
z-index: 400;
}

#portfolio .witteschuinelijn {
	margin-top: -100px!important;
}

.tussenruimte {
	margin-top: 50px;
}

.divider {
	position: absolute!important;
	top: -90px!important;
	left: 0;
	width: 100%;
	z-index: 00;
}

.divider2 {
	position: absolute!important;
	top: -90px!important;
	width: 100%;
	left: 0;
	z-index: 0;
	filter: brightness(0) invert(1);
}



#portfolio * {
  z-index: 2;
}


#referenties  {
	padding-bottom: 50px;
	min-height: 50vh;
	position: relative;
z-index: 50;
  background-size: cover;
margin-top: 0px;
padding-top: 120px;
}

.referentiecontainer {
	display: block;
	width: 75%;
	margin: auto;
	padding: 30px;
	min-height: 200px;
	background: white;
	position: relative;
	border-radius: 20px;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-bottom: 50px;
	
	
}




.wolkje {
	position: absolute;
	right: 0px;
	bottom: 0px;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	transform: rotate(3deg);
		background: #e8ca82;
	z-index:-1;
	animation: draai 4s ease-in-out infinite alternate!important;
	color: #385769!important;
}

@keyframes draai {
    0% {
       transform: rotate(3deg);
	   
	
    }
    100% {
        transform: rotate(-3deg);
	
    }
}

.referentiecontainer i {
	font-size: 26px;
	color: #335368;
}
.referentiecontainer p {
	font-size: 18px;
	line-height: 20px;
	color: rgba(0,0,0,.8)!important;
	letter-spacing: 1.2px;
}

.referentiecontainer h4 {
	font-size: 16px;
	color: #335368;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

#werk {
	background-image: url(../img/werkbg.jpg);
	  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
-webkit-box-shadow: 0px -6px 32px -11px rgba(0,0,0,0.52);
-moz-box-shadow: 0px -6px 32px -11px rgba(0,0,0,0.52);
box-shadow: 0px -6px 32px -11px rgba(0,0,0,0.52);
}
#werk h2 {
	
	color: white;	
}

#werk h5 i {
	
	color: #e3cb2a;	
}

#werk .card {
	
 padding: 5px;	
max-width: 90%;
margin: auto;
margin-top: 20px;
border-top: 2px solid #e3cb2a;
border-bottom: 5px solid #e3cb2a;
}


.projectpagina img (
max-width: 98%!important;
)

.projectpagina  {
	padding-bottom: 200px!important;
	margin-bottom: -100px!important;
	z-index: 0!important;
	background: red!important;
}



#specialisme{
	background-color: white;
	padding: 0;
	max-width: 100vw;
	overflow-x: hidden;
}


.specialismeblok{
	min-height: 50vh;
	display: block;
	padding: 40px;
	
	transition: all 0.5s;
-webkit-transition: all 0.5s;
position: relative;

}



.specialismeblok h2 {
	font-weight: 400;
	color: white;
	letter-spacing: 2px;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .1);
	font-size: 30px;
		transition: all 0.5s;
-webkit-transition: all 0.5s;
}

.specialismeblok p {
	font-weight: 400;
	color: white;
	letter-spacing: 1.2px;
	font-size: 14px;
}

.specialismeblok img {
max-width: 110px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}

.specialismeblok:hover img {

	max-width: 130px;
}

.specialismeblok:hover h2 {
		text-shadow: 2px 2px 5px rgba(250, 250, 250, .5);
			font-size: 32px;
}

.specialismeblok:hover {
	background-color: #ffb027;
}

.specialismeblok:hover .overlay22 {
background: rgb(62,72,81);
background: radial-gradient(circle, rgba(62,72,81,0.09877454399728647) 0%, rgba(33,37,41,0.1713235636051295) 51%);
}

.absolutebutton {
	position: absolute;
	top: -20px;
	z-index: 100;
	left: auto;
	right: 20%;
}
.oranje1 {
	
  background: url(../img/vloeren.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	display: block;
	position: relative;
	
}

.overlay22{
background: rgb(62,72,81);
background: radial-gradient(circle, rgba(62,72,81,0.09877454399728647) 0%, rgba(33,37,41,0.5713235636051295) 51%);
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
		padding: 50px;
		transition: all 0.5s;
-webkit-transition: all 0.5s;
}

@media (min-width: 992px) {
	.overlay22{

		padding: 100px;

}
}

.oranje2 {
  background: url(../img/raamdecoratie.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	display: block;
	position: relative;
}

.oranje3 {
  background: url(../img/traprenovatie.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	display: block;
	position: relative;
}

.team-member {
  margin-bottom: 50px;
  text-align: center;
}

.team-member img {
  width: 225px;
  height: 225px;
  border: 7px solid rgba(0, 0, 0, 0.1);
}

.team-member h4 {
  margin-top: 25px;
  margin-bottom: 0;
  text-transform: none;
}

.team-member p {
  margin-top: 0;
}

#offerte {


}

#offerte h2 {
	color: #ffffff;
}


#contact p {
	color: black;
	font-size: 20px;
	line-height: 26px;
	color: rgba(0,0,0,.6)!important;
	letter-spacing: 1.2px;
}

#contact .links {
	padding-left: 70px;
	padding-right: 70px;
	padding-top: 80px;
}

.comment {
		position: absolute;
		color: #e8ca82;
		font-size: 60px;
		animation: omhoogweg 4s ease-in-out infinite alternate!important;
		display: none;
}

@keyframes omhoogweg {
    0% {
       opacity: 1;
	   bottom: 100px;
	   right: 40%;
	   color: #e8ca82
		
	   
	
    }
    100% {
        opacity: 0;
		position: absolute;
		bottom: 220px;
		right: 30%;
	
    }
}
section#contact p i {
	color: #fd972d
}

section#contact {
background: rgb(250,250,250);
background: linear-gradient(0deg, rgba(255,255,255,1) 24%, rgba(255,255,255,1) 100%);
  background-repeat: no-repeat;
  background-position: center;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 100vh;
  margin-top: 0px;
  padding-top: 0px;
  position: relative;
  margin-bottom: -100px;
  padding-bottom:100px!important;
  z-index: 300;
}

.kaart {
	padding: 10px;
	background: white;
	min-height: 300px;
}

.fotocontainer {
	position: relative;
	display: block;
	height: 130vh!important;
	background: red;
	margin-bottom: -100px;
}

.fotot{
	background: url(../img/DSO.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}


section#contact .padding40 {
	padding-bottom: 0px!important;
}

section#contact .section-heading {
  color: #fff;
}

section#contact .form-group {
  margin-bottom: 25px;
}



section#contact .form-group input,
section#contact .form-group textarea {
  padding: 20px;
    border-bottom: 0px solid #e8ca82; 
  background: #eaeff4;
  border-left: 50px solid #e8ca82;
  border-right: 0px;
  border-top: 0px;
  margin-left: 00px;

  color: #ccc !important;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.form-group textarea {
	border-left: 0px!important;
}

.iconbox {
	position: absolute;
	top:16px;
	left: 30px;
	width:20px;
	line-height: 100%!important;
	color: white!important;
	font-size: 24px!important;
	height: 100%;
}

section#contact .form-group input.form-control {
  height: auto;
}

section#contact .form-group textarea.form-control {
  height: 248px;
}
section#contact .form-control:hover {
  border-left: 60px  solid #e8ca82;
  box-shadow: none;
}

section#contact .form-control:focus {
  border-color: black;
  box-shadow: none;
  color: black !important;
}

section#contact ::-webkit-input-placeholder {
  font-weight: 400;
  color: #ccc;

}

section#contact :-moz-placeholder {
  font-weight: 400;
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

section#contact ::-moz-placeholder {
  font-weight: 400;
  color: #fff;
  font-family: 'Montserrat', -apple-s	ystem, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

section#contact :-ms-input-placeholder {
  font-weight: 400;
  color: #fff;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
.btn-primaryaa .plane {
				position: absolute;
				font-size: 22px;
		animation: vliegen 12s ease-in-out infinite!important;
		 animation-delay: 2s;
}
.btnprimaryaa:hover .plane {
				
			 animation-play-state: running;  
}




@keyframes vliegen {
    0% {
       top: 20px;
	   left: 10px;
	   transform: rotate(0deg);
	
    }
	
	12% {
		top: -30px;
	   left: 60px;
	   transform:rotate(30deg);
		
	}
	
	24% {
		top: -80px;
	   left: 120px;
	   transform:rotate(40deg);
	}
	
	36% {
		top: -135px;
	   left: 180px;
	   transform:rotate(-120deg);
	}
	
	48% {
			top: 20px;
	   left: 10px;
	   transform:rotate(-175deg);
	}
	
	 58% {
        		  top: 20px;
	   left: 10px;
	   transform: rotate(0deg);
	
    }
    100% {
        		  top: 20px;
	   left: 10px;
	   transform: rotate(0deg);
	
    }
}

.footer {
  padding: 25px 0;
  text-align: center;
  background-color: #0d1f2d;
  position: relative;
  padding-bottom: 40px;
  z-index: 300;
  margin-top: 50px;
  }
  
  .footer p {
	  color: white;
  }

.footer span.copyright {
  font-size: 90%;
  color: white !important;
  line-height: 100%;
  margin-bottom: 10px;
  text-transform: none;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.footer h4 {
	color: #e8ca82!important;
	font-size: 24px;
	
}

.footer i {
	font-size: 20px;
	color: #e8ca82;
	padding: 10px;
}

.footer ul.quicklinks {
  font-size: 130%;
  line-height: 40px;
  letter-spacing: 2px;
  margin-bottom: 0;
  text-transform: none;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.footer a {
	color: white!important;
}

ul.social-buttons {
  margin-bottom: 0;
}

ul.social-buttons li a {
  font-size: 20px;
  line-height: 50px;
  display: block;
  width: 50px;
  height: 50px;
  transition: all 0.3s;
  color: white;
  border-radius: 100%;
  outline: none;
  background-color: #212529;
}

ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
  background-color: #2ebfc9;
}

@media only screen and (max-width: 900px) {
	
.fotocontainer {
display: none;
}	

.referentiecontainer {
	width: 95%;
}

#referenties h2, #contact h2, #portfolio h2 {
	line-height:36px !important;
	margin-top: 30px;
	font-size: 30px!important;
}

.divider, .divider2 {
	top: -30px!important
}

#contact {
	  padding-left: 0px !important;
	  padding-right: 0px !important;
}

.btn-primary {
	max-width: 90% !important;
}

header.masthead .intro-text {
  padding-top: 50px;
  padding-bottom: 50px;
}

#overons h2 {
	font-size: 30px;
	font-weight: 400;
	margin-top: 10px;
}
#overons {
	padding-top: 100px;
	margin-top: -100px!important;
	padding-bottom: 150px;
}

#overons p {
	margin-top: 10px;
}

.blauweschuinelijn {
	margin-top: -50px;
}

#portfolio{
	padding-top: 60px;
	margin-top: -50px!important;
	padding-bottom: 20px;
}

.diensten {
	padding-bottom: 100px;
}

#overons2 img {
	 display: block;
  max-width:95%;
  max-height:395px;
  width: auto;
  height: auto;
}
.intro-lead-in2 {
	padding-top: 150px;
}

#referenties {
	padding-top: 100px;
	padding-bottom: 100px;
	margin-bottom: -50px;
}
}