body {
	background: #eee;
}

.hromada-page-wrap .hromada-content-wrap {
	max-width: 980px;
	box-sizing: border-box;
	margin: 75px auto 10px;
}

.rating-list-wrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
}

.indicator-list-wrap {
	width: 250px;
	margin-right: 15px;
}

.rating-list .item {
	display: flex;
	justify-content: space-between;
	align-items: center;

	background: #fff;
	margin-bottom: 10px;
	border-radius: 4px;
	overflow: hidden;

	box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.15 );
	text-decoration: none;
	color: #111;

	transition: .2s all;
}

.rating-list .item:hover {
	box-shadow: 0 0 5px rgba( 0, 0, 0, 0.2 );
}

.rating-list .item:hover .pos {
	background: #aaccbb;
}

.rating-list .item .pos {
	background: #77C19D;
	padding: 20px;
	width: 32px;
	text-align: center;
	color: #fff;
	font-weight: bold;

	transition: .2s all;
}

.rating-list .item .info {
	margin-left: 10px;
	margin-right: auto;
}

.rating-list .item .value {
	padding: 10px;
	text-align: center;
}

.rating-list .item .value .number {
	font-weight: bold;
}

.indicator-list {
	position: sticky;
	top: 50px;
}

.indicator-list .item {
	display: block;

	padding: 10px;
	margin-bottom: 5px;

	border-radius: 2px;

	text-decoration: none;
	background: #e5e5e5;
	color: #222;
}

.indicator-list .item:hover {
	background: #fff;
	color: #000;
}

.indicator-list .item.active {
	color: #fff;
	background: #77C19D;
	box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
}

@media screen and (max-width: 800px) {
	.rating-list-wrap {
		display: block;
	}

	.indicator-list-wrap {
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}

	.indicator-list {
		display: flex;
		flex-wrap: wrap;
	}

	.indicator-list .item {
		margin-right: 5px;
	}
}