@font-face {font-family:mon; src: url(/fontovi/MontserratAlternates-Light.otf);	font-display: swap}	
@font-face {font-family:lato; src: url(/fontovi/Lato-Light.ttf); font-display: swap}	
@font-face {font-family:lato; src: url(/fontovi/Lato-Regular.ttf);font-weight: bold;	font-display: swap}	
@font-face {font-family:lato; src: url(/fontovi/Lato-LightItalic.ttf);font-style: italic;	font-display: swap}			
@font-face {font-family:Graphik; src: url(/fontovi/Graphik-Regular.woff2);font-style: italic;	font-display: swap}							
html{scroll-behavior: smooth; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition:.25s; }
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
:root {
	--roza:#E5C6C3;
	--intro_tranzicija:0.7s;
	--visina_botuna_headera:64px;
	}

a:visited, a:hover, a:active, a:link{color:black}
h1, h2, h5, .naslovni {font-family: mon, Verdana, Geneva, Tahoma, sans-serif; word-break:break-word}
h3, h4,h6 {font-family: lato, Verdana, sans-serif !important}	

body{color:black; font-family:lato, Tahoma, sans-serif; padding: 0 !important; margin: 0 !important; }
main{background-image:url(/slike/main-bg.svg);
	background-position:center; 
	background-size:500px auto; 
	background-attachment:fixed; 
	background-repeat:repeat;
	animation: pozadina 50s alternate infinite linear;}	
/*@keyframes pozadina{
	from {background-position:bottom;}
	to{background-position:top; }
}*/
	
.sjena{box-shadow:0 0 15px -3px rgb(0, 0, 0) ;}
li::marker {color: var(--roza);}	
.rubljen{border: 3px solid var(--roza); outline: 6px solid white;}	

/*---------------HEADER--------------*/
	header{position: fixed; top: /*-10*/0px; left: 0; width:100%; z-index: 100;}
	#header_logo{
		/* na početku je priko svega, a priko jscripta se smanji*/
		position: fixed; top: 0px; left: 0px;
		height:100vh; width: 100vw; 
		z-index:101;
		/*box-shadow: 0 .5rem 1rem -0.2rem black;*/
		object-fit: contain;
		object-position:center;
		padding:15vh 15vw;
		background: linear-gradient(white , white);
		background-size: 100% 50%;
		background-repeat: no-repeat;
		transition:var(--intro_tranzicija);
		transition-delay:calc(var(--intro_tranzicija) * 0.5);}
	header nav{position:relative; 
			top:-100px;
			width:100vw;/*220 je logo*/
			height: 60px;
			font-size: 16px; 
			display:flex;
			align-items: center;
			justify-content: center;
			background-color:white;
			border-bottom: 3px solid #E5C6C3; outline: #ffffff solid 5px;
			transition:var(--intro_tranzicija);
			transition-delay:calc(var(--intro_tranzicija) * 0.6);
			padding:0 2px;
			text-align: center;
			line-height: 100%;}		
		.header_razmak_u_sredini{width:180px; height: 100%;}	
		
		header .nav-link{text-decoration: none; text-transform: uppercase;
					color:black; transition: .1s;
					padding: 0 5px;
					height: 100%;
					cursor: pointer;
					display: flex; 
					justify-content: center; 
					align-items: center; 
					flex-wrap: wrap;
					width:calc((100% / 8) - (180px /*širina loga pole jscripta*/ / 8))}						
		@media only screen and (max-width:1200px) {
			.header_razmak_u_sredini{display: none;}
			header nav{position:fixed; 
						left:-100vw ;
						width:100vw;
						overflow-x: hidden;
						/*max-width: 100vw;*/
						height:auto;
						display: block;
						padding:10px;
						transition:.25s !important;
						transition-delay:0;
						z-index: 102;
						display: block;
						text-align: left;}
				header .nav-link{display: block;
							width: 100%;
							padding:8px;}		
			} 			
		header .nav-link:hover{color:var(--roza);}								
		header .nav-link.active{color:var(--roza); pointer-events: none; }	
	/*menu*/
	#header_menu{position: fixed; top: 0; left:calc(100vw - var(--visina_botuna_headera) - 4px);
		width: var(--visina_botuna_headera); 
		height: var(--visina_botuna_headera);
		background-color: white !important;
		border: 3px solid var(--roza); 
		outline: 5px solid white;
		z-index: 103;
		/*padding-top:3px !important*/}
		.nav_crta{
				display: block;
				background-color: black; 
				height:3px; width: 100%;
				margin:22% auto;
				clear: both;
				transition: .3s;}
			.nav_crta:first-of-type{transform-origin:top left;}
			.nav_crta:last-of-type{transform-origin:bottom left;}	
		@media only screen and (max-width:350px) {#header_menu{display:none !important}}	
		
/*---------------POČETNA--------------*/		
.pocetna{ opacity: 0;
	background-image:url('/galerija_slika/stock-room-picture-25.webp');
	background-size:auto 100%;	background-position:bottom right; background-repeat: no-repeat;
	transition:var(--intro_tranzicija);
	padding-top:calc(180px * 0.6) !important;/*fix zbog headera*/
	min-height:calc(100vh + 50px);}
	.pocetna article{margin-bottom:50px;}
.pocetna+section{margin-top: -45px;}	


/*USLUGE*/
.usluge{overflow-x:hidden ;}
	.usluge ul{
			margin: 0 auto !important; 
			/*margin-left:calc(50vw - 15rem);*/
			width: 300px;
			height: 450px; /* drži zauzetu poziciju za karosel*/ 
			padding: 0 !important; 
			position: relative; /*radi karosela*/
			perspective: 1000px;
			display: block;
			}
		.carousel {
			width: 100%;
			height: 100%;
			position: absolute;
			transform: translateZ(-890px);/*ako ne dojde preblizu*/
			transform-style: preserve-3d;
			transition: transform 1s;
			padding: 0 !important;
			margin: 0 !important;
		  }	
			.pano{
				width:100%;
				height:100%;
				position: absolute;
				left: 0em;
				top: 0;
				background-color: white;
				/*border: 1px solid black;*/
				text-align: center;
				background-size:cover !important; 
				background-position:center !important; 
				}	
		.usluge	button{
			height: 3em;
			width: 3em;
			margin:2em .75em;
			margin-bottom: 0;
			border-radius: 100%;
			background-image:url(/slike/galerija_strelica.svg); 
			background-repeat:no-repeat; 
			background-size:contain; 
			background-position:center; 
			border: none;
			cursor: pointer;
		}
		.usluge	button:last-of-type{transform: rotate(180deg);}								

/* GALERIJA SLIKA */
	#galerija_slika {display:flex; justify-content:flex-start; 
				align-content:flex-start; align-items:flex-start; 
				flex-wrap:wrap;
				box-sizing:border-box; margin-top:0rem;
				width: 100%; height: auto;}
		#galerija_slika img{width:25%; height:15rem; 
							object-fit:cover; 
							object-position: center; 
							border:.25rem solid white;
							cursor: pointer; transition:.1s;
							box-sizing: border-box; outline:none}
		#galerija_slika img:hover{border:0rem solid white; }					
		#galerija_slika_navigator{height:2em; width:100%; display:flex; 
								justify-content:center;  
									align-items:center; clear:both;	
									box-sizing:border-box; margin-top: 1rem;}
			#galerija_slika_navigator button {height:1em; width:1em; 
											border-radius:1em; 
											border:.1em solid #E5C6C3;
											 padding:0; box-sizing:border-box; 
											 margin:0 .3em; cursor:pointer; 
											 font-size:1em; 
											 background-color:white}
			#galerija_slika_navigator button:hover{border:.13em solid #E5C6C3;}
			#galerija_slika_navigator button:disabled{border:.1em double #E5C6C3; 
										cursor: default; background-color:#E5C6C3}								
			
/* UVEĆANA SLIKA IZ GLAERIJE*/			
	#galerija_detalji{position:fixed; width:100vw; height:100vh; overflow:hidden;
			top:100vh; left:0vw; transition:.5s; box-sizing:border-box; 
			z-index:3000000000; 
			padding:0em; background-color:rgba(255,255,255,.9);
			background-size:contain; background-repeat:no-repeat; 
			background-position:center;}	
		#galerija_detalji button{cursor:pointer; border:none; 	
						background-image:url(/slike/galerija_strelica.svg); background-repeat:no-repeat; 
						background-size:4em auto; background-position:6em calc(50% + 0em); 
							padding:0; margin:0; background-color:rgba(255,255,255,0); 
							box-sizing:border-box; float:left; transition:.1s;
						height:calc(100% - 10em); width:50%; margin-right:0; }
		#galerija_detalji button:hover{background-size:4.5em auto;}										
		#galerija_detalji button:disabled{cursor:default; background-size:4em auto; opacity:.25}										
		#galerija_detalji button:disabled:hover{background-color:rgba(255,255,255,0); filter:grayscale(100%); }										
		#galerija_detalji button:nth-of-type(1){width:100%; clear:left; height:10em; background-position:center;
									background-image:url(/slike/galerija_zatvori.svg);  }	
		#galerija_detalji button:nth-of-type(3){transform:rotate(180deg); }	
	
footer{background:linear-gradient(0deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.55) 100%), url(/slike/kontakt.webp);
	background-size:cover, cover; background-attachment:fixed, fixed;
	background-position:center, center;}

footer a{text-decoration:none}	
footer a:hover{color:var(--roza)}	

input:focus{outline:none !important; box-shadow:none !important}
.form-check-input{background-color: transparent; border-color: black;}
.form-check-input:checked{background-color: BLACK; border-color: black;}
.rc-anchor-light{background-color: transparent !important;}