@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);*{margin:0;padding:0}.main{width:100%;margin:0 auto;text-align:center}.sidebar{position:fixed;top:0;right:0!important;bottom:0;z-index:9990!important;width:400px;background:#222;color:#fff;box-sizing:border-box;box-shadow:10px 0 30px rgba(0,0,0,.15);transform:translateX(120%);transition:all .3s cubic-bezier(.35,.38,.07,.83);overflow:auto}.close-side{color:#000;font-size:21px;font-weight:700;line-height:1;padding:5px}.sidebar .btn-close{float:right;box-shadow:none;padding:5px}.sidebar .close-side::after{content:"";display:block;clear:both;visibility:hidden}.sidebar.right{left:initial;right:0;box-shadow:-10px 0 30px rgba(0,0,0,.15);transform:translateX(120%)}.sidebar.right .close .btn-close{float:left}.sidebar.active{transform:translateX(0)}.sidebar .content{padding:10px}.sidebar .content ol,.sidebar .content ul{margin:0 0 20px 10px}@media (max-width:500px){.sidebar{width:80%}}