html, body {max-width: 100%;overflow-x: hidden;}


:focus {outline: 0 !important;box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;}


header #petaloheader.open {margin-top: -100px !important;}
header {z-index: 1000;position: relative;}
main#content {z-index:100; margin-top: -100px;}

/* PRODUCT MENU */
.menuwrapper {padding-top: 40px;}
.menuwrapper a {font-size: 20px;line-height: 24px;font-weight: 400;color: #000;}
.menuwrapper a:hover {font-weight: 600;}


/*  PRODUCT MENU WRAPPER */
.vertical-product-menu {list-style-type: none;padding: 0;}
.vertical-product-menu li {display: flex;align-items: center;margin-bottom: 10px;}
.vertical-product-menu li a {margin-right: 10px; /* Space between text and image */}
.vertical-product-menu li img {max-width: 50px; /* Adjust image size */height: auto;}
.vertical-product-menu .menu-image {display: none; /* Hide the menu images by default */}



/* BURGER MENU START */
#petaloburger {
  position: fixed;
  opacity: 0; /* Initially hidden */
  top: 0px;
  right: calc((100vw - 1600px) / 2);
  z-index: 9999999;
  transform: scale(1);
  transition: opacity 0.5s ease-in-out; /* Smooth fade-in effect */
}

a.burgermenu {transition: all 1s ease-in-out;}
/* a.burgermenu:hover {transition: all .2s ease-in-out;transform: scale(1.2);}*/
.burgermenu {position: fixed;right: 30px;top: 25px;z-index: 999999;width: 50px;height: 50px;cursor: pointer;}
.burgermenu:hover .middleburger{width: 30px;}
.burgermenu:hover .closeburger:after {width:30px}
.burgercontainer {
    position: absolute;
    background-color: none;
    border-radius: 50%;
    border: solid 1px #000000;
    width: 50px;
    height: 50px;
    transition: width .3s;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
.burgercontainer.open {background-color: none;}
.closeburger {position: absolute;top: 9px;left: 8px;height: 30px;width: 30px;}
.middleburger, 
.closeburger:before, 
.closeburger:after {
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #000000;
  border-radius: 1px;
}

.middleburger{width: 30px;}
.closeburger:after {width:30px;}
.middleburger {top: 50%;margin-top: -2px;transition: transform ease (500ms);}
.closeburger:before {content: '';top: 5px;transition: top 500ms ease 500ms, transform 500ms ease;}
.closeburger:after {
  content: '';
  bottom: 7px;
  transition: bottom 500ms ease 500ms, transform 500ms ease;
}
.open .closeburger .middleburger {
  width:30px;
  transform: rotate(225deg);
  transition: transform 500ms ease 500ms;
}
.open .closeburger:before {
  top: 13px;
  transform: rotate(225deg);
  transition: top 500ms ease, transform 500ms ease 500ms;
}
.open .closeburger:after {
  width:30px;
  bottom: 15px;
  transform: rotate(-225deg);
  transition: bottom 500ms ease, transform 500ms ease 500ms;
}
/* BURGER MENU END */

/* LOGO */
body.home #petalo path {
  fill: white; /* Change the letter color to white */
  transition: fill 0.3s ease; /* Add a smooth transition for the fill color */
}
/* Targeting individual letters */
body.home #petalo #p,
body.home #petalo #e,
body.home #petalo #t,
body.home #petalo #a,
body.home #petalo #l,
body.home #petalo #o {
    transition: fill 0.3s ease; /* Smooth transition for each letter */
}

/* Change color when the .scrolled class is added to body */
body.home.scrolled #petalo path {
    fill: black; /* Change all letters to black when scrolled */
}

/* You can also target specific letters individually with transitions */
body.home.scrolled #petalo #o {
    fill: black; /* Specific change for the letter 'o' when scrolled */
}

/* DEFAULT */

body header .elementor-sticky {background-color: rgba(255,255,255,0);transition: background-color 0.3s ease;}
body #petaloheader #telephone a{color:#000000;}
body .burgercontainer {border: solid 2px #000000;}
body .closeburger:after {background-color: #000000;}
body .middleburger, 
body .closeburger:before, 
body .closeburger:after {background-color: #000000;}
body .burgermenu:hover .burgercontainer.open::after {color:#000000;}
body .e-n-menu-item .e-n-menu-title-text {color:#000000!important;}
body .e-n-menu-item:hover .e-n-menu-title-text {color: #000000!important;}
body .neg {opacity:0;}
body .pos-small {opacity:0;}
body .pos {opacity:1;}

body.scrolled header .elementor-sticky {background-color: rgba(255,255,255,1);}
body.scrolled .pos-small {opacity:1;}
body.scrolled .pos {opacity:0;}


/* HOME PAGE */
body.home header .elementor-sticky {background-color: rgba(255,255,255,0);transition: background-color 0.3s ease;}

body.home #petaloheader #telephone a{color:#ffffff;}
body.home .burgercontainer {border: solid 2px #ffffff;}
body.home .closeburger:after {background-color: #ffffff;}
body.home .middleburger, 
body.home .closeburger:before, 
body.home .closeburger:after {background-color: #ffffff;}
body.home .burgermenu:hover .burgercontainer.open::after {color:#ffffff;}
body.home .e-n-menu-item:hover {background-color: #ffffff;}
body.home .e-n-menu-item .e-n-menu-title-text {color:#ffffff!important;}
body.home .e-n-menu-item:hover .e-n-menu-title-text {color: #000000!important;}
body.home .neg {opacity:1;}
body.home .pos {opacity:0;}
body.home .pos-small {opacity:0;}

body.home.scrolled header .elementor-sticky {background-color: rgba(255,255,255,1);}
body.home.scrolled #petaloheader #telephone a{color:#000000;}
body.home.scrolled .burgercontainer {border: solid 2px #000000;}
body.home.scrolled .closeburger:after {background-color: #000000;}
body.home.scrolled .middleburger, 
body.home.scrolled .closeburger:before, 
body.home.scrolled .closeburger:after {background-color: #000000;}
body.home.scrolled .burgermenu:hover .burgercontainer.open::after {color:#000000;}
body.home.scrolled .e-n-menu-item .e-n-menu-title-text {color:#000000!important;}
body.home.scrolled .e-n-menu-item:hover .e-n-menu-title-text {color: #000000!important;}
body.home.scrolled .neg {opacity:0;}
body.home.scrolled .pos {opacity:0;}
body.home.scrolled .pos-small {opacity:1;}

/* hide menu caret on mega menu */
#menubar-160 button {display: none !important;}


nav .e-n-menu-heading div.mega-menu-wrapper {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

/* HOVER ON TEXT FIELDS */
nav.elementor-nav-menu--main li a,
.menu-item-products .elementor-widget-heading {
    transition: transform 0.3s ease; /* Adds the smooth easing effect */
}

nav.elementor-nav-menu--main li:hover a,
.menu-item-products:hover .elementor-widget-heading {
    transform: translateX(10px); /* Moves the text 10px to the right on hover */
}


/* KNAPPER GENERELT */
a.elementor-button.elementor-button-link.elementor-size-sm {min-width: 240px!important;}

/* PRODUCT SPECIFICATIONS */

/* Set .spec-wrapper to 100% width */
.spec-wrapper {
  width: 100%;
  min-width: 500px;
  padding: 80px 0;
}

.spec-wrapper .spec-heading {
 padding:0 0 20px 0;
}

/* Set .spec-list to 100% width and add bottom border */
.spec-wrapper .spec-list {
  width: 100%;
  border-bottom: 1px solid #000;
  padding-bottom: 0px; /* Optional: Add some padding at the bottom */
  margin-bottom: 10px; /* Optional: Add space below each spec-list item */
}

/* Align .spec-title and .spec-data side by side with specified widths */
.spec-wrapper .spec-title {
  width: 25%;
  font-size: 20px;
  float: left;
}

.spec-wrapper .spec-data {
  width: 75%;
  font-size: 18px;
  float: left;
}

/* Clear floats after each spec-list */
.spec-wrapper .spec-list::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the download button */
.spec-wrapper .button-wrapper {
  padding: 10px 0px 10px 0px;
}

.spec-wrapper .elementor-button {
  border-radius: 30px;
  background:none;
  padding: 15px 45px 15px 30px;
  border: 1px solid #000; /* Optional: add border color */
}

.spec-wrapper a.elementor-button {
    background-color: #00000000;
    font-family: var(--e-global-typography-4996f62-font-family), Sans-serif;
    font-size: var(--e-global-typography-4996f62-font-size);
    line-height: var(--e-global-typography-4996f62-line-height);
    fill: var(--e-global-color-dfe1cb7);
    color: var(--e-global-color-dfe1cb7);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-dfe1cb7);
    border-radius: 30px 30px 30px 30px;
    padding: 15px 45px 15px 30px;
}

a.spec-btn:hover{
  background-color: #C6D3D4;
  border-color: #C6D3D4;;
}

/* SLIDER SWIPER CHANGE COLOR */
.slider-color-title,.box-slider-color-title {color: #ffffff;}
.btn-previous,
.box-btn-previous,
.box-btn-next,
.btn-next {cursor: pointer;}

.navigator {row-gap: 55px!important;}

/* DOWNLOAD ICON */
/* Define the animation for the icon */
@keyframes bounce-icon {
  0%, 100% {
      transform: translateY(0);
  }
  25% {
      transform: translateY(5px);
  }
  50% {
      transform: translateY(0);
  }
  75% {
      transform: translateY(5px);
  }
}

/* Apply the animation on hover */
.spec-wrapper a.elementor-button:hover::after {
  animation: bounce-icon 0.5s ease-in-out 2; /* Animates twice */
}

/* Position the icon correctly on the button */
.spec-wrapper a.elementor-button::after {
  content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4LjQ0IDE1LjY2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2lzb2xhdGlvbjppc29sYXRlO308L3N0eWxlPjwvZGVmcz48ZyBpZD0iTGF5ZXJfMS0yIj48ZyBpZD0iXyIgY2xhc3M9ImNscy0xIj48ZyBjbGFzcz0iY2xzLTEiPjxwYXRoIGQ9Ik0wLDExLjQ1aDMuNVYwaDEuNDV2MTEuNDVoMy41bC00LjIyLDQuMjJMMCwxMS40NVoiLz48L2c+PC9nPjwvZz48L3N2Zz4=);
  display: inline-block;
  position: absolute;
  margin-left: 10px;
  margin-top: 2px;
  width: 10px;
  height: auto;
}



footer .contact a {text-decoration: underline!important;color: #000;}
footer .contact a:hover {text-decoration: none!important;color: #000;}



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


  header #petaloheader.open {margin-top: -150px !important;}
  main#content {z-index: 100;margin-top: -150px;}

  /* BURGER MENU START */
#petaloburger {
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 9999999;
    transform: scale(0.8);
}
.burgermenu {position: fixed;right: 20px;top: 20px;z-index: 999999;width: 50px;height: 50px;cursor: pointer;}

  /* Specifications */
  .spec-wrapper {
    width: 100%;
    min-width: 100%;
    padding: 40px 0;
}
.spec-wrapper .spec-title {
  width: 40%;
  font-size: 18px;
  float: left;
}
.spec-wrapper .spec-data {
  width: 60%;
  font-size: 16px;
  float: left;
}

}

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

  /* SLIDER CON BG */
.slider-con-bg{background-color: #C6D3D4;}
/* KNAPPER GENERELT */
 .page-id-114 a.elementor-button.elementor-button-link.elementor-size-sm,
 .page-id-116 a.elementor-button.elementor-button-link.elementor-size-sm,
 .page-id-118 a.elementor-button.elementor-button-link.elementor-size-sm {min-width: 100%!important;font-size:12px!important;}

}

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

}