#challenge-page {
  padding: 30px 0 50px;
}

.challenge-wrapper {
  padding: 0 0.9375rem;
}

.challenge-wrapper > .columns {
  background: #fff;
}

#challenge-page h1 {
  margin-bottom: 0;
}

#challenge-trinket {
  margin-top: 1rem;
}

#challenge-trinket iframe {
  display: block;
  border: 1px solid #d6d6d6;
  background: #fff;
}

#next-step-modal h2 {
  color: #26BF12;
}

#next-step-modal h2 > i {
  margin-right: 1em;
}

.reset-challenge {
  margin-top: 10px;
  white-space: nowrap;
}
.reset-challenge.hide {
  display: none;
}

.boom {
   position: absolute;
}

.place {
   position: absolute;
}

.spark {
  position: absolute;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}

.spark.front {
  width: 5px;
  height: 4px;
}

.spark.mid {
  width: 3px;
  height: 4px;
}

.spark.mid2 {
  width: 4px;
  height: 3px;
}

.spark.back {
  width: 2px;
  height: 2px;
}

.marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0.75em 0 0;
  border: 1px solid #d6d6d6;
  background-color: #d4d4d4;
}

.mark {
  font-size: 1.5em;
  padding: 4px;
  text-align: center;
  color: #FFDA00;
  display: inline-block;
  width: 2em;
}

.mark.active {
  color: #008AFF;
}

section.description, section.directions {
  margin: 0.5em;
}

section.directions {
  padding: 1em;
  border: 1px solid #d6d6d6;
  background-color: #d4d4d4;
}

.mark.pass {
  color: #26BF12;
}

@media only screen and (max-width: 40em) {
  #challenge-page {
    padding-top: 20px;
  }

  #challenge-page .text-right {
    text-align: left !important;
  }

  .reset-challenge {
    margin-top: 0;
  }

  .mark {
    width: 1.75em;
  }
}