@charset "UTF-8";

*{box-sizing: border-box;}

body {margin: 0;}

.topnav {
  overflow: visible;
  background-color: black;
  width: 100%;
  display: inline-block;
  border-bottom: 5px solid #51A6C8;
  }
    
    .topnav .logo {
      position: relative;
      height:100px;
      padding:8px 16px;
      float:left;
      width:auto;
      border:none;
      display:block;
      outline:0
    }
  
      .topnav .cart {
        color: white;
        float:right!important;
        border:none;
        padding: 19px 16px;
        padding-top: 33px;
        overflow:hidden;
        text-decoration:none;
        font-size: 30px;
        text-align:center;
        cursor:pointer;
      }
  
      .topnav input[type=text] {
          font-family: Dosis;
          background: black; border: #f5f5f5;
          border-bottom: solid 1px #f5f5f5;
          padding: 6px;
          padding-right: 158px;
          margin-top: 35px;
          font-size: 17px;
          color: #f5f5f5;
        }
  
        .topnav .searchbar button {
          float: right;
          color: white;
          padding: 6px 12px;
          margin-right: 6px;
          margin-top: 33px;
          background: black; border: #f5f5f5;
          font-size: 20px;
          border-bottom: solid 1px #f5f5f5;
          cursor: pointer;
          font-weight: bold;
        }
          .topnav .searchbar button:hover, .topnav .cart:hover {color: #8b8b8b;}

.listitem {
  padding: 0 40px;
}
  .listitem h1 {
    position: relative;
    left: 6%;
  }
    .drpd {
        position: relative;
        display: inline-block;
      }
        .drpd a:hover {background-color: #dddddd;}

      .sort {
        border: 2px solid black;
        padding: 8px 16px;
        font-size: 16px;
        background-color: #f5f5f5;
        font-weight: bold;
        cursor: pointer;
      }
        .sort:hover, .sort:focus {background-color: #bbb5b5;}
      
      .dropsort {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px hsla(0, 0%, 0%, 0.2);
        z-index: 1;
      }
      
        .dropsort a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
        }
      .show {display: block;}

      .filter {
        margin: 9% 0 0 3%;
        width: 15%;
      }
        .filter p {
          font-size: x-large;
          margin-bottom: 0;
        }
        .filter h3 {margin-top: 0;}
        .filter label {
          font-size: large;
          cursor: pointer;
        }

        .listitem .catal-item img {padding: 5px;}
        .catal-item {
          float: right;
          display: flex;
          flex-wrap: wrap;
          justify-content: end;
          text-align: center;
          margin-top: 6%;
          padding: 10px;
          height: 0;
        }
        .catal-item .shop-item {
          display: grid;
          align-content: space-between;
          justify-items: center;
          font-family: Inter;
          width: 250px;
          padding: 10px;
        }

          .catal-item .shop-item h4 {font-weight: normal;}
          .catal-item .shop-item button {
            background-color: #39D377;
            color: #f5f5f5;
            border-radius: 32px;
            border: none;
            font-size: 15px;
            padding: 5px 10px;
            font-weight: bolder;
            text-align: center;
            cursor: pointer;
          }
          .catal-item .shop-item button:hover {background-color: #3eaa69;} 
    
  
@media screen and (max-width: 600px) {
  .topnav .searchbar {float: none}
  .topnav a, .topnav input[type=text], .nav2 .search-con button {
    float: none;
    display: inline-flex;
    text-align: left;
    width: auto;
    margin: 0;
    padding: 14px;
  }
    .topnav input[type=text] {border: none;}
}