@charset "utf-8";
/* CSS Document */

::selection      { color: #fff; background: #55d5ac;}
::-moz-selection { color: #fff; background: #55d5ac;}

::-webkit-scrollbar {
	width: 15px;
	background: #f7f7f7;
}
::-webkit-scrollbar-thumb {
	height: 100px;
	background: #ddd;
}

figure {
}
figure:first-child {
	margin-left: 0;
}


.transform01 {
	-webkit-transform: none;
	transform:  none;
	-webkit-transition:none;
	transition: none;
}
figure:hover .transform01 {
	-webkit-transform: none;
	transform: none;
}


@media (min-width: 768px) {
	figure:hover .transform01 {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

	.transform01 {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
	
}

.transform02 {
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

figure:hover .transform02 {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
}






figure h3 {
	padding: 100px 0 5px;
	color: #fff;
	font-size: 24px;
	text-align: center;
	/*font-family: 'Didact Gothic', sans-serif;*/
	font-weight: 600;
}
figure h4 {
	padding: 100px 0 5px;
	color: #fff;
	font-size: 24px;
	text-align: center;
	/*font-family: 'Didact Gothic', sans-serif;*/
	font-weight: 600;
}

figure p {
	color: #fff;
	text-align: center;
	font-family: 'Didact Gothic', sans-serif;
	font-weight: 400;
}



/* Effect 01 */
#sample01 figure {
	position: relative;
	overflow: hidden;
}
#sample01 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	-webkit-transition: .3s;
	transition: .3s;
	/*opacity: 0;*/
}
#sample01 figure:hover figcaption {
	opacity: 1;
	background: rgba(0,0,0,.6);
}

	
/* Effect 02 */
#sample02 figure {
	position: relative;
	overflow: hidden;
}
#sample02 figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
#sample02 figure:hover figcaption {
	top: 0;
	left: 0;
}



/* Effect 02-2 */
#sample02-2 figure {
	position: relative;
	overflow: hidden;
}
#sample02-2 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.4);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
#sample02-2 figure:hover figcaption {
	top: -100%;
	left: 0;
}



/* Effect 03 */
#sample03 figure {
	position: relative;
	overflow: hidden;
}
#sample03 figcaption {
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
#sample03 figure:hover figcaption {
	top: 0;
	left: 0;
}


/* Effect 04 */
#sample04 figure {
	position: relative;
	overflow: hidden;
}
#sample04 figcaption {
	position: absolute;
	top: -100%;
	left: -100%;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
#sample04 figure:hover figcaption {
	top: 0;
	left: 0;
}


/* Effect 05 */
#sample05 figure {
	position: relative;
	overflow: hidden;
}
#sample05 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transform: rotate(90deg) scale(0);
	transform: rotate(90deg) scale(0);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
#sample05 figure:hover figcaption {
	-webkit-transform: rotate(360deg) scale(1);
	transform: rotate(360deg) scale(1);
	opacity: 1;
}


/* Effect 06 */
#sample06 figure {
	position: relative;
	overflow: hidden;
}
#sample06 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transform: rotate(90deg) scale(3);
	transform: rotate(90deg) scale(3);
	-webkit-transition: .3s;
	transition: .3s;
	/*opacity: 0;*/
}
#sample06 figure:hover figcaption {
	-webkit-transform: rotate(360deg) scale(1);
	transform: rotate(360deg) scale(1);
	opacity: 1;
}



		/* Effect 07 */
		#sample07 figure {
			position: relative;
			overflow: hidden;
		}
		#sample07 figcaption {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.6);
			-webkit-transform: rotateX(-180deg);
			transform: rotateX(-180deg);
			-webkit-transition: .5s;
			transition: .5s;
			/*opacity: 0;*/
		}
		#sample07 figure:hover figcaption {
			-webkit-transform: rotateX(0);
			transform: rotateX(0);
			opacity: 1;
		}



		/* Effect 08 */
		#sample08 figure {
			position: relative;
			overflow: hidden;
		}
		#sample08 figcaption {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.6);
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
			-webkit-transition: .5s;
			transition: .5s;
			/*opacity: 0;*/
		}
		#sample08 figure:hover figcaption {
			-webkit-transform: rotateY(0);
			transform: rotateY(0);
			opacity: 1;
		}



		/* Effect 09 */
		#sample09 figure {
			position: relative;
			overflow: hidden;
		}
		#sample09 figcaption {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.6);
			-webkit-transform: rotateY(-90deg) rotateX(-90deg);
			transform: rotateY(-90deg) rotateX(-90deg);
			-webkit-transition: .5s;
			transition: .5s;
			/*opacity: 0;*/
		}
		#sample09 figure:hover figcaption {
			-webkit-transform: rotateY(0) rotateX(0);
			transform: rotateY(0) rotateX(0);
			opacity: 1;
		}



/* Effect 10 */
#sample10 figure {
	position: relative;
	overflow: hidden;
}
#sample10 figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	/*opacity: 0;*/
}
#sample10 figcaption h3,
#sample10 figcaption p {
	position: absolute;
	left: -100%;
	width: 260px;
	padding: 0;
	text-align: left;
	-webkit-transition: .3s;
	transition: .3s;
}
#sample10 figcaption h3 {
	top: 30px;
}
#sample10 figcaption p {
	top: 75px;
	font-size: 12px;
}
#sample10 figure:hover figcaption {
	opacity: 1;
}
#sample10 figure:hover figcaption h3,
#sample10 figure:hover figcaption p {
	left: 20px;
}
#sample10 figure:hover figcaption h3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
#sample10 figure:hover figcaption p {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}



		/* Effect 11 */
		#sample11 figure {
			position: relative;
			-webkit-perspective: 1500px;
			perspective: 1500px;
			-webkit-perspective-origin: 0 50%;
			perspective-origin: 0 50%;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		#sample11 figure div {
			overflow: hidden;
		}
		#sample11 figcaption {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.6);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transform-origin: 0;
			transform-origin: 0;
			-webkit-transform: rotateY(-90deg);
			transform: rotateY(-90deg);
			-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
			transition: transform .4s, opacity .1s .3s;
			opacity: 0;
		}
		#sample11 figcaption h3, #sample11 figcaption p {
			text-align: left;
			-webkit-transition: opacity .3s;
			transition: opacity .3s;
			opacity: 0;
		}
		#sample11 figcaption h3 {
			padding: 30px 20px 0;
		}
		#sample11 figcaption p {
			padding: 10px 20px 0;
			font-size: 12px;
		}
		#sample11 figure:hover figcaption {
			-webkit-transform: rotateY(0);
			transform: rotateY(0);
			-webkit-transition: -webkit-transform .4s, opacity .1s;
			transition: transform .4s, opacity .1s;
			opacity: 1;
		}
		#sample11 figure:hover figcaption h3,
		#sample11 figure:hover figcaption p {
			-webkit-transition-delay: .4s;
			transition-delay: .4s;
			opacity: 1;
		}


		/* Effect 12 */
		#sample12 .figure-inner {
			position: relative;
			-webkit-perspective: 1000;
			perspective: 1000;
			width: 300px;
			height: 200px;
			-webkit-transition: .5s;
			transition: .5s;
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		#sample12 .image,
		#sample12 figcaption {
			position: absolute;
			width: 300px;
			height: 200px;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}
		#sample12 .image {
			z-index: 2;
		}
		#sample12 figcaption {
			padding: 10px 20px 20px;
			background: #fff;
			border: 2px solid #666;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		#sample12 figcaption h3,
		#sample12 figcaption p {
			color: #555;
		}
		#sample12 figure:hover .figure-inner,
		#sample12 figcaption { 
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}



		/* Effect 13 */
		#sample13 figure {
			position: relative;
			overflow: hidden;
		}
		#sample13 figcaption {
			position: absolute;
			bottom: -60px;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 60px;
			background: rgba(0,0,0,.6);
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample13 figcaption h3 {
			padding: 5px 0 0;
			font-size: 18px;
		}
		#sample13 figcaption p {
			font-size: 13px;
		}
		#sample13 figure:hover figcaption {
			bottom: 0;
		}



/* Effect 14 */
#sample14 figure {
	position: relative;
	overflow: hidden; margin-bottom:30px;
}
#sample14 figcaption {
	position: absolute;
	bottom: 30px;
	right: 0px;
	z-index: 2;
	width: 100%;
	height: 70px;
	background: rgba(0,0,0,.6);
	-webkit-transition:none;
	transition:  none;
}
#sample14 figcaption h3 {
	padding: 15px 0 0;
	font-size: 18px;
	margin-right: 0px;
}

#sample14 figcaption h4 {
	padding: 15px 0 0;
	font-size: 18px;
	margin-right: -30px;
}

#sample14 figcaption p {
	margin-right: -30px;
	font-size: 13px;
}
#sample14 figure:hover figcaption {
	right: 0px;
}





@media (min-width: 768px) {
#sample14 figcaption h3 {
	padding: 15px 0 0;
	font-size: 18px;
	margin-right: -30px;
}
	
	#sample14 figcaption {
	position: absolute;
	bottom: 30px;
	right: 40px;
	z-index: 2;
	width: 100%;
	height: 70px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
}

	
#sample14 figure:hover figcaption {
	right: 100%;
}	
	
}







/* Effect 14-2 */
#sample14-2 figure {
	position: relative;
	overflow: hidden;
}
#sample14-2 figcaption {
	position: absolute;
	bottom: 30px;
	right: 40px;
	z-index: 2;
	width: 100%;
	height: 70px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
}
#sample14-2 figcaption h3 {
	padding: 15px 0 0;
	font-size: 18px;
	margin-right: -30px;
}
#sample14-2 figcaption p {
	margin-right: -30px;
	font-size: 13px;
}
/*#sample14-2 figure:hover figcaption {
	right: 100%;
}*/



		/* Effect 15 */
		#sample15 figure {
			position: relative;
			overflow: hidden;
		}
		#sample15 figcaption h3,
		#sample15 figcaption p {
			position: absolute;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 0;
			background: rgba(0,0,0,.6);
			color: #fff;
			text-align: center;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample15 figcaption h3 {
			top: -40px;
			font-size: 18px;
		}
		#sample15 figcaption p {
			bottom: -40px;
			font-size: 13px;
		}
		#sample15 figure:hover figcaption h3 {
			top: 0;
		}
		#sample15 figure:hover figcaption p {
			bottom: 0;
		}



		/* Effect 16 */
		#sample16 figure {
			position: relative;
			overflow: hidden;
		}
		#sample16 figure img {
			position: relative;
			z-index: 2;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample16 figcaption {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100px;
			background: #46ceb4;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample16 figcaption h3 {
			padding-top: 15px;
		}
		#sample16 figure:hover img {
			-webkit-transform: translateY(-100px);
			transform: translateY(-100px);
		}



		/* Effect 17 */
		#sample17 figure {
			position: relative;
			overflow: hidden;
			background: #46ceb4;
		}
		#sample17 figure img {
			position: relative;
			z-index: 1;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample17 figcaption {
			position: absolute;
			bottom: -70px;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 70px;
			background: #46ceb4;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample17 figcaption h3 {
			padding-top: 15px;
		}
		#sample17 figure:hover img {
			-webkit-transform: translateY(-40px);
			transform: translateY(-40px);
		}
		#sample17 figure:hover figcaption {
			bottom: 0;
			-webkit-transform: translateY(-30px);
			transform: translateY(-30px);
		}



		/* Effect 18 */
		#sample18 figure {
			position: relative;
			overflow: hidden;
			background: #46ceb4;
		}
		#sample18 figure img {
			position: relative;
			z-index: 1;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample18 figcaption {
			position: absolute;
			bottom: 0;
			right: -170px;
			z-index: 2;
			width: 170px;
			height: 100%;
			background: #46ceb4;
			-webkit-transition: .3s;
			transition: .3s;
		}
		#sample18 figcaption h3 {
			padding: 70px 0 5px 15px;
			font-size: 20px;
			text-align: left;
		}
		#sample18 figcaption p {
			padding-left: 15px;
			text-align: left;
		}
		#sample18 figure:hover img {
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
		}
		#sample18 figure:hover figcaption {
			right: 0;
			-webkit-transform: translateX(-30px);
			transform: translateX(-30px);
		}



		/* Effect 19 */
		#sample19 figure {
			position: relative;
		}
		#sample19 figure img {
			position: relative;
			z-index: 2;
		}
		#sample19 figure h3,
		#sample19 figure p {
			position: absolute;
			bottom: 0;
			left: 10px;
			z-index: 1;
			padding: 0;
			opacity: 0;
			-webkit-transition: .3s;
			transition: .3s;
			color: #555;
			text-align: left;
		}
		#sample19 figure h3 {
			font-size: 18px;
		}
		#sample19 figure:hover h3 {
			bottom: -35px;
			opacity: 1;
		}
		#sample19 figure:hover p {
			bottom: -58px;
			opacity: 1;
		}



		/* Effect 20 */
		#sample20 figure {
			position: relative;
		}
		#sample20 figure img {
			position: relative;
			z-index: 2;
		}
		#sample20 figure h3,
		#sample20 figure p {
			position: absolute;
			z-index: 1;
			opacity: 0;
			padding: 0;
			-webkit-transition: .3s;
			transition: .3s;
			color: #555;
			text-align: left;
		}
		#sample20 figure h3 {
			bottom: -35px;
			left: 0;
			font-size: 18px;
		}
		#sample20 figure p {
			bottom: -33px;
			right: 0;
		}
		#sample20 figure:hover h3 {
			opacity: 1;
		}
		#sample20 figure:hover p {
			opacity: 1;
			-webkit-transition-delay: .3s;
			transition-delay: .3s;
		}