/* -----------------------------------------------------------
   # Brand Guidelines
   -------------------------------------------------------- */
/*

 Type Faces (Alternate)
 ----------------------
 Headings       Montserrat - 700
 Subheading     Montserrat - 300
 Body           Merriweather - 500 (Lato, Verdana)

Oswald - 700

Color Pallet

Green Darkest   #112e1d
Green Dark      #2f4b3c
Green           #436554
Green Light     #648570
Green Accent    #339966
Gray            #666666
Tan             #f0eae5
White           #ffffff

 Primary Colors
 ----------------------
 Green          #112e1d
 Brown          #362717

 ## Secondary Colors
 ----------------------
 Light Green    #2f4b3c
 Peach          #ff914d
 Orange         #d6860d
 Dark Gray      #8f8e8e
 Light Gray     #d9d9d9
 Black          #000000
 White          #ffffff

 ## Green Colors (Light to dark)
 ----------------------
White           #f4ece7
Green 0         #b7d3b2
Green 1         #638670
Green 2         #5b7c67
Green 3         #436653
Green 4         #254c3b
Green 5         #06301b

*/

:root {
  --primary:         #254c3b;
  --primary-lighter: #5b7c67;
  --primary-dark:    #06301b;
  --primary-light:   #436653;
  --secondary-dark:  #b0320aff;
  --secondary-darker:#892100ff;
  /*--secondary:       #006c33ff;*/
  --secondary:       #c87717ff;
  --secondary-light: #8ac6a8;
  /*--tan:             #ece7e2;*/
  --tan:             #ffcf97ff;
  --black:           #000000;
  --gray:            #666666;
  --gray-tan:        #9b9691;
  --white:           #f4ece7;

  --brown-gray:     #464442;
  --peach:          #254c3b;
  --peach-dark:     #e88548;
  --peach-darker:   #b65e29;
  --tan-light:      #e6c587;
  --tan-dark:       #ccb891;
  --gray-lighter:   #67a0bf70;
  --gray-light:     #d9d9d9;
  --gray-dark:      #8f8e8e;
}

/* -----------------------------------------------------------
   # Fonts
   -------------------------------------------------------- */
/**
 * @license
 * MyFonts Webfont Build ID 4193443, 2021-10-12T09:03:55-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Panton-Bold by Fontfabric
 * URL: https://www.myfonts.com/fonts/font-fabric/panton/bold/
 * Copyright: Copyright (c) 2018 by Fontfabric LLC. All rights reserved.
 *
 * Webfont: Panton-Heavy by Fontfabric
 * URL: https://www.myfonts.com/fonts/font-fabric/panton/heavy/
 * Copyright: Copyright (c) 2018 by Fontfabric LLC. All rights reserved.
 *
 * Webfont: CerebriSans-Book by Hanken Design Co.
 * URL: https://www.myfonts.com/fonts/hanken-designco/cerebri-sans/book/
 * Copyright: Copyright © 2020 by Alfredo Marco Pradil and Hanken Design Co. All rights reserved.
 *
 *
 *
 * © 2021 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3ffca3");

@font-face {
    font-family: "Panton";
    src: url('webFonts/PantonBold/font.woff2') format('woff2'), url('webFonts/PantonBold/font.woff') format('woff');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "Panton";
    src: url('webFonts/PantonHeavy/font.woff2') format('woff2'), url('webFonts/PantonHeavy/font.woff') format('woff');
    font-style: normal;
    font-weight: 900;
}
@font-face {
    font-family: "CerebriSans";
    src: url('webFonts/CerebriSansBook/font.woff2') format('woff2'), url('webFonts/CerebriSansBook/font.woff') format('woff');
    font-style: normal;
    font-weight: 400;
}

/* -----------------------------------------------------------
   # Global
   -------------------------------------------------------- */

html,body { -webkit-text-size-adjust:none; }

body {
    background: var(--primary-dark);
    color: var(--white);
    margin: 0;
    font-family: CerebriSans, Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

h1, h2, h3, h4, h5 {
    color: var(--primary);
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
    font-weight: 700;
    margin: 1em 0;
}

h1 {
    font-weight: 900;
    color: var(--black);
    letter-spacing: .05em;
}

h2 {
    font-size: 1.2em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

::selection {
    background-color: #f7e4c1c2;
}

a,
footer .social a svg {
    color: var(--secondary);
    text-decoration: none;
}

/*a:visited {*/
    /*color: var(--gray);*/
/*}*/

header a,
footer .social a:visited svg {
    color: var(--tan-dark);
}

header a,
footer a {
    color: var(--white);
}

a:hover,
.active > a {
    color: var(--peach);
}

footer .active > a,
header a:hover,
footer a:hover,
footer .social a:hover svg {
    /*color: var(--secondary);*/
    color: #ffbc6c;
}

input, select, textarea {
    background: var(--primary);
    color: #fff;
    border-radius: .4em;
    border: solid var(--primary-light) 1px;
    padding: .25em;
    margin: .25em;
    font-family: sans-serif;
    font-size: 1em;
}

main input, main select, main textarea {
    background: #fff;
    color: var(--secondary);
    border: solid var(--secondary) 1px;
}

textarea::placeholder, input::placeholder {
    color: #fffb;
    opacity: 1;
}

main textarea::placeholder, main input::placeholder {
    color: var(--gray);
}

legend, label {
    color: var(--secondary-dark);
    margin: 0 .5em;
    font-weight: bold;
    font-size: .7em;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: left;
}

main legend, main label {
    font-size: .9em;
}

fieldset.radio input {
    margin: 0;
    vertical-align: text-bottom;
}

fieldset.radio label {
    color: unset;
    font-weight: unset;
    text-transform: unset;
    letter-spacing: unset;
    font-size: .8em;
}

fieldset {
    border-color: var(--primary-light);
    border-radius: .4em;
    border-width: 1px;
    border-style: solid;
    text-align: left;
}

header {
    background-color: #638670;
    background-image: url("/img/template/trees2.png");
    /*background-size: cover;*/
    background-repeat: no-repeat;
    /*background-position: 0 0;*/
    /*background-position: 0 top;*/
    background-position: bottom;
    background-size: 100%;
    /*background-attachment: fixed;*/
    min-height: 12em;
    /*height: 40em;*/
}

header > .wrapper.crates {
    /*min-height: 28em;*/
}

header > .wrapper.bar {
    /*background: #000e;*/
    /*color: var(--white);*/
    /*text-align: right;*/
    height: 2em;
    padding: 1em 0;
    line-height: 2em;
}

header > .wrapper.nav {
    /*background: var(--primary-dark);*/
    /*padding: 1em 0;*/
}

header .wrapper.bar div {
    margin: 0 1em;
}

header address {
    float: right;
    line-height: 1em;
    font-size: .8em;
    font-style: normal;
    margin-top: -0.5em;
}

header address a {
    display: inline-block;
}

header address .label {
    margin: .75em;
    display: inline-block;
    vertical-align: middle;
}

header address .value {
    display: inline-block;
    vertical-align: middle;
}

header .wrapper.bar i {
    color: var(--primary-light);
    font-weight: 900;
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
    font-size: .65em;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
    font-style: normal;
    display: none;
}
header .wrapper.bar i span {
    color: #7aa288;
}

header .wrapper.nav .logo {
    position: absolute;
    top: 4px;
    margin-left: 1em;
    z-index: 1;
}

header nav .logo img {
    width: 10em;
    height: auto;
}

header ul {
    margin: 0;
    padding: .25em 0;
    text-align: center;
    font-size: .9em;
    flex: 1;
}

header li {
    display: inline-block;
}

header li a {
    margin: .5em .5em;
    padding: .25em .5em;
    display: inline-block;
    border: 1px solid var(--primary);
    border-bottom-width: 2px;
    box-shadow: 0 2px 3px  #0002;
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
    font-weight: 700;
    background: #ffbc6c;
}

header li a,
header li a:visited {
    color: var(--black);
}

header li > a:hover,
header ul li.active > a {
    color: var(--white);
    border-bottom-color: var(--primary);
    background: #c87717;
}


header li a:active {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
}

header address .value {
    display: none;
}

nav ul ul {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  width: 0;
  z-index: 100;
  transition: visibility 100ms, opacity 100ms ease-in-out;
}

nav ul ul li {
  visibility: hidden;
}



nav li:hover > ul, nav li:active > ul, nav li:focus > ul {
  opacity: 1;
  height: auto;
  width: auto;
}

nav li:active > ul,
nav li:hover > ul,
nav li:hover > ul li, nav li:active > ul,
nav li:active > ul li, nav li:focus > ul,
nav li:focus > ul li {
  visibility: visible;
  display: block;
}

nav li.hidden > ul {
    display: none;
}

nav ul ul {
    /*background-color: #112e1ddb;*/
    border-top: .2em solid var(--primary);
    margin-top: -.65em;
    box-shadow: 3px 6px 3px  #0005;
    text-align: left;

    background-color: var(--primary);
    /*background-image: url("/img/background-trees-alpha.png");*/
    background-position: 1px top;
    background-size: 30em;
    background-repeat: repeat-x;

}

nav ul li:hover > ul, nav ul li:active > ul, nav ul li:focus > ul {
    position: absolute;
    right: 5%;
    left: 5%;
    top: unset;
}

nav ul ul li,
nav ul ul a {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
}


nav ul ul li a {
    display: block;
    padding: 1em 1em;
    /*margin: 1em 0;*/
    border-left: .3em solid transparent;
}

nav ul ul li.active a,
nav ul ul li a:focus,
nav ul ul li a:focus,
nav ul ul li a:hover {
    border-left-color: var(--peach);
}


/* pagination.html: https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */
.pagination {
    clear: both;
    margin: 3rem 0;
    text-align: center;
}

.pagination li {
    display: inline-block;
    margin-right: .375rem;
    font-size: .875rem;
    margin-bottom: 2.5em;
}
.pagination li a {
    padding: .5rem .625rem;
    background-color: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
}
.pagination li.disabled {
    display: none;
}
.pagination li.active a:link,
.pagination li.active a:active,
.pagination li.active a:visited {
    background-color: #ddd;
}


/* SPERLING STYLES MARK */
.columns {
    display:flex;
    margin: 0px -15px;
    flex-wrap:wrap;
}

.column{
    padding: 0px 15px;

}
.column.is-6-desktop {
    width:50%;
}

.logos-list {
    display:flex;flex-wrap: wrap;
    list-style:none;
    padding:0px;      justify-content: space-around;
    align-items: center;
    margin-bottom: 0px;
}
.logos-list li {
    max-width:200px;
    margin-bottom: 20px;
}
.logos-list li  a{
    display:block;
}
.column.video-column-custom-style {
    display:flex;flex-direction:column;justify-content:space-between;
}


blockquote {
color: var(--primary);    font-size: 2rem;
font-weight: bold;
line-height: 1.3;font-family: "Panton";
}

.mgb-25 {
    margin-bottom: 25px;
}

.mgt-25{
    margin-top: 25px;
}



.spec-services-page-list {
    list-style:none;

}

.spec-services-page-list li {
    position:relative;
    padding-left:25px;
}
.spec-services-page-list li i {
    position:absolute;
    left:0px;
    top:5px;
}
.services.spec-list a {
    padding: 35px 0px;
    cursor:pointer;
}
.services.spec-list a i {
    font-size:4rem;
    color: var(--tan);
    margin-bottom: 15px;
}

.section.no-flex {
    display:block;
}

.section.no-flex h2 {
    width: 100% !important;
}


/* mobile */
@media only screen and (min-width : 320px) {
    .column.is-6-desktop.is-12-mobile {
        width:100%;
    }
    .columns {
       flex-wrap:wrap;
    }
    .video-column-custom-style video {margin-top: 25px;}

    /*.wrapper.hero.About,*/
/*.wrapper.hero.Contact {*/
    /*background-image: url('../cover.jpg');*/
    /*background-position: center center;*/
/*}*/
}

/* Desktop Styles */
@media only screen and (min-width : 750px) {
    .video-column-custom-style video {margin-top: 0px;}
    .columns {
        flex-wrap:initial;
    }
    .column.is-6-desktop.is-12-mobile {
        width:50%;
    }
    nav ul li:hover > ul,
    nav ul li:active > ul,
    nav ul li:focus > ul {
        width: unset;
        min-width: 10em;
        left: unset;
        right: unset;
    }

    nav ul ul {
        position: absolute;
        top: 100%;
    }

    nav ul ul {
        border-top: 4px solid var(--primary);
        margin-top: -3px;
        display: block;
    }

    nav > ul > li > a {
        transition: border-color 100ms;
    }

    header li.has-children a:hover {
        border-bottom-color: transparent;
    }

    header nav {
        display: flex;
    }


    header address .value {
        margin-right: 1em;
        display: inline-block;
        text-shadow: 0 2px 3px  #000;
    }

    header .wrapper.bar i {
        display: inline-block;
    }

    header ul {
        text-align: right;
        padding: 0;
        padding-right: .5em;
    }

    header li {
        margin: 1em 0 0 2%;
    }

    header li a {
        border: none;
        border-bottom: .3em solid #fff0;
        /*padding: 2em 0;*/
        padding: .5em .5em .25em .5em;
        margin: 0;
        box-shadow: none;
    }

    header .wrapper.bar i,
    header .wrapper.nav .logo {
        width: 250px;
    }

    header .wrapper.nav .logo {
        /*text-align: center;*/
        position: unset;
        top: unset;
        /*margin-bottom: -2.5em;*/
        margin-top: -3em;
        margin-left: 0;
        padding-left: 1em;
        background-color: var(--primary);
        border-radius: .4em;
        /* clip-path: polygon(50% 100%, 100% 70%, 100% 0, 0 0, 0 70%); */
    }

    header nav .logo a {
        display: inline-block;
    }

    header nav .logo img {
        width: 120px;
        height: auto;
        margin-top: .5em;
    }

    header a svg {
        color: var(--white);
    }

}

main {
    background: var(--white);
    color: var(--black);
    font-size: .9em;
    padding-top: 1px;
    padding-bottom: 15%;
    background-image: url("/img/footer3.svg");
    background-position: 1px bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

main div {
    line-height: 1.6em;
    color: var(--brown-gray);
}

main > .wrapper {
    margin-right: 1em;
    margin-left: 1em;
}

main img {
    max-width: 100%;
    height: auto;
    margin: auto;
}

main .categories {
    border: none;
    margin: 0;
    padding: 0;
    list-style: square;
    display: block;
    margin-bottom: 1em;
}

main .categories li {
    display: inline-block;
}

div.wrapper.video {
    position: relative;
}

div.wrapper.video video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
}

footer {
    font-size: .9em;
    padding-bottom: 4em;
    background-color: #482700ff;
    background-image: url("/img/template/dirt.png");
    background-size: 50%;
    margin-top: -1px;
    padding-top: 1px;
}

footer h3 {
    color: var(--tan);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 900;
}

footer > div {
    text-align: center;
}

footer .slogan {
    text-align: center;
    color: var(--primary-lighter);
    font-weight: 900;
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
    font-size: 1.25em;
    letter-spacing: .15em;
    line-height: 1.5em;
    text-transform: uppercase;
    margin-top: 4em;
    margin-bottom: 4em;
}

footer .slogan span {
    color: var(--primary-light);

}

footer .logo {
    margin: 4em 0;
    display: block;
}


footer .logo img {
    width: auto;
    height: 10em;

}

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

footer li {
    font-size: 1em;
    display: block;
    margin-bottom: 2em;
    text-transform: uppercase;
}

footer li.social {
    margin-top: 3em;
}

footer li.social a {
    margin-left: 1em;
}

.footer-nav .value {
    display: inline-block;
    text-align: left;
    line-height: 1;
    margin-left: .5em;
}

.footer-nav > ul,
.footer-nav > ul svg {
    color: var(--gray-light);
}

footer nav {
    clear: both;
    border-top: .2em solid var(--brown-gray);
    border-bottom: .2em solid var(--brown-gray);
    letter-spacing: .05em;
    font-weight: 700;
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
}

footer nav ul {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

footer nav li {
    font-size: 1em;
}

footer nav a {
    font-weight: 700;
    display: block;
}

footer hr {
    border-style: none;
}

footer .team,
footer .createdby {
    text-transform: uppercase;
    font-size: .9em;
    color: var(--gray-dark);
    letter-spacing: .05em;
    margin: 2em 0;

}

footer .createdby a {
    color: var(--gray-light);
    font-weight: bold;
}

footer .createdby {
    opacity: .70;
}

.contact_form .extra,
footer form .extra {
    display: none;
}

footer form {
    margin: 0 1em;
}

.contact_form > div,
footer form > div {
    width: 100%;
}

.contact_form > div input,
.contact_form > div textarea,
.contact_form > div select,
footer form > div input,
footer form > div textarea,
footer form > div select {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

.contact_form > div textarea,
footer form > div textarea {
    height: 5em;
}

.contact_form button,
footer form button {
    width: 100%;
    margin: 1em 0;
}

.contact_form > div > div > *,
footer form > div > div > * {
    display: block;
}


.contact_form > div label,
footer form > div label {
    margin-top: 1em;
}

fieldset.radio label {
    font-size: 1em;
}

.contact_form fieldset input,
footer form fieldset input {
    margin: .5em;
}

footer h3 {
    font-size: 1.2em;
}

footer legend, footer label {
    color: var(--tan);
}



/* -----------------------------------------------------------
   # Pages
   -------------------------------------------------------- */


div.hero {
    margin: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--primary-dark);
}

div.hero time {
    color: var(--white);
}

div.hero.blog {
    margin-top: 1em;
}

div.hero > div > div {
    background: #06301bbd;
    padding: 2em 2em 1px 2em;
    position: relative;
    margin-bottom: 2em;

}

div.hero h1 {
    font-size: 1.8em;
    line-height: 1.25em;
    text-transform: uppercase;
    color: var(--tan);
    margin: .5em 0 1em;
}

div.hero span {
    color: var(--secondary);
    font-size: .8em;
    letter-spacing: .1em;
}

button,
div.hero .btn,
div.reviews .btn,
main .categories .btn {
    color: var(--white);
    background: var(--secondary-dark);
    padding: .8em 1em;
    border: none;
    border-right: .4em solid var(--secondary-darker);
    display: inline-block;
    margin: -1em 0;
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
    font-weight: 700;
    transition-property: background, border;
    transition-duration: 100ms;
}

main .categories .btn {
    font-size: .8em;
    border: none;
    padding: .2em .4em;
    margin: .4em .3em;
}

button {
    border: .25em solid var(--secondary-dark);
    font-weight: 700;
    font-size: 1.2em;
    padding: .5em 2em;
}

div.reviews .btn {
    margin: .3em;
}

button:hover,
div.hero .btn:hover,
div.reviews .btn:hover,
main .categories .active .btn,
main .categories .btn:hover {
    color: var(--tan);
    background: var(--secondary-darker);
    border-color: var(--secondary-dark);
}

button:active,
div.hero .btn:active,
div.reviews .btn:active,
main .categories .btn:active {
    color: var(--tan);
    background: var(--secondary-dark);
    border-color: var(--secondary-darker);
}

#estimate-button {
    color: var(--white);
    background: var(--secondary-dark);
    font-family: Panton, Futura, "Century Gothic", "Arial Black", Impact, Geneva, sans-serif;
    font-weight: 700;
    transition-property: background, border;
    transition-duration: 100ms;
    padding: .5em .75em;
    margin: .25em;
    font-size: .9em;
    text-transform: uppercase;
    letter-spacing: .20em;
    border-right: .4em solid var(--secondary-darker);
    box-shadow: .15em .25em .75em #00000061;
    text-align: center;
    display: none;
    position: sticky;
    z-index: 30;
    bottom: 2em;
    right: 1em;
    float: right;
    transition-property: background, box-shadow, transform;
}

#estimate-button b {
    font-weight: 900;
    font-size: 1.4em;
    text-transform: none;
    letter-spacing: 0.05em;
}

#estimate-button:hover {
    color: var(--tan);
    background: var(--secondary-dark);
    border-color: var(--secondary-darker);
    transform: scale(1.2) rotate(0.01turn) translateX(-1.5em);
    box-shadow: 1em 2.00em 1.00em #00000070;
}

@media (prefers-reduced-motion: reduce) {
    #estimate-button:hover {
        transform: none;
        box-shadow: .15em .25em .75em #00000061;
    }
}

#estimate-button:active {
    color: var(--tan);
}

div.leader {
    background: var(--gray-lighter);
    margin-top: -2em;
    margin-bottom: 2em;
    margin-left: -1em;
    margin-right: -1em;
    padding-top: 2em;
    padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
}

div.leader.blog {
    margin-left: 0;
    margin-right: 0;
    padding-top: 1em;
}


div.leader h2 {
    font-size: 1.5em;
}


div.leader > * {
    flex: 3 0 0;
    font-size: .9em;
    line-height: 1.6em;
    margin: 0;
}

div.leader > *:first-child {
    flex: 1 0 0;
    margin-top: .05em;
    margin-right: 2em;
}

div.section {
    align-items: flex-start;
    margin: 0 2em;
}

div.section > * {
    flex: 2 0 0;
}

div.section > *:first-child {
    flex: 1 0 0;
    width: 100%;
    max-width: 100%;
    height: auto;
}

div.section.right {
    flex-direction: row-reverse;

}

div.flex {
    justify-content: space-between;
    text-align: center;
    margin-top: 4em;
    margin-bottom: 4em;
}

div.flex > * {
    margin: 1em;
}

div.flex.badge > * {
    max-height: 150px;
    width: auto;
    display: inline-block;
    margin: auto;
}

div.services {
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    gap: 1em;
}

div.services > * {
    flex-grow: 1;
    flex-basis: 25%;
    padding: .5em;
}

div.services h3 {
    /*font-weight: 900;*/
    color: var(--white);
    letter-spacing: .08em;
    font-size: 1.25em;
    margin: 0;
}

div.services img {
    margin: 1em;
    width:  4em;
    height: 4em;
}

div.services p {
    font-size: .9em;
    margin: 1em 2em;
}

div.services > * {
    background: var(--secondary-darker);
    color: var(--tan);
    text-align: center;
}

div.services > a {
    transition-property: background, box-shadow, transform;
    transition-duration: 100ms;
}


div.services > a:hover {
    background: var(--secondary-dark);
    box-shadow: 0 1.5em 1.5em #0006;
    transform: scale(1.2) rotate(-0.02turn);
}

@media (prefers-reduced-motion: reduce) {
    div.services > a:hover {
        transform: none;
    }
}

div.services a:hover h3 {
    color: var(--tan);
}

div.reviews {
    background: var(--primary);
    color: var(--white);
    margin: 0;
    min-height: 22em;
}

div.reviews > div {
    background-position: top left;
    background-repeat: no-repeat;
}

div.reviews h2 {
    color: var(--white);
    margin: 1em 0;
    padding-top: 2em;
}

div.reviews h3 {
    color: var(--gray-light);
    padding-top: 1em;
    margin-bottom: 0;
}

div.customer-reviews blockquote {
    font-size: 1.2em;
    margin: 0;
    display: block;
    color: var(--white);
    margin: 1em;
    max-width: 40em;
    display: none;
    min-height: 14em;
}

div.customer-reviews blockquote.active {
    display: block;
}

div.customer-reviews cite  {
    color: var(--tan);
    font-weight: bold;
    font-style: normal;
    display: inline-block;
}

div.customer-reviews p  {
    margin-top: .5em;
}

div.customer-reviews > div {
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 2em;
    padding-bottom: 1em;
}

div.customer-reviews .rating {
    color: var(--gray-dark);
    display: block;
}

div.customer-reviews img {
    height: 1.5em;
    vertical-align: text-bottom;
}

div.customer-reviews cite::before  {
    content: " — ";
}

#map-embed {
    width: 100%;
    min-height: 300px;
    height: 50vh;
}

/* Desktop Styles */
@media only screen and (min-width : 750px) {

    main {
        padding-top: 2em;
    }

    main   > .wrapper > *,
    header > .wrapper > *,
    header > .wrapper.bar div,
    header > .wrapper > *,
    footer > .wrapper > * {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    div.hero {
        padding-top: 20%;
        margin-top: -2em;
    }

    div.hero > div > div {
        background: var(--primary);
        padding: 2em 4em 1px 4em;
        max-width: 30em;
        top: 5em;
        margin-bottom: 7em;
    }

    div.leader {
        margin-top: -7em;
        padding-top: 8em;
        display: flex;
        padding-right: 4em;
        padding-left: 4em;
        margin-right: 0;
        margin-left: 0;
    }

    div.leader.blog {
        padding-top: 7em;
    }

    div.section {
        display: flex;
        margin: 0 4em;
    }

    div.section > *:first-child {
        width: 30%;
        margin-right: 2em;
    }

    div.section.right > *:first-child {
        margin-right: 0;
        margin-left: 2em;
    }

    #estimate-button {
        display: block;
    }

    main .categories .btn {
        font-size: .9em;
        padding: .3em .5em;
    }

    main .categories .btn.small {
        font-size: .8em;
    }

    footer form {
        text-align: left;
    }


    footer form > div {
        display: flex;
    }

    footer form button {
        width: auto;
    }

    footer form > div > div {
        flex: 1 100%;
    }

    footer form > div {
        margin-top: -1em;
    }

    footer .grid {
        display: flex;
        align-items: flex-start;
    }

    footer .logo {
        margin: 0;
        margin-right: 2em;
    }

    footer .footer-nav {
        flex: 1 100%;
    }

    footer .footer-nav > ul {
        margin-bottom: 2em;
        font-size: .75em;
    }

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

    footer .footer-nav li {
        flex: 1;
        margin: 0;
    }

    footer .footer-nav li svg {
        vertical-align: middle;
    }

    footer li.address svg {
        margin-top: -1em;
    }

    footer li.social a {
        margin-left: .25em;
    }

    footer .slogan {
        margin-top: 2em;
    }

    div.services > * {
        flex-basis: 0;
    }

    div.flex {
        display: flex;
    }

    div.flex.badge > * {
        display: initial;
        margin: initial;
    }

    div.reviews > div {
        background-image: url("/img/review-bubble.svg");
    }

    div.customer-reviews {
        margin-bottom: -6em;
    }

    div.customer-reviews > div {
        text-align: right;
    }

    div.customer-reviews blockquote {
        margin-left: 8em;
        min-height: 11em;
    }

    div.customer-reviews .rating {
        float: left;
        margin-left: 9em;
    }
    /*.wrapper.hero.About,*/
/*.wrapper.hero.Contact {*/
    /*background-image: url('../cover.jpg');*/
    /*background-position: top center;*/
/*}*/

}

/* Desktop Styles */
@media only screen and (min-width : 900px) {

    header .wrapper.bar i {
        font-size: .75em;
    }

    header .wrapper.bar i,
    header .wrapper.nav .logo {
        width: 220px;

    }

    footer .footer-nav > ul {
        font-size: unset;
    }

    header li {
        /*margin-left: 4%;*/
    }

}


/* -----------------------------------------------------------
# Utilities
-------------------------------------------------------- */

/* non-breaking space */
.nbsp {
    white-space: nowrap;
}

/* only visible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}