* {-webkit-backface-visibility: hidden;}
*:hover {outline:none;}

body {
	padding: 5vw 10vw;
	overflow-x:hidden;
}
@keyframes colorwheel {
	from { background: #ffdddd}
	50%  { background: #ddffdd}
	to   { background: #ddddff}
}

h1 {font-size:50px;text-align:center;display:block;position:absolute;top:10px;left:0;width:100%;padding:0;margin:0;color:#666}
.header{width:100%;position:absolute;height:120px;max-height:10vh;left:0;top:0;} 
.footer{width:100%;position:relative;height:60px;max-height:10vh;left:0;bottom:0;margin-top:40px;} 
.footer img {width:100%;height:100%;object-fit:cover;cursor:pointer}
.header img {width:100%;height:100%;object-fit:contain;background: #00b495}
.gallery::before {
	content: '';
	width: 0;
	padding-bottom: 300px;
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}
.gallery > *:first-child {
	grid-row: 1 / 1;
	grid-column: 1 / 1;
}

.gallery {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-auto-rows: 1fr;
	grid-auto-flow: dense;
	margin-bottom:50px;
}
.gallery > div {
	border-radius: 6px;
	overflow:hidden;
	background: white;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
	transition: transform 0.3s;
}

.gallery > div:hover {
	z-index: 1000000;
	border-radius: 4px;
}
.gallery > div > img, .gallery > div > video {
	width:100%;
	height:100%;
	margin: 0;
	object-fit: cover;
}

.gallery > div,.gallery > div > *, .gallery > div > * > * {
	min-width: 0;
	min-height: 0;
	overflow:hidden;
	max-width:100%;
	max-height:300px;
}

.gallery > div {
	display:grid;
	grid-gap: 0;
	grid-template-columns: 10% 60% 20% 10%;
	grid-auto-rows: 80% 20%;
	height: 100%;
	background: #7e6b80;
}

.gallery > div > img, .gallery > div > video {
	grid-column: 1 / span 4;
	grid-row: 1 / span 2;
	z-index: 1;
}
.gallery > div > * {
	color: #ffffcc;
	font-size: 18px;
	-webkit-transform: translate3d(0,0,0);
}
.gallery > div > .text {
	grid-column: 2 / span 2;
	grid-row: 1;
	z-index:10;
	margin-top: 18px;
	line-height: 1.1em;
	hyphens: auto;
}

.gallery > div > .text.small {
	font-size: 0.85em;
}
.gallery > div > .text.big {
	font-size: 2.5em;
}

.gallery > div > .text > span {
}
.gallery > div > .uicon {
	grid-column: 1;
	grid-row: 2;
	height:auto;
	max-width: 100%;
	z-index:11;
}
.gallery > div > .info {
	grid-column: 2;
	grid-row: 2;
	z-index:12;
	line-height: 1em;
}

.gallery > div > .info > .user {
	overflow: visible;
}
.gallery > div > .info a, .gallery > div > .text a {
	color: #ffffcc;
	text-decoration: none;
}

.gallery > div > .serviceicon {
	grid-column: 3;
	grid-row: 2;
	height:auto;
	max-width: 100%;
	z-index: 13;
	margin-top:15%;
	text-align: right;
	cursor: unset !important;
}
.gallery > div > .serviceicon:before {
	font-size: 1.5em !important;
}

.gallery > div:nth-child(3n) {
}

.gallery > div:hover > img {
/* 			object-fit:cover; */
/* 			object-position:50% 0; */
/* 			filter: grayscale(80%) opacity(70%) blur(0.5px); */
	filter: grayscale(80%) opacity(80%);
/* 			filter: grayscale(100%) sepia() hue-rotate(205deg) brightness(90%) saturate(110%) contrast(70%) opacity(70%); */
/* 			filter: sepia() hue-rotate(240deg) brightness(50%) saturate(110%) contrast(70%); */
}

.gallery > div.image > * {display:none;}
.gallery > div.video > * {display:block;}
.gallery > div.video > img {opacity: 0.2;}
.gallery > div:hover > * {display:block;}
.gallery > div.video:hover > :not(video) {display:none;}
.gallery > div > img {display:block !important;}


/* STYLES FOR INVERTING THE hover EFFECT ... */

body.inverted > .gallery > div:hover > img { filter:none }
body.inverted > .gallery > div > img { filter: grayscale(80%) opacity(80%); }
body.inverted > .gallery > div.image > * {display:block;}
body.inverted > .gallery > div.image:hover > * {display:block;}
body.inverted > .gallery > div.image:hover > .text {display:none;}

/* ... INVERTING */


	.gallery > div:hover {
		transform: scale(1.5) !important;
		transform-origin: center;
		
	}
@media(min-width:768px) {
	
	.gallery > div:hover img.fg {display: none}
	.gallery > div.scale2 {
		grid-area: span 2 / span 2;
	}
	.gallery > div.scale2:hover {
		transform: scale(1.5) !important;
		transform-origin: center;
	}

	.gallery > div.scale3 {
		grid-area: 1 / 1 / span 3 / span 3;
	}
	.gallery > div.scale3:hover {
		transform: scale(1) !important;
		transform-origin: top-left;
	}

}