@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
	font-family: 'Barlow', sans-serif;
	font-size: 18px;
	color: #222;
}

/* TYPE --------------------------------------------------*/
a {
	color: #222;
}
a:hover {
	color: #b32421;
}
h1 {
	font-family: 'Arvo', serif;
	margin-top: 0px;
	margin-bottom: 0px;
}
h2 {
	margin-left: 5px;
	font-family: 'Arvo', serif;
}
h3 {
	margin-bottom: -10px;
}
.intro {
	font-size: 22px;
}
.subtitle {
	display: flex;
	align-items: center;
	margin-bottom: -25px;
}

/* ANIMATION --------------------------------------------------*/
.toprow {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	height: 150px;
	background-image: url("img/hills.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.moving-span {
	position: fixed;
	top: 20px;
	z-index: 1;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

/* IMAGES --------------------------------------------------*/
.dog,
.hydrant {
	max-width: 150px;
}
.truck {
	max-width: 200px;
}
.hydrant {
	margin-top: 20px;
}

/* LAYOUT --------------------------------------------------*/
.container {
	display: flex;
	height: 100%;
	flex-direction: row;
}
.left-column {
	width: 25%;
	min-width: 275px;
}
.left-content {
	position: fixed;
	top: 30%;
	left: 50px;
	font-size: 14px;
}
.right-column {
	width: 100%;
	max-width: 600px;
}
.header {
	position: -webkit-sticky;
	position: sticky;
	top: 150px;
	background-color: white;
	padding: 20px 0px 10px 40px;
}
.content {
	padding: 0px 20px 1px 40px;
	border-left: solid 10px #c5281f;
}
.contact {

}
.footer {
	padding: 0px 40px 20px 40px;
}

@media screen and (min-width: 800px) {
  	.contact, 
	.footer .dog {
		display: none;
	}
}
@media screen and (max-width: 800px) {
	.left-column,
	.footer .hydrant {
		display: none;
	}
}