#js-interactive #map-legend span:before {
  font-size: 2.5em;
  content: url(https://assets.pewresearch.org/interactives/religion/2018/how-religious-is-your-country/legend/1.svg);
  padding: 0 3px 0 0; }

#js-interactive #map-legend span:nth-child(2):before {
  content: url(https://assets.pewresearch.org/interactives/religion/2018/how-religious-is-your-country/legend/2.svg); }

#js-interactive #map-legend span:nth-child(3):before {
  content: url(https://assets.pewresearch.org/interactives/religion/2018/how-religious-is-your-country/legend/3.svg); }

#js-interactive #map-legend span:nth-child(4):before {
  content: url(https://assets.pewresearch.org/interactives/religion/2018/how-religious-is-your-country/legend/4.svg); }

#js-interactive #map-legend span:nth-child(5):before {
  content: url(https://assets.pewresearch.org/interactives/religion/2018/how-religious-is-your-country/legend/5.svg); }

#js-interactive {
  font-size: 10px !important; }
  #js-interactive text {
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif; }
  #js-interactive .back-to-top, #js-interactive .read-more {
    cursor: pointer;
    font-size: 1em; }
  #js-interactive #instructions {
    font-family: "abril-text", Georgia, "Times New Roman", Times, serif;
    font-size: 1.8em;
    color: #7E7E7E;
    font-style: italic;
    line-height: 1.6em;
    margin-bottom: 20px; }
  #js-interactive .ui.dropdown.country-select, #js-interactive .ui.dropdown.rank-select {
    width: 45%;
    margin-bottom: 20px; }
  #js-interactive .ui.dropdown {
    width: 100%;
    box-shadow: 1px 1px 3px #D7D7D7;
    height: 2em;
    color: black;
    border-radius: 0;
    margin-bottom: 2em; }
    #js-interactive .ui.dropdown .text {
      overflow: visible; }
  #js-interactive .ui.dropdown.active > .dropdown.icon:before {
    transform: rotate(180deg); }
  #js-interactive .ui.dropdown > .dropdown.icon:before {
    transition: all .17s ease;
    display: inline-block; }
  #js-interactive .ui.selection.dropdown > .dropdown.icon {
    border-left: 1px solid #ddd;
    opacity: 1.0;
    right: 0.75em;
    height: 100%;
    transition: all .17s ease; }
  #js-interactive .ui.dropdown > .dropdown.icon {
    font-size: .9em; }
  #js-interactive .ui.selection.active.dropdown {
    border-color: #ACC4D3; }
  #js-interactive .ui.selection.active.dropdown .menu {
    border-color: #ACC4D3; }
  #js-interactive .ui.dropdown {
    max-width: 380px;
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
    border-radius: 0;
    display: block; }
    #js-interactive .ui.dropdown input.search {
      font-size: 1rem;
      font-weight: normal;
      font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif; }
    #js-interactive .ui.dropdown .menu .item {
      font-size: 1rem; }
    #js-interactive .ui.dropdown .text {
      font-size: 1rem;
      overflow: visible; }
  #js-interactive #country-name {
    font-size: 3em;
    margin-bottom: 5px; }
  #js-interactive #breakdown {
    display: flex; }
    #js-interactive #breakdown #column_1, #js-interactive #breakdown #column_2 {
      float: left;
      position: relative;
      border-bottom: 1px dotted #D7D7D7; }
      #js-interactive #breakdown #column_1 [id^="bar-"], #js-interactive #breakdown #column_2 [id^="bar-"] {
        margin-bottom: 5px;
        padding-bottom: 15px;
        border-bottom: 1px dotted #D7D7D7;
        font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif !important; }
        #js-interactive #breakdown #column_1 [id^="bar-"]:nth-last-of-type(1), #js-interactive #breakdown #column_2 [id^="bar-"]:nth-last-of-type(1) {
          border: none; }
        #js-interactive #breakdown #column_1 [id^="bar-"] .percentage, #js-interactive #breakdown #column_2 [id^="bar-"] .percentage {
          font-weight: bold;
          font-size: 2em;
          margin: 10px 0 0 0;
          color: #7E7E7E; }
          #js-interactive #breakdown #column_1 [id^="bar-"] .percentage span, #js-interactive #breakdown #column_2 [id^="bar-"] .percentage span {
            font-size: .75em; }
        #js-interactive #breakdown #column_1 [id^="bar-"] .description, #js-interactive #breakdown #column_2 [id^="bar-"] .description {
          color: #7E7E7E;
          font-size: 1.4em;
          line-height: 1.4em;
          margin-top: 6px; }
        #js-interactive #breakdown #column_1 [id^="bar-"] .bar-container, #js-interactive #breakdown #column_2 [id^="bar-"] .bar-container {
          background: #EEECE4;
          width: 100%; }
          #js-interactive #breakdown #column_1 [id^="bar-"] .bar-container .bar, #js-interactive #breakdown #column_2 [id^="bar-"] .bar-container .bar {
            background: #C3BB9B;
            min-height: 2.0em;
            -webkit-animation: animate 0.5s;
            -moz-animation: animate 0.5s;
            animation: animate 0.5s;
            font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
            font-size: 1em; }
    #js-interactive #breakdown #column_1 {
      padding-right: 2em;
      width: 45%; }
      #js-interactive #breakdown #column_1 .flag-container {
        margin-top: 10px;
        max-width: 140px;
        height: 109px;
        display: flex; }
      #js-interactive #breakdown #column_1 .flag {
        max-height: 79px; }
      #js-interactive #breakdown #column_1 .about-score {
        cursor: pointer; }
      #js-interactive #breakdown #column_1 #rank h1 {
        font-family: "abril-display", Georgia, "Times New Roman", Times, serif;
        margin: 0;
        padding: 0 0;
        font-size: 5.5em;
        line-height: 100%;
        font-weight: normal; }
      #js-interactive #breakdown #column_1 #rank #overline, #js-interactive #breakdown #column_1 #rank #underline {
        color: #7E7E7E;
        font-size: 1.4em;
        line-height: 1.4em;
        font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif !important; }
      #js-interactive #breakdown #column_1 #rank #overline {
        margin-bottom: 10px; }
      #js-interactive #breakdown #column_1 #rank #underline {
        margin-top: 10px;
        line-height: 1.4em; }
      #js-interactive #breakdown #column_1 #bar-combined_scale {
        bottom: 0;
        position: absolute;
        margin-right: 2em;
        margin-bottom: 10px; }
        #js-interactive #breakdown #column_1 #bar-combined_scale .bar {
          background: #938857; }
    #js-interactive #breakdown #column_2 {
      border-left: 1px dotted #D7D7D7;
      width: 55%;
      padding-left: 2em; }
      #js-interactive #breakdown #column_2 .religious-profile {
        margin-top: 0;
        margin-bottom: 20px; }
      #js-interactive #breakdown #column_2 [id^="bar-"]:nth-last-of-type(1) {
        margin-bottom: 2.9em; }
  #js-interactive #map-lede {
    width: 100%;
    float: left;
    margin-top: 30px; }
    #js-interactive #map-lede h4 {
      margin-top: 0;
      margin-bottom: .5em; }
    #js-interactive #map-lede span {
      display: block;
      font-size: 1.5em;
      font-style: italic;
      font-family: Georgia, serif;
      color: #7E7E7E;
      margin-bottom: 20px; }
  #js-interactive #rank-description {
    font-size: 1.5em;
    line-height: 1.5em;
    font-style: italic;
    font-family: Georgia, serif;
    color: #7E7E7E;
    margin-bottom: 20px; }
  #js-interactive #map-legend {
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif !important; }
    #js-interactive #map-legend span {
      line-height: 1.4em;
      font-weight: normal;
      font-size: 1.4em;
      margin-right: 1em;
      display: inline-block; }
  #js-interactive #map-footer {
    font-size: 1.4em;
    color: #7E7E7E;
    display: none; }
    #js-interactive #map-footer span {
      font-weight: bold; }
    #js-interactive #map-footer a:after {
      content: '\2192'; }
  #js-interactive #map {
    width: 100%; }
    #js-interactive #map path[id^="map-country-"] {
      stroke: white;
      stroke-width: .4px; }
    #js-interactive #map .highcharts-data-label {
      cursor: default; }
    #js-interactive #map .highcharts-null-point {
      cursor: default;
      pointer-events: none;
      stroke: white;
      stroke-width: .8px; }
    #js-interactive #map path[id^="map-country-"].active {
      filter: url(#inset); }
    #js-interactive #map path[id^="map-country-"].highcharts-null-point {
      fill: #f7f7f7;
      stroke: #D7D7D7; }
  #js-interactive #table {
    border-top: 1px dotted #D7D7D7;
    border-bottom: 1px dotted #D7D7D7;
    margin-top: 2em; }
    #js-interactive #table table {
      width: 100% !important;
      border-spacing: 0 !important; }
    #js-interactive #table h4 {
      margin-top: 30px; }
    #js-interactive #table tr td {
      text-align: left;
      border: none;
      font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
      font-size: 1.4em;
      padding: 6px 5px !important; }
    #js-interactive #table tr td:nth-child(1) {
      width: 1em; }
    #js-interactive #table tr td:nth-child(3) {
      text-align: right; }
    #js-interactive #table tr.active td {
      font-weight: bold; }
    #js-interactive #table tr:nth-child(odd) {
      background: #EEECE4; }
    #js-interactive #table tr td:first-child::before {
      min-width: 1em;
      margin-right: 0.5em; }
  #js-interactive #interactive-footer h4 {
    margin-top: 30px; }
  #js-interactive #interactive-footer .notes p {
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
    font-size: 1.2em;
    margin: 0;
    color: #7E7E7E; }

@media (max-width: 500px) {
  #js-interactive #breakdown {
    display: block; }
    #js-interactive #breakdown #column_2 {
      width: 100%;
      border-left: none;
      margin-top: 1em;
      padding: 0; }
    #js-interactive #breakdown #column_1 {
      clear: both;
      width: 100%;
      padding: 0; }
      #js-interactive #breakdown #column_1 .flag {
        padding: 0; }
      #js-interactive #breakdown #column_1 #bar-combined_scale {
        position: relative;
        margin-right: 0;
        margin-top: 15px; }
  #js-interactive .ui.dropdown.country-select, #js-interactive .ui.dropdown.rank-select {
    width: 100% !important; } }

@-webkit-keyframes animate {
  0% {
    width: 0; } }

@-moz-keyframes animate {
  0% {
    width: 0; } }

@keyframes animate {
  0% {
    width: 0; } }