#subheader {
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  background-image: url('../images/subheaders/sub-header-background.png');
  background-position: center;
  background-size: cover;
  position: relative;
  width: 100%;
  padding-top: 110px;
  padding-bottom: 85px;
  line-height: 33px;
  background-color: #F1F3F7;
  text-align: center;
}

#subheader .content_area {
    position: relative;
    z-index: 1;
}

#subheader .subheader-title {
  font: normal 600 48px/1 "sofia-pro", sans-serif;
  color: #000;
  margin-top: 0;
}

#subheader p {
  font-weight: 300;
  line-height: 1.5em;
  margin: 0 0 30px;
  font-size: 14px;
}

#subheader h2 {
  font-size: 35px;
  margin-bottom: 20px;
  margin-top: 20px;
}

#subheader h4{
  font-size: 31px;
  margin-top: 50px;
}

#subheader a.anchor-icon {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 16%;
  min-height: 64px;
  text-align: center;
  position: relative;
}

#subheader a.anchor-icon:not(:last-child) {
  margin-right: 6px;
}

#subheader a.anchor-icon img {
  min-width: 64px;
  position: absolute;
  left: calc(50% - 32px);
  top: 0;
  border-radius: 50%;
  outline: 3px solid #fff !important;
}

.anchor-group {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#subheader a.anchor-icon img {
  -webkit-transition: transform 1s ease;
      -moz-transition: transform 1s ease;
      -ms-transition: transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease;
}

#subheader a.anchor-icon img:hover {
    transform: translateX( -1px ) rotateY( 180deg ); /* ALSO EXTRA TRANSFORM PROPERTIES ADDED FOR COMPATIBILITY*/
    -ms-transform: translateX( -1px ) rotateY(180deg); /* IE 9 */
    -webkit-transform: translateX( -1px ) rotateY(180deg); /* Chrome, Safari, Opera */
}

.scroll-to-link {
  display: block;
  height: 36px;
  width: 36px;
  margin: 20px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 37 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5168 30.2445L12.2048 23.572L14.248 21.6392L18.5113 26.1461L22.7492 21.642L24.7976 23.5692L18.5168 30.2445ZM30.1719 27.5625V8.4375C30.1719 3.78506 26.3868 0 21.7344 0H15.2656C10.6132 0 6.82812 3.78506 6.82812 8.4375V27.5625C6.82812 32.2149 10.6132 36 15.2656 36H21.7344C26.3868 36 30.1719 32.2149 30.1719 27.5625ZM21.7344 2.8125C24.8361 2.8125 27.3594 5.33578 27.3594 8.4375V27.5625C27.3594 30.6642 24.8361 33.1875 21.7344 33.1875H15.2656C12.1639 33.1875 9.64062 30.6642 9.64062 27.5625V8.4375C9.64062 5.33578 12.1639 2.8125 15.2656 2.8125H21.7344ZM18.5 5.69531C17.7233 5.69531 17.0938 6.32483 17.0938 7.10156C17.0938 7.8783 17.7233 8.50781 18.5 8.50781C19.2767 8.50781 19.9062 7.8783 19.9062 7.10156C19.9062 6.32483 19.2767 5.69531 18.5 5.69531ZM18.5 11.3203C17.7233 11.3203 17.0938 11.9498 17.0938 12.7266C17.0938 13.5033 17.7233 14.1328 18.5 14.1328C19.2767 14.1328 19.9062 13.5033 19.9062 12.7266C19.9062 11.9498 19.2767 11.3203 18.5 11.3203ZM18.5 16.9453C17.7233 16.9453 17.0938 17.5748 17.0938 18.3516C17.0938 19.1283 17.7233 19.7578 18.5 19.7578C19.2767 19.7578 19.9062 19.1283 19.9062 18.3516C19.9062 17.5748 19.2767 16.9453 18.5 16.9453Z' fill='%237DC456'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


#subheader .absolute-image {
    position: unset;
    transform: translate(26vw, -200px);
/*    transform: translate(359px, -200px)*/
}

@media (min-width: 1200px){
  #subheader .absolute-image {
      position: unset;
      transform: translate(289px, -200px);
  /*    transform: translate(359px, -200px)*/
  }
}
#subheader .content {
  z-index: 2
}
#subheader .content a {
  display: inline-block;
  color: #7DC456
}

.subheader__bottom-content {
/*  max-width: 200px;*/
  margin: 0 auto 20px;
}

.subheader__bottom-content * {
  font-weight: 600;
}

.subheader__bottom-content span {
  display: inline-block;
  margin-bottom: 20px;
}

#subheader .letter {
  position: absolute;
  right: 0;
  top: 0;
  /*-webkit-animation: float_letter  6s ease-in-out infinite;
          animation: float_letter  6s ease-in-out infinite;*/
}

@-webkit-keyframes float_letter  {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-20px);
            transform: translatey(-20px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
@keyframes float_letter  {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-20px);
            transform: translatey(-20px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
#subheader .keyboard {
  position: absolute;
  right: 0;
  top: 0;
  /*-webkit-animation: float_keyboard 6s ease-in-out infinite;
          animation: float_keyboard 6s ease-in-out infinite;*/
}

@-webkit-keyframes float_keyboard {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-30px);
            transform: translatey(-30px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
@keyframes float_keyboard {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-30px);
            transform: translatey(-30px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
#subheader .mouse {
  position: absolute;
  right: 0;
  top: 0;
  /*-webkit-animation: float_mouse 6s ease-in-out infinite;
          animation: float_mouse 6s ease-in-out infinite;*/
}

@-webkit-keyframes float_mouse {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-50px);
            transform: translatey(-50px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
@keyframes float_mouse {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-50px);
            transform: translatey(-50px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
#subheader .cup {
  position: absolute;
  right: 0;
  top: 0;
  /*-webkit-animation: float_cup 6s ease-in-out infinite;
          animation: float_cup 6s ease-in-out infinite;*/
}
@-webkit-keyframes float_cup {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-40px);
            transform: translatey(-40px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
@keyframes float_cup {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-40px);
            transform: translatey(-40px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
#subheader .glasses {
  position: absolute;
  right: 0;
  top: 0;
  /*-webkit-animation: float_glasses 6s ease-in-out infinite;
          animation: float_glasses 6s ease-in-out infinite;*/
}

@-webkit-keyframes float_glasses {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-25px);
            transform: translatey(-25px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}
@keyframes float_glasses {
  0% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-25px);
            transform: translatey(-25px);
  }
  100% {
    -webkit-transform: translatey(0px);
            transform: translatey(0px);
  }
}

@media screen and (min-width: 576px){
  #subheader {
    text-align: left;
  }
  /*#subheader .subheader-title {
    font-size: 48px;
  }*/
  /*#subheader h2 {
    font-size: 24px;
  }*/
  .subheader__bottom-content {
    text-align: center;
  }
  #subheader a.anchor-icon {
    min-height: 76px;
  }
  .scroll-to-container {
    display: none;
  }
}

@media screen and (min-width: 768px){
  #subheader {
    padding-top: 200px
  }
  /*#subheader .subheader-title {
    font-size: 56px;
  }*/
  /*#subheader h2 {
    font-size: 28px;
  }*/
  #subheader .absolute-image img {
/*      max-height: 1080px;*/
      width: auto;
      max-height: 979px;
  }
  #subheader a.anchor-icon {
      position: relative;
      z-index: 1;
      width: auto
  }
  .anchor-group {
    flex-wrap: wrap;
  }
  #subheader a.anchor-icon img {
    position: static;
  }
  #subheader a.anchor-icon:not(:last-child) {
    margin-right: 15px;
  }
  .subheader__bottom-content {
    max-width: 100%;
    text-align: left;
  }
  .subheader__bottom-content span {
    margin-bottom: 0;
  }

}

@media screen and (min-width: 992px){
  /*#subheader .subheader-title {
    font-size: 64px;
  }*/
  /*#subheader h2 {
    font-size: 33px;
  }*/
}

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