@media (min-width: 1100px) {
  .logo__a {
    background-color: #fdd100;
    background-image: url(/images/home/epa-logo-grey.png);
  }
}

#masthead {
  background-image: none;
}

@media (min-width: 1100px) {
  #masthead h1 {
    margin-right: -50px;
  }
}

#main {
  padding-bottom: 0;
  min-height: 200px;
}

section {
  position: relative;
}

.homeintro {
  max-width: 900px;
}

.homepage-intro {
  padding-left: 15px;
}

.five-steps {
  background: #fdd100 url(/images/home/yellow-grey.gif) repeat-x center top;
  min-height: 500px;
  -moz-transition: background 2s;
  /* Safari */
  -o-transition: background 2s;
  /* Safari */
  -webkit-transition: background 2s;
  /* Safari */
  transition: background 2s;
}

.five-steps .container {
  height: auto;
}

.five-steps-title {
  margin-top: 30px;
  padding: 0;
}
@media (min-width: 1100px) {
  .five-steps-title {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1600px;
  }
}
.five-steps-title .five-steps-title__img {
  height: 90px;
  background-color: #282425;
  background-image: url(/images/home/five-steps.gif);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-indent: -9999px;
}
@media (min-width: 1100px) {
  .five-steps-title .five-steps-title__img {
    height: 135px;
    width: 500px;
    margin-left: 15px;
  }
}

.five-steps__list {
  margin: 0;
  padding: 0 15px;
  display: flex;
  overflow-x: auto;
  padding-bottom: 25px;
  scroll-snap-type: x mandatory;
}
@media (min-width: 1100px) {
  .five-steps__list {
    overflow-x: unset;
  }
}

.five-steps__list:after {
  content: ".";
  height: 0;
  display: block;
  clear: both;
  visibility: hidden;
}

.step {
  list-style-type: none;
  text-transform: uppercase;
  padding: 13px 1px 0 0;
  font-family: "atrament-web", sans-serif;
  min-width: 100%;
  scroll-snap-align: center;
}
@media (min-width: 1100px) {
  .step {
    min-width: auto;
    flex: 1;
  }
}
.step h3 {
  color: #ee6b25;
  font-family: "atrament-web", sans-serif;
  font-size: 60px;
  font-weight: 400;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 5px;
  -moz-font-feature-settings: "lnum";
  -ms-font-feature-settings: "lnum";
  -o-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

.step-body {
  background: #FFF;
  padding: 0 20px;
  font-family: "jaf-facitweb", sans-serif;
  text-transform: none;
  font-size: 14px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
}
.step.open .step-body {
  max-height: 1000px;
}

.step-body > :last-child {
  margin-bottom: 30px;
}

.step-body .stepcontent {
  padding: 0 0 30px 0;
}

.five-steps .step ul {
  padding: 20px 0 0 0;
  margin: 0px;
  border-top: solid 1px #eee;
  display: block;
}

.next-step {
  font-size: 30px;
  margin-top: 20px;
  position: relative;
  display: none;
  justify-content: flex-end;
  align-items: center;
  padding-right: 35px;
}
.step.open .next-step {
  display: flex;
}
.next-step::before {
  background: url(/images/home/top-arrow.gif) no-repeat;
  transform: rotate(90deg);
  width: 23px;
  height: 23px;
  content: "";
  position: absolute;
  right: 8px;
}
@media (min-width: 1100px) {
  .next-step {
    display: none;
  }
}

.five-steps .step li {
  background: url("/images/home/pink-arrow.gif") no-repeat left 5px;
  font-family: "jaf-facitweb", Arial, Helvetica, sans-serif;
  font-weight: 300;
  list-style-type: none;
  float: none;
  text-transform: none;
  padding: 0px 0 0 20px;
  margin-bottom: 20px;
}

.step__title {
  display: flex;
  align-items: center;
  font-size: 25px;
  cursor: pointer;
  padding: 10px 35px 10px 20px;
  font-weight: 300;
  letter-spacing: 1px;
  height: 66px;
  background-color: #FFF;
  position: relative;
}
.step__title::before {
  width: 23px;
  height: 23px;
  content: "";
  position: absolute;
  right: 8px;
  top: 37%;
  background: url(/images/home/orange-arrow.gif) no-repeat;
}
.step.open .step__title {
  color: #282425;
}
.step.open .step__title::before {
  background: url(/images/home/top-arrow.gif) no-repeat;
  transform: rotate(90deg);
}
@media (min-width: 1100px) {
  .step.open .step__title::before {
    transform: none;
  }
}
.step__title:hover {
  color: #fff;
  background-color: #fdd100;
}
.step__title:hover::before {
  background: url(/images/home/down-arrow-white.gif) no-repeat;
}
@media (min-width: 1100px) {
  .step__title {
    height: 115px;
  }
}

@media screen and (min-width: 1100px) {
  .five-steps ul li .step {
    font-size: 16px;
  }
}
@media screen and (min-width: 1400px) {
  .five-steps ul li span {
    font-size: 24px;
  }

  #masthead {
    background: url(/images/home/homepage-masthed-background.png) no-repeat 95% bottom #fdd209;
  }
}
@media screen and (min-width: 1550px) {
  .five-steps ul li span {
    font-size: 30px;
  }
}

/*# sourceMappingURL=home.css.map */