@import url(https://fonts.googleapis.com/css?family=Roboto:400,500m,300italic,300,400italic,700,700italic,500italic,500|Roboto+Condensed:400,400italic,700,700italic);

* {
	border-radius: 0 !important;
}

html,body { font-size: 100%; }
body {
	color: #333332;
  background-image: url(/custom/img/bg.jpg);
  background-repeat: no-repeat;
  background-color: #E6E1D4;
  background-size: cover;
  background-attachment: fixed;
  /*border-top: 5px solid #B34334;*/
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  line-height: 1.4;
}
.main { padding: 1em 0; }

/* #region Headings */
    h1,h2,h3, h4 {
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
    } 
	h2 {
        margin: 0.3em 0 0.81111em;
        color: #B34334;
        font-size: 2.25em;
        line-height: 1.111111111111111;
	}
	h3 {
		color: #B34334;
	}
	h4 {
		
	}
	.page-heading {
		margin-top: 1.12em;
		font-size: 1.875em;
		font-weight: 400;
	}
	.panel-heading {
		color: inherit;
	}
	.page-header {
		margin: 0;
		padding: 0;
		border: none;
	}
	h2 > small {
		color: inherit;
		display: block;
		font-weight: 300;
		margin-top: 0.2em;
		opacity: 0.7;
	}
	.search-results h2 {
		margin-top: 0.3em;
	}
/* #endregion */

/* #region Links */
              	  a { color: #B34334; }
	a:hover,a:focus { color: #8c3529; }

	h2 a {
		color: inherit;
		border-bottom: 1px dotted #B34334;
	}
	h2 a:hover,h2 a:focus {
		border-bottom: none;
		text-decoration: none;
	}
/* #endregion */

/* #region Buttons */
	.btn {
		border-radius: 0;
        font-family: 'Roboto Condensed', sans-serif;
        text-transform: uppercase;
	}
	.btn-default {
		color: #333332;
        background-color: #fff;
        border-color: #fff #fff #aaa;
        border-width: 0 0 3px;
        border-bottom-color: #aaa;
	}
	.btn-default:hover,.btn-default:focus {
		color: #fff;
        background-color: #aaa;
        border-color: #aaa;
	}
	.btn-link {
		color: #B35900;
	}
	.btn-link:hover,.btn-link:focus {
		color: #8c3529;
	}
	.btn-primary {
		color: #333332;
        background-color: #fff;
        border-color: #fff #fff #333332;
        border-width: 0 0 3px;
        border-bottom-color: #B34334;
	}
	.btn-primary:hover,.btn-primary:focus {
		color: #fff;
        background-color: #B34334;
        border-color: #B34334;
	}
	.search-results .btn-toggle {
		margin-right: 1em;
	}
/* #endregion */

/* #region Navs */
	.nav-pills {
		margin-bottom: 2em;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		background-color: rgba(255,255,255,0.5);
	}
	.nav-pills > li > a {
		border-radius: 0;
		position: relative;
		background-color: transparent;
	}
	.nav-pills > li > a:focus, .nav-pills > li > a:hover {
		background-color: #fff;
	}
	.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
		background-color: #4f4943;
		color: #fff;
	}
	.nav-pills > li.active > a:after {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		/*border-color: rgba(136, 183, 213, 0);*/
		border-top-color: #4f4943;
		border-width: 10px;
		margin-left: -10px;
	}
	
	.product-information .tab-content {
		padding: 1em;
		background-color: #fff;
	}
	.product-information .nav-tabs > li > a, .product-information .nav-tabs > li.active > a, .product-information .nav-tabs > li.active > a:focus, .product-information .nav-tabs > li.active > a:hover {
		border: none;
		border-radius: 0;
	}

	.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
		background-color: #A62121;
		border-color: #A62121;
	}
	.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
		background-color: #ffffff;
		color: #A62121;
	}
/* #endregion */

/* #region Forms */
	.form-control {
		border-color: #d6cec7;
		border-radius: 0;
	}
	.form-control:focus {
		border-color: #7c1919;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(166, 33, 33, 0.5);
		outline: 0 none;
	}
	.input-group-addon {
		background-color: #ded8d2;
		color: rgba(0, 0, 0, 0.2);
		border-color: #d6cec7;
		border-radius: 0;
	}
	.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn,
	.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
		border-radius: 0;
	}
	input::-webkit-input-placeholder { font-weight: 300; color: rgba(84,73,62,.5)!important; }
	input::-moz-placeholder          { font-weight: 300; color: rgba(84,73,62,.5)!important; }
	input:-moz-placeholder           { font-weight: 300; color: rgba(84,73,62,.5)!important; }/* Older versions of Firefox */
	input:-ms-input-placeholder      { font-weight: 300; color: rgba(84,73,62,.5)!important; }
	
/* #endregion */

/* #region Brand colours */
	.brand-twitter    { color: #55ACEE; }
	.brand-facebook   { color: #3B5998; }
	.brand-instagram  { color: #3F729B; }
	.brand-soundcloud { color: #FF8800; }
	.brand-youtube    { color: #CD201F; }
	.brand-mixcloud   { color: #34495E; }

	.brand-bg-twitter    { background-color: #55ACEE; color: #fff; }
	.brand-bg-facebook   { background-color: #3B5998; color: #fff; }
	.brand-bg-instagram  { background-color: #3F729B; color: #fff; }
	.brand-bg-soundcloud { background-color: #FF8800; color: #fff; }
	.brand-bg-youtube    { background-color: #CD201F; color: #fff; }
	.brand-bg-mixcloud    { background-color: #34495E; color: #fff; }
	
	.btn.brand-bg-twitter:hover,.btn.brand-bg-twitter:focus
	{ background-color: #3e9fec; color: #fff; }
	.btn.brand-bg-facebook:hover,.btn.brand-bg-facebook:focus
	{ background-color: #2e4777; color: #fff; }
	.btn.brand-bg-instagram:hover,.btn.brand-bg-instagram:focus
	{ background-color: #376588; color: #fff; }
	.btn.brand-bg-soundcloud:hover,.btn.brand-bg-soundcloud:focus
	{ background-color: #ea7b00; color: #fff; }
	.btn.brand-bg-youtube:hover,.btn.brand-bg-youtube:focus
	{ background-color: #b91c1c; color: #fff; }
	.btn.brand-bg-mixcloud:hover,.btn.brand-bg-mixcloud:focus
	{ background-color: #23313f; color: #fff; }
/* #endregion */

/* #region Header */
	.site-header {
		
	}
	.site-header .navbar {
		margin-bottom: 0;
        border: none;
	}
	.navbar-header {
		height: 100px;
	}
	.header-user {
		margin-left: -15px;
		margin-right: -15px;
		height: 40px;
		border-top: 1px dotted #444;
        background-color: rgba(0,0,0,0);
        transition: background-color 0.3s;
	}

	.header-social {
		text-align: left;
        background-color: #B34334;
        height: 2.25rem;
	}
	.header-social ul {
		margin: 0;
		padding: 0;
		list-style: none;
        display: inline-block;
	}
	.header-social li {
		display: inline;
	}
	.header-social a {
		padding: 0;
		display: inline-block;
		font-size: 1.1em;
        line-height: 2.25rem;
		width: 2em;
		text-align: center;
        height: 2.25rem;
        color: #fff;
	}
    .header-social a:hover,.header-social a:focus {
        background-color: rgba(0,0,0,0.1)
    }
    .btn-group-social {
        position: fixed;
        right: 0;
        top: 20px;
        z-index: 1030;
    }
    .btn-group-social a {
        border-radius: 0 !important;
        font-size: 1.2em;
    }
        .btn-group-social .btn-default {
            background-color: rgba(255,255,255,0.5);
        }
    .btn-group-social .btn-default:hover, .btn-group-social .btn-default:focus {
        background-color: transparent;
    }
	.navbar-nav > li > a {
		padding: 0.9375rem;
		text-transform: uppercase;
		line-height: 1;
		/*height: 2.875em;*/
		position: relative;
		color: #fff;
		color: rgba(255,255,255,0.75);
	}
	.navbar-nav > li > a:focus, .navbar-nav > li > a:hover {
		background-color: #000;
		color: #fff;
	}

	.header-user > ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.header-user a, .navbar-toggle, .header-search .btn-search {
		margin: 0;
		text-transform: uppercase;
		color: #fff;
		color: rgba(255,255,255,0.75);
		text-decoration: none;
		height: 40px;
		display: block;
	
		font-size: 21px;
		line-height: 1;
		padding: 10px;
	}

	.header-user a:hover, .header-user a:focus,
	.navbar-toggle:hover, .navbar-toggle:focus,
	.header-search .btn-search:hover, .header-search .btn-search:focus {
		background-color: #000;
		color: #fff;
		text-decoration: none;
	}
 
	.nav-basket {
		position: absolute;
		left: 0;
		top: calc(100px + 2.25rem);
	}
	li.nav-account {
		position: absolute;
		top: calc(100px + 2.25rem);
		right: 80px;
		width: 40px;
	}
	.navbar-toggle {
		position: absolute;
		top: calc(100px + 2.25rem);
		right: 0;
		width: 40px;
	}
	.header-search .btn-search {
		position: absolute;
		top: calc(100px + 2.25rem);
		right: 40px;
		width: 40px;
	}
	.header-search form {
		position: absolute;
		left: 0;
		right: 0;
		height: 46px;
		top: calc(99px + 2.25rem);
		z-index: 99;
		display: none;
	}
	.header-search .searchbox {
		padding-left: 20px;
		padding-right: 20px;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 46px;
		font-size: 1.5em;
		color: #222;
		border: none;
	}
	.btn-close-search {
		margin: 0;
		padding: 0;
		background: transparent;
		border: none;
		color: #999;
		font-weight: 100;
		font-size: 3.5em;
		line-height: 0.5;
		position: absolute;
		right: 10px;
	}
	.btn-close-search:hover,.btn-close-search:focus {
		color: #222;
	}

	.navbar-brand {
		
		display: block;
		height: 100px;
		padding: 20px 0 0;
	}
	.navbar-brand > img {
		margin: 0 auto;
		max-height: 60px;
		max-width: 98%;
	}
	/* #endregion */

/* #region Footer */
	.site-footer {
		margin-top: 3em;
		padding: 2em 0;
		background-color: #333;
        color: #fff;
	}
	.footer-nav {
		text-align: center;
	}
	.footer-nav li {
		display: inline;
	}
	.footer-nav > li > a {
		padding: 0.625em;
		display: inline-block;
		color: #fff;
		color: rgba(255,255,255,0.7);
		text-transform: uppercase;
	}
	.footer-nav > li > a:hover,.footer-nav > li > a:focus {
		background-color: transparent;
		color: #fff;
	}
	.footer-social {
		margin: 1.5em 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}
	.footer-social li {
		display: inline;
	}
	.footer-social a {
		color: rgba(255,255,255,0.75);
		padding: 0.4em 0;
		display: inline-block;
		font-size: 1.1em;
		width: 2.2em;
		height: 2.2em;
		text-align: center;
	}
	.footer-social a:hover,.footer-social a:focus {
		color: #fff;
	}
	.site-footer hr {
		margin-top: 2em;
		margin-bottom: 2em;
		border-top-color: rgba(255,255,255,0.2);
		border-top-style: dotted;
	}
	.footer-logo {
		margin: 2em auto 1em;
		display: block;
		width: 220px;
		max-width: 90%;
		opacity: 0.5;
		text-align: center;
	}
	.footer-copy {
		text-align: center;
		color: rgba(255,255,255,0.5);
	}
	.footer-db {
		margin: 2.5em 0;
	}
	.footer-db a {
	}
	.footer-db a:hover,.footer-db a:focus {
	}
/* #endregion */

/* #region Sidebar */
	.sidebar {
		margin: -1em 0 0;
		background-color: rgba(0, 0, 0, 0.1);
		background-color: #d5cfc9;
	}
	.sidebar-items {
		
	}
	.sidebar-item h2 {
		padding: 0 15px;
		font-size: 1em;
	}
	.sidebar-link-list {
		margin: 0 0 1.5em;
		padding: 0;
		list-style: none;
	}
	.sidebar-link-list a {
		padding: 0.2em 15px;
		text-transform: uppercase;
		display: block;
	}
	.sidebar-link-list a:hover,.sidebar-link-list a:focus {
		background-color: #f0f0f0;
		background-color: rgba(0,0,0,0.08);
		text-decoration: none;
	}
	.sidebar-toggle {
		padding: 1em;
		display: block;
		width: 100%;
		background: transparent;
		border: none;
		position: relative;
		text-align: left;
		text-transform: uppercase;
		border-bottom: 2px solid #A62121;
	}
	.sidebar-toggle:hover,.sidebar-toggle:focus {
		background: rgba(255,255,255,0.2);
	}
	.sidebar-toggle i {
		position: absolute;
		right: 1em;
		top: 1.2em;
	}
/* #endregion */

/* #region Panels */
	.panel {
		background-color: rgba(255,255,255,0.5);
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
	}
	.panel,.panel-group .panel {
		border: none;
		border-radius: 0;
	}
	.panel-heading {
		margin-top: 0;		
	}
	.panel-default > .panel-heading {
		background-color: transparent;
		color: rgba(0, 0, 0, 0.5);
		border: none;
		border-radius: 0;
		text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
		border-bottom: 1px solid rgba(0,0,0,0.03);
	}
	.panel-footer {
		padding: 15px;
		background-color: transparent;
		border: none;
		border-radius: 0;
	}	
/* #endregion */

/* #region Thumbnail items */
	.thumbnail {
		margin-bottom: 30px;
		border: none;
		border-radius: 0;
        background-color: rgba(255,255,255,0.4);
	}
	.thumbnail-item {
		margin-bottom: 30px;
		background-color: #fff;
        background-color: rgba(255,255,255,0.4);
		padding: 0;
		position: relative;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
	}
	.media-view .thumbnail {
		position: relative;
		transition: box-shadow 200ms ease-out;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
	}
	.thumbnails .thumbnail {
		transition: box-shadow 200ms ease-out;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
	}
	.artwork-view:hover .thumbnail-item,.artwork-view:focus .thumbnail-item,
	.media-view .thumbnail:hover,.media-view .thumbnail:focus,
	.thumbnails .thumbnail:hover,.thumbnails .thumbnail:focus {
		background-color: rgba(255,255,255,0.7);
	}
	.thumbnail-item-caption {
        padding: 10px;
        text-align: center;
        min-height: 7.5rem;
        width: 100%;
        left: 0;
	}
    .artist .thumbnail-item-caption {
        min-height: calc( 20px + 2.85rem );
    }
	.thumbnail-item-heading, .media-view .media-heading {
		margin: 0;
        color: #B34334;
        font-size: 1.2em;
        vertical-align: middle;
	}
	.row-home-news .thumbnail-item-heading {
		min-height: 4em;
	}
	#artists .thumbnail-item-heading, #artists .media-view .media-heading {
		min-height: 0;
	}
	.media-view .media-heading {
		padding-right: 6px;
	}
	.thumbnail-item-heading small {
		color: rgb(25, 19, 19);
        display: block;
        font-weight: 400;
        font-size: 75%;
        margin-top: 5px;
        opacity: 0.85;
	}
	.media-heading > small {
		display: block;
		margin-top: 0.3em;
		text-transform: uppercase;
		color: inherit;
		opacity: 0.6;
	}
	.thumbnail-item-cat {
		margin: 0;
		/*font-size: 1.5em;*/
		font-weight: 100;
		opacity: 0.5;
	}
	.media-object {
		width: 120px;
		max-width: none;
	}
	.overlay-link {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		text-indent: 200%;
		white-space: nowrap;
		overflow: hidden;
	}
	.caption.discount {
		top: 4px;
		left: 4px;
		right: 4px;
		width: auto;
		background-color: rgba(227, 69, 0, 0.9);
	}

	h4.discount {
    padding: 4px 5px;
	}

	.detail.caption.discount.exclusive {
		margin-left: 11px;
		margin-top: -4px;
		background-color: color(srgb 0.7031 0.2618 0.2063);
	}

	.owl-carousel .owl-item {
		padding: 5px;
	}
	.owl-controls {
		padding-right: 15px;
		text-align: left;
	}
	.owl-controls > div {
		font-size: 2em;
		height: 1.2em;
		width: 1.2em;
		line-height: 1.1;
		text-align: center;
		background-color: transparent;
		color: #A62121;
		cursor: pointer;
		display: inline-block;
	}
	.owl-controls > div:hover,.owl-controls > div:focus {
		background-color: transparent;
		color: #ff4f38;
		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
	}
	.owl-next {
		margin-left: 3px;
	}
	
/* #endregion */

/* #region Carousel */
	.carousel {
        margin-bottom: 0;
        /*margin-top: -21px;*/
        overflow: hidden;
        padding: 0;
        padding-bottom: calc( 1.5rem + 2px );
	}
    .carousel .item {
        height: 433px;
        background-color: #777;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }
	.carousel-inner > .item > a > img, .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
	}
	.carousel-caption {
		background: rgba(0, 0, 0, 0.6);
        position: absolute;
        bottom: 0;
        margin: 0;
        padding: 14px 20px 10px 20px;
        display: block;
        width: 100%;
        color: #fff;
        left: 0;
        right: 0;
        text-align: left;
	}
    .carousel-caption::before,
    .carousel-caption::after {
        display: table;
        content: " ";
    }
    .carousel-caption::after {
        clear: both;
    }
	.carousel-caption h2 {
        margin: 0;
        float:left;
        width: calc( 100% - 9.375rem );
        color: #fff;
	}
    .carousel-caption .btn {
        float:right;
        color: #333332;
        background-color: #B34334;
        border-color: #B34334;
        border-width: 1px;
	}
	.carousel-caption .btn,.carousel-caption .btn:focus {
		color: #fff;
        background-color: #B34334;
        border-color: #B34334;
	}
	.carousel-controls {
	
	}
	.carousel-control {
		top: 17%;
		bottom: auto;
		font-size: 4em;
		width: 10%;
	}
	.carousel-control.left,.carousel-control.right {
		background: transparent;
	}
	.carousel-indicators {
		margin: 0 -1px;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
        display: flex;
        
        width: auto;
	}
	.carousel-indicators li {
		border: none;
        justify-content: space-around;
        flex-grow: 1;
        border-radius: 0;
        background-color: #4f4943;
        height: 1.5rem !important;
        margin: 0 1px;
        opacity: 0.5;
	}
    .carousel-indicators li:hover {
       opacity: 1;
    }
	.carousel-indicators li.active {
		background-color: #A62121;
        border: none;
        opacity: 1;
	}
/* #endregion */

/* #region Media objects */
	
	.media-news .media-object {
		width: 60px;
		max-width: none;
	}
	.media-heading > a {
		color: inherit;
		font-weight: 400;
		display: block;
	}
	.media-link-list .media {
		margin: 0 -15px;
	}
	.media-link-list .media + .media {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 0;
	}
	.media-link-list .media > a {		
		padding: 10px 15px;
		display: block;
		transition: background-color 100ms ease-out;
	}
	.media-link-list .media > a:hover,.media-link-list .media > a:focus {
		background-color: #fff;
		text-decoration: none !important;
	}
	.media-link-list .media > a .media-heading {
		color: #54493e;
		font-weight: 400;
		
	}
/* #endregion */

.close {
    font-size: 4rem;
    font-weight: 100;
    position: relative;
    top: -0.25em;
}
.modal-body > .tab-content {
    padding-top: 0;
}

.row.thumbnails {
	margin-top: -25px;
}
.table.checkout {
  background-color: #ffffff;
}
.content > hr {
  border-top-color: rgba(0, 0, 0, 0.2);
  border-top-width: 0;
  margin: 0;
}
img.thumbnail {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1px;
}
.img-responsive {
	width: 100%;
}
img,object,iframe,embed {
	max-width: 100%;
}
iframe {
	margin-bottom: 1em;
	display: block;
}
.spotify-embed { height: 410px; width: 100%; }
.spotify-iframe {
    margin: 0;
    
    margin-top: calc( 1.12rem - 13px );
    display: inline-block;
    float: right;
}

@media (min-width: 768px){
    #sidebar {
        position: sticky;
        top: calc(36px + 2rem);
        z-index: 1034;
    }
	.main {
		min-height: 50vh;
        padding: 2rem 0;
	}
	.site-header {
		padding-top: 2.25rem;
		position: relative;
	}
	.site-header .container {
		position: relative;
	}
	.site-header .navbar {
		position: static;
	}
	.site-header .navbar-collapse {
		padding: 0;
		float: left;
	}
	.site-header .navbar-header {
		padding: 1.5625rem 0;
		float: none;
		text-align: center;
        height: auto;
	}
	.navbar-head {border:none;}
    .navbar-toggle {
		display: none;
	}
	.navbar-brand {
		padding: 0;
		max-width: 50%;
		display: inline-block;
		height: auto;
	}
	.navbar-brand > img {
		max-height: none;
	}
	.header-nav {
		position: relative;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #333332;
        background-color: rgba(51,51,50,0.15);
	}
	.navbar-nav > li > a {
		padding-top: 1.111111111111111em;
        padding-bottom: 1.111111111111111em;
        padding-left: 1.111111111111111em;
        padding-right: 1.111111111111111em;
        padding: 1rem 0.6rem;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 0.9rem;
        line-height: 2.222222222222222;
        text-transform: uppercase;
        color: #fff;
        /*border-right: 1px solid rgba(255,255,255,0.3);*/
        transition: 100ms background-color;
        white-space: nowrap;
	}
	.navbar-nav > li > a:focus, .navbar-nav > li > a:hover {		
		background-color: #B34334;
	}
	.navbar-nav > li > a:focus:after, .navbar-nav > li > a:hover:after {
		/*position: absolute;
		left: 0;
		bottom: 2px;
		height: 3px;
		width: 100%;
		background-color: #e64415;
		content: "";*/
	}
	.header-search {
		float: right;	
	}
	.header-search .btn-search {
		/*padding: 0.4583333333333333em 0.625em;*/
        padding: 1rem;
		display: block;
		font-size: 1.2rem;
		/*line-height: 1;*/
		/*height: 1.916666666666667em;*/
        line-height: 1.666666666666667;
        height: auto;
        width: auto;
		color: #fff;
		color: rgba(255,255,255,0.75);
		position: static;
	}
	.header-search .btn-search:focus, .header-search .btn-search:hover {
		background-color: #B34334;
		color: #fff;
	}
	.btn-close-search {
		font-size: 3.5em;
        line-height: 1.1;
	}
	.header-search form {
		left: 15px;
		right: 15px;
		top: 1px;
		bottom: 1px;
		height: auto;
	}
	.header-search .searchbox {
		height: 100%;
	}
	.header-user {
		margin: 0;
		position: fixed;
		left: 0;
		/*top: -2.25rem;*/
        top: 0;
		border: none;
        z-index: 102;
        width: 100%;
        height: 1px;
	}	
    .header-user > ul {
        margin: 0 auto;
        width: 100%;
        height: 1px;
    }
	.header-user li {
		float: left;
		height: auto;
		width: auto;	
	}
	.header-user a {
		padding: 10px 15px;
		height: auto;
		width: auto;	
		font-size: 1em;
        border: none;
	}
	.header-user a span {
	display: inline !important;
	}
	.nav-basket,li.nav-account {
		position: relative;
        left: 0;
        top: 0;
	}
	.dropdown-menu li {float: none;}

    .header-social {
        text-align: right;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 101;
    }
    .header-social .container {
        /*width: 100%;*/
    }
    .header-social a {width: 2.4em;}
    .spotify-iframe {margin-left: 1rem;}

    .list-labels {
        float: right;
        margin-top: 25px;
    }
    .list-labels li {
        margin: 0 0 0 15px;
        padding: 0;
        height: 60px;
        width: 60px;
        background-position: 0 0;
        background-repeat: no-repeat;
        text-indent: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    li.list-labels-liquidv { background-image: url(../img/logo-lv.png); }
    li.list-labels-chronic { background-image: url(../img/logo-c.png); }
    li.list-labels-philly { background-image: url(../img/logo-pb.png); width: 82px; }

	.site-footer {
		
	}
	
	.carousel {
		margin: 0 0 2em;
		/*padding: 0 0 1.5rem 0;*/
	}
	.carousel-control {
		top: 33%;
		font-size: 5em;
	}
	.carousel-indicators {
		/*left: auto;
		right: 15px;
		bottom: 100px;
		width: auto;*/
	}
	
	.sidebar {
		/*margin: 0 0 -3rem 0;*/
        margin: 0;
		padding: 0;
		position: relative;
		top: -2rem;
		background-color: #d5cfc9;
		/*background-color: rgba(0,0,0,0.1);*/
	}
	.sidebar-items {
		display: block;
		padding: 0;
		height: auto !important;
	}
	.sidebar-item-sections {
		float: left;
	}
	.sidebar-item-labels {
		float: right;	
	}
	.sidebar-item h2 {
		margin: 0 0.3em 0 0;
		padding: 0.7em 0;
		font-size: 0.9em;
		line-height: inherit;
		float: left;
	}
	.sidebar-item-sections h2 {
		display: none;
	}
	.sidebar-item-labels h2:after {
		content: " :";
	}
	.sidebar-link-list {
		margin: 0;
		float: left;
	}
	.sidebar-link-list li {
		/*display: inline-block;*/
		float: left;
	}
	.sidebar-link-list a {
		padding: 0.7em 0.5em;
		font-size: 0.9em;
		display: block;
	}
	
	.thumbnail-item-heading, .media-view .media-heading {
		/*font-size: 1.125em;*/
	}
	
	.page-header-controls-container .page-heading {
		float: left;
	}
	.page-header-controls {
		margin: 2em 0 0;
		float: right;
	}
	.page-header-controls.form-group {
		width: 30%;
	}
	.page-header-controls-lg {
		margin: 1.5em 0 0;
	}
	.nav-pills-wide > li > a {
		padding-left: 40px;
		padding-right: 40px;
	}
	.spotify-embed { height: 600px; }
}
@media (min-width: 910px) {
    .navbar-nav > li > a {
        padding: 1rem;
    }
}
@media (min-width: 992px){
	.navbar-nav > li > a {
		font-size: 1.125em;
        padding: 0.9rem;
	}
    .header-search .btn-search {
        font-size: 1.5rem;
        padding: 0.9rem;
    }
    .header-user > ul { width: 970px; }
    .list-labels { margin-top: 30px;  }
	.sidebar-item h2,.sidebar-link-list a {
		font-size: 1em;
	}
	.owl-controls {
		margin-top: 0.8em;
		text-align: right;
	}
}
@media (min-width: 1200px){
	.navbar-nav > li > a, .header-search .btn-search {
		padding: 1.25rem;
	}
    .header-user > ul { width: 1170px; }
	.sidebar-link-list a {
		padding: 0.7em 0.9375em;
	}
    .list-labels {
        margin-top: 50px;
    }
}

@media (max-width: 767px) {

    html.mobile-magic .thumbnail-item-caption {
        min-height: 7rem!important;
      }

	.nav-basket span {
		font-size: 75%;
	}
	.sidebar > .container {
		padding-left: 0;
		padding-right: 0;
	}
	.nav-justified-xs > li {
		display: table-cell;
		width: 1%;
	}
	.nav-justified-xs > li {
		float: none;
	}
	.nav-justified-xs > li > a {
		text-align: center;
	}
    .carousel .item {
        height: auto;
    }
    .carousel-inner > .item > a > img, .carousel-inner > .item > img {
        position: static;
    }
    .carousel-caption {
        position: static;
    }
    .carousel-caption h2 {
        float:none;
        width: auto;
        font-size: 1.2rem;
	}
    .carousel-caption .btn {
        float:none;
	}
    .navbar-brand {float: none;}
    .nav-account .dropdown-menu {
        left: auto;
        right: 0;
    }
    .navbar-nav > li {
        border-bottom: 1px dotted rgba(0,0,0,0.2);
    }
    .navbar-nav > li > a {
        color: #000;

    }

    .sticky {
        padding-top: 40px;
    }
    .sticky .header-user {
        background-color: rgba(0,0,0,0.8);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1033;
        margin: 0;
    }
    .sticky .nav-basket, .sticky .nav-account, .sticky .header-search .btn-search {
        top: 0;
    }
    .sticky .header-search {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1035;
    }
    .sticky .navbar-toggle {
        position: fixed;
        top: 0;
        z-index: 1034;
    }
    .navbar-collapse {
        position: absolute;
        top: calc(140px + 2.25rem);
        background-color: rgba(255,255,255,1);
        width: 100%;
        z-index: 1034;
    }
    .sticky .navbar-collapse {
        position: fixed;
        top: 40px;
        width: 100%;
        /*background-color: rgba(255,255,255,0.85);*/
    }
}
@media (max-width: 1199px){
	.thumbnail-item-heading, .media-view .media-heading {
		min-height: 4em;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.container {
		width: 100%;
	}
	/*.sidebar {
		margin-left: -15px;
		margin-right: -15px;
	}*/
}
@media (min-width: 1200px) and (max-width: 1300px){
  .list-labels {
    margin-right: 50px;
  }
}


/* === Editorial Enhancements === */

.inline-image {
  max-width: 45%;
  height: auto;
  margin: 1em;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.inline-image.left {
  float: left;
  margin-right: 1.5em;
  margin-left: 0;
}

.inline-image.right {
  float: right;
  margin-left: 1.5em;
  margin-right: 0;
}

.pull-quote {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.8em;
  line-height: 1.4;
  font-style: italic;
  font-weight: bold;
  margin: 2em auto;
  padding: 1em;
  max-width: 700px;
  color: #B34334;
  border-left: 5px solid #B34334;
  background: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .inline-image,
  .inline-image.left,
  .inline-image.right {
    float: none;
    display: block;
    margin: 1em auto;
    max-width: 90%;
  }

  .pull-quote {
    font-size: 1.4em;
    padding: 0.75em;
  }
}


/****************************************************
 * Modern Updates & Hover Animations
 ****************************************************/

/* 2) Smooth Hover Animations for “Latest News”, “Latest Releases”, and “Merchandise” items */
.artwork-view .thumbnail-item,
.media-view .thumbnail {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Scale up and add a subtle shadow on hover */
.artwork-view:hover .thumbnail-item,
.media-view .thumbnail:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 3) Modernize Carousel: remove blocky look, smooth transitions */
.carousel {
  /* optional: add a slight fade transition between slides */
}

.carousel .item img {
  /* Make sure images fill properly without boxy edges */
  border-radius: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Optional “fade” style for slides (rather than sliding). 
   This requires some supporting JS or .carousel-fade classes, 
   but you can at least style the images for a softer look */
.carousel-inner > .item {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.carousel-inner > .item.active {
  opacity: 1;
}

/* Style the carousel controls (arrows) to be slimmer and less blocky */
.carousel-control {
  background: none !important;
  font-size: 3rem;
  color: #fff !important;
  text-shadow: none;
  width: 5%; /* Make them narrower */
  transition: color 0.2s ease;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #b34334 !important; /* highlight color on hover */
  background-color: rgba(0,0,0,0.2);
}

/* Slim down the carousel indicators and modernize them */
.carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #333 !important;
  margin: 0 5px;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.carousel-indicators li:hover,
.carousel-indicators li:focus {
  opacity: 1;
}
.carousel-indicators .active {
  background-color: #b34334 !important;
  opacity: 1;
}

/* 4) Nav Hover Animations */
.navbar-nav > li > a {
  transition: background-color 0.3s, color 0.3s;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  background-color: #b34334; /* or your brand color */
  color: #fff;
}

/* 5) Optional: Add a gentle fade for images as they load */
img.thumbnail-item-img {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
img.thumbnail-item-img.loaded {
  opacity: 1;
}
/* Ensure the parent container can stack images */
.thumbnail-item-img-link {
  position: relative;
  display: block; 
  overflow: hidden; 
}

/* 1) The container must be positioned (relative) so the 2nd image can overlay */
.thumbnail-item-img-link {
  position: relative;
  display: block;
  overflow: hidden;
}

/* 2) First child image: visible by default */
.thumbnail-item-img-link img:nth-child(1) {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 3) Second child image (if present) is hidden initially and placed on top */
.thumbnail-item-img-link img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 4) On hover, fade in the second image, but ONLY if it exists */
.thumbnail-item-img-link:hover img:nth-child(2) {
  opacity: 1;
}

/* 5) Fade out the first image ONLY if it’s NOT the only child (i.e., a second image exists) */
.thumbnail-item-img-link:hover img:nth-child(1):not(:only-child) {
  opacity: 0;
}