/***** 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 { background: #EAEAEA;}
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;}
/*--- HEADER STYLES ---------------------*/
header {background: #000 url("/siteart/backgrounds/header-bkgrd.jpg") no-repeat; background-color: #fff; background-position: center; background-size: cover;}
#header {display: flex; justify-content: space-between; align-items: center; padding-top: 15px;}
.header-links {display: flex; align-items: center; gap: 30px;}
.header-locations {display: flex; align-items: center; gap: 30px;}
.header-undersold p {text-align: center; font-family: 'zilla-slab', sans-serif; color: #476010; font-size: 18px; font-weight: bold; text-transform: uppercase; margin-bottom: 10px;}
.header-locations i {color: #476010;}
.header-locations li a {font-family: 'zilla-slab', sans-serif; font-size: 16px; font-weight: bold; color: #000; text-transform: uppercase; display: flex; align-items: center; gap: 2px;}
.header-locations li {line-height: 26px;}
header hr {border: 1px #C3C3C3 solid; height: 50px;}
.header-fb {display: flex; align-items: center; gap: 30px; margin-top: 30px;}
.header-fb i {color: #476010; background: #fff; border-radius: 40px; height: 33px; width: 33px; display: flex; justify-content: center; align-items: center;}
.horse-buggy {position: relative; bottom: -5px;}
.horse-buggy img {opacity: .50;}
.header-logo {position: relative; bottom: -11px; left: 80px;}
.header-locations a:hover {color: #476010; transition: .5s;}
/*---BODY--------------------------------*/
/*---DFAULT---*/
#hero {background: #000 url("/siteart/backgrounds/bkgrd-1.jpg") no-repeat; background-size: cover; background-position: center;}
.hero-width {width: 90%; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 8%; padding-top: 30px;}
#hero .inventory-white h1 {color: #fff; font-family: 'zilla-slab', sans-serif; font-size: 24px; text-transform: uppercase; margin-bottom: 12px; text-align: center;}
#hero .inventory-white hr {border: 1px #fff solid; width: 80px;}
#hero .inv-black hr {border: 1px #000 solid; width: 80px;}
.button-img button {width: 100%; margin-top: 30px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border: 4px #476010 solid; height: 120px; position: relative; z-index: 500;}
.button-img button img {width: 200px; position: relative; top: -30px;}
.button-inv button {width: 90%; margin: 0 auto; display: flex; justify-content: center; text-align: center; top: -20px; background: #476010; border: none; color: #fff; font-family: 'roboto', sans-serif; font-size: 15px; text-transform: uppercase; font-weight: bold; padding: 10px 0 12px 0; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%); position: relative; z-index: 600;}
.inventory-white:hover .button-inv button {background: #364900; transition: .5s;}
.inventory-white:hover .button-img button img {transform: scale(110%); transition: .5s;}
.inventory-white {width: 45%; padding-bottom: 30px;}
.inv-black h1 {color: #222222 !important;}
.inv-full {width: 98% !important; margin: 0 auto;}
.inv-full .button-img button img {top: -30px; width: 230px;}
#hero .inventory-white:hover h1 {color: #FBAB2E; transition: .5s;}
#hero .inv-black:hover h1 {color: #364900 !important; transition: .5s;}
#hero-slideshow {margin-top: -130px;}
#hero-slideshow img {width: 100%;}
.slide-style {position: absolute; z-index: 400; width: 100%;}
#home-about {background: #000 url("/siteart/backgrounds/bkgrd-4.jpg") no-repeat; background-position: center; background-size: cover; padding: 240px 0 110px 0;}
.style {position: absolute; z-index: 600; width: 100%;}
.style img {width: 100%;}
.about-bkgrd {background: rgba(37,34,32,0.80); width: 85%; margin: 0 auto;
/* Add the blur effect */
/*
filter: blur(8px);
-webkit-filter: blur(8px);
*/
}
.about-bkgrd div {width: 75%; margin: 0 auto; text-align: center; padding: 90px 0;}
.about-bkgrd h2 {font-family: 'zilla-slab', sans-serif; color: #fff; font-size: 30px; font-weight: bold; text-transform: uppercase; margin-bottom: 15px;}
.about-bkgrd hr {border: 1px #FBAB2E solid; width: 230px;}
.about-bkgrd p {font-family: 'montserrat', sans-serif; color: #fff; font-size: 16px; font-weight: 600; line-height: 26px; margin-top: 20px; margin-bottom: 30px;}
.about-bkgrd button {background: #394D0D; border-radius: 5px; padding: 12px 0 12px 0; width: 300px; border: none; color: #fff; font-family: 'montserrat', sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase;}
.about-bkgrd button:hover {background: #364900;}
/*---ABOUT---*/
.about-hero {clip-path: polygon(55% 100%, 100% 100%, 100% 0%, 100% 0%, 0% 0%, 0% 0%, 0% 90%, 48% 90%); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.about-hero img {width: 100%;}
#about {background: #000 url("/siteart/backgrounds/about-bkgrd.jpg") no-repeat; background-position: top; background-size: cover; margin-top: -52px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.about-white-bkgrd {background: #fff; width: 80%; margin: 0 auto;}
.about-width-style {width: 95%; margin: 0 auto; padding: 100px 0 20px 0;}
.about-width-style h1 {color: #394d0d; font-family: 'zilla-slab', serif; text-transform: uppercase; font-weight: 800; font-size: 30px; margin-bottom: 10px;}
.about-width-style p {font-size: 14px; line-height: 25px; margin-bottom: 14px; font-family: 'montserrat', sans-serif;}
.about-text-bkgrd {background: #000 url("/siteart/backgrounds/about-texture.jpg") repeat; width: 80%; margin: 0 auto;}
.about-text-bkgrd .about-width-style {width: 95%; margin: 0 auto; padding: 20px 0 !important;}
.about-width-style h2 {color: #fbab2e; margin-bottom: 30px; font-family: 'zilla-slab', serif; text-transform: uppercase; font-weight: 800; font-size: 25px;}
.about-width-style > div {display: flex; gap: 30px;}
.about-width-style > div img {width: 100%; max-height: 400px; object-fit: cover; object-position: top;}
.about-width-style h3 {color: #394d0d; font-family: 'zilla-slab', serif; text-transform: uppercase; font-weight: 800; font-size: 20px; margin-bottom: 7px;}
.about-width-style h4 {font-family: 'montserrat', sans-serif; font-size: 18px; margin-bottom: 7px; text-rendering: optimizeLegibility; font-weight: 300;}
.about-width-style a {color: #000; text-decoration: underline; font-family: 'montserrat', sans-serif; font-size: 14px;}
.about-width-style a:hover {text-decoration: none;}
.about-width-style > div p {margin-top: 14px;}
.remove-top-padding {padding: 20px 0 !important;}
.about-width-style button {padding: 14px 0; width: 200px; background: #394d0d; color: #fff; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 6px; font-weight: 600; font-size: 16px; border: none; text-align: center; margin-bottom: 40px;}
.about-contact {justify-content: center;}
.about-width-style button:hover {background: #222; transition: .5s;}
/*---WHAT WE CARRY---*/
.we-carry img {width: 240px !important; max-height: 120px !important;}
.about-white-bkgrd hr {margin: 0px; border: 1px #eaeaea solid; width: 40%; margin: 0 auto;}
/*---CONTACT---*/
#contact {background: #000 url("/siteart/backgrounds/about-bkgrd.jpg") no-repeat; background-position: top; background-size: cover; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
#contact h1 {font-size: 30px; color: #394d0d; font-family: 'zilla-slab', serif; text-transform: uppercase; font-weight: 800; margin-bottom: 10px;}
.contact-width {width: 95%; margin: 0 auto; padding-top: 50px; display: flex; justify-content: space-between; gap: 110px;}
#contact .about-white-bkgrd {display: flex;}
.contact-blue {background: #f8f8f8; padding: 10px; margin-bottom: 20px; width: 350px;}
.contact-blue h2 {font-size: 16px; font-family: 'montserrat', sans-serif; margin-bottom: 5px;}
.contact-blue p {font-size: 14px; font-family: 'montserrat', sans-serif; margin-bottom: 14px; margin-top: 14px;}
.contact-blue a {color: #000; text-decoration: underline;}
.contact-blue a:hover {text-decoration: none;}
.contact-maps hr {width: 100%; margin-top: 20px; margin-bottom: 20px;}
.consign-form {width: 100%;}
.form-flex {display: flex; justify-content: space-between; padding-top: 20px;}
#contact label {font-family: 'montserrat', sans-serif; font-size: 14px; font-weight: bold; margin-top: 6px; width: 400px;}
.form-flex > td {width: 100%;}
.form-flex > td input, .form-flex > td textarea {width: 78%; padding: 7px 0 7px 7px; font-size: 14px; font-family: 'montserrat', sans-serif; margin-bottom: 10px; border: 1px #cacaca solid;}
.form-flex > td select {width: 80%; padding: 7px 0 7px 7px; font-size: 14px; font-family: 'montserrat', sans-serif; margin-bottom: 10px; border: 1px #cacaca solid;}
.label-height {display: flex;}
#contact .submitselect {padding: 14px 0; width: 200px; background: #394d0d; color: #fff; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 6px; font-weight: 600; font-size: 16px; border: none; text-align: center; margin-bottom: 40px; font-family: 'montserrat', sans-serif; display: flex; justify-content: center;}
#contact .formrow {display: flex; justify-content: center; margin-top: 30px;}
#contact .submitselect:hover {background: #222; transition: .5s;}
.CaptchaMessagePanel {font-family: 'montserrat', sans-serif; font-size: 14px;}
.CaptchaWhatsThisPanel a {font-family: 'montserrat', sans-serif; font-size: 14px; text-decoration: underline; color: #000;}
.CaptchaWhatsThisPanel a:hover {text-decoration: none;}
.captcha .submit {padding: 14px 0; width: 200px; background: #394d0d; color: #fff; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 6px; font-weight: 600; font-size: 16px; border: none; text-align: center; margin-bottom: 40px; font-family: 'montserrat', sans-serif;}
/*---FINANCING---*/
.about-width-style .accordion h4 {margin-bottom: 0px !important;}
.financing-img {position: relative; top: -35px;}
/*---THANK YOU---*/
.thankyou-message h2 {font-family: 'montserrat', sans-serif; font-size: 18px; margin-bottom: 7px; font-weight: 300; text-rendering: optimizeLegibility;}
.thankyou-message p {font-size: 14px; line-height: 25px; margin-bottom: 14px; font-family: 'montserrat', sans-serif;}
.thankyou-button button {padding: 14px 0; width: 250px; background: #394d0d; color: #fff; text-transform: uppercase; letter-spacing: 0.2em; border-radius: 6px; font-weight: 600; font-size: 16px; border: none; text-align: center; margin-bottom: 40px; font-family: 'montserrat', sans-serif;}
.thankyou-button button:hover {background: #222; transition: .5s;}
/*--------FORM STYLES--------------------*/
/*Accordion*/
.flex-container.flex-services {
justify-content: space-between;
gap: 15px;
}
.flex-services .page-head {
flex: 1;
}
.service-section {
flex: 1;
}
.accordion {
background: none !important;
color: #000 !important;
cursor: pointer;
font-size: 25px;
width: 100% !important;
margin: 0 auto;
text-align: left;
border: none;
outline: none;
font-family: 'inter-variable', sans-serif !important;
transition: 0.4s;
display: flex;
align-items: center;
justify-content: flex-start;
font-weight: 600;
letter-spacing: 1px;
border-radius: 5px;
gap: 10px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
}
.panel ul.fa-ul {
padding-inline-start: 0px;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0 20px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
margin: 8px 0;
}
.panel p {
padding: 0px 0;
}
.accordion:after {
content: '+'; /* Unicode character for "plus" sign (+) */
font-size: 28px;
color: #000;
font-weight: 300;
float: right;
}
.active:after {
content: "-";
font-size: 28px;
color: #000;
float: right;
margin-left: 5px;/* Unicode character for "minus" sign (-) */
}
/*-------- FOOTER STYLES ----------------*/
footer{background: #222222;}
.footer {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 50px 0 40px 0;}
.footer h3 {font-family: 'zilla-slab', sans-serif; color: #FBAB2E; font-size: 28px; font-weight: bold; text-transform: uppercase; margin-bottom: 15px;}
.footer a {font-family: 'montserrat', sans-serif; font-size: 16px; color: #fff;}
.footer i {color: #FBAB2E;}
.footer-indiana {display: flex; gap: 50px;}
.footer-hours {display: flex; gap: 30px;}
.footer-hours li {font-family: 'montserrat', sans-serif; font-size: 16px; color: #fff;}
.footer p {color: #FBAB2E; font-family: 'montserrat', sans-serif; font-size: 16px; font-weight: 600;}
.footer-contact a {line-height: 25px !important;}
.footer-contact li {margin-bottom: 6px;}
.footer-contact ul {margin-bottom: 20px;}
.footer-store li {line-height: 25px;}
.footer-store ul {margin-bottom: 25px;}
.footer-store p {margin-bottom: 5px;}
.footer-links a {line-height: 25px;}
.footer-connect i {color: #fff; background: #394D0D; width: 33px; height: 33px; border-radius: 40px; display: flex; justify-content: center; align-items: center; margin-bottom: 12px;}
footer a:hover {color: #FBAB2E;}
.scrolling-footer footer {margin-top: -64px; position: relative;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-content, .detail-wrapper {margin-top: 25px !important; margin-bottom: 100px !important;}
.list-top-section .listing-option-bar-content .list-listings-count {display: contents !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, .list-container-flexrow .price-container .price {color: #394D0D !important;}
.list-top-section .list-title .list-title-text {color: #222222 !important;}
.grouped-faceted-header {background: #222222 !important; border-bottom: 1px #222 solid !important;}
.bottom-bar .listing-control-bar .bi-center, .bottom-bar .mobile-listing-control-bar .bi-center {background: #222 !important; border: 2px #222 solid !important;}
.faceted-search-content .selected-facets-container .selected-facet, .list-content .list-error-container .info button:not(.login-button), .list-container-flexrow .view-listing-details-link, .list-container-flexrow .dealer-phone-call, .list-container-flexrow .dealer-phone-text {background: #394D0D !important;}
.suncoastrvtrailersalescomhstg-1stgbdx, .list-content .listing-widgets a {display: none !important;}
.inv-filter {margin: 0 auto; max-width: 1124px; margin-top: 25px;}
.inv-filter div {display: flex; gap: 10px; margin-top: 5px;}
.inv-filter div button {background: #394D0D; width: 140px; padding: 8px; border-radius: 5px; color: #fff; font-family: 'montserrat', sans-serif;}
.inv-filter div button:hover {background: #222; transition: .5s;}
/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1550px) {
.footer {flex-wrap: wrap; gap: 48px;}
}
@media only screen and (max-width: 1500px) {
.header-logo {left: 50px;}
}
@media only screen and (max-width: 1450px) {
.contact-width {gap: 70px;}
#contact label {width: 350px;}
}
@media only screen and (max-width: 1400px) {
.header-logo {left: 20px;}
}
@media only screen and (max-width: 1350px) {
.hero-width {gap: 5%;}
.inventory-white {width: 47%;}
}
@media only screen and (max-width: 1300px) {
.contact-width {gap: 50px;}
.contact-blue {width: 300px;}
}
@media only screen and (max-width: 1240px) {
.horse-buggy {display: none;}
.header-logo {left: 0px; z-index: 600;}
#header {width: 95%; margin: 0 auto;}
.about-bkgrd {width: 90%;}
.about-bkgrd div {width: 80%;}
#hero-slideshow {margin-top: -110px;}
#home-about {padding: 220px 0 110px 0;}
#contact .about-white-bkgrd {width: 85%;}
}
@media only screen and (max-width: 1110px) {
.hero-width {gap: 3%;}
.inventory-white {width: 48%;}
#hero .inventory-white h1 {font-size: 22px;}
}
@media only screen and (max-width: 1050px) {
.about-white-bkgrd, .about-text-bkgrd {width: 90%;}
.we-carry img {width: 200px !important; max-height: 95px !important;}
#contact .about-white-bkgrd {width: 100%;}
}
@media only screen and (max-width: 1000px) {
#header {flex-wrap: wrap; justify-content: center; gap: 20px; padding-bottom: 25px; padding-top: 20px;}
.header-links {width: 100%; justify-content: center;}
.header-fb {display: none;}
.header-logo {position: inherit;}
.about-bkgrd {width: 95%;}
.about-bkgrd div {width: 85%;}
#hero .inventory-white h1 {font-size: 20px;}
.button-inv button {font-size: 14px;}
.button-img button img {width: 180px;}
.button-img button {margin-top: 22px;}
#hero-slideshow {margin-top: -90px;}
#home-about {padding: 200px 0 110px 0;}
.about-bkgrd h2 {font-size: 28px;}
.about-bkgrd p {font-size: 15px;}
.about-bkgrd button {font-size: 14px;}
.about-bkgrd hr {width: 200px;}
.footer h3 {font-size: 26px;}
.footer-contact a {line-height: 24px !important;}
.footer a {font-size: 15px;}
.footer p {font-size: 15px;}
.footer-store li {line-height: 24px;}
.footer-hours li {font-size: 15px;}
}
@media only screen and (max-width: 900px) {
#hero .inventory-white h1 {font-size: 18px;}
.button-img button {height: 110px;}
.button-img button img {width: 160px;}
.inv-full .button-img button img {width: 190px;}
.contact-width {flex-wrap: wrap;}
.contact-maps {width: 100%;}
.contact-blue {width: 100%; padding: 10px 0;}
.contact-blue div {width: 95%; margin: 0 auto;}
}
@media only screen and (max-width: 810px) {
.inventory-white {width: 75%;}
.inv-full {width: 75% !important;}
}
@media only screen and (max-width: 785px) {
.inv-filter {text-align: center;}
.inv-filter div {justify-content: center;}
}
@media only screen and (max-width: 700px) {
.header-logo a {display: flex;}
.header-logo img {width: 90%; margin: 0 auto;}
.about-bkgrd div {width: 90%;}
#home-about {padding: 140px 0 100px 0;}
.footer-indiana {flex-wrap: wrap;}
.footer-indiana > div {width: 100%;}
.footer-indiana {gap: 0px;}
.about-white-bkgrd, .about-text-bkgrd {width: 100%;}
.about-width-style > div {flex-wrap: wrap;}
.about-width-style > div img {width: auto;}
.we-carry img {width: 200px !important; max-height: none !important;}
.we-carry {gap: 10px !important;}
}
@media only screen and (max-width: 650px) {
.inventory-white {width: 85%;}
.inv-full {width: 85% !important;}
}
@media only screen and (max-width: 600px) {
#hero-slideshow {margin-top: -72px;}
.about-bkgrd h2 {font-size: 26px;}
.about-bkgrd p {font-size: 14px; line-height: 25px;}
.about-bkgrd hr {width: 170px;}
.footer h3 {font-size: 24px;}
.footer-contact a {line-height: 24px !important;}
.footer a {font-size: 14px;}
.footer p {font-size: 14px;}
.footer-store li {line-height: 24px;}
.footer-hours li {font-size: 14px;}
.label-height {flex-wrap: wrap;}
.form-flex > td input, .form-flex > td textarea, .form-flex > td select {width: 100%; padding: 10px 0 10px 10px;}
#contact label {margin-bottom: 6px; width: 100%;}
}
@media only screen and (max-width: 550px) {
.inventory-white {width: 90%;}
.inv-full {width: 90% !important;}
}
@media only screen and (max-width: 500px) {
.financing-img img {width: 100%;}
}
@media only screen and (max-width: 450px) {
.header-locations {flex-wrap: wrap; gap: 10px;}
header hr {display: none;}
.header-locations ul {width: 100%;}
.header-locations li {display: flex; justify-content: center;}
.header-logo img {width: 95%;}
#home-about {padding: 130px 0 100px 0;}
.inventory-white {width: 100%;}
.inv-full {width: 100% !important;}
.about-bkgrd h2 {font-size: 24px;}
.about-bkgrd hr {width: 40%;}
.footer h3 {font-size: 22px;}
.about-width-style > div img {width: 100%; max-height: none;}
.we-carry img {width: 150px !important;}
.we-carry {gap: 0px !important;}
}
@media only screen and (max-width: 400px) {
.about-bkgrd button {width: 100%;}
.thankyou-button button {width: 100%;}
}
@media only screen and (max-width: 350px) {
.footer-hours {gap: 10px; justify-content: space-between;}
.footer-connect img {width: 100%;}
.contact-blue p {font-size: 13px;}
}
@media only screen and (max-width: 300px) {
.contact-blue p {font-size: 12px;}
.inv-filter div a, .inv-filter div button {width: 100%;}
}