#filters a {
    color: inherit;
    text-decoration: none;
}
#filters input[data-attribute] {
    display: none;
}

#filters input:not([disabled]) + label {
    cursor: pointer;
}

#filters input[type="checkbox"] + label {
    background: url('images/checkbox-off.svg') no-repeat top left;
    background-size: 18px;
    padding-left: 2em;
    max-width: 120px;
    min-width: 120px;
    vertical-align: top;
}

#filters input[type="checkbox"]:checked + label {
    background-image: url('images/checkbox-on.svg');
}

#filters input[type="radio"] + label {
    background: url('images/radio-off.svg') left 10px no-repeat; 
    background-size: 14px;
    line-height: 1em;
    padding-left: 1.5em;    
    padding-right: 1em;
    min-width: 120px;
    vertical-align: top;
    color: #333;
}

.icon-filter {
    background: #eeeeee;
    border-right: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    padding: .5em;
    margin-right: .5em;
}


#filters input[type="radio"]:checked + label {
    background-image: url('images/radio-on.svg');
}

#filters input[type="radio"] + label:hover {
    color: #000;
}

#filters .active-filter-option {
    display: inline-block;
    margin-right: .5em;
}

ul.filtertype, .filtercontainer {
    position: relative;
    background: #eeeeee;
    border-bottom: 1px solid #bdbdbd;
}

.filtercontainer {
    background: #F7F7F7
}

ul.filtertype label {
    font-weight: 300;
}

.filtercontainer {
    font-size: 2em;
    padding: 0;
}

.activefiltervalue {
    font-size: .5em;    
}
.glyphicon {
    background: black;
    color: #fff;
    padding: .5em;
    border-radius: 100%;
    font-size: 8px;
    margin-left: .4em;
}

#filters {
    height: 6em;
    background: #eee;
    margin-bottom: 7em;
    border-bottom: 1px solid #bdbdbd;
}

ul.filtertype {
    display: flex;
    width: 100%;
}

ul.filtertype::after, .filtercontainer::after {
    left: auto;
    right:-4000px;
}

ul.filtertype li { 
    flex: 1 1 auto;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    vertical-align: top;
    text-align: center;
}

ul.filtertype li { 
    min-height: 43px;
}


.filtertype li ul, .filtertype li ul li {
    text-align: left;
}

.filtertype li li {
    padding: .2em 0em;
    border-right: none;
    border-bottom: none;

}

ul.filtertype li label {
    padding:.5em .5em;
    margin-bottom: 0;
}

ul.filtertype li label {
    /*max-width: 125px;*/ 
    /*white-space: nowrap;*/ 
    overflow: hidden;
    line-height: 1em;
    padding: .5em .40em .5em;
    max-height: 37px;
    font-weight: 400;

}

ul.filtertype li li label {
    max-width: none;
    white-space: inherit;
    overflow:auto;
    min-height: 28px;
    max-height: none;
    padding: .8em .4em
}


ul.filtertype li label {
    cursor: pointer;
}

label:empty {
    display: none !important;
}

ul.filtertype li:nth-child(1):hover,
ul.filtertype li:nth-child(1).active {
    border-left-color: #eeeeee;
}


ul.filtertype li:hover li,
ul.filtertype li.active li {                                                             
    background: none;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    font-weight: 600;
    color: #000;
    flex: 0 0  auto;
}

ul.filteropties::before, ul.filteropties::after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -4000px;
    width: 4000px;
    background: #eeeeee;
    border-bottom: 1px solid #bdbdbd;
    border-top: 1px solid #bdbdbd;
    z-index: 1;
}

ul.filteropties::after {
    left: auto;
    right: -4000px;
}

.filterlabel.disabled {
    opacity: .3;
    cursor: default
}

.filterlabel.disabled label {
    cursor: inherit;
}


@media (min-width:1300px) {

    ul.filtertype li.active label {
        color: #db0c16;
    }
    ul.filtertype li.active ul {
        display: flex;
        flex-wrap: wrap;
    }
    ul.filtertype li ul {
        position: absolute;
        top: 44px;
        left: 0;
        right: 0;
        background: #eeeeee;
        display: none;
        border-bottom: 1px solid #bdbdbd;
    } 

    ul.filtertype li.active {
        background: url('images/down.svg') center  calc(100% - 5px) no-repeat;
        background-size: 10px;
        border-right: 1px solid #bdbdbd;
        border-left: 1px solid #bdbdbd;
    }

    [lang=fr] ul.filtertype li.active {
        background: none;
    }

    ul.filtertype::before, ul.filtertype::after, .filtercontainer::before, .filtercontainer::after {
        content:'';
        display: block;
        position: absolute;
        top: 0;
        bottom: -1px;
        left: -4000px;
        width: 4000px;
        background: #eeeeee;
        border-bottom: 1px solid #bdbdbd;
    }

    ul.filtertype::after,.filtercontainer::after {
        left: 0;
        right: -4000px;
        z-index: -1;
    }

    ul.filtertype::before, ul.filtertype::after {
        border-bottom: none;
    }

    .filtercontainer::before, .filtercontainer::after {
        background: #F7F7F7;
    }
    .fake_mobile {
        display: none;
    }

}

@media (max-width:1300px) {

    .icon-filter:before {
        display: none;
    }

    .icon-filter:after {
        font-size: 1em;
        margin-left: -.5em;
    }

    #filters {
        height: auto;
        border-bottom: 0;
        margin-bottom: 1em;
        border-top: none;
        background: none;
    }

    .filtercontainer::before, .filtercontainer::after {
        border-top: 1px solid #bdbdbd;
        top:-1px;
    }


    .fake_mobile {
        display: block;
        position: inherit;
        background: #eee url('images/down.svg') calc(100% - 10px) center no-repeat;
        background-size: 10px;
        padding: 1em;
        border: 1px solid #ddd;
        margin-bottom: 0px;
        font-weight: 400;
        color: #000;
    }

    .fake_mobile input {
        display: none;
    }

    ul.filteropties::before, ul.filteropties::after {
        display: none;    
    }

    ul.filtertype, .filtercontainer {
        border-bottom: none;
        background: none;        
    }

    .filtercontainer {
        padding: .2em 0;
    }

    ul.filtertype {
        /*        position: relative;
                width: 50%;*/
        display: inherit;
    }

    #filters ul {
        background: #f7f7f7;
    }

    .icon-filter {
        display: none;
    }

    #filters .active-filter-option {
        background: #eee;
        border-radius: 5px;
        padding: 0 5px;
        line-height: 1em;
        background: #ccc;        
    }

    #filters ul#active-filters {
        border:none;
        background: none;
    } 

    ul.filtertype li {
        display: none;
        text-align: left;
        padding: 0em;
        border-top: 1px solid #999;   
        background: #eee url(images/right.svg) calc(100% - 10px) center no-repeat;
        background-size: 5px;
        border-right: 1px solid #ddd;    
        border-left: 1px solid #ddd;    
    }

    ul.filtertype li:nth-child(1):hover, ul.filtertype li:nth-child(1).active {
        border-left: 1px solid #ddd;    
    }

    ul.filtertype.open li {
        display:block;
    }

    ul.filtertype li:focus,
    ul.filtertype li:hover {
        background: #aaa;
    }

    .filterlabel.disabled {
        display: none !important;
    }

    .glyphicon {
        margin-left: .5em;

    }

    ul.filtertype li label {
        margin-bottom: 0;
        padding: 1em;
    }

    ul.filtertype li:focus label,
    ul.filtertype li:hover label {
        color: #db0c16;
    }

    ul.filtertype li ul {
        width: 0;
        max-width: 0px;
        /*        right: auto;*/
        /*        position: absolute;
                left: 100%;
                top: 49px;*/
        display: none;
        z-index: 999;
        border-bottom: 1px solid #ddd;
    }  
    ul.filtertype li:hover ul,
    ul.filtertype li:focus ul {
        width: 100%;
        max-width: none;
        display: block;
        min-height: 100%;
    }


    #filters input[type="radio"] + label {
        background: #f7f7f7;
        border-top: 1px solid #ddd;
        display: block;
        margin-bottom: 0;
        max-width: none;
        text-align: left;
    }    

    #filters input[type="radio"]:checked + label {
        color:#db0c16;
        background: none;
    }

    ul.filtertype li ul li  {
        background: #f7f7f7;
        text-align: center;
        border-bottom: none;
        padding: 0 0 0 0;
        border-right: 1px solid #ddd;
    }
}