* {
  box-sizing: border-box;
  &:before, &:after {
    box-sizing: border-box;
  }
}

body {
  left: 0;
  right: 0;
  margin: auto;
}

#navbar {
  background: transparent;
  position: fixed;
  width: 100%;
  height: 4.063rem;
  z-index: 19;
  transition: all 350ms ease-in-out;
  &.nav-color {
    background: $main;
  }
}

a, aside, .overlay, body {
  transition: all 0.25s ease;
}

a.slideButton, .dosearch {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  top: 10px;
  z-index: 31;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.slideButton {
  left: 10px;
}

.dosearch {
  right: 10px;
  border-radius: .188rem;
  padding: 0.125rem 0.188rem;
}

.icon-menu {
  cursor: pointer;
  padding: .313rem;
  border-radius: .188rem;
  background: none;
  width: 2.5rem;
  height: 2.5rem;
  fill: $sec;
}

.icon-search {
  width: 2.188rem;
  height: 2.188rem;
}

.overlay {
  cursor: pointer;
}

#close {
  display: none;
}

aside {
  position: fixed;
  height: 100%;
  width: 15rem;
  padding: 2.5rem 0 0;
  top: 0;
  left: -15rem;
  background: $sidemenu;
  z-index: 20;
  box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.5);
  h2 {
    text-align: center;
    margin: 0 0 .625rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 1.25rem;
    color: $sec;
  }
  nav {
    ul {
      padding: 0;
    }
    li {
      margin: 0;
      list-style-type: none;
      a {
        width: 100%;
        display: block;
        padding: 1.25rem;
        text-decoration: none;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        font-style: normal;
        color: #b3b3b1;
        &:hover {
          color: #191918;
          background: $sec;
        }
      }
    }
    .feed {
      border-bottom: 1px solid #797979;
    }
  }
  &.slide {
    left: 0;
  }
}

a.slideButton.slide {
  left: 15.625rem;
  pointer-events: none;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: transparent;
  z-index: 30;
  &.slide {
    pointer-events: auto;
    left: 240px;
    background: rgba(0, 0, 0, 0.6);
  }
}
