@charset "utf-8";
/* CSS Document */

/* Burger-Item */
#burgerButton{
    position:fixed;
    right:20px;
    top:20px;
    line-height:30px;      
    cursor: pointer;
    font-size:1.4em;
    float:left;
    width:48px;
    display:none;
    border-radius: 3px;
    padding:4px;
    background-color: var(--cicolor2);
    z-index: 9999;
}
#nav-icon {
  display:inline-block;
  vertical-align:middle;
  width: 40px;
  height: 30px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  margin-right:20px;
}
#nav-icon span {
  display: block;
  position: absolute;
  height:6px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 11px;
}

#nav-icon span:nth-child(4) {
  top: 23px;
}

#nav-icon.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}
/* BURGER ENDE */

@media only screen 
and (max-width : 1350px) {
    :root {
      --websiteSize: 100%;
    }
    .webseiteSize{
        padding-left:20px;
        padding-right: 20px;
    }
}
@media only screen 
and (max-width : 1100px) {
    nav#mainNav ul li ul li a{
        font-size:0.6em;
    }
}
@media only screen 
and (max-width : 990px) {
    .logoWrapper{
        width:30vw;
    }
}
@media only screen 
and (max-width : 800px) {
    .flex_oneLine{
        flex-wrap: wrap;
    }
    .leftRow, .rightRow, article.sliderText, .slickSliderWrapper, .rightRow img, a.blogEntry img, a.productEntry img, a.blogEntry div{
        width:100%;
        height: auto;
        align-self: flex-start;
    }
    a.blogEntry{
        flex-wrap: wrap;
    }
    #burgerButton{
        display: block;
    }
    nav#mainNav ul{
        display: none;
    }
    a#phoneCall{
        top:70px;
    }
    
    header{
        height: auto;
    }
    .logoWrapper{
        width:240px;
        height: auto;
        padding-top:45px;
    }
    a#phoneCall{
        right:inherit;
        top:20px;
    }
    .flex_oneLine{
        flex-wrap: wrap;
    }
    footer .flex_oneLine div{
        margin-bottom: 2em;
    }
    footer #smFooter{
        text-align: center;
        margin-bottom: 0px;
    }
    
    nav#mainNav ul li ul{     
        position: relative;
        font-size:1.3em;
    }    
    .w50{
        width:100%;
    }
}
@media only screen 
and (max-width : 400px) {
    :root {
      --websiteSize: 350px;
    }
    header{
        justify-content: flex-start;
    }
    a#phoneCall{
        margin-left:20px;
    }
    
}