﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding: 0;
}

/* Wrapping element */

/*#region Navbar */
.bg-nav {
    background-color: #dfdfdf !important;
}

.search-wrapper {
    min-height: 220px;
    background-image: url('../images/banner-automotive.jpg');
    background-position: center center;
    background-size: cover;
    background-color: #9CAAB5;
    position: relative;
    z-index: 0;
}

    .search-wrapper:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        background-color: rgba(0,0,0,0.3);
        width: 100%;
        height: 100%;
        background-image: url('../images/brilliant.png');
        z-index: 1;
    }

    .search-wrapper .container .row {
        min-height: 220px;
    }

    .search-wrapper .input-group.search-input-group {
        z-index: 2;
    }

.brands-wrapper {
}

    .brands-wrapper > div[class*="col-"] {
        padding-bottom: 15px;
    }

    .brands-wrapper .figure {
        display: inline-block;
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        -webkit-box-shadow: 0 0 0 1px #d3dade,0 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 1px #d3dade,0 0 0 0 transparent;
        box-shadow: 0 0 0 1px #d3dade,0 0 0 0 transparent;
        box-shadow: 0 0 0 1px #d3dade,0 0 0 0 transparent;
        /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
        z-index: 0;
        position: relative;
    }

        .brands-wrapper .figure:hover {
            -webkit-box-shadow: 0 0 0 1px #d3dade,0 2px 7px 0 rgba(38,50,56,.2);
            box-shadow: 0 0 0 1px #d3dade,0 2px 7px 0 rgba(38,50,56,.2);
            box-shadow: 0 0 0 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
            z-index: 9999;
        }

        .brands-wrapper .figure .svg-wrapper {
            padding: 10px;
            min-height: 130px;
            max-height: 130px;
            width: 100%;
            display: flex;
            fill: #6c757d;
        }

            .brands-wrapper .figure .svg-wrapper svg {
                height: auto;
                transition: all 0.3s cubic-bezier(.25,.8,.25,1);
            }

            .brands-wrapper .figure .svg-wrapper img {
                max-height: 110px;
                max-width: 100%;
                margin: auto;
            }

        .brands-wrapper .figure:hover .svg-wrapper {
            fill: #343a40;
        }

        .brands-wrapper .figure .figure-caption {
            color: #6c757d;
        }

        .brands-wrapper .figure:hover .figure-caption {
            color: #343a40;
        }
/*#endregion */
/*#region Customes */


.btn-custom,
.btn-custom:focus {
    color: #6c757d;
    background-color: #dfdfdf;
    border-color: #dfdfdf;
}

    .btn-custom:not(:disabled):not(.disabled):active, .btn-custom:not(:disabled):not(.disabled).active, .show > .btn-custom.dropdown-toggle {
        color: #212529;
        background-color: #c8c8c8;
        border-color: #c8c8c8;
    }

    .btn-custom:hover,
    .btn-custom.active {
        background: #c8c8c8;
        border-color: #c8c8c8;
    }

.bootstrap-select .btn,
.bootstrap-select .btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

    .bootstrap-select .btn.btn-custom.rounded-0 + div.dropdown-menu,
    .bootstrap-select .btn.btn-custom.rounded-0 + div.dropdown-menu .inner ul li a {
        border-radius: 0;
    }

    .bootstrap-select .btn.btn-custom + div.dropdown-menu .inner ul li a.active,
    .bootstrap-select .btn.btn-custom + div.dropdown-menu .inner ul li a:focus {
        color: #212529;
        background: #c8c8c8;
    }

/*#endregion */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.bg-w-ds {
    background-color: #ffffff;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}
@media screen and (max-width: 576px) {
    /* Hide captions */
    .text-xs-center {
        text-align:center;
    }
}
