/* *************************************************** Page *************************************************** */
h1.page
{
  text-align: center;
  color: var(--color-h);
  font-size: 2.4rem;
  line-height: 2.8rem;
  max-width: 1000px;
  padding: 0 20px;
  margin: 100px auto 50px auto;
}
h1.page span
{
  color: var(--color-h);
  font-size: 2.4rem;
  font-weight: 300;
}
section.page 
{
  max-width: 1200px;
  padding: 0 20px 50px 20px;
  margin: 0 auto;
}
section.page.last 
{
  margin: 0 auto 100px auto;
}
section.page h2
{
  color: var(--color-h);
  font-size: 1.8rem;
  line-height: 2.2rem;
  margin-bottom: 20px;
}
section.page figure
{
  max-width: 100%;
  height: auto;
  padding: 20px 20px 0px 20px;
  margin: 0 auto;
}
section.page figure img
{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
section.page figure figcaption
{
  max-width: 800px;
  font-size: 0.9rem;
  line-height: 1.4rem;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
  margin: 0 auto;
}
section.page p
{
  padding: 10px 0;
}
section.page p.hist-note
{
  font-style: italic;
}
section.page ul, section.page ol
{
  padding: 20px 0 20px 30px;
}
section.page ul li
{
  list-style: disc;
}
section.page ol li
{
  list-style: decimal;
}
section.page ul ul
{
  padding: 20px 0 20px 30px;
}
section.page ul ul li
{
  list-style: circle;
}
section.page a, section.page a strong, section.page a em, section.page li a
{
  color: var(--color-link);
  font-style: normal;
  font-weight: 700;
}
section.page blockquote p
{
  padding: 10px 20px;
  font-style: italic;
}
p.page
{
  max-width: 1200px;
  padding: 10px 20px;
  margin: 0 auto;
}
p.page.last
{
  margin: 0 auto 50px auto;
}
p.page a, p.page a strong, p.page a em
{
  color: var(--color-link);
  font-style: normal;
  font-weight: 700;
}


/* ******************************************* Showcase-page ******************************************* */
.showcase-page
{    
  max-width: 1200px;
  min-height: 400px;
  background-position: center;
  background-size: cover;
  margin: 0 auto 70px auto; 
  position: relative;
}
#showcase-page-auto-01
{
  background-image: url("../images/library/bosa-oscilloscopes-hardware-description/showcase-1200x400.webp"); 
}
#showcase-page-auto-02
{
  background-image: url("../images/library/studiobosa-car-diagnostic-software/showcase-1200x400.webp"); 
}
#showcase-page-auto-03
{
  background-image: url("../images/library/oscilloscope-basics/showcase-1200x400.webp"); 
}
#showcase-page-auto-04
{
  background-image: url("../images/library/oscilloscope-scan-tool-code-reader/showcase-1200x400.webp"); 
}
#showcase-page-auto-05
{
  background-image: url("../images/library/sampling-algorithms-bosa-oscilloscopes/showcase-1200x400.webp"); 
}
#showcase-page-auto-06
{
  background-image: url("../images/library/usb-lan-wifi-handheld/showcase-1200x400.webp"); 
}
#showcase-page-auto-07
{
  background-image: url("../images/library/sparkscope-mode-ignition-patterns/showcase-1200x400.webp"); 
}
#showcase-page-mag-10
{
  background-image: url("../images/library/new-portable-3d-magnetometer/showcase-1200x400.webp"); 
}
#showcase-page-mag-11
{
  background-image: url("../images/library/coil-systems-magnetometers-calibration/showcase-1200x400.webp"); 
}
#showcase-page-mag-12
{
  background-image: url("../images/library/space-weather-amr-magnetometer/showcase-1200x400.webp"); 
}
#showcase-page-rng-01
{
  background-image: url("../images/library/studiogtr-random-generation-software/showcase-1200x400.webp"); 
}
#showcase-page-rng-03
{
  background-image: url("../images/library/what-is-random-number-generator/showcase-1200x400.webp"); 
}
#showcase-page-rng-04
{
  background-image: url("../images/library/avalanche-noise-quantum-entropy/showcase-1200x400.webp"); 
}
#showcase-page-rng-07
{
  background-image: url("../images/library/statistical-testing-random-generators/showcase-1200x400.webp"); 
}
#showcase-page-sci-01
{
  background-image: url("../images/library/diffraction-patterns-visualization-software/showcase-1200x400.webp"); 
}
#showcase-page-sci-02
{
  background-image: url("../images/library/sati-instruments-calibration-method/showcase-1200x400.webp"); 
}
#showcase-page-sci-03
{
  background-image: url("../images/library/wavelet-analysis-data-series/showcase-1200x400.webp"); 
}
#showcase-page-sci-04
{
  background-image: url("../images/library/grinding-testing-telescope-mirrors-part-i/showcase-1200x400.webp"); 
}
#showcase-page-sci-05
{
  background-image: url("../images/library/grinding-testing-telescope-mirrors-part-ii/showcase-1200x400.webp"); 
}
#showcase-page-sci-06
{
  background-image: url("../images/library/grinding-testing-telescope-mirrors-part-iii/showcase-1200x400.webp"); 
}
#showcase-page-sci-07
{
  background-image: url("../images/library/grinding-testing-telescope-mirrors-part-iv/showcase-1200x400.webp"); 
}
#showcase-page-sci-08
{
  background-image: url("../images/library/first-order-experiments-using-photodiodes/showcase-1200x400.webp"); 
}
#showcase-page-sci-09
{
  background-image: url("../images/library/stellar-aberration-absolute-motion-detection/showcase-1200x400.webp"); 
}
#showcase-page-sci-10
{
  background-image: url("../images/library/dynamoplanetar-of-rasho-tilchev/showcase-1200x400.webp"); 
}
#showcase-page-00
{
  background-image: url("../images/library/showcase-soon-1200x400.webp"); 
}
.showcase-page-container
{
  position: absolute;
  top: 200px;
  left: 10%;
  max-width: 800px;
  padding: 0 20px;
}
.showcase-page-container h1
{
  color: #fff;
  font-size: 2.0rem;
  line-height: 2.4rem;
  text-align: left;
  padding: 0;
  margin: 0;
}
.showcase-page-container p
{
  color: #fff;
  font-weight: 400;
  text-align: left;
  padding-top: 10px;
}


/* ******************************************* Moreart ******************************************* */
.section-moreart
{
  width: 100%;
  padding: 50px 20px;
  margin: 20px 0 100px 0;
  background-color: #eee;
}
.section-moreart h2
{
  text-align: center;
  color: var(--color-h);
  font-size: 2.0rem;
  line-height: 2.4rem;
  margin-bottom: 50px;
}
.moreart-container
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  column-gap: 20px;
  row-gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.moreart-sub-container
{
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #ccc;
  transition: all var(--transition-time);
}
.moreart-sub-container img
{
  max-width: 100%;
  height: auto;
}
.moreart-sub-container h3
{  
  color: var(--color-h);
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin: 10px 30px 50px 20px;
}
.moreart-sub-container h3 em
{  
  color: var(--color-h);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.moreart-sub-container span
{  
  position: absolute;
  right: 14px;
  bottom: 10px;  
  color: var(--color-h);
  font-size: 1.5rem;
}


/* ************************************************************************************************************ */
/* ********************************************** RESPONSIVENESS ********************************************** */
/* ************************************************************************************************************ */
@media (hover: hover)
{
  /* Page */
  section.page a:hover, section.page li a:hover, p.page a:hover
  {
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }

  /* Moreart */
  a.moreart-sub-container:hover
  {
    box-shadow: 0 0 4px #aaa;
  }
}
@media only screen and (max-width: 768px) 
{
  /* Showcase-page */
  .showcase-page-container
  {
    left: 5%;
  }
  .showcase-page-container h1
  {
    font-size: 2.0rem;
    line-height: 2.4rem;
  }

  /* Moreart */
  .moreart-container
  {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 480px) 
{
  /* Main */
  section.page h2
  {
    font-size: 1.5rem;
    line-height: 2.0rem;
    margin-bottom: 10px;
  }   

  /* Showcase-page */
  .showcase-page-container
  {
    top: 100px;
  }

  /* Moreart */
  .moreart-container
  {
    grid-template-columns: 1fr;
  }
}