@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------------------------------- */
/* Logo & Animation Stuff: */
/* ------------------------------------------------------------------------- */

#logo img {
	animation: spinner 3s infinite linear;
	#margin:auto;
	#margin-left:-250px; /* Fix centering */
	margin-left:-370px; /* Fix centering */
}

/* https://css-tricks.com/how-css-perspective-works/ */
/* CSS3 rotate3d animation repeating */
/* https://stackoverflow.com/questions/19706749/css3-rotate3d-animation-repeating */
@keyframes spinner {
	from { transform: translateX(120px) rotateY(0deg); }
	to { transform: translateX(120px) rotateY(360deg); }
}

/* ------------------------------------------------------------------------- */
/* 2x+ Image Overlay Stuff */
/* ------------------------------------------------------------------------- */

#logo {
	#border-top:1px solid Black; /* Debug */
	#border-bottom:1px solid Black; /* Debug */
	width:100%;
	height:500px;
	position: relative; /* Parent */
}
#logo img {
	#width:100%;
	max-width:500px;
	#max-height:500px; /* Don't really need this, as is already on container. */
	position:absolute; /* Child */
	#left:50%;
}

/* ------------------------------------------------------------------------- */
/* Gallery-Wide (hover state only): */
/* ------------------------------------------------------------------------- */

.item:hover {
	#opacity:1;
	/* Change background image opacity */
	/* https://stackoverflow.com/questions/12605908/change-background-image-opacity */
	background-color: rgba(255, 255, 255, 0.25);
	background-blend-mode: lighten;
}
.item:hover .text {
	color:White;
	background-color:Black;
	display:block;
	width:100%;
	padding:50px;
	opacity:0.7;
}