/*
	Theme Name: Prazno
	Theme URI: 
	Author: Prazno
	Author URI: 
	Description: Prazno
	Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root{
	--txt: #132a80;
	--at: #ffdb0038;
	--w: #f7f5f2;
	--serif: "Zilla Slab", serif;
	--sans: "Wix Madefor Text", sans-serif;
	/*--y: #edcf05;*/
	--y: #ffdb00;
	--r: #e83411;
	--b: #1470e5;
	font-size: 1.25rem;
	--pro: 1.25rem;
	--pro-po: .625rem;
}

html{margin:0;padding:0;}
body{
	width: 100%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	font-family: var(--serif);
	font-size: 1rem;
	line-height: var(--pro);
	color: var(--txt);
	font-weight: 600;
/*	background-image: url('zhs-bckg-ptrn.png');*/
	background-color: var(--w);
}
*, *:before, *:after {box-sizing: border-box !important; font-optical-sizing: auto;}

/* -------------------------- GENERAL */

a, a:link{
	color: var(--txt);
	opacity: 1;
	transition: color .5s ease-in-out;
}
a:visited{
	color: var(--txt);
	opacity: .5;
	transition: color .5s ease-in-out;
}
a:hover, a:active{
	color: var(--r);
	opacity: 1;
	transition: color .5s ease-in-out;
}

p{
	width: 100%;
	float: left;
	position: relative;
	margin: 0;
	text-align: justify;
	max-width: 30rem;
	hyphens: auto;
}
p+p{
	text-indent: 3rem;
}

h1, h2, h3, h4, h5, h6, h7{
	float: left;
	position: relative;
}

strong{
	font-weight: 600;
}

.under{
	background: var(--w);
	position: relative;
	display: inline;
}

header, main, footer, aside{
	width: 100%;
	margin: 0;
	float: left;
	position: relative;
	/*background: var(--w);*/
}

.omot{
	width: 75%;
	min-height: calc(100vh - (var(--pro) * 4));
	margin: 0 12.5%;
	float: left;
	position: relative;
/*	background: var(--w);
	box-shadow: 0 0 .1rem .1rem var(--w);*/
}

/* -------------------------- HEADER */

header{
	padding: calc(var(--pro) * 4) 0 calc(var(--pro) * 2);
	width: 75%;
	margin: 0 12.5%;
}

header h1, p.logo{
	font-size: 2rem;
	line-height: calc(var(--pro) * 1.75);
	float: left;
	position: relative;
	margin: 0;
	padding: 0 var(--pro-po);
	font-weight: 700;
	display: none;
}
header p, .sign{
	font-size: 2rem;
	line-height: calc(var(--pro) * 1.75);
	float: left;
	position: relative;
	margin: var(--pro-po) var(--pro) var(--pro-po) 0;
	padding: var(--pro-po) var(--pro);
	font-weight: 700;
	width: auto;
	background: var(--w);
	box-shadow: .5rem .5rem 0 .0125rem var(--b);
	text-align: left;
	hyphens: none;
}
header p+p{
	text-indent: 0;
}

p.javi{
	color: var(--w);
	background: var(--r);
	padding: 0;
	font-size: 1.5rem;
	line-height: calc(var(--pro) * 1.25);
}
p.javi a, p.javi a:link, p.javi a:visited{
	color: var(--w);
	width: 100%;
	float: left;
	position: relative;
	padding: var(--pro-po) var(--pro);
	transition: color .5s ease-in-out, background .5s ease-in-out;
}
p.javi a:hover, p.javi a:active{
	color: var(--r);
	background: var(--w);
	transition: color .5s ease-in-out, background .5s ease-in-out;
}

header h1 a, header h1 a:link, header h1 a:visited, p a, p a:link, p a:visited{
	color: var(--txt);
	text-decoration: none;
	transition: color .5s ease-in-out;
/*	height: 5.5rem;
	width: 9.1rem;
	overflow: hidden;
	background: url('l_.svg') no-repeat;
	background-size: 100% auto;
	text-indent: 999999rem;
	display: block;
	white-space: nowrap;*/
}
header h1 a:hover, header h1 a:active, p a:hover, p a:active{
	color: var(--r);
	transition: color .5s ease-in-out;
}

nav{
	width: 100%;
	margin: 0;
	padding: 0 var(--pro-po);
	float: left;
	position: relative;
	font-family: var(--sans);
	font-size: .9rem;
	font-weight: 700;
}
nav ul{
	width: 100%;
	float: left;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
nav li{
	width: auto;
	float: left;
	position: relative;
	margin: 0;
	padding: var(--pro) 0;
}
nav li{
	width: auto;
	float: left;
	position: relative;
	margin: 0;
	padding: var(--pro) var(--pro) 0 0;
}
nav ul a{
	float: left;
	position: relative;
	margin: 0;
	background: var(--w);
}
nav ul a:link, nav ul a:visited{
	text-decoration: none;
	color: var(--txt);
	background: var(--w);
	padding: calc(var(--pro-po) / 2);
	box-shadow: .25rem .25rem 0 .0125rem var(--b);
	transition: color .5s ease-in-out, background .5s ease-in-out, box-shadow .5s ease-in-out;
}
nav ul a:hover, nav ul a:active{
	text-decoration: none;
	color: var(--w);
	background: var(--r);
	box-shadow: .5rem .5rem 0 .0125rem var(--b);
	transition: color .5s ease-in-out, background .5s ease-in-out, box-shadow .5s ease-in-out;
}

/* -------------------------- TITLES */

h1{
	width: 100%;
	font-size: 2rem;
	line-height: calc(var(--pro) * 1.75);
	float: left;
	position: relative;
	margin: 0;
	padding: 0 0 var(--pro);
	font-weight: 700;
}

.page h1, .single h1{
	padding: var(--pro-po) 0 var(--pro);
}

h2, h3, .sign{
	width: 100%;
	font-size: 3rem;
	line-height: calc(var(--pro) * 2.85);
	margin: 0;
	padding: var(--pro-po) 0;
}

h2 a, h2 a:link, h2 a:visited, h3 a, h3 a:link, h3 a:visited{
	text-decoration: none;
	text-decoration-thickness: .1rem;
}
h2 a:hover, h2 a:active, h3 a:hover, h3 a:active{
	text-decoration: none;
}

/* -------------------------- MAIN & home */

main{
	padding: calc(var(--pro) * 2) var(--pro-po);
}

section{
	width: 75%;
	margin: 0 12.5%;
	padding: calc(var(--pro) * 2) 0;
	float: left;
	position: relative;
}

section.glas{
	width: 100%;
	margin: 0;
}

.home .pg{
	width: 75%;
}
.home .pg h2, .sign p, .mjesto h2{
	width: calc(100% / 3);
	padding-right: var(--pro-po);
}
.home .pg h2::after, .sign p::after, .mjesto h2::after{
	content: " ";
	width: 14rem;
	height: 14rem;
	display: block;
	position: absolute;
	bottom: -6rem;
	right: -5.5rem;
	z-index: -1;
	background: url('uskl.svg') no-repeat;
	background-size: auto 100%;
}
.home .pg .twrp{
	width: calc(100% / 3 * 2);
	float: left;
	position: relative;
	background: var(--w);
	padding: var(--pro) calc(var(--pro) * 2) calc(var(--pro) * 2);
}
.home .pg p{
	padding-left: var(--pro-po);
	text-align: left;
	padding-top: var(--pro-po);
	font-size: 2rem;
	line-height: calc(var(--pro) * 2);
	max-width: 100%;
	hyphens: none;
}
.home .pg p+p{
	padding-top: 0;
}

/* -------------------------- ARTICLES */

article{
	width: calc(100% / 2);
	padding: var(--pro-po);
	float: left;
	position: relative;
	background: var(--w);
}
.novosti article:nth-of-type(odd){
	width: calc(50% - var(--pro-po));
	margin-right: var(--pro-po);
	clear: left;
    box-shadow: .5rem .5rem 0 .0125rem var(--b);
}
.novosti article:nth-of-type(even){
	width: calc(50% - var(--pro-po));
	margin-left: var(--pro-po);
	clear: right;
    box-shadow: .5rem .5rem 0 .0125rem var(--b);
}
.glas article{
	width: calc((100% / 4) - var(--pro));
	padding: 0;
	margin: 0 var(--pro-po);
	float: left;
	position: relative;
	background: var(--w);
    box-shadow: .5rem .5rem 0 .0125rem var(--b);
	overflow: hidden;
}
.glas .kartica{
	float: left;
	position: relative;
	width: 100%;
}
.glas .kartica+.kartica{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: var(--pro);
	top: 0;
	left: 0;
	background: var(--w);
	opacity: 0;
	transition: opacity .5s ease-in-out;
/*	background: url('bckg.jpg') no-repeat;
	background-size: 100% auto;
	background-position: top left;*/
	hyphens: none;
	z-index: 999;
}
.glas .kartica+.kartica:hover{
	opacity: 1;
	transition: opacity .5s ease-in-out;
}
.glas .kartica p{
	width: 100%;
/*	font-size: 1.25rem;
	line-height: calc(var(--pro) * 1.25);*/
	padding-left: 0;
	hyphens: none;
}
.glas .kartica p+p{
	text-indent: 0;
	padding-top: calc((var(--pro) * 1.25) / 2);
}
.osoba{
	position: absolute;
	bottom: var(--pro-po);
	left: var(--pro);
}
.mjesto .osoba{
	top: var(--pro);
	width: calc(100% / 2);
}
.mjesto .osoba h3{
	font-size: 2rem;
	line-height: calc(var(--pro) * 1.9);
	margin: 0;
	padding: var(--pro-po) 0;
	background: transparent;
}
.osoba h3{
	display: inline;
	padding: .2rem .2rem 0;
	width: auto;
	font-family: var(--serif);
	font-size: 1.25rem;
	line-height: calc(var(--pro) * 1.25);
	font-weight: 700;
	color: var(--r);
	background: var(--w);
	hyphens: none;
}
.osoba p{
	display: inline;
	clear: left;
	padding: 0 .2rem .2rem;
	width: auto;
	background: var(--w);
	hyphens: none;
}
.kartica img::after{
	content: 'Za sve nas, dižem glas';
	font-weight: 500;
	position: absolute;
	width: 5rem;
	height: calc(var(--pro) * 4);
	top: 0;
	right: 5rem;
	text-align: left;
	hyphens: none;
}

.mjesto article{
	width: calc(100% / 3 * 2);
	max-height: 80vh;
	overflow: hidden;
	padding: 0;
	float: left;
	position: relative;
	background: var(--w);
    box-shadow: .5rem .5rem 0 .0125rem var(--b);
}
.mjesto h3{
	padding: .2rem .2rem;
}

article img{
	width: 100%;
	height: auto;
	float: left;
	position: relative;
}
article h2, article h3{
	/*width: calc(100% / 3);
	padding-right: var(--pro-po);*/
	width: 100%;
}
article p{
	width: calc(100% / 3 * 2);
	padding-left: var(--pro-po);
	text-align: left;
	padding-top: calc(var(--pro-po) + .0875rem);
}
article p+p{
	padding-top: 0;
}


/*article h2{
	font-size: 1.25rem;
	line-height: var(--pro);
}*/

article h2, article h3{
    font-size: calc(1.25rem * .9);
    line-height: var(--pro);
    font-family: var(--sans);
    font-weight: 800;
}

article h2 a, article h2 a:link, article h2 a:visited, article h3 a, article h3 a:link, article h3 a:visited{
	text-decoration-thickness: .1rem;
}

.metaa{
	width: 100%;
	margin: 0;
	padding: var(--pro) 0;
	float: left;
	position: relative;
	font-family: var(--sans);
	font-size: .9rem;
	font-weight: 600;
}

/* -------------------------- PAGES & SINGLE */

.page main, .single main, .archive main{
	width: 75%;
	margin: var(--pro) 12.5%;
}

.text{
	width: 75%;
	float: left;
	position: relative;
	padding: var(--pro) calc(var(--pro) * 2) calc(var(--pro) * 2);
	background: var(--w);
}

blockquote{
	font-size: 1.5rem;
	line-height: calc(var(--pro) * 1.5);
	font-weight: 700;
	text-align: left;
	width: 100%;
	max-width: 35rem;
	float: left;
	position: relative;
	margin: 0;
	padding: var(--pro) 0;
}
blockquote p{
	text-align: left;
}

.page-id-47 figure, .page-id-49 figure{
	width: 50%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}
.page-id-47 figcaption, .page-id-49 figcaption{
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0;
	padding: 0 calc(var(--pro) * 2) var(--pro);
}

.page-id-47 main p, .page-id-49 main p, .page-id-47 main ol li, .page-id-49 main ol li{
	color: var(--r);
}
.page-id-47 main p+p, .page-id-49 main p+p{
	text-indent: 0;
	padding-top: var(--pro-po);
}
.page-id-47 main p em, .page-id-49 main p em, .page-id-47 main ol li em, .page-id-49 main ol li em{
	font-style: normal;
	font-weight: 500;
	color: var(--txt);
}
.page-id-47 main ol, .page-id-49 main ol{
	width: 100%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0 calc(var(--pro) * 2);
}
.page-id-47 main ol li::marker, .page-id-49 main ol li::marker{
	color: var(--txt);
}
.page-id-47 main ol li, .page-id-49 main ol li{
	padding-bottom: var(--pro-po);
}
.page-id-47 main ol li+li, .page-id-49 main ol li+li{
	padding-top: var(--pro-po);
	border-top: .1rem solid var(--txt);
}

/* -------------------------- SIDEBAR */

aside{
	width: 25%;
	float: left;
	position: relative;
	clear: right;
	background: var(--w);
	padding: calc(var(--pro) * 2) calc(var(--pro) * 2) calc(var(--pro) * 2) 0;
}

section.widget.slike{
	background: transparent;
	padding: 0;
	margin: 0;
	width: 100%;
	float: left;
	position: relative;
	clear: right;
}
section.widget.slike figure{
	float: left !important;
	position: relative !important;
	display: block !important;
	padding: var(--pro-po) !important;
}
section.widget.slike figure figure{
	width: calc(100% / 4) !important;
	float: left !important;
	position: relative !important;
	display: block !important;
	padding: var(--pro-po) !important;
	clear: none !important;
}
section.widget.slike figure figure img {
    box-shadow: .5rem .5rem 0 .0125rem var(--b);
}

/* -------------------------- FOOTER */

footer{
	padding: 0 calc(var(--pro) * 2) calc(var(--pro) * 2);
	width: 75%;
	margin: var(--pro) 12.5%;
}

footer nav{
	width: 50%;
	margin: 0;
	float: left;
	position: relative;
	font-family: var(--sans);
	font-size: .9rem;
	font-weight: 600;
}
footer ul{
	width: 100%;
	float: left;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
footer li{
	width: auto;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}

.sign a, .sign a:link, .sign a:visited{
	text-decoration: none;
	background: var(--w);
	font-weight: 700;
}

/* -------------------------- OTHER */

::selection, .footer p::selection{
	color:var(--txt) !important;
	background:var(--y) !important;
}
::-moz-selection, .footer p::-moz-selection{
	color:var(--txt) !important;
	background:var(--y) !important;
}

/* -------------------------- MEDIA QRYs */

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

}