/**
 *    Toggle & Visibility
 */

.ProjectFilter {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.ProjectFilter--visible {
    max-height: 1180px;
}

.ProjectFilter__inner {
    margin: 20px 20px 0;
    padding: 20px;
    background-color: #f2f8fa;
}

.ProjectFilter__filterToggle {
    display: block;
    margin: 30px 20px 0;
    padding: 0.5em;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background-color: #0081ab;
}

@media screen and (min-width: 580px) {
    .ProjectFilter {
        max-height: none;
    }

    .ProjectFilter__inner {
        margin: 0 0 0 20px;
    }

    .ProjectFilter__filterToggle {
        display: none;
    }
}

/**
 *    Filter
 */

.ProjectFilter__filterTitle {
    margin-top: 0;
    margin-bottom: 0.5em;
}

html .ProjectFilter__form {
    width: auto;
}

.ProjectFilter__label {
    position: absolute;
    left: -999em;
}

.ProjectFilter__search,
.ProjectFilter__region,
.ProjectFilter__year {
    margin-bottom: 0.5em;
}

.ProjectFilter__year,
.ProjectFilter__type,
.ProjectFilter__sector,
.ProjectFilter__fund {
    padding-bottom: 1em;
    background-image: linear-gradient(to left, #002b5a 20%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 5px 1px;
    background-repeat: repeat-x;
}

.ProjectFilter__searchInput,
.ProjectFilter__regionSelect {
    width: 100%;
}

.ProjectFilter__searchInput {
    padding: 0.4em 0.6em 0.5em !important;
}

.ProjectFilter__yearSelect {
    width: 100%;
}

/**
 *    Radio groups
 */

.ProjectFilter__sectorTitle {
    margin-bottom: 0.3em;
    color: #002b5c;
}

.ProjectFilter .proFormListRadio li {
    padding: 0.2em 0;
}

.ProjectFilter input + label {
    cursor: pointer;
}

.ProjectFilter input + label:hover,
.ProjectFilter input:checked + label {
    color: #0081ab;
}

.ProjectFilter__type input {
    margin-top: 0.1em;
}

/**
 *    Button
 */

html .ProjectFilter__button {
    width: 100%;
    margin-top: 1.5em;
}

/**
 *    Info label
 */

.ProjectFilter__infoLabel {
    position: relative;
    display: block;
    float: right;
    border-radius: 8px;
    margin-top: 0.21em;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    background-color: #0081ab;
}

.ProjectFilter__infoLabel:hover {
    color: #fff;
    background-color: #04a1ff;
}

.ProjectFilter__infoLabel:before {
    content: '?';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 0.7em;
    font-family: 'Helvetica', sans-serif;
    line-height: 16px;
    text-align: center;
}

/**
 *    Pop Over
 */

.ProjectFilter__popOver {
    position: absolute;
    right: 0;
    bottom: 20px;
    display: none;
    width: 180px;
    padding: 1em;
    text-indent: 0;
    z-index: 10;
    color: #fff;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ProjectFilter__popOver:after {
    content: "x";
    position: absolute;
    top: 0;
    right: 0;
    padding: .5em;
    font-size: 1em;
    line-height: .8em;
}

.ProjectFilter__infoLabel--active .ProjectFilter__popOver {
    display: block;
}