:root {
    --totalPad: 3rem;
    --halfPad: 1.5rem;
}
	.container                              	{ display: flex; flex-wrap: wrap; position: relative; width: 88%; max-width: 1920px; margin: 0 auto; padding: 0; }
	.containers                              	{ width: 100%; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: var(--halfPad); margin-right: var(--halfPad); }
    .row                                        { margin-bottom: 30px; }
	.block										{ width: 100%; margin-bottom: 5rem; }
    .block.overlap								{ margin-top: -3rem; }
    .block.overlapped						    { margin-bottom: 7rem; }
    /*.blogPost .block							{ width: 100%; margin-bottom: var(--totalPad); }
    .blogPost .block.overlap					{ margin-top: -var(--totalPad); }
    .blogPost .block.overlapped					{ margin-bottom: 5rem; }*/

    /* Nested Column Classes */
    .column.alpha, .columns.alpha             	{ margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    form.gridholder .columns {
        --halfPad: 1rem
    }

/* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: calc(8.3333333% - var(--totalPad)); }
    .container .two.columns                     { width: calc(16.6666666% - var(--totalPad)); }
    .container .three.columns                   { width: calc(25% - var(--totalPad)); }
    .container .four.columns                    { width: calc(33.3333333% - var(--totalPad)); }
    .container .five.columns                    { width: calc(41.6666666% - var(--totalPad)); }
    .container .six.columns                     { width: calc(50% - var(--totalPad));  }
    .container .seven.columns                   { width: calc(58.3333333% - var(--totalPad)); }
    .container .eight.columns                   { width: calc(66.6666666% - var(--totalPad)); }
    .container .nine.columns                    { width: calc(75% - var(--totalPad));  }
    .container .ten.columns                     { width: calc(83.3333333% - var(--totalPad)); }
    .container .eleven.columns                  { width: calc(91.6666666% - var(--totalPad)); }
    .container .twelve.columns                  { width: calc(100% - var(--totalPad)); }

    .container .one.column.alpha,
    .container .one.columns.alpha               { width: calc(8.3333333% - var(--halfPad)); }
    .container .two.columns.alpha               { width: calc(16.6666666% - var(--halfPad)); }
    .container .three.columns.alpha             { width: calc(25% - var(--halfPad)); }
    .container .four.columns.alpha              { width: calc(33.3333333% - var(--halfPad)); }
    .container .five.columns.alpha              { width: calc(41.6666666% - var(--halfPad)); }
    .container .six.columns.alpha               { width: calc(50% - var(--halfPad));  }
    .container .seven.columns.alpha             { width: calc(58.3333333% - var(--halfPad)); }
    .container .eight.columns.alpha             { width: calc(66.6666666% - var(--halfPad)); }
    .container .nine.columns.alpha              { width: calc(75% - var(--halfPad));  }
    .container .ten.columns.alpha               { width: calc(83.3333333% - var(--halfPad)); }
    .container .eleven.columns.alpha            { width: calc(91.6666666% - var(--halfPad)); }
    .container .twelve.columns.alpha            { width: calc(100% - var(--halfPad)); }

    .container .one.column.omega,
    .container .one.columns.omega               { width: calc(8.3333333% - var(--halfPad)); }
    .container .two.columns.omega               { width: calc(16.6666666% - var(--halfPad)); }
    .container .three.columns.omega             { width: calc(25% - var(--halfPad)); }
    .container .four.columns.omega              { width: calc(33.3333333% - var(--halfPad)); }
    .container .five.columns.omega              { width: calc(41.6666666% - var(--halfPad)); }
    .container .six.columns.omega               { width: calc(50% - var(--halfPad));  }
    .container .seven.columns.omega             { width: calc(58.3333333% - var(--halfPad)); }
    .container .eight.columns.omega             { width: calc(66.6666666% - var(--halfPad)); }
    .container .nine.columns.omega              { width: calc(75% - var(--halfPad));  }
    .container .ten.columns.omega               { width: calc(83.3333333% - var(--halfPad)); }
    .container .eleven.columns.omega            { width: calc(91.6666666% - var(--halfPad)); }
    .container .twelve.columns.omega            { width: calc(100% - var(--halfPad)); }

    /* Offsets */
    .container .offset-by-one                   { margin-left: calc(8.3333333% + var(--halfPad)); }
    .container .offset-by-two                   { margin-left: calc(16.6666666% + var(--halfPad)); }
    .container .offset-by-three                 { margin-left: calc(25% + var(--halfPad)); }
    .container .offset-by-four                  { margin-left: calc(33.3333333% + var(--halfPad)); }
    .container .offset-by-five                  { margin-left: calc(41.6666666% + var(--halfPad)); }
    .container .offset-by-six                   { margin-left: calc(50% + var(--halfPad)); }
    .container .offset-by-seven                 { margin-left: calc(58.3333333% + var(--halfPad)); }
    .container .offset-by-eight                 { margin-left: calc(66.6666666% + var(--halfPad)); }
    .container .offset-by-nine                  { margin-left: calc(75% + var(--halfPad)); }
    .container .offset-by-ten                   { margin-left: calc(83.3333333% + var(--halfPad)); }
    .container .offset-by-eleven                { margin-left: calc(91.6666666% + var(--halfPad)); }


/*  #Media queries
================================================== */

    @media only screen and (max-width: 1280px) {
        :root {
            --totalPad: 2rem;
            --halfPad: 1rem;
        }
        .container {
            width: 94%;
            box-sizing: border-box;
        }
		.block {
			margin-bottom: var(--totalPad);
		}
    }

	@media only screen and (min-width: 881px) and (max-width: 1279px) {
		.container #sideBar.four.columns.offset-by-one       	{ width: calc(41.6666666% - var(--totalPad)); margin-left: var(--halfPad); }
	}

    @media only screen and (max-width: 880px) {
        .container { width: 92%; }
        .container .columns,
        .container .column { margin-left: 0 !important; margin-right: 0 !important; }
		
        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .one.column.alpha,
        .container .one.columns.alpha,
        .container .two.columns.alpha,
        .container .three.columns.alpha,
        .container .four.columns.alpha,
        .container .five.columns.alpha,
        .container .six.columns.alpha,
        .container .seven.columns.alpha,
        .container .eight.columns.alpha,
        .container .nine.columns.alpha,
        .container .ten.columns.alpha,
        .container .eleven.columns.alpha,
        .container .twelve.columns.alpha,
        .container .one.column.omega,
        .container .one.columns.omega,
        .container .two.columns.omega,
        .container .three.columns.omega,
        .container .four.columns.omega,
        .container .five.columns.omega,
        .container .six.columns.omega,
        .container .seven.columns.omega,
        .container .eight.columns.omega,
        .container .nine.columns.omega,
        .container .ten.columns.omega,
        .container .eleven.columns.omega,
        .container .twelve.columns.omega            { width: 100%; }
				
		.container .callOut .one.column,
        .container .callOut .one.columns,
        .container .callOut .two.columns,
        .container .callOut .three.columns,
        .container .callOut .four.columns,
        .container .callOut .five.columns,
        .container .callOut .six.columns,
        .container .callOut .seven.columns,
        .container .callOut .eight.columns,
        .container .callOut .nine.columns,
        .container .callOut .ten.columns,
        .container .callOut .eleven.columns,
        .container .callOut .twelve.columns  		{ box-sizing: border-box; }
				
		.container .columns.half, .container .column.half     					{ width: calc(50% - 0.5rem) !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; padding: 0; }
		.container .columns.first.half, .container .column.first.half 		 	{ margin-right: 1rem !important; }
		
        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven 				{ margin-left: 0; }	
		
		.block										{ margin-bottom: 3.5rem; }
		/*.block:last-child							{ margin-bottom: 2rem; }*/

    }


/* #Mobile (small)
================================================== */

	@media only screen and (max-width: 420px) {

	}



/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }
