/** NAVBAR **/
/** FULL SIZE NAV **/

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

@media (max-width: 1199px) {


    .megamenuwrap {
        display: none !important
    }

    #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:not(.menuheader),
    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;
        overflow: auto;
        transition: right ease .3s;
        text-align: left;
        width: 450px;
        right: -500px;
        /*transform: skewX(-5deg);*/
        transform-origin: bottom right;
        border: 0;
        box-shadow: 0 0 15px rgb(0 0 0 / 0);
        background: var(--lightgrey);

    }

    body.menuopen .mobilenav {
        box-shadow: 0 0 15px rgb(0 0 0 / 25%);
    }


    .mobilenav .gradientholder {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--gold);
        overflow: hidden
    }

    /*
        .mobilenav > .row {
            transform: skewX(5deg);
        }*/
    .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: var(--black);
    }

    .mobilenav .menubtn a {
        text-align: center !important;
        margin-top: 2rem;
        line-height: 1.4;
    }

    .mobilenav li.loginbtn a {
        border: 1px solid #fff;
        line-height: 1.4;
    }

    .mobilenav .form-group label {
        font-weight: bold;
    }

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

    .mobilenav.in {
        display: table;
    }

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

    .mobilenav ul.clearfix > 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 {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
        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: var(--black)
    }

    .mobilenav li.menubtn a {
        color: var(--white)
    }

    .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 {
        font-weight: bold;
    }


    .menuicon {
        z-index: 99999;
        position: relative;
        display: block;
        padding: 12px 0px;
        height: 45px;
        width: 30px;
        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: #222;
        border: 1px solid #222;
    }


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

    }

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

    /*.mid-animate {

      top: 3px !important; border:4px solid var(--black);
      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);
    }

    body.menuopen {
        overflow: hidden
    }

}


@media (max-width: 768px) {
    .mobilenav {
        width: 50vW;
        max-width: 50vW;
        right: -50vw;

    }

    body.menuopen .meta,
    body.menuopen header:not(.menuheader),
    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: 80vW;
        max-width: 80vW;
        right: -80vw;
    }

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