@font-face{font-family:square; src: url(/fontovi/Square721_BT_Roman.ttf)}
@font-face{font-family:square; src: url(/fontovi/Square-721-Bold-BT_42055.ttf); font-weight:bold}
html{scroll-behavior: smooth; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
:root {
	/*--logo_sirina:12.655em;*/
	--visina_botuna_headera: 4rem;
	--sirina_header_Logo:10rem;
	--sirina_headera: 70rem;
	--plava:#393185;
	--modra:#5397D1;
	--zlatna: #E1AF3F;
	--crvena:#FF1E24;
	--main_boja_1: rgba(159, 122, 2, 0.474); /*default*/
	--main_boja_2: rgba(159, 122, 2, 0.703); /*default*/
}
/* -------DEFAULTS ----------*/
a:visited, a:active, a:link{color:var(--plava); text-decoration: none ;}
button{border-style: solid;}
button:disabled{opacity:1; /*filter:grayscale(50%);*/ pointer-events: none;}

body{border:none; padding:0; box-sizing:border-box; margin:0; font-size:1em; font-family:Verdana, sans-serif; background-color: var(--modra);}
article[id], .footer-article[id]{padding-top:calc(var(--visina_botuna_headera) + 1em) !important}

section.val:before{content: ''; width: 100%; height: 22vw; display: block; margin-top: -12vw; 
					background-image: url('/slike/val.webp'), linear-gradient(transparent 0% ,  transparent 49%,  var(--modra) 50%); 
					background-size: cover, cover; background-position: center, center; background-repeat:no-repeat, no-repeat;}
section.val.mt-0:before{margin-top: -2vw !important;background-image: url('/slike/val.webp'), linear-gradient(white 0% ,  white 49%,  var(--modra) 50%); }					
section.val{padding-top: 0 !important; }					
section.dno:before, footer.dno:before{content: ''; width: 100%; height: 20vw; display: block; margin-top: -10vw; 
						background-image: url('/slike/dno.webp'), linear-gradient(transparent 0% ,  transparent 49%,  white 50%); 
						background-size: cover, cover; background-position: center, center; background-repeat:no-repeat, no-repeat;}					
/*p{font-size:1em; text-align:center; line-height:150%; padding:0; color:#444}*/
.naslovni{font-family:square, helvetica, sans-serif; font-weight:bold; text-transform:uppercase}
h1~h2 {margin-top:-.5em; margin-bottom:1.5em; font-size:1.25em; text-transform:none; }
.text-modri{color: var(--modra);}
.text-plavi{color: var(--plava) !important;}
.bg-modra{background-color: var(--modra);}
.bg-plava{background-color: var(--plava);}
.plavi-shadow{text-shadow:-0.03em -0em .05em #393185, 0em -0em .05em #393185}
.btn-close, .carousel-control-next-icon,.carousel-control-prev-icon{opacity: 1 !important;}

/*------------------------------------------------------------------HEADER--------------------------------------------------------------------------------------*/
header nav{position: fixed; left:calc((100vw - var(--sirina_headera)) / 2); top:0; width:var(--sirina_headera); 
		height:calc(var(--visina_botuna_headera) - .5rem);transition: .2s;
		border-top:.25em solid var(--plava); background-color: transparent;  z-index: 10000; 
		display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap; overflow: visible;}
	header nav .polovica{width:calc((100% - var(--sirina_header_Logo)) / 2); height: 100%;
						   display: flex; justify-content:space-around; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;
						   background-color: var(--modra); padding-left: 2em;
							clip-path: polygon(0 0, 100% 0, 100% 100%, 2em 100%);}	
	header nav .polovica:last-of-type{justify-content:space-around;  clip-path: polygon(0 0, 100% 0, calc(100% - 2em) 100%, 0 100%); padding-right: 2em; padding-left:0em;}
	header nav .polovica:before, header nav .polovica:last-of-type:after
								{display: block; content: ''; background-color:white; height: 100%; width: 2em;
								clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%); position: absolute; left:0}						
	header nav .polovica:last-of-type:before{display: none;}
	header nav .polovica:last-of-type:after{clip-path: polygon(50% 0, 100% 0, 100% 100%, 0% 100%); position: absolute; left:auto; right:0%; top:0}
	a:has(#header_logo){background:linear-gradient(var(--modra) 0%, var(--modra) 100%); background-size:100% calc(var(--visina_botuna_headera) - .5rem)  ;
						background-color: transparent; background-repeat: no-repeat;
						background-position: top; clip-path: none;}
		div:has(#header_logo){background-color: white; box-sizing: border-box !important;
							border-left: .55em solid var(--plava); border-right: .55em solid var(--plava); border-bottom: .25em solid var(--plava);
							width: var(--sirina_header_Logo); padding:1em ; padding-top: 1.25em;
							clip-path: polygon(100% 0, 93% 65%, 74% 90%, 50% 100%, 26% 90%, 7% 65%, 0 0);}
			#header_logo{display: block; cursor:pointer; box-sizing: border-box !important;
				height:auto; width: 100%; overflow: hidden; object-position: center; object-fit: contain;}
				
			/*@media (max-width:35em) {#header_logo span{font-size: .8em !important;}}*/
			/*@media (max-width:20em) {#header_logo span{display: none;}}*/

	#header_menu{position: fixed; top: 0; right:0;
			width: var(--visina_botuna_headera); height: var(--visina_botuna_headera);
			background-color: var(--plava) !important; 
			z-index: 2; display: none; transition: .3s;}
		.nav_crta{
				display: block;
				background-color: white; 
				height:10%; width: 100%;
				margin:20% auto;
				clear: both;
				transition: .3s;}
			.nav_crta:first-of-type{transform-origin:top left;}
			.nav_crta:last-of-type{transform-origin:bottom left;}	
	
		header nav a{width:auto; min-width:3em; height: 100%;  color:rgb(0, 0, 0) !important; 
					text-decoration: none; font-size: 110%;
					background:linear-gradient(var(--plava) 10%, var(--plava) 100%); transition: .2s; 
					background-size:100% 00%; background-repeat: no-repeat; padding-bottom: .25em;
					display: flex; align-items: center; justify-content: center; padding:0 .75em ;
					/*flex:1;*/ /*clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 25% 100%, 0 90%);*/}		
			header nav a:hover{background-size: 100% 100%; color:white !important; }
	/*mobitel*/		
	@media (max-width:80em) {
		header{position: fixed; left: 0; top:0; width: 100%; z-index: 10000; border-top:.25em solid #393185; background-color: var(--modra);
				height: var(--visina_botuna_headera);}
			a:has(#header_logo){background: none; position: fixed; top:0; left: 0; height: auto;}
				div:has(#header_logo){border:none !important; padding: 0.5em; padding-bottom:.9em; padding-right: 1.5em; padding-top: .6em;
									clip-path: polygon(100% 0, 93% 65%, 80% 90%, 50% 100%, 0% 100%, 0% 100%, 0 0);}
					#header_logo{display: block; cursor:pointer; box-sizing: border-box !important;
						height:auto; width: 100%; overflow: hidden; object-position: center; object-fit: contain;}
			#header_menu{display: block;}
			header nav{width:auto; max-width:100%; position: fixed; left:auto;  right:-100%; top:var(--visina_botuna_headera); background-color: var(--plava); 
					height:auto; padding: 1rem; padding-bottom: .75rem; text-align: right;}
				header nav .polovica{width:100%; display: block; padding: 0 !important; float:right !important; clear: both;clip-path: none !important;}
				header nav .polovica:last-of-type{padding: 0 !important;}
					header nav a{color: white !important; display: block; padding:.35rem 0rem; text-align: right; background-color: var(--plava); clip-path: none;}
					header nav a:hover{background-size: 100% 0%; color:var(--zlatna) !important; border-bottom-color:transparent;}
			header nav .polovica:before, header nav .polovica:last-of-type:after{display: none;}		
	}	
	@media (max-width:14.5em) {a:has(#header_logo){display: none;}}	


/* ------------ POČETNA -------------------------*/	
.početna, .početna video{ height:calc(100vh + 12vw); width:100%;}
	.početna video{position: absolute; top:0; left: 0; object-fit:cover; object-position:center; 
				filter:brightness(120%); z-index: -1;}			
		.početna .row{height: 100%; padding-top:calc(var(--visina_botuna_headera) + 2em)!important;}				
		@media (max-width:80em) {.početna{height:auto !important;padding-top:0 !important;}
							.početna video{height:auto; min-height:calc(50vh + 12vw);}
							.početna .row{height:auto; min-height:calc(50vh + 12vw);}}
		@media (max-width:20em) {.početna video{height:100%;}}	
	
/* ------------ BRODICE -------------------------*/	
.brodice-okvir{width: 100%; clip-path: polygon(5% 5%, 100% 0%, 94% 94%, 0% 100%); height:28vw; min-height: 20em;}
	.brodice-okvir>img{width: 100%; height: 100%; object-fit: cover; object-position: center; clip-path: polygon(8% 8%, 100% 0%, 90% 91%, 0% 100%);}
.brodice-naslov{position: relative; top:0; left:-.5em;}	
.brodice-galerija{transition: .1s; clip-path: polygon(.5em 0%, calc(100% - .5em) 0%, 100% 50%, calc(100% - .5em) 100%, .5em 100%, 0% 50%);
				margin-left: -1em !important;}
	@media (max-width:768px) {.brodice-okvir{height:60vw; min-height:7em;}		
	.brodice-naslov{position: relative; top:-.5em; left:0; margin-bottom: -.45em !important;}	}						

/* ------------ FOOTER -------------------------*/	
address a{display:flex; margin-bottom: .5em; justify-content: flex-start; align-items: flex-start;}	
	address a span:has(img){display:inline-block; width:1.5em; height: 1.5em; padding: .35em; background-color: var(--plava);
				border-radius: 100%; margin-right: .5em; }	
		address a img {filter:brightness(10000%); width:100%; height:100%; object-fit: contain; object-position: center; display: block;}