@import "http://www.pewresearch.org/wp-content/plugins/pew-refactor-shim/assets/legacylib/chunks/toggle-buttons.css";
.embed {
  font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif; }

#js-generation-comparison {
  background-color: #f3f3ed;
  padding: 2em 1.5em 0em 1.5em;
  min-height: 450px;
  max-width: 800px;
  margin: 0 auto; }
  #js-generation-comparison .toggle {
    display: table;
    margin: 1em auto;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif; }
  #js-generation-comparison .ui.vertical.text.menu {
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
    width: 100%; }
  #js-generation-comparison .ui.text.menu .active.item {
    font-weight: 500; }
  #js-generation-comparison .ui.text.menu .item::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0px;
    height: 2px;
    width: 0%;
    background: #938857;
    z-index: -4;
    -webkit-transition: width .1s;
    transition: width .1s; }
  #js-generation-comparison .ui.text.menu .active.item::after {
    width: 100%; }
  #js-generation-comparison .ui.vertical.text.menu:first-child {
    margin-top: .7rem; }
  #js-generation-comparison .ui.vertical.text.menu .item {
    margin: 0;
    z-index: 5;
    position: relative;
    float: left;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    clear: both;
    -webkit-transition: color .3s;
    transition: color .3s; }
    #js-generation-comparison .ui.vertical.text.menu .item:hover {
      color: black; }
  #js-generation-comparison #comparison-footer {
    float: left;
    position: relative;
    width: 100%;
    margin-top: 20px; }
    #js-generation-comparison #comparison-footer p {
      font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
      font-size: 1.2em;
      color: #888888; }
  #js-generation-comparison #comparison-menu {
    float: left;
    position: relative;
    width: 23%; }
  #js-generation-comparison #comparison-table {
    float: left;
    position: relative;
    width: 77%; }
    #js-generation-comparison #comparison-table h4 {
      margin-bottom: .5em; }
  #js-generation-comparison span.expand-definition {
    color: white;
    background-color: #C6C8CA;
    font-size: .8em;
    height: 13px;
    width: 13px;
    display: inline-block;
    vertical-align: 10%;
    text-align: center;
    border-radius: 100%;
    font-weight: 100;
    cursor: pointer;
    line-height: 1.2em; }
  #js-generation-comparison table thead td {
    text-align: left;
    border: none; }
    #js-generation-comparison table thead td span {
      float: left;
      line-height: 1.8em;
      font-weight: normal;
      font-size: 1.2em;
      margin: 0 .5em 0 0; }
      #js-generation-comparison table thead td span:before {
        content: '\25a0';
        font-size: 2em;
        padding: 0 2px 0 0;
        vertical-align: -20%; }
      #js-generation-comparison table thead td span:nth-child(1):before {
        color: #577b64; }
      #js-generation-comparison table thead td span:nth-child(2):before {
        color: #809378; }
      #js-generation-comparison table thead td span:nth-child(3):before {
        color: #aab08d; }
      #js-generation-comparison table thead td span:nth-child(4):before {
        color: #cac69e; }
      #js-generation-comparison table thead td span:nth-child(5):before {
        color: #ecdbac; }
  #js-generation-comparison table tbody tr:hover {
    background-color: transparent; }
  #js-generation-comparison table tbody td {
    font-family: "franklin-gothic-urw", Verdana, Geneva, sans-serif;
    border: none; }
    #js-generation-comparison table tbody td.generation {
      text-align: left;
      width: 95px;
      vertical-align: top; }
      #js-generation-comparison table tbody td.generation b {
        font-weight: 500; }
      #js-generation-comparison table tbody td.generation span {
        font-size: .9em;
        color: #888888; }
    #js-generation-comparison table tbody td.center {
      padding: 6px 0px; }
      #js-generation-comparison table tbody td.center div {
        text-shadow: 1px 1px 1px #666;
        float: left;
        position: relative;
        text-align: center;
        line-height: 3.2em;
        max-height: 3.2em;
        overflow: visible;
        -webkit-animation: animate .8s;
        animation: animate .8s; }
        #js-generation-comparison table tbody td.center div:nth-of-type(1) {
          background-color: #577b64;
          color: #EEECE4;
          z-index: 5; }
        #js-generation-comparison table tbody td.center div:nth-of-type(2) {
          background-color: #809378;
          color: #EEECE4;
          z-index: 4; }
        #js-generation-comparison table tbody td.center div:nth-of-type(3) {
          background-color: #aab08d;
          color: #EEECE4;
          z-index: 3; }
        #js-generation-comparison table tbody td.center div:nth-of-type(4) {
          background-color: #cac69e;
          color: #7E7E7E;
          text-shadow: none;
          z-index: 2; }
        #js-generation-comparison table tbody td.center div:nth-of-type(5) {
          background-color: #ecdbac;
          color: #7E7E7E;
          text-shadow: none;
          z-index: 1; }
  #js-generation-comparison table tfoot td {
    text-align: left;
    border: none;
    color: #888888;
    line-height: 140%; }

@media (max-width: 500px) {
  #js-generation-comparison {
    padding: 2em .5em 0; }
    #js-generation-comparison #comparison-menu {
      width: 100%;
      margin-bottom: 1em; }
    #js-generation-comparison #comparison-table {
      width: 100%; }
    #js-generation-comparison .ui.vertical.text.menu {
      -webkit-column-count: 2;
      column-count: 2;
      -webkit-column-gap: .5em;
      column-gap: .5em; }
    #js-generation-comparison .ui.vertical.text.menu .item {
      margin: 0 .5em;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      display: block;
      float: unset; }
    #js-generation-comparison table tbody td.generation {
      width: 95px; } }

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

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