html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

p {
    font-size: 96%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

div {
}

.border {
    border: 1px solid red;
}

.vp {
    width: 100%;
}

.vw {
    padding: 10px;
}

.float .col {
    display: block;
}

.float .row {
    display: block;
    width: 100%;
}

.float .nav li {
    list-style-type: none;
}

.float .nav {
    -webkit-user-select: none;
    user-select: none;
    z-index: 999997;
}


@media only screen and (max-width: 900px) {
    
    .float .nav {
        text-align: center;
        line-height: 3;
    }
    
    .float .nav ul li {
        font-size: 150%;
        font-weight: bold;
    }
    
    .float .nav .menu-item li {
        font-size: 100%;
        font-weight: normal;
        line-height: 1.5;
    }
    
    .float .nav {
        position: fixed;
        max-height: 100%;
        overflow-y: auto;
    }
    
    /*.float .nav > ul {
        background-color: white;
        padding: 0px 20px;
        height: 0px;
        visibility: collapse;
        opacity: 0;
        width: 100%;
        list-style-type: none;
        z-index: 999997;
        -webkit-font-smoothing: antialiased;
        -webkit-transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
        -moz-transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
        -o-transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
        transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
    }*/
    
    .float .nav {
        background-color: white;
        padding: 0px 20px;
        height: 0px;
        /*display: none;*/
        visibility: collapse;
        opacity: 0;
        width: 100%;
        list-style-type: none;
        z-index: 999997;
        -webkit-font-smoothing: antialiased;
        -webkit-transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
        -moz-transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
        -o-transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
        transition: opacity 0.3s ease, padding 0.3s ease, height 0.3s ease;
    }
    
    .float input[type=checkbox].mainnav {
        display: block;
        width: 48px;
        height: 48px;
        position: fixed;
        top: 0;
        right: 0;
        cursor: pointer;
        opacity: 0;
        z-index: 999999;
        -webkit-touch-callout: none;
    }

    .float input[type=checkbox].mainnav + span {
        position: fixed;
        top: 22px;
        right: 8px;
        width: 32px;
        height: 4px;
        display: block;
        background-color: white;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 2px 2px #555555, 0 -10px white, 2px -8px #555555, 0 10px white, 2px 12px #555555;
        -moz-box-shadow: 2px 2px #555555, 0 -10px white, 2px -8px #555555, 0 10px white, 2px 12px #555555;
        box-shadow: 2px 2px #555555, 0 -10px white, 2px -8px #555555, 0 10px white, 2px 12px #555555;
        z-index: 999998;
        transition: box-shadow 0.3s ease;
    }

    .float input[type=checkbox].mainnav:checked + span {
        -webkit-box-shadow: 2px 2px #555555;
        -moz-box-shadow: 2px 2px #555555;
        box-shadow: 2px 2px #555555;
    }

    /*.float input[type=checkbox]:checked ~ ul {
        visibility: visible;
        height: auto;
        opacity: 1;
        padding: 40px 20px;
    }*/
    
    .float input[type=checkbox].mainnav:checked ~ .nav {
        visibility: visible;
        /*display: block;*/
        height: auto;
        opacity: 1;
        padding: 40px 20px;
        z-index: 999997;
    }

    .clickhide, .sub-men {
        visibility: collapse;
        height: 0;
        padding: 0px;
        transition: padding 0.3s ease;
    }
    
    .clickshow {
        visibility: visible;
        height: auto;
        padding: 1px;
    }
    
}

@media only screen and (min-width: 901px) {
    
    p {
        font-size: 100%;
    }

    .float .row {
        display: inline-block;
        /*overflow-y: hidden;
        overflow-x: auto;*/
        white-space: nowrap;
    }

    .float .stack {
        white-space: normal;
    }

    .float .row > div {
        display: inline-block;
        margin-right: 0px;
    }

    .float .row > div:last-child {
        margin-right: 0;
    }
    
    .float .nav {
        position: fixed;
    }
    
    .float input[type=checkbox].mainnav {
        display: none;
    }
    
    .float input[type=checkbox].mainnav + span {
        display: none;
    }

    .float .row > ul > li {
        display: inline-block;
    }
    
    .float .nav > ul {
        visibility: visible;
        opacity: 1;
        display: inline-block;
        position: relative;
        width: initial;
    }
    
    .float .nav > ul.center {
        display: table;
    }
    
    .nav span.burger {
        display: none !important;
    }
    
}

.float .center {
    display: table;
    margin: 0 auto;
}

.flex * {
    display: flex;
}

.flex .col {
    display: flex;
    flex-flow: column nowrap;
}

.flex .row {
    display: flex;
    flex-flow: row nowrap;
}

.flex .center {
    justify-content: center;
    align-items: center;
}

.flex .vw1 {
    flex-grow: 1;
}

.flex .vw2 {
    flex-grow: 2;
}

.flex .vw3 {
    flex-grow: 3;
}

.flex .vw4 {
    flex-grow: 4;
}

.flex .vw5 {
    flex-grow: 5;
}

.flex .vw6 {
    flex-grow: 6;
}

.flex .vw7 {
    flex-grow: 7;
}

.screen {
    width: 100%;
    height: 100vh;
    overflow: auto;
}

.float .ribbon {
    width: 100%;
}

.flex .ribbon {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    top: 0;
}

.content {
    display: none;
}

.content:target {
    display: flex;
}

.flex .fill {
    flex-grow: 2;
    height: 100%;
    width: 100%;
}


.sticky {
    position: -webkit-sticky;
    position: sticky;
}

.fixed {
    position: fixed;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

[class*="block"] {
    width: 100%;
}

@media only screen and (min-width: 901px) {

.block1 {
    width: 100%;
    height: 100vw;
    white-space: normal;
    overflow: hidden;
}

.block2 {
    width: 50%;
    height: 50vw;
    white-space: normal;
    overflow: hidden;
}

.block3 {
    width: 33.33%;
    height: 33.33vw;
    white-space: normal;
    overflow: hidden;
}

.block4 {
    width: 25%;
    height: 25vw;
    white-space: normal;
    overflow: hidden;
}

.block5 {
    width: 20%;
    height: 20vw;
    white-space: normal;
    overflow: hidden;
}
    
}

.vfill80 {
    height: 80%;
}

.vfill60 {
    height: 60%;
}

.vfill40 {
    height: 40%;
}

.vfill30 {
    height: 30%;
}

.vfill20 {
    height: 20%;
}

.vfill10 {
    height: 10%;
}

.hfill30 {
    width: 30%;
}

.hfill {
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

div[class*="fill"]:empty::before {
    content: "";
}

.noscroll {
    overflow: hidden;
}

.hidden {
    display: none;
}