.wizard{

  max-width:900px;

  margin-left: auto;
  margin-right: auto;
  .wizard-header {
    text-align: center;
    display:flex;
    justify-content: center;
    max-width:900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;





    .header-item{
      flex: 1 0 0;
      text-align: left;
      position:relative;





      &:before{
        position:absolute;
        width:100%;
        top:20px;
        left:0;
        height:3px;
        background:$gray-300;
        display:block;
        content:"";
        z-index:2;
      }

      &:last-of-type{
        &:before{
          display:none;
        }
      }


    .circle{
      display:inline-block;
      width:40px;
      height:40px;
      border-radius:500px;
      background:$gray-300;
      transition:all linear 0.2s;
      z-index:3;
      position:relative;

    }

    .label{
      text-align:left;
      display:block;
      opacity:0.5;
      transition:all ease-in-out 0.1s;
      span{
        display:block;

        &.step-number{
          transition:all linear 0.2s;
          font-size: 15px;
          font-weight: bold;
          text-transform: uppercase;
          margin-top: 8px;
        }
      }
    }

      &.active{

        .circle{

          background:$bg-leftbar;
          transform:scale(1.3);



        }

        .label{
          opacity:1;
          span{
            &.step-number{
              color:#00b068;
            }
          }

        }

      }

      &.completed{

        .circle{

          background:$bg-leftbar;



        }

        &:before{
          background:$bg-leftbar;
        }

        .label{
          opacity:1;
        }

      }
  }





  }


  .wizard-content{

    padding:0 30px;
    .step{
      display:none;

      &.active{
        display:block;

      }
    }
  }

  .wizard-nav{
    text-align:right;
    border-top:1px solid $gray-600;
    padding-top:20px;
    margin-top:45px;
  }

}