.order-process {
   margin-bottom: 30px;

   .order-process-step {
      @include underline-never;

      background: $gray-lighter;
      border: 2px solid $gray-lighter;
      color: $cart-info;
      display: table;
      font-size: 16px;
      text-transform: uppercase;
      width: 100%;

      > span {
         display: table-cell;
         height: 83px;
         line-height: 25px;
         vertical-align: middle;
      }
   }

   a:hover,
   a:active,
   a:focus {
      border-color: $border-color;
   }

   .step-title {
      padding-top: 4px;
      padding-right: 10px;
   }

   .step {
      color: $font-color;
      font-size: 22px;
      font-weight: 700;
      margin-right: 20px;
      text-align: center;
      width: 70px;
      line-height: 25px;

      i {
         display: none;
         font-style: normal;
      }
   }


   .active .order-process-step {
      background: $white;
      border-color: $border-color;

      .step { color: $brand-primary; }
   }
}


@media screen and (max-width: 830px) {
   .order-process {

      .order-process-step > span {
         height: 60px;
         line-height: 20px;
      }

      .step {
         width: 40px;
      }
   }
}

@media screen and (max-width: 600px) {
   .order-process {

      .col-xs-3 {
         width: 16.666%;

         .step-title { display: none; }
      }

      .active {
         width: 50%;

         .step-title { display: table-cell; }
      }
   }
}

@media screen and (max-width: 450px) {
   .order-process {

      .col-xs-3 {
         display: none;
      }

      .active {
         width: 100%;
         display: block;

         .step {
            width: auto;

            i {
               color: $font-color;
               display: inline;
            }
         }
      }
   }
}
