#info {
	background:#333;
	opacity:0.8;
	position: absolute;
	top:5px;
	right:5px;
	width:280px;
	color:#fff;
	border-radius: 5px;
	z-index:10
}

	#info p {
		padding:0 10px;
	}

.container {
	width:700px;
	height:100%;
	position:absolute;
	top:50px;
	left:50%;
	margin-left:-350px;
}



/* HEXAGON STARTS HERE */
.hex {
    background-color: #ccc;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    float: left;
    height: 83px;
    margin: 25px 5px;
    position: relative;
    text-align: center;
    width: 144px;		
	-webkit-background-size: auto 173px;							
	-moz-background-size: auto 173px;							
	-ms-background-size: auto 173px;							
	-o-background-size: auto 173px;							
	position: relative;
	zoom:1;
			-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;			
		backface-visibility: hidden;
}
		
	.hex.hex-gap {
		margin-left: 86px;
	}
	
	.hex a {
		display:block;
		width: 100%;
		height:100%;
		text-indent:-9999em;
		position:absolute;
		top:0;
		left:0;
	}

	.hex .corner-1,
	.hex .corner-2 {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: inherit;								
		z-index:0;						
		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:0;
		-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 {
    background-attachment: inherit;
    background-clip: inherit;
    background-color: inherit;
    background-image: inherit;
    background-origin: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: inherit;
    content: "";
    height: 193px;
    left: 0;
    position: absolute;
    top: 0;
    width: 193px;
    z-index: 1;
		-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(-97px, -15px);
		-moz-transform: rotate(-60deg) translate(-97px, -15px);
		-ms-transform: rotate(-60deg) translate(-97px, -15px);
		-o-transform: rotate(-60deg) translate(-97px, -15px);
		transform: rotate(-60deg) translate(-97px, -15px);	
	  -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(-60px, -8px);
		-moz-transform: rotate(60deg) translate(-60px, -8px);
		-ms-transform: rotate(60deg) translate(-60px, -8px);
		-o-transform: rotate(60deg) translate(-60px, -8px);
		transform: rotate(60deg) translate(-60px, -8px);	
		bottom:0;
	}