@media screen and (min-width:768px){
    .sidebar_display {
        height         : 100%;
    }
    .main_area_full {
        height         : 100%;
    }
    .main_area_with_menu {
        width          : 80%;
    }
}
.sidebar_display {
    overflow           : visible;
    transition         : 0.5s;
    transition         : width .5s;
}

.sidebar_hidden {
     width             : 0%;
     overflow          : hidden;
     transition        : width .5s;
     background        : #e3e3e3;
     display           : none;
}

.main_area_full {
     margin            : 0;
     width             : 100%;
     transition        : width .5s;
}

.main_area_with_menu {
     margin            : 0;
     transition        : width .5s;
}

.sidebar_display .closebtn {
     margin-top        : 20px;
     text-align        : right;
     font-size         : 20px;
     width             : 100%;
}

.openbtn {
     font-size         : 20px;
     cursor            : pointer;
     background-color  : #111;
     color             : white;
     padding           : 10px 15px;
     border            : none;
}

.openbtn               :hover {
     background-color  : #444;
}

.openbtn_hidden {
     transition        : .6s;
     visibility        : hidden;
     opacity           : 0;
}

.openbtn_display{
     transition        : .6s;
     visibility        : visible;
     opacity           : 1;
}