body, h1 {
	
	font-size: 15px;
	font-family: 'Karla';

}

header {
	
	padding: 2em;

}

header img {
	
	padding: 0 1em 1em 1em;
	
}

header h1 * {
	
	display: inline-block;
	vertical-align: middle;

}

.meta {
	
	color: #909090;

}

a[href] {
	
	text-decoration: none;

}

.aspect {
	
	align-items: center;
	background-size: cover;
	
}

.aspect > div {

	width: 100%;
	
}

main {
	
	color: #fff;

}

main.row > * {
	
	--width: 1/5;

}

@media (max-width: 2400px) {
	
	main.row > * {
		
		--width: 1/4;
	
	}
	
}

@media (max-width: 1800px) {
	
	main.row > * {
		
		--width: 1/3;
	
	}
	
}

@media (max-width: 1200px) {
	
	main.row > * {
		
		--width: 1/2;
	
	}
	
}

.modal {
	
	overflow: hidden;

}

.modal .bg {
	
	z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	transition: all .3s ease-in-out;
	
}

.modal:hover .bg {

	opacity: 0;
	top: -2em;
	right: -2em;
	bottom: -2em;
	left: -2em;

}

.modal .aspect > div {
	
	transform: scale(2);
	opacity: 0;
	transition: all .2s ease-in-out;

}

.modal:hover .aspect > div {
	
	transform: scale(1);
	opacity: 1;

}

footer {
	
	position: absolute;
	bottom: 1em;
	z-index: 1;
	padding: 1em;

}

.overlay {
	
	background: rgba(0, 0, 0, .1);
	text-align: right;
	font-size: 0;
	
}

.overlay .content {
	
// 	margin-left: 50%;
	background: #fff;
	padding: 2em 5em 5em 5em;
	width: 950px;
	max-width: 100%;
	display: inline-block;
	font-size: 1rem;

}

.overlay .close {
	
	width: 2rem;
	right: 1rem;
	height: 2rem;
	font-size: 0;
	background: #fff;
	color: #000;
	text-align: center;
	top: 1rem;
	
}

.overlay .close:after {
	
	font-size: 1rem;
	content: '╳';
	line-height: 2;
	
}

.overlay .slider-wrap {
	
	margin: 0;
	position: fixed;
	background: #fff;
	bottom: 0;
	height: 100% !important;

}

