/*--------------------------------------------------------------
>>> 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: 								Helvetica, Arial, Verdana, sans-serif; 
  --font-secondary: 							var(--font-primary);
  --font-tertiary: 								var(--font-secondary);
  --font-text: 									"Open Sans", sans-serif;
		
  --dark-grey: 									rgba(45, 66, 79, 1);

  --yellow: 									rgba(255, 203, 34, 1);  
  --bright-yellow: 								rgba(255, 239, 82, 1);
  --pale-yellow: 								rgba(234, 223, 201, 1);
  --orange: 									rgba(255, 140, 48, 1);  
  --dk-orange: 									rgba(229, 129, 16, 1);  

  --dk-blue: 									rgba(42, 60, 153, 1);  
  --md-blue: 									rgba(17, 127, 203, 1);  
  --lt-blue: 									rgba(4, 162, 229, 1);  

  
  --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);
    
  --input-color: 								var(--dk-blue);

  --input-color-focus: 							var(--dk-orange);
	
  --button-color: 								var(--white);
  --button-background: 							var(--dark-grey);
  --button-font-weight: 						bold;
  --button-border: 								2px solid var(--dark-grey);
  --button-padding: 							0.6em 1em;
  --button-border-radius: 						5px;
  --button-text-transform: 						uppercase;

  --button-color-hover: 						var(--white);
  --button-background-hover: 					var(--lt-blue);
  --button-border-hover: 						2px solid var(--dark-grey);
 
  --button-color-alt: 							var(--dk-blue);
  --button-background-alt: 						var(--white);
  --button-border-alt: 							2px solid var(--white);

  --button-color-hover-alt: 					var(--button-color-hover);
  --button-background-hover-alt: 				var(--button-background-hover);
  --button-border-hover-alt: 					2px solid var(--white);
}

/* Typography
--------------------------------------------- */
body {
	background: 									var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 									var(--font-primary);
	font-weight: 									bold;
	line-height: 									1.3;
	color:											var(--dk-blue);
	text-transform:									capitalize;
	text-align:										center; 
	margin:											0;
}

h3.widget-title {
	color: 											var(--white);
}

/* 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 {
	color:											var(--text-color);
}

#secondary label {
	color:											var(--white);
}

::placeholder { 
	color:											var(--black-med);
}

span.wpcf7-spinner::before {
    color: 											var(--white-high);
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */
.top-strip {
	margin:											0;
	padding-top:									8px;
	padding-bottom:									8px;
	background:										var(--light-grey);
	z-index:										3000;
}

.tag-line,
.address,
.phone-number {
	font-family: 									var(--font-primary);
	font-size:									 	30px;
	color: 											var(--dk-orange);
	text-transform: 								uppercase;
	font-weight: 									bold;
}

.menu {
	margin-top: 									40px;
}

.tag-phone-holder {
	margin: 										-20px 0 0px;
}

.logo-strip {
	margin:											0;
	padding-top:									10px;
	padding-bottom:									10px;
	background:										var(--white);
	z-index:										1000;
}

.logo-strip .flex {
	gap: 											0 3%;
}

.menu-strip {
	margin:											0;
	padding-top:									0;
	padding-bottom:									0;
	background:										transparent;
	z-index:										2000;
}

.logo {
	/*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-top .section-edge::after {
	content: 										"";
	position: 										absolute;
	width: 											100%;
	height: 										100%;
	background: 									linear-gradient(90deg, transparent 40%, var(--black-med) 80%);
}

.home-splash-msg .message {
	background: 									var(--orange);
	padding: 										40px 20px 50px;
	z-index: 										2000;
	border-radius: 									20px 0 0 20px;
}

.home-splash-msg .licensed-insured {
	transform: 										translate(calc(50% + 120px), 0%);
	z-index: 										3000;
}

@supports (-webkit-touch-callout: none) {
	.home-splash-msg .licensed-insured {
		position: 									relative;
    	top: 										-25px;
    	transform: 									translateY(0);
    	display: 									block;
	}
}

.home-splash-msg .message .col-inner {
	width: 											80%;
	margin-left: 									10%;
}

.splash-headline-1,
.splash-headline-2 {
	font-family: 									var(--font-primary);
	font-size: 										calc(var(--font-size-h1) * 1.2);
	color: 											var(--white);
	font-weight: 									bold;
	line-height: 									1.1;
}

.splash-headline-2 {
	font-size: 										var(--font-size-h4);
	color: 											var(--bright-yellow);
}

.splash-headline-1,
.splash-headline-2,
.home-splash-msg .message .block-button {
	text-align: 									right;
}

#wrapper-content {
	background: 									var(--pale-yellow);
}

#wrapper-content .coupons img {
	border: 										2px dashed var(--dark-grey);
}

#main-content {
	margin-top: 									0;
	margin-bottom: 									0;
}

#main-content #primary {
	padding-top: 									var(--measure-large);
	padding-bottom: 								var(--measure-large);
}

.sidebar-box #secondary {
	background: 									linear-gradient(45deg, var(--md-blue) 15%, var(--lt-blue) 50%, var(--md-blue) 100%);
	
}

#wrapper-content ul.bullet-check li::before {
  	color: 											var(--md-blue);
}

#wrapper-content ul.bullet-check li b,
#wrapper-content ul.bullet-check li strong {
  	color: 											var(--dk-blue) !important;
}

/* Widgets
--------------------------------------------- */
/* Credit Card Logos */
.widget.bg-alt {
	background: 									var(--white);
	padding: 										10px;
}

/* Sections
--------------------------------------------- */
.section[class*="style-"] {
}

/* Style 1 */
.section.style-1 {
	background: 									var(--pale-yellow);
}

.section.style-1 .col-inner {
	background: 									var(--white);
	padding: 										0 20px;
	border-radius: 									20px;
	border: 										8px solid var(--dark-grey);
	margin-top: 									40px;
} 

#services-teasers img {
	margin: 										-75px auto 20px;
}

#services-teasers p {
	text-align: 									center;
}

#services-teasers .block-button {
	margin-bottom: 									-30px;
}

/* Style 2 */
.section.style-2 {
	background: 									linear-gradient(-45deg, var(--dk-blue) 0%, var(--md-blue) 50%, var(--dk-blue) 100%);
}

.section.style-2 h2,
.section.style-2 h3,
.section.style-2 .testimonials-quote p:first-of-type .icon,
.section.style-2 .testimonials-credentials,
.section.style-2 .testimonials-rating {
	color: 											var(--yellow);
}

.section.style-2 p,
.section.style-2 ul {
	color: 											var(--white);
}

.section.style-2 .testimonials-platform-facebook {
  	filter: 										drop-shadow(1px 0 0 var(--white-low)) drop-shadow(-1px 0 0 var(--white-low)) drop-shadow(0 1px 0 var(--white-low)) drop-shadow(0 -1px 0 var(--white-low));
}

.section.style-2.section-edge {
	padding: 										0;
}

.section.style-2.section-edge .flex {
	gap: 											0;
}

.section.style-2.section-edge .padded {
	padding: 										3em 3%;
} 

/* Style 3 */
.section.style-3 {
	background: 									var(--white);
}

/* Style 4 */
.section.style-4 {
	background: 									linear-gradient(-45deg, var(--orange) 0%, var(--yellow) 15%, var(--bright-yellow) 50%, var(--yellow) 85%, var(--orange) 100%);
}

.section.style-4 h2,
.section.style-4 h3,
.section.style-4 p,
.section.style-4 ul {
	color: 											var(--dk-blue);
}

.section.style-4 ul {
	font-size: 										120%;
}

/* Style 5 */
.section.style-5 {
	background: 									var(--md-blue);
	padding-top: 									0.75em;
	padding-bottom:									0.75em;
}

.section.style-5 h2 {
	color: 											var(--white);
}

/* Footer
--------------------------------------------- */
#colophon {

}

.site-info {

}

.site-info .site-info-right a {
}

.site-info .site-info-right a:hover,
.site-info .site-info-right a:active,
.site-info .site-info-right a.tab-focus {
}

/* Icons & Social Media
--------------------------------------------- */
.icon-box .icon {
	color: 											var(--white);
	background: 									var(--dk-blue);
	border: 										none;
	border-radius: 									none;
}

a.icon-btn {
	color:											var(--md-blue);
	transform:										rotate(360deg);
}

a.icon-btn:hover,
a.icon-btn:active,
a.icon-btn.tab-focus {
	color:											var(--orange);
	transform:										rotate(0deg);
}

a.icon-btn .icon-bg {
	background:										var(--white);
	transform:										scale(0);
}

a.icon-btn:hover .icon-bg,
a.icon-btn:active .icon-bg,
a.icon-btn.tab-focus .icon-bg {
	background:										var(--white);
	border: 										2px solid var(--md-blue);
	transform:										scale(1);
}


/* Site Navigation
--------------------------------------------- */
/* Main Menu */
.main-navigation ul {
	margin: 										0;
	padding-left: 									2%;
	padding-right: 									2%;
	font-family:									var(--font-secondary);
	font-size:										20px;
	text-transform:									uppercase;
	font-weight:									bold;	
}

.main-navigation a {
	background: 									transparent;
	border:											none;
	padding:										8px 0;
	text-decoration: 								none;
	color:											var(--md-blue);
	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(--dk-blue);
	background: 									none;
	border:											none;
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}


/* Menu Button BG */
#desktop-navigation ul.main-menu li::before, 
#desktop-navigation ul.main-menu li::after { 
	background: 									transparent;
	border-bottom: 								 	2px solid var(--dk-blue);
	transform:										scale(0,1);
 	transform-origin: 								50% 50%;
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
	pointer-events:									none;
	z-index:										1000;
}

#desktop-navigation ul.main-menu li:hover::before, 
#desktop-navigation ul.main-menu li.active::before,
#desktop-navigation ul.main-menu li.tab-focus::before,
#desktop-navigation ul.main-menu li:hover::after, 
#desktop-navigation ul.main-menu li.active::after,
#desktop-navigation ul.main-menu li.tab-focus::after { 
	transform:										scale(1,1);
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}

/* Sub-Menu */
.main-navigation ul.sub-menu {
	transform: 										scale(1) translateY(-2px);
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}	

#desktop-navigation ul.sub-menu {
	background:										var(--dk-blue);
	border:											none;
	z-index: 										10000;
}	

#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(-2px);
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}	

.main-navigation ul.sub-menu li a {
	color: 											var(--white);
	padding:										4px 20px;
}

.main-navigation ul.sub-menu li:hover > a, 
.main-navigation ul.sub-menu li.active > a, 
.main-navigation ul.sub-menu li > a.tab-focus {    
	color: 											var(--white);
	background: 									var(--md-blue);
	border:											none;
	transition:										all var(--main-trans-speed) var(--main-trans-easing);
}


/* Mobile Menu */
#mobile-menu-bar {
	background: 								    linear-gradient(0deg, var(--dk-blue) 0%, var(--lt-blue) 100%);	 
	border-bottom: 									1px solid var(--dk-blue);
}

#mobile-menu-bar a,
#mobile-menu-bar .mm-bar-btn.scroll-to-top-btn .icon,
#mobile-menu-bar .mm-bar-btn.call-btn .icon,
#mobile-menu-bar .email-btn .icon,
#mobile-menu-bar .email2-btn .icon {
	color:											var(--bright-yellow);
}

#mobile-menu-bar .mm-bar-btn.activate-btn div {
	background-color: 								var(--bright-yellow);
}

#mobile-navigation {
	top:											42px;
	padding-top:									var(--measure-small);
	padding-bottom:									var(--measure-small);
	background: 								    linear-gradient(0deg, var(--lt-blue) 0%, var(--dk-blue) 100%);
}

#mobile-navigation li a {
	color:											var(--white);
	background: 									transparent;
}

#mobile-navigation ul.main-menu li:hover > a, 
#mobile-navigation ul.main-menu li.active > a {    
	color:											var(--dk-blue);
	background: 									var(--orange);
	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 {
}

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));
}

/* 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 {
}

/* Office Hours
--------------------------------------------- */
.office-hours {
	max-width: 										600px;
	width: 											60%;
	margin: 										15px auto 0;
}

#wrapper-content .office-hours > div.today {
  	border: 										none;
  	background: 									var(--md-blue);
	color: 											var(--white);
}


/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Mobile Styles
--------------------------------------------------------------*/

/* Desktops */
@media only screen and (min-width: 1025px) { 
}

/* 5: Small Desktops */
@media (max-width: 1800px) {
	.home-splash-msg .message .col-inner {
	  	width: 											70% !important;
	  	margin-left: 									25% !important;
	}
	
	.splash-headline-1 {
	  	font-size: 										calc(var(--font-size-h1) * 0.9);
	} 
	.splash-headline-2 {
	  	font-size: 										calc(var(--font-size-h4) * 0.9);
	} 
}

/* 5: Small Desktops */
@media (max-width: 1440px) {
	
	.home-splash-msg .licensed-insured {
	  	transform: 										translate(calc(50% + 140px), 0%);
	}
	
	.col.licensed-insured img {
		max-width: 										250px;
	}	
	
	.home-splash-msg .message .col-inner {
	  	width: 											60% !important;
	  	margin-left: 									35% !important;
	}
	
	.splash-headline-1 {
	  	font-size: 										calc(var(--font-size-h1) * 0.8);
	} 
	.splash-headline-2 {
	  	font-size: 										calc(var(--font-size-h4) * 0.8);
	} 
}

/* 4: Large Tablets (landscape) */
@media (max-width: 1280px) {
	.home-splash-msg .licensed-insured {
	  	transform: 										translate(calc(50% + 30px), 0%);
	}
	
	.home-splash-msg .message .col-inner {
	  	width: 											75% !important;
	  	margin-left: 									20% !important;
	}
	
	.splash-headline-1 {
	  	font-size: 										calc(var(--font-size-h1) * 0.95);
	} 
	.splash-headline-2 {
	  	font-size: 										calc(var(--font-size-h4) * 0.95);
	} 
}

/* 3: Small Tablets (landscape) */
@media (max-width: 1024px) {	
	.home-splash-msg .licensed-insured {
		transform: 										translate(calc(50% + 15px), 0%);
	}
	
	.col.licensed-insured img {
		max-width: 										200px;
	}
	
	.logo-strip .grid-custom {
		grid-template-columns: 							1fr !important;
	}

	.logo-strip .menu {
		display: 										none;
	}
	
	.logo-strip .logo img {
		max-width: 										500px;
	}

	.tag-phone-holder {
		margin: 										0;
	}	
	
	.splash-headline-1 {
	  	font-size: 										calc(var(--font-size-h1) * 0.85);
	} 
	.splash-headline-2 {
	  	font-size: 										calc(var(--font-size-h4) * 0.85);
	} 
	
}

/* 2: Phones (landscape) + Tablets (portrait) */
@media (max-width: 860px) {
	.splash-headline-1 {
	  	font-size: 										calc(var(--font-size-h1) * 0.85);
	} 
	.splash-headline-2 {
	  	font-size: 										calc(var(--font-size-h4) * 0.85);
	} 
	
	#services-teasers {
		padding-bottom: 								0;
	}
	
	#services-teasers .col {
		margin-top: 									45px;
		margin-bottom: 									45px;
	}
	
	#wrapper-bottom #testimonials .crew-pic {
		padding-top: 									3em;
	}
}

/* 1: Phones (portrait) */
@media (max-width: 576px) {
	.logo-strip .logo img {
    	max-width: 										100%;
		max-height: 									unset;
  	}
	
	.tag-line {
  		font-size: 										18px;
	}
	
	#wrapper-top .home-splash-msg {
		height: 										220px !important;
	}
	
	.home-splash-msg .licensed-insured {
		position: 										absolute;
		right: 											35%;
	}		
	
	.col.licensed-insured img {
		max-width: 										70%;
	}	
	
	#wrapper-top .message {
		background: 									var(--orange);
		margin: 										0 !important;
		padding: 										1.5em 0.5em;
	}
	
	#wrapper-top .message .splash-headline-1,
	#wrapper-top .message .splash-headline-2 {
		text-align: 									center;
	}
		
}