*{box-sizing: border-box;text-rendering: geometricPrecision;}
a{
	color:white;
}
a:hover {
	cursor:pointer;
	color:#90AFC5;
}
body{
	width:100%;
	overflow-x:hidden;
	margin:0;
	font-size:3rem;
}
.colSpan2{
	grid-column-end: span 2;
}
.container{
	width:100%;
	max-height:calc(100vh - 5rem);
	overflow-y:auto;
	margin-top:5rem;
}
.containerWrap{
	display:flex;flex-wrap:wrap;
}
.content{
	background:#2A3132;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	overflow-y:auto;
}
.controls{
	display:flex;
	align-items:flex-end;
}
.controls a{
	text-decoration:none;
}
#galleryWrap {
	display:grid;	
	grid-template-columns: repeat(auto-fill, minmax(15rem,1fr));
	background-color:black;
}
h3 {
	color:#90AFC5;
	margin:0;
	padding:0.5rem;
	font-size:2.3rem;
	position:relative;
	overflow-x:hidden;
	overflow-y:hidden;
}
h3 a:hover{
	color:white;
}

.header {
	top:0;
	position:fixed;
	width:100%;
	height:5rem;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#763626;
	color:white;
	z-index:100;
	padding:2rem;
}
html{
	font-size:62.5%;
	background-color:#2A3132;
	color:#d8d2d2;
}
#imagePreview{
	width:100%;
	height:100%;
	background-size:cover;
	background-position: center;
	overflow:auto;
	bottom:0;
	transition:all 1s;
    image-orientation: from-image; /* Can be changed in the live sample */
}
.popup {
	opacity:0;
	position:absolute;
	height:0;
	width:0;
	z-index:96;
}
.popup.show{
	opacity:1;
	height:calc(100vh - 5rem);
	width:100%;
	position:fixed;
	top:5rem;
	bottom:0;
	left:0;
	right:0;
	margin:auto auto;
	transition: opacity 1s;
}
#popupBackground {
	background-color: #2A3132;
	display: none;
	opacity: 0.8;
	position: fixed;
	z-index: 95;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}
.rowSpan2{
	grid-row-end: span 2;
}
.thumbnail{
	border:0.1rem solid #2A3132;
	min-height:15rem;
	background-size:cover;
	transition: all .2s linear;
	background-position: center;
	filter: grayscale(100%);
    image-orientation: from-image;
	align-self:stretch;
}
.thumbnail:hover {
	border:0.1rem solid #336B87;
	cursor:pointer;
	filter: grayscale(0);
}

.timer{
	width:100%;
	position:absolute;
	background-color:#90AFC5;
	z-index:9999;
	left:0;
	top:5rem;
	height:3px;
	transform:translateX(0);
}
.timer.slide{
	transform:translateX(-100%);
}
.title{
	font-family:'Dancing Script';
white-space:nowrap;
	flex:2;
}
@media (max-width: 500px) {
	.container{
		width:100%;
	}
	.popup.show{
		opacity:1;
		height:calc(100% - 5rem);
		width:100%;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin-top:5rem;
	}
}