:root{
	--txt: #353a40;
	--w: #e7e8e2;
}

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	color: var(--txt);
}

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

header{
	height: 50rem;
	width: 15rem;
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: -1;
	text-align: center;
	background: url('IIP.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	overflow: hidden;
	transform: translate(-50%, -50%);
}
	header{background-image: url('IIP_c.svg');}
.znak{
	height: 7.5rem;
	width: 15rem;
	position: fixed;
	left: 50%;
	top: .25rem;
	z-index: -1;
	text-align: center;
	background: url('IIP_.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	overflow: hidden;
	transform: translate(-50%, 0);
}
	.znak{background-image: url('IIP__c.svg');}
	footer, a, a:link, a:visited, a:hover, a:active{
		color: var(--txt);
	}
h1{
	width: 0;
	height: 0;
	margin: left;
	text-indent: 999rem;
	padding: 0;
	overflow: hidden;
}

main{
	width: 90%;
	margin: 80vh calc(50% - 45%) 0;
	float: left;
	text-align: center;
}

img{
	width: 100%;
	height: auto;
	margin: 0 auto;
	max-height: 1080px;
}

.slike img{
	object-fit: contain;
}

.bck{
	width: calc(100vw - (100vw - 100%));
	height: 100vh;
	position: fixed;
	z-index: -2;
	top: 0;
	left: 0;
}
.red, .gold{
	float: left;
	width: 50%;
	height: 100vh;
}
/*.red{background:#ea433b;}
.gold{background:#c58c3d;}*/
	.red, .gold{background:#c5c5cd;}

.slike{
	width: calc(100% / 3 * 2);
	height: auto;
	margin: 5em auto;
	max-height: 1080px;
}

footer{
	width: 20rem;
	font-size: .75rem;
	line-height: 1rem;
	margin: 0 calc(50% - 10rem) 5rem;
	float: left;
	text-align: center;
	color: var(--txt);
	position: relative;
	padding-top: 10em;
	background:#c5c5cd;
}
h2{
	font-size: .75rem;
	line-height: 1rem;
	font-weight: bold;
	margin: 0 0 .5rem;
	padding: 0;
	float: left;
	width: 100%;
	text-transform: uppercase;
	font-weight: bold;
}
address, p{
	width: 100%;
	float: left;
	margin: 0 0 .5rem;
	padding: 0;
	line-height: 1.5rem;
	font-style: normal;
}
dl, dt, dd{
	width: 100%;
	float: left;
	padding: 0;
	margin: 0 0 .5rem;
}
dt{
	font-weight: bold;
}
a, a:link, a:visited{
	color: var(--txt);
	text-decoration: none;
	opacity: 1;
	transition: opacity ease .25s;
}
a:hover, a:active{
	color: var(--txt);
	text-decoration: none;
	opacity: .5;
	transition: opacity ease .25s;
}

	::selection{color:var(--w);background:#c5c5cd;}::-moz-selection{color:var(--w);background:#c5c5cd;}

@media only screen and (min-width: 1200px) {
	main{
		width: 1080px;
		margin: 80vh calc(50% - 540px) 0;
		float: left;
		text-align: center;
	}
}

@media only screen and (max-width: 960px) {
	.slike{width:100%;}
	footer .bck{
		margin-top: -5.5rem;
	}
}

@media only screen and (max-width: 789px) {
	.red, .gold{background:#c5c5cd;}
	footer .red, footer .gold{background:#c5c5cd;}
	header{background-image: url('IIP_c.svg');}
	.znak{background-image: url('IIP__c.svg');}
	footer, a, a:link, a:visited, a:hover, a:active{
		color: var(--txt);
	}
	::selection{color:var(--w);background:#c5c5cd;}::-moz-selection{color:var(--w);background:#c5c5cd;}
}

@media only screen and (max-width: 450px) {
	img, .slike{
		margin-bottom: 2.5rem;
	}
	footer .bck{
		margin-top: -3rem;
	}
	footer{
		width: 100%;
		margin: 0 0 2.5rem;
	}
}
@media only screen and (max-height: 800px) {
	.znak{display:none;}
}