﻿

.product-div { padding-top:10px;}
.product-short { font-size:15pt; margin:0; margin-top:0px; padding:10px; text-align:center; padding-left:40px; padding-right:40px; }
.product-short i { font-size:12px; }

/*.ribbon-1 {
    position: absolute;
    left:20px; top:20px;
    background: #08769b;
    box-shadow: 0 0 0 999px #08769b;
    clip-path: inset(0 -100%);
    color:#fff;
}

.left {
    inset: 0 auto auto 0;
    transform-origin: 100% 0;
    transform: translate(-29.3%) rotate(-45deg);
}

.right {
    inset: 0 0 auto auto;
    transform-origin: 0 0;
    transform: translate(29.3%) rotate(45deg);
}

.ribbon-2 {
    --f: 10px;*/ /* control the folded part*/
    /*--r: 15px;*/ /* control the ribbon shape */
    /*--t: 10px;*/ /* the top offset */

    /*position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%, calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));
    background: #BD1550;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}*/


/*.box {
    max-width: 500px;
    height: 200px;
    margin: 50px auto 0;
    background: lightblue;
    position: relative;
}*/

/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        /*border: 5px solid #2980b9;*/
    }

    .ribbon span {
        position: absolute;
        display: block;
        width: 225px;
        padding: 15px 0;
        background-color: #3498db;
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 18px/1 'Lato', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: uppercase;
        text-align: center;
    }

/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}

    .ribbon-top-left::before,
    .ribbon-top-left::after {
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-top-left::before {
        top: 0;
        right: 0;
    }

    .ribbon-top-left::after {
        bottom: 0;
        left: 0;
    }

    .ribbon-top-left span {
        right: -25px;
        top: 30px;
        transform: rotate(-45deg);
        /*border:solid 1px #ff0000;*/
        padding:10px;
    }

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}

    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }

    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }

    .ribbon-top-right span {
        left: -25px;
        top: 30px;
        transform: rotate(45deg);
    }

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}

    .ribbon-bottom-left::before,
    .ribbon-bottom-left::after {
        border-bottom-color: transparent;
        border-left-color: transparent;
    }

    .ribbon-bottom-left::before {
        bottom: 0;
        right: 0;
    }

    .ribbon-bottom-left::after {
        top: 0;
        left: 0;
    }

    .ribbon-bottom-left span {
        right: -25px;
        bottom: 30px;
        transform: rotate(225deg);
    }

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}

    .ribbon-bottom-right::before,
    .ribbon-bottom-right::after {
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .ribbon-bottom-right::before {
        bottom: 0;
        left: 0;
    }

    .ribbon-bottom-right::after {
        top: 0;
        right: 0;
    }

    .ribbon-bottom-right span {
        left: -25px;
        bottom: 30px;
        transform: rotate(-225deg);
    }

.ribbon-red span { background-color:red; }

.badge-sale {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    right:0;
    top:0;
    text-align:right;
}
.badge-inner { position:relative; }
.badge-inner i { font-size:150px; color:red; }
.badge-inner span { position:absolute; left:30px; top:44px; font-size:44px; font-weight:bold; color:#fff;  }


.prod-prop {
    padding: 10px;
    font-size: 12pt;
}
.prod-action a { display:block; font-size:12pt; color:#333; padding:3px 10px; margin-bottom:5px; }
.prod-action a i { font-size:22px; position:relative; left:-5px; top:3px; }
.prod-action a:hover { font-weight:bold; }
.prod-action a:hover i { color:#ff6600; }
.prod-action span.selected { color:#ff6600; /*color:#fff;*/ display:block; margin-bottom:5px; padding:3px 10px;  }
.prod-action span.selected i { font-size:22px; position:relative; left:-5px; top:3px; }

.prod-description {font-size:12pt;}
.tab-pane { min-height: 100px; }

.other-pics { text-align:center; position:relative;}
.other-pics a { width:100px; height:100px; border-radius:50%; border:solid 3px #eee; overflow:hidden; display:inline-block; transition:all 0.3s ease-in-out; margin:0 auto !important;  }
.other-pics a:hover { border:solid 5px #ff6600; }
.other-pics a img { height:135%; position:relative; top: -10px; }

.psep { border:dotted 1px silver; }

.prod-versions { }
.tocart { background-color:#eee; padding:20px; border-radius:8px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
.cartbtn { border:solid 1px #ff6600; float:right; }
.cartbtn:hover { border:solid 1px #ff6600; color:#fff; background-color:#ff6600; }
.cartbtn i { font-size:24px; position:relative; top:2px; left:-2px; }

.pricekol {  text-align:left; }
@media (max-width: 768px) {
.pricekol { text-align:center; }
}


.pricekol div.price, .pricekol div.priceeur { padding:3px 10px; background-color:#fff; border-radius:10px; display:inline-block; padding-left:15px; font-size:24px; font-weight:bold;}
.pricekol div.price { margin-top:10px;}
.pricekol span { }
.kolkol { display:inline-block; padding-top:8px;}
.kolkol input { text-align:center; width:60px; padding:3px 5px; font-weight:bold; }
.prod-info-box { margin-top:20px; border-bottom:solid 1px #f8dfce; padding:10px; border-radius:8px; margin-left:20px; padding-left:30px; position:relative;}
.prod-info-box i { font-size:20px; color:#ff6600; position:absolute; top:10px; left:5px; }

.no-order { margin:0px; position:relative; top:-8px; }
.no-order i { font-size:36px; color:#ff6600; position:relative; top:10px; }

.cart-q { border:solid 1px silver; border-radius:4px; }

.checkout-info-label { font-size:16px; font-weight:bold; background:rgba(0,0,0,0.1); margin:10px; padding:10px 10px; display:block; border-radius:7px; color:#ff6600;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; }
.checkout-info-label i { font-size:24px; display:inline-block; text-align:center; position:relative; top:5px; left:-5px; }
.checkout-info-label i.false { color:silver; }
.checkout-info-label i.true { color:#ff6600; }
.checkout-info-label span span { color:#333; font-size:10pt; font-weight:normal; letter-spacing:1px; }


.sim-prod-item {
    /*    background-size: 20px 20px;
    background-image: linear-gradient(to right, silver 1px, transparent 1px), linear-gradient(to bottom, silver 1px, transparent 1px);
*/
/*    background-size: 40px 40px;
    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
*/
    background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
    
    border: dotted 2px #e7e7e7;
    height: 270px;
    display: block;
    margin-top: 10px;
    margin-bottom: 30px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s;
    position: relative;
}
.sim-prod-item:hover { border:dotted 2px #ff6600;  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }

.sim-prod-title { }
.sim-prod-title span { font-size:10pt; color:gray; }
.sim-prod-title label { font-size:12pt; font-weight:bold; color:#333; height:26px; overflow:hidden; }
.sim-prod-image { text-align:center; height:150px; width:100%; overflow:hidden; position:relative; display:inline-block; border:solid 0px red; }
.sim-prod-item .sim-prod-image img { transition:all 0.3s; opacity:1; margin:0 auto; border-radius:50%; }
.sim-prod-item:hover .sim-prod-image img { transform:scale(1.1); opacity:0.8; }
.sim-prod-price { font-size:14pt; font-weight:bold; color:#333; margin-top:10px;}
.sim-prod-price i { font-size:18px; color:#999; }
.sim-prod-item:hover .sim-prod-price { color:#ff6600;  }
.sim-prod-item:hover .sim-prod-title label { color:#ff6600;  }
.sim-prod-item:hover .sim-prod-title span { color:black;  }


.sale-price-old { color: red; text-decoration: line-through; font-size:12pt;}

.product-hash-tags { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.product-hash-tag { padding:3px 7px; float:left; margin-right:10px; margin-bottom:10px; background-color:#eee; font-size:12pt; display:block; border-radius:8px; }
.product-hash-tag i { font-size:18px; position:relative; top:3px; color:gray; }
.product-hash-tag span { }

.mylabel { color: #fff; position: absolute; top: 70px !important; left: -7px; z-index:500; padding:3px 20px; font-size:11pt; padding-right: 40px; clip-path: polygon(0 0, 100% 0%, calc(100% - 16px) 100%, 0% 100%); }
.mylabel-sale { background-color:red; }
.mylabel-new { background-color: #0899fa; }
.mylabel:before {content:""; position:absolute; left:-10px; top:40px; width:30px; height:30px; background-color:lime; z-index:700;}
/*    .mylabel span:before {
        content: '';
        position:absolute; left:0; top:0; bottom:0; right:0;
        background: #ff6600;
        opacity:0.7;
        z-index:400;
    }
*/

.breadcrumbs-div { margin-bottom:20px; background-color:#eee; clip-path: polygon(0 0, 100% 0%, calc(100% - 16px) 100%, 0% 100%); padding:5px 10px; }
    .breadcrumbs-div i.bx-chevrons-right { color:gray; position:relative; top:2px; }
    .breadcrumbs-div i.bxs-circle { font-size:8px; position:relative; top:-2px; margin-left:5px; margin-right:5px; color:#ff6600; }
    .breadcrumbs-div i.bxs-home-circle { color: #ff6600; }
    .breadcrumbs-div a { }
    .breadcrumbs-div a:hover { text-decoration: underline; }


/*.teh_table { font-size:13pt; width:100% }
.teh_head { background-color:#eee; color:#333; font-weight:bold; }
.teh_row { background-color:#fff; border:solid 1px #fff; }
.teh_row:hover { background-color:silver; color:#fff; border:solid 1px #ff0000; font-weight:bold; }
.teh_row_alt { background-color:#dcd8d8; }
.teh_table td { padding:5px;  }

*/

.dostava-free { padding:10px; border:solid 2px #eee; font-weight:bold; color:#ff6600; padding-bottom:0px; border-radius:4px; }
.dostava-free .small { font-weight: normal; position:relative; top:-5px; color:#333; }

.dostava { padding:10px; border:solid 2px #eee; font-weight:bold; color:#333; border-radius:4px;padding-bottom:0px; }
.dostava .small { font-weight: normal; position:relative; top:-5px; color:#333; }


.simslider { margin-top:0;}

.customs-info { border:solid 1px silver; border-radius:10px; padding:20px; margin-bottom:20px; }
.customs-info:hover { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }
.customs-info:hover .cn { color:#ff6600; font-weight:bold; }
.customs-info img { width:50px; }
.customs-info p.cip { margin-top:30px; }
.customs-info p .ci-source { color:gray; font-size:12pt; }
.customs-info p .ci-source i { color:red; font-size:12pt; position:relative; top:2px; }

.item-man-link { width: 100%; border: dotted 1px #ff6600; box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; border-radius: 10px; }


.slick-prev:before {
    content: "<";
    color: red;
    font-size: 30px;
}

.slick-next:before {
    content: ">";
    color: red;
    font-size: 30px;
}

.rel-blog-link { position:relative; margin-bottom:20px; }
.rel-blog-link img { width:100%; }


.table-version tr td a { font-size:12pt;}
.table-version tr td a label { cursor:pointer; margin-left:7px;}

.prod-info-box { }


.prod-ver-price { font-size:13pt; font-weight:bold; }
.prod-ver-curr { font-size: 1em; color: #333; }