/* CSS Document */
/*  
Theme Name: Pro31
Author URI: https://derekweathersbee.com
Version: 1
Author: Derek Weathersbee
Description: It works. It is dope.
The CSS, XHTML and design is released under GPL: 
http://www.opensource.org/licenses/gpl-license.php
*/



@import "common.css";

@import "forms.css";

@import "editor-style.css";

:root {
	--darkgray: #05181c;
	
	
	--bluegray: #091c21;
	--brown: #513118;
	--tan: #e8e2d4;
	--lighttan: #f4efe1;
	--blue: #21778d;
	--green: #45912c;
	--transGreen: rgba(69,145,44, .9);
	--lightgreen: #6f9b3d;
	--orange: #d88229;
	--yellow: #f1c72c;

	--primaryFont: "Roundo", sans-serif;
	--script: "adobe-handwriting-ernie", sans-serif;

}


#wpadminbar {
	bottom: 0 !important;
	top: auto !important;
}

body {
	font-family: var(--primaryFont);
	font-weight: 400;
	font-style: normal;
	color: var(--bluegray);
	font-size: 1.25rem;
	line-height: 1.7;
}

/*
.page {
	padding-top: 128px;
	padding-top: calc(5.25rem + (1.5rem * 2));
}
*/

em {
	font-family: Georgia, serif;
}

.inner {
	width: 87.5rem;
	width: calc(87.5rem + 100px);
	margin: 0 auto;
}


.column {
	width: 48%;
}

.column-narrow {
	width: 30rem;
}

.column-wide {
	width: 56.25rem;
}

div > img, hero img, li > img {
	width: 100%;
	height: auto;
}

main {
	padding: 6rem 0;
}



h1 {
	font-size: 3.25rem;
    font-weight: 400;
}

hero h1 {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.1;
}

hero h1 + p {
	margin-top: 2rem;
}

h2 {
	font-size: 3.375rem;
	font-weight: 400;
	margin: 0 0 1rem;
}

main h2 {
	font-size: 2.25rem;
}

h2.fancy {
	font-size: 3rem;
	font-weight: 500;
	padding: 0 0 1.5rem;
	margin: 0 0 4rem;
	text-align: center;
	position: relative;
}

 h2.fancy::after {
	position: absolute;
	bottom: 0;
	left: calc(50% - 5vw);
	width: 10vw;
	height: .5rem;
	background: white;
	content: "";
}

.pre-heading, .post-heading {

}

.pre-heading {
	margin: 0 0 .5rem !important;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .125rem;
	color: var(--green);
	font-size: 1.5rem;
}

section .post-heading {
	padding: 0 15%;
	margin-bottom: 3rem;
	font-weight: 500;
}

h2.fancy + .post-heading {
	text-align: center;
}


.button {
	background: url(../images/arrow-right-white.svg) right 1.75rem center / 2.75rem 1.5rem no-repeat var(--darkgray);
	color: white;
	padding: 1rem 6rem 1rem 2rem;
	display: inline-block;
	font-size: 1.25rem;
	border-radius: .25rem;
	font: inherit;
	border: none;
	text-shadow: none;
}

.button:hover, .button.white:hover {
	background-position: right 1.5rem center;
	transition: .2s;
}

.button.white {
	background: url(../images/arrow-right-dark.svg) right 2rem center / 2.75rem 1.5rem no-repeat white;
	color: var(--darkgray);
	border: 1px solid var(--darkgray);
}

.button.yellow {
	background: url(../images/arrow-right-dark.svg) right 2rem center / 2.75rem 1.5rem no-repeat var(--yellow);
	color: var(--darkgray);
}

.section-title .button {
	float: right;
	margin-top: 2.25rem;
}

.contact-section .button.white {
	border: none;
}

.button.green {
	background-color: var(--green);
}

.section-more {
	position: absolute;
	top: 9rem;
	right: calc((100vw - 1500px) / 2);
}

/* home /////// */

hero {
	position: relative;
	display: flex;
	overflow: hidden;
}

hero .hero-content {
	/*
	position: absolute;
	left: calc(50% - (87.5rem / 2));
	bottom: 8rem;
	*/
	
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: url(../images/background-shadow-sliver.png) left top / 100% 100% no-repeat;
	background-blend-mode: multiply;
	width: 45vw;
	padding: 0 3.5vw 0 5vw;
	align-content: center;
	color: white;
		text-shadow: 1px 1px 4px rgba(0,0,0,.5);
}

hero h1 {

}

hero .post-heading {
	text-align: left;
	text-transform: uppercase;
	font-size: 1.5rem;
	color: var(--yellow);
}

hero p {
	font-weight: 700;
}

hero img {
	width: 140%;
}

section {
	padding: 6rem 0;
	position: relative;
}

.section-title {
	padding: 0 0 2rem;
	border-bottom: 1px solid var(--darkgray);
	margin: 0 0 4rem;
}

.local-plants .section-title.interior-section-title /* local plants is coming from the page title */ {
	padding-top: 6rem;
	background: url("../images/soil.png") left center / 100% 100% no-repeat var(--tan);
	color: white;
}


section.case-studies {
	
}

.case-studies .section-title, .contact-section .section-title {
	border: none;
	padding: 0;
}

ul.project-thumbnails {
	flex-flow: row wrap;
	display: flex;
	justify-content: flex-start;
}

ul.project-thumbnails li {
	width: 48%;
	margin-right: 2%;
	margin-bottom: 1.875em;
	position: relative;
	
	overflow: hidden;
}

ul.project-thumbnails li img {
	background-color: white;
}

ul.project-thumbnails li:hover img {
	transform: scale(1.05);
	transition: .2s;
}

.overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--darkgray);
	color: white;
	padding: 2rem;
	opacity: .75;
	transition: .4s ease; /* not working */
	background-blend-mode: multiply;
	z-index: 100;

}

li:hover .overlay {
	display: flex;
	align-items: flex-end;
}

.overlay h2 {
	font-size: 2rem;
	padding-right: 6rem;
	background: url(../images/arrow-right-white.svg) right 2rem center / 2.75rem 1.5rem no-repeat;
}



.banner {
	margin: 0 0 6rem;
}





section.home-intro {
	background: var(--lighttan);
	background: white;
}

section.home-intro img {
	width: 90%;
}

section.steps-section {
	background: var(--bluegray);
	color: white;
}

section.contact-section {
	background: var(--green);
	text-align: center;
}

section.contact-section h2 {
color: white;
}



/* local plants section ///////// */

section.local-plants {
	background: url("../images/soil.png") left center / 50% 100% no-repeat var(--tan);
}

.local-plants .section-title {
	margin: 0;
	padding: 0;
	border: none;
}

.local-plants .section-title .columns .column {
	width: 50%;
	padding-bottom: 3rem;
}

.local-plants .section-title .columns .column .inner {
width: auto;
}

.local-plants .titles {
color: white;
}

.local-plants .titles h2 {
	font-size: 4.5rem;
	line-height: 1.1;
	text-align: left;
	padding: 0;
	margin: 0 0 1rem;
}

.local-plants .titles h2:after {
	display: none;
}

.local-plants .titles em {
	display: block;
	font-family: var(--script);
	color: var(--green);
	font-size: 3.5rem;
}

.local-plants .titles .inner {
	padding-right: 5vw;
	padding-left: calc((100vw - 87.5rem) / 2);
}


.local-plants .title-intro {

}

.local-plants .title-intro .inner {
		padding-left: 5vw;
	padding-right: calc((100vw - 87.5rem) / 2);
}


/* home intro ////// */

.home-intro ul {
	
}

.home-intro li {
	min-height: 4rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0 6rem;
	background: url("../images/icon-design-dark.svg") left top / 4rem 4rem no-repeat;
}

.home-intro li:nth-child(2) {
	background: url("../images/icon-planting-dark.svg") left top / 4rem 4rem no-repeat;
}

.home-intro li:nth-child(3) {
	background: url("../images/icon-planning-dark.svg") left top / 4rem 4rem no-repeat;
}



/* offerings ////// */

section.offerings {
	background: var(--lighttan);
	background: white;
	color: var(--bluegray);
}


.offerings ul {
	display: flex;
	justify-content: space-between;
}

.offerings li {
	width: 18%;
	margin: 1%;
	background: var(--green);
	border-radius: 1rem;
	text-align: center;
	color: white;
	font-size: 1rem;
	overflow: hidden;
}

.offerings li h3 {
font-size: 1.25rem;
  margin: 0 0 .5rem;
  color: var(--darkgray);
  font-weight: 600;
}

.offerings li p {
	margin: 0;
}

.offerings li .icon {
	background: var(--darkgray);

}

.offerings li .content {
	padding: 2rem 1rem;
}

.offerings img {
	width: 40%;
	margin: 0 auto ;
	padding: 2rem 0;
}










.plant-gallery {

}

.plant-gallery .plant {
  width: 50vw;
  margin: 0 2rem;;
  counter-increment: gallery-cell;
}

.plant-gallery .plant  img {
	width: 100%;
	height: auto;
}


.plant-gallery .flickity-page-dots {
	bottom: -3rem !important;
}

.plant-gallery .flickity-page-dots .dot {
	background: var(--green) !important;
	opacity: 1 !important;
	width: 1rem !important;
	height: 1rem !important;
}

.plant-gallery .flickity-page-dots .dot.is-selected {
	background: white !important;
}

.testimonials .flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 1rem;
	margin-left: -3rem;
}





heroes {
	/*
	width: 100vw;
	height: 39vw;
	*/
}

/* header ///////// */

header {
	background: white;
	color: var(--darkgray);
	padding: 1.25rem 0;
}




body.projects header, body.single-project  header {
	background: var(--darkgray);
	color: white;
}


body.projects nav ul li.search-link a, body.single-project  {
	background: url(../images/icon-search-white.svg) center center / 1.75rem auto no-repeat;
}

.logo {
	width: 20rem;
	display: block;
}

.logo img {
	width: 100%;
	height: auto;
}


nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

nav ul {
	display: flex;
	align-items: center;
}

nav ul li {
	margin: 0 1.5rem; 
	order: 2;
}

nav ul li.schedule-a-meeting {
	order: 1;
}

nav ul li.schedule-a-meeting a {
	background: var(--yellow);
	color: var(--darkgray);
	padding: 1rem 2rem;
}

body.projects nav ul li.schedule-a-meeting a {
	border: 1px solid white;
	color: white;
	background: transparent;
}


nav ul li.search-link a {
	width: 1.75rem;
	height: 1.75rem;
	display: block;
	background: url(../images/icon-search-dark.svg) center center / 1.75rem auto no-repeat;
	text-indent: -10000px;
}

.menu-toggle {
	display: none;
}

.menu-toggle svg {
	width: 1.75rem;
}

.menu-toggle rect {
	fill: var(--darkblue);
}

body.projects header .menu-toggle rect , body.single-project  header .menu-toggle rect {
	fill: white;
}




/* page ////////// */

.page-title {
	position: relative;
}



.page-title.dark {
	background: var(--darkgray);
	padding: 6rem 0;
	color: white;
}

.page-title.dark .inner {
	display: flex;
	justify-content: space-between;
}

body.projects .page-title, body.single-project .page-title {
	display: flex;
	justify-content: space-between;
	margin: 0 0 6rem;
}

.title-left, .title-image {
	width: 50%;
}

.title-left h1 {
	margin: 0 0 2rem;
}

.page-title.with-picture {
	display: flex;
	align-items: stretch;
	padding: 0;
}

.title-image {
position: absolute;
	top: 0;
	right: 0;
	left: 50%;
	bottom: 0;
}

.page-title.with-picture .page-description {
	width: auto;
}

.page-title .inner-content {
	padding: 6rem 4rem 6rem calc((100vw - 1500px) / 2);
}

.page-description {
	width: 50%;
}

.page-description p {
	margin: 0;
}




/* services /////// */


ul.services-list {
	
}

ul.services-list li {
	margin: 0 0 2rem;
	padding: 0 0 0 10rem;
	background: url(../images/icon-service-design.svg) left top / 7.5rem 7.5rem no-repeat;
	min-height: 7.5rem;
}

ul.services-list li:nth-child(2) {
	background: url(../images/icon-service-sprinkler.svg) left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li:nth-child(3) {
	background: url("../images/icon-service-maintenance.svg") left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li:nth-child(4) {
	background: url("../images/icon-service-cleanup.svg") left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li:nth-child(5) {
	background: url("../images/icon-service-installation.svg") left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li:nth-child(6) {
	background: url("../images/icon-service-hardscape.svg") left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li:nth-child(7) {
	background: url("../images/icon-service-lighting.svg") left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li:nth-child(8) {
	background: url("../images/icon-service-vegetation.svg") left top / 7.5rem 7.5rem no-repeat;
}

ul.services-list li p {

	
}


/* testimonials //////// */


.testimonials {
	padding: 3rem 3rem 3.5rem;
	background: var(--yellow);
	width: 100%;
	font-size: 1.125rem;
}

.testimonial {
	width: 100%;
	color: var(--darkblue);
}

.testimonial p {
	margin: 0 0 1rem;
}

.testimonial-author {
	font-family: var(--script);
	font-size: 2rem;
	color: white;
	line-height: 1.2;
	padding-bottom: 1rem;

}

.five-stars {
	width: 50%;
	margin: 0 auto 2rem;
}



/* footer ////// */




footer {
	padding: 6rem 0;
}

footer .columns {
	justify-content: flex-start;
}

footer .column {
	padding-top: 3rem
}

footer .column, .footer-logo {
	margin-right: 5rem;
	width: auto;
}

.footer-logo {
	width: 15rem;
}

footer h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--green);
	margin: 0 0 1rem;
	text-align: left;
	padding: 0;
	text-transform: uppercase;
}

footer p {
	margin: 0 0 1.25rem;
}

.resources {
	margin-left: auto;
	padding-top: 3rem;
}

.resources ul {
	min-width: 26rem;
	
	min-width: 30rem;
}

.resources li {
	padding: 1rem 4rem 1rem 2rem;
	background: url(../images/icon-link.svg) right 1rem center / 1.25rem 1.25rem no-repeat black;
	margin: 0 0 1.5rem;
	color: white;
	font-size: 1rem;
}

.post-footer {
	background: var(--yellow);
	color: black;
	padding: 1rem;
	text-align: center;
	font-size: 1rem;
}


/* button revision /////// */

/*

nav ul li.schedule-a-meeting a {
	background: var(--green);
	color: white;
	
	background: url("../images/icon-calendar.svg") right 1.5rem center / 1.5rem 1.5rem  no-repeat var(--green);
	padding: 1rem 4rem 1rem 2rem 
}

body.projects nav ul li.schedule-a-meeting a {
	background: url("../images/icon-calendar.svg") right 1.5rem center / 1.5rem 1.5rem  no-repeat;
}
*/

nav ul li.schedule-a-meeting a {
	background: var(--green);
	color: white;
	border-radius: 2.125rem;
}


/* team //////// */


.entries {
	border-top: .25rem solid var(--darkgray);
	padding-top: 6rem;
	margin-top: 6rem;
}

.entries.local-plants-guide {
	margin-top: 0;
	padding-top: 0;
	border: none;
}

.entries.local-plants-guide .entry {
	align-items: center;
}

.entries.local-plants-guide h2 {
	font-family: var(--script);
}

.entries.local-plants-guide h3 {
	margin: 0 0 1rem;
}

.entries.local-plants-guide .entry-image::before {
	position: absolute;
	width: 60%;
	left: 20%;
	right: 20%;
	bottom: 0;
	border-top: 2px solid #333;
	content: "";
	filter: blur(1px);
}

.entry {
	display: flex;
	justify-content: space-between;
	margin: 0 0 3rem;
	border-bottom: 2px solid #e2e2e2;
	padding-bottom: 3rem;
}

.entry:last-child {
	border: none;
	padding: 0;
	margin: 0;
}



.entry-image {
	width: 34%;
	position: relative;
}

.entry-content {
	width: 56%;
}


section.case-studies, section.offerings {
	display: flex;
	flex-flow: column;
}




/* search page //////// */


.entry {
	margin: 0 0 4rem;
}