/*
|--------------------------------------------------------------------------
| Color Variables
|--------------------------------------------------------------------------
*/
/************* Screen Sizes Breakpoints Variables *************/
/*
|--------------------------------------------------------------------------
| Screen Sizes Breakpoints Variables
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Grid Columns, Options
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Spacing variables
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Gutter Variables
|--------------------------------------------------------------------------
*/
/* Genral Functions - Non-site-specific Functionality */
/* Functions for colors*/
/*** Foundation Functions **/
/* Compare Hopper */
.compare-hopper {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #FFF;
  -webkit-box-shadow: 0.0625rem 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0.0625rem 0.3125rem 1.875rem 0 rgba(0, 0, 0, 0.3);
  z-index: 9999999;
  padding: 0.625rem 0.625rem 1.25rem 0.625rem; }
  .compare-hopper .title {
    display: flex;
    width: 100%;
    max-width: 75.625rem;
    margin: 0 auto; }
    @media screen and (min-width: 1250px) {
      .compare-hopper .title {
        padding-left: 7rem; } }
  .compare-hopper .compare-container {
    display: flex;
    width: 100%;
    justify-content: center;
    max-width: 75.625rem;
    margin: 0 auto; }
    @media screen and (min-width: 0) and (max-width: 849px) {
      .compare-hopper .compare-container {
        display: none; } }
    .compare-hopper .compare-container .compare-item {
      border: 1px solid #E5E5DB;
      position: relative;
      display: flex;
      text-align: left;
      align-items: center;
      justify-content: flex-start;
      width: calc(100% / 6 - 70px);
      height: auto;
      padding: 0.25rem;
      margin-left: 0.625rem; }
      .compare-hopper .compare-container .compare-item .item-img {
        width: 100%; }
        .compare-hopper .compare-container .compare-item .item-img img {
          height: 100%;
          width: 100%;
          max-height: 6.25rem; }
      @media screen and (min-width: 769px) and (max-width: 1250px) {
        .compare-hopper .compare-container .compare-item {
          width: calc(100% / 6 - 40px); } }
      .compare-hopper .compare-container .compare-item:first-child {
        margin-left: 0; }
      .compare-hopper .compare-container .compare-item:hover {
        cursor: pointer;
        border-color: #a5a582; }
        .compare-hopper .compare-container .compare-item:hover .item-name, .compare-hopper .compare-container .compare-item:hover .item-name > span {
          color: #00214A; }
      .compare-hopper .compare-container .compare-item > * {
        vertical-align: top; }
      .compare-hopper .compare-container .compare-item a.compare-remove {
        padding: 0.3125rem 1.3125rem;
        font-size: 0.75rem;
        margin-bottom: 0.625rem;
        margin-top: 0.375rem; }
        .compare-hopper .compare-container .compare-item a.compare-remove i {
          margin-right: 0.3125rem; }
        @media screen and (min-width: 850px) and (max-width: 900px) {
          .compare-hopper .compare-container .compare-item a.compare-remove {
            padding: 0.3125rem 0.625rem;
            width: 100%;
            text-align: center; } }
        @media screen and (min-width: 900px) and (max-width: 952px) {
          .compare-hopper .compare-container .compare-item a.compare-remove {
            padding: 0.3125rem 1rem; } }
  .compare-hopper .compare-tray {
    display: none; }
    @media screen and (min-width: 0) and (max-width: 849px) {
      .compare-hopper .compare-tray {
        display: block;
        background: #e0e1e2;
        float: left;
        clear: both;
        width: 100%;
        padding: 0.5rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
        border: 0.125rem solid transparent; }
        .compare-hopper .compare-tray:hover, .compare-hopper .compare-tray:focus {
          background: #e0e1e2;
          border-color: #AAAFB2; } }
  .compare-hopper.showtray .compare-container {
    display: inline-block; }
  .compare-hopper .compare-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .compare-hopper .compare-buttons.inner {
      width: 12.1875rem;
      padding-left: 0.9375rem;
      justify-content: flex-start; }
      @media screen and (min-width: 0) and (max-width: 849px) {
        .compare-hopper .compare-buttons.inner {
          display: none; } }
      .compare-hopper .compare-buttons.inner > a:first-child {
        margin-bottom: 0.625rem;
        text-decoration: none;
        padding: 0.8125rem 1.25rem;
        text-align: center;
        text-align: center;
        font-size: 1.25rem;
        height: auto; }
      .compare-hopper .compare-buttons.inner > a button {
        padding: 0.8125rem 1.25rem;
        font-size: 1.25rem;
        width: 100%;
        height: 100%; }
    .compare-hopper .compare-buttons.outer {
      display: none; }
      @media screen and (min-width: 0) and (max-width: 849px) {
        .compare-hopper .compare-buttons.outer {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          padding-top: 0.3125rem; }
          .compare-hopper .compare-buttons.outer button {
            width: 100%;
            padding: 0.3125rem 1.25rem; }
          .compare-hopper .compare-buttons.outer > a {
            width: 50%;
            text-decoration: none; } }

#AddToCompareExceedsSixProducts .modal-actions a {
  text-decoration: none; }

/*# sourceMappingURL=compare-hopper.css.map */