body{padding:0; box-sizing:border-box; border:none; margin:0; height:auto; overflow-x:hidden; overflow-y:auto; width:100vw}
a{cursor:pointer}
/* HEADER */		
	header{background-color:white; position:fixed; left:0; top:0; width:100vw; height:5.1em; box-shadow:0 .2em .2em rgba(0,0,0,.35); border-bottom: .2em solid #009FE2;}
	header:after{display:block; content:''; position:fixed; width:calc(100vw - 21em); left:calc(50vw - 10em); top:0; height:6.61em;  background-color: white; z-index:-1; box-shadow:0.1em .2em .2em rgba(0,0,0,.35); }
	header::after{display:block; content:''; position:fixed; width:calc(100vw - 21em); left:calc(50vw - 10em); top:0; height:6.61em;  background-color: white; z-index:-1; box-shadow:0.1em .2em .2em rgba(0,0,0,.35); }
		#header_logo{width:18em; height:auto; position:fixed; left:calc(50vw - 28em); top:1.55em}
		nav{position:fixed; right:calc(50vw - 30em); top:3.2em; width:38em; background-color:none; box-sizing:border-box; text-align:right; margin:0 auto;}
				nav a{font-family:fontastique; text-decoration:none; font-size:1.3em; padding:0 1em;}
				nav a:nth-child(odd){color:#005AA8; }
				nav a:nth-child(even){color:#178441;}
				nav a:nth-child(odd):hover{text-shadow:0em .35em .5em rgba(0,90,168,.25);}
				nav a:nth-child(even):hover{text-shadow:0em .45em .5em rgba(23,132,65,.25);}
				.disabled {filter:grayscale(100%) brightness(150%); cursor:default}
/* CAROUSEL za samo index*/	
	#carousel_1, #carousel_3, #carousel_5, #carousel_7, #carousel_9, #carousel_2, #carousel_4, #carousel_6, #carousel_8, #carousel_10
			{width:100vw;  position:fixed; left:0; margin:0; border:none; box-sizing:border-box; padding:0;  filter: blur(0vh);
			background-attachment:scroll; background-repeat:no-repeat;
			animation-timing-function: ease; -webkit-animation-timing-function: ease;
			animation-duration:15s; -webkit-animation-duration:15s;
			animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}	 
	#carousel_1, #carousel_3, #carousel_5, #carousel_7, #carousel_9 /*prednje*/{top:10em; height:calc(100vh - 12.7em);
										background-position:center top; animation-name:slider_prednja_index} 
	#carousel_2, #carousel_4, #carousel_6, #carousel_8, #carousel_10/*zadnje*/{top:5.1em; height:calc(100vh - 11.1em); 
										animation-name:slider_zadnja_index} 
	#carousel_1{z-index:-100; }				
	#carousel_2{z-index:-101; }		
	#carousel_3{z-index:-102; animation-delay:3s}				
	#carousel_4{z-index:-103; animation-delay:3s}		
	#carousel_5{z-index:-104; animation-delay:6s}				
	#carousel_6{z-index:-105; animation-delay:6s}				
	#carousel_7{z-index:-106; animation-delay:9s}				
	#carousel_8{z-index:-107; animation-delay:9s}		
	#carousel_9{z-index:-108; animation-delay:12s}				
	#carousel_10{z-index:-109; animation-delay:12s}							
		@keyframes slider_zadnja_index{
			0% {background-position:left center; filter: blur(0vh) brightness(100%); background-size:120vw auto; opacity:0}
			5% {opacity:1; filter: blur(0vh)}
			21% {background-position:right center; filter: blur(1.5vh); background-size:100vw auto; opacity:1}
			25% {opacity:0}
			100% {opacity:0}
		}	
		@keyframes slider_prednja_index{
			0% {background-size:auto 120%; filter: blur(1.5vh); opacity:0}
			5% {opacity:1}
			21% {background-size:auto 100%; filter: blur(0vh); opacity:1}
			25% {opacity:0}
			100% {opacity:0}
		}					
/* CAROUSEL */	
	figure{width:100vw;  position:fixed; left:0; margin:0; border:none; box-sizing:border-box; padding:0;  filter: blur(0vh);
			background-attachment:scroll; background-repeat:no-repeat;
			animation-timing-function: ease; -webkit-animation-timing-function: ease;
			animation-duration:9s; -webkit-animation-duration:9s;
			animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
			height:calc(100vh - 5.1em - 6em);}	/*100vh da se ne vidi mutni okvir, 5,1em je viši header, a 6em je h1*/ 
	figure:nth-of-type(odd/*prednje*/){top:10em; height:calc(100vh - 12.7em)/*6,61em je header:after, 6em je donji h1*/;	
										background-position:center top; animation-name:slider_prednja} 
	figure:nth-of-type(even/*zadnje*/){top:5.1em; height:calc(100vh - 11.1em) /*5,1em je header, 6em je donji h1*/; 
										animation-name:slider_zadnja} 
	figure:nth-of-type(1){z-index:-100; }				
	figure:nth-of-type(2){z-index:-101; }		
	figure:nth-of-type(3){z-index:-102; animation-delay:3s}				
	figure:nth-of-type(4){z-index:-103; animation-delay:3s}		
	figure:nth-of-type(5){z-index:-104; animation-delay:6s}				
	figure:nth-of-type(6){z-index:-105; animation-delay:6s}							
		@keyframes slider_zadnja{
			0% {background-position:left center; filter: blur(0vh) brightness(100%); background-size:120vw auto; opacity:0}
			5% {opacity:1; filter: blur(0vh)}
			34% {background-position:right center; filter: blur(1.5vh); background-size:100vw auto; opacity:1}
			40% {opacity:0}
			100% {opacity:0}
		}	
		@keyframes slider_prednja{
			0% {background-size:auto 120%; filter: blur(1.5vh); opacity:0}
			5% {opacity:1}
			34% {background-size:auto 100%; filter: blur(0vh); opacity:1}
			40% {opacity:0}
			100% {opacity:0}
		}	
/* GLAVNI - MAIN */		
	main:before{display:block; position:static; content:''; width:100vw; height:.2em; background:linear-gradient(90deg, #005AA8, #00A0E3, #7BB441, #178441); box-shadow:0em -0.1em .2em rgba(0,0,0,.5)}
	main::before{display:block; position:static; content:''; width:100vw; height:.2em; background:linear-gradient(90deg, #005AA8, #00A0E3, #7BB441, #178441); box-shadow:0em -0.1em .2em rgba(0,0,0,.5)}
	main{width:100vw; background-color:white; z-index:100; margin-top:calc(100vh - 6.5em); color:#444; font-family: "Trebuchet MS", Helvetica, sans-serif;}
		article{display:block; width:60em; margin:0 auto; text-align:center; padding:0}	
			article h1{font-family:fontastique; color:#005AA8; font-size:3em; height:2em; box-sizing:border-box; padding-top:0.35em; box-sizing:border-box; margin:0}
			article p{ font-size:1.25em; padding:1em 0;  font-weight:normal; margin:0;}		
			article table{width:100%; height:18em; border:none}
				article table tr td{background-size:cover; background-attachment:static; background-position:center; width:20%; border:.1em solid white; color:black; padding:0;
									vertical-align:bottom; box-sizing:border-box; font-family:Helvetica, sans-serif}
					article table tr td div{display:flex; justify-content:center;  align-items:center; align-content:center; background-color:rgba(255,255,255,.765); height:4em; filter: grayscale(100%); border:none; margin:0; box-sizing:border-box; transition:.35s; cursor:pointer;}	
			/* samo za reference */
			#reference_tablica{width:100%; height:30em; border:none}
				#reference_tablica tr td{background-size:cover; background-attachment:static; background-position:center; width:24.9%; border:.1em solid white; color:black; padding:0;
									vertical-align:bottom; box-sizing:border-box; font-family:Helvetica, sans-serif}
					#reference_tablica tr td div{display:flex; justify-content:center;  align-items:center; align-content:center; background-color:rgba(255,255,255,.765); height:auto; filter: grayscale(100%); border:none; margin:0; box-sizing:border-box; transition:.35s; cursor:pointer; padding:1em}
		section{width:44em; margin:0 auto; box-shadow:0 0 .35em #eee; background:linear-gradient(-225deg, #e0f9ff, #dbeaff); box-sizing:border-box}
			fieldset{border:none; line-height:1.5em; margin-top:2em; padding:1em; box-sizing:border-box}
			fieldset h2{color:#005AA8; text-align:center; margin-bottom:1.25em; text-shadow:0 0 1em white}
			fieldset table{float:left; width:100%; margin-bottom:1em}
			fieldset table tr td:first-child{width:5em; text-align:right; padding-right:.5em}
			fieldset table tr:last-child{font-size:.75em; }
			fieldset input, fieldset select{padding:.5em; border:none;}
			fieldset input[type="submit"]{background:linear-gradient(-225deg, #005AA8, #00A0E3); color:white; cursor:pointer; width:100%; padding:1em 0; font-size: 1em; transition:.25s;}
			fieldset input[type="submit"]:hover{filter: brightness(115%); text-shadow:0 0 2em black}			
			fieldset input[type="checkbox"], fieldset input[type="radio"]{cursor:pointer;}
/* FOOTER */
	footer{font-family: "Trebuchet MS", Helvetica, sans-serif; color:#005AA8; width:100vw; margin:0 auto; z-index:200; height:auto; padding:6em 2em 2em 2em; background-color:white}	
		footer table{width:50em; margin:0 auto}
		footer a{text-decoration:none; color:inherit}
		footer a:hover{text-decoration:underline}
		#footer_logo{display:block; position:static; float:left; width:auto; height:3.4em; position:static; }
/* INFORMATOR */	
	#informator::before{width:1.2em; height:1em; position:absolute; top:.5em; right:.5em; z-index:1;
					background-image: url(/slike/iks.svg); background-size:100%; background-repeat:no-repeat; background-position:center;
					filter:brightness(80%); display:block; content:""}
	#informator{width:20em; height:auto; position:fixed; top:calc(50vh - 5em); left:calc(50vw - 7.5em); 
				background-color:white; box-shadow:0 0 1000vw 1000vw rgba(0,0,0,0.3); box-sizing:border-box; border:none;
				cursor:pointer; text-align:center; overflow:auto; font-size:1em; z-index:1000; padding:2em}	

@font-face{font-family:fontastique; src: url(/fontovi/fontastique.ttf);}

/* ----------------------------UZAK ERKAN--------------------------------------*/
@media only screen and (min-aspect-ratio:4/3){ 
	figure:nth-of-type(even){background-size:cover} /*zadnje*/
}
/* ---------------------------------------------------------------------MOBITEL VERZIJA -------------------------------------------------*/
@media only screen and (max-width: 60em) { 
	body{width:100vw; overflow-x:none}
/* HEADER */		
	header{position:static; height:calc(27vh + 5vw); width:100vw}
	header::after{display:none}
	header:after{display:none}
		#header_logo{height:12.615vh; width:40vh; position:relative; left: calc(50vw - 20vh); top:8vh }
		nav{position:static; width:94vw; height:5vw; text-align:left; margin-top:12vh;}
				nav a{font-family:fontastique; text-decoration:none; font-size:3.9vw; padding:0 2vw;}
				nav a:nth-child(odd){color:#005AA8; text-shadow:0em 1vw .75vw rgba(0,90,168,.2);}
				nav a:nth-child(even){color:#178441; text-shadow:0em 1vw .75vw rgba(23,132,65,.2);}
/* CAROUSEL samo za index*/	
	#carousel_1, #carousel_3, #carousel_5, #carousel_7, #carousel_9, #carousel_2, #carousel_4, #carousel_6, #carousel_8, #carousel_10
		{height:100vh; width:100vw; position:fixed; top:0; left:0; background-attachment: scroll}/*100vh da se ne vidi mutni okvir, 5,1em je viši header, a 6em je h1*/ 
	#carousel_1, #carousel_3, #carousel_5, #carousel_7, #carousel_9 /*prednje*/
		{top:calc(33vh + 5vw); background-position:center top; animation-name:slider_prednja_index} /*prednje*/
	#carousel_2, #carousel_4, #carousel_6, #carousel_8, #carousel_10/*zadnje*/
		{background-size:cover; background-position:center; animation-name:slider_zadnja_index; top:0; left:0} /*zadnje*/						
		@keyframes slider_zadnja_index{
			0% {filter: blur(0vh) brightness(100%); opacity:0}
			5% {opacity:1; filter: blur(0vh)}
			21% {filter: blur(1.5vh); opacity:1}
			25% {opacity:0}
			100% {opacity:0}
		}	
		@keyframes slider_prednja_index{
			0% {background-size:auto calc(100vh - 10vh - 5vw - 12vh); filter: blur(1.5vh); opacity:0}
			5% {opacity:1}
			21% { background-size:auto calc(100vh - 27vh - 5vw - 12vh); filter: blur(0vh); opacity:1}
			25% {opacity:0}
			100% {opacity:0}
		}	
/* CAROUSEL */	
	figure{height:100vh; width:100vw; position:fixed; top:0; left:0; background-attachment: scroll}/*100vh da se ne vidi mutni okvir, 5,1em je viši header, a 6em je h1*/ 
	figure:nth-of-type(odd){top:calc(33vh + 5vw); animation-name:slider_prednja} /*prednje*/
	figure:nth-of-type(even){background-size:cover; background-position:center; animation-name:slider_zadnja; top:0; left:0} /*zadnje*/						
		@keyframes slider_zadnja{
			0% {filter: blur(0vh) brightness(100%); opacity:0}
			5% {opacity:1; filter: blur(0vh)}
			35% {filter: blur(1.5vh); opacity:1}
			40% {opacity:0}
			100% {opacity:0}
		}	
		@keyframes slider_prednja{
			0% {background-position:center top; background-size:auto calc(100vh - 10vh - 5vw - 12vh); filter: blur(.7vh); opacity:0}
			5% {opacity:1}
			35% {background-position:center top; background-size:auto calc(100vh - 27vh - 5vw - 12vh); filter: blur(0vh); opacity:1}
			40% {opacity:0}
			100% {opacity:0}
		}	
/* GLAVNI - MAIN */		
	main::before{height:.52vh; box-shadow:0 -0.2vh .2vh rgba(0,0,0,.5)}
	main:before{height:.52vh; box-shadow:0 -0.2vh .2vh rgba(0,0,0,.5)}
	main{margin-top:calc(100vh - 40vh - 5vw); }
		article{width:100vw; padding:0 3vw; box-sizing:border-box}	
			article h1{font-size:6vh; height:12vh; padding-top:3vh}
			article p{font-size:2.5vh; padding:2vh 0; word-break: break-all;}		
			article table{width:94vw; height:40vh;}
				article table tr td{width:20%; border:none; }
					article table tr td div{height:auto; width:100%; font-size:3vw; padding:2vh; box-sizing:border-box; word-break: break-all}	
		/* ovo je samo za zapošljavanje */
		section{width:100%; margin:0; box-shadow:none;}
			fieldset{border:none; line-height:2.5vh; margin-top:2vh; padding:3vh; font-size:2.35vh}
			fieldset h2{margin-bottom:4vh; text-shadow:0 0 1vh white; font-size:4vh}
			fieldset table{margin-bottom:1vh}
			fieldset table tr td:first-child{width:5vh; text-align:right; padding-right:.5vh}
			fieldset table tr:last-child{font-size:1.75vh; line-height:4vh}
			fieldset input, fieldset select{padding:1vh; border:none; margin-bottom:1vh}
			fieldset input[type="submit"]{padding:2vh 0; font-size: 2.7vh; ;}
			fieldset input[type="submit"]:hover{filter: brightness(115%); text-shadow:0 0 2vh black}			
			fieldset input[type="checkbox"], fieldset input[type="radio"]{cursor:pointer;}
/* FOOTER */
	footer{width:100vw; padding:7vh 3vw 3vh 3vw; background-color:white; margin:0;}	
		footer table{width:94vw; margin:0; font-size:2.8vw}
		#footer_logo{display:block; position:static; float:left; width:24vw; height:auto; position:static; }
/* INFORMATOR */	
	#informator::before{width:3vh; height:2.2vh; position:absolute; top:.5vh; right:.5vh;}
	#informator{width:70vw; height:50vh; top:25vh; left:15vw; font-size:2.2vh; z-index:1000; padding:5vh; }	
}