// ============================================================================
// :: AOP
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
//.p-aop {}

// ============================================================================
// :: Elements
// ============================================================================
.p-aop__content {
  position: relative;

  padding: 3rem 0 0;
  height: 100%;

  @include respond-at($breakpoint-tablet-default) {
    height: auto;
    padding: 0;
  }
}

.p-aop__container {
  @extend %__block-base;

  height: 100%;

  @include respond-at($breakpoint-tablet-default) {
    position: relative;

    height: auto;
    padding: 5.5rem;
    overflow: hidden;
  }
}

.p-aop__progress {
  position: absolute;

  top: 0;
  left: 0;

  z-index: $z-index-floor;
}

.p-aop__visual{
	position: absolute;
  top: 0;
  left: 0;

  height: 15rem;
  width: 100%;
  padding: 3rem 0;

  text-align: center;

  background-color: $background-color-base;


  @include respond-at($breakpoint-tablet-default) {
    display: flex;
    align-items: center;
    justify-content: center;

    top: 5.5rem;
    left: 5.5rem;

    height: calc(100% - 11rem);
    width: calc(45% - 5.5rem);
  }
}

.p-aop__illustration{
  height: 100%;
  width: auto;

  @include respond-at($breakpoint-tablet-default) {
    height: auto;
    width: 50%;
  }
}

.p-aop__step{
  padding-top: 15rem;

  @include respond-at($breakpoint-tablet-default) {
    padding-top: 0;
    padding-left: 50%;
  }
}