.graph-list {
	margin:16px 0 32px;
}

.graph-list__header{
	height:80px;
	padding-left:96px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	position:relative;
	cursor:pointer;
}

.graph-list__header:before{
	content:"";
	display:block;
	background-size:100%;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	left:0;
	top:0;
	position:absolute;
	transition:transform 0.2s ease;
}

.graph-list__header:after{
	content:"";
	display:block;
	background-image:url('assets/graph-list/arrow-bottom.png');
	background-size:100%;
	background-repeat:no-repeat;
	width:80px;
	height:48px;
	position:absolute;
	right:32px;
	top:20px;
	transition:transform 0.2s ease;
}

.graph-list__header:hover:after{
	transform:scale(1.1);
}

.graph-list_active .graph-list__header:after{
	top:16px;
	transform:scale(1,-1);
}
.graph-list_active .graph-list__header:hover:after{
	transform:scale(1.1,-1.1);
}

.graph-list__header-inner{
	position:relative;
	display:flex;
	height:100%;
	align-items:center;
}

.graph-list__title{
	color:#fff;
	font-size: 24px;
	font-weight:400;
	text-transform:uppercase;
}

.graph-list__item {
	display:flex;
	margin:8px 0;
	align-items:center;
	padding:8px 0;
	background-color:#f3efee;
	min-height: 108px;
}

.graph-list__view {
	text-align: right;
	max-width: 230px;
	width: 100%;
	margin-left: 15px;
	margin-right: 20px;
}

.graph-list__view h4 {
	font-size: 16px;
	margin: 0px;
	margin-top: 20px;
	color: #000;
	font-weight: 700px;
}

.graph-list__view p {
	margin: 0px;
}

.graph-list__text {
	color:#000;
	width: 100%;
	margin-top: 10px;
	box-sizing:border-box;
	margin-left: 55px;
}

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

	.graph-list__title {
		font-size:20px;
		padding-right:48px;
	}
	
	.graph-list__header:after {
		top: auto;
		bottom: 36%;
		width: 24px;
		height: 16px;
		right: 16px;
	}

	.graph-list_active .graph-list__header:after{
		top:auto;
		bottom:40%;
	}	

	.graph-list__header {
		padding-left: 56px;
	}

	
}

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

	.graph-list__item {
		display:flex;
		margin:8px 0;
		align-items:center;
		padding:8px 0;
		background-color:#f3efee;
		min-height: 108px;
		flex-direction: column;
	}

	.graph-list__title {
		font-size: 16px;
	}

	.graph-list__text {
		margin-left: 20px;
		width: 90%;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.graph-list__view h4 {
		text-align: center;
	}

	.graph-list__view p {
		font-size: 13px;
		margin-bottom: 10px;
		text-align: center;
	}

	.graph-list__header {
		padding-left: 36px;
	}

	
}