body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0;
  padding: 0;
  border: 0;
}

/*nav {
  height: 60px;
  background-color: #2f435e;
  color: white;
}
#navlogo {
  float: left;
  display: inline-block;
  padding: 0;
  height: 60px;
  margin: 0;  
}
nav ul{
  float: right;
  width: 60%;
  margin: 0;
  height: 60px;
}

nav li{
  display: inline-block;
  float: right;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 5px;
}
#companyName{
  padding-left: 2%;
  font-size: 24pt;
  float: left;
  width: 20%;
  height: 60px;
  border: 0;
  padding: 0;
  margin-left: 20px;
}*/

a {
  text-decoration: none;
  color: white;
}
a:hover{
    text-decoration: none;
    color: white;
}
.slider {
    -webkit-appearance: none;
    width: 140px;
    height: 15px;
    background: white;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: gray;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slidervalue {
  font-size: 14pt;
  float:right;
  margin-right: 20px;
  border: 1px solid black;
  width: 30px;
  text-align: center;
}


.storeheader {
  background-color: white;
  width: 100vw;
  height:10vh;
  text-align: center;
}

h1 {
  margin-top: 0;
}

.filter {
  background-color:darkgrey;
  float:left;
  padding-left: 20px;
  width: 200px;
  height:100%;
  color: white;
  font-size: 16pt;
}

#filterbutton {
  font-size: 14pt;
  text-align: center;
  padding: 10px;
  margin-left: 20%;
  margin-top: 25px;
  margin-bottom: 25px;
}

.content {
  background-color: white;
  float:right;
  width:calc(100% - 220px);
  height:100%;
}

#pant {
  background-color: black;
  color: white;
  margin: 20px;
  text-align: center;
  font-size: 40pt;
}

.itemdata {
  background-color: whitesmoke;
  padding: 10px;
  border: 10px solid darkgrey;
}

#clothes_selection {
  align-content: center;
  margin: 0 auto;
}

.shirts {
  width: 250px;
  height: 250px;
}
#jogger1 {
  width: 250px;
  height: 250px;
}

.button {
  float:right;
  padding-right:10%;
  width: 75px;
  height: 75px;
}
.addbutton:hover { background: #2f435e; }
.removebutton:hover { background: #2f435e; }
.addbutton {
  position: relative;
  background-color: #44566c;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 25px;
  margin-bottom: 25px;
  cursor: pointer;
}

.removebutton {
  position: relative;
  background-color: #44566c;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin-top: 25px;
  margin-bottom: 25px;
  cursor: pointer;
}

.itemname {
  font-size:16pt;
}

/* The actual popup (appears on top) */
.addpopup {
    display: none;
    height: 100px;
    width: 200px;
    background-color: darkgrey;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

.removepopup {
    display: none;
    height: 100px;
    width: 200px;
    background-color: darkgrey;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 2;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}


<!-- For the different media screens-->
@media screen and (max-width: 400px) {
  .filter {
    width: 100px;
    font-size: 10pt;
  }
  .slider {
    width: 80px;
  }
  .content {
    width: calc(100%-420px);
  }
}