.references-grid {
    width: calc(100% - 40px);
    height: auto;
    min-height: 100vh;
    position: relative;
    margin: 20px 20px 100px 20px;
}
.references-grid .thumbnailWrapper {
    float: left;
    width: 100%;
    -webkit-transition: transform 1.5s ease;
    transition: transform 1.5s ease;
}
.references-grid .thumbnailWrapper {
    -webkit-transform: translateY(300%);
    transform: translateY(300%);
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}
@media (min-width: 500px) {
    .references-grid .thumbnailWrapper {
        float: left;
        width: 33.33%;
    }
    .references-grid .thumbnailWrapper:nth-child(3n-2) {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
    }
    .references-grid .thumbnailWrapper:nth-child(3n-1) {
        -webkit-transform: translateY(200%);
        transform: translateY(200%);
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .references-grid .thumbnailWrapper:nth-child(3n+0) {
        -webkit-transform: translateY(300%);
        transform: translateY(300%);
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
    }
}
@media (min-width: 850px) {
    .references-grid .thumbnailWrapper {
        float: left;
        width: 25%;
        margin-bottom: 20px;
    }
    /* 3x3 cf. manageReferenceThumbnails */
    .references-grid .thumbnailWrapper:nth-child(3n-2) {
        transform: translateY(100%);
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
    }
    .references-grid .thumbnailWrapper:nth-child(3n-1) {
        transform: translateY(200%);
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .references-grid .thumbnailWrapper:nth-child(3n+0) {
        transform: translateY(300%);
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
    }
    .references-grid .thumbnailWrapper:not(.isAtTheEndOfLine) {
        margin-right: 20px;
    }
    /* 9x9 cf. manageReferenceThumbnails */
    .references-grid .thumbnailWrapper {
        width: calc(25% - 13.333px);
    }
    .references-grid .thumbnailWrapper.isHorizontal {
        width: calc(50% - 13.333px);
    }
    .references-grid .thumbnailWrapper:not(.isHorizontal) .referenceThumbnail {
        /*padding-bottom: calc((((100vw - 40px - 20px) / 2) - 3.333px) / 1.333);*/
        padding-bottom: calc(((50vw - 30px) - 3.333px) / 1.333);
    }
}
.thumbnailWrapper:nth-child(10n) .referenceThumbnail{ background: rgb(100, 100, 100); }
.thumbnailWrapper:nth-child(10n-1) .referenceThumbnail{ background: rgb(110, 110, 110); }
.thumbnailWrapper:nth-child(10n-2) .referenceThumbnail{ background: rgb(120, 120, 120); }
.thumbnailWrapper:nth-child(10n-3) .referenceThumbnail{ background: rgb(130, 130, 130); }
.thumbnailWrapper:nth-child(10n-4) .referenceThumbnail{ background: rgb(140, 140, 140); }
.thumbnailWrapper:nth-child(10n-5) .referenceThumbnail{ background: rgb(150, 150, 150); }
.thumbnailWrapper:nth-child(10n-6) .referenceThumbnail{ background: rgb(160, 160, 160); }
.thumbnailWrapper:nth-child(10n-7) .referenceThumbnail{ background: rgb(170, 170, 170); }
.thumbnailWrapper:nth-child(10n-8) .referenceThumbnail{ background: rgb(180, 180, 180); }
.thumbnailWrapper:nth-child(10n-9) .referenceThumbnail{ background: rgb(190, 190, 190); }

.references-grid.first-load-done .thumbnailWrapper {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.references-grid.first-animation-done .thumbnail {
    -webkit-transition: transform .5s ease;
    transition: transform .5s ease;
    /*transition-delay: 1s;*/
}
.references-grid.first-animation-done .thumbnail:not(.loading):not(.loaded) {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
.references-grid.first-animation-done .thumbnail.loaded {
    -webkit-transform: scale(1);
    transform: scale(1);
}