/* //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;}
}
/* --- ALL Browser Drop Menu --- */
/* ------------------- Variables ------------------ */
:root {
	/* --- Colors --- */
	--color-darkest: #16345a; 
	--color-dark: #25528b; 
	--color-medium-dark: #5d82b9; 
	--color-medium-light: #b9bacf; 
	--color-light: #dadce6;	
	--color-lightest: #ffffff;
	--color-contrast: #e30613;
	--color-shadow: #222222;
	--color-contrast-highlight: #ca9e66;
	
	--page-bg-color: var(--color-medium-dark);
	
	--contact-bg-color: var(--color-light);
		--contact-text-color: var(--color-darkest);
			--contact-link-color: var(--color-darkest);
	
	--header-bg-color: var(--color-darkest);
		--header-text-color: var(--color-contrast-highlight);
			--header-link-color: var(--color-contrast-highlight);
	
	--mobilemenu-bg-color: var(--color-darkest);
		--mobilemenu-text-color: var(--color-light);
	--menu0-bg-color: var(--color-darkest);
		--menu0-text-color: var(--color-medium-light);
		--menu0-hoverbg-color: var(--color-contrast-highlight);
		--menu0-hovertext-color: var(--color-lightest);
		--menu0-highlight-bg-color: var(--color-contrast);
			--menu0-highlight-text-color: var(--color-lightest);
				
		--menu1-bg-color: var(--color-dark);
			--menu1-text-color: var(--color-light);
			--menu1-hover-activebg-color: var(--color-contrast-highlight);
			--menu1-hover-activetext-color: var(--color-lightest);
			--menu1-border-color: var(--color-medium-dark);
						
			--menu2-bg-color: var(--color-light);
				--menu2-text-color: var(--color-darkest);
				--menu2-hoverbg-color: var(--color-contrast-highlight);
				--menu2-hovertext-color: var(--color-darkest);
				--menu2-border-color: var(--color-darkest);
	
	--content-bg-color: var(--color-medium-dark);
		--content-text-color: var(--color-lightest);
			--content-header-color: var(--color-contrast-highlight);
			--content-link-color: var(--color-light);
			--content-list-color: var(--color-light);
			
	--table-header-bg-color: var(--color-medium-dark);
	--table-header-text-color: var(--color-darkest);
		--table-row-bg-color: var(--color-medium-light);
		--table-row-alt-bg-color: var(--color-light);
		--table-row-text-color: var(--color-darkest);
		--table-row-alt-text-color: var(--color-darkest);
	
	--form-bg-color: var(--color-contrast-highlight);
		--form-header-text-color: var(--color-darkest);
		--form-text-color: var(--color-lightest);
		--form-link-color: var(--color-darkest);
		--form-element-border-color: var(--color-dark);
		--form-element-bg-color: var(--color-light);
		--form-button-background: var(--color-contrast);
		--form-button-text: var(--color-lightest);
		--form-button-hover-background: var(--color-contrast-highlight);
		--form-button-hover-text: var(--color-lightest);
	
	--footer-bg-color: var(--color-contrast);
		--footer-text-color: var(--color-lightest);
		--footer-link-color: var(--color-light);
		
	--message-bg-color: var(--color-light);
		--message-text-color: var(--color-darkest);
		--message-link-color: var(--color-dark);
		
	--notification-bg-color: var(--color-contrast);
		--notification-text-color: var(--color-lightest);
		
	/* --- 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.50);
	--max-gap: calc(var(--std-gap)*2.00);
	--no-gap: 0px;
	
	/* --- Sizing --- */
	--std-mobile-min-width: 300px;
	--std-max-width: 1200px;
	--std-logo-max-width: 300px;
	--std-logo-mobile-width: 250px;
	--std-header-height: 60px;
	--std-mobile-header-height: 60px;
	--std-font-size: 16px;
	--std-line-height: 24px;
	--std-figure-max-width: 250px;
	--std-border-width:  1px;
	--form-border-width: 0px;
	--form-element-border-width: 0px;
	--form-header-font-size: 23px;
	--form-border-radius-top-left: 25px;
	--form-border-radius-top-right: 25px;
	--form-border-radius-bottom-right: 25px;
	--form-border-radius-bottom-left: 25px;
	--footer-font-size: 12px;
	--button-border-width: 1px;
	--button-border-radius: 15px;
	--menu-container-border-radius-top-left: 0px;
	--menu-container-border-radius-top-right: 0px;
	--menu-container-border-radius-bottom-right: 0px;
	--menu-container-border-radius-bottom-left: 0px;
	--menu-container-border-radius-bottom-left: 0px;
	--menu-border-width: 3px;
	--menu-accompanying-image-width: 150px;
	--menu-accompanying-image-border-width: 1px;
	--font-family: Archivo Narrow, Oswald, Orbitron ;
	--font-family-header: Oswald, Orbitron ;
	/* --- Custom Variables --- */}/* --- General Selectors --- */
table {
	margin: var(--std-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;
	}
th {
	background-color: var(--table-header-bg-color);
	color: var(--table-header-text-color);
	padding: var(--min-gap);
	text-align:center;
	text-wrap:normal;
	}
/* --- Custom Elements --- *//* ---------------Base Layout ----------*/
@media screen {
body {
	font-family: verdana;
	font-family: var(--font-family);
	font-size:var(--std-font-size);
	font-weight: normal;
	color: var(--content-text-color);
	margin: 0 auto;
	background-color: var(--page-bg-color);
	min-width: var(--std-mobile-min-width);
	}
header {
	display:block;
	width: 100%;
	height: var(--std-mobile-header-height);
	min-width: var(--std-mobile-min-width);
	margin-left: auto;
	margin-right: auto;
	background-color: var(--header-bg-color);
	color: var(--header-text-color);
	}
header figure {
	margin:var(--no-gap);
}
header p{
	font-family: var(--font-family);
	font-size:var(--std-font-size);
	font-display:swap;
	color:var(--header-text-color);
	width:100%;
	text-align: center;
	clear:none;
	margin: var(--no-gap) auto var(--no-gap) auto;
	}
header b{
	font-size:150%;
	color:var(--header-text-color);
	}
header A:link, header A:visited, header A:active {
	color: var(--header-link-color);
	text-decoration: none;
	border-width: 0px;
	margin: var(--no-gap) auto var(--no-gap) auto;
	}
header A:hover {
	color: var(--color-contrast);
	}
header img{
	max-width: var(--std-logo-mobile-width);
	float:left;
	margin:var(--tiny-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%;
	background-color: var(--menu0-bg-color);
	border-radius:var(--menu-container-border-radius-top-left) var(--menu-container-border-radius-top-right) var(--menu-container-border-radius-bottom-right) var(--menu-container-border-radius-bottom-left);
	}
.menu {
	position: sticky;
	top:0;
	float:left;
	width:100%;
	margin: var(--min-gap) var(--no-gap) var(--min-gap) var(--no-gap);
	}
main {
	float:left;
	margin:var(--no-gap) var(--no-gap) var(--no-gap) var(--no-gap); 
	width:100%;
	min-width:var(--std-mobile-min-width);
	line-height:var(--std-line-height);
	min-height: calc(100vh - 250px + var(--std-gap));
	}
main h1, main h2, main h3, main h4, main h5, main h6 {
	font-family: var(--font-family-header);
	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) var(--max-gap) 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: 0 auto;
	max-width:var(--std-figure-max-width);
	display:block;
}

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

main figure img{
	margin: var(--no-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	}
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'] {
	width:45%;
	float:left;
	text-align:left;
	border: solid var(--std-border-width) 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 {
	width:45%;
	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 {
	width:45%;
	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 {
	width:45%;
	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;
	}

main form p {
	width:45%;
	float:left;
	text-align:left;
	border: solid var(--form-border-width) var(--form-element-border-color);
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin:var(--no-gap) var(--no-gap) var(--min-gap) var(--no-gap);
	background-color: var(--form-bg-color);	
}

main form p a:hover {
	color: var(--form-text-color);
}
	
article {
	float:left;
}
.formtotop {
	width:100%;
	min-width:var(--std-mobile-min-width);
	display:block;
	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: var(--font-family);
	font-weight:bold;
	font-display: swap;
	text-align: center;
	margin: var(--std-gap) var(--no-gap) var(--std-gap) var(--no-gap);
	font-size:var(--form-header-font-size);
	clear:both;
	}
.formtotop a {
	color: var(--form-link-color);
	text-decoration:none;
	}
footer {
	display:block;
	width:100%;
	clear:both;
	background-color:var(--footer-bg-color);
	position:relative;
	color:var(--footer-text-color);
	z-index: 1;
	}
footer p{
	text-align: center;
	font-size:var(--footer-font-size);
	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);
	}

.cart {
	display:none;
}

.mobile-cart {
	display: block;
	position:fixed;
	bottom:0;
	right: 0;
	z-index:1000;
	margin:var(--no-gap) var(--std-gap) var(--min-gap) var(--no-gap);
	transition: all .4s ease-in-out;
}	

.mobile-cart:hover {
	transform: scale(1.5);
}

.cartbutton {
	background-color: var(--color-contrast);
    border: solid var(--button-border-width) var(--color-lightest);
	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:var(button_border_radius);
	}
	
	
.cartbutton a:link, #cartbutton a:visited, #cartbutton a:active, #cartbutton a:hover{
	color: var(--color-lightest);
	font-weight:normal;
}

}
/* --- Base Layout --- *//* --- 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:var(--min-gap);
		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;
		margin:var(--no-gap);
		}
	.menu ul b a{
		/* highlight menu item with different colour (no hover) with <b> </b> around the anchor link */
		display:block;
		/*custom*/
		background-color:var(--menu0-highlight-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);*/
		margin:var(--no-gap);
		}
	.menu ul a:hover{
		/* Look of main menu item (Hovered - sub menu inherits) */
		text-decoration: none;
		margin:var(--no-gap);
		}
	/* --- 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: var(--menu-border-width);
		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: var(--menu-accompanying-image-width);
	}	
	/* --- 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 var(--menu-accompanying-image-border-width) var(--menu2-border-color);
		box-shadow: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--color-shadow);
		width: var(--menu-accompanying-image-width);
	}
	
}/* --- Menu --- */
/* --- All Browser Forms --- */
@media screen {
	.form {
		width:96%;
		min-width:var(--std-mobile-min-width);
		display:block;
		float:left;
		color:var(--form-text-color);
		font-weight: normal;
		background-color: var(--form-bg-color);
		border: solid var(--form-element-border-width) var(--form-element-border-color);
		padding: 2%;
		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 var(--form-element-border-width) 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:46.5%;
		}
	.form option {
		border-radius-top:0px;
		border-radius-right:0px;
	}
	.form textarea {
		width:44%;
		}
	.form [type='checkbox']{
		width:var(--std-gap);
		height:var(--std-gap);
		margin-top: var(--min-gap);
		}
	.form input.button {
		background-color: var(--form-button-background);
		color: var(--form-button-text);
		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:var(--button-border-radius);
		}
	.form input.button:hover {
		background-color: var(--form-button-hover-background);
		color: var(--form-button-hover-text);
		cursor: pointer;
		border: solid 1px var(--form-button-hover-text);
		}
	.form label {
		clear: left;
		width:44%;
		text-align: right;
		padding: var(--min-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:var(--form-header-font-size);
		clear:both;
		color: var(--form-header-text-color);
		}
	.form strong {
		font-size:var(--std-font-size);	
		}
		
	.form ul {
		padding: var(--std-gap);
	}
}
/* --- Base Form --- *//* --- 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;
		}
}
/* --- ALL Browser Drop Menu --- */
/* --- Large View Layout adaptations --- */
@media screen and (min-width: 701px) {
body {
	max-width: var(--std-max-width);
	}
header {
	max-width:var(--std-max-width);
	height: var(--std-header-height);
	}
header p{
	clear:none;
	font-size:calc(var(--std-font-size)*1.5);
	min-width:500px;
	margin: var(--no-gap) auto var(--no-gap) auto;
}
header img {
	max-width: var(--std-logo-max-width);
}
.menu-container {
	max-width:var(--std-max-width);
}
main {
	width:55%;
}
main figure {
	margin: var(--no-gap) var(--no-gap) var(--no-gap) var(--std-gap);
	max-width:calc(var(--std-figure-max-width)*1.25);
}
main figure img{
	float:left;
	margin-right: var(--std-gap);
	margin-left: var(--no-gap);
}

main form {
	width: calc(var(--std-mobile-min-width)*2);
}

.formtotop {
	display:none;
}
footer {
	max-width:var(--std-max-width);
}
footer p{
	text-align: center;
	font-size:var(--footer-font-size);
	padding: var(--std-gap) var(--no-gap) var(--std-gap) var(--no-gap);
}
@keyframes slideInFromBottom {
	0% {transform: translateY(2000px);}
	100% {transform: translateY(0);
	}
}	
.form {
	width:40%;
	margin-bottom:var(--std-gap);
	border-radius:var(--form-border-radius-top-left) var(--form-border-radius-top-right) var(--form-border-radius-bottom-right) var(--form-border-radius-bottom-left);
	/* This section calls the slideInFromBottom keyfames*/
	animation: 1s ease-out 0s 1 slideInFromBottom;
}
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;
}

.cart {
	display:block;
}

.mobile-cart {
	display:none;
}

}
/* --- Large View Layout adaptations --- */
/* --- 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;
	}
@media screen and (max-width: 700px) {
	.long {
		column-count: 1;
		column-width:100%;
		column-fill:balance;
		column-gap:0px;
	}
}

@keyframes grow {
	0% {
		transform: scale(0%);
	}
  	100% {
		transform: scale(100%);
	}
}
	
.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;
}

.productpanel {
	width: 200px;
	height:400px;
	margin: var(--std-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	background-color: var(--content-bg-color);
    color: var(--color-lightest);
	padding: var(--min-gap) var(--min-gap) var(--min-gap) var(--min-gap);
	float:left;
	display:block;
	transition: all .4s ease-in-out; 
}

.productpanel:hover { 
	background-color: var(--color-contrast);
	color: var(--color-lightest);
	transform: scale(1.1);
	border-radius: var(--tiny-gap);
	box-shadow: calc(var(--tiny-gap) *-1) var(--std-gap) var(--std-gap) var(--color-dark);
}

.productpanel:hover a, .productpanel:hover a:link, .productpanel:hover a:visited, .productpanel:hover a:active, .productpanel:hover a:hover {
	color: var(--color-darkest);
}

.panelcontainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	position:relative;
}

.panel {
	flex: 0,0,0;
	position:relative;
	display:block;
	width:320px;
	min-height:360px;
	background-color:var(--color-light);
	color:var(--color-darkest);
	float:left;
	margin:0;
	padding:0;
	margin-top:calc(var(--max-gap) - var(--min-gap));
	margin-left:var(--min-gap);
	margin-bottom:var(--tiny-gap);
	border: 1px solid var(--color-dark); 
	border-radius: var(--tiny-gap);
	//box-shadow: var(--no-gap) var(--no-gap) var(--std-gap) var(--color-dark);
	background:var(--color-light);
	background:linear-gradient(to bottom, var(--color-medium-light), var(--color-lightest));
	animation: grow;
    animation-duration: 0.25s;
    animation-timing-function: ease-out;
	animation-fill-mode:backwards;
}

.panel:nth-child(1) {animation-delay: 0.1s; }
.panel:nth-child(2) {animation-delay: 0.15s; }
.panel:nth-child(3) {animation-delay: 0.2s; }
.panel:nth-child(4) {animation-delay: 0.25s; }
.panel:nth-child(5) {animation-delay: 0.3s; }
.panel:nth-child(6) {animation-delay: 0.35s; }
.panel:nth-child(7) {animation-delay: 0.4s; }
.panel:nth-child(8) {animation-delay: 0.45s; }
.panel:nth-child(9) {animation-delay: 0.5s; }
.panel:nth-child(10) {animation-delay: 0.55s; }
.panel:nth-child(11) {animation-delay: 0.6s; }
.panel:nth-child(12) {animation-delay: 0.65s; }

.halfpanel {
	min-height:160px;
	height:100%;
}

.panelicon {
	display: block;
	position:absolute;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
	border-bottom:0px;
	border-top: 1px solid var(--color-lightest);
	background-color:var(--color-lightest);
	text-align: center;
	margin-top: calc(var(--std-gap) * -1 - var(--tiny-gap));
	margin-left: calc(180px - var(--std-gap) - var(--std-gap));
	padding: 8px;
	z-index:1;
	background-color: var(--color-lightest);
	background:linear-gradient(to bottom, var(--color-contrast), var(--color-lightest));
	color: var(--color-lightest);
	box-shadow: var(--no-gap) var(--no-gap) var(--min-gap) var(--color-lightest);
}

.panel h1, .panel h2 {
	width:280px;
	border-bottom: 1px var(--color-dark) solid;
	padding-bottom: var(--tiny-gap);
	top: calc(var(--std-gap)*-1);
	left: calc(var(--std-gap)*-1);
	padding: var(--std-gap);
	border-radius: var(--tiny-gap) var(--tiny-gap) 0px 0px;
	background-color: var(--color-medium-light);
	display:block;
	position: relative;
	color: var(--color-darkest);
	text-align:center;
	margin-bottom: calc(var(--min-gap)*-1);
	background:var(--color-medium-light);
	background:linear-gradient(to top, var(--color-contrast), var(--color-lightest));
}

.panel h3 {
	width:320px;
	padding-top: var(--std-gap);
	margin:0;
	margin-top:var(--std-gap);
	margin-bottom: var(--std-gap);
	border-top: 1px var(--color-dark) solid;
	text-align:center;
	clear:both;
}

.panel p {
	width:calc(305px - var(--std-gap) - var(--std-gap));
	margin:var(--no-gap) var(--std-gap) var(--std-gap) var(--std-gap);
	padding:0;
	background-color: var(--color-light);
	color:var(--color-darkest);
	text-align:left;
	z-index:1;
	background: rgba(0, 0, 0, 0);
}

.panel p.panelfooter {
	bottom:0;
	width:calc(320px - var(--std-gap) - var(--std-gap));
	border-top: 1px var(--color-dark) solid;
	padding: var(--std-gap);
	border-radius: 0px 0px var(--tiny-gap) var(--tiny-gap);
	background-color: var(--color-medium-light);
	color: var(--color-darkest);
	text-align:right;
	margin-bottom: 0;
	left: calc(var(--std-gap)*-1);
	margin-top:auto;
	position:relative;
	display:flex;
	flex-wrap:wrap;
	background:linear-gradient(to top, var(--color-light), var(--color-medium-light));
}

.panel p.panelfooter small {
	display:block;
	width:100%;
	clear:both;
	position:relative;
	bottom:var(--min-gap);
	float:right;
	text-align:right;
}

.panel button {
	background-color: var(--form-button-background);
    border: solid 1px var(--form-element-border-color);
	color: var(--form-button-text);
	border-radius:5px;
	box-shadow: var(--no-gap) var(--no-gap) var(--tiny-gap) var(--color-darkest);
}

.panel button:hover {
	background-color:var(--color-contrast);
	color:var(--color-darkest);
	cursor: pointer;
}

.panel table {
	margin: var(--min-gap);
}

.panel table table {
	width:100%;
	margin: var(--no-gap);
}

.panelribbon {
	position: absolute;
	width:75px;
	padding: 0;
	background-color: transparent;
	color: var(--color-lightest));
	//z-index: 50;
	//top: calc(var(--min-gap)*-1);
	//left: calc(var(--min-gap)*-1);
}

.firstpanel {
	clear:both;
}
	
.list-address-mobile-phone-email {
	margin:0;
	list-style: custom-address-mobile-phone-email;
	clear:both;
	width:calc(320px - var(--std-gap) - var(--std-gap));
}

@counter-style custom-address-mobile-phone-email {
	system: cyclic;
	symbols: '\01f4cd' '\01F4F1' '\01F4DE' '\01f4e7';
	suffix:' ';
}

.list-mobile-phone-email {
	margin:0;
	list-style: custom-mobile-phone-email;
}

@counter-style custom-mobile-phone-email {
	system: cyclic;
	symbols: '\01F4F1' '\01F4DE' '\01f4e7';
	suffix:' ';
}
	
.list-items {
	margin:0;
	list-style: custom-items;
}

@counter-style custom-items {
	system: cyclic;
	symbols: '\01f4e6';
	suffix:' ';
}

.list-invoices {
	margin:0;
	list-style: custom-invoices;
}

@counter-style custom-invoices {
	system: cyclic;
	symbols: '\01f9fe';
	suffix:' ';
}

.list-links {
	margin:0;
	list-style: custom-links;
}

@counter-style custom-links {
	system: cyclic;
	symbols: '\01f517';
	suffix:' ';
}

.list-tasks {
	margin:0;
	padding:0;
	list-style: custom-tasks;
	z-index:0;
}

.list-items li, .list-tasks li {
	padding-bottom: var(--min-gap);
	margin-bottom: var(--min-gap);
	z-index:2;
	background:linear-gradient(to bottom, var(--color-medium-light), var(--color-light));
}

.list-address-mobile-phone-email li {
	padding-bottom: var(--min-gap);
	margin-bottom: var(--min-gap);
	z-index:2;
}
.list-links li {
	padding-bottom: var(--min-gap);
	margin-bottom: var(--min-gap);
	z-index:2;
	background: rgba(0, 0, 0, 0);
}


.list-tasks li {
	background-color: var(--color-medium-light);
	background:linear-gradient(to bottom, var(--color-medium-light), var(--color-light));
	border: 1px solid var(--color-dark);
	border-radius: var(--min-gap);
	//box-shadow: var(--no-gap) var(--no-gap) var(--min-gap) var(--color-lightest);
	list-style-position: outside;
	width:78%;
	padding: var(--tiny-gap);
	
}

.list-tasks li big {
	width:100%;
	border: 1px var(--color-dark) solid;
	padding-bottom: var(--tiny-gap);
	top: calc(var(--tiny-gap) * -1 - 1px);
	left: calc(var(--tiny-gap) * -1 - 1px);
	padding: var(--tiny-gap);
	border-radius: var(--min-gap) var(--min-gap) 0px 0px;
	background-color: var(--color-light);
	background:linear-gradient(to bottom, var(--color-light), var(--color-contrast-highlight));
	display:block;
	position: relative;
	color: var(--color-darkest);
	text-align:center;
	margin-bottom: calc(var(--std-gap)*-1);
	z-index:1;
}

.list-items li {
	background-color: var(--color-medium-light);
	border: 1px solid var(--color-dark);
	border-radius: var(--min-gap);
	box-shadow: var(--no-gap) var(--no-gap) var(--tiny-gap) var(--color-dark);
	list-style-position: outside;
	width:78%;
	padding: var(--tiny-gap);
}

.list-items li li, .list-links li li {
	padding-bottom: var(--tiny-gap);
}

@counter-style custom-tasks {
	system: cyclic;
	symbols: '\01F4DD';
	suffix:' ';
}

.list-messages {
	margin:0;
	list-style: custom-messages;
}

.list-messages li {
	background-color: var(--color-medium-light);
	border: 1px solid var(--color-dark);
	border-radius: var(--min-gap);
	box-shadow: var(--no-gap) var(--no-gap) var(--tiny-gap) var(--color-dark);
	list-style-position: outside;
	width:78%;
	padding: var(--tiny-gap);
}

@counter-style custom-messages {
	system: cyclic;
	symbols: '\01F4AC';
	suffix:' ';
}

.list-messages li big {
	width:100%;
	border: 1px var(--color-dark) solid;
	padding-bottom: var(--tiny-gap);
	top: calc(var(--tiny-gap)*-1);
	left: calc(var(--tiny-gap)*-1);
	padding: var(--tiny-gap);
	border-radius: var(--min-gap) var(--min-gap) 0px 0px;
	background-color: var(--color-light);
	display:block;
	position: relative;
	color: var(--color-darkest);
	text-align:center;
	margin-bottom: calc(var(--std-gap)*-1);
}

.list-messages li a.list-message-footer {
	width:100%;
	left: calc(var(--tiny-gap)*-1);
	padding: var(--tiny-gap);
	border-top: 1px var(--color-dark) solid;
	bottom: calc(var(--tiny-gap)*-1);
	border-radius: 0px 0px var(--min-gap) var(--min-gap);
	background-color: var(--color-medium-dark);
	color: var(--color-darkest);
	text-align:center;
	margin-bottom: 0;
	margin-top:auto;
	position:relative;
	display:flex;
	flex-wrap:wrap;
}

.list-messages li a.list-message-footer small {
	display:block;
	margin-top: var(--tiny-gap);
	width:100%;
	clear:both;
	position:relative;
	bottom:var(--min-gap);
	float:right;
	text-align:right;
}

.list-leads {
	margin:0;
	list-style:custom-leads;
}

@counter-style custom-leads {
	system:cyclic;
	symbols: '\1F4B0';
	suffix:' ';
}

.list-users {
	margin:0;
	list-style:custom-users;
}

@counter-style custom-users {
	system:cyclic;
	symbols: '\1F464';
	suffix:' ';
}

.list-addresses {
	margin:0;
	list-style:custom-addresses;
}

@counter-style custom-addresses {
	system:cyclic;
	symbols: '\01f4cd';
	suffix:' ';
}

.cartbuttonsmall {
	background-color: var(--color-contrast-highlight);
    border: solid 1px var(--form-element-border-color);
	color: var(--form-button-text);
	padding: var(--tiny-gap) var(--tiny-gap) var(--tiny-gap) var(--tiny-gap);
	margin: var(--min-gap) auto var(--min-gap) auto;
	min-width: calc(var(--std-gap) + var(--std-gap));
	max-width: calc(var(--std-gap) * 4);
	text-align:center;
	border-radius:15px;
}

.cartbuttonsmall a:link, .cartbuttonsmall a:visited, .cartbuttonsmall a:active, .cartbuttonsmall a:hover{
	cursor: pointer;
}

.button {
	background-color: var(--form-button-background);
    border: solid 1px var(--form-element-border-color);
	box-shadow: var(--no-gap) var(--no-gap) var(--tiny-gap) var(--color-darkest);
    color: var(--form-button-text);
    border-radius: 5px;
	padding: 0px 6px;
	white-space:nowrap
}
.button:link, .button:visited, .button:active {
	font-weight:normal;
	color: var(--form-button-text);
}
.button:hover {
	background-color:var(--color-contrast);
	color:var(--color-darkest);
	cursor: pointer;
	box-shadow: var(--no-gap) var(--no-gap) var(--tiny-gap) var(--color-contrast-highlight);
}

.formbutton {
	background-color: var(--form-button-background);
    border: solid 1px var(--form-element-border-color);
	color: var(--form-button-text);
	padding: var(--no-gap) var(--std-gap) var(--no-gap) var(--std-gap);
	margin: var(--no-gap) auto var(--min-gap) auto;
	text-align:center;
	border-radius:15px;
	cursor: pointer;
	max-width:200px;
	}

.formbutton:hover {
	background-color: var(--form_button_hover_background);
    border: solid 1px var(--form-element-border-color);
	color: var(--form_button_hover_text);
	cursor: pointer;
	}

.formbutton a:link, .cartbuttonsmall a:visited, .cartbuttonsmall a:active, .cartbuttonsmall a:hover{
	background-color: var(--form-button-hover-background);
	color: var(--form-button-hover-text);
	cursor: pointer;
}

.search-results {
	margin-left:0;
	padding-left:0;
	margin-top:5px;
	list-style-type:none;
	list-style-position:outside;
}

.search-results li {
	margin-left:0;
}

.taskcollection {
	display:flex;
	clear:both;
	float:left;
}

.taskcollection .panel {
	flex:1;
}

.tasktable {
	background-color: var(--color-medium);
	width: calc(100% - var(--std-gap));
}

.tasktable th {
	text-align:right;
	background-color: var(--color-light);
}

.tasktable tr, .tasktable tr:nth-child(even), .tasktable tr:nth-child(odd) {
	background-color: var(--color-light);
}

.tasktable td, .tasktable tr:first-child td {
	text-align:left;
	background-color: var(--color-light);
}

.tasktable textarea {
	width:100%;
	background-color: var(--color-lightest);
}

.bubble {
	background-color:var(--color-dark);
	color:var(--color-lightest);
	padding: var(--min-gap);
	margin: var(--std-gap) var(--min-gap) var(--std-gap) var(--min-gap);
	padding: var(--min-gap);
	border-radius: 50%;
	float:left;
	width:1em;
	text-align:center;
}

.bubble-close {
	position:absolute;
	top:-0.75em;
	right:-0.5em;
	background-color:var(--color-contrast-highlight);
	color:var(--color-lightest);
	//border-radius: 50%;
	border: 1px solid var(--color-lightest);
	float:left;
	width:1em;
	text-align:center;
	z-index:2000;
	cursor: pointer;
}

.context-menu {
	position:absolute;
	z-index:1000;
	box-shadow: var(--no-gap) var(--no-gap) var(--tiny-gap) var(--color-dark);
	border-radius: var(--no-gap) var(--min-gap) var(--min-gap) var(--min-gap);
	animation: grow;
    animation-duration: 0.125s;
    animation-timing-function: ease-out;
	animation-fill-mode:backwards;
}

.context-menu ul {
	display:block;
	min-width:100px;
	background-color:var(--color-contrast);
	color:var(--color-lightest);
	list-style-type: none;
	list-style-position: inside;
	margin: 0;
	padding: var(--tiny-gap);
	border-radius: var(--no-gap) var(--min-gap) var(--min-gap) var(--min-gap);
	
}

.context-menu ul li {
	width:calc(100%-var(--tiny-gap));
	margin: 0;
	text-align:center;
	padding: var(--tiny-gap);
}

.context-menu ul li:hover {
	background-color:var(--color-contrast-highlight);
	color:var(--color-dark);
}
/*--- Notifications ---*/
.notification-bar {
	background-color: var(--notification-bg-color);
	width:100%;
	padding-bottom:var(--tiny-gap);
}
.notification-icon {
	float:left;
	padding-left: var(--std-gap);
}
.notification-bar p {
	color: var(--notification-text-color);
	text-align:center;
}
.notification p b {
	color: var(--color-contrast);
}
.notification-close {
	float: right;
	color: var(--color-contrast);
	padding-right: var(--std-gap);
}
.notification-close a {
	cursor: pointer;
}

/*--- 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: var(--button-border-width);
	border-radius: var(--button-border-radius);
	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);
	color: var(--color-darkest);
	max-width: var(--std-mobile-min-width);
	width: 100%;
	min-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: var(--min-gap);
	background: var(--message-bg-color);
	font-size: var(--std-font-size);
	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);
	}
	
.pleasewait {
	display:none;
	position:fixed;
	z-index:10000;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:var(--color-darkest);
	opacity:50%;
}

.pleasewait p {
	display:block;
	position:absolute;
	text-align:center;
	margin: auto;
	width:100%;
	height:100%;
	top:45vh;
	font-size:40px;
	color:var(--color-lightest);
	opacity:100%;
	user-select:none;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.pleasewait .loading {
	position: absolute;
	top: 40%;
	left: 50%;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
}

.pleasewait .maskedCircle {
	width: 40px;
	height: 40px;
	border-radius: 24px;
	border: 3px solid var(--color-contrast);
}

.pleasewait .mask {
	width: 24px;
	height: 24px;
	overflow: hidden;
}

.pleasewait .spinner {
		position: absolute;
		left: 1px;
		top: 1px;
		width: 52px;
		height: 52px;
		animation: spin 1s infinite linear;
}

.toggle-switch {
	display:block;
	width:50px;
}
.toggle-groove {
	display:block;
	width:50px;
	height:25px;
	border-radius:25px;
	border: 1px solid var(--color-dark);
	background: var(--color-medium-light);
	box-shadow: inset 0px 3px 3px var(--color-medium-dark);
}
.toggle-slider {
	display:block;
	width:22px;
	height:22px;
	border: 1px solid var(--color-lightest);
	border-radius:25px;
	font-size:50%;
	text-align:center;
	box-shadow: 0px 2px 2px var(--color-medium-dark);
}
.toggle-slider-off {
	background: var(--color-medium-light);
	float:left;
}
.toggle-slider-on {
	background: var(--color-contrast);
	float:right;
	box-shadow:inset 0 0 10px var(--color-lightest);
}

@media screen and (max-width: 700px) {
	.panel {
		width:95vw;
		min-width:320px;
		margin-left: var(--std-gap);
		margin-right: var(--std-gap);
	}
	.panel h1, .panel h2 {
		width:calc(100% - var(--std-gap) - var(--std-gap));
		min-width:calc(320px - var(--std-gap) - var(--std-gap));
	}
	.panel h3 {
		width:calc(100% - var(--std-gap) - var(--std-gap));
		min-width:calc(320px - var(--std-gap) - var(--std-gap));
	}
	.panel p {
		width:calc(100% - var(--std-gap) - var(--std-gap));
		min-width:calc(320px - var(--std-gap) - var(--std-gap));
	}
	.panel p.panelfooter {
		width:calc(100% - var(--std-gap) - var(--std-gap));
		min-width:calc(320px - var(--std-gap) - var(--std-gap));
	}
	.panelicon {
		margin-left: calc(50% - var(--std-gap) - var(--std-gap));
		min-margin-left:calc(1px - var(--std-gap) - var(--std-gap));
	}
}
/* --- Classes --- */