.hexagon-mask {
	float:left;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
}
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-color:#333;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size:150px;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
/*Family list 5-layer hexagon*/
div#family-list .hexagon-border {
  position: relative;
  width: 67px; 
  height: 38.68px;
  left:-68px;
  top:19px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #d0d3d5;
  border-right: solid 1px #d0d3d5;
}

div#family-list .hexagon-border:before,
div#family-list .hexagon-border:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 46px;
  height: 46px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div#family-list .hexagon-border:before {
  top: -24px;
  border-top: solid 1.4142px #d0d3d5;
  border-right: solid 1.4142px #d0d3d5;
}

div#family-list .hexagon-border:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #d0d3d5;
  border-left: solid 1.4142px #d0d3d5;
}
div#family-list .hexagon-border2 {
  position: relative;
  width: 69px; 
  height: 40.68px;
  left:-69px;
  top:17px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #a7acb2;
  border-right: solid 1px #a7acb2;
}

div#family-list .hexagon-border2:before,
div#family-list .hexagon-border2:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 9px;
}

div#family-list .hexagon-border2:before {
  top: -23px;
  border-top: solid 1.4142px #a7acb2;
  border-right: solid 1.4142px #a7acb2;
}

div#family-list .hexagon-border2:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #a7acb2;
  border-left: solid 1.4142px #a7acb2;
}
div#family-list .hexagon-border3 {
  position: relative;
  width: 71px; 
  height: 41.68px;
  left:-72px;
  top:17px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #56595c;
  border-right: solid 1px #56595c;
}

div#family-list .hexagon-border3:before,
div#family-list .hexagon-border3:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div#family-list .hexagon-border3:before {
  top: -24px;
  border-top: solid 1.4142px #56595c;
  border-right: solid 1.4142px #56595c;
}

div#family-list .hexagon-border3:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #56595c;
  border-left: solid 1.4142px #56595c;
}
div#family-list .hexagon-border4 {
  position: relative;
  width: 73px; 
  height: 43.68px;
  left:-80px;
  top:16px;
  margin-right:-69px;
  float:left;
  border-left: solid 4px #0e0f10;
  border-right: solid 4px #0e0f10;
}

div#family-list .hexagon-border4:before,
div#family-list .hexagon-border4:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 52px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 8px;
}

div#family-list .hexagon-border4:before {
  top: -28px;
  border-top: solid 5.6569px #0e0f10;
  border-right: solid 5.6569px #0e0f10;
}

div#family-list .hexagon-border4:after {
  bottom: -28px;
  border-bottom: solid 5.6569px #0e0f10;
  border-left: solid 5.6569px #0e0f10;
}
div#family-list .hexagon-border5 {
  position: relative;
  width: 81px; 
  height: 43.68px;
  left:-94px;
  top:16px;
  margin-right:-69px;
  float:left;
  border-left: solid 2px #2c2e30;
  border-right: solid 2px #2c2e30;
}

div#family-list .hexagon-border5:before,
div#family-list .hexagon-border5:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 57px;
  height: 57px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11px;
}

div#family-list .hexagon-border5:before {
  top: -30px;
  border-top: solid 2.8284px #2c2e30;
  border-right: solid 2.8284px #2c2e30;
}

div#family-list .hexagon-border5:after {
  bottom: -30px;
  border-bottom: solid 2.8284px #2c2e30;
  border-left: solid 2.8284px #2c2e30;
}
/*Family picker 5-layer hexagon*/
div.family-hexagon .hexagon-border {
  position: relative;
  width: 67px; 
  height: 38.68px;
  left:-1px;
  top:-58px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #d0d3d5;
  border-right: solid 1px #d0d3d5;
}

div.family-hexagon .hexagon-border:before,
div.family-hexagon .hexagon-border:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 46px;
  height: 46px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div.family-hexagon .hexagon-border:before {
  top: -24px;
  border-top: solid 1.4142px #d0d3d5;
  border-right: solid 1.4142px #d0d3d5;
}

div.family-hexagon .hexagon-border:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #d0d3d5;
  border-left: solid 1.4142px #d0d3d5;
}
div.family-hexagon .hexagon-border2 {
  position: relative;
  width: 69px; 
  height: 40.68px;
  left:-2px;
  top:-59px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #a7acb2;
  border-right: solid 1px #a7acb2;
}

div.family-hexagon .hexagon-border2:before,
div.family-hexagon .hexagon-border2:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div.family-hexagon .hexagon-border2:before {
  top: -24px;
  border-top: solid 1.4142px #a7acb2;
  border-right: solid 1.4142px #a7acb2;
}

div.family-hexagon .hexagon-border2:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #a7acb2;
  border-left: solid 1.4142px #a7acb2;
}
div.family-hexagon .hexagon-border3 {
  position: relative;
  width: 71px; 
  height: 41.68px;
  left:-5px;
  top:-59px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #56595c;
  border-right: solid 1px #56595c;
}

div.family-hexagon .hexagon-border3:before,
div.family-hexagon .hexagon-border3:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div.family-hexagon .hexagon-border3:before {
  top: -24px;
  border-top: solid 1.4142px #56595c;
  border-right: solid 1.4142px #56595c;
}

div.family-hexagon .hexagon-border3:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #56595c;
  border-left: solid 1.4142px #56595c;
}
div.family-hexagon .hexagon-border4 {
  position: relative;
  width: 73px; 
  height: 43.68px;
  left:-13px;
  top:-60px;
  margin-right:-69px;
  float:left;
  border-left: solid 4px #0e0f10;
  border-right: solid 4px #0e0f10;
}

div.family-hexagon .hexagon-border4:before,
div.family-hexagon .hexagon-border4:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 52px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 8px;
}

div.family-hexagon .hexagon-border4:before {
  top: -28px;
  border-top: solid 5.6569px #0e0f10;
  border-right: solid 5.6569px #0e0f10;
}

div.family-hexagon .hexagon-border4:after {
  bottom: -28px;
  border-bottom: solid 5.6569px #0e0f10;
  border-left: solid 5.6569px #0e0f10;
}
div.family-hexagon .hexagon-border5 {
  position: relative;
  width: 81px; 
  height: 43.68px;
  left:-27px;
  top:-60px;
  margin-right:-69px;
  float:left;
  border-left: solid 2px #2c2e30;
  border-right: solid 2px #2c2e30;
}

div.family-hexagon .hexagon-border5:before,
div.family-hexagon .hexagon-border5:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 57px;
  height: 57px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11px;
}

div.family-hexagon .hexagon-border5:before {
  top: -30px;
  border-top: solid 2.8284px #2c2e30;
  border-right: solid 2.8284px #2c2e30;
}

div.family-hexagon .hexagon-border5:after {
  bottom: -30px;
  border-bottom: solid 2.8284px #2c2e30;
  border-left: solid 2.8284px #2c2e30;
}
/*Small hexagon 5-layer hexagon*/
.small-hexagon .hexagon-in2{
	background-size:67px;
}
div.small-hexagon .hexagon-border {
  position: relative;
  width: 67px; 
  height: 38.68px;
  left:-98px;
  top:4px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #d0d3d5;
  border-right: solid 1px #d0d3d5;
}

div.small-hexagon .hexagon-border:before,
div.small-hexagon .hexagon-border:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 46px;
  height: 46px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div.small-hexagon .hexagon-border:before {
  top: -24px;
  border-top: solid 1.4142px #d0d3d5;
  border-right: solid 1.4142px #d0d3d5;
}

div.small-hexagon .hexagon-border:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #d0d3d5;
  border-left: solid 1.4142px #d0d3d5;
}
div.small-hexagon .hexagon-border2 {
  position: relative;
  width: 69px; 
  height: 40.68px;
  left:-99px;
  top:3px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #a7acb2;
  border-right: solid 1px #a7acb2;
}

div.small-hexagon .hexagon-border2:before,
div.small-hexagon .hexagon-border2:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 48px;
  height: 48px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div.small-hexagon .hexagon-border2:before {
  top: -24px;
  border-top: solid 1.4142px #a7acb2;
  border-right: solid 1.4142px #a7acb2;
}

div.small-hexagon .hexagon-border2:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #a7acb2;
  border-left: solid 1.4142px #a7acb2;
}
div.small-hexagon .hexagon-border3 {
  position: relative;
  width: 71px; 
  height: 41.68px;
  left:-102px;
  top:3px;
  margin-right:-69px;
  float:left;
  border-left: solid 1px #56595c;
  border-right: solid 1px #56595c;
}

div.small-hexagon .hexagon-border3:before,
div.small-hexagon .hexagon-border3:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 50px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 10px;
}

div.small-hexagon .hexagon-border3:before {
  top: -24px;
  border-top: solid 1.4142px #56595c;
  border-right: solid 1.4142px #56595c;
}

div.small-hexagon .hexagon-border3:after {
  bottom: -24px;
  border-bottom: solid 1.4142px #56595c;
  border-left: solid 1.4142px #56595c;
}
div.small-hexagon .hexagon-border4 {
  position: relative;
  width: 73px; 
  height: 43.68px;
  left:-110px;
  top:2px;
  margin-right:-69px;
  float:left;
  border-left: solid 4px #0e0f10;
  border-right: solid 4px #0e0f10;
}

div.small-hexagon .hexagon-border4:before,
div.small-hexagon .hexagon-border4:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 52px;
  height: 52px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 8px;
}

div.small-hexagon .hexagon-border4:before {
  top: -28px;
  border-top: solid 5.6569px #0e0f10;
  border-right: solid 5.6569px #0e0f10;
}

div.small-hexagon .hexagon-border4:after {
  bottom: -28px;
  border-bottom: solid 5.6569px #0e0f10;
  border-left: solid 5.6569px #0e0f10;
}
div.small-hexagon .hexagon-border5 {
  position: relative;
  width: 81px; 
  height: 43.68px;
  left:-124px;
  top:2px;
  margin-right:-69px;
  float:left;
  border-left: solid 2px #2c2e30;
  border-right: solid 2px #2c2e30;
}

div.small-hexagon .hexagon-border5:before,
div.small-hexagon .hexagon-border5:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 57px;
  height: 57px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 11px;
}

div.small-hexagon .hexagon-border5:before {
  top: -30px;
  border-top: solid 2.8284px #2c2e30;
  border-right: solid 2.8284px #2c2e30;
}

div.small-hexagon .hexagon-border5:after {
  bottom: -30px;
  border-bottom: solid 2.8284px #2c2e30;
  border-left: solid 2.8284px #2c2e30;
}
/*
 * 
 * big hexagon
 * 
 */
.big-hexagon .hexagon-mask{
	height: 150px;
	width: 130px;
}
.big-hexagon .hexagon-in2{
	background-size:130px;
}
.big-hexagon .hexagon-border {
  position: relative;
  width: 130px; 
  height: 75.06px;
  left:-132px;
  top:38px;
  margin-right:-127px;
  float:left;
  border-left: solid 2px #a7acb2;
  border-right: solid 2px #a7acb2;
}

.big-hexagon .hexagon-border:before,
.big-hexagon .hexagon-border:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 91.92px;
  height: 91.92px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left:18px;
}

.big-hexagon .hexagon-border:before {
  top: -47px;
  border-top: solid 2.8284px #a7acb2;
  border-right: solid 2.8284px #a7acb2;
}

.big-hexagon .hexagon-border:after {
  bottom: -47px;
  border-bottom: solid 2.8284px #a7acb2;
  border-left: solid 2.8284px #a7acb2;
}
.big-hexagon .hexagon-border2 {
  position: relative;
  width: 134px; 
  height: 81px;
  left:-145px;
  top:35px;
  margin-right:-127px;
  float:left;
  border-left: solid 6px #1a1a1d;
  border-right: solid 6px #1a1a1d;
}

.big-hexagon .hexagon-border2:before,
.big-hexagon .hexagon-border2:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 94px;
  height: 94px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left:15.5px;
}

.big-hexagon .hexagon-border2:before {
  top: -52px;
  border-top: solid 8.4853px #1a1a1d;
  border-right: solid 8.4853px #1a1a1d;
}

.big-hexagon .hexagon-border2:after {
  bottom: -52px;
  border-bottom: solid 8.4853px #1a1a1d;
  border-left: solid 8.4853px #1a1a1d;
}
.big-hexagon .hexagon-border3 {
  position: relative;
  width: 145px; 
  height: 81px;
  left:-165px;
  top:35px;
  margin-right:-200px;
  float:left;
  border-left: solid 2px #393a3d;
  border-right: solid 2px #393a3d;
}

.big-hexagon .hexagon-border3:before,
.big-hexagon .hexagon-border3:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 104px;
  height: 104px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 19px;
}

.big-hexagon .hexagon-border3:before {
  top: -53px;
  border-top: solid 2.8284px #393a3d;
  border-right: solid 2.8284px #393a3d;
}

.big-hexagon .hexagon-border3:after {
  bottom: -53px;
  border-bottom: solid 2.8284px #393a3d;
  border-left: solid 2.8284px #393a3d;
}
/*
 * 
 * profile
 * 
 * */
.profile-header .hexagon-border {
  position: relative;
  width: 170px; 
  height: 110px;
  left:-87px;
  top:45px;
  margin-right:-127px;
  float:left;
  border-left: solid 10px;
  border-right: solid 10px;
}

.profile-header .hexagon-border:before,
.profile-header .hexagon-border:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 120.21px;
  height: 120.21px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left:18px;
}

.profile-header .hexagon-border:before {
  top: -67px;
  border-top: solid 14.1421px;
  border-right: solid 14.1421px;
}

.profile-header .hexagon-border:after {
  bottom: -67px;
  border-bottom: solid 14.1421px;
  border-left: solid 14.1421px;
}
.profile-header .hexagon-border2 {
  position: relative;
  width: 190px; 
  height: 122px;
  left:-162px;
  top:39px;
  margin-right:-127px;
  float:left;
  border-left: solid 12px;
  border-right: solid 12px;
}

.profile-header .hexagon-border2:before,
.profile-header .hexagon-border2:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 134.35px;
  height: 134.35px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left:20px;
}

.profile-header .hexagon-border2:before {
  top: -75px;
  border-top: solid 16.9706px;
  border-right: solid 16.9706px;
}

.profile-header .hexagon-border2:after {
  bottom: -75px;
  border-bottom: solid 16.9706px;
  border-left: solid 16.9706px;
}
.profile-header .hexagon-border3 {
  position: relative;
  width: 214px; 
  height: 128px;
  left:-259px;
  top:35px;
  margin-right:-255px;
  float:left;
  border-left: solid 10px #2f2f33;
  border-right: solid 10px #2f2f33;
}

.profile-header .hexagon-border3:before,
.profile-header .hexagon-border3:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 151.32px;
  height: 151.32px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 25px;
}

.profile-header .hexagon-border3:before {
  top: -83px;
  border-top: solid 14.1421px #2f2f33;
  border-right: solid 14.1421px #2f2f33;
}

.profile-header .hexagon-border3:after {
  bottom: -83px;
  border-bottom: solid 14.1421px #2f2f33;
  border-left: solid 14.1421px #2f2f33;
}