/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* New Bootsrap */
body {
	 background-color: rgb(253, 230, 241);
	font-family: 'Roboto', sans-serif;
	width: 100%;
	margin: auto;
}

#mainNavbar {
	font-size: 1rem;
	font-weight: 400;  
}

#mainNavbar {
	width: 100%;
	margin: auto;
	background: #ce3493;
	background: #ffc6ea;
}

#mainNavbar.scrolled {
	background: #efc6ff;
	transition: background 500ms;
}

#mainNavbar .nav-link {
	color: #ce3493;
	font-size: 1.1rem;
	padding-left: 1rem;
	padding-bottom: 1rem;
}

#mainNavbar .nav-link:hover {
	color: #9634ce;
	transform: scale(1.015);
	transition: .5s;
}

#mainNavbar .navbar-brand {
	color: #ce3493;
	font-size: 1.5rem;
	padding-left: 1.5rem 5rem 1rem 0;
}


#cart:hover {
	color: #9634ce;
	transform: scale(1.05);
	transition: .5s;
}

#cart {
	color: #ce3493;
	padding-bottom: .5rem;
}

.title {
	color:#a234ce;
}

#headingGroup span {
	color: #ce3493;
	
}

#headingGroup {
	padding-bottom: 2rem;
}


#headingGroup h1 {
	font-family: 'Ole', cursive;
	font-size: 5.5rem;
	margin: auto;
	text-align: center;
	padding: 4.5rem 2rem 3rem 0rem;
	text-shadow: 1px 1px #ceb1ce;
}

.blurb h2 {
	color: #ce3493;
	font-weight: 400;
	font-size: 2.4rem;
	padding-bottom: 1.5rem;
 }
 
 .blurb p {
	 color: #9634ce;
	 font-weight: 300;
	 font-size: 1.3rem;
	 line-height: 2rem;
	 padding-bottom: 2rem;
 }

 .content {
	 margin-top: 100px;
	 margin-bottom: 100px;
 }

footer {
	width: 100%;
	background-color: #ffc6ea;
	padding: 2rem 0 2rem 0;
}

footer ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

footer ul {
 padding: 1.5rem 0 1.5rem 0;
}

.footer-links {
	text-decoration: none;
	color: #ce3493;
}

.footer-links:hover {
	text-decoration: none;
	color: #9634ce;
}

.sub-footer {
	display: flex;
	flex-direction: column;
	align-items:center;
	padding-top: 1.5rem;
}

.sub-footer p {
	padding: .5rem 0rem .5rem 0rem;
	font-size: .8rem;
}

.sub-footer a {
	color: #9634ce 
}


#menu-section {
margin-top: 4rem;
}

#menu-section h1 {
	padding: 1rem 0rem 2.5rem 0rem;
	width: 100%;
	margin: auto;
	text-align: center;
  font-family: 'Ole', cursive;
		font-size: 5.5rem;
		line-height: 7rem;
		margin: auto;
		text-align: center;
		color: #ce3493;
		text-shadow: 1px 1px #ceb1ce;
		margin-top: 2rem;
		}
	

#menu-container {
justify-content: center;

}

.menu-box {
	background-color: rgb(255, 255, 255);
}


.health-container-1 {
padding: .4rem 2rem .4rem 2rem;
border-radius: 10%;
}
.health-container-2 {
	padding: 2rem 2rem;
	border-radius: 10%;
	}
	

.health-img {
	margin: auto;
	width: 100%;
	padding-top: 2rem;
}

#health-title h1{
	font-family: 'Ole', cursive;
	font-size: 5.4rem;
	color: #ce3493;
	margin: auto;
	text-align: center;
	padding: 0rem 0rem 3rem 0rem;
	/* border: green 2px solid; */
	text-shadow: 1px 1px #ceb1ce;
	margin-top: 3rem;
}
	
	#health-title img {
		padding: 0 0 3rem 0;
}

.health-text h2 {
	font-size: 1.5rem;
	color: #ce3493;
	font-weight: 400;
	line-height: 1.8rem;
	padding-bottom: 2rem;
  text-align: center;
}

.health-text h3 {
	font-size: 1.5rem;
	color: #34ce55;
	font-weight: 400;
	line-height: 1.8rem;
	padding: 1rem 0 0rem 0;
}

.health-text p {
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.8rem;
	padding: 1rem 0 1rem 0;
}

.cust {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cust p {
	font-size: 1.1rem;
	line-height: 1.8rem;
	padding: 1rem 0 2rem 0;
	text-align: center;
	font-weight: 300;
}

.cust-title {
	font-size: 1.6rem;
	color: #ce3493;
	font-weight: 400;
	padding: 3rem 0;
	text-align: center;
	line-height: 2.5rem;
}

.first-cust {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.second-cust {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* About Styles */


#about-title h1 {
		font-family: 'Ole', cursive;
		font-size: 5.5rem;
		color: #ce3493;
		margin: auto;
		text-align: center;
		padding: 1.5rem 0rem 0rem 0rem;
		text-shadow: 1px 1px #ceb1ce;
		margin-top: 5rem;
	}

#contact h2 {
	font-size: 2.5rem;
	color: #ce3493;
}

#contact h3 {
	font-size: 2rem;
	color:#9634ce;
	padding: 1.5rem 0;
}

#contact p {
font-weight: 500;
color: rgb(71, 70, 70);
}


#directions iframe {
	width: 100%;
}

#story {
	padding: 0;
	margin: 0;
}


#story h2{
  font-size: 2rem;
}

#story p{
  font-size: 1.4rem;
}


/* Form Styles */
* {
  box-sizing: border-box;
}

body {
  padding: 1rem;
  color: #212d31;
  font-family: 'Roboto', sans-serif;
}

.contain {
  background-color: #efc6ff;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
	margin-bottom: 3rem;
  padding: 1em;
}

div.form {
  background-color: #efc6ff;
}
.contact-wrapper {
  margin: auto 0;
}

.submit-btn {
  float: left;
	/* padding-bottom: 2rem; */
}
.reset-btn {
  float: right;
}

.form-headline:after {
  content: "";
  display: block;
  width: 10%;
  padding-top: 10px;
  border-bottom: 3px solid #ce3493;
}

.form h4 {
	padding-bottom: 1rem;
	font-family: 'roboto', sans-serif;
	font-weight: 500;
	color: #9634ce;
	font-size: 1.5rem;
}

.form h2 {
	padding-bottom: 1rem;
	font-family: 'roboto', sans-serif;
	font-weight: 400;
	color: #3b3b3b;
	font-size: 1rem;
}

#check-email {
 line-height: 1.5rem;
 font-size: 1rem;
 padding-bottom: .5rem;
}

.highlight-text {
  color: #ce3493;
}

.hightlight-contact-info {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
}

.highlight-text-grey {
  font-weight: 500;
}

.email-info {
    margin-top: 20px;
}

::-webkit-input-placeholder { /* Chrome */
  font-family: 'Roboto', sans-serif;
}

.required-input {
  color: black;
}

.contact-form button {
	margin-bottom: 1.1rem;
}

@media (min-width: 600px) {
  .contain {
    padding: 0;
  }
}

h3,
ul {
  margin: 0;
}

h3 {
  margin-bottom: 1rem;
}

.form-input:focus,
textarea:focus{
  outline: 1.5px solid #ce3493;
}

.form-input,
textarea {
  width: 100%;
  border: 1px solid #bdbdbd;
  border-radius: 5px;
}

.wrapper > * {
  padding: 1em;
}
@media (min-width: 700px) {
  .wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
		border: #ce3493 1.5px dotted;
		/* padding: 0; */
  }
  .wrapper > * {
    padding: 2em 0em 2rem 2rem;
  }
}

@media (min-width: 1000px) {
.contact-form {
	margin: 0rem 5rem 0rem 5rem;
}
}

ul {
  list-style: none;
  padding: 0;
}

.contacts {
  color: #212d31;
}

.form {
  background: #fff;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
form label {
  display: block;
}
form p {
  margin: 0;
}

.full-width {
  grid-column: 1 / 3;
}

button,
.submit-btn,
.form-input,
textarea {
  padding: 1em;
}

button, .submit-btn {
  background: transparent;
  border: 1px solid #ce3493;
  color: #ce3493;
  border-radius: 15px;
  padding: 5px 20px;
  text-transform: uppercase;
	font-size: 1rem;
}
button:hover, .submit-btn:hover,
button:focus , .submit-btn:focus{
  background: #ce3493;
  outline: 0;
  color: #eee;
}
.error {
  color: #ce3493;
}


/* privacy styles */

#privacy-container {

	width: 100%;
	margin-top: 2rem;
	padding: 4rem;
}

#privacy-container h1 {
font-weight: 700;
font-size: 1.9rem;
	color: #ce3493;
	text-align: center;
	padding: 2rem 0rem;
}

#privacy-container h2 {
	font-weight: 500;
	font-size: 1.6rem;
		color: #9634ce;
		text-align: center;
	
		line-height: 1.5rem;
	}

	#privacy-container h2 {
		font-weight: 400;
		font-size: 1.4rem;
		
			text-align: left;
			
			line-height: 1.8rem;
		}
	

#privacy-container p {
	font-weight: 400;
	font-size: 1.2rem;
		text-align: left;
	
		line-height: 1.8rem;
	}


	#privacy-container li {
		font-weight: 400;
		font-size: 1.2rem;
			text-align: left;
		
			line-height: 1.8rem;
		}
	



/* media queries */

@media (min-width: 480px) {
	.health-text h2 {
		line-height: 2.1rem;
	}

	.health-container-1 {
		padding: 2rem 4rem;
		}

		.health-container-2 {
			padding: 2rem 4rem;
			}

		.cust p {
			font-size: 1.2rem;
			line-height: 1.8rem;
			padding: 1rem 0 2rem 0;
			text-align: center;
		}
}
@media (min-width: 576px) {

	#mainNavbar .nav-link {
		font-size: 1.3rem;
	}

	#mainNavbar .navbar-brand {
		padding-top: 1rem;
	}

	#cart {
		/* border: magenta 2px solid; */
		color: #ce3493;
		/* padding-right: 2rem; */
		/* width: 10%; */
		/* text-align: right; */
	}
	#headingGroup h1 {
		font-size: 6rem;
	}

	.title img {
		width: 80px;
	}

	.blurb h2 {
		font-size: 2.7rem;
	 }
	 
	 .blurb p {
		 font-size: 1.5rem;
		 line-height: 2.4rem;
	 }

	 footer ul li {
		font-size: 1.3rem;
	 }
/* Health benefits styles */

#health-title h1 {
	font-size: 6rem;
	padding: 0rem 0rem 3rem 0rem;
	margin-top: 3.8rem;
}

.health-text h2 {
	font-size: 1.6rem;
	line-height: 2.2rem;
}

.health-text h3 {
	font-size: 1.6rem;
	padding-top: 1.8rem;
}

.health-text p {
	font-size: 1.2rem;
	line-height: 1.9rem;
}

.cust p {
	font-size: 1.2rem;
	line-height: 1.9rem;
}

.cust-title {
	font-size: 1.7rem;
	line-height: 2.5rem;
}

/* menu styles */
#menu-section h1 {
	font-size: 6rem;
}

/* about styles */

#about-title h1 {
	font-size: 6rem;
}
}


/* min-width 680px */

@media (min-width: 680px) {

	/* health benefits styles */
	.health-container-1 {
		padding: 2rem 6rem;
		}

		.health-container-2 {
			padding: 2rem 6rem;
			}

		.cust p {
			font-size: 1.3rem;
			line-height: 2rem;
		}
		
		.health-text h2 {
			font-size: 1.7rem;
			line-height: 2.2rem;
		}
		
		.health-text h3 {
			font-size: 1.7rem;
			padding-top: 1.9rem;
		}
		
		.health-text p {
			font-size: 1.3rem;
			line-height: 2rem;
		}
}

/* min-width 768px */

@media (min-width: 768px) {

	#mainNavbar .nav-link {
		font-size: 1.3rem;
		padding: 1.2rem 2rem;
	}

	#mainNavbar .navbar-brand {
		padding-top: 1rem;
	
	}

	#cart {
		height: 100%;
		width: 2.2em;
	}

	.cart-container {
		/* border: 2px solid green; */
		padding-left: 1rem;
		padding-bottom: 0;
	}
	#headingGroup h1 {
		font-size: 6.2rem;
	}

	.home-img {
		/* border: 2px solid orange; */
		height: 100%;
		/* padding: 5rem; */
		margin: 0;
		/* height: 40vh; */
	}

	.content {
		/* border: solid 2px magenta; */
		/* padding: 0; */
	}

	.title img {
		width: 85px;
	}

	.blurb h2 {
		font-size: 2.8rem;
	 }
	 
	 .blurb p {
		 font-size: 1.3rem;
		 line-height: 2.2rem;
		 padding: 0;
	 }

	 /* juice menu styles */
	 #menu-section h1 {
		padding: 2rem 0rem 3.5rem 0rem;
		font-size: 6rem;
		/* margin-top: 4rem; */
	}

	/* health benfits styles */
	.health-container-1 {
		padding: 2rem 6rem;
		}

		.health-container-2 {
			padding: 1rem ;
			}

		.cust p {
			font-size: 1.3rem;
			line-height: 2rem;
			padding: 0 2rem 0 2rem;
		}
		
		.health-text h2 {
			font-size: 1.7rem;
			line-height: 2.4rem;
		}
		
		.health-text h3 {
			font-size: 1.7rem;
			padding-top: 1.9rem;
		}
		
		.health-text p {
			font-size: 1.3rem;
			line-height: 2rem;
		
		}

		.cust {
			width: 100%;
			/* border: #34ce55 2px solid; */
		}
		.first-cust {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 2rem;
			/* width: 100%; */
			/* border: #9634ce solid 2px; */
		}
		
		.second-cust {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 2rem;
		}
} 



@media (min-width: 800px) {


	.cart-container {
		padding-left: 2.5rem;
	}

	#mainNavbar .nav-link {
		/* font-size: 1.3rem; */
		padding: 1.2rem 2rem;
	}

	#mainNavbar .navbar-brand {
		color: #ce3493;
		font-size: 1.5rem;
		padding-left: 1.5rem 5rem 1rem 0;
		margin-right: 3rem;
		margin-left: 1.5rem;
		/* padding-top: 1.5rem; */
	}

	#health-title h1 {
		font-family: 'Ole', cursive;
		margin: auto;
		text-align: center;
		padding: 0rem 2rem 3rem 0rem;
		text-shadow: 1px 1px #ceb1ce;
		margin-top: 3rem;
	}

	/* health styles */


	.health-container-1 {
		padding: 2rem 6rem;
		}

		.health-container-2 {
			padding: 1rem ;
			}

		.cust p {
			font-size: 1.3rem;
			line-height: 2rem;
			padding: 0 2rem 0 2rem;
		}
		
		.health-text h2 {
			font-size: 1.7rem;
			line-height: 2.4rem;
		}
		
		.health-text h3 {
			font-size: 1.7rem;
			padding-top: 1.9rem;
		}
		
		.health-text p {
			font-size: 1.3rem;
			line-height: 2rem;
		
		}

		.cust {
			width: 100%;
			/* border: #34ce55 2px solid; */
		}
		.first-cust {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 2rem;
			/* width: 100%; */
			/* border: #9634ce solid 2px; */
		}
		
		.second-cust {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 2rem;
		}

}

@media (min-width: 850px) {


	.cart-container {
		padding-left: 3rem;
	}

	#mainNavbar .nav-link {
		/* font-size: 1.3rem; */
		padding: 1.2rem 2rem;
	}

}

@media (min-width: 900px) {


	.cart-container {
		padding-left: 3.5rem;
	}

	#mainNavbar .nav-link {
		/* font-size: 1.3rem; */
		padding: 1.2rem 2rem;
	}

	#mainNavbar .navbar-brand {
		color: #ce3493;
		font-size: 1.5rem;
		padding-left: 1.5rem 5rem 1rem 0;
		margin-right: 4.5rem;
		margin-left: 2rem;
		/* padding-top: 1.5rem; */
	}

	/* health styles */


	.health-container-1 {
		padding: 2rem 8rem;
		}

		.health-container-2 {
			padding: 2rem ;
			}

		.cust-title {
		font-size: 2.2rem;
			/* border: #34ce55 2px solid; */
		}
}

@media (min-width: 950px) {


	.cart-container {
		padding-left: 2.5rem;
	}

	#mainNavbar .nav-link {
		/* font-size: 1.3rem; */
		padding: 1.2rem 3.2rem;
	}

	#contact h2 {
		font-size: 2rem;
		color: #ce3493;
	}
	
	#contact h3 {
		font-size: 1.6rem;
		color:#9634ce;
		padding: 1.5rem 0;
	}
	
	#contact p {
	font-weight: 400;
	color: rgb(71, 70, 70);
	font-size: 1.3rem;
	line-height: 2rem;
	}

}


@media (min-width: 850px) {
	#cart {
		height: 100%;
		width: 2.2em;
	}

	.cart-container {
		padding-left: 3rem;
		padding-bottom: 0;
	}
}

/* min-width 992px */


@media (min-width: 992px) {


	#menu-section h1 {
		padding: 0rem 0rem 5rem 0rem;
		font-size: 6rem;
		margin-top: 8rem;
	}

	#menu-section {
		margin-top: 0;
	}
}

@media (min-width: 1000px) {


	#home-body {
		margin-top: 5rem;
	}
	/* juice menu styles */
	#menu-section h1 {
		padding: 0rem 0rem 4rem 0rem;
			font-size: 6.5rem;
			margin-top: 6rem;
			}


	#health-title h1 {
		font-family: 'Ole', cursive;
		/* font-size: 4rem; */
		/* line-height: 7rem; */
		margin: auto;
		text-align: center;
		padding: 0rem 2rem 5rem 0rem;
		/* border: green 2px solid; */
		text-shadow: 1px 1px #ceb1ce;
		margin-top: 5rem;
	}

}


@media (min-width: 1100px) {

	#home-body {
		margin-top: 6rem;
	}

	/* juice menu styles */
	#menu-section h1 {
		padding: 0rem 0rem 5rem 0rem;
			font-size: 7rem;
			margin-top: 7rem;
			}

			
	#mainNavbar .navbar-brand {
		color: #ce3493;
		font-size: 1.5rem;
		padding-left: 1.5rem 5rem 1rem 0;
		margin-right: 6.3rem;
		margin-left: 2.5rem;
		/* padding-top: 1.5rem; */
	}



	.blurb h2 {
		color: #ce3493;
		/* color: #9634ce; */
		font-weight: 400;
		font-size: 3rem;
		/* font-family: 'roboto', cursive; */
		padding-bottom: 1.5rem;
	 }
	 
	 .blurb p {
		 /* border: 2px solid purple;; */
		 color: #9634ce;
		 font-weight: 300;
		 font-size: 1.7rem;
		 line-height: 2.5rem;
		 padding-bottom: 2rem;
	 }

	 #headingGroup h1 {
		font-family: 'Ole', cursive;
		font-size: 7rem;
		/* line-height: 7rem; */
		margin: auto;
		text-align: center;
		padding: 0rem 0rem 1rem 1rem;
		margin-top: 5rem;
		/* border: green 2px solid; */
	}

		/* health styles */

#health-title {
	font-size: 7rem;
}
		.health-container-1 {
			padding: 2rem 9rem;
			}
	
			.health-container-2 {
				padding: 3rem ;
				}
	.cust-title {
		padding-bottom: 0rem;
	}
		
}

@media (min-width: 1200px) {
			/* health styles */


			.health-container-1 {
				padding: 2rem 11rem;
				}
		
				.health-container-2 {
					padding: 6rem ;
					}
}

@media (min-width: 1300px) {

	/* juice menu styles */
	#menu-section h1 {
		padding: 0rem 0rem 6rem 0rem;
			font-size: 8rem;
			margin-top: 8rem;
			}

	.blurb h2 {
			font-size: 4rem;
	}

	#headingGroup h1 {
		/* font-family: 'Ole', cursive; */
		font-size: 8rem;
		/* line-height: 7rem; */
		/* margin: auto;
		text-align: center;
		padding: 0rem 0rem 1rem 1rem; */
		/* border: green 2px solid; */
	}

	.title img {
		width: 95px;
	}
	
	#mainNavbar .navbar-brand {
		color: #ce3493;
		font-size: 1.5rem;
		padding-left: 1.5rem 5rem 1rem 0;
		margin-right: 3rem;
		margin-left: 2.5rem;
		/* padding-top: 1.5rem; */
	}

	#mainNavbar .nav-link {
		font-size: 1.5rem;
		padding: 1.2rem 5rem;
	}

	.navbar-brand img {
		width: 50px;
	}


		/* health styles */


		.health-container-1 {
			padding: 2rem 13rem;
			}
	
			.health-container-2 {
				padding: 7rem ;
				}
}

@media (min-width: 1500px) {

		/* health styles */


		.health-container-1 {
			padding: 2rem 15rem;
			}
	
			.health-container-2 {
				padding: 8rem ;
				}
	
}




.nav-link {
	font-size: 1.3rem;
}


#home-title {
	margin-top: 0rem;
	margin-bottom: 4rem;
}

#nav-title a {
	font-family: 'Dancing Script', cursive;
	font-size: 1.8rem;
}

#home-title h1 {
  font-family: 'Dancing Script', cursive;
	font-size: 4rem;
	line-height: 7rem;
	margin: auto;
	text-align: center;
	/* padding: 1rem 0 3rem 0; */
}

#home-title h2 {
  font-family: 'Dancing Script', cursive;
	font-size: 2rem;
	margin: auto;
	text-align: center;
	padding: 1.5rem 0 1.5rem 0;
}