@font-face {
    font-family: Anko;
    src: url("AnkoPersonalUse.otf") format("opentype");
}
@font-face {
    font-family: AnkoBold;
    src: url("Anko-PersonalUse-Bold.otf") format("opentype");
}
@font-face {
    font-family: Montreal;
    src: url("fonts/Atsuka Montreal Regular.ttf") format("opentype");
}
@font-face {
    font-family: Montreal;
    src: url("fonts/Atsuka Montreal Bold.ttf") format("opentype");
}

*{ margin: 0; padding: 0; }

body{
	background: #fff;
	line-height: 1.4em;
	max-width: 2500px !important;
	overflow-x: hidden;
}

body{
    font-family: "Cormorant", serif;
    color: #444444;
    font-size: 13pt;
}

a{ text-decoration: none; color: #3368D8; }

a:hover{ text-decoration: underline; color: #3368D8; }

h1, h2, h3{
	font-family: "Cormorant", serif;
	font-weight: 400;
}
h1{
	margin-bottom: 1em;
	font-size: 3.5em;
}
h2{
	font-size: 2.5em;
	margin-top: 2em;
	margin-bottom: 1em;
	text-align: center;
}
h3{
	font-size: 1.5em;
	margin-bottom: .7em;
	font-weight: 700;
}
p, ul, ol{
	margin-bottom: 1em;
	line-height: 1.8em;
	font-family: Arial, sans-serif;
}
body{
}

.action-box .top{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 4em;
}
.action-box .key-info{
	padding-top: .15em;
}
.action-box .image{
}

.buy{
	width: 80%;
	display: grid;
	grid-template-columns: auto auto auto auto;
}
.buy .note{ display: block; display: none !important; }
.buy{ font-size: 1em; vertical-align: middle; }
.buy a{
	line-height: 1.2em;
 	display: inline-block;
	padding: .5em 1.25em; text-decoration: none; color: #fff; font-family: Arial, sans-serif; margin-right: .5em; text-align: center;
 	background: #E22F24;
	height: 2.5em;
    vertical-align: middle;
}
.buy .disabled{  background: #999; }
.buy .price{ display: block; }

.content{
	padding: 3em 0;
	max-width: 1100px;
	margin: 0 auto;
}

.footer{
	color: #eee;
	font-family: arial;
	text-align: center;
	padding-top: 1.25em;
	padding-bottom: 3em;
	font-size: 1em;
	line-height: 1.5em;
	background: #111;
}
.footer img.avatar{
	width: 3em;
	margin-bottom: .5em;
	filter: invert(1);
}

.footer a{ color: #eee; }

.socials{
	padding-top: 1.4em;
	width: 6em;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.static-gallery{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 20px;
}

.details{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.details div{
	background: #666;
	color: #fff;
	padding: 2em 3em;
}

.exhibition{
	display: grid; grid-template-columns: 1fr 3fr; grid-gap: 1.5em;
}
.exhibition p{ padding-right: 3em; }
.exhibition img{ max-width: 100%; }

.toc{ column-count: 3; column-gap: 3em; width: 100%; margin: 0 auto; font-family: arial; line-height: 1.8em; list-style: none; }
.toc strong{ font-weight: 700; }
.toc li{ position: relative; }
.toc .inline-icon{ position: absolute; right: 0; top: 4px; height: 1.2em; opacity: .8; }
.toc li a{ text-decoration: none; color: #444444; }

.text{ width: 80%; margin: 0 auto; }

div.imagery{ height: 41vw; background: url( ../img/DSCF7595.JPG ); background-position: bottom; background-size: 100% auto; max-width: 2600px; margin: 0 auto; }
div.imagery2{ height: 21vw; background: url( ../img/thumbnail/other/DSCF7902_v5.crop.JPG ) !important; background-position: top !important; background-size: 100% auto !important; max-width: 2600px; margin: 0 auto; }


h1.title{ display: inline-block; margin-bottom: .7em; line-height: 1.1em; padding: 0.2em 0; }
h2.subtitle{ margin-top: 0; font-size: 2em; text-align: left; margin-bottom: 1.4em; line-height: 1.1em; }
p.author{ text-align: left; margin-bottom: 1em; }
p.author:before{ content: "Author: "; }



#popup-gallery {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 60px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.85);

}
#popup-gallery #caption {
	padding-top: 8px;
	padding-bottom: 8px;
	white-space: pre-wrap;
	line-height: 1.75em;
}

#loader{ position: absolute; z-index; 0; top: 50%; left: 50%; width: 60px; transform: translate(-50%, -50%); }

#popup-gallery .modal-content {
	/*position: relative;
	margin: auto;
	padding: 0;
	max-width: 90%;
	height: 100vh;
	margin: 0;*/

	z-index: 2;
	width: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#popup-gallery .close {
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 3.5em;
	font-weight: bold;
	z-index: 10;
}
#popup-gallery .close:hover,
#popup-gallery .close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

#popup-gallery .bigimg{
	max-width: 100%;
	max-height: 100%;
	text-align: center;
}
#popup-gallery .bigimg img{
	max-height: 88vh;
	max-width: 100%;
	margin: 0 auto;
}

#popup-gallery .prev,
#popup-gallery .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 2.5em;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
	background-color: rgba(0, 0, 0, 0.25);
}
#popup-gallery .next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
#popup-gallery .prev:hover,
#popup-gallery .next:hover {
	background-color: rgba(0, 0, 0, 0.85);
}

#popup-gallery .caption-container {
	text-align: center;
	padding: 2px 16px;
	color: white;
	font-size: .9em;
}
#popup-gallery a:hover{ text-decoration: none !important; }

.spacer{ width: 6em; border-bottom: 1px solid #777; margin: 1.5em auto 2em auto; }

h1.title{ text-align: center; font-size: 5em; line-height: 1em !important; margin-bottom: 0 !important; border-top: 1px solid #000; border-bottom: 1px solid #000; }
h1.title span{ display: block; font-size: 0.6em !important; font-style: italic; line-height: 1.4em !important; }
h2.author{ font-style: italic; font-size: 2.8em; letter-spacing: .16em;  margin-top: 1em !important; }

.content{ position: relative; }
#contents{ position: fixed; top: 4em; left: 4em; width: 20em; }

h2.first{ margin-top: .7em; }

@media screen and (max-width: 1100px) {

	.toc{ column-count: 2; column-gap: 6em; }

	.action-box .top{
		display: grid;
		grid-template-columns: 1fr;
	}

	.buy{
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.buy a{ font-size: 1em; height: 2.5em; }
	.buy .price{ display: block; }
	.buy .note{ display: block; }

	h2{ line-height: 1.1em; text-align: center; }
	
	h2.subtitle{ display: none; margin-top: 0; font-size: 1.5em; text-align: left; margin-bottom: 1em; text-align: center; padding: 0 0em; }

	div.imagery{ display: none; height: 400px; background: url( ../img/DSCF7595.JPG ); background-position: bottom; background-size: 150% auto; }
	p.author{ text-align: center;
		font-family: "Cormorant", serif;
		font-weight: 400;
 		font-style: italic;
		font-size: 1.85em;
		letter-spacing: .15em;
	}
	p.author:before{ content: ""; }

	.image{ margin-top: 2em; }

	.static-gallery{ grid-template-columns: 1fr 1fr 1fr; }

	.details{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.socials{
		margin: 0 auto;
		width: 6em;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	
	.exhibition{
		grid-template-columns: 1fr;
	}
	
	.exhibition .images{ text-align: center; }
	.exhibition .images img{ width: auto !important; }
}

@media screen and (max-width: 800px) {

	.toc{ column-count: 1; }

	.static-gallery{ grid-template-columns: 1fr 1fr; }

}