:root {
    --primario: cornsilk;
    --primarioOscuro: #898989;
    --secundario: #004AAD;
    --terciario: #E6FEFF;
    --terciarioOscuro: #004AAD;
    --blanco: #FFFF;
    --celesteFondo: #E6FEFF;
    --negro: #000;
    --rojo: rgb(241, 11, 11);
    --fuentePrincipal: 'Comfortaa', cursive;
}

html {
    box-sizing: border-box;
    font-size: 15px;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}


/** Globales **/

body {
    background-color: var(--blanco);
    font-size: 1.1rem !important;
    line-height: 1.5;
}
/*
p {
    font-size: 1.2rem;

    color: var(--primarioOscuro);
}
*/

a {
    text-decoration: none !important;
    font-family: var(--fuentePrincipal) !important;
    color: var(--negro);
}

a:hover {
    text-decoration: underline !important;
}

h1,
h2,
h3,
h4 {
    text-align: center;
    color: var(--primarioOscuro);
    font-family: var(--fuentePrincipal);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1rem;
}


/**Header**/

.header {
    display: flex;
    align-items: center;
}

.header__logo {
    max-width: 180px;
    right: 70%;
}

button:focus {
    outline: 0;
}

.contenedor>.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;


}
.comprar{
    align-self: flex-end;
}

@media (max-width:767px) {
    .bloque:not(.dropdown-content) {
        width: 70px;
        font-size: 0.6rem !important;
    }
    .comprar {
        width: 100%;
    }
    .bloques {
        width: 100%;
        justify-content: space-between;
        display:none!important;
    }
    .bloques {
        width: 100%;
        justify-content: space-between;
    }
}

@media (min-width:768px) {
    .navbar_buttons {
        display:none!important;
    }

}


/**Footer**/

.footer {
    background-color: var(--secundario);
    padding: 1rem 0;
}

.footer__texto {
    font-family: var(--fuentePrincipal);
    text-align: center;
    font-size: 1.5rem;
    color: var(--blanco)
}


/**Navegacion**/
.navbar{
background-color: var(--terciario)!important;
font-family: var(--fuentePrincipal)!important;
}
.navbar-toggler {
    color: var(--terciarioOscuro);
    border: none;
}

.navegacion {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--terciario);
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 3rem;
}
@media (max-width:767px){
.navbar{
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0px 3px 4px 0px grey;
}

.navegacion {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}
}



.navegacion__enlace {
    font-family: var(--fuentePrincipal);
    color: var(--negro);
}

.navegacion__enlace--activo,
.navegacion__enlace:hover {
    color: var(--negro);
}


.navbar_buttons{
    width: 100%;
    display: flex;
    justify-content: space-evenly;


}

.navbar_button{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;


}

.navbar_button > a{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;


}

.navbar_button_image{
    width: 30px;
    height: 30px;
}
.navbar_button_text{
    font-size: 0.80rem;
    white-space: nowrap;
    font-family: var(--fuentePrincipal)!important;
}
/**Grid**/

.grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}



.product_grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
}

@media (max-width:767px) {
    .producto {
        width: 50%;
    }
    .menu-sidebar {
        margin-left: 0px !important;
    }
    .navegacion-lateral__enlace {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding: 10px !important;
    }
    .categorias {
        display: none;
    }
    .collapse_category {
        display: block !important;
    }
}
.pagination{
    flex-wrap: wrap;
    justify-content: center;
}

.menu-sidebar-collapse {
    background-color: var(--secundario);
    border-radius: 6px 6px 0 0;
    color: var(--blanco);
    padding: 15px 20px;
    letter-spacing: .1rem;
}

.collapse_category {
    display: none;
}


/**Categorias**/

.btn-secondary {
    background-color: var(--terciario);
    color: var(--negro);
}

.btn-secondary:hover {
    background-color: var(--terciarioOscuro) !important;
}

.o_website_sale_search {
    margin: auto;
    margin-bottom: 15px;
    margin-top: 15px;
    width: 50%;
}



.category_title {
    margin: 2%;
}


.breadcrumb{
white-space: nowrap;
word-break: break;
background-color:transparent;
}
/**Productos**/

.oe_product {
    height: 350px !important;
}

.producto {
    padding: 1rem;
    max-width: 200px;
}

.producto__imagen {
    width: 170px;
    height: 170px;
}
.producto__imagen>span>img{
      min-width: 100%;
       max-height: 100%;
}

@media (max-width:768px) {
    .producto__imagen {
        width: 70px;
        height: 70px;
    }
}


.producto__informacion {}

.producto__nombre, .o_wsale_products_item_title {
    font-weight: bold;
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--primarioOscuro);
}

.producto__precio, .product_price {
    color: var(--secundario) !important;
    margin:auto;
}

.producto__nombre,
.producto__precio, .o_wsale_products_item_title {
    font-family: var(--fuentePrincipal) !important;
    margin: 1rem 0;
    text-align: center;
}


/** Animacion imagen
.alimento__imagen {
    transition: transform .2s;
}

.alimento__imagen:hover{
    transition: transform .2s;
    transform: scale(1.1);
}**/


/**Banners**/

.banner__category {
    object-fit: cover;
    width: 100%;
    max-height: 300px;
}

.banner_home {
    object-fit: cover;
    max-width: 972px;
    max-height: 350px;
    margin: auto;
}

.carousel-control-prev-icon {}

.banners_categ{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.banner_categ{
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    margin: 5%;

}
.banner_categ_text{
    margin-top: 0;
    font-size: 14px;
    text-transform: uppercase;
    background: var(--terciario);
    margin: 0;
    padding: 8px 10px 5px;
    font-family: var(--fuentePrincipal);
    font-weight: bold;
    color: black;

}
.banner_categ_image{
    object-fit: cover;
    width: 300px;
    height: 300px;
    margin: auto;
}

/**
@media (min-width:768px) {
    .banner--slide {
        grid-row: 1 / 2;
        grid-column: 1 / 4;
        background-image: url(../img/grafico4.jpg);
        margin-bottom: 5rem;
    }
}
**/


/**Nosotros**/

.nosotros {
    display: flex;
    flex-wrap: wrap;
    margin: 5%;
}

@media (min-width:768px) {
    .nosotros {}
}

.nosotros__contenido {
    width: 50%;
    margin: auto;
}

@media (min-width:768px) {
    .nosotros__imagen {
        grid-column: 1 / 2;
    }
}

.oe_website_sale {
    font-family: var(--fuentePrincipal) !important;
}


/**Página del producto**/

@media (max-width:768px) {
    .js_product {
        background-color: var(--terciario);
        padding: 1%;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 10;
        overflow-wrap: anywhere;
        flex-direction: row!important;
        right:0;
        margin-bottom: 0px !important;
    }

    .footer {
        padding-bottom: 70px;
    }
    .show_hide_stock_change{
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .oe_price{
        font-size: 1.9rem;
    }
    .product_price{
        padding: 3%
    }
    .js_product > *{
    font-size: 0.7rem!important;
    padding: 1%!important;
    }

}
.qty-text{
        padding: 1%;
        text-decoration: unset;
    }

.show_hide_stock_change{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px!important;

}
.availability_messages{
    padding: 2%;
}





/**Formulario
.formulario {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.formulario__campo {
    border: .3rem solid var(--primarioOscuro);
    background-color: transparent;
    color: var(--primarioOscuro);
    font-size: 1.7rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1rem;
}

**/

.formulario {
    display: flex;
    flex-grow: 2;
    flex-wrap: wrap;
    flex-direction: row;
    flex: 1 1 50%;
}

.formulario__campo {
    border: .3rem solid var(--primarioOscuro);
    background-color: transparent;
    color: var(--primarioOscuro);
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1rem;
    min-width: 40%;
}

.formulario__submit {
    background-color: var(--terciario);
    font-family: var(--fuentePrincipal);
    color: var(--negro);
    transition: background-color .3s ease;
    grid-column: 1 / 3;
}

.formulario__submit:hover {
    cursor: pointer;
    background-color: var(--secundario);
}


/**Bloques**/

.bloques {
    display: flex;
    flex-wrap: wrap-reverse;
    width: 100% !important;
}

.bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}

.bloque__imagen {
    max-width: 40px;
    height: auto;
    margin: auto;
    justify-content: center;
}

.bloque__titulo {
    padding: 5px;
    font-size: 0.8rem;
    word-wrap: break-word;
}

.carrito {
    text-align: center;
    margin-right: 50px;
    margin-top: -20px;
    margin-left: -45px;
    font-size: 1rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ef790a;
    color: #FFFF;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

@media (min-width:768px) {
    .contenido-principal {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 4rem;
        margin-top: 50px;
    }
}

.navegación-lateral {}

.navegacion-lateral__enlace {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    background: var(--terciario);
    padding: 15px;
    margin-bottom: .2rem;
    font-family: var(--fuentePrincipal);
    font-weight: bold;
}



.menu-sidebar {
    list-style: none;
}

.menu-sidebar {
    background-color: var(--secundario);
    border-radius: 6px 6px 0 0;
    color: var(--blanco);
    padding: 15px 20px;
    letter-spacing: .1rem;
}

.filtro-categoria {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--fuentePrincipal);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--secundario);
    padding: 15px 20px;
    margin-bottom: .1rem;
    margin-left: 40px;
}

.nav-link.active {
    background-color: var(--secundario) !important;
    color: var(--blanco);
    border-radius: 0.25rem;
}

.page-item.active .page-link {
    background-color: var(--secundario) !important;
}

.form-control {
    font-family: var(--fuentePrincipal);
}

.form-group {
    font-family: var(--fuentePrincipal);
}

.oe_login_buttons {
    font-family: var(--fuentePrincipal);
}


/**
Modal
**/
.modal-content{
    width:60%;
    margin:auto;
}
@media (max-width:768px) {
.modal-content{
    width:100%;
}

}
/*cuadro de búsqueda*/

.formulario-buscar{
    display:flex;
    flex-direction:row;
    justify-content: center;

}
.busqueda{
    font-size: 1.2rem;
}
.boton-busqueda{
    background-color: var(--secundario);
}

.modal-body {
    padding-left: 10%;
    padding-right: 10%;
}

.modal-body>*>* {
    margin: 1%;
}


/**Navbar Desplegable **/

.navbar .nav-item:not(:last-child) {}

.dropdown-toggle::after {
    transition: transform 0.15s linear;
    transform: translateY(3px);
}

.show.dropdown .dropdown-toggle::after {
    transform: translateY(3px);
}

.dropdown {
    list-style-type: none;
    /* Remove bullets */
    padding: 0;
    /* Remove padding */
    margin: 0;
    /* Remove margins */
}

.dropdown-menu {

    white-space: normal;
    font-size: 1rem;
    padding: 15px;
    font-family: var(--fuentePrincipal);
}

.dropdown-nav {
    top: 20px;
    background-color: var(--terciario);
    box-shadow: 0px 3px 4px 0px grey;
}

.dropdown-acc {
    top: 60px;
}

@media (max-width:768px) {
    .dropdown-productos {
        position: absolute !important;
        font-size: 20px;
        padding: 20px;
        z-index:1021;
        right: unset;
        overflow-y: scroll;
        height: 270px;

    }

}

@media (min-width:768px) {
    .dropdown-productos {
        overflow-y: scroll;
        height: 600px;
    }

}

.out-of-stock{
    z-index:8!important;
}
.in-stock {
    z-index:8!important;
}


.my_cart_quantity {
    position: absolute;
    max-width: 25px !important;
    background-color: var(--secundario);
}

.o_alternative_product {
    width: 100px;
}

.o_text_overflow {
    padding: 5%;
}


/* The container <div> - needed to position the dropdown content */

.dropdown-cart {}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1021;
    right: 80px;
    top: 60px;
    padding: 10%;
}
.dropdown_sorty_by{
    margin: 3%!important;
}
.dropdown_sorty_by > div{
    left: -150px;
    font-size: 0.8em;

}


/* Show the dropdown menu on hover */




#product_details {
        display: flex;
        flex-direction: column;
        justify-content:center;
        flex-wrap: nowrap;
        align-items: center;
        font-size: 1em;
        text-align: center!important;
    }

.js_product{
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;

    }

#order_delivery{
    font-size: 1rem;
    color: var(--primarioOscuro);
    font-family: var(--fuentePrincipal);
}
.td-product_name{
    word-break:revert;
    font-size:0.8em;
}
.oe_website_sale .toggle_summary_div {
    max-width: 500px!important;
}

.out-of-stock{
    font-family: var(--fuentePrincipal) !important;
}

.in-stock{
    font-family: var(--fuentePrincipal) !important;
}

.o_wsale_products_searchbar_form>.dropdown-menu {
    position: relative !important;
    font-family: var(--fuentePrincipal)!important;
}

.o_wsale_products_searchbar_form>.dropdown-menu>a>div>div>* {
    font-family: var(--fuentePrincipal)!important;
}


.o_product_page_description_title {
    .fa {
        font-size: 1.4rem;
        color: theme-color('primary');

        &:before {
            content: "\f067";
        }
    }
    &:not(.collapsed) {
        .fa:before {
            content: "\f068";
        }
    }
}


.petonline_shop{
padding-left: 5%;
padding-right: 5%;

}
.bs-popover-top {
  display: none;
}

#threshold_message {
display: none;
}