/**
 * @package    mod_geekscrollingbackground
 * @version    1.0.1
 *
 * @copyright  Copyright (C) 2015 - 2018 JoomlaGeek. All Rights Reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 * @author     JoomlaGeek <admin@joomlageek.com>
 * @link       http://www.joomlageek.com
 */

/**
 * Geek Scrolling Image Grid Background
 */

.geek-scrolling-background-wrapper {
	background-color: #484848;
}

.geek-scrolling-background-outer {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.geek-scrolling-background-inner {
	position: relative;
	width: 100%;
	height: 800px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

.geek-background-container {
	width: 100%;
	height: 800px;
	z-index: 0;
}

.geek-background-container,
.geek-background-overlay,
.geek-background-fadeout {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.geek-background-overlay {
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(72, 72, 72, 0) 0%, rgba(72, 72, 72, 0.50) 50%, rgba(72, 72, 72, 0.80) 95%, #484848 100%);
}

.geek-background-fadeout {
	width: 100%;
	height: 100%;
	z-index: 1;
	background: linear-gradient(to right, #484848 0%, rgba(72, 72, 72, 0) 20%, rgba(72, 72, 72, 0) 80%, #484848 100%);
}

@keyframes geekScrollUp {
	from {
		transform: scale(1.25) rotateX(20deg) translateX(-370px) translateY(-20px);
	}
	to {
		transform: scale(1.25) rotateX(25deg) translateX(-370px) translateY(-2800px);
	}
}

@keyframes geekScrollDown {
	from {
		transform: scale(1.25) rotateX(25deg) translateX(-370px) translateY(-2800px);
	}
	to {
		transform: scale(1.25) rotateX(20deg) translateX(-370px) translateY(-20px);
	}
}

.geek-background-grid {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	perspective: 700px;
}

.geek-background-grid .image-grid {
	position: absolute;
	opacity: 1;
	min-width: 3000px;
	height: 100%;
	margin: 0 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	flex-basis: auto;
	flex-grow: 1;
	justify-content: flex-start;
	align-content: flex-start;
	animation-name: geekScrollUp;
	animation-duration: 90s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
}
.geek-background-grid .image-grid.scroll-up {
	animation-name: geekScrollUp;
}
.geek-background-grid .image-grid.scroll-down {
	animation-name: geekScrollDown;
}

.geek-background-grid .image-grid > li {
	list-style: none;
	width: 320px;
	height: 200px;
	margin: 0 0;
	padding: 0;
	overflow: hidden;
}

.geek-background-grid .image-grid > li > img {
	display: block;
	opacity: 1;
	margin: 0;
	padding: 0;
}

.geek-background-grid .image-grid.filter-blur > li > img {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}
.geek-background-grid .image-grid.filter-brightness > li > img {
	-webkit-filter:brightness(200%);
	filter:brightness(200%);
}
.geek-background-grid .image-grid.filter-contrast > li > img {
	-webkit-filter:contrast(200%);
	filter:contrast(200%);
}
.geek-background-grid .image-grid.filter-grayscale > li > img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.geek-background-grid .image-grid.filter-hue_rotate > li > img {
	-webkit-filter:hue-rotate(90deg);
	filter:hue-rotate(90deg);
}
.geek-background-grid .image-grid.filter-invert > li > img {
	-webkit-filter:invert(100%);
	filter:invert(100%);
}
.geek-background-grid .image-grid.filter-saturate > li > img {
	-webkit-filter:saturate(8);
	filter:saturate(8);
}
.geek-background-grid .image-grid.filter-sepia > li > img {
	-webkit-filter:sepia(100%);
	filter:sepia(100%);
}

.geek-foreground-container {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 1;
	display: table;
}

.geek-foreground-container > .inner {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85);
}

/*==========  Responsive  ==========*/
@media (max-width: 1920px) {
	.geek-background-fadeout {
		display: none;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

/* Medium Devices, Desktops - tablet landscape */
@media only screen and (min-width : 992px) and (max-width: 1199px) {
	.geek-scrolling-background-inner,
	.geek-background-container {
		height: 600px;
	}
	.geek-background-grid {
		perspective: 600px;
	}

	@keyframes geekScrollUp {
		from {
			transform: scale(1) rotateX(20deg) translateX(-925px) translateY(-100px);
		}
		to {
			transform: scale(1) rotateX(25deg) translateX(-925px) translateY(-2800px);
		}
	}

	@keyframes geekScrollDown {
		from {
			transform: scale(1) rotateX(25deg) translateX(-925px) translateY(-2800px);
		}
		to {
			transform: scale(1) rotateX(20deg) translateX(-925px) translateY(-100px);
		}
	}
}

/* Small Devices, Tablets - tablet portrait */
@media only screen and (min-width : 768px) and (max-width: 991px) {
	.geek-scrolling-background-inner,
	.geek-background-container {
		height: 600px;
	}
	.geek-background-grid {
		perspective: 600px;
	}

	@keyframes geekScrollUp {
		from {
			transform: scale(0.75) rotateX(20deg) translateX(-1425px) translateY(-260px);
		}
		to {
			transform: scale(0.75) rotateX(25deg) translateX(-1425px) translateY(-2800px);
		}
	}

	@keyframes geekScrollDown {
		from {
			transform: scale(0.75) rotateX(25deg) translateX(-1425px) translateY(-2800px);
		}
		to {
			transform: scale(0.75) rotateX(20deg) translateX(-1425px) translateY(-260px);
		}
	}
}

/* Extra Small Devices, Phones - mobile landscape */
@media only screen and (min-width : 480px) and (max-width: 767px) {
	.geek-scrolling-background-inner,
	.geek-background-container {
		height: 400px;
	}
	.geek-background-grid {
		perspective: 500px;
	}

	@keyframes geekScrollUp {
		from {
			transform: scale(0.75) rotateX(20deg) translateX(-1400px) translateY(-150px);
		}
		to {
			transform: scale(0.75) rotateX(25deg) translateX(-1400px) translateY(-2800px);
		}
	}

	@keyframes geekScrollDown {
		from {
			transform: scale(0.75) rotateX(25deg) translateX(-1400px) translateY(-2800px);
		}
		to {
			transform: scale(0.75) rotateX(20deg) translateX(-1400px) translateY(-150px);
		}
	}
}

/* Custom, iPhone Retina - mobile portrait */
@media only screen and (min-width : 320px) and (max-width: 479px){
	.geek-scrolling-background-inner,
	.geek-background-container {
		height: 400px;
	}
	.geek-background-grid {
		perspective: 500px;
	}

	@keyframes geekScrollUp {
		from {
			transform: scale(0.5) rotateX(20deg) translateX(-2600px) translateY(-480px);
		}
		to {
			transform: scale(0.5) rotateX(25deg) translateX(-2600px) translateY(-2800px);
		}
	}

	@keyframes geekScrollDown {
		from {
			transform: scale(0.5) rotateX(25deg) translateX(-2600px) translateY(-2800px);
		}
		to {
			transform: scale(0.5) rotateX(20deg) translateX(-2600px) translateY(-480px);
		}
	}
}