/* //v1.1 ------------------- Reset ----------------------------------- */
@media {
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
ul { margin: 0; padding:0; } 
header, nav, main, article, section, aside, footer {
	margin:0;
	padding:0;
	display: block;}
}
/* ------------------- Variables ------------------ */
:root {
	/* --- Colors --- */
	--color-darkest: #000000; 
	--color-dark: #0c0cce; 
	--color-medium-dark: #4a68e1; 
	--color-medium-light: #35aff0; 
	--color-light: #aedef7;	
	--color-lightest: #ffffff;
	--color-contrast: #d62626;
	--color-shadow: #333333;
	
	--page-bg-color: var(--color-lightest);
	
	--contact-bg-color: var(--color-light);
		--contact-text-color: var(--color-darkest);
			--contact-link-color: var(--color-darkest);
	
	--header-bg-color: var(--color-lightest);
		--header-text-color: var(--color-dark);
			--header-link-color: var(--color-dark);
	
	--mobilemenu-bg-color: var(--color-lightest);
		--mobilemenu-text-color: var(--color-dark);
	--menu0-bg-color: var(--color-lightest);
		--menu0-text-color: var(--color-dark);
		--menu0-hoverbg-color: var(--color-medium-dark);
		--menu0-hovertext-color: var(--color-lightest);
		--menu0-hightlight-bg-color: var(--colour-medium-light);
			--menu0-highlight-text-color: var(--colour-lightest);
				
		--menu1-bg-color: var(--color-light);
			--menu1-text-color: var(--color-dark);
			--menu1-hover-activebg-color: var(--color-medium-dark);
			--menu1-hover-activetext-color: var(--color-lightest);
			--menu1-border-color: var(--color-medium-dark);
						
			--menu2-bg-color: var(--color-lightest);
				--menu2-text-color: var(--color-medium-dark);
				--menu2-hoverbg-color: var(--color-medium-light);
				--menu2-hovertext-color: var(--color-lightest);
				--menu2-border-color: var(--color-medium-dark);
	
	--content-bg-color: var(--color-lightest);
		--content-text-color: var(--color-darkest);
			--content-header-color: var(--color-dark);
			--content-link-color: var(--color-darkest);
			--content-list-color: var(--color-dark);
			
	--table-header-bg-color: var(--color-dark);
	--table-header-text-color: var(--color-light);
		--table-row-bg-color: var(--color-light);
		--table-row-alt-bg-color: var(--color-lightest);
		--table-row-text-color: var(--color-darkest);
		--table-row-alt-text-color: var(--color-darkest);
	
	--form-bg-color: var(--color-medium-light);
		--form-header-text-color: var(--color-lightest);
		--form-text-color: var(--color-light);
		--form-link-color: var(--color-lightest);
		--form-element-border-color: var(--color-medium-dark);
		--form-element-bg-color: var(--color-light);
	
	--footer-bg-color: var(--color-dark);
		--footer-text-color: var(--color-light);
		--footer-link-color: var(--color-lightest);
		
	--message-bg-color: var(--color-lightest);
		message-text-color: var(--color-darkest);
		message-link-color: var(--color-darkest);
		
	/* --- Spacing --- */
	--std-gap: 20px;
	--std-min-gap: calc(var(--std-gap)*0.75);
	--tiny-gap: calc(var(--std-gap)*0.25);
	--min-gap: calc(var(--std-gap)*0.5);
	--max-gap: calc(var(--std-gap)*2);
	--no-gap: 0px;
}

/* --- General Selectors --- */
table {
	margin: var(--min-gap);
	font-weight: normal;
	}
tr:nth-child(even) {
	background-color: var(--table-row-bg-color);
	color: var(--table-row-text-color);
	}
tr:nth-child(odd) {
	background-color: var(--table-row-alt-bg-color);
	color: var(--table-row-alt-text-color);
	}
tr:first-child td {
	text-align: center;
	vertical-align:top;
	color:var(--table-header-text-color);
	background-color: var(--table-header-bg-color);
	text-decoration: bold;
	}
td {
	padding: var(--min-gap);
	text-align: left;
	vertical-align:top;
	}
td a:link, td a:visited, td a:active, td a:hover {
	color: var(--table-row);
	font-weight: bold;
	text-decoration: none;
	}
td a:hover {
	color: #ffffff;
	}
/* --- All Browser Layout --- */
@media screen {
body {
	font-family: 'Archivo Narrow', sans-serif, verdana;
	font-size:16px;
	font-weight: normal;
	color: var(--content-text-color);
	margin: var(--no-gap) var(--no-gap) var(--no-gap) var(--no-gap);
	background-color: var(--content-bg-color);
	}
#page-container {
	background-color:var(--page-bg-color);
	width: 95%;
	min-width:300px;
	margin-left: auto;
	margin-right: auto;
	}
#top-container {
	z-index:100;
	float:left;
	width:100%;
	}
header {
	top:0;
	width:100%;
	float:left;
	background-color: var(--header-bg-color);
	}
header figure {
	margin:var(--no-gap);
}
#logo-container {
	background-image: ;
	background-repeat: repeat-x;
	position:relative;
	display:block;
	width:100%;
	min-width:300px;
	float:left;
	margin: var(--no-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	}
#logo-container p{
	font-family: 'Archivo Narrow', san-serif;
	font-size:16px;
	font-display:swap;
	color:var(--header-text-color);
	width:100%;
	text-align: center;
	clear:none;
	margin: var(--std-gap) auto var(--no-gap) auto;
	}
#logo-container b{
	font-size:150%;
	}
#logo-container A:link, #logo-container A:visited, #logo-container A:active {
	color: var(--header-link-color);
	text-decoration: none;
	border-width: 0px;
	margin: var(--no-gap);
	}
#logo-container A:hover {
	color: var(--color-contrast);
	}
#logo-container img{
	max-width:100px;
	float:left;
	margin:var(--std-gap) var(--no-gap) var(--no-gap) var(--std-gap);
	border-width: 0px;
	}
nav {
	z-index:100;
	position:relative;
	}
#menu-container {
	position: relative;
	float:left;
	width:100%;
	max-width:1000px;
	background-color: var(--menu0-bg-color);
	border-radius:0px 0px 0px 0px;
	}
#menu {
	position: sticky;
	top:0;
	float:left;
	width:100%;
	margin: var(--min-gap) var(--no-gap) var(--min-gap) var(--no-gap);
	}
main {
	margin:var(--std-gap) var(--no-gap) var(--no-gap) var(--no-gap); 
	float:left;
	width:100%;
	min-width:300px;
	line-height:24px;
	}
main h1, main h2, main h3, main h4, main h5, main h6 {
	font-family: 'Oswald', san-serif, verdana;
	font-display: swap;
	margin: var(--std-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	color:var(--content-header-color);
	font-size: 125%;
	}
main h1 {
	font-size: 150%;
	}
main p {
	margin: var(--no-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	text-align: left;
	}
main p b {
	font-weight:bold;
	}
main ol, main ul{
	margin: var(--no-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	}
main ul{
	/*list-style-image: url('/images/like-button-media-bullet.svg');*/
	}
main ul li, main ol li{
	margin: var(--tiny-gap) 50px var(--tiny-gap) var(--max-gap);
	color: var(--content-list-color);
	}
main ul li b, main ol li b {
	font-weight:bold;
	}
main figure{
	margin: var(--no-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	max-width:300px;
	float:right;
}

main figure figcaption {
	width: 100%;
	text-align: center;
	font-size:75%;
	font-style: italic;
}

main figure img{
	margin: var(--no-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	width: 100%;
	}
main figure img:nth-of-type(2n) {
	float:left;
	}
main a:link, main a:visited, main a:active, main a:hover {
	color: var(--content-link-color);
	font-weight: bold;
	text-decoration: none;
	}
main a:hover {
	color: var(--color-contrast);
	}
main form {
	display:block;
	float:left;
	font-weight: normal;
	margin: var(--no-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	background-color: var(--form-bg-color);
	margin: var(--std-gap);
	padding: var(--min-gap);
	}
main input, main select, main textarea, main [type="checkbox"] {
	float:left;
	text-align:left;
	border: solid 1px var(--form-element-border-color);
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin-bottom:var(--min-gap);
	}
main input, main textarea {
	background-color: var(--form-element-bg-color);
	}
main [type="checkbox"]{
	width:var(--std-gap);
	height:var(--std-gap);
	margin:var(--tiny-gap) var(--no-gap) var(--no-gap) var(--no-gap);
	}
main input.button {
	background-color:var(--color-contrast);
    color: var(--color-lightest);
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin: var(--min-gap) auto var(--min-gap) auto;
	text-align:center;
	}
main label {
	clear: left;
	text-align: right;
	color: var(--form-text-color);
	padding: var(--tiny-gap) var(--min-gap) var(--tiny-gap) var(--no-gap);
	margin-bottom:var(--min-gap);
	float:left;
	}
/*#cartbutton {
	background-color: #ff4545;
    border: solid 1px #45a2ff;
	color: #e6e6e6;
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin: var(--min-gap) auto var(--min-gap) auto;
	width:45%;
	text-align:center;
	border-radius:15px;
	}*/
#formtotop {
	width:95%;
	min-width:300px;
	display:block;
	float:right;
	color:var(--form-header-text-color);
	font-weight: normal;
	background-color: var(--form-bg-color);
	position:fixed;
	bottom:0;
	z-index:0;
	}
#formtotop p {
	width:100%;
	font-family: 'Oswald', sans-serif, verdana;
	font-weight:bold;
	font-display: swap;
	text-align: center;
	margin: var(--std-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	font-size:23px;
	clear:both;
	}
#formtotop a {
	color: var(--form-link-color);
	text-decoration:none;
	}
footer {
	width:100%;
	clear:both;
	background-color:var(--footer-bg-color);
	position:relative;
	color:var(--footer-text-color);
	}
footer p{
	text-align: center;
	font-size:12px;
	padding: var(--std-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	}
footer a:link, footer a:visited, footer a:active, footer a:hover {
	color: var(--footer-link-color);
	font-weight: normal;
	text-decoration: none;
	}
footer a:hover {
	color: var(--color-contrast);
	}
/*--- Dialogue Box ---*/
.modal-container {
	margin: 0 auto;
	padding-top: var(--no-gap);
	position: relative;
	}
.modal-container button {
	display: block;
	margin: 0 auto;
	color: var(--color-contrast);
	width: 160px;
	height: 50px;
	line-height: 50px;
	background: var(--message-bg-color);
	font-size: 22px;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 var(--tiny-gap) var(--tiny-gap) -var(--tiny-gap) var(--color-shadow);
	transition: background 0.3s ease-in;
	}
.modal-container .modal-backdrop {
	height: 0;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.2s ease-in;
	}
.modal-container #modal-toggle {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	}
.modal-container #modal-toggle:hover ~ button {
	background: var(--color-contrast);
	}
.modal-container #modal-toggle:checked {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 950;
	opacity: 0;
	}
.modal-container #modal-toggle:checked ~ .modal-backdrop {
	background-color: rgba(0, 0, 0, 0.6);
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 950;
	pointer-events: none;
	opacity: 1;
	}
.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content {
	background-color: var(--message-bg-color);
	max-width: 300px;
	width: 100%;
	height: 280px;
	padding: var(--min-gap) 30px;
	position: absolute;
	left: calc(50% - 200px);
	top: 12%;
	border-radius: 4px;
	z-index: 999;
	pointer-events: auto;
	cursor: auto;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
	}
.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close {
	color: var(--color-darkest);
	position: absolute;
	right: 2px;
	top: 0;
	padding-top: 7px;
	background: #fff;
	font-size: 16px;
	width: 25px;
	height: 28px;
	font-weight: bold;
	padding-left:var(--min-gap);
	cursor: pointer;
	}
.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button {
	top: initial;
	bottom: var(--std-gap);
	right: var(--std-gap);
	background: var(--color-contrast);
	color: var(--color-lightest);
	width: 50px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: normal;
	}
.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button:hover {
	color: var(--color-contrast);
	background: var(--color-light);
	}
.modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close:hover {
	color: var(color-contrast);
	}
}
/* --- All Browser Forms --- */
@media screen {
#form {
	width:96%;
	min-width:300px;
	display:block;
	float:right;
	color:var(--form-text-color);
	font-weight: normal;
	background-color: var(--form-bg-color);
	border: solid 0px var(--form-element-border-color);
	padding: 2%;
	margin-top: var(--std-gap);
	position:relative;
	z-index:1;
}
#form a {
	text-decoration:none;
	}
#form input, #form select, #form textarea, #form [type="checkbox"]{
	float:left;
	text-align:left;
	background-color: var(--form-element-bg-color);
	border: solid 0px var(--form-element-border-color);
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin: var(--min-gap) var(--no-gap) var(--min-gap) var(--min-gap);
	}
#form input {
	width:44%;
	}
#form select {
	width:45%;
	}
#form textarea {
	width:44%;
	}
#form [type="checkbox"]{
	width:var(--std-gap);
	height:var(--std-gap);
	}
#form input.button {
    background-color: var(--color-contrast);
    color: var(--color-lightest);
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin: var(--min-gap) auto var(--min-gap) auto;
	width:45%;
	text-align:center;
	border-radius:15px;
	}
#form input.button:hover {
    background-color: var(--color-lightest);
    color: var(--color-contrast);
	}
#form label {
	clear: left;
	width:44%;
	text-align: right;
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--no-gap);
	margin-bottom:var(--min-gap);
	float:left;
	}
#form p {
	width:100%;
	font-family: 'Oswald', sans-serif, verdana;
	font-weight: bold;
	font-display: swap;
	text-align: center;
	margin: var(--std-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	font-size:23px;
	clear:both;
	color: var(--form-header-text-color);
	}
#form strong {
	font-size:16px;	
	}
}
/* --- ALL Browser Drop Menu --- */
@media screen and (max-width: 700px) {
nav ul {
	width:100%;
	list-style:none;
	font-weight: normal;
	float:left;
	margin-bottom:var(--no-gap);
	text-align: center;
	vertical-align: middle;
	margin-block-end: 0em;
	z-index:100;
	}
nav ul li{
	position:relative;
	}
nav ul a{
	/* Look of main menu item (no hover - sub menu inherits)*/
	/* for vertical menus define a width */
	display:block;
	/*custom*/
	background-color:var(--mobilemenu-bg-color);
	color: var(--mobilemenu-text-color);
	padding: var(--min-gap) var(--std-min-gap) var(--min-gap) var(--std-min-gap);
	text-decoration: none;
	}
nav ul div {
	display: none; /* Hide off-screen when not needed */
	}
nav ul li:hover div {
	display: block;
	}
}
/* --- Menu --- */
@media screen {
/* --- Top Level --- */
#menu i {
	display:block;
	margin-right:var(--min-gap);
	float:left;
	}
#menu ul {
	/* Main menu static positioning*/
	width:100%;
	list-style:none;
	font-weight: normal;
	margin-bottom:30px;
	float:left;
	}
#menu ul li{
	/* individual main menu items - positioning */
	position:relative;
	}
#menu ul a{
	/* Look of main menu item (no hover - sub menu inherits)*/
	/* for vertical menus define a width */
	display:block;
	/*custom*/
	background-color: var(--menu0-bg-color);
	color: var(--menu0-text-color);
	padding: var(--min-gap) var(--std-gap) var(--min-gap) var(--std-gap);
	text-decoration: none;
	}
#menu ul b a{
	/* highlight menu item with different colour (no hover) with <b> </b> around the anchor link */
	display:none;
	/*custom*/
	background-color:var(--menu0-hightlight-bg-color);
	color: var(--menu0-highlight-text-color);
	padding: var(--min-gap) var(--std-gap) var(--min-gap) var(--std-gap);
	text-decoration: none;
	font-weight: normal;
	/*border-radius:var(--min-gap) var(--min-gap) var(--min-gap) var(--min-gap);*/
	}
#menu ul a:hover{
	/* Look of main menu item (Hovered - sub menu inherits) */
	text-decoration: none;
	}
/* --- 2nd Level --- */
#menu ul ul, #menu ul ul ul {
/* Look and position of level 2&3 */
	background:var(--page-bg-color); /* Make this as close to your page's background as possible. (IE7+) */
	background:rgba(255,255,255,0); /* Make the background fully transparent where we can. */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed */
	border-width: 3px;
	border-style:solid;
	border-color:var(--menu1-border-color);
	/*box-shadow: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--color-shadow);*/
}
#menu ul ul {
	/*custom borders - no background or foreground*/
	margin:var(--no-gap);
	padding:var(--no-gap);
	display: block; /* stops each menu item from centering*/ 
	width:auto; /* makes each item as wide as the widest item */
	z-index:500;
}
#menu ul li:hover ul {
	/* Display the dropdown on hover - use top:0px; for flush vertical position on vertical menus */
	left:0px; /* Increase to width of menu for vertical menus side drop down */
	position:absolute;
}
#menu ul ul li{
/* Positioning of submenu items */
/* Introducing a padding between the li and the a give the illusion spaced items */
	padding-top:var(--no-gap);
	float:none;
}
#menu ul ul a{
	/* Stop text wrapping and creating multi-line dropdown items */
	white-space:nowrap;
}
#menu ul li:hover a{
	/* hovered level 1*/
	/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	/*custom*/
	background-color:var(--menu0-hoverbg-color);
	color:var(--menu0-hovertext-color);
	text-decoration: none;
}
#menu ul li:hover ul a{
	/* static level 2 */
	/*custom*/
	background-color:var(--menu1-bg-color);
	color: var(--menu1-text-color);
	text-decoration: none;
}
#menu ul li:hover ul a img{
	/* Hide accompanying image in anchor */
	/*custom*/
	display: none;
}	
#menu ul li:hover ul li a:hover{
	/* Here we define the most explicit hover states -- what happens when you hover each individual link. */
	/* Look of submenu item when hovered */
	/*custom*/
	background-color:var(--menu1-hover-activebg-color);
	background-image: url("");
	color: var(--menu1-hover-activetext-color);
	text-decoration: none;
}
#menu ul li:hover ul li a:hover img{
	/* Show accompanying image in anchor */
	/*custom*/
	display: block;
	position: absolute;
	left: 110%;
	top: -50%;
	border: solid var(--no-gap) var(--menu1-border-color);
	box-shadow: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--color-shadow);
	width: 150px;
}	
/* --- 3rd Level --- */
#menu ul ul ul{
	display:none;
}
#menu ul ul li:hover ul{
	/* Display the dropdown on hover - use top:0px; for flush vertical position on vertical menus */
	left:var(--max-gap); /* Increase to width of menu for vertical menus side drop down */
	display:block;
	position:absolute;
}
#menu ul ul ul li{
	/* Positioning of submenu items */
	/* Introducing a padding between the li and the a give the illusion spaced items */
	padding-top:var(--no-gap);
	float:none;
}
#menu ul ul ul a{
	/* Stop text wrapping and creating multi-line dropdown items */
	white-space:nowrap;
}
#menu ul ul li:hover a{
	/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	/* Look of the Main menu item (hovered - sub menu inherits)*/
	/*custom*/
	background-color:var(--menu1-hover-activebg-color);
	color: var(--menu1-hover-activetext-color);
	text-decoration: none;
	
}
#menu ul ul li:hover ul a{
	/* Look of submenu item static */
	/*custom*/
	background-color:var(--menu2-bg-color);
	color: var(--menu2-text-color);
	text-decoration: none;
}
#menu ul ul li:hover ul a img{
	/* Hide accompanying image in anchor */
	/*custom*/
	display: none;
}	
#menu ul ul li:hover ul li a:hover{
	/* Here we define the most explicit hover states -- what happens when you hover each individual link. */
	/* Look of submenu item when hovered */
	/*custom*/
	background-color:var(--menu2-hoverbg-color);
	color: var(--menu2-hovertext-color);
	text-decoration: none;
}
#menu ul ul li:hover ul li a:hover img{
	/* Show accompanying image in anchor */
	/*custom*/
	display: block;
	position: absolute;
	left: 110%;
	top: -50%;
	border: solid 1px var(--menu2-border-color);
	box-shadow: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--color-shadow);
	width: 150px;
}
}
/* --- Large View Layout adaptations --- */
@media screen and (min-width: 701px) {
#page-container {
	max-width: 1000px;
	}
#top-container {
	max-width:1000px;
	}
header {
	max-width:1000px;
	}
#logo-container {
	max-width:1000px;
	}
#logo-container p{
	clear:none;
	font-size:24px;
	min-width:500px;
	margin: 30px auto var(--no-gap) auto;
}
#logo-container img {
	width:100px;
}
#menu-container {
	max-width:1000px;
}
main {
	width:55%;
}
main figure {
	max-width:550px;
}
main figure img{
	width:100%;
}
#formtotop {
	display:none;
}
footer {
	max-width:1000px;
}
footer p{
	text-align: center;
	font-size:12px;
	padding: var(--std-gap) var(--no-gap) var(--std-gap) var(--no-gap);
}
}
/* --- Large View Adaptations --- */
@media screen and (min-width: 701px) {
@keyframes slideInFromBottom {
	0% {transform: translateY(2000px);}
	100% {transform: translateY(0);
	}
}	
#form {
	width:40%;
	margin-bottom:var(--std-gap);
	border-radius:25px 25px 25px 25px;;
	/* This section calls the slideInFromBottom keyfames*/
	animation: 1s ease-out 0s 1 slideInFromBottom;
}
#logo-container p {
	/*animation: blinker 3s linear infinite;*/
}
@keyframes blinker {
	50% {opacity: 0;}	
}
}
/* --- Large View Drop Menu --- */
@media screen and (min-width: 701px){
nav ul {
	width:100%;
	list-style:none;
	font-weight: normal;
	margin-bottom:var(--no-gap);
	float:left;
	text-align: center;
	vertical-align: middle;
}
nav ul li{
	position:relative;
}
nav ul a{
	/* Look of main menu item (no hover - sub menu inherits)*/
	/* for vertical menus define a width */
	display:none;
	/*custom*/
	color: var(--menu0-text-color);
	padding: var(--min-gap) var(--std-min-gap) var(--min-gap) var(--std-min-gap);
	text-decoration: none;
}
nav ul div {
	display: block; /* Hide off-screen when not needed */
	top: -var(--max-gap);
	}
#menu i {
	display:none;
	}
#menu ul {
	/*center top level items horizontally */
	display: block;
	display: flex;
	justify-content: center;
	flex-flow:row wrap;
	}
#menu ul li{
	/* horizontal instead of vertical */
	float:left;
}
#menu ul a:hover{
	background-position: center-bottom;
}
#menu ul li:hover ul{
	/* Display the dropdown on hover - use top:0px; for flush vertical position on vertical menus */
	left:0px; /* Increase to width of menu for vertical menus side drop down */
}
#menu ul li:hover a{
	background-position: center-bottom;
}	
#menu ul li:hover ul a{
	border-radius: 0px 0px 0px 0px;	
}
#menu ul li:hover:nth-last-of-type(-n+1) ul{
	/* Last X in "-n+X" drop down items are aligned to the right */
	/* Display the dropdown on hover*/
	left:auto;
	right:0px;
}
#menu ul li:nth-last-of-type(-n+2) ul li:hover ul{
	/* Last X in "-n+X" drop down items submenus are aligned to the right */
	/* Display the dropdown on hover*/ 
	left:33%;
	/*right:33%; /* Increase to width of menu for vertical menus side drop down */
	display:block;
}
#menu ul b a{
	 display:block;
	}
}
/* --- Classes --- */
.long {
	/* Long menu lists split into two columns using this class on parent UL */
	column-count: 2;
	column-width:100%;
	column-fill:balance;
	column-gap:0px;
	}	
.video-container {
	position:relative;
	padding-bottom:calc(56.25% - 22px);
	height:0px;
	overflow:hidden;
	border: solid 1px #000000;
	margin: var(--no-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	}
.video-container iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
.video-container p {
	background-color:#292929;
	color: #e6e6e6;
	position: absolute;
	bottom:0px;
	left:0px;
	padding:var(--min-gap);
	z-index:10;
	}