:root {
    --scblue: #393185;
    --color1: #303b81;
    --color3: #051a50;
    --color2: #393185;
    --color4: #ecf2f5;
    --bg: #e4e4e4;
    --main: #000;
    --main-l: #373737;
    --dark: #303030;
    --light: #eef3ff;
    --repairs-bg: #bac9ef;
    --copy-bg: #1a2253;
    --btn-buy: #ffc915;
    --btn-buy-h: #d3a81a;
    --btn-main: #ffc915;
    --btn-main-h: #d3a81a;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

html {
    font-size: 14px;
    overflow-x: hidden;
    font-family: Verdana, Geneva, sans-serif;
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    font-family: Verdana, Geneva
}

.row {
    margin: 0;
    padding: 0;
}

.j-link {
    cursor: pointer;
}

.mistake {
    position: relative;
}

    .mistake:before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        right: 0;
        border-top: 1px solid;
        border-color: inherit;
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

@media (min-width: 768px) {

    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    height: 100%;
}

#main {
    background-color: rgba(0,0,0,0.05);
}

#main-logo {
    display: block;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgODAgMjQiIHdpZHRoPSI4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIj48cGF0aCBkPSJtMCAwaDgwdjI0aC04MHoiIGZpbGw9IiNmZmM5MTUiLz48cGF0aCBkPSJtMzMuMDIgNy4xNDg4ODg4OWMxLjI1MzMzMzMgMCAyLjQ2MjIyMjIuNDI0NDQ0NDQgMy4zNzc3Nzc4IDEuMTc1NTU1NTV2LTEuMDA0NDQ0NDRoMS43MTc3Nzc4djEwLjkzMTExMTFoLTEuNzE3Nzc3OHYtMWMtLjkuNzQ2NjY2Ny0yLjEwODg4ODkgMS4xNjg4ODg5LTMuMzc3Nzc3OCAxLjE2ODg4ODktMS41NTU1NTU2IDAtMi45NzExMTExLS41NzU1NTU2LTMuOTg0NDQ0NC0xLjYyLTEuMDA0NDQ0NS0xLjAzMTExMTEtMS41NTU1NTU2LTIuNDUzMzMzMy0xLjU1NTU1NTYtNC4wMDY2NjY3IDAtMS41NTU1NTU1LjU1MzMzMzMtMi45ODIyMjIxOSAxLjU1NTU1NTYtNC4wMTc3Nzc3NCAxLjAxNTU1NTUtMS4wNDg4ODg4OSAyLjQzMTExMTEtMS42MjY2NjY2NyAzLjk4NDQ0NDQtMS42MjY2NjY2N3ptLTExLjg5MTExMTEtLjA0YzEuNDA2NjY2NyAwIDIuNjgyMjIyMi41MTMzMzMzMyAzLjU5NTU1NTUgMS40NDg4ODg4OS45NzExMTEyLjk5NTU1NTU1IDEuNDg4ODg4OSAyLjM5MzMzMzMyIDEuNSA0LjA0NjY2NjYydi41NjIyMjIzaC04Ljg0NjY2NjZjLjEwNjY2NjYgMi4wNTMzMzMzIDEuNjczMzMzMyAzLjU3Nzc3NzcgMy43MTExMTExIDMuNTc3Nzc3NyAxLjQ2MjIyMjIgMCAyLjUwODg4ODktLjYyNDQ0NDQgMy4yOTU1NTU1LTEuOTY0NDQ0NGwuMDk1NTU1Ni0uMTYyMjIyMiAxLjQ4ODg4ODkuOTU3Nzc3OC0uMDg2NjY2Ny4xNDg4ODg4Yy0xLjAwODg4ODkgMS43MzU1NTU2LTIuNjY2NjY2NiAyLjY1MzMzMzQtNC43OTU1NTU1IDIuNjUzMzMzNC0zLjIxMTExMTEgMC01LjQ1MzMzMzQtMi4zMTMzMzM0LTUuNDUzMzMzNC01LjYyNDQ0NDUgMC0zLjI3MTExMTA4IDIuMzExMTExMS01LjY0NDQ0NDQxIDUuNDk1NTU1Ni01LjY0NDQ0NDQxem00NS42OTU1NTU1IDBjMS40MDY2NjY3IDAgMi42ODIyMjIzLjUxMzMzMzMzIDMuNTk1NTU1NiAxLjQ0ODg4ODg5Ljk3MTExMTEuOTk1NTU1NTUgMS40ODg4ODg5IDIuMzkzMzMzMzIgMS41IDQuMDQ2NjY2NjJ2LjU2MjIyMjNoLTguODQ2NjY2N2MuMTA2NjY2NyAyLjA1MzMzMzMgMS42NzMzMzM0IDMuNTc3Nzc3NyAzLjcxMTExMTEgMy41Nzc3Nzc3IDEuNDYyMjIyMyAwIDIuNTA4ODg4OS0uNjI0NDQ0NCAzLjI5NTU1NTYtMS45NjQ0NDQ0bC4wOTU1NTU2LS4xNjIyMjIyIDEuNDg4ODg4OC45NTc3Nzc4LS4wODY2NjY2LjE0ODg4ODhjLTEuMDA4ODg4OSAxLjczNTU1NTYtMi42NjY2NjY3IDIuNjUzMzMzNC00Ljc5NTU1NTYgMi42NTMzMzM0LTMuMjExMTExMSAwLTUuNDUzMzMzMy0yLjMxMzMzMzQtNS40NTU1NTU1LTUuNjI0NDQ0NSAwLTMuMjcxMTExMDggMi4zMTMzMzMzLTUuNjQ0NDQ0NDEgNS40OTc3Nzc3LTUuNjQ0NDQ0NDF6bS01MS44NTMzMzMzLjE4ODg4ODg5djEuNjMzMzMzMzNoLTQuOTc3Nzc3Nzd2OS4zMTc3Nzc3OWgtMS43Mzc3Nzc3N3YtMTAuOTUxMTExMTJ6bTQwLjg0LS4xNDg4ODg4OWMyLjQ4ODg4ODkgMCA0LjAzNTU1NTYgMS43MDg4ODg4OSA0LjAzNTU1NTYgNC40NjAwMDAwMXY2LjYyaC0xLjczNzc3Nzh2LTYuNjJjMC0xLjcxNzc3Nzc5LS45ODQ0NDQ1LTIuODI2NjY2NjgtMi41MDg4ODg5LTIuODI2NjY2NjgtMS45NiAwLTIuNjU3Nzc3OCAxLjM1MTExMTA4LTIuNjU3Nzc3OCAyLjYxNTU1NTU4djYuODMzMzMzM2gtMS43Mzc3Nzc4di02LjYyYzAtMS43NDQ0NDQ0My0uOTUzMzMzMy0yLjgyNjY2NjY2LTIuNDg4ODg4OC0yLjgyNjY2NjY2LTEuMjY0NDQ0NSAwLTIuNjE1NTU1Ni45ODIyMjIyMy0yLjYxNTU1NTYgMi40NDQ0NDQ0NnY2Ljk5NTU1NTVoLTEuNzM3Nzc3OHYtMTAuOTI4ODg4ODRoMS43Mzc3Nzc4djEuMDZjLjcxNzc3NzgtLjc4MjIyMjIzIDEuNzQtMS4yMDY2NjY2NyAyLjkzMzMzMzMtMS4yMDY2NjY2NyAxLjc2NjY2NjcgMCAyLjczMzMzMzQuODkzMzMzMzMgMy4yNTMzMzM0IDEuNzQuNzkxMTExMS0xLjEwODg4ODg5IDIuMDU3Nzc3Ny0xLjc0IDMuNTI0NDQ0NC0xLjc0em0tMTMuNzA0NDQ0NC0zLjA3Nzc3Nzc4djE0LjE1Nzc3Nzc5aC0xLjczNzc3Nzh2LTE0LjE1Nzc3Nzc5em0tOS4xNzMzMzM0IDQuODE3Nzc3NzhjLTIuMTE3Nzc3NyAwLTMuNzE1NTU1NSAxLjY4MDAwMDAxLTMuNzE1NTU1NSAzLjkwNjY2NjcxIDAgMi4yMTU1NTU1IDEuNTk3Nzc3OCAzLjg4NDQ0NDQgMy43MTU1NTU1IDMuODg2NjY2NiAyLjE5Nzc3NzggMCAzLjY3MzMzMzQtMS41NjIyMjIyIDMuNjczMzMzNC0zLjg4NjY2NjYgMC0yLjMzNTU1NTYtMS40NzU1NTU2LTMuOTA2NjY2NzEtMy42NzMzMzM0LTMuOTA2NjY2NzF6bS0xMS44NDQ0NDQ0LS4xNDg4ODg4OWMtMS43NTExMTExIDAtMy4yMTMzMzMzIDEuMTY0NDQ0NDQtMy42MzExMTExIDIuODU3Nzc3OGg3Yy0uMzA2NjY2Ny0xLjcxNzc3NzgtMS42MzU1NTU2LTIuODU3Nzc3OC0zLjM2ODg4ODktMi44NTc3Nzc4em00NS42OTMzMzMzIDBjLTEuNzUxMTExMSAwLTMuMjEzMzMzMyAxLjE2NDQ0NDQ0LTMuNjMxMTExMSAyLjg1Nzc3NzhoN2MtLjMwNjY2NjctMS43MTc3Nzc4LTEuNjM1NTU1NS0yLjg1Nzc3NzgtMy4zNjg4ODg5LTIuODU3Nzc3OHoiIGZpbGw9IiMxMTEiLz48L2c+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: top center;
    width: 100px;
    height: 30px;
    margin-top: 10px;
}

.nav-wrapper {
    height: 40px;
}

.spec-short {
    font-size: 2.0rem;
}

.col {
    padding: 0;
}

.strong-low {
    font-weight: 400;
}

.strong-base {
    font-weight: bold;
}

.strong-max {
    font-weight: bolder;
}

.model-bar {
    width: 100%;
    background-color: white;
    height: 40px;
    opacity: 0.90;
    position: sticky;
    top: 0px;
    font-size: 1.1rem;
    padding-right: 5px;
}

.model-bar {
    padding-top: 9px;
}

.model-content {
    min-height: 1000px;
    background-color: aqua
}



header {
    border-bottom: 1px solid lightgrey;
    -webkit-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.32);
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.32);
}

footer {
    line-height: 30px;
    background-color: #262626;
    color: black;
    padding-top: 20px;
    border-top: 1px solid lightgrey;
}

    footer h4 {
        font-size: 1.3rem;
    }


.footer-links ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    list-style-type: none;
}

.footer-social {
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
    padding-top: 30px;
}

    .footer-social a {
        display: inline-block;
        padding: 10px;
        color: yellow;
    }

footer * {
    color: #f1f1f1 !important;
}

.vendor-logo {
    display: inline-block;
    width: 80px;
    height: 60px;
    padding: 5px;
    text-align: center;
}

    .vendor-logo img {
        margin-right: auto;
        margin-left: auto;
    }

.m-window {
    background-color: rgba(0,0,0,0.05);
}

.m-card {
    height: auto;
    width: 100%;
    background-color: white;
}

    .m-card:hover {
        -webkit-box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.14);
        -moz-box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.14);
        box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.14);
    }

@media( max-width: 576px ) {
    .m-card {
        height: 350px;
        width: 100%;
        background-color: white;
    }
}

.navbar {
    min-height: 45px;
    padding: 0px 1rem !important;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,1) !important;
}

.nav-link {
    text-transform: lowercase;
    font-weight: 500;
}

.nav-item:hover .nav-link {
    color: #ffc915 !important;
}

a {
    text-decoration: none !important;
}

.navbar-text {
    padding: 0 !important;
}

.i-text {
}

.i-img {
    max-height: 100%;
    width: auto;
    padding: 10px;
}

.i-img-box {
    height: 260px;
}

.i-name {
    font-size: 1.1rem;
    font-weight: 400;
    position: relative;
    top: 45%;
}

.i-price {
    font-size: 1.4rem;
    font-weight: bold;
    position: relative;
    top: 45%;
}

.name-img {
    max-height: 45px;
    width: auto;
    margin-bottom: 20px;
}

.p-label {
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 11;
    top: 40px;
}

.p-preorder {
    background-color: #ffc915;
    color: black;
    font-weight: 400;
}

.slideshow-container {
    position: relative;
}

.mySlides {
    display: none;
}

.banner {
    max-height: 350px;
    background-color: black;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

.dot {
    position: relative;
    top: -60px;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active, .dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.fade {
    -webkit-animation: fadein 1.8s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1.8s forwards; /* Firefox < 16 */
    -ms-animation: fadein 1.8s forwards; /* Internet Explorer */
    -o-animation: fadein 1.8s forwards; /* Opera < 12.1 */
    animation: fadein 1.8s forwards;
}

.stay {
    opacity: 1
}

@keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}


/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes jssorl-009-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*jssor slider bullet skin 032 css*/
.jssorb032 {
    position: absolute;
}

    .jssorb032 .i {
        position: absolute;
        cursor: pointer;
    }

        .jssorb032 .i .b {
            fill: #fff;
            fill-opacity: 0.7;
            stroke: #000;
            stroke-width: 1200;
            stroke-miterlimit: 10;
            stroke-opacity: 0.25;
        }

        .jssorb032 .i:hover .b {
            fill: #000;
            fill-opacity: .6;
            stroke: #fff;
            stroke-opacity: .35;
        }

    .jssorb032 .iav .b {
        fill: #000;
        fill-opacity: 1;
        stroke: #fff;
        stroke-opacity: .35;
    }

    .jssorb032 .i.idn {
        opacity: .3;
    }

.jssora051 {
    display: block;
    position: absolute;
    cursor: pointer;
}

    .jssora051 .a {
        fill: none;
        stroke: #fff;
        stroke-width: 360;
        stroke-miterlimit: 10;
    }

    .jssora051:hover {
        opacity: .8;
    }

    .jssora051.jssora051dn {
        opacity: .5;
    }

    .jssora051.jssora051ds {
        opacity: .3;
        pointer-events: none;
    }

@media only screen and (max-width: 1700px) {
    .side-banner {
        display: none;
        visibility: hidden;
    }
}

.side-banner {
    max-width: 400px;
}

.side-banner-img {
    max-width: 200px !important;
}

.saleTag {
    position: absolute;
    z-index: 1200;
    left: 25px;
    top: 25px;
    width: 45px;
    height: 45px;
    background-color: #ce0000;
    color: white;
    font-weight: 600;
    border-radius: 50%;
    padding: 5px;
    padding-top: 10px;
}


.pay-button {
    background-color: forestgreen;
    color: white;
    font-size: 1.3rem;
    margin-left: auto;
    margin-right: auto;
    min-width: 90%;
    max-width: 100%;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}

    .pay-button:hover {
        background-color: green;
    }

.pay-info {
    font-size: 1.1rem;
    font-weight: bold;
}

.payment-vendor-image {
    display: inline-block;
}

    .payment-vendor-image img {
        max-height: 36px;
        width: auto;
    }

.paid {
    color: green;
    font-size: 1.3rem;
    margin-left: auto;
    margin-right: auto;
    min-width: 90%;
    max-width: 100%;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid forestgreen;
    cursor: pointer;
}

#cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 1005;
    margin: 0;
    padding: 5px;
}

    #cookieConsent button {
        font-size: 16px;
        background-color: cadetblue;
        color: white;
    }

@media(max-width:600px) {
    #cookieConsent {
        text-align: left;
        padding-right: 100px;
    }

        #cookieConsent button {
            font-size: 17px;
            background-color: cadetblue;
            color: white;
        }
}

.promo-code {
}

    .promo-code input {
        border: 1px solid #7a7a7a;
        width: 200px;
        border-radius: 3px;
        padding: 3px;
    }

    .promo-code button {
        display: inline-block;
        color: white;
        font-size: 1.1rem;
        background-color: grey;
        padding: 3px 8px;
        border: none;
        border-radius: 3px;
        width: auto;
    }

#promo-code-show {
    font-size: 1.2rem;
    color: darkblue;
    font-weight: 500;
    cursor: pointer;
}


.happy-hour {
    padding-top: 14px;
    padding-bottom: 14px;
    border: 1px solid white;
    margin-top: 70px;
    margin-bottom: 70px;
    -webkit-box-shadow: 0px 0px 71px -5px rgba(0,64,255,0.59);
    -moz-box-shadow: 0px 0px 71px -5px rgba(0,64,255,0.59);
    box-shadow: 0px 0px 71px -5px rgba(0,64,255,0.59);
}

.promo-price-old {
    font-weight: bold;
    padding-top: 15px;
}

.promo-price-new {
    font-size: 1.6rem;
    font-weight: bold;
    color: red;
}

.promo-description {
    font-size: 1.2rem;
    padding-top: 15px;
}

.happy-hour-countdown {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: right;
    color: #008cd7;
}

.true-img-fluid {
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
}

#cart-count {
    color: black;
    background-color: var(--btn-buy);
    border-radius: 50%;
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 12px !important;
    font-weight: bold;
    text-align: center;
    position: relative;
    top: -15px;
    left: -5px;
}

#device-select {
    margin-top: 25px;
    max-width: 1050px !important;
    height: 45px;
    font-size: 1.1rem;
    font-weight: bold;
    color: dimgray;
    margin-right: auto;
    margin-left: auto;
}


.black-friday {
    position: absolute;
    padding: 4px;
    background-color: black;
    color: yellow;
    font-weight: 700;
    font-size: 0.9rem;
    transform: rotateY(0deg) rotate(-45deg);
    border-radius: 3px;
    -webkit-box-shadow: 4px 6px 3px -3px rgba(173,173,173,0.23);
    -moz-box-shadow: 4px 6px 3px -3px rgba(173,173,173,0.23);
    box-shadow: 4px 6px 3px -3px rgba(173,173,173,0.23);
}


.pkt-info {
    width: 100%;
    padding: 15px;
    text-align: left;
}

.pkt-select-point {
    margin: 0 auto;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    background-color: #ba1b02;
    border: 1px solid #ba1b02;
    border-radius: 5px;
}


.pkt-selected {
    padding: 10px;
    background-color: #f7f7f7;
    font-weight: 500;
    font-size: 1.1rem;
}

    .pkt-selected span {
        padding-left: 5px;
        color: grey;
        display: inline-block;
        font-weight: 100;
        cursor: pointer;
        font-size: 1.0rem;
    }

    .pkt-selected div {
        color: grey;
        font-weight: 100;
        font-size: 1.0rem;
    }


.btn-disabled {
    opacity: 0.5;
    cursor: default;
}

#pickupMap {
    width: auto;
    height: 170px;
}

#p-payment-info {
    font-size: 1.1rem;
}

.pkt-change-point {
    color: red;
}

.packetaSide {
    position: fixed;
    left: 0;
    top: 330px;
}

    .packetaSide img {
        height: 36px;
        width: 36px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

@media(max-width:1200px) {
    .packetaSide {
        visibility: hidden;
    }
}

.c-acc {
    padding: 10px;
    background-color: #ecfbff;
    border-radius: 16px;
    margin-top: 10px;
    border: 1px solid #d7f7ff;
}

.c-acc-img {
    height: 55px;
    width: 55px;
    padding: 5px;
}

.c-gift-img {
    height: 40px;
    width: 40px;
    padding: 5px;
}

.c-acc-header {
    color: darkblue;
    font-size: 1.1rem;
}

.c-acc-add {
    color: grey;
    font-size: 1.2rem;
}

.c-acc-add-done {
    color: green;
}

@media(max-width:560px) {
    .c-acc-price {
        display: block;
    }
}




















.galery {
    background-color: rgba(100, 100, 100, 0.6);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 30px;
}

.galery-box {
    height: 90%;
    margin: auto !important;
    background-color: white;
    max-width: 1600px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    max-height: 100%;
}

.detail {
    text-align: center;
    height: 100%;
    position: relative;
    text-align: center;
    overflow: hidden;
    padding: 20px;
}

.galery-detail-box {
    width: 100%;
    height: 100%;
    position: relative;
}

.detail img {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
}


.carousel-control-prev {
    border: none;
    background-color: transparent;
    opacity: 1;
}

.carousel-control-next {
    border: none;
    background-color: transparent;
    opacity: 0.8;
}





.thumbnails {
    background-color: lightgrey;
    max-width: 200px !important;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .thumbnails::-webkit-scrollbar {
        width: 6px;
    }

    /* Track */
    .thumbnails::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    .thumbnails::-webkit-scrollbar-thumb {
        background: #888;
    }

        /* Handle on hover */
        .thumbnails::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.galery-thumbnail-box {
    text-align: center;
    width: 170px;
    height: 100px;
    padding: 5px;
    background-color: white;
    margin-top: 8px;
}

    .galery-thumbnail-box.selected {
        border: 1px solid blue;
    }

    .galery-thumbnail-box:hover {
        border: 2px solid blue;
    }

.gal-nav {
    position: absolute;
    z-index: 1001;
    top: 45%;
    font-size: 3.0rem;
    color: lightgray;
}

    .gal-nav .bi {
        width: 35px;
        height: 35px;
    }

.gal-nav-close .bi {
    width: 35px;
    height: 35px;
}

.gal-nav:hover {
    color: grey;
}

.gal-nav-left {
    left: 25px
}

.gal-nav-right {
    right: 25px;
}

.gal-nav-close {
    position: absolute;
    z-index: 1001;
    top: 10px;
    right: 25px;
    font-size: 3.0rem;
    color: lightgray;
}

    .gal-nav-close:hover {
        color: grey;
    }

/*SMALL*/
.d-main-img {
    position: relative;
    top: 0;
    bottom: 0;
    padding: 10px;
    max-width: 100%;
    max-height: 100%;
}

.d-img-c {
    max-height: 510px;
    max-width: 510px;
    height: 100%;
    width: 100%;
    margin: auto;
    min-height: 330px;
    min-width: 330px;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

    .d-img-c::-webkit-scrollbar {
        display: none;
    }


.d-gal-img {
    scroll-snap-padding: 0;
    scroll-snap-align: center;
    display: inline-block;
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.d-gal-c {
    height: 100px;
    max-width: 350px;
    width: auto;
    margin: auto;
}

.d-gal-b {
    height: 50px;
    position: absolute;
    visibility: hidden;
}

.d-name {
    font-size: 1.7rem !important;
    color: var(--color2);
    padding-top: 10px;
    padding-bottom: 10px;
}

.gal-prev-c {
    width: 70px;
    height: 70px;
    padding: 2px;
    float: left;
    cursor: pointer;
}

.gal-prev-b {
    font-size: 1.2rem;
    // float: left;
    padding: 10px;
    color: lightgrey;
    margin: auto;
}

    .gal-prev-b.active {
        color: lightblue;
        background-color: white;
    }

.gal-hidden {
    width: 50px;
    text-align: center;
    font-size: 1.2rem;
    float: left;
    padding-top: 20px;
    cursor: pointer;
}

    .gal-hidden:hover {
        font-weight: 500;
    }

.gal-prev-c:hover {
    border: 1px solid lightgrey;
}


/*GALERY ----------------*/

@media(max-width:693px ) {
    #big-galery {
        position: absolute;
        visibility: hidden;
    }

    .d-gal-c {
        position: absolute;
        visibility: hidden;
    }

    .d-gal-b {
        position: relative;
        visibility: visible;
    }
}






/* Slideshow container */
.slideshow-container {
    position: relative;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.banner {
    max-height: 350px;
    background-color: black;
}
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

/* The dots/bullets/indicators */
.dot {
    position: relative;
    top: -60px;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active, .dot:hover {
        background-color: #717171;
    }

/* Fading animation */
.fade {
    -webkit-animation: fadein 1.8s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1.8s forwards; /* Firefox < 16 */
    -ms-animation: fadein 1.8s forwards; /* Internet Explorer */
    -o-animation: fadein 1.8s forwards; /* Opera < 12.1 */
    animation: fadein 1.8s forwards;
}

.stay {
    opacity: 1
}








@keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}


/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes jssorl-009-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*jssor slider bullet skin 032 css*/
.jssorb032 {
    position: absolute;
}

    .jssorb032 .i {
        position: absolute;
        cursor: pointer;
    }

        .jssorb032 .i .b {
            fill: #fff;
            fill-opacity: 0.7;
            stroke: #000;
            stroke-width: 1200;
            stroke-miterlimit: 10;
            stroke-opacity: 0.25;
        }

        .jssorb032 .i:hover .b {
            fill: #000;
            fill-opacity: .6;
            stroke: #fff;
            stroke-opacity: .35;
        }

    .jssorb032 .iav .b {
        fill: #000;
        fill-opacity: 1;
        stroke: #fff;
        stroke-opacity: .35;
    }

    .jssorb032 .i.idn {
        opacity: .3;
    }

/*jssor slider arrow skin 051 css*/
.jssora051 {
    display: block;
    position: absolute;
    cursor: pointer;
}

    .jssora051 .a {
        fill: none;
        stroke: #fff;
        stroke-width: 360;
        stroke-miterlimit: 10;
    }

    .jssora051:hover {
        opacity: .8;
    }

    .jssora051.jssora051dn {
        opacity: .5;
    }

    .jssora051.jssora051ds {
        opacity: .3;
        pointer-events: none;
    }



@media only screen and (max-width: 1700px) {
    .side-banner {
        display: none;
        visibility: hidden;
    }
}

.side-banner {
    max-width: 400px;
}


.side-banner-img {
    max-width: 200px !important;
}




.sub-cat {
    display: block;
    font-size: 1.3rem;
    background-color: var(--btn-main);
    text-align: center;
    text-decoration: none;
    color: black;
    padding: 6px;
    border-radius: 7px;
    font-weight: bold;
    margin-top: 15px;
}

    .sub-cat:hover {
        text-decoration: none;
        background-color: var(--btn-main);
        color: black;
    }


.sub-cats {
    width: 100%;
}

    .sub-cats a {
        text-decoration: none;
        display: inline-block;
        min-width: 100px;
        text-align: center;
        color: dimgrey;
        font-size: 1.1rem;
        font-weight: bold;
        padding: 7px 15px;
        margin: 20px;
        border: 1px solid lightgrey;
        background-color: rgba(255,255,255,20);
    }

        .sub-cats a:hover {
            background-color: #f8f8f8
        }



.shop-img-small {
    max-width: 400px;
}

h1 {
    font-size: 1.5rem !important;
    margin-top: 18px !important;
    margin-bottom: 13px !important;
}

@media (min-width: 992px) {
    h1 {
        font-size: 1.8rem !important;
        margin-top: 20px !important;
        margin-bottom: 15px !important;
    }
}

.d-img-box {
    height: 50vh !important;
}

.d-img {
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
}


@media (min-width: 1200px) {
    .container {
        max-width: 1090px !important;
    }
}

.d-prod-code {
    font-size: 0.8rem;
    color: grey;
}

.d-sh-des {
    font-size: 0.95rem;
}

.d-sub-title {
    font-size: 1.2rem;
    font-weight: 500;
}

.d-var {
    padding: 8px;
    width: 95%;
    margin-top: 10px;
    border: 1px solid lightgrey;
    border-radius: 8px;
    width: 100%;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    color: black;
}

    .d-var.active {
        background-color: #ffc915;
        border-color: #ffc915;
    }

    .d-var:hover {
        background-color: rgba(255,201,21, 0.5);
        border-color: rgba(255,201,21, 0.5);
    }

.d-var-name {
    width: 100%;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    color: black;
}

    .d-var-name:hover {
        text-decoration: none;
        color: black;
    }

.d-price-main {
    font-size: 1.8rem;
}

.d-price-sale {
    font-size: 1.2rem;
}

@media (max-width: 993px) {
    .d-price-main {
        font-size: 1.7rem;
    }
}

.d-price-sub {
    color: gray;
    font-size: 0.8rem;
}

.d-price-box {
    border-radius: 8px;
    background-color: rgba(0,0,0,0.05);
    width: 100%;
    padding: 25px;
}

.d-buy-button {
    padding: 10px;
    font-size: 1.3rem;
    border-radius: 8px;
    margin: 5px;
    color: black;
    background-color: var(--btn-buy);
    text-align: center;
}

a .d-buy-button:hover {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none !important;
}

.d-buy-button:hover {
    background-color: var(--btn-buy-h);
}

.d-img-box {
    position: sticky;
    top: 30px;
}

.l-price {
    color: black;
    font-size: 1.2rem;
    color: darkblue;
    font-weight: bold;
}

.l-store {
    color: red;
    font-size: 0.9rem;
    font-weight: 600;
}

    .l-store.onstore {
        color: green;
    }

    .l-store.ordered {
        color: green;
        font-weight: 500;
    }

    .l-store.preorder {
        color: orange;
        font-weight: 600;
    }

.l-name {
    font-weight: 500;
    font-size: 1.1rem;
    color: black
}

.l-img {
    max-width: 250px;
    height: auto;
}

.l-a {
    text-decoration: none !important;
    color: black;
}

.var-color-img {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    margin: 8px;
    padding: 3px;
}

.var-color-img-active {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    margin: 8px;
    padding: 3px;
    border: 2px solid #5a5a5aaa;
}

.var-color-img-store {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,184,74,0.28);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,184,74,0.28);
    box-shadow: 0px 0px 5px 2px rgba(0,184,74,0.28);
}

.var-color-img-store-active {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,184,12,0.9);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,184,12,0.9);
    box-shadow: 0px 0px 5px 2px rgba(0,184,12,0.9);
}

.var-color-img-nostore {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(184,0,0,0.24);
    -moz-box-shadow: 0px 0px 5px 2px rgba(184,0,0,0.24);
    box-shadow: 0px 0px 5px 2px rgba(184,0,0,0.24);
}

.var-color-img-nostore-active {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(184,0,0,0.71);
    -moz-box-shadow: 0px 0px 5px 2px rgba(184,0,0,0.71);
    box-shadow: 0px 0px 5px 2px rgba(184,0,0,0.71);
}

.paramBox {
    border-radius: 8px;
}

.paramHeader {
    font-size: 1.3rem;
    font-weight: 700;
    border-bottom: 1px solid lightgrey;
    padding-top: 5px;
    margin-top: 15px;
    // background-color: #c8ecff;
}

.paramName {
    font-weight: 600;
}

.paramValue {
}

.p-cont {
    background-color: rgba(0,0,0,0.05);
    height: 100% !important;
}

.p-box {
    background-color: white;
    padding: 10px;
}

    .p-box:hover {
        -webkit-box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.14);
        -moz-box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.14);
        box-shadow: 0px 0px 26px 1px rgba(0,0,0,0.14);
    }

.p-img-box {
    max-height: 320px;
}

.l-img {
    max-height: 320px;
}

.c-item {
    min-height: 60px;
    padding: 20px;
    margin-top: 20px !important;
}

.c-img-box {
    max-width: 140px;
    max-height: 140px;
}

.c-img {
    max-width: 140px;
    max-height: 140px;
}

.c-remove {
    position: relative;
    top: 0;
    right: 0;
}

.c-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.c-c {
    border: 1px solid lightgrey;
    width: 60px !important;
    padding: 3px 15px 3px 15px;
    margin: 0;
    font-size: 1.2rem;
    text-align: center
}

.c-count {
    width: 120px !important;
}

.c-p {
    border: 1px solid lightgrey;
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    background-color: rgba(0,0,0,0.04);
    width: 60px;
    text-align: center;
}

    .c-p:hover {
        background-color: var(--btn-main);
    }

.cart-s {
    height: 10px;
}

@media (min-width: 993px) {
    .cart-s {
        height: 60px;
    }
}

.c-gifts {
    padding: 10px;
    background-color: #f1ffec;
    border-radius: 16px;
    margin-top: 10px;
    border: 1px solid #e5ffdb;
}

.c-gift-img {
    height: 50px;
    width: 50px;
    padding: 5px;
}

label {
    word-wrap: break-word
}

td a {
    text-decoration: none;
    color: black;
}


.oc-img {
    max-width: 50px;
    padding: 10px;
}

.oc-name {
    font-size: 0.8rem;
    color: grey;
}

.oc-price {
    font-weight: bold;
    text-align: right;
    min-width: 80px;
}

.oc-q {
    min-width: 25px;
}

.se-name {
}


.or-nav {
    position: sticky;
    top: 30px;
    padding: 5px;
    border-radius: 7px;
    background-color: rgba(0,0,0,0.01);
}


.db-table {
    width: 100%;
    padding: 35px;
}

.db-image {
    width: 30px;
    padding: 5px;
}

.db-input {
    width: 25px;
    padding: 5px;
}

.db-price {
    width: 120px;
    padding: 5px;
}

.db-name {
    width: auto;
    padding: 5px;
}

.db-item {
    padding: 12px;
    background-color: rgba(0,0,0,0.03);
    border-radius: 7px;
    margin-top: 12px;
    min-height: 25px;
    line-height: 1.5rem;
}

.hidden {
    display: none;
    visibility: hidden;
}

.a-black {
    text-decoration: none;
    color: black;
}

    .a-black:hover {
        text-decoration: none;
        color: black;
    }

.needed {
    color: red;
}

.collapse {
    position: relative;
    z-index: 100
}

@media (max-width: 992px) {
    .collapse a {
    }
}






.btn-pay {
    background-color: forestgreen;
    color: white;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 20px 40px 20px 40px;
    text-align: center;
}


.p-img-box {
    width: 250px;
    height: 250px;
    margin-left: 33px;
    margin-right: 33px;
}


.img-clipped {
    -webkit-clip-path: polygon(0 0, 0px 247px, 247px 0px);
    clip-path: polygon(0 0, 0px 247px, 247px 0px);
    position: relative;
    right: 0px;
    z-index: 100;
}

.img-under {
    position: absolute;
    -webkit-clip-path: polygon(250px 3px, 3px 250px, 250px 250px);
    clip-path: polygon(250px 3px, 3px 250px, 250px 250px);
    z-index: 99;
    left: 51px;
}


@media(max-width:1210px) {

    .p-img-box {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .img-clipped {
        -webkit-clip-path: none;
        clip-path: none;
        position: relative;
        z-index: 100;
    }

    .img-under {
        position: absolute;
        visibility: hidden;
        z-index: 99;
        left: 20px;
    }
}



_:-ms-fullscreen, :root .img-clipped {
    -webkit-clip-path: none;
    clip-path: none;
    position: relative;
    z-index: 100;
}

_:-ms-fullscreen, :root .img-under {
    position: absolute;
    visibility: hidden;
    z-index: 99;
    left: 20px;
}

_:-ms-fullscreen, :root .p-img-box {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .p-img-box {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .img-clipped {
        -webkit-clip-path: none;
        clip-path: none;
        position: relative;
        z-index: 100;
    }

    .img-under {
        position: absolute;
        visibility: hidden;
        z-index: 99;
        left: 20px;
    }
}




@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    .p-img-box {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .img-clipped {
        -webkit-clip-path: none;
        clip-path: none;
        position: relative;
        z-index: 100;
    }

    .img-under {
        position: absolute;
        visibility: hidden;
        z-index: 99;
        left: 20px;
    }
}

@media not all and (min-resolution:.001dpcm) {
    @media {

        .p-img-box {
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }

        .img-clipped {
            -webkit-clip-path: none;
            clip-path: none;
            position: relative;
            z-index: 100;
        }

        .img-under {
            position: absolute;
            visibility: hidden;
            z-index: 99;
            left: 20px;
        }
    }
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        .p-img-box {
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }

        .img-clipped {
            -webkit-clip-path: none;
            clip-path: none;
            position: relative;
            z-index: 100;
        }

        .img-under {
            position: absolute;
            visibility: hidden;
            z-index: 99;
            left: 20px;
        }
    }
}



@media \0screen {
    .p-img-box {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .img-clipped {
        -webkit-clip-path: none;
        clip-path: none;
        position: relative;
        z-index: 100;
    }

    .img-under {
        position: absolute;
        visibility: hidden;
        z-index: 99;
        left: 20px;
    }
}


@supports (-ms-ime-align:auto) {
    .p-img-box {
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .img-clipped {
        -webkit-clip-path: none;
        clip-path: none;
        position: relative;
        z-index: 100;
    }

    .img-under {
        position: absolute;
        visibility: hidden;
        z-index: 99;
        left: 20px;
    }
}

@media not all and (min-resolution:.001dpcm) {
    @media {
        .p-img-box {
            width: auto;
            margin-left: auto;
            margin-right: auto;
        }

        .img-clipped {
            -webkit-clip-path: none;
            clip-path: none;
            position: relative;
            z-index: 100;
        }

        .img-under {
            position: absolute;
            visibility: hidden;
            z-index: 99;
            left: 20px;
        }
    }
}


.sp-c {
    margin-bottom: 20px;
    border: 1px solid var(--color4);
    border-radius: 8px;
}

.sp-item {
    width: 100%;
    border-top: 1px solid var(--color4);
}

.sp-rad {
    padding: 10px;
    width: 20px;
}

.sp-img-p {
    padding: 10px !important;
    width: 35px !important;
}

.sp-img {
    width: 35px !important;
    max-height: 100%;
    height: auto;
    padding: 5px;
}

.sp-name {
    width: 100%;
    padding-left: 10px;
}

.sp-price {
    padding: 7px;
    min-width: 70px;
    text-align: right;
}

.sp-h {
    border-bottom: 1px solid black;
    background-color: var(--color4);
}

    .sp-h th {
        padding: 10px;
        border-bottom: 1px solid var(--color4);
    }

.sp-cart {
    padding: 10px;
}

.sp-col {
    background-color: white;
    position: static;
}



.di-name {
    font-size: 0.8rem;
    padding-left: 5px;
    color: grey;
}

.di-price {
    font-size: 0.9rem;
    min-width: 75px;
    font-weight: 400;
    text-align: right;
}


.di-item {
    margin-top: 20px;
    border-bottom: 1px solid lightgrey;
    padding-bottom: 10px;
    padding-top: 10px;
}

.simg {
    position: relative;
    padding: 3px;
    width: 50px;
    height: 50px;
    text-align: center;
}

.img-f {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.scategory {
    position: relative;
    display: block;
    color: black;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 10px;
}

.stype {
    padding-top: 15px;
    position: relative;
    color: black;
    width: 370px;
    line-height: 25px;
    font-size: 0.9rem;
    color: grey;
    font-weight: bold;
    right: -5px;
    border-bottom: 1px solid lightgrey;
}

.container-fluid {
    padding: 0 !important;
}


.btn-buy {
    padding: 5px 10px 5px 10px;
    margin-left: 8px;
    color: black;
    font-size: 1.1rem;
    background-color: var(--btn-buy);
    border-radius: 3px;
    box-shadow: 2px 2px #d5d5d5;
}

    .btn-buy:hover {
        background-color: var(--btn-buy-h);
        cursor: pointer;
    }

.btn-main {
    padding: 8px 10px 8px 10px;
    display: inline-block;
    color: black;
    font-size: 1.1rem;
    background-color: var(--btn-main);
    border-radius: 3px;
    box-shadow: 2px 2px #d5d5d5;
    width: auto;
}

    .btn-main:hover {
        background-color: var(--btn-main-h);
        cursor: pointer;
    }

.btn-w {
    padding: 8px 30px;
    text-align: center;
    display: inline-block;
    margin-top: 10px;
}

#sendButton {
    width: 215px;
}



.free {
    color: forestgreen;
}

.nn {
    font-size: 0.8rem;
    color: grey;
}

.of-container {
    border: 1px solid var(--color4);
    margin-bottom: 30px;
    border-radius: 8px;
}

.of-h {
    background-color: var(--color4);
    padding: 10px;
    font-weight: 700;
}

.of-c {
    padding: 10px;
}

label {
    font-size: 1rem;
}

.cartInfo {
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
}


/*klasicka*/
.d-price-d {
    font-size: 1.6rem;
    font-weight: 700;
    color: black;
}
/*slevnena*/
.d-price-s {
    font-size: 1.6rem;
    font-weight: 700;
    color: red;
}

.alt-desc {
}

    .alt-desc .alert {
        padding: 7px !important;
        margin-bottom: 9px !important;
    }






.prod-content-tab {
    padding-top: 30px;
    font-size: 22px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

    .prod-content-tab:hover {
        color: #8b8b8b;
    }


@media only screen and (max-width: 500px) {
    .prod-content-tab {
        font-size: 18px;
    }
}

.prod-content-tab-active {
    border-bottom: 2px solid black;
}

.prod-content {
    max-width: 1500px;
}

.d-param-h {
    padding-top: 30px;
    font-weight: bold;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}

.price-dph {
    font-size: 1.2rem;
    font-weight: bold;
    color: red;
    font-weight:600;
}
.price-dph-sale {
    color: darkblue;
    font-weight: 600;
}

.on-store{
    font-size:0.9rem;
}

.tt {
    position: relative;
    display: inline-block;
}

    .tt .ttt {
        text-align: center;
        padding: 8px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        visibility: hidden;
        background-color: #3c3c3c;
        font-size: 0.9rem;
        color: white;
        opacity: 0.9;
        width: 220px;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
    }

    .tt:hover .ttt {
        visibility: visible;
    }

.c-services label{
    font-weight:bold;
}
.c-services label {
    font-weight: bold;
}
.c-services p {
    font-size:0.9rem;
}

.required{
    color:red;
}

.switch-header {
    color: grey;
    font-size: 0.8rem;
}

.switch-mi-container {
    width: 100%;
    padding: 5px;
    overflow: auto;
}

    .switch-mi-container::after {
        float: none;
    }

    .switch-mi-container div {
        float: left;
        height: 85px;
        width: 85px;
        padding: 5px;
        margin-right: 5px;
        border: 1px solid lightgrey;
    }

        .switch-mi-container div.active {
            background-color: white;
            border: 2px solid var(--main);
        }

/*---------------------------------------------------------------*/
/*----PRODUCT ROW------------------------------------------------*/
.sl-wrapper {
    display: block;
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 10px;
    height: 455px;
    user-select: none;
    user-drag: none;
    position: relative;
}

.sl-container {
    display: flex;
    width: 100%;
    height: 380px;
    text-align: center;
    width: 100%;
    padding: 0px 20px 0px 5px;
}

.sl-value {
    width: 100%;
    font-size: 0.9rem;
    margin-top: 10px;
    margin-bottom: 25px;
}

.sl-transition {
    transition: transform linear 200ms;
}

.sl-header {
    padding-left: 20px;
}

.sl-header:hover {
    color:grey;
}

.sl-item {
    width: 270px;
    margin-right: 10px;
    border: 1px solid #cfcfcf;
    box-shadow: 0px 0px 5px 0px #cfcfcf;
    position: relative;
    height: 380px;
    user-select: none;
    user-drag: none;
    cursor: pointer;
}

.sl-item-empty {
    width: 270px;
    margin-right: 10px;
    border: 1px solid #cfcfcf;
    box-shadow: 0px 0px 5px 0px #cfcfcf;
    position: relative;
    height: 380px;
    user-select: none;
    cursor: pointer;
    background-color: #fdfdfd;
    padding-top: 150px;
    color: #ededed;
}

.sl-image {
    width: 270px;
    height: 270px;
    padding: 20px;
    user-drag: none;
    user-select: none;
}

.sl-item .product-name {
    text-align: center;
    font-size: 1.0rem;
    height: 60px;
}

.sl-nav {
    position: absolute;
    top: 50%;
    width: 25px;
    height: 50px;
    font-size: 80px;
    line-height: 33px;
    background-color: #f5f5f5;
    border: 1px solid lightgrey;
}

    .sl-nav:hover {
        background-color: #e1e1e1;
    }

.sl-left {
    left: 0px;
    border-left: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.sl-right {
    right: 0px;
    border-right: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}


.sl {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .sl:hover {
        opacity: 1;
    }

    .sl::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--color2);
        cursor: pointer;
    }

    .sl::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--color2);
        cursor: pointer;
    }

.ui-slider .ui-slider-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color2);
    cursor: pointer;
}

.ui-state-default {
    background: var(--color2) !important;
}

.badge-b{
    font-size:0.9rem;
    font-weight:bold;
    padding: 2px 4px;
    border-radius:8px;
}

.badge-free-delivery{
    background-color:var(--btn-buy);
    color:black;
}