/*
Theme Name: Barn Dealer
Theme URI: https://barndealer.com/
Description: Barn Dealer theme based on HTML5 best practices.
Author: Barn Dealer
Author URI: https://barndealer.com/
Version: 3.0.0
*/

/* Ok, this is where the fun starts. :)
-------------------------------------------------------------------------------*/

/* Local Roboto font hosting */
@font-face {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	src: url('../fonts/Roboto-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	src: url('../fonts/Roboto-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
html, body {
	overflow-x: hidden;
}
body {font: 19px 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helmet, Freesans, sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #222;}

a {color: #03597c;}
a:hover {color: #004a69;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/
/*------------
- Global
- Header
- Footer
- Primary Content
	- Home
	- Sheds
	- Inventory
	- About Us
	- Rent To Own
	- Contact Us
------------*/

/* Global */
.wrapper {
	display: block;
	padding: 20px;
}

.wrapper.large {
	padding: 60px 20px;
}

.inner-wrapper {
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
}

.wrapper.row .inner-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.wrapper.column .inner-wrapper {
	display: flex;
	flex-direction: column;
}

.container {
	display: block;
}

.full-width {
	width: 100%;
}

.align-top,
.align-top .inner-wrapper {
	align-items: flex-start !important;
}

h1 {
	text-align: center;
	color: #00567a;
	font-weight: bold;
	font-size: 35px;
	padding: 30px 0 15px;
}

h2 {
	color: #00567a;
	font-weight: bold;
	font-size: 35px;
	padding-bottom: 15px;
}

h3 {
	color: #00567a;
	font-weight: bold;
}

p {
	line-height: 30px;
	padding-bottom: 20px;
}

p:last-child {
	padding-bottom: 0px;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

#content.site-content {
	padding-bottom: 30px;
}

.blue-top {
	border-top: 5px solid #00567a;
}

/* Header */
.social-wrapper {
	background: #004461;
}

.social-bar {
	display: flex;
	align-items: center;
	justify-content: end;
	max-width: 1150px;
	margin: 0 auto;
}

.social-bar img {
	max-height: 35px;
	width: auto;
}

.header-wrapper {
	background: #00567a;
	padding: 20px;
}

header {
	max-width: 1150px;
	margin: 0 auto;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo img {
	max-height: 125px;
	max-width: 350px;
	width: auto;
}

header .contact-wrapper {
	font-size: 30px;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	text-align: center;
}

header .contact-wrapper .phone {
	font-weight: bold;
}

header .contact-wrapper .phone a {
	color: #FFF;
	text-decoration: none;
}

.nav-wrapper {
	width: 100%;
	background: white;
}

.nav {
	padding: 0;
	margin: 0 auto;
	text-align: center;
	max-width: 1150px;
}

.nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
}

.nav > ul > li {
	position: relative;
	flex-grow: 1;
}

.nav > ul > li > a, /* Apply same styles to dropdown links */
.nav ul li ul li a {
	padding: 15px;
	display: block;
	text-decoration: none;
	color: #00567A;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 20px;
	font-weight: bold;
	background-color: white;
	transition: background-color 0.3s ease;
}

/* Hover state for top-level menu items */
.nav > ul > li:hover > a {
	background-color: #00567A;
	color: white;
}

/* Styles for the dropdown menu */
.nav ul li ul {
	display: none;
	position: absolute;
	left: 0;
	min-width: 100%; /* At least as wide as the parent item */
	white-space: nowrap; /* Prevents text from wrapping */
	background-color: white;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
	z-index: 1000;
}

/* Show the dropdown menu on hover */
.nav ul li:hover > ul {
	display: block;
}

.nav ul li ul li {
	display: block; /* Make dropdown li display as block to fill width of ul */
	text-align: left;
	width: auto; /* Let width be content-based */
}

/* Hover state for dropdown items */
.nav ul li ul li a:hover {
	background-color: #00567A;
	color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.nav {
	max-width: 100%;
	}
	
	.nav ul {
	flex-direction: column;
	}

	.nav > ul > li {
	display: block;
	}

	.nav ul li ul {
	position: static;
	}

	.nav ul ul li a {
	padding-left: 20px; /* Indent dropdown links for clarity */
	}
}


/* Footer */
footer.wrapper {
	background: #00567a;
	color: #FFF;
	line-height: 30px;
	padding: 40px 0;
}

footer.wrapper a {
	color: #FFF;
	text-decoration: none;
}

footer .location-info .business-name,
footer .hours .title {
	font-weight: bold;
}

footer.wrapper.row .inner-wrapper {
	align-items: flex-start;
}

footer .footer-auth-dealer {
	text-align: center;
}

footer .footer-auth-dealer span {
	display: block;
	font-size: 16px;
	letter-spacing: 3px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 0;
}

footer + .copyright {
	text-align: center;
	color: #FFF;
	background: #00567a;
	font-size: 12px;
	font-weight: 300;
	padding: 20px 0;
}

footer + .copyright span {
	padding-left: 1.5%;
}

/* Home */
.home-cta-buttons {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 20px;
}

.home-cta-buttons a {
    background: #ebbb53;
    min-width: 47%;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    padding: 40px 0;
    font-size: 28px;
}

.home-cta-buttons a:hover {
	background: #ffcb58;
}

.flexslider.home-hero {
	margin: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.cta-pricing {
	background: #dad9d9;
}

.cta-pricing .img-wrapper {
	text-align: center;
}

.cta-pricing .img-wrapper span {
	display: block;
	color: #00567a;
	font-size: 16px;
	letter-spacing: 3px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 0;
}

.cta-pricing .cta-text {
	text-align: center;
	text-shadow: 1px 1px 1px #FFF;
}

.cta-pricing .cta-location {
	color: #e7bf58;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 26px;
}

.cta-pricing .cta-link a {
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 30px;
	color: #00567a;
}

.cta-pricing .cta-link a span {
	font-weight: bold;
	text-decoration: underline;
}

#pricing-form {
	text-align: center;
	background: #00567a;
	color: #FFF;
	max-width: 600px;
	padding: 0;
}

#pricing-form .pricing-form-hero {
	background: url('../images/pricing-guide-popup-header.jpg') no-repeat center center;
	background-size: cover;
	height: 270px;
	width: 100%;
}

#pricing-form .form-submit-message {
	color: #FFF;
	padding: 40px 20px;
}

#pricing-form .form-submit-message.error {
	padding: 10px 20px;
}

#pricing-form form {
	background: url('../images/form-popup-background.jpg') no-repeat center center;
	background-size: cover;
	padding: 40px;
}

#pricing-form h2 {
	color: #FFF;
}

#pricing-form h2 span {
	color: #e9bb52;
	font-weight: bold;
}

.interactive-building {
	padding: 40px 0;
	display: flex;
	justify-content: space-between;
}

.interactive-building .img-wrapper {
	position: relative;
}

.interactive-building .img-wrapper .red-dot {
	background: #c93232;
	color: #FFF;
	text-align: center;
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

.interactive-building .img-wrapper > div {
	position: absolute;
}

.interactive-building .img-wrapper > div:hover {
	cursor: pointer;
}

.interactive-building .star-1 {
	top: 1%;
	right: 32%;
}

.interactive-building .star-2 {
	top: 25%;
	right: 10%;
}

.interactive-building .star-3 {
	top: 50%;
	left: 25%;
}

.interactive-building .star-4 {
	top: 55%;
	right: 15%;
}

.interactive-building .star-5 {
	bottom: 25%;
	left: 25%;
}

.interactive-building .star-6 {
	bottom: 10%;
	left: 35%;
}

.interactive-building .info-wrapper {
	max-width: 35%;
}

.interactive-building .info-wrapper > div {
	display: none;
}

.interactive-building .info-wrapper > div img {
	margin-bottom: 20px;
	display: block;
}

.interactive-building .info-wrapper > div h3 {
	font-weight: bold;
	color: #00567a;
}

.interactive-building .info-wrapper > div p {
	font-size: 16px;
	line-height: 24px;
	padding: 5px 0;
}

.badge-bar {
	display: flex;
	justify-content: space-between;
	padding: 60px 0 80px;
}

.cta-builder {
	background: #00567a;
}

.wrapper.row.cta-builder .inner-wrapper {
	justify-content: space-evenly;
}

.cta-builder img {
	margin: -50px 0;
	max-height: 125px;
}

.cta-builder a {
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	font-size: 35px;
	text-transform: uppercase;
}

.cta-builder a:hover {
	text-decoration: underline;
}

.cta-builder a span {
	font-weight: bold;
	color: #FABE08;
}

.featured-buildings {
	margin: 20px 0 80px;
}

.featured-buildings h2 {
	padding: 30px 0;
}

.featured-wrapper {
	display: flex;
	justify-content: space-evenly;
}

.featured-wrapper .single {
	max-width: 30%;
	width: 100%;
	list-style: none;
}

.featured-wrapper .single .thumb,
.flexslider.featured .single .thumb {
	width: 100%;
	height: 250px;
	background-repeat: no-repeat !important;
	background-position: 50% !important;
	background-size: cover !important;
}

.featured-wrapper .single .info,
.flexslider.featured .single .info {
	color: #FFF;
	text-align: center;
	background: #00567a;
	padding: 20px;
	font-size: 16px;
}

.cta-call {
	background: #dad9d9;
	color: #00567a;
	text-transform: uppercase;
	font-size: 30px;
	padding: 40px 0;
}

.cta-call div,
.cta-call a {
	font-weight: bold;
}

.cta-call > div > div:last-child {
	font-size: 40px;
}

.cta-call a {
	text-decoration: none;
	color: inherit;
}

/* Inner Pages */
.inner-hero {
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 20px 20px 0 20px;;
	background: #00567a;
}

.inner-hero img {
	padding: 0 10px;
	box-sizing: border-box;
	max-width: 49%;
}


/* Our Sheds */
.col-wrapper {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20px;
}

.col-2 {
	max-width: 48.5%;
	width: 100%;
}

.col-5 {
	max-width: 19%;
	width: 100%;
}

.wrapper.row .inner-wrapper.barn-info {
	align-items: start;
}

.barn-info h2 {
	font-size: 30px;
}

.barn-info h3 {
	padding-bottom: 10px;
}

.barn-info h3 + ul {
	padding-bottom: 10px;
}

.barn-info h3 + ul li {
	list-style: disc;
	margin-left: 25px;
}

.flexslider.single-building ul.slides li > a {
	border:solid #00567a;
	border-width: 3px 4px 3px 3px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	display: block;
}

.flexslider.single-building ul.slides li > a img {
	max-height: 410px;
}

.flexslider.single-building li > a span {
	background: #00567a;
	display: block;
	width: 100%;
	padding: 5px 0;
}

.flexslider.single-building .flex-control-thumbs li {
	border: solid #00567a;
	margin: 1%;
	width: 32%;
	max-height: 135px;
	overflow: hidden;
}

.flexslider.single-building .flex-control-thumbs li:first-child {
	margin: 1% 1% 1% 0;
}

.flexslider.single-building .flex-control-thumbs li:last-child {
	margin: 1% 0 1% 1%;
}

p.small {
	font-size: 12px;
	line-height: 18px;
}

a.button {
	text-align: center;
	color: #FFF;
	background: #00567a;
	font-weight: bold;
	padding: 5px 15px;
	text-decoration: none;
	border-radius: 5px;
	font-size: 18px;
}

/* About Us */
.wrapper.shed-builder {
	padding: 80px 20px 60px 20px;
}

a.yellow-button {
	background: #e9bb52;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 40px;
	border-radius: 20px;
	margin: 10px 0;
	display: inline-block;
}

a.yellow-button:hover {
	background: #ffd168;
}

.wrapper.about-main {
	border-top: 5px solid #00567a;
	padding-bottom: 60px;
}

.wrapper.about-main ul,
.wrapper.about-main ol {
	margin: 10px 0;
	padding-left: 0;
	list-style-position: inside;
}
.wrapper.about-main ul {
	list-style: disc inside;
}
.wrapper.about-main ol {
	list-style: decimal inside;
}
.wrapper.about-main li {
	margin-bottom: 4px;
}

/* Rent To Own */
.wrapper.rto-main {
	border-top: 5px solid #00567a;
	padding-bottom: 60px;
	background: #DDD;
}

.wrapper.rto-main h1 {
	text-align: left;
}

.wrapper.rto-main .col-2 {
	max-width: 65%;
}

.wrapper.rto-main .col-2 + .col-2 {
	max-width: 30%;
}

.wrapper.rto h2 {
	color: #FFF;
	text-align: center;
	padding-bottom: 20px;
}

.wrapper.rto span {
	color: #FABE08;
	font-weight: bold;
}

.check-marks {
	list-style-type: none; 
	padding-left: 0;
	margin-top: 5px;
}

.check-marks li {
	position: relative;
	padding-left: 25px;
	padding-bottom: 5px;
}

.check-marks li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 0;
}

.check-marks.large li {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 34px;
}

.check-marks.large li::before {
	color: #00567a;
}

/*.two-column-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 75%;
	margin: 0 auto;
}

.form-column {
	display: flex;
	flex-direction: column;
	margin: 0;
	flex-basis: 49%;
}

.form-column input,
.form-column select {
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.form-button {
	width: 100%;
	display: flex;
	justify-content: center;
}

.form button[type="submit"] {
	background: #e9bb52;
	color: #00577a;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding: 15px 40px;
	font-size: 22px;
	border-radius: 5px;
	margin: 10px 0;
	display: inline-block;
	border: 0;
	width: 100%;
	max-width: 50%;
}

.form button[type="submit"]:hover {
	background-color: #ffd168;
}*/

#rent-to-own form.simple .form-button button {
	max-width: 50%;
	font-size: 22px;
	margin: 10px 0;
	border: 0;
}

#rent-to-own .form-submit-message.success {
	color: #FFF;
	text-align: center;
	padding: 20px 0;
}

#rent-to-own .form-submit-message.error {
	color: #FFF;
	text-align: center;
	border: 2px solid #FFF;
}

.form-full-width {
	width: 100%;
}

.form-full-width textarea {
	width: 100%;
	resize: none;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 100px; /* Adjust height as needed */
}

/* Contact Us */
.contact-main {
	background: #DDD;
}

.contact-main h1 {
	padding-top: 0;
}

.contact-form .two-column-form {
	max-width: 100%;
}

.accordion-header {
	background-color: #03597c;
	color: white;
	font-weight: bold;
	padding: 10px;
	cursor: pointer;
	font-size: 22px;
}

.accordion-content {
	padding: 10px;
	border: 1px solid #EEE;
	display: none; /* Initially hide the content */
}

.accordion-item {
	margin-bottom: 10px;
}

/* First accordion content is visible by default */
.accordion .accordion-item:first-child .accordion-content {
	display: block;
}

/* Inventory */
.inventory-item {
	display: flex;
	justify-content: space-between;
	padding: 60px 0;
	border-top: 2px solid #00567a;
	flex-wrap: wrap;
}

.inventory-item:first-child {
	border-top: 0;
}

.inventory-item .img-wrapper {
	width: 30%;
}

.inventory-item .info-wrapper {
	width: 70%;
}

.inventory-item .text-pricing-group {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-left: 20px;
	min-height: 225px;
}

.inventory-item .price-info,
.single-inventory-page .price-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0;
	width: 44%;
}

.single-inventory-page .price-info {
	width: 86%;
}

.inventory-item .text-info{
	width: 50%;
}

.inventory-item .text-info ul li {
	margin-bottom: 10px;
	font-weight: bold;
	display: flex;
	align-items: baseline;
}

.inventory-item .sold-wrapper {
	font-size: 100px;
	font-weight: bold;
	margin: 3% 60px 0 0;
	color: #00577a;
}

.inventory-item .price-box,
.single-inventory-page .price-box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: 2px solid #00567a;
	margin-bottom: 15px;
}

.single-inventory-page .price-box:last-child {
	margin-bottom: 0;
}

.inventory-item .price-box .price-type,
.single-inventory-page .price-box .price-type {
	font-weight: bold;
	color: #FFF;
	background: #00567a;
	padding: 5px 10px;
	min-width: 40%;
}

.inventory-item .price-box .price-value,
.single-inventory-page .price-box .price-value {
	padding: 5px 10px;
	min-width: 60%;
}

.inventory-item .inventory-name {
	color: #00567a;
	font-weight: bold;
	font-size: 22px;
	padding: 0 0 10px 0;
}

.inventory-item .text-info ul span {
	color: #00567a;
	font-weight: bold;
	min-width: 75px;
	display: inline-block;
}

.inventory-item .link-button {
	display: flex;
	flex-basis: 70%;
	margin-left: auto;
	padding-left: 20px;
	justify-content: end;
}

.inventory-item .link-button a {
	display: inline-block;
	background: #00567a;
	color: #ffc800;
	text-decoration: none;
	padding: 10px 20px;
	border-radius: 5px;
	width: 100%;
	max-width: 44%;
	text-align: center;
	text-transform: uppercase;
}

.inventory-item .link-button a:hover {
	background: #006c9a;
	color: #FFF;
}

.inventory-item .link-button a:first-child {
	margin-right: 15px;
}

/* Buy or Rent Now button — list view */
.inventory-item .link-button a.buy-rent-btn {
	background: #557846;
	color: #fff;
	margin-left: 15px;
}

.inventory-item .link-button a.buy-rent-btn:hover {
	background: #46633a;
	color: #fff;
}

.inventory-item .image {
	width: 100%;
	height: 250px;
}

ul.two-col {
	list-style-type: none;
	padding: 0;
	column-count: 2;
	column-gap: 20px;
}

ul.two-col li {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

/* Inventory - Single */
.quote-form,
.fancybox__content.quote-form {
	background: #00567a;
	padding: 20px;
	margin: 0 0 0 40px;
}

.quote-form .form-submit-message.success {
	color: #FFF;
	text-align: center;
	padding: 20px 0;
}

.quote-form .form-submit-message.error {
	color: #FFF;
	text-align: center;
	border: 2px solid #FFF;
}

.quote-form h2 {
	color: #FFF;
	text-align: center;
}

.quote-form h2 span {
	color: #FFC801;
	font-weight: bold;
}

.quote-form p {
	color: #FFF;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	margin-top: -10px;
	padding-bottom: 5px;
}

.single-inventory form.simple .form-button button {
	font-size: 22px;
}

.single-inventory .quote-form {
	padding: 15px;
}

form.simple {
	max-width: 100%;
	padding: 15px;
}

form.simple .form-row {
	display: flex;
	justify-content: space-between;
}

form.simple .form-row input,
form.simple .form-row select {
	width: calc(50% - 10px); /* Adjust width for two columns */
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	max-width: 49%;
}

form.simple input[type="text"],
form.simple input[type="email"],
form.simple input[type="tel"],
form.simple select,
form.simple textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	resize: none;
}

form.simple .form-button {
	text-align: center;
}

form.simple .form-button button {
	background: #e9bb52;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding: 15px 40px;
	border-radius: 5px;
	margin: 10px 0;
	display: inline-block;
	font-size: 24px;
	margin:0;
	color: #00577a;
	width: 100%;
	max-width: 85%;
	border: 0;
}


form.simple .form-button button:hover {
	background: #ffd168;
}

.flexslider.single-inventory ul.slides li > a {
	border-width: 3px 4px 3px 3px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 530px;
}

.flexslider.single-inventory .flex-control-thumbs li {
	border: solid #DDD;
	margin: 1%;
	width: 32%;
	max-height: 135px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flexslider.single-inventory .flex-control-thumbs li:first-child {
	margin: 1% 1% 1% 0;
}

.flexslider.single-inventory .flex-control-thumbs li:last-child {
	margin: 1% 0 1% 1%;
}

.single-inv-details {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.single-inv-details ul {
	font-size: 18px;
	line-height: 29px;
	border: 1px solid #00567a;
	padding: 13px 25px;
	width: 100%;
	margin-left: 20px;
}

.single-inv-details ul span {
	color: #00567a;
	font-weight: bold;
}

.single-inv-details .col-2 + .col-2 {
	max-width: 45%;
}

.single-inventory-page .details-wrapper .inv-buttons {
	width: 90%;
	margin-left: 40px;
}

.single-inventory-page .details-wrapper .inv-buttons a {
	display: block;
	width: 90%;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: #FFF;
	background: #00577a;
	padding: 20px;
	margin: 20px auto;
	font-weight: bold;
	font-size: 22px;
}

.single-inventory-page .details-wrapper .inv-buttons a:hover {
	background: #014a67;
}

/* Buy or Rent Now button — single building view */
.single-inventory-page .details-wrapper .inv-buttons a.buy-rent-btn {
	background: #557846;
	color: #fff;
}

.single-inventory-page .details-wrapper .inv-buttons a.buy-rent-btn:hover {
	background: #46633a;
}

.simple-cta {
	background: #00567a;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	font-weight: bold;
	font-size: 35px;
	text-transform: uppercase;
	margin: 60px 0;
}

.simple-cta span {
	font-weight: bold;
	color: #FABE08;
	text-decoration: underline;
}

.sub-text {
	padding: 0;
}

.single-inventory .sub-text {
	margin-top: 20px;
}

.sub-text span {
	color: #00567a;
	font-size: 12px;
	font-weight: bold;
}

.large-sub-text span {
	font-weight: bold;
	display: block;
	text-align: center;
	font-size: 22px;
}
/* SARA DESKTOP STYLES ------------------------------------------------------*/

.badge-bar {
	flex-wrap: wrap;
}

.nav-wrapper .nav-toggle {
	display: none;
}
.mobile-inventory-btn {
	display: none;
}

/* Overwriting footer.wrapper padding style to be responsive*/
footer.wrapper {
	padding: 40px 20px !important;
}


/* Overwriting .cta-call padding style to be responsive*/
.cta-call {
	padding: 40px 20px !important;
}

.inventory-item .link-button a {
	display: flex;
	justify-content: center;
	align-items: center;
}

.buttons-wrapper.col-wrapper {
	gap: 1%;
}


.wrapper.row.cta-builder.rta br {
	display: none;
}

/* SARA MOBILE STYLES ----------------------------------------------------------*/

@media screen and (max-width: 768px){

	/*Homepage Mobile Styles*/
	.row.cta-pricing .inner-wrapper, .home-cta-buttons {
		flex-direction: column;
		align-items: center;
	}

	.interactive-building, .cta-builder img {
		display: none;
	}

	.cta-builder .link, .cta-call div {
		text-align: center;
	}

	div.cta-builder a {
		font-size: 25px;
	}

	#pricing-form div.pricing-form-hero {
		background-size: contain !important;
	}

	.cta-call .inner-wrapper {
		flex-direction: column !important;
	}

	.cta-pricing div.cta-location {
		font-size: 20px;
	}

	/*Menu Mobile Styles*/

	.header-wrapper {
		padding: 10px 15px;
	}

	header {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	header .logo {
		max-width: 45% !important;
		flex: 0 0 45% !important;
	}

	header .logo img {
		max-height: 80px !important;
		width: 100% !important;
		object-fit: contain !important;
		object-position: left center !important;
	}

	header div.contact-wrapper {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		font-size: 15px !important;
		text-align: center !important;
	}

	header div.contact-wrapper .phone {
		font-size: 22px !important;
		white-space: nowrap !important;
	}

	header div.contact-wrapper .phone-label {
		font-size: 17px !important;
	}

	.nav-wrapper .nav-toggle {
		display: block;
		padding: 10px 15px;
		border: none;
		background-color: transparent;
	}

	.nav {
		display: none;
		position: absolute;
		width: 100%;
		z-index: 99;
	}

	.nav > ul > li {
		text-align: left;
	}

	span.toggle-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.mobile-inventory-btn {
		display: inline-block;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		text-decoration: none;
		background: #00567a;
		padding: 6px 16px;
		border-radius: 6px;
		margin-right: 10px;
	}
	.mobile-inventory-btn:hover {
		background: #004561;
		color: #fff;
		text-decoration: none;
	}

	.nav ul li ul li {
		text-indent: 25px;
	}

	/*Footer Mobile Styles*/

	#footer .inner-wrapper {
		flex-direction: column !important;
		flex-wrap: wrap;
		align-content: center;
		text-align: center;
	}

	#footer .footer-auth-dealer {
		order: -1;
	}

	#footer .location-info {
		margin: 25px 0;
	}

	.inner-wrapper div {
		width: 100%;
	}

	/*Inventory Pages Mobile Styles*/
	.wrapper.row .inner-wrapper.barn-info {
		flex-direction: column;
	}

	.barn-info .col-2 {
		max-width: 100%;
	}

	#inventory-main .inventory-item, .text-pricing-group, .row.shed-builder .inner-wrapper {
		flex-direction: column;
	}

	.inventory-item div {
		width: 100% !important;
	}

	.inventory-item .text-pricing-group {
		padding-left: 0;
		padding-top: 25px;
	}

	.inventory-item .link-button {
		padding-left: 0;
		justify-content: center;
	}

	.row.shed-builder .inner-wrapper .col-2 {
		max-width: 100%;
	}

	.barn-info div.col-wrapper {
		display: grid;
		flex-wrap: wrap;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: row;
	}

	.barn-info div.col-wrapper .col-5 {
		max-width: 100%;
	}

	.buttons-wrapper.col-wrapper {
		display: flex !important;
		flex-direction: column;
		gap: 1% !important;
	}

	.buttons-wrapper.col-wrapper a {
		margin-bottom: 10px;
	}

	.inventory-item	div.link-button {
		flex-direction: column;
		align-items: center;
	}

	/* The side margins that space the buttons out in the row layout have to be
	   cleared once they stack, or Buy or Rent Now sits 15px right of the two
	   above it and hangs over the card. Each selector is weighted to match the
	   rule it undoes. */
	.inventory-item	div.link-button a,
	.inventory-item	div.link-button a:first-child,
	.inventory-item	div.link-button a.buy-rent-btn {
		max-width: 100%;
		margin: 0 0 10px;
	}

	.inventory-item	div.link-button a:last-child:not(:only-child) {
		margin-bottom: 0;
	}

	/*RTO Page Mobile Styles*/
	.row.rto-main .inner-wrapper {
		flex-direction: column;
	}

	.row.rto-main .inner-wrapper .col-2 {
		max-width: 100%;
	}

	.row.rto-main .inner-wrapper .col-2:nth-child(2) {
		padding: 40px;
	}

	#rent-to-own form.simple div.form-button button {
		max-width: 75%;
	}

	#pricing-form form.simple div.form-button button {
		font-size: 18px;
		max-width: 100%;
		padding: 15px 30px;
	}

	/*Contact Page Mobile Styles*/
	.contact-main .inner-wrapper.align-top {
		flex-direction: column;
	}

	.contact-main .inner-wrapper.align-top .col-2 {
		max-width: 100%;
	}

	/*About Page Mobile Styles*/
	.shed-builder a.yellow-button {
		width: 100%;
		text-align: center;
	}

	.shed-builder h2 {
		font-size: 25px;
		padding-top: 15px;
		text-align: center;
	}

	.wrapper.row.cta-builder.rta br {
		display: block;
	}
}

@media screen and (max-width: 980px){
	.badge-bar a {
		display: flex;
		flex: 0 0 33.33%;
		justify-content: center;
		padding: 10px;
	}

	.badge-bar {
		align-items: center;
	}

	div.fancybox__content.quote-form {
		margin: 0;
	}
}

/*Mobile Styles for Single Inventory*/

@media screen and (max-width: 1150px){
	.single-inventory-page div.slider-form-wrapper {
		flex-direction: column;
	}

	.single-inventory-page div.slider-form-wrapper .form-wrapper {
		max-width: 100%;
	}

	.single-inventory-page div.slider-form-wrapper .quote-form {
		margin: 20px 0 0 0;
	}

	.single-inventory-page div.details-wrapper {
		flex-direction: column;
	}

	div.single-inv-details ul {
		margin-left: 0;
		margin-top: 20px;
	}

	.single-inventory-page div.details-wrapper .inv-buttons, div.single-inventory-page .price-info, .single-inventory-page div.details-wrapper .inv-buttons a {
		margin-left: 0;
		width:100%;
	}

	.single-inventory-page .wrapper.row .inner-wrapper {
		flex-direction: column;
	}

	.single-inventory-page .wrapper.row .inner-wrapper .col-2 {
		max-width: 100%;
	}

	ul.check-marks.large li {
		margin-bottom: 10px;
	}

	 .cta-call .inner-wrapper {
		gap: 1%;
	}
}

/*END SARA MOBILE STYLES --------------------------------------------------------*/


/* Print styles!
-------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) { /* Adjust the breakpoint as needed */
	ul.two-col {
	column-count: 1; /* Reverts to a single column on small screens */
	}
}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Always do mobile-first, and consider using em units: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw

@media screen and (min-width: 480px) {

} */

/* inventory-template-inline-styles */
    .inventory-filters div {
        padding: 10px 0;
    }

    .inventory-filters div strong {
        display: block;
        color: #00567a;
    }

    .inventory-filters div label {
        padding: 5px 0;
        display: block;
    }

    .inventory-filters div input[type="checkbox"] {
        vertical-align: baseline;
    }

    .inventory-filters .filter-section div {
        padding: 0;
    }

    .inventory-filters div.filter-section label {
        display: inline-block;
    }

    .filter-group {
      margin-bottom: 10px;
    }

    .toggle-group {
      cursor: pointer;
      display: block;
      color: #00567a;
      font-weight: bold;
    }

    .toggle-group .toggle-icon {
      margin-left: 5px;
    }

    .inventory-filters div.group-values {
      padding-left: 10px;
      transition: max-height 0.3s ease;
    }

    /* Hide collapsed groups */
    .group-values.collapsed {
      display: none;
    }

    .filter-container {
      max-width: 1150px;
      margin: 0 auto;
      position: relative;
    }

    .filter-popup {
      position: absolute;
      top: 40px;
      left: 0;
      width: 30%;
      max-width: 40%;
      width: 100%;
      background: #fff;
      z-index: 1000;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }

    .filter-popup.show {
      opacity: 1;
      visibility: visible;
    }

    #toggle-filters {
        margin: 10px 0; 
        padding: 8px 16px; 
        background: #00567a; 
        color: #fff; 
        border: none; 
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: auto;
        font-size: 16px;
    }

    .toggle-icon {
        margin: 0;
        padding: 0;
        height: 22px;
        margin-left: 5px;
    }

    .filter-popup button {
        border: none;
        background: #00567a;
        color: #FFF;
        font-size: 16px;
        padding: 10px 20px;
        width: 50%;
    }

    .filter-popup button:hover {
        background: #026087;
    }

    .filter-popup a {
        margin-left: 10px;
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 45%;
        text-align: center;
    }

    .toggle-group .toggle-icon {
      display: inline-block;
      transition: transform 0.3s ease;
    }

    .min-max-values {
        display: flex;
        justify-content: space-between;
    }

    .filter-section h3 {
        text-transform: none;
    }

    .inventory-item .img-wrapper {
        position: relative;
        overflow: hidden;
    }

    .img-wrapper.used a:before {
        content: "USED";
        position: absolute;
        top: 10px;
        right: -35px;
        width: 120px;
        padding: 5px 0;
        text-align: center;
        color: #305979;
        background: #DBBC60;
        font-weight: bold;
        transform: rotate(45deg);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        z-index: 2;
    }

    .img-wrapper.clearance a:after {
        content: "CLEARANCE";
        position: absolute;
        top: 22px;
        right: -61px;
        width: 200px;
        padding: 5px 0;
        text-align: center;
        color: #fff;
        background: #CA2C2C;
        font-weight: bold;
        font-size: 12px;
        transform: rotate(45deg);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

    .img-wrapper.used.clearance a:after {
        top: 36px;
        right: -58px;
        width: 220px;
    }

/* Hide FlexSlider arrows on non-slider pages */
.site-content > .flex-direction-nav,
.inventory-main .flex-direction-nav,
.bd-pagination ~ .flex-direction-nav {
    display: none !important;
}

.single-inventory-page .single-hero-wrapper {
    display: flex;
    flex-direction: column;
}

.single-inventory-page .slider-form-wrapper {
    display: flex;
}

.single-inventory-page .flexslider.single-inventory {
    width: 100%;
}

.single-inventory-page .slider-form-wrapper .form-wrapper {
    width: 100%;
    max-width: 35%;
}

.single-inventory-page .slider-form-wrapper .quote-form {
    min-height: 530px;
}

.single-inventory-page .slider-form-wrapper .quote-form h2 {
    padding: 0 0 4px;
}

.single-inventory-page .slider-form-wrapper .quote-form button[type='submit'] {
    max-width: 100%;
}

.single-inventory-page .details-wrapper {
    display: flex;
    margin-top: 20px;
}

.flexslider.single-inventory ul.slides li {
    border-width: 3px 4px 3px 3px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 530px;
}

.price-value[data-tooltip] {
    position: relative;
    cursor: help;
}

.price-value[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #333;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 300px;
    white-space: normal;
    width: max-content;
    z-index: 1000;
    margin-bottom: 8px;
}

.price-value[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: white;
    margin-bottom: 2px;
    z-index: 1001;
}

.bd-pagination {
    margin: 30px 0 10px;
}

.bd-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bd-pagination ul li {
    list-style: none;
}

.bd-pagination ul li .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    background: #fff;
    color: #00567a;
    font-weight: 600;
    text-decoration: none;
    min-width: 38px;
    text-align: center;
}

.bd-pagination ul li a.page-numbers:hover {
    background: #00567a;
    color: #fff;
    border-color: #00567a;
}

.bd-pagination ul li .page-numbers.current {
    background: #00567a;
    color: #fff;
    border-color: #00567a;
}

.bd-pagination ul li .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
}


/* Contact page: breathing room for address + business-hours lists (ticket: text squished) */
.contact-main ul li {
	line-height: 1.7;
	margin-bottom: 8px;
}
.contact-main .col-2 strong,
.contact-main .white-bg-wrap strong {
	display: block;
	margin-bottom: 12px;
	letter-spacing: 0.02em;
}
.contact-main .col-2 > div:not(.form),
.contact-main .white-bg-wrap > .col-2 > div {
	margin-bottom: 26px;
}