.filter--container {
    position: relative;
    z-index: 2;
}
.filter--container a {color: #808080}
.filter--toggle {
    font-size: 24px;
    font-family: "BC-Falster-Grotesk-Regular", calibri sans-serif;
    font-weight: normal;
    line-height: 34px;
    display: block;
    margin: 2.1rem 0 1.68rem 0;
    text-decoration: none;
}
@media only screen and (max-width: 767px) {
	.filter--toggle {
	    font-size: 20px;
	    line-height: 22px;
	    margin: 9px 0;
	}
}

.filter--toggle:hover {
	text-decoration: none;
}
.filter--toggle .fa {
    height: auto !important;
    line-height: inherit !important;
}
.filter--toggle .fa:before {
	content: "\f105";
}

.filter--links {
    padding: 0.5em;
    position: absolute;
    left: -0.5em;
    top: 140%;
    background: rgba(255,255,255,0.85);
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
    display: none;
	transition: opacity linear 0.3s;
}
.filter--links a {
    text-transform: uppercase;
    font-size: 0.75em;
    border: 1px solid #aaa;
    display: inline-block;
    padding: 0.5em;
    margin-bottom: 0.5em;
}

.filter--container.openned .filter--toggle .fa:before {
	content: "\f107";
}
.filter--container.openned .filter--links {
    display: block;
	-webkit-opacity: 1.0;
	-moz-opacity: 1.0;
	-ms-opacity: 1.0;
	-o-opacity: 1.0;
	opacity: 1.0;
}

/*

<div class="filter--container">
    <h1 href="#" class="filter--toggle">Filter <i class="fa"></i></h1>
    <div class="filter--links">
      <a href="#">Indoors</a>
      <a href="#">Outdoors</a>
      <a href="#">Business</a>
      <a href="#">Office</a>
    </div>
  </div>

 */