/*---------------------------------------------------------------------------------

 Theme Name:   Divi Child Theme IWDS
 Theme URI:    https://irvinewebdesignsolutions.com
 Description:  Child Theme for Divi for IWDS
 Author:       Nicki Tatalovich
 Author URI:   https://irvinewebdesignsolutions.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------- ADDITIONAL CUSTOMIZED CSS HERE -------------------------*/

@property --iwds-gradient-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes rotation {
	0%   { --iwds-gradient-angle: 0deg; }
	100% { --iwds-gradient-angle: 360deg; }
}

:root {
	--clr-ring-blue-1: #5ddcff;
	--clr-ring-blue-2: #3c67e3;
	--clr-ring-blue-3: #011f7c;
	--clr-ring-blue-4: #4e00c2;
	--clr-ring-purple: #8f42ec;
	--ring-blur-radius: 1.5rem;
	--ring-border-radius: 1.0rem;
	--ring-border-width: -0.5rem;
	--ring-border-color: var(--clr-ring-blue-3);
}

.iwds-ring-item {
	border-radius: var(--ring-border-radius);
}
.iwds-ring-blue {
	position: relative;
}
/* Remove the effect from the default state */
.iwds-ring-blue:before,
.iwds-ring-blue:after {
	content: none;
}
.iwds-ring-blue:hover:before,
.iwds-ring-blue:hover:after {
	content: "";
	position: absolute;
	inset: var(--ring-border-width); /* calc(-1 * var(--ring-border-radius) ); /* -0.5rem;*/
	z-index: -1;
	background: conic-gradient(
			from var(--iwds-gradient-angle),
			var(--clr-ring-blue-1),
			var(--clr-ring-blue-2),
			/*var(--clr-ring-blue-3),*/
			var(--clr-ring-blue-4),
			/*var(--clr-ring-blue-3),*/
			var(--clr-ring-blue-2),
			var(--clr-ring-blue-1)
	);
	border-radius: var(--ring-border-radius); /* inherit; */
	animation: rotation 8s linear infinite;
}
.iwds-ring-blue:hover:after {
	filter: blur(var(--ring-blur-radius));
}

.ring-blue-purple {
	position: relative;
}
.ring-blue-purple:hover:before,
.ring-blue-purple:hover:after {
	content: "";
	position: absolute;
	inset: var(--ring-border-width); /*calc(-1 * var(--ring-border-radius)); */
	z-index: -1;
	background: conic-gradient(
			from var(--iwds-gradient-angle),
				/*var(--clr-ring-blue-0),*/
			var(--clr-ring-blue-1),
			var(--clr-ring-blue-2),
			var(--clr-ring-blue-3),
			var(--clr-ring-blue-4),
			var(--clr-ring-purple),
			var(--clr-ring-purple),
			var(--clr-ring-blue-4),
			var(--clr-ring-blue-3),
			var(--clr-ring-blue-2),
			var(--clr-ring-blue-1)
		/*var(--clr-ring-blue-0)*/
	);
	border-radius: var(--ring-border-radius);
	animation: rotation 8s linear infinite;
}
.ring-blue-purple:hover:after {
	filter: blur(var(--ring-blur-radius));
}