.vbp-header-menu-button__svg {
    width: 30px;
    height: 30px;
    cursor: pointer;
    transform: scaleX(-1);
  }
  
  .vbp-header-menu-button__svg line {
    stroke: #fff;
    stroke-dasharray: 100%;
    stroke-dashoffset: 0%;
    transition: transform 0.3s, stroke-dashoffset .4s;
    transform-origin: center;
    stroke-width: 3px;
  }
  
  .vbp-header-menu-button__svg .top {
    transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    -moz-transform: translateY(35%);
    -ms-transform: translateY(35%);
    -o-transform: translateY(35%);
  }
  
  .vbp-header-menu-button__svg .middle {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transition: opacity .3s, transform .3s;
    -webkit-transition: opacity .3s, transform .3s;
    -moz-transition: opacity .3s, transform .3s;
    -ms-transition: opacity .3s, transform .3s;
    -o-transition: opacity .3s, transform .3s;
  
  }
  
  .vbp-header-menu-button__svg .bottom {
    transform: translateY(33%);
    -webkit-transform: translateY(33%);
    -moz-transform: translateY(33%);
    -ms-transform: translateY(33%);
    -o-transform: translateY(33%);
    stroke-dasharray: 100%;
    stroke-dashoffset: 9px;
  }
  .vbp-header-menu-button__svg:hover .bottom {
    stroke-dashoffset: 0%;
  }
  /*** Mode Croix ***/
  body.menu-open .vbp-header-menu-button__svg .top {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    stroke-linecap: round;
  }
  
  body.menu-open .vbp-header-menu-button__svg .middle {
    transform: scaleX(0.1);
    -webkit-transform: scaleX(0.1);
    -moz-transform: scaleX(0.1);
    -ms-transform: scaleX(0.1);
    -o-transform: scaleX(0.1);
    opacity: 0;
  }
  
  body.menu-open .vbp-header-menu-button__svg line.bottom {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    stroke-linecap: round;
  }
  
  body.menu-open .vbp-header-menu-button__svg .bottom {
    stroke-dashoffset: 0%;
  }



.MainWebsiteNavigation{
  position: fixed;
  top: 110px;
  width: 100%;
  max-width: 500px;
  right: -100%;
  height: calc(100vh - 110px);
  background: #000;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s;
}
.MainWebsiteNavigation.active{
  right: 0;
}
.MainWebsiteNavigation .Bg{
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: #00000022;
  backdrop-filter: blur(10px);
  position: fixed;
  left: 0;
  height: calc(100vh - 110px);
  display: none;
}
.MainWebsiteNavigation.active .Bg{
  display: unset;
  animation: MainWebsiteNavigationBG 1s linear;
}
.MainWebsiteNavigation .Inner{
  width: 80%;
  height: 90%;
  max-width: 500px;
}
.MainWebsiteNavigation .Inner .Item div{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-bottom: 3px solid #d4af37;
  color: #fff;
  font-size: 150%;
  padding: 2.5% 0;
}
@keyframes MainWebsiteNavigationBG {
  from{
    opacity: 0;
  }to{
    opacity: 1;
  }
}