:root {
    --title-block-height: 50px; /*74px;*/
    --menu-block-width: 200px;
    --descr-block-width: 550px;
}


body {
    background-color: #EEEEEE;
    font-family: Arial, SansSerif;
    overflow-x: hidden;
}

.pageblock {
    border: 0px solid #73AD21;
    box-shadow: 3px 3px 5px #888888;
    background-color: #FFFFFF;
    padding: 5px;
}

#pageblock_title {
    position: fixed; /*absolute;*/
    z-index: 9999;
    top: 10px;
    left: 10px;
    width: calc(100% - 30px);
    height: var(--title-block-height);
}

#pageblock_title #ruglogo {
    position: absolute;
    left: 25px;
    top: calc(var(--title-block-height) / 2);
    transform: translate(0,-30px);
}

#pageblock_title #geologo {
    position: absolute;
    right: 85px;
    top: calc(var(--title-block-height) / 2);
    transform: translate(100%,-30px);
}

@media only screen and (max-width: 850px) {
    #pageblock_title #ruglogo {
        visibility: hidden;
    }
}

@media only screen and (max-width: 350px) {
    #pageblock_title #geologo {
        visibility: hidden;
    }
}



#pageblock_title div {
    position: absolute;
    left: 50%;
    top: calc(var(--title-block-height) / 2);
    transform: translate(-50%,-50%);
}

#pageblock_left button {
    width: calc(var(--menu-block-width) - 0px);
    padding: 0.5em;
    margin: 0.5em 0;
}

#pageblock_left {
    position: absolute;
    top: calc(var(--title-block-height) + 30px);
    left: 10px;
    width: var(--menu-block-width);
    height: auto;
}

#pageblock_right {
    position: absolute;
    top: calc(var(--title-block-height) + 30px);
    right: 10px;
    width: calc(100% - 50px - var(--menu-block-width));
    height: auto;
    text-align: center;
}

#pageblock_demos {
    position: absolute;
    top: calc(var(--title-block-height) + 30px);
    left: 10px;
    width: calc(100% - 30px);
    height: auto;
    text-align: center;
}





.demoblock {
    display: inline-block;
    width: 600px;
    height: 400px;
    border: 1px solid #808080;
    padding: 0px;
    margin: 10px;
    cursor: pointer;
}
.demoblock_content {
    width: 600px;
    height: 400px;
}

.demoblock_title {
    margin: -60px;
}

.demoblock_title h1 {
    display: inline-block;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.7);
    padding: 0.5em;
}


#pageblock_img{
    z-index: 999;
    /*visibility: hidden;*/
    position: absolute;
    top: calc(var(--title-block-height) + 30px);
    left: 10px;
    /*
    width: calc(100% - 30px);
    */
    width: calc(100% - 50px - var(--descr-block-width));

    height: calc(100% - 50px - var(--title-block-height));
}

#pageblock_menu {
    position: absolute;
    top: calc(var(--title-block-height) + 30px);
    right: 10px;
    width: calc(var(--descr-block-width) - 20px);
    height: calc(100% - 70px - var(--title-block-height));
    padding: 15px;
    font-size: 125%;
}

#menu_text {
    display: block;
    background-color: transparent;
    height: calc(100% - 100px);/*calc(100% - 70px - var(--title-block-height));*/
    overflow-y: scroll;
}



#demodiv_close {
    z-index: 9999;
    position: absolute;
    top: calc(var(--title-block-height) + 35px);
    /* tonen midden bovenin de demodiv_web als er geen descr is
    right: calc(50% + 16px);
    */
    right: 15px;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(img/button_close.svg);
    cursor: pointer;
}
#demodiv_close:hover {
    background-color: rgba(255, 0, 0, 0.25);
    background-image: url(img/button_close.svg);
    cursor: pointer;
}

.img_large {
    text-align: center;
    margin: 35px 0 0 0;
}



.openseadragon {
    width:      100%;
    height:     100%;
    border:     0px solid black;
    color:      #333; /* text color for messages */
    background-color: transparent;
}

.openseadragon .displayregion {
    width: 244px;
    height: 164px;
}


.filterlink {
    display: block;
    width: 90%;
    border: 1px solid #000000;
    text-decoration: none;
    padding: 0.5em;
    margin: 0px;
}