html, body {
    overflow-x: hidden;
}
body {
    position: relative
}
nav.navbar {
    background-color: black;
    padding: .25rem 1.5rem .25rem .5rem !important;
}
.nav-item, .nav-link {
    color: #eeeeee;
}
div.title-section, #autoComplete_container {
    height: 20vh;
}
div.title-section:before {
    background: rgb(2,0,36);
    /*background: linear-gradient(-30deg, rgba(2,0,36,1) 0%, rgba(49,147,166,1) 100%, rgba(0,14,40,1) 100%);*/
    background: linear-gradient(315deg, rgba(2, 0, 36, 1) 0%, rgba(49, 147, 166, 1) 60%, rgba(102, 159, 197, 1) 100%);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: black;
}
.btn-outline-primary.btn-sm {
    color: #0b2458;
    background-color: transparent;
    border-color: #0b2458;
}
.btn-outline-primary.btn-sm:hover {
    color: #f1f1f1;
    background-color: #0b2458;
    border-color: #0b2458;
}
.on-sale-label {
    font-size: 125%;
    font-weight: bold;
    padding: 5px 0px 5px 25px;
}
.on-sale-container {
    border-top: solid 1px #4be0fc;
    border-bottom: solid 1px #4be0fc;
}
nav.navbar {
    background-color: transparent !important;
}
#autoComplete_container {
    position: relative;
}
#hero_img {
    position: absolute;
    top: calc(50% - 83.5px);
    left: calc(10% - 5vw);
}
#autoComplete {
    width: 100%;
    border-radius: 20px;
    height: 50px;
    font-size: 20px;
    padding-right: 50px !important;
}
#autoComplete_list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0;
    margin-top: .5rem;
    border-radius: .6rem;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(149,157,165,.15);
    border: 1px solid rgba(33,33,33,.07);
    z-index: 1000;
    outline: 0;
}
.autoComplete_result {
    margin: .3rem;
    padding: .3rem .5rem;
    list-style: none;
    text-align: left;
    font-size: 1rem;
    color: #212121;
    transition: all .1s ease-in-out;
    border-radius: .35rem;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .2s ease;
}
.autoComplete_result:hover {
    cursor: pointer;
    background-color: rgba(255, 250, 159, .35) !important;
}
.autoComplete_wrapper {
    min-width: 250px;
    width: 25vw;
    height: 50px;
    position: relative;
    display: inline-block;
    position: absolute;
    top: calc(50% - 42.5px);
    right: 15%;
}
@media (max-width: 1250px) {
    .autoComplete_wrapper {
        width: 35vw;
    }
}
@media (max-width: 750px) {
    div.title-section, #autoComplete_container {
        height: 35vh;
    }

    #hero_img {
        top: calc(35% - 83.5px);
        left: calc(50% - 184px);
    }

    .autoComplete_wrapper {
        width: 70vw;
        top: calc(70% - 42.5px);
        left: calc(50% - 35vw);
    }
}
#autoComplete_clear {
    position: absolute;
    top: 12.5px;
    right: 15px;
    color: #c0c0c0;
    font-size: 25px;
    cursor: pointer;
}
@media (min-width: 1200px) {
     div.title-section-headline {
         font-size: 30px;
     }
 }
@media (max-width: 1199px) {
     div.title-section-headline {
         font-size: 20px;
     }    
 }
.navbar-collapse.collapse.in {
    display: block!important;
}
@media (min-width:34em) {
     .card-deck > .card
     {
         width: 29%;
         flex-wrap: wrap;
         flex: initial; 
     }
 }
@media(max-width: 991px) {
    #navbarToggler { z-index: 1000 !important; }

    ul.navbar-nav {
        background-color: #000e28;
        padding: 1rem;
    }
}