/*
* A responsive grid layout
* written by vnikolova 12/16
* supports auto row width, row of 4,8 and 12 columns
*/

/* base classes for all screen sizes */
html, body {
  margin: 0;
  padding: 0;
}
.row {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  flex-direction: column;
}

.full {
  flex: 0 0 100%;
}

.col-1of2, .col-4of8 {
  flex: 0 0 50%;
}

.col-1of3 {
  flex: 0 0 33.3333%;
}
.col-2of3 {
  flex: 0 0 66.6666%;
}
.col-1of4, .col-2of8 {
  flex: 0 0 25%;
}
.col-1of8 {
  flex:0 0 12.5%;
}
.col-3of8 {
  flex: 0 0 37.5%;
}
.col-5of8 {
  flex: 0 0 62.5%;
}
.col-6of8, .col-3of4 {
  flex: 0 0 75%;
}
.col-1of5 {
  flex: 0 0 20%;
}
/* row alignment */
.start {
  align-items: flex-start;
}
.end {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
}
.center {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* column alignment */
.align-top {
  align-self: flex-start;

}
.align-bottom {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.align-center {
  align-self: center;
}

/* breakpoints */

/* small to medium */
@media screen  and (min-device-width: 270px) {
  .sm-auto {
    flex: 1;
  }
  .sm-full {
    flex: 0 0 100%;
  }

  .sm-1of2, .sm-4of8 {
    flex: 0 0 50%;
  }

  .sm-1of3 {
    flex: 0 0 33.3333%;
  }
  .sm-2of3 {
    flex: 0 0 66.6666%;
  }
  .sm-1of4, .sm-2of8 {
    flex: 0 0 25%;
  }
  .sm-1of8 {
    flex:0 0 12.5%;
  }
  .sm-3of8 {
    flex: 0 0 37.5%;
  }
  .sm-5of8 {
    flex: 0 0 62.5%;
  }
  .sm-6of8 {
    flex: 0 0 75%;
  }

}

/* large */
@media screen and (min-width: 800px) {
  .lg-auto {
    flex: 1;
  }
  .lg-full {
    flex: 0 0 100%;
  }

  .lg-1of2, .lg-4of8 {
    flex: 0 0 50%;
  }

  .lg-1of3 {
    flex: 0 0 33.3333%;
  }
  .lg-2of3 {
    flex: 0 0 66.6666%;
  }
  .lg-1of4, .lg-2of8 {
    flex: 0 0 25%;
  }
  .lg-1of8 {
    flex:0 0 12.5%;
  }
  .lg-3of8 {
    flex: 0 0 37.5%;
  }
  .lg-5of8 {
    flex: 0 0 62.5%;
  }
  .lg-6of8 {
    flex: 0 0 75%;
  }

}