.trans {
    transition: all 0.3s;
}

.ease-out {
    transition: all 0.2s ease-in-out;
}

.animated-UL a {
    position: relative;
}

.animated-UL a:before {
    content: "";
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--brand1);
    bottom: -3px;
    left: 0;
    pointer-events: none;
}

.animated-UL a:hover:before {
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.animated-UL a:hover {
    text-decoration: none;
}

.shadow-soft {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}