#badge_info {
  grid-auto-rows: auto;
  align-items: start; }
  #badge_info #badge {
    text-align: center; }
  #badge_info #content .identity {
    display: flex; }
    #badge_info #content .identity span {
      flex: 1 1 50%; }
  #badge_info #content #interest {
    display: flex; }
    #badge_info #content #interest .button {
      display: flex;
      align-self: center; }
      #badge_info #content #interest .button .material-icons {
        align-self: center;
        font-size: 1rem; }
      #badge_info #content #interest .button .label {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 100%;
        align-self: center; }
    #badge_info #content #interest span {
      align-self: center;
      font-size: 75%; }
  #badge_info #content #tier_info {
    color: silver; }
    #badge_info #content #tier_info .earned {
      color: black; }
    #badge_info #content #tier_info .hidden {
      display: none; }
  #badge_info #content #transcript {
    flex: 1 1; }
    #badge_info #content #transcript .title {
      flex: 1 1 100%;
      font-family: "Serifa", serif;
      font-size: 1rem;
      line-height: 1rem;
      margin: 0px 0px 0px 0px; }
    #badge_info #content #transcript .detail {
      flex: 1 1 100%;
      font-size: .8rem;
      line-height: .8rem;
      margin-top: 0.2rem;
      margin-bottom: 1rem; }
  #badge_info #badge_progress {
    display: flex;
    border-right: 1px solid black;
    cursor: pointer; }
    #badge_info #badge_progress .point_tier_box {
      height: 100%;
      background-color: blue;
      display: flex;
      position: relative;
      border: 1px solid black;
      border-right: none; }
      #badge_info #badge_progress .point_tier_box.bronze {
        background-color: #c19a6b; }
      #badge_info #badge_progress .point_tier_box.silver {
        background-color: #d5d5d7; }
      #badge_info #badge_progress .point_tier_box.gold {
        background-color: #e0c56e; }
      #badge_info #badge_progress .point_tier_box div {
        display: flex; }
        #badge_info #badge_progress .point_tier_box div.unearned {
          background-color: white;
          opacity: 0.2; }
      #badge_info #badge_progress .point_tier_box .guidance {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center; }
  #badge_info #opportunities h4 {
    display: inline; }

@media screen and (min-width: 60rem) {
  #badge {
    grid-column: 2 / 4;
    grid-row: 1 / 2; }
    #badge #image img {
      width: 100%;
      height: auto; }
  #content {
    grid-column: 4 / 9;
    grid-row: 1 / 2; }
  #opportunities {
    grid-column: 2 / 9;
    grid-row: 2 / 3; }
  #badge_progress {
    width: 99%;
    height: 50px; } }

@media screen and (max-width: 60rem) {
  #badge {
    grid-column: 1 / 4;
    grid-row: 1 / 2; }
    #badge #image img {
      width: 75%;
      height: auto;
      margin: 0 7%; }
  #content {
    grid-column: 1 / 4;
    grid-row: 2 / 3; }
  #opportunities {
    grid-column: 1 / 4;
    grid-row: 3 / 4; }
  #badge_progress {
    width: 98%;
    height: 100px; } }

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