:root {
  --main-hex-rotation: 60deg;
  --reverse-hex-rotation: calc(-1 * var(--main-hex-rotation));
  --main-hex-skew: 30deg;
  --reverse-hex-skew: calc(-1 * var(--main-hex-skew));
}
#hexGrid {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    list-style-type: none;
}

.hex {
    position: relative;
    visibility: hidden;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
}

.hex::after {
    content: '';
    display: block;
    padding-bottom: 86.602%; /* =  100 / tan(60) * 1.5 */
}

.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, var(--reverse-hex-rotation)) skewY(var(--main-hex-skew));
    -ms-transform: rotate3d(0, 0, 1, var(--reverse-hex-rotation)) skewY(var(--main-hex-skew));
    transform: rotate3d(0, 0, 1, var(--reverse-hex-rotation)) skewY(var(--main-hex-skew));
}

.hexIn * {
    position: absolute;
    visibility: visible;
    outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
}

.hexLink {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(var(--reverse-hex-skew)) rotate3d(0, 0, 1, var(--main-hex-rotation));
    -ms-transform: skewY(var(--reverse-hex-skew)) rotate3d(0, 0, 1, var(--main-hex-rotation));
    transform: skewY(var(--reverse-hex-skew)) rotate3d(0, 0, 1, var(--main-hex-rotation));
}

/*** HEX CONTENT **********************************************************************/
.hex img.hex-tile {
    left: -100%;
    right: -100%;
    width: auto;
    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);
}

.hexContent {
    width: 100%;
    height: 100%;
}

.hexContent * {
    position: relative;
}

/*.hex h1, .hex p {*/
/*    width: 100%;*/
/*    padding: 5%;*/
/*    box-sizing:border-box;*/
/*    background-color: rgba(0, 128, 128, 0.8);*/
/*    font-weight: 300;*/
/*    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;*/
/*    transition:          transform .2s ease-out, opacity .3s ease-out;*/
/*}*/
/*.hex h1 {*/
/*    bottom: 50%;*/
/*    padding-top:50%;*/
/*    font-size: 1.5em;*/
/*    z-index: 1;*/
/*    -webkit-transform:translate3d(0,-100%,0);*/
/*    -ms-transform:translate3d(0,-100%,0);*/
/*    transform:translate3d(0,-100%,0);*/
/*}*/
/*.hex h1::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 45%;*/
/*    width: 10%;*/
/*    text-align: center;*/
/*    border-bottom: 1px solid #fff;*/
/*}*/
/*.hex p {*/
/*    top: 50%;*/
/*    padding-bottom:50%;*/
/*    -webkit-transform:translate3d(0,100%,0);*/
/*    -ms-transform:translate3d(0,100%,0);*/
/*    transform:translate3d(0,100%,0);*/
/*}*/


/*!*** HOVER EFFECT  **********************************************************************!*/
/*.hexLink:hover h1, .hexLink:focus h1,*/
/*.hexLink:hover p, .hexLink:focus p{*/
/*    -webkit-transform:translate3d(0,0,0);*/
/*    -ms-transform:translate3d(0,0,0);*/
/*    transform:translate3d(0,0,0);*/
/*}*/

/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
/*#hexGrid {*/
/*    padding-bottom: 4.4%*/
/*}*/

/*.hex {*/
/*    width: 18%; !* = 100 / 5 *!*/
/*}*/

/*.even-hex-grid .hex:nth-child(10n+6) { !* first hexagon of even rows *!*/
/*    margin-left: 9%; !* = width of .hex / 2  to indent even rows *!*/
/*}*/
/*.odd-hex-grid .hex:nth-child(10n+1) { !* first hexagon of even rows *!*/
/*    margin-left: 9%; !* = width of .hex / 2  to indent even rows *!*/
/*}*/