* {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

/*---Basic Layout---*/

#wrapper {
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

#header {
	height: 100vh;
	background-image: url(images/homepage.jpg);
	background-position: center;
	background-size: cover;
}

.container {
	/*
	margin-right: 100px;
	margin-left: 100px;
*/
}

.logo {
	margin-top: 5%;
	width: 10%;
	margin-left: 5%;
}

.header-text {
	max-width: 60%;
	margin-top: 11%;
	margin-left: 5%;
}

.header-text h1 {
	font-size: 2rem;
	font-family: 'Playfair Display', serif;
	color: #dee1d6;
}

h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;

}

.square {
	height: 0.75rem;
	width: 0.75rem;
	display: inline-block;
	background: #dee1d6;
	margin: 2% 0;
}

/*---Got the button code from W3 LINK: https://www.w3schools.com/css/css3_buttons.asp---*/
.common-button {
	padding: 2% 5%;
	background: transparent;
	outline: none;
	border: 0.125rem solid #dee1d6;
	font-weight: bolder;
	cursor: pointer;
	color: #dee1d6;
	font-family: 'Source Sans Pro', sans-serif;
}

p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #dee1d6;
}

.header-text button {
	margin-top: 2%;
}

/*---Got the Side Nav code from W3 LINK: https://www.w3schools.com/howto/howto_js_sidenav.asp---*/
#sideNav {
	width: 15%;
	height: 100vh;
	position: fixed;
	right: -85%;
	top: 0;
	background: #dee1d6;
	z-index: 2;
	transition: .5s;
}

nav ul li {
	list-style: none;
	margin: 20% 3%;
}

nav ul li a {
	text-decoration: none;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

#menubutton {
	width: 3%;
	position: fixed;
	right: 1%;
	top: 3%;
	z-index: 2;
	cursor: pointer;
}

/*---Description Section---*/

#about {
	padding: 5% 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.about-left-col {
	flex-basis: 50%;
}

.about-left-col img {
	width: 100%;
}

.about-right-col {
	flex-basis: 50%;
	text-align: right;
}

.about-text {
	max-width: 80%;
	margin-right: 15%;
	display: inline-block;
}

.about-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.about-text blockquote {
	font-size: 1.25rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-style: italic;
	color: #2a3229;
}

.about-text p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Culture Section---*/

#culture {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.culture-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.culture-right-col {
	flex-basis: 50%;
}

.culture-right-col img {
	width: 100%;
}

.culture-left-col {
	flex-basis: 50%;
}

.culture-text {
	max-width: 80%;
	margin-left: 15%;
	display: inline-block;
}

.culture-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.culture-text p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Flowers and Cultivation Section---*/

#flowers-cultivation {
	padding: 5% 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.flowers-cultivation-left-col {
	flex-basis: 50%;
}

.flowers-cultivation-left-col img {
	width: 100%;
}

.flowers-cultivation-right-col {
	flex-basis: 50%;
	text-align: right;
}

.flowers-cultivation-text {
	max-width: 80%;
	margin-right: 15%;
	display: inline-block;
}

.flowers-cultivation-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.flowers-cultivation-text p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Medicinal---*/

#medicinal {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.medicinal-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.medicinal-right-col {
	flex-basis: 50%;
}

.medicinal-right-col img {
	width: 100%;
}

.medicinal-left-col {
	flex-basis: 50%;
}

.medicinal-text {
	max-width: 80%;
	margin-left: 15%;
	display: inline-block;
}

.medicinal-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.medicinal-text p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

.medicinal-text blockquote {
	font-size: 1.25rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-style: italic;
	color: #2a3229;
}

/*---Conservation---*/

#conservation {
	padding: 5% 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.conservation-left-col {
	flex-basis: 50%;
}

.conservation-left-col img {
	width: 100%;
}

.conservation-right-col {
	flex-basis: 50%;
	text-align: right;
}

.conservation-text {
	max-width: 80%;
	margin-right: 15%;
	display: inline-block;
}

.conservation-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.conservation-text p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}


/*---Contact---*/

#contact {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.contact-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.contact-right-col {
	flex-basis: 50%;
}

.contact-right-col img {
	width: 100%;
}

.contact-left-col {
	flex-basis: 50%;
}

.contact-text {
	max-width: 80%;
	margin-left: 15%;
	display: inline-block;
}

.contact-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.contact-text p {
	font-size: 0.938rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

.contact-text blockquote {
	font-size: 1.25rem;
	font-family: 'Source Sans Pro', sans-serif;
	font-style: italic;
	color: #2a3229;
}

form {
	max-width: 19rem;
	margin: 3% 0;
	margin-left: 15%;
	display: inline-block;
}

form input {
	width: 100%;
	padding: 4% 2%;
	margin-bottom: 3%;
	outline: none;
	box-shadow: none;
	box-sizing: border-box;
	border: 0.125rem solid #dee1d6;
	font-size: 0.813rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Footer---*/

#footer {
	padding: 5% 0 2%;
}

hr {
	width: 100%;
	border: 0;
	border-top: 0.063rem solid #dee1d6;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer-left-col {
	flex-basis: 45%;
	margin-top: 2%;
	margin-left: 5%;
}

.footer-right-col {
	flex-basis: 45%;
	margin-left: 5%;
}

.footer-links {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.link-title p {
	color: #2a3229;
	margin-bottom: 3%;
	font-family: 'Source Sans Pro', sans-serif;
}

/*---Got the Small code from W3 LINK: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small---*/
.link-title small {
	font-size: 0.813rem;
	color: #dee1d6;
	font-family: 'Source Sans Pro', sans-serif;
}

.footer-info {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer-logo img {
	width: 50%;
	margin-top: 7%;
	margin-right: 10%
}

.copyright-text,
.footer-logo {
	flex-basis: 40%;

}

.copyright-text small {
	font-size: 0.813rem;
	color: #2a3229;
	font-family: 'Source Sans Pro', sans-serif;
}

/*---Description Read More ---*/

#description-more {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.description-more-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.description-more-right-col {
	flex-basis: 50%;
}

.description-more-right-col img {
	width: 100%;
}

.description-more-left-col {
	flex-basis: 50%;
}

.description-more-text {
	max-width: 80%;
	margin-left: 15%;
	margin-right: 5%;
	margin-top: 0;
	display: inline-block;
}

.description-more-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.description-more-text p {
	font-size: 1.125rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Culture Read More ---*/

#culture-more {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.culture-more-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.culture-more-right-col {
	flex-basis: 50%;
}

.culture-more-right-col img {
	width: 100%;
}

.culture-more-left-col {
	flex-basis: 50%;
}

.culture-more-text {
	max-width: 80%;
	margin-left: 15%;
	margin-right: 5%;
	margin-top: 0;
	display: inline-block;
}

.culture-more-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.culture-more-text p {
	font-size: 1.125rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}


/*---Flowers and Cultivation Read More ---*/

#flowers-cultivation-more {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.flowers-cultivation-more-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.flowers-cultivation-more-right-col {
	flex-basis: 50%;
}

.flowers-cultivation-more-right-col img {
	width: 100%;
}

.flowers-cultivation-more-left-col {
	flex-basis: 50%;
}

.flowers-cultivation-more-text {
	max-width: 80%;
	margin-left: 15%;
	margin-right: 5%;
	margin-top: 0;
	display: inline-block;
}

.flowers-cultivation-more-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.flowers-cultivation-more-text p {
	font-size: 1.125rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Medicinal Read More ---*/

#medicinal-more {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.medicinal-more-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.medicinal-more-right-col {
	flex-basis: 50%;
}

.medicinal-more-right-col img {
	width: 100%;
}

.medicinal-more-left-col {
	flex-basis: 50%;
}

.medicinal-more-text {
	max-width: 80%;
	margin-left: 15%;
	margin-right: 5%;
	margin-top: 0;
	display: inline-block;
}

.medicinal-more-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.medicinal-more-text p {
	font-size: 1.125rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Conservation Read More ---*/

#conservation-more {
	padding: 5% 0;
}

/*---Got the Column and Rows code from W3 LINK: https://www.w3schools.com/howto/howto_css_two_columns.asp---*/
.conservation-more-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.conservation-more-right-col {
	flex-basis: 50%;
}

.conservation-more-right-col img {
	width: 100%;
}

.conservation-more-left-col {
	flex-basis: 50%;
}

.conservation-more-text {
	max-width: 80%;
	margin-left: 15%;
	margin-right: 5%;
	margin-top: 0;
	display: inline-block;
}

.conservation-more-text h1 {
	font-size: 2.125rem;
	font-family: 'Playfair Display', serif;
	color: #2a3229;
}

.conservation-more-text p {
	font-size: 1.125rem;
	font-family: 'Source Sans Pro', sans-serif;
	color: #2a3229;
}

/*---Making Responsive---*/

/*---Got the Responsive code from "email on acid" LINK: https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/---*/
@media only screen and (max-width: 770px) {

	.container {
		/*
	margin-right: 100px;
	margin-left: 100px;
*/
	}

	.logo {
		margin-top: 5%;
		width: 20%;
		margin-left: 3%;
	}

	.header-text {
		margin-top: 60%;
		margin-left: 3%;
	}

	h1 {
		font-size: 2rem;
		font-family: 'Playfair Display', serif;
		color: #2a3229;

	}

	p {
		font-size: 0.938rem;
		font-family: 'Source Sans Pro', sans-serif;
		color: #dee1d6;
	}

	#menubutton {
		width: 7%;
		position: fixed;
		right: 2%;
		top: 3%;
		z-index: 2;
		cursor: pointer;
	}

	#sideNav {
		width: 25%;
	}

	.common-button {
		padding: 0.2% 0.8%;
	}

	.about-left-col,
	.about-right-col {
		flex-basis: 100%;
	}

	.about-text {
		margin: 3%;
		display: inline-block;
	}

	.about-text h1 {
		font-size: 2rem;
	}

	.about-text blockquote {
		font-size: 1rem;
	}

	.about-text p {
		font-size: 0.85rem;
	}

	.culture-left-col,
	.culture-right-col {
		flex-basis: 100%;
	}

	.culture-text {
		margin: 3%;
		display: inline-block;
	}

	.culture-text h1 {
		font-size: 2rem;
	}

	.culture-text p {
		font-size: 0.85rem;
	}

	.flowers-cultivation-left-col,
	.flowers-cultivation-right-col {
		flex-basis: 100%;
	}

	.flowers-cultivation-text {
		margin: 3%;
		display: inline-block;
	}

	.flowers-cultivation-text h1 {
		font-size: 2rem;
	}

	.flowers-cultivation-text p {
		font-size: 0.85rem;
	}

	.medicinal-left-col,
	.medicinal-right-col {
		flex-basis: 100%;
	}

	.medicinal-text {
		margin: 3%;
		display: inline-block;
	}

	.medicinal-text h1 {
		font-size: 2rem;
	}

	.medicinal-text blockquote {
		font-size: 1rem;
	}

	.medicinal-text p {
		font-size: 0.85rem;
	}

	.conservation-left-col,
	.conservation-right-col {
		flex-basis: 100%;
	}

	.conservation-text {
		margin: 3%;
		display: inline-block;
	}

	.conservation-text h1 {
		font-size: 2rem;
	}

	.conservation-text p {
		font-size: 0.85rem;
	}

	.contact-left-col,
	.contact-right-col {
		flex-basis: 100%;
	}

	.contact-text {
		margin: 3%;
		display: inline-block;
	}

	.contact-text h1 {
		font-size: 2rem;
	}

	.contact-text blockquote {
		font-size: 1rem;
	}

	form {
		max-width: 19rem;
		margin: 3%;

		display: inline-block;
	}

	form input {
		font-size: 0.85rem;

	}

	.footer-left-col,
	.footer-right-col {
		flex-basis: 100%;
	}

	.footer-text {
		margin: 3%;
		display: inline-block;
	}

	.footer-text p {
		font-size: 0.85rem;
	}

	.description-more-left-col,
	.description-more-right-col {
		flex-basis: 100%;
	}

	.description-more-text {
		margin: 3%;
		display: inline-block;
	}

	.description-more h1 {
		font-size: 2rem;
	}

	.description-more-text p {
		font-size: 1rem;
	}

	.culture-more-left-col,
	.culture-more-right-col {
		flex-basis: 100%;
	}

	.culture-more-text {
		margin: 3%;
		display: inline-block;
	}

	.culture-more h1 {
		font-size: 2rem;
	}

	.culture-more-text p {
		font-size: 1rem;
	}

	.flowers-cultivation-more-left-col,
	.flowers-cultivation-more-right-col {
		flex-basis: 100%;
	}

	.flowers-cultivation-more-text {
		margin: 3%;
		display: inline-block;
	}

	.flowers-cultivation-more h1 {
		font-size: 2rem;
	}

	.flowers-cultivation-more-text p {
		font-size: 1rem;
	}

	.medicinal-more-left-col,
	.medicinal-more-right-col {
		flex-basis: 100%;
	}

	.medicinal-more-text {
		margin: 3%;
		display: inline-block;
	}

	.medicinal-more h1 {
		font-size: 2rem;
	}

	.medicinal-more-text p {
		font-size: 1rem;
	}

	.conservation-more-left-col,
	.conservation-more-right-col {
		flex-basis: 100%;
	}

	.conservation-more-text {
		margin: 3%;
		display: inline-block;
	}

	.conservation-more h1 {
		font-size: 2rem;
	}

	.conservation-more-text p {
		font-size: 1rem;
	}
}