/* Hexagons */
#hexGrid {
    overflow   : hidden;
    width      : 100%;
    margin     : 0 auto;
    padding    : 0;
    font-size  : 15px;
    font-family: "interstate", sans-serif;
	
    
}

#hexGrid:after {
    content: "";
    display: block;
    clear  : both;
}

.hex {
    position         : relative;
    list-style-type  : none;
    float            : left;
    overflow         : hidden;
    visibility       : hidden;
    /* clip-path:         polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);   
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); */
    clip-path        : polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);   
    -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    outline          : 1px solid transparent;
    /* fix for jagged edges in FF on hover transition */
}

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

.hexIn {
    display        : flex;
    flex-direction : column;
    width          : 100%;
    height         : 100%;
    padding        : 20% 20%;
    text-align     : center;
    align-items    : center;
    justify-content: center;
    overflow       : hidden;
    background-size: cover !important;

}

a.linkwrapper {
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;    
    z-index: 1000;
}

.linkwrapper:hover {
    cursor: pointer;

}


/*** HEX CONTENT **********************************************************************/

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


.hex h2 {
    position      : relative;
    margin-top    : 1%;
    margin-bottom : 1%;
    color         : #fff;
    font-size     : 2.1em;
    line-height   : 1;
    font-weight   : 600;
    text-transform: uppercase;
    z-index       : 1;
}

.hex p {
    position: relative;
    margin-top: 0%;
    margin-bottom: 0%;
}

.hex h3 {
    position      : relative;
    margin-top    : 1%;
    margin-bottom : 1%;
    color         : #fff;
    font-size     : 1.1em;
    line-height   : 1;
    font-weight   : bold !important;
    text-transform: uppercase;
    z-index       : 1;
}

/* .hex h3:first-child {
    margin-top: 25%;
}

.hex h3:last-child {
    margin-top: 25%;
} */

.hex span {
    position   : relative;
    margin-top : 10%;
    color      : #fff !important;
    font-size  : 0.8em;
    font-weight: 600;
    z-index    : 1;
	text-transform: uppercase;
} 

/* .hex p {
    top: 50%;
    padding-bottom: 50%;
} */


.hex:nth-child(2),
.hex:nth-child(2) * {
    display: none;
} 


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

@media (min-width:1025px) {

    /* <- 2-3  hexagons per row */
    #hexGrid {
        width: 100%;
    }

    .hex {
        width         : 25.5%;
        /* = (100-2) / 3 */
        padding-bottom: 22.4%;
        /* =  width / sin(60) */
        margin-right  : 7.2%;
        margin-left   : 7.2%;       

    }
    /* .hex {
        width         : 24.9%;        
        padding-bottom: 21.9%;       
        margin-right  : 7.5%;
        margin-left   : 7.5%;  
    } */

    .hex:nth-child(4n+1),
    .hex:nth-child(4n+2) {
        transform: translateX(78%);
    }

    .hex:nth-child(n+3) {
        margin-top: -11.8%;        
    }

    .hex:nth-child(2n+1) {
        clear: left;
    }
}

@media (max-width: 1024px) {

    /* <- 1-2  hexagons per row */
    #hexGrid {
        width: 100%;
    }

    .hex h2 {
        font-size: 1.6em;
    }

    .hex h3 {
        font-size: 0.8em;
    }

    .hex {
        width: 55.5%;
        /* = (100-1) / 2 */
        padding-bottom: 48.6%;
        /* =  width / sin(60) */       
    }

    /* .hex:nth-child(n+7)  {
        display: none;
    } */

/* 
    .hex:nth-child(3),
    .hex:nth-child(5),
    .hex:nth-child(7),
    .hex:nth-child(9) {
        transform: translateY(45.9%);
    } */

    /* .hex:nth-child(4),
    .hex:nth-child(6) {
        transform: translateY(0);
    } */

    .hex:nth-child(1) {
        transform: translateY(-0px);
    }

    .hex:nth-child(3) {
        transform: translateY(46%);
    }

    .hex:nth-child(4) {
        transform: translateY(-8%);
    }

    .hex:nth-child(5) {
        transform: translateY(38%);
    }

    .hex:nth-child(6) {
        transform: translateY(-16%);
    }

    .hex:nth-child(7) {
        transform: translateY(30%);
    }

    .hex:nth-child(8) {
        transform: translateY(-24%);
    }

    .hex:nth-child(9) {
        transform: translateY(22%);
    }

    .hex:nth-child(10) {
        transform: translateY(-32%);
    }

    .hex:nth-child(1),
    .hex:nth-child(2),
    .hex:nth-child(4),
    .hex:nth-child(6),
    .hex:nth-child(8), 
    .hex:nth-child(10) {
        margin-right: 0%;
        margin-left: 0%;
    }

    .hex:nth-child(3),
    .hex:nth-child(5),
    .hex:nth-child(7),
    .hex:nth-child(9) {
        margin-left: -12.5%;
    }

    .hex:nth-child(2n+2) {
        clear: left;
    }
}

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