
/*******************************************************************************************
/* IMAGE CAPTION EFFECTS (start)
/*******************************************************************************************/


.image_caption_effect {
	display:inline-block;
	display:inline-flex;
	position: relative;
	overflow: hidden;
}

.image_caption_effect img {width: auto; width: 100%;}

.image_caption_effect .captions, .image_caption_effect .captions h2, .image_caption_effect .captions h3, .image_caption_effect .captions p {color: #fff; text-align: left;}

/*
.image_caption_effect1 .captions h2, .image_caption_effect1 .captions h3, .image_caption_effect1 .captions p,
.image_caption_effect2 .captions h2, .image_caption_effect2 .captions h3, .image_caption_effect2 .captions p,
.image_caption_effect3 .captions h2, .image_caption_effect3 .captions h3, .image_caption_effect3 .captions p {text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;}
*/

.image_caption_effect .captions h2, .image_caption_effect .captions h3 {
	text-shadow: 1px 0 1px rgba(0,0,0,0.3), -1px 0 1px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.3), 0 -1px 1px rgba(0,0,0,0.3), 1px 1px 1px rgba(0,0,0,0.3), 1px -1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.3), -1px -1px 1px rgba(0,0,0,0.3) ;
/*
	letter-spacing: 0.02em;
	font-weight: normal;
*/
}


@media (min-width: 1025px) {
	.image_caption_effect {width: 32%;	margin: 0 2% 2% 0;}
	.image_caption_effect:nth-child(3n+0) {margin-right:0;}
}

@media (max-width: 1024px) {
	.image_caption_effect {width: 49%; margin: 0 2% 2% 0;}
	.image_caption_effect:nth-child(2n+0) {margin-right:0;}
}

@media (max-width: 424px) {
	.image_caption_effect {width: 100%; margin: 0 0 2% 0;}
}


/*----------------------------------------------------------------------------------------*/
/* IMAGE CAPTION EFFECT 1 (start)
/*----------------------------------------------------------------------------------------*/

.image_caption_effect1 {  background: #2f3238; }


.image_caption_effect1 img, .image_caption_effect1 .captions hr, .image_caption_effect1 .captions p, .image_caption_effect1 .captions h2, .image_caption_effect1 .captions h3, .image_caption_effect1 .captions:before, .image_caption_effect1 .captions:after  {
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;	
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.image_caption_effect1 .captions:before,
.image_caption_effect1 .captions:after {
	position: absolute;
	top: 5%;
	right: 3%;
	bottom: 5%;
	left: 3%;
	content: '';
	opacity: 0;
}

.image_caption_effect1 .captions:before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.image_caption_effect1 .captions:after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}


.image_caption_effect1:hover .captions:before,
.image_caption_effect1:hover .captions:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


.image_caption_effect1 .captions {
	position: absolute;
	top: 0;
	bottom:0;
	left:0;
	right:0;

	padding: 5%;	
}


.image_caption_effect1:hover img {opacity: 0.4;}
  
.image_caption_effect1 .captions hr, .image_caption_effect1 .captions p {opacity: 0;}

.image_caption_effect1:hover .captions hr, .image_caption_effect1:hover .captions p {opacity: 1;}

.image_caption_effect1 .captions p {
	position:absolute;
	width:	90%;
	bottom: -20%;
	left:5%;
	margin:0;
}

.image_caption_effect1:hover .captions p {bottom: 8%;}

.image_caption_effect1:hover .captions h2, .image_caption_effect1:hover .captions h3  {margin-top: 0; margin-bottom: 0.2em;}

.image_caption_effect1:hover .captions hr {margin-top: 0;}


/*----------------------------------------------------------------------------------------*/
/* IMAGE CAPTION EFFECT 2 (start)
/*----------------------------------------------------------------------------------------*/

.image_caption_effect2 {  background: #2f3238; }


.image_caption_effect2 img, .image_caption_effect2 .captions hr, .image_caption_effect2 .captions p, .image_caption_effect2 .captions h2, .image_caption_effect2 .captions h3, .image_caption_effect2 .captions:before, .image_caption_effect2 .captions:after  {
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;	
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.image_caption_effect2 .captions:before{
	position: absolute;
	top: 5%;
	right: 1.5%;
	bottom: 5%;
	left: 1.5%;
	content: '';
	opacity: 0;
}

.image_caption_effect2 .captions:after{
	position: absolute;
	top: 3%;
	right: 3%;
	bottom: 3%;
	left: 3%;
	content: '';
	opacity: 0;
}

.image_caption_effect2 .captions:before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.image_caption_effect2 .captions:after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}


.image_caption_effect2:hover .captions:before,
.image_caption_effect2:hover .captions:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


.image_caption_effect2 .captions {
	position: absolute;
	top: 0;
	bottom:0;
	left:0;
	right:0;

	padding: 5%;	
}


.image_caption_effect2:hover img {opacity: 0.4;}
  
.image_caption_effect2 .captions hr, .image_caption_effect2 .captions p {opacity: 0;}

.image_caption_effect2:hover .captions hr, .image_caption_effect2:hover .captions p {opacity: 1;}

.image_caption_effect2 .captions p {
	position:absolute;
	width:	90%;
	bottom: -20%;
	left:5%;
	margin:0;
}

.image_caption_effect2:hover .captions p {bottom: 8%;}


.image_caption_effect2:hover .captions h2, .image_caption_effect2:hover .captions h3 {margin-top: 0; margin-bottom: 0.2em;}


.image_caption_effect2:hover .captions hr {margin-top: 0;}


/*----------------------------------------------------------------------------------------*/
/* IMAGE CAPTION EFFECT 3 (start)
/*----------------------------------------------------------------------------------------*/

.image_caption_effect3 {  background: #2f3238; }


.image_caption_effect3 img, .image_caption_effect3 .captions hr, .image_caption_effect3 .captions p, .image_caption_effect3 .captions h2, .image_caption_effect3 .captions h3, .image_caption_effect3 .captions:before, .image_caption_effect3 .captions:after  {
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;	
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.image_caption_effect3 .captions:before{
	position: absolute;
	top: 5%;
	right: 1.5%;
	bottom: 5%;
	left: 1.5%;
	content: '';
	opacity: 0;
}

.image_caption_effect3 .captions:after{
	position: absolute;
	top: 3%;
	right: 3%;
	bottom: 3%;
	left: 3%;
	content: '';
	opacity: 0;
}

.image_caption_effect3 .captions:before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.image_caption_effect3 .captions:after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}


.image_caption_effect3:hover .captions:before,
.image_caption_effect3:hover .captions:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


.image_caption_effect3 .captions {
	position: absolute;
	top: 0;
	bottom:0;
	left:0;
	right:0;

	padding: 5%;	
}


.image_caption_effect3:hover img {
	opacity: 0.4;
	-webkit-transform: scale(1.1);
	transform: scale(1.10);	
}
  
.image_caption_effect3 .captions hr, .image_caption_effect3 .captions p {opacity: 0;}

.image_caption_effect3:hover .captions hr, .image_caption_effect3:hover .captions p {opacity: 1;}

.image_caption_effect3 .captions p {
	position:absolute;
	width:	90%;
	bottom: -20%;
	left:5%;
	margin:0;	
}

.image_caption_effect3:hover .captions p {bottom: 8%;}


.image_caption_effect3:hover .captions h2, .image_caption_effect3:hover .captions h3 {margin-top: 0; margin-bottom: 0.2em;}


.image_caption_effect3:hover .captions hr {margin-top: 0;}


/*----------------------------------------------------------------------------------------*/
/* IMAGE CAPTION EFFECT 4 (start)
/*----------------------------------------------------------------------------------------*/

.image_caption_effect4 .captions h2, .image_caption_effect4 .captions h3 {
/*
	margin: -5.5%;
	padding: 5.5%;
*/
	padding:1% 5%;
	margin:0 0 60px;
	background: rgba(0,71,186,0.5);
	background: rgba(0,71,186,0.6);
	font-weight:normal;
	text-shadow:none;
	text-shadow: 1px 0 1px rgba(0,0,0,0.2), -1px 0 1px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.2), 0 -1px 1px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.2), 1px -1px 1px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.2), -1px -1px 1px rgba(0,0,0,0.2);
	text-shadow: 1px 0 1px rgba(0,0,0,0.1), -1px 0 1px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.1), 0 -1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1), 1px -1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1), -1px -1px 1px rgba(0,0,0,0.1);
	font-size: 15px;
	
/*	letter-spacing: 0.015em;*/
}
.image_caption_effect4 .captions hr {margin-left:5%;margin-right:5%;}


.image_caption_effect4:hover .captions h2, .image_caption_effect4:hover .captions h3 {background: none; margin-top:5%;padding: 0 5%;}

.image_caption_effect4 { background: #0047ba;}

.image_caption_effect4 a {text-decoration:none;}

.image_caption_effect4 img, .image_caption_effect4 .captions hr, .image_caption_effect4 .captions p, .image_caption_effect4 .captions h2, .image_caption_effect4 .captions h3, .image_caption_effect4 .captions:before, .image_caption_effect4 .captions:after  {
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;	
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.image_caption_effect4 .captions:before{
	position: absolute;
	top: 5%;
	right: 1.5%;
	bottom: 5%;
	left: 1.5%;
	content: '';
	opacity: 0;
}

.image_caption_effect4 .captions:after{
	position: absolute;
	top: 3%;
	right: 3%;
	bottom: 3%;
	left: 3%;
	content: '';
	opacity: 0;
}

.image_caption_effect4 .captions:before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.image_caption_effect4 .captions:after {
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}


.image_caption_effect4:hover .captions:before,
.image_caption_effect4:hover .captions:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


.image_caption_effect4 .captions {
	position: absolute;
	top: 0;
	bottom:0;
	left:0;
	right:0;

	padding: 5%;	
	padding: 0;		
}


.image_caption_effect4:hover img {
	opacity: 0.5;
	opacity: 0.4;
	-webkit-transform: scale(1.1);
	transform: scale(1.10);	
}
  
.image_caption_effect4 .captions hr, .image_caption_effect4 .captions p {opacity: 0;}

.image_caption_effect4:hover .captions hr, .image_caption_effect4:hover .captions p {opacity: 1;}

.image_caption_effect4 .captions p {
	position:absolute;
	width:	90%;
	bottom: -20%;
	left:5%;
	margin:0;	
}

.image_caption_effect4:hover .captions p {bottom: 8%;}


.image_caption_effect4:hover .captions h2, .image_caption_effect4:hover .captions h3 {margin-bottom: 0.2em;}


.image_caption_effect4:hover .captions hr {margin-top: 0;}

/*******************************************************************************************
/* IMAGE CAPTION EFFECTS (end)
/*******************************************************************************************/





@media (min-width: 1024px) {
	.image_caption_effect {
    	width: 32%;
	    margin: 0 1.5% 2% 0;
	}

	.image_caption_effect:nth-child(3n+0) {    margin-right: 0; }
}



@media (max-width: 1024px) {
	.image_caption_effect {
	    width: 49%;
	    margin: 0 1.1% 2% 0;
	    margin: 0 2% 2% 0;
	}
	.image_caption_effect:nth-child(3n+0) {    margin-right: 1.1%; margin-right: 2%; }
	.image_caption_effect:nth-child(2n+0) {    margin-right: 0; }

}


@media (max-width: 424px) {
	.image_caption_effect {width: 100%; margin: 0 0 2% 0;}
}