.chev {
  width: 100%;
  height: 140px;
  line-height: 140px;
  background: #000;
  position: relative;
  float: left;
  margin-right: 30px;
  margin-top: 30px;
  transition: all 0.2s ease-in; }
  .chev:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 30px solid white;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent; }
  .chev:after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 30px solid #000;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
    transition: all 0.2s ease-in; }
  .chev:hover {
    background: #333333; }
    .chev:hover:after {
      border-left: 30px solid #333333; }
  .chev p {
    width: calc(100% - 40px);
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    color: #fff;
    padding: 0 0 0 40px;
    line-height: 14px;
    margin: 0; }
  .chev.red {
    background: #f03333; }
    .chev.red:after {
      border-left: 30px solid #f03333; }
    .chev.red:hover {
      background: #b00d0d; }
      .chev.red:hover:after {
        border-left: 30px solid #b00d0d; }
  .chev.yellow {
    background: #f1cd4a; }
    .chev.yellow:after {
      border-left: 30px solid #f1cd4a; }
    .chev.yellow:hover {
      background: #c69e0f; }
      .chev.yellow:hover:after {
        border-left: 30px solid #c69e0f; }
  .chev.green {
    background: #afca30; }
    .chev.green:after {
      border-left: 30px solid #afca30; }
    .chev.green:hover {
      background: #68781c; }
      .chev.green:hover:after {
        border-left: 30px solid #68781c; }
  .chev.blue-light {
    background: #4891aa; }
    .chev.blue-light:after {
      border-left: 30px solid #4891aa; }
    .chev.blue-light:hover {
      background: #2a5462; }
      .chev.blue-light:hover:after {
        border-left: 30px solid #2a5462; }
  .chev.blue-dark {
    background: #2a5462; }
    .chev.blue-dark:after {
      border-left: 30px solid #2a5462; }
    .chev.blue-dark:hover {
      background: #0b171b; }
      .chev.blue-dark:hover:after {
        border-left: 30px solid #0b171b; }
  .chev.grey {
    background: #8c8c8c; }
    .chev.grey:after {
      border-left: 30px solid #8c8c8c; }
    .chev.grey:hover {
      background: #8c8c8c; }
      .chev.grey:hover:after {
        border-left: 30px solid #8c8c8c; }

.chev-1 {
  float: left;
  margin-right: 30px;
  width: 8.3333333333%; }

.chev-2 {
  float: left;
  margin-right: 30px;
  width: 16.6666666667%; }

.chev-3 {
  float: left;
  margin-right: 30px;
  width: 25%; }

.chev-4 {
  float: left;
  margin-right: 30px;
  width: 33.3333333333%; }

.chev-5 {
  float: left;
  margin-right: 30px;
  width: 41.6666666667%; }

.chev-6 {
  float: left;
  margin-right: 30px;
  width: 50%; }

.chev-7 {
  float: left;
  margin-right: 30px;
  width: 58.3090379009%; }

.chev-8 {
  float: left;
  margin-right: 30px;
  width: 66.6666666667%; }

.chev-9 {
  float: left;
  margin-right: 30px;
  width: 75.1879699248%; }

.chev-10 {
  float: left;
  margin-right: 30px;
  width: 83.3333333333%; }

.chev-11 {
  float: left;
  margin-right: 30px;
  width: 91.7431192661%; }

.chev-12 {
  float: left;
  margin-right: 30px;
  width: 100%; }