#hexGrid {overflow: hidden;width: 680px;margin: 0 auto;padding:0.866% 0; font-family: 'Raleway', sans-serif; font-size: 15px;}
#hexGrid:after { content: ""; display: block; clear: both;}
.hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(0px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(0px);
            transform: rotate(-60deg) skewY(30deg) translatez(0px);
}
.hex * {position: absolute; visibility: visible; outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */}
.hexIn { display:block; 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);
}

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

.hex h2, .hex p { width: 102%; left:-1%; padding: 5%; box-sizing:border-box;  ;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h2 { top: -20px; padding:53% 0 53% 0; font-size: 24px; z-index: 1; font-family:open_sanslight; color:#fff; 
	-webkit-transform:translateY(0%) translatez(0);
        -ms-transform:translateY(0%) translatez(0);
            transform:translateY(0%) translatez(0);
	opacity:1;
}

/*** HOVER EFFECT  **********************************************************************/
.hexIn:hover h2, .hexIn:focus h2{
    -webkit-transform:translateY(0%) translatez(0);
        -ms-transform:translateY(0%) translatez(0);
            transform:translateY(0%) translatez(0);
			opacity:1;
            background-color:rgba(255, 0, 0, 0.6);
}

/*** SPACING AND SIZING *****************************************************************/



    .hex {
        width: 32.666%; /* = (100-2) / 3 */
        padding-bottom: 37.720%; /* =  width / sin(60) */
    }
    .hex:nth-child(5n+4),
    .hex:nth-child(5n+5) {
        margin-top: -8.564%;
        margin-bottom: -8.564%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(5n+4):last-child,
    .hex:nth-child(5n+5):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(5n+4) {
        margin-right: 1%;
        margin-left: 0.5%;
    }
    .hex:nth-child(5n+2) {
        margin-left: 1%;
        margin-right: 1%;
    }
    .hex:nth-child(5n+6) {
        clear: left;
    }

@media (max-width: 767px) { /* <- 2-1  hexagons per row */
#hexGrid{width:100%;}
.hex {
    float: left;
    padding-bottom: 56.158%;
    width: 48.5%;
}
	.hex h2{font-size:17px; padding:51% 0;}
    .hex:nth-child(3n+3) {
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    }
    .hex:nth-child(3n+3):last-child {
        margin-bottom: 0;
    }
    .hex:nth-child(3n+3) {
        margin-left: 0.5%;
    }
    .hex:nth-child(3n+2) {
        margin-left: 1%;
    }
    .hex:nth-child(3n+4) {
        clear: left;
    }
.hex:nth-child(5n+4) {
    margin-left: -24.2%;
    margin-right: 1%;
    margin-top: 0;
}
.hex:nth-child(5n+5) {
    margin-left: 2px;
    margin-right: 0;
    margin-top: 0;
}
}
@media (max-width: 400px) {
    #hexGrid {
        font-size: 13px;
    }
}