/***** 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;	
}

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 {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {overflow-x: hidden;}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none; cursor: pointer !important;}
button:hover {cursor: pointer !important;}

hr{border:#000 1px solid;}
html {font-family: 'roboto', sans-serif;}

/*--- HEADER STYLES ---------------------*/

.header-top {background: #272623;}
.header-top .header-right {display: flex; justify-content: flex-end;}
.header-right a {clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); background-color: #3c3b36; width: 420px; display: flex; justify-content: center; padding: 20px 0;}
.header-right a p {color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px;}
.header-right a:hover {background-color: #367C2B; transition: .5s;}

.header-bottom {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 30px 0; align-items: center;}
.header-contact {display: flex; gap: 50px;}
.header-links {display: flex; gap: 20px; align-items: flex-end;}
.header-links > a {display: flex; align-items: center; gap: 20px;}
.header-phone-icon i {background: #367C2B; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50px; color: #fff; font-size: 22px; line-height: 22px;}
.header-phone-number p {color: #262626; font-size: 18px; line-height: 22px; font-family: 'roboto', sans-serif; font-weight: bolder;}
.header-phone-number p span {color: #2B2B2B !important;; font-size: 12px; line-height: 18px; font-family: 'roboto', sans-serif;}
.header-fb i {color: #000; font-size: 25px; line-height: 25px;}
.header-links > a:hover p, .header-links > a:hover p span {color: #367C2B !important; transition: .5s;}
.header-fb a:hover i {color: #367C2B; transition: .5s;}

.header-nav {display: flex;}
.light-line {color: rgba(255,255,255,0.20) !important;}

/*---BODY--------------------------------*/

/*---DEFAULT---*/
.hero-bkgrd {background: url("/siteart/hero.jpg") no-repeat; background-position: center; background-size: cover;}
.hero-overlay {background: rgba(48,48,48,0.55);}
.hero-content {padding: 120px 0;}
.hero-content h1 {text-align: center; color: #fff; font-family: 'roboto-condensed', sans-serif; text-transform: uppercase; font-size: 35px; line-height: 45px;}
.hero-content h1 span {font-weight: lighter;}
.hero-search {text-align: center; padding-top: 25px;}
.hero-search form {display: flex; justify-content: center; gap: 10px;}
.hero-search form input {color: #8A8A8A; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; padding: 10px 0 10px 15px; width: 340px; border-radius: 3px; border: none;}
.hero-search form button {background: #222; border: none; border-radius: 3px; height: 42px; width: 42px; color: #fff; font-size: 17px; line-height: 17px;}
.hero-search form button:hover {background: #367C2B; transition: .5s;}

.shop-by-category {width: 95%; margin: 0 auto; padding: 80px 0;}
.shop-by-category h2 {font-family: 'roboto', sans-serif; text-transform: uppercase; font-size: 30px; line-height: 40px; font-weight: bold;}
.shop-by-category h2 span {font-weight: lighter;}
.shop-by-category hr {border: 1px #367C2B solid; margin: 20px 0;}
.category-flex {display: flex; gap: 10px; flex-wrap: wrap; padding-top: 25px;}
.category-flex a {width: 24.5%;}
.category-flex a:hover {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; transition: .5s;}
.category-flex a div {width: 100%; background: #F4F4F4; text-align: center; padding: 40px 0;}
.category-flex h4 {color: #464646; font-size: 18px; line-height: 20px; font-family: 'roboto', sans-serif; text-transform: uppercase; font-weight: lighter; padding-top: 12px;}
.category-flex a:hover h4 {color: #367C2B; transition: .5s;}

.about-bkgrd {background: #272623;}
.about-wrap {width: 95%; margin: 0 auto; padding: 100px 0; display: flex; justify-content: space-between; gap: 50px; align-items: center;}
.about-imgs {width: 40%;}
.about-imgs img {width: 100%;}
.about-content {width: 60%;}
.about-content h3 {color: #fff; font-family: 'roboto-condensed', sans-serif; text-transform: uppercase; font-size: 28px; line-height: 40px; font-weight: bold; margin-bottom: 20px;}
.about-content h3 span {font-weight: lighter;}
.about-content p {color: #fff; font-family: 'roboto', sans-serif; font-weight: lighter; font-size: 18px; line-height: 30px; margin-bottom: 10px;}
.about-content button {background: #007300; color: #fff; width: 260px; display: flex; justify-content: center; align-items: center; border: 1px #007300 solid; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; padding: 15px 0; margin-top: 30px;}
.about-content a:hover button {background: none; border: 1px #fff solid; transition: .5s;}

/*---CONTACT US---*/

.hero-content p {color: #fff; font-family: 'roboto', sans-serif; text-align: center; font-size: 17px; line-height: 27px; width: 800px; margin: 0 auto; padding-top: 10px;}
.sub-hero-content {padding: 80px 0 !important;}
.sub-hero-overlay {background: rgba(48,48,48,0.65)}
.sub-hero-content h1 {font-size: 40px !important; line-height: 50px !important;}

.contact-body {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 80px 0; gap: 50px;}
.contact-body > div {width: 100%;}
.contact-body h2 span {font-weight: lighter;}
.contact-body h2 {font-family: 'roboto', sans-serif; text-transform: uppercase; font-size: 30px; line-height: 40px; font-weight: bold; margin-bottom: 20px;}
.contact-body li a {font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif; color: #000;}
.contact-body li {margin-bottom: 8px;}
.contact-body li a:hover {color: #007300; transition: .5s;}

.contact-form {width: 95%; margin: 0 auto; background: #E9E9E9; margin-bottom: 80px;}
.form-wrap {width: 90%; margin: 0 auto; padding: 80px 0;}
.form-wrap h3 {font-family: 'roboto', sans-serif; text-transform: uppercase; font-size: 30px; line-height: 40px; font-weight: bold; margin-bottom: 8px;}
.form-wrap p {font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif; color: #000;}
.form-wrap form {padding-top: 30px;}
.form-flex div {display: flex; gap: 10px; margin-bottom: 10px;}
.form-flex input {width: 100%; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; border: none; padding: 10px 0 10px 15px;}
.form-textarea div {display: flex;}
.form-textarea textarea {width: 99%; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; border: none; padding: 10px 0 10px 15px; height: 150px;}
.form-wrap .submitselect {background: #007300; color: #fff; width: 200px; display: flex; justify-content: center; align-items: center; border: none; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; padding: 15px 0; margin-top: 30px;}
.form-wrap .submitselect:hover, .form-wrap .submit:hover {background: #272623; transition: .5s; cursor: pointer !important;}
.form-wrap .submit {background: #007300; color: #fff; width: 200px; border: none; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; padding: 15px 0;}
.CaptchaMessagePanel {font-family: 'roboto', sans-serif;}
.CaptchaAnswerPanel input {height: 28px;}
.CaptchaWhatsThisPanel a {font-family: 'roboto', sans-serif; color: #007300;}
.CaptchaWhatsThisPanel a:hover {text-decoration: underline; transition: .5s;}

/*---THANK YOU---*/

.thankyou-wrap {text-align: center;}
.thankyou-wrap button {background: #007300; color: #fff; width: 200px; border: none; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; padding: 15px 0; margin-top: 25px;}
.thankyou-wrap button:hover {background: #272623; transition: .5s;}

/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/

footer {background: #272623;}
.footer-wrap {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 80px 0;}
.footer-wrap p {font-family: 'roboto-condensed', sans-serif; color: #fff; font-size: 22px; line-height: 32px; text-transform: uppercase; font-weight: bold; margin-bottom: 15px;}
.footer-wrap li a {font-family: 'roboto', sans-serif; color: #fff; font-size: 16px; line-height: 26px; font-weight: lighter;}
.footer-wrap li a:hover {color: #00B300; transition: .5s;}
.footer-contact ul {display: flex; gap: 15px; margin-bottom: 10px;}
.footer-contact li {font-family: 'roboto', sans-serif; color: #fff; font-size: 16px; line-height: 26px; font-weight: 600;}
.footer-contact i {font-size: 20px;}
.footer-links li {line-height: 32px;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.list-redesign {padding: 50px 0 !important;}
.list-top-section .list-listings-count, .listing-prices__retail-price, .listing-prices__discount-formatted-price, .listing-prices__alternate-retail-price, .listing-prices__exclusive-wholesale-price, .thumb-container .thumb .thumb-details .title {color: #007300 !important;}
.faceted-search-content button.faceted-search {background: #000 !important;}
.view-listing-details-link, .petersonfarmsequipmentcomhdev-88jlbf, .faceted-search-content .selected-facets-container .selected-facet {background: #007300 !important;}
.disclaimer span {font-family: 'roboto', sans-serif; font-size: 15px; line-height: 25px;}
.detail-wrapper {padding: 50px 20px !important;} 
.list-content .list-error-container .info button:not(.login-button) {background: #272623 !important;}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1600px) {
	.category-flex a {width: 24.3%;}
}
@media only screen and (max-width: 1450px) {
	.category-flex img {width: 200px;}
	.category-flex h4 {font-size: 17px;}
	.category-flex a div {padding: 35px 0;}
}
@media only screen and (max-width: 1150px) {
	.header-contact {flex-wrap: wrap; gap: 20px;}
	.header-links {width: 100%; justify-content: flex-end;}
	.category-flex a {width: 32.5%;}
}
@media only screen and (max-width: 950px) {
	.header-right a p span {display: none;}
	.header-right a {width: 80px; padding: 15px 0;}
	.header-nav {justify-content: center;}
	.about-wrap {flex-wrap: wrap;}
	.about-content, .about-imgs {width: 100%;}
	.contact-body {flex-wrap: wrap;}
}
@media only screen and (max-width: 850px) {
	.header-contact {display: none;}
	.header-bottom {justify-content: center;}
	.category-flex a {width: 49%;}
	.hero-content p {width: 95%;}
}
@media only screen and (max-width: 550px) {
	.category-flex img {width: 180px;}
	.category-flex h4 {font-size: 16px;}
	.category-flex a div {padding: 30px 0;}
	.category-flex a {width: 48.5%;}
	.footer-wrap {flex-wrap: wrap; gap: 30px;}
	.footer-contact, .footer-links {width: 100%;}
	.form-flex div {flex-wrap: wrap;}
}
@media only screen and (max-width: 500px) {
	.hero-content {width: 95%; margin: 0 auto;}
	.hero-search form input {width: 100%;}
	.category-flex a {width: 100%;}
}
@media only screen and (max-width: 450px) {
	.header-bottom {padding: 20px 0;}
	.header-logo a, .header-logo a img {width: 100%;}
	.hero-content h1 {font-size: 30px; line-height: 40px;}
	.hero-content {padding: 100px 0;}
	.shop-by-category h2, .contact-body h2, .form-wrap h3 {font-size: 28px; line-height: 38px;}
	.about-content h3 {font-size: 25px; line-height: 35px;}
	.about-content p {font-size: 16px; line-height: 28px;}
	.about-content button, .form-wrap .submitselect, .form-wrap .submit, .thankyou-wrap button {font-size: 15px; line-height: 15px;}
	.footer-wrap p {font-size: 20px; line-height: 30px;}
	.footer-contact li, .footer-wrap li a {font-size: 15px; line-height: 25px;}
	.hero-content p {font-size: 15px; line-height: 25px;}
	.contact-body li a, .form-wrap p {font-size: 16px; line-height: 28px;}
	.form-flex input, .form-textarea textarea {font-size: 15px; line-height: 15px;}
	.contact-form {width: 100%; margin-bottom: 0px;}
	.sub-hero-content h1 {font-size: 35px !important; line-height: 45px !important;}
}
@media only screen and (max-width: 350px) {
	.about-content button, .form-wrap .submitselect, .form-wrap .submit, .thankyou-wrap button {width: 100%;}
}
@media only screen and (max-width: 280px) {
	.category-flex img {width: 65%; margin: 0 auto;}
}