/** Slant **/
.slant {
  position: relative;
  z-index: 1;
  padding-bottom: 10em;
  min-height: 400px;
}
.slant > * {
  position: relative;
  z-index: 5;
}
.slant:before, .slant:after {
  box-sizing: border-box;
  content: '';
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.slant:before, .slant:nth-child(odd):after {
  border-width: 8.25em 100vw 0 calc(14vw + -10vh);
  margin-top: -8.25em;
  margin-top: calc(-8.25em + 1px);
  left: auto;
  right: 0;
  border-color: transparent #000 transparent transparent;
}
.slant:after, .slant:nth-child(odd):before {
  border-width: 9em calc(14vw + -10vh) 0 100vw;
  margin-top: -9em;
  margin-top: calc(-9em + 2px);
  border-color: transparent transparent transparent #333;
}

.slant:nth-child(odd):before, .slant:nth-child(odd):after {
  -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
.slant:nth-child(odd):before {
  z-index: 1;
}
.slant:nth-child(odd):after {
  z-index: 0;
}

.bg-light-blue {
  background: #41ade5;
  color: #fff;
}
.bg-dark-grey {
  background: #263545;
  color: #fff;
}
.bg-turquoise {
  background: #3097b6;
  color: #fff;
}

.slant-light-blue:before, .slant:nth-child(odd).slant-light-blue:after {
  border-right-color: #2098db;
}
.slant-light-blue:after, .slant:nth-child(odd).slant-light-blue:before {
  border-left-color: #41ade5;
}

.slant-dark-grey:before, .slant:nth-child(odd).slant-dark-grey:after {
  border-right-color: #2d4254;;
}
.slant-dark-grey:after, .slant:nth-child(odd).slant-dark-grey:before {
  border-left-color: #263545;
}

.slant-turquoise:before, .slant:nth-child(odd).slant-turquoise:after {
  border-right-color: #157796;
}
.slant-turquoise:after, .slant:nth-child(odd).slant-turquoise:before {
  border-left-color: #3097b6;
}