#map {
    height: 100%;
    width: 100%;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}


.filters {
    position: absolute;
    right: 60px;
    bottom: 23px;
    padding: 0 7px;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #aaa;
}

    .filters a {
       box-sizing: border-box;
       display: block;
       float: left;
       width: 52px;
       height: 52px;
       margin: 15px 7px;
       text-indent:-9999px;
       background-size: cover;
       /*transition: 0.5s;*/
       
    }
    
        .filters .f0 {
            margin: 33px 10px 0 10px;
            font-weight: bold;
            display: block;
            box-sizing: border-box;
            float: left;
        }
        .filters .f1 {
            background-image: url(ico-filters-1.svg);
        }
        .filters .f2 {
            background-image:  url(ico-filters-2.svg);
        }
        .filters .f3 {
            background-image:  url(ico-filters-3.svg);
        }
        .filters .f4 {
            background-image:  url(ico-filters-4.svg);
        }
        
        .filters .f1.active {
            background-image:  url(ico-filters-1a.svg);
        }
        .filters .f2.active {
            background-image:  url(ico-filters-2a.svg);
        }
        .filters .f3.active {
            background-image:  url(ico-filters-3a.svg);
        }
        .filters .f4.active {
            background-image:  url(ico-filters-4a.svg);
        }
    
        @media only screen and (max-width: 500px) {
            .filters a {
                width: 36px;
                height: 36px;
                background: transparent url(ico-filters-1.svg) 0 0 no-repeat;
                background-size: cover;
            }
            
            .filters .f0 {
                display: none;
            }
        }