.breadcrumbs a, .breadcrumbs span {
    transition: 0.2s;
    font-size: 0.8em;
}

    .breadcrumbs a:hover {
        color: #007bff !important;
    }

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #fff;
    color: #ff8400;
    transition: all 0.3s;
}

    #sidebar.active {
        margin-left: -250px;
    }

    #sidebar .sidebar-header {
        padding: 10px 5px 0 10px;
    }

    #sidebar ul.components {
        padding: 10px 0;
    }

    #sidebar ul li a {
        padding: 7px 35px 7px 10px;
        font-size: 0.9em;
        display: block;
        text-decoration: none;
        color: #000;
        transition: 0.2s;
    }

        #sidebar ul li a:hover {
            background: #007bff;
            color: #fff;
        }

    #sidebar ul .sub a:hover {
        background: #f6f6f6;
        color: #202020;
    }

    #sidebar ul li.active > a, a[aria-expanded="true"] {
        color: #fff !important;
        background: #007bff;
    }

    #sidebar ul li a[data-toggle="collapse"] {
        position: relative;
    }

    #sidebar ul li a[aria-expanded="false"] .fa-angle-down {
        display: block;
    }

    #sidebar ul li a[aria-expanded="true"] .fa-angle-up {
        display: block;
    }

    #sidebar ul ul a {
        font-size: 0.9em !important;
        padding-left: 25px !important;
        background: #f6f6f6;
        color: #000;
        opacity: 0.6;
    }

    #sidebar ul.CTAs {
        padding: 20px;
    }

        #sidebar ul.CTAs a {
            text-align: center;
            font-size: 0.9em !important;
            display: block;
            border-radius: 5px;
            margin-bottom: 5px;
        }
/* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */
#content {
    min-height: 100vh;
    transition: all 0.3s;
    padding: 10px 50px;
}
/* --------------------------------------------------- Produtos ----------------------------------------------------- */
.blocoproduto {
    border: 1px solid #fff;
    padding: 0px 10px 10px 10px;
    display: block;
    border-bottom: 1px solid #eaeaea;
}

    .blocoproduto:hover {
        border: 1px solid #eaeaea;
    }

    .blocoproduto a, .blocoproduto a:hover {
        text-decoration: none;
    }
    /* .blocoproduto img {
     width: 100%;
     max-width: 200px;
}
 */
    .blocoproduto .favorito {
        font-size: 1.2em;
        color: #eaeaea;
        transition: 0.1s;
        position: absolute;
        right: 20px;
        margin-top: -40px;
    }

        .blocoproduto .favorito:hover {
            font-size: 1.5em;
            color: red;
            margin: -44px -4px 0 0;
        }

    .blocoproduto .favoritado {
        color: red;
    }

    .blocoproduto h1 {
        font-size: 1em;
       
        display: block;
        overflow: hidden;
    }

.reviews i {
    color: #eaeaea;
}

.reviews .ativo {
    color: #fcc214;
}

.levemais {
    max-width: 190px;
    margin: 10px 0;
}

.tiny {
    font-size: 0.70em;
}

.blocoproduto .economia {
    border-radius: 15px;
    background: #99d22c;
    font-size: 0.7em;
    border-bottom-right-radius: 0;
    min-width: 50px;
    display: block;
    position: absolute;
    left: 20px;
    margin-top: -35px;
}
/* --------------------------------------------------- Input ----------------------------------------------------- */
.spinner {
    width: 40px;
}

    .spinner input {
        text-align: center;
        line-height: 1.3 !important;
        padding-left: 3px;
        padding-right: 3px
    }

.input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}

    .input-group-btn-vertical > .btn {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 9px;
        margin-left: -1px;
        position: relative;
        border-radius: 0;
    }

        .input-group-btn-vertical > .btn:first-child {
            border-top-right-radius: 4px;
        }

        .input-group-btn-vertical > .btn:last-child {
            margin-top: -2px;
            border-bottom-right-radius: 4px;
        }

    .input-group-btn-vertical i {
        position: absolute;
        top: 0px;
        left: 2px;
        font-size: 15px;
    }
/* --------------------------------------------------- Selos ----------------------------------------------------- */
.blocoproduto .prodselo {
    border-radius: 300px;
    width: 70px;
    height: 70px;
    display: block;
    margin-right: -90px;
    right: 48%;
}

.blocoproduto .seloinfo {
    background: #1e0d6d url(https://img.kalunga.com.br/semanainformatica.png) center center no-repeat;
    background-size: 52px;
    opacity: 0.95;
    border-bottom-left-radius: 0;
}

.selo {
    width: auto;
    max-width: 180px;
    min-height: 20px;
    line-height: 1.1em;
    padding: 4px 2px 2px 2px;
    margin: 5px auto;
    font-size: 0.7em;
    border-radius: 4px;
    color: #fff;
    display: block;
}

.fretegratis {
    background: #1359a1;
}

.fretegratisbrasil {
    background: #1359a1;
}

.exclusivo {
    background: #000;
}

.download {
    background: #ffc107;
    color: #202020;
}

.combo {
    background: #ffc107;
}
/* --------------------------------------------------- Owl Slider Category ----------------------------------------------------- */
.slidercategory {
    max-width: 800px;
    margin: 0 auto;
}

    .slidercategory a {
        text-decoration: none;
    }

    .slidercategory .imgcategory {
        width: 80%;
        margin: 0 auto;
    }

    .slidercategory h6 {
        height: 40px;
        display: block;
        overflow: hidden;
    }

    .slidercategory .de {
        height: 20px;
    }

    .slidercategory .economia {
        border-radius: 15px;
        background: #99d22c;
        font-size: 0.7em;
        padding: 5px 0;
        border-bottom-left-radius: 0;
        width: 50px;
    }

    .slidercategory .owl-nav {
        display: none
    }

    .slidercategory .owl-dots {
        width: 100%;
        text-align: center;
        -webkit-appearance: none;
        box-shadow: none !important;
    }

        .slidercategory .owl-dots .owl-dot {
            width: 11px;
            height: 11px;
            display: inline-block;
            background: #ccc;
            border-radius: 50px;
            margin: 2px 3px;
        }

        .slidercategory .owl-dots .active {
            background: #202020;
        }
/* --------------------------------------------------- Destaques category ----------------------------------------------------- */
.spotcategory {
    border-bottom: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    transition: 0s;
    color: #606060;
}

    .spotcategory:hover {
        background: #FBFBFB;
        color: #007bff;
        text-decoration: none;
    }

    .spotcategory img {
        width: 80%;
        margin: 5px auto;
        max-width: 60px;
    }

    .spotcategory p {
        font-size: 0.7em;
        transition: 0.2s;
        line-height: 1em
    }
/* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }

        #sidebar.active {
            margin-left: 0;
        }

    .selo {
        font-size: 0.55em;
    }

    .blocoproduto {
        padding: 10px 10px 20px 10px;
        border-bottom: 1px solid #eaeaea;
    }

        .blocoproduto h1 {
            font-size: 0.75em
        }

    .reviews {
        font-size: 0.8em
    }

    .blocoproduto .h4 {
        font-size: 0.8em
    }

    .blocoproduto .h2 {
        font-size: 2em
    }

    .blocoproduto .tiny {
        font-size: 0.6em
    }

    .blocoproduto .text-dark {
        font-size: 0.9em
    }

    .blocoproduto .levemais .text-dark {
        font-size: 1.1em
    }

    .blocoproduto .prodselo {
        margin-right: -70px;
        right: 48%;
    }

    .slidercategory .h4 {
        font-size: 0.8em;
    }

    .slidercategory .h2 {
        font-size: 2em;
    }

    .slidercategory .de {
        font-size: 0.8em;
        height: 12px;
    }
}

@media (max-width: 420px) {
    .blocoproduto {
        padding: 10px 3px 20px 3px;
        border-bottom: 1px solid #eaeaea;
    }

        .blocoproduto h1 {
            font-size: 0.65em
        }

        .blocoproduto strike {
            font-size: 0.8em
        }

        .blocoproduto .h4 {
            font-size: 1em
        }

        .blocoproduto .h2 {
            font-size: 1.9em
        }

        .blocoproduto .h6 {
            font-size: 0.8em
        }

        .blocoproduto .tiny {
            font-size: 0.65em
        }

        .blocoproduto .text-dark {
            font-size: 0.7em
        }

        .blocoproduto .levemais .text-dark {
            font-size: 0.9em
        }

    #content {
        padding: 10px 30px;
    }
}

.table-responsive {
    overflow-x: hidden !important;
    font-size: 0.7em;
}

.nav-item .fa-chevron-up {
    display: block;
}

.nav-item .fa-chevron-down {
    display: none;
}

.collapsed .fa-chevron-up {
    display: none;
}

.collapsed .fa-chevron-down {
    display: block;
}
