/*
-=-------------------------------=-
 *             C S S             *
 *  ~-~-~-~-~-~-~-~-~-~-~-~-~-~  *
 *         B U T T O N S         *
 *  ~-~-~-~-~-~-~-~-~-~-~-~-~-~  *
 *     Design by Anna Greco      *
 *     www.houseofgreco.com      *
 *        Copyright 2026         *
-=-------------------------------=-
*/


/*	-=-----------------=-
	 * BIG PLAY BUTTON *
	-=-----------------=-  */

	.brass-half-dome.upper .wrap,
	.brass-half-dome.rectangle .wrap,
	.brass-half-dome.lower .wrap {
		width: 400px;
		margin: auto;
	}

	.brass-half-dome.upper .wrap,
	.brass-half-dome.lower .wrap {
		height: 200px;
	}

	.brass-half-dome.upper .inner,
	.brass-half-dome.rectangle .inner,
	.brass-half-dome.lower .inner {
		border-bottom: 0;
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.55), 0px -1px 2px rgb(220, 210, 160);
	}

	.brass-half-dome.upper .button { 
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 400px;
		border-bottom-left-radius: 400px;
	}

	.brass-half-dome.upper .button,
	.brass-half-dome.lower .button {
		height: 200px;
	}

	.brass-half-dome.upper .button,
	.brass-half-dome.lower .button {
		transition: 3s ease;
			-moz-transition: 3s ease;
			-webkit-transition: 3s ease;
	}

	.brass-half-dome.upper .button,
	.brass-half-dome.rectangle .button,
	.brass-half-dome.lower .button {
		background-color: #D4BF8E;
		background: url('../images/bones/backgrounds/mineral-gold-leaf-400.jpg');
		border-top: 1px solid rgba(180, 160, 130, 0.5);
		border-right: 1px solid rgba(180, 160, 130, 0.5);
		border-bottom: 1px solid rgba(180, 160, 130, 0.5);
		border-left: 1px solid rgba(180, 160, 130, 0.5);
	}

/*	-=---------------------=-
	 *  LARGE PLAY BUTTON  *
	-=---------------------=-  */

	.latest-release {
		border: 2px solid #7D724D;
		border-radius: 100px;
		box-shadow: inset 0px 0px 7px 4px #968757, 0px 0px 0px 1px rgba(185, 175, 130, 0.5);
		margin: 16px auto;
		padding: 3px;
		position: relative;
		max-width: 155px;
		max-height: 155px;
	}

	.latest-play {
		position: relative;
		top: -7px;
		left: -7px;
	}

	.latest-pause {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
	}

	.playing .latest-pause {
		display: block;
	}

	.latest-play img {
		border-radius: 200px;
		border: 5px solid rgba(0, 0, 0, 0);
	    display: block;
		position: relative;
			top: 4px;
			left: 4px;
		width: 150px;
		height: 150px;
	}

	.latest-pause img {
		border-radius: 200px;
		border: 5px solid rgba(0, 0, 0, 0);
	    display: block;
		width: 150px;
		height: 150px;
	}

	.latest-play img,
	.latest-pause img {
		transition: 0.5s ease;
	}

	.latest-play img:hover,
	.latest-pause img:hover {
		cursor: pointer;
	}

	.playing .latest-pause img {
		border-top: 5px solid rgba(180, 30, 40, 0.5);
		border-right: 5px solid rgba(180, 30, 30, 0.5);
		border-bottom: 5px solid rgba(180, 30, 30, 0.5);
		border-left: 5px solid rgba(180, 30, 30, 0.5);
		box-shadow: 0px 0px 30px rgba(180, 30, 30, 0.5);
	}

	.latest-play img:hover,
	.latest-pause img:hover {
		border-top: 5px solid rgba(35, 140, 115, 0.5);
		border-right: 5px solid rgba(50, 160, 40, 0.5);
		border-bottom: 5px solid rgba(90, 160, 40, 0.45);
		border-left: 5px solid rgba(50, 160, 40, 0.5);
		box-shadow: 0px 0px 30px rgba(50, 160, 40, 0.5);
	}

/*	-=---------------------=-
	 *  SMALL PLAY BUTTON  *
	-=---------------------=-  */

	.audio-row:after {
		clear: both;
		content: "";
		display: table;
	}

    .small-play-button {
		background-color: #BCAE7D;
		background-image: url('../images/bones/buttons/limestone-button.jpg');
		background-position: top center;
		background-repeat: repeat;
		background-size: 200%;
		border: 1px solid rgba(55, 50, 35, 50%);
		border-radius: 1px;
		box-shadow: inset 0px 3px 7px 1px rgba(0, 0, 0, 0.5);
		margin: auto;
	    overflow: auto;
    	width: 300px;
    }

    .small-play-button:hover {
    	cursor: pointer;
		filter: hue-rotate(45deg);
	}

    .audio-column {
		float: left;
		overflow: hidden;
	}

    .audio-column td {
		text-align: left;
	}

	.audio-column button {
		background: #9C9470 url('../images/bones/buttons/gold-button.jpg');
		border: 1px solid #ABA17C;
		border-radius: 100px;
		cursor: pointer;
		position: relative;
		transition: 0.5s;
	}

	.audio-column .button-light {
		box-shadow: 0px 0px 0px 2px #887E5F, 0px 0px 8px 7px #C5B985, 0px 0px 0px 5px #1F1D15, 0px 0px 1px 7px rgba(250, 250, 250, 0.5);
	}

	.audio-column .play-pause,
	.audio-column .artwork,
	.audio-column .buy-track {
		margin: 10px 10px 10px 10px;
		width: 55px;
		height: 55px;
	}

	/*	-=---------------=-
		 *  PLAY / PAUSE *
		-=---------------=-  */

		.audio-column .play-pause {
			background-position: 1px;
			background-size: 200%;
			margin: 10px 10px 10px 10px;
		}

		.audio-column .play {
			border: 0px solid green;
			position: absolute;
			top: -1px;
			left: -1px;
		}

		.audio-column .pause {
			border: 0px solid red;
			display: none;
			position: absolute;
			top: -1px;
			left: -1px;
		}

		.audio-column .playing .pause {
			display: block;
		}

		.audio-column .play img,
		.audio-column .pause img {
			border-radius: 200px;
			border: 5px solid rgba(0, 0, 0, 0);
			display: block;
			transition: 0.5s ease;
			width: 55px;
			height: 55px;
		}

		.audio-column .play img:hover,
		.audio-column .pause img:hover {
			cursor: pointer;
		}

		.audio-column .playing .pause img {
			border-top: 5px solid rgba(180, 30, 85, 0.5);
			border-right: 5px solid rgba(180, 30, 30, 0.5);
			border-bottom: 5px solid rgba(180, 30, 30, 0.5);
			border-left: 5px solid rgba(180, 30, 30, 0.5);
			box-shadow: 0px 0px 20px rgba(180, 30, 30, 0.5);
		}

/*	-=-------------=-
	 * GOLD BUTTON *
	-=-------------=-  */

	.gold-leaf-button-wrap {
		text-decoration: none;
	}

	.gold-leaf-button {
		align-items: center;
		background-color: #BCAE7D;
		background-image: url('../images/bones/backgrounds/mineral-gold-leaf-400.jpg');
		background-position: 155px 475px;
		background-size: 135%;
		border-radius: 1px;
		border-top: 1px solid rgba(180, 160, 130, 0.5);
		border-right: 1px solid rgba(180, 160, 130, 0.5);
		border-bottom: 1px solid rgba(180, 160, 130, 0.5);
		border-left: 1px solid rgba(180, 160, 130, 0.5);
		box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.55), 0px -1px 2px rgb(220, 210, 160);
		color: rgba(75, 60, 35, 0.75);
		display: flex;
		font-family: 'Goudy Old Style';
		font-size: 23px;
		font-weight: 700;
		height: 55px;
		justify-content: center;
		letter-spacing: 0.5px;
		line-height: 45px;
		margin: auto;
		text-align: center;
		text-shadow: 0px 1px 3px rgba(250, 220, 130, 0.75), 0px 0px 0px rgba(0, 0, 0, 0.85), 0px 0px 0px rgba(0, 0, 0, 0.5);
		width: 345px;
	}

	.gold-leaf-button:hover {
		filter: hue-rotate(45deg);
	}

/*	-=------------=-
	 * CONTRIBUTE *
	-=------------=-  */

	.contribution-button-wrap {
		margin: auto;
	    overflow: auto;
		width: 680px;
	}

		.contribution-button-wrap.full {
			height: 60px;
		}

	.contribution-button {
		margin: 10px;
	}

	.contribution-button.horizontal {
		float: left;
	}

		.contribution-button.horizontal.full {
			margin: 0;
			width: 100%;
		}

	.contribution-button a {
		background-clip: initial;
			-moz-background-clip: initial;
				-webkit-background-clip: initial;
		color: rgba(50, 55, 0, 0.7);
		font-family: Asset;
		font-size: 12px;
		font-weight: 900;
		letter-spacing: 1px;
		line-height: 2.5;
		text-align: center;
		text-decoration: none;
		text-shadow: 0px 1px 3px rgba(250, 220, 130, 0.75), 0px 0px 0px rgba(0, 0, 0, 0.85), 0px 0px 0px rgba(0, 0, 0, 0.5);
	}

	.contribution-button a:hover {
		color: rgba(75, 110, 0, 0.9) !important;
		text-shadow: 0px 1px 3px rgba(250, 220, 130, 0.75), 0px 0px 0px rgba(0, 0, 0, 0.85), 0px 0px 0px rgba(0, 0, 0, 0.5) !important;
	}

	.contribution-button .wrap {
	    margin: auto;
		width: 200px;
		height: 58px;
	}

		.contribution-button.horizontal .wrap {
			width: 150px;
		}

	.contribution-button .inner {
	    border-bottom: 0;
		border-radius: 1px;
		box-shadow: 1px 2px 6px #AB9C79;
	}

	.contribution-button .button {
		background: url('../images/bones/backgrounds/mineral-gold-leaf-400.jpg');
		border-top: 1px solid rgba(250, 220, 180, 0.5);
		border-right: 1px solid rgba(180, 160, 130, 0.5);
		border-bottom: 1px solid rgba(180, 160, 130, 0.5);
		border-left: 1px solid rgba(180, 160, 130, 0.5);
		background-position: 98px 475px;
		background-size: 135%;
		border-radius: 1px;
		filter: hue-rotate(-5deg) saturate(1.15);
		transition: 0.75s ease;
	    width: 200px;
		height: 58px;
	}

	.contribution-button .button:hover {
		filter: hue-rotate(26deg) saturate(1.25);
	}

		.contribution-button.horizontal .button {
			width: 150px;
		}

	.contribution-button .border-1 {
		border: 1px solid rgba(50, 60, 30, 0.25);
		margin: 2px;
		height: 53px;
	}

	.contribution-button .border-2 {
		border: 1px solid rgba(50, 60, 30, 0.25);
		margin: 2px;
		height: 47px;
	}

	.contribution-button .text {
		position: relative;
			top: 8px;
		transform: scaleY(2);
	}

/*	-=-------------------------------=-
	 *  M E D I A  •  Q U E R I E S  *
	-=-------------------------------=-  */

	/*	-=---------=-
		 * 800 MAX *
		-=---------=-  */

		@media screen and (max-width: 800px) {

			.gold-leaf-button {
				width: 320px;
			}

			.contribution-button-wrap {
				width: 680px;
			}

		}

	/*	-=---------=-
		 * 750 MAX *
		-=---------=-  */

		@media screen and (max-width: 750px) {

			.gold-leaf-button {
				width: 295px;
			}

			.contribution-button-wrap {
				width: 510px;
			}

		}

	/*	-=---------=-
		 * 700 MAX *
		-=---------=-  */

		@media screen and (max-width: 700px) {

			.gold-leaf-button {
				width: 345px;
			}

		}

	/*	-=---------=-
		 * 600 MAX *
		-=---------=-  */

		@media screen and (max-width: 600px) {

			.contribution-button-wrap {
				width: 340px;
			}

		}

	/*	-=---------=-
		 * 400 MAX *
		-=---------=-  */

		@media screen and (max-width: 400px) {

			.gold-leaf-button {
				width: 99%;
			}

			.contribution-button.horizontal .wrap,
			.contribution-button.horizontal .button {
				width: 130px;
			}

		}