#me-right-slide{
    position: absolute;
    float: right;
    right: 0;
    top: 10vh;
    width: 0%;
    height: 90vh;
    background: black;
    box-shadow: 0px 0px 5px 15px rgba(0, 0, 0, .4);

    transition: .5s ease-in-out;
    overflow: hidden;

    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px   
}

#me-left-slide{
    position: absolute;
    float: left;
    left: 0;
    top: 10vh;
    width: 0%;    
    height: 90vh;
    background: black;
    box-shadow: 0px 0px 5px 15px rgba(0, 0, 0, .4);
    
    transition: .5s ease-in-out;
    overflow: hidden;  

    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    overflow-y: auto;
}

/* width */
::-webkit-scrollbar, #me-left-slide {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey; 
  border-radius: 2px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: red; 
  border-radius: 2px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}


img#me:hover ~ #me-right-slide
{
    width: 39%;
    z-index: 5;   
    background: black !important;     
}

img#me:hover ~ #me-left-slide
{
    width: 32.5%;
    z-index: 5; 
    background: black !important;      
}

img#me:not(:hover) ~ #me-right-slide
{       
    z-index: 5;
    background: black !important;
    transition: 1s 1s ease-out;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    overflow: hidden;
}

img#me:not(:hover) ~ #me-left-slide
{       
    z-index: 5;
    background: black !important;
    transition: 1s 1s ease-out;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    overflow: hidden;
}

img#me:not(:hover) ~ #me-left-slide:hover{
    width: 32.5%;   
    z-index: 5;
    box-shadow: 0px 0px 5px 15px rgba(0, 0, 0, .4);
    overflow-y: auto;
}

#me-left-slide:hover > #me-left-side-card{
    width: 0;
}

#me-left-slide:not(:hover) > #me-left-side-card{
    transition: .5s .5s ease-out;
    width: 100%;
    background: black;    
}