@supports (display: grid) {
#hexGrid {
  height: auto;
  width: auto;
}
  #hexGrid .hexCrop {
    position: relative;
    overflow: visible; }
  #hexGrid .hexGrid {
	display: -webkit-grid;
	display: -moz-grid;
	display: -o-grid;
	display: -ms-grid;
	display: grid;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -o-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        
        -webkit-align-content: end;
        -moz-align-content: end;
        -o-align-content: end;
        -ms-align-content: end;
        align-content: end
        
    height: auto;
    width: auto;
        -webkit-grid-template-columns: repeat(5, 1fr 2fr) 1fr;
        -moz-grid-template-columns: repeat(5, 1fr 2fr) 1fr;
        -o-grid-template-columns: repeat(5, 1fr 2fr) 1fr;
        -ms-grid-template-columns: repeat(5, 1fr 2fr) 1fr;
        -ms-grid-columns: 1fr 2fr 1fr 2fr 1fr;
    grid-template-columns: repeat(5, 1fr 2fr) 1fr;
    
        -webkit-grid-template-rows: repeat(8, 7em);
        -moz-grid-template-rows: repeat(8, 7em);
        -o-grid-template-rows: repeat(8, 7em);
        -ms-grid-template-rows: repeat(8, 7em);
        -ms-grid-rows: 7em 7em 7em 7em 7em 7em 7em 7em; 
    grid-template-rows: repeat(8, 7em);
}
    

#hexGrid .hexGrid .hex:nth-child(1) {
	grid-column-start: 7;
	grid-row-start: 1;
	grid-row-end: span 2;
	
	-ms-grid-column: 7;
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
}
#hexGrid .hexGrid .hex:nth-child(2) {
	grid-column-start: 5;
	grid-row-start: 2;
	grid-row-end: span 2;
	
	-ms-grid-column: 5;
	-ms-grid-row: 2;
	-ms-grid-row-span: 2;
}
#hexGrid .hexGrid .hex:nth-child(3) {
	grid-column-start: 9;
	grid-row-start: 2;
	grid-row-end: span 2;
	
	-ms-grid-column: 9;
	-ms-grid-row: 2;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(4) {
	grid-column-start: 3;
	grid-row-start: 3;
	grid-row-end: span 2;
	
	-ms-grid-column: 3;
	-ms-grid-row: 2;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(5) {
	grid-column-start: 7;
	grid-row-start: 3;
	grid-row-end: span 2;
	
	-ms-grid-column: 7;
	-ms-grid-row: 3;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(6) {
	grid-column-start: 1;
	grid-row-start: 4;
	grid-row-end: span 2;
	
	-ms-grid-column: 1;
	-ms-grid-row: 4;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(7) {
	grid-column-start: 5;
	grid-row-start: 4;
	grid-row-end: span 2;
	
	-ms-grid-column: 5;
	-ms-grid-row: 4;
	-ms-grid-row-span: 2;
}
#hexGrid .hexGrid .hex:nth-child(8) {
	grid-column-start: 9;
	grid-row-start: 4;
	grid-row-end: span 2;
	
	-ms-grid-column: 9;
	-ms-grid-row: 4;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(9) {
	grid-column-start: 3;
	grid-row-start: 5;
	grid-row-end: span 2;
	
	-ms-grid-column: 3;
	-ms-grid-row: 5;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(10) {
	grid-column-start: 7;
	grid-row-start: 5;
	grid-row-end: span 2;
	
	-ms-grid-column: 7;
	-ms-grid-row: 5;
	-ms-grid-row-span: 2;
}

#hexGrid .hexGrid .hex:nth-child(11) {
	grid-column-start: 1;
	grid-row-start: 6;
	grid-row-end: span 2;
	
	-ms-grid-column: 1;
	-ms-grid-row: 6;
	-ms-grid-row-span: 2;
}
#hexGrid .hexGrid .hex:nth-child(12) {
	grid-column-start: 3;
	grid-row-start: 7;
	grid-row-end: span 2;
	
	-ms-grid-column: 3;
	-ms-grid-row: 7;
	-ms-grid-row-span: 2;
}
      /*
    #hexGrid .hexGrid .c-1, #hexGrid .hexGrid .hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(4) {
      grid-column-start: 1;
      grid-column-end: span 3; }
    #hexGrid .hexGrid .c-1.r-1, #hexGrid .hexGrid .hex:nth-child(1), #hexGrid .hexGrid .c-1.hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(2):nth-child(4), #hexGrid .hexGrid .c-1.hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(3):nth-child(4), #hexGrid .hexGrid .r-1.hex:nth-child(4) {
      grid-row-start: 1;
      grid-row-end: span 2; }
    #hexGrid .hexGrid .c-1.r-2, #hexGrid .hexGrid .r-2.hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(1):nth-child(5), #hexGrid .hexGrid .hex:nth-child(1):nth-child(6), #hexGrid .hexGrid .hex:nth-child(4), #hexGrid .hexGrid .c-1.hex:nth-child(5), #hexGrid .hexGrid .c-1.hex:nth-child(6) {
      grid-row-start: 3;
      grid-row-end: span 2; }
    #hexGrid .hexGrid .c-2, #hexGrid .hexGrid .hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(5) {
      grid-column-start: 3;
      grid-column-end: span 3; }
    #hexGrid .hexGrid .c-2.r-1, #hexGrid .hexGrid .c-2.hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(1):nth-child(5), #hexGrid .hexGrid .hex:nth-child(2), #hexGrid .hexGrid .c-2.hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(3):nth-child(5), #hexGrid .hexGrid .r-1.hex:nth-child(5) {
      grid-row-start: 2;
      grid-row-end: span 2; }
    #hexGrid .hexGrid .c-2.r-2, #hexGrid .hexGrid .r-2.hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(2):nth-child(4), #hexGrid .hexGrid .hex:nth-child(2):nth-child(6), #hexGrid .hexGrid .c-2.hex:nth-child(4), #hexGrid .hexGrid .hex:nth-child(5), #hexGrid .hexGrid .c-2.hex:nth-child(6) {
      grid-row-start: 4;
      grid-row-end: span 2; }
    #hexGrid .hexGrid .c-3, #hexGrid .hexGrid .hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(6) {
      grid-column-start: 5;
      grid-column-end: span 3; }
    #hexGrid .hexGrid .c-3.r-1, #hexGrid .hexGrid .c-3.hex:nth-child(1), #hexGrid .hexGrid .hex:nth-child(1):nth-child(6), #hexGrid .hexGrid .c-3.hex:nth-child(2), #hexGrid .hexGrid .hex:nth-child(2):nth-child(6), #hexGrid .hexGrid .hex:nth-child(3), #hexGrid .hexGrid .r-1.hex:nth-child(6) {
      grid-row-start: 1;
      grid-row-end: span 2; }
    #hexGrid .hexGrid .c-3.r-2, #hexGrid .hexGrid .r-2.hex:nth-child(3), #hexGrid .hexGrid .hex:nth-child(3):nth-child(4), #hexGrid .hexGrid .hex:nth-child(3):nth-child(5), #hexGrid .hexGrid .c-3.hex:nth-child(4), #hexGrid .hexGrid .c-3.hex:nth-child(5), #hexGrid .hexGrid .hex:nth-child(6) {
      grid-row-start: 3;
      grid-row-end: span 2; }
    #hexGrid .hexGrid .hex:nth-child(1) {
      display: flex;
      align-items: center;
      justify-content: center; }
    #hexGrid .hexGrid .hex:nth-child(2) {
      display: flex;
      align-items: center;
      justify-content: center; }
    #hexGrid .hexGrid .hex:nth-child(3) {
      display: flex;
      align-items: center;
      justify-content: center; }
    #hexGrid .hexGrid .hex:nth-child(4) {
      display: flex;
      align-items: center;
      justify-content: center; }
    #hexGrid .hexGrid .hex:nth-child(5) {
      display: flex;
      align-items: center;
      justify-content: center; }
    #hexGrid .hexGrid .hex:nth-child(6) {
      display: flex;
      align-items: center;
      justify-content: center; }
*/
#hexGrid .hexGrid .hex {
	-webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
	clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
	margin: 0.4325em 0.5em;
	grid-column-end: span 3;
}
@media only screen and (max-width: 1024px) {
	#hexGrid .hexGrid {
	-webkit-grid-template-rows: repeat(8, 6em);
    	-moz-grid-template-rows: repeat(8, 6em);
    	-o-grid-template-rows: repeat(8, 6em);
    	-ms-grid-template-rows: repeat(8, 6em);
    	-ms-grid-rows: 6em 6em 6em 6em 6em 6em 6em 6em;
    	grid-template-rows: repeat(8, 6em);
	}
}

@media only screen and (max-width: 992px) {
	#hexGrid .hexGrid {
        -webkit-grid-template-columns: repeat(2, 1fr 2fr) 1fr;
        -moz-grid-template-columns: repeat(2, 1fr 2fr) 1fr;
        -o-grid-template-columns: repeat(2, 1fr 2fr) 1fr;
        -ms-grid-template-columns: repeat(2, 1fr 2fr) 1fr;
        -ms-grid-columns: 1fr 2fr 1fr 2fr 1fr;
    grid-template-columns: repeat(2, 1fr 2fr) 1fr;
    
        -webkit-grid-template-rows: repeat(13, 7em);
        -moz-grid-template-rows: repeat(13, 7em);
        -o-grid-template-rows: repeat(13, 7em);
        -ms-grid-template-rows: repeat(13, 7em);
        -ms-grid-rows: 7em 7em 7em 7em 7em 7em 7em 7em 7em 7em 7em 7em 7em; 
    grid-template-rows: repeat(13, 7em);
	}
	
	#hexGrid .hexGrid .hex:nth-child(1) {
		grid-column-start: 3;
		grid-row-start: 1;
		grid-row-end: span 2;
	
		-ms-grid-column: 3;
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
	}
	#hexGrid .hexGrid .hex:nth-child(2) {
		grid-column-start: 1;
		grid-row-start: 2;
		grid-row-end: span 2;
	
		-ms-grid-column: 1;
		-ms-grid-row: 2;
		-ms-grid-row-span: 2;
	}
	#hexGrid .hexGrid .hex:nth-child(3) {
		grid-column-start: 3;
		grid-row-start: 3;
		grid-row-end: span 2;
	
		-ms-grid-column: 3;
		-ms-grid-row: 3;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(4) {
		grid-column-start: 1;
		grid-row-start: 4;
		grid-row-end: span 2;
	
		-ms-grid-column: 1;
		-ms-grid-row: 4;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(5) {
		grid-column-start: 3;
		grid-row-start: 5;
		grid-row-end: span 2;
	
		-ms-grid-column: 3;
		-ms-grid-row: 5;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(6) {
		grid-column-start: 1;
		grid-row-start: 6;
		grid-row-end: span 2;
	
		-ms-grid-column: 1;
		-ms-grid-row: 6;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(7) {
		grid-column-start: 3;
		grid-row-start: 7;
		grid-row-end: span 2;
	
		-ms-grid-column: 3;
		-ms-grid-row: 7;
		-ms-grid-row-span: 2;
	}
	#hexGrid .hexGrid .hex:nth-child(8) {
		grid-column-start: 1;
		grid-row-start: 8;
		grid-row-end: span 2;
	
		-ms-grid-column: 1;
		-ms-grid-row: 8;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(9) {
		grid-column-start: 3;
		grid-row-start: 9;
		grid-row-end: span 2;
	
		-ms-grid-column: 3;
		-ms-grid-row: 9;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(10) {
		grid-column-start: 1;
		grid-row-start: 10;
		grid-row-end: span 2;
	
		-ms-grid-column: 1;
		-ms-grid-row: 10;
		-ms-grid-row-span: 2;
	}

	#hexGrid .hexGrid .hex:nth-child(11) {
		grid-column-start: 3;
		grid-row-start: 11;
		grid-row-end: span 2;
	
		-ms-grid-column: 3;
		-ms-grid-row: 11;
		-ms-grid-row-span: 2;
	}
	#hexGrid .hexGrid .hex:nth-child(12) {
		grid-column-start: 1;
		grid-row-start: 12;
		grid-row-end: span 2;
	
		-ms-grid-column: 1;
		-ms-grid-row: 12;
		-ms-grid-row-span: 2;
	}
}

@media only screen and (max-width: 465px) {
	#hexGrid .hexGrid {
    
        -webkit-grid-template-rows: repeat(13, 6em);
        -moz-grid-template-rows: repeat(13, 6em);
        -o-grid-template-rows: repeat(13, 6em);
        -ms-grid-template-rows: repeat(13, 6em);
        -ms-grid-rows: 6em 6em 6em 6em 6em 6em 6em 6em 6em 6em 6em 6em 6em; 
    grid-template-rows: repeat(13, 6em);
	}
}

}