/*
Theme Name: Nostalgia Music
Author: Nostalgia Music
Author URI: www.nostalgia-music.co.uk
Descrption: Nostalgia music catalogue resposnive website.
Version: 1.0
License: GNU General Public Licence v2 or later
Licence URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nostalgia
*/

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
  padding: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 1.25em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;

}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/*********************** ===== Tables ===== ***********************/

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*********************** ===== Basic ===== ***********************/

body {
  background: #fff url('img/bg/bg2.png') repeat fixed center;
  font-family: "Noto Sans";
}

h2 {
  margin: 0;
  font-size: 20px;
  text-align: center;
}

h3 {
  text-align: center;
}

p {
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 26px;
}

a {
  -webkit-transition: .15s ease;
  -moz-transition: .15s ease;
  transition: .15s ease;
  text-decoration: none;
}

.round {
    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius:  5px 20px 5px; /* top left, top right, bottom right */

  /* Firefox 1-3.6 */
  -moz-border-radius:  5px 20px 5px;

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius:  5px 20px 5px;

  /* Prevent background color leak outs */
  -webkit-background-clip: padding-box;
  -moz-background-clip:    padding;
  background-clip:         padding-box;

}

.site-menu > li > a:hover, .custom-pagination a:hover { background-color: #C03535; }

.site-menu > li > a:active, .custom-pagination a:active { background-color: #FFF; }

.sidebar {
  width: 360px;
  float: right;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/*********************** ===== Clears and floats ===== ***********************/

.cf:before, .cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.fl { float: left; }
.fr { float: right; }

/*********************** ===== Structure ===== ***********************/

.site-wrap {
  min-height: 100%;
  position: relative;
}

.container {
  width: 1200px;
  margin: 0 auto;
  min-height: 100%;
}

/*********************** ===== Header ===== ***********************/

.site-header {
  padding-top: 20px;
}

.site-header .nostalgia-logo {
  float: left;
  margin-left: 40px;
  margin-top: 40px;
}
.site-header .nostalgia-slider {
  float: right;
}

/*********************** ===== Forms ===== ***********************/

input,textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(0, 39, 59, 0.35);

}

input[type="submit"] {
  border: none;
  background: #151515;
  letter-spacing: 0.5px;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  /*padding: 15px;*/
    -webkit-transition: .15s ease;
  -moz-transition: .15s ease;
  transition: .15s ease;
}

input[type="submit"]:hover {
  background-color: #BA0005;
}

.search-form .screen-reader-text {
  display: none;
}

.search-form .search-field {
  padding: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #222;
  margin-bottom: 20px;
}

/*********************** ===== Navigation ===== ***********************/

.nav-menu { margin-top: 20px; }
.nav-wrap { background-color: #000; }
.nav-main-menu { position: relative;  }

.site-menu { margin: 0; padding: 0; font-family: "Noto Sans" }

.site-menu li { position: relative; list-style: none; }
.site-menu > li { float: left; font-size: 18px; letter-spacing: 1px; }
.site-menu > li > a { display: block; color: #fff; padding: 20px 20px; text-decoration: none; width: auto; text-transform: uppercase; }
.site-menu > li > a:hover {   }
.site-menu > li.current-menu-item { background-color: #C03535; }

.site-menu ul { display: none; position: absolute; width:250px; z-index: 99999;  margin: 0; top: 100%; background-color: #C03535; padding: 12px; }
.site-menu li li a { display: block; color: #000; text-decoration: none; padding: 10px; -webkit-transition: .01s ease; -moz-transition: .01s ease; transition: .01s ease }
.site-menu li li a:hover { background-color: rgba(255,255,255,.5); border-radius: 10px; color: #fff; font-size: 22px;}

.site-menu li:hover > ul {  display: block; }

/*--- mobile menu ---*/
.mob-nav-wrap { display: none; }
.mobile-nav { float: left; position: relative; }
.mobile-menu-anchor { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; background-color:  #C03535; color: #fff; }

.mob-nav-wrap .mobile-nav:hover .mob-menu { display: block; }

.mob-menu { margin: 0; padding: 0; position: absolute; top: 100%; width: 300px; max-height: 400px; overflow: hidden; z-index: 99999; background: #c03535; text-align: left; display: none; }
.mob-menu li { }
.mob-menu li a { color: #fff; padding: 15px; display: block; text-transform: uppercase; letter-spacing: 1px; }
.mob-menu li a:hover { background-color: rgba(255,255,255,.5); border-radius: 10px; color: #fff; font-size: 22px; }
.mob-menu li ul { display: none; }



/*********************** ===== News Content ===== ***********************/

.content-section {
  padding: 20px 0;
}

.content-wrapper {
  width: 100%;
  margin-right: -400px;
  float: left;
}

.main-content {
  margin-right: 400px;
}

/*********************** ===== News / blog posts ===== ***********************/

/* styles for Page and Portfolio */
.post, .portfolio, .about-section {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 20px;
  -webkit-box-shadow: 5px 6px 0px 0px rgba(0,0,0,0.13);
  -moz-box-shadow: 5px 6px 0px 0px rgba(0,0,0,0.13);
  box-shadow: 5px 6px 0px 0px rgba(0,0,0,0.13);
}

/* styles for Page and Portfolio */
.post-head, .post-head {
  text-align: center;
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: bold;
}

.post-title a {
  color: #000;
}

.post-image {
  margin-bottom: 20px;
  text-align: center;
}

.post-content img {
  width:100%;
}

.img-preview {
  width: 75%;
}

.post-read-more {
  text-align: center;
}

.post-read-more a {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 10px 40px;
  margin: 40px 0;
  font-size: 20px;
  text-transform: uppercase;
}

.post-read-more a:hover {
  background-color: #C03535;
}

.post .post-meta, .portfolio .post-meta {
  text-align: center;
  background-color: #11A999;
  color: #fff;
  padding: 10px 0;
}

.post-meta-wrap { margin-bottom: 20px; }

.post-meta a {
  color: #fff;
  font-weight: bold;
}

.post-meta a:hover {
  color: #000;
}

.meta-menu {
  display: inline-block;
}

.meta-menu:after {
  content: "/";
  padding: 0 10px;
}

.meta-menu:last-child:after {
  display: none;
}

/*********************** ===== About section ===== ***********************/

.about-section span {
  font-weight: bold;
  font-size: 22px;
}

/*********************** ===== Pagination ===== ***********************/

.search-field input { background-color: white; }

.custom-pagination { text-align: center; }
.custom-pagination span, .custom-pagination a {
  display: inline-block;
  background-color: #000;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}

.custom-pagination .current { background-color: #C03535; }

/*********************** ===== Portfolio ===== ***********************/

/*--- search section ---*/

.search-bar {
  width: 100%;
  margin-bottom: 30px;
}

.search-field-wrap {
  width: 100%;
  margin-right: -200px;
  float: left;
}

.search-area {
    /*margin-right: 200px; */
}

.search-area input[type=text] {
  background-color: white;
  color: #888;
  font-style: italic;
  font-size: 24px;
  width: 100%;
}

.search-button-wrap {
  width: 200px;
  float: right;
}

.search-button {

}

.search-button input[type=submit] {
  width: 100%;
  /*border-radius: 20px;*/
}

/*--- portfolio grid ---*/

.portfolio-table { display: block; width: 100%; overflow: hidden; }
/*.portfolio-table .break { display: block; margin-bottom: 20px; }*/

.catalogue-cell {
  float: left;
  /*width: 230px; */
  width: 16%;
/*  height: auto;
  margin-right: 12px; */
  margin: 2% 2% 20px;
  padding-bottom: 24px;
  text-align: center;
}

.catalogue-cell:hover {
  box-shadow: 0px 0px 30px rgba(100,100,100,0.2);
  -moz-box-shadow: 0px 0px 30px rgba(100,100,100,0.2);
  -webkit-box-shadow: 0px 0px 30px rgba(100,100,100,0.2);
}
/*.catalogue-cell:nth-of-type(5n) { margin-right: 0px; }*/
.catalogue-cell:hover { background-color: rgba(255, 255, 255, 0.5); }

.catalogue-cell img { margin-top: 5px; max-width: 100%; }

.catalogue-cell h2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  padding-top: 10px;
  margin: 0px 10px 0px 10px;
}

.catalogue-cell .genre { background-color: #11a999; width: 80%; margin: 0px 20px 0px 20px; }

.catalogue-cell .genre a {
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
  padding: 0px;
  font-style: italic;
  letter-spacing: 2px;
  margin: 10px;

}

.catalogue-cell .genre p {
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
  padding: 0px;
  font-style: italic;
  letter-spacing: 2px;
  margin: 10px;
}

.catalogue-cell h2 a {
  color: #000;
  line-height: 0px;
}

/*--- format pre-existing portfolio content ----*/

.product-packshot { display: block; text-align: center; margin-bottom: 10px; }

/* hide unneeded */
.post-content .hidden { display: none; }

/* format text content */
.product-info { display: block; text-align: center; }
.post-content p { display: block; }
#product-info2 { display: block; }
#product-info2 #product-info1 span { color: #000 !important; }
#product-info1[style] { display: block !important; position: relative !important; top: 0 !important; left: 0 !important; width: auto !important; }
.related-pd-button { display: none; }

/* portfolio buy buttons */
a.itunes, a.amazon2, a.spotify, a.google {
  width: 100%;
  height: 60px;
  color: #FFF;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
}

a.itunes {
    background: #000000 url("img/buttons/itunes.png") center/425px 50px no-repeat scroll;
}

a.amazon2 {
    background: #fdc608 url("img/buttons/amazon.png") center/425px 50px no-repeat scroll;
}

a.spotify {
    background: #f7ffe4 url("img/buttons/spotify.png") center/425px 50px no-repeat scroll;
}

a.google {
    background: #ff9900 url("img/buttons/googleplay.png") center/425px 50px no-repeat scroll;
}

/* format portfolio google audio player */
.codeart-google-mp3-player, .align, .mp3holder { width: 100% !important; min-height: 35px !important; margin-top: 10px; }
.codeart-google-mp3-player embed { width: 100% !important; }

/* format portfolio tables */
.table-responsive .easy-table { width: 100% !important; }
.post-content table tbody tr span { color: black !important; }
.post-content table { width: 100% !important; }

/*********************** ===== Contact ===== ***********************/

.contact-content {
  background-color: white;
  padding: 40px;
}

.response_msg_pos, .response_msg_neg {
  text-align: center;
  padding: 10px 0;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

.response_msg_pos  {
  background-color: #177d2e;
}

.response_msg_neg {
  background-color: #9a191c;
}

.contact-content .contact-us {
  padding: 40px;
  margin-bottom: 20px;
}

.contact-content .contact-us p {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

.captcha img {
  margin: 20px 0;
}

input[name=subject] {
  border-bottom: 0;
}

/*********************** ===== Social ===== ***********************/

/* General */

.post-share-menu .fa { font-size: 2em; color: #fff; text-align: center; line-height: 150%; height: 50px; width:50px; margin-right: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.post-share-menu .fa:hover { transform: scale(1.1); }

/* Share */

.post-share-box { margin: 20px 0; }
.post-share-box::before, .post-share-box::after { border-top: #000 solid 1px; width: 100%; }

.post-share-menu { list-style-type: none; margin: 0; padding: 0; padding: 20px 0; }
.post-share-menu .share-text { margin-right: 10px; }

.share-text, .comments-number { text-transform: uppercase; font-size: 20px; margin-top: 12px; }

.share-facebook-button .fa { background-color: #3b5998; }
.share-twitter-button .fa { background-color: #55ACEE; }
.share-google-button .fa { background-color: #dd4b39; }
.share-youtube-button .fa { background-color: #e52d27; }

/* Social Links */
.share-center { text-align: center; }
.share-center a:last-child .fa { margin-right: 0; }

/*********************** ===== Widgets ===== ***********************/

.widget { margin-bottom: 40px; padding: 40px; background: #fff; }

/* recent posts widget */

.widget_recent_entries_extended ul {
  list-style: none;
  padding: 0px;
  text-align: center;
}

.widget_recent_entries_extended li {

}

.widget_recent_entries_extended li::after {
  content: " ";
  border-bottom: #000 solid 1px;
  width: 50%;
  display: block;
  margin: 10px 25%;
}

.widget_recent_entries_extended li:last-child {
  border-bottom: none;
}

.widget_recent_entries_extended a {
  color: #000;
  font-size: 20px;
  text-transform: uppercase;
}

.widget_recent_entries_extended a:hover {
  color: #C03535;
  font-weight: bold;
}

.widget_recent_entries_extended span {
  margin: 10px 0px;
  color: #888;
  font-size: 13px;
}

/*********************** ===== Search page ===== ***********************/

.archive {
  margin-top: 20px;
}

.archive_wrap {
  background-color: #fff;
}

h4 {
  font-size: 30px;
  margin: 10px;
  text-align: center;
  color: #C03535;
}


/*********************** ===== Comments ===== ***********************/

.comments-area { background-color: #fff; padding: 30px; }

.listed-comments { margin: 0; padding: 0; list-style: none; }
.listed-comments li {  }

.comment-body { border-bottom: 1px solid rgba(0, 39, 59, 0.35); padding: 30px; }
.comment-body .comment-author { display: inline-block; }
.comment-body .avatar { margin-right: 20px; }
.comment-body .fn { text-transform: uppercase; font-size: 14px; }
.comment-body .fn a { color: #000; }
.comment-body .fn::after { content: ' \2022'; color: rgba(0, 39, 59, 0.35); }
.comment-body .says { display: none; }
.comment-body .comment-metadata { display: inline-block; font-size: 12px; }
.comment-body .comment-metadata a { color: rgba(0, 39, 59, 0.35); }
.comment-body .comment-awaiting-moderation { font-style: italic; margin-top: 20px; background-color: #ffc8c8; text-align: center; }
.comment-body .comment-content { margin: 20px 0; }
.comment-body .comment-reply-link { background-color: #11a999; color: #fff; padding: 4px 10px; font-size: 12px; text-transform: uppercase; }

.children { list-style: none; }

/* Repond */
.comment-respond { position: relative; padding: 10px 30px 30px; }
.comment-respond .comment-reply-title { position: relative; text-align: left; text-transform: uppercase; color: #C03535; padding: 20px 0; }
.comment-respond .comment-reply-title a { color: #000; }
.comment-respond .comment-reply-title small a { color: #c03535; }
.comment-respond .comment-reply-title::after { content:""; width: 100px; position: absolute; border-bottom: 1px solid #000; bottom: 0; left: 0; }

.comment-respond .logged-in-as { margin: 20px 0px; }

.comment-respond .comment-form-comment label { font-size: 14px; text-transform: uppercase; font-weight: bold; }


/*********************** ===== Footer ===== ***********************/

.footer-content {
  background: #151515;
  padding: 40px 0px;
  width: 100%;
}

.colophon {
  color: white;
  text-align: center;
}

.colophon a {
  color: #C03535;
}

/*********************** ===== Slider ===== ***********************/

.nostalgia-slider { width: 80%;}

/*********************** ===== Responsive Queries ===== ***********************/

@media screen and (min-width: 960px) and (max-width: 1200px) {
  /* main container width */
  .container { width: 960px; }
}

@media screen and (max-width: 960px) {
  /* main container width */
  .container { width: 100%; padding-left: 20px; padding-right: 20px; }

  /* mobile menu */
  .nav-main-menu { display: none; }
  .mob-nav-wrap { display: block; }

  /* portfolio cell width */
  .catalogue-cell { width: 21%; }

  /* header setup */
  .nostalgia-logo { text-align: center; float: none !important; margin: 0 !important; }
  .nostalgia-slider { text-align: center; float: none !important; margin: 15px 0 0 0 !important; width: auto; }

  /* sidebar */
  .sidebar { float: none; clear: both; width: 100%; margin-top: 40px }

  /* main content */
  .main-content { margin-right: 0 !important; }
  .content-wrapper { float: none; }
}

@media screen and (max-width: 768px) {
  /* portfolio cell width */
  .catalogue-cell { width: 29.33%; }
  .site-header .nostalgia-slider { margin-top: 15px; }

    /* number of comments */
  .comments-number { display: none; }
}

@media screen and (max-width: 530px) {
  /* portfolio cell width */
  .catalogue-cell { width: 46%;  }

  /* portfolio search setup */
  .search-button-wrap { margin-top: 10px; width: 100%; float: none; }
  .search-button input[type=submit] { margin-top: 10px; }

  /* header setup */
  .nostalgia-slider { display: none; }

  /* buy buttons */
  a.itunes {
    background: #000 url("http://waryearsmusic.com/wp-content/uploads/2015/06/iTunes_square.png") center/60px 60px no-repeat scroll;
  }

  a.amazon2 {
    background: #fdc608 url("http://waryearsmusic.com/wp-content/uploads/2015/06/Amazon_square.png") center/60px 60px no-repeat scroll;
  }

  a.spotify {
    background: #f7ffe4 url("http://waryearsmusic.com/wp-content/uploads/2015/06/Spotify2_square.png") center/60px 60px no-repeat scroll;
  }

  a.google {
      background: #ff9900 url("http://waryearsmusic.com/wp-content/uploads/2015/06/GooglePlay_square.png") center/60px 60px no-repeat scroll;
  }

  .share-text { font-size: 12px; margin-top: 16px; }
}

@media screen and (max-width: 320px) {
  /* portfolio cell width */
  .catalogue-cell { width: 96%; }
}