//
// Viewport
//


.viewport {

    &--center {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
        align-content: stretch;
        align-items: center;
        box-sizing: border-box;
    }

    &--row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
        box-sizing: border-box;

        &-center {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: center;
            align-content: stretch;
            align-items: center;
            box-sizing: border-box;
        }
    }

    &--column {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: stretch;
        align-items: stretch;
        box-sizing: border-box;

        &-center {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            justify-content: center;
            align-content: stretch;
            align-items: center;
            box-sizing: border-box;
        }
    }

    &--fullsize {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    &__item--flex-min {
        flex: 0.00001 0 auto;
        align-self: auto;
        box-sizing: border-box;
    }

    &__item--flex {
        flex: 1 1 auto;
        align-self: auto;
        box-sizing: border-box;
    }

    &__item {
        flex: 0 0 auto;
        align-self: auto;
        box-sizing: border-box;
    }


}