* {
	box-sizing: border-box;
}

body {
	background-color: #ffffff;
	color: #666666;
	font-family: Verdana;
	background-image: linear-gradient(to bottom, #eeeeee, #ffffff);
	background-attachment: fixed;
	margin:0;
}

header {
	background-color: #ba1c21;
	color: #ffffff;
	font-family: Georgia;
	grid-row:1/2;
	grid-column:2/8;
}

header h1 {
	line-height: 240%;
	background-image: url(images/dsu.jpg);
	background-position: right;
	background-repeat: no-repeat;
	padding-left: 1em;
	height: 72px;
	margin: 0;
	
}

header a {
	color: #ffffff;
	text-decoration: none;
}

nav {
	font-weight: bold;
	background-color:#424242;
	position: sticky;
	top: 0;
	grid-area: 2/2/3/8;
	
}

nav a {
	text-decoration: none;
	color: #ffffff;
	padding: 1rem 0rem;
	display: block;
	text-align:center;
	transition:ease-out 0.5s;
}

nav a:hover {
	background-color: #ba1c21;
}

nav ul {
	margin: 0px;
	padding-left: 0px;
	padding-bottom:0px;
	padding-right:0px;
	padding-top:0px;
	list-style-type: none;
	display:flex;
	flex-flow:nowrap
}

nav ul li{
	width:100%
}


main {
	padding: 1px 2em 1px 2em;
	display: block;
	background-color: #ffffff;
	grid-area:4/2/5/8
}

section {
	float: left;
	width: 33%;
	padding-right: 1em;
}

h2 {
	color: #424242;
	font-family: Georgia;
}

h3 {
	color: #ba1c21;
	font-weight: bold;
}

.dsu {
	color: #ba1c21;
	font-size: 1.2em;
}

footer {
	font-size: 0.7em;
	text-align: center;
	font-style: italic;
	padding: 1em;
	background-color: #ffffff;
	grid-area:5/2/6/8;
}

#wrapper {
	display:grid;
	grid-auto-rows:minmax(0,auto);
	grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);

}

#redbar{
	grid-row:1/2;
	grid-column:1/9;
	background-color:#ba1c21;
}

#greybar{
	grid-row:2/3;
	grid-column:1/9;
	background-color:#424242;
}

#homehero {
	height: 300px;
	background-image: url(images/homehero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#studenthero {
	height: 300px;
	background-image: url(images/studenthero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#facultyhero {
	height: 300px;
	background-image: url(images/facultyhero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;
}

#alumnihero{
	height: 300px;
	background-image: url(images/alumnihero.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	grid-area:3/1/4/9;	
}


.clear {
	clear: both;
}

table{
	margin: 0 auto;
	border: 1px solid #424242;
	width: 100%;
	border-collapse: collapse;

}

	td,th{
		padding:5px;
		border: 1px solid #424242;
		

	}
	td {
		text-align: center;
	}
	
	.text {
		text-align: left;
	}

	tr:nth-of-type(2n+3){
		background-color: #f3f3f3 
	}
	
	form{ 
		display:grid;
		grid-template-rows:auto;
		grid-template-columns:200px 1fr;
		grid-gap:0.75rem;
		width:100%;
	}

	input,textarea{
		font-size: 1rem;
		padding:10px;
		color: #666;
		background-color:#fafafa;
		border:none;
		
	}

	input{
		font-size: 1rem;
		padding:10px;
		color: #666;
		background-color:#fafafa;
		border:none;
		

	}
	

	input:focus,textarea:focus{
		outline:none;
		background-color:#f0f0f0;
	}

	label{
		padding:10px;
		text-align:right;
	}

	#mySubmit{
		width:10rem;
		grid-column:2/3;
		
	}




 @media only screen and (max-width: 1100px) {
	 #wrapper{
		grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);

	 }
 }

 @media only screen and (max-width:900px) {
	 nav{
		 grid-row:2/3; 
		 grid-column:1/5;
	 }
	 nav ul {
		 flex-flow: column nowrap;
	 }
	 #homehero{
		 grid-row:2/3;
		 grid-column:5/8;
		 height: auto;}
 
   		#studenthero{
			grid-row:2/3;
			grid-column:5/8;
			height: auto;}

			#facultyhero{
				grid-row:2/3;
				grid-column:5/8;
				height: auto;}

				#alumnihero{
					grid-row:2/3;
					grid-column:5/8;
					height: auto;}
				
					section{
					float:none;
					width:100%;
					padding-right:0px;
				}
				video{
					float:none;
					margin:0;
					width:100%;
					height:auto;
				}
	
 }

 @media only screen and (max-width:600px){
	 header h1{
	background-image:none;
	text-align:center;	 
	 }
	 
	 nav{
		 grid-row: 2/3;
		 grid-column:1/9;
		}

		#homehero{
			display:none;
		}

		#studenthero{
			display:none;
		}

		#facultyhero{
			display:none;
		}
		
		#alumnihero{
			display:none;
		}

		


	
		
			 
	}

		video{
			float:right;
			margin-left:2em;


	}