*{
	box-sizing: border-box;
}

#heading{
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	padding-top: 150px;
	margin-bottom: 60px;
}

#container{
	padding-left: 9.4%;

}
.box{
	width: 28.07%;
	height: 300px;
	background-color: #e1e3e1;
	float: left;
	margin-right: 1.692%;
	margin-bottom: 13px;
	position: relative;
	border: 1px solid black;
	border-radius: 5px;

}

.items{
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 10px 40px;
	border: 1px solid black;
	background-color: #801327;
	font-weight: bolder;
	color: white;
	border-radius: 5px;

}

.content{
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	top: 20%;
	padding-left: 20px;
	padding-right: 20px;
	text-align: justify; 
	
}

.box:hover{
	background-color: #f2f5f2;
}

	/*FOR LARGE DEVICE >1200PX*/
@media (min-width: 1200px) {
.content{
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	top: 30%;
	padding-left: 20px;
	padding-right: 20px;
	text-align: justify; 
}

}

	/*FOR MEDIUM DEVICE >768PX*/
@media (min-width: 768px) and (max-width: 991px) {
.box{
	width: 48%;
	height: 250px;
}
#container{
	padding-left: 1.5%;

}
#box3 .box{
	width: 98%;
}
.content{
	top: 25%;
	
}
#heading{
	padding-top: 50px;
}

}

	/*FOR SMALL DEVICE >520PX*/
@media (min-width: 520px) and (max-width: 767px) {
.box{
	width: 98%;
	height: 250px;
}

#container{
	padding-left: 0.5%;

}

.content{
	top: 35%;
	
}
#heading{
	padding-top: 40px;
}

}

	/*FOR EXTRA SMALL DEVICE <519PX*/
@media (max-width: 519px) {
.box{
	width: 98%;
	height: 250px;
}

#container{
	padding-left: 0.5%;

}

.content{
	top: 25%;
	
}
#heading{
	padding-top: 30px;
}


}