/* ===========================================================
green: #3c8549 - dark grey: #1a1a1a - white: #f6f5fa
=========================================================== */
    /* ===========================================================
01.      Reset
02.      Body Styles
03.      Header Structure
03.01   Mobile Nav
04.      Typography
05.      Links / Buttons
06       Home Slider
07.      Site Structure
08.      Footer Structure
09.      Form
09.01   Form Base Styles
09.02   Captcha
09.02   Form Structure
09.      Classes
10.      Responsive Styles
=========================================================== */
    /* ===========================================================
01. Reset
=========================================================== */

    html,
    body,
    div,
    span,
    i applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
    }

    ol,
    ul {
        list-style: none;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    td {
        vertical-align: top;
    }

    header,
    nav,
    article,
    footer,
    address {
        display: block;
    }

    * {
        box-sizing: border-box;
    }

    ::-moz-selection {
        background: #000;
        color: #fff;
        text-shadow: none;
    }

    ::selection {
        background: #000;
        color: #fff;
        text-shadow: none;
    }

    .cf:before,
    .cf:after {
        content: " ";
        display: table;
    }

    .cf:after {
        clear: both;
    }

    .cf {
        *zoom: 1;
    }

    a:link,
    a:visited,
    a:active {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    img {
        border: 0;
        max-width: 100%;
        align-self: center;
    }

    /* ===========================================================
02. Body Styles
=========================================================== */

    body {
        font-family: proxima-nova, sans-serif;
        font-size: 18px;
    }

    /* ===========================================================
03. Header Structure
=========================================================== */

    .mobile-nav-container {
        display: none !important;
    }

    header {
        width: 100%;
        display: flex;
        background: #efefef;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.43);
        z-index: 10;
        position: static;
        top: 0;
        flex-wrap: wrap;
    }

    .fixed {
        position: fixed;
    }

    .nav-up {
        top: -200px !important;
        transition: all 0.3s !important;
    }

    .nav-down {
        transition: all 0.3s !important;
    }

    header .wrapper {
        width: 90%;
        height: 100%;
    }

    .utility-nav .wrapper {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: 100% !important;
        width: 100% !important;
    }

    .utility-nav {
        width: 100%;
        background: #3c8549;
        height: 50px;
    }

    .utility-nav a {
        color: #fff !important;
        font-family: "Oswald", sans-serif;
        font-weight: 400;
        font-size: 17px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        -moz-transition: all 0.3s;
        height: 50px;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        padding: 0 50px;
    }

    .utility-nav i {
        color: #fe0000;
        font-size: 20px;
        margin-right: 10px;
    }

    .utility-nav a:hover i {
        color: #bb0202;
    }

    .utility-nav a:hover {
        background: #286631;
    }

    .nav-rule {
        height: 100%;
        width: 1px;
        background: #2b6833;
    }

    header h1 img {
        max-width: 650px;
        height: auto;
    }

    .header-bottom {
        background: #1a1a1a;
        width: 100%;
        padding: 30px 0;
    }

    .header-bottom .wrapper {
        display: flex;
        justify-content: space-between;
    }

    .header-right {
        display: flex;
        align-items: center;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
    }

    /* 03.01. Mobile Nav
=========================================================== */

    .mobile.button {
        display: none;
    }

    .mobile-nav li button.mobile_btn {
        height: 40px;
        width: 50px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: transparent !important;
        display: inline-block;
        border-radius: 3px 0 0 3px;
        border: none;
    }

    .mobile-nav li button.mobile_btn:hover {
        cursor: pointer;
    }

    .mobile-nav button.mobile_btn::after {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .mobile-nav li button.mobile_btn.active {
        background: #666;
    }

    .mobile-nav li button.mobile_btn.active::after,
    .close:hover {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    /* ===========================================================
04. Typography
=========================================================== */

    h2,
    h3,
    h4,
    h5,
    h6,
    .list-content .list-title .list-title-text {
        font-family: "Oswald", sans-serif !important;
        margin: 0;
        font-weight: 700;
        text-transform: uppercase;
    }

    h2,
    .list-content .list-title .list-title-text {
        font-size: 36px !important;
        ;
        font-weight: 600 !important;
        ;
        line-height: 35px !important;
        ;
    }

    h3 {
        font-size: 26px;
        line-height: 27px;
        font-weight: 600;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 18px;
    }

    p {
        line-height: 26px;
        color: #525252;
    }

    /* ===========================================================
05. Links / Buttons
=========================================================== */

    .btn {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        -webkit-transition: 0.3s !important;
        transition: 0.3s !important;
        height: auto;
        padding: 10px 80px !important;
        display: inline-block;
        border: none !important;
        cursor: pointer;
        background: #1a1a1a !important;
        border: 1px solid transparent !important;
        text-align: center;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        -ms-border-radius: 0 !important;
        -o-border-radius: 0 !important;
        margin: 25px 0;
        text-transform: uppercase;
        font-family: "Oswald", sans-serif;
        font-weight: 400;
    }

    .btn:hover {
        background: #343834 !important;
    }

    /* ===========================================================
06. Body Structure
=========================================================== */

    .wrapper {
        max-width: 90%;
        margin: 0 auto;
    }

    .categories {
        background: #f6f5fa;
        padding: 10px 0 100px 0;
    }

    .categories .columns {
        margin-top: -50px;
    }

    .categories-card {
        position: relative;
        overflow: hidden !important;
        padding: 0;
    }

    .card {
        margin: 5px !important;
        max-height: 340px;
    }

    .categories-text {
        background: linear-gradient(180deg, rgba(60, 133, 73, 0.4) 0%, rgba(60, 133, 73, 1) 100%);
        position: absolute;
        bottom: 0;
        top: 120px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        transition: all 0.3s;
    }

    .categories-card:hover .categories-text {
        top: 90px;
    }

    .categories-card img {
        width: 100%;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
    }

    .categories-card:hover img {
        opacity: 0.8;
    }

    .categories-text h3 {
        color: #1a1a1a;
        margin: -10px 0 6px 0;
    }

    .categories-text p {
        font-family: "Oswald", sans-serif;
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        color: #f6f5fa;
        line-height: 0;
        margin-top: 10px;
    }

    .welcome {
        padding: 50px 0;
        background: #3c8549;
    }

    .welcome h2 {
        color: #f6f5fa;
    }

    .rule {
        margin: 25px 0;
        height: 2px;
        width: 150px;
        justify-self: center;
    }

    .welcome .rule {
        background: #f6f5fa;
    }

    .welcome .column {
        flex-direction: column;
    }

    .welcome p {
        color: #fff;
        flex: 1;
        width: 100%;
    }

    .welcome span {
        font-weight: 700;
    }

    .is-vcentered {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .location {
        padding: 50px 0;
        background: #d8dde3;
    }

    .location .rule,
    .thank-you .rule {
        background: #a9a9aa;
    }

    .location li {
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-size: 18;
        color: #444444;
    }

    .location a {
        color: #444444;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
    }

    .location a:hover {
        opacity: 0.6;
    }

    .location span {
        font-family: 'Oswald', sans-serif;
        font-weight: 600;
        font-size: 18;
    }

    .scrolling-wrap {
        height: 90px;
    }

    .scrolling-wrap iframe {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
    }

    .contact .rule {
        background: #a9a9aa;
    }

    .inventory-rule {
        background: #a9a9aa;
        margin: 25px 0;
        height: 2px;
        width: 150px;
        justify-self: center;
    }

    .inner {
        margin-top: 50px;
    }

    .thank-you {
        padding-bottom: 200px;
    }

    .scrolling-wrap {
        overflow: hidden !important;
    }

    .ie-flex-fix {
        min-height: 300px;
    }

    /* ===========================================================
07. Footer Structure
=========================================================== */

    footer {
        padding: 50px 0;
        background: #1a1a1a !important;
        margin-top: -20px;
    }

    footer .wrapper {
        display: flex;
    }

    .flex {
        display: flex;
    }

    footer .wrapper .footer-nav {
        padding: 0 !important;
    }

    .footer-days {
        margin-right: -50px;
    }

    .footer-nav ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

    footer h5 {
        color: #fff;
        margin-bottom: 25px;
        display: block;
    }

    footer a,
    footer li {
        font-family: 'Oswald', sans-serif !important;
        color: #b7babc !important;
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
        line-height: 20px;
    }

    .footer-logo {
        padding-right: 50px;
    }

    footer li {
        display: block;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        margin-bottom: 10px;
        margin-right: 25px;
    }

    footer a {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    footer a:hover {
        opacity: 0.7;
    }

    /* ===========================================================
08. Form
=========================================================== */
    /* 08.01. Form Base Styles
=========================================================== */

    ::-webkit-input-placeholder {
        /* WebKit browsers */
        font-weight: 500;
        font-size: 14px;
    }

    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        font-weight: 500;
        font-size: 14px;
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        font-weight: 500;
        font-size: 14px;
    }

    ::-ms-input-placeholder {
        /* Recent browsers */
        font-weight: 500;
        font-size: 14px;
    }

    ::placeholder {
        /* Recent browsers */
        font-weight: 500;
        font-size: 14px;
    }

    textarea::-webkit-input-placeholder {
        font-size: 13px !important;
        font-family: proxima-nova, sans-serif !important;
        font-weight: 600 !important;
    }

    textarea::-moz-placeholder {
        font-size: 13px !important;
        font-family: proxima-nova, sans-serif !important;
        font-weight: 600 !important;
    }

    textarea:-ms-input-placeholder {
        font-size: 13px !important;
        font-family: proxima-nova, sans-serif !important;
        font-weight: 600 !important;
    }

    textarea::-ms-input-placeholder {
        font-size: 13px !important;
        font-family: proxima-nova, sans-serif !important;
        font-weight: 600 !important;
    }

    textarea::placeholder {
        font-size: 13px !important;
        font-family: proxima-nova, sans-serif !important;
        font-weight: 600 !important;
    }

    #formpage {
        padding: 50px 0;
    }

    #formpage label,
    .calculator-wrapper label {
        display: block;
        color: #fff;
        margin-bottom: 10px;
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
    }

    #formpage input[type="text"],
    #formpage input[type="email"],
    #formpage input[type="phone"],
    textarea {
        background: #f2f2f2;
        border: none;
        padding: 15px;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border: none;
        height: 50px;
        border-radius: 0;
        width: 100%;
        margin-bottom: 20px;
    }

    textarea {
        min-height: 300px;
    }

    #formpage input[type="text"],
    #formpage input[type="email"],
    #formpage input[type="phone"],
    #formpage select {
        padding: 0 15px !important;
    }

    #formpage textarea {
        padding: 15px !important;
    }

    .form-flex {
        display: flex;
    }

    #green-btn {
        margin: 20px 0;
    }

    input:focus {
        background: white;
        border: 1px solid grey;
    }

    /* 08.02. Captcha
=========================================================== */

    .CaptchaImagePanel {
        margin-top: 10px;
        padding: 0 0 0 0;
    }

    .CaptchaMessagePanel {
        padding: 0 0 0 0 !important;
        margin: 0 0 0 0 !important;
        font-weight: normal !important;
        font-size: 12px;
        line-height: 14px;
        text-align: center;
    }

    .CaptchaAnswerPanel {
        margin: 0 0 0 0;
        padding: 2px 0px 2px 0px !important;
    }

    .CaptchaWhatsThisPanel {
        line-height: 0;
        margin: 0 0 10px 0;
        padding: 10px 0 10px 0 !important;
    }

    .CaptchaWhatsThisPanel a {
        color: inherit;
    }

    .CaptchaWhatsThisPanel a:hover {
        text-decoration: none;
    }

    /* 08.03. Form Structure
=========================================================== */

    .contact-us form {
        width: 100%;
        margin: 40px 0 !important;
    }

    .contact-us form span {
        color: #ff1c14;
    }

    #formpage .col-1 {
        display: -webkit-box;
        display: flex;
        width: 100%;
    }

    .contact-us input[type="text"],
    .contact-us input[type="email"],
    .contact-us input[type="number"],
    .contact-us input[type="phone"],
    .contact-us select {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact-us input[type="text"],
    .contact-us input[type="number"],
    .contact-us input[type="email"],
    .contact-us input[type="phone"],
    .contact-us select,
    .contact-us textarea {
        padding: 10px 20px;
    }

    .contact-us textarea {
        width: 100%;
        min-height: 200px;
    }

    /* ===========================================================
09. Classes
=========================================================== */

    .margin-right {
        margin-right: 20px;
    }

    .margin-right-md {
        margin-right: 40px;
    }

    .col-1 {
        width: 100%;
    }

    .col-1-2 {
        width: 50%;
    }

    /* ===========================================================
10. Responsive Styles
=========================================================== */

    @media only screen and (max-width: 1450px) {
        h3 {
            font-size: 25px;
        }

        .categories-text {
            top: 70px;
        }

        .categories-card:hover .categories-text {
            top: 40px;
        }

        .footer-left {
            flex-direction: column;
            width: 30%;
        }

        .footer-logo {
            width: 200px;
            margin-bottom: 25px;
        }

        .footer-right {
            width: 70%;
        }
    }

    @media only screen and (max-width: 1400px) {
        .categories-text {
            top: 160px;
        }

        .categories-card:hover .categories-text {
            top: 130px;
        }

        footer a,
        footer li {
            font-size: 16px;
        }
    }

    @media only screen and (max-width: 1215px) {
        .categories-text {
            top: 260px;
        }

        .categories-card:hover .categories-text {
            top: 220px;
        }
    }

    @media only screen and (max-width: 1200px) {
        header h1 img {
            max-width: 280px;
            height: auto;
        }
    }

    @media only screen and (max-width: 1150px) {
        .categories-text {
            top: 210px;
        }

        .categories-card:hover .categories-text {
            top: 180px;
        }

        .categories .columns {
            margin-top: 15px;
        }
    }

    @media only screen and (max-width: 1078px) {
        header h1 img {
            max-width: 220px;
            height: auto;
        }

        .is-12-tablet {
            width: 100% !important;
        }

        .footer-nav {
            margin-right: 25px;
        }

        .mt-2-tablet {
            margin-top: 25px;
        }

        h2,
        .list-content .list-title .list-title-text {
            font-size: 28px !important;
            line-height: 29px !important;
        }

        footer .wrapper {
            flex-direction: column;
        }

        .footer-left {
            flex-direction: row !important;
            width: 100%;
            justify-content: center;
            margin-top: 50px;
            order: 2;
        }

        .footer-right {
            width: 100% !important;
            order: 1;
        }

        .footer-logo {
            width: 300px;
            padding-right: 90px;
        }
    }

    @media only screen and (max-width: 880px) {
        header h1 img {
            max-width: 210px;
            height: auto;
        }

        .categories-text {
            top: 250px;
        }

        .categories-card:hover .categories-text {
            top: 160px;
        }

        .card {
            max-height: 350px;
            overflow: hidden;
        }

        .categories-text {
            background: linear-gradient(180deg, rgba(60, 133, 73, 0.4) 0%, rgba(60, 133, 73, 1) 100%);
        }

        .categories-text {
            top: 210px;
        }

        .categories-card:hover .categories-text {
            top: 180px;
        }

        .footer-left,
        .footer-right {
            width: 100%;
            flex-direction: column !important;
        }

        .footer-days {
            margin-right: -0;
        }

        .footer-logo {
            order: 2;
            margin-top: 50px;
            margin: 50px auto;
            padding-right: 0;
        }

        .footer-location {
            order: 1;
        }
    }

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

        .hide-mobile,
        .utility-nav {
            display: none;
        }

        .mobile-nav-container {
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
        }

        .nav-icon {
            padding: 0 18px;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .nav-icon:last-of-type {
            padding-right: 0 !important;
        }

        .nav-icon i {
            font-size: 24px;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            color: #fff;
        }

        .nav-icon i:hover {
            opacity: 0.5;
        }

        .nav-bar-rule {
            width: 1px;
            height: 60%;
            background: rgba(20, 20, 22, 0.1);
        }

        header h1 img {
            max-width: 200px;
            height: auto;
        }

        .flex-column-mobile {
            display: flex !important;
            flex-direction: column;
        }

        .location .rule {
            align-self: center;
            margin: 25px 0 13px;
        }

        .button {
            width: 100%;
        }

        .location iframe {
            margin-top: 20px;
        }

        .categories-container {
            display: flex !important;
            flex-direction: row !important;
        }

        .categories .column {
            display: flex !important;
            flex-basis: auto !important;
        }

        .categories-card {
            max-height: 360px;
            width: 48% !important;
        }

        .form-flex {
            flex-direction: column;
        }

        .list-content .list-title .list-title-text,
        h2 {
            font-size: 26px !important;
            line-height: 27px !important;
        }

        .welcome .is-flex {
            display: block !important;
        }

        .welcome .rule {
            margin: 25px auto;
        }
    }

    @media only screen and (max-width: 600px) {
        header h1 img {
            max-width: 150px;
        }

        .is-12-mobile {
            width: 100% !important;
        }

        .is-column {
            flex-direction: column;
        }

        .mr-2-tablet {
            margin-right: 25px;
        }

        .mt-4-tablet {
            margin-top: 50px;
        }

        .categories-container {
            flex-direction: column !important;
            ;
        }

        .categories-card {
            max-height: 360px;
            width: 100% !important;
        }

        .card {
            width: 100%;
        }

        .btn {
            width: 100% !important;
        }

        .list-content .list-title .list-title-text,
        h2 {
            font-size: 24px !important;
            line-height: 25px !important;
        }
    }

    @media only screen and (max-width: 400px) {}