@font-face{ font-family: 'Museo700-Regular'; src: url('fonts/Museo700-Regular.woff2') format('woff2'), url('fonts/Museo700-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face{ font-family: 'Museo500-Regular'; src: url('fonts/Museo500-Regular.woff2') format('woff2'), url('fonts/Museo500-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face{ font-family: 'Museo300-Regular'; src: url('fonts/Museo300-Regular.woff2') format('woff2'), url('fonts/Museo300-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html{
    font-family: 'Museo500-Regular';
    margin: 0;
    padding:0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    position: relative;
    padding:0;
    margin:0; 
}
main.infographic{
    display:block; 
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* background: yellow; */ 
}
main.infographic figure{
    /* Center vertically + horizontally with flexbox */
    display: flex;
    flex-direction: column;
    /* 
    justify-content: center; 
    align-items: center; 
    */
    padding: 0;
    min-height: 100%;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
figure svg{
    width: 100%;
    height: auto;
}
svg #clickable > g{
    cursor: pointer;
}
svg #clickable > g:hover > rect{
    fill: #905b38;
}

#info-popup-page-overlay{ display: none;}
#info-popup-page-overlay.on{
    display: block;
    z-index: 2000;
    position: fixed;
    top: 0px;
    bottom:0;
    left: 0px;
    right: 0;
    background: rgba(0,0,0,0.5);
}
#imagemap-popup{
    display: none;
    z-index: 3000;
    color: #482a20;
    font-size: 16px;
    background: #f1f0f2;
    max-width: 500px;
    width: calc(100% - 20px);
    padding: 25px;
    border-radius: 28px;
    margin:0 auto;
    top:50%;
    position: absolute;
    left:0;
    right:0;
    margin-top: -100px;
}
#imagemap-popup-content h2{
    margin-top:0;
}
#imagemap-popup-content p{
    margin: 0.5em 0; 
}

#imagemap-popup.on{ display: block; }
.modal-content{
    display: none;
}
#imagemap-popup-close{ top: -25px; position: absolute; right: 0px; color: #e1bd5f; font-size: 18px;}
#imagemap-popup-close:hover{ cursor: pointer; }

.st0{fill:none;stroke:#E1BD5F;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#4C9E00;}
.st2{fill:#E1BD5F;}
.st3{fill:#D5AE53;}
.st4{fill:none;stroke:#4C9E00;stroke-width:10;stroke-miterlimit:10;}
.st5{fill:none;stroke:#808080;stroke-width:6;stroke-miterlimit:10;}
.st6{fill:#808080;}
.st7{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}
.st8{fill:#FFFFFF;}
.st9{fill:none;stroke:#E5E5E5;stroke-width:6;stroke-miterlimit:10;}
.st10{fill:#E5E5E5;}
.st11{fill:none;stroke:#333333;stroke-width:6;stroke-miterlimit:10;}
.st12{fill:#333333;}
.st13{fill:none;stroke:#000000;stroke-width:6;stroke-miterlimit:10;}
.st14{fill:none;stroke:#595959;stroke-width:6;stroke-miterlimit:10;}
.st15{fill:#595959;}
.st16{fill:#E8CD87;}
.st17{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{fill:#482B17;}
g:hover {
    cursor:pointer;
}
g:hover .st18,
.st18:hover{
    fill:#905b38;
    cursor:pointer;
}
.st19{font-family:'Arial', 'Times New Roman', sans-serf;}
.st20{font-size:37px;}
.st21{font-family:'Museo300-Regular';}
.st22{font-size:22px;}
.st23{fill:#D71D21;}
.st24{font-family:'Museo700-Regular';}
.st25{font-size:36px;}
.st26{fill:none;stroke:#465F70;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;}
.st27{fill:#465F70;}
.st28{font-family:'Museo700-Regular';}

@media screen and (max-width: 500px){
    #imagemap-popup{
        top: 50% !important;
    }
}