/*
Theme Name: www.sniderequipment.com
Theme URI: https://sandhills.com
Author: Sandhills
Author URI: https://sandhills.com
Description: Sandhills default template.
Version: 1.0
Text Domain: sandhills
Tags: Sandhills default
*/
/*--------------------------------------------------------------
## Primary Styles
--------------------------------------------------------------*/
html, body { width: 100%; }

.wp-custom-header iframe, .wp-custom-header img, .wp-custom-header video { display: block; height: auto; max-width: 100%; }

.wp-custom-header { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }

.wp-custom-header iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Class for Google Map widget */
.google_map { width: 100%; min-height: 58vh; }

.navbar-default { background-color: transparent !important; border-color: transparent !important; }

.navbar { min-height: auto !important; margin-bottom: 0 !important; }

.navigation-top { width: 100%; }

.menu li { width: auto !important; padding-right: 6%; display: inline-block; }

.menu li:last-child { padding-right: 0 !important; }

.menu li > a { color: #000; font-size: 1.5em; }

.dropdown-menu { background-color: rgba(0, 0, 0, 0.7); color: orange; border-radius: 0px; }

.navbar-default .navbar-nav > li > a { color: #000; font-size: 18px; }

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { color: #e68a24; }

.dropdown-menu:not(.head-list) > li > a { color: #000; font-size: 16px; font-weight: 400; }

.dropdown-menu:not(.head-list) > li > a:hover { background-color: #e68a24; transition: linear 0.2s; }

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; }

.comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; }

.comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; }

#wp-admin-bar-new-content-default { display: none; }

/*---PLEASE MAKE CSS CHANGES IN STYLES.SCSS FILE, CHANGES MADE IN CSS FILE WILL BE OVERRIDDEN ----*/
/*---These are Variables. They are being used in place of the hex color easily changes site colors but updating these variables----*/
/*----These are Mixins. They work similarly to variables and are plugged in using @include in place of the CSS----*/
/*-------- BODY STYLES --------*/
* { box-sizing: border-box; }

body { font-family: "Roboto", sans-serif; }

h1, h2, h3, h4, h5 { font-family: "Roboto", sans-serif; }

a { text-decoration: none !important; }

.wrap p { color: #000; font-family: "Roboto", sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 32px; }
.wrap p a { font-weight: 600; }
@media only screen and (max-width: 800px) { .wrap p { font-size: 18px; } }
@media only screen and (max-width: 400px) { .wrap p { font-size: 16px; } }

/*----Text-------*/
.large-white { color: #FFF; font-family: "Roboto", sans-serif; font-size: 64px; font-style: normal; font-weight: 900; line-height: 68px; text-transform: uppercase; }
@media only screen and (max-width: 1000px) { .large-white { font-size: 35px; line-height: 38px; } }
@media only screen and (max-width: 700px) { .large-white { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 500px) { .large-white { font-size: 25px; line-height: 28px; } }

.large-black { color: #000; font-family: "Roboto", sans-serif; font-size: 40px; font-style: normal; font-weight: 900; line-height: 44px; text-transform: uppercase; }
@media only screen and (max-width: 1000px) { .large-black { font-size: 35px; line-height: 38px; } }
@media only screen and (max-width: 700px) { .large-black { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 500px) { .large-black { font-size: 25px; line-height: 28px; } }

.medium-black { color: #000; font-family: "Roboto", sans-serif; font-size: 30px; font-style: normal; font-weight: 900; line-height: 36px; text-transform: uppercase; }
@media only screen and (max-width: 1000px) { .medium-black { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 700px) { .medium-black { font-size: 26px; line-height: 30px; } }
@media only screen and (max-width: 500px) { .medium-black { font-size: 22px; line-height: 26px; } }

.paragraph { color: #000; font-family: "Roboto", sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 32px; }
.paragraph a { font-weight: 600; }
@media only screen and (max-width: 800px) { .paragraph { font-size: 18px; } }
@media only screen and (max-width: 400px) { .paragraph { font-size: 16px; } }

/*------Buttons-------*/
.red-btn { font-family: "Roboto", sans-serif; transition: .3s ease; text-transform: uppercase; display: block; text-align: center; padding: 16px 10px; font-weight: 900; color: #fff; width: 220px; border-radius: 68px; border: solid 3px #fff; background: #e00024; box-shadow: 0 0 0 4px #e00024; }

.red-btn:hover { background: #BF0120; }

.white-btn { font-family: "Roboto", sans-serif; text-transform: uppercase; display: block; text-align: center; padding: 16px 10px; font-weight: 900; color: #e00024; width: 220px; border-radius: 68px; border: solid 3px #e00024; transition: .3s ease; background: #fff; box-shadow: 0 0 0 4px #fff; }

.white-btn:hover { background: #DDDDDD; }

.text-btn { font-size: 20px; transition: .3s ease; border: none; background: transparent; text-transform: uppercase; font-family: "Roboto", sans-serif; font-weight: 900; color: #000; text-transform: uppercase; }

.text-btn:after { content: "+"; color: #000; transition: .3s ease; padding-left: 10px; }

.text-btn:hover { color: #e00024; }

/*--- HEADER STYLES ---------------------*/
.header-top { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; background: #000; }

.header-row { width: 100%; background: #fff; display: flex; flex-direction: row; justify-content: space-between; max-width: 1750px; margin: 0 auto; width: 98%; padding: 10px; box-sizing: border-box; }

.header-links a { padding: 19px; display: inline-block; font-size: 24px; color: #fff; text-transform: uppercase; transition: .3s ease; font-weight: 900; }

.header-links a:hover { color: #e00024; }

.logo { width: 100%; max-width: 350px; margin-top: -70px; }
.logo img { width: 100%; }

#top-search a { color: #fff; width: 80px; display: flex; justify-content: center; align-items: center; font-size: 30px; padding: 15px; background: #e00024; }

#searchbar { display: none; float: left; width: 100%; z-index: 999; box-sizing: border-box; background: #e00024; }

#searchform { padding: 2% 4%; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; }
#searchform input { width: calc(100% - 200px); padding: 20px; color: #222; }
#searchform button { width: 200px; transition: .3s ease; background: #fff; border: solid 2px #e00024; color: #e00024; padding: 15px; font-size: 20px; font-weight: 800; text-transform: uppercase; }
#searchform buton:hover { background: #000; color: #fff; }

/*--------Hero---------*/
.hero { width: 100%; height: 900px; position: relative; }
.hero video { width: 100%; height: 100%; filter: brightness(0.5); object-fit: cover; }

.hero-text { position: absolute; left: 5%; bottom: 34%; max-width: 1000px; width: 100%; }
.hero-text h1 { color: #FFF; font-family: "Roboto", sans-serif; font-size: 64px; font-style: normal; font-weight: 900; line-height: 68px; text-transform: uppercase; padding-bottom: 20px; }
@media only screen and (max-width: 1000px) { .hero-text h1 { font-size: 35px; line-height: 38px; } }
@media only screen and (max-width: 700px) { .hero-text h1 { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 500px) { .hero-text h1 { font-size: 25px; line-height: 28px; } }
.hero-text p { color: #FFF; font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 400; line-height: 28px; font-variant: all-small-caps; padding-bottom: 60px; }

.hero-promo { position: absolute; right: 5%; bottom: 10%; }

.hero-card { padding: 20px; border-radius: 15px; box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.3); background: #fff; width: 100%; max-width: 550px; }
.hero-card img { width: 100%; aspect-ratio: 4/3; height: auto; object-fit: contain; }
.hero-card .deal { font-size: 22px; margin: 0 !important; text-transform: uppercase; color: #000; font-weight: 600; padding: 10px 0; }
.hero-card h2 { color: #000; font-family: "Roboto", sans-serif; font-size: 30px; font-style: normal; font-weight: 900; line-height: 36px; text-transform: uppercase; margin: 0 !important; padding-bottom: 10px; }
@media only screen and (max-width: 1000px) { .hero-card h2 { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 700px) { .hero-card h2 { font-size: 26px; line-height: 30px; } }
@media only screen and (max-width: 500px) { .hero-card h2 { font-size: 22px; line-height: 26px; } }
.hero-card .price { color: #e00024; margin: 0 !important; font-weight: 600; font-size: 22px; padding-bottom: 20px; }
.hero-card .info { font-size: 16px; font-variant: small-caps; line-height: 24px; font-weight: 400; padding-bottom: 20px; }

/*----Home Page-----*/
.feat { max-width: 1750px; margin: 0 auto; width: 98%; padding: 10px; box-sizing: border-box; position: relative; border-radius: 20px; z-index: 200; box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.15); padding: 30px; background: #fff; margin-top: -40px; }

.card { padding: 0 !important; border: none !important; }

.outer-img-box { padding: 0 !important; }

.inv_image { margin-left: 0 !important; transform: none !important; width: 100%; height: 250px; object-fit: cover; }

.listing-title { color: #000; font-size: 32px; font-style: normal; font-weight: 900; line-height: 44px; text-transform: uppercase; }

.carousel_details_btn { border: none; font-size: 20px; background: transparent !important; text-transform: uppercase; font-family: "Roboto", sans-serif; font-weight: 900; color: #000; text-transform: uppercase; }

.carousel_details_btn:after { content: "+"; color: #000; padding-left: 10px; }

#controls { position: absolute; right: 0; top: -40px; }

.a_inv_cont { padding: 0; }

.inv_control { background: #fff !important; border-radius: 0; color: #000 !important; font-size: 22px; }

.inv_control:hover { box-shadow: 0; color: #e00024; }

.carousel-indicators { display: none !important; }

.small_spec { max-height: 65px !important; display: block; overflow: hidden !important; }

.carousel { height: 620px; }

.home-about { max-width: 1750px; margin: 0 auto; width: 98%; padding: 10px; box-sizing: border-box; }

/*----Quick Links------*/
.ql { margin: 20px; display: block; }
.ql h2 { color: #000; font-family: "Roboto", sans-serif; font-size: 30px; font-style: normal; font-weight: 900; line-height: 36px; text-transform: uppercase; text-align: center; padding-top: 20px; max-width: 250px; margin: 0 auto; }
@media only screen and (max-width: 1000px) { .ql h2 { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 700px) { .ql h2 { font-size: 26px; line-height: 30px; } }
@media only screen and (max-width: 500px) { .ql h2 { font-size: 22px; line-height: 26px; } }

.img-box { width: 170px; height: 170px; margin: 0 auto; background: #f3f3f3; }
.img-box img { width: 160%; margin-left: -30%; max-width: none !important; transition: .3s ease; }
.img-box:hover img { transform: scale(0.9); }

.red-box { width: 100%; padding: 5% 2% !important; background: #e00024 !important; text-align: center; color: #fff; border-radius: 15px; }
.red-box button { margin: 20px auto 0 auto; }

.cards { box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.15); background: #fff; width: calc(100% - 40px) !important; margin: 20px !important; padding: 40px; text-align: center; }

.radius { border-radius: 15px; }

.radius-left { border-radius: 15px 0 0 15px; }

.text-links a { color: #000; font-weight: 600; }
.text-links a .red-btn { color: #fff; }

/*---------Pages----------*/
.gray-back { width: 100%; background: #f3f3f3; padding: 5% 10px; }

.page-top { width: 100%; height: 400px; position: relative; }
.page-top img { width: 100% !important; max-height: none !important; max-width: none !important; height: 400px !important; object-fit: cover; filter: brightness(0.5); }

.page-top-text { position: absolute; bottom: 25%; left: 5%; }
.page-top-text h1 { color: #FFF; font-family: "Roboto", sans-serif; font-size: 64px; font-style: normal; font-weight: 900; line-height: 68px; text-transform: uppercase; }
@media only screen and (max-width: 1000px) { .page-top-text h1 { font-size: 35px; line-height: 38px; } }
@media only screen and (max-width: 700px) { .page-top-text h1 { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 500px) { .page-top-text h1 { font-size: 25px; line-height: 28px; } }

.page-top-text-second { position: absolute; bottom: 15%; right: 5%; }
.page-top-text-second h1 { color: #FFF; font-family: "Roboto", sans-serif; font-size: 64px; font-style: normal; font-weight: 900; line-height: 68px; text-transform: uppercase; }
@media only screen and (max-width: 1000px) { .page-top-text-second h1 { font-size: 35px; line-height: 38px; } }
@media only screen and (max-width: 700px) { .page-top-text-second h1 { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 500px) { .page-top-text-second h1 { font-size: 25px; line-height: 28px; } }

.icon-link { display: flex; flex-direction: row; justify-content: flex-start; padding: 10px !important; }
.icon-link i { font-size: 20px; align-items: center; color: #fff; display: flex; flex-wrap: wrap; justify-content: center; align-self: center; background: #e00024; border-radius: 50%; height: 60px; width: 60px; }

.icon-link-text { padding-left: 20px; width: calc(100% - 60px); }
.icon-link-text h3 { font-size: 24px; margin: 0 !important; font-weight: 800; text-transform: uppercase; color: #000; }
.icon-link-text p { color: #000; font-family: "Roboto", sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 32px; margin: 0 !important; }
.icon-link-text p a { font-weight: 600; }
@media only screen and (max-width: 800px) { .icon-link-text p { font-size: 18px; } }
@media only screen and (max-width: 400px) { .icon-link-text p { font-size: 16px; } }

.Forms { padding: 40px !important; background: #fff; box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.15); border-radius: 15px; width: 100%; }
.Forms h2 { color: #000; font-family: "Roboto", sans-serif; font-size: 30px; font-style: normal; font-weight: 900; line-height: 36px; text-transform: uppercase; }
@media only screen and (max-width: 1000px) { .Forms h2 { font-size: 30px; line-height: 34px; } }
@media only screen and (max-width: 700px) { .Forms h2 { font-size: 26px; line-height: 30px; } }
@media only screen and (max-width: 500px) { .Forms h2 { font-size: 22px; line-height: 26px; } }
.Forms h3 { font-size: 24px; font-weight: 600; text-transform: uppercase; padding-top: 20px; }
.Forms .sheSubmitButton { font-family: "Roboto", sans-serif; text-transform: uppercase; display: block; text-align: center; padding: 16px 10px; font-weight: 900; color: #fff; width: 220px; border-radius: 68px; border: solid 3px #fff; background: #e00024; box-shadow: 0 0 0 4px #e00024; }

.contact a { color: #000; }

.contact a:hover { text-decoration: underline; }

/*-------- FOOTER STYLES ----------------*/
.wrap { max-width: 1750px; margin: 0 auto; width: 98%; padding: 10px; box-sizing: border-box; }

.black-grad { width: 100%; background: linear-gradient(to bottom, #fff 50%, #000 50%); }

.foot-logo { max-width: 340px; width: 100%; padding: 4% 0; margin: 0 auto; }
.foot-logo img { width: 100%; }

footer { width: 100%; background: #000; }

.footer-links { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; }
.footer-links a { font-size: 24px; font-weight: 900; color: #fff; text-transform: uppercase; padding: 20px; transition: .3s ease; }
.footer-links a:hover { color: #e00024; }

.foot-logos { max-width: 1200px; margin: 0 auto; padding-bottom: 5%; }

.footer-logo { margin: 20px; display: block; width: calc(100% - 40px); background: #fff; padding: 15px; border-radius: 10px; }
.footer-logo img { width: 90%; height: 70px; object-fit: contain; margin: 0 auto; }

.btm-footer { padding: 1% 0; }
.btm-footer p { color: #000; font-family: "Roboto", sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 32px; text-align: center; padding-top: 20px; }
.btm-footer p a { font-weight: 600; }
@media only screen and (max-width: 800px) { .btm-footer p { font-size: 18px; } }
@media only screen and (max-width: 400px) { .btm-footer p { font-size: 16px; } }

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .buy-now-link, .body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .check-availability-link, .body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .email-seller-link, .body-wrapper > div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button, .body-wrapper > div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button, .body-wrapper > div:not(.detail-wrapper) button.page-nav { background: #e00024 !important; color: #fff !important; }

.body-wrapper > div:not(.detail-wrapper) .view-listing-details-link, .body-wrapper > div:not(.detail-wrapper) .contact-options a, .body-wrapper > div:not(.detail-wrapper) .fin-calc-mobile > a, .body-wrapper > div:not(.detail-wrapper) button.g-recaptcha.button, .body-wrapper > div:not(.detail-wrapper) .show-all-modal .apply-button, .body-wrapper > div:not(.detail-wrapper) .show-all-modal .nuf-button, .body-wrapper > div:not(.detail-wrapper) .list-error-container .info button, .body-wrapper > div:not(.detail-wrapper) .mobile-done-button-container .mobile-done-button, .body-wrapper > div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now, .body-wrapper > div:not(.detail-wrapper) a.buy-btn.des-buy-now, .body-wrapper > div:not(.detail-wrapper) button.selected-facet.ts-button, .body-wrapper > div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn { background: #e00024 !important; color: #fff !important; }

.body-wrapper > div:not(.detail-wrapper) .view-listing-details-link:hover, .body-wrapper > div:not(.detail-wrapper) .contact-options a:hover, .body-wrapper > div:not(.detail-wrapper) .fin-calc-mobile > a:hover, .body-wrapper > div:not(.detail-wrapper) button.g-recaptcha.button:hover, .body-wrapper > div:not(.detail-wrapper) .email-seller-link:hover, .body-wrapper > div:not(.detail-wrapper) .mc-nav-controls .mc-icon-navarrow span, .body-wrapper > div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now:hover, .body-wrapper > div:not(.detail-wrapper) a.buy-btn.des-buy-now:hover, .body-wrapper > div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn:hover { background: #000 !important; color: #fff !important; }

.body-wrapper > div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button, .body-wrapper > div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button, .body-wrapper > div:not(.detail-wrapper) .show-all-modal .back-button, .body-wrapper > div:not(.detail-wrapper) .parts-listing-container .mobile-parts-detail-container .dealer-phone-container a { color: #000 !important; border: 1px solid #000 !important; }

.body-wrapper > div:not(.detail-wrapper) .list-title .list-title-text, .body-wrapper > div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-title-text span, .body-wrapper > div:not(.detail-wrapper) .title-media-buttons-heading h1 { color: #000 !important; line-height: 28px !important; }

.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info .dealer-name, .body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .fin-calc, .body-wrapper > div:not(.detail-wrapper) .list-listing-mobile .listing-dealer-info .spec-value, .body-wrapper > div:not(.detail-wrapper) .fin-calc, .body-wrapper > div:not(.detail-wrapper) .fin-calc p, .body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-error .info, .body-wrapper > div:not(.detail-wrapper) .parts-bottom-section .parts-list-view .parts-list-content .error-message, .body-wrapper > div:not(.detail-wrapper) .info, .body-wrapper > div:not(.detail-wrapper) .list-title .list-listings-count, .body-wrapper > div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count, .body-wrapper > div:not(.detail-wrapper) .list-top-section .listing-option-bar .list-listings-count, .body-wrapper > div:not(.detail-wrapper) span.part-list-price.bold, .body-wrapper > div:not(.detail-wrapper) .dealer-company-header, .body-wrapper > div:not(.detail-wrapper) .dealer-info h3, .body-wrapper > div:not(.detail-wrapper) .listing-description-text, .body-wrapper > div:not(.detail-wrapper) .paging-container .list-page-number, .body-wrapper > div:not(.detail-wrapper) .paging-container .page-number, .body-wrapper > div:not(.detail-wrapper) .listing-main-stats .price, .body-wrapper > div:not(.detail-wrapper) .list-container-flexrow .price-container .price, .body-wrapper > div:not(.detail-wrapper) h2.listing-portion-title, .body-wrapper > div:not(.detail-wrapper) .list-listing-mobile .price-container .price, .body-wrapper > div:not(.detail-wrapper) .compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title, .body-wrapper > div:not(.detail-wrapper) .compare-listings-container .compare-container .compare-price, .body-wrapper > div:not(.detail-wrapper) .rent-title, .body-wrapper > div:not(.detail-wrapper) .rent-title-details, .body-wrapper > div:not(.detail-wrapper) span.list-title-text, .body-wrapper > div:not(.detail-wrapper) a.search-results-link, .body-wrapper > div:not(.detail-wrapper) h3.listing-portion-title { color: #000 !important; }

.body-wrapper > div:not(.detail-wrapper) .mobile-option-bar .mobile-option-bar-filter, .body-wrapper > div:not(.detail-wrapper) span.listing-prices__retail-price, .body-wrapper > div:not(.detail-wrapper) span.parts-listings-count { color: #000 !important; }

/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1650px) { .hero-text { left: 1%; }
  .hero-promo { right: 1%; } }
@media only screen and (max-width: 1450px) { .hero-text { max-width: 650px; }
  .hero-text h1 { font-size: 55px; line-height: 56px; }
  .ql h2 { font-size: 25px; line-height: 28px; padding-top: 35px; }
  .img-box { width: 150px; height: 150px; } }
@media only screen and (max-width: 1250px) { .hero { height: 1150px; }
  .hero-text { max-width: none; top: 40px; text-align: center; left: 0; right: 0; padding: 10px; }
  .hero-text h1 { font-size: 45px; line-height: 47px; }
  .hero-text p { padding-bottom: 20px; }
  .hero-text a { margin: 0 auto; }
  .feat { margin: 40px auto 0 auto; }
  .hero-promo { bottom: 30px !important; left: 0; right: 0; }
  .hero-card { margin: 0 auto; }
  .cards { padding: 20px; margin: 20px; width: calc(100% - 20px); height: fit-content !important; }
  .page-top { height: 320px; }
  .page-top img { height: 320px !important; }
  .card { margin: 0; } }
@media only screen and (max-width: 1000px) { .header-links a { padding: 12px; font-size: 20px; transition: .3s ease; }
  .header-links a:hover { color: #e00024; }
  #top-search a { font-size: 25px; padding: 10px; }
  .carousel { height: auto; } }
@media only screen and (max-width: 800px) { .logo { max-width: 280px; }
  #menu-button { padding-top: 0px !important; } }
@media only screen and (max-width: 750px) { .hero-text h1 { font-size: 35px; line-height: 36px; padding-bottom: 10px; }
  .hero-text p { padding-bottom: 10px; }
  .hero-card { width: 98%; max-width: 500px; } }
@media only screen and (max-width: 650px) { .header-links { display: none; } }
@media only screen and (max-width: 600px) { .hero-card { max-width: 450px; }
  .hero-card .deal { font-size: 20px; }
  .hero-card h2 { font-size: 26px; }
  .hero-card .price { font-size: 20px; }
  .hero-card .info { font-size: 14px; line-height: 22px; }
  #controls { display: none !important; }
  .feat { padding: 20px; }
  .listing-title { font-size: 26px; }
  .card-body br { display: none; }
  .img-box { width: 120px; height: 120px; }
  .img-box img { width: 140%; margin-left: -20%; }
  .ql h2 { font-size: 20px; line-height: 22px; padding-top: 25px; }
  .ql { margin: 20px 5px; }
  .page-top { height: 220px; }
  .page-top img { height: 220px !important; }
  .icon-link i { font-size: 16px; height: 40px; width: 40px; }
  .icon-link-text { width: calc(100% - 40px); padding-left: 15px; }
  .icon-link-text h3 { font-size: 20px; }
  .icon-link-text p { font-size: 16px; line-height: 24px; }
  .cert { float: none !important; } }
@media only screen and (max-width: 500px) { .logo { min-width: 220px; margin-top: -55px; }
  #searchform button { width: 150px; padding: 12px; font-size: 16px; }
  #searchform input { width: calc(100% - 150px); padding: 12px; } }
@media only screen and (max-width: 430px) { .hero { height: 900px; }
  .hero-text { top: 20px; }
  .hero-text h1 { font-size: 26px; line-height: 28px; }
  .hero-promo { bottom: 20px; }
  .hero-card { max-width: 320px; padding: 15px; }
  .hero-card .deal { font-size: 16px; margin: 0 !important; padding: 10px 0 0 0; }
  .hero-card h2 { font-size: 22px; margin: 0 !important; padding: 0; }
  .hero-card .price { font-size: 16px; margin: 0 !important; padding: 0; }
  .red-btn, .white-btn, .Forms .sheSubmitButton { padding: 14px 10px; font-size: 14px; width: 200px; }
  .carousel_deatils_btn, .text-btn { font-size: 16px; padding: 0; }
  .inv_image { height: 200px; }
  .listing-title { font-size: 20px; }
  .footer-logo { margin: 10 !important; width: calc(100% - 20px) !important; }
  .footer-logo img { height: 50px; }
  .footer-links { flex-direction: column; justify-content: center; }
  .footer-links a { font-size: 20px; padding: 12px; text-align: center; }
  .Forms { padding: 20px !important; }
  .page-top { height: 190px; }
  .page-top img { height: 190px !important; }
  .icon-link i { display: none; }
  .icon-link-text { width: 100%; padding-left: 0; }
  .icon-link-text h3 { font-size: 18px; } }
@media only screen and (max-width: 380px) { .hero-text h1 { font-size: 22px; line-height: 24px; margin: 0 !important; }
  .hero-text p { font-size: 16px; line-height: 22px; }
  #searchtoggle { width: 50px; font-size: 20px; }
  .logo { min-width: 200px; }
  .img-box { height: 100px; width: 100px; }
  .ql h2 { font-size: 18px; line-height: 22px; } }