/* GENERAL SETTINGS*/

body {
	font-family: 'Ubuntu', sans-serif;
}

body div section {
	overflow: hidden;
}


/* NAVIGATION BAR */

#navbar {
	width: 100%;
	height: 80px;
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	z-index: 10;
}

		#nav-menu {
			position: absolute;
			border: 2px solid white;
			text-transform: uppercase;
			text-decoration: none;
			color: white;
			display: inline-block;
			font-size: 14px;
			margin: 24px 0 0 20px;
			padding: 5px 8px;
			transition: all 300ms ease-in-out;
			cursor: pointer;
		}

			#nav-menu:hover {
				background-color: white;
				color: black;
			}

		#nav-logo {
			height: 60px;
			display: block;
			margin: 10px auto;
		}


/* FOOTER */

#footer {
	width: 100%;
	background-color: black;
	color: white;
	font-size: smaller;
	overflow: hidden;
	letter-spacing: 2px;
}

	#footer:after {
	  content: "";
	  display: table;
	  clear: both;
	}

	#footer-logo {
		max-width: 500px;
		display: block;
		margin: 40px auto;
	}

	#reach {
		display: block;
		width: 100%;
		padding: 25px 0;
		overflow: hidden;
		background-image: url(../img/ctabg.jpg);
		background-attachment: fixed;
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}

		#reach:after {
		  content: "";
		  display: table;
		  clear: both;
		}

		#reach p {
			width: 20%;
			float: left;
			text-align: center;
		}

			#reach p img {
				width: 50px;
				display: block;
				vertical-align: bottom;
				margin: 0 auto 10px;
			}

			#reach p a, #location p a {
				text-decoration: none;
				color: white;
			}

	.footer-item {
		display: block;
		text-align: center;
		vertical-align: top;
		width: 50%;
		float: left;
		padding: 0px 0;
	}

			.footer-item p span {
				font-weight: bold;
			}

	#privacy {
		display: inline-block;
		width: 100%;
		padding: 0 0 15px 0;
		background: black;
		text-align: center;
	}

		#privacy a {
			text-decoration: none;
			color: white;
			font-size: smaller;
		}


/* 769 - 1366 */

@media screen and (min-width: 769px) and (max-width: 1366px) {
	/* FOOTER */
		#reach {
			background-attachment: scroll;
		}
}


/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {
	/* NAVIGATION BAR */
		#nav-left {
			width: 20%;
			float: left;
			text-align: center;
		}

		#nav-right{
			width: 80%;
			float: left;
		}

			#nav-menu {
				position: relative;
				margin: 24px auto;
			}

	/* FOOTER */
	#footer {
		font-size: medium;
	}

		#footer-logo {
			max-width: 400px;
			margin: 20px auto;
		}

		#reach {
			padding: 15px 0;
			background-attachment: scroll;
		}

			#reach p {
				width: 100%;
			}

				#reach p img {
					display: inline-block;
					vertical-align: -webkit-baseline-middle;
					width: 25px;
					margin-right: 10px;
				}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	/* NAVIGATION BAR */
	#navbar {
		height: 60px;
	}

		#nav-left {
			width: 20%;
			float: left;
			text-align: center;
		}

		#nav-right{
			width: 80%;
			float: left;
		}

			#nav-menu {
				position: relative;
				margin: 20px auto;
				font-size: 10px;
				padding: 3px 6px;
			}

			#nav-logo {
				height: 40px;
			}

	/* FOOTER */
	#footer {
		font-size: small;
	}

		#footer-logo {
			max-width: 300px;
			margin: 10px auto;
		}

		#reach {
			padding: 5px 0;
			background-attachment: scroll;
		}

			#reach p {
				width: 100%;
			}

				#reach p img {
					display: inline-block;
					vertical-align: -webkit-baseline-middle;
					width: 25px;
					margin-right: 10px;
				}
		.footer-item {
			width: 100%;
			font-size: medium;
		}
}


/* =< 319 */

@media screen and (max-width: 319px) {
	/* NAVIGATION BAR */
	#navbar {
		height: 60px;
		min-width: 319px;
	}

		#nav-left {
			width: 20%;
			float: left;
			text-align: center;
		}

		#nav-right{
			width: 80%;
			float: left;
		}

			#nav-menu {
				position: relative;
				margin: 20px auto;
				font-size: 10px;
				padding: 3px 6px;
			}

			#nav-logo {
				height: 40px;
			}

	/* FOOTER */
	#footer {
		font-size: small;
		min-width: 319px;
	}

		#footer-logo {
			max-width: 300px;
			margin: 10px auto;
		}

		#reach {
			padding: 5px 0;
			background-attachment: scroll;
		}

			#reach p {
				width: 100%;
			}

				#reach p img {
					display: inline-block;
					vertical-align: -webkit-baseline-middle;
					width: 25px;
					margin-right: 10px;
				}
		.footer-item {
			width: 100%;
			font-size: medium;
		}
}


/* HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME */


/* HO1 */

#ho1 {
	background-image: url(../img/ho1.jpg);
	background-size: cover;
	background-position: center center;
	height: 100vh;
	position: relative;
}

	#ho1-cont {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		#ho1-logo {
			width: 60%;
		}

		#ho1-scroll {
			width: 30px;
			position: absolute;
			bottom: 20px;
			z-index: 1;
		}


/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {
			#ho1-logo {
				width: 80%;
			}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
			#ho1-logo {
				width: 90%;
			}
}

/* =< 319 */

@media screen and (max-width: 319px) {
	#ho1 {
		min-width: 319px;
	}
		#ho1-cont {
			min-width: 319px;
		}

			#ho1-logo {
				width: 90%;
			}
}


/* HO2 */

#ho2 {
	background-image: url(../img/ho2.jpg);
	background-size: cover;
	background-position: right center;
	height: 100vh;
	position: relative;
}

	#ho2-cont {
		width: 100%;
		height: 100%;
		background: rgba(245, 235, 51, 0.4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		#ho2-blurb {
			width: 750px;
			color: white;
			text-shadow: 3px 3px 7px #333;
			font-size: 24px;
			text-align: center;
			letter-spacing: 4px;
			line-height: 1.5;
		}

/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {
			#ho2-blurb {
				width: 450px;
			}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
			#ho2-blurb {
				width: 250px;
				font-size: 18px;
			}
}

/* =< 319 */

@media screen and (max-width: 319px) {
	#ho2 {
		min-width: 319px;
	}
		#ho2-cont {
			min-width: 319px;
		}

			#ho2-blurb {
				width: 250px;
				font-size: 18px;
			}
}


/* HO4 */

#ho4 {
	background-image: url(../img/ho4.jpg);
	background-size: cover;
	background-position: center center;
	height: 100vh;
	position: relative;
}

	#ho4-cont {
		width: 100%;
		height: 100%;
		background: rgba(144, 39, 142, 0.4);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		#ally-cont {
			width: 900px;
			color: white;
			text-shadow: 3px 3px 7px #333;
		}

			#ally-cont h3 {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 30px;
				margin: 80px auto 20px;
			}

			.ally-item {
				float: left;
				width: 300px;
				height: 200px;
			}

				.ally-item:after {
				  content: "";
				  display: table;
				  clear: both;
				}

				.ally-item p {
					margin: 0;
					font-size: 20px;
				}

				.ally-item ul {
					margin: 0;
				}

					.ally-item ul li {
						list-style: none;
					}

						.ally-item ul li a {
							line-height: 2;
							color: white;
						}

							.ally-item ul li a:after {
								background-image: url(../img/ext-link.svg);
								background-size: contain;
								background-repeat: no-repeat;
								background-position: center center;
								width: 12px;
								height: 12px;
								display: inline-block;
								content: "";
								margin-left: 5px;
							}


/* 769 - 920 */

@media screen and (min-width: 769px) and (max-width: 920px) {
			#ally-cont {
				width: 750px;
			}

				#ally-cont h3 {
					font-size: 28px;
					margin: 0 auto 10px;
				}

				.ally-item {
					width: 250px;
					height: 180px;
				}

					.ally-item:nth-last-child(-n+3) {
					    height: 100px;
					}

					.ally-item p {
						font-size: 18px;
					}

							.ally-item ul li a {
								line-height: 1.7;
								font-size: 16px;
							}
}


/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {
	#ho4 {
		height: auto;
	}
			#ally-cont {
				width: 480px;
			}

				#ally-cont h3 {
					font-size: 26px;
					margin: 20px auto;
				}

				.ally-item {
					width: 240px;
					height: 240px;
					margin-top: 20px;
				}

					.ally-item:last-of-type {
						height: 100px;
					}

					.ally-item p {
						font-size: 16px;
					}

							.ally-item ul li a {
								line-height: 2;
								font-size: 15px;
							}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	#ho4 {
		height: auto;
	}
			#ally-cont {
				width: 320px;
			}

				#ally-cont h3 {
					font-size: 24px;
					margin: 20px 0;
				}

				.ally-item {
					width: 270px;
					height: auto;
					margin-top: 20px;
					margin-left: 30px;
				}

					.ally-item:first-of-type {
						margin-top: 0;
					}

					.ally-item:last-of-type {
						height: 100px;
					}

					.ally-item p {
						font-size: 16px;
					}

							.ally-item ul li a {
								line-height: 2;
								font-size: 15px;
							}
}


/* =< 319 */

@media screen and (max-width: 319px) {
	#ho4 {
		min-width: 319px;
		height: auto;
	}

			#ally-cont {
				width: 319px;
			}

				#ally-cont h3 {
					font-size: 18px;
					margin: 20px 0;
				}

				.ally-item {
					width: 270px;
					height: auto;
					margin-top: 20px;
					margin-left: 30px;
				}

					.ally-item:first-of-type {
						margin-top: 0;
					}

					.ally-item:last-of-type {
						height: 100px;
					}

					.ally-item p {
						font-size: 16px;
					}

							.ally-item ul li a {
								line-height: 2;
								font-size: 15px;
							}
}
/* HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME HOME */
