body, td, th {
    font-family: 'Open Sans', sans-serif;
  }
  h2 {
    margin-top: 3ex;
  }
  /* Tyranian Purple, the Color of the Roman Empire */
  .color-primary-0 { color: #66023C }
  .color-primary-1 { color: #4F0373 }
  .color-primary-2 { color: #7D040E }
  .color-primary-3 { color: #77047D }
  .color-primary-4 { color: #7D040E }
  
  .nd-pageheader {
    padding: 2rem 15px;
    margin-bottom: 1.5rem;
    color: white;
    text-align: center;
    /* background-color: #66023C; */
    background-color: #024638;
  }
  
  .nd-pageheader a, .nd-pageheader a.likelink {
    color: #e4f1fe;
  }
  
  .nd-pagefooter {
    color: white;
    margin-top: 1.5rem;
    padding: 1rem;
    text-align: center;
    background-color: #66023C;
  }
  
  .nd-pagefooter a {
    color: #e4f1fe;
  }
  
  .nd-pageheader .container {
    position: relative
  }
  
  .nd-pageheader address {
    font-weight: 300;
  }
  
  .nd-pageheader p, .nd-pageheader h1 {
    margin-bottom: 0.75rem;
    font-size: 2.25rem;
    font-weight: 300;
    line-height: 1.3;
  }
  
  .citation {
    margin-top: 15px;
    clear: both;
  }
  .citation:after {
    content: '';
    display: table;
    clear: both;
  }
  .citation img {
    float: left;
    margin: 0 10px 10px 0;
    width: 250px;
  }
  
  .newsmedia {
    margin-top: 15px;
    clear: both;
  }
  .newsmedia:after {
    content: '';
    display: table;
    clear: both;
  }
  .newsmedia img {
    float: left;
    margin: 20px 20px 10px 0;
    width: 140px;
    border: none;
  }
  
  
  figcaption {
    display: block;
    text-align: center;
    font-size: 12px;
    margin-top: 3px;
  }
  
  .highlight {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    background: gainsboro;
  }
  
  .bigfig {
    max-width: 90%;
    width: 700px;
  }
  .smallfig {
    text-align: center;
    width: 90%;
  }
  .medfig {
    text-align: center;
    width: 90%;
  }
  
  .modal .big-modal {
    width:auto;
    max-width:90%;
    max-height:80%;
  }
  
  .img-wrapper {
    text-align: center;
  }
  
  .big-modal img {
    max-height: 60vh;
  }
  
  .img-scroller {
    overflow-x: scroll;
  }
  
  .img-scroller .img-fluid {
    max-width: initial;
  }
  
  @media (min-width: 576px) {
    .nd-pageheader {
      padding-top:4rem;
      padding-bottom: 4rem;
      margin-bottom: 3rem;
    }
  }
  
  @media (min-width: 768px) {
    .smallfig {
      width: 65%;
    }
    .medfig {
      width: 75%;
    }
    .nd-pageheader p, .nd-pageheader h1 {
      font-size: 2.5rem
    }
    .twocol-md {
       column-count: 2;
    }
  }
  
  @media (min-width: 992px) {
    .smallfig {
      width: 40%;
    }
    .medfig {
      width: 50%;
    }
    #fig-arch-compare {
      width: 49%;
    }
  }
  
  .best { font: 12.5px Helvetica; }
  .best { border-collapse: collapse; border-spacing: 0; }
  .best td { position: relative; }
  .best td img { margin-top: 15px; }
  .best td .unit { font-size: 10px; position: absolute; top: 0; left: 3px; white-space: nowrap; width: 100%; text-overflow: clip; overflow: hidden; }
  .best td .score { display: none; position: absolute; top: 0; right: 3px; white-sapce: nowrap; }
  .best td:nth-child(1) {
    min-width: 28px;
    border-right: 3px solid transparent;
  }
  .best td .netname {
      transform: translateX(-50%) translateY(-50%) rotate(-90deg);
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      font: 12px helvetica;
      white-space: nowrap;
      padding: 4px;
  }
  .best th, .best td {
    padding-left: 3px;
  }
  .best img {
    width: 100%;
  }
  .best .concept {
      color: black;
      font: 14px helvetica;
    padding-bottom: 2px;
    text-transform: capitalize;
    text-align: left;
    margin-right: 1px;
  }
  
  nobr.widenobr {
    white-space: normal;
  }
  
  @media (min-width: 576px) {
    .best td .unit { font-size: inherit; }
    .best td .netname { font-size: 14px; }
    .best .concept { font-size: 20px; }
     br.widenobr { white-space: nowrap; }
  }
  
  @media (min-width: 768px) {
    .best td .netname { font-size: 17px; }
  }
  
  @media (min-width: 1200px) {
    .best td .score { display: block; }
  }
  
  .modal {
    text-align: center;
    padding: 0!important;
  }
  
  .modal:before {
    content: '';
    display: inline-block;
    height: 80%;
    vertical-align: middle;
    margin-right: -4px;
  }
  
  .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }
  /* Trick for moving the media-control-panel down on chrome */
  /*
  video::-webkit-media-controls-panel {
   margin-top: 30px;
  }
  video[controls] {
   margin-bottom: 30px;
  }
  */

.card {
    margin-bottom: 1.5rem;
}