/* @@@ Responsive Design @@@ */

/* media queries with REM units instead of PX. */
/* keep the scan length between 7 and 14 words.  How many REMs does that make?  70rems */
/* Can't use calc in media queries */
/*
Calculations based on a root font-size of 16 pixel:
  1120px = 70rem
  1100px = 68.75
  1024px = 64rem
  900px = 56.25rem
  960px = 60rem
  1024px = 64rem
  70rem = 1120px
  45px = 2.813rem
*/

/* small screens */
@media screen and (max-width: 69.99rem) {

  HTML,
  BODY {
    font-family: system-ui;
  }

  P,
  DIV,
  SPAN,
  CAPTION,
  TD {
    /*
        WCAG 2.1 1.4.12 Spacing
        o Line height (line spacing) to at least 1.5 times the font size;
        o Spacing following paragraphs to at least 2 times the font size;
        o Letter spacing (tracking) to at least 0.12 times the font size;
        o Word spacing to at least 0.16 times the font size.
        */
    font-size: 1.5rem;
    letter-spacing: .18rem;
    line-height: 2.25;
    word-spacing: .24rem;
  }

  P {
    /* Spacing following paragraphs to at least 2 times the font size; */
    margin-bottom: 3rem;
  }

  TH {
    font-size: 1.5rem;
    letter-spacing: .18rem;
    line-height: 2.25;
    margin-bottom: 3rem;
    word-spacing: .24rem;
  }

  #wrapper {
    margin-left: 4px;
    margin-right: 4px;
    width: 100%;
  }
}

/* large screens (i.e., greater than maximum line length of 70rem) */
@media screen and (min-width: 70rem) {

  HTML,
  BODY {
    font-family: Calibri, "Trebuchet MS", Arial, Georgia, "Times New Roman", Helvetica, sans-serif;
  }

  #wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 70rem;
    /* background-image: url(../images_bg/bg51.gif) repeat-y left; */
  }
}


/*
@media screen and (min-width: 901px) {
    #wrapper {
        margin-left: auto;
        margin-right: auto;
        max-width: 70rem;
    }
}
*/

.responsivetable,
.table-container {
  max-width: 100%;
  overflow-x: auto;
}

.breadcrumz {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1400px) {
  * {
    box-sizing: border-box;
    line-height: 1.5 !important;
  }

  body {
    overflow-x: hidden;
  }

  P,
  DIV,
  SPAN,
  CAPTION,
  TD,
  UL.xtralinebr LI,
  OL.xtralinebr LI,
  li {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: .12rem;
    word-spacing: .16rem;
  }
}

@media (max-width: 1036px) {

  P,
  DIV,
  SPAN,
  CAPTION,
  TD,
  UL.xtralinebr LI,
  OL.xtralinebr LI,
  li {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: .12rem;
    word-spacing: .16rem;
  }

  P,
  DIV,
  SPAN,
  CAPTION,
  TD {
    margin-bottom: 2rem;
  }

  #wrapper > div > div:nth-child(1) > div {
    width: 100% !important;
  }

  #wrapper > div > div:nth-child(1) > div img {
    width: 100% !important;
  }

  #wrapper > div > div:nth-child(21) > div > img:nth-child(1),
  #wrapper > div > div:nth-child(21) > div > img:nth-child(3) {
    width: 50px !important;
  }

  #wrapper > div > div:nth-child(21) > div > img:nth-child(1) + a > img {
    width: 50% !important;
  }

  #wrapper > div > div:nth-child(21) > div {
    width: 100% !important;
  }

  * {
    box-sizing: border-box;
  }

  .boxtoc01 {
    width: 100%;
  }

  details.hamburger-bun {
    width: 90%;
  }

  details.hamburger-bun div {
    min-width: 100% !important;
  }


  div#wrapper {
    margin: 0;
  }

  div.breadcrumz {
    margin: 0;
  }

  img[src="images/pointri.gif"].align-left,
  img[src="images/pointlf.gif"].align-right {
    width: 30px;
  }

  ul.footbuttons li {
    padding: .5rem .75rem;
  }

  .nicebox11,
  .nicebox00,
  .nicebox01,
  .nicebox02,
  .nicebox03,
  .nicebox04,
  .nicebox05,
  .nicebox06,
  .nicebox07,
  .nicebox08,
  .nicebox09,
  .nicebox10,
  .nicebox11,
  .nicebox12,
  .nicebox13,
  .nicebox14,
  .nicebox15,
  .nicebox16,
  .nicebox17,
  .nicebox18,
  .nicebox27,
  .nicebox28,
  .nicebox29,
  .nicebox30,
  div_bg79,
  div_bg82,
  div_bg83,
  div_goth_wordcloud,
  div_blackbat,
  div_blackroses,
  div_zodiac,
  div_light_blue_texture,
  div_bg52,
  div_blackbrickwall,
  div_white_leather_texture,
  div_stripes {
    min-width: auto !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  div[style="display: block; margin-left: auto; margin-right: auto; text-align: center; width: 1030px;"],
  .center-inside {
    width: 100% !important;
  }



  div[style="display: block; margin-left: auto; margin-right: auto; text-align: center; width: 584px;"],
  .center-inside {
    width: 100% !important;
  }

  hr.chain,
  hr.chain-of-hearts {
    width: 100%;
  }


  p#site_map + div div {
    width: 100% !important;
  }

  li[title="current page"] span.greyedout {
    white-space: pre-wrap !important;
  }

  a {
    word-wrap: break-word;
  }

  div[style="margin-left: auto; margin-right: auto; width: 30rem"] {
    width: 100% !important;
  }

  hr.lion {
    width: 100% !important;
  }

  tt {
    word-wrap: break-word;
  }

  h2#index + div {
    overflow-x: auto;
  }
}

@media (max-width: 767px) {

  P,
  DIV,
  SPAN,
  CAPTION,
  TD,
  UL.xtralinebr LI,
  OL.xtralinebr LI,
  li {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: .12rem;
    word-spacing: .16rem;
  }

  div[style="display: block; margin-left: auto; margin-right: auto; width: 500px; background: url(images_bg/bg19.gif); padding: 1rem; border: 3px groove black;"] {
    width: 100% !important;
  }

  * {
    word-wrap: break-word;
  }

  body#dvds #wrapper .main table tr {
    display: flex;
    width: 100%;
  }

  body#dvds #wrapper .main table tr td:first-child {
    width: 10%;
  }

  body#dvds #wrapper .main table tr td:last-child {
    width: 90%;
  }

  body#dvds #wrapper .main table,
  body#dvds #wrapper .main table tbody {
    display: block;
    padding: 0;
  }

  body#dvds iframe {
    width: 100%;
  }

  div {
    width: 100% !important;
  }

  body#dvds TABLE.lam caption {
    display: block;
  }
  .indent{
    margin-left: 0!important;
  }

}