@charset "UTF-8";
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION:  The primary SASS file that imports SCSS code to build and style Category page. 
  
  NOTE: From SCSS Generated. 

----------------------------------------------------------------------- **/
/*

  ======== TABLE OF CONTENTS ========  
  
    1. GLOBAL VARIABLES 
    2. EXTERNAL CSS 
    3. THE COASTAL CONTACTS CSS 
    
  ====================================

**/
/*  _____________________________________________________________________________

    1. GLOBAL VARIABLES 
 _____________________________________________________________________________  **/
/* Required partials that provide global variables referenced in SCSS */
/* -----------------------------------------------------------------------


 Coastal Contacts
 
	* DESCRIPTION:  Global reusable styles to ensure consistent layout across pages. 
	
	!!!IMPORTANT: 	THIS FILE MUST NOT HAVE CLASS'S AND ID'S. ONLY REUSABLE SCSS 
					VARIABLES, FUNCTIONS AND MIXINS. FOR REUSABLE CLASS/ID ADD THEM IN _master.scss 

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
   
    1. CUSTOM Sizes	
	    1.1 RED (HUGE) Breakpoints 
   	    1.2 RED (HUGE) Variables 

	2. TYPOGRAPHY & FONT ICONS
		2.1 FONT ICONS 
		2.2 DEFAULT FONT COLORs
	3. BUTTONS MIXINS
		3.1   RED BUTTONS MIXINS
	4. IMAGE URL PATHS
	 	4.1  IMAGE DIRECTORY PATHS
	 	4.2  IMAGE REFERENCES 
	5. SASS GLOBAL MIXINS 
	6. NAVIGATION MENU VARIABLES
		6.1 TOP NAVIGATION VARIABLES 
		6.2 MMENU VARIABLES 
	
  ====================================	  
	  
*/
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION:  Globals settings for Foundation Framework. 

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
   
    1. COASTAL CONTACTS ALL STORES GLOBAL SETTINGS
       1.1 PAGE FRAME & SKELETON  
       1.2 TYPOGRAPHY 
       1.3 BUTTONS
       1.3 ERRORS
  2. FOUNDATION SETTINGS
  
  ====================================    
    
*/
/* Import Coastal common settings for all stores. */
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION:  Globals settings for Coastal Contacts RWD stores. 

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
   
    1. COASTAL CONTACTS ALL STORES GLOBAL SETTINGS
       1.1 PAGE FRAME & SKELETON  
       1.2 TYPOGRAPHY 
       1.3 BUTTONS
       1.3 ERRORS
  
  ====================================    
    
*/
/* Store-specific settings - colors, styles etc. */
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION:  Globals settings for store-specific styles and layout for www.coastal.com. 

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
   
    1. COASTAL CONTACTS STORE-SPECIFIC SETTINGS 
        1.1 PAGE FRAME & SKELETON
        1.2 BUTTONS 
          1.2.1 RWD BUTTONS 
          1.2.2 REBRAND DESIGN BUTTONS 
        1.3 TOOLTIPS 
        1.4 TYPOGRAPHY
        1.4.1 CATALOG PAGE
  
  ====================================    
    
*/
/*  ==============================================================================
    1.1 PAGE FRAME & SKELETON
============================================================================== */
/*  ==============================================================================
    1.2 BUTTONS 
============================================================================== */
/*  -----------------------------------------------------------------------------
    1.2.1 RWD BUTTONS 
 ----------------------------------------------------------------------------- */
/* Primary Button */
/*  -----------------------------------------------------------------------------
    1.2.2 REBRAND DESIGN BUTTONS 
 ----------------------------------------------------------------------------- */
/* Primary Button */
/*  ==============================================================================
    1.3 TOOLTIPS 
============================================================================== */
/*  ==============================================================================
    1.4 TYPOGRAPHY 
============================================================================== */
/*  -----------------------------------------------------------------------------
    1.4.1 CATALOG PAGE
 ----------------------------------------------------------------------------- */
/*  _____________________________________________________________________________

    1. COASTAL CONTACTS ALL STORES GLOBAL SETTINGS
 _____________________________________________________________________________  */
/*  ==============================================================================
    1.1 PAGE FRAME & SKELETON
============================================================================== */
/*  ==============================================================================
    1.2 TYPOGRAPHY 
============================================================================== */
/*  ==============================================================================
    1.3 BUTTONS 
============================================================================== */
/*  ==============================================================================
    1.3 ERRORS
============================================================================== */
/*  ==============================================================================
    1.1 PAGE FRAME & SKELETON
============================================================================== */
/*  ==============================================================================
    1.2 TYPOGRAPHY 
============================================================================== */
/*  _____________________________________________________________________________

    2. FOUNDATION SETTINGS
 _____________________________________________________________________________  */
meta.foundation-version {
  font-family: "/5.3.1/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0; }

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

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

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

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

meta.foundation-data-attribute-namespace {
  font-family: false; }

html, body {
  height: 100%; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  font-size: 16px; }

body {
  background: #fff;
  color: #67757f;
  padding: 0;
  margin: 0;
  font-family: "HelveticaNeue", "Helvetica", Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

a:hover {
  cursor: pointer; }

img {
  max-width: 100%;
  height: auto; }

img {
  -ms-interpolation-mode: bicubic; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
  max-width: none !important; }

.left {
  float: left !important; }

.right {
  float: right !important; }

.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.hide {
  display: none; }

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  display: inline-block;
  vertical-align: middle; }

textarea {
  height: auto;
  min-height: 50px; }

select {
  width: 100%; }

/*  _____________________________________________________________________________

    1. Custom Sizes
 _____________________________________________________________________________  */
/* -------------------------------------------------------------------------
    1.1 RED (HUGE) BREAKPOINTS 
------------------------------------------------------------------------- */
/* Breakpoints mapping between Huge and Clearly */
/* -------------------------------------------------------------------------
    1.2 RED (HUGE) Variables 
------------------------------------------------------------------------- */
/* colors */
/* timing */
/*  _____________________________________________________________________________

    2. TYPOGRAPHY & FONT ICONS
 _____________________________________________________________________________  */
/* !!! FONT ICONS MANAGED BY http://app.fontastic.me/ */
@font-face {
  font-family: "font-icons";
  src: url("../../images/rwd/font-icons/fonts/font-icons.eot");
  src: url("../../images/rwd/font-icons/fonts/font-icons.eot#iefix") format("embedded-opentype"), url("../../images/rwd/font-icons/fonts/font-icons.woff") format("woff"), url("../../images/rwd/font-icons/fonts/font-icons.ttf") format("truetype"), url("../../images/rwd/font-icons/fonts/font-icons.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

/* !!! FONT ICONS FROM HUGE REDESIGN PROJECT (RED) */
@font-face {
  font-family: "fonts-icons-red";
  src: url("../../images/rwd/font-icons/fonts/fonts-icons-red.eot");
  src: url("../../images/rwd/font-icons/fonts/fonts-icons-red.eot#iefix") format("embedded-opentype"), url("../../images/rwd/font-icons/fonts/fonts-icons-red.woff") format("woff"), url("../../images/rwd/font-icons/fonts/fonts-icons-red.ttf") format("truetype"), url("../../images/rwd/font-icons/fonts/fonts-icons-red.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

/* -------------------------------------------------------------------------
    2.1 FONT ICONS 
------------------------------------------------------------------------- */
.underlined {
  text-decoration: underline; }

.bg-grey-quarry {
  background-color: #F0F0F0; }

/* -------------------------------------------------------------------------
    2.1 FONT ICONS 
------------------------------------------------------------------------- */
.main-text-font-color {
  color: #67757f; }

/*  _____________________________________________________________________________

    3. BUTTONS MIXINS
 _____________________________________________________________________________  */
/*  _____________________________________________________________________________

    4. IMAGE URL PATHS
 _____________________________________________________________________________  */
/*  ----------------------------------------------------------------------------
    4.1  IMAGE DIRECTORY PATHS
 ----------------------------------------------------------------------------  */
/* Images under /images/rwd/buttons/ */
/* Images under /images/rwd/icons/ */
/* Images under /images/rwd/logos/ */
/* Images under /images/rwd/product/ */
/* Images under /images/rwd/features/ */
/* Images under /images/rwd/sprites/ */
/* Images under /images/rwd/sprites/globals */
/* Images under /images/rwd/sprites/left-nav */
/* Images under /images/rwd/sprites/catalog */
/* Images under /images/rwd/sprites/checkout */
/* Images under /images/rwd/sprites/top-nav */
/* Images under /images/rwd/sprites/subhome */
/* Images under /images/rwd/sprites/subscription */
/* images/rwd/sprites/wizards/rx-wizard */
/* images/rwd/icons/red */
/*  ----------------------------------------------------------------------------
    4.2  IMAGE REFERENCES 
 ----------------------------------------------------------------------------  */
/* Images under /images/rwd/icons/ */
/* Images under /images/rwd/features/ */
/*  _____________________________________________________________________________

    5. SASS GLOBAL MIXINS 
 _____________________________________________________________________________  */
/* Builds the New design error style */
/* Styles a hover for tiles, VM images etc. Global style to be applied where similar effect is needed */
/*  _____________________________________________________________________________

   	6. NAVIGATION MENU VARIABLES 
 _____________________________________________________________________________  */
/* ------------------------------------------------------------------------
    6.1 TOP NAVIGATION VARIABLES 
--------------------------------------------------------------------------- */
/* 1200 total width - 4px grid padding (x2) - 2px padding within wrapper = 1090 */
/* ------------------------------------------------------------------------
    6.2 MMENU VARIABLES 
--------------------------------------------------------------------------- */
/* mmenu overwrite default settings */
/* Need to take 1px off for the bottom border displayed for off canvas sliding menu items */
/*  _____________________________________________________________________________

   2. EXTERNAL CSS  
 _____________________________________________________________________________  **/
/*  _____________________________________________________________________________

   3. THE COASTAL CONTACTS CSS  
 _____________________________________________________________________________  **/
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION: The stylesheet for Virtual Mirror (Try On View).  
  
  NOTE: From SCSS Generated. 

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
  
   	1. TRY-ON-VIEW TAB
   	2. AVATAR CAROUSEL 
   	3. PRODUCT PAGE
  
*/
/*  _____________________________________________________________________________

    1. TRY-ON-VIEW TAB
 _____________________________________________________________________________  */
@media only screen and (min-width: 1025px) {
  #global-wizard-target {
    height: 1px; } }

#vm-upload-tools {
  height: 100%;
  padding-left: 0.625rem; }
  #vm-upload-tools .upload-pic-txt {
    margin-bottom: 0.625rem; }
  #vm-upload-tools a {
    border-bottom: solid 1px #67757f;
    color: #67757f;
    line-height: 1.3; }
    #vm-upload-tools a:hover {
      text-decoration: none; }

#vm-carousel {
  margin: 0 auto;
  position: relative;
  max-width: 19.375rem;
  /* Don't make wider since on small screen will push layout */ }

.vm-carousel-title {
  margin-top: 0.3125rem; }
  @media only screen {
    .vm-carousel-title {
      text-align: center; } }
  @media only screen and (min-width: 1025px) {
    .vm-carousel-title {
      margin-left: 0.625rem;
      text-align: left; } }

/* Add Category Page specific "Try On View" carousel styles here */
.category-page .vm-carousel-container {
  clear: both;
  height: 4.6875rem;
  padding-left: 0.3125rem;
  padding-top: 0.5rem; }

.category-page .vm-bx-prev {
  background: url("../../images/rwd/sprites/catalog/vm_carousel_nav.png") 0 0 no-repeat;
  height: 62px;
  position: absolute;
  top: 0;
  text-indent: -999999px;
  width: 37px;
  left: -1.25rem; }

.category-page .vm-bx-next {
  background: url("../../images/rwd/sprites/catalog/vm_carousel_nav.png") -37px 0 no-repeat;
  height: 62px;
  position: absolute;
  top: 0;
  text-indent: -999999px;
  width: 37px;
  left: 18.75rem; }

@media only screen and (min-width: 1025px) {
  .category-page .bx-window {
    left: 0;
    position: relative;
    width: 19.5rem !important; } }

/* Add Product Page specific "Try On View" carousel styles here */
.product-page .vm-carousel-container, .product-page .vm-carousel-container-pp {
  clear: both;
  height: 4.6875rem;
  padding-left: 0.3125rem;
  padding-top: 0.5rem; }
  @media only screen and (max-width: 640px) {
    .product-page .vm-carousel-container, .product-page .vm-carousel-container-pp {
      padding-left: 1.125rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    .product-page .vm-carousel-container, .product-page .vm-carousel-container-pp {
      padding-left: 0.5rem; } }
  @media only screen and (min-width: 640px) and (max-width: 800px) {
    .product-page .vm-carousel-container, .product-page .vm-carousel-container-pp {
      padding-left: 0.5rem; } }
  @media only screen and (min-width: 1025px) {
    .product-page .vm-carousel-container, .product-page .vm-carousel-container-pp {
      padding-left: 1.25rem; } }

.product-page .vm-bx-prev {
  background: url("../../images/rwd/sprites/catalog/vm_carousel_nav.png") 0 0 no-repeat;
  height: 62px;
  position: absolute;
  top: 0;
  text-indent: -999999px;
  width: 37px;
  left: -1.5625rem; }
  @media only screen and (max-width: 1024px) {
    .product-page .vm-bx-prev {
      left: -1.0625rem; } }

.product-page .vm-bx-next {
  background: url("../../images/rwd/sprites/catalog/vm_carousel_nav.png") -37px 0 no-repeat;
  height: 62px;
  position: absolute;
  top: 0;
  text-indent: -999999px;
  width: 37px;
  left: 14.5rem; }
  @media only screen and (max-width: 1024px) {
    .product-page .vm-bx-next {
      left: 15.9375rem; } }

@media only screen and (min-width: 1025px) {
  .product-page .bx-window {
    left: 0.9375rem;
    position: relative;
    width: 14rem !important; } }

@media only screen and (max-width: 1024px) {
  .product-page .bx-window {
    left: 0.5rem;
    width: 15.75rem !important; } }

.customer-face-divider {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #b4b4b4;
  border-image: none;
  border-style: none dotted none none;
  border-width: 2px;
  float: left;
  height: 3.375rem;
  margin-top: 0.3125rem;
  vertical-align: middle;
  width: 1px; }

#vm-upload-image {
  float: left;
  margin: 0.9375rem 0; }

.vm-login-txt {
  clear: both;
  width: 100%; }
  .vm-login-txt a {
    color: #0069aa; }

/*  _____________________________________________________________________________

    2. AVATAR CAROUSEL 
 _____________________________________________________________________________  */
.bx-wrapper img {
  display: block; }

.face-image-carousel {
  cursor: pointer;
  height: 3.4375rem;
  width: 2.8125rem; }

.delete_face_back {
  position: absolute;
  margin: 0 1.875rem;
  width: 0.9375rem !important;
  background-color: rgba(0, 0, 0, 0.5); }

.delete_face {
  cursor: pointer;
  background: url("../../images/rwd/icons/delete_face.png") no-repeat scroll 0 0 transparent;
  height: 14px;
  width: 14px;
  opacity: 0.7;
  filter: alpha(opacity=70); }
  .delete_face:hover {
    opacity: 1;
    filter: alpha(opacity=100); }

.face-ajax {
  display: none;
  position: absolute;
  margin: 0.625rem 0.3125rem; }

.pager {
  float: left;
  margin: 0.3125rem; }
  .pager:hover {
    outline: none;
    box-shadow: 0 0 0.625rem #e6ecf0;
    outline: 2px solid #dfe9ef; }

.pager-selected {
  outline: none;
  box-shadow: 0 0 0.625rem #e6ecf0;
  outline: 2px solid #dfe9ef; }

/*  ----------------------------------------------------------------------------
    
    2.1  VERTICAL LINE WITH TEXT 
    
 ----------------------------------------------------------------------------  */
.vertical-line-wrapper {
  width: 3.125rem; }

.vertical-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0.0625rem;
  background: #dfe9ef;
  z-index: 1; }

.vertical-line-word-wrapper {
  text-align: center;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
  z-index: 2;
  width: 0.9375rem; }

.vertical-line-word {
  background: #FFF;
  letter-spacing: 0.0625rem;
  padding: 0.3125rem;
  text-transform: uppercase; }

/*  _____________________________________________________________________________

    3. PRODUCT PAGE
 _____________________________________________________________________________  */
#product-tryon-view {
  height: 30.875rem;
  position: relative;
  text-align: center;
  width: 100%; }
  #product-tryon-view #vm-upload-tools-pp {
    cursor: pointer;
    height: 3.4375rem;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100%; }
  #product-tryon-view #vm-upload-image {
    text-align: center;
    width: 100%; }
  #product-tryon-view .product-tryon-wrapper {
    margin: 0 auto;
    width: 15.5rem; }
    #product-tryon-view .product-tryon-wrapper .product-image-container-try-on-view {
      margin-left: 0;
      margin-top: 0;
      position: absolute; }
    #product-tryon-view .product-tryon-wrapper .frame-image {
      margin-top: 0.3125rem; }
    #product-tryon-view .product-tryon-wrapper .frame-size-pp {
      margin-top: 0px !important;
      width: 15.5rem; }
    #product-tryon-view .product-tryon-wrapper .frame-image-container {
      margin-left: 0;
      margin-top: 0;
      position: absolute;
      z-index: 9; }
    #product-tryon-view .product-tryon-wrapper .frame-image-container-avatar-pp, #product-tryon-view .product-tryon-wrapper .frame-image-container-pp-reset {
      margin-left: 3.4375rem;
      margin-top: 1.25rem;
      position: absolute; }
    #product-tryon-view .product-tryon-wrapper .frame-image-avatar-pp {
      margin-top: 100px !important;
      margin-left: 2.375rem;
      width: 10.625rem; }
    #product-tryon-view .product-tryon-wrapper .frame-image-container-pp {
      text-align: center; }

/* override for contactsan */
html[lang="ja_JP"] #product-tryon-view .frame-image-avatar-pp {
  margin-top: 104px !important; }

#vm-webcam-img {
  background: url("../../images/background/virtual-mirror/webcam.jpg") no-repeat;
  width: 100px;
  height: 100px; }

#vm-monitor-img {
  background: url("../../images/background/virtual-mirror/monitor.jpg") no-repeat;
  width: 100px;
  height: 100px; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

#vm .vm-clear {
  clear: both;
  height: 1px; }

#vm-tile {
  width: 850px;
  height: 665px;
  margin: 0 auto;
  background: url("../../images/background/virtual-mirror/vm-tile-bg.jpg") no-repeat;
  overflow: hidden; }
  #vm-tile label, #vm-tile input {
    display: inline-block; }

#vm-tile ul {
  margin-left: 0; }

#vm-tile ul li {
  list-style: none; }

#vm-tile > h1 {
  height: 44px;
  margin: 46px 0 0 38px;
  font: normal normal bold 44px/44px "Myriad Pro","Arial","Helvetica","sans-serif";
  /* 	color: #f244a8; */ }

#vm-tile > h2 {
  height: 30px;
  margin: 0 0 0 38px;
  font: normal normal bold 30px/25px "Myriad Pro","Arial","Helvetica","sans-serif";
  /* 	color: #f244a8; */ }

#vm {
  min-height: 550px;
  position: relative;
  padding: 25px 35px 20px;
  width: 780px; }

#vm-loader {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 999; }

#vm-intro {
  display: block; }

#vm-intro-one {
  height: 200px; }

#vm-intro-one h1 {
  font-size: 18px; }

#vm-intro-one h2 {
  font-size: 14px;
  line-height: 18px; }

#vm .vm-breadcrumbs {
  margin: 0;
  padding: 0;
  height: 64px;
  width: 785px;
  background: url("../../images/background/virtual-mirror/vm-breadcrumbs.png") no-repeat; }

#vm .vm-breadcrumbs li {
  display: block;
  float: left;
  height: 42px;
  width: 372px;
  padding: 22px 0 0 22px;
  font: normal normal bold 22px/22px "Myriad Pro","Arial","Helvetica","sans-serif";
  color: #a4cae3;
  z-index: 1;
  margin: 0 0 0 -5px; }

#vm .vm-breadcrumbs li:first-child {
  margin: 0;
  z-index: 5; }

#vm .vm-breadcrumbs li.vm-active span {
  /* 	color: #ef1e95; */
  color: #000;
  margin-right: 5px; }

#vm .vm-breadcrumbs li.vm-active {
  color: #0068aa; }

#vm .vm-breadcrumbs li.vm-inactive span,
#vm .vm-breadcrumbs li.vm-was-active span {
  /* 	color: #ec9fd3; */
  color: #999;
  margin-right: 7px; }

#vm .vm-breadcrumbs li:last-child {
  margin-left: 20px; }

#vm .vm-breadcrumbs li.vm-inactive,
#vm .vm-breadcrumbs li.vm-was-active {
  color: #91bfdc; }

/* =Step one */
#vm-step-one {
  display: block;
  float: left; }

#vm-step-one-left,
#vm-step-one-right {
  float: left; }

#vm-step-one-left {
  width: 355px;
  margin: 11px 0 0; }

#vm-step-one-left > h3 {
  margin: 0 0 0 7px;
  font: normal normal bold 24px/34px "Myriad Pro","Arial","Helvetica","sans-serif";
  color: #0171b7; }

#vm-step-one-left > p {
  margin: -5px 0 0 7px;
  font: normal normal normal 17px/18px "Arial","Helvetica","sans-serif";
  color: #000;
  text-align: left; }

#vm-step-one-left > img {
  display: block;
  margin: 38px 0 0 60px; }

#vm-sample-image {
  background: url("../../images/background/virtual-mirror/sample-photo.jpg") no-repeat;
  width: 250px;
  height: 310px;
  margin: 38px 0 0 60px; }

#vm-step-one-right {
  width: 405px;
  margin: 44px 0 0 20px; }

#vm-picture-options-or {
  background: url("../../images/background/virtual-mirror/vm-picture-options-or.jpg") no-repeat;
  width: 50px;
  height: 50px;
  margin: 7px 0 23px 22px; }

#vm-take-picture-left,
#vm-take-picture-right,
#vm-upload-picture-left,
#vm-upload-picture-right {
  float: left; }

#vm-take-picture-left,
#vm-upload-picture-left {
  width: 100px; }

#vm-take-picture-right,
#vm-upload-picture-right {
  width: 280px;
  margin: 0 0 0 25px; }

#vm-take-picture-right > a,
#vm-upload-picture-right > a {
  display: block;
  width: auto;
  height: 56px;
  line-height: 56px;
  text-indent: -99999px;
  cursor: pointer; }

#vm-take-picture-right > a {
  background: transparent url("../../images/background/virtual-mirror/button-takeAPhoto.png") no-repeat left top; }

#vm-upload-picture-right > a {
  background: transparent url("../../images/background/virtual-mirror/button-uploadAPhoto.png") no-repeat left top; }

#vm-take-picture-right > a:hover,
#vm-upload-picture-right > a:hover {
  background-position: left bottom; }

#vm-take-picture-right > p,
#vm-upload-picture-right > p {
  width: 220px;
  margin: 16px 0 0 3px;
  font: normal normal normal 11px/16px "Arial","Helvetica","sans-serif";
  color: #252522;
  text-align: left; }

#vm-step-two-upload-target-iframe {
  display: none; }

.vm-step-left {
  float: left;
  width: 510px;
  margin: 2px 0 0 0; }

.vm-step-left-top {
  position: relative;
  width: 510px;
  height: 343px;
  margin: 0;
  padding: 0;
  background: transparent url("../../images/background/virtual-mirror/vm-step-left-top-bg.png") no-repeat left top; }

.vm-photo-target {
  position: absolute;
  width: 498px;
  height: 331px;
  left: 4px;
  top: 3px;
  background: transparent url("../../images/background/virtual-mirror/vm-photo-target-upload.png") no-repeat left top; }

.vm-step-left-bottom {
  border: 1px solid #D1F0FF;
  height: auto;
  margin: 5px 0 0 4px;
  padding: 4px 10px 12px;
  width: 483px; }

.vm-step-left-bottom > .vm-step-slider-controls {
  width: 390px;
  height: 65px;
  margin: 0 auto; }

.vm-step-left-bottom > .vm-instructions-tip {
  font: normal normal normal 12px/14px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-instructions-tip {
  display: none; }

#vm-step-two-slider-size, #vm-step-two-slider-size {
  float: left;
  margin: 10px;
  width: 130px; }

#vm-step-two-slider-size-camera, #vm-step-two-slider-rotate-camera,
#vm-step-two-slider-size-upload, #vm-step-two-slider-rotate-upload {
  float: left;
  width: 128px;
  margin-top: 15px; }

#vm-step-two-slider-size-camera, #vm-step-two-slider-size-upload {
  margin-right: 10px; }

#zoomContainer > h4, #rotationContainer > h4, .mvn_container > h4 {
  font: normal normal bold 15px/15px "Myriad Pro","Arial","Helvetica","sans-serif";
  color: #0068aa;
  text-align: center; }

.vm-step-right {
  float: left;
  width: 238px;
  height: auto;
  margin: 4px 0 0 5px;
  padding: 15px;
  border: 1px solid #d1f0ff;
  box-sizing: initial; }

.vm-step-right > h3 {
  margin: 0 0 8px;
  font: normal normal bold 16px/17px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-step-right > ol {
  margin: 0 0 12px 18px;
  padding: 0;
  list-style: decimal outside; }

.vm-step-right > ol > li label {
  font: normal normal normal 12px/17px "Arial","Helvetica","sans-serif"; }

.vm-step-right > ol > li {
  margin: 0 0 5px 0;
  font: normal normal normal 12px/17px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-step-right > ol > li:first-child {
  margin: 0 0 5px 0; }

.vm-step-right > ol > li > P {
  font: normal normal normal 12px/17px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-step-right > .vm-instructions-tip {
  margin: 0 0 10px 0;
  font: normal normal normal 10px/15px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-step-right > .vm-my-pd-wrapper {
  width: auto;
  height: auto;
  margin: 0 0 13px;
  padding: 6px;
  background-color: #F2F2F2;
  border-radius: 5px;
  border: 1px solid #DADADA;
  text-align: center;
  box-sizing: initial; }

.vm-step-right > .vm-my-pd-wrapper label.vm-step-my-pd-input-label {
  font: normal normal bold 15px/15px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-step-right > .vm-my-pd-wrapper input.vm-step-my-pd-input {
  width: 35px;
  height: 22px;
  padding: 1px;
  font: normal normal normal 15px/15px "Arial","Helvetica","sans-serif";
  color: #252522; }

.vm-step-right > .vm-back-try-buttons {
  width: 228px;
  height: 28px; }

.vm-step-right > .vm-back-try-buttons > .vm-button-backAStep,
.vm-step-right > .vm-back-try-buttons > .vm-button-tryGlasses {
  display: block;
  width: 110px;
  height: 28px;
  line-height: 28px;
  text-indent: -99999px; }

.jp-virtual-mirror .vm-step-right > .vm-back-try-buttons > .vm-button-tryGlasses {
  background-size: 118px 28px;
  height: 28px;
  width: 118px; }

.vm-step-right > .vm-back-try-buttons > .vm-button-backAStep {
  float: left;
  background: transparent url("../../images/background/virtual-mirror/button-backAStep.png") no-repeat left top; }

.vm-step-right > .vm-back-try-buttons > .vm-button-tryGlasses {
  float: right;
  background: transparent url("../../images/background/virtual-mirror/button-tryGlasses.png") no-repeat left top; }

.vm-step-right > .vm-back-try-buttons > .vm-button-backAStep:hover,
.vm-step-right > .vm-back-try-buttons > .vm-button-tryGlasses:hover {
  background-position: left bottom; }

.vm-photo-privacy-link, .vm-upload-privacy-link {
  margin-top: 5px; }

.vm-upload-privacy-link a {
  margin-left: 65px; }

.vm-photo-privacy-link a {
  margin-left: 45px; }

.vm-photo-privacy-link a, .vm-upload-privacy-link a {
  color: #0091ba;
  text-decoration: none; }

.vm-photo-privacy-link a:hover, .vm-upload-privacy-link a:hover {
  text-decoration: underline; }

#vm-step-two-webcam {
  display: none;
  float: left; }

#vm-camera {
  margin: 2px 0 0 4px;
  padding: 5px 0 0;
  width: 506px;
  height: 333px;
  position: absolute;
  top: 0; }

#vm-screen {
  border: 1px solid #d3f1ff;
  width: 497px;
  height: 328px;
  margin: 0;
  padding: 0;
  background: #ccc;
  line-height: 333px;
  text-align: center;
  color: #666; }

.vm-settings {
  position: absolute;
  right: 37px;
  top: 448px;
  width: 30px;
  height: 28px;
  cursor: pointer; }

.vm-webcam-target {
  position: absolute;
  width: 504px;
  height: 335px;
  left: 4px;
  top: 3px;
  background: transparent url("../../images/background/virtual-mirror/vm-photo-target-upload.png") no-repeat left top; }

.vm-webcam-target-top {
  position: absolute;
  top: 0px;
  left: 3px;
  height: 29px;
  width: 504px;
  background: transparent url("../../images/background/virtual-mirror/vm-photo-target-webcam-top.png") no-repeat left top; }

.vm-webcam-target-left {
  position: absolute;
  top: 28px;
  left: 3px;
  height: 294px;
  width: 135px;
  background: transparent url("../../images/background/virtual-mirror/vm-photo-target-webcam-left.png") no-repeat left top; }

.vm-webcam-target-right {
  position: absolute;
  top: 28px;
  left: 376px;
  height: 294px;
  width: 135px;
  background: transparent url("../../images/background/virtual-mirror/vm-photo-target-webcam-right.png") no-repeat left top; }

.vm-webcam-target-bottom {
  position: absolute;
  top: 321px;
  left: 3px;
  height: 20px;
  width: 504px;
  background: transparent url("../../images/background/virtual-mirror/vm-photo-target-webcam-bottom.png") no-repeat left top; }

.vm-step-right > ol > li a.vm-button-takePhotoNow {
  display: block;
  width: auto;
  height: 28px;
  margin: 4px 0 0 0;
  background: transparent url("../../images/background/virtual-mirror/button-takePhotoNow.png") no-repeat left top;
  line-height: 28px;
  text-indent: -99999px; }

.vm-step-right > ol > li a.vm-button-takePhoto:hover {
  background-position: left bottom; }

.vm-step-right > ol > li a.vm-button-retakePhoto {
  display: block;
  width: auto;
  height: 28px;
  margin: 4px 0 0 20px;
  background: transparent url("../../images/background/virtual-mirror/button-retakePhoto.png") no-repeat left top;
  line-height: 28px;
  text-indent: -99999px; }

.vm-step-right > ol > li a.vm-button-retakePhoto:hover {
  background-position: left bottom; }

#vm-step-two-upload {
  display: none;
  float: left; }

#vm-step-two-upload-photo {
  margin: 2px 0 0 4px;
  padding: 0px 0 0;
  width: 503px;
  height: 333px; }

#vm-step-two-upload-camera {
  margin: 2px 0 0 4px;
  padding: 5px 0 0;
  width: 503px;
  height: 333px; }

#vm-step-two-upload-button {
  display: block;
  width: auto;
  height: 28px;
  margin: 3px 0 0 20px;
  background: transparent url("../../images/background/virtual-mirror/button-uploadPhoto.png") no-repeat left top;
  line-height: 28px;
  text-indent: -99999px; }

#vm-step-two-upload-button:hover {
  background-position: left bottom; }

.vm-step-right > ol > li label.vm-step-image-input-label,
.vm-step-right > ol > li input.vm-step-image-input {
  display: block; }

.vm-step-right > ol > li input#vm-step-two-image-input {
  margin: 6px 0 0 -18px; }

#vm-step-three {
  display: none; }

#vm-step-three > .vm-step-left > .vm-step-left-top {
  padding: 7px 0 0 4px;
  overflow: auto; }

#vm-step-two-upload .vm-step-left-top {
  overflow: auto; }

.vm-photos {
  border: 1px solid #fff;
  width: 497px;
  height: 328px;
  margin: 0;
  padding: 0;
  background: #ccc;
  line-height: 333px;
  text-align: center;
  color: #666;
  overflow: hidden; }

#resizable {
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative; }

#vm-left-eye, #vm-left-eye-two,
#vm-right-eye, #vm-right-eye-two {
  position: absolute;
  width: 34px;
  height: 34px;
  background: transparent url("../../images/background/virtual-mirror/vm-eyeTarget.png") no-repeat;
  z-index: 1000;
  cursor: pointer; }

#vm-left-eye {
  top: 70px;
  left: 195px; }

#vm-right-eye {
  top: 70px;
  left: 280px; }

#vm-left-eye-two {
  top: 84px;
  left: 208px; }

#vm-right-eye-two {
  top: 84px;
  left: 268px; }

.vm-step-right > ol > li#vm-step-three-instruction-one-webcam {
  display: none; }

.vm-step-right > ol > li a.vm-button-retakePhoto {
  display: block;
  width: auto;
  height: 28px;
  margin: 1px 0 0 20px;
  background: transparent url("../../images/background/virtual-mirror/button-retakePhoto.png") no-repeat left top;
  line-height: 28px;
  text-indent: -99999px; }

.vm-step-right > ol > li a.vm-button-takePhotoNow:hover {
  background-position: left bottom; }

.vm-step-right > ol > li#vm-step-three-instruction-one-upload {
  display: block; }

.vm-step-right > ol > li a.vm-button-reuploadPhoto {
  display: block;
  width: 152px;
  height: 28px;
  margin: 1px 0 0 20px;
  background: transparent url("../../images/background/virtual-mirror/button-reuploadPhoto.png") no-repeat left top;
  line-height: 28px;
  text-indent: -99999px; }

.vm-step-right > ol > li a.vm-button-reuploadPhoto:hover {
  background-position: left bottom; }

.vm-photo-border {
  width: 504px;
  height: 335px;
  border: none;
  position: absolute;
  top: 0px;
  left: 4px;
  background: url("../../images/background/virtual-mirror/vm-photo-target-upload.png") no-repeat; }

.hide {
  display: none; }

#vm-step-two-mover-upload, #vm-step-two-mover-camera {
  width: 100px;
  height: 81px;
  overflow: hidden;
  float: left;
  margin-right: 8px; }

.mvn_n {
  height: 27px;
  width: 27px;
  background: url("../../images/background/virtual-mirror/vm-photo-move-up.png") no-repeat scroll left top transparent;
  margin-left: 37px; }

.mvn_n:hover {
  background-position: bottom left; }

.mvn_o {
  height: 26px;
  width: 27px;
  background: url("../../images/background/virtual-mirror/vm-photo-move-left.png") no-repeat scroll left top transparent;
  float: left;
  margin-left: 10px; }

.mvn_o:hover {
  background-position: bottom left; }

.mvn_e {
  height: 26px;
  width: 27px;
  background: url("../../images/background/virtual-mirror/vm-photo-move-right.png") no-repeat scroll left top transparent;
  float: left;
  margin-left: 27px; }

.mvn_e:hover {
  background-position: bottom left; }

.mvn_s {
  height: 27px;
  width: 27px;
  background: url("../../images/background/virtual-mirror/vm-photo-move-down.png") no-repeat scroll left top transparent;
  margin-left: 37px; }

.mvn_s:hover {
  background-position: bottom left; }

.ajax-loader {
  display: none;
  position: absolute;
  top: 350px;
  left: 280px;
  background: url("../../images/background/virtual-mirror/ajax-loader.gif") no-repeat; }

#popup_container {
  font-family: Arial, sans-serif;
  font-size: 12px;
  min-width: 300px;
  /* Dialog will be no smaller than this */
  max-width: 600px;
  /* Dialog will wrap after this width */
  background: #FFF;
  border: solid 5px #999;
  color: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

#popup_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 1.75em;
  color: #666;
  background: #CCC url("../../images/background/virtual-mirror/title.gif") top repeat-x;
  border: solid 1px #FFF;
  border-bottom: solid 1px #999;
  cursor: default;
  padding: 0em;
  margin: 0em; }

#popup_content {
  background: 16px 16px no-repeat url("../../images/background/virtual-mirror/info.gif");
  padding: 1em 1.75em;
  margin: 0em; }

#popup_content.alert {
  background-image: url("../../images/background/virtual-mirror/info.gif"); }

#popup_content.confirm {
  background-image: url("../../images/background/virtual-mirror/important.gif"); }

#popup_content.prompt {
  background-image: url("../../images/background/virtual-mirror/help.gif"); }

#popup_message {
  padding-left: 48px; }

#popup_panel {
  text-align: center;
  margin: 1em 0em 0em 1em; }

#popup_prompt {
  margin: .5em 0em; }

/* -----------------------------------------------------------------------


Coastal Contacts

* DESCRIPTION: The LNAV CSS file for Coastal Contacts.  

NOTE: From SCSS Generated. 

----------------------------------------------------------------------- */
/*

======== TABLE OF CONTENTS ======== 

	1 LEFT NAVIGATION
		1.0 MIXINS
		1.1 ACCORDION 
		1.2 REFINED SEARCH 
		1.3 TABS
        1.4 KEYWORD SEARCH
====================================

*/
/* ========================================================================

1.0 MIXINS

======================================================================== */
/* ========================================================================

1.1 LEFT NAVIGATION

======================================================================== */
#refine-search-sortTypeList-wrapper {
  position: relative; }
  #refine-search-sortTypeList-wrapper select {
    width: auto;
    background-color: white;
    background-image: none;
    background-position: inherit;
    color: black;
    padding: 0.625rem 1.25rem;
    width: 98%; }
    #refine-search-sortTypeList-wrapper select::-ms-expand {
      display: none;
      /*IE10*/ }
  #refine-search-sortTypeList-wrapper:before {
    line-height: 1;
    content: '';
    pointer-events: none;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-color: #67757f transparent transparent;
    border-style: solid;
    border-width: 0.625rem 0.4375rem 0;
    height: 0;
    position: absolute;
    right: 0;
    width: 0; }
    @media only screen and (min-width: 1025px) {
      #refine-search-sortTypeList-wrapper:before {
        border-width: 0.5rem 0.3125rem 0; } }
    @media only screen and (max-width: 640px) {
      #refine-search-sortTypeList-wrapper:before {
        margin: 0.375rem 0.8125rem; } }
  #refine-search-sortTypeList-wrapper:after {
    background-position: left center;
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0; }

#lnav-hotspot-container {
  display: block; }
  @media only screen and (max-width: 640px) {
    #lnav-hotspot-container {
      display: none; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .subhome-page #lnav-hotspot-container {
    min-height: 1.25rem; } }

@media only screen and (min-width: 1025px) {
  .subhome-page #lnav-hotspot-container {
    min-height: 1.75rem; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .category-page #lnav-hotspot-container {
    min-height: 5.9375rem; } }

@media only screen and (min-width: 1025px) {
  .category-page #lnav-hotspot-container {
    min-height: 4.3125rem; } }

@media only screen and (max-width: 640px) {
  .category-page #main-content-container {
    border-top: solid 1px #dfe9ef; }
  .category-page .tabs-content {
    border-top: none; } }

.category-page .accord-sec-content {
  padding-bottom: 0.9375rem !important; }

@media only screen and (max-width: 640px) {
  #clearIDbrandCode {
    margin-left: -0.625rem; } }

#accord-content-container .accord-sec-content #lnav-brand-container {
  width: 100%; }
  #accord-content-container .accord-sec-content #lnav-brand-container ul {
    overflow-x: hidden; }
  @media only screen and (max-width: 640px) {
    #accord-content-container .accord-sec-content #lnav-brand-container {
      text-align: center; }
      #accord-content-container .accord-sec-content #lnav-brand-container ul {
        max-height: 12.5rem;
        overflow-y: scroll; } }
  #accord-content-container .accord-sec-content #lnav-brand-container #lnav-brand-name-container {
    overflow: auto;
    width: 100%; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-content #lnav-brand-container #lnav-brand-name-container {
        border-top: none; } }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-sec-content #lnav-brand-container #lnav-brand-name-container ul {
        margin-left: 0.625rem; }
        #accord-content-container .accord-sec-content #lnav-brand-container #lnav-brand-name-container ul li {
          display: none; } }
    #accord-content-container .accord-sec-content #lnav-brand-container #lnav-brand-name-container input[type="checkbox"] {
      margin: 0 0.3125rem; }
    #accord-content-container .accord-sec-content #lnav-brand-container #lnav-brand-name-container span {
      line-height: inherit; }

#lnav-price-container .accord-sec-content {
  margin-top: 0.3125rem; }

#lnav-price-container .accord-bottom-link-container {
  padding-top: 0.875rem !important; }

#lnav-price-container .price-range {
  margin: 1.0625rem 0 0 0.3125rem; }

#lnav-price-container .ui-widget-header {
  background-image: none;
  background-color: #d7eaf0;
  border: none; }

#lnav-price-container .ui-state-default, #lnav-price-container .ui-widget-content .ui-state-default {
  border: none;
  background-color: #0091BA;
  background-image: none; }

#lnav-price-container .ui-widget-content {
  background-color: #eee;
  border: none; }

#lnav-price-container .accord-sec-content {
  padding-left: 1.875rem;
  padding-bottom: 1.5625rem; }

#lnav-alphabet-container {
  display: inline-block;
  margin: 0 auto 0.625rem -0.125rem; }
  #lnav-alphabet-container div {
    cursor: pointer;
    float: left;
    margin: 0.125rem;
    padding: 0.125rem;
    text-align: center;
    text-indent: 0; }
  #lnav-alphabet-container > .lnav-letter-available.numb-range {
    width: auto; }
    #lnav-alphabet-container > .lnav-letter-available.numb-range:hover {
      background: #DFE9EF;
      color: #FFF; }
  #lnav-alphabet-container > .lnav-letter-available:hover {
    background: #0091BA;
    color: #FFF; }
  #lnav-alphabet-container > .lnav-letter-off.numb-range {
    width: auto; }

.lnav-brand-name-static-container ul {
  margin-left: 3px !important; }

.lnav-letter-on {
  background-color: white;
  color: #0091BA;
  font-weight: bolder;
  text-decoration: underline; }

.lnav-letter-off {
  color: #C6C6C6; }

ul#lnav-link-shapes-list li {
  line-height: 1.875rem; }
  ul#lnav-link-shapes-list li div {
    padding: 0.4375rem;
    margin: 0.1875rem; }
  @media only screen and (max-width: 640px) {
    ul#lnav-link-shapes-list li {
      padding-left: 1.875rem; }
      ul#lnav-link-shapes-list li a {
        text-indent: 0 !important; } }
  ul#lnav-link-shapes-list li input {
    float: left; }

/* Glasses/Frames Lnav Images */
#lnav-list-bullet-aviator {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat scroll 0px 3px transparent; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-aviator {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-list-bullet-oval {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -15px transparent; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-oval {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-list-bullet-oversized {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -75px; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-oversized {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-list-bullet-rectangle {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -35px; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-rectangle {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-list-bullet-retro-wingtip {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -76px; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-retro-wingtip {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-list-bullet-round {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -57px; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-round {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-list-bullet-cateye {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -95px; }
  @media only screen and (max-width: 640px) {
    #lnav-list-bullet-cateye {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.eyeglasses-shapes-container input[value="Aviator"] + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat scroll 0px 3px transparent; }
  @media only screen and (max-width: 640px) {
    .eyeglasses-shapes-container input[value="Aviator"] + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.eyeglasses-shapes-container input[value="Oval"] + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat scroll 0px 3px transparent; }
  @media only screen and (max-width: 640px) {
    .eyeglasses-shapes-container input[value="Oval"] + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.eyeglasses-shapes-container input[value="Rectangle"] + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -35px; }
  @media only screen and (max-width: 640px) {
    .eyeglasses-shapes-container input[value="Rectangle"] + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.eyeglasses-shapes-container input[value="Retro-Wingtip"] + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -76px; }
  @media only screen and (max-width: 640px) {
    .eyeglasses-shapes-container input[value="Retro-Wingtip"] + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.eyeglasses-shapes-container input[value="Round"] + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -57px; }
  @media only screen and (max-width: 640px) {
    .eyeglasses-shapes-container input[value="Round"] + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.eyeglasses-shapes-container input[value="Cateye"] + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/lnav_glasses_shapes.png") no-repeat 0px -95px; }
  @media only screen and (max-width: 640px) {
    .eyeglasses-shapes-container input[value="Cateye"] + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-shape-container ul li.accord-sec-list-item {
  line-height: 1.875rem; }
  #lnav-shape-container ul li.accord-sec-list-item a {
    margin-left: 10px; }

#lnav-shape-container input + span {
  margin-left: 0.3125rem; }
  #lnav-shape-container input + span:after {
    float: left;
    vertical-align: middle;
    content: " ";
    width: 43px;
    height: 20px;
    margin: 0 0.3125rem 0 0.625rem; }

@media only screen and (max-width: 640px) {
  #lnav-shape-container .lnav-clear-link, #lnav-shape-container .lnav-clear-link-indentation {
    text-indent: 1.875rem !important; }
  #lnav-shape-container li.accord-sec-list-item {
    line-height: 2.5; }
  #lnav-shape-container input + span {
    margin-left: 0.3125rem; }
    #lnav-shape-container input + span:before {
      float: left; }
    #lnav-shape-container input + span:after {
      margin: 0 0.625rem 0 1.25rem;
      vertical-align: middle; } }

.sunglasses-shape-container li > div {
  padding: 0.4375rem;
  margin: 0.1875rem; }

.sunglasses-shape-container #lnav-list-sunglasses-aviator, .sunglasses-shape-container #searchFrameShapes_Aviator + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/sunglasses_shapes.png") no-repeat scroll -3px 0px transparent; }
  @media only screen and (max-width: 640px) {
    .sunglasses-shape-container #lnav-list-sunglasses-aviator, .sunglasses-shape-container #searchFrameShapes_Aviator + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.sunglasses-shape-container #lnav-list-sunglasses-cateye, .sunglasses-shape-container #searchFrameShapes_Cateye + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/sunglasses_shapes.png") no-repeat -3px -100px transparent; }
  @media only screen and (max-width: 640px) {
    .sunglasses-shape-container #lnav-list-sunglasses-cateye, .sunglasses-shape-container #searchFrameShapes_Cateye + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.sunglasses-shape-container #lnav-list-sunglasses-retro-wingtip, .sunglasses-shape-container #searchFrameShapes_Retro-Wingtip + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/sunglasses_shapes.png") no-repeat -3px -18px transparent; }
  @media only screen and (max-width: 640px) {
    .sunglasses-shape-container #lnav-list-sunglasses-retro-wingtip, .sunglasses-shape-container #searchFrameShapes_Retro-Wingtip + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.sunglasses-shape-container #lnav-list-sunglasses-oversized, .sunglasses-shape-container #searchFrameShapes_Oversized + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/sunglasses_shapes.png") no-repeat -3px -38px transparent; }
  @media only screen and (max-width: 640px) {
    .sunglasses-shape-container #lnav-list-sunglasses-oversized, .sunglasses-shape-container #searchFrameShapes_Oversized + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.sunglasses-shape-container #lnav-list-sunglasses-rectangle, .sunglasses-shape-container #searchFrameShapes_Rectangle + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/sunglasses_shapes.png") no-repeat -3px -61px transparent; }
  @media only screen and (max-width: 640px) {
    .sunglasses-shape-container #lnav-list-sunglasses-rectangle, .sunglasses-shape-container #searchFrameShapes_Rectangle + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

.sunglasses-shape-container #lnav-list-sunglasses-oval, .sunglasses-shape-container #searchFrameShapes_Oval + span:after {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 1.25rem;
  width: 2.8125rem;
  background: url("../../images/rwd/sprites/left-nav/sunglasses_shapes.png") no-repeat -3px -81px transparent; }
  @media only screen and (max-width: 640px) {
    .sunglasses-shape-container #lnav-list-sunglasses-oval, .sunglasses-shape-container #searchFrameShapes_Oval + span:after {
      margin: 0 0.625rem 0.9375rem 1.25rem; } }

#lnav-color-container {
  width: 100%; }
  @media only screen and (max-width: 640px) {
    #lnav-color-container {
      padding: 0.625rem 0.625rem 0 1.875rem; }
      #lnav-color-container + .accord-bottom-link-container .lnav-clear-link, #lnav-color-container .lnav-clear-link-indentation {
        display: block;
        text-indent: 1.875rem !important; } }

.lnav-color-black {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #000; }

.lnav-color-clear {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #FFF;
  border: 0.0625rem solid lightgrey;
  color: lightgrey;
  padding-top: 0.375rem;
  font-size: 1rem;
  text-align: center; }
  .lnav-color-clear:before {
    content: "C"; }

.lnav-color-white {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #FFF;
  border: 0.0625rem solid lightgrey; }

.lnav-color-silver {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background-color: #f4f4f4;
  background-color: #f4f4f4;
  background-image: -webkit-linear-gradient(-360deg, #f4f4f4, #b4b4b4);
  background-image: linear-gradient(90deg,#f4f4f4, #b4b4b4);
  background-image: -webkit-linear-gradient(left, #f4f4f4 -1%, #ffffff 11%, #b4b4b4 100%);
  background-image: linear-gradient(to right, #f4f4f4 -1%, #ffffff 11%, #b4b4b4 100%); }

.lnav-color-grey {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #B4B4B4; }

.lnav-color-green {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #57D718; }

.lnav-color-blue {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #23A3DF; }

.lnav-color-orange {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #FF7800; }

.lnav-color-red {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #FF0000; }

.lnav-color-pink {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #EF5DC8; }

.lnav-color-violet {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #AB5FCB; }

.lnav-color-tortoise {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background-color: #a05400;
  background-color: #a05400;
  background-image: -webkit-linear-gradient(-360deg, #a05400, #c17e00);
  background-image: linear-gradient(90deg,#a05400, #c17e00);
  background-image: -webkit-linear-gradient(left top, #a05400 8%, #381c17 38%, #381c17 54%, #702c00 70%, #c17e00 96%);
  background-image: linear-gradient(to right bottom , #a05400 8%, #381c17 38%, #381c17 54%, #702c00 70%, #c17e00 96%); }

.lnav-color-purple {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #843EF7; }

.lnav-color-gold {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background-color: #f4f4f4;
  background-color: #f4f4f4;
  background-image: -webkit-linear-gradient(-360deg, #f4f4f4, #ccb518);
  background-image: linear-gradient(90deg,#f4f4f4, #ccb518);
  background-image: -webkit-linear-gradient(left bottom, #f4f4f4 -1%, #ffffff -1%, #ffffff 5%, #fffbcc 34%, #ccb518 85%);
  background-image: linear-gradient(to right top , #f4f4f4 -1%, #ffffff -1%, #ffffff 5%, #fffbcc 34%, #ccb518 85%); }

.lnav-color-yellow {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #FFD800; }

.lnav-color-lightbrown {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #E7A53D; }

.lnav-color-brown {
  cursor: pointer;
  display: block;
  float: left;
  height: 1.875rem;
  margin: 0 2% 2% 0;
  width: 18%;
  background: #6D3E0C; }

.lnav-color-on {
  border: 2px solid #0091BA; }

.color-swatch-refine:hover {
  border: 2px solid #0091BA; }

.lnav-size-right-container {
  float: left;
  height: 2.1875rem;
  width: 4.0625rem; }

.lnav-size-learn-link {
  float: left; }

.lnav-size-go-link {
  float: left;
  padding: 0 0.9375rem 0 0; }
  .lnav-size-go-link .form-submit {
    max-width: 50%; }

#no-colors-avail {
  float: left;
  padding: 20px 0px 20px 7px; }

/* ___________________________________________________

1.1 ACCORDION 
___________________________________________________ */
#accord-content-container, .default-accord-content-container {
  float: left;
  width: 100%;
  position: relative; }
  #accord-content-container.accord-display-none-s, .default-accord-content-container.accord-display-none-s {
    /* Hide container for small since we want to slide all sections up. */ }
    @media only screen and (max-width: 640px) {
      #accord-content-container.accord-display-none-s, .default-accord-content-container.accord-display-none-s {
        display: none; } }
  #accord-content-container .accord-sec-wrapper, .default-accord-content-container .accord-sec-wrapper {
    width: 100%; }
    #accord-content-container .accord-sec-wrapper.active, .default-accord-content-container .accord-sec-wrapper.active {
      display: inline-block; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-wrapper, .default-accord-content-container .accord-sec-wrapper {
        display: none;
        margin-bottom: 0.9375rem; }
        #accord-content-container .accord-sec-wrapper .accord-container:last-child, .default-accord-content-container .accord-sec-wrapper .accord-container:last-child {
          border-bottom: solid 1px #dfe9ef; } }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-sec-wrapper #refinedSearchForm .accord-container, .default-accord-content-container .accord-sec-wrapper #refinedSearchForm .accord-container {
        background: #fff;
        clear: both;
        overflow: hidden; } }
  #accord-content-container .accord-sec-footer, .default-accord-content-container .accord-sec-footer {
    display: none; }
  #accord-content-container .lnav-clear-link:hover, #accord-content-container .lnav-clear-link-indentation:hover, .default-accord-content-container .lnav-clear-link:hover, .default-accord-content-container .lnav-clear-link-indentation:hover {
    text-decoration: underline; }
  #accord-content-container .expand-collapse-container, .default-accord-content-container .expand-collapse-container {
    cursor: pointer;
    float: left;
    line-height: 4rem; }
    @media only screen and (min-width: 641px) {
      #accord-content-container .expand-collapse-container, .default-accord-content-container .expand-collapse-container {
        margin-right: 0.625rem; } }
  #accord-content-container .accord-sec-first, .default-accord-content-container .accord-sec-first {
    background-color: white !important; }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-sec-first, .default-accord-content-container .accord-sec-first {
        margin-top: 1.25rem !important; }
        #accord-content-container .accord-sec-first .accord-main-refine, .default-accord-content-container .accord-sec-first .accord-main-refine {
          display: none !important; } }
    #accord-content-container .accord-sec-first .accord-top-title, .default-accord-content-container .accord-sec-first .accord-top-title {
      color: #67757f;
      float: left;
      font-size: 0.875rem;
      font-weight: bold;
      text-transform: uppercase; }
      @media only screen and (max-width: 640px) {
        #accord-content-container .accord-sec-first .accord-top-title, .default-accord-content-container .accord-sec-first .accord-top-title {
          color: #67757f !important;
          text-indent: 0.375rem; } }
      @media only screen and (min-width: 641px) {
        #accord-content-container .accord-sec-first .accord-top-title, .default-accord-content-container .accord-sec-first .accord-top-title {
          padding-top: 0;
          background: #fff;
          line-height: 1.2;
          padding-bottom: 0.9375rem;
          width: 100%; } }
  #accord-content-container .accord-sec-header, .default-accord-content-container .accord-sec-header {
    background-color: #fff;
    cursor: pointer;
    clear: both;
    float: none;
    padding: 0.8125rem 0;
    width: 100%; }
    #accord-content-container .accord-sec-header:not(.active):not(.default-open):after, .default-accord-content-container .accord-sec-header:not(.active):not(.default-open):after {
      font-family: "font-icons" !important;
      content: "";
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.875rem;
      vertical-align: middle; }
    #accord-content-container .accord-sec-header.active:after, .default-accord-content-container .accord-sec-header.active:after {
      font-family: "font-icons" !important;
      content: "";
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.875rem;
      vertical-align: middle; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-header.active .accord-sec-title, .default-accord-content-container .accord-sec-header.active .accord-sec-title {
        color: #0091BA;
        width: 100%; } }
    #accord-content-container .accord-sec-header.active + .accord-sec-content, #accord-content-container .accord-sec-header.active + form > .accord-sec-content, .default-accord-content-container .accord-sec-header.active + .accord-sec-content, .default-accord-content-container .accord-sec-header.active + form > .accord-sec-content {
      display: block; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-header, .default-accord-content-container .accord-sec-header {
        padding: 0.3125rem 0; }
        #accord-content-container .accord-sec-header:not(.active):after, .default-accord-content-container .accord-sec-header:not(.active):after {
          font-family: "font-icons" !important;
          content: "";
          font-style: normal !important;
          font-weight: normal !important;
          font-variant: normal !important;
          text-transform: none !important;
          speak: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          line-height: 1.875rem;
          vertical-align: middle; } }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-sec-header, .default-accord-content-container .accord-sec-header {
        /* if accord-sec-header does have default-open but not active */ }
        #accord-content-container .accord-sec-header.active, #accord-content-container .accord-sec-header.default-open, .default-accord-content-container .accord-sec-header.active, .default-accord-content-container .accord-sec-header.default-open {
          padding-bottom: 0; }
        #accord-content-container .accord-sec-header.default-open:not(.active):after, .default-accord-content-container .accord-sec-header.default-open:not(.active):after {
          font-family: "font-icons" !important;
          content: "";
          font-style: normal !important;
          font-weight: normal !important;
          font-variant: normal !important;
          text-transform: none !important;
          speak: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          line-height: 1.875rem;
          vertical-align: middle; }
        #accord-content-container .accord-sec-header.default-open:not(.active) + .accord-sec-content, #accord-content-container .accord-sec-header.default-open:not(.active) + form > .accord-sec-content, .default-accord-content-container .accord-sec-header.default-open:not(.active) + .accord-sec-content, .default-accord-content-container .accord-sec-header.default-open:not(.active) + form > .accord-sec-content {
          display: block; } }
    #accord-content-container .accord-sec-header.lnav-main-title, .default-accord-content-container .accord-sec-header.lnav-main-title {
      background-color: white; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-header, .default-accord-content-container .accord-sec-header {
        border-top: solid 1px #dfe9ef;
        text-indent: 1.25rem; } }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-sec-header, .default-accord-content-container .accord-sec-header {
        border-top: solid 1px #dfe9ef;
        color: #67757f;
        font-size: 0.75rem;
        font-weight: bold;
        margin: 0 0 0 0.625rem;
        text-transform: uppercase;
        width: 100%; } }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-header.accord-sec-first, .default-accord-content-container .accord-sec-header.accord-sec-first {
        text-indent: 0.3125rem; } }
    #accord-content-container .accord-sec-header .accord-sec-title, .default-accord-content-container .accord-sec-header .accord-sec-title {
      line-height: 1.875rem;
      vertical-align: middle; }
      @media only screen and (max-width: 640px) {
        #accord-content-container .accord-sec-header .accord-sec-title, .default-accord-content-container .accord-sec-header .accord-sec-title {
          text-transform: uppercase;
          font-weight: 700; } }
  #accord-content-container .accord-sec-content, .default-accord-content-container .accord-sec-content {
    display: none;
    float: none;
    padding-bottom: 1.25rem; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-content, .default-accord-content-container .accord-sec-content {
        border: 0.0625rem solid #dfe9ef;
        border-width: 0 0 0.0625rem 0;
        text-align: left; }
        #accord-content-container .accord-sec-content label, #accord-content-container .accord-sec-content .lnav-clean-dropdown-link,
        #accord-content-container .accord-sec-content li a, #accord-content-container .accord-sec-content .lnav-label, .default-accord-content-container .accord-sec-content label, .default-accord-content-container .accord-sec-content .lnav-clean-dropdown-link,
        .default-accord-content-container .accord-sec-content li a, .default-accord-content-container .accord-sec-content .lnav-label {
          line-height: 1.25rem;
          text-align: left;
          vertical-align: middle; }
        #accord-content-container .accord-sec-content .lnav-clear-link, #accord-content-container .accord-sec-content .lnav-clear-link-indentation, .default-accord-content-container .accord-sec-content .lnav-clear-link, .default-accord-content-container .accord-sec-content .lnav-clear-link-indentation {
          text-indent: 1.875rem;
          margin-top: 0.9375rem; }
        #accord-content-container .accord-sec-content .lnav-clear-brand, .default-accord-content-container .accord-sec-content .lnav-clear-brand {
          line-height: inherit;
          text-indent: 2.125rem;
          text-align: left; } }
    #accord-content-container .accord-sec-content .lnav-brand-name-static-container li, .default-accord-content-container .accord-sec-content .lnav-brand-name-static-container li {
      line-height: 1.25rem; }
    #accord-content-container .accord-sec-content label, .default-accord-content-container .accord-sec-content label {
      color: #67757f; }
      #accord-content-container .accord-sec-content label:before, .default-accord-content-container .accord-sec-content label:before {
        font-family: "font-icons" !important;
        content: "";
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: block;
        float: left;
        font-size: 0.9375rem;
        position: relative;
        z-index: 10;
        width: 0.9375rem; }
      #accord-content-container .accord-sec-content label.no-square, .default-accord-content-container .accord-sec-content label.no-square {
        float: left;
        margin-top: -0.125rem; }
        #accord-content-container .accord-sec-content label.no-square:before, .default-accord-content-container .accord-sec-content label.no-square:before {
          content: ""; }
        @media only screen and (min-width: 641px) and (max-width: 1024px) {
          #accord-content-container .accord-sec-content label.no-square, .default-accord-content-container .accord-sec-content label.no-square {
            font-size: 0.75rem; } }
      #accord-content-container .accord-sec-content label input[type=checkbox] + span:before, .default-accord-content-container .accord-sec-content label input[type=checkbox] + span:before {
        font-size: 70%;
        z-index: 4; }
      #accord-content-container .accord-sec-content label input[type=checkbox]:checked + span:before, .default-accord-content-container .accord-sec-content label input[type=checkbox]:checked + span:before {
        font-family: "font-icons" !important;
        content: "";
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 70%;
        z-index: 4;
        float: left;
        margin-left: -0.75rem; }
      #accord-content-container .accord-sec-content label span, .default-accord-content-container .accord-sec-content label span {
        vertical-align: top;
        margin-left: 5px; }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-sec-content, .default-accord-content-container .accord-sec-content {
        padding: 0 0.625rem 1.25rem;
        width: 100%; }
        #accord-content-container .accord-sec-content .accord-sec-list-item, .default-accord-content-container .accord-sec-content .accord-sec-list-item {
          line-height: 1.25rem; }
        #accord-content-container .accord-sec-content label, .default-accord-content-container .accord-sec-content label {
          display: inline-block;
          position: relative;
          line-height: 1.25rem; }
        #accord-content-container .accord-sec-content #lnav-link-shapes-list li a, .default-accord-content-container .accord-sec-content #lnav-link-shapes-list li a {
          margin-left: 0.625rem; }
        #accord-content-container .accord-sec-content .accord-bottom-link-container, .default-accord-content-container .accord-sec-content .accord-bottom-link-container {
          margin-top: 0.3125rem;
          padding: 0.1875rem 0 0.3125rem;
          clear: both; }
        #accord-content-container .accord-sec-content .html-dialog-link, .default-accord-content-container .accord-sec-content .html-dialog-link {
          color: #0091BA; } }
    #accord-content-container .accord-sec-content a, .default-accord-content-container .accord-sec-content a {
      color: #67757f;
      text-decoration: none; }
      #accord-content-container .accord-sec-content a:hover, .default-accord-content-container .accord-sec-content a:hover {
        text-decoration: underline; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-sec-content ul, .default-accord-content-container .accord-sec-content ul {
        margin-left: 1.875rem; } }
    #accord-content-container .accord-sec-content li, .default-accord-content-container .accord-sec-content li {
      clear: both;
      float: none;
      list-style: disc inside none;
      font-size: 0.875rem; }
      #accord-content-container .accord-sec-content li input, .default-accord-content-container .accord-sec-content li input {
        float: left;
        margin-top: 1px; }
      @media only screen and (max-width: 640px) {
        #accord-content-container .accord-sec-content li, .default-accord-content-container .accord-sec-content li {
          line-height: 2.5; } }
      @media only screen and (max-width: 640px) {
        #accord-content-container .accord-sec-content li a, .default-accord-content-container .accord-sec-content li a {
          display: block;
          line-height: 1.875rem;
          text-indent: 1.875rem; }
          #accord-content-container .accord-sec-content li a:hover, .default-accord-content-container .accord-sec-content li a:hover {
            text-decoration: none; } }
    #accord-content-container .accord-sec-content .lnav-filter-element, .default-accord-content-container .accord-sec-content .lnav-filter-element {
      border: 0.0625rem solid #dfe9ef;
      border-width: 0.0625rem 0.0625rem 0.0625rem 0.0625rem;
      background-color: white; }
      #accord-content-container .accord-sec-content .lnav-filter-element span, .default-accord-content-container .accord-sec-content .lnav-filter-element span {
        height: 1rem;
        width: 1rem; }
    #accord-content-container .accord-sec-content:last-child, .default-accord-content-container .accord-sec-content:last-child {
      border: none; }
    #accord-content-container .accord-sec-content input[type="checkbox"], .default-accord-content-container .accord-sec-content input[type="checkbox"] {
      display: none;
      margin: 0 0.3125rem 0 0; }
  @media only screen and (max-width: 640px) {
    #accord-content-container .lnav-mystyle, .default-accord-content-container .lnav-mystyle {
      display: block; } }
  #accord-content-container .accord-form-select, .default-accord-content-container .accord-form-select {
    overflow: hidden;
    width: 100%; }
    @media only screen and (max-width: 640px) {
      #accord-content-container .accord-form-select, .default-accord-content-container .accord-form-select {
        height: 3.75rem; } }
    @media only screen and (min-width: 641px) {
      #accord-content-container .accord-form-select, .default-accord-content-container .accord-form-select {
        height: 1.875rem; } }
    #accord-content-container .accord-form-select select, .default-accord-content-container .accord-form-select select {
      border: 0 none;
      border-radius: 0;
      cursor: pointer;
      margin: 0.9375rem 0 0 -0.0625rem; }
      #accord-content-container .accord-form-select select:after, .default-accord-content-container .accord-form-select select:after {
        font-family: "font-icons" !important;
        content: "";
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }

#product-page-container .product-information-container .accord-sec-header.default-open + .accord-sec-content {
  display: block; }
  @media only screen and (max-width: 640px) {
    #product-page-container .product-information-container .accord-sec-header.default-open + .accord-sec-content {
      padding-left: 1.25rem; } }

@media only screen and (max-width: 640px) {
  #product-page-container .product-information-container .accord-sec-header:after {
    font-family: "font-icons" !important;
    content: "";
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; } }

@media only screen and (min-width: 641px) {
  #product-page-container .product-information-container .accord-sec-header:after {
    display: none; } }

@media only screen and (min-width: 641px) {
  #product-page-container .product-information-container .accord-sec-header .accord-sec-title:after {
    display: none; } }

.accord-form-arrow {
  border-color: #67757f transparent transparent;
  border-style: solid;
  border-width: 0.625rem 0.4375rem 0;
  height: 0;
  position: absolute;
  right: 0;
  width: 0;
  margin: 1.5625rem 1rem 0 0; }
  @media only screen and (min-width: 1025px) {
    .accord-form-arrow {
      border-width: 0.5rem 0.3125rem 0; } }

.accord-size-sub-container {
  overflow: hidden;
  width: 100%; }

.accord-size-left-container {
  margin-top: 0.3125rem; }
  .accord-size-left-container .accord-subsec-content {
    clear: both;
    float: left;
    margin-bottom: 0.4375rem;
    display: block; }

.accord-size-dropdown {
  border: 0.0625rem solid #dfe9ef;
  border-width: 0.0625rem 0.0625rem 0.0625rem 0.0625rem;
  background: #e6ecf0;
  border: none;
  clear: both;
  float: left;
  height: 2.0625rem;
  line-height: 1.875rem;
  overflow: hidden;
  position: relative;
  width: 40%; }
  .accord-size-dropdown:after {
    font-family: "font-icons" !important;
    content: "";
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 0.625rem;
    margin-top: -0.1875rem;
    position: absolute;
    right: 0;
    z-index: 10;
    /* Hide the custom dropdown icon on Firefox. */ }

@-moz-document url-prefix() {
  .accord-size-dropdown:after {
    display: none; } }
  @media only screen and (min-width: 1025px) {
    .accord-size-dropdown {
      height: 1.5625rem; } }
  .accord-size-dropdown select {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 0;
    cursor: pointer;
    height: inherit;
    line-height: 1;
    margin: 0;
    position: absolute;
    z-index: 100; }
    @media only screen and (min-width: 1025px) {
      .accord-size-dropdown select {
        padding: 0.1875rem; } }
  .accord-size-dropdown .accord-form-arrow {
    margin: 0.625rem 0.625rem; }
    @media only screen and (min-width: 1025px) {
      .accord-size-dropdown .accord-form-arrow {
        margin: 0.5rem 0.375rem; } }

.accord-header-title {
  background-color: white; }

span.size-mm {
  float: left;
  margin: 0.9375rem 0.3125rem 0 0.3125rem; }
  @media only screen and (min-width: 1025px) {
    span.size-mm {
      margin-top: 0.3125rem; } }

@media only screen and (max-width: 640px) {
  #lnav-size-container:first-child {
    padding-top: 0.625rem; } }

#lnav-size-container .accord-bottom-link-container {
  padding-top: 0 !important; }

@media only screen and (max-width: 640px) {
  .accord-size-sub-container {
    padding-left: 1.875rem; } }

.measurement-options-container {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  float: left;
  text-align: left; }
  @media only screen and (min-width: 641px) {
    .measurement-options-container {
      padding-bottom: 0.1875rem; } }
  @media only screen and (max-width: 640px) {
    .measurement-options-container {
      padding-bottom: 0;
      text-indent: 1.875rem; } }
  .measurement-options-container .fewer-options {
    text-indent: initial; }
    .measurement-options-container .fewer-options:after {
      font-family: "font-icons" !important;
      content: "";
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 0.625rem;
      margin-left: 0.3125rem;
      vertical-align: middle; }
  .measurement-options-container .more-options {
    text-indent: initial; }
    .measurement-options-container .more-options:after {
      font-family: "font-icons" !important;
      content: "";
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 0.625rem;
      margin-left: 0.3125rem;
      vertical-align: middle; }
  .measurement-options-container .measurement-options-text {
    cursor: pointer; }
    .measurement-options-container .measurement-options-text:hover {
      text-decoration: none !important; }

#perfectFitSearchForm .need-help-container {
  margin-bottom: 1rem; }

#perfectFitSearchForm .accord-size-sub-container {
  margin-bottom: 0.3125rem; }

#perfectFitSearchForm select:hover {
  background-color: transparent; }

#perfectFitSearchForm .measurement-options-container {
  padding-top: 0;
  padding-bottom: 0.25rem; }

#perfectFitSearchForm .accord-sec-content {
  padding-bottom: 1.125rem; }

#perfectFitSearchForm .display-extra-measurements .accord-size-sub-container:last-child {
  margin-bottom: 0; }

#lnav-top-brands-container > div {
  position: relative; }

#lnav-top-brands-container .accord-sec-header {
  position: relative; }

#lnav-top-brands-container .cc-form-select {
  cursor: pointer;
  opacity: 0;
  position: absolute;
  top: 0;
  height: 100%; }

.lnav-shapes-container {
  padding-bottom: 15px !important; }

/* ___________________________________________________

1.2 REFINED SEARCH 
___________________________________________________ */
.refined-search-buttons {
  border-top: solid 1px #dfe9ef;
  margin-top: 0.3125rem !important;
  padding-top: 0.9375rem; }

.refined-search-buttons .btn-default-blue-outline {
  max-width: 9.375rem;
  min-width: 0.0625rem;
  width: 100%; }

/* ___________________________________________________

1.3 TABS 
___________________________________________________ */
@media only screen and (max-width: 640px) {
  dl.tabs dd a {
    margin-right: 0; } }

@media only screen and (min-width: 641px) {
  dl.tabs dd a {
    padding: 0 0 0.5625rem 0; } }

@media only screen and (max-width: 640px) {
  #category-tabs, .sub-home-tabs {
    border-top: 1px solid #dfe9ef; } }

/* ___________________________________________________

1.4 KEYWORD SEARCH
___________________________________________________ */
@media only screen and (min-width: 1025px) {
  #lnav-search-refine-container {
    margin-top: 3.875rem; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  #lnav-search-refine-container {
    margin-top: 2.3125rem; } }

/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION: The LNAV CSS file for page pagination.  
  
  NOTE: From SCSS Generated. 

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
  
   	1 PAGINATION
   
  ====================================
  
*/
/*  _____________________________________________________________________________

   1. PAGINATION
_____________________________________________________________________________  */
.pagination-container {
  float: right;
  padding-right: 0.625rem; }
  .pagination-container div {
    display: inline-block; }
  .pagination-container select {
    width: auto;
    padding: 0 10px 0 0;
    min-width: 45px;
    height: 20px; }

#refineSearch-sortTypeList {
  float: right; }

.pagination-nav {
  float: left;
  width: 100%;
  margin: 0.625rem 0; }
  @media only screen and (min-width: 641px) {
    .pagination-nav.keyword-search {
      width: 100%;
      margin: 0.625rem 0;
      margin-top: -1.5625rem;
      right: 15px; } }
  @media only screen and (min-width: 641px) and (min-width: 640px) and (max-width: 800px) {
    .pagination-nav.keyword-search {
      margin-top: 1.5625rem; } }

.pagination-group {
  padding-left: 0.625rem; }

.catalog-sort-by-filter {
  padding-right: 0.625rem; }

#no-results-found .pagination-group {
  padding-left: 0.625rem; }

#no-results-found .no-results-message p {
  margin: 0 0 1.5625rem 0.9375rem; }

.pagination-sort-by-wrapper .sort-by-txt {
  line-height: 3;
  margin-right: 1.25rem;
  font-size: 0.75rem; }
  @media only screen and (max-width: 640px) {
    .pagination-sort-by-wrapper .sort-by-txt {
      margin: 0; } }

@media only screen and (max-width: 640px) {
  .pagination-sort-by-wrapper .sort-by-adjust .sort-by-select-container {
    display: inline-block;
    margin-bottom: 2.8125rem; }
    .pagination-sort-by-wrapper .sort-by-adjust .sort-by-select-container .sort-by-select-field {
      width: 8.75rem;
      margin: auto;
      position: relative; }
      .pagination-sort-by-wrapper .sort-by-adjust .sort-by-select-container .sort-by-select-field select {
        border: 0;
        cursor: pointer;
        height: auto;
        left: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        z-index: 200; }
        .pagination-sort-by-wrapper .sort-by-adjust .sort-by-select-container .sort-by-select-field select:hover {
          background-color: #fff; }
      .pagination-sort-by-wrapper .sort-by-adjust .sort-by-select-container .sort-by-select-field .sort-by-select-text {
        border-bottom: solid 1px #67757f;
        position: relative;
        z-index: 100; }
        .pagination-sort-by-wrapper .sort-by-adjust .sort-by-select-container .sort-by-select-field .sort-by-select-text:after {
          font-family: "font-icons" !important;
          content: "";
          font-style: normal !important;
          font-weight: normal !important;
          font-variant: normal !important;
          text-transform: none !important;
          speak: none;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          margin-right: 0.3125rem;
          position: absolute;
          right: -1.25rem;
          vertical-align: middle; } }

.pagination-sort-by {
  background: #fff;
  clear: none;
  float: right;
  height: 1.5625rem;
  line-height: 1.25rem;
  width: 9.375rem; }
  .pagination-sort-by .drop-down-form-arrow {
    border-color: #67757f transparent transparent;
    border-style: solid;
    border-width: 0.5rem 0.3125rem 0;
    height: 0;
    position: absolute;
    right: 0;
    width: 0;
    margin: 0.4375rem 0.3125rem; }
  .pagination-sort-by select {
    background-color: #e6ecf0;
    border: 0 none;
    cursor: pointer;
    font-size: 0.75rem;
    width: 9.375rem; }

.pagination-internal {
  float: right; }

#pagination-nav-left, #pagination-nav-right {
  cursor: pointer;
  float: left; }

#pagination-nav-left {
  background: lightgreen;
  height: 20px;
  width: 20px; }
  #pagination-nav-left:hover {
    background: lightgreen;
    height: 20px;
    width: 20px; }

#pagination-nav-right {
  background: lightgreen;
  height: 20px;
  width: 20px; }
  #pagination-nav-right:hover {
    background: lightgreen;
    height: 20px;
    width: 20px; }

#pagination-nav-page-numbs {
  float: left; }

.view-all-products {
  margin-bottom: 1.25rem; }

.filter-search-wrapper {
  float: left;
  padding-left: 0.625rem;
  margin-bottom: 1.25rem; }

.filter-search-container {
  background: #f2f2f2;
  float: left;
  margin-right: 0.625rem;
  padding: 0.3125rem 0.3125rem; }
  .filter-search-container .filter-search-keyword {
    display: inline-block;
    line-height: 1.4; }
  .filter-search-container .filter-search-close {
    cursor: pointer;
    display: inline-block; }
    .filter-search-container .filter-search-close:before {
      font-family: "font-icons" !important;
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      content: "";
      color: #67757f;
      font-size: 1.25rem;
      padding-bottom: 0.1875rem;
      vertical-align: middle; }

#view-all-link {
  width: 100%;
  text-align: center; }

/* -----------------------------------------------------------------------


 Coastal Contacts

  * DESCRIPTION: The containers for product tiles on Subhome, Category and Product page.

  NOTE: From SCSS Generated.

----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ========

   	1 PRODUCT TILES
   		1.1 Sale Arrow
   	2 PRODUCT PRICING
   	3 FAVOURITES PAGE
    ====================================
 
*/
/*  _____________________________________________________________________________

   1. PRODUCT TILES 
_____________________________________________________________________________  */
.product-tile-container.columns {
  padding-left: 0px;
  padding-right: 0px; }
  .product-tile-container.columns:last-child {
    /* .product-tile-container.columns:last-child */
    float: left !important; }

.product-tile-container #page-wrapper .product-tile ul li {
  float: none; }

.product-tile-container .product-tile {
  height: 21.875rem;
  margin: 0 0.3125rem 3.125rem 0.3125rem;
  text-align: center;
  position: relative; }
  .product-tile-container .product-tile .tile-header-row {
    min-height: 40px; }
  .product-tile-container .product-tile img {
    width: auto;
    max-width: 100%; }
  .product-tile-container .product-tile.hotspot {
    overflow: hidden; }
    @media only screen and (max-width: 640px) {
      .product-tile-container .product-tile.hotspot {
        height: auto;
        max-height: none; } }
    .product-tile-container .product-tile.hotspot:hover {
      box-shadow: none; }
  .product-tile-container .product-tile .product-tile-feature-image {
    margin-top: 0;
    min-height: 9.625rem; }
  .product-tile-container .product-tile .product-details-icons {
    position: absolute;
    right: 3%;
    text-align: right; }
    @media only screen and (min-width: 641px) and (max-width: 1024px) {
      .product-tile-container .product-tile .product-details-icons {
        padding: 0;
        right: 4%; } }
    .product-tile-container .product-tile .product-details-icons .circle-letter {
      margin-right: 0.125rem;
      margin-bottom: 0.3125rem; }
  .product-tile-container .product-tile .product-name {
    font-size: 0.875rem;
    font-weight: bolder; }
  .product-tile-container .product-tile .product-stars {
    font-size: 0.6875rem; }
  .product-tile-container .product-tile .product-additional-info div {
    font-size: 0.6875rem; }
  .product-tile-container .product-tile .product-additional-info ul li {
    font-size: 0.6875rem; }
  .product-tile-container .product-tile .add-to-fav {
    color: #0091BA; }
  .product-tile-container .product-tile .product-additional-info ul li {
    margin-bottom: 0.3125rem; }
  .product-tile-container .product-tile a.cc-icon-fav, .product-tile-container .product-tile a.cc-icon-male, .product-tile-container .product-tile a.cc-icon-female, .product-tile-container .product-tile a.cc-icon-fav-hollow, .product-tile-container .product-tile span.cc-icon-fav, .product-tile-container .product-tile span.cc-icon-male, .product-tile-container .product-tile span.cc-icon-female, .product-tile-container .product-tile span.cc-icon-fav-hollow {
    /* this border is needed to make the fav icon clickable on safari - PC for sure, perhaps others as well */
    border: 1px solid transparent; }
    .product-tile-container .product-tile a.cc-icon-fav:before, .product-tile-container .product-tile a.cc-icon-male:before, .product-tile-container .product-tile a.cc-icon-female:before, .product-tile-container .product-tile a.cc-icon-fav-hollow:before, .product-tile-container .product-tile span.cc-icon-fav:before, .product-tile-container .product-tile span.cc-icon-male:before, .product-tile-container .product-tile span.cc-icon-female:before, .product-tile-container .product-tile span.cc-icon-fav-hollow:before {
      font-size: 1.125rem !important; }
  .product-tile-container .product-tile a:hover, .product-tile-container .product-tile span:hover {
    text-decoration: none; }
  .product-tile-container .product-tile a.remove-from-fav, .product-tile-container .product-tile span.remove-from-fav {
    color: #0091BA; }

@media only screen and (min-width: 1025px) {
  .product-tile-container:nth-child(3n+1) .product-tile {
    margin-left: 0; }
  .product-tile-container:nth-child(3n+3) .product-tile {
    margin-right: 0; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .product-tile-container:nth-child(2n+1) .product-tile:not(.tryonview) {
    margin-left: 0; }
  .product-tile-container:nth-child(2n+2) .product-tile {
    margin-right: 0; } }

@media only screen and (max-width: 640px) {
  .product-tile-container .product-tile {
    margin-left: 0;
    margin-right: 0; } }

#view-all-favs-link {
  margin: 0.9375rem 0;
  text-align: center;
  text-transform: uppercase; }
  #view-all-favs-link a {
    color: #0091BA; }

.back-to-top {
  margin-bottom: 0.9375rem !important; }

#favs-sign-in-link, #favs-register-link {
  margin-bottom: 0.625rem; }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .product-tile .product-price {
    white-space: nowrap; }
  .product-tile div.on-sale-reg-price {
    font-size: 0.6875rem; }
  .product-tile div.on-sale-price {
    margin-left: 0.3125rem; }
  .product-tile .cc-icon-fav:before, .product-tile .cc-icon-fav-hollow:before {
    font-size: 1.25rem !important; }
  .product-tile .cc-icon-male:before, .product-tile .cc-icon-female:before {
    font-size: 0.9375rem !important; } }

@media only screen and (max-width: 640px) {
  .product-tile .cc-icon-fav:before, .product-tile .cc-icon-fav-hollow:before, .product-tile .cc-icon-male:before, .product-tile .cc-icon-female:before {
    font-size: 1.125rem !important; } }

@media only screen and (max-width: 640px) {
  .product-tile {
    height: 32.8125rem; }
  .tooltip {
    left: auto !important;
    right: 10px !important;
    margin-top: -20px; }
  html.touch .tooltip {
    display: none !important; } }

.face-image-container {
  min-width: 14.125rem !important; }

.product-image-container-try-on-view {
  margin: 0 auto;
  position: absolute;
  min-width: 14.125rem;
  /* don't let container be resized more than the width of the avatar! */
  width: 100%;
  z-index: 999;
  height: 19.375rem; }
  .product-image-container-try-on-view img.frame-image {
    margin-top: 0.1875rem; }
  .product-image-container-try-on-view img.frame-image-avatar {
    width: 10.75rem !important;
    margin: 0 auto;
    margin-top: 6.25rem !important;
    /* Needs to overwrite the .frame-image (takes precedence) */
    z-index: 999; }

/* over-ride for JP only */
html[lang='ja_JP'] .product-image-container-try-on-view img.frame-image-avatar {
  margin-top: 6.5rem !important;
  /* Needs to overwrite the .frame-image (takes precedence) */ }

@media only screen and (min-width: 640px) and (max-width: 800px) {
  .product-tile-container.tryonview {
    width: 100%; } }

.product-tile.tryonview, .product-tile.favourites.favourites-page {
  height: 29.6875rem; }

.product-tile.favourites.favourites-page .product-tile-feature-image {
  height: 307px; }

.product-image-container-try-on-view {
  height: 19.375rem; }

#browse-content-container-tryon > .row {
  margin-left: 0;
  margin-right: 0; }

/* Adding top margin for try on view tile only so avatars are not touching */
.tryonview .size-match {
  height: 1.875rem; }

.size-match .product-size-match {
  padding: 3% 0 0 5%;
  position: absolute;
  text-align: left; }
  .size-match .product-size-match p {
    float: left;
    font-size: 0.625rem !important;
    line-height: 1rem;
    margin-right: 0.3125rem; }

.product-size-score {
  display: inline; }
  .product-size-score div {
    display: inline-block;
    height: 16px;
    width: 10px; }
  .product-size-score .filled-bar {
    background: #0069aa; }
  .product-size-score .empty-bar {
    background: #67757f; }

/*  _____________________________________________________________________________

   1.1. SALE ARROW
_____________________________________________________________________________  */
.product-tile-details {
  padding: 2% 0 0 0;
  width: 100%;
  box-sizing: border-box; }
  .product-tile-details .product-item {
    line-height: 1.125rem;
    margin-top: 0.4375rem; }
  .product-tile-details .product-price {
    margin-top: 1.25rem;
    margin-bottom: 1.0625rem; }

.arrow-container {
  display: inline-block; }

.arrow {
  width: 42px;
  background-color: #fff;
  border: 1px solid #d50000;
  position: relative;
  color: #d50000;
  text-align: center;
  font-size: 11px;
  padding: 2px 0 1px 0;
  font-weight: bold;
  margin: 0 0.375rem; }

.arrow:after {
  border: 11px solid transparent;
  border-left: 8px solid #fff;
  content: '';
  height: 0;
  left: 40px;
  position: absolute;
  top: 0px;
  width: 0; }

.arrow:before {
  border: 11px solid transparent;
  border-left: 8px solid #d50000;
  content: '';
  height: 0;
  left: 41px;
  position: absolute;
  top: 0px;
  width: 0; }

.product-tile-details .row {
  margin: 0; }

.price-sale-grid-col {
  display: inline-block;
  padding: 0 0.1875rem 0 0;
  vertical-align: middle; }

.price-sale-grid-col:last-child {
  padding-right: 0; }

/*  _____________________________________________________________________________

   2. PRODUCT PRICE
_____________________________________________________________________________  */
div.reg-price {
  font-size: 1rem;
  font-weight: bold; }

div.on-sale-reg-price {
  color: #67757f;
  font-size: 0.75rem; }

div.on-sale-price {
  color: #d50000;
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  margin-left: 0; }

.cc-sale-star-burst {
  background: url("../../images/rwd/product/star_burst.png") no-repeat 0px 0px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 0.75rem;
  font-family: arial;
  height: 2.75rem;
  text-align: center;
  width: 2.75rem; }

.cc-category-star-burst {
  display: table-cell;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 0.75rem;
  height: inherit;
  vertical-align: middle;
  width: inherit; }

.product-tile .cc-sale-star-burst {
  margin-top: 0.625rem; }

.product-tile-container .product-corner-star-img-overlap {
  margin-top: 0.3125rem;
  margin-right: 0.3125rem; }

.price-including-tax {
  font-size: 0.5625rem;
  font-weight: lighter;
  vertical-align: middle;
  margin-left: -0.3125rem; }

.sale-price-margin {
  margin-left: -0.375rem !important; }

/*  _____________________________________________________________________________

   3. FAVOUTITES PAGE
_____________________________________________________________________________  */
#favourites-tab-content {
  margin-top: 0.625rem !important;
  margin-left: 0.625rem; }

/* -----------------------------------------------------------------------


 Coastal Contacts

  * DESCRIPTION: Star ratings scss file

  NOTE: From SCSS Generated.

----------------------------------------------------------------------- */
/*  _____________________________________________________________________________

   1. POWER REVIEW STARS
_____________________________________________________________________________  */
.product-review-stars, .product-review-product-stars {
  display: inline-block;
  height: 0.8125rem;
  width: 4.6875rem; }

.product-review-product-stars {
  float: left; }

.power-review-container {
  white-space: nowrap;
  width: 10.625rem; }

.power-review-star-0 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -65px !important; }

.power-review-star-0-5 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -65px !important; }

.power-review-star-1-0 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -54px !important; }

.power-review-star-1-5 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -54px !important; }

.power-review-star-2-0 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -39px !important; }

.power-review-star-2-5 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -39px !important; }

.power-review-star-3-0 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -25px !important; }

.power-review-star-3-5 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -25px !important; }

.power-review-star-4-0 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -13px !important; }

.power-review-star-4-5 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px -13px !important; }

.power-review-star-5-0 {
  background: url("../../images/rwd/sprites/globals/stars.png") no-repeat 0px 0px !important; }

/*
	Custom Skins for Tipped Tooltip Plugin

  ======== TABLE OF CONTENTS ======== 
  
    1. Tipped Custom Skins
   
    ====================================
  
*/
/* -------------------------------------------------------------------------

    1  Tipped Custom Skins
------------------------------------------------------------------------- */
.tpd-skin-ccblue .tpd-content, .tpd-skin-ccblue .tpd-title, .tpd-skin-ccblue .tpd-close {
  color: #67757f;
  font-size: 14px !important; }

.tpd-skin-ccblue .tpd-background-content {
  background-color: #d7eaf9; }

.tpd-skin-ccblue .tpd-background {
  border-width: 0px; }

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