:root{
	--txt: #222;
	--w: #fafafa;
	font-size: 150%;
}

body{
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility !important;
	font-family: 'EB Garamond', serif;
	font-size: 1rem;
	line-height: 1.25em;
}

body.ilu{
	color: var(--txt);
	background-color: var(--w);
	font-weight: 500;
}
body.photo{
	color: var(--w);
	background-color: var(--txt);
	font-weight: 400;
}

*, *:before, *:after, div, h1, h2, h3, h4, h5, h6, p, a, ol, dl, ul, span, input {box-sizing:  border-box !important;}

strong, b{font-weight:700;}
em, italic{font-style:italic;}

a, a:link, a:visited{
	color: var(--txt);
	text-decoration: none;
}
a:hover, a:active{
	color: var(--txt);
	text-decoration: none;
}

header{
	width: 100%;
	height: 6rem;
	position: fixed;
	z-index: -1;
}

h1{
	font-weight: 400;
	font-style: italic;
	font-size: 9rem;
	line-height: 7.5rem;
	margin: 0;
	padding: 0;
	width: 100%;
	float: left;
	text-transform: uppercase;
	letter-spacing: -.025em;
	text-align: center;
	pointer-events: none;
}

p.opis{
	width: 100%;
	float: left;
	padding: 0 1.25rem;
	margin: 2.5rem 0 0;
	text-indent: 10em;
	text-align: justify;
}


.omot{
	width: 100%;
	float: left;
	padding: 0 .625rem;
	margin: 15em 0 0 0;
}
.photo .omot{
	margin: 22.5em 0 0 0;
}

article{
	width: 25%;
	float: left;
	height: 30rem;
	padding: .625rem;
	margin: 0;
}
figure{
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}
figcaption{
	font-weight: 700;
}
.slika{
	width: 100%;
	height: 27.5rem;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	cursor: zoom-in;
}
article img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
}

.slika.size{
	position: fixed;
	width: 100vw;
	height: 100vh;
	bottom: 0;
	left: 0;
	z-index: 999;
	cursor: zoom-out;
	padding: 1.25em;
	transition: all .5s ease-in-out;
}
article .slika.size img{object-fit:contain;}
.size + figcaption{display:none;}
figcaption i{white-space: nowrap;}

footer{
	width: 100%;
	float: left;
	padding: 0 .625rem;
	margin: 2.5rem 0;
}
footer p{
	width: 100%;
	float: left;
	margin: 0;
	padding: 0 .625rem;
}
footer p+p{
	text-indent: 3em;
}

dl{
	width: 50%;
	float: left;
	margin: 0 25%;
	padding: 0;
	font-family: 'Inter', sans-serif;
	font-size: .75rem;
	line-height: 1.25em;
}
dt{
	width: calc(20% - 1.25rem);
	float: left;
	clear: left;
	padding: .3125rem 0;
	margin: .3125rem .625rem 0;
	border-top: .078125rem solid;
}
dd{
	width: calc(80% - 1.25rem);
	float: left;
	clear: right;
	padding: .3125rem 0;
	margin: .3125rem .625rem 0;
	border-top: .078125rem solid;
}

.back{
	position: fixed;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}
.back a, .back a:link, .back a:visited{
	width: 2.5rem;
	height: 2.5rem;
	background: var(--w);
	color: var(--txt);
	border-radius: 1.25rem;
	overflow: hidden;
	text-indent: 999em;
	float: left;
	position: relative;
}
.back a::after{
	content: '\02190';
	font-size: 2em;
	line-height: .75em;
	display: block;
	text-indent: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.back a:hover, .back a:active{
	
}
.photo .back a, .photo .back a:link, .photo .back a:visited{
	background: var(--txt);
	color: var(--w);
}

.dvk{
	width: 100%;
	height: 1rem;
	float: left;
	margin: 2.5rem 0;
	background-image: url('img/dvk.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.photo .dvk{
	background-image: url('img/_dvk.svg');
}

.menu nav{width: 100%;float: left;font-size: 2em;line-height:2.5rem;}
.menu ul{width: 100%; float: left; margin: 0; padding: 0; list-style: none;}
.menu li{width: 50%; float: left; margin: 0; padding: 1.25rem;}
.menu a{width: 100%; float: left; padding: .625rem; text-align: center;}
.menu a:link, .menu a:visited{text-decoration: underline;opacity:1;transition: opacity .5s ease-in-out;}
.menu a:hover, .menu a:active{opacity: .5;transition: opacity .5s ease-in-out;}
.menu header{position:relative; float: left;}

::-webkit-scrollbar{background:transparent;width:.625rem;}/*the scrollbar.*/
::-webkit-scrollbar-button{background:var(--txt);height:0;}/*the buttons on the scrollbar (arrows pointing upwards and downwards).*/
::-webkit-scrollbar-thumb{background:var(--txt);}/*the draggable scrolling handle.*/
.photo::-webkit-scrollbar-thumb{background:var(--w);}/*the draggable scrolling handle.*/
::-webkit-scrollbar-track{}/*the track (progress bar) of the scrollbar.*/
::-webkit-scrollbar-track-piece{}/*the track (progress bar) NOT covered by the handle.*/
::-webkit-scrollbar-corner{}/*the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.*/
::-webkit-resizer{}/**/


@media only screen and (max-width: 1560px) {
	article{height: 25rem;}
	.slika{height: 22.5rem;}
}
@media only screen and (max-width: 1440px) {
	article{height: 20rem;}
	.slika{height: 17.5rem;}
	dl{
		width: 100%;
		margin: 0;
	}
}
@media only screen and (max-width: 1024px) {
	article{width: calc(100% / 3);}
	h1{font-size: 6rem;line-height: 4.5rem;}
	.omot{margin: 7.5em 0 0 0;}
	.photo .omot{margin: 15em 0 0 0;}
	.menu li{width: 100%; float: left; margin: 0; padding: .625rem;}
}
@media only screen and (max-width: 960px) {
	article{width: 50%;height:25rem;}
	.slika{height: 22.5rem;}
}
@media only screen and (max-width: 640px) {
	article{width: 50%;height:20rem;}
	.slika{height: 17.5rem;}
	dl{
		width: 100%;
		margin: 0;
	}
	dt{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	dd{
		width: 100%;
		margin-right: 0;
		margin-top: 0;
		border: none;
	}
}
@media only screen and (max-width: 550px) {
	article{width: 100%;height:auto;}
	h1{font-size: 3rem;line-height: 2.5rem;margin-top:2.5rem;}
	.omot{margin: 7.5em 0 0 0;}
	.photo .omot{margin: 12.5em 0 0 0;}
	p.opis{margin:0;text-align:right;text-indent:0;}
	.slika{
		width: 100%;
		height: auto;
		float: left;
		position: relative;
		cursor: auto;
	}
	.slika.size{
		width: 100%;
		height: auto;
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		cursor: auto;
	}
	.size + figcaption{display:block;}
}

::selection{color:var(--w);background:var(--txt);}::-moz-selection{color:var(--w);background:var(--txt);}
.photo ::selection{color:var(--txt);background:var(--w);}.photo ::-moz-selection{color:var(--txt);background:var(--w);}
h1::selection{color:var(--txt);background:var(--w);}h1::-moz-selection{color:var(--txt);background:var(--w);}
.photo h1::selection{color:var(--w);background:#888;}.photo h1::-moz-selection{color:var(--w);background:#888;}