.hextile{
  overflow:hidden;
  width:90%;
}
.clr:after{
  content:"";
  display:block;
  clear:both;
}
.hextile li{
  position:relative;
  list-style-type:none;
  width:27.85714285714286%; /* = (100-2.5) / 3.5 */
  padding-bottom: 32.16760145166612%; /* =  width /0.866 */
  float:left;
  overflow:hidden;
  visibility:hidden;
 
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
}
.hextile li:nth-child(3n+2){
  margin:0 1%;
}
.hextile li:nth-child(6n+4){
  margin-left:0.5%;
}
.hextile li:nth-child(6n+4), .hextile li:nth-child(6n+5), .hextile li:nth-child(6n+6) {
	margin-top: -6.9285714285%;
  margin-bottom: -6.9285714285%;
  
  -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
  transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hextile li:nth-child(6n+4):last-child, .hextile li:nth-child(6n+5):last-child, .hextile li:nth-child(6n+6):last-child{
  margin-bottom:0%;
}
.hextile li *{
  position:absolute;
  visibility:visible;
}
.hextile li > div{
  width:100%;
  height:100%;
  text-align:center;
  overflow:hidden;
  
  background-color: #faf0cacc;
  
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);
  
	-webkit-backface-visibility:hidden;
  
}

/* HEX CONTENT */
.hextile li > img{
  left:-100%; right:-100%;
  width: 100%; height:100%;
  margin:0 auto;   
  
  overflow:hidden;
  
  -webkit-transform: skewY(-30deg) rotate(60deg);
  -ms-transform: skewY(-30deg) rotate(60deg);
  transform: skewY(-30deg) rotate(60deg);
  
	-webkit-backface-visibility:hidden;
}

.hextile div h1, .hextile div p{
  width:90%;
  padding:0 5%;
  font-family: 'Raleway', sans-serif;
}

.hextile li h1{
  font-weight:normal;
  font-size:2em;
}

.hextile li h1:after{
	content:'';
  display:block;
  position:absolute;
  bottom:-1px; left:45%;
  width:10%;
  text-align:center;
  z-index:1;
  border-bottom:2px solid #fff;
}

.hextile li h2{
  font-weight:normal;
  font-size:1em;
}
.hextile li h2:after{
	content:'';
  position:absolute;
  display:block;
  width:10%;
  text-align:center;
  z-index:1;
  bottom:-1px; left:45%;
  border-bottom:2px solid #fff;
}

.hextile li p{
	padding-top:50%;
	padding-bottom:50%;
}