.flex {
  *zoom: 1;
  position: relative;
  clear: both;
  padding: 10px 20px;
  padding: 0.625rem 1.25rem;
  display: block;
  margin: 0 auto; }
  .flex:after {
    content: "";
    display: table;
    clear: both; }
  .flex.flex-full {
    padding: 60px 0;
    max-width: none; }
  .flex .g1-flex1 {
    float: left;
    width: 33.33333%;
    padding: 0 20px;
    padding: 0 1.25rem; }
    .flex .g1-flex1.push {
      float: right; }
  .flex .g1-flex2 {
    float: left;
    width: 66.66667%;
    padding: 0 20px;
    padding: 0 1.25rem; }
    .flex .g1-flex2.push {
      float: right; }
  .flex .g1-flex3 {
    width: 100%;
    padding: 0 20px;
    padding: 0 1.25rem; }
    .flex .g1-flex3.push {
      float: right; }
  .flex .g1-hide, .flex .g2-hide {
    display: none; }
  .flex .g1-show {
    display: block; }
  .flex .flex-nested:first-child, .flex .flex-nested.g1-flex4:last-child {
    padding-left: 0; }
  @media all and (min-width: 47.9375em) {
    .flex .g2-flex1 {
      float: left;
      width: 16.66667%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g2-flex1.push {
        float: right; }
    .flex .g2-flex2 {
      float: left;
      width: 33.33333%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g2-flex2.push {
        float: right; }
    .flex .g2-flex3 {
      float: left;
      width: 50%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g2-flex3.push {
        float: right; }
    .flex .g2-flex4 {
      float: left;
      width: 66.66667%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g2-flex4.push {
        float: right; }
    .flex .g2-flex5 {
      float: left;
      width: 83.33333%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g2-flex5.push {
        float: right; }
    .flex .g2-flex6 {
      width: 100%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g2-flex6.push {
        float: right; }
    .flex .g2-show {
      display: block; }
    .flex .g2-hide {
      display: none; }
    .flex .flex-nested:last-child {
      padding-right: 0; }
    .flex .flex-nested.g1-flex4:last-child {
      padding-left: 20px;
      padding-left: 1.25rem; }
    .flex .flex-nested.g1-flex4:first-child {
      padding-left: 0; } }
  @media all and (min-width: 64.0625em) {
    .flex .g3-flex1 {
      float: left;
      width: 8.33333%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex1.push {
        float: right; }
    .flex .g3-flex2 {
      float: left;
      width: 16.66667%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex2.push {
        float: right; }
    .flex .g3-flex3 {
      float: left;
      width: 25%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex3.push {
        float: right; }
    .flex .g3-flex4 {
      float: left;
      width: 33.33333%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex4.push {
        float: right; }
    .flex .g3-flex5 {
      float: left;
      width: 41.66667%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex5.push {
        float: right; }
    .flex .g3-flex6 {
      float: left;
      width: 50%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex6.push {
        float: right; }
    .flex .g3-flex7 {
      float: left;
      width: 58.33333%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex7.push {
        float: right; }
    .flex .g3-flex8 {
      float: left;
      width: 66.66667%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex8.push {
        float: right; }
    .flex .g3-flex9 {
      float: left;
      width: 75%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex9.push {
        float: right; }
    .flex .g3-flex10 {
      float: left;
      width: 83.33333%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex10.push {
        float: right; }
    .flex .g3-flex11 {
      float: left;
      width: 91.66667%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex11.push {
        float: right; }
    .flex .g3-flex12 {
      width: 100%;
      padding: 0 20px;
      padding: 0 1.25rem; }
      .flex .g3-flex12.push {
        float: right; }
    .flex .g3-show {
      display: block; }
    .flex .g3-hide {
      display: none; }
    .flex .g3-offset1 {
      margin-left: 8.4%; }
      .flex .g3-offset1 .flex-nested.g3-flex6.breakout {
        width: calc(50% + 100px); }
        .flex .g3-offset1 .flex-nested.g3-flex6.breakout:not(.push) {
          margin-left: -100px;
          margin-right: 20px;
          margin-right: 1.25rem; }
        .flex .g3-offset1 .flex-nested.g3-flex6.breakout.push {
          margin-right: -100px;
          margin-left: 20px;
          margin-left: 1.25rem; }
    .flex .g3-offset2 {
      margin-left: 16.8%; }
    .flex .g3-offset3 {
      margin-left: 24.2%; } }