/* line 2, component.scss */
.step-wrapper {
  width: 100%;
  font-size: 1.6rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #b34e4a;
  height: 100vh; }
  /* line 13, component.scss */
  .step-wrapper .position-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  /* line 18, component.scss */
  .step-wrapper .step-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #000000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%; }
    /* line 29, component.scss */
    .step-wrapper .step-container .step-list {
      position: relative;
      width: 91%;
      height: 0.5rem;
      background: #ffffff;
      color: #000000;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-transition: all ease-in 0.5s;
      transition: all ease-in 0.5s; }
      /* line 43, component.scss */
      .step-wrapper .step-container .step-list .step-item {
        width: 50px;
        height: 50px;
        font-weight: 700;
        display: inline-block;
        border-radius: 100px;
        background: #91ab55; }
        @media only screen and (max-width: 20em) {
          /* line 43, component.scss */
          .step-wrapper .step-container .step-list .step-item {
            width: 5px;
            height: 5px;
            border-radius: 50%; } }
        @media only screen and (max-width: 23.4375em) {
          /* line 43, component.scss */
          .step-wrapper .step-container .step-list .step-item {
            width: 20px;
            height: 20px; } }
        @media only screen and (max-width: 30em) {
          /* line 43, component.scss */
          .step-wrapper .step-container .step-list .step-item {
            width: 30px;
            height: 30px; } }
        /* line 71, component.scss */
        .step-wrapper .step-container .step-list .step-item a {
          position: relative;
          color: #ffffff;
          text-decoration: none;
          font-size: 1.6rem;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          height: 100%; }
      /* line 88, component.scss */
      .step-wrapper .step-container .step-list .cancelled a:after {
        position: absolute;
        width: auto;
        height: 5px;
        left: 60%;
        content: '';
        background-color: #cc080b;
        -webkit-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) width 0.5s;
        transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) width 0.5s; }
        @media only screen and (min-width: 90em) {
          /* line 88, component.scss */
          .step-wrapper .step-container .step-list .cancelled a:after {
            width: 600%; } }
        @media only screen and (max-width: 80em) {
          /* line 88, component.scss */
          .step-wrapper .step-container .step-list .cancelled a:after {
            width: 400%; } }
        @media only screen and (max-width: 48em) {
          /* line 88, component.scss */
          .step-wrapper .step-container .step-list .cancelled a:after {
            width: 200%; } }
        @media only screen and (max-width: 30em) {
          /* line 88, component.scss */
          .step-wrapper .step-container .step-list .cancelled a:after {
            width: 160%; } }
        @media only screen and (max-width: 23.4375em) {
          /* line 88, component.scss */
          .step-wrapper .step-container .step-list .cancelled a:after {
            width: 150%; } }
        @media only screen and (max-width: 20em) {
          /* line 88, component.scss */
          .step-wrapper .step-container .step-list .cancelled a:after {
            width: 100%; } }
      /* line 125, component.scss */
      .step-wrapper .step-container .step-list .onprogress a:after {
        position: absolute;
        width: 5px;
        height: 5px;
        left: 60%;
        content: '';
        background-color: #91ab55;
        -webkit-transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) width 0.5s;
        transition: cubic-bezier(0.455, 0.03, 0.515, 0.955) width 0.5s;
        -webkit-animation: slideRight 0.5s ease-in-out 0.5s alternate infinite;
                animation: slideRight 0.5s ease-in-out 0.5s alternate infinite; }
        @media only screen and (min-width: 90em) {
          @-webkit-keyframes slideRight {
            0% {
              width: 0%; }
            5% {
              width: 5%; }
            10% {
              width: 10%; }
            15% {
              width: 15%; }
            20% {
              width: 20%; }
            25% {
              width: 25%; }
            30% {
              width: 30%; }
            35% {
              width: 35%; }
            40% {
              width: 40%; }
            50% {
              width: 50%; }
            100% {
              width: 800%; } }
          @keyframes slideRight {
            0% {
              width: 0%; }
            5% {
              width: 5%; }
            10% {
              width: 10%; }
            15% {
              width: 15%; }
            20% {
              width: 20%; }
            25% {
              width: 25%; }
            30% {
              width: 30%; }
            35% {
              width: 35%; }
            40% {
              width: 40%; }
            50% {
              width: 50%; }
            100% {
              width: 800%; } } }
        @media only screen and (max-width: 80em) {
          @-webkit-keyframes slideRight {
            100% {
              width: 500%; } }
          @keyframes slideRight {
            100% {
              width: 500%; } } }

          @media only screen and (min-width: 49em) {
        @-webkit-keyframes slideRight {
          100% {
            width: 500%; } }
        @keyframes slideRight {
          100% {
            width: 500%; } } }
          
        
        @media only screen and (max-width: 48em) {
          @-webkit-keyframes slideRight {
            100% {
              width: 300%; } }
          @keyframes slideRight {
            100% {
              width: 300%; } } }
        @media only screen and (max-width: 30em) {
          @-webkit-keyframes slideRight {
            100% {
              width: 250%; } }
          @keyframes slideRight {
            100% {
              width: 250%; } } }
        @media only screen and (max-width: 23.4375em) {
          @-webkit-keyframes slideRight {
            100% {
              width: 200%; } }
          @keyframes slideRight {
            100% {
              width: 200%; } } }
        @media only screen and (max-width: 20em) {
          @-webkit-keyframes slideRight {
            100% {
              width: 200%; } }
          @keyframes slideRight {
            100% {
              width: 200%; } } }
      /* line 220, component.scss */
      .step-wrapper .step-container .step-list .step-text {
        color: #ffffff;
        font-size: 0.875rem;
        margin-top: 4rem;
        text-align: left; }
        @media only screen and (min-width: 90em) {
          /* line 220, component.scss */
          .step-wrapper .step-container .step-list .step-text {
            font-size: 2rem; } }
        @media only screen and (max-width: 80em) {
          /* line 220, component.scss */
          .step-wrapper .step-container .step-list .step-text {
            font-size: 2rem; } }
        @media only screen and (max-width: 30em) {
          /* line 220, component.scss */
          .step-wrapper .step-container .step-list .step-text {
            font-size: 0.875rem; } }

/* line 7, utils.scss */
.mb-10 {
  margin-bottom: 10rem; }

/* line 11, utils.scss */
.mb-2 {
  margin-bottom: 2rem; }

/* line 26, utils.scss */
.default-color {
  color: #ffffff; }

/* line 32, utils.scss */
.img-circular {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center; }

/* line 13, stepper.scss */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%; }

/* line 22, stepper.scss */
html {
  font-size: 62.5%; 

  @media only screen and (min-width: 90em) {
     font-size:1rem;
  }
    @media only screen and (max-width: 80em) {
       font-size:1rem;
  }

  @media only screen and (min-width: 49em) {
       font-size:1rem;
  }
     @media only screen and (max-width: 30em) {
        font-size:1rem;
  }
}

/*# sourceMappingURL=stepper.css.map */