/*** agrega aqui los estilos necesarios para modificar el template ***/

.bs-grid-header__ciudades {
	grid-area: ciudades;
	margin: 0;
}

.bs-header-top .bs-grid-header {
	grid-template-columns: [ciudades] auto [promo] auto [search] 300px [cart] min-content [login] min-content;
}

/*** Estilo de botones para cambio de ciudades ***/

.sizeciudad
{
    font-size: 11.2px;
    padding: 0px;
 
}

@media screen and (max-width: 992px){
.ocultarmenu
{
    display: none;
}
}

.selectorciudad
{
    padding-top: 10px;
    font-size: 12px;
    font-weight: bold;
    
   
}

.selectorciudad2
{
    display: none;
}

@media screen and (min-width: 1289px){
.open-sub-menu
{
    display: none; 
}}

.open-sub-menu
{
    background: #a6775b;
    border: 1px solid #f2ebe7;
    color: white;
    font-weight: bold;
    width: 100%;
}

.open-sub-menu:hover
{
    background: #a6775b;
    border: 1px solid #f2ebe7;
    color: white;
    width: 100%;
    opacity: .7;
}

.ocultarciudad{
    background: #f7f7f7;
    padding: 9px;
    border-radius: 20px;
    width: 30%;
}

@media screen and (max-width: 1288px){
.ocultarciudad {
display: none;
}}

@media screen and (max-width: 992px){
.ocultarciudad
{
    display: none;
}}

/*** Fin estilo de botones para cambio de ciudades ***/

.bs-banner__title {
    color: white;
    filter: drop-shadow(2px 4px 6px black);
}

.article-content {
    padding: 0rem;
    }

.page-link {
    color: #2e2e2e;
}

.page-link:hover {
    color: white;
}

.bs-footer__social {
    display: flow;
    align-items: center;
    padding-bottom: 1rem;
}

.chat-widget__btn {
    background: #25D366;
    box-shadow: var(--box-shadow-widget);
    color: white;
    width: 1.5em;
    height: 1.5em;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: solid 1px rgba(255, 255, 255, 0.3);
}

    .container, .container-xxl {
        max-width: 100%;
    }


@media (max-width: 992px) {
    img[data-bs="header.logo"] {
        width: 120px !important;
        height: auto !important;
        transition: none !important;
    }
}

@media (min-width: 992px) {
.navbar-nav
{
    display: ruby;
    text-align: center;
}}

@media (min-width: 992px) {
    .col-lg-6 {
        -ms-flex: 0 0 1000%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.pt-5, .py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

@media screen and (max-width: 768px) {
    .bs-header-bottom {
        padding-bottom: 3px;
    }
}

