.btn {
    background-color: transparent;
    border-radius: 5px;
    font-weight: normal;
    font-size: 14px;
    height: 50px;
    line-height: 17px;
    text-align: center;
    cursor: pointer;
    display: block;
    position: relative;
    transition: box-shadow 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    padding: 0 1.5em;
    max-width: 200px;
}

.btn-blue {
    background-color: var(--main-blue);
    border: 1px solid var(--main-white);
    color: var(--main-white);
}

.btn-blue:hover {
    box-shadow: inset 15em 0 0 0 var(--main-white);
    border: 1px solid var(--main-blue);
    color: var(--main-blue);
}

.btn-service {
    width: 100%;
    max-width: 100%;
}
.btn-service:hover {
    box-shadow: inset 100em 0 0 0 var(--main-white);
    /* border: 1px solid var(--main-blue);
    color: var(--main-blue); */
}

.btn-vacancy {
    width: 50%;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    align-self: center;
    text-decoration: none;
}

/*GOOGLE MATERIAL RIPPLE CLICK EFFECT*/
span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background-color: var(--list-grey);
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}