/* ----- FACT HEADER ----- *
 *
 * Example HTML:
 *
 *	<div class="mu-fact-header">
 *		<div class="line"></div>
 *		<div class="background-circle">
 *			<div class="inner-circle">
 *				<i class="fa-solid fa-thumbs-up icon"></i>
 *			</div>
 *		</div>
 *	</div>
 */

.mu-fact-header {
	margin-bottom: 45px;
}

.mu-fact-header .line {
	height: 5px;
	background-color: var(--accent-color);
	border-radius: var(--border-radius-small);
	position: relative;
	top: 45px;
}

.mu-fact-header .background-circle {
	width: 85px;
	height: 45px;
	border-top-left-radius: 45px;
	border-top-right-radius: 45px;
	background-color: var(--accent-color);
	margin: auto;
}

.mu-fact-header .inner-circle {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background-color: white;
	position: relative;
	left: 5px;
	top: 5px;
}

.mu-fact-header .icon {
	font-size: 35px;
	color: var(--accent-color);
	margin: 20px 0;
	width: 75px;
	text-align: center;
}

.mu-fact-header + h3 {
	text-align: center;
	margin-top: initial;
	margin-bottom: 40px;
}




/* ----- BARGAINING HEADER ----- *
 *
 * Example HTML: 
 *
 *	<div class="mu-bargaining-header">
 *		<div class="line"></div>
 *		<div class="background-circle">
 *			<div class="inner-circle">
 *				<i class="fa-solid fa-thumbs-up icon"></i>
 *			</div>
 *		</div>
 *		<h2>Better Pay</h2>
 *	</div>
 */

.mu-bargaining-header .line {
	height: 5px;
	background-color: var(--accent-color);
	border-radius: var(--border-radius-small);
	position: relative;
	top: 45px;
}

.mu-bargaining-header .background-circle {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	background-color: var(--accent-color);
}

.mu-bargaining-header.right .background-circle {
	margin-left: calc(100% - 85px);
}

.mu-bargaining-header .inner-circle {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	background-color: white;
	position: relative;
	left: 5px;
	top: 5px;
}

.mu-bargaining-header .icon {
	font-size: 35px;
	color: var(--accent-color);
	margin: 20px 0;
	width: 75px;
	text-align: center;
}

.mu-bargaining-header h2 {
	margin: 0 0 0 85px;
	width: calc(100% - 85px);
	top: -35px;
	position: relative;
	text-align: center;
}

.mu-bargaining-header.right h2 {
	margin-left: 0;
}

.mu-bargaining-header h2::before {
	content: none;
}

.mu-bargaining-header + p {
	margin: 0;
	position: relative;
	top: -35px;
}




/* ----- PUSHBACK WRAPPER ----- 
 *
 * Example HTML:
 *
 *	<div class="mu-pushback">
 *		<h2>Header</h2>
 *		<p>Explination</p>
 *	</div>
 */

.mu-pushback {
	margin: ;
	padding: 25px;
	position: relative;
	margin: 30px auto;
	max-width: 750px;
}

.mu-pushback::before {
	content: '';
	height: 50px;
	width: 50px;
	border-top: 5px solid;
	border-left: 5px solid;
	border-top-left-radius: 25px;
	border-color: var(--gray);
	display: block;
	position: absolute;
	top: 30px;
	left: 12px;
}

.mu-pushback::after {
	content: '';
	height: 50px;
	width: 50px;
	border-bottom: 5px solid;
	border-right: 5px solid;
	border-bottom-right-radius: 25px;
	border-color: var(--gray);
	display: block;
	position: absolute;
	bottom: -5px;
	right: -5px;
}

.mu-pushback::before {
	top: -5px;
	left: -5px;
}

.mu-pushback h2 {
	margin-top: 0;
}

.mu-pushback h2::before {
	content: none;
}

.mu-pushback p {
	margin-bottom: 0;
}



/* ----- WHAT WE DO WRAPPER ----- 
 *
 * Example HTML:
 * 	<div class="mu-text-over-icon">
 * 		<i class="fa-solid {{icon}}"></i>
 * 		<h3>{{text}}</h3>
 * 	</div>
 */

.mu-text-over-icon {
	margin: auto;
	width: fit-content;
	height: 70px;
	margin-bottom: 75px;
}


.mu-text-over-icon i {
	position: relative;
	font-size: 70px;
	color: var(--gray);
	opacity: 50%;
	left: calc(50% - 35px);
	z-index: 0;

}

.mu-text-over-icon h3 {
	margin: 0;
	position: relative;
	bottom: 50px;
	text-align: center;
}

/* ------ TALKING HEAD -----
 * 	<div class="mu-talking-head">
 * 		<img src="{{image}}" class="mu-headshot mu-drop-shaddow">
 * 		<div class="mu-bio">
 * 			<p><strong>{{name}}</strong></p>
 * 			<p>{{union_position}}</p>
 * 			<p>{{mim_title}} since {{tenure}}</p>
 * 		</div>
 * 		<p class="mu-quote">{{quote}}</p>
 * </div>
 */
.mu-talking-head {
	border-left: var(--border-width-medium) solid;
	border-image: linear-gradient(to bottom, #F0004A00 0%, #F0004A 100%) 1;
	margin-bottom: 25px;
}

.mu-talking-head img {
	margin-left: 15px;
}


.mu-talking-head .mu-headshot {
	height: 72px;
	width: 72px;
	border-radius: 50%;
}

.mu-talking-head .mu-bio {
	display: inline-block;
	margin-left: 15px;
}

.mu-talking-head .mu-bio p {
	margin: 0;
}

.mu-talking-head .mu-quote{
	padding: 10px 0 15px 15px;
	border-bottom: var(--border-width-medium) solid;
	border-image: linear-gradient(90deg, #2A2A2A 0%, rgba(42, 42, 42, 0) 100%) 1;
	margin: 0;
}

/* ------ ACCORDION -----
*/

.mu-container .kg-toggle-card {
	border: var(--border-width-thin) solid var(--gray);
	border-radius: 0;
	margin-bottom: 10px;
	background-color: var(--white);
}

.mu-container .kg-toggle-card .kg-toggle-heading {
	flex-direction: row-reverse;
	justify-content: start;
}

.mu-container .kg-toggle-card .kg-toggle-heading button {
	margin: 0 13px 0 0;
}

.mu-container .kg-toggle-card .kg-toggle-heading button svg {
	color: var(--black);
}

.mu-container .kg-toggle-card h4.kg-toggle-heading-text {
	padding: 0;
	margin: 0;
	text-shadow: none;
	font-size: 20px;
	line-height: 28px;
}