/*
 Theme Name:   Holler Astra Child Theme
 Theme URI:    https://www.HollerDigital.com
 Description:  Theme settings, styling, and functionality for custom WordPress theme built by Holler Digital.
 Author:       Holler Digital
 Author URI:   https://www.HollerDigital.com
 Template:     astra
 Version:      2.0.01
 License:	   GPL-2.0+
 License URI:  http://www.gnu.org/licenses/gpl-2.0.txt
 Text Domain:  holler-astra 
*/

/*--------------------------------------------------------------
# INSTRUCTIONS:
# -------------
# This is the master stylesheet. This is where you control what
# other SASS files will be included in the final CSS file. 
#
# NOTE:
# The only exception are the files under /page/templates/
# which are standalone files that will be created as separeate
# CSS stylesheets and only loaded on the pages they pertain to.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Helpers
--------------------------------------------------------------*/

/*--------------------------------------------------------------
* Mixin for applying Fuild Values to CSS properties like font-size or line-height
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Media Query Responsive Breakpoint Variables
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Creates a media query with a min and max pixel range
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Creates a media query with a max pixel value
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Creates a media query with a min pixel value
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Typography Styles
--------------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.25em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-family: 'Open Sans', sans-serif;
}

h1.mt-0,
h2.mt-0,
h3.mt-0,
h4.mt-0,
h5.mt-0,
h6.mt-0 {
	margin-top: 0;
}

h1.mb-0,
h2.mb-0,
h3.mb-0,
h4.mb-0,
h5.mb-0,
h6.mb-0 {
	margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: unset;
}

.style-h {
	font-family: 'Open Sans', sans-serif;
	font-weight: 900;
	line-height: 1.25;
}

.ct-text-block a,
.oxy-rich-text a {
	text-underline-position: under;
	text-decoration: underline;
	font-weight: 700;
	opacity: 0.8;
}

.ct-text-block a:hover,
.oxy-rich-text a:hover {
	text-underline-position: under;
	text-decoration: underline;
	opacity: 1;
}

.ct-text-block.link-white a,
.oxy-rich-text.link-white a {
	color: rgba(255, 255, 255, 0.6);
	transition: all 300ms;
}

.ct-text-block.link-white a:hover,
.oxy-rich-text.link-white a:hover {
	color: white;
}

strong,
b {
	font-weight: 800;
}

.ct-text-block ul li,
.ct-text-block ol li,
.oxy-rich-text ul li,
.oxy-rich-text ol li,
.ct-code-block ul li,
.ct-code-block ol li {
	margin-bottom: 1em;
}

.external-link-style,
.hint-external-links a:not([href^="https://template-oxy.pdms.ca/"]):not([href^="#"]):not([href^="/"]) {
	position: relative;
	padding-right: 0.5em;
	text-decoration: underline;
	-webkit-text-decoration-style: dotted;
	text-decoration-style: dotted;
	text-underline-position: under;
}

.external-link-style:after,
.hint-external-links a:not([href^="/"]):not([href^="#"]):not([href^="https://template-oxy.pdms.ca/"]):after {
	content: '';
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	width: 0.5em;
	height: 0.5em;
	color: black;
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNDc4Ljk2NyI+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj48cGF0aCBkPSJNNDAwLDI3OS45Njd2MTQ1YTYuMDE3Niw2LjAxNzYsMCwwLDEtNiw2SDU0YTYuMDE3Niw2LjAxNzYsMCwwLDEtNi02di0zNDBhNi4wMTc2LDYuMDE3NiwwLDAsMSw2LTZIMTk4di00OEg0OGE0OC4wMTI0LDQ4LjAxMjQsMCwwLDAtNDgsNDh2MzUyYTQ4LjAxMjQsNDguMDEyNCwwLDAsMCw0OCw0OEg0MDBhNDguMDEyNCw0OC4wMTI0LDAsMCwwLDQ4LTQ4di0xNTFaIi8+PHBhdGggZD0iTTIzNC43ODE1LDE2NC42ODYsMzI3LjQ2NzUsNzJsLTMyLjkyMi0zMS4wMjlDMjc5LjQyNTUsMjUuODUxLDI5MC4xMzM1LDAsMzExLjUxNTUsMGgxMTJhMjMuOTU4OSwyMy45NTg5LDAsMCwxLDIzLjk1MiwyNFYxMzZjMCwyMS4zODItMjUuODAzLDMyLjA5LTQwLjkyMiwxNi45NzFMMzc1LjQ2NzUsMTIwbC05Mi42ODYsOTIuNjg2YTE2LDE2LDAsMCwxLTIyLjYyNywwbC0yNS4zNzMtMjUuMzczYTE1Ljk5ODQsMTUuOTk4NCwwLDAsMSwwLTIyLjYyN1oiLz48L2c+PC9nPjwvc3ZnPg==") no-repeat;
}

.hint-external-links a {
	text-decoration: underline;
	text-underline-position: under;
}

.hint-external-links a:hover {
	text-decoration: underline;
	text-underline-position: under;
}

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

/*--------------------------------------------------------------
 BASE BUTTON STYLES 
 --------------------------------------------------------------
 Used in other modules using the @extend rule to pull in styles
 and keep button styles consistent across all components.
--------------------------------------------------------------*/

.theme-button,
.button-1,
a.button-1,
button.button-1,
.button-1[class*="brxe-"],
.bricks-container.button-1,
.brxe-form button[type="submit"],
.button-2,
a.button-2,
button.button-2,
.button-2[class*="brxe-"],
.bricks-container.button-2,
.button-3,
a.button-3,
button.button-3,
.button-3[class*="brxe-"],
.bricks-container.button-3 {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	border: none;
	border-radius: 0;
	font-family: 'custom_font_1864', sans-serif;
	font-weight: 600;
	font-size: var(--button-text-size);
	width: auto;
	text-transform: uppercase;
}

.button-1,
a.button-1,
button.button-1,
.button-1[class*="brxe-"],
.bricks-container.button-1,
.brxe-form button[type="submit"] {
	background-color: var(--button-1);
	color: var(--button-1-text);
}

.button-1:hover,
.brxe-form button:hover[type="submit"] {
	background-color: var(--button-1-hover);
	color: var(--button-1-text);
}

.button-1:hover a,
.brxe-form button:hover[type="submit"] a,
.button-1:hover span,
.brxe-form button:hover[type="submit"] span {
	background-color: var(--button-1-hover);
}

.button-1:active,
.brxe-form button:active[type="submit"] {
	background-color: var(--button-1-active);
	color: var(--button-1-text);
}

.button-1:active a,
.brxe-form button:active[type="submit"] a,
.button-1:active span,
.brxe-form button:active[type="submit"] span {
	background-color: var(--button-1-active);
}

.button-2,
a.button-2,
button.button-2,
.button-2[class*="brxe-"],
.bricks-container.button-2 {
	background-color: var(--button-2);
	color: var(--button-2-text);
}

.button-2:hover {
	background-color: var(--button-2-hover);
	color: var(--button-2-text);
}

.button-2:hover a,
.button-2:hover span {
	background-color: var(--button-2-hover);
}

.button-2:active {
	background-color: var(--button-2-active);
	color: var(--button-2-text);
}

.button-2:active a,
.button-2:active span {
	background-color: var(--button-2-active);
}

.button-3,
a.button-3,
button.button-3,
.button-3[class*="brxe-"],
.bricks-container.button-3 {
	background-color: var(--button-3);
	color: var(--button-3-text);
}

.button-3:hover {
	background-color: var(--button-3-hover);
	color: var(--button-3-text);
}

.button-3:hover a,
.button-3:hover span {
	background-color: var(--button-3-hover);
}

.button-3:active {
	background-color: var(--button-3-active);
	color: var(--button-3-text);
}

.button-3:active a,
.button-3:active span {
	background-color: var(--button-3-active);
}

a.button-sm,
button.button-sm,
[class*="brxe-"].button-sm,
.bricks-container.button-sm {
	padding: var(--button-sm-padding-v) var(--button-sm-padding-h);
}

a.button-md,
button.button-md,
[class*="brxe-"].button-md,
.bricks-container.button-md {
	padding: var(--button-md-padding-v) var(--button-md-padding-h);
}

a.button-lg,
button.button-lg,
[class*="brxe-"].button-lg,
.bricks-container.button-lg {
	padding: var(--button-lg-padding-v) var(--button-lg-padding-h);
}

/*--------------------------------------------------------------
# Footer Styles
--------------------------------------------------------------*/

/*Footer Adjustment*/

body,
.bricks-site-wrapper {
	min-height: 100vh;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

#menu-footer-services {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	font-size: 1.4rem;
}

#menu-footer-services li {
	margin-left: 0;
	margin-top: 10px;
	margin-bottom: 10px;
}

#menu-footer-services li a {
	padding-right: 12px;
}

#menu-footer-other {
	font-weight: 600;
	text-transform: uppercase;
}

#menu-footer-other li {
	margin-left: 0;
	margin-bottom: 32px;
}

#footer-logo {
	width: 100%;
	max-width: 21.5rem;
}

/*--------------------------------------------------------------
# Header Styles
--------------------------------------------------------------*/

#main-nav-desktop-cta {
	position: relative;
}

#main-nav-desktop-cta:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 70px;
	height: 70px;
	background-image: url("/wp-content/uploads/2022/04/sparkles.svg");
	background-size: contain;
	-webkit-transform: translate(-22%, -2%);
	transform: translate(-22%, -2%);
	background-repeat: no-repeat;
}

#main-nav {
	z-index: 2;
}

#main-nav.show-mobile-menu .bricks-mobile-menu-toggle {
	margin-top: -50px;
}

#main-nav .bricks-mobile-menu-wrapper {
	padding-top: 70px;
	padding-bottom: 48px;
}

#main-nav > nav {
	width: 100%;
}

#main-nav > nav > ul {
	width: 100%;
	-ms-flex-pack: center;
	justify-content: center;
	max-width: 72rem;
	margin: 0 auto;
}

#main-nav > nav > ul li {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

#main-nav > nav > ul li a {
	font-weight: 600;
}

.slick-arrow {
	cursor: pointer;
}

.js-slider {
	position: relative;
}

.services-slider .slick-arrow {
	padding: 18px;
	border-radius: 100%;
	background: var(--brand-2);
	line-height: 0.65em;
	position: absolute;
	z-index: 2;
}

.services-slider .slick-arrow.prev-arrow,
.services-slider .slick-arrow.next-arrow {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.services-slider .slick-arrow.prev-arrow {
	left: 0;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

.services-slider .slick-arrow.next-arrow {
	right: 0;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.brxe-form button[type="submit"] {
	padding: var(--button-sm-padding-v) var(--button-lg-padding-h);
}

/*--------------------------------------------------------------
# Theme Elements
--------------------------------------------------------------*/

.definition-box--lg {
	padding: 24px;
}

.definition-box__title-wrap {
	padding-bottom: 24px;
}

.definition-box__def-wrap {
	padding-top: 24px;
}

/*--------------------------------------------------------------
# Global Page Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Scope CSS - Applied accross entire site
--------------------------------------------------------------*/

/*Base font-size of 10px; Adjusted for easier rem calculations*/

html,
body {
 	scroll-behavior: smooth;
}

ol.breadcrumb {
	padding-left: 0;
}

/* User Interaction Deferred Elements (only impacts mobile) */

html:not(.js-user-action) .js-defer-el {
	display: none !important;
}

.c-pt-fl-16 {
	padding-top: clamp(48px, calc( 48px  + (( 1vw - 4.85px) * 5.57491289 )), 128px);
}

.c-mt-fl-12 {
	margin-top: clamp(48px, calc( 48px  + (( 1vw - 4.85px) * 3.34494774 )), 96px);
}

.c-mb-fl-12 {
	margin-bottom: clamp(48px, calc( 48px  + (( 1vw - 4.85px) * 3.34494774 )), 96px);
}

.c-mt-fl-15 {
	margin-top: clamp(56px, calc( 56px  + (( 1vw - 4.85px) * 4.45993031 )), 120px);
}

.c-mb-fl-15 {
	margin-bottom: clamp(56px, calc( 56px  + (( 1vw - 4.85px) * 4.45993031 )), 120px);
}

h1 .service-areas {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin-top: 16px;
	padding: 8px 24px;
	font-size: 18px;
	background-color: var(--brand-1);
	color: var(--light-1);
	font-family: "Poppins Pro", sans-serif;
	line-height: 1.25em;
	font-weight: 600;
}

@media only screen and (min-width: 768px) {

.definition-box--lg {
	padding: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 1.67247387 )), 48px);
}

.definition-box__title-wrap {
	padding-bottom: 0;
	padding-right: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 1.2543554 )), 42px);
}

.definition-box__def-wrap {
	padding-top: 0;
	padding-left: clamp(24px, calc( 24px  + (( 1vw - 4.85px) * 3.7630662 )), 78px);
}

}

@media only screen and (min-width: 992px) {

.footer-contact-icon-box__text {
	font-size: clamp(16px, calc( 16px  + (( 1vw - 10.7px) * 1.73913043 )), 20px);
}

#main-nav { /* Services Menu */
}

#main-nav #menu-item-1705 .sub-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--white);
}

}

@media only screen and (max-width: 991px) {

.footer-contact-icon-box__text {
	font-size: clamp(12px, calc( 12px  + (( 1vw - 8.5px) * 2.81690141 )), 16px);
}

}

@media only screen and (max-width: 767px) {

.footer-contact-icon-box__text {
	font-size: 16px;
}

}

@media only screen and (max-width: 479px) {

#menu-footer-services {
	margin-left: 24px;
	margin-top: 24px;
}

}




.we-img-container {
	position: relative;
	width: 100%;
 }
  
  .we-image {
	display: block;
	width: 100%;
	height: auto;
  	margin: 0;
	padding: 0;
  }
  
  .we-image-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #59394F;
  }
  
  .we-img-container:hover .we-image-overlay {
	opacity: 1;
  }
  
  .we-image-text {
	color: white;
 
	font-size: 1.25em;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
  }

  .we-image-text b {
	font-weight: 700;
  }