.carousel {
	height: 40%;
}

.nav-tabs {
	border: 0;
	clear: both;
	margin-bottom: 20px;
}

.nav-tabs a {
	color: #000;
	font-size: 16px;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
	border: 0;
	border-bottom: 2px solid red;
	color: red;
	font-size: 16px;
}

.nav-tabs>li>a:hover {
	background: none;
	color: red;
	border: 0;
}

.nav>li>a {
	padding: 10px 9px;
}

.row .activity {
	height: 260px;
}

#mid {
	width: 100%;
	margin-top: 5px;
}
#mid .row .activity{
	text-align: center;
	background: #fff;
}
.img{overflow: hidden;}
#mid .row .activity img:hover{
	animation: myaction1 2s ease infinite;
	animation-direction:alternate;
}
@keyframes myaction1{
	from{transform: scale(1,1);}
	to{transform: scale(1.1,1.1);}
}

@media only screen and (min-width: 600px) {
	.nav-tabs {
		width: 90%;
		margin: 0 auto;
	}
	.nav-tabs>li{width: 20%;text-align: center;}
	.nav-tabs>li.active>a,
	.nav-tabs>li.active>a:focus,
	.nav-tabs>li.active>a:hover {
		border: 0;
		color: #000;
		border-bottom: 2px solid red;
		font-size: 20px;
	}
	.nav-tabs a {
		color: #000;
		font-size: 20px;
	}
	.nav>li>a {
		padding:15px;
	}
	#mid {
		width: 96%;
	}
}

@media only screen and (min-width: 992px) {
	.nav-tabs {
		width: 40%;
		margin: 0 auto;
		max-width: 540px;
	}	
	.nav-tabs>.active>a .line{
		background: red;
	}
	#mid {
		width: 80%;
		max-width: 1200px;
	}	
	.nav-tabs>li>a:hover .line{
		animation: myaction2 .6s ease;
		background: red;
	}
	@keyframes myaction2{
		from{width: 0%;background: red;}
		to{width: 100%;background: red;}
	}
	.nav-tabs>li.active>a,
	.nav-tabs>li.active>a:focus,
	.nav-tabs>li.active>a:hover{
		border: 0;
		color: red;
	}	
}
@media only screen and (max-width: 414px) {
	.nav-tabs>li {
	
	    width: 20%;
	    text-align: center;
	}	
}