html {
  scroll-behavior: smooth;
}





/*
####################################################
C O L O R   P A L E T T E S
####################################################
*/
:root{
  --plicore-darkred: #800000;
  --plicore-light-red: rgba(128,0,0,0.5);

  --plicore-box-shadow: rgba(0,0,0,0.2);

  /* Grey Palette */
  --plicore-grey:           #606060;  /* 100% grey */
  --plicore-light-grey-10:  #7A7A7A;  /* 10% lighter */
  --plicore-light-grey-20:  #939393;  /* 20% lighter */
  --plicore-light-grey-30:  #ADADAD;  /* 30% lighter */
  --plicore-light-grey-40:  #C6C6C6;  /* 40% lighter */
  --plicore-light-grey-50:  #DFDFDF;  /* 50% lighter */
  --plicore-light-grey-60:  #F9F9F9;  /* 60% lighter */
  --plicore-dark-grey-10:   #474747;  /* 10% darker */
  --plicore-dark-grey-20:   #2D2D2D;  /* 20% darker */
  /*--plicore-light-grey-30:  #141414;  /* 30% darker */

  --fs: 0.75rem;
}





/*
####################################################
F O N T S
####################################################
*/

/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato') url(../fonts/lato-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat') url(../fonts/montserrat-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}





/*
####################################################
D E F A U L T   D E S I G N   (width < 544px | xs)
####################################################
*/
h1 { font-size: 22px; font-size: 1.38rem; margin-top: 28px; margin-top: 1.72rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
h2 { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
h3 { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
h4 { font-size: 16px; font-size: 1.00rem; margin-top: 20px; margin-top: 1.25rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
h5 { font-size: 14px; font-size: 0.88rem; margin-top: 18px; margin-top: 1.09rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
h6 { font-size: 12px; font-size: 0.75rem; margin-top: 15px; margin-top: 0.94rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
p  { font-size: 12px; font-size: 0.75rem; margin-top: 15px; margin-top: 0.94rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
a  { font-size: 12px; font-size: 0.75rem; margin-top: 15px; margin-top: 0.94rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
ul { font-size: 12px; font-size: 0.75rem; margin-top: 15px; margin-top: 0.94rem; margin-bottom: 4px; margin-bottom: 0.25rem; }





/* *** TABLE *** */
.table td, .table th {
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: normal;
}





body {
  font-family:    Lato;
  line-height:    1.8;
  color:          var(--plicore-grey);
}





h1 {
  font-family:    Lato;
  text-transform: uppercase;
  color:          var(--plicore-darkred);
}





h2 {
  font-family:    Lato;
  color:          var(--plicore-grey);
}





h3 {
  font-family:    Lato;
  color:          var(--plicore-grey);
}





h4 {
  font-family:    Lato;
  color:          var(--plicore-grey);
}





h5 {
  font-family:    Lato;
  color:          var(--plicore-grey);
}





h6 {
  font-family:    Lato;
  color:          var(--plicore-grey);
}





p {
  font-family:    Lato;
  color:          var(--plicore-grey);
}





/* *** PLAIN TEXTBODY WITHOUTH MARGINS *** */
.textbody-plain {
  margin-top:     0px;
  margin-top:     0rem;
  margin-bottom:  0px;
  margin-bottom:  0rem;
  text-align:     justify;
  color:          var(--plicore-grey);
}





/* *** NAVIGATION BAR / MENU BAR *** */
.navbar
{
  z-index: 9999;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid;
  background-color: white;
  border-bottom-color: var(--plicore-darkred);
}





.navbar-toggler
{
  border: 1px solid;
  border-color: var(--plicore-darkred);
  fill: var(--plicore-darkred);
}





.navbar-toggler:hover {
  border-color: white;
  fill: white;
  background-color: var(--plicore-light-red);
  transition: box-shadow 0.3s;
  box-shadow: 3px 3px 15px var(--plicore-grey);   /* offset-x | offset-y | blur-radius | color */
}





.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(128, 0, 0, 1.0)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}





.navbar .nav-item
{
  margin-left: 40px;
  margin-left: 2.5rem;
  margin-right: 40px;
  margin-right: 2.5rem;
  color: var(--plicore-darkred);
}





.nav-link {
  color: var(--plicore-darkred);
}





.nav-link:hover {
  color: var(--plicore-darkred);
  background-color: var(--plicore-light-grey-60);
}





.dropdown-menu {
  background-color: var(--plicore-light-grey-60);
}





.dropdown-item {
  color: var(--plicore-darkred);
  background-color: var(--plicore-light-grey-60);
}
/* *** END NAVIGATION BAR / MENU BAR *** */





/* *** CAROUSEL *** */
/* --- carousel control container --- */
.carousel-control-prev
{
  margin-left: -10px;
  padding: 0px;
  background-color: transparent;
}





.carousel-control-prev > .left-arrow
{
  width: 8pt;
  height: 8pt;
  margin: 0px;
  padding: 0px;
  fill: var(--plicore-light-red);
}





.carousel-control-prev:hover > .left-arrow
{
  fill: var(--plicore-darkred);
  background-color: transparent;
}





.carousel-control-next
{
  margin-right: -10px;
  padding: 0px;
  background-color: transparent;
}





.carousel-control-next > .right-arrow
{
  width: 8pt;
  height: 8pt;
  margin: 0px;
  padding: 0px;
  fill: var(--plicore-light-red);
}





.carousel-control-next:hover > .right-arrow
{
  fill: var(--plicore-darkred);
}





/* --- carousel indicators position --- */
.carousel-indicators
{
  position: relative;
  padding: 0;
  margin: 0;
  background-color: transparent;
}





/* --- carousel indicators bar-style --- */
.carousel-indicators li {
  width: 15px;
  height: 2px;
  border-radius: 0%;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0.4;
  background-color: var(--plicore-light-grey-50);
}





/* --- carousel active indicator highlight style --- */
.carousel-indicators li.active
{
  opacity: 1.0;
  background-color: var(--plicore-darkred);
}




/* --- carousel caption block --- */
.carousel-caption {
  position:         relative;
  left:             auto;
  right:            auto;
  margin-top:       0;
  margin-bottom:    0;
  padding-top:      0;
  padding-bottom:   0;
  background-color: transparent;
  opacity:          1.0;
}





.carousel-caption p {
  padding:0;
  margin-bottom: -20px;
  color: var(--plicore-grey);
  opacity: 1.0;
font-size: 14px;  /* h5 */
font-size: 0.88rem;
}
/* *** END CAROUSEL *** */





/* *** CARD DECK *** */
.card-deck
{
  margin-top: 50px;
  margin-bottom: 50px;
}





.card
{
  margin-top: 25px;
  border: none;
  transition: box-shadow 0.5s;
  background-color: var(--plicore-light-grey-60);
  min-width: 20rem;
}





.card:hover
{
  box-shadow: 5px 0px 40px var(--plicore-box-shadow);
}





.card-header
{
  border: none;
  border-radius: 0;
  background-color: var(--plicore-darkred);
}





.card-body
{
  border: none;
  color: var(--plicore-grey);
  background-color: transparent;
}





.card-title
{
  color: var(--plicore-darkred);
}





.card-text {
  text-align: left;
}





.card-footer
{
  border: none;
}





.card-footer .btn {
  margin: 15px 0;
  color: var(--plicore-light-grey-60);
  background-color: var(--plicore-light-red);
}





.card-footer .btn:hover
{
  transition: box-shadow 0.5s;
  box-shadow: 5px 0px 40px var(--plicore-box-shadow);
  background-color: var(--plicore-darkred);
}
/* *** END CARD *** */





/* *** PRODUCT DESCRIPTION CARDS *** */
.productcard-left
{
  margin-top: 25px;
  border: none;
  background-color: #EEEEEE;
  min-width: 20rem;
}

.productcard-left:hover {
  box-shadow: none;
}

.productcard-right
{
  margin-top: 25px;
  border: none;
  transition: box-shadow 0.5s;
  background-color: #E0E0E0;
  min-width: 20rem;
}

.productcard-right:hover {
  box-shadow: none;
}
/* *** END PRODUCT DESCRIPTION CARDS *** */




/* *** FOOTER *** */
.footer {
  height: 100px;
  border-top: 1px solid;
  border-top-color: var(--plicore-darkred);
}





.footer-text {
  margin-top: 40px;
  color: var(--plicore-grey);
  font-size: 9px;
  font-size: 0.56rem;
}
/* *** END FOOTER *** */





/* *** MAP *** */
.map-container {
  width: 100%;
  height: 360px;
  margin-top: 50px;
  border: none;
}





.map {
  width: 100%;
  height: 350px;
  margin-top: 4px;
  pointer-events: none;
  border: 1px solid black;
}
/* *** END MAP *** */





/* *** IMPRESSUM SUB-PAGE *** */
.impressum {
  text-align: justify;
  color: var(--plicore-grey);
}
/* *** END IMPRESSUM *** */





/* *** PRIVACY SUB-PAGE *** */
.privacy {
  text-align: justify;
  color: var(--plicore-grey);
}
/* *** END PRIVACY *** */





/* *** ARROWS *** */
.left-arrow
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-light-red);
  vertical-align: bottom;
}





.left-arrow:hover
{
  fill: var(--plicore-light-red);
}





.right-arrow
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-light-red);
  vertical-align: bottom;
  transform: rotate(0.5turn);
}





.right-arrow:hover
{
  fill: var(--plicore-darkred);
}





.up-arrow
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-light-red);
  vertical-align: bottom;
  transform: rotate(0.25turn);
}





.up-arrow:hover
{
  fill: var(--plicore-darkred);
}





.down-arrow
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-light-red);
  vertical-align: bottom;
  transform: rotate(0.75turn);
}





.down-arrow:hover
{
  fill: var(--plicore-darkred);
}
/* *** END ARROWS *** */





/* *** ICONS *** */
.icon-map-marker
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-darkred);
  vertical-align: bottom;
}





.icon-phone
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-darkred);
  vertical-align: bottom;
}





.icon-mail
{
  width: calc(1.5 * var(--fs));
  height: calc(1.5 * var(--fs));
  fill: var(--plicore-darkred);
  vertical-align: bottom;
}
/* *** END ICONS *** */





/*
####################################################
S M A L L   D E V I C E S     (width: 544px - 768px)
(col-sm)
(landscape phones)
####################################################
*/
@media only screen and (min-width: 544px){
  h1 { font-size: 24px; font-size: 1.50rem; margin-top: 30px; margin-top: 1.88rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h2 { font-size: 21px; font-size: 1.31rem; margin-top: 26px; margin-top: 1.64rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h3 { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h4 { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h5 { font-size: 16px; font-size: 1.00rem; margin-top: 20px; margin-top: 1.25rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h6 { font-size: 14px; font-size: 0.88rem; margin-top: 18px; margin-top: 1.09rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  p  { font-size: 14px; font-size: 0.88rem; margin-top: 18px; margin-top: 1.09rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  a  { font-size: 14px; font-size: 0.88rem; margin-top: 18px; margin-top: 1.09rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  ul { font-size: 14px; font-size: 0.88rem; margin-top: 18px; margin-top: 1.09rem; margin-bottom: 4px; margin-bottom: 0.25rem; }





  /* *** TABLE *** */
  .table td, .table th {
    font-size: 14px;
    font-size: 0.88rem;
  }





  /* --- carousel indicators position --- */
  .carousel-indicators
  {
    /* background-color: blue; */
  }





  /* --- carousel indicators bar-style --- */
  .carousel-indicators li {
    width: 15px;
    height: 2px;
  }





  .carousel-caption p {
    font-size: 16px;
    font-size: 1.00rem;
  }
}






/*
####################################################
M E D I U M   D E V I C E S   (width: 768px - 992px)
(col-md)
(tablet devices)
(The navbar toogle appears at this breakpoint)
####################################################
*/
@media only screen and (min-width: 768px) {
  h1 { font-size: 30px; font-size: 1.88rem; margin-top: 38px; margin-top: 2.34rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h2 { font-size: 26px; font-size: 1.63rem; margin-top: 33px; margin-top: 2.03rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h3 { font-size: 23px; font-size: 1.44rem; margin-top: 29px; margin-top: 1.80rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h4 { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h5 { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h6 { font-size: 16px; font-size: 1.00rem; margin-top: 20px; margin-top: 1.25rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  p  { font-size: 16px; font-size: 1.00rem; margin-top: 20px; margin-top: 1.25rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  a  { font-size: 16px; font-size: 1.00rem; margin-top: 20px; margin-top: 1.25rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  ul { font-size: 16px; font-size: 1.00rem; margin-top: 20px; margin-top: 1.25rem; margin-bottom: 4px; margin-bottom: 0.25rem; }





  /* *** TABLE *** */
  .table td, .table th {
    font-size: 16px;
    font-size: 1.00rem;
  }





  /* *** CAROUSEL *** */
  /* --- carousel control container --- */
  .carousel-control-prev
  {
    margin-left: 0px;
    width: 70px;
  }





  .carousel-control-prev > .left-arrow
  {
    width: 15pt;
    height: 15pt;
  }





  .carousel-control-next
  {
    margin-right: 0px;
    width: 70px;
  }





  .carousel-control-next > .right-arrow
  {
    width: 15pt;
    height: 15pt;
  }





  /* --- carousel indicators position --- */
  .carousel-indicators
  {
    /* background-color: green; */
  }





  /* --- carousel indicators bar-style --- */
  .carousel-indicators li {
    width: 25px;
    height: 3px;
  }





  .carousel-caption p {
    font-size: 18px;  /* h5 */
    font-size: 1.13rem;
  }





  .footer-text {
    font-size: 15px; /* 0.75 * p */
    font-size: 0.94rem;
  }





  /* *** IMPRESSUM *** */
  .impressum {
    text-align: justify;
    color: var(--plicore-grey);
  }
  /* *** END IMPRESSUM *** */





  /* *** PRIVACY *** */
  .privacy {
    text-align: justify;
    color: var(--plicore-grey);
  }
  /* *** END PRIVACY *** */
}





/*
####################################################
L A R G E   D E V I C E S     (width: 992px - 1200px)
(col-ld)
(small desktops)
####################################################
*/
@media only screen and (min-width: 992px) {
  h1 { font-size: 38px; font-size: 2.38rem; margin-top: 48px; margin-top: 2.97rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h2 { font-size: 34px; font-size: 2.13rem; margin-top: 43px; margin-top: 2.66rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h3 { font-size: 30px; font-size: 1.88rem; margin-top: 38px; margin-top: 2.34rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h4 { font-size: 26px; font-size: 1.63rem; margin-top: 33px; margin-top: 2.03rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h5 { font-size: 22px; font-size: 1.38rem; margin-top: 28px; margin-top: 1.72rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h6 { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  p  { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  a  { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  ul { font-size: 18px; font-size: 1.13rem; margin-top: 23px; margin-top: 1.41rem; margin-bottom: 4px; margin-bottom: 0.25rem; }






  /* *** TABLE *** */
  .table td, .table th {
    font-size: 18px;
    font-size: 1.13rem;
  }





  /* *** CAROUSEL *** */
  /* --- carousel control container --- */
  .carousel-control-prev
  {
    margin-left: 0px;
    width: 80px;
  }





  .carousel-control-prev > .left-arrow
  {
    width: 20pt;
    height: 20pt;
  }





  .carousel-control-next
  {
    margin-right: 0px;
    width: 80px;
  }





  .carousel-control-next > .right-arrow
  {
    width: 20pt;
    height: 20pt;
  }





  /* --- carousel indicators position --- */
  .carousel-indicators
  {
    /* background-color: cyan; */
  }





  /* --- carousel indicators bar-style --- */
  .carousel-indicators li {
    width: 30px;
    height: 4px;
  }





  .carousel-caption p {
    font-size: 22px;    /* h5 */
    font-size: 1.38rem;
  }





  .footer-text {
    font-size: 14px;
    font-size: 0.88rem;
  }





  /* *** IMPRESSUM *** */
  .impressum {
    text-align: justify;
    color: var(--plicore-grey);
  }
  /* *** END IMPRESSUM *** */





  /* *** PRIVACY *** */
  .privacy {
    text-align: justify;
    color: var(--plicore-grey);
  }
  /* *** END PRIVACY *** */
}





/*
####################################################
E X T R A   L A R G E   D E V I C E S
(width: >= 1200px)
(col-xl)
(large desktops)
####################################################
*/
@media (min-width: 1200px) {
  h1 { font-size: 44px; font-size: 2.75rem; margin-top: 55px; margin-top: 3.44rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h2 { font-size: 38px; font-size: 2.38rem; margin-top: 48px; margin-top: 2.97rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h3 { font-size: 32px; font-size: 2.00rem; margin-top: 40px; margin-top: 2.50rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h4 { font-size: 28px; font-size: 1.75rem; margin-top: 35px; margin-top: 2.19rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h5 { font-size: 24px; font-size: 1.50rem; margin-top: 30px; margin-top: 1.88rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  h6 { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  p  { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  a  { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }
  ul { font-size: 20px; font-size: 1.25rem; margin-top: 25px; margin-top: 1.56rem; margin-bottom: 4px; margin-bottom: 0.25rem; }





  /* *** TABLE *** */
  .table td, .table th {
    font-size: 20px;
    font-size: 1.25rem;
  }





  .navbar-brand {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;

  }





  /* *** CAROUSEL *** */
  /* --- carousel control container --- */
  .carousel-control-prev
  {
    margin-left: 0px;
    width: 80px;
  }





  .carousel-control-prev > .left-arrow
  {
    width: 20pt;
    height: 20pt;
  }





  .carousel-control-next
  {
    margin-right: 0px;
    width: 80px;
  }





  .carousel-control-next > .right-arrow
  {
    width: 20pt;
    height: 20pt;
  }





  /* --- carousel indicators position --- */
  .carousel-indicators
  {
    /* background-color: magenta; */
  }





  /* --- carousel indicators bar-style --- */
  .carousel-indicators li {
    width: 30px;
    height: 4px;
  }





  .carousel-caption p {
    font-size: 24px;    /* h5 */
    font-size: 1.50rem;
  }





  .footer-text {
    font-size: 15px; /* 0.75 * p */
    font-size: 0.94rem;
  }





  /* *** IMPRESSUM *** */
  .impressum {
    text-align: justify;
    color: var(--plicore-grey);
  }
  /* *** END IMPRESSUM *** */





  /* *** PRIVACY *** */
  .privacy {
    text-align: justify;
    color: var(--plicore-grey);
  }
  /* *** END PRIVACY *** */

}