.tabs {
	font-size: 14px;
	text-transform: uppercase;
	color: #000;
}

.transformer-tabs ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-bottom: 3px solid white;
}
.transformer-tabs li {
	display: inline-block;
	padding: 0;
	vertical-align: bottom;
	font-size: 14px;
}
.transformer-tabs li:nth-child(1) .active {
	color: #212121;
	border-bottom-color: #ffffff;
	text-decoration: none !important;
}
.transformer-tabs li:nth-child(2) .active {
	color: #212121;
	border-bottom-color: #ffffff;
	text-decoration: none !important;
}
.transformer-tabs li:nth-child(3) .active {
	color: #212121;
	border-bottom-color: #ffffff;
	text-decoration: none !important;
}
.transformer-tabs li:nth-child(4) .active {
	color: #212121;
	border-bottom-color: #ffffff;
	text-decoration: none !important;
}

.transformer-tabs a {
	text-transform: uppercase;
	display: inline-block;
	color: #c8c6c7 !important;
	text-decoration: none !important;
	padding: 10px 20px;
	background: #474747;
	-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.transformer-tabs a.active {
	border-bottom: 3px solid transparent;
	position: relative;
	bottom: -3px;
	background: #000;
	color: white !important;
	-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.transformer-tabs a.active::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    content: "";
    left: 50%;
    margin-left: -8px;
    position: absolute;
    top: 100%;
    z-index: 1000;
}



@media (max-width: 700px) {
	
	.transformer-tabs ul {
		border-bottom: 0;
		overflow: hidden;
		position: relative;
		background: #666;
		/* fallback */
		background: linear-gradient(#666, #222);
	}
	.transformer-tabs ul::after {
		content: "☰";
		position: absolute;
		top: 8px;
		right: 15px;
		z-index: 2;
		pointer-events: none;
	}
	.transformer-tabs ul.open a {
		position: relative;
		display: block;
	}
	.transformer-tabs li {display: block;}
	.transformer-tabs a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.transformer-tabs a.active {
		border: 0;
		z-index: 1;
		background: #666;
		/* fallback */
		background: linear-gradient(#666, #222);
	}
	
}


.tabs > div {
	display: none;
	padding: 15px;
}
.tabs > div:nth-of-type(1) {background: #e8e8e8;}
.tabs > div:nth-of-type(2) {background: #e8e8e8;}
.tabs > div:nth-of-type(3) {background: #e8e8e8;}
.tabs > div:nth-of-type(4) {background: #e8e8e8;}


.tabs > .active {display: block;}