@charset "UTF-8";


.list-hex-grid {
	
	margin:0 auto 0px auto;
	font-size: 0px;
	word-spacing: 1px;
	word-spacing: 0;
	border:solid 0px #ccc;
	position:relative;
	min-height:5000px;
}





.hexagon {
	text-align:left;
  position:absolute;
  width: 190px; 
  height: 109.70px;
  margin: 54.85px 0;
  background-size: auto 219.3931px;
  background-position: center;
  transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
  text-align:left; 
  transform-origin:center center;
  transition-duration':'0.5s';
	 
	 
}

.hexagon.grid-item{opacity:0;}
.hexagon.grid-item.active{ opacity:1 !important;}



	.centerPos{
		position:absolute;
		top:360px !important;
		left:50% !important;
		margin-left:-95px !important;
		opacity:0 !important;
		transition: all 2000ms cubic-bezier(0,.8,.5,1); /* easeInOutCubic */
		transform: scale(2,2) !important;
		transform-origin:center center !important;
	  
	}
	
	
	
	
	
	.touchDevice .centerPos{top:580px !important;}
	
	body#works.detail .centerPos{
		position:absolute;
		top:-60px !important;
	}
	
	
	#mainTop.hide map,
	#mainTop.hide area{ display:none; cursor:default;}
	
	.centerPos.open{ opacity:1 !important;transition: all 1000ms cubic-bezier(0,.8,.5,1) !important;transform: scale(0.5,0.5) !important;transform-origin:center center !important;}
	
	.centerPos.openHide{ opacity:0 !important;transition: all 1000ms cubic-bezier(0,.8,.5,1) !important;transform: scale(0,0) !important;transform-origin:center center !important;}
	
	
	
	.hexagon.centerPos .hexagonInner{
			transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); /* easeInOutCubic */
			opacity:0 !important;
	}
	


.hexTop,
.hexBottom {
  position: absolute;
  z-index: 1;
  width: 134.35px;
  height: 134.35px;
  overflow: hidden;
   transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 27.82px;

}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
  content: "";
  position: absolute;
  width: 190.0000px;
  height: 109.6965511460289px;
  transform:          rotate(45deg) scaleY(1.7321) translateY(-54.8483px);
  transform-origin: 0 0;
  background: inherit;
}

.hexTop {
 top: -67.1751px;
}

.hexTop:after {
  background-position: center top;
}

.hexBottom {
  bottom: -67.1751px;
}

.hexBottom:after {
  background-position: center bottom;
}

.hexagon:after {
  content: "";
  position: absolute;
  top: 0.0000px;
  left: 0;
width: 190.0000px;
  height: 109.6966px;
  z-index: 2;
  background: inherit;
}

.hexagon img.btn{ 
	width:100%; 
	height:256px; 
	position:absolute; 
	left:0; 
	top:-61.20px; 
	z-index:10;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}



.hexagonInner {
	text-align:left;
  position:absolute;
   top:0px;
  left:0;

 width: 190px; 
  height: 109.70px;
  margin: 0 0;
  background-color:#000;
  opacity:0;
  z-index:8;
  

	
}


.hexagonContents {
  text-align:center;
  font-size:1.3rem;
  position:relative;
  width: 190px; 
  height: 109.70px;
  padding:5px 20px 0px 20px;
  overflow:hidden;
  display:table-cell;
  vertical-align:middle;
  margin: 0;
  top:20px;
  left:0;
  z-index:9;
  opacity:0;
  transition: all 500ms cubic-bezier(0.000, 0.000, 0.090, 0.985);
}

.hexagonContents h3{ position:relative; font-size:1.0em; line-height:1.3;}

.hexagon.h .hexagonContents{opacity:1;top:0px;}