/* *********************** DIV IMAGE + TEXT ************************ */
.pricelistFrame{
	position: relative;
	flex-direction: row;
	display: flex;
	margin-top: 10px; /* strana, unosi se visina nav trake */
	width: 960px;

	margin-left: auto;
	margin-right: auto;
	z-index: -10;


}

.pricelistSlika{
	
	flex:1;
	order:1;

	display: block;
	margin-left: auto;
	margin-right: auto;
	z-index: 10;
}
.pricelistSlika img{
	margin-top: 30px;
	display: flex;
	z-index: 20;
}
.pricelistSlika a{
	
	
	z-index: 30;
}

.pricelistText{
	margin-top: 30px;
	text-align: justify;
	
color: rgb(0, 0, 0);
	flex:2;
	order:2;
	width: 550px;/* plus najveća širina slike mora biti ispod 948+12 bordera */
	display: block;

	padding-left: 0px;
	padding-top: 0px;
	z-index: -10;
}
.pricelistImgBorder{/* Border oko slike tip 1 */

	display: block;
	margin-left: 0px;	
	padding: 2px;			
	border: 4px solid #525252;
	background-color: rgb(131, 131, 131);
	z-index: 100;
	
	}
/* *********************** ARCHIVE *************************************************** */
	.ArchiveImage{/* Border oko slike tip 1 */
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		z-index: 10;

	

		
		}
	.ArchiveContainer{
position: relative;
	display: inline-flex;
	flex-wrap: wrap;


	margin-top: 10px; /* strana, unosi se visina nav trake */
	width: 960px;

	margin-left: auto;
	margin-right: auto;
	z-index: -10;


	}
/* *********************** MEDIA *************************************************** */

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

	.pricelistFrame{
		
	  flex-direction:column;
	  width:100%;
	  display: flex;
	  margin-left: auto;
	margin-right: auto;
	}
	  
	  .pricelistSlika{
			  
			  padding: 0px;	
			 
			  display: block;
			  margin-left: auto;
			margin-right: auto;

			  }
	  .pricelistText{
			  display: block;
			  padding-left: 0px;
			  padding-top: 0px;
			  margin-left: auto;
			  margin-right: auto;
			  text-align: center;
			  margin-bottom: 40px;
			  margin-top: 0px;
			  width:90%;
			  
		  }
				  
	  .pricelistImgBorder{/* Border oko slike price list */
			
			  padding: 2px;			
			  border: 4px solid #525252;
			  background-color: rgb(131, 131, 131);
			  }

			  .pricelistImgname, .pricelistImgsize, .pricelistImgtext{
				text-align: center;
				text-indent: 0px;
			}

			.ArchiveContainer{
				width: 100%;
				align-items: center;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-left: auto;
				margin-right: auto;}

				.ArchiveImage{/* Border*/
				width: 25%;
				height: 25%;
					display: block;
					
					margin-left: auto;
					margin-right: auto;
					
					z-index: 10;
					
					border:10px solid  #bab08a;
				
			
					
					}
  
  

}



/* *********************** STYLE INSIDE BOX  FONTS************************ */
.pricelistImgname{
	text-align: justify;

	font-size: 18px;

	font-weight: bold;
	color: #000000;
	
	white-space: normal;
	text-indent: 20px;
	vertical-align: top
}
.pricelistImgsize{
	text-align: justify;
	
	font-size: 14px;
	color: #000000;
	
	white-space: normal;
	text-indent: 20px;
	vertical-align: top
}

.pricelistImgtext{
	text-align: justify;
	font-weight: bold;
	font-size: 14px;
	color: #000000;
	
	white-space: normal;
	text-indent: 20px;
	vertical-align: top
}


/* *********************** SLIDING PANELS ************************************************************************************* */
.panel {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	
	width: 960px;

	overflow: hidden;
	overflow-x: scroll;
	overscroll-behavior-x: auto;
	overflow-y: hidden;
	align-items:flex-end
}
.panel1 {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	
	width: 960px;

	overflow: hidden;
	overflow-x: scroll;
	overscroll-behavior-x: auto;
	overflow-y: hidden;
	align-items:flex-end
}
.panel2 {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	
	width: 960px;

	overflow: hidden;
	overflow-x: scroll;
	overscroll-behavior-x: auto;
	overflow-y: hidden;
	align-items:flex-end
}

.panel::-webkit-scrollbar {
	width: 100%;
	height:120px;
	background-image: url("../img2/IraqAll.jpg");
	  }

	  .panel1::-webkit-scrollbar {
		width: 100%;
		height:120px;
		background-image: url("../img2/MedenaAll1bS.jpg");
		  }

		  .panel2::-webkit-scrollbar {
			width: 100%;
			height:285px;
			background-image: url("../img2/SmederevoBg.jpg");
			  }
.panel::-webkit-scrollbar-thumb {
	width: 228px;
	background-image: url("../img2/thumbslider.png");
	
  }
  .panel1::-webkit-scrollbar-thumb {
	width: 228px;
	background-image: url("../img2/thumbslider.png");
	
  }
  .panel2::-webkit-scrollbar-thumb {
	width: 421px;
	background-image: url("../img2/thumbsliderSmederevo.png");
	
  }

@media screen and (max-width: 768px) {
	.panel, .panel1,.panel2 {
		width: 94vw

	}
	.panel::-webkit-scrollbar{
		background-image: url("../img2/IraqAll.jpg");
		background-size: 100vw;
		height:60px;
		background-repeat: no-repeat;

	}

	.panel1::-webkit-scrollbar{
		background-image: url("../img2/MedenaAll1bS.jpg");
		background-size: 100vw;
		height:60px;
		background-repeat: no-repeat;

	}

	.panel2::-webkit-scrollbar{
		background-image: url("../img2/SmederevoBg.jpg");
		background-size: 100vw;
		height: 120px;
		background-repeat: no-repeat;

	}

	.panel::-webkit-scrollbar-thumb {
		
		opacity: 0%;
		width: 10vw;
		
		background-image: url("../img2/thumbsliderM.png");
		
	  }
	  .panel1::-webkit-scrollbar-thumb {
		
		opacity: 0%;
		width: 10vw;
		
		background-image: url("../img2/thumbsliderM.png");
		
	  }
	  .panel2::-webkit-scrollbar-thumb {
		background-image: url("../img2/thumbsliderM.png");
		opacity: 0%;
		width: 10vw;
		
		
		
	  }

}