body{
  font-family: 'Open Sans', arial, sans-serif;
  background:rgb(123, 158, 158);

}
*{
  margin:0;
  padding:0;
}
#categories{
  overflow:hidden;
  width: 100%;
  margin:0 auto;
  text-align: center;
  padding-bottom:50px;
}
.clr:after{
  content:"";
  display:block;
  clear:both;
}
#categories li{
  position:relative;
  list-style-type:none;
  width: 13.857143%;
  padding-bottom: 16.167601%;
  display: inline-block;
  /* float: left; */
  overflow:hidden;
  visibility:hidden;
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}

.pusher2 {
    margin-bottom: -30px;
}
.pusher2:last-child {
    text-align: left;
    position: relative;
}

.pusher28 {
    position: absolute !important;
    right: 0;
}
#categories li:nth-child(3n+2) {
        margin: 0% 1%;
        margin-left: 0 !important;
}

#categories li:nth-child(n+3) {
        margin: 0% 1%;
        margin-left: 0 !important;
}

/*#categories li:nth-child(3n+2) {
        margin: 0% 1%;
        margin-left: 0 !important;
}
#categories li:nth-child(6n+4){
  margin-left: 5%;
}
#categories li:nth-child(3n+7) {
        margin: 0 1%;
        margin-bottom: 2% !important;
        margin-top: -2% !important;
        margin-left: 0 !important;
}
#categories li:nth-child(4n+5){
  margin-left: 2%;
}*/
/*#categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
    margin-top: -5.928571%;
    margin-bottom: 3%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}*/

/******************* Edit ********************/

/*#categories li:nth-child(6n+4):last-child
{margin-bottom:0%;}
#categories li:nth-child(6n+5):last-child
{margin-bottom:0%;}
#categories li:nth-child(6n+6):last-child
{margin-bottom:0%;}

#categories li:nth-child(6n+4)
{
    margin-top: -5.928571%;
    margin-bottom: 6%;
    -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+5)
{
	margin-top: -5.928571%;
	mar;
	margin-bottom: 3%;
	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+6) 
{
	margin-top: -5.928571%;
    margin-bottom: 3%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

.pusher1{
   margin-right: 67.928571%;
}*/



/*.pusher1 {
       width: 38% !important;
    display: inline-block !important;
     padding-bottom: 0% !important; 
    -webkit-transform: rotate(0deg) skewY(0deg) !important;
    -ms-transform: rotate(0deg) skewY(0deg) !important;
    transform: rotate(0deg) skewY(0deg) !important;
}
.pusher2 {
        width: 18% !important;
        display: inline-block;
         -webkit-transform: rotate(0deg) skewY(0deg) !important;
        -ms-transform: rotate(0deg) skewY(0deg) !important;
         transform: rotate(0deg) skewY(0deg) !important; 
		 margin: 0 !important; 
        margin-top: -5.928571%;
        margin-bottom: 6%;
}
.pusher3 {
    width: 16% !important;
    display: inline-block;
    -webkit-transform: rotate(0deg) skewY(0deg) !important;
    -ms-transform: rotate(0deg) skewY(0deg) !important;
    transform: rotate(0deg) skewY(0deg) !important;
}*/

/********** Edit End ***************/

/*#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:#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:-100%; right:-100%;
  width: auto; height:100%;
  margin:0 auto;   
}

#categories div h1, #categories div p{
  width:100%;
  padding:0 5%;
  background-color:#008080; background-color: rgba(0, 128, 128, 0.8);
  font-family: 'Raleway', sans-serif;
  
  -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  -ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
  transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1{
  bottom:110%;
  font-style:italic;
  font-weight: bold;
  font-size: 12px;
  padding-top: 100%;
  padding-bottom:100%;
}
#categories li h1:after{
	content:'';
  display:block;
  position:absolute;
  bottom:-1px; left:45%;
  width:10%;
  text-align:center;
  z-index:1;
  border-bottom:2px solid #fff;
}
#categories li p{
	padding-top:50%;
	top:110%;
	padding-bottom: 50%;
	font-size: 11px;
}


/* HOVER EFFECT  */

#categories li div:hover h1 {
	bottom: 50%;
    padding-bottom: 7%;
    line-height: 12px;
}

#categories li div:hover p{
	top: 50%;
    padding-top: 5%;
    line-height: 13px;
}
#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);
}

/*li.pusher {
     width: 10% !important;
     display: inline-block !important;
      padding: 0;
     margin: 0 !important;
}*/

/*#categories li:last-child {
    margin: 0;
    position: relative;
   	left: -38%;
    top: -167px;
}

@media screen and (max-width:1200px)
{
#categories li:last-child{top:-125px;}
}
@media screen and (max-width:991px)
{
#categories li:last-child{top:-150px;}
}*/