/* ------------------------------ */
/* -------- Illustration -------- */
/* ------------------------------ */

.section > .section__illustrations {
    max-width: 100%;
}

.section--illustrations {
    padding-top: 0;
}


@media all and (min-width: 992px) {

    .section--illustrations.section--full, .illustrations--desktop, .illustrations__zoom, .illustrations__zoom__wrapper {
        min-height: 610px;
    }
    
    .illustrations--desktop, .illustrations__zoom, .illustrations__zoom__wrapper {
        height: calc(100vh - var(--height-header));
    }

    .admin-bar .illustrations--desktop, .admin-bar .illustrations__zoom, .admin-bar .illustrations__zoom__wrapper {
        height: calc(100vh - var(--height-header) - 50px);
    }
    
    .illustrations--desktop {
        overflow: hidden;
        padding: 0 20px;
    }
    
    body.is-ready .illustrations--desktop {
        opacity: 1;
        -webkit-transition: opacity var(--transition-2);
        -o-transition: opacity var(--transition-2);
        transition: opacity var(--transition-2);
    }
    
    .illustrations--desktop svg {
        height: 100%;
        width: auto;
        max-width: 100%;
    }
    
    /* .illustrations--desktop svg.fadout .thema_illustrations, .illustrations--desktop svg.fadout .thema_illustration:not(.illustration--active), .illustrations--desktop svg .thema_illustration.illustration--active.fadeout { */
    .illustrations--desktop svg.fadout .illustration:not(.illustration--active), .illustrations--desktop svg .illustration.illustration--active.fadeout {
        opacity: 0;
        -webkit-transition: opacity 1s;
        -o-transition: opacity 1s;
        transition: opacity 1s;
    }
    
    .illustrations--desktop svg.disable a {
        pointer-events: none;
    }
    
    .illustrations__zoom {
        position: relative;
        -webkit-transform-origin: center;
            -ms-transform-origin: center;
                transform-origin: center;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        -o-transition: transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
    }
    
    .illustrations__zoom__wrapper {
        width: 100%;
        margin: 0 auto;
    }
    
    .illustrations__zoom__container {
        position: absolute;
        height: calc(100% - 2 * var(--spacing-7));
        margin: var(--spacing-7) 0;
    }

}


@media all and (min-width: 1240px) {

    .section--illustrations, .section > .section__illustrations {
        padding: 0 !important;
    }

}


@media all and (max-width: 1239.98px) and (min-width: 576px) {

    .illustration_tile:nth-child(2n) {
        text-align: right;
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .section > .section__illustrations {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-6);
    }

}


@media all and (max-width: 991.98px) and (min-width: 576px) {

    .illustration_tile {
        margin-top: -20%;
    }

    .illustration_tile:first-child {
        margin-top: 0;
    }

    .illustration_tile img {
        width: 55%;
    }

}


@media all and (max-width: 991.98px) {

    .illustration_tile a {
        display: block;
    }

}


@media all and (max-width: 767.98px) {

    .section > .section__illustrations {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

}


@media all and (max-width: 575.98px) {

    .illustration_tile {
        margin-top: var(--spacing-8);
    }
    .illustration_tile:first-child {
        margin-top: 0;
    }
    .illustration_tile img {
        width: 100%;
    }

}