@charset "utf-8";
/* CSS Document */
/* Top Styles are for 1900 Width Resolution*/
/*
Nationwide Reds
Primary - 212,30,37
84,12,15
219,97,101
84,37,39
161,23,28

Nationwide Blues
Primary - 3,81,161
4,119,237
56,116,177
76,156,237
2,55,110

*/
/* ===================================================================
   NAZ Navigation — Color overrides for Nationwide Coatings
   Defaults defined in naz-nav.css; we override the CSS variables here
   so the framework styling matches the Nationwide blue color scheme.
   =================================================================== */
:root {
	--naz-nav-link-color: rgba(255,255,255,1);
	--naz-nav-link-shadow: 0 1px 2px rgba(0,0,0,0.5);
	--naz-nav-hover-border: rgba(4,119,237,1);
	--naz-nav-active-border: rgba(4,119,237,1);
	--naz-nav-dropdown-bg: rgba(3,81,161,1);
	--naz-nav-dropdown-shadow: 0 5px 10px rgba(0,0,0,0.4);
	--naz-nav-dropdown-link-color: rgba(255,255,255,1);
	--naz-nav-dropdown-hover-border: rgba(255,255,255,1);
	--naz-nav-mobile-bg: rgba(255,255,255,1);
	--naz-nav-mobile-link-color: rgba(3,81,161,1);
	--naz-nav-mobile-border-color: rgba(3,81,161,0.2);
	--naz-nav-overlay-bg: rgba(0,0,0,0.6);
}
/* Background color for the .navi bar holding .full-nav */
.navi {
	background: rgba(3,81,161,1);
}

/* GLOBAL STYLES
-------------------------------------------------- */
*{
	margin:0;
	padding:0;	
	font-size:14px;
  font-family: "niveau-grotesk", sans-serif;
  font-display: block;
  }
img{
	border:none;	
}
body{
  max-width: 1920px;
  margin:0 auto;
  box-shadow: 0 0 3px rgba(0,0,0,1.0);
}
h1{
  font-weight:bold;
}
h2{
  font-size:40px;
	font-family:"niveau-grotesk" , sans-serif;  
  font-weight:900;
  color:rgba(3,81,161,1.00); /*Blue*/
}
h3{
	font-family: "niveau-grotesk" , sans-serif;
	font-size:20px;
	font-weight:bold;
	color:rgba(212,30,37,1.00);  /*Red*/
}
h4{
	font-family: "niveau-grotesk" , sans-serif;
	font-size:25px;
	font-weight:900;
	color:rgba(56,116,177,1.00); /*Blue*/
}
h5{
	font-size:21px;
	font-weight:600;
	color:rgba(161,23,28,1.0); /*Red*/
}
p, p span{
  color:rgba(99,99,99,1.00);
  font-size: 5.5vw;
  line-height:150%;
  }
.bold{  
  font-weight:bold;
}
.inline-link{
  color:inherit!important;
  font-size:inherit !important;
  text-decoration: underline!important;
}
/* pl/product.php — People Also Ask section title bar (Nationwide blue, white text) */
.paa-section-title{
  background:rgba(3,81,161,1.00);
  color:rgba(255,255,255,1.00);
  padding:10px 15px;
  margin:0;
}
/* pl/product.php — People Also Ask accordion: question bars always blue, square corners */
#paaAccordion,
#paaAccordion .accordion-item,
#paaAccordion .accordion-button,
#paaAccordion .accordion-collapse,
#paaAccordion .accordion-body{
  border-radius:0!important;
}
#paaAccordion .accordion-button{
  background:rgb(145 49 49) !important;
  color:rgba(255,255,255,1.00)!important;
  box-shadow:none;
}
#paaAccordion .accordion-button::after{
  filter:brightness(0) invert(1);
}
#paaAccordion .accordion-button:focus{
  box-shadow:none;
  border-color:rgba(3,81,161,1.00);
}
/*#------NEW NAVIGATION-------------------------------------------------------------------------------------------*/
@media (min-width: 100px){
/*#------NAVIGATION CSS-------------------------------------------------------------------------------------------*/
.open-nav{
  padding-top:7px;
  text-align: center;  
}
.open-nav i{
  font-size:24px;
}
.navi .nav{
  display:flex;
}
.navi li{
  list-style:none;
  flex-grow: 1;
}

.navi{
  flex-direction: row;
  margin-top:2vw;
}
/* Legacy pre-naz-nav.css sliding-panel mobile nav system (.mobile-nav,
   .mobile-nav-top, .site-cover, .cont, .top-nav, .products, .back) removed
   2026-08-11 — confirmed dead (no matching HTML anywhere in the current
   DB-driven nav) and was actively overriding naz-nav.css's current .mobile-nav
   rules since this file loads after it, including the overflow:hidden that
   was blocking the mobile nav from scrolling when fully expanded. All current
   mobile nav styling lives in naz-nav.css; color/spacing overrides for this
   site go through the --naz-nav-* custom properties at the top of this file. */

}
@media (min-width:100px){
/*Design for 326------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.header{
	top:0;
	background:rgba(13,16,36,1.00);
	color:rgba(255,255,255,1.00);
	position:relative;
	z-index:1000;  
  height:65px;
}
.nationwide-logo{
  width: 80px;
  height:54px;
}
.company-name, .dual-color{
  text-align: center;
}
.company-name h2{
  font-weight:bold;
	font-family:"niveau-grotesk-small-caps", sans-serif	;
  font-size:13px;
  color:rgba(255,255,255,1.0);
  margin-top:10px;
}
.dual-color h2{
	display:inline;
  font-size:5.5vw; 
  margin-left: 0px;
  margin-right: 2px;  
}
.red-drop{
	color:rgba(158,208,241,1.00);	
	text-shadow:-1px 1px rgba(212,30,37,1.00);
}
.blue-drop{
	font-style:italic;
	color:rgba(212,30,37,1.00);
	text-shadow:-1px 1px rgba(158,208,241,1.00);
	margin-left:-10px;
	margin-right:0px;
}
.the{
  margin-right:10px;
}
.ceramic{
  display:none;
  margin-top:5px;
}
.mnh #logo-words{
  margin-top:-40px;
}
.mnh h5{
  line-height: 18px;
}
.mnh .nationwide-logo{
height:auto;
}
.top-phones{
  margin-top:10px;
}
.phones {
	text-align:center;
}
.phones a{
	color:rgba(255,255,255,1.0);
	font-size:28px;	
	font-family: "fira-sans", sans-serif;
  font-weight:bold;  
}	
.us-phone{
  display:none;
}

.tagline h3 {
  margin-top: 8px;	
	font-family: 'Orbitron', sans-serif;
	font-size:3.5vw;			
  letter-spacing: 2px;
  text-align: center;
  color:rgba(255,255,255,1.0);
}
.navi{
  z-index: 200;
  position: relative;
  min-height:34px;
}
.navi i{
  cursor: pointer;
}

.toggle{
  padding:10px;
  color:rgba(255,255,255,1.0);
  cursor: pointer;  
}.mobile-nav{
  display:none
}
.dnav li{
	list-style:none;
	margin:0;
}
.dnav a{
  display: block;
  color:rgba(255,255,255,1.00);
  padding-top:15px;
  padding-bottom:15px;
  font-size:15px;
  text-decoration: none;
  font-weight:700;
  border-bottom: solid 1px rgba(255,255,255,.3);
}
  .dropdown{
  top:100%;
	overflow:hidden;
	background:rgba(23,155,224,100);
	width:100%;
	max-height:0;
	text-align:center;
	transition:max-height .25s ease-out;
}.home-product-words{
  text-shadow: 0 0 5px rgba(0,0,0,1.00);
}.permakote, .enviro, .shingle-sealer, .acrathane{
  overflow: hidden;
	opacity: 1.0;	
	background-position:center !important;
	background-size:cover !important;
	transition:opacity 1s ease;
  padding:15px;
}
.permakote{
	background:url("../images/homepage-backgrounds/permakote-temp-backgrounds.jpg");
}
.enviro{
	background:url(../images/homepage-backgrounds/enviro-temp-backgrounds.jpg);
}
.shingle-sealer{
	background:url(../images/homepage-backgrounds/shingle-sealer-temp-background.jpg);
}
.acrathane{
	background:url(../images/homepage-backgrounds/acrathane-temp-background.jpg);
}
.enviro,.acrathane{
	display:none;
}
.home-product-right{
	display:none;	
}
.home-product-logo-image img {
  padding-top:15px;
  padding-bottom:15px;
  max-width:100%;
}
.banner-bump p{
  color:rgba(255,255,255,1.0);
  font-size:5vw;
  padding-top:15px;
  padding-bottom:15px;
}
.nationwide .banner-bump{
  padding:0 !important;
}.banner-button a{
  display:inline-block;
  text-align: center;
  color: rgba(255,255,255,1.00);
  font-family: "niveau-grotesk-small-caps", sans-serif;
	padding:0 15px;
  width:100%;
	font-size:5vw;
	font-style:italic;
	text-decoration:none;
	font-weight:bold;
}

.permakote a{
	background:rgba(195,15,11,1.00);
	border:solid 1px rgba(255,0,4,1.00);
	border-radius:5px;
}
.enviro a{
	background:rgba(55,132,18,1.00);
	border:solid 1px rgba(85,255,0,1.00);
	border-radius:5px;
}
.shingle-sealer a{
	background:rgba(39,39,39,1.00);
	border:solid 1px rgba(0,0,0,1.00);
	border-radius:5px;
}
.acrathane a{
	background:rgba(18,41,159,1.00);
	border:solid 1px rgba(47,81,255,1.00);
	border-radius:5px;
}
.deck-guardian a{
	background:rgba(106,75,20,1.00);
	border:solid 1px rgba(188,161,11,1.00);
	border-radius:5px;
}
.home-product-words{
  font-size:5vw;
  line-height:150%;
  color: rgba(255,255,255,1.0);
}
.offer{
	width:100%;
	background:linear-gradient(rgba(255,0,0,1.0),rgba(127,31,31,1.0));
	text-align:center;
  transition:all .5s ease-in;
}
.offer h2{
  margin:0;
	color:rgba(255,255,255,1.00);
	text-shadow:0 1px 10px rgba(0,0,0,1.00);
	font-family: "niveau-grotesk-small-caps", sans-serif;
	font-weight:bold;
  transition:all .5s ease-in;  
	font-size:5vw;
	padding:15px;
}
.vocfree{	
	display:none;
}
.products{
	display:none;
}
.welcome-box{
	padding:2% 0;
}
.welcome-logo{
	margin-top:4%;
}
.welcome-logo img{
	max-width:85%;	
}
.inline-cn h1{
  font-weight:bold;
	font-family:"niveau-grotesk-small-caps", sans-serif;
  font-size: 20px;
  letter-spacing: -1px;
}
.welcome-words{
	padding:2% 1%;
}
.welcome-statement p{
	font-size:4vw;
  line-height: 170%;
	padding:2% 2%;
}
.blog-button, .video-button{
  text-align: center;
  padding:10px 15px;
  margin-bottom:5px;
}
.blog-button{
  background-color:rgba(0,0,255,1.0);
}
.video-button{
  background-color:rgba(255,0,0,1.0);
}
.blog-button h2 a,.video-button h2 a{
  font-size:6vw;
  display: block;
  color:rgba(255,255,255,1.0);
	font-family:"niveau-grotesk-small-caps", sans-serif;
	font-weight:900;
	text-shadow:0 2px 3px rgba(0,0,0,.45);	
  margin-top:5px;
  margin-bottom:9px;
  transition:all .25s ease;
}
.blog-feature{
  background: linear-gradient(90deg, rgba(1,69,139,1), rgba(4,119,237,1));
  color: rgba(255,255,255,1);
}
.blog-feature p{
  color:rgba(255,255,255,1.0)!important;
}
.blog-feature h4 a{
  color:rgb(149 202 255)!important;
}
.blog-feature-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 2rem 1.5rem;
}
.blog-feature-text h3{
	font-family:"niveau-grotesk-small-caps", sans-serif;
  font-weight: 900;
  font-size:1.75rem;
  color: rgb(218 158 160);
}
.blog-feature-text h4{
  font-size:1.3rem;
}
.blog-feature-img{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.5rem;
}
.blog-feature-img img{
  border-radius: 8px;
  aspect-ratio: 16/9;
  width: 100%;
  object-fit: cover;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
.btn-blog-feature{
  background-color: rgba(255,255,255,1);
  border-color: rgba(255,255,255,1);
  color: rgba(3,81,161,1);
  font-weight: 700;
}
.btn-blog-feature:hover{
  background-color: rgba(235,242,250,1);
  border-color: rgba(235,242,250,1);
  color: rgba(1,69,139,1);
}
.new-header{
  padding-top:10px;
  padding-bottom:10px;
  border-bottom:solid 5px rgba(3,81,161,1);
}
.perma-home h1 {
  font-size: clamp(24px, 3.5vw, 70px);
  color:rgba(3,81,161,1);
  line-height:95%;
  margin-bottom:20px;
}
.new-header h3 {
  font-size: clamp(31px, 3.5vw, 70px);
  color:rgba(3,81,161,1);
  line-height:95%;
  margin-bottom:20px;
}
.new-header h5{
  font-weight:200;
  font-size: clamp(13px, 1.5vw, 28px);
  line-height: 125%;
  color:rgba(0,0,0,1);
  margin-bottom:20px;  
}
.new-header .btn{
  border-radius:0px;
  width:95%;
}
.banner-buttons{
  text-align: center;
}
.banner-buttons a{
  font-weight:bold;
  text-transform: uppercase;
  font-size:3vw;
  padding-top:7px;
  padding-bottom:7px;
}
.banner-buttons .btn1{
  background-color:rgba(3,81,161,1);
  border-color:rgba(1,69,139,1);
}
.banner-buttons .btn2{
  background-color:rgba(212,30,37,1);
  border-color:rgba(172,21,27,1);
}
.banner-buttons .btn3{
  background-color:rgba(16,180,39,1);
  border-color:rgba(12,131,29,1);
}
.photo-section{
  padding-top:15px;
  padding-bottom:15px;  
  background: rgb(247,243,241);
  background: linear-gradient(90deg, rgba(247,243,241,1) 0%, rgba(231,217,206,1) 100%);
}
.home-photo-title{
  background:rgba(255,255,255,1);
}
.home-photo-new{
  width:100% !important;
}
.ml-brass{
  background-color: rgba(172,97,39,1.0);
  color:rgba(255,255,255,1.0);
  text-shadow: 0 0 3px rgba(0,0,0,1);
  text-align: center;
  padding-top:150px;
}
.ml-bronze{
  background-color: rgba(135,65,29,1.0);
  color:rgba(255,255,255,1.0);
  text-shadow: 0 0 3px rgba(0,0,0,1);
  text-align: center;
  padding-top:150px;
}
.ml-copper{
  background-color: rgba(155,42,28,1.0);
  color:rgba(255,255,255,1.0);
  text-shadow: 0 0 3px rgba(0,0,0,1);
  text-align: center;
  padding-top:150px;
}
.ml-gold{
  background-color: rgba(217,178,49,1.0);
  color:rgba(255,255,255,1.0);
  text-shadow: 0 0 3px rgba(0,0,0,1);
  text-align: center;
  padding-top:150px;
}
.ml-silver{
  background-color: rgba(103,109,105,1.0);
  color:rgba(255,255,255,1.0);
  text-shadow: 0 0 3px rgba(0,0,0,1);
  text-align: center;
  padding-top:150px;
}
/*FOOTER
-------------------------------------------------- */
.footer{
	background:rgba(55,55,55,1.00);
}
.footer .navigation{
	display:none;
}
.logo-box-footer{
  padding: 5px;
	width:13%;
	float:left;
	text-align: center;
}
.fine-print, .fine-print a{
	margin-top:2%;
	color:#FFFFFF;
	font-size:3.5vw;
}
.social{
  margin-bottom:15px;
}
.social div{
  margin-top:10px;
}
.social-media div img{
	display:inline;
}
.footer-phone{
	margin-bottom:5px;
	margin-top:5px;  
	text-align:center;	
}
.footer-phone a, .footer-phone .request-info{
	color:rgba(255,255,255,1.00) !important;
	font-family: "fira-sans", sans-serif;  
  font-weight:bold;
	font-size:6vw;	
  text-decoration:none;
}
.logo-box-footer{
	display:none;
}


/*GLOBAL PRODUCT PAGES
-------------------------------------------------- */
.banner-bump{
	background-position: center!important;
	background-size:cover!important;
	padding:15px 15px;
	text-align:center;
}
.banner-bump img{
  max-width:65%;
}
.banner-bump h1, .misc-content-banner h1{
	color:rgba(255,255,255,1.0);
	font-size:10vw;
	font-weight:900;
	font-style:italic;
  font-family: "niveau-grotesk", sans-serif;
  text-align: center;
  margin-bottom:0;
}
.banner-bump h4{
  color:rgba(255,255,255,1.0);
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-weight: 300;
}
.product-box{
  padding:1%;
	margin:1%;
}

/* CATEGORY HELP TILE
   ---------------------------------------------------------------
   "Need help choosing?" CTA rendered inline in the product grid on
   category pages (p/prod-cat.php), sitting at position 9 so it fills
   the empty third slot the lg breakpoint leaves after 8 cards.

   Its grid box model MUST track .product-box at EVERY breakpoint —
   .product-box is redefined at 576-767px and again at 768px+ and the
   margin changes to 0. Matching only this base rule makes the tile
   wider than a card at desktop and pushes it off the row.
   The matching overrides live beside those rules further down.

   It deliberately does NOT use the .product-box class: .product-box h2
   forces black text and .product-box a forces the green button at 75%
   width, both of which outrank a plain class.
   --------------------------------------------------------------- */
.cat-help-tile{
	padding:1%;
	margin:1%;
	display:flex;
}
.cat-help-tile-inner{
	width:100%;
	border-radius:5px;
	background: linear-gradient(135deg, rgb(145, 49, 49) 0%, rgba(3, 81, 161, 1.00) 100%);
	box-shadow: 0 0 10px 0 rgba(132,132,132,.50);
	color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:8% 7%;
}
.cat-help-tile-icon{
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height:1;
	margin-bottom:14px;
	opacity:.92;
}
.cat-help-tile-head{
	color:#fff !important;
	font-size: clamp(1.15rem, 2.1vw, 1.5rem);
	font-weight:700;
	line-height:1.2;
	margin:0 0 10px;
	text-align:center;
}
.cat-help-tile-rule{
	width:44px;
	height:2px;
	background:rgba(255,255,255,.45);
	margin:0 0 18px;
}
.cat-help-tile-sub{
	color:rgba(255,255,255,.93);
	font-size: clamp(.92rem, 1.35vw, 1.05rem);
	line-height:1.45;
	margin:0 0 20px;
}
.cat-help-tile-actions{
	display:flex;
	flex-direction:column;
	gap:10px;
	width:100%;
}
/* Green buttons copied from .product-box a so the tile speaks the same
   button language as every product card. */
.cat-help-tile-actions a,
.cat-help-tile-actions a:link,
.cat-help-tile-actions a:visited{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	width:100%;
	font-size: clamp(.9rem, 1.3vw, 1.05rem);
	padding:0.6rem 0.75rem;
	background:rgba(21,200,63,1.00);
	color:rgba(255,255,255,1.00);
	border:0;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,.50);
	font-weight:bold;
	text-decoration:none;
}
.cat-help-tile-actions a:hover,
.cat-help-tile-actions a:focus{
	background:rgba(60,154,64,1.00);
	color:rgba(255,255,255,1.00);
}

/* ---------------------------------------------------------------
   INLINE CTA EMBEDS  (.nwc-cta*)
   Rendered by class.ctablocks.php from ##CTA## / ##BUY## /
   ##CONTACT## / ##CALL## tokens in blog post and page content.

   Same gradient panel and same green buttons as .cat-help-tile
   above, so an author-dropped CTA in a blog post matches the CTA
   in the product grid. Base rules are mobile-first (buttons
   stacked); the row layout lives in the 768px block beside the
   .cat-help-tile overrides.

   .nwc-cta-btn is styled to work BOTH inside the block and on its
   own inside a paragraph, since the single-button tokens render a
   bare <a> so they stay valid mid-sentence.
   --------------------------------------------------------------- */
.nwc-cta{
	margin:1.5rem 0;
	display:flex;
}
/* Every inner selector is scoped under .nwc-cta on purpose. This block is
   dropped INSIDE .blog-post-content, whose own `.blog-post-content h2` and
   `.blog-post-content p` rules (specificity 0,1,1) outrank a lone class —
   they were adding a border-bottom under the heading and ~2rem of stray
   margin. Two classes (0,2,0) wins cleanly. */
.nwc-cta .nwc-cta-inner{
	width:100%;
	border-radius:5px;
	background: linear-gradient(135deg, rgb(145, 49, 49) 0%, rgba(3, 81, 161, 1.00) 100%);
	box-shadow: 0 0 10px 0 rgba(132,132,132,.50);
	color:#fff;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	/* Fixed padding, not a percentage — a % here is read against the
	   container WIDTH, so the band grew taller the wider the page got. */
	padding:18px 20px;
	gap:9px;
}
.nwc-cta .nwc-cta-head{
	color:#fff !important;
	font-size: clamp(1.1rem, 1.9vw, 1.35rem);
	font-weight:700;
	line-height:1.2;
	text-align:center;
	margin:0;
	padding:0;
	border:0;
}
.nwc-cta .nwc-cta-sub{
	color:rgba(255,255,255,.93) !important;
	font-size: clamp(.88rem, 1.25vw, 1rem);
	line-height:1.4;
	margin:0;
}
.nwc-cta .nwc-cta-actions{
	display:flex;
	flex-direction:column;
	gap:10px;
	width:100%;
	margin-top:2px;
}
.nwc-cta-btn,
.nwc-cta-btn:link,
.nwc-cta-btn:visited{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	font-size: clamp(.9rem, 1.3vw, 1.05rem);
	padding:0.6rem 1rem;
	background:rgba(21,200,63,1.00);
	color:rgba(255,255,255,1.00) !important;
	border:0;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,.50);
	font-weight:bold;
	text-decoration:none !important;
	/* Keeps the phone number from wrapping onto two lines inside the pill,
	   which is what the category band does at narrow widths. */
	white-space:nowrap;
}
.nwc-cta-btn:hover,
.nwc-cta-btn:focus{
	background:rgba(60,154,64,1.00);
	color:rgba(255,255,255,1.00) !important;
	text-decoration:none !important;
}
/* Inside the block the buttons fill the panel width; standing alone in a
   paragraph they size to their own content. */
.nwc-cta-actions .nwc-cta-btn{
	width:100%;
}

.product-box>div{
	padding:1%;
	border-radius: 5px;
	border: none;
	text-align: center;
	box-shadow: 0 0 10px 0 rgba(132,132,132,.50);
  overflow:hidden;
}
.product-box h2{
	margin:3% 0 0 0 ;
	font-size:5.9vw;	
	font-weight:bold;
  color:rgba(0,0,0,1.0);
  text-align: center;
  margin-bottom:5px;
}
.product-box h3{
  font-size:4.3vw;
	line-height:150%;
	color: rgba(54,54,54,1.00);
	font-style:italic;
  padding:5px 10px 5px;
  width:75%;
  float:right;
  text-align: left;
  font-weight:400;
  min-height: 29vw;
}
.product-box-image{
	margin:0 auto;
  width:22%;
  float:left;
  padding-top:15px;
}
.product-box-image img{
	width:100%;
}
.product-box a{
	font-family: "niveau-grotesk", sans-serif;
	color:rgba(255,255,255,1.00);
	border:rgba(0,255,5,1.00);
	background:rgba(21,200,63,1.00);
	font-weight:bold;
	text-decoration:none;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,.50);
  display:inline-block;
	padding:2%;
  width:75%;
  margin:5px auto 10px;
  font-size:5.5vw
}

.product-box a:hover{
	background:rgba(60,154,64,1.00);
}
/* ADPAGE PAGE BANNER
-------------------------------------------------- */
.ad-page-content-banner{
	background:url(../images/site-banners/ad-page-roof-coating-backer.webp) no-repeat;
  background-position:center;
}
/* LIQUITARP PAGE BANNER
-------------------------------------------------- */
.liquitarp-banner{
	background:url(../images/site-banners/liqui-tarp-roof-storm-damage-repair.webp) no-repeat;
  background-position:center;

}

/* ROOF COATINGS PRODUCT PAGE
-------------------------------------------------- */
.roof-coatings-content-banner{
	background:url(../images/site-banners/roof-coatings.webp) no-repeat;
  background-position:center;

}

/* ROOF PRIMERS PRODUCT PAGE
-------------------------------------------------- */
.roof-primers-content-banner{
	background:url(../images/site-banners/roof-primers-tape-caulk.webp) no-repeat;
  background-position:center;

}

/* ACRYLOCOAT COATINGS PRODUCT PAGE
-------------------------------------------------- */
.acrylocoat-content-banner{
	background:url(../images/site-banners/acrylocoat.webp) no-repeat;
  background-position:center;

}
.acrylocoat-content-banner h1{
	font-family: "niveau-grotesk", sans-serif;
	font-size:7vw;
}

/* CONCRETE COATINGS PRODUCT PAGE
-------------------------------------------------- */
.concrete-coatings-content-banner{
	background:url(../images/site-banners/basement-concrete-waterproofing.webp) no-repeat;
  background-position:center;

}

/* EXTERIOR PAINTS PRODUCT PAGE
-------------------------------------------------- */
.exterior-paints-content-banner{
	background:url(../images/site-banners/exterior-products.webp) no-repeat;
  background-position:center;

}

/* FLOOR COATINGS PRODUCT PAGE
-------------------------------------------------- */
.floor-coatings-content-banner{
	background:url(../images/site-banners/floor-coatings.webp) no-repeat;
  background-position:center;

}

/* GREEN PRODUCT PAGE
-------------------------------------------------- */
.green-products-content-banner{
	background:url(../images/site-banners/green-products.webp) no-repeat;
  background-position:center;

}

/* INTERIOR PRODUCT PAGE
-------------------------------------------------- */
.interior-products-content-banner{
	background:url(../images/site-banners/interior-products.webp) no-repeat;	
  background-position:center;

}

/* METAL INDUSTRIAL PRODUCT PAGE
-------------------------------------------------- */
.metal-industrial-content-banner{
	background:url(../images/site-banners/metal-industrial.webp) no-repeat;	
  background-position:center;

}

/* ELASTOMERICS PRODUCT PAGE
-------------------------------------------------- */
.elasto-content-banner{
	background:url(../images/site-banners/specialty-coatings.webp) no-repeat;	
  background-position:center;

}

/* FLOOR COATINGS PRODUCT PAGE
-------------------------------------------------- */
.tex-coatings-content-banner{
	background:url(../images/site-banners/texture-coatings.webp) no-repeat;	
  background-position:center;

}

/* WALL COATINGS PRODUCT PAGE
-------------------------------------------------- */
.wall-coatings-content-banner{
	background:url(../images/site-banners/wall-coatings.webp) no-repeat;	
  background-position:center;

}

/* WOOD PRODUCT PAGE
-------------------------------------------------- */
.wood-content-banner{
	background:url(../images/site-banners/wood-stain-clear.webp) no-repeat;	
  background-position:center;

}

/* MISC SITE PAGE
-------------------------------------------------- */
.misc-content-banner{
	background:url(../images/site-banners/Image_Header_Bldg.webp) no-repeat;
  background-position:center;

}


/* ENERGY STAR SITE PAGE
-------------------------------------------------- */
.energy-star-content-banner{
	background:url(../images/site-banners/energy-star.webp) no-repeat;	
  background-position:center;

}

/* TOOLS AND MARKETING SITE PAGE
-------------------------------------------------- */
.tools-content-banner{
	background:url(../images/site-banners/custom-label-image-header.webp) no-repeat;
  background-position:center;
}
/* BUSKOTE
-------------------------------------------------- */
.bus-kote{
  background:url(../images/site-banners/bus-kote.webp) no-repeat;
  background-position:center;
}
/* SHINGLE SEALER
-------------------------------------------------- */
.shingle-sealer{
  background:url(../images/site-banners/shingle-sealer.webp) no-repeat;
  background-position:center;
}
/* FLAT ROOF
-------------------------------------------------- */
.flat-roof-coating{
  background:url(../images/site-banners/flat-roof.webp) no-repeat;
  background-position:center;
}
/* EPOXY
-------------------------------------------------- */
.epoxy{
  background:url(../images/site-banners/epoxy.webp) no-repeat;
  background-position:center;
}

.tools-content-banner h1{
	font-family: "niveau-grotesk", sans-serif;
	font-size:7vw;
}
.mobile-cover-header{
  background-size:cover;
}
.misc-content-banner h1{
	font-family: "niveau-grotesk", sans-serif;
	font-size:7vw;
}
.mobile-header-words h1{
  color:rgba(255,255,255,1); 
  font-weight:600;
  font-size: 6vw;
}
.mobile-header-words h4{
  color:rgba(255,255,255,1); 
  font-weight:300;
  font-size: 3vw;
}
.mobile-header-bucket{

}
.bucket-update-image a{
  background:none; 
  box-shadow: none;
}
/* PRODUCT PAGE
-------------------------------------------------- */
.product-page-box{
	overflow:hidden;
	padding-top:25px;
	padding-bottom:25px;
}
.permakote-page .blue{
  font-size:7vw;
}
.product-words p{
  font-size:5vw;
  line-height:190%;
}
.all-caps{
	text-transform: uppercase;
}
.catalog-download{
	margin-top:2%;
}
/* PRICING PAGE
-------------------------------------------------- */
.pricing .bot-red{
	letter-spacing: 0px;
}
.pricing p, .contact-words p, .hpp, p, p span{
  color:rgba(99,99,99,1.00);
  font-size: clamp(16px, 5.5vw, 18px);
}
.pricing h4{
  font-size:6vw;
  font-weight:700;
  padding-top:15px;
}
.pricing form h4{
  padding:5px 15px 0;
}
.pricing h2, .hp2{
 font-size:9vw; 
}
.hp2{
  margin-top:25px;
}
.pricing a{
  margin-top:5px;
  width:100%;
}
.bottom-form div{
  width: 100%;
  float: left;
  margin: 1% 0%;
  text-align: center;
  padding: 0 15px 0;  
}
.bottom-form input{
  width:100%;
  margin-top:5px;
  margin-bottom:5px;
}
.testing h4{
  padding-top:0px;
}
.pricing hr{
  max-width:85%;
}
/* REFERANCE LABEL STUFF
-------------------------------------------------- */
.referance hr{
	border-color:rgba(124,124,124,1.00);
}
.referance h3{
  font-size:8vw;
}
.referance h4{
  font-size:6vw;
	font-style:italic;
}
.referance h5{	
  font-size:4vw;
	font-style:italic;
}
.referance p{
	font-size:140%;
	line-height:140%;	
}
/* CONTACT STUFF
-------------------------------------------------- */
.contact-words h2{
  font-size:8vw;
}
/* ENERGY STUFF
-------------------------------------------------- */
.energy hr{
	border-color:rgba(124,124,124,1.00);
}
.energy{
	padding:2%;	
}
/* PRIVATE LABEL STUFF
-------------------------------------------------- */
.custom hr{
	border-color:rgba(124,124,124,1.00);
}
.custom h3{
	font-size:180%;	
	font-family: "niveau-grotesk", sans-serif;
	color:rgba(84,114,255,1.00);
	font-weight:900;
}
.custom h5{
	margin-top:1%;	
	font-weight:400;
	font-size:11px;
	font-style:italic;
	color:rgba(23,86,32,1.00);
}
.custom p, .custom ul li{
	font-size:6vw;
	line-height:160%;	
}
.custom h4{
	margin-top:1%;	
	font-size:4vw;
	font-style:italic;
	color:rgba(23,86,32,1.00);
}
.custom a{
  color: rgba(255,255,255,1.0)!important;
  width:90%;
  margin:0 auto 15px;
  font-size:7vw
}

/* BLOG PAGE
-------------------------------------------------- */
.blog h2{
  font-size:9vw;
}
.blog p{
  font-size:5vw;
}
.blog .mb-2{
  margin-bottom:30px!important;
}

.blog-text img{
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0,0,0,1.0);
}
.blog-text p span{
  font-size: 20px !important;
}
.modal-dialog {
  max-width: 800px;
}
/*FLOATING CONTACT FORM*/

.floating-contact{
  position: fixed;
  width:100%;
  top:70px;
  right:-100%;
  background:rgba(255,255,255,.95);
  padding:200px 15px 15px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border:solid 3px rgba(31,202,8,1.0);
  z-index: 1000;
}
@-moz-keyframes myfirst /* Firefox */ {
    0% {background:rgba(9,113,9,1.0);}
    50% {background:rgba(98,212,7,1.0);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {background:rgba(9,113,9,1.0);}
    50% {background:rgba(98,212,7,1.0);}
}

.float-title{
  color:rgba(23,184,233,1.00);
  font-size:290%;
  font-weight: bold;
  text-align: center;
  padding:0 0 10px;
}
.nda{
  font-size:100%;
  text-align: center;
  color:rgba(255,0,0,1.0) !important;
}
.floating-contact-form .bottom-form h2{
  color:rgba(128,3,5,1.00);
  font-size:135%;
  font-weight: bold;
}
.required-green{
	box-shadow:0 0 10px rgba(0,155,0,.60);	
	border-color:rgba(78,255,80,.30);	
}
.floating-contact-form .btn{
  font-size:6vw;
}
.sent{
  right:0px;
}
/* --VIDEO PAGE-- */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
box-shadow: -1px 1px 3px rgba(0,0,0,.60);
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-page .product-box h2,.video-page .product-box h3, .video-page .product-box-image,.video-page .product-box a{
  width:100%;
}
.video-page .product-box-image{
  height:auto;
}
.video-page  .product-box h2{
float:none;
}
.body-form{
  width:85%;
  margin:0 auto;
}
.new-product-page h1{
  color:rgba(3,81,161,1.00);
  font-size:6vw;
  font-weight:700;
}
.new-product-page h2{
  color:rgba(56,116,177,1.00);
  font-size:4.6vw;
  font-weight:400;
}
.new-product-page .list-header{
  font-size:4vw;
  font-weight:700;
}
.new-product-page .secondary{
  font-size:4vw;
  padding-top:15px;
  padding-bottom:15px;
  font-style:Italic;
  text-align: center;
}
.new-product-page h3{
    font-size:5vw;
}
.new-product-page h4{
	font-size:4.5vw;
}
.new-product-page .tab-pane{
  font-size:4vw;
}
.new-product-page .list-group-item-action{
  font-size:3vw;
}
.new-product-page .white-box .secondary{
  font-style: normal;
}

.ad-back-top h1, .ad-back-top h5, .ad-back-top h2, .ad-back-top h3{
  color:rgba(255,255,255,1.0);
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.ad-back-top h1{
  font-size: 12vw;
  line-height:90%;
  padding-top:20%;
  padding-bottom:1%;
}
.ad-back-top h2{
  color:rgba(52, 128, 235 ,1.0);  
  font-size: 8vw;
  font-weight: 600;
  padding-bottom:15%;
  padding-left: 5%;
  padding-right: 5%;  
}
.ad-back-top h3{
  color:rgba(109, 192, 237,1.0);  
  font-size:5.5vw;
  font-weight:400;
  padding-bottom:0%;

}
.ad-back-top h4{
  color:rgba(201, 121, 121 ,1.0);  
  font-size:3.5vw;
  font-weight:400;
  font-style:italic; 
  padding-bottom:0%;

}
.ad-back-top h5{
  color:rgba(255,255,255 ,1.0);  
  font-weight:200;
  font-size:2vw;
}

.ad-copy h2{
  font-size:6vw;
  font-weight:600;
}
.ad-copy h3{
  font-weight:400;
  font-size:5vw;
}
.ad-copy h4{
  font-weight:400;
  font-size:3vw;
}
.ad-copy h5{
  font-weight:200;
  font-size:2vw;
}
.ad-copy ul li{
  font-size:6vw;
  padding-bottom:5%;
}
.ad-group-right{
  background:url("../images/landing-page/roof-sealer-background.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}
.ad-group-right h2{
  color:rgba(141,183,227,1);
  text-shadow: 0 2px 4px rgba(0,0,0,.5);  
}
.ad-group-right h3{
  color:rgba(252,144,144,1);
  text-shadow: 0 2px 4px rgba(0,0,0,.5);  
}
.ad-group-right ul li{
  color:rgba(255,255,255,1.0);
}
.metal-page{
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.updateProds .product-box h3{
  float:left !important;
}
.mobile-photo{
  display:inline;
}
.desktop-photo{
  display:none;
}
.tri-home-button .btn-primary{
  font-size:6vw!important;
}
.company-name h1{
  color: #FFF;
  text-shadow: 0px 2px 4px #000;
  font-size:8.5vw;
}
.perma-products{
  padding-top:7%;
  margin-bottom:7%;
  background:url("../images/permakote-backer.jpg");
  background-repeat: no-repeat;
}
.perma-home{
  padding-top:1%;
  border-radius: 5px;
  background:rgba(255,255,255,.7);
  padding-bottom:1%;
}
.perma-home p{
  font-size:4vw;
  color:rgba(0,0,0,1.0);   
}
.call-now-click{
  color:rgba(255,255,255,1)!important;
  cursor: pointer;
  font-size:10vw;
  font-weight:700;
}
.page-bucket{
  max-width:70%!important;
}
.contact-page-phone{
  font-size:6vw !important;
}
.graser-image-update{
  width:25%;
  padding-top:0px;
}
.graser-image-update a{
  padding:0px;
  width:auto;
}
.hero2025{
    background-size: cover; 
    background-position: center; 
}
.hero-title{
    margin:0 0 10px 0; 
    padding: 0; 
    color: rgba(255, 255, 255, 1);
    font-weight: 800; 
    font-size: 10vw;
}
.hero-warr{
    margin:0 0 5px 0; 
    padding: 0; 
    color: rgba(255, 255, 255, 1); 
    font-weight: 600; 
    font-size: 8vw;
}
.hero-spread{
    margin:0 0 5px 0; 
    padding: 0;
    height: auto; 
    color: rgba(255, 255, 255, 1); 
    font-weight: 400; 
    font-size: 7vw;
}
.hero-text{
    color: rgba(255, 255, 255, 1); 
    font-weight: 200; 
    font-size: 4vw;
}
.hero-bucket{
    max-width:60% !important;
}
.product-page-recommendations h2{
  font-size: 6vw;
}
.trust-bar {
	background-color: var(--naz-nav-dropdown-bg, #0351a1);
	padding: 0 15px 15px;
}
.trust-bar-item{
    margin-top:15px;
}
.trust-bar-copy{
  color:rgba(255,255,255,1) !important;
}
.trust-bar-copy span{
  font-weight:600; 
  font-size:4vw;
  margin-bottom:0;
}
.trust-bar-copy p{
  font-size:3vw;
  font-weight:200;
  color:rgba(255,255,255,1) !important;
  margin-bottom:0;
}
.infographic{
  font-family: "niveau-grotesk", sans-serif;
  border: solid 5px rgba(7,21,86,1) !important;
}
.headline-1, .headline-2, .headline-3{
  color:rgba(7,21,86,1) !important;
  font-weight:600 !important;
  text-transform:uppercase;
  margin:0;
  padding:0; 
}
.headline-4{
  color:rgba(3,48,246,1) !important;
  font-weight:600 !important;
  text-transform:uppercase;
  margin:0;
  padding:0;
  line-height: 12vw;
}
.headline-1{
  padding-top:25px;
  font-size:10vw!important;
  line-height: 12vw; 
}
.headline-2{
  font-size:8vw !important;
  line-height: 12vw;
}
.headline-3{
  font-size:10vw!important;
  line-height: 12vw;   
}
.headline-4{
  font-size:10vw!important;
  line-height:12vw;  
}
.infographic .line {
  flex: 1;
  height: 3px;
  background: rgba(7,21,86,1);
}
.infographic .headline-2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.infographic .intro-text{
  font-size:4vw;
  color:rgba(33,37,218,1);
  font-style:italic;
  padding:0;
  margin:0;
}
.peace-badge{
  display:flex;
  align-items:center;
  border-radius:10px;
  background: rgba(7,21,86,1);
  margin-bottom:10px;
}
.peace-badge .shield-1, .peace-badge .shield-2{
  color:rgba(255,255,255,1) !important;
}
.peace-badge .shield-1{
  font-size:3.75vw;
  font-weight:600;
  margin:0;
  padding:0;
}
.peace-badge .shield-2{
  font-size: 4.5vw;
  font-weight:300;
  margin:0;
  padding:0;
}
.table-wrap, .test-params{
  padding:0px;
  border-right:solid 1px rgba(0,0,0,.5);
  border-left:solid 1px rgba(0,0,0,.5);  
}
.table-holder .section-header{
  background: rgba(7,21,86,1);
  color:rgba(255,255,255,1);
  font-size:4vw;
  font-weight:600;
  text-align:center;
  margin-top:10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding:5px;
  text-transform:uppercase;
}
.test-params{
  color:rgba(0,0,0,1);
  font-size: 3vw;
  margin-bottom:0px;
}
.infographic .table-wrap {
  overflow-x: auto;
  margin-bottom: 14px;
  padding:5px;
}

.infographic .scrub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.infographic .scrub-table th {
  background: rgb(219, 217, 252);
  color: rgba(7,21,86,1);
  font-weight: 800;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid #b9c2de;
}

.infographic .scrub-table td {
  text-align: center;
  padding: 8px 6px;
  border: 1px solid #b9c2de;
  font-weight: 700;
  color: rgba(7,21,86,1);
}

.infographic .scrub-table td.row-label {
  font-weight: 800;
}

.infographic .loss-bad {
  color: #d32f2f;
  font-weight: 900;
}

.infographic .loss-good {
  color: #2e8b30;
  font-weight: 900;
}
.callout-box{
  border-radius:10px;
  padding:5px;
  color:rgba(255,255,255,1);
  background: rgba(7,21,86,1);  
  font-size:5vw;
}
.callout-box strong{
  font-size:6vw;
}
.infographic .benefits-grid {
  margin-top:10px;
  margin-bottom: 18px;
  position: relative;
}


.infographic .benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(7,21,86,1);
  line-height: 1.3;
  padding:5px;
  margin: 0 auto;  
}

.infographic .benefit-icon {
  flex-shrink: 0;
  display: flex;
}
.infographic .benefit-icon svg {
  width: 26px;
  height: 26px;
}
@media (min-width:768px){
  .infographic .benefit-icon svg {
    width: 3.5vw;
    height: 3.5vw;
  }
}
.infographic .perms-row {
  align-items: center;
}

.infographic .arrows-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.infographic .arrows-graphic .arrow-up {
  color: rgba(1,49,254,1);
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}

.infographic .arrows-graphic .wave {
  width: 70px;
  height: 12px;
  margin-top: 4px;
}
.infographic .perms-badge {
  width: 50vw;
  height: 50vw;
  margin:15px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(7,21,86,1);
  border-radius: 10px;
  color: rgba(7,21,86,1);
  font-weight: 900;
  font-size: 20vw;
  line-height: 1.05;
  padding: 0;
}

.infographic .perms-badge span {
  display: block;
  font-size: 7.5vw;
  letter-spacing: 1px;
}
.infographic .perms-desc{
  color: rgba(7,21,86,1); 
  font-size:1vw;
  font-weight:600;
  line-height:20px; 
}
.photo-pair .blue-border{
  margin-top:10px;
  border-radius: 5px;
  border:solid 1px rgba(0,52,253,1);
}
.photo-header-dark,.photo-header-blue{
  color:rgba(255,255,255,1);
}
.photo-header-dark{
  font-size:5vw;
  font-weight:600;
  background:rgba(0,7,46,1);
  margin-bottom:5px;
  margin-top:5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding:5px;
}
.photo-header-blue{
  font-size:5vw;
  font-weight:600;
  background:rgba(1,49,254,1);
  margin-bottom:5px;
  margin-top:5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding:5px;
}
.infographic img{
  width:100%;
}
.photo-header-dark span,.photo-header-blue span{
  font-size:inherit;
}
.photo-pair img{
  border-radius: 5px;
  margin-bottom:5px;
}
.photo-pair .photo-caption, .penetrate-block .photo-caption{
  font-size: 5vw;
  color:rgba(1,49,254,1);
  font-weight:600;
  padding-bottom:0;
  margin-bottom:0;
}
.penetrate-block .section-header{
  margin-top:15px;
  background: rgba(7,21,86,1);
  color:rgba(255,255,255,1);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;  
  font-size:5vw;
  text-transform:uppercase;
}
.final-tagline{
  color: rgba(7,21,86,1);
  font-size:5vw;
  font-weight:800;
  text-transform:uppercase;
}

/* pl/product.php — Product Review spotlight box.
   One randomly-chosen active review (productReviews table) shown above the
   Technical Data/Description/Uses/Instructions tab nav. Red-to-blue gradient
   matches the site's brand accent pair (same red/blue used on the People
   Also Ask accordion); gold stars are a standalone accent independent of
   that palette (conventional rating-star color). Text switched to white
   with a text-shadow (matching the .ad-back-top pattern elsewhere on this
   page) since the gradient background is too dark for default text color. */
.review-spotlight-box {
	border-radius: 4px;
	background: linear-gradient(135deg, rgb(145, 49, 49) 0%, rgba(3, 81, 161, 1.00) 100%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	padding: 20px 24px;
	margin: 10px 0 20px;
	text-align: center;
}
.review-spotlight-stars {
	font-size: 1.25rem;
	color: #f0ad4e;
	margin-bottom: 10px;
}
.review-spotlight-stars i {
	margin: 0 2px;
}
.review-spotlight-text {
	font-size: 1.1rem;
	font-style: italic;
	color: rgba(255, 255, 255, 1.0);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	margin-bottom: 10px;
}
.review-spotlight-byline {
	font-weight: 700;
	color: rgba(255, 255, 255, 1.0);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	margin-bottom: 0;
}
.review-spotlight-source {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
}

/* color_swatches modular block — crawlable color-name text replacing a flat
   chart image (shingle-roof-coating). Circle color comes from the admin's
   per-swatch hex field via an inline style, validated server-side.
   Sized as a % of its own column (col-1, ~8% of row width) rather than a
   fixed px value — a fixed size overflowed col-1's narrow slot on smaller
   viewports since it was originally built for the much wider col-6/
   col-md-3/col-lg-2 layout this replaced. */
.color-swatch-circle {
	width: 70%;
	max-width: 48px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	margin-bottom: 8px;
}
.color-swatch-name {
	font-weight: 600;
  font-size: 1.8rem;
	line-height: 1.15;
}
}

@media (min-width:300px) and (max-width:768px){
.product-page-box .text-xs-center{
  text-align: center;
}
}
@media (min-width:576px){
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.container{
  max-width:100%;
}
.company-name h2{
  font-size:22px;
}
.dual-color h2 {
  font-size: 4.5vw;
}
.tagline h3{
  font-size:2.5vw;
}
.mobile-nav a, .dnav a {
  font-size: 20px;
}.home-product-words{
  font-size:4vw;
}.banner-button a{
  font-size: 4vw;
}
.offer h2 {
    font-size: 4vw;
}
.inline-cn h1 {
  font-size: 20px;
}
.welcome-statement p {
  font-size: 3.5vw;
}
.blog-button h2 a, .video-button h2 a {
  font-size: 5vw;
}
.footer-phone a, .footer-phone {
  font-size: 4vw;
}
.request-info{
  font-size:25px !important;
  font-weight:bold;
}
.fine-print, .fine-print a {
  font-size: 2vw;
}
.misc-content-banner h1, .banner-bump h1 {
  font-size: 7vw;
}
.product-box h2 {
  font-size: 2.9vw;
}
.product-box h3 {
  font-size: 2.5vw;
}
.product-box a{
  font-size:2.5vw;
}
.permakote-page .blue {
  font-size: 4vw;
}
.product-words p {
  font-size: 2.5vw;
}
.pricing h2, .hp2 {
  font-size: 5vw;
}
.pricing p, .contact-words p, .hpp, p, p span {
  font-size: clamp(16px, 2.5vw, 20px);
}
.pricing h4 {
  font-size: 3vw;
}
.pricing a {
  width: auto;
}
.pricing form{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.referance h3 {
  font-size: 5vw;
}
.referance h4 {
  font-size: 4vw;
}
.referance h5 {
  font-size: 3vw;
}
.blog h2 {
  font-size: 4vw;
}
.blog p {
  font-size: 2.5vw;
}
.floating-contact{
  top:10px;
  padding-top:15px;
  width:400px;
  right:-400px;
}
.floating-contact-form .btn {
    font-size: 3vw;
}
.custom a {
  width: 60%;
  font-size: 4vw;
}
.custom h4 {
 margin-top: 1%;
 font-size: 2.5vw;
}
.new-product-page h1{
  font-size:6vw;
}
.new-product-page h2{
  font-size:4.6vw;
}
.new-product-page .list-header{
  font-size:3.5vw;
}
.new-product-page .secondary{
  font-size:3.5vw;
}
.new-product-page h3{
  font-size:5vw;
}
.new-product-page h4{
	font-size:4.5vw;
}
.new-product-page .tab-pane{
  font-size:2.5vw;
}
.new-product-page .list-group-item-action{
  font-size:2.5vw;
}
.custom p, .custom ul li{
	font-size:3vw;
}
.tri-home-button .btn-primary{
  font-size:3vw!important;
}
.perma-home p{
  font-size:3vw;
}
.call-now-click{
  width: 250px!important;
  font-size: 24px;
  font-weight: 700;
}
.new-header h3 {
  font-size: clamp(31px, 11vw, 70px);
}
.new-header h5 {
  font-size: clamp(13px, 4.5vw, 28px);
}

.ad-back-top h1{
  font-size: 8vw;
  line-height:110%;
  padding-top:10%;
  padding-bottom:0%;
}
.ad-back-top h2{
  font-size: 5.4vw;
  padding-bottom: 10%;  
}
.ad-back-top h3{
  font-size:5vw;
}
.ad-back-top h4{
  font-size:5vw;
}
.ad-back-top h5{
  font-weight:200;
  font-size:3vw;
}
.ad-copy h2{
  font-size:6vw;
}
.ad-copy h3{
  font-size:5vw;
}
.ad-copy h4{
  font-size:5vw;
}
.ad-copy h5{
  font-size:3vw;
}
.ad-copy ul li{
  font-size:3vw;
  padding-bottom:3%;
}

.trust-bar-item{
    margin-top:25px;
}
.trust-bar-copy{
  color:rgba(255,255,255,1) !important;
}
.trust-bar img{
  max-width:75%;
}
.trust-bar-copy span{
  font-size:3vw;
}
.trust-bar-copy p{
  font-size:2vw;
  font-weight:200;
  color:rgba(255,255,255,1) !important;
  margin-bottom:0;
}
.infographic .benefits-grid::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: #c7cfe6;
}
.headline-1 {
  font-size: 8vw !important;
  line-height: 7vw;
}
.headline-2 {
  font-size: 6vw !important;
  line-height: 8vw;
}
.headline-3 {
  font-size: 8vw !important;
  line-height: 7vw;
}
.headline-4 {
  font-size: 7vw !important;
  line-height: 8vw;
}
.infographic .intro-text {
  font-size: 3vw;
}
.peace-badge .shield-1 {
  font-size: 3.55vw !important;
}
.peace-badge .shield-2 {
  font-size: 3.5vw;
}
.testing h5{
  height: 50px;
  font-size: 3vw;
  display: flex;
  align-items: flex-end;   /* bottom */

}
}
@media (min-width:100px) and (max-width:767px){
.product-box br {
    content: " ";
    display: inline;
    width: 50px;
}
}
@media (min-width:576px) and (max-width:767px){
.product-box {
  padding: 1%;
  margin: 0;
  flex: 0 0 100%;
  max-width: 100%;
}
/* Help tile tracks .product-box exactly — see the note at the base rule. */
.cat-help-tile {
  padding: 1%;
  margin: 0;
  flex: 0 0 100%;
  max-width: 100%;
}
}
@media (min-width:768px) and (max-width:991px){
.home-product-logo-image{
  max-width:75%;
}
.home-product-right {
  display: inline;
  max-width:25%;
  padding-top:6%;
}
}

@media only screen and (min-width:768px){
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.hide, .us-phone{
  display:inherit;
}
.nationwide-logo {
  width:96px;
  height:65px;
}
.logo-words{
  padding-left:0px;
}
.company-name, .dual-color{
  text-align: left;
}
.company-name h2{
  margin-top:0px;
}
.dual-color{
  margin-top:-8px;
}
.dual-color h2 {
  font-size: 3vw;
}
.the{
  margin-right:4px !important;
}
.blue-drop{
  margin-right:-1px !important;
}
.phones a {
    font-size: 3vw;
}
.tagline h3 {
    font-size: 2vw;
}.toggle{
  display:none;
}
.mobile-nav{
  background:none;
  display: flex;
  padding-top:0;
  margin-bottom:0;
}
.mobile-nav ul{
  width:75%;
  flex-direction: row; 
  }
.mobile-nav li{
  list-style:none;
  flex-grow: 1;
  text-align: center;
  border-left: solid 1px rgba(255,255,255,.30);
}
.mobile-nav li:last-child{
  border-right: solid 1px rgba(255,255,255,.30);
}
.mobile-nav a{
  color:rgba(255,255,255,1.0);
  border-bottom: none;  
  font-size:1.5vw;
}
.mobile-nav a:hover{
  text-decoration: none;
}
.navigation a:hover{
	text-decoration:none;
	background:rgba(23,155,224,100);
}
.li-left{
  border-bottom:solid 1px rgba(255,255,255,.4)!important;
  border-left:solid 1px rgba(255,255,255,.4)!important;
  text-align: center!important;
}
.li-right{
  border-bottom:solid 1px rgba(255,255,255,.4)!important;
  border-left:solid 1px rgba(255,255,255,.4)!important;
  border-right:solid 1px rgba(255,255,255,.4)!important;  
  text-align: center!important;
}
.product-list{
  display:inline;
}.product-list:hover .dropdown{
  max-height: 500px;
  transition: max-height .25s ease-in; 
}
.prod-cat {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}
.prod-cat:hover{
  background-color: rgba(255,0,0,1.0) !important;
}
.prod-cat a{
  padding:5px 0px;
  font-size:2vw
}
.dropdown{
  top:100%;
	overflow:hidden;
	background:rgba(23,155,224,100);
	z-index:105;
	width:50%;
	max-height:0;
	position:absolute;
	text-align:center;
	transition:max-height .25s ease-out;
}
.dropdown li{
	float:left;
	display:block;
	width:50%;
	border-left:none;
}
.dropdown li a{
	height:auto !important;
	color:rgba(255,255,255,1.00) !important;
	display:block !important;
	width:100% !important;
	padding:8px 15px !important;
	overflow:hidden;
	border:none;
}
.dropdown li h4{
	display:inherit;
	width:75%;
	float:left;
	padding-top:5px;
}
.dropdown li a:hover{
	background:rgba(3,81,161,1.00);
}.permakote, .enviro, .shingle-sealer, .acrathane{
  padding:15px 60px;
  display: inline;
	border-bottom:solid 1px rgba(0,0,0,1.00);	
}
.home-product-right img{
  max-width:100%!important;
}
.home-product-logo-image img{
  width:50%;
}
.home-owners .home-product-logo-image{
  max-width:100%;
}.home-product-words{
  font-size: 2vw;
}.banner-button a{
    font-size: 3vw;
}
.home-product-right {
  display: inline;
}
.offer{
  padding:0px 60px;
}
.offer h2{
  font-size: 3vw;
}
.inline-cn h1 {
  font-size: 20px;
}
.welcome-box .dual-color h2{
  font-size:4vw;
}
.welcome-statement p {
  font-size: 2.5vw;
  padding-left:0;
}

.vocfree{
	background:url(../images/homepage-backgrounds/voc-green-background.jpg) no-repeat;
	background-size:cover;
  box-shadow:0 2px 3px rgba(0,0,0,.50);
  display:flex;
}

.vocfree-words{
	background:rgba(0,0,0,0.45);
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,1.00);
	padding:1%;
	margin-top:1%;
	margin-bottom:1%;
}
.vocfree-words h2{
	font-family: "niveau-grotesk", sans-serif;
	font-size:5vw;
	color:rgba(255,255,255,1.00);
	font-weight:900;
	text-shadow:0 0 10px rgba(0,0,0,1.00);	
}
.vocfree-words div{
	color:rgba(255,255,255,1.00);
	font-size:2vw;
}
.vocfree-bucket{
	padding-top:5%;
}
.vocbutton{
	width:100%;
	float:left;	
}
.vocfree a{
	text-align:center;
	display:block;
	margin:0 auto;
	width:80%;
	padding:.5% 2%;
	background:#00af0c;
	border-radius:8px;
	color:rgba(255,255,255,1.00);
	font-size:32px;
	border:1px solid rgba(18,203,40,1.00);
	margin-bottom:2%;
	font-family: "niveau-grotesk", sans-serif;	
	font-weight:900;
	text-shadow: 0 0 10px rgba(0,0,0,1.00);
}
.vocfree a:hover{
	background:#0e6f1a;
	color:rgba(255,255,255,1.00);
	text-decoration:none;
}
.blog-button:hover h2 a, .video-button:hover h2 a{
  display: block;
  text-decoration: none;
  margin-top:0px;
  margin-bottom:14px;
	text-shadow:0 5px 5px rgba(0,0,0,.45);	    
  transition:all .25s ease;  
}
.blog-button h2 a,.video-button h2 a{

}
.contact-words p{
font-size: 2.5vw;
}

.logo-box-footer{
  display:none;
}
.fine-print, .fine-print a {
  font-size: 1.5vw;
}
.footer-phone a, .footer-phone .request-info {
    font-size: 3vw;
}

.product-box{
  margin:0;
}
/* Help tile tracks .product-box exactly — see the note at the base rule.
   Without this the tile keeps the base margin:1%, is wider than a card,
   and gets pushed onto its own row at desktop. */
.cat-help-tile{
  margin:0;
}
/* Inline CTA embeds — at tablet and up the three buttons sit on one row
   instead of stacking. See the base rules beside .cat-help-tile.
   Scoped under .nwc-cta to match the specificity of the base rules, which
   are themselves scoped to outrank .blog-post-content's element selectors. */
.nwc-cta .nwc-cta-actions{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.nwc-cta .nwc-cta-actions .nwc-cta-btn{
  width:auto;
  flex:0 1 auto;
}
.product-title-contain{
  min-height:80px;
}
.product-box .product-number{
  margin-top:5px;
}
.product-box h2{
  font-size: 20px;
}
.product-box h3{
  width:100%;
  text-align: center;
  font-size: 15px;  
  height:125px;
  line-height: 130%;
  float:none;
}
.product-box-image{
  width:100%;
  height: 170px;
  padding:0;
}

.product-box-image img{
  width:120px;
  height:151px;
}
.product-box-image .graser{
  width:auto;
  height:auto;
}
.product-box a{
  font-size:2vw;
  margin-top:10px;
}
.misc-content-banner h1, .banner-bump h1 {
  font-size: 5vw;
}
.product-page-recommendations{
	display:none;
}
.pricing, .product-page-box{
  padding:15px 60px;
}

.floating-contact {
  top: 13%;
  min-height:500px;
}
.referance h3 , .contact-words h2{
 font-size: 2.5vw;
}
.referance h4 {
  font-size:3vw;
}
.referance h5 {
    font-size: 2vw;
}
.banner-bump img {
    max-width: 30%;
}
.new-product-page h1{
  font-size:3vw;
}
.new-product-page h2{
  font-size:3.6vw;
}
.new-product-page h3{
  font-size:4vw;
}
.new-product-page h4{
	font-size:3.5vw;
}
.new-product-page .list-header{
  font-size:2vw;
}
.new-product-page .secondary{
  font-size:2vw;
}
.new-product-page .list-group-item-action{
  font-size:1.5vw;
} 
.new-product-page .tab-pane{
  font-size:2vw;
}
.custom a{
  font-size:2vw;
}
.custom h4{
  font-size:1.5vw
}
.custom p, .custom ul li{
	font-size:2vw;
}

.ad-back-top h1{
  font-size: 3vw;
  line-height:130%;
  padding-top:7%;
  padding-bottom:0%;
}
.ad-back-top h2{
  font-size: 2.2vw;
  padding-bottom: 4%;  
}
.ad-back-top h3{
  font-size:1.75vw;
}
.ad-back-top h4{
  font-size:1.75vw;
}
.ad-back-top h5{
  font-size:1.75vw;
}
.ad-back-top a{
  font-size:1.6vw;
  margin-bottom:15px;
}
.ad-copy h2{
  font-size:2.2vw;
}
.ad-copy h3{
  font-size:1.75vw;
}
.ad-copy h4{
  font-size:1.75vw;
}
.ad-copy h5{
  font-size:1.75vw;
}
.ad-copy ul li{
  font-size:1.75vw;
  padding-bottom:2%;
}
.ad-group-right{
  background:url("../images/landing-page/roof-sealer-background.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
.ad-group-right h2{
  color:rgba(141,183,227,1);
  text-shadow: 0 2px 4px rgba(0,0,0,.5);  
}
.ad-group-right h3{
  color:rgba(252,144,144,1);
  text-shadow: 0 2px 4px rgba(0,0,0,.5);  
}
.ad-group-right ul li{
  color:rgba(255,255,255,1.0);
}

.mobile-photo{
  display:none;  
}
.desktop-photo{
  display:inline;  
}
.company-name h1{
  font-size:2.5vw;
}
.company-name p{
  font-size:2vw;
}
.tri-home-button .btn-primary{
  font-size:2vw!important;
}
.perma-home-buckets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.perma-home p {
  font-size: 2vw;
}
.contact-page-phone{
  font-size:3vw !important;
}
.product-box h3 {
  min-height: auto;
}
.hero2025{
    background-size: cover; 
    background-position: center; 
}
.hero-title{
    margin:0 0 10px 0; 
    padding: 0; 
    font-size: 4vw;
}
.hero-warr{
    margin:0 0 5px 0; 
    padding: 0; 
    font-size: 3vw;
}
.hero-spread{
    margin:0 0 5px 0; 
    padding: 0;
    font-size: 2.2vw;
}
.hero-text{
    font-size: 1.5vw;
}
.hero-bucket{
    max-width:100% !important;
}
.headline-1{
  padding-top:10px;
}
.headline-1, .headline-3, .headline-4 {
  font-size: 2vw !important;
  line-height: 2vw;
}
.headline-2 {
  font-size: 2vw !important;
  line-height: 2vw;
}
.infographic .intro-text {
  font-size: 1vw;
}
.peace-badge .shield-1 {
  font-size: 1vw !important;
}
.peace-badge .shield-2 {
  font-size: 1vw;
}
.shield-holder{
  padding:0px;
}
.table-holder .section-header {
  font-size: 1vw;
}
.test-params {
  font-size: 1vw;
}
.infographic .scrub-table th {
  font-size:.85vw
}
.infographic .scrub-table td.row-label{
  font-size:.80vw;
}
.infographic .scrub-table td {
  font-size:.80vw;
}
.callout-box {
  font-size: 1vw;
}
.callout-box strong {
  font-size: 1.25vw;
}
.infographic .benefit span{
  font-size:.75vw!important;
}
.infographic .perms-badge {
  width: 4vw;
  height: 4vw;
  font-size: 2vw;
  line-height: 1.05;  
}
.infographic .perms-badge span {
  display: block;
  font-size: 0.5vw;
  letter-spacing: 1px;
}
.infographic .perms-desc {
  line-height: 10px !important;
}
.infographic .perms-desc em{
  font-size: 1vw !important;
  line-height: 10px !important;
}
.photo-header-dark, .photo-header-blue {
  font-size: .95vw;
}
.photo-pair .photo-caption, .penetrate-block .photo-caption {
  font-size: 1vw;
}
.penetrate-block .section-header {
  font-size: 1vw;
}
.final-tagline {
  padding-top:15px;
  font-size: 1.5vw;
}
.infographic .benefit-icon svg {
  width: 2.5vw;
  height: 2.5vw;
}
.infographic .benefit{
  padding:0px;
}    
.infographic .benefits-grid {
  margin-bottom:0px;
}
.testing h5{
  height: 50px;
  font-size: 17px;
}
}
/*#------NEW NAVIGATION-------------------------------------------------------------------------------------------*/
@media (min-width: 768px){
.header{
  height: auto;
}
.navi{
	background:rgba(3,81,161,1.00);
}
.hide, .us-phone{
  display:inherit;
}
.nationwide-logo {
 max-width: 100%;
}
.logo-words{
  padding-left:0px;
}
.company-name, .dual-color{
  text-align: left;
}
.company-name h2{
  margin-top:0px;
}
.dual-color{
  margin-top:-8px;
}
.dual-color h2 {
  font-size: 3vw;
}
.the{
  margin-right:4px !important;
}
.blue-drop{
  margin-right:-1px !important;
}
.phones a {
    font-size: 3vw;
}
.tagline h3 {
    font-size: 2vw;
}.toggle{
  display:none;
}
.dnav{
  background:none;
  display: flex;
  justify-content: center;
  padding-top:0;
  margin-bottom:0;
}
.dnav ul{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.dnav li{
  list-style:none;
  flex-grow: 1;
  text-align: center;
  border-left: solid 1px rgba(255,255,255,.30);
}
.dnav li:last-child{
  border-right: solid 1px rgba(255,255,255,.30);
}
.dnav a{
  color:rgba(255,255,255,1.0);
  border-bottom: none;  
  font-size:1.5vw;
}
.dnav a:hover{
  text-decoration: none;
}
.navigation a:hover{
	text-decoration:none;
	background:rgba(23,155,224,100);
}
.li-left{
  border-bottom:solid 1px rgba(255,255,255,.4)!important;
  border-left:solid 1px rgba(255,255,255,.4)!important;
  text-align: center!important;
}
.li-right{
  border-bottom:solid 1px rgba(255,255,255,.4)!important;
  border-left:solid 1px rgba(255,255,255,.4)!important;
  border-right:solid 1px rgba(255,255,255,.4)!important;  
  text-align: center!important;
}
.product-list{
  display:inline;
}.product-list:hover .dropdown{
  max-height: 500px;
  transition: max-height .25s ease-in; 
}
.prod-cat {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
}
.prod-cat:hover{
  background-color: rgba(255,0,0,1.0) !important;
}
.prod-cat a{
  padding:5px 0px;
  font-size:2vw
}
.dropdown{
  top:100%;
	overflow:hidden;
	background:rgba(23,155,224,100);
	z-index:105;
	width:50%;
	max-height:0;
	position:absolute;
	text-align:center;
	transition:max-height .25s ease-out;
}
.dropdown li{
	float:left;
	display:block;
	width:50%;
	border-left:none;
}
.dropdown li a{
	height:auto !important;
	color:rgba(255,255,255,1.00) !important;
	display:block !important;
	width:100% !important;
	padding:8px 15px !important;
	overflow:hidden;
	border:none;
}
.dropdown li h4{
	display:inherit;
	width:75%;
	float:left;
	padding-top:5px;
}
.dropdown li a:hover{
	background:rgba(3,81,161,1.00);
}
.mobile-header-words h1{
  font-size: 3vw;
}
.mobile-header-words h4{
  font-size: 2vw;
}
.mobile-header-bucket{
  margin-top:1.5vw;
}
}

@media only screen and (min-width:992px){
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.stay-top{
  position: sticky;
}
container{
  width:100%;
  overflow:hidden;
}.permakote, .enviro, .shingle-sealer, .acrathane{
  padding:15px 5px;
  height:365px;
}
.home-product-logo-image img {
  width:100%;
  max-width: 100% !important;
  margin-top: 25px;
  transition: all 1s ease;
}
.home-product-right img {
  padding-top:45px;
}.home-product-words{
  font-size: 1.8vw;
  line-height:130%;
}
.banner-button a{
  margin-top:100px;
  transition: all 1s ease;
  font-size:1.5vw;
}
.permakote:hover .home-product-logo-image img,
.permakote:hover .banner-button a,
.enviro:hover .home-product-logo-image img,
.enviro:hover .banner-button a,
.shingle-sealer:hover .home-product-logo-image img,
.shingle-sealer:hover .banner-button a,
.acrathane:hover .home-product-logo-image img,
.acrathane:hover .banner-button a{
  margin-top:0px;
  padding-top:0px;
  padding-bottom:0px;
  transition: all 1s ease;
}
.offer h2 {
  font-size: 2vw;
}
.inline-cn h1 {
  font-size: 17px;
}
.welcome-box .dual-color h2 {
  font-size: 3vw;
}
.welcome-statement p {
  font-size: 1.5vw;
}
.welcome-logo {
  margin-top: 7%;
}
.welcome-logo img{
  width:100%;
}
.vocfree-words h2 {
  font-size: 4vw;
}
.vocfree-words div {
  font-size: 1.5vw;
}
.vocfree a {
  width:50%;
  font-size:2vw;
}
.blog-button h2 a, .video-button h2 a {
  font-size: 2.5vw;
}
.products{
  display: flex;
	background:url(../images/homepage-backgrounds/where-our-product-is-used-homepage.jpg) no-repeat;
	background-size:cover!important;
	padding-top:2%;
  padding-bottom:2%;
	overflow:hidden;
  box-shadow:0 1px 3px inset rgba(0,0,0,.50);  
}
.products-home-top{
	text-align:center;	
}
.products-home-top h2{
	font-family: "niveau-grotesk", sans-serif;
  font-size: 4vw;
	font-weight:900;
	text-shadow:0 2px 3px rgba(0,0,0,.35);	
}
.product-cat-box{
	background:rgba(255,255,255,1.00);
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,.30);
	margin-top:3%;
	overflow:hidden;
	padding:1%;
	min-height:225px;
}
.product-cat-box-top{
	width:100%;
	padding:1%;	
	overflow:hidden;
}
.where-product-logo{
	float:left;
	width:100%;
  max-height:63px;
}
.where-product-logo img{
	width:100%;	
}
.where-product-description{
	width:100%;
	float:left;
	text-align:center;	
}
.where-product-description h2{
	font-size:20px;
	font-weight:900;
	padding-top:10%;
}
.product-cat-box-bottom{
	width:95%;	
	margin:0 auto;
}
.product-image-1{
	width:50%;
	float:left;
	padding:1%;	
}
.product-image-2{
	width:50%;
	float:left;	
	padding:1%;	
}
.product-image-1 img, .product-image-2 img{
	width:100%;
}
.product-image-large{
	margin:0 auto;
	text-align:center;
	width:100%;	
}
.product-image-large img{
	width:100%;
}
.bot-red{
	padding:0;
	letter-spacing:-2px;
	display:inline;
	color:rgba(255,0,0,1.00);	
}
.bot-blue{
	padding:0;	
	letter-spacing:-2px;	
	display:inline;	
	color:rgba(0,00,255,1.00)
}
.footer .navigation {
  display:flex;
}
.footer .navigation li{
  list-style: none;
}
.footer .navigation a{
  color:rgba(255,255,255,1.0);
  font-weight:700;
  text-decoration: none;
  padding:5px;
  font-size:1.2vw;
}
.logo-box-footer {
  display: inline;
}
.footer-phone a, .footer-phone .request-info {
  font-size: 2vw;
}
.fine-print, .fine-print a {
  font-size: 1vw;
}
.product-box h2 {
  font-size: 1.4vw;
}
.product-box h3 {
  height: 8vw;
}
.product-box a {
  font-size: 1.75vw;
}
.permakote-page .blue, .referance h3  {
  font-size: 2.5vw;
}

.product-words p {
  font-size: 1.5vw;
  line-height: 165%;    
}.referance h4{
  font-size: 2vw;
}
.products-page-list .product-box h2{
	font-weight:900;
}
.products-page-list .product-box h3{
	display:block;
	height:185px;
}
.product-page-recommendations {
  display: inline;
}
.pricing h2, .hp2, .contact-words h2  {
  font-size: 3vw;
}
.pricing p, .contact-words p, .hpp ,  p, p span{
  font-size: 1.5vw;
}
.pricing h4 {
  font-size: 2vw;
}
.nda{
  margin-bottom:0px;
}
.misc-content-banner h1, .banner-bump h1 {
    font-size: 4vw;
}
.blog h2 {
    font-size: 3vw;
}
.blog p {
    font-size: 1.75vw;
}
.product-title-contain{
  min-height:85px;
}
.product-title-contain {
  min-height: 4vw;
}
.new-product-page .product-box .product-title, .product-box .product-title{
  display:block;
  font-size:1.5vw !important;
  color:rgba(0,0,0,1.0);
  width:100%;
  min-height: auto;
}
.new-product-page .product-box .product-number, .product-box .product-number{
  display:block;
  font-size:1.3vw !important;
  font-weight:400;
  color:rgba(0,0,0,1.0); 
  width:100%;
  min-height:auto;
}
.new-product-page .product-box .product-desc, .product-box .product-desc{
  font-size:1.3vw;
}
.custom p, .custom ul li{
	font-size:1.6vw;
	line-height:160%;	
}
.floating-contact-form .btn {
  font-size: 1.5vw;
}

.ad-back-top h1{
  font-size: 2.6vw;
  line-height:100%;
  padding-top:3%;
  padding-bottom:0%;
}
.ad-back-top h2{
  font-size: 1.75vw;
  padding-bottom: 1%;  
}
.ad-back-top h3{
  font-size:1.65vw;
}
.ad-back-top h4{
  font-size:1.5vw;
}
.ad-back-top h5{
  font-size:1.4vw;
}
.ad-back-top a{
  font-size:1.7vw;
  margin-bottom:15px;
}
.ad-copy h2{
  font-size:3vw;
}
.ad-copy h3{
  font-size:2vw;
  margin-bottom:15px;
}
.ad-copy h4{
  font-size:1.75vw;
}
.ad-copy h5{
  font-size:1.75vw;
}
.ad-copy ul li{
  font-size:1.75vw;
  padding-bottom:1.5%;
}

.nationwide-logo{
  width:117px;
  height:79px;
}
.company-name{
  width:490px;
  height:38px;
}
.company-name h2{
  font-size:20px;
}
.dual-color{
  width:310px;
  height:37px;
  margin-top: -16px;
}
.dual-color h2 {
  font-size: 20px;
}
.ceramic img{
  width:100%;
  height:auto;
}
.top-phones{
  margin-top:0;
}
.us-phone, .all-phone{
  width:200px;
  height:24px;
}
.us-phone, .phones a {
 font-size: 20px!important;
}
.tagline{
  height:15px;
}
.tagline h3 {
 font-size: 9px;
}
.dnav a {
 font-size: 16px;
}
.new-header h3 {
  font-size: clamp(31px, 3vw, 70px);
}
.new-header h5 {
  font-size: clamp(13px, 1.5vw, 28px);
}
.banner-buttons a {
  font-size: 1vw;
}
.contact-page-phone{
  font-size:1vw !important;
}
.mobile-header-words h1{
  font-size: 3vw;
}
.mobile-header-words h4{
  font-size: 2vw;
}
.mobile-header-bucket{
  margin-top:0;
}

.trust-bar-item{
    margin-top:15px;
}
.trust-bar-copy{
  color:rgba(255,255,255,1) !important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.trust-bar img{
  height:60px;
  width:auto;
  max-width:100%;
}
.trust-bar-icon{
  padding-right:0px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.trust-bar-copy span{
  display:inline-block;
  font-size:1vw;
}
.trust-bar-copy p{
  font-size:.8vw;
  font-weight:200;
  color:rgba(255,255,255,1) !important;
  margin-bottom:0;
}
    .headline-1, .headline-3, .headline-4 {
        font-size: 1.9vw !important;
        line-height: 2vw;
    }
    .headline-2 {
        font-size: 1.6vw !important;
        line-height: 2vw;
    }
    .infographic .intro-text {
        font-size: .9vw;
    }
    .peace-badge .shield-1 {
        font-size: .7vw !important;
    }
    .peace-badge .shield-2 {
        font-size: .7vw;
    }
    .test-params {
        font-size: .9vw;
    }
    .infographic .benefit {
        padding: 3px;
    }  
    .photo-header-dark, .photo-header-blue {
        font-size: .95vw;
    }
    .infographic .perms-desc em {
        font-size: 1vw !important;
        line-height: 15px !important;
    }
    .infographic .perms-badge span {
        font-size: 1vw;
    } 
    .infographic .benefit span {
        font-size: 1.25vw !important;
    }                                     
}
@media only screen and (min-width:992px) and (max-width:1199px){
.products-page-list .col-lg-4{
  flex: 0 0 25%;
  max-width: 25%;
}
}
@media only screen and (min-width:1200px){

/* CATEGORY HELP TILE -> FULL-WIDTH BAND AT XL
   ---------------------------------------------------------------
   At xl the grid is 4 across, so there is no empty slot to fill and the help
   CTA spans the full row as a band between rows 2 and 3. Below xl (3 across)
   it reverts to a one-slot inline tile filling the gap the 3-column layout
   leaves after 8 cards.

   This is ONE element, not two. The markup carries col-lg-4 col-sm-6 col-xl-12,
   so Bootstrap widens it to 100% at xl by itself — no duplicate markup and no
   display:none copy sitting in the DOM. Only the internal layout changes here:
   vertical stack below xl, horizontal band at xl.
   --------------------------------------------------------------- */
/* The inner panel stays a COLUMN here — only the button group flips to a row.
   An earlier version made the inner a wrapping row with flex-basis:100% on each
   child. That is fragile: .cat-help-tile-sub is capped at max-width:760px, so it
   never fills its flex line, and the button group packed onto the same line and
   floated right. Keeping the column direction removes the failure mode entirely
   rather than relying on flex line-packing arithmetic to come out right. */
.cat-help-tile-inner{
	padding:30px 24px;
}
/* Icon and divider are tile furniture — they read as clutter across a wide band. */
.cat-help-tile-icon,
.cat-help-tile-rule{
	display:none;
}
.cat-help-tile-head{
	font-size:1.6rem;
	margin:0 0 8px;
}
.cat-help-tile-sub{
	max-width:760px;
	margin:0 0 20px;
	font-size:1.05rem;
}
/* Buttons side by side instead of stacked. width:auto so the group shrinks to its
   contents and is centred by the parent's align-items:center. */
.cat-help-tile-actions{
	flex-direction:row;
	width:auto;
	justify-content:center;
	gap:12px;
}
.cat-help-tile-actions a,
.cat-help-tile-actions a:link,
.cat-help-tile-actions a:visited{
	width:auto;
	padding:0.65rem 1.9rem;
	font-size:1.15rem;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.header{
  padding-top:5px;
  height:auto;
}
.navi >.row{
  max-width:85%;
  margin:0 auto;
}
.dnav ul {

}
.permakote, .enviro, .shingle-sealer, .acrathane{
  padding:0 15px;
  min-height:325px;
  height:auto;
}
.home-product-logo-image img{
  max-width:325px!important;
}
.home-product-right img {
  padding-top: 25px;
  max-width: 80%!important;
}.home-product-words{
  font-size: 1.3vw;
}
.home-product-logo-image{
  max-height: 300px;
  overflow:hidden;
}
.banner-button a {
  font-size: 1.3vw;
}
.offer h2 {
  font-size: 1.6vw;
}
.inline-cn h1 {
  font-size: 30px;
}
.welcome-box .dual-color h2 {
  font-size: 2vw;
}
.welcome-statement p {
  font-size: 1.2vw;
}
.vocfree-words h2 {
  font-size: 3vw;
}
.vocfree-words div {
  font-size: 1.3vw;
}
.vocfree a {
  font-size: 1.5vw;
}
.blog-button h2 a, .video-button h2 a {
  font-size: 1.6vw;
}
.social img{
  max-width:70%;
}
.footer .navigation a {
  padding: 5px 15px;
  font-size: 1vw;
}
.footer-phone a, .footer-phone .request-info {
  font-size: 1.5vw;
}
.fine-print, .fine-print a {
   font-size: .7vw;
}
.product-box h2 {
  font-size: 1vw;
}
.product-box h3{
  font-size:14px;
}
.permakote-page .blue  {
  font-size: 2vw;
}
.referance h3{
  font-size:1.2vw;
}
.referance h4{
  font-size:1.5vw;
}
.referance h5{
  font-size:1vw;
}
.product-words p, .pricing p, .contact-words p, .hpp, p, p span {
  font-size: 1.2vw;    
}
.products-page-list .product-box h3 {
  height: 140px;
}
.pricing h2, .hp2, .contact-words h2  {
  font-size: 2vw;
}
.pricing h4 {
    font-size: 1.5vw;
}
.misc-content-banner h1, .banner-bump h1 {
   font-size: 3.5vw;
}
.blog h2 {
    font-size: 2vw;
}
.blog p {
    font-size: 1vw;
}
.new-product-page h1{
  font-size:2.2vw;
}
.new-product-page h2{
  font-size:1.9vw;
}
.new-product-page h3{
  font-size:1.9vw;
}
.new-product-page h4{
	font-size:1.5vw;
}
.new-product-page .list-header{
  font-size:1.5vw;
}
.new-product-page .secondary{
  font-size:1.5vw;
}
.new-product-page .list-group-item-action{
  font-size:1vw;
} 
.new-product-page .tab-pane{
  font-size:1.1vw;
}
.new-product-page .product-box .product-desc, .product-box .product-desc{
  font-size:1vw;
}
.product-title-contain{
  height: 5vw;
}
.custom p, .custom ul li{
	font-size:1.3vw;
	line-height:160%;	
}

.ad-copy h3{
  padding-left:5%;
  padding-right:5%;
}
.ad-copy ul li {
  font-size: 1.5vw;
}
.company-name h1{
  font-size:2vw;
}
.company-name p{
  font-size:1.5vw;
}
.tri-home-button .btn-primary{
  font-size:1.5vw!important;
}
.perma-home{
  box-shadow: 0 2px 4px rgba(0,0,0,.7);
}
.perma-home p {
  font-size: 1.5vw;
}
.nationwide-logo{
  width:117px;
  height:79px;
}
.company-name{
  width:490px;
  height:38px;
}
.company-name h2{
  font-size:26px;
}
.dual-color{
  width:365px;
  height:37px;
  margin-top: -8px;
}
.dual-color h2 {
  font-size: 24px;
}
.ceramic img{
  width:106px;
  height:46px;
}
.us-phone, .all-phone{
  width:235px;
  height:24px;
}
.us-phone, .phones a {
 font-size: 20px!important;
}
.tagline{
  height:15px;
}
.tagline h3 {
 font-size: 12px;
}
.dnav a {
 font-size: 16px;
}
.new-header{
  padding-top:70px;
  padding-bottom:70px;
  border-bottom:solid 5px rgba(3,81,161,1);
}
 .product-box h3 {
  height: 6vw;
}
.product-box a {
  width: 17vw;
  font-size: 1.35vw;
}
.mobile-header-words h1{
  margin-top: 2vw;
  font-size: 36px
}
.mobile-header-words h4{
  font-size: 24px;
}
.mobile-header-bucket img{
  max-width:310px;
}
.hero-bucket{
    max-width:82% !important;
}
.perma-home h1 {
  font-size: clamp(31px, 2.5vw, 70px);

}
}

@media only screen and (min-width: 1610px) {
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.header{
  padding-top:15px;
}
.home-product-logo-image {
 min-height: 200px;
 max-height: 345px;
}
.home-owners .home-product-logo-image{
  min-height: auto;
}
.banner-button a {
  font-size: 1.1vw;
}
.vocfree-words h2 {
  font-size: 2.5vw;
}
.vocfree-words div {
  font-size: 1.1vw;
}
.vocfree a {
  width: 37%;
  font-size: 1.2vw;
}
.products-home-top h2 {
  font-family: "niveau-grotesk", sans-serif;
  font-size: 3vw;
}
.floating-contact-form .btn {
  font-size: 1.2vw;
}
.product-words p .pricing p, .contact-words p, .hpp, p, p span {
    font-size: 1vw;
}
.permakote-page .blue  {
  font-size: 2vw;
}
.referance h3{
  font-size:1vw;
}
.misc-content-banner h1, .banner-bump h1 {
    font-size: 3vw;
    min-height:90px;
}
.new-product-page h1{
  font-size:2vw;
}
.new-product-page h2{
  font-size:1.9vw;
}
.new-product-page h3{
  font-size:2.4vw;
}
.new-product-page h4{
	font-size:1.5vw;
}
.new-product-page .list-header{
  font-size:1.5vw;
}
.new-product-page .secondary{
  font-size:1.1vw;
}
.new-product-page .list-group-item-action{
  font-size:1.1vw;
} 
.new-product-page .tab-pane{
  font-size:1vw;
}
.new-product-page .product-box .product-title, .product-box .product-title{
  font-size:1.4vw !important;
}
.new-product-page .product-box .product-number, .product-box .product-number{
  font-size:1.4vw !important;
}
.custom a{
  font-size:1.5vw;
}
.energy h5{
font-size:1vw;
}
.custom p, .custom ul li{
	font-size:1.1vw;
	line-height:160%;	
}
.company-name h1{
  font-size:1.5vw;
}
.company-name p{
  font-size:1vw;
}
.tri-home-button .btn-primary{
  font-size:1vw!important;
}
.perma-home{
  padding-top:1.5%;
}
.perma-home-buckets{
  display:block;
}
.perma-home-buckets .img-fluid{
  max-width:75%;
}
.perma-home p {
  font-size: 1.20vw;
}
.nationwide-logo{
  min-height:96px;
}
.nationwide-logo{
  width:141px;
  height:96px;
}
.company-name{
  width:650px;
  height:38px;
}
.dual-color{
  width:500px;
  height:37px;
}
.ceramic img{
  width:170px;
  height:74px;
}
.us-phone, .all-phone{
  width:235px;
  height:24px;
}
.tagline{
  height:15px;
}
.company-name h2{
  font-size:34px;
}
.dual-color h2 {
  font-size: 32px;
}
.dual-color {
  margin-top: -2px;
}
.us-phone, .phones a {
 font-size: 24px!important;
}
.tagline h3 {
 font-size: 12px;
}
.dnav a {
 font-size: 16px;
}
.ad-back-top h1 {
  font-size: 2.6vw;
}
.ad-back-top h2 {
  padding-bottom: 5%;
}
.ad-back-top h5 {
  font-size: 1.4vw;
  padding-bottom: 5%;
}
.ad-copy h3 {
  font-size: 1.65vw;
  margin-bottom: 15px;
}
.product-box a {
  width: 16vw;
  font-size: 1vw;
}
.hero2025{
    background-size: cover; 
    background-position: center; 
}
.hero-title{
    margin:0 0 10px 0; 
    padding: 0; 
    color: rgba(255, 255, 255, 1);
    font-weight: 800; 
    font-size: 48px;
}
.hero-warr{
    margin:0 0 5px 0; 
    padding: 0; 
    color: rgba(255, 255, 255, 1); 
    font-weight: 600; 
    font-size: 28px;
}
.hero-spread{
    margin:0 0 5px 0; 
    padding: 0;
    height: auto; 
    color: rgba(255, 255, 255, 1); 
    font-weight: 400; 
    font-size: 24px;
}
.hero-text{
    color: rgba(255, 255, 255, 1); 
    font-weight: 200; 
    font-size: 20px;
}
.hero-bucket{
    max-width:240px !important;
}
.perma-home h1 {
  font-size: 32px;
}
.trust-bar-copy span{
  font-size:.75vw;
}
.trust-bar-copy p{
  font-size:.60vw;
}
}
@media only screen and (min-width: 1921px) {
.company-name {
  width: 789px;
  height: 48px;
}
.company-name h2 {
  font-size: 42px;
}
.dual-color {
  width: 585px;
  height: 50px;
}
.dual-color h2 {
  font-size: 38px;
}
.tagline {
  height: 40px;
}
.tagline h3 {
  font-size: 20px;
}
.us-phone, .all-phone {
  width: 370px;
  height: 35px;
}
.us-phone, .phones a {
  font-size: 30px !important;
}
.dnav a{
  font-size: 21px;
  padding-top: 12px;
  padding-bottom: 12px;
}.home-product-words{
  font-size: 26px;
}
.banner-button a {
  font-size: 23px;
}
.offer h2 {
  font-size: 34px;
}
.inline-cn h1 {
  font-size: 24px;
}
.welcome-box .dual-color h2 {
  font-size: 50px;
}
.welcome-statement p {
  font-size: 20px;
}
.vocfree-words h2 {
  font-size: 50px;
}
.vocfree-words div {
  font-size: 25px;
}
.vocfree a {
  font-size: 22px;
}
.blog-button h2 a, .video-button h2 a {
  font-size: 35px;
}
.footer .navigation a {
  font-size: 20px;
}
.footer-phone a, .footer-phone .request-info {
  font-size: 20px;
}
.fine-print, .fine-print a {
  font-size: 14px;
}
.products-home-top h2 {
  font-size: 68px;
}
.misc-content-banner h1, .banner-bump h1 {
  font-size: 64px;
}
.permakote-page .blue, .pricing h2, .hp2, .referance h3  {
    font-size: 36px;
}
.product-words p, .pricing p, .contact-words p, .hpp, p, p span {
    font-size: 23px;
}.referance h4{
    font-size: 32px;
}
.product-box h2 {
    font-size: 22px;
}
.blog h2 {
    font-size: 32px;
}
.blog p {
    font-size: 23px;
}
.new-product-page .product-box .product-title, .product-box .product-title{
  font-size:25px !important;
}
.new-product-page .product-box .product-number, .product-box .product-number{
  font-size:22px !important;
}
.new-product-page .product-box .product-desc, .product-box .product-desc {
  font-size: 18px !important;
}
.ad-back-top h1{
  font-size: 53px;
}
.ad-back-top h2{
  font-size: 40px;
  padding-bottom: 15px;  
}
.ad-back-top h3{
  font-size: 32px;
}
.ad-back-top h4{
  font-size: 28px;
}
.ad-back-top h5{
  font-size: 28px;
}
.ad-back-top a{
  font-size:20px;
}
.ad-copy h2{
  font-size:60px;
}
.ad-copy h3{
  font-size:32px;
}
.ad-copy h4{
  font-size:32px;
}
.ad-copy h5{
  font-size:32px;
}
.ad-copy ul li{
  font-size:32px;
}
.product-title-contain{
  height:77px;
  min-height:77px;  
}
.product-box .product-desc{
  height:97px;
  min-height:97px;  
}
.product-box a {
  width: 275PX;
  font-size: 20px;
}
.trust-bar-item{
    margin-top:15px;
}

.trust-bar img{
  height:60px;
  width:auto;
  max-width:100%;
}
.trust-bar-icon{
  padding-right:0px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.trust-bar-copy span{
  display:inline-block;
  font-size:16px;
}
.trust-bar-copy p{
  font-size:12px;
}
}
@media only screen and (min-width:992px) and (max-width:1199px){
.products-page-list .col-lg-4{
  flex: 0 0 25%;
  max-width: 25%;
}
}

/* ==========================================================================
   Form Builder front-end (.naz-form) — matches legacy contact form look.
   Applied to all ##FORM_X## embeds rendered via class.formbuilder.php.
   ========================================================================== */

/* Hide labels + required-asterisk on single-line text-style inputs.
   Placeholder serves as the visual label. Visually-hidden (not display:none)
   so screen readers still announce the field name. */
.naz-form .naz-field-text > label.form-label,
.naz-form .naz-field-email > label.form-label,
.naz-form .naz-field-tel > label.form-label,
.naz-form .naz-field-number > label.form-label,
.naz-form .naz-field-url > label.form-label,
.naz-form .naz-field-password > label.form-label,
.naz-form .naz-field-date > label.form-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Strip the red asterisk marker on required fields across the whole form. */
.naz-form label .text-danger {
	display: none;
}

/* Green glow on every input/textarea/select — same look as legacy .required-green. */
.naz-form .form-control,
.naz-form .form-select {
	box-shadow: 0 0 10px rgba(0, 155, 0, 0.60);
	border-color: rgba(78, 255, 80, 0.30);
}
.naz-form .form-control:focus,
.naz-form .form-select:focus {
	box-shadow: 0 0 14px rgba(0, 155, 0, 0.85);
	border-color: rgba(78, 255, 80, 0.60);
	outline: 0;
}

/* Submit button: full-width green, large. Selector specificity beats Bootstrap's
   .btn-primary so no !important is needed. */
.naz-form .naz-form-submit button[type="submit"] {
	display: block;
	width: 100%;
	background-color: #28a745;
	border-color: #28a745;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 600;
	padding: 0.75rem 1rem;
	text-shadow: none;
}
.naz-form .naz-form-submit button[type="submit"]:hover,
.naz-form .naz-form-submit button[type="submit"]:focus {
	background-color: #218838;
	border-color: #1e7e34;
	color: #fff;
}

/* Tighter vertical spacing between fields. Cancels the row's g-3 gutter
   (padding-top on each row child) and trims the per-field bottom margin. */
.naz-form {
	--bs-gutter-y: 0;
}
.naz-form .naz-field-wrap {
	margin-bottom: 0.5rem !important;
}

/* Modular Page Builder — purchase_cta block button.
   Solid blue, rounded, bold white CTA. Self-contained so global
   link/heading styles (e.g. .inline-link) can't bleed in. */
.purchase-cta-btn,
.purchase-cta-btn:link,
.purchase-cta-btn:visited {
	display: inline-block;
	background-color: #0d6efd;
	color: #fff !important;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	padding: 0.65rem 1.9rem;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.purchase-cta-btn:hover,
.purchase-cta-btn:focus {
	background-color: #0b5ed7;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.35);
}
/* Non-clickable fallback (no URL set) — same look, no pointer/hover. */
.purchase-cta-btn--static {
	cursor: default;
}

.purchase-cta-btn--static:hover,
.purchase-cta-btn--static:focus {
	background-color: #0d6efd;
	box-shadow: none;
}

/* Product page — photo lightbox modal image */
.product-modal-img {
	max-height: 100vh;
	width: auto;
}

/* Modular builder — photo block thumbnails open a lightbox modal on click */
.modular-photo-thumb {
	cursor: pointer;
}

/* Modular builder — photo lightbox modal: up to 1800px wide, centered */
.modular-photo-modal .modal-dialog {
	max-width: 1800px;
	width: 95vw;
	margin: 1.75rem auto;
	justify-content: center;
}

/* ============================================
   Blog listing page - card grid
   blog/index.php
   ============================================ */
.blog-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease;
}
.blog-card:hover {
	box-shadow: 0 4px 18px rgba(0,0,0,0.14);
}
.blog-card-accent {
	height: 5px;
	flex-shrink: 0;
}
.blog-card-body {
	padding: 22px 20px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.blog-cat-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 20px;
	padding: 3px 11px;
	margin-bottom: 12px;
}
.blog-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.38;
	margin-bottom: 10px;
	color: #1a2a3a;
}
.blog-card-title a {
	color: inherit;
	text-decoration: none;
}
.blog-card-title a:hover {
	color: #2c7bb6;
}
.blog-card-snippet {
	font-size: 0.88rem;
	color: #555;
	line-height: 1.65;
	flex: 1;
	margin-bottom: 16px;
}
.blog-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #f0f0f0;
	padding-top: 12px;
	margin-top: auto;
}
.blog-card-meta {
	font-size: 0.78rem;
	color: #aaa;
}
.blog-card-read {
	font-size: 0.83rem;
	font-weight: 700;
	text-decoration: none;
}
.blog-card-read:hover {
	text-decoration: underline;
}