@media screen and (min-width: 970px) {
  button{
    display: none;
  }

  ul{
    list-style-type: none;
    /* font-size: 18px; */
    
    margin-left: 20px;
    padding: 0;
    overflow: hidden;
    background-color: none;
    
    text-transform: capitalize;
   
    /* text-shadow:2px 2px 2px black; */
    
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    border:0px solid black;
      
    cursor:pointer;
  } 

  ul.smaller{
    list-style-type: none;
    font-size: 18px;
    margin-left:20px;
 
    padding: 0;
    overflow: hidden;
    background-color:none;
    border:0px solid black;
    
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
  }

  li {
    list-style-type: none;
    float: left;
    text-align:center;
    border-radius: 0px;  

  }

  li a, .dropbtn {
    /* display: inline-block; */
    overflow:hidden;
    float:left;
    color: rgb(255,255,255);
    text-shadow: 1px 1px 2px #000000;
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
  }

  li a:hover, .dropdown:hover .dropbtn {
    list-style-type: none;
    background-color:rgb(39,77,100);
    color:rgb(255, 255, 255);    
    text-shadow:none;

  }
  
  div.dropbtn:hover{
    color:rgb(255,255,255);
    background-color:rgb(0,0,0);
  }

    /* div.dropbtn{
      color:rgb(0,0,0);
    } */
  
  /* li.dropdown {
    list-style-type: none;
    display: inline-block;
    border-radius: 0px;      
  } */

  .dropdown-content {
    display: none;
    position: absolute;
    top:60px;
    
    background-color: rgba(0,0,0, 0.9);
  
    min-width: 120px;      
    border-radius: 0px;
    
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 1;
  }

  .dropdown-content a {
    color:white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    /* text-shadow: 2px 2px 2px black; */
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
  }

  /* .dropdown-content a:hover {background-color: #333; color:#FFF;} */

  .overlay{
    display:none;
  }
  /* nie potrzebne gdyz animacja odbywa sie w jQuery w pliku menuGlowne.php */
  /* .dropdown:hover .dropdown-content {
    display: block;
  } */
}




  @media screen and (max-width: 969px) {
    button{
      background:url(../img/menu.png) no-repeat;
      background-size: contain;
      filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.3));
      
      overflow: hidden;
      position:absolute;
      top:20px;
      right:20px;
      width:40px;
      height:40px;

      margin-top:10px;
      margin-right:20px;

      cursor:pointer;
      border: 0px;

      z-index:0;

      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

    button.smaller{
      background:url(../img/menu-small.png) no-repeat;
      background-size: contain;
      filter: drop-shadow(2px 2px rgba(0, 0, 0, 0.0));
      overflow: hidden;
      position:absolute;
      top:20px;
      right:20px;
      width:40px;
      height:40px;

      margin-top:10px;
      margin-right:20px;

      cursor:pointer;
      border: 0px;

      z-index:0;

      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

    .overlay {
      height: 0%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
      text-transform: capitalize;
    }

    .overlay-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
      font-size: 30px;
        
    font-family: 'Livvic', sans-serif; 
    font-weight:bold;
    font-weight:normal;
    text-transform:uppercase;    
    }

    .overlay a {
      padding: 8px;
      text-decoration: none;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .submenuContainer{
      font-size: 20px;
      width:70%;
      margin:0 auto;
      border-bottom:1px solid white;

      display:none;
    }
    .overlay a.strzalkaRozwin {
      padding:0px;
      margin-top: -20px;
      text-decoration: none;
      font-size: 50px;
      color: #818181;
      display: block;
      transition: 0.3s;
      cursor:pointer;
    }

    .overlay span {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
    }

    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }



    @media screen and (max-height: 450px) {
      .overlay a {font-size: 20px}
      .overlay a.submenu-rozwijane {font-size: 15px}
      .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
      }
    }
  }