#me-right-slide .timeline{
    position: absolute;
    float: right;
    right: 60%;
    top: 8vh;
    height: 85%;
    width: 4px;
    background: white;
    
}

#me-right-slide .timeline .timelines{
    position: absolute;
    float: right;
    right: -3vw;
    top: 0vh;
    height: 4px;
    width: 3vw;
    background: white;
    /* inset: 0 0 0 0; */
    transform: translateY(calc( (var(--lines) - 1) * (83 / var(--quantity)) * 6.7px) );    
}

#me-right-slide .bio-timeline{
    position: absolute;
    float: right;
    right: 60%;
    top: 8vh;
    height: 85%;
    width: 4px;
    background: white;
}

#me-right-slide .bio-timeline .bio-timelines{
    position: absolute;
    float: right;
    right: 0vw;
    top: 0vh;
    height: 4px;
    width: 6vw;
    background: white;
    transform: translateY(calc( (var(--bio) - 1) * (82 / var(--quantity)) * 6px) );
}


#me-right-slide .career, .bios{
    position: absolute;
    float: left;
    margin-left: -1.5vw;
    top: -4vh;
    width: 6vw;
    height: 8vh;
    left: 55px;
    object-fit: contain;    
}

#me-right-slide .bios{
    left: -55px !important;
}


#me-right-slide .timelines-icon-description{
    position: absolute;
    float: right;
    right: -12vw;
    top: -1.3vh;    
    color: white;
}

#me-right-side-card{
    position: absolute;    
    float: right;
    top: 0;     
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    background: black;
    transition: background .5s .5s ease-out;
}

img#me:hover ~ #me-right-slide > #me-right-side-card{
    background: transparent;
}   

#me-banner-job-exp .me-card-element-right{
    position: absolute;
    float: right;
    right: 8px;
    top: 15vh;    
    width: 48%;
    height: 10vh;
    background: linear-gradient(to top right, #FF2DF1, #F6DC43);
    border-radius: 8px;    
}

#me-banner-job-exp .me-card-element-right{
    transform: translateY(calc( (var(--expCard) - 1) * (62 / var(--quantity)) * 1.01vh) );
}

#me-banner-job-exp .me-card-element-right .me-right-image{
    position: absolute;
    float: left;
    left: -3vw;
    top: 0;
    width: 5vw;
    height: 10vh;    
    transform: translate(60%, 50%);
    transition: 2s ease-in-out;
    border-radius: 50%;
}

#me-banner-job-exp .me-card-element-right .me-card-title-right{
    position: absolute;
    top: 2.5px;  
    width: 100%;
    height: 20px;
    text-align: center;
    /* border: 1px solid blue; */
}

#me-banner-job-exp .me-card-element-right .me-card-word-right{
    position: absolute;    
    width: 100%;    
    height: 50%;
    float: right;
    top: 50%;
    right: 50%;   
    transform: translate(50%, -30%);      
    /* border: 1px solid blue; */
}

#me-banner-job-exp .me-card-element-right .me-card-word-right ul{ 
    position: absolute;    
    display: flex;
    /* display: grid;     */
    top: 50%;
    left: 50%;    
    transform: translate(-50%,-50%);
    overflow: hidden;  
    white-space: nowrap; 
}

#me-banner-job-exp .me-card-element-right .me-card-word-right ul li{
    list-style: none;    
    margin: 0 2.5px;     
    text-align: center; 
}



#me-banner-bio-hobbies .me-card-element-right
{
    position: absolute;
    float: left;
    left: 9px;
    top: 13.5vh;    
    width: 36%;
    height: 28vh;
    /* background: linear-gradient(to top right, #FF2DF1, #F6DC43); */
    border-radius: 8px;
    color: white;
    text-align: center;
}
#me-banner-bio-hobbies .me-card-element-right{
    transform: translateY(calc( (var(--bioCard) - 1) * (75 / var(--quantity)) * 1vh) );
}
#me-banner-bio-hobbies .me-card-element-right .me-card-title-right{
    position: absolute;
    top: 2.5px;  
    width: 100%;
    height: 20px;
    text-align: center;
    /* border: 1px solid blue; */
}
#me-banner-bio-hobbies .me-card-element-right .me-card-word-right{
    position: absolute;    
    width: 100%;    
    height: 50%;
    float: right;
    top: 50%;
    right: 50%;   
    transform: translate(50%, -65%);
}


#me-banner-bio-hobbies .me-card-element-right .me-card-word-right ul li{
    list-style: none;    
    margin: 3px 0px;     
    text-align: center; 
}