/*! 27-02-2023 4:30:21 PM */

/******************************************************************
Site Name: Sample project
Stylesheet: Main Stylesheet

******************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/* line 6, ../scss/_reset.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
/* line 27, ../scss/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 31, ../scss/_reset.scss */
body {
  line-height: 1;
}

/* line 34, ../scss/_reset.scss */
ol, ul {
  list-style: none;
}

/* line 37, ../scss/_reset.scss */
blockquote, q {
  quotes: none;
}

/* line 40, ../scss/_reset.scss */
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* line 45, ../scss/_reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/******************************************************************
Site Name: Sample project
Stylesheet: Mixins & Constants Stylesheet

******************************************************************/
/*********************
CLEARFIXIN'
*********************/
/* line 12, ../scss/_mixins.scss */
.clearfix {
  zoom: 1;
}
/* line 14, ../scss/_mixins.scss */
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
/* line 15, ../scss/_mixins.scss */
.clearfix:after {
  clear: both;
}

/*********************
COLORS
*********************/
/*********************
FONTS
*********************/
/* line 1, ../scss/_general.scss */
body,
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* line 8, ../scss/_general.scss */
img,
iframe {
  max-width: 100%;
  height: auto;
}

/* line 14, ../scss/_general.scss */
a:hover,
a:active,
a:visited,
a:focus {
  text-decoration: none;
  outline: none;
}

/* line 22, ../scss/_general.scss */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* line 28, ../scss/_general.scss */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
blockquote {
  -webkit-font-smoothing: antialiased;
}

/* line 42, ../scss/_general.scss */
em {
  font-style: italic;
}

/* line 46, ../scss/_general.scss */
strong {
  font-weight: 700;
}


/* line 13, ../scss/_homepage.scss */
body.home .copy-wrap {
  width: 100%;
  margin: 40px 0;
}
@media (min-width: 768px) {
  /* line 13, ../scss/_homepage.scss */
  body.home .copy-wrap {
	max-width: 80%;
	margin: 60px auto;
  }
}
@media (min-width: 1200px) {
  /* line 13, ../scss/_homepage.scss */
  body.home .copy-wrap {
	max-width: 600px;
	margin: 100px auto;
  }
}
/* line 27, ../scss/_homepage.scss */
body.home .copy-wrap h1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  color: #0567DD;
  text-transform: uppercase;
  margin: 0 0 15px;
  text-align: center;
}
@media (min-width: 768px) {
  /* line 27, ../scss/_homepage.scss */
  body.home .copy-wrap h1 {
	font-size: 26px;
	line-height: 26px;
  }
}
@media (min-width: 1200px) {
  /* line 27, ../scss/_homepage.scss */
  body.home .copy-wrap h1 {
	margin: 0 0 25px;
	font-size: 40px;
	line-height: 40px;
  }
}
/* line 48, ../scss/_homepage.scss */
body.home .copy-wrap p {
  font-family: 'Merriweather', serif;
  font-weight: 400;
  color: #161616;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}
@media (min-width: 1200px) {
  /* line 48, ../scss/_homepage.scss */
  body.home .copy-wrap p {
	font-size: 16px;
  }
}

/* line 1, ../scss/specific.scss */
.divs {
  position: absolute;
  transform-origin: 0% 0%;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 670px;
}
@media (min-width: 768px) {
  /* line 1, ../scss/specific.scss */
  .divs {
	width: 760px;
	height: 970px;
  }
}
@media (min-width: 1200px) {
  /* line 1, ../scss/specific.scss */
  .divs {
	width: 1162px;
	height: 772px;
  }
}

/* line 21, ../scss/specific.scss */
.ballMasks {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

/* line 30, ../scss/specific.scss */
.divOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1069px;
  overflow: hidden;
  pointer-events: none;
  display: none;
}
@media (min-width: 768px) {
  /* line 30, ../scss/specific.scss */
  .divOverlay {
	width: 100%;
	height: 1024px;
  }
}
@media (min-width: 1200px) {
  /* line 30, ../scss/specific.scss */
  .divOverlay {
	width: 100%;
	height: 920px;
  }
}

/* line 51, ../scss/specific.scss */
.activeBall {
  cursor: pointer;
}

/* line 55, ../scss/specific.scss */
.inactiveBall {
  cursor: default;
}

/* line 59, ../scss/specific.scss */
.divCircle {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
}

/* line 72, ../scss/specific.scss */
.divCircleBorder {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #4100F5;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
}

/* line 85, ../scss/specific.scss */
.divCircleContainer {
  position: absolute;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* line 93, ../scss/specific.scss */
.imgCircle {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 101%;
  height: 101%;
  user-select: none;
}

/* line 106, ../scss/specific.scss */
.imgCircleBorder {
  position: absolute;
  background-color: #4100F5;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #4100F5;
  left: 50%;
  top: 50%;
  width: 101%;
  height: 101%;
  opacity: 0;
  user-select: none;
}

/* line 120, ../scss/specific.scss */
.textContainer {
  position: absolute;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  user-select: none;
}

/* line 132, ../scss/specific.scss */
.innerText {
  position: absolute;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 80%;
  height: auto;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

/* line 146, ../scss/specific.scss */
.headline {
  font-family: "spotifyBold";
  color: #000000;
}

/* line 151, ../scss/specific.scss */
.bodyCopy {
  font-family: "spotifyBold";
  color: #4100F5;
}

/* line 157, ../scss/specific.scss */
#divContainerOverlay {
  pointer-events: auto;
  display: none;
}
/* line 161, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer {
  position: absolute;
  display: inline-block;
  top: 0px;
  width: 258px;
  height: 1200px;
  transform-origin: 50% 50%;
  transform: translate(-50%, 0%);
  left: 50%;
}
@media (min-width: 768px) {
  /* line 161, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer {
	width: 625px;
	height: 1000px;
  }
}
@media (min-width: 1200px) {
  /* line 161, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer {
	width: 1148px;
	height: 900px;
  }
}
/* line 182, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
/* line 194, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 .overlayHeadlineNumber {
  font-family: "spotifyBold";
  position: relative;
  font-size: 75px;
  margin-top: 38px;
  /* margin-left:29px; */
  color: #ffffff;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 194, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .overlayHeadlineNumber {
	font-size: 80px;
	line-height: 60px;
	margin-top: 30px;
	/* margin-left:59px; */
  }
}
@media (min-width: 1200px) {
  /* line 194, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .overlayHeadlineNumber {
	font-size: 84px;
	line-height: 100px;
	margin-top: 40px;
	/* margin-left:120px; */
  }
}
/* line 218, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 .onSpotifyAlone {
  font-family: "spotifyMedium";
  position: relative;
  width: 241px;
  height: auto;
  font-size: 26px;
  margin-top: 5px;
  /* margin-left:29px; */
  line-height: 1.4;
  color: #ffffff;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 218, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .onSpotifyAlone {
	width: 481px;
	height: auto;
	font-size: 32px;
	line-height: 44px;
	margin-top: 15px;
  }
}
@media (min-width: 1200px) {
  /* line 218, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .onSpotifyAlone {
	width: 358px;
	height: auto;
	font-size: 38px;
	line-height: 44px;
	margin-top: 5px;
  }
}
/* line 247, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 .numberOfArtists {
  font-family: "spotifyBook";
  position: relative;
  width: 241px;
  height: 110px;
  font-size: 24px;
  margin-top: 48px;
  /* margin-left:29px; */
  line-height: 1.4;
  color: #ffffff;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 247, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .numberOfArtists {
	width: 456px;
	height: 110px;
	font-size: 24px;
	line-height: 30px;
	margin-top: 42px;
  }
}
@media (min-width: 1200px) {
  /* line 247, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .numberOfArtists {
	width: 358px;
	height: 140px;
	font-size: 30px;
	line-height: 35px;
	margin-top: 70px;
	/* margin-left:120px; */
  }
}
/* line 280, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 .backButtonThreshold {
  position: relative;
  object-fit: contain;
  font-family: "spotifyBook";
  margin-top: 21px;
  /*  margin-left:19px; */
  width: 94px;
  height: 32px;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.78;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  user-select: none;
  opacity: 0;
  cursor: pointer;
}
@media (min-width: 768px) {
  /* line 280, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .backButtonThreshold {
	margin-top: 52px;
	/* margin-left:59px; */
  }
}
@media (min-width: 1200px) {
  /* line 280, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .backButtonThreshold {
	margin-top: 55px;
	/* margin-left:120px; */
  }
}
/* line 310, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 .backButtonThreshold .backArrowThreshold {
  position: relative;
  width: 17px;
  height: 16px;
  top: 2px;
  margin-right: 5px;
}
@media (min-width: 768px) {
  /* line 310, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .backButtonThreshold .backArrowThreshold {
	width: 22px;
	height: 23px;
	top: 6px;
	margin-right: 10px;
  }
}
@media (min-width: 1200px) {
  /* line 310, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box1 .backButtonThreshold .backArrowThreshold {
	margin-right: 10px;
	width: 22px;
	height: 23px;
  }
}
/* line 333, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box1 .backButtonThreshold:hover {
  font-family: "spotifyBold";
}
/* line 343, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box2 {
  position: absolute;
  display: inline-block;
  width: auto;
  height: auto;
  top: 375px;
  left: 0px;
  /* left: 29px; */
}
@media (min-width: 768px) {
  /* line 343, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 {
	top: 450px;
	/* left: 73px; */
	left: 10px;
  }
}
@media (min-width: 1200px) {
  /* line 343, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 {
	top: 203px;
	/* left: 573px; */
	left: 442px;
  }
}
/* line 371, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box2 .percentageContainerMask {
  position: relative;
  top: 0px;
  width: 255px;
  height: 338px;
  overflow: hidden;
}
@media (min-width: 768px) {
  /* line 371, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask {
	top: 45px;
	height: 371px;
	width: 218px;
  }
}
@media (min-width: 1200px) {
  /* line 371, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask {
	width: 303px;
	height: 430px;
	top: 16px;
  }
}
/* line 393, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer {
  position: relative;
  width: 255px;
  height: 521px;
  top: 280px;
}
@media (min-width: 768px) {
  /* line 393, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer {
	width: 218px;
	top: 318px;
  }
}
@media (min-width: 1200px) {
  /* line 393, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer {
	top: 360px;
	width: 303px;
  }
}
/* line 410, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageText {
  position: relative;
  margin-top: 21px;
  width: 255px;
  height: 47px;
  font-family: "spotifyBold";
  font-size: 50px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.39;
  letter-spacing: normal;
  text-align: right;
  color: #ffffff;
}
@media (min-width: 768px) {
  /* line 410, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageText {
	height: 47px;
	width: 218px;
	font-size: 60.3px;
  }
}
@media (min-width: 1200px) {
  /* line 410, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageText {
	width: 303px;
	height: 70px;
	font-size: 90px;
  }
}
/* line 438, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageImg {
  position: relative;
  width: 255px;
  height: 300px;
  background-color: aqua;
}
@media (min-width: 768px) {
  /* line 438, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageImg {
	width: 218px;
	height: 348px;
  }
}
@media (min-width: 1200px) {
  /* line 438, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageImg {
	width: 303px;
	height: 430px;
  }
}
/* line 457, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box2 .percentageYears {
  position: relative;
  width: 255px;
  height: 50px;
  font-family: "spotifyBold";
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.56;
  letter-spacing: -1px;
  text-align: right;
  color: #ffffff;
  margin-top: 7px;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 457, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageYears {
	width: 218px;
	font-size: 22px;
	margin-top: 55px;
  }
}
@media (min-width: 1200px) {
  /* line 457, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageYears {
	width: 303px;
	font-size: 32px;
	margin-top: 25px;
  }
}
/* line 487, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 {
  position: absolute;
  /* float:left; */
  display: inline-block;
  width: auto;
  /* height:auto; */
  height: 450px;
  top: 760px;
  /* left:26px; */
  left: 0px;
  /* BD 2-21-23   Styling for the bar graph*/
}
@media (min-width: 768px) {
  /* line 487, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 {
	top: 435px;
	/* left:327px; */
	left: 0px;
	height: 410px;
  }
}
@media (min-width: 1200px) {
  /* line 487, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 {
	/* left:903px; */
	/* left:768px; */
	left: 442px;
	top: 96px;
	height: 530px;
  }
}
/* line 519, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .axisCaption {
  position: relative;
  font-family: "spotifyBook";
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  /* or 222% */
  display: flex;
  align-items: center;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-top: 36px;
  margin-left: 0px;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 519, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axisCaption {
	font-size: 14px;
	margin-top: 22px;
	margin-left: 4px;
  }
}
@media (min-width: 1200px) {
  /* line 519, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axisCaption {
	font-size: 18px;
	margin-top: 66px;
	margin-left: 8px;
  }
}
/* line 549, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .axis {
  position: relative;
  float: left;
  display: inline-block;
  width: auto;
  height: auto;
  opacity: 0;
}
/* line 568, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .axis .axisMax {
  position: relative;
  width: 26px;
  height: 20px;
  font-family: "spotifyBook";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.17;
  letter-spacing: -0.5px;
  text-align: right;
  color: #ffffff;
  margin-right: 10px;
}
@media (min-width: 768px) {
  /* line 568, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axis .axisMax {
	font-size: 14px;
	width: 37.5px;
  }
}
@media (min-width: 1200px) {
  /* line 568, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axis .axisMax {
	font-size: 18px;
	width: 51px;
  }
}
/* line 596, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .axis .axisMin {
  position: relative;
  float: left;
  width: 26px;
  height: 20px;
  font-family: "spotifyBook";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.17;
  letter-spacing: -0.5px;
  text-align: right;
  color: #ffffff;
  margin-top: 225px;
  margin-right: 10px;
}
@media (min-width: 768px) {
  /* line 596, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axis .axisMin {
	font-size: 14px;
	margin-top: 284px;
	width: 37.5px;
  }
}
@media (min-width: 1200px) {
  /* line 596, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axis .axisMin {
	font-size: 18px;
	margin-top: 399px;
	width: 51px;
  }
}
/* line 626, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .axis .axisLine {
  position: relative;
  width: 1px;
  height: 245px;
  left: 37px;
  top: 0px;
  background-color: #ffffff;
}
@media (min-width: 768px) {
  /* line 626, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axis .axisLine {
	height: 310px;
	top: -6px;
	left: 47px;
  }
}
@media (min-width: 1200px) {
  /* line 626, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .axis .axisLine {
	height: 430px;
	left: 60px;
	top: -6px;
  }
}
/* line 650, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer {
  position: relative;
  float: left;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 5px;
  top: 10px;
}
@media (min-width: 768px) {
  /* line 650, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer {
	margin-left: 15px;
	top: -33px;
  }
}
@media (min-width: 1200px) {
  /* line 650, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer {
	margin-left: 15px;
	top: -27px;
  }
}
/* line 671, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask {
  position: relative;
  margin-top: 0px;
  width: 30px;
  /* height:212.6px; */
  height: 255px;
  overflow: hidden;
  /* border:1px solid green; */
}
@media (min-width: 768px) {
  /* line 671, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask {
	width: 55px;
	height: 357px;
  }
}
@media (min-width: 1200px) {
  /* line 671, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask {
	width: 60px;
	height: 471px;
  }
}
/* line 690, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph {
  position: relative;
  width: 30px;
  /* height:212.6px; */
  height: 521px;
  top: 220px;
}
@media (min-width: 768px) {
  /* line 690, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph {
	width: 55px;
	top: 280px;
	/* height:304px; */
  }
}
@media (min-width: 1200px) {
  /* line 690, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph {
	width: 60px;
	top: 441px;
  }
}
/* line 709, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .barGraphText {
  position: relative;
  margin-top: 71px;
  width: 100%;
  height: 14px;
  font-family: "spotifyBook";
  font-size: 9px;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.39;
  letter-spacing: normal;
  text-align: right;
  color: #ffffff;
}
@media (min-width: 768px) {
  /* line 709, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .barGraphText {
	height: 20px;
	font-size: 13px;
  }
}
@media (min-width: 1200px) {
  /* line 709, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .barGraphText {
	text-align: right;
	height: 20px;
	font-size: 13px;
  }
}
/* line 737, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .lastBarNumber {
  font-size: 9.5px;
}
@media (min-width: 768px) {
  /* line 737, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .lastBarNumber {
	font-size: 13px;
  }
}
@media (min-width: 1200px) {
  /* line 737, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .lastBarNumber {
	font-size: 15px;
  }
}
/* line 749, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .barGraphImg {
  position: relative;
  width: 40px;
  height: 430px;
  background-color: aqua;
}
@media (min-width: 768px) {
  /* line 749, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .barGraphImg {
	width: 60px;
  }
}
@media (min-width: 1200px) {
  /* line 749, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .barGraphImg {
	width: 70px;
  }
}
/* line 766, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .barGraph .lastBar {
			   /*  width:40px;

				@media (min-width: $tabletBreak) {      
					width: 171px;//60               
				}
				
				@media (min-width: $desktopBreak) {                            
					width: 185px;//60
				} */
}
/* line 779, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphMask .lastBar {
				/* width:40px;

				@media (min-width: $tabletBreak) {      
					width: 171px;//60               
				}
				
				@media (min-width: $desktopBreak) {                            
					width: 185px;//60
				} */
}
/* line 794, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphYears {
  position: relative;
  margin-top: 4px;
  width: 100%;
  height: 25px;
  font-family: "spotifyBook";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.27;
  letter-spacing: 0px;
  text-align: right;
  color: #ffffff;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 794, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphYears {
	font-size: 16px;
  }
}
@media (min-width: 1200px) {
  /* line 794, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .barGraphYears {
	text-align: right;
	font-size: 20px;
  }
}
/* line 823, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .barGraphContainer .lastBarYear {
  line-height: 2.27;
  font-size: 12px;
}
@media (min-width: 768px) {
  /* line 823, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .lastBarYear {
	line-height: 2.27;
	font-size: 16px;
  }
}
@media (min-width: 1200px) {
  /* line 823, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .barGraphContainer .lastBarYear {
	line-height: 2.27;
	font-size: 20px;
  }
}
/* line 839, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .percentageText {
  position: absolute;
  float: unset;
  display: unset;
  width: auto;
  height: 100px;
  margin-left: 0px;
  top: 333px;
  left: 0px;
  opacity: 0;
}
@media (min-width: 768px) {
  /* line 839, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText {
	position: relative;
	float: left;
	display: inline-block;
	margin-left: 20px;
	top: 30%;
	left: unset;
  }
}
@media (min-width: 1200px) {
  /* line 839, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText {
	position: relative;
	float: left;
	display: inline-block;
	margin-left: 19px;
	top: 5%;
	left: unset;
  }
}
/* line 869, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .percentageText .percentageVal {
  position: relative;
  width: auto;
  height: auto;
  font-family: "spotifyBold";
  text-align: right;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.39;
  letter-spacing: normal;
  text-align: right;
  color: #ffffff;
  display: none;
  margin-top: 10px;
}
@media (min-width: 768px) {
  /* line 869, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText .percentageVal {
	text-align: left;
	font-size: 32px;
	display: block;
  }
}
@media (min-width: 1200px) {
  /* line 869, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText .percentageVal {
	text-align: left;
	font-size: 45px;
	display: block;
  }
}
/* line 900, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .percentageText .percentageValMobile {
  position: relative;
  width: auto;
  height: auto;
  font-family: "spotifyBold";
  text-align: right;
  font-size: 26px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.39;
  letter-spacing: normal;
  text-align: right;
  color: #ffffff;
  display: block;
  margin-top: 60px;
}
@media (min-width: 768px) {
  /* line 900, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText .percentageValMobile {
	display: none;
  }
}
@media (min-width: 1200px) {
  /* line 900, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText .percentageValMobile {
	display: none;
  }
}
/* line 927, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .box3 .percentageText .increaseText {
  position: relative;
  width: auto;
  height: auto;
  font-family: "spotifyBold";
  text-align: right;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.39;
  letter-spacing: normal;
  text-align: right;
  color: #ffffff;
  display: none;
  margin-top: 10px;
}
@media (min-width: 768px) {
  /* line 927, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText .increaseText {
	text-align: left;
	font-size: 24px;
	display: block;
	margin-top: 15px;
	line-height: 24px;
  }
}
@media (min-width: 1200px) {
  /* line 927, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .box3 .percentageText .increaseText {
	text-align: left;
	font-size: 28px;
	display: block;
	margin-top: 17px;
	line-height: 28px;
  }
}
/* line 966, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .legalThreshold {
  position: absolute;
  width: 245px;
  height: 22px;
  left: 8px;
  top: 950px;
  object-fit: contain;
  opacity: 0;
  font-family: "spotifyBook";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
  margin-top: 50px;
}
@media (min-width: 768px) {
  /* line 966, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .legalThreshold {
	margin-top: 0px;
	left: 5px;
	top: 950px;
	width: 610px;
	font-size: 12px;
  }
}
@media (min-width: 1200px) {
  /* line 966, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .legalThreshold {
	left: 6px;
	top: 756px;
	width: 1140px;
	font-size: 12px;
  }
}
/* line 1003, ../scss/specific.scss */
#divContainerOverlay .gutteredContainer .legalThresholdAstrix {
  position: absolute;
  width: 10px;
  height: 22px;
  left: 0px;
  top: 950px;
  object-fit: contain;
  opacity: 0;
  font-family: "spotifyBook";
  font-size: 9px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  color: #ffffff;
}
@media (min-width: 768px) {
  /* line 1003, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .legalThresholdAstrix {
	left: 0px;
	top: 950px;
	font-size: 9px;
  }
}
@media (min-width: 1200px) {
  /* line 1003, ../scss/specific.scss */
  #divContainerOverlay .gutteredContainer .legalThresholdAstrix {
	left: 0px;
	top: 756px;
	font-size: 11px;
  }
}


@media (max-width: 767px) {
  /* line 2, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer {
	width: calc(100% - 60px);
  }
  /* line 6, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box1 {
	display: block;
	position: relative;
  }
  /* line 11, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box1 .numberOfArtists {
	width: 100%;
	height: inherit;
  }
  /* line 16, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box2 {
	position: relative;
	display: block;
	padding-top: 30px;
	top: inherit;
	margin: 0 auto;
  }
  /* line 23, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask {
	width: 100%;
  }
  /* line 25, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer {
	width: 100%;
  }
  /* line 27, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageText {
	width: 100%;
  }
  /* line 30, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageContainerMask .percentageContainer .growthPercentageImg {
	width: 100%;
  }
  /* line 35, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box2 .percentageYears {
	width: 100%;
  }
  /* line 39, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .box3 {
	position: relative;
	display: block;
	padding-top: 10px;
	top: inherit;
	margin: 0 auto;
  }
  /* line 48, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .legalThresholdAstrix {
	display: none;
  }
  /* line 51, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .legalThreshold {
	position: relative;
	width: 100%;
	height: initial;
	top: inherit;
	clear: both;
  }
  /* line 57, ../scss/threshold-mobile.scss */
  #divContainerOverlay .gutteredContainer .legalThreshold:before {
	content: "*";
	position: absolute;
	top: 0px;
	left: -6px;
  }
}

/*# sourceMappingURL=style.css.map */