/* Main Header */
.main-header{ width: 100%; background: var(--black); z-index: 9999; transition: var(--transition); height: 80px; }
.main-header .content{ height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; }

/* Logo */
.main-header .logo{ width: 50px; transition: var(--transition); }
.main-header .logo figure{}
.main-header .logo figure img{ width: 100%; }

/* Main Menu */
.main-header .main-menu{ }
.main-header .main-menu .menu{ display: flex; align-items: center; }
.main-header .main-menu .menu li{ position: relative; }
.main-header .main-menu .menu li a{ color: var(--white); padding: 10px; text-decoration: none; transition: var(--transition); } 
.main-header .main-menu .menu li a:hover{ color: var(--white-aaa); }
.main-header .main-menu .menu .menu-item-has-children > a:after{ content: '\f107'; font-family: var(--fa); font-weight: 900; margin-left: 10px; font-size: 14px; transition: var(--transition); display: inline-block; }
.main-header .main-menu .menu .sub-menu{ position: absolute; width: 200px; max-height: 0; height: auto; visibility: hidden; background: var(--black); display: flex; flex-direction: column; top: 48px; left: 0; transition: var(--transition); overflow: hidden; z-index: 9999; }
.main-header .main-menu .menu .sub-menu li a{ color: var(--white); padding: 15px; display: block; }
.main-header .main-menu .menu .sub-menu li a:hover{ background: var(--grey-222); }
.main-header .main-menu .menu li:hover .sub-menu{ opacity: 1; visibility: visible; max-height: 500px; }
.main-header .main-menu .menu li:hover > a:after{ transform: rotate(180deg); }

/* Menu Mobile */
.main-header .hamburger{ width: 30px; height: 30px; display: none; position: relative; z-index: 999; top: 4px; }
.main-header .hamburger span{ display: block; background: var(--white); margin-bottom: 6px; height: 4px; width: 100%; border-radius: 5px; }
.main-header .close-menu{ width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.4); position: fixed; z-index: 999; opacity: 0; visibility: hidden; transition: var(--transition); }

@media screen and (max-width: 1280px){

}

@media screen and (max-width: 1023px){

    /* Menu Mobile */
    .main-header .hamburger{ display: block; }
    
    .main-header .main-menu{ display: block; position: fixed; width: 280px; height: 100%; top: 0; left: 0; background: var(--white); transform: translateX(-290px); transition: var(--transition); z-index: 99999; }
    .main-header .main-menu .menu{ flex-direction: column; margin-top: 50px; align-items: flex-start; }
    .main-header .main-menu .menu li{ width: 100%; }
    .main-header .main-menu .menu li a{ padding: 20px; display: block; color: var(--black); width: 100%; }
    
    /* Menu Mobile Open */
    .main-header.menu-open .close-menu{ opacity: 1; visibility: visible; }
    .main-header.menu-open .main-menu{ transform: translateX(0); }

    /* Main Menu */
    .main-header .main-menu .menu .menu-item-has-children > a:after{ display: none; }
    .main-header .main-menu .menu .sub-menu{ position: relative; opacity: 1; visibility: visible; max-height: 5000px; width: 100%; background: none; top: 0; }
    .main-header .main-menu .menu .sub-menu li a{ color: var(--black); padding: 20px 20px 20px 30px; }
    .main-header .main-menu .menu .sub-menu li a:hover{ background: none; }
    
}

@media screen and (max-width: 767px){
    
}

@media screen and (max-width: 540px){
    
}