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


/*	-=--------=-
	 * HEADER *
	-=--------=-  */

		.header-title a,
		.header-subtitle,
		.dropbtn,
		.dropbtn a,
		.dropdown-content a {
			background-clip: text;
				-moz-background-clip: text;
					-webkit-background-clip: text;
			color: transparent;
			text-shadow: 0px 0px 3px #554918, 0px 0px 0px #FFF596, 0px 3px 0px rgba(0, 0, 0, 0.5), 0px -1px 0px rgba(0, 0, 0, 0.5);
		}

		.dropbtn a:hover,
		.dropbtn .active,
		.dropbtn .active a,
		.dropbtn:hover,
		.dropdown:hover .dropbtn,
		.dropdown-content a:hover,
		.dropdown-content .links a:hover,
		.dropdown-content .links a.active,
		.header-title a:hover {
			border: 0;
			color: #DACB8C;
			cursor: pointer;
			text-decoration: none;
		}

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

		.header-title {
			font-size: 350%;
			padding: 10px 0px 0px 0px;
			text-align: center;
		}

		.header-title a {
			border: 0px solid black;
			margin: 0 auto;
			font-family: 'Trajan Pro';
			font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
					-webkit-font-smoothing: antialiased;
			font-weight: 300;
			letter-spacing: 0;
			line-height: 1.35;
			margin: 0;
			overflow-wrap: break-word;
			padding: 10px 0px 0px 0px;
			text-decoration: none;
			transition: 0.45s ease;
				-moz-transition: 0.45s ease;
					-ms-transition: 0.45s ease;
						-o-transition: 0.45s ease;
							-webkit-transition: 0.45s ease;
			height: 60px;
 		}

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

		.header-subtitle {
			border: 0px solid black;
			font-family: 'Goudy Old Style';
			font-size: 150%;
			letter-spacing: 0.1em;
			line-height: 1.625;
			position: relative;
				top: -12px;
			text-align: center;
		}

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

		header nav {
			margin: auto;
			padding: 0px 0px 3px 0px;	
			width: fit-content;
		}

		.dropdown {
			display: inline-block;
			padding: 0px 25px 0px 0px;
			position: relative;
			z-index: 2;
		}

			.dropdown.end {
				padding: 0;
			}

		.dropbtn,
		.links {
			border: 0;
			display: inline-block;
			font-size: 20px;
			font-weight: 300;
			letter-spacing: 2.25px;
			line-height: 1.5;
			padding: 0;
			position: relative;
			text-decoration: none;
							-moz-transition: 0.45s ease;
						-ms-transition: 0.45s ease;
					-o-transition: 0.45s ease;
				-webkit-transition: 0.45s ease;
			transition: 0.45s ease;
			text-transform: uppercase;
		}

		.dropbtn {
			background: 0;
			border: 0;
			display: inline-block;
			margin: 0;
			padding: 0;
		}

		.dropbtn,
		.dropbtn a {
			font-family: 'Josefin Sans';
			font-size: 18px;
			font-weight: 300;
			letter-spacing: 1px;
			line-height: 1.625;
			text-decoration: none;
			text-transform: uppercase;
							-moz-transition: 0.45s ease;
						-ms-transition: 0.45s ease;
					-o-transition: 0.45s ease;
				-webkit-transition: 0.45s ease;
			transition: 0.45s ease;
			font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
					-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
							-webkit-font-smoothing: antialiased;
		}

		.dropdown-content {
			display: none;
			position: absolute;
				top: 21px;
				left: -15px;
							-moz-transition: 0.45s ease;
						-ms-transition: 0.45s ease;
					-o-transition: 0.45s ease;
				-webkit-transition: 0.45s ease;
			transition: 0.45s ease;
			min-width: 225px;
			z-index: 1;
		}

		.dropdown-content a {
			font-family: 'Josefin Sans';
			font-size: 18px;
			font-weight: 300;
			letter-spacing: 1px;
			line-height: 1.25;
			display: block;
			padding: 12px 15px 0px 15px;
			text-align: left;
			text-decoration: none;
			text-transform: uppercase;
							-moz-transition: 0.45s ease;
						-ms-transition: 0.45s ease;
					-o-transition: 0.45s ease;
				-webkit-transition: 0.45s ease;
			transition: 0.45s ease;
			font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
					-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
							-webkit-font-smoothing: antialiased;
		}

		.dropdown:hover .dropdown-content {
			display: block;
		}

		.dropdown-space {
			height: 10px;
			padding: 0;		
		}

		.dropdown-content .links {
			background: #21262C url('../images/bones/backgrounds/mineral-basalt-smooth-warm-1300.jpg');
			border: 1px solid #4C3D3D;
			border-radius: 2px;
			box-shadow: 0px 5px 7px 0px #221919;
			display: block;
			padding: 0px 0px 13px 0px;
			width: 250px;
			min-height: 219px;
		}

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

	/*	-=----------=-
		 * 1000 MAX *
		-=----------=-  */

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

			.header-title {
				font-size: 300%;
			}

		}

	/*	-=---------=-
		 * 900 MAX *
		-=---------=-  */

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

			.header-title {
				font-size: 275%;
			}

		}

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

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

			.header-title {
				font-size: 250%;
			}

		}

	/*	-=---------=-
		 * 751 MIN *
		-=---------=-  */

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

			.danny.small {
				display: none;
			}

		}

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

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

			.danny.medium {
				display: none;
			}

		}

	/*	-=----------=-
		 * 701 MIN *
		-=----------=-  */

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

			.words .show {
				display: none;
			}

		}

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

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

			.header-title {
				font-size: 225%;
				padding: 10px 0px 5px 0px;
			}

			.words .hide {
				display: none;
			}

			.words .show {
				display: contents;
			}

		}

	/*	-=---------=-
		 * 650 MAX *
		-=---------=-  */

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

			.header-title {
				font-size: 200%;
			}

		}

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

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

			.header-title {
				font-size: 175%;
			}

		}

	/*	-=---------=-
		 * 550 MAX *
		-=---------=-  */

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

			.header-title {
				font-size: 275%;
			}

		}

	/*	-=----------=-
		 * 501 MIN *
		-=----------=-  */

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

			.trigram {
				display: none;
			}

		}

	/*	-=----------=-
		 * 500 MAX *
		-=----------=-  */

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

			.header-title a,
			.header-subtitle,
			.dropbtn a {
				background-clip: none;
					-moz-background-clip: none;
						-webkit-background-clip: none;
				color: #C4B695;
				text-shadow: 0px 0px 1px rgba(80, 60, 20, 0.15), 0px 0px 5px rgba(80, 60, 20, 0.15);
			}

			.header-subtitle {
				letter-spacing: 0em;			
			}

			.dropbtn,
			.dropbtn a {
				font-size: 25px;
			}

			.words {
				display: none;
			}

			.trigram {
				position: relative;
					top: -1px;
				    right: 3px;
			}

		}

	/*	-=---------=-
		 * 450 MAX *
		-=---------=-  */

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

			.header-title {
				font-size: 250%;
			}

		}

	/*	-=---------=-
		 * 425 MAX *
		-=---------=-  */

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

			.header-title {
				font-size: 225%;
			}

		}

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

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

			.header-title {
				font-size: 200%;
			}

			.top-menu {
				height: 150px;
			}

		}

	/*	-=---------=-
		 * 375 MAX *
		-=---------=-  */

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

			.trigram {
					top: -2px;
			}

		}

		@media screen and (max-width: 1275px) {.end .dropdown-content {left: -16px;}}