/**************** card ***************/
.card-animation{
    transition: all ease-in-out 0.4s;
}
.card-hover{
    user-select: none;
    cursor: pointer;
}
.card-hover:hover{
    cursor: pointer;
    box-shadow: 0 0 10px var(--bs-dark);
}
.card.category .card-body {
    background-size: cover;
    background-position: center;
}
.card.category .card-body span{
    text-shadow: 0px 0px 15px black;
    margin:0px;
    color:white;
    text-align: center;
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
}
.card.category .card-body div{
    position:absolute;
    height:100%;
    top:0;
    left:0;
    width:100%;
    background-color:rgba(0, 0, 0, 0.50);
}
.card.category {
    transition: all ease-in-out 0.4s;
    cursor:pointer;
}
.card.category .card-body div:hover{
    background-color:rgba(0, 0, 0, 0.70);
}
.card.product{
    height:280px;
    position:relative;
}
.card.category:hover{
    box-shadow: 0 0 15px black;
}
.card.product .card-footer .old{
    color:gray;
    text-decoration: line-through;
}
.card.product .card-footer .discount{
    font-weight:bold;
    padding-left:10px;
}
.card.product .card-body .border{
    border:none !important;
    position:absolute;
    top:0;
    left:0;
}
.card.product .card-body .discount{
    position:absolute;
    z-index: 1;
    color:white;
    font-weight: bolder;
    padding: 15px;
    padding-left:30px;
    padding-right:10px;
    top:0;
    left:0;
    text-shadow: 0 0 10px black;
}
.card.product .card-body .thumbnail{
    height: 100%;
}
.card.product .card-body .discount img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: -1;
}
.card.product .card-body{
    background-size:cover;
    background-position:center;
    padding:0px;
    align-items: center;
    justify-content: center;
    display:flex;
    background-color: white;
}
.card-footer-title{
    height:40px;
    overflow:hidden;
    text-overflow:ellipsis;
    z-index:10;
    position: relative;
    line-height: 1;
}
.card-footer-price{
    z-index:9;
    line-height: 0.5;
}
.card-footer-price b{
    color:orangered;
    letter-spacing:-2px;
    display:inline-block;
}

b, strong, .text-bold{
    font-family: "Source Sans Pro B", "Source Sans Pro", sans-serif;
}

/********** HEADINGS ******************/

h1 span,h2 span,h3 span{
    padding-right: 3px;
}
h1 .btn span,h2 .btn span,h3 .btn span{
    padding:0;
}
h1,h2,.h1,.h2{
    font-family: "Source Sans Pro B", "Source Sans Pro", sans-serif;
    letter-spacing: -2px;
    line-height: 1;
}
h3,.h3{
    font-family: "Source Sans Pro B", "Source Sans Pro", sans-serif;
    letter-spacing: -1px;
}
h4,.h4,h5,.h5,h6,.h6{
    font-family: "Source Sans Pro B", "Source Sans Pro", sans-serif;
    letter-spacing: -1px;
}

h1 thin.fade, .h1 thin.fade, h2 thin.fade, .h2 thin.fade, .h3 thin.fade, h3 thin.fade, h4 thin.fade, .h4 thin.fade, .h5 thin.fade, h5 thin.fade, h6 thin.fade, .h6 thin.fade{
    font-family: "Source Sans Pro", "Source Sans Pro R","Segoe UI", "Helvetica", sans-serif;
    font-weight: normal;
    color:silver;
    opacity: 1 !important;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small{
    letter-spacing: -0.5px;
    line-height: 1;
}
h1 label{
    font-family: "Source Sans Pro", "Source Sans Pro B", sans-serif;
    font-weight: bolder;
}

/*************************************************/

.card.product .card-body .cover{
    border: none !important;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.table thead tr th{
    border:none !important;
}

.dataTables_processing{
    padding:1em 2em !important;
    border-radius: 1em;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(200%) blur(20px);
    background-color:rgba(255,255,255,0.55);
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
}

/*****************************************/

.carousel-control-prev .fa, .carousel-control-next .fa {
    text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.table thead tr{
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

@keyframes slideon {
    0% {
        display:block;
        bottom:100%;
        height:0px;
        //border:1px solid #ced4da;
    }
    100%{
        bottom:10px;
        height:97%;
        //border:1px solid #ced4da;
        box-shadow: rgba(80, 80, 80, 0.5) 0px 5px 10px;
    }
}

@keyframes slideoff {
    0% {
        height : 90%;
        //border:1px solid #ced4da;
        box-shadow: rgba(80, 80, 80, 0.5) 0px 5px 10px;
    }
    100%{
        height:0px;
        box-shadow: none;
        display:none;
    }
}

@media (max-width: 10000px) {
    .card.product {
        height: 336px;
    }
    .card.service {
        height: 500px;
    }
    .card.service .card-body{
        height:150px;
    }
}

@media (max-width: 1440px) {
    .card.product {
        height: 290px;
    }

    .card.service {
        height: 400px;
    }
    .card.service .card-body{
        height:120px;
    }
}

@media (max-width: 1280px) {
    .card.product {
        height: 270px;
    }
}

@media (max-width: 1080px) {
    .card.product {
        height: 250px;
    }
}

@media (max-width: 1024px) {
    .card.product {
        height: 260px;
    }
}

@media (max-width: 900px) {
    .card.product {
        height: 315px;
    }
}

@media (max-width: 812px) {
    .card.product {
        height: 290px;
    }
    .card.service {
        height: 300px;
    }
}

@media (max-width: 800px) {
    .card.product {
        height: 286px;
    }
}

@media (max-width: 768px) {
    /*    *{
            font-size:15px;
        }*/
    .card.product {
        height: 280px;
    }
    .card.service{
        height: 290px;
    }
    .card.service .card-body{
        height:90px;
    }
    .card-footer-title {
        height: 38px;
    }
}

@media (max-width: 667px) {
    .card.product {
        height: 255px;
    }

    .card.service {
        height: 360px;
    }
    .card.service .card-body{
        height:100px;
    }
}

@media (max-width: 640px) {
    .card.product {
        height: 250px;
    }
}

@media (max-width: 568px) {
    .card.product {
        height: 370px;
    }
    .card.service {
        height: 400px;
    }
    .card.service .card-body{
        height:150px;
    }
}

@media (max-width: 414px) {
    .card.product {
        height: 295px;
    }
    .card.service {
        height: 300px;
    }
    .card.service .card-body{
        height:90px;
    }

    .display-1{
        letter-spacing: -3px;
    }
    .display-2{
        letter-spacing: -2px;
    }
    .display-3{
        letter-spacing: -1px;
    }
    .display-4{
        letter-spacing: 0x;
    }
}

@media (max-width: 375px) {
    .card.product {
        height: 268px;
    }

    .card.service {
        height: 260px;
    }
    .card.service .card-body{
        height:61px;
    }
}

@media (max-width: 360px) and (max-height:740px) {
    .product .card-footer{
        height: 110px;
    }
    .card.product {
        height: 265px;
    }
    .card.service {
        height: 300px;
    }
    .card.product .card-body .discount{
        padding: 12px;
        padding-left: 15px;
        padding-right: 10px;
        text-shadow:black;
    }
}


@media (max-width: 320px) and (max-height:568px) {
    div.img-holder{
        height:100px;
    }
    .card.product .card-body .discount{
        padding: 10px;
        text-shadow:black;
    }
    .card.product {
        height: 235px;
    }
    .card.product .subfooter {
        display: block !important;
    }
    .card.product .subfooter .rating {
        display: block !important;
    }
    .card.service {
        height: 250px;
    }
    .card.product .card-footer-title{
        height:30px;
    }
}