@charset "UTF-8";

.x-mega-menu {
    display: grid;
    /* grid-auto-columns:minmax(0,1fr); */
    grid-auto-flow: column;
    list-style: none;
    padding: 0px 2px;
    margin: 0px;
}

li#x-toggle {
    color: rgba(0, 0, 0, .5);
    border-color: rgba(0, 0, 0, .1);
    background: #fff;
    padding: 2px 8px;
    margin-right: 10px;
    border-radius: 5px;
}
    .x-mega-menu.x-fixed-top
    /* {position:fixed;
top:0;
left:0;
right:0;
z-index:98
} */
    .site-header .fixed nav.navbar.navbar-expand-xl.navbar-light.justify-content-between {
        padding: 0px 100px;
    }

    .x-mega-menu > li {
        transition: .3s;
        font-size: 12pt;
        font-weight: 100;
        text-align: center;
        color: #fff;
        cursor: pointer;
        grid-column: span 2
    }

        .x-mega-menu > li.x-has-sub-menu a:after, .x-mega-menu > li.x-has-sub-menu span:after {
            /* content:'⌄';
    position:relative;top:-3px */
        }

        .x-mega-menu > li.x-has-image a, .x-mega-menu > li.x-has-image span {
            padding: 1px;
            height: 49px
        }

        .x-mega-menu > li.x-has-image img {
            max-height: 30px;
            max-width: 100vh;
            display: block;
            margin: 2px auto
        }

        .x-mega-menu > li.x-small {
            grid-column: span 1
        }

.same-align h4 {
    width: auto;
    color: #ffffff88;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px dotted #ffffffb6;
    padding-bottom: 5px;
    margin-left: 5px;
    font-size: 18px;
}

.x-mega-menu > li {
    color: #fff;
}

.site-header.fixed .x-mega-menu > li {
    color: #000;
}

.site-header.fixed {
    padding: 0;
}

    .site-header.fixed .x-sub-menu {
        top: 142px !important;
    }
/* .same-align h4::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background: #ccc;
    top: 31px;
    left: 0px;
    
} */
/* .x-has-sub-menu ul, li {
    max-width: 1240px;
    margin: auto;
    margin: 5px auto;
} */
.x-mega-menu > li {
    padding: 43px 0;
}

    .x-mega-menu > li.x-active a:before, .x-mega-menu > li.x-active span:before, .x-mega-menu > li:hover a:before, .x-mega-menu > li:hover span:before {
        width: 100%;
        opacity: 1
    }

    .x-mega-menu > li ul {
        display: none
    }

    .x-mega-menu > li a, .x-mega-menu > li span {
        position: relative;
        text-decoration: none;
        color: #fff;
        padding: 1em;
        display: block;
        text-transform: uppercase;
    }

        .x-mega-menu > li a:before, .x-mega-menu > li span:before {
            height: 2px;
            content: ' ';
            position: absolute;
            right: 0;
            width: 0;
            bottom: 0;
            transition: .4s;
            transition-delay: 0.1s;
            opacity: .5;
            background: #fff;
            top: 42px;
        }

.x-sub-menu {
    /* background:#ff0000; */
    color: #fff;
    width: auto;
    transform: scaleY(0) translateY(-50%);
    transition-timing-function: ease-out;
    transition: .7s;
    opacity: 0;
    position: absolute !important;
    z-index: 99;
    margin-bottom: 0 !important;
    /* top:141px !important; */
}

    .x-sub-menu h3 {
        border-bottom: 1px solid #eee;
        margin-bottom: 12px;
        color: #222;
        transition: 333ms
    }

.same-align {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    background: #1f4286;
    padding: 20px;
    height: 400px;
    overflow: auto;
    border-radius: 0px 0px 10px 10px;
    /* box-shadow:0 3px 7px #00000083; */
}

    .same-align ul {
        min-width: 280px;
        max-width: 1240px;
        margin-right: 2rem;
    }

        .same-align ul li a {
            color: #fff;
            font-size: 15px;
        }

    .same-align .inner-list {
        width: auto;
        margin-bottom: 15px;
    }

.x-sub-menu h3:hover {
    color: #151515
}

.x-sub-menu li {
    list-style: none;
    position: relative
}

    .x-sub-menu li li {
        /* border-bottom:#fff 1px solid; */
    }

        .x-sub-menu li li a, .x-sub-menu li li span {
            padding: 3px 3px;
            transition: .4s;
            display: block
        }

            .x-sub-menu li li a:hover, .x-sub-menu li li span:hover {
                /* transform:translateX(20px) */
                color: #ffffffb4;
            }

        .x-sub-menu li li ul {
            display: none
        }

    .x-sub-menu li a {
        padding: 1.2em;
        color: #222;
        transition: 333ms;
    }

    .x-sub-menu li.x-has-sub-menu {
        position: relative
    }

        .x-sub-menu li.x-has-sub-menu:before {
            content: '〉';
            position: absolute;
            right: 0;
            top: 7px
        }

        .x-sub-menu li.x-has-sub-menu.x-right:before {
            right: auto;
            left: 0
        }

    .x-sub-menu li:hover a {
        color: #fff;
    }

.x-sub-menu.x-active {
    transform: scaleY(1) translateY(0);
    /* border:1px solid silver; */
    /* box-shadow:0 3px 7px #999; */
    opacity: 1;
}

.x-sub-menu > ul {
    display: grid;
    grid-auto-columns: minmax(0,1fr);
    grid-auto-flow: column;
    padding: 0;
    margin-bottom: 0 !important
}

    .x-sub-menu > ul > li {
        border-right: 1px solid silver;
        /* padding:1em; */
        color: #8b0000
    }

        .x-sub-menu > ul > li.x-highlight {
            background: #8b0000;
            color: #fff
        }

            .x-sub-menu > ul > li.x-highlight h3 {
                color: #fff
            }

    .x-sub-menu > ul img {
        width: 80%;
        display: block;
        margin: 1em auto
    }

.x-sub-menu .x-main-section-menu {
    position: relative
}

    .x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop {
        position: absolute;
        left: 15px;
        right: 15px;
        top: 0;
        bottom: 0;
        background: #eee
    }

        .x-sub-menu .x-main-section-menu .x-multi-level-menu-desktop .x-back-btn {
            cursor: pointer
        }

.x-sub-menu p {
    line-height: 1.7em
}

#x-toggle {
    display: none
}

#x-side-menu {
    transition: .5s;
    transition-timing-function: linear;
    width: 0;
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999
}

    #x-side-menu.x-active {
        width: 100%
    }

    #x-side-menu h2, #x-side-menu h3, #x-side-menu h4, #x-side-menu h5 {
        padding: .75em;
        text-align: left;
        background: #1f4286;
        font-size: 18px;
        margin-bottom: 0 !important
    }

    #x-side-menu .x-side-menu {
        z-index: 9;
        user-select: none;
        box-shadow: -1px 0 7px #111,1px 0 7px #111;
        background: #1f4286;
        width: 320px;
        overflow-y: auto;
        color: #fff;
        height: 100vh;
        box-sizing: border-box;
        position: relative
    }

        #x-side-menu .x-side-menu > li {
            background: #1f4286;
            border-top: 1px solid #07245e;
            position: relative;
            color: gray
        }

            #x-side-menu .x-side-menu > li:last-child {
                border-bottom: 1px solid #07245e
            }

            #x-side-menu .x-side-menu > li.x-has-image, #x-side-menu .x-side-menu > li.x-small {
                display: none
            }

            #x-side-menu .x-side-menu > li ul {
                display: none;
                padding: 0
            }

            #x-side-menu .x-side-menu > li a, #x-side-menu .x-side-menu > li span {
                display: block;
                padding: 1em 1em 1em 4em;
                color: #fff;
                text-decoration: none
            }

        #x-side-menu .x-side-menu .x-close {
            float: right;
            padding: 5px .46em;
            font-size: 30px;
            cursor: pointer;
            background: #1f4286;
        }

    #x-side-menu .x-has-sub-menu .x-next {
        border-bottom: 0;
        border-top: 0;
        transition: .3s;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        width: 45px;
        padding-left: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border: 1px solid #07245e;
        background: #07245e;
        cursor: pointer;
        color: #fff
    }

        #x-side-menu .x-has-sub-menu .x-next:hover {
            background: #0062cc
        }

        #x-side-menu .x-has-sub-menu .x-next a {
            display: block;
            padding-top: 15px
        }

    #x-side-menu .x-has-sub-menu.x-right .x-next {
        right: auto;
        left: 0
    }

.x-responsive #x-toggle {
    display: block;
    grid-column: span 1
}

.x-responsive.x-mega-menu {
    grid-auto-columns: 1fr
}

    .x-responsive.x-mega-menu > li {
        display: none
    }

        .x-responsive.x-mega-menu > li:before {
            display: none !important
        }

        .x-responsive.x-mega-menu > li.x-always-show, .x-responsive.x-mega-menu > li.x-has-image {
            display: block;
            grid-column: span 6
        }

        .x-responsive.x-mega-menu > li.x-small {
            grid-column: span 1
        }

.x-multi-level-menu {
    position: absolute;
    top: 0;
    width: 320px;
    background: #1f4286;
    height: 100vh;
    box-shadow: -1px 0 7px #1f4286,1px 0 7px #111;
    overflow-y: auto
}

    .x-multi-level-menu li {
        padding: 0;
        list-style: none
    }

        .x-multi-level-menu li.x-list {
            /* background:#a50000;
                border-top:1px solid #720000;
                background:#8b0000; */
            position: relative
        }

            .x-multi-level-menu li.x-list ul {
                /* display:none; */
            }

            .x-multi-level-menu li.x-list a, .x-multi-level-menu li.x-list span {
                display: block;
                padding: 0.8em 0em 0.3em 1.5em;
                color: #fff;
                text-decoration: none
            }

    .x-multi-level-menu .x-back {
        padding: .75em;
        text-align: center;
        border-bottom: 1px solid #1f4286;
        cursor: pointer
    }

        .x-multi-level-menu .x-back .x-back-btn {
            float: right;
            padding: 10px 30px;
            font-size: 20px;
            cursor: pointer;
            margin: -.75em;
            text-align: left;
            width: 15px
        }

.x-blur {
    filter: blur(5px) grayscale(.75);
    user-select: none;
    transition: .1s;
    transition-delay: 0.1s
}


@media only screen and (min-width:1200px) and (max-width:1400px) {
    .x-mega-menu {
        height: 100%;
        display: flex;
        align-items: center;
    }

        .x-mega-menu > li a, .x-mega-menu > li span {
            padding: 10px;
        }

    .site-header .x-sub-menu {
        top: 130px !important;
    }

    .site-header .left-content ul li a {
        font-size: 12px !important;
    }

    .site-header.fixed {
        padding: 0;
    }

    .site-header nav.navbar.navbar-expand-xl.navbar-light.justify-content-between {
        padding: 0 4dvw;
    }

    .site-header.fixed .x-sub-menu {
        top: 130px !important;
    }
}
@media(max-width:767px) {
    .div-column h4 {
        width: 100%;
        color: #fff;
        position: relative;
        margin-bottom: 15px;
        border-bottom: 1px solid #fff;
        padding-bottom: 10px;
        margin-left: 5px;
        font-size: 18px;
        display: block;
    }

    .x-mega-menu > li {
        padding: 0 0;
    }

    .same-align h4 {
        border-bottom: 1px solid #fff;
        text-align: left;
    }

    .mutli-coloumn .div-column {
        display: block;
        align-items: flex-start;
        flex-wrap: wrap;
        flex: 1;
        width: 100%;
        text-align: left;
    }

    .centernav {
        height: auto !important;
    }

    .mutli-coloumn {
        display: block;
        width: 100%;
    }

    #x-side-menu h2, #x-side-menu h3, #x-side-menu h4, #x-side-menu h5 {
        text-align: left;
    }
}
