/*/ Stew's FlexGrid - Stand Alone/*/
/*/= = = = = = = = = = = = = = = =/*/
/*/ = = = = 2. Grid Mixins = = = = /*/
.grid {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0 auto;
}

@media screen and (max-width: 670px) {
  .grid {
    width: 100%;
  }
}

@media screen and (min-width: 671px) and (max-width: 1024px) {
  .grid {
    width: 95%;
  }
}

@media screen and (min-width: 1025px) {
  .grid {
    width: 100%;
    max-width: 72rem;
  }
}

.grid-cell,
.grid-fourth,
.grid-third,
.grid-half,
.grid-two-thirds,
.grid-three-fourths,
.grid-full {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 1.4%;
}

.grid-cell:first-child,
.grid-fourth:first-child,
.grid-third:first-child,
.grid-half:first-child,
.grid-two-thirds:first-child,
.grid-three-fourths:first-child,
.grid-full:first-child {
  margin-left: 0;
}

.grid-cell:last-child,
.grid-fourth:last-child,
.grid-third:last-child,
.grid-half:last-child,
.grid-two-thirds:last-child,
.grid-three-fourths:last-child,
.grid-full:last-child {
  margin-right: 0;
}

@media screen and (max-width: 768px) {
  .grid-cell,
  .grid-fourth,
  .grid-third,
  .grid-half,
  .grid-two-thirds,
  .grid-three-fourths,
  .grid-full {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin: 0;
    margin-bottom: 1.4%;
  }
}

/*/==== 3. The Grid ====/*/
.gird .grid {
  width: 100%;
  max-width: 100%;
}

.grid-fourth {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 22.9%;
      -ms-flex: 0 0 22.9%;
          flex: 0 0 22.9%;
}

.grid-third {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 31.45%;
      -ms-flex: 0 0 31.45%;
          flex: 0 0 31.45%;
}

.grid-half {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 48.6%;
      -ms-flex: 0 0 48.6%;
          flex: 0 0 48.6%;
}

.grid-two-thirds {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 65.6666%;
      -ms-flex: 0 0 65.6666%;
          flex: 0 0 65.6666%;
}

.grid-three-fourths {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 74.3%;
      -ms-flex: 0 0 74.3%;
          flex: 0 0 74.3%;
}

.grid-full {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

/*/ = = = = 4. Media Queries = = = = /*/
@media screen and (max-width: 670px) {
  .grid-cell,
  .grid-fourth,
  .grid-third,
  .grid-half,
  .grid-two-thirds,
  .grid-three-fourths,
  .grid-full {
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 100% !important;
        -ms-flex: 0 0 100% !important;
            flex: 0 0 100% !important;
  }
}

/*Vertical Modifires*/
.align-top {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.align-bottom {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

/*Wrap Modifires*/
.wrap {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.no-wrap {
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}

/* Content Align Modifires */
.content-start {
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

.content-end {
  -webkit-align-content: flex-end;
      -ms-flex-line-pack: end;
          align-content: flex-end;
}

.content-center {
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}

.content-between {
  -webkit-align-content: space-between;
      -ms-flex-line-pack: justify;
          align-content: space-between;
}

.content-around {
  -webkit-align-content: space-around;
      -ms-flex-line-pack: distribute;
          align-content: space-around;
}

.justify-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}