﻿.btn-filter {
    outline: none;
}

    .btn-filter:hover,
    .btn-filter:focus,
    .btn-filter:active {
        background-color: #a07936 !important;
        outline: none;
        color: #FFFFFF;
    }

#toggle-filter {
    background-color: rgb(247,247,247);
    z-index: 2 !important;
    margin-top: 20px !important;
}

@media only screen and (min-width: 1200px)/*, (min-device-width: 1200px)*/ {
    #toggle-filter {
        background-color: rgb(247,247,247);
        z-index: 0 !important;
        display: block;
        margin-bottom: 40px;
        position:sticky !important;
    }
}

@media only screen and (max-width: 1199px)/*, (max-device-width: 1199px)*/ {
    #toggle-filter {
        margin-bottom: 20px;
        height: calc(100vh - 148px);
        /*height: calc(100vh - 173px);*/
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

@media only screen and (max-width: 1199px)/*, (max-device-width: 1199px)*/ {
    .row-filter .navbar-toggle {
        display: block;
        float: left;
        margin-bottom: 1px;
    }
}

@media only screen and (min-width:320px) and (max-width:767px)/*, (min-device-width:320px) and (max-device-width:767px)*/ {
    .row.row-filter {
        top: 144px !important;
        /*top: 10px !important;*/
    }

    #toggle-filter {
        height: calc(100vh - 230px) !important;
        top: 148px !important;
    }
    #btnToggleFilter > span {
        /*top: -100px !important;*/
    }
}
.merchant-card {
    background-color: #FFFFFF;
    transition: ease-in 300ms;
}
@media only screen and (min-width:1200px) /*, (min-device-width:1200px)*/{
    .merchant-card {
        width: calc(100vw/3 - calc(100px + (200 - 100) * ((100vw - 1200px) / (1900 - 1200))));
        margin-right: calc(20px + (40 - 20) * ((100vw - 1200px) / (1900 - 1200)));
    }
}
@media only screen and (min-width:768px) and (max-width:1199px) /*, (min-device-width:768px) and (max-device-width:1199px)*/ {
    .merchant-card {
        width: calc(100vw/3 - calc(40px + (80 - 40) * ((100vw - 768px) / (1199 - 768))));
        /*width: calc(100vw/3 - calc(25px + (50 - 25) * ((100vw - 768px) / (1199 - 768))));*/
        margin-right: calc(13px + (26 - 13) * ((100vw - 768px) / (1199 - 768)));
    }
}
@media only screen and (min-width:576px) and (max-width:767px) /*, (min-device-width:576px) and (max-device-width:767px)*/ {
    .merchant-card {
        width: calc(100vw/2 - calc(40px + (80 - 40) * ((100vw - 320px) / (767 - 320))));
        /*width: calc(100vw/2 - calc(25px + (50 - 25) * ((100vw - 320px) / (767 - 320))));*/
        margin-right: calc(13px + (26 - 13) * ((100vw - 320px) / (767 - 320)));
    }
}
@media only screen and (min-width:320px) and (max-width:575px) /*, (min-device-width:320px) and (max-device-width:575px)*/ {
    .merchant-card {
        width: 100%;
        margin-right: 0;
    }
}
.header-mltradename {
    font-size: calc(12px + (24 - 12) * ((100vw - 300px) / (1900 - 300)));
}

.row-container {
    position: relative;
    background-color: rgb(247,247,247);
}

div.row.row-filter {
    position: sticky;
    top: 121px;
    /*top: 130px;*/
    z-index: 999;
}

.column-toggle-filter {
    padding-left: 30px;
    background-color: transparent;
}

#btnToggleFilter {
    background-color: transparent;
    width: 60px;
}

    #btnToggleFilter > span {
        position: absolute;
        top: -100px;
        right: 3px;
    }
.specificTopMerchantsCMS{
    top: 0 !important;
}
.specificNegativeTopMerchantsCMS {
    top: -100px !important;
}
#btnToggleFilter > span > i.fa.fa-search {
    display: inline-block;
}

#toggle-filter {
    position: fixed;
    /*position: sticky;*/
    top: 148px;
    /*top: 157px;*/
    border-radius: 15px;
}

.btn-filter {
    transition: 300ms;
    min-width: 100px;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 5px;
}

#divMerchantsCMSAppAppPartial {
    background-color: rgb(247,247,247);
    /*background-color: #FFFFFF;*/
}
h1.header-separator {
    width: 100%;
    color: #000000;
    font-weight: 300;
    display: inline-block;
    padding-bottom: 8px;
    position: relative;
    margin-top:40px;
}

    h1.header-separator:before {
        content: "";
        position: absolute;
        width: 5%;
        height: 1px;
        bottom: 0;
        left: 47.5%;
        border-bottom: 5px solid #EBEBEB;
    }
.hr-filter-separator {
    margin: 3px 0 15px 0;
    border: none;
}
.column-half-opacity {
    opacity: 0.5;
}

.filter-is-favourite .glyphicon-heart {
    font-size: 28px;
    color: #A07936;
    cursor: pointer;
}
.row-title{
    background-color: RGB(247,247,247);
}
.link-merchant-website{
    height: 46px;
}