@import "../scss/_variable";
@import "../scss/_mixin";

.gel-client-logo {
	@include d-flex();
	@include justify-content-center();
	@include align-items-center();
	img {
		max-width: 100%;
		height: auto;
	}

	.image {
		@include transition(all .3s linear);
	}

	.image-hover {
		@include transition(all .3s linear);
		opacity: 0;
		top: 0;
		left: 0;
		position: absolute;
	}
}

.gel-client-logo-inner {
	position: relative;
}

.gel-client-logo-scaleup-effect {
	&:hover {
		.image {
			@include transform(scale(.8, .8));
			opacity: 0;
		}

		.image-hover {
			opacity: 1;
			@include transition(all .3s linear);
			@include transform(none);
		}
	}
}

.gel-client-logo-moveup-effect {
	.image-hover {
		@include transform(translateY(10px));
	}

	&:hover {
		.image {
			@include transform(translateY(-5px));
			opacity: 0;
		}

		.image-hover {
			opacity: 1;
			@include transform(none);
			@include transition(all .3s linear);
		}
	}
}