.refBox-off{
    position: absolute;
    visibility: hidden;
    top: 70px;
    width:400px;
    height:260px;
    transition-delay: 10s;
    transition-duration: 1s;
    animation: hoverrefserviceend .5s forwards .1s;
    z-index: 55000;
}

.refBox-on{
    position: absolute;
    top: 70px;
    width: 0;
    height: 0;
    box-shadow: 0 5px 68px #4d4747;
    border-radius: 10px;
    background-color:white;
    animation: hoverrefservice .5s forwards;
    z-index: 60000;
}

.ref-head{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.ref-container-off{
    visibility: hidden;
    transition-duration:.1s;
}

.ref-container-on{
    visibility: visible;
    transition-delay: .2s;
    transition-duration: 1s;
}

.ref-content{

}
.ref-txt{
    display: flex;
    font-size: 20px;
    font-weight: 500;
    border-top: 1px solid #c5c5c5;
    height: 70px;
    align-items: center;
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
    padding-left: 10px;
}

.ref-txt:hover{
    background-color: #f1f1f1;
    transition: all .5s;
}

.pad-l{
    padding-right: 15px;
    padding-left: 5px;
}
.bord{
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-bottom: 5px;
}

@keyframes hoverrefservice {
    0% {
        width: 0;
        height: 0;
    }
    30%{
        width:400px;
        height:100px;
    }
    70%,100% {
        width:400px;
        height:260px;
    }

}
@keyframes hoverrefserviceend {
    0% {
        width:400px;
        height:260px;
    }
    50% {
        width:400px;
        height:30px;
    }
    70%,100% {
        width: 0;
        height:0;
    }

}