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


* {
	box-sizing: border-box;
}

/*	-=------=-
	 * BODY *
	-=------=-  */

	body {
		animation-name: page-fade-in;
		animation-duration: 4s;
		background: #300015;
		background: #2A0415;
		background: #290716;
		background: #2A0616;
		background: #210B0E;
		background: #2A0E12;
		background: #210B0E;
		background-image: linear-gradient(107deg, #210B0E, #210B0E, pink);
		background-attachment: fixed;
		font-family: 'Baskerville SemiBold';
		font-weight: 400;
		letter-spacing: 1px;
		margin: 0;
		min-width: 320px;
	}

	* {
		box-sizing: border-box;
	}

	@keyframes page-fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.body-wrap {
		margin: auto;
	}

	.clear {
		clear: both;	
	}

	.height-5 {
		height: 5px;
	}

	.height-10 {
		height: 10px;
	}

	.height-15 {
		height: 15px;
	}

	.height-20 {
		height: 20px;
	}

	.height-25 {
		height: 25px;
	}

	.height-30 {
		height: 30px;
	}

	.height-35 {
		height: 35px;
	}

	.height-40 {
		height: 40px;
	}

	.height-45 {
		height: 45px;
	}

	.height-50 {
		height: 50px;
	}

	.height-cross {
		height: 50px;
	}

/*	-=----------=-
	 * TYPEFACE *
	-=----------=-  */

	.i {
		font-style: italic;
	}

	.justify {
		text-align: justify;
	}

	.text-align-center {
		text-align: center;	
	}

	.underline {
		border-bottom: 2px dotted rgba(145, 100, 115, 0.5);
	}

	.caption .u {
		text-decoration: underline;
	}

	p {
		font-size: 22px;
	}

	p.large {
		font-size: 25px;
	}

	.page p {
		padding: 0px 10px 0px 10px;
	}

	h2 {
		font-size: 30px;
		line-height: 1.65;
	}

	h3 {
		font-size: 25px;
		line-height: 1.65;
	}

		.catalogue h2,
		.catalogue h3 {
			font-family: 'Chopin Script';
			font-weight: 400;
			letter-spacing: 0px;
		}

		.catalogue h2 {
			font-size: 50px;
		}

		.catalogue h3 {
			font-size: 40px;
		}

	h3.other {
		font-size: 35px;
		text-shadow: 0px 0px 20px #403B27, 0px 0px 0px #FEEA9C, 0px 3px 0px rgba(0, 0, 0, 0.05), 0px -1px 0px rgba(0, 0, 0, 0.2);

	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	li {
		margin: 0;
		padding: 0;
	}

	p,
	.copyright-credits,
	.menu,
	.page,
	.title {
		font-size: 20px;
		font-smoothing: antialiased;
			-moz-font-smoothing: antialiased;
			-webkit-font-smoothing: antialiased;
		font-weight: 400;
		text-align: center;
	}

	p a,
	.menu a,
	.menu .dropbtn a,
	.page a,
	.copyright-credits,
	.copyright-credits a {
	    text-decoration: none;
    	transition: 0.35s ease;
	}

	.push-menu-button .menu {
	    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
    }

	p a,
	p a:hover,
	.menu .active,
	.menu a:hover,
	.menu .dropbtn a:hover,
	.menu .dropbtn a.active,
	.page a:hover,
	.copyright p a:hover,
	.copyright-credits a:hover {
		border-bottom: 2px solid rgba(145, 100, 115, 0.5);
	}

		.copyright p a {
			border: 0;
		}

	.menu-trigger:hover {
		border: 0 !important;
	}

	.home .title.main {
		display: none;	
	}

	p.thinner,
	.revolving-scriptures.thinner {
		font-family: Baskerville;
		font-size: 22px;
		letter-spacing: 0.5px;
		line-height: 1.35;
	}

	p.prose {
		font-family: Baskerville;
		font-size: 22px;
		letter-spacing: 0.5px;
		line-height: 1.35;
		margin: 0px 10% 0px 10%;
	}

	.correspond p.prose {
		margin: 0px 10% 0px 10%;
	}

/*	-=------=-
	 * MENU *
	-=------=-  */

	nav {
		box-shadow: 0px 0px 15px 1px #0A0004;
	}

	.menu-wrap {
		margin: 0 auto;
		padding: 18px 0px 14px 0px;
	}

	.menu {
		padding: 0px 30px;
	}

	.menu-work {
		text-align: right;
	}

	.menu-correspond {
		text-align: left;
	}

/*	-=------=-
	 * PAGE *
	-=------=-  */

	.page-wrap {
		margin: 10px 0px 0px 0px;
	}

		.home .page-wrap {
			margin: 35px 0px 0px 0px;
		}

	/*	-=--------=-
		 * FUTURE *
		-=--------=-  */

		.future {
			font-size: 115%;
			margin: 0;
			text-align: center;
		}

	/*	-=-------=-
		 * TITLE *
		-=-------=-  */

		.title {
			font-family: 'Chopin Script';
			font-size: 425%;
			font-weight: 400;
			text-align: center;
		}

		.title.home {
		    padding: 0px 0px 0px 0px;
		}


		.title.main {
			font-size: 310%;
		}

		.title,
		.title a {
		    padding: 10px 0px 0px 0px;
			text-decoration: none;
		    transition: 0.5s ease;
		}

	/*	-=----------=-
		 * SUBTITLE *
		-=----------=-  */

		.subtitle {
			font-size: 150%;
			font-weight: 400;
			margin: 0;
			position: relative;
				top: 15px;
			text-align: center;
		}

	/*	-=---------=-
		 * ENLARGE *
		-=---------=-  */

		.revolving-scriptures {
			width: 65%;
			margin: auto;
		}

	/*	-=---------=-
		 * ENLARGE *
		-=---------=-  */

		.enlarge {
			font-size: 200%;
			text-align: center;
		}

	/*	-=-------=-
		 * IMAGE *
		-=-------=-  */

		img,
		video {
			border-radius: 7px;
		}

		.home .album-artwork,
		.home audio {
			width: 40%;
			min-width: 400px;
			max-width: 500px;
		}

		.composer-image {
			border: 0px solid rgba(145, 100, 115, 0.5);
			border-radius: 12px;
			box-shadow: 0px 3px 8px 0px rgba(35, 10, 15, 0.5);
		}

		a.swipebox:hover {
			border: 0;
			opacity: 0.75;
		}

		.swipebox img {
			width: 300px;
		}

	/*	-=---------=-
		 * DIVIDER *
		-=---------=-  */

		.gold-divider {
			display: block;
			filter: brightness(0.8) hue-rotate(7deg) saturate(0.75);
			margin: auto;
			width: 50%;
			max-width: 450px;
			height: 30px;
		}

			.gold-divider.home {
				margin: 100px auto 0px auto;
			}

		.links .gold-divider,
		footer .gold-divider {
			position: relative;
				top: -15px;
		}

		footer .gold-divider.copyright-divider {
			position: relative;
				top: 15px;
		}

	/*	-=---------=-
		 * MARQUEE *
		-=---------=-  */

		.marquee {
			margin: auto;
			width: 640px;
    	}

	/*	-=---------=-
		 * GALLERY *
		-=---------=-  */

		.gallery {
			border: 0px solid red;
			margin: auto;
    		width: 95%;
    	}

		.gallery::after {
			content: "";
			display: table;
			clear: both;
		}

		.gallery .upper-top img,
		.gallery .upper-bottom {
			display: block;
			margin: auto;
			width: 57%;
		}

		.gallery.upper-top {
		    padding: 0px 0px 10px 0px;
		}

			.gallery .top {
				border: 8px solid rgb(255, 251, 252);
				width: 100%;
			}

			.gallery.upper-bottom td .left {
				padding: 0px 10px 0px 0px;
			}

			.gallery.upper-bottom td .center {
				padding: 0px 10px 0px 0px;
			}

			.gallery.upper-bottom td .right {
				padding: 0px 0px 0px 0px;
			}

			.gallery .image-caption {
				float: left;
				margin: 10px;
				width: 31.6%;
			}

			.gallery img {
				border: 1px solid rgba(145, 100, 115, 0.5);
				border-radius: 12px;
				box-shadow: 0px 3px 8px 0px rgba(35, 10, 15, 0.5);
				width: 100%;
			}

			.gallery .caption {
				background: rgba(30, 10, 15, 0.5);
			    border-radius: 12px;
				font-family: 'Baskerville';
			    font-size: 15px;
			    font-weight: 700;
				margin: 5px 0px 20px 0px;
				overflow: auto;
			    padding: 10px;
			    height: 100px;
			}

	/*	-=--------=-
		 * PASSED *
		-=--------=-  */

		.passed {
			position: relative;
			top: 2px;
		}

		img.passed {
			display: none;
			filter: brightness(2.5) hue-rotate(5deg);
			position: relative;
			top: 4px;
			width: 16px;
		}

	/*	-=------=-
		 * SOLD *
		-=------=-  */

		.sold {
			font-size: 80%;
			position: relative;
				top: -8px;
			text-align: center;
		}

/*	-=--------=-
	 * FOOTER *
	-=--------=-  */

	footer {
		background: rgba(230, 145, 160, 0.25);
		background: rgba(250, 175, 205, 0.25);
		border: 0px solid orange;
		width: 100%;
	}

	/*	-=-------=-
		 * LINKS *
		-=-------=-  */

		footer .links {
			margin: auto;
			width: 39%;
			min-width: 500px;
		}

		.links img {
			padding: 0px 25px 0px 0px;
		}

		p.links-text {
			text-align: left !important;
		}

		.icon {
			position: relative;
				left: 5px;
			width: 200px;
		}

		.tiny-gallery img {
		    display: block;
		    float: left;
			margin: 3px 3px 3px 3px;
			padding: 0px 0px 0px 0px;
			width: 50px;
			height: 50px;
		}

		.tiny-gallery a:hover {
			opacity: 0.35;
			transition: 1s ease;
    		filter: invert(1) hue-rotate(-217deg) brightness(12) saturate(0.9);
		}

	/*	-=-----------=-
		 * COPYRIGHT *
		-=-----------=-  */

		.copyright {
			background: rgba(170, 150, 155, 0.3);
			background: transparent;
			border: 0px solid orange;
			width: 100%;
		}

		.copyright-credits {
			font-size: 95%;
			padding: 30px;
			line-height: 1.5;
			margin: 0;
			text-align: center;	
		}

		.design {
			font-size: 12px;
			letter-spacing: 7px;
			text-transform: uppercase;
		}
							
/*	-=---------------=-
	 * MEDIA QUERIES *
	-=---------------=-  */

	/*	-=--------=-
		 * 1225px *
		-=--------=-  */

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

			.gallery img {
				width: 31.5%;
			}

		}

	/*	-=--------=-
		 * 1150px *
		-=--------=-  */

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

			.gallery img {
				width: 31.4%;
			}

		}

	/*	-=--------=-
		 * 1100px *
		-=--------=-  */

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

			.gallery img {
				width: 31.3%;
			}

			.frame-image-top {
				width: 65%;
			}

		}

	/*	-=--------=-
		 * 1050px *
		-=--------=-  */

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

			.menu {
				padding: 0px 25px;
			}

			.gallery img {
				width: 31.2%;
			}

		}

	/*	-=--------=-
		 * 1000px *
		-=--------=-  */

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

			.menu {
				padding: 0px 17px;
			}

			.revolving-scriptures {
				width: 70%;
			}

			.gallery img {
				width: 31.1%;
			}

			.frame-image-top {
				width: 70%;
			}

			.frame-33 {
				width: 50%;
			}

			.frame-50 {
				width: 100%;
			}

			p.prose {
				margin: 0px 9% 0px 9%;
			}

		}

	/*	-=-------=-
		 * 950px *
		-=-------=-  */

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

			.gallery img {
				width: 30.7%;
			}

		}

	/*	-=-------=-
		 * 900px *
		-=-------=-  */

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

			.menu {
				padding: 0px 15px;
			}

			.menu,
			.menu .dropbtn, .menu .dropbtn a {
				font-size: 17px !important;
			}

			.revolving-scriptures {
				width: 75%;
			}

			.gallery img {
				width: 30.6%;
			}

			.page {
				margin: 0px 40px 0px 40px;
			}

			.gold-divider {
				width: 100%;
			}

			.links {
				width: 39%;
				min-width: 500px;
			}

			.frame-wrap {
				margin: 0px 20px 40px 20px;
			}

			.frame-image-top {
				width: 75%;
			}

			.plate-image {
				margin-bottom: 5px;
			}

			p.prose {
				margin: 0px 8% 0px 8%;
			}

			.correspond p.prose {
				margin: 0px 10% 0px 10%;
			}

		}

	/*	-=-------=-
		 * 850px *
		-=-------=-  */

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

			.gallery img {
				width: 30.5%;
			}

			.enlarge {
				font-size: 175%;
			}

		}

	/*	-=-------=-
		 * 825px *
		-=-------=-  */

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

			.gallery {
				width: 100%;
			}

		}

	/*	-=-------=-
		 * 800px *
		-=-------=-  */

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

			.gallery img {
				width: 30.4%;
			}

			.revolving-scriptures {
				width: 80%;
			}

			.page {
				margin: 0px 30px 0px 30px;
			}

			.menu,
			.menu .dropbtn, .menu .dropbtn a {
				font-size: 15px !important;
			}

			.menu {
				padding: 0px 10px;
			}

			.menu button {
				padding: 2px 0px 0px 0px;			
			}

			.frame-wrap {
				margin: 0px 15px 35px 15px;
			}

			.frame-image-top {
				width: 80%;
			}

			p.prose {
				margin: 0px 7% 0px 7%;
			}

			.correspond p.prose {
				margin: 0px 10% 0px 10%;
			}

		}

	/*	-=-------=-
		 * 750px *
		-=-------=-  */

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

			.gallery img {
				width: 30.1%;
			}

		}

	/*	-=-------=-
		 * 725px *
		-=-------=-  */

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

			.gallery img {
				width: 30%;
			}

		}

	/*	-=-------=-
		 * 701px *
		-=-------=-  */

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

			.push-menu-button,
			.space .dainty {
				display: none;
			}

		}

	/*	-=-------=-
		 * 700px *
		-=-------=-  */

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

			header .laptop {
				display: none;
			}

			.menu {
				padding: 0;
			}

			.revolving-scriptures {
				width: 85%;
			}

			.push-menu-button .menu {
				box-shadow: none;
			}

			.title.main div {
				padding: 20px 0px 20px 0px;
			}

			.gallery img {
				width: 28.2%;
			}

			.subtitle {
			    font-size: 145%;
			}

			.page {
				margin: 0px 20px 0px 20px;
			}

			.frame-wrap {
				margin: 0px 10px 30px 10px;
			}

			.frame-image-top {
				width: 85%;
			}

			.gallery {
				margin: 1.5% 3% 3% 3%;
			}

			.frame-33 {
				width: 100%;
			}

			.space .mammoth {
				display: none;
			}

			p.prose {
				margin: 0px 6% 0px 6%;
			}

			.correspond p.prose {
				margin: 0px 5% 0px 5%;
			}

		}

	/*	-=-------=-
		 * 650px *
		-=-------=-  */

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

			.gallery img {
				width: 27.5%;
			}

		}

	/*	-=-------=-
		 * 600px *
		-=-------=-  */

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

			.title {
				font-size: 375%;
			}

			.subtitle {
			    font-size: 140%;
			}

			.revolving-scriptures {
				width: 90%;
			}

			.frame-image-top {
				width: 90%;
			}

			p.prose {
				margin: 0px 5% 0px 5%;
			}

		}

	/*	-=-------=-
		 * 550px *
		-=-------=-  */

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

			.links {
				min-width: 450px;
			}

			.home .album-artwork,
			.home audio {
				width: 90%;
				min-width: 300px;
				max-width: 400px;
			}

		}

	/*	-=-------=-
		 * 526px *
		-=-------=-  */

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

			.copyright.dainty {
				display: none;
			}

		}

	/*	-=-------=-
		 * 525px *
		-=-------=-  */

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

			.copyright.mammoth {
				display: none;
			}

		}

	/*	-=-------=-
		 * 500px *
		-=-------=-  */

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

			.gallery img {
				width: 27%;
			}

			.justify {
				text-align: left;
			}

			.title {
				font-size: 290%;
			}

			.subtitle {
			    font-size: 130%;
			}

			.left-scroll-wrap {
				padding: 5px 15px 0px 0px;
			}

			.right-scroll-wrap {
				padding: 5px 0px 0px 15px;
			}

			.left-scroll, .right-scroll {
				width: 45px;
			}

			.frame-image-top {
				width: 95%;
			}

			p.prose {
				margin: 0px 4% 0px 4%;
			}

			.copyright,
			.gold-divider {
				margin: auto;
			}

			.links {
				min-width: 400px;
			}

			footer .links {
				padding: 0px 5% 0px 5%;
			}

			.icon {
				width: 175px;			
			}

			.hide-on-mobile {
				display: none;			
			}

		}

	/*	-=-------=-
		 * 475px *
		-=-------=-  */

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

			.catalogue h2 {
				font-size: 45px;
			}

			.catalogue h3 {
				font-size: 35px;
			}

		}

	/*	-=-------=-
		 * 450px *
		-=-------=-  */

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

			.menu-wrap {
				width: 90%;
			}

			.gallery {
				margin: 1.5% 2% 3% 2%;
			}

			.frame-image-top {
				width: 100%;
			}

			.links {
				min-width: 350px;
			}

			video {
			    width: 90%;
			}

			.catalogue h2 {
				font-size: 42px;
			}

			.catalogue h3 {
				font-size: 32px;
			}

		}

	/*	-=-------=-
		 * 400px *
		-=-------=-  */

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

			.menu-wrap {
				width: 90%;
			}

			.subtitle {
			    font-size: 110%;
			}

			.gallery {
			    margin: 1.5% 3.5% 3% 3.5%;
			}

			.gallery img {
			    margin: 9px;
				width: 26%;
			}

			.left-scroll, .right-scroll {
				width: 40px;
			}

			.enlarge {
				font-size: 150%;
			}

			p.prose {
				margin: 0px 3% 0px 3%;
			}

			.icon {
				width: 160px;
			}

			.links {
				min-width: 300px;
			}

			.page {
				margin: 0px 0px 0px 0px;
			}

			.catalogue h2 {
				font-size: 39px;
			}

			.catalogue h3 {
				font-size: 29px;
			}

			.home .album-artwork,
			.home audio {
				width: 80%;
				min-width: 300px;
				max-width: 400px;
			}

		}

	/*	-=-------=-
		 * 350px *
		-=-------=-  */

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

			body {
				background-image: linear-gradient(107deg, #210B0E, #210B0E, pink, pink);
			}

			.subtitle {
			    font-size: 100%;
			}

			.gallery {
			    margin: 1.5% 3.75% 3% 3.75%;
			}

			.gallery img {
			    margin: 9px;
				width: 25.5%;
			}

			.left-scroll-wrap {
				padding: 5px 10px 0px 0px;
			}

			.right-scroll-wrap {
				padding: 5px 0px 0px 10px;
			}

			.left-scroll, .right-scroll {
				width: 35px;
			}

		}