/*
 * Additional custom style sheet for Cabin theme. Designed specifically for Twig & Thistle Phorography
 * Copyright 2020 AndersonDigital
 * Author: AndersonDigital
 *
 * All code contained within this file is covered by copyright. All rights remain with the contents original authors
 */

.flexbox-wrapper {
    margin: 15px auto;
}

.flexbox-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 5px auto;
}

.text-center {
    justify-content: center;
    text-align: center;
}

.flexbox-column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    min-width: 25px;
    padding-bottom: 25px;
}

/**
 * Anything under 768px gets reduced to a max of 2 columns
 */
@media screen and (max-width: 768px) {
    .flexbox-column-1,
    .flexbox-column-2,
    .flexbox-column-3,
    .flexbox-column-4,
    .flexbox-column-5,
    .flexbox-column-6 {
        display: flex;
        flex-direction: column;
        flex-basis: 50%;
        /*max-width: 50%;*/
    }

    .flexbox-column-7,
    .flexbox-column-8,
    .flexbox-column-9,
    .flexbox-column-10,
    .flexbox-column-11,
    .flexbox-column-12 {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        min-width: 100%;
        /*max-width: 100%;*/
    }

    .flexbox-offset-1,
    .flexbox-offset-2,
    .flexbox-offset-3,
    .flexbox-offset-4,
    .flexbox-offset-5,
    .flexbox-offset-6 {
        margin-left: 0;
        flex-shrink: 100;
    }

    .flexbox-offset-7,
    .flexbox-offset-8,
    .flexbox-offset-9,
    .flexbox-offset-10,
    .flexbox-offset-11 {
        margin-left: 50%;
        flex-shrink: 100;
    }
}

/**
 * At screens less than 1366px but more than 768px, the grid reduces to 6 columns automatically combining columns
 */
@media screen and (min-width: 768px) {
    .flexbox-column-1,
    .flexbox-column-2 {
        display: flex;
        flex-direction: column;
        flex-basis: 16.66%;
        /*flex: 2;*/
        /*max-width: 16.67%;*/
    }

    .flexbox-column-3,
    .flexbox-column-4 {
        display: flex;
        flex-direction: column;
        flex-basis: 33.33%;
        /*flex: 4;*/
        /*max-width: 33.33%;*/
    }

    .flexbox-column-5,
    .flexbox-column-6 {
        display: flex;
        flex-direction: column;
        flex-basis: 50%;
        /*flex: 6;*/
        /*max-width: 50%;*/
    }

    .flexbox-column-7,
    .flexbox-column-8 {
        display: flex;
        flex-direction: column;
        flex-basis: 66.66%;
        /*flex: 8;*/
        /*max-width: 66.67%;*/
    }

    .flexbox-column-9,
    .flexbox-column-10 {
        display: flex;
        flex-direction: column;
        flex-basis: 83.33%;
        /*flex: 10;*/
        /*max-width: 83.33%;*/
    }

    .flexbox-column-11,
    .flexbox-column-12 {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        /*flex: 12;*/
        min-width: 100%;
        /*max-width: 100%;*/
    }

    .flexbox-offset-1 {
        margin-left: 8.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-2 {
        margin-left: 16.66%;
        flex-shrink: 100;
    }

    .flexbox-offset-3 {
        margin-left: 25%;
        flex-shrink: 100;
    }

    .flexbox-offset-4 {
        margin-left: 33.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-5 {
        margin-left: 41.66%;
        flex-shrink: 100;
    }

    .flexbox-offset-6 {
        margin-left: 50%;
        flex-shrink: 100;
    }

    .flexbox-offset-7 {
        margin-left: 58.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-8 {
        margin-left: 66.66%;
        flex-shrink: 100;
    }

    .flexbox-offset-9 {
        margin-left: 75%;
        flex-shrink: 100;
    }

    .flexbox-offset-10 {
        margin-left: 83.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-11 {
        margin-left: 91.66%;
        flex-shrink: 100;
    }
}

/**
 * Anything over 1366px wide gets the full 12 columns
 */
@media screen and (min-width: 1366px) {
    .flexbox-column-1 {
        display: flex;
        flex-direction: column;
        flex-basis: 8.33%;
        /*flex: 1;*/
        /*max-width: 8.33%;*/
    }

    .flexbox-column-2 {
        display: flex;
        flex-direction: column;
        flex-basis: 16.66%;
        /*flex: 2;*/
        /*max-width: 16.67%;*/
    }

    .flexbox-column-3 {
        display: flex;
        flex-direction: column;
        flex-basis: 25%;
        /*flex: 3;*/
        /*max-width: 25%;*/
    }

    .flexbox-column-4 {
        display: flex;
        flex-direction: column;
        flex-basis: 33.33%;
        /*flex: 4;*/
        /*max-width: 33.33%;*/
    }

    .flexbox-column-5 {
        display: flex;
        flex-direction: column;
        flex-basis: 41.66%;
        /*flex: 5;*/
        /*max-width: 41.67%;*/
    }

    .flexbox-column-6 {
        display: flex;
        flex-direction: column;
        flex-basis: 50%;
        /*flex: 6;*/
        /*max-width: 50%;*/
    }

    .flexbox-column-7 {
        display: flex;
        flex-direction: column;
        flex-basis: 58.33%;
        /*flex: 7;*/
        /*max-width: 58.33%;*/
    }

    .flexbox-column-8 {
        display: flex;
        flex-direction: column;
        flex-basis: 66.66%;
        /*flex: 8;*/
        /*max-width: 66.67%;*/
    }

    .flexbox-column-9 {
        display: flex;
        flex-direction: column;
        flex-basis: 75%;
        /*flex: 9;*/
        /*max-width: 75%;*/
    }

    .flexbox-column-10 {
        display: flex;
        flex-direction: column;
        flex-basis: 83.33%;
        /*flex: 10;*/
        /*max-width: 83.33%;*/
    }

    .flexbox-column-11 {
        display: flex;
        flex-direction: column;
        flex-basis: 91.66%;
        /*flex: 11;*/
        /*max-width: 91.66%;*/
    }

    .flexbox-column-12 {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        /*flex: 12;*/
        min-width: 100%;
        max-width: 100%;
    }

    .flexbox-offset-1 {
        margin-left: 8.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-2 {
        margin-left: 16.66%;
        flex-shrink: 100;
    }

    .flexbox-offset-3 {
        margin-left: 25%;
        flex-shrink: 100;
    }

    .flexbox-offset-4 {
        margin-left: 33.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-5 {
        margin-left: 41.66%;
        flex-shrink: 100;
    }

    .flexbox-offset-6 {
        margin-left: 50%;
        flex-shrink: 100;
    }

    .flexbox-offset-7 {
        margin-left: 58.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-8 {
        margin-left: 66.66%;
        flex-shrink: 100;
    }

    .flexbox-offset-9 {
        margin-left: 75%;
        flex-shrink: 100;
    }

    .flexbox-offset-10 {
        margin-left: 83.33%;
        flex-shrink: 100;
    }

    .flexbox-offset-11 {
        margin-left: 91.66%;
        flex-shrink: 100;
    }
}