.hex-container {
  width: 960px; 
  line-height: 1.3;
}
ol.even {
  position: relative;
  left: 5.45455em;
}
ol.odd {
  position: relative;
  margin-top: -6.5%;
  margin-bottom: -6.5%;
}
.hex {
  position: relative;
  margin: 1.3em auto;
  width: 6em; height: 10.2em;
  border-radius: 1em/.5em;
  background: #ccc;
  -webkit-transform: rotate(-90deg);
  display: inline-block;
  margin-right: 4.61538em;
  transition: all 150ms ease-in-out;
}
.hex:before, .hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.hex:before {
  -webkit-transform: rotate(60deg);
}
.hex:after {
  -webkit-transform: rotate(-60deg);
}
.hex:hover {
  background: #F58787;
  cursor: pointer;
}

/*  Hex2 Class  */
.hex2-container {
	width:700px;
	height:100%;
	; position:absolute;
	position: relative;
    float: left;
	top:50px;
	left:50%;
	margin-left:-350px;
}
.hex2 {
    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:25px 5px;
    text-align:center;
    zoom:1;
}
.hex2.hex-gap {
    margin-left: 86px;
}
.hex2 a {
    display:block;
    width: 100%;
    height:100%;
    text-indent:-9999em;
    position:absolute;
    top:0;
    left:0;
}
.hex2 .corner-1,
.hex2 .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;
}
.hex2 .corner-1 {
    z-index:-1;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.hex2 .corner-2 {
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hex2 .corner-1:before,
.hex2 .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;                  
}            
.hex2 .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;
}            
.hex2 .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*/
.hex2 .inner {        
    color:#eee;
}
.hex2 h4 {
    font-family: 'Josefin Sans', sans-serif;        
    margin:0;            
}
    
.hex2 hr {
    border:0;
    border-top:1px solid #eee;
    width:60%;
    margin:15px auto;
}
.hex2 p {
    font-size:16px;
    font-family: 'Kotta One', serif;
    width:80%;
    margin:0 auto;
}
.hex2.hex-1 {
    background: #74cddb;
}
.hex2.hex-2 {
    background: #f5c53c;
}
.hex2.hex-3 {
    background: #80b971;
}
.hex2.hex-4 {
    background: #000;
}