@font-face {font-family:naslovni; src: url(/fontovi/montserrat-light.otf)}
@font-face {font-family:naslovni; src: url(/fontovi/montserrat-regular.otf); 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;
	--plava:#2D4A83;
	--crna: #333;
	--crvena:#BE0000;
	--bordo:#8F0000;
	--siva:rgb(88, 69, 38);
	--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;}

body{color:black; font-family:'Tahoma', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; transition:ease-in-out .2s; }	
main{padding: 0; /*filter:blur(5px)*/}	
section:first-of-type{padding-top:25vh !important ;}
@media only screen and (max-width:768px) {section:first-of-type{padding-top:20vh !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;}

/*background*/
.pozadina{position:fixed; top:0; left: 0; width: 100vw; height: 100vh; z-index: -1; transition:ease-in .2s;
		background-position: bottom center; background-size: cover; transform:scale(1.01)}
.bg-crvena{background:linear-gradient(var(--bordo), var(--crvena));}
.bg-bjelkasta{background-color: rgba(255, 255, 255, 0.5);}

/*kartice*/
.kartica{border:.5em solid white; background-color: white; width:27%; position: relative; transition:.2s; padding: 0 !important; overflow: hidden;}
	.kartica img{width:100%; height:180px; object-fit: cover; transition:ease-in .2s;}
	.kartica h3{position: absolute; top:-.1em; left: 0; text-align: center; width: 100%; padding: 0 !important; margin: 0 !important; }
		.kartica h3>span{background-color: white;  padding:.2em 1.5em; color: var(--bordo); line-height: 100% !important;
						clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 100%, 1em 100%); transition:.2s;
						box-shadow: 0 -1em 1em -1em rgba(0, 0, 0, 0) inset; display: inline-block; width: auto; height: auto;
						/*overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;*/}
		.kartica .podnaslov{margin-top: -.2em; margin-bottom: -.2em; color:#333; transition: inherit;}				
	.kartica ul{list-style-type:none; text-align:left !important}
	.kartica:hover{border:.5em solid var(--crvena); border-bottom: .5em solid var(--bordo); border-top: .5em solid var(--bordo);}
	.kartica:hover img{transform:scale(1.05);}
	.kartica:hover h3>span{background-color:  var(--bordo); color: white; box-shadow: 0 -1em 1em -1em rgba(0, 0, 0, 0.733) inset;}
	.kartica:hover .podnaslov{display: none}
	/*CIJENA*/
	.kartica .cijena{position: absolute; bottom:0em; left: 0; text-align: center; background-color: rgba(255, 255, 255, 0.7); 
					width: 100%; margin: 0 !important; transition: inherit;  padding-bottom:.35em !important;}
	.kartica .cijena small{display: block}	
	.kartica:hover .cijena{font-size:80%; background-color:var(--bordo); color: white; padding-bottom:0 !important;}		
	.kartica:hover .cijena small{display: none;}	
	/*POPUST*/	
	.kartica .popust{position: absolute; bottom:0em; right: 0; 
		text-align: right; background:linear-gradient(45deg, var(--bordo), var(--crvena)); 
		width:5rem; height:4rem; margin: 0 !important; transition: inherit;  padding:.5em;
		clip-path: polygon(100% 0, 0% 100%, 100% 100%); display:flex; align-items: flex-end; justify-content: flex-end;}	
@media only screen and (max-width:90rem) {.kartica{width:40%;}}
@media only screen and (max-width:62rem) {.kartica{width:100%;}}
@media only screen and (max-width:25rem) {.kartica h3{font-size:1rem !important;} .kartica h2>span{padding:.2em 1em;}}
@media only screen and (max-width:22rem) {.kartica .cijena{text-align: left;}}
@media only screen and (max-width:18rem) {.kartica .popust{display:none}}

/*botuni*/
.crveni-botun{background: linear-gradient(var(--crvena), var(--bordo)); color:white !important;
	background-size: 100% 100%; border:.3rem solid var(--bordo); }
.crveni-botun img{filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1000%);}
.crveni-botun select{color:white !important; cursor: pointer;}
.crveni-botun:hover{ background:linear-gradient(white, white); border-color: var(--bordo); color:var(--bordo) !important;}
.crveni-botun:hover select{color:var(--bordo) !important}
.crveni-botun:hover img{ filter:none}

/*text*/
.text-crni{color:var(--crna)}
.text-crveni{color:var(--crvena)}
.text-bordo{color:var(--bordo)}
.text-justify{text-align: justify;}
.naslovni{font-family: 'naslovni','Verdana', sans-serif;}	
.naslov>span{width:auto !important; background-color: var(--crvena); color: white !important; padding:.2em 1em;
		position: relative; left:0; top:.25em;/*word-break: break-all;*/
		background:linear-gradient(var(--crvena), var(--bordo));
		clip-path: polygon(calc(100% - .25em) 0, 100% 50%,calc(100% - .25em) 100%,.25em 100%, 0 50%,.25em 0);}	
@media only screen and (max-width:16em) {.naslov>span{font-size:80%}}					
.boldest{font-weight: 900 !important;}
.fs-7{font-size: 85% !important;}
.fs-8{font-size: 65% !important;}
.fs-9{font-size: 55% !important;}
.fw-extrabold{font-weight: 900;}
.rečenica:first-letter{text-transform: uppercase !important; }

/*borderi i clippath*/
.sjena{box-shadow: 0 0 .5em -.2em rgba(0, 0, 0, 0.5);}
.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; min-height:var(--visina_botuna_headera); background-color:white;}
		#header_logo{position:fixed; top:0; left:0; display: block; background-color: white;
				height:calc(var(--visina_botuna_headera) + .5em); width: calc(var(--visina_botuna_headera) * 4.1);
				padding:.3em .5em; padding-right: 1em;
				overflow: hidden; 
				clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - .5em),calc(100% - .25em) 100%, 0% 100%);
				text-decoration: none !important;}
			#header_logo>img{height: 75%;object-position: top left; object-fit: contain;}
			@media (max-width:20.5em) {
				#header_logo{font-size: .7em !important; width: calc(100% - var(--visina_botuna_headera));height:var(--visina_botuna_headera);}
				#header_logo>img{height:100%;object-position:center;}
				#header_logo blockquote{display: none; }
			}
		#header_menu{position: fixed; top: 0; right:0;
				width: var(--visina_botuna_headera); height: var(--visina_botuna_headera);
				background:linear-gradient(var(--bordo), var(--crvena)); background-size:cover;
				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:calc(100% - (var(--visina_botuna_headera) * 4.1)); /*max-width: 80em;*/ 
					height:100%; z-index:200000; position: relative; left: 0; top: 0; transition:ease-in-out .2s; 
					margin-left: calc(var(--visina_botuna_headera) * 4.1);
					clip-path: polygon(1em 50%, 0 0, 100% 0, 100% 100%, 0 100%);}	
			header nav div, header nav form{display: flex; align-items: center; flex-wrap: wrap; justify-content:flex-start;}	
			header nav div{width: 100%; height:calc(var(--visina_botuna_headera) * 0.8);  }	
			header nav form{width: 100%; height:calc(var(--visina_botuna_headera) * 0.2);  background-color:var(--bordo);}	
				header nav a, header nav button{width:auto; height: 100%; padding:0 .5rem; 
							display:flex; align-items: center;align-content:center;  flex-wrap: wrap; justify-content: center;
								color:var(--crvena) !important; text-decoration: none; 
								background:linear-gradient(var(--crvena) 0%, var(--bordo) 100%); transition:.25s; 
								background-size:100% 00%; background-repeat: no-repeat; text-align: center;}	
				header nav div a{min-width:calc(16.6666666% + .8rem); /*align-content: flex-end;*/ padding-top: .25em;
								clip-path: polygon(.75rem 0%, 100% 0%, calc(100% - .75rem) 100%, 0% 100%);
								margin-left: -.8rem;}	
				header nav div a:last-of-type{clip-path: polygon(.5rem 0%, 100% 0%, 100% 100%, 0% 100%);}							
				header nav button{ background-size:100% 00%; background-repeat: no-repeat; font-size:.7rem !important;
								background-position: bottom;  transition:.2s; color:white  !important;
								background-image:linear-gradient(white 0%, white 100%);}					
					header nav a:hover, header nav a.disabled, header nav button:hover{background-size: 100% 100%; color:white !important; }
					header nav button:hover{color:var(--crvena) !important}
		/*mobitel*/		
		@media (max-width:74em) {
			#header_menu{display: block;}
			header nav{ width:auto; max-width:100%; position: fixed; left:auto;  right:-100%; 
					top:var(--visina_botuna_headera); height:auto !important; text-align: right;
					background-color:var(--crvena) !important; margin-left:0; display: block;
					clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem) !important; }
				header nav div{display: block; height: 100%; width:auto; padding: 0;}
					header nav a, header nav a.disabled{display: block; margin-left:0rem !important; min-width:0; width:100%;
														background: none; padding:.5rem; color:white !important; text-align: right; 
														padding-left:1rem; padding-right:1rem; clip-path: none !important}
					header nav form{display: none;}
					header nav a:hover{color: var(--bordo) !important;}
					header nav a.disabled{color:var(--bordo) !important; pointer-events: none; margin-left: -1em;}		
		}	
														

/* -----------FOOTER------------- */
footer::before{content: ''; display: block; width:100%; height: 1em;background:linear-gradient(var(--bordo),var(--crvena)); margin-top: 4em;}
footer{background:linear-gradient(rgba(255, 255, 255, 0.7),rgba(255, 255, 255, 1)); padding:0em !important; margin: 0 !important;}		
	footer a{color:var(--crna) !important;}	
	footer a:hover{color:var(--bordo) !important}	
	footer address a{text-decoration:none !important; color: white !important; display:block; margin:.5rem; padding:.25em;
					background:linear-gradient(var(--crvena), var(--bordo)); background-size: 100% 100%; background-repeat: no-repeat;
					background-position: center;
					width:10.5em !important; height:10.5em;
					display: flex; align-content: center; justify-content: center; flex-wrap: wrap; line-height: 100%;
					font-size:70%; /*transition:ease-in .5s;*/ border:.35em solid transparent; 
					/*clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);*/}
	footer address a:hover{color:var(--crvena) !important; background:linear-gradient(white, white); border-color: var(--bordo);}
	footer address a:hover img{filter:none}
		footer address a>img{width:50%; height:auto; object-fit: contain; object-position: bottom; margin-bottom:.75em;
							filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(1000%);}				
	footer address a:link{text-decoration:none !important;}		
	footer button[type="button"]:hover{background:none; background-color: var(--bordo);}	
	#drustvene a{width:5em !important; height: 5em; padding:0; align-items: center;display: flex; align-content: center; margin:.1rem;}
		#drustvene a>img{width:60%; height:60%; margin-bottom:0;}
	#GDPR>div{padding:.25rem 1.5rem; clip-path: polygon(1rem 0%, calc(100% - 1rem) 0%, 100% 100%, 0% 100%);}	
	@media (max-width:26em) {#GDPR>div{padding:.25rem 1rem; clip-path:none;}}
	
/*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;}}

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