body {
 font-family: sans-serif;
 color: black; 
 font-size: 12px;
 padding: 20px;
 margin: 20px;
 text-align: left;
 /* margin-left: auto;
  margin-right: auto; */
}

h3 {
     font-family: sans-serif;
     color: #0B0B61; 
     font-size: 12px;
     padding-top: 10.5px;
   padding-left: 10.5px;
   padding-right: 10.5px;
   padding-bottom: 1.5px;
     /*margin: 20px; */
     text-align: left;
}
h4 {
     font-family: sans-serif;
     color: #0B0B61; 
     font-size: 10px;
     padding-top: 1.5px;
   padding-left: 10.5px;
   padding-right: 10.5px;
   padding-bottom: 10.5px;
     /*margin: 20px; */
     text-align: left;
}

    /* min-height: 10em; */
    /* display: table-cell; */
    /* vertical-align: middle; */

iframe.stad{
  width: 900px;
  height: 900px;  
  z-index: 1; 
  opacity: 1;
    filter: alpha(opacity=100); 
  overflow: hidden;
  border: 0px solid black;
}

img.stadA{
  position: absolute;
  top: 0px;
  left: 0px;
  /*width: 900px;
  height: 900px;  */
  z-index: 1; 
  opacity: 1;
    filter: alpha(opacity=100); 
  border: 0px solid green;
}
img.stadB{
  position: absolute;
  top: 0px;
  left: 0px;
  /*width: 900px;
  height: 900px;  */
  z-index: 2; 
  opacity: 1;
    filter: alpha(opacity=100); 
  border: 0px solid red;
}
img.stadC{
  position: absolute;
  top: 0px;
  left: 0px;
  /*width: 900px;
  height: 900px;  */
  z-index: 3; 
  opacity: 0.05;
    filter: alpha(opacity=5); 
  border: 0px solid blue;
}

div.sluier{
  position: absolute;
  top: 0px;
  left: 0px;
  /*width: 900px;
  height: 900px;  */
  z-index: 10; 
  border: 0px solid yellow;
  background-color: black;
  opacity: 0;
    filter: alpha(opacity=0); 
}

/*  link1 kantoren (75,350), b=200 h=100
    link2 woningen (600,550), b=200 h=125
  link3 horeca (600,200), b=125 h=75
  link4 hergebruik (175,100), b=200 h=75
  link5 bouw (100,600), b=100 h=50
  link6 verlichting (450,725), b=175 h=75
  link7 contact (525,825), b=375 h=75
*/

img.link1a{
  position: absolute;
  left: 75px;
  top: 350px;
  width: 200px;
  height: 100px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link1b{
  position: absolute;
  left: 75px;
  top: 350px;
  width: 200px;
  height: 100px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link2a{
  position: absolute;
  left: 600px;
  top: 550px;
  width: 200px;
  height: 125px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link2b{
  position: absolute;
  left: 600px;
  top: 550px;
  width: 200px;
  height: 125px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link2c{
  position: absolute;
  left: 600px;
  top: 550px;
  width: 200px;
  height: 125px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link3a{
  position: absolute;
  left: 600px;
  top: 200px;
  width: 125px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link3b{
  position: absolute;
  left: 600px;
  top: 200px;
  width: 125px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link4a{
  position: absolute;
  left: 175px;
  top: 100px;
  width: 200px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link4b{
  position: absolute;
  left: 175px;
  top: 100px;
  width: 200px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link5a{
  position: absolute;
  left: 100px;
  top: 600px;
  width: 100px;
  height: 50px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link5b{
  position: absolute;
  left: 100px;
  top: 600px;
  width: 100px;
  height: 50px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link6a{
  position: absolute;
  left: 450px;
  top: 725px;
  width: 175px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link6b{
  position: absolute;
  left: 450px;
  top: 725px;
  width: 175px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link7a{
  position: absolute;
  left: 525px;
  top: 825px;
  width: 375px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}
img.link7b{
  position: absolute;
  left: 525px;
  top: 825px;
  width: 375px;
  height: 75px;  
  z-index: 20; 
  border: 0px solid blue;
}

a { cursor:pointer}
  
img.proj1a{
  position: absolute;
  z-index: 11; 
  top: 75px;
  left: 100px;
  width: 350px;
  height: 200px;
  border: 0px black solid;;
  /* clip-path krijg ik iniet werkend... */ 
}
img.proj1b{
  position: absolute;
  z-index: 12; 
  top: 75px;
  left: 100px;
  width: 350px;
  height: 200px;
  border: 0px black solid;;
}
div.proj1tekst{
  position: absolute;
  top: 75px;
  left: 480px;
  width: 370px; 
  height: 200px;
  z-index: 11; 
  border: 0px black solid;;
  z-index: 11
}

img.proj2a{
  position: absolute;
  z-index: 11; 
  top: 350px;
  left: 100px;
  width: 350px;
  height: 200px;
  border: 0px black solid;
  /* clip-path krijg ik iniet werkend... */ 
}
img.proj2b{
  position: absolute;
  z-index: 12; 
  top: 350px;
  left: 100px;
  width: 350px;
  height: 200px;
  border: 0px black solid;
}
div.proj2tekst{
  position: absolute;
  top: 350px;
  left: 480px;
  width: 370px; 
  height: 200px;
  /* background-color: red; */
  z-index: 11; 
  border: 0px black solid;
}


img.proj3a{
  position: absolute;
  z-index: 11; 
  top: 625px;
  left: 100px;
  width: 350px;
  height: 200px;
  border: 0px black solid;
  /* clip-path krijg ik niet werkend... */ 
}
img.proj3b{
  position: absolute;
  z-index: 12; 
  top: 625px;
  left: 100px;
  width: 350px;
  height: 200px;
  border: 0px black solid;
}
div.proj3tekst{
  position: absolute;
  top: 625px;
  left: 480px;
  width: 370px; 
  height: 200px;
  z-index: 11; 
  border: 0px black solid;
}

iframe.tekstFrame{
  border: 0px;
  display: none;
  height: 0px;
  width: 0px;
  overflow: hidden;
}











/*
p.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}


img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}




table, th, tr, td {
  width: 100%;
  height: 100%;
    border: 1px solid black;
    border-collapse: collapse;
  background-color: yellow;
  align: justify;
}

p { margin-bottom: 4px;
    margin-top: 4px;}

br {    }

a { color: #000000;
 text-decoration: none;
 cursor: pointer;}
a:link {color: #000000;  }   // unvisited link 
a:visited {color: #000000}  // visited link 
a:hover {color: #333333}   // mouse over link 
a:active {color: #333333}   // selected link 



h1   {  font-size: 18px; }
h2   {  font-size: 14px; }
h3  {  font-size: 13px; }
h4  {  font-size: 11px; }
h5  {  font-size:  9px; }
 
img {  border: 0px;
      margin: 0px;
      padding: 0px; }

iframe { 
      border: 0px;
        margin: 0px;
       padding: 0px;  }
     
textarea { 
      text-align: left;
        vertical-align: top;
}



*/