:root {

    /* TRANSITIONS */
    /* ------------------------------------ */

    --tr-default:   all 0.25s ease-in-out;
    --tr-checkbox:  all 0.15s ease-in-out;
    --tr-button:    all 0.15s ease-in-out;
    --tr-header:    all 0.2s ease-in-out;
    --tr-flyout:    all 0.35s ease;

}

/* APLLY TRANSITION */
/* ------------------------------------ */

.module *,
section *,
.section * {
    transition: var(--tr-button);
}

ul *,
ol *,
ul *:before,
ol *:before {
    transition: var(--tr-button);
}

button *,
.button *,
button:hover,
.button:hover,
button:active,
.button:active,
button:focus,
.button:focus,
button:before,
.button:before,
button:after,
.button:after {
    transition: var(--tr-button);
}

.header *,
.footer *,
.stt {
    transition: var(--tr-header);
}

.link:before,
.link:after {
    transition: var(--tr-button);
}

.toolbar *,
.toolbar *:before,
.toolbar *:after {
    transition: var(--tr-button);
}

.module.video.yt-wrapper {
    transition: var(--tr-flyout);
}