@charset "UTF-8";
/*
SHC Enterprise CSS

- Version 1.4.7
- Last updated 06/04/15

Styleguide 1
*/
@import "http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";
/*
Mixins and Colors

The mixin file should be the first file in the stack. Most values are global,
aside from -brand and -primary values.

Styleguide 2
*/
.clearfix::before {
  content: "";
  display: table;
  line-height: 0;
}
.clearfix::after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
}
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}
/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
button,
caption,
cite,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
textarea,
table,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0 none;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  /*override the chrome default 11px */
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 100%;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var,
optgroup,
input,
button,
textarea,
select,
optgroup,
option {
  font-style: inherit;
}
html,
body,
button,
input,
select,
textarea {
  color: #001733;
}
html {
  background: #FFF none repeat scroll 0 0;
  font-size: 15px;
}
abbr,
acronym {
  font-variant: normal;
}
b,
strong {
  font-weight: 600;
}
caption,
th {
  text-align: left;
}
del {
  text-decoration: line-through;
}
dl,
multicol {
  margin: 0;
}
img {
  max-width: 100%;
}
ins {
  text-decoration: none;
}
legend {
  color: #001733;
}
textarea {
  resize: none;
}
ul,
ol {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
input {
  vertical-align: baseline;
  background-color: #fff;
  padding: 0;
  -webkit-text-size-adjust: none;
  /*override the chrome default 11px; */
}
/* hide the close button in IE10 text fields */
input[type=text]::-ms-clear {
  display: none;
}
/* needed for sears/kmart- see if can be peeled out for brand-specific CSS later */
.kioskHide {
  display: none;
}
/*

shcGlobal Shim file

The CSS found here is for legacy support and should
not be used in any new (post-2014) projects.

*/
/* Global buttons */
.shcBtn,
.sears .shcBtn {
  font-size: 11px;
  color: #4577A3;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  padding: 3px 20px;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-width: 1px;
  border-style: solid;
  border-color: #D3E1EF #8293A4 #8293A4 #D3E1EF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #e5f5ff;
  background: -moz-linear-gradient(top, #ffffff 0%, #e5f5ff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5f5ff));
  background: -webkit-linear-gradient(top, #ffffff 0%, #e5f5ff 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #e5f5ff 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #e5f5ff 100%);
  background: linear-gradient(top, #ffffff 0%, #e5f5ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5f5ff', GradientType=0);
}
.shcBtn:hover,
.sears .shcBtn:hover {
  /*padding: 4px 21px 2px 19px; supressed look*/
  text-decoration: none;
  background: #dbecf7;
  background: -moz-linear-gradient(top, #e5f5ff 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f5ff), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, #e5f5ff 0%, #ffffff 100%);
  background: -o-linear-gradient(top, #e5f5ff 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, #e5f5ff 0%, #ffffff 100%);
  background: linear-gradient(top, #e5f5ff 0%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5f5ff', endColorstr='#ffffff', GradientType=0);
}
.sears a.shcBtn:hover,
.kmart a.shcBtn:hover,
.craftsman a.shcBtn:hover,
.kenmore a.shcBtn:hover {
  text-decoration: none;
}
.shcBtnInfo,
.sears .shcBtnInfo {
  font-size: 11px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  padding: 3px 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #98C2E7 #4B73A7 #4B73A7 #98C2E7;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #0F51A1;
  background: -moz-linear-gradient(top, #7dabdc 0%, #0f51a1 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7dabdc), color-stop(100%, #0f51a1));
  background: -webkit-linear-gradient(top, #7dabdc 0%, #0f51a1 100%);
  background: -o-linear-gradient(top, #7dabdc 0%, #0f51a1 100%);
  background: -ms-linear-gradient(top, #7dabdc 0%, #0f51a1 100%);
  background: linear-gradient(top, #7dabdc 0%, #0f51a1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DABDC', endColorstr='#0F51A1', GradientType=0);
}
.shcBtnInfo:hover,
.sears .shcBtnInfo:hover {
  /*padding: 4px 21px 2px 19px; supressed look*/
  text-decoration: none;
  background: #7DABDC;
  background: -moz-linear-gradient(top, #0f51a1 0%, #7dabdc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f51a1), color-stop(100%, #7dabdc));
  background: -webkit-linear-gradient(top, #0f51a1 0%, #7dabdc 100%);
  background: -o-linear-gradient(top, #0f51a1 0%, #7dabdc 100%);
  background: -ms-linear-gradient(top, #0f51a1 0%, #7dabdc 100%);
  background: linear-gradient(top, #0f51a1 0%, #7dabdc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F51A1', endColorstr='#7DABDC', GradientType=0);
}
.shcBtn.shcBtnCTA,
.shcBtn.shcBtnOrange,
.shcBtn.shcOrangeBtn,
.sears .shcBtn.shcBtnCTA,
.sears .shcBtn.shcBtnOrange,
.sears .shcBtn.shcOrangeBtn,
.kenmore .shcBtn.shcBtnCTA,
.kenmore .shcBtn.shcBtnOrange,
.kenmore .shcBtn.shcOrangeBtn {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-color: #fdb173 #a4502c #a4502c #fdb173;
  display: inline-block;
  background: #fe9e43;
  background: -moz-linear-gradient(top, #fe9e43 0%, #ff7341 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fe9e43), color-stop(100%, #ff7341));
  background: -webkit-linear-gradient(top, #fe9e43 0%, #ff7341 100%);
  background: -o-linear-gradient(top, #fe9e43 0%, #ff7341 100%);
  background: -ms-linear-gradient(top, #fe9e43 0%, #ff7341 100%);
  background: linear-gradient(top, #fe9e43 0%, #ff7341 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe9e43', endColorstr='#ff7341', GradientType=0);
}
.shcBtn.shcBtnCTA:hover,
.shcBtn.shcBtnOrange:hover,
.shcBtn.shcOrangeBtn:hover,
.sears .shcBtn.shcBtnCTA:hover,
.sears .shcBtn.shcBtnOrange:hover,
.sears .shcBtn.shcOrangeBtn:hover {
  text-decoration: none;
  background: #f4963d;
  background: -moz-linear-gradient(top, #ff7341 0%, #fe9e43 99%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff7341), color-stop(99%, #fe9e43));
  background: -webkit-linear-gradient(top, #ff7341 0%, #fe9e43 99%);
  background: -o-linear-gradient(top, #ff7341 0%, #fe9e43 99%);
  background: -ms-linear-gradient(top, #ff7341 0%, #fe9e43 99%);
  background: linear-gradient(top, #ff7341 0%, #fe9e43 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7341', endColorstr='#fe9e43', GradientType=0);
}
.kmart .shcBtn,
.craftsman .shcBtn {
  background: -moz-linear-gradient(center top, #ffffff 0%, #e7e2d9 100%) repeat scroll 0 0 transparent;
  border-color: #C0BBB3;
  color: #d2011c;
}
.kmart .shcBtn:hover {
  color: #D2011C;
  text-decoration: none;
  background: #edece7;
  background: -moz-linear-gradient(top, #e7e2d9 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e7e2d9), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, #e7e2d9 0%, #ffffff 100%);
  background: -o-linear-gradient(top, #e7e2d9 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, #e7e2d9 0%, #ffffff 100%);
  background: linear-gradient(top, #e7e2d9 0%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E7E2D9', endColorstr='#ffffff', GradientType=0);
}
.kmart .shcBtn.shcBtnCTA,
.kmart .shcBtn.shcBtnOrange,
.kmart .shcBtn.shcOrangeBtn,
.craftsman .shcBtn.shcBtnCTA,
.craftsman .shcBtn.shcBtnOrange,
.craftsman .shcBtn.shcOrangeBtn {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-color: #b0251c #8f1d0b #8f1d0b #b0251c;
  background: #fe9e43;
  background: -moz-linear-gradient(top, #e43025 0%, #b0251c 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e43025), color-stop(100%, #b0251c));
  background: -webkit-linear-gradient(top, #e43025 0%, #b0251c 100%);
  background: -o-linear-gradient(top, #e43025 0%, #b0251c 100%);
  background: -ms-linear-gradient(top, #e43025 0%, #b0251c 100%);
  background: linear-gradient(top, #e43025 0%, #b0251c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e43025', endColorstr='#b0251c', GradientType=0);
}
.kmart .shcBtn.shcBtnCTA:hover,
.kmart .shcBtn.shcBtnOrange:hover,
.kmart .shcBtn.shcOrangeBtn:hover,
.craftsman .shcBtn.shcBtnCTA:hover,
.craftsman .shcBtn.shcBtnOrange:hover,
.craftsman .shcBtn.shcOrangeBtn:hover {
  background: #ef943d;
  background: -moz-linear-gradient(top, #b0251c 0%, #e43025 99%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b0251c), color-stop(99%, #e43025));
  background: -webkit-linear-gradient(top, #b0251c 0%, #e43025 99%);
  background: -o-linear-gradient(top, #b0251c 0%, #e43025 99%);
  background: -ms-linear-gradient(top, #b0251c 0%, #e43025 99%);
  background: linear-gradient(top, #b0251c 0%, #e43025 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0251c', endColorstr='#e43025', GradientType=0);
}
.sears .shcBtn.shcBtnLarge,
.kmart .shcBtn.shcBtnLarge,
.kenmore .shcBtn.shcBtnLarge,
.craftsman .shcBtn.shcBtnLarge {
  font-size: 14px;
  padding: 5px 25px;
}
.shcBtn.shcBtnLarge:hover {
  /*padding: 6px 26px 4px 24px; supressed look*/
}
/* Global tooltips - GenericLayer/shcGenericTip can go away once we standardize */
.shcGenericTip,
.shcTooltip,
.shcGenericLayer,
.shcLayer,
.shcZipLayer {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: -1px 2px 8px #cccccc;
  -webkit-box-shadow: -1px 2px 8px #cccccc;
  box-shadow: -1px 2px 8px #cccccc;
  background: none repeat scroll 0 0 white;
  border: 1px solid #CCC;
  color: #666;
  font-weight: normal;
  position: absolute;
  display: none;
  text-align: left;
  z-index: 999999;
  width: 250px;
}
.shcGenericTip,
.shcGenericLayer,
.shcLayer,
.shcZipLayer {
  font-size: 12px;
  padding: 30px 20px 20px;
}
.shcTooltip {
  font-size: 11px;
  padding: 10px;
}
/* wrapper for the blue CLOSE for tooltip/layer */
.shcLayer .closeWrp,
.shcZipLayer .closeWrp {
  float: right;
  padding: 0 5px 0 0;
  color: #067BB5;
  cursor: pointer;
}
.shcLayer .layer,
.shcZipLayer .layer {
  clear: both;
  padding-top: 5px;
  word-wrap: break-word;
}
/* blue CLOSE for layer - NO close button for tooltip */
.shcLayer .shcLayerCloseSpan,
.shcZipLayer .shcLayerCloseSpan,
.shcCloseBlue {
  font-size: 7px;
  font-weight: normal;
  letter-spacing: 1px;
  padding: 0 5px 0 0;
  vertical-align: middle;
}
/* blue X for CLOSE */
.shcLayer .shcLayerCloseXSpan,
.shcZipLayer .shcLayerCloseXSpan,
.shcCloseBlue span {
  font-size: 9px;
  font-weight: bold;
}
/* odd legacy layer should be fixed */
.shcLayer > span.shclClose {
  color: #067BB5;
  cursor: pointer;
  font-size: 7px;
  font-weight: normal;
  letter-spacing: 1px;
  padding: 0 9px 0 0;
  position: absolute;
  right: 25px;
  text-transform: uppercase;
  top: 10px;
}
/* blue X for CLOSE */
.shcLayer > span.shclClose > span {
  font-size: 9px;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: -1px;
}
.shcLayer,
.shcLayer .layer {
  padding: 10px;
}
/* tooltip and layer carrots */
.shcTip {
  display: block;
  position: absolute;
  z-index: 9;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
.shcTip > span {
  display: block;
  position: absolute;
  left: -7px;
  z-index: 1;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}
.shcTipTopLeft {
  left: 25px;
  border-bottom: 8px solid #A6A5A5;
  top: -8px;
}
.shcTipTopRight {
  right: 25px;
  border-bottom: 8px solid #A6A5A5;
  top: -8px;
}
.shcTipTopLeft > span,
.shcTipTopRight > span {
  border-bottom: 7px solid #FFFFFF;
  top: 1px;
}
.shcTipBottomLeft {
  border-top: 8px solid #A6A5A5;
  bottom: -8px;
}
.shcTipBottomRight {
  right: 25px;
  border-top: 8px solid #A6A5A5;
  bottom: -8px;
}
.shcTipBottomLeft > span,
.shcTipBottomRight > span {
  border-top: 7px solid #FFFFFF;
  bottom: 1px;
}
/* Standard Modal */
#shcCurtain {
  background: black;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  right: 0px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: .5;
  z-index: 999980;
  display: none;
}
.ie #shcCurtain {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}
#shcModal {
  position: absolute;
  overflow: hidden;
  z-index: 999990;
  font-size: 12px;
  max-width: 600px;
  display: none;
}
#universalModal.USiActiaveLogin .shcModal {
  padding: 15px;
  min-height: 505px;
}
#shcModal > div {
  padding: 30px 18px 30px 18px;
  overflow: hidden;
  background: #ffffff;
  font-size: 14px;
  color: #333333;
}
#shcModal div#modalButtonContainer {
  float: right;
  margin: 10px 5px;
}
#shcModal div p {
  margin: 10px;
}
/* end Standard Modal */
.shcBtn,
.sears .shcBtn {
  background: -moz-linear-gradient(center top, #ffffff 0%, #e5f5ff 100%) repeat scroll 0 0 transparent;
  border-color: #D3E1EF #8293A4 #8293A4 #D3E1EF;
  border-radius: 3px 3px 3px 3px;
  border-style: solid;
  border-width: 1px;
  color: #4577A3;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 20px;
  text-decoration: none;
}
/*
Fix for rich relevance line height issue; can be removed
once rich relevance is completely phased out (approx 6/2015)
*/
#rr_placement_0 .rr_scrl-productLink {
  line-height: 1em;
}
/* Fix in line with UHF-261 */
.rr_scrl-productInfo > li:first-child {
  font-size: 12px;
  height: 40px;
  overflow: hidden;
}
/*
Base Elements

Base-level HTML element handling.

Styleguide 3

*/
/*

Fonts and Typography

Using Open Sans font as default. Primary font size
is 15px, secondary font size is 13px.

####Accessability Notes:
- `.font-Open-Sans-Light` should not be applied to
text smaller than 16px
- No font appearing on a white background should
be lighter than #666, regardless of size.
- Bold text will almost always be font-weight: 600,
with a 'bolder' treatment used only on pricing
with a font weight of 700.

Styleguide 3.1

*/
.font-Open-Sans,
.font-Open-Sans-Light,
.font-Open-Sans-Semibold,
.font-Open-Sans-Bold {
  font-family: 'Open Sans';
}
.font-Open-Sans-Light {
  font-weight: 300;
}
.font-Open-Sans-Semibold {
  font-weight: 600;
}
.font-Open-Sans-Bold {
  font-weight: 700;
}
@font-face {
  font-family: "SHC Icons";
  src: url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.eot");
  src: url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.eot?#iefix") format("embedded-opentype"), url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.woff") format("woff"), url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.ttf") format("truetype"), url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.svg#SHC Icons") format("svg");
  font-weight: 400;
  font-style: normal;
}
.font-SHC-Icons,
.font-shc-enterprise-icons {
  font-family: "SHC Icons";
  font-weight: 400;
}
/*
Moving forward, DO NOT USE font-family: shc-enterprise-icons.
It's included here as a stopgap and will be removed in the near future.
*/
@font-face {
  font-family: "shc-enterprise-icons";
  src: url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.eot");
  src: url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.eot?#iefix") format("embedded-opentype"), url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.woff") format("woff"), url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.ttf") format("truetype"), url("http://e.shld.net/universalprofile/static/profile-web/fonts/shc-enterprise-icons.svg#SHC Icons") format("svg");
  font-weight: 400;
  font-style: normal;
}
h1,
.title-1,
h2,
.title-2 {
  font-weight: 300;
}
h3,
.title-3,
h4,
.title-4,
h5,
.title-5,
h6,
.title-6 {
  font-weight: 600;
  padding: 0;
}
h1,
.title-1 {
  font-size: 2rem;
  line-height: 2.200rem;
}
h2,
.title-2 {
  font-size: 1.625rem;
  line-height: 1.867rem;
}
h3,
.title-3 {
  font-size: 1.375rem;
  line-height: 1.733rem;
}
h4,
.title-4 {
  font-size: 1.125rem;
  line-height: 1.733rem;
}
h5,
.title-5 {
  font-size: 1em;
  line-height: 1.467rem;
}
h6,
.title-6 {
  font-size: 0.875em;
  line-height: 1.333rem;
}
.ie8 h1,
.ie8 .title-1 {
  font-size: 2em;
  line-height: 2.200em;
}
.ie8 h2,
.ie8 .title-2 {
  font-size: 1.625em;
  line-height: 1.867em;
}
.ie8 h3,
.ie8 .title-3 {
  font-size: 1.375em;
  line-height: 1.733em;
}
.ie8 h4,
.ie8 .title-4 {
  font-size: 1.125em;
  line-height: 1.733em;
}
.ie8 h5,
.ie8 .title-5 {
  font-size: 1em;
  line-height: 1.467em;
}
.ie8 h6,
.ie8 .title-6 {
  font-size: 0.875em;
  line-height: 1.333em;
}
a {
  color: #005ccc;
  cursor: pointer;
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}
p {
  line-height: 22px;
  margin: 14px 0;
}
p a {
  text-decoration: underline;
}
.secondary {
  font-size: 13px;
  line-height: 20px;
}
hr {
  height: 3px;
  background: #aaaaaa;
  border: none;
  padding: 0;
  margin: 20px 0;
}
.clearfix:before::before,
.clearfix:after::before {
  content: "";
  display: table;
  line-height: 0;
}
.clearfix:before::after,
.clearfix:after::after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
}
.clearfix:after {
  clear: both;
}
.list-links li {
  padding: 7px 0 7px 14px;
}
.list-links a.primary {
  font-weight: 600;
}
.list-links h2,
.list-links h3,
.list-links h4,
.list-links .title-2,
.list-links .title-3,
.list-links .title-4 {
  padding: 7px 0;
}
.list-links.tiered {
  margin-top: 20px;
}
.list-links.tiered > li {
  margin-bottom: 20px;
}
.list-links.tiered > li h3,
.list-links.tiered > li .title-3,
.list-links.tiered > li {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1em;
}
.list-links.tiered > li h4,
.list-links.tiered > li .title-4,
.list-links.tiered > li li {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1em;
}
.list-links.tiered > li li li {
  font-weight: 400;
}
.list-disc,
.list-disc li {
  list-style-type: disc;
  margin: 0.5em 0.5em 0.5em 1em;
  padding: 0 0.5em;
  list-style-position: outside;
}
.list-disc li {
  display: list-item;
}
form .has-buttons,
form .has-buttons-right,
form .has-buttons-vertical {
  display: block;
  clear: both;
  float: left;
  margin: 14px 0 0;
}
.form-basic::before {
  content: "";
  display: table;
  line-height: 0;
}
.form-basic::after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
}
.form-basic label {
  display: inline-block;
  float: left;
}
.form-basic label,
.form-basic fieldset {
  clear: left;
  margin-top: 14px;
}
.form-basic label:first-child,
.form-basic .select-menu:first-child,
.form-basic fieldset:first-child,
.form-basic label.input-radio,
.form-basic label.input-checkbox {
  margin-top: 0;
}
.field-help {
  font-size: 13px;
  color: #005ccc;
  cursor: pointer;
  float: left;
  clear: left;
}
.field-help:hover {
  text-decoration: underline;
}
label {
  cursor: pointer;
  min-height: 1em;
}
label abbr[title] {
  color: #666666;
  border: none;
  font-style: italic;
  font-weight: 400;
}
label .field-name {
  font-weight: 600;
  display: block;
}
label.has-feedback.error > legend,
fieldset.has-feedback.error > legend,
label.has-feedback.error > .field-name,
fieldset.has-feedback.error > .field-name,
label.has-feedback.error > .feedback-details,
fieldset.has-feedback.error > .feedback-details {
  color: #d01833;
}
label.has-feedback.error > input,
fieldset.has-feedback.error > input,
label.has-feedback.error > .select-menu,
fieldset.has-feedback.error > .select-menu {
  border: #d01833 solid 2px;
}
label.has-feedback.alert > legend,
fieldset.has-feedback.alert > legend,
label.has-feedback.alert > .field-name,
fieldset.has-feedback.alert > .field-name,
label.has-feedback.alert > .feedback-details,
fieldset.has-feedback.alert > .feedback-details {
  color: #001733;
}
label.has-feedback.alert > input,
fieldset.has-feedback.alert > input,
label.has-feedback.alert > .select-menu,
fieldset.has-feedback.alert > .select-menu {
  border: #fec70b solid 2px;
}
label.has-feedback.success > legend,
fieldset.has-feedback.success > legend,
label.has-feedback.success > .field-name,
fieldset.has-feedback.success > .field-name,
label.has-feedback.success > .feedback-details,
fieldset.has-feedback.success > .feedback-details {
  color: #347814;
}
label.has-feedback.success > input,
fieldset.has-feedback.success > input,
label.has-feedback.success > .select-menu,
fieldset.has-feedback.success > .select-menu {
  border: #347814 solid 2px;
}
label.has-feedback .feedback-details,
fieldset.has-feedback .feedback-details {
  font-style: italic;
  font-size: 0.875em;
  display: block;
}
input:invalid,
input:-moz-ui-invalid {
  border-color: #d01833;
  outline: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
input[type="text"],
input[type="number"],
input[type="email"],
textarea {
  border-width: 2px 1px 1px;
  border-style: solid;
  border-color: #aaaaaa #d0d0d0 #d0d0d0;
  padding-left: 0.866em;
  height: 2.25em;
  width: 14em;
}
input[type="text"].narrow,
input[type="number"].narrow,
input[type="email"].narrow,
textarea.narrow {
  width: 6em;
}
input[type="text"].wide,
input[type="number"].wide,
input[type="email"].wide,
textarea.wide {
  width: 20em;
}
input[type="text"],
.select-menu,
textarea {
  border-radius: 3px;
}
textarea:focus,
input[type="text"]:focus {
  border-width: 2px 1px 1px;
  border-style: solid;
  border-color: #005ccc;
  outline: none;
}
textarea {
  height: 8.25em;
  padding: 0.5em;
  display: block;
}
.input-text .field-name {
  padding-bottom: 10px;
}
.input-text input {
  display: block;
}
/* element used as a stand in for radio and checkbox inputs */
.select-menu:after,
.input-radio .standin,
.input-checkbox .standin {
  /*
  content: " ";
  background-image:url(http://e.shld.net/universalprofile/static/profile-web/css/@globalsprite);
  background-repeat: no-repeat;
  display: inline-block;
  font-size: 1em;
  width: 19px;
*/
  font-family: "SHC Icons";
}
.select-menu {
  position: relative;
  overflow: hidden;
  display: inline-block;
  height: 2.5em;
  border-bottom: 2px solid #d0d0d0;
  background: #eeeeee;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 10px;
  padding: 7px 35px 7px 14px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.select-menu select {
  width: 150%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
  font-size: .866em;
}
.select-menu:after {
  content: "h";
  position: absolute;
  right: 14px;
  top: 11px;
  width: 13px;
  z-index: 1;
  font-size: 13px;
  line-height: 1em;
}
.has-background-secondary .select-menu {
  background: #ffffff;
}
fieldset {
  display: block;
}
fieldset::before {
  content: "";
  display: table;
  line-height: 0;
}
fieldset::after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
}
fieldset legend {
  font-weight: 600;
}
fieldset .field-name {
  font-weight: 400;
}
fieldset .radio-input {
  margin-left: 14px;
}
fieldset.has-inline-fields label {
  display: inline-block;
  vertical-align: middle;
  float: none;
  clear: none;
  margin: 0 14px 0 0;
}
fieldset.has-inline-fields .input-text,
fieldset.has-inline-fields .select-menu {
  display: inline-block;
}
fieldset fieldset {
  padding: 0;
  margin: 0;
}
.input-radio,
.input-checkbox {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 2.5em;
  min-height: 2.5em;
}
.input-radio input,
.input-checkbox input {
  position: absolute;
  top: -5em;
  left: -5em;
}
.input-radio .standin,
.input-checkbox .standin,
.input-radio button.standin,
.input-checkbox button.standin {
  height: 20px;
  margin-right: 0.25em;
  width: 20px;
  color: #666666;
  display: block;
  font-size: 1.25em;
  border: none;
  padding: 0;
  position: absolute;
  top: 0.5em;
  z-index: 1;
}
.input-radio .field-name,
.input-checkbox .field-name {
  display: inline-block;
  vertical-align: top;
  position: relative;
  z-index: 2;
  padding-left: 2em;
}
.input-radio input:focus ~ .field-name,
.input-checkbox input:focus ~ .field-name {
  outline: 1px dotted #005ccc;
}
.ie8 .input-radio .standin,
.ie8 .input-checkbox .standin,
.ie9 .input-radio .standin,
.ie9 .input-checkbox .standin {
  display: none;
}
.ie8 .input-radio input,
.ie8 .input-checkbox input,
.ie9 .input-radio input,
.ie9 .input-checkbox input {
  position: relative;
  top: 14px;
  left: 0;
}
.ie8 .input-radio input,
.ie8 .input-checkbox input,
.ie9 .input-radio input,
.ie9 .input-checkbox input {
  /*position: relative;*/
  top: 14px;
  left: 0;
}
.ie8 .input-radio .field-name,
.ie8 .input-checkbox .field-name,
.ie9 .input-radio .field-name,
.ie9 .input-checkbox .field-name {
  padding-left: 1em;
}
.input-radio .standin:after {
  content: "w";
}
.input-radio input:focus ~ .standin:after,
.input-radio input:checked ~ .standin:after {
  color: #005ccc;
  content: "x";
}
.input-checkbox .standin:after {
  content: "y";
}
.input-checkbox input:checked ~ .standin {
  color: #005ccc;
}
.input-checkbox input:checked ~ .standin:after {
  content: "z";
}
.feedback-message {
  padding: 0.5em;
  margin-bottom: 14px;
  border-width: 1px;
  border-style: solid;
  font-weight: 600;
  border-radius: 3px;
}
.feedback-message.success {
  border-color: #347814;
  color: #347814;
  background: #eaf1e7;
  /* for IE8 */
  background: rgba(52, 120, 20, 0.1);
}
.feedback-message.error {
  border-color: #d01833;
  color: #d01833;
  background: #fae7ea;
  /* for IE8 */
  background: rgba(208, 24, 51, 0.1);
}
.feedback-message.alert {
  border-color: #fec70b;
  color: #001733;
  background: #fff9e6;
  /* for IE8 */
  background: rgba(254, 199, 11, 0.1);
}
table.striped {
  table-layout: fixed;
  margin: 20px 0;
}
table.striped tr:nth-child(even) {
  background: #eeeeee;
}
table.striped th,
table.striped td {
  border-left: 1px solid #d0d0d0;
}
table.striped tr:first-child th,
table.striped tr:first-child th:first-child {
  text-align: center;
}
th,
td {
  padding: 7px 14px;
}
tr th:first-child,
tr td:first-child {
  border-left: none;
}
tr th:first-child {
  text-align: left;
}
td {
  font-size: 13px;
}
table tbody + tbody tr:nth-child(2n),
table tbody:nth-child(2n) tr:nth-child(2n) {
  background: none;
}
table tbody + tbody tr:first-child th,
table tbody:nth-child(2n) tr:first-child th,
table tbody + tbody tr:first-child th:first-child,
table tbody:nth-child(2n) tr:first-child th:first-child {
  text-align: left;
}
table tbody + tbody th,
table tbody:nth-child(2n) th,
table tbody + tbody td,
table tbody:nth-child(2n) td {
  border: none;
}
table tbody:nth-child(2n) {
  background: #eeeeee;
}
/*
UI Elements/Patterns

Styleguide 4
*/
/*
Buttons and Selectors

Styleguide 4.1
*/
button,
.button,
a.button,
.button-primary,
a.button-primary,
.button-secondary,
a.button-secondary,
.button-tertiary,
a.button-tertiary {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  line-height: 1rem;
  height: 36px;
  padding: 7px 24px;
  font-size: 15px;
  text-align: center;
  display: inline-block;
  border-width: 1px 1px 2px 1px;
  border-style: solid;
  cursor: pointer;
  color: #001733;
  /*
Deprecated: In place for legacy support but
error handling should be used instead.
*/
}
button:hover,
.button:hover,
a.button:hover,
button:focus,
.button:focus,
a.button:focus,
.button-primary:hover,
a.button-primary:hover,
.button-primary:focus,
a.button-primary:focus,
.button-secondary:hover,
a.button-secondary:hover,
.button-secondary:focus,
a.button-secondary:focus,
.button-tertiary:hover,
a.button-tertiary:hover,
.button-tertiary:focus,
a.button-tertiary:focus {
  text-decoration: none;
  color: #001733;
}
button:disabled,
.button:disabled,
a.button:disabled,
.button-primary:disabled,
a.button-primary:disabled,
.button-secondary:disabled,
a.button-secondary:disabled,
.button-tertiary:disabled,
a.button-tertiary:disabled {
  background: none repeat scroll 0 0 #FFF;
  border-color: #aaaaaa;
  border-style: dashed;
  border-width: 1px;
  color: #666666;
  cursor: not-allowed;
}
button:disabled:hover,
.button:disabled:hover,
a.button:disabled:hover,
.button-primary:disabled:hover,
a.button-primary:disabled:hover,
.button-secondary:disabled:hover,
a.button-secondary:disabled:hover,
.button-tertiary:disabled:hover,
a.button-tertiary:disabled:hover {
  background: #FFF;
}
.has-buttons,
.has-buttons-right,
.has-buttons-vertical {
  text-align: left;
  margin: 14px 0 0;
}
.has-buttons > .button,
.has-buttons-right > .button,
.has-buttons-vertical > .button,
.has-buttons > .button-primary,
.has-buttons > .button-secondary,
.has-buttons > .button-tertiary {
  margin: 0 14px 14px 0;
}
.has-buttons.has-background-primary,
.has-buttons.has-background-secondary,
.has-buttons-right.has-background-primary,
.has-buttons-right.has-background-secondary,
.has-buttons-vertical.has-background-primary,
.has-buttons-vertical.has-background-secondary {
  padding: 14px 14px 0;
}
.has-buttons-right {
  text-align: right;
}
.has-buttons-right > .button,
.has-buttons-right > .button-primary,
.has-buttons-right > .button-secondary,
.has-buttons-right > .button-tertiary {
  margin: 0 0 0 14px;
}
.has-buttons-vertical > .button,
.has-buttons-vertical > .button-primary,
.has-buttons-vertical > .button-secondary,
.has-buttons-vertical > .button-tertiary {
  display: block;
  margin: 14px 0 0 0;
}
.has-buttons-vertical > .button:first-child,
.has-buttons-vertical > .button-primary:first-child,
.has-buttons-vertical > .button-secondary:first-child,
.has-buttons-vertical > .button-tertiary:first-child {
  margin: 0;
}
.button-primary,
a.button-primary {
  font-weight: 600;
  color: #fff;
  background-color: #ff4800;
  border-color: #ff4800 #ff4800 #c23700;
}
.button-primary:hover,
a.button-primary:hover {
  background-color: #ff6326;
  color: #fff;
}
.button-primary:focus,
a.button-primary:focus {
  color: #fff;
}
.button-secondary {
  background: #eeeeee;
  border-color: #eeeeee #eeeeee #d0d0d0;
}
.button-secondary:hover {
  background-color: #e3e3e3;
}
.button-tertiary {
  background: #ffffff;
  border-color: #aaaaaa;
  border-style: solid;
}
.button-tertiary:hover {
  background: #e3e3e3;
}
.selector,
button.selector {
  border-radius: 3px;
  line-height: 1rem;
  height: 36px;
  padding: 7px 24px;
  font-size: 15px;
  text-align: center;
  display: inline-block;
  border-width: 1px 1px 2px 1px;
  border-style: solid;
  cursor: pointer;
  border-color: #d0d0d0;
  background: #ffffff;
  height: auto;
  min-height: 2.125rem;
  padding: 7px 23px;
  line-height: 20px;
  color: #005ccc;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.selector > *,
button.selector > * {
  white-space: no-wrap;
}
.selector:hover,
button.selector:hover {
  border-color: #001733;
  color: #005ccc;
}
.selector:active,
button.selector:active,
.selector.selected,
button.selector.selected,
.selector.required,
button.selector.required {
  border: 2px solid #0670a4;
  color: #001733;
  padding: 7px 22px;
}
.selector:active:hover,
button.selector:active:hover,
.selector.selected:hover,
button.selector.selected:hover {
  border-color: #001733;
}
.selector.required,
button.selector.required {
  cursor: not-allowed;
}
.has-selectors {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.has-selectors .selector {
  display: inline-block;
  margin: 0 14px 14px 0;
}
.has-selectors.has-background-primary,
.has-selectors.has-background-secondary {
  padding: 14px 0 0 14px;
}
.has-tabs {
  margin: 20px 0 0;
  display: block;
  border-bottom: 1px solid #aaaaaa;
  position: relative;
}
.has-tabs .tab {
  color: #005ccc;
  display: inline-block;
  margin: 0 3px 0 0;
  position: relative;
}
.tab {
  font-size: 1rem;
  background: #fff;
  padding: 4px 14px;
  bottom: -1px;
  border-width: 1px;
  border-style: solid;
  border-color: #d0d0d0 #d0d0d0 #aaaaaa #d0d0d0;
  border-radius: 3px 3px 0 0;
}
.tab:hover {
  cursor: pointer;
  border-top-width: 2px;
  border-color: #001733 #aaaaaa #aaaaaa;
}
.tab.active,
.tab.active:hover {
  color: #001733;
  font-weight: 600;
  border-top-width: 2px;
  border-color: #005ccc #d0d0d0 #ffffff #d0d0d0;
}
.tab.disabled,
.tab.disabled:hover {
  color: #666666;
  border-color: #e3e3e3;
  cursor: not-allowed;
}
.has-tabs.top-of-page .tab {
  border: none;
  border-bottom: 4px solid #d0d0d0;
  bottom: 0px;
}
.has-tabs.top-of-page .tab:hover {
  cursor: pointer;
  border-bottom: 4px solid #001733;
}
.has-tabs.top-of-page .tab.active,
.has-tabs.top-of-page .tab.active:hover {
  color: #001733;
  font-weight: 600;
  border-color: #ffffff #ffffff #005ccc #ffffff;
  cursor: default;
}
.has-tabs.top-of-page .tab.disabled,
.has-tabs.top-of-page .tab.disabled:hover {
  color: #666666;
  border-color: #ffffff #ffffff #e3e3e3 #ffffff;
  cursor: not-allowed;
}
.has-tab-content > .tab-content {
  display: none;
  padding: 14px;
}
.has-tab-content > .tab-content.active {
  display: block;
}
.has-tab-content > .tab-content.has-columns.active {
  display: table;
}
.has-breadcrumbs {
  font-size: 13px;
  color: #aaa;
  padding-left: 2.866em;
  margin-bottom: 20px;
  position: relative;
}
.has-breadcrumbs .breadcrumb {
  white-space: nowrap;
  display: block;
  float: left;
  padding: 0;
}
.has-breadcrumbs .breadcrumb > span,
.has-breadcrumbs .breadcrumb a {
  display: inline-block;
  padding: 0;
}
.has-breadcrumbs .breadcrumb > span {
  color: #001733;
}
.has-breadcrumbs .breadcrumb:before {
  content: "/";
  display: inline-block;
  margin: 0 14px;
}
.has-breadcrumbs .breadcrumb.home {
  left: 0;
  position: absolute;
}
.has-breadcrumbs .breadcrumb.home:before {
  display: none;
  content: "";
}
.has-breadcrumbs::before {
  content: "";
  display: table;
  line-height: 0;
}
.has-breadcrumbs::after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
}
.star-rating {
  position: relative;
  height: 1em;
  width: 6em;
  letter-spacing: 0.125em;
  display: inline-block;
}
.star-rating span {
  font-family: 'SHC Icons';
  color: #005ccc;
  padding-right: 7px;
}
/* ------------------------------------------------------- *\
*   UI ELEMENTS/PATTERNS
*   Dropdowns
*
*   ON HOLD
*
*   Intended for scenerios that fall outside of forms, like
*   dropdown lists of links, etc.
\* ------------------------------------------------------- */
/*
.has-dropdown {
  position: relative;
  height: 2.5rem;
  cursor: pointer;
}

.has-dropdown:hover {
  cursor: pointer;
}

.dropdown-label:after {
  content: " ";
  width: 16px;
  height: 10px;
  margin-left: @content-spacing-outer/2;
  background: url(http://e.shld.net/universalprofile/static/profile-web/css/@globalsprite) no-repeat -15px -166px;
  display: inline-block;
  vertical-align: bottom;
  cursor: pointer;
}

.dropdown {

  .box-sizing();
  display: none;
  background: #fff;
  position: absolute;
  padding: @content-spacing-inner;
  border:1px solid @content-color-border-dark;
  z-index: 8;
  top:@content-spacing-outer + 16;
  min-width: 100%;
  width: 10rem;
  cursor: pointer;

  .pointer {
    .pointerBuild(10px);
    border-bottom: 10px solid #999;
    top: -10px;
    span {
      top: 1px;
      border-bottom: 10px solid #fff;
    }
  }

}

.has-dropdown:hover .dropdown,
.has-dropdown:focus .dropdown,
.has-dropdown.active .dropdown,
.has-dropdown:active .dropdown {
  display: block;
  cursor: pointer;
}

.has-dropdown:hover .dropdown-label,
.has-dropdown:focus .dropdown-label,
.has-dropdown.active .dropdown-label,
.has-dropdown:active .dropdown-label {
  cursor: pointer;
}

.has-dropdown:hover .dropdown-label:after,
.has-dropdown:focus .dropdown-label:after,
.has-dropdown.active .dropdown-label:after,
.has-dropdown:active .dropdown-label:after {
  background: url(http://e.shld.net/universalprofile/static/profile-web/css/@globalsprite) no-repeat -15px -155px;
}
*/
/*
Layers, Modals and Tooltips*

Currently in development. Structure should remain consistant.

layers/modals - max,min -  572 height max (variable) 550 width (fixed).
(you could probably round 572 to 570)

Tooltips:
width - flexible based on line length, until Max width 380px
height - variable based on content


Styleguide 4.6
*/
/*
Layers*

Layers display larger amounts of information (than tooltips) upon click/tap.
Its content is informational text and links only.

####Use Layers for:
- info only, 361 characters or more.
- with link, 360 characters or less
- Legal text (typically over 360 characters)
- See Details / Learn More
- Selection/input w/ single select (requires no CTA button)
- Example: PLP filter selection (also applies to other possible scenarios w/ single select via a link - not radio, dropdown list which would require a submit button)


####DO NOT use Layers for:

- info only, 360 characters or less
- Input cases
- Data Entry, Sub-tasks (breaking down a complex tasks into sub-tasks and possibly sub-sub-tasks)
- Selection/input w/ multi-select (requires 2 CTA buttons)
- Dialogs (elicit a response from a user) - incl: login, warnings/2step verification
- Alerts/Errors/Confirmations or Notifications
- Within another layer-based element (insert LINK to "parent page")
- When you need a CTA, or other UI elements  (text box, checkbox, radio, accordion, etc) - use modals


Markup:
<div class="has-layer sears-screen clearfix">
  <div class="layer active">
    <span class="layer-close"></span>
    <header>
      <h3 class="title-2">Layer Headline T2 - No Overflow</h3>
    </header>
    <main>
      <h4>Layer Subtitle T4</h4>
      <h5>Primary Title T5</h5>
      <p>Lorem ipsum dolor sit amet, consectetur omnis minima delectus
      adipisicing elit. Hic repellat dolore cupiditate omnis minima
      delectus pariatur blanditiis numquam fugit at, quas.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Hic repellat dolore cupiditate omnis minima delectus pariatur
      blanditiis numquam fugit at, quas.</p>
    </main>
  </div>
</div>
<div class="has-layer sears-screen clearfix">
  <div class="layer scrolling active">
    <span class="layer-close"></span>
    <header>
      <h3 class="title-2">Layer Headline T2 - Overflow Needed</h3>
    </header>
    <main>
      <h4>Layer Subtitle T4</h4>
      <h5>Primary Title T5</h5>
      <p>Lorem ipsum dolor sit amet, consectetur omnis minima delectus
      adipisicing elit. Hic repellat dolore cupiditate omnis minima
      delectus pariatur blanditiis numquam fugit at, quas.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Hic repellat dolore cupiditate omnis minima delectus pariatur
      blanditiis numquam fugit at, quas.</p>
      <h5>Primary Title T5</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Hic repellat dolore cupiditate omnis minima delectus pariatur
      blanditiis numquam fugit dolor sit amet, at, quas.</p>
      <p>Lorem ipsum dolor sit amet, consectetur dolor sit amet, ad
      ipisicing elit. Hic repellat dolore cupiditate omnis minima
      delectus pariatur blanditiis numquam fugit at, quas. Lorem ipsum
      dolor sit amet, consectetur dolor sit amet, ad
      ipisicing elit. Hic repellat dolore cupiditate omnis minima
      delectus pariatur blanditiis numquam fugit at, quas.</p>
    </main>
  </div>
</div>

Styleguide 4.6.2
*/
.has-layer {
  display: inline;
}
.has-layer .layer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  background: #ffffff;
  position: absolute;
  z-index: 10;
  margin: auto;
  /*
  add right padding to any element after the close element so
  that if no header is needed, content still wraps around it.
  */
  /*
  any element immediately following a header won't have padding,
  so as to wrap below the closing X
  */
  width: 95%;
  min-width: 500px;
  max-width: 750px;
  max-height: 570px;
  padding: 14px;
  border: 2px solid #666;
  /* In cases where content will overflow: */
}
.has-layer .layer > .layer-close + * {
  padding-right: 40px;
}
.has-layer .layer > header {
  margin-bottom: 14px;
}
.has-layer .layer > header > *:first-child {
  margin-top: 0;
}
.has-layer .layer header {
  margin-bottom: 14px;
}
.has-layer .layer > header + * {
  padding-right: 0;
}
.has-layer .layer.active {
  display: block;
}
.has-layer .layer .layer-close {
  position: absolute;
  display: block;
  top: 14px;
  right: 14px;
  cursor: pointer;
  color: #666666;
}
.has-layer .layer .layer-close:after {
  font-family: "SHC Icons";
}
.has-layer .layer.scrolling main {
  position: relative;
  max-height: 300px;
  overflow-y: scroll;
  padding-right: 14px;
  z-index: 1;
}
.has-layer .layer.scrolling header:after {
  height: 30px;
  background-image: -moz-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ffffff), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  position: absolute;
  width: calc(100% - 47px);
  display: block;
  content: " ";
  top: 327px;
  left: 14px;
  z-index: 2;
}
.has-layer .layer .layer-close:after {
  content: "t";
  width: 22px;
  height: 22px;
  font-size: 22px;
}
/*
Modals*

Modal (windows/layers) create a "mode" where parent window can't be used;
or indicate a new mode / state. They require users to act explicitly in
order to exit the mode and return to the parent window, or proceed to
another. The background is intentionally dimmed ("lightbox") to give
focus/call attention and clearly communicate the availability of the
parent window.  We limit the application of lightbox pattern solely to
modal windows.


####Use Modals for:
- When you need a CTA button or other UI elements
- Inputs (Data Entry/Selection)
- Signup
- Selection/input w/ multi-select (requires 2 CTA buttons) (eg. product options selection (mWeb), Filters (if multiple)).
- contact, feedback, other persistent forms
- Sub-tasks (breaking down a complex tasks into sub-tasks and possibly sub-sub-tasks)
- Dialog (elicit a response from a user)
- login
- critical dialogs  (i.e. warning about data entry loss - ex: leaving checkout; or when a customer is about to permanently delete a list and must confirm or cancel).
- Notifications
- Minicart
- Detail
- media galleries / players
- details / learn more / read more - only if multi-step, or if include UI elements
- help elements/tips (only if multi-step, or if include UI elements)

####DO NOT use Modals for:

- Detail / More (info only)
- Glossary information (definitions)
- Hints/tips/help  i.e. “?� or “i� icons
- Drop Down Navigation Menus
- Selection/input w/ single select (requires no CTA button, use Layer)
- Price breakdowns/call-outs
- Alerts/Errors/Confirmations
- Within another layer-based element (insert LINK to "parent page")

Markup:
<div class="has-modal sears-screen">
  <div class="screen"></div>
  <div class="modal scrolling active">
    <span class="layer-close"></span>
    <header>
      <h3 class="title-2">Modal Headline T2</h3>
    </header>
    <main>
      <h4>Modal Subtitle T4</h4>
      <h5>Primary Title T5</h5>
      <p>Lorem ipsum dolor sit amet, consectetur omnis minima delectus
      adipisicing elit. Hic repellat dolore cupiditate omnis minima
      delectus pariatur blanditiis numquam fugit at, quas.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Hic repellat dolore cupiditate omnis minima delectus pariatur
      blanditiis numquam fugit at, quas.</p>
      <h5>Primary Title T5</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Hic repellat dolore cupiditate omnis minima delectus pariatur
      blanditiis numquam fugit dolor sit amet, at, quas.</p>
      <p>Lorem ipsum dolor consectetur adipisicing sit amet, elit.
      Hic repellat dolore cupiditate.</p>
      <p>Lorem ipsum dolor sit amet, consectetur dolor sit amet, ad
      ipisicing elit. Hic repellat dolore cupiditate omnis minima
      delectus pariatur blanditiis numquam fugit at, quas.</p>
    </main>
    <div class="has-buttons-right">
      <button class="button-secondary">Exit Modal CTA</button>
      <button class="button-primary">Confirm Action CTA</button>
    </div>
  </div>
</div>

Styleguide 4.6.3
*/
.has-modal {
  width: 100%;
  height: 100%;
  background: rgba(25, 25, 25, 0.5);
  position: relative;
}
.has-modal .modal {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  background: #ffffff;
  position: absolute;
  z-index: 10;
  width: 95%;
  min-width: 550px;
  max-width: 750px;
  max-height: 570px;
  padding: 14px 14px 65px;
  border: 2px solid #aaaaaa;
}
.has-modal .modal header {
  padding-right: 40px;
  margin-bottom: 14px;
}
.has-modal .modal header > *:first-child {
  margin-top: 0;
}
.has-modal .modal.scrolling main {
  max-height: 326px;
  overflow-y: scroll;
  padding-right: 7px;
}
.has-modal .modal.active {
  display: block;
}
.has-modal .modal .has-buttons-right {
  background: #ffffff;
  border-top: 1px solid #e3e3e3;
  margin-bottom: 0;
  padding: 14px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: calc(100% - 28px);
}
.has-modal .modal .has-buttons-right:before {
  height: 30px;
  background-image: -moz-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ffffff), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  background-image: linear-gradient(bottom, #ffffff, rgba(0, 0, 0, 0));
  position: absolute;
  width: calc(100% - 47px);
  display: block;
  content: " ";
  top: 327px;
  left: 14px;
  z-index: 2;
  top: -31px;
}
/*
Tooltips*

Tool tips display a small amount of information upon click/tap.
Its content is informational text only.

The tooltip element should be used when text is 360 characters
or less AND is informational text only; no decisions or navigation
(links, CTAs) should be included.

- Opened by a click/tap (only)
- Caret placement dependant on trigger position

####DO NOT use Tool Tips for:

- Legal text (typically over 360 characters)
- Navigation (incl: Drop Down Navigation Menus)
- Input (incl: Selection, Data Entry)
- Dialogs (elicit a response from a user; incl: login, warnings/2step verification)
- Alerts/Errors/Confirmations or Notifications
- Within another layer-based element (insert LINK to "parent page")
- Interaction w/ tooltips do not effect content of parent page.
- If content is information only and is more than 360 characters
- If you need to add a decision or navigation, add a scroll bar, etc.

Markup:
<div class="tooltip active">
  <div class="pointer top-left"><span></span></div>
  <span class="layer-close"></span>
  <span class="title-5">Tooltip Headline (Optional)</span>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Hic repellat dolore cupiditate omnis minima delectus pariatur
  blanditiis numquam fugit at, quas.</p>
</div>

Styleguide 4.6.1
*/
.tooltip {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
  background: #ffffff;
  position: absolute;
  z-index: 10;
  margin: auto;
  padding: 14px;
  /*
  add right padding to any element after the close element so
  that if no header is needed, content still wraps around it.
  */
  /*
  any element immediately following a header won't have padding,
  so as to wrap below the closing X
  */
  border: 1px solid #666;
  max-width: 380px;
  padding-right: 40px;
}
.tooltip > .layer-close + * {
  padding-right: 40px;
}
.tooltip > header {
  margin-bottom: 14px;
}
.tooltip > header > *:first-child {
  margin-top: 0;
}
.tooltip header {
  margin-bottom: 14px;
}
.tooltip > header + * {
  padding-right: 0;
}
.tooltip.active {
  display: block;
}
.tooltip .layer-close {
  position: absolute;
  display: block;
  top: 14px;
  right: 14px;
  cursor: pointer;
  color: #666666;
}
.tooltip .layer-close:after {
  font-family: "SHC Icons";
}
.tooltip .layer-close:after {
  font-size: 14px;
  content: "u";
}
.tooltip .pointer {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 9;
  padding: 0;
}
.tooltip .pointer span {
  left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 10;
}
.tooltip .pointer.top-left,
.tooltip .pointer.top-right {
  border-bottom: 10px solid #666;
  top: -10px;
}
.tooltip .pointer.top-left span,
.tooltip .pointer.top-right span {
  top: 2px;
  border-bottom: 10px solid #fff;
}
.tooltip .pointer.bottom-left,
.tooltip .pointer.bottom-right {
  border-top: 10px solid #666;
  bottom: -10px;
}
.tooltip .pointer.bottom-left span,
.tooltip .pointer.bottom-right span {
  bottom: 2px;
  border-top: 10px solid #fff;
}
.tooltip .pointer.top-left,
.tooltip .pointer.bottom-left {
  left: 14px;
}
.tooltip .pointer.top-right,
.tooltip .pointer.bottom-right {
  right: 14px;
}
.tooltip p,
.tooltip ul,
.tooltip li {
  font-size: 13px;
}
.tooltip h1 {
  font-weight: 600;
  padding: 0;
  font-size: 1em;
  line-height: 1.467rem;
}
.tooltip h2 {
  font-weight: 600;
  padding: 0;
  font-size: 0.875em;
  line-height: 1.333rem;
}
.tooltip header h1,
.tooltip header h2,
.tooltip header h3,
.tooltip header h4,
.tooltip header h5 {
  margin: 0;
}
/*
Containers

The area most in flux in Enterprise. Elements requiring shimming
have been marked and should be used with caution.

Styleguide 5
*/
/*
Utility Classes

In general, Enterprise will shy away from utility classes, but
several are included here for common patterns and needs.

Styleguide 5.1
*/
.has-background-primary {
  background: #ffffff;
}
.has-background-secondary {
  background: #eeeeee;
}
.has-background .button-secondary,
.has-background-secondary .button-secondary {
  background: #FFF;
}
.has-background .button-secondary:hover,
.has-background-secondary .button-secondary:hover {
  background: #e3e3e3;
}
.has-background .button-secondary.selected,
.has-background-secondary .button-secondary.selected,
.has-background .button-secondary.selected:hover,
.has-background-secondary .button-secondary.selected:hover {
  background: #666666;
}
.has-background .has-background-primary .button-secondary,
.has-background-secondary .has-background-primary .button-secondary {
  background: #eeeeee;
}
.has-background .has-background-primary .button-secondary:hover,
.has-background-secondary .has-background-primary .button-secondary:hover {
  background: #e3e3e3;
}
.has-background .has-background-primary .button-secondary.selected,
.has-background-secondary .has-background-primary .button-secondary.selected,
.has-background .has-background-primary .button-secondary.selected:hover,
.has-background-secondary .has-background-primary .button-secondary.selected:hover {
  background: #666666;
}
.has-inline-titles h1,
.has-inline-titles h2,
.has-inline-titles h3,
.has-inline-titles h4,
.has-inline-titles h5,
.has-inline-titles h6,
.has-inline-titles p {
  display: inline-block;
  line-height: 1em;
  margin: 0 14px 14px 0;
}
.has-inline-titles h1 > a,
.has-inline-titles h2 > a,
.has-inline-titles h3 > a,
.has-inline-titles h4 > a,
.has-inline-titles h5 > a,
.has-inline-titles h6 > a,
.has-inline-titles p > a,
.has-inline-titles h1 > span,
.has-inline-titles h2 > span,
.has-inline-titles h3 > span,
.has-inline-titles h4 > span,
.has-inline-titles h5 > span,
.has-inline-titles h6 > span,
.has-inline-titles p > span {
  display: inline-block;
  padding-right: 14px;
}
.enterprise > div,
.enterprise > article,
.enterprise > section,
.enterprise > ul,
.enterprise > table,
.enterprise > form {
  max-width: 1300px;
  margin-right: auto;
  margin-left: auto;
}
.enterprise > div.full-bleed,
.enterprise > article.full-bleed,
.enterprise > section.full-bleed,
.enterprise > ul.full-bleed,
.enterprise > table.full-bleed,
.enterprise > form.full-bleed {
  max-width: none;
}
.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  display: block;
}
.sidebar.has-background {
  padding: 14px;
}
.has-sidebar {
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 14px 0;
  /* the right-most child needs a gutter applied to its left */
}
.has-sidebar > div,
.has-sidebar > article,
.has-sidebar > section,
.has-sidebar > ul,
.has-sidebar > li {
  display: table-cell;
  padding: 14px 0;
  border-left: none;
}
.has-sidebar > .sidebar {
  display: table-cell;
  width: 20%;
  padding: 14px;
}
.has-sidebar .sidebar h1,
.has-sidebar .sidebar h2,
.has-sidebar .sidebar h3,
.has-sidebar .sidebar h4,
.has-sidebar .sidebar h5 {
  margin-bottom: 14px;
}
.has-sidebar div + .sidebar,
.has-sidebar article + .sidebar,
.has-sidebar section + .sidebar,
.has-sidebar ul + .sidebar,
.has-sidebar li + .sidebar,
.has-sidebar .sidebar + div,
.has-sidebar .sidebar + article,
.has-sidebar .sidebar + section,
.has-sidebar .sidebar + ul,
.has-sidebar .sidebar + li {
  border-right: none;
}
.card {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 14px;
  margin-bottom: 20px;
  background: #fff;
  border-width: 1px 1px 2px 1px;
  border-style: solid;
  border-color: #fff;
  position: relative;
  display: block;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card p,
.card ul,
.card li,
.card dl {
  margin: 14px 0 0;
}
.card > div {
  margin: 14px 0 0;
}
.card > *:first-child {
  margin: 0;
}
.card .list-links li {
  padding: 2px 0 0;
}
.card img.main-image {
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
  align-self: center;
}
.card.action {
  outline: 0;
  border-color: #d0d0d0;
  color: #001733;
  cursor: pointer;
}
.card.action:hover {
  border-color: #0670a4;
  text-decoration: none;
  cursor: pointer;
}
.card.action.selected {
  border-color: #0670a4;
  border-width: 2px 2px 4px;
}
.has-cards {
  padding: 0;
  vertical-align: top;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-start;
}
.has-cards .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100%/2 - 20px - 0.166666666666667px);
  -webkit-box-flex: 0 auto;
  -moz-box-flex: 0 auto;
  -webkit-flex: 0 auto;
  -ms-flex: 0 auto;
  flex: 0 auto;
  align-self: stretch;
  flex-direction: column;
  margin: 0 10px 20px;
}
.has-cards.fill-space .card {
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}
/* ------------------------------------------------------- *\
*   ADDITIONAL GROUPING
*   X Children Across
*
*   NOT PROD READY - needs shimming for IE et al
*
*   This parent class will affect any direct children,
*   regardless of their respective classes. The children
*   will display X across, with no wrapping or
*   breakpoint behavior.
*
*   Please note: Nesting elements with flexbox behavior
*   can lead to unexpected behavior. With this in mind,
*   this class should only be used on elements not inside
*   other flexbox elements.
*
\* ------------------------------------------------------- */
.has-1-children-across {
  padding: 20px 0 0;
  vertical-align: top;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-start;
}
.has-1-children-across > form,
.has-1-children-across > div,
.has-1-children-across > article,
.has-1-children-across > section,
.has-1-children-across > ul,
.has-1-children-across > li {
  width: calc(100%/1 - 20px - 0.083333333333333px);
  margin: 0 10px 20px;
}
.has-2-children-across {
  padding: 20px 0 0;
  vertical-align: top;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-start;
}
.has-2-children-across > form,
.has-2-children-across > div,
.has-2-children-across > article,
.has-2-children-across > section,
.has-2-children-across > ul,
.has-2-children-across > li {
  width: calc(100%/2 - 20px - 0.166666666666667px);
  margin: 0 10px 20px;
}
.has-3-children-across {
  padding: 20px 0 0;
  vertical-align: top;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-start;
}
.has-3-children-across > form,
.has-3-children-across > div,
.has-3-children-across > article,
.has-3-children-across > section,
.has-3-children-across > ul,
.has-3-children-across > li {
  width: calc(100%/3 - 20px - 0.25px);
  margin: 0 10px 20px;
}
.has-4-children-across {
  padding: 20px 0 0;
  vertical-align: top;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-start;
}
.has-4-children-across > form,
.has-4-children-across > div,
.has-4-children-across > article,
.has-4-children-across > section,
.has-4-children-across > ul,
.has-4-children-across > li {
  width: calc(100%/4 - 20px - 0.333333333333333px);
  margin: 0 10px 20px;
}
.has-5-children-across {
  padding: 20px 0 0;
  vertical-align: top;
  height: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-content: flex-start;
}
.has-5-children-across > form,
.has-5-children-across > div,
.has-5-children-across > article,
.has-5-children-across > section,
.has-5-children-across > ul,
.has-5-children-across > li {
  width: calc(100%/5 - 20px - 0.416666666666667px);
  margin: 0 10px 20px;
}
.has-columns {
  width: 100%;
  margin: 0 0 20px;
  display: table;
}
.has-columns .column {
  table-layout: fixed;
  display: table-cell;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 14px;
}
.has-columns .column.has-background-secondary {
  padding: 14px;
}
.has-columns.two .column {
  width: 50%;
}
.has-columns.three .column {
  width: 33%;
}
.has-columns.four .column {
  width: 25%;
}
.has-columns.five .column {
  width: 20%;
}
/*
.has-columns {
  .flexbox();
  .flexbox-flow(column wrap);
  .flex-align-items(flex-start);
  & > * {
    .box-sizing();
    .flexbox-flex(0 0 auto);
  }
}


.has-rows {
  .flexbox();
  .flexbox-flow(row wrap);
  .flex-align-items(flex-start);
  & > * {
    .box-sizing();
    .flexbox-flex(0 0 auto);
  }
}

.has-rows.fill-space {
  & > * {
    .flexbox-flex(1 0 auto);
  }
}
*/
/* ------------------------------------------------------- *\
*   BREAKPOINTS
*   0-767 | 768-979 | 980-1199 | 1200-1300
\* ------------------------------------------------------- */
@media (min-width: 0px) and (max-width: 767px) {
  .has-sidebar .has-cards .card {
    width: calc(100%/1 - 20px - 0.083333333333333px);
  }
  .has-sidebar-wide .has-cards .card {
    width: calc(100%/1 - 20px - 0.083333333333333px);
  }
  .has-sidebar {
    display: block;
  }
  .has-sidebar > div,
  .has-sidebar > article,
  .has-sidebar > section,
  .has-sidebar > ul,
  .has-sidebar > li {
    display: block;
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .has-cards .card {
    width: calc(100%/3 - 20px - 0.25px);
  }
  .has-sidebar .has-cards .card {
    width: calc(100%/2 - 20px - 0.166666666666667px);
  }
  .has-sidebar-wide .has-cards .card {
    width: calc(100%/1 - 20px - 0.083333333333333px);
  }
  .has-sidebar .sidebar {
    width: 33.3%;
  }
}
@media (min-width: 980px) and (max-width: 1199px) {
  .has-cards .card {
    width: calc(100%/4 - 20px - 0.333333333333333px);
  }
  .has-sidebar .has-cards .card {
    width: calc(100%/3 - 20px - 0.25px);
  }
  .has-sidebar-wide .has-cards .card {
    width: calc(100%/2 - 20px - 0.166666666666667px);
  }
  .has-sidebar .sidebar {
    width: 25%;
  }
}
@media (min-width: 1200px) {
  .has-cards .card {
    width: calc(100%/5 - 20px - 0.416666666666667px);
  }
  .has-sidebar .has-cards .card {
    width: calc(100%/4 - 20px - 0.333333333333333px);
  }
  .has-sidebar-wide .has-cards .card {
    width: calc(100%/3 - 20px - 0.25px);
  }
  .has-sidebar .sidebar {
    width: 20%;
  }
}