@import 'common.css';

.grid {
    clear: both;
    padding: 0;
    margin: 0;
}
.grid * {
    padding: 0;
    margin: 0;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 0 0 0 1.2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both;}
.group-center { margin-left:auto; margin-right:auto; }

/*  GRID OF FOUR  */
.span_1_of_4 {
    width: 24.1% !important;
}
.span_2_of_4 {
    width: 49.4% !important;
}
.span_3_of_4 {
    width: 74.7% !important;
}
.span_4_of_4 {
    width: 100% !important;
}

/* GRID OF EIGHT */
.span_8_of_8 {
    width: 100% !important;
}

.span_7_of_8 {
    width: 87.35% !important;
}

.span_6_of_8 {
    width: 74.7% !important;
}

.span_5_of_8 {
    width: 62.05% !important;
}

.span_4_of_8 {
    width: 49.4% !important;
}

.span_3_of_8 {
    width: 36.75% !important;
}

.span_2_of_8 {
    width: 24.1% !important;
}

.span_1_of_8 {
    width: 11.45% !important;
}


/*  GRID OF SIXTEEN  */
.span_16_of_16 {
    width: 100% !important;
}

.span_15_of_16 {
    width: 93.675% !important;
}

.span_14_of_16 {
    width: 87.35% !important;
}

.span_13_of_16 {
    width: 81.025% !important;
}

.span_12_of_16 {
    width: 74.7% !important;
}

.span_11_of_16 {
    width: 68.375% !important;
}
.span_10_of_16 {
    width: 62.05% !important;
}

.span_9_of_16 {
    width: 55.725% !important;
}

.span_8_of_16 {
    width: 49.4% !important;
}

.span_7_of_16 {
    width: 43.075% !important;
}

.span_6_of_16 {
    width: 36.75% !important;
}

.span_5_of_16 {
    width: 30.425% !important;
}

.span_4_of_16 {
    width: 24.1% !important;
}

.span_3_of_16 {
    width: 17.775% !important;
}

.span_2_of_16 {
    width: 11.45% !important;
}

.span_1_of_16 {
    width: 5.125% !important;
}

.content-center {
    margin-left:auto;
    margin-right: auto;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {  margin: 1% 0 1% 0; }

    .span_1_of_16, .span_2_of_16, .span_3_of_16, .span_4_of_16, .span_5_of_16, .span_6_of_16, .span_7_of_16, .span_8_of_16, .span_9_of_16, .span_10_of_16, .span_11_of_16, .span_12_of_16 .span_13_of_16 .span_14_of_16 .span_15_of_16 .span_16_of_16 {
        width: 100% !important;
    }
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 {
        width: 100% !important;
    }

    .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 {
        width: 100% !important;
    }
}


.row {
    display: flex;
    flex-wrap: wrap;
    margin-top:0.5em;
    /* margin-right: -15px;
    margin-left: -15px; */
}