﻿/***** BEGIN RESET *****/

html,
body,
div,
span,
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;
}

input[type="submit"] {
    /* css */
    background: #FFD100 !important;
    border-color: #FFD100 !important;
    all: initial;
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 5px 7px 7px 7px !important;
    cursor: pointer !important;
}

ol,
ul {
    list-style: none;
}


table {
    border-collapse: collapse;
    width: 100%;
}

td {
    vertical-align: top;
}

/* Make HTML 5 elements display block-level for consistent styling */
header,
nav,
article,
footer,
address,
img {
    display: block;
}

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/********** Control the Captcha **********/
.CaptchaPanel {
    margin: 10px auto !important;
    padding: 0 0 0 0 !important;
    text-align: center;
    line-height: normal !important;
}

.CaptchaImage {
    border: 1px solid #333 !important;
    margin: 0px auto !important;
}

.CaptchaImagePanel {
    margin: 0 0 0 0;
    padding: 0 0 0 0 !important;
}

.CaptchaMessagePanel {
    padding: 0 0 0 0 !important;
    margin: 5px auto !important;
    font-weight: normal !important;
    font-size: 12px;
    line-height: 14px;
}

.CaptchaAnswerPanel {
    margin: 0 0 0 0;
    padding: 2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
    line-height: 0;
    margin: 10px auto;
    padding: 8px 0 8px 0 !important;
}

.CaptchaWhatsThisPanel a {
    color: #000;
}

.CaptchaWhatsThisPanel a:hover {
    text-decoration: none;
}


/***** Overall *****/
html {
    width: 100%;
    height: auto;
}

body {
    width: 100%;
    height: auto;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    /* font-size: 0px; */
    background: url(../siteart/images/subtle_dots.png) !important;
}

.notInv {
    text-align: center;
}

.notInv,
.notInv * {}

.matspage h2,
.matspage h3 {
    margin-top: 25px;
}

.search {
    display: flex;
}

.invPage .search input:first-of-type {
    padding: 17px !important;
    border-radius: 0 !important;
}

.marginStuff {
    display: flex;
}

.divider1 {
    width: 2px;
    height: 75px;
    margin: 0px 20px;
    position: relative;
    display: inline-block;
    background-color: #fff;
    vertical-align: middle;
}

/********** Header **********/
.heading {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: aliceblue;
}

.heading .left {
    width: 200px;
    height: auto;
    margin: 36px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: orange;
    float: left;
}

.heading .left img {
    width: 100%;
    height: auto;
}

.heading .right {
    width: auto;
    height: auto;
    margin: 36px;
    text-align: right;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: orange;
    float: right;
}

.heading .right .contact-phone {
    width: auto;
    height: auto;
    margin-right: 20px;
    position: relative;
    display: inline-block;
    *background-color: pink;
}

.heading .right .contact-phone h1 {
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #AF2F2C;
}

.heading .right .contact-phone h1 a {
    text-decoration: none;
    font-weight: 400;
    color: #AF2F2C;
    transition: ease-out 0.15s;
}

.heading .right .contact-phone h1 a:hover {
    color: #24543D;
    transition: ease-in 0.15s;
}

.heading2 {
    width: 100%;
    height: auto;
    *border-bottom: 5px solid #AF2F2C;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    background-color: #24543D;
}

.heading2 .left {
    width: 200px;
    height: auto;
    margin: 36px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: orange;
    float: left;
}

.heading2 .left img {
    width: 100%;
    height: auto;
}

.heading2 .right {
    width: auto;
    height: auto;
    margin: 36px;
    text-align: right;
    position: relative;
    display: inline-block;
    /* box-sizing: border-box; */
    * background-color: orange;
    float: right;
}

.heading2 .right,
.heading2 .right * {}

.heading2 .right .contact-phone {
    width: auto;
    height: auto;
    margin-right: 20px;
    position: relative;
    display: inline-block;
    *background-color: pink;
}

.heading2 .right .contact-phone h3 {
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
}

.heading2 .right .contact-phone h3 a {
    text-decoration: none;
    font-weight: 400;
    color: #fff !important;
    transition: ease-out 0.15s;
}

.heading2 .right .contact-phone h1 3:hover {
    color: #fff;
    transition: ease-in 0.15s;
}

/********** Content **********/
.content1 {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: pink;
}

.slideshow {
    width: 65%;
    height: auto;
    margin: 20px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: orange;
    overflow: hidden;
    vertical-align: top;
}

.slideshow img {
    width: 100%;
    height: auto;
}

.summary1 {
    width: 22%;
    height: auto;
    margin: 20px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: green;
    vertical-align: top;
}

.summary1 h1 {
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 48px;
    line-height: 60px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 20px;
    color: #24543D;
}

.summary1 p {
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    text-align: left;
    color: #2F2C27;
}

.summary2 {
    width: 80%;
    width: auto;
    max-width: 85%;
    height: auto;
    margin: 20px auto;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

.marginStuff .summary2 {
    width: 100% !important
}

.summary2 h1 {
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 36px;
    text-align: left;
    text-transform: uppercase;
    color: #24543D;
}

.summary2 p {
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-align: left;
    color: #2F2C27;
}

.summary3 {
    width: 80%;
    height: auto;
    margin: 20px auto;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

.catpics {
    display: flex;
    justify-content: space-around;
    margin: 0 50px;
    flex-wrap: wrap;
    padding-bottom: 50px;
}

.catpics div {}

.catpics h2 {
    font-size: 23px;
    margin-bottom: 20px;
}

.catpics img {
    max-width: 470px;
    width: 100%;
}

.summary3 h1,
.summary3 h2 {
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
    color: #24543D;
}

.summary3 h2 {}

.summary3 p {
    font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-align: center;
    color: #2F2C27;
}

.button-section {
    width: 100%;
    height: auto;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: #AF2F2C;
	background-color:#000!important;
    background: url(../siteart/images/subtle_dots2.png);
    background-repeat: repeat;
}

.button1,
.button2,
.button3,
.button4,
.button5,
.button6,
.button7,
.button8,
.button9,
.button10,
.button11,
.button12,
.button12half,
.button13,
.button5half,
.button10half {
    width: 225px;
    height: auto;
    margin: 15px 15px 25px 15px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: pink;
    vertical-align: middle;
}

.button1 h1,
.button2 h1,
.button3 h1,
.button4 h1,
.button5 h1,
.button6 h1,
.button7 h1,
.button8 h1,
.button9 h1,
.button10 h1,
.button11 h1,
.button12 h1,
.button12half h1,
.button13 h1,
.button5half h1,
.button10half h1 {
    font-family: "Quantico", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    color: #fff;
}

.button1 .photo1,
.button2 .photo1,
.button3 .photo1,
.button4 .photo1,
.button5 .photo1,
.button6 .photo1,
.button7 .photo1,
.button8 .photo1,
.button9 .photo1,
.button10 .photo1,
.button11 .photo1,
.button12 .photo1,
.button12half .photo1,
.button13 .photo1,
.button5half .photo1,
.button10half .photo1 {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    *background-color: aliceblue;
    transition: ease-out 0.15s;
}

.button1:hover .photo1,
.button2:hover .photo1,
.button3:hover .photo1,
.button4:hover .photo1,
.button5:hover .photo1,
.button6:hover .photo1,
.button7:hover .photo1,
.button8:hover .photo1,
.button9:hover .photo1,
.button10:hover .photo1,
.button11:hover,
.button12:hover,
.button12half:hover,
.button13:hover .photo1,
.button5half:hover .photo1,
.button10half:hover .photo1 {
    opacity: 0.65;
    transition: ease-in 0.15s;
}

.button1 .photo1 {
    background: url(../siteart/images/buttons/skid_steer_2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button2 .photo1 {
    background: url(../siteart/images/buttons/mini_excavator_2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button3 .photo1 {
    background: url(../siteart/images/buttons/Komatsu-PC160.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button4 .photo1 {
    background: url(../siteart/images/buttons/backhoe.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button5 .photo1 {
    background: url(../siteart/images/buttons/dozer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button6 .photo1 {
    background: url(../siteart/images/buttons/compactor.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button7 .photo1 {
    background: url(../siteart/images/buttons/aerial_lift.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button8 .photo1 {
    background: url(../siteart/images/buttons/telehandler.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button9 .photo1 {
    background: url(../siteart/images/buttons/bucket-rock.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button10 .photo1 {
    background: url(../siteart/images/buttons/chipper2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button11 .photo1 {
    background: url(../siteart/images/buttons/trailer.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button12 .photo1 {
    background: url("../siteart/images/buttons/small-backhoe.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button12half .photo1 {
    background: url("../siteart/images/buttons/PressureWasher.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button13 .photo1 {
    background: url("../siteart/images/buttons/ConcreteTools.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button5half .photo1 {
    background: url("../siteart/images/buttons/FrontLoader.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.button10half .photo1 {
    background: url("../siteart/images/buttons/LawnGardenscape.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.map {
    width: 100%;
    height: 250px;
    border-bottom: 10px solid #AF2F2C;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: orange;
}

.map2 {
    width: 100%;
    height: 250px;
    border-top: 10px solid #AF2F2C;
    border-bottom: 10px solid #AF2F2C;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    *background-color: orange;
}

/********** Form **********/

.linkButton {
    background: #24543d;
    float: right;
    width: 25%;
    text-align: center;
    padding: 10px;
}

.linkButton a {
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

.linkbutton p {
    text-align: center;
}

.linkButton p {
    text-align: center;
}

/********** Slideshow **********/


/********** Inventory **********/
.border-bottom {
    text-align: left;
}

.hosted-content .listings-wrapper .currency-box {
    text-align: left !important;
}

.listings-wrapper .listing-largecard.column3,
.listings-wrapper .listing-thumb.column3,
.listings-wrapper .listing-smallcard.column3 {
    margin: 5px !important;
}

.hosted-content .red,
.hosted-content .redtext,
.hosted-content .field-validation-error {
    font-size: 14px;
}

/********** Footer **********/
.footing {
    width: 100%;
    height: auto;
    padding: 20px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    background-color: #24543D;
}

.footing .logo {
    width: 150px;
    height: auto;
    position: relative;
    display: inline-block;
    *background-color: pink;
    vertical-align: middle;
}

.footing .logo img {
    width: 100%;
    height: auto;
}

.footing .nav2 {
    width: auto;
    height: auto;
    position: relative;
    display: inline-block;
    *background-color: pink;
    vertical-align: middle;
}

.footing .nav2 ul li {
    display: inline-block;
    margin: 0px 10px;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
}

.footing .nav2 ul li a {
    text-decoration: none;
    color: #fff;
}

.footing .contacting {
    width: auto;
    height: auto;
    position: relative;
    display: inline-block;
    *background-color: pink;
    vertical-align: middle;
}

.footing .contacting ul li {
    display: inline-block;
    margin: 0px 10px;
    font-size: 16px;
    color: #fff;
    vertical-align: top;
}

.footing .contacting ul li a {
    text-decoration: none;
    color: #fff !important;
}

.footing .contacting ul li strong {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.divfooter {
    width: 18%;
    position: relative;
    display: inline-block;
    font-size: 10px;
    text-align: left;
    color: #fff;
    vertical-align: middle;
}

.footerlink {
    color: #fff;
}

/************************************************ Responsive Styles **/
@media screen and (max-width: 1500px) and (min-width: 1281) {
    .heading .left {
        width: 175px;
    }

    .heading2 .left {
        width: 175px;
    }

    .divider1 {
        margin: 10px;
    }

    .summary1 {
        width: 25%;
    }

    .slideshow {
        height: auto;
        width: 65%;
    }

    .summary1 h1 {
        font-size: 36px;
        line-height: 40px;
    }

    .summary1 p {
        font-size: 16px;
        line-height: 24px;
    }

    .summary3 h1 {
        font-size: 36px;
        line-height: 40px;
    }

    .summary3 p {
        font-size: 16px;
        line-height: 24px;
    }

    .footing .logo {
        width: 120px;
    }

    .footing .nav2 ul li {
        margin: 0px 8px;
        font-size: 14px;
    }

    .footing .contacting ul li {
        margin: 0px 8px;
        font-size: 14px;
    }

    .divfooter {
        width: 18%;
        font-size: 9px;
    }
}


@media screen and (max-width: 1280px) and (min-width: 1025px) {
    .heading .left {
        width: 155px;
        margin: 28px;
    }

    .heading .right {
        margin: 28px;
    }

    .heading .right .contact-phone {
        margin-right: 0px;
    }

    .heading2 .left {
        width: 155px;
        margin: 28px;
    }

    .heading2 .right {
        margin: 28px;
    }

    .heading2 .right .contact-phone {
        margin-right: 0px;
    }

    .slideshow {
        width: 65%;
        height: auto;
    }

    .summary1 {
        width: 25%;
    }

    .summary1 h1 {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 15px;
    }

    .summary1 p {
        font-size: 14px;
        line-height: 20px;
    }

    .summary3 h1 {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 15px;
    }

    .summary3 p {
        font-size: 14px;
        line-height: 20px;
    }

    .button1,
    .button2,
    .button3,
    .button4,
    .button5,
    .button6,
    .button7,
    .button8,
    .button9,
    .button10,
    .button11 {
        width: 250px;
    }

    .divider1 {
        margin: 0px 10px;
    }

    .footing .logo {
        width: 100px;
    }

    .footing .nav2 ul li {
        margin: 0px 5px;
        font-size: 12px;
    }

    .footing .contacting ul li {
        margin: 0px 5px;
        font-size: 12px;
    }

    .divfooter {
        width: 17%;
        margin: 0px auto;
        font-size: 8px;
    }
}


@media screen and (max-width: 1024px) and (min-width: 771px) {
    .heading .left {
        margin: 20px auto;
        display: block;
        float: none;
    }

    .heading .right {
        margin: 20px auto;
        text-align: center;
        display: block;
        float: none;
    }

    .heading2 .left {
        margin: 20px auto;
        display: block;
        float: none;
    }

    .heading2 .right {
        margin: 20px auto;
        text-align: center;
        display: block;
        float: none;
    }

    .slideshow {
        width: 100%;
        height: auto;
        margin: 0px;
    }

    .summary1 {
        width: 90%;
        margin: 20px auto;
    }

    .summary1 h1 {
        font-size: 36px;
        line-height: normal;
        margin-bottom: 0px;
    }

    .summary1 p {
        font-size: 16px;
        line-height: 24px;
        word-spacing: 0px;
    }

    .summary3 {
        width: 90%;
        margin: 20px auto;
    }

    .summary3 h1 {
        font-size: 36px;
        line-height: normal;
        margin-bottom: 0px;
    }

    .summary3 p {
        font-size: 16px;
        line-height: 24px;
        word-spacing: 0px;
    }

    .button1,
    .button2,
    .button3,
    .button4,
    .button5,
    .button6,
    .button7,
    .button8,
    .button9,
    .button10,
    .button11 {
        width: 200px;
    }

    .button1 h1,
    .button2 h1,
    .button3 h1,
    .button4 h1,
    .button5 h1,
    .button6 h1,
    .button7 h1,
    .button8 h1,
    .button9 h1,
    .button10 h1,
    .button11 h1 {
        font-size: 21px;
    }

    .button1 .photo1,
    .button2 .photo1,
    .button3 .photo1,
    .button4 .photo1,
    .button5 .photo1,
    .button6 .photo1,
    .button7 .photo1,
    .button8 .photo1,
    .button9 .photo1,
    .button10 .photo1,
    .button11 .photo1 {
        height: 160px;
    }

    .map,
    .map2 {
        height: 200px;
    }

    .divider1 {
        width: 80%;
        height: 2px;
        margin: 20px auto;
        display: block;
    }

    .footing .logo {
        margin: 0px auto;
        display: block;
    }

    .footing .nav2 {
        display: block;
    }

    .footing .contacting {
        display: block;
    }

    .footing .contacting ul li {
        margin: 0px 20px;
    }

    .divfooter {
        width: 80%;
        display: block;
        margin: 0px auto;
        text-align: center;
    }
}


@media screen and (max-width: 770px) {
    .heading .left {
        width: 170px;
        margin: 20px auto;
        display: block;
        float: none;
    }

    .imagesurround {
        flex-direction: column;
        align-items: center;
    }

    .heading .right {
        margin: 20px auto;
        text-align: center;
        display: none;
        float: none;
    }

    .heading2 .left {
        width: 170px;
        margin: 20px auto;
        display: block;
        float: none;
    }

    .heading2 .right {
        margin: 20px auto;
        text-align: center;
        /* display: none; */
        float: none;
    }

    .slideshow {
        width: 100%;
        height: auto;
        margin: 0px;
    }

    .summary1 {
        width: 90%;
        margin: 20px auto;
    }

    .summary1 h1 {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 0px;
    }

    .summary1 p {
        font-size: 16px;
        line-height: 24px;
        word-spacing: 0px;
    }

    .summary3 {
        width: 90%;
        margin: 20px auto;
    }

    .summary3 h1 {
        font-size: 36px;
        line-height: 40px;
        margin-bottom: 0px;
    }

    .summary3 p {
        font-size: 16px;
        line-height: 24px;
        word-spacing: 0px;
    }

    .button1,
    .button2,
    .button3,
    .button4,
    .button5,
    .button6,
    .button7,
    .button8,
    .button9,
    .button10,
    .button11 {
        width: 240px;
    }

    .button1 .photo1,
    .button2 .photo1,
    .button3 .photo1,
    .button4 .photo1,
    .button5 .photo1,
    .button6 .photo1,
    .button7 .photo1,
    .button8 .photo1,
    .button9 .photo1,
    .button10 .photo1,
    .button11 .photo1 {
        height: 150px;
    }

    .map,
    .map2 {
        height: 200px;
    }

    .divider1 {
        width: 80%;
        height: 2px;
        margin: 20px auto;
        display: block;
    }

    .footing .logo {
        margin: 0px auto;
        display: block;
    }

    .footing .nav2 {
        display: block;
    }

    .footing .nav2 ul li {
        margin: 2px 10px;
    }

    .footing .contacting {
        display: block;
    }

    .footing .contacting ul li {
        width: 100%;
        margin: 8px auto;
    }

    .divfooter {
        width: 80%;
        display: block;
        margin: 0px auto;
        text-align: center;
    }
}

@media screen and (max-width: 1024px) {
    .searchform {
        justify-content: center !important;
        margin-top: 20px;
    }
}

.image-container {
    /* display: flex; */
    /* align-items: center; */
    /* Centers text content next to images */
}

.imagesurround {
    display: flex;
    justify-content: center;
}

.image-container img {
    margin: 20px;
    /* Adjust spacing between text and image */
    width: clamp(150px, 24vw, 500px);
}