/*
Theme Name: Johnson Concrete Products
Author:     Provident Pro
Author URI: https://www.providentpro.com/
Version:    0.0.8
*/

#page { position:relative; }

#overlay { background-color:rgba(0, 0, 0, 0.5); height:100%; left:0; opacity:0; position:fixed; top:0; transition:all 0.3s; visibility:hidden; width:100%; z-index:100; }
.show-mobile-menu #overlay { opacity:1; visibility:visible; }

.container { padding:0 30px; width:1620px; max-width:100%; margin:0 auto; }
.container.no-padding { padding:0; }
.container-left { padding-left:calc(50vw - 780px); }
.container-right { padding-right:calc(50vw - 780px); }

.swiper { display:none; }
.swiper.swiper-initialized { display:block; }

.with_frm_style .frm_error_style p, .with_frm_style .frm_message p, .frm_success_style p { margin-bottom:0; }

.frm_combo_inputs_container { margin-bottom:-30px; }

/* Header */
#header { background:#122859 url('img/pattern.png') repeat; margin-bottom:90px; position:relative; }

#header .gradients::before { background:linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6) 100%); content:''; position:absolute; top:0; left:0; width:100%; height:100%; }
#header .gradients::after { background:linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 100%); content:''; position:absolute; top:0; left:0; width:100%; height:100%; }

#header .navigation { background-color:rgba(0, 0, 0, 0.4); padding:18px 0; position:relative; z-index:101; }

#header .navigation .columns { display:flex; align-items:center; gap:30px; justify-content:space-between; }

#header .logo img { display:block; width:180px; transition:transform 0.3s; }
#header .logo a:hover img { transform:scale(1.05); }

#header .desktop-menu ul { display:flex; align-items:center; gap:30px; list-style-type:none; padding-left:0; margin-bottom:0; }
#header .desktop-menu ul li { display:flex; flex-direction:column; gap:9px; font-family:'Teko', sans-serif; font-size:18px; font-weight:700; line-height:1; padding-top:12px; position:relative; text-transform:uppercase; white-space:nowrap; }
#header .desktop-menu ul li a { color:#fff; display:flex; gap:9px; text-decoration:none; }

#header .desktop-menu ul li::after { background-color:#d30000; content:''; display:block; transition:width 0.3s; width:0; height:3px; }
#header .desktop-menu ul li.current-menu-item::after, #header .desktop-menu ul li.current-menu-ancestor::after, #header .desktop-menu ul li.hover::after { width:100%; }

#header .desktop-menu ul li.menu-item-has-children > a::after { content:'\f107'; font-family:'Font Awesome 6 Pro'; font-size:16px; font-weight:400; }

#header .desktop-menu .sub-menu { background-color:#fff; border-radius:6px; box-shadow:3px 3px 9px rgba(0, 0, 0, 0.15); display:none; min-width:100%; position:absolute; top:100%; left:0; z-index:1; }
#header .desktop-menu .sub-menu li { display:block; font-family:'Geologica', sans-serif; font-size:14px; font-weight:400; padding-top:0; text-transform:none; }
#header .desktop-menu .sub-menu li:first-child > a { border-top-left-radius:6px; border-top-right-radius:6px; }
#header .desktop-menu .sub-menu li:last-child > a { border-bottom-left-radius:6px; border-bottom-right-radius:6px; }
#header .desktop-menu .sub-menu li a { color:#122859; padding:15px; gap:15px; transition:background-color 0.3s, color 0.3s; }
#header .desktop-menu .sub-menu li a:hover { background-color:#d30000; color:#fff; }

#header .desktop-menu .sub-menu li::after { content:none; }

#header .desktop-menu .sub-menu li.menu-item-has-children > a::after { content:'\f061'; }

#header .desktop-menu .sub-menu .sub-menu { top:0; left:100%; }

#header .desktop-menu .social-links, #header .desktop-menu .social-links ul li { padding-top:0; }
#header .desktop-menu .social-links::after, #header .desktop-menu .social-links ul li::after { content:none; }
#header .desktop-menu .social-links ul { gap:6px; }
#header .desktop-menu .social-links ul li a { align-items:center; justify-content:center; background-color:#d30000; border-radius:50%; width:30px; height:30px; transition:transform 0.3s; }
#header .desktop-menu .social-links ul li a:hover { transform:scale(1.05); }

#header .mobile-menu-toggle { align-self:center; display:none; }
#header .mobile-menu-toggle a { background-color:#d30000; border-radius:50%; color:#fff; display:block; text-align:center; text-decoration:none; transition:transform 0.3s; width:48px; height:48px; line-height:48px; }
#header .mobile-menu-toggle a::before { content:'\f0c9'; font-family:'Font Awesome 6 Pro'; font-size:24px; font-weight:900; }
.show-mobile-menu #header .mobile-menu-toggle a::before { content:'\f00d'; }
#header .mobile-menu-toggle a:hover { transform:scale(1.05); }

/* Header > Mobile Menu */
#header .mobile-menu { background-color:#fff; display:none; position:absolute; top:100%; left:0; width:100%; }

#header .mobile-menu .menu ul { list-style-type:none; margin-bottom:0; padding-left:0; }
#header .mobile-menu .menu ul li { border-top:1px solid #f2f2f2; font-family:'Teko', sans-serif; font-size:18px; font-weight:700; line-height:60px; text-transform:uppercase; white-space:nowrap; }
#header .mobile-menu .menu ul li:first-child { border-top-width:0; }
#header .mobile-menu .menu ul li a { display:block; overflow:hidden; padding:0 15px; text-overflow:ellipsis; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
#header .mobile-menu .menu ul li a:hover, #header .mobile-menu .menu ul li.active > a { background-color:#d30000; color:#fff; }

#header .mobile-menu .menu ul li.menu-item-has-children > a { padding-right:0; }

#header .mobile-menu .menu ul li a .sub-menu-toggle { display:none; float:right; height:60px; margin-left:15px; text-align:center; transition:background-color 0.3s; width:60px; }
#header .mobile-menu .menu ul li.menu-item-has-children > a .sub-menu-toggle { display:block; }
#header .mobile-menu .menu ul li a .sub-menu-toggle::before { content:'\f105'; font-family:'Font Awesome 6 Pro'; }
#header .mobile-menu .menu ul li.active > a .sub-menu-toggle::before { content:'\f107'; }
#header .mobile-menu .menu ul li a .sub-menu-toggle:hover { background-color:rgba(0, 0, 0, 0.15); }

#header .mobile-menu .menu .sub-menu { display:none; }
#header .mobile-menu .menu .sub-menu li { border-top:1px solid #f2f2f2; font-family:'Geologica', sans-serif; font-size:14px; font-weight:400; text-transform:none; }

#header .mobile-menu .social-links { border-top:1px solid #f2f2f2; padding:15px; }
#header .mobile-menu .social-links ul { display:flex; gap:6px; list-style-type:none; margin-bottom:0; padding-left:0; }
#header .mobile-menu .social-links ul li a { background-color:#d30000; border-radius:50%; color:#fff; display:block; width:30px; height:30px; line-height:30px; text-align:center; transition:transform 0.3s; }
#header .mobile-menu .social-links ul li a:hover { transform:scale(1.05); }

/* Header > Home */
#header .home { padding:2.4em 0; position:relative; }

#header .home .columns { display:flex; column-gap:90px; align-items:center; }

#header .home .columns > div { flex-basis:0; flex-grow:1; }

#header .home .heading { color:#fff; font-family:'Teko', sans-serif; font-size:4.2em; line-height:1; text-transform:uppercase; }
#header .home .heading strong { font-size:1.2em; line-height:0.8; }
#header .home .heading > *:last-child { margin-bottom:0; }

#header .slides { background:linear-gradient(to top, #fff 0%, #fff 50%, transparent 50%); position:relative; }

#header .slides img { aspect-ratio:3 / 2; border:9px solid #fff; box-sizing:border-box; display:block; object-fit:cover; margin:0 auto; width:480px; }

/* Header > Interior */
#header .interior { padding:4.8em 0; position:relative; }

#header .interior h1 { color:#fff; font-size:4em; margin-bottom:0; }

/* Body */
#body .layout { margin-bottom:90px; }

/* Layout > Text */
.layout.text .columns { column-gap:60px; margin:0 auto; max-width:100%; }

.layout.text .columns.two { column-count:2; }
.layout.text .columns.three { column-count:3; }

.layout.text .columns > *:last-child { margin-bottom:0; }

/* Layout > Text + Media */
.layout.text-media { display:flex; column-gap:90px; row-gap:60px; align-items:center; }
.layout.text-media.media-right { flex-direction:row-reverse; }

.layout.text-media .text { flex-basis:0; flex-grow:1; min-width:calc(50% - 45px); }
.layout.text-media .text > *:last-child { margin-bottom:0; }

.layout.text-media .media { max-width:100%; min-width:0; }

.layout.text-media .image img { display:block; }

.layout.text-media .video iframe { aspect-ratio:16 / 9; width:600px; max-width:100%; }

.layout.text-media .multiple-images { max-width:100%; position:relative; }
.layout.text-media .multiple-images img { display:block; position:absolute; }
.layout.text-media .multiple-images img.round { aspect-ratio:1; background-color:#fff; border-radius:50%; object-fit:cover; padding:1.5%; }

/* Layout > Separator */
.layout.separator .arrow { text-align:center; }
.layout.separator .arrow::before { color:#e6e6e6; content:'\f078'; font-family:'Font Awesome 6 Pro'; font-size:60px; line-height:1; }

/* Layout > Product Grid */
.layout.product-grid .filter { margin-bottom:60px; }
.layout.product-grid .filter ul { display:flex; gap:15px; flex-wrap:wrap; justify-content:center; list-style-type:none; padding-left:0; }
.layout.product-grid .filter ul li { font-family:'Teko', sans-serif; font-weight:700; text-transform:uppercase; }
.layout.product-grid .filter ul li a { background-color:#f2f2f2; border-radius:21px; display:block; line-height:42px; padding:0 30px; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
.layout.product-grid .filter ul li a:hover { background-color:#e6e6e6; color:#122859; }
.layout.product-grid .filter ul li.active a { background-color:#122859; color:#fff; }
.layout.product-grid .filter ul li a i { margin-right:6px; }

.layout.product-grid .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 240px)); justify-content:center; gap:60px; }

.layout.product-grid .grid .product { color:#000; line-height:1.2; text-align:center; text-decoration:none; }

.layout.product-grid .grid .image { background-color:#fff; border:2px solid #e6e6e6; border-radius:9px; margin-bottom:12px; padding:30px; transition:border-color 0.3s; }
.layout.product-grid .grid a:hover .image { border-color:#122859; }
.layout.product-grid .grid .image img { aspect-ratio:1; display:block; object-fit:contain; width:180px; }

.layout.product-grid .grid .title { color:#122859; font-weight:700; }

.layout.product-grid .grid .description { font-size:14px; }

/* Layout > Dealers */
.layout.dealers .columns { display:flex; gap:90px; }

.layout.dealers .sidebar { width:24%; }
.layout.dealers .sidebar .menu { background-color:#f8f8f8; border-radius:9px; padding:30px; position:sticky; top:30px; }

.layout.dealers .menu ul { list-style-type:none; margin-bottom:0; padding-left:0; }
.layout.dealers .menu ul li { border-bottom:1px solid #e6e6e6; font-size:14px; font-weight:700; line-height:1.2; }
.layout.dealers .menu ul li:first-child { border-top:1px solid #e6e6e6; }
.layout.dealers .menu ul li a { display:block; padding:15px; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
.layout.dealers .menu ul li a:hover, .layout.dealers .menu ul li.active a, #product-grid .filter ul li.active a { background-color:#d30000; color:#fff; }

.layout.dealers .locations { flex-grow:1; }

.layout.dealers .location { border-top:1px solid #e6e6e6; padding-top:60px; margin-top:60px; }
.layout.dealers .location:first-child { border-top-width:0; padding-top:0; margin-top:0; }

.layout.dealers .dealers { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }

.layout.dealers .dealer .title { font-size:18px; font-weight:700; }

/* Layout > Gallery */
.layout.gallery { text-align:center; }

.layout.gallery .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); justify-content:center; gap:60px; justify-content:center; }

.layout.gallery .image a { display:inline-block; position:relative; }
.layout.gallery .image a::after { background-color:rgba(0, 0, 0, 0.3); color:#fff; content:'\f002'; font-family:'Font Awesome 6 Pro'; font-size:30px; font-weight:900; display:flex; justify-content:center; align-items:center; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; transition:opacity 0.3s; }
.layout.gallery .image a:hover::after { opacity:1; }

.layout.gallery .image img { aspect-ratio:3 / 2; display:block; object-fit:cover; width:300px; }

/* Layout > Contact Icons */
.layout.contact-icons { text-align:center; }

.layout.contact-icons .items { display:flex; flex-wrap:wrap; column-gap:120px; row-gap:60px; justify-content:center; }

.layout.contact-icons .item { display:flex; flex-direction:column; align-items:center; gap:15px; width:360px; }

.layout.contact-icons .item .icon { background-color:#d30000; border-radius:50%; color:#fff; font-size:30px; margin:0 auto; width:72px; height:72px; line-height:72px; }

/* Product Grid */
#product-grid { margin-bottom:90px; }

#product-grid .columns { display:flex; gap:90px; }

#product-grid .sidebar { display:flex; flex-direction:column; gap:60px; width:24%; }

#product-grid .filter { background-color:#f8f8f8; border-radius:9px; padding:30px; }
#product-grid .filter h4 { margin-bottom:15px; }
#product-grid .filter ul { list-style-type:none; margin-bottom:0; padding-left:0; }
#product-grid .filter ul li { border-bottom:1px solid #e6e6e6; font-size:14px; font-weight:700; line-height:1.2; }
#product-grid .filter ul li:first-child { border-top:1px solid #e6e6e6; }
#product-grid .filter ul li a { display:block; padding:15px; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
#product-grid .filter ul li a:hover, #product-grid .filter ul li.active a { background-color:#d30000; color:#fff; }
#product-grid .filter ul li a i { margin-right:6px; }

#product-grid .categories { flex-grow:1; }

#product-grid .category { border-bottom:1px solid #e6e6e6; margin-bottom:90px; padding-bottom:90px; }
#product-grid .category:last-child { border-bottom-width:0; margin-bottom:0; padding-bottom:0; }

#product-grid .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 210px)); gap:75px; }

#product-grid .grid .product { color:#000; line-height:1.2; text-align:center; text-decoration:none; }

#product-grid .grid .image { background-color:#fff; border:2px solid #e6e6e6; border-radius:9px; margin-bottom:12px; padding:30px; transition:border-color 0.3s; }
#product-grid .grid a:hover .image { border-color:#122859; }
#product-grid .grid .image img { aspect-ratio:1; display:block; object-fit:contain; width:180px; }

#product-grid .grid .title { color:#122859; font-weight:700; }

#product-grid .grid .description { font-size:14px; }

/* Single Product */
#product .columns { display:flex; align-items:flex-start; justify-content:space-between; column-gap:90px; row-gap:60px; margin-bottom:90px; }

#product .content { flex-grow:1; }
#product .content > *:last-child { margin-bottom:0; }

#product .heading { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:30px; }

#product .heading .title { display:flex; align-items:center; }
#product .heading .title h2 { margin-bottom:0; }
#product .heading .title div { border-left:1px solid #e6e6e6; margin-left:30px; padding-left:30px; }

#product .series, #product .model { display:block; line-height:1; }
#product .series { color:#d30000; font-weight:700; text-transform:uppercase; }
#product .model { color:#122859; }

#product .model-toggle { display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:14px; font-weight:700; text-transform:uppercase; }
#product .model-toggle a { background-color:#f2f2f2; border-radius:24px; color:#122859; display:block; font-family:'Teko', sans-serif; font-size:16px; font-weight:700; line-height:48px; padding:0 30px; text-decoration:none; text-transform:uppercase; transition:background-color 0.3s, color 0.3s; }
#product .model-toggle a:hover { background-color:#e6e6e6; }
#product .model-toggle a.active { background-color:#d30000; color:#fff; }
#product .model-toggle a i { margin-right:6px; }

#product .specs { border-top:1px solid #e6e6e6; padding-top:30px; margin-top:30px; display:flex; align-items:center; flex-wrap:wrap; column-gap:60px; row-gap:30px; }

#product .spec { display:flex; align-items:center; gap:15px; }
#product .spec .icon { background-color:#d30000; border-radius:50%; color:#fff; font-size:24px; width:48px; height:48px; line-height:48px; text-align:center; }
#product .spec .value { color:#122859; font-size:24px; font-weight:700; line-height:1; }
#product .spec .value span { color:#000; display:block; font-size:14px; font-weight:400; text-transform:uppercase; }

#product .columns .image { background-color:#fff; border-radius:9px; box-shadow:6px 6px 18px rgba(0, 0, 0, 0.15); margin-top:-180px; padding:30px; position:relative; z-index:1; }
#product .columns .image img { aspect-ratio:1; display:block; object-fit:contain; width:300px; }

#product .features { margin-bottom:90px; }

#product .features .tabs .items { display:flex; column-gap:30px; row-gap:15px; flex-wrap:wrap; list-style-type:none; padding-left:0; }
#product .features .tabs .items li { font-family:'Teko', sans-serif; font-size:18px; font-weight:700; text-transform:uppercase; }
#product .features .tabs .items li a { background-color:#f2f2f2; border-radius:24px; color:#122859; display:block; line-height:48px; padding:0 30px; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
#product .features .tabs .items li a:hover { background-color:#e6e6e6; }
#product .features .tabs .items li.active a { background-color:#122859; color:#fff; }

#product .features .tabs .tab { background-color:#f8f8f8; border-radius:6px; display:none; padding:45px; }
#product .features .tabs .tab.active { display:block; }
#product .features .tabs .tab > *:last-child { margin-bottom:0; }

#product .waterers, #product .parts { margin-bottom:90px; }

#product .waterers .list { background-color:#f8f8f8; border-radius:6px; padding:45px; }
#product .waterers .list ul { margin-bottom:0; }
#product .waterers .list .column-list { column-count:4; }

#product .parts .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 120px)); gap:60px; }

#product .parts .grid .part { color:#000; font-size:14px; line-height:1.2; text-align:center; text-decoration:none; }

#product .parts .grid .image { background-color:#fff; border:2px solid #e6e6e6; border-radius:9px; margin-bottom:12px; padding:30px; transition:border-color 0.3s; }
#product .parts .grid a:hover .image { border-color:#122859; }
#product .parts .grid .image img { aspect-ratio:1; display:block; object-fit:contain; width:180px; }

#product .parts .grid .title { color:#122859; font-weight:700; }

/* Testimonials */
#testimonials { background:#122859 url('img/pattern.png') repeat; background-clip:padding-box; border-top:60px solid transparent; color:#fff; padding:75px 0 45px; position:relative; text-align:center; }

#testimonials::before { background:linear-gradient(to left, rgba(0, 0, 0, 0.6) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6) 100%); content:''; position:absolute; top:0; left:0; width:100%; height:100%; }

#testimonials .swiper-wrapper { align-items:center; }

#testimonials .images { position:absolute; top:0; left:50%; transform:translate(-50%, -50%); width:120px; }
#testimonials .images img { aspect-ratio:1; border-radius:50%; display:block; object-fit:cover; width:120px; }

#testimonials .quote { margin:0 auto 30px; max-width:100%; width:1080px; }
#testimonials .title { font-family:'Teko', sans-serif; font-size:21px; font-weight:700; line-height:1.2; }

/* Footer */
#footer .top { padding:75px 0; }

#footer .top .logo img { display:block; margin:0 auto; width:280px; }

#footer .contact { display:flex; column-gap:90px; row-gap:30px; justify-content:center; flex-wrap:wrap; margin-top:60px; text-align:center; }
#footer .contact span { display:block; font-size:14px; font-weight:700; text-transform:uppercase; }
#footer .contact a { color:#122859; font-family:'Teko', sans-serif; font-size:42px; font-weight:700; line-height:1; text-decoration:none; }

#footer .bottom { border-top:1px solid #eee; font-size:14px; padding:18px 0; text-align:center; }

/* Media Queries */
@media (max-width:1619px) {
	.container-left { padding-left:30px; }
	.container-right { padding-right:30px; }

	/* Header > Home */
	#header .home { font-size:16px; }

	/* Header > Interior */
	#header .interior { font-size:16px; }
}

@media (max-width:1439px) {
	/* Header > Interior */
	#header .home { font-size:14px; }

	/* Header > Interior */
	#header .interior { font-size:14px; }
}

@media (max-width:1199px) {
	/* Header */
	#header .desktop-menu { display:none; }	

	#header .mobile-menu-toggle { display:block; }

	/* Header > Home */
	#header .home { font-size:12px; }

	/* Header > Interior */
	#header .interior { font-size:12px; }
}

@media (max-width:991px) {
	.container { padding:0 15px; }
	.container-left { padding-left:15px; }
	.container-right { padding-right:15px; }

	.column-list { column-count:2; }

	/* Layout > Text */
	.layout.text .columns.three { column-count:2; }

	/* Layout > Text + Media */
	.layout.text-media { flex-direction:column; }
	.layout.text-media.media-right { flex-direction:column-reverse; }

	.layout.text-media .text { padding-left:15px !important; padding-right:15px !important; }

	.layout.text-media .media { padding:0 15px !important; }

	/* Layout > Dealers */
	.layout.dealers .columns { flex-direction:column; }

	.layout.dealers .sidebar { width:100%; }

	.layout.dealers .dealers { grid-template-columns:repeat(2, 1fr); }

	/* Product Grid */
	#product-grid .columns { flex-direction:column; }

	#product-grid .sidebar { width:100%; }

	#product-grid .grid { justify-content:center; }

	/* Single Product */
	#product .columns { flex-direction:column; }

	#product .columns .image { align-self:center; margin-top:0; }

	#product .waterers .list .column-list { column-count:3; }
}

@media (max-width:767px) {
	.column-break { break-before:auto; }

	/* Header > Home */
	#header .home .columns { flex-direction:column; }

	#header .home .heading { text-align:center; }

	/* Header > Interior */
	#header .interior h1 { text-align:center; }

	/* Layout > Text */
	.layout.text .columns.two, .layout.text .columns.three { column-count:1; }

	/* Single Product */
	#product .waterers .list .column-list { column-count:2; }
}

@media (max-width:575px) {
	.alignleft, .alignright { display:block; float:none; margin:0 0 30px; }

	.column-list { column-count:1; }

	/* Layout > Dealers */
	.layout.dealers .dealers { grid-template-columns:1fr; }

	/* Single Product */
	#product .waterers .list .column-list { column-count:1; }
}