/*body {
	background-color: #d9d9d9;
	font-family: 'Roboto', sans-serif;
}*/

.Panel {
	width: 100%;
	max-width: 1200px;
	margin: 30px auto;
}

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

.Tabs {
	position: relative;
	background-color: #fff;
	
	/**
	 * OLD CODE (for reference)
	 * It's a bit easier to understand with "left",
	 * but the animation is not as smooth
	 */

	/* &__tab {
		float: left;
		width: 33.333%;
		text-align: center;
		&:first-child.active ~ .Tabs__presentation-slider {
			left: 0;
		}
		&:nth-child(2).active ~ .Tabs__presentation-slider {
			left: 33.333%;
		}
		&:nth-child(3).active ~ .Tabs__presentation-slider {
			left: calc(33.333% * 2);
		}
	}
	&__presentation-slider {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 33.333%;
		height: 2px;
		background-color: #4A66F4;
		transform-origin: 0 0;
		transition: left .25s;
	} */
}

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

.Tabs {
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
	 * UPDATE: better to animate "transform" property than "left"
	 * property. You can see old code lower down for reference.
	 */

/** di hp **/
@media only screen and (max-width: 768px) {
  .Tabs__tab {
		float: left;
		width: 100%;
		text-align: center;
 		}
}

/** di pc **/
@media only screen and (min-width: 769px) {

  .Tabs__tab:first-child.active ~ .Tabs__presentation-slider {
			transform: translateX(0) scaleX(0.25);
		}

  .Tabs__tab:nth-child(2).active ~ .Tabs__presentation-slider {
			transform: translateX(25%) scaleX(0.25);
		}

  .Tabs__tab:nth-child(3).active ~ .Tabs__presentation-slider {
			transform: translateX(calc(25% * 2)) scaleX(0.25);
		}

  .Tabs__tab:nth-child(4).active ~ .Tabs__presentation-slider {
			transform: translateX(calc(25% * 3)) scaleX(0.25);
		}

  .Tabs__tab {
		float: left;
		width: 25%;
		text-align: center;
 		}				
}


.Tabs__presentation-slider {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3px;
		/*background-color: #4A66F4; blue*/ 
		background-color: #363738;
		transform-origin: 0 0;
		transition: transform .25s;
	}

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

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

.Tab.active > a {
			color: #222;
		}

.Tab:hover > a {
			color: #222;
		}