/*hexagon*/

*{
	margin:0;
	padding:0;
  }
  #categories{
	overflow:hidden;
	width:90%;
	margin:0 auto;
  }
  .clr:after{
	content:"";
	display:block;
	clear:both;
  }
  #categories li{
	position:relative;
	list-style-type:none;
	width:27.85714285714286%;
	padding-bottom: 32.16760145166612%;
	float:left;
	overflow:hidden;
	visibility:hidden;
   
	-webkit-transform: rotate(-60deg) skewY(30deg);
	-ms-transform: rotate(-60deg) skewY(30deg);
	transform: rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(3n+2){
	margin:0 1%;
  }
  #categories li:nth-child(6n+4){
	margin-left:0.5%;
  }
  #categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
	  margin-top: -6.9285714285%;
	margin-bottom: -6.9285714285%;
	
	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(6n+4):last-child, #categories li:nth-child(6n+5):last-child, #categories li:nth-child(6n+6):last-child{
	margin-bottom:0%;
  }
  #categories li *{
	position:absolute;
	visibility:visible;
  }
  #categories li > div{
	width:100%;
	height:100%;
	text-align:center;
	color:#000;
	overflow:hidden;
  
	-webkit-transform: skewY(-30deg) rotate(60deg);
	-ms-transform: skewY(-30deg) rotate(60deg);
	transform: skewY(-30deg) rotate(60deg);
	
	  -webkit-backface-visibility:hidden;
	
  }
  
  #categories div h1, #categories div p{
	width:120%;
	padding:0 18%;
	background-color:#fa860d;
  }
  
  #categories li > div > p{
	height:100%;
	text-align:center;
	color:#fff;
	overflow:hidden;
	font-size: 110%;
	}

	#categories li > div
	{
		background-color: #e6e7e9;
	}
  
  /* HEX CONTENT */
  #categories li img{
		left: -100%;
    right: -100%;
    width: auto;
    top: 3%;
    height: 95%;
    margin: 0 auto;
    image-rendering: crisp-edges;
    filter: blur(0);
    -webkit-filter: blur(0);
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
  }
  
  #categories li p{
	  left: 50%;
	  display: grid;
		display: -ms-flexbox;
	  align-items: center;
	  transform: translate(-50%,-0%);
	}
	
	.pusher
	{
		z-index: -99;
	}