/*
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. :)
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 19px Roboto, 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 */
body {
	overflow-x: hidden;
}

.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: 50px;
	padding: 30px 0 15px;
	font-family: 'Tungsten Semibold';
	letter-spacing: 1.5px;
}

.bd-admin-page h1, .bd-admin-page h2 {
	font-family: inherit;
}

h2 {
	color: #00567a;
	font-weight: bold;
	font-size: 50px;
	padding-bottom: 15px;
	font-family: 'Tungsten Semibold';
	letter-spacing: 1.5px;
}

h3 {
	color: #00567a;
	font-weight: bold;
}

p {
	line-height: 30px;
	padding-bottom: 20px;
	font-family: 'roboto';
}

p:last-child {
	padding-bottom: 0px;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

select, input, textarea {
	font-size: 16px;
}

/* Header */
.social-wrapper {
	background: #b12029;
}

.social-bar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: 1150px;
	margin: 0 auto;
}

.social-bar img {
	max-height: 35px;
	width: auto;
	border-radius: 5px;
}

.header-wrapper {
	background: #ebe9e3;
	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;
	width: auto;
}

header .contact-wrapper {
	font-size: 30px;
	font-family: 'Roboto';
	text-align: center;
}

header .contact-wrapper .phone {
	font-weight: bold;
}

header .contact-wrapper .phone a {
	color: #165c82;
	text-decoration: none;
}

.nav-wrapper {
	width: 100%;
	background: #b12029;
}

.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 ul li a {
	padding: 15px;
	display: block;
	text-decoration: none;
	color: #b12029;
	font-family: 'Tungsten Semibold';
	font-size: 25px;
	font-weight: bold;
	background-color: transparent;
	transition: background-color 0.3s ease;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.nav > ul > li > a {
	padding: 15px;
	display: block;
	text-decoration: none;
	color: white;
	font-family: 'Tungsten Semibold'; /* Ensure Roboto font */
	font-size: 25px;
	font-weight: bold;
	background-color: transparent;
	transition: background-color 0.3s ease;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Hover state for top-level menu items */
.nav > ul > li:hover > a {
	background-color: white;
	color: #b12029;
}

/* Styles for the dropdown menu */
.nav ul li ul {
	display: none;
	position: absolute;
	left: 0;
	white-space: nowrap; /* Prevents text from wrapping */
	background-color: white;
	box-shadow: 0 8px 16px rgba(0,0,0,0.1);
	z-index: 1000;
	width: 100%;
}

/* 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: #b12029;
	color: white;
}

.phone-label {
	background-color: #b12029;
    padding: 5px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
}

/* 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: #ebe9e3;
	color: #00567a;
	line-height: 30px;
	padding: 40px 20px 0 20px;
}

footer.wrapper a {
	color: #00567a;
	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: #00567a;
	background: #ebe9e3;
	font-size: 12px;
	font-weight: 300;
	padding: 20px 0;
}

.wrapper.row.footercta .inner-wrapper {
    justify-content: center;
    gap: 1%;
}

/* Home */

/*Building Materials Section*/

.red-columns {
	background: #af1919;
}

.building-materials-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0 20px;
}

.hp-building-materials {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hp-building-materials h2 {
	color: #c81100;
	text-transform: uppercase;
    font-size: 25px;
}

.building-material-item {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.hp-building-materials p {
	font-size: 16px;
	margin-bottom: 0;
	padding-bottom: 0 !important;
	line-height: 20px;
}

.letter-color {
	background-color: #c81100;
	border-radius: 50%;
	min-width: 20px;
	max-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.letter-color p {
	color: white;
	font-size: 12px;
}

p.item-detail {
	text-align: left;
	margin-left: 20px;
}

img.homepage-building-details-img {
	max-width: 50%;
	object-fit: cover;
}

.two-col-cta {
    display: flex;
    justify-content: center;
}

.two-col-cta .inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px;
}

.two-col-cta p, .two-col-cta h2 {
	color: white;
}

.two-col-cta p {
	font-size: 18px;
}

.two-col-cta .inner-col:nth-child(1){
	border-right: 1.5px solid white;
}

.two-col-cta .inner-col:nth-child(2){
	border-left: 1.5px solid white;
}

.two-col-cta a {
	text-decoration: none;
	background-color: #ffc800;
	padding: 10px 20px;
	color: black;
	text-transform: uppercase;
	margin-top: 20px;
	font-size: 18px;
}

.inventory-shed-img {
	min-height: 288px;
    display: flex;
    align-items: center;
}

/*Buying Guide Section*/
.buying-guide {
    position: relative;
    background: url('assets/images/grass-field-min.png') center center / cover no-repeat;
    z-index: 2;
}

.buying-guide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* 80% black overlay */
  z-index: 1;
}

.buying-guide > * {
  position: relative;
  z-index: 2;
}

.buying-guide h2, .buying-guide p {
	color: white;
}

.pricing-guide {
  position: relative;
  background: #eae9e4;
}

.pricing-guide h2 {
	color: #af1919;
}

.guide-cta {
	padding: 20px 0;
}

.pricing-guide-cta, .buying-guide-cta {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5%;
	align-items: center;
}

.pricing-guide-cta a, .buying-guide-cta a {
	background-color: #ffc800;
    height: 60px;
    width: 300px;
    color: black;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 25px;
}

.cta-pricing {
	background: #b12029;
}

.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-location {
	color: #e7bf58;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 26px;
}

.cta-pricing .cta-new a, .cta-builder a, .cta-call {
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 50px;
	color: white;
	text-align: center;
	font-family: 'Tungsten Semibold';
	letter-spacing: 1.5px;
}

.cta-pricing .cta-link a span {
	font-weight: bold;
	color: #ffc800;
}

.cta-pricing .cta-link a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 50px;
	font-family: 'Tungsten Semibold';
}

.cta-pricing .inner-wrapper {
	justify-content: center !important;
}

.cta-pricing .cta-new span {
	color: #ffc800;
	font-weight: bold;
}

#pricing-form, #savings-form, #buying-guide-form, #quote-form-popup {
	text-align: center;
	background: #00567a;
	color: #FFF;
	max-width: 600px;
	padding: 0;
}

#pricing-form .pricing-form-hero {
	background: url('assets/images/pricing-guide-popup-hero.png') no-repeat center center;
	background-size: cover;
	height: 235px;
	width: 100%;
}

#quote-form-popup .quote-form-hero {
	background: url('assets/images/want-this-shed-popup-bg.jpg') no-repeat center center;
	background-size: cover;
	height: 360px;
	width: 100%;
	padding: 20px;
}

#savings-form .savings-form-hero {
	background: url('assets/images/april-savings-sale-form-bg.jpg') no-repeat center center;
	background-size: cover;
	height: 270px;
	width: 100%;
}

#buying-guide-form .buying-guide-form-hero {
	background: url('assets/images/buying-guide-form-bg.jpg') no-repeat center center;
	background-size: cover;
	height: 235px;
	width: 100%;
}

#pricing-form .form-submit-message, #savings-form .form-submit-message, #buying-guide-form .form-submit-message, #quote-form-popup .form-submit-message {
	color: #FFF;
	padding: 40px 20px;
}

#pricing-form .form-submit-message.error, #savings-form .form-submit-message.error, #buying-guide-form .form-submit-message.error, #quote-form-popup .form-submit-message.error {
	padding: 10px 20px;
}

#pricing-form form, #savings-form form, #buying-guide-form form, #quote-form-popup form {
	background: #1f1e1e;
	padding: 40px;
}

#pricing-form h2, #savings-form h2, #buying-guide-form h2, #quote-form-popup h2 {
	color: #FFF;
}

#pricing-form h2 span, #savings-form h2 span, #buying-guide-form h2 span, #quote-form-popup 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: #b12029;
}

.wrapper.row.cta-builder .inner-wrapper {
	justify-content: space-evenly;
}

.cta-builder img {
	margin: -50px 0;
	max-height: 125px;
}

.cta-builder a span {
	font-weight: bold;
	color: #FABE08;
}

.featured-buildings {
	padding: 20px 0 60px;
	background: #ebe9e3;
}

.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;
}

.flexslider.featured:hover .flex-direction-nav .flex-next {
	right: -30px;
}

.flexslider.featured:hover .flex-direction-nav .flex-prev {
	left: -30px;
}

.cta-call {
	background: #03597c;
	color: white;
	text-transform: uppercase;
	padding: 20px;
}

.cta-call span {
	color: #fabe08;
}

.cta-call div,
.cta-call a, .cta-call span {
	font-weight: bold;
	letter-spacing: 1.5px;
	font-size: 50px;
}

.cta-call > div > div:last-child {
	font-size: 40px;
}

.cta-call a {
	text-decoration: none;
	color: #fabe08;
}

/* 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: 70%;
	width: 100%;
}

.col-5 {
	max-width: 19%;
	width: 100%;
}

.wrapper.row .inner-wrapper.barn-info {
	align-items: start;
}

.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;
}

.models-content .single-hero-wrapper {
    display: flex;
    flex-direction: column;
}

.models-content .slider-form-wrapper {
    display: flex;
}

.models-content .flexslider.single-inventory {
    width: 100%;
}

.models-content .slider-form-wrapper .form-wrapper {
    width: 100%;
    max-width: 33%;
}

.models-content .slider-form-wrapper .quote-form {
    min-height: 530px;
    margin-left: 20px !important;
}

.models-content .slider-form-wrapper .quote-form h2 {
    padding: 0 0 4px;
}

.models-content .slider-form-wrapper .quote-form button[type="submit"] {
    max-width: 100%;
}

.models-content .details-wrapper {
    display: flex;
    margin-top: 20px;
}

.models-content .flexslider 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;
}

.models-content .slider-cta-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1%;
}

.models-content .barn-info {
    flex-direction: column !important;
}

.models-content .bottom-container {
    display: flex;
    flex-direction: row !important;
    width: 100%;
    gap: 100px;
}

.models-content div.barn-info {
    border-bottom: 3px solid #00465e;
    padding-bottom: 40px;
}

.models-content .last-product .barn-info {
    border-bottom: 0;
}

.models-content .wrapper.disclaimer {
    padding: 40px 20px;
}

.models-content .barn-text {
    margin-bottom: 50px;
}

.models-content .col-2.image-wrapper {
    max-width: 30%;
}

.models-content textarea#message {
    height: 72px;
}

#quote-form h2 {
	font-size: 30px;
}

/* 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 {
	padding-bottom: 60px;
}

/* Rent To Own */
.form-button.rto button {
	background: #FABE08 !important;
}

.wrapper.rto-main {
	padding: 60px 20px;
	background: white;
}

.rto-main .inner-wrapper {
	align-items: stretch !important;
}

.wrapper.rto-main h1 {
	text-align: center;
	color: white;
	background-color: #b11f29;
	padding: 10px;
}

#rent-to-own form.simple .form-row input {
	max-width: 100% !important;
	width: 100%;
}

.cta-builder.rto {
	background-color: black;
	height:100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper.rto-main img {
	width: 100%;
	margin-top: 25px;
}

.wrapper.rto h2 {
	font-size: 45px;
}

.wrapper.rto-main .col-2 {
	max-width: 65%;
}

.wrapper.rto-main .col-2 + .col-2 {
	max-width: 30%;
}

.cta-builder-blue {
	background-color: #00567a;
	margin-bottom: 10px;
}

.cta-builder-blue h2 {
	color: white;
	padding: 0;
	text-align: center;
}

.rto-ol span {
	color: #b11f29;
	font-weight: bold;
}

.rto-ol p {
	font-size: 25px;
	font-weight: normal;
	margin: 15px auto;
}

h3.rto-highlights {
	color: #b11f29;
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	margin: 25px auto;
}

.rto-desc h2 {
	color: black;
}

.wrapper.row .inner-wrapper.justify {
	justify-content: center;
}

.cta-builder-blue .inner-wrapper {
	justify-content: center !important;
}

.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;
}

.bullets {
	list-style-type: disc;
	padding-left: 20px;
	margin-bottom: 20px;
}

.bullets li {
	margin: 10px auto;
}

/*.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: 100%;
	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 */

/*Review styles on single inventory page------------------------*/
.inventory-item .pricing-section {
	display: flex;
	flex-direction: row !important;
	gap: 2%;
}

/*End-----------------------------------------------------------*/


.inventory-item {
	display: flex;
	justify-content: space-between;
	padding: 60px 20px;
	border-top: 2px solid #af0019;
	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: 100%;
	flex-direction: row;
	align-items: flex-start;
	gap: 1%;
}

.inventory-item .text-info {
	width: 50%;
}

.inventory-item .text-info ul li {
	margin-bottom: 10px;
	font-weight: bold;
}

.inventory-item .sold-wrapper {
	font-size: 100px;
	font-weight: bold;
	color: #00577a;
}

.inventory-item .price-box,
.single-inventory-page .price-box {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	border: 2px solid #af0019;
	margin-bottom: 15px;
	flex-direction: column;
}

.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;
	background-color: #af0019;
	color: white;
	padding: 15px 10px;
	min-width:100%;
}

.inventory-item .price-box .price-value,
.single-inventory-page .price-box .price-value {
	padding: 15px 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: #194b7d;
	font-weight: bold;
	min-width: 75px;
	display: inline-block;
}

.inventory-item .text-info, .inventory-item .text-info a {
	color: #194b7d;
}

.inventory-item .link-button {
	display: flex;
	flex-basis: 70%;
	margin-left: auto;
	justify-content: center;
	gap: 2%;
}

.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: 100%;
	text-align: center;
	text-transform: uppercase;
}

.inventory-item .link-button a:hover {
	background: #006c9a;
	color: #FFF;
}

.inventory-item .image {
	width: 100%;
	height: 250px;
}

.single-inventory-page .column-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-right: 20px;
    justify-content: space-between;
}

.inventory-item {
    max-width: 1150px;
    margin: auto;
}

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;
}

.cta-text {
    display: flex;
    align-items: center;
    gap: 5%;
    width: 100%;
    justify-content: center;
}

.sold-container {
	display: flex;
	flex-direction: column;
    align-items: center;
    width:43%;
}

.sold-container .link-button {
	width: 100%;
}

/* 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;
}

.single-inventory .single-inv-details ul {
	min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

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: #af1919;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding: 15px 40px;
	border-radius: 5px;
	margin: 10px 0;
	display: inline-block;
	font-size: 21px;
	margin:0;
	color: white;
	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: 660px;
}

.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: 50%;
	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%;
}

.single-inv-details ul span {
	color: #af0019;
	font-weight: bold;
}

.single-inv-details .col-2 + .col-2 {
	max-width: 45%;
}

.single-inventory-page .details-wrapper .inv-buttons {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 3%;
}

.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;
	font-weight: bold;
	font-size: 22px;
}

.single-inventory-page .details-wrapper .inv-buttons a:hover {
	background: #014a67;
}

.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;
}

.color-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1%;
}

.color-sections {
	padding: 20px 0;
}

.models-content .slides li {
	height: 500px !important;
}

.models-content .slides li img {
	height: 100%;
}

/* SARA DESKTOP STYLES ------------------------------------------------------*/

.badge-bar {
	flex-wrap: wrap;
}

.nav-wrapper .nav-toggle {
	display: none;
}

.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*/
	header {
		flex-direction: column;
	}

	.contact-wrapper {
		display: flex;
	    gap: 2%;
	    width: 100%;
	    justify-content: center;
	    margin-top: 20px;
	}

	.row.cta-pricing .inner-wrapper, .building-materials-wrapper {
		flex-direction: column;
		align-items: center;
	}

	.interactive-building {
		flex-direction: column-reverse;
	}

	.cta-builder .link, .cta-call div {
		text-align: center;
	}

	div.cta-builder a {
		font-size: 25px;
	}

	#pricing-form div.pricing-form-hero, #savings-form div.savings-form-hero, #buying-guide-form div.savings-form-hero, #quote-form-popup div.quote-form-hero {
		background-size: contain !important;
	}

	.cta-call .inner-wrapper {
		flex-direction: column !important;
	}

	.cta-pricing div.cta-location {
		font-size: 20px;
	}

	img.homepage-building-details-img {
	max-width: 100%;
	} 

	.nav > ul > li > a {
		background-color: #b12029;
	}

	.two-col-cta {
		flex-direction: column;
	}

	.two-col-cta .inner-col:nth-child(1) {
		border-right: none;
		border-bottom: 1.5px solid white;
	}

	.two-col-cta .inner-col:nth-child(2) {
		border-left: none;
		border-bottom: 1.5px solid white;
	}

	/*Menu Mobile Styles*/

	header div.contact-wrapper {
		font-size: 18px;
	}

	.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: flex-end;
	}

	.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;
	}

	.inventory-item	div.link-button a {
		max-width: 100%;
	}

	.inventory-item	div.link-button a:nth-child(1){
		margin-bottom: 10px;
	}

	/*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, #savings-form form.simple div.form-button button, #buying-guide-form form.simple div.form-button button,  #quote-form-popup 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;
	}

	.models-content .bottom-container {
		flex-direction: column !important;
	}

	.models-content .col-2.image-wrapper {
		max-width: 100%;
	}

	.inventory-item .price-box {
		justify-content: flex-start;
	}

	.cta-builder-blue h2 {
		font-size: 30px;
	}
}

@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;
	}

	.rto-main .inner-wrapper {
		flex-direction: column !important;
	}

	.wrapper.rto-main .col-2, .wrapper.rto-main .col-2 + .col-2 {
		max-width: 100%;
	}

}

/*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.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%;
	}

	.models-content .slides li {
		height: 100% !important;
	}

	.slider-form-wrapper {
		flex-direction: column;
	}

	.models-content .slider-form-wrapper .form-wrapper {
		max-width: 100%;
	}

	.models-content .slider-form-wrapper .quote-form {
		margin-left: 0 !important;
		margin-top: 20px;
	}

	.single-inventory-page div.slider-form-wrapper .quote-form {
		margin-left: 0 !important;
	}

	.single-inventory .features-section {
		flex-direction: column;
	}

	.instagram, .facebook {
		display: flex;
	}

	.facebook {
		justify-content: flex-end;
	}
}

/*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) {

} */
