@charset "utf-8";
/* CSS Document */
body {
	margin: 0;
	background-color: #EAEAEA;
	font-family: Tahoma, sans-serif, Times New Roman, serif;
}

/* all-around button styling */
button {
	background-color: #FFBE2E;
	border: none;
	padding: 15px 25px;
}

button:hover {
	background-color: darkgoldenrod;
	color: white;
}

.clearfix {
	clear: both;
}

/* hamburger */
#hamburger {
	display: none;
	width: 70px;
}
/* end hamburger */

/* logo */
#logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 16px;
	width: 120px;
}
/* end logo */

/* header + hero img */
#list {
	background-color: #1a7070;
	text-align: center;
}

ul {
	margin: 0;
	padding: 0;
}

/* header links */
header li {
	color: white;
	list-style-type: none;
	display: inline-block;
	padding: 0;
	margin-left: 45px;
	margin-right: 45px;
	margin-top: 25px;
	margin-bottom: 25px;
	font-size: 15px;
}

header li a {
	color: white;
	text-decoration: none;
}

header li a:hover {
	color: #ffbe2e;
}
/* end header links */

/* value prop */
#value {
	position: relative;
	text-align: center;
	color: black;
}

.headline {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1 {
	font-weight: normal;
}

.h1 {
	background-color: #fedab5;
	padding: 0.5px 22px;
	text-decoration: none;
	font-size: 20px;
	box-shadow: 0 0 40px #2B2B2B;
}

.firstb {
	font-size: 17px;
	margin-top: 17px;
	margin-right: 22px;
}

.secondb {
	font-size: 17px;
	margin-top: 17px;
	margin-left: 20px
}

#big-man {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	width: 100%;
}
/* end value prop */
/* end entire header + hero img */

/* 3 blogs */
#more-info {
	margin-bottom: 70px;
	width: 90%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.learn-more {
	margin-top: 70px;
	margin-bottom: 50px;
}

.h2r, .h2l {
	max-width: 57%;
	padding: 20px 1%;
	text-align: center;
}

.blog-title {
	margin: 0;
}

.lp, .rp {
	max-width: 30%;
	margin: 0px 5%;
}

.lp, .h2l {
	/* float: left; */
	display: inline-block;
	vertical-align: middle; 
}

.rp, .h2r {
	/* float: right; */
	display: inline-block;
	vertical-align: middle; 
}

.locationb {
	margin-top: 15px;
}

.pb {
	background-color: #1a7070;
	color: white;
	padding: 50px;
	padding-top: 22px;
	margin-top: 20px;
	font-size: 17px;
}

.pb button {
	margin-top: 10px;
}

.pb p {
	margin-top: 9px;
	margin-bottom: 20px;
}
/* end 3 blogs */

/* newsletter */
#newsletter {
	text-align: center;
	position: relative;
}

.letter {
	max-width: 13%;
	min-width: 8% 
	/* position: absolute;
 	bottom: 226px; 
	left: 677px; */
}

#email-list {
	margin: 40px;
	margin-top: -90px;
	padding: 10px;
	height: 300px;
	background-color: #ffbe2e;
	text-align: center;
}

.news {
	margin-bottom: 10px;
	margin-top: 75px;
	color: #1A7070;
	text-transform: uppercase;
	font-size: 30px;
}

#email-list p {
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	margin-bottom: 15px;
	width: 475px;
	font-size: 18px;
}

input.email {
	background-color: #D1D1D1;
	border: none;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	padding: 5px;
	width: 250px;
	height: 25px;
	text-align: center;
}

div.email-submit {
	background-color: #D1D1D1;
	width: 466px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 6px;
}

.email-submit input[type=submit] {
	border: none;
	border-radius: 6px;
	padding: 5px;
	background-color: #1A7070;
	width: 200px;
	height: 40px;
	color: #F5F5F5;
	font-size: 16px;
}

.email-submit input[type=submit]:hover {
	background-color: #14514F;
	color: lightgray;
}
/* end newsletter */

/* footer */
footer {
	background-color: #1a7070;
	text-align: center;
	padding: 30px;
	margin-top: 80px;
}

footer ul {
	padding: 0;
	list-style: none;
}

.socials{
	display: inline-block;
	padding: 0;
	margin: 20px;
	margin-bottom: 5px;
	margin-top: 20px;
	color: #ffbe2e;
}

.svg:hover {
	fill: darkgoldenrod;
}

h3 {
	text-decoration: none;
	color: #ffbe2e;
	font-size: 24px;
	text-transform: uppercase;
	padding: 3px;
	margin: 10px;
}

footer li a {
	color: #ffbe2e;
	text-decoration: none;
}

footer li a:hover {
	color: white;
}

.header-links {
	color: #ffbe2e;
	font-size: 17.5px;
	font-family: Times New Roman, serif;
	margin: 17px;
}
/* end footer */

/* MQs */
/* 1200px */
@media screen and (max-width: 1200px) {
	.lp, .rp {
		max-width: 38%;
		margin: 0;
	}
	
	.pb, .blog-title {
		padding: 5%;
	}
	
	.pb {
		font-size: 16px;
		margin-top: 0;
	}
	
	.blog-title {
		font-size: 24px;
	}
	
	.pb p {
		margin-top: 0.3%;
	}
	
	h2 {
		margin-bottom: 0;
	}
}/* end 1200px */

/* 1100px */
@media screen and (max-width: 1100px) {
	.blog-title {
		font-size: 22px;
	}
	
	#email-list {
		margin-top: -75px;
	}
}/* end 1100px */

/* 1020px */
@media screen and (max-width: 1020px) {
	.pb, .blog-title {
		padding: 4%;
	}
	
	.pb {
		font-size: 15px;
		padding: 4%;
	}
}/* end 1020px */

/* 900px aka THE BIG CHANGE */
@media screen and (max-width: 900px) {
/* header */	
	#hamburger {
		display: block;
		float: left;
		margin-left: 100px;
		margin-top: 40px;
	}
	
	#logo {
		float: right;
		margin-right: 100px;
	}
	
	#list {
		display: none;
	}
	
	.headline {
		position: static;
		transform: none;
		margin-bottom: 30px;
	}	
	
	.h1 {
		background-color: #EAEAEA;
		padding: 0.5px 22px;
		box-shadow: 0 0 0;
	}
	
	h1 span {
		display: block;
	}
	
	.firstb {
		margin-right: 10px;
	}

	.secondb {
		margin-left: 10px
	}
	
	#big-man {
		margin-bottom: 11%;
	}
/* end header */
	
/* blog posts */
	#more-info {
		margin-right: auto;
		margin-left: auto;
	}
	
	.learn-more {
		margin-bottom: 4%;
		text-align: center;
	}
	
	.lp, .rp, .h2l, .h2r {
		display: block;
	}
	
	.lp, .rp {
		max-width: 900px;
		width: 95%;
		margin: 0;
		margin-right: auto;
		margin-left: auto;
	}
	
	.pb {
		font-size: 16px;
		padding: 6%;
	}
	
	.pb p {
		margin-top: 0.2%;
		padding-left: 3%;
		padding-right: 3%
	}
	
	.blog-title {
		font-size: 24px;
	}
	
	.h2r, .h2l {
		max-width: 95%;
		margin-right: auto;
		margin-left: auto;
		margin-top: -2.5%;
		
	}
/* end blogs */
	
/* newsletter */
	#newsletter {
		width: 95%;
		margin-right: auto;
		margin-left: auto;
		margin-top: -2%;
		text-align: center;
	}
	
	
	.email-list {
		max-width: 90%;
	}
	
	.letter {
		max-width: 21%;
	}
	
	footer h3 {
		font-size: 20px;
	}
	
	footer li {
		font-size: 14px;
	}
}

@media screen and (max-width: 700px) {
	.letter {
		max-width: 21%;
	}
	
	.learn-more {
		margin-bottom: -5%;
	}
	
	.lp, .rp, .h2r, .h2l {
		width: 100%;
	}
} /* end 700px */

@media screen and (max-width: 630px) {
	div.email-submit, #email-list p {
		width: 100%;
	}
	
	div.email-submit {
		background-color: transparent;
	}
	
	input.email {
		margin-bottom: 10px;
		margin-top: 10px;
	}
}