body { 
    animation: bugfix infinite 1s;
    -webkit-animation: bugfix infinite 1s;
  }
  
  @keyframes bugfix { 
    from {padding:0;} 
    to {padding:0;} 
  }
  @-webkit-keyframes bugfix { 
    from {padding:0;} 
    to {padding:0;} 
  }
  
  
  .navtoggler{  /* Sample burger icon to toggle menu state */
    z-index: 9;
    display: block;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
  }
  
  
.ddfullscreenmenu{ /* Full screen nav menu */
    width: 100%;
    height: 100%;
    visibility: hidden;
      box-sizing: border-box;
    -webkit-transform: translateX(10rem);  /* initially scale down nav size */
    transform: translateX(10rem);
    background: var(--white); /* menu background color */
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
      z-index: 100000;
    opacity: 0;
    overflow: hidden;
    /* overflow-y: auto; */
      text-align: center;
    -webkit-transition: visibility 0s 0.5s, opacity 0.1s, -webkit-transform 0.5s;
    transition: visibility 0s 0.5s, opacity 0.1s, transform 0.5s;
    pointer-events: none;
  }
  
.ddfullscreenmenu.openmenu{ /* open menu class */
      visibility: visible;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
      transition-delay: 0s;
    -webkit-transition-delay: 0s;
    pointer-events: all;
    
  }
  
.ddfullscreenmenu div.closex{ /* Large x close button inside nav */
    display: block;
    position: absolute;
    cursor: pointer;
    top: 4rem;
    right: 4rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9999;
  }

  .ddfullscreenmenu div.closex img {width: 100%;}
  .ddfullscreenmenu .column_big {width: 100%;position: relative;padding: 5rem 0;}
  .ddfullscreenmenu .column_small {width: calc(100% - 30rem);margin: -8rem 0 0 auto;padding: 0 4rem;display: block;}
  .title_menu {margin: 0 0 3rem;padding: 0 0 1.5rem;border-bottom: 1px solid rgb(0 0 0 / 10%);}
  .title_menu span {font-size: 1.6rem;}
  .ddfullscreenmenu ul.submenu li a.open_cat {padding: 0 4rem;color: var(--bright-red);font-size: 1.6rem;list-style: none;margin: -1.5rem 0 0;font-weight: 800;}
  .ddfullscreenmenu ul.submenu li a.open_cat:hover {background-color: transparent;}
  

  div.ulwrapper{
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
    padding: 3rem;
    max-width: 180rem;
    text-align: left;
  }
  /* div.ulwrapper .flex{min-height: calc(100% - 11rem);} */
.ddfullscreenmenu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
      -webkit-transition: all 0.5s .1s;
      transition: all 0.5s .1s;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 4rem;
  }
  
.ddfullscreenmenu ul li{
    position: relative;
    display: block;
    width: calc(50% - 2rem);
  }
  
.ddfullscreenmenu ul li.header > a:after{ /* right arrow inside header LIs */
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 8px solid darkred;
    border-color: transparent transparent transparent darkred;
  }
  
.ddfullscreenmenu ul.submenu{ /* style for non "first page" ULs */
    position: absolute;
    top: 11rem;
    left: 0;
      opacity: 0;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    height: 0;
    visibility: hidden;
  }
  
.ddfullscreenmenu ul li a,
.ddfullscreenmenu ul li.breadcrumb{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  padding:2rem 4rem 2rem 2rem;
  display: block;
  border-radius: 1rem;
  cursor: pointer;
  font-size: 1.6rem;
  background: var(--light);
  }

  .ddfullscreenmenu ul.submenu li a {padding: 1rem;text-transform:none;background: none;border-radius: 8px;display: list-item;list-style: inside disc;}
  .ddfullscreenmenu ul.submenu li a::marker {color: var(--bright-red)}
  
.ddfullscreenmenu ul li.breadcrumb{
    width: 100%;
    background: transparent;
    position: relative;text-transform: uppercase;color: var(--bright-red);padding: 2rem 2rem 2rem 4rem;font-size: 2rem;
  }
  
.ddfullscreenmenu ul li.breadcrumb:after{ /* back arrow inside breadcrumb LI */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 10px solid var(--bright-red);
    border-color: transparent var(--bright-red) transparent transparent;
  }
  
.ddfullscreenmenu ul li a:hover{
    background: #eee;
  }
  
  
.ddfullscreenmenu ul.hidemenu{
    transform: rotateY(30deg) translateZ(-5px) !important;
    opacity: 0;
    pointer-events: none;
    
  }
  
.ddfullscreenmenu ul.showmenu{
    transform: translate3d(0,0,0) !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  .ddfullscreenmenu ul.submenu.showmenu {height: auto;visibility: visible;}
  
.column_small {display: flex;flex-direction: column;justify-content: space-between;}
  .ddfullscreenmenu .column_small ul {display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 0 4rem;}
  .ddfullscreenmenu .column_small ul.social {gap: 0 2rem;margin: 0 0 1rem;}
  .ddfullscreenmenu .column_small ul li {width: auto;}
  .ddfullscreenmenu .column_small ul li a {background-color: transparent;font-size: 1.6rem;font-weight: 700;padding: 0 0 1rem;margin: 0 0 1rem;text-transform: capitalize;border-bottom: 3px solid transparent;display: inline-block;border-radius: 0;}
    .ddfullscreenmenu .column_small ul li a:hover, .ddfullscreenmenu .column_small ul li a.active {border-bottom: 3px solid var(--red)}

    .ddfullscreenmenu .column_small ul.social li a {padding: 0;margin: 0;border-bottom: none;}
    .ddfullscreenmenu .column_small ul.social li a:hover {border-bottom: none;}
    .column_small .social li img { width: 3rem; height: 3rem;}

    @media screen and (max-width: 1800px) {
      .ddfullscreenmenu .column_small {padding: 0 7rem 0 4rem;}
    }

    @media screen and (max-width: 1280px) {
      .ddfullscreenmenu div.closex {top: 2.3rem;right: 3rem;}
    }

    @media screen and (max-width: 1024px) {
      div.ulwrapper {height: 100vh; overflow-y: scroll;overflow-x: hidden;}
      .ddfullscreenmenu .column_big {width: 100%;padding: 5rem 0;}
      .ddfullscreenmenu ul li {width: 100%;}
      .ddfullscreenmenu .column_small {width: 100%;position: fixed;
        bottom: 0;
        z-index: 999;
        background: rgb(255 255 255 / 90%);
        padding: 3rem 0 0;}

      .ddfullscreenmenu .column_small ul {display: flex;text-align: left;flex-wrap: wrap;justify-content: flex-start;gap: 1rem 3rem;margin: 0 0 1rem;}
      .ddfullscreenmenu .column_small ul li {width: auto;}
      .ddfullscreenmenu .column_small ul li a {font-size: 1.8rem;margin: 0;padding: 0 0 5px;}
      .ddfullscreenmenu .column_small ul {gap: 5px 1rem;}
      .ddfullscreenmenu ul.submenu li:last-child {margin: 0 0 20rem;}
    }

    @media screen and (max-width: 580px) {
      .ddfullscreenmenu .column_big {padding: 2rem 0;}
      div.ulwrapper {padding: 1rem;}
      .ddfullscreenmenu div.closex {top: 2rem;right: 2rem;}
    }