.menu, #navbar {
    width: 240px;
    border-right: solid 1px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-right: 0;
}
.logo {
    font-size: 20px;
    color: #ff3c3c;
    margin: 10% 10% 0px;
}
.menu ul {
    list-style: none;
    margin: 10%;
    line-height: 1.2;
}
.menu ul li {
    padding: 0.15em;
    background-position: left 15px center;
    background-size: cover;
    transition: all 0.15s linear;
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
}
.menu ul li:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-left: solid 5px #ff3c3c;
}
.smartphone-menu-trigger{
    color: #000;
    font-size: 1.2rem;
    margin: 10% 10% 0;
    line-height: 1.2;
}
.contenedor-gral-productos{
    width: calc(95% - 250px);
    margin: auto;
    margin-right: 2.5%;
}
.tarjeta-producto-pagos {
    width: 18%;
}
.fas.fa-chevron-down{display: none;}

.contenedor-eleccion-categorias{
    border: solid 1px rgba(0, 0, 0, 0.3);
    margin: auto;
    margin-left: 2.5%;
    margin-top: 0;
}
.sticky {
  position: fixed;
  top: 5px;
  left: 0;
  width: auto;
}
.sticky + .content {
  padding-top: 102px;
}
.sticky-fin{
    position: relative;
    margin-bottom: 0;
    margin-top: auto;
}
@media (max-width: 1240px) {
    .tarjeta-producto-pagos {width: 23%;}
}
@media (max-width: 1024px) {
    .tarjeta-producto-pagos {width: 31%;}
}
@media (max-width: 780px) {
    .menu, #navbar {width: 160px;}
    .menu ul {line-height: 1.2;}
    .menu ul li {
        margin-top: 5px;
        font-size: 0.95rem;
    }
    .contenedor-gral-productos {width: calc(95% - 175px);}
    .tarjeta-producto-pagos {width: 47%;}
}
@media (max-width: 600px){
    .menu, #navbar {
        height: 100vh;
        width: 240px;
        position: fixed;
        top: 0px;
        right: 0;
        z-index: 4;
        outline: none;
        border-left: solid 1px rgba(0, 0, 0, 0.3);
        overflow: scroll;
        background-color: #fff;
    }
    .sticky .menu.active, .sticky #navbar{
        z-index: -1;
    }
    .menu {
        padding-top: 1em;
        width: 100%;
        box-shadow: 0 0 0 100em #00000000;
        display: none;
        transition: all 0.1s ease-in-out;
    }
    .contenedor-eleccion-categorias{
        width: 100%;
        border: 0;
        margin: auto;
    }
    .smartphone-menu-trigger {
        width: 100%;
        height: auto;
        padding: 5px 0;
        margin: 0;
        background: #fff;
        z-index: 6;
        display: flex;
        flex-wrap: wrap;
        color: #000;
        font-size: 1.2rem;
        transition: all 0.3s ease-in-out;
        -webkit-box-shadow: 0px 5px 5px 0px rgba(190,190,190,1);
        -moz-box-shadow: 0px 5px 5px 0px rgba(190,190,190,1);
        box-shadow: 0px 5px 5px 0px rgba(190,190,190,1);
    }
    .sticky {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      z-index: 3;
    }
    .sticky + .content {
      padding-top: 102px;
    }
    .active {
        display: block;
    }
    .total-productos{
        margin: auto;
        margin-left: 10px;
        color: #666;
    }
    .filtrar{
        display: flex;
        flex-wrap: wrap;
        margin-right: 10px;
        color: #ff3c3c;
    }
    .fas.fa-chevron-down{display: block; margin-left: 5px;}
    .contenedor-gral-productos {
        width: 95%;
        margin: auto;
    }
    .margen-arriba{
        height: 30px;
    }
}