.TabControl{ 
	width: 100%; 
	overflow: hidden; 
	height: 100%;
	background-color: #eee;
}

.TabControl #header-tab{ 
	width: 72%; 
	overflow: hidden; 
	height: 100%;
	margin: 0 auto;
}

.TabControl #content-tabs{ 
	width: 100%; 
	overflow: hidden; 
	height: 100%; 
}

.TabControl .abas{
	width: 100%;
	height: 100%;
}

.TabControl .abas li{
	margin-right: 1.8%;
	display: inline-block;
	width: 23%;
}

	.TabControl .abas li:last-child{ margin-right: 0; }

.aba{
	padding: 30px 0;
	width: 100%;
	text-align: center; 
}
	.aba i{
		font-size: 28px;
		color: #b6b6b6;
	}
	
	.aba a{
		display: block;
		text-decoration: none;
		font-size: 26px;
		color: #6357a1;
		text-align: center; 
	}

	.aba a:hover{
		color: #56b9d2;
	}

	.ativa{
		width: 100%;
		text-align:center; 
	}
		.ativa span, .selected span{ color: #ffe500; }

		#content-tabs .conteudo{
			width: 100%;  
			display:none;
			overflow: hidden; 
			height: 100%;
		}

			.row-item{
		        clear: both;
		        overflow: hidden; 
				height: 100%;
	    	}

		        .big-item{
		            display: block;
		            overflow: hidden;
		            height: 100%;
		            background-color: #d0d0d0;
		        }

		        .big-item2{
		            display: block;
		            padding: 20px;
		            overflow: hidden;
		            height: 100%;
		            text-align: center;
		            background-color: #d0d0d0;
		        }

		        .big-item2 a{
		        	display: inline-block;
		        	margin-bottom: 5px;
		        	outline: 1px solid #fff;
                    text-align: center;
		        }	

			        .big-item:last-child, .big-item2:last-child{
			            margin-right: 0;
			        }

			        .big-item img:hover, .big-item2 img:hover{ 
			        	opacity: 0.3; 
			        	transition: all .2s ease-out;
			        }

		.selected{
			padding-bottom: 10px;
			width: 100%;
			text-align:center; 
			border-bottom: 2px solid #f55088;
		}


/* *******************************Medias Querys************************************ */

/*Smartphone*/

@media(max-width: 500px){

.TabControl #header-tab{ 
	clear: both;
}

	.TabControl .abas{
		overflow: hidden;
		height: 100%;
	}

		.aba{
			margin-bottom: 5px;
		}

	.TabControl .abas li{ width: 43%; } 
	.TabControl .abas li a{ font-size: 1.1em; }   
 
 	.row-item{
		clear: both;
	}

		.big-item{
			width: 100%;
			margin-bottom: 30px;
		} 

}

/*Tablet*/

@media(min-width: 501px) and (max-width:959px){

	.TabControl .abas li{ width: 23%; display: inline-block; }       
 	.TabControl .abas li a{ font-size: 18px; }
}

/*PC*/

@media(min-width: 960px) and (max-width: 1150px){
 	.TabControl .abas li{ width: 23%; display: inline-block; }       
 	.TabControl .abas li a{ font-size: 26px; }
}