:root {
    --menu-primary-color: rgba(0, 0, 0, 0.50);
    --menu-overlay-color: rgba(75, 75, 75 , 1);
    --menu-speed: 0.75s;
  }

/* MENU STYLES */
 nav ul{
     list-style: none;
     margin: 0;
     padding: 0;
 } 
@media screen and (max-width:767px){
    .menu-wrap {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 3;
    }
    
    .menu-wrap .toggler {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        cursor: pointer;
        width: 50px;
        height: 50px;
        opacity: 0;
    }
    
    .menu-wrap .hamburger {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 60px;
        height: 60px;
        padding: 1rem;
        background: var(--menu-primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hamburger Line */
    .menu-wrap .hamburger > div {
        position: relative;
        flex: none;
        width: 100%;
        height: 2px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
    }
    
    /* Hamburger Lines - Top & Bottom */
    .menu-wrap .hamburger > div::before,
    .menu-wrap .hamburger > div::after {
        content: '';
        position: absolute;
        z-index: 2;
        top: -10px;
        width: 100%;
        height: 2px;
        background: inherit;
    }
    
    /* Moves Line Down */
    .menu-wrap .hamburger > div::after {
        top: 10px;
    }
    
    /* Toggler Animation */
    .menu-wrap .toggler:checked + .hamburger > div {
        transform: rotate(135deg);
    }
    
    /* Turns Lines Into X */
    .menu-wrap .toggler:checked + .hamburger > div:before,
    .menu-wrap .toggler:checked + .hamburger > div:after {
        top: 0;
        transform: rotate(90deg);
    }
    
    /* Rotate On Hover When Checked */
    .menu-wrap .toggler:checked:hover + .hamburger > div {
        transform: rotate(225deg);
    }
    
    /* Show Menu */
    .brand{
        background: url(../images/iu/petit-logo.svg) no-repeat left top;
        background-size: contain;
        content: "";
        max-width: 300px;
        height: 60px; 
        display: block;
    }
    .menu-wrap .toggler:checked ~ .menu {
        opacity: 1;
        z-index: 1;
    }
    
    .menu-wrap .toggler:checked ~ .menu > div {
        transition-duration: var(--menu-speed);
        width:100vw;
        height: 100vh;
        opacity: 0;
    }

    .menu-wrap .toggler:checked ~ .menu > div {
        opacity: 1;
        transition:  opacity 0.4s ease ;
    }
    .menu-wrap .toggler:checked ~ .menu > div > div {
        opacity: 1;
        transition:  opacity 0.4s ease 0.4s;
    }
    
    .menu-wrap .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: -1;
    }
    
    .menu-wrap .menu > div {
        background: var(--menu-overlay-color);
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
    }
    
    .menu-wrap .menu > div > div {
        width: 80vw;
        max-height: 100vh;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    .menu-wrap .menu > div > div > ul > li {
        color: #fff;
        border-top:1px solid rgba(255,255,255,.1)
    }
    
    .menu-wrap .menu > div > div > ul > li > ul {
    margin-bottom: 1rem;
    }
}
  
.menu-wrap .menu > div > div > ul > li >a {
    color: #fff;
    text-decoration: none;
    transition: color 0.4s ease;
    font-family: 'spumoniregular';
    text-transform: uppercase;
    font-size: 1.5rem;
    padding:1rem;
    display: block;
    letter-spacing: .125rem;
    transition: all .3s ease;
  }
  .menu-wrap .menu > div > div > ul > li >a:hover {
    color: #F4A702;
  }
  
  .menu-wrap .menu  div  div li li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.4s ease;
    font-family: Montserrat;
    font-size: 1rem;
    padding:.5rem 3rem;
    display: block;

  }
  
@media screen and (min-width:768px){
   #entete{
       min-height: 400px;
   } 

   .menu-wrap{
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(0,0,0,.4);
   }
 .menu-wrap .toggler{
     display: none;
 }

 .menu-wrap ul{
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
     justify-content: center;
 }

.menu-wrap .menu>div>div>ul>li>{
    position:relative;
    
}
.menu-wrap .menu>div>div>ul>li>ul{
    position: absolute;
    top:100%;
    display:none;
}

}