.g .one-whole, .g .one-half, .g .one-third, .g .two-thirds {
  float: left;
  direction: ltr;
  display: inline-block;
}

.g, .g .r {
  *zoom: 1;
  clear: both;
}
.g:before, .g .r:before, .g:after, .g .r:after {
  content: "";
  display: table;
  height: 0;
}
.g:after, .g .r:after {
  clear: both;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.g {
  max-width: 100%;
  _width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .g.respond .one-half, .g.respond .one-third, .g.respond .two-thirds {
    left: 0;
    right: 0;
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .g.respond .one-half, .g.respond .one-third, .g.respond .two-thirds {
    left: 0;
    right: 0;
    width: 100%;
  }
}
.g.pad {
  padding: 20px;
}
.g.pad-h {
  padding-left: 20px;
  padding-right: 20px;
}
.g.pad-v {
  padding-top: 20px;
  padding-bottom: 20px;
}
.g.gutter .r {
  margin-left: -20px;
  margin-top: -20px;
}
.g.gutter .one-whole, .g.gutter .one-half, .g.gutter .one-third, .g.gutter .two-thirds {
  padding-left: 20px;
  padding-top: 20px;
}
.g.gutter-v .r {
  margin-top: -20px;
}
.g.gutter-v .one-whole, .g.gutter-v .one-half, .g.gutter-v .one-third, .g.gutter-v .two-thirds {
  padding-top: 20px;
}
.g.gutter-h .r {
  margin-left: -20px;
}
.g.gutter-h .one-whole, .g.gutter-h .one-half, .g.gutter-h .one-third, .g.gutter-h .two-thirds {
  padding-left: 20px;
}
@media screen and (max-width: 768px) {
  .g .r.respond .one-half, .g .r.respond .one-third, .g .r.respond .two-thirds {
    left: 0;
    right: 0;
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .g .r.respond .one-half, .g .r.respond .one-third, .g .r.respond .two-thirds {
    left: 0;
    right: 0;
    width: 100%;
  }
}
.g .one-whole {
  width: 100%;
}
.g .one-half {
  width: 50%;
}
.g .one-third {
  width: 33.33333%;
}
.g .two-thirds {
  width: 66.66667%;
}
@media screen and (max-width: 768px) {
  .g .tablet-one-whole {
    width: 100%;
    left: 0;
    right: 0;
  }
  .g .tablet-one-half {
    width: 50%;
    left: 0;
    right: 0;
  }
  .g .tablet-one-third {
    width: 33.33333%;
    left: 0;
    right: 0;
  }
  .g .tablet-two-thirds {
    width: 66.66667%;
    left: 0;
    right: 0;
  }
}
@media screen and (max-width: 480px) {
  .g .phone-one-whole {
    width: 100%;
    left: 0;
    right: 0;
  }
  .g .phone-one-half {
    width: 50%;
    left: 0;
    right: 0;
  }
  .g .phone-one-third {
    width: 33.33333%;
    left: 0;
    right: 0;
  }
  .g .phone-two-thirds {
    width: 66.66667%;
    left: 0;
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .g.respond .tablet-one-whole, .g .r.respond .tablet-one-whole {
    width: 100%;
    left: 0;
    right: 0;
  }
  .g.respond .tablet-one-half, .g .r.respond .tablet-one-half {
    width: 50%;
    left: 0;
    right: 0;
  }
  .g.respond .tablet-one-third, .g .r.respond .tablet-one-third {
    width: 33.33333%;
    left: 0;
    right: 0;
  }
  .g.respond .tablet-two-thirds, .g .r.respond .tablet-two-thirds {
    width: 66.66667%;
    left: 0;
    right: 0;
  }
}
@media screen and (max-width: 480px) {
  .g.respond .phone-one-whole, .g .r.respond .phone-one-whole {
    width: 100%;
    left: 0;
    right: 0;
  }
  .g.respond .phone-one-half, .g .r.respond .phone-one-half {
    width: 50%;
    left: 0;
    right: 0;
  }
  .g.respond .phone-one-third, .g .r.respond .phone-one-third {
    width: 33.33333%;
    left: 0;
    right: 0;
  }
  .g.respond .phone-two-thirds, .g .r.respond .phone-two-thirds {
    width: 66.66667%;
    left: 0;
    right: 0;
  }
}