@media (max-width:767px)
{
  .nav
  {
    position:relative;
    z-index: 1;
  }
  .header .nav:hover ul
  {
    display: block;
  }
  .ico
  {
    width:40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .ico span
  {
    background-color: #DE9D3C;
    margin-bottom: 5px;
    height: 2px;
    width:100%;
  }
  .header .container ul
  {
    display: none;
    position: Absolute;
    left: 0;
    background-color: rgba(0,0,0,.8);
    min-width:300px;
    margin: 0;
    padding:0;
    top: calc(100% + 10px);
    text-align: center;


  }
  .nav ul::before
  {
    content: "";
    border-width: 10px;
    border-color: transparent transparent rgba(0,0,0,.8) transparent;
    border-style: solid;
    position: absolute;
    left: 5px;
    top: -20px;
  }
  .nav ul li a
  {
    display: block;
    text-decoration: none;
    padding:20px;
    color:#FFF;
    transition: .3s;
    
  }
  .nav ul li:hover
  {
    background-color: #33333380;
  }
  .nav ul li a:hover
  {
    padding-left:25px;

  }

}