@font-face {font-family:naslovni; src: url(/fontovi/MontserratAlternates-Medium.ttf)}
@font-face {font-family:naslovni; src: url(/fontovi/MontserratAlternates-Bold.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: 26rem;
	--plava:#2D4A83;
	--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:black; }
button{border-style: solid;}
button:disabled{opacity:1; /*filter:grayscale(50%);*/ pointer-events: none;}

body{color:black; font-family:'Verdana', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
	background-image: url('/slike/body_background.webp'); background-size:100vw 100vh; background-attachment: fixed;}	
main{animation: main_anim .7s ease-in-out infinite alternate; transition: .25s; transition-property: background-size;
	background-color:var(--trenutna_boja);/*default koji php pregazi*/}	
@keyframes main_anim{
	from {background-color:var(--main_boja_1);}
	to{background-color:var(--main_boja_2);}
}
section:first-of-type, footer{padding-top:4em !important;}
@media only screen and (max-width:768px) {footer{padding-top:0em !important;}
										section:first-of-type{padding-top:2em !important}}
.object-position-bottom{object-position: bottom;}
.object-position-top{object-position: top;}
.object-position-center{object-position: center;}
.object-position-right{object-position: right;}
.object-position-bottom-right{object-position:bottom right;}
.object-position-top-right{object-position:top right;}
.object-position-bottom-left{object-position:bottom left;}


/*kartice i bg*/
.kartica{outline:.75em solid white; border:.75em solid var(--zlatna); background-color: white; box-shadow: 0 0 1em black;}
.kartica ul{list-style-type:none; text-align:left !important}
.card{width:27%; max-width:25rem}
@media only screen and (max-width:78rem) {.card{width:40%;}}
@media only screen and (max-width:768px) {.card{width:90%;}}
.nakošen{transform: rotate(-1deg);}	
.nakošen_2{transform: rotate(1deg) !important;}	
@media only screen and (max-width:576px) {.nakošen, .nakošen_2{transform: none  !important;;} }
	
.bg-pod{background: linear-gradient(-2deg, black, 
				black calc(var(--visina_botuna_headera) * 1.5), 
				transparent calc(var(--visina_botuna_headera) * 1.5 + .5em) , 
				transparent);
				background-position: bottom; background-size: 100% auto;}
.bg-strop{background: linear-gradient(180deg, black, transparent 80%);
		background-position:top; background-size:100% 100%;}	
.bg-strop_i_pod{background: linear-gradient(180deg, black, transparent 80%),
				linear-gradient(-2deg, black, 
				black calc(var(--visina_botuna_headera) * 1.5), 
				transparent calc(var(--visina_botuna_headera) * 1.5 + .5em) , 
				transparent);
			background-position:top, bottom; background-size:100% 100%, 100% auto;}				

/*motina*/				
.motina{object-fit: contain; width: 100%; height: 100%; display: block !important; 
		position: relative; z-index: 1; margin-left:-2em; margin-top:-1em; max-height:40em !important}		
@media only screen and (max-width:768px) {.motina{margin-top:-2em}}		

/*botuni*/
.krug{border-radius:100% !important}
.botun.iduci_section{height: calc(var(--visina_botuna_headera) / 2); width:calc(var(--visina_botuna_headera) / 2); border-radius: 100%;
				margin-bottom:calc(var(--visina_botuna_headera) / 2); transform: rotate(-90deg);}
.botun.iduci_section:hover{border-color:black; border-left-color:red; }				
.botun{border-color:var(--zlatna); background-color: white; transition: .2s; border-radius: .5em;}
.botun:hover{border-color: black !important; color:var(--zlatna) !important; background-color: black !important; }
.kartica .botun{ border-bottom-left-radius:0; border-bottom-right-radius:0;margin-bottom: 0em; margin-top:0.15em;  }
.kartica .botun:hover{ border-bottom-left-radius:.5em; border-bottom-right-radius:.5em; margin-bottom: 0.15em; margin-top:0em; }

/*text*/
.text-zlatni{color:var(--zlatna)}
.text-justify{text-align: justify;}
.naslovni{font-family: 'naslovni','Verdana', sans-serif;}	
.boldest{font-weight: 900 !important;}
.fs-7{font-size: 85% !important;}
.fs-8{font-size: 70% !important;}
.fw-extrabold{font-weight: 900;}
.rečenica:first-letter{text-transform: uppercase !important; }
.text-zlatni{color:var(--zlatna) !important}

/*borderi i clippath*/
.sjena{box-shadow: 0 0 .75em rgba(0, 0, 0, 0.7);}
.bjeli_border{border:1em solid white; }							
.bevel{clip-path: polygon(.5em 0%, calc(100% - .5em) 0%, 100% .5em, 100% calc(100% - .5em), calc(100% - .5em) 100%, .5em 100%, 0% calc(100% - .5em), 0% .5em);}
.border-bronca{border:1px solid var(--bronca); transition: .2s;}	
	.border-bronca h4, .border-bronca h5, .border-bronca h6{transition: .2s;}
	.border-bronca:hover h4, .border-bronca:hover h5, .border-bronca:hover h6{background-color: var(--bronca); color:white; transition: .2s;}
.breadcrumb-item{text-decoration: underline !important;}	
.breadcrumb-item.active{text-decoration: none !important; color: var(--bronca);}	

/*BScarousel*/
.carousel-control-next{justify-content: end;}
.carousel-control-prev{justify-content: start;}
.carousel-control-next-icon, .carousel-control-prev-icon{background-color: black; background-size: 70% !important; opacity: 1 !important;}

/*------------------------------------------------------------------HEADER--------------------------------------------------------------------------------------*/
	header{position: fixed; left: 0; top:0; width: 100%; z-index: 10000; transition: .2s; 
			background: linear-gradient(#fff 0%, #fff 100%);background-size:100% 0; background-position: top; background-repeat: no-repeat;}
		#header_logo, #pocetna{position:fixed; top:0; left:calc((100% - var(--sirina_header_Logo)) / 2); display: block;
				height:var(--visina_botuna_headera); width: var(--sirina_header_Logo);overflow: hidden; object-position: top left; object-fit: contain;}
				/* art box je 18rem */
			@media (max-width:35em) {#header_logo span{font-size: .8em !important;}}
			@media (max-width:20em) {#header_logo span{display: none;}}
			#pocetna{width: calc( var(--sirina_header_Logo) / 1.3 ); z-index: 1000000; left:calc((100% - (var(--sirina_header_Logo) / 1.3)) / 2);}
		#header_menu{position: fixed; top: 0; right:0;
				width: var(--visina_botuna_headera); height: var(--visina_botuna_headera);
				background-color: black; 
				border-bottom-left-radius: 1.25rem;
				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{width:100%; height:100%; z-index:200000; position: relative; left: 0; top: 0; transition:ease-in-out .2s; }	
			header nav .polovica{width:50%; padding-right: calc( var(--sirina_header_Logo) / 2.6 ) !important; float:left;
								display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-wrap: wrap;}	
			header nav .polovica:last-of-type{padding-right:0 !important; padding-left: calc( var(--sirina_header_Logo) / 2.6 ) !important; justify-content: flex-start;}	

				header nav a{width:auto; min-width:4.5em; padding:.5rem .75rem; color:rgb(0, 0, 0) !important; text-decoration: none; font-size: 110%;
							background:linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0) 100%); transition: .2s; 
							background-size:100% 00%; background-repeat: no-repeat; border-bottom-left-radius:.75rem; border-bottom-right-radius: .75rem;
							/*border-bottom:1px solid transparent;*/ text-align: center; margin:0 1px ;}		
				header nav a:hover, header nav a.active{background-size: 100% 100%; color:var(--zlatna) !important; }
		@media (max-width:86em) {header nav a{font-size:100% !important;}}
		/*mobitel*/		
		@media (max-width:80em) {
			#header_logo, #pocetna{left:calc(((var(--sirina_header_Logo)) / 3.3) * -1);}
			#header_menu{display: block;}
			header nav{width:auto; max-width:100%; position: fixed; left:auto;  right:-100%; top:var(--visina_botuna_headera); background-color: black; 
					height:auto; padding: 1rem; padding-bottom: .75rem; border-top-left-radius:1.25rem; border-bottom-left-radius: 1.25rem; text-align: right;
					border-left: 3px solid var(--zlatna);}
				header nav .polovica{width:100%; display: block; padding: 0 !important; float:right !important; clear: both;}
				header nav .polovica:last-of-type{padding: 0 !important;}
					header nav a{color: white !important; display: block; padding:.35rem 0rem; text-align: right;}
					header nav a:hover{background-size: 100% 0%; color:var(--zlatna) !important; border-bottom-color:transparent;}
		}	
		@media (max-width:15em) {:root {--sirina_header_Logo: 20rem;}}	
		@media (max-width:11.5em) {#header_logo {display: none;}}													

/* -----------FOOTER------------- */
footer{background-color:black; 
	background:linear-gradient(black, rgba(0, 0, 0, 0.43)), url('/slike/footer-background.webp'), linear-gradient(black, black); 
	background-position:top, bottom, center; 
	background-repeat:no-repeat, no-repeat, no-repeat;
	background-attachment:scroll, fixed, fixed ;
	background-size:100% 100%, 50% auto, cover;
	text-shadow:0 0 .25em black, 0 0 .5em black}		
	@media (orientation: portrait) {footer{background-size:100% 100%, contain, cover;}}	
	footer a{color: white !important;}	
	footer a:hover{color:var(--zlatna) !important}	
	@media (max-width:576px) {footer a.border-start{border-left: none !important;}}
	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 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%)}		
	
/*naslovna*/
	.naslovna{height:calc(100vh - var(--visina_botuna_headera)); overflow: hidden;}
		@media (max-width:768px) {.naslovna{height: auto !important;}
									.iduci_section{display: none;}}
	.naslovna div.bg-black:has(.kartica){height:80%;}
		@media (max-width:768px) {.naslovna .kartica{height:26em !important; margin-bottom:.75em !important;}
								.naslovna div.bg-black{background-color: transparent !important;}}

	.naslovna .carousel-caption{left:0rem; right:0rem; padding-left:3rem !important; padding-right:3rem !important}								
	.naslovna .carousel-control-prev, .naslovna .carousel-control-next{width:2rem; opacity:1 !important }	
	.naslovna .carousel-control-prev-icon,.naslovna .carousel-control-next-icon{filter:none !important; opacity: 1 !important; }	
	.naslovna .carousel-control-prev-icon{border-top-right-radius: .5em; border-bottom-right-radius: 0.5em;}
	.naslovna .carousel-control-next-icon{border-top-left-radius: .5em; border-bottom-left-radius: 0.5em; }			
	.naslovna .carousel-control-prev-icon:hover,.naslovna .carousel-control-next-icon:hover{background-size: 80% !important;}	
	/*@media (max-width:768px){.naslovna .carousel-caption{padding-left:2rem !important; padding-right:2rem !important}	}*/						

/*botuni navigacija*/
.glowing{animation: glowing .6s ease-in-out 0s infinite alternate; }
#botun_navigacije a>div{height:8em; width:8em; border-color: white !important; color: white !important;
						background-blend-mode:soft-light; transition: .2s;
						background-size:50%; background-repeat:no-repeat; background-position:center; 
                        border:.35em solid white; font-size:90%;}
#botun_navigacije a:hover div{background-size:0%; color: var(--zlatna) !important; }						
#botun_navigacije a:nth-of-type(4n - 3)>.glowing{animation-delay: 0s !important;}
#botun_navigacije a:nth-of-type(4n - 2)>.glowing{animation-delay: 0.3s !important;}
#botun_navigacije a:nth-of-type(4n - 1)>.glowing{animation-delay: .6s !important;}
#botun_navigacije a:nth-of-type(4n)>.glowing{animation-delay: 0.9s !important;}
@keyframes glowing{
	from {box-shadow:0 .5em 1em inset #fff9, 0 -.35em 1em inset #000c, 0 0 1em	white}
	to{box-shadow:0 .5em 1em inset #fff9,0 -.35em 1em inset #000c, 0 0 0em white}
}

/*donacije*/
.botun_donacija{width:10em !important; height:10em; }
.botun_donacija:hover{color:var(--zlatna)}

/*prijavnica*/
.prijavnica input, .prijavnica select{border:none; padding:.5em; background-color: transparent; max-width: 100% !important; }
.prijavnica textarea{width: 100% !important; padding:.5em !important; line-height: 100% !important;}
.prijavnica table, .prijavnica tbody{display:block !important;width:100% !important}
.prijavnica tr{border-bottom: 1px solid gray; }
	.prijavnica th, .prijavnica td{padding:.25em 0;  width:50% }
	.prijavnica th>label {line-height:100% !important;}
	@media only screen and (max-width:567px) {.prijavnica th, .prijavnica td {display: block; width:100%; margin:0 !important;}
										.prijavnica th{padding:0 !important ;}
										.prijavnica input, .prijavnica select, .prijavnica textarea{padding:.25em !important; padding-left: 0 !important;width:100%; }
										/*.prijavnica input[type="checkbox"]{padding-top:.3em;}*/
										.prijavnica textarea{display: block !important;}
										.prijavnica th>label{margin: 0;}
										.prijavnica table, .prijavnica tbody{display:block !important;width:100% !important}
											.prijavnica tr{display:block !important; width:100% !important; padding:0.2em 0 !important ;}
										.prijavnica{border-left-width: 0 !important;border-right-width: 0 !important; }}
	.prijavnica th>label{font-weight: normal !important; padding-right: .5em; }
	.prijavnica th>label:first-letter{text-transform: uppercase !important; }
	.prijavnica .form-check-input:checked{background-color:orangered !important}
.prijavnica div.gj-datepicker.gj-datepicker-bootstrap.gj-unselectable.input-group.mb-3	{margin-bottom: 0 !important;}
.modal-dialog{padding-top:4em;}

#g-recaptcha-response, .g-recaptcha textarea, #g-recaptcha-response-1{display: none !important;}