/* Imports */
@import '../_variables.css';


/* Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	width: 69%;
	height: 100%;
	margin: 64px auto 64px auto;
	padding: 0 0 0 0;
}

body div.gallery {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

body div.gallery div img {
	height: 250px;
	transform: scale(1.0);
	transition: transform 0.4s ease;
}

body div div div div.photo_title {
	position: absolute;
	bottom: 6px;
	left: 20px;
	opacity: 0.0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

body div div div.transparent-box {
	height: 250px;
	background-color: #000000;
	position: absolute;
	top: 0;
	left: 0;
}

body div div.image_box {
	box-sizing: content-box;
	margin: 10px;
	height: 250px;  
	overflow: hidden;
	display: inline-block;
	color: white;
	position: relative;
	background-color: #000000;
}

body div div a {
	text-decoration: none;
	color: #FFFFFF;
}

body div div.image_box:hover img { 
	transform: scale(1.2);
	opacity: 0.4;
	transition: 0.4s;
}

body div div.image_box:hover .transparent-box {
	background-color:#000000;
}

body div div.image_box:hover .photo_title {
	transform: translateY(-8px);
	opacity: 1.0;
}

body div div.image_box:hover {
	cursor: pointer;
}

body div div div div.photo_title > p:nth-child(2) {
	font-size: 0.8em;
}


@media (max-width: 960px) {
	body {
		width: 80%;
	}
}