/* ================== Badge Overlay CSS ========================*/
.badge-overlay {
    position: absolute;
    left: 0%;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 100;
    -webkit-transition: width 1s ease, height 1s ease;
    -moz-transition: width 1s ease, height 1s ease;
    -o-transition: width 1s ease, height 1s ease;
    transition: width 0.4s ease, height 0.4s ease
}

.badge-overlay > span.badge {
    margin: 0;
    padding: 0;
    color: white;
    padding: 10px 10px;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    background: #ed1b24;
}

.badge-overlay > span.badge::before, .badge-overlay > span.badge::after {
    content: '';
    position: absolute;
    top: 0;
    margin: 0 -6px;
    width: 100%;
    height: 100%;
    background: inherit;
    min-width: 55px
}

.badge-overlay > span.badge::before { right: 100% }
.badge-overlay > span.badge::after { left: 100% }
.badge-overlay > span.top-left {
    position: absolute;
    top: 0;
    left: 0;
    -ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);
    -webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);
    transform: translateX(-30%) translateY(0%) rotate(-45deg);
    -ms-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}

.badge-overlay > span.top-right {
    position: absolute;
    top: 0;
    right: 0;
    -ms-transform: translateX(30%) translateY(0%) rotate(45deg);
    -webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
    transform: translateX(30%) translateY(0%) rotate(45deg);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}

.badge-overlay > span.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    -ms-transform: translateX(-30%) translateY(0%) rotate(45deg);
    -webkit-transform: translateX(-30%) translateY(0%) rotate(45deg);
    transform: translateX(-30%) translateY(0%) rotate(45deg);
    -ms-transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}

.badge-overlay > span.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    -ms-transform: translateX(30%) translateY(0%) rotate(-45deg);
    -webkit-transform: translateX(30%) translateY(0%) rotate(-45deg);
    transform: translateX(30%) translateY(0%) rotate(-45deg);
    -ms-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}

.badge-overlay > span.top-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.badge-overlay > span.middle-full {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -ms-transform: translateX(0%) translateY(-50%) rotate(0deg);
    -webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);
    transform: translateX(0%) translateY(-50%) rotate(0deg);
}

.badge-overlay > span.bottom-full {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.badge-overlay > span.badge.red { background: #ed1b24; }
.badge-overlay > span.badge.orange { background: #fa7901; }
.badge-overlay > span.badge.pink { background: #ee2b8b; }
.badge-overlay > span.badge.blue { background: #00adee; }
.badge-overlay > span.badge.green { background: #b4bd00; }

.badge-overlay > span.badge {
    border-radius: inherit;
}
/* hide ugly badge */
.details .discount, .detail .discount {
    display: none !important;
}