*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;   
}

body{
    background: url(../img/mountain_1.jpg) center/cover no-repeat;
    backdrop-filter: grayscale(1);
    font-family: roboto;
    color: #fff;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .6s ease all;
}
body.active{
    backdrop-filter: grayscale(0);
}


nav{
    width: 128px;
    border-radius: 1rem;
    background: #fff;
    position: relative;
    transition: .6s ease ;
    height: 650px;
}

nav.active{
    width: 256px;
}

.line {
    position: absolute;
    right: -15%;
    width: 50px;
    height: 50px;
    background: #FFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.164);
    z-index: 9;
    cursor: ew-resize;
    border-radius: 50%;
    top: 50%;
    transform: translate(15%,-50%);


}

.none{
    opacity: 0;
}

.last-img , .first-img{
    width: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: .6s ease all;
    transform: translate(-50%,-50%);
}

.first-img{
    overflow: 0;
}

.last-img.active{
    opacity: 0;
    pointer-events: none;
}

.first-img.active{
    opacity: 1;
}

.logo {
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid gray;
    display: flex;
    align-items: center;
    overflow: hidden;    
}

.logo img{
    width: 4rem;
    margin-left: 2rem;
}

nav ul {
    padding-top: 1rem;
}

nav ul li {
   padding: 1rem 0;
   transition: .6s ease all;
   position: relative;
   text-transform: capitalize;  
   margin-left: 3rem;
   width: 100%;
   display: flex;
   align-items: center;
   list-style: none;
}



.information{
    padding: 1rem;
    background: #ffffffd8;
    position: absolute;
    right: -10rem;
    color: #000;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: .6s .2s ease all;
    border-radius: .5rem;
    opacity: 0;
    width: 0;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    transform-origin: right;
}

.information.active{
    display: none;
}

.information::before{
    content: "";
    position: absolute;
    left: -13.5%;
    top: 50%;
    transform: translateY(-50%);
    transition: .6s ease all;
    border: 10px solid transparent;
    border-right-color: #ffffffd8;
}
.l.information{
   left: -15rem;
}

.l.information::before{
    border: 10px solid transparent;
    border-left-color: #ffffffd8;
    left: 9.36rem;
}
nav ul li:hover .information{
    opacity: 1;
    transform: translateY(-50%) translateX(0%);
    width: 150px;
}


nav ul li img{
    width: 30px;
}

nav ul li span , .logo span{
    opacity: 0;
    transition: .6s ease all;
    margin-left: 1rem;
    visibility: hidden;
}

nav ul li span.active , .logo span.active{
    color: #000;
    opacity: 1;
    visibility: visible;
}