@media only screen and (max-width: 70em) {  
header{position:fixed; width:100%; height:5em; 
	top:0; left:0; border-bottom-left-radius:0;
	border-bottom-right-radius:0;}
	header img{width:auto; height:5em; max-width: calc(100vw - 5em);
			position:fixed; top:.6em; left:1em; z-index: 99999999;}					
	header nav{position:fixed; top:0; left:calc(100vw - 5em); 
            height:5em; width: 5em; margin: 0; padding: 0;
            background-image: url(/slike/header-menu.svg);
            background-size: 3em auto;
            background-position:calc(100% - 1em) 1.75em;
            background-repeat: no-repeat;
            overflow: hidden;
            background-color: white;
            display:block; 
            }
		header nav a{display:block; 
                    width:100vw;
                    height:2em;
                    float:none;
                    clear: both;
					box-sizing: border-box;
					text-transform: uppercase;
                    text-align:center;
					padding:.5em 0; 
					letter-spacing: .02em; 
                    font-size:1em;
					margin:.75em 0; 
					background-position:left center;
					background-size: 0 auto; 
					background-repeat: no-repeat;}					
        header nav a:nth-of-type(1){margin-top:5em;}
        header nav a:nth-of-type(3){margin-right:0;}
		header nav a:after{display:none;}
		#a_disabled {pointer-events: none; filter: grayscale(100%);}	
	.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:5rem 5vw; margin-top:5rem;}	 
h1{font-size:2.5rem; color:#123575;  overflow-wrap: break-word;
	margin:0; margin-bottom:.5em; font-family: 'Montserrat', sans-serif;
	text-align:left; letter-spacing: .1rem}
h2{font-size:2rem; color:#123575; letter-spacing: .1rem; 
	text-transform:uppercase; margin:1rem 0; margin-top:0;
	width:100%; text-align:left; word-break: normal; overflow-wrap: break-word;
	font-family: 'Montserrat', sans-serif; overflow-wrap: break-word;}
h2~h3{color:rgb(00,100,160); font-weight:bold; font-size:110%; 
	text-align: left; margin-top: -1em; overflow-wrap: break-word;}
h1~h3{color:rgb(00,100,160);font-weight:bold; font-size:110%; 
	text-align: left; margin-top: -1em; overflow-wrap: break-word;}		
h4{font-size:1em; color:black; font-size-adjust:.75; width:100%; 
	text-align:left; font-weight:bold; text-transform:uppercase; overflow-wrap: break-word;
	padding:2em 10em; box-sizing:border-box; letter-spacing:.1rem; }
h1~h2 {margin-top:-.75em; margin-bottom:2.5em; overflow-wrap: break-word;
		font-size:1.25em; text-transform:uppercase; 
		box-sizing:border-box; color:black}	
p{text-align: left; font-size: 1rem; margin: .5em 0; font-weight:300}
ol li{text-align: left;  margin: .2rem 0}
main>img{width:100%; height: 50vw; object-fit:cover; 
	object-position: center; display: block; margin-top: 5em;}
details{text-align: left; padding:1em 0; padding-bottom: 0;}
	summary{padding: 0; margin-bottom: .0rem;}
	summary span{font-size:1em; color:#078BC3; 
					display: inline;
					background: none; width: auto; }
	summary:hover span{background: none;}					
		summary:before, summary:after{content: ''; display: inline-block; height: 1rem;
						width: .3em;  background-image: url(/slike/strelica.svg);
						background-size:auto 100%; background-repeat: no-repeat;
						background-position: right; margin: 0 .25rem;}	
		summary:after{display: none;}
		details .figure_pola{width:100%; margin:1.5em 0; float:none}
		details[open] summary span{background: none;}	
.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
	{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{background:linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.15) 20%, rgba(0,0,0,0) 100%); }
.voda,.voda2{margin:0; clear: both; padding: 5rem 0; color:white;
	background-image: url(/slike/voda-background.webp);
	background-repeat: repeat;
	background-size: 100vw auto;
	background-position:top;}
.voda2{background-image: url(/slike/voda2-background.webp);}	
	.voda canvas{position: absolute; top:0vh; left: 0; z-index:-1; display: none;}	
	.voda h2, .voda h3, .voda p{color:white; text-shadow: 0 0 .5em black;}	
	.voda 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; 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)}	
	.voda dl{padding:0rem 0rem;flex-wrap: wrap; align-items: flex-start;
			justify-content: flex-start; align-content: flex-start;}
		.voda dt{font-size: 4rem; margin: 1rem 0; width: 100%;
				text-align: left;}
		.voda dt span{display: block; clear: both; font-size: 1rem; 
					text-align: left; display: block; 
					font-family: 'Poppins', sans-serif;}					
.kulir{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) ;}	
.kulir a{width: 100%; height: 7rem; 
	background: url(/galerija_slika-thumbs/Euro-Pool-2.webp),
				url(/galerija_slika-thumbs/Euro-Pool-20.webp);
	background-size: 50% auto, 50% auto;
	background-repeat: no-repeat,no-repeat;
	background-position:left top, right top}
	.kulir 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{background-color:rgba(00,100,160,.2);}						
.slike_par{ height: auto; margin-top: 0em; padding:0;}
	.slike_par img, .slike_par video{width:100%; margin:0; margin-top: 2rem;
				height: auto; float: none; display: block;}		
#galerija_slika img{height:40vw; width:calc(50% - .5em); margin:.25em; 
	border-radius: .5em; }
#galerija_detalji button{height:80vh; width:50%; margin-right:0; background-position:5vw center; }
#galerija_detalji button:nth-of-type(1){height:20vh;  }	
#galerija_detalji button:nth-of-type(3){transform:rotate(180deg); }		
			
/*-----------------------------------------------------------------------*/	
footer{padding:5em 5vw; padding-bottom:1em; }		
	footer h2{font-size:3em; margin-bottom:1rem}
	footer address{width: 100%;}
		footer address div{float:none; width:100%; 
            padding:0em 0; }	
		footer address div:first-of-type{border-right:none;
										padding-left:0;}				
		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: block; }
		footer h3{text-align:left; 
			clear:both; margin:.5rem 0; width: 100%;
			font-size:1.5em; text-transform:uppercase; margin-top:2rem ;}	
		#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 0em; padding-left:1.75em; margin-top:0}
	form{width:100%;  margin-left:0%; box-sizing: border-box; min-height: 0;}
		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; float: none; max-width: 100%;}
		#pozivni{width:4.5rem; float: left; margin-right:.5rem; }
		#telefon{width:calc(100% - 5rem); float: left; }		
		label{float: none; clear: both; padding-top:.75rem; 
				padding-right:0rem; font-size: .9rem; display: block;}
		.select_uz_label{width:auto; float:none; clear:both}	
		.label_float {clear:both; padding-left:0rem; display: block}	
		input[type=number]{width: 5rem;}
		#forma_kvacica{display: none;}
		#forma_zahvala{text-align: left; width: 100%;}	
	.pravne_napomene{height:auto;display:block; }
		.pravne_napomene a{margin:0 1rem; display: block; width: 100%; margin: .5em 0;}	
			#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{padding:0.5em 3vw; display: block; text-align: center;}						
		#GDPR a{display:inline; background-image:none; height:auto; font-weight: 400;
				margin:none; padding:0; width:auto; text-decoration: underline;
				clear: both;}
		#GDPR a::before{content: ''; display: block;}		
		#GDPR a:hover{font-size:1em}
		#GDPR button{display:inline-block; border:1px solid #123575; 
		background-color:white; margin:.2em 0; transition:.5s;margin-left:.5em; 
					border-radius: .3em;
					cursor: pointer; width:6em; padding:.2em .15em; word-break: normal;}
		#GDPR button:hover{color:white; background-color:#123575}	
				
}