:root {
  --step--2: clamp(0.7rem, 0.79rem + 0.10vw, 0.96rem);
  --step--1: clamp(1.09rem, 1.05rem + 0.21vw, 1.20rem);
  --step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.50rem);
  --step-1: clamp(1.58rem, 1.46rem + 0.59vw, 1.88rem);
  --step-2: clamp(1.89rem, 1.71rem + 0.89vw, 2.34rem);
  --step-3: clamp(2.27rem, 2.01rem + 1.29vw, 2.93rem);
  --step-4: clamp(2.72rem, 2.36rem + 1.83vw, 3.66rem);
  --step-5: clamp(3.27rem, 2.75rem + 2.56vw, 4.58rem);
  --site-width: 1850px;
  --surface: #597A4B;
  --accent:black;       /* deep forest green */
  --text: hsl(210 12% 20%);         /* soft charcoal */
  --border-color: #0a3606 ; /* pale sage */
  --html-light-bg:rgb(220, 218, 218);
  --html-dark-bg:rgb(32, 2, 2);
  
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
	background: var(--html-dark-bg);
}
}

.currentThumb{
	outline:4px solid white;
	box-shadow:0 0 30px rgba(0,0,0,.35);
	animation:thumbPulse .5s ease;
}

@keyframes thumbPulse{
	0%{
		transform:scale(.85);
	}
	60%{
		transform:scale(1.08);
	}
	100%{
		transform:scale(1);
	}
}
/* Existing carousel */
#banner_div {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* Gallery mode */
#banner_div.gallery-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  scroll-snap-type: none;
  margin-block: .5em;
  padding: 1em;
  background: wheat;
}

#banner_div.gallery-mode img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  flex: none;
  display: block;
  object-fit: cover;
  scroll-snap-align: none;
  border-radius: 8px !important;
}

.banner-wrap:has(#banner_div.gallery-mode) .banner-arrow {
  display: none;
}

@media (max-width: 1024px) {
  #banner_div.gallery-mode {
	grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #banner_div.gallery-mode {
	grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width:1023px){

	#GalleryToggle{
		display:none;
	}

	#bannerGallery{
		display:none !important;
	}

}

@media (max-width:1023px){
	#GalleryToggle{
		display:none;
	}

	#bannerGallery{
		display:none !important;
	}
}
#GalleryToggle{
font-size: 1em;
margin: .41em;
background: none !important;
padding: 0;

}
#GalleryToggle:hover{
	border: none;
	padding: .25em;
}
html{
	scroll-behavior: smooth;
	background: ;
}
html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px !important;
  min-height: 100vh;
  margin-inline: auto;
  overflow-x: clip;
}
body.bg0 {
	background: #ffffff;
}

body.bg1 {
	background: #f2efe7;
}

body.bg2 {
	background: #395a44;
}

body.bg3 {
	background: #2c2c2c;

}
main{
	background: rgb(243, 245, 247);
	background: linear-gradient(180deg, #f5deb3 0.00%, #e5d09b 100.00%);
	padding-inline: .5em;
}
	.gg{
	background: #adbfa6;
	padding: 1em;
	margin-block: 1em;

}
.banner-arrow{
	pointer-events: auto;     /* buttons remain clickable */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 2rem;
	font-weight: 600;
	color: white;
	opacity: 0.45;
	transition: opacity 0.2s ease;
	background: rgba(0,0,0,.35);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background .2s ease;
}

.banner-arrow:hover{
	background: rgba(0,0,0,.7);
	color: yellow;
	opacity: 1;
}
#shortcutModal{
	display:none;
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	z-index:99999;
}

.shortcut-content{
	background:#fff;
	margin:8vh auto;
	padding:1.5rem;
	width:min(550px,90vw);
	border-radius:10px;
	box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.shortcutTable{
	width:100%;
	border-collapse:collapse;
}

.shortcutTable td,
.shortcutTable th{
	padding:.55rem;
	border-bottom:1px solid #ddd;
}

.shortcutTable th{
	text-align:left;
	padding-top:1rem;
}

kbd{
	display:inline-block;
	min-width:1.8em;
	padding:.2em .45em;
	border:1px solid #aaa;
	border-radius:4px;
	background:#f6f6f6;
	font-family:inherit;
	text-align:center;
}
.page,
.topnav,
#banner_div,
#PlantContent {
	/* max-width: 1500px; */
	margin-inline: auto;
}
.banner-wrap {
  position: relative;
  overflow: hidden;
  /* border-radius: 14px; */
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

.banner-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  background: rgb(0 0 0 / 35%);
  color: white;
  font-size: 2rem;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
}

.banner-arrow:hover {
  opacity: 1;
  background: rgb(0 0 0 / 65%);
}

.previous { left: 16px; }
.next { right: 16px; }

@media (max-width: 767px) {
  .banner-arrow {
	width: 42px;
	height: 42px;
	opacity: 0.9;
  }

  .previous { left: 10px; }
  .next { right: 10px; }
}
footer {
	margin-top: auto;          /* Pushes footer to the bottom */
	text-align: center;
	padding: 1rem;
	color: var(--text-color);
	background: var(--surface);
	border-top: 1px solid var(--border-color);
	font-size: 0.9rem;
}

h1{
	font-size: var(--step-2);
	-webkit-hyphens: auto;
	  -moz-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
	  padding-top: .25em;
}
h2{
	font-size: var(--step-1);
}
ul, li{
	font-size: 1.15em;
}
	.asideButtons{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:.5rem;
}

.asideButtons .css_btn_class,
.asideButtons button{
width: 80%;
}
.pageInfoTitle {
	display: flex;
	align-items: center;      /* Vertical alignment */
	justify-content: center;  /* Center the whole heading */
	gap: .5rem;
	font-size: var(--step-2) !important;
	background: none;
	margin: 0 0 1rem;
}

.pageInfoTitle svg {
	width: 2em;
	height: 2em;
	fill: currentColor;
	flex-shrink: 0;
}
.pageInfo {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .8rem 1.25rem;
	align-items: center;
}

.pageInfo dt {
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
}

.pageInfo dd {
	margin: 0;
	color: var(--text);
}

.pageInfo dt:not(:first-of-type),
.pageInfo dd:not(:first-of-type) {
	padding-top: .75rem;
	border-top: 1px solid var(--border-color);
}
#PlantContent {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
#SMMTCLogo{
	grid-column: 1;
	justify-self: start;
}

#PlantHome{
	grid-column: 2;
	justify-self: center;
	margin: 0;
}
#banner_div{
	position: relative;
	
}
.plantHeader{
	display: flex;
	background: #CFC16C;
}

.imgNavBtn{
	pointer-events: auto;     /* buttons remain clickable */
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	font-size: 2rem;
	font-weight: 600;

	color: white;
	background: rgba(0,0,0,.35);
	border: none;
	border-radius: 50%;
	cursor: pointer;

	transition: background .2s ease;
}

.imgNavBtn:hover{
	background: rgba(0,0,0,.7);
}
#banner_div{
	position: relative;
}

#ImgBtnDiv{
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding-inline: .5rem;

	pointer-events: none;
	z-index: 100;
}

#imgNavLeft,
#imgNavRight{
	pointer-events: auto;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	border: none;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	color: white;
}

.menu-button{
	grid-column: 3;
	justify-self: end;

	width: 48px;
	height: 48px;
	margin: 0;
}


/* Modal container with transition */
#imgModal {
  position: fixed;
  top: 0; left: 0;
  /* width: 100vw; */
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
  padding: 1em;
  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* When modal is active */
#imgModal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#closeModalBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5em;
  line-height: 1;
  z-index: 1001;
  touch-action: manipulation;
}

#modalImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  transform: scale(0.95);
 transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

/* When modal is active, zoom image in */
#imgModal.active #modalImage {
  transform: scale(1);
  opacity: 1;
}
/* Optional: add smooth zoom-out when modal closes */
#imgModal.closing #modalImage {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#banner_div{
	position: relative;
	
}
#potm_name{
	margin:0px;
	/* border-left:2px outset black;
	border-right:2px outset black; */
	/* border-right:2px outset black; */
	padding: 0px;
	background: rgb(247,244,244);
background: linear-gradient(90deg, rgba(237,238,213,1) 11%, rgba(207,193,108,1) 27%, rgba(220,205,111,1) 69%, rgba(240,235,141,1) 84%, rgba(237,238,213,1) 89%);	
	
}
#RelatedPlants [href]{
	color:#100;
	font-weight: 600;
	font-family: sans-serif;
	text-align: center;
}
#RelatedPlants [href]:hover, [href]:focus{
	background: wheat;
}

.img_gallery{
width: min(200px, 100%);	
}
.overlay{
border-image:linear-gradient(hsl(240, 53%, 84%) / .8),hsl(62, 20%, 46%) / .8));
border-image: fill 1 ;
}
.subtle{
	font-size: 2vw;
	/* line-height: 1.25; */
	font-weight: 800;
	text-transform: uppercase;
	padding: 1rem 2rem;
	color: rgba(240, 235, 235, 0.784);
	/* background-color: #fff; */
	background-color:rgba(49, 48, 49, 0.42); 
	mix-blend-mode: lighten;
	mix-blend-mode: soft-light;
	mix-blend-mode: overlay;
	mix-blend-mode: multiply;
}


#banner_div:hover > #ImgBtnDiv{
	visibility: visible;
}
.mobile{
	display: none;
}
.allElse{
	display: inline-block;
}
.BookList{
font-size:var(--step--1);
margin: 0px;
width: max-content;
padding: 0px;
/* text-align: center; */
font-weight: 500;
background: rgb(242, 242, 201);
}

#imageInfo tr td{
background:black;
	font-family: monospace;
	color: aqua;
	font-size:12px !important;
	
}
#imageInfo tr:nth-child(even){
background:rgb(82, 127, 101);
}
#imageInfo tr:nth-child(odd){
background:rgb(2, 71, 31);
}
#imageInfo td{
	border:1px solid black;
}
#imageInfo td + td{
text-align: right;
}

p{
font-size: var(--step-0);
background:#f5deb3;
padding:1em;
/* margin-inline: auto; */
border:1px solid rgb(206, 197, 84);
/* width: 80%; */
 box-shadow:inset 1px 1px 0px 0px #d2b367;

}
li + li {
  margin-top: 10px;
}
#PlantContent{
	margin-inline: auto;
}
.img-responsive{
	width: 100%;
}
.textBlock{
	font-size: var(--step-0);
	background:#f7d086;
	padding:1em;
	margin-inline: auto;
	border:1px solid lemonchiffon;
	/* width: 100%; */
}

.lead{
	font-size: var(--step-2);
	background:#F4EED3;/* max-width: 1100px ; */
	
}
h1,h2,h3,h4{
	margin:0px;
	padding:.3em;
	/* padding-top: .25em; */
	text-align: center;
	color:black;
	text-wrap: balance;
	/* letter-spacing: .2em; */
	/* border-bottom:1px solid gray; */
	background: #CFC16C;
	margin: 0 auto;
	font-weight: 500;
}
h3{
font-size:var(--step--1);
font-weight: 500;
}

.topnav {
  overflow: hidden;
  background-color: #CFC16C;
  color:black;
  position: relative;

 }
 .topnav {
	 display: grid;
	 grid-template-columns: auto 1fr auto;
	 align-items: center;
 }
.topnav {
	 position: relative;
 }
 
/* Hide the links inside the navigation menu (except for logo/home) */
#myLinks{
	display: flex;
	justify-content: space-between;
	gap:1em;
}
#myLinks a[href]{
	color:rgb(250, 250, 95);
	text-decoration-color: black;
	display: block;
	font-size: 1em;
 height: 2em;
 text-align: right;
}
/* Style navigation menu links */

.menu-button {
	margin-left: auto;

	width: 48px;
	height: 48px;

	border: none;
	background: none;
	color: inherit;

	font-size: 1em;
	cursor: pointer;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #fd5;
  color: black;
}
#myLinks{
	/* width:150px; */
	line-height: 1em;
	/* position: absolute; */

}
.fa, .fa-bars{
	font-size: var(--step-1);
}
#SMMTCLogo{
	cursor: pointer;
}
.showOnDemand{
	display: none;
}
#banner{
	object-fit: cover;
	margin-bottom:-5px;
	position: relative;

		}
/* #banner:hover + .showOnDemand{
	cursor:pointer;
	display: block;
	  color: rgb(237, 234, 185);
	  text-align: center;

}	 */
img{
width: 100%;	
}
#navfooter{
	padding:10px; 
	margin:0;
	border:4px solid #dcdcdc;
	background-image: -webkit-linear-gradient(rgba(109, 157, 129,1) 0%,rgba(199, 255, 226, 1) 65%); 
	background-image: -moz-linear-gradient(rgba(109, 157, 129,1) 0%,rgba(199, 255, 226, 1) 65%);
	background-image: -ms-linear-gradient(top,rgba(109, 157, 129,1) 0%,rgba(199, 255, 226, 1) 65%);
	}	
#printBanner{
background: #CFC16C;
display: flex; 
justify-content: space-between;	
}	
#WriteUp{
	max-width: 1500px ;
	margin-right: 3.5em ;
}
#POTMNav{
	/* background: #8b8c5d; */
	display: flex; 
	justify-content: space-between;
	margin: .4em;
}

#potm_name, .title{
	font-size: var(--step-2);
	/* letter-spacing: .2em; */
}
#PlantDiagram {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;	
  width: 100%;
}

#PlantDiagram:hover {opacity: 0.7;}

.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: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1300px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

.title{
	background-color: #CFC16C;
	text-align: center;
	padding-top: 8px;
}
.menu-button {
	width: 48px;
	height: 48px;
	border: none;
	background: none;
	color: #000;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.button {
	background-color: #56906A;
	border: none;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.3em;
	margin: 4px 2px;
	cursor: pointer;
}
.button:hover{
	background-image: linear-gradient(90deg, #646060 0%, #01471f 100%);
	border:1px solid tomato;
	transition: all 2s ease;
	/* color:black; */
}
#next_potm {
  /* position : relative; */
  z-index  : 0;
}
.menuItem{
	font-size: var(--step--1);
	background: #c3b768;
	padding: 5px 12px;
	color:black;
}	
.menuItem:hover{
	font-size: var(--step-1);
	background: #7A7240;
	color: black;
}
.menuItem a[href]{
	text-decoration-color: black;
	display: block;
	color: black;
}
.menuItem:hover a[href]{
color:yellow;
text-decoration-color: black;
display: block;
}	
.container{
	margin-inline:auto;
	/* background: #efefef;
	background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
	background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
	background-image: linear-gradient( 0deg, #5A8A56 10%, #9A9C65 100%); */
	padding-left: 1em;
}
.css_btn_class {
	font-size:1.2em;
	text-align: center;
	font-weight:normal;
	background: #59847C;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	color:#ffffff;
	margin: .5em;
	/* min-width: fit-content; */

	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
	 box-shadow:inset 1px 1px 0px 0px #ffffff;
}
.css_btn_class:hover {
background: linear-gradient(180deg, #f0fff0 0.00%, #98fb98 100.00%);
background: linear-gradient(225deg, #50c878 0.00%, #228b22 100.00%);
background: linear-gradient(225deg, #134e5e 0.00%, #71b280 100.00%);
background: linear-gradient(225deg, #f4a460 0.00%, #deb887 100.00%);
	font-weight: 600;
	color:black;
}
.css_btn_class:active {
	position:relative;
	top:1px;
}
.css_btn_class:link {
	color:black;text-decoration: none;
}	
table tr,td{
	border:2px solid rgb(210, 180, 103);
	font-size: var(--step-1);
}
table tr:nth-of-type(even){
background-color: #fcffd3;
}
table tr:nth-of-type(odd){
background-color: #CFC16C;
}
.active{
	text-align: right;
}
blockquote {
	font-family: "Georgia", "Courier New", "courier", "sans-serif";
	font-size: var(--step-0);
	background: #F6EDD9;

	padding: 5px 1rem;
	border: solid 1px #576;
	line-height: 1.4em;
	border-radius:6px;
	color:  black;
}
#do_not_print{
	display: frid; 
	grid-template-columns: 1fr; 
	grid-gap: 1em;
}
.footer{
	width: 100%;
	max-width: 1500px ;
}
.gallery {
	display: grid;
	gap: 1rem;

	max-height: 100vh;
	overflow-y: auto;

	padding: 1rem;
	box-sizing: border-box;
}
/* .gallery figure {
	margin-top: 0;
} */

.gallery figure{
	margin:0;
	display:flex;
	flex-direction:column;
}

.gallery img{
	display:block;
	width:100%;
	height:auto;
	box-sizing: border-box;
}

.gallery figcaption{
	display:block;
	width:100%;
	box-sizing:border-box;
	text-align:center;
	padding:.4rem;
}

.gallery figure:hover figcaption{
	background:#CFC16C;
	outline:2px solid dodgerblue;
	outline-offset:-2px;
}
.plantFacts .lead,
.plantFacts table {
	max-width: 65rem;
	margin-left: 0;
}
#Enhance{
	margin-top: .5em;
	background: wheat;
	font-size: var(--step-1);
}
.gallery img:hover{
	outline:2px solid dodgerblue;
	outline-offset:-2px;
	/* scale:1.2; */
	/* margin-bottom: 1em; */
}
.popup_gallery{
	display:none;
}

.img_flower, .img_diagram{
	width: 100%;
	aspect-ratio: 4/3;
}


.table{
	width: 100%;
	margin-left:0px;
	margin-top:1em;
	max-width: 890px ; 
}

/* #PlantContent{
	width: 98%;
	display:flex;
	flex-direction: column;
	align-content: center;	
	justify-content: center;
	margin:.5em auto;
} */

#menuToggle {
	  display: none;
	 position: absolute;
	 top: 0;
	 right: 0;
	 z-index: 10; 
	  color: white;
	  -webkit-user-select: none;
	  user-select: none;
	}

#menuToggle li {
  text-decoration: none;
  color: whitesmoke;
  transition: color 0.3s ease;
}

#menuToggle li:hover {
  color: tomato;
}
	
#menuContents{
	width: 100%;
	background: wheat;
	border:10px solid tomato;
}	
#menu {
	display:none;
	position: fixed;
	width:	215px;
	background: rgb(24, 16, 16);
	padding-top: 0px;
	padding-left:0;
	color: white !important;
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
	transform-origin: 0% 0%;
	/* transform: translate(-100%, 0); */
	transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
	outline:3px solid rgb(65, 63, 63);
}

#menu li {
	font-size: 1rem;
	padding-left:8px;
	line-height:1.3rem;
	color:yellow;
	margin:0px;
	border:1px solid lemonchiffon;
	line-height: 2em;
 }
 #menu li:hover{

	background: rgb(101, 101, 101);
	cursor:pointer;	
 }

#menuToggle input:checked ~ ul {
  transform: none;
}
/* .sidemenu:nth-child(3), .sidemenu:nth-child(4),.sidemenu:nth-child(5){
		color:lime;
		background: rgb(82, 127, 101);
		padding:.5rem !important;
		margin:0px;
		border:1px solid tomato;
	} */
 .sidemenu:nth-last-child(-n + 2) {
		background: #CFC16C !important;
		color:black !important;
		padding:.5rem !important;
		font-size:1em;
		line-height: 1em;
	}
	.sidemenu:first-child, .sidemenu:nth-child(2){
	color:rgb(12, 12, 12) !important;
	background: rgb(132, 177, 151);
		/* font-size: var(--step-0); */
		padding:.5rem !important;
		/* height: 2rem !important; */
		margin:0px;
		border:1px solid white;
	}
.szidemenu:nth-last-of-type(2) {
	color:rgb(12, 12, 12) !important;
	background: rgb(132, 177, 151);
	font-family: monospace;
	font-size:10px;
	border:1px solid rgb(232, 221, 219);
}	
.notRelated{
	color:rgb(12, 12, 12) !important;
	background: rgb(132, 177, 151);
}
#compTable{
	font-size: 1em;
	max-width: 900px;
}
#compTable tr td{
	font-size: .85em;
	border:none;
	background: none;
	padding: 3px;
}

@media (min-width:768px) and (max-width:1023px){

	#PlantContent{
		grid-template-columns:1fr;
	}

	.gallery{
		grid-template-columns:repeat(3,1fr);
	}

#banner_div{
		position: relative;
	}
	
	#banner{
		display: block;
		width: 100%;
		height: auto;
		cursor: pointer;
	}
}
.banner-wrap {
  position: relative;
}

#banner_div {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#banner_div::-webkit-scrollbar {
  display: none;
}

#banner_div img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.banner-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 65%);
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

.previous { left: 12px; }
.next { right: 12px; }
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
body{
	margin: 0 auto;	
	background:linear-gradient(#000000 0%, #ffffff 100%);
}
#banner{
	max-height:70vh;
}
aside{
	width: 98%;
}
#PlantContent{
	display: grid;
	grid-template-columns: 1fr;
	/* max-width: 810px; */
	width: 100%;
	margin-inline: auto;
	padding: 1em;
	gap: 1.5rem;
}
.plantFacts{
	margin-inline: 1em;
}
p{
	width:	90%;
}
.lead{
	
	width: 90%
}
#do_not_print{
	display: grid; 
	grid-template-columns: repeat( 4, minmax(175px, 1fr) ); 
	grid-gap: 1em;
}

.popup_gallery{
	display: none;
	overflow-y:auto;
	width: 100%;
}

.img_flower{
	margin-bottom: 1em;
	}	

p:first-of-type{
	font-size: var(--step-2);
	background:#F4EED3;
}
.gallery{
	display: grid; 
	grid-template-columns: repeat( 3, minmax(250px, 1fr) ); 
	width:100%;
	align-content: center;
	justify-content: center;
	background: #cedce7;
	background: -moz-linear-gradient(left, #cedce7 0%, #596a72 100%);
	background: -webkit-linear-gradient(left, #cedce7 0%,#596a72 100%);
	background: linear-gradient(to right, #cedce7 0%,#596a72 100%);	
}
main{
	background: none !important;
}
}
@media only (min-width:768px) and (max-width: 1024px)  {

#PlantContent{
	display: grid;
	grid-template-columns: 375px 1fr !important;
	/* max-width: 810px; */
	width: 100%;
	margin-inline: auto;
	padding: 1em;
	gap: .05rem;
}	
#PlantContent > aside{
	order: 1 !important;
}
.plantFacts{
	order: 2;
}
##RelatedPlants{
	margin-top:2em;
}
.gallery{
	display: grid; 
	grid-template-columns: repeat( 2, minmax(175px, 1fr) ); 
	width:100%;
	align-content: center;
	justify-content: center;
	background: #cedce7;
	background: -moz-linear-gradient(left, #cedce7 0%, #596a72 100%);
	background: -webkit-linear-gradient(left, #cedce7 0%,#596a72 100%);
	background: linear-gradient(to right, #cedce7 0%,#596a72 100%);	
	margin-inline: .35em;
}
}

@media (max-width: 1199px) {

	.plantFacts{
		order: 1;
	}

	#PlantContent > aside{
		order: 2;
	}

}
@media (min-width:1200px){

	#PlantContent{
		grid-template-columns:520px 1fr;
		gap:3rem;
		align-items:start;
	}

	aside{
		position:sticky;
		top:1rem;
	}
#POTMNav{
	background: var(--surface);
}
}
@media (max-width:1400px){
	#BackgroundToggle{
	display: none
}
}
@media (min-width:1700px){

	#PlantContent{
		gap:5rem;
	}

	.gallery{
		grid-template-columns:repeat(2,1fr);
	}

}
@media only screen and (min-width: 1768px) and (max-width: 1925px){
	body{
		width:100%;
		max-width: 1300px;
	
	}
	
}
@media only screen and (min-width: 2000px){
	html {
		/* max-width: var(--site-width); */
		margin: 0 auto;
		overflow-x: clip;
	}
	body{
		/* max-width: 100% !important; */
		margin: 0 auto;
	}

	#PlantContent {
		display: grid;
		grid-template-columns: 560px 1fr;
		align-items: start;
		column-gap: 3em;
		row-gap: 2em;	
		}
	
	#PlantContent > aside {
		min-width: 0;
		width: 100%;
	}
	
	#PlantContent > .plantFacts {
		min-width: 0;
	}
.plantFacts table {
		width: 100%;
		table-layout: auto;
	}
	
	.plantFacts td:first-child {
		white-space: nowrap;
		width: 1%;
	}
	/* aside{
		display:grid;
		gap:1rem;
		width: 100%;
		min-width: 0;
		max-width: 450px !important;
	}
	
	aside img {
		max-width: 100%;
		height: auto;
		display: block;
	} */

	.aside-card{
		background:var(--surface);
		border:1px solid var(--border-color);
		border-radius:.75rem;
		/* padding:1rem; */
		margin-block:1em;
	}
	
	.aside-card h3{
		margin:0 0 .75rem;
		padding-bottom:.35rem;
		border-bottom:1px solid var(--border-color);
		font-size:1.1rem;
	}	

.gg{
		background: #adbfa6;
		padding: 1em;
		margin:1em;
	
	}
	.referenceList{
		margin:0;
		padding-left:1.2rem;
	}
	
	.referenceList li{
		margin-bottom:.75rem;
	}
	


#banner{
		width:100%;
		display:block;
		object-fit:contain;
		border:5px solid rebeccapurple;
		box-sizing:border-box;
	}

#potm_name, #RelatedPlants{
	margin: 0 auto;

}


p:first-of-type{
	font-size: var(--step-2);
	background:#F4EED3;
}
p:last-of-type{
	font-size: var(--step--1);
	background:#73885d;
	background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
	border:1px solid #73885d;
	width: max-content;
}

blockquote{
	margin-left:0px;
	margin-right: 0px;

}
blockquote:has(a)::first-line{
	background: yellow;
}
.img_flower{
	margin-bottom: 1em;
}	
.clickableIMG:hover{
	cursor: pointer;
	background: yellow;
	color:black !important;
}

.table td{
	padding-right: 1em;
}
.table td:nth-child(1) {  
  width: 35%;
  
}
#ReferenceInfo{
	width:100%;
	max-width: 100% ;
	margin:0 auto;
	padding: 0px;
	/* margin-left:0px;
	margin-right: 1.5em; */
	display: grid;
	grid-template-columns: 1fr 2fr;
	border-top: 3px sandybrown solid;
}
#ReferenceInfo div:first-of-type{
	background: rgb(82, 127, 101);
	padding: 1em;
	border-right: 3px sandybrown solid;
}
#ReferenceInfo div:last-of-type{
	background: rgb(108, 138, 184);
	padding: 1em;
}
/* .gallery{
	display: grid; 
	grid-template-columns: repeat( 2, minmax(250px, 1fr) ); 
	align-content: center;
	justify-content: center;
	background: #cedce7;
	background: -moz-linear-gradient(left, #cedce7 0%, #596a72 100%);
	background: -webkit-linear-gradient(left, #cedce7 0%,#596a72 100%);
	background: linear-gradient(to right, #cedce7 0%,#596a72 100%);	
} */
.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;          /* instead of 2rem or 3rem */
	width: 100%;
}



}
@media only screen and (max-width: 766px){
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}
header{
	overflow-x: hidden;
}

#PlantContent{
	margin-inline: auto;
}
#Enhance{
	font-size: var(--step-0);
}
.subtle{
	display: none;
}
.mobile{
	display: block;
}
.allElse{
	display:none;
}
#potm_images{
display: none;
grid-template-columns: 1fr 1fr ; 
max-height:60vh;
overflow-y: scroll;
order:2;
overflow-x: hidden;
}

.img_flower{
	border:1px solid tomato;
	max-height: 100%;
	
}
.title,
.child{
	display:none;
}

.gallery{
	display: flex;
	flex-direction: column;
	flex-flow: column;
	margin: 0px;
	width: 100%;	
}
.img_gallery{
	width: 75px;
	border:1px solid tomato;
}
table tr,td{
	font-size:var(--step-0);
}
table{
		display:table;
		width:100%;
		table-layout: fixed;
		overflow-wrap: break-word;
		order:1;
}

#do_not_print{
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
	width:100%;
}

p{
	font-size: var(--step-0);
	background:#f5deb3;
	padding:1em;
	border:1px solid rgb(206, 197, 84);
	max-width: 98%;
	margin:0px;
	/* margin-left:1em; */
}
.lead{
		font-size: var(--step-1);
		margin:0px;
		/* padding-left:1.25em; */
}
blockquote{
margin:0px;
	/* margin-left:1.25em; */
}
#POTMNav, #prev_next{
		display: none;
}
h1,h2,h3{
	margin:0px;
	/* padding: 1em; */
	text-align: center;
	color:black;
	/* letter-spacing: .2em; */
	border-bottom:1px solid gray;
	background: #CFC16C;
	font-weight: 500;
	/* width: 90%; */
}

#ReferenceInfo{
	border:1px solid lemonchiffon;
}
	.topnav{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		padding: .15rem .4rem;
		min-height: 42px;
		background-color: rgb(207, 193, 108) !important;
		backdrop-filter: blur(8px);
		border-bottom: 1px solid rgba(255,255,255,.12);
		box-sizing: border-box;
		-webkit-transform: translateZ(0);
	}

	#PlantHome{
		font-size: 1rem;
		font-weight: 600;
		/* text-align: left; */
		flex: 1;
		color: black;
		background: transparent;
		display:block !important;
	}

	#SMMTCLogo img{
		width: 80px !important;
		height: auto;
		display:block;
	}

	.topnav a.icon{
		font-size: 1.6rem;
	}
	#myLinks{
		display: none;
		position: fixed;
		top: 42px;
		left: 0;
		right: 0;
		z-index: 99998;
		background: rgba(20,20,20,.97);
		padding: .5rem;
		box-sizing: border-box;
		flex-direction: column;
		gap: .5rem;
		border-bottom: 2px solid rgba(255,255,255,.15);
	}
	#myLinks.show{
		display: flex;
	}
	#myLinks a{
		color: white !important;
		text-decoration: none;
		padding: .75rem;
		border-radius: .35rem;
		background: rgba(255,255,255,.08);
		font-size: 1rem;
	}
#menu{
	position: fixed;
	top: 0;
	left: 0 !important;
	width: 100%;
	margin: 0;
	margin-bottom: 2em;
	padding-bottom: calc(4rem + env(safe-area-inset-bottom));
	box-sizing: border-box;
	border: 0;
	border-top: 1px solid rgba(255,255,255,.1);
	background: rgba(20,20,20,.97);
	z-index: 99998;
	transform: none !important;
	height: 100%;
	/* height: calc(100vh - 42px); */
	overflow-x: clip;
	overflow-y: auto;
	}

	#menu li{
		display: block;
		width: 100%;
		color:white;
		padding:.85rem;
		border-bottom:1px solid rgba(255,255,255,.1);
		font-size:1rem;
	width: 100%;
	text-align: center;
	line-height: 3em;
	}
	body{
		padding-top:42px;
	}
}