/* ******************************************* Slideshow ******************************************* */
.slider
{
  max-width: 800px;
  position: relative;
  margin: 0 auto;
}
.slider img
{
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: none;
}
.slider img:first-of-type
{
  display: block;
}
.prevButton, .nextButton
{
  position: absolute;
  top: 70%;
  width: 30px;
  height: 40px;
  background-color: transparent;
  color:var(--color-h);
  border: none;
  font-weight: bold;
  font-size: 2.0rem;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.prevButton
{
  left: 10px;
}
.nextButton
{
  right: 10px;
}


/* ******************************************* Shortdesc ******************************************* */
.section-shortdesc
{  
  width: 100%;
}
.section-shortdesc h2
{
  text-align: center;
  color: var(--color-h);
  font-size: 2.4rem;
  line-height: 2.8rem;
  padding: 0 20px;
  margin-bottom: 50px;
}
.shortdesc-container
{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.shortdesc-container p
{  
  text-align: center;
  padding: 0 20px;
}


/* ******************************************* Features ******************************************* */
.section-features
{  
  width: 100%;
  padding: 50px 20px;
  margin-bottom: 100px;
  background-color: #eee;
}
.section-features h2
{
  text-align: center;
  color: var(--color-h);
  font-size: 2.4rem;
  line-height: 2.8rem;
  margin-bottom: 50px;
}
.features-container
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-content: center;
  column-gap: 40px;
  row-gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.features-sub-container
{ 
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: relative;
}
.features-sub-container h3
{  
  color: var(--color-h);
  font-size: 1.4rem;
  font-weight: 900;
  margin: 10px 0 20px 0;
}
.features-sub-container p
{  
  margin-bottom: 10px;
}
.features-sub-container a, .features-sub-container a strong, .features-sub-container a em
{
  color: var(--color-link);
  font-weight: 700;
}


/* ******************************************* Applications ******************************************* */
.section-apps
{  
  width: 100%;
  padding: 50px 20px 30px 20px;
  margin-bottom: 100px;
  background-color: #eee;
}
.section-apps h2
{
  text-align: center;
  color: var(--color-h);
  font-size: 2.4rem;
  line-height: 2.8rem;
  margin-bottom: 50px;
}
.apps-container
{
  max-width: 1200px;
  margin: 0 auto;
}
.apps-sub-container
{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}
.apps-sub-container:nth-of-type(odd) img
{
  grid-area: 1 / 1 / 2 / 2;
}
.apps-sub-container:nth-of-type(even) img
{
  grid-area: 1 / 2 / 2 / 3;
}
.apps-sub-container img
{
  justify-self: center;
  width: 200px;
  height: auto;
  margin: 20px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.apps-desc-container
{ 
  padding: 30px 20px;
  position: relative;
}
.apps-desc-container h3
{  
  color: var(--color-h);
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 20px;
}
.apps-desc-container p
{  
  margin-bottom: 30px;
}
.apps-desc-container a
{
  display: inline-block;
  position: absolute;
  right: 10px;
  bottom: 15px;
  font-size: 1.5rem;
  color: var(--color-h);
  transition: all var(--transition-time);
}


/* ************************************************ Accordion ************************************************ */
.section-accordion
{  
  width: 100%;
  padding: 0 20px;
  margin-bottom: 100px;
}
.section-accordion h2
{
  text-align: center;
  color: var(--color-h);
  font-size: 2.4rem;
  line-height: 2.8rem;
  margin-bottom: 50px;
}
.accordion-container
{  
  max-width: 1200px;
  margin: 0 auto 10px auto;
}
.accordion-head-container
{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: pointer;
  border: 1px solid var(--color-h);
  transition: all var(--transition-time);
}
.accordion-head-container svg
{
  width: 30px;
  height: auto;
  margin: 10px 20px;
}
.accordion-head-container svg polygon
{
  fill: var(--color-h);
  transition: all var(--transition-time);
}
#ang-up-tech, #ang-up-sys, #ang-up-set, #ang-up-dl
{
  display: none;
}
.accordion-head-container h3
{
  color: var(--color-h);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 10px 20px;
  transition: all var(--transition-time);
}
.accordion-body-container
{
  display: none;
  padding: 20px;
  margin-bottom: 30px;
}
.accordion-body-container p
{
  padding: 10px 0 0 0;
}
.accordion-body-container a, .accordion-body-container a strong, .accordion-body-container a em
{
  color: var(--color-link);
  font-weight: 700;
}


/* ******************************************* Download ******************************************* */
.download-container
{
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  justify-items: start;
  column-gap: 20px;
  row-gap: 20px;
  max-width: 1200px;
  margin: 30px auto;
}
.download-sub-container
{
  width: 220px;
  position: relative;
  border: 1px solid var(--color-h);
  transition: all var(--transition-time);
}
.download-sub-container img 
{
  width: 45px;
  height: auto;
  position: absolute;
  top: 9px;
  left: 10px;
  transition: all var(--transition-time);
}
.download-sub-container img.hov
{
  opacity: 0;
}
.download-sub-container h4 
{
  color: var(--color-h);
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-family-p);
  padding: 15px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 50px;
  transition: all var(--transition-time);
}


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


/* ******************************************* Library ******************************************* */
.liblink-container
{
  background-image: url("../images/products/products-library-background.webp");
  background-position: center;
  background-size: cover;
  max-width: 100%;
  margin-bottom: 100px;
}
.liblink-sub-container
{
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: center;
  align-items: center;
  column-gap: 50px;
  row-gap: 50px;
  max-width: 1200px;
  padding: 200px 40px;
  margin: 0 auto;
}
.liblink-sub-container img
{
  width: 250px;
  height: auto;
}
.liblink-sub-container p
{
  color: #fff;
  font-size: 1.2rem;
}


/* ******************************************* Call-to-action ******************************************* */
.call-to-action
{  
  width: 100%;
  background-color: var(--color-main);
  padding: 70px 20px;
  margin-bottom: 120px;
}
.call-to-action-container
{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  row-gap: 20px;
  max-width: 1000px;
  margin: 0 auto;  
}
.call-to-action-container p
{  
  justify-self: start;
  color: #fff;
  margin: 50px 20px;
  font-size: 1.6rem;
  line-height: 2.8rem;
  font-weight: 700;
  font-family: var(--font-family-h);
}
.call-to-action-container a
{  
  justify-self: center;
  margin: 0 20px;
}


/* ************************************************************************************************************ */
/* ********************************************** RESPONSIVENESS ********************************************** */
/* ************************************************************************************************************ */
@media (hover: hover)
{
  /* Features */
  .features-sub-container a:hover
  {    
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }

  /* Accordion */
  .accordion-head-container:hover
  {
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
    border-image: none;
  }
  .accordion-head-container:hover svg polygon
  {
    fill: #fff;
  }
  .accordion-head-container:hover h3
  {
    color: #fff;
  }
  .accordion-body-container a:hover
  {
    text-decoration: underline;
    text-decoration-thickness: var(--link-line-thickness);
    text-underline-offset: var(--link-line-offset);
  }

  /* Download */
  .download-container a:hover
  {
    text-decoration: none;
  }
  .download-sub-container:hover
  {
    background-color: var(--color-main);
    border: 1px solid var(--color-main);
  }
  .download-sub-container:hover img.norm
  {
    opacity: 0;
  }
  .download-sub-container:hover img.hov
  {
    opacity: 1;
  }
  .download-sub-container:hover h4
  {
    color: #fff;
  }

  /* moreprod */
  .moreprod-sub-container:hover
  {
    box-shadow: 0 0 4px #aaa;
  }
}
@media only screen and (max-width: 768px) 
{
  /* Features */
  .features-container
  {
    grid-template-columns: 1fr 1fr; 
  } 

  /* Apps */
  .apps-sub-container
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .apps-sub-container:nth-of-type(odd) img
  {
    grid-area: 1 / 1 / 2 / 2;
  }
  .apps-sub-container:nth-of-type(even) img
  {
    grid-area: 1 / 1 / 2 / 2;
  }
  .apps-sub-container img
  {
    margin: 30px 20px 0 20px;
  }
  .apps-desc-container
  { 
    padding: 30px 0;
  }
  
  /* Download */
  .download-container
  {
    grid-template-columns: 1fr;
  }

  /* Liblink */
  .liblink-sub-container
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .liblink-sub-container p
  {
    text-align: center;
  }

  /* Call-to-action */
  .call-to-action-container
  {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .call-to-action-container p
  {  
    grid-area: 1 / 1 / 2 / 2;
    justify-self: center;
    text-align: center;
    margin: 40px 30px 20px 30px;
  }
  .call-to-action-container a
  {  
    justify-self: center;
    margin: 0 30px 40px 30px;
  }
}
@media only screen and (max-width: 480px) 
{
  /* Slideshow */
  .slider
  {
    padding: 30px 0;
  }

  /* Features */
  .features-container
  {
    grid-template-columns: 1fr; 
  }  

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