@font-face {font-family:bree; 
	src: url(/fontovi/BreeSerif-Regular.ttf);
	font-display: swap;}	
html{scroll-behavior: smooth; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color:black;}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
a:visited, a:hover, a:active, a:link{color:white}
body{width:100vw; height:auto; display:block; box-sizing: border-box; 
	border:none; padding:0; 
	margin:0; color:white; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
	font-size:1em; 
	background-color:black; overflow-x:hidden;   }	
header{
	position:fixed; top:0; left: 0;
	height:4em; width:100vw; 
	z-index:999;
	background-image: url(/slike/header-bg.svg);
	background-size:auto 100%;
	background-position:left;
	background-repeat: repeat-x;
	padding:0em 1em .6em 1em;
	animation:valovi 60s linear infinite;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	}
	@keyframes valovi{
		from{background-position:left;}
		to{background-position:right;}
	}
	#header_logo{
		position: fixed;
		top:0;
		left:calc(50vw - 3.5em);
		width:7em;
		height:6.5em;
		padding:0em;
		padding-top:.5rem;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: center;
		background-color: white;
		transition: .35s ease-in-out;
		transition-delay: 1s;
		box-shadow:0 .5em .5em -.25em rgba(17, 23, 65, 0.75);
		}
		#header_logo img{object-fit: contain;
						object-position: center;
						height: 85%;
						width: 80%;}					
	.baloni{
		position: fixed; 
		top:100vh; 
		right:0;
		width:1.5em;
		height:auto;
		display: block;
		animation: baloni 6s linear infinite;
		object-fit: contain;
		/*opacity:.65;*/
	}	
	.baloni:nth-of-type(1){
		left:0;
		animation-delay: 3s;
	}	
	@keyframes baloni{
		0%{top:100vh;}
		100%{top:calc(0vh - 15em)}
	}
		.baloni .fil0{
			transform: translateX(-20%);
			animation: balon_koji_se_mice .35s linear infinite alternate;
		}
		.baloni .fil0:nth-of-type(4n){
			animation-delay:.15s;
		}
		.baloni .fil0:nth-of-type(4n - 1){
			animation-delay:.25s;
			animation-duration: .3s;
		}
		.baloni .fil0:nth-of-type(4n - 2){
			animation-delay:.3s;
			animation-duration:.4s;
		}
		@keyframes balon_koji_se_mice{
			from{transform: translateX(-10%);}
			to{transform: translateX(10%);}
		}	
	#header_menu, #cjenik, #govorni_jezici{
			display: block;
			position: fixed; 
			top:0; right:0;
			width:3.25rem;
			height: 4rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			justify-items: center;
			align-items: center;
			align-content: center;
			padding: .75rem;
			}
	#header_menu:hover .nav_crta{background-color:#0098DA}			
	#cjenik{right:3.25rem;
			font-weight: bold;
			font-size: 1.65rem;
			text-decoration: none;
			color: #2A578E;
			padding:.5rem;
			padding-bottom: .2rem;
			transition: .35s;}	
		#cjenik>span{font-size:1rem; display: block;
					color:#2A578E; width: 100%;
					height: auto; text-align: center;
					margin-bottom: -.8rem;
					transition: .35s;}	
	#cjenik:hover{color:#0098DA}
	#cjenik:hover span{color:#0098DA}	
		.nav_crta{
			display: block;
			background-color: #2A578E; 
			height:8%; width: 100%;
			margin:20% auto;
			clear: both;
			transition: .35s;
			}			
		.nav_crta:first-of-type{transform-origin:top left;}
		.nav_crta:last-of-type{transform-origin:bottom left;}			
	header nav a{text-decoration: none; 
				font-size: 150%;
				position: fixed;
				top:100vh;
				left:0vw;
				height:33.3333vh;
				width: 50vw;
				cursor: pointer;
				display: flex; justify-content: center; 
				align-items: center; align-content: center;
				flex-wrap: wrap;
				line-height: 90%;
				text-align: center;
				text-transform: uppercase;
				background-size:auto 2.5em;
				background-repeat:no-repeat;
				background-position: center calc(50% - 1em);
				background-color: #273f74b7;
				padding:.7em .5rem;
				padding-top:3.5em;}	
	header nav a:nth-of-type(2n - 1){left:0vw}
	header nav a:nth-of-type(2n){left:50vw}
	header nav a:hover{background-color:#273f74f1; color:white}
	#header_jezici{position: fixed;
					top:0.5em;
					right:5em;
					width:3em;
					height:3em;
					background-color: white;
					cursor: pointer;
					border: .6em solid black;
					background-size: cover;
					background-position: center;
					}	
	#header_jezici:hover{border:.5em solid black;}	
	#govorni_jezici{
		left:0.25em;
		top:.35em;
		width:6rem;
		height:3.25rem;
		background:url(/slike/jezici.svg);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		color:#ffffff;
		text-align: center;
		font-size:.83rem;
		padding:0 .5rem;
		padding-bottom: .25em;
		line-height: 105%
		}		
main{width:100%; box-sizing:border-box; 
	padding:0; margin:0; font-size:1em;
	background-color: black;
	background-image: url(/slike/diving-porec-background-1.webp);
	background-size: cover;
	background-position:center;
	background-attachment: fixed;}	
.cover{object-fit: cover; object-position: center;}
.contain{object-fit: contain; object-position: center;}
.naslov{color: white; 
	font-family:bree, 'Times New Roman', Times, serif;
	text-shadow:0 0 2rem black;}
	.naslov img{height:.8em;
				width:auto;
				max-width:1em;
				display: inline-block;
				object-fit: contain;
				object-position:center;
				padding-bottom: .1em;}
article p{font-size: 125%; line-height: 150%;
	text-shadow:0 0 2rem black;}	
@media only screen and (max-width: 576px) {
	p{font-size:100%;}
}	
section:before, section:after, .pocetna_sjena,
footer:before, footer:after{display: block;
			width: 100%;
			height:10em;
			content: '';
			/*background-color: rgba(0, 0, 0, 0.6);*/
			background: linear-gradient(180deg, #273f74 0%, #273f74 10%, #273f74db 30%, #273F7400 100%);
		}
section:after, .pocetna_sjena,  footer:after{transform: rotate(180deg);}	
.pocetna_sjena{position: absolute;
				height:5em;
				top:calc(100vh - 5em);
				cursor:pointer;
				background-size:2em auto, cover ;
				background-repeat: no-repeat, no-repeat;
				background-position: center, center;
				background: url(/slike/strelica.svg),
							linear-gradient(180deg, #273f74 0%, #273f74 10%, #273f74db 30%, #273F7400 100%);
						animation:strelica 1s infinite alternate}
	@keyframes strelica{
		from {background-position:center 50%, center;}
		to{background-position:center 30%, center;}
	}					
section{background-size: cover;
	background-position:center;
	background-attachment: fixed;
	margin:0;
	display: block;}
article{filter: blur(20px);
	transition:filter linear .5s}
.bg-sjencan{background: linear-gradient(0deg, rgba(39,62,116,0.6) 0%, rgba(0,152,218,0.8) 100%);}		
	.bg-sjencan-img{width: 100%;
					height:15em;
					object-fit: cover;
					object-position: top center;
					box-shadow:0 .5em .5em #122550a0;}		
.pocetna{overflow: hidden;
	width:100vw; 
	height:100vh;
	margin: 0;
	padding: 0;}
	.pocetna:before,.pocetna:after {display:none}	
	.pocetna video{
		width:100vw; 
		height:100vh; 
		min-height:100vh;
		max-height:100vh;
		margin:0em; padding:0;  overflow:hidden;
		background-color: black;
		object-fit: cover;
		object-position: center;}	
/* GALERIJA SLIKA */
	#galerija_slika img{
		height:auto;
		object-fit:cover; 
		object-position: center; 
		border:.25rem solid transparent;
		cursor: pointer; transition:0s;
		box-sizing: border-box;
		height:14vw;}
	@media only screen and (max-width: 990px) {
		#galerija_slika img{height:19vw;}
	}			
	@media only screen and (max-width: 576px) {
		#galerija_slika img{height:40vw;}
	}		
	#galerija_slika img:hover{
		border:.25rem solid rgba(0,152,218,0.5);
	}					
	#galerija_slika_navigator{
		height:auto;
		min-height: 2em;
		 width:100%; 
		 display:flex; 
		justify-content:center;  
		align-items:center; 
		clear:both;	
		box-sizing:border-box; 
		margin:1rem 0;}
		#galerija_slika_navigator button {
			height:1em; width:1em; 
			border-radius:1em; 
			border:.15em solid white;
			padding:0; box-sizing:border-box; 
			margin:0 .3em; cursor:pointer; 
			font-size:1.1em; 
			background-color:transparent}
		#galerija_slika_navigator button:hover{background-color:rgba(0,152,218,0.5);}
		#galerija_slika_navigator button:disabled{ 
									cursor: default; background-color:red}								
			
/* UVEĆANA SLIKA IZ GALERIJE*/			
	#galerija_detalji{position:fixed; 
			width:100vw; height:100vh; 
			overflow:hidden;
			top:120vh; left:0vw; transition:.5s; 
			box-sizing:border-box; 
			z-index:3000000000; 
			padding:0em; 
			background-color:rgba(39,62,116,0.6);
			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:3em auto; 
				background-position:20% center; 
				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:4em auto;}										
		#galerija_detalji button:disabled{cursor:default; 
						background-size:4em auto; 
						opacity:.5; 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{	padding:0em;
		margin: 0;}
	footer address a{
				font-style:normal; text-decoration:none; 
				display:flex; 
				align-items: center; align-content: center;
				width:auto; height:auto; 
				min-height: 2em;
				background-position:left ; 
				background-repeat:no-repeat; 
				background-size:auto 55%;
				box-sizing:border-box; 
				font-size:2rem; 
				text-align:left; 
				color:white;
				box-sizing: content-box;
				padding-left:1.5em; margin:.5em 0;
				line-height: 110%; 
				word-break: break-all;}	
		@media only screen and (max-width: 576px) {	
			footer address a{font-size: 125%;}
		}	
	footer address a:hover{text-decoration: underline;color: white; }	
	footer address a:visited{text-decoration: underline;color: white;}	
	footer address a:active{text-decoration: underline;color: white;} 
#pero{display:block; color:rgba(0,0,0,0); 
	width:2.5em; 
	height:2.5em; border-radius:100em;
	background-image:url(/slike/pero.svg); 
	background-size:cover; 
	padding: 0;
	margin: 0;
	overflow:hidden;}		
#pero:hover{box-shadow:0rem 0rem .5rem rgba(255, 255, 255, 0.75);}