html, body {
	font-family: 'Barlow', sans-serif;
	vertical-align: baseline;
	color: rgba(0,0,0,0.87); /*#697d89; /* Resene Lynch B60-023-238 */
	-webkit-font-smoothing: antialiased;
	margin:0;
	padding:0;
	font-size: 16px;
    line-height: 24px;
	background: #f6f7f7;
}

header {
	position: fixed;
	width: 100%;
	top: 0px;
	height: 48px;
	background: #fff;
	overflow: hidden;
	z-index: 10;
}
footer {
	width: 100%;
	height: 48px;
	background: #fff;
	overflow: hidden;
}

header nav, footer nav {
	font-family: 'Barlow Condensed', sans-serif;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	margin: 0px 96px;
	line-height: 48px;
}
header nav section, footer nav section {
	white-space: nowrap;
	text-transform: uppercase;
}
header nav section:last-child {
	text-align: left;
	font-weight: 600;
}
header nav section:last-child:after {
	content: '\2022';
	padding: 0px 7px;
}
header nav section:first-child {
	margin-left: auto;
	text-align: right;	
}
header nav section span, header nav section a.stereo {
	color: #fff;
	background: #e51c3a;
	padding: 2px 7px 3px 7px;
	border-radius: 3px;
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
	margin-left: 14px;
	text-decoration: none;
}
header nav section a.stereo:hover {
	filter: grayscale(100%);
	/*background: #697d89;*/
	/*opacity: 0.8;*/
}
header sitemap {
	background-color: #e51c3a;
	/*
	background-image: url(/images/brendan.jpg);
	background-size: cover;
	background-position: center;
	background-blend-mode:soft-light;
	*/
	position: fixed;
	display: none;
	top: 48px;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
}
header sitemap::before {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;  
	opacity: .2; 
	z-index: -1;
	background: url(/images/brendan.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
header sitemap ul {
	list-style: none;
	margin: 0;
	padding: 24px;
}
header sitemap ul li.category {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 400;
	font-size: 45px;
	line-height: 48px;
	margin-top: 24px;
}
header sitemap ul li.subcategory {
	font-size: 24px;
	line-height: 48px;
}
header sitemap ul li a {
	text-decoration: none;
	color: #fff;
}
header sitemap ul li a:hover {
	color: #333;
}
header sitemap.home {
	display: block;
}

h1 {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 45px;
    line-height: 48px;
	margin-bottom: 10px;
}

main {
	font-weight: 400;
	font-style: normal;
	margin-top: 48px;
}
main img {
	position: relative;
	width: 100%;
	max-width: 100%;
	background-color: #333;
	max-height: calc(100vh - 48px);
	object-fit: cover; /* default */
	z-index: 2;
}
main article {
	margin: 48px 96px 96px 96px;
}
main article img {
	width: auto;
}

main nav {
	position: fixed;
	margin-top: 64px;
	right: 96px;
	width: 260px;
	border: 2px solid rgba(0,0,0,0.87);
	z-index: 1;
}
main nav ul {
	list-style: none;
	padding: 0 1.5em;
}
main nav ul li {
	padding-bottom: 16px;
}
main nav ul li:last-child {
	padding-bottom: 0px;
}
main nav ul li a {
	line-height: 24px;
	text-decoration: none;
	color: #333;
}

#drawer {
	transition: max-height 0.25s ease-out;
	overflow: hidden;
	margin: -24px 0px 24px 24px;
}

#drawer:not(:target) {
	max-height: 0px;
	padding-top: 0px;
}
#drawer:target {
	max-height: 100vh; /* max drawer content size */
	padding-top: 48px;
	transition: max-height 0.25s ease-in;
}

aside {
	margin: 24px 0px 24px 48px;
	padding: 48px 0px;
}

gallery {
	display: block;
	margin: 0px 0px 24px 0px;
	padding: 24px 0px;
	width: 100%;
}

gallery a {
	margin: 0px;
	padding: 0px;
}

modal {
	position: fixed;
	display: none;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color:rgba(255, 255, 255, 0.9);
	z-index: 100;
	padding: 0px 0px 45px 0px;
}

modal img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

modal prev {
	width: 50vw;
	line-height: 45px;
	position: absolute;
	padding: 0px 15px;
	left:0;
	bottom: 0;
	background:#e51c3a;
	vertical-align: middle;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
}

modal next {
	width: 50vw;
	line-height: 45px;
	position: absolute;
	padding: 0px 15px;
	right:0;
	bottom: 0;
	background:#e51c3a;
	vertical-align: middle;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
}

.thumbnail {
	width: 21vw;
}

@media screen and (max-width:1023px) {
	header nav {
		margin: 0px 24px;
		flex-direction: column;
	}
	header nav section:first-child:after {
		display: none;
	}
	main article {
		margin: 24px 24px;
	}
	drawer {
		order: 1;
	}
	footer nav {
		margin: 0px 24px;
	}

}

/* iPhone X */
@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
	and (-webkit-device-pixel-ratio : 3) { }

/* iPhone 6/6s/7/8 */
@media only screen
    and (device-width : 375px)
    and (device-height : 667px)
	and (-webkit-device-pixel-ratio : 2) { }

/* iPhone 6/6s/7/8 Plus */
@media only screen
    and (device-width : 414px)
    and (device-height : 736px)
	and (-webkit-device-pixel-ratio : 3) { }