.hero-section-2021.no-anim-bg { /* THIS IS USED WHEN ANIMATION IS TURNED OFF */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.clearheader,
.clearheader * {
  background-color: transparent !important;
  color: white !important;
}
.hero-section-2021 {
  background: black;
  z-index: 1;
  position: absolute;
  top: 0;
  min-height: 100vh;
  min-width: 100vw;
  overflow: hidden;
}
.hero-sec-wrapper {
  box-sizing: border-box;
  padding-left: 100px;
  padding-right: 100px;
  max-width: 1680px;
  margin: 0 auto;
  background: transparent;
  z-index: 2;
}
.hero-sec-wrapper h1 {
  color: #ffffff;
  line-height: 1.05;
  /* font-size: 140px;
  font-size: 7vw; */
  z-index: 3;
  position: relative;
  animation: text-rotate 0.8s ease-out 0s forwards; /* SET ROTATION ANIMATION FOR MAIN HEADLINE */
  transform-origin: top left;
  transform: rotate(15deg);
}
.hero-text-wrap {
  display: block;
  animation: hero-text-clip 1s ease-in-out 0s forwards; /* SET CLIPPING ANIMATION FOR MAIN HEADLINE */
}
@keyframes hero-text-clip { /* DEFINE CLIPPING ANIMATION FOR MAIN HEADLINE */
  from { 
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  } 
  to {
    clip-path: polygon(0 0, 100% 0, 100% 120%, 0% 120%);
  }
}
@keyframes text-rotate { /* DEFINE ROTATION ANIMATION FOR MAIN HEADLINE */
  from {
    transform: rotate(15deg);
    transform-origin: top left;
  }
  to {
    transform: rotate(0deg);
    transform-origin: top left;
  }
}
.hero-details {
  display: flex;
  flex-direction: row-reverse;
  flex-basis: 2;
}
.hero-description {
  flex-basis: 1;
  width: 50%;
}
.hero-description,
.hero-description p {
  color: #ffffff;
  z-index: 4;
}
a.hero-cta {
  color: #ffffff;
  z-index: 4;
  flex-basis: 1;
  width: 50%;
}
a.hero-cta * {
  display: inline-block;
  vertical-align: middle;
}
a.hero-cta img {
  margin-right: 20px;
}
.hero-details {
  border-top: 1px solid #ffffff;
}
.hero-details {
  justify-content: space-between;
}
.hero-details .btnStyle a {
  color: white;
}
.hero-details .btnStyle a:after,
.hero-details .btnStyle a:before {
  border-radius: 50%;
  overflow: hidden;
}
.hero-details {
  justify-content: space-between;
}
.hero-details .btnStyle a {
  color: white;
}
.hero-details .btnStyle a:after,
.hero-details .btnStyle a:before {
  border-radius: 50%;
  overflow: hidden;
}

/* ====================================================================
                MAIN HERO ANIMATION CODE 
==================================================================== */
img.hero-bg {
    height: 1000px; /* set naitive size of the image */
    width: 1680px; /* set naitive starting width of the image */
    position: absolute;
    top: 0;
    background: black;
    z-index: -1;
    transform: scale: (0.5); /* Reduce the initial size of the background image to fit within smaller circle */
  object-fit: cover; /* reset size to cover available hero area */
  display: table; /* for scaling purposes related to object-fit */
}
img.hero-bg.startanim { /* INITIAL CLIP ANIMATION - Circle at 0% is just a dot. Larger would start with a small circle */
    clip-path: circle(0% at 55% 45%); 
    animation: clipper 1s ease-in forwards;
  transform: scale(0.5);
}
.clip-animation { /* DEFINE THE INITIAL CLIP ANIMATION */
  animation: clip 3s ease-in-out none; /* runs the page load animation */
  clip-path: circle(30% at 55% 45%);  /* IMPORTANT: COPY THIS TO THE TWO PARTS MENTIONED BELOW IF CHANGED */
   animation-play-state: paused; /* pauses the animation to move to the scroll-attached mode */
  animation-delay: calc(var(--scroll) * -1s); /* ties the animation to the scroll */
  animation-iteration-count: 1; /* runs the animation once */
  animation-fill-mode: both;
} 

@keyframes clipper { /* THIS SETS THE ORIGINAL CIRCLE CLIPPING & IMAGE SIZE AND POSITION */
  to { /* SHOULD HAVE THE SAME SETTINGS AS img.hero-bg.startanim ABOVE */
    clip-path: circle(30% at 55% 45%);
    transform: scale(0.5);
  }
} 

@keyframes clip { 
  0% { /* 0% SHOULD HAVE THE SAME SETTINGS AS @keyframes clipper ABOVE */
    clip-path: circle(30% at 55% 45%);
      transform: scale(0.5);
      top: 0;
  }
  /* 15% {
        transform: scale(0.8);
        top: 0;
  } */
  20% { /* adjusted down from 35% to make the animation enlarge faster after less scrolling */
    clip-path: circle(100% at 50% 50%); /* changed to 100% because they don't care about keeping it a circle */
        transform: scale(0.8);
    top: 30px;
  }
  100% {
    clip-path: circle(100% at 55% 45%);
      transform: scale(1);
    top: 60px;
  }
} 
/* end main hero animation section, but see responsive rules below */

/* TABLET AND LARGER RESPONSIVENESS */
@media screen and (min-width: 768px) {
  .hero-section-2021 {
    /* position: absolute;
    top: 0; */
  }
  .header-2021-clearfix {
    position: relative;
    clear: both !important;
    height: 1px;
    min-height: 1000px;
    min-height: 100vh;
    z-index: -1;
  }
  .hero-sec-wrapper h1 {
    padding-top: 200px;
    padding-top: 35vh;
  }
  .hero-details {
    margin-top: 100px;
    margin-top: 10vh;
    padding-top: 50px;
    padding-top: 5vh;
  }
  .hero-description {
    /* width: 51%;
    padding-left: 1%; */
    display: block;
  }
}

/* MOBILE ONLY RESPONSIVENESS */
@media screen and (max-width: 999px) {
  .hero-section-2021 {
    position: relative;
    height: auto;
    height: 100vh;
    min-height: 100vh;
  }
  .hero-sec-wrapper h1 {
    padding-top: 180px;
    font-size: 50px;
    margin-bottom: 0px;
    max-width: 100%;
  }
  .hero-sec-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  }
  .hero-details {
    padding-top: 40px;
    margin-top: 40px;
    display: block;
    width: 100%;
    padding-bottom: 40px;
  }
  .hero-cta {
    margin-bottom: 30px;
    display: block;
  }
  .hero-description {
    width: 100%;
  }
  .hero-description,
  .hero-description p {
    display: block;
  }
  .mobile-hide {
    display: none !important;
  }
  /* START BACKGROUND RESPONSIVE */
  img.hero-bg {
    height: 100%;
    width: auto;
    object-fit: cover;
  }
  .clip-wrap-div { /* SET THE SIZE AND POSITION FOR THE IMAGE BACKGROUND */
    transform: scale(3.8);
    position: absolute;
    top: 26%;
    left: 31%;
    right: 0;
    width: 100%;
    display: block;
    height: 0;
    padding-top: 53%;
    z-index: -1;
  }
}

/* TABLET RESPONSIVENESS */
@media screen and (min-width:768px) and (max-width: 1024px) {
  img.hero-bg {
    height: 100%;
    width: auto;
    object-fit: cover;
  }
  .clip-wrap-div { /* SET THE SIZE AND POSITION FOR THE IMAGE BACKGROUND */
    transform: scale(3.2);
    position: absolute;
    top: 29%;
    left: 31%;
    right: 0;
    width: 100%;
    display: block;
    height: 0;
    padding-top: 53%;
    z-index: -1;
  }
  .hero-description p {
    font-size: 1rem;
  }
}

/* DESKTOP ONLY RESPONSIVENESS */
@media screen and (min-width:1025px) {
  img.hero-bg {
    height: 100%;
    width: auto;
    object-fit: cover;
  }
  .clip-wrap-div { /* SET THE SIZE AND POSITION FOR THE IMAGE BACKGROUND */
    transform: scale(1.7);
    position: absolute;
    top: 9%;
    left: 17%;
    right: 0;
    width: 100%;
    display: block;
    height: 0;
    padding-top: 53%;
    z-index: -1;
  }
}

/* UNIQUE RESPONSIVENESS */
@media screen and (max-width: 374px) {
  .hero-sec-wrapper h1 {
    font-size: 40px;
  }
}
@media screen and (max-width: 999px) and (min-height: 739px) {
  .hero-sec-wrapper h1 {
    padding-top: 32vh;
  }
}




/* ==========================================================================
        OVERRIDES FOR MAIN NAV TRANSPARENT BACKGROUND 
========================================================================== */
body header.header.transparent {
  background: transparent !important;
}

@media screen and (max-width: 768px) {
  .hero-pad-sections {
    height: 100vh !important;
  }
  body header.header.transparent .top__bar {
    background: white !important;
  }
  .body-container-wrapper {
    padding-top: 0 !important;
  }
  body header.header.transparent .header__container {
    background: transparent !important;
  }
  body header.header.mobile_sticky {
    background: white !important;
  }
 
}

.header.dark-theme .menu_logo {
    display: none !important;
}
.header.dark-theme .menu_logo.dark-theme {
    display: block !important;
}
body header.header.transparent .top__bar {
  border-bottom: 1px solid #4d4d4d;
}
body header.header.transparent:before {
  background: #4d4d4d;
}
body header.header.transparent .navigation_bar {
  border-bottom: 1px solid #4d4d4d;
}

@media (min-width: 1000px) {
  .top__bar-section .contact-link a,
  .top__bar-section .contact-link a p,
  body .header__language-switcher-label-current,
  #hs_cos_wrapper_language-switcher,
  body .page-links .top_menu_link a {
    color: #a7a7a7 !important;
    transition: 0.4s ease color !important;
  }
  .top__bar-section .contact-link a:hover,
  .top__bar-section .contact-link a:hover p,
  body .header__language-switcher-label-current:hover,
  #hs_cos_wrapper_language-switcher:hover,
  body .page-links .top_menu_link a:hover,
  body .page-links .top_menu_link.is_actives a {
    color: #ffffff !important;
    transition: 0.4s ease color !important;
  } 
}
.panel-group {
  background: transparent !important;
}
/* end overrides for main nav transparency */

@media(min-width:1000px){
.hero-pad-sections{
margin-bottom:120px!important;
}
}