body.marto_2016-bw1 {
	/* background: black url('./img/global/bkgd/bg-1.jpg'); */
	/*background: black url('./img/global/bkgd_marto_2016-btw1-grad-2.jpg');*/
	/*background: #eee3cd url('./img/global/bkgd_marto_2017-a-grad.jpg');*/
	/*background: #ffffff url('./img/global/bkgd_marto_2017-b-gradwh.jpg');*/
	background: black;
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: fixed;
	background-size: contain;
	/*background-size: cover;*/
	/* animation: backgroundAnimation 30s linear infinite 0s; */
}

	/*alternate backgrounds*/
	/*switchClass( "big", "blue", 1000, "easeInOutQuad" );*/
	body.bg-1 {
		/* background: black url('./img/global/bkgd/bg-1.jpg'); */
		background-repeat: no-repeat;
		background-position: right top;
		background-attachment: fixed;
		background-size: contain;
	}
	body.bg-2 {
		/* background: #eee3cd url('./img/global/bkgd/bg-2.jpg'); */
		background-repeat: no-repeat;
		background-position: right top;
		background-attachment: fixed;
		background-size: contain;
	}
	body.bg-3 {
		/* background: #ffffff url('./img/global/bkgd/bg-3.jpg'); */
		background-repeat: no-repeat;
		background-position: right top;
		background-attachment: fixed;
		background-size: contain;
	}
	body.bg-3-bw {
		/* background: #e6e6e6 url('./img/global/bkgd/bg-3-bw.jpg'); */
		background-repeat: no-repeat;
		background-position: right top;
		background-attachment: fixed;
		background-size: contain;
	}

/*background animation*/
@keyframes backgroundAnimation {
    0% {
			background-color: rgba(0,0,0,1);
			background-image: url('./img/global/bkgd/bg-1.jpg');
		}
		29% {
			background-color: rgba(0,0,0,1);
			background-image: url('./img/global/bkgd/bg-1.jpg');
		}
    33% {
			background-color: rgba(255,255,255,1);
			background-image: url('./img/global/bkgd/bg-2.jpg');
			/*animation-timing-function: ease-out;*/
		}
		63% {
			background-color: rgba(255,255,255,1);
			background-image: url('./img/global/bkgd/bg-2.jpg');
			/*animation-timing-function: ease-out;*/
		}
		66% {
			/*background-color: rgba(238, 227, 205,1);*/
			background-color: rgba(230,230,230,1);
			background-image: url('./img/global/bkgd/bg-3-bw.jpg');
			/*animation-timing-function: ease-out;*/
		}
		96% {
			background-color: rgba(230,230,230,1);
			background-image: url('./img/global/bkgd/bg-3-bw.jpg');
			/*animation-timing-function: ease-out;*/
		}
		100% {
			background-color: rgba(0,0,0,1);
			background-image: url('./img/global/bkgd/bg-1.jpg');
		}
}


a, *.hoverTransition, h2, h2 span {
	/* fade link effects on hover */
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	/* ...and now for the proper property */
	transition:.3s;
}

h1 {
	visibility: hidden;
}
h2 {
	font-size: 26px;
	font-weight: normal;
	}
	h2 span {
		color: rgba(255,255,255,0.2);
		font-size: 20px;
		float: right;
		display: block;
		line-height: 26px;
		vertical-align: bottom;
		margin: 7px 15px 0px 15px;
		}
		h2:hover span {
			color: rgba(255,255,255,0.5);
		}
		section#content p {
			color: #9f9f9f;
			color: rgba(255, 255, 255, 0.7);
		}
		section#content .lyrics p + p {
			margin-top: 8px;
		}
		body.white section#content p {
			color: #9f9f9f;
			color: rgba(0,0,0, 0.7);
		}
	div#logo {
		width: 100%;
		height: 128px;
		background: transparent no-repeat left center;
		background-image: url(./img/global/logo_white_martofreo.png);
		/* background-image: url(./img/global/marto_logo_white.svg); */
		margin-top: 15px;
		margin-bottom: 15px;
		}
		body.white div#logo {
			/* background-image: url(./img/global/marto_logo_black.svg); */
			background-image: url(./img/global/logo_black_martofreo.png);
		}

		div#social {
			padding-top: 15px;
			padding-bottom: 15px;
			}
			div#social a img {
				opacity: 0.5;
				}
				div#social a img:hover {
					opacity: 1;
					}

		div#releases {
			margin-top: 100px;
			}
			div#releases .release {
				background: rgba(255,255,255,0.05);
				padding: 15px;
				border-radius: 10px;
				margin-bottom: 30px;

				display: flex;
				flex-direction: row;
				/* flex-wrap: nowrap; */
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: stretch;
				align-content: stretch;
				gap: 15px;
			}
			div#releases .release .cover {
				width: 30%;

				display: block;
				flex-grow: 0;
				flex-shrink: 1;
				flex-basis: auto;
				align-self: auto;
				order: 0;
				text-align: center;
				}
				div#releases .release .cover .listenOn ul {
					width: 100%;
					text-align: center;
					margin: 0px;
					padding: 0px;
					margin-top: 15px;
					}
					div#releases .release .cover .listenOn ul li {
						display: inline-block;
					}
					div#releases .release .cover .listenOn ul li a {
						display: inline-block;
						padding: 5px 8px;
						background: rgba(255,255,255,0.1);
						color: rgba(255,255,255,0.5);
						text-decoration: none;
						border-radius: 6px;
						}
						div#releases .release .cover .listenOn ul li a img {
							height: 25px;
						}
						div#releases .release .cover .listenOn ul li a:hover {
							background: rgba(255,255,255,0.3);
							color: rgba(255,255,255,1);
							text-decoration: none;
							border-radius: 6px;
							}
				div#releases .release .cover .coverArt {
					display: inline-block;
					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 200px;
					border-radius: 3px;
					background: red;
				}
			div#releases .release .trackList h3 {
				margin: 0px;
				padding: 0px;
			}
			div#releases .release .trackList h3 span.releaseYear {
				float: right;
				font-weight: 200;
				color: rgba(255,255,255,0.5);
			}
			div#releases .release .trackList {
				display: block;
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;
				align-self: auto;
				order: 0;
				}
				div#releases .release .trackList ol {
					margin: 15px 0px 0px 0px;
					/* padding: 0px; */
					color: rgba(255,255,255,0.4);
					}
					div#releases .release .trackList ol li {
						padding: 3px 8px;
						border-radius: 3px;
						}
						div#releases .release .trackList ol li span.title {
							color: rgba(255,255,255,1);
						}
						div#releases .release .trackList ol li span.duration {
							float:right;
							font-size: 0.8em;
							line-height: 1.8em;
						}
						div#releases .release .trackList ol li div.lyrics {
							margin-top: 15px;
							margin-bottom: 30px;
							display: none;
							}
							div#releases .release .trackList ol li div.lyrics h4 {
								margin-top: 15px;
								margin-bottom: 0px;
								text-transform: uppercase;
								color: rgba(255,255,255,0.2);
								font-size: 0.8em;
							}
							div#releases .release .trackList ol li div.lyrics h4 + p{
								margin-top: 0px;
								margin-bottom: 0px;
							}
					div#releases .release .trackList ol li + li {
						margin-top: 3px;
					}
					div#releases .release .trackList ol li:hover {
						cursor: pointer;
						background: rgba(255,255,255,0.1);
						}
						div#releases .release .trackList ol li:hover span.title {
						color: rgba(255,255,255,0.8);

						}
			div#releases .release .albumCredits * {
				font-size: 0.6em;
				opacity: 0.5;
			}
			@media screen and (max-width: 650px) {
				div#releases .release .cover {
					flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis
					/* background: red; */
				}
				div#releases .release .trackList h3 {
					text-align: center;
				}
				div#releases .release .trackList h3 span.releaseYear {
					float: none;
					display: block;
					font-size: 0.7em;
				}
			}



		div#albums {
			vertical-align: top;
			/* border-top: 1px solid rgba(255, 255, 255, 0.2); */
			padding-bottom: 20px;
		}
		div#albums .album {
			vertical-align: top;
			display: inline-block;
			width: 49%;
			margin-top: 20px;
/*
			margin-left: 15px;
			margin-right: 15px;
*/
			padding-top: 20px;
			text-align: center;
			}
			div#albums .album .album_art {
				width: 60%;
				height: auto;
			}
			div#albums .album p {
				padding: 10px 0px 0px 0px;
				margin: 0px;
				width: 100%;
			}
			div#albums .album p span {
				font-weight: 600;
				}
				div#albums .album p a {
					text-decoration: none;
					color: inherit;
					}
					div#albums .album p a img {
						opacity: 0.7;
						}
						div#albums .album p a img:hover {
							opacity: 1;
							}
			div#albums .album.soon {
				opacity: 0.7;
				}
				div#albums .album.soon:hover {
					opacity: 0.8;
					}
			div#albums .album p.soon span {
				padding: 3px;
				border: 1px solid rgba(255,255,255,0.3);
				border-radius: 2px;
				font-weight: normal;
				font-size: 11px;
				color: rgba(255,255,255,0.6);
			}
	div#tracks {
		clear: both;
		margin-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		}
		.justaddlava_release {
			display: none;
		}

	div#mailingList {

	}
	div#mailingList h3 {
		font-size: 13px;
		padding: 0px;
		margin: 0px;
	}
	div#mailingList input[type="text"],
	div#mailingList input[type="email"] {
		width: 80%;
		display: inline-block;
		padding: 5px;
		background-color: rgba(255,255,255,0.15);
		border: 1px solid rgba(255,255,255,0.2);
		color: rgba(255,255,255,1);
		outline: none;
		font-size: 14px;
		border-radius: 2px;
	}
	div#mailingList input[type="text"]:focus,
	div#mailingList input[type="email"]:focus {
		background-color: rgba(255,255,255,0.3);
		color: rgba(255,255,255,1);
	}
	div#mailingList input[type="submit"],
	div#mailingList input[type="button"] {
		width: 18%;
		display: inline-block;
		padding: 5px;
		background-color: rgba(255,255,255,0.2);
		color: rgba(255,255,255,1);
		outline: none;
		font-size: 14px;
		-webkit-appearance:none;
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 2px;
	}
article.lyrics {
	margin-left: 48px;
	margin-right: 15px;
	display: none;
	border-left: 2px solid rgba(255,255,255,0.2);
	padding-left: 15px;
	}
	article.lyrics h3 {
		font-size: 14px;
	}
	article.lyrics p {
		font-size: 16px;
		padding: 0px;
		margin: 0px;
	}
	article.lyrics p + p{
		margin: 0px;
	}
.sc-player ol.sc-trackslist li.active a {
	font-size: 15px;
	font-family: 'Open Sans';
	font-weight: 400 !important;
	position: relative;
	top: -2px;
}
.sc-player.playing ol.sc-trackslist li.active a {
	position: relative;
	top: -24px;
	left: -9px;
	font-size: 12px;
}
.sc-player {
	width: calc(100% - 50px) !important;
}
.sc-scrubber .sc-time-span {
	background-color: transparent !important;
}
.sc-scrubber .sc-time-indicators {
	background: black !important;
	color: #ffffff !important;
	color: rgba(255, 255, 255, 0.7) !important;
	position: absolute;
	right: 0;
	top: -14px;
	}
	body.white .sc-scrubber .sc-time-indicators {
		background: #ffffff !important;
		color: #000000 !important;
		color: rgba(0,0,0, 0.7) !important;
	}
	.sc-player .sc-scrubber .sc-time-indicators {
		display: none;
		}
	body.white .sc-player ol.sc-trackslist li.active a,
	body.white .sc-player ol.sc-trackslist li:hover a {
	  color: rgba(0,0,0,0.7) !important;
	}
	.sc-player.playing .sc-scrubber .sc-time-indicators {
		display: block;
		}
.sc-scrubber .sc-time-span img {
	background: transparent;
}
.sc-player .sc-info {
	display: none;
}
.albumCredits {
	margin-top: 30px;
}
.albumCredits p {
	margin: 0px;
	margin-bottom: 1px;
	font-size: 14px;
	color: rgba(255,255,255,0.5) !important;
}
.albumCredits p span {
	color: rgba(255,255,255,0.6);
	font-size: 14px;
	padding-left: 5px;
}

footer {
	width: 100% !important;
	padding: 0px !important;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	font-size: 11px;
	text-align: center;
	color: #afafaf;
	color: rgba(191, 191, 191, 0.6);
	}
	footer a {
		color: #afafaf;
		color: rgba(191, 191, 191, 0.7);
		text-decoration: none;
	}
	footer a:hover {
		color: #afafaf;
		color: rgba(191, 191, 191, 0.9);
		text-decoration: none;
	}


/* responsive styles */
@media screen and (max-width: 580px) {
	h2 {
		margin: 15px 15px 0px 15px;
	}
	div.content-wrap {
		margin: 0px !important;
		/* padding-top: 200px; */
		padding-top: 20px;

		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.90) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.90) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
		background-size: 100% 200px;
		background-repeat: no-repeat;
	}

	section#content {
		width: 100% !important;
		padding: 0px;
		margin: 0px !important;
		background-color: rgba(0,0,0,0.90);
	}
	section#content div#logo {
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
	}
	div#social {
		/*margin: 10px 15px 20px 15px;*/
		text-align: center;
		}
	section#content p {
		margin-left: 15px;
		margin-right: 15px;
	}

	div#mailingList {
		margin-left: 15px;
		margin-right: 15px;
	}
	div#mailingList input[type="text"],
	div#mailingList input[type="email"] {
		width: 70%;
	}
	div#mailingList input[type="submit"],
	div#mailingList input[type="button"] {
		width: 28%;
	}


	div#albums .album {
		display: block;
		width: 100%;
		text-align: center;
		}
	.sc-player {
		margin-left: 15px;
		margin-right: 15px;
		width: calc(100% - 80px);
		}
		.sc-scrubber,
		.sc-player ol.sc-trackslist {
			width: calc(100% - 30px) !important;
		}
}
@media screen and (max-width: 580px) and (max-height: 740px) {


}

/* Medium Screen Rules */
@media screen and (min-width: 580px) and (max-width: 1024px) {


}

/* tablet and above */
@media screen and (min-width: 1024px) and (max-width: 1699px) {

}

@media screen and (min-width: 1700px) {

}