@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
  margin: 0;
  padding: 0
}

body {
  background: #eee;
  font: 1em/1 'Open Sans', sans-serif;
  padding: 20px;
  color: #333
}

a {
  color: #fff;
  background: #99e024;
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  transition: all 0.5s ease
}

a:hover {
  text-decoration: none;
  opacity: 0.75;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3)
}

.main {
  width: 100%;
  max-width: 728px;
  margin: 0 auto;
  text-align: center
}

.sidebar {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9990;
  max-width: 300px;
  background: #222;
  color:#fff;
  box-sizing: border-box;
  box-shadow: 10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(-120%);
  transition: all 0.3s cubic-bezier(0.35, 0.38, 0.07, 0.83);
  overflow: auto
}

.sidebar .close .btn-close {
  background: #cf2828;
  float: right;
  box-shadow: none
}

.sidebar .close::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden
}

.sidebar.right {
  left: initial;
  right: 0;
  box-shadow: -10px 0 30px rgba(0,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 {
  line-height: 1.5;
  font-size: 0.875em
}

.sidebar .content ul, .sidebar .content ol { margin: 20px 0 20px 20px }/*# sourceMappingURL=sidebar.css.map */