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;
}

a{
  color:initial;
}

#header{
}

#body-section{
}

.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;
}

.body-text a{
color: rgb(35,35,35);
text-decoration: underline;
}


.white{
  color:#fff;
}

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

.center{
  text-align:center;
}

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

.byline{
  font-weight: 100;
  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;
}

.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;
  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{
  color: rgb(173,172,185);
  cursor: pointer;
  cursor: hand;
  padding: 2px 4px;
  background: #EAEAEA;
  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;
  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;
}

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

.chart-four-key{
  position: absolute;
  bottom: 68px;
  left: 21px;
  display: flex;
  right: 0;
  margin: 0 auto;
  width: 560px;
  padding: 11px 16px;
  border-top: 1px solid rgba(35,35,35,.6);
  border-bottom: 1px solid rgba(35,35,35,.6);
}

.chart-four{
  position:relative;
  display:flex;
  height: 380px;
}

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

circle {
  stroke: #fff;
}

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: 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;
}

.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: left;
  font-size: 18px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 40px;
  text-transform: uppercase;
  line-height: 29px;
}

.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: 86px;
  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: 163px;
  background-image:url("nirv.png")
}

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

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

#wonde{
  left: 804.342369px;
  top: 0px;
  background-image:url("oasi.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: 201px;
  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: 201px;
  background-image:url("red.png")
}

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

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

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

#theun{
  left: 188.710558px; top: 125px;
  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: 266px;
  background-image:url("noto.png")
}

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

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

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

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

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

#torn{
  left: 110.975074px; top: 275px;
  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: 113px;
  background-image:url("spin.png")

}

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

#semi-{

}

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

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

#kissm{
  left: 63.446449px;
  top: 200px;
  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: 163px;
  background-image:url("2pac.png")
}

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

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

#aroun{
  top: 356px;
}

#enjoy{
  top:320px;
}

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

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

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

}

#windo{
  left: 22.469352195122px; top: 85px;
  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: 0px;
  background-image:url("beck.png")
}

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

}

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

#black{
  top: 53px;
  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{
  margin-top:20px;
  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{
}

.artist-highlight{
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row wrap;
  display: 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);
}

.newsletter-input input ::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 100;
  color: #fff;
}

.newsletter-input input  :-moz-placeholder { /* Firefox 18- */
  font-size: 16px;
  font-weight: 100;
  color: #fff;
}

.newsletter-input input ::-moz-placeholder {  /* Firefox 19+ */
  font-size: 16px;
  font-weight: 100;
  color: #fff;
}

.newsletter-input input :-ms-input-placeholder {
  font-size: 16px;
  font-weight: 100;
  color: #fff;
}

.tool-bar {
    height: 87px;
    background-color: #000;
    top: 0px;
    position: absolute;
    width: 100%;
}

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

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

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


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

.header-wrapper {
    position: absolute;
    width: 850px;
    top: 240px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
}

.header-title {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 6px;
}

.header-subtitle {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    width: 450px;
    margin: 10px auto 50px auto;
    line-height: 27px;
}

.header-by-line {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 12px;
    color: #00D95A;
}

.flapper-wrapper {
    position: absolute;
    top: 160px;
    left: 0px;
    right: 0px;
    margin: 0 auto;
}

.article {
    width: 294px;
    margin-bottom: 40px;
}

.article-title:visited {
    color: initial;
}

.article-title {
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.article-description {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    width: 230px;
    margin: 0 auto;
    margin-top: 10px;
}

.article-image {
    display: block;
    width: 100%;
    height: 190px;
    position:relative;
    background-repeat: no-repeat;
    background-size: cover;
}

.newsletter {
    /* background-color: #171717; */
    /* padding-top: 30px; */
    /* padding-bottom: 30px; */
    /* margin-top: 80px; */
}

.newsletter-wrapper {
    /* width: 463px; */
    /* margin: 0 auto; */
    /* display: flex; */
}

.newsletter-input {
    /* width: 191px; */
    /* height: 32px; */
    /* margin-right: 40px; */
    /* margin-top: 1px; */
}

p.newsletter-button {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    background-color: black;
    padding: 10px 15px 10px 15px;
    width: 58px;
    text-align: center;
    height: 100%;
    font-weight: 500;
    font-size: 14px;
    color: white;
    text-decoration: none;
}

a.newsletter-button {
    color: white;
    text-decoration: none;
}

p.tk-futura-pt.newsletter-button {
}

.newsletter-input input {
    background-color: #171717;
    border: 1px solid #ccc;
    width: 200px;
    height: 100%;
    font-size: 16px;
    font-weight: 100;
    padding-left: 17px;
    color: #fff;
}

/*input:focus::-webkit-input-placeholder
{
    color: transparent;
}*/


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

.footer {
    /* padding-top: 50px; */
    /* background-color: #E5E5E5; */
    /* padding-bottom: 40px; */
}

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

.footer-links {
    /* display: flex; */
    /* width: 106px; */
    /* margin: 0 auto; */
    /* margin-top: 30px; */
}

.header-wrapper a:visited {
    color: #fff;
}

.header-wrapper a {
    text-decoration: none;
}

.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; */
  /* background-size: cover; */
  /* background-repeat: no-repeat; */
}

.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: 30px;
    /* 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; */
}

@media only screen and (max-device-width: 480px) {
  .body-text{
    font-size: 22px;
  }
  .big-text{
    font-size:36px;
    line-height: 1.8em;
  }
  .medium-width{
    width:930px;
  }
  .bread-leadhead{
    font-size:84px;
  }
  .footer-description{
    font-size:24px;
    line-height: 1.8em;
    margin-top:50px;
    font-weight:500;
  }
  .related-title{
    font-size:24px;
    line-height: 1.8em;
  }
  .related-description{
    font-size:24px;
    line-height: 1.8em;
  }
  .logo{
    font-size:36px;
  }
  .section-header{
    font-size:36px;
    line-height: 1.8em;
  }
}

.tool-bar a {
    color: white;
}


a:hover {
    color: initial;
    text-decoration: none;
}

.facebook-follow {
    margin-top: 15px;
}

.twitter-follow {
    margin-top: 14px;
}

.share-tool-bar-email-mobile {
    margin-top: 10px;
}