<style>
/*body style*/
  svg { 
    background: #f9f9f9;
    display: block;
    margin: 0 auto;
  }

  body {
    padding-bottom: 2rem;
/*    background-color: lightblue;*/
  }

  .container-fluid {
    padding-left: 100px;
    padding-right: 100px;
  }

  img.block {
    display: block;
    border: solid #333 1px;
    margin: 0 auto;
  }

 .tooltip {  
  position: absolute;     
  text-align: left;             
  padding: 10px;      
  font-family: IBM Plex Sans; 
  font: 14px sans-serif;    
  background-color: #F9E0A8;  
  border: 0px;    
  border-radius: 8px;     
  pointer-events: none;
/*  vertical-align: middle;*/
 }

  ul, ol {
      list-style: none;
  }

/*TOP BACKGROUND*/
  .top-container{
/*      background: url(../assets/images/img_band_la.jpg) no-repeat center;
      background-size: cover;
      height: 100vh;
      position: relative;
      width: 100%; */   
  /*    min-height:750px;
      max-height:1000px;*/

/*      @include media-breakpoint-down(md){
          background-image: url(../assets/images/img_band_la.jpg) no-repeat center;
          margin-top: 0px;
          min-height:800px;
          max-height:800px;
      }
      @include media-breakpoint-down(xs){
          background-image: url(../assets/images/img_band_la.jpg);
          margin-top: 0px;
          height: 400px;
      }  */  
  }

  .top-headline {
    width:100%;
  }

/*text style*/
  @font-face{
    font-family: 'hanzi'; 
    src:url('../assets/fonts/HongLeiBanShuJianTi-2.ttf') format('truetype')
  }

  @font-face {
    font-family: "IBM Plex Sans";
    src: url("../assets/fonts/IBMPlexSans-Regular.ttf") format('truetype')
  }
/*    src: url("../assets/fonts/lineto-akkurat-pro-italic.eot?#iefix") format("embedded-opentype"),
         url("../assets/fonts/lineto-akkurat-pro-italic.woff2") format("woff2"),
         url("../assets/fonts/lineto-akkurat-pro-italic.woff") format("woff");*/
    font-weight: 400;
  }



  .top {
    width: 100%;
  }

  .top-text {
    padding: 20px 50px;
    margin: 0 auto 0 auto;
    position:relative;
    z-index:500;
    max-width:900px;
  }

  .headline {
    padding: 20px 10px;
    margin:45vw auto 10vw auto;
    font-family: 'Source Sans Pro';
    font-weight: 700;
    font-size: 3rem;
    position:relative;
    z-index:500;
    max-width:900px;
    line-height: 1.15;
    margin-bottom: 10px;
    color: white;
    justify-content: center;
  }

  @media screen and (min-width: 1350px) {
    .headline{
      margin:30vw auto 10vw auto;
    }
  }

  h1 { margin-bottom: 2rem; }

  h3 { 
    font-family: 'IBM Plex Sans';
    font-size: 18px;
/*    margin-bottom: 0.8em;*/
/*    color: #1a1a1a;*/
/*    margin-top: 20px;*/
    line-height: 1.2em;
  }

  .container-fluid .word {
    display: inline-block;
    padding: 0 .3em;
    margin: 0 .3em;
    font-weight: 400;
    cursor: default;
    font-family: hanzi;
    font-size: 1.2rem;
  }

  .container-mobile {
    width: 100%;
    padding: 0 1rem;
    max-width: 60rem;
    margin: 0 auto;
    display: block;
  }

  .container-mobile .chart-mobile {
    margin-top: 1rem;
    min-height: 400px;
}

  p.small {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: 1.1rem;
    font-family: 'IBM Plex Sans';
    line-height: 1.4em;
  }

  p.copy-text {
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.4em;
    font-family: 'IBM Plex Sans';
    margin-top: 1rem;
  }

  p.scroll-text {
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.4em;
    font-family: 'IBM Plex Sans';
    margin-top: 1rem;
  }

  p.graphic-title {
    font-family: 'IBM Plex Sans';
    color: #1a1a1a;
    font-size: 22px;
    margin: 20px auto 0;
  }

  p.graphic-annotation {
    font-family: 'IBM Plex Sans';
    font-size: 12px;
    color: #666;
    margin-top: 14px;
  }

  p.credits-title {
    position: relative;
    font-family: 'IBM Plex Sans';
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 1em;
  }

  p.credits-text {
    font-size: 14px;
    line-height: 2em;
    color: #666;
    font-family: 'IBM Plex Sans';
  }

  text.character-label {
    font-size: 0.95rem;
    font-family: "hanzi";
    pointer-events: none;
  }

  text.label {
    font-family: "hanzi";
    font-size: 10rem;
    margin-top: 50px;
  }

  text.annotations {
    font-family: "IBM Plex Sans";
  }



  .key {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 2rem auto 0 auto;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    color: #666;
    padding-left: 0;
  }

  .key li {
    width: 1rem;
    height: 1rem;
    position: relative;
  }

  .key.lg {
    margin: 1rem auto 0 auto;
  }

  li {
    font-size: 16px;
  }

  .key:before {
    content: 'More common';
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.4;
    color: #6B174F;
  }

  .key:after {
    content: 'Less common';
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.4;
    color: #F4C3A2;


  /* Position the "next c" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a grey background color */
  .prev:hover, .next:hover {
    background-color: #f1f1f1;
    color: white;
  }

  .images-row {
    display: flex;
  }

  .column {
    flex: 50%;
    padding: 5px;
  }




</style>