/* Element Styles */

ul.circle-tabs {
	list-style: none;
	margin: -1em -2em !important;
	padding: 0 2em;
	text-align: center;
}

ul.circle-tabs li {
	display: inline-block;
	padding: 1em 0.3em;
	font-size: 28px;
	position: relative;
}

@media (max-width: 1200px) {
	ul.circle-tabs li {
		font-size: 25px;
	}
}

@media (max-width: 991px) {
	ul.circle-tabs li {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	ul.circle-tabs li {
		font-size: 15px;
	}
}

@media (max-width: 575px) {
	ul.circle-tabs li {
		font-size: 16px;
	}
}



ul.circle-tabs li::before {
	content: "";
	background-color: #a5adb0;
	width: calc(100% + 0.8em);
	height: 0.6em;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 1em;
	top: 2.5em;
}

ul.circle-tabs li a.button {
	border: none;
	color: #a5adb0;
	display: block;
	position: relative;
	font-size: 1em;
	padding: 0;
	box-shadow: none;
	outline: none;
	transition: color 0.4s;
}

ul.circle-tabs li.active.color-purple a.button {
	color: #a24d6f;
}

ul.circle-tabs li.active.color-orange a.button {
	color: #e37258;
}

ul.circle-tabs li.active.color-yellow a.button {
	color: #d6b860;
}

ul.circle-tabs li.active.color-teal a.button {
	color: #0aa4b4;
}

ul.circle-tabs li.active.color-blue a.button {
	color: #005c83;
}

ul.circle-tabs li a.button.active,
ul.circle-tabs li a.button:hover {
	
}

ul.circle-tabs li a.button:hover {
	
}

ul.circle-tabs li a.button::before {
	content: "";
}

ul.circle-tabs li a.button .icon-wrapper {
	position: relative;
	height: 3.5em;
	width: 3.5em;
	border-radius: 50%;
	border: 3px solid #a5adb0;
	overflow: hidden;
	margin: 0 auto 1em;
	box-shadow: 0.15em 0.15em 0.3em 0em rgba(0,0,0,0.35);
	background-color: #eaebed;
	transition: all 0.4s;
}

ul.circle-tabs li.active a.button .icon-wrapper,
ul.circle-tabs li a.button:hover .icon-wrapper {
	background-color: #fff;
}

ul.circle-tabs li.active.color-purple a.button .icon-wrapper,
ul.circle-tabs li.color-purple a.button:hover .icon-wrapper {
	border-color: #a24d6f;
}

ul.circle-tabs li.active.color-orange a.button .icon-wrapper,
ul.circle-tabs li.color-orange a.button:hover .icon-wrapper {
	border-color: #e37258;
}

ul.circle-tabs li.active.color-yellow a.button .icon-wrapper,
ul.circle-tabs li.color-yellow a.button:hover .icon-wrapper {
	border-color: #d6b860;
}

ul.circle-tabs li.active.color-teal a.button .icon-wrapper,
ul.circle-tabs li.color-teal a.button:hover .icon-wrapper {
	border-color: #0aa4b4;
}

ul.circle-tabs li.active.color-blue a.button .icon-wrapper,
ul.circle-tabs li.color-blue a.button:hover .icon-wrapper {
	border-color: #005c83;
}

ul.circle-tabs li a.button .icon-wrapper img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 85%;
	height: 85%;
	object-fit: contain;
	object-position: center center;
	transform: translate(-50%,-50%);
	opacity: 0.3;
	transition: opacity 0.4s;
}

ul.circle-tabs li.active a.button .icon-wrapper img,
ul.circle-tabs li a.button:hover .icon-wrapper img {
	opacity: 1;
}

ul.circle-tabs li a.button .heading {
	font-size: 0.9em;
	text-transform: none;
	text-align: center;
	letter-spacing: 0;
	font-weight: 700;
	max-width: 6.8em;
}

@media (max-width: 63.999em) {
}

@media (max-width: 39.999em) {
	ul.circle-tabs {
		margin: -0.4em -1em !important;
		padding: 0 1em;
	}
	ul.circle-tabs li {
		padding: 0.4em 0.3em;
	}
	ul.circle-tabs li::before {
		display: none;
	}
	ul.circle-tabs li a.button .icon-wrapper {
		height: 2.5em;
		width: 2.5em;
		border: 2px solid #a5adb0;
		margin: 0 auto 0.5em;
	}
	ul.circle-tabs li a.button .heading {
		font-size: 0.8em;
		max-width: 6.8em;
	}
}



.wpfox_hover_icon_section {
	
}

.wpfox_hover_icon_section:not(.active) {
	opacity: 0;
}

.wpfox_hover_icon_section.active {
	opacity: 1;
}

.wpfox_hover_icon_section > .wpb_wrapper {
	border: none;
	padding: 20px;
	text-align: center;
}

.wpfox_hover_icon_section > .wpb_wrapper::after {
	content: " ";
	clear: both;
	display: block;
}

.wpfox_hover_icon_section .text {
	color: #000;
	font-size: 26px;
	padding: 1em;
	line-height: 1.2;
}

.wpfox_hover_icon_section.color-purple .text {
	color: #a24d6f;
}

.wpfox_hover_icon_section.color-orange .text {
	color: #e37258;
}

.wpfox_hover_icon_section.color-yellow .text {
	color: #d6b860;
}

.wpfox_hover_icon_section.color-teal .text {
	color: #0aa4b4;
}

.wpfox_hover_icon_section.color-blue .text {
	color: #005c83;
}

.wpfox_hover_icon_section .text a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 63.999em) {
	.wpfox_hover_icon_section .text {
		font-size: 19px;
		padding: 1.75em;
	}
}

@media (max-width: 39.999em) {
	.wpfox_hover_icon_section .text {
		font-size: 17px;
		padding: 0.5em 0;
	}
}



.wpfox_hover_icon_section > .wpb_wrapper > .wpfox_hover_icon_subitem {
	padding: 20px;
	/* display: block; */
	width: 33.333%;
	max-width: 300px;
	/* float: left; */
	display: inline-block;
	vertical-align: middle;
}

@media (max-width: 1100px) {
	.wpfox_hover_icon_section {
		
	}
}

@media (max-width: 63.999em) {
	.wpfox_hover_icon_section {
	}
	.wpfox_hover_icon_section > .wpb_wrapper > .wpfox_hover_icon_subitem {
		padding: 15px;
	}
}

@media (max-width: 39.999em) {
	.wpfox_hover_icon_section {
	}
	.wpfox_hover_icon_section > .wpb_wrapper {
		padding: 1em 0 0;
	}
	.wpfox_hover_icon_section > .wpb_wrapper > .wpfox_hover_icon_subitem {
		padding: 10px;		
	}
}

