.filters {
  display:flex;
  flex-direction:row;
}

.filtbut {
   display:none;
}

@media only screen and (max-width: 680px) { /* 500px */
    .filtbut {
        display:block;
	    width:100px;
	    background-color:rgba(81, 86, 99, 1);
	    color:white;
	    font-size:16px;
        border:none;
        border-radius:20px;
	    cursor:pointer;
        text-align:center;
	    box-shadow: 0 5px 10px 5px rgba(0,0,0,0.5);
	    padding:5px 10px;
        margin:10px;
    }
}

#filters {
  background-color: rgba(93, 101, 120, 0.22);
  /**/
  display: block;
  /*display: box -moz-box -webkit-box;
  box-align:left;
  width: 400px; */
  /**/
  border-width: thin; 
    border-style: solid; 
    border-color: rgba(93, 101, 120, 0.87); 
    border-radius: 5px;
}
/**/
@media (max-width: 680px) { /* 400px 800px #filters for display */
  #filters {
  background-color: rgba(93, 101, 120, 0.22);
  display:none;
  /*display: box -moz-box -webkit-box;*/
  width:100%;
  }
}
/**/

.dropdown {
  flex:1;  
  display:flex;
  flex-direction:column; 
  padding: 20px 25px 5px;
}

.color-check {
  flex:1;  
  display:flex;
  flex-direction:column; 
  padding: 20px 25px 20px;
}

.color2-check {
   padding: 10px 25px 5px;
}

.color3-check {
  flex:1;  
  display:flex;
  flex-direction:column; 
  padding: 10px 25px 20px;
}

.color3-check > input[type="checkbox"] {
   margin-top: 5px;
}

.wrapper{
  /*background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);*/  /* bien! */
  /*width: 300px; 
  padding: 20px 25px 40px;*/
  padding: 20px 25px 5px;
  flex:1;  
  display:flex;
  flex-direction:column; 
}
.price-input{
  width: 100%;
  display: flex;
  margin: 30px 0 35px;
}
.price-input .field{
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
}
.field input{
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 19px;
  margin-left: 12px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.price-input .separator{
  width: 125px;
  display: flex;
  font-size: 19px;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 5px;
  position: relative;
  background: rgba(123, 125, 125, 0.48);
  border-radius: 5px;
}
.slider .progress{
  height: 100%;
  left: 0%; /* position initiale gauche du price slider */
  right: 0%;  /* position initiale droite du price slider */
  position: absolute;
  border-radius: 5px;
  background: #17A2B8;
}
.range-input{
  position: relative;
}
.range-input input{
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  margin-left:0px; /*  */
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input[type="range"]::-webkit-slider-thumb{
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #17A2B8;
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
input[type="range"]::-moz-range-thumb{
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: #17A2B8;
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.top {
  height:100px;
  background-color: white;
  border-radius: 12px;
  color: black;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
   border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 2px solid gray;
    border-bottom: 0;
}

.bottom {
  height:100px;
  background-color: white;
  border-radius: 12px;
  color: black;
  padding: 5px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
   border-bottom-left-radius: 110px;  /* 100px of height + 10px of border */
    border-bottom-right-radius: 110px; /* 100px of height + 10px of border */
    border: 2px solid gray;
    border-bottom: 0;
}