a,
svg {
    transition: var(--transition);
}

a:hover,
a:hover svg {
    color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
 * Transitions
 * -------------------------------------------------------------------------- */

/*.vpo {*/
/*    transition: all 1s ease-in-out;*/
/*}*/

/*.vpo:not(.vpo-active) {*/
/*    opacity: 0;*/
/*}*/

/* -----------------------------------------------------------------------------
 * Footer
 * -------------------------------------------------------------------------- */

.SiteFooter {
    background-color: var(--color-blue2);
    color: #ffffff;
}

.SiteFooter > .Lower {
    background-color: var(--color-green);
    color: var(--color-blue2);
}

.SiteFooter .SocialAction svg {
    color: #ffffff;
}

.SiteFooter .SocialAction:hover svg {
    color: var(--color-accent);
}

.SiteFooter .FollowSeparatorVertical {
    background-color: var(--color-green);
}

.SiteFooter .FollowSeparatorHorizontal {
    background-color: rgba(255, 255, 255, 0.2);
}

.SiteFooter .menu a:not(:hover) {
    color: inherit;
}

.SiteFooter .menu a:hover {
    color: var(--color-accent);
}