html, body, div, span, applet,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  height: auto;
}

#header{
}

#body-section{
}

.tool-bar {
  top: 27px;
      position: absolute;
      width: 43px;
      left: 30px;
      margin: 0 auto;
}

.tool-bar p {
    text-transform: none;
    font-size: 20px;
    letter-spacing: 0px;
    font-weight: 900;
    line-height: 35px;
    text-align: center;
}

.tool-bar a {
    color: #fff;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;
}

.tool-bar a:hover {
    color: #fff;
}

.green{
  color: rgb(88,183,154);
}

.grey{
  color: rgb(173,172,185);
}

#body{
  padding-top: 20px;
  background-color: rgb(253,253,253);
  font-family: 'Merriweather', serif;
  text-align:left;
  color: rgb(35,35,35);
}

.black{
  color: rgb(35,35,35);
  border-color: rgb(35,35,35);
}

.leadhead{
  font-weight: 600;
  font-size: 48px;
  letter-spacing: 6px;
}

.bread-leadhead{
  font-weight: 100;
  color: #AAAAAA;
  font-size: 28px;
  line-height: 1.3em;
}

.medium-width{
  width:640px;
  margin: 0 auto;
}

.large-width{
  width:950px;
  margin: 0 auto;
}

.big-text{
  font-size: 21px;
  line-height: 39px;
  font-weight:100;
  margin-bottom:35px;
}

.body-text{
  font-size: 16px;
  font-weight:100;
  line-height:1.8em;
}


.white{
  color:#fff;
}

.body-text p{
  margin-bottom:25px;
}

.center{
  text-align:center;
}

.subhead{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6em;
  text-transform: uppercase;
  width: 437px;
  margin: 0 auto;
  margin-top: 20px;
  letter-spacing: 2px;
}

.byline{
  font-weight: 400;
  font-size: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.merriweather{
  font-family: 'Merriweather', serif;
}

.oswald{
  font-family: 'Oswald', serif;
}



.rank{
  position: absolute;
  left: 1px;
  color: #000;
  font-size: 13px;
  top: 3px;
  font-weight: 600;
}

.float{
  float:left;
  margin-right:10px;
}

.track{
  font-family: 'Oswald';
  font-size: 8px;
  fill: black;
  text-transform: uppercase;
}

.song{
  border-bottom: 1px solid #777;
  position: relative;
  height:20px;
  overflow: hidden;
}

.song-mini{
  border-bottom: 1px solid rgb(170,170,170);
  position: relative;
  height:20px;
}

.chart-mini-header{
  text-transform:uppercase; font-size:12px; border-bottom: 1px solid rgb(170,170,170); padding-bottom:5px;
}

.song-two{
  border-bottom: 1px solid rgb(170,170,170);
  position: relative;
  height:27px;
  width:710px;
  margin: 0 auto;
}

.count{
  position: absolute;
  font-size: 12px;
  top: 3px;
  left: 367px;
  font-weight: 500;
}

.count-mini{
  position: absolute;
  font-size: 10px;
  top: 3px;
  left:87px;
  opacity:.5;
}

.name{
  position: absolute;
  font-size: 13px;
  /* border-left: 1px solid rgb(170,170,170); */
  left: 14px;
  top: 2px;
  font-weight: 600;
}

.name p{
  margin-top:1px;
  margin-left:3px;
}

.name-mini{
  position: absolute;
  font-size: 9px;
}

.name-mini p{
  margin-top:3px;
  text-align:left;
}

.name span{
  font-weight: 300;
}

.bar{
  float:left;
  position: absolute;
  left: 360px;
  opacity:.7;
}

.bar-mini{
  float:left;
  position: absolute;
  left:138px;
}


.filters{
  font-size: 18px;
  flex-direction: row;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 40px;
}

.decade-filter{
  color: rgb(173,172,185);
  cursor: pointer;
  cursor: hand;
  border: solid 1px rgb(173,172,185);
  padding: 5px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  margin-left: -3px;
  background: rgb(253,253,253);
}

.genre-filter{
  color: rgb(173,172,185);
  cursor: pointer;
  cursor: hand;
  border: solid 1px rgb(173,172,185);
  padding: 5px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  margin-left: -3px;
  background: rgb(253,253,253);
}

.decade-filter-two{
  color: rgb(173,172,185);
  cursor: pointer;
  cursor: hand;
  border: solid 1px rgb(173,172,185);
  padding: 5px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  margin-left: -3px;
  background: rgb(253,253,253);
}

.hits-filter{
  color: rgb(173,172,185);
  cursor: pointer;
  cursor: hand;
  border: solid 1px rgb(173,172,185);
  padding: 5px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  margin-left: -3px;
  background: rgb(253,253,253);
}

.year-selector{
  cursor: pointer;
  cursor: hand;
  padding: 2px 4px;
  line-height: 0px;
}

.scale-filter{
  margin-right:4px;
  color: rgb(173,172,185);
  cursor:pointer;
  cursor:hand;
  margin-left: 4px;
}

.rapper-filter{
  color: rgb(173,172,185);
  cursor: pointer;
  cursor: hand;
  border: solid 1px rgb(173,172,185);
  padding: 5px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  margin-left: -3px;
  background: rgb(253,253,253);
}

.tupac-color{
}

.biggie-color{
}



.filter-wrapper{
  display:flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  position: relative;
  margin-top:8px;
  top: -4px;
  font-size: 16px;
}

.filter-title{
  position: absolute;
  top: -13px;
  font-size: 12px;
  left: 4px;
  font-weight: 300;
  color: rgb(77,77,77);
}

.section-headline{
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: 400;
  color: rgb(35,35,35);
}

.search-box{
}

.input{
  color:#000;
}


.searching .song:not(.match) {
display:none;
}



.search-box input{
  width: 170px;
  height: 30px;
  font-size: 13px;
  padding: 0 8px;
  border: solid 1px rgb(173,172,185);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}

.black{
  color: rgb(35,35,35);
}

.cat{
  background-color: blue;
}

.chart{
  font-family: 'Oswald', sans-serif;
  position: relative;
}

.chart-two{
  margin-top: 60px;
  position: relative;
  height: 400px;
}

.chart-three{
  margin-top: 50px;
  position: relative;
  height: 500px;
}

.chart-seven{
  position: relative;
}

.chart-sprite{
  position: relative;
  height: 100px;
}

.chart-data-sprite{
    position: relative;
    z-index: 1000000;
}

.chart-seven-key{
  position: absolute;
  bottom: -32px;
  left: 36px;
  display:flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
}

.chart-three-key{
  position: absolute;
  bottom: -32px;
  left: 36px;
  display:flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
}

.chart-four-key{
  position: absolute;
  bottom: 24px;
  left: 0px;
  right: 0;
  margin: 0 auto;
  width: 270px;
  height: auto;
  padding-left: 40px;
  background-color: #EAEAEA;
  z-index: 1000000;
  padding-top: 10px;
}

.chart-four{
  position:relative;
  display:flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  height: 280px;
}

.chart-four svg{
  z-index:1000000000;
}

circle {
  stroke: white;
  fill: black;
  opacity: 1;
}

circle:hover {
  fill: rgb(233,73,83);
  stroke: #000;
}

.chart-seven .circle {
  opacity: 1;
  background-color: rgb(233,73,83);
  z-index: 1000;
}

.chart-seven .circle:hover {
  opacity:1;
  background-color: rgb(55,55,55);
  z-index:10000000;
  border:none;
}

.sprite{
  background-color: rgb(144,144,144);
  position: absolute;
  border-radius: 50%;
  z-index: 10;
  opacity: .5;
}

.sprite-select{
  /*width:15px;
  height:15px;*/
  background-color:rgb(233,73,83);
  position:absolute;
  border-radius:50%;
  z-index:10000000;
  opacity:1;
}


.circle{
  /*width:15px;
  height:15px;*/
  background-color:rgb(144,144,144);
  position:absolute;
  border-radius:50%;
  opacity:.5;
}

.circle:hover{
  border: 1px solid #000;
  z-index:100000000;
}

.searching .billboard:not(.match) {
opacity:.05;
z-index:0;
}

.searching .scatter:not(.match) {
opacity:.05;
z-index:0;
}

.top-five{
  width: 35px;
  height: 35px;
  background-color: rgb(144,144,144);
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  border: 1px solid #000;
  background-size:cover;
}

.top-five:hover{
  /*border: 2px solid #000;
  width: 33px;
  height: 33px;*/
}

.tool-tip {
  position: absolute;
  height: auto;
  padding: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  text-align: left;
  background-color: rgb(34,34,34);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 250px;
  z-index:1000000000000;
  font-size: 12px;
  font-weight: 100;
  text-transform: uppercase;
}


.tool-tip:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(150, 202, 235, 0);
  border-top-color: rgb(34,34,34);
  border-width: 10px;
  margin-left: -10px;
  margin-top: -1px;
}

.tool-tip p{
  color:#fff;
  text-align: left;
}

.tool-tip-artist{
  font-weight:600;
}

.tip-chart-spotify{
  position: absolute;
  right: 36px;
  top: 30px;
  font-size: 13px;
  background-color: rgb(253,253,253);
  text-transform: uppercase;
}

.tip-chart-spotify-artist{
  font-weight:700;
  float:left;
}

.tip-chart-spotify-track{
  float:left;
  margin-left:4px;
}


.tip-chart-four {

}

.tip-chart-four p{

}

.tip-chart-four-artist{

}

.tip-chart-four-description{
}


.y-axis{
  font-size: 13px;
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  position: absolute;
  z-index: 10000;
  font-weight:500;
}




.x-axis{
  font-size: 15px;
  position: absolute;
  z-index: 10000;
  font-weight: 600;
}

.ticks{
  height: 316px;
  position: absolute;
  z-index: 10000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  top: -6px;
}

.tick{
  width: 122px;
  height: 100%;
  position: relative;
  border-right: 1px solid rgb(170,170,170);
}

.tick-label{
  font-size: 13px;
  position: absolute;
  top: -19px;
  left: 96px;
  font-weight: 500;
  color: black;
  opacity: .8;
}

.block-quote{
  margin-left: 30px;
  border-left: 5px solid rgb(194,194,194);
  padding-left: 30px;
}

.dividerthick{
  content: '';
  border: 1px solid rgb(194,194,194);
  margin: 50px auto 40px auto;
  width: 20%;
  display: block;
}

.dividerthick-white{
  content: '';
  border: 1px solid #fff;
  margin: 47px auto 40px auto;
  width: 13%;
  display: block;
}

.oughts-top-five{
  top:273px;
}

.nineties-top-five{
  top:228px;
}

.eighties-top-five{
  top:183px;
}

.seventies-top-five{
  top:138px;
}

.sixties-top-five{
  top:93px;
}

.fifties-top-five{
  top:48px;
}

.fourties-top-five{
  top:3px;
}

.decade-section{

}

.scatter{
  width: 2px;
  height: 25px;
  background-color: #bdc4c6;
  margin-right: 1px;
  position:relative;
  float:right;
  margin-bottom:20px;
}

.scatter:hover{
}

.number-one{
  fill: rgb(233,73,83);
}

.top-ten{
  background-color: rgb(88,183,154);;
}

.oughts-scatter{
  top:284px;
}

.nineties-scatter{
  top:240px;
}

.eighties-scatter{
  top:195px;
}

.seventies-scatter{
  top:151px;
}

.sixties-scatter{
  top:106px;
}

.fifties-scatter{
  top:62px;
}

.fourties-scatter{
  top:16px;
}

.chart-title{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.chart-sub-title{
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}

.oughts-circle{
  background-color: rgb(88,183,154);
}

.nineties-circle{
  background-color: rgb(233,73,83);
}

.eighties-circle{
  background-color: rgb(68,176,251);
}

.seventies-circle{
  background-color: rgb(237,111,50);
}

.sixties-circle{
  background-color: rgb(58,78,163);
}

.fifties-circle{
  background-color: rgb(34,34,34);
}

.chart-text{
  font-size: 13px;
  font-weight: 600;
}

.chart-head{
  border-top:2px solid #000;
  border-bottom:1px solid #000;
  height:32px;
}

.chart-data{

}

.chart-data-two{
  height: 400px;
  overflow: hidden;
  position: relative;
  z-index: 1000000;
}

.decade-shading{
  position: absolute;
  height: 100%;
  width: 100%;
}

.background-shading{
  background-color: rgb(237,237,237);
  height: 100%;
  position: absolute;
  width: 96%;
  margin-left: 4%;
}

.decade-row{
  height: 40px;
  margin-bottom: 5px;
  width: 100%;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
}

.decade-header{
  font-family: 'oswald';
  font-size: 16px;
  margin-top: 7px;
  width: 4%;
  display: block;
}

.decade-block{
  width: 96%;
  height: 100%;
  background-color: rgb(237,237,237);
}

.chart-data-three{
  margin-left: 3%;
  height: 500px;
  position: relative;
  overflow: hidden;
  z-index: 1000000;
}

.chart-data-seven{
  position: relative;
  z-index: 1000000;
}

.chart-data-five{
  margin-left: 3%;
  height: 500px;
  position: relative;
  overflow: hidden;
  z-index: 1000000;
}

.line{
  height: 100%;
  position: absolute;
  width: 2px;
  background: #555;
  z-index: 100000000;
}

.line-dotted{
  position: absolute;
  width: 2px;
  z-index: 100000000;
  border-left: 1px dashed #000;
}

.percentile{
  position: absolute;
  width: auto;
  z-index: 100000000;
  text-transform: uppercase;
}

.chart-data-four{
}

.white-background{
  background-color:#fff;
}

.stackedBar{
  height:1px;
  background-color: black;
  position:absolute;
}

.red{
  color: rgb(233,73,83);
}

.blue{
  color: rgb(58,78,163);
  border-color: rgb(58,78,163);
}

.hits-highlight{
  background-color: rgb(233,73,83);
}

.section-header{
  width: 100%;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 40px;
}

.section-title{
  position: absolute;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  left: 0;
  right: 0;
  top: 41%;
  z-index: 1;
}

.section-line{
  height: 1px;
  width: 100%;
  background-color: #000;
  position: absolute;
  top: 50%;
}

.chart-four-hover{
  border:1px solid #000;
  width:2px;
  height:25px;
  position:absolute;
  z-index:1;
}

.chart-four-numbers{
  margin-right: 10px;
  font-size: 16px;
  text-align: right;
}

.chart-four-numbers p{
  margin-bottom:21px;
}

#smell{
  left: 889.148876px;
  top: 163px;
  background-image:url("nirv.png")
}

#iris{
  left: 506.823289756098px;
  top: 163px;
  background-image:url("goo.png")
}

#under{
  left: 672.331424px;
  top: 163px;
  background-image:url("red.png")
}

#alli{
  left: 412.229278536585px; top: 96px;
  background-image:url("mari.png")
}

#nodig{
  left: 397.722877560976px;
  top: 163px;
  background-image:url("blac.png")
}

.nodigTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(blac2.png);
}

.nodigTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(blac2.png);
}



.hypnoTwo{
  background:
    linear-gradient(
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0.45)
    ),
    url(noto.png);
}

.hypnoTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(noto.png);
}

.bigpoTwo{
  background:
    linear-gradient(
      rgba(255, 0, 0, 0.45),
      rgba(255, 0, 0, 0.45)
    ),
    url(noto.png);
}

.bigpoTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(noto.png);
}

.stillTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(dre2.png);
}

.stillTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(dre2.png);
}

#comea{
  left: 385.275535121951px;
  top: 125px;
  background-image:url("nirv.png")
}

#still{
  left: 383.934751219512px;
  top: 201px;
  background-image:url("dre.png")
}

#enter{
  left: 357.739335609756px;
  top: 232px;
  background-image:url("meta.png")
}

#wanna{
  top: 337px;
  background-image:url("spic.png")
}

#wonde{
  left: 804.342369px;
  top: 126px;
  background-image:url("oasi.png")
}

#field{
  top: 0px;
  background-image:url("sting.png")
}

#iwill{
  left: 319.272586829268px;
  top: 125px;
  background-image:url("whit.png")
}

#creep {
  left: 672.331424px;
  top: 163px;
  background-image:url("radi.png")

}

#nothi{
  left: 307.613033170732px; top: 163px;
  background-image:url("meta.png")
}

#juicy{
  left: 268.514443902439px;
  top: 126px;
  background-image:url("noto3.png")
}

.juicyTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(noto3.png);
}

.juicyTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(noto3.png);
}

.jumpaTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(hous.png);
}

.jumpaTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(hous.png);
}

.mynamTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(emin2.png);
}

.mynamTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(emin2.png);
}

.califTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(tupa2.png);
}

.califTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(tupa2.png);
}

.gangsTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(cool2.png);
}

.gangsTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(cool2.png);
}

.regulTwo{
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(warr2.png);
}

.regulTwo:hover{
  background: linear-gradient( rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) ), url(warr2.png);
}

#scart{
  left: 239.180689268293px;
  top: 163px;
  background-image:url("red.png")
}

#idont{
  left: 214.140029268293px;
  top: 196px;
  background-image:url("aero.png")
}

#losin{
  left: 212.423065px;
  top: 130px;
  background-image:url("rem.png")
}

#savet{
  left: 182.061405853659px;
  top: 98px;
  background-image:url("eagl.png")
}

#theun{
  left: 188.710558px;
  top: 263px;
  background-image:url("meta.png")
}

#whats{
  left: 176.486907px; top: 163px;
  background-image:url("blin.png")
}

#whati{
  left: 168.215618536585px; top: 50px;
  background-image:url("hadd.png")
}

#hypno{
  left: 163.154589756098px;
  top: 299px;
  background-image:url("noto.png")
}

#allst{
  left: 156.232727804878px;
  top: 198px;
  background-image:url("smas.png")
  }

#noscr{
  left: 146.956051219512px;
  top: 237px;
  background-image:url("tlc.png")
}

#lithi{
  left: 144.817505365854px;
  top: 130px;
  background-image:url("nirv.png")
}

#jumpa{
  left: 149.847426px;
  top: 82px;
  background-image:url("hous.png")
  }

#one{
  left: 138.729926px;
  top: 18px;
  background-image:url("utwo.png")
}

#torn{
  left: 110.975074px;
  top: 202px;
  background-image:url("nata.png")
}

#regul{
  left: 111.877406341463px;
  top: 163px;
  background-image:url("warr.png")
}

#gangs{
  left: 102.680927804878px;
  top: 88px;
  background-image:url("cool.png")
}

#bigpo{
  left: 101.972672195122px;
  top: 49px;
  background-image:url("noto.png")
}

#twopr{
  left: 101.032353px;
  top: 126px;
  background-image:url("spin.png")

}

#myhea{
  left: 82.562221px;
  top: 14px;
  background-image:url("celi.png")
}

#semi-{
  top: 0px;
  background-image:url("third.png")
}

#hardk{
  top:94px;
  background-image:url("jayz.png")
}

#mynam{
  left: 62.194593px;
  top: 238px;
  background-image:url("emin.png")
}

#frida{
  left: 63.725052px;
  top: 202px;
  background-image:url("cure.png")
}

#kissm{
  left: 63.446449px;
  top: 163px;
  background-image:url("sixp.png")
}

#water{
  left: 65.35496px;
  top: 234px;
  background-image:url("tlc.png")
}

#novem{
  left: 53.530493px;
  top: 312px;
  background-image:url("guns.png")
}

#calif{
  left: 44.903604px;
  top: 63px;
  background-image:url("2pac.png")
}

#mambo{
  left: 31.3968073170732px;
  top: 273px;
  background-image:url("loub.png")
}

#notor{
  left: 54.576325px; top: 201px;
  display:none;
}

#aroun{
  top: 356px;
  background-image:url("daft.png")
}

#enjoy{
  top:320px;
  background-image:url("depe.png")
}

#kissf{
  left: 38.958998px;
  top: 20px;
  background-image:url("seal.png")
}

#babyo{
  top: 351px;
  left: 27px;
  background-image:url("brit.png")
}

#freef{
  left: 24.2177751219512px;
  top: 163px;
  background-image:url("tomp.png")

}

#windo{
  left: 22.469352195122px;
  top: 90px;
  background-image:url("scor.png")
  }

#prett{
  left: 15.6349790243902px; top: 202px;
  background-image:url("offs.png")

}

#imgon{
  left: 13.4042214634146px; top: 124px;
  background-image:url("proc.png")
}

#loser{
  left: 6.42563853658537px;
  top: 144px;
  background-image:url("beck.png")
}

#bitte{
  top: 234px;
  left: 0px;
  background-image:url("verv.png")

}

#ironi{
  top: 241px;
  left: 50px;
  background-image:url("atla.png");
}

#black{
  top: 51px;
  left:0px;
  background-image:url("mich.png")
}

.hidden{
  display:none;
}

.annotation-bottom{
  position: absolute;
  font-size: 13px;
  z-index: 1000000000;
  font-weight: 500;
}

.annotation-right{
  position: absolute;
  width: 125px;
  font-size: 13px;
  z-index: 1000000000;
  text-align:left;
}

.annotation-left{
  position: absolute;
  width: 125px;
  font-size: 13px;
  z-index: 1000000000;
  font-weight:500;
}

.annotation-line{
  border-left: 1px solid;
  width: 2px;
  height: 14px;
  margin-left: 50%;
  margin-bottom: 6px;
}

.annotation-line-horz{
  border-top: 1px solid;
  width: 14px;
  height: 22px;
  margin-top: 14px;
  float: left;
}

.annotation-line-horz-right{
  border-top: 1px solid;
  width: 14px;
  margin-top: 13px;
}

.chart-six{
  margin-top:20px;
  margin-bottom:100px;
  position:relative;
}



.axis{
  font-size:13px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis text {
  text-transform:uppercase;
  font-size:13px;
}

.chart-sprite .tick text {
  text-transform: uppercase;
  font-size: 8px;
  fill: rgb(35,35,35);
}

.chart-sprite .tick line {
  opacity:0;
}

.chart-sprite path {
  opacity:0;
}

.tick line{
  opacity:.2;
}

.billboard-number{
  position: absolute;
  left: 1px;
  font-size: 13px;
  margin-top: 7px;
  font-weight: 400;
}

.billboard-track{
  position: absolute;
  left: 13px;
  font-size: 13px;
  top: 7px;
  width: 240px;
  text-align: left;
  font-weight: 600;
}
.billboard-count{
  position: absolute;
  left: 260px;
  font-size: 13px;
  top: 0px;
  border-left: 1px solid rgb(170,170,170);
  height: 22px;
  padding-top: 6px;
  padding-left: 4px;
  border-right: 1px solid rgb(170,170,170);
  width: 133px;
  text-align: left;
}
.billboard-rank{
  position: absolute;
  left: 405px;
  font-size: 13px;
  top: 0px;
  width: 150px;
  text-align: left;
  border-right: 1px solid rgb(170,170,170);
  padding-top: 6px;
  height: 22px;
}
.billboard-year-rank{
  position: absolute;
  left: 562px;
  font-size: 13px;
  top: 6px;
  width: 150px;
  text-align: left;
  font-weight: 500;
}



.tip-chart-four-year span{
  font-weight: 100;
  font-size: 13px;
}

.chart-eight{
  position:relative;
}

.chart-eight-line{
  fill: none;
  stroke: rgb(233,73,83);
  stroke-width: 3px;
}



.searching .spotify-song-select-item:not(.spotify-match) {
  display:none;
}

.hovering .chart-six-line:not(.path-hover) {
opacity:.2;
}

.chart-six-line{
  fill: none;
  stroke-width: 2px;
}

.path-hover{
  stroke-width:2px;
  stroke:#000;
  opacity:1;
}

.match{
opacity:1;
}

.video-content{
overflow: hidden;
}

.searching .circle:not(.match) {
background:rgb(35,35,35);
z-index:0;
opacity:.4;
-webkit-transition:opacity 1s, background 1s, -webkit-transform 1s;
transition:width 1s, opacity 1s, background 1s, transform 1s;
}

.searching .top-five:not(.match) {
opacity:.1;
}

.searching .chart-six-line:not(.match) {
}




.chart-seven .not-match{
  background: rgb(35,35,35);
  z-index:0;
  opacity:.4;
  -webkit-transition:opacity 1s, background 1s, -webkit-transform 1s;
  transition:width 1s, opacity 1s, background 1s, transform 1s;
}

.chart-seven .tupac-match{
opacity:1;
background: rgb(58,78,163);
-webkit-transition:opacity 1s, background 1s, -webkit-transform 1s;
transition:width 1s, opacity 1s, background 1s, transform 1s;

}

.chart-seven .biggie-match{
opacity:1;
background: rgb(233,73,83);
-webkit-transition:opacity 1s, background 1s, -webkit-transform 1s;
transition:width 1s, opacity 1s, background 1s, transform 1s;
}

.search-help{
  position:absolute;
  font-size: 12px;
  font-weight: 500;
  color: rgb(35,35,35);
  width: 192px;
  text-align: left;
}

.side-bar{
  width: 153px;
  position: absolute;
  left: 650px;
  top: 6px;
  height: 100%;
}

.artist-highlight{
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row wrap;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  position: relative;
  width: 690px;
  margin: 0 auto;
}

.load-more{
  border-bottom: 1px solid #555;
  position: absolute;
  height: 30px;
  text-transform: uppercase;
  text-align: center;
  padding-top: 11px;
  font-size: 18px;
  font-weight: 400;
  color: #555;
  cursor: pointer;
  cursor: hand;
  bottom: -42px;
  width: 100%;
}

.spotify-chart-text{
  text-transform:uppercase;
}

.load-more:hover{
  background-color:#fff;
  color:rgb(35,35,35);
}

.spotify-song-select-item-text{
  display:inline;
  margin-left:4px;
}

.spotify-song-select-item{
  border-bottom: 1px solid rgb(220,220,220);
}

.spotify-song-select-list{
  position: relative;
  text-align: left;
  height: 242px;
  overflow: auto;
  border-bottom: 1px solid rgba(0,0,0,.6);
  border-top: 1px solid rgb(220,220,220);
}


.test-circle {
  stroke:rgb(233,73,83);
}

.year-filter ::-webkit-input-placeholder {
   color: rgb(35,35,35);
   font-size:18px;
   font-weight:700;
}

.year-filter  :-moz-placeholder { /* Firefox 18- */
  color: rgb(35,35,35);
  font-size:18px;
  font-weight:700;
}

.year-filter ::-moz-placeholder {  /* Firefox 19+ */
  color: rgb(35,35,35);
  font-size:18px;
  font-weight:700;
}

.year-filter :-ms-input-placeholder {
  color: rgb(35,35,35);
  font-size:18px;
  font-weight:700;
}


.loading {
    position: absolute;
    height: 100%;
    width: 100%;
}


.chart-four-key p {
    font-size: 12px;
    position: relative;
    width: 270px;
    text-align: center;
    margin: 0 auto;
    text-transform: uppercase;
    font-weight: 600;
}

.chart-four-key .circle {
    background-color: #888;
    border: 1px solid #888;
}

.song-clear {
    border-bottom: 1px solid rgb(220,220,220);
    height: 16px;
}

.song-clear p {
    margin-left: 21px;
    margin-top: 2px;
    font-weight: 400;
    text-decoration: underline;
    color: #444;
    cursor: pointer;   cursor: hand;
}

.stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(rgba(234,234,234,1) 359px, rgba(234,234,234,0));
    background: -webkit-linear-gradient(rgba(234,234,234,1) 359px, rgba(234,234,234,0));
    background: -o-linear-gradient(rgba(234,234,234,1) 359px, rgba(234,234,234,0));
    background: -moz-linear-gradient(rgba(234,234,234,1) 359px, rgba(234,234,234,0));
}


.share-links {
    font-size: 16px;
    font-weight: 100;
    line-height: 1.8em;
    width: 390px;
    margin: 0 auto;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    height: 40px;
    margin-bottom: 22px;
}

.share-icons {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    margin-left: 17px;
    margin-top: -4px;
    justify-content: space-around;
    width: 180px;
}

.email-icon {
    margin-left: 4px;
}

.share-wrapper {
    width: 640px;
    margin: 0 auto;
}

.related-articles {
    margin-top: 20px;
}

.related-article {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.075);
    margin-bottom: 30px;
}

.related-image {
    width: 150px;
    height: 90px;
    margin-right: 40px;
}

.related-content {
    width: 450px;
}

.related-content a {
    color:initial;
    text-decoration:none;
}

.related-content a:visited {
    color:initial;
}

.related-title {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: -5px;
}

.related-description {
    font-weight: 100;
    font-size: 14px;
    line-height: 23px;
    margin-top: 9px;
}

.logo {
    text-transform: none;     font-size: 20px;     letter-spacing: 0px;     font-weight: 900;     line-height: 35px;     text-align: center;
}

.footer {
    background-color: #fafafa;
    padding-top: 70px;
    padding-bottom: 50px;
}

.footer-description {
    font-size: 12px;     font-weight: 400;     margin: 0 auto;
    width: 410px;     margin-top: 20px;     line-height: 20px;     text-align: left;
}

.footer-links {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 106px;
    margin: 0 auto;
    margin-top: 30px;
}


.footer-description a {
    color: black;
}