body {
	background: #ffffff;
	
		background-image: url('../pictures/background/quinnsX.png');

	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
	background-repeat: repeat-x, repeat-y;
  background-attachment: fixed;
	
	font-family: Courier New, Karla, Source Sans Pro, Verdana;
	color: #003333;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.2px;
	
	text-decoration: none;
}

:link { color: #006666; text-decoration: none;  }
:visited { color: #006666; text-decoration: none;  } 
a:active { color: #009999; text-decoration: none;  } 
a:hover { color: #009999;  text-decoration: none;  } 


html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

html {
  scroll-behavior: smooth;
}



/************************************************************************************
STRUCTURE
*************************************************************************************/


#page-wrap {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	background-color: #ffffff;
}




#page {
	margin: 0 auto;
	padding: 0;
	width: 1100px;
		background-color: #ffffff;
margin-top: 0px;
}

#carousel  {
    width: 100%;
    overflow: hidden;
	margin: 0 auto;
    margin-bottom: 30px;
}

#content {
	width: 75%;
		overflow: hidden;
float: left;
padding: 0;
padding-bottom: 140px;
    margin-top: 35px;
}


#sidebar {
	width: calc(25% - 40px);
	text-align: right;
		overflow: hidden;
float: right;	
font-size: 16px;
	color: #009999;
    margin-top: 40px;
}





#footer {
	clear: both;
	width: calc(100% - 40px);
	margin: 120px 0 0 0;
	padding: 40px 20px 70px 20px;
	background: #009999;
	text-align: center;
	overflow: hidden;
	border-top: 2px solid #006666;
}



/************************************************************************************
HEADER
*************************************************************************************/


#header {
	width: 100%;
	padding: 20px 0 20px 0;
  top: 0;
  border-bottom: 1px solid #eeeeee;
  z-index: 1000;
  margin-bottom: 0px;
  height: 60px;
  background-color: #fafafa;
}

#header-box {
	width: 1135px;
	margin: 0 auto;
}

#logo-box {
	width: 70px;
  overflow: hidden;
  float: left;

}

img.site-logo {
	width: 90px;
	margin: 0 15px 0 20px;
	float: left;
	
}
.gap-logo { display: none;
	
}

#nav-bar {
	float: left;
	font-size: 17px;
	color: #009999;
}

#mobile-nav-box {
	float: right;
	width: 70px;
}	

nav {

}

/************************************************************************************
SHARED
*************************************************************************************/


#featured-info {
	float: left;
	overflow: hidden;
	width: calc(100% - 340px);
}

#embed-player {
    
}

#embed-shell {

}

.nav-gap {
	clear: both;
	height: 1px;
	overflow: hidden;
	margin: 8px 0 13px 0;
	  border-bottom: 1px dashed #cccccc;

}


.release {
	width: calc(33.3% - 30px);
	padding: 0;
	float: left;
	margin: 0;
	overflow: hidden;
}

.act {
	width: calc(33.3% - 30px);
	padding: 0;
	float: left;
	margin: 0;
	overflow: hidden;
}

.gap-header {
	display: none;
}
.gap-desktop {
	clear: both;
	width: 100%;
	height: 40px;
	overflow: hidden;
}

.gap-mobile {
	display: none;
}

.gap-vertical {
	float: left;
	width: 45px;
	height: 40px;
	overflow: hidden;
}

.clear {
	clear: both;
}

.gap-vertical-mobile {
display: none
}

.gap {
	clear: both;
	height: 30px;
	overflow: hidden;
}

.gap-2 {
	height: 20px;
	overflow: hidden;
}

.gap-3 {
	height: 40px;
	overflow: hidden;
}


.gap-medium {
	clear: both;
	height: 70px;
	overflow: hidden;
}
.gap-big {
	clear: both;
	height: 120px;
	overflow: hidden;
}


.gap-small {
	clear: both;
	height: 5px;
	overflow: hidden;
}


.gap-tiny {
	height: 5px;
}


.add-to-cart {
	width: 130px;
	height: 35px;
	margin: 0 0 0px 0;
}

add-to-cart:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}
	
.add-to-cart-featured {
	width: 150px;
	margin: 0 0 10px 0;
}

add-to-cart-featured:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}
	
	
	
/************************************************************************************
IMGS
*************************************************************************************/

img.carousel {
	float: left;
	width: 75%;
	margin: 0 0 60px 0px;
}


img.artist {
	float: none;
	width: 100%;
	margin: 0 0 20px 0px;
}


img.artist-right {
	float: right;
	width: 35%;
	margin: 0 0 20px 40px;
}

img.cover {
	width: 100%;
	margin: 0 0 15px 0;
}

img.cover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

img.cover-act {
	width: 100%;
	margin: 0 0 15px 0;
}

img.cover-act:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

img.featured {
	float: right;
	width: 300px;
	margin: 0 0 15px 40px;
}

.spotify-box {
	width (calc:100% - 340px);
	overflow: hidden;
	margin: 20px 0 25px 0;
}

.spotify-box-right {
	float: right;
	overflow: hidden;
    display: inline-block;
}

img.apple-music {
	height: 25px;
	margin: 0px 10px 10px 0px;
	float: left;
}

img.apple-music:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

img.web-music {
	height: 30px;
	margin: 0px 0px 0px 13px;
	float: left;
}

img.web-music:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}
	
	img.spotify-music {
	height: 25px;
	margin: 0px 10px 10px 0px;
	float: left;
}

img.spotify-music:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}
	
img.apple-listen {
	height: 40px;
	float: left;
	margin: 0px 15px 5px 0px;
}

img.apple-listen:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

img.bandcamp {
	width: 100%;
	margin: 0px 0px 15px 0px;
    display: none;
}

img.bandcamp:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}


/************************************************************************************
FONTS
*************************************************************************************/


.logo {
		font-family: Courier New, Karla, Heebo,Helvetica, Verdana;
font-size: 30px;
	font-style: normal;
	line-height: 26px;
	text-decoration: none;
		color: #006666;
		font-weight: 600;
		margin: 2px 0 7px 0;
		display: block;
}
a.logo:link { color: #003333; }
a.logo:visited { color: #003333; }
a.logo:hover { color: #003333; }
a.logo:active { color: #003333; }


.mobile-nav {
	font-size: 17px;
 font-weight: bold;
}


.mobile-nav-sub {
	font-size: 16px;
	line-height: 24px;
}


.article {
line-height: 36px;
font-size: 22px;

}


.title {
		font-size: 22px;

 font-weight: bold;
}



.headline {
	line-height: 18px;
 font-weight: bold;

}
a.headline:link {  color: #009999; }
a.headline:visited {  color: #009999; }
a.headline:hover { color: #003333; }
a.headline:active { color: #003333; }

.nav-font {
	line-height: 18px;
 font-weight: bold;
	color: #003333;

}
a.nav-font:link {  color: #003333; }
a.nav-font:visited {  color: #009999; }
a.nav-font:hover { color: #009999; }
a.nav-font:active { color: #009999; }

.text {
	font-size: 16px;
	line-height: 18px;
	color: #888888;
}

.formtext1 {
	font-size: 14px;
	line-height: 18px;
	color: #003333;
	padding: 4px 0px;
}

.formtext2 {
	font-size: 15px;
	line-height: 18px;
	color: #003333;
	padding: 4px 0px;
}


.footer {
	font-size: 18px;
	font-weight: 300;
	color: #dddddd;
}
a.footer:link { color: #ffffff; 	font-weight: 800; }
a.footer:visited { color: #ffffff; font-weight: 800; }
a.footer:hover { color: #ffffcc; font-weight: 800; }
a.footer:active { color: #ffffcc; font-weight: 800; }


.nav-slash {
	color: #aaaaaa;
	margin: 0 20px;
	font-weight: normal;
}

.nav-slash-ipad {
	color: #aaaaaa;
}