#content-css {
    display: inline-block;
}

#content-css::after {
    content: "index-content.css";
}

h2, h3, h4 {
    margin: 0;
    padding: 0;
}

h1 {
    width: auto;
    margin: 4px 0 0 0;
    padding: 8px 4px;
    border-top: 3px solid #B5EFA5;/*#338533;*/
}

.pd h4 {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    margin-right: 3px;
    background: #318431;
    color: #fff;
    font-weight: normal;
}

.pd h4 a {
    color: #fff;
}

.pf h4 {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    margin-right: 3px;
    background: #B5EFA5;
    color: #000;
    font-weight: normal;
}

.pf h4 a {
    color: #000;
}

hr {
    border-top: 3px solid #B5EFA5;
    padding: 0;
    height: 0;
    margin: 0;
    clear:none;
}

.hide {
    display: none;
}

.note{
    font-size: 10px;
}

.highlight {
    background: #FEFBA0;
    border-radius: 4px;
    padding: 10px;
}

.highlight.max {
    max-width: 600px;
    margin: 0 auto;
}

.highlight.trim {
    max-width: 300px;
    padding: 0;
    margin: 0 auto 5px auto; 

}

.highlight.slim {
    padding: 5px;
}

.pr4 {
    height: 4px;
    font-size: 0px;
}

.pr8 {
    height: 8px;
    font-size: 0px;
}

.pr20 {
    height: 30px;
    font-size: 0px;
}

.c {
    clear: both;
}
.red{
    color: #e00;
}
.buy, .button {
    margin: 4px;
}

.buy a, .buy button, .button, .button button {
    padding: 4px 16px 4px 16px;
    height: 16px;
    background: #338533;
    border: 2px solid #338533;
    border-radius: 4px;
    font-size: 18px;
    color: #fff;
    height: 30px;
    cursor: pointer;
    margin: 0;
    transition: ease 0.25s;
}

.buy a:hover, .buy button:hover, .button a:hover, .button:hover {
    background: #1AB41A;
    border: 2px solid #1AB41A;
    margin: 0;
    transition: ease 0.25s;
}

.buy a:disabled, .buy button:disabled, .button a:disabled, .button:disabled {
    background: #aaa;
    border: 2px solid #aaa;
    margin: 0;
    transition: ease 0.25s;
    cursor: default;
}

.buy-cart {
    padding-left: 10px;
}

.button-large {
        width: 150px;
}
#content {
    background: #fff;
    padding-top: 6px;
}

/* pl product list (d-p) */
/* pi product item (d-p-i) */
/* pd product detail (d-p-p) */

#filter, #filter-close, #filter-close-spacer, #filter-empty, #filter-close2, #filter-clear,
#filter-data1, #filter-data4, #filter-data5 {
    display: none;
}

#filter-close, #filter-close2 {
    font-size: 18px;
}

#filter-close a:hover, #filter-close2 a:hover {
    text-decoration: none;
}

.filter-flex
{
    display: flex;
    margin: 8px 0 4px 0;
    padding: 5px;
    background: #F9F9F9;
    border-radius: 4px;
}

.filter {
    display: flex;
    padding-right: 10px;
    vertical-align: middle;
    align-items: center;
}

.filter-right {
    text-align: right;
}

.filter-item, .filter-button, .filter-button-clear {
    border: 0;
    background: #fff;
    padding: 10px;
    border-radius: 18px;
    border-style: solid;
    color: #444;
}

.filter-button {
    color: #000;
    background: #B5EFA5;
    cursor: pointer;
}

.filter-button-clear {
    color: #000;
    background: #FEFBA0;
    cursor: pointer;
}
#spacer {
    /*transition: ease 500ms;*/
}
#spacer-top, #spacer-bottom {

}
.pd-d {
    font-size: 14px !important;
}
.pl {
    position: relative;
    width: calc(100% - 4px);
    padding-left: 4px;
    font-size: 0;
    text-align: left;
    background: #fff;
}
.pl-flex {
    position: relative;
    width: calc(100% - 4px);
    padding-left: 4px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0;
    justify-content: center;
    background: #fff;
    /*clip-path: polygon(0 0, calc(100% - 40px) 0, calc(100% - 40px) 100%, 0 100%);*/
}
.pl-clip {
    position: absolute;
    right: 0px;
    width: 6px;
    height: 100%;
    background: #fff;
}
/*.p::before {
    content: "";
    position: fixed;
    display: inline-block;
    height: 100%;
    background: #00f;
    border: 20px solid #f00;
    border-right: 20px solid #0f0;
}
*/
.share img {
    height: 30px;
    border-radius: 4px;
    vertical-align: middle;
}

.share a {
    color: #4267B2;
}

.share a:hover {
    text-decoration: none;
}

.share-fb {
    display: inline-block;
    height: 26px;
    border: 2px solid #4267B2;
    border-radius: 4px;
    padding-right: 3px;
    margin-right: 2px;
}

.share-fb img {
    height: 26px;
    border-radius: 0;
}

.share-fb span {
    padding: 2px 0 0 0;
}

#share-link {
    display: none;
}

/*==================================================================*/
/* Department*/
/*==================================================================*/

.panel-table {
    padding: 5px;
}

.panel-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
    /*margin-top: -10px;  correct offset on first border spacing if desired */
}

.panel-table th {
    vertical-align: top;
    text-align: left;
    text-transform: uppercase;
    background: #fff;
    /*padding: 0.4vw 0 0.4vw 0.4vw;*/
    font-weight: bold;
}

.panel-table .align-botton {
    vertical-align: bottom;
}

.panel-table th a {
    /*position: relative;
*/}

.panel-table td {
    /*vertical-align: top;*/
    border-style: none;
    background-color: #F9F9F9;
    color: #000;
    padding: 4px 0 4px 4px;
    transition: ease 0.1s;
}

.panel-table tr:hover td {
    background-color: #f0f0f0;
    transition: ease 0.1s;
}

.panel-table td:first-child {
    border-left-style: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.panel-table th:last-child {
    /*padding-right: 0.5vw;*/
}

.panel-table td:last-child {
    padding-right: 4px;
    border-right-style: none;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

/*==================================================================*/
/* OptionItems */
/*==================================================================*/
.coi-list {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.coi-item {
    vertical-align: top;
    display: inline-block;
}

.coi-img {
    display: inline-block;
}

.coi-buy {
    vertical-align: top;
}

.coi-img {
    padding: 5px;
    border: 3px solid #fff;
    border-radius: 4px;
}

.coi-img img {
    height: 80px;
    filter: brightness(97.5%);
    border-radius: 2px;
    border: 1px solid #fff;
}

.coi-img:hover img {
    border: 1px solid #888;
    transition: ease 250ms;
}

.coi-selected .coi-img {
    border: 3px solid #318431;
}

.coi-colour {
    font-size: 12px;
    font-weight: bold;
}
/*==================================================================*/
/* ProductDetail */
/*==================================================================*/
.pd {
    vertical-align: top;
    /*display: inline-block;*/
    background: #fff;
    padding: 4px;
    /*margin: 0 3px 0 0;*/
}

.pd h2 {
    font-size: 16px;
    font-weight: 900;
}

.pd table th,.pd table td {
    text-align: left;
    padding: 5px;
    vertical-align: top;
}
.pd-1 {
    vertical-align: top;
    float: left;
    width: calc(100% - 610px);
    /*   background: #efe;
    padding-bottom: 10px;*/
}

.pd-1i {
    margin: 0 auto;
    max-width: 570px;
}

    .pd-2 {
        padding-top: 10px;
        /*display: flex;
    align-items: center;*/
        float: right;
        /*    display: inline-block;*/
        text-align: center;
        width: 600px;
    }

    .pd-2m {
    }

    .pd-2i {
        width: 300px;
    }

    .pd-3 {
        width: 350px;
        display: inline-block;
        text-align: left;
        border-radius: 5px;
        background: #fff;
        margin: 14px auto 0 auto;
    }
    
    .pd-4 {
        display: inline-block;
        padding: 10px;
        width: calc(100% - 20px);
    }

        .pd-4 hr {
            border: none;
            border-top: 1px solid #338533;
            margin: 0 20px 4px 20px;
        }

    .pd-5 {
    }

    .pd-5t {
        background: #fff;
        padding: 8px 4px;
        margin-bottom: 4px;
    }

    .pd-6 {
        padding: 0 10px 14px 10px;
        max-width: 350px;
        display: inline-block;
        border-radius: 5px;
        background: #F9F9F9;
        margin: 14px auto 0 auto;
    }
    .pd-6s{
        width: 350px;
    }
    .pd fieldset {
        border: 3px solid #B5EFA5;
        margin: 0;
        border-radius: 5px;
    }

    .pd-a fieldset {
        vertical-align: top;
        width: 350px;
        font-size: 15px;
        text-align: left;
        min-height: 240px;
        margin: 0 8px 0 0;
    }
    .pd-a fieldset:first-child {
    }
    fieldset .highlight {
        min-height: 205px;
    }
    .pd-m {
        position: relative;
        margin: 0 auto;
        max-width: 350px;
    }
    .pd-b {
        position: relative;
        margin: 0 auto;
        text-align: center;
        max-width: 350px;
        background: #B5EFA5;
        padding: 10px;
        border-radius: 5px;
    }
    .pd-t {
        background: #F9F9F9;
        border-radius: 4px;
        padding: 5px;
    }
    .pd-b1{
        font-size: 16px;
        font-weight: bold;
    }
    .pd-b1s {
        text-decoration: line-through;
    }
    .pd-b2 {
        padding: 8px 0 0 8px;
    }
        .pd-b.wide {
            padding: 10px 20px;
            max-width: 500px;
        }
        .pd-m.wide {
            max-width: 520px;
        }

        .pd-b h3 {
            margin: 0 0 4px 0;
            padding: 4px 0;
            font-size: 16px;
            width: 100%;
            border-bottom: 1px solid #009900;
        }

        .pd-b hr {
            padding-top: 20px;
            border: 0;
            border-bottom: 1px solid #009900;
            margin-bottom: 20px;
        }

    .pd-i {
        margin: 0 auto;
        max-width: 400px;
        text-align: left;
    }

    /*==================================================================*/
    /* ProductItem */
    /*==================================================================*/

    .pi-w {
        padding-left: 4px;
        width: calc(100% - 150px);
        min-width: 40px;
        padding-bottom: 4px;
    }

    .pi-w1 {
        font-size: 10px;
    }

    .pi-w2 {
        font-weight: bold;
        color: #e00;
        text-decoration: line-through;
    }

    .pi, .pid {
        vertical-align: top;
        display: inline-block;
        text-align: center;
        background: #fff;
        margin: 0; /* 3px 3px 0;*/
        font-size: 14px;
        justify-content: center;
    }

    .pi-flex-4 {
        flex-grow: 1;
        max-width: calc((100% - 10px) / 3);
    }

    .pi-flex-5 {
        flex-grow: 1;
        max-width: calc((100% - 10px) / 4);
    }

    .pi-1 {
        /*width: calc(100% - 5px);*/
        width: 100%;
        border-bottom: 3px solid #EBFAE6;
    }

    .pi-4 {
        width: calc((100% - 13px) / 4);
        border-right: 3px solid #EBFAE6;
        border-bottom: 3px solid #EBFAE6;
    }

    .pi-5 {
        width: calc((100% - 16px) / 5);
        border-right: 3px solid #EBFAE6;
        border-bottom: 3px solid #EBFAE6;
    }
        /*
.pi-4:last-child {
    border-right: 3px solid #fff;
}
.pi-5:last-child {
    border-right: 3px solid #fff;
}
    */
        .pi-4.last, .pi-5.last {
            border-right: 3px solid #fff;
        }

    .pi-p {
        padding: 20px;
    }

        .pi-p img {
            filter: brightness(97.5%);
            background: #fff; /* in case of transparency */
            border: 1px solid #fff;
            border-radius: 4px;
            width: 80%;
            transition: ease 250ms;
        }

        .pi-p:hover img {
            border: 1px solid #888;
            transition: ease 250ms;
        }

        .pi-p h2 {
            border: 0;
            margin: 0;
            font-size: 16px;
            font-weight: 900;
            height: 40px;
            /*overflow: hidden;*/
            text-overflow: ellipsis;
        }

    .pi-d {
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pi-n {
        padding-top: 4px;
        height: 20px;
        font-size: 12px;
        font-weight: bold;
    }

    .pf {
        padding: 10px;
        background: #fff;
        margin: 0 3px 0 0;
    }

    .pf-f {
        padding: 10px 0;
        text-align: center;
    }

    .t2 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .t3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    /*
@supports (-webkit-line-clamp: 3) {
    .d-p-i-d p {
        word-break: break-all;
        overflow-wrap: break-word;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
}
*/
    .d-p-b {
    }

    .p {
        background: #fff;
        width: 100%;
    }

    #p-l {
        width: 297px;
        min-height: 500px;
        border-right:3px solid #EBFAE6
    }

    #p-r {
        float: right;
        width: calc(100% - 300px);
        vertical-align: top;
    }

    .cp {
        max-width: 800px;
        margin: 0 auto;
        background: #fff;
        padding: 10px;
        box-shadow: 0 0 20px 0px rgba(0,0,0,0.25);
    }

    .m600 {
        max-width: 600px;
        padding: 5px;
        margin: 0 auto;
    }

    .pi-o {
        display: inline-block;
        width: 100%;
        vertical-align: top;
    }

    .pi-o1 {
        margin-top: 2%;
        width: 33%;
        display: inline-block;
        vertical-align: top;
    }

    .pi .pi-o img {
        width: 90%;
        margin-top: 2%;
    }
    
    .pi:hover .pi-o img {
        border: 1px solid #fff;
    }

    .pi .pi-o img:hover {
        border: 1px solid #888;
    }
    
    /*==================================================================*/
    /* Basket */
    /*==================================================================*/
    .blink {
        font-weight: bold;
        color: #000;
        cursor: pointer;
    }
    .blink.fa {
        font-weight: bold;
        font-size: 30px;
        color: #000;
        cursor: pointer;
    }
    .blink-remove {
        color: #e00;
        font-size: 20px;
    }
    .blink-disabled.fa {
        color: #bbb;
        cursor: default;
    }
    .b {
        position: relative;
        text-align: left;
    }

    .bs-l {
        padding-left: 10px;
        font-size: 18px;
        text-align: left;
    }

    .bs-r {
        padding-right: 10px;
        font-size: 18px;
        float: right;
    }

    .bs-s {
        padding-top: 10px;
        margin-bottom: 10px;
    }

    #b-c {
        display: none;
    }

    #b-l {
        display: inline-block;
        width: 800px;
        text-align: center;
        padding: 4px 0;
        min-height: 500px;
    }

    #b-r {
        float: right;
        width: calc(100% - 810px);
        vertical-align: top;
    }

    .b-d1 {
        vertical-align: top;
        width: 200px;
        margin: 8px;
    }

    .b-d1 img {
        filter: brightness(97.5%);
        width: 200px;
        border: 1px solid #fff;
        border-radius: 4px;
        transition: ease 250ms;
    }

    .b-d1:hover img {
        transition: ease 250ms;
        border: 1px solid #888;
    }

    .b-d2 {
        position: absolute;
        top: 0px;
        right: 8px;
        text-align: left;
        width: 564px;
    	overflow: hidden;
    	text-overflow: ellipsis;
    }

    .b-d2 a{
        white-space: nowrap;
    }
    .b-d3 {
        position: absolute;
        top: 65px;
        right: 8px;
    }

    .b-p1 {
        display: inline-block;
        width: 75px;
        text-align: right;
        padding: 8px 0;
    }

    .b-p2 {
        display: inline-block;
        width: 125px;
        text-align: right;
    }

    .b-p3 {
        display: inline-block;
        width: 75px;
        text-align: right;
        padding: 8px 0;
    }

    .b-d5 {
        position: absolute;
        /*width: 100px;*/
        text-align: right;
        right: 8px;
        bottom: 16px;
    }

        .b-d5 a {
            display: inline-block;
            width: 100px;
        }

    .b-d5 a .fa {
        font-size: 20px;
        color: red;
    }

    .b .fa:hover {
        text-decoration: none;
    }

    .b1 {
        font-size: 20px;
        font-weight: 500;
    }

    .b2 {
        padding: 0 10px;
        font-size: 30px;
        vertical-align: text-bottom;
    }

    .b3 {
        font-size: 24px;
        font-weight: 700;
    }
    /*==================================================================*/
    /* Delivery */
    /*==================================================================*/
    .cd-s {
        border-radius: 5px;
        background: #F9F9F9
    }
    .cd-r label {
        cursor: pointer;
        font-weight: bold;
    }
    .cd {
        text-align: left;
        font-size: 18px;
        padding: 10px;
        border-top: 1px solid #aaa;
    }
    .cd:first-child {
                border-top: none;
    }
    .cd hr {
        border: none;
        border-bottom: 1px solid #aaa;
        padding-top: 8px;
        margin-bottom: 8px;
    }
    /*==================================================================*/
    /* Checkout */
    /*==================================================================*/
    .ci-s h3 {
    	text-align: left;
    	padding-left: 10px;
    	border-bottom: 1px solid #009900;
    }
    .ci-s {
        padding: 10px;
        /*max-width: 350px;
        display: inline-block;*/
        border-radius: 5px;
        background: #F9F9F9;
        margin: 14px auto 0 auto;
    }
    .ci-s hr{
        margin-top: 4px;
        border-top: 1px solid #aaa;
    }
    .ci {
        text-align: left;
        padding: 8px;
    }
    .ci-1 {
        float: left;
    }
    .ci-2 {
        text-align: right;
        float: right;
    }
    .ci-21, .ci-22, .ci-23 {
        display: inline-block;
        font-size: 18px;
        width: 80px;
    }
    .ci-22 {
        text-align: left;
    } 
    /*==================================================================*/
    /* Breadcrumb */
    /*==================================================================*/

    .breadcrumb a {
        color: #000;
    }

    .breadcrumb {
        margin: 0;
    }

        .breadcrumb ul {
            list-style: none;
            padding: 0;
            margin: 0 0 0 12px;
        }
        /*
.breadcrumb ul::before {
    content: '';
    border-right: 10px solid #000;
}
*/
        .breadcrumb li {
            background: #B5EFA5;
            display: inline-block;
            margin-right: 12px;
            margin-bottom: 4px;
            position: relative;
        }

            /* second child
    .breadcrumb li:first-child + li 
*/
            .breadcrumb li:first-child {
                margin-right: 0;
                left: -12px;
            }

                .breadcrumb li:first-child a:before {
                    content: none;
                }

            .breadcrumb li a {
                display: inline-block;
                padding: 10px 13.3333333333px;
                line-height: 20px;
                text-decoration: none;
                /*transition: background 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95), color 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);*/
            }

                .breadcrumb li a:before, .breadcrumb li a:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    border-style: solid;
                    border-color: #e00;
                    border-width: 20px 0 20px 10px;
                    /*transition: border-color 0.25s cubic-bezier(0.445, 0.05, 0.55, 0.95);*/
                }

                .breadcrumb li a:before {
                    right: 100%;
                    border-color: #B5EFA5;
                    border-left-color: transparent;
                }

                .breadcrumb li a:after {
                    left: 100%;
                    border-color: transparent;
                    border-left-color: #B5EFA5;
                }

                .breadcrumb li a:hover {
                    background: #80E361;
                }

                    .breadcrumb li a:hover:before {
                        right: 100%;
                        border-color: #80E361;
                        border-left-color: transparent;
                    }

                    .breadcrumb li a:hover:after {
                        left: 100%;
                        border-color: transparent;
                        border-left-color: #80E361;
                    }
    /*==================================================================*/
    /* ? */
    /*==================================================================*/

    #i {
        width: 365px;
        border: 1px solid #0f0;
    }

    .it {
        width: 55px;
        float: left;
    }

        .it img {
            width: 50px;
            border: 1px solid #fff;
        }

    .ip {
        display: inline-block;
        width: 305px;
        border: 1px solid #e00;
    }

        .ip img {
            width: 300px;
            display: none;
        }

    .isel img {
        border: 1px solid #000 !important;
    }

    .ivis img {
        display: block !important;
    }

    /*==================================================================*/
    /* Product Image (Slick) */
    /*==================================================================*/

    .slick-class {
        width: 100%;
    }

        .slick-class:after {
            pointer-events: none;
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-image: linear-gradient(to right, #fff, rgba(255,255,255,0) 25px), linear-gradient(to left, #fff, rgba(255,255,255,0) 25px);
        }

    .slick-item img {
    }

    .slick-class img {
        width: 250px;
        margin: 25px;
        transition: ease 0.8s;
    }

    .slick-center img {
        width: 300px;
        margin: 0;
        transition: ease 0.8s;
    }

    .slick-prev, .slick-next {
        width: 40px;
        height: 42px;
        z-index: 1;
    }

        .slick-prev::before, .slick-next::before {
            font-size: 40px;
            color: #008800;
            background: #fff;
            border-radius: 5px;
            opacity: 0.8;
            padding: 4px 0 0 0;
            margin: 0;
        }

    .slick-prev {
        left: 10px;
    }

    .slick-next {
        right: 10px;
    }

    .slick-prev::before, .slick-next::before {
        border-radius: 50%;
        padding: 6px 2px 0 2px;
    }

    .slick-dots li button::before {
        font-size: 20px;
        color: #008800;
    }

    .slick-fa {
    }

        .slick-fa a {
            border-style: none;
            font-size: 40px;
            color: #008800;
            background: #fff;
            border-radius: 5px;
            opacity: 0.8;
            padding: 4px;
            margin: 0;
            text-decoration: none;
        }

    .slick-class a {
        display: none;
    }

    .slick-center a {
        display: block;
    }

    .slider-for {
        width: 100%;
    }

    .slider-item img {
        filter: brightness(97.5%);
        max-width: 500px;
        width: 95%;
        margin: 10px auto;
        /*padding: 5px;*/
        border: 1px solid #fff;
        border-radius: 6px;
    }

    .slider-item:hover img {
        transition: ease 250ms;
        border: 1px solid #888;
    }

    .slider-nav {
        margin: 0 auto;
        max-width: 400px;
    }

    .slider-nav img {
        filter: brightness(97.5%);
        width: 80%;
        margin-left: 10%;
        border: 2px solid #fff;
        border-radius: 3px;
    }

    .slider-nav .slick-current img {
        filter: brightness(97.5%);
        border: 2px solid #318431;
        border-radius: 3px;
    }

    .slick-track .slider-item img {
    }

    .slider-nav .slick-track {
        transform: translate3d(0, 0, 0) !important;
    }

    /*==================================================================*/
    /* Zoom */
    /*==================================================================*/
    #modal-zoom {
        display: none;
    }

    .zoom {
        text-align: center;
    }

    .zoom img {
        width: 100%;
        max-width: 1000px;
    }

    .offscreen {
        top: 0;
        position: fixed;
    }

    .zoom-close {
        position: fixed;
        right: 10px;
        bottom: 20px;
        box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.25);
    }
    /*==================================================================*/
    /* PayPal */
    /*==================================================================*/
    .button-payment-panel {
        text-align: left;
        border-collapse: collapse;
        user-select: none;
        cursor: default;
        display: block;
        white-space: nowrap;
        margin: 0 auto;
        background: 0;
        border: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 500;
        z-index: 0;
        font-size: 0;
        width: 100%;
        box-sizing: border-box;
        min-width: 300px;
        max-width: 300px;
    }

    .button-payment-row {
        text-align: left;
        /*border-collapse: collapse;*/
        white-space: nowrap;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 500;
        font-size: 0;
        user-select: none;
        cursor: default;
        box-sizing: border-box;
        height: 45px;
        vertical-align: top;
        min-height: 30px;
        max-height: 55px;
        margin-bottom: 14px;
    }

    .button-paypal {
        border-collapse: collapse;
        white-space: nowrap;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 500;
        font-size: 0;
        user-select: none;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border: none;
        vertical-align: top;
        cursor: pointer;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        height: 100%;
        color: #2C2E2F;
        background: #ffc439;
        border-radius: 4px;
    }

        .button-paypal:hover {
            background: #F2BA36;
        }

    .button-paypal-label {
        border-collapse: collapse;
        white-space: nowrap;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 500;
        font-size: 0;
        text-align: center;
        color: #2C2E2F;
        user-select: none;
        box-sizing: border-box;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: 0px 4vw;
        height: 22px;
        pointer-events: none;
    }

    .button-paypal img {
        border-collapse: collapse;
        white-space: nowrap;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 500;
        font-size: 0;
        color: #2C2E2F;
        user-select: none;
        box-sizing: border-box;
        padding: 0;
        display: inline-block;
        background: none;
        border: none;
        width: auto;
        vertical-align: middle;
        height: 100%;
        text-align: left;
        pointer-events: none;
    }

    .button-sagepay, .button-worldpay {
        border-collapse: collapse;
        white-space: nowrap;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-transform: none;
        font-weight: 500;
        font-size: 0;
        user-select: none;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        border: none;
        vertical-align: top;
        cursor: pointer;
        overflow: hidden;
        display: inline-block;
        text-align: center;
        height: 100%;
        color: #fff;
        background: #2C2E2F;
        border-radius: 4px;
    }

    .button-sagepay:hover {
        background: #4E5152;
    }

    .button-worldpay {
        background: #06689A;
    }

    .button-worldpay:hover {
        background: #044E74;
    }

.button-sagepay-label, .button-worldpay-label {
    border-collapse: collapse;
    white-space: nowrap;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: none;
    font-weight: 500;
    font-size: 0;
    text-align: center;
    color: #fff;
    user-select: none;
    box-sizing: border-box;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0px 4vw;
    height: 22px;
    pointer-events: none;
}

.button-sagepay-text, .button-worldpay-text {
    border-collapse: collapse;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-transform: none;
    font-weight: 500;
    color: #fff;
    user-select: none;
    box-sizing: border-box;
    display: inline-block;
    white-space: pre;
    vertical-align: middle;
    text-align: left;
    height: 100%;
    font-size: 16px;
    margin-top: -2px;
    line-height: 10px;
    position: static;
    visibility: visible;
    /*max-width: 0%;
    opacity: 0;
    overflow: hidden;*/
    animation: show-text 1s 0s forwards;
    pointer-events: none;
}

.button-sagepay-card, .button-worldpay-card {
    vertical-align: middle;
    height: 100%;
    text-align: left;
    pointer-events: none;
}

.button-disable, .button-disable:hover {
    border: #bbb;
    background: #bbb;
    cursor: wait;
}