/* == NAVBAR == */
/* ============= */
#menu-responsive .bg {
    pointer-events: none;
    position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      top: 60px;
    transition: background .4s ease;
    z-index: 98;
}

#menu-responsive.open .bg {
    background-color: rgba( 0, 0, 0, .4 );
    pointer-events: initial;
}

#menu-responsive .container {
    background-color: #151515;
    display: flex;
    color: #FFFFFF;
    overflow-y: scroll;
    padding: 0;
    position: fixed;
      bottom: 0;
      left: 0;
      top: 60px;
    transform: translateX( -320px );
    transition: transform .4s ease;
    width: 320px;
    z-index: 99;
}
#menu-responsive.open .container {
    transform: translateX( 0 );
}

#menu-responsive .content {
    display: flex;
      justify-content: space-between;
      flex-flow: column;
    width: 320px;
    padding: 0;
}

#menu-responsive section {
    padding: 20px 15px;
}

#menu-responsive section#menu-responsive-secondary {
    background: #ffce64;
    background: -moz-linear-gradient(top, #ffce64 0%, #ffb620 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffce64), color-stop(100%,#ffb620));
    background: -webkit-linear-gradient(top, #ffce64 0%,#ffb620 100%);
    background: -o-linear-gradient(top, #ffce64 0%,#ffb620 100%);
    background: -ms-linear-gradient(top, #ffce64 0%,#ffb620 100%);
    background: linear-gradient(to bottom, #ffce64 0%,#ffb620 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf5e0', endColorstr='#ffaf0e',GradientType=0 );
    box-shadow: 0px 6px 10px rgb(9 9 9 / 14%);
    color: #000;
    position: relative;
}

#menu-responsive .menu-item:not( :last-child ) {
    margin-bottom: 15px;
}

#menu-responsive section#menu-responsive-primary .menu-item {
    min-height: 48px;
}

#menu-responsive section#menu-responsive-primary .menu-item.menu-item-ugyfelkapu {
    display: flex;
      justify-content: flex-end;
}
#menu-responsive section#menu-responsive-primary .menu-item.menu-item-ugyfelkapu a {
    color: #000;
    width: 140px;
    margin: 0 20px 0 0;
}

#menu-responsive .menu-item a{
    display: flex;
}
#menu-responsive .menu-item a .icon-box {
    display: flex;
      justify-content: flex-end;
    flex-basis: 60px;
}

#menu-responsive .menu-item.has-submenu > a {
    position: relative;
    margin-right: -10px;
}

#menu-responsive .menu-item a.menu-ugyfelkapu {
    color: #000;
}

#menu-responsive .menu-item a .ikon,
#menu-responsive .menu-item a img {
    margin-top: 3px;
    margin-right: 6px;
}

#menu-responsive .menu-item a .ikon{
    display: block;
    height: 35px;
    background-image: url(/images/header-menu_ikon.png);
    background-repeat: no-repeat;
}

#menu-responsive .menu-item a img {
    height: 25px;
}

#menu-responsive section#menu-responsive-primary .menu-item.has-submenu > a > button.toggle-submenu {
    background-color: transparent;
    border: 0;
    display: flex;
     align-items: center;
     justify-content: center;
    height: 38px;
    top: 0;
    right: -10px;
    width: 38px;
}

#menu-responsive section#menu-responsive-primary .menu-item.has-submenu > a > button.toggle-submenu > img {
    height: auto;
    width: 10px;
    transition: transform .4s ease;
    margin: 0;  
}
#menu-responsive section#menu-responsive-primary .menu-item.has-submenu.open > a > button.toggle-submenu > img {
    transform: rotateZ( 180deg );
}

#menu-responsive section#menu-responsive-primary .menu-item a .szoveg {
    flex-grow: 1;
    margin-left: 10px;
    margin-right: 20px;
}

#menu-responsive .menu-item a.menu-ugyfelkapu .szoveg {
    font-size: 16px;
    margin-top: 8px;
}

#menu-responsive .menu-item .submenu-container {
    height: 0;
    overflow: hidden;
}

#menu-responsive .menu-item .submenu-container a{
    line-height: 21px;
}

#menu-responsive .menu-item .submenu-container a:not( :last-child ) {
    margin-bottom: 10px;
}

#menu-responsive section#menu-responsive-primary .menu-item .submenu-container {
    border-left: 2px solid #FFF;
    margin: 10px 10px 10px 52px;
    padding-left: 15px;
}

#menu-responsive section#menu-responsive-secondary .menu-item .submenu-content {
    background-color: bisque;
    border-left: 3px solid #151515;
    margin-top: 6px;
    padding: 15px 10px;
}

#menu-responsive .menu-ugyfelkapu {
    display: block;
    padding: 12px 0;
    border-radius: 5px;
    text-shadow: rgb(255 255 255 / 30%) 0px 1px 0px;
    background: #ffce64;
    background: -moz-linear-gradient(top, #ffce64 0%, #ffb620 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffce64), color-stop(100%,#ffb620));
    background: -webkit-linear-gradient(top, #ffce64 0%,#ffb620 100%);
    background: -o-linear-gradient(top, #ffce64 0%,#ffb620 100%);
    background: -ms-linear-gradient(top, #ffce64 0%,#ffb620 100%);
    background: linear-gradient(to bottom, #ffce64 0%,#ffb620 100%);
}

@media screen and ( min-width: 769px ) {
    #menu-responsive {
        display: none;
    }
}



/* == SIDEBAR == */
/* ============= */
@media screen and ( max-width: 768px ) {
    #aside,
    body[data-oldalcsoport="fooldal"] #aside {
        transition: width .4s ease;
        width: 0;
    }

    #aside .aside-bg {
        pointer-events: none;
        position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          top: 60px;
        transition: background .4s ease;
        z-index: 98;
        width: 100vw;
    }
    
    #aside.open .aside-bg {
        background-color: rgba( 0, 0, 0, .4 );
        pointer-events: initial;
    }

    #aside .aside-container {
        background-color: #FFFFFF;
        overflow-y: scroll;
        position: fixed;
          bottom: 0;
          right: 0;
          top: 60px;
        transition: width .4s ease;
        width: 0;
        z-index: 99;
    }

    #aside.open .aside-container {
        width: 320px;
    }

    #aside .aside-content {
        padding: 30px 20px 25px;
        width: 280px;
    }
}