html, body
{
  font-family:Nunito;
  font-size:16px;
  font-weight:normal;
  color:black;
  -webkit-text-size-adjust:100%;
  font-feature-settings:"liga" 0, "ss01" 1, "ss02" 1;
/*  letter-spacing:0.12em;*/
  letter-spacing:1.2px;
  line-height:1.6;
  overflow-x:hidden;
  overflow-h:auto;
}

body
{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* We willen display:block omdat de hover anders een te groot gebied heeft*/
/* Echter, na een display:none schakelen alle browsers transition uit*/
/* In plaats daarvan gebruiken we nu animation die niet uitgeschakeld wordt:*/
@-webkit-keyframes fadeIn
{
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes fadeIn
{
  from { opacity:0; }
  to { opacity:1; }
}
[data-tooltip], [data-tooltip2] { position:relative; }
[data-tooltip]:hover:after, [data-tooltip2]:hover:after { opacity:1; display:block; }
[data-tooltip]:after { content:attr(data-tooltip); bottom:-25px; }
[data-tooltip2]:after { content:attr(data-tooltip2); bottom:-47px; }
[data-tooltip]:after, [data-tooltip2]:after
{
  position:absolute;
  right:0px;
  left:0px;
  width:max-content;
  white-space:pre-wrap;
  text-align:center;
  font-size:13px;
  font-weight:normal;
  opacity:0;
  display:none;
  z-index:9999999;
  color:black;
  background-color:#fff686;
  padding:2px;
  border-radius:5px;
  animation:fadeIn 1s;
  -webkit-animation:fadeIn 1.2s;
  -moz-animation:fadeIn 1.2s;
  -o-animation:fadeIn 1.2s;
/*  transition:opacity 0.5s ease-in-out;
  -moz-transition:opacity 0.5s ease-in-out;
  -webkit-transition:opacity 0.5s ease-in-out;
  -o-transition:opacity 0.5s ease-in-out;*/
}


#mobile { display:none; }
table, tr, td { margin:0px; padding:0px; border-spacing:0px; }
img { display:inline-block; border:0px; text-align:left; }
a { text-decoration:none; color:black; }

.wrapper
{
  width:100%;
  flex-grow:1;
  background-color:#69c3da; /* For browsers that do not support gradients */
  background:repeating-conic-gradient(from 10deg at 35% 50%, #69c3da 0 15deg, #6cc8df 15deg 30deg);/*#6fcee6*/
  min-width:0;
}

.mainblok
{
  position:relative;
  margin-left:100px;
  margin-top:30px;
  margin-right:100px;
}

.mainblok h1 { color:white; font-size:60px; font-weight:bold; margin:0px; }
.mainblok h2 { color:#3a3a39; margin-top:0px; }
.mainh2 { font-size:60px; margin:0px; color:#3a3a39; }
#taxman { position:absolute; right:2vw; bottom:10%; height:80vh; }

.index
{
  position:relative;
  float:left;
  border-radius:35px;
  padding:1vw;
  background-color:#3a3a3a;
  box-shadow:3px 3px 5px #3a3a3a;
}

.index1
{
/*  background-image:url('/images/freeform1.png');
  background-repeat:no-repeat;
  background-size:5vw 20vh;
  background-position-y:18vh;
  background-position-x:20vw;*/
  width:20vw;
  height:30vh;
  margin-top:20px;
}

.index2
{
  margin-left:2vw;
  width:20vw;
  height:30vh;
  margin-top:20px;
  background-image:url('/images/freeform2.png');
  background-repeat:no-repeat;
  background-size:20vw auto;
  background-position-y:-8vh;
  background-position-x:12vw;
}

.index3
{
  clear:both;
  width:44vw;
  height:23vh;
  margin-top:2vw;
  margin-bottom:2vw;
  padding-bottom:0px;
  background-image:url('/images/freeform3.png');
  background-repeat:no-repeat;
  background-size:20vw auto;
  background-position-y:-8vh;
  background-position-x:-10vw;
}

#p-sunny { position:absolute; top:-2.2vh; left:-2.2vw; height:13vh; width:auto; }
#p-taxcut { position:absolute; top:-1.3vh; right:-1.6vw; height:11vh; width:auto; }
#p-bookkeep { position:absolute; bottom:3vh; left:1vw; height:20vh; width:auto; }
#maintitle { margin-top:-1.5vh; }
.p-title1 { text-align:right; width:100%; color:#fad303; font-size:1.2vw; font-weight:bold; }
.p-title2 { text-align:right; width:100%; color:#b7f0ff; font-size:1vw; }
.p-title3 { text-align:left; width:100%; color:#ff944a; font-size:1.2vw; font-weight:bold; }
.p-title4 { text-align:left; width:100%; color:#b7f0ff; font-size:1vw; }
.p-title5 { text-align:center; width:100%; color:#77f37e; font-size:1.2vw; font-weight:bold; }
.p-calc { position:relative; height:100%; width:33vw; text-align:center; margin-left:11vw; }
.p-body { color:white; margin-top:3vh; text-align:center; line-height:2.8vh; mix-blend-mode:difference; }
.p-body2 { color:white; margin-top:1vh; mix-blend-mode:difference; }
.p-button { position:absolute; bottom:4vh; left:0px; width:100%; text-align:center; }
.p-button1 input[type=button]:hover { background-color:#fad303; cursor:pointer; color:#3a3a3a; }
.p-button2 input[type=button]:hover { background-color:#ff944a; cursor:pointer; color:#3a3a3a; }
.p-button3 input[type=button]:hover { background-color:#77f37e; cursor:pointer; color:#3a3a3a; }

.p-button input[type=button]
{
  font-size:1vw;
  padding:1vh 1.5vw;
  border-radius:15px;
/*  color:white;
 background-color:#626262;*/
  color:black;
  background-color:#c9eef9;
  border:0px;
  box-shadow:3px 3px 5px #3a3a3a;
}

.producten
{
  margin-bottom:50px;
  display:grid;
  grid-template-columns:auto auto auto 1fr;
  gap:30px;
  min-width:0;
  min-height:0;
}

.producten div
{
  position:relative;
  vertical-align:top;
  display:inline-block;
  background-color:white;
  color:black;
  border-radius:20px 20px 0px 0px;
  padding:20px 20px;
  box-shadow:8px 8px #545050;
  text-align:center;
  margin-left:2%;
  hyphens:auto;
  -webkit-hyphens:auto;
  -moz-hyphens:auto;
  -ms-hyphens:auto;
  max-width:320px;
  min-width:250px;
}

.price { color:#1388a6; }
.producten h2 { display:block; margin:-15px; padding:0px; }
.producten div:first-child { margin-left:0% !important; }
.producten div img { width:40px; }
.producten span { font-weight:bold; font-size:42px; }
.producten span sup { font-size:20px; }
.towballs { margin-top:-60px; border-radius:0px 0px 20px 20px !important; }
.towballs span { display:block; font-size:16px !important; color:#1388a6; font-weight:bold; margin-bottom:10px; }

.producten input[type=submit]
{
  /*background:linear-gradient(45deg, gray, #3a3a3a);*/
  background:linear-gradient(45deg, #519f26, #8cbf6f);
  border-radius:10px;
  color:white;
  padding:13px 40px;
  box-shadow:4px 4px 10px #b2bfc8;
  border:0px solid #6bc8e0;
  font-size:16px;
  font-weight:bold;
  letter-spacing:1.5px;
  margin:10px auto;
}

.producten input[type=submit]:hover { background:linear-gradient(45deg, #e26f1f, #e39b69); cursor:pointer; }
.producten input[type=submit]:active { box-shadow:0px 0px 0px #b2bfc8; background:linear-gradient(45deg, #e39b69, #e26f1f); }
.producten ul { margin-left:0px; padding-left:0px; }

.producten li
{
  list-style:none;
  background-image:url( "/images/check.png" );
  background-size:15px;
  background-position:left 6px;
  background-repeat:no-repeat;
  text-align:left;
  padding-left:30px;
}

#bottomBanner a
{
  background-repeat:no-repeat !important;
  background-size:auto 10px !important;
  background-position:15px center !important;
}

.bottomBanner
{
  width:100%;
  color:white;
  padding:0px;
  margin:0px;
  background-color:#3a3a39;
}

.bottomBanner div { display:inline-block; width:33.3%; text-align:center; margin:0px; padding:0px; }
.bottomBanner div p { display:inline-block; text-align:left; }
.bottomBanner a { color:white; font-size:14px; }
.bottomBanner a:hover { color:#fb7619; }
#m-contact { background:url( '/images/menu/contact.png' ); padding-left:35px; }
#m-contact:hover { background:url( '/images/menu/contact3.png' ); color:#fb7619; }
#m-globe { background:url( '/images/menu/globe.png' ); padding-left:35px; }
#m-globe:hover { background:url( '/images/menu/globe3.png' ); color:#fb7619; }
#m-home { background:url( '/images/menu/home.png' ); padding-left:35px; }
#m-home:hover { background:url( '/images/menu/home3.png' ); color:#fb7619; }
#m-calc { background:url( '/images/menu/calc.png' ); padding-left:35px; }
#m-calc:hover { background:url( '/images/menu/calc3.png' ); color:#fb7619; }


/* LOGIN */
.login { display:flex; align-items:center; justify-content:center; height:70vh; }
.login form { padding:40px; border-radius:20px; background-color:#3a3a39; box-shadow:4px 4px 10px; }
.form-row { position:relative; display:flex; }
.loginerr { color:#fb7619; margin-top:-25px; margin-bottom:20px; }
.login input { font-family:Nunito; color:white; border:none; background-color:#3a3a39; font-size:18px; }
.login input:focus { outline-width:0; }
.login input + label { font-family:Nunito; }
.login input:focus + label { font-family:Nunito; }
.login .underline { position:absolute; background:white; bottom:0; height:1px; width:100%; }
.login input:focus ~ .underline:before, .login input:valid ~ .underline:before { transform:scale( 1 ); }
.login input:valid ~ label, .login input:focus ~ label { transform:translateY( -20px ); font-size:14px; color:#3498db; }
.login input[type=submit] { margin-top:35px; border:1px solid #3498db; color:#3498db; padding:5px 30px; }
.login span { color:white; margin-bottom:30px; font-size:24px; font-weight:bold; }

.login label
{
  color:white;
  position:absolute;
  pointer-events:none;
  bottom:10px;
  font-size:16px;
  transition:all 0.3s ease;
}

.login .underline:before
{
  position:absolute;
  content:"";
  height:2px;
  width:100%;
  background:#3498db;
  transform:scaleX( 0 );
  transform-origin:center;
  transition:transform 0.3s ease;
}



/* CALCULATOR */
#country-source, #country-target, #calculation, #stamgegevens
{
  border-radius:20px 20px 0px 0px;
  border:1px solid #97d8e8;
  margin:-1px;
  float:left;
}

.left-block { float:left; width:66%; height:600px; }
#country-source, #country-target { background-color:white; width:50%; height:200px; }
#calculation { background-color:white; width:100%; height:500px; }
#stamgegevens { background-color:#c6c6c6; width:33%; height:700px; text-align:center; }
.country-label { border-radius:20px 20px 0px 0px; background-color:#1288a6; padding:5px 0px; color:white; text-align:center; }
.calc-label { background-color:#d9d9d9; padding:5px 0px; color:black; font-weight:bold; text-align:center; }
.stam-label { border-radius:20px 20px 0px 0px; background-color:#707070; padding:5px 0px; color:white; font-weight:bold; text-align:center; }
#country-source img, #country-target img { height:20px; object-fit:contain; vertical-align:middle; }
/*#stam-tabs { position:relative; padding:40px 0px 0px 0px; margin:0px; width:100%; }*/
#stam-tabs { display:flex; flex-direction:column; padding-top:40px; }
.stam-tab:hover { background-color:#eef9ff; cursor:pointer; box-shadow:none; }

.stam-gezin { background-image:url('/images/balls/family-flat.png'); }
.stam-woning { background-image:url('/images/balls/home-flat.png'); }
.stam-auto { background-image:url('/images/balls/car-flat.png'); }
.stam-huizen { background-image:url('/images/balls/houses-flat.png'); }
.stam-beleggen { background-image:url('/images/balls/invest-flat.png'); }
.stam-bedrijf { background-image:url('/images/balls/shop-flat.png'); }
.stam-gezin-bw { background-image:url('/images/balls/family-flat-bw.png'); }
.stam-woning-bw { background-image:url('/images/balls/home-flat-bw.png'); }
.stam-auto-bw { background-image:url('/images/balls/car-flat-bw.png'); }
.stam-huizen-bw { background-image:url('/images/balls/houses-flat-bw.png'); }
.stam-beleggen-bw { background-image:url('/images/balls/invest-flat-bw.png'); }
.stam-bedrijf-bw { background-image:url('/images/balls/shop-flat-bw.png'); }

.stam-tab
{
  position:relative;
  display:inline-block;
  background-color:white;
  color:black;
  font-size:14px;
  background-size:30px 30px;
  background-repeat:no-repeat;
  background-position:5px 2px;
  line-height:30px;
  height:50px;
  margin:-23px 0px 0px -1px;
  padding:2px 10px 2px 40px;
  border-radius:20px 20px 0px 0px;
  border:1px solid gray;
  border-bottom:none !important;
  white-space:nowrap;
  overflow-x:hidden;
  text-overflow:ellipsis;
  width:33%;
  box-shadow:0px -20px 25px -8px gray inset;
  /*box-shadow: x-offset, y-offset, blur, spread, color*/
}

#stam-form
{
  position:relative;
  display:inline-block;

/*  position:absolute;
  top:182px;
  left:50%;
  transform:translate(-50%, -50%);
  margin-left:-1px;*/

  background-color:white;
  width:calc(66% + 71px);
  padding:15px;
  border:1px solid gray;
  border-top:none !important;
  text-align:left;
  z-index:9999;
  margin-left:-1px;
  margin-top:-22px;
}

.stam-tab.act-tab { box-shadow:none; }
.stam-tab.act-tab:hover { background-color:white; cursor:default; }
#stam-form span { display:block; font-weight:bold; color:#1288a6; font-size:16px; padding-bottom:10px; }



.stam
{
  display:inline-block;
  background-color:white;
  color:black;
  font-size:14px;
  background-size:30px 30px;
  background-repeat:no-repeat;
  line-height:30px;
  height:30px;
  border:1px solid #97d8e8;
  margin:2px 0px;
}

.stam-left { display:inline-block; text-align:right; }
.stam-right { display:inline-block; text-align:left; }

.stam-left div
{
  background-position:left;
  text-align:left;
  padding-left:35px;
  border-radius:15px 0px 0px 15px;
}

.stam-right div
{
  background-position:right;
  text-align:right;
  padding-right:35px;
  border-radius:0px 15px 15px 0px;
}

#placeholder { height:70px; width:624px; margin-bottom:20px; border-radius:10px; border:2px solid #97d8e8; }
#placeholder img { width:50px; margin:10px 5px; }
#country1items, #country2items { display:block; border:2px solid #97d8e8; height:100px; margin-left:-2px; margin-right:-2px; }
#country1items img, #country2items img { width:40px; height:40px; margin:5px 0px 0px 5px; }
.dragover { border:2px solid #fb7619 !important; }/*#84c22a !important; }*/
.country img { margin:10px; height:20px; object-fit:contain; vertical-align:middle; } /*flags*/
.country span { vertical-align:middle; }
.ball { float:left; }
.calculate { float:left; display:grid; grid-template-columns:auto auto; width:300px; margin:0px 5px 0px 5px; }
.calculate .bedrag { text-align:right; }

.country
{
  position:absolute;
  top:0px;
  left:0px;
  right:0px;
  padding-right:15px;
  color:white;
  text-align:center;
  background-color:#1388a6;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

#country1
{
  position:relative;
  display:inline-block;
  background-color:white;
  border-radius:20px;
  width:310px;
  height:500px;
  padding-top:40px;
  border:2px solid #97d8e8;
}

#country2
{
  position:relative;
  display:inline-block;
  background-color:white;
  border-radius:20px;
  width:310px;
  height:500px;
  padding-top:40px;
  border:2px solid #97d8e8;
}

/* TOP MENU DROPDOWN MENU */
.topBanner
{
  display:inline-block;
  -webkit-box-shadow:0 0 70px #dbf2f8;
  -moz-box-shadow:0 0 70px #dbf2f8;
  box-shadow:0 0 70px #dbf2f8;
  width:100%;
  font-size:0;
}

.topBanner a { text-decoration:none; color:#fff; display:block; font-size:16px; }
.topBanner ul { list-style:none; position:relative; text-align:left; }
.topBanner li { float:right; }
.topBanner ul:after { clear:both; }
.topBanner ul:before, ul:after { content:" "; display:table; }

.topBanner nav
{
  position:relative;
  background:#3a3a39;
  text-align:center;
  letter-spacing:1px;
  text-shadow:1px 1px 1px #0e0e0e;
}

ul.primary li a { display:block; padding:10px 30px; border-left:1px solid #505050; }
ul.primary li:last-child a { border-right:none; }
ul.primary li a:hover { color:#000; }
ul.sub { position:absolute; z-index:200; box-shadow:2px 2px 0 #bebebe; display:none; }
ul.subright { direction:rtl; }
ul.sub li { float:none; margin:0px; white-space:nowrap; }
ul.sub li a { border-bottom:1px dotted #ccc; border-left:none; color:#000; padding:15px 30px 15px 30px; margin-left:-40px; }
ul.sub li:last-child a { border-bottom:none; }
ul.sub li a:hover { color:#000; background-color:#efefef !important; }
ul.primary li:hover ul { display:block; background:#fff; }
ul.primary li:hover a { background:#fff; color:#666; text-shadow:none; }
ul.primary li:hover > a { color:#000; }

#m-home { background:url( '/images/menu/home.png' ); padding-left:32px; }
#m-calc { background:url( '/images/menu/calc.png' ); }
#m-globe { background:url( '/images/menu/globe.png' ); }
#m-login { background:url( '/images/menu/lock.png' ); }
.m-en { background:url( '/images/flags/en.png' ) !important; }
.m-nl { background:url( '/images/flags/nl.png' ) !important; }
.m-de { background:url( '/images/flags/de.png' ) !important; }
.m-fr { background:url( '/images/flags/fr.png' ) !important; }
.m-es { background:url( '/images/flags/es.png' ) !important; }
.actmenu { color:#cdcdcd !important; pointer-events:none; }

ul.primary li:hover { background-color:white; }
ul.primary li:hover > #m-home { background:url( '/images/menu/home2.png' ); }
ul.primary li:hover > #m-calc { background:url( '/images/menu/calc2.png' ); }
ul.primary li:hover > #m-globe { background:url( '/images/menu/globe2.png' ); }
ul.primary li:hover > #m-login { background:url( '/images/menu/lock2.png' ); }
ul.primary li:hover > .m-en { background:url( '/images/flags/en.png' ); }
ul.primary li:hover > .m-nl { background:url( '/images/flags/nl.png' ); }
ul.primary li:hover > .m-es { background:url( '/images/flags/es.png' ); }
ul.primary li:hover > .m-fr { background:url( '/images/flags/fr.png' ); }
ul.primary li:hover > .m-de { background:url( '/images/flags/de.png' ); }
ul.primary li:hover > .actmenu { color:gray; }

ul.primary a
{
  background-repeat:no-repeat !important;
  background-size:auto 10px !important;
  background-position:15px center !important;
}

/* SEARCH */

.searchWrapper { text-align:center; }
.searchResult { display:inline-block; height:100px; max-width:98%; overflow:auto; }
.searchTaxes { display:flex; align-items:center; justify-content:center; height:10vh; }
.form-col { margin-left:20px; text-align:center; }
.searchTaxes input[type=checkbox] { transform:scale( 1.5 ); }
.searchTaxes input[type=button] { padding:10px; margin-top:10px; }
.searchTaxes select { padding:10px; font-size:18px; border:0px; }
.ss { padding:2px !important; font-size:16px !important; }
.st { font-size:12px; }
.alLeft { text-align:left; }
#searchResult table { margin:0px auto; }
#searchResult table thead th { position:sticky; top:0; padding-left:10px; z-index:1; background-color:#3a3a39; color:white; font-size:11px; }
#searchResult table thead th:first-child { position:sticky; left:0; z-index:3; } 
#searchResult table tbody td:first-child { position:sticky; left:0; z-index:1; padding-left:10px; }
#searchResult span { font-size:10px; }
#searchResult table thead th:hover { background-color:gray; cursor:pointer; }

#searchInput
{
  box-sizing:border-box;
  background-image:url('/images/search_icon.png');
  background-position:14px 12px;
  background-repeat:no-repeat;
  font-size:16px;
  padding:12px 20px 10px 45px;
  margin-top:10px;
  border:none;
  border-bottom:1px solid #ddd;
}

#listInput
{
  box-sizing:border-box;
  font-size:16px;
  padding:12px 20px 10px 20px;
  margin-top:10px;
  border:none;
  border-bottom:1px solid #ddd;
  width:100px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display:none;
  position:absolute;
  background-color:#f6f6f6;
  border:1px solid #ddd;
  z-index:99999;
  max-height:90vh;
  overflow:scroll;
}

#searchInput .dropdown-content { min-width:230px; max-height:400px; }

/* Links inside the dropdown */
.dropdown-content a {
  color:black;
  padding:0px 16px;
  text-decoration:none;
  display:block;
}

#searchInput:focus { outline:3px solid #ddd; }
#listInput:focus { outline:3px solid #ddd; }
.dropdown { position:relative; display:inline-block; }
.dropdown-content a:hover { background-color:#f0f0f0; }
.show { display:block; }

.trash
{
  background:url('/images/trash.png');
  background-repeat:no-repeat;
  background-size:15px;
  background-position:5px 5px;
  padding:2px 10px 0px 30px;
  text-align:left;
}

.trash:hover
{
  background:url('/images/trash2.png');
  background-repeat:no-repeat;
  background-size:15px;
  background-position:5px 5px;
  cursor:pointer;
}



/*@media screen and (max-width:599px) and (orientation:landscape)
@media screen and (max-width:599px) and (orientation:portrait)
@media screen and (max-width:670px) and (min-device-width:850px), screen and (max-device-width:600px)*/

@media only screen and (max-width: 1550px)
{
  .mainblok
  {
    margin-left:50px;
    margin-right:50px;
margin-top:30px;
  }
  .mainblok h1 { font-size:55px; }
  .mainh2 { font-size:55px; }
}

@media only screen and (max-width: 1080px)
{
  .mainblok h1 { font-size:45px; }
  .mainh2 { font-size:45px; }
}

@media only screen and (max-width: 715px)
{
  .mainblok h1 { font-size:40px; }
  .mainh2 { font-size:40px; }
  #menu { display:none; }
  #mobile { display:block; }
  #mobile a
  {
    background-image:url( '/images/menu/menu.png' );
    background-size:30px !important;
/*    background-position:left 6px;*/
    background-repeat:no-repeat;
  }
  #mobile a:hover { background-image:url( '/images/menu/menu2.png' ); }
  .topBanner li { float:left; }
/*  ul.sub li a { padding:15px 30px 15px 30px; margin-left:0px !important; }*/
}

/*@media only screen and (max-width:600px)
{
  .topBanner { width:100%; margin-top:0px; }
  .topBanner li { float:none; }
  ul.primary li:hover a { background:none; color:#8b8b8b; text-shadow:1px 1px #000; }
  ul.primary li:hover ul { display:block; background:#272727; color:#fff; }
  ul.sub { display:block; position:static; box-shadow:none; width:100%; }
  ul.sub li a { background:#272727; border:none; color:#8b8b8b; }
  ul.sub li a:hover { color:#ccc; background:none; }
}*/