/*
*** Menubar Icons for Mobile (from 768px)
*** Right Side Menu
*** Logo
*** Main Menu
*** .sub-menu class for sub menu
*/

/* Menubar Icons for Mobile (from 768px) STARTS */
.menu-bars {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 25px;
    right: 17px;
    overflow: hidden;
    z-index: 999;
    cursor: pointer;
}
.menu-bars span {
    width: 50px;
    height: 3px;
    background-color: #202020;
    display: block;
    position: absolute;
    z-index: 999;
    right: 0;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.menu-bars span:first-child {
    top: 0;
}
.menu-bars span:nth-child(2) {
    top: 10px;
}
.menu-bars span:last-child {
    top: 20px;
}
.menu-bars .first-bar {
    top: 19px !important;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
.menu-bars .second-bar {
    right: 50px;
}
.menu-bars .thired-bar {
    top: 19px !important;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
/* Menubar Icons for Mobile (from 768px) ENDS */

/* Right Side Menu STARTS */
.right-side-menu {
    width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    right: -100%;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
@media all and (max-width: 767px) {
    .right-side-menu {
        width: 100%;
    }
}
.right-0 {
    right: 0 !important;
}

/* Logo STARTS */
.left-side-menu .logo {
    text-align: center;
    border-bottom: 1px solid #3d4247;
}
.right-side-menu .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 35px;
    color: #fff;
    text-transform: capitalize;
    text-decoration: none;
    padding: 15px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}
.logo a img {
    width: 50px;
}
/* Logo ENDS */

/* Main Menu STARTS */
.main-menu {
    width: 100%;
    overflow-x: hidden;
}
.main-menu > ul {
    padding-top: 50px;
    padding-bottom: 50px;
}
.main-menu > ul > li,
.sub-menu > li {
    width: 100%;
    border-bottom: 1px solid #926e6a;
}
.main-menu ul li.caret {
    position: relative;
}
.main-menu ul li.caret:before {
    content: " ";
    position: absolute;
    top: 20px;
    right: 18px;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    z-index: 2;
}
.main-menu > ul > li > ul,
.sub-menu > li > .sub-menu {
    width: 100%;
    list-style: none;
    display: none;
}
.main-menu > ul > li > a,
.sub-menu > li a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.sub-menu > li > a {
    padding-left: 35px;
}
.sub-menu li a:before {
    content: "- ";
}
.main-menu > ul > li > a > i {
    margin-right: 10px;
}
.main-menu > ul > li > a:hover,
.sub-menu > li a:hover,
.main-menu > ul > li > a.active,
.sub-menu > li a.active {
    background-color: #e74c3c;
    position: relative;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.main-menu > ul > li > a.active:before {
    content: " ";
    position: absolute;
    top: -30.5px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 11px solid #e74c3c;
    border-radius: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
            transform: rotate(-60deg);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.main-menu > ul > li > a.active:after {
    content: " ";
    position: absolute;
    bottom: -30.5px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 11px solid #e74c3c;
    border-radius: 100%;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
    -webkit-transform: rotate(-120deg);
        -ms-transform: rotate(-120deg);
            transform: rotate(-120deg);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
/* Main Menu ENDS */
/* Right Side Menu ENDS */