/*----- style.css -----*/

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff7e6;
  opacity: 0.5;
  z-index: 9999;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff7e6;
  padding: 20px;
  font-family: arial, sans-serif;
  border-radius: 10px;
  text-align: center;
}

.popup h2 {
  margin-top: 0;
}

.popup p {
  margin-bottom: 0;
}

/*----- buton-----*/

button {
    cursor: inherit !important;
}
body {
    cursor: url('img2/cursor%201.png') 5 0,auto;
    background-color: #fff7e6;
}

/*----- hover -----*/

g {
  pointer-events: bounding-box;
  opacity: 0.8;
}
g:hover {
    opacity: 1;
}

/*----- hider -----*/

.hide {
  background-color: floralwhite;
    opacity:0.8;
  border-radius: 2px;
  text-align: justify;
  position: absolute;
  margin: 0 auto;
  padding: 10px 20px;
  border: 0px solid #000000;
    width: 350px;
    height: auto;
  font-size: 12px;
    font-family: sans-serif;
    font-style: normal;
}

.hide2 {
    opacity:1px;
  border-radius: 0px;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  padding: 10px 10px;
}

.hide3 {
    opacity:1;
  border-radius: 0px;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  padding: 10px 10px;
}

.hide4 {
  border-radius: 1px;
  text-align: center;
  position: absolute;
  margin: 0 auto;
  padding: 10px 10px;
}


/*----- info text -----*/

.info{
    width: 70%;
    height: auto;
    position: absolute;
    top: 5%;
    left: 15%;
    z-index: 3;
    }
.infoES{
    width: 70%;
    height: auto;
    position: absolute;
    top: 2%;
    left: 15%;
    z-index: 3;
    }
.overlay2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff7e6;
    opacity: 0.8;
    z-index: 2;
}

/*----- text -----*/


.MHWtekst{
    width: 50%;
    height: auto;
    position: absolute;
    top: 10%;
    left: 15%;
    background-repeat:no-repeat;
    }
.MHW2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 10%;
    left: 15%;
    background-repeat:no-repeat;
    }

.pecestekst{
    width: 50%;
    height: auto;
    position: absolute;
    top: 15%;
    left: 5%;
    background-repeat:no-repeat;
    z-index: 5;
    }
.pecestekst2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 15%;
    left: 5%;
    background-repeat:no-repeat;
    z-index: 5;
    }
.eucalyptustekst{
    width: 50%;
    height: auto;
    position: absolute;
    top: 75%;
    left: 8%;
    background-repeat:no-repeat;
    }
.eucalyptustekst2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 75%;
    left: 8%;
    background-repeat:no-repeat;
    }

.Incendiosforestalestekst{
    width: 50%;
    height: auto;
    position: absolute;
    top: 80%;
    left: 8%;
    background-repeat:no-repeat;
    }
.Incendiosforestalestekst2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 80%;
    left: 8%;
    background-repeat:no-repeat;
    }
.Invasoras{
    width: 50%;
    height: auto;
    position: absolute;
    top: 15%;
    left: 40%;
    background-repeat:no-repeat;
    }
.Invasoras2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 15%;
    left: 40%;
    background-repeat:no-repeat;
    }
.Rioguenas{
    width: 50%;
    height: auto;
    position: absolute;
    top: 150%;
    left: 3%;
    background-repeat:no-repeat;
    }
.Rioguenas2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 150%;
    left: 3%;
    background-repeat:no-repeat;
    }
.Lobo{
    width: 50%;
    height: auto;
    position: absolute;
    top: 200%;
    left: 50%;
    background-repeat:no-repeat;
    }
.Lobo2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 200%;
    left: 50%;
    background-repeat:no-repeat;
    }
.massification{
    width: 50%;
    height: auto;
    position: absolute;
    top: 220%;
    left: 10%;
    background-repeat:no-repeat;
    }
.massification2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 220%;
    left: 10%;
    background-repeat:no-repeat;
    }
.Lossofbio{
  width: 50%;
    height: auto;
    position: absolute;
    top: 230%;
    left: 30%;
    background-repeat:no-repeat;
    }
.Lossofbio2{
  width: 50%;
    height: auto;
    position: absolute;
    top: 230%;
    left: 30%;
    background-repeat:no-repeat;
    }
.decreasesnow{
  width: 50%;
    height: auto;
    position: absolute;
    top: 290%;
    left: 50%;
    background-repeat:no-repeat;
    }
.decreasesnow2{
  width: 50%;
    height: auto;
    position: absolute;
    top: 287%;
    left: 50%;
    background-repeat:no-repeat;
    }
.canoasella{
    width: 50%;
    height: auto;
    position: absolute;
    top: 100%;
    left: 40%;
    background-repeat:no-repeat;
    }
.canoasella2{
    width: 50%;
    height: auto;
    position: absolute;
    top: 100%;
    left: 40%;
    background-repeat:no-repeat;
    }

.hider {
    display: block;
    max-width: 100%;
    }


/*----- photos -----*/

.fucusmhw {
    width: 30%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 65%;
    }

.fire{
 width: 35%;
    height: auto;
    position: absolute;
    top: 80%;
    left: 60%;
    }

.Euca{
 width: 31.2%;
    height: auto;
    position: absolute;
    top: 75%;
    left: 59%;
    }
.Cortadei{
 width: 31.2%;
    height: auto;
    position: absolute;
    top: 15%;
    left: 28%;
    }
.Bergen{
 width: 45%;
    height: auto;
    position: absolute;
    top: 290%;
    left: 3%;
    }
.toeriste{
 width: 23.9%;
    height: auto;
    position: absolute;
    top: 220%;
    left: 57%;
    }
.zalm{
 width: 40%;
    height: auto;
    position: absolute;
    top: -16%;
    left: 53%;
    }


/*----- linker -----*/

#kaas { 
 position:fixed;
    width: 1.5%;
    top:2.6vw;
    left:3.3vw;
    z-index:2;
    cursor: url(img/mouse.png)
}

#hesp { 
 position:fixed;
    width: 2.5%;
    top:7vw;
    left:3vw;
    z-index:2;
    cursor: url(img/mouse.png)
}

#mayo { 
 position:fixed;
    width: 2.5%;
    top:11vw;
    left:3vw;
    z-index:2;
    cursor: url(img/mouse.png)
}

/*----- draggable -----*/

 .container {
position: absolute;
top: 20%;
left: 10%;
cursor: move;
z-index:2;
width: 50%;
height: auto;
}

#legende {
position: relative;
    }

#Kruis1 {
    }