﻿@font-face {
    font-family: 'Domaine Disp';
    src: url('../font/DomaineDisp-Regular.otf');
}
@font-face {
    font-family: 'Albra Semi';
    src: url('../font/Albra Semi.otf') format('opentype');
}
@font-face {
    font-family: 'Albra Regular';
    src: url('../font/Albra Regular.otf') format('opentype');
}
@font-face {
    font-family: 'dmsans-variablefont_opsz,wght';
    src: url('../font/dmsans-variablefont_opsz,wght.ttf');
}
.shopnow-top {
    margin-top: -21px;
    width:100%
}
.category {
    font-family: 'Albra Semi';
    font-size: 18px;
    color: #000;
    font-weight: bolder;
    text-transform: capitalize;
    margin: 30px 0 20px 0;
}
.product-img{
    width:100%;
}
.productviewBox {
    margin: 20px -8px 60px -8px;
    height: 360px;
}
    .productviewBox ._name {
        position: relative;
        top: -340px;
        left: 20px;
        font-family: 'dmsans-variablefont_opsz,wght';
        font-size: 9pt;
        height: 30px;
        z-index: 2;
        color: #000;
        width: 90%;
    }
    .productviewBox ._remark {
        position:absolute;
        width: 160px;
        margin:0 40px;
        padding:8px 12px;
        margin-top:-20px;
        font-family: 'dmsans-variablefont_opsz,wght';
        font-size: 7pt;
        line-height:8pt;
        z-index: 2;
        color: #000;
        background:#d6ccee;
        text-align:center;
        border-radius:8px
    }
    .productviewBox ._img {
        position: relative;
        z-index: 1;
        height:360px;
        background: #f6f6f6
    }
        .productviewBox ._img img:hover {
            border: #480066 1px solid;
        }
    .productviewBox ._pricebox {
        position: relative;
        z-index: 3;
        top: -110px;
        left: 20px;
        font-family: 'dmsans-variablefont_opsz,wght';
        font-size: 9pt;
        color: #000;
        line-height: 13pt;
    }
        .productviewBox ._pricebox ._flx {
            display: flex;
            justify-content: space-between;
        }
        .productviewBox ._pricebox ._flx div {
           width:50%;
        }
        .productviewBox ._pricebox ._flx._vi div {
            font-size: 12pt;
            color:#480066;
            font-weight:800

        }

        .productviewBox ._pricebox ._flx ._p {
          text-align:right;
          padding-right:40px;
        }
        .productviewBox ._pricebox ._flx ._p._C {
          padding-bottom:5px;
        }
/*        .productviewBox ._pricebox ._flx ._V {
           color:#a65ee3
        }
        .productviewBox ._pricebox ._flx ._M {
            color: #7524b1
        }
        .productviewBox ._pricebox ._flx ._R {
            color: #480066
        }*/

._click {
    height: 350px;

}
._click:hover {}

.product-img {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    z-index: 1
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

._click:hover .product-img {
    opacity: 0.5;
}

._click:hover .middle {
    opacity: 1;
}
.text22 {
    background-color: #7350ae;
    color: white;
    font-size: 10px;
    padding: 6px 8px;
    font-family: 'dmsans-variablefont_opsz,wght';
    font-size: 9pt;
    opacity:0.9
}
    .text22 i {
        width: 100%;
        font-size: 12pt;
        color:#7524b1
    }
.text22 a {
    color: white;
}
    .text22 a:hover {
        color: #480066;
    }


.add_to_cart_button {
    background: #d6ccee;
    width: 100%;
    text-align: center;
    color: #000;
    padding: 10px;
    margin-top:15px;
    border-radius: 5px;
    border: solid #d6ccee 1px;
    font-family: 'dmsans-variablefont_opsz,wght';
    font-size: 12pt;
}
    .add_to_cart_button:hover {
        background: #7350ae !important;
    }
    ._packages {
        margin-top: 20px;
        padding: 20px 10px;
        background: #d6ccee;
    }
    ._packages ._title {
        font-family: 'Albra Regular';
        font-size: 27px;
        color: #000;
        padding: 5px 0 15px 0;
        text-align: center;
        width: 100%;
        margin-bottom:10px
    }
._packages ._box {
    display: flex;
}
._packages .productviewBox ._pricebox {
    top: -100px;
}
    ._packages .productviewBox ._name {
        top: -235px;
    }
._packages .add_to_cart_button {
    background: #7350ae;
    color: #fff;
    margin:20px 0 0 0;
}
        ._packages ._remark {
            background: #7350ae;
            color: #fff;
            width: 250px;
            margin: 0 60px;
            padding: 8px 12px;
            margin-top: -20px;
            font-size: 16px;
            line-height: 21px;

        }

    ._packages .productviewBox {
        margin: 0px -8px;
        height: 315px;
    }

    ._packages ._click {
        height: 255px;
    }
    ._packages .productviewBox ._img {
        position: relative;
        height: 255px;
        z-index: 1;
    }

    ._packages .productviewBox .add_to_cart_button:hover {
        background: #d6ccee;
        color: #480066;
        border: #480066 1px solid;
    }
.Voucher_itemBar {
    border: 1px solid #9664c8;
    border-radius: 5px;
    background: #fff;
    margin-top: 10px;
}

    .Voucher_itemBar .row {
        justify-content: center;
        padding: 0 15%;
    }
@media only screen and (max-width: 800px) {
    .category {
        margin: 35px 18px 0px 18px;
    }

    .productviewBox {
        margin: 20px 0px 40px 0px;
        height: 350px;
    }
        .productviewBox ._name {
            top: -325px;
            width: 200px;
            font-size: 11px;
            line-height:14px
        }

        .productviewBox ._img {
            height: 350px;
        }
        .productviewBox ._pricebox {
            bottom: -120px;
        }
    .add_to_cart_button {
        margin-top: 5px;
    }
    .productviewBox ._remark {
        width: 25%;
        margin: 0 2.5%;
        margin-top: -18px;
    }
    ._packages {
        margin-bottom: 15px;
    }
    ._packages ._remark {
        width: 30%;
        margin: 0 9.5%;
        padding: 8px 12px;
        margin-top: -15px;
        font-size: 12px;
        line-height: 14px;
    }
    ._packages .add_to_cart_button {
        margin-top: 25px;
    }
    .Voucher_itemBar {
        background:#efe9fd;
        border:none;
        border-radius:0px
    }

        .Voucher_itemBar .row {
            padding: 0 5px;
        }
        .Voucher_itemBar .productviewBox ._img {
            border: #7350ae 1px solid
        }
}

@media only screen and (max-width: 440px) {
    .productviewBox {
        margin: 20px -4px 40px -4px;
        height: 305px;
    }
        .productviewBox ._name {
            top: -280px;
            width: 80%;
            font-size: 10px;
            line-height: 13px;
        }

    .productviewBox ._img{
        
        height: 300px;
    }
        .productviewBox ._remark {
            width: 35%;
            margin: 0 6%;
            margin-top: -15px;
            padding: 4px 5px;
            font-size: 8px;
        }
        .productviewBox ._pricebox {
            top: -110px;
        }

            .productviewBox ._pricebox ._flx ._V {
                width: 40%;
            }
            .productviewBox ._pricebox ._flx ._P {
                width: 60%;
            }
    .add_to_cart_button {
        margin-top: 2px;
    }
    ._click {
        height: 300px;
    }
    ._packages {
        padding-top: 5px;
    }
    ._packages ._click {
        height: 170px;
    }

    ._packages .productviewBox {
        height: 230px;
    }
        ._packages .productviewBox ._name {
            top: -182px;
        }
    ._packages .productviewBox ._img {
        padding-top:10px;
        height: 200px;
        background: #fff;
    }
        ._packages .productviewBox ._pricebox {
            top: -105px;
        }


    ._packages .add_to_cart_button {
        margin-top: 35px;
    }
    ._packages ._remark {
        width: 35%;
        margin: 0 6%;
        padding: 4px 1px;
        margin-top: -10px;
        font-size: 10px;
        line-height: 12px;
    }

}

@media only screen and (max-width: 400px) {
    .productviewBox {
        height: 260px;
    }
    .productviewBox ._img {
        height: 258px;
    }
    ._click {
        height: 260px;
    }

    .productviewBox ._name {
        font-size: 9.5px;
        line-height: 11px;
        top: -240px;
    }

    .productviewBox ._pricebox {
        top: -100px;
        font-size: 9pt;
        line-height:12pt
    }
        .productviewBox ._pricebox ._flx._vi div {
            font-size: 11pt;
        }
}

@media only screen and (max-width: 360px) {
    .productviewBox {
        height: 260px;
    }

    ._click {
        height: 250px;
    }
    .productviewBox ._img {
        height: 250px;
        background: #f6f6f6
    }
    .productviewBox ._name {
        top: -235px;
        left: 15px;
    }

    .productviewBox ._pricebox {
        left: 15px;
        top: -100px;

    }
        .productviewBox ._pricebox ._flx ._p {
            padding-right: 30px;
        }
}


@media only screen and (max-width: 330px) {
    .productviewBox {
        height: 240px;
    }

    ._click {
        height: 240px;
    }

    .productviewBox ._img {
        height: 240px;
        background:#f6f6f6
    }

    .productviewBox ._name {
        top: -225px;
    }

    .productviewBox ._pricebox {
        top: -100px;
        font-size: 8pt;
        line-height: 11pt
    }

        .productviewBox ._pricebox ._flx._vi div {
            font-size: 9pt;
        }

}