body {
	font-family:arial;
	font-size:12px;
	background: #f6f7f0;
	margin:0;
	padding:0;	
}

#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;
	}

a {
	text-decoration:none;
	color: #3e8ed7;
}

a:hover {
	color: #61b7e6;
}	

/* HEXAGON STARTS HERE */
.hex {
	width:150px;
	height:150px;
	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-top:25px;
	margin-bottom: 20px;
	margin-left: 1px;
	margin-right: 1px;*/
	text-align:center;
	zoom:1;
  opacity: 1; 
  z-index: 1;
}

	.hex.hex-gap {
    opacity: 1; 
    z-index: 1;
	}
  
	.hex a {
		display:block;
		width: 100%;
		height:100%;
		text-indent:-9999em;
		position:absolute;
		top:0;
		left:0;
    z-index: 1;
	}

	.hex .corner-1,
	.hex .corner-2 {
		
	}
	
  	.hex .corner-1:hover ,
	.hex .corner-2:hover  {
		
	}
  
	.hex .corner-1 {
		
	}
  .hex .corner-1:hover {
	
	}
	
	.hex .corner-2 {
    z-index: 1;
	}
	.hex .corner-2:hover {
    z-index: 1;
	}
  
  
	.hex .corner-1:before,
	.hex .corner-2:before {
	
	}			
	

	.hex .corner-1:before {
    z-index: 1;
	}			
	
	.hex .corner-2:before {
	}		


	
	/* Custom styles*/
	.hex .inner {		
		color:#eee;
	}
	
	.hex h4 {
		font-family: 'Josefin Sans', sans-serif;		
		margin:0;			
	}
	
	.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;
	}
	
	.hex.hex-2 {
		background: #f5c53c;
	}
	
	.hex.hex-3 {
		background: #80b971;
	}