/* Grid */
.Grid {
  display: flex;
  flex-flow: row wrap;
}

.Grid--alignSpaceBetween {
  justify-content: space-between;
}

.Grid--alignMiddle {
  justify-content: center;
  align-items: center;
}

.Grid--alignRight {
  justify-content: flex-end;
}

.Grid-cell{
  box-sizing: inherit;
}

/* Flex */
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.flex5 {
  flex: 5;
}
.flex6 {
  flex: 6;
}

/* Margins */
.ma1 {
  margin: .25rem;
}
.ma2 {
  margin: .5rem;
}
.ma3 {
  margin: 1rem;
}
.mr2 {
  margin-right: .5rem;
}
.mr3 {
  margin-right: 1rem;
}
.mt2 {
  margin-top: .5rem;
}
.mt3 {
  margin-top: 1rem;
}
.mt4 {
  margin-top: 2rem;
}
.mt5 {
  margin-top: 4rem;
}
.mt6 {
  margin-top: 8rem;
}
.mb2 {
  margin-bottom: .5rem;
}
.mb3 {
  margin-bottom: 1rem;
}
.mb4 {
  margin-bottom: 2rem;
}
.mb5 {
  margin-bottom: 4rem;
}
.mb6 {
  margin-bottom: 8rem;
}
.mb7 {
  margin-bottom: 16rem;
}

/* Paddings */
.pa1 {
  padding: .25rem;
}
.pa2 {
  padding: .5rem;
}
.pa3 {
  padding: 1rem;
}
.pa4 {
  padding: 2rem;
}
.pt3 {
  padding-top: 1rem;
}
.pt4 {
  padding-top: 2rem;
}
.pt5 {
  padding-top: 4rem;
}
.pt6 {
  padding-top: 8rem;
}
.pb3 {
  padding-bottom: 1rem;
}
.pb4 {
  padding-bottom: 2rem;
}
.pb5 {
  padding-bottom: 4rem;
}
.pb6 {
  padding-bottom: 8rem;
}
.ph3 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.ph4 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.ph5 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.ph6 {
  padding-left: 8rem;
  padding-right: 8rem;
}
.pv2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pv4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pv5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.pv6 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

/* Displays */
.dn {
  display: none !important;
}

@media screen and (max-width: 30em) {
  .dn-sm {
    display: none;
  }
  .pt3-sm {
    padding-top: 1rem;
  }
  .v-100-sm {
    min-height: 100vh;
  }
}

@media screen and (min-width: 30em) {
  .dn-ns {
    display: none;
  }
  .Grid-ns {
    display: flex;
    flex-flow: row wrap;
  }
}

@media screen and (min-width: 30em) {
  .pv5-ns {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .pv6-ns {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .pt4-ns {
    padding-top: 2rem;
  }
  .pt5-ns {
    padding-top: 4rem;
  }
  .pt6-ns {
    padding-top: 8rem;
  }
  .pt5-l {
    padding-top: 4rem;
  }
  .ph0-l {
    padding-left: 0;
    padding-right: 0;
  }
  .mb6-ns {
    margin-bottom: 8rem;
  }
  .db-l {
    display: block;
  }
}

/* Widths */
.w-100 {
  width: 100%;
}
.w-90 {
  width: 90%;
}
.w-80 {
  width: 80%;
}
.w-75 {
  width: 75%;
}
.w-70 {
  width: 70%;
}
.w-60 {
  width: 60%;
}
.w-50 {
  width: 50%;
}
.w-40 {
  width: 40%;
}
.w-30 {
  width: 30%;
}

.v-100 {
  min-height: 100vh;
}
.v-90 {
  min-height: 90vh;
}
.v-80 {
  min-height: 80vh;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 30em) {
  .w-40-ns {
    width: 40%;
  }
  .w-50-ns {
    width: 50%;
  }
  .w-55-ns {
    width: 55%;
  }
  .w-60-ns {
    width: 60%;
  }
  .w-70-ns {
    width: 70%;
  }
  .w-80-ns {
    width: 80%;
  }
  .w-90-ns {
    width: 90%;
  }
  .w-100-ns {
    width: 100%;
  }
}

@media screen and (min-width: 30em) {
  .v-100-ns {
    min-height: 100vh;
  }
}

.cf {
  overflow: auto;
}

.col {
  box-sizing: border-box;
  flex: 1 1 8%;
}

.col-span {
  flex-basis: 8.3333%;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

@media screen and (min-width: 30em) {
  .fl-ns {
    float: left;
  }
  .fr-ns {
    float: right;
  }
}

.img-circle {
  border-radius: 50%;
}

@media screen and (max-width: 30em) {
  .col-reverse {
    display: flex;
    flex: 1;
    flex-direction: column-reverse;
  }
}