@import url('https://fonts.googleapis.com/css?family=Roboto:400, 700, 300');

:root {
    /* Colores principales */
    --primary-color: #ff3228;
    --primary-color-claro: #ff7c75;
    --primary-color-muy-claro: #ffeae8;
    --secondary-color: #666666;
    --primary-shadow: rgba(255, 50, 40, 0.6);
    --secondary-color-claro: #a5a5a5;
    --secondary-color-muy-claro: #dadada;
}

div.menu_categorias_izda_externo.abierto li:first-of-type, div.menu_categorias_izda_externo.abierto li:nth-of-type(1n+8), div.menu_categorias_izda_externo.abierto li:nth-of-type(2), div.menu_categorias_izda_externo.abierto li:nth-of-type(3), div.menu_categorias_izda_externo.abierto li:nth-of-type(4), div.menu_categorias_izda_externo.abierto li:nth-of-type(5), div.menu_categorias_izda_externo.abierto li:nth-of-type(6), div.menu_categorias_izda_externo.abierto li:nth-of-type(7) {
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.menu_categorias_izda {
    height: auto;
    overflow: hidden;
    background: var(--secondary-color-claro);
}

.menu_categorias_izda .gremiline, .menu_categorias_izda .gremisat {
    background: var(--secondary-color-claro);
    color: #000;
}

.menu_categorias_izda .especial {
    /*background: #fe121b;*/
}

.menu_categorias_izda .especial2 {
    /*background: #0f3fad;*/
}

.menu_categorias_izda_externo.especial2.abierto a {
    /*color: #053775;*/
}

.menu_categorias_izda div.menu_categorias_izda_externo {
    cursor: pointer;
    border-bottom: 1px solid #fff;
    position: relative;
    width: 100%;
    color: #fff;
    -webkit-transition: text-indent .15s, height .3s;
    transition: text-indent .15s, height .3s;
    box-sizing: border-box;
    font-weight: 700
}

.menu_categorias_izda div.menu_categorias_izda_externo.menu_categorias_imagen {
    background: #fff;
    cursor: initial
}

.menu_categorias_izda div.menu_categorias_izda_externo.menu_categorias_imagen div.menu_categorias_izda_titulo {
    padding: 7px 15px
}

.menu_categorias_izda div.menu_categorias_izda_externo div.menu_categorias_izda_titulo {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px
}

.menu_categorias_izda div.menu_categorias_izda_externo div.menu_categorias_izda_titulo i {
    font-size: 20px;
    width: 30px
}

.menu_categorias_izda div.menu_categorias_izda_externo div.menu_categorias_izda_titulo span {
    max-width: 250px;
    width: 250px
}

.menu_categorias_izda div.menu_categorias_izda_externo div.menu_categorias_izda_titulo .menu_categorias_izda_titulo_interno {
    display: flex;
    align-items: center
}

.menu_categorias_izda div.menu_categorias_izda_externo.gremiline:hover, .menu_categorias_izda div.menu_categorias_izda_externo.gremisat:hover {
    background: var(--primary-color);
}

.menu_categorias_izda div.menu_categorias_izda_externo.especial:hover {
    /*background: #feb2bb;
    color: #000*/
}

.menu_categorias_izda div.menu_categorias_izda_externo.especial2:hover {
    /*color: #fff;
    background-color: #4376b5;*/
}

.menu_categorias_izda div.menu_categorias_izda_externo.menu_categorias_imagen:hover {
    text-indent: 0
}

.menu_categorias_izda div.menu_categorias_izda_externo:hover .bar {
    width: 100%
}

.menu_categorias_izda div.menu_categorias_izda_externo .bar {
    width: 0;
    -webkit-transition: width .15s;
    transition: width .15s;
    position: absolute;
    display: block;
    background: #9a9a9a;
    bottom: 0;
    left: 0;
    height: 0
}

.menu_categorias_izda div.menu_categorias_izda_externo .lil_arrow {
    width: 5px;
    height: 5px;
    -webkit-transition: -webkit-transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: relative;
    top: 0;
    right: 2px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

div.menu_categorias_izda_externo .menu_categorias_izda_interno {
    overflow: hidden;
    left: 0;
    width: 100%;
    -webkit-transition: height .8s ease-out, opacity .8s;
    -moz-transition: height .8s ease-out, opacity .8s;
    -ms-transition: height .8s ease-out, opacity .8s;
    -o-transition: height .8s ease-out, opacity .8s;
    transition: height .8s ease-out, opacity .8s;
    opacity: 0;
    height: 0
}

.menu_categorias_izda_interno ul {
    padding: 0;
    margin: 0
}

.menu_categorias_izda_interno li {
    opacity: 0;
    left: -100%;
    background: #e8e8e8;
    padding: 15px 5px 15px 15px;
    box-shadow: 0 0 #000 inset;
    -webkit-transition: box-shadow .3s, padding-left .3s;
    transition: box-shadow .3s, padding-left .3s;
    position: relative;
    list-style-type: none
}

.menu_categorias_izda_interno li.tipo_imagen {
    padding: 0;
    cursor: initial !important
}

.menu_categorias_izda_interno li div {
    float: none !important;
    padding: 0
}

.gremiline .menu_categorias_izda_interno li, .gremisat .menu_categorias_izda_interno li {
    background: var(--secondary-color-muy-claro);
}

.especial .menu_categorias_izda_interno li {
    /*background: #ffe2e6;
    box-shadow: 0 0 #feb2bb inset*/
}

.especial2 .menu_categorias_izda_interno li {
    /*background: #77abec;
    box-shadow: 0 0 #0f3fad inset*/
}

.menu_categorias_izda_interno li.seleccionado, .menu_categorias_izda_interno li:hover {
    background: #efefef;
    /*background: #fff;
    box-shadow: 3px 0 #d8b714 inset;
    -webkit-transition: .3s linear;
    transition: .3s linear*/
}

.gremiline .menu_categorias_izda_interno li.seleccionado, .gremiline .menu_categorias_izda_interno li:hover, .gremisat .menu_categorias_izda_interno li.seleccionado, .gremisat .menu_categorias_izda_interno li:hover {
    box-shadow: 3px 0 var(--primary-color) inset;
}

.especial .menu_categorias_izda_interno li.seleccionado, .especial .menu_categorias_izda_interno li:hover {
    /*box-shadow: 3px 0 #feb2bb inset*/
}

.especial2 .menu_categorias_izda_interno li.seleccionado, .especial2 .menu_categorias_izda_interno li:hover {
    /*box-shadow: 3px 0 #0f3fad inset*/
}

.menu_categorias_izda_interno li a {
    color: #000;
    font-weight: 400
}

.menu_categorias_izda_interno li.seleccionado a, .menu_categorias_izda_interno li:hover a {
    color: #000;
    font-weight: 700;
    transition: .3s linear
}

.especial .menu_categorias_izda_interno li a, .especial .menu_categorias_izda_interno li.seleccionado a, .especial .menu_categorias_izda_interno li:hover a, .gremiline .menu_categorias_izda_interno li a, .gremiline .menu_categorias_izda_interno li.seleccionado a, .gremiline .menu_categorias_izda_interno li:hover a, .gremisat .menu_categorias_izda_interno li a, .gremisat .menu_categorias_izda_interno li.seleccionado a, .gremisat .menu_categorias_izda_interno li:hover a {
    color: #000
}

.especial .menu_categorias_izda_interno li a, .especial2 .menu_categorias_izda_interno li.seleccionado a, .especial2 .menu_categorias_izda_interno li:hover a {
    /*color: #0f3fad*/
}

.menu_categorias_izda_interno .clear {
    clear: both
}

.img_menu_repuestos {
    max-height: 40px
}

.img_menu_g_gremisat {
    max-height: 30px;
    margin-right: 5px
}

div.menu_categorias_izda_externo.abierto .menu_categorias_izda_interno {
    top: 68px;
    border-bottom: 1px solid #030;
    -webkit-transition: height .8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: height .8s ease-out, opacity .8s;
    -ms-transition: height .8s ease-out, opacity .8s;
    -o-transition: height .8s ease-out, opacity .8s;
    transition: height .8s ease-out, opacity .8s;
    opacity: 1
}

div.menu_categorias_izda_externo.abierto div.menu_categorias_izda_titulo > .lil_arrow {
    -webkit-transition: -webkit-transform .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000
}

div.menu_categorias_izda_externo.abierto, div.menu_categorias_izda_externo.abierto.gremiline, div.menu_categorias_izda_externo.abierto.gremisat {
    /*background: #d8b714;
    color: #000*/
    background: var(--primary-color);
}

div.menu_categorias_izda_externo.abierto.especial {
    /*background: #feb2bb;
    color: #000*/
}

div.menu_categorias_izda_externo.abierto.especial2 {
    /*color: #fff;
    background-color: #4376b5*/
}

div.menu_categorias_izda_externo.abierto .bar {
    width: 0
}

div.menu_categorias_izda_externo.abierto li:first-of-type {
    -webkit-animation: .15s .3s forwards in;
    animation: .15s .3s forwards in;
    -moz-animation: .15s 575ms forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(2) {
    -webkit-animation: .15s .4s forwards in;
    animation: .15s .4s forwards in;
    -moz-animation: .15s .4s forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(3) {
    -webkit-animation: .15s .5s forwards in;
    animation: .15s .5s forwards in;
    -moz-animation: .15s .5s forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(4) {
    -webkit-animation: .15s .6s forwards in;
    animation: .15s .6s forwards in;
    -moz-animation: .15s .6s forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(5) {
    -webkit-animation: .15s .7s forwards in;
    animation: .15s .7s forwards in;
    -moz-animation: .15s .7s forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(6) {
    -webkit-animation: .15s .8s forwards in;
    animation: .15s .8s forwards in;
    -moz-animation: .15s .8s forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(7) {
    -webkit-animation: .15s .9s forwards in;
    animation: .15s .9s forwards in;
    -moz-animation: .15s .9s forwards in
}

div.menu_categorias_izda_externo.abierto li:nth-of-type(1n+8) {
    -webkit-animation: .15s .95s forwards in;
    animation: .15s .95s forwards in;
    -moz-animation: .15s .95s forwards in
}

@-webkit-keyframes in {
    from {
        left: -100%;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

@keyframes in {
    from {
        left: -100%;
        opacity: 0
    }
    to {
        left: 0;
        opacity: 1
    }
}

div.menu_categorias_izda_externo.abierto li {
    left: 0;
    opacity: 1
}

@media (min-width: 768px) and (max-width: 992px) {
    div.menu_categorias_izda_externo {
        font-size: 9pt
    }

    div.menu_categorias_izda_interno {
        font-size: 8pt
    }

    .img_menu_repuestos {
        max-height: 32px
    }

    .img_menu_g_gremisat {
        max-height: 25px
    }
}


.sidebar-nav .navbar li .div-menu-destacados{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    text-align: center;
    align-items: center;
    grid-auto-rows: 1fr;
    /* max-width: 1200px; */
    /* margin: 0 auto; */
    align-items: stretch;
    color: #000;
}

@media only screen and (max-width: 1200px) {
    .sidebar-nav .navbar li .div-menu-destacados {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}
@media only screen and (max-width: 600px) {
    .sidebar-nav .navbar li .div-menu-destacados {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu{
    padding: 15px 10px;
    border: 1px solid #efefef;
    background-color: #f7f7f7;
    border-radius: 1px;
    text-align: center;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu a,
.sidebar-nav .navbar li .div-menu-destacados .destacados-menu a:hover,
.sidebar-nav .navbar li .div-menu-destacados .destacados-menu a:active,
.sidebar-nav .navbar li .div-menu-destacados .destacados-menu a:focus{
    color: inherit;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu i{
    font-size: 18pt;
    margin: 0 0 10px;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu h4{
    margin-top: 0;
    font-size: 13pt;
    font-weight: bold;
    margin-bottom: 0;
}

.sidebar-nav .navbar li .div-menu-destacados.con-novedades .destacados-menu h4{
    font-size: 10pt;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu p{
    margin-bottom: 0;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-novedades{
    background-color: #a9bdfc;
}
.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-novedades a{
    color: #474ccc;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-novedades span.num_novedades{
    position: absolute;
    top: 0;
    left: -2px;
    padding: 5px 5px;
    text-align: center;
    background-color: #FFF;
    font-weight: bold;
    color: #474ccc;
    font-size: 10pt;
    width: 32px;
    border-radius: 100%;
    border: 1px solid #474ccc;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-ofertas{
    background-color: #fcf1d4;
}
.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-ofertas a{
    color: #f2a012;
}

.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-outlet{
    background-color: #efcaca;
}
.sidebar-nav .navbar li .div-menu-destacados .destacados-menu.destacados-menu-outlet a{
    color: #b5423e;
}