/**
  * Theme Name:  Holler 
  * Theme URI:   https://hollerdigital.com/
  * Description: Holler elementor Widgets
  * Author:      Holler Digital
  * Author URI:   https://hollerdigital.com/
  * Version:     2.0.0
**/
/*
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;

//** File name for all font files.
$icon-font-name:          "glyphicons-halflings-regular" !default;
//** Element ID within SVG icon file.
$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Plugins
# Wordpress
# Base Styles
# Mobile
# Objects
# Sections
# Holler

--------------------------------------------------------------*/
:root {
  --holler-team-radius:  50%;
  /* --holler-team-name-size: 1.2rem;
  --holler-team-name-color: #08005C;
  --holler-team-title-size:  1em;
  --holler-team-title-color: #8C4EFD;
  --holler-team-modal-bgcolor: rgba(8, 0, 92,0.9);
  --holler-team-modal-name-size:1.5em;
  --holler-team-modal-title-size: 1.25em;
  --holler-team-modal-color: #08005C;
  --holler-team-modal-hover-color: #8C4EFD; */
}


/* .holler-widget {} */

.holler-conveyor-link {
  position: relative;
  display: flex;
  flex-direction: row !important;
  align-items: center !important;
}

.holler-conveyor-icon-wrap {
  width: 22px;
  height: 22px;
}

.holler-conveyor-icon-wrap svg {
  fill: white;
  width: 100%;
  height: 100%;
}

.holler-conveyor .holler-conveyor-link {
    color: var(--holler-conveyor-text, inherit);
}

/* Icon gap: apply based on icon position class on wrapper */
.holler-marquee.icon-left .holler-conveyor-icon-wrap {
  margin-right: var(--holler-conveyor-icon-gap, 0.5em);
  margin-left: 0;
}
.holler-marquee.icon-right .holler-conveyor-icon-wrap {
  margin-left: var(--holler-conveyor-icon-gap, 0.5em);
  margin-right: 0;
}

.holler-conveyor.is-reversed .holler-conveyor-track {
  transform: scaleX(-1);
}

.holler-conveyor.is-reversed .holler-conveyor-item {
  transform: scaleX(-1);
}

.holler-team a{
  text-decoration: none !important;
  cursor: pointer;
}
.holler-team figure.img-wrap { 
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em !important; 
}
.holler-team figure.img-wrap img.image-round { 
  border-radius: var( --holler-team-radius );
}

.holler-team figure.img-wrap img.image-square{ 
  border-radius: none !important;
}

.holler-team .team-header { 
  text-align: center;
}
.holler-team .team-header h2.team-name{ 
  font-size: var(--holler-team-name-size);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0;
  color:var(--holler-team-name-color);
  text-decoration: none !important;
}
.holler-team .team-header h3.team-title {
  font-size: var(--holler-team-title-size);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1em;
  color: var( --holler-team-title-color);
  text-decoration: none !important;
}

.holler-team-lightbox-wrap {
  padding: 1em 2em;
  background-color: #fff;
  margin: 10% auto; /* 10% from the top and centered */
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
  max-width: 1000px;
  border-radius: 8px;
  position: relative;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  top: 0;
  width: 100vw; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto !important; /* Enable scroll if needed */
  background-color: var(--holler-team-modal-bgcolor); /* Black w/ opacity */
  transition-duration: 0.5s;
  overflow: hidden;
  color: var(--holler-team-modal-color);
}

.modal .team-header h3.team-title {
  font-size: var(--holler-team-title-size);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 1em;
  color: var( --holler-team-title-color);
  text-decoration: none !important;
}

 /* The Close Button */
.close {
  color: var(-holler-team-modal-color);
  display: block;
  position: absolute;
  right: 2em;
  font-size: 28px;
  font-weight: bold;
  transition-duration: 0.5s;
}
.close:hover {
  color: var(--holler-team-modal-hover-color);
}

.team-lightbox-header{
  align-content: left;
  width: 100%;
  margin-bottom: 1em;
}
.team-lightbox-header .img-wrap {
  width: 100%;
}
.team-lightbox-header .img-wrap img { 
  border-radius: var( --holler-team-radius );
  max-width: 166px;
}
.lightboox-team-header{
  width: 100%;
  margin: 1em;
}
.team-lightbox-header h2.team-name { 
  font-size: var(--holler-team-modal-name-size);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0 !important;
  color: var(--holler-team-modal-name-color);
  text-decoration: none;
}
.team-lightbox-header h3.team-title {
  font-size: var(--holler-team-modal-title-size); 
  font-weight: 400;
  line-height: 1.4;
  color: var( --holler-team-title-color) ; 
  text-decoration: none;
  margin-bottom: 0 !important;
}



/* Medium Devices, Desktops */
@media only screen and (min-width : 768px) {
  .holler-team-lightbox-wrap{
    padding: 2em 4em;
    background-color: #fff;
    margin: 10% auto; /* 10% from the top and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 1000px;
  }
  
  .team-lightbox-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    width: 100%;
    margin-bottom: 1em;
    column-gap: 24px;
  }
  h2.team-name { 
    margin-bottom: 0 !important;
  }
   h3.team-title {
    margin-bottom: 0 !important;
  }
  .team-lightbox-header .img-wrap {
    width: 33.3%;
    max-width: 166px;
  }
  .team-lightbox-header .img-wrap img{
    border-radius:  var( --holler-team-radius ); 
    max-width: 166px;
  }
  .lightboox-team-header{
    width: 66.6%;
    padding: 1em;
  }  
}
 
 
:root {
  --holler-heading-size-x-small: 14px;
  --holler-heading-size-small: 16px;
  --holler-heading-size-medium: 24px;
  --holler-heading-size-large: 32px;
  --holler-heading-size-xl: 48px;
  --holler-heading-size-xxl: 64px;
}

.elementor-widget-heading p{
  font-size: 16px;
  line-height: 1.4em;
  margin-bottom: 1.5em;
}

.text-small p{
  font-size: 14px;
  line-height: 1.4em;
  margin-bottom: 1.5em;
}

.text-medium p{
  font-size: 18px;
  line-height: 1.4em;
  margin-bottom: 1.5em;
}
.text-large,
.text-large p,
.text-large span,
.text-large div.elementor-widget-container{
  font-size: 20px;
  line-height: 1.4em;
  margin-bottom: 1.5em;
}

.clipped-container {
  clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
}
 
/* --------------------------------------
   Holler Conveyor CSS Marquee
   -------------------------------------- */
.holler-marquee {
  --marquee-duration: 40s;
  --marquee-animation-state: running;
  --spaceBetweenItems: 10px;
}

.holler-marquee .holler-marquee-track {
  position: relative;
  overflow-x: clip;
  overflow-y: hidden;
  width: 100%;
  height: var(--marquee-track-height, auto);
}

@supports not (overflow-x: clip) {
  .holler-marquee .holler-marquee-track {
    overflow: hidden;
  }
}

.holler-marquee .holler-marquee-run {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spaceBetweenItems, 10px);
  white-space: nowrap;
  will-change: transform;
  animation-duration: var(--marquee-duration, 40s);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: var(--marquee-animation-state, running);
}

/* Left direction: first run goes 0 -> -100%, second 100% -> 0 */
.holler-marquee .holler-marquee-run[data-marquee-animation="left"]:first-child {
  animation-name: holler-scroll-left-a;
}
.holler-marquee .holler-marquee-run[data-marquee-animation="left"]:last-child {
  animation-name: holler-scroll-left-b;
}

/* Right direction: first run 0 -> 100%, second -100% -> 0 */
.holler-marquee .holler-marquee-run[data-marquee-animation="right"]:first-child {
  animation-name: holler-scroll-right-a;
}
.holler-marquee .holler-marquee-run[data-marquee-animation="right"]:last-child {
  animation-name: holler-scroll-right-b;
}

.holler-marquee .holler-marquee-unit,
.holler-marquee .holler-marquee-sep {
  display: inline-flex;
  align-items: center;
}

.holler-marquee .holler-marquee-sep {
  margin: 0 var(--spaceBetweenItems, 10px);
  opacity: 0.6;
}

/* Pause on hover when enabled */
.holler-marquee[data-pause-hover="1"]:hover .holler-marquee-run {
  animation-play-state: paused;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .holler-marquee .holler-marquee-run { animation-play-state: paused; }
}

/* Keyframes */
@keyframes holler-scroll-left-a { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes holler-scroll-left-b { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes holler-scroll-right-a { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes holler-scroll-right-b { from { transform: translateX(-100%); } to { transform: translateX(0); } }