*{
  -webkit-font-smoothing: antialiased;
}

.cyan{
  color: #00B6B6;
}

.teal{
  color: #008C8C;
}

.darkteal{
  color: #004D4D;
}

.darkblue{
  color: #32637C;
}

.white{
  color: #fff;
}

.italic{
  font-style: italic;
}

p {
  font-family: Gotham;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: "Barlow Condensed";
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
}

.btn-primary{
  font-family: Barlow;
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  padding: 8px 35px 10px 35px;
  line-height: 1;
  border-radius: 6px;
}

.title h2{
  font-size: 20px;
  font-family: 'Gotham Bold';
  letter-spacing: 2px;
  font-weight: 700;
}

.content-row{
  margin-bottom: 70px;
}

.title-row{
  margin-bottom: 5px;
}

#banner{
  background: url(/wp-content/themes/understrap-child-v2/img/weightloss.jpg) no-repeat center;
  text-align: center;
  background-size: cover;
  padding: 40px 20px;
}

#banner h1{
  font-style: italic;
  font-size: 65px;
}

#banner p{
  color: #004D4D;
  font-weight: 600;
  font-size: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.subpage-block{
  background: #ddd;
  border-radius: 8px;
  padding: 24px 16px;
  margin: 0 10px;
  font-size: 12px;
}

.subpage-block label{
  font-family: 'Gotham Bold';
  margin-bottom: 0;
}

.subpage-block p{
  margin-bottom: 8px;
}

.subpage-block ul{
  padding: 0;
  list-style-position: inside;
}

.subpage-block ul li{
  line-height: 1.2;
  margin-bottom: 8px;
}

.subpage-block button{
  margin-top: 10px;
}

#slimtrim{
  background: url(/wp-content/themes/understrap-child-v2/img/slimtrim.jpg) no-repeat center;
  background-size: cover;
}

#personal{
  background: url(/wp-content/themes/understrap-child-v2/img/personalized.jpg) no-repeat center;
  background-size: cover;
}

#slimtrim label, #personal label{
  font-size: 14px;
}
  
#slimtrim h2, #personal h2{
  font-size: 48px;
}

#slimtrim button, #personal button{
  font-family: 'Barlow Condensed';
}

#slimtrim p, #personal p{
  font-family: 'Gotham Bold';
  line-height: 1.25;
  font-size: 16px;
  max-width: 220px;
  margin: 0 auto;
}

#why-chefgood{
  margin-bottom: 50px;
}

#why-chefgood p{
  font-family: 'Gotham Bold';
  margin-top: 20px;
  font-size: 14px;
}

#reviews{
  background: #32637C;
  padding: 75px 20px;
}

#popular{
  background: url(/wp-content/themes/understrap-child-v2/img/popular-bg.png) no-repeat center;
  background-size: cover;
  padding: 75px 20px 25px 20px; 
}

#popular h2{
  font-size: 24px;
}

.popular-text{
  display: flex;
  align-items: center;    
}

#popular p{
  font-size: 24px !important;
  font-family: 'Barlow Condensed';
  font-weight: 600;
  color: #004D4D;
  margin-top: 20px;
  line-height: 1.3;
  text-shadow: 1px 2px #fff;
  width: 75%;
  margin: 20px auto 0 auto;
}

#popular img{
  width: 65%;
}

#reviews p{
  line-height: 1.3;
  font-weight: 600;
}

#reviews img{
  margin-bottom: 10px;
}

#reviews label{
  font-family: Barlow Condensed;
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
}

.mm40{
  margin-top: -40px;
}


@media (max-width: 1024px){

  #banner{
    background: url(/wp-content/themes/understrap-child-v2/img/ipad-banner.jpg) no-repeat center;
    background-size: cover;
  }

  #banner h1{
    font-size: 48px;
  }

  #banner p{
    font-size: 16px;
    max-width: 400px;
  }

  #slimtrim label, #personal label{
    font-size: 12px;
  }
    
  #slimtrim h2, #personal h2{
    font-size: 36px;
  }

  #slimtrim p, #personal p{
    font-size: 14px;
  }
}

@media (max-width: 767px){

  .title h2, #popular h2{
    font-size: 18px;
  }
  
  #banner h1{
    font-size: 36px;
  }

  #banner p{
    font-size: 14px;
  }

  #slimtrim label, #personal label{
    font-size: 10px;
  }
    
  #slimtrim h2, #personal h2{
    font-size: 32px;
  }

  #slimtrim p, #personal p{
    font-size: 12px;
    padding-top: 10px !important;
  }

  .btn-primary{
    font-size: 16px;
    padding: 4px 20px 6px 20px;
  }

  .subpage-block label{
    font-size: 10px;
  }

  #why-chefgood img{
    float: left;
  }

  #why-chefgood > div{
    text-align: left !important;
    border-bottom: 1px solid #00B6B6;
    margin-bottom: 15px;
    padding-top: 0px;
    margin-left: 15px;
    margin-right: 15px;
  }

  #why-chefgood > div:last-child{
    border-bottom: 0px !important;
  }

  #why-chefgood h3{
    margin-top: 15px;
  }

  #why-chefgood p{
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .popular-text p{
    font-size: 14px !important;
  }

  .mm40{
    margin-top: 0px;
  }

  #reviews p{
    font-size: 14px;
  }
}

@media (max-width: 600px){
  div#main-content{
    padding-top: 3rem !important;
  }

  #banner{
    background: url(/wp-content/themes/understrap-child-v2/img/wl-banner-mob.png) no-repeat center;
    text-align: left;
    background-size: cover;
    min-height: 320px;
  }

  #banner h1{
    color: #fff;
    margin-top: 80px;
    font-style: italic;
    font-size: 48px;
    text-shadow: 2px 3px #33637E;
    font-weight: 800;
    -webkit-font-smoothing: subpixel-antialiased;
    line-height: 1;
    max-width: 300px;
  }

  #banner p{
    color: #fff;
    font-size: 14px;
    margin-top: 20px;
  }

  #below-banner.mt-5{
    margin-top: 15px !important;
    padding: 0 20px;
  }

  #slimtrim, #personal{
    margin: 5px 3px;
  }

  #slimtrim h2, #personal h2{
    font-size: 28px;
    margin-top: 13px;
    margin-bottom: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    line-height: 1;
  }

  #slimtrim{
    background: url(/wp-content/themes/understrap-child-v2/img/slim-mob.png) no-repeat center;
    background-size: cover;
    height: 280px;
  }

  #personal{
    background: url(/wp-content/themes/understrap-child-v2/img/personalized-mob.jpg) no-repeat center;
    background-size: cover;
    height: 280px; 
  }

  #slimtrim button, #personal button{
    position: absolute;
    bottom: 20px;
    width: 86%;
    left: 7%;
    padding: 9px;
    width: 86%;
  }

  #popular p{
    font-size: 22px !important;
    margin-top: 45px;
    width: auto;
  }

  #popular img{
    width: 50%;
  }

  #popular img.mob-left{
    float: left;
    margin-right: 20px;
  }

  #popular img.mob-right{
    float: right;
    margin-left: 20px;
  }

  #why-chefgood{
    margin-bottom: 30px;
  }

  #why-chefgood img{
    width: 80px;
    height: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 5px;
  }

  #why-chefgood > div{
    padding-right: 10px;
    padding-left: 10px;
  }

  #reviews{
    padding: 50px 20px
  }

  #reviews .mt-4{
    margin-top: 10px !important;
  }

  #reviews h2{
    text-align: left;
    font-size: 16px;
    margin-bottom: 0;
  }
}