/*------------------------------------*\
    		$custom css 
\*------------------------------------*/
/*
	* General
	* Animation
	* Media query
*/




/*------------------------------------
            $General
------------------------------------*/
i.fa-lg{ vertical-align: 1%; }
.img-wrapper{ 
	display: inline-block; 
	float: left; 
	position: relative;
}

.left-block{ float: left; }
.right-block{ float: right; }

.left-block{ width: 41.67%; margin-right: 15px; }
	.left-block > div:first-child{ margin-bottom: 15px; }
	.left-block > div:nth-of-type(2){ width: calc( (100% - 15px) / 2 ); margin-right: calc( 15px - 0.01px ); }
	.left-block > div:nth-of-type(3){ width: calc( (100% - 15px) / 2 ); }

.right-block{ width: calc( (100% - 41.67%) - 15px ); }
	.right-block > div:nth-of-type(1){ width: 43.0405%; margin-right: 15px; 	}
	.right-block > div:nth-of-type(2){ width: calc( (100% - 43.0405%) - 15px );	}
	.right-block > div:first-child{ margin-bottom: 15px; }





/*------------------------------------
            $Animation
------------------------------------*/
.mask{
	background-color: rgba(255, 255, 255, 0);
	position: absolute;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
		-ms-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
		-moz-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
			-o-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
				transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
}
.img-wrapper p{
	color: #fff;
	font-family: Oswald, sans-serif;
	font-size: 2vw;
	font-weight: bold;
	line-height: 1.3;
	position: absolute;
	left: 5%;
	bottom: 5%;
	z-index: 10;
	-webkit-transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
		-ms-transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
		-moz-transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
			-o-transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
				transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);;
}
.img-wrapper:hover p{
	color: #000;
	position: absolute;
	left: 5%;
	bottom: 10%;
}
.mask:hover{ background-color: rgba(255, 255, 255, 0.5); }
.img-wrapper img{ width: 100%; }




/*------------------------------------
            $Media query
------------------------------------*/
@media screen and (min-width: 1921px) {
	.img-wrapper p {
		font-size: 40px;
	}
}


@media screen and (max-width: 991px) {
	/*------------------------------------
            	$General
	------------------------------------*/
	.left-block{ width: 100%; margin-bottom: 15px; }
	.right-block{ width: 100%; }

	.right-block > div:nth-of-type(2){ width: calc( (100% - 15px) / 2 );  margin-right: 15px; }
	.right-block > div:nth-of-type(3){ width: calc( (100% - 15px) / 2 ); }
	.right-block > div:first-child{ width: 100%; }
	
	/*------------------------------------
            	$Animation
	-----------------------------------*/
	.img-wrapper p{	font-size: 5vw; }
	.img-wrapper:hover p{ bottom: 15%; }
}
	


@media screen and (max-width: 768px) {
	/*------------------------------------
            	$General
	------------------------------------*/
	.left-block > div:nth-of-type(n),
	.right-block > div:nth-of-type(n){ width: 100%; }

	.left-block > div:nth-of-type(2),
	.right-block > div:nth-of-type(2){ margin-bottom: 15px; }
	
	/*------------------------------------
            	$Animation
	-----------------------------------*/
	.img-wrapper p{	font-size: 6vw; bottom: 15%;}
	.img-wrapper:hover p{ bottom: 25%; }
}