/* 
################################################################################
# Web Site ID: ...by Graf!, v3.00
# Site Design: George Silberstern, ...by Graf!
# Copyrighted: © 1995-2022
# ------------------------------------------------------------------------------
# Module Name: navigation.css
# Description: This stylesheet defines all elements, except color scheme, 
#              related to site navigation.
################################################################################
*/

/* Perimeter Guide */										/* T R B L */

/*
================================================================================
= RESPONSIVE MENU
================================================================================
*/
/* - Site Navigation Object ------------------------------------------------- */
.site-nav {
	position: relative;
	width: 100%;
}
/* -------------------------------------------------------------------------- */

/* - Site Branding and Logo ------------------------------------------------- */
.site-nav > .site-branding {
	display: inline;
}
.site-nav > .site-branding > .site-branding-logo {
	display: inline-block;
	font-size: 20px;
	font-weight: 600;
	font-style: oblique;
	padding: 10px 10px 10px 5px;								/* T R B L */
}
.site-branding-logo img {
}
/* -------------------------------------------------------------------------- */

/* - Hamburger -------------------------------------------------------------- */
.site-nav > .site-nav-control {
	display: none;
}
/* -------------------------------------------------------------------------- */

/* - Site Navigation Links -------------------------------------------------- */
.site-nav > .site-nav-links {
	display: inline;
	float: right;
}
.site-nav > .site-nav-links > a {
	display: inline-block;
	padding: 15px 10px 15px 10px;								/* T R B L */
	min-width: 100px;
	text-align: center;
	text-decoration: none;
}
.site-nav > .site-nav-links > a:hover {
	text-decoration: none;
}
/* -------------------------------------------------------------------------- */

/* - Responsive State ------------------------------------------------------- */
.site-nav > #dropdown-state {
	display: none;
}
/* -------------------------------------------------------------------------- */

/* - Responsive Menu -------------------------------------------------------- */
@media screen and (max-width: 500px), print {
	/* - Site Navigation Object: Dropdown ----------------------------------- */
	.site-nav > .site-nav-control {
		background-color: transparent; /* DO NOT CHANGE! */
		display: inline-block;
		position: absolute;
		right: 0px;
	}
	/* ---------------------------------------------------------------------- */

	/* - Site Branding and Logo --------------------------------------------- */
	.site-branding-logo img {
		width: 85%;
	}
	/* ---------------------------------------------------------------------- */

	/* - Hamburger ---------------------------------------------------------- */
	.site-nav > .site-nav-control > label {
		display: inline-block;
		height: 30px;
		padding: 0px 10px 0px 0px;							/* T R B L */
	}

	.site-nav > .site-nav-control > label:hover, .site-nav-links  #dropdown-state:checked ~ .site-nav-control > label {
		background-color: transparent;
	}

	.site-nav > .site-nav-control > label > span {
		display: block;
		width: 30px;
		height: 6px;
	}
	/* ---------------------------------------------------------------------- */

	/* - Site Navigation Links ---------------------------------------------- */
	.site-nav > .site-nav-links {
		display: block;
		position: absolute;
		height: 0px;
		overflow-y: hidden;
		right: 0px;
		transition: all 0.5s ease-in;
		z-index: 999;
	}
	.site-nav > .site-nav-links > a {
		display: block;
		width: 100%;
	}
	.site-nav > .site-nav-links > a:hover {
		display: block;
		width: 100%;
	}
	/* ---------------------------------------------------------------------- */

	/* - Responsive State --------------------------------------------------- */
	.site-nav > #dropdown-state:not(:checked) ~ .site-nav-links {
		height: 0px;
	}
	.site-nav > #dropdown-state:checked ~ .site-nav-links {
		height: calc( 100vh - 50px);
		overflow-y: auto;
	}
	/* ---------------------------------------------------------------------- */
}
/* -------------------------------------------------------------------------- */