/*Style 1 Start*/
.hexagon-style-1 {
	position: relative;
	width: 30px;
	height: 17.32px;
	margin: 8.66px 0;
	background-color: rgba(0,0,0,0.2);
}
.hexagon-style-1:before, .hexagon-style-1:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
}
.hexagon-style-1:before {
	bottom: 100%;
	border-bottom: 8.66px solid rgba(0,0,0,0.2);
	left: 0;
}
.hexagon-style-1:after {
	top: 100%;
	width: 0;
	border-top: 8.66px solid rgba(0,0,0,0.2);
	left: 0;
}
/*Style 1 End*/

/*Style 2 Start*/
.hexagon-img {
	position: relative;
	width: 165px;
	height: 95.26px;
	margin: 47.63px 0;
	background-size: auto 190.5256px;
	background-position: center;
}
.hexTop, .hexBottom {
	position: absolute;
	z-index: 1;
	width: 116.67px;
	height: 116.67px;
	overflow: hidden;
	-webkit-transform: scaleY(0.5774) rotate(-45deg);
	-ms-transform: scaleY(0.5774) rotate(-45deg);
	transform: scaleY(0.5774) rotate(-45deg);
	background: inherit;
	left: 24.16px;
}
/*counter transform the bg image on the caps*/
.hexTop:after, .hexBottom:after {
	content: "";
	position: absolute;
	width: 165.0000px;
	height: 95.26279441628826px;
	-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-47.6314px);
	-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-47.6314px);
	transform: rotate(45deg) scaleY(1.7321) translateY(-47.6314px);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	background: inherit;
}
.hexTop {
	top: -58.3363px;
}
.hexTop:after {
	background-position: center top;
}
.hexBottom {
	bottom: -58.3363px;
}
.hexBottom:after {
	background-position: center bottom;
}
.hexagon-img:after {
	content: "";
	position: absolute;
	top: 0.0000px;
	left: 0;
	width: 165.0000px;
	height: 95.2628px;
	z-index: 2;
	background: inherit;
}
/*Style 2 End*/

/*Style 3 Footer Social Start*/
.hexagon-social {
	position: relative;
	width: 39px;
	height: 22.52px;
	margin: 11.26px 0;
}
.hexagon-social:before, .hexagon-social:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 19.5px solid transparent;
	border-right: 19.5px solid transparent;
}
.hexagon-social:before {
	bottom: 100%;
	border-bottom: 11.26px solid;
	left: 0;
}
.hexagon-social:after {
	top: 100%;
	width: 0;
	border-top: 11.26px solid;
	left: 0;
}
.social-color-1 {
	background-color: #3c5a98;
}
.social-color-1:after {
	border-top: 11.26px solid #3c5a98;
}
.social-color-1:before {
	border-bottom: 11.26px solid #3c5a98;
}
.social-color-2 {
	background-color: #01afec;
}
.social-color-2:after {
	border-top: 11.26px solid #01afec;
}
.social-color-2:before {
	border-bottom: 11.26px solid #01afec;
}
.social-color-3 {
	background-color: #d95232;
}
.social-color-3:after {
	border-top: 11.26px solid #d95232;
}
.social-color-3:before {
	border-bottom: 11.26px solid #d95232;
}
.social-color-4 {
	background-color: #006699;
}
.social-color-4:after {
	border-top: 11.26px solid #006699;
}
.social-color-4:before {
	border-bottom: 11.26px solid #006699;
}
.social-color-5 {
	background-color: #c00000;
}
.social-color-5:after {
	border-top: 11.26px solid #c00000;
}
.social-color-5:before {
	border-bottom: 11.26px solid #c00000;
}
/*Style 3 Footer Social End*/

/*Style 4 Start*/
.hexagon-style-4 {
	position: relative;
	width: 67px;
	height: 38.68px;
	margin: 19.34px 0;
}
.hexagon-style-4:before, .hexagon-style-4:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 33.5px solid transparent;
	border-right: 33.5px solid transparent;
}
.hexagon-style-4:before {
	bottom: 100%;
	left: 0;
}
.hexagon-style-4:after {
	top: 100%;
	width: 0;
	left: 0;
}
/*Style 4 End*/

/*Style 5 Start*/
.hexagon-style-5 {
	position: relative;
	width: 165px;
	height: 95.26px;
	background-color: #e1e1e1;
	margin: 47.63px 0;
}
.hexagon-style-5:before, .hexagon-style-5:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 82.5px solid transparent;
	border-right: 82.5px solid transparent;
}
.hexagon-style-5:before {
	bottom: 100%;
	border-bottom: 47.63px solid #e1e1e1;
	left:0;
}
.hexagon-style-5:after {
	top: 100%;
	width: 0;
	border-top: 47.63px solid #e1e1e1;
	left:0;
}
/*Style 5 End*/

/*Style 6 Start*/
.hexagon-style-6 {
	position: relative;
	width: 39px;
	height: 22.52px;
	background-color: #ffffff;
	margin: 11.26px 0;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.hexagon-style-6:before, .hexagon-style-6:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 27.58px;
	height: 27.58px;
	-webkit-transform: scaleY(0.5774) rotate(-45deg);
	-ms-transform: scaleY(0.5774) rotate(-45deg);
	transform: scaleY(0.5774) rotate(-45deg);
	background-color: inherit;
	left: 5.7114px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.hexagon-style-6:before {
	top: -13.7886px;
}
.hexagon-style-6:after {
	bottom: -13.7886px;
}
/*cover up extra shadows*/
.hexagon-style-6 span {
	display: block;
	position: absolute;
	top: 0px;
	left: 0;
	width: 39px;
	height: 22.5167px;
	z-index: 2;
	background: inherit;
}
/*Style 6 End*/

/*Style 7 Start*/
.hexagon-style-7 {
	position: relative;
	width: 30px;
	height: 17.32px;
	background-color: transparent;
	margin: 8.66px 0;
	border-left: solid 2px #c0c0c0;
	border-right: solid 2px #c0c0c0;
}
.hexagon-style-7:hover{
	background-color:#59606b;
	color:#fff;
	border-left: solid 2px rgba(0,0,0,0);
	border-right: solid 2px rgba(0,0,0,0);
}
.hexagon-style-7:hover:before{
	background-color:#59606b;
	border-top: solid 2.8284px rgba(0,0,0,0);
	border-right: solid 2.8284px rgba(0,0,0,0);
}
.hexagon-style-7:hover:after{
	background-color:#59606b;
	border-bottom: solid 2.8284px rgba(0,0,0,0);
	border-left: solid 2.8284px rgba(0,0,0,0);
}
.hexagon-style-7:before, .hexagon-style-7:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 21.21px;
	height: 21.21px;
	-webkit-transform: scaleY(0.5774) rotate(-45deg);
	-ms-transform: scaleY(0.5774) rotate(-45deg);
	transform: scaleY(0.5774) rotate(-45deg);
	left: 2.3934px;
}
.hexagon-style-7:before {
	top: -10.6066px;
	border-top: solid 2.8284px #ccc;
	border-right: solid 2.8284px #ccc;
}
.hexagon-style-7:after {
	bottom: -10.6066px;
	border-bottom: solid 2.8284px #ccc;
	border-left: solid 2.8284px #ccc;
}
/*Style 7 End*/

/*Style 8 Start*/
.hexagon-style-8 {
	position: relative;
	width: 50px;
	height: 28.87px;
	margin: 14.43px 0;
}
.hexagon-style-8:before, .hexagon-style-8:after {
	content: "";
	position: absolute;
	width: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
}
.hexagon-style-8:before {
	bottom: 100%;
	left: 0;
}
.hexagon-style-8:after {
	top: 100%;
	width: 0;
	left: 0;
}
/*Style 8 End*/

/*Style 9 Start*/
.hexagon-style-9 {
	position: relative;
	width: 39px;
	height: 22.52px;
	background-color: #ffffff;
	margin: 11.26px 0;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.hexagon-style-9:before, .hexagon-style-9:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 27.58px;
	height: 27.58px;
	-webkit-transform: scaleY(0.5774) rotate(-45deg);
	-ms-transform: scaleY(0.5774) rotate(-45deg);
	transform: scaleY(0.5774) rotate(-45deg);
	background-color: inherit;
	left: 5.7114px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.hexagon-style-9:before {
	top: -13.7886px;
}
.hexagon-style-9:after {
	bottom: -13.7886px;
}
.hexagon-style-9 span {
	display: block;
	position: absolute;
	top: 0px;
	left: 0;
	width: 39px;
	height: 22.5167px;
	z-index: 2;
	background: inherit;
}
/*Style 9 End*/

/*Style 10 Start*/
.hexagon-style-10 {
  position: relative;
  width: 30px; 
  height: 17.32px;
  background-color:rgba(0,0,0,0.1);
  margin: 8.66px 0;
}

.hexagon-style-10:before,
.hexagon-style-10:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.hexagon-style-10:before {
  bottom: 100%;
  border-bottom: 8.66px solid rgba(0,0,0,0.1);
  left:0;
}

.hexagon-style-10:after {
  top: 100%;
  width: 0;
  border-top: 8.66px solid rgba(0,0,0,0.1);
  left:0;
}
/*Style 10 End*/