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;
}

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

#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:5%;
  bottom:5%;
  width:50vw;
  margin-bottom:50px;
}

.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
{
  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; }


/* 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; }
.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.sub li { float:none; margin:0px; }
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-contact { background:url( '/images/menu/contact.png' ); padding-left:35px; }
#m-login { background:url( '/images/menu/lock.png' ); }

ul.primary li:hover > #m-home { background:url( '/images/menu/home2.png' ); background-color:white; }
ul.primary li:hover > #m-calc { background:url( '/images/menu/calc2.png' ); background-color:white; }
ul.primary li:hover > #m-globe { background:url( '/images/menu/globe2.png' ); background-color:white; }
ul.primary li:hover > #m-contact { background:url( '/images/menu/contact2.png' ); background-color:white; }
ul.primary li:hover > #m-login { background:url( '/images/menu/lock2.png' ); background-color:white; }

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

/*@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; }
}*/