html{scroll-behavior: smooth;}
a{text-decoration:none; font-family:'Poppins', sans-serif; }
a:visited{color:#123575 }
button{cursor:pointer;}
body{border:none; padding:0; box-sizing:border-box; margin:0; 
	font-size:1em; font-family:'Poppins', Helvetica, sans-serif;
	overflow-x:hidden; font-weight: 200; /*letter-spacing: .02em;*/}

header{position:fixed; width:60em; height:5em; 
	top:0; left:calc(50vw - 30em); 
	box-shadow:none; z-index:1000; margin:0; padding:0; transition:.5s; 
	overflow-y:show; background-color: white; 
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;}
	header img{width:9em; height:auto; 
			position:fixed; top:.5em; left:calc(50vw - 4.5em);
			transition:inherit; cursor:pointer }					
	header nav{height:100%; width:100%; transition:inherit; 
			margin-left:0; padding:0em; 
			display:flex; justify-content:center; align-content:center; 
			box-sizing:border-box; padding-right:1em}
		header nav a{color:#123575; text-decoration:none; 
					display:flex; justify-content:center; align-content:center;
					flex-wrap: wrap;
					align-items: center; box-sizing: border-box;
					text-transform: uppercase;
					padding:0em .5em; padding-top:2em;
					letter-spacing: .02em; font-size: .92em;
					margin:0 0.5em; cursor:pointer;
					height:100%; transition:.5s; 
					background-position:center calc(50% - 1em);
					background-size: auto 1.8em; 
					background-repeat: no-repeat;}					
		header nav a:nth-of-type(3){margin-right:18em;}
		header nav a:after{content:''; display:block; width:0.1%; transition: inherit;
				height:.1em; margin:0; margin-top:-.25em;
				background:linear-gradient(90deg, rgba(18,53,117,1) 0%, rgba(0,205,255,1) 100%);}
		header nav a:hover:after {width:100%; height:.1em;}
		#a_disabled {pointer-events: none; filter: grayscale(100%); font-weight: 400;}	
	.slika_uvecana{position:fixed; width:100vw; height:100vh; background-color:rgba(247,245,239,0.9);
					top:-100vh; left:0; z-index:3000; transition:.35s; background-size:contain;
					background-position:center; background-repeat:no-repeat; padding:0}
		.slika_uvecana button{width:100%; clear:left; height:100%; cursor:pointer; border:none; 
						background-image:url(/slike/galerija_zatvori.svg); background-size:auto 2em;  
						background-position:center calc(100% - 1.5em); background-repeat:no-repeat; background-color:rgba(0,0,0,0);
						display:flex; align-items:flex-start; justify-content:center;
						padding:2em; box-sizing:border-box; font-size:1.5em;text-transform:uppercase; font-weight:bold;
						color: black; text-shadow: -1px -1px .5em white, 1px -1px .5em white, -1px 1px .5em white, 1px 1px .5em white;}	
	
main{width:100vw; border:none; box-sizing:border-box; font-size:1em; 
	height:auto; padding:0;  margin:0; overflow-x:hidden; }	
section{width:100%; height:auto; margin:0; padding:0; }
article{margin:7rem calc(50vw - 35em); margin-top:6rem;}	 
h1{font-size:3rem; color:#123575;  text-transform: uppercase;
	margin:1rem 0; font-family: 'Montserrat', sans-serif;
	text-align:center; letter-spacing: .1rem}
h2{font-size:2.5rem; color:#123575; letter-spacing: .1rem; 
	text-transform:uppercase; margin:1rem 0; margin-top:0;
	width:100%; text-align:center; 
	font-family: 'Montserrat', sans-serif;}
h2~h3{color:rgb(00,100,160); font-weight:bold; font-size:110%; 
	text-align: center; margin-top: -1em;}	
h1~h3{color:rgb(00,100,160); font-weight:bold; font-size:110%; 
		text-align: center; margin-top: -.75rem; letter-spacing:0rem;}			
h4{font-size:1em; color:black; width:100%; text-align:center; font-weight:bold; text-transform:uppercase;
	padding:2em 10em; box-sizing:border-box; letter-spacing:.1rem; }
h5{font-size:1.5rem; color:#123575; width:100%; text-align:center; 
	font-weight:bold; text-transform:uppercase; margin: 0;
	padding:2rem 0; padding-bottom: .25rem;
	box-sizing:border-box; letter-spacing:.05rem; }	
h1~h2 {margin-top:-.75em; margin-bottom:2.5em;
		font-size:1.25em; text-transform:uppercase; 
		box-sizing:border-box; color:black}	
p{text-align: center; font-size: 1rem; margin: .5em 0; font-weight:300}
ul{padding-left:0;  margin:0;}
ul li{list-style: none; margin:.5em 0; text-align: center; 
	font-size: 1.1rem; font-weight: 400;}
ul li:before{ content: ''; margin-right: 0rem;
	display: inline-block;
	height: .7rem;
	width: 1em;
	background-image: url('/slike/strelica.svg');
	background-size: contain;
	background-repeat:no-repeat;}
ol li{text-align: left;  font-weight: 400; font-size: 1.1rem;
	margin: .2rem calc(50% - 11rem)}	
main>img{width:100%; height: 30em; object-fit: cover; object-position: center;
		display: block;}
details{text-align: center; padding:0em 2em; clear:both; box-sizing: border-box;
		padding-bottom: 0;}
details p{text-align: justify; text-justify: inter-word;}
	summary{color:#123575; font-size: 1.25rem; margin-bottom: 1rem;
			text-transform: uppercase; 
			font-weight: bold; font-family: 'Montserrat', sans-serif;
			list-style-type:none; cursor: pointer;}
	summary:hover span{background-color: #123575;}		
	summary span{font-size:1.15rem; color:#ffffff; 
				display: inline-block; padding:0; box-sizing: border-box;
				background-color: #078BC3; width: 2em; height: 2em;
				border-radius: 100vw; padding-top:.4em; transition: .2s;}
	summary:before, summary:after{content: ''; display: inline-block; height: 1rem;
					width: .5em;  background-image: url(/slike/strelica.svg);
					background-size:auto 100%; background-repeat: no-repeat;
					background-position: right; margin: 0 .5rem;
					display: none;}	
	summary:after{transform: rotate(180deg);}
	details .figure_pola{width:calc(50% - 1em); margin:1em .5em; float:left}
	details .samo_jedna{ clear: both; margin:1.2em 25%}
	details:last-of-type:after{content: ''; display: block; clear: both;
						height: 000001rem; width: 100%;}
	details img{display: block; padding: 1rem; box-sizing: border-box;
				border-top-left-radius:.5rem ; background-color: white;
				border-top-right-radius: .5rem; object-fit: contain;
				object-position: center; height: 20rem; width: 100%; }	
	details figcaption{background-color: white; padding:.5rem;
						box-sizing: border-box; text-transform: lowercase;
						border-top: .2rem solid #123575;
						border-bottom-left-radius: .5rem;
						border-bottom-right-radius: .5rem}
	details .figure_cover{object-fit: cover; padding: 0;}
	details strong{font-weight: bold;}									
details[open] summary:before{transform: rotate(90deg);}	
details[open] summary:after{transform: rotate(90deg);}	
details[open] summary span{background-color: #123575;}			
.beton{background:url(/slike/beton-textura.webp); 
		background-size:45em auto ; 
		background-repeat: round;
		background-position:center;
		background-color:white;
		box-shadow:0 0 1em rgba(0,0,0,.75) ;}
.beton:before, .beton:after, .kulir:before, .kulir:after, 
.pjesak:before, .pjesak:after
	{content: ''; display: block; width: 100%; height: .5rem;
	background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.15) 20%, rgba(0,0,0,0) 100%);
	background-size:cover; margin-bottom:0em;}
.beton:after, .kulir:after, .pjesak:after{background:linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.15) 20%, rgba(0,0,0,0) 100%); }
.beton_hyper{font-weight: 400; color:black}
.beton_hyper:hover{text-decoration: underline;}
.voda, .voda2{margin:0; clear: both; padding: 5rem 0; color:white}
	.voda canvas, .voda2 canvas{position: absolute; top:0vh; left: 0; z-index:-1;}	
	.voda h2, .voda h3, .voda p,
	.voda2 h2, .voda2 h3, .voda2 p{color:white; text-shadow: 0 0 .5em black;}
	.voda2 p{font-size: 1.1rem; margin: 1em 0;}	
	.voda h3, .voda2 h3{text-transform: uppercase; margin: 0; font-size: 1.5rem;}
	.voda p{ font-size: 110%; font-weight: 400;}
	.voda a{ font-size: 110%; font-weight: 400; color: white;
			border: .2rem solid white; border-radius: .25rem; padding: .5rem;
			margin:0 auto; transition: .35s;
			margin-top: 2rem; display: block; width: 7em; text-align: center;
			background-color: rgba(65, 123, 160, 0.5)}	
	.voda a:hover{width: 7.5em; background-color: rgba(00,100,160,.75)}	
	.voda2 a{color:white; text-decoration: none; font-weight: bold;}
	.voda2 a:hover{text-decoration: underline; }
	.voda dl{width:100%; display: flex; justify-content: space-around;
			align-content: flex-start; padding:2rem 7rem;
			 box-sizing: border-box; text-shadow: 0 0 1em black;}
		.voda dt{font-family: 'Montserrat', sans-serif; font-size: 4rem;
					font-weight: normal; text-align: center; display: block;
					}
		.voda dt span{display: block; clear: both; font-size: 1rem; 
					text-align: center; display: block; font-family: 'Poppins', sans-serif;}					
.kulir, .pjesak{background:url(/slike/kulir-textura.webp); 
	background-size:15em auto ; 
	background-repeat: round;
	background-position:top center;
	background-color:white;
	box-shadow:0 0 1em rgba(0,0,0,.75) ;}	
.pjesak{background:url(/slike/pjesak-textura.webp)}	
.kulir a, .pjesak a{font-weight: 400; color: white;
	border-radius: .25rem; padding:0rem;
	margin:0rem auto; margin-top: 2rem;
	transition:.35s; 
	border:.25rem solid #123575;
	display: block; 
	width: 40rem; height: 7rem; 
	text-align: center;
	background-color: rgba(65, 123, 160, 0.5);
	background: url(/galerija_slika-thumbs/Euro-Pool-2.webp),
				url(/galerija_slika-thumbs/Euro-Pool-20.webp),
				url(/galerija_slika-thumbs/Euro-Pool-24.webp),
				url(/galerija_slika-thumbs/Euro-Pool-34.webp);
	background-size: 25% auto, 25% auto, 25% auto, 25% auto;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	background-position:0% top, 10rem top, 20rem top, 30rem top;}
	.kulir a div, .pjesak a div{background-color: rgba(00,100,160,.75);
				width: 100%; height:100%; transition: .35s;
				display: flex; justify-content: center;
				align-items: center; font-size: 2rem; text-shadow: 0 0 1em black;}
	.kulir a:hover div, .pjesak a:hover div{background-color:rgba(00,100,160,.2);}	
.slike_par{width: 100%;  height: 18em; box-sizing: border-box; 
		 padding: 2em 12em;}
	.slike_par img, .slike_par video{width:calc(33.333% - .5em); margin:0 .25em; 
				object-fit: cover; height: 100%; border-radius: .5rem;
				object-position: center; float: left; display: block;
				border: .35rem solid white;
				box-sizing: border-box;}			
#galerija_slika{width:100%; height:auto; 
				display:flex; justify-content:center; 
				vertical-align:flex-start; flex-wrap: wrap;}
	#galerija_slika img{height:12em; width:12em; object-fit:cover; 
						display:block; margin: .25em; border-radius: .5em;
						object-position: center; cursor: pointer;
						border: .4em solid rgba(00,100,160,.75);
						box-sizing: border-box; }
	#galerija_slika img:hover{border: 0.2em solid rgba(00,100,160,.75)}
	#galerija_detalji{position:fixed; width:100vw; height:100vh; overflow:hidden;
					top:100vh; left:0vw; transition:.5s; box-sizing:border-box; z-index:3000; 
					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{clear:both; height:auto; background-color:white; width:100vw; 
	z-index:-10; padding:5em calc(50% - 35em); box-shadow: 0 0 1rem rgba(0,0,0,.75);
	box-sizing:border-box; padding-bottom:1em; }		
	footer h2{font-size:3em; margin-bottom:1em}
	footer address{width: 100%;}
		footer address div{float:left; width:50%; height:auto; font-style:normal; 
			text-decoration:none; box-sizing:border-box;
			display:block; padding:0em 2em; }	
		footer address div:first-of-type{border-right:.3em solid #123575;
										padding-left: 21em;}				
		footer address a{font-style:normal; text-decoration:none; display:block; width:auto; 
					height:2em; background-position:top left; background-repeat:no-repeat; 
					background-size:auto 2rem;
					box-sizing:border-box; font-size:1.1rem; text-align:left; color:#123575;
					padding-left:2em; padding-top:.2em; margin:.5em 0}	
		footer address a:hover{color:black }				
		footer address a:nth-of-type(6){height:4em; padding-top:0em; line-height: 1.2em;}	
		
	#drustvene_mreze{float:none; width:100%; height:auto; 
		box-sizing:border-box;  padding:2em 0em; clear: both;
		display: flex; flex-wrap: wrap; justify-content: center;
		align-content: flex-start;}
		footer h3{padding-top:0em; color:#123575; text-align:center; 
			clear:both; margin:.5rem 0; width: 100%;
			font-size:1.5em; text-transform:uppercase}	
		#drustvene_mreze a{font-style:normal; text-decoration:none; 
			display:block; width:auto; 
			height:auto; background-position:left; 
			background-repeat:no-repeat; 
			background-size:auto 100%; overflow: hidden;
			font-size:1.1rem; text-align:left; 
			color:#123575; padding:0;
			margin:.5em 1em; padding-left:1.75em; margin-top:-.25rem}
	form{float:none; width:60%; height:auto; display: block;
		box-sizing:border-box; padding:1em; margin-left:20%; 
		border: .2rem solid #123575; background-color:rgb(241, 243, 246);
		min-height: 53em;}
		form hr{border:none; border-bottom: .1rem solid #04A7DD; display: block; clear: both;
				padding-top: .5rem;}
		form hr:first-of-type{padding-top:0rem;}
		form input, form textarea, form select	{width:100%; height:auto;  
				padding: .5rem; box-sizing: border-box; margin:.25rem 0;
				background-color: white; border:.1em solid #123575;
				outline: none; border-radius: .25rem; clear: left;
				font-size: .9rem; font-family: 'Poppins', sans-serif;
				font-weight: 200;}
		#pozivni{width:4.5rem; float: left; margin-right: .5rem; }
		#telefon{width:10rem; float: left; clear: none}		
		label{float: left; clear: left; padding-top:.75rem; 
				padding-right: .5rem; font-size: .9rem}
		.select_uz_label{width:auto; float:left; clear:none}	
		.label_float {clear:none; padding-left: 1.5rem; }	
		form input[type=number]{width: 5rem;}
		form button{font-weight: 400; color: white;
				border: .2rem solid #123575; border-radius: .25rem; 
				padding: .5rem;
				margin:0; transition: .35s; clear: both;
				margin-top:.5rem; display: block; width: 7em; 
				text-align: center;
				background-color: #123575}	
		form button:hover{border: .2rem solid white; }
		#forma_kvacica{width:100%;height:calc(100% - 2rem); display: block;
					text-align: center; user-select:none}
			#forma_kvacica	div{display: flex; font-size: 30rem; font-weight: bold;
				justify-content: center; align-items: flex-end; color:#123575}	
		#forma_zahvala{text-align: center; width: 100%;}	
	.pravne_napomene{width:100%; text-align:center; padding-top:2em; clear:both; height:5em;
					display:flex; justify-content:center; align-items:center}
		.pravne_napomene a{margin:0 1rem;}	
			#pero{display:inline-block; color:rgba(0,0,0,0); width:2.5em; height:2.5em; border-radius:100em;
				background-image:url(/slike/pero.svg); background-size:80%; background-repeat:no-repeat; background-position:center;
				 overflow:hidden; clear:both; transition:.25s;  }	
			#pero:hover{background-size:100%;}
	#pravne_napomene_detalji{height:auto; width:100%; font-size:90%; 
		clear:both; margin:0; display:none; padding:0; padding-bottom:1em }		
		#pravne_napomene_detalji p{padding:.25em 0; margin:0; text-align: left;}					
	#GDPR{width:100vw; height:auto; position:fixed; bottom:0; left:0; 
			background-color:white; display:flex; 
			justify-content:center; padding:0.5em 3vw; font-size:.85em; vertical-align:center; word-break: break-word;
			box-sizing:border-box; }						
		#GDPR a{display:inline; background-image:none; height:auto; font-weight: 400;
				margin:none; padding:0; width:auto; text-decoration: underline;}
		#GDPR a:hover{font-size:1em}
		#GDPR button{display:inline-block; border:1px solid #123575; 
		background-color:white; margin:0; transition:.5s;margin-left:.5em; border-radius: .3em;
					cursor: pointer; width:6em; padding:0 .15em; word-break: normal;}
		#GDPR button:hover{color:white; background-color:#123575}