#categories{
  overflow:hidden;
  width:90%;
  margin:0 auto;
}
.clr:after{
  content:"";
  display:block;
  clear:both;
}
#categories li{
  position:relative;
  list-style-type:none;
  width:18.85714285714286%; /* = (100-2.5) / 3.5 */
  padding-bottom: 22.16760145166612%; /* =  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);
}
#categories li:nth-child(3n+2){
  margin:0 1%;
}
#categories li:nth-child(6n+4),#categories li:nth-child(6n+5){
  margin-left:1%;
}
 #categories li:nth-child(6n+6) , #categories li:nth-child(6n+7), #categories li:nth-child(6n+8), #categories li:nth-child(6n+9){
	margin-top: -3.9285714285%;
  margin-bottom:0%;
   margin-left:1%;
  -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+9){
  margin-left:0%;
}
#categories li:nth-child(6n+6):last-child, #categories li:nth-child(6n+7):last-child, #categories li:nth-child(6n+8):last-child, #categories li:nth-child(6n+9):last-child{
  margin-bottom:0%;
}
#categories li *{
  position:absolute;
  visibility:visible;
}
#categories 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;
  
}

/* HEX CONTENT */
#categories li img{
  left: -96%;
    right: -100%;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    top: 10px;
}

#categories div h1, #categories div p{
     width: 98%;
  padding:0 5%;
  font-family: 'Raleway', sans-serif;
}
#categories li h1{
     bottom: 15%;
    font-style: italic;
    font-size: 17px;
    color: #FFFFFF;
    font-weight: 600;
}

#categories li p{
	padding-top:50%;
	top:110%;
	padding-bottom:50%;
}


/* HOVER EFFECT  */


#categories li div:hover p{
  top:50%;
  padding-top:10%;
}
#fork{
  position:fixed;
  top:0;
  left:0;
  color:#000;
  text-decoration:none;
  border:1px solid #000;
  padding:.5em .7em;
  margin:1%;
  transition: color .5s;
  overflow:hidden;
}
#fork:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 130%; height: 100%;
  background: #000;
  z-index: -1;
  transform-origin:0 0 ;
  transform:translateX(-100%) skewX(-45deg);
  transition: transform .5s;
}
#fork:hover {
  color: #fff;
}
#fork:hover:before {
  transform: translateX(0) skewX(-45deg);
}