*,
*::before,
*::after {
    box-sizing: border-box;

}


@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-Medium.eot');
    src: url('../fonts/Karla/Karla-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-Medium.woff2') format('woff2'),
        url('../fonts/Karla/Karla-Medium.woff') format('woff'),
        url('../fonts/Karla/Karla-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-SemiBold.eot');
    src: url('../fonts/Karla/Karla-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-SemiBold.woff2') format('woff2'),
        url('../fonts/Karla/Karla-SemiBold.woff') format('woff'),
        url('../fonts/Karla/Karla-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-ExtraBoldItalic.eot');
    src: url('../fonts/Karla/Karla-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-ExtraBoldItalic.woff') format('woff'),
        url('../fonts/Karla/Karla-ExtraBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-Italic.eot');
    src: url('../fonts/Karla/Karla-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-Italic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-Italic.woff') format('woff'),
        url('../fonts/Karla/Karla-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-ExtraBold.eot');
    src: url('../fonts/Karla/Karla-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-ExtraBold.woff2') format('woff2'),
        url('../fonts/Karla/Karla-ExtraBold.woff') format('woff'),
        url('../fonts/Karla/Karla-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-LightItalic.eot');
    src: url('../fonts/Karla/Karla-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-LightItalic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-LightItalic.woff') format('woff'),
        url('../fonts/Karla/Karla-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-Bold.eot');
    src: url('../fonts/Karla/Karla-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-Bold.woff2') format('woff2'),
        url('../fonts/Karla/Karla-Bold.woff') format('woff'),
        url('../fonts/Karla/Karla-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-ExtraLight.eot');
    src: url('../fonts/Karla/Karla-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-ExtraLight.woff2') format('woff2'),
        url('../fonts/Karla/Karla-ExtraLight.woff') format('woff'),
        url('../fonts/Karla/Karla-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-ExtraLightItalic.eot');
    src: url('../fonts/Karla/Karla-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-ExtraLightItalic.woff') format('woff'),
        url('../fonts/Karla/Karla-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-MediumItalic.eot');
    src: url('../fonts/Karla/Karla-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-MediumItalic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-MediumItalic.woff') format('woff'),
        url('../fonts/Karla/Karla-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-Light.eot');
    src: url('../fonts/Karla/Karla-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-Light.woff2') format('woff2'),
        url('../fonts/Karla/Karla-Light.woff') format('woff'),
        url('../fonts/Karla/Karla-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-BoldItalic.eot');
    src: url('../fonts/Karla/Karla-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-BoldItalic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-BoldItalic.woff') format('woff'),
        url('../fonts/Karla/Karla-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-Regular.eot');
    src: url('../fonts/Karla/Karla-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-Regular.woff2') format('woff2'),
        url('../fonts/Karla/Karla-Regular.woff') format('woff'),
        url('../fonts/Karla/Karla-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Karla';
    src: url('../fonts/Karla/Karla-SemiBoldItalic.eot');
    src: url('../fonts/Karla/Karla-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Karla/Karla-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Karla/Karla-SemiBoldItalic.woff') format('woff'),
        url('../fonts/Karla/Karla-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #666666;
  text-align: left;
  background-color: #fff;
}
/* Typography */
body {
  font-size: .875rem;
  font-family: "Karla", sans-serif;
  font-weight: initial;
  line-height: normal;
  
}


.firstwrapper
{
    position: relative;
    width: 100%;
    min-height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
    height: auto;
    background-color: transparent;
}


.sidemenuwrapper
{
   position: absolute;
   width: 240px;
   min-height: 100%;
   background-color: #fff;
   left: 0px;  /* when sidemenuwrapper move then sidemenu moves  too, but stays fixed visiable*/
}

.sidemenu
{
  position: fixed;
  width: inherit;
  height: 100%;
  overflow : scroll;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden; /* Hide horizontal scrollbar */ 
  pointer-events: auto;
}

.sidemenu {
  
    background: #e3d3bc;
    font-family: "Karla", sans-serif;
    font-weight: normal;
    padding: 0;

    transition: width 0.25s ease, background 0.25s ease;
    -webkit-transition: width 0.25s ease, background 0.25s ease;
    -moz-transition: width 0.25s ease, background 0.25s ease;
    -ms-transition: width 0.25s ease, background 0.25s ease;
    box-shadow: 6px 16px 31px -18px #b7bcd1;
    -webkit-box-shadow: 6px 16px 31px -18px #b7bcd1;
    -moz-box-shadow: 6px 16px 31px -18px #b7bcd1;
    -ms-box-shadow: 6px 16px 31px -18px #b7bcd1;
}
 .sidemenu .user-profile {
    margin: 2rem 0;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
}

.sidemenu .user-profile .user-image img {
    width: 79px;
    height: 79px;
    border-radius: 100%;
    margin-bottom: .625rem;
}

img {
    vertical-align: middle;
    border-style: none;
}

.main-overlay
{
    width: 0; 
    height: 0;  
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    visibility: hidden;
}

.navbar {


    position: fixed;
       background: #fff;
    transition: width 0.25s ease;
    -webkit-transition: width 0.25s ease;
    -moz-transition: width 0.25s ease;
    -ms-transition: width 0.25s ease;
    color: #000000;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    width: calc(100% - 240px);
       margin-left: 240px;
    height: 60px;
    -webkit-box-shadow: 0px 3px 21px 0px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 21px 0px rgb(0 0 0 / 10%);
 z-index: 9996;

}




.main-panel {
    width: 100%;
    height: auto;
    padding-top: 60px;

}

.contentwrapper
{

 background-color: #f4f7fa;
 
  width: calc(100% - 240px);
  margin-left: 240px;
  padding: 2.5rem 2.5rem;
  min-height: 100vh;
   overflow-x: hidden;
}


.footer {
    background: #fff;
    padding: 1.5rem 2.5rem;
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    font-size: 0.875rem;
    font-family: "Karla", sans-serif;
    font-weight: 400;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-left: 240px;
}



.orders-btn
{
  background-color: #e3d3bc;
  border: none;
  color: white;
 padding-top: 25px;
 padding-bottom: 25px;
   font-size: 16px;
 width: 100%;
  cursor: pointer;
}

/* Darker background on mouse-over */
.orders-btn:hover
{
  background-color: RoyalBlue;
}


.home-btn
{
    margin: 0;
  background-color: #786e61;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 32px;
  cursor: pointer;
  display: none;
}

/* Darker background on mouse-over */
.home-btn:hover
{
  background-color: #e3d3bc;
}

@media only screen and (max-width: 768px)
{

.home-btn
{
 
  display: block;
}


    .navbar
    { 
        width: 100%;
        margin-left: 0px;
        z-index: 9996;
    }
    .contentwrapper
    {
        width: 100%;
        margin-left: 0px;
    }

    .footer
    {
        margin-left: 0px;
    }

    .sidemenuwrapper
    {
        pointer-events: none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
        background: none !important;
        z-index: 9999;
    }

    .sidemenu
    {
        height: 100%;
    }

    .sidemenu.st-menu-close
    {
        visibility: visible;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);

    }
    .sidemenu.st-menu-open
    {
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

    }

    .main-overlay
    {
        position: absolute; 
        width: 100%;
        height: 100%;
    }

    .main-overlay.fadebg
    {
        visibility: visible;
        background-color: rgba(0,0,0,0.4); /* Black background with opacity */
        z-index: 9997;
    }

}


.collapsible {
  background-color: #e3d3bc;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;

}

.active, .collapsible:hover {
  background-color: #0063cc;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #ffffff;

}


.floated {
   float:left;
   width: 100px;
 }

 #list-second > button:first-child
 {
    margin-right:5px;
 }

#list-wrapper {
    width: 100%;
    overflow: hidden; /* will contain if #first is longer than #second */

}
#list-first {
    width:  calc(100% - 205px);
    float:left; /* add this */
}
#list-second {
    padding-top:5px;
    bottom-top:5px;
    overflow: hidden; /* if you don't want #second to wrap below #first */
}


.switch-button {
  background: rgba(1, 123, 255, 0.56);
  border-radius: 0px;
  overflow: hidden;
  width: 420px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  position: relative;
  padding-right:170px;
  position: relative;
}


.switch-button2 {

  width: 340px;
   padding-right: 170px;
}

.switch-button:before {
  content: "Alle";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0px;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

.switch-button2:before
{
  right: 0;
  width: 170px;
}

.switch-button-checkbox {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
  transform: translateX(250px);
  transition: transform 420ms linear;
}
.switch-button-checkbox2:checked + .switch-button-label2:before {
  transform: translateX(170px);
    transition: transform 300ms linear;
}
.switch-button-checkbox + .switch-button-label {
  position: relative;
  padding: 15px 0;
  display: block;
  user-select: none;
  pointer-events: none;
}
.switch-button-checkbox + .switch-button-label:before {
  content: "";
  background: #e3d3bc;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0px;
  transform: translateX(0);
  transition: transform 420ms;
}

.switch-button-checkbox2 + .switch-button-label2:before {
  transition: transform 300ms;
}

.switch-button-checkbox + .switch-button-label .switch-button-label-span {
  position: relative;
}

.vt-alert {
  padding: 20px;
  background-color: #2196F3;
  color: white;
}

.vt-closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.vt-closebtn:hover {
  color: black;
}


.card-producto
{
  width: 400px;
  background: white;
  padding: 20px;
}

@media only screen and (max-width: 768px)
{
    .card-producto
    {
        width: 300px;
    }
}


.card-producto h1 {
  font-size: 22px;
  margin-bottom: 4px;
  color: #404040;
}

.card-producto p {
  font-size: 13px;
  color: #bbb;
}

.pic-producto {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  transition: .6s ease-in;

}

.colors-producto {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;

}

.colors-producto span {
  width: 14px;
  height: 14px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;

}

.blue {
  background: #74b9ff;
}

.pink {
  background: #fab1a0;
}

.green {
  background: #55efc4;
}

.purple {
  background: #686de0;
}

.colors-producto .active:after {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #8888;
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  left: -4px;
  top: -4px;
}

.info-producto {
  display: flex;
  align-items: center;
}

.price-producto {
  color: #000;
  font-size: 26px;
  font-weight: 600;
}

.button-producto {
  margin-left: auto;
  color: #000;
  text-decoration: none;
  border: 2px solid;
  padding: 8px 24px;
  border-radius: 20px;
  transition: .4s ease-in;
}

.button-producto:hover {
  transform: scale(1.06);
}


.producto-flex {

  display: inline-flex;
  flex-wrap: wrap;
}

.producto-parent > * {
  margin: 12px 0 0 12px;
}
.producto-parent {


  margin: -12px 0 0 -12px;
  min-width: calc(100% + 12px);

}



.home-btn{
float: left; 
}

.fa-stack {
    margin-top: 2px;
 float: right;
}

.fa-stack[data-count]:after {
  position: absolute;
  right: 0%;
  top: 0%;
  content: attr(data-count);
  font-size: 40%;
  padding: 0.6em;
  border-radius: 999px;
  line-height: 0.75em;
  color: white;
  color: #786e61;
  text-align: center;
  min-width: 2em;
  font-weight: bold;
  background: white;
  border-style: solid;
}

.fa-circle {
  color: #786e61;
}

.red-cart {
  color: #786e61;
  background: white;
}




.lcontainer {

    position: absolute;
margin-top: 10px;
 
 width: 246px;


  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  text-align: center;

}

.lcontainer div > p span {
  color: red;
}


.btt{
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  font-weight: 600;
  margin: 0 10px;
  width: 100px;
  padding: 10px 0;
  box-shadow: 0 0 20px rgba(227, 211, 188, 0.2);
  transition: 0.4s;
}

.reg {
  color: white;
  background-color: rgba(227, 211, 188, 1);
}

.log {
  color: rgb(120, 110, 97);
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(227, 211, 188, 1);
}

.btt:hover {
  color: white;
  width:;
  box-shadow: 0 0 20px rgba(227, 211, 188, 0.6);
  background-color: rgba(227, 211, 188, 1);
}
.info-producto  {

}
.product-min-quantity  {
position:absolute;right:95px;
  width: 40px;
}
.button-producto:hover {
 
}