body {
  margin: 0;
  background: #f0f0f0;
display: block;
}

body {
background: #F0F0F0;
  font-family: Inter;

}
body.stop-transitions * {
  transition: none !important;
}

h1 {
font-size: 1.8em;
}
nav {
  display: flex;
  align-items: center;
justify-content; space-between;
  gap: 10px;
  width: auto;
  height: 100px;
  padding: 0px 20px;
background-color: #247158;

z-index: 10;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0px;
	-webkit-transition: all 0.5s; 
	-moz-transition: all 0.5s; 
	-ms-transition: all 0.5s; 
	-o-transition: all 0.5s; 
	transition: all 0.5s; 
}


nav.js-scrolling {
 box-shadow: 0 4px 4px -1px rgba(90, 76, 96, 0.15);
  background: #186049;
transition: all 0.5s; 

}

body.open nav.js-scrolling {
 box-shadow: none;
  background: none;
transition: all 0.5s; 

}
.navcontainer{

display:flex;
align-items: center;
width: 100%;
max-width:1000px;
margin-right:auto;
margin-left:auto;
}
.burger {
visibility: hidden;

}


.navbar-brand-screen img{
position: relative; 
height: 60px;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
visibility: hidden;
}

.navbar-brand img{
position: relative; 
height: 60px;
z-index: 99;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
}


.navitems {
display:flex;
align-items: center;
padding-left:50px;

}
.navmenu > a {
	text-decoration: none;
	position: relative;
	color: white;
	padding: 21px 15px;
	margin: 10px;
	padding-top: 10px;
	z-index:99;
}


.dropdown .dropbtn {
  font-size: 16px;  
position: relative;
  border: none;
  outline: none;
  color: white;
  padding: 40px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 10px;
cursor:pointer;
Height: auto;
z-index:22;

}


.dropbtn > i {
position: relative;
transition: 0.3s;


}
.dropdown:hover .dropbtn {
color: #DCDCDC;
}

.dropdown:hover .dropbtn > i {
Transform: rotate(180deg);
transition: 0.3s;

}

.dropdown-content {
  visibility: hidden;
  position: absolute;
background-color: transparent;
width: auto;
left:0;
right:0;
display:flex;
  z-index: 1;
opacity: 1;
z-index:20;
top:0px;
transform: translate(0%, -100%);
transition: 0.5s;

}

.dropdown-left {
width: 40%;
background-color:#186049;
text-align:center;
padding-top:100px;
}
.fa-calculator {
padding-top: 30px;
padding-bottom:30px;
left:100px;

}
.fa-lightbulb {
padding-top: 30px;
padding-bottom:30px;

}

.dropdown-right {
width: 60%;
background-color:#186049;
padding-top:100px;
}

.dropdown-content a {
  float: none;
  color: #F0F0F0;
  padding: 30px 16px;
  text-decoration: none;
font-size: 20px;
  display: block;
  text-align: left;
transition: 1s;
}

.dropdown-content a:hover {
color: #DCDCDC;
padding-left:40px;

}
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
Transform:none;
transition: 0.5s;
}




.navmenu > a:hover {
	color: #DCDCDC;
}


.hr {
visibility: hidden;
border: 1px solid #0E1D31;
  border-radius: 0px;

}


.menusocial {
position: absolute;
right: 0px;
padding-right: 300px;
z-index:23;
}

.fa-brands {
  padding: 0px;
font-size: 20px;
  width: 0px;
  text-align: center;
  text-decoration: none;
  margin: 0px 20px;
  border-radius: 0%;
background: transparent;
transition-duration: 0.5s;

}

.fa-brands:hover {

	color: #39bda7;

}

.fa-brands {

  color: white;
}

.menusocialfooter {
margin-left:-20px;
margin-top: 24px;
}

.header {
position: relative;
  padding: 100px 100px 50px 100px;
  text-align: center;
display:flex;
color: #fff;
z-index: 1;
height: 200px;
margin-top: -100px;
background-color: #247158;
background-repeat: no-repeat;
background-position: 0% 80%; 
overflow: hidden;
background-attachment: fixed;
border-radius: 0px 0px 10px 10px;
}


.vector {

width:200px;
height:200px;
border-radius: 50% 50% 0% 50%;
position:absolute;
border-style:solid;
border-width:25px;
border-color:#F0F0F0;
bottom:0px;

}
.vector2 {
width:200px;
height:200px;

border-radius: 50% 50% 50% 0%;
position:absolute;
border-style:solid;
border-width:25px;
border-color:#F0F0F0;
top:0px;
right:100px;
}

.headimgcont {
width:1000px;
position:absolute;
}

.headimgcont img {
width:400px;
filter: invert(27%) sepia(42%) saturate(734%) hue-rotate(110deg) brightness(95%) contrast(87%);
}

.bulb-container1 {
padding: 0px 20px 0px 20px;
}

.bulb1 {
position: relative;
height: 20px;
border-radius: 10px;
background-color: #247158;
max-width: 1000px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}

.bulb-container2 {
padding: 0px 70px 0px 70px;
}
.bulb2 {
position: relative;
height: 20px;
border-radius: 10px;
background-color: #247158;
max-width: 900px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}
.bulb-container3 {
padding: 0px 120px 0px 120px;
}
.bulb3 {
position: relative;
height: 20px;
border-radius: 10px;
background-color: #247158;
max-width: 800px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}
.header::befor {
content: "";
top:0;
left:0;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
background-image: url("Stacked Wave.svg");
transform: rotate(180deg);
}


body.open .header h1 {
transition: 0.5s;

}


body.open .header p {
transition: 0.5s;
}

.formcontainer {
  margin: 50px 0px 50px;
padding: 0px;
  width: 100%;

border-radius: 100%;
  text-align: center;
z-index:4;
transition: 0.5s;
}

.formcontainer h1 {
color: #F0F0F0;
padding: 0px;
margin: 10px;
}

}
form{
padding: 0px;

}
 .input-symbol-euro {
     position: relative;
 }
 .input-symbol-euro input {
     padding-left:18px;
 }
 .input-symbol-euro:before {
     position: absolute;
     top: 0;
     content:"\20AC";
     color: black;
     left: 5px;
 }

 .input-symbol-percentage {
     position: relative;
 }
 .input-symbol-percentage input {
     padding-left:18px;
 }
 .input-symbol-percentage:before {
     position: absolute;
     top: 0;
     content:"\0025";
     color: black;
     left: 5px;
 }

input[type="number"]{
background: #F0f0f0;
color: black;
border: 1px solid;
border-color:#F0F0F0;
border-radius: 5px;
font-size: 15px;
padding: 10px 20px;
margin: 15px 0px;
box-shadow: 0px;
outline:none;
}

input[type="number"]:focus {
color: black;
border: 1px solid;
box-shadow: 0px;
}



input[type="submit"]{
background: #312471;
color: white;
border-radius: 5px;
border: 1px solid #312471;
font-size: 19px;
cursor:pointer;
padding: 8px 10px;
transition: all .25s ease;
}

input[type="submit"]:hover{
background: #443AC5;

}

.column-group {
	display: flex;
	padding: 20px 20px 0px 20px;
	column-gap: 20px;
	margin-right:auto;
	margin-left:auto;
}
.column-group-content {
	padding: 20px 20px 0px 20px;
	column-gap: 20px;

	max-width:40%;
}

.column-group-hypotheken {
	padding: 20px 20px 0px 20px;
	column-gap: 20px;

	max-width:100%;
}
.column-group-uitleg {
	padding: 10px 30px 30px 30px;
	column-gap: 20px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:50px;
	max-width:100%;
	color: #0E1D31;
border-radius: 20px 20px 20px 0px;
background: #F5F5F5;
}

.column-group-uitleg2 {
	padding: 10px 30px 30px 30px;
	column-gap: 20px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:50px;
	max-width:50%;
	color: #0E1D31;
border-radius: 20px 20px 20px 0px;
background: #F5F5F5;
}
.column-group-1 {
	display: flex;
	padding: 20px 20px 20px 20px;
	max-width: 1000px;
	column-gap: 20px;
	margin-right:auto;
	margin-left:auto;
	background-color: #F0F0F0;
}

.column1 {
  	width: 33.33%;
	height: auto;
	margin-top:10px;
  	padding: 30px;
	margin-bottom:20px;
background: #F5F5F5;
color: #0E1D31;
border-radius: 20px 20px 20px 0px;
align-self: stretch;
column-gap: 20px;
text-align:center;
transition:0.5s;

}
.columntool {
	height: auto;
	margin-top:10px;
  	padding: 30px;
	margin-bottom:20px;
background: #F5F5F5;
color: #0E1D31;
border-radius: 20px 20px 20px 0px;
align-self: stretch;
column-gap: 20px;
text-align:center;
transition:0.5s;

}


.column1:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.1); 
}

.column1 h1 {
  font-size:20px;
}

.column-group-midden {
	display: flex;
	padding: 20px 20px 0px 20px;
	background-color: #E4D5C7;
	height:400px;
	column-gap: 20px;
	margin-right:20px;
	margin-left:20px;
border-radius: 20px 20px 20px 0px;
}
.column-group-midden img {
max-width: 700px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
.column-group-tool {
width:60%;
}
.column-group-3 {
	display: flex;
	padding: 20px 20px 20px 20px;
	max-width: 1000px;
	column-gap: 20px;
	margin-right:auto;
	margin-left:auto;
	background-color: #F0F0F0;
}

.card{
	display:flex;
	align-items:center;
	text-align:center;
	color: #212427;
	margin-bottom: 50px;
	margin-right:auto;
	margin-left:auto;
	margin-top: 50px;
	background: #F0f0f0;
	overflow:hidden;
	border-radius: 5px;
}

.Berekentekst{
	align-items:center;
	text-align:center;
	color: #212427;
	margin-bottom: 50px;
	margin-right:auto;
	margin-left:auto;
	margin-top: 50px;
	background: #F0f0f0;
	overflow:hidden;
	border-radius: 5px;
}



.card:hover > .imgcont2 img {
	filter:  brightness(100%);
	transform: scale(1.1);
}
.card .imgcont{
max-width: 100px;
width: 100%;
height:100%;
overflow:hidden;
	border-radius: 5px;
	margin-right: 40px;

}

.card .imgcont2{
max-width: 350px;
width: 100%;
height:100%;
overflow:hidden;
	border-radius: 5px;
	margin-left: 40px;

}
.card img{

	max-width: 100px;
	width: 100vh;
	border-radius: 5px;	
	color: black;
	object-fit: cover;
	filter: invert(56%) sepia(46%) saturate(1387%) hue-rotate(318deg) brightness(99%) contrast(110%);
	transition: all .5s ease;
}

.inter {
position: relative;
  padding: 100px;
  text-align: center;
color: #fff;
z-index: 1;
height: 100px;
background-size: cover;
margin-top: 40px;
background-image: url("Icon Grid.svg");
background-repeat: no-repeat;
overflow: hidden;
}
.column {
  	width: 50%;
	height: auto;
	margin-top:10px;
  	padding: 30px;
	margin-bottom:20px;
background: #F5F5F5;
color: #212427;
border-radius: 20px 20px 20px 0px;
align-self: stretch;
column-gap: 20px;
text-align:center;
transition:0.5s;

}
.column h1 {
  font-size:20px;
}

.column:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.1); 
}

.column img {
border-radius: 5px;
max-width: 100%;
}
.disclaimer {
	height: auto;
	margin-top:10px;
	margin-bottom: 20px;
	max-width:1000px;
  	padding: 30px;
background: #95877a;
margin-right:auto;
margin-left:auto;
color: #F0F0F0;
border-radius: 20px 20px 20px 0px;
align-self: stretch;
column-gap: 20px;

}
.row {
padding-left: 0px;
padding-right: 0px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.rowberekenen {
padding-left: 0px;
padding-right: 0px;
display:flex;
margin-right:auto;
Margin-left:auto;
Max-width: 1000px;
padding-top:100px;
padding-left:20px;
padding-right:20px;
}

.footer {
  background: #186049;
  padding: 20px 20px;
  text-align: left;
color: #F9F9F9;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
z-index:2;
margin-top: 10px;

}
.footercontainer{
display:grid;
grid-template-columns: repeat(3,minmax(0,1fr));
grid-column-gap: 20px;
max-width:1000px;
margin-left:auto;
margin-right: auto;

}
.leftfooter{
padding-left: 10px;
}
.leftfooter img{
padding-top:10px;
position: relative; 

}


.adres{
padding-left: 10px;
}

.adres > a {
	text-decoration: none;
	color: #F9F9F9;
	display:flex;
}

.sitemap{
padding-left: 10px;
}

.sitemap > a {
	text-decoration: none;
	color: #F9F9F9;
	display:flex;
}

@media only screen and (max-width: 800px) {
  .menusocial {
    display: none;
position:relative;


}
.dropdown-left {
display:none;
}
.dropdown-right {
width:100%;
padding-top:0px;
background-color:#FFF;
}
.header{

  padding: 100px 20px 20px 20px;

}
.column-group {
  	flex-direction: column;
	padding: 0px 20px;


}

.column-group-3 {
  	flex-direction: column;
	padding: 0px 20px;


}
.column-group-content {
	max-width: 100%;

}
.column-group-tool {
	width: 100%;

}


.rowberekenen {
  	flex-direction: column;
	padding: 0px 20px;


}

.column-group-1 {
  	flex-direction: column;
	padding: 0px 20px;


}

.column {
	width: auto;
transition: 0.5s;

}

.column img {
border-radius: 5px;
max-width: 50%;
}

.column1 {
	width: auto;
transition: 0.5s;

}


.disclaimer {
	width: auto;
transition: 0.5s;

}
.card{
	flex-direction:column;
	text-align:center;
padding:10px;
}
.card .imgcont{

	margin: 0px 0 30px 0;
	width: 100%;			
	max-height: 262px;

	
}
.card .imgcont2{

	margin: 0px 0 30px 0;
	width: 100%;			
	max-height: 262px;

	
}
  }

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


nav {

   padding: 0px 0px;
display: block;
top:0px;
}

.formcontainer {
margin:0px;
}

.navcontainer {

   padding: 0px 0px;
display: block;
top:0px;
transform-origin: 0% 0%;
transform: translate(-101%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}
body.open .navcontainer{
transform:none;
}
.footer {
  padding: 20px 20px;


}


.navitems {
flex-direction: column;  
width: 80%;
height: 100vh;
position: relative;
left: 0px;
z-index: 9;
background: #fff;
padding-left:20px;


  }

body.open .navitems {
display: flex;  




  }

.dropdown .dropbtn{

left: 0px;
width: auto;
font-size: 30px;
padding: 0px;
color: #0E1D31;
cursor: default;
margin:0px;

}

.dropdown:hover .dropbtn {
color: #0E1D31;
}


.dropbtn > i {
visibility: hidden;
transition: 0s;


}

body.open .dropbtn > i {

transition: 0.3s;
color: #0E1D31;

}


.navmenu{
display:block;
flex-direction: column;

width: 100%;
height: auto;
margin-top: 80px;

}


.dropdown {
display: block;
color: #0E1D31;
width: 100%;



  }
 .navbar-brand-screen img {
    position: fixed; 
top: 10px;
left: 50%;
transform: translateX(-50%);
visibility:visible;

  }
body.open .navbar-brand img {

filter: invert(56%) sepia(46%) saturate(1387%) hue-rotate(318deg) brightness(99%) contrast(110%);

  }
body.open nav{
display: block;


}

body.open .dropdown-content {

  position: relative;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
background-color: rgba(9,71,121,0);
font-size: 20px;
  z-index: 1;
opacity: 1;
top:0px;
display:block;
border-radius: 10px;
border: 0px solid #d1d1d1;
visibility: visible;
Transition:0s;
transform:none;
min-height:0px;

}

.dropdown-content {
  position: relative;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
background-color: rgba(9,71,121,0);
font-size: 20px;
  z-index: 1;
opacity: 1;
top:0px;
display:block;
border-radius: 10px;
border: 0px solid #d1d1d1;
visibility: visible;
Transition:0s;
transform:none;
}

body.open .dropdown-content a {

color: #0E1D31;

}



body.open .dropdown-content a:hover {
color: #DCDCDC;
}

.dropdown-content a {
color: #0E1D31;
padding: 12px 0px;
}

.navmenu > a{
left: 0px;
padding: 0px;
width: 100px;
font-size: 30px;
display:block;
color: #0E1D31;
margin:0px;
}



.hr {
position: absolute;
bottom: 70px;
width: 80%;
visibility: visible;
color: #0E1D31;
margin-left: 0px;
}

.menusocial{
display:flex;
position: absolute;
width: 100%;
left: 0px;
z-index: 11;
visibility: visible;
padding-top:20px;
padding-right: 0px;
bottom:20px;
padding-left:15px;


}

.fa-brands{
font-size: 30px;
  margin-right: 30px;
color: #0E1D31;

}

body.open .formcontainer {
filter: blur(5px);
}
body.open .column {
filter: blur(5px);

}

body.open .disclaimer {
filter: blur(5px);

}

body.open .header{
filter: blur(3px);

}


body.open .header p {
filter: blur(5px);

}

body.open .footer {
filter: blur(5px);

}

button {
border:0;
padding:0;
background: transparent;
cursor:pointer;
}

.burger{
visibility: visible;
display: grid;
position: fixed;
place-items:center;
cursor:pointer;
left: 20px;
top: 30px;
z-index: 30;
background-image:url("IMG/menu.svg");
width: 30px;
height: 30px;
background-repeat:no-repeat;
background-position: center;


}

body.open .burger{

background-image:url("IMG/close.svg");


}


}

@media only screen and (max-width: 800px) { 
 .navbar-brand img {
    position: absolute; 
top: 10px;
left: 50%;
transform: translateX(-50%);
transition: 0.5s;

  }

.footercontainer{
grid-template-columns: repeat(1,minmax(0,1fr));


}

.leftfooter img{
height: 120px;

}

}


.btn {
 display: inline-block;
 padding: 12px 24px;
 border: 1px solid #186049;
 border-radius: 4px;
 transition: all 0.2s ease-in;
 position: relative;
 overflow: hidden;
 font-size: 19px;
 color: #186049;
bottom:0;
 z-index: 1;
text-decoration: none;
}

.btn:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: #186049;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.btn:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #186049;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.btn:hover {
 color: #ffffff;
 border: 1px solid #186049;
}

.btn:hover:before {
 top: -35%;
 background-color: #186049;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.btn:hover:after {
 top: -45%;
 background-color: #186049;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
margin-right:auto;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider {
  border-radius: 34px;
}

.slider:before {
  border-radius: 50%;
}

form label {
display:block;
}
form button {
display:block;
margin-right:auto;
margin-left:auto;
margin-top:10px;
cursor:pointer;
}

form button {
 display: block;
 padding: 12px 24px;
 border: 1px solid #186049;
 border-radius: 4px;
 transition: all 0.2s ease-in;
 position: relative;
 overflow: hidden;
 font-size: 19px;
 color: #186049;
bottom:0;
 z-index: 1;
text-decoration: none;
}

form button:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: #186049;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

form button:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #186049;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

form button:hover {
 color: #ffffff;
 border: 1px solid #186049;
}

form button:hover:before {
 top: -35%;
 background-color: #186049;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

form button:hover:after {
 top: -45%;
 background-color: #186049;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.partner {
text-align:center;
display:flex;
justify-content:space-between;
padding-bottom:20px;
}

.partnertext{
padding-right:20px;
}

#result{
display:none;
padding-top: 20px;
}