.circle {
top: 2%;
border-radius: 50%; 
height: auto; 
background-size: 100% 100%; 
border: 5px solid gray; 
display: inline-block;
position: relative;
}
.c1 {
background-image: url('Images/Search.jpg'); 

}
.c2 {
background-image: url('Images/mem.jpg'); 
}
.c3 {
background-image: url('Images/falltree.png');
}
.c4 {
background-image: url('Images/bus.jpg'); 
}	
.circletext {
border-bottom-right-radius: 80px; 
border-bottom-left-radius: 80px; 
margin-left: 3.2%; 
width: 94%; 
height: 20%; 
background: rgba(207, 209, 178, 0.6); 
text-shadow: 1px 1px 1px white; 
position: absolute; 
text-align: center; 
bottom: 15%; 
display: block;
}
.circleover {
border-radius: 50%; 
width: 100%; 
padding-top: 100%; 
bottom: 0%; 
position: absolute;
background-color: #CFD1B2;
text-align: center;
}
.pcircle {
top: 5%; 
position: absolute;
width: 75%; 
margin-left: 12.5%; 
}
.co1 {
-webkit-animation:fading 2s;
animation:fading 2s;
display: none;
}
.co2 {
-webkit-animation:fading 2s;
animation:fading 2s;
display: none;
}
.co3 {
-webkit-animation:fading 2s;
animation:fading 2s;
display: none;
}
.co4 {
-webkit-animation:fading 2s;
animation:fading 2s;
display: none;
}
.c1:hover .co1 {
display: block;
}
.c2:hover .co2 {
display: block;
}
.c3:hover .co3 {
display: block;
}
.c4:hover .co4 {
display: block;
}
.event {
height: 50px; 
margin-left: -10%; 
position: absolute;
}
.edesc { 
height: 50px; 
top: 0px;
display: block;
margin-left: 70px;
position: absolute;
}
.edate {
height: 25px; 
width: 60px; 
border: .5px solid black; 
text-align: center; 
border-bottom-left-radius: 4px; 
border-bottom-right-radius: 4px; 
font-size: 21px; 
padding-top: 5px;
}
.emonth {
background-color: #CFD1B2; 
height: 15px; 
width: 60px; 
border: .5px solid black; 
text-align: center; 
border-top-left-radius: 4px; 
border-top-right-radius: 4px; 
font-size: 12px; 
padding-top: 5px;
}
.aclass {color: black;}
.aclass:visited {text-decoration: none; color: black;}
.aclass:hover {text-decoration: none; color: black;}
.aclass:focus {text-decoration: none; color: black;}
.aclass:hover, a:active {text-decoration: none; color: black;}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:1}}

@media only screen and (min-width: 0px) {
	.circle {
		padding-top: 65%;
		width: 65%;
		margin-left: 15%;
	}
	.circletext {
		font-size: 5vw; 	
	}
	.pcircle {
		font-size: 4vw;
	}
	#frame1 {
		width: 100%;
	}
	#frame2 {
		width: 100%;
	}
	#frame3 {
		width: 100%;
	}
	#appt {
		width: 100%;
	}
	#apptbtn {
	width: 90%;
	}
	.photo {
	width: 200%;
	left: -100px;
	}
	.event {
	width: 200%;
	}
	.edesc {
	width: 70%;
	font-size: 2.7vw;
	}
	.e1 {
	margin-top: 0%;
	}
	.e2 {
	margin-top: 20%;
	}
	.e3 {
	margin-top: 40%;
	}
	.e4 {
	margin-top: 60%;
	}
	.e5 {
	margin-top: 80%;
	}
	.eh2 {
	font-size: 20px;;
	}
	.appt1 {
	font-size: 1.6vh;
	}
	#mainpage {
	width: 100%;
	margin-left: 0%;
	}
	.eh3 {
	font-size: 16px;
	}
}
@media only screen and (min-width: 600px) {
	.circle {
		padding-top: 40%;
		width: 40%;
		margin-left: 5%;
	}
	.circletext {
		font-size: 3vw; 	
	}
	.pcircle {
		font-size: 2.5vw;
	}
	#frame1 {
		width: 49%;
	}
	#frame2 {
		width: 49%;
	}
	#frame3 {
		width: 100%;
	}
	#appt {
		width: 100%;
	}
	#apptbtn {
	width: 300px;
	}
	.photo {
	width: 150%;
	left: 0px;
	}
	.event {
	width: 225%;
	}
	.edesc {
	width: 70%;
	font-size: 1.5vw;
	}
	.e1 {
	margin-top: 0%;
	}
	.e2 {
	margin-top: 20%;
	}
	.e3 {
	margin-top: 40%;
	}
	.e4 {
	margin-top: 60%;
	}
	.e5 {
	margin-top: 80%;
	}
	.eh2 {
	font-size: 1.9vw;
	}
	.appt1 {
	font-size: 1.8vh;
	}
	#mainpage {
	width: 75%;
	margin-left: 12.5%;
	}
	.eh3 {
	font-size: 14px;
	}
}
@media only screen and (min-width: 1100px) {
	.circle {
		padding-top: 20%;
		width: 20%;
		margin-left: 3%;
	}
	.circletext {
		font-size: 1.7vw; 	
	}
	.pcircle {
		font-size: 1.3vw;
	}
	#frame1 {
		width: 32%;
	}
	#frame2 {
		width: 32%;
	}
	#frame3 {
		width: 32%;
	}
	#appt {
		width: 25%;
	}
	#apptbtn {
	width: 300px;
	}
	.photo {
	width: 100%;
	left: 0px;
	}
	.event {
	width: 167%;
	}
	.edesc {
	width: 70%;
	font-size: .8vw;
	}
	.e1 {
	margin-top: 0%;
	}
	.e2 {
	margin-top: 12%;
	}
	.e3 {
	margin-top: 24%;
	}
	.e4 {
	margin-top: 36%;
	}
	.e5 {
	margin-top: 48%;
	}
	.eh2 {
	font-size: 1.6vw;
	}
	.appt1 {
	font-size: 1.8vh;
	}
	#mainpage {
	width: 75%;
	margin-left: 12.5%;
	}
	.eh3 {
	font-size: 16px;
	}
}