.honda-head {
  position: relative;
  top: 0;
  left: 0;
  margin-bottom: 90px;
  min-height: 805px;
  height: 80vh;
  width: 100%;
  background-size: cover;
  overflow: hidden;
}

.photo-credit {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 30px 0 0;
  text-align: right;
  color: #ffffff;
  font-family: "Muli", Helvetica, Arial;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  opacity: .7;
}

.go-back {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 20px;
  width: 50px;
  height: 50px;
  text-indent: -9999px;
  background: #ACACAC url('../images/back.svg') no-repeat 0 0;
  border-radius: 50%;
  outline: none;
}

.go-back:hover {
  background-color: #CACACA;
}

#head-cont {
  position: relative;
  margin: 85px auto 0;
  max-width: 970px;
  color: #fff;
}
#head-cont h1 {
  margin: 19px 0 15px;
  color: #fff;
  font-family: "Muli", Helvetica, Arial;
  font-size: 62px;
  font-weight: bold;
  max-width: 50%;
  line-height: 58px;
}

#head-cont h3 p {
  max-width: 45%;
  font-family: "Muli", Helvetica, Arial;
  font-size: 18.9px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.4px;
  line-height: 1.3;
}
img.head-state {
  max-height: 250px;
  max-width: 250px;
}

.scroll-down {
	display:block;
  position: absolute;
  bottom:18px;
  left:50%;
  margin-left:-31px;
  width:60px;
  height:50px;
  text-indent: -9999px;
  z-index: 3;
}

.scroll-down::before,
.scroll-down::after  {
  position: absolute;
  display:block;
  content:'';
  bottom:20px;
  width:54%;
  height:1px;
  background:#fff;
  outline: none;
}

.scroll-down::before {
  left:0;
  transform:rotate(32deg);
}

.scroll-down::after {
  right:0px;
  transform:rotate(-32deg);
}

#off-road-cont {
  padding: 2px 0 0 5px;
}

#off-road-cont .row {
  max-width: 970px;
}

#off-road-cont .row p {
  font-size: 16px;
  font-family: "Muli", Helvetica, Arial;
  letter-spacing: 0.40px;
  line-height: 1.63;
  padding-right: 7px;
}

#off-road-cont .row p.p1 {
  margin-bottom: 26px;
}

.trails {
  margin-top: 75px;
}

.trails > .row {
  margin-bottom: 50px;
}

.trails > .row:last-child {
  margin-bottom: 75px;
}

.row.large-collapse > .columns.trail {
  padding: 0 0 0 55px;
}

.trail h2 {
  margin: 0 0 43px;
  padding: 0;
  font-family: "Muli", Helvetica, Arial;
  font-size: 60px;
  font-weight: bold;
  color: #000;
  letter-spacing: 0.8px;
}
.row.large-collapse > .columns.trail-img {
  margin: 73px 0 40px;
  padding-left: 15px;
}

.specs-mobile {
  display: none;
  margin-bottom: 20px;
  padding: 0;
}

.specs:before,
.specs-mobile:before {
  display: block;
  position: relative;
  height: 5px;
  width: 130px;
  background: #ff6000;
  content: '';
}

.specs:before{
  margin: 20px 0 20px 20px;
}

.specs-mobile:before {
  margin: 0 0 20px 0;
}

.specs h3.spec {
  display: block;
  position: relative;
  margin-bottom: 10px;
  padding: 3px 12px 10px;
  font-family: "Muli", Helvetica, Arial;
}

.specs-mobile h3.spec {
  float: left;
  display: block;
  position: relative;
  margin-bottom: 20px;
  padding: 3px 12px 10px;
  width: 50%;
}

.specs h3.spec span,
.specs h3.spec strong {
  display: block;
  width: 100%;
  text-align: right;
}

.specs-mobile h3.spec span,
.specs-mobile h3.spec strong {
  display: block;
  width: 100%;
  text-align: left;
}

.specs h3.spec span,
.specs-mobile h3.spec span {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.specs h3.spec strong,
.specs-mobile h3.spec strong {
  font-size: 18px;
  letter-spacing: 0.1px;
}

.trail .description p a {
   color: #333;
   text-decoration: underline;
}

.trail .description p a:hover {
   text-decoration: none;
}

a.cta {
  float: left;
  display: inline-block;
  position: relative;
  height: 65px;
  width: 372px;
  max-width: 372px;
  padding: 23px 70px 23px 25px;
  font-size: 13.4px;
  font-family: "Muli", Helvetica, Arial;
  font-weight: bold;
  color: #fff;
  background: url(../images/cta.jpg) no-repeat;
  letter-spacing: 0.01875rem;
}

a.cta:hover {
  color:#fff;
  text-decoration: none;
}

a.cta:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 25px;
    right: 20px;
    background: url(../images/cta-r.svg) no-repeat;
    width: 25px;
    height: 15px;
    transition: all .1s ease-in-out;
}
a.cta:hover:after {
    right: 10px;
}


@media (max-width: 640px) {
  body .photo-credit {
    padding: 60px 10px 0 0;
    font-size: 10px;
  }
}

@media (max-width: 1023px) {
  .honda-head {
    height: 90vh;
    min-height: 200px;
    height: 100vh;
    margin-bottom: 40px;
  }
  #head-cont {
    margin: 0;
    padding: 60px 15px;
  }
  #head-cont h1 {
    font-size: 40px;
    line-height: 1.2;
  }
  #head-cont h1,
  #head-cont h3,
  #head-cont h3 p {
    max-width: 100%;
  }
  .head-state {
    transform: scale(.7);
    transform-origin: 0 100%;
  }

  .scroll-down {
    display: block;
  }

  body .go-back {
    margin: 0 0 15px 10px;
  }

  .trail h2 {
    margin: 0 0 25px;
    font-size: 48px;
    line-height: 1;
  }

  .specs:before {
    margin-left: 20px;
  }

  .specs {
    display: none;
  }

  .specs-mobile {
    display: block;
  }

  .specs-mobile h3.spec{
    padding: 10px 20px 0 0;
  }

  .row.large-collapse > .columns.trail {
    padding: 0 15px;
  }
  .row.large-collapse > .columns.trail-img {
    margin: 0;
    padding: 0 15px 0 10px;
  }

  a.cta {
    width: 100%;
    margin-bottom: 80px;
    background-size: contain;
    font-size: 75%;
  }

}

@media (min-width: 600px) {
  a.cta {
    margin: 1px 0 100px 200px;
  }
}

@media (max-width: 350px) {
  a.cta {
    padding: 10px 65px 23px 15px;
  }
}