@font-face{font-family:osnovni; src: url(/fontovi/Raleway-Regular.ttf)}
@font-face{font-family:osnovni; src: url(/fontovi/Raleway-SemiBold.ttf); font-weight:bold}
@font-face{font-family:naslovni; src: url(/fontovi/Bauer.ttf); }
@font-face{font-family:naslovni; src: url(/fontovi/Bauer.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:12rem;
	--sirina_headera: 100%;
	--plava:#83256D;
	--modra:#5397D1;
	--zlatna: #D09360;
	--crvena:#AC093C;
	--main_boja_1: rgba(159, 122, 2, 0.474); /*default*/
	--main_boja_2: rgba(159, 122, 2, 0.703); /*default*/
	--visina_butelje: calc(100vh - 15em)
}
/* -------DEFAULTS ----------*/
a:visited, a:active, a:link{color:inherit; text-decoration: none ;}
a:link{color:var(--zlatna);}
button{border-style: solid;}
button:disabled{opacity:1;  pointer-events: none;}

body{border:none; padding:0; box-sizing:border-box; margin:0; font-size:1em; font-family:osnovni, sans-serif; }
/*intro efekti i scrollpadding*/
article[id]{padding-top:calc(var(--visina_botuna_headera) + 1em) !important; opacity:0; /*filter:sepia(100%);*/
							transition:0.65s ease-in}
/*section:has(article[id]){padding-top:2em; transition:ease-in .5s}	*/						

section.vinograd:after{content: ''; width:100%; height: 15.33vw; display: block;
				background-image: url('/slike/vinograd.svg'); background-repeat: no-repeat;
				background-size: 100.5% auto; background-position:0% 100%; margin-bottom: calc(-1 * var(--visina_botuna_headera)); margin-top: -.5em;}

.naslovni{font-family:naslovni, 'Times New Roman', Times, serif; line-height: 75% !important;}
.text-zlatni{color: var(--zlatna) !important;}
.text-plavi{color: var(--plava) !important;}
.bg-modra{background-color: var(--modra);}
.bg-plava{background-color: var(--plava);}
.bg-zlatna{background: linear-gradient(45deg, transparent 15%, #dfad84 20%, transparent 25%, transparent 100%), var(--zlatna); 
			background-size:100% 100%, cover; background-position:bottom left, center; background-repeat: no-repeat; 
			 animation:presijavanje 5s infinite ease-in alternate;}	
@keyframes presijavanje{
	0%{background-size:100% 100% }
	100%{background-size:1000% 1000%  }
}			

.animirani-naslov{animation: animirani-naslov 4s infinite; }		
@keyframes animirani-naslov{
	0%{opacity:0.2;}
	30%{opacity:1}
	60%{opacity:1}
	100%{ opacity:0.2}
}
@media (max-width:768px) {.animirani-naslov{animation:none}}
.plavi-shadow{text-shadow:-0.03em -0em .05em #393185, 0em -0em .05em #393185}
.btn-close, .carousel-control-next-icon,.carousel-control-prev-icon{opacity: 1 !important;}
.lh-0{line-height: 95%;}
.times{font-family: 'Times New Roman', Times, serif;}
.veliko-slovo:first-letter{font-size: 140%; font-weight:bolder;}
.fs-7{font-size: 80%;}

/*------------------------------------------------------------------HEADER--------------------------------------------------------------------------------------*/
header nav{position: fixed; left:0; top:0; width:var(--sirina_headera); 
		height:var(--visina_botuna_headera); transition: .2s; background-color: black;  z-index: 10000; 
		display: flex; justify-content: center; align-content: flex-start; flex-wrap: wrap; overflow: visible; border-bottom: 1px solid black;}
	header nav .polovica{width:calc((100% - var(--sirina_header_Logo)) / 2); height: 100%;
						   display: flex; justify-content:space-around; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}	
	.header_logo{background-color: white; width:var(--sirina_header_Logo); padding:.75em 0em; height:auto;
				border: 1px solid black; border-top: none;
				display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
		.header_logo img{height:auto; width: 50%; object-position: center; object-fit: contain;}
		.header_logo h1{font-size:calc(var(--sirina_header_Logo) * 0.125); padding:0;margin:0; padding-top: .2em; }		

	#header_menu{position: fixed; top: 0; right:0;
			width: var(--visina_botuna_headera); height: var(--visina_botuna_headera);
			background-color: black !important; 
			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 a{width:auto; height: 100%; 
					text-decoration: none; 
					background:linear-gradient(white 0%, white 100%); transition: .2s; 
					background-size:100% 00%; background-repeat: no-repeat; background-position: top;
					display: flex; align-items: center; justify-content: center; padding:0 .75em ;
					flex:1; /*clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 95%, 40% 100%, 0 100%);*/}		
			header nav a:hover, header nav a.active{background-size: 100% 100%; color:black !important; }
	/*mobitel*/		
	@media (max-width:70em) {
		:root {--sirina_header_Logo:10rem;}
		header{position: fixed; left: 0; top:0; width: 100%; z-index: 10000; background-color: black;height:var(--visina_botuna_headera); }
			.header_logo{position: fixed; left:calc((100% - var(--sirina_header_Logo)) / 2); top:0; border-left: none; }
				.header_logo img{height:auto; width: 50%; object-position: center; object-fit: contain;}
				.header_logo h1{font-size:calc(var(--sirina_header_Logo) * 0.125); padding:0;margin:0; padding-top: .2em; }	

			#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; text-align: right;}
				header nav .polovica{width:100%; display: block; padding: 0 !important; float:right !important; clear: both;clip-path: none !important;}
				header nav .polovica:last-of-type{padding: 0 !important;}
					header nav a{color: white !important; display: block; padding:.35rem; text-align: right; background-color:transparent; clip-path: none;}
					header nav a:hover{background-size: 100% 0%; color:var(--zlatna) !important; border-bottom-color:transparent;}
			header nav .polovica:before, header nav .polovica:last-of-type:after{display: none;}		
	}	
	@media (max-width:14em) {:root {--sirina_header_Logo:8.3rem;}}
	@media (max-width:16.5em) {.header_logo{left:0;}}	
	@media (max-width:12em) {.header_logo{display: none;}}	

/* ------------ POČETNA -------------------------*/	
.početna, .početna img, .početna .banner, #mač, #grožđe{height:100vh; width:100%; position: absolute; top:0; left: 0; object-fit:cover; 
											object-position:center; transition:opacity ease-in 2.75s; }
.početna{position: static !important;}
	#mač{object-position:center 40%; z-index: -100; opacity:1; transition:ease-in 2s !important; transition:opacity ease-in 2s;}
	#grožđe{opacity: 0; transition:opacity ease-in-out 0.1s;  }
	.početna .banner{position: absolute; top:0; left: 0; z-index: -2;
				 background-size: cover; background-position: center; 
				 display: flex; align-items: flex-end; justify-content: flex-start;
				padding:15vh 0; font-family: 'Times New Roman', Times, serif; text-align: right; opacity: 0;}
	.početna .banner_inner{background-color: white; height: auto; width:100%;
						padding-right: 42vw; opacity:0; transition:opacity ease-in 1.5s; }	
		.početna .banner_inner	h5{transition:opacity ease-in-out .7s; opacity:0;}						
		/*.početna img{position: absolute; top:0; left: 0; object-fit:cover; object-position:center; z-index: -1;}*/		
	@media (orientation:portrait) {.početna .banner_inner{padding-right: 30vw; text-align: left !important;}}	

/* ------------ VREMENSKA LENTA -------------------------*/	
	#vremenska_lenta{width:100%; height:1em; /*position: fixed; left: 0; top: calc(100vh - 5px); */
		display: flex; align-items: center;  background-color: transparent; z-index: 100000; margin-top:3em !important;
		background: url('/slike/vremenska_lenta-crta.svg'), url('/slike/vremenska_lenta-strelica.svg');
		background-repeat:repeat-x, no-repeat ; background-size:auto 1px ,  auto 50%;
		background-position: center, right;}
	#vremenska_lenta, #godine{padding-left:0.25em; padding-right:1em;}
		#vremenska_lenta div{border-right:1px solid transparent; border-color: transparent; width:0.25%; height:25%; float:left}
		#vremenska_lenta .decenij{height:50%;}
		#vremenska_lenta .centenij{ height: 100%; border-width: 2px; }
	#godine{margin-bottom:3rem; margin-top:0em; font-size: 80% !important; /*font-family: Garamond, serif;*/ font-style: italic; opacity: 0; transition:ease-out 10s;}
		#godine div{float: left; text-align: center; height: 100%;}
	@media (max-width:1024px){
		#vremenska_lenta div{border-width:0;}
		#vremenska_lenta .decenij{border-width: 1px;}
		#vremenska_lenta .centenij{border-width: 1px; }
	}	
	@media (max-width:576px){
		#vremenska_lenta div{border-width:0;}
		#vremenska_lenta .decenij{border-width: 1px;}
		#vremenska_lenta .centenij{border-width: 1px; }
	}			

/* ------------ VINA -------------------------*/	
/*.vina .carousel-inner{height: 80vh !important; background-color: red;}*/
	.vina .butelja, .vina .opis{height:var(--visina_butelje); }
	.vina .butelja{background-image: url('/slike/prozor.svg'); background-repeat: no-repeat; background-position: center; background-size: contain !important;
					overflow: hidden; padding-top:4%; padding-bottom:0.3%; width:calc(var(--visina_butelje) * 0.54) }
		.vina .butelja>img{width: 100%; height:100%; object-fit:contain; object-position:bottom; }			
@media (max-width:768px) {.vina .opis{display: block !important; overflow-y: auto;}	}	
@media (max-width:576px) {.vina .butelja{width:calc(var(--visina_butelje) * 0.54 * .6); height:calc(var(--visina_butelje));
										padding-top:0%; padding-bottom:0%;}	}							
/*kontrole*/
.vina .carousel-control-prev{justify-content:flex-start !important; overflow: hidden;}
.vina .carousel-control-prev-icon, .carousel-control-next-icon{width:5em; height: 5em; margin-left: -2.5em;
								background-color: black !important; border-radius: 100%; 
								background-size:40%; background-position:80% center;}
.vina .carousel-control-next{justify-content:flex-end !important; overflow: hidden;}	
.vina .carousel-control-next-icon{margin-left:0; margin-right:-2.5em; background-position:20% center;}	
@media (max-width:576px) {.vina .carousel-control-prev-icon, .carousel-control-next-icon{width:3em; height: 3em; margin-left: -1.5em;}
							.vina .carousel-control-next-icon{margin-right:-1.5em;} 	}
/*indikatori*/
.vina .carousel-indicators{margin-bottom: 0em !important; position: relative; top:0; left:0; width: 100%; z-index: 100; height:auto !important; 
						display: flex !important; align-items: center; }	
	.vina .carousel-indicators button{height:100% !important; width:auto; min-width:3em; padding:.25em 1em !important; margin:0em !important; 
									color: #83256D; text-indent:0 !important;  
									opacity:1; font-size: 1rem; outline:none; border:none;  }	
	.vina .carousel-indicators button:after{display:block; height: 1px; width:0%; content: ''; background-color: #83256D; transition: .4s; margin-left:50%;}
	.vina h4:after{display:block; height: 2px; width:100%; content: ''; background-color: #83256D; transition: .4s; margin-left:0%; margin-top: .05em; margin-bottom:.2em;}															
	.vina .carousel-indicators button.active:after{width:100%; margin-left:0%}		
	.vina .carousel-indicators button:nth-of-type(1):after, 
	.vina .carousel-indicators button:nth-of-type(3):after,
	.vina .carousel-indicators button:nth-of-type(7):after,
	.vina .carousel-item:nth-of-type(1) h4:after,
	.vina .carousel-item:nth-of-type(3) h4:after,
	.vina .carousel-item:nth-of-type(7) h4:after{background-color:black}		
	.vina .carousel-indicators button:nth-of-type(1), 
	.vina .carousel-indicators button:nth-of-type(3),
	.vina .carousel-indicators button:nth-of-type(7){color:black}	
	.vina .carousel-indicators button:nth-of-type(4):after, 
	.vina .carousel-indicators button:nth-of-type(5):after,
	.vina .carousel-indicators button:nth-of-type(6):after,
	.vina .carousel-item:nth-of-type(4) h4:after,
	.vina .carousel-item:nth-of-type(5) h4:after,
	.vina .carousel-item:nth-of-type(6) h4:after{background-color:#AC093C}	
	.vina .carousel-indicators button:nth-of-type(4), 
	.vina .carousel-indicators button:nth-of-type(5),
	.vina .carousel-indicators button:nth-of-type(6){color:#AC093C}		

/*VIZIJA*/
.vizija-panorama{object-fit:cover; object-position:center 75%; height:32vw !important; display: block; }
.vizija-panorama~div{display: block; width: 100%; height:6vw; margin-bottom: -6vw;
				background: linear-gradient(white, transparent);position: relative; top:-32vw; }

/* ------------ FOOTER -------------------------*/	
address a{display:flex; margin-bottom: .5em; justify-content: flex-start; align-items: flex-start;}	
	address a span:has(img){display:inline-block; width:1.5em; height: 1.5em; padding: .35em; background-color: var(--zlatna);
				border-radius: 100%; margin-right: .5em; }	
		address a img {filter:brightness(0%); width:100%; height:100%; object-fit: contain; object-position: center; display: block;}