<style>

	body, h1, h2, h3 { margin: 0; font-size: 100%; font-weight: normal; }

/*	body { padding: 1.25em; font-family: 'Helvetica Neue', Arial, sans-serif; } */

	h1 { font-size: 2em; }
	h2 { font-size: 1.5em; }
	h1, h2 { margin: .5em 0; font-weight: bold; }
	

	.calendar_grid { width: 100%; text-align: center; font-size: 0.75em;/*12*/ line-height: 1.25em;/*15*/ border-collapse: collapse; border-spacing: 0; }

	.calendar_grid th { text-align: center; background-color: #304274; color: white; }  /*Changes the heading of calendar*/
	.calendar_grid th span { display: none; }

	.calendar_grid tr { display: block; }
	.calendar_grid td,
	.calendar_grid th { display: none; }
	
	.calendar_grid .day { margin:0; font-weight: bold; text-align: left; padding: 0 0 10px 0; }
	
	.calendar_grid .events { display: block; }

	.calendar_grid ul { display: block; list-style: none; margin: 0 1.25em 0 0;/*15*/ padding: 0; }
	.calendar_grid li { display: block; position: relative; margin: 0; padding: 0 0 0 15px; height: 1.25em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  }
	.calendar_grid li a { display: block; text-align:left; position: absolute; left: 0; right: 0; padding: 0 0 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

	.calendar_grid tr td:nth-of-type(1n) .day:before { content: 'Sunday '; }
	.calendar_grid tr td:nth-of-type(2n) .day:before { content: 'Monday '; }
	.calendar_grid tr td:nth-of-type(3n) .day:before { content: 'Tuesday '; }
	.calendar_grid tr td:nth-of-type(4n) .day:before { content: 'Wednesday '; }
	.calendar_grid tr td:nth-of-type(5n) .day:before { content: 'Thursday '; }
	.calendar_grid tr td:nth-of-type(6n) .day:before { content: 'Friday '; }
	.calendar_grid tr td:nth-of-type(7n) .day:before { content: 'Saturday '; }

	@media only screen and (min-width: 30em) { /*480*/


		.calendar_grid tr { display: table-row;}
		.calendar_grid th, .calendar_grid td { display: table-cell !important; margin: 0; width: 14.2857%; padding: 0.4166em;/*10*/ border: 1px solid #babcbf; vertical-align: top; }

		.calendar_grid .prev-month .day,
		.calendar_grid .next-month .day { color: #bbb; }

		.calendar_grid td .day { display: block; float: left; margin: 0; font-weight: normal; font-size: small; }
		.calendar_grid td .day:before { display: none; }
		.calendar_grid td .suffix { display: none; }

	}

	@media only screen and (min-width: 40em) { /*640*/

		/* show full days (e.g. "Mon" to "Monday") */
		.calendar_grid th span { display: inline; }

	}

	@media only screen and (min-width: 40em) and (min-height: 20em) {

		.calendar_grid td { height: 2.5em;/*30*/ }

	}
	@media only screen and (min-width: 40em) and (min-height: 40em) {

		.calendar_grid td { height: 6.25em;/*75*/ }
	}
	
	@media only screen and (min-width:300px) and (max-width:479px) {

	.calendar_grid .events { border-bottom:5px solid #000000; }

	}
</style>