/** FULL SIZE NAV **/

@media (min-width: 992px) {
    .mobilenav {
        display: none;
    }
}

@media (max-width: 991px) {
    @media (orientation: portrait) {
        header {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            transition: transform ease .25s;
        }
    }

    #secondNav .mainNav {
        padding: 5px 30px;
    }


    body.navaffix .menuicon {
        top: 0;
    }

    body.navaffix .menuicon, .menuicon {
        top: 0;
    }

    footer {
        margin-bottom: 0 !important
    }


    body #wrapper {
        transition: transform ease .3s;
    }

    body.menuopen .meta,
    body.menuopen header,
    body.menuopen .toplogo,
    body.menuopen #wrapper, body.menuopen header.fixed-top {
        transform: translateX(-450px);
        -webkit-transform: translateX(-450px);
        -moz-transform: translateX(-450px);
        -ms-transform: translateX(-450px);
        -o-transform: translateX(-450px);
        transform: translateX(-450px);
    }

    body.menuopen.navaffix #secondNav {
        transform: translateY(0) translateX(-450px);
        -webkit-transform: translateY(0) translateX(-450px);
        -moz-transform: translateY(0) translateX(-450px);
        -ms-transform: translateY(0) translateX(-450px);
        -o-transform: translateY(0) translateX(-450px);
        transform: translateY(0) translateX(-450px);
    }

    body.menuopen {
        overflow: hidden
    }


    body.menuopen .mobilenav {
        right: 0px;
    }

    .mobilenav {
        top: 0;
        bottom: 0;
        min-width: 140px;
        z-index: 999;
        padding: 3rem;
        position: fixed;
        height: 100%;
        overflow: auto;
        border-left: 2px solid #fff;
        transition: right ease .25s;
        text-align: left;
        width: 450px;
        right: -450px;
        background-color: var(--grey-dark);
        background: linear-gradient(180deg, #000000 0, var(--grey-dark) 300px, #000 1000px);
    }

    .mobilenav .search-form {
        margin-top: 50px;
    }

    .mobilenav .search-form input.btn {
        width: 40px;
        text-align: center;
        padding: 0;
    }

    .mobilenav .search-form input.btn:hover,
    .mobilenav .search-form input.btn:focus {
        color: #fff;
    }

    .mobilenav .table {
        display: table;
        margin-bottom: 0;
        height: 100%;
        width: 100%;
        max-width: 100%;
        padding: 50px 0
    }

    .mobilenav .form-group span,
    .mobilenav .form-control {
        display: block;
        width: 100% !important;
        color: #000;
    }

    .mobilenav .form-group label {
        color: var(--main-light-color)
    }

    .mobilenav .table .inner {
        display: table-cell;
        vertical-align: middle;
    }

    .mobilenav.in {
        display: table;
    }

    .mobilenav ul {
        margin: 0;
        padding: 0;
    }

    .mobilenav ul.clearfix:not(.usermenu) > li {
        display: block;
        width: 100%;
    }

    .mobilenav li {
        list-style-type: none;
        list-style-image: none;
        list-style: none;
        text-align: left;
        margin: 4px 0;
        position: relative;
        clear: both;
        z-index: 2;
    }

    .mobilenav li ul {

        display: none;
        padding: 0 0 0 15px;
        clear: both;
        width: 100%;
    }

    .mobilenav li ul:before, .mobilenav li ul:after {
        display: table;
        content: "";
        line-height: 0;
    }

    .mobilenav li.menu-item-has-children > a:after {
        display: inline-block;
        margin-left: auto;
        vertical-align: .255em;
        content: "";
        /* border-top: .3em solid;
         border-right: .3em solid transparent;
         border-bottom: 0;
         border-left: .3em solid transparent;*/
        right: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
        vertical-align: 0;
        content: "\f107";
        font-family: "Font Awesome 5 Pro";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        border: 0;
        margin-left: 5px;
    }

    .mobilenav li.parent-clicked ul, .mobilenav li.current-menu-parent ul {
        display: block
    }


    .mobilenav li ul:hover {
        opacity: 1;
    }

    .mobilenav li ul li ul li {
        position: relative;
    }

    .mobilenav li a {
        padding: 5px 15px;
        font-size: 1.4rem;
        display: block;
        text-decoration: none;
        position: relative;
        border-bottom: 2px solid transparent;
        color: #fff
    }

    .mobilenav li a {
        position: relative
    }

    .mobilenav li a:hover {
        color: #333
    }


    .mobilenav li ul li a {
        font-size: 90%;
        display: block;
    }

    .mobilenav li a.active, .mobilenav li.current-menu-item > a, .mobilenav li.current-menu-parent > a, .mobilenav li:hover > a {
        color: var(--blue)
    }


    .menuicon {
        z-index: 99999;
        position: relative;
        display: block;
        padding: 12px 11px;
        height: 45px;
        width: 45px;
        margin: 0px;
        top: 0px;
        right: 0;
    }


    .menui {
        transition: transform ease 0.3s;
        position: absolute;
        width: 16px;
        height: 1px;
        border-radius: 0;
        transform: translate(-50%, -50%);
        background-color: var(--white);
        border: 1px solid var(--white);;
    }


    .top-menu {
        top: 40%;
        left: 50%;

    }

    .mid-menu {
        top: 50%;
        left: 50%;
    }

    /*.mid-animate {

      top: 3px !important; border:4px solid #000;
      border-radius: 50%; width:25px; height:25px; background:transparent;
    }*/
    .bottom-menu {
        top: 60%;
        left: 50%;
    }


    body.menuopen .top-menu {
        top: 50%;

        border-color: var(--blue) !important;
        background-color: var(--blue) !important;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
    }

    body.menuopen .mid-menu {
        opacity: 0;
    }

    body.menuopen .bottom-menu {
        top: 50%;
        border-color: var(--blue) !important;
        background-color: var(--blue) !important;
        -webkit-transform: translateY(-50%) rotate(-225deg);
        transform: translate(-50%, -50%) rotate(-225deg);
    }

    .mobilenav ul.sidepanelmobile i {
        width: 30px;
        height: 30px;
        color: var(--blue)
    }

    .mobilenav ul.sidepanelmobile li.seperator {
        margin-bottom: 15px;
    }

    .mobilenav ul.sidepanelmobile li.seperator:After {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 7px);
        border-bottom: 1px solid var(--grey)
    }

    .mobilenav ul.sidepanelmobile li {
        list-style: none;
        width: 100%;
        height: 40px;
        white-space: nowrap;
        line-height: 40px;
        color: var(--grey-light);
        position: relative;
    }
	
	.mobilenav .usermenu li a {
    padding: 5px;
}

}

@media (max-width: 768px) {
    .mobilenav {
        width: 50vW;
        max-width: 50vW;
        right: -50vw;
        border-left: 1px solid var(--grey);
    }

    body.menuopen .meta,
    body.menuopen header,
    body.menuopen #wrapper, body.menuopen header.fixed-top {
        transform: translateX(-50vw);
        -webkit-transform: translateX(-50vw);
        -moz-transform: translateX(-50vw);
        -ms-transform: translateX(-50vw);
        -o-transform: translateX(-50vw);
        transform: translateX(-50vw);
    }

    body.menuopen.navaffix #secondNav, body.menuopen header.fixed-top {
        transform: translateY(0) translateX(-50vw);
        -webkit-transform: translateY(0) translateX(-50vw);
        -moz-transform: translateY(0) translateX(-50vw);
        -ms-transform: translateY(0) translateX(-50vw);
        -o-transform: translateY(0) translateX(-50vw);
        transform: translateY(0) translateX(-50vw);
    }
}


@media (max-width: 576px) {
    .mobilenav {
        width: calc(80vw - 30px);
        max-width: calc(80vw - 30px);
        right: calc((80vw - 30px) * -1);
    }

    body.menuopen .meta,
    body.menuopen header,
    body.menuopen #wrapper, body.menuopen header.fixed-top {
        -webkit-transform: translateX(calc((80vw - 30px) * -1));
        -moz-transform: translateX(calc((80vw - 30px) * -1));
        -ms-transform: translateX(calc((80vw - 30px) * -1));
        -o-transform: translateX(calc((80vw - 30px) * -1));
        transform: translateX(calc((80vw - 30px) * -1));
    }
}