body.prod * {
  cursor: none !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.btn {
  background-color: #ffffff;
  border: 3px solid #46af28;
  font-family: g-medium;
  font-size: 20px;
  color: #46af28;
  cursor: pointer;
  padding: 20px;
  text-transform: uppercase;
  margin: 0 50px 0 0;
  transition: all ease-in-out 250ms;

  &:first-child {
      margin: 0 50px 0 50px;
  }
  &:last-child {
      margin: 0;
  }

  &.active {
      background-color: #46af28;
      border: 3px solid #46af28;
      color: #ffffff;
  }

  @media (hover: hover) {
    &:hover {
        background-color: #46af28;
        border: 3px solid #97d287;
        color: #ffffff;
    }
  }

  @media screen and (max-width: 775px) {
    & {
      display: block;
      margin: 0 70px 20px 70px;

      &:first-child {
        margin: 0 70px 20px 70px;
      }
      &:last-child {
        margin: 0 70px 20px 70px;
      }
    }
  }
}

#container {
  max-width: 1080px;
  margin: 0 auto;
  background-image: url('../images/filter-background.png');
  background-repeat: no-repeat;
  background-position: top;
}
#container2 {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  bottom: -12vh;
}

#title {
  text-align: center;
  background-color: #46af28;
  color: #ffffff;
  padding: 30px;

  & h1 {
      font-family: g-bold;
      margin: 0 0 5px 0;
      font-size: 33px;
  }
  & h2 {
      font-family: g-book;
      font-size: 41px;
  }
}

#triangle-info {
  display: flex;
  justify-content: center;
  margin: 50px 0 0 0;

  & #left-triangle-box {
      padding: 30px;
      width: 50%;
      border-right: 2px solid #008545;
      text-align: right;
  }
  & #right-triangle-box {
      padding: 30px;
      width: 50%;

      & p {
          font-family: g-medium;
          font-size: 28px;
          padding: 0 90px 0 0;
          line-height: 1.4;
          color: #008545;
      }
  }

  @media screen and (max-width: 775px) {
    & {
      display: block;

      & #left-triangle-box {
        width: auto;
        border-right: none;
        text-align: center;
      }

      & #right-triangle-box {
        width: auto;
  
        & p {
            padding: 0;
        }
      }
    }
  }
}

#intro-copy {
  margin: 60px 0 30px 0;
  text-align: center;

  & p {
    font-family: g-medium;
    font-size: 15px;
    color: #939598;
    text-transform: uppercase;
  }

  @media screen and (max-width: 775px) {
    & {
      padding: 0 70px 0 70px;
    }
  }
}

#category-selection {
  text-align: center;
  margin: 50px 0 0 0;

  & p {
      font-family: g-medium;
      font-size: 18px;
      text-transform: uppercase;
      color: #008545;
  }

  & #category-buttons-container {
      margin: 18px 0 0 0;
  }
}

.slider_section {
  margin: 0 30px 30px 30px;
  padding: 30px 40px 30px 40px;
  transition: all ease-in-out 450ms;
  outline: 3px solid #ffffff;

  &.active {
    outline: 3px solid #008545;
  }

  & label {
      display: block;
      margin: 45px 0 0 0;
      text-align: center;

      & span.title {
        font-family: g-bold;
        font-size: 27px;
        color: #008545;
        text-transform: uppercase;
        display: block;
        margin: 0 0 8px 0;
      }
      & span.subtitle {
        font-family: g-light;
        font-size: 14px;
        color: #000000;
        display: block;
        max-width: 650px;
        margin: 0 auto;
        line-height: 1.2;
      }
  }
}

.rangeslider__handle {
  border-radius: 22px;
  line-height: 42px;
  text-align: center;
  font-weight: bold;

  &::after {
      background: 0;
  }
}

.rangeslider {
  display: block;
  border-radius: 30px;
  border: 1px solid #008545;
  background: #e6e5ea;
  background-image: linear-gradient(to right, #eb1e24 5%, #46af28 50%, #eb1e24 95%);
  position: relative;
  transition: all ease-in-out 250ms;
}

.rangeslider--horizontal {
  height: 30px;
  width: 100%;
  transition: all ease-in-out 250ms;

  & .rangeslider__fill {
      top: 0;
      height: 100%;
  }

  & .rangeslider__handle {
      top: -17px;
      touch-action: pan-y;
      -ms-touch-action: pan-y;
      transition: all ease-in-out 250ms;

      -webkit-appearance: none;
      appearance: none; 
      height: 67px;
      width: 73px;
      background-image: url("../images/slider-handle.png?v=2");
      background-size: cover;
  }
}

.rangeslider--disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 1.0;

  & .rangeslider__handle {
    top: -17px;

    -webkit-appearance: none;
    appearance: none; 
    height: 67px;
    width: 73px;
    background-image: url("../images/slider-handle-disabled.png?v=2");
    background-size: cover;
  }
}

.rangeslider__fill {
  border-radius: 10px;
  position: absolute;
}

.rangeslider__handle {
  cursor: grab;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

input[type=range]:focus + .rangeslider .rangeslider__handle {
  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}

.sliderticks-container {
  position: relative;
  top: 8px;
  width: 100%;

  & .sliderticks {
      display: flex;
      justify-content: space-between;
      padding: 0 34px;

      & span {
          display: flex;
          justify-content: center;
          width: 5px;
          height: 20px;
          border-radius: 15px;
          background: #333333;
          line-height: 60px;
          font-family: g-light;
      }
  }
}

#message {
  padding: 46px 70px 60px 70px;
  background-image: linear-gradient(to right, #e7e8e9 5%, #ffffff 50%, #e7e8e9 95%);
  transition: all ease-in-out 250ms;

  & .container {
    margin: 0 auto;
    text-align: left;
    display: flex;
    align-items: center;
    transition: all ease-in-out 250ms;

    & img {
      margin: 0 40px 0 0;
    }

    & p {
      font-family: g-medium;
      font-size: 20px;
      color: #000000;
      line-height: 1.2;

      & strong {
        display: inline;
        font-family: g-bold;
      }
    }

    @media screen and (max-width: 715px) {
      & {
        & img {
          margin: 0;
        }

        margin: 0 auto;
        width: 80%;
        padding: 0 40px 0 40px;
        display: block;
        text-align: center;
      }
    }
  }
}

#footer {
  text-align: center;
  padding: 90px 0 60px 0;
  background-image: url('../images/filter-background-footer.png');
  background-repeat: no-repeat;
  background-position: bottom;
  /*position: absolute;
  bottom: 0;
  left: 0;
  right: 0;*/
}