/**
 * CTA
 */

.cta,
.main__header .main__header-menu .menu.menu--level-0 a.cta{
  padding: 12px 24px;
  border-radius: 100px;
  width: fit-content;
  display: block;
  border: none;
  overflow: hidden;
  transition: all .50s cubic-bezier(.475,.425,0,.995);
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}
.main__header .main__header-menu .menu.menu--level-0 li.menu__item--active-trail > a.cta.cta--primary {
  color: var(--color-neutral--white);
}
.cta.cta--primary {
  background-color: var(--color-brand--dark-orange);
  color: var(--color-neutral--white);
}
.cta.cta--secondary {
  background-color: var(--color-neutral--white);
  color: var(--color-brand--dark-orange);
}
.cta.cta--secondary::before,
.cta.cta--primary::before {
  content: '';
  display: block;
  position: absolute;
  width: 926px;
  height: 1042px;
  left: -333px;
  top: -216px;
  transform: translateX(-50%);
  background-image: url('../../images/hero/background.svg');
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.75s cubic-bezier(.475,.425,0,.995);
  z-index: -1;
  background-position: left top;
}
.cta.cta--secondary:hover::before,
.cta.cta--primary:hover::before,
.image-with-text__link:hover .cta.cta--primary::before {
  transform:translateX(0);
}
.cta.cta--secondary:hover {
  background-color: var(--color-brand--dark-orange);
  color: var(--color-neutral--white);
}
.cta.cta--primary:hover,
.cta.cta--secondary:hover,
.main__header .main__header-menu .menu.menu--level-0 a.cta:hover,
.image-with-text__link:hover .cta.cta--primary{
  color: var(--color-neutral--white);
  text-decoration: none;
}


/**
 * Align cta center when used inside ckeditor
 **/

.text .text-align-center .cta {
  margin: auto;
}