.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}




.articles .col-1 #f1_container:hover #f1_card {transform: rotateY(180deg);  z-index:1;}
.articles .col-2 #f1_container:hover #f1_card {transform: rotateX(-180deg);  z-index:99;}
.articles .col-3 #f1_container:hover #f1_card {transform: rotateY(180deg);  z-index:1;}

#f1_container:hover #f1_card {
	-webkit-transform: rotateY(180deg);
	   -moz-transform: rotateY(180deg);
	     -o-transform: rotateY(180deg);
	    -ms-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

/******************************************************************************************/




.articles  .flip {
	overflow:visible;
	width:300px;
	position:relative;

	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
			
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	     -o-transition: all 0.4s ease-in-out;
	    -ms-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
			
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
}

.flip:hover{
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	     -o-transition: all 0.4s ease-in-out;
	    -ms-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
			position:relative; z-index:9999;
}

.articles .flip .hex_info_wrap  {opacity:1;}
.articles .flip:hover .hex_info_wrap {opacity:0;}

.articles .flip .hex_info_wrap1  {opacity:0;}
.articles .flip:hover .hex_info_wrap1 {opacity:1;}


/*
.articles .flip .hex_info_wrap1 .hex_info {
	-webkit-transform: translate(0,-120px);
	   -moz-transform: translate(0,-120px);
	    -ms-transform: translate(0,-120px);
	     -o-transform: translate(0,-120px);
	        transform: translate(0,-120px);
}
.articles .flip:hover .hex_info_wrap1 .hex_info {
	-webkit-transform: translate(0,0px);
	   -moz-transform: translate(0,0px);
	    -ms-transform: translate(0,0px);
	     -o-transform: translate(0,0px);
	        transform: translate(0,0px);
}
*/