.ssdHomeHeroOverrides {
  width: 1.323; }

/* dummy param as version number */
.ssdHeroContent {
  /*border: 2px solid #aaa;*/
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  max-width: none;
  /* was 500 */
  width: 100%;
  min-width: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* default if gradients not supported */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.8) 53%, rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0) 85%);
  /* /* for hip65426 use HOVER bg to cut down on noise 
  background: linear-gradient(90deg, rgba(0,0,0,0.1) 5%, rgba(0,0,0,.8) 15%,rgba(0,0,0,.9) 53%,rgba(0,0,0,.8) 85%, rgba(0,0,0,0.0) 95%); 
  */ }

.ssdHeroContent:hover {
  background: rgba(0, 0, 0, 0.8);
  /*fallback - if gradient not supported */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 5%, rgba(0, 0, 0, 0.8) 15%, rgba(0, 0, 0, 0.9) 53%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0) 95%); }

/*OLD background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,.4) 63%, rgba(0,0,0,0.2) 100%);
}

.ssdHeroContent:hover { background:rgba(0,0,0,.8);}
*/
.ssdHeroContent H1 {
  color: #fecb5c;
  /* match logo type */
  text-transform: none;
  font-size: 1.3rem;
  margin: 0; }

.ssdHeroContent P {
  color: #ccc;
  max-width: 500px; }

A, .ssdHeroContent A {
  color: #e8a325; }

A:hover, .ssdHeroContent A:hover {
  color: #fecb5c;
  text-decoration: none;
  border-bottom: 2px solid #fff; }

.ssdHeroContentMoreInfo {
  padding: 5px 0;
  display: block;
  color: #fff;
  font-weight: 600; }

.ssdHeroContent .ssdHeroContentImageWrap {
  display: block;
  width: 60%;
  max-width: 300px;
  padding: 0;
  margin: 20px 0 0 0; }

.ssdHeroContentImageWrap .ssdImageResponsive {
  border: unset; }

/* =============== */
.ssdHeroWrap {
  /*overflow:hidden; /* clip elements hidden off screen to no blow width on mobile */ }

.ssdHeroImageWrap {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none; }

.ssdHeroImageWrap IMG {
  /* default/load style hero image, center/center, cover into whatever container holds it (could me a 100x100% hero or anything less.  Basically it's a resp hero to container */
  box-sizing: border-box;
  position: absolute;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  border: none; }

.ssdHeroWrap.imageOnly {
  width: 100%;
  height: auto;
  min-height: unset; }

.ssdHeroImageWrap.imageOnly {
  width: 100%;
  height: auto; }

.ssdHeroImageWrap.imageOnly IMG {
  /* add this class when you minimize INFO (image only), remove on showInfo - THIS ENSURES the ENTIRE image is viewable to the user and aligns TOP-ish paste controls. esp important for mobile/small screens */
  		/* was 
  		object-fit: contain; 
      object-position: 0px 130px;  */
  /* go with full responsive image for imageOnly, wrappers should do same. Object-fit:contain has issues when image height > fixed wrapper height */
  object-fit: unset;
  object-position: unset;
  position: relative;
  top: 150px;
  width: 100%;
  height: auto; }

.ssdHeroContent {
  margin-top: 95px;
  /* for "clear" header page clearance */ }

/* for show/hide postion and animation */
.ssdHeroContent {
  position: relative; }

.ssdHeroContent {
  box-sizing: border-box;
  padding: 1% 3%;
  /* doesn't come into play until screensz < max-width of flowed content */ }

@media (max-width: 700px) {
  .ssdHeroContent {
    /* width:auto;
    /*margin:3%; */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.85) 53%, rgba(0, 0, 0, 0.8) 75%, rgba(0, 0, 0, 0) 100%); }

  .ssdHeroContent P {
    max-width: 85%;
    /* stays within 90% width gradient bed */ } }
/* ANIMATIONS UNIQUE TO PAGE: hero and more */
/* HERO IMG Fade Up - onLOAD  */
.ssdHeroImageWrap IMG {
  opacity: 0;
  /* initial state */
  animation-name: imageFadeIn;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-duration: 5s;
  animation-delay: .75s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*retain end state */ }

@keyframes imageFadeIn {
  from {
    opacity: 0.1; }
  to {
    opacity: 1; } }
/* CONTENT and BUTTON animations - additional styles for content slide in/out */
.ssdHeroContent {
  /* initial START state and load time animation IN */
  left: -120vw;
  /* initial position loadtime */
  position: relative;
  animation-name: slideInLeft;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-duration: 1.25s;
  animation-delay: 0.1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*retain end state */ }

@keyframes slideInLeft {
  from {
    left: -20vw; }
  20% {
    left: -2.0vw; }
  to {
    left: 0; } }
.ssdHeroContent.hidden {
  /* hidden END state */
  /*display:none; /* set on timeout to allow animation to complete...hide from tabbed nav when hidden */
  left: 0;
  /* initial postiion (end state from slideInAbove), must be set else reverts to left:-120vw; the init pos from not .hidden state */
  animation-name: slideOutLeft;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: .1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*retain end state */ }

@keyframes slideOutLeft {
  from {
    left: 0; }
  20% {
    left: -65.0vw; }
  to {
    left: -120vw; } }
/* ON SCREEN CONTROLS Button Wrapper (by default and on info expanded) */
.ssdPageControls {
  /* these are the NORMAL ON SCREEN page offscreen buttons */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: flex-end;
  padding: 0 3%; }

/* default HIDDEN - START STATE */
#ssdPageControlsMini {
  /* these are OFFSCREN at startup,  SLIDE IN when DEFAULT CONTROLS are MINIMIZED */
  display: none;
  /* hidden when OFFScreen so doesn't affect tab order when offscreen or screen readers */
  position: absolute;
  left: 110vw;
  top: 50%;
  /* centered veritically along with height translate below */
  transform: translate(0%, -50%);
  /* shift up 50% of height of element to truly center around the top:50%; */ }

/* SHOWTEXT/HideText Button - ShowText HIDDEN at START State, animated in on HideText click - HideText is within hero content as call to action triggers hide */
/* animation follows heroContent out to left with slight offset to bring attention to showText button */
#ssdPageControlsMini.visible {
  top: 120px;
  /*display:block; /* hidden when OFFScreen so doesn't affect tab order */
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  animation-name: slideOutLeft2;
  /* same animation as heroContent but delayed and a bit slower to draw attention */
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-duration: .8s;
  animation-delay: .3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*retain end state */ }

@keyframes slideOutLeft2 {
  /*from { left:110vw; } */
  25% {
    left: 25px; }
  to {
    left: 0px; } }