/*---------------------------------------------------------------------------------
Pure CSS custom vertical slider - Credits : jerome@vadon.fr
---------------------------------------------------------------------------------*/

#flg-vertical-banner {
	--flgvb-width: 300px;
	--flgvb-height: 400px;
	--flgvb-col: 3;
	--flgimg-height: 750px;
	* { margin: 0; padding: 0; box-sizing: border-box; }
	@media (max-width: 767.98px){
		width: var(--flgvb-width);
		height: calc(var(--flgvb-height) / 1.5);
	}
	@media (min-width: 768px) {
		width: calc(60px + var( --flgvb-width));
		height: var( --flgvb-height);
	}
	overflow: hidden;
	margin: 0 auto;
}

.flg-wrapper {
	display:flex;
	flex-direction: row;
	@media (max-width: 767.98px){
		width: var( --flgvb-width);
		height: var( --flgvb-height);
	}
	@media (min-width: 768px) {
		width: calc(60px + var( --flgvb-width));
		height: var( --flgvb-height);
		transform: rotate(4deg);
	}
}

.flg-banner-wrapper {
	width: calc(var( --flgvb-width) / var(--flgvb-col));

}

.flg-banner-wrapper img {
	display: block;
	width: calc(var( --flgvb-width) / var(--flgvb-col));
	height: var( --flgimg-height);
}

.banner-1 .first-vert {
	animation: bannermove-up 18s linear infinite;
}
.banner-2 .first-vert {
	animation: bannermove-down 24s linear infinite;
}
.banner-3 .first-vert {
	animation: bannermove-up 13s linear infinite;
}

.banner-mask {
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 100%);
	position: relative;
	width: 100%;
	height: 100%;
	z-index:10;
}

@keyframes bannermove-up {
	0%   {margin-top: calc(-1 * var(--flgvb-height));}
	100% {margin-top: calc(-1 * (var(--flgvb-height) + var(--flgimg-height)));}
}

@keyframes bannermove-down {
	0%   { margin-top: calc(-1 * (var(--flgvb-height) + var(--flgimg-height))); }
	100% { margin-top: calc(-1 * var(--flgvb-height)); }
	--flgimg-height
}