@font-face {
    font-family: 'EBgaramond';
    src:url('fonts/static/EBGaramond-Regular.ttf') format('truetype');
	font-weight: 50;
	font-style: normal;
}



#form_g{
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    top: 150px;
    padding: 10px 5px 10px 5px;
    border-radius: 10px;
    
    
    background-color: #222;
    align-items: center;

}


.switch {
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg,
              #aa8111  20%,
              #dfab5d 100%);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.363);
    border-radius: 5px;
    margin: auto;
  }
  
  .switch input {
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
    position: absolute;
  }
  
  .switch div {
    width: 80%;
    height: 80%;
    margin: 10%;
    position: absolute;
  }
  
  .switch span {
    background: #fff;
    width: 100%;
    height: 2px;
    border-radius: 5px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s, width 0.5s;
  }
  
  .switch .line-1 {
    width: 50%;
    transform: translate(-100%, -10px);
    transform-origin: 0 0;
  }
  
  .switch .line-3 {
    width: 50%;
    left: auto;
    right: 0;
    transform: translate(0, 10px);
    transform-origin: 100% 0;
  }
  
  input:checked + div span.line-1 {
    transform: translate(0, 0) rotate(-45deg);
  }
  
  input:checked +  div span.line-3 {
    transform: translate(-100%, 0) rotate(-45deg);
  }
  
  input:checked + div span.line-2 {
    transform: translate(-50%, -50%) rotate(45deg);
  }





  form input{
    background: none;
    border: none;
    color: #fff;
    outline: none;
    border-bottom: #aa8111 2PX solid;
  }
  form input::placeholder{
    font-family: 'EBgaramond';
    color: #fff;
    
  }


 form button {
    margin: auto;
    font-family: 'EBgaramond';
    background: none;
    border: none;
    position: relative;
    display: inline-block;
    padding: 5px 5px;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    letter-spacing: 4px
  }
  
  form button:hover {
    background: #aa8111;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #aa8111,
                0 0 25px #aa8111,
                0 0 50px #aa8111,
                0 0 100px #aa8111;
  }
  
  form button span {
    position: absolute;
    display: block;
  }
  
  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
  
    50%,100% {
      left: 100%;
    }
  }
  
  form button span:nth-child(1) {
    bottom: 2px;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #aa8111);
    animation: btn-anim1 2s linear infinite;
  }




  .input-group {
    margin:7px 0px;
    width: 100%;
    position: relative;
   }
  .input-group-panier {
    margin:7px 0px;
    width: 18%;
    position: relative;
   }
   
   .input {
    width: 100%;
    border: solid 1.5px #82671d;
    border-radius: 1rem;
    background: none;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    color: #9e9e9e;
    transition: border 150ms cubic-bezier(0.4,0,0.2,1);
   }
   
   .user-label {
    position: absolute;
    left: 15px;
    color: #9e9e9e;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4,0,0.2,1);
   }
   
   .input:focus, input:valid {
    outline: none;
    border: 1.5px solid #f6b70a;
   }
   
   .input~ label, input ~ label {
    transform: translateY(-50%) scale(0.8);
    background-color: #212121;
    padding: 0 .2em;
   }

   form h3{
    margin: 5px ;
   }