@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('fonts/AtlasGrotesk-Bold-Web.eot');
  src: url('fonts/AtlasGrotesk-Bold-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/AtlasGrotesk-Bold-Web.woff2') format('woff2'),
       url('fonts/AtlasGrotesk-Bold-Web.woff') format('woff');
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('fonts/AtlasGrotesk-Medium-Web.eot');
  src: url('fonts/AtlasGrotesk-Medium-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/AtlasGrotesk-Medium-Web.woff2') format('woff2'),
       url('fonts/AtlasGrotesk-Medium-Web.woff') format('woff');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

.AtlasGrotesk-Medium-Web {
  font-family: 'Atlas Grotesk Web';
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}


@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('fonts/AtlasGrotesk-Regular-Web.eot');
  src: url('fonts/AtlasGrotesk-Regular-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/AtlasGrotesk-Regular-Web.woff2') format('woff2'),
       url('fonts/AtlasGrotesk-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

.AtlasGrotesk-Regular-Web {
  font-family: 'Atlas Grotesk Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}


@font-face {
  font-family: 'Atlas Grotesk Web';
  src: url('fonts/AtlasGrotesk-Light-Web.eot');
  src: url('fonts/AtlasGrotesk-Light-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/AtlasGrotesk-Light-Web.woff2') format('woff2'),
       url('fonts/AtlasGrotesk-Light-Web.woff') format('woff');
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}

.AtlasGrotesk-Light-Web {
  font-family: 'Atlas Grotesk Web';
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}


@font-face {
  font-family: 'Canela Web';
  src: url('fonts/Canela-Bold-Web.eot');
  src: url('fonts/Canela-Bold-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/Canela-Bold-Web.woff2') format('woff2'),
       url('fonts/Canela-Bold-Web.woff') format('woff');
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}

.Canela-Bold-Web {
  font-family: 'Canela Web';
  font-weight:  700;
  font-style:   normal;
  font-stretch: normal;
}


@font-face {
  font-family: 'Canela Web';
  src: url('fonts/Canela-Light-Web.eot');
  src: url('fonts/Canela-Light-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/Canela-Light-Web.woff2') format('woff2'),
       url('fonts/Canela-Light-Web.woff') format('woff');
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}

.Canela-Light-Web {
  font-family: 'Canela Web';
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Interface';
  font-style:  normal;
  font-weight: 400;
  src: url("https://rsms.me/interface/font-files/Interface-Regular.woff2?v=1.1") format("woff2"),
       url("https://rsms.me/interface/font-files/Interface-Regular.woff?v=1.1") format("woff");
}
@font-face {
  font-family: 'Interface';
  font-style:  italic;
  font-weight: 400;
  src: url("https://rsms.me/interface/font-files/Interface-RegularItalic.woff2?v=1.1") format("woff2"),
       url("https://rsms.me/interface/font-files/Interface-RegularItalic.woff?v=1.1") format("woff");
}

@font-face {
  font-family: 'Interface';
  font-style:  normal;
  font-weight: 500;
  src: url("https://rsms.me/interface/font-files/Interface-Medium.woff2?v=1.1") format("woff2"),
       url("https://rsms.me/interface/font-files/Interface-Medium.woff?v=1.1") format("woff");
}
@font-face {
  font-family: 'Interface';
  font-style:  italic;
  font-weight: 500;
  src: url("https://rsms.me/interface/font-files/Interface-MediumItalic.woff2?v=1.1") format("woff2"),
       url("https://rsms.me/interface/font-files/Interface-MediumItalic.woff?v=1.1") format("woff");
}

@font-face {
  font-family: 'Interface';
  font-style:  normal;
  font-weight: 700;
  src: url("https://rsms.me/interface/font-files/Interface-Bold.woff2?v=1.1") format("woff2"),
       url("https://rsms.me/interface/font-files/Interface-Bold.woff?v=1.1") format("woff");
}
@font-face {
  font-family: 'Interface';
  font-style:  italic;
  font-weight: 700;
  src: url("https://rsms.me/interface/font-files/Interface-BoldItalic.woff2?v=1.1") format("woff2"),
       url("https://rsms.me/interface/font-files/Interface-BoldItalic.woff?v=1.1") format("woff");
}


@font-face {
  font-family: 'Publico Text Web';
  src: url('fonts/PublicoText-Italic-Web.eot');
  src: url('fonts/PublicoText-Italic-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/PublicoText-Italic-Web.woff2') format('woff2'),
       url('fonts/PublicoText-Italic-Web.woff') format('woff');
  font-weight:  400;
  font-style:   italic;
  font-stretch: normal;
}

.PublicoText-Italic-Web {
  font-family: 'Publico Text Web';
  font-weight:  400;
  font-style:   italic;
  font-stretch: normal;
}


@font-face {
  font-family: 'Publico Text Web';
  src: url('fonts/PublicoText-Roman-Web.eot');
  src: url('fonts/PublicoText-Roman-Web.eot?#iefix') format('embedded-opentype'),
       url('fonts/PublicoText-Roman-Web.woff2') format('woff2'),
       url('fonts/PublicoText-Roman-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

.PublicoText-Roman-Web {
  font-family: 'Publico Text Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

.logo {
    margin: 0 auto;
    padding-top: 18px;
    width: 172px;
    fill: #fffbd8;
    fill: #e5ecef;
    height: 31px;
}

.logo-alt{
    margin: 0 auto;
    padding-top: 10px;
    width: 8rem;
}

.logo-alt svg {
    width: 100%;
}

.logo svg {
    width: 100%;
    height: 40px;
    fill: #000000;
    /* fill: rgb(31, 105, 197); */
    /* fill: #00ff01; */
}

body {
    margin: 0px;
    padding: 0px;
}

p.headline-big {
    font-size: 18px;
    text-align: center;
    font-family: 'Canela Web';
    margin: 0px;
    font-size: 84px;
    font-weight: 400;
    margin-top: 130px;
}

p.headline-big-edited {
    text-align: center;
    font-family: 'Canela Web';
    margin: 0px;
    font-size: 66px;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 25px;
}

.headline-small {
    font-size: 18px;
    text-align: center;
    font-family: 'Canela Web';
    margin: 0px;
    font-size: 29px;
    font-weight: 100;
    margin-top: 10px;
}

.headline-small-edited {
    font-size: 18px;
    text-align: center;
    font-family: 'Canela Web';
    margin: 0px;
    font-size: 29px;
    font-weight: 100;
    #margin-top: 10px;
    margin-bottom: 25px;
}

.headline-small-alt {
    font-size: 18px;
    text-align: center;
    font-family: 'Canela Web';
    margin: 0px;
    font-size: 15px;
    font-weight: 100;
    margin-top: 10px;
    text-transform: uppercase;
}

.byline {
    font-size: 12px;
    text-align: center;
    font-family: 'Atlas Grotesk Web';
    font-weight: 400;
    /* text-transform: uppercase; */
    letter-spacing: .05rem;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.byline-edited {
    font-size: .75rem;
    text-align: center;
    font-family: 'Atlas Grotesk Web';
    font-weight: 400;
    /* text-transform: uppercase; */
    letter-spacing: .05rem;
    margin-bottom: 50px;
}

.byline-section {
    margin-top: 90px;
}

.prose-big {
    margin: 0 auto;
    font-family: 'Publico Text Web';
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    line-height: 1.6;
    font-family: 'Atlas Grotesk Web';
    /* color: black; */
}

.prose-big-alt {
    margin: 0 auto;
    max-width: 54rem;
    font-family: 'Publico Text Web';
    font-size: 1.2rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    margin-top: 50px;
    line-height: 1.7;
}

.prose-big-alt-edited {
    margin: 0;
    max-width: 54rem;
    font-family: 'Publico Text Web';
    font-size: 1.7rem;
    font-weight: 350;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}

.intro-section .byline a {
    color: initial;
    text-decoration: none;
    border-bottom: 1px solid #9a9a9a;
    font-weight: 500;
    color: rgb(31, 105, 197);
    color: #6f6f6f;
    font-size: 12px;
}

.logo path {
}

.intro {
    padding-bottom: 70px;
    background: #fdfdfd;
}

.prose {
    margin: 0 auto;
    /* max-width: 40rem; */
    font-family: 'Publico Text Web';
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    line-height: 1.8;
    font-family: 'Atlas Grotesk Web';
    width: auto;
    /* display: flex; */
    /* justify-content: center; */
}

.prose-edited {
    margin: 0 auto;
    #max-width: 40rem;
    width: 100%;
    font-family: 'Publico Text Web';
    font-size: 1rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: 1.7;
    color: black;
}

.body-section {
    padding-top: 90px;
    padding-bottom: 0px;
    width: 60rem;
    margin: 0 auto;
}

.section-title {
    font-family: 'Canela Web';
    font-weight: 600;
    font-size: 26px;
    max-width: 40rem;
    margin: 0 auto;
}

.section-title-edited {
    font-family: 'Canela Web';
    font-weight: 600;
    font-size: 26px;
    #max-width: 40rem;
    margin: 0;
}

.section-title-two {
    font-family: 'Atlas Grotesk Web';
    font-weight: 100;
    font-size: 1.6em;
    max-width: 40rem;
    margin: 0 auto;
    letter-spacing: -.02em;
    /* -webkit-font-smoothing: antialiased; */
    color: rgba(0,0,0,.90);
}

.section-title-two-edited {
    font-family: 'Atlas Grotesk Web';
    font-weight: 100;
    font-size: 1em;
    #max-width: 40rem;
    margin: 0;
    letter-spacing: -.02em;
    /* -webkit-font-smoothing: antialiased; */
    color: rgba(0,0,0,.90);
}

.section-title-two-edited-2 {
    font-family: 'Atlas Grotesk Web';
    font-weight: 100;
    font-size: 0.75em;
    #font-style: italic;
    #max-width: 40rem;
    margin: 0;
    letter-spacing: -.02em;
    /* -webkit-font-smoothing: antialiased; */
    color: rgba(0,0,0,.90);
    padding-top: 0.25%;
}

.section-title-two-edited-3 {
    font-family: 'Atlas Grotesk Web';
    font-weight: 100;
    font-size: 0.41em;
    #font-style: italic;
    max-width: 40rem;
    margin: 0;
    letter-spacing: -.02em;
    /* -webkit-font-smoothing: antialiased; */
    color: rgba(0,0,0,.90);
    padding-top: 1.5%;
}

.section-title-three {
    font-family: 'Atlas Grotesk Web';
    font-weight: 600;
    font-size: 1.0em;
    max-width: 40rem;
    margin: 0 auto;
    /* letter-spacing: -.02em; */
    /* -webkit-font-smoothing: antialiased; */
    color: rgba(0,0,0,.90);
    text-transform: uppercase;
}

.headline-alt {
    margin: 0 auto;
    max-width: 54rem;
    font-family: 'Canela Web';
    font-size: 2.5rem;
    font-weight: 600;
    margin-top: 150px;
    line-height: 1.5;
}


.logo-alt path {
    fill: #3F51B5;
}


body {
    background: white;
    font-family: 'Atlas Grotesk Web';
}
p{
  margin: 0px;
}
.logo-container {
    display: inline-block;
    margin: auto;
}
.content {
    width: 75%;
    margin: 10px auto;
}
.panels-container {
    width: 100%;
}
.left-panel, .right-panel {
}
.left-panel {
    display:inline-block;
    margin-left: 0;
    width: 60%;
    float: left;
}
.right-panel {
}
.wordlist {
    margin: 0px auto;
    display:inline-block;
    text-align:left;
    list-style-position: inside;
    column-count: 4;
    column-gap: 3em;
    column-fill: auto;
    padding-left: 0px;
    font-family: 'Atlas Grotesk Web';
    font-weight: 100;
    font-size: .9em;
}
.listheader {
    text-align: center;
    font-weight:100;
    font-size: 24px;
    color:#bbbbbb;
}
.wordlist li {

}
.wordlist li:hover {
    text-decoration: underline;
}
.wordlist li.g1:hover {
    color:#4285f4;

}
.wordlist li.g2:hover {
    color:#34a853
}
.wordlist li.g3:hover {
    color:#fabb05;
}
.wordlist li.g4:hover {
    color:#ea4335;
}


#cat_panel li.g1 {
    color:#4285f4;

}
#cat_panel li.g2 {
    color:#34a853;
}
#cat_panel li.g3 {
    color:#fabb05;
}
#cat_panel li.g4 {
    color:#ea4335;
}

.center {
    width:100%;
    margin: 0 auto;
}
.key {
    width:15%;
    height:100%;
    display:inline-block;
    position:relative;
    top:-265px;
    left:5%;
}
.gp {
    padding-bottom: 12px;
    font-size: 20px;
    font-weight: 100;
    opacity:.8;
}
.gp1{
    color:#e12e2e;
}
.gp2{
    color:#0080ff;
}
.gp3{
    color:#e5ea0b;
}
.gp4{
    color:green;
}
.sidepanel {
    height:400px;
    position:absolute;
    right:-20%;
    width:20%;
    background:black;
    top:20%;
}
.img-circle {
    border-radius: 50%;
    width: 5%;
}

#tool-tip-container {
    width: 100%;
    font-family: Roboto, sans-serif;
}

#term {
    font-size: 22.5pt;
}

#term-type {
    font-family: Roboto-Light, sans-serif;
    font-size: 15pt;
    padding-top: 0.5%;
}

#definition {
    font-size: 12.5pt;
    padding-top: 1%;
}

#term-mentions, #term-song-appearances, #term-rap-centricity {
    display: inline-block;
    font-size: 22.5pt;
    padding-top: 1%;
}

#term-song-appearances, #term-mentions {
    padding-left: 5%;
    padding-left: 5%;
}

#term-rap-centricity {

}

#centricity-multiplier {
    font-size: 17.5pt;
}

.subheader-label {
    font-style: italic;
    font-size: 8.5pt;
    padding-top: 5%;
}

#artist-photos-container {
    margin-top: 1.5%;
    margin-left: 0.25%;
}

.single-artist-container {
    display: inline;
    padding-right: 1.5%;
}

#default-selected-artist {
    border: 5px solid #0ab5a0;
}

#artist-subheader-label {
    font-style: italic;
    font-size: 8.5pt;
    padding-top: 0.66%;
}

#statistic-subheader {
    margin-top: -10%;
    background-color: purple;
}

#term-usage-example {
    font-family: Roboto-Light;
    font-size: 12.5pt;
    padding-top: 1.5%
}

#usage-subheader-label {
    font-family: Roboto-Light;
    font-style: italic;
    font-size: 8.5pt;
    padding-top: 1%;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
#cat_panel {
    display: inline-block;
    float:left;
    color:grey;

}
#cat_panel ul {
    list-style-type: none;
}

.most-central {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 52rem;
    margin: 0 auto;
    margin-top: 40px;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    padding-bottom: 57px;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.most-central-div {/* filter: url('#goo'); *//* background: red; */position: relative;width: 112px;    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: center;
    border-radius: 2px;padding: 12px 13px;
    -webkit-flex-grow:1;
    flex-grow: 1;
    margin: .5rem;
  }

.opening-title {
    font-size: 118px;
    font-family: 'Canela Web';
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    WIDTH: 50rem;
    text-align: center;
    line-height: 130px;
    margin: 0 auto;
    margin-top: 120px;
    margin-bottom: 30px;
    color: #fffbd8;
    /* font-family: 'Bebas Neue'; */
    color: #f5f5f3;
    text-shadow: 0 2px 2px #454bff, 0 -2px 2px rgb(238, 255, 90);
    letter-spacing: 6px;
    color: rgba(0, 0, 0, 0.87);
    text-shadow: none;
}

.opening-title span {
    font-size: 48px;
    font-weight: 100;
    line-height: 0px;
    margin: 0px;
}

.opening-title .small {
    font-size: 46px;
    margin: 0;
    line-height: 40px;
    font-weight: 100;
    /* font-style: italic; */
    letter-spacing: 5px;
}

.opening-title .big {
    margin: 0px;
    font-weight: 100;
    font-size: 100px;
    line-height: 1.5;
    text-transform: ca;
}

.artist-central-name {
    font-family: 'Atlas Grotesk Web';
    font-size: 14px;
    font-weight: 100;
    margin-bottom: 10px;
    cursor: hand;
    cursor: pointer;
    font-weight: 400;
}

.artist-central {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 70px;
    margin-bottom: 100px;
    background: #e5ecef;
    padding-top: 40px;
    /* height: 90vh; */
    padding-bottom: 40px;
}

.artist-central-fixed-container {
    -webkit-order: 2;
    order: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    width: 450px;
    /* flex-grow: 0; */
    margin: 0px;
    position: absolute;
    padding-top: 100px;
}

.artist-central-fixed-word {
    padding: .4rem;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    font-family: 'Atlas Grotesk Web';
    text-transform: capitalize;
    width: 43%;
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
}

.artist-central-scroll-container {
    -webkit-flex-grow:1;
    flex-grow: 1;
    margin-left: 520px;
}

.artist-central-name:hover {
    font-weight: 600;
}

.prose-wrapper {
    max-width: 28rem;
    margin: 0 auto;
    /* display: none; */
    z-index: 1000;
    position: relative;
}

.divider {
    background: #bdbdbd;
    height: 2px;
    width: 20%;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.chart-title {
    font-family: 'Atlas Grotesk Web';
    font-size: 14px;
    color: rgba(0,0,0,.9);
    font-weight: 400;
    width: 100%;
    position: relative;
    text-align: left;
}

a:visited{
  color:black;
}


.scatter-chart-x-text {
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    position: absolute;
    width: 100%;
    margin: 0px;
    margin-top: 12px;
    font-style: italic;
    position: absolute;
    top: -35px;
    transition: transform 300ms;
}

.scatter-chart-x-title {
    font-weight: 600;
    font-family: 'Atlas Grotesk Web';
    text-align: center;
    margin: 0px;
    font-size: 10px;
    margin-top: 0px;
    line-height: 36px;
    color: rgb(0, 0, 0);
    visibility: hidden;
    /* display: none; */
    position: absolute;
    left: 0px;
    right: 0px;
    top: 3px;
    letter-spacing: .5px;
}

.scatter-chart-y-title {
    font-weight: 600;
    font-family: 'Atlas Grotesk Web';
    text-align: center;
    margin: 0px;
    position: absolute;
    transform: translate(0,50%);
    line-height: 13px;
    width: 50px;
    text-align: right;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -68px;
    font-size: 10px;
}

.scatter-chart-x-container {
    position: relative;
    position: absolute;
    width: 100%;
    transform: translate(0,-4px);
    pointer-events: none;
    top: 0px;
}

.scatter-chart-container {
    margin-top: 20px;
    position: relative;
    margin: 0 auto;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.scatter-chart-x-line {
    border-top: 1px solid #000000;
    margin-top: 4px;
}

.scatter-chart-x-line::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 7px solid #000000;
  top: 2px;
  right:-3px;
}


.scatter-chart-y-container {
    height: 100%;
    position: relative;
    pointer-events: none;
}

.scatter-chart-diagonal{position: absolute;height: 100%;width: 100%;cursor: pointer;cursor: hand;z-index: 10000000000;}

.scatter-chart-y-line::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 7px solid #000;
  top: -4px;
  left: -2px;
  bottom: -6px;
}


.scatter-chart-y-line {
    border-left: 1px solid #000;
    height: 100%;
    position: realtive;
    pointer-events: none;
}

.scatter-chart-y-text {
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    position: absolute;
    margin: 0px;
    text-align: right;
    left: -77px;
    transform: translate(0px,-6px);
    font-style: italic;
    width: 60px;
}


.scatter-chart-line {
    stroke: rgba(0, 0, 0, 0.34);
    /* stroke-dasharray: 4,2; */
    stroke-width: 1;
}

.scatter-chart-circles-container {
    height: 100%;
    position: absolute;
    z-index: 1000;
    width: 100%;
    pointer-events: none;
}

.scatter-chart-circle-div {
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0px;
}

.scatter-chart-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    position: absolute;
    /* transform: translate(-100%,0px); */
    border: 1px solid black;
    background: #ececec;
}
.row-design{
  /*border-bottom: 1px dashed #989898;*/
}

.scatter-chart-circles-container .row-design:not(:last-child){
  border-bottom: 1px dashed #989898;
}


.scatter-chart-row-text {
    margin: 0px;
    visibility: hidden;
    position: absolute;
    left: -70px;
    text-align: right;
    width: 120px;
    top: 50%;
    transform: translate(0px,-50%);
    text-transform: capitalize;
    font-size: 26px;
    font-weight: 100;
}

.scatter-chart-row-count {
    margin: 0px;
    visibility: hidden;
    position: absolute;
    top: 50%;
    /* transform: translate(0px,-50%); */
    text-transform: capitalize;
    font-size: 1rem;
    font-weight: 500;
    color: #828282;
    visibility: hidden;
    position: absolute;
    transform: translate(-50%,0px);
    width: auto;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Atlas Grotesk Web';
}
.scatter-chart-row-count p{
  margin:0px;
  /* align-self: center; */
}

.scatter-chart-row-count-label {
    margin: 0px;
    font-size: 11px;
    font-weight: 400;
    width: 146px;
    text-transform: lowercase;
    /* align-self: center; */
    color: black;
    /* display: none; */
    width: 85px;
    color: #607D8B;
    display: none;
}


.scatter-container {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 400px;
    transform: translate3d(0,0,0);
    left: 0px;
    top: 0px;
}


.scatter-chart-row-circle-label {
    visibility: hidden;
    position: absolute;
    transform: translate(-50%,0px);
    width: auto;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    color: #000000;
    /* border-bottom: 1px solid #b3b3b3; */
    font-family: 'Atlas Grotesk Web';
    text-shadow: 0 2px 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, -2px 0 0 #ffffff;
    opacity: 1;
    width: 100px;
}

.scatter-chart-arrow-line{
  stroke: #4CAF50;
  /* shape-rendering: crispEdges; */
  stroke-dasharray: 5,2;
  visibility: hidden;
  stroke-width: 2px;
  stroke-opacity: .7;
}


.scatter-chart-row-circle-annotation {
    position: absolute;
    font-family: 'Atlas Grotesk Web';
    visibility: hidden;
    transform: translate(-158px,2px);
    font-size: 13px;
    font-weight: 400;
    /* text-transform: uppercase; */
    width: 100px;
    color: #171717;
    background: white;
    padding: 4px 12px;
    border-right: 1px solid #bbbbbb;
    /* border-radius: 4px; */
    text-align: right;
}

.scatter-chart-row-circle-annotation span {
    font-weight: 700;
}

.scatter-chart-line-text {
    text-anchor: middle;
    /* transform: rotate(45deg); */
    /* transform-origin: 50%; */
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    visibility: hidden;
    text-shadow: 0 2px 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, -2px 0 0 #ffffff;
    font-family: 'Atlas Grotesk Web';
    font-weight: 600;
    display: none;
}
.scatter-chart-dot-dot{
   fill-opacity: .4;
}


.scatter-two-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    width: 900px;
    margin: 0 auto;
    margin-top: 110px;
    overflow: hidden;
    /* display: none; */
    position: relative;
    z-index: 1;
    background: white;
}

.col-prose{
    -webkit-flex-grow:1;
    flex-grow: 1;
    font-size: 1rem;
    font-family: 'Atlas Grotesk Web';
    width: 1px;
    padding: 3rem;
    margin-right: 30px;
    padding-right: 0px;
}

.scrolly-prose{
  font-family: 'Atlas Grotesk Web';
  font-size: .9rem;
  line-height: 1.5;
  margin-top: 17px;
}

.slide p:first-child {
  margin-top: 0px;
}

.slide-wrapper{
  padding-top: 13rem;
  opacity: .5;
}

.slide-first{
  padding-top: 0rem;
  opacity: 1;
}

.slide{
  background: #f3f3f3;
  border-left: 3px solid #313131;
  padding: 1rem 1.5rem;
}


.intro-section {
    background: #FBFAF8;
    background: black;
    /* display: none; */
    background: white;
    z-index: 10000;
    position: relative;
    padding-top: 30px;
    background: #f1f1f1;
    padding-bottom: 70px;
    background: white;
}
.scatter-chart-dots-wrapper{
  visibility: hidden;
  pointer-events: all;
}


.scatter-chart-triangle {
    fill-opacity: .1;
    visibility: hidden;
    /* fill: black; */
}
.scatter-chart-triangles-text{
  text-align:right;
  font-family: 'Atlas Grotesk Web';
  position: absolute;
  width: 90px;
  left: -40px;
  transform: translate(-100%,-100%);
}

.scatter-chart-triangles-text span{
  font-weight:600;
}
.scatter-chart-triangles-container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  z-index: 10000000000;
  height: 100%;
  visibility: hidden;
}

.slide-chart{
  background: rgba(255, 255, 255, 0);
  border: none;
  padding: 0;
}

.left-col-bold{
  font-weight:600;
}


.slide-chart .scrolly-prose {
    padding: 1rem 1.5rem;
    margin-top: 0px;
}

.scrolly-chart-word-title {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5rem;
    padding-bottom: 15px;
    text-align: left;
    /* text-transform: uppercase; */
    text-align: center;
    margin: 0 auto;
    line-height: 12px;
    margin-top: 6px;
    text-align: left;
}

.scrolly-chart-word {
    font-family: 'Atlas Grotesk Web';
    position: relative;
    text-transform: capitalize;
    font-size: 14px;
    width: 81px;
    line-height: 1;
    font-weight: 500;
    text-align: left;
    margin-right: 10px;
    line-height: 16px;
    color: rgba(0,0,0,.9);
    white-space: nowrap;
}

.scrolly-bar-chart {
    padding-top: 22px;
    position: relative;
    /* border-top: 1px solid #ccc; */
    display: none;
}

.scrolly-chart-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    position: relative;
    margin-bottom: 4px;
}

.scrolly-chart-centricity {
    font-family: 'Atlas Grotesk Web';
    position: relative;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 400;
    color: #000000;
    width: 76px;
    line-height: 16px;
    text-align: right;
}

.scrolly-chart-data-title{
  font-size: 12px;
}


.scrolly-chart-row-bar-container {
    font-family: 'Atlas Grotesk Web';
    position: relative;
    text-transform: capitalize;
    font-size: 14px;
    width: 27px;
    -webkit-flex-grow:1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    display: none;
}

.scrolly-chart-row-bar {
    height: 32%;
    padding-bottom: 2px;
    opacity: .85;
    /* border-top-right-radius: 2px; */
    /* border-bottom-right-radius: 2px; */
    position: relative;
}

.scrolly-chart-row-bar-count {
    position: absolute;
    right: -32px;
    font-size: 10px;
    font-family: 'Atlas Grotesk Web';
    line-height: 10px;
    text-align: left;
    width: 29px;
    text-align: left;
    font-weight: 400;
}

.most-central-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
    justify-content: space-between;
    max-width: 52rem;
    margin: 0 auto;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.most-central-container {
    margin: 0 auto;
}

.most-central-title-text {
    font-family: 'Atlas Grotesk Web';
    font-size: 76px;
    font-weight: 600;
    font-family: 'Canela Web';
    font-weight: 100;
    /* font-family: 'Roboto Condensed'; */
    /* font-size: 42px; */
    text-align: center;
    /* font-family: 'Roboto Condensed'; */
    font-family: 'Bebas Neue';
    -webkit-font-smoothing: antialiased;
}

.most-central-wrapper {
    /* background: #FBFAF8; */
    /* background: #f3f3f3; */
    /* background: white; */
    padding-bottom: 80px;
}

.most-central-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    width: auto;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 100%;
    margin-top: 20px;
}

.most-central-title-text-sub {
    font-size: 14px;
    font-family: 'Atlas Grotesk Web';
    font-weight: 600;
    margin-top: 8px;
    text-align: left;
    /* font-family: 'Roboto'; */
    text-align: center;
}

.most-central-title-text-sub span {
    font-weight: 100;
}

.most-central-filter-title {
    font-size: 12px;
    font-family: 'Atlas Grotesk Web';
    color: rgb(83, 98, 105);
    font-weight: 500;
    text-transform: capitalize;
    text-align: left;
    line-height: 2;
    margin-bottom: 1px;
    margin-right: 10px;
    width: 50px;
    text-align: right;
}

.most-central-filter-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 25px;
    margin-top: 7px;
    margin-right: 30px;
}

.most-central-filter-items-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.filter-items-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    height: 100%;
}

.filter-item {
    text-transform: capitalize;
    font-size: 12px;
    font-family: 'Atlas Grotesk Web';
    font-weight: 400;
    border: 1px solid rgba(83, 98, 105, 0.65);
    margin-left: -1px;
    padding: 3px 7px;
    background: rgb(255, 255, 255);
    color: #536269;
    /* background: white; */
}

.filter-item-selected{
  font-weight: 600;
  color: black;
  background: rgb(255, 255, 255);
}

.front-curve{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.back-curve{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}


.most-central-title-text-container {
    width: 100%;
}

.boldify{
  font-weight: 500;
}


.most-central-circle {position: absolute;
    background: rgb(255, 255, 255);left:50%;top:50%;
    width: 40px;height: 40px;line-height:100px;text-align:center;color:white;font-size:40px;
    border-radius:100%;margin: auto;top: 0px;left: 0px;right: 0px;bottom: 0px;
    font-family: 'Atlas Grotesk Web';font-weight: 100;font-size: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
}


.most-central-text {text-transform: capitalize;font-size: 22px;font-weight: 400;word-wrap: break-word;line-height: 24px;color: #333;font-family: 'Atlas Grotesk Web';text-align: left;width: 100%;/* font-family: 'Bebas'; *//* letter-spacing: 1px; *//* font-size: 28px; */}

.most-central-title-container {
    padding-top: 70px;
    background: white;
}

.most-central-text-def {
    font-size: 12px;
    color: #444;
    text-align: left;
    margin-top: 8px;
    font-weight: 300;
    /* padding-bottom: 10px; */
}

.most-central-usage-highlight {
    /* border-bottom: 1px solid black; */
    text-decoration: underline;
}

.most-central-usage-show-more {
    font-weight: 600;
    font-size: 10px;
    margin-left: -1px;
    /* background: rgba(230, 230, 230, 0.77); */
    padding-left: 0px;
    padding: 0px 5px;
    color: rgba(0, 0, 0, 0.68);
}

.most-central-text span {
    width: 10px;
    position: relative;
    margin-left: 10px;
    opacity: .5;
}

.most-central-usage-show-more::before {
    content: '|';
    margin-right: 3px;
}
.most-central-text-container{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}


.most-central-text-rank {
    font-family: 'Atlas Grotesk Web';
    font-size: 11px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(134, 134, 134, 0.5);
    position: absolute;
    left: 0px;
    font-size: 88px;
    opacity: .2;
    font-family: 'Roboto Condensed';
    font-family: 'Bebas Neue';
    top: 20px;
    text-align: center;
    right: 0px;
}

.artist-explain-wrapper {
    height: 1000px;
    background: red;
}

.artist-explain-two-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 950px;
  margin: 0 auto;
  margin-top: 110px;
  margin-bottom: 250px;
  /* display: none; */
  position: relative;
  overflow: hidden;
}

.artist-explain-container {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 600px;
    transform: translate3d(0,0,0);
}

.artist-explain-container-absolute{
  transform: translate3d(0,0,0);
  position: absolute;
  width: 100%;
  left: 0px;
  top: 0px;
}

.intro-section .prose-wrapper {
    max-width: 28rem;
    /* color: #fffbd8; */
}

.artist-expainer-row {height: 15px;    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
opacity: 0;}

.artist-expainer-row-artist {
    font-size: 11px;
    text-align: right;
    font-family: 'Atlas Grotesk Web';
    font-weight: 400;
    text-align: right;
    width: 96px;
}

.artist-explain-chart-container {
    position: relative;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: calc(100vh - 200px);
    max-height: 600px;
}

.artist-expainer-row-track-percent {
    font-size: 12px;
    font-family: 'Atlas Grotesk Web';
    font-weight: 500;
    color: rgba(0, 0, 0, 0.79);
    margin-left: 10px;
    width: 23px;
}

.artist-expainer-row-track-freq{
  position: absolute;
  left: 234px;
  font-size: 23px;
  font-family: 'Atlas Grotesk Web';
  font-weight: 400;
  color: rgba(0, 0, 0, 0.79);
  line-height: 0px;
  display: none;
}
.artist-expainer-row-track-percent span{
  font-size: 9px;
  margin-left: 2px;
  font-weight: 400;
}


.artist-explainer-column-label {
    position: absolute;
    top: -54px;
    color: rgba(0, 0, 0, 0.84);
    font-size: 12px;
    line-height: 15px;
    width: 90px;
    display: none;
}

.boldify{
  font-weight:500;
}

.to-add{
  display: none;
  margin-left: 6px;
  color: #1f69c5;
  background: rgba(31, 105, 197, 0.05);
  opacity: 0;
  transition: opacity 500ms;
  color: #1fc573;
  background: rgba(31, 197, 115, 0.04);
}

.to-strike {
	display: inline-block;
	position: relative;
	transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
	/* color: #1fc573; */
	/* background: rgba(31, 197, 115, 0.04); */
	color: #1f69c5;
	background: rgba(31, 105, 197, 0.05);
}

.striking:after {
	content: '';
	position: absolute;
	display: block;
	height: 2px;
	margin-top: -9px;
	background: black;
	transform-origin: center left;
	animation: strikethrough 1s;
	transition: transform 0.5s;
	width: 100%;
}

@keyframes strikethrough {
	0% {
		transform: scaleX(0);
	}
	100% {
    transform: scaleX(1);
	}
}

.showing{
  display: inline;
  /* opacity: 1; */
}


.most-central-text-def {
    font-family: 'Atlas Grotesk Web';
}

.greenify{
  color: #1fc573;
  background: rgba(31, 197, 115, 0.04);
}


.scatter-prose {
    margin-right: 6rem;
}

.logo-desc {
    font-family: 'Atlas Grotesk Web';
    font-size: 11px;
    color: rgba(0, 0, 0, 0.8);
    text-align: center;
    letter-spacing: .5px;
    text-transform: lowercase;
    font-weight: 500;
    width: 150px;
    margin: 0 auto;
    width: 280px;
    margin-top: 0px;
    /* display: none; */
}

.artist-central-col-chart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;margin-bottom: 130px;margin: 0 auto;margin-bottom: 50px;margin-top: 0px;}

.artist-central-col-chart-col-artist {
    font-family: 'Atlas Grotesk Web';
    font-size: 15px;
    text-align: left;
}

.artist-central-col-chart-col {
    text-align: center;
    font-weight: 500;
    width: 87px;
    margin-right: 16px;
    position: relative;
}

.artist-central-col-chart-col-artist-word {
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    text-align: left;
    text-transform: none;
    font-weight: 400;
    line-height: 1.6;
    color: #2b2b2b;
    width: auto;
}

.artist-central-col-chart-col-artist-words {
    margin-top: 7px;
    border-top: 1px solid rgba(0, 0, 0, 0.16);
    padding-top: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.artist-central-col-chart-col-artist-word span {
    font-size: 9px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.58);
    margin-right: 2px;
}

.artist-central-col-chart-col-artist-cont {
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.artist-central-row-chart {
    position: relative;
    height: 300px;
    width: 100%;
    margin-top: 19px;
    display: none;
}

.artist-central-row-chart-row-artist {
    font-family: 'Atlas Grotesk Web';
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.02em;
    text-align: right;
}

.artist-central-row-chart-row-artist-words-container {
}

.artist-central-row-chart-row {
    padding-top: 2px;
    width: 112px;
}

.artist-central-row-chart-row-artist-word {
    font-family: 'Atlas Grotesk Web';
    font-size: 13px;
    margin-left: 5px;
    font-weight: 400;
    text-transform: capitalize;
}

.artist-central-row-chart-row-artist-word span {font-size: 9px;font-weight: 500;color: rgba(0, 0, 0, 0.58);margin-right: 0px;}

.artist-central-row-chart-row-artist-text {
    width: 100%;
    text-align: left;
    line-height: 21px;
    margin: 0 auto;
    font-size: 11px;
    margin-bottom: 10px;
}

.artist-central-col-chart .artist-central-col-chart-col:last-of-type {
    margin-right: 0px;
    /* margin-left: 50px; */
}


.artist-central-col-highlighted {
    background: rgba(255, 224, 133, 0.27);
    font-weight: 500;
}

.column-annotation {
    font-size: 13px;
    font-family: 'Atlas Grotesk Web';
    position: absolute;
    top: -25px;
    color: #000;
    font-weight: 400;
    width: 200px;
    text-align: left;
    display: none;
}

.artist-central-row-chart-gradient {
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
    display: none;
}

.artist-central-row-chart-gradient-see-more {
    font-size: 11px;
    font-family: 'Atlas Grotesk Web';
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #F44336;
    cursor: hand;
    cursor: pointer;
}

.fat-title {
    font-family: 'Atlas Grotesk Web';
    text-align: left;
    font-size: 20px;
    font-weight: 300;
    color: #222;
    /* font-family: 'Interface'; */
    font-weight: 500;
    text-align: center;
}

.scatter-chart-x-text-bottom{
  transform: translate(0,34px);
}


.scatter-chart-triangles-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
}

.scatter-chart-triangles-arrow {
    stroke: black;
    stroke-width: 1px;
    fill: none;
}

.scatter-chart-triangles-arrow-container {
    overflow: visible;
}

.intro-section .divider {
    /* background: #fffbd8; */
}

.intro-section a:visited {
    /* color: #fffbd8; */
}

.intro-section .prose-wrapper {
    -webkit-font-smoothing: antialiased;
}

.intro-section a {
    /* font-weight: 500; */
    /* color: #fffbd8; */
    color: initial;
}

.scatter-chart-triangle-lasso {
    fill: none;
    animation: marching_ants .4s steps(12) infinite;
    stroke-dasharray: 5;
    fill: #000000;
    fill-opacity: .02;
    stroke: rgb(39, 108, 145);
    stroke-opacity: 1;
    stroke-width: 2px;
    /* shape-rendering: crispEdges; */
    display: none;
    /* visibility: visible; */
}

@keyframes marching_ants {
  0%   {stroke-dashoffset: 0;}
  100% {stroke-dashoffset: 10;}
}


.scatter-chart-circles-canvas {
    position: absolute;
    transform: translate3d(0,0,0);
    visibility: hidden;
    z-index: 0;
    pointer-events: all;
    cursor: hand;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.blue-text {
    color: #1b4c66;
    font-weight: 500;
}
.blue-tri {
    color: #1b4c66;
    background: #cae9f7;
    margin-left: 6px;
}


.red-text {
    color: #7f2223;
    font-weight: 500;
}

.red-tri {
    background: #fbd5d5;
    color: #7f2223;
    margin-left: 3px;
}

.grey-text {
    color: #4c4c4c;
    font-weight: 500;
}

.artist-explain-fat-title {
    text-align: center;
}

.artist-explain-title {
    text-align: center;
    width: 180px;
    text-align: right;
}

.artist-explain-chart-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    margin-top: 50px;
    margin-bottom: 20px;
    -webkit-justify-content: center;
    justify-content: center;
}

.artist-explainer-col-top-artist {
    font-size: 15px;
    text-align: right;
    font-family: 'Atlas Grotesk Web';
    font-weight: 500;
    text-align: right;
    text-align: center;
    margin-top: -24px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.artist-explainer-col-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
    flex-direction: column;
    margin-right: 22px;
}

.artist-explainer-col-top-percent {
    font-size: 19px;
    font-family: 'Atlas Grotesk Web';
    font-weight: 500;
    text-align: center;
    padding-top: 4px;
}

.artist-explain-chart-container-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    margin-left: 30px;
}

.scatter-chart-fat-title {}

.scatter-chart-title {
    margin-top: 7px;
    text-align: center;
}

.tsne-svg {margin: 0 auto;display: block;display: none;}


.tsne-chart {
    /* width: 100%; */
    background: #e5ecef;
    transform: translate3d(0,0,0);
    height: 100vh;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;
    position: relative;
    cursor: -webkit-grab;
}

.scatter-chart-hover-circle {
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    border: 2px solid #000000;
    border-radius: 50%;
    transform: translate(-4px,-6px);
}

.scatter-chart-hover {
    position: absolute;
    z-index: 10000;
    visibility: hidden;
}

.scatter-chart-hover-text {
    position: absolute;
    font-family: 'Atlas Grotesk Web';
    font-size: 13px;
    /* background: rgb(255, 255, 255); */
    padding: 3px 15px;
    /* box-shadow: 0 2px 5px #ececec, 2px 0 5px 0px #e4e4e4, 0 -2px 5px #efefef, -2px 0 5px #f1f1f1; */
    border-radius: 0px;
    text-transform: capitalize;
    font-weight: 500;
    transform: translate(calc(-50% - -3px),-37px);
    text-shadow: 0 2px 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, -2px 0 0 #ffffff;
    white-space: nowrap;
}

.scatter-chart-hover-info{
  width: 100%;
  margin-top: 12px;
  padding: 14px 0;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  position: absolute;
  top: calc(100% + 14px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  font-family: 'Atlas Grotesk Web';
  -webkit-justify-content: center;
  justify-content: center;
  visibility: hidden;
}
.scatter-chart-search-input{
  box-shadow: inset 2px 3px 3px rgba(0,0,0,0.07);
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px #e2e2e2 solid;
  width: 100%;
  padding: 0 30px 0 10px;
  font-size: 12px;
  height: 28px;
}


.scatter-chart-search {
    position: absolute;
    top: 15px;
    left: 17px;
    z-index: 1000000000;
    pointer-events: all;
    font-family: 'Atlas Grotesk Web';
    margin: 0 auto;
    width: 140px;
    display: none;
}


.scatter-chart-hover-info-left {
    width: 45%;
}

.scatter-chart-hover-info-right {
    width: 45%;
}

.scatter-chart-hover-info-word {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.scatter-chart-hover-times-text {
    font-size: 13px;
    margin-top: 5px;
}

.scatter-chart-hover-times-text span {
    font-size: 13px;
    font-weight: 500;
    margin-right: 1px;
}

.scatter-chart-hover-info-right-title {
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 5px;
    color: #6f6f6f;
}

.scatter-chart-hover-info-right-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    font-size: 11px;
}

.scatter-chart-hover-info-right-row-label {
    width: 85px;
    color: #222;
    font-weight: 400;
    font-size: 11px;
}

.scatter-chart-hover-info-right-row-text {
    font-weight: 400;
    color: #000;
}

.scatter-chart-hover-info-right-row:first-of-type{
  margin-bottom: 3px;
}


.scrolly-chart-col {
    position: relative;
    margin-right: 70px;
}

.scrolly-chart-col-container{
  margin-top: 37px;
  -webkit-justify-content: center;
  justify-content: center;
  /* border-top: 1px solid #ccc; */
}


.scrolly-chart-col-label {
    position: absolute;
    top: -29px;
    text-align: center;
    font-weight: 600;
    font-size: 9px;
    text-transform: uppercase;
    text-align: right;
    /* width: 50px; */
    line-height: 11px;
    color: rgba(0, 0, 0, 0.51);
}

.scrolly-bar-chart-two {
  margin-top: 30px;
  margin-bottom: 30px;
}


.scrolly-bar-chart-two .scrolly-chart-word-title {
    width: 100%;
}

.scrolly-chart-two-col-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    width: 100%;
    margin-top: 50px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.scrolly-chart-word-title-sub {
    font-size: 13px;
    text-align: center;
    color: #888;
    margin: 0 auto;
    width: 240px;
    margin-top: -7px;
}

.scrolly-chart-two-col-container .scrolly-chart-word {
    font-size: 14px;
    font-weight: 400;
}

.scrolly-chart-word-num {
    position: absolute;
    left: -25px;
    top: 0px;
    text-align: right;
    width: 20px;
    font-size: 11px;
    color: #000000;
    font-weight: 400;
}

.scrolly-chart-centricity:before {
    /* content: '-'; */
    position: absolute;
    left: -6px;
    top: 0px;
    color: #999;
}

.scrolly-chart-col-container .scrolly-chart-col:last-of-type{
  margin-right: 0px;
}


.scrolly-chart-two-col-container .scrolly-chart-col {
    margin-right: 20px;
}

.scrolly-chart-col-container .scrolly-chart-col-label{
}

.scrolly-chart-two-col-container .scrolly-chart-col:last-of-type{
  margin-right: 0px;
}


.scrolly-bar-chart-toggle-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    margin-top: 25px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.scrolly-bar-chart-toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  margin-right: 10px;
  width: 100%;
  margin-bottom: 5px;
  margin-left: 13px;
  font-family: 'Atlas Grotesk Web';
}

.scrolly-bar-chart-toggle-button {
    margin-right: 10px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 14px;
    border: 1px solid rgba(127, 125, 156, 0.54);
    color: black;
    cursor: pointer;
    /* border: solid 1px rgba(127, 125, 156, 0.75); */
    padding: 0px 8px;
    /* box-shadow: inset 0 1px 2px rgba(0,0,0,0.08); */
    margin-left: -13px;
    background: white;
    text-align: center;
    line-height: 22px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 11.5px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #fff;
    height: 21px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-transform: capitalize;
}

.scrolly-bar-chart-toggle-button-selected {font-weight: 500;background-color: #F5F5F5;color: black;box-shadow: inset 0 3px 5px rgba(0,0,0,.125);border-color: #adadad;}

.scrolly-bar-chart-toggle .scrolly-bar-chart-toggle-button:first-of-type{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.scrolly-bar-chart-toggle .scrolly-bar-chart-toggle-button:last-of-type{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


.scrolly-bar-chart-toggle-label {
    font-size: 10px;
    display: block;
    width: auto;
    margin-right: 23px;
    line-height: 26px;
    /* text-transform: uppercase; */
    font-weight: 400;
    color: #666;
    display: none;
}

.scrolly-bar-chart-two-toggles {
    padding-bottom: 60px;
    display: none;
}

.scrolly-chart-col-label span {
    font-weight: 400;
    text-transform: lowercase;
    margin-left: 2px;
}

.artist-central-container {margin: 0 auto;width: 100%;overflow: hidden;margin-top: -33px;}

.artist-central-title {
    font-weight: 400;
    text-align: center;
    margin: 0 auto;
}

.artist-central-fat-title {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 6px;
    font-weight: 500;
    min-height: auto;
    display: block;
}

.artist-central-fat-title span {
    font-weight: 500;
    background: #ffffff;
    color: #1f69c5;
    padding-left: 4px;
    padding-right: 4px;
    margin-right: 4px;
    letter-spacing: 1px;
    background: rgba(152, 183, 254, 0.32);
    font-size: 18px;
    display: none;
}

.artist-central-new-chart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.nodes-text {
    font-size: 12px;
}

.nodes-rect {
}

circle.nodes-rect.nodes-rect-two {}

.nodes-rect-two {
    fill-opacity: .5;
    /* stroke: black; */
    display: none;
}

.face-div {
    /* background: url("https://pudding.cool/2017/02/vocabulary/css/das-efx.png"); */
    width: 30px;
    height: 30px;
    position: absolute;
    /* border-radius: 50%; */
    /* background: url("grid1x.png"); */
    /* filter: grayscale(100%); */
    /* background: url(actionbronson.png); */
    background-size: 480px;
    /* background-repeat: no-repeat; */
    background-size: contain;
    background-image: url(spritesheet.png);
    background-size: 686px;
    /* background-repeat: no-repeat; */
    /* font-size: 17px; */
    font-family: 'Atlas Grotesk Web';
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 0, 0, 0);
    cursor: hand;
    cursor: pointer;
    z-index: 1;
    /* transform: translate(-50%,-50%); */
}


.fixed-hidden {
    position: fixed;
    top: 0px;
    z-index: 0;
}

.record-scratch {
    z-index: 1;
    position: relative;
    pointer-events: none;
    padding-bottom: 15vh;
}
.record-scratch .logo{
  width: 126px;
  padding-top: 16px;
  height: 31px;
  pointer-events: all;
}
.record-scratch .logo svg {width: 127px;fill: rgb(33, 42, 45);}


.tsne-chart-wrapper {
    background: #e5ecef;
    position: relative;
}

.record-scratch .prose span {}

.byline-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    margin-right: 19px;
}

.byline-item .light {
    margin-right: 6px;
    /* color: rgba(0,0,0,.8); */
    /* font-weight: 500; */
}

.intro-slide {
    background: none;
    display: flex;
    border-left: none;
    margin-top: 85vh;
}

.first-slide {
    padding-top: 63vh;
    margin: 0 auto;
    margin-bottom: 90vh;
    height: auto;
    position: relative;
    margin-top: 0px;
    max-width: 640px;
    text-align: left;
}
.last-slide {
    margin-top: 85vh;
    height: auto;
}


.tsne-zooming-div {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-align-self:center;
    align-self: center;
    /*transition-timing-function: ease-in;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    width: 100%;
    height: 100%;
    transform-origin: 0px 0px;
    /* transform-origin: 50% 50% 0; */
}

.intro-slide .prose {
    background: rgb(255, 255, 255);
    text-align: center;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    padding: 20px 18px;
    border: 1px solid #d2d2d2;
    box-shadow: -1px -1px 5px -1px rgb(229, 236, 239), 1px 3px 5px 0px rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    font-weight: 400;
    font-size: 16px;
}

.logo-wrapper {
    /* background: rgba(255, 255, 255, 0.95); */
}

.boldify{

}


.white-wrapper {
    width: 100%;
    background: white;
    position: relative;
    z-index: 100;
    padding-bottom: 80px;
}

.scatter-chart-search-results{
  position: absolute;
  width: auto;
  bottom: -7px;
  background: white;
  z-index: 1000000000;
  padding: 4px 7px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transform: translate(0,100%);
  display: none;
  min-width: 95px;
}

.scatter-chart-search-results-result{
  font-size: 12px;
  font-family: 'Roboto';
  color: rgba(0, 0, 0, 0.74);
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 auto;
  line-height: 16px;
  cursor: hand;
  cursor: pointer;
}


.scatter-chart-search-results-result:hover {
    font-weight: 600;
    text-decoration: underline;
    color: black;
}

.byline-item-date {
    margin-right: 10px;
    border-right: 1px solid #ccc;
    padding-right: 10px;
    font-weight: 500;
    color: rgb(31, 105, 197);
}

.swiper-container {
    width: 100%;
    height: 430px;
    margin: 0px auto;
    margin-top: 0px;
    transform: translate3d(0,0,0);
    overflow: visible;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;


    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-family: 'Atlas Grotesk Web';
    font-size: 13px;
    /* background: url("actionbronson.png"); */
    background-repeat: no-repeat;
    background-size: contain;
    height: 89px;
    filter: grayscale(100%);
    width: 7%;
    background-position: 50% 50%;
    transition: width 1000ms;
    overflow: visible;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    max-width: 75px;
}


.swiper-slide-active {
    filter: none;
    opacity: 1;
    /* justify-content: center; */
    position: relative;
}

.swiper-slide-text {
    position: absolute;
    font-size: 12px;
    width: 210px;
    bottom: 100%;
    display: none;
    /* transform: translate(0%,calc(100% + 38px)); */
    font-weight: 500;
    left: auto;
    right: auto;
    margin: 0 auto;
}

.swiper-slide-image {
    height: 30px;
    width: 30px;
    background: url(actionbronson.png);
    background-repeat: no-repeat;
    /* background-size: contain; */
    filter: grayscale(100%);
    background-position: 50% 50%;
    /* transition: transform 200ms; */
    opacity: .6;
    /* transform: scale(.75); */
    background-image: url(spritesheet.png);
}

.swiper-slide-active .swiper-slide-text {
    display: block;
    color: #1f69c5;
    font-weight: 500;
    /* text-transform: uppercase; */
    /* letter-spacing: .5px; */
    transform: translate(0%,-5px);
    font-size: 16px
    bottom: 0px
    text-shadow: 0 2px 0 #e5ecef, 2px 0 0 #e5ecef, 0 -2px 0 #e5ecef, -2px 0 0 #e5ecef;
    z-index: 100
    pointer-events: none;
    font-size: 16px;
}

.swiper-slide-active .swiper-slide-image {
    opacity: 1;
    filter: none;
    /* width: 60px; */
    /* height: 60px; */
    transform: translate3d(0,0,0);
}

.artist-central-row-chart-active {
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 200px;
    top: -20px;
    display: none;
}

.artist-central-row-chart-active-word {
    margin: 0 auto;
    text-align: center;
    font-family: 'Atlas Grotesk Web';
    font-size: 13px;
    line-height: 19px;
    text-transform: capitalize;
    height: 33px;
}

.artist-central-row-chart-active-word-span {
    background: white;
    padding: 4px 10px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    font-size: 13px;
}

.swiper-slide:hover .swiper-slide-text {
    display: block;
}

.swiper-slide-words {
    position: absolute;
    top: 100%;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.49);
    font-weight: 500;
    line-height: 13px;
    text-transform: capitalize;
    padding-top: 3px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently                                   supported by Chrome and Opera */
    width: 100%;
    display: none;
}

.swiper-slide-active .swiper-slide-words {
    /* display: none; */
    width: 200%;
    left: -54%;
    z-index: 1000;
}

.swiper-slide-active .swiper-slide-words-word {
    /* background: white; */
    /* padding: 4px 10px; */
    /* box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); */
    /* font-weight: 500; */
    /* font-size: 13px; */
    margin-top: 17px;
    width: auto;
    color: black;
}

.swiper-slide-active .swiper-slide-words-word-span {
    /* padding: 0px 8px; */
    background: #ffffff;
    padding: 4px 10px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    font-size: 13px;
    margin-top: 8px;
    width: auto;
    color: black;
}


.swiper-slide-visible .swiper-slide-image {display: block;}

.swiper-slide-visible .swiper-slide-words {
    display: block;
}

.tsne-title {
    text-align: center;
    /* padding-bottom: 30px; */
    /* background: rgba(229, 236, 239, 0.88); */
    /* position: relative; */
    /* z-index: 1000; */
    /* border-bottom: 2px solid white; */
    display: none;
}


.tsne-fat-title {
    /* text-align: center; */
    font-family: 'Canela Web';
    /* padding-top: 30px; */
    /* background: rgba(229, 236, 239, 0.92); */
    /* z-index: 10000; */
    /* position: relative; */
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 auto;
    text-align: left;
    padding-left: 20px;
    letter-spacing: 2px;
    pointer-events: none;
    text-align: center;
    text-align: left;
    margin-top: 10px;
    line-height: 26px;
    padding: 10px 0px;
    margin: 0 auto;
    width: 80%;
    margin-top: 20px;
}

.tsne-title-wrapper{position: absolute;background: white;z-index: 1000;left: 0px;/* right: 0px; */top: 0px;margin: 0 auto;box-shadow: 3px 3px 11px -3px rgba(17, 17, 17, 0.68);background: rgba(0, 0, 0, 0.97);text-align: center;width: 180px;height: 100%;}


.tsne-zoom-buttons {
    top: 30px;
    position: absolute;
    right: 30px;
    /* box-shadow: 0 1px 5px rgba(0,0,0,0.65); */
    border-radius: 4px;
    pointer-events: all;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
    z-index: 0;
}

.tsne-zoom-buttons-two {
    top: 30px;
    position: absolute;
    right: 30px;
    /* box-shadow: 0 1px 5px rgba(0,0,0,0.65); */
    border-radius: 4px;
    pointer-events: all;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
    z-index: 0;
    display: none;
}

.tsne-zoom-button {
    display: block;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    color: black;
    color: rgb(0, 0, 0);
    text-decoration: none;
    border-bottom: 0.0625rem solid #dcdcdc;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    font-weight: 600;
    font-size: 28px;
    cursor: pointer;
    cursor: hand;
}


.tsne-zoom-button:hover {
    color: black;
    background: #e8e8e8;
}

.tsne-search {
    /* position: absolute; */
    /* top: 11px; */
    /* right: 30px; */
    width: 95px;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
}

.tsne-search-input {
    color: white;
    /* border-radius: 3px; */
    box-sizing: border-box;
    width: 100%;
    font-size: 12px;
    height: 28px;
    background: none;
    border: none;
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    font-weight: 400;
    border-bottom: 1px solid #757575;
}

.magnifying-class {
    fill: white;
    width: 17px;
    position: absolute;
    left: -30px;
    top: 6px;
}




.artist-central-search-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  /*font-weight:500;*/
  color:#216ac5;
}
.artist-central-search-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  /*font-weight:500;*/
  color:#216ac5;
}
.artist-central-search-input::-moz-placeholder { /* Mozilla Firefox 19+ */
  /*font-weight:500;*/
  color:#216ac5;
}
.artist-central-search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  /*font-weight:500;*/
  color:#216ac5;
}
.artist-central-search-input::-ms-input-placeholder { /* Microsoft Edge */
  /*font-weight:500;*/
  color:#216ac5;
}


.tsne-search-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  font-weight:500;
}
.tsne-search-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-weight:500;
}
.tsne-search-input::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-weight:500;
}
.tsne-search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-weight:500;
}
.tsne-search-input::-ms-input-placeholder { /* Microsoft Edge */
  font-weight:500;
}


.tsne-map {
    /* z-index: 1000; */
    /* background: #e5ecef; */
    /* bottom: 20px; */
    /* position: absolute; */
    /* right: 20px; */
    /* border: 2px solid white; */
    /* display: none; */
}

.tsne-map-container {
    z-index: 1000;
    background: #e5ecef;
    bottom: 20px;
    position: absolute;
    right: 20px;
    border: 2px solid white;
}

.tsne-map-rect {
    height: 30px;
    width: 30px;
    position: absolute;
    border: 2px solid #1f69c5;
}

.fixed-hidden .tsne-map-container {
    display: none;
}

.fixed-hidden .tsne-zoom-buttons {
    display: none;
}

.artist-central-toggles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    width: 100%;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 20px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    z-index: 1000000000;
}

.artist-central-search {
    width: 100px;
    display: block;
    position: relative;
}

.artist-central-search-input {
    color: black;
    border-radius: 0px;
    box-sizing: border-box;
    width: 100%;
    font-size: 12px;
    height: 24px;
    background: none;
    border: none;
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid #216ac5;
}

.artist-central-magnifying-glass {
    width: 15px;
    fill: #286fc7;
    position: absolute;
    left: -23px;
    top: 5px;
}


.artist-central-filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    margin-left: 50px;
}

.artist-central-filter {
    font-family: 'Atlas Grotesk Web';
    font-size: 11px;
    font-weight: 500;
    margin-right: 11px;
    line-height: 24px;
    cursor: hand;
    cursor: pointer;
    color: #75787a;
}

.artist-central-filter-selected {
    font-weight: 600;
    color: #1f69c5;
    text-decoration: underline;
}

.artist-central-filter:hover {
    text-decoration: underline;
}

.artist-central-wu-tang-filter {
    /* background-image: url(wu-tang-logo.svg); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 80px;
    position: relative;
    margin-left: 30px;
    text-transform: capitalize;
}


.wu-tang-logo {
    background-image: url(wu-tang-logo.svg);
    width: 22px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -27px;
    top: 2px;
    opacity: .4;
}

.artist-central-wu-tang-filter:hover .wu-tang-logo {
    opacity: 1;
}

.artist-central-jump {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    width: 100%;
    padding-left: 19px;
    margin-top: 30px;
}

.artist-central-jump-letter {
    font-family: 'Atlas Grotesk Web';
    font-size: 10px;
    text-transform: uppercase;
    padding-right: 2px;
    cursor: pointer;
    cursor: hand;
    color: #75787a;
}

.artist-central-jump:before {
    content: 'Jump:';
    font-family: 'Atlas Grotesk Web';
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    margin-right: 6px;
}

.artist-central-jump-letter:hover {
    font-weight: 600;
    text-decoration: underline;
    color: #226bc6;
}

.tsne-tool-tip {
    width: 300px;
    /* background: white; */
    top: -50px;
    position: absolute;
    display: none;
}

.tsne-tool-tip-container {
    /* width: 1px; */
    /* height: 1px; */
    /* align-self: center; */
    /* position: relative; */
}

.tsne-tool-tip p {
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    font-weight: 600;
    /* background: white; */
    padding: 4px 8px;
    text-align: center;
    transform: translate(-50%,0px);
}


.artist-central-search-results{
  position: absolute;
  width: auto;
  bottom: -7px;
  background: white;
  z-index: 1000000000;
  padding: 4px 7px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transform: translate(0,100%);
  display: none;
  min-width: 95px;
}


.artist-central-filter-selected
 .wu-tang-logo {
    opacity: 1;
}

.tsne-background-circle {
    width: 50px;
    height: 50px;
    position: absolute;
    background: white;
    border-radius: 25px;
    z-index: 0;
    visibility: hidden;
    left: -25px;
    top: -25px;
}

.tsne-search-circle{
  width: 50px;
  height: 50px;
  position: absolute;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  z-index: 0;
  left: -13px;
  visibility: hidden;
  pointer-events: none;
}

.tsne-search-results{
  position: absolute;
  width: auto;
  bottom: -7px;
  background: white;
  z-index: 1000000000;
  padding: 4px 7px;
  background-color: #35353c;
  /* border: 1px solid #ccc; */
  border-radius: 2px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transform: translate(0,100%);
  display: none;
  min-width: 95px;
}


.tsne-search-results .scatter-chart-search-results-result {
    color: white;
    text-align: left;
    font-weight: 300;
}


.tsne-search-tool-tip {
    font-family: 'Atlas Grotesk Web';
    font-size: 14px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.88);
    padding: 6px 3px;
    position: absolute;
    z-index: 100;
    top: -41px;
    left: -67px;
    width: 160px;
    text-align: center;
    visibility: hidden;
}

.record-scratch .first-slide:after {
    content: 'scroll down!';
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    text-align: center;
    bottom: -27px;
    font-family: 'Atlas Grotesk Web';
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    text-shadow: 0 2px 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, -2px 0 0 #ffffff;
}


.additional-fixed .tsne-zoom-buttons-two {
    display: block;
    position: fixed;
}

.chart-title-big {
    font-size: 14px;
    /* text-transform: uppercase; */
    width: 100%;
    font-weight: 500;
    font-family: 'Atlas Grotesk Web';
    color: black;
    padding-bottom: 5px;
    text-align: left;
    border: none;
    color: rgb(38, 120, 160);
}

.scrolly-chart-footnote {
    font-size: 11px;
    color: rgba(51, 51, 51, 0.72);
    font-weight: 400;
    line-height: 15px;
    /* width: 280px; */
    margin-top: 11px;
}

.least-title {
    margin-top: 50px;
    color: #852425;
    font-size: 23px;
    font-weight: 100;
    /* color: black; */
}

.chart-title-big-common {
    font-size: 23px;
    line-height: 18px;
    font-weight: 400;
    /* color: black; */
}

.second-scrolly-rows {
    cursor: hand;
    cursor: pointer;
}

.second-scrolly-rows:hover {
    background-color: #eaeaea;
}

.face-div:hover {
    z-index: 100;
}

.tsne-tool-tip p span {
    background: white;
    padding: 4px 10px;
}


.face-div-container {
    /* width: 44px; */
    /* height: 44px; */
    /* margin-left: -22px; */
    /* margin-top: 22px; */
}

.face-div-circle {
    /* background: rgba(255, 255, 255, 0.62); */
    width: 44px;
    height: 44px;
    position: absolute;
    border-radius: 50%;
    transform: translate(-7px,-3px);
    /* border: 1px solid #e5ecef; */
}

/*.highlighting-face :not(.face-div-selected) {
  filter: grayscale(.8);
}*/


.tsne-cluster path {
    fill: rgb(255, 255, 255);
    stroke-linejoin: round;
    stroke: rgb(255, 255, 255);
    display: none;
}

.tsne-cluster {
    overflow: visible;
    position: absolute;
    left: 0px;
    top: 0px;
    /* display: none; */
}

.opacity-out{
  opacity:.3;
}


.tsne-filter-item-container {}

.tsne-filter-item {
    color: white;
    font-family: 'Atlas Grotesk Web';
    font-size: 11px;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    line-height: 1;
    height: 21px;
    border-radius: 4px;
    margin-left: 5px;
    margin-bottom: 1px;
    cursor: pointer;
    cursor: hand;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tsne-filter {
    /* margin-left: 10px; */
    text-align: left;
    margin-right: 8px;
    margin-bottom: 15px;
}

.tsne-filter-label {
    color: #757575;
    font-size: 11px;
    text-transform: capitalize;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 4px;
    margin-left: 10px;
}

.tsne-filters {
    margin-top: 20px;
}

.tsne-filter-item p {
    line-height: 19px;
    padding-left: 5px;
    letter-spacing: -.2px;
    position: relative;
}

.tsne-filter-item:hover {
    /* background: white; */
    /* color: black; */
    text-decoration: underline;
}

.tsne-filter-item p span svg {
    position: absolute;
    right: 5px;
    width: 14px;
    top: -1px;
    display: none;
}

.tsne-filter-active{
  background: white;
  color: black;
  /* padding-right: 6px; */
}

.tsne-filter-active p span svg{
  display:block;
}


.tsne-tool-tip p span .new-span {
    position: absolute;
    top: 16px;
    text-align: left;
    font-size: 10px;
    padding: 0px;
    margin: 0px;
    height: 24px;
    line-height: 14px;
    padding-left: 18px;
    font-weight: 500;
    /* color: rgba(0, 0, 0, 0.76); */
    background: none;
    text-shadow: -3px -3px 1px rgba(255, 255, 255, 0.4), -3px -2px 1px rgba(255, 255, 255, 0.4), -3px -1px 1px rgba(255, 255, 255, 0.4), -3px 0px 1px rgba(255, 255, 255, 0.4), -3px 1px 1px rgba(255, 255, 255, 0.4), -3px 2px 1px rgba(255, 255, 255, 0.4), -3px 3px 1px rgba(255, 255, 255, 0.4), -2px -3px 1px rgba(255, 255, 255, 0.4), -2px -2px 1px rgba(255, 255, 255, 0.4), -2px -1px 1px rgba(255, 255, 255, 0.4), -2px 0px 1px rgba(255, 255, 255, 0.4), -2px 1px 1px rgba(255, 255, 255, 0.4), -2px 2px 1px rgba(255, 255, 255, 0.4), -2px 3px 1px rgba(255, 255, 255, 0.4), -1px -3px 1px rgba(255, 255, 255, 0.4), -1px -2px 1px rgba(255, 255, 255, 0.4), -1px -1px 1px rgba(255, 255, 255, 0.4), -1px 0px 1px rgba(255, 255, 255, 0.4), -1px 1px 1px rgba(255, 255, 255, 0.4), -1px 2px 1px rgba(255, 255, 255, 0.4), -1px 3px 1px rgba(255, 255, 255, 0.4), 0px -3px 1px rgba(255, 255, 255, 0.4), 0px -2px 1px rgba(255, 255, 255, 0.4), 0px -1px 1px rgba(255, 255, 255, 0.4), 0px 1px 1px rgba(255, 255, 255, 0.4), 0px 2px 1px rgba(255, 255, 255, 0.4), 0px 3px 1px rgba(255, 255, 255, 0.4), 1px -3px 1px rgba(255, 255, 255, 0.4), 1px -2px 1px rgba(255, 255, 255, 0.4), 1px -1px 1px rgba(255, 255, 255, 0.4), 1px 0px 1px rgba(255, 255, 255, 0.4), 1px 1px 1px rgba(255, 255, 255, 0.4), 1px 2px 1px rgba(255, 255, 255, 0.4), 1px 3px 1px rgba(255, 255, 255, 0.4), 2px -3px 1px rgba(255, 255, 255, 0.4), 2px -2px 1px rgba(255, 255, 255, 0.4), 2px -1px 1px rgba(255, 255, 255, 0.4), 2px 0px 1px rgba(255, 255, 255, 0.4), 2px 1px 1px rgba(255, 255, 255, 0.4), 2px 2px 1px rgba(255, 255, 255, 0.4), 2px 3px 1px rgba(255, 255, 255, 0.4), 3px -3px 1px rgba(255, 255, 255, 0.4), 3px -2px 1px rgba(255, 255, 255, 0.4), 3px -1px 1px rgba(255, 255, 255, 0.4), 3px 0px 1px rgba(255, 255, 255, 0.4), 3px 1px 1px rgba(255, 255, 255, 0.4), 3px 2px 1px rgba(255, 255, 255, 0.4), 3px 3px 1px rgba(255, 255, 255, 0.4);
    color: #000000;
    width: 90px;
}

.tsne-tool-tip p span .new-span-label {
    color: rgb(0, 0, 0);
    width: 90px;
    padding: 0px;
    margin: 0px;
    font-weight: 600;
    background: none;
    padding-left: 18px;
    top: 0px;
}

.new-span-three {
    top: 60px;
}

.tsne-tool-tip p span .new-span-three {
    top: 40px;
    width: 200px;
}

.tsne-tool-tip p span .new-span-two {
    top: 28px;
}

.fixed-hidden .new-span{
  display: none;
}

.fixed-hidden .tsne-similar{
  display:none;
}

.tsne-similar {
    overflow: visible;
}

.tsne-similar-line {
    stroke: rgb(31, 105, 197);
    stroke-width: 1;
    stroke-opacity: .7;
    stroke-dasharray: 3,3;
}


.migos-slide {
    width: 50%;
    margin: 0 auto;
    margin-top: 85vh;
    min-width: 763px;
    pointer-events: all;
}

.migos-data-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
    margin-bottom: 10px;
    -webkit-justify-content: center;
    justify-content: center;
}

.migos-data-row-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 20px;
    margin-right: 11px;
}

.migos-info {
    margin-top: 20px;
    min-height: 100px;
}

.migos-data-row-word-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.migos-data-row-word {
    font-size: 10px;
    padding: 1px 4px;
    /* background: #dedede; */
    margin-right: 9px;
    font-weight: 500;
    text-transform: uppercase;
    box-shadow: -1px -1px 5px -1px rgb(229, 236, 239), 1px 3px 5px 0px rgba(0, 0, 0, 0.19);
    cursor: hand;
    cursor: pointer;
}
.migos-data-row-word-highlight{
  background: #1f69c5;
  color: white;
  font-weight: 400;
}


.tnse-modal {
    position: absolute;
    left: 180px;
    right: 0px;
    margin: 0 auto;
    z-index: 10000;
    top: 50%;
    text-align: center;
    width: 220px;
    background: white;
    transform: translate(0px,-50%);
    padding: 12px 10px 7px 10px;
    /*border-radius: 5px;
    box-shadow: -1px -1px 5px -1px rgb(229, 236, 239), 1px 3px 5px 0px rgba(0, 0, 0, 0.19);
    border: 1px solid #d2d2d2; */
    font-size: 14px;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    pointer-events: none;
}

.tnse-modal svg {
    width: 25px;
    height: 28px;
    margin-right: 7px;
}

.tnse-modal p {
    line-height: 20px;
}

.migos-slide .prose {
    padding-top: 30px;
}

.migos-slide .song-sample {
    position: absolute;
    top: -25px;
    left: 11px;
}

.skrrt {
    position: relative;
    /* text-decoration: underline; */
    font-weight: 500;
    cursor: pointer;
    cursor: hand;
}


.prose-wrapper a {
    color: black;
}

.certificate {
    /* border: 5px solid rgb(185, 180, 139); */
    text-align: center;
    padding: 1rem;
    padding-top: 30px;
    position: relative;
    padding-bottom: 30px;
    /* width: 80%; */
    margin: 0 auto;
    margin-top: 35px;
    background-color: #fdf6e2;
    width: 220px;
    box-shadow: 2px 3px 4px -1px rgb(226, 223, 213);
    border: 1px solid rgba(214, 198, 149, 0.62);
    margin-bottom: 50px;
}

.certificate-title {
    font-family: canela;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 100;
    width: 100%;
}

.certificate-desc-head {
    /* font-style: italic; */
    font-size: 12px;
    margin: 0 auto;
    /* text-transform: uppercase; */
    font-weight: 400;
    width: 190px;
    margin-top: 20px;
    line-height: 1.5;
}

.certificate-desc {
    font-size: 10px;
    margin-top: 13px;
    /* width: 230px; */
    margin-top: 8px;
    text-align: left;
    width: 110px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
}

.conclusion-prose {
    margin-top: 70px;
}

.certificate svg {
    width: 75px;
    position: absolute;
    right: 20px;
    bottom: 50px;
    transform: translate(0px,40px);
    stroke: #c5b072;
    fill: none;
}

.example-migos{
  width: 500px;
  margin: 0 auto;
}

.tnse-methodology {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    color: white;
    z-index: 1000;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #202025;
    padding: .5rem 1rem;
    cursor: hand;
    cursor: pointer;
    display: none;
}


.tsne-methodology-window {
    position: fixed;
    top: 10vh;
    width: 600px;
    background: white;
    height: 400px;
    left: 180px;
    right: 0px;
    z-index: 1000000;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: -1px -1px 5px -1px rgb(229, 236, 239), 1px 3px 5px 0px rgba(0, 0, 0, 0.19);
    border: 1px solid #d2d2d2;
    display: none;
}

.tsne-methodology-window-active{
  display:block;
}


.tsne-methodology-window-close {
    color: black;
    font-weight: 500;
    text-align: right;
    padding: 1rem 1.5rem;
    font-size: 13px;
    letter-spacing: 0px;
    cursor: hand;
    cursor: pointer;
}

.slide .scrolly-chart-word-num:first-child {
  margin-top:0px;
}


.migos-data-row-word:hover {
    background: black;
    color: white;
}

.certificate-title span {
    font-size: 16px;
    font-style: italic;
}

.certificate-desc-title {
    width: 110px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    margin-top: 20px;
}


.certificate-sign {
    font-family: 'Canela Web';
    font-weight: 600;
    font-size: 12px;
    text-align: right;
    right: 24px;
    position: absolute;
    bottom: 57px;
}


.least-scroll-chart {
    margin-top: 30px;
    margin-bottom: 20px;
}

.methodology-notes p {
    font-size: 12px;
}

.methodology-notes {
    border-top: 1px solid black;
    margin-top: 40px;
}

.conclusion-prose
 li {
    font-size: 13px;
    line-height: 1.6;
}

.mobile-pan{
  display: none;
  background: white;
  width: 170px;
  /* border: 1px solid #797979; */
  border-radius: 2px;
  padding: 11px 0px;
  color: black;
  margin: 0 auto;
  text-transform: uppercase;
}

.mobile-pan span{
  position: absolute;
  top: 50px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  text-transform: capitalize;
  color: white;
  font-weight: 400;
  font-size: 12px;
}

.tablet-modal{
  left: 0px;
  width: 100%;
  top: 200px;
  background: rgba(0, 0, 0, 0.59);
  padding: 0px;
  top: 169px;
  height: calc(100vh + 2px);
  transform: none;
  color: white;
  pointer-events: all;
}
.tablet-modal .mobile-pan{
  display: block;
}

.tablet-modal .desktop-pan{
  display: none;
}

.tablet-modal svg{
  fill: white;
  top: 50%;
  position: absolute;
  display: none;
}
.tablet-modal p{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  transform: translate(0px,-50%);
  font-size: 16px;
  font-weight: 500;
  pointer-events: all;
}

.tablet-fixed{
  pointer-events: none;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {


  .face-div{
    background-image: url('spritesheet@2x.png');
    background-size: 782px;
  }
  .swiper-slide-image{
    background-image: url('spritesheet@2x.png');
    background-size: 1043px;
  }
  .swiper-slide{
    height: 150px;
  }
  .swiper-slide-words{
    margin-top: 10px;
  }
  .swiper-container{
    height: 490px;
  }

}
@media only screen and (max-width: 950px) {
  .swiper-slide{
    width: 10%;
  }
  .artist-explain-two-col{
    width: 100%;
  }
  .artist-explain-container{
    width: 450px;
  }
}

@media only screen and (max-width: 700px) {
  .example-migos{
    width: 100%;
  }
  .migos-data-row{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }
  .slide p:first-child{
    margin-top: 10px;
  }
  .migos-data-row-word-container{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
}
@media only screen and (max-width: 800px) {
  .tsne-filter-active p span svg{
    display: none;
  }
  .least-title{
    font-size: 19px;
    font-weight: 400;
  }
  .chart-title-big-common{
    font-size: 19px;
  }
  .tsne-title-wrapper{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: auto;
    position: relative;
    z-index: 0;
  }
  .first-slide{
    padding-top: 60vh;
  }
  .tsne-search-results{
  }
  .tsne-filters{
    width: 230px;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  .tsne-filter{
  }
  .tsne-fat-title{
    width: 160px;
    margin-left: 2rem;
    margin-right: 0px;
    font-size: 19px;
    text-transform: capitalize;
    font-family: 'Atlas Grotesk Web';
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0px;
  }
  .tsne-search{
    margin-left: 60px;
    margin-top: 23px;
    margin-right: 28px;
    position: relative;
    height: 36px;
}
  .byline{
    font-size: 11px;
  }
  .intro-section .byline a{
    font-size: 10px;
  }
  .opening-title .big{
    font-size: 90px;
  }
  .opening-title .small{
    font-size: 29px;
  }
  .scrolly-chart-word{
    width: 21px;
    font-size: 11px;
  }
  .opening-title{
    width: 100%;
  }
  .scrolly-bar-chart-two .scrolly-bar-chart-toggle-button{
    text-align: center;
    height: 33px;
    padding-top: 6px;
  }
  .scrolly-bar-chart-toggle{
  }
  .scrolly-chart-col-label{
    top: -42px;
  }
  .scrolly-chart-col-container{
    margin-top: 60px;
  }
  .migos-slide{
    max-width: 90%;
    min-width: auto;
    width: auto;
  }
  .migos-data-row-label{
    font-size: 11px;
  }
  .migos-data-row-word{
    font-size: 11px;
    text-transform: capitalize;
    margin-right: 6px;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 900px) {
  .scrolly-bar-chart-two .scrolly-bar-chart-toggle-button{
    font-size: 11px;
    line-height: 14px;
  }
  .scatter-container{
    margin-right: 1rem;
  }
  .scatter-prose{
    margin-right: 4rem;
    position: relative;
    z-index: 100;
  }
  .scatter-two-column{width: 100%;}
  .most-central-wrapper{
  }
  .artist-explain-two-col{
    /* display:none; */
  }

  .artist-central{
  }
  .tsne-chart-wrapper{
  }
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 500px) {
  .scrolly-bar-chart-toggle{
    margin:0px;
  }
  .tsne-filter-active p span svg{
    display: none;
  }
  .slide-wrapper{
    opacity: 1;
  }
  .fifth-trigger .scrolly-prose:first-child{margin-top: 0px;padding-top: 70px;}
  .least-title{
    text-align: center;
  }
  .scrolly-bar-chart-two .scrolly-chart-word-title{
    text-align: center;
  }
  .fifth-trigger .chart-title{
    text-align: center;
  }
  .scrolly-chart-footnote{
    text-align: center;
  }
  .least-scroll-chart{
    margin: 0 auto;
    margin-top: 30px;
  }
  .slide-wrapper{
    padding-top:90vh;
    width: 90%;
    margin: 0 auto;
  }
  .slide-first{
    padding-top: 15rem;
  }
  .scatter-two-column{
  }
  .scatter-container{position: absolute;width: 100%;}
  .scatter-prose{
    width: 100%;
    padding-left: 0px;
    margin-right: 0px;
    pointer-events: none;
  }
  .artist-central{
  }
  .artist-explain-two-col{
  }
  .opening-title .big{
    font-size: 62px;
  }
  .white-wrapper{
  }
  .tsne-chart-wrapper{
  }
  .slide-rankings{width: 100%;background: white;padding-top: 0px;pointer-events: all;margin-top: 80vh;}
  .scrolly-bar-chart{width: 90%;margin: 0 auto;max-width: 350px;}
  .scrolly-bar-chart-two{
    width: 90%;
    margin: 0 auto;
    max-width: 310px;
    margin-top: 30px;
  }
  .scatter-chart-y-text{width: 100px;transform: translate(0px,47px) rotate(270deg);left: -73px;}
  .scatter-chart-y-title{
    transform: translate(0px,0px) rotate(270deg);
    width: 120px;
    left: -80px;
  }
  .scrolly-chart-word{
    width: 80px;
    font-size: 14px;
  }
  .scrolly-chart-col-container{max-width: 310px;margin: 0 auto;margin-top: 40px;}
  .scrolly-bar-chart-two .scrolly-bar-chart-toggle-button{
    height: 19px;
  }
  .artist-explain-container{
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .artist-explain-prose{
    z-index: 10000;
    position: relative;
  }
  .prose{
    font-size: .9rem;
    line-height: 1.5;
  }
  .swiper-slide{
    width: 75px;
  }
  .artist-central-jump{
    margin-bottom: 40px;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .artist-central-jump-letter{
    font-size: 11px;
  }
  .artist-central-filters{
    margin-left: 20px;
  }
  .artist-central-wu-tang-filter{
    margin-left: 10px;
  }
  .tsne-fat-title{
    width: 100%;
    font-size: 20px;
    text-align: center;
    margin: 0px;
    margin-top: 20px;
  }
  .tnse-modal{
    left: 0px;
    width: 100%;
    top: 200px;
    background: rgba(0, 0, 0, 0.59);
    padding: 0px;
    top: 169px;
    height: calc(100vh + 2px);
    transform: none;
    color: white;
    pointer-events: all;
  }
  .tnse-methodology{
    bottom: 0px;
    transform: translate(0px,calc(100% + 4px));
    background: none;
    color: black;
    font-weight: 600;
    left: 0px;
  }
  .tsne-title-wrapper{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 225px;
  }
  .tsne-zoom-buttons{
    top:255px;
  }
}
@media only screen and (max-width: 450px) {
  .tsne-filter-active{
    padding-right: 6px;
  }
  .tsne-filter-active p span svg{
    display: none;
  }
  .swiper-slide-active .swiper-slide-text{
    font-size: 16px;
  }
  .swiper-slide-words{
    left: 0px;
    /* transform: translate(-17px,0px); */
  }
  .swiper-slide-active .swiper-slide-words{
    /* left: 0px; */
    /* transform: translate(-17px,0px); */
  }
  .desktop-pan {
    display: none;
  }
  .mobile-pan{
    display: block;
  }
  .tnse-modal svg{
    fill: white;
    top: 50%;
    position: absolute;
    display: none;
  }
  .tnse-modal p{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    transform: translate(0px,-50%);
    font-size: 16px;
    font-weight: 500;
    pointer-events: all;
  }
  .fixed-hidden{
    pointer-events: none;
  }
  .artist-central-toggles{

  }
  .artist-central-filter{
    font-size: 10px;
    margin-right: 7px;
  }
  .tsne-chart-wrapper{
  }
  .artist-explain-fat-title{
    font-size: 18px;
  }
  .tsne-zoom-buttons{
    top: 200px;
  }
  .tsne-filters .tsne-filter:first-of-type{display: none;}
  .artist-explain-container{
    width: 100%;
  }
  .tsne-title-wrapper{
    height: 170px;
  }
  .tsne-filters{
    margin-top: 16px;
    -webkit-flex-wrap: wrap;
  }
  .tsne-filter-item-container{
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
}
  .tsne-filter-label{
    position: absolute;
    top: -15px;
  }
  .tsne-filter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 200px;
    height: auto;
    position: relative;
  }
  .artist-central-jump{
    margin-bottom: 30px;
  }
  .tsne-fat-title{
    font-size: 18px;
  }
  .tsne-search{
    margin-left: 40px;
    margin-top: 0px;
  }
}
@media only screen and (max-width: 420px) {
  .swiper-slide-text{
    left: -67px;
    font-size: 14px;
  }
  .artist-explain-container{
    width: 100%;
  }
  .white-wrapper{
  }
  .scatter-chart-y-title{
    left: -70px;
  }
  .tsne-zoom-buttons-two{
    top: 40px;
    right: 20px;
    display: none;
  }
  .record-scratch{
  }
  .scatter-chart-y-text{
    left: -62px;
  }
  .artist-explain-prose{
    padding: 0px;
    margin: 0px;
  }
  .first-slide{
  padding-top: 50vh;
  }
  .opening-title .big{
    font-size: 55px;
  }
  .scatter-two-column{
  }
  .intro-section .byline a{
    font-size: 11px;
  }
  .byline-item .light{
    letter-spacing: 0px;
  }
  .artist-explain-two-col{
  }
  .prose-wrapper{
    width: 95%;
  }
  .artist-central{
  }
  .byline{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    line-height: 2;
    letter-spacing: 0px;
    max-width: 95%;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 378px) {
  .white-wrapper{
  }
  .artist-explain-fat-title{
    font-size: 16px;
  }
  .artist-explain-title{
    font-size: 12px;
    width: 140px;
  }
  .magnifying-class{
    pointer-events: none;
    left: -23px;
  }
  .artist-central-wu-tang-filter{
    margin-left: 2px;
  }
  .tsne-search{
    margin-right: 10px;
    margin-left: 30px;
  }
  .artist-expainer-row-artist{
    width: 90px;
  }
  .tsne-fat-title{
    font-size: 16px;
    font-weight: 500;
  }
  .artist-central-title{
    font-size: 11px;
  }
  .artist-central-magnifying-glass{
    display: none;
  }
  .artist-central-filters{
    margin-left: 7px;
  }
  .artist-expainer-row-track-percent{
    font-size: 11px;
    margin-left: 5px;
  }
  .artist-central-fat-title{
    font-size: 17px;
  }
  .artist-explain-chart-container{overflow: hidden;width: 100%;}
  .scatter-two-column{
  }
  .tsne-chart-wrapper{
  }
  .artist-explain-two-col{
  }
  .artist-central{
  }
  .opening-title .big{
    font-size: 46px;
  }
  .opening-title .small{
    font-size: 20px;
  }
  .record-scratch{
  }
  .additional-fixed .tsne-zoom-buttons-two{
    display: none;
  }
}
@media only screen and (max-width: 320px) {
  .slide .prose{
    font-size: 12px;
    padding: .5rem .5rem;
  }
  .slide{
    padding-left:.5rem;
    padding-right:.5rem;
  }
  .fat-title{
    font-size: 14px;
  }
  .scrolly-chart-col-container{
    width: 250px;
  }
  .scrolly-chart-col-label{
    top: -50px;
  }
  .artist-explain-title{
    width: 100px;
  }
  .artist-expainer-row-artist{
    font-size: 10px;
    width: 80px;
  }
  .artist-central-search{
    width: 70px;
    font-size: 10px;
  }
  .artist-central-search-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size: 10px;
  }
  .artist-central-search-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    /*font-weight:500;*/
    font-size: 10px;
  }
  .artist-central-search-input::-moz-placeholder { /* Mozilla Firefox 19+ */
    /*font-weight:500;*/
    font-size: 10px;
  }
  .artist-central-search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    /*font-weight:500;*/
    font-size: 10px;
  }
  .artist-central-search-input::-ms-input-placeholder { /* Microsoft Edge */
    /*font-weight:500;*/
    font-size: 10px;
  }
  .artist-central-wu-tang-filter{
    display: none;
  }
  .swiper-slide-active{
    z-index: 1000;
  }
  .swiper-slide-active .swiper-slide-words{
    margin-top: 0px;
  }
  .artist-central-col-chart-col-artist-word{
    font-size: 10px;
  }
  .artist-central-col-chart-col-artist{
    font-size: 10px;
  }
  .artist-central-col-chart-col{
    margin-right: 5px;
  }
  .tsne-filters{
    display: none;
  }
  .tsne-search{
    margin: 0 auto;
  }
  .tsne-title-wrapper{}
  .tsne-fat-title{
    font-size: 22px;
    line-height: 1.5;
  }
}