/*--------------------------------------------------------------
>>> 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
	- Carousel
# Mobile Styles


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

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

:root {
  --font-primary: 								"Radcliffe"; 
  --font-secondary: 							"Open Sans";
  --font-tertiary: 								var(--font-secondary);
  --font-text: 									"Open Sans", sans-serif;

  --main-blue: 									rgba(0, 0, 254, 1); 			/*0000fe*/
  --main-red: 									rgba(254, 0, 0, 1); 			/*fe0000*/
	
  --accent-color: 								var(--black);
  --accent-border: 								1px solid var(--black);
  --accent-background: 							var(--white-high);
  
  --warning: 									rgba(255, 0, 0, 1);  
	
  --anon-icon: 									var(--accent-color);
  --anon-icon-bg: 								var(--accent-background);
		 
  --text-color: 								var(--black);
	
  --font-size-h2: 								calc(var(--font-size-h1) - 11rem);
    
  --input-color: 								var(--black);
  --input-background: 							var(--white);

  --input-color-focus: 							var(--darkest-grey);
  --input-background-focus: 					var(--input-background);
  
  --button-color: 								var(--black);
  --button-background: 							var(--white-highest);
  --button-font-weight: 						bold;
  --button-border: 								2px solid var(--darkest-grey);
  --button-text-transform: 						uppercase;

  --button-color-hover: 						var(--white);
  --button-background-hover: 					var(--main-red);
  --button-border-hover: 						2px solid var(--main-red);
 
  --break-out-width: 							100%;
  --break-out-max-width: 						960px;
  --break-out-background: 						var(--black-lowest);
  --break-out-border-top:						2px solid var(--black);
  --break-out-border-bottom:						2px solid var(--black);
  --break-out-border-right:						none; 
  --break-out-border-left:						none;
  --break-out-padding: 							1.5em 2.5em;
  --break-out-margin: 							2.5em auto;
  --break-out-box-shadow: 						none;
  --break-out-border-radius: 					0;
  --break-out-outline: 							none;
  --break-out-filter: 							none;
  --break-out-transition: 						all var(--main-trans-speed) var(--main-trans-easing);
  
  --locked-color: 								var(--white);
  --locked-background: 							var(--black-high);
  --locked-border: 								none;

}

/* Typography
--------------------------------------------- */
@font-face { font-family: 'Radcliffe'; font-display: block; font-weight: 400; font-style: normal; src: url('../battleplantheme-site/fonts/radcliffe.woff2') format('woff2') }

body {
	background: 									var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 									var(--font-primary);
	font-weight: 									normal;
	line-height: 									1.1;
	color:											var(--black);
	text-transform:									capitalize;
	font-variant: 									small-caps;
	text-align:										center; 
	margin:											0;
}

#wrapper-content h1 {
	padding-left: 									100px;
}

/* Links
--------------------------------------------- */
a {
	color: 											var(--medium-grey);
	background-color: 								transparent;
	cursor:											pointer;
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}

a:visited {
	color: 											var(--text-color);
}

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

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

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

span.wpcf7-spinner::before {
    color: 											var(--main-red);
}

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

/* Header
--------------------------------------------- */
.top-strip {
	margin:											0;
	padding-top:									3px;
	padding-bottom:									3px;
	background:                                     var(--black);
	z-index:										3000;
}

.tag-line,
.phone-number {
	font-family: 									var(--font-text);
	font-size:										140%;
	font-variant: 									small-caps;
	font-weight: 									bold;
	color: 											var(--white);
}

.divider-strip,
.logo-strip {
	margin:											0 0 -185px;
	padding-top:									50px;
	padding-bottom:									0;
	background: 									transparent;
	z-index:										2000;
	pointer-events: 								none;
}

.logo-strip {
	position: 										absolute !important;
	margin:											0;
	z-index:										5000;
}

.logo {
	margin:  										-30px auto 0;
	pointer-events: 								auto;
}
 
.logo-letters,
.logo-arrows {
	position: 										absolute;
	max-width: 										280px;
	z-index: 										1000; 
}

.logo-arrows {
	position: 										relative;
	z-index: 										500;
    animation:										arrow-spin 8s ease-in-out infinite;
}

@keyframes arrow-spin {
	0% 		{ transform:rotate(0deg) } 
	90% 	{ transform:rotate(1080deg) } 
	100% 	{ transform:rotate(1080deg) } 
} 

.menu-strip {
	position: 										absolute;
	margin-top:										43px;
	width: 											100%;
	height: 										69px;
	border-top: 									2px solid transparent;
	border-bottom: 									2px solid transparent;
  	align-content: 									center;
	background:                                     linear-gradient(90deg, var(--light-grey) 0%, var(--lightest-grey) 25%, var(--white) 50%, var(--lightest-grey) 75%, var(--light-grey) 100%);
	z-index:										4000;
	transition: 									all 0.3s ease;
}

	.menu-strip.stuck {
		height: 										49px;
		margin-top:										0;
		border-top: 									2px solid var(--black-low);
		border-bottom: 									2px solid var(--black-low);
		transition: 									all 0.3s ease;
	}

#masthead .header-svg,
#wrapper-content .body-svg {
	position: 										absolute;
	width: 											100%;
	z-index: 										2000;
}

#masthead .header-svg {
	top: 											112px;
}

.header-svg svg {
	pointer-events: 								none;	
}

#masthead .header-svg .top,
#wrapper-content .body-svg .top {
	fill: 											var(--black);
}

#masthead .header-svg .bottom,
#wrapper-content .body-svg .bottom {
	fill: 											var(--main-red);
}

#wrapper-content .body-svg {
	bottom: 										-7px;
	pointer-events: 								none;
}
	
.divider-strip .brand-holder {
	padding-right: 									80px;
}
	
.divider-strip .social-holder,
.divider-strip .brand-holder {
	pointer-events: 								auto;
	transform: 										translateY(40px);
}

.social-box { 
	margin-bottom: 									20px;
}

.logo,
#desktop-navigation ul.main-menu > .menu-item:not(.mobile-only) {
	opacity: 										0;
}

/*
.currently-open-banner.reveal-open {
  	transform: 										translate(15px, -10px) rotate(10deg);
}

.currently-open-banner.horz.reveal-open {
 	transform: 										translate(-260px, 30px) rotate(0);
}

.currently-open-banner.horz::before {
    left: 											10px;
}
*/

/* Content
--------------------------------------------- */
#wrapper-content {
	background:                                    linear-gradient(90deg, transparent 0%, var(--white-high) 25%, var(--white-high) 75%, transparent 100%);
}

.content-sidebar-box #main-content {
  	background: 									var(--white-lowest);
	backdrop-filter: 								blur(4px);
	border-left: 									2px solid var(--white-low);
	border-right: 									2px solid var(--white-low);
	margin: 										0 auto;
	padding: 										calc(1em + 245px) 3em calc(1em + 185px) ;
}

.content-sidebar-box #primary {
  	background: 									transparent;
}

ul.bullet-check li::before {
  	font-size: 										150%;
	transform: 										translateY(4px);
	color: 											var(--dark-blue);
	text-shadow: 									1px 1px 0 var(--white-med), -1px -1px 0 var(--white-lowest);
}


/* Sections
--------------------------------------------- */
.section[class*="style-"] {

}

/* Style 1 */
.section.style-1 {
	background: 									var(--black);
	padding-top: 									1.5em;
  	padding-bottom: 								3.5em;
	border-bottom: 									2px solid var(--main-red);
}

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

/* Style 2 */
.section.style-2 {
	background:                                    	transparent;
}

.section.style-2 .col-inner {
	background:                                    	var(--white-high);
	backdrop-filter: 								blur(4px);
	border: 										2px solid var(--white-low);
	padding: 										35px;
} 

/* Style 3 */
.section.style-3 {
	background:                                    	var(--white-high);
	backdrop-filter: 								blur(4px);
	border: 										2px solid var(--white-low);
	padding: 										35px;
}

/* Footer
--------------------------------------------- */
#colophon {
	background: 									var(--black);
}

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

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

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

/* Icons & Social Media
--------------------------------------------- */
.icon-box .icon {
	color: 											var(--white);
	background: 									var(--main-blue);
}

a.icon-btn,
a.icon-btn:visited {
	color:											var(--darkest-grey);
	transform:										rotate(360deg);
}

#colophon a.icon-btn,
#colophon a.icon-btn:visited {
	color:											var(--main-red);
	transform:										rotate(360deg);
}

a.icon-btn:hover,
a.icon-btn:active,
a.icon-btn.tab-focus {
	color:											var(--main-blue);
	transform:										rotate(0deg);
}

a.icon-btn .icon-bg {
	background:										transparent;
	border: 										none;
}

a.icon-btn:hover .icon-bg,
a.icon-btn:active .icon-bg,
a.icon-btn.tab-focus .icon-bg {
	background:										transparent;
	border: 										none;
}

/* Site Navigation
--------------------------------------------- */
/* Main Menu */
.main-navigation ul {
	margin: 										0;
  	padding-left: 									380px;
  	padding-right: 									0;
	font-family:									var(--font-secondary);
	font-size:										28px;
	text-transform:									uppercase;
	font-weight:									bold;	
	transition: 									all 0.6s cubic-bezier(0.645, 0.260, 0.265, 1.550);
}

	.main-navigation.stuck ul {
	  	padding-left: 									20px;
	  	padding-right: 									20px;
		transition: 									all 0.6s ease;
	}

.main-navigation a {
	background: 									transparent;
	border:											none;
	padding:										8px 0;
	text-decoration: 								none;
	color:											var(--black);
	line-height:									1;
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}

.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: 									none;
	border:											none;
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}

/* Sub-Menu */
#desktop-navigation ul.sub-menu {
	background:										var(--lightest-grey);
	border:											2px solid var(--main-red);
	transform: 										scale(0,1) translateY(12px);
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}	

#desktop-navigation li:hover ul.sub-menu,
.main-navigation ul.sub-menu.active,
#desktop-navigation li.menu-item-has-children[aria-expanded="true"] ul.sub-menu {
	transform: 										scale(1) translateY(12px);
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}	

	#desktop-navigation.stuck li:hover ul.sub-menu,
	.main-navigation.stuck ul.sub-menu.active,
	#desktop-navigation.stuck li.menu-item-has-children[aria-expanded="true"] ul.sub-menu {
		transform: 										scale(1) translateY(0px);
		transition:										all var(--main-trans-speed) var(--main-trans-easing);
	}	

.main-navigation ul.sub-menu li a {
	padding:										4px 20px;
}

/* Mobile Menu */
#mobile-menu-bar {
	background: 								    var(--darkest-grey);
	border-bottom: 									2px solid var(--dark-grey);
	box-shadow: 									none;
}

#mobile-navigation {
	top:											42px;
	padding-top:									var(--measure-small);
	padding-bottom:									var(--measure-small);
	background: 								    var(--black);
}

.side-slide #mobile-navigation, 
.side-push #mobile-navigation, 
.top-drop #mobile-navigation {
  	border-left: 									2px solid var(--dark-grey);
  	box-shadow: 									none;
}

#mobile-navigation li a {
	color:											var(--white);
}

#mobile-navigation ul.main-menu li:hover > a, 
#mobile-navigation ul.main-menu li.active > a {    
	color:											var(--white);
	background: 									var(--white-med);
	border-top: 									1px solid var(--black-med);
	border-bottom: 									1px solid var(--white-low);
	transform: 										rotate(0) translate(0,0) scale(1);
	transition: 									all 0.1s var(--main-trans-easing);
}

/* Media
--------------------------------------------- */
#primary img:not(.img-widget), 
#wrapper-top img, 
#wrapper-bottom img, 
iframe,
svg.anonymous-icon {
	border: 										2px solid var(--white-low);
}

img.logo-slider-img,
img.img-products,
img.products-img {
}	

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,
.testimonials-credentials {
	color: 											var(--white);
}

.testimonials-quote p:first-of-type .icon {
	color: 											var(--main-red);
}

/* Coupon
--------------------------------------------- */
.coupon	{
	background:										url('../../uploads/site-icon.webp') no-repeat 50% 50%;
	border:											3px dashed var(--black);
	outline: 										3px solid var(--white);
}

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

.coupon h2.action,
.coupon h2.discount,
.coupon h2.service,	
.coupon p.disclaimer {
}

/* Accordion Setup
--------------------------------------------- */
.block-accordion h2 { 
	color: 												var(--black);
}

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

/*--------------------------------------------------------------
# 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');
	}

	.tag-line,
	.phone-number {
		font-size:										130%;
	}
}

/* 3: Small Tablets (landscape) */
@media (max-width: 1024px) {
	html::before {
		background-image: 								url('../../uploads/site-background-tablet.webp');
	}
	
	.divider-strip .social-holder {
		display: 										none;
	}
	
	.divider-strip .brand-holder {
		transform: 										translateY(-10px);
	}
		
	.divider-strip .grid-custom {
		grid-template-columns: 							380px 1fr 2fr !important;
	}

	
	#masthead .header-svg {
	  	top: 											39px;
	}
	 
	.logo-letters,
	.logo-arrows {
		max-width: 										220px;
	}
	
	#wrapper-content {
	    background:                                    linear-gradient(90deg, var(--white-med) 0%, var(--white-high) 20%, var(--white-high) 80%, var(--white-med) 100%);
	}
	
	.content-sidebar-box #main-content {
	  	padding: 										calc(1em + 185px) 3em calc(1em + 185px);
	}
	
}

/* 2: Phones (landscape) + Tablets (portrait) */
@media (max-width: 860px) {
	
	.top-strip .grid-custom {
		grid-template-columns: 							240px 2fr 1fr !important;
	}
	
	.divider-strip .brand-holder {
		margin-top: 									-110px;
	}
	
	.logo-strip .logo {
		margin-left: 									0;
	}
	
	.content-sidebar-box #main-content {
	  	padding: 										calc(1em + 125px) 3em calc(1em + 165px);
	}
}

/* 1: Phones (portrait) */
@media (max-width: 576px) {
	html::before {
		background-image: 								url('../../uploads/site-background-phone.webp');
	}  
	
	#masthead .header-svg {
		top: 											68px;
	  }
	
	#wrapper-content {
	    background:                                    linear-gradient(90deg, var(--white-med) 0%, var(--white-high) 2em, var(--white-high) 80%, var(--white-med) calc(100% - 2em));
	}
	
	.logo-strip .grid-custom {
		grid-template-columns: 							1fr !important;
	}
	
	.logo-strip .logo {
		margin: 										30px auto;
	}
	
	.content-sidebar-box #main-content {
		padding: 										calc(1em + 205px) 1em calc(1em + 65px);
	}
	
	.divider-strip .brand-holder {
		display: 										none;
	}
	
	#wrapper-content h1 {
	  	padding-left: 									0;
	}
}