:root {
	--vertical-maybe-rainbow-bar-height: 0px;
	--vertical-maybe-rainbow-bar-top: 0px;
}

.tab-section.white-bg .tab-accordion__tab{
	background: #fff;
}

.tab-section.white-bg .tab-accordion__tab.is-active, 
.tab-section.white-bg .tab-accordion__tab:hover, 
.tab-section.white-bg .tab-accordion__tab:focus, 
.tab-section.white-bg .tab-accordion__panel__toggle.is-active, 
.tab-section.white-bg .tab-accordion__panel__toggle:hover, 
.tab-section.white-bg  .tab-accordion__panel__toggle:focus{
	background: #f5f5f5;
}

.tab__thumbnail {
	height: 50px; 
	width: 50px;
}

.tab__thumbnail img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.tab__thumbnail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .3;
}

.tab__thumbnail::after {
	content: "\e917";
    font-family: 'icomoon';
    position: absolute;
    right: 16px;
    top: 14px;
    transition: all .4s ease;
    font-size: 1.3em;
    height: 20px;
    width: 20px;
    color: #fff;
}

.tab-accordion__tab {
	display: flex;
	align-items: center;
}

.tab-accordion__panel__toggle {
	display: flex; 
	align-items: center;

}

.tab-accordion__panel__toggle .tab__thumbnail {
	position: relative;
	margin-left: -47px;
	z-index: 1;
}

.tab-accordion__panel:first-child, .tab-accordion__panel:first-child .tab-accordion__panel__toggle{padding-top: 0px}
.tab-accordion__panel:last-child, .tab-accordion__panel:last-child .tab-accordion__panel__toggle{padding-bottom: 0px}
.tab-accordion__panel__toggle h6 {
	margin-left: 20px;
	font-size: 16px;
}

.tab-accordion__panels {
	margin-left: 10px;
}

.tab-accordion__tab, 
.tab-accordion__panel__toggle, 
.tab-accordion__panel__content {
	border: 0px;
}

@media (max-width: 1024px) {
	/* Redundant here */
	/* .tab-accordion__panel.is-active::before{
		top: 10px;
	} */

	/* ACTIVE TAB VERTICAL RAINBOW */
	.tab-accordion__panel.is-active::before {
		position: absolute;
		content: "";
		top: var(--vertical-maybe-rainbow-bar-top);
		height: var(--vertical-maybe-rainbow-bar-height);
		width: 6px;
		left: 16px;
		background: #333;
	}
	
	/* INACTIVE TAB VERTICAL GREY */
	.tab-accordion__panel:not(.is-active)::before{
		position: absolute;
		content: "";
		top: var(--vertical-maybe-rainbow-bar-top);
		height: var(--vertical-maybe-rainbow-bar-height);
		width: 6px;
		left: 16px;
		background: #CCCCCC;
	}
}

.tab-accordion__panel__content{
	padding: 0 0 25px 20px;
}

.tab-accordion__panel__content img {margin: 15px 0 20px }

.tab-accordion__tab.is-active {
	position: relative;
}

.tab-accordion__tab.is-active, 
.tab-accordion__tab:hover, 
.tab-accordion__tab:focus, 
.tab-accordion__panel__toggle.is-active, 
.tab-accordion__panel__toggle:hover, 
.tab-accordion__panel__toggle:focus {
	background: transparent;
	border-bottom: 0px;
}
.tab-accordion__tab:focus:not(:focus-visible), 
.tab-accordion__panel__toggle:focus:not(:focus-visible) {
	border: 0px;
}

.tab-accordion__panels ul {
	padding-bottom: 0px;

}

/*Active Styles*/
.is-active .tab__thumbnail::before {
    opacity: .3;
}

.is-active .tab__thumbnail::after {
	content: "\e914";
}

.tab-section ul li:before {
    background: #353535;
	border: none;
}

@media(min-width: 768px){
	.tab-section__intro {
		text-align: center;
	}

	.tab__thumbnail {height: 79px; width: 79px;}
	.tab__thumbnail::after {
		top: 35%;
		right: 35%;
	}

	.tab-accordion__panels {
		margin-left: 30px;
	}

	.tab-accordion__panel.is-active::before {
		left: 16px;
	}

	.tab-accordion__panel__toggle .tab__thumbnail {
		margin-left: -60px;

	}

	.tab-accordion__panel__content {
		padding-left: 60px;
	}

	.tab-accordion__panel__toggle {
		padding: 20px;
	} 

	.tab-accordion__panel__content img {
		margin-top: 0px;
	}

	.is-active .tab-accordion__panel__toggle {
		padding-bottom: 0;
	}

}

@media(min-width: 1025px){

	section.tab-accordion.js-tab-accordion .tab-accordion__tabs button {
		width: 24.11111%;
		flex-grow: 1;
	}
	
	.tab-accordion__panels, .tab-accordion__panel {border: none;}
	.tab-accordion__panel.is-active::before {display: none;}
	.tab__thumbnail {
		margin-right: 20px;
	}

	.tab-accordion__tab h6 {
		padding-bottom: 0px
	}

	.tab-accordion__tab {
		width: calc(25% - 8px) 
	}

	.tab-accordion__tabs {
		border-bottom: 6px solid #CCCCCC; ;
	}

	.tab-accordion__tab.is-active::after{
		position: absolute;
		content: "";
		bottom: -6px;
		height: 6px;
		/* Use clean 100% width - trying to nudge it with 101%, 102%, etc. probably will cause problems long term */
		width: 100%;
		left: 0px;
		background: #333;
		/* background: -moz-linear-gradient(90deg, rgba(0,177,232,1) 0%, rgba(0,170,84,1) 28%, rgba(234,219,53,1) 50%, rgba(239,38,62,1) 76%, rgba(233,6,132,1) 100%);
		background: -webkit-linear-gradient(90deg, rgba(0,177,232,1) 0%, rgba(0,170,84,1) 28%, rgba(234,219,53,1) 50%, rgba(239,38,62,1) 76%, rgba(233,6,132,1) 100%);
		background: linear-gradient(90deg, rgba(0,177,232,1) 0%, rgba(0,170,84,1) 28%, rgba(234,219,53,1) 50%, rgba(239,38,62,1) 76%, rgba(233,6,132,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00b1e8",endColorstr="#e90684",GradientType=1); */
	}

	.tab-accordion__panels {
		padding: 80px 0 0;
		margin-left: 0;
	}

	.tab-accordion__panel__content {padding: 0} 
	.tab-section__intro {padding-bottom: 30px}
	.tab-accordion__tab {
		padding-bottom: 20px;
	}

	.tab-accordion__panels ul {
		padding-bottom: 30px;
	}
}
@media(min-width: 1025px) and (max-width: 1300px){
	.tab-accordion__tab {
		flex-direction: column;
	}

	.tab__thumbnail {
		margin-right: 0px;
	}

	.tab-accordion__tab h6 {padding-top: 15px;}
}

@media( min-width:1300px ) {
	section.tab-accordion.js-tab-accordion .tab-accordion__tabs button {
		width: 24.3333%;
	}
}

@media(min-width: 1500px){
	.tab__thumbnail {
		margin-right: 30px;
	}

	.tab-accordion__panel__content .col-md-6 {
		padding-right: 50px
	}

}