#menu-filters{
  display: flex;
  width: 94%;
  margin: 0px auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

            #loading_gif2{
              flex: 0 0 25%;
              height: 340px;
              width: 60px;
              margin-bottom: 40px;
              background-size: contain;
              background-size: center;
              margin: 0px auto;
            }

            .loading_gif2{
                background-image: url('/media/img/loading2.png');
            }

.menu_filter{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.title_filter{
  margin: 0;
  text-transform: uppercase;
  color: black;
  font-size: 1.2em;
  font-style: normal;
  font-weight: 600;
}

#input-choice-tattoo{
  margin-left: 10px;
  border: 1px solid black;
  padding: 10px 8px;
  border-radius: 3px;
  color: black;
  min-width: 250px;
  min-height: 35px;
  height: 35px;
}

#input-choice-tattoo::placeholder{
  color: #efab19;
  font-weight: 700;
  text-transform: uppercase;
  font-style: italic;
  font-size: 0.9em;
}

.arrow_filter{
  color: #efab19;
  font-weight: bold;
}

.pointer_filter{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.arrow_filter{
    -webkit-transition:all .1s linear;
  -moz-transition:all .1s linear;
  -ms-transition:all .1s linear;
  -o-transition:all .1s linear;
  transition:all .1s linear;
}

.menu_filter:hover .arrow_filter{
    -ms-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);

}

.container_filter{
  background-color: #232323;
  position: absolute;
  left: 0px;
  width: auto;
  top: 100%;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 100%;
  z-index: 100;
  border-radius: 5px;
  opacity: 0;
  -webkit-transition:all .1s linear;
  -moz-transition:all .1s linear;
  -ms-transition:all .1s linear;
  -o-transition:all .1s linear;
  transition:all .1s linear;
  border: 1px solid black;
  overflow: visible;
}

.menu_filter:hover .container_filter{
  display: flex;
  opacity: 1;
}

.option_filter{
  padding: 6px 10px;
  color: black;
  cursor: pointer;
  width: 100%;
  opacity: 1;
  -webkit-transition:all .05s linear;
  -moz-transition:all .05s linear;
  -ms-transition:all .05s linear;
  -o-transition:all .05s linear;
  transition:all .05s linear;
  position: relative;
}


.txt_filter{
  color: white;
  margin: 0;
  white-space: wrap;
      /*white-space: nowrap;*/
  display: inline-block;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.option_filter input{
/*  display: none;*/
margin-right: 10px
}

.option_filter:hover{
  opacity: 0.8;
}

.option_filter{
  padding-right: 50px;
}

.menu_filter input[type="checkbox"] {
  
}

.menu_filter input[type="checkbox"]:checked{
  background-color: #efab19 !important;
  height: 13px; width: 13px; line-height: 12px;
  border-radius: 1px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.menu_filter input[type='checkbox']:checked:after {
  content: '\2713';
  color:white;
  font-size: 10px;
  padding: 0 2px
}

.option_filter .checked{
  color: #efab19;
  display: none;
  margin-right: 10px;
  /*
    -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  transform:translateY(-50%);
  position: absolute;
  right: 10px;
  top: 50%;
  */
}

.option_filter {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.option_filter .checked.unchecked{
  color: black;
  display: inline-block;
}



.option_filter input[type=checkbox]:checked ~ .checked{
  display: inline-block;
}

.option_filter input[type=checkbox]:checked ~ .checked.unchecked{
  display: none;
}

#motcle {margin-left: 2%; z-index: 15; width: 100%; background: #fff}
#motcle form {width: 51.25%; }
#motcle .title_filter {margin-bottom: 10px}

#menu-filters{
  margin-bottom: 40px;
}

#container-search-input{
  position: relative;
}

#go-search-input{
  display: none;
  position: absolute;
  left: 100%;
  margin-left: 5px;
    -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  transform:translateY(-50%);
  top: 50%;
  background-color: #efab19;
  color: black;
  padding: 5px;
  cursor: pointer;
  -webkit-transition:all .05s linear;
  -moz-transition:all .05s linear;
  -ms-transition:all .05s linear;
  -o-transition:all .05s linear;
  transition:all .05s linear;
  opacity: 0;
}

#go-search-input:hover{
  background-color: black;
  color: #efab19;
}

#input-choice-tattoo:focus ~ #go-search-input{
  opacity: 1;
}

  #container-title-tattoo{
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 25px;
  }

  #container-search-input{
      width: 100%;

  }

  #motcle #container-search-input {min-width: 52.2%;}

  #container-search-input input{
    width: 100%;
  }

  #container-search-input input::placeholder{
    font-size: 12px;
  }


.arrow_filter{
    display: none;
}

.container_filter{
    position: static;
    display: flex;
    opacity: 1;
    margin-top: 10px;
    background-color: white;
    border: none;
}

.menu_filter{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.option_filter {
    padding: 6px 0px;
    padding-bottom: 0;
    color: black;
    cursor: pointer;
    width: 100%;
    opacity: 1;
    -webkit-transition: all .05s linear;
    -moz-transition: all .05s linear;
    -ms-transition: all .05s linear;
    -o-transition: all .05s linear;
    transition: all .05s linear;
    position: relative;
}

.option_filter p{
  font-weight: 300;
}

#container-title-tattoo{
    flex-direction: row;
    align-items: center;
}

.txt_filter{
    color: black;
}

@media screen and (max-width: 1500px) {
#menu-filters{
  width: 100%;
}
}

@media screen and (max-width: 1150px) {



  .menu_filter{
    margin-bottom: 15px;
    justify-content: flex-start;
  }

  #menu-filters{
    margin-bottom: 10px;
  }

}

#btn-filters{
  display: none;
}

#all-filters{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  z-index: 10;
}

@media screen and (max-width: 867px) {


#btn-filters{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40%;
  background-color: black;
  color: white;
  margin: 0;
  margin-bottom: 15px;
  /* margin-top:11px; */
}

#input-choice-tattoo{
  margin: 0;
  width: 100%;
}

#container-search-input{
  width: 100%;
}

#container-title-tattoo{
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  justify-content: flex-start;
}

#all-filters{
  display: none;
}

.rotate .arrow_filter{
    -ms-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  }

#container-btn-filters{
  width: 100%;
}

#btn-filters .arrow_filter{
  display: block;
  color: white;
}

.menu_filter{
  width: 50%;
  margin-bottom: 0;
}

.container_filter{
  margin-top: 0;
}

.menu_filter .option_filter:first-of-type{
  margin-top: 0;
}

#container-title-tattoo{
  justify-content: flex-start;
  margin-bottom: 15px;
}

#input-choice-tattoo{
  min-width: inherit;
}

.menu_filter{
  position: static;
  margin-bottom: 10px;
}

#container-title-tattoo{
}

  #menu-filters{
    margin-bottom: 15px;
    position: relative;
  }

  .title_filter{
    font-size: 12px;
  }

  .container_filter{
    width: 100%
    min-width: inherit;
    max-width: inherit;
  }

}

@media screen and (max-width: 480px) {

  .container_filter{
    width: 100%;
  }

}

@media screen and (max-width: 340px) {

  .title_filter{
    font-size: 10px;
  }

}

@media (max-width: 767px) {
  #motcle {background: unset; max-width: 340px;margin: 11px auto 0 auto;;}
  #motcle form {width: 96%; }
}