/* ----------------------------------------------*/
/* H 01 - Custom HTML Markup - Hexagons
/* ----------------------------------------------*/
.hexarticles h3 {font-size:18px; text-transform:uppercase; margin: 0 0 18px;}
.hexarticles p {font-weight:100; margin: 16px 0 28px !important;}
.hexarticles img {margin-bottom:28px;}
.hexarticles {margin:0 auto;overflow:visible!important;}
.hexarticles .col-1, .hexarticles .col-3 {margin-top:200px; }
.flip {}

.hexagon {
	visibility:hidden;
	overflow:hidden;
	cursor: pointer;
	background-clip: border-box;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
         -o-transform: rotate(120deg);
	    -ms-transform: rotate(120deg);
            transform: rotate(120deg);
}
.hexagon-in1 {
	overflow: hidden; 
    width: 100%;
    height: 100%;
	-webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon-in2 {
    width: 100%;
    height: 100%; 
    visibility: visible;
	-webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
		-ms-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon2 {
    width: 220px;
    height: 260px;
   /* margin: -70px 0px -140px 73px; */
   margin: 0 0 30px 0;
}
.hex_info_wrap {
	position: absolute;
	width: inherit;
	height: inherit;
		-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;
		
}
.hex_info_wrap1 {
	position: absolute;
	width: inherit;
	height: inherit;
		-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;
				-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
			background-size:130px 130px;
}
.hex_info {
	padding:14px 0;
	position:absolute;
	width:100%;
	bottom:36%;
	text-align:center;	
	-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;
}
.hex_info h2 {font-size: 32px;margin: 0 auto;padding: 0;}
.hex_info p {margin: 6px auto 0;padding: 0;}
.articles .col-2 .face.back {display: block;box-sizing: border-box;text-align: center;}
.articles .col-2 {position:relative;z-index:99;margin-left:-10px;margin-right:-10px;}

@media(max-width:900px){
	.hexarticles .col-1, .hexarticles .col-3 {margin-top:0; }
	.hexarticles .col-1, .hexarticles .col-2, .hexarticles .col-3 {width:31.623931623931625%!important; float:left!important;}
	.hexarticles .col-2, .hexarticles .col-3 {margin-left: 2.564102564102564%;}
	.flip {padding: 0 10px;}
	.hexagon2 {width: 150px; height: 180px; margin: 0px 0px 15px;}
	.hexarticles img {margin-bottom: 15px;}
	.hexarticles p {margin-top:6px!important; font-size:14px;}
	.hexarticles h3 {margin: 0px;}
}
@media(max-width:600px){
	.hexarticles .col-1, .hexarticles .col-3 {margin-top:0; }
	.hexarticles .col-1, .hexarticles .col-2, .hexarticles .col-3 {width:100%!important; float:none!important; margin-left:0!important;}
	.hexagon2 {width: 220px; height: 260px;}
	.hexarticles img {margin-bottom: 15px;}
	.flip {padding: 0;}
	.hexarticles p {margin-top:6px!important; font-size:14px;}
	.hexarticles h3 {margin: 0px;}
}