.feature-staircase {
  z-index: 1;
}

.feature-staircase.bg-angle {
  background-image: url("../../../images/subtle-angle.svg");
  background-position: top right;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.feature-staircase .paragraph--type--feature-staircase-step {
  flex-wrap: nowrap;
}

.feature-staircase .step-number {
  font-size: 93px;
  font-weight: 600;
  margin-right: 16px;
}

.feature-staircase .step-info h3 {
  font-size: 31px;
  margin: 21px 0 5px;
  line-height: normal;
}

.feature-staircase .step {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 48%;
  margin-bottom: 40px;
  opacity: 0;
  -webkit-transform: translateX(-80px);
  transform: translateX(-80px);
}

.feature-staircase .step2 {
  margin-left: 25%;
}

.feature-staircase .step3 {
  margin-left: auto;
}

.feature-staircase.animated .step {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: all 1s cubic-bezier(.215, .61, .355, 1) .5s;
  transition: all 1s cubic-bezier(.215, .61, .355, 1) .5s;
}

.feature-staircase.animated .step2 {
  -webkit-transition: all 1s cubic-bezier(.215, .61, .355, 1) 1s;
  transition: all 1s cubic-bezier(.215, .61, .355, 1) 1s;
}

.feature-staircase.animated .step3 {
  -webkit-transition: all 1s cubic-bezier(.215, .61, .355, 1) 1.5s;
  transition: all 1s cubic-bezier(.215, .61, .355, 1) 1.5s;
}

.feature-staircase .image-step {
  position: absolute;
  left: 0;
  bottom: -180px;
}

.feature-staircase .image-bg {
  width: 411px;
  height: 402px;
  top: 14px;
  position: absolute;
  z-index: 0;
  -webkit-clip-path: inset(0% 100% 0% 0%);
  clip-path: inset(0% 100% 0% 0%);
}

.feature-staircase.animated .image-bg {
  -webkit-transition: all .5s cubic-bezier(.215, .61, .355, 1) 1.7s;
  transition: all .5s cubic-bezier(.215, .61, .355, 1) 1.7s;
  -webkit-clip-path: inset(0% 0% 0% 0%);
  clip-path: inset(0% 0% 0% 0%);
}

.feature-staircase .image-device {
  width: 580px;
  height: 595px;
  background-position: right;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transform: translateX(-80px);
  transform: translateX(-80px);
}

.feature-staircase.animated .image-device {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: all .5s cubic-bezier(.215, .61, .355, 1) 2.1s;
  transition: all .5s cubic-bezier(.215, .61, .355, 1) 2.1s;
}

.feature-staircase .symmetry-hero:after {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  background-position-x: center;
}

.feature-staircase.mobile-color {
  background: linear-gradient(108deg, #000098 0%, #2411e6 25%, #7e00d5 64%, #ff3433 100%) 0% 0% no-repeat padding-box;
}

@media only screen and (max-width: 1000px) {
  .feature-staircase .step {
    width: 80%;
  }
  .feature-staircase .step2 {
    margin-left: 10%;
  }
  .feature-staircase .step3 {
    margin-left: 20%;
  }
  .feature-staircase .image-step {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .feature-staircase .step {
    width: 100%;
    margin-left: 0;
  }
  .feature-staircase .step-number {
    font-size: 40px;
    margin-top: 13px;
  }
}

@media only screen and (max-width: 414px) {
  .feature-staircase .step-number {
    font-size: 53px;
    margin: 10px 16px 0 0;
  }
}

@media only screen and (max-width: 320px) {
  .feature-staircase .step-number {
    font-size: 33px;
    margin: 16px 16px 0 0;
  }
}