/*
 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
--------------------------------------------------------------*/

.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6 {
	margin-bottom: 1.5rem;
}

.elementor-widget-container h1.elementor-heading-title,
.elementor-widget-container h2.elementor-heading-title,
.elementor-widget-container h3.elementor-heading-title,
.elementor-widget-container h4.elementor-heading-title,
.elementor-widget-container h5.elementor-heading-title,
.elementor-widget-container h6.elementor-heading-title {
	margin-top: 0em;
	margin-bottom: 0.5em;
	margin-bottom: 1.5rem;
}

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

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

p,
.entry-content p {
	margin-top: 0px;
}

strong,
b {
	font-weight: 800;
}
p.elementor-size-default {
  /* color: #000000; */
  font-size: 18px;
  letter-spacing: 0;
  line-height: 29px;
  font-weight: 400;
}
p.elementor-size-default b{
	font-weight: 500;
}

div.elementor-size-xl,
p.elementor-size-xl {
	font-family: "All Round Gothic";
	font-size: 65px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 78px;
}

div.elementor-size-medium,
p.elementor-size-medium {
  font-family: "Lexend";
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 31px;
}

.elementor-button.elementor-size-sm .elementor-button-text{
	font-family: "Lexend";
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 20px;
	text-decoration: none;
	color: inherit;
  }
.elementor-button.elementor-size-sm  {
	color: white !important;
	background: #000000;
}
.elementor-button.elementor-size-sm:hover   {
	color: black !important;
	background: #fff;
	text-decoration: none !important;
} 




  .display-small .elementor-size-large {
	font-family: "All Round Gothic";
	font-size: 38px;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 46px;
  }
  
  .display-small .elementor-size-large a {
	text-decoration: none !important;
	border-bottom: solid 2px #000;
	line-height: 65px !important;
	padding-bottom: 8px;
  }

	.icon-rotate-wrap{

		bottom: -152px;
	}
  
	.rotate {
	transform: rotate(-3deg);
  }
/*--------------------------------------------------------------
# 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,
.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 {
	background-color: var(--button-1);
	color: var(--button-1-text);
}

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

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

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

.button-1:active a,
.button-1:active 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);
}

/*--------------------------------------------------------------
# Fluent Form Styles
--------------------------------------------------------------*/

.fluentform {
	width: 100%;
}

.fluentform form.frm-fluent-form .ff-el-group {
	margin-bottom: 10px;
}

.fluentform form.frm-fluent-form .ff-el-group.hidden {
	display: none !important;
}

.fluentform form.frm-fluent-form .ff-el-input--label {
	font-size: 0.8em;
	color: var(--secondary-theme);
}

.fluentform form.frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
	margin-right: 0;
	font-size: 0.875em;
}

.fluentform form.frm-fluent-form .ff-el-form-control {
	min-height: 50px;
	border-radius: 0;
}

.fluentform form.frm-fluent-form .ff-el-form-control.hidden {
	display: none !important;
}

.fluentform form.frm-fluent-form .ff-btn {
	border-radius: 0;
}

.fluentform form.frm-fluent-form .ff-btn:hover {
	opacity: 1;
}

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

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

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

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

.icon-rotate {
	transition: 1s;
}

/*--------------------------------------------------------------
# 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;
	background-color: var(--ast-global-color-0);
}
.body-yellow{
	background-color: var(--ast-global-color-0);
}
.body-blue {
	background-color: var(--ast-global-color-2);
}
.body-green {
	background-color: var(--ast-global-color-3);
}
.body-red {
	background-color: var(--ast-global-color-1);
}
sec
section.elementor-section.sk-dark-bg:not(.elementor-column) {
	color: yellow;
}

@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);
}

}

.event-loop:hover h5{
	text-decoration: underline;
}

.event-loop:hover{
	cursor: hand;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/* Astra sticky header */

.main-header-bar {
    position: fixed;
	top: 0;
    left: 0;
    width: 100%;
	direction: ltr;
	min-width: 300px;
	 
    z-index: 99999;
}

.admin-bar .main-header-bar {
	margin-top: 32px;
}

.ast-mobile-popup-content,
.ast-header-html-2 {
 display: none ;
}


.ast-header-html  {
	width: 100%  !important;
	
}
.ast-builder-menu-mobile .main-navigation ul .menu-item{
	height: 26px;
	margin: 8px 0;
}
.ast-builder-menu-mobile .main-navigation ul .menu-item .menu-link  {
	height: 26px;
	color: #000000;
	font-family: "Lexend";
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 26px;
	display: block;
  }

  .ast-builder-menu-mobile .main-navigation ul .sub-item .menu-link  {
	height: 26px;
	color: #000000;
	font-family: "Lexend";
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0;
	margin-left: 24px;
	line-height: 26px;
	display: block ;
  }


.ast-builder-menu-1 .sub-menu {
	box-sizing: border-box ;
	border: 2px solid #000000 !important;
	border-radius: 10px !important;
	background-color: #FFFFFF;
	padding: 1em !important;
	width: 375px; 
}

/* Desktop Flyout */
@media only screen and (min-width: 1024px) {

	.ast-desktop-popup-content{
		width: 100%;
		height: 90vh !important;
		display: flex !important;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		max-width: 1200px !important;
		margin: 0 auto !important;
		position: relative;
	}
	.ast-desktop-popup-content .ast-header-html-1{
		width: 60%  !important;
		height: 400px;
		justify-content: space-around;
		display: block;
		padding: 0px 24px;
		align-items: flex-start;
	}
	.ast-header-html-1 .ast-builder-html-element{
		height:400px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: flex-start;
	}

	.ast-desktop-popup-content .ast-builder-menu-mobile {
		width: 40%  !important;
		height: 400px;
		justify-content: space-around;
		border-left: solid 2px #000;
		display: flex;
	}
	.ast-header-html-2{
		width: 100%;
		display: block;
		position: absolute;
		top: 0
	}
	
	

	
	.ast-desktop-header-content .ast-builder-menu-mobile .ast-flex.main-header-menu, .ast-desktop-popup-content .ast-builder-menu-mobile .ast-flex.main-header-menu {
		flex-wrap: wrap;
		height: 400px;
		justify-content: space-evenly;
	}
	.ast-desktop-popup-content li.menu-item {
		display: none  !important;
	}
	 
	li.menu-item.dsk-item {
		display:flex !important;	
	}
	.menu-item.ord-1{
		order: 1  !important;
	}
	.menu-item.ord-2{
		order: 2  !important;
	}
	.menu-item.ord-3{
		order: 3  !important;
	}
	.menu-item.ord-4{
		order: 4  !important;
	}
	.menu-item.ord-5{
		order: 5 !important;
	}
	.menu-item.ord-6{
		order: 6 !important;
	}
	.menu-item.ord-7{
		order: 7 !important;
	}
	.menu-item.ord-8{
		order: 8 !important;
	}
	.dsk-item .menu-link  {
		margin-left: 60px !important;
	}

	.ast-builder-menu-mobile .main-navigation ul .dsk-item .menu-link  {
		color: #000000;
		font-family: "Lexend";
		font-size: 21px;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 31px;
	  }
	
	 
	
	.ast-mobile-popup-content,
	.mega-btn{
	  display: block;
	 }

	.mega-btn a {	
		display: block;
		width: 100%;
		color: #000000 !important;;
		font-family: "Lexend";
		font-size: 65px;
		font-weight: 300;
		letter-spacing: 0;
		padding: 20px;
		line-height: 78px;
		transition: all .3s;
	  }

	  .mega-btn:hover a{
		  color: #fff !important;
		
	  }

}

h1.elementor-size-xxl span.left{
	display: block;
	text-align: left !important;
}
h1.elementor-size-xxl span.right{
	display: block;
	text-align: right !important;
}
h1.elementor-size-xxl span.center{
	display: block;
	text-align: center !important;
}



.main-header-menu .sub-menu .menu-link {
	padding: 0.5em 1em;
}

.sub-menu li.menu-large a.menu-link {
	padding: 1em 1em 0.5em 0.8em;
	color: #000000;
	font-family: "Lexend";
	font-size: 21px !important;
	font-weight: 500;
	letter-spacing: 0;
 	line-height:  1;
  }
  .sub-menu li.menu-small a.menu-link {
	padding: 0.5em 1em;
	color: #000000;
	font-family: "Lexend";
	font-size: 18px !important;
	font-weight: 500;
	letter-spacing: 0;
	line-height:  1;
  }

  .elementor-icon-box-title,
  h3.elementor-icon-box-title, 
  .elementor-icon-box-title span {
	color: #000000;
	font-family: "Lexend";
	font-size: 21px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	line-height: 31px;
  }
  

h3.uael-timeline-heading {
	color: #000000;
	
	font-family: "Lexend";
	font-size: 28px !important;
	letter-spacing: 0;
	line-height: 38px;
  }


  .casa-content-top {
	padding-top: 2em;
  }

  @media only screen and (min-width : 1200px) {
  .casa-content-top {
	padding-top: 5em;
  }
}

  .entry-content .elementor-heading-title,
  .entry-content .elementor-size-small,
  .entry-content .elementor-size-medium{
	font-weight: 400;
  }

.ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {
    line-height: 110px;
}

.casa-sticky{position: -webkit-sticky;
    position: sticky;
    top:200px; } 

 
ul.sm-vertical li, ul.sm-vertical li a {
	width: 100%;
	display: block;
	text-align: center !important; 
}
 /* Medium Devices, Desktops */
 @media only screen and (min-width : 1025px) {
	ul.sm-vertical li, ul.sm-vertical li a{
		width: 100%;
		display: block;
		text-align:left !important; 
	}
 }

.elementor-widget-theme-post-content a,
.elementor-widget-text-editor a,
.elementor-widget-text-editor a:link {
	color: var( --e-global-color-astglobalcolor8 ) !important;
	text-decoration: underline !important;
}
.elementor-widget-theme-post-content a:hover,
.elementor-widget-text-editor a:hover {
	color: var( --e-global-color-astglobalcolor8 ) !important;
	text-decoration: underline !important;
	opacity: 0.6 !important;
}
 

/* Fix content padding in mobile */
.site-content {
    padding-top: 80px;
}
.admin-bar .site-content  {
	padding-top: 82px;
}

/* Fix content padding  Desktop */
@media (min-width: 1024px) {
    .main-header-bar {
		height: 120px;
	}
	.site-content {
        padding-top: 120px;
    }
	.admin-bar .site-content  {
		padding-top: 112px;
	}
}
 
.ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before{
	height: 4px;
}

.elementor-size-xs .elementor-align-icon-left {
	fill: #000;
    transition: all .3s;
}

.elementor-size-xs:hover .elementor-align-icon-left {
	fill: #fff;
}


.btn-event-loop {
	width: 100%;
	border-bottom: solid 2px #000;
}

.btn-event-loop a{ 
	width: 100%;
	text-align: left;
	font-family: "Lexend";
 	font-size: 16px !important;
  	font-weight: 400 !important;
  	line-height: 26px;
}

.ahfb-svg-iconset svg {
    width: 36px  !important;
    height: 36px  !important;
    transition: none;
}

#stories-feature-wrap{
	display: flex;
	flex-direction: row;
	gap: 80px;
}

#stories-feature-wrap .casa-image-block{
	display: none
}

#stories-feature-wrap .casa-image-block .feat-img {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}

#stories-feature-wrap .casa-image-block  .feat-img:first-child{
	display: block;
}

#stories-feature-wrap .casa-image-block  img {
	border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var( --e-global-color-astglobalcolor8 );
    border-radius: 10px 10px 10px 10px;
	transform: rotate(-3deg);
	transition: 0.3s;
}

#stories-feature-wrap .casa-title-block{
	width:100%;
    flex-direction: column;
}

#stories-feature-wrap .casa-title-block article{
	border-bottom: none;
	padding: 16px 0;
	margin-bottom: 24px;
}

#stories-feature-wrap .casa-title-block article:last-child{
	border-bottom: none;
}


/* #stories-feature-wrap .casa-title-block article:first-child{
	border-bottom: solid 2px #000;;
} */

.casa_post_title,
.casa_post_title a,
.casa_post_link {
  color: #000000 !important;
  font-family: "Lexend";
  font-size: 36px;
  font-style:normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 46px;
  transition: 0.3s;
  opacity: 1 !important;
  margin: 0 !important;
}
.casa_post_link span{
	display: none;
}

.casa_post_title:hover,
.casa_post_title a:hover ,
.casa_post_link:hover {
	font-style: oblique;
	font-weight: 400;
}
.casa-feat-img {
	border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var( --e-global-color-astglobalcolor8 );
    border-radius: 10px 10px 10px 10px;
	margin-bottom: 16px;
	display: block;
}


@media only screen and (min-width : 1024px) {
	#stories-feature-wrap .casa-image-block{
		width: 33.3333%;
		flex-direction: column;
		position: relative;
		display: block;
	}
	#stories-feature-wrap .casa-title-block{
		width: 66.6666%;
		flex-direction: column;
	}
	#stories-feature-wrap .casa-title-block article{
		border-bottom: solid 2px #000;
		padding: 16px 0;
		margin-bottom: 0px;
	}
	.casa-feat-img {
		display: none;
		margin-bottom: 0em;
		border-radius: 10px 10px 10px 10px;
	}

  }