@font-face {
    font-family: BebasNeueRegular;
    src: url(https://cedar-grove.com/fonts/BebasNeue-webfont.eot);
    src: url(https://cedar-grove.com/fonts/BebasNeue-webfont.eot?#iefix) format("embedded-opentype"), url(https://cedar-grove.com/fonts/BebasNeue-webfont.woff) format("woff"), url(https://cedar-grove.com/fonts/BebasNeue-webfont.ttf) format("truetype"), url(https://cedar-grove.com/fonts/BebasNeue-webfont.svg#BebasNeueRegular) format("svg");
    font-weight: 400;
    font-style: normal
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

html {
    background: #fff;
    color: #000;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

button,
html,
input,
select,
textarea {
    font-family: sans-serif
}

body {
    margin: 0
}

a {
    background: 0 0
}

a:focus {
    outline: dotted thin
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: "\201C""\201D""\2018""\2019"
}

q:after,
q:before {
    content: '';
    content: none
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0;
    white-space: normal
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    vertical-align: baseline
}

button,
input {
    line-height: normal
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
input[disabled] {
    cursor: default
}

input[type=checkbox],
input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,
::after,
::before {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    background: #EBEDDF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal normal 18px/1.4 "Whitney A", "Whitney B";
    color: #1A1919
}

body.lightbox-open {
    overflow: hidden
}

table {
    border: 0
}

table th {
    text-transform: uppercase;
    text-align: left
}

table tr {
    border-top: 1px #999 dotted
}

table td,
table th {
    border: 0;
    padding: 10px 20px 10px 0;
    vertical-align: top;
    font-size: 14px;
    line-height: 20px
}

table td strong,
table th strong {
    font-size: 18px;
    line-height: 22px
}

.layout,
article {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 0 40px
}

.layout::after,
article::after {
    clear: both;
    content: "";
    display: table
}

.event {
	background:#fffad2;
}
.event .group {
	display:flex; max-width:1100px; padding: 40px 20px; margin: 0 auto;
}
.event article {
	width:  45%;
}
.event article div {
	padding:40px 60px 20px 0;
}
.event h3 {
	font: 600 36px/1.1 "Leviathan A","Leviathan B"; color: #000;
}
.event h4 {
	font-size: 24px; padding: 20px 0;
}
.event aside {
	width:  55%;
}

@media screen and (max-width:990px) {
	.event .group {
		flex-direction: column-reverse; padding: 20px; 
	}
	.event article, .event aside {
		width:  100%;
	}
	.event article div {
		padding:20px 0;
	}
	.event h3 {
		font: 600 32px/1.1 "Leviathan A","Leviathan B"; color: #000;
	}
	.event h4 {
		font-size: 20px; padding: 20px 0;
	}

    .layout,
    article {
        padding: 0 20px
    }
}

.overview {
    padding-top: 20px
}

.options h5 {
    font-size: 34px;
    color: #44350C
}

.options .flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-width: 1100px;
    margin: 0 auto
}

.options .flex p {
    padding: 0 40px;
    width: 33%
}

.options .flex p.my-button {
    padding: 0
}

.options .flex p strong {
    font-size: 22px;
    display: block;
    margin: 0 0 5px
}

.options .flex p span {
    display: block;
    font-size: 14px;
    line-height: 19px
}

.bigbutton {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 23.25581%;
    position: relative;
    height: 0;
    margin-bottom: 20px;
    padding-top: 20%
}

.bigbutton:last-child,
.bigbutton:nth-child(4n) {
    margin-right: 0
}

.bigbutton:nth-child(4n) a {
    border-right: 0
}

.bigbutton:nth-child(4n+1) {
    clear: left
}

.bigbutton a {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-color: #7c7255;
    left: 0;
    top: 0;
    display: block;
    border-radius: 12px;
    border: 1px solid #999;
    color: #FFF
}

.bigbutton a h3 {
    border-radius: 12px;
    position: absolute;
    bottom: 0;
    color: #FFF;
    width: 100%;
    padding: 60px 20px 20px;
    line-height: 1.1;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    background-color: transparent;
    background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, .99));
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, .99)));
    background-image: linear-gradient(transparent, rgba(0, 0, 0, .99))
}

.bigbutton a:hover h3 {
    padding-bottom: 25px
}

@media screen and (max-width:767px) {
    .bigbutton {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 48.83721%;
        padding-top: 40%
    }

    .bigbutton:last-child {
        margin-right: 0
    }

    .bigbutton:nth-child(4n) {
        margin-right: 2.32558%
    }

    .bigbutton:nth-child(4n+1) {
        clear: none
    }

    .bigbutton:nth-child(2n) {
        margin-right: 0
    }

    .bigbutton:nth-child(2n) a {
        border-right: 0
    }

    .bigbutton:nth-child(2n+1) {
        clear: left
    }

    .bigbutton h3 {
        font-size: 18px
    }
}

.spotlights .articles {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 53.48837%;
    padding-bottom: 80px
}

.spotlights .articles:last-child {
    margin-right: 0
}

.spotlights .articles h5 {
    padding-left: 20px;
    color: #054C91
}

.spotlights .articles h3 {
    line-height: 1.1;
    padding: 30px 20px 10px
}

.spotlights .articles p {
    font-size: 15px;
    padding: 0 20px
}

.spotlights .articles .one {
    padding: 20px;
    background: #FFF
}

.spotlights .articles .one h3 {
    padding: 0 0 20px;
    font-size: 28px
}

.spotlights .articles .one p {
    font-size: 18px;
    padding: 0
}

.spotlights .faq {
    padding-bottom: 80px;
    padding-top: 250px;
    background: url(/images/general/mulch.png) no-repeat top center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 34.88372%;
    margin-left: 9.30233%
}

.spotlights .faq h5 {
    color: #44350C
}

.spotlights .faq:last-child {
    margin-right: 0
}

.spotlights .faq h6 {
    font-size: 17px;
    margin: 20px 0 0;
    color: #44350C
}

.spotlights .faq p {
    font-size: 14px
}

@media screen and (max-width:767px) {

    .spotlights .articles,
    .spotlights .faq {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .spotlights .articles:last-child,
    .spotlights .faq:last-child {
        margin-right: 0
    }

    .spotlights .faq {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-left: 0;
        background: 0 0
    }
}

.center {
    text-align: center
}

.padded {
    padding: 40px 0
}

.padded .btn {
    background: #00A651;
    color: #FFF;
    font-size: 20px;
    padding: 15px 30px
}

.padded .btn:hover {
    background: #008541;
    color: #FFF
}

.layout {
    padding-bottom: 80px
}

.layout.altherolayout {
    padding-bottom: 0
}

.layout.application .error input {
    border: 1px solid #F42B01;
    background: #fef4f2
}

.layout.application .error label {
    color: #F42B01
}

.layout.application .error label.error {
    display: none !important
}

.layout .row {
    margin-left: 13.95349%;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 76.74419%
}

.layout .row.big p {
    font-size: 25px
}

.layout .row .half {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 48.83721%
}

.layout .row .half:last-child {
    margin-right: 0
}

.layout .row.video {
    padding: 40px 0
}

.layout .row article {
    padding: 0
}

.layout .row article h3 {
    font-size: 32px;
    line-height: 1.1;
    padding: 30px 0 15px;
    border-top: 1px #8C5B37 solid;
    margin-top: 30px
}

.layout .row article .desc {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 62.7907%
}

.layout .row article .desc:last-child {
    margin-right: 0
}

.layout .row article .desc li,
.layout .row article .desc p {
    font-size: 16px
}

.layout .row article .address {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 34.88372%
}

.layout .row article .address:last-child {
    margin-right: 0
}

.layout .row article .address p {
    font-size: 20px
}

.layout .row article:first-of-type h3 {
    border-top: 0
}

.layout .row:last-child {
    margin-right: 0
}

.layout .row.bigfloater {
    margin-left: 0;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 100%;
    padding: 30px 0 0
}

.layout .row.bigfloater:last-child {
    margin-right: 0
}

.layout .row.bigfloater p {
    font-size: 18px
}

.layout .row.bigfloater .text img {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 30px 0
}

.layout .row.imgright img {
    float: right;
    max-width: 50%;
    margin: 10px -18% 20px 20px
}

.layout .row.form {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 53.48837%
}

.layout .row.form:last-child {
    margin-right: 0
}

.layout .row.form label {
    padding-left: 3px
}

.layout .row.form label.error {
    display: none !important
}

.layout .row.form .error input[type=text] {
    border: 1px solid #F42B01;
    background: #fff7f5
}

.layout .row1 p {
    font-size: 24px
}

.layout .twocolcenter .row {
    margin-left: 0;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 100%
}

.layout .twocolcenter .row:last-child {
    margin-right: 0
}

.layout .twocolcenter .row .col.left {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 25.5814%;
    text-align: right
}

.layout .twocolcenter .row .col.left:last-child {
    margin-right: 0
}

.layout .twocolcenter .row .col.left blockquote {
    font: 36px/1.3 BebasNeueRegular;
    color: #8C5B37
}

.layout .twocolcenter .row .col.right {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 72.09302%;
    padding-left: 30px
}

.layout .twocolcenter .row .col.right:last-child {
    margin-right: 0
}

.layout .twocolcenter .row .col.right p {
    font-size: 20px
}

@media screen and (max-width:767px) {
    .layout .twocolcenter .row .col.left {
        display: none
    }

    .layout .twocolcenter .row .col.right {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        padding-left: 0
    }

    .layout .twocolcenter .row .col.right:last-child {
        margin-right: 0
    }

    .layout .twocolcenter .row .col.right p {
        font-size: 15px
    }
}

.layout .two {
    width: 50%;
    float: left;
    padding: 10px 10px 20px
}

.layout .two img {
    width: 100% !important;
    border: 0
}

@media screen and (max-width:767px) {
    .layout .two {
        width: 100%;
        padding: 15px 0
    }
}

.layout .sides {
    margin-top: 40px;
    margin-left: 4.65116%;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 34.88372%
}

.layout .sides:last-child {
    margin-right: 0
}

.layout .sides p {
    font-size: 15px
}

.layout .sides table {
    margin-bottom: 30px
}

.layout .sides table tr {
    border: 0
}

.layout .sides table td {
    font-size: 16px;
    line-height: 1.3;
    border-bottom: 1px #bcbeb2 solid;
    vertical-align: middle
}

.layout .sides.bigger {
    margin-left: 0;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 48.83721%;
    background: #dfe1d4;
    padding: 30px;
    border: 1px solid #8d8e86
}

.layout .sides.bigger h4 {
    font: 700 40px/1 "Sentinel A", "Sentinel B";
    margin-bottom: 30px;
    text-align: center
}

.layout .sides.bigger h4 em {
    font-size: 15px;
    font-style: normal;
    color: #999
}

.layout .sides.bigger p {
    font-size: 15px
}

.layout .sides.bigger:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .layout .sides {
        margin-left: 0;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .layout .sides:last-child {
        margin-right: 0
    }

    .layout .sides.bigger {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .layout .sides.bigger:last-child {
        margin-right: 0
    }
}

.layout .stackedsub .two {
    padding: 0 0 0 160px;
    position: relative;
    font-size: 14px
}

.layout .stackedsub .two strong {
    font-size: 17px;
    padding-bottom: 1px;
    margin: 0
}

.layout .stackedsub .two img {
    width: 130px !important;
    height: auto;
    float: left !important;
    margin: 5px 20px 10px 0 !important;
    border: 10px solid #FFF;
    position: absolute;
    left: 0
}

.layout h1 {
    text-align: left;
    font-size: 64px
}

.layout h2 {
    font: 700 44px/1.1 "Sentinel A", "Sentinel B";
    padding: 60px 0 20px;
    color: #695d3d;
    text-transform: none
}

.layout p span {
    font-size: inherit !important
}

.layout ol,
.layout ul {
    margin-left: 20px;
    margin-bottom: 20px
}

.layout img {
    max-width: 100%;
    width: auto;
    height: auto !important;
    border: 8px solid #FFF;
    -webkit-box-shadow: #d4d5c9 1px 1px 2px;
    box-shadow: #d4d5c9 1px 1px 2px
}

.promo .layout img {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 90px;
    position: absolute;
    left: 51px;
    top: 40px
}

@media screen and (max-width:767px) {
    .promo .layout {
        position: relative;
        left: auto;
        top: auto
    }

    .promo .layout img {
        width: 80px;
        left: 0
    }
}

.promo.title .layout h1 {
    padding-left: 90px;
    font-size: 32px
}

@media screen and (max-width:767px) {
    .layout {
        padding-bottom: 30px
    }

    .layout h2 {
        font-size: 30px;
        padding: 30px 0 10px
    }

    .layout .row {
        margin-left: 0;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .layout .row:last-child {
        margin-right: 0
    }

    .layout .row.imgright img {
        float: none;
        max-width: 100%;
        margin: 20px 0
    }

    .layout .row.form {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .layout .row.form:last-child {
        margin-right: 0
    }

    .layout .two {
        padding: 0 0 15px
    }
}

.internal .layout .row {
    margin-left: 13.95349%;
    padding-left: 60px
}

.internal .layout .row p {
    font-size: 20px;
    margin-bottom: 20px
}

.internal .layout .row .btn {
    color: #FFF;
    font-size: 20px
}

@media screen and (max-width:767px) {
    .internal .layout .row {
        padding-left: 0;
        margin-left: 0
    }

    .internal .layout .row p {
        font-size: 17px
    }

    .internal .layout .row .btn {
        font-size: 14px;
        margin: 0 15px 15px 0
    }
}

.head {
    background: #EBEDDF;
    padding-bottom: 30px
}

.head.spotlight {
    background: #7c7255;
    color: #FFF;
    margin-bottom: 30px
}

.head.spotlight h1 {
    font: 700 48px/1.1 "Sentinel A", "Sentinel B";
    text-transform: none;
    color: #FFF;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 72.09302%;
    padding-left: 30px
}

.head.spotlight h1:last-child {
    margin-right: 0
}

.head.spotlight img {
    border: 8px solid #FFF;
    margin: 50px 2.32558% 20px 0;
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    float: left;
    display: block;
    width: 25.5814%
}

.head.spotlight img:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .head.spotlight h1 {
        font: 700 24px/1.1 "Sentinel A", "Sentinel B";
        letter-spacing: -1px;
        padding-left: 15px
    }

    .head.spotlight img {
        margin-left: -20px
    }
}

.head .textblock {
    margin-left: 13.95349%;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 86.04651%
}

.head .textblock:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .head .textblock {
        margin-left: 0;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 109.30233%
    }

    .head .textblock:last-child {
        margin-right: 0
    }
}

.head .inset {
    float: right;
    width: 250px;
    height: auto;
    margin: 60px 0 30px 20px
}

.head h2,
.head h3 {
    color: #695d3d;
    padding: 6px 0 12px
}

.head h1 {
    color: #44350C;
    text-align: left;
    padding-top: 70px;
    padding-bottom: 12px;
    font-size: 48px;
    position: relative
}

.head p .btn {
    margin: 0 15px 10px 0
}

.head .callback {
    padding: 15px;
    border-bottom: 1px #7c7255 solid;
    text-align: center;
    font-size: 16px;
    margin: 35px 0 25px
}

@media screen and (max-width:767px) {
    .head {
        padding-bottom: 20px
    }

    .head .inset {
        display: none
    }

    .head .textblock {
        margin-left: 0;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .head .textblock:last-child {
        margin-right: 0
    }

    .head h1 {
        font-size: 28px;
        text-align: left;
        padding: 40px 0 0;
        letter-spacing: -1px
    }

    .head h3 {
        font-size: 18px;
        line-height: 24px;
        margin: 15px 0 25px
    }
}

.promo {
    padding: 15px 0;
    background: #8C5B37;
    text-align: center
}

.promo p {
    display: inline-block
}

.promo a {
    color: #FFF;
    text-shadow: rgba(0, 0, 0, .5) 2px 2px 7px
}

.promo a span {
    color: #C66727;
    text-shadow: rgba(255, 255, 255, .7) 2px 2px 7px
}

.promo a:hover {
    color: #FFF
}

.promo a:hover img {
    -webkit-transform: scale(1.06);
    -ms-transform: scale(1.06);
    transform: scale(1.06)
}

.promo a:hover p {
    margin-left: 5px
}

.promo img {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: auto;
    margin: -50px 15px -50px 0
}

.promo.smaller {
    font: 30px/1 "Leviathan A", "Leviathan B"
}

.promo.spring {
    background: #1e5e9c;
    text-align: left
}

.promo.spring .layout img {
    width: 100px;
    margin-top: -60px
}

.promo.spring.title h1 {
    color: #FFF;
    padding-left: 0
}

.promo.title {
    margin-top: 20px
}

.promo.title h1 {
    padding: 10px 0;
    margin: 0;
    font-size: 48px;
    letter-spacing: -1px;
    text-transform: none;
    color: #8C5B37
}

.promo.title.home {
    margin-top: 0
}

.promo.title.home a h1 {
    color: #FFF;
    display: inline-block;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.promo.title.home a:hover h1 {
    text-shadow: rgba(0, 0, 0, .5) 2px 2px 16px;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    margin-left: 12px
}

.promo.title.home img {
    height: 90px;
    width: auto;
    margin: -26px 15px -10px 0
}

@media screen and (max-width:767px) {
    .promo.title.home {
        margin-top: 0;
        margin-bottom: 0
    }

    .promo.title.home h1 {
        font-size: 32px
    }

    .promo.title.home a:hover h1 {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        margin-left: 0
    }
}

.promo.title .layout {
    padding-bottom: 0
}

.promo.hero {
    padding: 0;
    min-height: 400px
}

.promo.hero aside {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 30.23256%
}

.promo.hero aside:last-child {
    margin-right: 0
}

.promo.hero aside img {
    width: 100%;
    height: auto;
    margin: 30px 0
}

.promo.hero .text {
    text-align: left;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 67.44186%
}

.promo.hero .text h1 {
    color: #8C5B37;
    text-shadow: #FFF 1px 1px 0;
    line-height: 1;
    padding: 0 20px 20px 0;
    text-transform: none
}

.promo.hero .text p {
    margin: 30px 0
}

.promo.hero .text p.half {
    width: 100%
}

.promo.hero .text p.half a {
    display: block;
    float: left;
    width: 40%;
    margin-right: 3%
}

.promo.hero .text p.half img {
    width: 100%;
    height: auto;
    margin: -15px 0 -30px
}

.promo.hero .text .btn {
    background: #8C5B37 !important;
    border-color: #af8c73
}

.promo.hero .text .btn:hover {
    background: #7e5232 !important
}

.promo.hero .text:last-child {
    margin-right: 0
}

.promo.althero {
    padding: 20px 0 10px
}

.promo.althero aside {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 25.5814%
}

.promo.althero aside:last-child {
    margin-right: 0
}

.promo.althero aside img {
    width: 100%;
    height: auto;
    margin: 30px 0
}

@media screen and (max-width:767px) {
    .promo.althero aside {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 34.88372%;
        margin-left: 37.2093%
    }

    .promo.althero aside:last-child {
        margin-right: 0
    }
}

.promo.althero .text {
    text-align: left;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 67.44186%
}

.promo.althero .text h1 {
    color: #8C5B37;
    text-shadow: #FFF 1px 1px 0;
    text-transform: none
}

.promo.althero .text p {
    margin: 30px 0
}

.promo.althero .text p.half {
    width: 100%
}

.promo.althero .text p.half a {
    display: block;
    float: left;
    width: 40%;
    margin-right: 3%
}

.promo.althero .text p.half img {
    width: 100%;
    height: auto;
    margin: -15px 0 -30px
}

.promo.althero .text .btn {
    background: #8C5B37 !important;
    border-color: #af8c73
}

.promo.althero .text .btn:hover {
    background: #7e5232 !important
}

.promo.althero .text:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .promo.althero .text {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 109.30233%;
        margin-left: 0
    }

    .promo.althero .text:last-child {
        margin-right: 0
    }

    .promo.althero .text h3 {
        font-size: 18px
    }
}

.promo.althero.internal {
    margin-bottom: 40px
}

.promo.althero.internal aside {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 11.62791%
}

.promo.althero.internal aside:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .promo {
        font: 24px/1.3 "Leviathan A", "Leviathan B"
    }

    .promo img {
        margin: 0 15px
    }

    .promo.hero aside {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 48.83721%;
        margin-left: 25.5814%
    }

    .promo.hero aside:last-child {
        margin-right: 0
    }

    .promo.hero aside img {
        margin: 10px 0 0
    }

    .promo.hero .text {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .promo.hero .text:last-child {
        margin-right: 0
    }

    .promo.hero .text h1 {
        font-size: 39px;
        text-align: center;
        padding: 0 5%;
        margin: 0 0 10px
    }

    .promo.hero .text p {
        position: relative;
        background: 0 0
    }

    .promo.hero .text p.half {
        text-align: center
    }

    .promo.hero .text p.half a {
        width: 46%;
        float: none;
        display: inline-block;
        margin: 0 1%
    }

    .promo.hero .text .btn {
        background: #8C5B37;
        padding: 12px;
        font-size: 18px;
        border-radius: 5px
    }

    .promo.smaller {
        font: 21px/1.3 "Leviathan A", "Leviathan B"
    }
}

@media screen and (max-width:420px) {
    .promo.hero .text h1 {
        font-size: 35px
    }
}

@media screen and (max-width:330px) {
    .promo.hero .text h1 {
        font-size: 30px
    }
}

.dealer {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 23.25581%;
    padding-bottom: 30px
}

.dealer:last-child,
.dealer:nth-child(4n) {
    margin-right: 0
}

.dealer:nth-child(4n) a {
    border-right: 0
}

.dealer:nth-child(4n+1) {
    clear: left
}

.dealer p {
    font-size: 14px
}

.dealer h3 {
    font: 700 18px/20px "Leviathan A", "Leviathan B";
    text-transform: uppercase;
    margin: 0;
    padding: 0
}

.dealer h5 {
    font: 700 13px/16px "Leviathan A", "Leviathan B";
    color: #a29a86;
    margin: 20px 0 10px;
    padding: 0
}

@media screen and (max-width:767px) {
    .dealer {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 48.83721%
    }

    .dealer:last-child {
        margin-right: 0
    }

    .dealer:nth-child(4n) {
        margin-right: 2.32558%
    }

    .dealer:nth-child(4n+1) {
        clear: none
    }

    .dealer:nth-child(2n) {
        margin-right: 0
    }

    .dealer:nth-child(2n) a {
        border-right: 0
    }

    .dealer:nth-child(2n+1) {
        clear: left
    }
}

.threecol {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 31.78295%
}

.threecol:last-child {
    margin-right: 0
}

header {
    background: #8C5B37;
    padding: 20px 0 0
}

header.compostable {
    background: #8f866d;
    margin-bottom: -30px;
    padding-bottom: 30px
}

header.compostable h1 {
    font-size: 54px;
    line-height: 54px;
    margin-bottom: 30px
}

header.storehome {
    background: #c7c2b6;
    padding: 20px 0
}

header.storehome h1 {
    color: #695d3d
}

header h1 {
    color: #FFF;
    line-height: 65px;
    margin: 10px 0
}

header p {
    font: 24px/1.2 "Sentinel A", "Sentinel B";
    color: #FFF;
    text-align: center;
    margin: 0 0 35px;
    padding: 0
}

header form {
    text-align: center
}

header form select {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    text-align: center;
    font-size: 16px;
    margin: 0 5px;
    line-height: 16px;
    padding: 11px 10px
}

header form .search {
    width: 20%;
    margin: 0 5px;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    position: relative
}

header form input[type=text] {
    width: 100%;
    padding: 10px;
    margin-top: 0;
    line-height: 16px;
    font-size: 16px
}

header form button {
    position: absolute;
    border: 0;
    top: 10px;
    right: 9px;
    width: 16px;
    height: 16px;
    background: url(/icons/search.svg) no-repeat;
    -webkit-background-size: 16px 16px;
    background-size: 16px 16px
}

@media screen and (max-width:767px) {
    header {
        padding: 10px 0
    }

    header p {
        display: none
    }

    header.storehome p {
        display: block
    }

    header.storehome h1 {
        font-size: 36px
    }

    header h1 {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -1px;
        margin: 0
    }

    header form {
        text-align: center
    }

    header form select {
        display: inline-block;
        margin: 0;
        padding: 10px 10px 9px;
        width: 49%;
        text-align: center;
        font-size: 14px
    }

    header form .search {
        width: 45%
    }

    header form input[type=text] {
        padding: 8px
    }

    header.compostable h1 {
        font-size: 30px;
        line-height: 32px;
        margin: 20px 0
    }
}

@media screen and (max-width:330px) {
    header.storehome h1 {
        font-size: 32px
    }
}

h1 {
    font: 600 72px/1.1 "Leviathan A", "Leviathan B";
    text-transform: uppercase;
    letter-spacing: -2px;
    text-align: center
}

@media screen and (max-width:767px) {
    h1 {
        font-size: 48px
    }
}

h2 {
    font: 600 32px/1.1 "Leviathan A", "Leviathan B";
    text-transform: uppercase;
    letter-spacing: -1px;
    text-align: left
}

h3 {
    font: 700 22px/28px "Sentinel A", "Sentinel B";
    color: #2177BC;
    padding: 20px 0 0
}

h5 {
    font: 400 20px/1.2 "Leviathan A", "Leviathan B";
    text-transform: uppercase;
    margin: 20px 0 30px
}

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

p {
    padding: 6px 0 12px;
    margin: 0
}

a {
    color: #2177BC;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    text-decoration: none
}

em,
img,
input[type=submit],
p,
span {
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.groups.open {
    padding-top: 80px;
    padding-bottom: 30px
}

.groups h2 {
    margin: 80px 0 30px;
    color: #17AA37
}

.groups article {
    padding-right: 20px
}

@media screen and (max-width:767px) {
    .groups h2 {
        font-size: 24px
    }

    .groups article {
        padding-right: 0
    }
}

.lightbox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999
}

.lightbox .close {
    position: fixed;
    top: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background: #F42B01;
    color: #FFF;
    text-align: center;
    font: 700 30px/37px "Whitney A", "Whitney B"
}

@media screen and (max-width:767px) {
    .lightbox .close {
        height: 30px;
        width: 30px;
        font-size: 24px;
        line-height: 27px
    }
}

.calculate {
    display: none;
    background: #2177BC;
    color: #FFF;
    font: 12px/15px "Whitney A", "Whitney B";
    margin: -10px 0 0;
    text-align: center;
    height: 60px
}

.calculate .input,
.calculate .total {
    float: left;
    width: 21.6%;
    padding: 0
}

.calculate .total {
    width: 35%;
    position: absolute;
    right: 0;
    height: 50px;
    font-weight: 700;
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
    font-size: 20px;
    line-height: 20px;
    text-align: center
}

.calculate .total em {
    font-style: normal;
    font-weight: 400;
    display: block;
    font-size: 14px
}

.calculate input[type=text] {
    width: 100%;
    margin: 5px 5px 0;
    padding: 5px 0;
    display: block;
    background: #1a5f96;
    color: #FFF;
    border-radius: 0;
    font: 20px/1 "Leviathan A", "Leviathan B";
    text-align: center
}

.inline #shopping-cart {
    overflow: auto
}

#shopping-cart {
    overflow: scroll;
    max-height: 600px;
    padding: 0 0 62px
}

@media screen and (max-width:767px) {
    #shopping-cart {
        max-height: 90vh
    }
}

.where {
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    width: 100%;
    color: #777;
    margin: 0 0 15px;
    padding: 0
}

.where p {
    padding: 0;
    font-weight: 700
}

.where a {
    display: inline-block;
    margin: 0 0 0 10px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #777;
    background: #FFF;
    padding: 2px 8px;
    border-radius: 8px
}

.promos {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 9999
}

.promos input[type=text] {
    width: 65%;
    margin: 0;
    float: left;
    height: 50px;
    background: #f7f8f2;
    padding: 0 20px;
    border-radius: 0;
    font: 400 18px/1 "Sentinel A", "Sentinel B"
}

.promos .btn {
    width: 35%;
    margin: 0;
    padding: 0 !important;
    border-radius: 0;
    font-size: 20px !important;
    background: #a5a69c !important;
    float: left;
    height: 50px;
    line-height: 50px
}

.buttons {
    text-align: center;
    padding: 20px 0 30px
}

.buttons a {
    font-size: 14px;
    font-weight: 700;
    margin: 0 5px;
    color: #FFF;
    background: #b0b0ad;
    border-radius: 20px;
    padding: 6px 25px
}

.buttons a.active,
.buttons a:hover {
    color: #FFF;
    background: #3785c3
}

@media screen and (max-width:767px) {
    .buttons {
        padding: 10px 0 20px
    }

    .buttons a {
        font-size: 13px;
        margin: 0;
        padding: 5px 15px
    }
}

.donation p {
    font-size: 14px;
    padding-left: 4px
}

.deliverychange {
    margin-bottom: 20px
}

.deliverychange h3 {
    font-size: 12px;
    padding-top: 20px !important;
    color: #666;
    margin-bottom: 0 !important;
    text-transform: uppercase
}

.deliverychange p {
    margin: 0;
    padding: 0
}

.deliverychange p span {
    float: left;
    width: 33.3333%;
    padding: 10px;
    text-align: center
}

.deliverychange p span.active {
    background: #FFF
}

.deliverychange p span em {
    display: block;
    font-size: 11px;
    font-style: normal
}

.charity {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    border-right: 1px #FFF solid;
    overflow: hidden
}

.charity li {
    position: relative;
    float: left;
    width: 20%
}

.charity .button {
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin: 0;
    padding: 0
}

.charity .button a.btn {
    font-size: 12px;
    padding: 5px 15px;
    background: #b9ad86
}

.charity .button a.btn:hover {
    background: #FFF
}

.charity .nonprofit {
    cursor: pointer;
    border-left: 1px #FFF solid;
    text-align: left;
    padding: 15px;
    height: 200px;
    position: relative
}

.charity .nonprofit:hover {
    background: #FFF
}

.charity .nonprofit h3 {
    font: 24px/1 BebasNeueRegular;
    margin: 0;
    padding: 0
}

.charity .nonprofit p {
    text-align: left;
    font-size: 14px;
    color: #000;
    margin: 10px 0
}

@media screen and (max-width:767px) {
    .charity {
        border-right: 0
    }

    .charity li {
        float: none;
        width: 100%
    }

    .charity .nonprofit {
        height: auto;
        border-left: 0;
        border-bottom: 1px #FFF solid
    }

    .charity .button {
        right: 0;
        left: auto;
        bottom: auto;
        top: 13px
    }
}

#cart {
    max-width: 500px;
    min-height: 300px;
    max-height: 600px;
    overflow: hidden;
    background: #EBEDDF;
    margin: 40px auto;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all .3s;
    transition: all .3s;
    position: relative
}

@media screen and (max-width:767px) {
    #cart {
        max-height: 90vh;
        min-height: auto
    }
}

.on #cart {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

#cart h3 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px
}

#cart h2 {
    text-align: center;
    font-size: 36px;
    padding: 20px 0 10px;
    z-index: 9999;
    background: #EBEDDF
}

#cart .product {
    text-align: left;
    overflow: hidden;
    font: 700 18px/1 "Sentinel A", "Sentinel B";
    padding: 0 35% 0 0;
    height: 50px
}

#cart .product input[type=text] {
    display: inline-block;
    margin: 0;
    font: 700 30px/30px "Sentinel A", "Sentinel B";
    padding: 0;
    height: 50px;
    background: #FFF;
    border: 0;
    width: 25%;
    text-align: center;
    border-radius: 0;
    vertical-align: middle
}

#cart .product p {
    margin: 0;
    padding: 0;
    position: relative;
    height: 50px
}

#cart .product span {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    vertical-align: middle;
    color: #666
}

#cart .product p>span {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 25%;
    text-align: center
}

#cart .product a {
    display: inline-block;
    width: 65%;
    vertical-align: middle;
    padding-left: 15px
}

#cart .product a.delete {
    position: absolute;
    right: 6px;
    top: 13px;
    width: 20px;
    height: 20px;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    background: #999;
    padding: 0;
    border-radius: 100%
}

#cart .product a.delete:hover {
    background: #c32201
}

@media screen and (max-width:767px) {
    #cart .product a.delete {
        width: 15px;
        height: 15px;
        right: 3px;
        top: 17px;
        line-height: 14px;
        font-size: 12px
    }
}

#cart .product.noprice {
    border: 0;
    margin: 10px 20px;
    padding: 0
}

#cart .product.noprice p {
    font-size: 20px
}

#cart .updatebutton .btn {
    background: #2177BC
}

#cart .updatebutton .btn:hover {
    background: #1a5f96
}

#cart .pricingbutton {
    z-index: 9999999999
}

#cart .pricingbutton .btn {
    background: #E6AE00
}

#cart .pricingbutton .btn:hover {
    background: #b88b00
}

#cart .btn {
    background: #677819;
    font-family: "Sentinel A", "Sentinel B";
    padding: 10px 20px;
    color: #FFF;
    font-size: 26px
}

#cart .btn:hover {
    background: #526014
}

#cart .btn.hide {
    display: none !important
}

#cart .overlay {
    position: absolute;
    background: #EBEDDF;
    top: 0;
    max-width: 600px;
    width: 100%;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 9999999
}

#cart .changes {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35%;
    background: #485412;
    color: #FFF;
    text-align: center
}

#cart .changes strong {
    font: 700 11px/14px "Whitney A", "Whitney B";
    text-transform: uppercase;
    display: block
}

#cart .changes.ohnono {
    background: #175384;
    text-decoration: line-through
}

#cart .changes.ohnono strong {
    text-decoration: none
}

#cart .changes,
#cart .overlay {
    padding: 10px;
    font: 700 24px/1.2 "Sentinel A", "Sentinel B"
}

#cart .delivery,
#cart .fees,
#cart .promocodes,
#cart .sidetotal {
    padding-right: 35%;
    height: 50px;
    font: 16px/18px "Sentinel A", "Sentinel B"
}

#cart .delivery p,
#cart .fees p,
#cart .promocodes p,
#cart .sidetotal p {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    padding: 0
}

#cart .delivery strong,
#cart .fees strong,
#cart .promocodes strong,
#cart .sidetotal strong {
    font-weight: 400;
    display: block;
    padding: 0 20px
}

@media screen and (max-width:767px) {

    #cart .delivery,
    #cart .fees,
    #cart .promocodes,
    #cart .sidetotal {
        font-size: 14px
    }
}

#cart .promocodes a.boink {
    position: absolute;
    right: 6px;
    top: 13px;
    width: 20px;
    height: 20px;
    color: #FFF;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    background: #999;
    padding: 0;
    z-index: 99;
    border-radius: 100%
}

#cart .promocodes a.boink:hover {
    background: #c32201
}

@media screen and (max-width:767px) {
    #cart .promocodes a.boink {
        width: 15px;
        height: 15px;
        right: 3px;
        top: 17px;
        line-height: 14px;
        font-size: 12px
    }
}

#cart .delivery,
#cart .fees {
    height: 40px
}

#cart .delivery em,
#cart .fees em {
    display: block;
    float: left;
    width: 25%
}

#cart .delivery .bulktotal,
#cart .delivery .packtotal,
#cart .fees .bulktotal,
#cart .fees .packtotal {
    font: 700 14px/25px "Sentinel A", "Sentinel B";
    border-left: 0
}

#cart .delivery p,
#cart .fees p {
    font: 12px/16px "Sentinel A", "Sentinel B";
    height: auto;
    text-align: left;
    padding: 5px 0 10px 24px;
    margin: 0;
    width: 100%;
    display: block
}

#cart .delivery strong,
#cart .fees strong {
    padding: 0
}

#cart .placeorder,
#cart .pricingbutton,
#cart .updatebutton {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 65%
}

#cart .placeorder .btn,
#cart .pricingbutton .btn,
#cart .updatebutton .btn {
    display: block;
    border-radius: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    height: 62px;
    line-height: 62px;
    padding: 0
}

#cart .placeorder .btn {
    width: 61%;
    float: right
}

#cart .placeorder .keep {
    text-align: center;
    float: left;
    width: 39%;
    background: #2177BC;
    height: 62px;
    font: 700 18px/21px "Sentinel A", "Sentinel B";
    padding-top: 7px;
    color: #fff
}

#cart .placeorder .keep:hover {
    background: #1a5f96
}

@media screen and (max-width:767px) {
    #cart .placeorder .keep {
        font-size: 16px;
        line-height: 18px;
        padding-top: 12px
    }
}

#cart .preinput {
    margin: 20px 0 30px;
    text-align: left;
    float: left;
    padding: 0 20px;
    width: 35%;
    font: 700 14px/22px "Whitney A", "Whitney B"
}

#cart .preinput span {
    vertical-align: middle;
    display: block;
    padding-left: 10px
}

#cart .preinput input {
    font: 700 20px/1 "Sentinel A", "Sentinel B";
    margin: 0;
    vertical-align: middle;
    text-align: left;
    width: 100%;
    display: inline-block;
    padding: 10px
}

#cart .preinput.bottom {
    width: 65%;
    padding: 0 20px 0 0
}

#cart .pricingbutton {
    width: 100%
}

.delivery,
.discount,
.fees,
.product,
.promocodes,
.sidetotal,
.subtotal,
.tax {
    position: relative;
    border-top: 1px #bfbfbd solid
}

.bulkship,
.hide,
.subtotal {
    display: none
}

.outsidezone {
    display: block;
    background: #000;
    color: #FFF;
    z-index: 99;
    padding: 80px 80px 50px;
    font-weight: 700;
    text-align: center;
    font-size: 29px;
    line-height: 1.3
}

.outsidezone a {
    color: #FFF
}

.bulksum-total-qty,
.promos {
    display: none
}

.discounttotal span {
    color: #c32201
}

.bulksum-total,
.bulktotal,
.discount span,
.discounttotal a,
.discounttotal span,
.finaltotal,
.packsum-total,
.packtotal,
.taxsum {
    position: absolute;
    top: 0;
    right: 0;
    font: 700 18px/50px "Sentinel A", "Sentinel B";
    width: 35%;
    text-align: center;
    border-left: 1px #bfbfbd solid;
    height: 50px
}

.discounttotal a em {
    font: 700 14px/17px "Whitney A", "Whitney B";
    background: #64a0d0;
    padding: 5px 15px;
    position: relative;
    top: auto;
    right: auto;
    line-height: 20px;
    border-left: 0;
    height: auto;
    border-radius: 6px;
    color: #FFF
}

.discounttotal a em:hover {
    background: #2177BC
}

.viewcart {
    width: 175px;
    left: -40px;
    height: 45px;
    opacity: 0
}

@media screen and (max-width:767px) {
    .viewcart {
        width: 88px;
        left: 0;
        height: 110px;
        position: absolute
    }
}

.item {
    text-align: left;
    position: relative
}

.item h3 {
    font-size: 19px;
    line-height: 22px;
    padding: 10px 75px 0 0
}

.item p {
    font-size: 12px;
    line-height: 16px;
    padding: 0 40px 0 0
}

.item .btn {
    font-size: 13px
}

.item a {
    display: block;
    position: relative;
    color: #000;
    border-bottom: 1px #FFF solid;
    margin-left: -20px;
    padding-left: 20px;
    height: 63px
}

.item a img {
    width: 17px;
    height: 17px;
    position: absolute;
    right: 41px;
    top: 50%;
    margin-top: -15px;
    opacity: .3
}

.item a.quick {
    font: 30px/50px "Leviathan A", "Leviathan B";
    position: absolute;
    right: -20px;
    top: 0;
    height: 63px;
    background: #f3f4ec;
    width: 44px;
    text-align: center;
    padding: 0;
    color: #b0b0ad
}

.item a.quick em {
    color: #b0b0ad
}

.item a.quick span {
    display: block;
    width: 100%;
    height: 66px
}

.item a.quick span:hover {
    background: #FFF;
    color: #a0a09d
}

.item a:hover {
    color: #000;
    background: #FFF
}

.item a:hover img {
    opacity: .8
}

.item a:hover em {
    color: #60605B
}

.item.packaging {
    width: 20%;
    float: left;
    height: 282px
}

.item.packaging a {
    height: auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 20px;
    border-bottom: 0
}

.item.packaging a:hover {
    background: 0 0
}

.item.packaging a.quick {
    right: 20px;
    padding-right: 0;
    padding-top: 5px;
    line-height: 20px;
    background: #a5a69c;
    color: #FFF;
    opacity: .5;
    height: 40px;
    width: 40px
}

.item.packaging a.quick em {
    color: #FFF;
    display: block;
    text-align: center;
    font: normal bold 11px/11px "Whitney A", "Whitney B"
}

.item.packaging a.quick:hover {
    background: #767770
}

.item.packaging h3 {
    padding: 5px 0 0
}

.item.packaging p {
    padding: 5px 0;
    font: 400 11px/18px "Sentinel A", "Sentinel B";
    color: #333
}

.item.packaging p strong {
    font-weight: 400;
    margin-right: 5px;
    color: #444;
    font-size: 14px
}

.item.packaging img {
    position: relative;
    border: 10px solid #FFF;
    width: 100%;
    height: auto;
    right: auto;
    top: auto;
    margin-top: 0;
    opacity: 1
}

@media screen and (max-width:850px) {
    .item.packaging {
        width: 25%
    }
}

@media screen and (max-width:767px) {
    .item.packaging {
        width: 33.3333%
    }
}

@media screen and (max-width:420px) {
    .item.packaging {
        width: 50%
    }
}

@media screen and (max-width:330px) {
    .item a {
        height: 60px
    }

    .item a.quick {
        height: 60px;
        line-height: 46px
    }

    .item a.quick span {
        height: 60px
    }

    .item h3 {
        font-size: 16px;
        line-height: 22px
    }

    .item p {
        font-size: 11px
    }
}

a:hover {
    color: #195c91
}

svg {
    -webkit-transition: all .1s ease;
    transition: all .1s ease
}

.btn {
    margin: 0 5px;
    display: inline-block;
    padding: 10px 20px;
    border: 0;
    color: #000;
    background: #FFF;
    border-radius: 5px;
    font: 700 16px/1.2 "Sentinel A", "Sentinel B"
}

.btn svg {
    float: left;
    height: 30px;
    width: 30px;
    margin: 5px 15px 5px 10px
}

.btn:active,
.btn:hover {
    color: #000;
    background: #b9ad86
}

.btn:active path,
.btn:hover path {
    fill: #FFF
}

.social {
    text-align: center;
    padding: 10px;
    background-color: #1b7c4a
}

.social a {
    font: 700 16px/1 "Whitney A", "Whitney B";
    color: #FFF;
    margin: 0 10px;
    opacity: .6;
    padding: 8px;
    white-space: nowrap;
    display: inline-block
}

.social a:hover {
    opacity: 1
}

@media screen and (max-width:767px) {
    .social a {
        margin: 5px
    }
}

.social svg {
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px
}

.social circle,
.social path {
    fill: #FFF
}

.banner {
    height: 40px;
    background: #44350C;
    color: #FFF
}

.banner a {
    background: #677718;
    border-radius: 0 0 9px 9px;
    position: relative;
    color: #FFF;
    font: 20px/24px BebasNeueRegular;
    padding: 10px 15px;
    display: inline-block;
    top: 0;
    vertical-align: top;
    margin: 0 15px 0 20px
}

.banner a strong {
    top: 5px;
    left: 12px
}

.banner a svg {
    height: 24px;
    width: 24px;
    display: block;
    float: left;
    margin: -1px 10px 0 0
}

.banner a circle,
.banner a path {
    fill: #FFF
}

.banner .social {
    display: inline-block;
    padding: 0;
    background: 0 0
}

.banner .social svg {
    height: 20px;
    width: 32px;
    float: none;
    display: inline-block;
    margin: 0;
    vertical-align: middle
}

.banner .social rect {
    fill: transparent
}

.banner .social a {
    width: auto;
    padding: 0;
    height: 25px;
    margin: 2px 0 0;
    border-radius: 0;
    background-color: transparent
}

.banner .social a.tw svg {
    height: 16px
}

.banner .social a:hover path {
    fill: #48649E
}

.banner .social a:hover.tw path {
    fill: #00aced
}

.banner .social a:hover.insta circle,
.banner .social a:hover.insta path {
    fill: #DD2C72
}

@media screen and (max-width:990px) {
    .banner .social {
        margin-left: 30px
    }
}

@media screen and (max-width:850px) {
    .banner .social {
        margin-left: 20px
    }
}

.banner h4 {
    font: 700 15px/40px "Sentinel A", "Sentinel B";
    display: inline-block
}

@media screen and (max-width:990px) {
    .banner h4 {
        font-size: 13px
    }

    .banner a {
        margin: 0 -15px 0 20px;
        padding: 10px 15px;
        font-size: 20px
    }
}

@media screen and (max-width:767px) {
    .banner {
        display: none
    }
}

.global_header {
    height: 120px;
    width: 100%;
    position: relative
}

.global_header .logo {
    float: left;
    display: block;
    width: 117px;
    height: 70px;
    background: url(/img/logo.svg) no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    margin-top: 23px;
    text-indent: -9999px
}

@media screen and (max-width:990px) {
    .global_header .logo {
        width: 100px;
        margin-top: 30px
    }
}

@media screen and (max-width:767px) {
    .global_header {
        height: 110px;
        margin-bottom: 40px
    }

    .global_header .logo {
        width: 100px;
        margin-top: 23px
    }
}

form .terms label {
    text-transform: none;
    font-size: 18px;
    margin: 30px 0
}

.mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0
}

.mobile>a {
    display: block;
    width: 90px;
    float: left;
    height: 110px;
    border-left: 1px #60605B dotted;
    padding: 30px 0 0;
    text-align: center;
    color: #000;
    font: 24px/28px BebasNeueRegular;
    position: relative
}

.mobile>a.active {
    background: #44350C;
    color: #FFF
}

.mobile>a.active path {
    fill: #FFF
}

.mobile>a svg {
    height: 20px;
    width: 30px;
    display: block;
    margin: 0 auto 12px
}

@media screen and (max-width:767px) {
    .mobile {
        display: block
    }
}

.mobilemenu {
    z-index: 99999;
    position: relative
}

.mobilemenu .bumper {
    display: none;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 10px;
    height: 50px;
    background: #95a15e;
    font: 700 14px/20px "Whitney A", "Whitney B"
}

.mobilemenu .bumper svg {
    float: left;
    width: 14px;
    height: 14px;
    margin: 3px 6px 0 0
}

.mobilemenu .bumper path {
    fill: #FFF
}

.mobilemenu .bumper a {
    color: #FFF;
    padding: 3px 15px;
    display: inline-block;
    border-radius: 20px;
    margin: 12px 4px;
    background: #677819
}

@media screen and (max-width:767px) {
    .mobilemenu .bumper {
        display: block
    }
}

.mobilemenu ul {
    display: none;
    position: absolute;
    top: 10px;
    left: 0;
    background: #44350C;
    width: 100%;
    text-align: center;
    font: 700 24px/40px "Sentinel A", "Sentinel B"
}

.mobilemenu ul a {
    color: #FFF;
    padding: 10px;
    display: block;
    border-bottom: 2px #a29a86 solid
}

.mobilemenu ul .social {
    background: 0 0;
    overflow: hidden;
    padding: 10px 20px
}

.mobilemenu ul .social svg {
    height: 30px;
    width: auto
}

.mobilemenu ul .social a {
    float: left;
    width: 33.333333%;
    padding-bottom: 15px;
    margin: 0;
    border: 0
}

.mobilemenu ul .social circle,
.mobilemenu ul .social path {
    fill: #FFF
}

nav {
    font: 24px/24px BebasNeueRegular, helvetica, arial, sans-serif;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    z-index: 9999
}

nav>ul {
    list-style: none;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 23.25581%
}

@media screen and (max-width:990px) {
    nav>ul {
        bottom: 10px;
        margin-left: 18.60465%
    }
}

nav li {
    float: left;
    margin-left: 5px
}

nav a {
    display: block;
    color: #434241;
    padding: 12px 20px 15px 55px;
    margin-bottom: -10px
}

nav a:hover {
    text-decoration: none;
    color: #FFF;
    background: #00AC2F
}

nav a:hover .icon {
    background: #FFF !important
}

nav .sfHover a {
    color: #FFF
}

nav .sfHover a .icon {
    background: #FFF !important
}

nav #community line {
    stroke: #FFF
}

nav #community .icon,
nav #community a:hover,
nav #community li,
nav #community.sfHover a {
    background: #CE9929
}

nav #community.sfHover a path,
nav #community.sfHover a polygon {
    fill: #CE9929
}

nav #community .icon svg {
    margin: 10px 0 0 4px;
    width: 28px;
    height: 19px
}

nav #aboutus line {
    stroke: #FFF
}

nav #aboutus .icon,
nav #aboutus a:hover,
nav #aboutus li,
nav #aboutus.sfHover a {
    background: #8C5B37
}

nav #aboutus a line.reverse {
    stroke: #8C5B37
}

nav #aboutus.sfHover a path,
nav #aboutus.sfHover a polygon {
    fill: #8C5B37
}

nav #aboutus.sfHover a line {
    stroke: #8C5B37
}

nav #aboutus.sfHover a line.reverse {
    stroke: #FFF
}

nav #aboutus .icon svg {
    margin: 4px 0 0 8px
}

nav #soilsplants .icon,
nav #soilsplants a:hover,
nav #soilsplants li {
    background: #054C91
}

nav #soilsplants a path.reverse {
    fill: #054C91
}

nav #soilsplants.sfHover a {
    background: #054C91
}

nav #soilsplants.sfHover a path,
nav #soilsplants.sfHover a polygon {
    fill: #054C91
}

nav #soilsplants.sfHover a path.reverse {
    fill: #FFF
}

nav #soilsplants .icon svg {
    margin: 6px 0 0 6px
}

nav #professional .icon,
nav #professional a:hover,
nav #professional li {
    background: #677819
}

nav #professional a path.reverse {
    fill: #677819
}

nav #professional.sfHover a {
    background: #677819
}

nav #professional.sfHover a path,
nav #professional.sfHover a polygon {
    fill: #677819
}

nav #professional.sfHover a path.reverse {
    fill: #FFF
}

nav #professional .icon svg {
    margin: 9px 0 0 2px
}

nav .sf-menu a {
    display: block;
    position: relative
}

nav .sf-menu>li {
    float: left
}

nav .sf-menu li {
    position: relative
}

nav .sf-menu li.sfHover>ul,
nav .sf-menu li:hover>ul {
    display: block
}

nav .sf-menu li li,
nav .sf-menu li li a {
    border: 0;
    float: none;
    padding: 0;
    position: relative;
    display: block;
    margin: 0;
    color: #FFF
}

nav .sf-menu li li a {
    padding: 7px 15px
}

nav .sf-menu li li a:hover {
    background: rgba(0, 0, 0, .2) !important
}

nav .sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    bottom: auto;
    left: 0;
    z-index: 101;
    margin-top: 10px;
    padding: 0;
    border-right: 0;
    font: 700 16px/17px "Whitney A", "Whitney B", Helvetica, Arial, sans-serif;
    text-transform: none;
    min-width: 16em;
    -webkit-box-shadow: rgba(0, 0, 0, .5) 0 10px 10px;
    box-shadow: rgba(0, 0, 0, .5) 0 10px 10px
}

nav .sf-menu ul ul {
    top: 0;
    left: 100%
}

nav .icon {
    position: absolute;
    top: 6px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background: #677819
}

nav path,
nav polygon {
    fill: #FFF
}

@media screen and (max-width:990px) {
    nav {
        font-size: 20px
    }

    nav li {
        margin-left: 0
    }

    nav a {
        padding: 12px 15px 15px 55px
    }
}

@media screen and (max-width:767px) {
    nav {
        display: none
    }
}

.packhome,
.soilhome {
    background: #a29a86;
    padding: 30px 0;
    position: relative
}

@media screen and (max-width:767px) {

    .packhome,
    .soilhome {
        padding-bottom: 0
    }
}

.packhome h2,
.soilhome h2 {
    margin: 20px 0;
    text-align: center
}

.packhome .item h3,
.packhome .item h3 a,
.soilhome .item h3,
.soilhome .item h3 a {
    color: #FFF
}

.packhome h4,
.soilhome h4 {
    font: 400 18px/20px "Sentinel A", "Sentinel B";
    margin: 30px 0;
    text-align: center
}

.packhome h4 .btn,
.soilhome h4 .btn {
    background: #736849;
    padding: 15px 20px
}

.packhome h4 .btn:hover,
.soilhome h4 .btn:hover {
    background: #605330;
    color: #FFF
}

.packhome a,
.soilhome a {
    color: #FFF
}

.packhome .image,
.soilhome .image {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 53.48837%
}

.packhome .image:last-child,
.soilhome .image:last-child {
    margin-right: 0
}

.packhome .image img,
.soilhome .image img {
    margin-top: -30px
}

.packhome .products,
.soilhome .products {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%
}

.packhome .products:last-child,
.soilhome .products:last-child {
    margin-right: 0
}

.packhome .products em,
.soilhome .products em {
    position: absolute;
    right: 46px;
    bottom: 15px;
    font: 700 11px/1 "Whitney A", "Whitney B";
    width: 44px;
    text-align: center;
    color: #444
}

.packhome .products a.quick em,
.soilhome .products a.quick em {
    right: 0;
    color: #FFF
}

.packhome .products a:hover em,
.soilhome .products a:hover em {
    color: #000
}

.packhome .products a.quick:hover em,
.soilhome .products a.quick:hover em {
    color: #FFF
}

.packhome .calculate,
.soilhome .calculate {
    position: absolute;
    left: 55%;
    bottom: 0;
    height: auto;
    min-width: 320px;
    max-width: 400px;
    padding: 0 20px 30px;
    -webkit-box-shadow: rgba(0, 0, 0, .3) 0 -2px 30px;
    box-shadow: rgba(0, 0, 0, .3) 0 -2px 30px
}

.packhome .calculate h5,
.soilhome .calculate h5 {
    padding-bottom: 80px;
    font-size: 18px;
    opacity: .6
}

.packhome .calculate .input,
.soilhome .calculate .input {
    width: 33.33333%;
    font-size: 14px
}

.packhome .calculate input[type=text],
.soilhome .calculate input[type=text] {
    margin: 0 0 5px
}

.packhome .calculate .total,
.soilhome .calculate .total {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 36px;
    left: 0;
    font-size: 48px;
    line-height: 1.3
}

@media screen and (max-width:767px) {

    .packhome .calculate,
    .soilhome .calculate {
        position: relative;
        left: 0;
        padding-top: 10px;
        padding-bottom: 70px;
        margin: 40px auto 0
    }

    .packhome .calculate h5,
    .soilhome .calculate h5 {
        padding-bottom: 64px
    }
}

.packhome .item.first a,
.soilhome .item.first a {
    border-top: 1px #FFF solid
}

.packhome .item a,
.soilhome .item a {
    margin-left: 0
}

.packhome .item a:hover,
.soilhome .item a:hover {
    background: #7c7255
}

.packhome .item a:hover p,
.soilhome .item a:hover p {
    color: #FFF
}

.packhome .item a:hover img,
.soilhome .item a:hover img {
    opacity: 1
}

.packhome .item a img,
.soilhome .item a img {
    right: 60px
}

.packhome .item a.quick,
.soilhome .item a.quick {
    right: 0;
    background: #b4ae9e;
    color: #FFF
}

.packhome .item a.quick:hover,
.soilhome .item a.quick:hover {
    background: #c7c2b6
}

@media screen and (max-width:767px) {

    .packhome h2,
    .soilhome h2 {
        font-size: 28px;
        position: relative;
        z-index: 80;
        padding: 0 50px 0 20px;
        text-align: left;
        letter-spacing: 0
    }

    .packhome article,
    .soilhome article {
        padding: 0
    }

    .packhome .image,
    .soilhome .image {
        position: absolute;
        right: 0;
        top: 0
    }

    .packhome .products,
    .soilhome .products {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        position: relative;
        z-index: 80
    }

    .packhome .products:last-child,
    .soilhome .products:last-child {
        margin-right: 0
    }
}

@media screen and (max-width:330px) {

    .packhome h2,
    .soilhome h2 {
        font-size: 22px
    }
}

.packhome {
    background: #8f866d
}

.packhome .image {
    margin-left: 0;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%
}

.packhome .image:last-child {
    margin-right: 0
}

.packhome .image img {
    margin-top: 10px
}

.packhome .products {
    margin-left: 9.30233%;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%
}

.packhome .products:last-child {
    margin-right: 0
}

.packhome .item a.quick {
    background: #a29a86
}

.packhome .item a.quick:hover {
    background: #b4ae9e
}

@media screen and (max-width:767px) {
    .packhome .image {
        position: absolute;
        right: 0;
        top: -30px
    }

    .packhome .image img {
        max-height: 100px;
        width: auto;
        float: right
    }

    .packhome .products {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        margin-left: 0
    }

    .packhome .products:last-child {
        margin-right: 0
    }
}

section.employment p:empty,
section.employment td:empty,
section.employment tr:empty {
    display: none
}

section.employment u strong {
    text-decoration: none;
    font-size: 24px
}

section.employment table {
    margin-left: 13.95349%;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 72.09302%;
    text-align: left;
    margin-bottom: 50px
}

section.employment table:last-child {
    margin-right: 0
}

section.employment table tr {
    border: 0
}

section.employment table hr {
    display: none
}

section.employment table td {
    font-size: 18px;
    line-height: 1.4;
    padding: 10px 20px 0 0;
    text-align: left
}

section.employment table td.left.top,
section.employment table td>div {
    width: auto !important
}

section.employment table td>div>div {
    float: none !important
}

section.employment table ol,
section.employment table ul {
    margin-left: 30px
}

section.employment table li {
    margin-bottom: 10px
}

section.employment table table {
    margin-left: 0;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 100%;
    margin-bottom: 0
}

section.employment table table:last-child {
    margin-right: 0
}

section.employment table table td {
    width: 50%
}

@media screen and (max-width:767px) {
    section.employment table {
        margin-left: 0;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    section.employment table:last-child {
        margin-right: 0
    }

    section.employment table td {
        white-space: normal !important
    }

    section.employment table table td {
        width: 100%
    }
}

section.employment h1 {
    color: #44350C;
    text-align: left;
    font-size: 42px;
    margin-top: 40px
}

section.employment h1.alert {
    font: 20px/1.4 "Sentinel A", "Sentinel B";
    color: #2177BC
}

@media screen and (max-width:767px) {
    section.employment h1 {
        font-size: 21px;
        letter-spacing: -1px
    }
}

section.employment img {
    width: auto;
    max-width: 100%
}

section.employment form {
    font: 18px/1.4 "Whitney A", "Whitney B"
}

section.employment form[name=TBE_theForm] h2 {
    text-transform: uppercase;
    font: 700 17px/1.4 "Whitney A", "Whitney B";
    color: #44350C
}

@media screen and (max-width:767px) {
    section.employment form[name=TBE_theForm] td {
        display: block
    }

    section.employment form[name=TBE_theForm] td div {
        width: auto;
        float: none
    }
}

section.employment form input[type=submit] {
    margin: 25px auto 0;
    display: block;
    min-width: 120px;
    max-width: 320px
}

@media screen and (max-width:767px) {
    section.employment form input[type=submit] {
        font-size: 15px;
        padding: 10px 12px;
        min-width: 120px
    }
}

section.hero {
    border-top: 2px #60605B solid;
    border-bottom: 2px #60605B solid;
    padding-bottom: 30px
}

section.hero.pack .image p {
    position: relative;
    margin: 0;
    font-size: 12px;
    bottom: auto;
    left: auto;
    text-align: center;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
}

section.hero.pack .image img {
    border: 20px solid #FFF;
    width: 100%;
    margin-top: 40px;
    position: relative;
    margin-left: 0
}

section.hero.pack .text h3 {
    font-weight: 400
}

section.hero.pack .text h3 span {
    font-size: 20px;
    margin-left: 20px
}

section.hero.pack .text h5 {
    margin: 10px 0 0
}

section.hero .image {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 25.5814%;
    position: relative;
    height: 100%;
    z-index: 80
}

section.hero .image:last-child {
    margin-right: 0
}

section.hero .image p {
    position: absolute;
    width: 100%;
    bottom: 45px;
    left: 0;
    margin: 0 0 0 3%
}

section.hero .image img {
    width: 120%;
    margin-left: -10%;
    position: absolute
}

section.hero .image img.wide {
    width: 160%;
    margin-top: 50px;
    margin-left: -25%
}

section.hero .image img.top {
    margin-top: 0
}

section.hero .image img.middle {
    margin-top: 20px;
    margin-left: -15%
}

section.hero .image.mulch {
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%;
    float: right
}

section.hero .image.mulch:last-child {
    margin-right: 0
}

section.hero .image.mulch img.wide {
    width: 150%
}

section.hero .image a {
    color: #000;
    font: 15px/18px "Leviathan A", "Leviathan B";
    display: block;
    opacity: .3;
    text-transform: uppercase;
    text-align: center
}

section.hero .image a img {
    width: 21px;
    height: 21px;
    margin: 0 5px -5px 0;
    display: inline-block
}

section.hero .image a:hover {
    opacity: .7
}

section.hero .text {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 72.09302%;
    padding: 30px 0;
    position: relative;
    z-index: 98
}

section.hero .text.mulch {
    padding-top: 10px
}

section.hero .text:last-child {
    margin-right: 0
}

section.hero .text p {
    position: relative
}

section.hero .text p span {
    position: absolute;
    bottom: -15px;
    left: 0;
    font-size: 13px
}

section.hero .text p span a {
    text-decoration: underline;
    color: #000
}

section.hero .text p .btn {
    padding: 15px 30px;
    margin: 0;
    background: #bfbfbd;
    font: 700 22px/24px "Sentinel A", "Sentinel B";
    border: 4px solid #efefef
}

section.hero .text p .btn:hover {
    background: #efefef
}

section.hero.orange {
    background: #C66727
}

section.hero.orange .text p .btn {
    background: #e8c2a9;
    border: 4px solid #f9f0e9
}

section.hero.orange .text p .btn:hover {
    background: #f9f0e9
}

section.hero.brown {
    background: #8C5B37
}

section.hero.brown .text p .btn {
    background: #d1bdaf;
    border: 4px solid #f4efeb
}

section.hero.brown .text p .btn:hover {
    background: #f4efeb
}

section.hero.green {
    background: #677819
}

section.hero.green .text p .btn {
    background: #c2c9a3;
    border: 4px solid #f0f2e8
}

section.hero.green .text p .btn:hover {
    background: #f0f2e8
}

section.hero.tan {
    background: #A9A165
}

section.hero.tan .text p .btn {
    background: #ddd9c1;
    border: 4px solid #f6f6f0
}

section.hero.tan .text p .btn:hover {
    background: #f6f6f0
}

section.hero.pack {
    background: #a5a69c
}

section.hero.pack .text p .btn {
    background: #f7f8f2;
    border: 4px solid #fdfdfc
}

section.hero.pack .text p .btn:hover {
    background: #fdfdfc
}

section.hero.purple {
    background: #A5A2BF
}

section.hero.purple img {
    width: 200%;
    top: 48px;
    margin-left: -115%
}

section.hero.purple .text p .btn {
    background: #dbdae5;
    border: 4px solid #f6f6f9
}

section.hero.purple .text p .btn:hover {
    background: #f6f6f9
}

section.hero.grey {
    background: #888884
}

section.hero.grey .text p .btn {
    background: #bfbfbd;
    border: 4px solid #efefef
}

section.hero.grey .text p .btn:hover {
    background: #efefef
}

section.hero.teal {
    background: #39939B
}

section.hero.teal .text p .btn {
    background: #b0d4d7;
    border: 4px solid #ebf4f5
}

section.hero.teal .text p .btn:hover {
    background: #ebf4f5
}

section.hero.gold {
    background: #CE9929
}

section.hero.gold .text p .btn {
    background: #ebd6a9;
    border: 4px solid #faf5ea
}

section.hero.gold .text p .btn:hover {
    background: #faf5ea
}

section.hero h1 {
    text-align: left;
    line-height: 60px;
    margin: 20px 0 0;
    color: #FFF
}

section.hero h1 span {
    display: block;
    font-size: 40px;
    letter-spacing: -1px
}

section.hero h3 {
    font-size: 32px;
    line-height: 1.15;
    color: #000;
    margin: 0 0 15px;
    max-width: 380px
}

section.hero h4 {
    font-weight: 400;
    color: #FFF;
    max-width: 400px;
    font-size: 22px;
    margin: 0 0 24px
}

@media screen and (max-width:767px) {
    section.hero {
        padding-bottom: 0
    }

    section.hero .image {
        position: absolute;
        right: -10px;
        overflow: visible;
        height: 150%;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 44.18605%
    }

    section.hero .image img {
        position: absolute;
        top: 0;
        right: -50px;
        width: 130%;
        height: auto
    }

    section.hero .image:last-child {
        margin-right: 0
    }

    section.hero .image a {
        display: none
    }

    section.hero .text {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        position: relative;
        z-index: 999;
        padding: 20px 0 5px
    }

    section.hero .text:last-child {
        margin-right: 0
    }

    section.hero .text h1 {
        font-size: 44px;
        line-height: 46px
    }

    section.hero .text h1 span {
        font-size: 22px;
        line-height: 24px;
        letter-spacing: 0
    }

    section.hero .text h3 {
        font-size: 24px;
        padding-right: 20%
    }

    section.hero .text h4 {
        font-size: 17px;
        padding-right: 20%
    }

    section.hero .text h4 p {
        position: relative;
        bottom: auto;
        left: auto;
        background: 0 0
    }

    section.hero .text p {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #EBEDDF;
        margin: 0;
        padding: 0;
        z-index: 99999
    }

    section.hero .text p .btn {
        width: 100%;
        border: 0 !important;
        background: #E6AE00 !important;
        border-radius: 0;
        margin: 0;
        text-align: center;
        z-index: 100
    }

    section.hero .text p span {
        font-size: 11px;
        position: relative;
        width: 100%;
        text-align: center;
        display: block;
        padding: 5px;
        bottom: auto;
        top: auto
    }

    section.hero.pack .image {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        position: relative;
        right: auto;
        height: auto;
        text-align: center
    }

    section.hero.pack .image:last-child {
        margin-right: 0
    }

    section.hero.pack .image img {
        position: relative;
        left: auto;
        right: auto;
        border: 5px solid #FFF;
        top: auto;
        margin-top: 30px;
        width: auto;
        max-width: 100%;
        display: inline-block
    }

    section.hero.pack .text {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        padding: 0 0 40px
    }

    section.hero.pack .text h5 {
        font-size: 18px
    }

    section.hero.pack .text h1 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -1px
    }

    section.hero.pack .text:last-child {
        margin-right: 0
    }
}

section.althero {
    padding-bottom: 30px
}

section.althero h1 {
    text-align: left;
    font: 115px/97px BebasNeueRegular;
    color: #44350C;
    margin: 0;
    padding: 0 0 10px
}

section.althero h1 span {
    color: #17AA37;
    font-size: 115px;
    display: block
}

section.althero.internal h1 {
    font-size: 85px;
    line-height: 74px
}

section.althero .image {
    position: relative;
    height: 100%;
    z-index: 80
}

section.althero .image img {
    width: 110%;
    margin-left: -5%;
    position: absolute
}

section.althero .text {
    padding: 30px 0 30px 60px;
    position: relative;
    z-index: 98
}

section.althero .text p {
    position: relative
}

section.althero .text p span {
    position: absolute;
    bottom: -15px;
    left: 0;
    font-size: 13px
}

section.althero .text p span a {
    text-decoration: underline;
    color: #000
}

section.althero .text p .btn {
    padding: 15px 30px;
    margin: 0;
    background: #bfbfbd;
    font: 700 22px/24px "Sentinel A", "Sentinel B";
    border: 4px solid #efefef
}

section.althero .text p .btn:hover {
    background: #efefef
}

section.althero h3 {
    font-size: 20px;
    line-height: 1.15;
    color: #000;
    margin: 0 0 15px;
    padding: 0
}

section.althero h4 {
    font-weight: 400;
    color: #FFF;
    max-width: 400px;
    font-size: 22px;
    margin: 0 0 24px
}

@media screen and (max-width:767px) {
    section.althero {
        padding-bottom: 0
    }

    section.althero .image {
        position: absolute;
        right: -10px;
        overflow: visible;
        height: 150%;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 44.18605%
    }

    section.althero .image img {
        position: absolute;
        top: 0;
        right: -50px;
        width: 130%;
        height: auto
    }

    section.althero .image:last-child {
        margin-right: 0
    }

    section.althero .image a {
        display: none
    }

    section.althero .text {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        position: relative;
        z-index: 999;
        padding: 20px 0 5px
    }

    section.althero .text:last-child {
        margin-right: 0
    }

    section.althero .text h1 {
        font-size: 52px;
        line-height: 49px;
        letter-spacing: 0
    }

    section.althero .text h1 span {
        font-size: 42px;
        line-height: 24px;
        letter-spacing: 0
    }

    section.althero .text h3 {
        font-size: 20px;
        padding-right: 20%
    }

    section.althero .text h4 {
        font-size: 17px;
        padding-right: 20%
    }

    section.althero .text h4 p {
        position: relative;
        bottom: auto;
        left: auto;
        background: 0 0
    }

    section.althero .text p {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #EBEDDF;
        margin: 0;
        padding: 0;
        z-index: 99999
    }

    section.althero .text p .btn {
        width: 100%;
        border: 0 !important;
        background: #E6AE00 !important;
        border-radius: 0;
        margin: 0;
        text-align: center;
        z-index: 100
    }

    section.althero .text p span {
        font-size: 11px;
        position: relative;
        width: 100%;
        text-align: center;
        display: block;
        padding: 5px;
        bottom: auto;
        top: auto
    }

    section.althero.pack .image {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        position: relative;
        right: auto;
        height: auto;
        text-align: center
    }

    section.althero.pack .image:last-child {
        margin-right: 0
    }

    section.althero.pack .image img {
        position: relative;
        left: auto;
        right: auto;
        border: 5px solid #FFF;
        top: auto;
        margin-top: 30px;
        width: auto;
        max-width: 100%;
        display: inline-block
    }

    section.althero.pack .text {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        padding: 0 0 40px
    }

    section.althero.pack .text h5 {
        font-size: 18px
    }

    section.althero.pack .text h1 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -1px
    }

    section.althero.pack .text:last-child {
        margin-right: 0
    }
}

section.productselector h2 {
    padding-top: 0
}

section.productgrid {
    overflow: hidden;
    margin-bottom: 50px
}

section.productgrid .product {
    width: 16.666666%;
    position: relative;
    float: left;
    padding: 0
}

section.productgrid .product img {
    position: absolute;
    top: 0;
    width: 50%;
    left: 50%;
    margin-left: -25%
}

section.productgrid .product h2 {
    color: #FFF;
    font-size: 28px;
    letter-spacing: -1px
}

section.productgrid .product h2 span {
    display: block;
    font-size: 14px;
    letter-spacing: 0;
    margin-top: 3px
}

section.productgrid .product.pbooster img {
    width: 40%;
    margin-left: -20%
}

section.productgrid .product.ppotting-soil img {
    width: 60%;
    margin-left: -30%;
    top: 10px
}

section.productgrid .product.pnwgardenmulch img,
section.productgrid .product.ptwowaytopsoil img {
    width: 80%;
    margin-left: -40%
}

section.productgrid .product.pnwgardenmulch img {
    top: 20px;
    width: 70%;
    margin-left: -35%
}

section.productgrid .product.p60-40-lawn-mix img {
    top: 20px
}

section.productgrid .product.orange a {
    background: #C66727
}

section.productgrid .product.orange a:hover {
    background: #b25d23
}

section.productgrid .product.green a {
    background: #677819
}

section.productgrid .product.green a:hover {
    background: #5d6c17
}

section.productgrid .product.tan a {
    background: #A9A165
}

section.productgrid .product.tan a:hover {
    background: #98915b
}

section.productgrid .product.purple a {
    background: #A5A2BF
}

section.productgrid .product.purple a:hover {
    background: #9592ac
}

section.productgrid .product.teal a {
    background: #39939B
}

section.productgrid .product.teal a:hover {
    background: #33848c
}

section.productgrid .product.grey a {
    background: #60605B
}

section.productgrid .product.grey a:hover {
    background: #565652
}

section.productgrid .product.gold a {
    background: #CE9929
}

section.productgrid .product.gold a:hover {
    background: #b98a25
}

section.productgrid .product a {
    display: block;
    height: 250px;
    position: relative;
    padding: 20px 20px 0;
    color: #FFF
}

section.productgrid .product a:hover p {
    padding-bottom: 25px
}

section.productgrid .product p {
    font-size: 13px;
    padding: 10px 0 20px
}

section.productgrid .product .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 0 0 15px
}

@media screen and (max-width:1100px) {
    section.productgrid .product {
        width: 33.33333%
    }
}

@media screen and (max-width:767px) {
    section.productgrid .product {
        width: 50%
    }

    section.productgrid .product h2 {
        font-size: 22px
    }

    section.productgrid .product p {
        font-size: 12px
    }
}

section.special-head h2 {
    font: 40px/1 BebasNeueRegular;
    text-align: center;
    color: #878151;
    padding: 30px
}

section.special-head h2 span {
    color: #bab484
}

section.nonprofit-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

section.nonprofit-list .nonprofit-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #00f;
    overflow: hidden
}

section.nonprofit-list .nonprofit-item h2 {
    font-size: 21px
}

section.nonprofit-list .nonprofit-item span {
    display: block;
    position: absolute;
    bottom: 30px;
    left: -162px;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 20px;
    background: rgba(255, 255, 255, .4);
    color: #000;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

section.nonprofit-list .nonprofit-item p {
    font-size: 15px
}

section.nonprofit-list .nonprofit-item a {
    color: #FFF;
    display: block;
    position: relative;
    height: 248px;
    padding: 20px;
    background: rgba(0, 0, 0, .2)
}

section.nonprofit-list .nonprofit-item a:hover {
    background: rgba(0, 0, 0, .1)
}

section.nonprofit-list .nonprofit-item a:hover span {
    display: block;
    left: 0
}

section.nonprofit-list .nonprofit-item a.moreinfo {
    height: auto;
    background: rgba(0, 0, 0, .3);
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px
}

section.nonprofit-list .nonprofit-item a.moreinfo:hover {
    background: rgba(0, 0, 0, .5)
}

@media screen and (max-width:767px) {
    section.nonprofit-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column
    }

    section.nonprofit-list .nonprofit-item a {
        height: auto
    }
}

section.description {
    padding-top: 20px
}

section.description.orange h3 {
    color: #C66727
}

section.description.green h3 {
    color: #677819
}

section.description.tan h3 {
    color: #A9A165
}

section.description.purple h3 {
    color: #A5A2BF
}

section.description.teal h3 {
    color: #39939B
}

section.description.grey h3 {
    color: #60605B
}

section.description.gold h3 {
    color: #CE9929
}

section.description h3 {
    font-size: 40px;
    line-height: 1.2;
    color: #C66727
}

section.description .badge {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 25.5814%
}

section.description .badge:last-child {
    margin-right: 0
}

section.description .badge img {
    margin: 30px auto;
    max-width: 130px;
    display: block
}

section.description .local {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 34.88372%
}

section.description .local:last-child {
    margin-right: 0
}

section.description .local p {
    font: 400 20px/1.2 "Sentinel A", "Sentinel B"
}

@media screen and (max-width:767px) {
    section.description h3 {
        font-size: 32px
    }

    section.description .badge {
        display: none
    }

    section.description .local {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    section.description .local:last-child {
        margin-right: 0
    }

    section.description .local p {
        font-size: 17px;
        padding-right: 25px
    }
}

section .features {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 62.7907%;
    margin-left: 27.90698%
}

section .features:last-child {
    margin-right: 0
}

section .features>div {
    display: inline-block;
    width: 19%;
    text-align: center;
    vertical-align: top
}

section .features>div img {
    height: 40px;
    display: inline-block
}

section .features>div p {
    font-size: 16px;
    line-height: 1.2;
    max-width: 78px;
    display: inline-block
}

section .features>div.solo {
    width: 60%;
    text-align: left
}

section .features>div.solo p {
    max-width: 300px;
    font-size: 20px
}

section .features>div.solo img {
    float: left;
    width: 40px;
    margin: 0 15px 0 0
}

@media screen and (max-width:767px) {
    section .features {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        margin-left: 0
    }

    section .features:last-child {
        margin-right: 0
    }

    section .features h5 {
        font-size: 16px
    }

    section .features>div {
        width: 31%;
        margin-bottom: 20px
    }
}

section.more {
    overflow: hidden
}

section.more .pack,
section.more .soil {
    width: 50%;
    float: left;
    height: 200px
}

section.more .soil {
    background: #a29a86
}

section.more .soil h2,
section.more .soil p {
    text-align: right;
    margin-left: 50px
}

section.more .soil img {
    float: right
}

section.more .pack {
    background: #8f866d
}

section.more img {
    width: 37%;
    max-width: 220px;
    float: left;
    margin: 25px 30px
}

section.more a {
    color: #FFF
}

section.more h2 {
    margin: 30px 0 20px;
    font-size: 27px;
    color: #ecebe7
}

section.more .btn {
    font: 700 15px/20px "Sentinel A", "Sentinel B";
    padding: 10px 20px;
    background: #736849;
    color: #FFF
}

@media screen and (max-width:767px) {

    section.more .pack,
    section.more .soil {
        width: 100%;
        height: auto;
        position: relative
    }

    section.more .pack a,
    section.more .soil a {
        display: block;
        padding: 20px 20px 40px
    }

    section.more .pack h2,
    section.more .soil h2 {
        margin: 0 0 20px
    }

    section.more .pack h2,
    section.more .pack p,
    section.more .soil h2,
    section.more .soil p {
        text-align: left;
        position: relative;
        z-index: 99;
        margin-left: 0
    }

    section.more .pack img,
    section.more .soil img {
        position: absolute;
        right: -20%;
        bottom: 20px;
        width: 60%;
        margin: 0
    }
}

section.compostable img {
    max-width: 100%;
    width: auto;
    height: auto !important
}

section.related {
    background: #dfe1d4;
    margin: 40px 0 0;
    padding: 50px 0
}

@media screen and (max-width:767px) {
    section.related {
        margin: 0;
        padding-top: 30px
    }
}

section.related .col {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 23.25581%
}

section.related .col:last-child {
    margin-right: 0
}

section.related .col ul {
    margin: 0;
    padding: 0;
    list-style: none
}

section.related .col li {
    font-size: 15px;
    padding: 10px 0 3px
}

section.related .col h4 {
    text-transform: uppercase
}

@media screen and (max-width:767px) {
    section.related .col {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        padding-bottom: 30px
    }

    section.related .col:last-child {
        margin-right: 0
    }
}

section.related h5 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #60605B
}

section.related .uses {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 25.5814%;
    margin-left: 9.30233%
}

section.related .uses:last-child {
    margin-right: 0
}

section.related .uses ul {
    margin: 10px 0 40px
}

section.related .uses li {
    list-style: none;
    line-height: 1.2
}

section.related .uses li:first-child a {
    border-top: 0
}

section.related .uses a {
    border-top: 1px #60605B dotted;
    display: block;
    padding: 10px 40px 10px 10px;
    margin-left: -10px;
    color: #60605B;
    position: relative
}

section.related .uses a img {
    position: absolute;
    top: 50%;
    height: 21px;
    width: 21px;
    margin-top: -10px;
    right: 10px;
    opacity: .4
}

section.related .uses a:hover {
    color: #000
}

section.related .uses a:hover img {
    opacity: .8
}

section.related .products {
    margin-left: 9.30233%;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%
}

section.related .products:last-child {
    margin-right: 0
}

section.related .products h5 {
    margin-left: 20px
}

section.related .products .item {
    margin: 0;
    text-align: left
}

section.related .products .item a {
    margin-left: 0
}

section.related .products .item a.quick {
    right: 0
}

section.related .products .item a img {
    right: 60px
}

section.related .products .item a em {
    position: absolute;
    right: 46px;
    bottom: 15px;
    font: 700 11px/1 "Whitney A", "Whitney B";
    width: 44px;
    text-align: center;
    color: #888
}

section.related .products .item a.quick em {
    right: 0
}

section.related .products .item .btn {
    background: #E6AE00;
    margin: 0 10px 0 0
}

section.related .products .item .btn:hover {
    background: #ebbe33
}

section.related.double h2 {
    color: #44350C;
    padding: 0 40px 40px 10px;
    font-size: 32px;
    margin-left: 13.95349%
}

section.related.double .products {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    margin-left: 13.95349%;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 90.69767%;
    vertical-align: top
}

section.related.double .products:last-child {
    margin-right: 0
}

section.related.double .products h5 {
    margin-top: 0
}

section.related.double .products .group {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 40px;
    margin-left: -10px
}

@media screen and (max-width:767px) {

    section.related.double .products,
    section.related.double h2 {
        margin-left: 0
    }

    section.related.double h2 {
        padding-left: 20px
    }

    section.related.double .products {
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1
    }

    section.related.double .products .group {
        margin-left: 0
    }
}

@media screen and (max-width:767px) {
    section.related article {
        padding: 0
    }

    section.related .products,
    section.related .uses {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        margin-left: 0
    }

    section.related .products:last-child,
    section.related .uses:last-child {
        margin-right: 0
    }

    section.related .products .item,
    section.related .uses .item {
        width: 100%
    }

    section.related .uses h5 {
        margin-left: 20px
    }

    section.related .uses a {
        margin-left: 0;
        padding-left: 20px
    }

    section.related .uses a img {
        right: 35px
    }

    section.related .products {
        margin-bottom: 40px
    }
}

section.compare .column {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 34.88372%;
    margin-left: 13.95349%
}

section.compare .column:last-child {
    margin-right: 0
}

section.compare .column h3 {
    font-size: 90px;
    line-height: 1
}

section.compare .column h4 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 30px
}

section.compare .column li {
    font-size: 17px;
    list-style: none;
    margin: 10px 0;
    position: relative;
    padding-left: 35px
}

section.compare .column.Yes h3 {
    color: #677819
}

section.compare .column.Yes li:before {
    position: absolute;
    left: 0;
    top: 3px;
    content: '';
    width: 20px;
    height: 20px;
    background: url(/img/check.svg) no-repeat;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

section.compare .column.No h3 {
    color: #F42B01
}

section.compare .column.No li:before {
    position: absolute;
    left: 0;
    top: 3px;
    content: '';
    width: 20px;
    height: 20px;
    background: url(/img/cancel.svg) no-repeat;
    -webkit-background-size: 18px 18px;
    background-size: 18px 18px
}

@media screen and (max-width:767px) {
    section.compare .column {
        margin-left: 0;
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    section.compare .column:last-child {
        margin-right: 0
    }
}

section.community {
    background: #f3e6ca;
    padding-bottom: 60px
}

section.community h2 {
    color: #CE9929;
    padding: 100px 0 30px;
    font-size: 60px
}

section.community img {
    display: block
}

section.community article {
    background: url(/img/compost-cycle.jpg) no-repeat top right;
    -webkit-background-size: 50% auto;
    background-size: 50% auto
}

section.community .calendar {
    width: 45%;
    margin-left: 55%;
    padding-top: 220px
}

section.community .calendar .btn {
    background: #CE9929;
    color: #FFF;
    margin-top: 20px
}

section.community .calendar h3 {
    text-transform: uppercase;
    font: 24px/1.1 "Leviathan A", "Leviathan B";
    margin-bottom: 30px;
    color: #CE9929
}

section.community .calendar li {
    list-style: none;
    position: relative;
    padding: 7px 0 7px 80px
}

section.community .calendar strong {
    font: 22px/1 "Leviathan A", "Leviathan B";
    position: absolute;
    left: 0;
    top: 12px;
    width: 60px;
    color: #a57a21;
    text-align: right
}

section.community .calendar em {
    font-size: 13px;
    font-style: normal;
    text-transform: uppercase;
    display: block
}

section.community .calendar h4 {
    font-size: 18px;
    line-height: 1.1;
    margin: 0 0 2px;
    padding: 0
}

section.community .calendar p {
    font-size: 12px;
    margin: 0;
    padding: 0
}

section.community .calendar .multi strong {
    font-size: 17px
}

section.community .spotlight {
    width: 48%;
    float: left
}

section.community .spotlight img {
    float: left;
    margin: 25px 15px 10px -90px;
    width: 130px;
    height: auto
}

section.community .spotlight p {
    font-size: 15px
}

section.community .spotlight h3 {
    font-size: 28px;
    line-height: 1.2
}

section.community .spotlight>h3 {
    color: #CE9929;
    font-size: 22px;
    padding: 0 0 20px
}

section.community .spotlight>p {
    padding: 10px 0 40px
}

section.community .spotlight>p .btn {
    background: #CE9929;
    color: #FFF
}

section.community .spotlight>p .btn:hover {
    background: #c49127
}

@media screen and (max-width:990px) {
    section.community .spotlight img {
        float: right;
        margin: 25px 0 10px 20px;
        width: 100px
    }
}

section.community.mainlanding .bigbutton {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 100%
}

section.community.mainlanding .bigbutton:last-child {
    margin-right: 0
}

section.community.landing,
section.community.landing article {
    background: 0 0
}

section.community.landing .calendar {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 76.74419%;
    margin-left: 13.95349%;
    padding-top: 0
}

section.community.landing .calendar:last-child {
    margin-right: 0
}

section.community.landing .calendar h4 {
    font-size: 24px
}

section.community.landing .calendar p {
    font-size: 16px
}

@media screen and (max-width:767px) {
    section.community.landing .calendar {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        margin-left: 0
    }

    section.community.landing .calendar:last-child {
        margin-right: 0
    }
}

@media screen and (max-width:767px) {
    section.community h2 {
        font-size: 36px
    }

    section.community .calendar,
    section.community .spotlight {
        width: 100%;
        margin-left: 0;
        overflow: hidden
    }

    section.community .calendar {
        padding-top: 30px
    }
}

section.video {
    padding: 0 15% 60px
}

section.video h2 {
    text-align: center;
    color: #CE9929;
    font-size: 20px;
    letter-spacing: 0;
    padding: 15px 0 30px
}

section.video .videobox {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0
}

section.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: rgba(0, 0, 0, .7) 0 15px 30px;
    box-shadow: rgba(0, 0, 0, .7) 0 15px 30px
}

section.itemlist ul {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 76.74419%;
    margin-left: 13.95349%
}

section.itemlist ul:last-child {
    margin-right: 0
}

section.itemlist li {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding: 20px;
    border-bottom: 20px #EBEDDF solid;
    background: #FFF
}

section.itemlist li::after {
    clear: both;
    content: "";
    display: table
}

section.itemlist .info {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%
}

section.itemlist .info:last-child {
    margin-right: 0
}

section.itemlist .info p {
    font-size: 15px;
    font-weight: 400
}

section.itemlist .photo {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 53.48837%
}

section.itemlist .photo:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    section.itemlist ul {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        margin-left: 0
    }

    section.itemlist ul:last-child {
        margin-right: 0
    }

    section.itemlist .info,
    section.itemlist .photo {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 81.39535%;
        margin-left: 9.30233%
    }

    section.itemlist .info:last-child,
    section.itemlist .photo:last-child {
        margin-right: 0
    }
}

.filters {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 34.88372%;
    margin-left: 9.30233%
}

.filters:last-child {
    margin-right: 0
}

.filters h4 {
    font: 13px/1.2 "Leviathan A", "Leviathan B";
    color: #60605B;
    text-transform: uppercase;
    margin: 40px 0 10px
}

.filters ul {
    list-style: none;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400
}

.filters li {
    margin: 3px 0 3px -5px
}

.filters li::first-letter {
    text-transform: uppercase
}

.filters a {
    color: #000;
    padding: 2px 5px
}

.filters a.active,
.filters a:hover {
    background: #FFF
}

div.errors {
    color: #FFF;
    background: #c32201;
    margin-top: 10px
}

div.errors label {
    padding: 5px 20px;
    margin: 0;
    color: #FFF
}

.home-order {
    text-align: center;
    padding: 40px;
    font-size: 30px
}

#checkout {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 58.13953%;
    margin-top: 50px
}

#checkout:last-child {
    margin-right: 0
}

#checkout input[type=text] {
    font-size: 30px;
    padding: 4px 8px;
    border: 1px solid #FFF
}

#checkout input[type=text].error {
    border: 1px solid #F42B01
}

#checkout hr {
    display: block;
    margin: 35px 0 20px;
    background: 0 0;
    border: 0;
    border-bottom: 1px #999 dotted
}

#checkout .btn {
    padding: 15px 30px;
    margin: 0;
    background: #e9b61a;
    font: 700 22px/24px "Sentinel A", "Sentinel B";
    border: 4px solid #cf9d00
}

#checkout .btn:hover {
    border: 4px solid #e9b61a
}

#checkout h2 {
    padding: 10px 0 20px
}

#checkout h4 {
    font: 19px/1.2 "Leviathan A", "Leviathan B";
    margin: 20px 0 10px;
    text-transform: uppercase
}

.medium {
    width: 65%;
    float: left
}

.medium span {
    width: 100%;
    display: block
}

.medium select {
    width: 44%;
    float: left;
    margin-right: 3%;
    font-size: 30px
}

@media screen and (max-width:767px) {
    .medium {
        width: 100%
    }
}

.zip {
    width: 25%;
    float: left
}

.state {
    width: 20%;
    margin-right: 3%;
    float: left
}

.small {
    width: 35%;
    float: left
}

@media screen and (max-width:767px) {
    .small {
        width: 100%
    }
}

.half {
    width: 49%;
    float: left;
    margin-right: 3%
}

.half.second {
    margin-right: 0;
    width: 48%
}

.rain {
    padding: 0;
    height: 600px;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative
}

.rain article {
    padding-top: 60px
}

.rain h2 {
    background: rgba(5, 76, 145, .8);
    text-align: center;
    font-size: 50px;
    text-transform: none;
    padding: 20px;
    color: #FFF;
    letter-spacing: 0;
    z-index: 99;
    position: absolute;
    top: 70px;
    width: 100%
}

.rain .text {
    position: absolute;
    padding: 190px 30px 20px;
    top: 0;
    right: 10%;
    height: 600px;
    background: rgba(57, 147, 155, .7);
    font-size: 22px;
    font-weight: 700;
    width: 330px;
    color: #FFF
}

.rain .btn {
    padding: 15px 20px;
    background: #054C91;
    color: #FFF;
    display: inline-block;
    margin-top: 20px
}

@media screen and (max-width:990px) {
    .rain h2 {
        font-size: 40px
    }
}

@media screen and (max-width:767px) {
    .rain {
        height: 450px
    }

    .rain article {
        padding-top: 0;
        height: 100%;
        position: static
    }

    .rain h2 {
        font-size: 30px;
        top: 0
    }

    .rain .text {
        padding: 25px 15px;
        right: 0;
        top: auto;
        bottom: 0;
        text-align: center;
        width: auto;
        height: auto;
        font-size: 17px
    }

    .rain p {
        padding: 0;
        margin: 0
    }
}

.sidetotal.reverse {
    background: #f3d780;
    color: #000
}

.sidetotal.reverse strong {
    margin-left: 20px !important;
    font-weight: 700
}

.ui-datepicker {
    width: 260px;
    background: #FFF;
    border: 1px solid #D7D7CC;
    position: relative;
    padding: 5px
}

.ui-datepicker-next {
    position: absolute;
    right: 10px;
    top: 15px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 13px
}

.ui-datepicker-prev {
    position: absolute;
    left: 10px;
    top: 15px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 13px
}

.ui-datepicker table {
    width: 100%;
    margin: 20px 0 5px
}

.ui-datepicker table td,
.ui-datepicker table th {
    text-align: center
}

.ui-datepicker table td a {
    display: inline-block;
    text-align: center;
    padding: 5px
}

.ui-datepicker-title {
    text-align: center;
    padding: 6px 0 0;
    font-weight: 700
}

.sidebar {
    margin-top: 30px;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 39.53488%;
    font: 400 17px/18px "Sentinel A", "Sentinel B"
}

.sidebar h3 {
    margin: 0 0 10px;
    padding: 30px 0 0;
    text-align: center
}

.sidebar h3 a {
    font: 700 14px/17px "Whitney A", "Whitney B";
    background: #80807c;
    color: #FFF;
    padding: 2px 12px;
    border-radius: 6px;
    margin-left: 10px
}

.sidebar:last-child {
    margin-right: 0
}

.sidebar .fees strong,
.sidebar .tax strong {
    font-size: 14px
}

.sidebar .fees,
.sidebar .product,
.sidebar .sidetotal {
    height: 50px;
    padding-right: 35%
}

.sidebar .fees p,
.sidebar .product p,
.sidebar .sidetotal p {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    margin: 0;
    padding: 0
}

.sidebar .fees a,
.sidebar .product a,
.sidebar .sidetotal a {
    display: inline-block;
    vertical-align: middle
}

.sidebar .fees a span,
.sidebar .product a span,
.sidebar .sidetotal a span {
    font-size: 13px;
    color: #60605B
}

.sidebar .product {
    padding-left: 50px
}

.sidebar .product p strong {
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    width: 40px;
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    font-weight: 700;
    border-right: 1px #CCC solid;
    margin-right: 5px
}

.sidebar .product p strong span {
    display: block;
    position: absolute;
    bottom: 5px;
    left: 0;
    font: 12px/15px "Whitney A", "Whitney B";
    width: 40px;
    text-align: center
}

.sidebar strong {
    font-weight: 400
}

@media screen and (max-width:767px) {

    #checkout,
    .sidebar {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    #checkout:last-child,
    .sidebar:last-child {
        margin-right: 0
    }
}

.changezip {
    display: block;
    font-size: 16px;
    padding: 20px
}

.carttotal {
    position: absolute;
    top: 0;
    left: 0
}

.carttotal strong {
    position: absolute;
    top: 22px;
    left: 25px;
    background: #dc2701;
    padding: 2px;
    min-width: 15px;
    height: 15px;
    border-radius: 100%;
    font: 10px/12px "Leviathan A", "Leviathan B";
    color: #FFF;
    text-align: center
}

.info {
    margin: 15px 0 30px
}

.info p {
    font-size: 13px;
    font-weight: 700
}

.productlist {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 44.18605%;
    margin-left: 9.30233%;
    margin-top: 20px
}

.productlist:last-child {
    margin-right: 0
}

.productlist .item em {
    position: absolute;
    right: 28px;
    bottom: 15px;
    font: 700 11px/1 "Whitney A", "Whitney B";
    width: 44px;
    text-align: center;
    color: #888
}

.productlist .item a.quick em {
    right: 0
}

@media screen and (max-width:767px) {
    .productlist {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%;
        margin-left: 0
    }

    .productlist:last-child {
        margin-right: 0
    }
}

.footeraddress {
    background-color: #026d36
}

.footeraddress h5 {
    padding: 0 0 10px;
    margin: 0
}

.footeraddress article>div,
.footeraddress>div {
    display: inline-block;
    vertical-align: top;
    width: 25%
}

.footeraddress article>div p,
.footeraddress>div p {
    font-size: 17px;
    padding: 5px 0 0
}

.footeraddress article>div em,
.footeraddress>div em {
    font-size: 13px;
    line-height: 1.2;
    margin-top: 4px;
    display: block;
    font-style: normal
}

.footeraddress article>div.hours,
.footeraddress>div.hours {
    width: 21%;
    float: left
}

.footeraddress article>div.hours p,
.footeraddress>div.hours p {
    padding: 15px 0 0;
    font-size: 15px
}

.footeraddress article>div.hours p.small,
.footeraddress>div.hours p.small {
    width: 100%;
    font-size: 12px;
    margin: 0;
    padding: 20px 10px 0 0;
    text-align: left;
    height: auto;
    line-height: 1;
    float: none
}

.footeraddress article>div.hours p.small a,
.footeraddress>div.hours p.small a {
    padding: 0;
    opacity: .8
}

.footeraddress article>div.hours p.small a:hover,
.footeraddress>div.hours p.small a:hover {
    background: 0 0;
    opacity: 1;
    text-decoration: none
}

.footeraddress a {
    display: block;
    padding: 10px
}

.footeraddress a:hover {
    background: #d1eed7;
    color: #000
}

.footeraddress p {
    text-align: left;
    font-size: 14px;
    line-height: 17px
}

.footeraddress span {
    font-weight: 700;
    display: block;
    font-size: 12px;
    text-transform: uppercase
}

.locator form {
    opacity: 1;
    max-width: 500px
}

.locator form label {
    font-size: 12px;
    color: #44350C
}

.locator form button,
.locator form input[type=text],
.locator form select {
    float: left;
    font-size: 16px;
    line-height: 20px;
    padding: 7px 10px;
    margin-right: 2%
}

.locator form select {
    width: 33%;
    float: left
}

.locator form input[type=text] {
    width: 53%
}

.locator form path {
    fill: #EBEDDF;
    stroke: #44350C
}

.locator form button {
    border: 0;
    background: 0;
    width: 9%;
    padding: 0;
    margin-right: 0
}

.locator form svg {
    vertical-align: top;
    width: 100%;
    height: auto;
    margin: 6px 0
}

.footer {
    background-color: #026d36;
    overflow: hidden;
    font-size: 13px;
    color: #FFF;
    padding: 40px 0
}

.footer a {
    color: #FFF
}

.footer a:hover {
    background: rgba(0, 0, 0, .2);
    color: #FFF
}

.footer p {
    color: #a9cb40;
    padding: 16px 0 12px;
    line-height: 15px
}

.footer svg {
    height: auto
}

.footer path {
    fill: #FFF
}

.footer h5 {
    font-size: 16px
}

.footer .footeraddress {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 72.09302%
}

.footer .footeraddress:last-child {
    margin-right: 0
}

.footer.top {
    padding: 0
}

.footer.top .find {
    position: relative;
    background: #03572B;
    text-align: left;
    width: 100%;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    padding: 12px 0 2px
}

.footer.top .find .phone {
    background: 0 0;
    padding: 1px 10px;
    margin: 0;
    font: 700 16px/22px "Whitney A", "Whitney B";
    border-radius: 9px;
    opacity: .8;
    position: relative;
    left: 0;
    float: left
}

.footer.top .find .phone:hover {
    background: rgba(255, 255, 255, .2)
}

.footer.top .find .phone svg {
    width: 16px;
    height: 16px;
    margin: 5px 5px 0 0
}

.footer.top .find .phoneblock {
    width: 18%;
    float: left;
    margin-right: 20px
}

.footer.top .find form {
    float: left;
    width: 75%;
    position: relative;
    overflow: visible
}

.footer.top .find form strong {
    padding: 5px 20px 15px;
    font-weight: 700;
    font-size: 16px;
    line-height: 15px;
    margin: 0 auto;
    float: left
}

.footer.top .find form strong svg {
    width: 16px;
    height: 16px;
    margin: 0 5px 0 0
}

.footer.top .find form strong path {
    fill: #FFF
}

.footer.top .find form div {
    overflow: visible
}

.footer.top .find form label {
    font-size: 12px;
    color: #FFF
}

.footer.top .find form button,
.footer.top .find form input[type=text],
.footer.top .find form select {
    float: left;
    font-size: 16px;
    line-height: 20px;
    padding: 6px 10px;
    margin-right: 2%;
    margin-top: -3px
}

.footer.top .find form select {
    width: 20%;
    float: left
}

.footer.top .find form input[type=text] {
    width: 43%
}

.footer.top .find form path {
    fill: #03572B
}

.footer.top .find form button {
    border: 0;
    background: 0;
    width: 5%;
    padding: 0;
    margin-right: 0
}

.footer.top .find form svg {
    vertical-align: top;
    width: 21px;
    float: left;
    margin: 0
}

.footer.top .find svg {
    height: auto;
    display: block;
    float: left;
    margin: 10px 0 5px
}

@media screen and (max-width:767px) {
    .footer.top .find {
        display: none
    }
}

@media screen and (max-width:990px) {
    .footer.top article {
        padding: 0 20px
    }
}

@media screen and (max-width:850px) {
    .footer.top article {
        padding: 0 0 0 10px
    }
}

.footer.top .footeraddress {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 100%
}

.footer.top .footeraddress:last-child {
    margin-right: 0
}

@media screen and (max-width:767px) {
    .footer.top .footeraddress {
        display: none
    }
}

.footer.top .footeraddress article>div,
.footer.top .footeraddress>div {
    width: auto;
    float: left
}

.footer.top .footeraddress article>div a,
.footer.top .footeraddress>div a {
    padding: 16px 12% 20px;
    opacity: .8;
    width: auto
}

.footer.top .footeraddress article>div p,
.footer.top .footeraddress>div p {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    padding: 0
}

.footer.top .footeraddress article>div em,
.footer.top .footeraddress>div em {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 4px;
    display: block;
    font-style: normal;
    white-space: nowrap
}

.footer.top .footeraddress article>div.hours,
.footer.top .footeraddress>div.hours {
    padding-top: 10px;
    min-width: 185px;
    float: left
}

.footer.top .footeraddress article>div.hours span,
.footer.top .footeraddress>div.hours span {
    width: 80px;
    font-size: 11px;
    margin: 2px 0 0;
    float: left
}

.footer.top .footeraddress article>div.hours p,
.footer.top .footeraddress>div.hours p {
    padding: 5px 0 0;
    font-size: 14px;
    font-weight: 400
}

.footer.top .footeraddress article>div.hours p.small,
.footer.top .footeraddress>div.hours p.small {
    width: 100%;
    font-size: 12px;
    margin: 0;
    padding: 5px 20px 15px 0;
    text-align: center;
    height: auto;
    line-height: 1;
    float: none
}

.footer.top .footeraddress article>div.hours p.small a,
.footer.top .footeraddress>div.hours p.small a {
    padding: 0;
    opacity: .8
}

.footer.top .footeraddress article>div.hours p.small a:hover,
.footer.top .footeraddress>div.hours p.small a:hover {
    background: 0 0;
    opacity: 1;
    text-decoration: none
}

@media screen and (max-width:990px) {

    .footer.top .footeraddress article>div a,
    .footer.top .footeraddress>div a {
        padding: 16px 12px 20px
    }

    .footer.top .footeraddress article>div em,
    .footer.top .footeraddress>div em {
        font-size: 11px
    }

    .footer.top .footeraddress article>div.hours,
    .footer.top .footeraddress>div.hours {
        min-width: 150px
    }

    .footer.top .footeraddress article>div.hours span,
    .footer.top .footeraddress>div.hours span {
        width: 70px;
        font-size: 9px
    }

    .footer.top .footeraddress article>div.hours p,
    .footer.top .footeraddress>div.hours p {
        font-size: 12px;
        padding: 4px 0 0
    }
}

@media screen and (max-width:850px) {

    .footer.top .footeraddress article>div a,
    .footer.top .footeraddress>div a {
        padding: 14px 9px 18px
    }
}

@media screen and (max-width:767px) {

    .footer.top .footeraddress article>div.find,
    .footer.top .footeraddress>div.find {
        width: 48%;
        bottom: auto;
        right: 0
    }
}

.footer .footercolumn {
    padding-top: 10px;
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 9.76744%
}

.footer .footercolumn svg {
    margin-right: 10px
}

.footer .footercolumn:last-child {
    margin-right: 0
}

.footer .footercolumn.subnav {
    float: left;
    display: block;
    margin-right: 2.32558%;
    width: 13.48837%
}

.footer .footercolumn.subnav:last-child {
    margin-right: 0
}

.footer .footercolumn ul li {
    font-size: 14px;
    line-height: 16px;
    list-style: none;
    padding-bottom: 10px
}

@media screen and (max-width:767px) {
    .footer {
        padding-bottom: 100px
    }

    .footer h5 {
        text-align: center
    }

    .footer .footeraddress {
        float: left;
        display: block;
        margin-right: 2.32558%;
        width: 100%
    }

    .footer .footeraddress:last-child {
        margin-right: 0
    }

    .footer .footeraddress>div {
        width: 58%
    }

    .footer .footeraddress>div.hours {
        width: 37%;
        float: right
    }

    .footer .footercolumn,
    .footer .footercolumn.subnav {
        display: none
    }
}

form h2 label {
    letter-spacing: 0;
    font-size: 18px;
    text-transform: none !important
}

form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 40px
}

form fieldset.window {
    margin: 0 0 10px
}

form legend {
    font-family: HelveticaBoldCondensed;
    font-size: 40px;
    line-height: 60px;
    text-transform: uppercase
}

form label {
    display: block;
    font: 700 14px/18px "Whitney A", "Whitney B";
    margin: 15px 0 0;
    text-align: left;
    text-transform: uppercase;
    color: #60605B;
    z-index: 99999;
    position: relative
}

form label.radio {
    color: #666;
    text-transform: none;
    font-size: 18px;
    cursor: pointer
}

form label.radio:hover {
    color: #000
}

form label.radio input {
    float: left;
    margin-right: 10px;
    margin-left: 2px
}

form input[type=color],
form input[type=date],
form input[type=datetime-local],
form input[type=datetime],
form input[type=email],
form input[type=month],
form input[type=number],
form input[type=password],
form input[type=search],
form input[type=tel],
form input[type=text],
form input[type=time],
form input[type=url],
form input[type=week],
form textarea {
    border: 0;
    width: 100%;
    color: #333;
    display: block;
    padding: 6px;
    margin-top: 5px;
    font: 700 20px/26px "Whitney A", "Whitney B";
    border-radius: 4px
}

form div {
    overflow: hidden
}

form .radio label {
    text-transform: none;
    font-size: 18px
}

form .radio input {
    float: left;
    margin-right: 10px;
    margin-top: 2px
}

form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: 700 20px/33px "Whitney A", "Whitney B";
    padding: 6px 25px 6px 10px;
    margin-top: 5px;
    border: 0;
    position: relative;
    background: #FFF url(/icons/downarrow.svg) no-repeat right 10px top 17px;
    -webkit-background-size: 13px auto;
    background-size: 13px auto;
    display: block;
    color: #333;
    width: 100%;
    border-radius: 4px
}

@media screen and (max-width:767px) {
    form select {
        line-height: 24px
    }
}

form option {
    font-size: 20px
}

form .btns {
    text-align: center;
    margin: 10px 0 0
}

form input[type=submit] {
    padding: 10px 24px;
    font-size: 20px;
    display: inline-block;
    background: #E6AE00;
    color: #1A1919;
    border: 0;
    font-weight: 700;
    border-radius: 9px;
    -webkit-box-shadow: 0 6px 20px -4px rgba(0, 0, 0, .2);
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, .2)
}

form input[type=submit]:hover {
    background: #e7b008
}

form input[type=color]:focus,
form input[type=color]:hover,
form input[type=date]:focus,
form input[type=date]:hover,
form input[type=datetime-local]:focus,
form input[type=datetime-local]:hover,
form input[type=datetime]:focus,
form input[type=datetime]:hover,
form input[type=email]:focus,
form input[type=email]:hover,
form input[type=month]:focus,
form input[type=month]:hover,
form input[type=number]:focus,
form input[type=number]:hover,
form input[type=password]:focus,
form input[type=password]:hover,
form input[type=search]:focus,
form input[type=search]:hover,
form input[type=tel]:focus,
form input[type=tel]:hover,
form input[type=text]:focus,
form input[type=text]:hover,
form input[type=time]:focus,
form input[type=time]:hover,
form input[type=url]:focus,
form input[type=url]:hover,
form input[type=week]:focus,
form input[type=week]:hover,
form textarea:focus,
form textarea:hover {
    border: 0;
    outline: 0
}

form input[type=color]:active,
form input[type=date]:active,
form input[type=datetime-local]:active,
form input[type=datetime]:active,
form input[type=email]:active,
form input[type=month]:active,
form input[type=number]:active,
form input[type=password]:active,
form input[type=search]:active,
form input[type=tel]:active,
form input[type=text]:active,
form input[type=time]:active,
form input[type=url]:active,
form input[type=week]:active,
form textarea:active {
    border: 0
}

form textarea {
    margin-top: 5px;
    height: 90px
}

@media screen and (max-width:767px) {
    form textarea {
        height: 80px
    }
}

form p {
    font-size: 16px
}

.no-mobile {
    display: block
}

.no-mobile.inline {
    display: inline
}

@media screen and (max-width:767px) {

    .no-mobile,
    .no-mobile.inline {
        display: none
    }
}

.no-mobile-inline {
    display: inline-block
}

@media screen and (max-width:767px) {
    .no-mobile-inline {
        display: none
    }
}

.mobile-only {
    display: none
}

@media screen and (max-width:767px) {
    .mobile-only {
        display: block
    }
}

.loader {
    margin: 90px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(68, 53, 12, .2);
    border-right: 1.1em solid rgba(68, 53, 12, .2);
    border-bottom: 1.1em solid rgba(68, 53, 12, .2);
    border-left: 1.1em solid #7c7255;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

span#snapengage-button-text {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font: 700 20px/44px "Whitney A", "Whitney B";
    background: #17AA37 !important
}

div#snapengage-button {
    border: 0 !important;
    -webkit-box-shadow: #FFF 0 2px 20px;
    box-shadow: #FFF 0 2px 20px;
    background: #17AA37 !important
}