:root {
    --color-default: #bbbbbb;
    --color-invalid: #c93c36;
    --color-invalid-font: #c93c36;
    --color-button: #165dba;
    --color-button-font: #ffffff;
    --color-secondary-button: #ffffff;
    --color-secondary-button-font: #165dba;
    --color-font-blue: #165dba;
    --color-font-dark-grey: #1f2f33;
    --font-family-default: Open Sans, sans-serif;
    --text-transform-none: none;
    --color-add-to-favourites-button-hover: #edfcff;
    --color-horizontal-rule: #bbbbbb;
    --color-box-border: #bbbbbb;
    --color-grey-background: #eeeeee;
    --color-light-grey-background: #F5F5F5;
    --color-promo-border: #B4D2A8;
    --color-promo-background: #EAFFE2;
    --color-in-stock-font: #3BB879;
    --color-out-of-stock-font: #C93C36;
    --color-disabled-chevron: #cccccc;
    --color-bundles-border: #cccccc;
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%
}

body {
    background: #fff;
    color: var(--color-font-dark-grey);
    line-height: 1
}

abbr, acronym, body, fieldset, html, img {
    border: 0
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400
}

caption, code, th {
    font-weight: 400;
    font-style: normal;
    text-align: left
}

address {
    font-style: normal
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0
}

img {
    display: block
}

q:after, q:before {
    content: ""
}

input:focus, input[type=search]:focus {
    outline-offset: -2px
}

input[type=search] {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@font-face {
    font-family: Gotham;
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/Gotham-Light.eot?) format("eot"),url(/fonts/Gotham-Light.woff) format("woff"),url(/fonts/Gotham-Light.ttf) format("truetype"),url(/fonts/Gotham-Light.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: italic;
    font-weight: 300;
    src: url(/fonts/Gotham-LightItalic.eot?) format("eot"),url(/fonts/Gotham-LightItalic.woff) format("woff"),url(/fonts/Gotham-LightItalic.ttf) format("truetype"),url(/fonts/Gotham-LightItalic.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/Gotham-Book.eot?) format("eot"),url(/fonts/Gotham-Book.woff) format("woff"),url(/fonts/Gotham-Book.ttf) format("truetype"),url(/fonts/Gotham-Book.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/Gotham-BookItalic.eot?) format("eot"),url(/fonts/Gotham-BookItalic.woff) format("woff"),url(/fonts/Gotham-BookItalic.ttf) format("truetype"),url(/fonts/Gotham-BookItalic.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/Gotham-Medium.eot?) format("eot"),url(/fonts/Gotham-Medium.woff) format("woff"),url(/fonts/Gotham-Medium.ttf) format("truetype"),url(/fonts/Gotham-Medium.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/Gotham-MediumItalic.eot?) format("eot"),url(/fonts/Gotham-MediumItalic.woff) format("woff"),url(/fonts/Gotham-MediumItalic.ttf) format("truetype"),url(/fonts/Gotham-MediumItalic.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/Gotham-Bold.eot?) format("eot"),url(/fonts/Gotham-Bold.woff) format("woff"),url(/fonts/Gotham-Bold.ttf) format("truetype"),url(/fonts/Gotham-Bold.otf) format("opentype")
}

@font-face {
    font-family: Gotham;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/Gotham-BoldItalic.eot?) format("eot"),url(/fonts/Gotham-BoldItalic.woff) format("woff"),url(/fonts/Gotham-BoldItalic.ttf) format("truetype"),url(/fonts/Gotham-BoldItalic.otf) format("opentype")
}

a, button {
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

body, button, input, select, table, textarea {
    font-family: var(--font-family-default) !important;
    color: var(--color-font-dark-grey);
    font-size: 16px;
    line-height: 1.5
}

a {
    color: var(--color-font-dark-grey);
    text-decoration: none
}

    a:hover {
        text-decoration: none;
    }

    a:focus {
        outline-color: #2d2d2d;
        color: var(--color-font-dark-grey)
    }

ol, ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.h1, h1 {
    margin: 0;
    margin-bottom: .7em;
    font-size: 28px
}

.h1, .h2, h1, h2 {
    color: var(--color-font-dark-grey);
    font-family: var(--font-family-default);
    font-style: normal;
    line-height: 1.2;
    text-rendering: optimizeLegibility
}

.h2, h2 {
    margin: 0;
    margin-bottom: .5em;
    font-size: 24px
}

.h3, h3 {
    font-size: 18px
}

.h3, .h4, h3, h4 {
    margin: 0;
    margin-bottom: 10px;
    color: var(--color-font-dark-grey);
    font-family: var(--font-family-default);
    font-style: normal;
    line-height: 1.4;
    text-rendering: optimizeSpeed
}

.h4, h4 {
    font-size: 14px
}

.h5, h5 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 13px
}

.h5, .h6, h5, h6 {
    color: var(--color-font-dark-grey);
    font-family: var(--font-family-default);
    font-style: normal;
    line-height: 1.4;
    text-rendering: optimizeSpeed
}

.h6, h6 {
    margin: 0;
    margin-bottom: 5px;
    font-size: 12px
}

.availability {
    margin-bottom: 0;
    font-size: 13px;
    text-transform: var(--text-transform-none)
}

    .availability .label {
        display: none
    }

.page-title h1, .page-title h2, .product-name .h1, .product-name h1 {
    font-size: 24px;
    color: var(--color-font-dark-grey);
    padding-bottom: 3px;
    margin-bottom: 15px;
    margin-top: 0px;
}

.block, .col-left-first {
    margin-bottom: 20px
}

    .col-left-first .block:last-of-type {
        margin-bottom: 0
    }

.block-title {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #000
}

    .block-title h2, .block-title h3, .block-title strong {
        margin: 0;
        margin-bottom: 10px;
        font-family: var(--font-family-default);
        font-size: 14px;
        font-style: normal;
        line-height: 1.4;
        text-rendering: optimizeSpeed;
        color: var(--color-font-dark-grey);
        margin-bottom: 0;
        text-transform: var(--text-transform-none)
    }

    .block-title small {
        font-size: 100%;
        font-weight: 400;
        color: var(--color-font-dark-grey)
    }

body:not(.customer-account) .block:first-child .block-title {
    border-top: none;
    padding-top: 0
}

.block .actions {
    margin: 10px 0 0
}

    .block .actions:after {
        content: "";
        display: table;
        clear: both
    }

    .block .actions a {
        float: left
    }

    .block .actions .button {
        float: right
    }

.col-left .block .actions .button ~ a, .col-right .block .actions .button ~ a {
    line-height: 33px;
    margin-right: 5px
}

.block-account .block-title {
    border-top: 1px solid #000;
    border-bottom: 2px solid #000;
    padding: 10px 0;
    margin-bottom: 20px
}

.block-account li {
    font-family: var(--font-family-default);
    margin: 10px 0
}

    .block-account li strong {
        font-weight: 400;
        color: var(--color-font-dark-grey)
    }

    .block-account li a {
        color: var(--color-font-dark-grey)
    }

        .block-account li a:hover {
            color: var(--color-font-dark-grey)
        }



.buttonDisabled {
    opacity: 0.75;
    margin-top: 0 !important;
    /*border: solid 1px black !important;*/
    /*padding: 6px 14px !important;*/
}

    .buttonDisabled:hover {
        cursor: context-menu !important;
    }


.button {
    display: inline-block;
    min-height: 34px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-align: center;
    text-transform: var(--text-transform-none) !important;
    white-space: nowrap;
    width: 140px;
    background-color: var(--color-button) !important;
    color: var(--color-button-font);
    padding: 7px 15px;
    border: none;
}

    .button:hover {
        cursor: pointer;
        opacity: 0.8;
    }

    .button:active {
        color: #fff
    }

    .button:focus {
        outline: none;
        color: #fff
    }

a.button {
    text-decoration: none
}

    a.button:hover {
        color: #fff
    }

.button.disabled, .button:disabled {
    background: #c8c8c8;
    opacity: .6;
    /*cursor: not-allowed*/
}

.button + .button {
    /*margin-left: 5px*/
}

.secondary-button {
    background-color: var(--color-secondary-button) !important;
        color: var(--color-secondary-button-font) !important;
    border: 2px solid var(--color-button) !important;
    padding: 5px 13px !important;
}

    .secondary-button:hover {
        background-color: var(--color-add-to-favourites-button-hover) !important;
    }

.larger-button {
    width: 220px !important;
}

.basket-button {
    display: block;
    margin: auto;
    margin: 10px auto;
}

.smaller-button {
    width: 90px !important;
}

.update-lnk {
    margin: auto; 
    padding-top: 3px;
}

    @media only screen and (max-width:770px) {
        .col2-set .buttons-set .button {
            float: none;
            width: 100%;
            margin-left: 0;
            margin-right: 0
        }

        .col2-set .buttons-set .back-link, .col2-set .buttons-set .required {
            display: none
        }
    }

    @media only screen and (max-width:479px) {
        .buttons-set .button {
            float: none;
            width: 100% !important;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 7px
        }

        .buttons-set .back-link, .buttons-set .required {
            display: none
        }
    }

    .buttons-set {
    clear: both;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid #ededed;
    text-align: right
}

    .buttons-set p.required {
        margin: 0;
        margin-left: 10px;
        line-height: 33px;
        float: right
    }

    .buttons-set .back-link {
        float: left;
        margin: 0;
        line-height: 33px
    }

    .buttons-set a:not(.button) {
        line-height: 20px;
        display: inline-block;
        padding: 5px
    }

    .buttons-set button.button {
        float: right;
        margin-left: 5px;
        min-width: 140px
    }

    .buttons-set:after {
        content: "";
        display: table;
        clear: both
    }

.breadcrumbs {
    overflow: hidden;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ededed
}

    .breadcrumbs li {
        float: left;
        font-size: 12px;
        font-family: var(--font-family-default);
        text-transform: var(--text-transform-none)
    }

    .breadcrumbs a {
        float: left;
        color: var(--color-font-dark-grey)
    }

        .breadcrumbs a:hover {
            color: var(--color-font-dark-grey)
        }

    .breadcrumbs strong {
        color: var(--color-font-dark-grey);
        font-weight: 400
    }

    .breadcrumbs span {
        float: left;
        padding: 0 7px
    }

@media only screen and (max-width:770px) {
    .breadcrumbs {
        display: none
    }
}

.col-wrapper:after, .main:after {
    content: "";
    display: table;
    clear: both
}

.col-left, .col-main, .col-right {
    padding: 0 10px
}

.col-left {
    float: left;
    width: 25%;
    padding-left: 0;
    clear: left
}

    .col-left img {
        max-width: 100%
    }

.col-right {
    float: right;
    width: 25%;
    padding-right: 0
}

    .col-right img {
        max-width: 100%
    }

.col-main {
    float: left;
    width: 75%
}

.col1-layout .col-main {
    float: none;
    width: auto;
    padding: 0
}

.col2-left-layout .col-main {
    float: right;
    padding-right: 0
}

.col2-right-layout .col-main {
    padding-left: 0
}

.col3-layout .col-right {
    width: 20.8333333333%
}

.col3-layout .col-wrapper {
    float: left;
    width: 79.1666666667%
}

    .col3-layout .col-wrapper .col-main {
        float: right;
        width: 73.6842105263%
    }

    .col3-layout .col-wrapper .col-left {
        width: 26.3157894737%
    }

@media only screen and (max-width:1000px) {
    .col3-layout .col-right {
        float: left;
        clear: left;
        padding-left: 0;
        padding-right: 10px;
        width: 25%
    }

    .col3-layout .col-wrapper {
        float: right;
        width: 100%
    }

        .col3-layout .col-wrapper .col-main {
            float: right;
            width: 75%
        }

        .col3-layout .col-wrapper .col-left {
            width: 25%
        }
}

@media only screen and (max-width:770px) {
    .col1-layout .col-left, .col1-layout .col-main, .col1-layout .col-right, .col2-left-layout .col-left, .col2-left-layout .col-main, .col2-left-layout .col-right, .col2-right-layout .col-left, .col2-right-layout .col-main, .col2-right-layout .col-right, .col3-layout .col-right, .col3-layout .col-wrapper .col-left, .col3-layout .col-wrapper .col-main, .col-left, .col-main, .col-right {
        padding: 0;
        margin-bottom: 10px;
        float: none;
        width: auto
    }

    .col3-layout .col-wrapper, .col-main {
        float: none;
        width: auto
    }

        .col-main .col-left {
            padding: 0
        }
}

.col2-set {
    width: 100%
}

    .col2-set .col-1, .col2-set .col-2 {
        width: 50%;
        padding: 20px;
        max-width: 100%;
    }

@media only screen and (max-width:770px) {
    .col2-set .col-1, .col2-set .col-2 {
        padding: 10px
    }
}

.col2-set .col-1 {
    float: left;
    padding-left: 0
}

.col2-set .col-2 {
    float: right;
    padding-right: 0
}

@media only screen and (max-width:479px) {
    .col2-set .col-1, .col2-set .col-2 {
        float: none;
        width: auto;
        border: 0;
        padding-right: 0;
        padding-left: 0
    }
}

.col2-set .narrow {
    width: 33%
}

.col2-set .wide {
    width: 65%
}

.col2-set:after {
    content: "";
    display: table;
    clear: both
}

@media only screen and (min-width:771px) {
    .top-container {
        max-width: 1260px;
        margin: 0 auto;
        padding: 0 30px
    }
}

.grid:after {
    content: "";
    display: table;
    clear: both
}

.success {
    color: #7eb401
}

.error {
    color: #df280a
}

.error, .notice {
    font-weight: 700
}

.notice {
    color: #e26703
}

@media only screen and (min-width:915px) {
    .order-list-grid .col-1 {
        width: 30%
    }

    .order-list-grid .col-2 {
        width: 50%;
        padding-right: 20px
    }

    .order-list-grid .col-3 {
        clear: none;
        width: 20%;
        padding-top: 0
    }
}

.price-box {
    margin: 7px 0;
    font-family: var(--font-family-default)
}

    .price-box p {
        margin-bottom: 0
    }

    .price-box .price {
        color: var(--color-font-dark-grey);
        font-size: 16px
    }

    .price, .price-box .price, .price-box .price-label {
        font-family: var(--font-family-default)
    }

    .price-box .price-label {
        color: var(--color-font-dark-grey);
        white-space: nowrap
    }

.std p {
    margin: 0 0 1.5em
}

.std ol {
    list-style: decimal outside;
    margin-bottom: 1.5em
}

    .std ol li {
        margin-left: 2em
    }

.std ul {
    list-style: disc outside;
    margin-bottom: 1.5em
}

    .std ul li {
        margin-left: 2em
    }

.std .note {
    color: var(--color-font-dark-grey);
    font-size: 13px
}

.tabs {
    margin-bottom: 10px;
    background: #fff
}

@media only screen and (max-width:770px) {
    .col1-layout .pager, .col1-layout .sorter {
        width: 100%
    }

    .col1-layout .pager {
        float: left;
        clear: both
    }

        .col1-layout .pager .pages {
            float: left;
            margin-left: 0
        }

        .col1-layout .pager .count-container {
            float: right
        }
}

@media only screen and (max-width:979px) {
    .col2-left-layout .pager, .col2-left-layout .sorter, .col2-right-layout .pager, .col2-right-layout .sorter, .col3-layout .pager, .col3-layout .sorter {
        width: 100%
    }

    .col2-left-layout .pager, .col2-right-layout .pager, .col3-layout .pager {
        float: left;
        clear: both
    }

        .col2-left-layout .pager .pages, .col2-right-layout .pager .pages, .col3-layout .pager .pages {
            float: left;
            margin-left: 0
        }

        .col2-left-layout .pager .count-container, .col2-right-layout .pager .count-container, .col3-layout .pager .count-container {
            float: right
        }
}

.a-center {
    text-align: center
}

.a-right {
    text-align: right;
    min-width: 110px;
}

.a-top {
    vertical-align: top;
}

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

.nobr, .nowrap {
    white-space: nowrap
}

.width-full {
    width: 100%
}

.hidden {
    display: none
}

.fieldset p {
    margin-bottom: 7px
}

    .fieldset p.required {
        margin-bottom: 5px;
        float: right;
        font-size: 12px;
        margin-top: 0
    }

.fieldset + .fieldset {
    margin-top: 5px
}

form .legend {
    margin: 0;
    margin-bottom: 10px;
    color: var(--color-font-dark-grey);
    font-family: var(--font-family-default);
    font-size: 18px;
    font-style: normal;
    line-height: 1.4;
    text-rendering: optimizeSpeed;
    margin-bottom: 15px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ededed
}

.input-box {
    padding-top: 2px
}

    .input-box:after {
        content: "";
        display: table;
        clear: both
    }

.input-box .v-fix {
    float: left;
    margin-right: 5px;
    max-width: 100%
}

label {
    display: inline-block;
    font-size: 13px;
    font-family: var(--font-family-default);
    font-weight: 400;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none
}

    label.required:after, span.required:after {
        content: " *";
        color: #df280a;
        font-weight: 400;
        font-family: var(--font-family-default);
        font-size: 12px
    }

    label.required em, span.required em {
        display: none
    }

select {
    font-size: 14px
}

    select + select {
        margin-left: 5px
    }

    select[multiple] {
        width: 270px;
        border: 1px solid silver;
        font-size: 15px;
        padding: 5px
    }

textarea {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-width: 450px;
    padding: 5px
}

.input-text {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
    border: 1px solid silver;
    background: #fff;
    font-size: 15px
}

    .input-text:focus {
        border: 1px solid #39c
    }

    .input-text.validation-failed {
        border-color: #df280a
    }

        .input-text.validation-failed:focus {
            outline-color: #ef9485
        }

input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text] {
    height: 30px;
    padding: 0 8px;
    width: 365px;
    max-width: 100%
}

    input[type=number].qty, input[type=text].qty {
        width: 3em;
        text-align: center;
        vertical-align: middle
    }

::-webkit-input-placeholder {
    color: var(--color-font-dark-grey)
}

input:-moz-placeholder {
    color: var(--color-font-dark-grey)
}

.checkbox, .radio {
    position: relative;
    top: -1px;
    display: inline-block
}

    .checkbox + label, .radio + label {
        width: auto;
        max-width: 85%;
        padding: 0 0 0 8px;
        font-size: 14px;
        font-weight: 400;
        vertical-align: top
    }

p.required {
    margin: 5px 0 0;
    color: #df280a;
    font-size: 13px
}

.form-list > li {
    margin-bottom: 10px
}


.paymentMethodRadio input[type=radio] {
    padding: 20px 60px 15px 10px;
    list-style: none;
    margin: 0;
    vertical-align: middle;
    max-width: 85%;
    padding: 0 0 0 8px;
    font-size: 14px;
    font-weight: 400;
    vertical-align: top;
    font-size: 18pt;
    margin: 3px 10px 0px 10px;
}

.paymentMethodRadioPaypal {
    background: url('https://fpdbs.paypal.com/dynamicimageweb?cmd=_dynamic-image&buttontype=ecmark&locale=en_GB') no-repeat right center;
    padding: 20px 60px 15px 10px;
    list-style: none;
    margin: 0;
    vertical-align: middle;
    line-height: 4;
}

.form-list select {
    margin-top: 4px;
    width: 365px;
    max-width: 100%
}

.form-list .input-range .input-text {
    width: 74px
}

.form-list .control, .form-list .field, .form-list .wide {
    margin-bottom: 10px
}

    .form-list .control div.input-box {
        display: inline;
        float: left
    }

        .form-list .control div.input-box:after {
            display: none
        }

    .form-list .control input.checkbox, .form-list .control input.radio {
        float: left;
        margin-right: -40px;
        margin-top: 10px;
        margin-left: 15px
    }

    .form-list .control label {
        color: var(--color-font-dark-grey);
        background-color: #f1f1f1;
        padding: 5px 10px;
        display: inline-block;
        width: auto;
        max-width: none;
        min-width: 250px;
        float: none;
        padding: 6px 10px 6px 40px
    }

        .form-list .control label:hover {
            background-color: #eaeaea
        }

.col2-set .form-list .control label {
    min-width: inherit;
    width: auto;
    max-width: 100%
}

.form-list .control {
    margin-top: 10px
}

    .form-list .control label {
        float: none
    }

    .form-list .control .checkbox, .form-list .control .radio {
        margin-right: 6px
    }

    .form-list .control .input-box {
        clear: none;
        display: inline-block;
        width: auto;
        padding: 0
    }

form .form-instructions {
    font-family: var(--font-family-default);
    font-size: 13px;
    color: var(--color-font-dark-grey);
    padding-bottom: 5px;
}

.hide-th {
    text-indent: -9999px
}

.alt-order-table {
    display: none;
}

@media only screen and (max-width:600px) {
    .alt-order-table {
        display: block;
    }

    .order-table {
        display: none;
    }
}

.data-table {
    width: 100%
}

    .data-table td, .data-table th {
        padding: 0px 15px;
        vertical-align: top
    }

    .data-table th {
        background: none;
        font-family: var(--font-family-default);
        line-height: 1.4;
        white-space: nowrap;
        height:1px;
    }

    .data-table tbody td, .data-table thead th {
        border-bottom: 1px solid #000
    }

    .data-table-order-history tbody td {
        border-bottom: none !important
    }

    .data-table tbody td, .data-table tfoot td {
        font-family: var(--font-family-default)
    }

    .data-table tfoot tr {
        background: none
    }

    .data-table tbody td .item-options {
        margin-left: 20px;
        margin-top: 10px
    }

        .data-table tbody td .item-options dt:after {
            content: ":"
        }

.info-box {
    border: 1px solid #000;
    padding: 12px 15px;
    margin: 0 0 15px
}

    .info-box h2 {
        font-weight: 700;
        font-size: 13px
    }

@media only screen and (max-width:479px) {
    .linearize-table td, .linearize-table th, .linearize-table tr {
        display: block
    }

    .linearize-table thead th {
        border-right: 0;
        border-left: 0
    }

        .linearize-table thead th.lin-hide, .linearize-table thead th:nth-child(1n+2) {
            display: none
        }

    .linearize-table tbody tr {
        position: relative;
        border-bottom: 1px solid #ededed
    }

    .linearize-table tbody td {
        padding: 0 10px 4px;
        border-right: 0;
        border-bottom: 0
    }

        .linearize-table tbody td.lin-hide {
            display: none
        }

        .linearize-table tbody td:first-child {
            padding-top: 10px
        }

            .linearize-table tbody td:first-child, .linearize-table tbody td:first-child h3 {
                font-weight: 700
            }

        .linearize-table tbody td[data-rwd-label] {
            text-align: left;
            padding-left: 30px
        }

            .linearize-table tbody td[data-rwd-label]:before {
                content: attr(data-rwd-label) ":";
                font-size: 12px;
                font-family: var(--font-family-default);
                padding-right: 5px;
                text-transform: var(--text-transform-none)
            }

    .linearize-table tfoot tr {
        display: block;
        text-align: right
    }

        .linearize-table tfoot tr:after {
            content: "";
            display: table;
            clear: both
        }

    .linearize-table tfoot td {
        display: block;
        float: left
    }

        .linearize-table tfoot td.lin-hide {
            display: none
        }

        .linearize-table tfoot td:nth-child(odd) {
            clear: left;
            width: 60%
        }

        .linearize-table tfoot td:nth-child(2n) {
            text-align: left;
            width: 40%
        }

    .linearize-table .linearize-hide {
        display: none
    }

    .linearize-table .linearize-unpad {
        padding: 0
    }

    .linearize-table .linearize-show {
        display: block
    }
}

@media only screen and (max-width:599px) {
    .linearize-table-large td, .linearize-table-large th, .linearize-table-large tr {
        display: block
    }

    .linearize-table-large thead th {
        border-right: 0;
        border-left: 0
    }

        .linearize-table-large thead th.lin-hide, .linearize-table-large thead th:nth-child(1n+2) {
            display: none
        }

    .linearize-table-large tbody tr {
        position: relative;
        border-bottom: 1px solid #ededed
    }

    .linearize-table-large tbody td {
        padding: 0 10px 4px;
        border-right: 0;
        border-bottom: 0
    }

        .linearize-table-large tbody td.lin-hide {
            display: none
        }

        .linearize-table-large tbody td:first-child {
            padding-top: 10px
        }

            .linearize-table-large tbody td:first-child, .linearize-table-large tbody td:first-child h3 {
                font-weight: 700
            }

        .linearize-table-large tbody td[data-rwd-label] {
            text-align: left;
            padding-left: 30px
        }

            .linearize-table-large tbody td[data-rwd-label]:before {
                content: attr(data-rwd-label) ":";
                font-size: 12px;
                font-family: var(--font-family-default);
                padding-right: 5px;
                text-transform: var(--text-transform-none)
            }

    .linearize-table-large tfoot tr {
        display: block;
        text-align: right
    }

        .linearize-table-large tfoot tr:after {
            content: "";
            display: table;
            clear: both
        }

    .linearize-table-large tfoot td {
        display: block;
        float: left
    }

        .linearize-table-large tfoot td.lin-hide {
            display: none
        }

        .linearize-table-large tfoot td:nth-child(odd) {
            clear: left;
            width: 60%
        }

        .linearize-table-large tfoot td:nth-child(2n) {
            text-align: left;
            width: 40%
        }

    .linearize-table-large .linearize-hide {
        display: none
    }

    .linearize-table-large .linearize-unpad {
        padding: 0
    }

    .linearize-table-large .linearize-show {
        display: block
    }
}

@media only screen and (min-width:600px) {
    .linearize-table .linearize-collapse {
        display: none
    }
}

body, html {
    height: 100%
}

.wrapper {
    min-width: 320px;
    margin: 0 auto;
    background: #fff;
    /*width:92%*/
}

    .wrapper:after {
        content: "";
        display: table;
        clear: both
    }

@media only screen and (max-width:1240px) {
    .wrapper {
        position: relative;
        display: block !important;
        -webkit-box-align: center unset;
        -webkit-align-items: center unset;
        -moz-box-align: center unset;
        -ms-flex-align: center unset;
        align-items: center unset;
    }

    .demandedOrderButton, .demandedOrderBottomButton, .basketButton, .abortOrderCancellationButton, .storeFrontBasketContainerGreyInput, .GoToCheckoutButton {
        margin: 3px 0px;
    }

    .top-header {
        margin-top: 0px;
    }

    .header-right-product-search {
        float: none !important;
        text-align: center;
        display: block;
        clear: both;
    }

    .LogoBarRight {
        min-width: 900px;
        right: 0px;
        top: 0px;
        padding-right: 0px !important;
    }

    .storeFrontSearch input[type=text] {
        width: 100% !important;
        margin-right: 0px !important;
    }

    .storeFrontSearch input[type=submit] {
        margin-left: 5px;
    }

    .LogoBarLeft {
        margin-top: 15px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: auto;
        width: 30% !important;
        display: block;
    }

    .LogoBarLeftResponsive {
        margin-top: 15px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: auto;
        width: 30% !important;
        display: block;
    }



    .storeFrontSearch:after {
        content: "";
        display: block;
        clear: both
    }
}

@media only screen and (min-width:771px) {
    .page-header {
        max-width: 1260px;
        margin: 0 auto;
        padding: 0 30px
    }

        .page-header .header-message {
            float: right;
            display: block;
            padding-top: 30px;
            clear: right
        }

            .page-header .header-message p {
                font-size: 14px
            }

                .page-header .header-message p a {
                    font-weight: 900;
                    color: #478ec1;
                    text-decoration: none;
                    padding-bottom: 4px;
                    border-bottom: 1px solid #478ec1
                }

    .page-header-container {
        position: relative
    }
}

.page-header {
    font-family: var(--font-family-default)
}

.logo {
    display: block;
    float: left;
    width: 65%;
    min-width: 100px;
    min-height: 27px;
    text-align: center;
    padding: 10px
}

    .logo img {
        max-width: 100%
    }

    .logo .small {
        display: block
    }

    .logo .large {
        display: none
    }

    .logo:hover {
        opacity: .8
    }

@media only screen and (min-width:771px) {
    .logo {
        max-width: 300px;
        min-height: 27px
    }

        .logo .small {
            display: none
        }

        .logo .large {
            display: block
        }
}

.skip-links {
    clear: both;
    overflow: hidden;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed
}

@media only screen and (min-width:771px) {
    .skip-links {
        border: 0
    }
}

.skip-link {
    position: relative;
    float: left;
    width: 20%;
    height: 44px;
    background: #fff;
    color: var(--color-font-dark-grey);
    line-height: 40px;
    text-align: center
}

a.skip-link {
    text-decoration: none
}

.skip-link:not(.skip-active):hover {
    opacity: .8
}

@media only screen and (max-width:770px) {
    .skip-link {
        border-right: 1px solid #ededed
    }

        .skip-link:last-child {
            border-right: 0
        }
}

@media only screen and (min-width:500px) {
    .skip-link {
        width: 25%
    }
}

@media only screen and (max-width:770px) {
    .skip-link.skip-active {
        background: #ededed;
        color: inherit
    }

        .skip-link.skip-active span {
            color: inherit
        }
}

.skip-link .icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle
}

.skip-link.skip-cart:not(.no-count) .icon, .skip-link.skip-nav .icon {
    margin-right: 3px
}

@media only screen and (min-width:500px) {
    .skip-link .icon {
        margin-right: 3px
    }
}

.skip-link .label {
    display: none
}

@media only screen and (min-width:500px) {
    .skip-link .label {
        display: inline
    }
}

.skip-content {
    /*display: none;*/
}

    .skip-content.skip-active {
        display: block;
        background: #ededed
    }

.header-promo {
    text-align: center;
    width: 100%;
    font-size: 13px;
    /*margin-bottom: 10px;*/
    padding: 10px 0;
    background: #f1f1f1;
    border-bottom: 4px solid #0093B3;
}

    .header-promo li {
        display: none;
        margin: 0 10px
    }

        .header-promo li:first-child {
            display: inline-block
        }

@media only screen and (min-width:979px) {
    .header-promo li {
        display: inline-block
    }
}

@media screen and (max-width:770px) {
    .header-message {
        padding-bottom: 40px;
        float: none !important;
        margin-top: -10px !important;
    }
}

.skip-nav {
    width: 40%
}

    .skip-nav:not(.skip-active):hover {
        text-decoration: none
    }

        .skip-nav:not(.skip-active):hover .icon {
            background-position: -46px 4px
        }

    .skip-nav .label {
        display: inline
    }

    .skip-nav .icon {
        background-position: 4px 4px
    }

@media only screen and (min-width:500px) {
    .skip-nav {
        width: 25%
    }
}

@media only screen and (min-width:771px) {
    .skip-nav {
        display: none
    }
}

.skip-search:not(.skip-active):hover .icon {
    background-position: -46px -146px
}

.skip-search .icon {
    background-position: 4px -146px
}

@media only screen and (min-width:771px) {
    .skip-search {
        display: none
    }
}

h2.product-name, h3.product-name, h4.product-name, h5.product-name, p.product-name {
    margin: 0;
    margin-bottom: .5em;
    color: var(--color-font-dark-grey);
    font-size: 24px;
    font-style: normal;
    line-height: 1.2;
    text-rendering: optimizeLegibility;
    font-size: 13px;
    font-family: var(--font-family-default);
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
}

    h2.product-name a, h3.product-name a, h4.product-name a, h5.product-name a, p.product-name a {
        color: var(--color-font-dark-grey);
        word-break: break-word;
    }

        h2.product-name a:hover, h3.product-name a:hover, h4.product-name a:hover, h5.product-name a:hover, p.product-name a:hover {
            color: var(--color-font-dark-grey);
            text-decoration: none
        }

body.customer-account .my-account .page-title h1 {
    border: 0;
    text-align: left
}

body.customer-account .my-account .title-buttons {
    position: relative;
    text-align: right
}

    body.customer-account .my-account .title-buttons h1 {
        text-align: left
    }

    body.customer-account .my-account .title-buttons .button {
        position: absolute;
        right: 0;
        top: 0
    }

    body.customer-account .my-account .title-buttons a, body.customer-account .my-account .title-buttons span.separator {
        position: relative;
        top: -42px
    }

body.customer-account .my-account .addresses-list h2, body.customer-account .my-account .fieldset h2, body.customer-account .my-account .order-details h2 {
    width: 100%;
    display: inline-block
}

body.customer-account .my-account .addresses-list h3 {
    font-size: 14px;
    font-weight: 600
}

body.customer-account .my-account .fieldset {
    margin-top: 30px;
    margin-bottom: 30px
}

body.customer-account .data-table {
    margin-top: 5px
}

    body.customer-account .data-table td a {
        font-family: var(--font-family-default);
        text-transform: var(--text-transform-none);
        font-style: normal;
        font-size: 13px
    }

    body.customer-account .data-table span.nobr {
        white-space: normal
    }

        body.customer-account .data-table span.nobr a {
            white-space: nowrap
        }

    body.customer-account .data-table td.view a {
        display: block
    }

    body.customer-account .data-table .separator {
        display: none
    }

.dashboard .box-head {
    border-bottom: 1px solid #000;
    padding: 10px 15px
}

    .dashboard .box-head h2 {
        font-size: 15px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 0
    }

    .dashboard .box-head a {
        padding: 10px
    }

    .dashboard .box-head a, .dashboard .box-title a {
        text-transform: var(--text-transform-none);
        font-size: 12px
    }

.dashboard .box-account {
    padding-bottom: 10px;
    border: 1px solid #000;
    margin: 30px 0
}

    .dashboard .box-account address, .dashboard .box-account p {
        font-family: var(--font-family-default);
        font-style: italic
    }

.dashboard .col2-set .col-1, .dashboard .col2-set .col-2 {
    padding: 30px
}

    .dashboard .col2-set .col-1 .box-title, .dashboard .col2-set .col-2 .box-title {
        position: relative;
        padding-bottom: 10px
    }

        .dashboard .col2-set .col-1 .box-title h2, .dashboard .col2-set .col-1 .box-title h3, .dashboard .col2-set .col-2 .box-title h2, .dashboard .col2-set .col-2 .box-title h3 {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 0
        }

        .dashboard .col2-set .col-1 .box-title a, .dashboard .col2-set .col-2 .box-title a {
            line-height: 19.6px
        }

.my-account .addresses-list {
    font-family: var(--font-family-default)
}

    .my-account .addresses-list .col-1, .my-account .addresses-list .col-2 {
        padding-bottom: 0
    }

    .my-account .addresses-list .item {
        margin: 0 0 30px
    }

        .my-account .addresses-list .item p {
            margin-top: 10px
        }

@media only screen and (max-width:770px) {
    .my-account .addresses-list .col-1, .my-account .addresses-list .col-2 {
        width: 100%;
        padding-left: 0;
        padding-right: 0
    }

        .my-account .addresses-list .col-1 li.empty, .my-account .addresses-list .col-2 li.empty {
            width: 100%
        }
}

@media only screen and (max-width:599px) {
    .my-account .addresses-list .addresses-additional p a {
        white-space: nowrap
    }
}

.order-info {
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
    width: 100%;
    margin-bottom: 30px
}

    .order-info dd, .order-info dt, .order-info li, .order-info ul {
        display: inline
    }

    .order-info dt {
        margin-right: 20px
    }

    .order-info li {
        margin: 0 0 0 20px
    }

        .order-info li.current {
            font-weight: 600
        }

        .order-info li:first-child {
            margin-left: 0
        }

.order-date {
    font-family: var(--font-family-default);
    text-transform: var(--text-transform-none)
}

.order-info-box {
    margin-top: 20px
}

    .order-info-box + .order-info-box {
        padding-bottom: 40px;
        border-bottom: 1px solid #ededed
    }

    .order-info-box .col-1 {
        padding-right: 0;
        width: 48%
    }

    .order-info-box .col-2 {
        width: 52%
    }

    .order-info-box .col-1, .order-info-box .col-2 {
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0
    }

    .order-info-box .box-title {
        width: 150px;
        padding-right: 10px;
        float: left
    }

        .order-info-box .box-title h2 {
            font-size: 14px;
            font-family: var(--font-family-default);
            font-weight: 700;
            line-height: 1.5
        }

            .order-info-box .box-title h2:after {
                content: ":"
            }

    .order-info-box .box-content {
        float: left;
        font-family: var(--font-family-default)
    }

        .order-info-box .box-content td, .order-info-box .box-content th {
            font-family: var(--font-family-default);
            line-height: 1.3
        }

        .order-info-box .box-content th {
            padding-top: 10px
        }

        .order-info-box .box-content td {
            padding-left: 15px
        }

        .order-info-box .box-content strong {
            font-family: var(--font-family-default);
            font-weight: 400;
            text-transform: var(--text-transform-none)
        }

#my-orders-table .option-label {
    margin-left: 10px;
    font-weight: 600;
    font-style: italic
}

#my-orders-table .option-value {
    margin-left: 20px
}

#my-orders-table tr.bundle:not(:last-child) td {
    border-bottom: none;
    border-top: none
}

@media only screen and (max-width:599px) {
    #my-orders-table .option-label {
        margin-left: 20px
    }

    #my-orders-table .option-value {
        margin-left: 35px
    }

    #my-orders-table td[data-rwd-label=Qty] .nobr br {
        display: none
    }

    #my-orders-table td[data-rwd-label=Qty] .nobr strong {
        margin-right: 10px
    }

    #my-orders-table tr.bundle {
        border-color: #ededed
    }

        #my-orders-table tr.bundle.child td[data-rwd-label] {
            padding-left: 60px
        }

    #my-orders-table tbody:last-child tr:last-child td {
        padding-bottom: 10px;
        border-bottom: 0
    }

        #my-orders-table tbody:last-child tr:last-child td:last-child {
            padding-bottom: 15px
        }

    #my-orders-table tfoot tr.shipping {
        margin-top: 0
    }
}

@media only screen and (max-width:1199px) {
    .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 {
        padding-right: 30px;
        padding-bottom: 0
    }

    body.customer-account .data-table td.view a {
        white-space: normal
    }
}

@media only screen and (max-width:979px) {
    body.customer-account .my-account .title-buttons {
        text-align: left
    }

        body.customer-account .my-account .title-buttons a, body.customer-account .my-account .title-buttons span.separator {
            top: -12px
        }
}

@media only screen and (max-width:770px) {
    body.customer-account .data-table.orders td.ship, body.customer-account .data-table.orders td.status, body.customer-account .data-table.orders th.ship, body.customer-account .data-table.orders th.status {
        display: none
    }

    .order-info-box .box-content {
        clear: left
    }

    .addresses-list .item {
        float: left;
        width: 50%;
        padding-right: 30px
    }

    .order-info dt {
        display: none
    }

    .dashboard .page-title {
        margin-top: 20px
    }

        .dashboard .page-title h1 {
            margin-top: 0
        }

    .dashboard .welcome-msg {
        font-family: var(--font-family-default);
    }

        .dashboard .welcome-msg .hello {
            font-style: italic
        }

    .dashboard .box-account {
        padding-bottom: 15px;
        margin-bottom: 30px
    }

    .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 {
        width: 48%;
        padding-right: 0;
        padding-left: 0
    }

    .dashboard .col2-set .col-1 {
        float: left;
        margin-right: 4%
    }

    .dashboard .col2-set .col-2 {
        float: right
    }
}

@media only screen and (max-width:599px) {
    body.customer-account .my-account .form-list .control {
        padding-left: 0
    }
}

@media only screen and (max-width:479px) {
    body.customer-account .my-account .page-title h1, body.customer-account .my-account .title-buttons {
        text-align: center
    }

        body.customer-account .my-account .title-buttons .button {
            width: 100%;
            position: static;
            margin-bottom: 15px
        }

            body.customer-account .my-account .title-buttons .button + .button {
                margin-left: 0
            }

    body.customer-account .my-account .fieldset h2, body.customer-account .my-account .order-details h2 {
        margin-bottom: 15px
    }

    body.customer-account .my-account .buttons-set {
        border-top: 0
    }

    body.customer-account .my-account .addresses-list .item {
        margin-bottom: 15px;
        padding-right: 0;
        float: none;
        width: auto
    }

    body.customer-account .my-account .addresses-list h2 {
        margin-bottom: 15px
    }

    .order-info {
        margin-top: 15px
    }

    .data-table.orders .date, .data-table.orders .link-reorder {
        display: none
    }

    .data-table.orders td.view {
        text-align: right
    }

    .dashboard .col2-set .col-1, .dashboard .col2-set .col-2 {
        width: 100%;
        margin-top: 15px
    }

    .order-info-box {
        margin: 0
    }

        .order-info-box .col-1, .order-info-box .col-2 {
            width: 100%;
            border-bottom: 1px solid #ededed;
            padding: 15px 0
        }

        .order-info-box + .order-info-box {
            padding-bottom: 0;
            border-bottom: 0;
            margin-bottom: 30px
        }
}



.formInput {
    border: 1px solid var(--color-default);
    width: 100% !important;
    font-size: 14px !important;
    height: 30px !important;
}

.formInputLarge {
    border: 1px solid var(--color-default);
    width: 100% !important;
    font-size: 14px !important;
}

.formInputNoValidate {
    border: 1px solid var(--color-default);
    width: 100% !important;
    font-size: 14px !important;
    height: 30px !important;
}

.formInputPreAutoFill {
    border: 1px solid var(--color-default);
    width: 100% !important;
    font-size: 14px !important;
}

.formInputDropDown {
    border: 1px solid var(--color-default);
    width: 100% !important;
    font-size: 14px !important;
}

storeFrontFormError {
    display: none;
}

.error-message {
    display: none;
    color: var(--color-invalid-font);
}

.error-message-visible {
    color: var(--color-invalid-font);
    display: block;
}

.formInput:focus, .formInputLarge:focus {
    outline: none;
}


.formInputNoValidate:focus {
    outline: none;
}

.formInput:not(:focus):not(:placeholder-shown):invalid, .formInputLarge:not(:focus):not(:placeholder-shown):invalid {
    border: 1px solid var(--color-invalid) !important;
}

    .formInput:not(:focus):not(:placeholder-shown):invalid ~ .error-message, .formInputLarge:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
        display: block;
    }

.formInput:not(:focus):not(:placeholder-shown):valid, .formInputLarge:not(:focus):not(:placeholder-shown):valid {
    border: 1px solid var(--color-default);
}

.formInputPreAutoFill:focus {
    outline: none;
}

/*.formInputPreAutoFill:not(:focus):not(:placeholder-shown):invalid {
    border: 2px solid var(--color-invalid);
}*/

    .formInputPreAutoFill:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
        display: block;
    }

.formInputPreAutoFill:not(:focus):not(:placeholder-shown):valid {
    border: 1px solid var(--color-default);
}

.formInputDropDown:focus {
    outline: none;
}

.formInputDropDown:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
    display: block;
}

.formInputDropDown:not(:focus):invalid {
    border: 1px solid var(--color-invalid) !important;
}


.StoreFormWrapper {
    padding: 0px 0px 0px 0px;
    max-width: 460px;
    margin: auto;
    align-content: center;
}

    .StoreFormWrapper .page-title {
        text-align: center;
    }

.AccountDetailsStoreFormWrapper {
    max-width: 460px;
    margin-top:20px;
}

.StoreFormWrapper .page-title {
    text-align: center;
}

.mainForm {
    margin: 0px 20px 20px 20px;
}

    .mainForm input[type=submit] {
        background-color: var(--color-button);
    }

    .mainForm a {
        text-decoration: underline;
    }

.storeFrontFormError {
    display: block;
}

.EduErrorMsg {
    color: #ff0000;
    padding-bottom: 10px;
    padding-left: 5px;
}

.formInputSearch {
    border: 1px solid var(--color-default);
    height: 30px !important;
    font-size: 14px;
}

    .formInputSearch:focus {
        outline: none;
    }

    .formInputSearch:not(:focus):not(:placeholder-shown):invalid {
        border: 2px solid var(--color-default);
    }

    .formInputSearch:not(:placeholder-shown):invalid {
        border: 2px solid var(--color-invalid);
    }

    .formInputSearch:not(:focus):not(:placeholder-shown):valid {
        outline: none;
    }

.slide-up, .slide-down {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}

.slide-down {
    max-height: 10em;
}

.iconButton {
    color: var(--color-font-dark-grey) !important;
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;
    line-height: 16px;
    font-size: 8pt;
    margin-top: 7px;
    text-align: center;
    min-width: 65px !important;
}

    .iconButton:hover {
        color: #a0a0a0 !important;
    }

    .iconButton button[type=button] {
        line-height: 35px;
        text-align: center;
        vertical-align: top;
        margin-left: 3px;
        border: 0px;
        border-radius: 2px;
    }

    .iconButton i {
        font-size: 22pt;
        margin: 0px;
        padding: 0px;
        border: 0px;
    }

.header-message {
    float: right;
    font-family: var(--font-family-default);
    margin-right: 20px;
    margin-top: 10px;
}

input {
font-size:16px;
}