@font-face {font-family:naslovni; src: url(/fontovi/Montserrat-ExtraBold.otf)}
@font-face {font-family: arkhip; src: url(/fontovi/arkhip.ttf);}									
@font-face {font-family: rajdhani; src: url(/fontovi/rajdhani-semiBold.ttf)}					
@font-face {font-family: Quicksand; src: url(/fontovi/QuicksandLight300.ttf); font-weight: initial; font-style: normal;}					
@font-face {font-family: Quicksand; src: url(/fontovi/QuicksandMedium500.ttf);  font-weight: bold; font-style: normal}					
@font-face {font-family: Quicksand; src: url(/fontovi/QuicksandBold700.ttf);  font-weight: 900; font-style: normal}
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;
	--bronca: #8F5E25;
	--sirina_header_loga:16.5em;
	--visina_kartice: 13rem;
}
@media only screen and (max-width:576px) {:root {--visina_kartice: 50vw;}}

/* -------DEFAULTS ----------*/
a:visited, a:hover, a:active, a:link{color:black}
body{color:black; font-family:Quicksand, sans-serif; background-color:white !important; scroll-snap-type: y mandatory; }	
section, footer{padding-top:6em !important;}
@media only screen and (max-width:576px) {section, footer{padding-top:4em !important;}}
.naslovni{font-family:rajdhani, sans-serif;}
.fs-7{font-size: 85% !important;}
.text-justify{text-justify: distribute; text-align: justify;}
.bronca{color:var(--bronca) !important}
.bg-bronca{background-color: var(--bronca);}
.boldest{font-weight: 900 !important;}
.rečenica:first-letter{text-transform: uppercase !important; }
.prestige-botun{border:1px solid var(--bronca); background-color:white; transition: .2s; margin-top: .25em;}
.prestige-botun:hover, .prestige-botun:disabled{background-color: var(--bronca); color:white}
.prestige-botun:disabled{cursor: default;}
.prestige-botun img{transition: inherit; filter:brightness(0) saturate(100%) invert(35%) sepia(77%) saturate(459%) hue-rotate(352deg) brightness(91%) contrast(85%);}
.prestige-botun:hover img{filter:none}
.offcanvas{transition: .5s !important; }
.fw-extrabold{font-weight: 900;}
.object-fit-contain{object-fit: contain;}
.object-fit-cover{object-fit: cover;}
.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);}	

/*-------KARTICE------*/
.card{transition: .2s; height: var(--visina_kartice); overflow: hidden; border-radius: 0 !important; display: block;}
.card:hover{padding: 0 !important; border-radius: 0 !important;}
.card:hover p{opacity: 1; padding-top:0 !important; background-color: #fffa; border:1px solid var(--bronca);}
	.card-samo-slika img{object-fit:cover; width: 100%; display: block; height:var(--visina_kartice);}
	.card-samo-slika p{ height:var(--visina_kartice); width: 100%; position: absolute; bottom:0; left:0; z-index: 1; opacity:0; padding-top:2rem !important; transition:.2s}
	

/* ---------------------------------------------------------------HEADER------------------------------------------------------------------------------------------- */	
header{position:fixed; top:0; left:0; width:100%; min-height:4.2em; z-index:99; 
		box-shadow:0 0 .35em rgba(0,0,0,.25); background-color: white; }
	/*---LOGO---*/
	header .navbar-brand{position: fixed;top:0; left:0; padding: 0; padding-left:.5em; padding-top:0.2em; height:3.5em; margin: 0;
						display: flex; justify-content:space-between; align-content: center; font-size: 1.3em;
						width:var(--sirina_header_loga); overflow: hidden;}	
		header .navbar-brand img{width:auto; height:100%; margin-right: .15em !important; }		
		header .navbar-brand p{font-family:arkhip, sans-serif; font-size:1.7em; color:var(--bronca);
								/*line-height:34%;*/ /*padding-top:.5em;*/ text-align:left; margin: 0 !important;
								display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start;
								padding-bottom: .1em;}
		header .navbar-brand p	span{display: block; line-height:95%; }					
		header .navbar-brand p span:nth-of-type(1){font-size:88%; letter-spacing:-.03em; }						
		header .navbar-brand p span:nth-of-type(2){font-size:37%; font-family:rajdhani}		
	/*---ostalo---*/										
	header .navbar{padding-left:calc(var(--sirina_header_loga) * 1.3) !important;}	
		header .navbar .container-fluid{display: flex; justify-content:flex-end; }
		header .navbar-collapse{display: flex; justify-content:flex-end; flex-wrap: wrap;}
		.nav-link{font-family: Quicksand, sans-serif; font-weight: normal;}	
		.nav-link:after{display:block; width:0%; height:.2em; content: ''; transition:ease-in .24s; margin-left: 50%;
						background-image:url('/slike/ikonice-underline.svg'); background-size:auto 100% ; background-repeat:no-repeat;
						background-position:center;}
		.nav-link:hover:after{width:100%;  margin-left:0%;}	
		.nav-link.disabled, .nav-link:disabled,.nav-link.hover, .nav-link:hover {color: var(--bronca) !important}		
		
	@media only screen and (max-width:70em) {
		header .navbar-brand{font-size:.95em; padding-top:.3em; height:3.8em;}
		header .navbar{padding-left:calc(var(--sirina_header_loga) * .95) !important;}
		header{min-height:3em;}
		.nav-link:after{display: none;}
	}	
	@media only screen and (max-width:992px) {header .navbar{padding-left:.5em !important;}}	
	@media only screen and (max-width:22em) {header .navbar-brand p{display:none}}	
	
		#header_webshop:after{display: none !important; cursor: pointer !important;}
		#header_webshop{cursor: pointer !important; font-weight: bold !important;}
		#header_webshop img{height:1.2em; transition:.4s; filter:grayscale(100%) contrast(400%); object-position:center; display: inline;}
		#header_webshop:hover img{filter:grayscale(0%) contrast(100%)}	

	/*---bandalux---*/	
	header:after{content:''; display:block; height:1.25em; width:8em; background-color:white; background-image:url(/slike/ikonice-Bandalux_Logo.svg);
				background-size:auto 50%; background-repeat:no-repeat; background-position:70% center; 
				border-bottom-left-radius:1em; position: absolute; bottom:-1.25em; left:calc(100% - 8em); box-shadow: 0 0.1em .2em -.05em rgba(0,0,0,.25);}


/* -------------------------------------------------------------------------------------NASLOVNA ----------------------------------------------------------------------------------------*/	
	#naslovna{height:50vh; padding-top:3.2em !important;}
	@media only screen and (max-width:567px) {#naslovna{height:55vh;}}
		#naslovna>.carousel{height: 100% !important;}
			#naslovna>.carousel img{height: 100% !important; object-fit: cover; object-position: center;}
		#naslovna_zlatna_crta{height:1.2em !important; width:100%; transform:rotate(180deg); object-fit: cover;
							position: relative; top:-.8em; left: 0; z-index:2; }


/* ------------------------------------------------------------------------------------FOOTER---------------------------------------------------------------------------------- */	
footer:before{height:.7em !important; width:80%; margin-top: -.35em; margin-left: 10%; margin-bottom:2em;
		background-image: url(/slike/webshop_karniša.svg); 
		background-size: contain; background-repeat: no-repeat;
		display: block; content: ''; transform: rotate(180deg);}	
	@media only screen and (max-width:576px) {footer:before{width:100%; margin:0 !important; margin-left:0% !important; height:2vw !important; background-size: 117% auto; background-position: center;}}	
	footer address a{margin:0; padding:.75em; text-decoration: none; width:auto !important; line-height: 120%; display: block; }	
	footer address a>div{width:auto !important; }	
	footer address a img{width:3.5em; height: auto; margin-bottom: .45em;}	
	footer address a:hover{color: var(--bronca);}	
	#drustvene img{width:2em; height:2em; object-fit: contain; object-position: center;}	
	#drustvene a{padding:.5em; filter: grayscale(100%); transition: .1s;}	
	#drustvene a:hover{ filter: grayscale(0%);}

	.footer_navigator{text-decoration: none !important; padding: 0 1em; display: inline-block !important; border-left: 1px solid var(--bronca);}
	.footer_navigator:after{display:block; width:0%; height:.2em; content: ''; transition:ease-in .24s; margin-left: 50%;
	background-image:url('/slike/ikonice-underline.svg'); background-size:auto 100% ; background-repeat:no-repeat;
	background-position:center;}
	.footer_navigator:hover:after{width:100%;  margin-left:0%;}	

	@media only screen and (max-width:576px) {
	footer address a{width:100% !important; padding:.35em;}
	footer address:last-of-type a{width:auto !important;}
	footer address a>div{width:auto !important; display: inline;}
	footer address a img{width:2em; height: auto; margin-bottom:0em; margin-right: .25em ;}	
	#address-break{display: none;}
	.footer_navigator{display: block; width:100%; border:none; padding: .1em 0;}
	.footer_navigator:after{display:none;}
	}
	#GDPR{width:100%; position:fixed; bottom:0; left:0; box-shadow: 0 0 .5em rgba(0, 0, 0, 0.eded#ededed); z-index: 100;}						
	#GDPR button, #GDPR a{display:inline-block; cursor: pointer; padding:0.1em .5em; word-break: normal; text-decoration: none !important;}

/* -------------------------------------------------------------------------------KOŠARICA------------------------------------------------------------------------*/
		
#kosarica_container{position:fixed; width:100% !important; height:100vh !important; 
		/*background-color:rgba(46, 42, 42, 0.908); */padding-top: 0 !important;
		top:-200vh; left:0; transition:ease-out .5s; z-index:100; /*box-shadow:0 0 1em rgba(46, 42, 42, 0.908)*/}
#kosarica_container>div{box-shadow:0 -1vh 2vh -.5vh white, 0 0 20vh black, 0 0 30vh black, 0 0 30vh black, 0 0 50vh black, 0 0 100vh black; 
					height:100%; overflow-y:auto; overflow-x: hidden; border:2px solid #ddd; border-top: none;
					border-bottom-left-radius:.2em; border-bottom-right-radius:.2em;
					background:
					radial-gradient(circle farthest-side at 0% 50%,#ededed 23.5%,rgba(240,166,17,0) 0)5.25px 7.5px,
					radial-gradient(circle farthest-side at 0% 50%,#dedede 24%,rgba(240,166,17,0) 0)4.25px 7.5px,
					linear-gradient(#ededed 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#ededed 0)0 0,
					linear-gradient(150deg,#ededed 24%,#dedede 0,#dedede 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#dedede 0,#dedede 76%,#ededed 0)0 0,
					linear-gradient(30deg,#ededed 24%,#dedede 0,#dedede 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#dedede 0,#dedede 76%,#ededed 0)0 0,
					linear-gradient(90deg,#dedede 2%,#ededed 0,#ededed 98%,#dedede 0%)0 0 #ededed;
					background-size:10px 20px;}	
										
/* TEKSTILNI PROIZVODI I OSTALO */
		#navigator_kategorije{width:100%; height:auto; text-align:center; margin:0; padding:0}
			#navigator_kategorije a{color:black; text-decoration:none}
			#navigator_kategorije a:hover{color:#8F5E25}
			#navigator_kategorije button{display:inline; color:black; background:none; border:none; clear:none; font-family:QuicksandLight, sans-serif;
								font-size:1em; cursor:pointer}
			#navigator_kategorije button:hover{color:#8F5E25}
		#kategorije{display:flex; justify-content:center; align-content:flex-start; width:100%; height:auto; flex-wrap:wrap}
			#kategorije button{width:12em; height:auto; margin:0.5em; padding:0; cursor:pointer; overflow:hidden; 
								background-color:white; color:black; border:.1em solid white; font-family:QuicksandLight, sans-serif;
								font-size:1em; }	
			#kategorije button:hover{color:#8F5E25; border:0 solid white;}	
			#kategorije button:hover figcaption{margin-top:.1em}	
				#kategorije figure{width:100%; height:100%; display:block; padding:0; margin:0; }	
					#kategorije img{width:100%; height:10em; display:block; object-fit:contain; object-position:bottom}	
					#kategorije figcaption{width:100%; height:auto; display:block; text-align:center}	
		#proizvod{display:block; width:100%; height:auto; min-height:15em; padding-top:2em }
			#proizvod figure{display:block; width:40%; height:100%; margin:0; padding:0; margin-right:0%; float:left; font-size:.5em }
				#proizvod img{display:block; width:100%; height:100%; object-fit:contain; object-position:right }
				#proizvod figcaption{margin-top:-2em; text-overflow:ellipsis; display:block; width:100%; box-sizing:border-box; padding:.5em;
									height:2em; text-align:right}
			#proizvod div{width:60%; height:auto; float:left; text-align:left; font-family:QuicksandLight; padding:1em 0; padding-left:2em;
						box-sizing:border-box}					
				#proizvod div h2{text-align:left; font-family:QuicksandLight, sans-serif; margin:0; margin-bottom:.2em}					
				#proizvod div h6{font-size:70%; color:#ededed; font-family:QuicksandLight, sans-serif; font-weight:normal; margin:0}					
				#proizvod div p{font-family:QuicksandLight, sans-serif; padding:0; margin:0; line-height:110%; margin:.25em 0; width:100%}					
					#proizvod div p span{font-size:75%; color:#ededed;}
			#proizvod select{padding:.5em; font-family:QuicksandLight, sans-serif; color:black; border:.1em solid #ededed; 
							background-color:#dedede; margin-top:.2em}
			#proizvod input{padding:.5em; font-family:QuicksandLight, sans-serif; border:.1em solid #ededed; font-size:1em}
			#proizvod input[type=number]{width:4em; margin-top:.5em}
			#proizvod button{padding:.5em; font-family:QuicksandLight, sans-serif; margin-top:.5em; font-size:1em; cursor:pointer;
							color:black; border:.1em solid #ededed; background-color:#dedede}
			#proizvod_izvedenice{width:100%; clear:both; margin:.5em 0 }
				#proizvod_izvedenice button{float:left; border:.15em solid white; box-sizing:border-box; width:7em; height:7em; background-color:white;
											background-position:center; background-size:cover; background-repeat:no-repeat; cursor: pointer;
											margin:.5em}
				#proizvod_izvedenice button:hover{border:.1em solid white; }

/* ---------------------------------------------------- ZAVJESE PO MJERI ----------------------------------------------------*/
	#webshop{width:100%; height:calc(100vh - 5em); overflow:hidden; background-size:auto 100%; margin:0; padding:0; 
			background-image:url(/slike/webshop_forma_bg.webp); background-repeat:repeat-x;
			background-position: center; scroll-snap-stop: always; scroll-snap-align:end !important;}
		#webshop_zlatna_crta{height:.5em;  width:100%; background-color: var(--bronca); margin-bottom: .2em;}
			#zavjese_container{width:calc(7 * 100%); height:100%; transition:ease-in-out .9s; padding:0; }
				#webshop .zavjesa{width:calc(100% / 7); height:100%;  transition:inherit; float: left; }
					#webshop .zavjesa .naramenice{height:.8em; background-color:none;margin-top:-.8em;
													background-image: repeating-linear-gradient(90deg, white 0%, white 3%, transparent 3%, transparent 7%, white 7%, white 10%);}
					@media only screen and (max-width:800px) {#webshop .zavjesa .naramenice{background-image: repeating-linear-gradient(90deg, white 0%, white 6%, transparent 6%, transparent 14%, white 14%, white 20%);}}
					#webshop .zavjesa fieldset{background-color: white; height:calc(100% - 2em) !important; position: relative; overflow-y: auto; 
												/*display: flex; justify-content: center; align-content: center; align-content:center; flex-wrap: wrap;*/
												border-top:1em solid white; border-bottom:1em solid white; padding: 1em !important;}
					#webshop .zavjesa .falde{height:0.5em; background-image:url(/slike/webshop_falde.svg); 
										background-size:10% auto; background-position:top left; background-repeat: repeat-x;}	
					/* kartice*/
					.zavjesa .card{border:1px solid var(--bronca); transition: .2s; height: auto !important; width: var(--visina_kartice); background-color: var(--bronca);}
						.zavjesa .card .carousel-inner, .zavjesa .card .carousel-item{height:10em !important; 
											background-image: url('/NESA/NESA_files/slike/ikonice-nedostupna_slika.svg');
											background-size: contain; background-position: center; background-repeat: no-repeat;}
						.zavjesa .card .carousel-control-prev-icon, .zavjesa .card .carousel-control-next-icon{filter: brightness(0) saturate(100%) invert(35%) sepia(77%) saturate(459%) hue-rotate(352deg) brightness(91%) contrast(85%);}
						.zavjesa .card-body{position: relative; bottom:1em !important; padding:0 1em !important; z-index: 1; }
						.zavjesa .card-body .prestige-botun{ box-shadow:0 0 0.5em -0.1em rgba(0, 0, 0, 0.7);}
						.zavjesa .card-body .prestige-botun:hover{border:1px solid white; }
						.zavjesa .card-body p{padding:0 !important; margin: 0 !important; margin-top:.2em !important; margin-bottom: -.5em !important; pointer-events: none !important; border: none !important; background:none !important; color: black !important;}
						.zavjesa .card-body p:hover{padding:0 !important; margin: 0 !important; margin-bottom: -.5em !important; border: none !important; background:none !important;}
						.zavjesa ul{list-style-type: none;}
							.zavjesa li{margin-bottom: .25em !important; list-style-type: none;}
								.zavjesa li span{color: var(--bronca);}
						.zavjesa input[type="checkbox"]{border-color: var(--bronca) !important; border-radius:0 !important;}		
						.zavjesa input[type="checkbox"]:checked{background-color: var(--bronca) !important; border-color: var(--bronca) !important;}	
						@media only screen and (max-width:576px) {.zavjesa .card{width:100% !important;} .zavjesa li{margin-bottom: .15em !important;}}