/* Scss Document */
/* OCH BLUE #114C88 */
/* OCH GRAY #114C88  */
/* SITE MAIN BLUE $blue */
/* COPY GRAY FONT #808185 */
/* Dark Purple #5A3181 */
/* Kaleida Blue #005b82 */
body {
  background: #fcdf51;
  color: #2e1c16;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  position: relative;
}

h1, h2 {
  color: #2e1c16;
}

h1 {
  font-size: 7rem;
  line-height: 6rem;
  font-family: 'Pacifico', cursive;
}

h2 {
  font-size: 2.4rem;
  line-height: 3.1rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  margin-bottom: 0;
}

h4 {
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

p {
  font-weight: 400;
}

a {
  color: #F7FFF7;
  text-decoration: underline;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
}

.callout {
  font-family: 'Pacifico', cursive;
}

.bg-light {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

@media only screen and (max-width: 768px) {
  body {
    background-image: none;
  }
}

@media only screen and (max-width: 414px) {
  h2 {
    font-size: 2rem;
    line-height: 2.3rem;
  }
  h3 {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }
}

@media only screen and (max-width: 320px) {
  h2 {
    font-size: 1.8rem;
    line-height: 2rem;
  }
}

header nav {
  background: #2e1c16;
  text-align: center;
  z-index: 300;
  text-align: center;
}

header nav .nav-link {
  color: white !important;
  padding: .75rem 2rem !important;
}

header nav .nav-link:hover {
  color: #00c4b3 !important;
}

header nav a {
  text-decoration: none !important;
}

header nav .nav-pills .nav-link.active {
  background-color: #00c4b3 !important;
  color: #2e1c16 !important;
  font-weight: 500;
  border-radius: 0;
}

header nav .navbar-toggler span {
  display: block;
  background-color: #00c4b3 !important;
  height: 3px;
  width: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  position: relative;
  left: 0;
  opacity: 1;
}

header nav .navbar-toggler span:nth-child(1),
header nav .navbar-toggler span:nth-child(3) {
  -webkit-transition: transform .35s ease-in-out;
  -webkit-transition: -webkit-transform .35s ease-in-out;
  transition: -webkit-transform .35s ease-in-out;
  transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
}

header nav .navbar-toggler:not(.collapsed) span:nth-child(1) {
  position: absolute;
  left: 12px;
  top: 10px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  opacity: 0.9;
}

header nav .navbar-toggler:not(.collapsed) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent;
}

header nav .navbar-toggler:not(.collapsed) span:nth-child(3) {
  position: absolute;
  left: 12px;
  top: 10px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 0.9;
}

/*HERO*/
#hero {
  height: 920px;
  position: relative;
  overflow: hidden;
  margin-top: 0px;
  background: url("/images/radial-burst.svg") no-repeat center center/350%;
  /* &::before{
		content: "";
		position: absolute;
		width: 200%;
		height: 400%;
		margin-top:-55%;
		margin-left:-51%;
		background: url('../images/radial-burst.svg') no-repeat center center/350%;
		animation: spin 260s infinite;
		animation-iteration-count: 1;
	}
	@keyframes spin {
		0% {
		  transform: rotate(0deg);
		}
		100% {
		  transform: rotate(360deg);
		}
	  }  */
}

#hero .hero-logo {
  height: 400px;
  width: auto;
}

#hero h1 .welcome-text {
  display: block;
  font-size: 1.5rem;
  line-height: 2.3rem !important;
  text-align: center;
  font-family: "Poppins", sans-serif;
  padding: 0 20%;
}

#intro,
#flavors,
#locations,
#contact {
  padding-top: 7rem;
  padding-bottom: 7rem;
  position: relative;
}

#intro {
  background: #8dd4bd;
  color: #000;
  font-size: 1.7rem;
  text-align: center;
}

#intro a {
  font-weight: 600;
}

#intro .callout {
  font-size: 3rem;
  color: #fcdf51;
}

#intro .lemons1 {
  position: absolute;
  background-size: auto 100%;
  width: 580px;
  height: 260px;
  background-position: bottom 0 right 60px;
  right: 0;
  bottom: -120px;
  background-repeat: no-repeat;
  z-index: 1;
}

.no-webp .lemons1 {
  background-image: url("/images/lemons-sliced.png");
}

.webp .lemons1 {
  background-image: url("/images/lemons-sliced.webp");
}

.no-js .lemons1 {
  background-image: url("/images/lemons-sliced.png");
}

.callout {
  font-size: 3rem;
  color: #fcdf51;
}

#flavors {
  background: #FF6B6B;
}

#flavors .description {
  font-style: italic;
}

#flavors .lemons2 {
  position: absolute;
  background-size: 100% auto;
  width: 600px;
  height: 550px;
  background-position: bottom 0 left -60px;
  left: 0;
  bottom: -260px;
  background-repeat: no-repeat;
  z-index: 1;
}

.no-webp .lemons2 {
  background-image: url("/images/lemons2.png");
}

.webp .lemons2 {
  background-image: url("/images/lemons2.webp");
}

.no-js .lemons2 {
  background-image: url("/images/lemons2.png");
}

#locations a .icon {
  font-size: 50px;
  color: #2e1c16;
  padding: 0 .5rem;
}

#locations a .icon:hover {
  color: #FF6B6B;
}

#locations a {
  color: #288F88;
}

#locations a:hover {
  color: #FF6B6B;
}

#locations .callout {
  font-size: 2.6rem;
  color: #FF6B6B;
}

#locations .month {
  text-transform: uppercase;
  margin-bottom: 1rem;
}

#contact {
  background: #00c4b3;
  padding-top: 190px;
  padding-bottom: 170px;
}

footer {
  padding: 1rem 0 0 0;
  font-size: 14px;
  background: #2e1c16;
  color: white;
  text-align: center;
}

@media only screen and (max-width: 2010px) {
  #flavors .lemons2 {
    width: 500px;
    bottom: -220px;
  }
}

@media only screen and (max-width: 1800px) {
  #hero {
    height: 800px;
    background: url("/images/radial-burst.svg") no-repeat center center/550%;
    margin-top: 38px;
  }
  #hero .hero-logo {
    height: 350px;
    width: auto;
    margin-top: 3rem;
  }
  #hero h1 .welcome-text {
    display: block;
    font-size: 1.5rem;
    line-height: 2rem !important;
    text-align: center;
    font-family: "Poppins", sans-serif;
    padding: 0 20%;
  }
  #intro .lemons1 {
    width: 450px;
    height: 240px;
    right: 30px;
    bottom: -120px;
  }
  #flavors .lemons2 {
    width: 400px;
    bottom: -180px;
    background-position: bottom 0 left -50px;
  }
}

@media only screen and (max-width: 1250px) {
  #flavors .lemons2 {
    width: 400px;
    bottom: -180px;
    background-position: bottom 0 left 0px;
    margin-left: 0;
    left: auto;
    right: 0;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

@media only screen and (max-width: 1024px) {
  #intro .lemons1 {
    width: 350px;
    height: 200px;
    right: 30px;
    bottom: -90px;
  }
}

@media only screen and (max-width: 992px) {
  #intro .lemons1 {
    width: 350px;
    height: 190px;
    background-position: bottom 0 right 0;
    right: 30%;
    bottom: -100px;
  }
  #flavors .lemons2 {
    width: 290px;
    bottom: -150px;
  }
}

@media only screen and (max-width: 768px) {
  .container {
    padding-left: 6%;
    padding-right: 6%;
    margin: 0;
    max-width: 100%;
  }
  #hero {
    height: 600px;
    background: url("/images/radial-burst.svg") no-repeat center center/550%;
    margin-top: 38px;
  }
  #hero .hero-logo {
    height: 300px;
    width: auto;
    margin-top: 3rem;
  }
  #hero h1 {
    font-size: 6em;
  }
  #hero h1 .welcome-text {
    padding: 0;
  }
  #intro,
  #flavors,
  #locations,
  #contact {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  #intro {
    font-size: 1.3rem;
    padding-bottom: 6rem;
  }
  #intro .lemons1 {
    width: 300px;
    height: 150px;
    background-position: bottom 0 right 0;
    right: 30%;
    bottom: -60px;
  }
}

@media only screen and (max-width: 630px) {
  #intro .lemons1 {
    width: 250px;
    height: 150px;
    right: 0;
    background-position: bottom 0 right 0;
    right: 28%;
    bottom: -60px;
  }
  #flavors .lemons2 {
    width: 270px;
    bottom: -130px;
    background-position: bottom 0 right 30px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
  }
}

@media only screen and (max-width: 414px) {
  #hero {
    height: 560px;
  }
  #hero .hero-logo {
    height: 260px;
    width: auto;
    margin-top: 2rem;
  }
  #hero h1 {
    font-size: 5rem;
    line-height: 5rem;
  }
  #hero h1 .welcome-text {
    font-size: 1.4rem;
    line-height: 1.8rem !important;
    text-align: center;
    font-family: "Poppins", sans-serif;
  }
  #intro .lemons1 {
    width: 270px;
    height: 150px;
    background-position: bottom 0 right 0;
    right: 18%;
    bottom: -50px;
  }
  #flavors .lemons2 {
    width: 250px;
    bottom: -110px;
  }
  .callout {
    font-size: 2.2rem;
  }
  #locations .callout {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 375px) {
  #flavors .lemons2 {
    display: none;
  }
}

@media only screen and (max-width: 320px) {
  #intro .lemons1 {
    width: 270px;
    height: 140px;
    background-position: bottom 0 right 0;
    right: 10%;
    bottom: -50px;
  }
}
/*# sourceMappingURL=styles.css.map */