/* Page feature Styles
======================================================================== */
.mainZPF::after,
.mainZPF .itemContainerZPF::after,
.mainZPF .itemContainerZPF .block::after {
	clear: both;
	content: " ";
	display: block;
}
.mainZPF .itemContainerZPF .block .blockContent{ transition: all 0.3s ease; }
.mainZPF{
	padding: 0px;
	background-color: #004b8d;
}
/*
.mainZPF .itemContainerZPF{
	float: left;
	position: relative;
	width: 25%;
}
.mainZPF .itemContainerZPF .block {
	display: table;	
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
*/
.mainZPF .itemContainerZPF .block a{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;	
	z-index: 200;
}


/* -- Front & Back -- */
.mainZPF .itemContainerZPF {
	display: inline-block;
	float: left;
}
.mainZPF .itemContainerZPF,
.mainZPF .itemContainerZPF .block,
.mainZPF .itemContainerZPF .block .blockContentContainer,
.mainZPF .itemContainerZPF .block .front,
.mainZPF .itemContainerZPF .block .back{
	height: 200px;
	/* width: 282.5px;
	width: 287.5px; */
	width: 282.4px;
}
.mainZPF .itemContainerZPF .block .front,
.mainZPF .itemContainerZPF .block .back{
	position: absolute;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition: all 0.5s ease 0.2s;

	border: 1px solid #004b8d;
}

.mainZPF .itemContainerZPF .block { position: relative;}
.mainZPF .itemContainerZPF .block .blockContentContainer{ display: table;}

.mainZPF .itemContainerZPF .block .blockContent{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	position: relative;
	z-index: 10;
}

.mainZPF .itemContainerZPF .block .blockContent i {
	color: #fff;
	font-size: 50px;
	font-weight: normal;
}
.mainZPF .itemContainerZPF .block .blockContent span {
	color: #fff;
	display: inline-block;
	font-size: 21px;
	font-size: 13px;
	font-weight: bolder;
	padding: 10px 10px;
	text-transform: uppercase;
	width: 100%;
}

.mainZPF .itemContainerZPF .block .back .blockContent i,
.mainZPF .itemContainerZPF .block .back .blockContent span {
	color: #004b8d;
	color: #e07000;
}

/* -- Front -- */
.mainZPF .itemContainerZPF .block .front{
	background-color: #004b8d;
	z-index: 20;
}
	.mainZPF .itemContainerZPF:nth-child(4n+1) .block .front{ 
		background-color: #105b9d; 
		border-color: #105b9d;
	}
	.mainZPF .itemContainerZPF:nth-child(4n+2) .block .front{ 
		background-color: #206bad; 
		border-color: #206bad;
	}
	.mainZPF .itemContainerZPF:nth-child(6n+1) .block .front{ 
		background-color: #003b7d; 
		border-color: #003b7d;
	}
	.mainZPF .itemContainerZPF:nth-child(11n+11) .block .front{ 
		background-color: #003b7d; 
		border-color: #003b7d;
	}
	

/* -- Back -- */
.mainZPF .itemContainerZPF .block .back{
	background-color: #fff;
	z-index: 10;
	opacity: 0;
	-webkit-transform: rotateY(-180deg); /* Safari */
	transform: rotateY(-180deg);
}
.mainZPF .itemContainerZPF .block .back .pageIcon { transform: scaleX(-1); }
	




	/* Media Queries - bs3: 
	================================================== */
	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px) {}
	@media only screen and (max-width : 1200px) {
		.mainZPF .itemContainerZPF,
		.mainZPF .itemContainerZPF .block,
		.mainZPF .itemContainerZPF .block .blockContentContainer,
		.mainZPF .itemContainerZPF .block .front,
		.mainZPF .itemContainerZPF .block .back{
			height: 170px;
			/* width: 232.5px;
			width: 237.5px; */
			width: 232.4px;
		}
	}
	/* Medium Devices, Desktops */
	@media only screen and (min-width: 992px) and (max-width: 1200px) {	}
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 992px) {
		.mainZPF .itemContainerZPF,
		.mainZPF .itemContainerZPF .block,
		.mainZPF .itemContainerZPF .block .blockContentContainer,
		.mainZPF .itemContainerZPF .block .front,
		.mainZPF .itemContainerZPF .block .back{
			height: 170px;
			/* width: 234.5px;
			width: 242.5px;	*/		
			width: 234.4px;			
		}
		.mainZPF .itemContainerZPF .block .blockContent span { font-size: 13px; }
	}
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 992px) {	}
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 767px) {

		/* -- Front -- */
		.mainZPF .itemContainerZPF .block:hover div.front{ 
			-webkit-transform: rotateY(90deg); /* Safari */
			transform: rotateY(90deg);
			transition: all 0.25s ease 0.2s;
			opacity: 0;	
		}
		/* -- Back -- */
		.mainZPF .itemContainerZPF .block:hover div.back{ 
			opacity: 1;
			-webkit-transform: rotateY(0deg); /* Safari */
			transform: rotateY(0deg);
		}


	}
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.mainZPF .itemContainerZPF::after,
		.mainZPF .itemContainerZPF .block::after,
		.mainZPF .itemContainerZPF .block .front .blockContent::after {
			clear: both;
			content: " ";
			display: block;
		}
		.mainZPF .itemContainerZPF{
			border-bottom: 1px solid rgba(255,255,255,0.3);
		}
		.mainZPF .itemContainerZPF .block .back{ display: none; }
		.mainZPF .itemContainerZPF, 
		.mainZPF .itemContainerZPF .block, 
		.mainZPF .itemContainerZPF .block .blockContentContainer, 
		.mainZPF .itemContainerZPF .block .front,
		.mainZPF .itemContainerZPF .block .front .blockContent{
			width: 100%;
			display: inline-block;
			height: auto;
			position: relative;
		}
		.mainZPF .itemContainerZPF .block .blockContent .pageIcon {
			float: left;
			text-align: center;
			width: 50px;
			padding: 15px 0 10px 0;
		}
		.mainZPF .itemContainerZPF .block .blockContent i { font-size: 32px; }
		.mainZPF .itemContainerZPF .block .blockContent span {
			float: right;
			width: calc(100% - 50px);
			font-size: 11px;
		}
	}
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.mainZPF .itemContainerZPF{
			width: 50%;
			float: left;
		}
		.mainZPF .itemContainerZPF:nth-child(odd){
			border-right: 1px solid rgba(255,255,255,0.3);
			width: calc( 50% - 1px);
		}
	}
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {	}