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


 Coastal Contacts
 
  * DESCRIPTION:  The primary SASS file that imports SCSS code to build the master frame of the website for small and medium 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; }

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

/*  _____________________________________________________________________________

    3. BUTTONS MIXINS
 _____________________________________________________________________________  */
/*  _____________________________________________________________________________

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

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

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

    2. THE COASTAL CONTACTS CSS 
    (We need to have CC CSS after third party CSS so we can overwrite properties)
 _____________________________________________________________________________  **/
/* -----------------------------------------------------------------------


 Coastal Contacts
 
	* DESCRIPTION:  The SCSS for top navigation (small & medium screen size)
 
----------------------------------------------------------------------- */
/*

  ======== TABLE OF CONTENTS ======== 
 
	1. NAVIGATION MENU VARIABLES
	2. NAVIGATION MENU MIXINS
	3. COASTAL SMALL SCREEN TOP NAVIGATION
  
  ====================================	  
	  
*/
/*  _____________________________________________________________________________

    1.  NAVIGATION MENU VARIABLES
 _____________________________________________________________________________  */
/*  _____________________________________________________________________________

    2.  NAVIGATION MENU MIXINS
 _____________________________________________________________________________  */
/*  _____________________________________________________________________________

    3.  COASTAL SMALL SCREEN TOP NAVIGATION
 _____________________________________________________________________________  */
#header-top-hotspot {
  overflow: hidden; }

/* 
	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
*/
body #search-for-keyword-search-top-s-m {
  top: 0 !important; }
  body #search-for-keyword-search-top-s-m .search-dropdown-wrapper {
    left: 0;
    margin-top: 12.1875rem;
    position: relative;
    top: 0;
    z-index: 1002; }
    @media only screen and (max-width: 640px) {
      body #search-for-keyword-search-top-s-m .search-dropdown-wrapper {
        width: 100%; } }
    @media only screen and (min-width: 641px) and (max-width: 1024px) {
      body #search-for-keyword-search-top-s-m .search-dropdown-wrapper {
        width: 82%; } }

@media only screen and (max-width: 1024px) {
  body.sticky-nav .search-dropdown-wrapper {
    margin-top: 3.75rem;
    top: -8.5625rem !important; } }

@media only screen and (max-width: 640px) {
  body.sticky-nav .search-dropdown-wrapper {
    width: 100%; } }

@media only screen and (min-width: 641px) and (max-width: 1024px) {
  body.sticky-nav .search-dropdown-wrapper {
    width: 82%; } }

#page-wrapper.sticky-nav .s-top-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2002;
  /* Always z-index greater than the drop down Search field */
  opacity: 0.95; }
  #page-wrapper.sticky-nav .s-top-header .s-nav-header li.active {
    border-color: #fff;
    height: 61px !important; }

#page-wrapper.sticky-nav #s-nav-search-wrapper {
  position: fixed;
  z-index: 2001;
  top: 66px;
  border-bottom: 1px solid #dfe9ef; }

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

#page-wrapper #s-menu-search-icon:before {
  color: #0091ba !important; }

#page-wrapper #s-nav-search-wrapper.active {
  position: fixed;
  top: 0;
  z-index: 2001; }

#page-wrapper .header-wrapper {
  background: #fff;
  position: relative; }
  @media only screen and (max-width: 640px) {
    #page-wrapper .header-wrapper #s-logo-container {
      height: 5rem; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px) {
    #page-wrapper .header-wrapper #s-logo-container {
      height: 5.3125rem; } }
  #page-wrapper .header-wrapper .s-top-header {
    background: #F3F4F5;
    color: #67757f;
    margin: 0;
    min-height: 55px;
    min-width: 320px; }
    #page-wrapper .header-wrapper .s-top-header .s-nav-header .cc-icon-magnify-glass:before, #page-wrapper .header-wrapper .s-top-header .s-nav-header .cc-icon-fav:before, #page-wrapper .header-wrapper .s-top-header .s-nav-header .cc-icon-fav-hollow:before, #page-wrapper .header-wrapper .s-top-header .s-nav-header .cc-icon-shop-cart:before {
      font-size: 1.3125rem; }
    #page-wrapper .header-wrapper .s-top-header .s-nav-header a {
      display: block;
      float: left;
      height: 55px;
      top: 0;
      width: auto; }
      @media only screen and (min-width: 641px) and (max-width: 1024px) {
        #page-wrapper .header-wrapper .s-top-header .s-nav-header a {
          width: 100%; }
          #page-wrapper .header-wrapper .s-top-header .s-nav-header a#menu-btn {
            padding-left: 0.9375rem;
            width: auto; } }
      @media only screen and (max-width: 640px) {
        #page-wrapper .header-wrapper .s-top-header .s-nav-header a {
          width: 100%; }
          #page-wrapper .header-wrapper .s-top-header .s-nav-header a#menu-btn {
            width: 100%;
            text-align: center;
            border-right: 1px solid #dfe9ef; }
            #page-wrapper .header-wrapper .s-top-header .s-nav-header a#menu-btn.no-border {
              border-right: none;
              text-align: left;
              padding-left: 0.9375rem; } }
      @media only screen and (min-width: 641px) and (max-width: 1024px) {
        #page-wrapper .header-wrapper .s-top-header .s-nav-header a#menu-btn {
          margin-right: 0.625rem; } }
      #page-wrapper .header-wrapper .s-top-header .s-nav-header a#menu-btn:hover {
        text-decoration: none; }
      #page-wrapper .header-wrapper .s-top-header .s-nav-header a#menu-btn:before {
        color: #000;
        font-size: 1.3125rem; }
    #page-wrapper .header-wrapper .s-top-header #s-menu-shop-cart-btn .s-header-item a {
      width: 88%; }
    #page-wrapper .header-wrapper .s-top-header ul li .s-header-item {
      cursor: pointer;
      display: block;
      height: 55px;
      line-height: 2;
      text-transform: uppercase;
      text-align: center;
      border: none; }
      @media only screen and (max-width: 640px) {
        #page-wrapper .header-wrapper .s-top-header ul li .s-header-item {
          padding: 0.625rem 0.3125rem; } }
      @media only screen and (min-width: 641px) and (max-width: 1024px) {
        #page-wrapper .header-wrapper .s-top-header ul li .s-header-item {
          padding-top: 0.625rem; } }
    #page-wrapper .header-wrapper .s-top-header li#s-menu-main #s-menu-content-wrapper {
      line-height: 55px;
      margin: 0 auto;
      width: 100%; }
      #page-wrapper .header-wrapper .s-top-header li#s-menu-main #s-menu-content-wrapper #menu-main-txt {
        color: #000;
        font-weight: bold;
        cursor: pointer;
        line-height: 2.5em;
        text-align: left;
        display: none; }
        @media only screen and (min-width: 641px) {
          #page-wrapper .header-wrapper .s-top-header li#s-menu-main #s-menu-content-wrapper #menu-main-txt {
            display: inline !important;
            text-transform: uppercase; } }
    #page-wrapper .header-wrapper .s-top-header #s-menu-search-btn {
      border-right: solid 1px #dfe9ef; }
      #page-wrapper .header-wrapper .s-top-header #s-menu-search-btn + li {
        border-right: solid 1px #dfe9ef;
        min-height: 55px; }
      #page-wrapper .header-wrapper .s-top-header #s-menu-search-btn.active {
        background: #fff; }

#s-nav-search-wrapper {
  background: #fff;
  margin-top: -200px;
  float: left;
  padding: 1.25rem 0 0.9375rem 0.625rem;
  width: 100%;
  z-index: -1; }
  #s-nav-search-wrapper #s-nav-search-box {
    -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;
    border-style: solid solid solid solid; }
  #s-nav-search-wrapper #s-search-btn-wrapper {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #fff;
    border-color: #dfe9ef;
    border-image: none;
    border-style: solid solid solid solid;
    cursor: pointer;
    font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
    font-weight: normal;
    margin: 0;
    text-decoration: none;
    transition: background-color 300ms ease-out 0s;
    position: static;
    box-shadow: 0 0 0 transparent inset;
    border-width: 1px 1px 1px 1px;
    border-width: 0px 0px 0px 0px; }
    #s-nav-search-wrapper #s-search-btn-wrapper span {
      float: left;
      display: inline-block; }
    #s-nav-search-wrapper #s-search-btn-wrapper #s-search-btn {
      font-weight: bold;
      line-height: 2.5;
      padding: 0 0.9375rem;
      text-align: center;
      width: 100%; }
    #s-nav-search-wrapper #s-search-btn-wrapper #s-close-search-btn {
      line-height: 1.5;
      padding: 0 5px; }

.sub-mmenu-option a {
  text-indent: 40px; }

#close-menu-btn {
  background: #fff;
  color: #fff;
  left: 300px !important;
  top: 150px;
  text-align: center;
  height: 30px;
  width: 60px;
  z-index: 999999; }

/* TODO: SS - Move to appropriate place */
#sticky-shopping-cart {
  background: url("https://us.objects-cc.com/template-resources/images/prototyping/shop_cart.png") no-repeat;
  position: fixed;
  height: 70px;
  width: 70px;
  top: 400px;
  right: 0;
  z-index: 99999; }

.carousel {
  background: url("https://us.objects-cc.com/template-resources/images/prototyping/carousel.png") no-repeat center;
  margin-top: 10px;
  height: 200px;
  width: 100%; }

.panel-prototype {
  background: none repeat scroll 0 0 #F3F4F5;
  border-color: #d8d8d8;
  border-style: solid;
  border-width: 1px;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  line-height: 10rem;
  text-align: center;
  width: 100%; }

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