.jr-gemologist-programs div.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition-timing-function: ease-out, step-end;
}

#program-boy-scouts, #program-girl-scouts, #program-grades-4-12 {
  transition: opacity 0.3s ease-in, height 0.3s step-start;
}

.jr-gemologist-programs a.btn-primary {
  padding-left: 30px;
  padding-right: 30px;
}

.jr-gemologist-programs sup {
  font-size: 30%;
  top: -2em; 
  letter-spacing: -1px; 
}

.jr-gemologist-programs .tabs-container .header-support {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  color: #202020;
  text-align: center;
  font-family: freight-sans-pro, sans-serif;
  font-style: normal;
  background-image: none;
  padding-bottom: 0;
  font-weight: 700;
  line-height: 1em;
  margin-right: 5px;
}

.jr-gemologist-programs .tabs-container .tabs li.selected {
  background-color: #000;
  color: #fff;
}

.jr-gemologist-programs .tabs-container .tabs li {
  margin: 0 1px; 
  webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;
  background-color: #f1f1f1;
  height: 37px;
  line-height: 37px;
  position: relative;
}

.jr-gemologist-programs .tabs-container .tabs li.selected a {
  color: #fff;
}

.jr-gemologist-programs .tabs-container .tabs li a  {
  color: #242223;
  padding: 0 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "freight-sans-pro", sans-serif;
  font-weight: 700;
  text-align: center;
  border-bottom: none;
}

.jr-gemologist-programs .tabs-container .tabs li.selected:after {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: -5px;
  background: url("../img/icons/arrow-down.png") no-repeat center top;
}

#program-content h3 {
  background-position: center bottom;
}

.img-wrapper {
  max-width: 886px;
  margin: 10px auto 0 auto;
}

.img {
  border: #A8996E solid 5px;
  width: 100%;
}

.shadow {
  background: url(../img/news-research/slide-bottom-shadow.png) center 0;
  background-repeat: no-repeat;
  background-size: contain;
  height: 18px;
}

#how-to-learn {
  background-color: #f7f7f7;
  padding: 60px 0;
  margin: 40px 0 30px 0;
}

div.method {
  background: #fff;
  border-radius: 0 2px 0 0;
  margin-top: 25px;
  padding: 45px 25px;
  max-width: 300px;
}

#how-to-learn .floating-icon {
  position: absolute;
  top: -25px;
}

#how-to-learn .heading {
  margin-top: 30px;
  text-transform: uppercase;
  font-family: freight-sans-pro, sans-serif;
  font-size: 18px;
  line-height: 1.125em;
  color: #202020;
  margin-bottom: 18px;
  font-weight: 700;
}

#program-content .left {
  max-width: 560px;
  max-height: 380px;
}

#program-content .right {
  max-width: 300px;
}

#program-boy-scouts img.img-fluid, #program-girl-scouts img.img-fluid {
  top: -140px;
  left: 65px;
}

#program-content .copy-lead-in-hero {
  font-family: freight-sans-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  text-transform: none;
  font-size: 30px;
  line-height: 35px;
  color: #666;
}

#program-content .reg-copy {
  font-size: 13px;
  line-height: 20px;
  font-family: "Helvetica", "Arial", sans-serif;
  color: #666;
  font-style: normal;

}

#program-content .header-list {
  background:none;
  font-size: 15px;
  padding: 15px 0;
  margin-bottom: 0;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height: 1em;
  color: #202020;
  font-family: freight-sans-pro, sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1em;
}