/* Self Clearing */
.container:after                                { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* #Base Grid
================================================== */

.col                                            { width:calc( 50% - 20px ); padding:0; margin:0; float:left; box-sizing:border-box; margin-left:40px; }
  .col.third                                    ,
  .col.one-third                                { width:calc( 33% - 25px ); }
  .col.quarter                                  { width:calc( 25% - 30px ); }
  .col.two-thirds                               { width:calc( 66% - 40px ); }
  .col.alpha                                    { margin-left:0px; clear:left; }
  .col.last                                     { float:right; }

/***************/

    .outer-container                            { float:left; width:100%; }

    .container                                  { position:relative; width:1170px; margin:0 auto; padding:0px; z-index:2; box-sizing:initial; }
    .container                                  { margin-bottom:0px; }
    .container.tall                             { margin-bottom:30px; }
    .container.full                             { box-sizing:border-box; width:100%; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin:0 0 0 30px; padding:0; box-sizing:initial; }

    .container .column.bdr-right                ,
    .container .columns.bdr-right               { border-right:1px solid #ecf0f3; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; clear:left; }
    .column.omega, .columns.omega               { margin-right: 0; clear:right; }

    /* Nested Column Classes */
    .column.left, .columns.fleft                { float:left; }
    .column.fright, .columns.fright, .columns.last { float:right; }

    .column.first, .columns.first               { float:left; clear:left; }
    .column.last, .columns.last                 { float:right; clear:right; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 70px;  }
    .container .two.columns                     { width: 170px; }
    .container .three.columns                   { width: 270px; }
    .container .one-third.columns               ,
    .container .four.columns                    { width: 370px; }
    .container .five.columns                    { width: 470px; }
    .container .six.columns                     { width: 570px; }
    .container .seven.columns                   { width: 670px; }
    .container .two-thirds.columns              ,
    .container .eight.columns                   { width: 770px; }
    .container .nine.columns                    { width: 870px; }
    .container .ten.columns                     { width: 970px; }
    .container .eleven.columns                  { width: 1070px; }
    .container .twelve.columns                  { width: 1170px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 100px; }
    .container .offset-by-two                   { padding-left: 200px; }
    .container .offset-by-three                 { padding-left: 300px; }
    .container .offset-by-four                  { padding-left: 400px; }
    .container .offset-by-five                  { padding-left: 500px; }
    .container .offset-by-six                   { padding-left: 600px; }
    .container .offset-by-seven                 { padding-left: 700px; }
    .container .offset-by-eight                 { padding-left: 800px; }
    .container .offset-by-nine                  { padding-left: 900px; }
    .container .offset-by-ten                   { padding-left: 1000px; }
    .container .offset-by-eleven                { padding-left: 1100px; }


/* #Desktop (1020)
================================================== */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    .container                                  { width: 978px; padding:0 10px; }
    .container .column,
    .container .columns                         { margin-left:20px; }

    .column.alpha, .columns.alpha               { margin-left: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 63px;  }
    .container .two.columns                     { width: 146px; }
    .container .three.columns                   { width: 229px; }
    .container .one-third.columns               ,
    .container .four.columns                    { width: 312px; }
    .container .five.columns                    { width: 396px; }
    .container .six.columns                     { width: 479px; }
    .container .seven.columns                   { width: 562px; }
    .container .two-thirds.columns              ,
    .container .eight.columns                   { width: 646px; }
    .container .nine.columns                    { width: 729px; }
    .container .ten.columns                     { width: 812px; }
    .container .eleven.columns                  { width: 895px; }
    .container .twelve.columns                  { width: 978px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 83px;  }
    .container .offset-by-two                   { padding-left: 166px; }
    .container .offset-by-three                 { padding-left: 249px; }
    .container .offset-by-four                  { padding-left: 332px; }
    .container .offset-by-five                  { padding-left: 416px; }
    .container .offset-by-six                   { padding-left: 499px; }
    .container .offset-by-seven                 { padding-left: 582px; }
    .container .offset-by-eight                 { padding-left: 666px; }
    .container .offset-by-nine                  { padding-left: 749px; }
    .container .offset-by-ten                   { padding-left: 832px; }
    .container .offset-by-eleven                { padding-left: 915px; }
}


/* #Tablet (Portrait)
================================================== * /
@media only screen and (min-width: 813px) and (max-width: 1023px) {
    .col.full-on-sm                             { width:100%; margin:0; }

    .container                                  { width: 724px; padding:0 10px; }
    .container .column,
    .container .columns                         { margin-left:20px; }

    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }

    .container .one.column,
    .container .one.columns                     { width: 42px; }
    .container .two.columns                     { width: 104px; }
    .container .three.columns                   { width: 166px; }
    .container .one-third.columns               ,
    .container .four.columns                    { width: 228px; }
    .container .five.columns                    { width: 290px; }
    .container .six.columns                     { width: 352px; }
    .container .seven.columns                   { width: 414px; }
    .container .two-thirds.columns              ,
    .container .eight.columns                   { width: 476px; }
    .container .nine.columns                    { width: 538px; }
    .container .ten.columns                     { width: 600px; }
    .container .eleven.columns                  { width: 662px; }
    .container .twelve.columns                  { width: 724px; }

    .container .offset-by-one                   { padding-left: 62px; }
    .container .offset-by-two                   { padding-left: 124px; }
    .container .offset-by-three                 { padding-left: 186px; }
    .container .offset-by-four                  { padding-left: 248px; }
    .container .offset-by-five                  { padding-left: 310px; }
    .container .offset-by-six                   { padding-left: 372px; }
    .container .offset-by-seven                 { padding-left: 434px; }
    .container .offset-by-eight                 { padding-left: 496px; }
    .container .offset-by-nine                  { padding-left: 558px; }
    .container .offset-by-ten                   { padding-left: 620px; }
    .container .offset-by-eleven                { padding-left: 682px; }
}


/* #Mobile (Landscape)
================================================== */
@media only screen and (max-width: 1023px) {
    .split-cols .split                          ,
    .split-cols .split.alpha                    { width:100%; float:none; }

    .container                                  { width: 92%; padding:0 4%; }
    .container .columns                         ,
    .container .columns                         { margin: 0; }

    .container .column.bdr-right                ,
    .container .columns.bdr-right               { border:inherit; }

    .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-third.columns,
    .container .two-thirds.columns              { width: 100%; }

    .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                { padding-left: 0; }

  .col                                          ,
    .col.third                                  ,
    .col.quarter                                ,
    .col.one-third                              ,
    .col.two-thirds                             ,
    .col.alpha                                  ,
    .col.last                                   { margin:0; width:100%; }

}