/* The alert message box */
.alert-blue {
  font-weight: normal;
  padding: 10px;
  background-color: #2196F3;
  color: white;
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
  transition: 0.3s;
}

.alert-orange {
  font-weight: normal;
  padding: 10px;
  background-color: #ff9800;
  color: white;
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

.alert-yellow {
  font-weight: normal;
  padding: 10px;
  background-color: #F5F030;
  color: white;
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

.alert-red {
  font-weight: normal;
  padding: 10px;
  background-color: #f44336;
  color: white;
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

div.hold_trigger {
   color: black;
   cursor: pointer;
}

div.hold_trigger:hover {
   background: #ccc;
}

.alert-green {
  font-weight: normal;
  padding: 10px;
  background-color: #04AA6D;
  color: white;
  width: 50%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 10px;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

.fa-spinner:before{content:"\f110"}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fadeIn {
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}
.w3-animate-fading{animation:fadeIn 1s}
.w3-animate-top2{position:relative;animation:animatetop 0.9s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-top3{position:relative;animation:animatetop 1.5s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}

@media (max-width: 12080px) {
	/* element styles */
	* {
  	margin: 0px;
		/* by default, all elements (selector *) have no margin */
	}

	html {
		width: 100%;
		/* 100% width of parent (root) element */
		height: 100%;
		/* 100% height of viewport */
		background: rgb(169, 169, 169, 0.8);
		/* 10% black */
		font-size: 1rem;
		/* our root font size */
		font-family: Arial, Helvetica, sans-serif;
		/* default font */
	    transform: scale(1.0);
	    transform-origin: top center;
		
	}

	#navbar {
	  width: 100%;
	  position: sticky;
	  top: 0;
	  background-color: #333;
	}

	#navbar a {
	  float: center;
	  display: block;
	  color: #f2f2f2;
	  text-align: left;
	  padding: 15px;
	  text-decoration: none;
	  font-size: 17px;
	}

	#navbar a:hover {
	  background-color: #ddd;
	  color: black;
	}
	body {
		font-size: 1.0em;
	}

	img.rounded-corners {
	  border-radius: 10px;
	}

	section {
		flex-grow: 5;
		/* in a flexbox, sections expand along flex axis */
	}

	h1 {
		/* Website name in header */
		font-size: 1.5rem;
		font-weight: normal;
		padding: 0.1rem;
	}

	h2 {
		/* About, Contact */
		font-size: 1.2rem;
		padding: 0.1rem;
	}

	h3 {
		/* Section headings */
		font-size: 1.1rem;
		padding: 0.1rem;
	}

	h4 {
		/* Section item title */
		font-weight: normal;
		padding: 0.1rem;
	}

	p {
		font-size: 1.5rem;
		/* Paragraph styling */
		padding: 0.1rem;
	}

	a:link,
	a:visited {
		/* anchor links, and visited anchor links */
		color: black;
		text-decoration: none;
		/* disable underline */
	}

	a:hover {
		/* when anchor link is hovered */
		color: rgb(25, 25, 25);
	}

	a:active {
		/* when anchor link is clicked */
		color: rgb(96, 96, 96);
	}

	/* component styles */
	#container {
		display: grid;
		width: 99%;
		height: 100%;
		margin: 25px;
		padding: 25px;
		grid-template-columns:
			[left] 11rem auto 11rem [right];
		grid-template-rows:
			[top] auto auto auto [bottom];
		grid-template-areas:
			"head head head"
			"panleft head1 panright"
			"panleft mainbody panright"
			"foot foot foot";
	}

	#header {
		grid-area: head;
		/* corresponds to grid-template-area */
		background: rgb(0, 0, 0, 0.2);
		/* 20% black */
		display: flex;
		flex-direction: row;
		justify-content: safe center;
		align-items: center;
		/* site name and nav item text aligns baseline */
		padding: 0.2rem;
	}

	#header1 {
		grid-area: head1;
		/* corresponds to grid-template-area */
		background: rgb(0, 0, 0, 0.1);
		/* 20% black */
		display: flex;
		flex-direction: row;
		justify-content: safe center;
		align-items: center;
		/* site name and nav item text aligns baseline */
		padding: 0.2rem;
		margin: 2px;
	}

	#panel {
		/* if element id="panel" */
		display: flex;
		/* this element is a flexbox parent */
		flex-direction: column;
		/* its child elements flex vertically */
		padding: 0.2rem;
		background: rgb(0, 0, 0, 0.1);
		/* 10% black */
	}

	#panel.left {
		/* if element id="panel" and class="left" */
		grid-area: panleft;
		padding: 0.2rem;
		/* this element fills a grid area */
	}

	#panel.head {
		/* if element id="panel" and class="left" */
		grid-area: head1;
		/* this element fills a grid area */
	}

	#panel.right {
		/* if element id="panel" and class="right" */
		grid-area: panright;
		padding: 0.2rem;
		/* this element fills a grid area */
	}

	#footer {
		/* if element id="footer" */
		grid-area: foot;
		/* this element fills a grid area */
		display: flex;
		/* this element is a flexbox parent */
		flex-direction: column;
		/* its child elements flex vertically */
		justify-content: center;
		/* horizontal center footer content */
		align-items: center;
		/* vertical center footer content */
		padding: 0.2rem;
		background: rgb(0, 0, 0, 0.2);
	}

	#mainbody {
		height:100%;
		/* if element id="mainbody" */
		display: flex;
		/* this element is a flexbox parent */
		flex-direction: column;
		/* its child elements flex vertically */
		grid-area: mainbody;
		justify-self: center;
		/* fixed-width mainbody always centered */
		width: 100%;
		min-width: 20rem;
		/* mainbody width can't go < 22.5rem */
		font-size: 1.5rem;
		margin: 25px;
		padding: 25px;
	}

	div#panel,
	div#mainbody {
		/* extra space under header */
		padding-top: 0.5rem;
		font-size: 1.5rem;
	}

	#partners,
	#sections {
		/* if element id="partners" or id="sections" */
		display: flex;
		/* this element is a flexbox parent */
		flex-direction: row;
		/* its child elements flex horizontally */
		flex-wrap: wrap;
		/* its child elements can wrap to next line */
		align-content: flex-start;
		/* child elements start in upper left */
	}

	#menu {
		right: 30;
		background: rgb(239, 239, 239);
		border: 0.15rem solid rgb(0, 0, 0, 0.4);
	}

	#header .placeholder {
		/* this invisible button is rendered when menu */
		color: rgb(0, 0, 0, 0);
		/* button is hidden, so header height matches. */
		user-select: none;
		/* user can't select text of invisible button */
	}

	.sectionlink{
		border-radius: 0.2rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.1rem;
		padding-left: 6px;
		padding-bottom: 2em;
		padding-top: 6px;
		width: 100%;
		/* fixed width for these items */
		margin-bottom: 0.3em;
		/* slight margin for readability */
		background: rgb(0, 0, 0, 0.1);
	}

	.sectionlinkblue{
		border-radius: 0.25rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.1rem;
		padding: 2.2rem;
		width: 50px;
		/* fixed width for these items */
		margin: 0.4em;
		/* slight margin for readability */
		background: rgb(0, 0, 190, 0.1);
	}

	.sectionlinklightyellow{
		border-radius: 0.25rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.1rem;
		padding: 2.2rem;
		width: 50px;
		/* fixed width for these items */
		margin: 0.4em;
		/* slight margin for readability */
		background: rgb(190, 80, 0, 0.1);
	}

	.sectionlink1{
		border-radius: 0.2rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.6rem;
		padding: 1.2rem;
		width: 8rem;
		justify-content: right;
		/* fixed width for these items */
		margin: 0.5em;
		/* slight margin for readability */
		background: rgb(0, 0, 0, 0.1);
	}
	.sectionlink2{
		border-radius: 0.45rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.6rem;
		padding: 1.2rem;
		width: 8rem;
		justify-content: right;
		/* fixed width for these items */
		margin: 0.5em;
		/* slight margin for readability */
		background: rgb(0, 0, 0, 0.1);
	}
	.partnerlink {
		border-radius: 0.2rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.1rem;
		padding-left: 6px;
		padding-bottom: 2em;
		padding-top: 6px;
		width: 100%;
		/* fixed width for these items */
		margin-bottom: 0.3em;
		margin-right: 0.3em;
		/* slight margin for readability */
		background: rgb(0, 0, 0, 0.1);
	}

	.sectionlink:hover,
	.sectionlink1:hover,
	.sectionlink2:hover,
	.partnerlink:hover {
		background-color: rgb(0, 0, 0, 0.065);
		/* brighten bg on mouse hover */
	}


	.sectionlinkblue:hover,
	.sectionlinklightyellow:hover {
		background-color: rgb(255, 254, 0, 0.65);
		/* brighten bg on mouse hover */
	}

	.partnerlink {
		height: 7rem;
		/* partner elements are additionally fixed height */
	}

	.partnerlink.wide {
		margin: 0.5rem 1rem 0.5rem 0;
		/* margins for spacing if they wrap */
	}

	.clickable-area {
		/* use whenever a clickable area excludes margins */
		height: 100%;
		/* clickable area spans height of parent */
	}

	.eventitem,
	.announceitem,
	.motditem {
		margin-bottom: 0.5rem;
		/* slight margin for readability */
	}

	.title {
		/* e.g., "Open for business" */
		font-style: italic;
		font-weight: normal;
		font-size: 1.1rem;
	}

	.date {
		/* e.g., January 1, 2021 */
		font-style: italic;
		font-size: 1.4rem;
		padding: 0 0 0 0.5rem;
		color: rgb(0, 0, 0, 0.5);
	}

	.paditem {
		padding-left: 50%;
	}

	.headspace,
	.panspace,
	.bodyspace {
		flex-grow: 1;
		/* these elements expand on flex axis to fill space */
	}


	.footspace{
		
		flex-grow: 0.5;
		/* these elements expand on flex axis to fill space */
	}

	/* table styles ("items for sale") */
	table {
	  margin-left: auto;
	  margin-right: auto;
		display: inline-block
		table-layout: fixed;
		/* pixel-adjacent table cells */
		width: 100%;
		font-size: 1.6rem;
	}
	tr {
		margin: 4rem 0 0 0;
		justify-content: safe center;
		border: 0.15rem solid rgb(0, 0, 0, 0.5);
		text-align: center;
		/* horizontal rule */
	}

	td,
	th {
		margin:1.6rem;
		padding:1.6rem;
		text-align: center;
		justify-content: safe center;
		border-right: 0.15rem solid rgb(0, 0, 0, 0.5);
		border-bottom: 0.15rem solid rgb(0, 0, 0, 0.5);
		text-align: center;
		font-size: 1.8rem;
	}

	span.perunit {
		opacity: 0.5;
	}
	
	.spanclass{
		font-size: 2.0rem;
	}

	canvas{
	  max-width: 100%;
	  max-height: 450px;
      display: block;
	}

	/* The Modal (background) */
	.modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Sit on top */
	  padding-top: 100px; /* Location of the box */
	  left: 0;
	  top: 0;
	  width: 80%;
	  height: 80%; 
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content */
	.modal-content {
	  background-color: #fefefe;
	  margin: auto;
	  padding: 20px;
	  border: 1px solid #888;
	  width: 95%;
	}

	/* The Close Button */
	.close {
	  color: #aaaaaa;
	  float: right;
	  font-size: 45px;
	  font-weight: bold;
	}

	.close:hover,
	.close:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}
	.close1 {
	  color: #aaaaaa;
	  float: right;
	  font-size: 45px;
	  font-weight: bold;
	}

	.close1:hover,
	.close1:focus {
	  color: #000;
	  text-decoration: none;
	  cursor: pointer;
	}

	#headerphone1{
		display: none;
	}
	#headerphone2{
		display: none;
	}
	/* component styles */
	#containerindex{
		width: 100%;
		display: grid;
		grid-template-columns:
			[left] 11rem auto 11rem [right];
		grid-template-rows:
			[top] auto auto auto [bottom];
		grid-template-areas:
			"head head head"
			"panleft mainbody panright"
			"panleft mainbody panright"
			"foot foot foot";
	}
	/* component styles */
	#containerindexevomax{
		display: grid;
		height: 100%;
		grid-template-columns:
			[left] auto 13rem [right];
		grid-template-rows:
			[top] auto auto [bottom];
		grid-template-areas:
			"head head"
			"mainbody panright"
			"mainbody panright"
			"foot foot";
	}
	/* component styles */
	#containerindexapelle{
		display: grid;
		height: 100%;
		grid-template-columns:
			[left] auto 13rem [right];
		grid-template-rows:
			[top] auto auto [bottom];
		grid-template-areas:
			"head head"
			"mainbody panright"
			"mainbody panright"
			"foot foot";
	}
	
	#hiddenComp{
		display: none;
	}
	.block-buy {
	  display: block;
	  width: 100%;
	  border: none;
	  background-color: #2a8a17;
	  color: white;
	  padding: 14px 28px;
	  font-size: 20px;
	  cursor: pointer;
	  text-align: center;
	}
	.block-buy-blue {
	  display: block;
	  width: 100%;
	  border: none;
	  background-color: #189aba;
	  color: white;
	  padding: 14px 28px;
	  font-size: 20px;
	  cursor: pointer;
	  text-align: center;
	}
	.block-buy-black {
	  display: block;
	  width:35%;
	  border: none;
	  background-color: black;
	  color: white;
	  padding: 14px 28px;
	  font-size: 2rem;
	  cursor: pointer;
	  text-align: center;
	}

	.block-sell {
	  display: block;
	  width: 100%;
	  border: none;
	  background-color: #99271f;
	  color: white;
	  padding: 14px 28px;
	  font-size: 20px;
	  cursor: pointer;
	  text-align: center;
	}

	.block-buy:hover {
	  background-color: #ddd;
	  color: black;
	}
	.block-buy-blue:hover {
	  background-color: #ddd;
	  color: black;
	}
	.block-buy-black:hover {
	  background-color: #ddd;
	  color: black;
	}
	.block-sell:hover {
	  background-color: #ddd;
	  color: black;
	}

	.input-box {
	  height: 50%;
	  width: 60%;
	  font-size: 2.0rem;
	}

}


@media only screen and (width <= 1600px) {
	
	#navbar {
	  width: 100%;
	  position: sticky;
	  top: 0;
	  background-color: #333;
	}

	#navbar a {
	  float: left;
	  display: block;
	  color: #f2f2f2;
	  text-align: left;
	  padding: 15px;
	  text-decoration: none;
	  font-size: 17px;
	}

	#navbar a:hover {
	  background-color: #ddd;
	  color: black;
	}

	#hiddenMobile{
		display: none;
	}
	#hiddenMobile1{
		display: none;
	}
	#header1{
		display: none;
	}
	/* component styles */
	#containerindex{
		width: 100%;
		display: grid;
		grid-template-columns:
			[left] 11rem auto 11rem [right];
		grid-template-rows:
			[top] auto auto auto auto [bottom];
		grid-template-areas:
			"head head head"
			"panleft mainbody panright"
			"panleft mainbody panright"
			"foot foot foot";
	}
	.sectionlink2{
		border-radius: 0.25rem;
		/* give this element a slight rounded edge */
		font-weight: normal;
		font-size: 1.0rem;
		padding: 0.2rem;
		width: 2rem;
		/* fixed width for these items */
		margin: 0.5em;
		/* slight margin for readability */
		background: rgb(0, 0, 0, 0.1);
	}
	.input-box {
	  width: 300px;
	  height: 50px;
	}
	
	#updates-area {
		background-color: rgb(0,0,0,0.2);
		width: 120px;
		height: 120px;
		padding: 4px;
		border: 2px;
		margin-bottom: 3px;
		border-style: ridge;
		border-color: #696969;
		font-size: 1.0rem;
		overflow-y: scroll;
	}

	.block-buy {
	  display: block;
	  width: 100%;
	  border: none;
	  background-color: #2a8a17;
	  color: white;
	  padding: 10px 16px;
	  font-size: 16px;
	  cursor: pointer;
	  text-align: center;
	}

	.block-sell {
	  display: block;
	  width: 100%;
	  border: none;
	  background-color: #99271f;
	  color: white;
	  padding: 10px 16px;
	  font-size: 16px;
	  cursor: pointer;
	  text-align: center;
	}

	.block:hover {
	  background-color: #ddd;
	  color: black;
	}

	.input-box {
	  height: 50%;
	  width: 60%;
	  font-size: 1.0rem;
	}


	/* element styles */
	* {
  	margin: 0px;
		/* by default, all elements (selector *) have no margin */
	}

	html {
		width: 100%;
		/* 100% width of parent (root) element */
		height: 100%;
		/* 100% height of viewport */
		background: rgb(169, 169, 169, 0.8);
		/* 10% black */
		font-size: 1rem;
		/* our root font size */
		font-family: Arial, Helvetica, sans-serif;
		/* default font */
		
	}

	body {
		min-height: 98%;
		min-width: 98%;
		font-size: 1.0em;
	}

	img.rounded-corners {
	  border-radius: 10px;
	}

	section {
		flex-grow: 5;
		/* in a flexbox, sections expand along flex axis */
	}

	h1 {
		/* Website name in header */
		font-size: 1.5rem;
		font-weight: normal;
		padding: 0.1rem;
	}

	h2 {
		/* About, Contact */
		font-size: 1.2rem;
		padding: 0.1rem;
	}

	h3 {
		/* Section headings */
		font-size: 1.1rem;
		padding: 0.1rem;
	}

	h4 {
		/* Section item title */
		font-weight: normal;
		padding: 0.1rem;
	}

	p {
		font-size: 1.5rem;
		/* Paragraph styling */
		padding: 0.1rem;
	}

}