@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: muli_font;
  src: url("font/Muli-Light.ttf");
}


body, html{margin: 0px; padding: 0px; height: 100%; width: 100%;  min-height: 500px; font-family: muli_font; text-transform: uppercase; position: relative;}	



/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 50px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #7B7878; 
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #9A9A9A; 
}

.loading{width: 100%; height: 100%; position: absolute; z-index: 990; background-color: #171717; box-sizing: border-box;}
.loading_img{width: 10%; height: auto; margin-left: auto; margin-right: auto; display: block; margin-top: 12%;}
.loading_gif{width: 2.5%; height: 2.5%; margin-left: 48.75%; margin-top: 5%;}
.gif{ margin-left: auto; margin-right: auto; display: block;  width: 75%; height: auto;}

.page{width: 100%; height: 100%; position: relative; }
h3{font-size: 1.1vw;}

main{ height: 91%; width: 100%; background: linear-gradient(90deg, white 60%, #f5f5f5 40%); background-image: url("slike/ozadje2.jpg"); background-repeat: no-repeat; background-size: 100% 100%;}

.konfig_slika{ height: 100%; width: 60%; float: left; box-sizing: border-box;  }
.logo{width: 98%; height: 25%; margin-left: 1%; box-sizing: border-box; padding-top: 1.5%;}
.logo div{font-size: 2.5vw; color:#565656; margin-left: 35%; margin-top: 2%; width: 50%;}
.logo img{width: 50%; height: auto;}
.konfigurator{ width: 100%; height: 75%; position: relative; box-sizing: border-box;}
.konfigurator_okvir{position: relative; box-sizing: border-box;}
.skrito_ozadje{width: 100%; height: auto;}
.change-image-ozadje {width: 100%; height: auto;}
.change-image-plosca {width: 100%; height: auto;}
.change-image{width: 100%; height: auto;}
.plosca{ z-index: 3; position:absolute; left: 0; top:0;}
.podnozje{z-index: 2; position:absolute; left: 0; top:0;}
.ozadje{z-index: 1; position:absolute; left: 0; top:0;}
.back1{position: absolute; width: 5%; height: 98.6%; z-index: 99; left: 0; top:0; box-sizing: border-box}
.back1 img{width: 100%; height: auto; margin-top: 450%; }
.next1{position: absolute; width: 5%; height: 98.6%; z-index: 99; right: 0; top:0; box-sizing: border-box}
.next1 img{width: 100%; height: auto; margin-top: 450%;}
#pogled_naprej{ transition: opacity 0.3s;}
#pogled_nazaj{ transition: opacity 0.3s;}
#pogled_naprej:hover{ opacity: 0.6; cursor: pointer; }
#pogled_nazaj:hover{ opacity: 0.6; cursor: pointer;}

.konfig_meni{ height: 75%; width: 40%; float: left; box-sizing: border-box; padding-left: 2%; padding-top: 1%; padding-right: 1%;}
.meni_naslov{ background-color: #DCDCDC; margin-bottom: 2%; padding: 1%; width: 100%; text-align: center; color: black; box-sizing: border-box; transition: background-color 0.5s; margin-left: 0%; font-size: 1.1vw; font-weight: 600; border: 1px solid #000000; }
.meni_naslov:hover{cursor: pointer; background-color:#BCBCBC; color: #474747;}
.meni_container{ width: 96%; height: 60%;  box-sizing: border-box; margin-bottom: 4%; margin-left: 2%;}

.mize{ overflow-y: auto; height: 80%;}
.img_okvir{ width: 24%; height: auto; float: left; margin-right: 1%; position: relative;}
.check{position: absolute; z-index: 10; width: 15%; height: 15%; right: 0; top: 0; display:none;}
.banner_miza{width: 100%; height: auto; cursor: pointer;}
.plosce{overflow-y: auto; height: 80%;}
.plosce_img{width: 100%; height: auto; cursor: pointer;}
.plosce_banner{ width: 24%; height: auto; float: left; margin-right: 1%; position: relative;}
.plosce_filter{width: 90%; float: left; background-color:#BCBCBC; margin-left: 5%; font-size: 1vw; box-sizing: border-box; margin-bottom: 2%;text-align: center; font-weight: bold; margin-top: 4%; border: 1px solid black;}
.barve{overflow-y: auto; height: 80%;}
.barve_banner{width: 24%; height: auto; float: left; margin-right: 1%; position: relative;}
.barve_banner img:nth-child(2){width: 100%; height: auto; cursor: pointer;}

.str_vel{ overflow-y: auto; height: 100%; box-sizing: border-box; text-align: center; font-weight: 600; margin-top: -2%; color: white;}
.str_vel_izbira{width: 90%; margin-left: 5%; background-color:#BCBCBC; padding: 1%; box-sizing: border-box; font-size: 0.9vw; margin-top: 2%; transition: background-color 0.5s; border: 1px solid black;}
.str_vel_izbira:hover{cursor: pointer; color: #474747; background-color: #D0D0D0;}
.str_vel_izpis{width: 90%; margin-left: 5%; display: none; box-sizing: border-box; padding-top: 2%;}
.str_vel_izpis div{ width: 24%; height: auto; float: left; margin-left: 1%; position: relative;}
.str_vel_izpis img:nth-child(2){width: 100%; height: auto; cursor: pointer;}
.swiss{padding-left: 25%;}
.lakirano{padding-left: 25%;}
.mat{padding-left: 14%;}

footer{width: 100%; height: 9%; background-color:#DCDCDC; float: left; box-sizing: border-box; color: black; border-top: 1px solid black;}
.izbrano{height: 100%; float: left; font-size: 0.9vw; padding-right: 0.1%; padding-left: 0.1%; border-right: 1px solid #858585; box-sizing: border-box; width: 14%; text-align: center; padding-top: 0.5%; }
.izbrano div{font-weight: bold; }
.povprasevanje{height: 100%; float: right; font-size: 1.1vw; padding-right: 1%; padding-left: 1%; border-left: 1px solid #858585; box-sizing: border-box; padding-top: 1%; width:16%; text-align: center; background-color:#AAAAAA; color: red; transition: background-color 0.5s;}
.povprasevanje:hover{ cursor: pointer; background-color: #212121;}



.povprasevanje_obrazec{ position: absolute; z-index: 999; width: 90%; height: 90%; top: 5%; background-color: white; left: 5%; display: none; box-sizing: border-box; border: 1px solid #393939;}
.povprasevanje_header{width: 100%; height: 15%; text-align: center; font-size: 2.6vw; padding-top: 1%; box-sizing: border-box; border-bottom: 1px solid #B9B9B9;}
.nazaj{bottom: 0%; right: 0%; position: absolute; z-index: 1000; height: 5%; width: 20%; background-color:#373737; font-size: 1.2vw; text-align: center; transition: background-color 0.5s; color: white;}
.nazaj:hover{ cursor: pointer; background-color: #212121;}
.povprasevanje_levo{ box-sizing: border-box; width: 60%; height: 85%; float: left; padding-top: 2%; background-color: #f5f5f5; padding-left: 1%; font-size: 1.2vw; }
.povprasevanje_desno{box-sizing: border-box; width: 40%; height: 90%; float: left;  padding-top: 1%; padding-left: 10%; font-size: 1.1vw;}
.povprasevanje_desno input{ width: 80%;}
.povprasevanje_desno select{ width: 83%;}
.povprasevanje_desno span{font-size: 1.5vw;}
#submit{width: 83%; font-size: 1.1vw; background-color:#AAAAAA; color: red; transition: background-color 0.5s; height: 8%; border: 1px solid black; }
#submit:hover{cursor: pointer; background-color: #212121; }
textarea{width: 80.5%; resize: none; height: 13%}
select{font-size: 1.1vw; height: 8%; }
.obrazec{ height: 75%; overflow-y: auto; margin-top: 3%;}
form{height: 100%;}
input{height: 5%; font-size: calc(10px + .5vw);}

.postavka{width: 33%; height: 100%; float: left; box-sizing: border-box; text-align: center;  border-top: 2px solid #242424; }
.top_tabela1{width: 100%; border-bottom: 1.5px solid #242424; border-right: 1.5px solid #242424; height: 10%; box-sizing: border-box;}
.izpis{border-right: 1.5px solid #242424; width: 100%; height: 9%; padding-top: 3%; border-bottom: 0.5px solid #242424; box-sizing: border-box;}
.postavka div{border-left: 2px solid #242424;}

.izbrani_artikel{width:33%; height: 100%; float: left; box-sizing: border-box; text-align: center; border-top: 2px solid #242424;}
.top_tabela2{width: 100%; border-bottom: 1.5px solid #242424; border-right: 1.5px solid #242424; height: 10%; box-sizing: border-box;}



.cena{width: 33%; height: 100%; float: left; box-sizing: border-box; text-align: center; border-top: 2px solid #242424;}
.top_tabela3{width: 100%; border-bottom: 1.5px solid #242424; height: 10%; box-sizing: border-box;}
.cena div{border-right: 2px solid #242424;}





/*------------------------------MOBILE-------------------------------------------*/


@media only screen and (max-width: 768px) and (orientation:Portrait) {

	
main{ height: 87%; width: 100%; background: linear-gradient(90deg, white 60%, #f5f5f5 40%); background-image: url("slike/ozadje2.jpg"); background-repeat: no-repeat; background-size: 100% 100%; overflow-y:auto; box-sizing: border-box; }
	
.loading_img{width: 45%; height: auto; margin-left: auto; margin-right: auto; display: block; margin-top: 40%;}
.loading_gif{width: 10%; height: 10%; margin-left: 45%; margin-top: 15%;}
.gif{ margin-left: auto; margin-right: auto; display: block;  width: 75%; height: auto;}	
	
	

.konfig_slika{ height: auto; width: 100%; box-sizing: border-box;  }
.logo{width: 98%; height: 20%; margin-left: 1%; box-sizing: border-box; padding-top: 3%;}
.logo div{font-size: 2.5vw; color:#565656; margin-left: 35%; margin-top: 2%; width: 50%;}
.logo img{width: 50%; height: auto; padding-left: 25%;}	

	

.konfig_meni{ height: 40%; width: 100%; box-sizing: border-box; padding-left: 1%;}
.meni_naslov{ margin-bottom: 2%; padding: 1%; width: 100%; text-align: center; color: black; box-sizing: border-box; transition: background-color 0.5s; margin-left: 0%; padding-top: 1%; padding-bottom: 1%; font-size: 3.2vw;}
.str_vel_izbira{width: 100%; background-color:#BCBCBC; padding: 1%; box-sizing: border-box; font-size: 2.8vw; margin-top: 2%; transition: background-color 0.5s; margin-left: 0%; overflow-y: auto;}
.meni_container{ width: 96%; height: 60%;  box-sizing: border-box; margin-bottom: 4%;}
.str_vel{ overflow-y:auto; height: 100%; box-sizing: border-box; text-align: center; font-weight: 600; margin-top: -2%; color: black; font-size: 2.5vw; }
.str_vel_izpis{margin-bottom: 4%;}

.plosce_filter{width: 90%; float: left; background-color:#BCBCBC; margin-left: 5%; font-size: 2.5vw; box-sizing: border-box; margin-bottom: 2%;text-align: center; font-weight: bold; margin-top: 4%;}
	

footer{width: 100%; height: 13%; background-color:#DCDCDC; float: left; box-sizing: border-box; color: black; border-top: 2px solid #454545;}
.izbrano{height: 50%; float: left; font-size: 1.7vw; padding-right: 0.5%; padding-left: 0.5%; border-right: 1px solid #858585; box-sizing: border-box; width: 25%; text-align: center; padding-top: 1.5%; border-bottom: 1px solid #858585;  }
.izbrano div{font-weight:700; }
.povprasevanje{height: 50%; float: right; font-size: 2.8vw; padding-right: 1%; padding-left: 1%; border-left: 0px solid #858585; border-bottom: 1px solid #858585; box-sizing: border-box; padding-top: 3%; width:50%; text-align: center; background-color:#AAAAAA; color: red; transition: background-color 0.5s; font-weight: 700;}
.povprasevanje:hover{ cursor: pointer; background-color: #212121;}
	

          		/*---------obrazec za izpis in povpraševanje ---------------*/
	
	
.povprasevanje_obrazec{ position: absolute; z-index: 999; width: 95%; height: 95%; top: 2.5%; background-color: white; left: 2.5%; display: none; box-sizing: border-box; border: 1px solid #393939;}
.povprasevanje_header{width: 100%; height: 8%; text-align: center; font-size: 5vw; padding-top: 3%; box-sizing: border-box; border-bottom: 1px solid #B9B9B9;}
.nazaj{bottom: 0%; right: 0%; position: absolute; z-index: 1000; height: 5%; width: 50%; background-color:#373737; font-size: 3vw; text-align: center; transition: background-color 0.5s; color: white; box-sizing: border-box; padding-top: 1.5%;}
.nazaj:hover{ cursor: pointer; background-color: #212121;}
.povprasevanje_levo{ box-sizing: border-box; width: 100%; height: 46%; padding-top: 2%; background-color: #f5f5f5; padding-left: 1%; font-size: 2.5vw; }
.povprasevanje_desno{box-sizing: border-box; width: 100%; height: 46%; padding-top: 1%; padding-left: 10%; font-size: 3.5vw;}
.povprasevanje_desno input{ width: 80%;}
.povprasevanje_desno select{ width: 83%;}
.povprasevanje_desno span{font-size: 4vw; padding-left: 20%; font-weight: bold;}
#submit{width: 83%; font-size: 4vw; background-color:#AAAAAA; color: red; transition: background-color 0.5s; height: 25px; border: 1px solid black; }
#submit:hover{cursor: pointer; background-color: #212121; }
textarea{width: 80.5%; resize: none;}
select{font-size: 3.5vw; height: 15%;}
.obrazec{ height: 75%; overflow-y: auto; margin-top: 3%;}


.postavka{width: 35%; height: 100%; float: left; box-sizing: border-box; text-align: center; }
.top_tabela1{width: 100%; border-bottom: 1.5px solid #242424; border-right: 1.5px solid #242424; height: 10%; box-sizing: border-box; }
.izpis{border-right: 1.5px solid #242424; width: 100%; height: 10%; padding-top: 4%; border-bottom: 0.5px solid #242424; box-sizing: border-box;}


.izbrani_artikel{width:35%; height: 100%; float: left; box-sizing: border-box; text-align: center;}
.top_tabela2{width: 100%; border-bottom: 1.5px solid #242424; border-right: 1.5px solid #242424; height: 10%; box-sizing: border-box;}



.cena{width: 29%; height: 100%; float: left; box-sizing: border-box; text-align: center;}
.top_tabela3{width: 100%; border-bottom: 1.5px solid #242424; height: 10%; box-sizing: border-box;}
.cena .izpis{padding-top: 5%;}


}