html, body {
    width: 100%;
    height: 100%;
    background-color: #1d1f21;
    font-size: 1em;
    color: #fcfcfc;
    /*overflow: hidden;*/
}
body {
    position: relative;
    /*margin: 0;
    display: block;*/
}

body .maincontainer {
    min-height: 100vh;
    /*margin: 0 auto;*/
    position: relative;
    display: block;
    padding-bottom: 0px;
    overflow: hidden;
}

* {
    font-family: 'open sans', 'lato', 'helvetica', sans-serif;
}

a {
    text-decoration: none;
    color: #a1a1a1;
}
a:hover {
    color: #afafaf;
}

a#logo {
    outline: none;
}

.header-link {
    display: inline-block;
    margin: 10px 7px;
    font-size: 1.7em;
}

.row {
    overflow: hidden;
}

.lower_content_row {
    margin-bottom: 5em;
}
.footer_row {
    position: absolute;
    width: 100%;
    height: 2em;
    right: 0;
    left: 0;
    bottom: 0;
    margin-bottom: 0.3em;
}

.footer_row img,
.footer_row svg {
    width: 32px;
    height: 32px;
    outline: none;
    margin: 0 0.3em 0 0.3em;
}
.footer_row a {
    outline: none;
}

.footer_row img:hover,
.footer_row svg:hover {
    fill: #fff;
}

a.header_anchor {
    color: #fff;
    font-size: 2em;
    text-align: center;
    display: block;
    padding: 0.5em 0 0.5em 0;
    text-decoration: underline;
}
a.header_anchor:hover {
    color: #fff;
}
a.header_anchor.left {
    text-align: left;
}

.topicheader {
    border-bottom: 1px solid;
}
.topicheader.withinfo {
    margin-bottom: 1px;
}
.topicheader.withinfo ~ .topicinfo {
    margin-bottom: 10px;
    font-style: italic;
    font-size: 0.9em;
}

#ico_rss {
    float: right;
}

/*hidden menu */

.maincontainer input#dummycheck ~ div label#closemenulabel {
    visibility: hidden;
    opacity: 0;
}
.maincontainer input#dummycheck ~ div label#openmenulabel {
    visibility: visible;
}

label.dummy-label {
    display: none;
}

.maincontainer input#dummycheck {
    display: block;
    width: 32px;
    height: 28px;
    position: fixed;
    top: 14px;
    left: 23px;
    cursor: pointer;
    opacity: 0;
    z-index: 3;
    -webkit-touch-callout: none;
}

@keyframes closebutton {
    0%      { transform: rotate(0deg); left: 20px;}
    10%     { transform: rotate(-10deg); left: 10px; }
    20%     { transform: rotate(-15deg); left: 0px; }
    30%     { transform: rotate(-20deg); left: -10px; }
    40%     { transform: rotate(-25deg); left: -20px; }
    50%     { transform: rotate(-30deg); left: -35px; }
    60%     { transform: rotate(-35deg); left: -40px; }
    70%     { transform: rotate(-40deg); left: -45px; }
    80%     { transform: rotate(-45deg); left: -50px; }
    90%     { transform: rotate(-50deg); left: -55px; }
    94%     { transform: rotate(-55deg); left: -60px; }
    100%    { transform: rotate(-60deg); left: -65px;  }
}

@media (max-width: 870px) {
    .tree {
        display: none;
        z-index: 1;
    }
    #menu_toggle {
        position: fixed;
    }
    #menu_background {
        width: 220px;
        display: block;
        position: fixed;
        background-color: #1d1f21;
        height: 100%;
        z-index: 1;
        top: 0px;
        left: -220px;
        overflow: auto;
    }
    .upper_content_row #menu_background .menucolumn .tree {
        position: fixed;
    }
    .maincontainer input#dummycheck:hover ~ div .dummy-label {
        opacity: 1;
        color: #fff;
    }
    .maincontainer input#dummycheck:checked ~ div .dummy-label {
        animation: closebutton 0.4s ease-in;
        animation-iteration-count: 2;
        animation-delay: 0s;
        animation-direction: alternate;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .maincontainer input#dummycheck:checked ~ div label#closemenulabel {
        visibility: visible;
        opacity: 1;
        transition: visibility 0.4s, opacity 0.5s ease-in;
    }
    .maincontainer input#dummycheck:checked ~ div label#openmenulabel {
        visibility: hidden;
        transition: visibility 0.4s;
    }

    .maincontainer input#dummycheck:checked ~ .upper_content_row .menucolumn .tree {
        display: block;
        margin-top: 70px;
    }
    .maincontainer input#dummycheck:checked ~ .upper_content_row .menucolumn #menu_background {
        left: 10px;
        transition: left 0.4s linear 0.4s;
    }
    .maincontainer span.hamburger_line {
        display: block;
    }
    #menu_toggle:hover span.hamburger_line {
        background: #fff;
    }
    #welcome, #reports {
        text-align: center;
    }
    label.dummy-label {
        display: block;
        font-size: 4em;
        position: fixed;
        top: -10px;
        z-index: 2;
        color: rgba(181, 184, 189, 0.65);
    }
}