@charset "utf-8";
/*
Red:    #DA364C   218, 54, 76
Orange: #F6A81E   246, 168, 30
Blue:   #A2D45E   0, 175, 162
Yellow: #FBFAEF   251, 250, 239
*/
#hero {
  position: relative;
  background-color: #DA364C;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 20vh 0 30vh 0;
  display: block;
}
#hero p {
  font-family: "new-spirit", serif;
  font-size: 3rem;
  line-height: 3.2rem;
  color: #FFF;
  font-weight: 700;
}
/*-------------------------------------*/
.favorites {
  overflow: hidden;
  padding: 48px 0 36px 0;
  background-color: #F6A81E;
  background-image: url('/media/static/images/waffle-pattern2.svg');
  -webkit-background-size: 110%;
  -moz-background-size: 110%;
  -ms-background-size: 110%;
  -o-background-size: 110%;
  background-size: 110%;
  background-position: center center;
  color: #FFF;
  text-align: center;
}
.favorites h2 {
  font-family: "new-spirit", serif;
  font-size: 3rem;
  line-height: 3.2rem;
  color: #FFF;
  font-weight: 700;
}
.favorite {
  width: 22%;
  float: left;
  margin: 0 1.5% 18px 1.5%;
  font-family: "new-spirit", serif;
  font-size: 1.1rem;
  line-height: 1.2rem;
  font-weight: 700;
  color: #FFF;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}
.favorite > div {
  width: 100%;
  padding: 0 0 100% 0;
  margin: 0 0 12px 0;
  background-color: #FFF;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 300px;
  border: 2px solid #FFF;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
}
.favorite > div:hover, .favorite > div:focus {
  -webkit-transform: scale(0.99);
  -moz-transform: scale(0.99);
  -ms-transform: scale(0.99);
  -o-transform: scale(0.99);
  transform: scale(0.99);
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
.favorite span {
  display: block;
  min-height: 80px;
}
/*-------------------------------------*/
.flavors {
  overflow: hidden;
  background-color: #FBFAEF;
  color: #333;
  padding: 36px 0 36px 0;
}
.flavors h2 {
  margin: 36px 0 12px 0;
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: #A2D45E;
  font-weight: 800;
  text-transform: uppercase;
}
.flavors p.intro {
  font-family: "new-spirit", serif;
  font-size: 3rem;
  line-height: 3.2rem;
  color: #DA364C;
  font-weight: 700;
}
.featured {
  display: block;
  width: 70%;
  padding: 0 0 70% 0;
  margin: 0 auto 18px auto;
  background-color: #FFF;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 300px;
  border: 2px solid #FFF;
  -webkit-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.3);
}
.featured:hover, .featured:focus {
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
/*-------------------------------------*/
.ourStory {
  overflow: hidden;
  background-color: #F6A81E;
  -webkit-background-size: 110%;
  -moz-background-size: 110%;
  -ms-background-size: 110%;
  -o-background-size: 110%;
  background-size: 110%;
  background-position: center center;
  color: #FFF;
  position: relative;
}
.ourStory h2 {
  font-family: "new-spirit", serif;
  font-size: 3.0rem;
  line-height: 3.2rem;
  color: #FFF;
  font-weight: 700;
}
.sectText1 {
  width: 50%;
  float: left;
}
.sectText2 {
  width: 452px;
  padding: 48px 48px 96px 0;
  float: right;
}
.sectHero {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 450px;
  width: 50%;
  float: left;
}
@media only screen and (max-width: 549px) {
  #hero {
    padding: 20vh 0 5vh 0;
  }
  #hero p {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
  .flavors {
    text-align: center;
  }
  .favorite {
    width: 44%;
  }
  .sectText1 {
    width: 100%;
  }
  .sectText2 {
    width: 80%;
    padding: 48px 5% 48px 5%;
    margin: 0 0 0 0;
  }
  .sectHero {
    width: 100%;
    min-height: 200px;
  }
}