/*
-------------------
 SUPER HEADER BANNER
--------------------
*/

#body #SuperHeader {
  z-index: 111;
  user-select: none;
  margin: 0; padding: 0;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  text-shadow: none !important;
  border-bottom: 1px solid rgba(0,0,80,0.1);
}

#body #SuperHeader:not(.mobile) {
  background: none;
  height: 11.11vw;
}

#body #SuperHeader.mobile {
  background: white;
  height: 80px;
}


#body #SuperHeader .full-banner-bg {
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat-y;
  background-size: cover;
  background-position-x: center;
}

#body #SuperHeader .gfx-page {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  pointer-events: none;
  z-index: 1;
  padding-top: 2vw;
}

.gfx-page h3.go-arrow::after {
  content: '❱';
  color: #ED1B2F;
  display: inline-block;
  transform: scale(1.4,0.6);
  margin-left: .5vw;
}

#body #SuperHeader:hover, #body #SuperHeader:active {
  text-shadow: none !important;
}

#body #SuperHeader a.cta.blue:active, a.cta.blue:hover {
  text-shadow: 1px 2px 1px rgba(20,40,60,0.7) !important;
  background-image: linear-gradient( to bottom, #4FA9FF 0%, #3B93FF 100%) !important;
  box-shadow: inset 0 3px 8px rgba(255,255,255,0.1), inset -1px -1px 3px #2A81EA, 0 2px 3px
rgba(0,20,60,0.4) !important;

}

#body.initial .welcome-cont.no-cookie {
  margin-top: 0;
}

#body.initial .welcome-cont.no-cookie + #SuperHeader {
  top: 59px;
}

#body #SuperHeader h2 {
  font-family: 'clarendon-text-pro', serif !important;
  color: #ED1B2F;
  font-size: 3.4vw !important;
  font-weight: 400 !important;
}

#SuperHeader sup {
  margin-right: -.75vw;
}

#body #SuperHeader h3 {
  font-size: 1.8vw !important;
  margin-bottom: 0.25vw;
  color: #245;
  font-weight: 400 !important;
}

#SuperHeaderGfx {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  padding: 0; margin: 0;
  pointer-events: none;
  z-index: 2;
}


#SuperHeaderLinks {
  overflow: hidden;
  position: absolute;
  display: block;
  top: 0; bottom: 0;
  left: 0; right: 0;
  padding: 0; margin: 0;
  pointer-events: all;
  z-index: 3;
}
#SuperHeaderLinks .clickable-area {
  float: none;
  clear: none;
  pointer-events: all;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  top: -1px;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

#SuperHeaderLinks .clickable-area:nth-child(1) {
  /* background-color: #F00; */
  animation: clickarea1 32s steps(4) infinite;
}
#SuperHeaderLinks .clickable-area:nth-child(2) {
 /* background-color: #D50; */
  animation: clickarea2 32s steps(6) infinite;
}
#SuperHeaderLinks .clickable-area:nth-child(3) {
/*  background-color: #970; */
  animation: clickarea3 32s steps(6)  infinite;
}
#SuperHeaderLinks .clickable-area:nth-child(4) {
/*   background-color: #4A0; */
  animation: clickarea4 32s steps(6)  infinite;
}
#SuperHeaderLinks .clickable-area:nth-child(5) {
/*   background-color: #08B; */
  animation: clickarea5 32s steps(4) infinite;
}

/*
#SuperHeaderLinks .clickable-area:nth-child(6) {
  background-color: #51F;
  animation: clickarea6;
}
*/

@keyframes clickarea1 {
  0% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  19.9% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  20% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  100% { transform: translateY(200px); bottom:100%; pointer-events: none; }
}

@keyframes clickarea2 {
  0% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  19.9% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  20% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  39.9% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  40% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  100% { transform: translateY(200px); bottom:100%; pointer-events: none; }
}

@keyframes clickarea3 {
  0% {transform: translateY(200px); bottom:100%; pointer-events: none; }
  39.9% {transform: translateY(200px); bottom:100%; pointer-events: none; }
  40% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  59.9% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  60% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  100% { transform: translateY(200px); bottom:100%; pointer-events: none; }
}

@keyframes clickarea4 {
  0% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  59.9% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  60% {transform: translateY(0); bottom:-1px; pointer-events: all; }
  79.9% {transform: translateY(0); bottom:-1px; pointer-events: all; }
  80% { transform: translateY(200px); bottom:100%; pointer-events: none; }
  100% {transform: translateY(200px); bottom:100%; pointer-events: none; }
}

@keyframes clickarea5 {
  0% {transform: translateY(200px); bottom:100%; pointer-events: none; }
  79.9% {transform: translateY(200px); bottom:100%; pointer-events: none; }
  80% { transform: translateY(0); bottom:-1px; pointer-events: all; }
  100% {transform: translateY(0); bottom:-1px; pointer-events: all; }
}

#body #SuperHeader .cta.blue {
  transition: 0.2s ease all;
  z-index: 3;
  position: absolute;
  right: 0;
  bottom: 2.2vw;
  line-height: 2vw;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: .32vw;
  padding-top: .32vw;
  font-size: 1.2vw;
  background-color: #2F89FC;
  color: white !important;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: .1vw;
  border: none;
  opacity: 1.0;
  border-radius: .3vw;
  min-height: 22px !important;
  background-image: linear-gradient( to bottom, #3F99FF 0%, #2B83F8 100%);
  box-shadow: inset 0 3px 8px rgba(255,255,255,0.1), inset -1px -1px 3px #2A81EA, 0 2px 3px
rgba(0,20,60,0.2);
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

#SuperHeader .banner-hero {
  position: absolute;
  display: block;
}




#SuperHeaderGfx .gfx-page:nth-child(1) .banner-hero {
  animation: bannerhero1 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(2) .banner-hero  {
    animation: bannerhero2 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(3) .banner-hero  {
    animation: bannerhero3 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(4) .banner-hero  {
    animation: bannerhero4 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(5) .banner-hero  {
    animation: bannerhero5 32s infinite;
}

#SuperHeaderGfx .gfx-page:nth-child(1) {
  animation: bannergfx1 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(2) {
    animation: bannergfx2 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(3) {
    animation: bannergfx3 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(4) {
    animation: bannergfx4 32s infinite;
}
#SuperHeaderGfx .gfx-page:nth-child(5) {
    animation: bannergfx5 32s infinite;
}



@keyframes bannergfx1 {
  0% { opacity: 0.5; z-index: 2; }
  1% { opacity: 1; z-index: 1; }
  18% { opacity: 1; z-index: 2; }
  20% { opacity: 0; z-index: 2; }
  98% { opacity: 0; z-index: 1; }
  100% { opacity: 0.5; z-index: 1; }
}

@keyframes bannergfx2 {
  0% { opacity: 0; z-index: 3; }
  18% { opacity: 0; z-index: 3; }
  20% { opacity: 1; z-index: 3; }
  38% { opacity: 1; z-index: 3; }
  40% { opacity: 0; z-index: 3; }
  100% { opacity: 0; z-index: 3; }
}

@keyframes bannergfx3 {
  0% { opacity: 0; z-index: 1;}
  38% { opacity: 0; z-index: 4; }
  40% { opacity: 1; z-index: 4;}
  58% { opacity: 1; z-index: 4;}
  60% { opacity: 0; z-index: 4; }
  100% { opacity: 0; z-index: 1;}
}

@keyframes bannergfx4 {
  0% { opacity: 0; z-index: 1;}
  58% { opacity: 0; z-index: 5;}
  60% { opacity: 1;  z-index: 5;}
  78% { opacity: 1; z-index: 5; }
  80% { opacity: 0; z-index: 5;}
  100% { opacity: 0;  z-index: 1;}
}

@keyframes bannergfx5 {
  0% { opacity: 0.5;  z-index: 6; }
  1% { opacity: 0;  z-index: 1; }
  78% { opacity: 0;  z-index: 6;}
  80% { opacity: 1;  z-index: 6;}
  98% { opacity: 1;  z-index: 6; }
  100% { opacity: 0.5; z-index: 6; }
}


@keyframes bannerhero1 {
  0% { opacity: 0; }
  1% { opacity: 0; }
  4% { opacity: 1; }
  16% { opacity: 1; }
  20% { opacity: 0;  }
  98% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes bannerhero2 {
  0% { opacity: 0; }
  21% { opacity: 0; }
  24% { opacity: 1; }
  36% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes bannerhero3 {
  0% { opacity: 0; }
  41% { opacity: 0; }
  44% { opacity: 1; }
  56% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes bannerhero4 {
  0% { opacity: 0;}
  61% { opacity: 0; }
  64% { opacity: 1; }
  76% { opacity: 1; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes bannerhero5 {
  0% { opacity: 0;  }
  81% { opacity: 0; }
  85% { opacity: 1;  }
  96% { opacity: 1;  }
  100% { opacity: 0; }
}





@keyframes fadebtn1 {
  0% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  3% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  5% { opacity: 1; transform: translateY(0); filter: blur(0); }
  18% { opacity: 1; transform: translateY(0); filter: blur(0); }
  20% { opacity: 0; transform: translateY(15px); filter: blur(15px); }
  100% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
}

@keyframes fadebtn2 {
  0% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  23% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  25% { opacity: 1; transform: translateY(0); filter: blur(0); }
  38% { opacity: 1; transform: translateY(0); filter: blur(0); }
  40% { opacity: 0; transform: translateY(15px); filter: blur(15px); }
  100% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
}

@keyframes fadebtn3 {
  0% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  43% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  45% { opacity: 1; transform: translateY(0); filter: blur(0); }
  58% { opacity: 1; transform: translateY(0); filter: blur(0); }
  60% { opacity: 0; transform: translateY(15px); filter: blur(15px); }
  100% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
}

@keyframes fadebtn4 {
  0% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  63% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  65% { opacity: 1; transform: translateY(0); filter: blur(0); }
  78% { opacity: 1; transform: translateY(0); filter: blur(0); }
  80% { opacity: 0; transform: translateY(15px); filter: blur(15px); }
  100% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
}

@keyframes fadebtn5 {
  0% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  83% { opacity: 0; transform: translateY(15px); filter: blur(10px); }
  85% { opacity: 1; transform: translateY(0); filter: blur(0); }
  98% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(15px); filter: blur(15px); }
}


#SuperHeaderGfx > .gfx-page > .banner-text {
  z-index: 2;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

/*
-------------------
LARGE SIZE ONLY
--------------------
*/

@media screen and (min-width:769px) {

  #hero_img_online-sales {
    width: 11vw;
    right: 22vw;
    bottom: -2vw;
  }
  #hero_img_bio-smarttrak {
    width: 24vw;
    left: 0;
    bottom: -.5vw;
  }
  #hero_img_bio-redysmart {
    width: 32vw;
    left: 18vw;
    bottom: -1.5vw;
  }
  #hero_img_optimize-gas {
    width: 8.5vw;
    left: 17vw;
    bottom: -.65vw;
  }
  #hero_img_signal-fire {
    width: 15vw;
    right: 19vw;
    bottom: .5vw;
  }

  #SuperHeader {
    position: fixed;
  }

  #body.initial  {
    padding-top: 11.11vw;
  }

  #SuperHeader.mobile {
    display: none !important;
    opacity: 0;
    pointer-events: none;
  }

  #SuperHeader.hidden {
    top: -12vw;
    opacity: 0;
    pointer-events: none;
    z-index: -1 !important;
  }

  #SuperHeader .hero-pic {
    height: 11.5vw;
    bottom: -1.8vw;
  }

  #body #SuperHeader h2 {
    font-size: 3.4vw !important;
    margin-bottom: .2vw;
  }

  #body #SuperHeader h3 {
    font-size: 2.21vw !important;
    margin-bottom: 0.25vw;
  }

  #body #SuperHeader h4 {
    font-size: 2vw !important;
  }

  /*online-sales GET DETAILS*/
  #body #SuperHeader #SuperHeaderLinks .clickable-area:nth-child(1) .blue.cta {
    animation: fadebtn1 32s infinite;
    right: 2.4vw;
  }
  /*bioprocessing GET DETAILS */
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(2) .blue.cta  {
    animation: fadebtn2 32s infinite;
    right: 17.5vw;
    bottom: 2.3vw;
  }
  /*redy-smart WATCH VIDEO*/
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(3) .blue.cta {
    animation: fadebtn3 32s infinite;
    right: 6.4vw;
    bottom: 2.7vw;
  }
  /*optimize-gas DOWNLOAD BROCHURE*/
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(4) .blue.cta  {
    animation: fadebtn4 32s infinite;
    right: 16vw;
    bottom: 2vw;
  }
  /*signal-fire GET INFORMATION*/
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(5) .blue.cta  {
    animation: fadebtn5 32s infinite;
    right: 1.5vw;
  }
  #body #SuperHeader   h4.logo-img {
    bottom: 0; right: 0;
    display: block;
    position: absolute;
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  #body #SuperHeader  h4.logo-img img {
    position: absolute;
    right: -36vw;
    top: -11vw;
    width: 16vw;

  }


  /*The Ultimate Lab Research Tool*/
  #SuperHeaderGfx > #banner_content_online-sales > .banner-text {
    left: 12vw;
    top: 2vw;
  }

  /*Sierra's MFCs Accelerate Bioprocessing*/
  #SuperHeaderGfx > #banner_content_bio-smarttrak > .banner-text {
    left: 16vw;
    top: 2.2vw;
  }

  /*Rock Solid*/
  #SuperHeaderGfx > #banner_content_bio-redysmart > .banner-text {
    left: 50vw;
    top: 1.8vw;
  }

  /*Optimize Gas Flow Measurement*/
  #SuperHeaderGfx > #banner_content_optimize-gas > .banner-text {
    left: 27vw;
    top: 2.4vw;
  }

  #SuperHeaderGfx > #banner_content_optimize-gas > .banner-text h2 {
    font-size: 2.2vw !important;
  }

  #SuperHeaderGfx > #banner_content_optimize-gas > .banner-text h3 {
    font-size: 1.83vw !important;
    max-width: 35vw !important;
    padding-top: .3vw;
  }


  /*IIoT Sensor-to-Cloud Solutions*/
  #SuperHeaderGfx > #banner_content_signal-fire > .banner-text {
    left: 15.25vw;
    top: 1.9vw;
    transform: scale(.9);
  }


}


/*
-------------------
SMALL SIZE ONLY
--------------------
*/


@media ( max-width: 768px ) {

  #SuperHeader {
    position: absolute;
  }
  #SuperHeaderLinks a.cta {
    background: transparent !important;
  }

  #body.initial  {
    padding-top: 80px;
  }

  #SuperHeader.hidden {
    top: -90px;
    opacity: 0;
    pointer-events: 0;
  }

  #SuperHeader .hero-pic {
    height: 50px;
    bottom: 8px;
    animation: none;
    left: 210px;
  }

  #body #SuperHeader .gfx-page {
    padding-top: 14px !important;
  }

  #body #SuperHeader h2 {
    font-size: 19px !important;
    margin-top: 8px;
    margin-left: 14px;
    max-width: 414px;
    line-height: 20px !important;
  }

  #body #SuperHeader h3 {
    color: #333;
    font-size: 13px !important;
    margin-bottom: 3px;
    margin-left: 14px;
    max-width: 400px;
    margin-top: 14px;
  }

  #SuperHeader .gfx-page h2 {
    margin-bottom: -5px;
    margin-top: -2px;
  }
  #body #SuperHeader #SuperHeaderGfx img.banner-hero {
    display: none;
  }

  #body #SuperHeader .cta.blue {
    display: none;
  }
  #SuperHeaderGfx > .gfx-page > .banner-text {
    width: 100%;
    margin: 0 !important;
    padding: 0;
    text-align: center;
  }
  #SuperHeaderGfx > .gfx-page > .banner-text h2,
  #SuperHeaderGfx > .gfx-page > .banner-text h3 {
    display: inline-block;
    width: 100%;
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding: 0;
    text-align: center;
  }
  /* The ultimate Lab Research Tool */
  #SuperHeaderGfx > #banner_content_online-sales > .banner-text h2 {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }
  #SuperHeaderGfx > #banner_content_online-sales > .banner-text h3 {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  /* Sierra MFCs Accelerate Bioprocessing */
  #SuperHeaderGfx > #banner_content_bio-smarttrak > .banner-text h2 {
    margin-top: 14px !important;
  }
  #SuperHeaderGfx > #banner_content_bio-smarttrak > .banner-text h3 {
    margin-top: 4px !important;
  }

  /* Rock Solid Bioprocessing performance */
  #SuperHeaderGfx > #banner_content_bio-redysmart > .banner-text h2 {
    margin-bottom: 0 !important;
  }
  #SuperHeaderGfx > #banner_content_bio-redysmart > .banner-text h3 {
    margin-top: 4px !important;
  }

  /* Optimize Gas Flow Measurement */
  #SuperHeaderGfx > #banner_content_optimize-gas> .banner-text h2 {
    margin-top: 7px !important;
    font-size: 17px !important;
    max-width: 290px;
  }
  #SuperHeaderGfx > #banner_content_optimize-gas> .banner-text h3 {
    margin-top: 3px !important;
    max-width: 250px
  }

  /* IIoT Sensor to Cloud Solutions */
  #SuperHeaderGfx > #banner_content_signal-fire> .banner-text h2 {
    margin-top: 16px !important;
    margin-bottom: 4px !important;
  }
  #SuperHeaderGfx > #banner_content_signal-fire > .banner-text h3 {
    margin-top: 4px !important;
  }

  /*
  #body #SuperHeader .cta.blue {
    pointer-events: none;
    bottom: 8px;
    left: 40px;
    font-weight: 600;
    padding: 0;
    line-height: 20px;
    font-size: 14px;
    background-color: transparent !important;
    color: #2F89FC !important;
    border-radius: 0;
    text-shadow: 0 2px 7px rgb(255,255,255) !important;
    box-shadow: none !important;
  }

  /*online-sales SEE WHAT'S IN STOCK!*/
  #body #SuperHeader #SuperHeaderLinks .clickable-area:nth-child(1) .blue.cta {
    animation: fadebtn1 32s infinite;
    left: 180px !important;
    right: inherit !important;
    bottom: 5px;
  }
  /*bioprocessing GET DETAILS */
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(2) .blue.cta  {
    animation: fadebtn2 32s infinite;
    left: 200px !important;
    right: inherit !important;
    bottom: 4px;
  }

  #body #SuperHeader #banner_content_bio-redysmart h4 {
    font-size: 12pt !important;
    margin-left: 14px !important;
    margin-top: 4px !important;
  }

  /*redy-smart WATCH VIDEO*/
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(3) .blue.cta {
    animation: fadebtn3 32s infinite;
    left: 200px !important;
    bottom: 24px !important;
    right: inherit !important;
  }
  /*optimize-gas GET DETAILS*/
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(4) .blue.cta  {
    animation: fadebtn4 32s infinite;
    left: 248px !important;
    right: inherit !important;
    bottom: 24px;
  }
  /*signal-fire GET INFORMATION*/
  #body #SuperHeader #SuperHeaderLinks  .clickable-area:nth-child(5) .blue.cta  {
        animation: fadebtn5 32s infinite;
        bottom: -4px !important;
        left: 220px !important;
        right: inherit !important;
  }
  
}