@media screen and (min-width:768px) {
  #section-hero .container-flame {
    margin-top: 12vh;
    left: -40vw;
  }

  #section-roadmap .container-flame {
    bottom: 55%;
    left: -15vw;
  }
}

@media screen and (min-width: 1024px) {
  #section-hero .container-flame {
    margin-top: -15vh;
    left: -40vw;
  }

  #section-roadmap .container-flame {
    bottom: -9%;
    left: auto;
  }


}

@media screen and (min-width: 1280px) {
  #section-hero .container-flame {
    margin-top: -10vh;
    left: -20vw;
  }

  #section-hero[data-scroll-section-inview] .container-flame svg .st0,
  #section-roadmap[data-scroll-section-inview] .container-flame svg .st0 {
    animation: dash 2s cubic-bezier(0.54, 0.9, 0.78, 1) forwards .5s;
    -webkit-animation: dash 2s cubic-bezier(0.54, 0.9, 0.78, 1) forwards .5s;
  }

}


.offices {
  background-image: url('/public/img/hero-workflow.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  /* locomotive */
}

#goal .slider-container,
#goal .slider-container img {
  height: 380px;
}

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

  #goal .slider-container,
  #goal .slider-container img {
    height: 600px;
  }
}

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

  .offices {
    background-image: url('/public/img/hero-workflow.jpg');
    /* locomotive */
    background-size: cover;
    /* locomotive */
    width: 120%;
    /* locomotive */
    left: -10%;
    /* locomotive */
    height: 100%;
  }
}

@media screen and (min-width: 1024px) {
  #goal .slider-container {
    top: 8rem;
  }
}

@media screen and (min-width: 1280px) {
  .contents-container>.container-flame {
    margin-left: -24vw;
  }
}

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

  #goal .slider-container,
  #goal .slider-container img {
    height: 800px;
  }
}