
.layout.community {
	background: url(/static/awru.my.games/img/main/content/community/map.png) no-repeat center 385px;
	}
	.layout.community #block_center {
		width: 100%;
		float: none;
		}

.soc_list {
	height: 90px;
	display: flex;
	justify-content: center;
	padding: 40px 0px;
	}
	
	.soc_list a {
		width: 90px;
		height: inherit;
		display: flex;
		position: relative;
		margin: 0px 18px;
		color: #fff;
		font: 0px Arial, Helvetica, sans-serif;
		justify-content: center;
		align-items: flex-end;
		background: #23262d;
		}
	
	.soc_list a::before,
	.soc_list a::after {
		content: '';
		width: inherit;
		height: inherit;
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		}
	
	.soc_list a::before {
		background: url(/static/awru.my.games/img/main/content/community/soc.png) 0px center no-repeat;
		z-index: 1;
		}
	.soc_list a:hover::before,
	.soc_list a.active::before {
		filter: brightness(180%);
		}
	
	.soc_list a.active::after {
		background: url(/static/awru.my.games/img/main/content/community/active.png) center center no-repeat;
		z-index: 2;
		}
	
	.soc_list a.mm::before {background-position-x: 0px}
	.soc_list a.vk::before {background-position-x: -90px}
	.soc_list a.fb::before {background-position-x: -180px}
	.soc_list a.yt::before {background-position-x: -270px}
	.soc_list a.gp::before {background-position-x: -360px}
	.soc_list a.tw::before {background-position-x: -450px}
	.soc_list a.ok::before {background-position-x: -540px}
	.soc_list a.ig::before {background-position-x: -630px}
	.soc_list a.tp::before {background-position-x: -720px}
	.soc_list a.dc::before {background-position-x: -810px}

.soc_layout .soc_info {
	width: 830px;
	height: 300px;
	position: relative;
	margin: 0px auto;
	padding: 8px;
	background: rgba(35,38,45,0.25);
	overflow: hidden;
	transition: height 0.25s ease-in-out;
	}

	.soc_layout .soc_info a {
		width: inherit;
		height: inherit;
		display: flex;
		position: absolute;
		top: 8px;
		left: 8px;
		justify-content: center;
		align-items: center;
		color: #8e9da4;
		font: 14px Arial, Helvetica, sans-serif;
		text-decoration: none;
		background: #edeef0;
		opacity: 0;
		transition: opacity 0.15s ease-in-out;
		z-index: 1;
		}
	.soc_layout .soc_info a.active {
		opacity: 1;
		z-index: 2;
		}
