.panel-styles {position:fixed;top:0;left:0;width:100%;height:100%;visibility: hidden;-webkit-transition: visibility 0s 0.6s;transition: visibility 0s 0.6s;z-index:100000;}
.panel-styles::after {position:absolute;top:0;left:0;width:100%;height:100%;cursor: pointer;background: rgba(0, 0, 0, 0);
    -webkit-transition: background 0.3s 0.3s;transition: background 0.3s 0.3s;-webkit-box-sizing: border-box;box-sizing: border-box; content: '';
}
.panel-styles.is-visible {visibility: visible;-webkit-transition: visibility 0s 0s;transition: visibility 0s 0s;}
.panel-styles.is-visible::after {background: rgba(0, 0, 0, 0.1);-webkit-transition: background 0.3s 0s;transition: background 0.3s 0s;}
.panel-container {position:fixed;width:90%;height:100%;top:0;background:#fff;z-index:1;
    -webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;
    -webkit-transition-duration:0.3s;transition-duration:0.3s;
}
.from-right .panel-container {right:0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
.from-left .panel-container {left:0;-webkit-transform: translate3d(-100%, 0, 0);transform: translate3d(-100%, 0, 0);}
.is-visible .panel-container {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition-delay: 0s;transition-delay: 0s;}
.reset-style {width: 40px;text-align: center;height: 35px;background: #fffc;color: #444;font-family: sans-serif;letter-spacing: 2px;font-size: 18px;line-height: 35px;padding: 0 10px;position: absolute;border-radius: 4px;top: 10px;left: -80px;cursor: pointer;-webkit-transition: background 0.3s;transition: background 0.3s;}
.reset-style:hover {background:#eee;}
@media only screen and (min-width: 230px) {.panel-container {width: 50%;max-width:200px;}}
@media only screen and (min-width: 480px) {.panel-container {width: 50%;max-width:300px;}}
@media only screen and (min-width: 768px) {.panel-container {width: 50%;max-width:400px;}}
@media only screen and (min-width: 1170px) {.panel-container {width: 50%;max-width:550px;}}