.router_transition_wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	left:0;top:0;
    background: #f0f2f5;
    z-index: 999;
    .fade-enter {
      opacity: 0;
      z-index: 1;
      transform: translateX(-100%);
    }

    .fade-enter.fade-enter-active {
      opacity: 1;
      transition: all 250ms ease-in;
      transform: translateX(0);
    }

    .fill {
    	position: absolute;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    }
    .content {
    	.fill;
    	top: 40px;
      	text-align: center;
    }
    .nav {
    	padding: 0;
      	margin: 0;
      	position: absolute;
      	top: 0;
      	height: 40px;
      	width: 100%;
      	display: flex;
      	z-index: 10;
      	background-color: #fff;
    }
    .navItem {
    	text-align: center;
    	flex: 1;
    	list-style-type: none;
    	padding: 10px;
    	&:hover {
			color: rgba(0,0,0,.5);
    	}
    }
    .hsl {
    	.fill;
    	color: white;
    	padding-top: 20px;
    	font-size: 30px;
    }
    .rgb {
    	.fill;
      	color: white;
      	padding-top: 20px;
      	font-size: 30px;
    }	
}
