/**
 * Primary styles.
 *
 * Author: W/E adviseurs
 */
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('../fonts/websymbols-regular-webfont.eot');
    src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/websymbols-regular-webfont.woff') format('woff'),
         url('../fonts/websymbols-regular-webfont.ttf') format('truetype'),
         url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html{
  -webkit-font-smoothing: antialiased;
  font-size: 62.5%;
}
html, body, ul, img, fieldset,figure{
  padding:0;
  margin:0;
} 
html, body{
  height:100%;
  width:100%;
} 
body, button, input, select, textarea, time { 
  font-family: Arial; 
  color: #222; 
  font-size: 13px; 
  line-height: 20px;
}
input[type=number],textarea{
   -webkit-appearance: none;
}
textarea{
  resize:none;
}
ul{
  list-style-type:none;
}
a{
  text-decoration:none;
  color:#000;
}
p{
  margin:5px 0;
}
h2{
  margin:0 0 10px 0;
  font-size:18px;
  line-height:20px;
  color:#9696ae;
}
h5{
  font-size:12px;
  margin:0;
}
h3,h4{
  margin:0 0 10px 0;
  font-size:14px;
  font-weight:bold;
}
.item a h4 {
    height: 20px;
    overflow: hidden;
}
img, fieldset{
  border:none;
  /*max-width:100%;*/
  height:auto;
}

.stars{
  display:block;
  height:20px;
  width: 135px;
  margin:5px 0 0 0;
  float:left;
}
.rating0{background:url(../img/stars_small.png) no-repeat 0 0 ;}
.rating5{background:url(../img/stars_small.png) no-repeat 0 -20px;}
.rating10{background:url(../img/stars_small.png) no-repeat 0 -40px ;}
.rating15{background:url(../img/stars_small.png) no-repeat 0 -60px ;}
.rating20{background:url(../img/stars_small.png) no-repeat 0 -80px ;}
.rating25{background:url(../img/stars_small.png) no-repeat 0 -100px ;}
.rating30{background:url(../img/stars_small.png) no-repeat 0 -120px;}
.rating35{background:url(../img/stars_small.png) no-repeat 0 -140px ;}
.rating40{background:url(../img/stars_small.png) no-repeat 0 -160px ;}
.rating45{background:url(../img/stars_small.png) no-repeat 0 -180px ;}
.rating50{background:url(../img/stars_small.png) no-repeat 0 -200px ;}



#twitter-share-button {

    background:url("../Content/img/twitter.jpg") no-repeat;
}

.twitter-share-button {

    background:url("../Content/img/twitter.jpg") no-repeat;
}

.dpgsmall{
  display:block;
  width:42px !important;
  height:12px;
  position:absolute;
  right:5px;
  background:url("../img/dpglogo.png") no-repeat;
}

.dpgsmallrec{

  display:block;
  width:42px !important;
  height:12px;
  float:right;
  background:url("../img/dpglogo.png") no-repeat;
}







.expert, .assessor, .certificaat{
  display:block;
  width:40px !important;
  height:35px;

  bottom:5px;
  right:5px;
  float:right;

 
}
.expert {
     border:1px solid #eb6100;
  background:url("../img/GPR_expert.png") no-repeat;
}
.assessor {
     border:1px solid #eb6100;
  background:url("../img/GPR_assessor.png") no-repeat;
}
.certificaat {
    width:35px !important;
  height:35px;
  background:url("../img/GPR_certificaat.png") no-repeat;
}

.expert img, .assessor img, certificaat img{
  width:inherit !important;
  height:inherit !important;
}

.ico-twitter {
    background-image: url("Content\img\iconen\twitter16.png");
}
.ico-linkedin {
    background-image: url("Content\img\iconen\linkedin16.png");
}




.wrapper{
  width:100%;
  max-width:978px;
  margin: 0 auto;
  border:0pt solid #eb6100;
}
.rounded,.slide,.filter,.block,.blockBig, .gebouwblok div.item
{
  -moz-border-radius: 5px; /* Firefox */
  -webkit-border-radius: 5px; /* Safari, Chrome */
  border-radius: 5px; /* CSS3 */
  /*behavior: url(border-radius.htc);*/
}
.shadow,.slide,.filter,#recProjects ul li,.block,.blockBig, .gebouwblok div.item{
  -webkit-box-shadow: 0px 0px 5px 1px #aaaaaa;
  box-shadow: 0px 0px 5px 1px #aaaaaa;
}


header,.container,footer,.between,.filter section,#pagerFooter,#bottom{
  width:100%;
  max-width:100%;
}

body, header,.container,figure,nav,.topScores,tr,#slider,.Projects ul li img,table,footer,#bottom,#filters,#overview,.between,.Projects ul,.filter,.filter section,.views,#overview .kaart iframe,.Projects ul li,#overview .lijst.Projects ul,#pagerFooter,.intro,.block,.left,.right,.blockBig{
  float: left;
  position: relative;
}
#recProjects {
     position: relative;
}

  header{
    height:80px;
    max-height:100px;
  }
    figure {

  float: left;
    }


    #colwrap{
    overflow:hidden;
    background-color: green;      
}

    figure img{
        margin-right:20px;  float: left; 
    }
    nav{
        min-width:220px;
        max-width: 100%;
        height:46px;
        float :right;
        margin-top:15px;
        border:0pt solid black;
       
    }
    nav ul{
        width:100%;
        height:100%;
        display: flex;
        justify-content: space-around;
        min-width:220px;

    }
    nav ul li{
         
          height:36px;
          width:19%;
          min-width:100px;
          padding-right:1%;
          padding-left:1%;
          border-left:1px solid #cecece;
          text-align:center;
    }
     

    nav ul li a{
        font-size:12px;
        color:#C0C0C0;
        border:0pt solid red;
       
        
      }

        nav ul li a:hover {
            color: #9696ae;
        }

      nav ul li:first-child{
        border-left:0;
      }


/*als er geen 2 kaartjes meer naast elkaar passen er nog maar 1 tonen*/
        @media screen and (max-width:600px){

            figure img {
                margin-right: 5px;
                float: left;
            }

         nav {
                float:left;
                /*width:270px;*/
                margin:0px;
                padding:0px;
                padding-top:1px;
                height:75px;
               
            }

            nav ul{
                float:left;
                text-align:left;
                width:100%;
                height:100%;
                display: block;
                justify-content:initial;

            }
          
          nav ul li{
                float:left;
                width:100px;
                height:20px;
                margin:2px;
                border-left:0;
                text-align:left;
                margin-right:0px;
                border-left:1px solid #cecece;
            }
                  nav ul li:first-child{
                border-left:1px solid #cecece;
              }

  

        }


  .between{
    background:none repeat scroll 0% 0% #9696AE;
    /*background:url(../img/between_bg.jpg);*/
    color:#FFFFFF;
    font-weight:bold;
    font-size:12px;
    width:100%;
  }
    .between a{
      color:#fff;
      text-decoration:underline;
    }

  .container{
    background:#f8fafb;
    padding:20px 0;
  }
    .topScores{
        width:100%;
      min-width:200px;

    }

      #slider{
        padding:0px 0px 0px 0px;
        width:100%;
        max-width:100%;
        min-width:300px;
        height:300px;
        border:0pt solid red;
        margin:0px;
       
      }
        #slider h3{
          font-size:16px;
          font-weight:bold;
          color:#9696ae;
          margin:0;
        }
        #slider h2{
          font-size:12px;
          font-weight:bold;
          color:#9696ae;
          margin:0;
          padding:0px;
        }

         #slider table{
            width:100%;
            max-height:300px;
            height:300px;
            border: 0px solid red;
          }
          #slider table tr{
            width:100%;
            padding:0;
            margin-bottom:0px;
   ;
            
          }
          #slider table thead tr
          {
              margin-bottom:0;

          }
            .slide{
              position:absolute;
              padding-left:10%;
              height:238px;

              
        width: -moz-calc(100% - 32px);
        /* WebKit */
        width: -webkit-calc(100% - 32px);
        /* Opera */
        width: -o-calc(100% - 32px);
        /* IE-OLD */
        width: expression(100% - 32px);
        /* Standard */
        width: calc(100% - 32px);


                min-width:300px;
              background:#fff;
              padding:5px;
              top:0px;
                border:0pt solid red;
                margin:1%;
            }
            
            .slide1{background:url(../img/bg_slider_01_energie.png) #fff no-repeat right top;}
            .slide2{background:url(../img/bg_slider_02_milieu.png) #fff no-repeat right top;}
            .slide3{background:url(../img/bg_slider_03_gezondheid.png) #fff no-repeat right top;}
            .slide4{background:url(../img/bg_slider_04_gebruikskwaliteit.png)#fff no-repeat right top;}
            .slide5{background:url(../img/bg_slider_04_toekomstwaarde.png) #fff no-repeat right top;}
           
            #slider table tr td{
               
                padding-right:10px;
                font-size:13px;
                padding-top:0px;
                line-height:8px;
                white-space:nowrap;
                max-width:90px;
                }
            #slider table tr td:first-child {
                width: 10%;
                color: #9696ae;
                font-size: 20px;
                font-weight: bold;
                text-align:right;
                vertical-align: text-top;
                padding-top: 3px;

            }
            #slider table tr td:last-child{width:10%;height:20px; padding-top:0px;border:0px solid red;}
            #slider table thead tr td{color:#bababa !important;font-size:10px !important;font-style:italic;}
            #slider table td span.score{background:#9696ae;-webkit-border-radius: 360px;border-radius: 360px;padding:3px 5px 4px 5px;color:#fff;font-size:12px;display:block;height:20px; width:17px; text-align:center; vertical-align:middle;line-height:22px;}
            #slider table thead tr{padding-bottom:0;}

              #slider table a:hover{
                color:#9696ae;
              }
              				#slider table .project {
									/*width: 260px;*/
									float: left;
                                    color: #9696AE;
                                    font-weight:bold;
                                    font-size: 14px;
                                    line-height:6px;
							}
							#slider table .plaats {
									/*width: 130px;*/
									float:left;
                                    font-weight:lighter;
                                    font-size: 10px;
							}
							#slider table td.projectenplaats {
								width: 300px;
							}

      #controls{
        /*background:#9696ae;*/
        padding:0px;
        height:20px;
        margin:0px;

        width:150px;
        overflow:hidden;
        position: absolute;
        left:150px;
        top:40px;
        float:right;
        z-index:1000;
        border:0pt solid red;
      }
     

        #controls .slideButtons{
          font-family: 'WebSymbolsRegular';
          width:0px;
          float:left;
          color:#9696ae;
          height:100%;
          font-size:0px;
          line-height:22px;
          padding:7px 10px;
          height:26px;
          /*
          background-color: #696988;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#696988), to(#9494ad));
          background: -webkit-linear-gradient(top, #9494ad, #696988);
          background: -moz-linear-gradient(top, #9494ad, #696988);
          background: -ms-linear-gradient(top, #9494ad, #696988);
          background: -o-linear-gradient(top, #9494ad, #696988);
          */
        }
        #controls .slideButtons:hover{
            color:#000000;
          /*
              color:#000000;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9494ad), to(#696988));
          background: -webkit-linear-gradient(top, #696988, #9494ad);
          background: -moz-linear-gradient(top, #696988, #9494ad);
          background: -ms-linear-gradient(top, #696988, #9494ad);
          background: -o-linear-gradient(top, #696988, #9494ad);
              */
        }
        #controls .prevSlide{
          -moz-border-radius: 5px 0 0 5px; /* Firefox */
          -webkit-border-radius: 5px 0 0 5px; /* Safari, Chrome */
          border-radius: 5px 0 0 5px; /* CSS3 */
          /*behavior: url(border-radius.htc);*/
        }
        #controls .nextSlide{
          float:right;
          -moz-border-radius: 0 5px 5px 0; /* Firefox */
          -webkit-border-radius: 0 5px 5px 0; /* Safari, Chrome */
          border-radius: 0 5px 5px 0; /* CSS3 */
          /*behavior: url(border-radius.htc);*/
          text-align:right;
        }

        #themas{width:140px;margin:0px auto;}
        #themas li{
          float:left;
          margin-right:10px;
          width:20px;
          height:20px;
          opacity:0.3;
          cursor:pointer;
        }
          #themas li:last-child{margin-right:0;}

          #themas li.btnEne{background:url(../img/iconen/energie-small.png) no-repeat 0 0;}
          #themas li.btnMil{background:url(../img/iconen/milieu-small.png) no-repeat;}
          #themas li.btnGez{background:url(../img/iconen/gezondheid-small.png) no-repeat;}
          #themas li.btnGeb{background:url(../img/iconen/gebruikskwaliteit-small.png) no-repeat;}
          #themas li.btnToe{background:url(../img/iconen/toekomstwaarde-small.png) no-repeat;}
          #themas li.active{opacity:1.0;}



    #recProjects{
        
        max-width: 978px;
        padding: 5px;
        border:0pt solid black;
        padding-bottom:10px;
    }
        
    .Projects ul {
        width:100%;
        }


      /*box sizing was de crux: http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/ */
        .Projects ul li{
          padding:8px;
          border:1pt solid #cecece;
          margin: 0 0.4% 5px 0.4%;
          float:left;
          background:#fff;
          
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
             
            width:32.5%; /*+ margins (0.8) is 33.3% */
            height:auto;
            min-height: 144px;
        }

          .Projects ul li.filtersOn{
            height: 192px;
          }
          .Projects ul li.filtersOn div.gebouwdata{
            width:98%;
          }
        



        
        .Projects ul li:hover, .gebouwblok div.item:hover{
          background:#f2f7f8;
        }
          .Projects ul li a, .gmapcontentwindow a{
 
            width:100%;
            height:100%;
            text-align:left;
            display: inline-block;
          }
          .Projects ul li h4, .gmapcontentwindow h4, .gebouwblok div.item h4{
            color:#9696ae;
            margin-bottom:5px;
          }
          .Projects ul li img, .gmapcontentwindow img, .gebouwblok div.item img{
             float: left;
              height: 70px;
              margin-right: 0;
              min-width: 100px;
          }
            .gmapcontentwindow div.gebouwdata {
                margin-left:5px;
            }
          .Projects ul li figure, .gebouwblok div.item figure {
             border: 1px solid #9696ae;
              height: 65px;
              overflow: hidden;
              width: 100px;
          }
          .Projects ul li span, .gebouwblok div.item span{
            /*width:100%;*/
            display:block;
            font-size:11px;
            color:#9696ae;
            line-height:18px;
          }
          .Projects ul li div, .gebouwblok div.item div{
            float:left;
             margin-left: 5px;
            width: 60%;
            border:0pt solid red
          }
          .gmapcontentwindow div
          {
              width:200px;
              float:left;
          }
          
          .gmapcontentwindow .forward{
              margin-top:40px;
              font-weight:bold;
          }
          
          .gmapcontentwindow .span
          {  
            color:#9696ae;
          }
          
          .gmapcontentwindow{
            overflow:hidden;  
          }
            .Projects ul li div span, .gmapcontentwindow div span, .gebouwblok div.item div span{
              display:block;
              /*width:100%;*/
              line-height:14px;
              color:#000;
            }


#recOverzicht{
        width: 100%;
        max-width: 978px;
        margin: auto;
        padding: 0%;
        border:0pt solid black;
    }

    #filters{
      width:198px;
      padding:0;
      margin-right:8px;
      margin-left:2px;
      border:0pt solid red;
      float:left;
    }
      .filter{
        margin:0;
        margin-bottom:10px;
        margin-left:3px;
        padding:10px 10px 10px 10px;
        width:178px;
        background:#fff;
        
      }
				.filter #search_box, .filter #shareinput {
					border:1px solid #9696ae;
					height:25px;
					width: 140px;
				}
				.filter #share {
					position:absolute;
					right: 10px;
					top: 10px;
				}
        .filter #search_box{
          background:url(../img/search.jpg) no-repeat right center;
          padding-right:25px;
					width: 130px;
        }
        .filter span.openclose {
          font-family: 'WebSymbolsRegular';
          position:absolute;
          top:5px;
          right:10px;
          font-size:27px;
          width:auto;
        }
          .filter span.openclose a{
            color:#9696ae;
          }

        .filter .ui-slider{
          margin:7px 0 5px 3px;
          width:82%;
          -moz-border-radius: 360px; /* Firefox */
          height:7px;
          -webkit-box-shadow: inset 0px 1px 5px 1px #ccc;
          box-shadow: inset 0px 1px 5px 1px #ccc;
        }
          .filter .ui-slider .ui-slider-range{
            background:#9696ae;
          }
          #dpg div.ui-slider-range {
                background-color:#8b7c65;
            }
           #energie div.ui-slider-range {
                background-color:#B64252;
            }
            #milieu div.ui-slider-range {
                background-color:#96945C;
            }
             #gezondheid div.ui-slider-range {
                background-color:#7C647E;
            }
              #gebruikskwaliteit div.ui-slider-range {
                background-color:#6475A4;
            }
               #toekomstwaarde div.ui-slider-range {
                background-color:#D8AE1D;
            }


          .filter .ui-slider .ui-slider-handle{
            width:15px;
            top:-7px;
          }
          .filter .ui-slider .ui-slider-handle, .filter .ui-slider{
            -moz-border-radius: 360px; /* Firefox */
            -webkit-border-radius: 360px; /* Safari, Chrome */
            border-radius: 360px; /* CSS3 */
            /*behavior: url(border-radius.htc);*/

          }
        .filter .filterthema{
          width:100%;
          margin:5px 0 10px 0;
          padding:0 0 16px 0;
          background:url(../img/counter.jpg) no-repeat left bottom;
        }
          .filter .filterthema input, .filter input{
            float:left;
          }
          .filter .filterthema span, .filter span{
            display:block;
            width:auto;
            float:left;
            position:relative;
            margin-left:10px;
          }

        .filter #themafilters{
          margin-left: 12px;
        }

        .filter #themafilters label{
          position:absolute;
          left: -12px;
        }




    #overview{
  


    }

        #overview .kaart, .gmap {
            text-align:center;
            width:99%%;
            margin:6px;
            margin-top:5px;
            height:100%;
            overflow: hidden; /* Creates a new block format context, which will make this tag fill the remaining width */
           
        }
      #overview .views{
        background:#9696ae;
        border:1px solid #9696ae;
        margin:0 0 10px 0;
         -moz-border-radius: 2px; /* Firefox */
        -webkit-border-radius: 2px; /* Safari, Chrome */
        border-radius: 2px; /* CSS3 */
        /*behavior: url(border-radius.htc);*/
        overflow: hidden;
      }
        #overview .views a{
          display:block;
          padding:5px 20px;
          float:left;
          color:#fff;
         
        }
          #overview .views a.active{
            background:#fff;
              -moz-border-radius: 2px; /* Firefox */
              -webkit-border-radius: 2px; /* Safari, Chrome */
              border-radius: 2px; /* CSS3 */
              /*behavior: url(border-radius.htc);*/
              color:#000;
          }



      #overview .showFilter{
        float:left;
        /*background:#9696ae;*/
        width:40px;
        height:32px;
        border:1px solid #9696ae;
        margin:5px 0px 0px 5px;
          color:#000;
         -moz-border-radius: 4px; /* Firefox */
        -webkit-border-radius: 4px; /* Safari, Chrome */
        border-radius: 4px; /* CSS3 */
        text-align:center;
        vertical-align:central;
        /*behavior: url(border-radius.htc);*/
      }


      .knop, .knop a{
          font-family: Arial;
          height:35px;
          display:inline-block;
          padding:3px;
          padding-bottom:0px;
          color:#C0C0C0; 
        }
        #overview .showFilter:hover{
            background:#9696ae;
            color:#FFF;
        }



      

          #overview .showKaartLijst{
        float:left;
        /*background:#9696ae;*/
        width:40px;
        height:32px;
        border:1px solid #9696ae;
        margin:5px 0px 0px 5px;
        padding:0px ;
        padding-top:0px;
        color:#000;
        -moz-border-radius: 4px; /* Firefox */
        -webkit-border-radius: 4px; /* Safari, Chrome */
        border-radius: 4px; /* CSS3 */
        text-align:center;
        /*behavior: url(border-radius.htc);*/
      }

           #overview .showKaartLijst:hover{
            background:#9696ae;
            color:#FFF;
        }
       



      #overview .kaart{
        top:52px;
        left:10px;
        position:absolute;
        width:100%;
      }
      #overview .lijst{
        top:43px;
        left:0;
        display:none;
        position:absolute;
        width:100%;
        overflow-y:hidden;
        overflow-x:hidden;
        height:100%;
        
      }

        #overview .lijst.Projects ul {

        }


        #overview .lijst.Projects ul li{
          width:296px;
          border:1px solid #9696ae;
          background:none;
          float: left;
          margin-top:4px;
          margin-left:5px;
        }
          #overview .lijst.Projects ul li:hover{
            background:#eaeaf5;
          }
         .Projects ul li a span.forward{
              font-family: 'WebSymbolsRegular';
              position:absolute;
              top:10px;
              right:10px;
              font-size:14px;
              width:auto;
              color:#9696ae;
          }
          .gebouwblok div.item span.forward{
              font-family: 'WebSymbolsRegular';
              float:right;
              font-size:14px;
              width:auto;
          }
        .date{
          color:#9696ae !important;
          margin-bottom:4px;
        }



    #pagerFooter{
        height:32px;

        width: -moz-calc(100% - 128px);
        /* WebKit */
        width: -webkit-calc(100% - 128px);
        /* Opera */
        width: -o-calc(100% - 128px);
        /* IE-OLD */
        width: expression(100% - 128px);
        /* Standard */
        width: calc(100% - 128px);

        margin: 0px;
        float:left;
        padding:0px;
        margin-left: 120px;
        border: 0pt dotted green;
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        top:-13px;
    }

    #pagerFooter a{
        font-size:14px;
        padding:4px;
        margin-top:2px;
        border:0px solid #9696ae;
        color:#C0C0C0;
        font-weight:bold;
        min-width:12px;
        max-width:11132px;
        height:20px;
        float: left;
    }
    #pagerFooter .next,#pagerFooter .prev{
      font-family: 'WebSymbolsRegular';
      /*width:40px;*/
    }

        #pagerFooter a:hover {
            background: #9696ae;
            color: #FFF;
        }

     #pagerFooter  .current {
        background-color: #cfcfcf;
        color: #000;
    }

    #overview .lijst #pagerFooter a:hover{
    background:#9696ae;
    color:#fff;
    }

.gebouwblok {
    margin:0px;
    padding:0px;
    padding-left:6px;
    border:0pt solid red;
    box-sizing: border-box;
}

    .gebouwblok div.item {
        width:30.7%;
        height: 125px;

        display: inline-block;
        white-space: nowrap;
        margin:0.5%;
        margin-right:0;
        text-align: left;
        padding: 8px; 
        min-height: 110px;
        
    }




        /*scherm is kleinder dan maximale breedte, er passen nog 3 kaartjes naast elkaar, maar de gebouwdata moet onder het plaatje*/
        @media screen and (min-width:831px) and (max-width:990px) {
          .Projects ul li {
            height: 178px;
          }
          #projects li .gebouwdata{
            width:98%;
          }
          /*als de filters zichtbaar zijn passen er nu maar 2 plaatjes naast elkaar*/
          .Projects ul li.filtersOn{
            width:49.2%; /*+ margins (0.8) is 50% */
          }
          .Projects ul li.filtersOn div.gebouwdata {
            width:64%;
          }
          

          .gebouwblok div.item {
            height: 178px;
            margin: 0.15%;
          }
           .gebouwblok div.item div{
            width:98%;
          }
        }





        /*als er geen 3 kaartjes meer naast elkaar passen door de gebouwdata*/
        @media screen and (max-width:830px){
          .Projects ul li {
            width:49.2%; /*+ margins (0.8) is 50% */
          }
          .Projects ul li div.gebouwdata {
            width:64%;
          }
          
           .gebouwblok div.item:nth-child(3){
                display: none;
            }

            .gebouwblok div.item{
                width:46%;
                  height:auto;
                 margin: 0.55%;
            }
 
            .gebouwblok div.item:nth-child(3){
                display: none;
            }

             

        }
        /*als er nog wel 2 kaartjes naast elkaar passen, maar de gebouwdata onder het plaatje moet*/
        @media screen and (min-width:495px) and (max-width:659px){
          .Projects ul li {
            height: 178px;
            /*background:#eb6100*/
          }
          .Projects ul li div.gebouwdata {
            width:98%;
          }
          /*als de filters zichtbaar zijn past er nu maar 1 plaatje op het scherm*/
          .Projects ul li.filtersOn{
            width:100%;
            min-height:125px;
            height:auto;
          }
          .Projects ul li.filtersOn div.gebouwdata {
            width:64%;
          }
          
          .Projects ul li {
            margin-right: 0;
          }
         
          .gebouwblok div.item{
                width:45%;
                margin: 0.55%;
                height:auto;
                min-height: 178px;
            }
            .gebouwblok div.item div{
            }

           

        }
        /*als er geen 2 kaartjes meer naast elkaar passen er nog maar 1 tonen*/
        @media screen and (max-width:494px){
          .Projects ul li {
            width:100%;
            min-width:340px;
          }
          .Projects ul li div.gebouwdata {
            width:64%;
          }
          
          .Projects ul li {
            margin-right: 0;
          }

          .gebouwblok div.item{
        width: -moz-calc(100% - 24px);
        /* WebKit */
        width: -webkit-calc(100% - 24px);
        /* Opera */
        width: -o-calc(100% - 24px);
        /* IE-OLD */
        width: expression(100% - 24px);
        /* Standard */
        width: calc(100% - 24px);

                min-width:290px;
                min-height:125px;
            }
          .gebouwblok div.item div{
            width:66%;
          
          }

        }

/* DETAILS */
  .intro{
        margin-bottom:20px;
        width: -moz-calc(100% - 8px);
        /* WebKit */
        width: -webkit-calc(100% - 8px);
        /* Opera */
        width: -o-calc(100% - 8px);
        /* IE-OLD */
        width: expression(100% - 8px);
        /* Standard */
        width: calc(100% - 8px);
        border: 0px solid red;
         box-sizing: border-box;
         padding-left: 5px;
  }
    .intro figure{
      float:left;
      width:290px;
      height:195px;
      margin-right:20px;
      border:1px solid #9696ae;
      overflow: hidden;
    }      
    .intro span{
      font-weight:bold;
      color:#888;
    }
  #info{
    width:300px;
    margin-right:0px;
    border: 0px solid green;
    box-sizing:border-box;
    float: left;
    position: relative;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom:20px;
}
  }
  #info .block{
    border:2px solid red;
    padding:0px;
    width:295px;
    margin-bottom:0px;
          margin-bottom:15px;
      margin-top:5px;
      background-color:#eb6100;
      float:left;
       box-sizing: border-box;
  }
    #info .block .spacing{
      float:left;
      width:100%;
      height:20px;
    }
    #info .block .left{
      clear:both;
      width:130px;
      padding-right:10px;
      color:#9696ae;
      text-align:right;
    }
    #info .block .right{
      width:135px;
      overflow:hidden;
    }
    #results .score img{
      position:absolute;
      height:30px;
      top:8px;
      right:10px;
    }
    #info .block #map_canvas_small{
      border:1px solid #9696ae;

        width: -moz-calc(100% -10px);
        /* WebKit */
        width: -webkit-calc(100% - 10x);
        /* Opera */
        width: -o-calc(100% - 10px);
        /* IE-OLD */
        width: expression(100% - 10px);
        height:373px;
        margin:5px;
    }


  #results{
    width:670px;
    border: 0px solid blue;
    box-sizing:border-box;
    float: right;
    position: relative;
    padding:5px;
   
  }







    #results .blockBig{
        width: -moz-calc(100% - 20px);
        /* WebKit */
        width: -webkit-calc(100% - 20px);
        /* Opera */
        width: -o-calc(100% - 20px);
        /* IE-OLD */
        width: expression(100% - 20px);
        /* Standard */
        width: calc(100% - 20px);
       
        min-width:290px;
      padding:10px;
      margin-bottom:14px;
     
    }
    #results .blockBig.score h4{
      width:auto;
      float:left;
      margin:5px 20px 0 0;
    }
    #results .blockBig .assessor, #results .blockBig .expert , #results .blockBig .certificaat{
      bottom: 4px;
    }
    #results .highcharts-container{
      margin:20px auto 0 auto;
    }
  #results table{
    width:100%;
  }
    #results table tr{
      width:100%;
      font-size:12px;
    }
    #results thead tr{
      width:100%;

    }
    #results td,#results th{

        width:20%;
        padding:0px;
      text-align:center;
   
    }
   
    #results td:first-child,#results th:first-child{
      width:65px;
      min-width:65px;
      text-align:left;
    }
    #results tbody tr:last-child{

    }


      #results #CO2 td,#results #CO2 th{
      width:150px;
      text-align:center;
    }

    #results #CO2 td:first-child,#results #CO2 th:first-child{
        width:138px;
        text-align:left;
    }
    #results table td span{
      color:#777;
    }


#gprScoresGraph {
   
    height:313px;
    margin: 0 auto;
    border:0px solid #FF00FF;
    margin-left:35px;
}

#gprScoresCO2 {
    height:130px;
    margin: 0 auto;
    border:0px solid #FF00FF;
    margin-left:30px;
}

  #bottom ul li{
    width:306px;
    float:left;
    background:none;
  }
    #bottom ul li img{
      float:left;
      width:100px;
      margin:0 10px 20px 0;
      height:auto;
    }
    #bottom span{
      width:100%;
      display:block;
    }
    #bottom ul li h4{
      color:#9696ae;
      margin-bottom:5px;
    }

   
footer{
  background:#9999b1;
} 

  footer #footerTop{
    min-height:95px;
    padding:5px 0;
  }
    footer #footerTop ul{
      margin-left:5%;
      float:left;
      margin-top:0px;
    }
      footer #footerTop ul li{
        margin:0 0 10px 0;
        padding-left:25px;
        vertical-align:baseline;
        background:url(../img/pijl.png) left top no-repeat;
   
      }
        footer #footerTop ul li a{
          color:#fff;
        } 


  footer #footerBottom{
    min-height:25px;
    font-size:10px;
    color:#fff;
    background:#96969a;
  }
    #footerBottom span{
      display:block;
      float:left;
      height:15px;
      padding:10px 10px 10px 0;
      line-height:15px;
    }
    #footerBottom ul{
      float:right;
    }
    #footerBottom ul li{
      float:left;
      height:35px;
    }
    #footerBottom ul li a{
      display:block;
      color:#fff;
      height:15px;
      padding:10px 10px 10px 0;
    }
    #footerBottom ul li.img a{
      height:35px;
      padding:0;
    }
  #footerBottom .wrapper{
      border:0pt solid yellow;
    min-height:35px;
  }
  footer h2{
    color:#fff;
    width:auto;
    float:left;
  }

#pagerHeader, .hide, .filtered {
    display:none;
}
.pagination .current {
    background-color: #cfcfcf;
    color: #fff;
}

/* Add some nice box-shadow-ness to the modal tooltip */
#ui-tooltip-modal{
	max-width: 960px;
 
	-moz-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
	box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
}
 
#ui-tooltip-modal .ui-tooltip-content{
	padding: 10px;
}

.clearsearch img
{
    margin: 6px 0 0 3px;
    }

/*label 
{
    cursor: pointer;
}*/
.wrapper .container
{
    margin-top:-30px;
    background:none;
}

/*gemiddelde score*/
.filter .avgfilter{
          width:100%;
          margin:5px 0 10px 12px;
          padding:20px 0 25px 0;
          background:url(../img/counterB.jpg) no-repeat left bottom;
        }
#average{
    margin-left:10px;
}
  #average span{
    margin-right:0px;
    width:20px;
    height:20px;
  }
  #average span.left{
    background:url(../img/sterren.png) -60px 0 no-repeat;
  }
  #average span.full{
    background:url(../img/sterren.png) 0px 0 no-repeat;
  }
  #average span.empty{
    background:url(../img/sterren.png) -20px 0 no-repeat;
  }
  #average span.right{
    background:url(../img/sterren.png) -40px 0 no-repeat;
  }
  #average span.grey{
    background:url(../img/sterren.png) -80px 0 no-repeat;
  }

/*de cachepagina*/
.cachetable
{
    width:100%;
    border: 1px solid grey; 
}
    .cachetable th, .cachetable td
    {
        border: 1px solid grey;
        width:130px;
        margin:0;
        padding:3px;
    }
    .cachetable img
    {
        width: 130px;
    }

.aantalprojecten {
	color: #9696AE;
	float: right;
	font-size: 1.2em;
	font-weight: bold;
	margin: 6px 10px 0 0;
}

/*markerclusterer markers*/
.markerClass{
	text-align:center;
}
	.markerClass span {
		margin-left:-8px;
	}






@media screen and (max-width:1000px) {

    #info {
        clear:both;
        width: -moz-calc(100% - 4px);
        /* WebKit */
        width: -webkit-calc(100% - 4px);
        /* Opera */
        width: -o-calc(100% - 4px);
        /* IE-OLD */
        width: expression(100% - 4px);
        /* Standard */
        width: calc(100% - 4px);
       
    }
    #info .block {
       width: -moz-calc(50% - 4px);
        /* WebKit */
        width: -webkit-calc(50% - 4px);
        /* Opera */
        width: -o-calc(50% - 8px);
        /* IE-OLD */
        width: expression(50% - 4px);
        /* Standard */
        width: calc(50% - 8px);

    }

    #results {
        width: -moz-calc(100% - 8px);
        /* WebKit */
        width: -webkit-calc(100% - 8px);
        /* Opera */
        width: -o-calc(100% - 8px);
        /* IE-OLD */
        width: expression(100% - 8px);
        /* Standard */
        width: calc(100% - 8px);
 
        float:left;
    }

     #results td, th{
      font-size:12px;
    }


     
}


@media screen and (max-width:650px) {

    #info {
        clear: both;
        width: -moz-calc(100% - 8px);
        /* WebKit */
        width: -webkit-calc(100% - 8px);
        /* Opera */
        width: -o-calc(100% - 8px);
        /* IE-OLD */
        width: expression(100% - 8px);
        /* Standard */
        width: calc(100% - 8px);
    }


        #info .block {
            width: -moz-calc(100% - 2px);
            /* WebKit */
            width: -webkit-calc(100% - 2px);
            /* Opera */
            width: -o-calc(100% - 2px);
            /* IE-OLD */
            width: expression(100% - 2px);
            /* Standard */
            width: calc(100% - 2px);
            margin-right: 0px;
        }

      #results td, th{
      font-size:10px;
    }


}


    @media screen and (max-width:450px) {

        #header figure img{
            width:60px;
        }

        #results td, th {
            font-size: 8px;
        }

        #results td:first-child, #results th:first-child {
        width: 35px;
        min-width: 65px;
        text-align: left;
        }

          #results td, th{
      font-size:8px;
    }

        #tableGprScoresGraph th{
           color:#0FF;
             font-size: 0px;
        }

        #results .blockBig.score h4 {
            margin: 5px 5px 0px 0px;
        }
            .expert, .assessor, .certificaat {
            right: 5px;
        }

        #gprScoresCO2 {
        margin-left:0px;
    }

}

#share-buttons img {
    width: 24px;
    padding: 12px;
    border: 0;
    box-shadow: 0;
    display: inline;
}