@import url('/resources/css/modules/middle-content.css');

.hcc-tabs {
	width: 100%;
	background-color: #fff;
}

.hcc-tabs:after {
	content: '';
	display: table;
	clear: both;
}

.hcc-tabs__tab, .hcc-tabs__tab--five {
	height: 76px;
	box-sizing: border-box;
	border-bottom: 5px solid #808080;
	border-top: 1px solid #E7E7E8;
	border-right: 1px solid #E7E7E8;
	font-family: 'Replica-Light';
	font-size: 19px;
	line-height: 1em;
	width: 25%;
	float: left;
	cursor: pointer;
}

.hcc-tabs__tab--five {
	width: 20%;
}

.hcc-tabs__tab.active,
.hcc-tabs__tab:hover,
.hcc-tabs__tab--five.active,
.hcc-tabs__tab--five:hover {
	border-bottom-color: #0AAFED;
}

.hcc-tabs__tab:last-child {
	border-right: 0;
}


@media screen and (max-width : 768px) {

	.hcc-tabs {
		height: 76px;
		width: 100%;
		overflow: hidden;
		padding: 76px 0 0 0;
		position: relative;
	}

	.hcc-tabs--open {
		overflow: visible;
	}

	.hcc-tabs__tab, .hcc-tabs__tab--five {
		width: 100%;
	}

	.hcc-tabs__tab.active,
	.hcc-tabs__tab--five.active {
		position: absolute;
		top: 0;
		left: 0;
	}

	.hcc-tabs__tab.active .middle-content .middle-content__cell:after,
	.hcc-tabs__tab--five.active .middle-content .middle-content__cell:after {
		content: url(/resources/images/dwn-arrow.png);
		margin-left: 10px;
	}

}