@charset "UTF-8";
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
object,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  vertical-align: top;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

* {
  min-height: 0;
  min-width: 0;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  margin: 0;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

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

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
  max-width: 100%;
  vertical-align: bottom;
  -webkit-touch-callout: none;
}

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

figure {
  margin: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

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

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

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

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

input[type=checkbox],
input[type=radio] {
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
}

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

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

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icons/icomoon.ttf") format("truetype"), url("../fonts/icons/icomoon.woff") format("woff"), url("../fonts/icons/icomoon.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=i-], [class*=" i-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.i-csv:before {
  content: "\e934";
}

.i-menu:before {
  content: "\e903";
}

.i-form-arrow:before {
  content: "\e904";
}

.i-arrow-hover .path1:before {
  content: "\e901";
  color: #9A6247;
}

.i-arrow-hover .path2:before {
  content: "\e902";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-new-badge .path1:before {
  content: "\e908";
  color: #9A6247;
}

.i-new-badge .path2:before {
  content: "\e909";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-new-badge .path3:before {
  content: "\e90a";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-new-badge .path4:before {
  content: "\e90b";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-close-btn .path1:before {
  content: "\e921";
  color: rgb(255, 255, 255);
}

.i-close-btn .path2:before {
  content: "\e922";
  margin-left: -1em;
  color: #9A6247;
}

.i-close-btn .path3:before {
  content: "\e923";
  margin-left: -1em;
  color: #9A6247;
}

.i-left-arrow-hover .path1:before {
  content: "\e924";
  color: #9A6247;
}

.i-left-arrow-hover .path2:before {
  content: "\e926";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-left-arrow:before {
  content: "\e925";
}

.i-back-arrow:before {
  content: "\e929";
}

.i-calendar .path1:before {
  content: "\e905";
  color: rgb(255, 255, 255);
}

.i-calendar .path2:before {
  content: "\e906";
  margin-left: -1em;
  color: #9A6247;
}

.i-calendar .path3:before {
  content: "\e907";
  margin-left: -1em;
  color: #9A6247;
}

.i-arrow:before {
  content: "\e900";
}

.i-account .path1,
.i-account .path2,
.i-account .path3,
.i-account .path4,
.i-account .path5 {
  letter-spacing: 0 !important;
}

.i-account .path1:before {
  content: "\e90c";
  color: #E9E5DE;
}

.i-account .path2:before {
  content: "\e90d";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-account .path3:before {
  content: "\e90e";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-account .path4:before {
  content: "\e90f";
  margin-left: -1em;
  color: #000000;
}

.i-account .path5:before {
  content: "\e910";
  margin-left: -1em;
  color: #000000;
}

.i-allergan-logo:before {
  content: "\e911";
}

.i-bd .path1:before {
  content: "\e912";
  color: #000000;
}

.i-bd .path2:before {
  content: "\e913";
  margin-left: -0.9970703125em;
  color: rgb(255, 255, 255);
}

.i-bd .path3:before {
  content: "\e914";
  margin-left: -0.9970703125em;
  color: rgb(255, 255, 255);
}

.i-bd .path4:before {
  content: "\e915";
  margin-left: -0.9970703125em;
  color: rgb(255, 255, 255);
}

.i-cart .path1,
.i-cart .path2,
.i-cart .path3,
.i-cart .path4,
.i-cart .path5,
.i-cart .path6 {
  letter-spacing: 0 !important;
}

.i-cart .path1:before {
  content: "\e916";
  color: #E9E5DE;
}

.i-cart .path2:before {
  content: "\e917";
  margin-left: -1em;
  color: #000000;
}

.i-cart .path3:before {
  content: "\e918";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-cart .path4:before {
  content: "\e919";
  margin-left: -1em;
  color: #000000;
}

.i-cart .path5:before {
  content: "\e91a";
  margin-left: -1em;
  color: #000000;
}

.i-cart .path6:before {
  content: "\e91b";
  margin-left: -1em;
  color: #000000;
}

.i-facebook:before {
  content: "\e91c";
}

.i-instagram:before {
  content: "\e91d";
}

.i-pinterest:before {
  content: "\e91e";
}

.i-snapchat:before {
  content: "\e91f";
}

.i-twitter:before {
  content: "\e920";
}

.i-help-icon:before {
  content: "\e928";
}

.i-check_icon:before {
  content: "\e927";
}

.i-check-mark:before {
  content: "\e92a";
}

.i-print:before {
  content: "\e92b";
}

.i-information:before {
  content: "\e92c";
}

.i-rank:before {
  content: "\e92d";
}

.i-email:before {
  content: "\e92e";
}

.i-bell .path1:before {
  content: "\e92f";
  color: #E9E5DE;
}

.i-bell .path2:before {
  content: "\e930";
  margin-left: -1em;
  color: #000000;
}

.i-bell .path3:before {
  content: "\e931";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-bell .path4:before {
  content: "\e932";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

.i-bell .path5:before {
  content: "\e933";
  margin-left: -1em;
  color: #000000;
}

.i-search:before {
  content: "\e935";
}

.i-filter:before {
  content: "\e936";
}

.i-excel:before {
  content: "\e937";
}

/* SG
# Content elements/Headings
```
<p> font / size / line spacing / treatment | mobile </p>
<div class="baner-text">class "baner-text" (Brandon Grotesque Light-44px/53px/Title Case | 26px/20px)</div>
<h1>Title h1 (Brandon Grotesque Regular-24px/29px/Title Case  | 24px/29px)</h1>
<h2>Title h2 (Brandon Grotesque Regular-24px/29px/ALL Case  | 20px/29px)</h2>
<h3>Title h3 (Brandon Grotesque Bold-20px/29px/Initial caps  | 20px/29px)</h3>
<h4>Title h4-h6 (Brandon Grotesque Regular-20px/29px/Initial caps  | 20px/24px)</h4>
<p>body text (Brandon Grotesque Light-20px/24px/Initial caps  | 20px/24px)</p>
<div class="text-normal-small">
    class "text-normal-small" (Brandon Grotesque Regular-16px)
</div>
<div class="text-bold">
    class "text-bold" (Brandon Grotesque Bold-20px)
</div>
<div class="text-bold-small">
    class "text-bold-small" (Brandon Grotesque Bold-16px)
</div>
<div>
    <strong>tag strong (Brandon Grotesque Bold) </strong>
</div>
<div>
    <b>tag b (Brandon Grotesque Bold)</b>
</div>
```
*/
/* SG
# Content elements/Links
```
<div>
    <a href="">Primary Link</a>
</div>
<div>
    <a class="secondary-link" href="">Secondary Llink</a>
</div>
<div>
    <a class="alternate-link" href="">Alternative Link</a>
</div>
<div>
    <a class="upercase-link" href="">Button Link</a>
</div>
<div>
    <a class="product-title-link" href="">Product Title Link</a>
</div>
```
*/
/* SG
# Content elements/Icons
```
<table border="1" cellpadding="10">
    <tr>
        <td align="center">
            <i class="icon i-bell"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-bell"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;span class="path4"&gt;&lt;/span&gt;&lt;span class="path5"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-email"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-email"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-information"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-information"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-print"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-print"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-check-mark"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-check-mark"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-help-icon"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-help-icon"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-check_icon"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-check_icon"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-menu"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-menu"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-form-arrow"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-form-arrow"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-arrow-hover"><span class="path1"></span><span class="path2"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-arrow-hover"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-new-badge"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-new-badge"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;span class="path4"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-close-btn"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-close-btn"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-left-arrow-hover"><span class="path1"></span><span class="path2"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-left-arrow-hover"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-left-arrow"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-left-arrow"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-back-arrow"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-back-arrow"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-calendar"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-calendar"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-arrow"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-arrow"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-account"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-account"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;span class="path4"&gt;&lt;/span&gt;&lt;span class="path5"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-allergan-logo"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-allergan-logo"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-bd"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-bd"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;span class="path4"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-cart"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-cart"&gt;&lt;span class="path1"&gt;&lt;/span&gt;&lt;span class="path2"&gt;&lt;/span&gt;&lt;span class="path3"&gt;&lt;/span&gt;&lt;span class="path4"&gt;&lt;/span&gt;&lt;span class="path5"&gt;&lt;/span&gt;&lt;span class="path6"&gt;&lt;/span&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-facebook"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-facebook"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-instagram"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-instagram"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-pinterest"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-pinterest"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-snapchat"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-snapchat"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-twitter"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-twitter"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
    <tr>
        <td align="center">
            <i class="icon i-rank"></i>
        </td>
        <td>
            <pre>
                &lt;i class="icon i-rank"&gt;&lt;/i&gt;&#13;
            </pre>
        </td>
    </tr>
</table>
```
*/
body {
  color: #505050;
  font-family: "Graphik_Light", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.5rem;
  word-wrap: break-word;
  position: relative;
}

h1,
.h1 {
  color: #505050;
  font-family: "Stanley_Regular", "Georgia", "DejaVu Serif", serif;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.8125rem;
  margin-top: 0;
  text-transform: capitalize;
}
@media only screen and (max-width : 767px) {
  h1,
  .h1 {
    font-size: 1.5rem;
    line-height: 1.8125rem;
  }
}

h2,
.h2 {
  color: #505050;
  font-family: "Stanley_Regular", "Georgia", "DejaVu Serif", serif;
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.8125rem;
  text-transform: uppercase;
}
@media only screen and (max-width : 767px) {
  h2,
  .h2 {
    font-size: 1.25rem;
    line-height: 1.8125rem;
  }
}

h3,
.h3 {
  color: #505050;
  font-family: "Stanley_Regular", "Georgia", "DejaVu Serif", serif;
  font-size: 1.25rem;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.5rem;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: #505050;
  font-family: "Stanley_Regular", "Georgia", "DejaVu Serif", serif;
  font-size: 1.25rem;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.5rem;
}

.baner-text {
  color: #000000;
  font-family: "Graphik_Light", Helvetica, Arial, sans-serif;
  font-size: 2.75rem;
  font-weight: normal;
  letter-spacing: 0.026em;
  line-height: 3.3125rem;
  text-transform: capitalize;
}
@media only screen and (max-width : 767px) {
  .baner-text {
    font-size: 1.625rem;
    line-height: 1.25rem;
  }
}

.text-normal-small,
.dialog-required,
.form-caption {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

.text-bold,
legend,
.legend {
  font-family: "Graphik_Bold", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
}

.text-medium {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
}

.text-medium-small {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

.text-bold-small {
  font-family: "Graphik_Bold", Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

a {
  transition: all 200ms ease-in;
  color: #000000;
  cursor: pointer;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
a:hover, a.active, a:focus {
  color: #9A6247;
}

.secondary-link,
.form-field-tooltip a {
  color: #9A6247;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.secondary-link:hover, .secondary-link:focus-within,
.form-field-tooltip a:hover,
.form-field-tooltip a:focus-within {
  color: #9A6247;
  text-decoration: underline;
}

.alternate-link {
  color: #6F6D6D;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.alternate-link:hover, .alternate-link:focus {
  color: #9A6247;
  text-decoration: underline;
}

.upercase-link {
  color: #000000;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
}
.upercase-link:hover, .upercase-link:focus {
  color: #9A6247;
  text-decoration: none;
}

.product-title-link {
  color: #505050;
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  text-decoration: none;
}
.product-title-link:hover, .product-title-link:focus-within {
  color: #505050;
  opacity: 0.7;
  text-decoration: none;
}

[class^=i-],
[class*=" i-"],
.icon {
  cursor: pointer;
  font-size: 1.75rem;
  outline: 0;
}
@media only screen and (max-width : 767px) {
  [class^=i-] span + span,
  [class*=" i-"] span + span,
  .icon span + span {
    margin: 0;
    position: absolute;
  }
}

.icon-social {
  color: #9A6247;
  display: inline-block;
  font-size: 1.75rem;
}
.icon-social:hover {
  color: #9A6247;
  text-decoration: none;
}

.i-allergan-logo {
  font-size: 1.4375rem;
}

.i-account {
  font-size: 2.8125rem;
}

.i-bell {
  font-size: 2.25rem;
}

.i-cart {
  font-size: 2.8125rem;
}

.i-filter {
  font-size: 1rem;
  padding-right: 5px;
}

b,
strong {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
}

.out-of-stock {
  color: #bd0218;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

.in-stock {
  text-transform: capitalize;
  color: #028845;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}

/* SG
# Form elements/ Buttons
```
<div>
    <button>Primary CTA</button> <button class="disabled">Primary CTA Disabled</button>
</div>
<div>
    <a class="btn">Primary CTA - link</a> <a class="btn disabled">Primary CTA - link Disabled</a>
</div>
<div>
    <button class="btn-secondary" title="">Secondary CTA</button> <button class="btn-secondary disabled" title="">Secondary CTA Disabled</button>
</div>
```
*/
button,
input[type=submit],
input[type=button],
input[type=image],
[class^=btn-],
[class*=" btn-"],
[class^=btn],
[class*=" btn"] {
  transition: all 200ms ease-in;
  border-width: 2px;
  border-style: solid;
  border-radius: 40px;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0 19px;
  text-align: center;
  text-decoration: none;
  min-width: 190px;
  min-height: 42px;
  line-height: 38px;
  display: inline-block;
  text-transform: uppercase;
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  background: #9A6247;
  border-color: #9A6247;
  color: #ffffff;
  box-shadow: none;
}
button.disabled, button[disabled], button.disabled:hover, button[disabled]:hover, button.disabled:focus, button[disabled]:focus,
input[type=submit].disabled,
input[type=submit][disabled],
input[type=submit].disabled:hover,
input[type=submit][disabled]:hover,
input[type=submit].disabled:focus,
input[type=submit][disabled]:focus,
input[type=button].disabled,
input[type=button][disabled],
input[type=button].disabled:hover,
input[type=button][disabled]:hover,
input[type=button].disabled:focus,
input[type=button][disabled]:focus,
input[type=image].disabled,
input[type=image][disabled],
input[type=image].disabled:hover,
input[type=image][disabled]:hover,
input[type=image].disabled:focus,
input[type=image][disabled]:focus,
[class^=btn-].disabled,
[class^=btn-][disabled],
[class^=btn-].disabled:hover,
[class^=btn-][disabled]:hover,
[class^=btn-].disabled:focus,
[class^=btn-][disabled]:focus,
[class*=" btn-"].disabled,
[class*=" btn-"][disabled],
[class*=" btn-"].disabled:hover,
[class*=" btn-"][disabled]:hover,
[class*=" btn-"].disabled:focus,
[class*=" btn-"][disabled]:focus,
[class^=btn].disabled,
[class^=btn][disabled],
[class^=btn].disabled:hover,
[class^=btn][disabled]:hover,
[class^=btn].disabled:focus,
[class^=btn][disabled]:focus,
[class*=" btn"].disabled,
[class*=" btn"][disabled],
[class*=" btn"].disabled:hover,
[class*=" btn"][disabled]:hover,
[class*=" btn"].disabled:focus,
[class*=" btn"][disabled]:focus {
  background: #ffffff;
  border-color: #6F6D6D;
  color: #6F6D6D;
}
button:hover, button:focus,
input[type=submit]:hover,
input[type=submit]:focus,
input[type=button]:hover,
input[type=button]:focus,
input[type=image]:hover,
input[type=image]:focus,
[class^=btn-]:hover,
[class^=btn-]:focus,
[class*=" btn-"]:hover,
[class*=" btn-"]:focus,
[class^=btn]:hover,
[class^=btn]:focus,
[class*=" btn"]:hover,
[class*=" btn"]:focus {
  outline: none;
  background: #ffffff;
  border-color: #9A6247;
  color: #9A6247;
}
button:focus-visible,
input[type=submit]:focus-visible,
input[type=button]:focus-visible,
input[type=image]:focus-visible,
[class^=btn-]:focus-visible,
[class*=" btn-"]:focus-visible,
[class^=btn]:focus-visible,
[class*=" btn"]:focus-visible {
  transition: 0.5s box-shadow;
  box-shadow: 0 0 0 1px black;
}

[class^=btn-secondary],
[class*=" btn-secondary"] {
  background: #ffffff;
  color: #9A6247;
  border-color: #000000;
}
[class^=btn-secondary]:hover, [class^=btn-secondary]:focus,
[class*=" btn-secondary"]:hover,
[class*=" btn-secondary"]:focus {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.touch [class^=btn-secondary]:hover, .touch [class^=btn-secondary]:focus-within,
.touch [class*=" btn-secondary"]:hover,
.touch [class*=" btn-secondary"]:focus-within {
  background: #ffffff;
  border-color: #000000;
  color: #9A6247;
}
.touch [class^=btn-secondary]:active,
.touch [class*=" btn-secondary"]:active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* SG
# Form elements/ Checkbox-Radio Button
```
<div class="f-field-checkbox">
    <input id="example-checkbox" class="input-checkbox" type="checkbox">

    <label for="example-checkbox">
        <span class="fake-checkbox"></span>
        <span>Our checkbox</span>
    </label>
</div>
<div class="f-field-checkbox">
    <input id="example-checkbox2" class="input-checkbox "  type="checkbox" checked>

    <label for="example-checkbox2">
        <span class="fake-checkbox"></span>
        <span>Our checkbox checked</span>
    </label>
</div>
<div class="f-field-checkbox">
    <input id="example-checkbox3" class="input-checkbox" type="checkbox" disabled>

    <label class="control-disabled" for="example-checkbox3">
        <span class="fake-checkbox"></span>
        <span>Our disabled checkbox</span>
    </label>
</div>
<div class="f-field-checkbox">
    <input id="example-checkbox4" class="input-checkbox " type="checkbox" checked disabled>

    <label class="control-disabled" for="example-checkbox4">
        <span class="fake-checkbox"></span>
        <span>Our disabled checkbox checked</span>
    </label>
</div>
<div>
    <div class="refinement">
        <ul>
            <li>
                <a class="refinement-link" href="">
                    <span class="fake-checkbox"></span>
                    Our fake checkbox
                </a>
            </li>
        </ul>
    </div>
</div>
<div>
    <div class="refinement">
        <ul>
            <li class="selected">
                <a class="refinement-link" href="">
                    <span class="fake-checkbox"></span>
                    Our fake checkbox checked
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="f-field-radio">
    <input id="example-radio" class="input-radio" name="example-radio" type="radio">

    <label for="example-radio">
        <span class="fake-radio"></span>
        <span>Our radioburron checked and hover</span>
    </label>
</div>
<div class="f-field-radio">
    <input id="example-radio1" class="input-radio" name="example-radio" type="radio" checked>

    <label for="example-radio1">
        <span class="fake-radio"></span>
        <span>Our radioburron2 checked and hover</span>
    </label>
</div>
<div class="f-field-radio">
    <input id="example-radio2" class="input-radio" name="example-radio" type="radio" disabled>

    <label class="control-disabled" for="example-radio2">
        <span class="fake-radio"></span>
        <span>Our radioburron disabled</span>
    </label>
</div>
<div class="f-field-radio">
    <input id="example-radio3" class="input-radio" name="example-radio" type="radio"checked disabled>

    <label class="control-disabled" for="example-radio3">
        <span class="fake-radio"></span>
        <span>Our radioburron2 disabled checked</span>
    </label>
</div>
```
*/
/* SG
# Form elements/ Drop Down
```
<div>
    <label><span class="required-indicator">*</span><span>Example label for drop down</span></label>
    <div class="select-field-wrapper">
        <select>
            <option value="" selected="">Value 1</option>
            <option value="">Value 2</option>
            <option value="">Value 3</option>
            <option value="">Value 4</option>
            <option value="">Value 6</option>
        </select>
        <i class="icon i-form-arrow"></i>
    </div>
</div>
<div>
    <div class="select-field-wrapper">
        <select disabled>
            <option value="" selected="">Value 1</option>
            <option value="">Value 2</option>
            <option value="">Value 3</option>
            <option value="">Value 4</option>
            <option value="">Value 6</option>
        </select>
        <i class="icon i-form-arrow"></i>
    </div>
</div>
<div>
    <div class="select-field-wrapper">
        <select class="error">
            <option value="" selected="">Please select</option>
            <option value="">Value 2</option>
            <option value="">Value 3</option>
            <option value="">Value 4</option>
            <option value="">Value 6</option>
        </select>
        <i class="icon i-form-arrow"></i>
    </div>
</div>
```
*/
/* SG
# Form elements/ Text form
```
<h4>With arrow</h4>
<div>
    <fieldset class="button-on-input">
        <input class="search-input valid" type="text">
        <button class="button search-button" type="submit">
            <i class="icon i-form-arrow"></i>
        </button>
    </fieldset>
</div>
<div>
    <fieldset class="button-on-input">
        <input class="search-input valid" placeholder="Text form" type="text">
        <button class="button search-button" type="submit">
            <i class="icon i-form-arrow"></i>
        </button>
    </fieldset>
</div>
<h4>With No Arrow</h4>
<div>
    <legend>
        Returning Customers
        <div class="dialog-required"> <span class="required-indicator">*<em>Required fields</em></span></div>
    </legend>
    <div>
        <label for="123"><span class="required-indicator">*</span><span>Email</span></label>
        <div class="field-wrapper">
            <input class="input-text required" id="123" type="text">
        </div>
        <div class="form-caption">At least 8 characters please</div>
    </div>
</div>
<div>
    <input class="error" type="text" value="Text Form">
    <span class="error">Error message</span>
</div>
```
*/
/* SG
# Form elements/ Messages
```
<div class="error-form">
Example message: Your shopping cart can currently not be ordered since one or more of the products in your cart have an invalid price or are not available in the requested quantity. If you have any questions, please contact <a href="/customer%20service-2/cs-landing.html?lang=en_US" title="Customer Service">Customer Service</a>.
</div>
```
*/
/* SG
# Form elements/ Datepicker
```
<div class="datepicker-wrapper">
    <span class="i-calendar"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>
    <input
        class="js-datepicker datepicker"
        type="text"
        value="Oct 20, 2017"
        data-datepicker-alt-format="@"
        data-datepicker-date-format="M dd, yy"
    />
</div>
```
*/
.form-row {
  clear: both;
  line-height: 1rem;
  padding-bottom: 20px;
}
.form-row-button button:focus {
  border: 1px dotted black;
}
.form-row input[type=checkbox]:focus-visible ~ .label-wrapper label .fake-checkbox {
  outline: 1px dotted #000;
  outline-offset: 2px;
}
.form-row.error label {
  color: #bd0218;
}
.form-row.error input {
  border-color: #bd0218;
  color: #bd0218;
}

.form-caption {
  color: #505050;
  line-height: 1rem;
  padding: 10px 0 0 0;
}
.form-caption:empty {
  padding: 0;
}
.form-row.error .form-caption {
  color: #bd0218;
}

fieldset {
  margin-bottom: 20px;
}

legend,
.legend {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  border-bottom: 1px solid #e2e0de;
  color: #505050;
  margin-bottom: 20px;
  padding-bottom: 10px;
  width: 100%;
}

.dialog-required {
  display: block;
  color: #6F6D6D;
  float: right;
}
@media only screen and (max-width : 1024px) {
  .dialog-required {
    display: block;
    float: none;
  }
}
.dialog-required em {
  font-style: normal;
}

.form-field-tooltip {
  float: right;
}
.form-field-tooltip a {
  font-size: 1rem;
}

.error-message {
  font-size: 12px;
  color: #bd0218;
}

.top-error {
  text-align: left;
}
.top-error .error-message {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 16px;
  color: #bd0218;
  display: inline-block;
  margin: 0 0 10px 0;
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .top-error .error-message {
    margin-left: 0;
  }
}
@media only screen and (max-width : 767px) {
  .top-error .error-message {
    display: block;
  }
}

.error-form,
.form-error {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border: 2px solid #bd0218;
  display: block;
  line-height: 1.25rem;
  margin-bottom: 29px;
  margin-top: -1px;
  padding: 20px 30px;
  outline: none;
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .error-form,
  .form-error {
    margin: -1px 0 30px;
    padding: 15px 30px 10px;
  }
}
@media only screen and (max-width : 767px) {
  .error-form,
  .form-error {
    margin: 0 10px 20px;
    text-align: center;
  }
}
.error-form:focus-visible,
.form-error:focus-visible {
  box-shadow: 0 0 3px 0 #bd0218;
}

@media only screen and (max-width : 767px) {
  .error-form-alle {
    margin: 0 0 20px;
    padding: 30px 20px;
  }
}

.successful-form {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  background: #f1f1f1;
  border: 1px solid rgba(111, 109, 109, 0.5);
  color: #505050;
  margin-bottom: 20px;
  padding: 20px 30px;
  text-align: left;
}
@media only screen and (max-width : 767px) {
  .successful-form {
    line-height: 1.3;
    margin-left: -10px;
    margin-right: -10px;
    padding: 20px 16px;
    text-align: center;
  }
}

.select-field-wrapper,
.select-field-wrapper-inline {
  position: relative;
}
.select-field-wrapper .icon,
.select-field-wrapper-inline .icon {
  transform: rotate(90deg);
  background-color: #9A6247;
  border-radius: 20px 20px 0 0;
  border: 2px solid #9A6247;
  color: #ffffff;
  height: 40px;
  line-height: 40px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 40px;
}
.select-field-wrapper select:hover ~ .select-arrow,
.select-field-wrapper-inline select:hover ~ .select-arrow {
  border-color: #ffffff;
}
.select-field-wrapper select:focus-within,
.select-field-wrapper-inline select:focus-within {
  background: #f1f1f1;
}
.select-field-wrapper select:disabled ~ .select-arrow,
.select-field-wrapper-inline select:disabled ~ .select-arrow {
  border-color: #ffffff;
}
.select-field-wrapper select:disabled ~ .icon,
.select-field-wrapper-inline select:disabled ~ .icon {
  background: #6f6f6f;
  border-color: #6f6f6f;
}

.eq-ie10 .select-field-wrapper select {
  background: transparent;
  position: relative;
  z-index: 2;
}
.eq-ie10 .select-field-wrapper .icon.i-form-arrow {
  z-index: 1;
}

.select-field-wrapper-inline {
  width: auto;
}

.input-select,
select {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: #ffffff;
  border-radius: 20px;
  border: 2px solid #6f6f6f;
  box-shadow: none;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 43px 0 7px;
  vertical-align: middle;
  width: 100%;
  transition: 1s box-shadow;
  box-shadow: none;
}
@media only screen and (max-width : 767px) {
  .input-select,
  select {
    font-size: 1rem !important;
    outline: none;
  }
}
.input-select option,
select option {
  background: #ffffff;
  color: #000000;
}
.input-select option:hover, .input-select option:focus,
select option:hover,
select option:focus {
  color: #505050;
  background: #9A6247;
}
.input-select:hover, .input-select:focus,
select:hover,
select:focus {
  border-color: #6f6f6f;
  background: #f1f1f1;
  outline: none;
}
.input-select:focus-visible,
select:focus-visible {
  transition: 0.5s box-shadow;
  box-shadow: 0 0 0 1px black;
}
@media only screen and (max-width : 767px) {
  .input-select:focus, .input-select:focus-visible,
  select:focus,
  select:focus-visible {
    box-shadow: none;
    border-color: blue;
  }
}
.input-select[disabled], .input-select[disabled]:hover,
select[disabled],
select[disabled]:hover {
  background: #ffffff;
  border-color: #6f6f6f;
  color: #6f6f6f;
  cursor: default;
}
.input-select.error, .error-serverside .input-select,
select.error,
.error-serverside select {
  border-color: rgba(189, 2, 24, 0.5);
  color: #bd0218;
}
.input-select + .error,
select + .error {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: #bd0218;
  display: inline-block;
  margin: 10px 0 0 0;
}
.input-select + .error + .icon,
select + .error + .icon {
  border-color: rgba(189, 2, 24, 0.5);
}

.input-textarea {
  height: 100px;
  resize: none;
}

input,
textarea {
  transition: all 200ms ease-in;
  background-color: #ffffff;
  border-radius: 20px;
  border: 2px solid #6f6f6f;
  box-shadow: none;
  box-sizing: border-box;
  color: #505050;
  font-size: 0.875rem;
  height: 40px;
  line-height: normal;
  padding: 0 10px;
  width: 100%;
  box-shadow: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #6F6D6D;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #6F6D6D;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #6F6D6D;
}
@media only screen and (max-width : 767px) {
  input,
  textarea {
    outline: none;
    font-size: 1rem !important;
  }
}
input:hover,
textarea:hover {
  border-color: #6f6f6f;
}
input:focus,
textarea:focus {
  border-color: #6f6f6f;
  outline: none;
}
input:focus-visible,
textarea:focus-visible {
  transition: 0.5s box-shadow;
  box-shadow: 0 0 0 1px black;
}
@media only screen and (max-width : 767px) {
  input:focus, input:focus-visible,
  textarea:focus,
  textarea:focus-visible {
    box-shadow: none;
    border-color: #6f6f6f;
  }
}
input.error, .error-serverside input,
textarea.error,
.error-serverside textarea {
  border-color: #bd0218;
  color: #bd0218;
}
input.error::-webkit-input-placeholder, .error-serverside input::-webkit-input-placeholder,
textarea.error::-webkit-input-placeholder,
.error-serverside textarea::-webkit-input-placeholder {
  color: #bd0218;
}
input.error::-moz-placeholder, .error-serverside input::-moz-placeholder,
textarea.error::-moz-placeholder,
.error-serverside textarea::-moz-placeholder {
  color: #bd0218;
}
input.error:-ms-input-placeholder, .error-serverside input:-ms-input-placeholder,
textarea.error:-ms-input-placeholder,
.error-serverside textarea:-ms-input-placeholder {
  color: #bd0218;
}
input.error + .error, .error-serverside input + .error,
textarea.error + .error,
.error-serverside textarea + .error {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: #bd0218;
  display: inline-block;
  margin: 10px 0 0 20px;
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  input.error + .error, .error-serverside input + .error,
  textarea.error + .error,
  .error-serverside textarea + .error {
    margin-left: 0;
  }
}
@media only screen and (max-width : 767px) {
  input.error + .error, .error-serverside input + .error,
  textarea.error + .error,
  .error-serverside textarea + .error {
    display: block;
  }
}
input[disabled], input[disabled]:hover,
textarea[disabled],
textarea[disabled]:hover {
  background-color: #ffffff;
  border-color: #6f6f6f;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

textarea {
  padding: 10px;
}

.button-on-input {
  position: relative;
}
.button-on-input .input-text {
  padding-right: 40px;
}
.button-on-input .button {
  bottom: 0;
  outline: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}
.touch .button-on-input .button {
  background: none;
  border: 0;
  color: #9A6247;
}

.input-text::-ms-clear, .input-text::-ms-reveal {
  display: none;
}

.input-select::-ms-expand,
select::-ms-expand {
  display: none;
}

.input-number {
  -moz-appearance: textfield;
}

input[type=radio],
input[type=checkbox],
input[type=image],
input[type=hidden] {
  border: none;
  color: inherit;
  height: auto;
  min-width: 0;
  padding: 0;
}

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

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

.f-field-checkbox input[type=checkbox],
.f-field-checkbox input[type=radio],
.f-field-radio input[type=checkbox],
.f-field-radio input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.f-field-checkbox input[type=checkbox][disabled] + label .fake-checkbox, .f-field-checkbox input[type=checkbox].disabled + label .fake-checkbox, .f-field-checkbox input[type=checkbox][disabled] + label .fake-radio, .f-field-checkbox input[type=checkbox][disabled] + .label-wrapper label .fake-checkbox, .f-field-checkbox input[type=checkbox].disabled + .label-wrapper label .fake-checkbox, .f-field-checkbox input[type=checkbox][disabled] + .label-wrapper label .fake-radio,
.f-field-checkbox input[type=radio][disabled] + label .fake-checkbox,
.f-field-checkbox input[type=radio].disabled + label .fake-checkbox,
.f-field-checkbox input[type=radio][disabled] + label .fake-radio,
.f-field-checkbox input[type=radio][disabled] + .label-wrapper label .fake-checkbox,
.f-field-checkbox input[type=radio].disabled + .label-wrapper label .fake-checkbox,
.f-field-checkbox input[type=radio][disabled] + .label-wrapper label .fake-radio,
.f-field-radio input[type=checkbox][disabled] + label .fake-checkbox,
.f-field-radio input[type=checkbox].disabled + label .fake-checkbox,
.f-field-radio input[type=checkbox][disabled] + label .fake-radio,
.f-field-radio input[type=checkbox][disabled] + .label-wrapper label .fake-checkbox,
.f-field-radio input[type=checkbox].disabled + .label-wrapper label .fake-checkbox,
.f-field-radio input[type=checkbox][disabled] + .label-wrapper label .fake-radio,
.f-field-radio input[type=radio][disabled] + label .fake-checkbox,
.f-field-radio input[type=radio].disabled + label .fake-checkbox,
.f-field-radio input[type=radio][disabled] + label .fake-radio,
.f-field-radio input[type=radio][disabled] + .label-wrapper label .fake-checkbox,
.f-field-radio input[type=radio].disabled + .label-wrapper label .fake-checkbox,
.f-field-radio input[type=radio][disabled] + .label-wrapper label .fake-radio {
  background-color: #ffffff;
  border-color: #6F6D6D;
  cursor: auto;
  opacity: 0.6;
}
.f-field-checkbox input[type=radio][disabled] + label .fake-radio:before, .f-field-checkbox input[type=radio][disabled] + .label-wrapper label .fake-radio:before,
.f-field-radio input[type=radio][disabled] + label .fake-radio:before,
.f-field-radio input[type=radio][disabled] + .label-wrapper label .fake-radio:before {
  background: #ffffff;
}
.f-field-checkbox input[type=radio][disabled][checked] + label .fake-radio:before, .f-field-checkbox input[type=radio][disabled][checked] + .label-wrapper label .fake-radio:before,
.f-field-radio input[type=radio][disabled][checked] + label .fake-radio:before,
.f-field-radio input[type=radio][disabled][checked] + .label-wrapper label .fake-radio:before {
  background: #f1f1f1;
}
.f-field-checkbox input[type=checkbox]:disabled + label .fake-checkbox:before, .f-field-checkbox input[type=checkbox].disabled + label .fake-checkbox:before, .f-field-checkbox input[type=checkbox]:disabled + .label-wrapper label .fake-checkbox:before, .f-field-checkbox input[type=checkbox].disabled + .label-wrapper label .fake-checkbox:before,
.f-field-radio input[type=checkbox]:disabled + label .fake-checkbox:before,
.f-field-radio input[type=checkbox].disabled + label .fake-checkbox:before,
.f-field-radio input[type=checkbox]:disabled + .label-wrapper label .fake-checkbox:before,
.f-field-radio input[type=checkbox].disabled + .label-wrapper label .fake-checkbox:before {
  content: "";
}
.f-field-checkbox input[type=checkbox]:disabled:checked + label .fake-checkbox:before, .f-field-checkbox input[type=checkbox].disabled:checked + label .fake-checkbox:before, .f-field-checkbox input[type=checkbox]:disabled:checked + .label-wrapper label .fake-checkbox:before, .f-field-checkbox input[type=checkbox].disabled:checked + .label-wrapper label .fake-checkbox:before,
.f-field-radio input[type=checkbox]:disabled:checked + label .fake-checkbox:before,
.f-field-radio input[type=checkbox].disabled:checked + label .fake-checkbox:before,
.f-field-radio input[type=checkbox]:disabled:checked + .label-wrapper label .fake-checkbox:before,
.f-field-radio input[type=checkbox].disabled:checked + .label-wrapper label .fake-checkbox:before {
  content: "\e927";
  color: #6F6D6D;
}
.f-field-checkbox:hover input[type=radio]:disabled + label .fake-radio:before, .f-field-checkbox:hover input[type=radio]:disabled + .label-wrapper label .fake-radio:before,
.f-field-radio:hover input[type=radio]:disabled + label .fake-radio:before,
.f-field-radio:hover input[type=radio]:disabled + .label-wrapper label .fake-radio:before {
  background: #ffffff;
}
.f-field-checkbox:hover input[type=radio]:disabled:checked + label .fake-radio:before, .f-field-checkbox:hover input[type=radio]:disabled:checked + .label-wrapper label .fake-radio:before,
.f-field-radio:hover input[type=radio]:disabled:checked + label .fake-radio:before,
.f-field-radio:hover input[type=radio]:disabled:checked + .label-wrapper label .fake-radio:before {
  background: #f1f1f1;
}
.f-field-checkbox:hover input[type=checkbox]:disabled + label .fake-checkbox:before, .f-field-checkbox:hover input[type=checkbox].disabled + label .fake-checkbox:before, .f-field-checkbox:hover input[type=checkbox]:disabled + .label-wrapper label .fake-checkbox:before, .f-field-checkbox:hover input[type=checkbox].disabled + .label-wrapper label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox]:disabled + label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox].disabled + label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox]:disabled + .label-wrapper label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox].disabled + .label-wrapper label .fake-checkbox:before {
  content: "";
}
.f-field-checkbox:hover input[type=checkbox]:disabled:checked + label .fake-checkbox:before, .f-field-checkbox:hover input[type=checkbox].disabled:checked + label .fake-checkbox:before, .f-field-checkbox:hover input[type=checkbox]:disabled:checked + .label-wrapper label .fake-checkbox:before, .f-field-checkbox:hover input[type=checkbox].disabled:checked + .label-wrapper label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox]:disabled:checked + label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox].disabled:checked + label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox]:disabled:checked + .label-wrapper label .fake-checkbox:before,
.f-field-radio:hover input[type=checkbox].disabled:checked + .label-wrapper label .fake-checkbox:before {
  content: "\e927";
}
.f-field-checkbox label,
.f-field-radio label {
  display: block;
  cursor: pointer;
}
.f-field-checkbox .form-caption,
.f-field-radio .form-caption {
  line-height: 1.25rem;
  margin-left: 28px;
}
.f-field-checkbox .two-row,
.f-field-radio .two-row {
  display: inline-flex;
}

.no-touch .refinement-link:hover {
  color: #505050;
}

.fake-control-disabled,
.control-disabled {
  cursor: auto;
}

.fake-checkbox,
.fake-radio {
  background: #ffffff;
  border: 2px solid #000000;
  box-sizing: content-box;
  display: inline-block;
  height: 10px;
  margin: 0 10px 0 0;
  position: relative;
  vertical-align: top;
  width: 10px;
  min-width: 10px;
}
.fake-checkbox + span,
.fake-radio + span {
  display: inline-block;
  vertical-align: top;
}

.f-field-checkbox,
.refinement,
.f-field-radio {
  line-height: 0.6;
}

.f-field-checkbox {
  display: inline-block;
}

.fake-radio {
  border-radius: 50%;
}

.no-touch .f-field-checkbox:hover .fake-checkbox,
.refinement li.selected .fake-checkbox,
.no-touch .refinement-link:hover .fake-checkbox,
input[type=checkbox]:checked ~ label .fake-checkbox,
input[type=checkbox]:checked ~ .label-wrapper label .fake-checkbox {
  color: #505050;
  cursor: pointer;
  font-family: "icomoon";
  position: relative;
}
.no-touch .f-field-checkbox:hover .fake-checkbox:before,
.refinement li.selected .fake-checkbox:before,
.no-touch .refinement-link:hover .fake-checkbox:before,
input[type=checkbox]:checked ~ label .fake-checkbox:before,
input[type=checkbox]:checked ~ .label-wrapper label .fake-checkbox:before {
  color: #9A6247;
  content: "\e927";
  font-size: 0.4875rem;
  left: 0;
  line-height: 1;
  position: absolute;
  right: 0;
  text-align: center;
  bottom: 2px;
}

.form-row input[type=checkbox]:focus ~ label .fake-checkbox,
.form-row input[type=checkbox]:focus ~ .label-wrapper label .fake-checkbox {
  outline: 1px solid;
}

_:-ms-lang(x):before,
.f-field-checkbox:hover .fake-checkbox:before,
.refinement li.selected .fake-checkbox:before,
.refinement-link:hover .fake-checkbox:before,
input[type=checkbox]:checked ~ label .fake-checkbox:before,
input[type=checkbox]:checked ~ .label-wrapper label .fake-checkbox:before {
  line-height: 0.8;
}

.no-touch .f-field-radio:hover .fake-radio,
input[type=radio]:checked ~ label .fake-radio,
input[type=radio]:focus ~ label .fake-radio,
input[type=radio]:checked ~ .label-wrapper label .fake-radio,
input[type=radio]:focus ~ .label-wrapper label .fake-radio {
  color: #505050;
  position: relative;
}
.no-touch .f-field-radio:hover .fake-radio:before,
input[type=radio]:checked ~ label .fake-radio:before,
input[type=radio]:focus ~ label .fake-radio:before,
input[type=radio]:checked ~ .label-wrapper label .fake-radio:before,
input[type=radio]:focus ~ .label-wrapper label .fake-radio:before {
  background: #9A6247;
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 10px;
}

input[type=radio]:focus ~ label .fake-radio:before,
input[type=radio]:focus ~ .label-wrapper label .fake-radio:before {
  outline: 1px solid #000000;
}

.refinement li.selected .fake-radio {
  background-color: #9A6247;
}

label:not(.inner-label) {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  display: inline-block;
  line-height: 1;
  padding: 0 0 10px 0;
}
label:not(.inner-label) .fake-checkbox + span,
label:not(.inner-label) .fake-radio ~ span {
  font-size: 1rem;
}

label.inner-label {
  padding: 0 !important;
}

.datepicker-wrapper {
  position: relative;
}
.datepicker-wrapper .datepicker {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  background-color: transparent;
  color: #000000;
  padding-left: 60px;
  position: relative;
  z-index: 3;
}
.datepicker-wrapper .i-calendar {
  font-size: 1.75rem;
  left: 20px;
  margin: -0.875rem 0 0;
  position: absolute;
  top: 50%;
  z-index: 2;
}

.ui-datepicker {
  background: #ffffff;
  border: 2px solid #6f6f6f;
  margin-top: -2px;
}
@media only screen and (max-width : 480px) {
  .ui-datepicker {
    left: calc((100% - 300px) / 2) !important;
    width: 300px;
  }
}
.ui-datepicker.ui-widget-content .ui-state-hover,
.ui-datepicker.ui-widget-content .ui-state-active {
  color: #9A6247;
}
.ui-datepicker.ui-widget-content .ui-datepicker-prev:after {
  content: "◄";
  display: inline-block;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  width: 1.8em;
}
.ui-datepicker.ui-widget-content .ui-datepicker-prev-hover {
  left: 2px;
  top: 2px;
}
.ui-datepicker.ui-widget-content .ui-datepicker-next:after {
  content: "►";
  display: inline-block;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  width: 1.8em;
}
.ui-datepicker.ui-widget-content .ui-datepicker-next-hover {
  right: 2px;
  top: 2px;
}
.ui-datepicker .ui-state-default.ui-state-hover {
  color: #fff;
  background-color: #9A6247;
}

.iframe_test {
  border: none !important;
  width: 1px;
  height: 1px;
}
.iframe_test iframe {
  border: 0;
}

/*styles for BD 3.0 OKTA*/
.account-form-rules {
  margin-bottom: 25px;
}
@media only screen and (max-width : 767px) {
  .account-form-rules {
    margin-bottom: 20px;
  }
}
.account-form-rules__list {
  margin-left: 14px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.account-form-rules__item {
  position: relative;
  padding-left: 14px;
  margin-bottom: 7px;
  width: 50%;
  font-size: 15px;
}
@media only screen and (max-width : 767px) {
  .account-form-rules__item {
    width: 100%;
    font-size: 17px;
  }
}
.account-form-rules__item-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #55aa55;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  color: #55aa55;
  font-size: 14px;
  margin-left: 8px;
  visibility: hidden;
}
.account-form-rules__item:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 50%;
}
.account-form-rules__item.error {
  color: #bd0218;
}
.account-form-rules__item.valid {
  color: #6a6b6a;
}
.account-form-rules__item.valid .account-form-rules__item-icon {
  visibility: visible;
}

.account-form-agree {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 10px;
}
.account-form-agree .fake-checkbox {
  margin-right: 0;
}
.account-form-agree__checkbox {
  left: -1000em;
  position: absolute;
}
.account-form-agree__checkbox-wrapp {
  display: flex;
  flex-shrink: 0;
}
.account-form-agree__checkbox-wrapp > p.error, .account-form-agree__checkbox-wrapp > div.error {
  display: none;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 30px;
}
.account-form-agree__fake-label {
  padding-left: 5px;
  padding-top: 1px;
}
.account-form-agree__label {
  padding-left: 6px;
}
.account-form-agree__label p {
  margin: 0;
}

.password-mask-label {
  position: absolute;
  right: 14px;
  top: 50%;
  font-size: 20px;
  line-height: 20px;
  margin-top: -10px;
  padding: 0;
}

.account-form-row {
  padding-bottom: 30px;
}
.account-form-row__inner {
  position: relative;
}
.account-form-row__inner > p.error, .account-form-row__inner > div.error {
  display: none;
  margin: 0;
  position: absolute;
  top: 120%;
  left: 20px;
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .account-form-row__inner > p.error, .account-form-row__inner > div.error {
    left: 0;
  }
}

.set-new-password__title {
  max-width: 470px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 40px;
}
@media only screen and (max-width : 767px) {
  .set-new-password__title {
    padding: 0 10px;
    text-align: left;
  }
}

.js-bd-username {
  font-size: 0.75rem;
  font-family: "Brandon Grotesque", "Arial", sans-serif;
}

.btn-customize:focus {
  border: 1px dotted black;
}

p.error,
p.error-serverside {
  font-family: "Graphik_Regular", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #bd0218;
  display: table;
  width: 100%;
  font-weight: 400;
  padding-top: 3px;
  line-height: 1rem;
  margin: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

html {
  background: #ffffff;
}

.content-width,
.content-full-width {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width : 1025px) {
  .content-width {
    max-width: calc(1200px - 100px);
    width: calc(100% - 100px);
  }
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .content-width {
    max-width: 1024px;
    width: calc(100% - 60px);
  }
}
@media only screen and (max-width : 767px) {
  .content-width {
    max-width: 767px;
    width: 100%;
  }
}

@media only screen and (min-width : 1025px) {
  .content-full-width {
    max-width: 1800px;
  }
}

.wrapper-two-columns {
  display: flex;
  justify-content: space-between;
  padding: 0 0 60px;
}
@media only screen and (max-width : 767px) {
  .account-delayed-subscriptions .wrapper-two-columns, .pt_product-search-result .wrapper-two-columns, .pt_product-search-noresult .wrapper-two-columns {
    flex-direction: column-reverse;
  }
}
@media only screen and (max-width : 767px) {
  .wrapper-two-columns {
    padding: 0 10px 30px;
  }
}
.wrapper-two-columns.row-reverse {
  flex-direction: row-reverse;
}
@media only screen and (max-width : 767px) {
  .wrapper-two-columns.row-reverse.wrapper-two-columns__column {
    flex-direction: column;
  }
}
.wrapper-two-columns .primary-content {
  position: relative;
}
@media only screen and (min-width : 1025px) {
  .wrapper-two-columns .primary-content {
    width: calc(100% - 270px);
  }
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .wrapper-two-columns .primary-content {
    width: calc(100% - 245px);
  }
}
.wrapper-two-columns .refinement .refinement-collapsed ul {
  display: none;
}
.wrapper-two-columns .refinement .refinement-collapsed .icon {
  transition: all 0.2s ease-out;
  transform: rotate(0deg);
}
.wrapper-two-columns .refinement .refinement-expanded ul {
  display: block;
}
.wrapper-two-columns .refinement .refinement-expanded .icon {
  transition: all 0.2s ease-out;
  transform: rotate(90deg);
}
@media only screen and (max-width : 767px) {
  .wrapper-two-columns .equal-width-column {
    margin-bottom: 40px;
  }
}
.wrapper-two-columns .equal-width-column.col-1 {
  width: 52%;
}
@media only screen and (max-width : 767px) {
  .wrapper-two-columns .equal-width-column.col-1 {
    width: 100%;
  }
}
.wrapper-two-columns .equal-width-column.col-2 {
  width: 46%;
}
@media only screen and (max-width : 767px) {
  .wrapper-two-columns .equal-width-column.col-2 {
    width: 100%;
  }
}

.pt_order-confirmation {
  position: relative;
  width: 750px;
}
.pt_order-confirmation .action-continue-shopping,
.pt_order-confirmation .order-confirmation-register,
.pt_order-confirmation .is-tablet-mobile {
  display: none !important;
}
.pt_order-confirmation .secondary-logo img {
  width: 60%;
}
.pt_order-confirmation .confirmation {
  padding: 30px;
}
.pt_order-confirmation .site-header-holder {
  padding: 30px;
}
.pt_order-confirmation .checkout-contact {
  padding-top: 20px;
  position: absolute;
  right: 30px;
  top: 30px;
}
.pt_order-confirmation .confirmation-message {
  padding-bottom: 30px;
}
.pt_order-confirmation .order-shipment-table {
  display: table;
  margin: 50px 0 0;
  width: 100%;
}
.pt_order-confirmation .order-shipment-table .line-item {
  display: table-row;
  page-break-inside: avoid;
}
.pt_order-confirmation .order-shipment-table .line-item + .line-item .line-item-image,
.pt_order-confirmation .order-shipment-table .line-item + .line-item .line-item-details,
.pt_order-confirmation .order-shipment-table .line-item + .line-item .line-item-quantity,
.pt_order-confirmation .order-shipment-table .line-item + .line-item .line-item-price {
  padding: 30px 0;
}
.pt_order-confirmation .order-shipment-table .line-item + .line-item .line-item-quantity .label,
.pt_order-confirmation .order-shipment-table .line-item + .line-item .line-item-price .label {
  display: none !important;
}
.pt_order-confirmation .order-shipment-table .line-item-image,
.pt_order-confirmation .order-shipment-table .line-item-details,
.pt_order-confirmation .order-shipment-table .line-item-quantity,
.pt_order-confirmation .order-shipment-table .line-item-price {
  border-top: 1px solid rgba(111, 109, 109, 0.5);
  display: table-cell;
  vertical-align: top;
}
.pt_order-confirmation .order-shipment-table .line-item-price {
  text-align: right;
}
.pt_order-confirmation .order-shipment-table .line-item-quantity {
  text-align: center;
}
.pt_order-confirmation .order-payment-summary {
  width: 380px;
  margin-bottom: 30px;
}
.pt_order-confirmation .order-payment-summary.print-hidden {
  display: none !important;
}
.pt_order-confirmation .order-shipment-details,
.pt_order-confirmation .order-billing {
  padding-right: 40px;
  width: 240px;
}
.pt_order-confirmation .order-payment-instruments {
  width: 200px;
}
.pt_order-confirmation .confirmation-print-footer {
  background-color: rgba(111, 109, 109, 0.5) !important;
  -webkit-print-color-adjust: exact;
  margin: 30px 0;
  padding: 30px;
  font-size: 16px;
}
.pt_order-confirmation .confirmation-print-footer p {
  margin: 0;
  color: #505050;
}
.pt_order-confirmation .confirmation-print-footer .footer-print-info {
  display: inline-block;
  vertical-align: bottom;
  width: 50%;
}
.pt_order-confirmation .confirmation-print-footer .footer-print-info p {
  font-family: "Graphik_Medium", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
}
.pt_order-confirmation .confirmation-print-footer .content-asset {
  display: block;
  text-align: center;
  width: 100%;
  min-width: 100%;
}

#DW-SFToolkit,
#__DW__SFToolkit {
  display: none !important;
}

.print-visibility {
  display: block !important;
}

.header-notification-panel,
.header-back,
.header-banner,
.menu-toggle,
.header-search,
#navigation,
.menu-utility-user,
.mini-cart-total,
.footer {
  display: none !important;
}

img {
  page-break-inside: avoid;
}