body {
margin: 0px;
background-color:black;
cursor:url("images/cursor.png"), auto;
}

a {
cursor:url("images/cursor2.png"), auto;
}

body {
margin: 0;
    height: 100%;
}

#overlay {
  position: fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background: black;
  text-align: center;
  z-index: 99;
}

#content {
      width: 70%;
    margin-left: 15%;
    position: relative;
}

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: black;
   z-index: 99; /* Higher than anything else in the document */

 }

/*

#wrapper {
margin:auto;
width:1000px;
height:613px;
background-image: url("/images/Gruma---achtergrond.png");
background-size:contain;
margin-top:0px;
position:relative;
z-index: -2;

}

*/

#wrapper {
  background-image: url("images/grumasupermarkt/Gruma---achtergrond.gif");
background-size:contain;
      width: 100%;
    height: 0;
    padding-bottom: 61.3%;
    position: relative;
    background-repeat:no-repeat;
}

.bord {
margin-left:6.5%;
top:61.9%;
z-index: +1;    
position:absolute;
background-image: url("images/grumasupermarkt/mededelingen-bord.png");
background-size:contain;
display:block;
height:40.45%;
width:15.4%;
background-repeat: no-repeat;
}

.bord:hover {
background-image: url("images/grumasupermarkt/mededelingen-bord.gif");
}



.schuifdeur {
margin-left:55%;
top:55.46%;
position:absolute;
background-image: url("images/grumasupermarkt/schuifdeur.png");
background-size:contain;
display:block;
height:22%;
width:18.6%;
background-repeat: no-repeat;
}

.schuifdeur:hover {
background-image: url("images/grumasupermarkt/schuifdeuropen.gif");
    
}

.brievenbus { 
position:absolute;
margin-left:18.4%;
top:68.515%;
background-image: url("images/grumasupermarkt/brievenbus.png");
background-size:contain;
display:block;
height:24.95%;
width:11.2%;
background-repeat: no-repeat;
}

.brievenbus:hover {
background-image: url("images/grumasupermarkt/brievenbus.gif");

}


.tentakel { 
position:absolute;
margin-left:47%;
top:75%;
background-image: url("images/grumasupermarkt/tentakel.gif");
background-size:contain;
display:block;
height:28.87%; 
width:26%;
background-repeat: no-repeat;
}
        

.kraai { 
position:absolute;
margin-left:12%;
top:-3.2%;
background-image: url("images/grumasupermarkt/kraai-gif2.gif");
background-size:contain;
display:block;
height:38.49%;
width:45%; 
background-repeat: no-repeat;
}
   
.drap { 
position:absolute;
margin-left:92.2%;
top:37.85%;
background-image: url("images/grumasupermarkt/drap-gif.gif");
background-size:contain;
display:block;
height:54.32%;
width:7.7%;
background-repeat: no-repeat;
}

.stofzuigerslang { 
position:absolute;
margin-left:0%;
top:32.62%;
background-image: url("images/grumasupermarkt/stofzuigerslang.gif");
background-size:contain;
display:block;
height:44.37%;
width:29.5%;
background-repeat: no-repeat;
}


.vliegjes-1 {
position:absolute;
margin-left:72%;
top:53.50%;
background-image: url("images/grumasupermarkt/vliegjes-1.gif");
background-size:contain;    
display: block;
height: 13.37%;
width: 9.2%;
background-repeat: no-repeat;
}



.insect-1 {
    position: absolute;
    margin-left:0%;
    top:91.00%;
    background-image: url("images/grumasupermarkt/vinsect-1.gif");
    background-size:contain;
    display: block;
    height: 9.44%;
    width: 9.2%;
    background-repeat: no-repeat;
}

.menu {
  width:15%;
  text-align:center;
  position:relative;
  margin-top:50px;
}

.menu a {
display:block;
text-align:center;
margin-bottom:25px;
}

.menu img {
  width:70%;
  filter:invert(100%);
  -webkit-filter:invert(100%);
}

.left {
  float:left;
}

.right {
  float:right;
}

.top {
position:absolute;
top:0;
}

.mid {
position:absolute;
top:35%;
}

.bottom {
position:absolute;
bottom:0;
}

#willie-txt {
  width:100%;
  margin-left:15%;
  margin-top: 50%;
}

#willie-txt img {
  width:140%;

}

.link-img {
  width:70%;
  margin-left:15%;
  height:30%;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.muziek-link {
  background-image:url(images/imagesmenu/willie-darktrousers-boterham.gif);
}

.films-link {
background-image:url(images/imagesmenu/willie-darktrousers-kever.gif);
}

.contact-link {
background-image:url(images/imagesmenu/willie-darktrousers-2kopsvogel.gif);
}

.optredens-link {
background-image:url(images/imagesmenu/willie-darktrousers-tvmetvoeten.gif);
}

.tekeningen-link {
background-image:url(images/imagesmenu/willie-darktrousers-aardbei.gif);
}

.kranten-link {
background-image:url(images/imagesmenu/willie-darktrousers-slak.gif);
}

.muziek-link:hover {
  background-image:url(images/imagesmenu/willie-darktrousers-boterham-hover.gif);
}

.films-link:hover {

background-image:url(images/imagesmenu/willie-darktrousers-kever-hover.gif);
}

.contact-link:hover {
background-image:url(images/imagesmenu/willie-darktrousers-2kopsvogel-hover.gif);
}

.optredens-link:hover {
background-image:url(images/imagesmenu/willie-darktrousers-tvmetvoeten-hover.gif);
}

.tekeningen-link:hover {
background-image:url(images/imagesmenu/willie-darktrousers-aardbei-hover.gif);
}

.kranten-link:hover {
background-image:url(images/imagesmenu/willie-darktrousers-slak-hover.gif);
}

.willietag {
  background-image:url(images/imagesmenu/Willie-Darktrousers-ondertitel.gif);
}

@media (max-width: 800px) {

  #content {
    display:none;
  }



  .left, .right {
    float: none;
  }

  .menu {
    width: 100%;
    height: auto !important;
  }


  .link-img {
        height: 150px;
    position: relative !important;
  }

}