/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */


/* Typography */
body {
  background-color: #f6f6f6;
  line-height: 1.3;
}
.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff; /* Beispiel-Hintergrund */
  z-index: 10; /* Sorgt dafür, dass die Leiste über anderen Elementen liegt */
}


.h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px !important;
  font-weight: 200 !important;
}
h1.big {
    font-family: 'Roboto', sans-serif;
  font-size: calc(40px + (40 - 28) * ((100vw - 320px) / (1600 - 320)));
  font-weight: 200!important;
  letter-spacing: 0.22rem;
  padding-top: 5vh;
  color: olive;
}
h2 {
  font-family: 'Open Sans ', sans-serif;
  font-size: calc(32px + (32- 24) * ((100vw - 320px) / (1600 - 320)))!important;
  font-weight: 200;
   color: #2f2f2f;
}
h2.big {
 font-family: 'Open ', sans-serif;
  font-size: calc(28px + (34- 26) * ((100vw - 320px) / (1600 - 320)));
  font-weight: 300!important;
   color: olive;
}
h2.bann {
  font-family: 'Open sans', sans-serif;
  font-size: calc(30px + (30- 26) * ((100vw - 320px) / (1600 - 320)));
  font-weight: 400!important;
   color: olive;
  margin: 0auto;
  text-align: center;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 26px !important;
}

h3.blog {
  font-family: 'Roboto', sans-serif;
  font-size: 26px !important;
}

.h3-o {
   font-family: 'Roboto', sans-serif;
   font-size: calc(32px + (32- 26) * ((100vw - 320px) / (1600 - 320)));
   color: olive!important;
    font-weight: 200 !important;
}
h3.grey{
   font-family: 'Open sans', sans-serif;
   font-size: calc(26px + (26 - 23) * ((100vw - 320px) / (1600 - 320)));
   font-weight: 300 !important;
}
h4 {
   font-family: 'Open sans', sans-serif;
   font-size: 1.3em;
   font-weight: 300 !important;
   padding-bottom: 15px;
}
h5{
   font-family: 'Roboto', sans-serif;
   font-size: 1.1em;
   font-weight: 300 !important;
   color: #1F1F1F !important;
}
p  {
   text-decoration: none !important;
   font-weight: 300!important;
   font-size: 1.02em;
}
.psm {
   text-decoration: none !important;
   font-weight: 200!important;
   font-size: 1.1em;
  margin-top: 10px;
}

p.gross  {
   font-size: 1.3em;
   font-weight: 400 !important
}
.navi{
   font-size: calc(21px + (21 - 18) * ((100vw - 320px) / (1600 - 320)));
   font-weight: 400 !important;
   font-family: 'Open sans', sans-serif; 
  color: #5F5F5F !important;
}

.fett  {
   text-decoration: none !important;
   font-weight: 600!important;
}
li  {
   margin-bottom : 0.1em;
}
strong  {
   text-decoration: none !important;
   font-weight: 600!important;
}
.olive  {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.02em;
   color: olive !important;
}
.olli {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.45em;;
   color: olive !important;
}
.olliver {
   font-family: 'Roboto', sans-serif;
   text-decoration: none !important;
   font-weight: 200!important;
   font-size: 1.25em;;
   color: olive !important;
   line-height: 1.15em;
}
.olio {
 color: olive;
}

nav li {
  font-family: 'Open sans', sans-serif;
  font-size: 1.2em !important;
  font-weight: 400!important;
}
a {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.02em;
   color: #5F5F5F !important;
}
a:link {
 color: #5F5F5F;
}
a.ov {
   text-decoration: none !important;
   font-weight: 400!important;
   font-size: 1.1em;
   color: olive !important;
}
lit {
   text-decoration: none !important;
   font-size: 1.1em;
   padding: 30px;
}
.sprung {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin: -100px;
}

.vbox {
  font-size: 1.35em;
  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.5em;
  padding: 30px;
  word-wrap: break-word;
  hyphens: auto;
}
.voxbox {
  font-size: 1.32em;
  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.26em;
  padding: 20px;
  
  word-wrap: break-word;
  hyphens: auto;

}
.vbox-sm {
  display: inline-block;
    position: relative;
  font-size: calc(19px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
max-width: 95%;
 padding-left: 30px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.blogbox {
  display: inline-block;
    position: relative;
  font-size: calc(18px + (18 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.2em;
  flex-basis: 70%; /* Definiert eine feste Breite in Prozent */
 padding-left: 30px;
 padding-right: 20px; 
  overflow-wrap: break-word;
  hyphens: auto;
}

.vbox-sm2 {
  display: inline-block;
    position: relative;
  font-size: calc(19px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
max-width: 97%;
 padding-left: 30px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sidebox {
  display: inline-block;
    position: relative;
  font-size: 1.15em;

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.3em;
 padding-left: 15px;
  overflow-wrap: break-word;
  hyphens: auto;
}
vbox-sm4 {
  display: inline-block;
    position: relative;
  font-size: calc(19px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));

  font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
max-width: 95%;
 padding-left: 30px;
  overflow-wrap: break-word;
  hyphens: auto;
}


.vbox-2 {
 font-size: 1.2em;
   font-family: 'Arial', sans-serif;
  font-weight: 300;
  line-height: 1.25em;
  padding-left: 15px;
  padding-right: 15px;
  hyphens: auto;
  word-wrap: break-word;
  position: relative;
}
.card {
  -webkit-box-shadow: 5px 5px 5px 5px rgba(234,234,234,0.75);
  box-shadow: 2px 2px 2px 2px rgba(234,234,234,0.75);
  position: relative;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 3px solid rgba(128,128,0,.125);
  border-radius: .25rem;
  container-type: inline-size;
  hyphens: auto;
}
.klappbox {
  padding: 10px;;
  word-wrap: break-word;
  hyphens: auto;
}

.leftFloat {
 float: left;
    margin-right: 15px;
}
.rightFloat {
float : right;
  margin-left: 15px;
}
.leftFloat2 {
      float: left;
  margin-top: -40px;
   margin-right: 25px;
       max-width: 200px;
  height: auto;
}
.leftFloat13 {
      float: left;
margin-right: 15px;
       max-width: 200px;
  height: auto;
}



.text-bild-container {
  /* Optional: Container für das gesamte Element, falls benötigt */
  overflow: hidden;
                    /* Wichtig: Verhindert, dass der float-Effekt den Container "zusammenfällt" */
}

.text-bild-container img {
  float: left; /* Bild links platzieren */
  height: auto; /* Höheneinhaltung, um das Seitenverhältnis beizubehalten */
}

.text-bild-container .text-inhalt {
  overflow: hidden; /* Sorgt dafür, dass der Text den umflossenen Bereich ausfüllt */
}

.text-bildr-container img {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  max-width: 180px;
  height: auto;
}

.text-bildbigr-container img {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  max-width: 400px;
  height: auto;
    overflow: hidden;
}
.text-bildbigg-container img {
  float: right;
  max-width: 110%;
  height: auto;
    overflow: hidden;
}
.links  {
align-items: left;
}  
.rechts {
align-items: right;
 float: right;  
}  
.rechts-2 {
align-items: right;
 float: right; 
  margin-right: -2%;
}  
.text-bildbig-container img {
  float: left;
  margin-right: 25px;
  margin-bottom: 0px;
  max-width: 400px;
  height: auto;
    overflow: hidden;
}
.text-bildbigr3-container img {
  float: right;
  margin-left: 15px;
  margin-top: 0px;
  margin-right: -15px;
  max-width: 230px;
  height: auto;
}
.hoch {
margin-top: -30px;
}  
space1 {
  width: auto;
  height: 1px;
  margin-top: -30px;
}
space5 {
  width: auto;
  height: 3px;
}
.space10 {
  width: auto;
  height: 10px;
}
.space20 {
  width: auto;
  height: 20px;
}
 .space30 {
  width: 100%;
  height:30px;
  position:relative;
}
.space40 {
  width: 100%;
  height:40px;
  position:relative;
}
.space50 {
  width: 100%;
  height:5vh;
   position:relative;
}
.space50w {
  width: 100%;
  height:50px;
   position:relative;
    background-color: #FFF ;
}
.space60 {
  width:100%;
  height: 14vh;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.card {
  -webkit-box-shadow: 5px 5px 5px 5px rgba(234,234,234,0.75);
  box-shadow: 2px 2px 2px 2px rgba(234,234,234,0.75);
  position: relative;
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 3px solid rgba(128,128,0,.125);
  border-radius: .25rem;
  container-type: inline-size;
  hyphens: auto;
}
 .boxtext{
  font-size: 1.2em;
  font-family: "Arial", sans-serif !important;
  font-weight: 300;
  padding: 20px 10px 10px 10px;
}
 .bigtext{
  font-size: 1.2em;
  font-family: "Open sans", sans-serif !important;
  font-weight: 300;
}
.rechts {
  text-align: right;
}
.wrapperr{
 padding-left:  40px;
}
.heben  {
  margin-top: -50px;
}

.center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.spalte-li{
  padding-left: 2em;
}
.banner {
 position: relative;
  border-top: 1px solid olive;
  border-bottom: 1px solid olive;
  padding: 10px;
  font-size: 1.8em;
  font-weight: 300;
  margin-bottom: 30px;
}
.zw {
 position: relative;
  border-top: 1px solid #cac494;
  border-bottom: 1px solid #cac494;
  background-color: #f6f6f6;
  height: 25px;
  width: 106%;
 margin-top: 20px;
 margin-bottom: 2px;
margin-left: -3%;
}
.zentriert {
  position: relative;
 margin-top:  20%;
}
.clear {
clear:both
}

.idebar {
  position: absolute; /* Positioniert die Sidebar fest am Bildschirmrand */
  top: 0; /* Positioniert die Sidebar am oberen Bildschirmrand */
  min-width: 350px; /* Legt die Breite der Sidebar fest */
  height: 100vh; /* Setzt die Höhe auf die volle Bildschirmhöhe */
  background-color: #fff; /* Hintergrundfarbe */
  padding: 15px; /* Innenabstand */
  box-sizing: border-box; /* Sorgt dafür, dass Padding und Border in der Breite enthalten sind */
  float: right;
}
.container-blog {
   display: flex;
  flex-direction: row; /* Erzeugt eine Zeile für die Spalten */
  width: 1250px; /* Beispiel: Container füllt die volle Breite aus */ 
  position: relative; /* Wichtig für die Positionierung der Sidebar */
  height: auto; /* Beispiel: Beispielhöhe des Containers */
  margin: 0 auto;
} 



/* Stile für den Hauptinhalt */
.blogtext {
  margin-right: 370px; /* Stellt sicher, dass der Inhalt nicht von der Sidebar verdeckt wird (Breite der Sidebar + Padding + kleinerer Abstand) */
max-width: 100%;
  padding: 20px; /* Innenabstand */
}


.spalte1 {
  flex-basis: 800px; /* Definiert die feste Breite der ersten Spalte */
  width: 800px; /* Alternative feste Breite */
  flex-grow: 0; /* Verhindert, dass die Spalte wächst */
}

.spalte2 {
  flex-basis: 25%; /* Definiert eine feste Breite in Prozent */
  flex-grow: 0; /* Verhindert, dass die Spalte wächst */
   padding: 15px; /* Innenabstand */
  box-sizing: border-box; /* Sorgt dafür, dass Padding und Border in der Breite enthalten sind */
}



/* General */
.logo { font-weight: 500 !important;}
.text-white {  color: #FFF !important;}
.text-muted { color: #bcbcbc !important;}
.text-mgrau { color: #969696 !important;}
.text-light { color: #cfd6e1 !important;}
.bg-white { background-color: #FFF !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-body { background-color: #f6f6f6 !important;}
.bg-grey { background-color: darkgrey;}
.bg-black { background-color: #1d242d !important;}
.bg-mgrau { background-color: #969696 !important;}
bg-mgrau { background-color: #969696 !important;}
bg-oli { background-color: #d8d3ae!important;}
.bg-bisq {background-color: bisque !important;}
.btn-success {
  background-color: #59ab6e !important;
  border-color: #56ae6c !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69bb7e;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934;}
#templatemo_main_nav a:hover { color: #69bb7e;}

/* Shop */
.shop-top-menu a:hover { color: #69bb7e !important;}


.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}

.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #59ab6e;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #59ab6e !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69bb7e;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 850px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 30rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
 /* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {} 
  } 

    .frmtx {
      --font-size: 100%;
      --font-family: inherit;
      --font-color: #4F4F4F;
      --background-color: #FFF;
      --border-color: olive;
      --border-width: 1px;
      --border-radius: 5px;
      margin: 1rem;
      min-width: 240px
    }
    .frmtx * {color: var(--font-color);font-family: var(--font-family);font-size: var(--font-size);margin: 0;padding: 0;appearance: auto;outline: none;box-sizing: border-box}
    .frmtx label {padding: 0;margin: 1em 0 .3em;display: block;line-height: 1.3}
    .frmtx label:first-child {margin-top: 0}
    .frmtx input, .frmtx textarea, .frmtx button {border: var(--border-width) solid var(--border-color);border-radius: var(--border-radius);background-color: var(--background-color)}
    .frmtx input, .frmtx textarea {width: 100%;resize: none;padding: .5em;line-height: 1.3}
    .frmtx input[name="_gotcha"] {display: none}
    .frmtx input[type="checkbox"] {display: inline;width: 1.1em;height: 1.1em;appearance: auto;margin-right: .2em}
    .frmtx button {display: block;padding: .5em 1.5em;margin: 1.5em 0 0;line-height: 1.5;font-weight: bold;cursor: pointer}
}
   }