/***** 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: 'Barlow', sans-serif;}
/*--- HEADER STYLES ---------------------*/
header {background: #022D45;}
#header {width: 95%; margin: 0 auto; padding: 10px 0; display: flex; justify-content: space-between; align-items: center;}
header a {color: #fff; font-size: 15px; font-family: 'Barlow', sans-serif; font-weight: 500; display: flex; align-items: center; gap: 10px; line-height: 15px;}
.header-contact {display: flex; gap: 50px; align-items: center;}
header p {margin-top: 5px;}
.header-fb i {font-size: 20px;}
header a:hover {color: #55AEE8; transition: .5s;}
/*---BODY--------------------------------*/
/*---DEFAULT---*/
#home-hero {display: flex;}
.hero-content {width: 30%; background: url("/siteart/hero-overlay.jpg") no-repeat; background-position: center; background-size: cover; display: flex; align-items: flex-end; background-color:#000;}
.reel {width: 70%;}
.hero-content div {width: 90%; margin: 0 auto; margin-bottom: 50px;}
.hero-content div p {color: #fff; text-transform: uppercase; font-size: 20px; font-weight: 500; line-height: 35px; margin-bottom: 5px;}
.hero-content div h1 {color: #fff; font-size: 45px; line-height: 50px; font-weight: 600; text-transform: uppercase;}
.hero-content div button {color: #fff; font-size: 18px; font-family: 'Barlow', sans-serif; width: 220px; border-radius: 30px; border: 1px solid #fff; padding: 12px 0 10px 0; line-height: 18px; background: none; margin-top: 20px;}
.hero-content div button:hover {background: #55AEE8; border: 1px #55AEE8 solid;}
.mobile-hero {display: none;}
#home-callto {width: 95%; margin: 0 auto; margin-top: 80px;}
#home-callto h2 {width: 900px; margin: 0 auto; text-align: center; font-size: 35px; text-transform: uppercase; line-height: 40px; font-weight: 600;}
#home-callto hr {width: 100px; border: 4px #03476E solid; margin-top: 15px; margin-bottom: 15px;}
.ag-equipment {background: url("/siteart/hero-callto/ag-equipment.jpg") no-repeat; background-position: center; background-size: cover; width: 100%; height: 380px; display: flex; align-items: flex-end;}
.construction-equipment {background: url("/siteart/hero-callto/construction.jpg") no-repeat; background-position: center; background-size: cover; width: 100%; height: 380px; display: flex; align-items: flex-end;}
.attachments {background: url("/siteart/hero-callto/attachments.jpg") no-repeat; background-position: center; background-size: cover; width: 100%; height: 380px; display: flex; align-items: flex-end;}
.parts-inv {background: url("/siteart/hero-callto/parts.jpg") no-repeat; background-position: center; background-size: cover; width: 100%; height: 380px; display: flex; align-items: flex-end;}
.consign-equipment {background: url("/siteart/hero-callto/consign-equipment.jpg") no-repeat; background-position: center; background-size: cover; width: 100%; height: 380px; display: flex; align-items: flex-end;}
.view-equipment {background: url("/siteart/hero-callto/view-equipment.jpg") no-repeat; background-position: center; background-size: cover; width: 100%; height: 380px; display: flex; align-items: flex-end;}
.callto-flex {display: flex; gap: 10px; margin-top: 35px;}
.callto-overlay {background: rgba(3,71,110,0.90); text-align: center; padding: 20px 0; width: 100%;}
.callto-overlay h3 {color: #fff; font-size: 30px; text-transform: uppercase; width: 90%; margin: 0 auto; line-height: 35px;}
.callto-flex a:hover .callto-overlay {padding: 155px 0; transition: .8s;}
#home-about {width: 80%; margin: 0 auto; margin-top: 80px; border: 1px #A5A5A5 solid }
#home-about > div {width: 85%; margin: 0 auto; padding: 80px 0; text-align: center;}
#home-about > div h2 {font-size: 35px; text-transform: uppercase; line-height: 40px; font-weight: 600; margin-bottom: 12px;}
#home-about > div p {font-size: 16px; line-height: 26px; margin-bottom: 8px;}
#home-about > div p span {font-size: 18px; font-weight: 600;}
.home-about-buttons {display: flex; gap: 30px; margin-top: 30px; justify-content: center;}
.home-about-buttons button {background: #03476E; border-radius: 30px; width: 220px; padding: 12px 0; color: #fff; font-size: 17px; font-family: 'Barlow', sans-serif; font-weight: 600; border: none;}
.home-about-buttons button:hover {background: #55AEE8; transition: .5s;}
#home-form {background: url("/siteart/form-bkgrd.jpg") no-repeat; background-position: center; background-size: cover; width: 95%; margin: 0 auto; margin-top: 80px; margin-bottom: 50px;background-color:black;}
#home-form > div {width: 85%; margin: 0 auto; padding: 80px 0;}
#home-form > div h3 {color: #fff; font-size: 30px; text-transform: uppercase; line-height: 35px; margin-bottom: 5px;}
#home-form > div p {color: #fff; font-size: 16px; line-height: 26px; margin-bottom: 15px;}
#home-form form input, #home-form form .form-flex div, #home-form form textarea {width: 100%;}
#home-form form .form-flex {display: flex; gap: 10px; margin-bottom: 10px;}
#home-form form input, #home-form form textarea {font-size: 14px; font-family: 'Barlow', sans-serif; line-height: 15px; color: #777; padding: 12px 0 10px 0px; border-radius: 0px; border: none;}
#home-form form .submitselect {background: none; border-radius: 30px; width: 180px; padding: 12px 0; color: #fff; font-size: 17px; font-family: 'Barlow', sans-serif; font-weight: 600; border: 1px #fff solid; display: flex; justify-content: center; margin-top: 30px;}
#home-form form .submitselect:hover {background: #55AEE8; border: 1px #55AEE8 solid;}
#home-form form input::placeholder, #home-form form textarea::placeholder {padding-left: 15px;}
#home-form form .submit {background: none; border-radius: 30px; width: 180px; padding: 12px 0; color: #fff; font-size: 17px; font-family: 'Barlow', sans-serif; font-weight: 600; border: 1px #fff solid;}
#home-form form .submit:hover {background: #55AEE8; border: 1px #55AEE8 solid; cursor: pointer !important;}
#home-form form .CaptchaMessagePanel {color: #fff; font-family: 'Barlow', sans-serif;}
#home-form form .CaptchaWhatsThisPanel a {color: #fff; font-family: 'Barlow', sans-serif; border-bottom: 1px #fff solid;}
/*---FINANCE---*/
#finance-hero {background: url("/siteart/finance-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.hero-overlay {background: rgba(3,71,110,0.85); padding: 50px 0;}
.hero-overlay div {width: 900px; margin: 0 auto; border: 2px #fff solid; padding: 50px 0;}
.hero-overlay div h1 {text-align: center; color: #fff; text-transform: uppercase; font-size: 35px; line-height: 40px;}
.small-nav {width: 95%; margin: 0 auto; padding-top: 20px;}
.small-nav p {text-transform: uppercase; color: #000; font-size: 14px;}
.small-nav p a {color: #000;}
.small-nav p a:hover {color: #55AEE8; transition: .5s;}
.coming-soon {text-align: center; width: 95%; margin: 0 auto; padding: 50px 0;}
.coming-soon p {font-size: 16px; line-height: 26px;}
.coming-soon button {background: #03476E; border-radius: 30px; width: 220px; padding: 12px 0; color: #fff; font-size: 15px; font-family: 'Barlow', sans-serif; font-weight: 600; border: none; margin-top: 15px;}
.coming-soon button:hover {background: #55AEE8; transition: .5s;}
/*---CONSIGN WITH US---*/
#consign-hero {background: url("/siteart/consign-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
#consign-form {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; width: 90%; margin: 0 auto; margin-top: 60px; margin-bottom: 80px;}
#consign-form > div {width: 85%; margin: 0 auto; padding: 80px 0;}
#consign-form > div h2 {color: #000; font-size: 30px; text-transform: uppercase; line-height: 35px; margin-bottom: 5px;}
#consign-form > div p {color: #000; font-size: 16px; line-height: 26px; margin-bottom: 15px;}
#consign-form form input, #consign-form form .form-flex div, #consign-form form textarea {width: 100%;}
#consign-form form select {width: 100%;}
#consign-form form .form-flex {display: flex; gap: 10px; margin-bottom: 10px;}
#consign-form form input, #consign-form form textarea, #consign-form form select {font-size: 14px; font-family: 'Barlow', sans-serif; line-height: 15px; color: #777; padding: 12px 0 10px 0px; border-radius: 0px; border: 1px #bbb solid;}
#consign-form form .submitselect {background: #03476E; border-radius: 30px; width: 220px; padding: 12px 0; color: #fff; font-size: 15px; font-family: 'Barlow', sans-serif; font-weight: 600; border: none; margin-top: 30px; display: flex; justify-content: center;}
#consign-form form .submitselect:hover {background: #55AEE8; transition: .5s;}
#consign-form form input::placeholder, #consign-form form textarea::placeholder {padding-left: 15px;}
#consign-form form select {padding-left: 10px;}
#consign-form form .submit {background: #03476E; border-radius: 30px; width: 220px; padding: 12px 0; color: #fff; font-size: 15px; font-family: 'Barlow', sans-serif; font-weight: 600; border: none;}
#consign-form form .submit:hover {background: #55AEE8; transition: .5s; cursor: pointer !important;}
#consign-form form .CaptchaMessagePanel {color: #000; font-family: 'Barlow', sans-serif;}
#consign-form form .CaptchaWhatsThisPanel a {color: #000; font-family: 'Barlow', sans-serif; border-bottom: 1px #000 solid;}
.radio-options {display: flex; gap: 20px; margin-top: 15px; margin-bottom: 15px;}
.radio-options input {width: 20px !important;}
.radio-options label {font-size: 14px; font-family: 'Barlow', sans-serif; line-height: 15px; color: #777;}
/*---CONTACT---*/
#contact-hero {background: url("/siteart/contact-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
/*---ABOUT---*/
#about-hero {background: url("/siteart/about-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.about-content {width: 90%; margin: 0 auto; margin-top: 60px; margin-bottom: 80px;}
.about-content h2 {color: #000; font-size: 30px; text-transform: uppercase; line-height: 35px; margin-bottom: 5px;}
.about-content p {font-size: 16px; line-height: 24px;}
.about-content button {background: #03476E; border-radius: 30px; width: 220px; padding: 12px 0; color: #fff; font-size: 15px; font-family: 'Barlow', sans-serif; font-weight: 600; border: none; margin-top: 25px;}
.about-content button:hover {background: #55AEE8; transition: .5s;}
.about-flex {display: flex; justify-content: space-between;}
.about-flex-content {width: 50%;}
.about-flex-img {width: 40%;}
.about-flex-img img {width: 100%;}
/*--------FORM STYLES--------------------*/
/*-------- FOOTER STYLES ----------------*/
footer {background: #022D45;}
footer > div {width: 95%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between; gap: 50px;}
footer p {font-size: 18px; color: #fff; text-transform: uppercase; margin-bottom: 20px; font-weight: 600; font-family: 'Barlow', sans-serif !important;}
footer li {color: #fff; font-size: 16px; line-height: 30px; font-weight: 600; text-transform: uppercase; font-family: 'Barlow', sans-serif !important;}
footer li a {font-weight: 400 !important; color: #fff; font-family: 'Barlow', sans-serif !important;}
footer i {color: #fff; font-size: 28px; margin-top: 25px;}
footer button {font-size: 15px; width: 180px; color: #fff; border: 1px #fff solid; border-radius: 30px; text-transform: uppercase; font-family: 'Barlow', sans-serif; padding: 10px 0; background: none; margin-top: 25px;}
footer a:hover {color: #55AEE8; transition: .5s;}
footer a:hover i {color: #55AEE8; transition: .5s;}
footer button:hover {background: #55AEE8; border: 1px #55AEE8 solid;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-content {margin-top: 30px !important;}
.detail-wrapper {margin-top: 30px !important;}
.disclaimer span, .legal-text-container p span {font-family: 'Barlow', sans-serif !important; font-size: 16px !important; line-height: 26px !important;}
.snakeriverimplementcomhdev-88jlbf {background: #55AEE8 !important ;}
.parts-redesign {margin-top: 30px !important;}
/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1450px) {
.callto-overlay h3 {font-size: 28px; line-height: 33px;}
.callto-flex a:hover .callto-overlay {padding: 157px 0;}
}
@media only screen and (max-width: 1400px) {
.callto-flex {flex-wrap: wrap; justify-content: center;}
.callto-flex a {width: 32% !important;}
.callto-overlay {width: 100%;}
}
@media only screen and (max-width: 1240px) {
header p {display: none;}
.header-contact {gap: 25px;}
header i {font-size: 20px;}
.hero-content {display: none;}
.reel {width: 100%;}
.mobile-hero {display: contents;}
.mobile-hero-content {width: 100%; background: url("/siteart/hero-overlay.jpg") no-repeat; background-position: center; background-size: cover; display: flex; align-items: flex-end;}
#home-hero {flex-wrap: wrap;}
.mobile-hero-content div {width: 95%; margin: 0 auto; margin-bottom: 50px; margin-top: 50px;}
.mobile-hero-content div p {color: #fff; text-transform: uppercase; font-size: 20px; font-weight: 500; line-height: 35px; margin-bottom: 5px;}
.mobile-hero-content div h1 {color: #fff; font-size: 45px; line-height: 50px; font-weight: 600; text-transform: uppercase;}
.mobile-hero-content div button {color: #fff; font-size: 18px; font-family: 'Barlow', sans-serif; width: 220px; border-radius: 30px; border: 1px solid #fff; padding: 12px 0 10px 0; line-height: 18px; background: none; margin-top: 20px;}
.mobile-hero-content div button:hover {background: #55AEE8; border: 1px #55AEE8 solid;}
#home-about {width: 95%;}
#home-form > div, #consign-form > div {width: 90%;}
.hero-overlay div {width: 80%;}
.about-content {width: 95%;}
}
@media only screen and (max-width: 1150px) {
.about-flex {flex-wrap: wrap; gap: 50px;}
.about-flex-content, .about-flex-img {width: 100%;}
.about-flex-img img {width: auto;}
}
@media only screen and (max-width: 900px) {
#home-callto h2 {width: 100%;}
}
@media only screen and (max-width: 800px) {
.callto-flex a {width: 49% !important;}
#home-about > div {width: 90%;}
#home-callto h2 {font-size: 30px; line-height: 35px;}
#home-callto hr {width: 80px; border: 3px #03476E solid;}
.callto-overlay h3 {font-size: 25px; line-height: 30px;}
#home-about > div h2 {font-size: 30px; line-height: 35px;}
#home-about > div p span {font-size: 17px;}
#home-about > div p {font-size: 15px;}
#home-form > div h3, #consign-form > div h2, .about-content h2 {font-size: 25px; line-height: 30px;}
#home-form > div p, #consign-form > div p {font-size: 15px;}
footer p {font-size: 17px;}
footer li {font-size: 15px;}
.mobile-hero-content div h1 {font-size: 40px; line-height: 45px;}
.mobile-hero-content div p {font-size: 18px; line-height: 30px;}
.mobile-hero-content div button {font-size: 16px; margin-top: 15px;}
footer button {font-size: 14px;}
.callto-flex a:hover .callto-overlay {padding: 160px 0;}
.hero-overlay div {padding: 40px 0;}
.hero-overlay div h1 {font-size: 30px; line-height: 35px;}
.coming-soon p {font-size: 15px;}
.coming-soon button {font-size: 14px;}
.about-flex-img img {width: 100%;}
}
@media only screen and (max-width: 600px) {
header i {font-size: 18px !important;}
.header-contact {gap: 20px;}
.home-about-buttons {flex-wrap: wrap; gap: 10px;}
.home-about-buttons button, .home-about-buttons a {width: 100%;}
.home-about-buttons button {padding: 15px 0;}
#home-form form .form-flex, #consign-form form .form-flex {flex-wrap: wrap;}
#home-form form .submitselect, #home-form form .submit, #consign-form form .submitselect, #consign-form form .submit {width: 100%; padding: 15px 0;}
footer > div {flex-wrap: wrap;}
.mobile-hero-content div button {width: 100%; padding: 15px 0 13px 0;}
.about-content button {width: 100%;}
.coming-soon button {width: 100%;}
#consign-form form select {width: 100%;}
}
@media only screen and (max-width: 550px) {
.callto-flex a {width: 70% !important;}
}
@media only screen and (max-width: 450px) {
.callto-flex a {width: 100% !important;}
#home-callto h2 {font-size: 25px; line-height: 30px;}
#home-callto hr {width: 60px; border: 2px #03476E solid;}
.callto-overlay h3 {font-size: 22px; line-height: 27px;}
#home-about > div h2 {font-size: 25px; line-height: 30px;}
#home-about > div p span {font-size: 16px;}
#home-about > div p {font-size: 14px; line-height: 22px;}
.home-about-buttons button {font-size: 16px;}
#home-form > div h3, #consign-form > div h2, .about-content h2 {font-size: 22px; line-height: 27px;}
#home-form > div p, #consign-form > div p {font-size: 14px; line-height: 22px;}
#home-form form .submitselect, #home-form form .submit, #consign-form form .submitselect, #consign-form form .submit {font-size: 16px;}
footer p {font-size: 16px; margin-bottom: 15px;}
footer li {font-size: 14px;}
footer i {font-size: 25px; margin-top: 15px;}
footer button {font-size: 13px; margin-top: 15px;}
.callto-flex a:hover .callto-overlay {padding: 163px 0;}
.hero-overlay div {padding: 30px 0;}
.hero-overlay div h1 {font-size: 25px; line-height: 30px;}
.coming-soon p {font-size: 14px; line-height: 24px;}
.small-nav p {font-size: 13px;}
#consign-form > div {padding: 0px; width: 100%;}
#consign-form {box-shadow: none; width: 95%;}
}
@media only screen and (max-width: 350px) {
footer p {font-size: 15px; margin-bottom: 15px;}
footer li {font-size: 13px;}
footer i {font-size: 20px; margin-top: 15px;}
footer button {font-size: 12px;}
}
@media only screen and (max-width: 300px) {
header i {font-size: 16px !important;}
.header-contact {gap: 15px;}
footer li {font-size: 12px;}
footer button {font-size: 11px;}
.coming-soon button {width: 100%;}
.radio-options {gap: 0px; justify-content: space-between;}
}