/* A2H page style sketches - started 04 Feb 24 */

/* Gordon Bower - main portion last edited 09 Aug 24 */
/* Responsive design begun 14 Aug 24, tentatively completed 0100 23 Aug 24 */

/* Bugs:
    breakpoints in wrong place on firefox vs. chrome - is firefox just always narrower than it says it is? 
    (I had to set breaks in ff, and on chrome this is narrower than necessary.)
   Learn how to close a modal popup when clicking outside of the popup.
   Why is there an overhang of 4px beneath photos that are links? (Remove the overhang, and add a border on mouseover)
*/

/* Body and header fonts (Aleo and Grenze Gotisch) loaded via google stylesheet not here */

/* Symbol font */
@font-face {
  font-family: 'FontAwesome';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
}
.awesome { font-family: 'FontAwesome'; font-size: 115%; line-height: 100%}

/* Base size is 18px not 16px to make Aleo more readable */

html {
 background-image: url("/_img/note-555-aca.png"); 
 background-repeat: repeat;
 font-size: 18px;
}
 
.site { 
max-width: 1200px;
margin: 0px auto; /* the horizontal 'auto' is what centers the page on the screen */
padding: 0px 1.25em;
border: 0.34rem solid #300;
border-radius: 3rem; /* curved corners at edge of screen */
box-shadow: 0 0 1rem #000; /* shadow on outside edge */
color: #000; /* default text color for things on page */
background-color: #bbb; 
font-family: Aleo, Merriweather, Georgia, serif; /* Choose my primary body font and name it here */
}

.logobig, .logomed, .banner {
 font-family: 'Grenze Gotisch', Aleo, Merriweather, Georgia, serif;
 font-weight: 700;
}

h1, h2, h3 { letter-spacing: 0.03em; font-weight: 700; }
h1 { font-size: 3.0rem; text-shadow: 2px 2px 2px #600;}
h2 { font-size: 2.5rem; text-shadow: 1px 1px 2px #600;}
h3 { font-size: 1.7rem; text-shadow: 1px 1px 1px #600;}

p {
line-height: 125%;
text-indent: 1.5em;
text-align: justify; /* Remove this in narrow environments! */
}

.breadcrumb {
 text-align: center;
 padding: 0.5em 0;
}

a {  color: #00c; 
  transition: background 0.7s linear, color 0.7s linear;
}
a:visited {  color: #503; }
a:hover { 
  color: #00f;
  background: #fff;
  transition: background 0.3s linear;
}

.content { 
  max-width: 60em;
  margin: 0.5em auto;
}
.content > p > a {
  text-decoration: underline;
}

/* Header specific: */

.header, .footer { 
  margin: 1rem auto;
  position: relative; /* lets me position sub-objects */
  padding: 1rem;
  border: 0.23rem solid #200;
  border-radius: 2rem;
  box-shadow: 0 0 0.5rem #000; 
  background-image: url("/_img/triplet-c-fff0f0.png");
  background-repeat: repeat;
}
 
/* Three sections of top: */ 
 
 /* Intention: start at 200x400px, shrink proportionally if it needs to shrink */
.logo { 
  float: left;
  width: 19.5em;
  height: 11em;
  position: relative; /* lets us position words within the logo */
  /*  border: 2px dashed #000; /* none in final */
    margin-bottom: 0.5rem;
}
.logo > a {
  text-decoration: none;
  max-height: inherit; /* needed to make logo > a > #logopic be correct height */
}
.midhead {
  width: 15rem;
  height: 11rem; 
  position: absolute;
  right: calc( 50% - 9em); /* only on a very large screen */
  text-align: center;
}
.righthead {
  float: right;
  width: 14em; /* email address is longest element */
 /* border: 2px dashed #000; /* none in final */
 text-align: right;
  }
#collapsible_contact { display: none; } /* shown only on narrow screen */

/* Details of logo region */
#logopic { 
  height: 11.5em; /* After 21 Aug 24, logo region always 11em high */
  float: left;
 }
 .logotopleft { 
 position: absolute;
 top: -1.5em; /* Lots of whitespace in Grenze's M-box */
 right: 0em;
 }
.logobottomright {
 position: absolute;
 /*bottom: -0.5em;*/
 top: 3.5em;
 right: 0em;
 }
 .logobottomleft {
 position: absolute;
 /*bottom: 0em;*/
 top: 5.2em;
 left: 4.5em;
 }
  .logobig {
  color: #600;
  font-size: 5.5em;
  padding-top: 0;
  text-shadow: 1px 1px 2px #000, 2px 2px 5px #ccc;
  letter-spacing: -0.04em; 
  }
.logomed {
  color: #600;
  font-size: 4em;
  text-shadow: 0 0 1px #000, 0px 0px 4px #ccc;
  }  
  
  /* details of middle region */
 /* A kludge to put the search bar at the bottom of its half of the screen -- it's about 11 ems high */
.carthead {
  display: none; /* cart isnt ready yet 16 Jul 24 */
  margin: 0em auto;
  padding: 1em 2em;
  width: fit-content;
  border: 1px solid #ccc;
}

.searchhead {
  display: none; /* search tool isnt ready yet 16 Jul 24 */
  position: absolute;
  bottom: 0;
  width: 100%; /* otherwise narrower than midhead for some odd reason*/
}
#searchheadlabel {
}
#keyshead {
  width: calc(100% - 3em);
}
#searchhead_go {
  background-color: #600;
  color: #ddd;
  border: 1px solid #000;
  border-radius: 3px;
  margin: 0 0 0 0.5em;
  padding: 0.1em 0.3em 0.3em 0.3em; /* center the magnifying glass icon */
  float: right;
  max-height: 1.6em;
  cursor: pointer;
}
#searchhead_go:hover {
  background-color: #503;
  color: #dd0;
}


/* details of right region */
.contact_info {
 margin: 0.7em 0;
} 
.follow_us {line-height: 160%;}
  
.righthead a, .midhead a {
 color: #000;
 text-decoration: none;
 transition: background 0.7s linear, color 0.7s linear;
}
.righthead a:hover, .midhead a:hover {
 color: #00f;
 text-decoration: underline;
 transition: background 0.3s linear;
}
 a.langlink {  
   color: #00c;
   text-decoration: underline; 
 }
  .langflag { 
  height: 1em;
  padding: 0 0.25em;
  }

/*banner*/
  .banner {
  clear: both;
  border: 0.17rem solid #000;
  border-radius: 0.5rem;
  font-size: 2.8rem;
  color: #dd0;
  background: #600;
 width: fit-content;
 line-height: 100%;
  padding: 0.1em 0.5em 0.3em;
  margin: 0 auto; /* vertical margin does nothing since only floats above */
  letter-spacing: -0.03em;
  text-align: center; /*only matters if broken across 2 lines */
  }
  /* Navbar details: */
  
.nav {
  clear: both;
  background: #0f0; /* to see where the background shows through - should never be seen!*/
  border: 3px solid #200;
  position: sticky; /* Let the logo scroll off the top but keep the nav bar visible */
  position: -webkit-sticky;
  top: 0; 
  z-index: 50; /* Force menu to be in front of screen slider */

}  

.nav::after {
  content: "";
  display: block;
  clear: both;
}
.nav ul {
  list-style-type: none;
  width: 100%;
  font-family: 'Aleo';
  font-weight: 700;
  padding: 0; /* removes an ugly indent */
  margin: 0;
}
.nav li {
  float: left;
  width: 25%;
  text-align: center;
  margin: 0;
  box-sizing: border-box;
/*  border: 1px solid #300; use this only in the 2x2 layout */
}
.nav li a {
  height: 2.25em; /* HArdcoded so that the arrows don't change the box height slightly*/
  display: block;
  color: #ddd;
  background: #600;
  font-size: 125%;
  text-decoration: none;
  padding: 0.5em; /* em not rem so it adjusts with box size */
  box-sizing: border-box;
  transition: background 0s;
}
.nav li:hover {
  position: relative;
  }
.nav li:hover a {  
color: #dd0;
background-color: #503;
text-decoration: underline;
transition: background 0.1s linear, color 0.1s linear;
 border: 3px #f0f;
*/
}
.hassubmenu:after {
    font-family: FontAwesome;
    font-weight: normal;
    color: #ccc;
    content: " \f107";
    }
.hassubmenu:hover:after {
    color: #ff0;
    content: " \f103";
}
.nav li ul { /* hides submenus until they are wanted */
display: none;
}
.nav li:hover > ul {
  display: block;
  position: absolute;
  left: 0px;
  top: 2.75rem; /* this changes if font-size or padding of .nav li a changes: fontsize * (1.2+2*padding) */
}  
.nav li:hover ul li {
width: 100%;
position: relative;	
height: auto;
}
.nav li ul li a {
height: auto;
padding: 0.4em 0.2em;
}
/* Color options need repeated for the submenu */ 
 .nav li:hover ul li a {
color: #ddd;
background-color: #600;
text-decoration: none;
}

 .nav li:hover ul li:hover a {
color: #dd0;
background-color: #503;
text-decoration: underline;
}

 .nav li:hover ul li .inactivelink {
color: #999;
background-color: #600;
cursor: default;
}
 .nav li:hover ul li:hover  .inactivelink {
color: #999;
background-color: #600;
cursor: default;
text-decoration: none;
}

/* Slideshow styling -- 500x750 normal size */
.slideshow_container {
max-width: 750px;
aspect-ratio: 3/2;
width: 96%;
margin: 1rem auto;
border: 3px solid #000;
background: #ffe7e7;
overflow: hidden;
position: relative; /* slides positioned w.r.t. this container */
}
.slide_container {
width: 100%;
position: absolute;
left: 100%; /* sets ALL slides offscreen to start except the first */
transition: 2s;
z-index: 2;
}
.slide_container#sc0 { left: 0%; }
.slide_container img { width: 100%; }
.slide_number {
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  color: #000;
  background-color: #bbb;
  opacity: 0.2;
  padding: 0.5em;
  z-index: 5;
}
.slide_button {
  position: absolute;
  color: #ddd;
  background-color: #600;
  opacity: 0.5;
  font-size: 2rem;
  font-weight: 700;
  padding: 0.5em;
  transition: opacity 0.7s linear;
  z-index: 5;
}
.slide_button:hover {
  color: #dd0;
  background-color: #503;
  opacity: 1;
  transition: 0.7s linear;
}
.slide_button#prev {left: 0; top: calc(50% - 1.5em);}
.slide_button#next {right: 0; top: calc(50% - 1.5em);}
.slide_button#stop {right: 0; top: 0; font-family: 'FontAwesome';}

.slide_caption {
  position: absolute;
  left: 15%;
  bottom: 2.25rem;
  width: 70%;
  color: #fff;
  background: #000;
  background: rgba(0,0,0,0.6);
  font-size: 150%;
  text-align: center;
  padding: 0.5em;
}

.slideshow_dots {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
z-index: 5;
}
.dot { 
cursor: pointer;
width: 1em;
height: 1em;
margin: 0.25em;
border-radius: 50%;
background-color: #ddd;
border: 2px solid #000;
display: inline-block;
opacity: 0.5;
transition: 0.7s linear;
}
.dot:hover {
opacity: 1;
background-color: #dd0; /* doesn't work because JS is setting the color changes */
transition: 0.3s linear;
}

.slideshow_backdrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
font-size: 2rem;
z-index: 1;
}

/* News section */
.news_container {
 width: 100%; /* the stories are wider than the headlines, but they float */
  border: 2pt solid #300;
  margin: 0 auto;
}
.news_storylist {
  clear: both;
  padding: 0 0.2em;
  overflow-x: hidden; /* scroll didn't work as desired... */
  position: relative;
  height: 26em; /* these are main-page ems; the story ems are 16pt not 18pt! */
  max-width: calc(100% - 1.5em);
}
.news_story { 
  position: absolute;
  top: 0;
  font-size: 89%;
  width: 16em;
  border: 1pt solid #000;
  margin: 0 0.25em 0.5em 0.25em;
  background: #ddd;
  transition: left 2.5s ease;
}
.news_story:hover {
  background: #eec;
  border: 2px solid #503;
}
/* this is set in javascript when the scroll buttons are used, but initially the first 4 stories visible*/
#ns1 { left: 0; } 
#ns2 { left: 17em; }
#ns3 { left: 34em; }
#ns4 { left: 51em; }

.news_story > a {
  text-decoration: none;
  color: #000;
}
.news_body {
  max-height: 25.5em;
  overflow: hidden;
  margin: 0.5em 0.25em 0.5em 0.5em;
}
.news_body p {text-align: left;}
.news_body img {
  float: left;
  width: 6em;
  margin: 0.25em 0.6em 0.25em 0.25em;
  border: solid 1px #000;
}
.news_body h4 { 
  letter-spacing: -0.03em;
  margin: 0.25em;
  font-size: 1.2em;
}

.news_foot {
  font-weight: 700;
  margin: 0.5em;
  text-align: center;
}

.news_container h2 {
  margin: 0.5em;
  letter-spacing: 0;
  text-align: center;
}
.news_controls {
  display: inline-block;
  width: fit-content;
}
.news_button {
  /*float: right;*/
  font-size: 75%; /* 75% of H2 size */
  margin: 0;
  padding: 0.1em 0.2em;
  color: #ccc;
  background: #600;
  text-decoration: none;
}
.news_button#first, .news_button#last {padding: 0.1em 0.33em; }

.news_button:hover {
  color: #dd0;
  background: #503;
}

/* On the standalone news page: */
.news_prev {
 float: left;
 max-width: 35%;
}
.news_next {
 float: right;
 max-width: 35%;
}
.news_links {
  margin: 0 auto;
  padding: 0.5em 0;
  text-align: center;
  border-top: 3px solid #600;
  border-bottom: 3px solid #600; 
}

.news_photos::after, .news_links::after { /* same as any other section with floats...*/
  clear: both;
  content: "";
  display: block;
}

.content > hr { clear: both; } /* a kludge to insert some clearing in news articles before headers where there is no div */

/* wrap text around figures in articles */
.leftwrap, .rightwrap, .flexpic {
border: #000 solid 1px;
padding: 0.5em;
}
.leftwrap { 
  float: left; 
  margin: 0.5em 1em 0.5em 0; 
  max-width: calc(100% - 12em); /* this makes 300-px figures shrink when they are in a main article on a narrow screen, but not in a flexbox */
  }  
.rightwrap { 
  float: right; 
  margin: 0.5em 0 0.5em 1em;
  max-width: calc(100% - 12em); /* alt: 60% */
  }
.flexpic { margin: 0.5em 1em 0.5em 0;}
.news_photos {
 display: flex;
 flex-flow: row wrap;
 }
.caption {
text-align: center;
font-size: 0.80rem;
}
.fig3 {
width: 300px;
}
.fig50 { /* is this ever used? */
width: fit-content;
max-width: 49%;
}
.figfull {
border: #000 solid 1px;
padding: 0.5em;
margin: 0.5em 0 0.5em 1em;
}
.fig3 img, .fig50 img, .figfull img {max-width: 100%;}

/* Footer */
.bottom {
  margin: 0.5em auto;
  width: fit-content;
  max-width: 80%;
 }
 #invdatebox {
  font-size: 75%;
 }
.footer { clear: both; /* insurance against stray floats in the main content */
}
.footer_top {
  margin: 0.5em auto 0.2em auto;
  text-align: center;
}
.footer_left {
  float: left;
  width: 8em;
  margin: 0 0 0 1em;
}
.footer_right {
  float: right;
  width: 10em; /* L and R must be same width */
  text-align: right;
  margin: 0 1em 0 0;
}
.footer_center {
  text-align: center;
  position: relative; /* to aid in positioning footer graphic and copyright */
}
.footer_center img {
  height: 5em;
  width: auto;
  margin: 0;
  position: absolute;
  top: 5em; /*works as long as "thank you" fits on 2 lines */
  left: calc(50% - 1em);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.footer_bottom {
  clear: both;
}
.copyright {
  position: absolute;
  bottom: 1rem;
  left: calc(50% - 1em);
  translate: -50%;
  text-align: center;
  font-size: 75%;
}
.linkgroup {
  line-height: 120%;
  margin: 0 0 0.5em 0;
}
.contactus {
  cursor: pointer;
  text-decoration: underline;
}
.follow {
  font-family: FontAwesome;
  font-size: 200%;
}
.follow a {text-decoration: none;}
/* Contact form: ID not class so getELementByID finds it */
/* contact_popup is for all popup forms; #contact_form is specifically the footer form */

.contact_popup {
  display: none;
  position: fixed;
  width: 70vw;
  left: 15vw;
  top: calc(50vh - 6em);
  z-index: 55;
  background: #ddd;
  border: 3px solid #600;
}
.contact_popup h3 {
  text-align: center;
}
.contactclose {
font-family: Arial, sans-serif;
font-size: 1.5rem;
background-color: #600;
color: #ddd;
padding: 0 0.2em 0.2em 0.2em;
position: absolute;
top: 0; right: 0;
cursor: pointer;
}
.contactclose:hover {
color: #dd0;
background-color: #503;
}
.formrow {
clear: both;
margin: 0 4%;
}
#contact_form label, #buyer_form label, #de label, #it label {
margin: 0.25em 1em 0.25em 0;
}
#contact_form input[type="text"], #buyer_form input[type="text"], #de input[type="text"], #it input[type="text"]  {
margin: 0 0 0.5em 0;
float: right;
width: calc(100% - 8.5em);
}
#de input[type="text"], #it input[type="text"] {width: calc(100% - 10em);}
#contact_form textarea, #buyer_form textarea , #de textarea, #it textarea {
 margin: 0.25em 0;
 width: calc(100% - 10.5em);
 height: 5em;
 float: right;
}
#de textarea, #it textarea { width: calc(100% - 12em);}

#contact_form button, #buyer_form button, #de button, #it button {
color: #ddd;
font-size: 1rem;
background-color: #600;
border: 1px solid #000;
border-radius: 6px;
margin: 0.5em 0 0.5em calc(50% - 3em); /* This way we don't need text-align=center */
padding: 0.5em 2em;
cursor: pointer;
}
#contact_form button:hover, #buyer_form button:hover, #de button:hover, #it button:hover   {
color: #dd0;
background-color: #503;
transition: 0.3s;
}

.text_contact {
color: navy;
}
.text_contact:hover {
color: #00f;
background: #fff;
}

/*************************************************************************************/
/* Things unique to category pages 
/*************************************************************************************/

.page_title {
 text-align: center;
}
.itemlisthead {
  text-align: center;
  border-bottom: 3px solid #600;
  border-top: 3px solid #600;
  padding: 1.5rem 0;
}
.cattotal, .line_title, .line_total {  font-size: 2.5rem; }
.catnotes { font-size: 1.5rem; }

.line_head {
  border-bottom: 3px solid #600;
  border-top: 3px solid #600;
  padding: 1.5rem 0;
  margin: 0.5em 0;
}
.line_head:after { clear: both; }
.line_total{ float: right;}
.line_title { 
  display: inline-block;
  max-width: calc(100% - 6em);
}
.line_expand {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 2em;
  line-height: 100%;
  background-color: #600;
  color: #ddd;
  padding: 0.1em 0.2em 0 0.2em;
  margin: 0.2em 0.3em 0 0;
  cursor: pointer;
  display: inline;
  border: solid #000 2px;
  vertical-align: top;
}
.line_expand:hover {
  background-color: #503;
  color: #dd0;
}


.itemlist_entry {
 border-bottom: 1px solid #000;
 padding: 0.5em 0;
 position: relative; /* enables positioning of buttons */
}
.itemlist img {
  width: calc(25% - 1em);
  border: 2px solid #000;
  border-radius: 1em;
  overflow: none;
  float: left;
}
.itemlist_column {
   width: 75%;
   float: right;
 }
 .itemlist_author { font-weight: 700;}
 .itemlist_title { font-size: 150%;}
/* On a narrow page: price and goto become inline, request still floats right if it fits;
   On an even narrow page, put buy now on its own row under the other two
   If that doesn't fit beside the photo, turn the photo into a wrap-figure, or just unfloat it.
   */
 .itemlist_price {
 float:left;
 font-size: 1.5em;
 }
 .itemlist_buynow, .itemlist_widebuynow {
 position: absolute;
 right: 0;
 margin-top: 0.5em; /*to align with "find out more" button */
 }
.itemlist_goto, .itemlist_widegoto {
 margin: 0.5em 0 0.5em 1em;
 width: fit-content;
 display: inline-block;
}
/*************************************************************************************/
/* Things unique to model/instrument pages - might be split into separate file later */
/*************************************************************************************/

.buynow, .itemlist_goto a, .itemlist_buynow a, .itemlist_widegoto a, .itemlist_widebuynow a {  color: #ddd; 
  transition: background 0.7s linear, color 0.7s linear;
  background: #600;
  padding: 0.5em 0.75em;
  border: 2px #000 solid;
  border-radius: 0.5em; 
  width: fit-content;
  margin: 0.5em auto;
  text-align: center;
  text-decoration: none;
  line-height: 125%;
}
.buynow:hover, .itemlist_goto a:hover , .itemlist_buynow a:hover, .itemlist_widegoto a:hover, .itemlist_widebuynow a:hove { 
  color: #dd0;
  background: #503;
  transition: background 0.3s linear;
}
.item_title, .book_title {
  font-size: 2.5rem;
  font-weight: 700;
}
.item_title { float: left;}

.book_author {
  font-size: 1.7rem;
  font-weight: 700;
}

.item_price {
  float: right;
  font-size: 2.5rem;
}
.book_price { /* This may change once the cart button works */
 text-align: center;
 font-size: 1.5rem;
 font-weight: 700
}

.item_head {
  margin: 2em 1em 0.5em 1em;
  border-bottom: 3px solid #600;
  }
.item_head::after, .item_lead::after, .itemlist_entry::after {
  clear: both;
  content: "";
  display: block;
}
.item_lead img {
  width: calc(50% - 1em);
  border: 2px solid #000;
  border-radius: 1em;
  overflow: none;
  float: left;
}
.item_lead_column {
   width: 50%;
   float: right;
 }
.detail_head {
  border-top: 3px solid #600;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 1rem 0.5rem 1rem;
}
.detail_container {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 0.5em;
}
/* We want the detail boxes to have fitting widths, but only after JS loads and resets width: field */
.detail_box {
  border: 1px #000 solid;
  max-width: 22em; /* 6 register switches across */
  width: fit-content;
  margin: 0.5em;
  position: relative;
  height: fit-content;
}
.detail_box_title {
  color: #fff;
  font-weight: 700;
  background: #600;
  text-align: left;
  padding: 0.2em 2em 0.2em 1em;
 }
.detail_expand {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 100%;
  background-color: #600;
  border-left: 1px solid #000;
  color: #ddd;
  padding: 0 0.2em 0.2em;
  position: absolute;
  top: 0; right: 0;
  cursor: pointer;
}
.detail_expand:hover, #collapsible_contact:hover {
  background-color: #503;
  color: #dd0;
}
/* No formatting for detail_table or book_table as a whole */

.table_label {text-align: right;}
.table_desc {text-align: left; }
.treg, .breg { 
  width: 36;
  height: 36;
  margin: 0 2;
}

#units {  
  color: #00c; 
  transition: background 0.7s linear, color 0.7s linear;
  text-decoration: underline;
  cursor: pointer;
}
#units:hover { 
  color: #00f;
  background: #fff;
  transition: background 0.3s linear;
}
.metric { display: inline;}
.english { display: none;}


.gallery {
  white-space: nowrap;
  overflow: auto;
  width: fit-content;
  max-width: 99%;
  padding: 0 0.5em 0 0.5em; 
  border: 2px solid #000;
    margin: 0.5em;
  scrollbar-color: #600 #777;
  position: relative;
  box-sizing: border-box;
}
.gallery_label {
  display: inline-block;
  vertical-align: middle;
  margin: 0.5em;
}
.gallery img {
  height: 5em;
  width: auto;
  border: 2px solid #000;
  border-radius: 0.5em;
  margin: 0.5em 0.25em 0.25em 0.25em;
  cursor: pointer;
  vertical-align: middle;
  transition: 0.7s linear;
}
.gallery img:hover {
  border: 2px solid #dd0;
  background: #503;
  opacity: 0.7;
  transition: 0s;
}
.gallery_popup {
  display: none;
  position: fixed;
  z-index: 51; /* in front of top menu */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0,0,0,0.7);
}
.gallery_container {
 max-width: 90%;
 max-height: calc(100% - 4.5em);
 width: fit-content;
 margin: 3.5em auto 1em;
 display: block;
 position: relative;
 border: 0.34rem solid #600;
 border-radius: 2rem;
 overflow: hidden;
 scrollbar-color: #666 #333;
}
.gallery_container img {
  max-width: 100%;
  max-height: 100%;
  cursor: zoom-in;
}
.gallery_button {
  position: absolute;
  color: #ddd;
  background-color: #600;
  opacity: 0.5;
  font-size: 2rem;
  font-weight: 700;
  padding: 0.5em;
  transition: opacity 0.7s linear;
  z-index: 5;
}
.gallery_button:hover {
  color: #dd0;
  background-color: #503;
  opacity: 1;
  transition: 0.7s linear;
}
.gallery_button#prev {left: 0; top: calc(50% - 1.5em);}
.gallery_button#next {right: 0; top: calc(50% - 1.5em);}
.gallery_button#close {right: 0; top: 0; font-family: Arial, Sans}
.gallery_caption {
  position: absolute;
  left: 15%;
  bottom: 1em;
  width: 70%;
  color: #fff;
  background: #000;
  background: rgba(0,0,0,0.6);
  font-size: 150%;
  text-align: center;
  padding: 0.5em;
}
.labeled_gallery {
  border: 2px solid #000;
  margin: 0.5em;
}
.gallery_title {
  margin: 0 auto 0.5em;
}

.youtube_container {
  display: flex;
  flex-flow: row wrap;
}

.youtube_video {
  border: 3px #000 solid;
  margin: 0.5em;
}
/* Request 450x260 iframes from https://www.classynemesis.com/projects/ytembed/ */
/* If it's too big, change the FONT SIZE for this box to shrink it evenly! */
.youtube_video iframe {
 width: 25em;
 height: 14.5em;
 margin 0.5em;
 padding: 3px;
 box-sizing: border-box;
}
.video_caption {
  text-align: center;
  padding: 0.5em;
  border-top: 3px #000 solid;
  max-width: 24em; /* = 450px at max size */
}

/* "Longtext" areas are areas we split into 2 columns when the screen is wide, and change back to 1 when it is narrow */
.longtext {
  columns: 20em 2;
  column-gap: 1.5em;
}

/* Features needed to facilitate drawing register symbols */
.centertext { vertical-align: center;}

/* temporary: */
#construction {
 width: fit-content;
 max-width: 60%;
 margin: 1em auto;
 display: block;
 border: 3px solid #000;
 border-radius: 1em;
}

/*********************************************************************************/
/* Responsive design: base design works when sufficiently wide: 954px or more    */
/*********************************************************************************/
/* 1st Breakpoint is 970, not 954, to allow 16px for scrollbar on right edge of screen */

/* Overall size will shrink at 876, 746, and 520 (=860,730,504,plus scrollbar);
  menu will reconfigure at 636 and 556
  */


/* overall font sizes: */
@media all and (max-width: 969px) {
  .wideonly { display: none;}
}
@media all and (max-width: 879px) {
  html { font-size: 16px;}
}
@media all and (max-width: 745px) {
  html { font-size: 14px;}
}
@media all and (max-width: 526px) { /*adjusted from 520 to avoid extra banner step at 524 */
  html { font-size: 12px;}
}

/* navigation bar: done 14 Aug 24*/
@media all and (max-width: 661px) and (min-width: 576px) {
 .nav { width: fit-content; margin: 0 auto;}
 .nav ul { width: fit-content;}
 .nav li { width: fit-content;}
}
@media all and (max-width: 575px) {
 .nav li { width: 50%;}
}
/* banner: more steps than needed? but it works*/
@media all and (max-width: 783px) and (min-width: 631px) {
 .banner { font-size: 2.5rem;}
}
@media all and (max-width: 630px) and (min-width: 568px) {
 .banner { font-size: 2.2rem;}
}
@media all and (max-width: 567px) and (min-width: 459px) {
 .banner { font-size: 2rem;}
}
@media all and (max-width: 458px) and (min-width: 429px) {
 .banner { font-size: 1.8rem;}
}
@media all and (max-width: 428px) {
 .banner { font-size: 1.6rem;}
}


/* logo:  */
@media all and (max-width: 805px) {
  .logo { 
    width: 17.8em; 
  }
 .logobig { font-size: 5em;}
 .logobottomleft{ left: 4em; top: 4em;} /* do distances from TOP not BOTTOM */
 .logobottomright{ top: 3em;}
}

/* search/cart box */
@media all and (max-width: 805px) {
 .midhead {right: 13em;}
 .carthead {
   position: absolute;
   right: 1em;
 }
}
/* Contact block:*/
/* the same time this happens, shift midhead to the right side! */
@media all and (max-width: 660px) and (min-width: 625px) {
   .searchhead { text-align: right;}
  #searchheadlabel {padding-right: 3em;}
}
@media all and (max-width: 624px) {
  #collapsible_contact {
   display: block;
   clear: both;
   width: 100%;
   background: #600;
   color: #dd0;
   text-align: center;
   padding: 0.2em;
   margin: 0.5em;
   position: relative; /* makes the + sign a child of this element */
  }
  #expand_contact { padding: 0.15em 0.2em 0.05em; } /* different vertical align than info boxes below */
 #table_contact {    display: none; }
 .righthead {
  float: none;
  margin: 0 auto; /* center the info box */
 }
 .midhead {   right: 1em; }
 .logopic { height: 13.65em;} /* extend silhouette to touch banner */
 }
@media all and (max-width: 420px) {
  .searchhead { text-align: right;}
  #searchheadlabel {padding-right: 3em;}
  .carthead { text-align: right;
  padding-right: 0}
}
/* We are happy with the instrument pages all the way down to 360px as is */
/* Footer: */
@media all and (max-width: 430px) {
  .footer_center {
   clear: both;
   height: 4em;
  }
  .footer_center img {   top: -7em;}
}
/* Item-list (and search results, someday) pages: */
@media all and (max-width: 600px) {
  .itemlist_widebuynow {
    position: absolute;
    bottom: 1em;
    left: calc(25% + 10em); /* centered under "find out more" - wild guess */
   }
  .itemlist_widegoto {
  margin-bottom: 3.5em; /* open up space for a second button underneath */
  }    
}
@media all and (max-width: 454px) {
  .itemlist_buynow {
    position: absolute;
    bottom: 1em;
    left: calc(25% + 4.8em); /* centered under "find out more" */
   }
  .itemlist_goto {
  margin-bottom: 3.5em; /* open up space for a second button underneath */
  }    
}

/* Main-page slide show already is responsive. */
/* News feed on main screen needs shrunk. */

/* News pages are mostly adaptive with calc functions */

@media all and (max-width: 755px) and (min-width: 550px) {
  .flexpic { max-width: calc(50% - 2.2em);  }
}
@media all and (max-width: 1103px) and (min-width: 915px) {
  .flexpic { max-width: calc(33% - 2.1em);  }
}