body > aside {

    position: fixed;
    top: calc(50% - 150px);
    height: 300px;
    background: black url(../img/aside-off.png) center right no-repeat;
    left: -20rem;
    width: 20rem;
    padding: 1rem;

    &:hover, &:focus {
	      left: 0;
	      background: $bg-main url(../img/aside-on.png) center left no-repeat;
	      box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
	      width: auto;
	      border-right: 2rem solid black;
	      padding: 0;

	      nav {
	          display: block;
	          background: $bg-main url(../img/aside-on.png) center left no-repeat;
	          height: 100%;

            h3 {
		            a:link, a:hover, a:active, a:visited {
			              color: transparent;
		            }
		        }
	      }

	      ul li:hover {
	   		    a:hover {
		            text-decoration: none;
		        }
            span {
		            display: block;
	          }
	          &:first-child {
		            transform: scale(1.4) rotate(4deg) translateX(-0.75vw);
		            a {
		                transform: rotate(-4deg);
		            }
	          }
	          &:nth-child(2) {
		            transform: scale(1.4) rotate(-6deg) translateX(-0.5vw);
		            a {
		                transform: rotate(6deg);
		            }
	          }
	          &:last-child {
		            transform: scale(1.4) rotate(5deg) translateX(-0.5vw);
		            a {
		                transform: rotate(-5deg);
		            }
	          }
	      }
    }

    nav {
		    position: relative;
	      margin-left: 3rem;
	      display: none;
	      line-height: 30rem;

	      h3 {
	          display: inline-block;
	          background: url(../img/logo-ps.svg) 3rem center / 10rem fixed no-repeat;
	          width: 10rem;
	          height: 100%;
	          vertical-align: top;
	          color: transparent;
		
	          a {
		            display: block;
		            height: 100%;
		            width: 100%;
		            line-height: 30rem;
		            color: transparent;
		            &:hover {
		                color: transparent;
		            }
	          }
	      }

	      ul {
	          list-style: none;
	          display: inline-block;
	          height: 100%;

	          li {
		            display: block;
		            padding: 0 2rem;
		            font-size: 3rem;
		            float: left;
		            padding-left: 1rem;
		            z-index: 400;
		            overflow: hidden;
		            width: 10rem;
		            height: 100%;

		            a {
		                color: black;
		                text-decoration: none;
		                display: block;
		                height: 100%;
		                width: 100%;
		                z-index: 404;

                    &:link, &:visited {
			                  color: inherit;
			              }

		                &:hover {
			                  font-size: 200%;
			                  color: inherit;
			                  z-index: 404;
		                }
		            }

		            span {
		                display: none;
		                z-index: 400;
		                position: relative;
		                font-size: 1.25rem;
		                line-height: 1.6rem;
		                text-align: center;
		                margin: -3rem -2rem 0 -1rem;
		            }

		            &:first-child {
		                background: $bg-gfx;
		            }

		            &:nth-child(2) {
		                background: $bg-txt;
		            }
                
		            &:last-child {
		                background: $bg-vda;
		            }
	          }
	      }
    }
}