/*================================================================
                 Fluid Grid Styles 
================================================================*/

.container {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  min-width: 16em;
  max-width: 90em;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ## Embedded clearfix on container ## */
.container:before,
.container:after {
  content: " ";
  display: table;
}
.container:after {
  clear: both;
}
.container {
  *zoom: 1;
}

/* ## Setup for Padding ## */
.container [class*="grid_"] {
  padding: 0 10px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.gutterless {
  padding: 0 10px;
}
.gutterless > [class*="grid_"] {
  padding: 0 !important;
}

/* ## 16px baseline (256px) s = small ## */
@media only screen and (min-width: 16em) {
  .container [class*="grid_"] {
    position: relative;
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* [class*="grid_"] [class*="grid_"] {
    padding: 0;
  } */
  .alpha {
    padding: 0;
  }
  .omega {
    padding: 0;
  }

  .s_1half > [class*="grid_"] {
    width: 50%;
    padding: 0 10px;
  }
  .s_1half > .alpha {
    padding: 0 10px 0 0;
  }
  .s_1half > .omega {
    padding: 0 0 0 10px;
  }

  /* show & hide base helpers */
  .s_showInline {
    display: inline !important;
    visibility: visible !important;
  }
  .s_showBlock {
    display: block !important;
    visibility: visible !important;
  }
  .s_hide {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ## 16px baseline (480px - 767px) sw = small wide ## */
@media only screen and (min-width: 30em) {
  [class*="grid_"] [class*="grid_"] {
    padding: 0 10px;
  }

  .alpha {
    padding: 0;
  }
  .omega {
    padding: 0;
  }

  .container .alpha {
    padding-left: 0;
  }
  .container .omega {
    padding-right: 0;
  }

  [class*="grid_"] .grid_1 {
    width: 8.333%;
  }
  [class*="grid_"] .grid_2 {
    width: 16.666%;
  }
  [class*="grid_"] .grid_3 {
    width: 25%;
  }
  [class*="grid_"] .grid_4 {
    width: 33.333%;
  }
  [class*="grid_"] .grid_5 {
    width: 41.666%;
  }
  [class*="grid_"] .grid_6 {
    width: 50%;
  }
  [class*="grid_"] .grid_7 {
    width: 58.333%;
  }
  [class*="grid_"] .grid_8 {
    width: 66.666%;
  }
  [class*="grid_"] .grid_9 {
    width: 75%;
  }
  [class*="grid_"] .grid_10 {
    width: 83.333%;
  }
  [class*="grid_"] .grid_11 {
    width: 91.666%;
  }
  [class*="grid_"] .grid_12 {
    width: 100%;
  }

  .sw_1half > [class*="grid_"] {
    width: 50%;
  }
  .sw_1half > [class*="push_"] {
    left: 50%;
  }
  .sw_1half > [class*="pull_"] {
    left: -50%;
  }
  .sw_1half > [class*="grid_"] .alpha {
    padding: 0 10px 0 0;
  }
  .sw_1half > [class*="grid_"] .omega {
    padding: 0 0 0 10px;
  }

  .sw_1third > [class*="grid_"] {
    width: 33.333%;
  }
  .sw_1third > [class*="push_"] {
    left: 33.333%;
  }
  .sw_1third > [class*="pull_"] {
    left: -33.333%;
  }
  .sw_1third > [class*="grid_"] .alpha {
    padding: 0 10px 0 0;
  }
  .sw_1third > [class*="grid_"] .omega {
    padding: 0 0 0 10px;
  }

  .sw_stack > [class*="grid_"] {
    width: 100%;
  }
  .sw_stack > .alpha,
  .sw_stack > .omega {
    padding: 0;
  }

  /* show & hide base helpers */
  .sw_showInline {
    display: inline !important;
    visibility: visible !important;
  }
  .sw_showBlock {
    display: block !important;
    visibility: visible !important;
  }
  .sw_hide {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ## 16px baseline (768px) m = medium ## */
@media only screen and (min-width: 48em) {
  [class*="grid_"] [class*="grid_"] {
    padding: 0 10px;
  }

  .container .alpha {
    padding-left: 0;
  }
  .container .omega {
    padding-right: 0;
  }

  .container .grid_1 {
    width: 8.333%;
  }
  .container .grid_2 {
    width: 16.666%;
  }
  .container .grid_3 {
    width: 25%;
  }
  .container .grid_4 {
    width: 33.333%;
  }
  .container .grid_5 {
    width: 41.666%;
  }
  .container .grid_6 {
    width: 50%;
  }
  .container .grid_7 {
    width: 58.333%;
  }
  .container .grid_8 {
    width: 66.666%;
  }
  .container .grid_9 {
    width: 75%;
  }
  .container .grid_10 {
    width: 83.333%;
  }
  .container .grid_11 {
    width: 91.666%;
  }
  .container .grid_12 {
    width: 100%;
  }

  .container .push_1 {
    left: 8.333%;
  }
  .container .push_2 {
    left: 16.666%;
  }
  .container .push_3 {
    left: 25%;
  }
  .container .push_4 {
    left: 33.333%;
  }
  .container .push_5 {
    left: 41.666%;
  }
  .container .push_6 {
    left: 50%;
  }
  .container .push_7 {
    left: 58.333%;
  }
  .container .push_8 {
    left: 66.666%;
  }
  .container .push_9 {
    left: 75%;
  }
  .container .push_10 {
    left: 83.333%;
  }
  .container .push_11 {
    left: 91.666%;
  }
  .container .push_12 {
    left: 100%;
  }

  .container .pull_1 {
    left: -8.333%;
  }
  .container .pull_2 {
    left: -16.666%;
  }
  .container .pull_3 {
    left: -25%;
  }
  .container .pull_4 {
    left: -33.333%;
  }
  .container .pull_5 {
    left: -41.666%;
  }
  .container .pull_6 {
    left: -50%;
  }
  .container .pull_7 {
    left: -58.333%;
  }
  .container .pull_8 {
    left: -66.666%;
  }
  .container .pull_9 {
    left: -75%;
  }
  .container .pull_10 {
    left: -83.333%;
  }
  .container .pull_11 {
    left: -91.666%;
  }
  .container .pull_12 {
    left: -100%;
  }

  .container .prefix_1 {
    margin-left: 8.333%;
  }
  .container .prefix_2 {
    margin-left: 16.666%;
  }
  .container .prefix_3 {
    margin-left: 25%;
  }
  .container .prefix_4 {
    margin-left: 33.333%;
  }
  .container .prefix_5 {
    margin-left: 41.666%;
  }
  .container .prefix_6 {
    margin-left: 50%;
  }
  .container .prefix_7 {
    margin-left: 58.333%;
  }
  .container .prefix_8 {
    margin-left: 66.666%;
  }
  .container .prefix_9 {
    margin-left: 75%;
  }
  .container .prefix_10 {
    margin-left: 83.333%;
  }
  .container .prefix_11 {
    margin-left: 91.666%;
  }
  .container .prefix_12 {
    margin-left: 100%;
  }

  .container .suffix_1 {
    margin-right: 8.333%;
  }
  .container .suffix_2 {
    margin-right: 16.666%;
  }
  .container .suffix_3 {
    margin-right: 25%;
  }
  .container .suffix_4 {
    margin-right: 33.333%;
  }
  .container .suffix_5 {
    margin-right: 41.666%;
  }
  .container .suffix_6 {
    margin-right: 50%;
  }
  .container .suffix_7 {
    margin-right: 58.333%;
  }
  .container .suffix_8 {
    margin-right: 66.666%;
  }
  .container .suffix_9 {
    margin-right: 75%;
  }
  .container .suffix_10 {
    margin-right: 83.333%;
  }
  .container .suffix_11 {
    margin-right: 91.666%;
  }
  .container .suffix_12 {
    margin-right: 100%;
  }
}

/* ## 16px baseline (768px - 959px) m = medium ## */
@media only screen and (min-width: 48em) and (max-width: 59.938em) {
  .m_1half > [class*="grid_"] {
    width: 50%;
  }
  .m_1half > [class*="push_"] {
    left: 50%;
  }
  .m_1half > [class*="pull_"] {
    left: -50%;
  }
  .m_1half > [class*="prefix_"] {
    margin-left: 0;
  }
  .m_1half > [class*="suffix_"] {
    margin-right: 0;
  }

  .m_1third > [class*="grid_"] {
    width: 33.333%;
  }
  .m_1third > [class*="push_"] {
    left: 33.333%;
  }
  .m_1third > [class*="pull_"] {
    left: -33.333%;
  }

  .m_1fourth > [class*="grid_"] {
    width: 25%;
  }
  .m_1fourth > [class*="push_"] {
    left: 25%;
  }
  .m_1fourth > [class*="pull_"] {
    left: -25%;
  }

  .m_2thirds_left > [class*="grid_"] {
    width: 50%;
  }
  .m_2thirds_left > [class*="grid_"]:nth-child(2n) {
    width: 33.333%;
  }
  .m_2thirds_left > [class*="grid_"]:nth-child(2n + 1) {
    width: 66.666%;
  }
  .m_2thirds_left > [class*="push_"] {
    left: 0;
  }
  .m_2thirds_left > [class*="pull_"] {
    left: 0;
  }
  .m_2thirds_left > [class*="prefix_"] {
    margin-left: 0;
  }
  .m_2thirds_left > [class*="suffix_"] {
    margin-right: 0;
  }

  .m_2thirds_right > [class*="grid_"] {
    width: 50%;
  }
  .m_2thirds_right > [class*="grid_"]:nth-child(2n) {
    width: 66.666%;
  }
  .m_2thirds_right > [class*="grid_"]:nth-child(2n + 1) {
    width: 33.333%;
  }
  .m_2thirds_right > [class*="push_"] {
    left: 0;
  }
  .m_2thirds_right > [class*="pull_"] {
    left: 0;
  }
  .m_2thirds_right > [class*="prefix_"] {
    margin-left: 0;
  }
  .m_2thirds_right > [class*="suffix_"] {
    margin-right: 0;
  }

  .m_stack > [class*="grid_"] {
    width: 100%;
  }
  .m_stack > .alpha,
  .m_stack > .omega {
    padding: 0;
  }

  /* show & hide base helpers */
  .m_showInline {
    display: inline !important;
    visibility: visible !important;
  }
  .m_showBlock {
    display: block !important;
    visibility: visible !important;
  }
  .m_hide {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ## 16px baseline (960px - 1139px) mw = medium wide ## */
@media only screen and (min-width: 60em) and (max-width: 71.188em) {
  /* show & hide base helpers */
  .mw_showInline {
    display: inline !important;
    visibility: visible !important;
  }
  .mw_showBlock {
    display: block !important;
    visibility: visible !important;
  }
  .mw_hide {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ## 16px baseline (1140px +) l = large ## */
@media only screen and (min-width: 72em) {
  /* show & hide base helpers */
  .l_showInline {
    display: inline !important;
    visibility: visible !important;
  }
  .l_showBlock {
    display: block !important;
    visibility: visible !important;
  }
  .l_hide {
    display: none !important;
    visibility: hidden !important;
  }
}