body { margin: 0; z-index: -1000; background-color: #F6FDFE; }
#main-header { width: 100%; background-color: #366667; overflow: hidden; }
#main-title { position: relative; float: left; color: #F6FDFE; margin: 2.5em 0 0 3em; font-family: Baskerville Bold,Hoefler Text,Times New Roman,serif; }
#logo { height: 12em; float: left; }
#logo img { height: 90%; width: auto; margin: 10px 10px 10px 10px; }
#main-1 { font-size: 3em; }
#main-2 { font-size: 1.4em; margin: 0.2em 0 0 0; font-family: Arial; }
#menu-button { position: relative; float: right; font-size: 3em; display: none; margin-right: 0.6em; width: 1em; margin-top: 0.25em; }
#menu-button a { text-decoration: none; color: white; }
#menu-button a img { width: 100%; height: auto; }
#header-right { float: right; min-width: 6em; }
#hr-buttons { width: 100%; }
#donate-box { display: block; min-width: 4em; margin: 1.5em 4em auto auto; border: solid white 2px; text-decoration: none; background-color: #F6FDFE; padding: 1em 1em; border-radius: 0.6em; text-align: center; }
.donate-text { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.8em; color: #366667; }
#size-buttons { width: 4em; float: left; margin-top: 1em; }
.textsize, .lang-button { text-decoration: none; color: white; }
.button-small { font-size: 1em; margin-right: 0.4em; }
.button-medium { font-size: 1.3em; margin-right: 0.2em; }
.button-large { font-size: 1.6em; }
#langs { float: left; width: 66%; }
.lang-button { font-family: Arial, Helvetica, sans-serif; line-height: 1.6em; font-weight: bold; float: left; margin: 1em 0.6em 0 0; width: 45%; }

.giving-tuesday { display: none; text-align: center; color: #366667; }
.donate-giving { font-size: 1.3em !important; }
.giving-link { font-family: Arial, Helvetica, sand-serif; font-size: 1em; color: #366667; text-decoration-color: #366667; text-decoration-thickness: 0.1em; text-underline-offset: 0.1em; font-weight: bold; }

#main-menu { width: 100%; display: block; z-index: 3; }
#menu-container { position: relative; }
.menu-item { background-color: #D1E5E7; font-family: Arial, Helvetica, sans-serif; font-weight: bold; width: 20%; font-size: 1.6em; float: left; padding: 1em 0; text-align: center; }
.menu-item a { color: #366667; text-decoration: none; }

#main-content { z-index: 1; font-family: Arial, Helvetica, sans-serif; position: relative; width: 100%; margin: 8em auto 0 auto; }

.home-row { min-height: 12em; padding: 3em; display: flex; clear: both; }
.dark { background-color: #366667; }
.grey { background-color: #ECF6F7; }
.thin { padding: 2em !important; }
.home-row-left { width: 60%; flex-grow: 1; float: left; }
.home-row-right { width: 30%; float: left; flex-grow: 1; }
.home-banner { border-radius: 1em; border: #366667 solid 2px; background-color: #ECF6F7; width: 40%; float: left;margin: 0 auto; padding: 2em 2em 2em 2em; }
.home-image { width: 12em; height: 12em; overflow: hidden; float: left; margin-right: 2em; }
.home-image img { width: 100%; height: auto; }
.home-section { width: 70%; margin: 0 auto; padding: 4em 0; }
.home-button { width: 7em; height: 1em; border-radius: 1em; border: 2px solid #366667; padding: 1.5em; background-color: #F6FDFE; margin-top: 2em; margin-left: 2em; }
.home-button a { text-decoration: none; color: #366667; font-size: 1.2em; font-weight: bold; }
.homerow-image { height: 9em; width: 16em; overflow: hidden; border: 2px solid white; margin-bottom: 1em; float: right; }
.eye { background-image: url("/img/eye.png"); background-repeat: no-repeat; background-size: 48em; background-position: left; }
.light-text { color: white !important; }
.hls { width: 80%; padding: 3em 0; }
#highlights-section { width: 100%; }
.highlight { width: 30%; padding: 1em; float: left; margin-top: 2em; }
.highlight-top { width: 20%; padding: 1em; float: left; margin-top: 2em; }
.highlight-image { /* height: 14em; */ aspect-ratio: 1108 / 904; width: 100%; overflow: hidden; border-radius: 1em; border: 2px solid #7DABB0; margin-bottom: 1em; }
.highlight-icon { height: 10em; width: 10em; overflow: hidden; margin-bottom: 1em; }
.highlight-image img { /* min-height: 16em; width: auto; margin-top: -0.2em; margin-left: -2.4em; */ width: 100%; aspect-ratio: 1108 / 904; }
.highlight-icon img { height: auto; width: 100%; }
.homerow-image img { height: auto; width: 100%; }
.home-header { color: #366667; font-size: 1.6em; font-weight: bold; margin-bottom: 0.5em; font-family: Baskerville Bold,Hoefler Text,Times New Roman,serif; }
.hl-header { color: white; font-size: 1.6em; font-weight: bold; margin-bottom: 1em; font-family: Baskerville Bold,Hoefler Text,Times New Roman,serif; }
.section-header { color: #366667; font-size: 1.6em; font-weight: bold; margin-bottom: 1em; font-family: Baskerville Bold,Hoefler Text,Times New Roman,serif; }
.hl-banner { border-radius: 1em; border: #366667 solid 2px; background-color: #ECF6F7; width: 80%; margin: 0 auto 1em auto; padding: 3em; }
.patronname { margin-top: 1em; font-style: italic; }

#home-banner img { width: 100%; height: auto; }
.banner-box { margin-bottom: 2em; }
#news-box { position: relative; padding: 1em; background-color: #EBF1F1; border: 2px solid #366667; }
#news-header { font-weight: bold; font-size: 1.6em; margin-bottom: 0.6em; }
#news-item { font-size: 1.4em; }
#sign-up { font-size: 1.2em; margin: 0.6em 0.5em 0 0; float: left; display: block; }
#home-content { }
#home-top { width: 100%; margin: top }
#image-col { width: 70%; height: auto; margin: 0 auto; float: left; }
.image-right { margin: 0 0 0 2em; }
.image-left { margin: 0 2em 0 0; }
.image-wide { width: 100% !important; margin: 1em 0; }
#text-box { width: 100%; margin: 0 auto; }
#home-container { width: 65%; float: left; }
.image {width: 100%; height: auto; margin: 0 0 2em 0; border: solid 4px #aecaff85; }
.home-text { margin: 1em 0; line-height: 1.4em; }
.text-float { float: left; width: 65%; }

.testimonial { width: 90%; margin: 2em auto; background-color: #F5FEFF; text-align: center; padding: 1em 1em; line-height: 1.4em; font-size: 1.4em; clear: both; border: solid #366667 2px; }
.testimonial .quote { margin: 0 0.7em; }
.testimonial-text { font-style: italic; }
.testimonial-name { font-style: normal; margin-top: 0.7em; }

#home-links { width: 70%; margin: 4em auto; }
#home-links .link-text { width: 30%; float: left; }
#home-links .link-text:nth-child(2) {text-align: center; }
#home-links .link-text:nth-child(3) { text-align: right; }

#container { width: 80%; margin: 0 auto; }
#catalog-container { width: 80%; margin: 3em auto; padding-left: 6em; }
#library-top, #library-bottom { width: 100%; padding-top: 1em; }
#library-topleft { width: 100%; margin: 0 auto; }
#library-image { float: left; margin-right: 2em; width: 35%; display: block; }
#library-image img { width: 100%; height: auto; display: block; }
#library-links { margin: 3em; text-align: center; }
.program-item { width: 30%; margin: 0 1em; float: left;}

.header-text { font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif; font-weight: bold; font-size: 4em; color: #366667; margin: 0 0 1em 0; }
.header-text-home-small { font-family: Arial, Helvetica, sand-serif; font-size: 22px; font-weight: 700; color: #366667; line-height: 30px; margin: 0 0 1em 0; }
.subhed-text { font-family: Arial, Helvetica, sand-serif; font-size: 2.4em; color: #366667; margin: 0 0 1em 0; }
.link-text { font-family: Arial, Helvetica, sand-serif; font-size: 1.6em; color: #366667; text-decoration-color: #C4D9DA; text-decoration-thickness: 0.065em; text-underline-offset: 0.1em; margin: 1em 1em 0 0; font-weight: bold; }
.link-center { text-align: center; }
.link-left { text-align: left; margin: 0 0 1em 1em; } 
.link-float { float: left; }
.link-nofloat { margin: 1em 1em 1em 1em; }
.link-float a, .link-nofloat a { color: #366667; }
.body-text { font-size: 1em; color: #366667; font-family: Arial, sans-serif; line-height: 1.4em; }
#links-recessed { margin: 0 2em; }
#links-recessed .link-text { font-size: 1.2em; }
#order-recessed { margin: 0 2em; }
#clear { clear: both; }
.clear-border { width: 75%; margin: 6em auto 2em auto; border-bottom: solid black 1px; }

#about-container { width: 60%; float: left; }
#contact-container, #quotes-container, #reports-container { width: 80%; margin: 0 auto; }
#contact-list { margin: 2em 0; }
#contact-links { }
#about-header: { margin-left: 0; }
#contact-text { clear: both; padding: 2em 0 1em 0; }
#contact-table { display: table; width: 80%; font-size: 1.4em; margin-left: 6em; line-height: 1.6em; }
#contactlist { text-align: center; }
.contactrow { display: inline-block; padding: 1em; margin: 0 auto; }
.contactcell { width: 16em; float: left; }
.contact-image { height: 100%; width: 100%; }
.contact-name { font-weight: bold; margin-bottom: 0.4em; }
.contact-email { margin-bottom: 0.4em; }
.contact-position { font-style: italic; margin-bottom: 0.2em; }
.contact-cell { display: table-cell; }
#contact-mobile { display: none; }
#general-info { width: 60%; margin: 2em auto; text-align: center; color: #366667; }
.spanner { margin-right: 2em; }
#general-name { font-size: 1.6em; font-weight: bold; }
.general-address { font-size: 1.2em; margin-top: 0.6em; }

#catalog-topleft { width: 60%; float: left; overflow: hidden; margin: 1em 3em 1em 0; }
#catalog-topright { width: 30%; float: left; overflow: hidden; margin: 1em 3em 1em 0; }
#catalog-links { margin: 0 2em; }
.catalog-text { color: #366667 !important; font-weight: normal !important; font-size: 1.6em; }
#vert-spacer { height: 100%; width: 6em; border-left: solid black 1px; }
.catalog-item { margin: 3em 0; }

#periodicals-container { width: 70%; margin: 0 auto; }
#periodicalform { margin: 2em auto; width: 70%; }
.periodical-item { display: block; margin-bottom: 1em; }
.patron { margin: 1em 0 0 1.5em; }
.info-field { width: 8em; display: inline-block; }

#orderform { width: 90%; margin: 0 auto; }
.order-column { width: 45%; float: left; margin-left: 3em; }
.order-item { margin-top: 4em; }
.order-list { margin-bottom: 1em; }
input[type="checkbox"] { height: 1.2em; width: 1.2em; }
#submitbutton { float: left; width: 12em; height: 6em; margin: 3em 4em; background-color: #366667; color: white; border: none; }
#submitbutton:disabled, #submitbutton[disabled] { background-color: grey; }

#volunteer-text { margin: 0 0 2.2em 1em; }

.download-section { margin: 1em 2em; padding: 2em 0; }
.download-header { font-size: 2em; }
.download-link { font-size: 1.6em !important; }

#history-container, #leadership-container, #links-container { width: 80%; margin: 0 auto; }
#history-table { width: 80%; margin: 0 auto; }
#history-table-image { }
.history-image { width: 15%; height: auto; margin: 1em 2em 0 0; float: left;}
.image-right { float: right !important; }
.history-item { display: table-row; line-height: 2em; }
.history-date, .history-text { display: table-cell; padding: 0 2em 0.5em 0; }

.leadership-column, .links-column { width: 45%; float: left; margin-right: 2em; }
.leadership-item { margin-bottom: 2em; }
.leadership-names { margin: 0 0 0.5em 3em; }
.leadership-title { font-style: italic; margin: 0 0 0.5em 1.5em; }

.links-link { margin-bottom: 1em; display: block; font-weight: normal !important; }
.footer-link { font-weight: normal !important; font-size: 1em !important; }

#mongo-form { width: 60%; margin: 0 auto; background-color: white; border: 2px solid #366667; border-radius: 1em; }
#bbox-root p { padding: 0 1em;font-size:1.1em; font-size: 1.4em; }
#donate-address { margin: 2em 1em; }
#donate-paypal { width: 10em; margin: 0 auto; }
.BBFormRadioDescription { font-size: 1em !important; }

#registration-form { width: 70%; margin: 2em auto; display: table; }
#registration-form label, .registration-head { font-size: 1.4em; }
.instruction { margin-left: 6em; }
#registration-button input, #regsubmit, #submitbutton { font-size: 1.2em; padding: 0.5em; margin-right: 1em; }
.registration-head { padding-top: 2em; }
.register-row { display: table-row; line-height: 2em; }
.register-cell { display: table-cell; width: 35%; }
.required { color: red; margin-right: 0.5em; }
.required1 { display: none; }
#registration-button { margin-top: 2em; }
#regsubmit, #submitbutton { background-color: #366667; color: white; }

.right-text { float: right; width: 60%; }
.left-text { float: left; width: 60%; margin-right: 2em; }
.vols-img { float: left; width: 35%; height: auto; border: solid 4px #aecaff85; }
.img-mobile { display: none; }

#audio-container { display: block; width: 25%; border: 2px solid #366667; padding: 1em; margin: 2em 0 2em 2em; }
.audio-stream { display: block; margin-bottom: 1em; }
.legend { font-weight: bold; margin-bottom: 0.5em; margin-top: 0.5em; }

#footer-container { padding: 3em; clear: both; background-color: #366667; color: white; font-family: Arial; display: inline-block; }
.footer-component { width: 20%; float: left; text-align: center; margin: 0 8em 1em 0; }
.footer-link { color: white; }
.footer-logo { width: 100%; text-align: left; margin-bottom: 0.6em; }
.footer-logo img { width: 100%; height: auto; }
.footer-header { font-family: Garamond,Baskerville,Baskerville Old Face,Hoefler Text,Times New Roman,serif; font-weight: bold; font-size: 2em; color: white; text-align: left; margin-bottom: 0.6em; }
.footer-final { margin-right: 0 !important; }

#home-highlight { display: flex; flex-direction: column; margin-top: 200px; padding: 0px 40px 0px 40px; }
.home-page-highlight { margin: 0 auto; text-align: center; }
.home-page-highlight p { font-size: 22px; color: #366666; line-height: 30px; max-width: 990px; margin-top: 50px; }
.home-page-highlight a { font-size: 22px; color: #366666; line-height: 30px; text-decoration: underline; font-weight: 600; }

.home-page-highlight-video {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.home-page-highlight-video-frame {
  max-width: 700px;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.home-page-highlight-video::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.home-page-highlight-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
#home-highlight { display: flex; flex-direction: column; margin-top: 50px; padding: 0px 20px 0px 20px; }
.home-page-highlight { margin: 0 auto; text-align: center; }
.home-page-highlight p { font-size: 22px; color: #366666; line-height: 30px; max-width: 100%; margin-top: 50px; }
.home-page-highlight a { font-size: 22px; color: #366666; line-height: 30px; text-decoration: underline; font-weight: 600; }
}

@media screen and (max-width: 1124px) {
	#donate-box { width: 12em; }
	.donate-text { font-size: 1.4em; }
}

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

	#logo { height: 3em; }
	#logo img { height: 150%; width: auto; margin: 10px 10px 10px 10px; }
	#main-header { padding: 1em 1em 1em 1em; height: 100px; }
	#main-title { margin: -0.4em auto 0 1em; }
	#main-1 { font-size: 1.4em; margin: 0; }
	#main-2 { font-size: 0.6em; width: 12em; }
	#menu-button { display: block; margin-top: 0; }
	#main-menu { display: none; top: 6.5em; }
	.menu-item { font-size: 2em; float: none; width: 100%; }
	#donate-box { /*position: fixed; top: 6em; left: 0; height: 3em; width: 100%; margin: 0 0 0 0; text-align: center; padding-top: 0.5em; border: solid 2px #366667; border-radius: 0; padding: 1em 0; text-align: center;*/ display: none; }
	.donate-text { width: 100%; margin: auto; padding: 0; clear: both; }
	#size-buttons { display: none; }
	#langs { display: none; }
	
	.home-row { padding: 1em; display: block; }
	.home-row-left { width: 100%; margin-bottom: 2em; }
	.home-banner { width: 90%; padding: 1em; margin-bottom: 2em; }
	.header-text { font-size: 2em !important; margin-left: 0 !important; }
	.wwd-sub-header { font-family: Arial, Helvetica, sand-serif; font-size: 32px !important; color: #366667 !important; margin: 0 0 1em 0; }
	.home-section { width: 100%; padding: 1em 0; }
	.home-image { float: none; margin: 0 auto; }
	.home-header { margin-top: 1em; }
	.hl-header { margin: 2em 2em; }
	.hl-text { width: 100% !important; margin: 0 !important; }
	.hl-banner { width: 80%; padding: 2em; }
	.highlight { padding: 0; float: none; width: 100%; margin-bottom: 4em; }
	.highlight-top { padding-top: 2em; padding-bottom: 4em; float: none; width: 100%; margin-top: 0px; }
	.highlight-image { /* height: 14em; */ aspect-ratio: 1108 / 904; width: 100%; overflow: hidden; border-radius: 1em; border: 2px solid #7DABB0; margin-bottom: 1em;  max-width: 24em; margin: 0 auto;}
	.highlight-image img { /* min-height: 16em; width: auto; margin-top: -0.2em; margin-left: -2.4em; */ width: 100%; aspect-ratio: 1108 / 904; }
	#highlights-section {text-align: center;}
	.highlight-icon { display: none; }
	.eye { background-size: 24em; background-position: -4em; }
	.home-row-right { float: none; width: 100%; }
	.homerow-image { display: none; }
	.grey { display: flex !important; }
	
	#main-content { margin: 1em auto 0 auto;  width: 100%; }
	.testimonial { width: 90%; margin: 0 auto 2em auto; padding: 1.5em 0.4em; }
	.testimonial .quote { margin: 0; }
	.testimonial-text { width: 90%; padding: 0 1em; }
	.header-text { margin-left: 0.6em; }
	
	#about-container { width: 100%; float: none; }
	#home-container { width: 100% !important; margin: 0 auto; }
	#home-content { width: 100%; margin: 1em auto; }
	#news-box { width: 90%; margin: 0 auto 1 auto; }
	#sign-up { margin-bottom: 1em; }
	#image-col { width: 100%; margin: 0 auto; }
	.image { height: auto; width: 100%; border: none; }
	#text-box { width: 90%; margin: 0 auto; }
	#home-top { width: 100%; }
	.text-float { width: 100%; margin: 0 1em; }
	#home-links { width: 60%; margin: 2em auto; }
	#home-links .link-text { display: block; width: 100%; margin-bottom: 0.4em; text-align: left; }
	#home-links .link-text:nth-child(2), #home-links .link-text:nth-child(3) { text-align: left; }
	
	#back-button { display: none; }
	
	#container { width: 100%; }
	#library-top {  }
	#library-topleft { width: 100%; }
	#library-image, #library-image img { display: none; }
	#library-links { width: 80% !important; margin-left: 0; }
	#library-links a { margin-bottom: 0.25em; }
	.program-item { width: 100%; }
	#library-links .link-text { line-height: 1.5em; }
	.link-text { text-align: left; font-size: 1.6em; }
	.link-float { float: none; width: 100%; display: block; }
	.body-text { padding-bottom: 1em; margin: 0 1em; }
	.clear-border { margin-top: 2em; }
	#links-recessed { margin: 0 auto; }
	.order-list input[type="checkbox"] { float: left; margin-right: 1em; }

	#catalog-links { margin: 0 auto; }
	#vert-spacer { border: none; }
	
	#catalog-container { width: 100%; margin: 0 auto; padding: 0; }
	#catalog-topleft, #catalog-topright { width: 100%; float: none; margin: 0; }
	.catalog-text { width: 100%; display: block; }
	.history-image { display: none; }
	#links-recessed { width: 100%; display: table; }
    	.catalog-item { margin: 3em auto; }
	#contact-container .link-text { line-height: 1.4em; }
	#contact-container #library-links { margin: 2em 1em; }
	#contact-container #image-col { display: none; }
	#contact-container .testimonial { width: 90%; margin-left: 0.6em; }
	#about-header { width: 120%; }
	#contactlist { text-align: center; }
	.contactrow { display: block; width: 16em; }
	.contactcell { width: 16em; float: left; }
	.contact-image { height: 100%; width: 100%; }

	.donate-text, .donate-t2 { margin-left: 1em !important; font-weight: normal; }
	#donate-button { margin: 1em 0 2em 1em !important; }
	
	#contact-container { width: 80%; margin-left: 0; }
	.special { width: 100% !important; }
	#contact-text { width: 90% !important; padding: 0; }
	.image-right { float: none; width: 100% !important; }
	.image-right img { width: 100%; height: auto; }
	#about-header { margin-left: 2em; width: 90% !important; }
	
	#volunteer-text { margin: 0 0 1em 1em; }

	.leadership-column { width: 90%; }
	.links-column { width: 90%; }
	
	.order-column { float: none; width: 100%; margin-left: 0; }
	.order-item .link-text { margin-left: 0.5em; }
	
	#contact-table { width: 90%; margin: 0 auto; }
	.contact-cell { padding: 0 0 0.5em 1em; }
	
	.vols-img { display: none; }
	.img-mobile { display: block; width: 100%; float: none; margin-bottom: 2em; }
	.right-text, .left-text { width: 100%; float: none; }

	.bottom-item { margin-left: 1em; }
	.about-header { width: 90% !important; }
	.about-page { width: 100% !important; margin-left: -0.5em !important; }
	.about-page, .vol-container { overflow: hidden; }
	.about-page .header-text { margin-left: 1em !important; }
	.vol-container { width: 95% !important; }
	#mongo-form { width: 80%; }
	#registration-form { width: 90%; margin: 0 auto; }
	.register-row { border-spacing: 2em; }
	.register-cell input { width: 80% !important; }
	.register-cell input[type="radio"] { width: 10% !important; margin-right: 1em; }
	#registration-button { margin-top: 2em; }
	#registration-button input[name="Button"] { background-color: #366667; color: white; }
	#back-button { margin-top: 2em !important; }
	.register-header { margin-left: 0.25em; }
	.about-links { margin: 2em 3em !important; }
	.nameabook { width: 100% !important; }
	
	#periodicals-container { width: 90%; }

	.giving-tuesday { display: block; }
	#audio-container { border: none; width: 100%; margin: 0 auto; }
	
	#periodicalform { width: 100% !important; }
	.orderform { margin: 0 !important; }
	.info-field { margin-bottom: 0.4em; }
	
	.link-id { margin-left: 1em; }
	#links { margin-top: 4em !important; }
	
	.hspacer::before { content: '\A\A'; white-space: pre; }
	
	#footer-container { padding: 1em 1em; width: 100%; margin-top: 2em; }
	.footer-component { width: 25%; font-size: 0.6em !important; margin-right: 3em !important; }
	.footer-text { margin: 0 !important; }
	.footer-final { margin-right: 3em !important; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#donate-box { width: 12em; }
	.donate-text { font-size: 1.4em; }
	#contact-container { width: 100%; }
	.mobile-col { width: 80% !important; }
}

@media only screen and (min-width: 769px) and (max-width: 1280px) {
	.home-row { padding: 2em; }
	.home-section { width: 100%; }
	.highlight { width: 25%; }
	.highlight-image { border: none; height: auto; }
	.home-row-right { margin-left: 2em; }
}

@media only screen and (max-width: 600px) {
.highlight-top { padding: 2em 0em 4em 0em; }
}