@charset "UTF-8";
/* Rudy's Greenhouses CSS */


*, *::before, *::after {
	box-sizing: border-box;
}

* a {
	text-decoration: none;
}

* a:visited {
  text-decoration: none;
}

a,
button,
label,
input,
textarea {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove gray click box on mobile */
}


::-moz-selection { /* Code for Firefox */
    color: #314d5d;
    background: #89cc33;
}

::selection {
    color: #314d5d;
    background: #89cc33;
}

h1, h2, h3 {
	font-family: 'ProximaNova-Bold', sans-serif;
	font-size: 2em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.25;
	margin: 0 0 20px;
}


ul {
	list-style-type: none;
	margin: 0;
}

li {
	padding: 10px 0;
}

body {
	position: relative;
	font-family: 'EB Garamond', serif;
	font-weight: 500;
	font-size: 1em;
	line-height: 1.75;
	color: #314d5d;
	background: #f4f3f2;
	margin: 0 auto;;
	max-width: 1500px;
	height: 100%;
}

p {
	line-height: 1.75em;
	text-align: left;
	margin: 0 0 30px;
}

img {border-radius: 2px;}


/* Common Styles */

.cream-bg {
	background: #eaeaea;
}

.section-title {
	font-size: 2em;
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 1.5;
}

.color-white {
	color: white;
}

.typographic {
	font-family: 'ProximaNova-Bold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 4em;
	line-height: 1;
}


.brand {
	position: absolute;
	background: 120px 80px;
	top: 5px;
	left: 80px;
	width: 120px;
	height: 80px;
	background-image: url(../images/rudys-greenhouses-logo.svg);
	background-size: cover;
	z-index: 4;
}


.intro-slide {
	display: table;
	width: 100%;
	height: 650px;
	background: url('../images/background.jpg') no-repeat center center;
	background-size: cover;
	background-position:  center center;
	color: #89cc33;
	background-color: #1A2B34;
	text-align: center;
	padding: 25px;
}

.type-container {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100%;
}

.intro-slide h2 {
	margin: 0;
	font-family: 'ProximaNova-Bold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 25px;
	font-size: 10em;
	line-height: 1.25;
	opacity: 0.8;
	animation-name: growFade;
	animation-duration: 2.5s;
}

.intro-slide p {
	text-align: center;
	font-size: 1em;
	font-family: 'ProximaNova-Bold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: white;
	font-weight: normal;
	font-style: normal;
}

.rg-button {
	position: relative;
	display: inline-block;
	color: #e6e7e8;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: 2px solid #89cc33;
	padding: 15px 20px;
	border-radius: 2px;
	margin: 0;
  overflow: hidden;
  z-index: 1;	
	transition: all 0.3s ease-in-out;
}

.rg-button:nth-of-type(2) {
	margin-left: 10px;
}

.rg-button:after {
 content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 100%;
  background: #89cc33;
  z-index: -1;
  transition: width 0.25s ease-in-out;
}

.rg-button:hover {
	color: #1a2b34;
}

.rg-button:hover:after {
  width: 110%;
}


 @keyframes growFade {
	 0% {opacity: 0; transform: scale(0.9);}
	 100% {opacity: 0.8; transform: scale(1);}
}



.green-walls {
	color: white;
	padding: 25px;
	background: url(../images/rudys-greenhouses-green-walls.jpg);
	background-position: center center;
	background-size: cover;
	border-radius: 2px 2px 0 0;
}

.caption-text {}

/*** Fulfillment ***/

.fulfillment {
	padding-top: 50px;
	padding-bottom: 50px;
	background: url(../images/fulfillment-background.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 2px;
}


/*** Offer ***/

.offer {
	padding-top: 50px;
	padding-bottom: 50px;
	background: url(../images/offer-plants-background.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 2px;
}

/*** Delivery Routes ***/

.delivery-routes img {
	margin: 0;
}


.delivery-map {
	width: 100%;
	height: 360px;
	border: none;
	border-radius: 2px;
}



/* CTA Bar */
.cta-bar {
	text-align: center;
	color: white;
	background: #1A2B34;
	padding: 25px;
	border-radius:  0 0 2px 2px;
}

/* Contact */

.contact {
}


/* Form */

label {
	font-family: 'ProximaNova-Semibold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 0.8em;
}

input[type=text] {
	text-transform: capitalize;
}

input[type=text], 
input[type=email], 
textarea {
  width: 100%;
  padding: 10px 10px;
  margin: 0 0 20px;
  box-sizing: border-box;
  border-radius: 2px;
	background-color: #fff;
  border: 1px solid transparent;
	transition: all 0.3s ease-in-out;
}

textarea {
	padding: 10px 10px 25px;
	min-height: 100px;
  border: 1px solid transparent;
}

input[type=text]:hover, 
input[type=email]:hover, 
textarea:hover {
	border: 1px solid #89cc33;
}

input[type=text]:focus, 
input[type=email]:focus, 
textarea:focus {
  border: 1px solid #314d5d;
	transition: all 0.3s ease-in-out;
}

.submit-button {
	position: relative;
	display: inline-block;
	color: #1a2b34;
	background: none;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: 2px solid #89cc33;
	padding: 15px 20px;
	border-radius: 2px;
	margin: 20px 0;
  overflow: hidden;
  z-index: 1;	
	transition: all 0.3s ease-in-out;
}

.submit-button:hover {
	color: #1a2b34;
  background: #89cc33;
}



.success-message {
	padding: 150px 25px;
	background: url(../images/fulfillment-background.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	color: white;
	text-align: center;
}

.success-message h4 {
	font-size: 3em;
	font-family: 'ProximaNova-Bold', sans-serif;
	line-height: 1.75;
	font-weight: normal;
	margin: 0;
}

.success-message p {
	font-size: 1.5em;
	line-height: 1.1;
	text-align: center;
}





/* Form */


.contact-page address {
	font-style: normal;
}




/* Hero Banner */

.hero-banner {
	display: table;
	position: relative;
	width: 100%;
	height: 400px;
	padding: 25px;
	text-align: center;
	color: white;
	background-color: #1A2B34;
	background: url(../images/about-bg.jpg) no-repeat center center;
	background-size: cover;
	background-position: center center;
}

.hero-banner.contact {
	background-color: #1A2B34;
	background: url(../images/contact-bg.jpg) no-repeat center center;
	background-size: cover;
	background-position: center center;
}

.middle-content {
	display: table-cell;
	vertical-align: middle;
}

.hero-banner.browse-plants {
	background-color: #1A2B34;
	background: url(../images/browse-plants-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.begonias {
	background-color: #1A2B34;
	background: url(../images/begonias-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.dracaenas {
	background-color: #1A2B34;
	background: url(../images/dracaenas-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.ferns {
	background-color: #1A2B34;
	background: url(../images/about-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.ficus {
	background-color: #1A2B34;
	background: url(../images/ficus-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.hawaiian {
	background-color: #1A2B34;
	background: url(../images/hawaiian-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.ivy {
	background-color: #1A2B34;	
	background: url(../images/ivy-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.palms {
	background-color: #1A2B34;	
	background: url(../images/palms-bg.jpg) no-repeat center center;
	background-size: cover;
}

.hero-banner.succulents {
	background-color: #1A2B34;	
	background: url(../images/succulents-bg.jpg) no-repeat center center;
	background-size: cover;
}


.hero-banner h1 {
	font-size: 3em;
	color: white;
	text-transform: uppercase;
	letter-spacing: 4px;
}



/* Plant Details */

.plant-banner {
	color: white;
	background: #1A2B34;
	padding-top: 125px;
	padding-bottom: 10px;
}

.plant-banner h1 {
	font-family: 'EB Garamond', serif;
	font-weight: 500;
	font-size: 2em;
}

.plant-details h3 {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.plant-details img {
	border-radius: 2px;
}

.plant-details h2 {
	font-size: 1.5em;
}



ul.plant-size-availability {
	margin: 0;
	padding: 0;
}


ul.plant-size-availability li {
	padding: 10px 0;
	margin-bottom: 10px;
	border-bottom: 1.5px solid #314d5d;
}



.filters ul {
	padding: 0;
	margin: 20px 0;
	width: 100%;
}



.filters li {
	display: inline-block;
	vertical-align: middle;
	float: left;
	width: 12.5%;
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	font-family: 'ProximaNova-Semibold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.filters li a {
	display: inline-block;
	vertical-align: middle;
	float: left;
	width: 100%;
	font-size: 0.9em;
	color: #314d5d;
	border-bottom: 1.5px solid transparent;
	padding: 15px 10px;
	margin: 0;
	text-align: center;
	transition: all 0.3s ease-in-out;
}

span.filter-indicator {
	display: block;
	height: 1.5px;
	background: none;
	width: 0.1px;
	float: left;
	transition: all 0.3s ease-in-out;
}

.filters li:hover span.filter-indicator {
	width: 100%;
	background: #89cc33;
}


.catalog-card {
	display: inline-block;
	float: left;
	width: 24%;
	height: 325px;
	margin-right: 1%;
	margin-bottom: 1%;
}

.catalog-card:nth-of-type(4n+4) {
	margin-right: 0;
}


.plant-image-container {
	display: block;
	position: relative;
	width: 100%;
	height: 175px;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	border-radius: 2px;
	transition: all 0.3s ease-in-out;
}

span.type-indicator {
	display: inline-block;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: white;
	background: #314d5d;
	padding: 7px 15px;
	margin: 0;
}

span.price-indicator {
	display: block;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 0.8em;
	letter-spacing: 2px;
	color: #314d5d;
	margin-bottom: 5px;
}

.catalog-button {
	position: relative;
	display: inline-block;
	color: #314d5d;
	font-family: 'ProximaNova-Semibold', sans-serif;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border: 1.5px solid #314d5d;
	padding: 10px 12px;
	border-radius: 2px;
	margin: 10px 0 0;
  overflow: hidden;
  z-index: 1;	
	transition: all 0.3s ease-in-out;
}


.plant-image-container:hover {
	opacity: 0.8;
}

.catalog-button:hover {
	color: white;
	background: #314d5d;
  border: 1.5px solid #314d5d;
}




.catalog-card h2 {
	color: #314d5d;
	font-size: 1.15em;
	font-family: 'EB Garamond', serif;
	font-weight: 500;
	line-height: 1.5;
	margin: 10px 0;
	width: 100%;
	text-transform: none;
	letter-spacing: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.catalog-card p {
	padding: 10px 15px;
	margin: 0;
}







/*** Global Backgrounds ***/

.green {
	background: #89cc33;
}

.nav-container {
	position: absolute;
	width: 100%;
	max-width: 1500px;
	top: 0;
	z-index: 3;
	margin: 0;
	padding: 0;
	background: rgba(19,31,37,0.50);
}

.nav {
	list-style-type: none;
	padding: 0;
	float: right;
	background: none;
	margin-right: 70px;
}

.nav li {
	margin: 0;
	padding: 0;
	background: none;
	float: left;
}

.nav li a {
	position: relative;
	display: inline-block;
	font-family: 'ProximaNova-Semibold', sans-serif;
	padding: 35px 25px;	
	color: white;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0;
	transition: all 0.3s ease;
}


.nav li a:hover {
	background: rgba(0,0,0,0.2);
}


.dropdown {
	position: absolute;
	display: none;
	top: 100%;
	width: 100%;
	left: 0;
	background: #1A2B34;
}

li .dropdown a {
	padding: 20px;
}

.dropdown a.drop-style {
	float: left;
	width: 11.11%;
	text-align: center;
	font-size: 0.7em;
}

.dropper:hover .dropdown {
	display: block;
	animation: fadeMe 0.5s ease-in-out;
}

@keyframes fadeMe {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.mobile-nav {
	display: none;
}

footer {
	margin-bottom: 0px;
	background: #1A2B34;
	text-decoration: none;
	font-weight: normal;
}

footer div {
	padding: 0;
	margin: 0;
}

footer p,
footer a {
	color: #3c5e72;
}

footer img {
	width: 50px;
	height: auto;
}

footer ul {
	list-style-type: none;
	color: #3c5e72;
	margin: 0;
	padding: 0;
}


footer h4 {
	font-size: 0.9em;
	font-weight: normal;
	font-family: 'ProximaNova-Semibold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #89cc33;
}


footer li {
	line-height: 1.5;
	margin-bottom: 20px;
	margin-left: 0;
	padding: 0;
}

span.copyright {
	display: block;
	font-size: 0.8em;
	font-family: 'ProximaNova-Semibold', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;

}

.mobile:before,
.office:before,
.fax:before,
.email:before{
	vertical-align: middle;
	display: inline-block;
  background-size: 15px 15px;
	background-repeat: no-repeat;
	background-position: center center;
	width: 20px; 
	height: 20px;
	margin-right: 5px;
	content:"";	
}

.mobile:before {
	background-image: url(../images/icon-mobile.png);
}
.office:before {
	background-image: url(../images/icon-office.png);
}
.fax:before {
	background-image: url(../images/icon-fax.png);
}
.email:before {
	background-image: url(../images/icon-email.png);
}





.pagination {
	display: block;
	margin: 0 auto;
}

.pagination a {
	display: inline-block;
	font-family: 'ProximaNova-Bold', sans-serif;
	color: white;
	background: #89cc33;
	padding: 10px 25px;
	transition: all 0.3s ease-in-out;
}

.pagination a:first-of-type {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.pagination a:last-of-type {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.pagination a:hover {
	background: #5BB845;
}

.active {
	background: #5BB845;
}


span.disclaimer {
	font-size: 0.7em;
	font-weight: 600;
	color: #738A98;
}


/* Mobile */
@media screen and (max-width: 780px) {
	
main {
	margin-top: 50px;
}	
	
h2	{
	font-size: 2em;
}	
	
.brand {
	position: fixed;
	background-size: 50px 39px;
	background-image: url(../images/rudys-logomark.png);
	background-position: center center;
	top: 5px;
	left: 20px;
	width: 50px;
	height: 39px;
	z-index: 4;
}	

.intro-slide {
	position: relative;
	width: 100%;
	height: 325px;
	background: url('../images/background.jpg') no-repeat center center;
	background-size: cover;
	background-position: center center;

}

.intro-slide h2 {
	font-size: 4em;
	letter-spacing: 7px;
}	

	
.hero-banner {
	width: 100%;
	height: 325px;
	padding: 20px;
}
	
	
.nav-trigger {
	position: fixed;
	z-index: 4;
	top: 4px;
	right: 25px;
	height: 44px;
	width: 44px;
	overflow: hidden;
	color: transparent;
	white-space: nowrap;
	text-indent: 100%;	
}

.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
	position: absolute;
	width: 30px;
	height: 3px;
	background: #89cc33;
}

.nav-trigger span {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: background .3s;
}

.nav-trigger span::before,
.nav-trigger span::after {
	content:'';
	top: 0;
	left: 0;
	transition: background .3s, transform .3s;
}

.nav-trigger span::before {
	transform: translateY(-10px)
}

.nav-trigger span::after {
	transform: translateY(10px)
}

.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
	background: #89cc33;
}

.nav-open .nav-trigger span {
	background: transparent;
}

.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
	background: #89cc33;
}

.nav-open .nav-trigger span::before {
	transform: rotate(-45deg)
}

.nav-open .nav-trigger span::after {
	transform: rotate(45deg)
}

.nav-open .nav-container {
	transform: translateX(0);
}

.nav-container {
	transform: translateX(-100%);
	transition: transform 0.3s;	
	height: 100vh;
	position: fixed;
	background: #1A2B34;
}

.nav {
	margin-top: 50px;
	margin-right: 0px;
	margin-left: 0px;
	width: 100%;
}

.nav li {
	float: left;
	width: 100%;
	padding: 0px;
}

.nav li a {
	border-radius: 0px;
	width: 100%;	
	padding: 20px 20px 20px 20px;
}
	
.mobile-nav {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background: #15222a;
	width: 100%;
	height: 50px;
	z-index: 3;
}
	

/* nav styles */
	
.filters li {
	display: block;
	float: none;
	width: 100%;
}

.filters li a {
	display: block;
	float: none;
	width: 100%;
}
	
	

.block {
	width: 100%;
}	
	
.catalog-card {
	width: 49%;
	height: 350px;
}	

.catalog-card:nth-of-type(2n+2) {
	margin-right: 0px;
}

.plant-banner {
	padding-top: 50px;
}

	
	
	
	
.selectedPage {
	background: red;
	color: yellow;
}
	
}




/* -------------------------------- 

Remove zoom from Form inputs

-------------------------------- */
/* Remove Input Auto Zoom on Form Inputs */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    select,
    textarea,
    input {
        font-size: 16px;
    }

    select:focus,
    textarea:focus,
    input:focus {
        font-size: 16px;
    }

}