/***** 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 {
}
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 {background: #1A1A1A; display: flex; justify-content: flex-end;}
.header-lang {background: #424242; padding: 10px 0px; width: 162px; display: flex; justify-content: center; gap: 5px; align-items: center;}
.header-lang a, .header-lang p {color: #fff; font-size: 16px; font-family: 'roboto', sans-serif; font-weight: 400;}
.header-lang a:hover {color: #f3a121; transition: .5s;}
#head-nav {width: 95%; margin: 0 auto; display: flex; justify-content: space-between;}
.nav-left {width: 200px;}
.nav-left a, .nav-left img {width: 100%;}
.nav-right ul button {background: #03743e; color: #fff; width: 180px; padding: 12px 0; font-family: 'roboto', sans-serif; font-size: 16px; line-height: 16px; text-transform: uppercase; font-weight: 700; border: none; border-radius: 30px;}
.nav-right ul button:hover {background: #f3a121; transition: .5s;}
/*---BODY--------------------------------*/
/*---DEFAULT---*/
#hero-bkgrd {background: url("/siteart/hero.jpg") no-repeat; background-position: center; background-size: cover; margin-top: -55px;}
.hero-overlay {background: #272727; background: linear-gradient(90deg,rgba(39, 39, 39, 0.65) 0%, rgba(39, 39, 39, 0) 100%);}
.hero-wrap {width: 95%; margin: 0 auto; padding: 170px 0 30px 0; display: flex; justify-content: space-between;}
.hero-left {width: 630px; padding-bottom: 90px;}
.hero-left h1 {font-family: 'roboto-condensed', sans-serif; color: #fff; text-transform: uppercase; font-size: 60px; line-height: 65px; font-weight: 700; margin-bottom: 15px;}
.hero-left p {color: #fff; font-family: 'roboto', sans-serif; font-weight: 700; font-size: 20px; line-height: 26px;}
.hero-left div {margin-top: 30px; display: flex; gap: 15px;}
.hero-left div > a:first-child button {background: #f3a121; width: 220px; padding: 10px 0; border: 1px #f3a121 solid; border-radius: 30px; color: #000; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700;}
.hero-left div > a:last-child button {background: none; width: 220px; padding: 10px 0; border: 1px #ffff solid; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700;}
.hero-right {display: flex; align-items: end; flex-wrap: wrap;}
.hero-right h4 {color: #fff; text-transform: uppercase; font-size: 30px; line-height: 40px; font-family: 'roboto-condensed', sans-serif;}
.hero-right a {color: #fff; font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif; font-weight: 700; display: flex; gap: 10px; align-items: center;}
.hero-right a i {color: #fff; background: #03743e; height: 40px; width: 40px; display: flex; justify-content: center; gap: 30px; align-items: center; border-radius: 50px;}
.hero-right ul {margin-top: 12px;}
.hero-right ul li {margin-bottom: 8px;}
.hero-left div > a:first-child button:hover, .hero-left div > a:last-child button:hover {background: #03743e; transition: .5s; border: 1px #03743e solid; color: #fff;}
.hero-right a:hover i {background: #f3a121; transition: .5s;}
#inv-nav {display: flex; width: 95%; margin: 0 auto; justify-content: center; gap: 10px; margin-top: 20px;}
#inv-nav a {width: 100%; text-align: center;}
.combines-bkgrd {background: url("/siteart/combines.jpg") no-repeat; background-position: center; background-size: cover; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.headers-bkgrd {background: url("/siteart/headers.jpg") no-repeat; background-position: center; background-size: cover; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.sprayers-bkgrd {background: url("/siteart/sprayers.jpg") no-repeat; background-position: center; background-size: cover; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.inventory-bkgrd {background: #03743e; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.inv-overlay {background: rgba(39,39,39,0.55); border-radius: 3px;}
.inv-wrap {display: flex; align-items: center; justify-content: center; height: 210px;}
.inv-wrap h2 {color: #fff; font-family: 'roboto-condensed', sans-serif; font-size: 40px; line-height: 40px; text-transform: uppercase; font-weight: 700;}
#inv-nav a:hover .inv-overlay {background: rgba(243,161,33,0.55); transition: .5s;}
#inv-nav .inventory-bkgrd:hover {background: #f3a121; transition: .5s;}
#our-services {width: 95%; margin: 0 auto; display: flex; margin-top: 100px; overflow: hidden;}
#our-services > div:last-child {width: 55%; padding: 80px 0 80px 70px;}
#our-services img {width: 100%;}
#our-services h3 {font-size: 35px; line-height: 45px; color: #000; font-family: 'roboto-condensed', sans-serif; text-transform: uppercase; font-weight: 700; margin-bottom: 15px;}
#our-services p {font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif; margin-bottom: 10px;}
#our-services button {background: #03743e; width: 220px; padding: 12px 0; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700; border: none; margin-top: 20px;}
#our-services button:hover {background: #f3a121; transition: .5s;}
#our-services .services-img {background: url("/siteart/services.jpg") no-repeat; background-position: center; background-size: cover; width: 40%;}
.services-img div {display: none;}
#reliable-trusted {background: #1A1A1A; margin-top: 100px;}
.reliable-wrap {width: 95%; margin: 0 auto; padding: 15px 0 10px 0; display: flex; justify-content: space-between; align-items: center;}
.reliable-wrap h2 {color: #fff; font-family: 'roboto-condensed', sans-serif; font-size: 120px; line-height: 120px; font-weight: 700; text-transform: uppercase;}
.reliable-wrap > div:first-child > h2:nth-child(2) {margin-left: 100px;}
.reliable-wrap > div:first-child > h2:last-child {margin-left: 200px;}
.reliable-wrap > div:first-child {position: absolute;}
.reliable-wrap img {width: 48%;}
.map-top {width: 100%; display: flex; justify-content: flex-end;}
.map-top div {width: 48%;}
.mobile-saying {display: none;}
.reliable-wrap .desktop-saying img {width: 100%;}
#export-globally {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; overflow: hidden;}
#export-globally img {width: 100%;}
#export-globally > div {width: 48%;}
#export-globally h3 {font-family: 'roboto-condensed', sans-serif; font-size: 35px; line-height: 45px; font-weight: 700; text-transform: uppercase; margin-bottom: 15px;}
#export-globally p {font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif;}
.form-bkgrd {background: #EEE; margin-top: 40px;}
.form-bkgrd > div {padding: 60px 50px;}
.form-bkgrd p {font-size: 15px !important; line-height: 25px !important;}
.form-bkgrd form {margin-top: 20px;}
.form-bkgrd form .form-flex {display: flex; gap: 10px; margin-bottom: 10px;}
.form-bkgrd form input, .form-bkgrd form textarea {width: 100%; color: #636363; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; border: none; padding: 10px 0 10px 15px;}
.form-bkgrd form textarea {height: 150px;}
.form-bkgrd form .submitselect {background: #03743e; width: 220px; padding: 12px 0; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700; border: none; margin-top: 20px; display: flex; justify-content: center;}
.form-bkgrd form .submitselect:hover, .form-bkgrd form .submit:hover {background: #f3a121; transition: .5s; cursor: pointer !important;}
.form-bkgrd form .submit {background: #03743e; width: 220px; padding: 12px 0; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700; border: none;}
.form-bkgrd form img {width: auto !important;}
.form-bkgrd form .CaptchaAnswerPanel input {width: auto !important;}
.form-bkgrd form .CaptchaWhatsThisPanel a {border-bottom: 1px #000 solid; color: #000;}
#export-globally > div:nth-child(2) {padding-top: 100px;}
.mobile-form {display: none;}
/*---ABOUT US---*/
.about-wrap {text-align: center; width: 95%; margin: 0 auto; padding: 85px 0 55px 0;}
.about-wrap h1 {font-family: 'roboto-condensed', sans-serif; color: #fff; text-transform: uppercase; font-size: 70px; line-height: 70px; font-weight: 700; margin-bottom: 15px;}
.about-overlay {background: rgba(39,39,39,0.80);}
#about-section {padding: 80px 0 0 50px; display: flex; justify-content: space-between; align-items: center; overflow: hidden;}
#about-section > div:first-child {width: 850px;}
#about-section > div:first-child h2 {font-size: 35px; line-height: 45px; color: #000; font-family: 'roboto-condensed', sans-serif; text-transform: uppercase; font-weight: 700; margin-bottom: 15px;}
#about-section > div:first-child p {font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif; margin-bottom: 10px;}
#about-section > div:last-child h4 {color: #000; text-transform: uppercase; font-size: 30px; line-height: 40px; font-family: 'roboto-condensed', sans-serif;}
#about-section > div:last-child a {color: #000; font-size: 18px; line-height: 30px; font-family: 'roboto', sans-serif; font-weight: 700; display: flex; gap: 10px; align-items: center;}
#about-section > div:last-child {background: #EEE; padding: 25px 0 25px 35px; width: 350px;}
#about-section > div:last-child ul {margin-top: 12px;}
#about-section > div:last-child ul li {margin-bottom: 8px;}
#about-section > div:last-child a:hover {color: #03743e; transition: .5s;}
/*---CONTACT US---*/
.contact-form form {margin-top: 20px;}
.contact-form form .form-flex {display: flex; gap: 10px; margin-bottom: 10px;}
.contact-form form input, .contact-form form textarea {width: 100%; color: #636363; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; border: none; padding: 10px 0 10px 15px; background: #EEE;}
.contact-form form textarea {height: 150px;}
.contact-form form .submitselect {background: #03743e; width: 220px; padding: 12px 0; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700; border: none; margin-top: 20px; display: flex; justify-content: center;}
.contact-form form .submitselect:hover, .contact-form form .submit:hover {background: #f3a121; transition: .5s; cursor: pointer !important;}
.contact-form form .submit {background: #03743e; width: 220px; padding: 12px 0; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700; border: none;}
.contact-form form img {width: auto !important;}
.contact-form form .CaptchaAnswerPanel input {width: auto !important;}
.contact-form form .CaptchaWhatsThisPanel a {border-bottom: 1px #000 solid; color: #000;}
/*---THANK YOU---*/
#about-section button {background: #03743e; width: 220px; padding: 12px 0; border-radius: 30px; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; line-height: 15px; text-transform: uppercase; font-weight: 700; border: none; margin-top: 20px;}
#about-section button:hover {background: #f3a121; transition: .5s;}
/*--------FORM STYLES--------------------*/
/*-------- FOOTER STYLES ----------------*/
.footer-bkgrd {background: #1A1A1A; position: relative; z-index: 600; margin-top: -64px;}
.footer-wrap {width: 95%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between;}
footer .scrolling-wrap {position: relative; z-index: 500; margin-top: 80px;}
footer p {color: #fff; font-family: 'roboto-condensed', sans-serif; font-weight: 700; font-size: 22px; line-height: 22px; text-transform: uppercase;}
footer ul {margin-top: 15px;}
footer li a {color: #fff; font-size: 16px; line-height: 22px; font-family: 'roboto', sans-serif !important;}
footer li {margin-bottom: 8px;}
.footer-right li a {text-transform: uppercase; font-family: 'roboto', sans-serif !important;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-top-section .list-listings-count {color: #03743e !important;}
.faceted-search-content .selected-facets-container .selected-facet, .list-content .list-error-container .info button:not(.login-button) {background: #03743e !important;}
/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1350px) {
#about-section > div:first-child {width: 100%;}
#about-section {gap: 70px;}
#about-section > div:last-child {width: 500px;}
}
@media only screen and (max-width: 1250px) {
.inv-wrap h2 {font-size: 38px; line-height: 38px;}
}
@media only screen and (max-width: 1150px) {
.hero-overlay {background: linear-gradient(90deg,rgba(39, 39, 39, 0.65) 0%, rgba(39, 39, 39, 0.15) 100%);}
#inv-nav {flex-wrap: wrap;}
#inv-nav a {width: 49%;}
}
@media only screen and (max-width: 1050px) {
#our-services {flex-wrap: wrap;}
.services-img div {display: contents;}
#our-services .services-img {width: 100%;}
#our-services > div:last-child {width: 100%; padding: 50px 0 80px 0;}
.form-bkgrd form .form-flex, .contact-form form .form-flex {flex-wrap: wrap;}
#reliable-trusted {margin-top: 0px;}
.form-bkgrd > div {padding: 60px 40px;}
#about-section {padding-bottom: 80px; flex-wrap: wrap; gap: 50px; width: 95%; margin: 0 auto; padding-left: 0px;}
#about-section > div:last-child {width: 100%;}
}
@media only screen and (max-width: 950px) {
.hero-wrap {flex-wrap: wrap; padding: 130px 0 30px 0;}
.hero-right {width: 100%;}
.hero-left {padding-bottom: 70px;}
#export-globally {display: block;}
#export-globally > div {width: 100%;}
#export-globally img {width: 100%;}
.mobile-form-padding {padding-top: 80px;}
.map-top div {width: 100%;}
.reliable-wrap {display: block;}
.reliable-wrap > div:first-child {position: relative;}
.mobile-saying {display: contents;}
.desktop-saying {display: none;}
.map-top img {display: none;}
#export-globally img {padding-top: 50px;}
.reliable-wrap {padding: 50px 0;}
.reliable-wrap img {width: 100%;}
#export-globally > div:nth-child(2) {padding-top: 60px;}
}
@media only screen and (max-width: 600px) {
.header-lang {background: none; width: 95%; margin: 0 auto;}
.hero-left {width: 100%;}
.hero-overlay {background: linear-gradient(90deg,rgba(39, 39, 39, 0.65) 0%, rgba(39, 39, 39, 0.45) 100%);}
#inv-nav a {width: 100%;}
.nav-left {width: 180px;}
#hero-bkgrd {margin-top: -50px;}
.hero-left h1 {font-size: 55px; line-height: 60px;}
.hero-left p {font-size: 18px; line-height: 24px;}
.hero-wrap {padding: 120px 0 30px 0;}
.hero-right h4, #about-section > div:last-child h4 {font-size: 28px; line-height: 38px;}
.hero-right a, #about-section > div:last-child a {font-size: 17px;}
.hero-right a i {height: 38px; width: 38px;}
.inv-wrap h2 {font-size: 35px; line-height: 35px;}
.about-wrap h1 {font-size: 65px; line-height: 65px;}
.about-wrap {padding: 80px 0 50px 0;}
#about-section > div:last-child ul li {margin-bottom: 5px;}
#about-section > div:last-child ul {margin-top: 10px;}
}
@media only screen and (max-width: 550px) {
.about-wrap h1 {font-size: 60px; line-height: 60px;}
}
@media only screen and (max-width: 500px) {
.hero-left h1 {font-size: 50px; line-height: 55px;}
.hero-left p {font-size: 16px; line-height: 22px;}
.hero-left div > a:first-child button, .hero-left div > a:last-child button, .hero-left div a {width: 100%;}
.hero-right h4, #about-section > div:last-child h4 {font-size: 25px; line-height: 35px;}
.hero-right a, #about-section > div:last-child a {font-size: 16px;}
.hero-right a i {height: 35px; width: 35px;}
#our-services h3, #export-globally h3, #about-section > div:first-child h2 {font-size: 30px; line-height: 40px;}
#our-services p, #export-globally p, #about-section > div:first-child p {font-size: 16px; line-height: 26px;}
.form-bkgrd p {font-size: 15px !important; line-height: 25px !important;}
.form-bkgrd > div {padding: 60px 30px;}
.about-wrap h1 {font-size: 55px; line-height: 55px;}
.about-wrap {padding: 75px 0 45px 0;}
}
@media only screen and (max-width: 450px) {
.footer-wrap {flex-wrap: wrap; gap: 40px;}
.footer-right, .footer-left {width: 100%;}
.nav-left {width: 160px;}
#hero-bkgrd {margin-top: -45px;}
.hero-left > div {flex-wrap: wrap;}
.hero-left > div button {padding: 12px 0 !important;}
#our-services button, .form-bkgrd form .submitselect, .form-bkgrd form .submit, .contact-form form .submitselect, .contact-form form .submit, #about-section button {width: 100%; padding: 14px 0;}
.about-wrap h1 {font-size: 50px; line-height: 50px;}
}
@media only screen and (max-width: 400px) {
.hero-left h1 {font-size: 45px; line-height: 50px;}
.hero-left p {font-size: 15px; line-height: 21px;}
.hero-wrap {padding: 110px 0 30px 0;}
.hero-left > div button {font-size: 14px !important; line-height: 14px !important;}
.hero-right h4, #about-section > div:last-child h4 {font-size: 22px; line-height: 32px;}
.hero-right a, #about-section > div:last-child a {font-size: 15px;}
.hero-right a i {height: 32px; width: 32px;}
.inv-wrap h2 {font-size: 32px; line-height: 32px;}
#our-services h3, #export-globally h3, #about-section > div:first-child h2 {font-size: 28px; line-height: 38px;}
#our-services p, #export-globally p, #about-section > div:first-child p {font-size: 15px; line-height: 25px;}
.form-bkgrd p {font-size: 14px !important; line-height: 24px !important;}
.form-bkgrd > div {padding: 50px 20px;}
.form-bkgrd form input, .form-bkgrd form textarea, .contact-form form input, .contact-form form textarea {font-size: 14px; line-height: 14px;}
footer p {font-size: 20px; line-height: 20px;}
footer li a {font-size: 15px;}
.inv-wrap {height: 180px;}
.about-wrap h1 {font-size: 45px; line-height: 45px;}
.about-wrap {padding: 70px 0 40px 0;}
#about-section > div:last-child ul li {margin-bottom: 3px;}
#about-section > div:last-child ul {margin-top: 8px;}
#about-section > div:last-child {padding: 25px 0 25px 25px;}
}
@media only screen and (max-width: 350px) {
.nav-left {width: 140px;}
#hero-bkgrd {margin-top: -40px;}
#about-section > div:last-child {padding: 25px 0 25px 20px;}
.about-wrap h1 {font-size: 40px; line-height: 40px;}
}
@media only screen and (max-width: 300px) {
.hero-left h1 {font-size: 40px; line-height: 45px;}
.about-wrap h1 {font-size: 50px; line-height: 50px;}
.about-wrap {padding: 65px 0 35px 0;}
.about-wrap h1 {font-size: 35px; line-height: 35px;}
}