/* ------------------------------------------------------------ Start  Interactieve kaart Nederland ---------------------------------------------------------- */

.kaartContainer { position: relative;   background-image: url(../images/hoofdstuk-2/kaart-empty.png); background-size: cover;  background-position: top center; }

.kaartContainer .button { color: white; font-weight: bold; font-size: 20px; background-color: #e7ce2b; display: block; padding: 5px 16px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; }
.kaartContainer .content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 10%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
.kaartContainer .cross { font-weight: bold; }


.kaartContainer .button:hover {  background: white; }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  from { box-shadow: 0 0 0 0px rgba(231, 206, 43); }
  to { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
}


#thuiskompas { position: absolute; left: 68%; top: 18%; padding: 5%; }
#huren-noord-veluwe { position: absolute; left: 60%; top: 30%; padding: 4%; }
#woonburo-almelo { position: absolute; left: 73%; top: 38%; padding: 2.5%; }
#snvk { position: absolute; left: 33%; top: 32%; padding: 3.3%; }
#gem-eemnes { position: absolute; left: 45%; top: 41%; padding: 2.3%; }
#gem-nijkerk { position: absolute; left: 50%; top: 41%; padding: 2.3%; }
#gem-soest { position: absolute; left: 45%; top: 44.2%; padding: 2.3%; }
#stedendriehoek { position: absolute; left: 59%; top: 41%; padding: 4.8%; }
#viverion { position: absolute; left: 70%; top: 49.5%; padding: 2.3%; }
#gem-amersfoort { position: absolute; left: 47%; top: 46.5%; padding: 2.3%; }
#entree { position: absolute; left: 52%; top: 51%; padding: 5.6%; }
#woongaard { position: absolute; left: 45.2%; top: 59%; padding: 3.5%; }
#woninginzicht { position: absolute; left: 40%; top: 67%; padding: 3.5%; }
#wooniezie { position: absolute; left: 50%; top: 67.5%; padding: 5%; }


.kaartContainer .button span{
  position: absolute;
  width: auto;
  font-size: 65%;
  color: #432d5c;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap ;
  z-index: 99;
}

#huren-noord-veluwe span {
  margin-top: -1.1vh;
  margin-left: -0.6vh;
}

#thuiskompas span {
  margin-top: -1.1vh;
  margin-left: -0.6vh;
}

#woonburo-almelo span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}

#snvk span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}

#gem-eemnes span {
  margin-top: -1.2vh;
}

#gem-nijkerk span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}


#gem-soest span {
  margin-top: -1.2vh;
/*  margin-left: -8vh;  */
}

#stedendriehoek span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}

#viverion span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}

#gem-amersfoort span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}

#entree span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}

#woongaard span {
  margin-top: -1.2vh;
 /* margin-left: -8.5vh; */
}

#woninginzicht span {
  margin-top: -1.2vh;
  /*margin-left: -10vh;*/
}

#wooniezie span {
  margin-top: -1.2vh;
  margin-left: -0.6vh;
}


/* Small */
@media (max-width: 575px) {
 .kaartContainer  { margin: 20px 20px 20px -25px; }
 .kaartContainer .button span{ font-size: 1.5vh;}
 }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { .kaartContainer  {margin-left: 0px;}  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { .kaartContainer  {margin-left: -20px; margin-top: 10px;} }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { .kaartContainer  {margin-left: -60px; margin-top: 30px; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .kaartContainer  {margin-left: 0px; margin-top: -20px;} }


@media (min-width: 1280px) { .kaartContainer  {margin-left: 0px; margin-top: -25px;} .kaartContainer .button span{  font-size: 68%; } }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1440px) { .kaartContainer  {margin-left: 0px; margin-top: -25px;} .kaartContainer .button span{  font-size: 80%; } }

/* ------------------------------------------------------------ Eind Interactieve kaart Nederland ---------------------------------------------------------- */