@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
}

/* main page attributes */

#body {
	min-height: 100dvh; 
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%;
	line-height: 1.3em;
	position: relative;
	padding:0;
	/* [disabled]padding-top: 15px; */
	
}

a:link {color:blue;}      /* unvisited link */
a:visited {color:#909;display:block;}  /* visited link */
a:hover {color:#880000;}  /* mouse over link */
a:active {color:white;}  /* selected link */ 

a {
	text-decoration:none;
}

#wrapper {
	width: 100%;
	min-height: 100%;
	min-height: auto  !important;
	margin-left: auto;
	margin-right: auto;	
	background-color: #FFFFFF;
	position: flex;
}


/* page-header */

/* begin code for test-top-menu styling */

#top-menu {
    width: 75%;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 83%;
	font-weight:500;
	padding-top: 2px;
	padding-left:45%;
	list-style: none;
    display: inline-block; /* or display: inline-block; */
	display:flex;
	justify-content:center;
	align-items:center;
}

#top-menu ul {
	display: flex; /* Also use flex for the inner ul */
    align-items: center; /* Align its children (li's) vertically */
    margin: 0; /* Remove default ul margin */
    padding: 0; /* Remove default ul padding */
}

#top-menu li {
    display: flex; /* or display: inline-flex; */
	align-items:center;
    margin-right: 20px; /* Add some spacing between items */
	margin-left:20px;
}

.search-item {
    position: relative; /* Establish a positioning context for the absolute search bar */
}

#top-menu a:link {
    display:block;
	color:#000;
    text-align:center;
    text-decoration:none;
}

#top-menu a:visited {
    display:block;
	color:#000;
    text-align:center;
    text-decoration:none;
}

#top-menu a:hover {
    display:block;
	color:#880000;
	font-weight:bold;
    text-align:center;
    text-decoration:none;
}

#top-menu a:active {
    display:block;
	color:#000;
    text-align:center;
    text-decoration:none;
}

#top-menu .button {
  /* Style the button as needed */
  padding: 3px 6px;
  background-color: #336699;
  color:000;
  font-weight:600;
  color:white;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  margin-top:7px;
}

#top-menu .button a:link {
	color:white;!important
	  background-color: #336699;
}

#top-menu .button a:visited {
	color:white;
	  background-color: #336699;!important
}

#top-menu .button a:hover {
	color:white;
	  background-color: #336699;!important
}

#top-menu .button a:active {
	color:rgba(255,255,255,1);
	  background-color: #336699;!important
}

/* end code for top-menu styling */

#page-header {
	position:relative;
	top:0;
	opacity:1.0;
    border-bottom:solid #880000 2px;
	z-index:9999;
}

#header {
    width: 100%;
	background-color:#FFFFFF;
	text-align:center;
}

#masthead {
	width:80%;
	opacity:1.0;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

#header-main {
	width: 100%;
	height: 100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0;
	position: relative;
	background-color:#FFFFFF;
	clear:both;
}

#print-logo {
	display:none !important;
}


#menu-item {
	display:none;
}

#header-tagline {
	font-family:Verdana, Geneva, sans-serif;
	font-size:1em;
	font-weight:bold;
	text-align:center;
	position: relative;
	background-color:#FFFFFF;
	margin-top:-10px;
	padding-bottom:10px;
}



/**************

mega menu

**************/
   
 #menu {
	list-style:none;
	text-align:center;
	color:000;
	width:100%;
	height:43px;
	padding:0px 20px 0px 20px;
	margin-right:auto;
	margin-left:auto;
  	display:inline-block;!important
	background-color: #FFFFFF;
	position:relative;
	z-index:9999;!important!
}
  
 #menu li {
	display:inline-block;
	text-align:center;
	position:relative;
	padding-top: 4px;
	padding-right:3%;
	padding-bottom: 4px;
	padding-left:3%;
	margin-right:auto;
	margin-left:auto;
	margin-top:7px;
	border:none;
}
#menu li:hover {
	border: 1px solid #777777;
	
	
	/* Background color and gradients */
	
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));
	
	/* Rounded corners */
	
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; 
	color: #000;
	display:block;
	outline:0;
	text-decoration:none;
	font-weight:bold;
}

#menu li:hover a {
	color:#880000;
}

#menu li a:active
{
    background-color:#FFFFFF;
}

#menu li .drop {
	padding-right:21px;
	display: inline;
}
#menu li:hover .drop {
	display: inline;
}
 
 #menu-indent
{text-indent:20%;
}
 
/*dropdown for mega menu*/

.dropdown_1column,   
.dropdown_2columns,   
.dropdown_3columns,   
.dropdown_4columns,  
.dropdown_5columns {  
    margin:4px auto;  
    float:left;  
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:10px 5px 10px 8px;  
    border:1px solid #777777;  
    border-top:none;  
      
    /* Gradient background */  
    background:#F4F4F4;  
    background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#FFFFFF));  
  
    /* Rounded Corners */  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px;  
}  
  
.dropdown_1column {width: 140px;}  
.dropdown_2columns {width: 280px;}  
.dropdown_3columns {width: 420px;}  
.dropdown_4columns {width: 560px;}  
.dropdown_5columns {width: 700px;}  
  
#menu li:hover .dropdown_1column,   
#menu li:hover .dropdown_2columns,   
#menu li:hover .dropdown_3columns,  
#menu li:hover .dropdown_4columns,  
#menu li:hover .dropdown_5columns {  
    left:0px;  
    top:auto;  
}  

/* Columns */  
  
.col_1,  
.col_2,  
.col_3,  
.col_4,  
.col_5 {  
    display:inline;  
    float: left;  
    position: relative;  
    margin-left: 15px;  
    margin-right: 5px;  
}  
.col_1 {width:120px;}  
.col_2 {width:260px;}  
.col_3 {width:400px;}  
.col_4 {width:540px;}  
.col_5 {width:680px;}  

#menu .menu_right {
	float:right;
	margin-right:0px;
}

#menu li .align_right {
	/* Rounded Corners */
	-moz-border-radius: 5px 0px 5px 5px;
	-webkit-border-radius: 5px 0px 5px 5px;
	border-radius: 5px 0px 5px 5px;
}

#menu li:hover .align_right {
	left:auto;
	right:-1px;
	top:auto;
}


/* drop-down styling */

#menu p, #menu h2, #menu h3, #menu ul li {
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	font-size:12px;
	text-align:left;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
	font-size:21px;
	font-weight:400;
	letter-spacing:-1px;
	margin:7px 0 14px 0;
	padding-bottom:16px;
	border-bottom:1px solid #666666;
}
#menu h3 {
	font-size:14px;
	margin:7px 0 2px 0;
	padding-bottom:7px;
	
}
#menu p {
	line-height:18px;
	margin:0 0 10px 0;
}
.strong {
	font-weight:bold;
}
.italic {
	font-style:italic;
}

#menu li:hover div a {
	font-size:12px;
	color:#014A6B;
}
#menu li:hover div a:hover {
	color:#880000;
}

#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li {
	font-size:12px;
	line-height:24px;
	position:relative;
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:130px;
}
#menu li ul li:hover {
	background:none;
	border:none;
	padding:0;
	margin:0;
}

.imgshadow {
	background:#FFFFFF;
	padding:4px;
	border:1px solid #777777;
	margin-top:5px;
	-moz-box-shadow:0px 0px 5px #666666;
	-webkit-box-shadow:0px 0px 5px #666666;
	box-shadow:0px 0px 5px #666666;
}

.img_left {
	width:auto;
	float:left;
	margin:5px 15px 5px 15px;
}

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/
/* pause code
.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}


/* sublevel menu - in construction 
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/*


.rmm .rmm-main-list li {
	display:inline;
	padding:padding:0px;
	margin:0px !important;
}
.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}



/* SAPPHIRE STYLE 

.rmm.sapphire .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #3e587b;
	background-color:#336699;
	border-left:1px solid #3e587b;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-repeat:repeat-x;
}
.rmm.sapphire .rmm-main-list li a:hover {
	background:#3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
	width:95%;
	background-color:#336699;
	min-height:36px;
	border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	background-image:url('../images/sapphire-menu-bg.png');
	background-repeat:repeat-x;
	border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
	width:20px;
	padding:0px 7px 0px 7px;
	border:1px solid #3e587b;
	border-radius:3px;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-position:top;
}

.rmm.sapphire .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:white;
	width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:#336699;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #6883a6;
	text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
	background-color:#3c5779;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a { 
	border-top:1px solid #3c5779 !important;
}


/* MINIMAL STYLE 

.rmm.minimal a {
	color:#333333;
}
.rmm.minimal a:hover {
	opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
}
.rmm.minimal .rmm-toggled {
	width:95%;
	min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
	display:block;
	height:36px;
	color:#333333;
	text-align:left;
	position:relative;
}
.rmm.minimal .rmm-toggled-title {
	position:relative;
	top:9px;
	left:9px;
	font-size:16px;
	color:#33333;
}
.rmm.minimal .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
}

.rmm.minimal .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:#333333;
	width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
	display:block;
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #dedede;
	color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
	border-top:1px solid #dedede;
}

/* end responsive mobile style */

/* end page-header style */







/* MAIN CONTENT */


#main a:hover,a:active
{
    color:#880000;
	background-color: #FFFFFF; 
}

#main {
	width:65%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.2em;
	line-height:1.4em;
	margin-left:auto;
	margin-right:auto;
	margin-top:-5px;
	min-height: 100%;
	height: 100% !important;
	clear:both;
	position: relative;
	background-color:#FFFFFF;
	z-index:1;
}

#content {
	width: 100%;
    height:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
	position:relative;
}

#content-home {
	width:90%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
	position:relative;
}


#related-resources {
	margin-left:auto;
	margin-right:auto;
	padding-left:0px;
	margin-top:0px;
	padding-top:30px;
	padding-bottom:30px;
	width: 80%;
	flex-grow:1;
	overflow: hidden;
	position:relative;
}


h5 {
	font-weight:bold;
	font-size:120%;
	text-decoration:underline;
	padding-top:20px;
	padding-bottom:20px;
}

h6 {
	text-align:center;
}

h7 {
	font-weight:bold;
	color:#b12229;
	font-size:83%;
	text-decoration:underline;
}



#quotation {
	width: 30%;
	margin-left:auto;
	margin-right:auto;
}

.quotation-name {
	padding-left:150px;
	font-style:italic;
}

.indent {
	padding-left:10%;
}

#chart-image {
	max-width:300px;
	display:block;
	float:left;
	background-color:#FFF;
}

#page-title {
	width:80%;
	padding-left: 13%;
	font-size: 1.2em;
	height:600px;
}

#related-articles {
	padding: 1% 15% 0% 20%;
	width: 100%;
	height:100% !important;
	background-color:#FFFFFF;
	border: 1px solid #000000;
	margin-left:-6%;
	margin-right:-30%;
	-webkit-border-radius: 0px 10px 0px 0px;
	-moz-border-radius: 0px 10px 0px 0px;
	border-radius: 0px 10px 0px 0px; 
}

#manifesto {
	width:662px;
	text-align:center;
}


/*begin style for book recommendation tile */

.book-recommendation {
  border: 1px solid #ddd;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  background-color: #fff;
  display: flex; /* Use flexbox for layout */
  align-items: center;
  flex-direction:row;
  /* Optional: for larger screens, change direction back to row */
}

.book-cover {
  margin-right: 15px;
}

.book-cover img {
  width: 250px;  
  height: auto;
}

.book-info {
  height:100%;
}

.book-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 5px;
}

.book-author {
  font-style: italic;
  color: #555;
  margin-bottom: 10px;
}

.book-description {
  font-size: 0.9em;
  line-height: 1.4;
}

/* end style for book recommendation tile*/





/* TEXT CLASSES */
.author {
    font-style: italic;
	margin-bottom: 15px;
}

.title {
	font-weight:bold;
}
.intro {
    margin : 15px 15px 0 15px;
	font-style: italic;
	border: solid 1px #000000;
	padding:1em;
	background-color:#C4ECFF;;
}

.quote {
    width:80%;
	margin: 15px auto 15px auto;
	padding-left:15px;
	font-size:130%;
	border-left: solid 3px #000;
}

.quote2 {
	margin-left:150px;
	font-size:83%;
}

#sidebar-narrow {
    margin-left:6%;
	border: solid 1px #000000;
	padding:1em;
	width:60%;
	background-color:#C4ECFF;
}

#sidebar-wide {
    margin-left:6%;
	border: solid 1px #000000;
	padding:1em;
	width:80%;
	background-color:#C4ECFF;
}

#sidebar-wide-white {
    margin-left:6%;
	border: solid 1px #000000;
	padding:1em;
	width:80%;
	background-color:#FFFFFF;
}

#quote {
	width:75%;
	font-size:110%;
	margin-left:auto;
	margin-right:auto;
	background-color:#C4ECFF;
	padding:5%;
}

#highlight {
	width:100%;
	font-size:110%;
	margin-left:auto;
	margin-right:auto;
	background-color:#C4ECFF;
	padding:1%;
}
	
	#quote-yellow {
	width:75%;
	font-size:110%;
	margin-left:auto;
	margin-right:auto;
	border:solid 1px;
	background-color:#FFFFCC;
	padding:5%;
}

#poem {
	margin-left: 10%;
}

#column-tile-wrapper {
	width:100%;
	display:flex;
	flex-direction:row;
}

#column-tile {
	width:49%
}

#left-justify-title {
	text-align:left;
}
	
.copyright {
	float: left;
	font-size: 100%;
	padding:15px;
}

h1 {
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	line-height:1.1em;
}

h2 {
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:12px;
}

h4 {
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
}

.breadcrumbs {
	font-size:83%;
	padding-top:20px;
}

/* IMAGE CLASSES */

.img-print {
	float: right;
	padding-right: 30px;
}

a img {
    border: 0;
	text-decoration: none;
}

img.center {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

img.floatLeft {
	float: left;
	margin: 4px 10px 4px 4px;
	list-style-position: inside;
}


/* FORM STYLE */


#form {
	margin-left:auto;
	margin-right:auto;width:100%;
	margin-bottom:200px;
}

/*LIST STYLE */

ul.NoBullet {
	list-style-type: none;
}

ul.cartoon {
	list-style-position:inside;
}
	
.cite {
	font-size:83%;
	padding-left:10%;
	padding-right:10%
	text-align:left;
}

.author-bio {
	font-style:italic;
	padding-left: 10%;
}

.subheading {
	font-size:100%;
	font-weight:bold;
	text-align:center;
}

.sub-title {
	font-size:100%;
	font-style:italic;
	text-align:center;
}

#citation-wrapper {
	width:70%;
	font-size:83%;
	margin-left:10%;
	margin-right:15%;
	margin-bottom:30px;
	line-height:1.2em;
}

.citation-name {
	padding-left:30%;
	font-style:italic;
}

#quotation-wrapper {
	width:65%;
	font-size:83%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30px;
	line-height:1.2em;
}

.quotation {
	width:100%;
}

.quotation-name {
	padding-left:40%;
	font-style:italic;
}

#quotation-normal-wrapper {
	width:65%;
	font-size:100%;
	padding-right:30%;
	margin-bottom:30px;
	line-height:1.2em;
}

.quotation-normal {
	font-size:100%;
	padding-left:10%;
	padding-right:10%
	text-align:left;
}

.quotation-normal-name {
	padding-left:35%;
	font-style:italic;
}

.footnote {
	font-family:Arial, Helvetica, sans-serif;
	font-size:83%;
	padding-left:10%;
}

#footnote {
	font-size:83%;
	padding-left:3%;
}

#content-contact {
	padding: 1% 2% 0% 4%;
	width: 70%;
	float:left;
	background-color:#FFFFFF;
}


/* Tip: use width: 100% for full-width buttons */

.center {
  margin: auto;
  width: 50%;
}

#page-footer { 
	font-family: Verdana, Geneva, sans-serif;
	bottom:0;
	background-color: #336699;
	color: #FFFFFF;
	font-size:100%;
	width: 100%;
	height: 250px;
	margin-top:50px;
	padding-bottom:1%;
	clear: both;
	z-index:1;
	overflow:hidden;
}

#footer-top {
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	width:100%;
	margin-bottom:40px;
}

#footer-top .item-1 {
	padding-top:20px;
	font-size:130%;
	width:100%;
}

#footer-middle {
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	justify-content:space-around;
	width:100%;
	text-align:left;
	font-size:83%;
	line-height:1.5;
}

#footer-middle .item-1 {
	flex-shrink:0;
	margin-top:-20px;
	font-size:120%;
	padding-left:5%;
}

#footer-middle .item 2 {
	flex-grow:1;
}

#footer a:link {color:white;}  /* unvisited link */
#footer a:visited {color:#FFFFFF !important;}  /* visited link */
#footer a:hover {color:#FFC;}  /* mouse over link */
#footer a:active {color:white;}  /* selected link */ 

/*
.search-icon {
	padding-top:20px;
}
*/

/* To FIX!!!  Code for expandable search bar:

#expandable-search {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.search-bar {
  --size: 24px;
  --padding: 7px;
  margin-top:10px;
   --expanded-width: 300px;
  display: flex;
  justify-content:flex-end;
  background-color: #fff;
  border-radius: 100px;
  outline: 1px solid #FFFFFF;
  overflow:hidden;
  padding: var(--padding);
  
  width: var(--size);
  height: var(--size);
  max-width: 100%;
  transition: width 0.5s, outline 0.5s;
  z-index:1;
}

.search-bar.expanded .search-input {
  opacity: 1;
}

.search-bar:focus-within {
  width: var(--expanded-width);
  outline: 1px solid #2e2e2e;
}



.search-bar.expanded {
  width: var(--expanded-width);
   position: absolute; 
  top: 0; 
  right: 0; 
  left: auto; 
  z-index: 99; 
  outline: 1px solid #2e2e2e;
}

.search-input {
 
  font-size: 20px;
  color: #000;
  background-color: transparent;
  overflow: visible;
  outline: none;
  margin-inline: 1rem;
  flex: auto;
  opacity: 0;
  transition: opacity 0.5s;
}

.search-bar.expanded .search-input {
  opacity: 1;
}

.search-submit {
  background-image:url(../images/search-icon-336699-28px.png);
  background-repeat:no-repeat;
  padding-right:25px;
  padding-left:2px;
  padding-bottom:30px;
  margin-left:6px;
  margin-top:-8px;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #fff;
  background-color: #ffffff;
  border-radius: 50%;
  border: none;
  width: calc(var(--size) - var(--padding) - var(--padding));
  aspect-ratio: 1;
  cursor: pointer;
  z-index:2;
}

end oof expandable search bar code -->
*/

/* Styling for Index.html*/

#main-image {
	text-align:center;
	display:block;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:-20px;
	margin-top:5px;
}

#features {
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	text-align:center;
	flex-wrap:wrap;
	justify-content:space-evenly;
	width:100%;
	margin-top:60px;
	margin-left:auto;
	margin-right:auto;
}

#features .item-1 {
	align-content:center;
	padding:0;
	flex-grow:1;
	margin-bottom:-80px;
	width:100%;
}	

#features .item-2 .item-3 .item-4 {
	flex-basis:300px;
	flex-shrink:0;
	flex-wrap:wrap;
}

#features .image {
	width:245px;
	height:245px;
}

#standbys {
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	text-align:left;
	flex-wrap:wrap;
	justify-content:space-evenly;
	width:100%;
	margin:30px 0 30px 0; 
	padding-top:25px;
	padding-bottom:15px;
	border-top:solid 2px #000;
	border-bottom:solid 2px #000;
}

#standbys .item-1 {
	text-align:center;
	padding:0;
	flex-grow:1;
	margin-bottom:10px;
	width:100%;
}

#standbys .item-2 .item-3 .item-4 {
	display:inline-block;
	flex-basis:300px;
}

#promotions {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
	justify-content:space-evenly;
	width:100%;
	margin:30px 0 30px 0; 
	padding-top:5px;
	padding-bottom:15px;
	flex-wrap:wrap;
}

#promotions .item 1 {
	display:inline-block;
	width:80%;	
	flex-wrap:wrap;
}

#promotions .image {
	float:left;
	max-width:200px;
	padding-left:2%;
	padding-right:2%;
}

#promotions .info {
	align-items;center;
}

#promotions .item-2 {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	margin-top:15px;
	border:solid 1px #000;
	padding:10px;
	float:none;
}

#article-header {
	display:flex;
	flex-direction:row;
	flex-flow:row-wrap;
	align-items:flex-start;
	text-align:left;
	width:100%;
	margin:25px 0 2px 0; 
	padding-top:25px;
	padding-bottom:25px;
}

#article-header .item-1 {
	padding-left:5%;
}

#article-header .image1 {
	max-width:250px;
	padding-left:2%;
}

#article-header .item-2 {
	flex-shrink:1;
	margin-top:5%;
}

.item-2 .title {
	font-size:1.6em;
	padding-left:30px;
}

.item-2 .subtitle {
	font-size:1.1em;
	margin-bottom:20px;
	padding-left:30px;
}

.item-2 .author {
	font-size:1.1em;
	font-style:italic;
	padding-left:30px;
}

#mobile-navbar {
	display:none;!important
}
  


@media only screen and (max-width: 1800px) { /* Adjust breakpoint as needed */

#mega-menu {
	display:block;!important
}

.book-cover {
  flex: 1; /* Occupy available space */
}

  h1 {
	  font-size: 2.3rem; /* Larger size for wider screens */
  }
  
  h2 {
    font-size: 1.5rem;
  }

.book-info{
  flex: 3; /* Occupy available space */
}

}

@media only screen and (max-width: 1300px) { /* Adjust breakpoint as needed */

.book-description {
  font-size: 1em;
  line-height: 1.2;
}

#main {
	width:70%;
}

.book-title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 4px;
}

.book-cover img {
  width: 200px;  
  height: auto;
}

#footer-top .item-1 {
	font-size:110%;
}

}

/*
@media only screen and (min-width: 1024px) { /* Adjust breakpoint as needed 

  h1 {
	  font-size: 2rem; /* Larger size for wider screens 
  }

  h2 {
    font-size: 1.3rem;
  }
  
#main-image {
	display:block;
}
  
#features-wrapper {
	flex-directon:row;
}

#footer-middle .item-3 {
	display:block;
}

}
*/


 @media only screen and (max-width: 1024px) { /* Adjust breakpoint as needed */
 
.book-recommendation {
    flex-direction: column;!important 
  }

  .book-cover{
    order: -1; /* Image comes first */
}

  .book-title {
	  font-size:1em;;
  }

.main {
	width:75%;
}

#main-image {
	display:none;
}

#features-wrapper {
	flex-directon:column;
}

.body {
	font-size:.9em;
}

  h1  {
	  font-size: 1.8rem; /* Larger size for wider screens */
 }
  
  h2 {
    font-size: 1.2rem;
  }
 #footer-middle .item-3 {
	display:none;
}
  
#top-menu {
	padding-left:40%;
}
  
#mobile-navbar.rmm.sapphire {
	display:none;
}
  
#footer-top .item-1 {
	font-size:100%;
}
  }

@media only screen and (max-width: 915px) { /* Adjust breakpoint as needed */

#main {
	width:80%;
}
}

@media only screen and (max-width: 800px) { /* Adjust breakpoint as needed */
  
 #mobile-navbar.rmm.sapphire {
	display:block;!important
}

#main {
	width:100%;!important
}

#content {
	width:90%
}

#menu {
	display:none;
}

#top-menu {
	display:none;
}

#page-header {
	border-bottom:rgba(255,255,255,1);
	z-index:9999;
}

#header-tagline {
	font-size: .8em;
}

#print-logo {
	display:none;
}

#promotions .item-2 {
	margin-top:30px;
	width:90%;
	padding:10px;
}

.body {
	font-size:.8em;
}

  h1  {
	  font-size: 1.4rem; /* Larger size for wider screens */
  }
  
  h2 {
    font-size: 1.1rem;
  }
  
.clearfooter {
	display:none;
}

#footer-top .item-1 {
	font-size:100%;
}

.author {
    font-size: .9em;
}

@media only screen and (max-width: 650px) { /* Adjust breakpoint as needed */

#article-header {
	display:flex;
	flex-direction:column;
	flex-flow:row-wrap;
	align-items:flex-start;
	text-align:left;
	width:100%;
	margin:10px 0 2px 0; 
	padding-top:5px;
	padding-bottom:25px;
}

#article-header .item-2 {
	order:-1;
}

}

@media only screen and (max-width: 500px) { /* Adjust breakpoint as needed */
  
.book-title {
	  font-size:0.8em;;
  }
  
}