.header-center { flex-grow: 1; justify-content: center; display: flex; align-items: center; color: #000; z-index:9999999999; border-bottom: 15px solid #a3c6bf !important; position: -webkit-sticky; /* Für Safari */ position: sticky; top: 0; background-color: #fff; transition: background-color 0.3s ease;} .main-menu {position:relative;} ul#menu-main-menu { flex-direction: row;display: flex; padding: 0; margin: 0;box-sizing: border-box;;} ul#menu-main-menu li { align-items: center;list-style-type: none;display: flex; flex-direction: column;position: relative;} ul#menu-main-menu li::after { content: ""; width: 0; height: 3px; position: absolute; top: 0px; background: var(--main-green); transition: width 0.25s ease-in-out;} ul#menu-main-menu li:hover::after { width: calc(100% - 2rem);background: var(--main-green); } ul#menu-main-menu > li > a { font-size: 15px; padding: 0.5rem 1rem;text-transform: uppercase;font-weight: 500;color: #000;text-decoration: none; border-style: solid; border-width: 0; transition-timing-function: ease-in-out; transition-property: background-color,color,border-color;border-color: transparent;display: flex; align-items: center;line-height: 1.8; ;} ul#menu-main-menu > li:hover > a { color:var(--main-green);} /* === === === === === === === === === === === === === === === === */ /* === === FIXED ON TOP === === */ /* === === === === === === === === === === === === === === === === */ @media (min-width: 1119px) { #header.fixed ul#menu-main-menu > li > a { color: #fff;} #header.fixed ul#menu-main-menu > li > a:hover { color:#333} } ul#menu-main-menu li.has-children > a::after { width: .25em;height: .25em;margin-left: .5em;border-right: .1em solid;border-top: .1em solid;transform: rotate(135deg);content: "";margin-top: -5px;} ul#menu-main-menu li .sub-menu{;padding: 9px;border-radius:3px;background-color:#fff;border-top:3px solid var(--main-green);;z-index:99999999999999999;flex-direction:column;transition-timing-function:ease-in-out;transition-property:visibility,opacity;visibility:hidden;opacity:1;display:flex;position:absolute;top:100%;box-shadow: 0 7px 30px -10px rgb(133,153,162,.5);} ul#menu-main-menu li.has-children:hover .sub-menu { visibility: visible; opacity: 1} ul#menu-main-menu li.has-children:hover .sub-menu li { padding: 0.5rem;} ul#menu-main-menu li.has-children:hover .sub-menu a { ;text-decoration:none} ul#menu-main-menu li.has-children:hover .sub-menu a:hover { color:#a3c6bf;;} .sub-menu .divided {display:flex;flex-direction:row;width:990px;padding:18px 0} .sub-menu .divided .df1, .sub-menu .divided .df2, .sub-menu .divided .df3 {flex:0 0 340px;padding:0 18px;width:340px;} .sub-menu .divided .df1 {border-right:1px solid #efefef !important;} .sub-menu .divided a {display:block;color:#000 !important;text-decoration:none;padding:6px;margin-bottom:6px;cursor:pointer;} .sub-menu .divided a:hover {;} .sub-menu .divided a:hover span {color:#a3c6bf !important;} .sub-menu .divided .df1 a span, .divided .df2 a span, .divided .df3 a span {;letter-spacing:1px;font-weight:500;} .sub-menu .divided .df1 a p, .divided .df2 a p {font-size:14px;margin-top:6px;} .hamburger-cross{ display:none; position: relative; padding: 18px 8px; cursor: pointer; z-index:9999999999; } .navicon{ display: block; width: 24px; border-radius: 2px; position: relative; background: red; height: 2px; /*FOR un-SCALE*/ -webkit-transition: .5s;} .navicon::before, .navicon::after{display: block;width: 24px;border-radius: 2px;position: absolute;background: red;height: 2px;content: "";/*for cross to hamburger*/-webkit-transition: .5s;} .navicon:before{top: -6px;} .navicon:after{top: 6px;} .open .navicon{/*FOR SCALE*/-webkit-transition: all .5s;-webkit-transform: scale(1);background: transparent;} .hamburger-cross:hover .navicon:before{} .hamburger-cross:hover .navicon:after{} .open .navicon{} .open.hamburger-cross:hover .navicon:before{} .open .navicon:before{-webkit-transform: rotate(45deg);top: 0px;background:red} .open .navicon:after{-webkit-transform: rotate(-45deg);top: 0px;background:red} @media (max-width: 1120px) { #header .header-row .header-container .header-right a {display:none;} .hamburger-cross {display:block;} } @media (max-width: 1120px) { .main-menu {position:relative;display:block;width:100%; float:right;;} ul#menu-main-menu { --is-responsive: true; width: 100%; background: #fff; display:none; z-index: 999999999999999; overflow: auto; flex-direction: column; justify-content: center; align-items: center; } ul#menu-main-menu li { width: 100%; font-weight:bold;border-bottom:1px solid #cdcdcd;align-items: flex-start;width:calc(100% - 36px);margin:9px auto; border-radius:3px;color:#000;} ul#menu-main-menu li::after {content: none;} ul#menu-main-menu li > a { text-align: left;font-size:14px;display:block;width:100%;color:#000;} ul#menu-main-menu li > a:hover {} ul#menu-main-menu li.has-children > a::after { } ul#menu-main-menu li .sub-menu a { text-align: left;font-size: 14px;padding-left:1rem; display:block;} ul#menu-main-menu li .sub-menu { padding: 0; position: static !important; border-radius:unset; box-shadow: none; visibility: visible; opacity: 1; width:calc(100% - 36px); display: block; text-align: center; display:none; border:none; } ul#menu-main-menu li .sub-menu .divided {width:100%;} .sub-menu .divided .df1 { border-right: unset} .sub-menu .divided .df1, .sub-menu .divided .df2 {display:block; padding:0;border:none;width:100%;} .sub-menu a { line-height:2;font-size: 14px !important; font-weight:normal; margin-left:9px;} ul#menu-main-menu .sub-menu .divided a span {font-size: 14px;letter-spacing: 1px;font-weight: 500;} .sub-menu .divided div {max-width:100%;} .sub-menu .divided p {display: none;} .sub-menu .divided {display:block !important; padding:0;width:fit-content} } .bckgrndgrn {background:var(--main-green);} .bordernone {border:none !important;}