@font-face {font-family:naslovni; src: url(/fontovi/Montserrat-ExtraBold.otf)}
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;
	--plava:#2D4A83;
	--zlatna: #C19A50;
}

/* -------DEFAULTS ----------*/
a:visited, a:active, a:link{color:black; }
button{border-style: solid;}
.text-justify{text-align: justify;}
body{color:black; font-family:'Verdana', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }	
.naslovni{font-family: 'naslovni','Trebuchet MS', sans-serif;}	
.osmerokut{background-image: url('/slike/osmerokut.svg'); background-size: cover;}
.kartica{outline:.4em solid var(--zlatna); border:.45em solid white; background-color: var(--plava);}
.object-contain{object-fit: contain;}
.object-cover{object-fit: cover;}
.fs-7{font-size: 60%;}

/* -----------HEADER------------- */
header{position: absolute; left: 0; top:0; width: 100%; z-index: 10000;}
	#header_logo{position: absolute; top:0; right:var(--visina_botuna_headera);
			height:var(--visina_botuna_headera); width: calc(100vw - var(--visina_botuna_headera));
			text-align: right; text-decoration: none !important; overflow: hidden;}
		#header_logo span{display: inline-block; height:auto !important; font-size: 2rem !important; padding: 0; line-height:100% !important;
						text-shadow: 0 0 .15em rgba(0, 0, 0, 0.694);}	 
		#header_logo span::first-letter{font-size:130% !important}
		@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; 
			clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 85%);
			z-index: 2;}
		.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{position: fixed; left:0vw; top:-100vh; width:100vw; height:100vh; z-index: 1; 
				display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;}	
		header nav a{width:33.3333vh; height:33.3333vh; overflow: hidden; word-break: normal;
					min-width:8em; min-height:8em; 
					padding: .5rem; 
					transform: rotatey(90deg); transition:transform .2s; 
					color:white !important; text-decoration: none;}				
		header nav a:hover{color: var(--zlatna) !important;}
		header nav a:hover img{filter: brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(243%) hue-rotate(1deg) brightness(90%) contrast(84%)}		
			header nav figure{ width:100%; height:100%; border: none;
							background-image: url(/slike/osmerokut.svg); background-size: contain; background-repeat: no-repeat; background-position: center;
							display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;
							padding:4vh; text-align:center; color:inherit !important; }
				header nav	img{padding-bottom:1em; object-fit: contain; width: 100%; height:calc(80% - 3em);}
				header nav figcaption{display: block; width: 100%; font-weight: normal !important; line-height: 110%;}
				header nav figcaption::first-letter{text-transform: uppercase;}	
		@media (orientation: portrait) {header nav a{width:45vw; height:45vw; min-width:3em; min-height:3em;}
									header nav figure{padding:4vw;}
									header nav	img{padding-bottom:.5em;}}				

/* -------naslovna ----------*/
#naslovni_karosel{height:75vw; width:100%; max-height:50vh;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); opacity: .5; filter:grayscale(100%)}
	#naslovni_karosel .carousel-item{background-size: cover; background-position: center; }
#naslovni_logo{height:8em; top:-4em !important; position:relative !important; left:0; font-size: 1.1em !important;}
	#naslovni_logo img{width:8em; padding: 2em !important; object-position: center; background-repeat: no-repeat; background-position: center; background-size:contain;}
	#naslovni_logo h2{color:var(--plava); padding-top:.5em !important; }
	#naslovni_logo figcaption{font-size: 2em;}
	#naslovni_logo figcaption span{color:var(--plava)}
	#naslovni_logo figcaption span:last-of-type{color:var(--zlatna)}
	#naslovni_logo figcaption span::first-letter{font-size:130% !important}
@media (max-width:50em) {#naslovni_logo{font-size: .8em !important;}}	
#naslovni_trokuti{height:60.4vw; width:100vw; 
				max-height:45vh; max-width:60em;
				position: absolute; top:0; right:0;
				background-color: var(--zlatna);
				clip-path: polygon(100% 0, 0 0, 100% 100%);
				overflow: hidden;}	
	#naslovni_trokuti div{background-color: var(--plava);
				clip-path: polygon(100% 0, 0 0, 100% 100%);
				height:93%; width:100%; padding:0 2rem;}		
		#naslovni_trokuti div div{height:100%; width:67%;
				/*background-color: #75262C;*/
				transform: skewX(65deg);
				box-shadow:0 0 1rem rgba(0, 0, 0, 0.62) inset !important;}	

/* -------POZADINA ----------*/
#pozadina{position: absolute; top:calc(50vh + 6em); left:0; z-index: -1; height:100%; width: 100%; padding: 0; margin: 0; 
		display: block; overflow: hidden; }	
	#pozadina div{width:60vw; max-width:50vh; height:50%; 
				clip-path: polygon(100% 30%, 0 0, 0 100%);  filter: grayscale(100%);
				background-size: cover; background-position: center; opacity:.5}	
	#pozadina div:last-of-type{clip-path: polygon(100% 100%, 100% 0, 0 55%);
							clear: both; float: right; margin-top:-30vh;}								

/* -----------FOOTER------------- */
footer{background-color:var(--plava); 
	outline:.45em solid var(--zlatna);
	border-top:.45em solid white}				
	footer address a{text-decoration:none !important; color: white !important; display: block; margin:.5rem;}
	footer address a span{color:var(--zlatna) !important; display: block; transition:.5s;}	
	footer address a:link{text-decoration:none !important;}							
	footer address a:hover{color:var(--zlatna) !important}	
	footer address a span:before{/*color: white !important;*/ width:auto; height: 100%; display: inline-block; content: '\007C'; 
							margin-right: .0em; font-size: 0; transition: .3s;}	
	footer address a:hover span:before{font-size:1em;}	
	footer .drustvene{filter:brightness(1000000%) saturate(100%)}
	footer .drustvene:hover{filter:brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(243%) hue-rotate(1deg) brightness(90%) contrast(84%)}
	
	.footer_navigator{color:white !important; font-weight:normal !important; font-size:80%; text-decoration: none !important; 
					border-left:1px solid white; padding:0 .5em; word-break:keep-all !important; display: inline-block;}
	.footer_navigator:hover{color:var(--zlatna) !important}				
	

/* -----------INDEX KATEGORIJE------------- */
#kategorije{font-size: 1em; }
#kategorije a{width: 8em; height: 8em;
			display: flex; align-items: center; justify-content: center; align-content: center;
			transform: rotatey(0deg); flex-wrap: wrap;
			padding:.75em; text-decoration: none !important;}	
	#kategorije a:hover img{animation:vrtnja .7s infinite alternate linear}
	#kategorije a p{transition: color .7s;}
	#kategorije a:hover p{color: var(--zlatna) !important;}
	#kategorije a p::first-letter{text-transform: uppercase;}
	@keyframes vrtnja{0%{transform: rotatey(0deg)} 
					40%{transform: rotatey(90deg); filter:none}
					40.1%{transform: rotatey(90deg); filter: brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(243%) hue-rotate(1deg) brightness(90%) contrast(84%)}
					60%{transform: rotatey(0deg); filter: brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(243%) hue-rotate(1deg) brightness(90%) contrast(84%)}
					100%{transform: rotatey(0deg); filter: brightness(0) saturate(100%) invert(58%) sepia(100%) saturate(243%) hue-rotate(1deg) brightness(90%) contrast(84%)}	
				}		
	#kategorije	img{width:2.8em; height:2.8em; object-fit: contain; object-position: bottom; margin-bottom:.5em;}	
@media (max-width:50em) {#kategorije{font-size:.75em; }}