:root{
    --title-primary: #2A4D70;
    }

    .shopping-main-title{
        width: 100%;
        height: 350px;
        overflow: hidden;
        position: relative;
    }

    .shopping-main-title img{
        width: 100%;
        height: 350px;
        object-position: bottom;
        object-fit: cover;
    }

    .row-sub-title{
        width: 100%;
        height: 150px;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 15px;
    }

    .logo-sub-title{
        width: 350px;
        height: 75px;
        background: #ffffff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-sub-title p{
        font-family: 'Roboto';
        font-size: 20px;
        margin: 0;
    }

    .btn-ver-fotos{
        transition: transform .2s, box-shadow .1s;
        background-color: #FFF;
        text-decoration: none;
        border-radius: 8px;
        height: 35px;
        color: var(--title-primary);
        text-align: center;
        font-weight: bold;
        border: none;
    }

    .shadow-transition{
        cursor: pointer;
        transition: transform .2s, box-shadow .1s;
    }

    .shadow-transition:hover{
        transition: transform .2s, box-shadow .2s;
        transform: translateY(-2px);
        box-shadow: 1px 1px 4px 0px #0000004f;
    }

    .txt-ver-fotos{
        margin: 0;
    }

    .shopping-content{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        padding-left: 10px;
        padding-right: 10px;
    }

    .nome-shopping{
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .row-shopping{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 8px;
    }

    .card-shopping{
        display: flex;
        flex-direction: row;
        background: #ECECEC;
        padding: 10px;
        border-radius: 10px;
        margin: 8px;
    }

    .card-shopping.img-right{
        justify-content: space-between;
        align-items: center;
    }

    .card-shopping p{
        margin: 0;
        font-family: 'Roboto';
    }

    .card-shopping .title{
        color: var(--title-primary);
        font-weight: bold;
        margin-bottom: 10px;
    }

    .title-row{
        color: #686868;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .img-mapa-shopping{

    }

    .perfil-consumidor{
        text-align: center;
        padding: 3px;
    }

    .bar-animation{
        width: 0;
        transition: width .3s;
    }

    .bar-animation p{
        opacity: 0;
        transition: opacity .4s;
    }

    .A{
        background: #004F32;
        color: white;
    }

    .B{
        background: #2F245E;
        color: white;
    }

    .C{
        background: #1268E8;
        color: white;
    }

    .D{
        background: #eb9834;
        color: white;
    }

    .text-center{
        text-align: center;
    }

    .pointer{
        cursor: pointer;
    }

    .m-0{
        margin: 0 !important;
    }

    .d-flex{
        display: flex;
    }

    .w-100{
        width: 100%;
    }

    .bold{
        font-weight: bold;
    }

    .default-color{
        color: var(--title-primary);
    }

    .number{
        font-size: 20px;
    }

    .text-description{
        font-size: 15px;
    }

    .scroll-row{
        overflow-x: auto; 
        flex-wrap: nowrap; 
        padding-bottom: 10px;
    }

    .scroll-row::-webkit-scrollbar
    {
        height: 10px;
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    .scroll-row::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #5486b8;
    }

    .shadow-background{
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(to bottom, rgba(255,0,0,0), #00000078);
        color: white;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .ellipsis-text{
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .clickable{
        cursor: pointer;
        transition: box-shadow .2s;
    }

    .clickable:hover{
        box-shadow: inset 0 -1px 0px #00000066;
        transition: box-shadow .2s;
    }

    .justify-center{
        justify-content: center;
    }

    .align-center{
        align-items: center;
    }