* {box-sizing: border-box;}


body {color:#666666;
	 font-family: sans-serif;
	 background-color:#ffffff;
	 background: linear-gradient( #eeeeee, #ffff);
	 background-attachment: fixed;
	 margin: 0px;}

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

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

body header h1 {line-height: 72px;
				background-image: url("dsu.jpg");
				background-repeat:no-repeat;
				background-position: right;
				padding-left:0.5rem;
				margin: 0;}

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

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: background-color 0.5s ease-out;}
    
nav a:hover {background-color: #BA1C21;}

nav ul {list-style: none;
    margin:0px 0px;
	padding:0px 0px;
	display: flex;
	flex-flow: row nowrap;}

nav ul li {width: 100%;}

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

dt {color:#BA1C21;
	font-weight: bold;}

.dsu {color:#BA1C21;
	  font-size:1.2rem;}

footer {font-size: .70rem;
		text-align: center;
		font-style: italic;
        padding: 1rem;
        background-color: #FFFFFF;
        grid-area: 5/2/6/8;}
	
#wrapper {display:grid;
		grid-auto-rows: minmax(0px, auto);
		grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px,1fr);}

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

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

h3	{color: #BA1C21;}

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

table, tr, td, th { padding: 5px;
	border: 1px solid #424242;
    text-align: center;}
    	
.text td:first-child{text-align: left;}

tr:nth-of-type(2n) {background-color: #f3f3f3;}

form { display: grid;
 grid-template-columns: 200px 1fr;
 grid-template-rows: auto;
 gap: 0.75rem;
 width: 100%;}

input, textarea { font-size: 1rem;
	padding: 10px;
	color: #666666;
	background-color: #fafafa;
	border-radius: 0%;}

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

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

#mysubmit {grid-column: 2/3;
	grid-template-columns: minmax(100px, 200px);
	background-position: center;
	}







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

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

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

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

video {float: right;
margin-left: 2em;
width: 480px;
height: 270px;}


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

.clear {clear: both;}

@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-area: 2/1/3/5;}
	
	nav ul{flex-flow: column nowrap;}
	
	#homehero{height: auto;
			grid-area: 2/5/3/8;}
	
	#studenthero{height: auto;
		grid-area: 2/5/3/8;}
	
	#facultyhero{height: auto;
		grid-area: 2/5/3/8;}

	.section{ float: none;
			width: 100%;
			padding-left: 0px;}

	video {float: none;
	margin: 0;
	width: 100%;
	height: auto;
	}
}

@media only screen and (max-width:600px) {

	body header h1{ background-image: none;
			text-align: center;}

	nav{ grid-area: 2/1/3/9;
	}

	#homehero{display: none;}

	#studenthro{display: none;}

	#facultyhero{display: none;}
}