﻿

/*------------MENU CATEGORIAS PRODUCTOS-------------*/

.cat-shadow {
    -webkit-box-shadow: 10px 10px 0px -1px rgba(0,0,0,0.15);
    -moz-box-shadow: 10px 10px 0px -1px rgba(0,0,0,0.15);
    box-shadow: 10px 10px 0px -1px rgba(0,0,0,0.15);
}


.stickyMenu {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 200;
    background-color: white;
}


.color-list {
    background: #E6E6E6;
    color: black;
}

.color-list:hover {
        background: #d83c31;
        color: whitesmoke;
}


.color-list:focus {
        background: #d83c31;
        color: whitesmoke;
}



/*---- CARD PRODUCTO---*/

/*.c-card {
    padding: 15px;
    margin-top: 30px;
    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
    background-color: #121557;
    color: whitesmoke;
}



.img {
    width: 100%;
    object-fit: cover;
    border-radius: 3px;
    border: 3px solid #d83c31;
    -webkit-box-shadow: 0px 3px 8px 1px rgba(24,44,108,0.31);
    -moz-box-shadow: 0px 3px 8px 1px rgba(24,44,108,0.31);
    box-shadow: 0px 3px 8px 1px rgba(24,44,108,0.31);
    /*min-height: 22vh;
    min-width: 100%;*/
    /*height:22vh;
}


.top-sec {
    margin-top: -30px;
    background-color: white;
    position: relative;
    display: block;
    border-radius: 15px;
}


.round-border {
    border-radius: 15px;
    border: 2px solid #121557;
}



.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: all ease 0.5s;
    background: rgba(0, 21, 104, 0.1);
    border-radius: 15px;
}

.top-sec:hover .overlay {
    opacity: 1;
}



.card-tex {
    font-size: 0.8em;
    padding-top: 1.5vh;
    font-family: 'Bookman Old Style';
}



@media (max-width:768px) {
    .card-tex {
        font-size: 0.6em;
        padding-top: 1.5vh;
        font-family: 'Bookman Old Style';
    }
}


.btn1:focus, .btn1:active {
    outline: none !important;
    box-shadow: none !important;
}


.clearfix-btn {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.icon-overlay {
    color: #121557;
    font-size: 1.3em;
}


.a-button {
    background-color: transparent;
    color: #121557;
    border-color: #121557;
    border: 1px solid;
    border-radius: 10px;
    width: 100%;
    text-decoration: none;
}

    .a-button:hover {
        background-color: transparent;
        color: #121557;
        border-color: #121557;
        border: 1px solid;
        width: 100%;
        text-decoration: none;
    }*/



/*------LOADER-------*/

.loader {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 20px auto;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-perspective: 780px;
    perspective: 780px;
}

.loader-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

    .loader-inner.box1 {
        left: 0%;
        top: 0%;
        animation: cssload-rotate-one 1.15s linear infinite;
        -o-animation: cssload-rotate-one 1.15s linear infinite;
        -ms-animation: cssload-rotate-one 1.15s linear infinite;
        -webkit-animation: cssload-rotate-one 1.15s linear infinite;
        -moz-animation: cssload-rotate-one 1.15s linear infinite;
        border-bottom: 3px solid #5C5EDC;
    }

    .loader-inner.box2 {
        right: 0%;
        top: 0%;
        animation: cssload-rotate-two 1.15s linear infinite;
        -o-animation: cssload-rotate-two 1.15s linear infinite;
        -ms-animation: cssload-rotate-two 1.15s linear infinite;
        -webkit-animation: cssload-rotate-two 1.15s linear infinite;
        -moz-animation: cssload-rotate-two 1.15s linear infinite;
        /*border-right: 3px solid rgba(76, 70, 101, 0.99);*/
        border-right: 3px solid #FCE503;
    }

    .loader-inner.box3 {
        right: 0%;
        bottom: 0%;
        animation: cssload-rotate-three 1.15s linear infinite;
        -o-animation: cssload-rotate-three 1.15s linear infinite;
        -ms-animation: cssload-rotate-three 1.15s linear infinite;
        -webkit-animation: cssload-rotate-three 1.15s linear infinite;
        -moz-animation: cssload-rotate-three 1.15s linear infinite;
        border-top: 3px solid #e9908a;
    }

@keyframes cssload-rotate-one {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@-webkit-keyframes cssload-rotate-one {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes cssload-rotate-two {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@-webkit-keyframes cssload-rotate-two {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes cssload-rotate-three {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

@-webkit-keyframes cssload-rotate-three {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}


/*---PRODUCTO NO ENCONTRADO---*/

@keyframes changeColor {
    0% {
        color: #FA0101;
    }

    50% {
        color: #C10202;
    }

    100% {
        color: #870101;
    }
}


.icon-changecolor {
    animation: changeColor 2s infinite;
}



.messageError {
    top: 185px;
    left: 53%;
    position: fixed;
    background: rgba(216,60,49,0.20);
    border-radius: 50px 50px;
    shadow: 0;
}


@media screen and (max-width: 600px) {
    .messageError {
        top: 250px;
        left: 10%;
        position: fixed;
        background: rgba(216,60,49,0.20);
        border-radius: 50px 50px;
        shadow: 0;
    }
}


@media (min-width: 992px) and (max-width : 1200px) {
    .showSucursal {
        height: 90vh;
    }
}



@media (min-width: 600px) and (max-width : 992px) {
    .showSucursal {
        height: 40vh;
    }
}



.form-control:focus {
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}


.loading-txt {
    color: #121557;
    font-size: 1.7em;
}

@media screen and (max-width: 600px) {
    .loading-txt {
        color: #121557;
        font-size: 1.0em;
    }
}



.container {
    max-width: 95% !important;
}



.text-size {
    font-size:1.0em
}


@media screen and (max-width: 500px) {
    .text-size {
        font-size: 0.5em !important;
    }
}




.pagination > li > a {
    background-color: #121557 !important;
    color: whitesmoke !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}


    .pagination > li > a:focus,
    .pagination > li > a:hover,
    .pagination > li > span:focus,
    .pagination > li > span:hover {
        color: whitesmoke !important;
        background-color: #d83c31 !important;
        -webkit-box-shadow: none !important;
        outline: none !important;
    }

.pagination > .active > a {
    color: whitesmoke;
    background-color: #d83c31 !Important;
    border: none !Important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}


.carousel-inner .item {
    transition: all 0.5s ease !important;
}


.altura-minima{
    min-height:800px;
}

@media screen and (max-width: 1199px) {
    .altura-minima {
        min-height: 0px;
    }
}



.btn-circle {
    width: 45px;
    height: 45px;
    padding: 6px 0px;
    border-radius: 25px;
    text-align: center;
    font-size: 18px;
    line-height: 1.42857;
    background-color: #d83c31;
    border-color: #d83c31 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


    .btn-circle:hover,
    .btn-circle:focus,
    .btn-circle:active{
        width: 45px;
        height: 45px;
        padding: 6px 0px;
        border-radius: 25px;
        text-align: center;
        font-size: 18px;
        line-height: 1.42857;
        outline: none !important;
        background-color: #d83c31 !important;
        border-color: #d83c31 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }



.grande {
    visibility: visible !important;
    display: block !important;
}


.pequeno {
    visibility: hidden !important;
    display: none !important;
}

.tamano-t {
    min-height: 800px;
    padding-bottom:0px;
}


@media screen and (max-width: 1199px) {

    .grande {
        visibility: hidden !important;
        display: none !important;
    }


    .pequeno {
        visibility: visible !important;
        display: block !important;
    }

    .tamano-t {
        min-height: 0px;
        padding-bottom: 25px;
    }

}


.heigth-cart {
    height: 640px !important;
}

.heigth-table-cart {
    height: 420px !important;
}



@media screen and (min-width:768px) and (max-width:992px) {


    .heigth-cart {
        height: 830px !important;
    }

    .heigth-table-cart {
        height: 600px !important;
    }


}



@media screen and (max-width: 768px){

    .heigth-cart {
        height: 930px !important;
    }

    .heigth-table-cart {
        height: 600px !important;
    }

}


.left-sec {
    margin-bottom: -20px;
    position: relative;
    display: block;
    border-radius: 25px;
    width: 100%;
    background-color: #0024B5;
    outline: none !important;
    box-shadow: none;
    border-color: #0024B5;
    transition: 0s 0.1s;
}



    .left-sec:focus {
        margin-bottom: -20px;
        position: relative;
        display: block;
        border-radius: 25px;
        width: 100%;
        background-color: #0024B5;

        outline: none !important;
        box-shadow: none !important;
        border-color: #0024B5;
        transition: 0s 0.1s;
    }



    .left-sec:active {
        margin-bottom: -20px;
        position: relative;
        display: block;
        border-radius: 25px;
        width: 100%;
        background-color: #d83c31 !important;
        outline: none !important;
        box-shadow: none !important;
        border-color: #d83c31 !important;
        transition: 0s;
    }


.right-sec {
    margin-bottom: -20px;
    position: relative;
    display: block;
    border-radius: 25px;
    width: 100%;
    background-color: #0024B5;
    outline: none !important;
    box-shadow: none !important;
    border-color: #0024B5;

}


    .right-sec:focus {
        /*margin-bottom: -20px;
        position: relative;
        display: block;
        border-radius: 25px;
        width: 100%;
        background-color: #0024B5;
        outline: none !important;
        box-shadow: none !important;
        border-color: #0024B5;*/
        margin-bottom: -20px;
        position: relative;
        display: block;
        border-radius: 25px;
        width: 100%;
        background-color: #0024B5;
        outline: none !important;
        box-shadow: none !important;
        border-color: #0024B5;
        transition: 0s 0.1s;
    }



    /*.right-sec:disabled {
        margin-bottom: -20px;
        position: relative;
        display: block;
        border-radius: 25px;
        width: 100%;
        background-color: #d83c31 !important;
        outline: none !important;
        box-shadow: none !important;
        border-color: #d83c31;
        opacity: 1 !important;
    }*/



.right-sec:active {
    margin-bottom: -20px;
    position: relative;
    display: block;
    border-radius: 25px;
    width: 100%;
    background-color: #d83c31 !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: #d83c31 !important;
    transition: 0s;
}


.box {
    background: linear-gradient(0deg, rgba(210,245,254,1) 0%, rgba(250,254,255,1) 56%);
    -webkit-box-shadow: 10px 11px 22px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 11px 22px -5px rgba(0,0,0,0.75);
    box-shadow: 10px 11px 22px -5px rgba(0,0,0,0.75);
}




.product-action {
    bottom: 0px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    transition: all 0.6s ease 0s;

}


.product-action-style {
    background-color: #121557;
    box-shadow: 0 0 8px 1.7px rgba(0, 0, 0, 0.06);
    display: inline-block;
    padding: 5px 2px 5px;
    /*-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.54);
    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.54);*/
    border-radius: 25px;
}

    .product-action-style > a {
        color: #979797;
        line-height: 1;
        padding: 0 21px;
        position: relative
    }


        .product-action-style > a.action-plus {
            font-size: 18px
        }



.card:hover .product-action {
    bottom: 5px;
    opacity: 1
}


.product-wrapper {
    overflow: hidden;
    position: relative
}


.shadow-cards {
    -webkit-box-shadow: 10px 10px 36px -21px rgba(24,44,108,1);
    -moz-box-shadow: 10px 10px 36px -21px rgba(24,44,108,1);
    box-shadow: 10px 10px 36px -21px rgba(24,44,108,1);
}


.presentation-mode {
    background-color: #121557 !important;
    color: white !important;
    outline: none !important;
    cursor:pointer;

}


    .presentation-mode:focus {

        outline: 0 !important;
        color: white !important;
        cursor: pointer;
        box-shadow: none !important;
    }


    .presentation-mode:active {

        outline: 0 !important;
        color: white !important;
        cursor: pointer;
        box-shadow: none !important;
    }


.btn-ripple {
    display: inline-block;
    position: relative;
    overflow: hidden;
    transition: all ease-in-out .5s;
}

    .btn-ripple::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 25%;
        height: 100%;
        width: 50%;
        background-color: #000;
        border-radius: 50%;
        opacity: 0;
        pointer-events: none;
        transition: all ease-in-out 1s;
        transform: scale(5, 5);
    }

    .btn-ripple:active::after {
        padding: 0;
        margin: 0;
        opacity: .2;
        transition: 0s;
        transform: scale(0, 0);
    }


.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}

.btn-circle.btn-md {
    width: 40px;
    height: 40px;
    padding: 8px 0px;
    border-radius: 25px;
    font-size: 0.8em;
    text-align: center;
    border: 0px solid #121557;
    background-color: #121557 !important;
    color: white;
}


    .btn-circle.btn-md:hover {
        width: 40px;
        height: 40px;
        padding: 8px 0px;
        border-radius: 25px;
        font-size: 0.8em;
        text-align: center;
        border: 0px solid #af151b;
        background-color: #af151b !important;
        color: white;
    }


    .set-grid-type{
        background-color: #af151b !important;
    }