.Panel {
	width: 100%;
	/* max-width: 600px; */
	margin: 30px auto;
}

.Panel__body {
		background-color: #f2f2f2;
		padding: 10px 20px;
	}

.Tabs {
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Tabs:after {
		content: ' ';
		display: table;
		clear: both;
	}

.Tabs__tab {
		float: left;
		width: 24.8%;
        text-align: center;
        color: #222;
	}

.Tabs__tab:first-child.active ~ .Tabs__presentation-slider {
			left: 0;
		}

.Tabs__tab:nth-child(2).active ~ .Tabs__presentation-slider {
			left: 25.2%;
		}

.Tabs__tab:nth-child(3).active ~ .Tabs__presentation-slider {
			left: calc(25.2% * 2);
        }
        .Tabs__tab:nth-child(4).active ~ .Tabs__presentation-slider {
			left: calc(25.2% * 3);
		}

.Tabs__presentation-slider {
		position: absolute;
        /* bottom: 0; */
        bottom: -4px;
		left: 0;
		width: 24.333%;
		height: 4px;
		background-color: #2d4175;
		transition: left .5s;
	}

.Tab {
	font-family: 'Roboto Slab';
}

.Tab > a {
		display: block;
		padding: 10px 12px;
		text-decoration: none;
		color: #666;
		transition: color .15s;
	}

.Tab.active > a {
			color: #2d4175;
		}

.Tab:hover > a {
			color: #2d4175;
        }
        

.transformer-tabs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 5px solid #bfbfbf;
}
.transformer-tabs li {
  display: inline-block;
  padding: 0;
  vertical-align: bottom;
}
.transformer-tabs li:nth-child(1) .active {
  color: #c6a0d5;
  border-bottom-color: #9b59b6;
}
.transformer-tabs li:nth-child(2) .active {
  color: #8bc4ea;
  border-bottom-color: #3498db;
}
.transformer-tabs li:nth-child(3) .active {
  color: #f0b37e;
  border-bottom-color: #e67e22;
}
.transformer-tabs li:nth-child(4) .active {
  color: #df7c72;
  border-bottom-color: #c0392b;
}
.transformer-tabs a {
  display: inline-block;
  color: #222;
  text-decoration: none;
  padding: 0.5rem;
}
.transformer-tabs a.active {
  border-bottom: 3px solid transparent;
  position: relative;
  bottom: -3px;
}


.Panel > div {
  display: none;
  padding: 1rem;
}
.Panel > div:nth-of-type(1) {
  /* background: #9b59b6; */
}
.Panel > div:nth-of-type(2) {
  /* background: #3498db; */
}
.Panel > div:nth-of-type(3) {
  /* background: #e67e22; */
}
.Panel > div:nth-of-type(4) {
  /* background: #c0392b; */
}
.Panel > .active {
  display: block;
}