/* body{
    margin-left: 200px;
    margin-right: 200px;
} */
#right {
  width: 100%;
  /* border: 1px solid red; */
  border-left: 3px solid grey;
}
#containermen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: rgb(26, 25, 25);
  grid-row-gap: 1.8%;
  grid-column-gap: 2%;
  width: 90%;
  margin-top: 0%;
  padding: 2%;
  line-height: 140%;
  text-align: center;
  padding-bottom: 20%;
  margin-left: 100px;
}
#adban > img {
  width: 90%;
  height: 30vh;
  margin-left: 140px;
}
#containermen > div:hover {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.ham {
  height: 70%;
  width: 100%;
}
#flex {
  display: flex;
  justify-content: space-around;
}
body {
  font-family: sans-serif;
}
#top {
  font-size: 90%;
  margin-top: -1%;
  padding: 1%;
}

#priceSort {
  margin-left: 70%;
  width: 20%;
  padding: 0.5%;
  font-size: 110%;
}
#sorting {
  display: flex;
  margin-top: 2%;
}

#left {
  width: 20%;
  /* display:block;  */
  padding: 1%;
  font-size: 1rem;
  /* line-height: 180%; */
  /* border: 1px solid green; */
}
#left > p {
  font-size: 25px;
}
#bagmen {
  color: black;
  width: 100%;
  height: 24%;
  text-align: center;
  font-size: large;
  background-color: white;
  border: 1px solid rgb(250, 250, 250);
  /* margin-top:10%; */
}
#bagmen:hover {
  background-color: black;
  color: white;
}

#tophr {
  width: 100%;
}

#brandh3 {
  margin-top: 4%;
}
#bottom {
  display: flex;
}
/* #filterbrandA{
    width:30px;
    height:15px; 
}

#filterbrandN{
    width:30px;
    height:15px; 
}
#filterbrandR{
    width:30px;
    height:15px; 
}
#filterbrandW{
    width:30px;
    height:15px; 
} */

@media only screen and (min-width: 901px) and (max-width: 1200px) {
  #containermen {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (min-width: 507px) and (max-width: 900px) {
  #containermen {
    grid-template-columns: repeat(2, 1fr);
  }
  #top {
    margin-top: 20%;
  }
  #left {
    display: block;
    line-height: 180%;
    font-size: 70%;
  }
}

@media only screen and (min-width: 0) and (max-width: 506px) {
  #containermen {
    grid-template-columns: repeat(1, 1fr);
    margin-left: 10%;
    border-left: 0;
  }
  #left {
    display: none;
  }

  #top {
    font-size: small;
    margin-top: 25%;
  }
}
#divr {
  width: 25%;
  padding: 2%;
  margin-top: -15%;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 5%;
}
h2 {
  font-size: 40px;
  font-weight: lighter;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
#f1,
#f2,
#f3 {
  margin-top: 5px;
  background-color: black;
  color: white;
  font-size: 23px;
}