.sa-avatars-grid{ width: 105%;  padding: 47px 0px 0px; position:relative;overflow:hidden}
.sa-avatars-grid:before {
content: '';position:absolute;width:100%;height:100%;display:block;top:0;left:0;background-color: rgba(34, 36, 46, 0.96);  z-index: 1;
}
.sa-avatars-grid li {
  position:relative;
  list-style-type:none;
  width: 80px;
  padding-bottom: 92.37875288px; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;
 
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
.sa-avatars-grid li *{
  position:absolute;
  visibility:visible;
}
.sa-avatars-grid li > div{
  width:100%;
  height:100%;
  text-align:center;
  color:#fff;
  overflow:hidden;
  
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);
  
	-webkit-backface-visibility:hidden;
  
}
.sa-avatars-grid li img{
  left:-100%; right:-100%;
  min-width:100%;
  width: auto; height:100%;
  margin:0 auto;   
}
.sa-avatars-grid li:nth-child(2n) {
  top: -68px;
  left: -40px;
  margin: 0px 0px 45px -80px;
}


/* Beta Styles */
.sa-hexagon-sp {
    overflow: hidden;
    position: relative;
}
.sa-hexagon-sp:before {
    content: '';
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
}


/* Avatars/Rangs Styles */
.sa-avatar-little {
	width: 36px;
	height: 42px;
}
.sa-avatar-small {
	width: 60px;
}
.sa-avatar-medium {
	width: 110px;
}
.sa-user-ranks {
	max-width: 250px;
	display: inline-block;
	position: relative;
	//overflow: hidden;
}
	/* hexagon styles */
	.sa-user-ranks .sa-hexagon-cs {
		width: 100%;
		display: inline-block;
		overflow: hidden;
		visibility: hidden;
		position: relative;
		list-style-type: none;
		padding-bottom: 115.4734411085556%;
		z-index: 2;
	 
		-webkit-transform: rotate(-60deg) skewY(30deg);
		-ms-transform: rotate(-60deg) skewY(30deg);
		transform: rotate(-60deg) skewY(30deg);
	}
	.sa-user-ranks .sa-hexagon-cs * {
		position: absolute;
		visibility: visible;
	}
	.sa-user-ranks .sa-hexagon-cs > span {
		color: #fff;
		width: 100%;
		height: 100%;
		display: block;
		overflow: hidden;
		text-align: center;
		background-color: #22242e;
	  
		-webkit-transform: skewY(-30deg) rotate(60deg);
		-ms-transform: skewY(-30deg) rotate(60deg);
		transform: skewY(-30deg) rotate(60deg);
	  
		-webkit-backface-visibility: hidden;
	}
	.sa-user-ranks .sa-hexagon-cs > span:after {
		content: '';
		left: 50%;
		bottom: -50%;
		width: 40%;
		height: 40%;
		position: absolute;
		border-radius: 50%;
		opacity: 0.6;
		z-index: 1;

		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	  
		-webkit-backface-visibility: hidden;
	}
	.sa-user-ranks.sa-user-online .sa-hexagon-cs > span:after {
		background-color: #52be27;
		box-shadow: 0 0 45px 30px #52be27;
	}
	.sa-user-ranks.sa-user-offline .sa-hexagon-cs > span:after {
		background-color: #ff0000;
		box-shadow: 0 0 45px 30px #ff0000;
	}
	.sa-user-ranks .sa-hexagon-cs img {
		left: -100%;
		right: -100%;
		width: auto;
		height: 100%;
		min-width: 100%;
		margin: 0 auto;
		z-index: -1;
		
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden; 
	}

	/* ranks styles */
	.sa-user-ranks .sa-hx-line {
		width: 72%;
		height: 72%;
		overflow: hidden;
		position: absolute;
	}
	.sa-user-ranks .sa-hx-line:first-child {
		bottom: -3%;
	}
	.sa-user-ranks .sa-hx-line:before {
		content: "";
		position: absolute;
		left: 0;
		width: 0;
		height: 0;
		width: 100%;
		height: 100%;
		background-color: #9c9c9c; /* default color */
		-webkit-transform: rotate(-60deg) skewY(30deg);
		-ms-transform: rotate(-60deg) skewY(30deg);
		transform: rotate(-60deg) skewY(30deg);
	}
	/* Ranks colors */
	.sa-user-ranks.sa-f-lvl2 .sa-hx-line:before { background-color: #ccd307; }
	.sa-user-ranks.sa-s-lvl2 .sa-hx-line:before { background-color: #ff9600; }

	.sa-user-ranks.sa-f-lvl3 .sa-hx-line:before { background-color: #45890e; }
	.sa-user-ranks.sa-s-lvl3 .sa-hx-line:before { background-color: #db4800; }

	.sa-user-ranks.sa-p-lvl4 .sa-hx-line:before { background-color: #df3625; }

	/* Ranks positioning */
	.sa-user-ranks.sa-f-lvl2 .sa-hx-line:nth-child(2) { left: -3.296703296703297%; }
	.sa-user-ranks.sa-s-lvl2 .sa-hx-line:nth-child(2) { right: -3.296703296703297%; }

	.sa-user-ranks.sa-f-lvl3 .sa-hx-line:nth-child(2) { left: -3.296703296703297%; }
	.sa-user-ranks.sa-f-lvl3 .sa-hx-line:nth-child(3) { top: 1%; left: 6%; }

	.sa-user-ranks.sa-s-lvl3 .sa-hx-line:nth-child(2) { right: -3.296703296703297%; }
	.sa-user-ranks.sa-s-lvl3 .sa-hx-line:nth-child(3) { top: 1%; right: 6%; }

	.sa-user-ranks.sa-p-lvl4 .sa-hx-line:nth-child(2) { right: -3.296703296703297%; }
	.sa-user-ranks.sa-p-lvl4 .sa-hx-line:nth-child(3) { left: -3.296703296703297%; }
	.sa-user-ranks.sa-p-lvl4 .sa-hx-line:nth-child(4) { top: 1%; left: 6%; }
	.sa-user-ranks.sa-p-lvl4 .sa-hx-line:nth-child(5) { top: 1%; right: 6%; }

	/* Centering on Y or X */
	.sa-user-ranks .sa-hx-line.tx {
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.sa-user-ranks .sa-hx-line.ty {
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}