/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

#brxe-nghfej {
  align-self: stretch;
}

#brxe-uojaqp {
  position: sticky;
  top: calc(44vh - 46px);
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary-bg-2);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  perspective: 500px;
}

#brxe-uojaqp .ms-step-counter__text {
  display: block;
  transform-origin: center;
  will-change: transform, opacity;
}

#brxe-uojaqp.is-turning .ms-step-counter__text {
  animation: ms-step-counter-flip .42s ease both;
}

#brxe-eserxq > .box {
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

#brxe-eserxq > .box.is-step-active {
  background-color: var(--secondary);
  color: var(--white);
  transform: translateY(-2px);
}

#brxe-eserxq > .box.is-step-active h3,
#brxe-eserxq > .box.is-step-active p {
  color: inherit;
}

@keyframes ms-step-counter-flip {
  0% {
    transform: rotateX(0);
    opacity: 1;
  }

  45% {
    transform: rotateX(86deg);
    opacity: .28;
  }

  55% {
    transform: rotateX(-86deg);
    opacity: .28;
  }

  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}