html{
    /* Will break on other websites with different rem settings. */
    font-size:16px;
}

#slider-home{
    width:100vw;
    height:50vh;
    position:relative;
    display:flex;
    flex-direction: row;
    align-items: flex-start;
    border-bottom:5px solid #003A61;
}

#slider-home .employeeSlide{
    display: flex;
    flex-grow:1;
    height: 100%;
    position: relative;
    overflow: hidden;
    align-items:center;
    justify-content: center;
    flex-direction:row;
    transition:1000ms ease-in-out;
}

#slider-home .employeeSlide img{
    transition:1500ms ease-in-out;
    filter:saturate(0) blur(1px);
}

#slider-home .employeeSlide.activeSlide img,
#slider-home .employeeSlide:hover img{
    filter:saturate(1) blur(0px);
}

#slider-home .employeeSlide.activeSlide{
    flex-grow:12;
}

#slider-home .employeeSlide:hover{
    cursor:pointer;
    flex-grow:11;
}

#slider-home .employeeSlide .employeeSlideContent{
    display:none;
    width:60vw;
    position:absolute;
    height:auto;
}



.employeeSlideContent *{
    letter-spacing: 0px;
    color: white;
    padding-bottom:0px;
}

#slider-home .employeeSlide img{
    position:absolute;
    height:100.1%;
    width:100.1%;
    object-fit:cover;
    left:0;
    top:0;
    z-index:-1;
}

#slider-home .employeeSlide .employeeFunction{
    font-size: 0.9rem;
    line-height: 1.2rem;
}

#slider-home .employeeSlide .employeeQuote{
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom: 2rem;
    text-shadow: 1.5px 0.5px rgba(0,0,0,0.2);
}

#slider-home .employeeSlide .employeeName{
    width: fit-content;
    padding-bottom: 0;
    font-size: 1.5rem;
    padding-bottom:10px;
    border-bottom: 3px solid #003A61;
    margin-bottom: 1rem;
}

#slider-home .employeeSlide .employeeQuote:after{
    content: '';
    margin-top: 10px;
    width: 70%;
    height: 0;
    border-bottom: 3px solid #003A61;
    display: block;
}

#slider-home .employeeSlide button{
    border: none;
    padding: 3px 0px 0px 12px;
    border-radius: 0 !important;
    color: white;
    transition: 200ms ease-in-out;
    background: #003A61;
    margin-top: 10px;
    font-family: Montserrat;
    font-weight: bolder;
}

#slider-home .employeeSlide button:hover{
    cursor:pointer;
    padding-left:20px;
}


@media screen and (max-width:1200px){

    #slider-home .employeeSlide #employeeName{
        margin-top:0;
    }
}

@media screen and (max-width:768px){
    #slider-home{
        height:50vh;
    }
    
    #slider-home .employeeSlide .employeeSlideContent{
        transform:none;
    }

    .employeeSlideContent .employeeFunction{
        display:none;
    }

    #slider-home .employeeSlide .employeeSlideContent button{
    border: none;
    border-radius: 5px !important;
    font-size: 1rem;
    }

    
}