.nl-process {
          padding-top: 30px;
        }

        .process-list {
          display: table;
          table-layout: fixed;
          width: 100%;
          counter-reset: process-count;
          height: 54px;
        }

        .complete-hint {
          display: none;
          width: 54px;
          height: 54px;
          background: #69be38;
          border-radius: 50%;
          text-align: center;
          position: absolute;
          left: calc(50% - 24px);
          top: 23px;
          z-index: 3;
        }
        .complete-hint i {
          line-height: 54px;
          color: #fff;
          font-size: 28px;
        }
        .complete-hint.is-show {
          display: block;
          -webkit-animation: scale0to1 160ms forwards;
                  animation: scale0to1 160ms forwards;
        }
        .complete-hint.is-hide {
          display: none;
        }

        .process-item {
          display: table-cell;
          text-align: center;
          cursor:pointer;
        }
        .process-item:first-child {
          /*pointer-events: none;*/
        }
        .process-item:first-child .process-content:before {
          display: none;
        }
        .process-item:last-child .process-content:after {
          display: none;
        }
        .process-item:last-child .process-active-bar {
          display: none !important;
        }

        .process-content {
          position: relative;
        }
        .process-content .process-active-bar, .process-content:before, .process-content:after {
          content: '';
          position: absolute;
          background: #e5e5e6;
          border-radius: 2px;
          height: 4px;
          top: 12px;
          transition: all 120ms ease-in;
        }
        .process-content .process-active-bar {
          position: absolute;
          background: #ff9c23;
          z-index: 2;
          left: calc(50% + 20px);
          right: calc(100% - 20px);
          transition: all 300ms ease-out;
        }
        .process-content:before {
          right: calc(50% + 20px);
          left: -2px;
        }
        .process-content:after {
          left: calc(50% + 20px);
          right: 0;
          z-index: 1;
        }
        .process-content .circle {
          position: relative;
          background: #e5e5e6;
          display: inline-block;
          border-radius: 50%;
          width: 28px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          transition: all 300ms ease-in;
        }
        .process-content .circle span {
          color: #999;
        }
        .process-content .circle span:before {
          counter-increment: process-count;
          content: counter(process-count);
        }
        .process-content .des {
          padding-top: 5px;
          padding: 5px 10px;
          box-sizing: border-box;
        }
        .process-content .des span {
          color: #bbb;
          transition: color 120ms ease-in;
        }
        .process-item.is-active .process-content .process-active-bar {
          display: block;
          right: calc(-50% + 20px);
        }
        .process-item.is-active .process-content .circle {
          background: #ff9c23;
        }
        .process-item.is-active .process-content .circle span {
          color: #fff;
          display: inline-block;
          -webkit-animation: scale0to1 300ms forwards;
                  animation: scale0to1 300ms forwards;
        }
        .process-item.is-active .process-content .circle span:before {
          content: "\f00c";
          font: normal normal normal 14px/1 FontAwesome;
        }
        .process-item.is-active .process-content .des span {
          color: #6f6f6f;
        }
        .process-item.is-current .process-content .circle {
          background: #ff9c23;
        }
        .process-item.is-current .process-content .circle span {
          color: #fff;
        }
        .process-item.is-current .process-content .des span {
          color: #6f6f6f;
        }
        .process-item.all-complete .process-content .process-active-bar, .process-item.all-complete .process-content:before, .process-item.all-complete .process-content:after,
        .process-item.all-complete .process-content .des {
          width: 0;
          opacity: 0;
        }
        .process-item.all-complete .process-content .circle {
          -webkit-transform: scale(0);
                  transform: scale(0);
        }

        .footer {
          text-align: center;
          padding-top: 50px;
        }
        .footer .footer-btn {
          font-size: 24px;
          color: #fff;
          padding: 15px 80px;
          background: #ff9c23;
          border: 0;
          border-radius: 4px;
          transition: background 120ms ease-in;
          cursor: pointer;
          display: inline-block;
        }
        .footer .footer-btn.is-ghost {
          background: transparent;
          color: #ff9c23;
          box-shadow: inset 0 0 0 2px #ff9c23;
        }
        .footer .footer-btn:hover {
          background: #ffa73d;
          color: #fff;
        }
        .footer .footer-btn:active {
          background: #ff910a;
        }
        .footer .footer-btn.is-show {
          display: inline-block;
        }
        .footer .footer-btn.is-hide {
          display: none;
        }
        .footer .footer-btn.is-slidedown {
          -webkit-animation: slideDown 120ms forwards;
                  animation: slideDown 120ms forwards;
        }
        .footer .footer-btn.is-slideup {
          -webkit-animation: slideUp 120ms forwards;
                  animation: slideUp 120ms forwards;
        }

        @-webkit-keyframes scale0to1 {
          0% {
            -webkit-transform: scale(0);
                    transform: scale(0);
          }
          100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
          }
        }

        @keyframes scale0to1 {
          0% {
            -webkit-transform: scale(0);
                    transform: scale(0);
          }
          100% {
            -webkit-transform: scale(1);
                    transform: scale(1);
          }
        }
        @-webkit-keyframes slideDown {
          0% {
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
            opacity: 1;
          }
          100% {
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
            opacity: 0;
          }
        }
        @keyframes slideDown {
          0% {
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
            opacity: 1;
          }
          100% {
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
            opacity: 0;
          }
        }
        @-webkit-keyframes slideUp {
          0% {
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
            opacity: 0;
          }
          100% {
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
            opacity: 1;
          }
        }
        @keyframes slideUp {
          0% {
            -webkit-transform: translate3d(0, 100%, 0);
                    transform: translate3d(0, 100%, 0);
            opacity: 0;
          }
          100% {
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
            opacity: 1;
          }
        }

        #clockdiv{ 
            color: #212020;
            display: inline-block;
            font-weight: 100;
            text-align: center;
            font-size: 30px;
        }

        #clockdiv > div{
            padding: 10px;
            border-radius: 3px;
            display: inline-block;
        }

        #clockdiv div > span{
            color: #fff;
            padding: 15px;
            border-radius: 3px;
            background: #ffa73d;
            display: inline-block;
        }

        .smalltext{
            padding-top: 5px;
            font-size: 16px;
        }