/* MENUE BUTTON ----------------------------------------------------------- */

#menuemain_btn_con { position:fixed; z-index: 109; bottom: 0px; left: calc( 50% - 210px ); }

#menuemain_btn_con #menuemain_btn { 
  position:relative; 
  bottom:-10px; left:0px; 
  width:420px; height:90px; 
  cursor:pointer;
}
/* #menuemain_btn_con #menuemain_btn { position:relative; top:0px; left:0px; width:120px; height:120px; cursor:pointer; background-color: var(--main-signalColor01); border-radius:60px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } */

#menuemain_btn_con #menuemain_btn #svgBG {position:absolute; top:0; left:0; width:100%; height:100%; pointer-events: none;}
#menuemain_btn_con #menuemain_btn #svgBG svg { width:100%; height:100%; }
#menuemain_btn_con #menuemain_btn #svgBG svg .svgPath { fill: var(--main-signalColor01); filter: drop-shadow( 0 10px 10px rgba(0, 0, 0, 0.3));}

#menuemain_btn_con #menuemain_btn .icon_con { 
  position: absolute; 
  width:70px; height:50px; 
  left:calc(50% - 35px); top:20px;  
  display:flex; flex-direction: row; flex-wrap:nowrap; justify-content: center;
  pointer-events: none;
  overflow:hidden;
}

/* MENUE ICON */
#menuemain_btn_con #menuemain_btn .icon_con .element { position:absolute; width:100%; height:20%; background-color:#fff; left:0%;}
#menuemain_btn_con #menuemain_btn .icon_con .element:nth-child(1) { top:0%;}
#menuemain_btn_con #menuemain_btn .icon_con .element:nth-child(2) { height: 15%; top:30%;}
#menuemain_btn_con #menuemain_btn .icon_con .element:nth-child(3) { height: 9%; top:55%;}
#menuemain_btn_con #menuemain_btn .icon_con .element:nth-child(4) { height: 6%; top:74%;}

/* CLOSE ICON */
#menuemain_btn_con #menuemain_btn .icon_con.close { height:70px; transform: scale(0); }
#menuemain_btn_con #menuemain_btn .icon_con.close .elementClose { position:absolute; width:60%; height:15%; background-color:#fff; top:25%; left:20%; border-radius: 50%;}
#menuemain_btn_con #menuemain_btn .icon_con.close .elementClose:nth-child(1) { transform: rotate(45deg);}
#menuemain_btn_con #menuemain_btn .icon_con.close .elementClose:nth-child(2) {  transform: rotate(-45deg);}

/* HOVER ANIMATION */

#menuemain_btn_con #menuemain_btn:hover { height:130px; bottom:0px; /* left:10px; width:100px; height:100px;*/ }
#menuemain_btn_con #menuemain_btn:hover .icon_con { top:50px; }
#menuemain_btn_con #menuemain_btn:hover .icon_con .element:nth-child(1) { height: 6%; top:0%;}
#menuemain_btn_con #menuemain_btn:hover .icon_con .element:nth-child(2) { height: 9%; top:21%;}
#menuemain_btn_con #menuemain_btn:hover .icon_con .element:nth-child(3) { height: 15%; top:45%;}
#menuemain_btn_con #menuemain_btn:hover .icon_con .element:nth-child(4) { height: 20%; top:75%;}

#menuemain_btn_con #menuemain_btn:hover .icon_con.close { top:30px; }
#menuemain_btn_con #menuemain_btn:hover .icon_con.close .elementClose { width:100%; height:4%; top:50%; left:0; border-radius: 0%;}


/* ------------------------------------------------------- */

#menuemain_btn_con #menuemain_btn a {display:block; width:100%; height:100%; }




/* OLD
#menuemain_btn_con #menuemain_btn {  position:absolute; top:0px; margin-left:10px; width:80px; height:80px; cursor:pointer; background-image:var(--styleMenueBtn);background-repeat:no-repeat; background-position:50% 50%; background-size:80px;}
#menuemain_btn_con #menuemain_btn:hover { background-size:70px; }
#menuemain_btn_con #menuemain_btn a {display:block; width:100%; height:100%;}
*/

#menuemain_btn_con #menuemain_btn_bg { 
  display:none; 
  /*position:absolute; top:-60px;width:350px; height:100px; background-color:var(--styleB); transform: skewY(-16deg); box-shadow: 0px 0px 10px rgba(0,0,0,0.2); pointer-events: none;*/
}
#menuemain_btn_con #menuemain_btn_bg svg {}