ug-grid.css

/*!
 * unlimitedGrid v3.0.0 | MIT License
 * Copyright (c) 2015-2020 Krzysztof Kula
 * - https://github.com/PixelT/unlimitedgrid
 * - http://pixelt.github.io/unlimitedGrid/
*/
.ug-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    max-width: 75rem;
    margin-right: auto;
    margin-left: auto;
}

.ug-row {
    margin-left: -0.9375rem;
    display: flex;
    flex-flow: row wrap;
}

[class*="ug-col"] {
    min-height: 0.0625rem;
    padding-left: 0.9375rem;
    box-sizing: border-box;
}

.ug-col-1 {
    flex: 1 1 8.33333%;
    max-width: 8.33333%;
}

.ug-col-2 {
    flex: 1 1 16.66667%;
    max-width: 16.66667%;
}

.ug-col-3 {
    flex: 1 1 25%;
    max-width: 25%;
}

.ug-col-4 {
    flex: 1 1 33.33333%;
    max-width: 33.33333%;
}

.ug-col-5 {
    flex: 1 1 41.66667%;
    max-width: 41.66667%;
}

.ug-col-6 {
    flex: 1 1 50%;
    max-width: 50%;
}

.ug-col-7 {
    flex: 1 1 58.33333%;
    max-width: 58.33333%;
}

.ug-col-8 {
    flex: 1 1 66.66667%;
    max-width: 66.66667%;
}

.ug-col-9 {
    flex: 1 1 75%;
    max-width: 75%;
}

.ug-col-10 {
    flex: 1 1 83.33333%;
    max-width: 83.33333%;
}

.ug-col-11 {
    flex: 1 1 91.66667%;
    max-width: 91.66667%;
}

.ug-col-12 {
    flex: 1 1 100%;
    max-width: 100%;
}

.ug-col-auto {
    width: auto;
    max-width: 100%;
    flex: none;
}

.ug-col-expand {
    flex: 1;
}

.ug-gutter-reset {
    margin-left: 0;
}

.ug-gutter-reset > [class*="ug-col"] {
    padding-left: 0;
}

.ug-gutter-reset[class*="ug-block"] > * {
    padding-left: 0;
}

@media (min-width: 30rem) {
    .ug-col-s-1 {
        flex: 1 1 8.33333%;
        max-width: 8.33333%;
    }
    .ug-col-s-2 {
        flex: 1 1 16.66667%;
        max-width: 16.66667%;
    }
    .ug-col-s-3 {
        flex: 1 1 25%;
        max-width: 25%;
    }
    .ug-col-s-4 {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
    }
    .ug-col-s-5 {
        flex: 1 1 41.66667%;
        max-width: 41.66667%;
    }
    .ug-col-s-6 {
        flex: 1 1 50%;
        max-width: 50%;
    }
    .ug-col-s-7 {
        flex: 1 1 58.33333%;
        max-width: 58.33333%;
    }
    .ug-col-s-8 {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
    }
    .ug-col-s-9 {
        flex: 1 1 75%;
        max-width: 75%;
    }
    .ug-col-s-10 {
        flex: 1 1 83.33333%;
        max-width: 83.33333%;
    }
    .ug-col-s-11 {
        flex: 1 1 91.66667%;
        max-width: 91.66667%;
    }
    .ug-col-s-12 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .ug-col-s-auto {
        width: auto;
        max-width: 100%;
        flex: none;
    }
    .ug-col-s-expand {
        flex: 1;
    }
}

@media (min-width: 48rem) {
    .ug-col-m-1 {
        flex: 1 1 8.33333%;
        max-width: 8.33333%;
    }
    .ug-col-m-2 {
        flex: 1 1 16.66667%;
        max-width: 16.66667%;
    }
    .ug-col-m-3 {
        flex: 1 1 25%;
        max-width: 25%;
    }
    .ug-col-m-4 {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
    }
    .ug-col-m-5 {
        flex: 1 1 41.66667%;
        max-width: 41.66667%;
    }
    .ug-col-m-6 {
        flex: 1 1 50%;
        max-width: 50%;
    }
    .ug-col-m-7 {
        flex: 1 1 58.33333%;
        max-width: 58.33333%;
    }
    .ug-col-m-8 {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
    }
    .ug-col-m-9 {
        flex: 1 1 75%;
        max-width: 75%;
    }
    .ug-col-m-10 {
        flex: 1 1 83.33333%;
        max-width: 83.33333%;
    }
    .ug-col-m-11 {
        flex: 1 1 91.66667%;
        max-width: 91.66667%;
    }
    .ug-col-m-12 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .ug-col-m-auto {
        width: auto;
        max-width: 100%;
        flex: none;
    }
    .ug-col-m-expand {
        flex: 1;
    }
}

@media (min-width: 62rem) {
    .ug-col-l-1 {
        flex: 1 1 8.33333%;
        max-width: 8.33333%;
    }
    .ug-col-l-2 {
        flex: 1 1 16.66667%;
        max-width: 16.66667%;
    }
    .ug-col-l-3 {
        flex: 1 1 25%;
        max-width: 25%;
    }
    .ug-col-l-4 {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
    }
    .ug-col-l-5 {
        flex: 1 1 41.66667%;
        max-width: 41.66667%;
    }
    .ug-col-l-6 {
        flex: 1 1 50%;
        max-width: 50%;
    }
    .ug-col-l-7 {
        flex: 1 1 58.33333%;
        max-width: 58.33333%;
    }
    .ug-col-l-8 {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
    }
    .ug-col-l-9 {
        flex: 1 1 75%;
        max-width: 75%;
    }
    .ug-col-l-10 {
        flex: 1 1 83.33333%;
        max-width: 83.33333%;
    }
    .ug-col-l-11 {
        flex: 1 1 91.66667%;
        max-width: 91.66667%;
    }
    .ug-col-l-12 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .ug-col-l-auto {
        width: auto;
        max-width: 100%;
        flex: none;
    }
    .ug-col-l-expand {
        flex: 1;
    }
}

@media (min-width: 75rem) {
    .ug-col-xl-1 {
        flex: 1 1 8.33333%;
        max-width: 8.33333%;
    }
    .ug-col-xl-2 {
        flex: 1 1 16.66667%;
        max-width: 16.66667%;
    }
    .ug-col-xl-3 {
        flex: 1 1 25%;
        max-width: 25%;
    }
    .ug-col-xl-4 {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
    }
    .ug-col-xl-5 {
        flex: 1 1 41.66667%;
        max-width: 41.66667%;
    }
    .ug-col-xl-6 {
        flex: 1 1 50%;
        max-width: 50%;
    }
    .ug-col-xl-7 {
        flex: 1 1 58.33333%;
        max-width: 58.33333%;
    }
    .ug-col-xl-8 {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
    }
    .ug-col-xl-9 {
        flex: 1 1 75%;
        max-width: 75%;
    }
    .ug-col-xl-10 {
        flex: 1 1 83.33333%;
        max-width: 83.33333%;
    }
    .ug-col-xl-11 {
        flex: 1 1 91.66667%;
        max-width: 91.66667%;
    }
    .ug-col-xl-12 {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .ug-col-xl-auto {
        width: auto;
        max-width: 100%;
        flex: none;
    }
    .ug-col-xl-expand {
        flex: 1;
    }
}

.ug-offset-1 {
    margin-left: 8.33333%;
}

.ug-offset-2 {
    margin-left: 16.66667%;
}

.ug-offset-3 {
    margin-left: 25%;
}

.ug-offset-4 {
    margin-left: 33.33333%;
}

.ug-offset-5 {
    margin-left: 41.66667%;
}

.ug-offset-6 {
    margin-left: 50%;
}

.ug-offset-7 {
    margin-left: 58.33333%;
}

.ug-offset-8 {
    margin-left: 66.66667%;
}

.ug-offset-9 {
    margin-left: 75%;
}

.ug-offset-10 {
    margin-left: 83.33333%;
}

.ug-offset-11 {
    margin-left: 91.66667%;
}

.ug-offset-12 {
    margin-left: 100%;
}

@media (min-width: 48rem) {
    .ug-offset-m-1 {
        margin-left: 8.33333%;
    }
    .ug-offset-m-2 {
        margin-left: 16.66667%;
    }
    .ug-offset-m-3 {
        margin-left: 25%;
    }
    .ug-offset-m-4 {
        margin-left: 33.33333%;
    }
    .ug-offset-m-5 {
        margin-left: 41.66667%;
    }
    .ug-offset-m-6 {
        margin-left: 50%;
    }
    .ug-offset-m-7 {
        margin-left: 58.33333%;
    }
    .ug-offset-m-8 {
        margin-left: 66.66667%;
    }
    .ug-offset-m-9 {
        margin-left: 75%;
    }
    .ug-offset-m-10 {
        margin-left: 83.33333%;
    }
    .ug-offset-m-11 {
        margin-left: 91.66667%;
    }
}

.ug-pull-1 {
    position: relative;
    left: -8.33333%;
}

.ug-pull-2 {
    position: relative;
    left: -16.66667%;
}

.ug-pull-3 {
    position: relative;
    left: -25%;
}

.ug-pull-4 {
    position: relative;
    left: -33.33333%;
}

.ug-pull-5 {
    position: relative;
    left: -41.66667%;
}

.ug-pull-6 {
    position: relative;
    left: -50%;
}

.ug-pull-7 {
    position: relative;
    left: -58.33333%;
}

.ug-pull-8 {
    position: relative;
    left: -66.66667%;
}

.ug-pull-9 {
    position: relative;
    left: -75%;
}

.ug-pull-10 {
    position: relative;
    left: -83.33333%;
}

.ug-pull-11 {
    position: relative;
    left: -91.66667%;
}

.ug-pull-12 {
    position: relative;
    left: -100%;
}

@media (min-width: 48rem) {
    .ug-pull-m-1 {
        position: relative;
        left: -8.33333%;
    }
    .ug-pull-m-2 {
        position: relative;
        left: -16.66667%;
    }
    .ug-pull-m-3 {
        position: relative;
        left: -25%;
    }
    .ug-pull-m-4 {
        position: relative;
        left: -33.33333%;
    }
    .ug-pull-m-5 {
        position: relative;
        left: -41.66667%;
    }
    .ug-pull-m-6 {
        position: relative;
        left: -50%;
    }
    .ug-pull-m-7 {
        position: relative;
        left: -58.33333%;
    }
    .ug-pull-m-8 {
        position: relative;
        left: -66.66667%;
    }
    .ug-pull-m-9 {
        position: relative;
        left: -75%;
    }
    .ug-pull-m-10 {
        position: relative;
        left: -83.33333%;
    }
    .ug-pull-m-11 {
        position: relative;
        left: -91.66667%;
    }
    .ug-pull-m-12 {
        position: relative;
        left: -100%;
    }
}

.ug-push-1 {
    position: relative;
    left: 8.33333%;
}

.ug-push-2 {
    position: relative;
    left: 16.66667%;
}

.ug-push-3 {
    position: relative;
    left: 25%;
}

.ug-push-4 {
    position: relative;
    left: 33.33333%;
}

.ug-push-5 {
    position: relative;
    left: 41.66667%;
}

.ug-push-6 {
    position: relative;
    left: 50%;
}

.ug-push-7 {
    position: relative;
    left: 58.33333%;
}

.ug-push-8 {
    position: relative;
    left: 66.66667%;
}

.ug-push-9 {
    position: relative;
    left: 75%;
}

.ug-push-10 {
    position: relative;
    left: 83.33333%;
}

.ug-push-11 {
    position: relative;
    left: 91.66667%;
}

.ug-push-12 {
    position: relative;
    left: 100%;
}

@media (min-width: 48rem) {
    .ug-push-m-1 {
        position: relative;
        left: 8.33333%;
    }
    .ug-push-m-2 {
        position: relative;
        left: 16.66667%;
    }
    .ug-push-m-3 {
        position: relative;
        left: 25%;
    }
    .ug-push-m-4 {
        position: relative;
        left: 33.33333%;
    }
    .ug-push-m-5 {
        position: relative;
        left: 41.66667%;
    }
    .ug-push-m-6 {
        position: relative;
        left: 50%;
    }
    .ug-push-m-7 {
        position: relative;
        left: 58.33333%;
    }
    .ug-push-m-8 {
        position: relative;
        left: 66.66667%;
    }
    .ug-push-m-9 {
        position: relative;
        left: 75%;
    }
    .ug-push-m-10 {
        position: relative;
        left: 83.33333%;
    }
    .ug-push-m-11 {
        position: relative;
        left: 91.66667%;
    }
    .ug-push-m-12 {
        position: relative;
        left: 100%;
    }
}

[class*="ug-hide"] {
    display: block;
}

[class*="ug-show"] {
    display: none;
}

@media (min-width: 48rem) {
    .ug-show-m {
        display: block;
    }
    .ug-hide-m {
        display: none;
    }
}

[class*="ug-block"] > * {
    min-height: 0.0625rem;
    padding-left: 0.9375rem;
    box-sizing: border-box;
}

ul[class*="ug-block"],
ol[class*="ug-block"] {
    list-style: none;
    padding-left: 0;
}

.ug-block-1 > * {
    flex: 1 1 8.33333%;
    max-width: 8.33333%;
}

.ug-block-2 > * {
    flex: 1 1 16.66667%;
    max-width: 16.66667%;
}

.ug-block-3 > * {
    flex: 1 1 25%;
    max-width: 25%;
}

.ug-block-4 > * {
    flex: 1 1 33.33333%;
    max-width: 33.33333%;
}

.ug-block-5 > * {
    flex: 1 1 41.66667%;
    max-width: 41.66667%;
}

.ug-block-6 > * {
    flex: 1 1 50%;
    max-width: 50%;
}

.ug-block-7 > * {
    flex: 1 1 58.33333%;
    max-width: 58.33333%;
}

.ug-block-8 > * {
    flex: 1 1 66.66667%;
    max-width: 66.66667%;
}

.ug-block-9 > * {
    flex: 1 1 75%;
    max-width: 75%;
}

.ug-block-10 > * {
    flex: 1 1 83.33333%;
    max-width: 83.33333%;
}

.ug-block-11 > * {
    flex: 1 1 91.66667%;
    max-width: 91.66667%;
}

.ug-block-12 > * {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (min-width: 48rem) {
    .ug-block-m-1 > * {
        flex: 1 1 8.33333%;
        max-width: 8.33333%;
    }
    .ug-block-m-2 > * {
        flex: 1 1 16.66667%;
        max-width: 16.66667%;
    }
    .ug-block-m-3 > * {
        flex: 1 1 25%;
        max-width: 25%;
    }
    .ug-block-m-4 > * {
        flex: 1 1 33.33333%;
        max-width: 33.33333%;
    }
    .ug-block-m-5 > * {
        flex: 1 1 41.66667%;
        max-width: 41.66667%;
    }
    .ug-block-m-6 > * {
        flex: 1 1 50%;
        max-width: 50%;
    }
    .ug-block-m-7 > * {
        flex: 1 1 58.33333%;
        max-width: 58.33333%;
    }
    .ug-block-m-8 > * {
        flex: 1 1 66.66667%;
        max-width: 66.66667%;
    }
    .ug-block-m-9 > * {
        flex: 1 1 75%;
        max-width: 75%;
    }
    .ug-block-m-10 > * {
        flex: 1 1 83.33333%;
        max-width: 83.33333%;
    }
    .ug-block-m-11 > * {
        flex: 1 1 91.66667%;
        max-width: 91.66667%;
    }
    .ug-block-m-12 > * {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.ug-debug {
    position: relative;
}

.ug-debug::after {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100%;
    margin: 0 auto;
    content: '';
    z-index: -1;
    left: 0.9375rem;
    right: 0.9375rem;
    max-width: 73.125rem;
    background: repeating-linear-gradient(90deg, rgba(41, 128, 185, 0.1) 0, rgba(41, 128, 185, 0.1) calc(8.33333% - 15px), rgba(52, 152, 219, 0.2) calc(8.33333% - 15px), rgba(52, 152, 219, 0.2) calc(8.33333% + (15px / 12)));
}

[class*="ug-col"] {
    position: relative;
}

[class*="ug-col"]:hover::after {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.8);
    color: #eeeeee;
    white-space: nowrap;
    content: attr(class);
}