@import "https://fonts.googleapis.com/css?family=Karla:400,700&display=swap";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
}
html {
  font-size: 10px;
}
body {
  font-family: karla, sans-serif;
  color: #525252;
}
label {
  display: inline-block;
  font-size: 1.6rem;
}
p,
li {
  font-size: 1.8rem;
  padding: 0.5rem 0;
}
h1 {
  text-align: center;
}
h1,
h2 {
  font-size: 3rem;
  margin: 2rem auto;
  font-weight: 700;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.6rem;
}
.button {
  display: block;
  padding: 1rem 2rem;
  margin: 2rem 1rem;
  text-align: center;
  max-width: 400px;
  border-radius: 50px !important;
  font-size: 1.6rem;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  border: none !important;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.11);
  -webkit-appearance: none;
  white-space: normal;
}
.button:hover {
  opacity: 0.8;
}
.button:focus {
  outline: none;
}
.dark-button {
  background-color: #333;
  color: #fff;
}
.green-button {
  background-color: #4e5a44;
  color: #fff;
  text-decoration: none;
}
.green-button:hover,
.green-button:focus,
.dark-button:hover,
.dark-button:focus,
.orange-button:hover,
.orange-button:focus {
  color: #fff;
}
.orange-button {
  background-color: #f39100 !important;
  color: #fff !important;
}
button:focus {
  outline: none;
}
.more-details .button {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.checkout-form-container form button {
  float: right;
  width: 20rem;
}
ul {
  list-style: none;
}
a {
  color: #4e5a44;
  transition: 300ms all ease;
}
a:focus,
a:hover {
  color: #585859;
  text-decoration: none;
}
article {
  width: 1e3px;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
}
article img {
  display: block;
  margin: 0 auto;
}
.discount-banner {
  display: inline-block;
  width: 49%;
  padding: 1rem 10rem;
}
.article-background {
  background-color: #f9f9f9;
  padding: 2rem 0;
}
.comparison-chart table {
  margin: 4rem auto;
}
.comparison-chart table thead {
  background-color: #4e5a44;
  color: #fff;
}
.comparison-chart table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.comparison-chart table th {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 2rem;
}
.comparison-chart table td {
  padding: 2rem;
  border: 1px solid #ddd;
  font-size: 1.5rem;
}
.comparison-chart table td:first-child {
  font-weight: 700;
}
.comparison-chart table td:nth-child(2) {
  text-align: center;
}
.comparison-chart .red-price {
  color: red;
  font-size: 2rem;
}
.comparison-chart .green-price {
  color: green;
  font-size: 2rem;
}
.security-badges {
  clear: both;
  margin: 0 auto;
  width: 550px;
  padding-top: 4rem;
}
.mobile-badges {
  display: none;
}
.desktop-badges {
  display: block;
}
.discount {
  background-color: #4e5a44;
  text-align: center;
  padding: 0.5rem;
}
.discount a {
  color: #fff;
  font-size: 1.3rem;
  text-transform: uppercase;
}
.discount a:hover,
.discount a:focus,
.discount a:active {
  color: #fff;
}
.discount a span {
  font-weight: 700;
}
.burger {
  display: none;
  position: relative;
  width: 2rem;
  height: 1.7rem;
  color: #fff;
  cursor: pointer;
}
.burger div {
  position: absolute;
  width: 100%;
  height: 20%;
  background-color: #525252;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.line-top {
  top: 0;
}
.line-middle-top {
  top: 40%;
}
.line-middle-bottom {
  top: 40%;
}
.line-bottom {
  bottom: 0;
}
.burger.on .line-top,
.burger.on .line-bottom {
  opacity: 0;
}
.burger.on .line-middle-top {
  -webkit-transform: rotate(45deg);
}
.burger.on .line-middle-bottom {
  -webkit-transform: rotate(-45deg);
}
.mobile-menu {
  display: none;
}
.grid img {
  width: 100%;
  height: auto;
}
.grid {
  position: relative;
  width: 100%;
}
.slider {
  margin-top: 7rem;
  height: 500px;
  overflow: hidden;
}
.slider-nav__prev,
.slider-nav__next {
  top: calc(50% + 1rem);
}
.slider-box,
.slider__item {
  position: relative;
  margin-top: 0;
}
.slider__canvas {
  transition: transform 0.5s;
}
.slider__item {
  float: left;
}
.slider__item__title {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  margin: 0;
  color: #468;
  font-size: 2.5rem;
  line-height: 1;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s, transform 0.3s;
  transform: translate3d(-50%, -60%, 0);
}
.active .slider__item__title {
  opacity: 1;
  transition-delay: 0.5s;
  transform: translate3d(-50%, -50%, 0);
}
.slider-nav {
  color: #fff;
  font-size: 1rem;
  text-align: center;
}
.slider-nav__dots {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}
.slider-nav__prev,
.slider-nav__next,
.slider__dot {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px;
  cursor: pointer;
  backface-visibility: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: rgba(225, 225, 225, 0.3);
}
.slider-nav__prev,
.slider-nav__next {
  position: absolute;
  top: calc(50% - 2.5rem);
  width: 5rem;
  height: 5rem;
  line-height: 5rem;
}
.slider-nav__prev {
  left: 14%;
}
.slider-nav__next {
  right: 14%;
}
.fa-angle-left {
  font-size: 3rem;
  padding-top: 1rem;
  padding-right: 0.5rem;
}
.fa-angle-right {
  font-size: 3rem;
  padding-top: 1rem;
  padding-left: 0.5rem;
}
.slider__dot {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0 1rem;
}
.slider-nav__prev:hover,
.slider-nav__next:hover,
.slider__dot.active,
.slider__dot:hover {
  transform: scale3d(1.2, 1.2, 1);
}
.slideshow-button {
  display: inline-block;
  position: absolute;
  width: 25%;
  height: 13%;
}
.landing-themes-sections a {
  color: #000000;
  transition: 250mss all ease;
}
.slideshow-button-1 {
  top: 25%;
  left: 6%;
}
.slideshow-button-2 {
  right: 14%;
  top: 19%;
}
.slideshow-button-3 {
  left: 23%;
  bottom: 2%;
}
.slideshow-button-4 {
  left: 39%;
  top: 38%;
}
.slider-intro .long-slider-heading {
  font-size: 2rem;
}
.slider-intro:focus {
  color: #525252;
  text-decoration: none;
}
.intro {
  background-color: rgba(255, 255, 255, 0.91);
  border: none;
}
a:hover {
  text-decoration: none;
  color: #525252;
}
h2 {
  font-size: 3rem;
  margin: 2rem auto;
  font-weight: 700;
}
.mobile-menu a:hover {
  text-decoration: none;
  color: #525252;
}
.link-to-design-tool {
  position: absolute;
  left: 10%;
  right: 10%;
  top: calc(50% - 6rem);
  height: 12rem;
  text-align: center;
}
.link-to-design-tool h2 {
  color: #fff;
  font-size: 5rem;
  padding-bottom: 2rem;
}
.link-to-design-tool a {
  text-decoration: none;
  color: #525252;
  font-size: 2rem;
  padding: 1rem 2rem;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: all 200ms ease-in;
}
.link-to-design-tool a:hover {
  padding: 1.5rem 2.5rem;
}
.nursery-page,
.home-page {
  font-size: 0;
}
.display-image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 49.8%;
  cursor: pointer;
}
.display-image img {
  z-index: 0;
  width: 100%;
  transition: all 500ms ease;
}
.display-image p {
  margin-top: 5%;
  display: none;
}
.display-image:hover .display-image-img {
  transform: scale(1.1);
}
.transform-intro:hover .intro {
  top: 16%;
  left: 5%;
  right: 5%;
  bottom: 10%;
  width: 90%;
  height: 68%;
  background-color: rgba(255, 255, 255, 0.9);
}
.transform-intro:hover h2 {
  display: none;
}
.transform-intro:hover p {
  display: block;
}
.nursery-page .intro {
  height: 4rem;
  vertical-align: middle;
  top: calc(50% - 2rem);
  padding: 1rem 0 0;
  width: 68%;
  left: 16%;
}
.nursery-page .intro h2 {
  margin-bottom: 0;
  font-size: 1.5rem;
}
.intro {
  position: absolute;
  top: calc(50% - 3rem);
  height: 6rem;
  width: 70%;
  left: 15%;
  color: #525252;
  font-size: 1.5rem;
  padding: 2rem 2rem 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease-in-out;
  z-index: 1000;
}
.slider-intro {
  position: absolute;
  top: calc(250px - 8rem);
  left: calc(50% - 31rem);
  color: #000000;
  width: 62rem;
  height: 17rem;
  padding: 2rem 3rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #fff;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
  cursor: pointer;
}
.design-service-intro-box {
  height: 15rem;
}
.plant-source-intro {
  width: 800px;
  height: 20rem;
  left: 50%;
  bottom: calc(50% - 10rem);
  margin-left: -400px;
}
.grid .plant-source-intro h2 {
  margin: 1rem auto;
}
.slider-intro h2 {
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 0;
  font-size: 3rem;
}
.slider-intro p {
  font-size: 1.5rem;
}
.index-intro p {
  font-size: 2rem;
}
.index-intro span {
  display: block;
  margin-bottom: 1rem;
}
.slider-intro:hover {
  transform: scale3d(1.05, 1.05, 1);
}
.amount {
  margin: 1rem auto;
}
.amount span,
.amount table {
  display: inline-block;
  vertical-align: middle;
}
.amount .amount-counter td {
  padding: 10px;
}
.amount .amount-counter .fa {
  cursor: pointer;
}
.slider-intro:hover {
  color: #525252;
}
.card-back {
  display: none;
  min-height: 500px;
}
.card-back a {
  float: right;
}
.card-back table {
  display: inline-block;
  width: 50%;
  font-size: 1.5rem;
  vertical-align: middle;
}
.card-back article {
  display: inline-block;
  width: 48%;
  vertical-align: middle;
  text-align: center;
}
.card-back img {
  width: 100%;
  padding: 4rem;
}
.card-back table tr {
  line-height: 2.5rem;
}
.card-back table tr:nth-child(even) {
  background-color: #e7e7e8;
}
.card-back table td {
  width: 49%;
  padding: 10px 0;
}
.card-back table td:nth-child(odd) {
  font-weight: 700;
  text-align: right;
  padding-right: 2rem;
}
.verified-badge {
  display: inline-block;
  font-size: 12px;
  background-color: #549e5c;
  color: #fff;
  padding: 2px 5px;
  border-radius: 5px;
}
@media (min-width: 1350px) {
  .transform-intro:hover .intro {
    top: 28%;
    left: 5%;
    right: 5%;
    bottom: 15%;
    width: 90%;
    height: 45%;
    background-color: rgba(255, 255, 255, 0.9);
  }
}
.second-button {
  display: block;
  margin: 5rem auto;
}
.second-button:hover {
  transform: scale(1.1);
}
.design-service-intro .bulletpoints {
  text-align: center;
}
.design-service-intro ul {
  display: inline-block;
  width: 244px;
  vertical-align: top;
  padding: 2rem 2rem 0;
  list-style: disc;
  text-align: left;
}
.design-service-intro ul li {
  margin-top: 1rem;
}
.scroll,
.scroll-2 {
  width: 100%;
  height: 400px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.scroll {
  background: url(/img/parallax-bg.jpg) fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
.scroll-2 {
  background: url(/img/gardening-bg.jpg) fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
.nursery-page .display-image {
  width: 100%;
  transition: 250ms all ease;
}
.quote-page {
  background-color: #f1f1f1;
}
.quote-page img {
  left: 0;
  right: 0;
  width: 100%;
  top: 0;
}
.projects-page .theme-pop-up article p {
  text-align: left;
}
.quote-container {
  left: 0;
  right: 0;
  top: 25%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 2rem;
  margin: 0 auto;
  width: 600px;
  text-align: center;
}
.quote-container .fa {
  font-size: 3rem;
  vertical-align: middle;
}
.quote-container input {
  vertical-align: middle;
  display: inline-block;
  height: 4rem;
  font-size: 2rem;
}
.quote-container input:focus {
  outline: none;
}
.quote-container input::placeholder {
  color: rgba(0, 0, 0, 0.2);
}
.quote-container a {
  vertical-align: middle;
  display: inline-block;
  color: #fff;
  padding: calc(0.9rem - 2px);
  width: 4rem;
  text-transform: uppercase;
  font-size: 1.5rem;
  text-decoration: none;
  background-color: #749067;
  border: 2px solid #749067;
  transition: 250ms all ease;
}
.quote-container a:hover {
  background-color: #fff;
  color: #749067;
}
.quote-container h2 {
  margin-bottom: 0;
}
.quote-container span {
  display: block;
  margin: 1rem auto;
  font-size: 1.5rem;
}
.landscaping-quote,
.gardening-page {
  background-image: url(/img/slide-8.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  height: 300px;
  padding-top: 8rem;
}
.home-display {
  width: 90%;
  margin: 0 auto;
}
.service-page {
  padding-top: 4rem;
}
.services-ul {
  font-size: 1.2rem;
  list-style: none;
  text-align: center;
  margin: 1rem auto;
  border-collapse: collapse;
}
.services-ul li {
  display: inline-block;
  width: 35rem;
  margin: 1rem;
  padding: 3rem 1rem 2rem;
  margin: 1rem;
  vertical-align: bottom;
  font-size: 1.5rem;
  background-color: rgba(0, 0, 0, 5%);
}
.services-ul li img {
  height: 6rem;
}
.services-ul li a {
  display: inline-block;
  color: #fff;
  background-color: #525252;
  border: 2px solid #525252;
  text-decoration: none;
  padding: 0.5rem;
  margin-top: 2rem;
  transition: 200ms all ease;
}
.services-ul li a:hover {
  color: #525252;
  background: 0 0;
}
.nursery-page {
  text-align: center;
  margin: 4rem auto;
  width: 900px;
}
.nursery-page a {
  position: relative;
  display: inline-block;
  width: calc(33% - 2rem);
  margin: 1rem;
  text-align: center;
  vertical-align: top;
}
.nursery-page .non-plants-categories a {
  width: calc(25% - 2rem);
}
.nursery-page a:hover .display-image-img {
  transform: scale(1.1);
}
.nursery-page a:hover > .display-image {
  opacity: 0.6;
}
.nursery-page a:hover > h3 {
  display: block;
}
.nursery-page h3 {
  left: 0;
  right: 0;
  top: 35%;
  display: block;
  font-size: 1.5rem;
  color: #000000;
  margin: 0.5rem 0 2rem;
}
.nursery-page p {
  font-size: 1.5rem;
}
.product-preview {
  display: inline-block;
  width: 30%;
  text-align: center;
  margin: 3rem 1rem;
  font-size: 1.5rem;
}
.product-preview img {
  max-width: 250px;
  max-height: 250px;
  padding: 1rem;
  border: 1px solid #ccc;
}
.product-preview a:hover img {
  border: 1px solid #000;
}
.product-preview a {
  color: #000;
  text-decoration: none;
}
.product-preview .view-product-button {
  display: inline-block;
  color: #fff;
  background-color: #525252;
  border: 2px solid #525252;
  padding: 0.2rem 1rem;
  text-decoration: none;
}
.product-preview a:hover {
  background-color: #fff;
  color: #525252;
}
.design-service-intro {
  width: 800px;
  margin: 0 auto;
  padding: 3rem 0;
}
.design-service-intro div {
  text-align: center;
  margin: 2rem 0;
}
.design-service-intro div button:hover {
  transform: scale(1.1);
}
.design-service-intro article {
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 2rem;
}
.design-service-intro article h3 {
  margin-bottom: 2rem;
}
.design-service-sections {
  background-color: #fbfbfb;
  padding-bottom: 4rem;
  margin-bottom: 2rem;
}
.design-service-sections h2 {
  text-transform: capitalize;
  padding: 1rem 0 2rem;
  margin-top: 0;
}
.design-service-sections ul {
  width: 700px;
  margin: 0 auto;
}
.design-service-sections ul li {
  display: inline-block;
  width: 49%;
  padding: 1rem;
  vertical-align: middle;
}
.design-service-sections ul li p {
  margin: 2rem 0;
}
.design-service-sections .show-questionnaire-button {
  color: #4e5a44;
  background-color: #fff0;
  border-color: #fff0;
  text-decoration: underline;
  padding: 0;
}
.design-service-sections .show-questionnaire-button:hover {
  text-decoration: none;
}
.design-service-sections .show-questionnaire-button .fa {
  transition: 250ms all ease;
}
.design-service-sections .show-questionnaire-button:hover > .fa {
  margin-left: 5px;
}
.see-more-link {
  color: #333;
  text-decoration: underline;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.see-more-link:hover {
  color: #4e5a44;
  text-decoration: none;
}
.see-more-link:active,
.see-more-link:focus {
  color: #4e5a44;
}
.design-service-sections img {
  width: 100%;
}
.design-service-sections ul .mobile-image {
  display: none;
}
.browse-styles-section {
  text-align: center;
  margin-bottom: 2rem;
}
.browse-styles-section h3 {
  margin: 5rem auto 1rem;
}
.browse-styles {
  width: 800px;
  margin: 0 auto;
  text-align: left;
}
.browse-styles li {
  display: inline-block;
  width: 33%;
  cursor: pointer;
  text-align: center;
}
.browse-styles li img {
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  padding: 1rem;
}
.browse-styles-banner {
  position: relative;
  width: 100%;
  height: 330px;
  background-image: url(../img/slide-10.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 3rem;
  text-align: center;
  color: #525252;
  background-position: 50% 0;
}
.browse-styles-banner span {
  color: #4e5a44;
}
.cpa-button-container {
  text-align: center;
  margin: 4rem auto;
}
.browse-styles-banner section {
  position: absolute;
  display: inline-block;
  padding: 4rem;
  top: calc(50% - 72px);
  left: calc(50% - 282px);
  background-color: #fff;
}
.browse-styles-banner h2 {
  display: inline-block;
  text-transform: none;
  font-size: 2.5rem;
  margin: 0;
}
.browse-styles-banner h2 span {
  display: inline-block;
  padding: 1rem;
  border: 2px solid #4e5a44;
  cursor: pointer;
  transition: 250ms all ease;
}
.browse-styles-banner h2 span:hover,
.chosen {
  background-color: #4e5a44;
  color: #fff !important;
}
.browse-by-spaces {
  display: none;
}
.hidden-ul {
  display: none;
}
.theme-pop-up-wrapper {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: rgba(53, 53, 53, 0.6);
  z-index: 3000;
}
.theme-pop-up {
  position: relative;
  width: 800px;
  height: auto;
  background-color: #f9f9f6;
  margin-left: calc(50% - 400px);
  margin-top: 12rem;
  padding: 2rem;
}
.theme-pop-up .fa-times {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 3rem;
  cursor: pointer;
}
.theme-pop-up article {
  display: inline-block;
  width: 49%;
  margin: 0;
  vertical-align: middle;
  padding: 2rem 2rem 4rem;
  background-color: #f9f9f6;
}
.theme-pop-up article a {
  display: inline-block;
  margin-top: 3rem;
}
.theme-pop-up .images {
  display: inline-block;
  width: 49%;
  height: 100%;
  vertical-align: top;
}
.theme-pop-up .images span {
  font-style: italic;
}
.product-info .main-image,
.theme-pop-up .main-image {
  width: 318px;
  height: 318px;
  margin-bottom: 1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}
.product-info .main-image {
  margin: 0 auto 1rem;
}
.second-link {
  display: none;
}
.margin-top {
  margin-top: 12rem;
}
.half-grid {
  display: inline-block;
  width: 48%;
  margin-top: 2rem;
}
.half-grid:nth-child(odd) {
  float: left;
}
.half-grid:nth-child(even) {
  float: right;
}
.half-grid .slider-intro {
  height: auto;
  width: 40rem;
  top: calc(50% - 7rem);
  left: calc(50% - 20rem);
}
.half-grid .slider-intro h2 {
  padding: 0;
  margin: 0;
}
.choose-themes {
  margin-bottom: 5rem;
}
.choose-themes h1 {
  margin-bottom: 1rem;
}
.choose-themes p {
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
}
.choose-themes p span {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.gardening-page {
  position: relative;
  background-image: url(/img/04.jpg);
}
.gardening-page img {
  display: none;
}
.landing-themes-sections {
  width: 100%;
  margin: 0;
}
.landing-themes-sections div:not(.line) {
  display: inline-block;
  vertical-align: middle;
  width: 49%;
}
.landing-themes-sections div img {
  width: 100%;
  padding: 4rem 0;
}
.desktop-image {
  display: inline-block;
}
.mobile-image {
  display: none;
}
.landing-themes-sections {
  width: 900px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #f9f9f9;
}
.landing-themes-sections section {
  padding: 0 1rem;
}
.landing-themes-sections h2 {
  margin: 3rem 0;
}
.first-article {
  text-align: center;
}
.landing-themes-sections h3 {
  font-size: 2rem;
  margin-top: 0;
  font-weight: 400;
}
.landing-themes-sections p {
  text-align: left;
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.line {
  height: 3px;
  width: 100%;
  background-color: #4e5a44;
  margin-bottom: 1rem;
}
.products-grid {
  margin: 0 auto;
  text-align: center;
}
.products-grid li {
  display: inline-block;
  width: 21%;
  width: 300px;
  margin: 3rem;
  vertical-align: top;
  cursor: pointer;
}
.products-grid li h3 {
  margin: 1rem auto 0.5rem;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  height: 1.5rem;
}
.products-grid li span {
  float: right;
  font-style: italic;
  color: #979798;
  font-size: 14px;
}
.products-grid li .tile-link {
  clear: both;
  display: block;
  font-weight: 700;
  text-decoration: underline;
  color: #333;
}
.products-grid li .button,
.product-info .button,
.product-details button,
.product-summary .button {
  display: block;
  width: 100%;
  text-transform: uppercase;
  color: #fff;
  background-color: #4e5a44;
  border: 2px solid #4e5a44;
  font-size: 1.5rem;
  padding: 0.5rem;
  text-align: center;
  font-weight: 400;
  transition: 250ms all ease;
}
.products-grid li .button {
  clear: both;
}
.products-grid li .button:hover,
.product-info .button:hover,
.product-summary .button:hover {
  background-color: #fff;
  color: #4e5a44;
}
.product-details button:hover {
  background-color: #fbfbfb;
  color: #4e5a44;
}
.products-grid li img {
  width: 100%;
  margin-bottom: 1rem;
}
.zoom-image {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.product-details {
  background-color: #fbfbfb;
  padding-bottom: 5rem;
  height: 100%;
}
.drawer .product-details {
  height: 20px;
}
.product-details .packages {
  margin: 4rem 0;
}
.product-details .packages {
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  padding: 2rem;
}
.fa-arrow-right,
.fa-arrow-left {
  transition: 250ms all ease;
}
.product-details .text-right:hover > .fa-arrow-right {
  margin-right: -1.3rem;
}
.product-details .text-left:hover > .fa-arrow-left {
  margin-left: -1.3rem;
}
.product-details-second {
  margin: 0;
  padding: 2rem;
}
.zoom-image-img {
  transition: 450ms all ease;
}
.zoom-image .view-plant-icon {
  position: absolute;
  left: 25%;
  top: 45%;
  width: 50%;
  font-size: 2rem;
  padding: 1rem 0.5rem;
  line-height: 3rem;
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  display: none;
  transition: 450ms all ease;
}
.zoom-image:hover .zoom-image-img {
  transform: scale(1.2);
  opacity: 0.8;
}
.zoom-image:hover .view-plant-icon {
  display: block;
}
.product-info {
  height: auto;
}
.product-info article {
  padding: 1rem;
}
.product-info .thumbnails li {
  display: inline-block;
  height: 50px;
  width: 50px;
  margin-bottom: 5px;
  overflow: hidden;
  cursor: pointer;
}
.product-info .thumbnails li img {
  width: 150%;
  height: 150%;
}
.product-info h3 {
  margin: 0;
}
.product-info .images {
  padding-top: 1.5rem;
  text-align: center;
}
.product-info .specs-table {
  width: 100%;
  border: 2px solid #e6e6e3;
  margin: 1rem 0;
  padding: 1rem;
  font-weight: 700;
  text-align: left;
}
.product-info .specs-table td {
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
}
.product-info .specs-table .fa {
  cursor: pointer;
}
.product-info ul li span {
  font-size: 1.5rem;
  font-weight: 400;
}
.product-info .specs-table select {
  font-weight: 400;
  width: 100%;
  border: 2px solid #e6e6e3;
}
.item-specs {
  border: 2px solid #e6e6e3;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.product-info .specs-table .item-price {
  font-size: 2.5rem;
  vertical-align: bottom;
  padding: 0;
}
.product-info .show-more-details-link,
.product-info .show-more-shipping-link {
  color: #525252;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 2px solid #e6e6e3;
  width: 100%;
  text-decoration: none !important;
  font-size: 1.5rem;
  font-weight: 700;
}
.product-info a:hover {
  color: #525252;
}
.more-details .fa {
  margin-right: 1rem;
}
.product-info .show-more-details-content,
.product-info .show-more-shipping-content {
  display: none;
}
.product-info .more-details .fa-minus {
  display: none;
}
.amount-counter td {
  border: 2px solid #e6e6e3;
}
.amount-counter .counter {
  width: 2rem;
  border: none;
  text-align: center;
}
#cart_checkout {
  margin: 0 auto;
}
#cart_checkout .cart {
  margin: 2rem 0 0;
}
.gardening-article {
  margin-top: 14rem;
}
.terms-main {
  width: 1e3px;
  max-width: 100%;
  padding: 1rem 2rem;
  margin: 2rem auto;
}
.terms-main h2 {
  text-align: left;
  font-size: 2.5rem;
}
.become-designer-div {
  text-align: center;
  background-color: #f9f9f9;
  padding: 3rem;
  margin: 2rem 0;
}
.become-designer-div a {
  margin-top: 6rem;
}
.become-designer-div p {
  width: 300px;
  margin: 0 auto 4rem;
}
@media (max-width: 1300px) {
  .intro h2 {
    font-size: 1.5rem;
  }
  .nursery-page .intro {
    padding: 1.3rem 0 0;
  }
  .nursery-page .intro h2 {
    font-size: 1.3rem;
  }
}
@media (max-width: 1100px) {
  .logo {
    margin-left: 0;
  }
  .discount-banner {
    padding: 0;
  }
}
@media (max-width: 1000px) {
  .slider {
    margin-top: 5rem;
  }
  .discount-banner {
    display: block;
    width: 90%;
    margin: 1rem auto;
  }
}
@media (max-width: 950px) {
  .margin-top {
    margin-top: 7rem;
  }
  .comparison-chart table th,
  .comparison-chart table td {
    padding: 0.5rem;
    font-size: 1.2rem;
  }
  .home-page {
    margin-top: 0;
  }
  .slider-intro {
    width: 100%;
  }
  .slider-box,
  .slider__item {
    position: relative;
    margin-top: 0;
  }
  .slider-nav__prev,
  .slider-nav__next {
    position: absolute;
    top: calc(50% - 1.5rem);
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
  }
  .slider-nav__prev {
    left: 3%;
  }
  .slider-nav__next {
    right: 3%;
  }
  .slider-intro {
    position: static;
    left: 0;
    right: 0;
    background: 0 0;
    border: none;
  }
  .slider-intro button {
    margin-left: calc(50% - 7rem);
  }
  .fa-angle-left {
    font-size: 2rem;
    padding-top: 0.5rem;
    padding-right: 0.25rem;
  }
  .fa-angle-right {
    font-size: 2rem;
    padding-top: 0.5rem;
    padding-left: 0.25rem;
  }
  .quote-container {
    position: static;
    display: block;
    width: 90%;
    height: auto;
    padding: 3rem 0;
  }
  .quote-container h2 {
    font-size: 2rem;
  }
  .quote-container input {
    width: 20rem;
    border: 1px solid #525252;
  }
  .home-display {
    width: 100%;
    margin-left: 0;
  }
  .desktop-menu {
    display: none;
  }
  .display-image {
    display: block;
    width: 100%;
    overflow: visible;
  }
  h1 {
    margin: 2rem 8rem;
  }
  .landing-themes-sections h2 {
    margin: 1rem auto;
    font-size: 2rem;
  }
  .landing-themes-sections,
  .nursery-page {
    width: 100%;
  }
  .nursery-page .display-image {
    overflow: hidden !important;
  }
  .intro {
    position: static;
    font-size: 1.2rem;
    padding-top: 0.5rem;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 2rem 0.5rem;
  }
  .intro p {
    text-align: justify;
  }
  .display-image:hover .display-image-img {
    transform: none;
  }
  .display-image .intro {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .display-image:hover .intro {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .display-image:hover h2 {
    display: block;
  }
  .display-image p {
    margin: 0;
    display: block;
    font-size: 1.5rem;
  }
  .services-ul li {
    display: block;
    width: calc(100% - 2rem);
  }
  .product-preview {
    display: block;
    width: 100%;
  }
  .scroll,
  .scroll-2 {
    background: 0 0;
    height: auto;
    margin-bottom: 1rem;
  }
  .gardening-article {
    margin-top: 0;
  }
  .contact-info {
    display: block;
    float: none;
    margin-bottom: 2rem;
  }
  .link-to-design-tool h2 {
    font-size: 2rem !important;
    margin-bottom: 0;
  }
  .link-to-design-tool a {
    font-size: 1.5rem !important;
    padding: 0.5rem 1rem !important;
  }
  .slider-intro {
    top: -14rem;
  }
  .slider-intro:hover {
    transform: none;
  }
  .choose-themes h1 {
    margin-top: 7rem;
  }
  .half-grid:nth-child(even),
  .half-grid:nth-child(odd) {
    display: block;
    float: none;
    margin: 1rem;
    width: calc(100% - 2rem);
  }
}
.questionnaire-background,
.quote-background {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(53, 53, 53, 0.6);
  z-index: 6000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.questionnaire {
  width: 700px;
  overflow-y: auto;
  border-radius: 10px;
}
.questionnaire,
.quote-form,
.create-account {
  margin: 6rem auto;
}
.questionnaire,
.quote-form,
.thank-you-message,
.create-account {
  position: relative;
  background-color: #fff;
  padding: 4rem;
  text-align: center;
}
.questionnaire .fa-times,
.questionnaire .fa-arrow-circle-left {
  position: absolute;
  font-size: 3rem;
  top: 0;
  padding: 2rem;
  cursor: pointer;
  color: #525252;
  transition: 250ms all ease;
}
.questionnaire .fa-times {
  right: 0.5rem;
}
.questionnaire .fa-arrow-circle-left {
  left: 2rem;
}
.questionnaire .fa-times:hover {
  color: #2d5f47;
}
.questionnaire div {
  padding: 0;
}
.thank-you-message {
  margin: 200px 20%;
  padding: 5rem 1rem;
  width: 60%;
  vertical-align: middle;
}
.thank-you-message h3 {
  padding: 2rem 0;
}
.questionnaire h3,
.thank-you-message h3 {
  font-family: frank ruhl libre, serif;
  text-transform: capitalize;
  font-size: 2rem;
  color: #525252;
  padding: 2rem 0;
  margin: 0 4rem;
  border-bottom: 1px solid #a7a9ac;
}
.thank-you-message a {
  color: #525252;
  text-transform: lowercase;
  font-size: 1.5rem;
}
.thank-you-message a:hover {
  color: #525252;
}
.questionnaire p,
.quote-form p,
.thank-you-message p,
.create-account {
  font-size: 1.5rem;
  color: #a7a9ac;
}
.create-account {
  padding-bottom: 0;
}
.questionnaire ul {
  margin: 3rem;
}
.questionnaire ul li {
  display: block;
  text-align: left;
  font-size: 1.5rem;
  padding: 0 1rem;
  list-style: none;
  cursor: pointer;
  color: #525252;
  transition: all 200ms ease;
}
.questionnaire input,
.questionnaire select {
  line-height: 3rem;
  border-radius: 5px;
  margin: 0.5rem;
  border: 1px solid #ccc;
  font-size: 16px;
}
.questionnaire-step-3 ul li,
.questionnaire-step-4 ul li {
  display: inline-block;
  text-align: center;
  height: 130px;
  width: 130px;
}
.questionnaire .form-control:focus,
.questionnaire s.form-control:focus {
  border-color: #a6c7b7;
}
.questionnaire-step-4 ul li input {
  width: 1px;
  margin-right: 0;
}
.questionnaire ul li img,
.quote-form ul li img {
  width: 100%;
  transition: 200ms all ease;
}
.quote-form label,
.create-account label {
  width: 100%;
}
.opacity-selected {
  border: 10px solid #a6c7b7;
}
.questionnaire-button,
.quote-request-button,
.go-back-button {
  display: inline-block;
  left: calc(50% - 50px);
  color: #fff;
  background-color: #525252;
  font-size: 1.5rem;
  text-decoration: none;
  transition: 250ms all ease;
  border-radius: 5px;
}
.questionnaire-button,
.go-back-button {
  padding: 0.5rem 1em;
}
.go-back-button {
  background-color: #d1d2d4;
}
.go-back-button:hover {
  color: #fff;
  background-color: #999;
}
.quote-request-button {
  border-radius: 100px;
  height: 80px;
  width: 80px;
  line-height: 80px;
}
.questionnaire-button:hover,
.quote-request-button:hover {
  background-color: #2d5f47;
}
.questionnaire-button,
.questionnaire-button:focus,
.questionnaire-button:active,
.quote-request-button,
.quote-request-button:focus,
.quote-request-button:active,
.quote-request-button,
.quote-request-button:focus,
.quote-request-button:active {
  color: #fff !important;
  text-decoration: none !important;
}
.questionnaire-step-2 ul li {
  line-height: 5rem;
}
.questionnaire-step-3 ul li,
.questionnaire-step-4 ul li {
  padding: 0;
  cursor: pointer;
  font-size: 1.2rem;
}
.questionnaire-step-2 ul,
.questionnaire-step-5 ul {
  display: inline-block;
  margin-bottom: 3rem;
}
.questionnaire-step-5 {
  margin-bottom: 3rem;
}
.questionnaire-step-5 ul {
  margin-bottom: 3rem;
}
.questionnaire label {
  width: 100%;
  line-height: 4rem;
}
.questionnaire-step-3 input,
.questionnaire-step-4 ul li {
  height: 1rem;
  margin-right: 0;
}
label {
  margin-bottom: 0;
  font-weight: 400;
}
.quote-form ul {
  margin-left: 40px;
}
.four-sections-ul {
  margin: 0 auto;
  text-align: center;
}
.four-sections-ul li {
  display: inline-block;
  width: 24%;
  padding: 1rem;
  vertical-align: top;
}
.four-sections-ul li img {
  width: 100%;
}
.four-sections-ul li h3 {
  text-align: center;
}
.four-sections-ul li p {
  text-align: left;
}
.fixed-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 1.5rem 0.5rem;
  text-align: center;
  border-top: 1px solid #4e5a44;
  font-size: 1.5rem;
}
.fixed-panel div {
  padding: 1rem;
}
.fixed-panel button {
  border: none;
  background-color: #525252;
  color: #fff;
  text-transform: lowercase;
  padding: 0.2rem 1rem;
  outline: none;
}
.fixed-panel button:hover {
  background-color: #4e5a44;
}
.fixed-panel a {
  position: relative;
  padding: 1rem 3rem 1rem 1rem;
}
.fixed-panel a .fa-chevron-right {
  position: absolute;
  display: inline-block;
  top: 1.4rem;
  right: 1rem;
  transition: 250ms all ease;
}
.fixed-panel a:hover > .fa-chevron-right {
  right: 0.5rem;
}
.fixed-panel .fa-chevron-down,
.fixed-panel .fa-chevron-up {
  position: absolute;
  right: 1rem;
  top: 1rem;
  color: #4e5a44;
  cursor: pointer;
  transition: 250ms all ease;
}
.fixed-panel .fa-chevron-down:hover,
.fixed-panel .fa-chevron-up:hover {
  transform: scale(1.3);
}
.fixed-panel .fa-chevron-up {
  display: none;
}
.submit-plant-list p {
  text-align: center;
}
.plant-list-form {
  width: 600px;
  margin: 1rem auto;
}
.plant-list-form input,
.plant-list-form select {
  display: block;
  width: 100%;
  height: 4rem;
  margin: 1rem 0;
  font-size: 1.5rem;
  padding: 0 0.5rem;
  font-size: 16px;
}
.plant-list-form textarea {
  display: block;
  width: 100%;
  margin: 1rem 0;
  font-size: 1.5rem;
  padding: 0 0.5rem;
}
.plant-list-form .file-input {
  padding: 0;
  vertical-align: bottom;
  font-size: 1.2rem;
}
.plant-list-form .upload-or-type {
  text-align: center;
  margin: 4rem 0;
}
.submit-plant-list-button {
  height: 5rem;
}
.product-tile a {
  color: #525252;
}
.product-details a {
  color: #4e5a44;
  margin-top: 1rem;
}
.product-details h2 {
  font-size: 2rem;
  margin-top: 5rem;
}
.checkout-form-container {
  width: 800px;
  margin: 0 auto 6rem;
}
.checkout-form-container form a {
  text-decoration: underline;
}
.checkout-form-container form .fa-minus,
.checkout-form-container form .fa-plus,
.checkout-form-container form .fa-trash-o {
  text-decoration: none;
}
.checkout-form-container form a:hover {
  text-decoration: none;
}
.checkout-form-container form .accepted-cards {
  text-align: left;
  color: #4e5a44;
  padding-left: 0;
}
.checkout-form-container h3 span {
  margin-left: 2rem;
  font-size: 1.5rem;
}
.checkout-form-container form table {
  border: none !important;
}
.checkout-form-container form table td {
  vertical-align: middle;
}
.checkout-form-container .billing table td:nth-child(odd),
.checkout-form-container .contact table td:nth-child(odd),
.checkout-form-container .payment table td:nth-child(odd) {
  text-align: right;
  font-weight: 700;
}
.checkout-form-container form .billing {
  display: none;
}
.checkout-form-container form .form-control:focus {
  border-color: #4e5a44;
  box-shadow: none;
}
.checkout-form-container form td ul {
  margin-bottom: 0;
}
.cvv_help {
  position: relative;
}
.cvv_help div {
  padding-left: 0;
}
.cvv_help img {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100px;
}
.catalog-main h2 {
  text-align: center;
}
.catalog-main .image-wrapper {
  margin-bottom: 2rem;
}
.grey-bg {
  background-color: #f9f9f9;
}
.application-main {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #f9f9f9;
  text-align: center;
  background-color: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 2px 1px 10px #00000026;
}
.application-main h3 {
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #848484;
}
.application-main h2:first-child {
  margin-bottom: 3rem;
}
.application-main .login-form {
  padding-top: 0;
}
.application-main .login-form table {
  width: 100%;
}
.application-main .login-form h3 {
  text-align: right;
  text-transform: capitalize;
  padding-right: 1rem;
}
.application-main span {
  font-style: italic;
}
.application-form {
  width: 800px;
  margin: 2rem auto;
  text-align: right;
}
.application-form {
  display: block;
  width: 50%;
}
.application-form h3 {
  text-align: left;
}
.application-form td {
  padding: 0.25rem;
}
.application-form td:nth-child(even) {
  width: 55%;
}
.application-form td:nth-child(odd) {
  font-weight: 700;
}
.application-form .no-border {
  border: none;
}
.application-form button {
  margin-top: 2rem;
  width: 100%;
}
.login-form {
  display: block;
  margin: 5rem auto;
  width: 400px;
  padding: 2rem;
  text-align: center;
}
.login-form img {
  width: 200px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}
.login-form div {
  padding: 2rem 3rem 2rem 2rem;
}
.login-form table {
  width: 100%;
}
.login-form input,
.login-form select {
  width: calc(100% - 4rem);
  margin: 1rem auto;
  height: 4rem;
  padding: 0 1rem;
  font-size: 2rem;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.packages-main {
  margin-top: 13rem;
}
.packages {
  width: 800px;
  margin: 2rem auto;
  border-collapse: collapse;
}
.packages td {
  border: 1px solid #749067;
  padding: 2rem;
}
.login-form select:focus {
  outline: none;
}
.login-form h3 {
  font-size: 1.5rem;
  margin: 1rem auto 0;
}
.login-form .remember-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.login-form a {
  display: block;
  color: #4e5a44;
  text-decoration: underline;
}
.login-form a:hover {
  text-decoration: none;
}
.login-form span {
  display: block;
  margin: 2rem auto;
}
.login-button,
.packages a,
.green-button {
  background-color: #4e5a44;
  color: #fff;
  border: 2px solid #4e5a44;
  transition: 250ms all ease;
}
.packages a {
  display: inline-block;
  padding: 1rem 2rem;
}
.themes-grid {
  text-align: center;
  padding-top: 4rem;
}
.themes-grid a {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 3rem;
}
.themes-grid .display-image {
  width: 100%;
  border: 1px solid #c9d3bd;
}
.themes-grid .display-image img {
  border: 1rem solid #f9f9f9;
}
.login-form div {
  padding: 1rem;
}
.login-form {
  width: 100%;
  margin: 0;
}
h2 {
  margin-top: 3rem;
}
.testimonials ul {
  width: 1e3px;
  margin: 2rem auto;
  font-style: italic;
}
.testimonials ul li {
  display: inline-block;
  width: 49%;
  vertical-align: top;
  padding: 4rem;
}
.testimonials ul p {
  font-size: 1.5rem;
}
.testimonials ul span {
  display: block;
  text-align: right;
}
.testimonials ul li img {
  float: left;
  width: 9rem;
  padding: 0 1rem;
}
@media (min-width: 800px) {
  .login-form {
    width: 100%;
  }
  .login-form table {
    width: 49%;
    vertical-align: top;
    margin: 0 auto;
  }
  .login-form input,
  .login-form select {
    width: calc(100% - 1rem);
    margin: 1rem auto;
    padding: 0.5rem;
    font-size: 1.6rem;
  }
}
@media (max-width: 1200px) {
  .four-sections-ul {
    width: 1e3px;
  }
  .slider {
    height: auto;
  }
}
@media (max-width: 1000px) {
  .thank-you-message {
    margin-top: 5rem;
  }
  .plant-source-intro {
    display: block !important;
    position: static;
    width: 100%;
    text-align: center;
    height: auto;
    left: 0;
    bottom: 0;
    margin-left: 0;
    padding: 2rem 0.5rem;
    text-align: left;
  }
  .plant-source-intro button {
    display: block;
    margin: 0 auto;
  }
  .four-sections-ul {
    width: 800px;
  }
  .nursery-page .intro {
    padding: 0.5rem 0 2rem;
  }
  .testimonials ul {
    width: 100%;
  }
  .testimonials ul li {
    width: 100%;
  }
}
@media (max-width: 950px) {
  .slider-nav__dots {
    display: none;
  }
  .packages-main {
    margin-top: 7rem;
  }
}
@media (max-width: 800px) {
  p,
  li {
    font-size: 1.8rem;
  }
  .security-badges {
    padding: 0.5rem;
    width: 100%;
  }
  .money-back-badge {
    width: 80%;
    margin: 0 auto;
  }
  .login-form {
    padding: 0;
  }
  .login-form div {
    padding: 1rem 0;
  }
  .design-service-sections .show-questionnaire-button {
    display: none;
  }
  .first-article {
    padding: 0 1rem;
  }
  .first-article h1 {
    margin-top: 1rem;
    border-top: 3px solid #4e5a44;
    padding-top: 1rem;
  }
  .landing-themes-sections {
    padding: 1rem;
  }
  .landing-themes-sections a {
    margin-left: 0;
  }
  .four-sections-ul {
    width: 500px;
  }
  .four-sections-ul li {
    display: block;
    width: 100%;
  }
  .slider-intro p {
    padding: 0 0.5rem;
  }
  .design-service-sections ul {
    width: 100%;
  }
  .design-service-sections ul li {
    display: block;
    width: 100%;
    padding: 0;
  }
  .design-service-sections ul .desktop-image {
    display: none;
  }
  .design-service-sections ul .mobile-image {
    display: block;
    width: 50%;
    text-align: center;
    margin: 0 auto;
  }
  .design-service-sections h3 {
    text-align: center;
  }
  .design-service-sections p {
    padding: 1rem;
  }
  .design-service-intro {
    width: 100%;
    text-align: left;
    padding: 1em;
  }
  .design-service-intro h2 {
    margin-top: 0;
  }
  .design-service-intro article {
    display: block;
    width: 100%;
    padding: 1rem;
  }
  .browse-styles {
    width: 100%;
  }
  .browse-styles li {
    width: 49%;
  }
  .browse-styles li img {
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    padding: 0.5rem;
  }
  .theme-pop-up {
    width: 100%;
    margin: 0;
  }
  .theme-pop-up div,
  .theme-pop-up article {
    display: block;
    width: 100%;
  }
  .theme-pop-up .image {
    display: block;
    width: 100%;
    height: 50%;
  }
  .theme-pop-up article {
    padding: 0;
  }
  .design-service-sections {
    padding-bottom: 0;
  }
  .see-more-link {
    display: inline-block;
    margin: 0 2rem 2rem 1rem;
  }
  .half-grid .slider-intro {
    width: 20rem;
    left: calc(50% - 10rem);
  }
  .theme-pop-up-wrapper {
    top: 5rem;
  }
  .theme-pop-up .fa-times {
    right: 2rem;
  }
  .product-info .images {
    height: auto;
    width: 100%;
    text-align: center;
  }
  .product-info .main-image {
    margin: 1rem auto;
  }
  .product-info h3 {
    text-align: center;
  }
  .card-back table {
    display: table;
    width: 100%;
    margin: 2rem auto;
  }
  .card-back table tr td {
    width: 50%;
  }
  .card-back img {
    padding: 0;
    width: 300px;
  }
  .checkout-page-body {
    margin-top: 0;
  }
  .checkout-form-container {
    width: 100%;
    padding: 0 1rem;
  }
  .checkout-form-container .billing table td:nth-child(odd),
  .checkout-form-container .contact table td:nth-child(odd),
  .checkout-form-container .payment table td:nth-child(odd) {
    display: none;
  }
  .terms-main h2 {
    font-size: 2rem;
  }
  .application-main {
    width: 100%;
    padding: 1rem;
    box-shadow: none;
    border-radius: ;
  }
  .application-form {
    width: 100%;
  }
  .packages {
    width: 100%;
  }
  .choose-themes p span {
    display: inline-block;
  }
  .four-sections-ul li img {
    width: 300px;
  }
  .login-form img {
    display: none;
  }
  .browse-styles-banner {
    height: auto;
    background-image: none;
    margin-bottom: 0;
  }
  .browse-styles-banner section {
    position: static;
    padding: 1rem;
  }
  .browse-styles-banner section h2 {
    margin-top: 2rem;
  }
  .browse-styles-section h3 {
    margin-top: 4rem;
  }
  .design-service-intro-box {
    height: auto;
  }
}
@media (max-width: 700px) {
  h2 {
    font-size: 2rem;
  }
  .landing-themes-sections {
    background-color: #fff;
  }
  .design-service-sections h2 {
    padding: 2rem 0;
  }
  .slider-intro h2 {
    font-size: 2rem;
  }
  .index-intro p {
    font-size: 1.5rem;
  }
  .questionnaire-step-3 ul li,
  .questionnaire-step-4 ul li {
    display: inline-block;
    width: 110px;
    margin-bottom: 1rem;
    vertical-align: top;
    height: auto;
    font-size: 1rem;
  }
  .questionnaire-step-2 ul li {
    line-height: 4rem;
  }
  .questionnaire h3 {
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 0 1rem;
  }
  .questionnaire p {
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 1rem;
    margin-top: 0.5rem;
  }
  .questionnaire ul {
    margin: 2rem auto 4rem;
  }
  .fixed-panel span {
    display: block;
    width: 100%;
  }
  .fixed-panel a {
    display: block;
    margin-top: 0.2rem;
  }
  .plant-list-form {
    width: calc(100% - 2rem);
    margin: 1rem;
  }
  .plant-list-form input {
    height: 4rem;
    margin: 1rem 0;
  }
  .questionnaire,
  .quote-form,
  .thank-you-message,
  .create-account {
    padding: 2rem 0;
    width: 96%;
  }
  .questionnaire .fa-times {
    font-size: 2rem;
    right: 0;
    padding: 1rem;
  }
  .plant-list-form .upload-or-type {
    margin: 2rem 0;
  }
  #cart_checkout .cart .table {
    width: 100%;
  }
  .table-responsive {
    font-size: 10px;
  }
  .shipping-row .shipping_select {
    font-size: 10px;
    padding: 0;
  }
  .cart .table > tbody > tr > td,
  .cart .table > tbody > tr > th {
    padding: 13px 5px;
  }
  .cart .fa {
    font-size: 17px;
  }
  .cart .fa.pull-left,
  .cart .fa.pull-right {
    margin: 0;
  }
  .mobile-badges {
    display: block;
  }
  .desktop-badges {
    display: none;
  }
  .security-badges {
    width: 100%;
  }
}
@media (max-width: 550px) {
  .four-sections-ul {
    width: 100%;
  }
  .four-sections-ul li {
    padding: 1rem;
  }
  .choose-themes .slider-intro {
    padding: 1rem;
  }
  .choose-themes .slider-intro h2 {
    font-size: 2rem;
    padding: 0;
  }
  .half-grid .slider-intro {
    top: calc(50% - 4rem);
  }
  .product-info .main-image {
    width: 240px;
    height: 240px;
  }
  .product-info .thumbnails li {
    width: 36px;
    height: 36px;
  }
  .nursery-page .intro h2 {
    font-size: 1rem;
  }
  .login-form {
    width: 100%;
  }
  .design-service-intro ul {
    display: block;
    width: 100%;
    padding: 0 2rem;
  }
}
@media (max-width: 600px) {
  h1 {
    margin: 2rem auto;
  }
  .landing-themes-sections div:not(.line) {
    width: 100%;
  }
  .landing-themes-sections img {
    width: 100%;
  }
  .desktop-image {
    display: none;
  }
  .mobile-image {
    display: block;
  }
  .nursery-page a,
  .nursery-page .non-plants-categories a {
    width: 65%;
    margin: 0;
  }
  .nursery-page h3 {
    display: block;
    position: static;
    font-size: 1.2rem;
  }
  .nursery-page a:hover .display-image-img {
    transform: scale(1);
  }
  .landscaping-quote,
  .gardening-page {
    padding-top: 5rem;
  }
  .landing-themes-sections div img,
  .landing-themes-sections img {
    padding: 2rem 0;
  }
  .products-grid li h3 {
    font-size: 18px;
  }
}
.questionnaire-background,
.quote-background {
  display: none;
}
.questionnaire-step-1,
.questionnaire-step-2,
.questionnaire-step-3,
.questionnaire-step-4,
.questionnaire-step-5,
.questionnaire-step-5,
.questionnaire-step-6,
.questionnaire-step-7,
.questionnaire-step-8 {
  display: none;
}
a {
  cursor: pointer !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1e3px white inset !important;
}
input:active:-webkit-autofill {
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1e3px white inset !important;
}
.free-apt-form {
  margin-bottom: 4rem;
}
input:focus,
form:focus {
  outline: none !important;
  box-shadow: none !important;
}
.no-scroll {
  overflow: hidden;
}
.filters-container {
  text-align: center;
}
.filter {
  display: inline-block;
  margin: 1rem;
  border: 1px solid #ccc;
  padding: 0 10px;
  text-align: left;
}
.filter h4 {
  text-transform: uppercase;
  font-size: 14px;
}
.installation-main {
  text-align: center;
}
.installation-main h3 {
  font-size: 2rem;
  margin: 1rem auto 3rem;
}
.installation-main ul {
  display: inline-block;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: left;
  max-width: 600px;
  margin-left: 5rem;
  list-style: circle;
}
.installation-main ul li {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.installation-main .button {
  margin: 2rem auto;
}
.installation-main img {
  max-width: calc(100% - 2rem);
}
@media (max-width: 500px) {
  .installation-main ul {
    margin-left: 2rem;
  }
  .installation-main ul li {
    font-size: 1.4rem;
  }
  .installation-main img {
    width: calc(100% - 2rem);
  }
}
.custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 19px;
  margin-bottom: 12px;
  margin-right: 1rem;
  cursor: pointer;
  font-size: 14px;
  color: #7b7979;
  text-transform: uppercase;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #dad7d7;
}
.custom-checkbox:hover input ~ .checkmark {
  background-color: #e2e2e1;
}
.custom-checkbox input:checked ~ .checkmark {
  background-color: #4e5a44;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}
.custom-checkbox .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (max-width: 1000px) {
  .filters-container {
    text-align: left;
    margin: 0 1rem;
  }
  .custom-checkbox .checkmark:after {
    border-width: 0 3px 3px 0;
  }
}
.cart-custom-amount-wrapper .cart-custom-amount {
  display: inline-block;
  width: 50px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.cart-custom-amount-wrapper .fa.pull-right,
.cart-custom-amount-wrapper .fa.pull-left {
  margin-top: 0.9rem;
}
.search-bars-wrapper {
  padding: 0 1rem;
}
.search-bar,
.zipcode-search-bar {
  display: inline-block;
}
.search-form input,
.zipcode-search-form input {
  width: 300px;
  right: 5px;
  font-size: 16px;
  padding: 10px 40px 10px 10px;
  margin: 5px 0;
  z-index: 9;
  right: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.filtersubmitfa {
  position: relative;
  z-index: 1;
  left: -35px;
  top: 1px;
  color: rgb(41, 41, 41);
  cursor: pointer;
  width: 0;
  font-size: 20px !important;
  transition: 200ms all ease;
}
.filter-fa-zip {
  font-size: 22px !important;
}
.filtersubmitfa:hover {
  color: #333;
}
@media (max-width: 700px) {
  .search-bar,
  .zipcode-search-bar {
    display: block;
  }
  .search-form input,
  .zipcode-search-form input {
    width: 100%;
  }
}
.page-numbers {
  text-align: center;
}
.page-numbers ul li {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  font-size: 1.4rem;
  padding: 1rem;
  border-radius: 100%;
}
.page-numbers .current-page {
  font-weight: 700;
  background-color: #f3f3f3;
}
.plants-filter {
  position: relative;
  min-width: 300px;
  max-width: 1100px;
  padding: 0 20px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgb(111 111 111/0.6);
}
.plants-filter .fa-times {
  display: none;
  position: absolute;
  font-size: 30px;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
}
.filter-heading {
  position: relative;
  text-align: center;
  padding-right: 13px;
  font-size: 18px !important;
  cursor: pointer;
}
.filter-heading .fa {
  font-size: 12px;
  position: absolute;
  top: 5px;
  right: -4px;
  transition: 200ms all ease;
}
.filter-heading:hover > .fa {
  right: -7px;
}
.filter-hidden {
  display: none;
  width: 100%;
}
.close-filter-button {
  display: block;
  max-width: 300px;
  margin: 2rem auto;
  background-color: #333;
  text-align: center;
  padding: 1rem;
  font-size: 18px;
  color: #fff !important;
  text-transform: uppercase;
}
.plants-filter label {
  display: inline-block;
}
.plants-filter img {
  display: block;
  width: 165px;
}
.plants-filter div {
  padding-left: 22px;
  padding-top: 4px;
}
.plants-filter .checkmark {
  top: 171px;
  left: 20px;
}
@media (max-width: 700px) {
  .plants-filter {
    width: calc(100% - 2rem);
  }
  .plants-filter .fa-times {
    top: 0.3rem;
  }
  .plants-filter label {
    display: block;
    margin-bottom: 2rem;
  }
  .plants-filter img {
    display: inline-block;
    width: 50px;
    margin-left: 20px;
  }
  .plants-filter custom-checkbox {
    margin: 0 0 1rem;
  }
  .plants-filter div {
    float: right;
    display: inline-block;
    width: calc(100% - 70px);
    padding-top: 15px;
  }
  .plants-filter .filter-hidden {
    padding-left: 0;
  }
  .plants-filter .checkmark {
    left: 0;
    top: 12px;
    height: 24px;
    width: 25px;
  }
  .plants-filter .checkmark:after {
    top: 1px;
    left: 7px;
    width: 9px;
    height: 18px;
  }
  .plants-filter .filter-hidden {
    display: none;
    width: 100%;
  }
}