/*=========================================================================================
    File Name: vertical-menu-modern.scss
    Description: A calssic vertical modern style menu with expand and collops support. It support
    light & dark version, filpped layout, right side icons, native scroll and borders menu
    item seperation.
    ----------------------------------------------------------------------------------------
    Item Name: Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit
    Version: 1.2
    Author: ThemeSelection
    Author URL: https://themeselection.com/
==========================================================================================*/
@media (min-width: 576px)
{
    body.vertical-layout.vertical-menu-modern.menu-flipped .main-menu
    {
        left: 0;
    }
}

body.vertical-layout.vertical-menu-modern .navbar-header .nav-toggle
{
    position: absolute;
    left: 0;
}

body.vertical-layout.vertical-menu-modern .navbar .navbar-brand
{
    white-space: nowrap;
}

body.vertical-layout.vertical-menu-modern .main-menu
{
    -webkit-transition: .4s cubic-bezier(.25, .8, .25, 1);
       -moz-transition: .4s cubic-bezier(.25, .8, .25, 1);
         -o-transition: .4s cubic-bezier(.25, .8, .25, 1);
            transition: .4s cubic-bezier(.25, .8, .25, 1);
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}
body.vertical-layout.vertical-menu-modern .main-menu li a span
{
    -webkit-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
       -moz-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
         -o-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
            animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .navbar-header
{
    z-index: 999; 

    width: 260px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .navbar.navbar-brand-center .navbar-header
{
    z-index: 999; 

    width: auto;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .navbar .navbar-container
{
    margin-right: 260px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .navbar .navbar-brand .brand-text
{
    -webkit-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
       -moz-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
         -o-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
            animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu
{
    width: 260px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation .navigation-header .ft-minus
{
    display: none;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i
{
    float: right; 

    margin-left: 12px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before
{
    font-size: 1.5rem;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > span
{
    -webkit-transition: -webkit-transform .3s ease;
       -moz-transition:         transform .3s ease, -moz-transform .3s ease;
         -o-transition:      -o-transform .3s ease;
            transition: -webkit-transform .3s ease;
            transition:         transform .3s ease;
            transition:         transform .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease, -o-transform .3s ease;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > span.badge
{
    position: absolute;
    top: 18px; 
    left: 20px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:not(.mm-next):after
{
    font-family: 'LineAwesome';
    font-size: .85rem;

    position: absolute;
    top: 14px;
    left: 20px;

    display: inline-block;

    content: '\f111';
    transition: -webkit-transform .2s ease-in-out; 
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub .has-sub > a:not(.mm-next):after
{
    top: 8px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.open > a:not(.mm-next):after
{
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .main-menu-footer
{
    width: 260px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-light .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
            box-shadow: 0 0 10px rgba(0, 0, 0, .12);
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-light .navigation .hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-light .navigation:hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-light .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-dark .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #2c303b;
    -webkit-box-shadow: 0 0 10px black;
            box-shadow: 0 0 10px black;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-dark .navigation .hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-dark .navigation:hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-dark .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}

body.vertical-layout.vertical-menu-modern.menu-expanded .content,
body.vertical-layout.vertical-menu-modern.menu-expanded .footer
{
    margin-right: 260px;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .navbar-brand-center .content,
body.vertical-layout.vertical-menu-modern.menu-expanded .navbar-brand-center .footer
{
    margin-right: 0;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header
{
    z-index: 999; 

    width: 60px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header .modern-nav-toggle
{
    display: none;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header.expanded
{
    z-index: 1000; 

    width: 260px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header.expanded .modern-nav-toggle
{
    display: block;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header.expanded .navbar-brand .brand-text
{
    -webkit-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
       -moz-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
         -o-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
            animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-header .navbar-brand .brand-text
{
    -webkit-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
       -moz-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
         -o-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
            animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar.navbar-brand-center .navbar-header
{
    z-index: 999; 

    width: auto;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar .navbar-brand
{
    padding: 17px 0;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar .navbar-container
{
    margin-right: 60px;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu
{
    width: 60px;

    -webkit-transition: 300ms ease all;
       -moz-transition: 300ms ease all;
         -o-transition: 300ms ease all;
            transition: 300ms ease all;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0); 

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .main-menu-footer
{
    width: 60px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .main-menu-footer,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .main-menu-header .media-body .media-heading,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .main-menu-header .media-body .text-muted,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .main-menu-header .media-right
{
    display: none;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .main-menu-header .media-body
{
    opacity: 0;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .user-content
{
    padding: 20px 10px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation
{
    overflow: visible;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li.navigation-header .ft-minus
{
    font-size: 1.2rem; 

    display: block;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li.navigation-header span
{
    display: none;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a
{
    text-overflow: inherit;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a > span
{
    -webkit-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
       -moz-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
         -o-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
            animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a > span.badge
{
    float: none !important;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a i
{
    float: right; 

    margin-left: 12px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a i:before
{
    font-size: 1.5rem;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .mTSWrapper
{
    overflow: visible;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded
{
    width: 260px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation > li.navigation-header .ft-minus
{
    display: none;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation > li.navigation-header span
{
    display: block;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation > li > a > span
{
    -webkit-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
       -moz-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
         -o-animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
            animation: .3s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation > li > a > span.badge
{
    position: absolute;
    left: 20px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation li.has-sub > a:not(.mm-next):after
{
    font-family: 'LineAwesome';
    font-size: .85rem;

    position: absolute;
    top: 14px;
    left: 20px;

    display: inline-block;

    content: '\f111';
    transition: -webkit-transform .2s ease-in-out; 
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation li.has-sub .has-sub > a:not(.mm-next):after
{
    top: 8px;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation li.open > a:not(.mm-next):after
{
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-light .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
            box-shadow: 0 0 10px rgba(0, 0, 0, .12);
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-light .navigation .hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-light .navigation:hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-light .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-dark .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #2c303b;
    -webkit-box-shadow: 0 0 10px black;
            box-shadow: 0 0 10px black;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-dark .navigation .hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-dark .navigation:hover > a > i,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded.menu-dark .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .content,
body.vertical-layout.vertical-menu-modern.menu-collapsed .footer
{
    margin-right: 60px;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-brand-center .content,
body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar-brand-center .footer
{
    margin-right: 0;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .content
{
    margin: 0;
    margin-left: 60px;
}

@media (min-width: 576px)
{
    body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .main-menu
    {
        left: 0;
    }
    body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .main-menu span.menu-title
    {
        left: 60px;
    }
    body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .main-menu ul.menu-content
    {
        right: inherit; 
        left: 60px;
    }
}

body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .navbar-header
{
    float: left;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .navbar .navbar-container
{
    margin: 0;
    margin-left: 60px;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed.menu-flipped .footer
{
    margin: 0;
    margin-left: 60px;
}

[data-textdirection='rtl'] body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a
{
    padding: 14px 16px !important;
}

[data-textdirection='rtl'] body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li.navigation-header .ft-minus
{
    padding: 12px 0;
}

@media (min-width: 992px)
{
    body.vertical-layout.vertical-menu-modern .main-menu
    {
        width: 260px;
    }
    body.vertical-layout.vertical-menu-modern .main-menu .navigation li.navigation-header .ft-minus
    {
        display: none;
    }
    body.vertical-layout.vertical-menu-modern .navbar .navbar-header
    {
        width: 260px;
    }
    body.vertical-layout.vertical-menu-modern .content,
    body.vertical-layout.vertical-menu-modern .footer
    {
        margin-right: 260px;
    }
    body.vertical-layout.vertical-menu-modern.menu-flipped .content
    {
        margin: 0;
        margin-left: 260px;
    }
    body.vertical-layout.vertical-menu-modern.menu-flipped .navbar-header
    {
        float: left;
    }
    body.vertical-layout.vertical-menu-modern.menu-flipped .navbar .navbar-container
    {
        margin: 0;
        margin-left: 260px;
    }
    body.vertical-layout.vertical-menu-modern.menu-flipped .footer
    {
        margin: 0;
        margin-left: 260px;
    }
}

@media (max-width: 991.98px)
{
    body.vertical-layout.vertical-menu-modern .main-menu
    {
        width: 60px;
    }
    body.vertical-layout.vertical-menu-modern .main-menu .main-menu-footer
    {
        width: 260px;
    }
    body.vertical-layout.vertical-menu-modern .navbar .navbar-header
    {
        width: 60px;
    }
    body.vertical-layout.vertical-menu-modern .content,
    body.vertical-layout.vertical-menu-modern .footer
    {
        margin-right: 60px;
    }
}

@media (max-width: 767.98px)
{
    body.vertical-layout.vertical-menu-modern .main-menu
    {
        width: 0;
    }
    body.vertical-layout.vertical-menu-modern .navbar .navbar-header
    {
        width: 0;
    }
    body.vertical-layout.vertical-menu-modern .content,
    body.vertical-layout.vertical-menu-modern .footer
    {
        margin-right: 0;
    }
    body.vertical-layout.vertical-menu-modern.menu-expanded .navbar .navbar-container
    {
        margin-right: 0 !important;
    }
    body.vertical-layout.vertical-menu-modern.menu-expanded .content,
    body.vertical-layout.vertical-menu-modern.menu-expanded .footer
    {
        margin-right: 0 !important;
    }
    html.loading .main-menu,
    html.loading .vertical-overlay-menu.menu-hide .main-menu,
    .vertical-overlay-menu.menu-hide html.loading .main-menu
    {
        -webkit-transform: translate3d(0px, 0, 0);
           -moz-transform: translate3d(0px, 0, 0);
                transform: translate3d(0px, 0, 0); 

        opacity: 0;
    }
}

@-webkit-keyframes fadein
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@-moz-keyframes fadein
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@-o-keyframes fadein
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes fadein
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@-webkit-keyframes fadeout
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@-moz-keyframes fadeout
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@-o-keyframes fadeout
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes fadeout
{
    from
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

/*=========================================================================================
	File Name: vertical-overlay-menu.scss
	Description: A overlay style vertical menu with show and hide support. It support
	light & dark version, filpped layout, right side icons, native scroll and borders menu
	item seperation.
	----------------------------------------------------------------------------------------
	Item Name: Chameleon Admin - Modern Bootstrap 4 WebApp & Dashboard HTML Template + UI Kit
	Version: 1.2
	Author: ThemeSelection
	Author URL: https://themeselection.com/
==========================================================================================*/
.vertical-overlay-menu .content
{
    margin-right: 0;
}

.vertical-overlay-menu .navbar .navbar-header
{
    z-index: 999; 

    width: 260px;
}

.vertical-overlay-menu .navbar.navbar-brand-center .navbar-container
{
    margin-right: 0;
}

.vertical-overlay-menu .navbar.navbar-brand-center .navbar-header
{
    z-index: 999; 

    width: auto;
}

.vertical-overlay-menu .main-menu,
.vertical-overlay-menu.menu-hide .main-menu
{
    right: -260px; 

    width: 260px;

    -webkit-transition: width .25s, opacity .25s, -webkit-transform .25s;
       -moz-transition: width .25s, opacity .25s, transform .25s, -moz-transform .25s;
         -o-transition: width .25s, opacity .25s, -o-transform .25s;
            transition: width .25s, opacity .25s, -webkit-transform .25s;
            transition: width .25s, opacity .25s, transform .25s;
            transition: width .25s, opacity .25s, transform .25s, -webkit-transform .25s, -moz-transform .25s, -o-transform .25s;
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

    opacity: 0;
}
.vertical-overlay-menu .main-menu .navigation .navigation-header .ft-minus
{
    display: none;
}
.vertical-overlay-menu .main-menu .navigation > li > a > i
{
    font-size: 1.5rem;

    float: right; 

    margin-left: 12px;
}
.vertical-overlay-menu .main-menu .navigation > li > a > i:before
{
    -webkit-transition: 200ms ease all;
       -moz-transition: 200ms ease all;
         -o-transition: 200ms ease all;
            transition: 200ms ease all;
}
.vertical-overlay-menu .main-menu .navigation li.has-sub > a:not(.mm-next):after
{
    font-family: 'LineAwesome';
    font-size: .85rem;

    position: absolute;
    top: 14px;
    left: 20px;

    display: inline-block;

    content: '\f111';
    transition: -webkit-transform .2s ease-in-out; 
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}
.vertical-overlay-menu .main-menu .navigation li.has-sub .has-sub > a:not(.mm-next):after
{
    top: 8px;
}
.vertical-overlay-menu .main-menu .navigation li.open > a:not(.mm-next):after
{
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
.vertical-overlay-menu .main-menu .main-menu-footer
{
    bottom: 55px;
}
.vertical-overlay-menu .main-menu .main-menu-footer
{
    width: 260px;
}
.vertical-overlay-menu .main-menu.boxed-layout
{
    position: relative;
}
.vertical-overlay-menu .main-menu.boxed-layout .main-menu.menu-fixed
{
    position: absolute;
}

.vertical-overlay-menu.menu-open .main-menu
{
    -webkit-transition: width .25s, opacity .25s, -webkit-transform .25s;
       -moz-transition: width .25s, opacity .25s, transform .25s, -moz-transform .25s;
         -o-transition: width .25s, opacity .25s, -o-transform .25s;
            transition: width .25s, opacity .25s, -webkit-transform .25s;
            transition: width .25s, opacity .25s, transform .25s;
            transition: width .25s, opacity .25s, transform .25s, -webkit-transform .25s, -moz-transform .25s, -o-transform .25s; 
    -webkit-transform: translate3d(-260px, 0, 0);
       -moz-transform: translate3d(-260px, 0, 0);
            transform: translate3d(-260px, 0, 0);

    opacity: 1;
}
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
            box-shadow: 0 0 10px rgba(0, 0, 0, .12);
}
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation .hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation:hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-light .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation > li > a > i
{
    line-height: 40px;

    display: inline-block;

    width: 40px;
    height: 40px;
    margin-left: 20px;

    text-align: center;
    vertical-align: middle;

    border-radius: 12%;
    background: #2c303b;
    -webkit-box-shadow: 0 0 10px black;
            box-shadow: 0 0 10px black;
}
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation .hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation:hover > a > i,
.vertical-overlay-menu.menu-open .main-menu.menu-dark .navigation .open > a > i
{
    -webkit-box-shadow: 0 0 20px rgba(253, 99, 107, .3);
            box-shadow: 0 0 20px rgba(253, 99, 107, .3);
}

.vertical-overlay-menu.menu-flipped .main-menu
{
    right: inherit; 
    left: -260px;
}

.vertical-overlay-menu.menu-flipped .navbar .navbar-container
{
    margin: 0;
    margin-left: 260px;
}

.vertical-overlay-menu.menu-flipped .navbar .navbar-header
{
    float: left;
}

.vertical-overlay-menu.menu-flipped.menu-open .main-menu
{
    -webkit-transform: translate3d(260px, 0, 0);
       -moz-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);
}

@media (max-width: 991.98px)
{
    .vertical-overlay-menu .main-menu .main-menu-footer
    {
        bottom: 0;
    }
}
