@import "prefixer.less";

.cl-ib {
	display: inline-block;
	vertical-align: top;
	position: relative;
	word-wrap: normal;
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	&-h {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		background-color: inherit;
		.transition-property(none);
		.transform-origin(0 0);
	}
	&-image,
	&-content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	&-image {
		-webkit-background-size: cover;
		background-size: cover;
		background-position: 50% 50%;
		img {
			display: none;
		}
	}
	&-content {
		z-index: 2;
		text-align: center;
		padding: 10%;
	}
	&.align_left &-content {
		text-align: left;
	}
	&.align_right &-content {
		text-align: right;
	}
	&-title {
		line-height: 1.4;
		padding: 0 !important;
		margin: 0 !important;
		color: inherit !important;

		&.size_tiny {
			font-size: 14px;
		}
		&.size_small {
			font-size: 16px;
		}
		&.size_medium {
			font-size: 20px;
		}
		&.size_large {
			font-size: 24px;
		}
		&.size_huge {
			font-size: 28px;
		}
	}
	&-desc {
		font-size: 13px;
		line-height: 1.5;
		margin-top: 15px;
	}

	// Animation Type: Melete
	&.animation_melete {
		.cl-ib-image {
			.transition-duration(500ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		.cl-ib-content {
			top: 50%;
			bottom: auto;
			opacity: 0;
			.transform(translateY(-50%) scale(0.2));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				opacity: 0.1;
				.scale(4);
			}
			.cl-ib-content {
				opacity: 1;
				.transform(translateY(-50%) scale(1));
			}
		}
	}

	// Animation Type: Soter
	&.animation_soter {
		.cl-ib-image {
			z-index: 1;
			border-radius: 50%;
			.transform(scale(0.3));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, border-radius;
			transition-property: transform, border-radius;
		}
		&.ratio_2x1 .cl-ib-image {
			top: -50%;
			bottom: -50%;
			.transform-origin(90% 50%);
		}
		&.ratio_3x2 .cl-ib-image {
			top: -25%;
			bottom: -25%;
			.transform-origin(90% 66%);
		}
		&.ratio_4x3 .cl-ib-image {
			top: -16.67%;
			bottom: -16.67%;
			.transform-origin(90% 72%);
		}
		&.ratio_1x1 .cl-ib-image {
			.transform-origin(90% 90%);
		}
		&.ratio_3x4 .cl-ib-image {
			left: -12.5%;
			right: -12.5%;
			.transform(scale(0.24));
			.transform-origin(79.5% 92.5%);
		}
		&.ratio_2x3 .cl-ib-image {
			left: -25%;
			right: -25%;
			.transform(scale(0.2));
			.transform-origin(73.5% 94%);
		}
		&.ratio_1x2 .cl-ib-image {
			left: -50%;
			right: -50%;
			.transform(scale(0.15));
			.transform-origin(66.5% 95.7%);
		}
		.cl-ib-content {
			z-index: 0;
			right: 33%;
			opacity: 1;
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				border-radius: 0;
				.transform(scale(1.01));
			}
			.cl-ib-content {
				opacity: 0;
				.transform(translate3d(-40%, -40%, 0) scale(2));
			}
		}
	}

	// Animation Type: Phorcys
	&.animation_phorcys {
		.cl-ib-image {
			bottom: -10%;
			.transform(translateY(0));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		.cl-ib-content {
			top: auto;
			padding-top: 20% !important;
		}
		.cl-ib-content:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(transparent 0%, rgba(30, 30, 30, 0.8) 100%) repeat-x rgba(30, 30, 30, 0);
			.transition-property(opacity);
			.transition-duration(300ms);
		}
		.cl-ib-content-h {
			position: relative;
		}
		.cl-ib-title {
			color: #fff !important;
			.transition-property(color);
			.transition-duration(300ms);
		}
		.cl-ib-desc {
			position: relative;
			opacity: 0;
			line-height: 0;
			margin-top: 0;
			.transition-duration(300ms);
			-webkit-transition-property: opacity, line-height, margin;
			transition-property: opacity, line-height, margin;
		}
		&.hover {
			.cl-ib-image {
				opacity: 0.15;
				.transform(translateY(-8%));
			}
			.cl-ib-content:before {
				opacity: 0;
			}
			.cl-ib-title {
				color: inherit !important;
			}
			.cl-ib-desc {
				opacity: 0.75;
				line-height: 1.5;
				margin-top: 15px;
			}
		}
	}

	// Animation Type: Aidos
	&.animation_aidos {
		.cl-ib-h {
			background-color: inherit;
		}
		.cl-ib-image {
			background-color: inherit;
			.transform(translateX(0) scale(1.01));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform;
			transition-property: transform;
		}
		.cl-ib-content {
			right: auto;
			width: 50%;
			background-color: inherit;
			.transform(translateX(-100%));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform;
			transition-property: transform;
		}
		.cl-ib-content:before {
			content: '';
			display: block;
			position: absolute;
			top: 50%;
			right: 0;
			height: 40px;
			width: 40px;
			margin: -20px 0 0 -20px;
			background-color: inherit;
			.transform(translateX(-10px) rotate(45deg));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform;
			transition-property: transform;
		}
		.cl-ib-content-h {
			position: relative;
		}
		.cl-ib-title {
			opacity: 0;
			.transform(translateX(-100px));
			.transition-duration(400ms);
			.transition-delay(100ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		.cl-ib-desc {
			opacity: 0;
			.transform(translateX(-100px));
			.transition-duration(400ms);
			.transition-delay(200ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				.transform(translateX(25%) scale(1.01));
			}
			.cl-ib-content {
				.transform(translateX(0));
			}
			.cl-ib-content:before {
				.transform(translateX(15px) rotate(45deg));
			}
			.cl-ib-title {
				opacity: 1;
				.transform(translateX(0));
			}
			.cl-ib-desc {
				opacity: 0.75;
				.transform(translateX(0));
			}
		}
	}

	// Animation Type: Caeros
	&.animation_caeros {
		.cl-ib-image {
			background-color: inherit;
			.transform(translateY(0));
			.transform-origin(50% 0);
			.transition-duration(300ms);
			.transition-timing-function(linear);
		}
		.cl-ib-image:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: inherit;
			opacity: 0.25;
			.transition-property(opacity);
			.transition-duration(400ms);
		}
		.cl-ib-title {
			text-align: center;
			.transform(translateY(30px));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform;
			transition-property: transform;
		}
		.cl-ib-desc {
			opacity: 0;
			text-align: center;
			.scale(0.7);
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				.scale(1.3);
				.transition-duration(7s);
			}
			.cl-ib-image:after {
				opacity: 0.75;
			}
			.cl-ib-title {
				.transform(translateY(0));
			}
			.cl-ib-desc {
				opacity: 0.75;
				.scale(1);
			}
		}
	}

	// Animation Type: Hebe
	&.animation_hebe {
		.cl-ib-image {
			background-color: inherit;
			.scale(1.1);
			.transition-duration(500ms);
		}
		.cl-ib-image:before,
		.cl-ib-image:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: inherit;
			opacity: 0.3;
			.transform(translateY(100%));
			.transition-duration(500ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		.cl-ib-image:after {
			.transform(translateY(-100%));
		}
		.cl-ib-content {
			top: 50%;
			bottom: auto;
			.transform(translateY(-50%));
		}
		.cl-ib-title {
			opacity: 0;
			.transform(translateY(-20px));
			.transition-duration(600ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		.cl-ib-desc {
			opacity: 0;
			.transform(translateY(20px));
			.transition-duration(600ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				.scale(1);
			}
			.cl-ib-image:before,
			.cl-ib-image:after {
				opacity: 0.6;
				.transform(translateY(0));
			}
			.cl-ib-title {
				opacity: 1;
				.transform(translateY(0));
			}
			.cl-ib-desc {
				opacity: 0.75;
				.transform(translateY(0));
			}
		}
	}

	// Animation Type: Aphelia
	&.animation_aphelia {
		.cl-ib-image {
			opacity: 0.25;
			-webkit-filter: grayscale(1);
			filter: grayscale(1);
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-filter, opacity;
			transition-property: filter, opacity;
		}
		.cl-ib-content {
			top: 50%;
			bottom: auto;
			.transform(translateY(-50%));
		}
		.cl-ib-title {
			opacity: 1;
			.transform(translateY(0) scale(1));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		.cl-ib-desc {
			opacity: 0.75;
			.transform(translateY(0) scale(1));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				opacity: 1;
				-webkit-filter: grayscale(0);
				filter: grayscale(0);
			}
			.cl-ib-title {
				opacity: 0;
				.transform(translateY(-40px) scale(0.8));
			}
			.cl-ib-desc {
				opacity: 0;
				.transform(translateY(40px) scale(0.8));
			}
		}
	}

	// Animation Type: Nike
	&.animation_nike {
		.cl-ib-image {
			-webkit-filter: grayscale(1);
			filter: grayscale(1);
			.transform(translateY(25%));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform, -webkit-filter;
			transition-property: transform, filter;
		}
		.cl-ib-h:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 50%;
			background-color: inherit;
			.transform(translateY(0));
			.transition-duration(400ms);
			-webkit-transition-property: -webkit-transform;
			transition-property: transform;
		}
		.cl-ib-content {
			opacity: 1;
			.transition-duration(250ms);
			-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
		}
		&.hover {
			.cl-ib-image {
				-webkit-filter: grayscale(0);
				filter: grayscale(0);
				.transform(translateY(0));
			}
			.cl-ib-h:after {
				.transform(translateY(-100%));
			}
			.cl-ib-content {
				opacity: 0;
				.transform(translateY(-40px));
			}
		}
	}
}