.portraitchinois-challenge {
    -webkit-animation: colors-bg 20s infinite ease-out, media-opacity 2s ease !important;
    animation: colors-bg 20s infinite ease-out, media-opacity 2s ease !important;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes colors-bg {
    12.5% {background-color: #105688}
    25% {background-color: #051d66}
    37.5% {background-color: #670009}
    50% {background-color: #154834}
    62.5% {background-color: #343061}
    75% {background-color: #c24123}
    87.5% {background-color: #614644}
    100% {background-color: #000018}
}
@keyframes colors-bg {
    12.5% {background-color: #105688}
    25% {background-color: #051d66}
    37.5% {background-color: #670009}
    50% {background-color: #154834}
    62.5% {background-color: #343061}
    75% {background-color: #c24123}
    87.5% {background-color: #614644}
    100% {background-color: #000018}
}


.media-actived {
    -webkit-animation: media-opacity 3s ease;
    animation: media-opacity 3s ease;
}

@-webkit-keyframes media-opacity {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes media-opacity {
    0% {opacity: 0}
    100% {opacity: 1}
}


.video-actived {
    -webkit-animation: video-opacity 3s ease;
    animation: video-opacity 3s ease;
}

@-webkit-keyframes video-opacity {
    0% {opacity: 0}
    100% {opacity: 1}
}

@keyframes video-opacity {
    0% {opacity: 0}
    100% {opacity: 1}
}



header a, p a, .footer-left > a {
    position: relative;
    padding: 2px 0;
}

header a::after, p a::after, .footer-left > a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-font);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s;
}

header a:hover:after, a:hover:after, p a:hover:after, .footer-left > a:hover:after {
    transform-origin: bottom left;
    transform: scaleX(1);
}