/**
  Funko Site Skin Stylesheet
  This stylesheet will house selectors that update the default
  values found in ./skinVariables.scss to brand-specific values.
**/
: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); }

/**
    Funko site variables.
    See node_modules/bootstrap/scss/_variables.scss to see a full
        list of customizeable variables.
**/
/**
    Core shared variables.
    Set variables here that will be shared among both brands.
**/
/**
    _skinVariables.scss
    This stylesheet will house all core CSS variable default values.
**/
:root {
  --header-height: 0;
  --header-main-height: 54px;
  --skin-link-color-2: #0050a0; }
  @media (max-width: 767.98px) {
    :root {
      --overlay-top-space: 54px; } }

/**
  Shared site skin
  Copied over from base cartridge and customized to match site designs
**/
/**
    Core shared variables.
    Set variables here that will be shared among both brands.
**/
body,
.card,
.card-header {
  background-color: var(--skin-background-color-1);
  font-family: var(--skin-body-font);
  color: var(--skin-main-text-color-1); }

.product-tile,
.refinement-bar,
.modal-content {
  background-color: var(--skin-background-color-1);
  color: var(--skin-main-text-color-1); }

.search-h1-style,
.search-results {
  color: var(--skin-main-text-color-1); }

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

.header-banner {
  background-color: var(--skin-banner-background-color-1);
  color: var(--skin-banner-text-color-1); }
  .header-banner .carousel-control-prev,
  .header-banner .carousel-control-next {
    background-color: var(--skin-banner-background-color-1); }

.loyalty-banner {
  background-color: #ffc700;
  color: #111; }
  .loyalty-banner .carousel-control-prev,
  .loyalty-banner .carousel-control-next {
    background-color: #ffc700; }

h1.header.page-title,
h1.header.page-title::before {
  background-color: var(--skin-heading-color-1);
  color: var(--skin-heading-color-1-invert); }

.product-tile {
  background-color: var(--skin-product-tile-background-color-1);
  border: 7px solid var(--skin-product-tile-border-color-1); }
  @media (min-width: 768px) {
    .product-tile {
      border: 15px solid var(--skin-product-tile-border-color-1); } }

.refinements ul li button {
  color: var(--skin-primary-color-1); }

.custom-select {
  background-color: var(--skin-selectbox-background-color-1);
  color: var(--skin-selectbox-text-color-1); }

.inline-link {
  color: var(--skin-link-color-2); }
  .inline-link .svg-symbol {
    fill: var(--skin-link-color-2); }

.inline-link-blue {
  color: #0070cc !important; }

button.inline-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0; }

.price {
  color: var(--skin-price-1); }

.navbar,
.navbar .nav-item,
.navbar .nav-item a,
.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown a,
.dropdown-menu,
.dropdown-menu a {
  color: var(--skin-menu-color-1); }

.navbar .nav-item.dropdown,
.navbar .nav-item.dropdown .dropdown-menu.show {
  color: var(--skin-selectbox-text-color-1); }

@media (min-width: 768px) {
  .main-menu .nav-item .nav-link:hover,
  .main-menu .nav-item .nav-link:focus,
  .main-menu .nav-item.show .nav-link {
    color: var(--skin-menu-color-1) !important;
    background-color: var(--skin-menu-color-1-invert) !important; } }

.btn-primary {
  background-color: var(--skin-primary-color-1);
  border-color: var(--skin-primary-color-1);
  color: var(--skin-primary-color-invert-1); }

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--skin-header-font), sans-serif; }

a {
  color: var(--skin-link-color-1); }

.pd-product-grid .bg-image-fullbleed.bg-primary + .search-results {
  color: var(--skin-primary-color-invert-1); }
  .pd-product-grid .bg-image-fullbleed.bg-primary + .search-results .btn-show-more {
    color: var(--skin-primary-color-invert-1); }
  .pd-product-grid .bg-image-fullbleed.bg-primary + .search-results .btn-show-more:hover {
    border-bottom-color: var(--skin-primary-color-invert-1); }
  .pd-product-grid .bg-image-fullbleed.bg-primary + .search-results .btn-show-more .svg-symbol {
    fill: var(--skin-primary-color-invert-1); }

.bg-image-fullbleed.bg-primary + .region,
.bg-image-fullbleed.bg-primary + .grid-header,
.bg-image-fullbleed.bg-primary .bg-image-fullbleed.bg-primary + .region,
.column-bg.bg-primary + .region,
.column-bg.bg-primary + .grid-header,
.column-bg.bg-primary .bg-image-fullbleed.bg-primary + .region {
  color: var(--skin-primary-color-invert-1); }
  .bg-image-fullbleed.bg-primary + .region .pd-hero-title,
  .bg-image-fullbleed.bg-primary + .grid-header .pd-hero-title,
  .bg-image-fullbleed.bg-primary .bg-image-fullbleed.bg-primary + .region .pd-hero-title,
  .column-bg.bg-primary + .region .pd-hero-title,
  .column-bg.bg-primary + .grid-header .pd-hero-title,
  .column-bg.bg-primary .bg-image-fullbleed.bg-primary + .region .pd-hero-title {
    color: var(--skin-primary-color-invert-1); }
  .bg-image-fullbleed.bg-primary + .region .btn-show-more,
  .bg-image-fullbleed.bg-primary + .grid-header .btn-show-more,
  .bg-image-fullbleed.bg-primary .bg-image-fullbleed.bg-primary + .region .btn-show-more,
  .column-bg.bg-primary + .region .btn-show-more,
  .column-bg.bg-primary + .grid-header .btn-show-more,
  .column-bg.bg-primary .bg-image-fullbleed.bg-primary + .region .btn-show-more {
    color: var(--skin-primary-color-invert-1); }
  .bg-image-fullbleed.bg-primary + .region .btn-show-more:hover,
  .bg-image-fullbleed.bg-primary + .grid-header .btn-show-more:hover,
  .bg-image-fullbleed.bg-primary .bg-image-fullbleed.bg-primary + .region .btn-show-more:hover,
  .column-bg.bg-primary + .region .btn-show-more:hover,
  .column-bg.bg-primary + .grid-header .btn-show-more:hover,
  .column-bg.bg-primary .bg-image-fullbleed.bg-primary + .region .btn-show-more:hover {
    border-bottom-color: var(--skin-primary-color-invert-1); }
  .bg-image-fullbleed.bg-primary + .region .btn-show-more .svg-symbol,
  .bg-image-fullbleed.bg-primary + .grid-header .btn-show-more .svg-symbol,
  .bg-image-fullbleed.bg-primary .bg-image-fullbleed.bg-primary + .region .btn-show-more .svg-symbol,
  .column-bg.bg-primary + .region .btn-show-more .svg-symbol,
  .column-bg.bg-primary + .grid-header .btn-show-more .svg-symbol,
  .column-bg.bg-primary .bg-image-fullbleed.bg-primary + .region .btn-show-more .svg-symbol {
    fill: var(--skin-primary-color-invert-1); }

.fun-tv-page {
  --skin-link-color-1: #fff;
  --skin-breadcrumb-color: #fff;
  --skin-menu-color-1: #fff; }

.pd-hero-title {
  --skin-main-text-color-1: #0d0d0d; }

/**
    Funko global skin variables
**/
:root {
  --skin-header-font: ProximaNova-Black, sans-serif;
  --skin-body-font: ProximaNova-Medium, sans-serif;
  --skin-main-text-color-1: #111;
  --color-primary: #111;
  --color-secondary: #fff;
  --color-offwhite: #f4f4f4;
  --skin-primary-color-invert-1: var(--color-secondary);
  --skin-banner-background-color-1: var(--color-primary);
  --skin-banner-text-color-1: var(--color-offwhite);
  --skin-menu-color-1: var(--color-primary);
  --skin-inlinelink-color: #0070cc;
  --skin-background-color-1: #fff;
  --skin-background-color-2: #f3f3f7;
  --skin-product-tile-background-color-1: #fff;
  --skin-border-color-1: #e8e8ed;
  --skin-product-tile-border-color-1: #fff;
  --skin-inlinelink-hover-color: #004680;
  --skin-breadcrumb-color: #555;
  --skin-tertiary-button-color: var(--color-primary);
  --skin-tertiary-button-bg-color: #f3f3f7;
  --skin-product-tile-background-color-2: #f3f3f7;
  --skin-product-tile-border-color-2: #f3f3f7; }

.site-header {
  background-color: var(--skin-main-text-color-1);
  color: var(--skin-background-color-1); }

.footer-content {
  background-color: var(--skin-background-color-1);
  color: var(--skin-main-text-color-1); }

body.dark-theme {
  --skin-background-color-1: var(--color-primary); }
  body.dark-theme .product-tile,
  body.dark-theme .refinement-bar,
  body.dark-theme .footer-content,
  body.dark-theme .modal-content {
    --skin-background-color-1: var(--color-secondary);
    --skin-main-text-color-1: var(--color-primary); }
  body.dark-theme .search-results .grid-header {
    --skin-border-color-1: #393939; }
  body.dark-theme #maincontent {
    --skin-border-color-1: #1a1a1a;
    --skin-breadcrumb-color: var(--color-grey4);
    --skin-background-color-2: #222;
    --skin-main-text-color-1: var(--color-secondary); }
    body.dark-theme #maincontent .refinement-bar {
      --skin-border-color-1: #e8e8ed; }
  body.dark-theme .product-tile {
    --skin-tertiary-button-color: var(--color-secondary);
    --skin-tertiary-button-bg-color: var(--color-primary); }

@media (min-width: 768px) {
  .dropdown.level-1 .nav-link.dropdown-toggle {
    color: var(--skin-menu-color-1-invert); } }

.inline-link {
  font-family: "ProximaNova-Bold", sans-serif; }
  .inline-link:hover {
    color: var(--skin-inlinelink-hover-color); }
    .inline-link:hover .svg-symbol {
      fill: var(--skin-inlinelink-hover-color); }

.search-pagination .selected {
  font-family: "ProximaNova-Bold", sans-serif; }

.download-link {
  color: #c92a1d;
  text-decoration: none;
  font-family: "ProximaNova-Medium", sans-serif; }

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

.btn-show-more:focus {
  background-color: transparent; }

.btn-secondary:hover,
.btn-tertiary:hover {
  border-color: var(--skin-primary-color-1);
  color: var(--skin-primary-color-1); }

.btn-secondary:hover {
  background-color: var(--skin-primary-color-invert-1); }

@media (min-width: 768px) {
  .dropdown.level-1 .nav-link.dropdown-toggle {
    color: var(--skin-menu-color-1-invert); }
  .category-level-1 .nav-link.nav-style-1 {
    color: var(--skin-menu-color-1-invert); } }

/*# sourceMappingURL=fnk-skin.css.map*/