@import url("https://use.typekit.net/lkf5rbg.css");
@font-face {
  font-family: 'Spumante Bold';
  src: url('../fonts/Spumante-Bold.eot');
  src: url('../fonts/Spumante-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Spumante-Bold.woff2') format('woff2'),
    url('../fonts/Spumante-Bold.woff') format('woff'),
    url('../fonts/Spumante-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.container {width: 100%;max-width: 1370px;margin: 0 auto;}
a.cta {background-color: #cf1014;color: #fff;height: 57px;line-height: 57px;font-size: 18px;border-radius: 38px;padding: 0 38px;display: inline-block;font-weight: bold;}
a.cta:hover {color: #fff;}

#custom-cookie-hero {background-color: #e8f4fc;position: relative;padding-top: 30px;margin-bottom: 30px;margin-top: 47px;}
#custom-cookie-hero .hero-text {text-align: center;margin-bottom: 1rem;position: relative;z-index: 2;}
#custom-cookie-hero::after {content: '';position: absolute;left: 0;right: 0;height: 95px;bottom: -92px;background-image: url('../images/photo-cookies-wave-blue.png');background-size: cover;background-position: center bottom;z-index: -1;}
#custom-cookie-hero h1 {font-family: 'BasicSansSF-Bold';color: #333333;text-shadow: 0px 7px 1px rgba(0, 0, 0, 0.15);line-height: 1;margin-bottom: 1rem;font-size: 58px;}
#custom-cookie-hero h1 span {font-family: 'Spumante Bold';color: #cf1014;display: block;padding-top:30px;font-size:120px}
#custom-cookie-hero p {font-family: 'BasicSansRegular';line-height: 1.3076;font-size: 18px;color: #363636;max-width: 756px;margin: 0 auto;}
@media screen and (min-width: 360px ) {
  #custom-cookie-hero h1 {font-size: 50px;}
}
@media screen and (min-width: 480px ) {
  #custom-cookie-hero h1 {font-size: 70px;}
}
@media screen and (min-width: 600px ) {
  #custom-cookie-hero h1 {font-size: 100px;}
}
@media screen and (min-width: 768px ) {
  #custom-cookie-hero {margin-bottom: 50px;}
  #custom-cookie-hero h1 {font-size: 40px;}
  #custom-cookie-hero .container {display: flex;justify-content: center;}
  #custom-cookie-hero .hero-text {margin-bottom: 0;text-align: center;margin-top:100px}
  #custom-cookie-hero::after {height: 225px;bottom: -206px;}
}
@media screen and (min-width: 992px ) {
  #custom-cookie-hero {margin-bottom: 37px;}
  #custom-cookie-hero h1 {font-size: 92px;margin-bottom:0}
  #custom-cookie-hero p {margin-bottom: 45px;font-size: 26px;}
  
  a.cta {height: 76px;line-height: 76px;font-size: 27px;}
}

@media screen and (max-width: 1400px ) {
  #custom-cookie-hero h1 {font-size:63px}
  #custom-cookie-hero h1 span {font-size:100px}

}

@media screen and (max-width: 767px ) {
  #custom-cookie-hero h1 {font-size:63px}
  #custom-cookie-hero h1 span {font-size:100px}
}

@media screen and (max-width: 600px ) {
  #custom-cookie-hero h1 {font-size:50px}
  #custom-cookie-hero h1 span {padding-top:10px;font-size:60px}
}

@media screen and (max-width: 480px ) {
  #custom-cookie-hero .hero-text p br{display:none}
}

@media screen and (max-width: 360px ) {
  #custom-cookie-hero h1 {font-size:40px}
  #custom-cookie-hero h1 span {padding-top:5px;font-size:50px}
}

#custom-cookies {position: relative;}
#custom-cookies .inner {justify-content: center;gap: 50px;}
#custom-cookies .inner .item {flex-basis: calc(100% / 3);text-align: center;display: flex;flex-direction: column;justify-content: space-between;z-index: 2;position: relative;}
#custom-cookies .inner .top {height: 100%;display: flex;align-items: center;justify-content: center;}
#custom-cookies .inner .item img {display: block;max-height: 320px;margin: 0 auto;}
#custom-cookies .item-title {color: #333;font-size: 40px;line-height: 1.45em;font-family: 'BasicSansSF-Bold';margin-bottom: 34px;}
#custom-cookies a.cta {height: 67px;line-height: 67px;padding: 0 70px;}
@media screen and (max-width: 992px ) {
  #custom-cookies .item-title {font-size: 36px;}
}
@media screen and (max-width: 768px ) {
  #custom-cookies .inner {flex-wrap: wrap;}
  #custom-cookies .item-title {font-size: 28px;}
  #custom-cookies .inner .item {flex-basis: 100%;}
  #custom-cookies .inner .item img {max-height: 190px}
}

.crumbles1 {position: absolute;content: '';background-image: url('../images/cookie-crumbles-3.png');background-repeat: no-repeat;background-position: center;background-size: cover;left: -68px;bottom: 50%;width: 298px;height: 558px;z-index: 1;}
.crumbles2 {position: absolute;content: '';background-image: url('../images/cookie-crumbles-4.png');background-repeat: no-repeat;background-position: center;background-size: cover;right: -199px;bottom: 6%;width: 476px;height: 631px;z-index: 1;}
.crumbles5 {position: absolute;content: '';background-image: url('../images/cookie-crumbles-5.png');background-repeat: no-repeat;background-position: center;background-size: cover;left: -287px;width: 390px;height: 237px;z-index: 1;}
@media screen and (min-width: 992px ) {
  .crumbles1 {left: -28px;bottom: 6%;}
  .crumbles2 {bottom: -12%;right: -179px;}
  .crumbles5 {left: -7px;}
}
@media screen and (min-width: 1400px ) {
  .crumbles1 {left: 3%;bottom: 6%;}
  .crumbles2 {right: -1%;bottom: -3%;}
}

@media screen and (max-width: 768px ) {
  .crumbles1 {transform: translateY(4%);left: -198px;}
  .crumbles2 {transform: translateY(80%);right: -179px;}
}

#contact {background-image: url('../images/custom-cookie-contact-bg.png');background-position: center top;background-size: contain;background-repeat: no-repeat;margin-top: 50px;text-align: center;margin-bottom: 50px;}
#contact .container {display: flex;flex-direction: column;justify-content: center;}
#contact h2 {margin-bottom:10px;color: #333333;font-family: 'BasicSansSF-Bold';line-height: 1.2;font-size: 36px;}
#contact p {font-family: 'BasicSansRegular';line-height: 1.3076;font-size: 18px;color: #333333;}
#contact .contact-text a:not(.cta) {color: #cf1014;text-decoration: underline;font-weight: bold;}
#contact .contact-text p {margin-bottom:12px}
#contact .contact-text {margin-bottom: 30px;}
#contact .cta {margin-top:15px}
@media screen and (min-width: 768px ) {
  #contact {padding: 50px 0;}
  #contact h2 {font-size: 42px;}
  #contact .contact-image {text-align: right;flex: 1 0 30%;}
  #contact .contact-text {text-align: left;flex: 1 0 50%;margin-bottom: 0;position: relative;order: 2;}
  #contact .contact-text p {max-width: 458px;font-size: 22px;line-height: 33px;}
  #contact .cta {padding: 0 50px;}
  #contact {background-position: center center;}
  #contact .container {flex-direction: row;gap: 0 55px;align-items: center;}
}
@media screen and (min-width: 992px ) {
  #contact {margin-top: 174px;margin-bottom: 240px;padding: 100px 0;}
  #contact h2 {font-size: 69px;}
  #contact p {font-size: 22px;}
  #contact .cta {padding: 0 100px;}
}
@media screen and (max-width: 768px ) {
  #contact .contact-image img {max-height: 240px;}
  #contact br {display: none;}
}
#seo-banner{
  overflow: hidden;
}
#seo-banner .container{
  padding: 37px 15px 54px;
}
#seo-banner .seo-text{
  flex-basis: 60%;
  flex-grow: 0;
}
#seo-banner h2{
  font-family: 'Spumante Bold';
  color: #3d9ef0;
  font-size: 70px;
  line-height: 1;
  margin: 7px 0 12px;
}
#seo-banner p{
  font-family: basic-sans, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  line-height: 1.3;
  color: #231f20;
}
#seo-banner .seo-graphic{
  position: relative;
  align-self: center;
  align-items: center;
}
#seo-banner img.graphic{
  position: absolute;
  left: 0;
  max-width: inherit;
}
@media screen and (max-width: 767px) {
  #seo-banner .seo-text{
    flex-basis: 100%;
  }
  #seo-banner .seo-graphic{
    display: none;
  }
}
@media screen and (max-width: 567px){
  #seo-banner h2{
    font-size: 50px;
  }
  #seo-banner p{
    font-size: 14px;
  }
}