*, :after, :before {
    box-sizing: inherit
}

html {
    height: 100%;
    box-sizing: border-box;
    transition: background-color .3s cubic-bezier(.25,.8,.25,1)
}

body {
    min-height: 100%;
    margin: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto,Noto Sans,-apple-system,BlinkMacSystemFont,sans-serif
}

a:not(.md-button) {
    transition: .3s cubic-bezier(.25,.8,.25,1);
    transition-property: color,background-color,opacity
}

audio, canvas, embed, iframe, img, object, video {
    max-width: 100%;
    font-style: italic;
    vertical-align: middle
}

    audio:not(.md-image), canvas:not(.md-image), embed:not(.md-image), iframe:not(.md-image), img:not(.md-image), object:not(.md-image), video:not(.md-image) {
        height: auto
    }

[tabindex="-1"]:focus {
    outline: 0 !important
}

a:not(.md-button) {
    text-decoration: none
}

button:focus {
    outline: 0
}

body, html {
    width: 100%
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

article, aside, footer, header, main, nav, section {
    display: block
}

video {
    display: inline-block;
    vertical-align: baseline
}

a {
    background-color: transparent
}

    a:active, a:hover {
        outline: 0
    }

h1 {
    margin: .67rem 0;
    font-size: 2rem
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

hr {
    box-sizing: content-box;
    height: 0
}

button, input, select, textarea {
    color: inherit;
    font: inherit
}

button {
    overflow: visible
}
button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    cursor: pointer
}

    button[disabled], html input[disabled] {
        cursor: default
    }

    button::-moz-focus-inner, input::-moz-focus-inner {
        padding: 0;
        border: 0
    }

input {
    line-height: normal
}

    input[type=checkbox], input[type=radio] {
        box-sizing: border-box
    }

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
        height: auto
    }

    input[type=search] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        -ms-appearance: textfield;
        -o-appearance: textfield;
        appearance: textfield;
        box-sizing: content-box
    }

        input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none
        }

textarea {
    overflow: auto
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

html {
    box-sizing: border-box
}

*, ::after, ::before {
    box-sizing: inherit
}

html[lang=ar] .product-price .now, html[lang=ar] .product-price .was, html[lang=ko] .product-price .now, html[lang=ko] .product-price .was, html[lang=zh-cn] .product-price .now, html[lang=zh-cn] .product-price .was {
    font-family: bonodiBe-medium,serif !important
}

ul.dropdown-menu li a[href*='/ar/'] {
    font-family: "Noto Kufi Arabic",brown-regular,bonodiBe-medium,sans-serif !important
}

fieldset {
    margin: 0 0 .75rem;
    padding: 1.5rem;
    background-color: #f7f7f7;
    border: 1px solid #ddd
}

input:not(.no-style):not(.md-input), label:not(.no-style):not(.md-radio-label), select:not(.no-style) {
    display: block;
    font-family: brown-regular,sans-serif;
    font-size: 1rem;
    color: #444
}

input:not(.no-style):not(.md-input):-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset
}

select:not(.no-style):-webkit-autofill {
    animation-name: onAutoFillStart;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 1s ease-in-out 0s
}

select:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel
}

::-webkit-input-placeholder {
    color: #979797
}

:-moz-placeholder {
    color: #979797
}

::-moz-placeholder {
    color: #979797
}

:-ms-input-placeholder {
    color: #979797
}

label:not(.no-style):not(.md-radio-label) {
    margin-bottom: .375rem;
    color: #000
}

label.required:not(.md-radio-label):not(.no-style)::after {
    content: '*'
}

label:not(.no-style):not(.md-radio-label) abbr {
    display: none
}

label:hover:not(.no-style):not(.md-radio-label) {
    cursor: text
}

label:not(.no-style):not(.md-radio-label) a {
    color: #c2092f
}

input[type=date]:not(.no-style):not(.md-input), input[type=email]:not(.no-style):not(.md-input), input[type=number]:not(.no-style):not(.md-input), input[type=password]:not(.no-style):not(.md-input), input[type=search]:not(.no-style):not(.md-input), input[type=tel]:not(.no-style):not(.md-input), input[type=text]:not(.no-style):not(.md-input), input[type=url]:not(.no-style):not(.md-input), select[multiple=multiple]:not(.no-style):not(.md-input), textarea:not(.no-style):not(.md-input) {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: .75rem;
    padding: .5rem;
    font-family: brown-regular,sans-serif;
    font-size: 1rem;
    transition: border-color;
    background-color: rgb(245, 240, 230);
    border: 1px solid rgb(126, 138, 74);
}

input[type=date]:focus:not(.no-style):not(.md-input), input[type=email]:focus:not(.no-style):not(.md-input), input[type=number]:focus:not(.no-style):not(.md-input), input[type=password]:focus:not(.no-style):not(.md-input), input[type=search]:focus:not(.no-style):not(.md-input), input[type=tel]:focus:not(.no-style):not(.md-input), input[type=text]:focus:not(.no-style):not(.md-input), input[type=url]:focus:not(.no-style):not(.md-input), select[multiple=multiple]:focus:not(.no-style):not(.md-input), textarea:focus:not(.no-style):not(.md-input) {
    border-color: #b7b7b7;
    outline: 0
}

input[type=date]:not(.no-style), input[type=email]:not(.no-style), input[type=password]:not(.no-style), input[type=text]:not(.no-style), input[type=time]:not(.no-style) {
    height: 2.9167rem;
    -webkit-appearance: none;
    color: #000
}

input[type=text].smart-search {
    padding-left: .9rem;
    border: none;
    border-radius: 3px
}

textarea:not(.no-style) {
    resize: vertical;
    color: #000
}

input[type=search]:not(.no-style) {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none
}

input[type=radio]:not(.no-style) {
    display: inline;
    margin-right: .375rem
}

input[type=checkbox]:not(.no-style) {
    display: inline;
    margin-right: 1.25rem
}

input[type=file]:not(.no-style) {
    width: 100%;
    padding-bottom: .75rem
}

select:not(.no-style) {
    max-width: 100%;
    width: auto;
    margin-bottom: 1.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none
}

span.error {
    margin: -.4167rem 0 1rem;
    color: red;
    display: block !important;
    clear: both;
    text-align: left
}

span.valid {
    display: none !important
}

input[type=checkbox].error + label:before {
    border: solid 2px red
}

form div.checkbox-error {
    position: relative;
    margin-top: -.8333rem;
    margin-bottom: 2rem
}

ol, ul {
    list-style-type: none
}

dl {
    margin-bottom: .75rem
}

    dl dt {
        font-family: brown-bold,sans-serif;
        font-family: brown-regular,sans-serif;
        margin-top: .75rem
    }

.table, table {
    table-layout: fixed;
    width: 100%;
    margin: .75rem 0;
    -ms-font-feature-settings: "kern","liga","tnum";
    font-feature-settings: "kern","liga","tnum";
    border-collapse: collapse
}

.th, th {
    padding: .75rem 0;
    font-weight: 600;
    text-align: left
}

.td, td {
    padding: .75rem 0
}

.td {
    display: inline-block
}

.td, .th, .tr, td, th, tr {
    vertical-align: middle
}

.tr, tr {
    border-bottom: 1px solid #ddd
}

html {
    font-size: 75%
}

body {
    -ms-font-feature-settings: "kern","liga","pnum";
    font-feature-settings: "kern","liga","pnum";
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-family: BrownStd-Regular,sans-serif;
    line-height: 1.5;
    background-color: var(--sandstone);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .75rem;
    font-family: brown-light,sans-serif;
    font-size: 1rem;
    font-weight: initial;
    line-height: 1.2;
    letter-spacing: .1rem
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit
}

p {
    margin: 0 0 .75rem
}

    p strong {
        font-family: brown-bold,sans-serif;
        font-family: brown-regular,sans-serif
    }

a {
    color: #7b7b7b;
    text-decoration: none;
    transition: all .2s linear
}

    a:active, a:focus, a:hover {
        opacity: .7
    }

    a:active {
        outline: 0
    }

hr {
    margin: 1.5rem 0;
    border-bottom: 1px solid #ddd;
    border-left: none;
    border-right: none;
    border-top: none
}

img, picture {
    max-width: 100%
}

[id^=anchor-] {
    display: block;
    visibility: hidden
}

.button, .button:disabled, button, button:disabled {
    display: inline-block;
    padding: 1.2rem 1.2rem 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    color: #000;
    font-family: brown-regular,sans-serif;
    font-size: 1.17rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .1rem;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    background-color: transparent;
    border-radius: 0;
    border: 1px solid #000;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
    transition: all .2s ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

body {
    position: relative;
    overflow-y: auto
}

    body.modal-open {
        overflow: hidden
    }

video {
    z-index: 11
}

.grid-col-12 article{
    font-size: 12px;
}