/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Base
	- CSS Variables
	- Typography
	- Links
	- Forms
# Components
	- Header
	- Content
	- Widgets
	- Sections
	- Icons
	- Site Navigation
	- Comments
	- Media
	- Captions
	- Testimonials
	- Coupon
	- Galleries
	- Accordion Setup
# Plugins
	- Bootstrap Carousel
# Mobile Styles


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------- */

:root {
  --font-primary: 								"Contender";

  --light-grey: 								rgba(200, 200, 200, 1);  
  --grey-high: 									rgba(200,200,200,0.75);   
  --main-blue: 									rgba(30, 30, 196, 1);
  --dark-blue: 									rgba(27, 26, 142, 1);
  --main-red: 									rgba(122, 13, 13, 1);
  
  --accent-color: 								var(--white);
  --accent-border: 								1px solid var(--black);
  --accent-background: 							var(--main-red);
  
  --warning: 									var(--main-red);  
  
  --font-base-5: 								9.0%;
  --font-base-1: 								calc(var(--font-base-2) * 0.90);

  --input-color: 								var(--black);
  --input-border: 								1px solid var(--black-med);
  --input-box-shadow: 							inset 0 0 12px var(--black-low);  
  
  --input-color-focus: 							var(--main-blue);
  
  --input-color-focus-alt: 						var(--input-color-focus);
  
  --button-color: 								var(--medium-grey);
  --button-background: 							var(--white) url('../../uploads/bg-pattern-042.png');
  --button-font-size: 							2.2em;
  --button-border: 								1px solid var(--white-med);
  --button-padding: 							0.12em 1em 0;
  --button-box-shadow: 							0 0 15px 0 var(--black-med);
  --button-transform: 							scale(0.63,0.9);
  --button-text-transform: 						uppercase;
  
  --button-color-hover: 						var(--main-blue);  
  --button-transform-hover:						scale(0.7,1);

  --button-color-alt: 							var(--black-high);
  --button-background-alt: 						var(--light-grey) url('../../uploads/bg-pattern-042.png');
  --button-border-alt: 							1px solid var(--black-low);
  --button-box-shadow-alt: 						0 0 3px 0 var(--black-low);

  --button-color-hover-alt: 					var(--main-blue);
  --button-background-hover-alt: 				var(--white) url('../../uploads/bg-pattern-042.png');
  --button-box-shadow-hover-alt: 				0 0 6px 0 var(--black-lowest);
  --button-transform-hover-alt: 				var(--button-transform-hover);

  --locked-color: 								var(--white);
  --locked-background: 							var(--main-blue);
}

/* Typography
--------------------------------------------- */
@font-face { font-family: 'Contender'; font-display: block; font-style: normal; font-weight: 400; src: url('https://callpatriothvac.com/wp-content/themes/battleplantheme-site/fonts/Contender.eot'); src: local('Contender'), local('Contender-Regular'), url('https://callpatriothvac.com/wp-content/themes/battleplantheme-site/fonts/Contender.eot#iefix') format('embedded-opentype'), url('fonts/Contender.woff') format('woff2'), url('fonts/Contender.woff') format('woff'), url('https://callpatriothvac.com/wp-content/themes/battleplantheme-site/fonts/Contender.ttf') format('truetype'), url('https://callpatriothvac.com/wp-content/themes/battleplantheme-site/fonts/Contender.svg#Contender') format('svg') }

body {
	color: 										var(--darkest-grey);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color:										var(--main-red);
	text-transform:								uppercase;
	text-align:									center;
	transform: 									scale(0.7,1);
	line-height: 								0.9;
}

/* Links
--------------------------------------------- */
a, a:visited {
	color: 										var(--darkest-grey);
}

a:hover,
a:active,
a.tab-focus {
	color: 										var(--dark-grey);
}

/* Forms
--------------------------------------------- */
label,
#secondary label {
	font-family: 								var(--font-text);
	color:										var(--black);
}

::placeholder { 
	color:										var(--black-med);
}

span.wpcf7-spinner::before {
    color: 										var(--white-high);
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

.currently-open-banner {
	display: 									none;
	}

/* Header
--------------------------------------------- */
#masthead {
	position: 									relative;
	width: 										1550px;
	max-width: 									90%;
	margin: 									5.5em auto 2.9em;
	z-index: 									unset;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	border: 									1px solid var(--black-low);
	padding: 									0;
	box-shadow: 								inset 0 0 7px -4px var(--black-med);
}

#masthead::after {
	content: 									" ";
	position: 									absolute;
	top: 										0;
	left: 										0;
	width: 										calc(100% + 4em);
	height:  									calc(100% + 7em);
	margin: 									-4em -2em -3em;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	box-shadow: 								inset 700px 0 400px -600px var(--black-low), inset -700px 0 400px -600px var(--black-low), 0 0 15px 0 var(--black-med);
	border: 									1px solid var(--dark-grey);
	z-index: 									-1;
}

	#masthead.stuck {
		width: 									90%;
		margin-left: 							5%;
		margin-right: 							5%;
	}

.top-strip {
	margin-top:									-70px;
	padding:									0;
	background:none;
}

.logo-strip {
	background: 								transparent;
	padding:									0;
	z-index: 									5000;
	margin: 									10px 0 2em;
}

.logo {
	margin-top: 								-2.5em;
	filter: 									drop-shadow(-1px -1px 0 var(--black-highest)) drop-shadow(1px 1px 0 var(--grey-high)) drop-shadow(3px 3px 2px var(--black-med));
}

.phone-number,
.tag-line {
	color:										var(--main-red);
	text-transform:								uppercase;
	text-align:									center; 
	line-height: 								0.8;
	font-size: 									185%;
	transform: 									scale(0.7,1);
}

.phone-number {
	font-size: 									310%;
}

.menu-strip {
	background:none;
	margin-bottom: 								-54px;
}

.logo,
#desktop-navigation .menu-item:not(.mobile-only) {
	opacity: 									0;
}
		
/* Content
--------------------------------------------- */
.content-sidebar-box #main-content {
	position: 									relative;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	border: 									1px solid var(--black-low);
	margin:										5em 2em;
	padding: 									2em;
	box-shadow: 								inset 0 0 7px -4px var(--black-med);
}

.content-sidebar-box #main-content::after {
	content: 									" ";
	position: 									absolute;
	top: 										0;
	left: 										0;
	width: 										calc(100% + 4em);
	height:  									calc(100% + 4em);
	margin: 									-2em;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	box-shadow: 								inset 700px 0 400px -600px var(--black-low), inset -700px 0 400px -600px var(--black-low), 0 0 15px 0 var(--black-med);
	border: 									1px solid var(--dark-grey);
	z-index: 									-1;
}

/* Widgets
--------------------------------------------- */

/* Credit Card Logos */
.widget-credit-cards #credit-cards img {	
	border:										1px solid var(--black-lowest);
}

/* Sections
--------------------------------------------- */
.section[class*="style-"] {
	padding-top:								2em;
	padding-bottom:								2em;
}

/* Style 1 */
.section.style-1 {
	background:									var(--black-med);
	backdrop-filter: 							blur(10px);
	border-top: 								1px solid var(--white-low);
	border-bottom: 								1px solid var(--black-low);
	box-shadow: 								0 0 15px 0 var(--black-med);
}

.section.style-1 h2,
.section.style-1 h3,
.section.style-1 label {
	color: 										var(--white);
}

.section.style-1 p {
	color: 										var(--lightest-grey);
}

/* Style 2 */
.section.style-2 {
	background:									transparent;
	margin: 									4em 0;
}

.section.style-2 .col-inner {
	gap: 										0.5em 3%;
}

.section.style-2 .block-text {
	position: 									relative;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	border: 									1px solid var(--black-low);
	margin:										2em;
	padding: 									1.2em;
	box-shadow: 								inset 0 0 7px -4px var(--black-med);
}

.section.style-2 .block-text::after {
	content: 									" ";
	position: 									absolute;
	top: 										0;
	left: 										0;
	width: 										calc(100% + 2em);
	height:  									calc(100% + 2em);
	margin: 									-1em;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	box-shadow: 								inset 700px 0 400px -600px var(--black-low), inset -700px 0 400px -600px var(--black-low), 0 0 15px 0 var(--black-med);
	border: 									1px solid var(--dark-grey);
	z-index: 									-1;
}

.product-links .product-link-cats a {
  	font-size: 									calc(var(--button-font-size) * 0.9);
}

/* Footer
--------------------------------------------- */
#colophon {
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	border-top:									1px solid var(--black-low);
	margin-top:									5em;
	padding: 									0.25em;
	box-shadow: 								inset 0 0 7px -4px var(--black-med), 0 -40px 10px var(--black-med);
}

#colophon::after {
	content: 									" ";
	position: 									absolute;
	top: 										0;
	left: 										0;
	width: 										calc(100% + 10px);
	height:  									2em;
	margin-top:									calc(-2em - 1px);
	margin-left: 								-5px;
	background: 								var(--white) url('../../uploads/bg-pattern-042.png');
	box-shadow: 								inset 700px 0 400px -600px var(--black-low), inset -700px 0 400px -600px var(--black-low);
	z-index: 									-1;
}

.site-info {
	color:										var(--black);
}

.site-info a {
	color:										var(--black);
}

.site-info a:hover,
.site-info a:active,
.site-info a.tab-focus {
	color:										var(--black);
}

/* Icons & Social Media
--------------------------------------------- */
.icon i.fa {
	color: 										var(--main-red);
	font-size:									30px;
	background:									var(--white) url('../../uploads/bg-pattern-042.png');
	border: 									1px solid var(--lightest-grey);
	border-radius:								0%;
	box-shadow: 								0 0 15px 0 var(--black-med);
}

.social-button {
	width:										80px;
	height:										50px;
}

.social-button i.fa {
	color: 										var(--button-color-alt);
	transform: 									scale(0.9);
}

.social-button i.fa::before {
	font-size:									28px;
	line-height: 								1.85;
}

.social-button:hover i.fa {
	color: 										var(--button-color-hover-alt);
	transform: 									scale(1);
}

.social-button .social-bg {
	background:									var(--button-background-alt);
	box-shadow: 								var(--button-box-shadow-alt);
	border: 									var(--button-border-alt);
	transform: 									var(--button-transform-alt);
}

.social-button:hover .social-bg {
	background:									var(--button-background-hover-alt);
	box-shadow: 								var(--button-box-shadow-hover-alt);
	transform: 									var(--button-transform-hover-alt);
}

/* Site Navigation
--------------------------------------------- */

/* Main Menu */
.main-navigation ul {
	font-size:									42px;
	text-transform:								uppercase;
	font-weight:								normal;	
}

.main-navigation a {
	color:										var(--medium-grey);
	background: 								transparent;
	border:										none;
	padding:									8px 0 4px;
	transform: 									scale(0.7,1);
	transition: 								all 0.2s ease;
}

.main-navigation ul.main-menu li:hover > a, 
.main-navigation ul.main-menu li.active > a, 
.main-navigation ul.main-menu li > a.tab-focus {    
	color: 										var(--main-red);
	background: 								transparent;
	border:										none;
	transition: 								all 0.2s ease;
}

/* Mobile Menu */
#mobile-navigation {
	background: 								linear-gradient(180deg, var(--black-highest) 50%, var(--black-low) 100%);
}

#mobile-navigation li a {
	color:										var(--lightest-grey);
	background: 								transparent;
	padding: 									7px 25px 2px;
}

#mobile-navigation ul.main-menu li:hover > a, 
#mobile-navigation ul.main-menu li.active > a {    
	color:										var(--main-red);
	background: 								var(--lightest-grey);
}

.side-push #mobile-navigation {
	border-left: 								1px solid var(--black);
	box-shadow: 								-4px 0 5px var(--black-med);
}

/* Media
--------------------------------------------- */
#primary img, 
#wrapper-top img, 
#wrapper-bottom img, 
iframe {
	border: 									1px solid var(--black-lowest);
}

#wrapper-top img, 
#wrapper-bottom img, 
iframe {
	box-shadow: 								 0 0 15px 0 var(--black-med);
}

.inset-shadow::after {
	box-shadow: 								inset 0 0 10px var(--black-med);
}


img.img-404 {
	filter: 									sepia(0) contrast(1) hue-rotate(0deg) drop-shadow(-1px -1px 0 var(--black-low)) drop-shadow(1px 1px 0 var(--white-low));
}

/* Testimonials
--------------------------------------------- */
.testimonials-quote p {
	color:										var(--medium-grey);
}

.testimonials-quote p:first-of-type::before {
	color:										var(--medium-grey);
}

.testimonials-credentials {
	color:										var(--medium-grey);
}

.testimonials-rating {
	color:										var(--medium-grey);
}

/* Coupon
--------------------------------------------- */
.coupon	{
	background:									var(--white);
	border:										3px dashed var(--black);
	outline: 									3px solid var(--white);
}

.coupon .coupon-inner {
    background: 								transparent;
}

.coupon h2.action {
	color: 										var(--main-blue);
	font-size: 									200%;
}

.coupon h2.discount {
	color: 										var(--main-red);
	font-size: 									450%;
}

.coupon h2.service {
	color: 										var(--main-blue);
	font-size: 									275%;
}

.coupon p.disclaimer {
	color: 										var(--black);
}

/* Accordion Setup
--------------------------------------------- */
.block-accordion h2 { 
	color:										var(--main-blue);
	font-weight:								bold;
	transform: 									scale(1);
}

.block-accordion.active h2, 
.block-accordion:hover h2, 
.block-accordion h2.tab-focus { 
	color:										var(--main-red);
}

.block-accordion .accordion-content {
	border-bottom:								1px solid var(--black-lowest);
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Google Reviews Widget
--------------------------------------------- */
.wp-gr.wp-google-badge {
	background:									var(--white);
	border-color: 								var(--lightest-grey); 
}

.wp-gr .wp-google-rating .wp-google-value {
    color: 										var(--medium-grey);
}

.wp-gr .wp-google-rating .wp-google-stars {
    color: 										var(--medium-grey);
}

.wp-gr .wp-google-total {
    color: 										var(--medium-grey);
}

/*--------------------------------------------------------------
# Mobile Styles
--------------------------------------------------------------*/

/* Desktops */
@media only screen and (min-width: 1025px) { 
}

/* 4: Large Tablets (landscape) */
@media (max-width: 1280px) {
	html::before {
		background-image: 							url('../../uploads/site-background.webp');
	}

}

/* 3: Small Tablets (landscape) */
@media (max-width: 1024px) {
	html::before {
		background-image: 							url('https://callpatriothvac.com/wp-content/uploads/site-background-tablet.webp');
		background-position: 						left;
	}	
	
	.top-strip {
	  	margin-top: 								-65px;
	}

	.top-strip .flex.grid-custom {
		grid-template-columns: 						1fr 200px 1fr !important;
	}
	
	#secondary {
		position: 									relative;
		background: 								var(--white) url('../../uploads/bg-pattern-042.png');
		border: 									1px solid var(--black-low);
		margin:										2em 0;
		padding: 									2em;
	}

	/* Sidebar */	
	#secondary::before {
	  	content: 									"Swipe to view more";
	  	width:										80vw;
	  	margin: 									1em auto 3em;
	  	position: 									relative;
	  	display: 									block;
	  	text-align: 								center;
	  	font-style: 								italic;
	  	font-family: 								"Open Sans",sans-serif;
	  	font-size: 									16px;
	  	border-top: 								1px solid var(--black-low);
	  	border-bottom: 								1px solid var(--black-low);
	}
}

/* 2: Phones (landscape) + Tablets (portrait) */
@media (max-width: 860px) {
	.phone-number {
		font-size: 									275%;
	}
	
	.logo-strip .logo {
		margin-top: 								1em;
	}
}

/* 1: Phones (portrait) */
@media (max-width: 576px) {
	html::before {
		background-image: 							url('https://callpatriothvac.com/wp-content/uploads/site-background-phone.webp');
		background-position: 						left;
	}
	
	#masthead::after {
  		height: 									calc(100% + 5em);
  		margin: 									-3em -2em -2em;
	}
  
	.phone-number {
	  	margin-top: 								14px;
	}
	
	.logo-strip .logo img {
		margin: 									0 auto;
		height: 									32vh;
	}
	
	#wrapper-content {
		margin-top: 								90px;
	}
	
	.content-sidebar-box #main-content {
		margin: 									1em 0.5em;
  		padding: 									1em;
	}
}


.holiday-theme .section.style-2::before {
	display: 										none !important;
}