/**
 * Filter.css
 */
#Filter h3
{
  clear:both;
  margin-bottom:3px;
}

  #Filter h3 span.tooltip
  {
    cursor:default;
    margin-left:10px;
    position:relative;
    font-weight:normal;
  }
  
  #Filter h3 span.tooltip:after
  {
    color: #767676;
    font-size: 16px;
  }
  #Filter h3 span.tooltip span
  {
    bottom:30px;
    font-size:13px;
    left:-10px;
    line-height:18px;
    padding:10px 16px;
    width:200px;
  }

#Filter ul,
#FilterPrice
{
  border-bottom:1px solid #ccc;
  clear:both;
  margin-bottom:12px;
  margin-top:3px;
  padding-bottom:12px;
  width:100%;
}

#Filter ul a,
#Filter ul .noBrand
{
  color:#444;
  display:block;
  line-height:20px;
  overflow:hidden;
  padding:0 6px 0 16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
  #Filter ul a:before 
  { 
    display:inline-block;
    font-family:'msx';
    padding-right:8px;
  }
  
  #Filter ul.catogoryLinks a { padding-left:8px; }
  
  #Filter ul a.sub
  {
    color:#444;
    display:block;
    padding:0 6px;
  }
    #Filter ul a.sub0{ padding-left:16px; }
      #Filter ul a.sub1{ padding-left:30px; }

  #Filter ul:not(.filterColor) a:not(.disabled):hover
  {
    background:#222;
    color:#fff;
    text-decoration:none;
  }
  #Filter ul a.disabled
  {
    cursor:default;
    opacity: 0.6;
    text-decoration: none !important;
  }

/* Set the icons */
#Filter a.gender:before,
#Filter a.frameshape:before,
#Filter a.framewidth:before,
#Filter a.frametype:before,
#Filter a.faceshape:before 
{ 
  font-size:16px;
  vertical-align:top; 
}

  #Filter a.female:before{ content:"\2640"; }
  #Filter a.male:before{ content:"\2642"; }

  #Filter a.oval:before{ content:"\e609"; }
  #Filter a.aviator:before{ content:"\e642"; }
  #Filter a.rectangle:before{ content:"\e604"; }
  #Filter a.round:before{ content:"\e606"; }
  #Filter a.butterfly:before{ content:"\e605"; }
  #Filter a.trapezoid:before{ content:"\e009"; }
  #Filter a.singlelens:before{ content:"\e60a"; }
  #Filter a.narrow:before{ content:"\e00f"; }
  #Filter a.square:before{ content:"\e00d"; }
  #Filter a.sporty:before{ content:"\e011"; }
  #Filter a.browline:before{ content:"\e00b"; }

  #Filter a.small:before
  { 
    content:"\e616";
    padding-left:0px;
    padding-right:8px;
  }
  #Filter a.medium:before{ content:"\e012"; }
  #Filter a.normal:before
  { 
    content:"\e622";
    padding-left:0px;
    padding-right:8px;
  }
  #Filter a.wide:before
  { content:"\e01c";
    padding-left:0px;
    padding-right:8px; 
  }

  #Filter a.frameless:before{ content:"\e010"; }
  #Filter a.halfframe:before{ content:"\e60b"; }
  #Filter a.fullframe:before{ content:"\e604"; }

  #Filter a.faceshape.heart_shaped:before{ content:"\e61e"; }
  #Filter a.faceshape.oval:before{ content:"\e01b"; }
  #Filter a.faceshape.round:before{ content:"\e614"; }
  #Filter a.faceshape.angled:before{ content:"\e622"; }

#Filter ul:not(.filterColor) a.active,
#Filter ul:not(.filterColor) a.active:hover { background:#e6e6e6; }

#Filter ul a.active,
#Filter ul a.active:hover { border-bottom:1px solid #fff; }
#Filter ul a.active,
#Filter ul a.active:hover,
#Filter ul a.active:before { color:#444 !important; }
#Filter ul a.active:after
{
  content:"\2612";
  font-family:'msx';
  font-size:12px;
  line-height:20px;
  position:absolute;
  right:6px;
}

#Filter ul.catogoryLinks a.active:after{ display:none; }

/* SelectedFilterBox
----------------------------------------------------------------------*/
#Filter #ActiveFilters
{
  background:#e6e6e6;
  border-bottom:none;
  padding:12px;
}
  #ActiveFilters ul
  { 
    border-bottom:0;
    padding-bottom:4px;
  }
  #ActiveFilters li
  {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #ActiveFilters a.button
  {
    float:left;
    width:100%;
  }
  #ActiveFilters a.button:before{ display:none; }

/* BrandFilter
----------------------------------------------------------------------*/
#Filter #FilterBrand
{
  border-bottom:1px solid #ccc;
  margin-bottom:12px;
}
  #Filter .brandSearchFilter ul.selectedValues
  {
    border:none;
    padding-bottom:0;
  }
  
  #Filter .brandSearchList 
  { 
    border-bottom:none;
    margin-bottom: 0;
  }
    #Filter .brandSearchList.long
    {
      /* Limit size of long brand search list. */
      height:auto;
      max-height:186px;
      margin-bottom:20px;
      overflow:auto;
      /* Also draw some nice border. */
      border:1px solid #ccc;
      border-radius:3px;
    }

  #Filter .brandSearchList li.topBrandsCaption,
  #Filter .brandSearchList li.allBrandsCaption
  {
    color:#9b9b9b;
    font-size:16px;
    line-height:32px;
    font-weight:bold;
    letter-spacing:1.25px;
    padding:4px 0 0 8px;
  }

  #Filter .brandSearchList li a
  {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

#Filter .brandSearch
{
  border:1px solid #ccc;
  border-radius:3px;
  clear:both;
  display:none;
  margin-bottom:12px;
  position:relative;
  width:100%;
}
  .JS #Filter .brandSearch{ display:block; }
  #Filter .brandSearch input
  {
    border:none;
    border-radius:0;
    height:32px;
    line-height:32px;
    padding-left:32px;
    width:100%;
  }
    #Filter .brandSearch input:focus::-webkit-input-placeholder { color:transparent; }
    #Filter .brandSearch input:focus:-moz-placeholder { color:transparent; }
    #Filter .brandSearch input:focus::-moz-placeholder { color:transparent; }
    #Filter .brandSearch input:focus:-ms-placeholder { color:transparent; }
    
  #Filter .brandSearchIcon
  {
    color:#ccc;
    left:8px;
    line-height:32px;
    position:absolute;
    top:0;
  }
    #Filter .brandSearchIcon[data-icon]::before
    {
      font-size:16px;
      line-height:32px;
    }

/* ColorFilter
----------------------------------------------------------------------*/
.filterColor a
{
  background:url('../img/no-color.png');
  border:2px solid #c7c7c7;
  border-radius:18px;
  color:#444 !important;
  float:left;
  height:36px;
  margin:0 6px 6px 3px;
  overflow:visible !important;
  position:relative;
  width:36px;
}
  .filterColor a:before{ display:none; }

  #Filter .filterColor a.active:after
  {
    right:-5px;
    top:-8px;
  }
  .filterColor a:hover,
  .filterColor a.active{ border:2px solid #222 !important; }

  .filterColor .tooltip span { bottom:38px; }
  .filterColor .tooltip:after{ content:''; }


/* white */
.filterColor a.searchcolor_2 { background:#fff; }

/* black */
.filterColor a.searchcolor_1
{
  background:#000;
  background:-moz-linear-gradient(90deg, #000 0%, #22211f 100%);
  background:-webkit-linear-gradient(90deg, #000 0%, #22211f 100%);
  background:-ms-linear-gradient(90deg, #000 0%, #22211f 100%);
  background:-o-linear-gradient(90deg, #000 0%, #22211f 100%);
} 

/* grey */
.filterColor a.searchcolor_11,
.filterColor a.searchcolor_31
{
  background:#e3e3e3;
  background:-moz-linear-gradient(90deg, #3b3b3b 0%, #9a9a9a 100%);
  background:-webkit-linear-gradient(90deg, #3b3b3b 0%, #9a9a9a 100%);
  background:-ms-linear-gradient(90deg, #3b3b3b 0%, #9a9a9a 100%);
  background:-o-linear-gradient(90deg, #3b3b3b 0%, #9a9a9a 100%);
}

/* green */
.filterColor a.searchcolor_4,
.filterColor a.searchcolor_4:hover,
.filterColor a.searchcolor_33,
.filterColor a.searchcolor_33:hover
{
  background:#2bac03;
  background:-moz-linear-gradient(90deg, #376b15 0%, #50c711 100%);
  background:-webkit-linear-gradient(90deg, #376b15 0%, #50c711 100%);
  background:-ms-linear-gradient(90deg, #376b15 0%, #50c711 100%);
  background:-o-linear-gradient(90deg, #376b15 0%, #50c711 100%);
}

/* red */
.filterColor a.searchcolor_5
{
  background:#981e32;
  background:-moz-linear-gradient(90deg, #6b1515 0%, #d90606 100%);
  background:-webkit-linear-gradient(90deg, #6b1515 0%, #d90606 100%);
  background:-ms-linear-gradient(90deg, #6b1515 0%, #d90606 100%);
  background:-o-linear-gradient(90deg, #6b1515 0%, #d90606 100%);
}

/* blue */
.filterColor a.searchcolor_6,
.filterColor a.searchcolor_87
{
  background:#5256f1;
  background:-moz-linear-gradient(90deg, #424988 0%, #0679D9 100%);
  background:-webkit-linear-gradient(90deg, #424988 0%, #0679D9 100%);
  background:-ms-linear-gradient(90deg, #424988 0%, #0679D9 100%);
  background:-o-linear-gradient(90deg, #424988 0%, #0679D9 100%);
}

/* brown */
.filterColor a.searchcolor_7,
.filterColor a.searchcolor_32
{
  background:#9f6f3b;
  background:-moz-linear-gradient(90deg, #634116 0%, #a67243 100%);
  background:-webkit-linear-gradient(90deg, #634116 0%, #a67243 100%);
  background:-ms-linear-gradient(90deg, #634116 0%, #a67243 100%);
  background:-o-linear-gradient(90deg, #634116 0%, #a67243 100%);
}

/* orange */
.filterColor a.searchcolor_9,
.filterColor a.searchcolor_76
{
  background:#ff8400;
  background:-moz-linear-gradient(90deg, #ff8c00 0%, #f4a01f 100%);
  background:-webkit-linear-gradient(90deg, #ff8c00 0%, #f4a01f 100%);
  background:-ms-linear-gradient(90deg, #ff8c00 0%, #f4a01f 100%);
  background:-o-linear-gradient(90deg, #ff8c00 0%, #f4a01f 100%);
}

/* pink */
.filterColor a.searchcolor_12,
.filterColor a.searchcolor_2500019
{
  background:#ffc9ff;
  background:-moz-linear-gradient(90deg, #e773ae 0%, #ffa1d0 100%);
  background:-webkit-linear-gradient(90deg, #e773ae 0%, #ffa1d0 100%);
  background:-ms-linear-gradient(90deg, #e773ae 0%, #ffa1d0 100%);
  background:-o-linear-gradient(90deg, #e773ae 0%, #ffa1d0 100%);
}

/* purple */
.filterColor a.searchcolor_13
{
  background:#ad00ab;
  background:-moz-linear-gradient(90deg, #74137c 0%, #db15eb 100%);
  background:-webkit-linear-gradient(90deg, #74137c 0%, #db15eb 100%);
  background:-ms-linear-gradient(90deg, #74137c 0%, #db15eb 100%);
  background:-o-linear-gradient(90deg, #74137c 0%, #db15eb 100%);
}

/* beige */
.filterColor a.searchcolor_15
{
  background:#eede10;
  background:-moz-linear-gradient(90deg, #d7cdae 0%, #f1e7c7 100%);
  background:-webkit-linear-gradient(90deg, #d7cdae 0%, #f1e7c7 100%);
  background:-ms-linear-gradient(90deg, #d7cdae 0%, #f1e7c7 100%);
  background:-o-linear-gradient(90deg, #d7cdae 0%, #f1e7c7 100%);
}

/* yellow */
.filterColor a.searchcolor_75,
.filterColor a.searchcolor_77
{
  background:#ffff00;
  background:-moz-linear-gradient(90deg, #c9b611 0%, #ffe600 100%);
  background:-webkit-linear-gradient(90deg, #c9b611 0%, #ffe600 100%);
  background:-ms-linear-gradient(90deg, #c9b611 0%, #ffe600 100%);
  background:-o-linear-gradient(90deg, #c9b611 0%, #ffe600 100%);
}

/* transparent */
.filterColor a.searchcolor_10
{
  background: -moz-radial-gradient(#fff 0%, #f8f8f8 66%, #e0e0e0 100%);
  background: -webkit-radial-gradient(#fff 0%, #f8f8f8 66%, #e0e0e0 100%);
  background: -ms-radial-gradient(#fff 0%, #f8f8f8 66%, #e0e0e0 100%);
  background: -o-radial-gradient(#fff 0%, #f8f8f8 66%, #e0e0e0 100%);
}

/* silver */
.filterColor a.searchcolor_8
{
  background:#e6e6e6;
  background:-moz-linear-gradient(135deg, #e6e6e6 0%, #999 50%, #e6e6e6 100%);
  background:-webkit-linear-gradient(135deg, #e6e6e6 0%, #999 50%, #e6e6e6 100%);
  background:-ms-linear-gradient(135deg, #e6e6e6 0%, #999 50%, #e6e6e6 100%);
  background:-o-linear-gradient(135deg, #e6e6e6 0%, #999 50%, #e6e6e6 100%);
}

/* gold */
.filterColor a.searchcolor_14
{
  background:#ffffcc;
  background:-moz-linear-gradient(135deg, #ffffcc 0%, #cc9933 50%, #ffffcc 100%);
  background:-webkit-linear-gradient(135deg, #ffffcc 0%, #cc9933 50%, #ffffcc 100%);
  background:-ms-linear-gradient(135deg, #ffffcc 0%, #cc9933 50%, #ffffcc 100%);
  background:-o-linear-gradient(135deg, #ffffcc 0%, #cc9933 50%, #ffffcc 100%);
}

/* military green */
.filterColor a.searchcolor_2500017
{
  background:#253212;
  background:-moz-linear-gradient(90deg, #253212 0%, #658732 100%);
  background:-webkit-linear-gradient(90deg, #253212 0%, #658732 100%);
  background:-ms-linear-gradient(90deg, #253212 0%, #658732 100%);
  background:-o-linear-gradient(90deg, #253212 0%, #658732 100%);
}

/* multicolor */
.filterColor a.searchcolor_2500018
{
  background:-moz-linear-gradient(135deg, #d5e317 0%, #c6273b 21%, #6223ae 47%, #53a0fd 75%, #aded3c 100%);
  background:-webkit-linear-gradient(135deg, #d5e317 0%, #c6273b 21%, #6223ae 47%, #53a0fd 75%, #aded3c 100%);
  background:-ms-linear-gradient(135deg, #d5e317 0%, #c6273b 21%, #6223ae 47%, #53a0fd 75%, #aded3c 100%);
  background:-o-linear-gradient(135deg, #d5e317 0%, #c6273b 21%, #6223ae 47%, #53a0fd 75%, #aded3c 100%);
}

/* havana */
.filterColor a.searchcolor_2500011
{
  background: url(../img/havanna.png);
}


/* PriceFilter
----------------------------------------------------------------------*/
/* QUICK FIX FOR NON-INPUTS IN PRICEFILTER */
#FilterPrice input
{
  float:left;
  margin-top:6px;
  width:69px;
}
  #FilterPrice #InputFilterPriceMax
  {
    float:right;
    text-align:right;
  }
  
  #FilterPrice #SubmitFilterPrice
  {
    float:right;
    margin-top:10px;
    text-align:center;
    width:50px;
  }

#FilterPrice .sildeBox{ width:164px; }
#FilterPrice #SliderFilterPrice
{
  background:#e6e6e6;
  border:none;
  height:3px;
  margin:12px 8px;
  width:146px;
}

#FilterPrice .ui-widget-header { background:#222; }
#FilterPrice .ui-corner-all { border-radius:12px; }
#FilterPrice .ui-slider-handle { top:-8px; margin-left:-8px;}


/* Headline ToolTip
----------------------------------------------------------------------*/
#Filter h3.myFrameWidth span
{
  bottom:26px;
  font-size:13px;
  font-weight:normal;
  left:auto;
  right:-276px;
  width:296px;
}

#Filter .myFrameWidth span div
{
  background:url('../img/detail-dimension-figure.png') no-repeat 145px 0;
  float:left;
  min-height:65px;
  overflow:hidden;
  width:100%;
}
#Filter .myFrameWidth dl,
#Filter .myFrameWidth dt,
#Filter .myFrameWidth dd
{
  float:left;
  margin:0;
  padding:0;
  width:135px;
}
  #Filter .myFrameWidth dt
  {
    font-weight:bold;
    width:55px;
  }
  #Filter .myFrameWidth dd{ width:80px; }

#Filter .myFrameWidth p.wording
{
  bottom:4px;
  margin:0;
  padding:0;
  position:absolute; 
  right:65px;
}

#Filter h3.faceShape span
{
  bottom:26px;
  font-size:13px;
  font-weight:normal;
  left:auto;
  right:-95px;
  width:115px;
}
  #Filter h3.faceShape span a:before{ display:none; }
  #Filter h3.faceShape span a{ padding:0; }
  
#FilterBubble
{
  cursor:pointer;
  display:none;
  left:194px;
  padding:12px 12px 12px 18px;
  position:absolute;
  z-index:1;
}

.customSelectFilter{
  margin-bottom:12px;
  width:100%;
}

.filterInfo{
  color:#767676;
}

/* FaceShapeLayer
----------------------------------------------------------------------*/

#Filter ul li#GetFaceShapeLayer
{
  width:100%;
  margin:12px 0 0 0;
  white-space:nowrap;
  display: flex;
  justify-content: center;
}
#GetFaceShapeLayer img
{
  float:left;
  margin-right:6px;
  margin-bottom:3px;
}
#GetFaceShapeLayer span
{
  float:left;
  font-size:13px;
  overflow:hidden;
  width: calc(100% - 46px);
}

/* FrameSizeLayer
----------------------------------------------------------------------*/
#Filter ul li a.frameSizeFilter:last-child{ margin-bottom:6px; }

#Filter ul li#GetFrameSizeLayer
{
  width:100%;
  margin:12px 0 0 0;
  white-space:nowrap;
}
#GetFrameSizeLayer img
{
  float:left;
  margin-right:6px;
  margin-bottom:3px;
}
#GetFrameSizeLayer span
{
  float:left;
  font-size:13px;
  overflow:hidden;
  width: calc(100% - 46px);
}

/* Filter MainCategory
----------------------------------------------------------------------*/
#MainCategoryFilter h3{
  color:#4a4a4a;
  display: block;
  font-size: 24px;
  font-weight: normal;
  margin: 12px 0;
  text-align: center;
}

#MainCategoryFilter ul{
  display: block;
  margin-bottom: 36px;
  text-align: center;
  width: 100%;
}
  #MainCategoryFilter li{
    display: inline-block;
    margin: 0 12px;
    position: relative;
  }
    #MainCategoryFilter.grid9 li{ max-width: 29.5%; }
      #MainCategoryFilter a:hover img,
      #MainCategoryFilter .active img{ opacity: 0.5; }
      #MainCategoryFilter a:hover span{ text-decoration: underline !important; }
    #MainCategoryFilter li img{
      height: auto;
      width: 100%;
    }
    #MainCategoryFilter li a span{
      bottom: 0;
      left: 50%;
      position: absolute;
      text-align: center;
      width: 100%;

      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }