/* ==========================================================================
   fonts
   ========================================================================== */

@font-face 										{ font-family: 'berylium'; src: url('/css/fnt/berylium-webfont.woff2') format('woff2'), url('/css/fnt/berylium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face 										{ font-family: 'berylium'; src: url('/css/fnt/beryliumbold-webfont.woff2') format('woff2'), url('/css/fnt/beryliumbold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; }
@font-face 										{ font-family: 'berylium'; src: url('/css/fnt/beryliumbolditalic-webfont.woff2') format('woff2'), url('/css/fnt/beryliumbolditalic-webfont.woff') format('woff'); font-weight: bold; font-style: italic; }
@font-face 										{ font-family: 'berylium'; src: url('/css/fnt/beryliumitalic-webfont.woff2') format('woff2'), url('/css/fnt/beryliumitalic-webfont.woff') format('woff'); font-weight: normal; font-style: italic; }
@font-face 										{ font-family: 'klasik'; src: url('/css/fnt/klasik_regular-webfont.woff2') format('woff2'), url('/css/fnt/klasik_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face										{ font-family: "cateredbycharlotte"; src: url('/css/fnt/cateredbycharlotte.eot'); src: url('/css/fnt/cateredbycharlotte.eot?#iefix') format('embedded-opentype'), url('/css/fnt/cateredbycharlotte.woff') format('woff'), url('/css/fnt/cateredbycharlotte.ttf') format('truetype'), url('/css/fnt/cateredbycharlotte.svg#cateredbycharlotte') format('svg'); font-weight: normal; font-style: normal; }



/* ==========================================================================
   normalize/reset
   ========================================================================== */

html,body,main,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 { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
ol, ul	 										{ list-style: none; }
blockquote, q 									{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table											{ border-collapse: collapse; border-spacing: 0; }
*												{ margin: 0; padding: 0; }
*, *:before, *:after 							{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html 											{ font-size: 1em; }

::-moz-selection 								{ background: #b3d4fc; text-shadow: none; }
::selection 									{ background: #b3d4fc; text-shadow: none; }

hr 												{ display: block; height: 1px; border: 0; background: #ccc; margin: 0 auto; padding: 0; }

audio, canvas, iframe, img, svg, video 			{ vertical-align: middle; }
fieldset 										{ border: 0; margin: 0; padding: 0; }
textarea 										{ resize: vertical; }
input, textarea, button, select					{ -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; }
select::-ms-expand 								{ display: none; }

button, input[type=submit]						{ margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 1em; cursor: pointer; outline: none; overflow: visible; }
button::-moz-focus-inner						{ padding: 0; border: 0; }

sup, sub										{ height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size: .5em; }
sup												{ bottom: 1.5ex; }
sub												{ top: .5ex; }

a												{ text-decoration: none; color: inherit; }



/* ==========================================================================
   opinionated defaults
   ========================================================================== */

html 											{ color: #5a5a5a; line-height: 1.4; }
body											{ /* -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; */ }
::-moz-selection 								{ background: #b3d4fc; text-shadow: none; }
::selection 									{ background: #b3d4fc; text-shadow: none; }
textarea 										{ resize: vertical; }

p												{ font-size: .875em; margin-bottom: 2.3em; line-height: 2.3; position: relative; letter-spacing: .025em; top: -.4em; }
p.button 										{ margin-bottom: 4em; }
p em											{ font-weight: bold; font-style: italic; }

a, button										{ -o-transition: all .25s; -ms-transition: all .25s; -moz-transition: all .25s; -webkit-transition: all .25s; transition: all .25s; }
a:hover											{ color: rgba(212,150,55,1); }

.browserupgrade 								{ margin: 0.2em 0; background: #ccc; padding: 0.2em 0; text-align: center; }


/* ==========================================================================
   colors
   ========================================================================== */

:root
{	
	--color-head-bg: 			rgba(221,174,101,1); /* multiply */
	--color-tint-header-bg:		rgba(25,20,10,.75);

	--color-tint-body-bg:		rgba(0,0,0,.05);
	--color-tint-main-bg:		rgba(255,255,255,.4);

	--color-foot-bg: 			rgba(229,197,146,1); /* multiply */
	--color-tint-footer-bg:		rgba(247,245,238,.7);
	
	--color-action: 			rgba(212,150,55,1); /* button background, link hover */
	
	--color-highlight:			rgba(212,150,55,1); /* headers, some borders */
	
	--color-white:				#eee;
	--color-copy:				#5a5a5a;
	--color-copy-lt:			#6a6358;
	
	--color-nav-mobile-bg:		rgba(67,52,28,.85); /* fudge this to match the hue of the header (above) */
}



/* ==========================================================================
   custom styles
   ========================================================================== */

body											{ font-family: 'berylium'; background: #f7f5ee url(/img/bg.jpg); }
.container										{ max-width: 80rem; margin: 0 auto; position: relative; z-index: 2; }

button, a.btn									{ font-family: 'klasik'; line-height: 1; color: #eee; text-transform: uppercase; letter-spacing: .05em; padding: .5em 1em; background: rgba(212,150,55,1); font-size: 1rem; position: relative; top: .825em; left: .5em; }
button:before, a.btn:before						{ content: ''; position: absolute; display: block; width: calc(100% + 2em); height: 1px; top: -.5em; left: 50%; transform: translateX(-50%); background: #6a6358; transition: top .25s; }
button:after, a.btn:after						{ content: ''; position: absolute; display: block; width: calc(100% + 2em); height: 1px; bottom: -.5em; left: 50%; transform: translateX(-50%); background: #6a6358; transition: bottom .25s; }
button span										{ position: relative; z-index: -1; pointer-events: none; display: block; width: 100%; height: 100%; }
button span:before, a.btn span:before			{ content: ''; position: absolute; display: block; height: calc(100% + 2em); width: 1px; left: -.5em; top: 50%; transform: translateY(-50%); background: #6a6358; transition: left .25s; }
button span:after, a.btn span:after 			{ content: ''; position: absolute; display: block; height: calc(100% + 2em); width: 1px; right: -.5em; top: 50%; transform: translateY(-50%); background: #6a6358; transition: right .25s; }
a.btn:hover, button:hover						{ text-shadow: 0 1px 2px rgba(0,0,0,.5); }
a.btn:hover:before, button:hover:before			{ top: -.25em; }
a.btn:hover:after, button:hover:after			{ bottom: -.25em; }
a.btn:hover span:before, button:hover span:before { left: -.25em; }
a.btn:hover span:after, button:hover span:after	{ right: -.25em; }

header, main, footer							{ position: relative; padding: 0 1em; }
header 											{ }
main											{ background: rgba(0,0,0,.05); }
footer											{ }

header:before, footer:before					{ content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 1; }
header:before									{ background: rgba(221,174,101,1); mix-blend-mode: multiply; }
footer:before									{ background: rgba(229,197,146,1); mix-blend-mode: multiply; }

header div.container							{ background: rgba(25,20,10,.75); height: 5em; padding: 0 0 0 4em; display: flex; }
main div.container								{ background: rgba(255,255,255,.4); min-height: calc(100vh - 5em - 10.5em); }
footer div.container							{ background: rgba(247,245,238,.7); height: 10.5em; padding: 0 4em; display: flex; justify-content: flex-end; }

header figure									{ width: 17em; position: relative; top: 1em; }

header nav										{ width: calc(100% - 17em); padding-left: 4em; }
header nav ul									{ display: flex; width: 100%; height: 100%; }
header nav li									{ display: block; width: 25%; height: 100%; }
header nav a									{ display: block; width: 100%; height: 100%; font: normal normal 1em/5em 'klasik'; letter-spacing: .1em; color: #fff; text-transform: uppercase; text-align: center; }
header nav a:hover, header li.on a				{ color: rgba(212,150,55,1); background: rgba(255,255,255,.1); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
header nav span									{ position: relative; width: auto; }
header nav a span:after							{ opacity: 0; content: ''; display: block; position: absolute; width: 100%; height: 1px; background: rgba(212,150,55,1); bottom: -.25em; left: 0; transition: opacity .5s; }
header nav a:hover span:after					{ opacity: 1; }

header button, header .mobile					{ display: none; }

footer figure									{ width: 17em; display: block; position: absolute; left: 4em; top: -7em; padding: 0 2em; text-align: center; }
footer figure img								{ position: relative; }
footer figure img:nth-of-type(1)				{ width: 6em; }
footer figure img:nth-of-type(2)				{ width: 13em; }
footer ul										{ display: flex; width: calc(100% - 17em); padding: 2em 0 0 2%; }
footer li										{ width: 30%; padding-left: 8%; white-space: nowrap; }
footer li:first-child 							{ width: 40%; }
footer h2										{ font: normal normal 1em/2 'klasik'; text-transform: uppercase; border-bottom: 1px #333 solid; margin-bottom: 1em; white-space: nowrap; }
footer p										{ font-style: normal; line-height: 1.75; color: #6a6358; }
footer li:nth-child(2) p						{ display: inline-block; white-space: nowrap; }
footer a										{ color: #6a6358; }
footer li:first-child a:first-of-type			{ text-decoration: underline; font-style: normal; font-size: 1.1em; }
footer li:first-child a:first-of-type:hover		{ text-decoration: none; }
footer li svg									{ width: 1.5em; height: 1.5em; }
footer li svg path								{ fill: #6a6358; transition: all .25s; }
footer li p span:hover svg path					{ fill: rgba(212,150,55,1); }

figure.gallery									{ background: rgba(0,0,0,.1); position: relative; }
figure.gallery div								{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.frame:before									{ content: ''; position: absolute; display: block; width: calc(100% + 3.5em); height: 1px; top: -1em; left: 50%; transform: translateX(-50%); background: rgba(229,197,146,1); }
.frame:after									{ content: ''; position: absolute; display: block; width: calc(100% + 3.5em); height: 1px; bottom: -1em; left: 50%; transform: translateX(-50%); background: rgba(229,197,146,1); }
.frame span										{ position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; }
.frame span:before								{ content: ''; position: absolute; display: block; height: calc(100% + 3.5em); width: 1px; left: -1em; top: 50%; transform: translateY(-50%); background: rgba(229,197,146,1); }
.frame span:after								{ content: ''; position: absolute; display: block; height: calc(100% + 3.5em); width: 1px; right: -1em; top: 50%; transform: translateY(-50%); background: rgba(229,197,146,1); }




/* ==========================================================================
   home
   ========================================================================== */

.home main div.container						{ display: flex; flex-wrap: wrap; padding: 4em; }
.home main section.copy							{ width: 40%; padding-bottom: 4em; }

.home main section.gallery						{ width: calc(60% - 5em); margin: 0 1em 0 4em; }
.home main figure								{ width: 100%; padding-bottom: 60%; max-height: 460px; margin-bottom: 3em; }
.home main figure div							{ opacity: 0; z-index: 1; transition: opacity 0s ease .5s; }
.home main figure div:nth-of-type(1)			{ background: url(/img/photo-home-01.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(2)			{ background: url(/img/photo-home-02.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(3)			{ background: url(/img/photo-home-03.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(4)			{ background: url(/img/photo-home-04.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(5)			{ background: url(/img/photo-home-05.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(6)			{ background: url(/img/photo-home-06.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(7)			{ background: url(/img/photo-home-07.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(8)			{ background: url(/img/photo-home-08.jpg) no-repeat 50% 70%; background-size: cover; }
.home main figure div:nth-of-type(9)			{ background: url(/img/photo-home-09.jpg) no-repeat 50% 70%; background-size: cover; }

.home main figure div.on						{ opacity: 1; z-index: 100; transition: opacity .5s; }


.home main div.kudos							{ position: relative; overflow: hidden; width: 100%; max-width: 100%; }
.home main div.kudos:before						{ content: ''; position: absolute; z-index: 2000; top: 0; left: 0; display: block; height: 100%; width: 3em; background: linear-gradient(to right, rgba(246,243,236,1) 0%,rgba(246,243,236,0) 100%); pointer-events: none; }
.home main div.kudos:after						{ content: ''; position: absolute; z-index: 2000; top: 0; right: 0; display: block; height: 100%; width: 3em; background: linear-gradient(to left, rgba(246,243,236,1) 0%,rgba(246,243,236,0) 100%); pointer-events: none; }
.home main .kudos ul							{ position: relative; display: flex; justify-content: stretch; }
.home main .kudos li							{ padding: 0 2em; display: flex; flex-direction: column; justify-content: center; }
.home main .kudos p								{ margin: 0; line-height: 1.25; top: auto; font-weight: bold; font-style: italic; text-align: center; }
.home main .kudos p em							{ color: #999999; font-style: normal; padding-left: .5em; text-align: left; white-space: nowrap; }
.home main .kudos button						{ position: absolute; z-index: 2002; top: 50%; transform: translateY(-50%); background: none; color: rgba(212,150,55,1); padding: .5em; }
.home main .kudos button:nth-of-type(1)			{ left: 0; }
.home main .kudos button:nth-of-type(2)			{ left: auto; right: 0; }
.home main .kudos button:hover					{ text-shadow: none; }
.home main .kudos button:before, .home main .kudos button:after { content: none; }

.home div.award									{ position: relative; padding-bottom: .1em; margin-bottom: 2em; }
.home div.award:after							{ content: ''; width: 50%; height: 1px; display: block; background: rgba(212,150,55,1); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.home .award figure								{ width: 50%; height: 0; padding-bottom: 20.392%; position: relative; margin: 0 auto 1em; }
.home .award img								{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.home .award p em								{ font-style: normal; }
.home .award p									{ text-align: center; line-height: 1.25; font-style: italic; }
.home .award p a								{ color: rgba(212,150,55,1); }
.home .award p a:hover							{ color: #5a5a5a; }



/* ==========================================================================
   menu
   ========================================================================== */

.menu main div.container						{ padding: 2.25em 4em; }

section.subnav									{ position: relative; width: calc(100% - .75em); margin: 0 auto; display: block; z-index: 5 }
section.subnav:before							{ content: ''; position: absolute; display: block; width: calc(100% + 1.5em); height: 1px; top: -.25em; left: 50%; transform: translateX(-50%); background: rgba(25,20,10,.75); }
section.subnav:after							{ content: ''; position: absolute; display: block; width: calc(100% + 1.5em); height: 1px; bottom: -.25em; left: 50%; transform: translateX(-50%); background: rgba(25,20,10,.75); }
.subnav nav										{ position: relative; }
.subnav nav:before								{ content: ''; position: absolute; display: block; height: calc(100% + 1.5em); width: 1px; left: -.25em; top: 50%; transform: translateY(-50%); background: rgba(25,20,10,.75); }
.subnav nav:after								{ content: ''; position: absolute; display: block; height: calc(100% + 1.5em); width: 1px; right: -.25em; top: 50%; transform: translateY(-50%); background: rgba(25,20,10,.75); }
.subnav nav div									{ overflow: hidden; position: relative; }
.subnav span									{ display: none; }
.subnav ul										{ display: flex; width: 100%; min-width: 56em; padding: 0 1em; justify-content: space-between; }
.subnav li										{ text-align: center; }
.subnav a										{ font-family: 'klasik'; text-transform: uppercase; }
.subnav li.on a									{ color: rgba(212,150,55,1); }

div.menus										{ padding: 2.5em 0 6em; }
.menus section									{ padding-bottom: 2em; position: relative; }
.menus h2										{ font: normal normal 1.5em/1.825 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; border-bottom: 1px rgba(212,150,55,1) solid; margin-bottom: .75em; }
.menus h3										{ font: normal normal 1.45em/1 'klasik'; margin: 0 0 .125em; color: rgba(212,150,55,1); text-transform: uppercase; }
.menus ul										{ font-size: .875em; column-count: 3; column-gap: 4em; position: relative; }
.menus li										{ padding-bottom: 1.825em; letter-spacing: .05em; position: relative; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.menus li:after									{ content: ''; display: block; position: absolute; bottom: 1.125em; height: 0; width: 100%; border-bottom: 1px #ccc dashed; }
.menus li:last-child:after						{ content: none; }
.menus ul ul									{ padding-left: 1em; font-size: 1em; column-count: 1; }
.menus ul ul li									{ padding-bottom: 0; font-style: italic; color: #aaa; text-indent: -.75em; padding-left: .75em; }
.menus ul ul li:after							{ content: none; }
.menus ul ul li:not(:last-child):after			{ content: 'or'; margin-left: 1em; font-style: normal; text-transform: uppercase; opacity: .5; position: static; bottom: auto; display: inline; height: auto; width: auto; border-bottom: none; }
.menus li h4									{ font-weight: bold; color: #333; margin-bottom: .325em; }
.menus p										{ text-align: left; margin-bottom: 0; margin-top: 1em; font-size: .75rem; line-height: 1.25; font-style: italic; color: #666; letter-spacing: .05em; }
.menus li p										{ text-align: left; margin-top: 0; margin-bottom: 0; font-size: 1em; line-height: 1; letter-spacing: .05em; color: #999; }
.menus p strong, .menus p b 					{ font-weight: bold; }
.menus ul:before								{ content: ''; display: block; background: rgba(212,150,55,1); width: 1px; height: calc(100% + 2.5em); position: absolute; top: -2.5em; left: calc(33.33334% - .675em); }
.menus ul:after									{ content: ''; display: block; background: rgba(212,150,55,1); width: 1px; height: calc(100% + 2.5em); position: absolute; top: -2.5em; right: calc(33.33334% - .675em); }
.menus ul ul:before, .menus ul ul:after			{ content: none; }

.menus figure                                   { width: 3em; height: 3em; margin: 0 auto; position: relative; margin-top: 1em; }
.menus figure:before, .menus figure:after       { content: ''; position: absolute; top: 0; display: block; width: 3em; height: 3em; }
.menus figure:before                            { left: -4em; }
.menus figure:after                             { right: -4em; }
.menus #horsdoeuvers figure                     { background-image: url(/img/icon-sausage.svg); }
.menus #horsdoeuvers figure:before              { background-image: url(/img/icon-cheese.svg); }
.menus #horsdoeuvers figure:after               { background-image: url(/img/icon-shrimp.svg); }
.menus #entrees figure                          { background-image: url(/img/icon-steak.svg); }
.menus #entrees figure:before                   { background-image: url(/img/icon-fish.svg); }
.menus #entrees figure:after                    { background-image: url(/img/icon-chicken.svg); }
.menus #accompaniments figure                   { background-image: url(/img/icon-salad.svg); }
.menus #accompaniments figure:before            { background-image: url(/img/icon-vegetables.svg); }
.menus #accompaniments figure:after             { background-image: url(/img/icon-pasta.svg); }
.menus #dessertsdrinks figure                   { background-image: url(/img/icon-wine.svg); }
.menus #dessertsdrinks figure:before            { background-image: url(/img/icon-cake.svg); }
.menus #dessertsdrinks figure:after             { background-image: url(/img/icon-coffee.svg); }
.menus #sidessoups figure                       { background-image: url(/img/icon-flatware.svg); }
.menus #sidessoups figure:before                { background-image: url(/img/icon-rice.svg); }
.menus #sidessoups figure:after                 { background-image: url(/img/icon-soup.svg); }
.menus #sandwiches figure                       { background-image: url(/img/icon-sandwich4.svg); }
.menus #sandwiches figure:before                { background-image: url(/img/icon-sandwich2.svg); }
.menus #sandwiches figure:after                 { background-image: url(/img/icon-sandwich3.svg); }
.menus #brunch figure                           { background-image: url(/img/icon-skillet.svg); }
.menus #brunch figure:before                    { background-image: url(/img/icon-muffin.svg); }
.menus #brunch figure:after                     { background-image: url(/img/icon-croissant.svg); }



/* ==========================================================================
   services
   ========================================================================== */

.services main div.container					{ display: flex; flex-wrap: wrap; padding: 4em; }
.services main section.headline					{ width: 100%; flex: none; }
.services main section.copy						{ width: 40%; padding-bottom: 4em; }
.services main h2								{ font: bold normal 1.5em/1.125 'berylium'; margin: 0 auto 2em; text-align: center; width: 100%; /*max-width: 40em;*/ }
.services main h2 em							{ font-family: 'klasik'; }
.services main h3								{ font: normal normal 1.5em/1.825 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; border-bottom: 1px rgba(212,150,55,1) solid; margin-bottom: .75em; }
.services main figure							{ width: calc(60% - 5em); margin: 2.5em 1em 4em 4em; }

.services main figure div:nth-of-type(1)		{ background: url(/img/photo-services-01.jpg) no-repeat 50% 70%; background-size: cover; }
.services main figure div:nth-of-type(2)		{ background: url(/img/photo-services-02.jpg) no-repeat 50% 70%; background-size: cover; }
.services main figure div:nth-of-type(3)		{ background: url(/img/photo-services-03.jpg) no-repeat 50% 70%; background-size: cover; }
.services main figure div:nth-of-type(4)		{ background: url(/img/photo-services-04.jpg) no-repeat 50% 70%; background-size: cover; }

@keyframes crossFade							{ 0% { opacity:1; } 17% { opacity:1; } 25% { opacity:0; } 92% { opacity:0; } 100% { opacity:1; } }
.services main figure div:nth-of-type(1) 		{ animation-delay: 16s; }
.services main figure div:nth-of-type(2) 		{ animation-delay: 12s; }
.services main figure div:nth-of-type(3) 		{ animation-delay: 8s; }
.services main figure div:nth-of-type(4) 		{ animation-delay: 4s; }

.services main figure div 						{ animation-name: crossFade; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 16s; }



/* ==========================================================================
   weddings
   ========================================================================== */

.weddings main div.container					{ display: flex; flex-wrap: wrap; padding: 4em; }
.weddings main section.headline					{ width: 100%; flex: none; }
.weddings main section.copy						{ width: 40%; padding-bottom: 4em; }
.weddings main h2								{ font: bold normal 1.5em/1.125 'berylium'; margin: 0 auto .5em; text-align: center; width: 100%; max-width: 40em; }
.weddings main h2 em							{ font-family: 'klasik'; }
.weddings main h3								{ font: normal normal 1.25em/1.125 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; text-align: center; margin-bottom: 2em; }
.weddings main figure							{ width: calc(60% - 5em); margin: 0 1em 4em 4em; }

.weddings main figure div:nth-of-type(1)		{ background: url(/img/photo-weddings-01.jpg) no-repeat 50% 70%; background-size: cover; }



/* ==========================================================================
   contact
   ========================================================================== */

.contact main div.container						{ display: flex; padding: 4em 4em 8em; }
.contact main section.copy						{ position: relative; padding: 0 4em 0 16%; }
.contact main h2								{ font: bold normal 1.5em/1.125 'berylium'; margin: 0 auto 2em; width: 100%; max-width: 40em; }
.contact main h2 em								{ font-family: 'klasik'; }
.contact main p									{ font: bold normal 1em/1.125 'berylium'; margin: 0 auto 2em; width: 100%; max-width: 40em; }
.contact main h3								{ font: normal normal 2em/1.125 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; width: 100%; text-align: center; margin: 0 auto .25em; position: relative; }
.contact main h3:nth-of-type(2)					{ margin-bottom: 2em; }
.contact main h3:nth-of-type(1):before			{ content: ''; position: absolute; display: block; width: 10em; height: 1px; top: -.5em; left: 50%; transform: translateX(-50%); background: rgba(212,150,55,1); }
.contact main h3:nth-of-type(2):before			{ content: ''; position: absolute; display: block; width: 10em; height: 1px; bottom: -.5em; left: 50%; transform: translateX(-50%); background: rgba(212,150,55,1); }
.contact main h3:nth-of-type(1) a				{ text-decoration: underline; }
.contact main h3:nth-of-type(1) a:hover			{ text-decoration: none; }

.contact main figure							{ margin: 0 0 auto 4em; flex-grow: 0; }
.contact main figure img						{ width: 260px; }

.contact main figure div:nth-of-type(1)			{ background: url(/img/photo-charlotte.jpg) no-repeat 50% 50%; background-size: cover; }





/* ==========================================================================
   admin
   ========================================================================== */

.admin main div.container						{ padding: 2.25em 4em; }

div.menus										{ padding: 2.5em 0 6em; }
.menus section									{ padding-bottom: 2em; position: relative; }
.menus h2										{ font: normal normal 1.5em/1.825 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; border-bottom: 1px rgba(212,150,55,1) solid; margin-bottom: .75em; }
.menus h3										{ font: normal normal 1.45em/1 'klasik'; margin: 0 0 .125em; color: rgba(212,150,55,1); text-transform: uppercase; }
.admin .menus ul								{ font-size: .875em; column-count: 1; column-gap: 4em; position: relative; }
.admin .menus li								{ padding: 1em 4em .75em 0; letter-spacing: .05em; position: relative; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.admin .menus li:after							{ content: ''; display: block; position: absolute; bottom: 0; height: 0; width: 100%; border-bottom: 1px #ddd dashed; }
.menus li:last-child:after						{ content: none; }
.menus ul ul									{ padding-left: 1em; font-size: 1em; column-count: 1; }
.menus ul ul li									{ padding-bottom: 0; padding-right: 0; font-style: italic; color: #aaa; text-indent: -.75em; padding-left: .75em; }
.menus ul ul li:after							{ content: none; }
.menus ul ul li:not(:last-child):after			{ content: 'or'; margin-left: 1em; font-style: normal; text-transform: uppercase; opacity: .5; position: static; bottom: auto; display: inline; height: auto; width: auto; border-bottom: none; }
.menus li h4									{ font-weight: bold; color: #333; margin-bottom: .325em; }
.admin .menus p									{ text-align: center; margin-bottom: 0; margin-top: 1em; font-size: .75rem; line-height: 1.25; font-style: italic; color: #666; letter-spacing: .05em; }
.admin .menus li p								{ text-align: left; margin-top: 0; margin-bottom: 0; font-size: 1em; line-height: 1; color: #999; }
.admin .menus ul:before							{ content: none; display: block; background: rgba(212,150,55,1); width: 1px; height: calc(100% + .5em); position: absolute; top: -2.5em; left: calc(33.33334% - .675em); }
.admin .menus ul:after							{ content: none; display: block; background: rgba(212,150,55,1); width: 1px; height: calc(100% + .5em); position: absolute; top: -2.5em; right: calc(33.33334% - .675em); }
.menus ul ul:before, .menus ul ul:after			{ content: none; }

.admin button									{ font-family: 'cateredbycharlotte'; background: rgba(212,150,55,1); color: #fff; text-transform: none; letter-spacing: normal; padding: .25em; position: absolute; top: auto; bottom: .75em; left: auto; right: 0; border-radius: 1em; }
.admin li button:nth-of-type(1)					{ right: 1.75em; }
.admin li button:nth-of-type(2)					{ opacity: .75; }
.admin h2 + button								{ bottom: auto; right: 1.75em; top: .5em; }
.admin button:hover								{ background: #fff; color: rgba(212,150,55,1); text-shadow: none; }
.admin button:before, .admin button:after		{ content: none; }

.admin .menus li:hover h4						{ color: #999; }
.admin .hidden									{ display: none; }

div.shade										{ position: fixed; z-index: -1; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .25s; }
div.lightbox									{ width: calc(100vw - 2em); height: calc(100vh - 2em); padding: 1em; position: fixed; z-index: -1; top: 1em; left: 1em; background: #f7f5ee url(/img/bg.jpg); box-shadow: 0 .125em .5em rgba(0,0,0,.75); opacity: 0; transition: opacity .5s; }
.lightbox div									{ background: rgba(255,255,255,.4); padding: 1em; }

.lightbox div + button							{ top: .5em; right: .5em; bottom: auto; }
.lightbox div button:nth-last-of-type(1)		{ font: normal normal 1.25em/1 'klasik'; position: relative; top: auto; right: auto; bottom: auto; border-radius: 0; margin-top: 1em; padding: .5em 1em; text-transform: uppercase; letter-spacing: .05em; }

.lightbox h2									{ position: relative; padding: 0; margin: 0; }
.lightbox h2 select								{ font: normal normal 1.5em/1.825 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; border: none; outline: none; border-bottom: 1px rgba(212,150,55,1) solid; background: none; width: 100%; }
.lightbox h2:after								{ content: 's'; font: normal normal 1.5em/1 'cateredbycharlotte'; color: rgba(212,150,55,1); position: absolute; right: .5em; top: 50%; transform: translateY(-50%); }

.lightbox h3									{ position: relative; padding: 0; margin: 0; display: none; }
.lightbox h3 select								{ font: normal normal 1.25em/1.5 'klasik'; color: rgba(212,150,55,1); text-transform: uppercase; border: none; outline: none; background: none; width: 100%; }
.lightbox h3:after								{ content: 's'; font: normal normal 1.5em/1 'cateredbycharlotte'; color: rgba(212,150,55,1); position: absolute; right: .5em; top: 50%; transform: translateY(-50%); }

.lightbox h4									{ font-weight: bold; color: #333; margin: 0; outline: none; padding-bottom: .25em; border-bottom: 1px #ccc solid; }

.lightbox p										{ font-style: italic; margin: 0; font-size: 1em; line-height: 1; letter-spacing: .05em; color: #999; top: auto; outline: none; padding-bottom: .375em; border-bottom: 1px #ccc solid; }

.lightbox li									{ padding-bottom: 0; margin-bottom: .5em; padding-right: 0; font-style: italic; color: #aaa; text-indent: -.75em; padding-left: 1.5em; outline: none; padding-bottom: .25em; border-bottom: 1px #ccc solid; }
.lightbox li:before								{ content: '+'; margin-right: 1em; }
.lightbox li:after								{ content: none; }
.lightbox li:not(:last-child):after				{ content: 'or'; margin-left: 1em; font-style: normal; text-transform: uppercase; opacity: .5; position: static; bottom: auto; display: inline; height: auto; width: auto; border-bottom: none; }

.lightbox label									{ display: block; font: normal normal 1em/1 'klasik'; color: #000; text-transform: uppercase; padding: 1em 0 .25em; }
.lightbox label.subcategory						{ display: none; }

.lb div.shade									{ z-index: 100; opacity: 1; }
.lb div.lightbox								{ z-index: 101; opacity: 1; }





/* ==========================================================================
   helper classes
   ========================================================================== */

.clearfix:before, .clearfix:after 				{ content: " "; display: table; }
.clearfix:after 								{ clear: both; }



/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 67em) /* 1072px */
{
   .subnav nav div:before						{ content: ''; position: absolute; z-index: 2000; top: 0; left: 0; display: block; height: 100%; width: 4em; background: linear-gradient(to right, rgba(246,243,236,1) 0%,rgba(246,243,236,0) 100%); pointer-events: none; }
   .subnav nav div:after						{ content: ''; position: absolute; z-index: 2000; top: 0; right: 0; display: block; height: 100%; width: 4em; background: linear-gradient(to left, rgba(246,243,236,1) 0%,rgba(246,243,236,0) 100%); pointer-events: none; }
   .subnav span									{ display: block; width: 1.75em; height: 2em; line-height: 2; text-align: center; position: absolute; z-index: 2001; top: 50%; transform: translateY(-50%); font-weight: bold; cursor: pointer; }
   .subnav span:nth-of-type(1)					{ left: -1.75em; }
   .subnav span:nth-of-type(2)					{ right: -1.75em; }
}

@media only screen and (max-width: 56em) /* 896px */
{
	header nav									{ padding-left: 2em; }
	header nav a								{ letter-spacing: .05em; }
	footer div.container						{ padding-right: 1em; }
	footer figure								{ left: 2em; }
	footer ul									{ width: calc(100% - 15em); }
	footer li									{ padding-left: 1em; }
	
	.contact main figure						{ margin-left: 2em; }
	.contact main figure img					{ width: 200px; }
}

@media only screen and (max-width: 48em) /* 768px */
{
	p 											{ line-height: 1.5; }

	header div.container						{ padding: 0 0 0 2em; }
	.home main div.container, .menu main div.container, .services main div.container, .weddings main div.container, .contact main div.container { padding: 2em; }
	.contact main div.container 				{ padding: 2em 2em 9em; }
	footer div.container						{ padding: 0 1em 0 2em; }
	
	header figure								{ width: 14em; top: 1.25em; }
	header nav									{ width: calc(100% - 14em); padding-left: 2em; }
	
	footer figure								{ width: 6em; /* left: 2em; */ }
	footer figure img:nth-of-type(2)			{ display: none; }
	footer ul									{ width: calc(100% - 10em); }
	
	.home main section.copy, .services main section.copy, .weddings main section.copy { padding-bottom: 6em; }
	
	.menus ul									{ column-count: 2; }
	.menus ul:before							{ left: 50%; }
	.menus ul:after								{ content: none; }
}

@media only screen and (max-width: 40em) /* 640px */
{
	header, main, footer						{ padding: 0 .5em; }
	header div.container						{ height: 3em; padding: 0 1.5em }
	main div.container							{ min-height: calc(100vh - 3em - 6em - 7em); }
	.home main div.container, .menu main div.container, .services main div.container, .weddings main div.container, .contact main div.container { padding: 1.5em; }
	.contact main div.container 				{ padding: 1.5em 1.5em 6em; }
	footer div.container						{ height: 6em; padding: 0 1.5em; }
	
	header										{ position: fixed; top: 0; left: 0; z-index: 100; width: 100%; }
	header figure								{ width: 12em; top: .5em; }
	
	header button								{ position: absolute; left: auto; right: .75em; top: .5em; display: block; padding: 0; width: 2em; height: 2em; }
	header button:before						{ width: calc(100% + .75em); top: -.25em; background: #89775d; }
	header button:after							{ width: calc(100% + .75em); bottom: -.25em; background: #89775d; }
	header button span:before					{ height: calc(100% + .75em); left: -.25em; background: #89775d; }
	header button span:after 					{ height: calc(100% + .75em); right: -.25em; background: #89775d; }
	header button svg							{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
	nav + button svg rect						{ transition: all .25s; transform-origin: 50% 50%; }
	nav.on + button svg rect:nth-child(1)		{ transform: rotate(45deg) translateY(.3em); }
	nav.on + button svg rect:nth-child(2)		{ opacity: 0; }
	nav.on + button svg rect:nth-child(3)		{ transform: rotate(-45deg) translateY(-.3em); }
	
	header nav									{ width: calc(100vw - .5em); height: calc(100vh - 3em); padding-left: 0; background: rgba(69,69,67,.8); position: absolute; top: 3em; left: 0; transform: translateX(100%); transition: transform .25s; }
	header nav.on								{ transform: translateX(0); }
	header nav ul								{ display: block; background: rgba(67,52,28,.85); width: calc(100% - .5em); height: calc(100vh - 3em); padding: 1.25em .75em 0; position: relative; }
	header nav ul:before						{ content: ''; position: absolute; display: block; height: 17.25em; width: 1px; left: 1.25em; top: .75em; background: #6a6358; }
	header nav ul:after							{ content: ''; position: absolute; display: block; height: 17.25em; width: 1px; right: 1.25em; top: .75em; background: #6a6358; }
	header nav li								{ /* display: block; */ width: 100%; height: auto; border-bottom: 1px #6a6358 solid; }
	header nav li:first-child					{ border-top: 1px #6a6358 solid; }
	header nav a								{ /* display: block; width: 100%; */ height: auto; padding: 0 1.5em; font: normal normal 1em/4em 'klasik'; letter-spacing: .1em; color: rgba(212,150,55,1); text-align: left; }
	header nav a:hover, header li.on a			{ color: rgba(212,150,55,1); background: none; text-shadow: none; }
	header nav span								{ }
	header nav a span:after						{ content: none; }
	
	header .mobile								{ position: absolute; display: block; }
	header .mobile.get-in-touch					{ width: calc(100% - 2.5em); top: 19.5em; left: 1em; }
	header .mobile.get-in-touch h2				{ display: block; width: 100%; font: normal normal 1em/2 'klasik'; color: #eee; text-transform: uppercase; border-bottom: 1px #6a6358 solid; padding-left: 1.25em; margin-bottom: 1.5em; white-space: nowrap; }
	header .mobile.get-in-touch p				{ line-height: 1.25; }
	header .mobile.get-in-touch p a				{ font-style: italic; line-height: 1; color: rgba(212,150,55,1); font: italic normal 1em/1 'berylium'; text-transform: none; }

	header .mobile.social						{ width: auto; top: 70vh; left: 50%; transform: translateX(-50%); }
	header .mobile.social svg					{ fill: #eee; width: 2em; height: 2em; }

	footer figure								{ width: 4.25em; top: -5em; padding: 0; }
	footer figure img:nth-of-type(1)			{ width: 4.25em; }
	footer ul									{ width: calc(100% - 6em); padding-top: 1em; }
	footer li									{ width: 100%; }
	footer li:not(:first-child)					{ display: none; }
	footer h2									{ line-height: 1.375em; margin-bottom: .625em; }
	footer p									{ line-height: 1.5em; }
	
	main										{ padding-top: 3em; }
	
	.frame:before								{ width: calc(100% + 2em); top: -.5em; }
	.frame:after								{ width: calc(100% + 2em); bottom: -.5em; }
	.frame span:before							{ height: calc(100% + 2em); left: -.5em; }
	.frame span:after							{ height: calc(100% + 2em); right: -.5em; }
	
	.home main section.copy						{ width: 100%; display: flex; flex-direction: column; flex-direction: column-reverse; justify-content: flex-end; order: 2; }
	.home main .copy p:nth-of-type(1)				{ margin-bottom: 2em; margin-top: 2em; }
	.home main .copy p:nth-of-type(2)				{ text-align: center; }
	.home main .copy p a.btn					{ left: auto; }

	.home main section.gallery					{ width: 100%; margin: 0; padding-bottom: 2em; }
	.home main .gallery figure					{ margin: .25em 0 2em; order: 1; }
	
	.home div.award								{ padding-bottom: 0; padding-top: .25em; margin-bottom: 0; }
	.home div.award:after						{ top: 0; }

	
	.menu main div.container:before				{ content: ''; display: block; width: calc(100% - 3em); height: 4.5em; position: fixed; z-index: 4; top: 3em; left: 1.5em; background: linear-gradient(to bottom, rgba(246,243,236,1) 0%,rgba(246,243,236,1) 75%,rgba(246,243,236,0) 100%); }

	section.subnav								{ position: fixed; width: calc(100% - 4em); }
	.subnav nav div:before, .subnav nav div:after { width: 2em; }
	.subnav ul									{ background: rgba(246,243,236,1); }
	
	.menus ul									{ column-count: 1; }
	.menus ul:before							{ content: none; }
	.menus li									{ padding-bottom: 1em; }
	.menus li:after								{ bottom: .625em; }

	.services main section.copy					{ width: 100%; padding-bottom: 2em; }
	.services main figure						{ width: 100%; height: 25vh; margin: 0 0 8em; }
	
	.weddings main section.copy					{ width: 100%; padding-bottom: 2em; }
	.weddings main figure						{ width: 100%; height: 25vh; margin: 0 0 8em; }
	.weddings main h3							{ margin-bottom: 1em; }

	.contact main div.container					{ flex-direction: column-reverse; }
	.contact main section.copy					{ padding: 0; }
	.contact main h2							{ font-size: 1em; text-align: center; /* width: 75%; */ }
	.contact main p								{ font-size: .875em; text-align: center; /* width: 75%; */ }
	.contact main h3							{ font-size: 1.375em; /* width: 75%; */ }
	.contact main h3:nth-of-type(2)				{ margin-bottom: 2em; }
	.contact main h3:nth-of-type(1):before		{ width: 10em; }
	.contact main h3:nth-of-type(2):before		{ width: 10em; }
	.contact main figure						{ margin: 0 auto 1em; width: 200px; }
	
	.admin main									{ padding-top: 0; }
	.admin main div.container					{ padding: 1em; }
	.admin div.menus							{ padding: 1em 0; }
	.admin .menus li							{ padding: 1em 4em .75em 0; }
	.admin .menus li:after						{ bottom: 0; }
	div.lightbox								{ width: calc(100vw - 1em); height: calc(100vh - 1em); top: .5em; left: .5em; padding: .5em; }
	.lightbox div								{ padding: 0 .5em .5em; }
}