/* ==========================================================================
   Cards Gallery shortcode style - begin
   ========================================================================== */

.qodef-cards-gallery {
	@include qodefRelativeLayout();
	padding: 10px 0;
	
	.qodef-e-inner {
		@include qodefRelativeLayout();
	}
	
	img {
		position: relative;
		display: block;
		box-shadow: $box-shadow;
	}
	
	.qodef-m-fake-card {
		position: relative;
		display: block;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	
	.qodef-m-card {
		position: absolute;
		transition: all .15s ease;
		
		&.qodef-animating {
			transition: all 1s cubic-bezier(.19, 1, .22, 1);
			pointer-events: none;
		}
		
		&.qodef-animating-siblings {
			transition: all .6s cubic-bezier(0, 0, 0, 1);
			pointer-events: none;
		}
	}
	
	&.qodef-orientation--left .qodef-m-card {
		left: 0;
		will-change: transform;
		
		&.qodef-out {
			transform: translateX(-100%);
		}
		
		&:nth-last-child(6) {
			transform: scale(.5) translateX(80%);
		}
		
		&:nth-last-child(5) {
			transform: scale(.6) translateX(54%);
		}
		
		&:nth-last-child(4) {
			transform: scale(.7) translateX(35%);
		}
		
		&:nth-last-child(3) {
			transform: scale(.8) translateX(21%);
		}
		
		&:nth-last-child(2) {
			transform: scale(.9) translateX(9.2%);
		}
		
		&:not(:last-of-type) {
			cursor: pointer;
		}
		
		&:not(:last-of-type):not(.active):hover {
			margin-left: 10px !important;
		}
	}
	
	&.qodef-orientation--right .qodef-m-card {
		right: 0;
		will-change: transform;
		
		&.qodef-out {
			transform: translateX(100%);
		}
		
		&:nth-last-child(6) {
			transform: scale(.5) translateX(-80%);
		}
		
		&:nth-last-child(5) {
			transform: scale(.6) translateX(-54%);
		}
		
		&:nth-last-child(4) {
			transform: scale(.7) translateX(-35%);
		}
		
		&:nth-last-child(3) {
			transform: scale(.8) translateX(-21%);
		}
		
		&:nth-last-child(2) {
			transform: scale(.9) translateX(-9.2%);
		}
		
		&:not(:last-of-type) {
			cursor: pointer;
		}
		
		&:not(:last-of-type):not(.active):hover {
			margin-right: 10px !important;
		}
	}
	
	.no-touch &.qodef-animation--bundle {
		
		img {
			visibility: hidden;
		}
		
		&.qodef-orientation--right.qodef-appeared {
			@include keyframes(qodefCardAppearFromRight) {
				0% {
					transform: translate3d(100%, 0, 0);
					opacity: 0;
					visibility: visible;
				}
				
				30% {
					opacity: 1;
					visibility: visible;
				}
				
				100% {
					visibility: visible;
					transform: translate3d(0, 0, 0);
				}
			}
			
			img {
				animation: qodefCardAppearFromRight 1s cubic-bezier(.19, 1, .22, 1) forwards;
			}
			
			.qodef-m-card {
				@for $i from 1 through 8 {
					&:nth-child(#{$i}) {
						img:not(.qodef-animation-done) {
							animation-delay: $i * .2s;
						}
					}
				}
			}
		}
		
		&.qodef-orientation--left.qodef-appeared {
			@include keyframes(qodefCardAppearFromLeft) {
				0% {
					visibility: visible;
					opacity: 0;
					transform: translate3d(-100%, 0, 0);
				}
				
				30% {
					visibility: visible;
					opacity: 1;
				}
				
				100% {
					visibility: visible;
					transform: translate3d(0, 0, 0);
				}
			}
			
			img {
				animation: qodefCardAppearFromLeft 1s cubic-bezier(.19, 1, .22, 1) forwards;
			}
			
			.qodef-m-card {
				@for $i from 1 through 8 {
					&:nth-child(#{$i}) {
						img:not(.qodef-animation-done) {
							animation-delay: $i * .2s;
						}
					}
				}
			}
		}
	}
}

/* ==========================================================================
   Cards Gallery shortcode style - begin
   ========================================================================== */