/* CSS Reset */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Core variables */
/**
 * Variables
*/
/* Font-size
========================================================================== */
/* Typography */
/* Breakpoints */
/* Paths */
/* Grid setup */
/* Colour palette 
$black: #000;
$white: #fff;
$light-gray: #f1f1f1;

$body-background-color: #333;
$foreground-color: #fff;
$caption-color: #464646;
$accent-color: #999;
$link-color: #ec1f4e;

 Colors
  ========================================================================== 

// Note : some of those aren't used. @todo: Clean up
$cl-white: white;
$cl-gray-light-2: #c1c1c1;
$cl-gray-light: #9b9b9b;
$cl-gray-med: #515151;
$cl-gray: $cl-gray-med;
$cl-gray-dark: #313131;

$cl-pink: #c40496;

$cl-link-visited: #609;
$cl-link: #62aee7;
$cl-link-hover: #585858;

$primary-color: #008CBA;
$secondary-color: #e7e7e7;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #de5059;


$light-gray: $cl-gray-light;
$medium-gray: $cl-gray-med;
$dark-gray: $cl-gray-dark;

$body-background: $cl-white;
$body-font-color: black;
$black : black;
$white : white;


$body-background: $cl-white;
$body-font-color: black;

/* Components */
/* Other globals
    ========================================================================== 

  $xsmall-font-size: 0.625rem;
  $small-font-size: 0.75rem; 
  $medium-font-size: 0.875rem; 
  $large-font-size: 1.25rem; 
  $xlarge-font-size: 1.5rem; 
  $xxlarge-font-size: 2.5rem; 

  $contrast-warnings: false; // important, stopps flooding the output of webpack

  // Rounded corner sizes
  //$brand-round: 5px;
  //$full-round: 200px;

  // 1. Global
  // ---------

  $global-font-size: 100%;
  $global-width: rem-calc(1200);
  $global-lineheight: 1.5;
  $foundation-palette: (
    primary: #1779ba,
    secondary: #767676,
    success: #3adb76,
    warning: #ffae00,
    alert: #cc4b37,
  );
  $light-gray: #e6e6e6;
  $medium-gray: #cacaca;
  $dark-gray: #8a8a8a;
  $black: #0a0a0a;
  $white: #fefefe;
  $body-background: $white;
  $body-font-color: $black;
  $body-font-family: "akzidenz-grotesk","Helvetica Neue",Helvetica, sans-serif;
  $heading-font-family: $body-font-family; // in use
  $body-antialiased: true;
  $global-margin: 1rem;
  $global-padding: 1rem;
  $global-position: 1rem;
  $global-weight-normal: normal;
  $global-weight-bold: bold;
  $global-radius: 5px;
  $global-menu-padding: 0.7rem 1rem;
  $global-menu-nested-margin: 1rem;
  $global-text-direction: ltr;
  $global-flexbox: true;
  $global-prototype-breakpoints: false;
  $global-button-cursor: auto;
  $global-color-pick-contrast-tolerance: 0;
  $print-transparent-backgrounds: true;


  $print-hrefs: true;

  // 2. Breakpoints
  // --------------

  $breakpoints: (
    small: 0,
    medium: 640px,
    large: 1366px,
    xlarge: 1920px,
    xxlarge: 3640px,
  );
  $print-breakpoint: large;
  $breakpoint-classes: (small medium large);


  // 3. The Grid
  // -----------

  $grid-row-width: $global-width;
  $grid-column-count: 12;
  $grid-column-gutter: (
    small: 20px,
    medium: 30px,
  );
  $grid-column-align-edge: true;
  $grid-column-alias: 'columns';
  $block-grid-max: 8;

  // 4. Base Typography
  // ------------------

  $header-font-family: $body-font-family;
  $header-font-weight: $global-weight-normal;
  $header-font-style: normal;
  $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
  $header-color: inherit;
  $header-lineheight: 1.4;
  $header-margin-bottom: 0.5rem;
  $header-styles: (
    small: (
      'h1': ('font-size': 24),
      'h2': ('font-size': 20),
      'h3': ('font-size': 19),
      'h4': ('font-size': 18),
      'h5': ('font-size': 17),
      'h6': ('font-size': 16),
    ),
    medium: (
      'h1': ('font-size': 48),
      'h2': ('font-size': 40),
      'h3': ('font-size': 31),
      'h4': ('font-size': 25),
      'h5': ('font-size': 20),
      'h6': ('font-size': 16),
    ),
  );
  $header-text-rendering: optimizeLegibility;
  $small-font-size: 80%;
  $header-small-font-color: $medium-gray;
  $paragraph-lineheight: 1.6;
  $paragraph-margin-bottom: 1rem;
  $paragraph-text-rendering: optimizeLegibility;
  $code-color: $black;
  $code-font-family: $font-family-monospace;
  $code-font-weight: $global-weight-normal;
  $code-background: $light-gray;
  $code-border: 1px solid $medium-gray;
  $code-padding: rem-calc(2 5 1);
  $anchor-color: $primary-color;
  $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
  $anchor-text-decoration: none;
  $anchor-text-decoration-hover: none;
  $hr-width: $global-width;
  $hr-border: 1px solid $medium-gray;
  $hr-margin: rem-calc(20) auto;
  $list-lineheight: $paragraph-lineheight;
  $list-margin-bottom: $paragraph-margin-bottom;
  $list-style-type: disc;
  $list-style-position: outside;
  $list-side-margin: 1.25rem;
  $list-nested-side-margin: 1.25rem;
  $defnlist-margin-bottom: 1rem;
  $defnlist-term-weight: $global-weight-bold;
  $defnlist-term-margin-bottom: 0.3rem;
  $blockquote-color: $dark-gray;
  $blockquote-padding: rem-calc(9 20 0 19);
  $blockquote-border: 1px solid $medium-gray;
  $cite-font-size: rem-calc(13);
  $cite-color: $dark-gray;
  $cite-pseudo-content: '\2014 \0020';
  $keystroke-font: $font-family-monospace;
  $keystroke-color: $black;
  $keystroke-background: $light-gray;
  $keystroke-padding: rem-calc(2 4 0);
  $keystroke-radius: $global-radius;
  $abbr-underline: 1px dotted $black;

  // 5. Typography Helpers
  // ---------------------

  $lead-font-size: $global-font-size * 1.25;
  $lead-lineheight: 1.6;
  $subheader-lineheight: 1.4;
  $subheader-color: $dark-gray;
  $subheader-font-weight: $global-weight-normal;
  $subheader-margin-top: 0.2rem;
  $subheader-margin-bottom: 0.5rem;
  $stat-font-size: 2.5rem;

  */
/* Mixins, helpers and functions */
/**
 * Helper mixins



// Media queries
@mixin bp($point) {
  @if $point == large {
    @media (min-width: 1280px) { @content; }
  } @else if $point == small {
    @media (max-width: 1279px) { @content; }
  }
}
*/
/* Fonts */
/* Core variables */
.xxsmall-font-size {
  font-size: 0.625rem;
}

.xsmall-font-size {
  font-size: 0.625rem;
}

.small-font-size {
  font-size: 0.75rem;
}

.medium-font-size {
  font-size: 0.875rem;
}

.default-font-size {
  font-size: 1rem;
}

.large-font-size {
  font-size: 1.375rem;
}

.xlarge-font-size {
  font-size: 1.5rem;
}

.xxlarge-font-size {
  font-size: 1.5rem;
}

.hero-font-size {
  font-size: 3.5rem;
}

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
  font-size: 1rem;
  font-weight: 400;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  color: #0063bf;
  text-decoration: none;
}

.is-hidden {
  display: none;
}

.is-centering-child-vertically {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*.is-inlined {
  display: inline-block;
}

/*

/* 
// used in very few places : footer mostly
/*a.decorated {
      border-bottom: solid 1px #fff;
      //display: inline;
      padding-bottom: 1px;
}

h1, h2, h3, h4, h5, h6 {
    padding:0;
    margin:0;
    font-family: $heading-font-family;
    font-weight: bold;
}

// hide lazy loaded blocks for non-js users
.lazy {
    display: none;
}

/* Layout


.main-content {
    //padding-top: rem-calc(18);
}


.l-collapse-small {
    @include breakpoint(small only) {
        margin: 0 1rem;
    }
}
/
$xxs: 0.025rem; // 4px
$xs: 0.5rem; // 8px
$s: 1rem; // 16px
$m: 1.5rem; // 24px
$l: 2rem; // 32px
$xl: 2.5rem; // 40px
$xxl: 4rem; // 64px
$xxxl: 5rem; // 80px

// name, desktop, mobile
$spaceamounts: (
  (0, 0, 0),
  (xs, $xs, $xxs),
  (s, $s, $xs),
  (m, $m, $s),
  (l, $l, $m),
  (xl, $xl, $l),
  (xxl, $xxl, $xl),
  (xxxl, $xxxl, $xxl)
);
$sides: (top, bottom, left, right);



.is-borderless {
  border: none !important;
}

.is-helptext {
  font-size: $small-font-size;
  color: $dark-gray;
}

.is-centering-child-vertically {
  display: flex;
  align-items: center;
  justify-content: center;
}




.is-hidden {
  display: none;
}

.is-full-rounded {
  border-radius: 50%;
  border: 1px solid $medium-gray;
}

.is-warning {
  color: get-color(alert);
}

.is-inline-blocking-children {
  > * {
    display: inline-block;
  }
}

*/
/* Sprites */
/* Vendor */
/* Components */
/* Demo Page styles */
/* ===================================
* Generic Styles for Smalltown
====================================== */
header {
  border-bottom: 1px solid #f0f0f0;
}

main,
nav, .banner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}

main {
  margin: 2rem auto;
}

nav {
  display: grid;
  grid-template-rows: [row1-start] 6rem [row1-end];
  align-content: center;
}
nav > div {
  align-self: center;
}
nav .social-links {
  justify-self: end;
}
nav .social-links a {
  margin-right: 1rem;
}
nav .social-links a:last-child {
  margin-right: 0;
}
nav .social-links .soundcloud img {
  margin-bottom: 4px;
}
nav a {
  color: #c40496;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-right: 2rem;
}

.desktop-nav {
  grid-template-columns: [col1] auto [col2] 1fr [col3] auto [end];
}
@media only screen and (max-width: 959px) {
  .desktop-nav {
    display: none;
  }
}

.mobile-nav {
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [end];
}
@media only screen and (min-width: 960px) {
  .mobile-nav {
    display: none;
  }
}
.mobile-nav .mobile-menu-dropdown {
  justify-self: end;
}

.mobile-menu-dropdown h2 {
  cursor: pointer;
}

.closed .mobile-menu {
  height: 0px;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.mobile-menu {
  position: absolute;
  top: 97px;
  left: 0;
  width: 100%;
  height: 94%;
  z-index: 9;
  background: rgba(240, 240, 240, 0.94);
}
.mobile-menu .social-links,
.mobile-menu .main-menu {
  padding-bottom: 1rem;
  text-align: center;
  margin: 0 auto;
}
.mobile-menu .social-links a,
.mobile-menu .main-menu a {
  color: #c40496;
  margin-top: 1rem;
}
.mobile-menu .main-menu a {
  display: block;
}
.mobile-menu .social-links {
  margin-top: 10%;
}

.search-form {
  display: inline-block;
  position: relative;
  padding: 0;
  margin: 0;
  min-width: 20px;
  min-height: 20px;
}
.search-form input {
  position: absolute;
  z-index: 8;
  padding: 0;
  margin: 0;
}
.search-form input[type=text] {
  top: -5px;
  border: none;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  cursor: pointer;
  transition: width 0.2s ease 0s, height 0.2s ease 0s, border 0.2s ease 0s;
  -webkit-transition: width 0.2s ease 0s;
  -moz-transition: width 0.2s ease 0s;
  -ms-transition: width 0.2s ease 0s;
  -o-transition: width 0.2s ease 0s;
}
.search-form input[type=text]:focus {
  text-indent: 0;
  width: 236px;
  height: 32px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 0 32px 0 32px;
}
.search-form input[type=submit] {
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  border: none;
  cursor: pointer;
  outline: none;
  background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4zMSAxNS42OTFhNy40ODggNy40ODggMCAwIDAgNC4zNjYtMS40MDZsNC42MjkgNC42M2MuMjE1LjIxNC40OTguMzIxLjguMzIxLjYzNSAwIDEuMDg0LS40ODggMS4wODQtMS4xMTNhMS4wNiAxLjA2IDAgMCAwLS4zMTItLjc4MWwtNC42LTQuNjFhNy40OCA3LjQ4IDAgMCAwIDEuNTQzLTQuNTVjMC00LjEzMS0zLjM3OS03LjUxLTcuNTEtNy41MUM0LjE5LjY3Mi44IDQuMDQuOCA4LjE4MmMwIDQuMTMgMy4zOCA3LjUxIDcuNTEgNy41MXptMC0xLjYyYy0zLjIyMiAwLTUuODg4LTIuNjY3LTUuODg4LTUuODkgMC0zLjIyMiAyLjY2Ni01Ljg4OCA1Ljg4OS01Ljg4OCAzLjIyMiAwIDUuODg4IDIuNjY2IDUuODg4IDUuODg5IDAgMy4yMjItMi42NjYgNS44ODgtNS44ODggNS44ODh6IiBmaWxsPSIjMzMzIi8+PC9zdmc+) no-repeat;
  background-size: 20px 20px;
}

.banner img {
  max-width: 100%;
  max-height: 100%;
}

.grid-masonry {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  grid-auto-rows: 20px;
}

article h1 {
  font-size: 1.375rem;
  color: #000;
  font-weight: 500;
  margin: 0.25em 0;
}
article a time {
  color: #c40496;
  font-weight: 500;
}
article .single-page-main-img {
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 100%;
}
article .content {
  padding-bottom: 1.5rem;
  color: #666;
}
article .content > div a {
  text-decoration: underline;
}
article .content iframe {
  width: 100%;
  height: 100%;
}

.artists-list {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  grid-template-rows: auto;
}
.artists-list article {
  width: 420px;
  text-align: center;
}
.artists-list .artist-img-container {
  background-color: #9b9b9b;
  height: 202px;
  background-size: cover;
  background-position: 50%;
}

.releases {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.releases article {
  width: 310px;
}
.releases img {
  border: 1px solid #f0f0f0;
}

.search-results li {
  margin-bottom: 1rem;
}
.search-results .img-result {
  display: flex;
  align-items: center;
}
.search-results .img-result img {
  margin-right: 1rem;
}

.paginator {
  margin: 1rem 0;
  text-align: center;
}
.paginator li {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.875rem;
}
.paginator li a {
  color: #f0f0f0;
}
.paginator .index {
  color: #000;
  display: block;
  text-transform: uppercase;
  font-size: 0.875rem;
}
.paginator .current {
  text-decoration: underline;
}

/*
************************************************************************** *
*  MODULES
************************************************************************** *
========================================================================== 

.sts-logo {
    @include sprite($sts-logo);
}
.search {
    @include sprite($search);
}
.instagram {
    @include sprite($instagram);
}
.twitter {
    @include sprite($twitter);
}
.facebook {
    @include sprite($facebook);
}
.soundcloud {
    @include sprite($soundcloud);
}
.spotify {
    @include sprite($spotify);
}
.close-button {
    @include sprite($close-button);
}
.hamburger-menu {
    @include sprite($menu);
}
.youtube {
    @include sprite($youtube);
}

.mailing img {
    margin-top:-6px;
}
.reveal-modal {
    h2 {
        font-size: 32px;
        text-align:center;
    }
    input {
        padding:.5rem 1.5rem;
        font-size: 18px;
        border:1px solid $cl-gray-light;
        border-right:none;
        &::-webkit-input-placeholder {  color:$cl-gray-light }   
        &::-moz-placeholder  {  color:$cl-gray-light }   
        &:-ms-input-placeholder {  color:$cl-gray-light }  
        &:-moz-placeholder {  color:$cl-gray-light }
    }
    .button {
        font-size: 18px;
        background-color:black;
        color:$cl-white;
        border:none;
    }
}
.header, .mobile-header {
    margin-top: 14px;
    margin-bottom: 6px;
}

.mobile-header {
    min-height: 2.8rem;
    .search-form {
        margin: .8rem 0 0 1rem;
    }
    .menu {
    //    margin: .8rem 1rem 0 0;
    }
    .sts-logo {
        margin: 0 auto;
    }
}

.main-menu.menu{

    a {
        padding: 0.4rem;
        color: $cl-pink;    
        font-size: $small-font-size;
        text-transform: uppercase;
        font-weight: bold;
    }
}
.search-form {
    position: relative;
    padding: 0;
    margin: 0;
    min-width: 24px;
    min-height: 19px;
    input {
        position: absolute;
        z-index: 8;
        padding: 0;
        margin: 0;
    }
    input[type="text"] {
        top: -5px;
        border: none;
        width: 24px; 
        height: 19px;
        text-indent: -9999px;
        cursor: pointer;
        transition: width 0.2s ease 0s, height 0.2s ease 0s, border 0.2s ease 0s ;
        -webkit-transition: width 0.2s ease 0s;
        -moz-transition: width 0.2s ease 0s, ;
        -ms-transition: width 0.2s ease 0s, ;
        -o-transition: width 0.2s ease 0s, ;
    }
    input[type="text"]:focus {
        text-indent: 0;
        width: 236px;
        height: 32px;
        outline: none;
        border: 1px solid $cl-gray-light-2;
        padding: 0 32px 0 32px;
    }
    input[type="submit"] {
        top: 2px;
        left: 6px;
        width: 22px;
        height: 17px;
        background-color: #fff;
        cursor: pointer;
        outline: none;
    }
}

.search-n-social {
    li {
        margin-right: 0.8rem;
        &:last-child {
            margin-right: none;
        }
    }
}

.breadcrumbs {
    display: none;
}

#mobile-menu {
    position: absolute;
    top: 50px;
    width: 100%;
    height: 94%;
    z-index: 9;
    background: rgba(240,240,240, 0.94);
    .search-n-social, .main-menu {
        padding-bottom: 1rem;a
        text-align: center;
        margin: 0 auto;
        a {
            font-size: 1rem;
        }
    }
    .main-menu {
        li {
            display:block !important;
            margin-top: 5%;
        }
        a {
            color: $cl-pink;    

        }
    }
    .search-n-social {
        margin-top: 10%;
        li {
            margin-top: 0;
        }
    }
}

// defining basic zinnia styles
.entry-info {
    text-align: center;
    abbr {
        color: $cl-pink;
        border-bottom: none;
        cursor: pointer;
    }
}

.entry-title {
    line-height: 0.75;
    text-align: center;
    font-weight: 400;
    a {
        color: #000;
        font-size: $large-font-size;
    }
}

.entry-body {
    padding-top: 1rem;
}

.entry-content p {
    margin:rem-calc(16) 0;
    line-height:1.4;
}

.archive .entry-info {
    text-align: left;
}

.detailed-view-simple {
    padding-top: 1.5rem;
    .entry-info, .entry-title {
        text-align: left;
    }
}

.detailed-view-sidebar {
    padding-top: 2.8125rem;
    .hentry {
        border-left: 2px dotted $cl-gray-light;
        padding: 0 0 1rem 0.9375rem;
    }
    .entry-body {
        padding-bottom: 1rem;
        border-bottom: 2px dotted $cl-gray-light;
    }
    .entry-title {
        text-align: center;
    }
    iframe {
        width: auto;
    }
    .hentry:last-child .entry-body {
        border-bottom: none;
    }
}

.articles-list {
    margin-top: 1rem;
    iframe {
        max-width: 100%;
        height: auto;
    }
    .hentry {
        padding: 1.5rem 0;
        border-bottom: 2px dotted $cl-gray-light;
    }
    .columns .hentry:first-child {
        padding-top: 0;
    }   
    @include breakpoint(small only) {
        .entry-content, .continue-reading {
            padding: 0 10%;
        }
        .entry-header {
            padding-top: 1rem;
        }
    }

}
.nojs-arrangement.articles-list li {
    float:left;
}

.artist-item {
    h3 {
        font-weight: 400;
        text-align: center;
        padding: 2px;
        color: #000;
        line-height: 1.2;
    }
}
.artist-img-container {
    background-color: $cl-gray-light;
    height: 150px;
    background-size: cover;
    background-position:center;
}
.artist-details {
    .columns {
        padding: 1rem 0 1rem 0;
    }
    .artist-header {
        min-height: 80px; // important so right column stuff is aligned
        text-align: center;
    }
    .entry-title {
        min-height: 56px;
        line-height: 1.2;
    }
}
/*
.release-img-container {
    height: 300px;
    background-size: cover;
    background-position:center;
}
.release-item {
    text-align:center;
}
.campaign {
        background-position: 50% center;
        background-size: cover;
        height: 300px;
        @include breakpoint(medium down) {
            height: 160px;
        }
    .intro-text {
        text-align: center;
        padding-top:3.5rem;
    }
    .entry-content p {
        font-size: $xxlarge-font-size;
        margin:0;
    }
    .entry-content {
        color: #fff;
    }
    .entry-content a {
        color: #fff;
    }
    iframe {
        width: 85%;
        background-color: rgba(255, 255, 255, 0.6);
    }
    iframe[src*="soundcloud.com"] {
        width: 100%;
        max-height: 300px;
        margin-top: -4.5rem;
    }
}
.outlined {
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.paginator  {
    margin: 1rem 0;
    text-align: center;
    li {
        display: inline-block;
        padding: 4px 8px;
        font-size: $medium-font-size;
        a {
            color: $cl-gray-light;
        }
    }
    .index {
        color: #000;
        display: block;
        text-transform: uppercase;
        font-size: $medium-font-size;
    }
    .current {
        text-decoration: underline;
    }
}

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    opacity: 0.8;
}

.footer {
    margin-top: 1rem;
    border-top: 2px dotted $cl-gray-light;
    ul {
        padding: 2rem 0 1rem 0;
        font-size: $small-font-size;
    }
    li {
        display: inline-block;
        margin-right: 1rem;
    }
    li:last-child {
        float: right;
        margin-right: 0;
    } 
    a {
        color: $cl-gray-light;
    }
    @include breakpoint(small only) {
        li {
            display: block;
            margin-right: 0;
        }
        li:last-child {
            float: none;
        }
    }
}
*/