:root {
  /** ==================================================================== **/
  /** Create Custom CSS Variables from "sfra bootstrap override" variables **/
  /** ==================================================================== **/
  --color-white: #fff;
  --color-black: #000;
  --color-blue: #0070d2;
  --color-green: #008827;
  --color-primary: #00a1e0;
  --color-red: #c00;
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-light-blue: #7ed0ee;
  --color-grey1: #f9f9f9;
  --color-grey2: #eee;
  --color-grey3: #ccc;
  --color-grey4: #999;
  --color-grey5: #666;
  --color-grey6: #444;
  --color-grey7: #222;
  --color-grey8: #333;
  --color-grey-transparent-1: rgba(0, 0, 0, 0.65);
  --color-grey-transparent-2: rgba(0, 0, 0, 0.25);
  --color-light-gray: var(--color-grey1);
  --color-slightly-darker-gray: var(--color-grey4);
  --color-dark-gray: var(--color-grey6);
  --color-darker-gray: var(--color-grey7);
  --color-horizontal-rule-grey: var(--color-grey3);
  --color-product-number-grey: var(--color-grey3);
  --color-horizontal-border-grey: var(--color-grey4);
  --color-menu-link: var(--color-grey6);
  --color-close-menu-bg: var(--color-grey2);
  --color-link-color: var(--color-dark-gray);
  --color-hr-border-color: var(--color-grey3);
  /** ==================================================================== **/
  /** Define skin named variables here                                    **/
  /** ==================================================================== **/
  --skin-background-color-1: var(--color-gray1);
  --skin-border-color-1: var(--color-white);
  --skin-main-text-color-1: var(--color-gray7);
  --skin-main-text-color-2: var(--color-gray7);
  --skin-menu-color-1: #444;
  --skin-menu-color-1-invert: var(--color-white);
  --skin-menu-color-2: #222;
  --skin-link-color-1: #444;
  --skin-link-color-2: var(--color-blue);
  --skin-primary-color-1: var(--color-primary);
  --skin-primary-color-2: var(--color-primary);
  --skin-primary-color-invert-1: var(--color-white);
  --skin-selectbox-background-color-1: var(--color-white);
  --skin-selectbox-text-color-1: var(--skin-main-text-color-1);
  --skin-banner-background-color-1: #444;
  --skin-banner-background-color-2: #222;
  --skin-banner-text-color-1: var(--color-white);
  --skin-heading-color-1: var(--color-primary);
  --skin-heading-color-1-invert: var(--color-white);
  --skin-price-1: var(--color-gray7);
  --skin-header-font: 'Dosis';
  --skin-body-font: var(--font-family-sans-serif); }

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-primary: #e12137;
  --color-blue: #007bb4;
  --color-red: #e12137;
  --skin-link-color-1: var(--color-white);
  --skin-link-color-2: var(--color-blue);
  --skin-primary-link-color: var(--color-blue);
  --skin-primary-color-1: var(--color-primary);
  --skin-primary-color-2: var(--color-primary);
  --skin-banner-background-color-1: #e12137;
  --skin-banner-background-color-2:  #e12137;
  --skin-header-font: 'proxima_novaregular';
  --skin-body-font: 'proxima_novaregular';
  --skin-heading-color-1: var(--color-grey8);
  --primary-btn-bg: #e12137;
  --primary-btn-hover-bg: #ad072b;
  --primary-btn-focus-bg: #be2025;
  --primary-btn-disabled-bg: #e31b23;
  --skin-primary-btn-bg: var(--primary-btn-bg);
  --skin-primary-btn-hover-bg: var(--primary-btn-hover-bg);
  --skin-primary-btn-focus-bg: var(--primary-btn-focus-bg);
  --skin-primary-btn-disabled-bg: var(--primary-btn-disabled-bg);
  --secondary-btn-border: #005a8a;
  --secondary-btn-color: #007bb4;
  --secondary-btn-hover-color: #8c8c8c;
  --secondary-btn-active-color: #005a8a;
  --skin-secondary-btn-border: var(--secondary-btn-border);
  --skin-secondary-btn-color: var(--secondary-btn-color);
  --skin-secondary-btn-hover-color: var(--secondary-btn-hover-color);
  --skin-secondary-btn-active-color: var(--secondary-btn-active-color);
  --skin-link: #333;
  --border-color-input-box: #d0d0d0;
  --border-heading-3: #c7c7c7;
  --nav-background: #f1f1f1;
  --nav-background-2: #d7d7d7;
  --nav-seperator-border: #d0d0d0;
  --button-red-hover: #ad072b;
  --button-control-border: #c4c4c4;
  --arrow-button-background: #f6f7f3;
  --variant-border-color: #DB5858;
  --variant-border-color-inactive: #d0d0d0;
  --variant-btn-link-color: #006FA3;
  --collapsible-title-arrow-color: #959595;
  --collapsible-title-seperator: #c4c4c4;
  --manatee: #8A95A2;
  --sub-header-color: #909090;
  --card-header-border: #e0e0e0;
  --payment-method-tab-color: #999999;
  --create-account-order-confirmation-bg: #f8f8f8;
  --create-account-order-confirmation-border: #e9e9e9; }

body {
  font-size: 0.875em; }

body,
.card,
.card-header,
.hero {
  background-color: var(--skin-background-color-1);
  font-family: var(--skin-body-font);
  color: var(--skin-main-text-color-1); }

.header-banner {
  background-color: var(--color-red);
  color: var(--skin-banner-text-color-1); }

.header-banner .close-button .close {
  background-color: var(--color-red); }

a {
  color: #333; }

header ~ #maincontent .container a:not(.btn-primary, .btn-outline-primary) {
  color: var(--skin-primary-color-2); }

.btn-primary {
  background-color: var(--skin-primary-btn-bg);
  color: var(--skin-primary-color-invert-1); }
  .btn-primary:hover {
    background-color: var(--skin-primary-btn-hover-bg); }
  .btn-primary.focus, .btn-primary:focus, .btn-primary.active, .btn-primary:active {
    background-color: var(--skin-primary-btn-focus-bg) !important; }

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--skin-primary-btn-disabled-bg);
  border-color: var(--skin-primary-color);
  color: var(--skin-primary-color-invert-1);
  opacity: 0.5; }

.btn-outline-primary {
  color: #e12137;
  border-color: var(--skin-primary-color-1); }

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  color: var(--skin-primary-color-invert-1);
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1); }

.btn-primary-small {
  background-color: var(--skin-primary-btn-bg);
  color: var(--skin-primary-color-invert-1);
  border: 0;
  line-height: 2.3em !important;
  padding: 0 1.4em !important;
  margin: 0;
  box-shadow: none;
  border-radius: 4px;
  font-size: .875em; }
  .btn-primary-small:hover {
    background-color: var(--skin-primary-btn-hover-bg);
    color: var(--skin-primary-color-invert-1);
    outline: none; }
  .btn-primary-small.focus, .btn-primary-small:focus, .btn-primary-small.active, .btn-primary-small:active {
    background-color: var(--skin-primary-btn-focus-bg) !important;
    outline: none;
    box-shadow: none !important;
    color: var(--skin-primary-color-invert-1); }

.btn-outline-primary-small {
  color: var(--skin-primary-color-1) !important;
  border-color: var(--skin-primary-color-1) !important;
  line-height: 2.3em !important;
  padding: 0 1.4em !important;
  margin: 0;
  box-shadow: none;
  border-radius: .5em;
  font-size: .875em; }
  .btn-outline-primary-small.focus, .btn-outline-primary-small:focus {
    box-shadow: none;
    outline: none; }
  .btn-outline-primary-small:hover, .btn-outline-primary-small:focus, .btn-outline-primary-small:active {
    color: var(--skin-primary-color-invert-1) !important;
    background-color: var(--skin-primary-color-1);
    border-color: var(--skin-primary-color-1); }

.btn-secondary {
  background-color: var(--skin-link-color-1);
  border: 2px solid var(--skin-secondary-btn-border);
  color: var(--skin-secondary-btn-color);
  line-height: 3em !important;
  padding: 0 1.4em !important;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  text-transform: uppercase; }
  .btn-secondary:hover {
    background-color: transparent;
    border: 2px solid var(--skin-secondary-btn-border);
    color: var(--skin-secondary-btn-hover-color);
    outline: none; }
  .btn-secondary.focus, .btn-secondary:focus, .btn-secondary.active, .btn-secondary:active {
    color: var(--skin-secondary-btn-active-color) !important;
    outline: none;
    box-shadow: none !important;
    border: 2px solid var(--skin-secondary-btn-border);
    background-color: transparent !important; }

.btn-secondary.disabled,
.btn-secondary:disabled {
  background-color: var(--skin-secondary-btn-hover-color);
  border-color: var(--skin-primary-color);
  color: var(--skin-primary-color-invert-1);
  opacity: 0.5; }

h1,
h2 {
  font-family: var(--skin-header-font);
  color: var(--skin-heading-color-1); }

h3,
h4,
h5,
h6 {
  font-family: "proxima_novabold";
  color: var(--skin-heading-color-1); }

h1 {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 400;
  text-transform: none; }

h2 {
  font-size: 1.75rem;
  line-height: 1.75rem;
  font-weight: 400;
  text-transform: none; }

h3 {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 400;
  text-transform: none; }

h4 {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 400;
  text-transform: none; }

h5 {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-transform: none; }

h6 {
  font-size: 1rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-transform: none; }

.text-red {
  color: #e12137; }

ul li {
  list-style: none; }

.link-color-black {
  color: #000 !important; }

.clearboth {
  clear: both; }

.text-blue {
  color: #007bb4; }

/* system display font scale issue */
/* 125% */
@media (-webkit-device-pixel-ratio: 1.25) {
  body {
    zoom: 0.8;
    /* #js-googlepay-container{
            zoom: 1.2;
        } */ }
  .pac-container {
    zoom: 1.23;
    width: 330px !important;
    margin-left: 5px; } }

/* 150% */
@media (-webkit-device-pixel-ratio: 1.5) {
  body {
    zoom: 0.67;
    /*  #js-googlepay-container{
            zoom: 1.33;
        } */ }
  .pac-container {
    zoom: 1.46;
    width: 330px !important;
    margin-left: 5px; } }

/* 175% */
@media (-webkit-device-pixel-ratio: 1.75) {
  body {
    zoom: 0.57;
    /* #js-googlepay-container{
            zoom: 1.43;
        } */ }
  .pac-container {
    zoom: 1.72;
    width: 330px !important;
    margin-left: 5px; } }
