/* -------------------------------- 
  Shop List Header
  -------------------------------- */
  #body header .cd-tab-filter-wrapper { display:none; }
  #body header.smaller .cd-tab-filter-wrapper { display:block; padding:20px 0; margin-top:23px; border-top:3px solid #f2f2f2; background:#fff; }
  #body header.smaller .sl-title { left: 30px; position:absolute; bottom: 20px; }
  
    /* -------------------------------- 
  Main Components 
  -------------------------------- */
  #body .shop-list-wrapper      { padding: 30px 0}
  #body .cd-tab-filter-wrapper  { border-bottom:1px solid #ec2a74}
  #body .cd-main-content        { position:relative; }
  #body .cd-main-content:after  { content: "";display: table; clear: both;}
  #body.en .title-shoplist { position:absolute; top:-12px; left:30px; margin-bottom:0px}
  #body.cn .title-shoplist { position:absolute; top:-8px; left:30px; margin-bottom:0px}

  /* -------------------------------- 
  xtab-filter 
  -------------------------------- */
  #body .cd-tab-filter            { width:auto; cursor:auto; text-align:right;}
  #body .cd-tab-filter::after     { display:none;  }/* hide the arrow */
 
  #body .cd-tab-filter ul               { background:transparent; position:static; box-shadow:none;}
  #body .cd-tab-filter li               { display:inline-block; }
  #body .cd-tab-filter li.placeholder   { display:none; }
  
  #body .cd-tab-filter a                    { display:inline-block; padding:0 25px 0 10px; width: auto;}
  #body .no-touch .cd-tab-filter a:hover    { color:#ec2a74;}
  #body .cd-tab-filter.is-open ul li        { display: inline-block; }
  #body .cd-tab-filter a:hover                    { color:#ec2a74;}
  #body .cd-tab-filter a.selected     { background:transparent; color:#ec2a74;}

  #body .cd-tab-filter li.all:before          { content:url('images/icon-all.svg'); vertical-align:sub; }   
  #body .cd-tab-filter li.dining:before       { content:url('images/icon-dining.svg'); vertical-align:sub;} 
  #body .cd-tab-filter li.shopping:before     { content:url('images/icon-shopping.svg'); vertical-align:sub;} 
  #body .cd-tab-filter li.beauty:before       { content:url('images/icon-beauty.svg'); vertical-align:sub;} 
  #body .cd-tab-filter li.fitness:before      { content:url('images/icon-fitness.svg'); vertical-align:sub;} 
  
  #body .shop-list-overlay{
	display: none;  
  }
  #body .shop-list-overlay.is-open {
	display: block;
    position: fixed!important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-animation: fade 500ms;
    animation: fade 500ms;
  }



  @media only screen and (max-width: 1108px) {
  #body header.smaller .cd-tab-filter-wrapper { margin-top:48px; }
  #body header.smaller .pg-filter { z-index:-1; }
  #body header.smaller .sl-title  { font-size: 24px; }
  }

  @media only screen and (max-width: 1024px) { 

  #body header.smaller .sl-title  { display:none; }
  
  #body .cd-main-content .title-shoplist  { position:relative; top:0; left:0; margin-left:25px}
  #body .cd-tab-filter              { text-align:left;}
  #body .cd-tab-filter ul           { padding-left:25px}
  }

  @media only screen and (max-width: 745px) {

  #body  .cd-tab-filter li:before { display:none; }
  #body header.smaller .cd-tab-filter-wrapper { display:none; }
  
  #body .cd-main-content .title-shoplist { position:relative; top:0; left:0; margin-left:25px}

  #body .cd-tab-filter-wrapper  { border-bottom:none}

   /* tabbed navigation style on mobile - dropdown */
  #body .cd-tab-filter            {  position:relative; height:50px; width:300px; float:left; margin-left:20px; z-index: 1; text-align:left;}
  #body .cd-tab-filter.is-open  { z-index: 9999; } 
  #body .cd-tab-filter::after     {   content: ''; position:absolute; right:34px; top:50%; bottom:auto;
                              -webkit-transform: translateY(-50%);
                                 -moz-transform: translateY(-50%);
                                  -ms-transform: translateY(-50%);
                                   -o-transform: translateY(-50%);
                                      transform: translateY(-50%);
                              display:inline-block; width:16px; height:16px;
                              background: url("images/cd-icon-arrow.svg") no-repeat center center;
                              -webkit-transition: all 0.3s;
                               -moz-transition: all 0.3s;
                                    transition: all 0.3s;
                                pointer-events: none; }
  #body .cd-tab-filter li.placeholder   { display:inline-block;}

  #body .cd-tab-filter ul   { position:absolute; top:0; left:0; width:100%; background-color:#fff; box-shadow:inset 0 -2px 0 #ec2a74; margin:0; padding:0}
  #body .cd-tab-filter li   { display:none}
  #body .cd-tab-filter li:first-child   { display:block; }  /* this way the placehodler is alway visible */
  #body .cd-tab-filter a                { display:inline-block;  width:calc(100% - 65px);  padding-left:40px; line-height:50px; } /* set same size of the .cd-tab-filter */
  #body .cd-tab-filter a.selected       { background:#ec2a74; color:#fff;}
  #body .cd-tab-filter.is-open::after   { -webkit-transform: translateY(-50%) rotate(-180deg);
                                       -moz-transform: translateY(-50%) rotate(-180deg);
                                        -ms-transform: translateY(-50%) rotate(-180deg);
                                         -o-transform: translateY(-50%) rotate(-180deg);
                                            transform: translateY(-50%) rotate(-180deg); } /* small arrow rotation */
  #body .cd-tab-filter.is-open ul     { box-shadow: inset 0 -2px 0 #ec2a74, 0 2px 10px rgba(0, 0, 0, 0.2);}
  #body .cd-tab-filter.is-open ul li  { display:block; border-bottom:1px solid #ececec;}
  #body .cd-tab-filter.is-open .placeholder a   { opacity:.4; } /* reduces the opacity of the placeholder on mobile when the menu is open */


  }