/* @group About
------------------------------------ */
.about .content { color: var(--main-grey); }
.about .content h1 { text-transform: uppercase; }
.about .content ul { list-style: disc outside; padding-left: 2rem; }
.about .content ul li { font-weight: 700; }
.about .image { overflow: visible; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.16); }
@media only screen
and (min-width : 961px) {
    .about:not(.history) { padding: 22.1rem 0 10.5rem; }
    .about.history { padding: 0 0 10.5rem; }

    .about .content { flex: 0 1 70%; max-width: 70%; padding: 0 7rem 0 .25rem; }
    .about .content h1 { margin: 0 0 2.3rem; }
    .about .content p:not(:last-of-type) { margin: 0 0 2.3rem; }
    .about .content ul { columns: 2; column-gap: 10rem; margin: 5.5rem 0 0; }
    .about .content ul li { width: 100%; margin: 0 0 .75rem; }

    .about .image { flex: 0 1 30%; max-width: 30%; padding: 0; height: 62.5rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .about:not(.history) { padding: 7.5rem 0 2rem; }
    .about.history { padding: 0 0 2rem; }

    .about .content,
    .about .image { flex: 0 1 100%; }

    .about .content h1 { font-size: 1.3em; margin: 0 0 1rem; }
    .about .content p { font-size: 1.3em; margin: 0 0 .5rem; }
    .about .content ul li { font-size: 1.3em; }

    .about .image { -ms-flex-order: -1; order: -1; height: 28.6rem; padding: 0; margin: 0 2rem 2rem; }
}

.media { color: var(--main-grey); background-color: var(--light-grey); }
.media .row { position: relative; }

.media .splide .box figure { overflow: visible; display: inline-block; width: 100%; height: auto; }

.media .back-top { position: absolute; right: 0; bottom: 0; }
.media .back-top .bttn { position: relative; font: 400 1.5rem / 1em var(--roboto-font); }
.media .back-top .bttn::after { content: ''; display: inline-block; height: 100%; background-image: url('../../img/layout/icons/arrow-up.svg'); background-repeat: no-repeat; background-position: center center; }
.media .back-top .bttn:hover::after { background-image: url('../../img/layout/icons/arrow-up-white.svg'); }
@media only screen
and (min-width : 961px) {
    .media { padding: 7.1rem 0 22.9rem; }

    .media h2 { margin: 0 0 8rem; }

    .media .splide { padding-right: 11rem; padding-left: 11rem; }
    .media .splide .box figure { margin: 0 0 3.5rem; }
    .media .splide .box p { line-height: 1.3em; }
    .media .splide .box p:not(:last-of-type) { margin: 0 0 1rem; }
    .media .splide .box p:last-of-type { margin: 0 0 3.5rem; }
    .media .splide .box .bttn { min-width: 12rem; height: 4rem; }

    .media .back-top { right: 10rem; bottom: -9rem; }
    .media .back-top .bttn {min-width: 15rem; height: 4rem; }
    .media .back-top .bttn::after { width: 2rem; background-size: 2rem; margin-left: .5rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 1439px) {
    .media .back-top { right: 5rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {

    .media {padding: 2rem 0 10rem; }

    .media article { padding: 0 0 0 2rem; }
    
    .media h2 { font-size: 1.3em; margin: 0 0 1rem; }

    .media .splide .splide__track { padding-right: 3rem!important; }
    .media .splide .box figure { margin: 0 0 1rem; }
    .media .splide .box p { font-size: 1.3em; line-height: 1.3em; margin: 0 0 1rem; }
    .media .splide .box .bttn { min-width: 11rem; height: 4rem; font-size: 1.4em; }

    .media .back-top { right: 2rem; bottom: -5rem; }
    .media .back-top .bttn { min-width: 16rem; height: 4rem; font-size: 1.5em; }
    .media .back-top .bttn::after { width: 2.5rem; background-size: 2.5rem; margin-left: .5rem; }
}
/* @end */


/* Animations */
.about figure,
.about article { opacity: 0; }

@media only screen
and (min-width : 961px) {
    .about.animateActive article { animation: fade 1s 0.6s forwards; }
    .about.animateActive figure { animation: fade 1.3s 1s forwards; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .about.animateActive figure { animation: fade 1s 0.6s forwards; }
    .about.animateActive article { animation: fade 1.3s 1s forwards; }
}


.media h2,
.media .box:nth-child(1),
.media .box:nth-child(2),
.media .box:nth-child(3),
.media .box:nth-child(4),
.media .splide__arrows { opacity: 0; }

.media.animateActive h2 { animation: fade 1s 0.3s forwards; }
.media.animateActive .box:nth-child(1) { animation: fade 1.3s .5s forwards; }
.media.animateActive .box:nth-child(2) { animation: fade 1.3s .6s forwards; }
.media.animateActive .box:nth-child(3) { animation: fade 1.3s .7s forwards; }
.media.animateActive .box:nth-child(4) { animation: fade 1.3s .8s forwards; }
.media.animateActive .splide__arrows { animation: fade 1.3s .9s forwards; }