/**
 * Add any custom CSS here.
 *
 * This file will be loaded after all other theme stylesheets.
 */


/* SECTION 5 Hover Gradients */

@property --fytransparent {
  syntax: '<color>';
  initial-value: #FFFFFF00;
  inherits: false;
}

@property --left-side-color {
  syntax: '<color>';
  initial-value: #bc8dff;
  inherits: false;
}

@property --right-side-color {
  syntax: '<color>';
  initial-value: #0999a2;
  inherits: false;
}

@property --ball-one-color {
  syntax: '<color>';
  initial-value: #0999a2;
  inherits: false;
}

@property --ball-two-color {
  syntax: '<color>';
  initial-value: #0999a2;
  inherits: false;
}

@property --position-one {
  syntax: '<percentage>';
  initial-value: 5%;
  inherits: false;
}

@property --position-two {
  syntax: '<percentage>';
  initial-value: 95%;
  inherits: false;
}

@keyframes colour-changes {
  0% {
    --left-side-color: #0999a2;
    --right-side-color: #bc8dff;
    --ball-one-color: #fcf214;
    --ball-two-color: #cfff51;
  }
  25% {
    --left-side-color: #fcf214;
    --right-side-color: #cfff51;
    --ball-one-color: #ffffff;
    --ball-two-color: #ff4567;
  }
  50% {
    --left-side-color: #ff87cc;
    --right-side-color: #ff4567;
    --ball-one-color: #0999a2;
    --ball-two-color: #ffffff;
  }
  100% {
    --left-side-color: #0999a2;
    --right-side-color: #bc8dff;
    --ball-one-color: #fcf214;
    --ball-two-color: #cfff51;
  }
}

@keyframes position-changes {
  0% {
    --position-one: 5%;
    --position-two: 95%;
  }
  50% {
    --position-one: 95%;
    --position-two: 5%;
  }
}

.gradienthover .stk-block-column:not(:first-child) {
	opacity: 0;
	transition: all 1s ease-in-out!important;
	user-select: none;
}

.gradienthover:hover .stk-block-column{
	opacity: 1;
	transition: all 1s ease-in-out!important;
	user-select: none;
}

.gradienthover h3 {
	display: inline-block!important;
	background-image:
radial-gradient(30% 80% at var(--position-one) 130%, var(--ball-one-color) 0%, #073AFF00 100%),
radial-gradient(30% 80% at var(--position-two) -30%, var(--ball-two-color) 0%, #073AFF00 100%),
linear-gradient(90deg, var(--left-side-color) 30%, #FFFFFF00 100%),
linear-gradient(270deg, var(--right-side-color) 50%, #FFFFFF00 100%);
  animation: colour-changes 10s ease-in-out infinite, position-changes 15s ease-in-out infinite;
	background-clip: text;
	color: #fff;
	transition: all 1s ease-in-out!important;
	user-select: none;
}

.gradienthover:hover h3 {
	transform: translateX(25%);	
	background-clip: text;
	color: transparent;
	transition: all .75s ease-in-out!important;
	user-select: none;
}

/* HR, EQ + Culture GradientClipping Padding Fix */
.stk-793e75a h3 {
	padding-bottom: 12px;
}

/* 'MORE ACTION' BUTTON HOVER GRADIENT */

.fy-gradient-text {
	display: inline-block!important;
	background-image:
radial-gradient(30% 80% at var(--position-one) 130%, var(--ball-one-color) 0%, #073AFF00 100%),
radial-gradient(30% 80% at var(--position-two) -30%, var(--ball-two-color) 0%, #073AFF00 100%),
linear-gradient(90deg, var(--left-side-color) 30%, #FFFFFF00 100%),
linear-gradient(270deg, var(--right-side-color) 50%, #FFFFFF00 100%);
  animation: colour-changes 10s ease-in-out infinite, position-changes 15s ease-in-out infinite;
	background-clip: text;
	color: transparent!important;
}

.stk-73e3c43 span {
	display: inline-block!important;
	background-image:
radial-gradient(30% 80% at var(--position-one) 130%, var(--ball-one-color) 0%, #073AFF00 100%),
radial-gradient(30% 80% at var(--position-two) -30%, var(--ball-two-color) 0%, #073AFF00 100%),
linear-gradient(90deg, var(--left-side-color) 30%, #FFFFFF00 100%),
linear-gradient(270deg, var(--right-side-color) 50%, #FFFFFF00 100%);
  animation: colour-changes 10s ease-in-out infinite, position-changes 15s ease-in-out infinite;
	background-clip: text;
	transition: all 1s ease-in-out!important;
}