* {
  box-sizing: border-box;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

body {
  background: #252525;
}

a,
a:active,
a:focus,
a:hover,
a:visited {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

li:hover {
  background: rgba(250,250,250,0.1);
}

li {
  list-style: none;
}

span.slider-icon a svg {
  margin: 13px 0 0 10px;
}

span.slider-icon a svg {
  display: none;
}

span.slider-icon a svg.active {
  display: inline-block;
  position: relative;
  z-index: 999;
}

#nav-screen {
  display: none;
}

#nav-screen.active,
#nav-screen.active ul li .second-pane,
#nav-screen.active ul li .second-pane ul li .third-pane {
  color: white;
  display: block;
  height: 100vh;
  padding: 75px 0px;
  position: absolute;
  top: 0;
  width: calc(100vw / 3);
  z-index: 998;
}

#nav-screen.active ul li {
  color: rgb(225,225,225);
  cursor: pointer;
  padding: 15px;
}

#nav-screen.active ul li:hover,
#nav-screen.active ul li:hover .second-pane ul li:hover {
  color: rgb(250,250,250);
  font-weight: 900;
}

#nav-screen.active ul li:hover .second-pane,
#nav-screen.active ul li:hover .second-pane ul li:hover .third-pane {
  font-weight: 300;
}

#nav-screen.active {
  background: rgba(0,0,0,.90);
}

#nav-screen.active ul li .second-pane,
#nav-screen.active ul li .second-pane ul li .third-pane {
  display: none;
}

#nav-screen.active ul li:hover .second-pane,
#nav-screen.active ul li:hover .second-pane ul li:hover .third-pane {
  display:block;
  left: calc(100vw / 3);
}

#nav-screen.active ul li .second-pane {
  background: rgba(50,50,50,.90);
}

#nav-screen.active ul li .second-pane ul li .third-pane {
  background: rgba(100,100,100,.90);
}