@font-face {
  font-family: 'spotify-circular';
  src: url('https://d2j0f09xqmv212.cloudfront.net/fonts/CircularSpUIT-Light.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'spotify-circular';
  src: url('https://d2j0f09xqmv212.cloudfront.net/fonts/CircularSpUIT-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'spotify-circular';
  src: url('https://d2j0f09xqmv212.cloudfront.net/fonts/CircularSpUIT-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Whitney';
  src: url('/fonts/Whitney-Light.eot'); /* IE9 Compat Modes */
  src: url('/fonts/Whitney-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Whitney-Light.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Whitney-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Whitney-Light.svg#8ded3776ecf328b599f345385da981be') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Whitney';
  src: url('/fonts/Whitney-Book.eot'); /* IE9 Compat Modes */
  src: url('/fonts/Whitney-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Whitney-Book.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Whitney-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Whitney-Book.svg#f28578544bcd221f22d5dc42685e92f2') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'Whitney';
  src: url('/fonts/Whitney-Bold.eot'); /* IE9 Compat Modes */
  src: url('/fonts/Whitney-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/Whitney-Bold.woff') format('woff'), /* Modern Browsers */
       url('/fonts/Whitney-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/Whitney-Bold.svg#ea4cb46c3a1f8ac3e9553c5155895e33') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  600;
}

/**
 * Typography
 *
 * Please consider typographic consistency when you create new elements.
 * 99.99% of all type elements should be covered by some combination of the classes below:
 *
 * - Headers (`h1`-`h5`)
 * - Standard body/paragraph text
 * - Standard tags: `code`<br>
 *   <span class="text-warning">`strong`, `em` and `small` are NOT SUGGESTED OR SUPPORTED.</span>
 * - Standard classes: `lead`, `text-muted`, `text-warning`, `text-danger`, and `text-success`
 * - Article classes (used on biograph or reviews where readability is more important): `article-text`.
 *
 * The css attributes that you should most certainly not override are:
 *
 * - `font-family`
 * - `font-size`
 * - `color`
 * - `line-height`
 * - `font-weight`
 * - `letter-spacing`
 *
 * If you feel like you need to do something that cannot be done with some combination of these options, please reach out to the design team to see if we should include it in GLUE.
 *
 * Styleguide 20.1
 */
/**
 * Links
 *
 * Text links should be underlined on hover. However. Regular text underlining
 * is ugly so the underline is accomplished with a `border-bottom`. This means
 * that text links cannot have `display: block;` If you need them to behave like
 * a block, you must wrap them.
 *
 * <span class="text-warning">If you want a link that isn't text related, just
 * override the bottom border.</span>
 *
 * Markup: <!-- Correct -->
 * <div style="max-width: 200px"><a href="#">A link like a block of text. Hooray!</a></div>
 * <!-- Incorrect -->
 * <a style="display: block; max-width: 200px" href="#">A link styled like a block. This is just totally wrong. Boo!</a>
 *
 * Styleguide 20.1.1
 */
/**
 * Body Text
 *
 * This is standard text.
 *
 * Markup: <p class="{$modifiers}">To be, or not to be, that is the <a href="#">question</a>: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep No more; and by a sleep, to say we end The Heart-ache, and the thousand Natural shocks That Flesh is heir to? 'Tis a consummation Devoutly to be wished. To die, to sleep, To sleep, perchance to Dream; Aye, there's the rub.</p>
 *
 * .lead             - Used for a leading paragraph.
 *
 * Styleguide 20.1.2
 */
p {
  margin: 0 0 10px;
  cursor: default;
}
.lead {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 24px;
}
small,
.small {
  font-size: 100%;
}
strong,
.strong {
  font-weight: 400;
}
em,
.em {
  font-style: normal;
}
cite {
  font-style: normal;
}
/**
 * Article Text
 *
 * This is standard text for article pages like reviews or bios.
 *
 * Markup: <div class="article-text">
 *   <p class="{$modifiers}">To be, or not to be, that is the <a href="#">question</a>: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep No more; and by a sleep, to say we end The Heart-ache, and the thousand Natural shocks That Flesh is heir to? 'Tis a consummation Devoutly to be wished. To die, to sleep, To sleep, perchance to Dream; Aye, there's the rub.</p>
 * </div>
 *
 * .lead             - Used for a leading paragraph.
 *
 * Styleguide 20.1.3
 */
.article-text p {
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 12px;
}
.article-text .lead {
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 36px;
}
/**
 * Text modifiers
 *
 * Markup:
 *   <p class="{$modifiers}">Some short text with <a href="#">a link</a> inside</p>
 *   <a class="{$modifiers}" href="#">Some link</a>
 *
 * .text-secondary    - Secondary text - this modifies ONLY LINKS!
 * .text-meta         - Meta text
 * .text-nav          - Nav text
 * .text-muted        - Muted text
 * .text-warning      - Warning text
 * .text-danger       - Danger text
 * .text-success      - Success text
 * .inverted-text     - Inverted text
 *
 * Styleguide 20.1.4
 */
.text-secondary a,
a.text-secondary {
  color: $secondary-text-color;
}
a.text-secondary:hover,
.text-secondary a:hover,
a.text-secondary:focus,
.text-secondary a:focus {
  color: $secondary-text-color-hover;
}
.text-meta {
  font-family: $font-replacement;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $secondary-text-color;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.text-nav {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 14px;
}
.text-muted {
  color: $secondary-text-color;
}
.text-muted a,
a.text-muted {
  color: $secondary-text-color;
}
a.text-muted:hover,
.text-muted a:hover,
a.text-muted:focus,
.text-muted a:focus {
  color: $secondary-text-color-hover;
}
.text-warning {
  color: $primary-text-color;
}
.text-warning a,
a.text-warning {
  color: $primary-text-color;
}
a.text-warning:hover,
.text-warning a:hover,
a.text-warning:focus,
.text-warning a:focus {
  color: $primary-accent-color--dark;
}
.text-danger {
  color: #CD1A2B;
}
.text-danger a,
a.text-danger {
  color: #eb626f;
}
a.text-danger:hover,
.text-danger a:hover,
a.text-danger:focus,
.text-danger a:focus {
  color: #f18f98;
}
.text-success {
  color: $primary-accent-color;
}
.text-success a,
a.text-success {
  color: #6feb9c;
}
a.text-success:hover,
.text-success a:hover,
a.text-success:focus,
.text-success a:focus {
  color: #9cf1ba;
}
.inverted-text {
  color: $secondary-text-color;
  -webkit-font-smoothing: antialiased;
}
.inverted-text a {
  color: $main-view-bg-color;
}
.inverted-text a:hover {
  color: #000000;
}
/**
 * Alignment classes
 *
 * Markup:
 *   <p class="{$modifiers}">Some short text that is aligned</p>
 *
 * .text-left   - Left aligned text
 * .text-right  - Right aligned text
 * .text-center - Centered text
 *
 * Styleguide 20.1.5
 */
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
/**
 * Truncating too long text
 *
 * Markup:
 *   <p class="one-line">Stand in front of the computer screen give attitude so intently stare at the same spot under the bed, make muffins hopped up on goofballs under the bed. Play time claw drapes throwup on your pillow yet burrow under covers yet nap all day climb leg, destroy couch. Stick butt in face chew iPad power cord rub face on everything yet leave dead animals as gifts chew iPad power cord or chase imaginary bugs or lick butt. Intently stare at the same spot. </p>
 *
 * Styleguide 20.1.6
 */
.one-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/**
 * Headings
 *
 * Styleguide 20.2
 */
/**
 * Default headings
 *
 * All HTML headings, `&lt;h1&gt;` through `&lt;h5&gt;` are available.
 *
 * Markup:
 *   <h1>I am Cat heading h1</h1>
 *   <h2>I am Cat heading h2</h2>
 *   <h3>I am Cat heading h3</h3>
 *   <h4>I am Cat heading h4</h4>
 *   <h5>I am Cat heading h5</h5>
 *
 * Styleguide 20.2.1
 */
/**
 * Headings class names
 *
 * Changed header class names to be less tied to a specific element and more tied to a style/size.
 *
 * Markup:
 *   <div class="hdr-xxl">I am a cat heading!</div>
 *   <div class="hdr-xl">I am a cat heading!</div>
 *   <div class="hdr-l">I am a cat heading!</div>
 *   <div class="hdr-m">I am a cat heading!</div>
 *   <div class="hdr-sm">I am a cat heading!</div>
 *   <div class="hdr-xsm">I am a cat heading!</div>
 *
 * Styleguide 20.2.2
 */
/**
 * Multi-line headings
 *
 * Markup:
 *   <h1>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h1>
 *   <h2>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h2>
 *   <h3>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h3>
 *   <h4>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h4>
 *   <h5>This is a super long heading that will wrap in any situation you can be sure of that. It just goes on and on and on. Its sooooo absurd.</h5>
 *
 * Styleguide 20.2.3
 */
.hdr-xxl,
.hdr-xl,
.hdr-l,
.hdr-m,
.hdr-sm,
.hdr-xsm,
h1,
h2,
h3,
h4,
h5 {
  color: $primary-text-color;
  font-weight: 600;
  cursor: default;
}
.hdr-xxl a,
.hdr-xl a,
.hdr-l a,
.hdr-m a,
.hdr-sm a,
.hdr-xsm a,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a {
  color: $primary-text-color;
}
.hdr-xxl,
.hdr-xl,
.hdr-l,
h1,
h2,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.hdr-m,
.hdr-sm,
h4,
h5 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h1,
.hdr-xxl {
  font-family: $font-replacement;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: $primary-text-color;
  text-transform: normal;
}
h2,
.hdr-xl {
  font-family: $font-replacement;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: $primary-text-color;
  text-transform: normal;
}
h3,
.hdr-l {
  font-family: $font-replacement;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: $primary-text-color;
  text-transform: normal;
}
h4,
.hdr-m {
  font-family: $font-replacement;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: normal;
  font-weight: 400;
  color: $primary-text-color;
  text-transform: normal;
}
h5,
.hdr-sm {
  font-family: $font-replacement;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.015em;
  font-weight: 200;
  color: $primary-text-color;
  text-transform: normal;
}
.hdr-m small,
.hdr-m .small,
.hdr-sm small,
.hdr-sm .small,
h4 small,
h4 .small,
h5 small,
h5 .small {
  font-size: 12px;
}
/**
 * Lists
 *
 * Styleguide 20.4
 */
/**
 * Unordered lists
 *
 * Markup:
 *   <ul class="{$modifiers}">
 *     <li>Item 1</li>
 *     <li>Item 2</li>
 *     <li>Item 3</li>
 *   </ul>
 *
 * .list-unstyled   - Unstyled keeps list items block level, just removes default browser padding and list-style
 * .list-inline     - Inline turns list items into inline-block
 *
 * Styleguide 20.4.1
 */
/**
 * Ordered lists
 *
 * Markup:
 *   <ol>
 *     <li>Item 1</li>
 *     <li>Item 2</li>
 *     <li>Item 3</li>
 *   </ol>
 *
 * Styleguide 20.4.2
 */
/**
 * Nested lists
 *
 * Markup:
 *   <ol>
 *     <li>
 *       Item 1
 *       <ul>
 *         <li>Nested item 1</li>
 *         <li>Nested item 2</li>
 *         <li>Nested item 3</li>
 *       </ul>
 *     </li>
 *     <li>Item 2</li>
 *     <li>Item 3</li>
 *   </ol>
 *
 * Styleguide 20.4.2
 */
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
/**
 * Description Lists
 *
 * Markup:
 *   <dl class="{$modifiers}">
 *     <dt>Description lists</dt>
 *     <dd>A description list is perfect for defining terms.</dd>
 *     <dt>Euismod</dt>
 *     <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
 *     <dd>Donec id elit non mi porta gravida at eget metus.</dd>
 *   </dl>
 *
 * .dl-horizontal   - Horizontal layout
 *
 * Styleguide 20.4.3
 */
dl {
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 20px;
}
dd {
  margin-left: 10px;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.dl-horizontal dd:after {
  clear: both;
}
.dl-horizontal.dl-wide dt {
  width: 250px;
}
.dl-horizontal.dl-wide dd {
  margin-left: 270px;
}
/**
 * Miscellaneous
 *
 * Styleguide 20.9
 */
/**
 * Abbreviations and acronyms
 *
 * Markup: <p>An abbreviation of the word attribute is <abbr title="attribute" class="{$modifiers}">attr</abbr>.</p>
 *
 * .initialism  - Uppercase and slightly smaller font-size
 *
 * Styleguide 20.9.1
 */
abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted $primary-border-color;
}
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
/**
 * Blockquotes
 *
 * Markup:
 *   <blockquote class="{$modifiers}">
 *     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 *     <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
 *   </blockquote>
 *
 * .pull-right   - right-aligned blockquote
 *
 * Styleguide 20.9.2
 */
blockquote,
.blockquote {
  padding: 10px 20px;
  margin: 0 0 13.6px;
  border-left: 3px solid $primary-border-color;
  line-height: 1.25;
}
blockquote small,
.blockquote small,
blockquote .small,
.blockquote .small {
  display: block;
  line-height: 20px;
  color: $secondary-text-color;
}
blockquote small:before,
.blockquote small:before,
blockquote .small:before,
.blockquote .small:before {
  content: '\2014 \00A0';
}
blockquote.pull-right,
.blockquote.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid $primary-border-color;
  border-left: 0;
}
blockquote.pull-right p,
.blockquote.pull-right p,
blockquote.pull-right small,
.blockquote.pull-right small,
blockquote.pull-right .small,
.blockquote.pull-right .small {
  text-align: right;
}
blockquote.pull-right small:before,
.blockquote.pull-right small:before,
blockquote.pull-right .small:before,
.blockquote.pull-right .small:before {
  content: '';
}
blockquote.pull-right small:after,
.blockquote.pull-right small:after,
blockquote.pull-right .small:after,
.blockquote.pull-right .small:after {
  content: '\00A0 \2014';
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}
/**
 * Addresses
 *
 * Markup:
 *   <address>
 *     <strong>Spotify AB</strong><br>
 *     Birger Jarlsgatan 61<br>
 *     113 56 Stockholm<br>
 *     <abbr title="Phone">P:</abbr> (123) 456-7890
 *   </address>
 *   <address>
 *     <strong>Full Name</strong><br>
 *     <a href="mailto:#">first.last@example.com</a>
 *   </address>
 *
 * Styleguide 20.9.4
 */
address {
  display: block;
  margin-bottom: 20px;
  font-style: normal;
  line-height: 20px;
}

/**
 * Code
 *
 * Styleguide 20.7
 */
/**
 * Inline
 *
 * Wrap inline snippets of code
 *
 * Markup:
 *   For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 *
 * Styleguide 20.7.1
 */
/**
 * Block
 *
 * Markup:
 *   <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
 *
 * Styleguide 20.7.2
 */
code,
pre {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: $secondary-text-color;
}
code {
  padding: 2px 4px;
  font-size: 85%;
  background-color: $secondary-view-bg-color;
  white-space: nowrap;
  border-radius: 4px;
}
pre {
  padding: 10px;
  background-color: $secondary-view-bg-color;
  color: $secondary-text-color;
  display: block;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
}
pre code {
  font-size: 13px;
  color: $secondary-text-color;
}
pre.prettyprint {
  margin-bottom: 20px;
}
pre code {
  padding: 0;
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
  background-color: transparent;
  border: 0;
}
