@import "prefixer.less";

// Buttons
.cl-btn {
	display: inline-block;
	vertical-align: top;
	line-height: 1.5;
	padding: 8px 20px;
	margin: 4px 0;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.1);
}

// Css-based ratios
[class^="cl-"] {
	&[class*=" ratio_"]:before {
		content: '';
		display: block;
	}
	&.ratio_2x1:before {
		padding-top: 50%;
	}
	&.ratio_3x2:before {
		padding-top: 66.6666%;
	}
	&.ratio_4x3:before {
		padding-top: 75%;
	}
	&.ratio_1x1:before {
		padding-top: 100%;
	}
	&.ratio_3x4:before {
		padding-top: 125%;
	}
	&.ratio_2x3:before {
		padding-top: 150%;
	}
	&.ratio_1x2:before {
		padding-top: 200%;
	}
	[class^="cl-"][class*=" ratio_"] > [class$="-h"],
	[class^="cl-"][class*=" ratio_"] > [class*="-h "] {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
}

// Easings
.easing_easeInOutExpo {
	& .cl-flipbox-hh,
	& .cl-flipbox-hhh,
	& .cl-flipbox-front,
	& .cl-flipbox-back,
	& .cl-flipbox-xflank,
	& .cl-flipbox-yflank,
	& .cl-ib-image,
	& .cl-ib-content,
	& .cl-ib-content:before,
	& .cl-ib-content-h,
	& .cl-ib-title,
	& .cl-ib-desc {
		.transition-timing-function(cubic-bezier(1, 0, 0, 1));
	}
}

.easing_easeInOutCirc {
	& .cl-flipbox-hh,
	& .cl-flipbox-hhh,
	& .cl-flipbox-front,
	& .cl-flipbox-back,
	& .cl-flipbox-xflank,
	& .cl-flipbox-yflank,
	& .cl-ib-image,
	& .cl-ib-content,
	& .cl-ib-content:before,
	& .cl-ib-content-h,
	& .cl-ib-title,
	& .cl-ib-desc {
		.transition-timing-function(cubic-bezier(0.785, 0.135, 0.15, 0.86));
	}
}

.easing_easeOutBack {
	& .cl-flipbox-hh,
	& .cl-flipbox-hhh,
	& .cl-flipbox-front,
	& .cl-flipbox-back,
	& .cl-flipbox-xflank,
	& .cl-flipbox-yflank,
	& .cl-ib-image,
	& .cl-ib-content,
	& .cl-ib-content:before,
	& .cl-ib-content-h,
	& .cl-ib-title,
	& .cl-ib-desc {
		.transition-timing-function(cubic-bezier(0.175, 0.885, 0.32, 1.275));
	}
}

// Animations
// Based on https://github.com/daneden/animate.css
.animated_bounceIn,
.animated_fadeIn,
.animated_fadeOut,
.animated_flipInX,
.animated_flipOutX,
.animated_zoomIn {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animated_bounceIn,
.animated_flipInX,
.animated_flipOutX {
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
}

@-webkit-keyframes bounceIn {
	from, 20%, 40%, 60%, 80%, to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
	}
	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		-webkit-transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		-webkit-transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
	}
}

@keyframes bounceIn {
	from, 20%, 40%, 60%, 80%, to {
		animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}
	0% {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	20% {
		transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
		transform: scale3d(.9, .9, .9);
	}
	60% {
		opacity: 1;
		transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
		transform: scale3d(.97, .97, .97);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}

.animated_bounceIn {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.animated_fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.animated_fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}

@-webkit-keyframes flipInX {
	from {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		-webkit-transform: perspective(400px);
	}
}

@keyframes flipInX {
	from {
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		animation-timing-function: ease-in;
	}
	60% {
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		transform: perspective(400px);
	}
}

.animated_flipInX {
	transform-origin: 50% 0%;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	animation-name: flipInX;
}

@-webkit-keyframes flipOutX {
	from {
		-webkit-transform: perspective(400px);
	}
	30% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		opacity: 1;
	}
	to {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		opacity: 0;
	}
}

@keyframes flipOutX {
	from {
		transform: perspective(400px);
	}
	30% {
		transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
		opacity: 1;
	}
	to {
		transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
		opacity: 0;
	}
}

.animated_flipOutX {
	transform-origin: 50% 100%;
	-webkit-animation-name: flipOutX;
	animation-name: flipOutX;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
}

@-webkit-keyframes zoomIn {
	from {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
	}
	50% {
		opacity: 1;
	}
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale3d(.3, .3, .3);
	}
	50% {
		opacity: 1;
	}
}

.animated_zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
}