/* Smartphones (portrait & landscape) ----------- */
@media only screen and (max-device-width: 823px) and (min-device-width: 320px) {
    .logo, .headright {
        width: auto;
        margin: 0;
    }

    .button {
        width: 100%;
        flex: none;
        margin: 9px 0;
    }

    input[type=text], input[type=password], .captcha {
        margin: 5px 0;
        flex: none;
        width: 49% !important;
        border: none !important;
        margin-left: 3px;
        border-radius: 0;
    }

    .scrolltextright, .homepage-left, .homepage-right, .game a:last-child {
        width: 100%;
        margin-top: 5px;
    }

    .game a:first-child, .game a:nth-child(2) {
        width: 49%;
    }

    .scrolltextleft {
        width: 15%;
    }

    .contact a, .contact a:last-child {
        margin: 2px 0;
    }

    .nav a {
        flex: none;
        font-size: 20px;
        width: 100%;
        padding: 10px 0;
        border-right: none;
        border-bottom: 1px solid #0098c3;
    }

    .nav {
        height: auto;
    }
    /*responsive nav*/
    .toggle, label.lbl-toggle {
        color: #000;
        position: relative;
        display: block;
        background: #0090b9;
        /* width: 100%; */
    }

    input[type='checkbox'] {
        display: none;
    }

    .wrap-collabsible {
        margin: 0;
        border-radius: 0px;
        margin-top: 15px;
    }

    .lbl-toggle {
        display: block;
        font-weight: bold;
        font-size: 18px;
        text-transform: uppercase;
        text-align: left;
        padding: 15px 10px;
        cursor: pointer;
        transition: all 0.25s ease-out;
    }

        .lbl-toggle:hover {
            color: #000;
        }

        .lbl-toggle::after {
            position: absolute;
            bottom: auto;
            top: auto;
            margin-top: 0;
            margin-bottom: 0;
            right: 15px;
            content: "\f0c9";
            font-family: "Font Awesome 5 Free";
            transform: translateY(-2px);
            transition: transform .2s ease-out;
        }

    .toggle:checked + .lbl-toggle::after {
        content: "\f057";
        transform: rotate(90deg) translateX(-3px);
    }

    .collapsible-content {
        max-height: 0px;
        overflow: hidden;
        transition: max-height .25s ease-in-out;
    }

    .toggle:checked + .lbl-toggle + .collapsible-content {
        max-height: 600px;
        position: relative;
        z-index: 99;
    }

    .collapsible-content .content-inner {
    }
}