@font-face { font-family: 'Zonnescan'; src:url(/fonts/zonnescan.eot); src:url(/fonts/zonnescan.eot) format('embedded-opentype'), url(/fonts/zonnescan.woff) format('woff'),	url(/fonts/zonnescan.ttf) format('truetype'), url(../fonts/Zonnescan.svg?#Zonnescan) format('svg'); font-weight: normal; font-style: normal; }

 
body, div, p, h1, h2, strong, span, a, form, label, table, tr, td { margin: 0em; padding: 0em; border: 0em; outline: 0em; }
input { margin: 0em; padding: 0em; }
body, input, select, label, table, tr, td, button { font-family: 'Arial', sans-serif; font-weight: normal; font-style: normal; line-height: 1.2em; color: #252525; }
html, body { height: 100%; background: #FFFFFF; position: relative; }
body { font-size: 90%; } 

 
a { color: #AF0305; text-decoration: none; transition: color 0.25s ease-out; }
a:hover { color: #EC1A2C; }
h2 { font-size: 1em; font-weight: bold; clear: both; }
p { margin: 0em 0em 1em 0em; width: 17.5em; }
p.tight { margin: 0em; }
strong { font-weight: bold; } 
strong.red { color: #EC1A2C; }
strong.orange { color: #FF5500; }
strong.green { color: #00AA33; }

 
input[type="text"], input[type="search"] { background: transparent; font-size: 1em; font-weight: inherit; border: 0px; outline: 0px; }
input.kwh-input { width: 2.3em; }
input.editable { width: 4em; border: 1px solid #AAAAAA; text-align: right; line-height: 1em; border-radius: 1px; -webkit-appearance: none; }
input.editable:focus { background: #E5FFEE; }
input[type="radio"] { margin-right: 0.3em; box-shadow: none; cursor: pointer; }
label { cursor: pointer; }
table { margin: 0em 0em 1em 0em; border-collapse; collapse; border-spacing: 0px; width: 100%; }
table td:first-child { padding-right: 1em; }
table td:last-child { text-align: right; }
span.CO2 { position: relative; top: 0.5em; }

 
h1 { font-size: 1em; line-height: 1em; font-weight: normal; background: #EC1A2C; color: #FFFFFF; position: absolute; top: 3em; left: 3em; width: 21%; max-width: 30em; padding: 1.3em 5em 1.3em 2em; z-index: 12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -moz-box-sizing: border-box; box-sizing: border-box; }
h1.shadow { box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); }
h1 input { color: #FFFFFF; width: 100%; }
#change-location { position: absolute; right: 2.1em; top: 1.3em; cursor: pointer; }
#change-location:after { font-family: 'Zonnescan'; content: '\e616'; position: relative; right: 0em; font-size: 24px; transition: all 0.25s ease-out; }
#change-location:hover:after { font-size: 28px; right: -2px; }
.iemessage { display: none; }

 
#loader { width: 100%; height: 100%; position: absolute; background: rgba(255,255,255,0.9); z-index: 100; }
        
 
.icon-zs:after { font-family: 'Zonnescan'; float: right; width: 1em; height: 1em; margin: 0em -0.1em 0em 0em; position: relative; right: -0.1em; clear: both; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-calculator:after { content: '\e604'; font-size: 4.4em; line-height: 0.75; }
.icon-earth:after { content: '\e607'; font-size: 4.8em; line-height: 0.9em; margin-right: -0.17em; }
.icon-edit:after { content: '\e61e'; font-size: 3.8em; line-height: 0.9em; }
.icon-house:after { content: '\e610'; font-size: 4em; line-height: 0.9em; }
.icon-graph:after { content: '\e60c'; font-size: 3.3em; line-height: 0.9em; }
.icon-info:after { content: '\e615'; font-size: 3.6em; line-height: 0.9em; }
.icon-installation:after { content: '\e611'; font-size: 3.4em; line-height: 1.1em; }
.icon-lamp:after { content: '\e609'; font-size: 4.4em; line-height: 0.75em; }
.icon-money:after { content: '\e613'; font-size: 3.6em; line-height: 0.9em; }
.icon-office:after { content: '\e614'; font-size: 3.6em; line-height: 0.9em; }
.icon-person-1:after { content: '\e600'; }
.icon-person-2:after { content: '\e601'; }
.icon-person-4:after { content: '\e602'; }
.icon-person-6:after { content: '\e603'; }
.icon-plug:after { content: '\e60a'; font-size: 5.5em; line-height: 0.9em; margin-right: -0.17em; }
.icon-solarenergy:after { content: '\e618'; font-size: 4em; line-height: 0.9em; }
.icon-solarpanel:after { content: '\e619'; font-size: 4.4em; line-height: 0.7; }
.icon-talk:after { content: '\e61b'; font-size: 4em; line-height: 0.9em; }


#slides { position: absolute; top: 3em; left: 3em; background: #FFFFFF; background: rgba(255,255,255,0.93); width: 21%; max-width: 30em; overflow: auto; z-index: 10; box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.25); max-height: calc(100% - 6em); }
#slides li { display: block; width: auto; height: 100%; padding: 4.5em 2em 2em 2em; position: relative; }
    

.bx-wrapper { position: relative; height: 100%; margin: 0em; padding: 0em; *zoom: 1; }
.bx-wrapper .bx-viewport { height: 100%; height: auto !important; -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); }
.bx-wrapper .bx-pager { position: absolute; bottom: 1.7em; right: 2em;	}
.bx-wrapper .bx-pager { text-align: center; line-height: 0em; }
.bx-wrapper .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; }
.bx-wrapper .bx-pager.bx-default-pager a { background: #AAAAAA; text-indent: -999em; display: block; width: 0.9em; height: 0.9em; margin: 0em 0em 0em 0.5em; outline: 0em; border-radius: 0.5em; transition: all 0.25s ease-out; }
.bx-wrapper .bx-pager.bx-default-pager a:hover {	background: #FC2A3C;}
.bx-wrapper .bx-pager.bx-default-pager a.active {	background: #EC1A2C;}
.bx-wrapper .bx-loading { display: none; }
.page-nav { position: absolute; left: 3em; height: 42em; width: 21%; max-width: 30em; z-index: 9; }
.page-prev { position: absolute; top: 50%; left: -2em; width: 2em; height: 4em; background: #FFFFFF; border-radius: 2em 0em 0em 2em; box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); cursor: pointer; }
.page-prev:after { content: ''; position: absolute; top: 1em; left: 0.6em; border-style: solid; border-width: 1em 1em 1em 0em; border-color: transparent #EC1A2C transparent transparent; }
.page-next { position: absolute; top: 50%; right: -2em; width: 2em; height: 4em; background: #FFFFFF; border-radius: 0em 2em 2em 0em; box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); cursor: pointer; }
.page-next:after { content: ''; position: absolute; top: 1em; right: 0.6em; border-style: solid; border-width: 1em 0em 1em 1em; border-color: transparent transparent transparent #EC1A2C; }


.slider-kwh-container { clear: both; }
.labels-kwh > div { font-family: 'Zonnescan'; display: inline-block; float: left; width: 25%; font-size: 3em; height: 0.5em; line-height: 0em; text-align: center; border-right: 1px solid #AAAAAA; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.labels-kwh > div:last-child { border-right: 0em; }
.ui-slider { position: relative; text-align: left; background: #AAAAAA; clear: both; }
.ui-slider .ui-slider-handle { background: #EC1A2C; position: absolute; margin-top: 13px; z-index: 2; width: 26px; height: 13px; cursor: pointer; -ms-touch-action: none; touch-action: none; }
.ui-slider .ui-slider-handle:before { content: ''; position: absolute; top: -10px; left: 0em; width: 0em; height: 0em; border-style: solid; border-width: 0px 13px 10px 13px; border-color: transparent transparent #EC1A2C transparent; }
.ui-slider-horizontal { height: 1px; }
.ui-slider-horizontal .ui-slider-handle { top: 0em; margin-left: -13px;  }
.slider-kwh-container p.push { display: block; margin: 2.5em 0em 1em 0em; }


#map { position: absolute; top: 0em; right: 0em; width: 100%; height: 100%; overflow: hidden; z-index: 8; } 
.olControlZoom { top: 2.8em; right: 2.8em; text-align: center; }
.olControlZoomIn, .olControlZoomOut { font-size: 2em; display: block; background: #FFFFFF; background: rgba(255,255,255,0.93); color: #252525; width: 1em; margin: 0.1em; line-height: 1em; text-align: center; box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); transition: background 0.25s ease-out; }
.olControlZoomIn:hover, .olControlZoomOut:hover { background: #EC1A2C; color: #FFFFFF; }


.logo { position: absolute; right: 0em; bottom: 3em; width: 210px; height: 25px; z-index: 11; box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); }
.logo a { color: inherit; display: block; }
.logo a img { width: 100%; border: 0em; outline: 0em; }


.kaartkeuze { position: absolute; top: auto; right: 0em; bottom: 105px; left: auto; width: 315px; height: 165px; padding: 1.5em 2em 0em 1.5em; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 12; background: rgba(255,255,255,0.93); box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); }
.kaartkeuze h2 { margin-bottom: 1.1em; }
.kaartkeuze p { margin: 0.5em 0em 0em 0em; } 
.kaartkeuze label { max-width: 50px; }
#legend-container { width: 115px; height: 140px; position: absolute; top: 1.15em; right: 0.3em; }
#legend1 { position: relative; width: 100%; height: 100%; line-height: 0px; right: 0px; margin: 12px 0px 0px 0px; }
#legend1 .colour-bar { width: 29px; height: 120px; background: url(/images/colour-bar-2020.png) no-repeat 0px 0px; position: absolute; top: -1px; left: 0px; }
#legend1 .legend-value { position: absolute; top: 55px; left: 40px; -webkit-transform: rotate(-90deg); -webkit-transform-origin: 50% 50%; -moz-transform: rotate(-90deg); -moz-transform-origin: 50% 50%; -ms-transform: rotate(-90deg); -ms-transform-origin: 50% 50%; transform: rotate(-90deg); transform-origin: 50% 50%; }
#legend1 .mark1 { position: absolute; left: 35px; top: 0px; }
#legend1 .mark2 { position: absolute; left: 35px; top: 24px; }
#legend1 .mark3 { position: absolute; left: 35px; top: 48px; }
#legend1 .mark4 { position: absolute; left: 35px; top: 72px; }
#legend1 .mark5 { position: absolute; left: 35px; top: 96px; }
#legend1 .mark6 { position: absolute; left: 35px; top: 120px; }
#legend2 { position: relative; width: 100%; height: 100%; line-height: 0px; right: 0px; margin: 26px 0px 0px 0px; }
#legend2 .colour-bar { width: 29px; height: 120px; background: url(/images/colour-bar-zones-2020.png) no-repeat 0px 0px; position: absolute; top: 0px; left: 0px; }
#legend2 .mark1 { position: absolute; left: 35px; top: 12px; }
#legend2 .mark2 { position: absolute; left: 35px; top: 19px; }
#legend2 .mark3 { position: absolute; left: 35px; top: 44px; }
#legend2 .mark4 { position: absolute; left: 35px; top: 50px; }
#legend2 .mark5 { position: absolute; left: 35px; top: 76px; }
#legend2 .mark6 { position: absolute; left: 35px; top: 107px; }


@media screen and (max-width: 1500px), screen and (max-height: 800px) { 
  body { font-size: 80%; }
  #slides, h1, .page-nav { width: 23%; }
  .ui-slider .ui-slider-handle { margin-top: 12px; width: 24px; height: 12px; }
  .ui-slider .ui-slider-handle:before { top: -9px; border-width: 0px 12px 9px 12px; }
  .ui-slider-horizontal .ui-slider-handle { margin-left: -12px;  }
  .kaartkeuze { width: 295px; }
  #legend-container { width: 110px; } }
@media screen and (max-width: 1280px), screen and (max-height: 650px) { 
  body { font-size: 70%; }
  #slides, h1, .page-nav { width: 25%; }
  .ui-slider .ui-slider-handle { margin-top: 11px; width: 22px; height: 11px; }
  .ui-slider .ui-slider-handle:before { top: -8px; border-width: 0px 11px 8px 11px; }
  .ui-slider-horizontal .ui-slider-handle { margin-left: -11px;  }
  .kaartkeuze { width: 265px; } 
  #legend-container { width: 100px; } }
@media screen and (max-width: 1024px), screen and (max-height: 570px) { 
  #slides, h1, .page-nav { width: 28%; } }
@media screen and (max-width: 900px), screen and (max-height: 560px) { 
  #slides, h1, .page-nav { width: 32%; } }
@media screen and (max-width: 800px), screen and (max-height: 550px) { 
  #slides, h1, .page-nav { width: 37%; } }
@media screen and (max-width: 700px), screen and (max-height: 540px) { 
  #slides, h1, .page-nav { width: 43%; } }
@media screen and (max-width: 600px), screen and (max-height: 530px) { 
  .logo { display: none; }
  .kaartkeuze { bottom: 0px; }
  #slides, h1, .page-nav { width: 50%; } }
  
  
  
  
#div_geschiktheid { display:inline; };

 
.olImageLoadError { display: none !important; }