* {
  box-sizing: border-box;
}
html,
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}
nav svg {
  cursor: pointer;
  height: 44px;
  width: 44px;
}
nav svg.closed {
  background-color: rgba( 0,0,0, 0.65);
}
nav svg path {
  fill: #fff;
}
ol {
  list-style-type: none;
}
nav a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}
nav a[href]:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
nav a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.menu {
  position: relative;
  width: 250px;
}
.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  /*width: 250px;*/
  width: 450px;
  z-index: 2;
}
.menu__toggle-label {
  height: 44px;
  left: 0;
  position: absolute;
  width: 44px;
}
.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  z-index: 2;
}
.menu__toggle-label svg:nth-of-type(2) {
  /*left: 250px;*/
  left: 450px;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.menu__toggle {
  opacity: 0;
  position: fixed;
}
.menu__toggle:checked ~ .menu__toggle-label {
  background: rgba(0,0,0,0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  transition: background 0.15s;
  width: 100vw;
}
.menu__toggle:checked ~ .menu__toggle-label svg:nth-of-type(1) {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.menu__toggle:checked ~ .menu__toggle-label svg:nth-of-type(2) {
  /*left: 250px;*/
  left: 450px;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  transition-delay: 0.925s;
}
.menu__toggle:checked ~ .menu__content {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
}
.menu__toggle:checked ~ .menu__content .menu-item {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(1) {
  border-color: #9b59b6;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: #9b59b6;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(2) {
  border-color: #86e2d5;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: #86e2d5;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(1) {
  transition-delay: 0.225s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(2) {
  transition-delay: 0.275s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) {
  transition-delay: 0.325s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  transition-delay: 0.375s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  transition-delay: 0.425s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  transition-delay: 0.475s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) {
  transition-delay: 0.525s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  transition-delay: 0.575s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  transition-delay: 0.625s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  transition-delay: 0.675s, 0.875s;
}
.menu__toggle:checked ~ .menu__content .menu-item:nth-of-type(5) {
  transition-delay: 0.725s, 0.875s;
}
.menu__content > .menu-item {
  border-left: 8px solid transparent;
}
.menu__content > .menu-item > a {
  line-height: 44px;
  min-width: 60px;
}
.sub-menu {
  padding: 0 0 0 44px;
}
.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.menu-item .menu-item {
  -webkit-transform: translateX(-150%);
          transform: translateX(-150%);
}