@Theme Name: Green Spaces
@Description: This site was built by Central States Media. For more information about the site or this custom WordPress theme, you can contact Central States Media at: info@centralstatesmedia.com or call us at: 309-693-2345.
@Author: Central States Media
@Author URI: http://www.centralstatesmedia.com/
@Version: 1.0
@Date: October, 2022
@charset "utf-8";

/* ==========================================================================
   FONTS + FONTS + FONTS
   ========================================================================== */

	@import url("https://use.typekit.net/jhx6kai.css");

	/*

	// GRAD - USED FOR HEADLINES
		font-family: grad, serif;
		font-weight: 400;
		font-style: normal;

	// MONTSERRAT - USED FOR BODY
		font-family: montserrat, sans-serif;
		font-weight: 100;
		font-style: normal;

	*/

/* ==========================================================================
   KEYFRAMES + KEYFRAMES + KEYFRAMES
   ========================================================================== */

	@keyframes grow-line {
	  0%   {background-color: var(--dark-green); width: 125px;}
	  25%  {background-color: var(--dark-green); width: 0px;}
	  26%  {background-color: var(--green); width: 0px;}
	  100% {width: 125px;}
	}

/* ==========================================================================
   COLORS + COLORS + COLORS
   ========================================================================== */

	:root {
		--dark-green: #39473f;
		--green: #508657;
		--light-green: #d9e4ca;
		--beige: #e8e5e2;
		--dark-grey: #444444;
		--grey: #f6f6f6;
		--shadow: rgba(35,35,35,.6);
		--ltshadow: rgba(35,35,35,.3);
	}

/* *//*FLEX WIDTH*/

	* {box-sizing: border-box;}

	body {
		width: 100%;
		margin: 0;
		padding: 0;
		font-size: 18px;
	}

/* ==========================================================================
   SCROLLBAR + SCROLLBAR + SCROLLBAR
   ========================================================================== */
	::-webkit-scrollbar {width: 25px; background-color: var(--grey); filter: drop-shadow(-10px 0px 4px #4444dd); }
	::-webkit-scrollbar-thumb {background: var(--green) !important; opacity: .75 !important; position: relative;}
	::-webkit-scrollbar-thumb:hover {background: var(--light-green) !important; opacity: .75s; transition: .75s;}

/* ==========================================================================
   TYPOGRAPHY + TYPOGRAPHY + TYPOGRAPHY
   ========================================================================== */
	.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {font-family: grad, serif; font-style: normal; margin: 0px;}
	footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {font-family: grad, serif; font-weight: 400; font-style: normal;}

	.content h1 {font-size: 2.5em; color: var(--dark-green);}
	.content h2 {font-size: 2.25em; color: var(--green); position: relative; padding-bottom: 45px;}
	footer h2 {font-size: 1.5em; position: relative; padding-bottom: 45px; margin: 0px;}
	.content h3 {font-size: 1.8em; color: var(--beige);}
	.content h4 {font-size: 1.6em; color: var(--dark-grey);}
	.content h5 {font-size: 1.4em; color: var(--light-green);}
	.content h6 {font-size: 1.2em; color: var(--green);}
	.content, footer {font-size: 1em; font-family: montserrat, sans-serif;}
	.content a:link, .content a:visited, .content a:active,.content a {text-decoration: none; font-weight: 700; color: var(--green);}
	footer a:link, footer a:visited, footer a:active,footer a {text-decoration: none; font-weight: 700; color: var(--green);}

	.content a:hover {color: var(--dark-green); transition: .75s;}
	footer a:hover {color: var(--light-green); transition: .75s;}

	.content h2::after, footer h2::after {
		content: '';
		display: block;
		width: 125px;
		height: 4px;
		background-color: var(--light-green);
		position: absolute;
		left: 0px;
		bottom: 15px;
	}

	.content form, .menu-socials form, footer form {font-family: montserrat, sans-serif;}

/* ==========================================================================
   ELEMENT + ELEMENTS + ELEMENTS
   ========================================================================== */

	/* BUTTONS */

	.button {
		display: inline-block;
		padding: 10px 15px;
		color: white !important;
		border: 3px solid var(--green);
		background-color: var(--green);
		transition: .75s;
	}

	.button:hover {
		display: inline-block;
		padding: 10px 25px;
		color: white;
		transition: .75s;
	}

	/* HR */

	hr {border: none; width: 125px; height: 4px; background-color: var(--light-green); margin: 25px 0px;}

/* ==========================================================================
   SLICK SLIDER + SLICK SLIDER + SLICK SLIDER
   ========================================================================== */

	.responsive, .single-item {
		width: 100%;
		height: 400px;
		position: relative;
	}

	.responsive div, .single-item div {
		width: auto;
		height: 400px;
	}

	.responsive div img, .single-item div img {
		width: 100%;
		height: 400px;
		object-fit: cover;
		object-position: center;
	}

	.prev {
		position: absolute;
		z-index: 1500;
		width: 50px;
		height: 100px;
		left: -15px;
		top: 33%;
		background-color: var(--dark-green);
		transition: .75s;
	}

	.prev::after {
		content: '';
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		z-index: -1;
		background: url("images/icon-left.svg") no-repeat center;
		background-size: contain;
		left: 0px;
		bottom: 25px;
	}

	.next {
		position: absolute;
		z-index: 1500;
		width: 50px;
		height: 100px;
		right: -15px;
		top: 33%;
		background-color: var(--dark-green);
		transition: .75s;
	}

	.next::after {
		content: '';
		display: block;
		width: 50px;
		height: 50px;
		position: absolute;
		z-index: -1;
		background: url("images/icon-right.svg") no-repeat center;
		background-size: contain;
		left: 0px;
		bottom: 25px;
	}

	.prev:hover, .next:hover {background-color: var(--green); top: 33%; transition: .75s; cursor: pointer;}

/* ==========================================================================
   NAVIGATION + NAVIGATION + NAVIGATION
   ========================================================================== */

	.m-nav {display: none;}

	header {
		display: grid;
		grid: 1fr / 15vw 1fr;
		grid-row-gap: 5vw;
		position: sticky;
		top: 0px;
		padding: 15px 10%;
		height: auto;
		width: 100%;
		filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, .5));
		z-index: 2000;
		background-color: white;
	}

	header a.logo {
		grid-area: 1 / 1 / span 1 / span 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-content: center;
		width: 100%; height: 55px;}

	header a.logo img { display: inline; width: auto; height: 55px; object-fit: contain; position: relative; left: 0px;}
	header a.logo:hover img.text {position: relative; left: 15px; transition: .75s !important;}

	header.small {padding: 10px 10%; transition: .75s;}
	header.small a.logo, header.small a.logo img {height: 45px; transition: .75s;}
	header.small a.logo img.text {display: none;}


	#nav {
		grid-area: 1 / span 1 / 2 / span 1;
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		font-size: .95em;
		font-weight: 700;
		margin: auto 0px;
		font-family: grad, serif;
		}

	#nav ul{
			list-style: none;
			margin:0;
			padding:0;
			display: flex;
			z-index: 10000;
			text-transform: uppercase;
			}

	#nav ul li{flex:1 1 auto; position: relative;}

	#nav ul li a{
			display: block;
			padding:10px 20px 10px 20px;
			text-decoration: none;
			color: var(--dark-green);
			text-align: left;
			border: 2.5px solid transparent;
	}

	/*STYLING 2ND LEVEL*/
	#nav ul ul{
		display:none;
		position: absolute;
		left:0;
		box-shadow: 0 0 5px 0 rgba(0,0,0,0.6);
		width:100%;
		min-width: 200px;
		top: 45px;
		font-weight: 600;
		background-color: var(--dark-green);
		font-size: .8em;
		padding: 15px 10px;
		border-left: solid 5px var(--green);
	}

	#nav ul ul::after{
		content: '';
		display: block;
		position: absolute;
		bottom: 22.5px;
		right: 20px;
		height: 17.5px;
		width: 17.5px;
		background: url("images/icon-leaf.svg") no-repeat center;
		background-size: contain;
	}

		#nav ul ul li a{
			display: block;
			padding:5px 10px;
			text-decoration: none;
			color: white;
			text-align: left;
			border-bottom: 2px solid var(--light-green);
			font-family: montserrat, sans-serif;
		}

		#nav ul ul li a:hover{color: var(--light-green); transition: .75s;}

	/*SHOW SUBMENU WHEN PARENT IS HOVERED*/
	#nav ul li:hover > ul {
		display: block;
	}
	/*STYLING 3RD LEVEL*/
	#nav ul ul ul{
		left:100%;top:-5px;
	}
	/*HOVER ELEMENTS OF SUBMENUS*/
	#nav li:hover > a,d
	#nav a:focus {
		background:transparent;
		color: var(--green);
		transition: .75s;
	}
	/*STYLING CURRENT RENDERED PAGE*/
	#nav .current-menu-item > a,
	#nav .current-menu-ancestor > a,
	#nav .current_page_item > a,
	#nav .current_page_ancestor > a {
	}

/* -- Navigation Menu w/ Dropdown -- */

	#nav:hover .dropdown:hover::after {
		background-image: url("assets/icons/arrow-white.svg");
		transition-delay: 1s;
	}

	/*//Menu Icons ==> Hamburger//*/
		.m-menu {
			display: none;
			height: 30px;
			width: 30px;
			background: url("images/icon-menu.svg") no-repeat center;
			background-size: contain;
		}

		.m-menu:hover {
			opacity: .5;
			transition: .75s;
			cursor: pointer;
		}

	/*//Menu Icons ==> Hamburger//*/
		.m-shop {
			display: none;
			height: 30px;
			width: 30px;
			background: url("images/icon-shop.svg") no-repeat center;
			background-size: contain;
		}

		.m-shop:hover {
			opacity: .5;
			transition: .75s;
			cursor: pointer;
		}

	/*//Extra Menu//*/
		#menu-wrap {
			display: none;
			position: absolute;
			z-index: 1500;
			background-color: var(--ltshadow);
			width: 100%;
			height: 100vh;
			top: 0px;
			right: 0px;
			margin: 0px;
			padding: 0px;
		}

		#menu-content {
			position: absolute;
			right: 0px;
			top: 0px;
			height: 100%;
			background-color: var(--beige);
			width: 80%;
			padding: 25px 5vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		#menu-content .close {color: var(--green); margin: 25px 0px; text-transform: uppercase; font-weight: 700; font-family: montserrat, sans-serif;}

		#menu-content .close::before {
			content: "x";
			display: inline-block;
			font-size: 1.25em;
			padding-right: 10px;
		}

		.close:hover {color: var(--dark-green) !important; cursor: pointer; transition: .5s;}

	/*//Extra Menu ==> First Level//*/

		#menu-content ul {width: 100%; margin: 0px; padding: 0px; display: inline;}
		#menu-content ul li {
			width: 100%;
			position: relative;
			font-size: 1.75em;
			font-weight: 700;
			text-transform: uppercase;
			list-style: none;
			padding: 5px 0px;
			margin-bottom: 0px;
		}

		#menu-content ul li a {font-face: grad, serif !important; color: var(--dark-green) !important; text-transform: capitalize; text-decoration: none;}
		#menu-content ul li a:hover {color: var(--green) !important; padding-left: 20px; transition: .75s;}

	/*//Extra Menu ==> Second Level//*/
		#menu-content ul ul {display:none; position: relative; margin: 10px 0px 10px 1.5vw; padding: 0px;}

		#menu-content ul ul li {
			font-size: .75em;
			padding: 5px 0px;
			margin: 0px;
			border: none;
			font-weight: 600;
		}

		#menu-content ul ul li a:hover {padding-left: 15px; transition: .5s; color: var(--dark-green);}
		#menu-content ul ul li a {text-transform: capitalize; letter-spacing: .75px; position: relative; font-family: montserrat, sans-serif; color: var(--green)}

	/*//Extra Menu ==> Show Second Level on Hover//*/
		#menu-content ul li:hover > ul {display: block;}

	/*//Extra Menu ==> Hover Elements//*/
		#menu-content li:hover > a,d
		#menu-content a:focus {color: var(--green);}

	/*//Extra Menu ==> Styling Current Rendered Page//*/
		nav .current-menu-item > a,
		nav .current-menu-ancestor > a,
		nav .current_page_item > a,
		nav .current_page_ancestor > a {
			color: var(--green);
		}

	/*//Extra Menu ==> Logo + Social//*/
		.menu-socials {display: grid; grid: auto auto auto / auto; position: relative; margin: 50px 0px 25px 0px;}
		.menu-socials::before {
			content:'';
			display: block;
			width: 125px;
			height: 4px;
			background-color: var(--green);
			position: absolute;
			top: -25px;
		}

		.menu-socials a:hover {opacity: .5; transition: .5s;}

		.menu-socials .logo {
			grid-area: 1 / 1 / span 1 / span 1;
			width: 100%;
			height: 45px;
			margin: 15px 10vw 35px 0px;
			display: block;
			background: url("images/logo-greenspaces.svg") no-repeat center left;
			background-size: contain;
		}

		.menu-socials .socials {display: flex; justify-content: flex-start; align-items: flex-start; margin-top: 10px 10vw 0px 0px; grid-area: 3 / 1 / span 1 / span 1;}
		.menu-socials .socials a {margin-right: 25px; width: 30px; height: 30px;}
		.menu-socials .socials a:last-of-type {margin-right: 0px;}
		.menu-socials .facebook {background: url("images/icon-facebook.svg") no-repeat center;}
		.menu-socials .instagram {background: url("images/icon-instagram.svg") no-repeat center;}
		.menu-socials .twitter {background: url("images/icon-twitter.svg") no-repeat center;}
		.menu-socials .shop {background: url("images/icon-shop.svg") no-repeat center;}

		.menu-socials form {grid-area: 2 / 1 / span 1 / span 1; margin-bottom: 10px;}
		.menu-socials input[type=text] {padding: 10px 25px; margin-right: 15px; color: var(--dark-grey); border: none; min-width: 250px;}
		.menu-socials input[type=text]:focus {outline: solid 2px var(--dark-green);}
		.menu-socials input[type=submit] {padding: 10px 15px;color: white; background-color: var(--dark-green); border: none;}
		.menu-socials input[type=submit]:hover {padding: 10px 25px; color: var(--dark-green) !important; background-color: var(--light-green); transition: .75s;}

/* ==========================================================================
   HOMEPAGE + HOMEPAGE + HOMEPAGE
   ========================================================================== */

/* *//*SLIDER*/

	#slider {width: 100%; height: 600px; background-color: var(--beige); display: grid; grid: 600px / 2fr 3fr; grid-column-gap: 60px; padding: 0px 10%;}

	#slider .image {
		grid-area: 1 / 2 / span 1 / span 1;
		width: 100%;
		height: 600px;
		padding: 0px 0px;
		position: relative;
		bottom: -75px;
		box-shadow: 30px -30px var(--green);
		border-radius: 25px;
	}

	#slider img {
		width: 100%;
		height: 600px;
		object-fit: cover;
		object-position: center;
		border-radius: 25px;
	}

	#slider .caption-wrap {margin: auto 0px;}
	#slider h2 {color: var(--dark-green); font-size: 3.25em;}
	#slider h2::after {background-color: var(--green);}
	#slider p {font-size: 1.5em;}
	#slider .button {background-color: var(--green) !important;}

	#plants {padding: 125px 10% 50px 10%;}

	#plants .plant-tiles {
		display: grid;
		grid: 350px / 1fr 1fr 1fr 1fr;
		grid-column-gap: 20px;
		padding: 25px 0px;
	}

	.plant-tiles a {
		display: block;
		width: 100%;
		height: 250px;
		position: relative;
		filter: drop-shadow(5px 5px 5px var(--shadow));
	}

	.plant-tiles a .hover {
		position: absolute;
		width: 100%;
		height: 350px;
		background-color: var(--dark-green);
		padding: 25px;
		margin: auto;
		text-align: center;
		color: white !important;
		border-radius: 10px;
		top: 25px !important;
		opacity: 0%;
		transition: .75s;
	}

	.plant-tiles hr {margin: 20px auto;}

	.shop-tile {
		background-color: var(--light-green);
		padding: 25px;
		margin: 0px;
		text-align: center;
		border-radius: 10px;
		height: 350px !important;
		transition: .75s;
	}

	.shop-tile h4 {color: var(--dark-green);}
	.shop-tile hr {background-color: var(--green);}

	.shop-tile:hover {background-color: var(--green); transition: .75s;}
	.shop-tile:hover h4 {color: white !important; transition: .75s;}
	.shop-tile:hover hr {background-color: white; transition: .75s;}
	.shop-tile:hover img {filter: brightness(0) invert(1); transition: .75s;}
	.shop-tile:hover .button {border-color: white; transition: .75s;}


	.plant-tiles a:hover .hover {top: 0px !important; transition: .75s; opacity: 100%;}

	.plant-tiles a .hover .leaf, .shop-tile .shop-icon {
		width: 125px; height: 125px;
		object-fit: contain;
		object-position: center;
	}

	.plant-tiles a .hover h4, .shop-tile h4:hover {color: white !important; transition: .75s;}
	.plant-tiles a .image {width: 100%; height: 350px; border-radius: 10px;}
	.plant-tiles a .image img {width: 100%; height: 350px; object-fit: cover; object-position: center; border-radius: 10px;}

	#misson {
		display: grid;
		grid: auto / 1fr 1fr 1fr;
		padding: 50px 10%;
		grid-column-gap: 60px;
		background-color: var(--beige);
	}

	#misson .callout:hover {position: relative; top: -25px; transition: .75s;}

	.callout {text-align: center; position: relative; top: 0px; transition: .75s;}
	.callout .image {width: 125px; height: 125px; margin: 20px auto;}
	.callout .image img {width: 125px; height: 125px; object-position: center; object-fit: contain;}

	#misson h3 {color: var(--dark-green);}
	#misson hr {width: 125px; background-color: var(--dark-green); margin: 20px auto;}
	.callout:hover hr {background-color: var(--green) !important; animation-name: grow-line; animation-duration: .75s; animation-iteration-count: 1;}


	#gallery {
		display: grid;
		grid: auto / 50% 50%;
		grid-column-gap: 60px;
		padding: 75px 10% 125px 10%;
	}
	
	#gallery .single-item div, #gallery .single-item div img{border-radius: 20px;}
	#gallery .single-item div {box-shadow: 15px -15px var(--light-green);}

	#gallery .left, #gallery .right {margin: auto 0px;}

	#newsletter {
		background-color: var(--green);
		padding: 0px 10%;
		display: grid;
		grid: auto / 50% 50%;
		grid-column-gap: 60px;
	}

	#newsletter .left {grid-area: 1 / 1 / span 1 / span 1;}

	#newsletter .left .image {
		width: 100%;
		height: 400px;
		border-radius: 20px;
		position: relative !important;
		top: -50px;
	}

	#newsletter .left .image img {
		height: 400px;
		width: 100%;
		object-fit: cover;
		object-position: center;
		border-radius: 20px;
	}

	#newsletter .right {margin: auto 0px; grid-area: 1 / 2 / span 1 / span 1; width: 100%; padding: 25px 0px;}
	#newsletter .right h2, #newsletter .right p {color: white !important;}

	#newsletter input[type=text] {padding: 10px 25px; margin-right: 15px; color: var(--dark-grey); border: none; min-width: 250px;}
	#newsletter input[type=text]:focus {outline: solid 2px var(--dark-green);}
	#newsletter input[type=submit] {padding: 10px 15px;color: white; background-color: var(--dark-green); border: none;}
	#newsletter input[type=submit]:hover {padding: 10px 25px; color: var(--dark-green) !important; background-color: var(--light-green); transition: .75s;}

	#contact {background: url("images/bkgd-contact.jpg") no-repeat right; background-size: cover; position: relative; background-attachment: fixed !important;}
	#contact .text {
		width: 100%;
		height: auto;
		padding: 50px 50% 50px 10%; 
		background: rgb(0,0,0);
		background: linear-gradient(145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.95) 45%, rgba(255,255,255,0) 100%);}


/* ==========================================================================
   INSIDE + INSIDE + INSIDE
   ========================================================================== */

	.wp-content {padding: 75px 0px; min-height: 350px; background-color: white; z-index: 1000;}
	
/* *//*FEATURED IMAGE*/

	#featured {width: 100%; height: 300px; background-color: var(--dark-green); position: relative;}

	#featured .image {width: 100%; height: 300px;}

	#featured img {
		width: 100%;
		height: 300px;
		object-fit: cover;
		object-position: center;
	}

	#featured .page-title {
		position: absolute;
		left: 0%;
		bottom: 0px;
		width: 100%;
		height: 300px;
		vertical-align: middle;
		padding: 75px 0px 0px 10%;
		color: var(--dark-grey);
		background: rgba(68,68,68,.85);
	}

	#featured .page-title h2 {margin: auto 0px; color: var(--beige) !important;}
	#featured .page-title h2::after {display: none;}

/* ==========================================================================
   FOOTER + FOOTER + FOOTER
   ========================================================================== */

	footer {display: grid; grid: auto auto / 1fr 1fr; grid-column-gap: 60px; padding: 50px 10% 75px 10%; background-color: var(--dark-green);}
	footer .left {grid-area: 1 / 1 / span 1 / span 1; color: white;}
	footer .right {grid-area: 1 / 2 / span 1 / span 1;}
	footer .right h2 {color: white;}
	footer .copyright {grid-area: 2 / 1 / span 1 / span 2;color: white; margin-top: 25px;}

	footer a.logo {width: auto; height: 50px; display: block; background: url("images/logo-greenspaces-w.svg") no-repeat left;}
	footer .left hr {width: 125px;}

	footer form {margin-top: 15px;}
	footer input[type=text] {padding: 10px 25px; margin-right: 15px; color: var(--dark-grey); border: none; min-width: 250px;}
	footer input[type=text]:focus {outline: solid 2px var(--green);}
	footer input[type=submit] {padding: 10px 15px; color: white; background-color: var(--green); border: none;}
	footer input[type=submit]:hover {padding: 10px 25px; color: var(--dark-green) !important; background-color: var(--light-green); transition: .75s;}

	.socials {display: flex; flex-direction: row; margin: 25px 0px 0px 0px; align-content: center; justify-content: flex-start;}
	.socials a {display: inline-block; width: 30px; height: 30px; margin-right: 20px;}
	.socials a:last-of-type {margin-right: 0px;}

	footer .socials a:hover {opacity: .5; transition: .75s;}

	a.facebook {background: url("images/icon-facebook-w.svg") no-repeat center; background-size: contain;}
	a.instagram {background: url("images/icon-instagram-w.svg") no-repeat center; background-size: contain;}
	a.twitter {background: url("images/icon-twitter-w.svg") no-repeat center; background-size: contain;}
	a.shop {background: url("images/icon-shop-w.svg") no-repeat center; background-size: contain;}

	footer a, footer a:link, footer a:active, footer a:visited {color: var(--beige) !important;}
footer a:hover {color: var(--green) !important;}


/* ==========================================================================
   RESPONSIVE + RESPONSIVE + RESPONSIVE
   ========================================================================== */
	
/* *//* LARGE DEVICES (1200PX - 992PX) */

	@media only screen and (max-width: 1400px) {
		body {font-size: 16px;}
	}

/* *//* LAPTOPS (992PX - 768PX) */

	@media only screen and (max-width: 1200px) {
	header {padding: 25px 10%;}
	header a.logo {height: 50px;}
	header a.logo img {height: 50px;}
	#slider {height: 400px; grid: 400px / 1fr 1fr; padding: 0px 7.5%;}
	#slider .image, #slider .image img {height: 375px; width: 100%;}
	#slider h2 {color: var(--dark-green); font-size: 3em;}
	#slider p {font-size: 1.25em;}
		
	}

/* *//* TABLETS (768PX - 576PX) */

	@media only screen and (max-width: 1080px) {
		body {font-size: 13px;}
		#nav nav {display: none;}
		.m-menu {display: block;}
		.m-shop {display: block; margin-left: 15px;}
		.content h1::after, .content h2::after {width: 50px;}
	
		header {grid: auto / 200px 1fr; grid-column-gap: 5vw; padding: 10px 7.5%;}
		
		#plants .plant-tiles {
			display: grid;
			grid: 350px 350px / 1fr 1fr;
			grid-column-gap: 25px;
			grid-row-gap: 25px;
			padding: 25px 0px;
		}
		
		#gallery {
			grid: auto auto / 1fr;
			grid-column-gap: 0px;
			grid-row-gap: 75px;
			padding: 50px 7.5% 100px 7.5%;
		}
		
		#gallery .right {grid-area: 1 / 1 / span 1 / span 1;}
		#gallery .left {grid-area: 2 / 1 / span 1 / span 1;}
		#gallery .single-item {width: 75vw; margin: 0px auto;}
		#gallery .single-item div, #gallery .single-item div img {border-radius: 20px; width: 100%;}
		#gallery .left, #gallery .right {margin: auto 0px;}
		
		#newsletter {padding: 0px 7.5% 50px 7.5%; grid: 350px auto / 1fr; grid-column-gap: 0px; grid-row-gap: 0px;}
		
		#newsletter .left .image, #newsletter .left .image img {height: 350px;}
		#newsletter .right {grid-area: 2 / 1 / span 1 / span 1;}
		#newsletter .right h2, #newsletter .right p {color: white !important;}
		
		#contact {background-attachment: scroll !important;}
		#contact .text {padding: 50px 7.5% 50px 7.5%; 
		background: rgba(255, 255, 255, .9);}
		
		footer {grid: auto auto / 1fr; text-align: center; grid-row-gap: 25px;}
		
		footer .left {grid-area: 1 / 1 / span 1 / span 1;}
		footer .right {grid-area: 2 / 1 / span 1 / span 1;}
		footer .socials {display: flex; flex-direction: row; margin: 25px 0px 0px 0px; align-content: center; justify-content: center;}
		
		footer a.logo {background-position: center;}
		footer hr {margin: 20px auto;}
		footer h2::after {left: 50%; transform: translateX(-50%);}
		footer .copyright {margin-top: 50px;}

	}

/* *//* PHONES (576PX - 0PX) */

	@media only screen and (max-width: 800px) {
		header {padding: 25px 7.5%;}
		header a.logo, header a.logo img {height: 35px;}
		header.small a.logo, header.small a.logo img {height: 30px;}
		
		#menu-content {width: 100%;}
		
		#slider {height: auto; grid: auto 300px / 1fr; grid-column-gap: 0px; padding: 50px 7.5% 0px 7.5%; grid-row-gap: 25px;}
		#slider .image {grid-area: 2 / 1 / span 1 / span 1; height: 300px; padding: 0px 0px; position: relative; left: 0px; bottom: -50px; box-shadow: 5px -5px var(--green);}
		#slider .image img {height: 300px; width: 100%;}

		#misson {
			grid: auto auto auto / 1fr;
			padding: 50px 7.5%;
			grid-column-gap: 0px;
			grid-row-gap: 25px;
		}
	}

/* *//* PHONES (576PX - 0PX) */

	@media only screen and (max-width: 600px) {
		#slider {grid: auto 250px / 1fr; padding: 50px 5% 0px 5%;}
		#slider .image, #slider .image img {height: 250px;}
		
		#plants .plant-tiles {
			display: grid;
			grid: 350px 350px 350px 350px / 1fr;
			grid-column-gap: 25px;
			grid-row-gap: 25px;
			padding: 25px 0px;
		}
		
		#newsletter input[type=text], .menu-socials input[type=text], footer input[type=text] {min-width: 0px;}
	}