﻿/*
	Copyright (C) Hoefler & Co.
	This software is the property of Hoefler & Co. (H&Co).
	Your right to access and use this software is subject to the
	applicable License Agreement, or Terms of Service, that exists
	between you and H&Co. If no such agreement exists, you may not
	access or use this software for any purpose.
	This software may only be hosted at the locations specified in
	the applicable License Agreement or Terms of Service, and only
	for the purposes expressly set forth therein. You may not copy,
	modify, convert, create derivative works from or distribute this
	software in any way, or make it accessible to any third party,
	without first obtaining the written permission of H&Co.
	For more information, please visit us at http://typography.com.
*/
@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-XLight_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-XLight_Web.woff") format("woff");
  font-weight: 200;
  font-style: normal; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-XLightItalic_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-XLightItalic_Web.woff") format("woff");
  font-weight: 200;
  font-style: italic; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-Light_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-Light_Web.woff") format("woff");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-LightItalic_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-LightItalic_Web.woff") format("woff");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-Book_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-Book_Web.woff") format("woff");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-BookItalic_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-BookItalic_Web.woff") format("woff");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-Bold_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-Bold_Web.woff") format("woff");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-BoldItalic_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-BoldItalic_Web.woff") format("woff");
  font-weight: 700;
  font-style: italic; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-Black_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-Black_Web.woff") format("woff");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Verlag';
  src: url("/fonts/verlag/woff2/Verlag-BlackItalic_Web.woff2") format("woff2"), url("/fonts/verlag/woff/Verlag-BlackItalic_Web.woff") format("woff");
  font-weight: 800;
  font-style: italic; }

.page-intro-heading {
  letter-spacing: 0.08em;
  font-family: Verlag, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.3;
  color: #CBA462;
  text-transform: uppercase; }
  @media (min-width: 479px) {
    .page-intro-heading {
      font-size: 40px; } }
  @media (min-width: 768px) {
    .page-intro-heading {
      font-size: 45px; } }
  .page-intro-heading span, .page-intro-heading .skin-secondary-text {
    font-family: Verlag, sans-serif;
    color: #3C2E32;
    font-weight: 700;
    line-height: 1.3; }

.top-hero.light-font h1 {
  text-transform: uppercase;
  font-family: Verlag, sans-serif;
  font-weight: 700;
  line-height: 1.3; }
  .top-hero.light-font h1 i {
    font-weight: 700; }

.main-nav .main-nav-menu-item a {
  letter-spacing: 0.08em;
  font-weight: 800 !important; }

.subbrand-nav {
  font-family: Verlag, sans-serif;
  letter-spacing: 0.08em; }

.page-intro-body, .page-intro-body p {
  font-family: Verlag, sans-serif;
  font-size: 17px;
  line-height: 1.3; }
  @media (min-width: 768px) {
    .page-intro-body, .page-intro-body p {
      font-size: 20px; } }

.articel-block h2 {
  font-family: Verlag, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.3;
  margin: 0;
  color: #CBA462; }
  @media (min-width: 479px) {
    .articel-block h2 {
      font-size: 40px; } }
  @media (min-width: 768px) {
    .articel-block h2 {
      font-size: 45px; } }
  .articel-block h2:first-of-type {
    color: #3C2E32; }
  .articel-block h2:last-of-type {
    margin-bottom: 30px; }
  .articel-block h2 p {
    font-family: Verlag, sans-serif;
    font-size: 16px;
    line-height: 1.43; }

.articel-block .btn.btn-default {
  font-weight: 900;
  font-size: 15px;
  text-transform: none; }

.product-grid .product-spotlight-title p,
.product-grid .product-spotlight-title span {
  font-family: Verlag, sans-serif;
  font-size: 32px;
  font-weight: 700 !important;
  line-height: 1.5; }

.product-grid .grid .krisprolls-show {
  font-family: Verlag, sans-serif; }

.articel-block {
  line-height: 1.5;
  font-family: Verlag, sans-serif; }
  .articel-block p, .articel-block a {
    font-family: Verlag, sans-serif;
    line-height: 1.5; }
  .articel-block blockquote {
    max-width: 450px !important;
    margin: 80px auto 0 !important;
    font-family: Verlag, sans-serif;
    font-size: 17px !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    color: #000;
    text-align: center;
    font-weight: 900; }
    .articel-block blockquote p {
      font-family: Verlag, sans-serif;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.43; }

.banner.image-block h1 {
  font-family: Verlag, sans-serif;
  font-weight: 700;
  color: #3C2E32; }
  .light-font .banner.image-block h1 {
    color: #fff; }
  .banner.image-block h1 p {
    font-weight: 700; }

.hero-recepies .hero-recepies--list-item .hero-recepies--list-name {
  font-family: Verlag, sans-serif; }

.hero-recepies .hero-recepies--list-item .hero-recepies--list-item-info .time {
  font-family: Verlag, sans-serif;
  font-style: italic; }

.instagram-section__head h2 {
  font-family: Verlag, sans-serif;
  font-weight: 700;
  font-size: 27px;
  color: #CBA462;
  line-height: 1.3;
  text-transform: uppercase; }
  .instagram-section__head h2 span {
    font-weight: 700;
    color: #3C2E32; }
  @media (min-width: 479px) {
    .instagram-section__head h2 {
      font-size: 40px; } }
  @media (min-width: 768px) {
    .instagram-section__head h2 {
      font-size: 45px; } }

.spotlight-grid .block-base-title {
  font-family: Verlag, sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.3;
  color: #CBA462; }
  @media (min-width: 479px) {
    .spotlight-grid .block-base-title {
      font-size: 40px; } }
  @media (min-width: 768px) {
    .spotlight-grid .block-base-title {
      font-size: 45px; } }
  .spotlight-grid .block-base-title span {
    color: #3C2E32;
    font-weight: 700; }

.spotlight-grid .block-spotlight-description {
  color: #000;
  font-family: Verlag, sans-serif;
  font-style: normal;
  font-weight: 300;
  line-height: 1.3; }

.recipe-card-content {
  font-family: Verlag, sans-serif; }
  .recipe-card-content .recipe-card-content {
    font-family: Verlag, sans-serif; }
  .recipe-card-content .recipe-card-duration {
    font-family: Verlag, sans-serif;
    font-weight: 700; }
  .recipe-card-content .btn {
    font-family: Verlag, sans-serif; }

body, .site-wrapper, .site-content, .bg___primary {
  background-color: #fff; }

.bg___secondary {
  background-color: #F5F5F5; }

.page-intro {
  background-color: #fff; }
  .page-intro.bg___primary {
    padding-top: 100px; }

.subbrand-nav {
  background-color: #3E2B2F; }
  .subbrand-nav .subbrand-nav-menu {
    padding-left: 15px;
    background-color: #524144; }
    @media (min-width: 1086px) {
      .subbrand-nav .subbrand-nav-menu {
        padding-left: 0; } }

.top-hero {
  background-color: #fff; }
  .top-hero .banner {
    background-attachment: unset;
    margin-top: 91px;
    height: auto !important; }
    .top-hero .banner .inner {
      display: flex;
      align-items: center;
      justify-content: center; }
      .top-hero .banner .inner .valign-center {
        height: auto;
        max-width: 768px; }
    @media (min-width: 768px) {
      .top-hero .banner {
        margin-top: 110px; } }
    .top-hero .banner .valign-center {
      min-height: unset !important; }
  .top-hero.has-heading-image .inner {
    align-items: flex-end; }
    .top-hero.has-heading-image .inner .valign-center {
      transform: translateY(22%); }

.product-grid {
  margin-top: 57px; }
  .product-grid .page-wrapper {
    transform: translateY(-57px); }
  .product-grid .grid {
    max-width: 690px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    @media (min-width: 768px) {
      .product-grid .grid {
        max-width: 720px;
        justify-content: flex-start; } }
    .product-grid .grid .product-spotlight {
      flex: 0 0 100%;
      background-color: #fff;
      width: auto;
      margin-left: 0;
      margin-right: 0;
      border-radius: 40px;
      margin-bottom: 30px;
      color: #3C2E32;
      box-shadow: 0 30px 30px rgba(36, 61, 124, 0.12); }
      @media (min-width: 768px) {
        .product-grid .grid .product-spotlight {
          flex: 1 0 47%; } }
      .product-grid .grid .product-spotlight:hover {
        color: #3C2E32; }
        .product-grid .grid .product-spotlight:hover .product-spotlight-image {
          transform: scale(1.06);
          transition: transform ease-out 0.35s; }
    .product-grid .grid .tag-wrapper {
      border-radius: 40px 40px 0 0;
      overflow: hidden;
      -webkit-mask-image: -webkit-radial-gradient(white, black); }
    .product-grid .grid .product-spotlight-image {
      transition: transform ease-in 0.35s;
      border: none;
      margin-bottom: 0; }
    .product-grid .grid .product-spotlight-title {
      text-transform: uppercase;
      margin: 50px 0; }
      .product-grid .grid .product-spotlight-title p, .product-grid .grid .product-spotlight-title span {
        color: #3C2E32; }
        .product-grid .grid .product-spotlight-title p:hover, .product-grid .grid .product-spotlight-title span:hover {
          color: #3C2E32; }
    .product-grid .grid .krisprolls-show {
      font-size: 15px;
      font-weight: 700;
      display: inline-block;
      position: relative;
      margin-bottom: 60px; }
      .product-grid .grid .krisprolls-show::after {
        content: '';
        width: 57.61px;
        height: 3.36px;
        position: absolute;
        bottom: -7px;
        left: 0;
        right: 0;
        margin: auto;
        background-image: url(/img/product/krisprolls-line.svg);
        background-repeat: no-repeat; }
    @media (min-width: 768px) {
      .product-grid .grid .product-spotlight:nth-child(odd) {
        margin-right: 1.5%; }
      .product-grid .grid .product-spotlight:nth-child(even) {
        margin-left: 1.5%; } }

.breadcrumb-nav {
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  width: 100%;
  margin: 52px auto 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  min-height: unset;
  border-top: none;
  background-color: #3E2B2F; }
  @media (min-width: 768px) {
    .breadcrumb-nav {
      margin: 71px auto 0 auto; } }
  .breadcrumb-nav .breadcrumb-nav-menu {
    display: flex;
    line-height: 40px;
    margin-left: 9px; }
    @media (max-width: 499px) {
      .breadcrumb-nav .breadcrumb-nav-menu {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; } }
    .breadcrumb-nav .breadcrumb-nav-menu .breadcrumb-nav-menu-link:after {
      margin-right: 0.5em; }
  .breadcrumb-nav .page-wrapper {
    display: flex;
    align-items: center;
    height: 40px; }
  .breadcrumb-nav .breadcrumb-nav-menu-link {
    color: #fff; }

/* added by Peter T */
.main-nav-menu > li a span {
  letter-spacing: 0.08em;
  font-weight: 800 !important; }

.main-nav {
  background: #fff;
  border-bottom: none; }
  @media (min-width: 768px) {
    .main-nav {
      height: 71px; } }
  .main-nav-logo {
    background-image: url("/img/logos/big-krisprolls.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    width: 174px;
    height: 21px;
    margin-top: 16px; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .main-nav-logo {
        background-image: url("/img/logos/big-krisprolls@2x.png");
        -webkit-background-size: 174px 21px;
        -moz-background-size: 174px 21px;
        -o-background-size: 174px 21px;
        background-size: 174px 21px; } }
    @media (max-width: 450px) {
      .main-nav-logo {
        background-image: url("/img/logos/big-krisprolls.png");
        background-size: contain;
        width: 110px; } }
  @media only screen and (max-width: 450px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 450px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-width: 450px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 450px) and (min-device-pixel-ratio: 2), only screen and (max-width: 450px) and (min-resolution: 192dpi), only screen and (max-width: 450px) and (min-resolution: 2dppx) {
    .main-nav-logo {
      background-image: url("/img/logos/big-krisprolls@2x.png");
      -webkit-background-size: 110px 13px;
      -moz-background-size: 110px 13px;
      -o-background-size: 110px 13px;
      background-size: 110px 13px; } }
    @media (min-width: 768px) {
      .main-nav-logo {
        margin-top: 20px; } }
    .main-nav-logo:before {
      content: none; }
    .main-nav-logo:after {
      content: none; }

.footer-nav-logo-image {
  background-image: url("/img/logos/big-krisprolls.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  width: 135px;
  height: 19px;
  margin: 0 auto; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .footer-nav-logo-image {
      background-image: url("/img/logos/big-krisprolls@2x.png");
      -webkit-background-size: 134px 17px;
      -moz-background-size: 134px 17px;
      -o-background-size: 134px 17px;
      background-size: 134px 17px; } }

@media (min-width: 768px) {
  .subbrand-nav-menu ul {
    overflow: hidden;
    max-height: 70px; } }

.product-spotlight-title {
  text-transform: uppercase; }

.footer-nav-logo-tagline {
  display: none; }

.block-spotlight-link {
  top: unset !important;
  left: unset !important; }

.articel-block .btn.btn-default {
  background: none;
  color: #3C2E32;
  padding: 0;
  position: relative;
  font-weight: 900;
  font-size: 15px; }
  .articel-block .btn.btn-default::after {
    content: '';
    width: 57.61px;
    height: 3.36px;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(/img/product/krisprolls-line.svg);
    background-repeat: no-repeat; }

.articel-block .asideimages img {
  margin-bottom: 50px; }
  @media (min-width: 768px) {
    .articel-block .asideimages img {
      margin-bottom: 0; } }

.instagram-section__head__subheadings {
  display: none !important; }

.footer-nav {
  border: none;
  background-color: #F5F5F5; }

.spotlight-grid .block-spotlight {
  border-radius: 40px 40px 0 0;
  margin-bottom: 0; }
  .spotlight-grid .block-spotlight:hover {
    background-color: #fff; }
    .spotlight-grid .block-spotlight:hover + .block-spotlight-link {
      background-color: #fff;
      opacity: 1; }

.spotlight-grid .block-base-title {
  margin-bottom: 50px; }

.spotlight-grid .block-spotlight-image {
  padding: 40px 20px 0 20px; }
  .spotlight-grid .block-spotlight-image img {
    border-radius: 50%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }

.spotlight-grid .block-spotlight-link {
  position: relative;
  border-radius: 0 0 40px 40px;
  background-color: transparent;
  padding: 30px 0 45px 0;
  margin: 0 7px;
  opacity: 0; }
  .spotlight-grid .block-spotlight-link::after {
    content: '';
    width: 57.61px;
    height: 3.36px;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(/img/product/krisprolls-line.svg);
    background-repeat: no-repeat; }
  .spotlight-grid .block-spotlight-link a {
    display: block;
    text-align: center;
    color: #000; }

.spotlight-grid .block-spotlight-title {
  margin-top: 20px;
  color: #000; }

.spotlight-grid .block-spotlight-description {
  max-width: 80%;
  margin: 0 auto; }

#recipe-page-wrapper {
  padding-top: 40px; }

.breadcrumb-nav-menu-link:after {
  float: none; }
  @media (min-width: 768px) {
    .breadcrumb-nav-menu-link:after {
      float: right; } }
