@media screen and (max-width: 870px){
    #sidebar{
        width: 290px;
    }
    #sidebar.active{
        width: 100%;
    }
    #sidebar .sidebarslide {
        position: absolute;
        top: 0%;
        animation: step-end;
        background: 0%;
    }
    #sidebar .sidebarslide .hamburger{
        position: absolute;
        width: 25px;
    }
    #sidebar .sidebarslide .hamburger:before,
    #sidebar .sidebarslide .hamburger:after {
        width: 35px;
    }

    #sidebar .sidebarslide.active  {
        left: 76%;
    }

    #sidebar .logo a img{
        margin-top: 30px;
        width: 200px;
    }

    #sidebar ul li {
        margin: auto;
        top:100px;
        margin: 10px auto;
        padding: 15px 10px;
    }
    #sidebar ul li:nth-child(1){
        display: block;
        width: 60%;
    }
    #sidebar ul li:nth-child(2) {
        display: block;
        width: 60%;
    }
    #sidebar ul li:nth-child(3) {
        display: block;
        width: 60%;
    }
    #sidebar ul li:nth-child(4) {
        display: block;
        width: 60%;
    }
    #sidebar ul li:nth-child(5) {
        display: block;
        width: 60%;
    }
    #sidebar ul li:nth-child(6) {
        display: block;
        width: 60%;
    }
    #sidebar ul li:nth-child(7) {
        display: block;
        width: 60%;
    }
    

    #trainingroom  .scroller .wrapper .team-content .akma-drafter .box.active{
        position: fixed;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }
}