body {
    color: #505050;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'gotham', sans-serif;
}
h1 {
    color: #51dcd5;
    font-size: 3em;
    line-height: 1;
    margin: 0;
}
h1.h2 { font-size: 2em; }
h2 { font-size: 2em; line-height: 1; }
h3 { font-size: 2.15em; line-height: 1; }
h5 {
    font-size: 1.15em;
    line-height: 1.25;
    font-weight: 500;
    font-style: italic;
    margin-top: 4px;
}

.slide-right h1 {
  left: 10%;
  top: 5%;
}

.slide-left h1 {
  left: 55%;
  top: 5%;
  max-width: 45%;
}
.slick-slide img {
    max-width: 100%;
}

.intro strong {
    color: #fea438;
    font-size: 1.1em;
}

#bios {
    padding-bottom: 4.375em;
}

/* Video Slider */

#videos .container {
    padding-top: 4.25em;
    padding-bottom: 3.375em;
    border-top: 3px solid rgba(211,233,250,1);
}

.slider.videos a::before {
  content: "";
  background: url("../img/play-button.svg") no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  Left: calc(50% - 25px);
  opacity: 0.6;
  transition: all 100ms ease;
}
.slider.videos a:hover::before {
  transform: scale(1.1);
  opacity: 0.8;
  transition: all 200ms ease;
}
.video-slider-caption {
  text-align: center;
  padding: 2em;
  max-width: 1000px;
  margin: auto;
}
#videos img,
#recipes img {
    width: 100%;
}

/* FAQ */

.faq-wrapper {
  background: rgba(211,233,250,1);
  width: 100%;
  padding-bottom: 1em;
}
.faq-wrapper .container {
  overflow: visible;
}

.faq {
  display: flex;
}

.one-third {
  width: 40%;
}

.two-thirds {
  width: 60%;
}

.faq-header {
  padding: 5em;
}

.faq-wrapper h2, .faq-wrapper p {
  margin: 0;
  padding-top:0;
}

.big-q p {
  background: url("../img/big-q.svg") no-repeat;
  background-position: center center;
  background-size: contain;
  padding: 2em;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  line-height: 1.25;
  font-size: 1.5em;
  max-width: 300px;
  margin: auto;
}

.faq-expanded {
  padding-top: 4em;
  display:none;
  margin: auto;

}


.faq-question {
  margin: 0 auto 2em auto;
  position: relative;
  overflow: visible;
  padding: 3em 3em 2.25em 3em;
  background: rgba(255,255,255,0.7);
  max-width: 1000px;
  /*border-left: 4px solid rgba(255,255,255,0.75);*/
}

/*.faq-question::before {
  content:"";
  background: url("../img/big-q.svg") no-repeat;
  background-size: contain;
  position: absolute;
  opacity: 0.75;
  width: 50px;
  height: 50px;
  left: -4em;
  top: 0;
  z-index: 0;
  display: block;
}*/

.faq-toggle {
  text-align: center;
  text-transform: uppercase;
  width: 100px;
  margin: -2em auto 0 auto;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.faq-toggle::after {
  content: "";
  background: url("../img/arrow-drk-blue.svg") center center no-repeat;
  background-size: 80%;
  width: 70px;
  height: 50px;
  position: absolute;
  bottom: -2.2em;
  left: 50%;
  transform: translateX(-50%);
  transition: 200ms ease;
}

.faq-toggle.open::after {
  transform: rotate(180deg) translateX(50%);
  transition: 200ms ease;
}

.faq-toggle .less {
  display: none;
}

.faq-toggle.open .more {
  display: none;
}

.faq-toggle.open .less {
  display: block;
}

/* Recipes */

#recipes .container {
    text-align: center;
    padding-top: 3em;
    padding-bottom: 7.5em;
    border-top: 3px solid rgba(211,233,250,1);
}
.recipes {
  padding: 2.25em 0 0 0;
}

.recipes img {
  max-width: 398px;
  margin: auto;
}

.lity-content {
    padding: 20px;
}
.recipe-pop {
  position: relative;
  max-width: 1400px;
  margin: auto;
}
.recipe-pop aside {
    position: relative;
    min-height: 200px;
    overflow: hidden;
}
.recipe-pop aside img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.recipe-pop article {
    position: relative;
    padding: 3% 2.5% 1%;
    color: #787878;
    font-family: 'Jost', sans-serif;
    background-color: #fff;
}
.recipe-pop .serve {
    position: absolute;
    top: 35px;
    right: 2.5%;
    width: 89px;
    text-align: center;
}
.serve span {
    display: block;
    color: #231f20;
    font:500 1em/1.15 'gotham', sans-serif;
    letter-spacing: -.025em;
    text-transform: uppercase;
    margin: 8px -6px 0;
}

.recipe-pop h1 {
  color: #505050;
  font-family: 'Jost', sans-serif;
  font-size: 1.75em;
  line-height: .85;
  font-weight: 500;
}
.recipe-pop h3 {
  color: #787878;
  font-family: 'Jost', sans-serif;
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0.5em 0 0.25em;
}

.recipe-pop p {
    padding: 0 0 0.75em;
}
.recipe-pop ul,
.recipe-pop ol {
    padding: 0 0 1.5em 2.25em;
}
.recipe-pop p, .recipe-pop li {
    font-size: 1em;
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -.025em;
}
ul.cols-2 {
    column-count: 2;
    column-gap: 2em;
}
.recipe-pop ol li,
.tips li { margin-bottom: .6em; }
.tips li:last-child { margin-bottom: 0; }
.recipe-pop ol li::marker { font-weight: 500; }

.recipe-pop .col {
  padding: 6em 4em 4em;
  background: url("../img/recipe-bg.jpg") no-repeat;
  background-size: cover;
}

.recipe-pop .directions {
  background-color: rgba(211,233,250,1);
  background-blend-mode: multiply;
}

.footer .container {
    border-top: 3px solid rgba(211,233,250,1);
}


@media screen and (min-width: 768px) {
    h1.h2 { font-size: 2.25em; }
    h2 { font-size: 2.5em; }
    p { font-size: 1.15em; }
    section.intro .container {
        display: flex;
    }
    .recipe-pop aside { width: 40%; }
    .recipe-pop article { width: 60%; }
    .recipe-pop h1 { padding-right: 12%; font-size: 2em; }
    .recipe-pop h3,
    .recipe-pop p, .recipe-pop li { font-size: 1.25em; }
}
@media screen and (min-width: 1024px) {
    h1 { font-size: 3.45em; }
    h1.h2 { font-size: 2.75em; }
    h2 { font-size: 3em; }
    h3 { font-size: 2.5em; }
    h5 { font-size: 1.25em; }
    p { font-size: 1.25em; }
    .videos .slick-list, .bios .slick-list, .recipes .slick-list {
        margin: 0 -1em;
    }
    .videos .slick-slide, .bios .slick-slide, .recipes .slick-slide {
      margin: 0 1em;
    }
    .recipe-pop aside { width: 418px; }
    .recipe-pop article { width: calc(100% - 418px); }
    .recipe-pop h1 { font-size: 2.5em; }
    .recipe-pop h3,
    .recipe-pop p, .recipe-pop li { font-size: 1.45em; }

}
@media screen and (min-width: 1200px) {
    h1 { font-size: 4.5em; }
    h1.h2 { font-size: 3.5em; }
    h2 { font-size: 4em; }
    h3 { font-size: 3em; }
    p { font-size: 1.5em; }
    .recipe-pop article { padding: 3% 5% 1%; }
    .recipe-pop .serve { right: 3.78%; }
    .recipe-pop h1 { font-size: 2.75em; }
    .recipe-pop h3,
    .recipe-pop p, .recipe-pop li { font-size: 1.65em; }
}
@media screen and (min-width: 1600px) {
    .slider h1 { font-size: 100px; }
}

@media screen and (max-width: 1023px) {
    .bio img { margin-bottom: 2em; }
    #recipes .container { padding-bottom: 5em; }
    .recipe-pop ul, .recipe-pop ol { padding: 0 0 1em 2em; }
    .recipe-pop .serve {
        width: 76px;
        top: 18px;
    }
    .serve span {
        font-size: .85em;
        margin-top: 5px;
    }
    .recipe-pop h1 { margin-bottom: .5em; }
}

@media screen and (max-width: 767px) {

    .slick-arrow { display: none !important; }
    section.intro, .faq {
       flex-direction: column;
    }
    .intro { padding: 1em 0; }
    .intro .col {
      width: 100%;
      padding: 1em 0;
    }
    .intro .col+.col { padding-top: 0; }
    #bios,
    #videos .container,
    #recipes .container { padding-bottom: 2em; }
    .bio img { margin-bottom: 1.5em; }
    .faq .col {
      width: 100%;
      text-align: center;
      max-width: 600px;
      margin: auto;
    }
  
    .faq .faq-header {
      padding-top:0;
    }
  
    .recipe-pop .columns, .footer.columns {
        flex-direction: column;
    }
    .recipe-pop .col, .footer .col {
        width: 100%;
        text-align: left;
    }
    .recipe-pop article {
        padding: 6% 10px 1%;
    }
    .recipe-pop .serve {
        top: auto;
        bottom: 101%;
        right: 5px;
        width: 70px;
        background-color: rgba(255,255,255,0.55);
    }
    .serve span { font-size: .75em; margin-top: 3px; }
    .recipe-pop ul, .recipe-pop ol { padding: 0 0 1em 1.5em; }
}