/** Helper classes - these should ideally be create via the utilities API in Bootstrap, but as we're not using SCSS for some reason, its hardcoded. **/
.text-orange {
  color: #ee851f !important;
}

.rotate-clockwise-90 {
  transform: rotate(90deg);
}

.btn-orange {
  background: #EE851F;
}

.bg-deep-blue {
  background: #1a2731 !important;
}

.bg-orange {
  background: #ee851f !important;
}

.app-max-width {
  max-width: 1320px;
}


/** Menu Styling **/
.mega-menu {
  background: #243440f5;
  box-shadow: 0px 10px 28px -8px #243440;
  max-width: 100%;
  right: auto;
  left: 0px;
  z-index: 999;
  border-radius: 0px 0px 15px 15px;
  background: #243440f5;
  display: flex;
  justify-content: space-evenly !important;
  border-top: 0px solid #EE851F;
  -webkit-animation: slideDown 1s;
  animation: slideDown 1s;
}

.mega-menu p, .mega-menu a {
  font-size: calc(1rem * 0.875) !important;
}

.mega-menu .column-header {
  min-height: 7rem;
}

.mega-menu .mega-menu-call-to-action .call-to-action-text {
  font-size: 1.125rem !important;
}

.mega-menu-link {
  transition: .2s !important;
}

.mega-menu-link:hover {
  color: #ee851f !important;
  transition: .2s !important;
}

.mega-menu-link .fa {
  transition: .2s !important;
}

.mega-menu-link-animation {
  transition: .2s !important;
}

.mega-menu-link-animation:hover {
  color: #ee851f !important;
  transition: .2s !important;
}

.mega-menu-link-animation:hover .fa {
  animation: moveArrow 1s infinite;
}

.mega-menu-link-animation .fa {
  transition: .2s !important;
}

@keyframes moveArrow {

  0% {
    margin-left: 0;
  }

  50% {
    margin-left: 15px;
  }

  100% {
    margin-left: 0;
  }

}