category.css

@media (min-width: 1200px){
.catbody{

	position: relative;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	max-width: 1200px;
	min-height: 100%;
	overflow: hidden;
}

.filterfield{
	position: relative;
	height: 40px;
	width: 100%;
	padding-bottom: 10px;
	

}

.itemsfield{
	position: relative;
	min-height: 600px;
	width: auto;

	padding: 0%;
	padding-left: 0%;
	
}
.card{
	
	height: 500px;
	width: 31%;
	background-color: #f2f2f2;
	border:1px solid #e6e6e6;
margin: 10px;
	display: inline-block;
position: relative;

	overflow: hidden;
	box-shadow: 0px 4px 10px grey;
	transition: box-shadow;
	transition-duration: 0.2s;

	transition-timing-function: ease-in-out;
}

.empty{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: grey;
	font-size: 50px;
}

.infopic{
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%,-50%);
	
	height: 80px;
	width: 80px;
}

.cardimg{
	object-fit: cover;
	width: 100%;
	height: 80%;

}

.cardlabel{
position: absolute;
    top: 82%;
    left: 50%;
    width: 100%;
    text-align: center;
    overflow: hidden;
    max-height: 25px;
    
    transform: translate(-50%,0);
    font-size: 25px;
    color: rgb(45,49,149);
	
}

.cardprice{
	position: absolute;
	top: 92%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 25px;
	color: rgb(45,49,149);
	font-style: normal;
	
}
a{
	text-decoration: none;
}
.card:hover{
	
	box-shadow: 0 0 0 grey;
}
.pagination{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2%;
}

.pagination ul li{
	display: inline-block;
	list-style: none;
	
	color: white;
	height: 25px;
	padding:5px;
	line-height: 15px;
	font-size: 15px;
	vertical-align: middle;
	min-width: 30px;
	text-align: center;
	border-radius: 3px;
}
.pagination ul li:hover{
	cursor: pointer;
	background-color:  rgba(45,49,145,1);
}
.pagination ul li a{
color: white;

}
.unactive{
	background-color: #4f53c9;
}
.active{
background-color:  rgba(45,49,145,1);
}
.sortfield{

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 10px;

}

.sort{
	font-size: 15px;
	background-color: #4f53c9;
	color: white;
	outline: rgb(45,49,145);
	padding: 5px;
	text-align: center;
	border-radius: 3px;
}
.sortlabel{
font-size: 15px;
}

.sort:hover{
	cursor: pointer;
	background-color:  rgba(45,49,145,1);
}
}
@media only screen  and (max-width:1199px)  and (min-width: 640px){

.catbody{

	position: relative;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	max-width: 1200px;
	min-height: 100%;
	overflow: hidden;
}

.filterfield{
	position: relative;
	height: 50px;
	width: 100%;
	padding-bottom: 10px;
	
	
}

.itemsfield{
	position: relative;
	min-height: 600px;
	width: 100%;
	margin: 0 3%;

	padding: 0%;
	
	
}
.card{
	
	height: 400px;
	width: 30%;
	background-color: #f2f2f2;
	border:1px solid #e6e6e6;
margin-right: 0.5%;
margin-left: 0.5%;
margin-bottom: 10px;
padding: 0;
	display: inline-block;
position: relative;

	overflow: hidden;
	box-shadow: 0px 4px 10px grey;
	
}

.card:hover{
	box-shadow: none;
}

.empty{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: grey;
	font-size: 30px;
}
.infopic{
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%,-50%);
	
	height: 60px;
	width: 60px;
}

.cardimg{
	object-fit: cover;
	width: 100%;
	height: 85%;

}

.cardlabel{
	position: absolute;
	top: 88%;
	left: 50%;	
	max-height: 20px;
	width: 100%;
	text-align: center;
	overflow: hidden;

	transform: translate(-50%,0);
	font-size: 20px;
	color: rgb(45,49,149);
	font-style: bold;
	
}

.cardprice{
	position: absolute;
	top: 93%;
	left: 50%;
	transform: translate(-50%,0);
	font-size: 20px;
	color: rgb(45,49,149);
	font-style: normal;
	
}
a{
	text-decoration: none;
}

.pagination{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1%;
}

.pagination ul li{
	display: inline-block;
	list-style: none;
	
	color: white;
	height: 30px;
	padding:0px 5px;
	margin-right: 5px;
	line-height: 30px;
	font-size: 15px;
	vertical-align: middle;
	min-width: 40px;
	text-align: center;
	border-radius: 3px;
}
.pagination ul li:hover{
	cursor: pointer;
	background-color: rgb(45,49,145);
}
.pagination ul li a{
color: white;

}
.unactive{
	background-color: #4f53c9;
}
.active{
background-color: rgb(45,49,145);
}
.sortfield{

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0.5%;

}

.sort{
	font-size: 15px;
	background-color: #4f53c9;
	color: white;
	outline: rgb(45,49,145);
	padding: 5px;
	text-align: center;
	border-radius: 3px;
}
.sortlabel{
font-size: 15px;
}

.sort:hover{
	cursor: pointer;
	background-color: rgba(45,49,145,1);
}

}
@media only screen and (max-width: 639px){

	.catbody{

	position: relative;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	max-width: 1200px;
	min-height: 100%;
	overflow: hidden;
}

.filterfield{
	position: relative;
	height: 80px;
	width: 100%;
	padding-bottom: 10px;
	

}

.itemsfield{
	position: relative;
	min-height: 800px;
	width: 100%;
	margin: 0;
	padding: 0%;
	
	
}
.card{
	
	height: 800px;
	width: 49%;
	background-color: #f2f2f2;
	border:1px solid #e6e6e6;
margin-right: 0.5%;
padding: 0;
	display: inline-block;
position: relative;

	overflow: hidden;
	box-shadow: 0px 4px 10px grey;
	
}

.card:hover{
	box-shadow: 0 0 0 grey;
}

.empty{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: grey;
	font-size: 50px;
}

.infopic{
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
	
	height: 60px;
	width: 60px;
}
.cardimg{
	object-fit: cover;
	width: 100%;
	height: 85%;

}

.cardlabel{
	position: absolute;
	top: 88%;
	left: 50%;	
	max-height: 30px;
	width: 100%;
	text-align: center;
	overflow: hidden;

	transform: translate(-50%,0);
	font-size: 30px;
	color: rgb(45,49,149);
	font-style: bold;
	
}

.cardprice{
	position: absolute;
	top: 93%;
	left: 50%;
	transform: translate(-50%,0);
	font-size: 35px;
	color: rgb(45,49,149);
	font-style: normal;
	
}
a{
	text-decoration: none;
}

.pagination{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1%;
}

.pagination ul li{
	display: inline-block;
	list-style: none;
	
	color: white;
	height: 50px;
	padding:10px;
	margin-right: 5px;
	line-height: 30px;
	font-size: 30px;
	vertical-align: middle;
	min-width: 50px;
	text-align: center;
	border-radius: 3px;
}
.pagination ul li:hover{
	cursor: pointer;
	background-color: rgb(45,49,145);
}
.pagination ul li a{
color: white;

}
.unactive{
	background-color: #4f53c9;
}
.active{
background-color: rgb(45,49,145);
}
.sortfield{

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0.5%;

}

.sort{
	font-size: 30px;
	background-color: #4f53c9;
	color: white;
	outline: rgb(45,49,145);
	padding: 5px;
	text-align: center;
	border-radius: 3px;
}
.sortlabel{
font-size: 30px;
}

.sort:hover{
	cursor: pointer;
	background-color: rgba(45,49,145,1);
}

}