@charset "utf-8";
/* CSS Document */


*{
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0;
}
#categories{
	overflow: hidden;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: fixed;
	top: 6px;
	left: 0%;
	right: 0%;
	
}

#categories.portfolio {
	position: static;
	padding-top: 0;
}

.clr:after{
	content: "";
	display: block;
	clear: both;
	width: auto;
	
}
#categories li{
	position: relative;
	list-style-type: none;
	float: left;
	overflow: hidden;
	visibility: hidden;
	-webkit-transform: rotate(-60deg) skewY(30deg);
	-moz-transform: rotate(-60deg) skewY(30deg);
	-ms-transform: rotate(-60deg) skewY(30deg);
	-o-transform: rotate(-60deg) skewY(30deg);
	transform: rotate(-60deg) skewY(30deg);
	
}

#categories li *{
	position: absolute;
	visibility: visible;
	
}

#categories li > div{
	width: 100%;
	height: 100%;
	text-align: left;
	color: #fff;
	overflow: hidden;
	
	-webkit-transform: skewY(-30deg) rotate(60deg);
	-moz-transform: skewY(-30deg) rotate(60deg);
	-ms-transform: skewY(-30deg) rotate(60deg);
	-o-transform: skewY(-30deg) rotate(60deg);
	transform: skewY(-30deg) rotate(60deg);
	backface-visibility: hidden;
	
	
}

#categories li:first-child > div{

}


#categories div a{
	width: 100%;
	height: 100%;
}
/* HEX CONTENT */
#categories li img{
	left: -100%;
	right: -100%;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

#categories div h1, #categories div h2, #categories div p {
	width: 100%;
	/* [disabled]background-color: #92bf24; */
	font-family: 'Raleway', sans-serif;
	
}
#categories li h1{
	font-style: normal;
	font-weight: normal;
	font-size: .5em;	
	height: 100%;
	margin-top: -100%;
	
	-webkit-transition: margin .2s ease-out;
	-webkit-transition-delay: 0s;
	-moz-transition: margin .2s ease-out;
	-o-transition: margin .2s ease-out;
	transition: margin .2s;
	
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2);
	transform: scale(1.2,1.2);
}
#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 h2{
	height: 100%;
	margin-top: 100%;
	margin-left: 59.5%;
	
	-webkit-transition: margin .2s ease-out .2s;
	-webkit-transition-delay: .2s;
	-moz-transition: margin .2s ease-out .2s;
	-o-transition: margin .2s ease-out .2s;
	transition: margin .2s ease-out .2s;
	
	-webkit-transform: rotate(-60deg) scale(1.2,1.2);
	-moz-transform: rotate(-60deg) scale(1.2,1.2);
	-ms-transform: rotate(-60deg) scale(1.2,1.2);
	-o-transform: rotate(-60deg) scale(1.2,1.2);
	transform: rotate(-60deg) scale(1.2,1.2);
	
}
#categories li p{
	
	height: 100%;
	margin-top: 100%;
	margin-left: -59.5%;
	
	-webkit-transition: margin .2s ease-out .1s;
	-webkit-transition-delay: .1s;
	-moz-transition: margin .2s ease-out .1s;
	-o-transition: margin .2s ease-out .1s;
	transition: margin .2s ease-out .1s;
	text-align: center;
	-webkit-transform: rotate(60deg) scale(1.2,1.2);
	-moz-transform: rotate(60deg) scale(1.2,1.2);
	-ms-transform: rotate(60deg) scale(1.2,1.2);
	-o-transform: rotate(60deg) scale(1.2,1.2);
	transform: rotate(60deg) scale(1.2,1.2); 
	
}
#categories li p ~ span{
	width: 100%;
	margin-top: -60%;
	margin-left: -25%;
	text-align: center;
	
	-webkit-transform: skewY(30deg);
	-moz-transform: skewY(30deg);
	-ms-transform: skewY(30deg);
	-o-transform: skewY(30deg);
	transform: skewY(30deg);
	
	-webkit-transition: margin .2s ease-out .1s;
	-webkit-transition-delay: .1s;
	-moz-transition: margin .2s ease-out .1s;
	-o-transition: margin .2s ease-out .1s;
	transition: margin .2s ease-out .1s;
}
#categories li h3{
	text-align: center;
	font-size: medium;
	-webkit-transition: all 0.4s ease-out .0s;
	-webkit-transition-delay: .0s;
	-moz-transition: all 0.4s ease-out .0s;
	-o-transition: all 0.4s ease-out .0s;
	transition: all 0.4s ease-out .0s;
	font-style: italic;
	background-color: rgba(145,191,36,0);
	margin-top: 120%;
	padding-top: 50%;
	padding-bottom: 65%;
	
}

/* HOVER EFFECT  */

#categories li div:hover h1 {
	margin-top: -29%;
	pointer-events:none;
}
#categories li div:hover h2{
	margin-top: 16.6%;	
	margin-left: 29.2%;
	pointer-events:none;
}
#categories li div:hover p{
	margin-top: 16.6%;
	margin-left: -29.9%;
	pointer-events:none;
	
}
#categories li div:hover p~span{
	margin-top: 55%;	
	pointer-events:none;

}
#categories li div:hover h3{
	margin-top: -15%;
	background-color: rgba(145,191,36,0.75);
}


#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%;
	width: 0px;
}



@media (min-width:1200px) {

 #categories{
	width: 980px;
	height: 650px;
	padding-top: 245px;
	padding-left: 0%;
	}
  
}

@media (max-width: 1199px) and (min-width:992px) {

 #categories{
	width: 980px;
	height: 650px;
	padding-top: 255px;
	 
}
	
}

@media (min-width:992px) {

#categories li{
    width:14.538%; /* = (100-5.5) / 6.5 */
    padding-bottom: 16.788%; /* =  width /0.866 */
  }
  #categories li:nth-child(12n+7), #categories li:nth-child(12n+8), #categories li:nth-child(12n+9), #categories li:nth-child(12n+10), #categories li:nth-child(12n+11), #categories li:nth-child(12n+12) {
    margin-top: -3.5%;
    margin-bottom: -3.5%;
   
  	-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
  
  }
  #categories li:nth-child(12n+7){
    margin-left:0.5%;
  }
  #categories li:nth-child(6n+2) {
    margin-left:1%;
    margin-right:1%;
  }
  #categories li:nth-child(6n+3),#categories li:nth-child(6n+4),#categories li:nth-child(6n+6){
    margin-right:1%;
  }
	
#categories li:nth-child(6n+6) {
    margin-left:1%;
  }
	
  /* 5 hex per row */
  #categories li{
    /*width:17.364%; /* = (100-4.5) / 5.5 */
    /*padding-bottom: 20.05%; /* =  width /0.866 */
		
	/*option to move down another row*/
	/*width:21.444%; /* = (100-3.5) / 4.5 */
    /*padding-bottom: 24.763%; /* =  width /0.866 */
  }
  
   /*#categories li:nth-child(10n+6), #categories li:nth-child(10n+7), #categories li:nth-child(10n+8), #categories li:nth-child(10n+9), #categories li:nth-child(10n+10) {
    margin-top: -4.2%;
    margin-bottom: -4.2%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(10n+6){
    margin-left:0.5%;
  }
  #categories li:nth-child(5n+2) {
    margin-left:1%;
    margin-right:1%;
  }
  #categories li:nth-child(5n+3),#categories li:nth-child(5n+4){
    margin-right:1%;
  }*/
  
  
/* 4 hex per row */
 /* #categories li:nth-child(8n+5), #categories li:nth-child(8n+6), #categories li:nth-child(8n+7), #categories li:nth-child(8n+8) {
    margin-top: -5.298%;
    margin-bottom: -5.298%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
  }
  #categories li:nth-child(8n+5){
    margin-left:0.5%;
  }
  #categories li:nth-child(4n+2) {
    margin-left:1%;
    margin-right:1%;
  }
  #categories li:nth-child(4n+3){
    margin-right:1%;
  }*/
  
}

@media (max-width: 991px){
	
	#categories{
		position: relative;	
	}

}

@media (max-width: 991px) and (min-width:641px) {

	
	
	#categories li{

	width:27.857%; /* = (100-2.5) / 3.5 */
    padding-bottom: 32.168%; /* =  width /0.866 */
  }
  #categories li:nth-child(6n+4), #categories li:nth-child(6n+5), #categories li:nth-child(6n+6) {
    margin-top: -7.322%;
    margin-bottom: -7.322%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
	

  }
  #categories li:nth-child(6n+4){
    margin-left:0.5%;
  }
  #categories li:nth-child(3n+2) {
    margin-left:1%;
    margin-right:1%;
  }
}


@media (max-width: 640px) {
  #categories li{
    width:39.4%; /* = (100-1.5) / 2.5 */
    padding-bottom: 45.496%; /* =  width /0.866 */
	
  }
  #categories li:nth-child(4n+3), #categories li:nth-child(4n+4){
    margin-top: -10.392%;
    margin-bottom: -10.392%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
	transform: translateX(50%) rotate(-60deg) skewY(30deg);
	
  }
  #categories li:nth-child(4n+3){
	margin-left: 0.5%;
  }
  #categories li:nth-child(2n+2) {
	margin-left: 1%;
  }
  

  
}