.hero-collection {
    max-width: 1000px; 
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 15em;
    margin-bottom: 10em;
}

.fmh-mask {
    width: 50%;
    position: absolute;
    top: -190px;
    -webkit-mask-image: url(https://21470882.fs1.hubspotusercontent-na1.net/hubfs/21470882/Theme%20Assets/FMH-F2.svg);
     mask-image: url(https://21470882.fs1.hubspotusercontent-na1.net/hubfs/21470882/Theme%20Assets/FMH-F2.svg);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
     mask-size: 100%;
     -webkit-mask-size: 100%; 
}

.fmh-mask .fmh-illustration {
  background-image: url(https://21470882.fs1.hubspotusercontent-na1.net/hubfs/21470882/FMH_Web_Home_Hero-Illustration1-TopFade2-6.svg);
  background-size: 800px auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 10% 5em;
  width: 100%;
  height: 75vh;
  z-index: 1;
}

.fmh-illustration.scroll {
  background-attachment: scroll;
}

.tagline {
  width: 60%; 
  margin-left: 40%; 
  position: relative; 
  float: left;
}

.tagline h1 {
  color: #002F34;
}

.tagline svg {
  position: absolute; 
  bottom: 12px;
}

.tagline-2 {
  width: 60%; 
  margin-left: 40%; 
  margin-top: 3em;
  z-index: 2;
}

.tagline-2 p {
  width: 70%;
}

.tagline-2 a {
  text-decoration: none;
  z-index: 3;
  color: #F36745 !important;
}

.tagline-2 a:hover {
  color: #F36745;
  font-family: Halcom-Medium;
}

.right-or-arrow {
  position: relative;
  top: 3px;
  left: 5px;
  width: .9em;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 1.2s linear forwards;
  animation-delay: 1s;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  8% {
    stroke-dashoffset: 1000;        
  }
  20% {
    stroke-dashoffset: 0;        
  }  
  85% {
    stroke-dashoffset: 0;        
  } 
  100% {
    stroke-dashoffset: 1000;        
  }     
}


@media screen and (max-width: 700px) { 
  
  .hero-collection {
    margin-top: 15em;
    margin-bottom: 5em;
    overflow-y: visible;
    overflow-x: clip;
  }
  
  .fmh-mask {
    width: 300px;
    left: calc(50% - 204px);
    top: -264px;
  }
  
  .fmh-mask .fmh-illustration {
    background-size: 460px auto;
    background-position: 10% 3em;
    height: 46vh;
  }
  
  .tagline {
    width: 100% !important;
    left: 0px;
    margin-left: 0%;
    top: 80px;
  }
  
  .tagline h1 {
    font-size: 23px !important;
    padding-left: 15px !important;
    text-align: left !important;
  }
  
  .tagline svg {
    left: 23px !important;
    width: 21% !important;
  }
  
  .tagline-2 {
    width: 450px !important;
    left: 0px;
    position: relative;
    margin-left: 0%;
    top: 80px;
    text-align: left !important;

  }
  
  .tagline-2 p {
    padding-left: 15px;
    text-align: left !important;
    overflow: overlay !important;

  }
}

@media screen and (max-width: 600px) { 
  .fmh-mask {
    left: calc(50% - 145px) !important;
  }

}

@media screen and (max-width: 450px) { 
  .fmh-mask {
    left: calc(50% - 132px) !important;
  }

}

@media screen and (max-width: 400px) {
  
  .fmh-mask {
      width: 81% !important;
      left: calc(50% - 145px) !important;

  }
  
  .tagline h1 {
    font-size: 21px !important;
  }
  
  .tagline svg {
    width: 38% !important;
  }
  
  .tagline-2 {
    width: 350px !important;

  }
}

@media screen and (max-width: 350px) { 
    .fmh-mask {
      width: 94% !important;
      left: calc(50% - 128px) !important;

  }

}

@media screen and (max-width: 1100px) and (min-width: 700px) {
  .hero-collection {
    margin-top: 20em;
  }
  
  .fmh-mask {
    width: 400px;
    left: calc(50% - 200px);
    top: -333px;
  }
  
  .fmh-mask .fmh-illustration {
    background-size: 600px auto;
    background-position: 40% 3em;
  }
  
  .tagline {
    width: 500px !important;
    left: calc(50% - 250px);
    margin-left: 0%;
    top: 100px;
  }
  
  .tagline-2 {
    width: 500px !important;
    left: calc(50% - 250px);
    position: relative;
    margin-left: 0%;
    top: 100px;
  }
}


@media screen and (min-width: 1600px) {
  
  .fmh-mask .fmh-illustration {
      background-position: 20% 5em;
  }
}

@media screen and (min-width: 1800px) {
  
  .fmh-mask .fmh-illustration {
      background-position: 25% 5em;
  }
}