body, html { font-family: tahoma, sans-serif; line-height: 1.5em; font-size: 14pt; color: #444444; scroll-behavior: smooth; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, .button, .flavor { font-family: 'Alegreya Sans SC', sans-serif; line-height: .8em; }
li { margin-bottom: .4em; font-size: 12pt; }
a {text-decoration: none; font-weight: bold; }


.size1 { font-size: 60pt; }
.size2 { font-size: 40pt; }
.size3 { font-size: 32pt; }
.size4 { font-size: 24pt; }
.size5 { font-size: 16pt; }
.size6 { font-size: 12pt; }
.size7 { font-size: 10pt; }
.color1 { color: #113a5b; }
.color2 { color: #0A1612; }
.color3 { color: #283A2C; }
.color4 { color: #5190D2; }
.color5 { color: #85892B; }
.color6 { color: #444444; }
.color7 { color: #ffffff; }
.bg1 { background: #113a5b; }
.bg2 { background: #0A1612; }
.bg3 { background: #283A2C; }
.bg4 { background: #5190D2; }
.bg5 { background: #85892B; }
.bg6 { background: #444444; }
.bg7 { background: #ffffff; }
.bg6 .color4 { color: #61a0ff; }

.answer { padding: 10px 0 10px 10%; }

.flex { display: flex; }
.flexwrap { display: flex; flex-wrap: wrap; }
.flex-left { justify-content: left; }
.flex-right { justify-content: right; }
.flex-fill { flex-grow: 2; }
.flex-center { justify-content: center; }
.flex-middle { align-items: center; }
.hidden { display: none; }
.grid { width: 100%; margin: auto; text-align: center; }
.grid a { text-decoration: none; color: #333; }
.grid2 { flex-basis: 14%; box-sizing: border-box; }
.grid3 { flex-basis: 25%; box-sizing: border-box; }
.grid4 { flex-basis: 33%; box-sizing: border-box; }
.grid5 { flex-basis: 30%; box-sizing: border-box; }
.grid6 { flex-basis: 50%; box-sizing: border-box; }
.grid8 { flex-basis: 66%; box-sizing: border-box; }
.grid9 { flex-basis: 75%; box-sizing: border-box; }
.grid12 { flex-basis: 100%; box-sizing: border-box; }
.mgrid2 { flex-basis: 14%; box-sizing: border-box; }
.mgrid3 { flex-basis: 25%; box-sizing: border-box; }
.mgrid4 { flex-basis: 33%; box-sizing: border-box; }
.mgrid5 { flex-basis: 30%; box-sizing: border-box; }
.mgrid6 { flex-basis: 50%; box-sizing: border-box; }
.mgrid8 { flex-basis: 66%; box-sizing: border-box; }
.mgrid9 { flex-basis: 75%; box-sizing: border-box; }
.mgrid12 { flex-basis: 100%; box-sizing: border-box; }
.txt_center { text-align: center; }
.txt_left { text-align: left; }
.txt_right { text-align: right; }
.pad2 { padding: 2px; }
.pad5 { padding: 5px; }
.pad10 { padding: 10px; }
.pad20 { padding: 20px; }
.button { padding: 15px; border-radius: 5px; border: 0px; text-align: center; }
.flavor { font-size: 1.4em; font-weight: bold; margin: .5em 0; }
.description { font-size: .8em; padding-left: 10px; }
.ingredients { font-size: .8em; padding-left: 10px; font-style: italic; padding: 5px; border: 1px solid #aaa; }
.bold { font-weight: bold; }
.notice { color: #fff; background: #113a5b; margin-top: 50px; }
.alert { color: #fff; background: #884444; }
.ingredients { display: none; }
.ilink { margin-left: 10px; font-size: .8em; font-style: italic; color: #283A2C; text-decoration: none; }
.admin_header { background: #333333; color: #ffffff; font-size: .8em; }
.admin_header a { color: #ffffff; text-decoration: none; }
.admin_header div { display: inline; margin: 5px 10px; }
.border { width: 100%; margin: .5em 0; }
	.border img { width: 100%; opacity: 0.5; }
.mobileonly { display: none; }
#admin_main { margin: auto; max-width: 1200px; }
#admin_footer { padding: 20px; }

#notice {
	width: 100%;
	padding: 5px;
	margin: 0;
	text-align: center;
	font-weight: bold;
	margin-top: 50px;
}
	#notice a { color: #fff; }

#menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding: 10px 0px;
	margin: 0;
	text-align: center;
	border-bottom: 1px solid #aaa;
	background: #fff;
}
	#menu ul { list-style: none; margin: 0px; padding: 0px; }
	#menu ul li { display: inline; margin: 0px 20px; padding: 0px; }
	.menua { color: #444; text-decoration: none; font-weight: normal; font-size: 14pt; }
	.menuo { color: #fff; text-decoration: none; font-weight: bold; font-size: 12pt; padding: 2px 5px; }
#hero {
	margin: 45px 0 0 0;
	padding: 0;
	width: 100%;
	height: 500px;
	background: url("/images/featured_01.jpg");
	background-size: cover;
	background-position: left bottom;
}
	#hero img { float: right; margin: 0; padding: 0; height: 100%; opacity: 0.7; }
#intro { width: 60%; margin-left: 20%; }
#flavorwrap { width: 100%; padding: 0px; padding-top: 50px; }
#flavors { width: 60%; margin-left: 20%; margin-top: 0px; background: #fff; padding: 20px 0; }
#featuredflavors {}
#currentflavors { font-size: .8em; }
#flavorheader { width: 90%; margin: .5em 5%; text-align: center; }
#cateringwrap, #contactwrap { width: 100%; }
#catering, #faq, #contact { width: 60%; margin-left: 20%; padding: 20px 0; }
#partnerwrap { 
	width: 100%;
	padding: 0px;
	padding-top: 50px; 
	padding-bottom: 50px; 
	background: url("/images/partner_01.jpg"); 
	background-size: cover;
	background-position: left bottom;
}
#partner { 
	width: 60%;
	margin-left: 20%;
	margin-top: 0px; 
	background: #ddd; 
	padding: 20px;
	opacity: 0.85;
}

@media only screen and (max-width: 850px) {
	.size1 { font-size: 30pt; }
	.size2 { font-size: 26pt; }
	.size3 { font-size: 22pt; }
	.size4 { font-size: 18pt; }
	.size5 { font-size: 14pt; }
	.headertext { top: 10%; left: 20px; }
    .flex { flex-wrap: wrap; }
    .grid2, .grid3, .grid4, .grid6, .grid8, .grid9 { flex-basis: 100%; }
	.mobileonly { display: inline; }
	.mobilefreezer { display: none; }
	#hero { height: 150px; }
	#menu ul li { margin: 0px 3px; }
	#menu a { font-size: 10pt; } 
	#intro, #flavors, #catering, #partner, #faq, #contact { margin: 0 5%; width: 90%; }
	#partner { padding: 2%; margin: 0 3%; }
	
}
@media only screen and (min-width: 851px) and (max-width: 1200px) {
	#hero { height: 300px; }
}