:root {
    --spacing-unit: 1.5rem;
    --combined-spacing: 3rem;
}

.container                              	{ display: flex; flex-wrap: wrap; position: relative; width: 88%; max-width: 1920px; margin: 0 auto; padding: 0; }
section,
.containers                              	{ width: 100%; }
.umbraco-forms-container.col-md-6,
.container .column,
.container .columns                         { float: left; display: inline; margin-left: var(--spacing-unit); margin-right: var(--spacing-unit); }
.columns .columns:first-of-type             { margin-left: 0; }
.columns .columns:last-of-type              { margin-right: 0; }
.row                                        { margin-bottom: 30px; }
.block										{ width: 100%; margin-bottom: 6rem; }
.block.below                                { margin-top: -6rem; }
.block.allowMargin							{ margin-bottom: 5rem; }
.longText .block                            { margin-bottom: 0 }

/* Nested Column Classes */
.umbraco-forms-container.col-md-6:nth-child(odd),
.column.alpha, .columns.alpha             	{ margin-left: 0 !important; }
.umbraco-forms-container.col-md-6:nth-child(even),
.column.omega, .columns.omega               { margin-right: 0 !important; }

/* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: calc(8.3333333% - var(--combined-spacing)); }
    .container .two.columns                     { width: calc(16.6666666% - var(--combined-spacing)); }
    .container .three.columns                   { width: calc(25% - var(--combined-spacing)); }
    .container .four.columns                    { width: calc(33.3333333% - var(--combined-spacing)); }
    .container .five.columns                    { width: calc(41.6666666% - var(--combined-spacing)); }
    .container .six.columns                     { width: calc(50% - var(--combined-spacing)); }
    .umbraco-forms-container.col-md-6           { width: calc(50% - var(--spacing-unit)); }
    .container .seven.columns                   { width: calc(58.3333333% - var(--combined-spacing)); }
    .container .eight.columns                   { width: calc(66.6666666% - var(--combined-spacing)); }
    .container .nine.columns                    { width: calc(75% - var(--combined-spacing));  }
    .container .ten.columns                     { width: calc(83.3333333% - var(--combined-spacing)); }
    .container .eleven.columns                  { width: calc(91.6666666% - var(--combined-spacing)); }
    .container .twelve.columns                  { width: calc(100% - var(--combined-spacing)); }

    .container .one.column.alpha,
    .container .one.columns.alpha               { width: calc(8.3333333% - var(--spacing-unit)); }
    .container .two.columns.alpha               { width: calc(16.6666666% - var(--spacing-unit)); }
    .container .three.columns.alpha             { width: calc(25% - var(--spacing-unit)); }
    .container .four.columns.alpha              { width: calc(33.3333333% - var(--spacing-unit)); }
    .container .five.columns.alpha              { width: calc(41.6666666% - var(--spacing-unit)); }
    .container .six.columns.alpha               { width: calc(50% - var(--spacing-unit));  }
    .container .seven.columns.alpha             { width: calc(58.3333333% - var(--spacing-unit)); }
    .container .eight.columns.alpha             { width: calc(66.6666666% - var(--spacing-unit)); }
    .container .nine.columns.alpha              { width: calc(75% - var(--spacing-unit));  }
    .container .ten.columns.alpha               { width: calc(83.3333333% - var(--spacing-unit)); }
    .container .eleven.columns.alpha            { width: calc(91.6666666% - var(--spacing-unit)); }
    .container .twelve.columns.alpha            { width: calc(100% - var(--spacing-unit)); }

    .container .one.column.omega,
    .container .one.columns.omega               { width: calc(8.3333333% - var(--spacing-unit)); }
    .container .two.columns.omega               { width: calc(16.6666666% - var(--spacing-unit)); }
    .container .three.columns.omega             { width: calc(25% - var(--spacing-unit)); }
    .container .four.columns.omega              { width: calc(33.3333333% - var(--spacing-unit)); }
    .container .five.columns.omega              { width: calc(41.6666666% - var(--spacing-unit)); }
    .container .six.columns.omega               { width: calc(50% - var(--spacing-unit));  }
    .container .seven.columns.omega             { width: calc(58.3333333% - var(--spacing-unit)); }
    .container .eight.columns.omega             { width: calc(66.6666666% - var(--spacing-unit)); }
    .container .nine.columns.omega              { width: calc(75% - var(--spacing-unit));  }
    .container .ten.columns.omega               { width: calc(83.3333333% - var(--spacing-unit)); }
    .container .eleven.columns.omega            { width: calc(91.6666666% - var(--spacing-unit)); }
    .container .twelve.columns.omega            { width: calc(100% - var(--spacing-unit)); }

    .columns .one.column,
    .columns .one.columns                     { width: 8.3333333%; }
    .columns .two.columns                     { width: 16.6666666%; }
    .columns .three.columns                   { width: 25%; }
    .columns .four.columns                    { width: 33.3333333%; }
    .columns .five.columns                    { width: 41.6666666%; }
    .columns .six.columns                     { width: 50% }
    .columns .seven.columns                   { width: 58.3333333% }
    .columns .eight.columns                   { width: 66.6666666% }
    .columns .nine.columns                    { width: 75% }
    .columns .ten.columns                     { width: 83.3333333%; }
    .columns .eleven.columns                  { width: 91.6666666%; }
    .columns .twelve.columns                  { width: 100%; }

    /* Offsets */
    .container .offset-by-one                   { margin-left: calc(8.3333333% + var(--spacing-unit)); }
    .container .offset-by-two                   { margin-left: calc(16.6666666% + var(--spacing-unit)); }
    .container .offset-by-three                 { margin-left: calc(25% + var(--spacing-unit)); }
    .container .offset-by-four                  { margin-left: calc(33.3333333% + var(--spacing-unit)); }
    .container .offset-by-five                  { margin-left: calc(41.6666666% + var(--spacing-unit)); }
    .container .offset-by-six                   { margin-left: calc(50% + var(--spacing-unit)); }
    .container .offset-by-seven                 { margin-left: calc(58.3333333% + var(--spacing-unit)); }
    .container .offset-by-eight                 { margin-left: calc(66.6666666% + var(--spacing-unit)); }
    .container .offset-by-nine                  { margin-left: calc(75% + var(--spacing-unit)); }
    .container .offset-by-ten                   { margin-left: calc(83.3333333% + var(--spacing-unit)); }
    .container .offset-by-eleven                { margin-left: calc(91.6666666% + var(--spacing-unit)); }


/*  #Media queries
================================================== */

 	@media only screen and (max-width: 1680px) {
		.container { width: 96%; box-sizing: border-box; }
        .container #sideBar.three.columns       { width: calc(33.3333333% - var(--combined-spacing)); }
		#sideBar.three.columns.offset-by-one 	{ margin-left: var(--spacing-unit) }
    }

    @media only screen and (max-width: 1280px) {
		.block {
			margin-bottom: 4rem;
		}
        .block.below {
            margin-top: -4rem;
        }
		.block.allowMargin	{ margin-bottom: var(--combined-spacing); }
    }

	@media only screen and (min-width: 881px) and (max-width: 1279px) {
        :root {
            --spacing-unit: 1rem;
            --combined-spacing: 2rem;
        }
		.container #sideBar.three.columns           { width: calc(33.3333333% - var(--combined-spacing)); }
        .umbraco-forms-container.col-md-6           { width: calc(50% - var(--spacing-unit));  }
		.container .six.columns.to-eight            { width: calc(66.6666666% - var(--combined-spacing)); }

		/* Offsets */
		#sideBar.three.columns.offset-by-one 		            { margin-left: var(--spacing-unit) }
        .container .six.columns.to-eight.offset-by-three        { margin-left: calc(16.6666666% + var(--spacing-unit)); }
		.container .six.columns.to-eight.offset-by-six          { margin-left: calc(33.3333333% + var(--spacing-unit)); }
		.container .eight.columns.offset-by-one.longText		{ margin-left: var(--spacing-unit) }
	}

    @media only screen and (max-width: 959px) {
        .block {
            margin-bottom: 2.5rem;
        }
        .block.below {
            margin-top: -2.5rem;
        }
		.block.allowMargin	{ margin-bottom: 1.5rem; }
        .block.space {
            margin-bottom: 5rem !important;
        }
    }

    @media only screen and (max-width: 880px) {
        .container {
            width: 92%;
        }
            .umbraco-forms-container.col-md-6,
            .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 #sideBar.three.columns,
            .container .four.columns,
            .container .five.columns,
            .container .six.columns,
            .umbraco-forms-container.col-md-6,
            .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: var(--spacing-unit) !important;
            }

            /* Offsets */
			#sideBar.three.columns.offset-by-one,
            .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: 2.5rem;
        }

            .block.allowMargin,
            .block:last-child {
                margin-bottom: 1.5rem;
            }
    }



    /* #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"> */
    .row-fluid:before,
    .row-fluid:after,
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
        content: '\0020';
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
    }

    .row:after,
    .row-fluid:after,
    .clearfix:after {
        clear: both;
    }

    .row,
    .row-fluid,
    .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;
    }
