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


#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 98%;
  margin: 0 auto;
  overflow: hidden;
  list-style-type: none;
}

#hexGrid .hex {
  position: relative;
  visibility:hidden;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
  transition: all 0.5s;
  backface-visibility: hidden;
  will-change: transform;
  transition: all 0.5s;
}
#hexGrid .hex::after{
  content:'';
  display:block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */
}
#hexGrid .hexIn{
  position: absolute;
  width:96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin: 2%;
  overflow: hidden;
  visibility: hidden;

}
#hexGrid .hexIn * {
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
#hexGrid .hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
	-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}




/*** HEX CONTENT **********************************************************************/
#hexGrid .hex img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
}

#hexGrid .hex h1 {opacity:1;} 

#hexGrid .hex p {
  width: 100%;
  padding: 5%;
  box-sizing:border-box;
  font-weight: 300;
  opacity: 0;
}

#hexGrid .title {
  color: #FFF;
  text-transform: capitalize;
    text-align: center;
  bottom: 50%;
  font-size: 1.5em;
  z-index: 99;
  width:90%;
  margin-left:5%;
  margin-right:5%;
  text-shadow:1px 1px 5px rgba(28, 28, 28, 0.8);
}


#hexGrid .text {
top: 43%;
text-align: center;
text-transform: uppercase;
color:#fff;
text-shadow:1px 1px 4px #000000;
    
}

#hexGrid .img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#hexGrid li:nth-child(3n+1) .hexLink{background-color:#ed1f24;}
#hexGrid li:nth-child(3n+2) .hexLink{background-color:#f47321}
#hexGrid li:nth-child(3n+3) .hexLink{background-color:#ebc518}


/*** HOVER EFFECT  **********************************************************************/


#hexGrid .hexIn:hover .img {transform: translate(-60%, -60%) rotate(-90deg);}

#hexGrid .hexIn:hover p {
opacity:1;
}




/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:901px) { /* <- 3  hexagons per row */
  #hexGrid{
    padding-bottom: 7.4%
  }
  #hexGrid .hex {
    width: 28.5%; /* = 100 / 5 */
  }
  #hexGrid .hex:nth-child(6n+4){ /* first hexagon of even rows */
    margin-left:14.25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (min-width:901px) and (max-width:1200px) {
	#hexGrid .title {
		font-size:1em;
	}
	#hexGrid .text {
		font-size:12px;
	}
}
@media (min-width:501px) and (max-width: 900px) { /* <- 2-1  hexagons per row */
  #hexGrid{
    padding-bottom: 11.2%;
    font-size: 12px;
  }
  #hexGrid .hex {
    width: 50%; /* = 100 / 3 */
  }
  #hexGrid .hex:nth-child(3n+3){ /* first hexagon of even rows */
    margin-left:25%;  /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 500px) {
    #hexGrid {
       overflow:visible;
  }
  #hexGrid .hex {width:100%;}
 
}