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:86px;
	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:hover {
	width:150px;
	height:86px;
	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: 0.7; 
  z-index: 1;
}	
	.hex.hex-gap {
		margin-left: 77px;
    opacity: 1; 
    z-index: 1;
	}
	
  .hex.hex-gap:hover {
		margin-left: 77px;
    opacity: 0.7; 
    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 {
		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;			
    opacity: 1;
    z-index: 1;
	}
	
  	.hex .corner-1:hover ,
	.hex .corner-2:hover  {
		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;		
    /*opacity: 0.7;    */
    z-index: 1;
	}
  
	.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);
    opacity: 1; 
    z-index: 1;
	}
  .hex .corner-1:hover {
		z-index:-1;
		-webkit-transform: rotate(60deg);
		-moz-transform: rotate(60deg);
		-ms-transform: rotate(60deg);
		-o-transform: rotate(60deg);
		transform: rotate(60deg);
    /*opacity: 0.7; */
    z-index: 1;
	}
	
	.hex .corner-2 {
		-webkit-transform: rotate(-60deg);
		-moz-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
		-o-transform: rotate(-60deg);
		transform: rotate(-60deg);
    opacity: 1; 
    z-index: 1;
	}
	.hex .corner-2:hover {
		-webkit-transform: rotate(-60deg);
		-moz-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
		-o-transform: rotate(-60deg);
		transform: rotate(-60deg);
    /*opacity: 0.7; */
    z-index: 1;
	}
  
  
	.hex .corner-1:before,
	.hex .corner-2:before {
		width: 177px;
		height:	177px;
	  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;		
    z-index: 1;    
	}			
	

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


	
	/* 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;
	}