$background-color-list: #A6206A, #EC1C4B, #F16A43, #f1c939, #299e7b, #1a7e80, #1a6e8f, #085297;

.flexbody {
    @extend .sizes;
    h2 {
        @include h2-style;
        font-size: 2rem;
        margin: 1em 0 0 0;
    }
    h4 {
        @include h4-style;
        font-size: 1.5rem;
        margin: 3rem 0 1.5rem 0;
        color: #666;
        border-top: 3px solid #d4d4e4;
        padding: 1rem;
        position: relative;
        background-color:#ebf1f7;
        width: 100%;
    }
    h5 {
        @include h5-style;
        margin: 1.5rem 0 1rem 0;
        //margin-top: 1.5rem;
    }
    p {
        font: 300 1rem 'roboto', 'sans-serif';
        line-height: 1.2rem;
    }
   
    .flexamples {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 2rem;
        &.nowrap {
            flex-flow: row nowrap;
        }
    }
    .flexample {
        display: flex;
        flex-flow: column wrap;
        margin-right: 1rem;
        //width: 100%;
        @media (max-width: 1080px) {
            width: 100%;
        }
    }
    .flexbox {
        border: 1px solid #666;
        width: 100%;
        padding: 0;
        display: flex;
        &.col {
            width:120px;
        }
        @each $bg-color in $background-color-list {
            $i: index($background-color-list , $bg-color);
            .cajita-#{$i} {
                background-color: $bg-color;
                color: #fff;
                //height: 3rem;
                width: auto;
                font: 600 1rem 'montserrat';
                @media (max-width: 1080px) {
                    font: 600 1.5vw 'montserrat';
                }
                text-transform: uppercase;
                margin: .5rem;
                padding: .5rem;
                text-align: center;
                &.width-100 {
                    width: 100px;
                }                     
            }
        }
        &.direction {
            &-row {
                flex-direction: row;
            }
            &-row-reverse {
                flex-direction: row-reverse;
            }
            &-column {
                flex-direction: column;
            }
            &-column-reverse {
                flex-direction: column-reverse;
            }

        }
        .order {
            order: 4;
        }
        &.flexsizes {
            .grow {
                flex-grow: 1;
                flex-shrink: 0;
            }
            .grow-x2 {
                flex-grow: 2;
                flex-shrink: 0;
            }
            .shrink {
                flex-shrink: 1;
                flex-grow: 0;
            }
            .shrink-x2 {
                flex-shrink: 2;
                flex-grow: 0;
            }
            .basis {
                flex-basis: 30%;
            }
            #shorthand-flex {
                flex: 1 0 240px;
            }
        }
        &.justify {
            &-flexstart {
                justify-content: flex-start;
            }
            &-flexend {
                justify-content: flex-end;
            }
            &-center {
                justify-content: center;
            }
            &-space-between {
                justify-content: space-between;
            }
            &-space-around {
                justify-content: space-around;
            }
        }
        &.align {
            &-flexstart {
                align-items: flex-start;
            }
            &-flexend {
                align-items: flex-end;
            }
            &-center {
                align-items: center;
            }
            &-stretch {
                align-items: stretch;
            }
            &-baseline {
                align-items: baseline;
                // aumento tamaño de texto para visualizar bien este ejemplo
                .text-xxl {
                    font-size: 3rem;
                }
                .text-xl {
                    font-size: 2.25rem;
                }
            }
        }
        .self {
            &-flexstart {
                align-self: flex-start;
            }
            &-flexend {
                align-self: flex-end;
            }
            &-center {
                align-self: center;
            }
            &-stretch {
                align-self: stretch;
            }
            &-baseline {
                align-self: baseline;
                 // aumento tamaño de texto para visualizar bien este ejemplo
                &.text-xxl {
                    font-size: 3rem;
                }
                &.text-xl {
                    font-size: 2.25rem;
                }         
            }
            
        }
        &.content {
            &-flexstart {
                align-content: flex-start;
            }
            &-flexend {
                align-content: flex-end;
            }
            &-center {
                align-content: center;
            }
            &-stretch {
                align-content: stretch;
            }
            &-space-between {
                align-content: space-between;           
            }
            &-space-around {
                align-content: space-around;           
            }
        }
        &.height {
            height: 120px;
        }
        &.height-250 {
            height: 250px;
        }
        &.wrap-row {
            flex-flow: row wrap;
        }
    }
    .inline-flex {
        display: inline-flex;
    }
    .flex {
        display: flex;
    }
    .wrap-row {
        flex-flow: row wrap;
    }
    .nowrap-row {
        flex-flow: row nowrap;
    }
}