: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);
  
}
html{
	scroll-behavior: smooth;

}
h1{
	font-size: var(--step-2);
	-webkit-hyphens: auto;
	  -moz-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;
}
h2{
	font-size: var(--step-1);
}

/* 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;
}
#ImgBtnDiv{
	position: absolute;
	bottom:50%;
	left:0px;
	display: flex;
	flex-direction:row;
	justify-content: space-between;
	z-index: 10;
	width: 100%;
	visibility: hidden;

}
.imgNavBtn{
	padding:.5rem;
	color:white;
	background: rgba(237, 172, 172, 0.143);
	font-size: var(--step-4);
	font-weight: 600;
	cursor: pointer;
}
.imgNavBtn:hover{
	border-bottom: 3px solid white;
	background-color:rgba(49, 48, 49, 0.908);
	background-image: linear-gradient(to right, #EC6F66 0%, #F3A183  51%, #EC6F66  100%);
	color: #c7cdc8;
	transition: all 2s ease ;

}
#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;
}


body{
max-width: 1500px !important;
margin: 0 auto;	
overflow-x: hidden;
/* background:linear-gradient(#000000 0%, #ffffff 100%); */
scrollbar-color: #011 wheat;
}

p{
font-size: var(--step-0);
background:#f5deb3;
padding:1em;
/* margin-inline: auto; */
border:1px solid tomato;
/* width: 80%; */
}
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: 0px;
	text-align: center;
	color:black;
	/* letter-spacing: .2em; */
	/* border-bottom:1px solid gray; */
	background: #CFC16C;
	margin: 0 auto;
	width: 1850px;

	font-weight: 500;
}
h3{
font-size:var(--step--1);
margin: 0px;
padding: 0px;
/* text-align: center; */
font-weight: 500;
}

.topnav {
  overflow: hidden;
  background-color: #CFC16C;
  color:black;
  position: relative;
  display: grid; 
  /* height: 41px; */
  grid-template-columns: 125px 1fr ;
 }

/* 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 */
.topnav a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: lemonchiffon;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* 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;

}	 */

#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;
}

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

#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 {
	cursor: pointer;
	height: 36px;
	margin: 0;
	position: relative;
	width: 36px;
}
.menu-button::before {
	border-bottom: 20px double #1abc9c;
	border-top: 1px solid #1abc9c;
	content: "";
	height: 5px;
	position: absolute;
	right: 0px;
	top: 6px;
	width: 36px;
}
.button {
	background-color: #9B6F1D;
	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:14px;
	text-align: center;
	font-weight:normal;
	background: #10a363;
	border-radius:8px;
	border:1px solid #dcdcdc;
	padding:9px 18px;
	text-decoration:none;
	color:#ffffff;
	min-width: fit-content;
	/* display:inline-block; */
	-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
	 box-shadow:inset 1px 1px 0px 0px #ffffff;
}
.css_btn_class:hover {
	background:-moz-linear-gradient( center top, #f4b2b2 95%, #ffffff 10% );
	background:-ms-linear-gradient( top, #f4b2b2  95%, #ffffff 10% );
	background:-webkit-gradient( linear, left top, left bottom, color-stop(95%, #f4b2b2 ), color-stop(10%, #ffffff) );
	background-color:#f6f6f6;
	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:1px solid tomato;
	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: grid; 
	grid-template-columns: repeat( 4, minmax(250px, 1fr) ); 
	grid-gap: 1em;
}
.footer{
	width: 100%;
	max-width: 1500px ;
}
.gallery{
	width: 100%;
	max-width: 1500px;
}
.gallery img{
	width: 100%;
}
#Enhance{
	margin-top: .5em;
	background: wheat;
	font-size: var(--step-1);
}
.gallery img:hover{
	border:2px solid tomato;
	/* 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);
	border:5px 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;
 }
 #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;
	}
	.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 only screen and (min-width: 767px) and (max-width: 1023px){
#banner{
	max-height:70vh;
}
#PlantContent{
	width: 98%;
	display:grid;
	grid-template-columns: 1fr;
	align-content: center;	
	justify-content: center;
	margin:.5em;
}

.popup_gallery{
	display: none;
}	
.lead{
	font-size: var(--step-1);
	width: 92%;
}
p{
	font-size: var(--step-0);
	background:#f5deb3;
	padding:1em;
	border:1px solid tomato;
	width: 95%;
}
#potm_images{
	display:none;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-template-rows: auto auto auto ;
	max-height:100vh;
	overflow-y: scroll;
}

.gallery{
	display: grid; 
	grid-template-columns: repeat( 3, 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%);	

}
table{
		display:table;
		width:100%;
		table-layout: fixed;
		overflow-wrap: break-word;
		/* margin-left: 2em; */
}
#do_not_print{
	display: grid; 
	grid-template-columns: repeat( 4, minmax(175px, 1fr) ); 
	grid-gap: 1em;
}
#ReferenceInfo{
	/* width:92%; */
}

}

@media only screen and (min-width: 1024px) and (max-width: 1440px) {
body{
	width: 850px;
	margin: 0 auto;	
	background:linear-gradient(#000000 0%, #ffffff 100%);
}
#banner{
	max-height:70vh;
}
#PlantContent{
	display: grid; 
	grid-template-columns: 1fr ;
	grid-gap: 1.5rem;
	width:810px;
	margin:0px ;
	background:linear-gradient(#000000 0%, #ffffff 100%);
	border:2px outset black;
	padding: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:850px;
	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%);	
}
}
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5){
body{
  width: 100%;
  overflow-x: hidden;
}
#PlantContent{
	width: 98%;
}
 .gallery{
	 width: 100%;
 }
 .table{
	 margin-left: auto;
	   margin-right: auto;
 }
  }

@media only screen and (min-width: 1441px) and (max-width: 1999px) {
body{
	width: 1100px ;
	margin: 0 auto;	
	background:linear-gradient(#000000 0%, #ffffff 100%);
}
#banner{
	max-height:70vh;
}
#PlantContent{
	display: grid; 
	grid-template-columns: 1fr 2fr;
	grid-gap: 1.5rem;
	margin:0px;
	background:linear-gradient(#000000 0%, #ffffff 100%);
	border:2px outset black;
	padding:0px;
	margin:0px;
	width:100%;
	/* max-width: 1300px ; */
}
#do_not_print{
	display: grid; 
	grid-template-columns: repeat( 4, minmax(175px, 1fr) ); 
	grid-gap: 1em;
}

.popup_gallery{
	display: block;
	overflow-y:auto;
	width: 100%;
	}
.gallery{
		display: grid; 
		grid-template-columns: repeat( 4, 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%);	
	}
}
@media only screen and (min-width: 2000px){
	html {
		max-width: 1850px;
		margin: 0 auto;
		overflow-x: clip;
	}
	body{
		max-width: 100% !important;
		margin: 0 auto;

		
	}
	#PlantContent{
		display: grid; 
		grid-template-columns: 1fr 2fr;
		/* grid-gap: 5rem; */
		width: 1850px ;
		background:linear-gradient(#000000 0%, #ffffff 100%);
		/* border:2px outset black; */
		padding:0px;
		margin:0 auto;
}
#POTMNav{
	width: 1850px ;
	margin: 0 auto;
}

#banner_div{
	/* max-height:70vh; */
	/* border:2px outset black; */
	margin: 0 auto;
	width: 1850px;
	margin-bottom: .25em;
		
}
#banner{
	/* width: 100vw; */
	  height: 90vh;
	  object-fit: cover;
	  display: block;	
	border:5px solid rebeccapurple;
}
#potm_name, #RelatedPlants{
	margin: 0 auto;
	width: 1850px;
}


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;
}
.popup_gallery{
display: block;
overflow-y:auto;
width: 100%;
}

.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( 4, 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%);	
	max-width: 100%;
}


}
@media only screen and (min-width: 200px) and (max-width: 766px){
html, body {
  max-width: 100%;
  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: row;
	flex-flow: column;
	width: 100%;
	margin: 0px;	
	/* overflow-x: hidden; */
	/* padding:1em; */
}
.imgs_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: fit-content;
}	

p{
	font-size: var(--step-0);
	background:#f5deb3;
	padding:1em;
	border:1px solid tomato;
	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{
	/* width:90%; */
	/* margin-left:1.5em; */
	/* margin-right: 1.5em !important; */
	border:1px solid lemonchiffon;
}

}