@font-face {font-family:'Mulish'; src:url('../fonts/Mulish-Regular.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap;}
@font-face {font-family:'Mulish'; src:url('../fonts/Mulish-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family:'Mulish'; src:url('../fonts/Mulish-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap;}
@font-face {font-family:'Mulish'; src:url('../fonts/Mulish-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap;}
@font-face {font-family:'Mulish'; src:url('../fonts/Mulish-Italic.woff2') format('woff2'); font-weight:600; font-style:italic; font-display:swap;}


html {overflow:hidden; overflow-x:hidden; overflow-y:hidden;}

body {height:calc(100vh - 100px); margin:50px; overflow-x:hidden; overflow-y:scroll; font-family:Mulish, Roboto, Helvetica, Arial, sans-serif; font-weight:normal; background:#edeff0;}
a, p {font-weight:600;}


/* Firefox */			/* * {scrollbar-width:30px; scrollbar-color:#888 transparent;} */
/* width */ 			::-webkit-scrollbar {width:40px;}
/* width */ 			::-webkit-scrollbar-button {display:none;}
/* Track */				::-webkit-scrollbar-track {background:#f1f1f1;}
/* Track */				::-webkit-scrollbar-track-piece {background:#f1f1f1;}
/* Track */				::-webkit-scrollbar-corner {background:#f1f1f1;}
/* Handle */			::-webkit-scrollbar-thumb {background:#888;}
/* Handle on hover */	::-webkit-scrollbar-thumb:hover {background:#c4252b;}
/* Handle on hover */	/* ::-webkit-resizer {background:#555;} */


	button {transition:transform 0.15s ease-out, box-shadow 0.15s ease-out; box-shadow:2px 2px 3px rgba(0,0,0,0.1);}
		button:hover, button:active {transform:translateY(-2px); /* move slightly up */ box-shadow:4px 4px 6px rgba(0,0,0,0.35); /* stronger shadow */}


.sidebar {position:fixed; width:20vw; height:calc(100vh - 100px);}
	.logo img {width:20vw; height:6.7vw;}
	.category-filter {margin:0; padding:5vh 0;}
		.category-filter button {position:relative; display:inline-flex; padding:0 64px 0 24px; align-items:center; border:none; border-right:8px solid #c4252b; border-left:8px solid #80b833; margin-top:1rem; background:linear-gradient(90deg, #80b833 50%, #c4252b 0); background-size:200% 100%; background-position:100% 100%; transition:all .75s; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#fff !important; -webkit-appearance:none; cursor:pointer; }
		.category-filter button:hover, .category-filter button.active {background-position:0 100%;}
	
	
	
.category-filter button {width:20vw; height:6vh; margin:0.8vh 0; cursor:pointer; font-family:Mulish, Roboto, Helvetica, Arial, sans-serif; color:black; font-size:0.8vw;  letter-spacing:0.1rem;}
	/*.category-filter button.active, .category-filter button:hover {background-color:#0066cc; color:white; }*/
/*				.category-filter > button:first-child {display:block; height:12vh; width:100%; background:url(../images/ui/01-1-Strelovodna_oprema-BW.webp) no-repeat center;}
					.category-filter > button:first-child:hover, .category-filter > button:first-child.active {background:url(../images/ui/01-1-Strelovodna_oprema.webp);}
				.category-filter > button:nth-child(2) {display:block; height:12vh; width:100%; background:url(../images/ui/01-1_Slemenski-nosilci_hero_s-BW.webp) no-repeat center;}
					.category-filter > button:nth-child(2):hover, .category-filter > button:nth-child(2).active {background:url(../images/ui/01-1_Slemenski-nosilci_hero_s.webp) no-repeat center;}
				.category-filter > button:nth-child(3) {display:block; height:12vh; width:100%; background:url(../images/ui/01-2-Prenapetostna-zascita_naslovna-slika_S-BW.webp) no-repeat center;}
					.category-filter > button:nth-child(3):hover, .category-filter > button:nth-child(3).active {background:url(../images/ui/01-2-Prenapetostna-zascita_naslovna-slika_S.webp) no-repeat center;}
				.category-filter > button:nth-child(4) {display:block; height:12vh; width:100%; background:url(../images/ui/01-3-Kabelske_police_naslovna_slika-BW.webp) no-repeat center;}
					.category-filter > button:nth-child(4):hover, .category-filter > button:nth-child(4).active {background:url(../images/ui/01-3-Kabelske_police_naslovna_slika.webp) no-repeat center;}
				.category-filter > button:nth-child(5) {display:block; height:12vh; width:100%; background:url(../images/ui/01-4-konstrukcijski-sistemi_hero01-BW.webp) no-repeat center;}
					.category-filter > button:nth-child(5):hover, .category-filter > button:nth-child(5).active {background:url(../images/ui/01-4-konstrukcijski-sistemi_hero01.webp) no-repeat center;}
*/

	.language-selector {position:absolute; bottom:0; margin:0; width:100%; display:flex; flex-wrap:nowrap; justify-content:space-between;}
		.language-selector button {width:58px; height:42px; margin:0; padding:0; cursor:pointer; font-family:Mulish-Regular, Roboto, Helvetica, Arial, sans-serif; border:none;}
			.si, .hr, .rs, .de, .en {background:url(../images/ui/flags-580x85.png) no-repeat; background-size:290px 42.5px; filter:grayscale(1) opacity(0.5);}
			.si.active, .hr.active, .rs.active, .de.active, .en.active {filter:grayscale(0) opacity(0.9);}
			.si {background-position:;}
			.hr {background-position:-58px;}
			.rs {background-position:-116px;}
			.de {background-position:-174px;}
			.en {background-position:-232px;}



#product-list {float:right; width:calc(80vw - 160px); /*display:flex; flex-wrap:wrap; gap:20px;*/}
	.product {position:relative; float:left; display:block; width:calc(14vw - 40px); height:calc(14vw - 40px); margin:0 0 3vw 3vw; padding:0.3vw 1vw 1vw 1vw; text-align:center; background:white; font-size:0.75vw;}
	/*	#product-list > div.product {filter:grayscale(1) opacity(0.3); pointer-events:none;} */
		#product-list > div.present {filter:grayscale(0) opacity(1); pointer-events:all;}

		.product h3 {display:block; position:absolute; padding:0 20px; left:0; bottom:0;}
		.product img {max-width:100%; max-height:90%; height:auto;}
		.product p {display:none;}
		.product button {display:block; position:absolute; left:0; top:0; width:100%; height:100%; color:black; background:none; cursor:pointer; border:none;}
			.product-700911 img {margin:-1.4vw 0 0 0;}
			.product-20344 img, .product-20322 img, .product-300502 img, .product-88711113 img {margin:1.4vw 0 0 0;}
			.product-700920 img {max-width:60%; max-height:50%; height:auto; margin:1vw;}
			.product-20325 img {max-width:200%; max-height:200%; height:auto; margin:-6vh 0 0 -5.5vw;}


	#itemModal {display:block; position:fixed; z-index:10; left:-150%; top:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0); opacity:0; transition:opacity 0.4s ease-out, box-shadow 0.2s ease-out;}
	#itemModal.active {opacity:1; background-color:rgba(0, 0, 0, 0.7);}
	
		.modal-content {position:relative; width:85%; height:90vh; margin:5vh auto; padding:0 2vw; border-radius:8px; overflow-y:auto; background-color:#edeff0; background:linear-gradient(180deg,#edeff0 0%, #C7C7C7 100%); overflow:hidden;}
		
			#modal-product-detail {position:absolute; right:0; height:100%; z-index:5; width:25%; padding:0 5% 0 2%; background:#edeff0;}
				#modal-product-detail h1 {font-weight:900; font-size:1.8vw; line-height:1.2; padding:10vh 0 0 0;}
				#modal-product-detail :nth-child(2) {line-height:1; color:gray;}
				#modal-product-detail :nth-child(3) {line-height:1.5;margin:5vw 0;}
		.modal-header {display:block; width:100%; height:5vh; position:absolute; left:0; top:0; background:#80b833; z-index:10;}	
			.close-button {display:block; width:4vh; height:5vh; float:right; padding: 0 1vw 0 0; font-size:4vh; font-weight:900; cursor:pointer; background:#c4252b; text-align:right; line-height:1.25; color:white;}
			.modal-header:hover .close-button {width:31%; transition:all 0.15s ease-out, box-shadow 0.15s ease-out;}
		#verge3d-container {position:absolute; left:0; top:4.8vh; width:75%; height:95%; border:none; display:block; /* Always visible inside modal */}
			 #resetView {position:relative; float:right; right:20vw; top:80vh; width:6vw; height:5vh; z-index:100; background:url(../images/UI/reset-view.svg) no-repeat center; background-size:50%; border:none; box-shadow:none; content-visibility:hidden; filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); transition:all 0.15s ease-out, box-shadow 0.15s ease-out;}
				#resetView:hover {filter:brightness(0) saturate(80%) invert(15%) sepia(98%) saturate(2366%) hue-rotate(350deg) brightness(110%) contrast(92%) drop-shadow(2px 2px 3px rgba(0,0,0,0.25));}

			 #startAnimation {display:none; position:relative; float:right; right:20vw; top:80vh; width:6vw; height:5vh; z-index:100; border:none; background:#80b833; color:white; box-shadow:none; filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.2)); transition:all 0.15s ease-out, box-shadow 0.15s ease-out;}
			.product-88707392 #startAnimation {display:block;}









	/* .product p {display:block; position:absolute; bottom:0; font-size:8px; color:red;}
/************************************* TMP ************************************************

* {outline:solid 1px;} 

body {background:gray;}
	
	
	.product p {display:block; position:absolute; bottom:0; font-size:8px; color:red;}
	
	
	#v3d-container > :nth-child(3) {display:none;}