/*! date: Thursday, March 15, 2018 9:43 PM name: @page/header-footer-wgl version: 2.107.2 */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].default #autosuggest {
  display: none;
  z-index: 10;
  top: 35px;
  background-color: #FFF;
  box-shadow: 0 10px 22px #757575, 0px 10px 10px -10px #cccccc inset;
  list-style: none;
  height: auto;
  margin-top: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  line-height: 15px;
  font-size: 16px;
  font-family: Arial;
  border-left: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #b8b8b8;
  z-index: 22;
  margin: auto; }
  header[data-uri].default #autosuggest > li {
    cursor: pointer;
    height: 30px;
    list-style: none; }
    header[data-uri].default #autosuggest > li > a {
      display: inline-block;
      margin-left: 10px;
      margin-top: 7px;
      color: #666;
      text-decoration: none;
      font-size: 16px; }
      header[data-uri].default #autosuggest > li > a.suggestion {
        padding: 8px 8px; }
    header[data-uri].default #autosuggest > li.selected {
      background-color: #EEE;
      font-weight: inherit; }
    header[data-uri].default #autosuggest > li:last {
      margin-bottom: 10px; }
    header[data-uri].default #autosuggest > li:first-child {
      margin-top: 10px; }
  header[data-uri].default #autosuggest:first-child {
    margin-top: 5px; }
  header[data-uri].default #autosuggest .ui-keyword-highlight {
    color: #000;
    font-weight: bold; }

header[data-uri].clean #autosuggest, header[data-uri].radical #autosuggest {
  display: none;
  z-index: 10;
  top: 35px;
  background-color: #FFF;
  list-style: none;
  height: auto;
  margin-top: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  line-height: 15px;
  font-size: 14px;
  font-family: Helvetica;
  border-left: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #b8b8b8;
  z-index: 22;
  margin: auto; }
  header[data-uri].clean #autosuggest > li, header[data-uri].radical #autosuggest > li {
    cursor: pointer;
    height: 30px;
    list-style: none; }
    header[data-uri].clean #autosuggest > li > a, header[data-uri].radical #autosuggest > li > a {
      display: inline-block;
      margin-left: 10px;
      margin-top: 7px;
      color: #666;
      text-decoration: none;
      font-size: 14px; }
      header[data-uri].clean #autosuggest > li > a > div.suggestion, header[data-uri].radical #autosuggest > li > a > div.suggestion {
        text-transform: none; }
      header[data-uri].clean #autosuggest > li > a.suggestion, header[data-uri].radical #autosuggest > li > a.suggestion {
        padding: 8px 8px; }
    header[data-uri].clean #autosuggest > li.selected, header[data-uri].radical #autosuggest > li.selected {
      background-color: #EEE;
      font-weight: inherit; }
    header[data-uri].clean #autosuggest > li:last, header[data-uri].radical #autosuggest > li:last {
      margin-bottom: 10px; }
    header[data-uri].clean #autosuggest > li:first-child, header[data-uri].radical #autosuggest > li:first-child {
      margin-top: 10px; }
  header[data-uri].clean #autosuggest:first-child, header[data-uri].radical #autosuggest:first-child {
    margin-top: 5px; }
  header[data-uri].clean #autosuggest .ui-keyword-highlight, header[data-uri].radical #autosuggest .ui-keyword-highlight {
    color: #000;
    font-weight: bold; }

header[data-uri].compact #autosuggest {
  display: none;
  z-index: 10;
  background-color: #FFF;
  box-shadow: 0 10px 22px #757575, 0px 10px 10px -10px #cccccc inset;
  list-style: none;
  height: auto;
  margin-top: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  line-height: 15px;
  font-size: 16px;
  font-family: Arial;
  border-left: 1px solid #b8b8b8;
  border-right: 1px solid #b8b8b8;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #b8b8b8;
  z-index: 22;
  margin: auto; }
  header[data-uri].compact #autosuggest > li {
    list-style: none;
    padding-left: 15px;
    line-height: 2rem;
    font-size: 1rem; }
    header[data-uri].compact #autosuggest > li > a {
      display: inline-block;
      margin-left: 10px;
      margin-top: 7px;
      color: #666;
      text-decoration: none; }
      header[data-uri].compact #autosuggest > li > a > div.suggestion {
        text-transform: none; }
      header[data-uri].compact #autosuggest > li > a.suggestion {
        padding: 8px 8px; }
    header[data-uri].compact #autosuggest > li.selected {
      background-image: none;
      background-color: transparent; }
  header[data-uri].compact #autosuggest .ui-keyword-highlight {
    color: #000;
    font-weight: bold; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
#product-recommendations {
  padding-left: 8px;
  float: left;
  margin-top: 10px; }
  #product-recommendations h2 {
    margin-top: 0.2em;
    margin-bottom: 0.5em; }
  #product-recommendations .autocomplete-product-recommendation-title {
    padding-top: 20px;
    margin-top: 0;
    text-align: left;
    font-weight: lighter;
    font-size: 16px;
    font-family: Helvetica,Arial,sans-serif;
    color: #000;
    text-transform: none; }
  #product-recommendations .autocomplete-product-recommendation {
    width: 25%;
    float: left;
    padding-right: 12px; }
    #product-recommendations .autocomplete-product-recommendation .promotion-badge {
      color: #cc0000;
      font-size: 12px;
      text-align: center;
      line-height: 13px;
      margin-bottom: 5px; }
    #product-recommendations .autocomplete-product-recommendation .product-recommended-img-outter {
      padding-bottom: 18px; }
  #product-recommendations .autocomplete-product-recommendation img {
    width: 100%; }
  #product-recommendations .product-recommended-price {
    font-weight: lighter;
    font-size: 14px;
    font-family: Helvetica,Arial,sans-serif;
    color: #000;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px; }
    #product-recommendations .product-recommended-price div:last-child {
      line-height: 13px; }
    #product-recommendations .product-recommended-price .discount {
      color: #cc0000;
      font-weight: bold; }
    #product-recommendations .product-recommended-price .yourChoice {
      color: #cc0000;
      font-weight: bold; }
    #product-recommendations .product-recommended-price .selOnSale {
      color: #cc0000;
      font-weight: bold; }
    #product-recommendations .product-recommended-price .edv {
      color: #cc0000;
      font-weight: bold; }
  #product-recommendations .rating-count {
    text-align: initial;
    padding: 0; }
  #product-recommendations .rating {
    margin: 0 auto;
    padding-bottom: 32px;
    display: block;
    font-size: 14px;
    height: 22px;
    position: relative;
    vertical-align: top;
    width: 70px;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif,DFKai-SB,MingLiU,MingLiU-HKSCS,PMingLiU; }
  #product-recommendations .grey-stars {
    position: absolute;
    overflow: hidden;
    color: #ccc; }
  #product-recommendations .red-stars {
    position: absolute;
    overflow: hidden;
    color: #c00; }

#product-recommendations-hr {
  border: 0;
  border-top: 1px solid #bababa;
  border-bottom: 1px solid #fff;
  margin-left: -8px;
  margin-top: 0;
  margin-bottom: 0; }
header[data-uri].default ul.suggestlist .lastSearches {
  text-align: left; }
  header[data-uri].default ul.suggestlist .lastSearches .recentSearchTitle {
    cursor: default; }
  header[data-uri].default ul.suggestlist .lastSearches span {
    padding-left: 8px;
    line-height: 1.6; }
  header[data-uri].default ul.suggestlist .lastSearches .last-search-content {
    padding-left: 8px; }
  header[data-uri].default ul.suggestlist .lastSearches .icon-gen-search-gr-medium {
    display: inline-block;
    float: left;
    margin-top: 7.5px;
    margin-right: 2px;
    background-size: 428px 428px;
    background-repeat: no-repeat;
    background-image: url("/images/icons/mcom-sprite.svg");
    width: 20px;
    height: 20px;
    background-position: -90px -248px; }
  header[data-uri].default ul.suggestlist .lastSearches .ui-state-focus {
    float: none;
    background: none; }
  header[data-uri].default ul.suggestlist .lastSearches > li {
    height: auto;
    list-style: none; }
    header[data-uri].default ul.suggestlist .lastSearches > li a {
      display: inline-block;
      width: 380px;
      color: #666;
      text-decoration: none; }
      header[data-uri].default ul.suggestlist .lastSearches > li a.suggestion {
        padding: 8px 8px;
        word-wrap: break-word; }
      header[data-uri].default ul.suggestlist .lastSearches > li a:hover {
        font-weight: normal;
        font-size: inherit; }
    header[data-uri].default ul.suggestlist .lastSearches > li.selected {
      background-color: #EEE; }
    header[data-uri].default ul.suggestlist .lastSearches > li:last-child {
      margin-bottom: 10px; }
  header[data-uri].default ul.suggestlist .lastSearches li.lastSearches a.suggestion {
    cursor: default; }

header[data-uri].clean ul.suggestlist .lastSearches, header[data-uri].radical ul.suggestlist .lastSearches {
  text-align: left; }
  header[data-uri].clean ul.suggestlist .lastSearches .recentSearchTitle, header[data-uri].radical ul.suggestlist .lastSearches .recentSearchTitle {
    cursor: default; }
  header[data-uri].clean ul.suggestlist .lastSearches span, header[data-uri].radical ul.suggestlist .lastSearches span {
    padding-left: 8px;
    line-height: 1.6; }
  header[data-uri].clean ul.suggestlist .lastSearches .last-search-content, header[data-uri].radical ul.suggestlist .lastSearches .last-search-content {
    padding-left: 8px; }
  header[data-uri].clean ul.suggestlist .lastSearches .icon-gen-search-gr-medium, header[data-uri].radical ul.suggestlist .lastSearches .icon-gen-search-gr-medium {
    display: inline-block;
    float: left;
    margin-top: 7.5px;
    margin-right: 2px;
    background-size: 428px 428px;
    background-repeat: no-repeat;
    background-image: url("/images/icons/mcom-sprite.svg");
    width: 20px;
    height: 20px;
    background-position: -90px -248px; }
  header[data-uri].clean ul.suggestlist .lastSearches .ui-state-focus, header[data-uri].radical ul.suggestlist .lastSearches .ui-state-focus {
    float: none;
    background: none; }
  header[data-uri].clean ul.suggestlist .lastSearches > li, header[data-uri].radical ul.suggestlist .lastSearches > li {
    height: auto;
    list-style: none; }
    header[data-uri].clean ul.suggestlist .lastSearches > li a, header[data-uri].radical ul.suggestlist .lastSearches > li a {
      display: inline-block;
      width: 380px;
      color: #666;
      text-decoration: none; }
      header[data-uri].clean ul.suggestlist .lastSearches > li a.suggestion, header[data-uri].radical ul.suggestlist .lastSearches > li a.suggestion {
        padding: 8px 8px;
        word-wrap: break-word; }
      header[data-uri].clean ul.suggestlist .lastSearches > li a:hover, header[data-uri].radical ul.suggestlist .lastSearches > li a:hover {
        font-weight: normal;
        font-size: inherit; }
    header[data-uri].clean ul.suggestlist .lastSearches > li.selected, header[data-uri].radical ul.suggestlist .lastSearches > li.selected {
      background-color: #EEE; }
    header[data-uri].clean ul.suggestlist .lastSearches > li:last-child, header[data-uri].radical ul.suggestlist .lastSearches > li:last-child {
      margin-bottom: 10px; }
  header[data-uri].clean ul.suggestlist .lastSearches li.lastSearches a.suggestion, header[data-uri].radical ul.suggestlist .lastSearches li.lastSearches a.suggestion {
    cursor: default; }

header[data-uri].compact ul.suggestlist .lastSearches {
  text-align: left; }
  header[data-uri].compact ul.suggestlist .lastSearches .title {
    color: #666;
    line-height: 2rem;
    background-color: #f7f7f7; }
  header[data-uri].compact ul.suggestlist .lastSearches .recentSearchTitle {
    text-transform: lowercase;
    color: #838383;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 100;
    line-height: 22px;
    padding-left: 5px; }
  header[data-uri].compact ul.suggestlist .lastSearches span {
    padding-left: 8px;
    line-height: 1.6; }
  header[data-uri].compact ul.suggestlist .lastSearches .icon-gen-search-gr-medium {
    display: inline-block;
    float: left;
    margin-top: 7.5px;
    margin-right: 2px;
    background-size: 428px 428px;
    background-repeat: no-repeat;
    background-image: url("/images/icons/mcom-sprite.svg");
    width: 20px;
    height: 20px;
    background-position: -90px -248px; }
  header[data-uri].compact ul.suggestlist .lastSearches .ui-state-focus {
    float: none;
    background: none; }
  header[data-uri].compact ul.suggestlist .lastSearches li {
    height: auto;
    list-style: none;
    line-height: 30px;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 18px;
    font-weight: normal; }
    header[data-uri].compact ul.suggestlist .lastSearches li a {
      display: block;
      color: #000;
      text-decoration: none; }
      header[data-uri].compact ul.suggestlist .lastSearches li a.suggestion {
        padding: 8px 8px;
        word-wrap: break-word; }
      header[data-uri].compact ul.suggestlist .lastSearches li a .last-search-text {
        padding-left: 8px;
        display: inline-block; }
    header[data-uri].compact ul.suggestlist .lastSearches li.selected {
      background-image: none;
      background-color: transparent; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].default #search {
  display: inline-block;
  width: 420px;
  margin-top: 7px;
  padding-left: 1%;
  padding-right: 10px; }
  header[data-uri].default #search #clearable_globalSearchInputField {
    width: 400px;
    overflow: visible; }
  header[data-uri].default #search form {
    position: relative; }
  header[data-uri].default #search button {
    border: 0;
    box-shadow: none;
    height: 35px;
    z-index: 1;
    width: 35px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 400px;
    background: url("/navapp/web20/assets/img/nav/header-search-button.gif") no-repeat transparent;
    background-position: center;
    background-color: #C00; }
  header[data-uri].default #search input {
    height: 35px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
    margin: 0 !important;
    border-radius: 0;
    float: left;
    border: 1px #C2C2C2 solid;
    border-right-width: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #8C8C8C;
    line-height: 35px;
    width: 400px; }
    header[data-uri].default #search input::-ms-clear {
      width: 0;
      height: 0; }
  header[data-uri].default #search .clearlink {
    position: absolute;
    right: 0.3rem;
    top: 0.6rem; }

header[data-uri].clean #search, header[data-uri].radical #search {
  display: inline-block;
  width: 495px;
  margin-top: 0;
  padding: 0; }
  header[data-uri].clean #search #clearable_globalSearchInputField, header[data-uri].radical #search #clearable_globalSearchInputField {
    width: 495px;
    overflow: visible; }
  header[data-uri].clean #search form, header[data-uri].radical #search form {
    position: relative; }
  header[data-uri].clean #search button, header[data-uri].radical #search button {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 35px;
    z-index: 1;
    width: 35px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 495px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTM3LjA2OCwzNC4zMThsLTkuNzAzLTkuNzAzYzEuNzQtMi4zMTIsMi43NzMtNS4xODYsMi43NzMtOC4yOTZjMC03LjYyLTYuMTk5LTEzLjgxOS0xMy44Mi0xMy44MTkNCglDOC42OTksMi41LDIuNSw4LjY5OSwyLjUsMTYuMzE5YzAsNy42MjEsNi4xOTksMTMuODIsMTMuODE5LDEzLjgyYzMuMTEsMCw1Ljk4My0xLjAzMyw4LjI5Ni0yLjc3M2w5LjcwMyw5LjcwMw0KCWMwLjM4MSwwLjM4MSwwLjg3OSwwLjU3LDEuMzc1LDAuNTdjMC40OTgsMCwwLjk5Ni0wLjE4OSwxLjM3NS0wLjU3QzM3LjgyOSwzNi4zMTEsMzcuODI5LDM1LjA3OSwzNy4wNjgsMzQuMzE4eiBNNi4yMjEsMTYuMzE5DQoJYzAtNS41NjgsNC41My0xMC4wOTksMTAuMDk5LTEwLjA5OXMxMC4wOTksNC41MywxMC4wOTksMTAuMDk5YzAsNS41Ny00LjUzLDEwLjA5OS0xMC4wOTksMTAuMDk5UzYuMjIxLDIxLjg4OSw2LjIyMSwxNi4zMTl6Ii8+DQo8L3N2Zz4NCg==");
    background-size: 25px;
    background-position: center;
    background-color: #666666 !important; }
  header[data-uri].clean #search input, header[data-uri].radical #search input {
    height: 35px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
    margin: 0 !important;
    border-radius: 0;
    border: 1px #C2C2C2 solid;
    border-right-width: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #8C8C8C;
    line-height: 35px;
    width: 495px; }
    header[data-uri].clean #search input::-ms-clear, header[data-uri].radical #search input::-ms-clear {
      width: 0;
      height: 0; }
  header[data-uri].clean #search .clearlink, header[data-uri].radical #search .clearlink {
    position: absolute;
    right: 0.3rem;
    top: 0.6rem;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gZmlsbD0iIzY2NjY2NiIgcG9pbnRzPSIzMy43NDksOSAzMC45OTksNi4yNSAyMCwxNy4yNSA5LDYuMjUgNi4yNSw5IDE3LjI1LDIwIDYuMjUsMzAuOTk5IDksMzMuNzQ5IDIwLDIyLjc1IA0KCTMwLjk5OSwzMy43NDkgMzMuNzQ5LDMwLjk5OSAyMi43NSwyMCAiLz4NCjwvc3ZnPg0K");
    height: 15px;
    width: 15px;
    background-size: 15px;
    background-position: center; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes fadeInOverlay {
  from {
    opacity: 0; }
  to {
    opacity: 0.75; } }

@keyframes fadeInOverlay {
  from {
    opacity: 0; }
  to {
    opacity: 0.75; } }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes cleanSlide {
  from {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
  to {
    min-height: inherit;
    max-height: 1000px; } }

@keyframes cleanSlide {
  from {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
  to {
    min-height: inherit;
    max-height: 1000px; } }

@-webkit-keyframes cleanSlideToTop {
  from {
    min-height: inherit;
    max-height: 1000px; }
  to {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; } }

@keyframes cleanSlideToTop {
  from {
    min-height: inherit;
    max-height: 1000px; }
  to {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; } }

@-webkit-keyframes cleanStretch {
  from {
    margin-left: 50%;
    width: 0; }
  to {
    margin-left: 0;
    width: 100%; } }

@keyframes cleanStretch {
  from {
    margin-left: 50%;
    width: 0; }
  to {
    margin-left: 0;
    width: 100%; } }

@-webkit-keyframes radicalStretch {
  from {
    right: 130%; }
  to {
    right: -6px; } }

@keyframes radicalStretch {
  from {
    right: 130%; }
  to {
    right: -6px; } }

@-webkit-keyframes cleanShorten {
  from {
    margin-left: 0;
    width: 100%; }
  to {
    margin-left: 50%;
    width: 0; } }

@keyframes cleanShorten {
  from {
    margin-left: 0;
    width: 100%; }
  to {
    margin-left: 50%;
    width: 0; } }

@-webkit-keyframes radicalShorten {
  from {
    right: -6px; }
  to {
    right: 130%; } }

@keyframes radicalShorten {
  from {
    right: -6px; }
  to {
    right: 130%; } }

@-webkit-keyframes cleanRotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(-180deg); } }

@keyframes cleanRotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(-180deg); } }

@-webkit-keyframes cleanRotateBack {
  from {
    transform: rotate(-180deg); }
  to {
    transform: rotate(0); } }

@keyframes cleanRotateBack {
  from {
    transform: rotate(-180deg); }
  to {
    transform: rotate(0); } }

@-webkit-keyframes radicalMenuSlideFromLeft {
  from {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; }
  to {
    margin-right: 0; } }

@keyframes radicalMenuSlideFromLeft {
  from {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; }
  to {
    margin-right: 0; } }

@-webkit-keyframes radicalMenuSlideToLeft {
  from {
    margin-right: 0; }
  to {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; } }

@keyframes radicalMenuSlideToLeft {
  from {
    margin-right: 0; }
  to {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; } }

.redesign-header-overlay {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-delay: 0;
  animation-delay: 0;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInOverlay;
  animation-name: fadeInOverlay;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease; }
/* NOTE: additional keyframe points for
increased smoothness */
header[data-uri] #bagCount, header[data-uri] a#m-bag-count-anchor {
  text-decoration: none; }

.mcom-bag-icon-wrapper {
  height: inherit; }

#m-bag-count-anchor {
  height: 100%; }

#star {
  -webkit-transform: scale(1); }

.svgAni {
  /* NOTE: Tis is the nudge effect on the entire svg */
  animation-name: nudge;
  animation-duration: 150ms;
  animation-fill-mode: both;
  animation-delay: 600ms; }

.starAni {
  /* NOTE: Class for the star expansion */
  animation-name: enlarge;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms; }

.ieAni {
  /* NOTE: This is the fallback for edge-ie10 this expands
  a square behind the star expansion */
  animation-name: fallback;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
  animation-delay: 550ms; }

.bagCountAni {
  /* NOTE: This is for the bag count animation */
  /* NOTE: declaring the font resize on the event in the instance
  that the animation fails also adding a stroke in the event that everything fails*/
  /*font-size: 2.2em;*/
  visibility: visible;
  animation-name: bump;
  animation-duration: 200ms;
  animation-fill-mode: both;
  animation-delay: 750ms; }

@keyframes enlarge {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0); }
  25% {
    -webkit-transform: scale(3.025);
    -ms-transform: scale(3.025);
    -moz-transform: scale(3.025);
    transform: scale(3.025); }
  50% {
    -webkit-transform: scale(6.5);
    -ms-transform: scale(6.5);
    -moz-transform: scale(6.5);
    transform: scale(6.5); }
  75% {
    -webkit-transform: scale(9.525);
    -ms-transform: scale(9.525);
    -moz-transform: scale(9.525);
    transform: scale(9.525); }
  100% {
    -webkit-transform: scale(12.1);
    -ms-transform: scale(12.1);
    -moz-transform: scale(12.1);
    transform: scale(12.1); } }

/* FIXME: I feel like this can be consildated */
@keyframes nudge {
  0% {
    height: 100%; }
  25% {
    height: 105%; }
  50% {
    height: 110%; }
  75% {
    height: 105%; }
  100% {
    height: 100%; } }

/* NOTE: extra bump to make the animation bouncier  this is a fix for safri ie  and improves performance*/
@keyframes fallback {
  0% {
    height: 0px;
    width: 0px; }
  25% {
    height: 10.375px;
    width: 10.375px; }
  50% {
    height: 20.75px;
    width: 20.75px; }
  75% {
    height: 31.125px;
    width: 31.125px; }
  100% {
    height: 41.5px;
    width: 41.5px; } }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
body.noQuickBag #quickBagHeader.quickBagFlyoutHeader:hover, body.noQuickBag #quickBagHeader.quickBagFlyoutHeader.hover, body.noQuickBag #quickBagHeader {
  border: 1px solid #fff !important; }

header[data-uri].default {
  /*********************************************************************************
     *   The following media query is to undo responsiveness as part of story B-79025.
     *   This is a short-term fix until macys-base is updated to remove the query.
     *********************************************************************************/ }
  header[data-uri].default div#bagContainer {
    display: inline-block;
    width: 240px; }
    header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader {
      float: right;
      height: 43px;
      position: relative;
      right: -8px;
      top: 6px;
      width: 159px;
      border: 1px solid #fff;
      transition: border-color 1.5s ease-out; }
      header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader:after {
        background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -160px -2px;
        content: " ";
        display: block;
        height: 67px;
        position: absolute;
        right: 2px;
        top: -22px;
        width: 45px;
        z-index: 21; }
      header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader a#checkoutLink {
        text-decoration: none;
        z-index: 21;
        outline: none;
        position: absolute;
        height: 100%;
        width: 100%;
        display: block;
        font-size: 14px;
        line-height: 20px;
        padding-left: 28px;
        padding-top: 12px;
        text-transform: capitalize; }
        header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader a#checkoutLink:after {
          background: #FFF;
          bottom: -1px;
          content: "";
          display: block;
          height: 1px;
          left: 0;
          position: absolute;
          width: 100%; }
      header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader:hover, header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader.hover {
        border: 1px solid #ccc;
        border-bottom-color: #fff; }
        header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader:hover .quickBagFlyout, header[data-uri].default div#bagContainer div#quickBagHeader.quickBagFlyoutHeader.hover .quickBagFlyout {
          border: 1px solid #ccc;
          max-height: 452px; }
  @media only screen and (max-width: 1024px) {
    header[data-uri].default div#quickBagHeader {
      right: -8px !important;
      width: 159px !important; }
    header[data-uri].default div #quickBagHeader:after {
      background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -160px -2px;
      background-size: unset;
      width: 45px;
      height: 67px;
      margin-top: 0;
      right: 2px; }
    header[data-uri].default div#quickBagHeader span#itemInfo {
      display: inline !important; }
    header[data-uri].default span#itemCount {
      border-radius: inherit;
      position: unset;
      bottom: 0;
      left: 0;
      min-height: unset;
      min-width: unset;
      width: unset;
      height: unset;
      font-size: unset;
      text-align: unset;
      display: inline;
      background-color: #fff;
      color: #333 !important;
      z-index: inherit; } }

header[data-uri].clean #bagContainer, header[data-uri].radical #bagContainer {
  width: 36px; }
  header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader {
    width: 36px !important;
    height: 49px;
    position: relative;
    top: -12px;
    right: 0 !important;
    border: 1px solid #fff;
    transition: border-color 1.5s ease-out;
    z-index: inherit; }
    header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader #qbFlyout.quickBagFlyout, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader #qbFlyout.quickBagFlyout {
      top: 48px; }
    header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader:after, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader:after {
      display: none; }
    header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader #checkoutLink, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader #checkoutLink {
      text-decoration: none;
      outline: none;
      height: 100%;
      width: 100%;
      padding: 0; }
      header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader #checkoutLink:after, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader #checkoutLink:after {
        display: block;
        height: 0;
        width: 0; }
    header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader:hover .quickBagFlyout, header[data-uri].clean #bagContainer #quickBagHeader.quickBagFlyoutHeader.hover .quickBagFlyout, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader:hover .quickBagFlyout, header[data-uri].radical #bagContainer #quickBagHeader.quickBagFlyoutHeader.hover .quickBagFlyout {
      border: 1px solid #ccc;
      max-height: 452px; }
  header[data-uri].clean #bagContainer #checkoutLink, header[data-uri].radical #bagContainer #checkoutLink {
    text-decoration: none;
    outline: none; }
  header[data-uri].clean #bagContainer svg, header[data-uri].radical #bagContainer svg {
    width: 36px;
    height: 47px; }

header[data-uri].compact-redesign #mb-j-header-container #bagContainer {
  position: relative;
  padding-top: 10px;
  float: right;
  width: 32px;
  height: 40px; }
  header[data-uri].compact-redesign #mb-j-header-container #bagContainer #m-bag-count-anchor {
    display: block;
    height: 100%;
    width: auto; }
    header[data-uri].compact-redesign #mb-j-header-container #bagContainer #m-bag-count-anchor svg {
      width: 32px;
      height: 40px; }
  header[data-uri].compact-redesign #mb-j-header-container #bagContainer #compactBagHeader {
    height: 40px;
    position: relative; }
    header[data-uri].compact-redesign #mb-j-header-container #bagContainer #compactBagHeader:after {
      display: none; }
    header[data-uri].compact-redesign #mb-j-header-container #bagContainer #compactBagHeader #checkoutLink {
      text-decoration: none;
      outline: none;
      height: 100%;
      width: 100%;
      padding: 0; }
      header[data-uri].compact-redesign #mb-j-header-container #bagContainer #compactBagHeader #checkoutLink:after {
        display: block;
        height: 0;
        width: 0; }
  header[data-uri].compact-redesign #mb-j-header-container #bagContainer #checkoutLink {
    text-decoration: none;
    outline: none; }

header[data-uri].minimalist #bagContainer {
  width: 36px; }
  header[data-uri].minimalist #bagContainer #minimalBagWrapper {
    width: 36px;
    height: 49px;
    position: relative; }
    header[data-uri].minimalist #bagContainer #minimalBagWrapper:after {
      display: none; }
    header[data-uri].minimalist #bagContainer #minimalBagWrapper #checkoutLink {
      text-decoration: none;
      outline: none;
      height: 100%;
      width: 100%;
      padding: 0; }
      header[data-uri].minimalist #bagContainer #minimalBagWrapper #checkoutLink:after {
        display: block;
        height: 0;
        width: 0; }
  header[data-uri].minimalist #bagContainer #checkoutLink {
    text-decoration: none;
    outline: none; }
  header[data-uri].minimalist #bagContainer svg {
    width: 36px;
    height: 47px; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
body.nav-visible {
  overflow: hidden;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0); }
  body.nav-visible .compact #mb-page-wrapper {
    overflow: hidden; }
    body.nav-visible .compact #mb-page-wrapper #mb-j-region-main #m-region-main-inner {
      -webkit-transform: translate(200px, 0);
      -moz-transform: translate(200px, 0);
      -ms-transform: translate(200px, 0);
      -o-transform: translate(200px, 0);
      transform: translate(200px, 0); }
    body.nav-visible .compact #mb-page-wrapper #mb-j-region-main #mb-page-content-container #m-content-wrapper #mb-content-overlay {
      width: 100%; }

body #mb-page-wrapper {
  min-width: 320px;
  width: 100%; }
  body #mb-page-wrapper #mb-region-header {
    z-index: 15; }
  body #mb-page-wrapper .m-sticky-nav-header {
    position: fixed;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  body #mb-page-wrapper .m-search-fixed {
    top: 0;
    position: fixed;
    width: 66.66%;
    left: 17%;
    background: #fff;
    box-shadow: 0px 0px;
    padding: 0; }
  body #mb-page-wrapper #mb-j-region-main {
    position: relative;
    width: 100%; }
    body #mb-page-wrapper #mb-j-region-main #m-region-main-inner {
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      -webkit-transition-delay: 0s;
      -moz-transition: -webkit-transform 0.3s ease-in-out;
      -o-transition: -webkit-transform 0.3s ease-in-out;
      transition: -webkit-transform 0.3s ease-in-out false;
      transform: translate3d(0, 0, 0);
      position: relative;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0); }
      body #mb-page-wrapper #mb-j-region-main #m-region-main-inner.allow-sticky {
        transform: none; }
    body #mb-page-wrapper #mb-j-region-main #mb-j-nav-container {
      display: block;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: -200px;
      width: 200px; }
    body #mb-page-wrapper #mb-j-region-main #mb-page-content-container {
      box-shadow: -4px 0 4px -4px #000;
      position: relative;
      z-index: 10; }
      body #mb-page-wrapper #mb-j-region-main #mb-page-content-container #m-content-wrapper {
        position: relative; }
        body #mb-page-wrapper #mb-j-region-main #mb-page-content-container #m-content-wrapper #mb-content-overlay {
          background: #ddd;
          cursor: pointer;
          opacity: 0;
          position: absolute;
          height: 0px;
          width: 0px;
          z-index: 1;
          box-shadow: 0px 0px 4px; }
      body #mb-page-wrapper #mb-j-region-main #mb-page-content-container #mb-content-wrapper {
        position: relative; }
        body #mb-page-wrapper #mb-j-region-main #mb-page-content-container #mb-content-wrapper #mb-j-content-container .login-form.bf-bootstrap.tracking-font {
          width: 280px;
          margin: 0 auto;
          padding-left: 0; }

@media only screen and (max-width: 320px) {
  body #mb-page-wrapper .m-search-fixed {
    width: 62.66%; }
  #mb-j-search-container.m-search-fixed #m-search-input-wrapper input#mb-j-search-field {
    padding: 0 45px 0 10px; } }

header[data-uri].compact #mb-j-nav-container {
  z-index: 1;
  height: 548px;
  min-height: 0;
  width: 200px;
  background-color: black;
  position: absolute;
  left: -200px;
  transition: left .3s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

header[data-uri].compact #mb-j-nav-menu li {
  box-shadow: inset -4px 0 4px -4px #000; }

#mb-j-nav-container[aria-hidden="false"] {
  box-shadow: inset -4px 0 4px -4px #000; }

#page-content {
  transition: .3s; }

.mb-nav-container-inner {
  height: 100%;
  overflow-y: auto; }

#mb-j-nav-menu.is-hidden {
  display: none; }

#mb-j-nav-menu {
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
  list-style: none;
  padding-left: 0px;
  margin-top: 0px; }
  #mb-j-nav-menu #nav-sign-in {
    width: 200px;
    color: white;
    font-weight: bold;
    top: 0px; }
    #mb-j-nav-menu #nav-sign-in span {
      display: block;
      padding-left: 8px;
      line-height: 44px;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
  #mb-j-nav-menu li {
    width: inherit;
    font-weight: bold;
    top: 0px;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: height 0.5s, background-color 0.2s;
    -moz-transition: height 0.5s, background-color 0.2s;
    -o-transition: height 0.5s, background-color 0.2s;
    transition: height 0.5s, background-color 0.2s;
    background: #f5f5f5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
    #mb-j-nav-menu li a {
      display: block;
      padding-left: 8px;
      line-height: 44px;
      color: black;
      font-size: 14px;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
      #mb-j-nav-menu li a span {
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBvbHlnb24gcG9pbnRzPSIyOS41MzcsMjAgMTMuMzIsMzcuNTY4IDEwLjQ2MywzNC45MzIgMjQuMjQ1LDIwIDEwLjQ2Myw1LjA2OSAxMy4zMiwyLjQzMSAJIi8+DQo8L2c+DQo8L3N2Zz4NCg==");
        height: 20px;
        width: 20px;
        background-size: 20px 20px;
        float: right;
        margin-right: 8px;
        margin-top: 15px; }
    #mb-j-nav-menu li.child {
      height: 0px;
      visibility: hidden; }
      #mb-j-nav-menu li.child a {
        font-size: 14px;
        padding-left: 18px; }
    #mb-j-nav-menu li.parent {
      background-color: #666; }
      #mb-j-nav-menu li.parent a {
        color: #fff; }
        #mb-j-nav-menu li.parent a span {
          display: none; }
    #mb-j-nav-menu li.current {
      background-color: #cc0000; }
      #mb-j-nav-menu li.current a {
        color: #fff; }
        #mb-j-nav-menu li.current a span {
          display: none; }
    #mb-j-nav-menu li.currentChanelRow {
      background-color: #000; }
      #mb-j-nav-menu li.currentChanelRow a {
        color: #fff; }
        #mb-j-nav-menu li.currentChanelRow a span {
          display: none; }
  #mb-j-nav-menu li:first-child > a {
    font-size: 18px; }
  #mb-j-nav-menu li:nth-child(2) > a {
    font-size: 16px; }

.mb-j-hidden-list-item {
  z-index: -20;
  position: absolute; }

#mb-nav-loading {
  width: 30px;
  height: 30px;
  margin: 20px auto;
  display: none;
  line-height: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 101; }

header[data-uri].compact {
  position: relative;
  height: inherit;
  font-size: 18px;
  /*#menu-btn {
            background-image: $hamburger-menu;
            background-size: 40px 40px;
            background-repeat: no-repeat;
            height: 35px;
            margin-top: 15px;
            margin-left: 15px;
            cursor:pointer;
    }*/ }
  header[data-uri].compact .clearlink {
    display: none !important; }
  header[data-uri].compact .primary {
    border-color: #CF1F1E #7F0000 #591A1A #CF1F1E;
    border-style: solid;
    border-width: 1px;
    box-shadow: 1px 1px 1px #B3B3B3;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 17px;
    letter-spacing: 1px;
    font-weight: bold;
    overflow: visible;
    padding: 9px 16px;
    text-align: center;
    border-radius: 6px;
    background-color: #a00000;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a00000), color-stop(48%, #ac0000), color-stop(50%, #790000), color-stop(100%, #8c0000)); }
  header[data-uri].compact #mb-j-search-container {
    background: #000;
    padding: 0 0.3125em;
    text-align: left;
    width: 100%;
    z-index: 20;
    box-shadow: -1px 0px 2px -1px;
    position: relative; }
    header[data-uri].compact #mb-j-search-container form#mb-keyword-search-form {
      display: block;
      margin: 0;
      padding: 0.3125em 0; }
    header[data-uri].compact #mb-j-search-container #m-search-input-wrapper {
      overflow: hidden;
      position: relative; }
      header[data-uri].compact #mb-j-search-container #m-search-input-wrapper input#globalSearchInputField {
        -webkit-touch-callout: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-border-radius: 0;
        border-radius: 0;
        border: 0px none;
        font-size: 1em;
        font-style: normal;
        color: #000;
        height: 35px;
        margin: 0;
        padding: 0 87px 0 10px;
        width: 100%;
        line-height: normal; }
        header[data-uri].compact #mb-j-search-container #m-search-input-wrapper input#globalSearchInputField::-webkit-input-placeholder {
          font-style: italic;
          color: #666; }
        header[data-uri].compact #mb-j-search-container #m-search-input-wrapper input#globalSearchInputField::-moz-input-placeholder {
          font-style: italic;
          color: #666; }
        header[data-uri].compact #mb-j-search-container #m-search-input-wrapper input#globalSearchInputField::input-placeholder {
          font-style: italic;
          color: #666; }
      header[data-uri].compact #mb-j-search-container #m-search-input-wrapper div#mb-j-search-clear {
        cursor: pointer;
        height: 35px;
        position: absolute;
        right: 42px;
        top: 0px;
        width: 35px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MkJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjIycHgiIGhlaWdodD0iMjJweCIgdmlld0JveD0iMCAwIDIyIDIyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMiAyMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjOTk5OTk5IiBkPSJNMC4zODQsMTcuMDkxbDYuMjE1LTYuMjE1TDAuMzM3LDQuNjE1bDQuMjg5LTQuMjg5bDYuMjYyLDYuMjYxbDYuMjE0LTYuMjE0bDQuMTcxLDQuMTczbC02LjIxMiw2LjIxNA0KCQlsNi4yODMsNi4yODZsLTQuMjg2LDQuMjg2bC02LjI4Ni02LjI4MmwtNi4yMTQsNi4yMTJMMC4zODQsMTcuMDkxeiIvPg0KPC9nPg0KPC9zdmc+");
        background-repeat: no-repeat;
        background-position: right;
        background-size: 15px 15px; }
      header[data-uri].compact #mb-j-search-container #m-search-input-wrapper button#searchSubmit {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        height: 40px;
        margin-top: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 40px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwJSIgdmlld0JveD0iMCAwIDUwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTguMzAxLDE5LjQzNGMwLTYuMTQ4LDQuOTg0LTExLjEzMywxMS4xMzMtMTEuMTMzczExLjEzNCw0Ljk4NCwxMS4xMzQsMTEuMTMzDQoJCQlzLTQuOTg1LDExLjEzMi0xMS4xMzQsMTEuMTMyUzguMzAxLDI1LjU4Myw4LjMwMSwxOS40MzRMOC4zMDEsMTkuNDM0eiBNNDYuMzk2LDQyLjIwMkwzMy4xNSwyOC45NTQNCgkJCWMxLjg3OS0yLjcwMywyLjk4Mi01Ljk4MSwyLjk4Mi05LjUyMWMwLTkuMjIzLTcuNDgtMTYuNjk5LTE2LjcwMS0xNi42OTljLTkuMjIxLDAtMTYuNyw3LjQ3Ny0xNi43LDE2LjY5OQ0KCQkJYzAsOS4yMjMsNy40NzksMTYuNywxNi43LDE2LjdjMy41NCwwLDYuODE5LTEuMTA0LDkuNTIxLTIuOThMNDIuMiw0Ni4zOThjMS4xNTMsMS4xNTYsMy4wNDUsMS4xNTYsNC4xOTYsMA0KCQkJQzQ3LjU1OSw0NS4yNDcsNDcuNTU5LDQzLjM1NSw0Ni4zOTYsNDIuMjAyIi8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+");
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #CC0000; }
  @media screen and (min-width: 768px) {
    header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.active-search, header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.bag-not-empty.active-search {
      width: inherit;
      position: absolute;
      left: 0.3125em;
      right: 0.3125em;
      top: 0px;
      height: 50px;
      background: white;
      box-shadow: none;
      -webkit-box-shadow: none; }
      header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.active-search #m-search-input-wrapper, header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.bag-not-empty.active-search #m-search-input-wrapper {
        padding-right: calc(35px + .625em); }
        header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.active-search #m-search-input-wrapper div#mb-j-search-clear, header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.bag-not-empty.active-search #m-search-input-wrapper div#mb-j-search-clear {
          cursor: pointer;
          right: 0px !important;
          margin-top: 2px;
          position: absolute;
          background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KICAgICAgICAgdmlld0JveD0iMCAwIDQwIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNMjAsMS4yQzkuNiwxLjIsMS4yLDkuNiwxLjIsMjBTOS42LDM4LjgsMjAsMzguOFMzOC44LDMwLjQsMzguOCwyMFMzMC40LDEuMiwyMCwxLjJ6IE0zMS4xLDI4LjNsLTIuOCwyLjgNCiAgICAgICAgTDIwLDIyLjhsLTguMyw4LjNsLTIuOC0yLjhsOC4zLTguM2wtOC4zLTguM2wyLjgtMi44bDguMyw4LjNsOC4zLTguM2wyLjgsMi44TDIyLjgsMjBMMzEuMSwyOC4zeiIvPg0KPC9zdmc+");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 35px;
          box-shadow: none;
          -webkit-box-shadow: none; }
    header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet:not(.active-search) #m-search-input-wrapper div#mb-j-search-clear {
      display: none; }
    header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet.bag-not-empty {
      width: calc(50% - 50px - .875em);
      right: calc(50px + .8755em); }
    header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet {
      width: calc(50% - 30px - .875em);
      right: calc(30px + .875em);
      position: absolute;
      top: 0px;
      background: transparent;
      box-shadow: none;
      -webkit-box-shadow: none; }
      header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet #m-search-input-wrapper {
        overflow: hidden;
        position: relative;
        margin-right: 0px;
        /*  the old style search-go
                    button#searchSubmit {
                      border: 0;
                      box-shadow: none;
                      height: 40px;
                      margin-top: 0;
                      overflow: hidden;
                      padding: 0;
                      position: absolute;
                      right: 0px;
                      top: 0px;
                      width: 40px;
                      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwJSIgdmlld0JveD0iMCAwIDUwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTguMzAxLDE5LjQzNGMwLTYuMTQ4LDQuOTg0LTExLjEzMywxMS4xMzMtMTEuMTMzczExLjEzNCw0Ljk4NCwxMS4xMzQsMTEuMTMzDQoJCQlzLTQuOTg1LDExLjEzMi0xMS4xMzQsMTEuMTMyUzguMzAxLDI1LjU4Myw4LjMwMSwxOS40MzRMOC4zMDEsMTkuNDM0eiBNNDYuMzk2LDQyLjIwMkwzMy4xNSwyOC45NTQNCgkJCWMxLjg3OS0yLjcwMywyLjk4Mi01Ljk4MSwyLjk4Mi05LjUyMWMwLTkuMjIzLTcuNDgtMTYuNjk5LTE2LjcwMS0xNi42OTljLTkuMjIxLDAtMTYuNyw3LjQ3Ny0xNi43LDE2LjY5OQ0KCQkJYzAsOS4yMjMsNy40NzksMTYuNywxNi43LDE2LjdjMy41NCwwLDYuODE5LTEuMTA0LDkuNTIxLTIuOThMNDIuMiw0Ni4zOThjMS4xNTMsMS4xNTYsMy4wNDUsMS4xNTYsNC4xOTYsMA0KCQkJQzQ3LjU1OSw0NS4yNDcsNDcuNTU5LDQzLjM1NSw0Ni4zOTYsNDIuMjAyIi8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+');
                      background-size: 25px 25px;
                      background-repeat: no-repeat;
                      background-position: center;
                    }*/ }
        header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet #m-search-input-wrapper input#globalSearchInputField {
          -webkit-touch-callout: none;
          border: none;
          -webkit-border-radius: 7px;
          -moz-border-radius: 7px;
          border-radius: 7px;
          font-style: normal;
          color: #000;
          background-color: #EFEFEF;
          height: 40px;
          padding: 0 0 0 35px;
          width: 100%;
          box-shadow: none;
          -webkit-box-shadow: none;
          font-family: Helvetica, Arial, sans-serif;
          font-size: 18px;
          line-height: 22px; }
          header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet #m-search-input-wrapper input#globalSearchInputField::-webkit-input-placeholder {
            font-style: italic;
            color: #666; }
          header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet #m-search-input-wrapper input#globalSearchInputField::-moz-input-placeholder {
            font-style: italic;
            color: #666; }
          header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet #m-search-input-wrapper input#globalSearchInputField::input-placeholder {
            font-style: italic;
            color: #666; }
        header[data-uri].compact:not(.compact-redesign) #mb-j-search-container.for-tablet #m-search-input-wrapper button#searchSubmit {
          border: 0;
          border-radius: 0;
          box-shadow: none;
          height: 35px;
          width: 35px;
          margin-top: 0;
          overflow: hidden;
          padding: 0;
          position: absolute;
          left: 2px;
          top: 3px;
          background-color: transparent;
          background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgNTAgNTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNOC4zMDEsMTkuNDM0YzAtNi4xNDgsNC45ODQtMTEuMTMzLDExLjEzMy0xMS4xMzNzMTEuMTM0LDQuOTg0LDExLjEzNCwxMS4xMzMNCgkJCXMtNC45ODUsMTEuMTMyLTExLjEzNCwxMS4xMzJTOC4zMDEsMjUuNTgzLDguMzAxLDE5LjQzNEw4LjMwMSwxOS40MzR6IE00Ni4zOTYsNDIuMjAyTDMzLjE1LDI4Ljk1NA0KCQkJYzEuODc5LTIuNzAzLDIuOTgyLTUuOTgxLDIuOTgyLTkuNTIxYzAtOS4yMjMtNy40OC0xNi42OTktMTYuNzAxLTE2LjY5OWMtOS4yMjEsMC0xNi43LDcuNDc3LTE2LjcsMTYuNjk5DQoJCQljMCw5LjIyMyw3LjQ3OSwxNi43LDE2LjcsMTYuN2MzLjU0LDAsNi44MTktMS4xMDQsOS41MjEtMi45OEw0Mi4yLDQ2LjM5OGMxLjE1MywxLjE1NiwzLjA0NSwxLjE1Niw0LjE5NiwwDQoJCQlDNDcuNTU5LDQ1LjI0Nyw0Ny41NTksNDMuMzU1LDQ2LjM5Niw0Mi4yMDIiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4=");
          background-repeat: no-repeat;
          background-position: center;
          height: 35px !important;
          width: 35px !important; } }
  header[data-uri].compact .typeahead li {
    text-align: left; }
    header[data-uri].compact .typeahead li a {
      text-decoration: none; }
  header[data-uri].compact .dropdown-menu .active > a, header[data-uri].compact .dropdown-menu .active > a:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #646464, #787778); }
  header[data-uri].compact #mb-j-autocomplete-container {
    position: absolute;
    display: block;
    z-index: 1000;
    background-color: white;
    width: 100%; }
  @media screen and (min-width: 768px) {
    header[data-uri].compact:not(.compact-redesign) #mb-j-autocomplete-container {
      margin-top: 0px; } }
  @media screen and (min-width: 600px) {
    header[data-uri].compact.compact-redesign #mb-j-autocomplete-container {
      margin-top: 0px; } }
  header[data-uri].compact .mb-autocomplete-container {
    margin-bottom: 0;
    border-bottom: 1px solid #CCC; }
    header[data-uri].compact .mb-autocomplete-container hr {
      margin: 0.5em 0.25em; }
    header[data-uri].compact .mb-autocomplete-container li {
      font-size: 1rem;
      padding-left: 15px;
      line-height: 2.5rem;
      list-style-type: none; }
      header[data-uri].compact .mb-autocomplete-container li a {
        text-decoration: none;
        color: black; }
        header[data-uri].compact .mb-autocomplete-container li a .select .searchimage {
          margin-right: 5px; }
        header[data-uri].compact .mb-autocomplete-container li a .select .match {
          font-weight: bold; }
        header[data-uri].compact .mb-autocomplete-container li a .select .attrSuggestion {
          color: #AC0000; }
  header[data-uri].compact #m-j-recent-searches-container {
    position: absolute;
    display: block;
    z-index: 1000;
    background-color: white;
    width: 100%; }
  header[data-uri].compact .m-recent-searches-container {
    margin-bottom: 0;
    border-bottom: 1px solid #CCC; }
    header[data-uri].compact .m-recent-searches-container .title {
      color: #666;
      line-height: 2rem;
      background-color: #f7f7f7; }
    header[data-uri].compact .m-recent-searches-container li {
      font-size: 1rem;
      padding-left: 15px;
      line-height: 2.5rem;
      list-style-type: none; }
      header[data-uri].compact .m-recent-searches-container li a {
        text-decoration: none;
        color: black; }
        header[data-uri].compact .m-recent-searches-container li a .select .searchimage {
          margin-right: 5px; }
        header[data-uri].compact .m-recent-searches-container li a .select .match {
          font-weight: bold; }
  header[data-uri].compact #mb-j-search-mask {
    background-color: #000;
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 45;
    width: 100%;
    z-index: 110; }
  header[data-uri].compact #mb-j-search-mask.for-tablet {
    top: 0px !important; }
  header[data-uri].compact .m-sticky-nav-search {
    top: 0;
    position: fixed !important; }
  @media screen and (min-width: 768px) {
    header[data-uri].compact:not(.compact-redesign) #mb-j-header-container.for-tablet {
      padding: 0;
      height: 2.875em;
      border-bottom: 2px solid #ccc; }
      header[data-uri].compact:not(.compact-redesign) #mb-j-header-container.for-tablet > .m-header-side {
        width: 50px;
        top: 3px;
        bottom: 3px;
        padding-left: .925em;
        padding-right: .625em; }
        header[data-uri].compact:not(.compact-redesign) #mb-j-header-container.for-tablet > .m-header-side #mb-j-nav-button {
          cursor: pointer;
          margin-top: 51%; }
      header[data-uri].compact:not(.compact-redesign) #mb-j-header-container.for-tablet > .m-header-mid {
        margin-top: 9px;
        text-align: left;
        width: auto;
        padding-left: 1.15em; }
        header[data-uri].compact:not(.compact-redesign) #mb-j-header-container.for-tablet > .m-header-mid #mb-j-header-image {
          display: block;
          height: 38px;
          left: 10px; } }
  header[data-uri].compact #mb-j-header-container {
    width: auto;
    margin: 0;
    max-width: none;
    overflow: hidden;
    *zoom: 1;
    padding: 0;
    height: 2.8125em; }
    header[data-uri].compact #mb-j-header-container > .m-header-side {
      position: relative;
      padding-left: 0.03125em;
      padding-right: 0.03125em;
      width: 12.5%;
      float: left;
      padding-left: .925em;
      padding-right: .625em;
      width: 16.66667%; }
      header[data-uri].compact #mb-j-header-container > .m-header-side #mb-j-nav-button {
        cursor: pointer;
        margin-top: 12px;
        height: 22px;
        width: 30px; }
      header[data-uri].compact #mb-j-header-container > .m-header-side .selectedMenuButton {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjBweCIgaGVpZ2h0PSI0NHB4IiB2aWV3Qm94PSIwIDAgNjAgNDQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYwIDQ0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNDQzAwMDAiIGQ9Ik0wLDBoNjB2OEgwVjB6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTAsMThoNjB2OEgwVjE4eiIvPg0KCTxwYXRoIGZpbGw9IiNDQzAwMDAiIGQ9Ik0wLDM2aDYwdjhIMFYzNnoiLz4NCjwvZz4NCjwvc3ZnPg0K");
        background-size: 30px 22px; }
      header[data-uri].compact #mb-j-header-container > .m-header-side .unselectedMenuButton {
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjBweCIgaGVpZ2h0PSI0NHB4IiB2aWV3Qm94PSIwIDAgNjAgNDQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYwIDQ0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0wLDBoNjB2OEgwVjB6IE0wLDAiLz4NCgk8cGF0aCBkPSJNMCwxOGg2MHY4SDBWMTh6IE0wLDE4Ii8+DQoJPHBhdGggZD0iTTAsMzZoNjB2OEgwVjM2eiBNMCwzNiIvPg0KPC9nPg0KPC9zdmc+DQo=");
        background-size: 30px 22px; }
      header[data-uri].compact #mb-j-header-container > .m-header-side #mb-bag-count-container {
        float: right; }
      header[data-uri].compact #mb-j-header-container > .m-header-side a {
        display: block;
        height: 36px;
        width: 30px;
        top: 0px;
        right: 0px;
        z-index: 100;
        float: right; }
      header[data-uri].compact #mb-j-header-container > .m-header-side #m-shopping-bag-image {
        -webkit-transition: opacity 0.5s;
        -webkit-transition-delay: 0s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s false false;
        float: right;
        height: 36px;
        width: 27px;
        overflow: hidden;
        margin-top: 4px;
        z-index: 1;
        position: relative; }
      header[data-uri].compact #mb-j-header-container > .m-header-side #m-bag-count {
        position: absolute;
        top: 5px;
        right: 30px;
        z-index: 0;
        float: right; }
    header[data-uri].compact #mb-j-header-container > .m-header-mid {
      margin-top: 4px;
      position: relative;
      padding-left: 0.03125em;
      padding-right: 0.03125em;
      width: 50%;
      float: left;
      padding-left: 0.625em;
      padding-right: 0.625em;
      text-align: center;
      width: 64%; }
      header[data-uri].compact #mb-j-header-container > .m-header-mid #mb-j-header-image {
        display: block;
        height: 38px; }
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          header[data-uri].compact #mb-j-header-container > .m-header-mid #mb-j-header-image svg {
            height: 38px;
            width: 141px; } }

header[data-uri].compact.compact-redesign {
  min-width: 320px; }
  header[data-uri].compact.compact-redesign #mb-j-header-container {
    height: auto; }
    header[data-uri].compact.compact-redesign #mb-j-header-container .m-header-side {
      padding-left: 7px;
      padding-right: 7px;
      top: 0;
      bottom: 0; }
    header[data-uri].compact.compact-redesign #mb-j-header-container #mb-j-nav-button {
      width: 40px;
      height: 30px;
      background-size: 40px 30px;
      margin-top: 16px; }
    header[data-uri].compact.compact-redesign #mb-j-header-container .unselectedMenuButton {
      background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjYwcHgiIGhlaWdodD0iNDRweCIgdmlld0JveD0iMCAwIDYwIDQ0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MCA0NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkPSJNMCwwaDYwdjhIMFYweiBNMCwwIiBmaWxsPSIjNjY2NjY2Ii8+Cgk8cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0wLDE4aDYwdjhIMFYxOHogTTAsMTgiIGZpbGw9IiM2NjY2NjYgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAiLz4KCTxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0iTTAsMzZoNjB2OEgwVjM2eiBNMCwzNiIgZmlsbD0iIzY2NjY2NiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICIvPgo8L2c+Cjwvc3ZnPg==); }
    header[data-uri].compact.compact-redesign #mb-j-header-container > .m-header-mid {
      margin: 0;
      padding-top: 14px;
      padding-bottom: 6px; }
      header[data-uri].compact.compact-redesign #mb-j-header-container > .m-header-mid #mb-j-header-image {
        height: 40px; }
        header[data-uri].compact.compact-redesign #mb-j-header-container > .m-header-mid #mb-j-header-image svg {
          height: 40px; }
          @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            header[data-uri].compact.compact-redesign #mb-j-header-container > .m-header-mid #mb-j-header-image svg {
              width: 147px; } }
        header[data-uri].compact.compact-redesign #mb-j-header-container > .m-header-mid #mb-j-header-image .header-logo {
          display: block; }
    header[data-uri].compact.compact-redesign #mb-j-header-container #mb-bag-count-container {
      padding-top: 20px; }
      header[data-uri].compact.compact-redesign #mb-j-header-container #mb-bag-count-container #m-bag-count {
        top: 25px;
        right: 25px; }
  @media screen and (min-width: 600px) {
    header[data-uri].compact.compact-redesign #mb-j-header-container.for-tablet {
      padding: 0;
      height: auto;
      border-bottom: 2px solid #ccc; }
      header[data-uri].compact.compact-redesign #mb-j-header-container.for-tablet > .m-header-side {
        width: 50px; }
      header[data-uri].compact.compact-redesign #mb-j-header-container.for-tablet > .m-header-mid {
        text-align: left;
        width: auto;
        padding-left: 1.15em; } }
  header[data-uri].compact.compact-redesign #mb-j-search-container {
    background: #eee;
    box-shadow: none;
    padding: 5px 7px 5px;
    border-bottom: 2px solid #ccc; }
    header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form {
      padding: 0; }
      header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper #clearable_globalSearchInputField {
        border: none; }
      header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper #globalSearchInputField {
        height: 40px; }
        header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper #globalSearchInputField::-webkit-input-placeholder {
          font-style: normal;
          color: #666; }
        header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper #globalSearchInputField::-moz-input-placeholder {
          font-style: normal;
          color: #666; }
        header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper #globalSearchInputField::input-placeholder {
          font-style: normal;
          color: #666; }
      header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper div#mb-j-search-clear {
        height: 42px;
        width: 42px;
        right: 48px; }
      header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper button#searchSubmit {
        border-radius: 0;
        width: 42px;
        height: 42px;
        top: 0;
        right: 0;
        background-size: 32px 32px;
        background-color: #666666; }
  @media screen and (min-width: 600px) {
    header[data-uri].compact.compact-redesign #mb-j-search-container {
      background-color: #fff;
      padding-top: 10px;
      padding-bottom: 0;
      border-bottom: none; }
      header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper {
        padding-right: 42px; }
        header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper div#mb-j-search-clear {
          margin: 0;
          right: 48px !important; }
        header[data-uri].compact.compact-redesign #mb-j-search-container #mb-keyword-search-form #m-search-input-wrapper #globalSearchInputField {
          border: #666 solid 1px; }
    header[data-uri].compact.compact-redesign #mb-j-search-container.for-tablet {
      width: calc(60% - 43px - 7px);
      right: calc(43px + 5px + 7px);
      position: absolute;
      top: 0; }
    header[data-uri].compact.compact-redesign #mb-j-search-container.for-tablet.active-search, header[data-uri].compact.compact-redesign #mb-j-search-container.for-tablet.bag-not-empty.active-search {
      width: inherit;
      position: absolute;
      left: 0;
      right: 7px;
      top: 0;
      height: 60px; }
    header[data-uri].compact.compact-redesign #mb-j-search-container.for-tablet:not(.active-search) #m-search-input-wrapper div#mb-j-search-clear {
      display: none; } }
  header[data-uri].compact.compact-redesign #mb-j-nav-container {
    width: 275px;
    left: -275px;
    box-shadow: inset -4px 0 4px -4px #333;
    background-color: #eeeeee; }
    header[data-uri].compact.compact-redesign #mb-j-nav-container #mb-j-nav-menu li {
      display: block;
      border-bottom: 1px solid #666666;
      border-right: 1px solid #666666;
      overflow: hidden;
      box-shadow: inset -4px 0 4px -4px #333; }
      header[data-uri].compact.compact-redesign #mb-j-nav-container #mb-j-nav-menu li a {
        line-height: 50px;
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        text-transform: uppercase;
        padding: 0;
        width: auto; }
      header[data-uri].compact.compact-redesign #mb-j-nav-container #mb-j-nav-menu li:first-child {
        border-top: 1px solid #666666; }
      header[data-uri].compact.compact-redesign #mb-j-nav-container #mb-j-nav-menu li.parent {
        background-color: #999999;
        padding-left: 12px; }
      header[data-uri].compact.compact-redesign #mb-j-nav-container #mb-j-nav-menu li.current {
        background-color: #cc0000;
        padding-left: 12px; }
      header[data-uri].compact.compact-redesign #mb-j-nav-container #mb-j-nav-menu li.child {
        background-color: #ffffff;
        padding-left: 24px; }

@media only screen and (max-width: 1024px) {
  header[data-uri].compact #clearable_globalSearchInputField {
    width: inherit; } }

header[data-uri].compact.compact-redesign.spa-enabled #mb-j-nav-container {
  width: 100%;
  left: -100%;
  max-width: 600px; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].minimalist {
  font-size: 14px;
  border-bottom: 1px solid #CCCCCC;
  height: 80px;
  max-width: 100% !important;
  background: #fff;
  min-width: 0; }
  header[data-uri].minimalist .show-for-large-only {
    display: block; }
  header[data-uri].minimalist .show-for-medium-only {
    display: none; }
  header[data-uri].minimalist .m-header-side {
    width: 50px;
    bottom: 3px;
    padding-left: .925em;
    padding-right: 1.625em; }
    header[data-uri].minimalist .m-header-side #mb-j-nav-button {
      cursor: pointer;
      margin-top: 51%; }
  header[data-uri].minimalist #mb-bag-count-container {
    float: right; }
  header[data-uri].minimalist #m-shopping-bag-image {
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    float: right;
    height: 36px;
    overflow: hidden;
    margin-top: -37px;
    position: relative; }
  header[data-uri].minimalist #m-bag-count {
    position: relative;
    top: -8px;
    z-index: 0;
    float: right;
    right: 17px; }
  header[data-uri].minimalist #m-minimal-header-box {
    padding-left: 32px;
    padding-right: 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    min-width: 320px; }
    header[data-uri].minimalist #m-minimal-header-box #logo svg {
      height: 37px;
      width: 136px; }

@media only screen and (max-width: 320px) {
  header[data-uri].minimalist > #m-minimal-header-box {
    width: 320px; } }

@media only screen and (min-width: 1264px) {
  header[data-uri].minimalist > #m-minimal-header-box {
    width: 1264px;
    margin: 0 auto; } }

@media only screen and (max-width: 1024px) and (min-width: 0px) {
  header[data-uri].minimalist .show-for-medium-only {
    display: inline-block;
    padding-bottom: inherit !important;
    margin-right: 0px !important; }
  header[data-uri].minimalist .show-for-large-only {
    display: none; } }

@media only screen and (max-width: 768px) {
  header[data-uri].minimalist .show-for-medium-only {
    margin-right: 0px; } }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes fadeInOverlay {
  from {
    opacity: 0; }
  to {
    opacity: 0.75; } }

@keyframes fadeInOverlay {
  from {
    opacity: 0; }
  to {
    opacity: 0.75; } }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes cleanSlide {
  from {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
  to {
    min-height: inherit;
    max-height: 1000px; } }

@keyframes cleanSlide {
  from {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
  to {
    min-height: inherit;
    max-height: 1000px; } }

@-webkit-keyframes cleanSlideToTop {
  from {
    min-height: inherit;
    max-height: 1000px; }
  to {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; } }

@keyframes cleanSlideToTop {
  from {
    min-height: inherit;
    max-height: 1000px; }
  to {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; } }

@-webkit-keyframes cleanStretch {
  from {
    margin-left: 50%;
    width: 0; }
  to {
    margin-left: 0;
    width: 100%; } }

@keyframes cleanStretch {
  from {
    margin-left: 50%;
    width: 0; }
  to {
    margin-left: 0;
    width: 100%; } }

@-webkit-keyframes radicalStretch {
  from {
    right: 130%; }
  to {
    right: -6px; } }

@keyframes radicalStretch {
  from {
    right: 130%; }
  to {
    right: -6px; } }

@-webkit-keyframes cleanShorten {
  from {
    margin-left: 0;
    width: 100%; }
  to {
    margin-left: 50%;
    width: 0; } }

@keyframes cleanShorten {
  from {
    margin-left: 0;
    width: 100%; }
  to {
    margin-left: 50%;
    width: 0; } }

@-webkit-keyframes radicalShorten {
  from {
    right: -6px; }
  to {
    right: 130%; } }

@keyframes radicalShorten {
  from {
    right: -6px; }
  to {
    right: 130%; } }

@-webkit-keyframes cleanRotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(-180deg); } }

@keyframes cleanRotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(-180deg); } }

@-webkit-keyframes cleanRotateBack {
  from {
    transform: rotate(-180deg); }
  to {
    transform: rotate(0); } }

@keyframes cleanRotateBack {
  from {
    transform: rotate(-180deg); }
  to {
    transform: rotate(0); } }

@-webkit-keyframes radicalMenuSlideFromLeft {
  from {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; }
  to {
    margin-right: 0; } }

@keyframes radicalMenuSlideFromLeft {
  from {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; }
  to {
    margin-right: 0; } }

@-webkit-keyframes radicalMenuSlideToLeft {
  from {
    margin-right: 0; }
  to {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; } }

@keyframes radicalMenuSlideToLeft {
  from {
    margin-right: 0; }
  to {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; } }

header[data-uri].default #mainNavigation {
  background-color: #000000;
  height: 40px;
  color: #FFFFFF;
  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; }
  header[data-uri].default #mainNavigation > ul {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    list-style: none;
    white-space: nowrap;
    overflow: auto;
    line-height: 20px; }
    header[data-uri].default #mainNavigation > ul > li {
      padding: 8px 8px 10px 8px;
      padding-top: 10px;
      list-style: none;
      line-height: 20px; }
      header[data-uri].default #mainNavigation > ul > li > a {
        font-size: 14px;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: normal;
        color: #FFF;
        text-decoration: none; }
      header[data-uri].default #mainNavigation > ul > li > div {
        display: none; }
      header[data-uri].default #mainNavigation > ul > li.selected {
        background-color: #4D4D4D;
        box-shadow: inset 0 3px 6px #2E2E2E; }
        header[data-uri].default #mainNavigation > ul > li.selected > a {
          color: #FFF; }
      header[data-uri].default #mainNavigation > ul > li.selected-flyout {
        background-color: #FFF;
        background-image: linear-gradient(#999, #fff 18%); }
        header[data-uri].default #mainNavigation > ul > li.selected-flyout > a {
          color: #000; }
        header[data-uri].default #mainNavigation > ul > li.selected-flyout > div {
          display: block; }
      header[data-uri].default #mainNavigation > ul > li:nth-child(2) > div, header[data-uri].default #mainNavigation > ul > li:nth-child(3) > div {
        margin-left: -480px; }
      header[data-uri].default #mainNavigation > ul > li > .custom-3-column {
        width: 720px;
        margin-left: -240px; }
        header[data-uri].default #mainNavigation > ul > li > .custom-3-column > .flexbox {
          width: 33%; }
      header[data-uri].default #mainNavigation > ul > li > .custom-2-column {
        width: 480px;
        margin-left: auto; }
        header[data-uri].default #mainNavigation > ul > li > .custom-2-column > .flexbox {
          width: 50%; }
      header[data-uri].default #mainNavigation > ul > li > .custom-1-column {
        width: 250px; }
        header[data-uri].default #mainNavigation > ul > li > .custom-1-column > .flexbox {
          width: 100%; }

header[data-uri].clean #mainNavigation {
  position: relative;
  background-color: #ffffff;
  color: #000000;
  font-weight: bold;
  height: 45px; }
  header[data-uri].clean #mainNavigation div.redesign-main-menu-container {
    display: block;
    /**
             * Animation specific styles
             * If animation is not required, everything below can be removed
             */ }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      display: flex;
      justify-content: space-between;
      list-style: none;
      white-space: nowrap;
      overflow: visible;
      line-height: 20px; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li {
        height: 45px;
        padding: 10px 0 15px 0;
        list-style: none;
        flex-grow: 1; }
        header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li:first-child {
          padding-left: 0; }
        header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li:last-child {
          padding-right: 0;
          flex-grow: 0; }
        header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li > a {
          display: inline-block;
          text-decoration: none; }
        header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li > button.hide-for-screenreader {
          background-color: transparent !important;
          transition: none !important;
          border: none !important; }
        header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li.selected > a:after, header[data-uri].clean #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li.selected-flyout > a:after {
          display: block;
          content: '';
          width: 100%;
          height: 3px;
          margin-top: 3px;
          background-color: #cc0000; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.flyout-shown ul.redesign-header-fobs > li.selected > a:after {
      display: none; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.flyout-shown ul.redesign-header-fobs > li.selected.selected-flyout > a:after {
      display: block; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > div {
      overflow: hidden;
      display: none; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > div.selected-flyout {
      display: flex; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-3-column {
      width: 75%; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-3-column > div.flyout-column {
        min-width: 33%; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-2-column {
      width: 50%; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-2-column > div.flyout-column {
        min-width: 50%; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-1-column {
      width: 27%; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-1-column > div.flyout-column {
        min-width: 100%; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container .flyout-column {
      padding-right: 10px; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container .flyout-column:last-child {
        padding-right: 0; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > div {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: none;
      animation-name: none;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-show ul.redesign-header-fobs > li.selected-flyout > a:after {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanStretch;
      animation-name: cleanStretch;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-show ul.redesign-header-fobs > li.selected.selected-flyout > a:after {
      -webkit-animation-duration: 0s;
      animation-duration: 0s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: none;
      animation-name: none;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-show div.redesign-header-flyouts-container > div {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanSlide;
      animation-name: cleanSlide;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-show div.redesign-header-flyouts-container > div .flyout-column {
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-change ul.redesign-header-fobs > li.selected-flyout > a:after {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanStretch;
      animation-name: cleanStretch;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-change ul.redesign-header-fobs > li.selected.selected-flyout > a:after {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanStretch;
      animation-name: cleanStretch;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-hide ul.redesign-header-fobs > li.selected-flyout > a:after {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanShorten;
      animation-name: cleanShorten;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-hide ul.redesign-header-fobs > li.selected > a:after {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanStretch;
      animation-name: cleanStretch;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-hide ul.redesign-header-fobs > li.selected.selected-flyout > a:after {
      -webkit-animation-duration: 0s !important;
      animation-duration: 0s !important; }
    header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-hide div.redesign-header-flyouts-container > div {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: cleanSlideToTop;
      animation-name: cleanSlideToTop;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
      header[data-uri].clean #mainNavigation div.redesign-main-menu-container.animated-hide div.redesign-header-flyouts-container > div .flyout-column {
        -webkit-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease; }

header[data-uri].radical #mainNavigation div.redesign-main-menu-container {
  display: flex;
  justify-content: flex-start;
  width: 232px;
  height: 100%;
  overflow: hidden;
  /**
             * Animation specific styles
             * If animation is not required, everything below can be removed
             */
  transition: width 0.3s ease, height 0.1s ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-fobs-container {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 1px solid #696969;
    width: 232px;
    background-color: #fff; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
    text-align: left;
    color: #000000;
    font-weight: normal; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li {
      display: block; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li > a {
        padding: 12px 15px;
        line-height: 18px;
        display: block;
        text-decoration: none; }
        header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li > a span {
          position: relative; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li:last-child > a {
        padding-bottom: 24px; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li > button.hide-for-screenreader {
        background-color: transparent !important;
        transition: none !important;
        border: none !important; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li.selected-flyout {
        background-color: #fff;
        font-weight: bold; }
        header[data-uri].radical #mainNavigation div.redesign-main-menu-container ul.redesign-header-fobs > li.selected-flyout > a > span:after {
          position: absolute;
          display: block;
          content: '';
          left: -15px;
          right: -6px;
          height: 3px;
          margin-top: 3px;
          background-color: #cc0000; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container.flyout-shown {
    width: 100%; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container.flyout-shown div.redesign-header-fobs-container {
      width: 232px; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-fobs-container {
    /*width: $redesign-header-radical-category-dropdown-list-min-width;*/
    max-height: 580px;
    overflow-y: scroll; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-fobs-container ::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 7px; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-fobs-container ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container {
    flex: 1 1 auto;
    padding: 0;
    margin-left: -2px;
    /*
                    D-55234 Safari issue
                    Safari (v.9) seems to have an issue where it doesn't stretch flex item to the parent height
                    No other browsers need this rule.
                    So when the safari webkit issue is fixed, this rule has to be removed
                 */
    height: 100%; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container.redesign-header-flyouts-container-scrollbar {
      border-left: 1px solid #bababa;
      margin-left: 0; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > div {
      overflow: hidden;
      display: none; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > div.selected-flyout {
      display: flex; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-3-column {
      width: 75%; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-3-column > .flexbox {
        width: 33%; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-2-column {
      width: 50%; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-2-column > .flexbox {
        width: 50%; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-1-column {
      width: 27%; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > .custom-1-column > .flexbox {
        width: 100%; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container .flyout-column {
      float: none;
      display: inline-block;
      vertical-align: top;
      padding-right: 25px;
      min-width: 160px;
      white-space: normal; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container .flyout-column:first-child {
        padding-left: 15px; }
      header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container .flyout-column:last-child {
        padding-right: 15px; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-flyouts-container > div {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: none;
    animation-name: none;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container div.redesign-header-fobs-container {
    transition: width 0.1s ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-show ul.redesign-header-fobs > li.selected-flyout > a > span:after {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: radicalStretch;
    animation-name: radicalStretch;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-show div.redesign-header-flyouts-container > div {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: radicalMenuSlideFromLeft;
    animation-name: radicalMenuSlideFromLeft;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-show div.redesign-header-flyouts-container > div .flyout-column {
      -webkit-animation-duration: 0.1s;
      animation-duration: 0.1s;
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-change ul.redesign-header-fobs > li.selected-flyout > a > span:after {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: radicalStretch;
    animation-name: radicalStretch;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-hide ul.redesign-header-fobs > li.selected-flyout > a > span:after {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: radicalShorten;
    animation-name: radicalShorten;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-hide div.redesign-header-flyouts-container > div {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: radicalMenuSlideToLeft;
    animation-name: radicalMenuSlideToLeft;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
    header[data-uri].radical #mainNavigation div.redesign-main-menu-container.animated-hide div.redesign-header-flyouts-container > div .flyout-column {
      -webkit-animation-duration: 0.1s;
      animation-duration: 0.1s;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].default .show-for-large-only {
  display: block; }

header[data-uri].default div[class^="flyout_"] {
  box-shadow: rgba(51, 51, 51, 0.4) 0 10px 15px;
  min-height: 396px;
  background-color: #FFF;
  width: 980px;
  position: absolute;
  z-index: 9999;
  padding-bottom: 16px;
  left: 50%;
  margin-left: -480px;
  top: 179px;
  font-size: 14px; }
  header[data-uri].default div[class^="flyout_"] div {
    padding-left: 0px;
    min-height: 390px;
    margin-top: 16px; }
    header[data-uri].default div[class^="flyout_"] div:not(:first-child) {
      border-right: 0px solid #CCC;
      background-image: url("//assets.macys.com/navapp/web20/assets/img/nav/header-flyoutout-verticalRule.jpg");
      background-repeat: no-repeat;
      background-position: left 10px;
      background-size: auto 100%; }
    header[data-uri].default div[class^="flyout_"] div.small-4 {
      width: 23.25%; }
    header[data-uri].default div[class^="flyout_"] div ul {
      padding-left: 10px;
      margin: 0px; }
      header[data-uri].default div[class^="flyout_"] div ul:not(:first-child) {
        padding-top: 15px; }
      header[data-uri].default div[class^="flyout_"] div ul img {
        max-width: 95%; }
      header[data-uri].default div[class^="flyout_"] div ul li {
        line-height: 24px;
        list-style: none; }
        header[data-uri].default div[class^="flyout_"] div ul li label {
          font-size: 14px; }
        header[data-uri].default div[class^="flyout_"] div ul li a {
          text-decoration: none;
          font-weight: normal; }
          header[data-uri].default div[class^="flyout_"] div ul li a.special {
            color: #cc0000; }
        header[data-uri].default div[class^="flyout_"] div ul li a:hover {
          text-decoration: underline; }
    header[data-uri].default div[class^="flyout_"] div:last-child {
      border-right: 0px solid;
      width: 30%; }

header[data-uri].default div.flyout_64967 {
  width: 210px; }

header[data-uri].clean div[class^="flyout_"] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  float: none;
  min-height: inherit;
  background-color: #FFF;
  left: 0;
  right: 0;
  position: absolute;
  top: 46px;
  border: 1px solid #bababa;
  border-top: none;
  padding: 15px 5.72917% 18px;
  font-size: 14px; }
  header[data-uri].clean div[class^="flyout_"] div.flyout-column {
    min-width: 25%; }
    header[data-uri].clean div[class^="flyout_"] div.flyout-column ul {
      padding: 0;
      margin: 0; }
      header[data-uri].clean div[class^="flyout_"] div.flyout-column ul:not(:first-child) {
        padding-top: 17px; }
      header[data-uri].clean div[class^="flyout_"] div.flyout-column ul img {
        max-width: 100%;
        margin: 7px 0 0 0; }
      header[data-uri].clean div[class^="flyout_"] div.flyout-column ul li {
        line-height: 24px;
        list-style: none; }
        header[data-uri].clean div[class^="flyout_"] div.flyout-column ul li a {
          text-decoration: none;
          font-weight: normal; }
          header[data-uri].clean div[class^="flyout_"] div.flyout-column ul li a.special {
            color: #cc0000; }
        header[data-uri].clean div[class^="flyout_"] div.flyout-column ul li a:hover {
          text-decoration: underline; }

header[data-uri].clean div.flyout_64967 {
  left: 0; }

header[data-uri].clean div.flyout_16908, header[data-uri].clean div.flyout_47587, header[data-uri].clean div.flyout_72435 {
  left: 25%; }

header[data-uri].radical div[class^="flyout_"] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  float: none;
  min-height: inherit;
  background-color: #FFF;
  left: 0;
  right: 0;
  position: absolute;
  top: 46px;
  border: 1px solid #bababa;
  border-top: none;
  padding: 15px 5.72917% 18px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px; }
  header[data-uri].radical div[class^="flyout_"] div.flyout-column {
    min-width: 25%; }
    header[data-uri].radical div[class^="flyout_"] div.flyout-column ul {
      padding: 0;
      margin: 0; }
      header[data-uri].radical div[class^="flyout_"] div.flyout-column ul:not(:first-child) {
        padding-top: 30px; }
      header[data-uri].radical div[class^="flyout_"] div.flyout-column ul img {
        max-width: 100%;
        margin: 7px 0 0 0; }
      header[data-uri].radical div[class^="flyout_"] div.flyout-column ul li {
        line-height: 24px;
        list-style: none; }
        header[data-uri].radical div[class^="flyout_"] div.flyout-column ul li a {
          text-decoration: none;
          font-weight: normal; }
          header[data-uri].radical div[class^="flyout_"] div.flyout-column ul li a.special {
            color: #cc0000; }
        header[data-uri].radical div[class^="flyout_"] div.flyout-column ul li a:hover {
          text-decoration: underline; }

header[data-uri].radical div.flyout_64967 {
  left: 0; }

header[data-uri].radical div.flyout_16908, header[data-uri].radical div.flyout_47587, header[data-uri].radical div.flyout_72435 {
  left: 25%; }

header[data-context*='"shoppingMode":"WEDDING_REGISTRY"'].clean div.flyout_63538,
header[data-context*='"shoppingMode":"wedding_registry"'].clean div.flyout_63538,
header[data-context*='"shoppingMode":"Wedding_Registry"'].clean div.flyout_63538,
header[data-context*='"shoppingMode":"wedding_Registry"'].clean div.flyout_63538,
header[data-context*='"shoppingMode":"Wedding_registry"'].clean div.flyout_63538 {
  left: 50%; }

header[data-uri].radical [class*="column"]:last-child {
  float: none; }

header[data-uri].radical div[class^="flyout_"] {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  width: auto;
  margin: 0;
  top: 0;
  left: 0;
  border: none;
  white-space: nowrap;
  height: 100%;
  border: 1px solid #696969;
  border-left: none; }

@media only screen and (max-width: 1024px) and (min-width: 0px) {
  header[data-uri].default div[class^=flyout_] {
    left: 512px;
    clear: both; }
  header[data-uri].default #mainNavigation > ul > li.selected-flyout > div {
    display: table; } }
#help-overlay-lightbox, #help-overlay-holder {
  z-index: 1000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }

#help-overlay-lightbox {
  background-color: #FFFFFF;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75; }

#help-overlay-holder {
  z-index: 2000; }
  #help-overlay-holder section#helpOverlayContainer {
    position: absolute;
    left: 50%;
    margin-left: -266px;
    width: 460px;
    height: 345px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: #DDDDDD 0px 0px 10px 0px;
    margin-top: -500px;
    z-index: 3000; }
    #help-overlay-holder section#helpOverlayContainer .overlay-header {
      height: 73px; }
      #help-overlay-holder section#helpOverlayContainer .overlay-header .help {
        padding: 18px 0 18px 170px; }
        #help-overlay-holder section#helpOverlayContainer .overlay-header .help span {
          color: #000;
          font-family: Helvetica,Arial,sans-serif;
          font-size: 36px;
          margin-left: -30px; }
      #help-overlay-holder section#helpOverlayContainer .overlay-header #overlayCloseBtn {
        margin-right: 15px;
        margin-top: 15px; }
    #help-overlay-holder section#helpOverlayContainer .helpborder {
      width: 89%;
      border-bottom: 1px solid #808080;
      margin-left: 25px; }
    #help-overlay-holder section#helpOverlayContainer .overlay-body {
      height: 260px; }
      #help-overlay-holder section#helpOverlayContainer .overlay-body > div:first-child .help-sub-body {
        border-right: 1px solid #808080; }
      #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body {
        margin: 0 auto;
        text-align: center;
        margin-top: 0px;
        padding-top: 27px;
        height: 220px;
        margin-bottom: 15px; }
        #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .help-body-header {
          color: #000;
          font-family: Helvetica,Arial,sans-serif;
          font-size: 22px;
          margin: 20px auto;
          font-weight: bold; }
        #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .help-body-subheader {
          font-family: Helvetica,Arial,sans-serif;
          font-size: 16px;
          line-height: 18px;
          margin-top: -16px;
          color: #000; }
        #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .button {
          margin: 19px auto;
          width: 130px;
          height: 32px;
          background-color: #9AC3B9;
          filter: none;
          border: none;
          padding-top: 8px; }
          #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .button span {
            font-size: 12px;
            font-weight: normal;
            font-family: Helvetica,Arial,sans-serif; }
        #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .callUsInfo {
          font-size: 16px;
          font-family: Helvetica,Arial,sans-serif;
          margin-top: 10px;
          text-align: left;
          margin-left: 24px; }
          #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .callUsInfo .mon {
            margin-right: 22px;
            display: inline; }
          #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .callUsInfo .sat {
            margin-right: 55px;
            display: inline; }
          #help-overlay-holder section#helpOverlayContainer .overlay-body .help-sub-body .callUsInfo .sun {
            margin-right: 51px;
            display: inline; }
    #help-overlay-holder section#helpOverlayContainer .faq {
      font-size: 16px;
      font-family: Helvetica,Arial,sans-serif;
      text-align: center;
      margin-top: -21px; }
    #help-overlay-holder section#helpOverlayContainer .overlay-footer {
      height: 111px;
      background-color: #cce0da;
      font-size: 14px;
      line-height: 19px;
      font-family: "Avenir LT W01 35 Light" sans-serif;
      color: #000;
      padding-top: 12px; }
      #help-overlay-holder section#helpOverlayContainer .overlay-footer #overlay_footer_msg {
        padding-top: 15px; }
      #help-overlay-holder section#helpOverlayContainer .overlay-footer .footer-image {
        padding-left: 30px; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].clean .redesign-header-media-content, header[data-uri].radical .redesign-header-media-content {
  font: unset;
  font-size: 12px;
  font-family: Helvetica;
  color: #fff; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes fadeInOverlay {
  from {
    opacity: 0; }
  to {
    opacity: 0.75; } }

@keyframes fadeInOverlay {
  from {
    opacity: 0; }
  to {
    opacity: 0.75; } }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes cleanSlide {
  from {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
  to {
    min-height: inherit;
    max-height: 1000px; } }

@keyframes cleanSlide {
  from {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0; }
  to {
    min-height: inherit;
    max-height: 1000px; } }

@-webkit-keyframes cleanSlideToTop {
  from {
    min-height: inherit;
    max-height: 1000px; }
  to {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; } }

@keyframes cleanSlideToTop {
  from {
    min-height: inherit;
    max-height: 1000px; }
  to {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0; } }

@-webkit-keyframes cleanStretch {
  from {
    margin-left: 50%;
    width: 0; }
  to {
    margin-left: 0;
    width: 100%; } }

@keyframes cleanStretch {
  from {
    margin-left: 50%;
    width: 0; }
  to {
    margin-left: 0;
    width: 100%; } }

@-webkit-keyframes radicalStretch {
  from {
    right: 130%; }
  to {
    right: -6px; } }

@keyframes radicalStretch {
  from {
    right: 130%; }
  to {
    right: -6px; } }

@-webkit-keyframes cleanShorten {
  from {
    margin-left: 0;
    width: 100%; }
  to {
    margin-left: 50%;
    width: 0; } }

@keyframes cleanShorten {
  from {
    margin-left: 0;
    width: 100%; }
  to {
    margin-left: 50%;
    width: 0; } }

@-webkit-keyframes radicalShorten {
  from {
    right: -6px; }
  to {
    right: 130%; } }

@keyframes radicalShorten {
  from {
    right: -6px; }
  to {
    right: 130%; } }

@-webkit-keyframes cleanRotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(-180deg); } }

@keyframes cleanRotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(-180deg); } }

@-webkit-keyframes cleanRotateBack {
  from {
    transform: rotate(-180deg); }
  to {
    transform: rotate(0); } }

@keyframes cleanRotateBack {
  from {
    transform: rotate(-180deg); }
  to {
    transform: rotate(0); } }

@-webkit-keyframes radicalMenuSlideFromLeft {
  from {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; }
  to {
    margin-right: 0; } }

@keyframes radicalMenuSlideFromLeft {
  from {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; }
  to {
    margin-right: 0; } }

@-webkit-keyframes radicalMenuSlideToLeft {
  from {
    margin-right: 0; }
  to {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; } }

@keyframes radicalMenuSlideToLeft {
  from {
    margin-right: 0; }
  to {
    padding-left: 0;
    padding-right: 0;
    margin-right: 100%; } }

header.clean {
  height: auto;
  position: relative; }

header.radical {
  height: auto;
  position: relative; }

.redesign-header {
  font-size: 14px; }
  .redesign-header .redesign-header-content {
    position: relative;
    width: 100%;
    min-width: 1024px;
    z-index: 3;
    border-bottom: 1px solid #bababa;
    background-color: #fff; }
  .redesign-header .redesign-header-wrapper {
    min-width: 1024px;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 32px; }
  .redesign-header .redesign-header-media {
    height: 40px;
    background-color: #3d3d3d;
    color: #ffffff; }
  .redesign-header .redesign-header-media-col {
    position: relative;
    float: left;
    width: 50%;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    .redesign-header .redesign-header-media-col .redesign-header-media-content {
      font-weight: bold;
      font-size: 12px; }
      .redesign-header .redesign-header-media-col .redesign-header-media-content a {
        color: #ffffff;
        font-weight: normal; }
  .redesign-header .redesign-header-links {
    display: flex;
    justify-content: space-between;
    font-size: 12px; }
  .redesign-header .redesign-header-links-col.redesign-header-links-col-left {
    flex: 0 0 auto; }
  .redesign-header .redesign-header-links-col.redesign-header-links-col-center {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden; }
  .redesign-header .redesign-header-links-col.redesign-header-links-col-right {
    flex: 0 0 auto; }
  .redesign-header .redesign-header-nav {
    display: table; }
    .redesign-header .redesign-header-nav ul.redesign-header-nav-list {
      display: table-cell;
      vertical-align: middle;
      padding: 0;
      margin: 0;
      list-style: none;
      font-weight: regular; }
      .redesign-header .redesign-header-nav ul.redesign-header-nav-list li.redesign-header-nav-list-item {
        display: inline-block;
        margin: 0 8px; }
        .redesign-header .redesign-header-nav ul.redesign-header-nav-list li.redesign-header-nav-list-item a, .redesign-header .redesign-header-nav ul.redesign-header-nav-list li.redesign-header-nav-list-item span {
          text-transform: uppercase;
          text-decoration: none;
          cursor: pointer; }
        .redesign-header .redesign-header-nav ul.redesign-header-nav-list li.redesign-header-nav-list-item a:hover {
          text-decoration: underline; }
        .redesign-header .redesign-header-nav ul.redesign-header-nav-list li.redesign-header-nav-list-item .redesign-header-country-flag {
          display: inline-block;
          margin: 0 0 0 5px; }
          .redesign-header .redesign-header-nav ul.redesign-header-nav-list li.redesign-header-nav-list-item .redesign-header-country-flag img {
            margin: -2px 0 0 0;
            border: 1px solid #bababa; }
  .redesign-header .redesign-header-user {
    font-weight: bold;
    margin-right: 5px;
    padding-left: 30px;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    width: 100%; }
  .redesign-header li.dropdown {
    position: relative;
    overflow: visible;
    text-align: left; }
    .redesign-header li.dropdown .dropdown-caret {
      display: inline-block;
      vertical-align: middle;
      margin-top: -3px;
      background-repeat: no-repeat;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gcG9pbnRzPSIyMCwzMS4yNSAzMS4yNSwxMy43NSA4Ljc1LDEzLjc1ICIvPg0KPC9zdmc+DQo=");
      height: 15px;
      width: 15px;
      background-size: 15px;
      background-position: center; }
    .redesign-header li.dropdown ul.dropdown-list {
      display: none;
      list-style: none;
      margin: 7px 0 0 0;
      padding: 18px 18px 16px 18px;
      position: absolute;
      width: 200px;
      z-index: 25;
      background-color: #fff;
      border: 1px solid #bababa;
      overflow: hidden; }
      .redesign-header li.dropdown ul.dropdown-list a {
        display: block; }
      .redesign-header li.dropdown ul.dropdown-list.dropdown-list-align-left {
        left: 0;
        right: inherit; }
      .redesign-header li.dropdown ul.dropdown-list.dropdown-list-align-right {
        left: inherit;
        right: 0; }
    .redesign-header li.dropdown li.dropdown-item {
      list-style: none;
      display: block;
      line-height: 16px;
      margin: 0 0 14px 0; }
      .redesign-header li.dropdown li.dropdown-item:last-child {
        margin: 0; }
    .redesign-header li.dropdown.dropdown-shown ul.dropdown-list {
      display: block; }
    .redesign-header li.dropdown.dropdown-shown:before, .redesign-header li.dropdown.dropdown-shown:after {
      bottom: -8px;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      z-index: 26; }
    .redesign-header li.dropdown.dropdown-shown:before {
      border-bottom-color: #bababa;
      border-width: 8px;
      margin-left: -8px; }
    .redesign-header li.dropdown.dropdown-shown:after {
      border-bottom-color: #fff;
      border-width: 7px;
      margin-left: -7px; }
  .redesign-header .redesign-header-links-col.text-left li.redesign-header-nav-list-item:first-child {
    margin-left: 0; }
  .redesign-header .redesign-header-links-col.text-right .redesign-header-nav {
    width: 100%; }
  .redesign-header .redesign-header-links-col.text-right li.redesign-header-nav-list-item:last-child {
    margin-right: 0; }
  .redesign-header .redesign-header-logo {
    width: 173px;
    height: 45px; }
  .redesign-header #core {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: start; }
  .redesign-header #logo {
    height: 45px; }
    .redesign-header #logo svg {
      width: 173px; }
  .redesign-header #search-bag-wrapper {
    width: 606px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: start; }

.redesign-header.clean .redesign-header-links {
  height: 72px; }

.redesign-header.clean .redesign-header-nav {
  height: 72px; }

.redesign-header.clean .redesign-header-core {
  height: 60px; }

.redesign-header.clean .redesign-header-media a {
  text-decoration: underline; }

.redesign-header.clean .redesign-header-user {
  line-height: 72px; }

.redesign-header.radical .redesign-header-links {
  height: 102px; }

.redesign-header.radical .redesign-header-logo {
  float: left;
  margin: 25px 40px 0 0; }

.redesign-header.radical .redesign-header-radical-category-dropdown {
  width: 232px;
  font-weight: bold;
  border: 1px solid #696969;
  text-align: left; }
  .redesign-header.radical .redesign-header-radical-category-dropdown .redesign-header-category-dropdown-label {
    height: 35px;
    line-height: 35px;
    padding-left: 15px;
    font-size: 16px;
    white-space: nowrap;
    cursor: default; }
    .redesign-header.radical .redesign-header-radical-category-dropdown .redesign-header-category-dropdown-label span {
      cursor: default; }
  .redesign-header.radical .redesign-header-radical-category-dropdown .redesign-header-category-dropdown-list {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    top: 34px;
    font-size: 16px; }
  .redesign-header.radical .redesign-header-radical-category-dropdown .redesign-header-category-dropdown-caret {
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: -3px 0 0 0;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4wLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4wIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBvbHlnb24gcG9pbnRzPSIyMCwzMS4yNSAzMS4yNSwxMy43NSA4Ljc1LDEzLjc1ICIvPg0KPC9zdmc+DQo=");
    height: 15px;
    width: 15px;
    background-size: 15px;
    background-position: center; }
  .redesign-header.radical .redesign-header-radical-category-dropdown.dropdown-shown ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px; }
  .redesign-header.radical .redesign-header-radical-category-dropdown.dropdown-shown ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
  .redesign-header.radical .redesign-header-radical-category-dropdown.dropdown-shown .redesign-header-category-dropdown-list {
    display: block; }
  .redesign-header.radical .redesign-header-radical-category-dropdown.animated-show .redesign-header-category-dropdown-list {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: cleanSlide;
    animation-name: cleanSlide;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  .redesign-header.radical .redesign-header-radical-category-dropdown.animated-show .redesign-header-category-dropdown-caret {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: cleanRotate;
    animation-name: cleanRotate;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  .redesign-header.radical .redesign-header-radical-category-dropdown.animated-hide .redesign-header-category-dropdown-list {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: cleanSlideToTop;
    animation-name: cleanSlideToTop;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }
  .redesign-header.radical .redesign-header-radical-category-dropdown.animated-hide .redesign-header-category-dropdown-caret {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: cleanRotateBack;
    animation-name: cleanRotateBack;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease; }

.redesign-header.radical .redesign-header-nav {
  padding-top: 10px;
  height: 102px; }

.redesign-header.radical .redesign-header-links-col-left .redesign-header-nav {
  float: left; }

.redesign-header.radical .redesign-header-core {
  position: relative;
  height: 35px;
  margin-bottom: 20px; }

.redesign-header.radical .redesign-header-media a {
  text-decoration: underline; }

.redesign-header.radical .redesign-header-user {
  line-height: 112px; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
.bagItem {
  /* Grid HTML Classes */
  /* Typography resets */
  /* Default Link Styles */
  /* Default paragraph styles */
  /* Default header styles */
  /* Helpful Typography Defaults */
  /* Lists */
  /* Unordered Lists */
  /* Ordered Lists */
  /* Definition Lists */
  /* Abbreviations */
  /* Blockquotes */
  /* Microformats */
  /*
     * Print styles.
     *
     * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
     * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
    */ }
  .bagItem .row {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
    *zoom: 1; }
    .bagItem .row:before, .bagItem .row:after {
      content: " ";
      display: table; }
    .bagItem .row:after {
      clear: both; }
    .bagItem .row.collapse .column,
    .bagItem .row.collapse .columns {
      padding-left: 0;
      padding-right: 0;
      float: left; }
    .bagItem .row .row {
      margin-left: -0.03125em;
      margin-right: -0.03125em;
      max-width: none;
      width: auto;
      *zoom: 1; }
      .bagItem .row .row:before, .bagItem .row .row:after {
        content: " ";
        display: table; }
      .bagItem .row .row:after {
        clear: both; }
      .bagItem .row .row.collapse {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
        width: auto;
        *zoom: 1; }
        .bagItem .row .row.collapse:before, .bagItem .row .row.collapse:after {
          content: " ";
          display: table; }
        .bagItem .row .row.collapse:after {
          clear: both; }
  .bagItem .column,
  .bagItem .columns {
    padding-left: 0.03125em;
    padding-right: 0.03125em;
    width: 100%;
    float: left;
    position: relative; }
  @media only screen {
    .bagItem .small-1 {
      width: 6.25%; }
    .bagItem .small-2 {
      width: 12.5%; }
    .bagItem .small-3 {
      width: 18.75%; }
    .bagItem .small-4 {
      width: 25%; }
    .bagItem .small-5 {
      width: 31.25%; }
    .bagItem .small-6 {
      width: 37.5%; }
    .bagItem .small-7 {
      width: 43.75%; }
    .bagItem .small-8 {
      width: 50%; }
    .bagItem .small-9 {
      width: 56.25%; }
    .bagItem .small-10 {
      width: 62.5%; }
    .bagItem .small-11 {
      width: 68.75%; }
    .bagItem .small-12 {
      width: 75%; }
    .bagItem .small-13 {
      width: 81.25%; }
    .bagItem .small-14 {
      width: 87.5%; }
    .bagItem .small-15 {
      width: 93.75%; }
    .bagItem .small-16 {
      width: 100%; }
    .bagItem .small-offset-0 {
      margin-left: 0%; }
    .bagItem .small-offset-1 {
      margin-left: 6.25%; }
    .bagItem .small-offset-2 {
      margin-left: 12.5%; }
    .bagItem .small-offset-3 {
      margin-left: 18.75%; }
    .bagItem .small-offset-4 {
      margin-left: 25%; }
    .bagItem .small-offset-5 {
      margin-left: 31.25%; }
    .bagItem .small-offset-6 {
      margin-left: 37.5%; }
    .bagItem .small-offset-7 {
      margin-left: 43.75%; }
    .bagItem .small-offset-8 {
      margin-left: 50%; }
    .bagItem .small-offset-9 {
      margin-left: 56.25%; }
    .bagItem .small-offset-10 {
      margin-left: 62.5%; }
    .bagItem .small-offset-11 {
      margin-left: 68.75%; }
    .bagItem .small-offset-12 {
      margin-left: 75%; }
    .bagItem .small-offset-13 {
      margin-left: 81.25%; }
    .bagItem .small-offset-14 {
      margin-left: 87.5%; }
    .bagItem [class*="column"] + [class*="column"]:last-child {
      float: right; }
    .bagItem [class*="column"] + [class*="column"].end {
      float: left; }
    .bagItem .column.small-centered,
    .bagItem .columns.small-centered {
      margin-left: auto;
      margin-right: auto;
      float: none !important; } }
  @media only screen and (min-width: 600px) {
    .bagItem .medium-1 {
      width: 6.25%; }
    .bagItem .medium-2 {
      width: 12.5%; }
    .bagItem .medium-3 {
      width: 18.75%; }
    .bagItem .medium-4 {
      width: 25%; }
    .bagItem .medium-5 {
      width: 31.25%; }
    .bagItem .medium-6 {
      width: 37.5%; }
    .bagItem .medium-7 {
      width: 43.75%; }
    .bagItem .medium-8 {
      width: 50%; }
    .bagItem .medium-9 {
      width: 56.25%; }
    .bagItem .medium-10 {
      width: 62.5%; }
    .bagItem .medium-11 {
      width: 68.75%; }
    .bagItem .medium-12 {
      width: 75%; }
    .bagItem .medium-13 {
      width: 81.25%; }
    .bagItem .medium-14 {
      width: 87.5%; }
    .bagItem .medium-15 {
      width: 93.75%; }
    .bagItem .medium-16 {
      width: 100%; }
    .bagItem .medium-offset-0 {
      margin-left: 0%; }
    .bagItem .medium-offset-1 {
      margin-left: 6.25%; }
    .bagItem .medium-offset-2 {
      margin-left: 12.5%; }
    .bagItem .medium-offset-3 {
      margin-left: 18.75%; }
    .bagItem .medium-offset-4 {
      margin-left: 25%; }
    .bagItem .medium-offset-5 {
      margin-left: 31.25%; }
    .bagItem .medium-offset-6 {
      margin-left: 37.5%; }
    .bagItem .medium-offset-7 {
      margin-left: 43.75%; }
    .bagItem .medium-offset-8 {
      margin-left: 50%; }
    .bagItem .medium-offset-9 {
      margin-left: 56.25%; }
    .bagItem .medium-offset-10 {
      margin-left: 62.5%; }
    .bagItem .medium-offset-11 {
      margin-left: 68.75%; }
    .bagItem .medium-offset-12 {
      margin-left: 75%; }
    .bagItem .medium-offset-13 {
      margin-left: 81.25%; }
    .bagItem .medium-offset-14 {
      margin-left: 87.5%; }
    .bagItem .medium-offset-15 {
      margin-left: 93.75%; }
    .bagItem .medium-push-1 {
      left: 6.25%;
      right: auto; }
    .bagItem .medium-pull-1 {
      right: 6.25%;
      left: auto; }
    .bagItem .medium-push-2 {
      left: 12.5%;
      right: auto; }
    .bagItem .medium-pull-2 {
      right: 12.5%;
      left: auto; }
    .bagItem .medium-push-3 {
      left: 18.75%;
      right: auto; }
    .bagItem .medium-pull-3 {
      right: 18.75%;
      left: auto; }
    .bagItem .medium-push-4 {
      left: 25%;
      right: auto; }
    .bagItem .medium-pull-4 {
      right: 25%;
      left: auto; }
    .bagItem .medium-push-5 {
      left: 31.25%;
      right: auto; }
    .bagItem .medium-pull-5 {
      right: 31.25%;
      left: auto; }
    .bagItem .medium-push-6 {
      left: 37.5%;
      right: auto; }
    .bagItem .medium-pull-6 {
      right: 37.5%;
      left: auto; }
    .bagItem .medium-push-7 {
      left: 43.75%;
      right: auto; }
    .bagItem .medium-pull-7 {
      right: 43.75%;
      left: auto; }
    .bagItem .medium-push-8 {
      left: 50%;
      right: auto; }
    .bagItem .medium-pull-8 {
      right: 50%;
      left: auto; }
    .bagItem .medium-push-9 {
      left: 56.25%;
      right: auto; }
    .bagItem .medium-pull-9 {
      right: 56.25%;
      left: auto; }
    .bagItem .medium-push-10 {
      left: 62.5%;
      right: auto; }
    .bagItem .medium-pull-10 {
      right: 62.5%;
      left: auto; }
    .bagItem .medium-push-11 {
      left: 68.75%;
      right: auto; }
    .bagItem .medium-pull-11 {
      right: 68.75%;
      left: auto; }
    .bagItem .medium-push-12 {
      left: 75%;
      right: auto; }
    .bagItem .medium-pull-12 {
      right: 75%;
      left: auto; }
    .bagItem .medium-push-13 {
      left: 81.25%;
      right: auto; }
    .bagItem .medium-pull-13 {
      right: 81.25%;
      left: auto; }
    .bagItem .medium-push-14 {
      left: 87.5%;
      right: auto; }
    .bagItem .medium-pull-14 {
      right: 87.5%;
      left: auto; }
    .bagItem .medium-push-15 {
      left: 93.75%;
      right: auto; }
    .bagItem .medium-pull-15 {
      right: 93.75%;
      left: auto; }
    .bagItem .column.medium-centered,
    .bagItem .columns.medium-centered {
      margin-left: auto;
      margin-right: auto;
      float: none !important; }
    .bagItem .column.medium-uncentered,
    .bagItem .columns.medium-uncentered {
      margin-left: 0;
      margin-right: 0;
      float: left !important; } }
  @media only screen and (min-width: 1024px) {
    .bagItem .large-1 {
      width: 6.25%; }
    .bagItem .large-2 {
      width: 12.5%; }
    .bagItem .large-3 {
      width: 18.75%; }
    .bagItem .large-4 {
      width: 25%; }
    .bagItem .large-5 {
      width: 31.25%; }
    .bagItem .large-6 {
      width: 37.5%; }
    .bagItem .large-7 {
      width: 43.75%; }
    .bagItem .large-8 {
      width: 50%; }
    .bagItem .large-9 {
      width: 56.25%; }
    .bagItem .large-10 {
      width: 62.5%; }
    .bagItem .large-11 {
      width: 68.75%; }
    .bagItem .large-12 {
      width: 75%; }
    .bagItem .large-13 {
      width: 81.25%; }
    .bagItem .large-14 {
      width: 87.5%; }
    .bagItem .large-15 {
      width: 93.75%; }
    .bagItem .large-16 {
      width: 100%; }
    .bagItem .large-offset-0 {
      margin-left: 0%; }
    .bagItem .large-offset-1 {
      margin-left: 6.25%; }
    .bagItem .large-offset-2 {
      margin-left: 12.5%; }
    .bagItem .large-offset-3 {
      margin-left: 18.75%; }
    .bagItem .large-offset-4 {
      margin-left: 25%; }
    .bagItem .large-offset-5 {
      margin-left: 31.25%; }
    .bagItem .large-offset-6 {
      margin-left: 37.5%; }
    .bagItem .large-offset-7 {
      margin-left: 43.75%; }
    .bagItem .large-offset-8 {
      margin-left: 50%; }
    .bagItem .large-offset-9 {
      margin-left: 56.25%; }
    .bagItem .large-offset-10 {
      margin-left: 62.5%; }
    .bagItem .large-offset-11 {
      margin-left: 68.75%; }
    .bagItem .large-offset-12 {
      margin-left: 75%; }
    .bagItem .large-offset-13 {
      margin-left: 81.25%; }
    .bagItem .large-offset-14 {
      margin-left: 87.5%; }
    .bagItem .large-offset-15 {
      margin-left: 93.75%; }
    .bagItem .large-push-1 {
      left: 6.25%;
      right: auto; }
    .bagItem .large-pull-1 {
      right: 6.25%;
      left: auto; }
    .bagItem .large-push-2 {
      left: 12.5%;
      right: auto; }
    .bagItem .large-pull-2 {
      right: 12.5%;
      left: auto; }
    .bagItem .large-push-3 {
      left: 18.75%;
      right: auto; }
    .bagItem .large-pull-3 {
      right: 18.75%;
      left: auto; }
    .bagItem .large-push-4 {
      left: 25%;
      right: auto; }
    .bagItem .large-pull-4 {
      right: 25%;
      left: auto; }
    .bagItem .large-push-5 {
      left: 31.25%;
      right: auto; }
    .bagItem .large-pull-5 {
      right: 31.25%;
      left: auto; }
    .bagItem .large-push-6 {
      left: 37.5%;
      right: auto; }
    .bagItem .large-pull-6 {
      right: 37.5%;
      left: auto; }
    .bagItem .large-push-7 {
      left: 43.75%;
      right: auto; }
    .bagItem .large-pull-7 {
      right: 43.75%;
      left: auto; }
    .bagItem .large-push-8 {
      left: 50%;
      right: auto; }
    .bagItem .large-pull-8 {
      right: 50%;
      left: auto; }
    .bagItem .large-push-9 {
      left: 56.25%;
      right: auto; }
    .bagItem .large-pull-9 {
      right: 56.25%;
      left: auto; }
    .bagItem .large-push-10 {
      left: 62.5%;
      right: auto; }
    .bagItem .large-pull-10 {
      right: 62.5%;
      left: auto; }
    .bagItem .large-push-11 {
      left: 68.75%;
      right: auto; }
    .bagItem .large-pull-11 {
      right: 68.75%;
      left: auto; }
    .bagItem .large-push-12 {
      left: 75%;
      right: auto; }
    .bagItem .large-pull-12 {
      right: 75%;
      left: auto; }
    .bagItem .large-push-13 {
      left: 81.25%;
      right: auto; }
    .bagItem .large-pull-13 {
      right: 81.25%;
      left: auto; }
    .bagItem .large-push-14 {
      left: 87.5%;
      right: auto; }
    .bagItem .large-pull-14 {
      right: 87.5%;
      left: auto; }
    .bagItem .large-push-15 {
      left: 93.75%;
      right: auto; }
    .bagItem .large-pull-15 {
      right: 93.75%;
      left: auto; }
    .bagItem .column.large-centered,
    .bagItem .columns.large-centered {
      margin-left: auto;
      margin-right: auto;
      float: none !important; }
    .bagItem .column.large-uncentered,
    .bagItem .columns.large-uncentered {
      margin-left: 0;
      margin-right: 0;
      float: left !important; } }
  .bagItem .row .row {
    margin-top: 0;
    margin-bottom: 0; }
  .bagItem p.lead {
    font-size: 1.21875em;
    line-height: 1.6; }
  .bagItem .subheader {
    line-height: 1.4;
    color: #6f6f6f;
    font-weight: 300;
    margin-top: 0.2em;
    margin-bottom: 0.5em; }
  .bagItem div,
  .bagItem dl,
  .bagItem dt,
  .bagItem dd,
  .bagItem ul,
  .bagItem ol,
  .bagItem li,
  .bagItem h1,
  .bagItem h2,
  .bagItem h3,
  .bagItem h4,
  .bagItem h5,
  .bagItem h6,
  .bagItem pre,
  .bagItem form,
  .bagItem p,
  .bagItem blockquote,
  .bagItem th,
  .bagItem td {
    margin: 0;
    padding: 0;
    direction: ltr; }
  .bagItem a {
    color: #333;
    text-decoration: none;
    line-height: inherit; }
    .bagItem a:hover, .bagItem a:focus {
      color: #262626; }
    .bagItem a img {
      border: none; }
  .bagItem p {
    font-family: inherit;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1.25em;
    text-rendering: optimizeLegibility; }
    .bagItem p aside {
      font-size: 0.875em;
      line-height: 1.35;
      font-style: italic; }
  .bagItem h1, .bagItem h2, .bagItem h3, .bagItem h4, .bagItem h5, .bagItem h6 {
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #222;
    text-rendering: optimizeLegibility;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    line-height: 1.2125em; }
    .bagItem h1 small, .bagItem h2 small, .bagItem h3 small, .bagItem h4 small, .bagItem h5 small, .bagItem h6 small {
      font-size: 60%;
      color: #6f6f6f;
      line-height: 0; }
  .bagItem h1 {
    font-size: 2.125em; }
  .bagItem h2 {
    font-size: 1.6875em; }
  .bagItem h3 {
    font-size: 1.375em; }
  .bagItem h4 {
    font-size: 1.125em; }
  .bagItem h5 {
    font-size: 1.125em; }
  .bagItem h6 {
    font-size: 1em; }
  .bagItem hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 1.25em 0 1.1875em;
    height: 0; }
  .bagItem em,
  .bagItem i {
    font-style: italic;
    line-height: inherit; }
  .bagItem strong,
  .bagItem b {
    font-weight: bold;
    line-height: inherit; }
  .bagItem small {
    font-size: 60%;
    line-height: inherit; }
  .bagItem code {
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    font-weight: bold;
    color: #a8101c; }
  .bagItem ul,
  .bagItem ol,
  .bagItem dl {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 1.25em;
    list-style-position: outside;
    font-family: inherit; }
  .bagItem ul, .bagItem ol {
    margin-left: 0; }
    .bagItem ul.no-bullet, .bagItem ol.no-bullet {
      margin-left: 0; }
  .bagItem ul li ul,
  .bagItem ul li ol {
    margin-left: 1.25em;
    margin-bottom: 0;
    font-size: 1em;
    /* Override nested font-size change */ }
  .bagItem ul.square li ul, .bagItem ul.circle li ul, .bagItem ul.disc li ul {
    list-style: inherit; }
  .bagItem ul.square {
    list-style-type: square; }
  .bagItem ul.circle {
    list-style-type: circle; }
  .bagItem ul.disc {
    list-style-type: disc; }
  .bagItem ul.no-bullet {
    list-style: none; }
  .bagItem ol li ul,
  .bagItem ol li ol {
    margin-left: 1.25em;
    margin-bottom: 0; }
  .bagItem dl dt {
    margin-bottom: 0.3em;
    font-weight: bold; }
  .bagItem dl dd {
    margin-bottom: 0.75em; }
  .bagItem abbr,
  .bagItem acronym {
    text-transform: uppercase;
    font-size: 90%;
    color: #333;
    border-bottom: 1px dotted #ddd;
    cursor: help; }
  .bagItem abbr {
    text-transform: none; }
  .bagItem blockquote {
    margin: 0 0 1.25em;
    padding: 0.5625em 1.25em 0 1.1875em;
    border-left: 1px solid #ddd; }
    .bagItem blockquote cite {
      display: block;
      font-size: 0.8125em;
      color: #555555; }
      .bagItem blockquote cite:before {
        content: "\2014    "; }
      .bagItem blockquote cite a,
      .bagItem blockquote cite a:visited {
        color: #555555; }
  .bagItem blockquote,
  .bagItem blockquote p {
    line-height: 1.6;
    color: #6f6f6f; }
  .bagItem .vcard {
    display: inline-block;
    margin: 0 0 1.25em 0;
    border: 1px solid #ddd;
    padding: 0.625em 0.75em; }
    .bagItem .vcard li {
      margin: 0;
      display: block; }
    .bagItem .vcard .fn {
      font-weight: bold;
      font-size: 0.9375em; }
  .bagItem .vevent .summary {
    font-weight: bold; }
  .bagItem .vevent abbr {
    cursor: default;
    text-decoration: none;
    font-weight: bold;
    border: none;
    padding: 0 0.0625em; }
  @media only screen and (min-width: 600px) {
    .bagItem h1, .bagItem h2, .bagItem h3, .bagItem h4, .bagItem h5, .bagItem h6 {
      line-height: 1.4; }
    .bagItem h1 {
      font-size: 2.75em; }
    .bagItem h2 {
      font-size: 2.3125em; }
    .bagItem h3 {
      font-size: 1.6875em; }
    .bagItem h4 {
      font-size: 1.4375em; } }
  .bagItem .print-only {
    display: none !important; }
  @media print {
    .bagItem * {
      background: transparent !important;
      color: #000 !important;
      /* Black prints faster: h5bp.com/s */
      box-shadow: none !important;
      text-shadow: none !important; }
    .bagItem a,
    .bagItem a:visited {
      text-decoration: underline; }
    .bagItem a[href]:after {
      content: " (" attr(href) ")"; }
    .bagItem abbr[title]:after {
      content: " (" attr(title) ")"; }
    .bagItem .ir a:after,
    .bagItem a[href^="javascript:"]:after,
    .bagItem a[href^="#"]:after {
      content: ""; }
    .bagItem pre,
    .bagItem blockquote {
      border: 1px solid #999;
      page-break-inside: avoid; }
    .bagItem thead {
      display: table-header-group;
      /* h5bp.com/t */ }
    .bagItem tr,
    .bagItem img {
      page-break-inside: avoid; }
    .bagItem img {
      max-width: 100% !important; }
    @page {
      .bagItem {
        margin: 0.5cm; } }
    .bagItem p,
    .bagItem h2,
    .bagItem h3 {
      orphans: 3;
      widows: 3; }
    .bagItem h2,
    .bagItem h3 {
      page-break-after: avoid; }
    .bagItem .hide-on-print {
      display: none !important; }
    .bagItem .print-only {
      display: block !important; }
    .bagItem .hide-for-print {
      display: none !important; }
    .bagItem .show-for-print {
      display: inherit !important; } }

a[href]:after {
  content: none; }

/*************
 quickBag REST classes, should remove above classes once this is 100%
**************/
body.noQuickBag #quickBagHeader.quickBagFlyoutHeader:hover,
body.noQuickBag #quickBagHeader.quickBagFlyoutHeader.hover,
body.noQuickBag #quickBagHeader {
  border: 1px solid #fff !important; }

#quickBagHeader.quickBagFlyoutHeader {
  height: 43px;
  position: relative;
  right: -8px;
  top: 20px;
  width: 159px;
  border: 1px solid #fff;
  transition: border-color 1.5s ease-out; }
  #quickBagHeader.quickBagFlyoutHeader:after {
    background: url("/web20/assets/img/nav/global-icons.png") no-repeat -160px -2px;
    content: " ";
    display: block;
    height: 67px;
    position: absolute;
    right: 5px;
    top: -22px;
    width: 45px;
    z-index: 21; }
  #quickBagHeader.quickBagFlyoutHeader #checkoutLink {
    text-decoration: none;
    z-index: 23;
    outline: none;
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    font-size: 14px;
    line-height: 20px;
    padding-left: 28px;
    padding-top: 12px;
    text-transform: capitalize; }
    #quickBagHeader.quickBagFlyoutHeader #checkoutLink #itemCount {
      bottom: -0.6rem;
      left: -1.8rem;
      width: 30px;
      height: 30px;
      z-index: 20; }
  #quickBagHeader.quickBagFlyoutHeader:hover, #quickBagHeader.quickBagFlyoutHeader.hover {
    border: 1px solid #ccc;
    border-bottom-color: #fff; }
    #quickBagHeader.quickBagFlyoutHeader:hover .quickBagFlyout, #quickBagHeader.quickBagFlyoutHeader.hover .quickBagFlyout {
      border: 1px solid #ccc;
      max-height: 452px; }
  #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout {
    background: #fff;
    position: absolute;
    right: -1px;
    top: 42px;
    width: 460px;
    z-index: 20;
    max-height: 0;
    overflow: hidden;
    border: 1px solid #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    -webkit-transition: max-height 1.5s, border-color 1.5s;
    transition: max-height 1.5s, border-color 1.5s;
    font-family: helvetica, sans-serif; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .zeroItemCount {
      height: 40px;
      font-size: 12px;
      font-family: helvetica, sans-serif;
      vertical-align: middle;
      text-align: center;
      line-height: 40px; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .loadingErrorContainer {
      font-family: arial, helvetica, sans-serif;
      line-height: 14px;
      padding: 10px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .loadingErrorContainer .errorText {
        color: #cc0000;
        font-size: 9pt;
        box-sizing: content-box;
        font-weight: bold; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .loadingErrorContainer .loadingErrorIcon {
        display: inline-block;
        float: left;
        margin-left: 20px; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout div.badges {
      margin-left: 0px;
      color: #cc0000; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout div.badges div {
        font-size: 12px;
        line-height: 12px;
        padding-bottom: 5px;
        color: #cc0000;
        font-weight: bold; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout div.errors {
      margin-left: 0px;
      margin-bottom: 5px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout div.errors .errorMessage {
        font-size: 12px;
        line-height: 12px;
        padding-bottom: 5px;
        color: #cc0000;
        font-weight: bold; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .errorMessageIcon {
      position: relative;
      top: 2px;
      display: inline-block; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout ul.bagItems {
      max-width: 458px;
      max-height: 312px;
      margin: 0;
      list-style-type: none;
      overflow: auto;
      padding-left: 0px; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .lamBag {
      background: #F29A20;
      width: 92%;
      font-size: 10px;
      padding: 4px 0px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 2px; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem {
      border-bottom: 1px solid #ccc;
      position: relative;
      padding: 10px 10px 0 10px;
      max-height: 300px;
      transition: max-height 1s; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .registryDetails {
        line-height: 26px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem span.regItemText {
        color: #707070;
        line-height: 13px;
        font-size: 14px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .medium-offset-1 {
        margin-left: inherit !important; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .productImage {
        width: 75px;
        height: 94px;
        border: 1px solid #eee; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .swatchImage {
        background-color: #fff;
        border: 1px solid #eee;
        position: absolute;
        bottom: 0px;
        right: 6px;
        width: 19px;
        height: 19px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .description {
        font-size: 12px;
        font-weight: bold;
        color: #000;
        line-height: 14px; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .description a {
          text-decoration: none; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .description p {
          font-weight: bold; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .description p.bagItemUPC {
          color: #666;
          margin-bottom: 0px; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .description span.sizeColorType {
          color: #000; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem div.pricing {
        list-style-type: none;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        color: #000;
        text-align: right;
        overflow: hidden;
        margin: 0;
        line-height: 13px; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem div.pricing .salePrice {
          color: #cc0000; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem p.itemQuantity {
        text-transform: none;
        text-align: right;
        margin: 0;
        font-weight: bold;
        line-height: 14px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .itemAction {
        visibility: hidden;
        padding: 0 0 10px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .giftCardEmail {
        padding: 0;
        margin-bottom: 10px;
        float: right;
        line-height: 24px;
        font-size: 14px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem p.lowAvailibilityMessage {
        font-size: 12px;
        line-height: 12px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .promoDesc {
        color: #cc0000;
        font-style: italic;
        font-size: 14px;
        line-height: 14px; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem .promoDesc .promoPrice {
          font-style: normal;
          font-weight: bold;
          display: inline;
          white-space: nowrap;
          color: #cc0000;
          padding-left: 0px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem button.button-remove {
        top: 10px;
        font: 700 10.3px "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem:hover {
      background: #EDEDED; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .bagItem:hover .itemAction {
        visibility: visible; }
    #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom {
      background-color: #eee;
      text-align: center;
      position: relative;
      bottom: 0;
      width: 100%;
      padding: 0 10px 10px 10px;
      font-family: helvetica, sans-serif;
      font-size: 14px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .bagPromoDesc {
        color: #cc0000;
        font-style: italic;
        font-size: 14px;
        line-height: 14px;
        padding: 3px 10px 3px 10px;
        border-top: 1px dashed #000;
        margin: 0 5px 0 5px;
        width: auto;
        text-align: left; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .bagPromoDesc .promoPrice {
          font-style: normal;
          font-weight: bold;
          display: inline;
          white-space: nowrap;
          color: #cc0000;
          padding-left: 0px;
          text-transform: capitalize; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .quickBagAdContent {
        padding-top: 10px; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .quickBagAdContent .qbPromoAd {
          text-align: center; }
          #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .quickBagAdContent .qbPromoAd img {
            width: 310px;
            height: 73px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .mMoney-container {
        background-color: #fff;
        text-align: left;
        width: 20rem;
        padding: 1rem;
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1rem; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .mMoney-info {
        position: relative; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .mMoney-container p {
        line-height: 1.1rem;
        margin: 0; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .mMoney-container p:first-of-type {
        font-weight: bold;
        color: #cc0000; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .info-icon {
        position: absolute;
        top: 18%;
        right: -2%; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .mMoney-tiny {
        background: url("/bagapp/web20/assets/img/bag/usl-sprite.png") no-repeat 0px -72px transparent;
        width: 50px;
        height: 30px;
        margin-right: 10px;
        margin-top: 2px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom #quickBagYouSavedTotal {
        color: #cc0000;
        white-space: normal;
        display: inline-block;
        text-transform: capitalize;
        padding-top: 10px; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom #quickBagSubTotal {
        white-space: nowrap;
        font-weight: bold;
        padding-left: 15px;
        text-transform: capitalize;
        padding-top: 10px;
        display: inline-block; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom #quickBagSubTotal a {
          font-weight: normal;
          text-decoration: underline;
          outline: none; }
      #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .checkoutButton {
        padding: 10px 10px 0 10px; }
        #quickBagHeader.quickBagFlyoutHeader .quickBagFlyout .quickBagBottom .checkoutButton .quickbagCheckoutButton {
          font: bold 9.1px "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
  #quickBagHeader.quickBagFlyoutHeader .hide-for-screenreader,
  #quickBagHeader.quickBagFlyoutHeader .hidden-for-small-up {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); }
meta.foundation-mq-small {
  font-family: "only screen and (min-width: 768px)";
  width: 768px; }

meta.foundation-mq-medium {
  font-family: "only screen and (min-width:1280px)";
  width: 1280px; }

meta.foundation-mq-large {
  font-family: "only screen and (min-width:1440px)";
  width: 1440px; }

#bagContents > div #items > ul {
  padding-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px; }
  #bagContents > div #items > ul li {
    border-bottom: 1px solid #CCC;
    list-style: none;
    margin: 0px;
    padding: 0px;
    height: auto;
    max-height: 300px; }
    #bagContents > div #items > ul li:hover {
      background-color: #EDEDED; }
      #bagContents > div #items > ul li:hover .itemCommandButtons > div {
        display: block; }
    #bagContents > div #items > ul li > div {
      *zoom: 1; }
      #bagContents > div #items > ul li > div:before, #bagContents > div #items > ul li > div:after {
        content: " ";
        display: table; }
      #bagContents > div #items > ul li > div:after {
        clear: both; }
    #bagContents > div #items > ul li:last-child {
      border-bottom: 0px solid; }
    #bagContents > div #items > ul li .thumbnail {
      display: inline-block;
      padding: 10px;
      text-align: left;
      line-height: 14px;
      vertical-align: top; }
      #bagContents > div #items > ul li .thumbnail img {
        width: 77px;
        height: 94px;
        border: 1px solid #E2E2E2; }
    #bagContents > div #items > ul li .details {
      width: 340px;
      display: inline-block;
      padding-top: 10px;
      padding-right: 10px; }
      #bagContents > div #items > ul li .details a {
        text-decoration: none;
        font-size: 12px; }
      #bagContents > div #items > ul li .details > div:first-child {
        *zoom: 1; }
        #bagContents > div #items > ul li .details > div:first-child:before, #bagContents > div #items > ul li .details > div:first-child:after {
          content: " ";
          display: table; }
        #bagContents > div #items > ul li .details > div:first-child:after {
          clear: both; }
        #bagContents > div #items > ul li .details > div:first-child > .left {
          max-width: 180px;
          font-size: 12px;
          font-weight: 700;
          line-height: 14px; }
        #bagContents > div #items > ul li .details > div:first-child > .right {
          *zoom: 1;
          max-width: 135px;
          text-transform: uppercase;
          text-align: right;
          overflow: hidden;
          font-family: helvetica, sans-serif;
          font-size: 14px;
          font-weight: bold; }
          #bagContents > div #items > ul li .details > div:first-child > .right:before, #bagContents > div #items > ul li .details > div:first-child > .right:after {
            content: " ";
            display: table; }
          #bagContents > div #items > ul li .details > div:first-child > .right:after {
            clear: both; }
          #bagContents > div #items > ul li .details > div:first-child > .right .sale {
            color: red; }
    #bagContents > div #items > ul li .promoDesc {
      font-size: 14px;
      font-style: italic;
      color: #F00;
      line-height: 1; }
    #bagContents > div #items > ul li .promoPrice {
      font-size: 12px;
      font-style: normal;
      font-weight: bold;
      display: inline;
      white-space: nowrap;
      color: #F00;
      padding-left: 0;
      line-height: 1; }
    #bagContents > div #items > ul li .itemCommandButtons {
      margin-top: 10px;
      height: 46px;
      padding-right: 5px;
      padding-left: 5px; }
      #bagContents > div #items > ul li .itemCommandButtons a {
        font-size: 10px !important;
        text-decoration: none; }
      #bagContents > div #items > ul li .itemCommandButtons div {
        display: none;
        width: 49%; }

#bagContents > div #summary > div {
  padding-top: 10px;
  text-align: center;
  background-color: #CCC; }
  #bagContents > div #summary > div #totalSaved {
    color: red; }
  #bagContents > div #summary > div > div:last-child {
    padding-top: 10px; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].default {
  height: 212px;
  background: url("/navapp/web20/assets/img/nav/header-bottom-gradient.png") no-repeat center bottom;
  min-width: 1024px; }
  header[data-uri].default span {
    font-family: Helvetica, Arial, sans-serif;
    font-size: inherit;
    line-height: inherit; }
  header[data-uri].default > #core {
    height: 85px;
    margin-top: 7px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 960px; }
    header[data-uri].default > #core > #logo {
      display: inline-block;
      width: 300px;
      margin-top: 5px;
      padding-left: 0.5px;
      padding-right: 0.5px; }
      header[data-uri].default > #core > #logo svg {
        width: 91%; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  header[data-uri] > #core > #logo {
    height: 77px; } }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
header[data-uri].default #subnavContainer {
  padding: 0px;
  width: 960px;
  margin: 0 auto;
  list-style-type: none;
  height: 37px;
  display: block; }
  header[data-uri].default #subnavContainer li {
    padding-right: 15px;
    padding-top: 4px;
    list-style: none;
    line-height: 1.2; }
    header[data-uri].default #subnavContainer li #globalMastheadFeatureMenuWeddingRegistry {
      font-weight: bold; }
    header[data-uri].default #subnavContainer li a {
      display: block;
      color: #000;
      text-decoration: none;
      font-style: Italic;
      padding-top: 5px;
      font-size: 14px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
      header[data-uri].default #subnavContainer li a.imagesubnav {
        padding-top: 0; }
    header[data-uri].default #subnavContainer li.subnavMedia, header[data-uri].default #subnavContainer li.subnavMedia > a {
      padding-top: 0px !important; }
#dropDownABTest {
  padding-right: 16px;
  padding-bottom: 5px;
  background: url("/images/dropdown_active.svg");
  background-repeat: no-repeat;
  background-position: 114% 0px;
  width: auto; }
  #dropDownABTest > a {
    background: none; }
  #dropDownABTest ul {
    display: none;
    margin: 5px 0 0 0;
    padding: 0;
    background-image: none;
    width: 200px;
    height: auto;
    position: absolute;
    z-index: 999999;
    border: 1px solid #999;
    background-color: #fff; }
    #dropDownABTest ul:before, #dropDownABTest ul:after {
      bottom: 100%;
      left: 20%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none; }
    #dropDownABTest ul:before {
      border-color: rgba(169, 169, 169, 0);
      border-bottom-color: #999;
      border-width: 8px;
      margin-left: -8px; }
    #dropDownABTest ul:after {
      border-color: rgba(242, 242, 242, 0);
      border-bottom-color: #fff;
      border-width: 7px;
      margin-left: -7px; }
    #dropDownABTest ul li {
      float: none;
      display: block;
      margin: 5px 0 5px 0;
      background: none;
      padding: 0px; }
      #dropDownABTest ul li a {
        display: block;
        margin: 0;
        padding: 0 5px 0 5px;
        background: none; }
      #dropDownABTest ul li:hover {
        text-decoration: none; }
  #dropDownABTest:hover ul {
    display: block; }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
.ui-dialog {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  padding: 2em;
  outline: 0;
  -webkit-box-shadow: 0px 0px 4px 0px #999999;
  -moz-box-shadow: 0px 0px 4px 0px #999999;
  box-shadow: 0px 0px 4px 0px #999999;
  background-color: #fff; }
  .ui-dialog .ui-dialog-titlebar {
    padding: 0 0 0 0;
    position: relative;
    background-color: #fff;
    margin: 0 0 0 1.2em; }
    .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close {
      position: absolute;
      right: 1em;
      padding: 0;
      top: 50%;
      margin: -2.2em -2.55em 0 0;
      border: none;
      background: url("/images/icons/icons-sprite-medium.png") no-repeat;
      background-position: 0px -19px;
      width: 20px;
      height: 20px;
      background-size: 20px; }
      .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close span:first-child {
        display: inline-block; }
      .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close .ui-button-text {
        display: none; }
      .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close:focus {
        outline: none; }
      .ui-dialog .ui-dialog-titlebar button.ui-dialog-titlebar-close:hover {
        background-position: 0px -39px; }
    .ui-dialog .ui-dialog-titlebar span.ui-dialog-title {
      float: left;
      padding: 0;
      white-space: nowrap;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      font: 1.5em Helvetica, arial, sans-serif;
      color: #cc0000; }
  .ui-dialog.ui-dialog-no-title .ui-dialog-titlebar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
  .ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: 0.875em 1.25em 1.25em;
    background: none;
    overflow: auto; }
    .ui-dialog .ui-dialog-content .standard-form {
      margin: 0em; }
      .ui-dialog .ui-dialog-content .standard-form textarea {
        width: 100%; }
      .ui-dialog .ui-dialog-content .standard-form textarea, .ui-dialog .ui-dialog-content .standard-form input, .ui-dialog .ui-dialog-content .standard-form select ~ button, .ui-dialog .ui-dialog-content .standard-form .button {
        margin-top: 0.5em; }
    .ui-dialog .ui-dialog-content p {
      margin: 1em 0 2em 0;
      line-height: 1.25em; }
  .ui-dialog.ui-dialog-no-title .ui-dialog-content {
    padding-top: 0; }
  .ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 0.0625em 0 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em; }
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right; }
  .ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer; }
  .ui-dialog .ui-resizable-se {
    width: 0.75em;
    height: 0.75em;
    right: -0.3125em;
    bottom: -0.3125em;
    background-position: 1em 1em; }

.svg .ui-dialog-titlebar-close {
  background-position: 0px -19px;
  background-size: 20px; }

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -moz-opacity: 0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85);
  filter: alpha(opacity=85);
  opacity: 0.85;
  /* CSS3 standard */
  -moz-opacity: 0.85;
  /* for older gecko browsers */ }

header[data-uri].default > #topnav {
  background: #f2f2f2; }
  header[data-uri].default > #topnav > div {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    height: 42px; }
    header[data-uri].default > #topnav > div > ul {
      padding: 0px;
      /*MMOIR Changed --> width: $width-global-container;*/
      max-width: 960px;
      margin: 0px auto;
      display: block; }
      header[data-uri].default > #topnav > div > ul > li {
        list-style: none;
        padding-left: 10px; }
        header[data-uri].default > #topnav > div > ul > li.left {
          padding-top: 6px;
          padding-left: 0px; }
        header[data-uri].default > #topnav > div > ul > li.right {
          padding-top: 2px; }
        header[data-uri].default > #topnav > div > ul > li:first-child {
          padding-left: 0px; }
        header[data-uri].default > #topnav > div > ul > li.bold {
          font-weight: 700; }
        header[data-uri].default > #topnav > div > ul > li a {
          text-decoration: none;
          text-transform: capitalize;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 14px;
          line-height: 25px;
          padding: 0px;
          font-weight: normal;
          margin: 2 2 2 0px; }
          header[data-uri].default > #topnav > div > ul > li a:hover {
            text-decoration: underline; }
          header[data-uri].default > #topnav > div > ul > li a#globalMastheadUserSalutation {
            text-decoration: none;
            cursor: default;
            text-transform: capitalize;
            font-weight: bold; }
        header[data-uri].default > #topnav > div > ul > li > .right {
          margin-top: 3px; }
        header[data-uri].default > #topnav > div > ul > li:not(:first-child) a {
          padding-left: 14px; }
        header[data-uri].default > #topnav > div > ul > li .topReviewer {
          background: url("/navapp/web20/assets/img/nav/stars-dynamic.png") 0 0 repeat-x;
          display: inline-block;
          width: 75px;
          height: 14px;
          vertical-align: bottom;
          margin-left: 5px;
          margin-top: 4px;
          margin-bottom: 6px; }
          header[data-uri].default > #topnav > div > ul > li .topReviewer span {
            background: url("/navapp/web20/assets/img/nav/stars-dynamic.png") 0 -14px repeat-x;
            display: inline-block;
            height: 14px;
            vertical-align: top; }
          header[data-uri].default > #topnav > div > ul > li .topReviewer:hover .topReviewerPopUp {
            display: block; }
  header[data-uri].default > #topnav .topReviewerPopUp {
    position: relative;
    border: 1px solid #dedede;
    background-color: #fff;
    width: 342px;
    display: none;
    -webkit-box-shadow: 1px 1px 2px #dedede;
    -moz-box-shadow: 1px 1px 2px #dedede;
    box-shadow: 1px 1px 2px #dedede;
    font-family: Avenir, sans-serif;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    top: -25px;
    z-index: 1000;
    left: 76px; }
    header[data-uri].default > #topnav .topReviewerPopUp strong {
      color: #cc0000; }
    header[data-uri].default > #topnav .topReviewerPopUp:after, header[data-uri].default > #topnav .topReviewerPopUp:before {
      right: 100%;
      top: 50%;
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none; }
    header[data-uri].default > #topnav .topReviewerPopUp:after {
      border-right-color: #fff;
      border-width: 8px;
      margin-top: -8px; }
    header[data-uri].default > #topnav .topReviewerPopUp:before {
      border-right-color: #dedede;
      border-width: 9px;
      margin-top: -9px; }
  header[data-uri].default > #topnav .topReviewerPopUp a {
    color: #cc0000 !important;
    text-decoration: underline !important;
    font-weight: normal;
    font-family: Avenir, sans-serif !important;
    font-size: 12px !important;
    padding: 0 !important; }
  header[data-uri].default > #topnav .topReviewerPopUp a:hover {
    text-decoration: none !important; }
  header[data-uri].default > #topnav ul#topNavAds {
    padding: 0px;
    margin: 0px; }
    header[data-uri].default > #topnav ul#topNavAds li {
      list-style: none; }
    header[data-uri].default > #topnav ul#topNavAds :not(:first-child) {
      display: none; }
  header[data-uri].default > #topnav .countryFlagSpan {
    margin-left: 7px; }
  header[data-uri].default > #topnav .dropDown {
    background: url("/images/dropdown_active.svg");
    background-repeat: no-repeat;
    background-position: 114% 0px;
    padding-right: 19px;
    padding-bottom: 5px; }
    header[data-uri].default > #topnav .dropDown > a {
      background: none; }
    header[data-uri].default > #topnav .dropDown ul {
      display: none;
      margin: 5px 0 0 0;
      padding: 0;
      background-image: none;
      height: auto;
      position: absolute;
      z-index: 99;
      border: 1px solid #999;
      background-color: #fff; }
      header[data-uri].default > #topnav .dropDown ul:before, header[data-uri].default > #topnav .dropDown ul:after {
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        left: 0px;
        /*overwrite this value to center it*/ }
      header[data-uri].default > #topnav .dropDown ul:before {
        border-color: rgba(169, 169, 169, 0);
        border-bottom-color: #999;
        border-width: 8px;
        margin-left: -8px; }
      header[data-uri].default > #topnav .dropDown ul:after {
        border-color: rgba(242, 242, 242, 0);
        border-bottom-color: #fff;
        border-width: 7px;
        margin-left: -7px; }
      header[data-uri].default > #topnav .dropDown ul li {
        float: none;
        display: block;
        margin: 5px 0 5px 0;
        background: none;
        padding: 0px; }
        header[data-uri].default > #topnav .dropDown ul li a {
          display: block;
          margin: 0;
          padding: 0 14px;
          background: none; }
        header[data-uri].default > #topnav .dropDown ul li:hover {
          text-decoration: none; }
    header[data-uri].default > #topnav .dropDown:hover ul {
      display: block; }
  header[data-uri].default > #topnav .dropDown.stores > ul:before, header[data-uri].default > #topnav .dropDown.stores > ul:after {
    left: 35px; }

body.mcomOverlayAppointmentDialogNoScroll {
  overflow: hidden; }

.mcomOverlayAppointmentDialog .ui-dialog-content.ui-widget-content {
  padding: 0;
  min-height: 645px !important;
  width: 100% !important; }

.scrollableOverlay {
  height: 100%;
  width: 100%;
  overflow: auto;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  background: rgba(255, 255, 255, 0.3); }

.scrollableOverlay .mcomOverlayAppointmentDialog {
  position: relative !important; }

.m-appointment-scheduling-timetrade-container {
  width: 100%;
  min-height: 640px; }
@charset "UTF-8";
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
footer[data-uri] {
  /* modify column widths directly */
  background-color: #EBEBEB;
  height: auto; }
  footer[data-uri] .hnfFooterTop {
    height: 5px;
    background: url("/web20/assets/img/nav/footer_top_gradient.jpg") no-repeat top center;
    margin-bottom: 15px; }
  footer[data-uri] .hnfFooterBottom {
    height: 5px;
    background: url("/web20/assets/img/nav/footer_bottom_gradient.jpg") no-repeat bottom center; }
  footer[data-uri] #globalBodyFooterBannerContent {
    width: 900px;
    margin: 0.625rem auto;
    background-color: transparent;
    border: 0px; }
  footer[data-uri] img#footerFlag {
    width: auto !important; }
  footer[data-uri] #stores {
    width: 150px;
    padding: 0 0.5px; }
  footer[data-uri] #storesIntl {
    width: 141.28px;
    margin-right: 18px;
    padding: 0 0.5px; }
  footer[data-uri] #macysinc {
    margin-left: -8px;
    width: 75px;
    padding: 0 0.5px; }
  footer[data-uri] #macysincIntl {
    width: 101.72px;
    padding-left: 22px;
    padding-right: 0.5px; }
  footer[data-uri] #stayconnected {
    width: 174px;
    padding-left: 32px;
    padding-right: 0.5px;
    margin-right: 21px; }
  footer[data-uri] #stayconnectedIntl {
    width: 235.47px;
    padding-left: 66px;
    padding-right: 0.5px; }
  footer[data-uri] #media {
    width: 187.5px;
    float: left;
    text-align: left;
    padding-left: 10px;
    padding-right: 0.5px; }
    footer[data-uri] #media a.title {
      font-size: 11px;
      font-weight: bold; }
  footer[data-uri] #mediaIntl {
    width: 235.47px;
    float: left;
    padding-left: 31px;
    padding-right: 0.5px; }
    footer[data-uri] #mediaIntl a.title {
      font-size: 11px;
      font-weight: bold; }
  footer[data-uri] div#footer-ad-spot {
    width: 209px;
    height: 61px; }
  footer[data-uri] #footer-panel-wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    display: flex !important;
    /* needed to override macys-base because we want to remove responsivness per story B-79025 */
    flex-direction: row; }
  footer[data-uri] #leftPanel {
    margin-left: -5px;
    width: 360px; }
  footer[data-uri] #leftPanelIntl {
    margin-left: -5px;
    width: 180px; }
  footer[data-uri] #leftPanel-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: start; }
  footer[data-uri] #customerService {
    margin-right: -18px;
    margin-left: 6px;
    width: 180px; }
  footer[data-uri] #creditCard {
    float: left;
    width: 131.312px; }
  footer[data-uri] div#webAccessbility {
    width: auto;
    margin-left: 0px;
    margin-right: auto;
    position: relative;
    top: 7px;
    right: 3px;
    float: left; }
    footer[data-uri] div#webAccessbility a {
      display: block;
      position: relative;
      z-index: 102;
      outline: none; }
  footer[data-uri] div#easyBrowsing {
    width: 720px;
    height: 26px;
    margin-right: auto;
    position: relative;
    top: 7px; }
  footer[data-uri] #rightPanel {
    margin-left: -30px;
    width: 600px; }
  footer[data-uri] #rightPanelIntl {
    padding-left: 27px;
    padding-right: 0.5px;
    width: 780px; }
  footer[data-uri] #rightPanel-wrapper {
    margin-left: -0.5px;
    margin-right: -0.5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
  footer[data-uri] .legal a {
    margin-right: 10px;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif; }
  footer[data-uri] label {
    font-weight: bold;
    font-size: 12px;
    line-height: 1.625em; }
  footer[data-uri] .row {
    max-width: 960px; }
  footer[data-uri] .clear {
    clear: left; }
  footer[data-uri] a {
    color: #333;
    text-decoration: none; }
  footer[data-uri] a:hover {
    text-decoration: underline; }
  footer[data-uri] ul {
    padding-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px; }
    footer[data-uri] ul li {
      text-decoration: none;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.625em;
      font-size: 12px;
      list-style: none !important;
      text-align: left; }
      footer[data-uri] ul li.title {
        float: none; }
      footer[data-uri] ul li .social {
        margin-right: 3px; }
      footer[data-uri] ul li.social {
        height: auto;
        padding-right: 0px; }
      footer[data-uri] ul li.mobileapps {
        margin-top: 10px;
        width: 120px; }
        footer[data-uri] ul li.mobileapps div.mobileapps {
          background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -2px -133px;
          float: left;
          height: 28px;
          margin-left: 3px;
          width: 15px; }
        footer[data-uri] ul li.mobileapps div.text {
          float: left;
          padding-left: 5px;
          padding-top: 4px;
          width: 70px; }
      footer[data-uri] ul li.email {
        margin-top: 10px;
        width: 140px; }
        footer[data-uri] ul li.email div.email {
          background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -2px -117px;
          float: left;
          height: 16px;
          margin-top: 5px;
          width: 24px; }
        footer[data-uri] ul li.email div.text {
          float: left;
          padding-left: 5px;
          padding-top: 2px;
          width: 100px;
          font-family: Helvetica, Arial, sans-serif; }
      footer[data-uri] ul li a {
        color: #333 !important;
        text-decoration: none;
        line-height: inherit;
        font-size: 11px; }
        footer[data-uri] ul li a.title {
          font-size: 12px; }
      footer[data-uri] ul li div.mblog {
        background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -2px -72px; }
  footer[data-uri] .copyright {
    max-width: inherit;
    text-align: center;
    background-color: #FFFFFF;
    padding-top: 10px; }
    footer[data-uri] .copyright div {
      width: 960px;
      margin-left: auto;
      margin-right: auto; }
    footer[data-uri] .copyright p {
      font-size: 11px;
      font-family: Helvetica, Arial, sans-serif;
      line-height: 14px;
      margin: 0;
      color: #333 !important; }
  footer[data-uri] .accessible {
    padding-bottom: 10px;
    height: 70px;
    float: none;
    margin-top: -10px;
    width: 960px;
    margin-left: auto;
    margin-right: auto; }
    footer[data-uri] .accessible .accessibilityLogo {
      display: inline-block;
      background-image: url("/web20/assets/img/nav/global-icons.png");
      background-repeat: no-repeat;
      background-position: -28px -2px;
      width: 124px;
      height: 25px; }
    footer[data-uri] .accessible .link {
      color: #333;
      font-size: 11px;
      padding-left: 20px;
      text-decoration: none;
      float: left;
      margin-top: 4px;
      font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
  footer[data-uri] .icon-social-facebook-large {
    width: 25px;
    height: 25px; }
  footer[data-uri] .icon-social-twitter-large {
    width: 25px;
    height: 25px; }
  footer[data-uri] .icon-social-pinterest-large {
    width: 25px;
    height: 25px; }
  footer[data-uri] .icon-social-youtube-large {
    width: 25px;
    height: 25px; }
  footer[data-uri] .icon-social-mblog-large {
    width: 25px;
    height: 25px; }
  footer[data-uri] .social-mblog {
    background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -2px -66px;
    background-size: 950px;
    height: 21px;
    width: 23px;
    padding-right: 2px;
    display: inline-block; }
  footer[data-uri] .base-mobile {
    background: url("/navapp/web20/assets/img/nav/global-icons.png") no-repeat -2px -133px;
    height: 28px;
    width: 20px;
    display: inline-block;
    float: left; }
  footer[data-uri].default {
    margin: 15px auto 100px;
    min-width: 1024px;
    width: 100%; }
  footer[data-uri].compact {
    background-color: #ffffff;
    margin-top: 5px;
    padding-bottom: .625em;
    text-align: center;
    padding-top: .9375em;
    text-align: left; }
    footer[data-uri].compact .row {
      max-width: inherit; }
    footer[data-uri].compact .footerrow {
      border-top: 2px solid grey;
      padding-top: 10px; }
    footer[data-uri].compact li {
      font-size: 16px; }
    footer[data-uri].compact .m-section-get-app {
      border-right: 2px solid #000; }
    footer[data-uri].compact .m-footer-button {
      padding-bottom: 54px; }
    footer[data-uri].compact .m-section {
      padding-left: 20px; }
    footer[data-uri].compact a#m-footer-button-find-store {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      display: block;
      height: 40px;
      width: 200px;
      margin: auto;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDg4cHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMCAwIDQ4OCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDg4IDgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjQzLjk5OTUiIHkxPSIxIiB4Mj0iMjQzLjk5OTUiIHkyPSI3OS4wMDA1Ij4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojQ0MwMDAwIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6Izk5MDAwMCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTQ4Ni44NTcsNzFjMCw0LjQxOC0zLjU4Miw4LTgsOEg5LjE0Mw0KCWMtNC40MTksMC04LTMuNTgyLTgtOFY5YzAtNC40MTgsMy41ODEtOCw4LThoNDY5LjcxNWM0LjQxOCwwLDgsMy41ODIsOCw4VjcxeiIvPg0KPGc+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEzOS43MjQsMjcuNDIxaDEzLjEyM3YzLjUzNWgtOS4xMTFWMzguM2g4Ljk3NXYzLjUwMWgtOC45NzV2MTAuNzc3aC00LjAxMlYyNy40MjF6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE1NS44MDYsMjcuNDIxaDQuMDEydjI1LjE1N2gtNC4wMTJWMjcuNDIxeiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xODAuODI3LDQ2LjU2MWwtMC4wNjgtMTkuMTRoMy44NzZ2MjUuMTU3aC0zLjY3MmwtMTMuMTU2LTE5LjE3NGwwLjA2OCwxOS4xNzRoLTMuODc2VjI3LjQyMWgzLjc3Mw0KCQlMMTgwLjgyNyw0Ni41NjF6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE4OC44MTgsMjcuNDIxaDcuNzg1YzMuMzY2LDAsNy41NDgsMC41MSwxMC4zMzUsNC4wNzljMS45MDQsMi4yNzcsMi43NTQsNS4xNjgsMi43NTQsOC40NjUNCgkJYzAsNy4zNDQtMy45NzgsMTIuNjEzLTEyLjgxNiwxMi42MTNoLTguMDU4VjI3LjQyMXogTTE5Mi44Myw0OS4wNDNoNC4yNWM1LjkxNSwwLDguNjM1LTMuNzczLDguNjM1LTkuMDENCgkJYzAtMi40MTQtMC42NDYtNC43MjYtMi4wNC02LjQyNmMtMS4zMjUtMS41MjktMy4zMzEtMi42NTEtNi41NjEtMi42NTFoLTQuMjg0VjQ5LjA0M3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIyLjg1Myw1Mi41NzhoLTQuMzUybDEwLjMzNS0yNS4xNTdoMy42MzhsMTAuMTY1LDI1LjE1N2gtNC4zNTJsLTIuMzgtNS45NDloLTEwLjc0M0wyMjIuODUzLDUyLjU3OHoNCgkJIE0yMzAuNTAyLDMyLjA3OGwtNC4yNSwxMS4zMmg4LjU2N0wyMzAuNTAyLDMyLjA3OHoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjU2LjcxNyw0NS4xMzNjMC4yNzEsMy43NzMsMi45MjQsNC41MjEsNC4yNDksNC41MjFjMi4yNDQsMCw0LjE4Mi0xLjc2OCw0LjE4Mi00LjAxMg0KCQljMC0yLjc4Ny0yLjM4LTMuNDM0LTUuNjA5LTQuNjIzYy0xLjk3Mi0wLjY0Ni02LjM1Ny0yLjEwNy02LjM1Ny02LjgzNGMtMC4wMzQtNC42OTEsMy45NzgtNy4yNCw3LjkyMS03LjI0DQoJCWMzLjIzLDAsNy4yNzUsMS43NjgsNy41ODIsNi45MzVoLTMuOTQzYy0wLjI3Mi0xLjM2LTAuODg1LTMuNTM2LTMuNzc0LTMuNTM2Yy0yLjA0LDAtMy44MDgsMS4zOTUtMy44MDgsMy41MzYNCgkJYzAsMi40NDgsMS44NywzLjA2LDUuOTE2LDQuNTU2YzMuMTI3LDEuMzI2LDYuMDUxLDIuOTI0LDYuMDUxLDcuMDA0YzAsNC4wNzktMi43NTQsNy42MTUtOC4xMjUsNy42MTUNCgkJYy00Ljk5OCwwLTguMTkzLTMuMDYxLTguMjYyLTcuOTIySDI1Ni43MTd6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI3NS41ODYsMzAuOTU2aC01Ljc3OXYtMy41MzVoMTUuNTd2My41MzVoLTUuNzc5djIxLjYyMmgtNC4wMTJWMzAuOTU2eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yODQuODAxLDQwLjEzNWMwLTcuOTIsNi4wODUtMTMuMTg5LDEzLjE1Ni0xMy4xODljNy41MTQsMCwxMy4xOSw1LjgxMiwxMy4xOSwxMy4wNTUNCgkJYzAsNy4yNC01LjY3NywxMy4wNTUtMTMuMjI1LDEzLjA1NWMtNy41ODEsMC0xMy4xMjItNS45NS0xMy4xMjItMTIuODg1VjQwLjEzNXogTTI4OC43NzcsNDBjMCw1LjIzNCwzLjg3Niw5LjUxOSw5LjI0OCw5LjUxOQ0KCQljNS40NzMsMCw5LjExLTQuNTksOS4xMS05LjQ4NWMwLTQuOTMtMy42MzgtOS41NTMtOS4xNDYtOS41NTNjLTUuNDczLDAtOS4yMTMsNC40Mi05LjIxMyw5LjQ4NFY0MHoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzE0LjA0LDI3LjQyMWg3LjEwNWMzLjk0NCwwLDUuOTgzLDAuNTQ0LDcuMzEsMS40NjJjMi4wNzQsMS4zNTksMy4zMzIsMy45NzgsMy4zMzIsNi43OTkNCgkJYzAsMS43NjgtMC41MTEsMy40NjgtMS40MjksNC43OTRjLTEuMjkxLDEuODAyLTIuOTIzLDIuNDEzLTQuODYxLDIuNzUzbDUuOTE2LDkuMzVoLTQuMjVsLTYuOTAxLTExLjM1NWgwLjg4NA0KCQljMS43MzQsMCwzLjg0Mi0wLjA2Nyw1LjAzMi0xLjA4OGMxLjE1NS0xLjAyLDEuNzMzLTIuNDgsMS43MzMtNC4xMTNjMC0xLjY5OS0wLjgxNi0zLjM2NS0yLjE0Mi00LjI0OQ0KCQljLTEuMDg4LTAuNjgxLTIuNDgyLTAuODE2LTQuMjg0LTAuODE2aC0zLjQzNHYyMS42MjJoLTQuMDEyVjI3LjQyMXoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzM0LjIwMiwyNy40MjFoMTQuMDc0djMuNTM1aC0xMC4wNjJ2Ny4xNGg5LjkyN3YzLjUwMmgtOS45Mjd2Ny40NDVoMTAuMDYydjMuNTM1aC0xNC4wNzRWMjcuNDIxeiIvPg0KPC9nPg0KPC9zdmc+"); }
    footer[data-uri].compact a#m-footer-button-deals {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      display: block;
      height: 40px;
      width: 200px;
      margin: auto;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDg4cHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMCAwIDQ4OCA4MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDg4IDgwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjQzLjk5OTUiIHkxPSIxIiB4Mj0iMjQzLjk5OTUiIHkyPSI3OS4wMDA1Ij4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRjFGMkYyIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0JDQkVDMCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBzdHJva2U9IiM2NjY2NjYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTQ4Ni44NTcsNzFjMCw0LjQxOC0zLjU4Miw4LTgsOEg5LjE0Mg0KCWMtNC40MTgsMC04LTMuNTgyLTgtOFY5YzAtNC40MTgsMy41ODItOCw4LThoNDY5LjcxNWM0LjQxOCwwLDgsMy41ODIsOCw4VjcxeiIvPg0KPHBhdGggZmlsbD0ibm9uZSIgZD0iTTQ4Ni44NTgsNzFjMCw0LjQxOC0zLjU4Miw4LTgsOEg5LjE0M2MtNC40MTgsMC04LTMuNTgyLTgtOFY5YzAtNC40MTgsMy41ODItOCw4LThoNDY5LjcxNg0KCWM0LjQxOCwwLDgsMy41ODIsOCw4VjcxeiIvPg0KPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA2Mi40MDc3IDUyLjE2NikiIGRpc3BsYXk9Im5vbmUiIGZpbGw9IiNDQzAwMDAiIGZvbnQtZmFtaWx5PSInSVRDQXZhbnRHYXJkZVN0ZC1NZCciIGZvbnQtc2l6ZT0iMzQiPkRFQUxTICZhbXA7IFBST01PVElPTlM8L3RleHQ+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjQ0MwMDAwIiBkPSJNNjQuODkxLDI3LjQyMWg3Ljc4NWMzLjM2NSwwLDcuNTQ3LDAuNTEsMTAuMzM1LDQuMDc5YzEuOTAzLDIuMjc4LDIuNzU0LDUuMTY4LDIuNzU0LDguNDY1DQoJCWMwLDcuMzQzLTMuOTc4LDEyLjYxMi0xMi44MTcsMTIuNjEyaC04LjA1N1YyNy40MjF6IE02OC45MDIsNDkuMDQzaDQuMjQ5YzUuOTE2LDAsOC42MzYtMy43NzMsOC42MzYtOS4wMDkNCgkJYzAtMi40MTQtMC42NDYtNC43MjYtMi4wNC02LjQyNWMtMS4zMjYtMS41My0zLjMzMi0yLjY1Mi02LjU2Mi0yLjY1MmgtNC4yODNWNDkuMDQzeiIvPg0KCTxwYXRoIGZpbGw9IiNDQzAwMDAiIGQ9Ik04OC44MjYsMjcuNDIxaDE0LjA3NXYzLjUzNUg5Mi44Mzh2Ny4xNGg5LjkyOHYzLjUwMWgtOS45Mjh2Ny40NDVoMTAuMDYzdjMuNTM1SDg4LjgyNlYyNy40MjF6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTEwOC42MTQsNTIuNTc4aC00LjM1MmwxMC4zMzUtMjUuMTU3aDMuNjM4TDEyOC40LDUyLjU3OGgtNC4zNTJsLTIuMzgtNS45NDloLTEwLjc0M0wxMDguNjE0LDUyLjU3OHoNCgkJIE0xMTYuMjY0LDMyLjA3OWwtNC4yNSwxMS4zMjFoOC41NjdMMTE2LjI2NCwzMi4wNzl6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTEzMC41MSwyNy40MjFoNC4wMTJ2MjEuNjIyaDguODczdjMuNTM1SDEzMC41MVYyNy40MjF6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTE0OC4wMiw0NS4xMzNjMC4yNzEsMy43NzMsMi45MjQsNC41MjEsNC4yNDksNC41MjFjMi4yNDQsMCw0LjE4Mi0xLjc2OCw0LjE4Mi00LjAxMg0KCQljMC0yLjc4Ny0yLjM3OS0zLjQzNC01LjYwOS00LjYyM2MtMS45NzItMC42NDYtNi4zNTctMi4xMDctNi4zNTctNi44MzNjLTAuMDMzLTQuNjkxLDMuOTc4LTcuMjQxLDcuOTIyLTcuMjQxDQoJCWMzLjIyOSwwLDcuMjc1LDEuNzY4LDcuNTgxLDYuOTM1aC0zLjk0M2MtMC4yNzItMS4zNi0wLjg4NC0zLjUzNi0zLjc3NC0zLjUzNmMtMi4wMzksMC0zLjgwOCwxLjM5NC0zLjgwOCwzLjUzNg0KCQljMCwyLjQ0OCwxLjg3LDMuMDYsNS45MTYsNC41NTZjMy4xMjgsMS4zMjYsNi4wNTEsMi45MjMsNi4wNTEsNy4wMDNzLTIuNzUzLDcuNjE1LTguMTI1LDcuNjE1Yy00Ljk5NywwLTguMTkzLTMuMDYxLTguMjYxLTcuOTIyDQoJCUgxNDguMDJ6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTE5My41NzcsMzcuMzE0bC00LjMxNyw4LjE5NGw1LjAzMSw1LjEzM2wtMi40NDcsMi4zOGwtNC40ODctNC42MjRjLTEuMzYsMi42MTgtMy4yOTgsNC42NTgtNy4zNDQsNC42NTgNCgkJYy00Ljk2NCwwLTguMDU4LTMuMzY1LTguMDU4LTcuMTc0YzAtNC4wNDUsMy4zMzItNi4xNTMsNS41NzYtNy4zNDNjLTEuNy0xLjgwMi0yLjgyMi0zLjQzNC0yLjg5LTUuNjA5DQoJCWMwLTMuMjk4LDIuNzItNS45ODMsNi4yMjEtNS45ODNjMy41MzYsMCw2LjE1MywyLjY4Niw2LjE1Myw1Ljg4MWMwLDMuMzY2LTIuNTgzLDQuODYxLTQuNDg3LDUuODgxbDQuMzUyLDQuNDE5bDIuOTU4LTUuODEzDQoJCUgxOTMuNTc3eiBNMTc5Ljc0MSw0MC43NDhjLTIuNzg4LDEuMzk0LTMuOTEsMi45OTMtMy45MSw0LjgyOGMwLDIuMjQzLDEuODAyLDQuMDc5LDQuMzE3LDQuMDc5czMuNzA2LTEuMzkzLDQuODI4LTMuNTY4DQoJCUwxNzkuNzQxLDQwLjc0OHogTTE4MC44NjIsMjkuOTM3Yy0xLjYzMiwwLTIuNzIsMS4zMjYtMi43MiwyLjc4OGMwLDEuNzM0LDEuMzI2LDIuOTI0LDIuMzEyLDMuOTc4DQoJCWMyLjA3My0xLjE1NiwzLjI5Ny0yLjAwNiwzLjI5Ny0zLjkxYzAtMS40OTYtMS4xMjEtMi44NTUtMi44NTUtMi44NTVIMTgwLjg2MnoiLz4NCgk8cGF0aCBmaWxsPSIjQ0MwMDAwIiBkPSJNMjEzLjUwMywyNy40MjFjMy45MDksMCw1LjU3NSwwLjUxLDcuMDcxLDEuN2MxLjc2OCwxLjM2LDIuNzg3LDMuNzczLDIuNzg3LDYuMTg3DQoJCWMwLDIuNDE0LTEuMDU0LDQuOTMtMi42MTcsNi4xODhjLTEuNywxLjMyNi0zLjQsMS44NjktNi44NjcsMS44NjloLTMuNTM2djkuMjEzaC00LjAxMlYyNy40MjFIMjEzLjUwM3ogTTIxMC4zNDEsMzkuODNoMy40NjgNCgkJYzEuNTk4LDAsMi44MjEtMC4xNywzLjkwOS0wLjg1YzEuMDIxLTAuNTc4LDEuODAyLTEuOTA0LDEuODAyLTMuNjA0YzAtMS43LTAuNzgxLTIuOTkyLTEuODM1LTMuNjA0DQoJCWMtMS4xMjItMC42OC0yLjM0Ny0wLjgxNi00LjAxMi0wLjgxNmgtMy4zMzJWMzkuODN6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTIyNS4zNjksMjcuNDIxaDcuMTA0YzMuOTQ0LDAsNS45ODMsMC41NDQsNy4zMSwxLjQ2MWMyLjA3NCwxLjM2LDMuMzMyLDMuOTc4LDMuMzMyLDYuNzk5DQoJCWMwLDEuNzY4LTAuNTEsMy40NjgtMS40MjgsNC43OTRjLTEuMjkyLDEuODAxLTIuOTI0LDIuNDE0LTQuODYyLDIuNzUzbDUuOTE2LDkuMzQ5aC00LjI1bC02LjkwMS0xMS4zNTRoMC44ODQNCgkJYzEuNzM0LDAsMy44NDItMC4wNjcsNS4wMzItMS4wODhjMS4xNTUtMS4wMiwxLjczMy0yLjQ4MSwxLjczMy00LjExM2MwLTEuNy0wLjgxNS0zLjM2Ni0yLjE0Mi00LjI1DQoJCWMtMS4wODgtMC42OC0yLjQ4MS0wLjgxNi00LjI4My0wLjgxNmgtMy40MzR2MjEuNjIyaC00LjAxMlYyNy40MjF6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTI0NC40MDgsNDAuMTM2YzAtNy45MjEsNi4wODYtMTMuMTksMTMuMTU3LTEzLjE5YzcuNTEzLDAsMTMuMTksNS44MTMsMTMuMTksMTMuMDU1DQoJCXMtNS42NzgsMTMuMDU1LTEzLjIyNSwxMy4wNTVjLTcuNTgxLDAtMTMuMTIzLTUuOTQ5LTEzLjEyMy0xMi44ODVWNDAuMTM2eiBNMjQ4LjM4Nyw0MGMwLDUuMjM1LDMuODc1LDkuNTIsOS4yNDYsOS41Mg0KCQljNS40NzQsMCw5LjExMS00LjU5LDkuMTExLTkuNDg2YzAtNC45MjktMy42MzgtOS41NTMtOS4xNDUtOS41NTNjLTUuNDc0LDAtOS4yMTMsNC40MTktOS4yMTMsOS40ODVWNDB6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTI3My43ODQsNTIuNTc4VjI3LjQyMWg1LjUwOGw3LjgxOSwxOS40OGw3LjcxNy0xOS40OGg1LjQ3NHYyNS4xNTdoLTMuNzA2bDAuMTAzLTIxLjIxM2wtOC4zMjksMjEuMjEzDQoJCWgtMi42MThsLTguMzI5LTIxLjIxM2wwLjEwMiwyMS4yMTNIMjczLjc4NHoiLz4NCgk8cGF0aCBmaWxsPSIjQ0MwMDAwIiBkPSJNMzAzLjM2NCw0MC4xMzZjMC03LjkyMSw2LjA4NS0xMy4xOSwxMy4xNTctMTMuMTljNy41MTMsMCwxMy4xODksNS44MTMsMTMuMTg5LDEzLjA1NQ0KCQlzLTUuNjc3LDEzLjA1NS0xMy4yMjUsMTMuMDU1Yy03LjU4LDAtMTMuMTIyLTUuOTQ5LTEzLjEyMi0xMi44ODVWNDAuMTM2eiBNMzA3LjM0Miw0MGMwLDUuMjM1LDMuODc1LDkuNTIsOS4yNDcsOS41Mg0KCQljNS40NzQsMCw5LjExLTQuNTksOS4xMS05LjQ4NmMwLTQuOTI5LTMuNjM3LTkuNTUzLTkuMTQ1LTkuNTUzYy01LjQ3MywwLTkuMjEzLDQuNDE5LTkuMjEzLDkuNDg1VjQweiIvPg0KCTxwYXRoIGZpbGw9IiNDQzAwMDAiIGQ9Ik0zMzQuOTE2LDMwLjk1N2gtNS43Nzl2LTMuNTM1aDE1LjU3djMuNTM1aC01Ljc3OXYyMS42MjJoLTQuMDEyVjMwLjk1N3oiLz4NCgk8cGF0aCBmaWxsPSIjQ0MwMDAwIiBkPSJNMzQ2LjcxMywyNy40MjFoNC4wMTJ2MjUuMTU3aC00LjAxMlYyNy40MjF6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTM1My43ODUsNDAuMTM2YzAtNy45MjEsNi4wODYtMTMuMTksMTMuMTU3LTEzLjE5YzcuNTEzLDAsMTMuMTksNS44MTMsMTMuMTksMTMuMDU1DQoJCXMtNS42NzgsMTMuMDU1LTEzLjIyNSwxMy4wNTVjLTcuNTgxLDAtMTMuMTIzLTUuOTQ5LTEzLjEyMy0xMi44ODVWNDAuMTM2eiBNMzU3Ljc2NCw0MGMwLDUuMjM1LDMuODc1LDkuNTIsOS4yNDYsOS41Mg0KCQljNS40NzQsMCw5LjExMS00LjU5LDkuMTExLTkuNDg2YzAtNC45MjktMy42MzgtOS41NTMtOS4xNDUtOS41NTNjLTUuNDc0LDAtOS4yMTMsNC40MTktOS4yMTMsOS40ODVWNDB6Ii8+DQoJPHBhdGggZmlsbD0iI0NDMDAwMCIgZD0iTTM5OS45OSw0Ni41NjFsLTAuMDY4LTE5LjEzOWgzLjg3NXYyNS4xNTdoLTMuNjcybC0xMy4xNTYtMTkuMTczbDAuMDY4LDE5LjE3M2gtMy44NzZWMjcuNDIxaDMuNzc0DQoJCUwzOTkuOTksNDYuNTYxeiIvPg0KCTxwYXRoIGZpbGw9IiNDQzAwMDAiIGQ9Ik00MTAuNzAxLDQ1LjEzM2MwLjI3MSwzLjc3MywyLjkyNCw0LjUyMSw0LjI0OSw0LjUyMWMyLjI0NCwwLDQuMTgyLTEuNzY4LDQuMTgyLTQuMDEyDQoJCWMwLTIuNzg3LTIuMzgtMy40MzQtNS42MDktNC42MjNjLTEuOTcyLTAuNjQ2LTYuMzU3LTIuMTA3LTYuMzU3LTYuODMzYy0wLjAzNC00LjY5MSwzLjk3OC03LjI0MSw3LjkyMS03LjI0MQ0KCQljMy4yMywwLDcuMjc1LDEuNzY4LDcuNTgyLDYuOTM1aC0zLjk0M2MtMC4yNzItMS4zNi0wLjg4NS0zLjUzNi0zLjc3NC0zLjUzNmMtMi4wNCwwLTMuODA4LDEuMzk0LTMuODA4LDMuNTM2DQoJCWMwLDIuNDQ4LDEuODcsMy4wNiw1LjkxNiw0LjU1NmMzLjEyNywxLjMyNiw2LjA1MSwyLjkyMyw2LjA1MSw3LjAwM3MtMi43NTQsNy42MTUtOC4xMjUsNy42MTVjLTQuOTk4LDAtOC4xOTMtMy4wNjEtOC4yNjItNy45MjINCgkJSDQxMC43MDF6Ii8+DQo8L2c+DQo8L3N2Zz4NCg=="); }
    footer[data-uri].compact .m-footer-img-iphone {
      height: 67px;
      width: 35px;
      margin-bottom: 5px;
      margin: auto;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwJSIgdmlld0JveD0iMCAwIDYwIDExMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjAgMTEzIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiMwMjAyMDIiIGQ9Ik00OS44NzYsMC4xMzVIMTAuMTI0Yy00Ljg4LDAtOC44MzUsMy45NTUtOC44MzUsOC44MzR2OTUuMDYzYzAsNC44NzksMy45NTUsOC44MzIsOC44MzUsOC44MzJoMzkuNzUyDQoJYzQuODc5LDAsOC44MzUtMy45NTMsOC44MzUtOC44MzJWOC45N0M1OC43MTEsNC4wOSw1NC43NTUsMC4xMzUsNDkuODc2LDAuMTM1IE0yNS42NTUsOS41MDloOC42ODhjMC42NDksMCwxLjE3NywwLjUyNiwxLjE3NywxLjE3Ng0KCWMwLDAuNjUxLTAuNTI2LDEuMTc3LTEuMTc3LDEuMTc3aC04LjY4OGMtMC42NSwwLTEuMTc4LTAuNTI2LTEuMTc4LTEuMTc3QzI0LjQ3OCwxMC4wMzUsMjUuMDA1LDkuNTA5LDI1LjY1NSw5LjUwOSBNMjAuNTkyLDkuMDU4DQoJYzAuNzczLDAsMS40MDIsMC42MjgsMS40MDIsMS40MDNjMCwwLjc3NC0wLjYyOSwxLjQwMi0xLjQwMiwxLjQwMmMtMC43NzUsMC0xLjQwMy0wLjYyNy0xLjQwMy0xLjQwMg0KCUMxOS4xODgsOS42ODYsMTkuODE3LDkuMDU4LDIwLjU5Miw5LjA1OCBNMzAsMTA4LjFjLTMuMDUsMC01LjUyMi0yLjQ3MS01LjUyMi01LjUyYzAtMy4wNTEsMi40NzMtNS41MjEsNS41MjItNS41MjENCglzNS41MjEsMi40NzEsNS41MjEsNS41MjFDMzUuNTIxLDEwNS42MjksMzMuMDQ5LDEwOC4xLDMwLDEwOC4xIE01NC4yOTIsOTMuMTI3SDUuNzA2VjE5Ljg3NWg0OC41ODZWOTMuMTI3eiIvPg0KPHBvbHlnb24gZmlsbD0iI0NDMDAwMCIgcG9pbnRzPSIzMC4wMTksMzguMjk2IDI1LjY0Niw1MS43MzYgMTEuMzk5LDUxLjczNiAyMi45NCw2MC4wOTIgMTguNTcxLDczLjUzNyAzMC4wMDUsNjUuMjIxIA0KCTQxLjUwNSw3My41NzYgMzcuMTA5LDYwLjA2OCA0OC42LDUxLjczNiAzNC4zOTgsNTEuNzM2ICIvPg0KPC9zdmc+");
      background-repeat: no-repeat; }
    footer[data-uri].compact .m-footer-img-email {
      margin: auto;
      background-repeat: no-repeat;
      height: 34px;
      overflow: hidden;
      text-align: center;
      width: 34px;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwJSIgdmlld0JveD0iMCAwIDYwIDYwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MCA2MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMxNS4xMTA0IiB5MT0iLTMwNS4xMTEzIiB4Mj0iMzE1LjExMDQiIHkyPSItMzY0LjExMDgiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgLTI4NSAtMzA0LjUpIj4NCgk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojOTgxQjFFIi8+DQoJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDMUUyNCIvPg0KPC9saW5lYXJHcmFkaWVudD4NCjxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNNTkuNjEsNTMuNGMwLDMuNDMxLTIuNzc5LDYuMjEtNi4yMDksNi4yMUg2LjgyMWMtMy40MywwLTYuMjEtMi43ODEtNi4yMS02LjIxVjYuODIxDQoJYzAtMy40MjksMi43ODEtNi4yMSw2LjIxLTYuMjFoNDYuNThjMy40MywwLDYuMjA5LDIuNzgyLDYuMjA5LDYuMjFWNTMuNHoiLz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yNS4wMzgsMzAuMTY5bDQuODI3LDQuMTI4bDUuMTAyLTQuMzE2bDIuMDI4LTEuNzE4TDUwLjUxOCwxNi44Mkg5LjQyOEwyMi43NywyOC4yMjlMMjUuMDM4LDMwLjE2OXoNCgkJIE0yOC43NTgsMjIuMTM1bDEuMTA0LTMuMzk1bDEuMTAyLDMuMzk1aDMuNTcxbC0yLjg4OSwyLjA5OWwxLjEwNCwzLjM5NWwtMi44ODctMi4wOTlsLTIuODg5LDIuMDk5bDEuMTA0LTMuMzk1bC0yLjg4OS0yLjA5OQ0KCQlIMjguNzU4eiIvPg0KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOC44OTUsMTkuNTI3IDguODk1LDM5LjcxNyAyMC44ODksMjkuNzg3IAkiLz4NCgk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjM4Ljg3NSwyOS44MiA1MC44MjcsMzkuNzE3IDUwLjgyNywxOS43MDcgCSIvPg0KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjkuODU2LDM3LjQ1NSAyMy4xNTcsMzEuNzI1IDkuMzY2LDQzLjE0MyA1MC44MjcsNDMuMTQzIDUwLjgyNyw0My4xMTUgMzYuODQ4LDMxLjUzOSAJIi8+DQo8L2c+DQo8L3N2Zz4="); }
    footer[data-uri].compact .m-footer-img-sms {
      margin: auto;
      background-repeat: no-repeat;
      height: 34px;
      overflow: hidden;
      text-align: center;
      margin-top: 10px;
      width: 34px;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwJSIgdmlld0JveD0iMCAwIDYwIDYwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2MCA2MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjMxNSIgeTE9Ii0zMDQuNjgxMiIgeDI9IjMxNSIgeTI9Ii0zNjQuMzE4OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAtMjg1IC0zMDQuNSkiPg0KCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiM5ODFCMUUiLz4NCgk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUMxRTI0Ii8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHBhdGggZmlsbD0idXJsKCNTVkdJRF8xXykiIGQ9Ik01OS44Miw1My41NDNjMCwzLjQ2NS0yLjgxMiw2LjI3NS02LjI3OSw2LjI3NUg2LjQ1OGMtMy40NjcsMC02LjI3Ny0yLjgxMi02LjI3Ny02LjI3NVY2LjQ1OA0KCWMwLTMuNDY1LDIuODExLTYuMjc3LDYuMjc3LTYuMjc3aDQ3LjA4M2MzLjQ2OCwwLDYuMjc5LDIuODEyLDYuMjc5LDYuMjc3VjUzLjU0M3oiLz4NCjxnIGlkPSJXb3JsZF9CdWJibGUiPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzAsMTEuMTJjLTExLjU0NiwwLTIwLjkwNiw3LjM5NC0yMC45MDYsMTYuNTEzYzAsNC41NjYsMi4zNDYsOC42OTksNi4xMzgsMTEuNjg4DQoJCQljMC42MDgsMC40NzksMS4yNTQsMC45MywxLjkzNCwxLjM0OGMxLjAxLDAuNjIyLTEuMjI1LDUuOTg2LTMuMyw4LjIxMmM3LjA2MS0xLjEyNiw5LjIyMi01LjYxMiwxMC42NjYtNS4zMDUNCgkJCWMwLjg1NCwwLjE4MiwxLjcyOCwwLjMyMywyLjYxOSwwLjQxOWMwLjkzMiwwLjEwMiwxLjg4MiwwLjE1MiwyLjg0OSwwLjE1MmMxMS41NDQsMCwyMC45MDQtNy4zOTQsMjAuOTA0LTE2LjUxNA0KCQkJQzUwLjkwNCwxOC41MTQsNDEuNTQ1LDExLjEyLDMwLDExLjEyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNDQTIwMjciIGQ9Ik0yMC4zNzEsMjYuNzgxYzIuMTM0LDAuNTI2LDIuNjc3LDEuOTAxLDIuNjc3LDMuMTk5YzAsMi4wMS0xLjM5NSwzLjUwNi00LjIxNCwzLjUwNg0KCQljLTIuOTYxLDAtNC4yODUtMS42MDYtNC4yODUtMi44MTJjMC0wLjYxOCwwLjQxMi0xLjA1LDAuOTgyLTEuMDVjMS4yNjcsMCwwLjkzOCwyLjAwOSwzLjMwMiwyLjAwOQ0KCQljMS4yMDksMCwxLjg3OC0wLjcyNywxLjg3OC0xLjQ2OGMwLTAuNDQ5LTAuMTk5LTAuOTQzLTAuOTk2LTEuMTZsLTIuNjMzLTAuNzI2Yy0yLjEyMy0wLjU4Ny0yLjUwNi0xLjg1NC0yLjUwNi0zLjA0NA0KCQljMC0yLjQ3MywyLjEwNy0zLjQsNC4wODYtMy40YzEuODIxLDAsMy45NzIsMS4xMTMsMy45NzIsMi41OTdjMCwwLjYzNC0wLjQ5NywxLjAwNS0xLjA2NywxLjAwNWMtMS4wODMsMC0wLjg4My0xLjY1NC0zLjA2Mi0xLjY1NA0KCQljLTEuMDgsMC0xLjY3OCwwLjU0MS0xLjY3OCwxLjMxNGMwLDAuNzcyLDAuODU0LDEuMDIsMS41OTQsMS4yMDZMMjAuMzcxLDI2Ljc4MXoiLz4NCgk8Zz4NCgkJPHBhdGggZmlsbD0iI0NBMjAyNyIgZD0iTTI0Ljk0MSwyMy4xNDljMC4wMjctMS4wMTksMC42NTYtMS4yNTEsMS4yODUtMS4yNTFjMC4xNDcsMCwwLjI5NCwwLDAuNDQxLDANCgkJCWMwLjcyNywwLDEuMDcsMC4zMDksMS4zMDYsMS4xNTljMC42NTYsMi4zNzksMS4yOTEsNC43NjcsMi4wNDIsNy4yMTRjMC4wMSwwLDAuMDIxLDAsMC4wMzEsMA0KCQkJYzAuNzM4LTIuNDQ4LDEuMzYzLTQuODM1LDIuMDA5LTcuMjE0YzAuMjM1LTAuODUsMC41NzgtMS4xNTksMS4zMDMtMS4xNTljMC4xMjMsMCwwLjI0NiwwLDAuMzY3LDANCgkJCWMwLjYyOSwwLDEuMjYyLDAuMjMyLDEuMjg5LDEuMjUxYzAuMTc4LDMuMDA5LDAuNjcsNi4wMTIsMS4wNjQsOS4wMDljMC4wNTksMC42MjktMC4yMjUsMS4yNTktMS4xMDcsMS4zMTgNCgkJCWMtMC44ODYsMC4wNTctMS4yNTgtMC41NTctMS4yOTgtMS4yMDdjLTAuMTUxLTIuMzU4LTAuMzEyLTQuNjcxLTAuMzk5LTYuOTczYy0wLjAxLDAtMC4wMiwwLTAuMDI5LDANCgkJCWMtMC42NTEsMi4zNTUtMS4zMTQsNC43MzMtMi4xLDcuMTk2Yy0wLjE2OCwwLjU1LTAuNTgyLDAuNzgyLTEuMTQ1LDAuNzgyYy0wLjU2NCwwLTAuOTc2LTAuMjMyLTEuMTQ0LTAuNzgyDQoJCQljLTAuNzg1LTIuNDYzLTEuNDQ5LTQuODQxLTIuMTAxLTcuMTk2Yy0wLjAxLDAtMC4wMTksMC0wLjAyOSwwYy0wLjA4OSwyLjMwMS0wLjI0OSw0LjYxNC0wLjM5OSw2Ljk3Mw0KCQkJYy0wLjA0MSwwLjY0OS0wLjQxMywxLjI2NC0xLjI5OCwxLjIwN2MtMC44ODMtMC4wNjEtMS4xNjgtMC42OS0xLjEwOS0xLjMxOUMyNC4yOTUsMjkuMTYsMjQuNzc0LDI2LjE1OCwyNC45NDEsMjMuMTQ5eiIvPg0KCTwvZz4NCgk8cGF0aCBmaWxsPSIjQ0EyMDI3IiBkPSJNNDIuNzc1LDI2Ljc4MWMyLjEzNSwwLjUyNiwyLjY3NiwxLjkwMSwyLjY3NiwzLjE5OWMwLDIuMDEtMS4zOTYsMy41MDYtNC4yMTUsMy41MDYNCgkJYy0yLjk2MSwwLTQuMjg0LTEuNjA2LTQuMjg0LTIuODEyYzAtMC42MTgsMC40MTMtMS4wNSwwLjk4My0xLjA1YzEuMjY2LDAsMC45MzgsMi4wMDksMy4yOTksMi4wMDkNCgkJYzEuMjExLDAsMS44ODItMC43MjcsMS44ODItMS40NjhjMC0wLjQ0OS0wLjIwMS0wLjk0My0wLjk5Ny0xLjE2bC0yLjYzNS0wLjcyNmMtMi4xMjEtMC41ODctMi41MDQtMS44NTQtMi41MDQtMy4wNDQNCgkJYzAtMi40NzMsMi4xMDYtMy40LDQuMDg0LTMuNGMxLjgyMiwwLDMuOTcyLDEuMTEzLDMuOTcyLDIuNTk3YzAsMC42MzQtMC40OTYsMS4wMDUtMS4wNjUsMS4wMDVjLTEuMDg0LDAtMC44ODMtMS42NTQtMy4wNjItMS42NTQNCgkJYy0xLjA4NCwwLTEuNjgxLDAuNTQxLTEuNjgxLDEuMzE0YzAsMC43NzIsMC44NTQsMS4wMiwxLjU5NSwxLjIwNkw0Mi43NzUsMjYuNzgxeiIvPg0KPC9nPg0KPC9zdmc+"); }
/**
  * @name Foundation Components
  * @section Foundation
  * @disableCodeSample
  * @sectionIntro
  	All foundation(4.x) css components, that are not already included in macys-base,  are available to use at the feature level, they will need to be imported at feature level via scss. Refer to <code>/src/mcom/features/ui-styleguide/styleguide.scss</code> for an example of how button group component is imported.
  *
  */
/**
  * @name Grid
  * @section Foundation
  * @description Grids divide horizontal space into indivislbe units called 'columns'.  Macys.com CSG is built on a vertical 16-column grid.  Column widths are defined as a percentage of their parent width. It is based on Foundation's mobile-first design, so please use to .small class as your default size. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. <br> Rows are groups of columns which are aligned horizontally.  Rows can either be explicit, by adding a row class, or implicit, automatically occuring when no more space is left in a previous row.  After each group of columns, vertical spacing is added to separate each group of columns to create verticla rhythm. <br>  See <a href="http://foundation.zurb.com/docs/v/4.3.2/components/grid.html">Foundation 4.3.2 Grid Documentation</a> for additional options on grids.


  * @markup
      <div class="sample_csg_grid_demo">
        <div class="row">
          <div class="small-16 small-centered columns"> <-----     This is a 16-column grid row     ----> </div>
          <div class="small-1 columns">1</div>
          <div class="small-1 columns">2</div>
          <div class="small-1 columns">3</div>
          <div class="small-1 columns">4</div>
          <div class="small-1 columns">5</div>
          <div class="small-1 columns">6</div>
          <div class="small-1 columns">7</div>
          <div class="small-1 columns">8</div>
          <div class="small-1 columns">9</div>
          <div class="small-1 columns">10</div>
          <div class="small-1 columns">11</div>
          <div class="small-1 columns">12</div>
          <div class="small-1 columns">13</div>
          <div class="small-1 columns">14</div>
          <div class="small-1 columns">15</div>
          <div class="small-1 columns">16</div>
        </div>
        <div class="row">
          <div class="small-4 columns">small-4</div>
          <div class="small-6 columns">small-6</div>
          <div class="small-6 columns">small-6</div>
        </div>
        <div class="row">
          <div class="small-3 columns">small-3</div>
          <div class="small-10 columns">small-10</div>
          <div class="small-3 columns">small-3</div>
        </div>
        <div class="row">
          <br/>
          <p>Specify small, medium, and/or large sizes if you want responsive displays; the styles from the largest size specified will propagate up. You can override your small grid classes by adding large or medium grid classes to it.</p>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
          <div class="small-16 medium-8 columns">small-16 medium-8</div>
          <div class="small-16 medium-4 columns">small-16 medium-4</div>
        </div>
        <div class="row">
          <div class="small-4 large-8 columns">small-4 large-8</div>
          <div class="small-12 large-8 columns">small-12 large-8</div>
        </div>
        <div class="row">
          <br/>
          <p>Offsets allow you to create additional space between columns in a row.</p>
          <div class="small-6 columns">small-6</div>
          <div class="small-10 columns">small-10</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-8 small-offset-2 columns">small-8, offset 2</div>
        </div>
        <div class="row">
          <div class="small-6 columns">small-6</div>
          <div class="small-6 small-offset-4 columns">small-6, offset 4</div>
        </div>
        <div class="row">
          <br/>
          <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself.  You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered</p>
          <div class="small-4 small-centered large-uncentered columns">small-4 centered / large-uncentered</div>
        </div>
        <div class="row">
          <div class="small-12 small-centered large-8 large-uncentered columns">small-12 centered/ large-8 uncentered</div>
          <div class="small-10 small-centered large-8 large-uncentered columns">small-10 centered/ large-8 uncentered</div>
        </div>
      </div>

  *  <br/>
  *   <p></p>
  *
  */
/**
  * @name Block Grid
  * @section Foundation
  * @description Block grids split contents of a list evenly within the grid.  It calculates the spacing between the contents automatically so that is stays evenly spaced no matter the screeen size.
  * @markup
      <ul class="small-block-grid-2 large-block-grid-4">
        <li><div class="csg-block-grid-demo">Content 1</div></li>
        <li><div class="csg-block-grid-demo">Content 2</div></li>
        <li><div class="csg-block-grid-demo">Content 3</div></li>
        <li><div class="csg-block-grid-demo">Content 4</div></li>
        <li><div class="csg-block-grid-demo">Content 5</div></li>
        <li><div class="csg-block-grid-demo">Content 6</div></li>
        <li><div class="csg-block-grid-demo">Content 7</div></li>
        <li><div class="csg-block-grid-demo">Content 8</div></li>
      </ul>
  *   <p></p>
  *
  */
/* Should be in common */
button.dark, .dark.button, .button.dark {
  background-color: #666666;
  border-color: #666666;
  color: #ffffff; }

footer[data-uri].compact {
  background: #eee;
  text-align: center;
  border-top: 1px solid #ccc;
  padding: 0 0px 50px;
  min-width: 320px;
  margin: 0; }
  footer[data-uri].compact a {
    text-decoration: underline; }
  footer[data-uri].compact #m-buttonlinks .m-footer-buttons {
    padding-bottom: 13px; }
    footer[data-uri].compact #m-buttonlinks .m-footer-buttons p {
      font-weight: bold;
      font-size: 0.85em;
      color: #333;
      padding: 20px 0 0;
      margin: 0 0 10px 0; }
    footer[data-uri].compact #m-buttonlinks .m-footer-buttons a {
      text-decoration: none; }
    footer[data-uri].compact #m-buttonlinks .m-footer-buttons #m-j-signup-button, footer[data-uri].compact #m-buttonlinks .m-footer-buttons #m-footer-link-ios-btn, footer[data-uri].compact #m-buttonlinks .m-footer-buttons #m-footer-link-android-btn {
      vertical-align: middle;
      min-width: 275px;
      margin: 0.5em;
      width: calc(100% - 30px);
      color: #ffffff;
      font-family: Helvetica,Arial,sans-serif;
      padding-top: 0;
      padding-right: .75rem;
      padding-bottom: 0;
      padding-left: .75rem;
      line-height: 40px;
      font-weight: normal; }
      footer[data-uri].compact #m-buttonlinks .m-footer-buttons #m-j-signup-button img, footer[data-uri].compact #m-buttonlinks .m-footer-buttons #m-footer-link-ios-btn img, footer[data-uri].compact #m-buttonlinks .m-footer-buttons #m-footer-link-android-btn img {
        vertical-align: middle;
        font-size: 1.025em;
        padding-right: 0.5em;
        margin-top: -10px;
        margin-bottom: -10px;
        height: 1.6em; }
  footer[data-uri].compact #m-buttonlinks .m-footer-links {
    padding: 0.5em 0 0.75em 0; }
    footer[data-uri].compact #m-buttonlinks .m-footer-links #m-iship-change-country {
      margin-left: 0px; }
    footer[data-uri].compact #m-buttonlinks .m-footer-links img {
      margin-left: 5px; }
    footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link, footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:visited, footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:focus, footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:hover {
      margin: 0 5px;
      color: #333;
      font-size: 14px;
      display: inline-block;
      line-height: 2.5em; }
      footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:focus, footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:visited:focus, footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:focus:focus, footer[data-uri].compact #m-buttonlinks .m-footer-links .m-j-cm-link:hover:focus {
        outline: auto !important;
        /* adding for accessibility, overriding MEW's focus property */ }
  footer[data-uri].compact #m-socialcopy .m-footer-social-icons {
    padding: 0.5em 0 0.6em; }
    footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover {
      text-decoration: none;
      margin: 0 0.275em;
      display: inline-block; }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div.m-footer-social-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div.m-footer-social-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div.m-footer-social-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div.m-footer-social-img {
        width: 2.125em;
        height: 2.125em; }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div#m-footer-pinterest-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div#m-footer-pinterest-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div#m-footer-pinterest-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div#m-footer-pinterest-img {
        background: no-repeat center/100% url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNi43ODEsMzNjMC4yMjctMC44NzcsMS4xNjctNC40NTgsMS4xNjctNC40NThjMC42MTEsMS4xNjcsMi4zOTcsMi4xNTEsNC4yOTcsMi4xNTENCgkJYzUuNjU1LDAsOS43MjktNS4xOTksOS43MjktMTEuNjZjMC02LjE5NS01LjA1NS0xMC44MzEtMTEuNTYtMTAuODMxYy04LjA5MSwwLTEyLjM4OSw1LjQzMy0xMi4zODksMTEuMzQ4DQoJCWMwLDIuNzQ5LDEuNDY0LDYuMTc1LDMuODA2LDcuMjY1YzAuMzU2LDAuMTY0LDAuNTQ1LDAuMDkzLDAuNjI3LTAuMjUyYzAuMDYzLTAuMjYsMC4zNzktMS41MzUsMC41MjEtMi4xMjcNCgkJYzAuMDQ2LTAuMTg4LDAuMDI0LTAuMzUxLTAuMTMtMC41MzdjLTAuNzc1LTAuOTQtMS4zOTYtMi42NjgtMS4zOTYtNC4yNzljMC00LjEzNSwzLjEzMi04LjEzNiw4LjQ2Ny04LjEzNg0KCQljNC42MDYsMCw3LjgzMiwzLjEzOSw3LjgzMiw3LjYyN2MwLDUuMDcyLTIuNTYyLDguNTg3LTUuODk2LDguNTg3Yy0xLjgzOSwwLTMuMjE2LTEuNTIzLTIuNzc1LTMuMzg5DQoJCWMwLjUyOS0yLjIzLDEuNTUzLTQuNjM1LDEuNTUzLTYuMjQ0YzAtMS40NC0wLjc3Mi0yLjY0MS0yLjM3Mi0yLjY0MWMtMS44ODIsMC0zLjM5MywxLjk0Ny0zLjM5Myw0LjU1NA0KCQljMCwxLjY2MSwwLjU2MSwyLjc4MSwwLjU2MSwyLjc4MXMtMS44NTksNy44NTktMi4xOTksOS4zMjJjLTAuMzc2LDEuNjE0LTAuMjMsMy44ODItMC4wNjYsNS4zNjUNCgkJYzAuNDI0LDAuMTY2LDAuODQ3LDAuMzMyLDEuMjg1LDAuNDY4QzE1LjIxNCwzNi42NjksMTYuMzU3LDM0LjYyNywxNi43ODEsMzN6Ii8+DQo8L2c+DQo8cGF0aCBmaWxsPSIjQkMyMDI2IiBkPSJNMzguNzUsMjBDMzguNzUsOS42NDYsMzAuMzU1LDEuMjUsMjAsMS4yNUM5LjY0NSwxLjI1LDEuMjUsOS42NDYsMS4yNSwyMA0KCWMwLDcuOTQzLDQuOTQyLDE0LjcyNywxMS45MTcsMTcuNDZjLTAuMTY0LTEuNDgzLTAuMzEyLTMuNzYsMC4wNjUtNS4zNzljMC4zNC0xLjQ2MywyLjE5OS05LjMyMiwyLjE5OS05LjMyMg0KCXMtMC41NjEtMS4xMi0wLjU2MS0yLjc4MWMwLTIuNjA3LDEuNTExLTQuNTU0LDMuMzkzLTQuNTU0YzEuNiwwLDIuMzcyLDEuMjAxLDIuMzcyLDIuNjQxYzAsMS42MDktMS4wMjQsNC4wMTMtMS41NTMsNi4yNDQNCgljLTAuNDQxLDEuODY1LDAuOTM2LDMuMzg5LDIuNzc1LDMuMzg5YzMuMzM0LDAsNS44OTYtMy41MTYsNS44OTYtOC41ODdjMC00LjQ4OC0zLjIyNi03LjYyNy03LjgzMi03LjYyNw0KCWMtNS4zMzUsMC04LjQ2Nyw0LjAwMS04LjQ2Nyw4LjEzNmMwLDEuNjExLDAuNjIxLDMuMzM5LDEuMzk2LDQuMjc5YzAuMTU0LDAuMTg3LDAuMTc2LDAuMzUsMC4xMywwLjUzNw0KCWMtMC4xNDIsMC41OTItMC40NTgsMS44NjctMC41MjEsMi4xMjdjLTAuMDgyLDAuMzQ1LTAuMjcxLDAuNDE2LTAuNjI3LDAuMjUyYy0yLjM0Mi0xLjA5LTMuODA2LTQuNTE2LTMuODA2LTcuMjY1DQoJYzAtNS45MTUsNC4yOTgtMTEuMzQ4LDEyLjM4OS0xMS4zNDhjNi41MDUsMCwxMS41Niw0LjYzNiwxMS41NiwxMC44MzFjMCw2LjQ2MS00LjA3NCwxMS42Ni05LjcyOSwxMS42Ng0KCWMtMS45LDAtMy42ODYtMC45ODQtNC4yOTctMi4xNTFjMCwwLTAuOTQsMy41ODEtMS4xNjcsNC40NThjLTAuNDI0LDEuNjI4LTEuNTY3LDMuNjctMi4zMzEsNC45MTUNCgljMS43NTQsMC41NDMsMy42MTksMC44MzYsNS41NTIsMC44MzZDMzAuMzU1LDM4Ljc1LDM4Ljc1LDMwLjM1NSwzOC43NSwyMHoiLz4NCjwvc3ZnPg0K); }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div#m-footer-facebook-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div#m-footer-facebook-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div#m-footer-facebook-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div#m-footer-facebook-img {
        background: no-repeat center/100% url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiMzQjVDQTEiIGQ9Ik0yMC4wMTcsMS4yNUM5LjY4NywxLjI1LDEuMjUsOS42ODcsMS4yNSwyMC4wMThjMCwxMC4yOTYsOC40MzcsMTguNzMyLDE4Ljc2NywxOC43MzINCgljMTAuMjk3LDAsMTguNzMzLTguNDM2LDE4LjczMy0xOC43MzJDMzguNzUsOS42ODcsMzAuMzE0LDEuMjUsMjAuMDE3LDEuMjV6IE0yNi4yNTQsMTEuNjUyaC0yLjI3Yy0xLjc3NiwwLTIuMTIxLDAuODQ3LTIuMTIxLDIuMDg1DQoJdjIuNzMxaDQuMjRsLTAuNTU0LDQuMjgzaC0zLjY4N3YxMC45ODdoLTQuNDIxVjIwLjc1MmgtMy42OTd2LTQuMjgzaDMuNjk3di0zLjE1NmMwLTMuNjY0LDIuMjM5LTUuNjU5LDUuNTA2LTUuNjU5DQoJYzEuNTY1LDAsMi45MTEsMC4xMTcsMy4zMDUsMC4xN0wyNi4yNTQsMTEuNjUyTDI2LjI1NCwxMS42NTJ6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjYuMjU0LDExLjY1MmgtMi4yN2MtMS43NzYsMC0yLjEyMSwwLjg0Ny0yLjEyMSwyLjA4NXYyLjczMWg0LjI0bC0wLjU1NCw0LjI4M2gtMy42ODd2MTAuOTg3aC00LjQyMQ0KCVYyMC43NTJoLTMuNjk3di00LjI4M2gzLjY5N3YtMy4xNTZjMC0zLjY2NCwyLjIzOS01LjY1OSw1LjUwNi01LjY1OWMxLjU2NSwwLDIuOTExLDAuMTE3LDMuMzA1LDAuMTdMMjYuMjU0LDExLjY1MkwyNi4yNTQsMTEuNjUyeiINCgkvPg0KPC9zdmc+DQo=); }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div#m-footer-twitter-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div#m-footer-twitter-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div#m-footer-twitter-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div#m-footer-twitter-img {
        background: no-repeat center/100% url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM1RkE3REMiIGQ9Ik0yMC4wMTgsMS4yNUM5LjY4NywxLjI1LDEuMjUsOS42ODcsMS4yNSwyMC4wMThjMCwxMC4yOTYsOC40MzcsMTguNzM0LDE4Ljc2OCwxOC43MzQNCgljMTAuMjk2LDAsMTguNzMyLTguNDM4LDE4LjczMi0xOC43MzRDMzguNzUsOS42ODcsMzAuMzE0LDEuMjUsMjAuMDE4LDEuMjV6IE0zMC40MjQsMTQuNjE1Yy0wLjI2NiwwLjI2NS0wLjUzMSwwLjQ5OC0wLjc5NywwLjcyOQ0KCXYwLjY5OWMwLDcuMzcyLTUuNzQ3LDEzLjM4Ny0xMy4wMjEsMTMuNzg0aC0xLjUyOGMtMi4zNTctMC4xMzQtNC41MTctMC44NjMtNi40MS0yLjAyNWMyLjU1OCwwLDQuOTQ5LTAuNzk5LDYuODc1LTIuMjI3DQoJYy0yLjA5Mi0wLjE2NS0zLjg1My0xLjUyNy00LjYxNy0zLjM4OGwxLjAzLDAuMDMxbDEuMjI4LTAuMDY0Yy0xLjA2MS0wLjMwMS0xLjk5Mi0wLjkzMi0yLjY4OS0xLjc2MQ0KCWMtMC43MzEtMC44NjMtMS4xOTYtMS45Ni0xLjI2Mi0zLjE1NmMwLjU2NCwwLjIzMywxLjE2MywwLjQzMiwxLjc2LDAuNTk4bDAuNDY1LDAuMTAxbC0wLjM2NS0wLjMzMw0KCWMtMC43My0wLjY2NS0xLjI2Mi0xLjU2MS0xLjU2MS0yLjU1N2MtMC4wMzQtMC4xMzQtMC4wNjctMC4yNjctMC4wNjctMC40MzNjLTAuMDY2LTAuMzMzLTAuMTAxLTAuNjYzLTAuMTAxLTAuOTk2DQoJYzAtMC45MywwLjIzMy0xLjgyNywwLjYzMi0yLjU5M2MwLjM2NiwwLjU2NSwwLjc5NywxLjA5NywxLjI2MiwxLjU5NWMwLjczMiwwLjc2NSwxLjU2MiwxLjQ2MiwyLjQ5MSwxLjk5NA0KCWMwLjE2NywwLjEsMC4zLDAuMTk5LDAuNDY2LDAuMjY1bDAuODMsMC4zOThjMS4zOTYsMC42MzEsMi45OSwwLjk5OCw0LjYxNywxLjAzaDAuMTMzaDAuMmgwLjAzMmwtMC4wNjYtMC41NjRsLTAuMDMzLTAuNDMydi0wLjI2NQ0KCWMwLjAzMy0wLjEzNCwwLjAzMy0wLjI2NywwLjA2Ny0wLjQzM2MwLjAzMi0wLjMsMC4xLTAuNTk3LDAuMi0wLjg5NmwwLjE2Ni0wLjQzMmMwLjM2Ni0wLjczMSwwLjg2NC0xLjM5NiwxLjUyOC0xLjg2bDAuMzMyLTAuMjY1DQoJYzAuNDMyLTAuMjY3LDAuOTY1LTAuNDk4LDEuNDk0LTAuNjMyYzAuMzY1LTAuMDY3LDAuNzMtMC4xLDEuMDk4LTAuMWgwLjA2NWgwLjAzMmMxLjM2MSwwLDIuNTkxLDAuNTk2LDMuNDUzLDEuNTI4bDAuNi0wLjEzMw0KCWwwLjEtMC4wMzNjMC43OTctMC4yMzMsMS41OTYtMC40OTksMi4yOTMtMC44NjRjLTAuMzY1LDEuMDMtMS4wNjIsMS45MjYtMS45NTksMi41MjRoMC4wMzFjMC45OTcsMCwxLjg5NS0wLjI2NywyLjY1OC0wLjc2Mw0KCUMzMS42MiwxMy4zODYsMzEuMDU1LDE0LjA1LDMwLjQyNCwxNC42MTV6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzAuNDI0LDE0LjYxNWMtMC4yNjYsMC4yNjUtMC41MzEsMC40OTgtMC43OTcsMC43Mjl2MC42OTljMCw3LjM3Mi01Ljc0NywxMy4zODctMTMuMDIxLDEzLjc4NGgtMS41MjgNCgljLTIuMzU3LTAuMTM0LTQuNTE3LTAuODYzLTYuNDEtMi4wMjVjMi41NTgsMCw0Ljk0OS0wLjc5OSw2Ljg3NS0yLjIyN2MtMi4wOTItMC4xNjUtMy44NTMtMS41MjctNC42MTctMy4zODhsMS4wMywwLjAzMQ0KCWwxLjIyOC0wLjA2NGMtMS4wNjEtMC4zMDEtMS45OTItMC45MzItMi42ODktMS43NjFjLTAuNzMxLTAuODYzLTEuMTk2LTEuOTYtMS4yNjItMy4xNTZjMC41NjQsMC4yMzMsMS4xNjMsMC40MzIsMS43NiwwLjU5OA0KCWwwLjQ2NSwwLjEwMWwtMC4zNjUtMC4zMzNjLTAuNzMtMC42NjUtMS4yNjItMS41NjEtMS41NjEtMi41NTdjLTAuMDM0LTAuMTM0LTAuMDY3LTAuMjY3LTAuMDY3LTAuNDMzDQoJYy0wLjA2Ni0wLjMzMy0wLjEwMS0wLjY2My0wLjEwMS0wLjk5NmMwLTAuOTMsMC4yMzMtMS44MjcsMC42MzItMi41OTNjMC4zNjYsMC41NjUsMC43OTcsMS4wOTcsMS4yNjIsMS41OTUNCgljMC43MzIsMC43NjUsMS41NjIsMS40NjIsMi40OTEsMS45OTRjMC4xNjcsMC4xLDAuMywwLjE5OSwwLjQ2NiwwLjI2NWwwLjgzLDAuMzk4YzEuMzk2LDAuNjMxLDIuOTksMC45OTgsNC42MTcsMS4wM2gwLjEzM2gwLjINCgloMC4wMzJsLTAuMDY2LTAuNTY0bC0wLjAzMy0wLjQzMnYtMC4yNjVjMC4wMzMtMC4xMzQsMC4wMzMtMC4yNjcsMC4wNjctMC40MzNjMC4wMzItMC4zLDAuMS0wLjU5NywwLjItMC44OTZsMC4xNjYtMC40MzINCgljMC4zNjYtMC43MzEsMC44NjQtMS4zOTYsMS41MjgtMS44NmwwLjMzMi0wLjI2NWMwLjQzMi0wLjI2NywwLjk2NS0wLjQ5OCwxLjQ5NC0wLjYzMmMwLjM2NS0wLjA2NywwLjczLTAuMSwxLjA5OC0wLjFoMC4wNjVoMC4wMzINCgljMS4zNjEsMCwyLjU5MSwwLjU5NiwzLjQ1MywxLjUyOGwwLjYtMC4xMzNsMC4xLTAuMDMzYzAuNzk3LTAuMjMzLDEuNTk2LTAuNDk5LDIuMjkzLTAuODY0Yy0wLjM2NSwxLjAzLTEuMDYyLDEuOTI2LTEuOTU5LDIuNTI0DQoJaDAuMDMxYzAuOTk3LDAsMS44OTUtMC4yNjcsMi42NTgtMC43NjNDMzEuNjIsMTMuMzg2LDMxLjA1NSwxNC4wNSwzMC40MjQsMTQuNjE1eiIvPg0KPC9zdmc+DQo=); }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div#m-footer-instagram-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div#m-footer-instagram-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div#m-footer-instagram-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div#m-footer-instagram-img {
        background: no-repeat center/100% url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMzZjcyOWI7fS5jbHMtMntmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT40MHg0MF9JbnN0YWdyYW08L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwLDFBMTksMTksMCwxLDAsMzksMjAsMTkuMDUsMTkuMDUsMCwwLDAsMjAsMVoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0yMCwxMC40OGMzLjEsMCwzLjQ3LDAsNC43LjA3YTYuNDMsNi40MywwLDAsMSwyLjE2LjQsMy44NSwzLjg1LDAsMCwxLDIuMjEsMi4yMSw2LjQzLDYuNDMsMCwwLDEsLjQsMi4xNmMwLjA2LDEuMjMuMDcsMS41OSwwLjA3LDQuN3MwLDMuNDctLjA3LDQuN2E2LjQzLDYuNDMsMCwwLDEtLjQsMi4xNiwzLjg1LDMuODUsMCwwLDEtMi4yMSwyLjIxLDYuNDMsNi40MywwLDAsMS0yLjE2LjRjLTEuMjMuMDYtMS41OSwwLjA3LTQuNywwLjA3cy0zLjQ3LDAtNC43LS4wN2E2LjQzLDYuNDMsMCwwLDEtMi4xNi0uNEEzLjg1LDMuODUsMCwwLDEsMTEsMjYuODZhNi40Myw2LjQzLDAsMCwxLS40LTIuMTZjLTAuMDYtMS4yMy0uMDctMS41OS0wLjA3LTQuN3MwLTMuNDcuMDctNC43YTYuNDMsNi40MywwLDAsMSwuNC0yLjE2LDMuODUsMy44NSwwLDAsMSwyLjIxLTIuMjEsNi40Myw2LjQzLDAsMCwxLDIuMTYtLjRjMS4yMy0uMDYsMS41OS0wLjA3LDQuNy0wLjA3bTAtMi4wOWMtMy4xNiwwLTMuNTUsMC00Ljc5LjA3QTguNTMsOC41MywwLDAsMCwxMi40MSw5LDUuOTQsNS45NCwwLDAsMCw5LDEyLjM5YTguNTMsOC41MywwLDAsMC0uNTQsMi44MkM4LjQyLDE2LjQ1LDguNDEsMTYuODUsOC40MSwyMHMwLDMuNTUuMDcsNC43OUE4LjUzLDguNTMsMCwwLDAsOSwyNy42MmE1Ljk0LDUuOTQsMCwwLDAsMy40LDMuNCw4LjUzLDguNTMsMCwwLDAsMi44Mi41NGMxLjI0LDAuMDYsMS42NC4wNyw0Ljc5LDAuMDdzMy41NSwwLDQuNzktLjA3QTguNTMsOC41MywwLDAsMCwyNy42NCwzMWE1Ljk0LDUuOTQsMCwwLDAsMy40LTMuNCw4LjUzLDguNTMsMCwwLDAsLjU0LTIuODJjMC4wNi0xLjI0LjA3LTEuNjQsMC4wNy00Ljc5czAtMy41NS0uMDctNC43OUE4LjUzLDguNTMsMCwwLDAsMzEsMTIuMzksNS45NCw1Ljk0LDAsMCwwLDI3LjY0LDlhOC41Myw4LjUzLDAsMCwwLTIuODItLjU0QzIzLjU4LDguNCwyMy4xOCw4LjM4LDIwLDguMzhoMFoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0yMCwxNGE2LDYsMCwxLDAsNiw2QTYsNiwwLDAsMCwyMCwxNFptMCw5Ljg0QTMuODcsMy44NywwLDEsMSwyMy45LDIwLDMuODcsMy44NywwLDAsMSwyMCwyMy44OFoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMiIgY3g9IjI2LjIzIiBjeT0iMTMuOCIgcj0iMS4zOSIvPjwvc3ZnPg==); }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div#m-footer-youtube-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div#m-footer-youtube-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div#m-footer-youtube-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div#m-footer-youtube-img {
        background: no-repeat center/100% url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDQzIxMjciIGQ9Ik0yMC4wMTksMS4yNUM5LjY4NiwxLjI1LDEuMjUsOS42ODYsMS4yNSwyMC4wMThjMCwxMC4yOTgsOC40MzYsMTguNzM0LDE4Ljc2OSwxOC43MzQNCgljMTAuMjk1LDAsMTguNzMxLTguNDM4LDE4LjczMS0xOC43MzRDMzguNzUsOS42ODYsMzAuMzE0LDEuMjUsMjAuMDE5LDEuMjV6IE0xNS44NTQsMjcuNTEyVjEyLjQ4OWwxMi43OTYsOC4xMDNMMTUuODU0LDI3LjUxMnoiLz4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTUuODU0LDI3LjUxMiAxNS44NTQsMTIuNDg5IDI4LjY1LDIwLjU5MiAiLz4NCjwvc3ZnPg0K); }
      footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link div#m-footer-mblog-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:visited div#m-footer-mblog-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:focus div#m-footer-mblog-img, footer[data-uri].compact #m-socialcopy .m-footer-social-icons .m-footer-social-link:hover div#m-footer-mblog-img {
        background: no-repeat center/100% url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiNDQTIwMjciIGQ9Ik0yMy45MzYsMjcuMzVjLTAuMTM3LTAuMjA3LTAuMzE3LTAuMzczLTAuNTM5LTAuNDk2Yy0wLjIyMy0wLjEyMy0wLjQ5NC0wLjE4NS0wLjgxMi0wLjE4NQ0KCQlzLTAuNTg4LDAuMDYyLTAuODExLDAuMTg1Yy0wLjIyNCwwLjEyMy0wLjQwMiwwLjI4OS0wLjU0MSwwLjQ5NmMtMC4xNCwwLjIwNy0wLjIzOCwwLjQ0Mi0wLjMwMywwLjcwNw0KCQljLTAuMDYzLDAuMjY2LTAuMDk1LDAuNTM3LTAuMDk1LDAuODJjMCwwLjI3MSwwLjAzMSwwLjUzMywwLjA5NSwwLjc4OGMwLjA2NCwwLjI1NSwwLjE2MywwLjQ4NSwwLjMwMywwLjY4OA0KCQljMC4xMzksMC4yMDUsMC4zMTcsMC4zNjksMC41NDEsMC40OTFjMC4yMjMsMC4xMjMsMC40OTIsMC4xODcsMC44MTEsMC4xODdzMC41OS0wLjA2MiwwLjgxMi0wLjE4Nw0KCQljMC4yMjItMC4xMjQsMC40MDItMC4yODYsMC41MzktMC40OTFjMC4xNC0wLjIwMywwLjI0LTAuNDM1LDAuMzAzLTAuNjg4YzAuMDYzLTAuMjU0LDAuMDk1LTAuNTE5LDAuMDk1LTAuNzg4DQoJCWMwLTAuMjgzLTAuMDMxLTAuNTU3LTAuMDk1LTAuODJDMjQuMTc2LDI3Ljc5MywyNC4wNzQsMjcuNTU3LDIzLjkzNiwyNy4zNXoiLz4NCgk8cGF0aCBmaWxsPSIjQ0EyMDI3IiBkPSJNMTEuMzI5LDI5LjIwMUg5Ljc4OHYxLjc2NmgxLjUxNGMwLjEzOCwwLDAuMjcxLTAuMDEyLDAuMzk2LTAuMDRjMC4xMjYtMC4wMjYsMC4yMzgtMC4wNzEsMC4zMzMtMC4xMzYNCgkJYzAuMDk2LTAuMDYyLDAuMTcyLTAuMTQ2LDAuMjMtMC4yNTZjMC4wNTctMC4xMDksMC4wODUtMC4yNDYsMC4wODUtMC40MTRjMC0wLjMzMS0wLjA5My0wLjU2Ni0wLjI3OS0wLjcwOA0KCQlTMTEuNjM1LDI5LjIwMSwxMS4zMjksMjkuMjAxeiIvPg0KCTxwYXRoIGZpbGw9IiNDQTIwMjciIGQ9Ik0xMS44NDMsMjguMDU3YzAuMTYyLTAuMTE5LDAuMjQzLTAuMzEzLDAuMjQzLTAuNTg2YzAtMC4xNDgtMC4wMjctMC4yNzItMC4wODEtMC4zNjkNCgkJYy0wLjA1NC0wLjA5Ni0wLjEyNi0wLjE3LTAuMjE2LTAuMjI2Yy0wLjA5LTAuMDU0LTAuMTk0LTAuMDkxLTAuMzExLTAuMTEyYy0wLjExNy0wLjAyMS0wLjIzOS0wLjAzMS0wLjM2NS0wLjAzMUg5Ljc4OHYxLjUwNA0KCQloMS40MzNDMTEuNDczLDI4LjIzNiwxMS42ODEsMjguMTc4LDExLjg0MywyOC4wNTd6Ii8+DQoJPHBhdGggZmlsbD0iI0NBMjAyNyIgZD0iTTIwLjAxNywxLjI1MUM5LjY4NywxLjI1MSwxLjI1LDkuNjg3LDEuMjUsMjAuMDE3YzAsMTAuMjk1LDguNDM3LDE4LjczMywxOC43NjcsMTguNzMzDQoJCWMxMC4yOTcsMCwxOC43MzMtOC40MzgsMTguNzMzLTE4LjczM0MzOC43NSw5LjY4NywzMC4zMTIsMS4yNTEsMjAuMDE3LDEuMjUxeiBNMTMuNTczLDMxLjA0NA0KCQljLTAuMTI2LDAuMjM3LTAuMjk2LDAuNDMxLTAuNTA5LDAuNTgxcy0wLjQ1NywwLjI2Mi0wLjczLDAuMzM0cy0wLjU1NCwwLjEwNy0wLjg0MiwwLjEwN0g4LjM3M3YtNi40MzVoMy4wMjgNCgkJYzAuMzA2LDAsMC41ODUsMC4wMjcsMC44MzcsMC4wODFjMC4yNTIsMC4wNTUsMC40NjksMC4xNDMsMC42NDksMC4yNjZjMC4xODEsMC4xMjMsMC4zMiwwLjI4NywwLjQxOSwwLjQ5MQ0KCQljMC4wOTksMC4yMDMsMC4xNDgsMC40NTcsMC4xNDgsMC43NTdjMCwwLjMyNC0wLjA3NCwwLjU5Ni0wLjIyMSwwLjgxMmMtMC4xNDcsMC4yMTYtMC4zNjUsMC4zOTMtMC42NTQsMC41MzENCgkJYzAuMzk3LDAuMTEzLDAuNjkyLDAuMzEzLDAuODg4LDAuNmMwLjE5NSwwLjI4NSwwLjI5MiwwLjYyOSwwLjI5MiwxLjAzMkMxMy43NjIsMzAuNTI1LDEzLjY5OSwzMC44MDcsMTMuNTczLDMxLjA0NHoNCgkJIE0xOS4yNjgsMzIuMDY2aC00LjU1MXYtNi40MzVoMS40MTV2NS4yNDRoMy4xMzZWMzIuMDY2eiBNMjUuNTMxLDMwLjE4OGMtMC4xNDUsMC40MDYtMC4zNTIsMC43NjEtMC42MjIsMS4wNjENCgkJcy0wLjYwMSwwLjUzNi0wLjk5MSwwLjcwOGMtMC4zOTEsMC4xNy0wLjgzNSwwLjI1Ni0xLjMzNCwwLjI1NmMtMC40OTIsMC0wLjkzNi0wLjA4Ni0xLjMyOC0wLjI1Ng0KCQljLTAuMzk1LTAuMTcyLTAuNzI3LTAuNDA4LTAuOTk2LTAuNzA4Yy0wLjI3MS0wLjMtMC40NzktMC42NTMtMC42MjItMS4wNjFjLTAuMTQ1LTAuNDAzLTAuMjE2LTAuODQyLTAuMjE2LTEuMzExDQoJCWMwLTAuNDgsMC4wNzItMC45MjcsMC4yMTYtMS4zMzhzMC4zNTItMC43NzEsMC42MjItMS4wNzdjMC4yNy0wLjMwNywwLjYwMi0wLjU0OCwwLjk5Ni0wLjcyMWMwLjM5My0wLjE3NSwwLjgzNi0wLjI2MywxLjMyOC0wLjI2Mw0KCQljMC40OTksMCwwLjk0MywwLjA4OCwxLjMzNCwwLjI2M2MwLjM5MSwwLjE3MywwLjcyMSwwLjQxMywwLjk5MSwwLjcyMWMwLjI3MSwwLjMwNiwwLjQ3OCwwLjY2NiwwLjYyMiwxLjA3Nw0KCQljMC4xNDQsMC40MTEsMC4yMTcsMC44NTcsMC4yMTcsMS4zMzhDMjUuNzQ4LDI5LjM0NiwyNS42NzYsMjkuNzgzLDI1LjUzMSwzMC4xODh6IE0yMy43MDMsMTAuNTE1DQoJCWMtMC43MDYsMC41MDMtMS4yMjksMS4xODUtMS41NTcsMi4wMjZjLTAuMzM4LDAuODY2LTAuNTA4LDIuMzYzLTAuNTA4LDQuNDQ3djYuMjIzaC0yLjY3NFYxNS4xOWMwLTEuNzUyLTAuMTA2LTIuOTQ2LTAuMzE2LTMuNTQ4DQoJCWMtMC4yLTAuNTczLTAuNTM4LTEuMDItMS4wMzMtMS4zNjZjLTAuNDk4LTAuMzQ3LTEuMDc5LTAuNTE2LTEuNzc1LTAuNTE2Yy0wLjgwNiwwLTEuNTcyLDAuMjQ4LTIuMjc3LDAuNzM2DQoJCWMtMC43MDksMC40OTEtMS4yNDIsMS4xNjItMS41ODIsMS45OTZjLTAuMzUxLDAuODU0LTAuNTI4LDIuMjA1LTAuNTI4LDQuMDE2djYuNzAzSDguNzgyVjcuNTI4aDIuNjcyVjkuMzkNCgkJYzAuNDg1LTAuNTU4LDAuOTgzLTAuOTk3LDEuNDg3LTEuMzExYzEuMDMxLTAuNjIyLDIuMTI3LTAuOTM1LDMuMjYyLTAuOTM1YzAuNzcxLDAsMS41MTUsMC4xNTMsMi4yMSwwLjQ1Nw0KCQljMC42OTksMC4zMDUsMS4yOCwwLjcxOCwxLjcyNywxLjIyOWMwLjMxOCwwLjM2NCwwLjYwNiwwLjg0LDAuODYyLDEuNDIyYzAuNTk2LTAuOTAyLDEuMzA3LTEuNjE5LDIuMTIxLTIuMTM3DQoJCWMxLjAxNi0wLjY0NiwyLjEyNS0wLjk3MSwzLjI5Ny0wLjk3MWMxLjEsMCwyLjA4OSwwLjI4NCwyLjkzOCwwLjg0NGMwLjg1MywwLjU2MiwxLjQ5LDEuMzU0LDEuOSwyLjM1Mw0KCQljMC40MDYsMC45ODgsMC42MDQsMi40MDksMC42MDQsNC4zNDJ2OC41MjhoLTIuNzEzdi04LjUyOGMwLTEuNTQ2LTAuMTA2LTIuNjEyLTAuMzE4LTMuMTY3Yy0wLjItMC41MjktMC41MzYtMC45NDQtMS4wMjUtMS4yNjgNCgkJYy0wLjQ4Ni0wLjMyNC0xLjA4Mi0wLjQ4Ny0xLjc3LTAuNDg3QzI1LjE5MSw5Ljc2MSwyNC40MDQsMTAuMDE1LDIzLjcwMywxMC41MTV6IE0zMi4yMjcsMzIuMDY2aC0wLjlsLTAuMTQ1LTAuNzI5DQoJCWMtMC4yNTIsMC4zMjMtMC41MzEsMC41NTItMC44MzgsMC42ODFzLTAuNjE1LDAuMTkyLTAuOTI5LDAuMTkyYy0wLjQ5MywwLTAuOTM3LTAuMDg2LTEuMzI5LTAuMjU2DQoJCWMtMC4zOTUtMC4xNzItMC43MjctMC40MDgtMC45OTYtMC43MDhjLTAuMjcxLTAuMzAxLTAuNDc5LTAuNjUzLTAuNjIxLTEuMDYxYy0wLjE0NS0wLjQwMy0wLjIxNy0wLjg0Mi0wLjIxNy0xLjMxMQ0KCQljMC0wLjQ4LDAuMDcyLTAuOTI3LDAuMjE3LTEuMzM4YzAuMTQzLTAuNDExLDAuMzUyLTAuNzcxLDAuNjIxLTEuMDc3YzAuMjctMC4zMDgsMC42MDQtMC41NDgsMC45OTYtMC43MjENCgkJYzAuMzkzLTAuMTc1LDAuODM2LTAuMjYzLDEuMzI5LTAuMjYzYzAuMzMsMCwwLjY0OSwwLjA1MSwwLjk2LDAuMTQ4czAuNTg4LDAuMjQ1LDAuODM4LDAuNDM4YzAuMjQ5LDAuMTkyLDAuNDU1LDAuNDMsMC42MTcsMC43MTMNCgkJYzAuMTYyLDAuMjgxLDAuMjYyLDAuNjA2LDAuMjk4LDAuOTczaC0xLjM1M2MtMC4wODQtMC4zNTktMC4yNDYtMC42MzEtMC40ODYtMC44MTFjLTAuMjQtMC4xODEtMC41MzEtMC4yNzEtMC44NzQtMC4yNzENCgkJYy0wLjMxNywwLTAuNTg5LDAuMDYyLTAuODEyLDAuMTg2cy0wLjQwMiwwLjI4OS0wLjU0MSwwLjQ5NnMtMC4yMzgsMC40NDEtMC4zMDEsMC43MDdjLTAuMDY0LDAuMjY0LTAuMDk3LDAuNTM2LTAuMDk3LDAuODE5DQoJCWMwLDAuMjcxLDAuMDMyLDAuNTMzLDAuMDk3LDAuNzg4YzAuMDYxLDAuMjU1LDAuMTYyLDAuNDg0LDAuMzAxLDAuNjg5YzAuMTM5LDAuMjAzLDAuMzE4LDAuMzY3LDAuNTQxLDAuNDkNCgkJczAuNDkyLDAuMTg2LDAuODEyLDAuMTg2YzAuNDY5LDAsMC44My0wLjExOCwxLjA4Ni0wLjM1NmMwLjI1NS0wLjIzNSwwLjQwMy0wLjU4LDAuNDQ2LTEuMDNoLTEuNDI2di0xLjA1NmgyLjcwNVYzMi4wNjYNCgkJTDMyLjIyNywzMi4wNjZ6Ii8+DQo8L2c+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTMuNDY3LDI5LjE3Yy0wLjE5Ni0wLjI4Ni0wLjQ5MS0wLjQ4Ni0wLjg4OC0wLjZjMC4yODktMC4xMzksMC41MDctMC4zMTUsMC42NTQtMC41MzENCgljMC4xNDctMC4yMTcsMC4yMjEtMC40ODgsMC4yMjEtMC44MTJjMC0wLjMtMC4wNDktMC41NTQtMC4xNDgtMC43NTdjLTAuMDk5LTAuMjA0LTAuMjM4LTAuMzY4LTAuNDE5LTAuNDkxDQoJYy0wLjE4LTAuMTIzLTAuMzk3LTAuMjExLTAuNjQ5LTAuMjY2Yy0wLjI1Mi0wLjA1NC0wLjUzMS0wLjA4MS0wLjgzNy0wLjA4MUg4LjM3M3Y2LjQzNWgzLjExOWMwLjI4OCwwLDAuNTY5LTAuMDM1LDAuODQyLTAuMTA3DQoJczAuNTE3LTAuMTg0LDAuNzMtMC4zMzRzMC4zODMtMC4zNDQsMC41MDktMC41ODFjMC4xMjYtMC4yMzcsMC4xODktMC41MTksMC4xODYtMC44NDJDMTMuNzU5LDI5Ljc5OSwxMy42NjIsMjkuNDU1LDEzLjQ2NywyOS4xN3oNCgkgTTkuNzg4LDI2LjczMmgxLjMyNWMwLjEyNiwwLDAuMjQ4LDAuMDExLDAuMzY1LDAuMDMxYzAuMTE3LDAuMDIxLDAuMjIxLDAuMDU5LDAuMzExLDAuMTEyYzAuMDksMC4wNTYsMC4xNjIsMC4xMywwLjIxNiwwLjIyNg0KCWMwLjA1NCwwLjA5NywwLjA4MSwwLjIyMSwwLjA4MSwwLjM2OWMwLDAuMjcyLTAuMDgxLDAuNDY3LTAuMjQzLDAuNTg2Yy0wLjE2MiwwLjEyMS0wLjM3LDAuMTgtMC42MjIsMC4xOEg5Ljc4OFYyNi43MzJ6DQoJIE0xMi4yNjEsMzAuNTM1Yy0wLjA1OCwwLjEwOS0wLjEzNCwwLjE5My0wLjIzLDAuMjU2Yy0wLjA5NSwwLjA2NC0wLjIwNywwLjEwOS0wLjMzMywwLjEzNmMtMC4xMjUsMC4wMjgtMC4yNTgsMC4wNC0wLjM5NiwwLjA0DQoJSDkuNzg4di0xLjc2NmgxLjU0MWMwLjMwNiwwLDAuNTUyLDAuMDcsMC43MzgsMC4yMTJzMC4yNzksMC4zNzcsMC4yNzksMC43MDhDMTIuMzQ2LDMwLjI4OSwxMi4zMTgsMzAuNDI2LDEyLjI2MSwzMC41MzV6Ii8+DQo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE5LjI2OCwzMi4wNjYgMTQuNzE3LDMyLjA2NiAxNC43MTcsMjUuNjMyIDE2LjEzMiwyNS42MzIgMTYuMTMyLDMwLjg3NiAxOS4yNjgsMzAuODc2ICIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTI1LjUzMSwyNy41MzljLTAuMTQ1LTAuNDExLTAuMzUyLTAuNzcxLTAuNjIyLTEuMDc3Yy0wLjI3MS0wLjMwOC0wLjYwMS0wLjU0OC0wLjk5MS0wLjcyMQ0KCWMtMC4zOTEtMC4xNzUtMC44MzUtMC4yNjMtMS4zMzQtMC4yNjNjLTAuNDkyLDAtMC45MzYsMC4wODgtMS4zMjgsMC4yNjNjLTAuMzk1LDAuMTczLTAuNzI3LDAuNDE0LTAuOTk2LDAuNzIxDQoJYy0wLjI3LDAuMzA2LTAuNDc4LDAuNjY2LTAuNjIyLDEuMDc3cy0wLjIxNiwwLjg1Ny0wLjIxNiwxLjMzOGMwLDAuNDY5LDAuMDcxLDAuOTA3LDAuMjE2LDEuMzExDQoJYzAuMTQzLDAuNDA3LDAuMzUxLDAuNzYxLDAuNjIyLDEuMDYxYzAuMjcsMC4zLDAuNjAyLDAuNTM2LDAuOTk2LDAuNzA4YzAuMzkzLDAuMTcsMC44MzYsMC4yNTYsMS4zMjgsMC4yNTYNCgljMC40OTksMCwwLjk0My0wLjA4NiwxLjMzNC0wLjI1NmMwLjM5MS0wLjE3MiwwLjcyMS0wLjQwOCwwLjk5MS0wLjcwOHMwLjQ3OC0wLjY1NCwwLjYyMi0xLjA2MQ0KCWMwLjE0NS0wLjQwNCwwLjIxNy0wLjg0MiwwLjIxNy0xLjMxMUMyNS43NDgsMjguMzk2LDI1LjY3NSwyNy45NSwyNS41MzEsMjcuNTM5eiBNMjQuMjM4LDI5LjY2NQ0KCWMtMC4wNjIsMC4yNTQtMC4xNjMsMC40ODUtMC4zMDMsMC42ODhjLTAuMTM3LDAuMjA1LTAuMzE3LDAuMzY3LTAuNTM5LDAuNDkxYy0wLjIyMywwLjEyNC0wLjQ5NCwwLjE4Ny0wLjgxMiwwLjE4Nw0KCXMtMC41ODgtMC4wNjMtMC44MTEtMC4xODdjLTAuMjI0LTAuMTIyLTAuNDAyLTAuMjg2LTAuNTQxLTAuNDkxYy0wLjE0LTAuMjAzLTAuMjM4LTAuNDM0LTAuMzAzLTAuNjg4DQoJYy0wLjA2My0wLjI1NS0wLjA5NS0wLjUxNy0wLjA5NS0wLjc4OGMwLTAuMjgzLDAuMDMxLTAuNTU1LDAuMDk1LTAuODJjMC4wNjQtMC4yNjUsMC4xNjMtMC41LDAuMzAzLTAuNzA3DQoJYzAuMTM5LTAuMjA3LDAuMzE3LTAuMzczLDAuNTQxLTAuNDk2YzAuMjIzLTAuMTIzLDAuNDkyLTAuMTg1LDAuODExLTAuMTg1czAuNTksMC4wNjIsMC44MTIsMC4xODUNCgljMC4yMjIsMC4xMjMsMC40MDIsMC4yODksMC41MzksMC40OTZjMC4xMzksMC4yMDcsMC4yNCwwLjQ0MywwLjMwMywwLjcwN2MwLjA2MywwLjI2NCwwLjA5NSwwLjUzNywwLjA5NSwwLjgyDQoJQzI0LjMzMywyOS4xNDYsMjQuMzAyLDI5LjQxMSwyNC4yMzgsMjkuNjY1eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIzLjcwMywxMC41MTVjLTAuNzA2LDAuNTAzLTEuMjI5LDEuMTg1LTEuNTU3LDIuMDI2Yy0wLjMzOCwwLjg2Ni0wLjUwOCwyLjM2My0wLjUwOCw0LjQ0N3Y2LjIyM2gtMi42NzQNCglWMTUuMTljMC0xLjc1Mi0wLjEwNi0yLjk0Ni0wLjMxNi0zLjU0OGMtMC4yLTAuNTczLTAuNTM4LTEuMDItMS4wMzMtMS4zNjZjLTAuNDk4LTAuMzQ3LTEuMDc5LTAuNTE2LTEuNzc1LTAuNTE2DQoJYy0wLjgwNiwwLTEuNTcyLDAuMjQ4LTIuMjc3LDAuNzM2Yy0wLjcwOSwwLjQ5MS0xLjI0MiwxLjE2Mi0xLjU4MiwxLjk5NmMtMC4zNTEsMC44NTQtMC41MjgsMi4yMDUtMC41MjgsNC4wMTZ2Ni43MDNIOC43ODJWNy41MjgNCgloMi42NzJWOS4zOWMwLjQ4NS0wLjU1OCwwLjk4My0wLjk5NywxLjQ4Ny0xLjMxMWMxLjAzMS0wLjYyMiwyLjEyNy0wLjkzNSwzLjI2Mi0wLjkzNWMwLjc3MSwwLDEuNTE1LDAuMTUzLDIuMjEsMC40NTcNCgljMC42OTksMC4zMDUsMS4yOCwwLjcxOCwxLjcyNywxLjIyOWMwLjMxOCwwLjM2NCwwLjYwNiwwLjg0LDAuODYyLDEuNDIyYzAuNTk2LTAuOTAyLDEuMzA3LTEuNjE5LDIuMTIxLTIuMTM3DQoJYzEuMDE2LTAuNjQ2LDIuMTI1LTAuOTcxLDMuMjk3LTAuOTcxYzEuMSwwLDIuMDg5LDAuMjg0LDIuOTM4LDAuODQ0YzAuODUzLDAuNTYyLDEuNDksMS4zNTQsMS45LDIuMzUzDQoJYzAuNDA2LDAuOTg4LDAuNjA0LDIuNDA5LDAuNjA0LDQuMzQydjguNTI4aC0yLjcxM3YtOC41MjhjMC0xLjU0Ni0wLjEwNi0yLjYxMi0wLjMxOC0zLjE2N2MtMC4yLTAuNTI5LTAuNTM2LTAuOTQ0LTEuMDI1LTEuMjY4DQoJYy0wLjQ4Ni0wLjMyNC0xLjA4Mi0wLjQ4Ny0xLjc3LTAuNDg3QzI1LjE5MSw5Ljc2MSwyNC40MDQsMTAuMDE1LDIzLjcwMywxMC41MTV6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzIuMjI3LDMyLjA2NmgtMC45bC0wLjE0NS0wLjcyOWMtMC4yNTIsMC4zMjMtMC41MzEsMC41NTItMC44MzgsMC42ODFzLTAuNjE1LDAuMTkyLTAuOTI5LDAuMTkyDQoJYy0wLjQ5MywwLTAuOTM3LTAuMDg2LTEuMzI5LTAuMjU2Yy0wLjM5NS0wLjE3Mi0wLjcyNy0wLjQwOC0wLjk5Ni0wLjcwOGMtMC4yNzEtMC4zMDEtMC40NzktMC42NTMtMC42MjEtMS4wNjENCgljLTAuMTQ1LTAuNDAzLTAuMjE3LTAuODQyLTAuMjE3LTEuMzExYzAtMC40OCwwLjA3Mi0wLjkyNywwLjIxNy0xLjMzOGMwLjE0My0wLjQxMSwwLjM1Mi0wLjc3MSwwLjYyMS0xLjA3Nw0KCWMwLjI3LTAuMzA4LDAuNjA0LTAuNTQ4LDAuOTk2LTAuNzIxYzAuMzkzLTAuMTc1LDAuODM2LTAuMjYzLDEuMzI5LTAuMjYzYzAuMzMsMCwwLjY0OSwwLjA1MSwwLjk2LDAuMTQ4czAuNTg4LDAuMjQ1LDAuODM4LDAuNDM4DQoJYzAuMjQ5LDAuMTkyLDAuNDU1LDAuNDMsMC42MTcsMC43MTNjMC4xNjIsMC4yODEsMC4yNjIsMC42MDYsMC4yOTgsMC45NzNoLTEuMzUzYy0wLjA4NC0wLjM1OS0wLjI0Ni0wLjYzMS0wLjQ4Ni0wLjgxMQ0KCWMtMC4yNC0wLjE4MS0wLjUzMS0wLjI3MS0wLjg3NC0wLjI3MWMtMC4zMTcsMC0wLjU4OSwwLjA2Mi0wLjgxMiwwLjE4NnMtMC40MDIsMC4yODktMC41NDEsMC40OTZzLTAuMjM4LDAuNDQxLTAuMzAxLDAuNzA3DQoJYy0wLjA2NCwwLjI2NC0wLjA5NywwLjUzNi0wLjA5NywwLjgxOWMwLDAuMjcxLDAuMDMyLDAuNTMzLDAuMDk3LDAuNzg4YzAuMDYxLDAuMjU1LDAuMTYyLDAuNDg0LDAuMzAxLDAuNjg5DQoJYzAuMTM5LDAuMjAzLDAuMzE4LDAuMzY3LDAuNTQxLDAuNDlzMC40OTIsMC4xODYsMC44MTIsMC4xODZjMC40NjksMCwwLjgzLTAuMTE4LDEuMDg2LTAuMzU2YzAuMjU1LTAuMjM1LDAuNDAzLTAuNTgsMC40NDYtMS4wMw0KCWgtMS40MjZ2LTEuMDU2aDIuNzA1VjMyLjA2NkwzMi4yMjcsMzIuMDY2eiIvPg0KPC9zdmc+DQo=); }
  footer[data-uri].compact #m-socialcopy #m-footer-copy {
    font-size: 0.75em;
    color: #666;
    line-height: 1.75em;
    margin: 0px; }
  footer[data-uri].compact #m-footer-corporate-responsibility-links a {
    white-space: nowrap;
    font-size: 0.75em;
    color: #666;
    line-height: 1.75em;
    margin: 0 8px 0 0; }

@media screen and (min-width: 768px) and (max-width: 999px), screen and (min-width: 1000px) {
  footer[data-uri].compact.for-tablet #m-buttonlinks .m-footer-buttons {
    width: 100%; } }

@media screen and (min-width: 768px) and (max-width: 999px), screen and (min-width: 1000px) {
  footer[data-uri].compact.for-tablet #m-buttonlinks .m-footer-buttons a {
    width: calc(100% - 10px);
    max-width: 320px; } }
footer[data-uri].minimalist {
  margin: 15px auto 0px;
  background-color: inherit;
  border-top: 1px solid #CCC;
  min-width: 320px;
  padding-bottom: 20px;
  padding-top: 0px !important; }
  footer[data-uri].minimalist .row {
    max-width: 1264px;
    padding-bottom: 0px; }
  footer[data-uri].minimalist .hnfFooterTop {
    height: 5px;
    background: none;
    margin-bottom: 15px; }
  footer[data-uri].minimalist .m-footer-line, footer[data-uri].minimalist .m-footer-line p {
    font-size: 12px;
    line-height: 16px;
    color: #333;
    text-align: center;
    margin-bottom: 0.75em; }
    footer[data-uri].minimalist .m-footer-line a, footer[data-uri].minimalist .m-footer-line p a {
      margin-right: 10px;
      display: inline-block;
      text-decoration: underline; }
  footer[data-uri].minimalist .m-footer-line p, footer[data-uri].minimalist .m-footer-line p a {
    font-size: 12px !important;
    line-height: normal !important;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif !important; }
  footer[data-uri].minimalist .greyContent {
    color: #666 !important; }

/*# sourceMappingURL=common.css.map*/