/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.brxe-code
{
	max-width: fit-content;
}

h1,h2,h3{
        letter-spacing: -3.6px;
}

@media(max-width: 991px){
	h3{
		letter-spacing: -1px;
	}
	h4,h5,h6{
		letter-spacing: 0.5px;
	}
}

@media(max-width: 767px){
	h1,h2{
		letter-spacing: -2.5px;
	}
	h4,h5,h6{
		letter-spacing: -0.5px;
	}
}

@media(max-width: 478px){
	h1,h2{
		letter-spacing: -1.5px
	}
}

@media (max-width: 800px) {
.inner--pages--hero::before {
    background-image: linear-gradient(rgba(0, 47, 92, 0.74), rgba(0, 47, 92, 0.74));
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
	.inner--hero--container {
    z-index: 1;
}
	.top--left--adress {display:none !important}
	.row--top {justify-content:center !important 
	}
}
@media (max-width: 1145px) {
	.header--top {background:var(--primary-dark) !important}
}

@media(min-width:800px) and (max-width:1330px) {
	.inner--pages--hero {
		background-position: center left !important;
	}
}

@media(min-width:1800px) {
	.faq--banner--img--col {
    max-width: 64% !important;
    margin-right: -15%;
}
	.faq--services--img {
    width: 40% !important;
	}
}
@media(min-width:1500px) {
	.team--text--block {
    margin-top: var(--space-s);
	}
}
@media(max-width:1200px) {
	.process--link--img {
		display:none !important
	}
}
@media(max-width:850px) {
.process--home--cards {
    grid-template-columns: repeat(1, minmax(0, 1fr))   ;
}
}
@media(max-width:1120px) {
	.cta--right--col {
    padding: var(--space-m) 0;
}
}
@media(max-width:800px) {
	.cta--container,.footer--cta--container {
    flex-direction: column !important;
    max-height: unset !important;
}
	.footer--cta--dumpster--truck {
     transform: translateY(0) !important; 
}
    .home--faq .accordion-title .icon {
    width: 34px !important;
    height: 34px !important;
    line-height: 36px !important;
	}
/* 	.cta--dumpster--img {
   transform: translateX(-2.42vw) translateY(-18px) !important;
    max-width: 96% !important;
		
}*/
	.cta--right--col {
		    padding-left: var(--space-l);
    padding-right: var(--space-l);
    padding-bottom: var(--space-xl);
		padding-top: 0;
	}
	.bottom--review--dumpster--img {
    display: none !important;
}
.footer--cta {
		background-image:none !important;
	background-color:var(--primary-dark) !important;
	margin-top:0 !important
	}
}
@media(max-width:1200px){
    .bottom--review--dumpster--img {
    width: 55% !important;
}
}

body.bricks-is-frontend :focus {  outline:none !important;}

code
{
	background-color: #e6e6e6;
	color: red;
	padding: 0.15rem;
	font-size: var(--text-xs);
}
.home--faq .accordion-title .icon {
	width:calc((31.375 * 0.1) * 1rem);
    height:calc((31.375 * 0.1) * 1rem);
	text-align: center;
    line-height: calc((31.375 * 0.1) * 1rem);
    background-size: cover;
	background-repeat: no-repeat;
}
.home--faq .accordion-title .icon:not(.expanded){
	background-image: url(https://bluecollarhaulers.hypertek.dev/wp-content/uploads/2024/01/faq__icon.svg);
   
}
.home--faq .accordion-title .icon.expanded{
	background-image: url(https://bluecollarhaulers.hypertek.dev/wp-content/uploads/2024/01/faq__icon__open.svg); 
}


/*			Code for Buttons
 * 
 * 	Buttons are wrapped in an <a> tag
 *	Inside the <a> tag is a <div> container 2 elements
 *  <span> - Button Text
 *  <svg> - Arrow Element
 * 
 * 	There are 3 variations of the button
 *  |		Default		|		Primary		|		Secondary		|		Product Card		|
 * 
 * 	Default - Sets the div as a flex container with flex children aligned to the center, max-width to fit the content, height of 100%, and a 0.3s ease transition
 * 	Primary - Sets the background color to primary, the svg background is filled to the corresponding primary pair
 *  Secondary - Sets the background color to secondary, the svg background is filled to the corresponding secondary pair
 *  Product Card - Sets the max width of the button to be 100% instead of fit-content
 * 
 *  There are 4th and 5th variations but only accessed with their IDs. These variants are for the homepage hero section button and the header cta button, and can be reached with:
 *  #homepage-hero-button
 *  #header-cta-button
 * */



/* Default Button Properties */


/* Default Div Properties */
.button-new div {
    display: flex;
    align-items: center;
    max-width: fit-content;
    height: 100%;
    box-sizing: border-box;
    transition: 0.3s ease;
}

/* Sets the default svg button width and height */
.button-new svg {
    width: 90px;
    height: 100%;
}

/* Sets the svg transition property */
.button-new path:first-child
{
  transition: 0.3s ease; 
}

/* Applies padding and font properties to span */
.button-new span {
    padding: 15px 30px;
    padding-right: 15px;
    font-weight: bold;
    font-size: var(--text-xl);
	text-transform: Uppercase;
    color: white;
	white-space: nowrap;
}



/* Primary Button */


/* Sets the primary color of the div to the ACSS primary variable */
.button-new--primary div {
    background: var(--primary);
}

/* Sets the fill color of the svg to the ACSS Primary Variable*/
.button-new--primary svg path:first-child
{
	fill: #2B94BD;
}



/* Primary Button Hover States */


/* Sets the hover state of the div. Background color is changed to ACSS Primary Color Hover variable */
.button-new--primary:hover div
{
  transition: 0.3s ease;
  background-color: var(--primary-hover);
}

/* Set the hover state of the svg path. Fill color is set to 1.15 * Current HSL Lightness */
.button-new--primary:hover path:first-child
{
  transition: 0.3s ease;
  fill: hsl(197, 63%, 51.75%);
}



/* Secondary Button */


/* Sets the secondary color of the div to the ACSS secondary variable */
.button-new--secondary div {
    background: var(--secondary);
}



/* Secondary Button Hover States */


/* Sets the hover state of the div. Background color is changed to ACSS Secondary Color Hover variable */
.button-new--secondary:hover div
{
  transition: 0.3s ease;
  background-color: var(--secondary-hover);
}

/* Set the hover state of the svg path. Fill color is set to 1.15 * Current HSL Lightness */
.button-new--secondary:hover path:first-child
{
  transition: 0.3s ease;
  fill: hsl(33, 89%, 46%);
}

/* Overwrites the default padding and margin properties for the span of the product card button */
.button-new--product-card span
{
  margin-left: auto;
  margin-right: auto;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 30px;
}



/* Product Card */


/* Overwrites the font size when used in a product card */
.button-new--product-card span {
    font-size: var(--text-m);
}

/* Sets the product card button's width to 100% */
.button-new--product-card div
{
  width: 100%;
  max-width: 100%;
}

@media (max-width: 478px)
{
	.button-new--product-card svg
	{
		width: 50px !important;
	}
}

/* Overwrites the default width of the svg */
.button-new--product-card svg {
    width: 70px;
    height: 100%;
}



/* Homepage Hero Button */


/* Sets the font size for the Homepage Hero section button*/
#homepage-hero-button span
{
	font-size: var(--text-xxl);
}

/* Sets the width of the svg used in the homepage hero section button*/
#homepage-hero-button svg
{
	width: 96px;
}

@media (max-width: 991px)
{
	#homepage-hero-button svg
	{
		width: 80px;
	}

	#homepage-hero-button span
	{
		padding-top: unset;
		padding-bottom: unset;
	}
}

@media (max-width: 767px)
{
	#homepage-hero-button svg
	{
		width: 75px;
	}
}

@media (max-width: 478px)
{
	#homepage-hero-button svg
	{
		width: 70px;
	}
}

@media (max-width: 991px)
{
	.button-new:not(.button-new--product-card) svg
	{
		width: 80px;
	}
	
	.button-new:not(.button-new--product-card) span
	{
		padding-top: unset;
		padding-bottom: unset;
	}
}

@media (max-width: 478px)
	{
	.button-new:not(.button-new--product-card) svg
	{
		width: 75px;
	}
}

@media (max-width: 478px)
{
	.button-new:not(.button-new--product-card) svg
	{
		width: 70px;
	}
}

/* Header CTA Button */


/* Sets the right padding for the cta button span */
#header-cta-button span
{
	padding-right: 15px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: var(--text-m);
}

#header-cta-button svg
{
	width: 70px;
}

@media (max-width: 991px)
{
	#header-cta-button
	{
		display: none;
	}
}

.btn--full--xs {
	border-width: 0px !important;
}