@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;
    width: 95%;
    max-width: 500px;
    padding: 25px;
    border-radius: 28px;
    margin:0 auto;
    top:150px;
    position: fixed;
    left:0;
    right:0;
}
#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; }