main.css

body {
  color: black;
  background-color: lightgray;
  padding: 2px 2px 2px 2px;
}

.mid {
  text-align: center;
  padding-bottom: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
  background-color: maroon;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.banner-img {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("pics/banner.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.banner-txt {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
}

.banner-txt button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.banner-txt button:hover {
  background-color: #555;
  color: black;
}


	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 4px;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.rounded {
			border-radius: 100%;
		}

			.image.rounded img {
				border: solid 0.5em rgba(144, 144, 144, 0.25);
				border-radius: 100%;
			}

		.image.captioned {
			border-radius: 0;
			margin-bottom: 4em;
		}

			.image.captioned img {
				border-radius: 0;
			}

			.image.captioned h3 {
				background-color: #fff;
				box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.15);
				display: block;
				padding: 2em 1em;
			}

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

				.image.captioned {
					margin-bottom: 2em;
				}

					.image.captioned h3 {
						padding: 1em;
					}

			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

	.feature-grid {
		position: relative;
	}

		.feature-grid:after {
			clear: both;
			content: '';
			display: block;
		}

		.feature-grid .feature {
			display: inline-block;
			float: left;
			margin-bottom: 3em;
			width: 50%;
		}

			.feature-grid .feature .content {
				width: 60%;
			}

			.feature-grid .feature .image {
				width: 30%;
			}

				.feature-grid .feature .image img {
					display: inline;
					max-width: 100%;
				}

			.feature-grid .feature:nth-child(odd) .content, .feature-grid .feature:nth-child(odd) .image {
				float: right;
				margin-right: 5%;
				text-align: right;
			}

			.feature-grid .feature:nth-child(even) .content, .feature-grid .feature:nth-child(even) .image {
				float: left;
				margin-left: 5%;
				text-align: left;
			}

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

			.feature-grid .feature {
				margin-bottom: 2em;
			}

		}

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

			.feature-grid .feature {
				display: block;
				width: 100%;
			}

				.feature-grid .feature .content {
					width: 65%;
				}

				.feature-grid .feature .image {
					margin-left: 0 !important;
					margin-right: 0 !important;
				}

		}

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

			.feature-grid .feature {
				margin-bottom: 1em;
			}

		}

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

			.feature-grid .feature .content,
			.feature-grid .feature .image {
				display: block;
				margin-left: 0 !important;
				margin-right: 0 !important;
				text-align: center !important;
				width: 100%;
			}

			.feature-grid .feature .image {
				margin-bottom: 1em;
			}

		}