ul#hexGrid {
  transition: opacity 1s ease-out;

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  padding-bottom: 10%;
  overflow: visible;
  list-style-type: none;  
  margin: -30% auto 0 auto;
  opacity: 1 !important;
}

ul#hexGrid a,
ul#hexGrid a::before,
ul#hexGrid a::after {
  color: #555 !important;
  transition: none;
  margin: 0;
  padding: 0;
  content: '';
}

ul#hexGrid .hex {  
  /* transition: transform .2s cubic-bezier(.39,.58,.57,1), opacity .7s ease-out; */

  position: relative;
  visibility: hidden;
  outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */  
  filter: grayscale(100%) drop-shadow(0 0 0.25vw #555555);
}
ul#hexGrid .hex::after{
  content: '';
  display: block;
  padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */    
}
ul#hexGrid .hexIn{  
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%; /* =  width / sin(60) */
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */  
  -webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
      -ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
          transform: rotate3d(0,0,1,-60deg) skewY(30deg);  
}
ul#hexGrid .hexIn * {
  background-color: #f4f4f4;
  position: absolute;
  visibility: visible;
  outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */  
}
ul#hexGrid .hex.empty .hexIn * {
  background-color: transparent;
}
ul#hexGrid .hexLink {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #555;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
        -ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
            transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
ul#hexGrid .hexLink br {
  display: none;
}

@media print {
ul#hexGrid {
  display: none;
}
}

/*** HEX CONTENT **********************************************************************/
.hex img {
  left: -100%;
  right: -100%;
  width: auto;
  max-width: none;
  height: 100%;
  margin: 0 auto;
  -webkit-transform: rotate3d(0,0,0,0deg);
      -ms-transform: rotate3d(0,0,0,0deg);
          transform: rotate3d(0,0,0,0deg);
}

.hex img::before {
  display: block;
  margin: 16% 0 0 0;
}

.hex.left img {
  margin: 0 100%;
}

.hex h2, .hex p {
  width: 100%;
  padding: 3%;
  opacity: 0;
  box-sizing:border-box;
  transition: transform .2s cubic-bezier(.39,.58,.57,1), opacity .7s ease-out;
}
.hex h2 {
  bottom: 63%;
  padding-top: 42%;
  font-size: 105%;
  z-index: 1;
  text-transform: uppercase;
  font-weight: bold;
  -webkit-transform:translate3d(0,-100%,0);
      -ms-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
.hex.short h2 {
  bottom: 73%;
}
.hex h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 10%;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
}
.hex p {  
  top: 37%;
  padding-bottom:68%;
  -webkit-transform:translate3d(0,100%,0);
      -ms-transform:translate3d(0,100%,0);
          transform:translate3d(0,100%,0);

  line-height: 1.4;
}
.hex.short p {  
  top: 27%;
}


/*** HOVER EFFECT  **********************************************************************/
ul#hexGrid .hex:hover { 
  filter: grayscale(0%) drop-shadow(0 0 0.3vw #555555);
}

.hexLink:hover h2:first-of-type, .hexLink:focus h2:first-of-type,
.hexLink:hover p, .hexLink:focus p {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.8) !important;
  -webkit-transform:translate3d(0,0,0);
      -ms-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width: 1081px){ /* <- 5-4  hexagons per row */
  ul#hexGrid .hex {
    width: 30%;
  }
  ul#hexGrid .hex.large {
    width: 35%;
    margin: -2.5%;
    z-index: 2;
    filter: grayscale(0%) drop-shadow(0 0 0.3vw #555555);
  }    
  .hex:nth-child(5n+4){
    margin-left:15%; 
  } 
}

@media (max-width: 1080px) and (min-width:601px){  /* <- 3-2  hexagons per row */
  ul#hexGrid {
    margin: -20% auto 0 auto;
  }
  ul#hexGrid .hex {
    width: 25%;
  }  
  ul#hexGrid .hex:nth-child(3n+4) { /* first hexagon of even rows */
    margin-left: 12.5%;  /* = width of .hex / 2  to indent even rows */
  }
  ul#hexGrid .hex:nth-child(5n+7) { /* first hexagon of even rows */
    margin-left: 0%;  /* = width of .hex / 2  to indent even rows */
  }
  ul#hexGrid .hex:nth-child(6n+1) { /* first hexagon of even rows */
    margin-left: 0%;  /* = width of .hex / 2  to indent even rows */
  }   
}

@media (max-width: 1080px) { 
  .hexLink h2:first-of-type, .hexLink h2:first-of-type {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8) !important;
    -webkit-transform:translate3d(0,0,0);
        -ms-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
  }    
}

@media (max-width: 600px){  /* <- 2-1  hexagons per row */
  ul#hexGrid {

  }
  ul#hexGrid .hex {
    width: 33.333%; /* = 100 / 3 */
  }
  ul#hexGrid .hex:nth-child(4n+4){ /* first hexagon of even rows */
    margin-left:16.5%;  /* = width of .hex / 2  to indent even rows */
  }
  ul#hexGrid .hex h2 {
  	font-size: 0.70em;
  }  
  ul#hexGrid .hex p {
  	font-size: 0.60em;
  }   
}

@media (max-width: 400px){ 
	ul#hexGrid {
		font-size: 13px;
	}    
}