body {
	background : url("../img/noah2bw.png") no-repeat center fixed;
	background-size : cover;
	}

a {
 color  :  #3c5a85;
  text-decoration: none;
  font-weight : bold;
}
a:hover {
	color:  #f25c5c;
} 
.header {
	position : relative;
	padding-top :	1em;
 	width : 100%; 
	height :	auto;
	background-color : white;
}
.header img {
	float : left;
}
div#grid {
	position : relative;
	top: 20vh;
	width : 95%;
	font-family					:		Verdana, Geneva, sans-serif;
	font-size					:		14px;
	color						:		#aaaaaa;
}
.col {
	float : left;
	width : 50%;
	height : 200px; 
	padding : 10px
}
.topleft {
 	background-color : white;
	width	:	45%;
	border-radius : 10px;
	border : 1px solid red;
	margin-bottom : 20px;
	margin-right	: 20px;
	box-shadow: 10px 10px 5px #eeeeee;
	transition : all 1s;
	overflow: auto;	
}
.topleft:hover {
	background-color : rgba(205, 92, 92, 0.4);
	box-shadow		: none;
	color : white;
}
.topright  {
	background-color : white;
	width	:	45%;
	border-radius : 10px;
	border : 1px solid #ffd700;
	margin-bottom : 20px;
	box-shadow: 10px 10px 5px #eeeeee;
	overflow: auto;
	transition : all 1s;
	font-size	:	8px;
}
.topright:hover {
	background-color : rgba(255, 215, 0, 0.2);
		box-shadow		: none;
		color : #003399;
}
.topright:hover table.meets td {
	color : #003399;
}
.middleleft {
	background-color : white;
	width	:	45%;
	border-radius : 10px;
	border : 1px solid #BA55D3;
	margin-bottom : 20px;
	margin-right	: 20px;
	box-shadow: 10px 10px 5px #eeeeee;
	transition : all 1s;
	overflow: auto;
}
.middleleft:hover {
	background-color : rgba(147, 112, 219, 0.4);
		box-shadow		: none;
		color : white;
}
.middleright {
	background-color : white;
	background  :	url("../img/swimfast-1-bw.png") center;
	width	:	45%;
	border-radius : 10px;
	border : 1px solid darkslateblue;
	margin-bottom : 20px;
	box-shadow: 10px 10px 5px #eeeeee;
	transition : all 1s;	
}
.middleright:hover {
	background-color : rgba(72, 61, 139, 0.1);
	background  :	url("../img/swimfast-1.png") center;
	box-shadow		: none;
}
.top2wide {
	background-color : white;
	width	:	calc(90% + 20px);
	border-radius : 10px;
	border : 1px solid white;
	margin-bottom : 20px;
	box-shadow: 10px 10px 5px #eeeeee;
	transition : all 1s;
	overflow: auto;
	font-size	:	8px;
}
.top2wide:hover {
	background-color : rgba(192, 192, 192, 0.2);
		box-shadow		: none;
}
.row:after {
	content : "";
	display: table;
	clear : both;
}
@media screen and (max-width: 600px) {
  .col {
    width: 100%;
  }
}
.footer {
	position : relative;
	top : 55vh;
	width : auto;
	background-color : #778899;
}
.intro {
	/*	position : relative;
		top :	22vh;  
		float :right;*/
		font-size :	16px;
		box-shadow: 10px 10px 5px #eeeeee;
		padding : 2em;
		text-align : center-left;
		width	: auto;
		font-family					:		Verdana, Geneva, sans-serif;
}
.rel-centered {
  position: relative;
  top: 0px;
  left: 20px;
  font-size : 26px;
  font-weight: bold;
  font-style : oblique;
  color : black;
}
.rel-centered-wht {
  position: relative;
  top: 0px;
  left: 20px;
  font-size : 26px;
  font-weight: bold;
  font-style : oblique;
  color : white;
}