.eventBox {
		
		border: 1px solid #999;
		border-top-width: 1px;
		border-right-width: 1px;
		border-bottom-width: 1px;
		border-left-width: 1px;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		border-left-style: solid;
		border-top-color: rgb(153, 153, 153);
		border-right-color: rgb(153, 153, 153);
		border-bottom-color: rgb(153, 153, 153);
		border-left-color: rgb(153, 153, 153);
		border-image-source: initial;
		border-image-slice: initial;
		border-image-width: initial;
		border-image-outset: initial;
		border-image-repeat: initial;
		/* shadow: 5px 5px 5px 5px #aaa; */
		text-align: center;
		margin: 40px 0;
		margin-top: 40px;
		margin-right: 0px;
		margin-bottom: 40px;
		margin-left: 0px;
		display: block;
	}
	
	.eventBox img {
		padding: 5px 5px 5px 5px;
		max-width: 580px;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	.eventBox .eventText {
		padding: 20px;
		padding-top: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
		vertical-align: top;
		text-align: justify;
		width: 100%;
	}
	
	.eventBox .eventText h2 {
		padding: 20px 0 10px 0;
		padding-top: 20px;
		padding-right: 0px;
		padding-bottom: 10px;
		padding-left: 0px;
		margin-bottom: 0;
		text-align: left;
	}
	
	.eventBox .eventText p {
		margin: 10px 0;
		margin-top: 10px;
		margin-right: 0px;
		margin-bottom: 10px;
		margin-left: 0px;
	}
	
	@media only screen 
	and (max-width: 850px), (min-device-width: 875px) 
	and (max-device-width: 1024px) {

		/* Force table to not be like tables anymore */
		table.resposive, table.resposive thead, table.resposive tbody,table.resposive th,table.resposive td,table.resposive tr {
			display: block;
			border: 0px solid black;
		}

		table.resposive tr {border-bottom: 1px solid black;}
		table.resposive{
			border-left : 1px solid black;
			border-right : 1px solid black;
			border-top : 1px solid black;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		table.resposive	thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		table.resposive tr {
			margin: 0 0 0 0;
		}

		table.resposive tr:nth-child(odd) {
			background: #f5f6fa;
		}
		table.resposive tr:nth-child(even) {
			background: #f5f6fa;
		}

		table.resposive td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 3%;
			padding: 15% 5px;
		}

		table.resposive td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 5px;
			left: 6px;
			/*width: 45%;*/
			padding-right: 10px;
		}

		/*
		Label the data
		You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		table.no_min_width	td:before { content: attr(data-title);
			font-weight: bold;
		}
	}

	@media screen and (max-width: 850px) {
		.video-container iframe, .video-container object, .video-container embed {
			Max-width: 100%
		}
	}

	@media screen and (min-width: 1200px) {
		
		.eventBox {
			display: flex;
		}
		
		.align-left {
			display: flex;
			flex-direction: row;
		}
		
		.align-right {
			display: flex;
			flex-direction: row-reverse;
		}
		
	}

	/* Add A Container to Set the Opposite Direction */
	@media screen and (min-width: 1200px) {
		
		.yearBox .eventBox:nth-child(odd) {
			display: flex;
			flex-direction: row;
		}
		
		.yearBox .eventBox:nth-child(even) {
			display: flex;
			flex-direction: row-reverse;
		}
		
	}