﻿/*
    MOBILE
*/
@media screen and (min-width: 0px) and (max-width: 767px) {
    #desktop-search-filters {
        display: none;
    }

    #mobile-search-filters {
        display: block;
    }

    #search-filters {
        width: 0;
        min-width: 0;
        max-width: 0;
    }

    #mobile-search-hamburger {
        display: block;
    }

    .mobile-search-header-title {
        padding-left: 30px;
    }

    .secondary-header {
        height: 100px;
        min-height: 100px;
        max-height: 100px;
    }
    
    .mobile-search-header-title {
        display: block;
    }

    .desktop-search-header-title {
        display: none;
    }
}

/*
    DESKTOP
*/
@media screen and (min-width: 768px) {
    #desktop-search-filters {
        display: block;
    }

    #mobile-search-filters {
        display: none;
    }

    #search-filters {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
    }

    #mobile-search-hamburger {
        display: none;
    }

    .mobile-search-header-title {
        padding-left: 0;
    }

    .secondary-header {
        height: 130px;
    }

    .search-filters-border {
        border-right: 1px solid;
        border-color: #dddddd;
    }

    .mobile-search-header-title {
        display: none;
    }

    .desktop-search-header-title {
        display: block;
    }
}

.flex-container {
    display: flex;
}

#search-content {
    width: 100%;
}

#search-filters div.panel-heading {
    padding: 7px;
    background-color: #FFFFFF;
}

#search-filters div.panel-title a {
    font-size: 20px;
    color: #D52028;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

#search-filters .accordion-toggle:after {
    content: "-";
    float: right;
    color: #d52028;
    font-size: 30px;
    margin-top: -10px;
}

#search-filters .accordion-toggle:hover {
    cursor: pointer;
}

#search-filters .panel-heading .accordion-toggle.collapsed:after {
    content: "+";
}

#search-filters div.panel-body ul {
    padding: 0;
}

#search-filters div.panel-body li {
    list-style: none;
}

    #search-filters div.panel-body li label {
        font-weight: normal;
    }

#search-filters div.panel-body input[type=checkbox] {
    margin-right: 7px;
}

/*-------------------------------------------------------------*/

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 5%;
    width: 90%;
    text-align: left;
}

.overlay .closebtn {
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 40px;
    z-index: 2000;
    text-decoration: none;
}

/*-------------------------------------------------------------*/

.secondary-page-heading.container {
    height: 100px;
}

.panel-heading, .panel-default, .panel-default > .panel-heading, .panel-body {
    border: 0;
    border-color: none;
}

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border: 0;
        border-color: none;
    }

.panel {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.panel-body {
    padding: 0px 15px;
}

.filters-list label {
    margin-bottom: 5px;
}

.input-group-btn input.btn {
    height: 34px;
}

/*-------------------------------------------------------------*/

/* Show More / Show Less */

ul.filters-list li:nth-child(n+6) {
    display: none;
}

span.showmore {
    cursor: pointer;
    color: #d52028;
}

/*-------------------------------------------------------------*/

.product-page-size > select, .product-sorting > select {
    background: none;
}

/*-------------------------------------------------------------*/


/*-------------------------------------------------------------*/

#selected-filters {
    border-bottom: 1px solid #dddddd;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow-x: auto;
}

    #selected-filters .filter-group {
        margin-left: 10px;
        margin-right: 15px;
    }

        #selected-filters .filter-group .group-header {
            font-size: 12px;
            color: #D52028;
            font-weight: bold;
            text-transform: uppercase;
        }

        #selected-filters .filter-group .remove-filter {
            cursor: pointer;
            margin-left: 10px;
        }

        #selected-filters .filter-group .filter-pill {
            padding-top: 7px;
            padding-bottom: 7px;
            padding-left: 12px;
            padding-right: 12px;
            background-color: #FFFFFF;
            color: #000000;
            border: 1px solid #000000;
        }

    #selected-filters #btn-clear-search:hover {
        background-color: #d1d1d1;
    }

    /*-------------------------------------------------------------*/
    #scroll-to-top {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 85px; /* Place the button at the bottom of the page */
        right: 5px; /* Place the button 30px from the left */
        z-index: 99; /* Make sure it does not overlap */
        border: none; /* Remove borders */
        outline: none; /* Remove outline */
        background-color: #D52028; /* Set a background color */
        color: white; /* Text color */
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: 15px; /* Some padding */
        border-radius: 10px; /* Rounded corners */
        font-size: 18px; /* Increase font size */
    }

    #scroll-to-top:hover {
        background-color: #555; /* Add a dark-grey background on hover */
    }

/*-------------------------------------------------------------*/

