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


 Coastal Contacts
 
  * DESCRIPTION: The primary SASS file that imports SCSS code to build the master frame of the website for all screen sizes.  
  
  NOTE: From SCSS Generated. 

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

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

**/
/*  _____________________________________________________________________________

    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 */
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION: The main CSS file for Coastal Contacts.  
  
  NOTE: From SCSS Generated. 

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

  ======== TABLE OF CONTENTS ======== 
  
    1. GLOBAL CLASSES & DEFINITIONS 
        1.01 DEFAULT HTML PROPERTIES AND GLOBAL REUSABLE CLASSES 
    2. TYPOGRAPHY & FONT ICONS
    3. BUTTONS
        3.1  HUGE REDESIGN BUTTONS
    4. SPRITE IMAGES
    5. FOUNDATION FRAMEWORK STYLE OVERWRITES 
        5.1  ABIDE (FOUNDATION VALIDATION) 
        5.2  TABS
        5.3  SWITCHES
        5.4  GRID   
    6. REVEAL (MODAL) 
    7. FORM VALIDATION
    8. BREADCRUMBS
    9. GOOGLE TRUSTED STORE 
    10. FANCYBOX OVERWRITES 
    11. TOOLTIPS
    12. BADGES AND SEALS
    13. SEARCH PAGE
    14. FULL PAGE OFF-CANVAS TRANSITION

  ====================================

*/
/*____________________________________________________________________________

    1. GLOBAL CLASSES & DEFINITIONS
 _____________________________________________________________________________  */
/* any iframe that is a direct decendant of the HTML tag - 
 * mainly used for Tealium as these iframes cause the page to jump around
 * this will not affect any iFrames that are inserted within the body tag 
*/
html > iframe {
  position: absolute; }

.opacity-none {
  opacity: 0; }

.opacity-full {
  opacity: 1; }

div, ul, p {
  font-size: 0.875rem; }

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

    1.01 DEFAULT HTML PROPERTIES AND GLOBAL REUSABLE CLASSES 
    
------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape on iOS */ }

body {
  color: #67757f;
  overflow-x: hidden;
  /* Solution used to detect screen size in JavaScript */ }
  body:after {
    display: none; }
    @media only screen and (max-width: 640px) {
      body:after {
        content: 'sm-screen'; } }
    @media only screen and (min-width: 641px) and (max-width: 1024px) {
      body:after {
        content: 'md-screen'; } }
    @media only screen and (min-width: 640px) and (max-width: 800px) {
      body:after {
        content: 'sm-md-screen'; } }
    @media only screen and (min-width: 1025px) {
      body:after {
        content: 'lg-screen'; } }

img {
  border: 0; }

a {
  color: #67757f; }
  a:focus {
    color: #67757f;
    text-decoration: none; }

.full-width {
  width: 100% !important;
  /* allow for full width rows */ }

/* full width for small only */
@media only screen and (max-width: 640px) {
  .fw-for-small-only {
    width: 100%; } }

@media only screen and (max-width: 1024px) {
  .fw-for-medium-down {
    width: 100%; } }

/* Use this class to remove the default 'X' from IE10+ input fields that allows end-user to clear entered value */
.clear-ie-x::-ms-clear {
  width: 0;
  height: 0; }

.clear-both {
  clear: both; }

.display-none {
  display: none; }

.display-none-important {
  display: none !important;
  /* NOTE: SS - Because we don't know the global implications of changing original display-none with !important, a new class was safer to create. */ }

.display-none-normal {
  display: none; }

@media only screen and (max-width: 640px) {
  .display-none-small-only {
    display: none; } }

@media only screen and (min-width: 641px) {
  .display-none-medium-up {
    display: none; } }

@media only screen and (min-width: 641px) {
  .visibility-hidden-medium-up {
    visibility: hidden; } }

.visibility-hidden {
  visibility: hidden; }

.text-centered {
  text-align: center !important; }

.text-right {
  text-align: right !important; }

.text-left {
  text-align: left !important; }

.float-none {
  float: none !important; }

.align-center {
  margin: 0 auto; }

.divider {
  margin: auto 0.3125rem; }

@media only screen and (min-width: 1025px) {
  .large-up-right {
    float: right !important; } }

@media only screen and (max-width: 640px) {
  .border-bottom-small {
    border-bottom: solid 1px #dfe9ef; } }

@media only screen and (min-width: 641px) {
  .border-bottom-medium-up {
    border-bottom: solid 1px #dfe9ef; } }

.border-top {
  border-top: solid 1px #dfe9ef; }

@media only screen and (min-width: 1025px) {
  .border-top-large-up {
    border-top: solid 1px #dfe9ef; } }

@media only screen and (max-width: 640px) {
  .border-top-small {
    border-top: solid 1px #dfe9ef; } }

.border-none {
  border: none !important;
  border-style: none !important;
  border-width: 0 !important; }

.no-top-border {
  border-top: 0 none !important; }

.no-bottom-border {
  border-bottom: 0 none !important; }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .no-border-for-medium {
    border: none !important; } }

.no-left-border {
  border-left: 0 none !important; }

.no-right-border {
  border-right: 0 none !important; }

.border-bottom {
  border-bottom: solid 1px #dfe9ef; }

@media only screen and (max-width: 640px) {
  .small-text-centered {
    text-align: center !important; } }

.text-transform-none {
  text-transform: none; }

.text-uppercase {
  text-transform: uppercase !important; }

.text-lowercase {
  text-transform: lowercase !important; }

.text-capitalize {
  text-transform: capitalize !important; }

.italic {
  font-style: italic !important; }

.medium {
  font-weight: 600 !important; }

.strong {
  font-weight: bold !important; }

.text-normal {
  font-weight: normal !important; }

.link-underlined {
  text-decoration: underline !important; }
  .link-underlined:hover {
    text-decoration: none !important; }

.grid-placeholder {
  display: inline-block;
  height: 100%;
  width: 100%; }

.overflow-hidden {
  overflow: hidden; }

.display-inline {
  display: inline !important; }

.display-inline-block {
  display: inline-block !important; }

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

/* to be used without !important */
.display-normal {
  display: block; }

.display-inline-table {
  display: inline-table !important; }

.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); }

.checkout-footer-privacy-wrapper {
  color: #67757f;
  font-size: 0.625rem;
  line-height: 0.8125rem;
  margin-top: 0.3125rem; }
  @media only screen and (min-width: 1025px) {
    .checkout-footer-privacy-wrapper {
      padding-bottom: 0.625rem; } }

.checkout-footer-privacy-wrapper a {
  text-decoration: underline; }

.fine-print-text {
  color: #67757f;
  font-size: 0.625rem;
  line-height: 0.8125rem; }
  @media only screen and (max-width: 1024px) {
    .fine-print-text {
      margin: 0.625rem auto 0.9375rem auto; } }
  .fine-print-text .fine-print-text-link {
    text-decoration: underline; }
    .fine-print-text .fine-print-text-link:hover {
      text-decoration: none; }

.margin-top-bottom-10 {
  margin: 0.625rem 0; }

.no-padding {
  padding: 0 !important; }

.no-padding-left {
  padding-left: 0 !important; }

.no-padding-right {
  padding-right: 0 !important; }

@media only screen and (max-width: 640px) {
  .no-padding-right-small-only {
    padding-right: 0 !important; } }

@media only screen and (min-width: 641px) {
  .no-padding-left-medium-up {
    padding-left: 0 !important; } }

.minus-padding {
  margin: auto -0.5625rem; }

@media only screen and (max-width: 640px) {
  .no-padding-small-only {
    padding: 0 !important; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .no-padding-medium-only {
    padding: 0 !important; } }

@media only screen and (min-width: 641px) {
  .no-padding-medium-up {
    padding: 0 !important; } }

@media only screen and (min-width: 1025px) {
  .no-padding-left-large-up {
    padding-left: 0 !important; } }

.sub-nav-action-link {
  color: #67757f;
  text-transform: capitalize;
  text-decoration: none; }
  .sub-nav-action-link:hover {
    color: #37BA95; }

.action-link {
  color: #0069aa;
  cursor: pointer;
  font-size: 0.875rem; }
  .action-link:hover {
    color: #0069aa;
    text-decoration: underline; }

.vertical-align {
  vertical-align: middle; }

/* The wrapper container for an element you want to center it */
.horizontal-align-center {
  text-align: center;
  width: 100%; }

.text-ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block; }

.space-content-before:before {
  content: none !important; }

.inline-block-height-removal {
  font-size: 0; }

.loader {
  background: url("../../images/rwd/icons/loader.gif") no-repeat scroll 0 0 transparent;
  background-position: center; }

#blue-loader-icon-container {
  background: none repeat scroll 0 0 transparent;
  height: 100%;
  left: 0;
  opacity: 0.9;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2147483647; }

.blue-loader-ajax-overlay {
  background: #fff;
  opacity: .5;
  height: 100%;
  width: 100%; }

.blue-loader-ajax-overlay img {
  position: absolute;
  top: 40%; }

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

.group:after {
  clear: both; }

.group {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */ }

.strike {
  color: #67757f;
  display: inline-block;
  text-decoration: line-through; }
  .strike:hover {
    text-decoration: line-through !important; }

@media only screen and (min-width: 641px) {
  .collapse-medium-up {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

@media only screen and (min-width: 1025px) {
  .collapse-large-up {
    margin-left: 0 !important;
    margin-right: 0 !important; } }

.required-asterisk:after {
  content: '*'; }

.need-help-container {
  font-size: 0.75rem;
  margin: 0 0 0.9375rem;
  position: relative; }
  @media only screen and (max-width: 640px) {
    .need-help-container {
      margin: -0.625rem 0 0.9375rem;
      padding-left: 1.25rem;
      padding-top: 0.625rem; } }
  .need-help-container .need-help-text {
    border-bottom: solid 1px;
    cursor: pointer; }
    .need-help-container .need-help-text a {
      color: #67757f !important;
      font-weight: 500; }
    .need-help-container .need-help-text a:hover {
      text-decoration: none !important; }

.lnav-frame-shape-link {
  font-size: 0.75rem;
  margin: 0 0 0.9375rem 0;
  position: relative; }
  @media only screen and (max-width: 640px) {
    .lnav-frame-shape-link {
      margin: -0.625rem 0 0.9375rem;
      padding-left: 1.25rem;
      padding-top: 0.625rem; } }
  .lnav-frame-shape-link .lnav-frame-shape-link-txt {
    border-bottom: solid 1px;
    cursor: pointer; }
    .lnav-frame-shape-link .lnav-frame-shape-link-txt a {
      color: #67757f !important;
      font-weight: 500; }
    .lnav-frame-shape-link .lnav-frame-shape-link-txt a:hover {
      text-decoration: none !important; }

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/*  _____________________________________________________________________________

    2. TYPOGRAPHY & FONT ICONS
 _____________________________________________________________________________  */
h1 {
  font-size: 1.125rem !important;
  /* Need to overwrite the _type.scss since it uses reduction */
  line-height: 2.625rem;
  color: #67757f; }

h2 {
  font-size: 0.875rem !important;
  /* Need to overwrite the _type.scss since it uses reduction */
  text-transform: uppercase;
  color: #67757f; }

.heading2 {
  color: #67757f;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.2;
  margin: 0.9375rem 0;
  text-transform: uppercase; }

.heading3 {
  color: #67757f;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.2;
  margin: 0.9375rem 0;
  text-transform: uppercase; }

.heading5 {
  color: #67757f;
  display: inline-block;
  font-weight: bold;
  margin: 0.625rem 0; }

[data-icon]: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: attr(data-icon); }

.strikethrough-diagonal {
  position: relative;
  display: inline; }

.strikethrough-diagonal:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: red;
  -webkit-transform: rotate(-9deg);
  -moz-transform: rotate(-9deg);
  -o-transform: rotate(-9deg);
  -ms-transform: rotate(-9deg);
  transform: rotate(-9deg); }

/* Reusable class to create responsive horizontal solid line with text (---- text ----) */
.h-group-line {
  display: table;
  font-size: 3rem;
  text-transform: uppercase;
  width: 100%; }
  .h-group-line .h-item {
    display: table-cell; }
  .h-group-line .h-text {
    white-space: nowrap;
    width: 1%;
    padding: 0 0.625rem; }
  .h-group-line .h-line {
    border-bottom: 1px solid #67757f;
    position: relative;
    top: -0.5rem; }

.cc-icon-caret-left:before,
.cc-icon-caret-right:before,
.cc-icon-ok:before,
.cc-icon-fav:before,
.cc-icon-fav-hollow:before,
.cc-icon-female:before,
.cc-icon-magnify-glass:before,
.cc-icon-male:before,
.cc-icon-minus:before,
.cc-icon-phone:before,
.cc-icon-plus:before,
.cc-icon-shop-cart:before,
.cc-icon-wrench:before,
.cc-icon-x:before,
.cc-icon-check:before,
.cc-icon-close:before,
.cc-icon-social-facebook:before,
.cc-icon-social-twitter:before,
.cc-icon-social-pinterest:before,
.cc-icon-social-google-plus:before,
.cc-icon-social-youtube:before,
.cc-icon-social-social-tumblr:before,
.cc-icon-social-social-instagram:before,
.cc-icon-mail:before,
.cc-icon-info-circle:before,
.cc-icon-info-circle-empty:before,
.cc-icon-pencil:before,
.cc-icon-alert:before,
.cc-icon-check-circle-empty:before,
.cc-icon-circle-empty:before,
.cc-icon-doc-empty:before,
.cc-icon-outline-circle-full:before,
.cc-icon-cross-circle-empty:before,
.cc-icon-minus-circle-empty:before,
.cc-icon-plus-circle-empty:before,
.cc-icon-user:before,
.cc-icon-chevron-left:before,
.cc-icon-chevron-right:before,
.cc-icon-right:before,
.cc-icon-chevron-down:before,
.cc-icon-chevron-up:before,
.cc-icon-calendar:before,
.cc-icon-check-empty:before,
.cc-icon-check-mark-two:before,
.cc-icon-square-line:before,
.cc-icon-print:before,
.cc-icon-check-mark-2:before,
.cc-icon-calendar-squares:before,
.cc-icon-hamburger:before,
.cc-icon-huge-search:before,
.cc-icon-huge-shopping-cart: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;
  font-size: 1.75rem;
  vertical-align: middle; }
  @media only screen and (min-width: 1025px) {
    .cc-icon-caret-left:before,
    .cc-icon-caret-right:before,
    .cc-icon-ok:before,
    .cc-icon-fav:before,
    .cc-icon-fav-hollow:before,
    .cc-icon-female:before,
    .cc-icon-magnify-glass:before,
    .cc-icon-male:before,
    .cc-icon-minus:before,
    .cc-icon-phone:before,
    .cc-icon-plus:before,
    .cc-icon-shop-cart:before,
    .cc-icon-wrench:before,
    .cc-icon-x:before,
    .cc-icon-check:before,
    .cc-icon-close:before,
    .cc-icon-social-facebook:before,
    .cc-icon-social-twitter:before,
    .cc-icon-social-pinterest:before,
    .cc-icon-social-google-plus:before,
    .cc-icon-social-youtube:before,
    .cc-icon-social-social-tumblr:before,
    .cc-icon-social-social-instagram:before,
    .cc-icon-mail:before,
    .cc-icon-info-circle:before,
    .cc-icon-info-circle-empty:before,
    .cc-icon-pencil:before,
    .cc-icon-alert:before,
    .cc-icon-check-circle-empty:before,
    .cc-icon-circle-empty:before,
    .cc-icon-doc-empty:before,
    .cc-icon-outline-circle-full:before,
    .cc-icon-cross-circle-empty:before,
    .cc-icon-minus-circle-empty:before,
    .cc-icon-plus-circle-empty:before,
    .cc-icon-user:before,
    .cc-icon-chevron-left:before,
    .cc-icon-chevron-right:before,
    .cc-icon-right:before,
    .cc-icon-chevron-down:before,
    .cc-icon-chevron-up:before,
    .cc-icon-calendar:before,
    .cc-icon-check-empty:before,
    .cc-icon-check-mark-two:before,
    .cc-icon-square-line:before,
    .cc-icon-print:before,
    .cc-icon-check-mark-2:before,
    .cc-icon-calendar-squares:before,
    .cc-icon-hamburger:before,
    .cc-icon-huge-search:before,
    .cc-icon-huge-shopping-cart:before {
      font-size: 1.4375rem; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .cc-icon-male:before,
  .cc-icon-female:before {
    font-size: 1.25rem;
    margin-right: 1px; } }

.cc-icon-caret-left,
.cc-icon-caret-right {
  cursor: pointer; }

.cc-icon-ok,
.cc-icon-caret-left,
.cc-icon-caret-right,
.cc-icon-fav,
.cc-icon-fav-hollow,
.cc-icon-female,
.cc-icon-plus,
.cc-icon-magnify-glass,
.cc-icon-male,
.cc-icon-minus,
.cc-icon-shop-cart,
.cc-icon-wrench,
.cc-icon-phone,
.cc-icon-x,
.cc-icon-check,
.cc-icon-close,
.cc-icon-social-facebook,
.cc-icon-social-twitter,
.cc-icon-social-pinterest,
.cc-icon-social-google-plus,
.cc-icon-social-youtube,
.cc-icon-social-tumblr,
.cc-icon-social-instagram,
.cc-icon-mail,
.cc-icon-info-circle,
.cc-icon-info-circle-empty,
.cc-icon-pencil,
.cc-icon-alert,
.cc-icon-check-circle-empty,
.cc-icon-circle-empty,
.cc-icon-doc-empty,
.cc-icon-outline-circle-full,
.cc-icon-cross-circle-empty,
.cc-icon-minus-circle-empty,
.cc-icon-plus-circle-empty,
.cc-icon-user,
.cc-icon-chevron-left,
.cc-icon-chevron-right,
.cc-icon-chevron-down,
.cc-icon-calendar,
.cc-icon-check-empty,
.cc-icon-check-mark-two,
.cc-icon-square-line,
.cc-icon-print,
.cc-icon-check-mark-2,
.cc-icon-hamburger,
.cc-icon-huge-search,
.cc-icon-huge-shopping-cart {
  color: #67757f; }
  .cc-icon-ok.disabled,
  .cc-icon-caret-left.disabled,
  .cc-icon-caret-right.disabled,
  .cc-icon-fav.disabled,
  .cc-icon-fav-hollow.disabled,
  .cc-icon-female.disabled,
  .cc-icon-plus.disabled,
  .cc-icon-magnify-glass.disabled,
  .cc-icon-male.disabled,
  .cc-icon-minus.disabled,
  .cc-icon-shop-cart.disabled,
  .cc-icon-wrench.disabled,
  .cc-icon-phone.disabled,
  .cc-icon-x.disabled,
  .cc-icon-check.disabled,
  .cc-icon-close.disabled,
  .cc-icon-social-facebook.disabled,
  .cc-icon-social-twitter.disabled,
  .cc-icon-social-pinterest.disabled,
  .cc-icon-social-google-plus.disabled,
  .cc-icon-social-youtube.disabled,
  .cc-icon-social-tumblr.disabled,
  .cc-icon-social-instagram.disabled,
  .cc-icon-mail.disabled,
  .cc-icon-info-circle.disabled,
  .cc-icon-info-circle-empty.disabled,
  .cc-icon-pencil.disabled,
  .cc-icon-alert.disabled,
  .cc-icon-check-circle-empty.disabled,
  .cc-icon-circle-empty.disabled,
  .cc-icon-doc-empty.disabled,
  .cc-icon-outline-circle-full.disabled,
  .cc-icon-cross-circle-empty.disabled,
  .cc-icon-minus-circle-empty.disabled,
  .cc-icon-plus-circle-empty.disabled,
  .cc-icon-user.disabled,
  .cc-icon-chevron-left.disabled,
  .cc-icon-chevron-right.disabled,
  .cc-icon-chevron-down.disabled,
  .cc-icon-calendar.disabled,
  .cc-icon-check-empty.disabled,
  .cc-icon-check-mark-two.disabled,
  .cc-icon-square-line.disabled,
  .cc-icon-print.disabled,
  .cc-icon-check-mark-2.disabled,
  .cc-icon-hamburger.disabled,
  .cc-icon-huge-search.disabled,
  .cc-icon-huge-shopping-cart.disabled {
    color: #d5d5d5;
    cursor: default; }

.cc-icon-caret-left:before {
  content: ""; }

.cc-icon-caret-right:before {
  content: ""; }

.cc-icon-male:before {
  content: ""; }

.cc-icon-female:before {
  content: ""; }

.cc-icon-plus:before {
  content: ""; }

.cc-icon-shop-cart:before {
  content: ""; }

.cc-icon-minus:before {
  content: ""; }

.cc-icon-wrench:before {
  content: ""; }

.cc-icon-phone:before {
  content: ""; }

.cc-icon-magnify-glass:before {
  content: ""; }

.cc-icon-fav:before {
  content: ""; }

.cc-icon-fav-hollow:before {
  content: ""; }

.cc-icon-x:before {
  content: ""; }

.cc-icon-check:before {
  content: ""; }

.cc-icon-close:before {
  content: ""; }

.cc-icon-hamburger:before {
  content: ""; }

.cc-icon-social-facebook:before {
  content: ""; }

.cc-icon-social-twitter:before {
  content: ""; }

.cc-icon-social-pinterest:before {
  content: ""; }

.cc-icon-social-google-plus:before {
  content: ""; }

.cc-icon-social-youtube:before {
  content: ""; }

.cc-icon-social-social-tumblr:before {
  content: ""; }

.cc-icon-social-social-instagram:before {
  content: ""; }

.cc-icon-mail:before {
  content: ""; }

.cc-icon-info-circle:before {
  content: ""; }

.cc-icon-info-circle-empty:before {
  content: ""; }

.cc-icon-pencil:before {
  content: ""; }

.cc-icon-alert:before {
  content: ""; }

.cc-icon-check-circle-empty:before {
  content: ""; }

.cc-icon-circle-empty:before {
  content: ""; }

.cc-icon-doc-empty:before {
  content: ""; }

.cc-icon-outline-circle-full:before {
  content: ""; }

.cc-icon-cross-circle-empty:before {
  content: ""; }

.cc-icon-minus-circle-empty:before {
  content: ""; }

.cc-icon-plus-circle-empty:before {
  content: ""; }

.cc-icon-user:before {
  content: ""; }

.cc-icon-chevron-left:before {
  content: ""; }

.cc-icon-chevron-right:before {
  content: ""; }

.cc-icon-chevron-down:before {
  content: ""; }

.cc-icon-calendar:before {
  content: ""; }

.cc-icon-check-empty:before {
  content: ""; }

.cc-icon-check-mark-two:before {
  content: ""; }

.cc-icon-square-line:before {
  content: ""; }

.cc-icon-print:before {
  content: ""; }

.cc-icon-check-mark-2:before {
  content: ""; }

.cc-icon-calendar-squares:before {
  content: ""; }

.cc-icon-huge-search:before {
  content: ""; }

.cc-icon-huge-shopping-cart:before {
  content: ""; }

.cursor-pointer {
  cursor: pointer; }

.cursor-default {
  cursor: default; }

.circle-letter {
  background: #67757f;
  border-radius: 0.9375rem;
  color: #fff;
  display: inline-block;
  font-size: 0.625rem;
  font-weight: bold;
  height: 0.9375rem;
  line-height: 0.9375rem;
  text-align: center;
  width: 0.9375rem; }

.uppercase {
  text-transform: uppercase; }

/*  _____________________________________________________________________________

    3. BUTTONS
 _____________________________________________________________________________  */
.btn-default-blue-outline {
  background: #0091BA;
  border: 1px solid #0091BA;
  cursor: pointer;
  display: inline-block;
  padding: 0.625rem 1.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease-out 0s;
  font-size: 0.875rem;
  min-width: 9.375rem;
  /* Mrkt specification for min-width of 150px */
  text-transform: uppercase;
  background-color: transparent;
  color: #0091BA;
  font-weight: 600; }
  @media only screen and (max-width: 640px) {
    .btn-default-blue-outline {
      padding: 0.625rem 0.625rem;
      /* As per conversation with Mrkt we'll have 10px padding left/right for small only*/ } }
  .btn-default-blue-outline:hover {
    background: #fff; }
  .btn-default-blue-outline:hover {
    border-color: #00bbd8;
    color: #00bbd8; }
  .btn-default-blue-outline.disabled {
    background: #fff;
    border-color: #67757f;
    color: #67757f; }
    .btn-default-blue-outline.disabled:hover {
      background: #fff;
      border-color: #67757f;
      color: #67757f;
      cursor: default; }

.btn-raquo, .btn-raquo-small {
  display: inline-block;
  margin: -3px 0 0 5px;
  vertical-align: middle; }

.btn-primary {
  background: #0091BA;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  padding: 0.625rem 1.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease-out 0s;
  font-size: 0.875rem;
  min-width: 9.375rem;
  /* Mrkt specification for min-width of 150px */
  text-transform: uppercase;
  color: #fff; }
  @media only screen and (max-width: 640px) {
    .btn-primary {
      padding: 0.625rem 0.625rem;
      /* As per conversation with Mrkt we'll have 10px padding left/right for small only*/ } }
  .btn-primary:hover {
    background: #00bbd8; }

a.btn-primary:hover {
  text-decoration: none; }

.btn-rebrand-primary {
  background: #0091BA;
  border: 1px solid #0091BA;
  cursor: pointer;
  display: inline-block;
  padding: 0.625rem 1.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease-out 0s;
  font-size: 0.875rem;
  min-width: 9.375rem;
  /* Mrkt specification for min-width of 150px */
  text-transform: uppercase;
  color: #fff;
  padding: 0.625rem 0; }
  @media only screen and (max-width: 640px) {
    .btn-rebrand-primary {
      padding: 0.625rem 0.625rem;
      /* As per conversation with Mrkt we'll have 10px padding left/right for small only*/ } }
  .btn-rebrand-primary:hover {
    background: #0091BA; }
  .btn-rebrand-primary.btn-compact {
    min-width: 0;
    /* Currently, on certain pages we have to enforce min-width for buttons but not for the new Rebranding */ }

.btn-rebrand-disabled {
  background: #0091BA;
  border: 1px solid #0091BA;
  cursor: pointer;
  display: inline-block;
  padding: 0.625rem 1.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease-out 0s;
  font-size: 0.875rem;
  min-width: 9.375rem;
  /* Mrkt specification for min-width of 150px */
  text-transform: uppercase;
  color: #fff; }
  @media only screen and (max-width: 640px) {
    .btn-rebrand-disabled {
      padding: 0.625rem 0.625rem;
      /* As per conversation with Mrkt we'll have 10px padding left/right for small only*/ } }
  .btn-rebrand-disabled:hover {
    background: #0091BA; }
  .btn-rebrand-disabled.btn-compact {
    min-width: 0;
    /* Currently, on certain pages we have to enforce min-width for buttons but not for the new Rebranding */ }

.btn-transaction {
  background: #ff9c00;
  border: 1px solid #ff9c01;
  cursor: pointer;
  display: inline-block;
  padding: 0.625rem 1.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease-out 0s;
  font-size: 0.875rem;
  min-width: 9.375rem;
  /* Mrkt specification for min-width of 150px */
  text-transform: uppercase;
  color: #fff; }
  @media only screen and (max-width: 640px) {
    .btn-transaction {
      padding: 0.625rem 0.625rem;
      /* As per conversation with Mrkt we'll have 10px padding left/right for small only*/ } }
  .btn-transaction:hover {
    background: #ff8400; }

.btn-default, .btn-default.button.disabled {
  background: #F3F4F5;
  border: 1px solid #F3F4F5;
  cursor: pointer;
  display: inline-block;
  padding: 0.625rem 1.75rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 300ms ease-out 0s;
  font-size: 0.875rem;
  min-width: 9.375rem;
  /* Mrkt specification for min-width of 150px */
  text-transform: uppercase;
  color: #67757f; }
  @media only screen and (max-width: 640px) {
    .btn-default, .btn-default.button.disabled {
      padding: 0.625rem 0.625rem;
      /* As per conversation with Mrkt we'll have 10px padding left/right for small only*/ } }
  .btn-default:hover, .btn-default.button.disabled:hover {
    background: #E6ECF0; }

.btn-default.button.disabled {
  cursor: default; }

.red-alert {
  color: #ff0000 !important;
  opacity: 1; }
  .red-alert::-webkit-input-placeholder {
    color: #ff0000; }
  .red-alert:-moz-placeholder {
    color: #ff0000; }
  .red-alert::-moz-placeholder {
    color: #ff0000; }
  .red-alert:-ms-input-placeholder {
    color: #ff0000; }

.triangle-icon-right: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;
  vertical-align: bottom; }

.bottom-buttons-wrapper {
  margin-bottom: 0.9375rem;
  margin-top: 0.9375rem; }

.back-to-top-wrapper {
  display: inline-block;
  margin-left: 0.625rem; }

@media only screen and (max-width: 640px) {
  .view-all-category-button, .back-to-top-wrapper {
    display: block;
    width: 9.375rem;
    margin: 0 auto 0.9375rem auto; } }

/*  _____________________________________________________________________________

    4. SPRITE IMAGES
 _____________________________________________________________________________  */
.cc-visa-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll 0 -46px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-mastercard-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -41px -46px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-discover-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -82px -46px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-paypal-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -123px -46px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-amex-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -159px -46px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px;
  width: 21px; }

.cc-jcb-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -192px -46px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px;
  width: 26px; }

.cc-solo-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll 0px -75px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-switch-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -40px -75px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-visa-electron-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll -81px -75px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px; }

.cc-smbc-logo {
  background: url("../../images/rwd/sprites/globals/cc_badge_sprite.png") no-repeat scroll 0px -105px transparent;
  height: 26px;
  width: 31px;
  float: left;
  margin-right: 8px;
  height: 33px;
  width: 111px; }

.cc-share-on-facebook {
  background: url("../../images/rwd/sprites/globals/footer_header_icons_sprite.png") no-repeat 0px -76px;
  display: inline-block;
  height: 25px;
  width: 25px; }

.co-ccv-logo {
  background: url("../../images/rwd/sprites/checkout/ccv-cid-sprite.png") no-repeat 0 -5px;
  display: inline-block;
  height: 37px;
  margin-top: -0.1875rem;
  width: 99px; }

.co-cid-logo {
  background: url("../../images/rwd/sprites/checkout/ccv-cid-sprite.png") no-repeat -403px -1px;
  height: 40px;
  margin-top: -0.375rem;
  width: 99px; }

.cc-share-on-twitter {
  background: url("../../images/rwd/sprites/globals/footer_header_icons_sprite.png") no-repeat 0px -27px;
  display: inline-block;
  height: 25px;
  width: 25px; }

.share-your-favorites-txt {
  height: 25px;
  display: inline-block;
  vertical-align: middle; }

#lnav-size-width-image {
  background: url("../../images/rwd/sprites/globals/glasses_fit_tool-v2.png") no-repeat 0px -1px;
  min-height: 1.875rem; }

#lnav-size-bridge-width-image {
  background: url("../../images/rwd/sprites/globals/glasses_fit_tool-v2.png") no-repeat 0px -113px;
  min-height: 2.125rem; }

#lnav-size-temple-length-image {
  background: url("../../images/rwd/sprites/globals/glasses_fit_tool-v2.png") no-repeat 0px -234px;
  min-height: 1.75rem; }

#lnav-size-frame-width-inside-image {
  background: url("../../images/rwd/sprites/globals/glasses_fit_tool-v2.png") no-repeat 0px -345px;
  min-height: 1.875rem; }

#lnav-size-height-image {
  background: url("../../images/rwd/sprites/globals/glasses_fit_tool-v2.png") no-repeat 0px -462px; }

#lnav-size-frame-width-image {
  background: url("../../images/rwd/sprites/globals/glasses_fit_tool-v2.png") no-repeat 0px -574px;
  min-height: 1.75rem; }

/*  _____________________________________________________________________________

    5. FOUNDATION FRAMEWORK STYLE OVERWRITES 
 _____________________________________________________________________________  */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  margin: 0 !important;
  /* border-color: $main-border-color !important; */ }

/* Always honor the column width spacing even when they are empty to keep the grid as expected. Common solution for this problem */
.column, .columns {
  min-height: 1px !important; }
  .column.no-min-height, .columns.no-min-height {
    min-height: 0px !important;
    /* Add ability to turn off the min-height: 1px since some containers add 1px misplacement in the grid */ }

/* As per new redesign, <select> drop downs will never have border when no errors */
select {
  background-color: #e6ecf0;
  border-width: 0; }
  select:hover {
    background-color: #e6ecf0; }

label {
  color: #67757f; }

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

    5.1  ABIDE (FOUNDATION VALIDATION) 

----------------------------------------------------------------------------  */
form[data-abide] .error small.error, form[data-abide] .error span.error {
  background: transparent;
  color: red;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 0;
  text-align: left; }

/*  ----------------------------------------------------------------------------
    5.2  TABS (FOUNDATION) 
 ----------------------------------------------------------------------------  */
.tabs.default-accord-content-container {
  float: none; }

.tabs.sub-home-tabs {
  float: left; }

.tabs:last-child > a {
  margin-right: 0; }

.tabs dd {
  margin: 0 1.375rem 0 0; }
  .tabs dd > a {
    background-color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase; }
    @media only screen and (min-width: 1025px) {
      .tabs dd > a:after {
        display: none; } }
    @media only screen and (max-width: 640px) {
      .tabs dd > a {
        padding: 20px 0; } }
  @media only screen and (max-width: 640px) {
    .tabs dd {
      border-right: solid 1px #dfe9ef;
      margin-right: 0;
      text-align: center; } }
  .tabs dd.active > a {
    background: #fff;
    border-bottom: solid 4px #0091BA;
    color: #0091BA;
    font-weight: 700; }
    @media only screen and (max-width: 640px) {
      .tabs dd.active > a {
        padding: 20px 0 16px; } }
    @media only screen and (min-width: 641px) {
      .tabs dd.active > a {
        padding-bottom: 9px; } }

.tabs-content {
  margin-bottom: 0;
  /* We don't want default tabs to define bottom margin */ }
  .tabs-content .content {
    float: left !important; }
    @media only screen and (min-width: 641px) {
      .tabs-content .content > div.row:first-child {
        margin-bottom: 1.5625rem; } }
    @media only screen and (max-width: 640px) {
      .tabs-content .content.active {
        padding-bottom: 0; } }

.no-js .tabs-content > div.content {
  display: none; }
  .no-js .tabs-content > div.content.active {
    display: inline-block; }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .my-style-placeholder {
    padding-top: 1.5625rem; } }

.my-style-link a {
  color: #0091BA;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase; }
  .my-style-link a:hover {
    border-bottom: solid 1px;
    text-decoration: initial; }
  .my-style-link a:after {
    content: ' ';
    margin-left: 0.3125rem;
    border-color: transparent transparent transparent #0091BA;
    border-width: 0.3125rem 0 0.3125rem 0.625rem;
    border-style: solid;
    display: inline-block; }
    @media only screen and (max-width: 640px) {
      .my-style-link a:after {
        border-width: 0.3125rem 0 0.3125rem 0.625rem; } }

@media only screen and (max-width: 640px) {
  .my-style-link {
    display: block; } }

.row .row.tab-row {
  border-bottom: solid 1px #dfe9ef;
  margin-bottom: 1.5625rem; }
  @media only screen and (min-width: 641px) {
    .row .row.tab-row {
      padding-top: 1.25rem; } }
  @media only screen and (min-width: 1025px) {
    .row .row.tab-row {
      margin-top: 0.3125rem; } }

@media only screen and (max-width: 1024px) {
  .my-style-finder-container {
    display: none; }
    .my-style-finder-container .my-style-link {
      margin: 0 0 0.625rem 0.625rem; } }

@media only screen and (max-width: 640px) {
  dl.tabs {
    width: 100%;
    /* two items */
    /* three items */
    /* four items */ }
    dl.tabs dd:first-child:nth-last-child(1) {
      width: 100%; }
    dl.tabs dd:first-child:nth-last-child(2),
    dl.tabs dd:first-child:nth-last-child(2) ~ dd {
      width: 50%; }
    dl.tabs dd:first-child:nth-last-child(3),
    dl.tabs dd:first-child:nth-last-child(3) ~ dd {
      width: 33.3333%; }
    dl.tabs dd:first-child:nth-last-child(4),
    dl.tabs dd:first-child:nth-last-child(4) ~ dd {
      width: 25%; } }

@media only screen and (min-width: 1025px) {
  dl.tabs dd.active a {
    padding-bottom: 0.5rem; } }

dl.tabs .accord-sec-link {
  background-color: #fff;
  color: #67757f;
  padding: 0 0 0.75rem 0;
  font-size: 0.75rem;
  text-transform: uppercase; }
  @media only screen and (max-width: 640px) {
    dl.tabs .accord-sec-link {
      margin-right: 0;
      padding: 0.9375rem 0; } }
  dl.tabs .accord-sec-link:hover {
    background-color: #fff; }

dl .favourites-tab: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;
  vertical-align: bottom;
  margin-right: 0.3125rem;
  font-weight: 700; }

dl .tab-title.active a {
  background: #fff; }

@media only screen and (min-width: 640px) and (max-width: 800px) {
  .hide-for-small-medium-only {
    display: none !important; } }

@media only screen and (min-width: 641px) {
  .category-page .tabs-content {
    border-top: none; }
  .category-page .tab-row {
    margin-bottom: 1.5625rem; }
  .subhome-page .tabs-content {
    border-top: none; } }

@media only screen and (max-width: 640px) {
  .category-page .tabs-content {
    margin-top: 1.25rem; } }

/*  ----------------------------------------------------------------------------
    5.3  TABS (FOUNDATION) 
 ----------------------------------------------------------------------------  */
/* Overwrite the background color of swith ON state */
div.switch input:checked + label {
  background-color: #dddddd; }

/*  ----------------------------------------------------------------------------
    5.4  GRID (FOUNDATION) 
 ----------------------------------------------------------------------------  */
@media only screen and (min-width: 640px) and (max-width: 800px) {
  .small-medium-1 {
    width: 8.3333333333%; }
  .small-medium-2 {
    width: 16.6666666667%; }
  .small-medium-3 {
    width: 25%; }
  .small-medium-4 {
    width: 33.3333333333%; }
  .small-medium-5 {
    width: 41.6666666667%; }
  .small-medium-6 {
    width: 50%; }
  .small-medium-7 {
    width: 58.3333333333%; }
  .small-medium-8 {
    width: 66.6666666667%; }
  .small-medium-9 {
    width: 75%; }
  .small-medium-10 {
    width: 83.3333333333%; }
  .small-medium-11 {
    width: 91.6666666667%; }
  .small-medium-12 {
    width: 100%; }
  .small-medium-push-0 {
    position: relative;
    left: 0%;
    right: auto; }
  .small-medium-pull-0 {
    position: relative;
    right: 0%;
    left: auto; }
  .small-medium-push-1 {
    position: relative;
    left: 8.3333333333%;
    right: auto; }
  .small-medium-pull-1 {
    position: relative;
    right: 8.3333333333%;
    left: auto; }
  .small-medium-push-2 {
    position: relative;
    left: 16.6666666667%;
    right: auto; }
  .small-medium-pull-2 {
    position: relative;
    right: 16.6666666667%;
    left: auto; }
  .small-medium-push-3 {
    position: relative;
    left: 25%;
    right: auto; }
  .small-medium-pull-3 {
    position: relative;
    right: 25%;
    left: auto; }
  .small-medium-push-4 {
    position: relative;
    left: 33.3333333333%;
    right: auto; }
  .small-medium-pull-4 {
    position: relative;
    right: 33.3333333333%;
    left: auto; }
  .small-medium-push-5 {
    position: relative;
    left: 41.6666666667%;
    right: auto; }
  .small-medium-pull-5 {
    position: relative;
    right: 41.6666666667%;
    left: auto; }
  .small-medium-push-6 {
    position: relative;
    left: 50%;
    right: auto; }
  .small-medium-pull-6 {
    position: relative;
    right: 50%;
    left: auto; }
  .small-medium-push-7 {
    position: relative;
    left: 58.3333333333%;
    right: auto; }
  .small-medium-pull-7 {
    position: relative;
    right: 58.3333333333%;
    left: auto; }
  .small-medium-push-8 {
    position: relative;
    left: 66.6666666667%;
    right: auto; }
  .small-medium-pull-8 {
    position: relative;
    right: 66.6666666667%;
    left: auto; }
  .small-medium-push-9 {
    position: relative;
    left: 75%;
    right: auto; }
  .small-medium-pull-9 {
    position: relative;
    right: 75%;
    left: auto; }
  .small-medium-push-10 {
    position: relative;
    left: 83.3333333333%;
    right: auto; }
  .small-medium-pull-10 {
    position: relative;
    right: 83.3333333333%;
    left: auto; }
  .small-medium-push-11 {
    position: relative;
    left: 91.6666666667%;
    right: auto; }
  .small-medium-pull-11 {
    position: relative;
    right: 91.6666666667%;
    left: auto; } }

/*  _____________________________________________________________________________

    6. REVEAL (MODAL) 
 _____________________________________________________________________________  */
.reveal-modal.open {
  /* important used to override default settings put inline by foundation*/
  position: fixed;
  overflow: auto;
  text-align: center;
  top: 100px;
  z-index: 99999999;
  /* Allowed sizes for reveal modal dialogs. It's not for media queries */ }
  @media only screen and (max-width: 640px) {
    .reveal-modal.open.small {
      left: 2.5% !important;
      width: 95% !important; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    .reveal-modal.open.small {
      margin-left: -20% !important;
      width: 60% !important; } }
  @media only screen and (min-width: 1025px) {
    .reveal-modal.open.small {
      margin-left: -20% !important;
      width: 40% !important; } }
  .reveal-modal.open.medium {
    /* No custom style for medium size Reveal dialogs yet. */ }
  @media only screen and (max-width: 640px) {
    .reveal-modal.open.large {
      left: 5% !important;
      width: 90% !important; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    .reveal-modal.open.large {
      margin-left: -45% !important;
      left: 50% !important;
      width: 90% !important; } }

.reveal-modal p {
  line-height: 1.5;
  margin-top: 25px; }
  .reveal-modal p:first-child {
    margin-top: 0; }

.reveal-modal .row {
  margin: 12.5px 0; }

.close-reveal-modal:hover {
  text-decoration: none; }

span.close-reveal-modal:hover {
  color: #000;
  text-decoration: none !important; }

.reveal-modal-bg {
  z-index: 9999999; }

.reveal-modal.open {
  /* important used to override default settings put inline by foundation*/
  top: 100px !important;
  /* end max-width: (small screen) for reveal */ }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    .reveal-modal.open {
      left: 40% !important;
      min-height: 1px;
      width: 60% !important; } }
  @media only screen and (max-width: 640px) {
    .reveal-modal.open {
      /* important used to override default settings put inline by foundation*/
      left: 21% !important;
      top: 60px !important;
      width: 98% !important;
      min-height: 1px;
      overflow: auto; } }

/* end max-width: (med screen) for reveal */
/*  _____________________________________________________________________________

    7. FORM VALIDATION 
 _____________________________________________________________________________  */
form small.error {
  background: transparent;
  color: red;
  display: none;
  margin-bottom: 0;
  padding-left: 0;
  text-align: left; }

#homepage-newsletter-container .field-error-message {
  background: transparent;
  color: red;
  display: none;
  font-size: 0.75rem;
  font-style: italic;
  margin-bottom: 0;
  padding-left: 0;
  padding-top: 0.3125rem;
  text-align: left; }

/*  _____________________________________________________________________________

    8. BREADCRUMBS
 _____________________________________________________________________________  */
.cc-breadcrumbs div {
  padding-left: 0.33125rem; }

.cc-breadcrumbs ol {
  font-size: 0.75rem;
  text-transform: capitalize; }
  @media only screen and (max-width: 640px) {
    .cc-breadcrumbs ol {
      font-size: 0.8125rem; } }
  .cc-breadcrumbs ol li {
    color: #67757f;
    margin: 0.9375rem 0; }
    @media only screen and (max-width: 640px) {
      .cc-breadcrumbs ol li {
        margin: 0.9375rem 0;
        font-size: 0.625rem !important; } }
    @media only screen {
      .cc-breadcrumbs ol li.divider {
        margin: 0.9375rem 0.625rem; } }
    .cc-breadcrumbs ol li.divider:before {
      content: '/';
      font-size: 0.75rem; }
      @media only screen and (max-width: 640px) {
        .cc-breadcrumbs ol li.divider:before {
          font-size: 0.625rem !important; } }
    .cc-breadcrumbs ol li.current {
      cursor: default;
      color: #0091BA; }
      @media only screen and (max-width: 640px) {
        .cc-breadcrumbs ol li.current.level-3 {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 25%; } }
      .cc-breadcrumbs ol li.current a {
        color: #0091BA; }

/*  _____________________________________________________________________________

    9. GOOGLE TRUSTED STORE
 _____________________________________________________________________________  */
@media only screen and (max-width: 640px) {
  .gtss-ef, #gts-c {
    display: none !important; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .gtss-ef, #gts-c {
    display: none !important; } }

@media only screen and (min-width: 1025px) {
  .gtss-ef, #gts-c {
    display: block; } }

/*  _____________________________________________________________________________

    10. FANCYBOX OVERWRITES
 _____________________________________________________________________________  */
#fancybox-content {
  background-color: #fff;
  box-sizing: content-box !important;
  /* Need to overwrite the default box-sizing that is set by Foundation Framework */
  border-color: #828282;
  border-width: 0.3125rem !important; }

#fancybox-close {
  background: url("../../images/rwd/sprites/globals/btn_close.png") -41px 0px no-repeat !important;
  height: 44px !important;
  right: -3.125rem !important;
  top: -1.25rem !important;
  width: 42px !important; }
  #fancybox-close:hover {
    background-position: 0 0 !important; }

#fancybox-wrap {
  margin: 0 auto !important;
  /* Always center the fancybox on the screen */
  z-index: 3500; }

#fancybox-overlay {
  position: fixed;
  /* Fixing the problem when lightbox dynamically changes its hight, it can show empty space if it goes beyond the max page height */
  z-index: 3100; }

/*  _____________________________________________________________________________

    11. TOOLTIPS 
 _____________________________________________________________________________  */
.tooltip {
  background: #d7eaf9 !important;
  border-color: #d7eaf9 !important;
  color: #67757f;
  margin-left: -75px;
  margin-top: -20px;
  max-width: 155px; }

/*  _____________________________________________________________________________


    12. BADGES AND SEALS 
_____________________________________________________________________________  */
.stella-seal {
  height: 2.125rem;
  width: 6.875rem;
  float: left; }

.product-info-badge {
  color: #fff;
  display: none;
  font-size: 0.625rem;
  padding: 0.3125rem;
  text-align: center;
  text-transform: uppercase;
  width: auto;
  margin: auto;
  min-width: 70px; }
  .product-info-badge.product-out-of-stock {
    background: #585858; }
  .product-info-badge.product-low-on-stock {
    background: #D58E2B; }
  .product-info-badge.product-is-new {
    background: #37BA95; }
  .product-info-badge.product-short-description {
    color: #000; }

/*  _____________________________________________________________________________


    13. SEARCH PAGE
 _____________________________________________________________________________  */
.search-keyword-content {
  margin: 0 0.625rem 0.625rem 0.625rem; }

#tab-wrapper-glasses, #tab-wrapper-accessories, .search-text {
  margin-bottom: 0.625rem; }

#redirect-banner-container {
  background-color: #0091BA;
  display: none;
  position: relative;
  z-index: 1001; }
  @media only screen and (max-width: 640px) {
    #redirect-banner-container {
      height: 3.75rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #redirect-banner-container {
      height: 2.1875rem;
      font-size: 0.75rem;
      line-height: 2.6; } }
  @media only screen and (min-width: 1025px) and (max-width: 1440px) {
    #redirect-banner-container {
      height: 2.1875rem; } }

.inner-redirect-container {
  color: #FFFFFF;
  font-size: 0.75rem;
  margin: 0 auto; }

.inner-redirect-container > div {
  float: left; }

.inner-redirect-container .redirect-welcome-txt {
  font-size: 1rem;
  font-weight: bold;
  line-height: 2.2; }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    .inner-redirect-container .redirect-welcome-txt {
      font-size: 0.75rem;
      line-height: 2.8; } }
  @media only screen and (max-width: 640px) {
    .inner-redirect-container .redirect-welcome-txt {
      font-size: 0.75rem; } }

.redirect-canada-flag {
  background: url("../../images/rwd/icons/flag-ca.png") 0 0 no-repeat;
  height: 19px;
  width: 37px;
  float: left;
  margin: 0.4375rem 0 0 0.625rem;
  cursor: pointer; }

.redirect-us-flag {
  background: url("../../images/rwd/icons/flag-us.png") 0 0 no-repeat;
  height: 19px;
  width: 37px;
  float: left;
  margin: 0.4375rem 0 0 0.625rem;
  cursor: pointer; }

#back-to-coastal {
  margin-left: 1.875rem; }
  @media only screen and (max-width: 640px) {
    #back-to-coastal {
      margin-left: 1.25rem; } }

.redirect-link-txt {
  float: left;
  cursor: pointer;
  line-height: 2.6;
  text-decoration: underline; }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    .redirect-link-txt {
      font-size: 0.75rem;
      line-height: 2.8; } }
  @media only screen and (max-width: 640px) {
    .redirect-link-txt {
      font-size: 0.625rem;
      line-height: 3.4; } }

.inner-redirect-container .close-redirect-link {
  cursor: pointer;
  float: right;
  font-weight: bolder;
  text-decoration: none; }
  @media only screen and (max-width: 640px) {
    .inner-redirect-container .close-redirect-link {
      margin-top: -1.875rem;
      font-size: 0.75rem; } }

/*____________________________________________________________________________

    14. FULL PAGE OFF-CANVAS TRANSITION
 _____________________________________________________________________________  */
/* Isolate the offcanvas CSS properties from the global ones since it needs custom behaviour */
#off-canvas-content-container {
  display: none;
  height: 100%;
  left: 101%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  width: 100%;
  background-color: white;
  z-index: 3000; }

#master-site-wrapper {
  overflow-x: hidden;
  position: absolute;
  width: 100%;
  left: 0; }
  #master-site-wrapper #master-site-wrapper-ajax-loader {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 99999999; }
    #master-site-wrapper #master-site-wrapper-ajax-loader #master-site-wrapper-ajax-overlay {
      background: #fff;
      opacity: .5;
      height: 100%;
      width: 100%; }
    #master-site-wrapper #master-site-wrapper-ajax-loader img {
      position: absolute;
      top: 50%; }

.off-canvas-panel {
  display: none;
  position: absolute;
  float: left;
  height: 100%;
  width: 100%; }

/*  _____________________________________________________________________________

    2. THE COASTAL CONTACTS CSS 
    (We need to have CC CSS after third party CSS so we can overwrite properties)
 _____________________________________________________________________________  **/
@media (max-width: 40em) {
  .hidden-xs {
    display: none !important; } }

@media (min-width: 40.063em) and (max-width: 64em) {
  .hidden-sm {
    display: none !important; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important; } }

@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important; } }

.visible-print {
  display: none !important; }

@media print {
  .visible-print {
    display: block !important; }
  table.visible-print {
    display: table !important; }
  tr.visible-print {
    display: table-row !important; }
  th.visible-print,
  td.visible-print {
    display: table-cell !important; } }

.visible-print-block {
  display: none !important; }

@media print {
  .visible-print-block {
    display: block !important; } }

.visible-print-inline {
  display: none !important; }

@media print {
  .visible-print-inline {
    display: inline !important; } }

.visible-print-inline-block {
  display: none !important; }

@media print {
  .visible-print-inline-block {
    display: inline-block !important; } }

@media print {
  .hidden-print {
    display: none !important; } }

/*------------------------------------*    #VARIABLES
\*------------------------------------*/
/* grid + breakpoints */
/* typography */
/* spacing */
/* sizes */
/* colors */
/* timing */
/* general */
/*------------------------------------*    #MIXINS
\*------------------------------------*/
/*------------------------------------*    #FUNCTIONS
\*------------------------------------*/
/**
 * Shortcut to get breakpoint value from $breakpoints map.
 *
 * Example:
 * @include bp('sm');
 */
/*------------------------------------*    #HELPERS
\*------------------------------------*/
/**
 * Responsive utilites
 * Use to hide and show elements based on breakpoint
 *
 * Example:
 * .hidden-sm-down - will hide when below small breakpoint
 * .hidden-sm-up - will hide when above small breakpoint
 */
@media (max-width: 0) {
  .hidden-xs-down {
    display: none !important; } }

@media (min-width: 0) {
  .hidden-xs-up {
    display: none !important; } }

@media (max-width: 544px) {
  .hidden-sm-down {
    display: none !important; } }

@media (min-width: 544px) {
  .hidden-sm-up {
    display: none !important; } }

@media (max-width: 40.063em) {
  .hidden-md-down {
    display: none !important; } }

@media (min-width: 40.063em) {
  .hidden-md-up {
    display: none !important; } }

@media (max-width: 64em) {
  .hidden-lg-down {
    display: none !important; } }

@media (min-width: 64.063em) {
  .hidden-lg-up {
    display: none !important; } }

@media (max-width: 64em) {
  .hidden-xl-down {
    display: none !important; } }

@media (min-width: 64.063em) {
  .hidden-xl-up {
    display: none !important; } }

/*********************************************
\* MEDIUM BODY OFF CANVAS MENU OPEN OVERLY 
/*
*********************************************/
body.has-mobile-nav-open::before {
  background-color: #0E3667 !important;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: .9;
  -webkit-transition: opacity .5s ease-out;
  transition: opacity .5s ease-out;
  z-index: 1999; }

/**
 * Headings
 */
.heading-section {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 3.75rem; }

/*------------------------------------*    #ICONS
\*------------------------------------*/
[class^="icon-cly"], [class*=" icon-cly"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "fonts-icons-red" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-cly-chevron-rg:before {
  content: "\e906"; }

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

.icon-cly-close:before {
  content: "\e904"; }

.icon-cly-cart: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; }

.icon-cly-search: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: 0.6875rem; }

.icon-cly-chevron-down-1:before {
  content: "\e900"; }

.icon-cly-close-1:before {
  content: "\e901"; }

/*------------------------------------*    #NAV-LIST
\*------------------------------------*/
/**
 * Hamburger menu that transitions into "X" when in open state
 */
.btn-hamburger::before, .btn-hamburger::after, .btn-hamburger__icon {
  background-color: #666;
  display: block;
  content: "";
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 1rem;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out; }

.btn-hamburger {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 1;
  position: relative; }

.btn-hamburger::before, .btn-hamburger::after {
  position: absolute; }

.btn-hamburger::before {
  top: 0; }

.btn-hamburger::after {
  bottom: 0; }

.btn-hamburger__icon {
  top: 50%;
  margin-top: -1px; }

.btn-hamburger--is-open::before {
  background-color: #2681EC;
  top: -2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: top right;
  transform-origin: top right; }

.btn-hamburger--is-open::after {
  background-color: #2681EC;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right; }

.btn-hamburger--is-open .btn-hamburger__icon {
  background-color: #2681EC;
  opacity: 0; }

/*------------------------------------*    #BADGES
\*------------------------------------*/
.badge-circle {
  background-color: #2681EC;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  color: #FFF;
  font-size: 0.625rem;
  line-height: 1;
  margin-left: 5px;
  width: 19px;
  height: 19px;
  position: relative;
  white-space: nowrap; }

/*------------------------------------*    #LOGO
\*------------------------------------*/
.cly-logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-image: url(https://www.coastal.com/template-resources/stylesheet/img/logo-clearly-primary.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  width: 78px;
  min-height: 30px; }

/*------------------------------------*    #HEADER
\*------------------------------------*/
.main-header {
  background-color: transparent;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 100%;
  min-height: 68px;
  -webkit-transition: margin-top 0.5s ease, -webkit-transform 0.2s ease, bottom 0s 0.5s;
  transition: margin-top 0.5s ease, transform 0.2s ease, bottom 0s 0.5s;
  /* top bar full-bleed */ }

.main-header::before {
  background-color: #F9F9F9;
  content: "";
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 29px;
  z-index: 3; }

@media (min-width: 64.063em) {
  .main-header::before {
    display: block; } }

.main-header::after {
  background-color: #2681EC;
  content: "";
  position: absolute;
  top: 68px;
  left: 0;
  opacity: 0.1;
  width: 100%;
  height: 1px; }

@media (min-width: 64.063em) {
  .main-header::after {
    top: 97px; } }

.has-mobile-nav-open .main-header {
  bottom: 0;
  -webkit-transition: margin-top 0.5s ease, -webkit-transform 0.2s ease, bottom 0s;
  transition: margin-top 0.5s ease, transform 0.2s ease, bottom 0s; }

@media (min-width: 64.063em) {
  .has-mobile-nav-open .main-header {
    bottom: auto; } }

@media (min-width: 64.063em) {
  .has-drawer-open .main-header {
    margin-top: 200px; } }

@media (min-width: 64.063em) {
  .is-scrolltop .main-header {
    position: relative; } }

@media (min-width: 64.063em) {
  .main-header {
    background-color: #FFF;
    padding-top: 0;
    height: 97px;
    min-height: 97px; } }

.main-header--is-hidden {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%); }

.has-mobile-nav-open .main-header--is-hidden {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: margin-top 0.5s ease, -webkit-transform 0s ease;
  transition: margin-top 0.5s ease, transform 0s ease; }

.main-header__topbar {
  background-color: #F9F9F9;
  display: none;
  height: 29px;
  padding-left: 0.46875rem;
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }

@media (min-width: 64.063em) {
  .main-header__topbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }

.main-header__link {
  display: inline-block;
  font-size: 0.625rem;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

.main-header__link:active, .main-header__link:link, .main-header__link:visited {
  color: #C0C0C0; }

.main-header__link:hover {
  color: #2681EC;
  text-decoration: none; }

.main-header__link--is-active:active, .main-header__link--is-active:link, .main-header__link--is-active:visited {
  color: #2681EC; }

.main-header__divider {
  color: #C0C0C0;
  display: inline-block;
  font-size: 0.625rem;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  padding: 0 0.46875rem; }

/*------------------------------------*    #NAV-DRAWER
\*------------------------------------*/
.nav-drawer-container {
  background-color: #FFF;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 205px;
  z-index: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  z-index: 1;
  /* will trigger when this class is applied to body */ }

.has-drawer-open .nav-drawer-container {
  -webkit-transform: translateY(0);
  transform: translateY(0); }

@media (min-width: 64.063em) {
  .nav-drawer-container {
    display: block; } }

.nav-drawer {
  background-color: #FFF;
  display: none;
  position: relative;
  height: 200px; }

.nav-drawer--is-active {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.nav-drawer:hover .nav-drawer__item::before {
  opacity: 1; }

.nav-drawer__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  text-align: center; }

.nav-drawer__item::before {
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity .5s, background-color .5s;
  transition: opacity .5s, background-color .5s;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 0; }

.nav-drawer__item:hover::before {
  background-color: rgba(255, 255, 255, 0); }

.nav-drawer__label {
  color: #000;
  display: inline-block;
  background-color: #FFF;
  padding: 0.9375rem;
  margin-top: 120px;
  position: relative;
  z-index: 0; }

/*------------------------------------*    #NAVBAR
\*------------------------------------*/
.navbar {
  border: none;
  border-radius: 0;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  min-height: 0;
  height: 68px;
  overflow-y: scroll;
  -webkit-transition: min-height 0s 0.5s;
  transition: min-height 0s 0.5s; }

.has-mobile-nav-open .navbar {
  min-height: 100%;
  -webkit-transition: min-height 0s;
  transition: min-height 0s; }

@media (min-width: 64.063em) {
  .has-mobile-nav-open .navbar {
    min-height: 0; } }

@media (min-width: 64.063em) {
  .navbar {
    overflow: hidden; } }

/* ------ navbar__item ------------------------------------------------*/
.navbar__item {
  background-color: #FFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 68px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.navbar__item--toggle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 50px;
  margin-left: 0.9375rem; }

@media (min-width: 64.063em) {
  .navbar__item--toggle {
    display: none; } }

.navbar__item--logo {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%; }

@media (min-width: 64.063em) {
  .navbar__item--logo {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    position: relative;
    top: auto;
    left: auto;
    width: auto; } }

.navbar__item--search {
  z-index: 2;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out; }

.has-mobile-nav-open .navbar__item--search {
  opacity: 0;
  pointer-events: none; }

@media (min-width: 64.063em) {
  .navbar__item--search {
    display: none; } }

.navbar__item--cart {
  z-index: 2;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out; }

.has-mobile-nav-open .navbar__item--cart {
  opacity: 0;
  pointer-events: none; }

@media (min-width: 64.063em) {
  .navbar__item--cart {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    opacity: 1;
    position: relative;
    top: auto;
    right: auto;
    width: auto; } }

.navbar__item--cart .navbar__link {
  position: relative; }

@media (min-width: 64.063em) {
  .navbar__item--cart .navbar__link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    font-size: 0.875rem;
    color: #333;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgba(38, 129, 236, 0);
    line-height: 66px;
    padding: 0 0.9375rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    margin: 0; }
  .navbar__item--cart .navbar__link:active, .navbar__item--cart .navbar__link:link, .navbar__item--cart .navbar__link:visited {
    color: #333; } }

.navbar__item--cart .badge-circle {
  position: absolute;
  top: -6px;
  right: -9px; }

@media (min-width: 64.063em) {
  .navbar__item--cart .badge-circle {
    position: relative;
    top: auto;
    right: auto; } }

.navbar__item--links {
  -webkit-box-flex: 1;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%; }

@media (min-width: 64.063em) {
  .navbar__item--links {
    -webkit-box-flex: 10;
    -webkit-flex: 10;
    -ms-flex: 10;
    flex: 10;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1; } }

.navbar__link {
  font-size: 1.125rem;
  color: #000;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out; }

.navbar__link:active, .navbar__link:link, .navbar__link:visited {
  color: #000;
  text-decoration: none; }

.no-touch .navbar__link:hover {
  color: #2681EC;
  text-decoration: none; }

@media (min-width: 64.063em) {
  .navbar__link {
    font-size: 0.875rem; } }

.navbar__footer {
  background-color: #F9F9F9;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  height: 65px;
  line-height: 65px;
  padding: 0 1.875rem;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.2s 0s ease-out;
  transition: transform 0.2s 0s ease-out;
  z-index: 1; }
  @media only screen and (max-width: 1024px) {
    .navbar__footer.right {
      text-align: right;
      display: block; } }

.has-mobile-nav-open .navbar__footer {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.2s 0.5s ease-out;
  transition: transform 0.2s 0.5s ease-out; }

@media (min-width: 64.063em) {
  .navbar__footer {
    display: none; } }

/*------------------------------------*    #PRIMARY-NAV
\*------------------------------------*/
.primary-nav {
  background-color: #FFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none;
  padding-top: 0;
  padding-left: 0;
  margin-bottom: -68px;
  height: 100%;
  position: absolute;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  width: 100%;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 84px; }

@media (min-width: 40.063em) {
  .primary-nav {
    width: 50%; } }

@media (min-width: 64.063em) {
  .primary-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    width: auto;
    height: 0.9375rem;
    overflow-y: hidden; } }

.primary-nav--opened {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out; }

@media (min-width: 40.063em) {
  .primary-nav--opened {
    width: 50%; } }

@media (min-width: 64.063em) {
  .primary-nav--opened {
    position: relative;
    min-height: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

/* ------ primary-nav__item ------------------------------------------------*/
.primary-nav__item, .primary-childnav__item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out; }

.primary-nav__item:last-child, .primary-childnav__item:last-child {
  padding-bottom: 121px; }

@media (min-width: 64.063em) {
  .primary-nav__item:last-child, .primary-childnav__item:last-child {
    padding-bottom: 0; } }

.has-child-nav-open .primary-nav__item, .has-child-nav-open .primary-childnav__item {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%); }

.primary-nav__item .icon-cly-search, .primary-childnav__item .icon-cly-search {
  margin-right: 5px; }

@media (min-width: 64.063em) {
  .primary-nav__item, .primary-childnav__item {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    min-height: 0;
    margin: 0;
    text-align: center; }
  .primary-nav__item:first-child, .primary-childnav__item:first-child {
    margin-left: 0.9375rem; }
  .has-child-nav-open .primary-nav__item, .has-child-nav-open .primary-childnav__item {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@media (min-width: 64.063em) {
  .primary-nav__item--align-right {
    margin-left: auto; } }

/* ------ primary-nav__chevron ----------------------------------------------*/
.primary-nav__chevron {
  font-size: 1.125rem;
  color: #2681EC;
  position: absolute;
  right: 2.8125rem;
  top: 0.9375rem;
  vertical-align: middle; }

@media (min-width: 64.063em) {
  .primary-nav__chevron {
    display: none; } }

/* ------ primary-nav__link ----------------------------------------------*/
.primary-nav__link, .primary-childnav__link {
  font-size: 1.125rem;
  color: #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: block;
  padding: 0.9375rem 0;
  margin: 0 1.875rem;
  white-space: nowrap; }

.primary-nav__link:active, .primary-childnav__link:active, .primary-nav__link:link, .primary-childnav__link:link, .primary-nav__link:visited, .primary-childnav__link:visited {
  color: #000;
  text-decoration: none; }

.primary-nav__link:hover, .primary-childnav__link:hover {
  text-decoration: none; }

@media (min-width: 64.063em) {
  .primary-nav__link, .primary-childnav__link {
    font-size: 0.875rem;
    color: #333;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgba(38, 129, 236, 0);
    line-height: 66px;
    padding: 0 0.9375rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    margin: 0; }
  .primary-nav__link:active, .primary-childnav__link:active, .primary-nav__link:link, .primary-childnav__link:link, .primary-nav__link:visited, .primary-childnav__link:visited {
    color: #333; }
  .no-touch .primary-nav__link:hover, .no-touch .primary-childnav__link:hover {
    color: #2681EC; } }

.primary-nav__link--is-active {
  font-weight: 700; }

@media (min-width: 64.063em) {
  .primary-nav__link--is-active {
    color: #000;
    border-bottom-color: #2681ec;
    font-weight: 400; }
  .primary-nav__link--is-active:active, .primary-nav__link--is-active:link, .primary-nav__link--is-active:visited {
    color: #000; }
  .no-touch .primary-nav__link--is-active:hover {
    color: #2681EC; } }

@media (min-width: 64.063em) {
  .primary-nav__link--has-drawer-open {
    color: #2681EC; }
  .primary-nav__link--has-drawer-open:active, .primary-nav__link--has-drawer-open:link, .primary-nav__link--has-drawer-open:visited {
    color: #2681EC; }
  .no-touch .primary-nav__link--has-drawer-open:hover {
    color: #2681EC; } }

/* ------ primary-childnav --------------------------------------------*/
.primary-childnav {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  -webkit-transform: translateX(200%);
  transform: translateX(200%);
  -webkit-transition: -webkit-transform 0s 0.5s;
  transition: transform 0s 0.5s; }

.primary-nav__item:nth-child(2) .primary-childnav, .primary-childnav__item:nth-child(2) .primary-childnav {
  top: -100%; }

.primary-nav__item:nth-child(3) .primary-childnav, .primary-childnav__item:nth-child(3) .primary-childnav {
  top: -200%; }

.primary-nav__item:nth-child(4) .primary-childnav, .primary-childnav__item:nth-child(4) .primary-childnav {
  top: -300%; }

.primary-nav__item:nth-child(5) .primary-childnav, .primary-childnav__item:nth-child(5) .primary-childnav {
  top: -400%; }

.primary-nav__item:nth-child(6) .primary-childnav, .primary-childnav__item:nth-child(6) .primary-childnav {
  top: -500%; }

.primary-nav__item:nth-child(7) .primary-childnav, .primary-childnav__item:nth-child(7) .primary-childnav {
  top: -600%; }

.primary-nav__item:nth-child(8) .primary-childnav, .primary-childnav__item:nth-child(8) .primary-childnav {
  top: -700%; }

.primary-nav__item:nth-child(9) .primary-childnav, .primary-childnav__item:nth-child(9) .primary-childnav {
  top: -800%; }

.primary-nav__item:nth-child(10) .primary-childnav, .primary-childnav__item:nth-child(10) .primary-childnav {
  top: -900%; }

.has-child-nav-open .primary-nav__link--has-childnav-open ~ .primary-childnav {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0s;
  transition: transform 0s; }

@media (min-width: 64.063em) {
  .primary-childnav {
    display: none; } }

.primary-childnav__item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  min-height: 50px;
  position: relative; }

.has-child-nav-open .primary-childnav__item {
  -webkit-transform: translateX(0);
  transform: translateX(0); }

.primary-childnav__link {
  margin-left: 3.28125rem;
  font-size: 0.875rem; }

.primary-childnav__link--is-active {
  font-weight: 700; }

.primary-childnav__link--title {
  font-size: 1.125rem;
  color: #000;
  margin-left: 1.875rem; }

.primary-childnav__back {
  color: #666;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 56px;
  margin: 0 1.875rem;
  z-index: 2; }

.primary-childnav__back:active, .primary-childnav__back:link, .primary-childnav__back:visited {
  color: #666; }

.primary-childnav__back:hover {
  text-decoration: none; }

.main-header__topbar {
  padding-left: 0; }

.main-header__topbar .row {
  line-height: 29px; }

.navbar__item--cart {
  margin-right: 0; }

/* Redesign classes from Huge */
/* -----------------------------------------------------------------------


 Coastal Contacts
 
	* DESCRIPTION:  Common SCSS styles for all top navigation screen sizes

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

  ======== TABLE OF CONTENTS ======== 
 	
 	1. COASTAL NAVIGATION & HEADER
		1.1 NAVIGATION MENU VARIABLES
		1.2 NAVIGATION MENU STYLING 
		1.3 SEARCH AUTOCOMPLETE DROPDOWN
	2. 3rd PARTY OVERWRITES
		2.1 COASTAL MMENU STYLE OVERWRITES 
	

  ====================================	  
	  
*/
/*  _____________________________________________________________________________

    1.  COASTAL NAVIGATION & HEADER
 _____________________________________________________________________________  */
/* ==========================================================================
    1.1  NAVIGATION MENU VARIABLES
==========================================================================  */
/* 1200 total width - 4px grid padding (x2) - 2px padding within wrapper = 1090 */
/* ==========================================================================
    1.2  NAVIGATION MENU STYLING
==========================================================================  */
/* 
	needed for the odd element that is not contained within the page-wrapper
	it is rare, but exists - for most elements affected by the sticky-nav
	declaration should go within the "#page-wrapper &.sticky-nav block" below
*/
ul {
  margin: 0; }
  ul li {
    display: block;
    float: left;
    list-style: none; }

#page-wrapper #s-search-btn-wrapper-sticky.postfix {
  background: none;
  border: none;
  text-align: right;
  font-weight: bold; }

#page-wrapper #sticky-nav-block {
  height: 60px;
  display: none; }

#page-wrapper.sticky-nav .no-sticky {
  display: none; }

#page-wrapper.sticky-nav #sticky-nav-block {
  display: block; }

#page-wrapper .main-header-col {
  display: inline-block; }

#page-wrapper .main-header-col:first-child {
  margin-left: 0; }

#page-wrapper ol {
  margin: 0; }
  #page-wrapper ol li {
    display: block;
    float: left;
    font-size: 0.75rem;
    list-style: none; }

@media only screen and (min-width: 1025px) {
  #page-wrapper .header-wrapper #favorites-facet-container {
    margin-right: 0.9375rem; } }

#page-wrapper .header-wrapper .store-logo {
  background-repeat: no-repeat;
  background-position: left center;
  cursor: pointer;
  margin: 0 auto;
  background-image: url("../../images/rwd/logos/logo_v2.png");
  background-size: contain; }
  @media only screen and (max-width: 640px) {
    #page-wrapper .header-wrapper .store-logo {
      margin: 1.125rem auto; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #page-wrapper .header-wrapper .store-logo {
      float: left;
      margin: 1.25rem 0; } }
  @media only screen and (min-width: 1025px) {
    #page-wrapper .header-wrapper .store-logo {
      float: left;
      margin: 1.125rem 0 1.1875rem 0; } }
  @media only screen and (min-width: 1025px) {
    #page-wrapper .header-wrapper .store-logo.ca-store, #page-wrapper .header-wrapper .store-logo.cafr-store, #page-wrapper .header-wrapper .store-logo.nz-store, #page-wrapper .header-wrapper .store-logo.au-store {
      width: 10.875rem;
      height: 3.9375rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #page-wrapper .header-wrapper .store-logo.ca-store, #page-wrapper .header-wrapper .store-logo.cafr-store, #page-wrapper .header-wrapper .store-logo.nz-store, #page-wrapper .header-wrapper .store-logo.au-store {
      width: 8rem;
      height: 2.9375rem; } }
  @media only screen and (max-width: 640px) {
    #page-wrapper .header-wrapper .store-logo.ca-store, #page-wrapper .header-wrapper .store-logo.cafr-store, #page-wrapper .header-wrapper .store-logo.nz-store, #page-wrapper .header-wrapper .store-logo.au-store {
      width: 8rem;
      height: 2.9375rem; } }
  @media only screen and (min-width: 1025px) {
    #page-wrapper .header-wrapper .store-logo.mx-store {
      width: 16.375rem;
      height: 3.4375rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #page-wrapper .header-wrapper .store-logo.mx-store {
      width: 13.5625rem;
      height: 2.8125rem; } }
  @media only screen and (max-width: 640px) {
    #page-wrapper .header-wrapper .store-logo.mx-store {
      width: 13.5625rem;
      height: 2.8125rem; } }
  @media only screen and (min-width: 1025px) {
    #page-wrapper .header-wrapper .store-logo.lwuk-store {
      width: 21.125rem;
      height: 3.4375rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #page-wrapper .header-wrapper .store-logo.lwuk-store {
      width: 15.875rem;
      height: 2.8125rem; } }
  @media only screen and (max-width: 640px) {
    #page-wrapper .header-wrapper .store-logo.lwuk-store {
      width: 13.5rem;
      height: 2.8125rem; } }
  @media only screen and (min-width: 1025px) {
    #page-wrapper .header-wrapper .store-logo.cs-store {
      width: 15.875rem;
      height: 3.4375rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #page-wrapper .header-wrapper .store-logo.cs-store {
      width: 13.0625rem;
      height: 2.8125rem; } }
  @media only screen and (max-width: 640px) {
    #page-wrapper .header-wrapper .store-logo.cs-store {
      width: 10.625rem;
      height: 2.8125rem; } }

#page-wrapper .header-wrapper .icon-value-group {
  margin: 0 auto;
  text-align: center;
  width: auto; }
  @media only screen and (min-width: 1025px) {
    #page-wrapper .header-wrapper .icon-value-group {
      padding-left: 1.25rem; } }
  #page-wrapper .header-wrapper .icon-value-group .cc-icon-shop-cart,
  #page-wrapper .header-wrapper .icon-value-group .cc-icon-fav,
  #page-wrapper .header-wrapper .icon-value-group .cc-shop-cart {
    cursor: pointer;
    display: inline-block; }
  #page-wrapper .header-wrapper .icon-value-group .number-items-wrapper {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle; }
  #page-wrapper .header-wrapper .icon-value-group a, #page-wrapper .header-wrapper .icon-value-group a:hover {
    text-decoration: none; }

#page-wrapper #quick-cat-links a:hover {
  text-decoration: none; }

#page-wrapper .nav-view-all-txt {
  color: #0069aa;
  text-transform: uppercase; }

/* moved to the global scope to apply to off-canvas nav */
.with-items, .cc-icon-shop-cart {
  color: #0091BA; }

.with-items.side-bar {
  color: #000; }

.main-nav-menu li a, .main-nav-menu .no-link {
  color: #000;
  display: block;
  line-height: 3.5; }
  @media only screen and (min-width: 1025px) {
    .main-nav-menu li a, .main-nav-menu .no-link {
      line-height: 3; } }
  @media only screen and (max-width: 1024px) {
    .main-nav-menu li a, .main-nav-menu .no-link {
      font-weight: 600; } }

.main-nav-menu .sale-cat h2 {
  color: #ea4a35; }

.eye-help-q a, .eye-help-q span {
  color: #000;
  text-transform: uppercase; }

.eye-help-q .none-h2 span {
  display: inline !important; }

@media only screen and (min-width: 1025px) {
  .eye-help-q:hover a, .eye-help-q:hover span {
    color: #00bbd8; } }

.eye-help-q .cc-icon-info-circle-empty:before {
  display: inline-block;
  font-size: 1.0625rem;
  line-height: 0;
  margin-top: -0.1875rem; }

.eye-health .cc-icon-info-circle-empty:before {
  color: #67757f;
  margin-left: 0.3125rem; }

.keyWordSearch {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  border: 1px solid #dfe9ef;
  border-width: 1px 1px 1px 1px; }

@media only screen and (max-width: 640px) {
  #newsletter-footer-form label {
    margin: 0.625rem 0.9375rem; } }

#main-body-content, #newsletter-footer-form {
  width: 100%; }
  @media only screen and (max-width: 640px) {
    #main-body-content, #newsletter-footer-form {
      overflow: hidden; } }
  #main-body-content #upper-hr, #newsletter-footer-form #upper-hr {
    margin-top: 0; }
  #main-body-content #lower-hr, #newsletter-footer-form #lower-hr {
    margin-top: 1.1875rem !important; }

#main-body-container-inner {
  z-index: 10; }
  @media only screen and (min-width: 1025px) {
    #main-body-container-inner {
      position: relative; } }

#homepage-newsletter-container {
  margin-bottom: 0.0625rem;
  padding: 1.25rem 0; }
  @media only screen and (max-width: 1024px) {
    #homepage-newsletter-container {
      background-color: #F3F4F5; } }
  #homepage-newsletter-container #upper-hr {
    margin-top: 1.1875rem; }
  @media only screen and (max-width: 640px) {
    #homepage-newsletter-container .error small.error {
      padding: 0 0.9375rem;
      margin-bottom: 0.9375rem; } }

/* ==========================================================================
  	1.3 SEARCH AUTOCOMPLETE DROPDOWN
==========================================================================  */
body .search-dropdown-wrapper {
  position: absolute;
  z-index: 100; }

body #search-for-keyword-search-top-l {
  top: 0 !important; }
  body #search-for-keyword-search-top-l .search-dropdown-wrapper {
    margin-top: 4.375rem;
    left: 1.875rem;
    position: relative;
    z-index: 1002;
    width: 19.375rem; }

@media only screen and (min-width: 1025px) {
  body.sticky-nav .search-dropdown-wrapper {
    margin-top: -1.5rem;
    left: 0;
    margin-left: 1.875rem;
    width: 14.1875rem;
    position: absolute;
    z-index: 9000; } }

.results {
  border-width: 0px 1px 1px 1px;
  border-color: #dee8ec;
  border-style: solid;
  background: white;
  padding: 10px 5px 10px 5px;
  text-transform: uppercase; }
  .results:hover {
    cursor: pointer; }

.top_bottom_result {
  padding: 25px 10px 25px 10px; }

/*  _____________________________________________________________________________

 	2. 3rd PARTY OVERWRITES   
 _____________________________________________________________________________  */
/* ==========================================================================
    2.1 COASTAL MMENU STYLE OVERWRITES
==========================================================================  */
/* mmenu overwrite default settings */
/* Need to take 1px off for the bottom border displayed for off canvas sliding menu items */
html.mm-opened .mm-page {
  box-shadow: 0 0 0 transparent !important; }

html.mm-opening .mm-page, html.mm-opening #mm-blocker, html.mm-opening .mm-fixed-top, html.mm-opening .mm-fixed-bottom {
  left: 300px !important; }

@media only screen and (min-width: 1025px) {
  html.mm-opening .mm-page,
  html.mm-opening #mm-blocker,
  html.mm-opening .mm-fixed-top,
  html.mm-opening .mm-fixed-bottom {
    left: 0 !important; } }

#menu-close-btn {
  cursor: pointer;
  background: none repeat scroll 0 0 lightblue;
  margin-top: 150px;
  padding: 5px 10px;
  position: absolute;
  z-index: 900; }

.mm-menu {
  background: #fff !important;
  color: #67757f !important;
  overflow: visible !important;
  width: 300px !important; }
  .mm-menu .cc-icon-fav-hollow:before, .mm-menu .cc-icon-phone:before, .mm-menu .cc-icon-fav:before, .mm-menu .cc-icon-info-circle-empty:before {
    font-size: 1rem;
    color: #000; }

.mm-menu .mm-panel {
  padding-top: 0 !important; }

.mm-list > li.mm-label > span {
  padding: auto; }

.mm-list > li {
  float: none; }

.mm-list > li > a,
.mm-list > li > span {
  padding: 0 0 0 0 !important;
  margin-left: 1.25rem; }

.mm-list > li > a {
  background: none; }

.mm-list > li.mm-label > a.mm-fullsubopen {
  height: 1.5625rem !important; }

.mm-menu .mm-list > li:after {
  border-color: white; }

.mm-menu > .mm-highest {
  border-right: solid 1px #dfe9ef; }
  .mm-menu > .mm-highest li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {
    border: 0;
    line-height: 30px; }
  .mm-menu > .mm-highest li:nth-child(2) {
    padding-top: 0.625rem; }
  .mm-menu > .mm-highest li:last-child {
    border-bottom: solid 1px #dfe9ef;
    padding-bottom: 0.625rem; }
  .mm-menu > .mm-highest li > a.third-level-item {
    background: white;
    height: 1.875rem;
    line-height: 1.875rem;
    text-indent: 1.25rem;
    font-size: 0.875rem;
    font-weight: normal; }
    .mm-menu > .mm-highest li > a.third-level-item:hover {
      color: #0091BA; }

.sub-mmenu-option {
  font-size: 0.8125rem; }
  .sub-mmenu-option .mm-list li:after {
    border-bottom: none !important; }
  .sub-mmenu-option .mm-list li > a.third-level-item {
    background: white;
    height: auto;
    line-height: 1.875rem;
    vertical-align: middle;
    text-indent: 1.25rem;
    font-weight: normal; }
    .sub-mmenu-option .mm-list li > a.third-level-item:hover {
      color: #0091BA; }

.mm-list > li:not(.mm-label):not(.mm-search):not(.mm-noresults):after {
  border-color: #dfe9ef;
  margin-left: 0 !important; }

.mm-list > li.mm-label {
  background: #fff !important;
  border-top: solid 1px #dfe9ef;
  display: block;
  font-size: inherit !important;
  margin-left: 0px !important;
  text-indent: 0px !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  padding: 0 10px 0 0 !important;
  white-space: nowrap !important; }
  .mm-list > li.mm-label.text-ellipsis {
    width: 283px;
    padding-right: 60px !important; }
  .mm-list > li.mm-label h2, .mm-list > li.mm-label span {
    display: inline-block;
    font-weight: bold !important; }
  .mm-list > li.mm-label .cc-icon-info-circle-empty {
    margin-left: 0.3125rem; }
  .mm-list > li.mm-label > span {
    display: block; }

.mm-menu .mm-list > li > a.mm-subopen.mm-fullsubopen:after,
.mm-menu .mm-list > li > a.mm-subclose.mm-fullsubopen:before {
  border: none;
  color: #0091BA; }

.mm-menu .mm-list > li > a.mm-subclose.mm-fullsubopen:before {
  background: url("../../images/rwd/sprites/globals/global_icons.png") no-repeat -24px 0;
  height: 24px;
  width: 24px; }

.mm-menu .mm-list > li > a.mm-subopen.mm-fullsubopen: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;
  color: #0091BA; }

.mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {
  border-width: 0px; }

.mm-menu .mm-list > li.mm-opened a.second-level-item {
  border-bottom: none; }

.mm-menu .mm-list > li a.second-level-item {
  background: white;
  border-top: solid 1px #dfe9ef;
  color: #0091BA;
  font-weight: 600;
  text-indent: 20px;
  text-transform: uppercase; }
  .mm-menu .mm-list > li a.second-level-item .nav-heading {
    font-size: 0.8125rem; }

.mm-menu .mm-list > li.mm-label.mm-opened + .sub-mmenu-option {
  border-top: solid 1px #dfe9ef; }
  .mm-menu .mm-list > li.mm-label.mm-opened + .sub-mmenu-option a {
    border-top: none; }

.mm-menu .mm-list > li.mm-label.mm-opened > a.mm-subopen: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;
  color: #0091BA; }

.mm-menu .mm-list > li > a.mm-subopen: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;
  line-height: 1;
  content: ""; }

.mm-menu .mm-list > li.mm-selected > a:not(.mm-subopen),
.mm-menu .mm-list > li.mm-selected > span {
  background: #fff !important; }

/* Controls the click area for submenu (deep navigation) */
.mm-list a.mm-subopen {
  color: #0091BA;
  margin-right: 1.125rem;
  position: default !important;
  top: 0;
  width: 100%;
  /* Change the anchor area for drill down submenu */ }

.mm-list a.mm-subopen.mm-fullsubopen {
  top: 1.0625rem !important;
  /* Vertically locates the open/close icon */
  width: 1.5625rem !important; }

.mm-list > li:not(.mm-label):not(.mm-search):not(.mm-noresults):after {
  border-color: #dfe9ef;
  margin-left: 0 !important; }

.mm-list a.mm-subopen.mm-fullsubopen:before {
  border-left-style: solid;
  border-left-width: 1px; }

.mm-menu .mm-list > li > a.mm-subopen:before {
  background: none;
  border: none; }

.mm-menu .mm-list > li.mm-subtitle {
  background: #F3F4F5;
  border-bottom: 1px solid #dfe9ef !important;
  color: #67757f;
  height: 60px;
  margin-top: 20px; }

.mm-menu .mm-list > li > a.mm-subclose {
  background: none repeat scroll 0 0 transparent !important;
  color: #67757f !important;
  text-transform: uppercase; }

.mm-list a.mm-subopen + a, .mm-list a.mm-subopen + span {
  margin-right: 0 !important; }

/* Change the submenu arrow icons */
.mm-menu .mm-list > li.sub-mmenu-option > a.mm-subopen: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;
  float: right;
  right: 0; }

.mm-menu .mm-list > li.sub-mmenu-option.mm-opened > a.mm-subopen: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;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  top: 0; }

.mm-menu .mm-list > li > a.mm-subclose: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;
  float: left; }

.mm-list a.mm-subclose:before {
  margin-bottom: -4px !important; }

.mm-subopen:hover + .second-level-item, .mm-subopen:hover :after, .mm-subopen:hover:after {
  color: #0091BA; }

.mm-list a.mm-subclose {
  padding: 0;
  text-indent: 0; }

/* Overwrite defaulting vendor style */
.mm-list a.mm-subclose:before, .mm-list a.mm-subopen:after {
  border: none;
  bottom: auto;
  content: '';
  display: block;
  height: auto;
  margin-right: 15px;
  margin-bottom: 0;
  left: 0;
  position: relative;
  transform: none;
  width: auto;
  -webkit-transform: none; }

.dropdown-menu {
  background-color: white;
  position: absolute;
  right: -5px;
  top: 4.3125rem;
  width: 11.25rem; }
  .dropdown-menu ul {
    background-color: #FFF;
    box-shadow: 0 1px 3px #e6e6e6;
    margin-left: 0; }
    .dropdown-menu ul li.dropdown-menu--item {
      display: block;
      float: none;
      margin: 0;
      text-align: left; }
      .dropdown-menu ul li.dropdown-menu--item a {
        display: block;
        font-weight: 600;
        padding: 10px 20px; }
        .dropdown-menu ul li.dropdown-menu--item a:hover {
          text-decoration: none;
          color: #2681EC; }
      .dropdown-menu ul li.dropdown-menu--item:first-child a {
        padding-top: 1.25rem; }
      .dropdown-menu ul li.dropdown-menu--item:last-child a {
        padding-bottom: 1.25rem; }

/* Common Top Nav Header classes */
/* -----------------------------------------------------------------------


 Coastal Contacts
 
  * DESCRIPTION: The containers for page body.  
  
  NOTE: From SCSS Generated. 

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

  ======== TABLE OF CONTENTS ======== 
  
   	1 	BODY CONTAINERS
   	2. 	TABS (non foundation elements (i.e. wrappers)
   	3. 	SUBHOME 
    4.  GLOBAL BODY
    5.  KEYWORD SEARCH
    ====================================
  
*/
/*  _____________________________________________________________________________

    1. BODY CONTAINERS
 _____________________________________________________________________________  */
body {
  overflow-y: scroll; }

#main-lnav-container {
  max-width: 100%;
  padding-left: 0.3125rem; }
  @media only screen and (max-width: 640px) {
    #main-lnav-container {
      border-left: none;
      border-right: none; } }
  @media only screen and (min-width: 1025px) {
    #main-lnav-container {
      padding-top: 0.5rem; } }

#main-content-container .main-content-container-heading h1 {
  text-transform: uppercase; }
  @media only screen and (max-width: 640px) {
    #main-content-container .main-content-container-heading h1 {
      text-indent: 0.375rem; } }

@media only screen and (min-width: 641px) {
  #main-content-container-inner {
    display: flex; } }

.missing-hotspot-cat-title {
  float: left;
  font-size: 1.5rem;
  margin: 0 0 0.9375rem -0.25rem; }

.page-title-wrapper {
  padding-bottom: 0.25rem; }

/*  _____________________________________________________________________________

   2. TABS (non foundation elements (i.e. wrappers)
_____________________________________________________________________________  */
@media only screen and (max-width: 640px) {
  .catalog-tab-title {
    margin: 1.875rem auto 0; } }

@media only screen and (min-width: 641px) {
  .catalog-tab-title {
    margin: 0.625rem 0 0.3125rem 0; } }

.catalog-tab-title h1, .catalog-tab-title span {
  color: #67757f;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase; }
  @media only screen and (max-width: 640px) {
    .catalog-tab-title h1, .catalog-tab-title span {
      text-align: center; } }

@media only screen and (max-width: 640px) {
  .catalog-tab-title h1, .catalog-tab-title .item-count {
    display: block;
    padding-bottom: 0.3125rem; } }

@media only screen and (min-width: 641px) {
  .catalog-tab-title h1, .catalog-tab-title .item-count {
    display: inline-block; } }

.catalog-tab-title .item-count {
  font-size: 0.875rem;
  font-weight: normal; }
  .catalog-tab-title .item-count:before {
    content: '('; }
  .catalog-tab-title .item-count:after {
    content: ')'; }

#fav-tab-content-container div.price-sale-grid-col span {
  margin-bottom: 0; }

#fav-tab-content-container span {
  margin-bottom: 1.5625rem; }

#fav-tab-content-container ol {
  margin-bottom: 1.875rem; }

#fav-tab-content-container li {
  margin-bottom: 0.4375rem; }

#favourites-content #wish-list-header p, #favourites-content #wish-list-header #start-browsing-btn {
  margin-left: 0.3125rem; }

#favourites-content #wish-list-header #start-browsing-btn {
  margin-top: 1.25rem; }

#favourites-content #wish-list-header ol {
  margin-top: 0.9375rem;
  margin-left: 1.5625rem; }

#favourites-content span {
  margin-bottom: 1.5625rem; }

#favourites-content ol {
  margin-bottom: 0.3125rem; }

#favourites-content li {
  line-height: 1.375rem; }

#favourites-content #featured-products-title, #favourites-content #recommended-products-title {
  margin-bottom: 0.625rem;
  padding-left: 0.25rem; }

#browse-content-container-tryon {
  float: left;
  width: 100%; }

/*  _____________________________________________________________________________

   3. SUBHOME
_____________________________________________________________________________  */
#shop-category-container {
  margin-left: 0px; }

.shop-contacts-col {
  float: left;
  padding-bottom: 0;
  padding-left: 0.3125rem;
  padding-right: 0;
  position: relative; }
  .shop-contacts-col:nth-child(odd) .category-image {
    margin-left: 0;
    margin-right: 5px; }
  .shop-contacts-col:nth-child(even) .category-image {
    margin-left: 5px;
    margin-right: 0; }

.category-image {
  border: 1px solid #dfe9ef;
  color: #7A7A7A;
  cursor: pointer;
  height: 5.625rem;
  margin: 0 0 0.625rem; }
  .category-image .shop-category {
    margin: 0 auto;
    width: 10.625rem; }
  .category-image .daily-contacts {
    background: url("../../images/rwd/sprites/subhome/contacts-category-sprite.png") no-repeat 0px 0px;
    height: 56px;
    float: left;
    margin-top: 0.9375rem;
    width: 61px; }
  .category-image .weekly-contacts {
    background: url("../../images/rwd/sprites/subhome/contacts-category-sprite.png") no-repeat -62px 0px;
    height: 56px;
    float: left;
    margin-top: 0.9375rem;
    width: 61px; }
  .category-image .monthly-contacts {
    background: url("../../images/rwd/sprites/subhome/contacts-category-sprite.png") no-repeat 0px -57px;
    height: 56px;
    float: left;
    margin-top: 0.9375rem;
    width: 61px; }
  .category-image .colour-contacts {
    background: url("../../images/rwd/sprites/subhome/contacts-category-sprite.png") no-repeat -65px -56px;
    height: 56px;
    float: left;
    margin-top: 0.9375rem;
    width: 61px; }
  .category-image .shop-contacts {
    margin: 0.9375rem 0.3125rem;
    padding-left: 3.75rem;
    position: absolute;
    width: 14.375rem; }
    @media only screen and (min-width: 641px) and (max-width: 1024px) {
      .category-image .shop-contacts {
        width: 12.5rem; } }
    .category-image .shop-contacts span {
      display: block;
      margin-left: 0.3125rem;
      vertical-align: top; }
      .category-image .shop-contacts span.shop-period {
        font-size: 1.0625rem; }
      .category-image .shop-contacts span.wear-contacts {
        font-size: 0.875rem;
        font-weight: bold;
        text-transform: uppercase; }

/*  _____________________________________________________________________________

   4. GLOBAL BODY
_____________________________________________________________________________  */
.shop-more-btn-wrapper {
  text-align: center;
  margin-bottom: 0.625rem; }
  .shop-more-btn-wrapper .shop-more-btn {
    display: inline-block;
    /* these overwrites are needed to switch back to the non-breaking version for small-medium screens */ }
    @media only screen and (min-width: 1025px) {
      .shop-more-btn-wrapper .shop-more-btn:not(:last-child) {
        margin-right: 0.625rem; } }
    @media only screen and (min-width: 641px) and (max-width: 1024px) {
      .shop-more-btn-wrapper .shop-more-btn {
        width: 8.75rem;
        white-space: nowrap;
        margin-right: 0; } }
    @media only screen and (min-width: 640px) and (max-width: 800px) {
      .shop-more-btn-wrapper .shop-more-btn {
        width: 100%; }
        .shop-more-btn-wrapper .shop-more-btn:not(:last-child) {
          margin-bottom: 0.625rem; } }
    @media only screen and (max-width: 640px) {
      .shop-more-btn-wrapper .shop-more-btn {
        display: block;
        margin: auto auto 0.625rem auto; } }
    @media only screen and (min-width: 640px) and (max-width: 800px) {
      .shop-more-btn-wrapper .shop-more-btn span.hide-for-medium {
        display: inline-block !important; }
      .shop-more-btn-wrapper .shop-more-btn span.show-for-medium-only {
        display: none !important; } }
    .shop-more-btn-wrapper .shop-more-btn .btn-primary {
      font-size: 0.75rem;
      font-weight: bolder;
      line-height: 1rem;
      margin: auto;
      min-width: initial;
      padding-bottom: 0.5rem;
      padding-top: 0.5rem;
      width: auto; }
      .shop-more-btn-wrapper .shop-more-btn .btn-primary span:after {
        content: '';
        margin-left: 0.3125rem; }
      @media only screen and (max-width: 800px) {
        .shop-more-btn-wrapper .shop-more-btn .btn-primary {
          display: block;
          text-align: center;
          width: 90%; } }
      @media only screen and (max-width: 640px) {
        .shop-more-btn-wrapper .shop-more-btn .btn-primary {
          padding-top: 0.375rem;
          padding-bottom: 0.375rem; } }
      .shop-more-btn-wrapper .shop-more-btn .btn-primary:hover {
        color: #fff; }
      .shop-more-btn-wrapper .shop-more-btn .btn-primary .cc-icon-caret-right:before {
        color: white;
        vertical-align: middle;
        font-size: 1rem;
        padding-left: 0.3125rem; }

/*  _____________________________________________________________________________

   5. KEYWORD SEARCH
_____________________________________________________________________________  */
#search-result-container .shop-more-btn-wrapper {
  text-align: left;
  margin-top: 1.5625rem; }

.search-results-header, .zero-results-header {
  margin-top: 1.25rem;
  line-height: 1.375rem;
  font-size: 1.125rem;
  text-transform: uppercase;
  font-weight: bold; }
  .search-results-header span, .zero-results-header span {
    font-weight: normal;
    text-transform: none; }
    .search-results-header span.search-results-header-num-results, .zero-results-header span.search-results-header-num-results {
      font-size: 0.75rem; }
  @media only screen and (max-width: 640px) {
    .search-results-header, .zero-results-header {
      text-align: center; } }

.tab-content-empty {
  margin-top: 1.25rem; }

@media only screen and (max-width: 640px) {
  div#search-result-container .accord-sec-wrapper {
    display: inline-block; } }

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


 Coastal Contacts
 
	* DESCRIPTION:  Common SCSS styles for footer on all screen sizes

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

  ======== TABLE OF CONTENTS ========  
 
 	1. RWD

  ====================================	  
	  
*/
/*
----------------------------------------------------------
1. RWD
----------------------------------------------------------
*/
.footer-wrapper {
  background: #F3F4F5; }
  @media only screen and (max-width: 640px) {
    .footer-wrapper {
      text-align: center; } }
  .footer-wrapper .footer-panel {
    color: #67757f;
    padding: 1.25rem 1.25rem 1.875rem 1.25rem; }
    .footer-wrapper .footer-panel .heading2 {
      margin-bottom: 1.4375rem; }
      @media only screen and (min-width: 641px) and (max-width: 1024px) {
        .footer-wrapper .footer-panel .heading2 {
          margin: 0.1875rem auto 0.9375rem; } }
      @media only screen and (max-width: 640px) {
        .footer-wrapper .footer-panel .heading2 {
          margin: 0.9375rem auto 0.3125rem; } }
    .footer-wrapper .footer-panel .h2heading {
      padding-bottom: 1.25rem; }
    .footer-wrapper .footer-panel span {
      color: #67757f;
      display: inline-block;
      margin-bottom: 1.25rem; }
      @media only screen and (max-width: 1024px) {
        .footer-wrapper .footer-panel span {
          line-height: 1.25rem;
          font-size: 0.75rem; } }
      .footer-wrapper .footer-panel span:hover {
        color: #67757f; }
    .footer-wrapper .footer-panel a {
      display: block;
      line-height: 1.125rem;
      margin-bottom: 1.25rem; }
      .footer-wrapper .footer-panel a.s-faq {
        display: inline-block; }

#footer-cc-container {
  margin-bottom: 0.625rem; }

@media only screen and (min-width: 641px) {
  .accord-sec-footer {
    display: none; } }

@media only screen and (max-width: 640px) {
  .accord-sec-footer {
    display: none;
    position: fixed;
    bottom: 0;
    margin: auto;
    padding: 0.9375rem 0;
    width: 100%;
    z-index: 9999;
    background: white;
    border-top: solid 1px #dfe9ef; }
    .accord-sec-footer ul.s-nav-footer {
      text-align: center; }
      .accord-sec-footer ul.s-nav-footer li {
        float: none !important;
        display: inline-block !important;
        margin: auto 0.15625rem; } }
      @media only screen and (max-width: 640px) and (max-width: 640px) {
        .accord-sec-footer ul.s-nav-footer li a {
          border: 0.0625rem solid #dfe9ef;
          border-width: 0.0625rem 0.0625rem 0.0625rem 0.0625rem;
          /*line-height: $s-accordion-height; */
          text-transform: uppercase;
          float: none;
          display: inline-block;
          padding: 15px 35px;
          background-color: #F3F4F5; } }

@media only screen and (max-width: 640px) {
        .accord-sec-footer ul.s-nav-footer li a:link {
          text-decoration: none; }
      .accord-sec-footer ul.s-nav-footer div.btn-default {
        min-width: 7.6875rem; }
      .accord-sec-footer ul.s-nav-footer .btn-default {
        background-color: #fff;
        color: #0091BA;
        border: solid 1px #0091BA; } }

#br-related-searches-widget {
  padding: 1.125rem 0 1.875rem; }
  #br-related-searches-widget .br-related-heading {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bold; }
  #br-related-searches-widget .br-related-query {
    border-right: 1px solid #dfe9ef;
    display: inline-block;
    font-size: 0.75rem;
    margin-top: 0.75rem;
    padding: 0 0.625rem 0 0.3125rem; }
    #br-related-searches-widget .br-related-query a:hover {
      color: #37BA95; }
  #br-related-searches-widget div:nth-of-type(2) {
    padding: 0 0.625rem 0 0; }

/*  _____________________________________________________________________________

	3. FEATURES 
 _____________________________________________________________________________  **/
/*  _____________________________________________________________________________

    1.  NEWSLETTER SIGN UP 
 _____________________________________________________________________________  **/
#pop-newsletter-submit {
  margin: 15px 0 25px 0; }

#pop-newsletter-privacy-link {
  text-decoration: underline; }

#pop-newsletter-footer p {
  margin-top: 0; }

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