/* Variables */

:root {
	--primary-color: #333;
	--secondary-color: #504A4B;
	--alt-color: #736F6E;
	--font-family: 'Lora', sans-serif;
}

/* Custom Reset */

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	font-size: 100%;
}

body {
	font-family: var(--font-family);
	color: #333;
	line-height: 1.5;
}

input[type=text], textarea {
	font-family: var(--font-family);
	font-size: 1rem;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #333;
}

h1, h2, h3, h4 {
	font-weight: 600;
	line-height: 1.2;
}

p {
	font-size: 1.15rem;
	margin: 20px 0;
}

img {
	width: 100%;
}

/* Landing Page */

html {
	background-image: url(bg.jpg);	
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.title {
	margin-top: 50px;
}

.title .flex {
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}

.title h2 {
	font-size: 3.75rem;
	font-weight: 700;
}

.title h3 {
	font-size: 1.4rem;
	font-style: italic;
	font-weight: 500;
	margin-bottom: 5px;
	margin-top: 10px;
}

.title h1 {
	color: var(--secondary-color);
	font-size: 6rem;
	font-weight: 700;
}

.title hr.solid {
	border-top: 1px solid var(--primary-color);
	margin-bottom: 15px;
	margin-top: 30px;
	width: 25px;
}

.content .flex {
	align-items: center;
	flex-direction: column;
	overflow: hidden;
}

.content p {
	font-size: 1.25rem;
}

.content h4 {
	color: var(--secondary-color);
	font-size: 1.35rem;
	font-style: italic;
	font-weight: 600;
	margin-bottom: 40px;
	margin-top: 10px;
	text-align: center;
}

.content h3 {
	font-size: 1.4rem;
	font-style: italic;
	font-weight: 500;
	margin-bottom: 30px;
	margin-top: 10px;
}

.content a {
	color: var(--secondary-color);
	font-size: 1.5rem;
	font-weight: 700;
}

.content a:hover {
	color: var(--alt-color);
}

.content img {
	width: 49px;
	height: 36px;
}

.content img:nth-child(3) {
	margin-bottom: 20px;
}

.content img:nth-child(10) {
	margin-bottom: 50px;
	margin-top: 30px;
}

/* Responsive: Larger Screens */

@media(min-width: 2901px) {
	html {
		background-position: center 60%;
	}
}

@media(min-width: 1901px) and (max-width: 2900px) {
	html {
		background-position: center 50%;
	}
}

@media(min-width: 1501px) and (max-width: 1900px) {
	html {
		background-position: center 40%;
	}
}

@media(min-width: 1351px) and (max-width: 1501px) {
	html {
		background-position: center 30%;
	}
}

@media(min-width: 1251px) and (max-width: 1350px) {
	html {
		background-position: center 20%;
	}
}

@media(min-width: 1151px) and (max-width: 1250px) {
	html {
		background-position: center 10%;
	}
}

/* Responsive: Smaller Screens */

@media(max-width: 1175px) {
	html {
		background-position: center 0%;
	}
	.content p, h4 {
		padding: 0 50px;
	}
}

@media(max-width: 1000px) {
	.content a {
		color: #FFF;
		text-shadow: 1px 1px 2px #0F0F0F;
	}
	.content a:hover {
		color: #EEE;
	}
}

@media(max-width: 900px) {
	.content h3 {
		color: #F5F5F5;
		text-shadow: 1px 1px 2px #0F0F0F;
	}
}

/* Responsive: Tablet & Mobile */

@media(max-width: 768px) {
	.title h2 {
		font-size: 2.65rem;
	}
	.title h3 {
		margin-bottom: 10px;
	}
	.title h1 {
		font-size: 4rem;
	}
	.content img:nth-child(10) {
		margin-bottom: 30px;
	}
}

@media(max-width: 480px) {
	.title h2 {
		font-size: 2.15rem;
	}
	.title h3 {
		margin-bottom: 7.5px;
	}
	.title h1 {
		font-size: 3rem;
	}
}