@charset "UTF-8";
/*reset and basic css*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figure, footer, header, hgroup, menu, nav, section, menu,time, mark, audio, video {
margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background-color: transparent;}
html, body, #container {height: 100%; background-color: #FFFFFF; color: #000000;}
blockquote, q { quotes:none; margin: 0 1em 1em 1em; }
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background-color:transparent; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; vertical-align: top;}
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
*,*:after,*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
/* END RESET CSS */

/* flex */
#container, #contents, #toplogo, .menu, footer, #address, #hours {display: flex;}
#container, #contents {flex-direction: column;}
#toplogo, .item {width: 100%;}
#toplogo {align-content: center; align-items: center;}
.logoimage {align-self: center; margin: auto;}
.menu {margin: auto;}
.column1 {width: 15%;}
.column2, .column3, .column4 {width: 25%;}
.item, .description {display: grid;
grid-template-columns: auto max-content;
gap: 0 .25rem;
}
.item, .description {
grid-template-columns: auto max-content;
align-items: end;
gap: 0 .25rem;
}
.item {
grid-template-areas: "name price";
margin-top: .5rem;
}
.name {
grid-area: name;
position: relative;
overflow: hidden;
}
.name::after, .text::after {
position: absolute;
padding-left: .25ch;
text-align: right;
}
.price {grid-area: price;}
.description {
grid-template-areas: "text price";width: 100%;
}
.choices {
display: flex; flex-direction: row; justify-content: flex-start; gap: 1rem;

}
.text {
grid-area: text;
position: relative;
overflow: hidden;
}
.intro {grid-area: intro;}
.choice {grid-area: choice;}

/* colors */
.gold {color: #FFB75C;}
#container, .price {}
.item {color: #8D362C;}
.description {}

/* fonts*/
html, body {font-size:100%;font-family: "proxima-nova", sans-serif;font-weight: 600;
font-style: normal;}

h2 {font-family: "dunbar-tall", sans-serif; color: #2c6370;
font-weight: 600;
font-style: normal;
margin-top: 1rem;}

.item, .proximaNovaBold {font-family: "proxima-nova", sans-serif;
font-weight: 700;
font-style: normal;}

.description, .proximaNovaSemi {font-family: "proxima-nova", sans-serif;
font-weight: 600;
font-style: normal;}

h2 {font-size: 2.4rem;}
p, .item {font-size: 1.2rem;}

#contents {margin: 2%; }

/*footer*/
.clear { clear: both; height: 142px; }
footer {flex-shrink: 0;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	align-content: center;
	column-gap: 20px;
	position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000000;
color: #ffffff;
	 z-index: 900;
}
footer a {color: #ffffff;}

@media all and (max-width: 799px) {
.menu {flex-direction: column; }
.column1, .column2, .column3, .column4 {width: 85%; margin: auto;}
.name::after, .text::after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
img {max-width: 100%; height: auto; }
footer {flex-direction: row; padding: 16px 9%;font-size: 90%;}
#footerlogo {display: none;}
#address, #hours {flex-direction: column;}
}
@media all and (min-width: 800px) and (max-width: 1159px) {
.menu {flex-direction: column; }
.column1, .column2, .column3, .column4 {width: 85%; margin: auto;}
.column2 {flex-direction: row;}
.name::after, .text::after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
.menusection {column-count: 2; column-gap: 2em; orphans: 2;}
.wraparound {display: inline-block; width: 100%;}
footer {flex-direction: row;padding: 16px 8%;font-size: 80%;}
#footerlogo {display: inline-block;}
#address, #hours {flex-direction: column;}
}
@media all and (min-width: 1160px) {
.menu {flex-direction: row; column-gap: 1rem;justify-content: space-between; max-width: 2000px;}
.column1 {width: 15%;}
.column2, .column3, .column4 {width: 25%;}
.name::after, .text::after {
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
footer {flex-direction: row;padding: 16px 2%;font-size: 90%;}
#footerlogo {display: inline-block;}
#address, #hours {flex-direction: column;}
}
@media all and (min-width: 2000px) {
#address, #hours {flex-direction: row; gap: 20px;}
}

@media print {
html, body, #container, .price, .item { background-color: transparent !important; color: #000000 !important; text-shadow: none; }
a {word-wrap: break-word;}
a, a:visited { color: #000 !important; text-decoration: underline; }
a:after {content: " (https://www.shalomscafe.com/" attr(href) ")";}
a[href^="#"]:after {display: none;}
a[href^="http://"]:after, a[href^="https://"]:after {content: " (" attr(href) ")";}
abbr:after { content: " (" attr(title) ")"; }    .ir a:after { content: ""; }  /* Don't show links for images */   
p {font: 12pt Georgia, "Times New Roman", Times, serif; line-height: 1.3; margin-bottom: .6em;}
p, h1, h2, h3 { orphans: 3; widows: 3; }
h1, h2, h3{ break-after: avoid; }
h1 {font-size: 21pt;}
h2 {font-size: 18pt;}
h3 {font-size: 16pt;}
img {max-width: 100%; height: auto; break-inside: avoid; }
#container {
padding: 0.5cm; 
vertical-align: top;
}
.flex, #container, #content, .stripe, .topcontent, .topcontentindented, .topcontentindentedoneside, .maincontent, .bodycolumns, .flexrow, .flexcolumn, .maxlength, .fulllength, .more, .noindentcontent, .text, .hardleft, .pullouttext, .pulloutL, .pulloutR  {display: block; width: 100%; max-width: 100%; margin: 0; } 
}