.menu-opener-inner {
    display: none;
}

nav.menu-opener {
    display: none;
}

nav.menu {
    display: none;
}

ul.menu-inner a {
    display: block;
    width: 93%;
    height: 100%;
    text-decoration: none;
}

    ul.menu-inner a:focus {
        border: 0px solid #a0c3fa !important;
    }

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active {
    -webkit-transition: 250ms all;
    transition: 250ms all;
}

.menu-opener {
    cursor: pointer;
    height: 45px;
    position: absolute;
    /*top: 2%;*/
    left: 1%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 45px;
    z-index: 3;
}

    .menu-opener:hover, .menu-opener.active {
        background: #9D0000;
    }

.menu-opener-inner {
    background: #fff;
    height: 5px;
    margin-left: .75rem;
    margin-top: 1.75rem;
    width: 25px;
}

    .menu-opener-inner::before, .menu-opener-inner::after {
        background: white;
        content: '';
        display: block;
        height: 5px;
        width: 25px;
    }

    .menu-opener-inner::before {
        -webkit-transform: translateY(-0.75rem);
        -ms-transform: translateY(-0.75rem);
        transform: translateY(-0.75rem);
    }

    .menu-opener-inner::after {
        -webkit-transform: translateY(0.25rem);
        -ms-transform: translateY(0.25rem);
        transform: translateY(0.25rem);
    }

    .menu-opener-inner.active {
        background: transparent;
    }

        .menu-opener-inner.active::before {
            -webkit-transform: translateY(0rem) rotate(-45deg);
            -ms-transform: translateY(0rem) rotate(-45deg);
            transform: translateY(0rem) rotate(-45deg);
        }

        .menu-opener-inner.active::after {
            -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
            -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
            transform: translateY(-0.5rem) translateX(0rem) rotate(45deg);
        }

.menu {
    background: #9D0000;
    color: transparent;
    height: 64px;
    position: absolute;
    top: 0%;
    left: 0%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 0rem;
    z-index: 2;
}

    .menu.active {
        width: -webkit-calc(100% - 2rem);
        width: calc(100% - 2rem);
    }

        .menu.active .menu-link {
            color: white;
        }

.menu-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    height: 100%;
    list-style-type: none;
    margin: 0;
    margin-left: 4rem;
    padding: 10px 0;
}

.menu-link {
    color: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    font-size: 2rem;
    font-weight: 100;
    height: 100%;
    text-align: center;
    text-decoration: none;
    font-weight: 400;
}

    .menu-link li {
        margin: auto;
    }

@media screen and (max-width: 768px) {
    .card {
        height: 100%;
        padding: 10px 5px;
    }

    .menu-opener-inner {
        display: block;
    }

    nav.menu-opener {
        display: block;
    }

    nav.menu {
        display: block;
    }


    #tabhidde {
        display: none;
    }


    .container.container_body {
        margin-top: 125px;
    }

    .menu {
        height: auto;
    }

    .menu-inner {
        display: block;
    }

    .menu-link {
        padding: 10px 0;
        font-size: 1.2em;
        visibility: hidden;
    }

    .menu.active {
        width: -webkit-calc(100% - 0.0rem);
        width: calc(100% - 0.0rem);
    }

    nav.menu.active .menu-link {
        visibility: visible;
    }

    .menu-link {
        padding: 10px 0;
        font-size: 20px;
        visibility: hidden;
    }

        .menu-link a {
            text-decoration: none;
        }
}