:root{
  --insiderColorAndBorder:rgb(218,218,218);

}

.chipContainer{
  padding-bottom: unset;
  scroll-margin: 10em 0 0 10em;
  padding-left: 0 !important;
  padding-right: 0 !important;
 /* margin-top: 2em; */
}


.chips-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8em;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2.8em;
  padding-bottom: 1.8em;
  background-image: linear-gradient(-45deg, #fff 25%, var(--greyBg) 25%, var(--greyBg) 50%, #fff 50%, #fff 75%, var(--greyBg) 75%, var(--greyBg) 100%);
  background-size: 56.57px 56.57px;
}

.chips-filter{
  position: sticky;
  top: 1vh ;
}

.chip, .chip-subfilter{
  border: solid 1px var(--insiderColorAndBorder);
  min-width: 6em;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 5em;
  color:rgb(117,117,117);
  transition: var(--transitionTiming);
  background-color: #fff;

}


.activeChip{
  transition: var(--transitionTiming);
  background-color: var(--mainColorHoverDark);
  color:white;
  box-shadow: rgba(135, 198, 90, 0.199) -10px 10px, rgba(135, 198, 90, 0.19) -20px 20px ; 
}
.activeChip:hover{
  background-color: #f0213b !important;
  box-shadow: rgba(240, 33, 59, 0.199) -10px 10px, rgba(240, 33, 59, 0.19) -20px 20px ; 
  color:white;
}
.activeChip i{
  display: inline  !important;
}

.chip i, .chip-subfilter i{
  display: none;
}

.chip:hover, .chip-subfilter:hover{
  background: var(--mainColor);
  color: white;
  cursor: pointer;
}

.chips-container a{
  text-decoration: none;
  border-bottom: none;

}

.bottomMenu {
  position: fixed;
  bottom: 2em;
  right: 3em;
  background: var(--mainColor);
  transition: all .5s;
  padding: 1.5em;
  border-radius: 50%;
  box-shadow: 2px 2px 0.25em 0.25em rgba(0, 0, 0, 0.25);
  z-index: 25;
}
.bottomMenu i{
  color: white;
}
.hide {
  opacity:0;
 
}
.show {
  opacity:1;

}

@media only screen and (max-width: 900px) {
  .chips-container{
    flex-direction: column;
    padding-bottom: 2em;
    width: unset;
    gap:1em;
    
  }
  .chipContainer .cards-title.section-title  {
    margin-bottom: 1em;
  }
  .chip,.chip-subfilter{
    margin-left: auto;
    margin-right: auto;
    width: 22em;
    margin-bottom: unset;
  }
  .bottomMenu {
    right:1em;
    bottom:1em;
  }
  .activeChip:hover{
    background-color: var(--mainColorHoverDark) !important;
    box-shadow: rgba(135, 198, 90, 0.199) -10px 10px, rgba(135, 198, 90, 0.19) -20px 20px ; 

  }
 
}