/*********************
Breakpoints
*********************/
/*********************
COLORS
*********************/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig"; }

#meals-block .meals:before {
  position: absolute;
  content: "";
  top: -50px;
  left: -5%;
  width: 105%;
  height: 80px;
  background: url(../images/svgs/divider-blue.svg) no-repeat top;
  background-size: 100% 100%;
  pointer-events: none; }
  @media (min-width: 1024px) {
    #meals-block .meals:before {
      top: -90px;
      height: 120px; } }
  @media (min-width: 1340px) {
    #meals-block .meals:before {
      top: -80px; } }

/******************
Grids
******************/
.grid-col-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .grid-col-2 > * {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    padding: 24px 12px; }
    @media (min-width: 768px) {
      .grid-col-2 > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        padding: 12px 24px; } }
    @media (min-width: 1024px) {
      .grid-col-2 > * {
        padding: 12px 32px; } }

.grid-col-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  .grid-col-3 > * {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    padding: 24px 12px; }
    @media (min-width: 768px) {
      .grid-col-3 > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 50%;
        flex: 1 0 50%;
        padding: 12px 24px; } }
    @media (min-width: 1024px) {
      .grid-col-3 > * {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 33%;
        flex: 1 0 33%;
        padding: 12px 32px; } }

.slick-slider .slick-slide {
  outline: none; }

.slick-slider .slick-dots li {
  margin: 0 1em; }
  .slick-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    background-color: #fff;
    color: transparent; }
  .slick-slider .slick-dots li button:before {
    width: 15px;
    height: 15px;
    border-radius: 30px;
    opacity: 1;
    background-color: transparent;
    border: 2px solid #fff;
    color: transparent; }

#meals-block .meals {
  padding: 32px 12px;
  position: relative;
  background-color: #f2cf51;
  color: #000000;
  width: 100vw;
  left: calc(-50vw + 50%);
  text-align: center; }
  .acf-block-preview #meals-block .meals {
    width: 100%;
    left: 0; }
  @media (min-width: 768px) {
    #meals-block .meals {
      padding: 70px 12px; } }
  @media (min-width: 1024px) {
    #meals-block .meals {
      padding: 64px 12px; } }
  #meals-block .meals:before {
    background: url(../../images/svgs/divider-yellow.svg) no-repeat top;
    background-size: 100% 100%; }
  #meals-block .meals__welcome {
    display: none;
    position: absolute;
    top: -20%;
    right: 8%;
    margin: 0; }
    @media (min-width: 768px) {
      #meals-block .meals__welcome {
        display: block; } }
    @media (min-width: 1340px) {
      #meals-block .meals__welcome {
        right: 10%; } }
  #meals-block .meals__title {
    margin-bottom: 6px; }
    @media (min-width: 1024px) {
      #meals-block .meals__title {
        font-size: 36px; } }
  #meals-block .meals__subtitle {
    font-style: italic;
    font-size: 20px;
    margin-bottom: 24px; }
    #meals-block .meals__subtitle strong {
      font-family: "din-condensed", sans-serif;
      font-size: 24px;
      font-style: normal; }
  #meals-block .meals__grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    #meals-block .meals__grid .item {
      -webkit-box-flex: 1;
      -ms-flex: 1 0 50%;
      flex: 1 0 50%;
      padding: 16px 0;
      position: relative; }
      @media (min-width: 768px) {
        #meals-block .meals__grid .item {
          -webkit-box-flex: 1;
          -ms-flex: 1 0 50%;
          flex: 1 0 50%;
          padding: 10px 36px; }
          #meals-block .meals__grid .item:nth-child(2) {
            border-right: none; }
          #meals-block .meals__grid .item:last-child {
            padding-left: 0;
            margin-top: 12px; } }
      @media (min-width: 1024px) {
        #meals-block .meals__grid .item {
          -webkit-box-flex: 1;
          -ms-flex: 1 0 33%;
          flex: 1 0 33%;
          padding: 10px 56px; }
          #meals-block .meals__grid .item:last-child {
            padding-left: 56px;
            margin-top: 0; } }
      #meals-block .meals__grid .item:first-child {
        padding-left: 0; }
      #meals-block .meals__grid .item:last-child {
        padding-right: 0; }
      #meals-block .meals__grid .item .icon {
        max-width: 74px; }
      #meals-block .meals__grid .item h2 {
        font-family: "proxima-nova", sans-serif; }
        @media (min-width: 768px) {
          #meals-block .meals__grid .item h2 {
            font-size: 36px; } }
      #meals-block .meals__grid .item h3 {
        font-family: "din-condensed", sans-serif;
        font-size: 35px;
        line-height: normal;
        color: #000000;
        margin-bottom: 0; }
        @media (min-width: 768px) {
          #meals-block .meals__grid .item h3 {
            font-size: 45px; } }
        @media (min-width: 1024px) {
          #meals-block .meals__grid .item h3 {
            font-size: 60px; } }
      #meals-block .meals__grid .item p {
        font-family: "din-condensed", sans-serif; }
        @media (min-width: 1024px) {
          #meals-block .meals__grid .item p {
            font-size: 24px; } }
      #meals-block .meals__grid .item a:not(.btn) {
        color: #f2cf51;
        font-weight: 500; }
  #meals-block .meals__text {
    margin-top: 24px;
    font-size: 20px; }

/*# sourceMappingURL=meals.css.map */