/**
  * 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-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%);
}