:root {
    --colorFerre: rgb(7,71,28);
    --colorFerreSec : rgb(89,108,103);
    --colorCheck : #0d6efd;
}
.border-ferre{
    border-color:var(--colorFerre)!important
}
.btn-circle.btn-sm {
    width: 70px;
    height: 70px;
    padding: 6px 0px;
    border-radius: 35px;
    text-align: center;
}
.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    text-align: center;
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    text-align: center;
}
body {
    font-size: .875rem;
    position: relative;
    margin: 0;
}
.detallePed {
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
}
h1,h2,h3,h4,h5{
    color: var(--colorFerre);
}
.noBrowser-top{
    margin-top: 2em;
    margin-bottom: 2em;

}
.noBrowser-msg{
    margin-top: 2em;
    font-size: 1.5em;
    margin-left: 3em;
    margin-right: 4em;
}
.noBrowser {
    font-family: Arial, Helvetica, Sans-serif;
    text-align: center;
}

.responsive {
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: bottom;
}
.responsive300 {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: bottom;
}

.btn-Check{
    background-color: var(--colorCheck);
    color: #fff;
    border-radius: 0;
}
.btn-Check:hover{
    color: #fff;
    background-color: rgb(13,169,253);
}

.btnCarru{
    background-color: var(--colorFerre);
    color: #fff;
    top: 50%;
    width: 10vh;
    height: 8vh;
    border-radius: 0%;

}
.panelEnc{
    display: none;
}
#ir-arriba {
    position: fixed;
    padding:10px;
    bottom: 20px;
    font-size:20px;
    right: 30px;
    display: none;
    background-color: var(--colorFerreSec);
    color: #fff;
    border-radius: 0;
}

.text-Ferre{
    color: var(--colorFerre);
}

.btn-ferrecsa{
    background-color: var(--colorFerre);
    color: #fff;
    border-radius: 0;
}
.btn-ferrecsa:hover{
    background-color: #000;
    color: #fff;
}
.btn-ferrecsa-sec{
    background-color: var(--colorFerreSec);
    color: #fff;
    border-radius: 0;
}
.btn-ferrecsa-sec:hover{
    background-color: #000;
    color: #fff;
}
#ir-arriba:hover{
    background-color: #000;
    color: #fff;
}

.bg-ferre{
    background-color: var(--colorFerre);
    color: #fff;
}

.bg-ferre-sec{
    background-color: var(--colorFerreSec);
    color: #fff;
}


.cards-wrapper{
    display: flex;
    .card , .card-empty{
        margin: 1em;
        width: calc(100% / 3);
        transition: all 300ms;
    }
    .btnProd{
        width: 100%;
        height: 100%;
    }
}

.cards-wrapper .card:hover{
    box-shadow: 0 0 10px 0 var(--colorFerre);
}
.cards-wrapper .card-empty:hover{
    box-shadow: 0 0 10px 0 #fff;
}
.cards-wrapper-resp{
    .card{
        height: 100%;
        border: none;
        border-radius: 0;
        margin: 3em;

    }
    .btnProd{
        width: 100%;
        height: 100%;
    }
}

.image-wrapper img{
    max-width: 100%;
    max-height: 100%;
}
.carousel{
    border: none;
    box-shadow: none;
}
.carrusel-prods{
    .image-wrapper{
        /*height: 20vw;*/
        margin: 0 auto;
        /*    display: flex;
            align-items: center;
            justify-content: center;*/
    }

    .carousel-control-prev, .carousel-control-next{
        background-color: var(--colorFerre);
        width: 8vh;
        height: 8vh;
        border-radius: 50%;
        top: 45%;
    }
    .carousel-control-prev span, .carousel-control-next span{
        width: 2em;
        height: 2em;
    }
}
.carrusel{
    .carousel-inner{
        /*padding: 1em;*/
        box-shadow: none;
        box-decoration-break: unset;
    }
    .carousel{
        box-shadow: none;
        box-decoration-break: unset;
    }
}
.carrusel-prods-resp{
    .image-wrapper{
        /*        max-width: 200px;
                max-height: 200px;*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-control-prev, .carousel-control-next{
        background-color: var(--colorFerre);
        width: 5vh;
        height: 5vh;
        border-radius: 50%;
        top: 20%;
    }
    .carousel-control-prev span, .carousel-control-next span{
        width: 2em;
        height: 2em;
    }
}
.prec{
    color: var(--colorFerre);
}

.nav-link{
    color: var(--colorFerre);
}

.btnBuscador{
    border-color: var(--colorFerre);
    background-color: var(--colorFerre);
}

.btnProd{
    background-color: var(--colorFerre);
    color: #fff;
    border-radius: 0px;
}

.btnProd:hover{
    color: #fff;
    background-color: black;
}


.cat{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    color: var(--colorFerre);
}

.contenedor{
    transition: all 300ms;
}

.contenedor:hover{
    background: var(--colorFerre);
}
.contenedor :hover p{
    color: #fff;
}
.contenedor :hover .bi{
    color: #fff;
}

.over{
    background-color: var(--colorFerre);

}
.over a, .over p , .over {
    color: #fff;
}

.over a:hover{
    color: var(--colorFerreSec);
}

.categoriesDiv {
    width:120%
        !important;

}
#inpCant{
    box-sizing: border-box;
    border-color: var(--colorFerre);
    border-radius: 0px;
}
.zoomImg{
    cursor:zoom-in;
}
.inputBuscador {
    width: 100%;
    padding: 6px 10px;
    margin: 5px 0;
    box-sizing: border-box;
    border-color: var(--colorFerre);
    border-radius: 0px;
    outline: none;
}
.inputBuscador:focus{
    outline: none;
}
.centrar{
    display: flex;
    justify-content: center;
    align-items: center;
}
.centrar-horizontal{
    display: flex;
    justify-content: center;
}

.centrar-vertical{
    display: flex;
    align-items: center;
}
.btnmenu{
    display: none;
}
.busca{
    display: none;
}

.btnCat{
    top: 43%;
    width: 50px;
    height:50px;
    border-radius: 50%;
    background-color: var(--colorFerre);
}
.btnCatResp{
    top: 12%;
    width: 50px;
    height:50px;
    border-radius: 50%;
    background-color: var(--colorFerre);
}
footer {
    position: relative;
    margin-top: 209px;
    bottom: 0;
    width: 100%;
}
a{
    text-decoration: none;
}

#carouselExampleControls2{
    display: none
}

.zoom {
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.transition {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
.transitionProd {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

dialog{
    background-color: transparent;
    border: none;
    border-style: none;
    color: white;
}
.dialogImg{
    width: 100%;
    height: 100%;
}
dialog::backdrop {
    background-color:#000000;
    opacity: 0.75;
    border: none;
    backdrop-filter: blur(10px);
    overflow-y: hidden;

}



@media screen and (max-width:980px) {
    .btnmenu{
        display: block;
    }
    .busca{
        display: flex;
    }

    .buscador{
        display: none;
    }
    .cliControl{
        display: none;
    }

    .contenedor{
        width: 50%;
        height: 50%;
        margin-bottom: 0%;
        margin: 0px;
        transition: all 500ms;
    }

}

@media screen and (max-width:767px) {
    #carouselExampleControls1{
        display: none;
    }
    #carouselExampleControls2{
        display: block;
    }
    .carousel-control-prev{
        margin-top: 34%;
    }
    .carousel-control-next{
        margin-top: 34%;
    }
    .btnCarru{
        top: 40%;
        margin-top: 0%;
        width: 4vh;
        height: 3vh;
    }
    .enc{
        display: none
    }
}
@media screen and (max-width:550px) {
    .imgProd{
        width:250px;
        height: 250px
    }
}


div.center {
    text-align: center;
}

#titulo {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33),
        -1px 0px 2px rgba(255, 255, 255, 0);
}
.spinner-4 {
    width: 50px;
    --b: 8px; /* the border thickness */
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(#0000 10%,var(--colorFerre)) content-box;
    -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
        radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation:s4 1s infinite steps(10);
}
@keyframes s4 {
    to{
        transform: rotate(1turn)
    }
}
.spinner-5 {
    width: 50px;
    --b: 8px; /* the border thickness */
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
        radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation: s5 1s infinite;
}
@keyframes s5 {
    to{
        transform: rotate(.5turn)
    }
}

.checkmark__circle{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
.checkmark{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.checkmark__check{
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}
@keyframes stroke{
    100%{
        stroke-dashoffset: 0
    }
}
@keyframes scale{
    0%, 100%{
        transform: none
    }
    50%{
        transform: scale3d(1.1, 1.1, 1)
    }
}
@keyframes fill{
    100%{
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}

.breadcrumb {
    font: .75em sans-serif;
    list-style: none;
}


.breadcrumb.bc3x {
    font-size: 1.4em;
}

.breadcrumb p {
    margin: 0;
}

.breadcrumb li {
    display: inline-block;
    margin-bottom: .2em;
}

.breadcrumb li a {
    background-color: var(--colorFerreSec);
    box-sizing: border-box;
    color: #fff;
    display: block;
    max-height: 2em;
    padding: .5em 1em .5em 1.5em;
    position: relative;
    text-decoration: none;
    transition: .25s;
    pointer-events: none;
}

.breadcrumb li a:before {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid #fff;
    content: "";
    position: absolute;
    top: 0;
    right: -.9em;
    z-index: 1;
}

.breadcrumb li a:after {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid var(--colorFerreSec);
    content: "";
    position: absolute;
    top: 0;
    right: -.9em;
    transition: .25s;
    z-index: 1;
}

.breadcrumb li.active a:after {
    border-top: 1em solid transparent;
    border-bottom: 1em solid transparent;
    border-left: 1em solid var(--colorFerre);
    content: "";
    position: absolute;
    top: 0;
    right: -.9em;
    transition: .25s;
    z-index: 1;
}

.breadcrumb li.active a:hover {
    background-color: var(--colorFerreSec);
}

.breadcrumb li.active a:hover:after {
    border-left-color: var(--colorFerreSec);
}

.breadcrumb li.active a{
    background-color: var(--colorFerre);
    pointer-events: auto;
}