body {
	background-color: rgb(46, 46, 46);
}
.hex-container {
	position: absolute;
	top: 20px;
	left: 50%;
}

@media (min-width:720px) {
	.hex-container {
		width: 648px;
		margin-left: -324px;
	}
}

@media (max-width: 719px) {
	.hex-container {
		width: 324px;
		margin-left: -162px;
	}
}
.hex {
	width: 152px;
	height: 87px;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	-webkit-background-size: auto 173px;
	-moz-background-size: auto 173px;
	-ms-background-size: auto 173px;
	-o-background-size: auto 173px;
	position: relative;
	float: left;
	margin: 27px 5px;
	text-align: center;
	zoom: 1;
}

@media (max-width: 719px) {
	.hex:nth-child(3n+1) {
		margin-left: 86px;
	}
}		
	.hex.hex-gap {
		margin-left: 86px;
	}
	
	.hex a {
		display:table;
		width: 100%;
		height:100%;
		/*text-indent:-9999em;*/
		position:absolute;
		top:0;
		left:0;
	}
		.hex a:hover, .hex a:focus, .hex a:active {
			text-decoration:none;
		}

		.hex a:hover h4, .hex a:focus h4, .hex a:active h4 {
			font-size:15pt;
			transition: all linear 0.1s;
		}

	.hex .corner-1,
	.hex .corner-2 {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: inherit;								
		z-index:-2;						
		overflow:hidden;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;			
		backface-visibility: hidden;			
	}
	
	.hex .corner-1 {
		z-index:-1;
		-webkit-transform: rotate(60deg);
		-moz-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
		-o-transform: rotate(60deg);
		transform: rotate(60deg);
	}
	
	.hex .corner-2 {
		-webkit-transform: rotate(-60deg);
		-moz-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
		-o-transform: rotate(-60deg);
		transform: rotate(-60deg);
	}
	
	.hex .corner-1:before,
	.hex .corner-2:before {
		width: 173px;
		height:	173px;
	  content: '';
	  position: absolute;
	  background: inherit;
	  top:0;
	  left: 0;
	  z-index: 1;
	  background: inherit;
	  background-repeat:no-repeat;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;	
		backface-visibility: hidden;				  
	}			
	

	.hex .corner-1:before {
		-webkit-transform: rotate(-60deg) translate(-87px, 0px);
		-moz-transform: rotate(-60deg) translate(-87px, 0px);
		-ms-transform: rotate(-60deg) translate(-87px, 0px);
		-o-transform: rotate(-60deg) translate(-87px, 0px);
		transform: rotate(-60deg) translate(-87px, 0px);	
	  -webkit-transform-origin: 0 0;
	  -moz-transform-origin: 0 0;
	  -ms-transform-origin: 0 0;
	  -o-transform-origin: 0 0;
	  transform-origin: 0 0;
	}			
	
	.hex .corner-2:before {
		-webkit-transform: rotate(60deg) translate(-48px, -11px);
		-moz-transform: rotate(60deg) translate(-48px, -11px);
		-ms-transform: rotate(60deg) translate(-48px, -11px);
		-o-transform: rotate(60deg) translate(-48px, -11px);
		transform: rotate(60deg) translate(-48px, -11px);	
		bottom:0;
	}		


	
	/* Custom styles*/
	.hex .inner {		
		color:#eee;
	}

.hex h4 {
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	padding: 0 15px;
	font-size: 13pt;
	transition: all ease 0.1s;
	text-shadow: 0 2px 5px #000;
}

	.hex hr {
		border:0;
		border-top:1px solid #eee;
		width:60%;
		margin:15px auto;
	}
	
	.hex p {
		font-size:16px;
		font-family: 'Kotta One', serif;
		width:80%;
		margin:0 auto;
	}

.hex.hex-1 {
	background: #74cddb;
	background-color: var(--purple);
}

.hex.hex-2 {
	background: #f5c53c;
}

.hex.hex-3 {
	background: #80b971;
}