.container{
	height:auto;
	width:100%;
	padding:0;
}

.hide {
		display: none;
}

.tab-content {
		padding:25px;
}

#material-tabs {
		position: relative;
		display: block;
	  padding:0;
		border-bottom: 1px solid #e0e0e0;
}

#material-tabs>a {
		position: relative;
	 display:inline-block;
		text-decoration: none;
		padding: 22px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 600;
		color: #424f5a;
		text-align: center;
}

#material-tabs>a.active {
		font-weight: 700;
		outline:none;
}

#material-tabs>a:not(.active):hover {
		background-color: inherit;
		color: #7c848a;
}

@media only screen and (max-width: 520px) {
		.nav-tabs#material-tabs>li>a {
				font-size: 11px;
		}
}

.yellow-bar {
		position: absolute;
		z-index: 10;
		bottom: 0;
		height: 3px;
		background: #458CFF;
		display: block;
		left: 0;
		transition: left .2s ease;
		-webkit-transition: left .2s ease;
}

#tab1-tab.active ~ span.yellow-bar {
		left: 0;
		width: 100px;
}

#tab2-tab.active ~ span.yellow-bar {
		left:120px;
		width: 200px;
}