/* Start Product-------------------------*/

.product
{
	margin: 2%;
	margin-top: 30px;
}

.product-image-div
{
	position: relative;
	width: 20%;
	padding: 0.2%;
	box-sizing: border-box;
	float: left;
}
.product-image-div:nth-child(5n+1){
	clear:left;
}
.product-image
{
	transition: .3s ease;
 	width: 100%;
}
.details
{
	transition: .3s ease;
	width: 100%;
	opacity: 0;
}
.model-img-div {
	position: absolute;
	margin-top: -95%;
	left: 3.5%;
	z-index: 1;
	overflow: hidden;
}
.search-model {
	position: relative;
	width: 20%;
	z-index: 1;
}
.model-div {
	position: relative;
	background-color: white;
	border: 0.1vw solid #11AF80;
	padding: 7%;
	width: 80%;
	margin-top: -17.5%;
	border-bottom-right-radius: 0.3vw;
	border-top-right-radius: 0.3vw;
}
.model
{
	position: absolute;
	font-size: 1.4vw;
	margin-top: -5.2%;
	margin-left: 14%;
	font-family: arial;
}
.price
{
	position: absolute;
	margin:-60% 0;
	font-size: 1.8vw;
	font-family: titr;
	left: 1.5%;
	right: 1.5%;
	text-align: center;
}
.details-button
{
	outline: none;
	position: absolute;
	bottom: 15%;
	margin-left: 25.5%;
	width: 50%;
	padding: 2%;
	border: 0;
	color: white;
	background-color: green;
	font-size: 1.8vw;
	margin-top: -13.8%;
	cursor: pointer;
	border-radius: 5px;
	font-family: nazanin;
	z-index: 6;
}
/* model four------------------------*/
.model-four
{
	position: absolute;
	font-size: 1.9vw;
	margin-top: -6%;
	margin-left: 14%;
}
.price-four
{
	position: absolute;
	margin-top: -58%;
	font-size: 2.2vw;
	font-family: titr;
}
.details-button-four
{
	outline: none;
	position: absolute;
	bottom: 15%;
	margin-left: 25.5%;
	width: 50%;
	padding: 3%;
	border: 0;
	color: white;
	background-color: green;
	font-size: 2vw;
	margin-top: -13.8%;
	cursor: pointer;
	border-radius: 5px;
}
/* model four------------------------*/
.details-button:hover
{
	opacity: 0.7;
}	
.product-image-div:hover .product-image {
   	opacity: 0.3;
}
.product-image-div:hover .details {
 	opacity: 1;
}
/* End Product-------------------------*/

/* Loading Image ----------------------*/

.loading-div {
	display: none;
  	clear: left;
}
.loading {
	margin-left: 47%;
	width: 5%;
	height: 5%;
}

/* Loading Image ----------------------*/

/* Start Product Preloading */
.pre-loading-img
{
	position: absolute;
	z-index: 5;
	width: 20%;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	margin:auto;
}
.pre-loading-div {
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  overflow: hidden;
  width: 95%;
  height: 95%;
  background: #aaa;
  text-align: center;
  line-height: 120px;
  font-size: 40px;
  border-radius: 0.5vw; 
  opacity: 0.8;
}
/* End Product Preloading */
.not-found {
	display: none;
	text-align: center;
	font-size: 2vw;
	margin-top: 2%;
}