@font-face {
    font-family: 'raleway-light';
    src: url('../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../fonts/raleway-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../fonts/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway-semibold';
    src: url('../fonts/raleway-semibold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway-lightitalic';
    src: url('../fonts/raleway-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway-italic';
    src: url('../fonts/raleway-italic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway-bold';
    src: url('../fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'playfairdisplay-regular';
    src: url('../fonts/playfairdisplay-variablefont_wght-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'playfairdisplay-italic';
    src: url('../fonts/playfairdisplay-italic-variablefont_wght-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-italic-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*, ::before, ::after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
/*	border-color: currentColor;*/
}

:root {
	--main-bg-color: #fbf5ed;
	--main-color: #1b2c34;
	--main-color-light: #fff;
	--box-bg-color: #f7ead7;
	--header-color: #0065ad;
	--pink: #ff6978;
	--pink-hover: #ff263c;
	--dark-blue: #1b2c34;
	--dark-blue-rgba: rgba(27, 44, 52, .25);
	--white: #fff;
	--black: #000;
	--green: #7b918d;
	--bright-green: #34ad00;
	--gray: #adadad;
	--dark-gray: #6d6d6d;
	--yellow: #f6ce3e;
}

html {
	line-height: 2.4em;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body   {
	margin: 0;
	padding: 0;
	font-size: 122%;
	line-height: 1.78em;
	color: var(--main-color);
	text-align: left;
	font-family: raleway-regular;
	background-color: var(--main-bg-color);
	
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-ligatures: none;
	-webkit-font-variant-ligatures: none;
	font-feature-settings: "liga" 0;
	-webkit-font-feature-settings: "liga" 0;
}

body.page-cover {
	overflow: hidden;
}

body.page-cover::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--app-height);
	opacity: .75;
	background-color: #000;
	z-index: 200;
}

body.is-phone {
	font-size: 104%;
}

h1, h2, h3, h4, h5, p, form {
	margin: 0;
	padding: 0;
}

h1 {
	font-family: playfairdisplay-italic;
	font-size: clamp(32px, 4vw, 65px);
	line-height: 1.15em;
	padding-bottom: 8px;
	font-weight: normal;
	margin-bottom: 25px;
	color: var(--header-color);
}

h2 {
	font-family: playfairdisplay-regular;
	font-size: 1.6em;
	font-weight: normal;
	padding-bottom: 10px;
}

h3 {
	font-family: raleway-semibold;
	font-size: 1.1em;
	font-weight: normal;
}

h4 {
	font-family: raleway-semibold;
	font-weight: normal;
}

b {
	font-weight: normal;
	font-family: raleway-semibold;
}

i {
	font-weight: normal;
	font-family: raleway-italic;
}

p {
	padding-bottom: 1.1em;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	/*line-height: 1.15;*/
	margin: 0;
	box-sizing: border-box;
}

button,
input {
	overflow: visible;
}

/* Prevent "auto zoom" in iOS when an input is "focused" */
@supports (-webkit-overflow-scrolling: touch) {
   input {
     font-size: 16px;
   }
}

textarea {
	padding: 7px 0 9px;
	border-bottom: none;
	min-height: 200px;
}

body.is-phone textarea {
	min-height: 100px;
}

input::placeholder,
textarea::placeholder {
	color: var(--placeholder);
	font-size: .55em;
	text-transform: uppercase;
	font-family: asap-medium;
	line-height: 2em;
	letter-spacing: .5px;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

textarea {
	overflow: auto;
	width: 100%;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

.checkbox-wrap {
	display: flex;
	align-items: center;
	position: relative;
}

.checkbox-wrap label {
	position: relative;
	padding-left: 24px;
	cursor: pointer;
	line-height: 1.1em;
}

.checkbox-wrap input {
	opacity: 0;
	width: 0;
	height: 0;
}

.checkbox-wrap label::before {
	content: '';
	position: absolute;
	top: .17em;
	left: 0;
	width: 18px;
	height: 18px;
	border: 2px solid var(--gray-medium);
	border-radius: 4px;
	background-image: none;
	background-size: cover;
	background-repeat: no-repeat;
	background-origin: content-box;
	padding: 1px;
}

body.is-phone .checkbox-wrap label::before {
	top: .11em;
}

.checkbox-wrap input:checked + label::before {
	background-color: var(--blue);
	border-color: var(--blue);
	background-image: url("data:image/svg+xml,%3Csvg height='512px' id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z' fill='%23dedede'/%3E%3C/svg%3E");
}
.checkbox-wrap input:indeterminate + label::before {
	background-color: var(--yellow);
	border-color: var(--yellow);
	background-image: url("data:image/svg+xml,%3Csvg height='512px' id='Layer_1' style='enable-background:new 0 0 512 512;' version='1.1' viewBox='0 0 512 512' width='512px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M417.4,224H94.6C77.7,224,64,238.3,64,256c0,17.7,13.7,32,30.6,32h322.8c16.9,0,30.6-14.3,30.6-32  C448,238.3,434.3,224,417.4,224z' fill='%2316151b'/%3E%3C/svg%3E");
}

img,
a img {
	border-style: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	outline: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:link,
a:visited,
body.is-mobile a:link,
body.is-mobile a:visited,
body.is-mobile a:hover,
body.is-mobile a:active {
	color: var(--pink);
	transition: all .2s ease-in-out;
	text-decoration: none;
}

a:hover,
a:active {
	color: var(--pink-hover);
}

button {
	transition: all .2s ease-in-out;
}

ul {
	list-style-type: none;
	padding-left: 0;
	margin: 0 0 27px 0;
}

li {
	padding-left: 15px;
	margin-left: 15px;
	position: relative;
}

li::before {
	content: '•';
	color: var(--green);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.5em;
}

#main ul li {
	position: relative;
}

#main ul li:before {
	content: '•';
	color: #de354c;
	font-size: 1.5em;
	position: absolute;
	left: -.4em;
	top: .005em;
}

#wrap-outer {
	display: flex;
	flex-direction: column;
	min-height: calc(var(--vh, 1vh) * 100);
	transition: filter .12s ease-in-out;
	filter: blur(0);
	transform: translate3d(0, 0, 0);
	/* "filer:blur" fix for Safari desktop only. Needed so that the this element will show up at ALL browser window sizes */
}

body::after {
	content: '';
	position: fixed;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--app-height);
	transition: opacity .12s ease-in-out;
	opacity: 0;
	background-color: rgba(0, 0, 0, .5);
}

html.doc-blur body {
	overflow: hidden;
}

html.doc-blur #wrap-outer {
	filter: blur(4px);
}

html.doc-blur body::after {
	z-index: 1;
	opacity: 1;
}

#wrap {
	width: 100%;
	max-width: 1500px;
	margin: 105px auto 0;
	flex: 1;
}

/* ===== HEADER ===== */

#header-wrap {
	background-color: var(--main-bg-color);
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	transition: filter .2s ease-in-out;
	filter: blur(0);
	transform: translate3d(0, 0, 0);
	background-color: var(--dark-blue);
}

#header {
	display: flex;
	gap: 40px;
	padding: 20px 20px 20px;
/*	max-width: 1500px;*/
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 1;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
}

html.doc-blur #header {
	background-color: var(--dark-blue);
}

#header #menu {
	width: 33.3333%;
}

#header #menu a {
	display: flex;
	width: 26px;
}

#header #menu a svg {
	width: 100%;
	height: auto;
	fill: var(--white);
}

#header-logo a {
	display: flex;
	width: 260px;
}

#header-logo a svg {
	width: 100%;
	height: auto;
	fill: var(--white);
}

#header-logo a svg path {
	fill: var(--white);
}

#header-e-contact {
	display: flex;
	position: relative;
	top: 2px;
	width: 33.3333%;
	justify-content: right;
}

#header-e-contact > div {
	position: relative;
	display: flex;
	align-items: center;
}

#header-e-contact > div:first-child {
	margin-right: 40px;
}

#header-e-contact > div:first-child::after {
	content: '';
	width: 1px;
	height: 150%;
	opacity: .35;
	position: absolute;
	top: -30%;
	right: -20px;
	background-color: var(--white);
}

#header-e-contact a {
	padding-left: 30px;
	display: flex;
	position: relative;
}

#header-e-contact a:link,
#header-e-contact a:visited,
#header-e-contact a:active {
	color: var(--white);
}

#header-e-contact a:hover {
	color: var(--pink);
}

#header #header-e-contact a::before {
	position: absolute;
	content: '';
	width: 22px;
	height: 22px;
	top: -2px;
	left: 0;
	display: block;
	background-repeat: no-repeat;
}

#header #header-e-contact .phone::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='none' height='256' width='256'/%3E%3Cpath d='M222,158.4l-46.9-20a15.6,15.6,0,0,0-15.1,1.3l-25.1,16.7a76.5,76.5,0,0,1-35.2-35h0L116.3,96a15.9,15.9,0,0,0,1.4-15.1L97.6,34a16.3,16.3,0,0,0-16.7-9.6A56.2,56.2,0,0,0,32,80c0,79.4,64.6,144,144,144a56.2,56.2,0,0,0,55.6-48.9A16.3,16.3,0,0,0,222,158.4Z' fill='%23fff'/%3E%3Cpath d='M157.4,47.7a72.6,72.6,0,0,1,50.9,50.9,8,8,0,0,0,7.7,6,7.6,7.6,0,0,0,2.1-.3,7.9,7.9,0,0,0,5.6-9.8,88,88,0,0,0-62.2-62.2,8,8,0,1,0-4.1,15.4Z' fill='%23fff'/%3E%3Cpath d='M149.1,78.6a40.4,40.4,0,0,1,28.3,28.3,7.9,7.9,0,0,0,7.7,6,6.4,6.4,0,0,0,2-.3,7.9,7.9,0,0,0,5.7-9.8,55.8,55.8,0,0,0-39.6-39.6,8,8,0,1,0-4.1,15.4Z' fill='%23fff'/%3E%3C/svg%3E");
}

#header #header-e-contact .text::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='none' height='256' width='256'/%3E%3Cpath d='M216,48H40A16,16,0,0,0,24,64V222.8a15.7,15.7,0,0,0,9.3,14.5,14.7,14.7,0,0,0,6.7,1.6,16,16,0,0,0,10.3-3.8l31.8-26.7L216,208a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM80,140a12,12,0,1,1,12-12A12,12,0,0,1,80,140Zm48,0a12,12,0,1,1,12-12A12,12,0,0,1,128,140Zm48,0a12,12,0,1,1,12-12A12,12,0,0,1,176,140Z' fill='%23fff'/%3E%3C/svg%3E");
}

#header #header-e-contact a:link svg text,
#header #header-e-contact a:visited svg text,
#header #header-e-contact a:active svg text {
	fill: var(--white);
	transition: all .2s ease-in-out;
}

#header #header-e-contact a:hover svg text {
	fill: var(--pink-hover);
}

/* ===== NAVIGATION ===== */

nav {
	background-color: var(--white);
	top: 100%;
	position: absolute;
	width: calc(100% - 40px);
	max-width: 1600px;
	left: 50%;
	transform: translate(-50%, -30px);
	color: var(--main-color);
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	opacity: 0;
	transition: opacity .12s ease-in-out, transform .12s ease-in-out;
	height: 0;
	overflow: hidden;
	max-height: calc(var(--app-height) - var(--app-header-height));
	overflow: auto;
}

body.is-phone nav {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

nav.show {
	opacity: 1;
	height: auto;
	transform: translate(-50%, 0);
	box-shadow: 0px 5px 9px -5px rgba(0, 0, 0, .45);
}

#nav-inner {
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

#nav-inner > div {
	display: flex;
	flex-direction: column;
	position: relative;
}

#nav-inner > div:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 1px;
	background-color: var(--dark-blue);
	opacity: .35;
	left: -20px;
}

#nav-inner > div:nth-child(1n + 3) > div {
	display: flex;
	flex-direction: column;
}

#nav-brands {
	width: 40%;
	padding-bottom: 10px;
}

#nav-brands > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#nav-brands > div > div {
	margin: 20px 20px 0 0;
	width: calc(1/3*100% - (1 - 1/3)*20px);
}

#nav-brands > div > div:nth-child(3n) {
	margin-right: 0;
}

#nav-brands > div::after {
	content: '';
	flex: auto;
}

#nav-brands > div > div:nth-child(-n+3) {
	margin-top: 0;
}

#nav-brands > div > div > a {
	display: flex;
	height: 54px;
}

#nav-brands > div > div span {
	display: none;
}

#nav-brands > div > div svg {
	width: 100%;
	height: auto;
	fill: var(--white);
}

#nav-brands a {
	border-radius: 4px;
}

#nav-brands .c-bechstein a {
	background-color: #111941;
	padding: 11px;
}

#nav-brands .w-hoffmann a {
	background-color: #087c7c;
	padding: 20px;
}

#nav-brands .ritmuller a {
	background-color: #c79b52;
	padding: 18px;
}

#nav-brands .casio a {
	background-color: #00309c;
	padding: 19px;
}

#nav-brands .pre-owned a {
	background-color: #453823;
	padding: 13px;
}

#nav-brands .clearance a {
	background-color: #942911;
	padding: 18px;
}

#nav-brands .holiday-specials a {
	background-color: #942911;
	padding: 11px;
}

#nav-brands .zimmermann a {
	background-color: #EF7910;
	padding: 10px;
}

#nav-brands .specials a {
	background-color: #942911;
	padding: 18px;
}

#nav-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .5);
	border-bottom: 1px solid #1e82c5;
	border-top: 1px solid #1e82c5;
	z-index: 1000;
}

body.is-phone #nav-wrap {
	top: auto;
	top: -1px;
	box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .5);
}

#nav {
	width: 100%;
	justify-content: space-evenly;
	background-color: #ededee;
}

body.is-phone #nav {
	flex-direction: column;
	position: fixed;
	top: -50%;
	z-index: 1;
	box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .5);
	transition: all .4s cubic-bezier(.22,1,.36,1);
}

#nav,
#nav ul {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 5;
	justify-content: space-evenly;
	width: 100%;
	font-size: .83em;
	letter-spacing: 3px;
}

#nav li {
	margin: 0;
	padding: 0;
	position: relative;
}

#nav li a,
body.is-phone #nav li a {
	display: inline-block;
	color: #000;
	transition: none;
	padding: 7px 17px 2px;
	position: relative;
	text-decoration: none;
	font-family: raleway-light;
}

body.is-phone #nav li a {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

body.is-phone #nav li:first-child {
	display: none;
}

body.is-phone #nav li:last-child a {
	padding-bottom: 12px;
}

#nav > li > a:hover {
	color: #7d1051;
}

#nav-logo {
	display: none;
	background-color: #ecedee;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 2px;
	position: relative;
	z-index: 2;
	box-shadow: 0 10px 14px -15px rgba(0, 0, 0, .5);
}

#nav-logo a {
	max-width: 5.2em;
	position: relative;
	top: -3px;
	display: inline-block;
}

body.is-phone #nav-logo {
	display: block;
}

#nav-action {
	display: none;
	position: absolute;
	z-index: 6;
	color: #f1ede4;
	line-height: 1;
	left: 12px;
	bottom: 0;
	z-index: 3;
}

body.is-phone #nav-action {
	display: block;
}

#nav-action svg {
	padding: 0px 0 1px;
	cursor: pointer;
	top: -12px;
}

#nav-action svg:first-child {
	position: relative;
	z-index: 1;
}

#nav-action svg:last-child {
	position: absolute;
	/*top: 0;*/
	left: 0;
	visibility: hidden;
	z-index: 0;
}

#nav > li:hover.sub > a {
	background-color: #00a2ff;
	color: #f0f0f0;
	display: block;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .3);
}

body.is-mobile #nav > li:hover.sub > a {
/*	background-color: transparent;
	color: #313131;
	display: inline-block;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: none;*/
}

/*#nav > li:hover.sub.closed > a {
	display: inline-block;
	color: #313131;
	background-color: transparent;
	box-shadow: none;
}*/

#nav > li.sub > a span {
	white-space: nowrap;
}

#nav > li.sub > a span i {
	font-weight: bold;
}

body.is-mobile #nav > li.sub > a span i {
	display: none;
}

#nav > li li a {
	display: block;
	padding: 9px 13px 9px 19px;
}

#nav > li li a:after {
	opacity: 0;
	position: absolute;
	content: '';
	width: 6px;
	height: 100%;
	background-color: #00a2ff;
	top: 0;
	left: 0;
	transition: opacity .2s ease-in-out;
}

#nav > li li a:hover:after {
	opacity: 1;
}

#nav li > ul {
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .3);
	position: absolute;
	left: -999em;
	display: block;
	overflow: hidden;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: #cdcee8;
}

#nav li:hover > ul {
	left: auto;
}

/*body.is-mobile #nav li:hover > ul {
	left: -999em;
	right: auto;
}*/

#nav > li:hover.sub.closed > ul {
	left: -999em;
	right: auto;
}

#nav li:hover > ul.ul_shift {
	right: 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 0;
}

#nav li > ul li a {
	border: none;
	width: 14.5em;
	text-align: left;
	line-height: 1.2em;
	padding-top: 6px;
	padding-bottom: 6px;
}

#nav li > ul li:first-child a {
/*	border-top: none;*/
}

#nav li > ul li a:link,
#nav li > ul li a:visited {
	background-color: #cdcee8;
}

#nav li > ul li a:hover {
	/*background-color: #083b47;*/
	/*padding-left: 13px;
	border-left: 6px solid #00a2ff;*/
}

#nav li > ul li a:active {
	
}

/* ===== MAIN ===== */

#main {
	padding: 0 100px 70px;
}

#main > .section:last-child {
	margin-bottom: 0;
}

#main > .section > p:last-child {
	padding-bottom: 0;
}

/* ===== FOOTER ===== */

#footer-wrap {
	background-color: var(--dark-blue);
	padding: 40px 0 10px;
	font-family: raleway-semibold;
}

#footer {
	display: flex;
	flex-wrap: wrap;
	color: var(--white);
	justify-content: center;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 100px;
}

#footer-left {
	width: 50%;
	display: flex;
	flex-direction: column;
	padding-right: clamp(20px, 5vw, 95px);
	align-items: end;
}

#footer-left h4 {
	text-decoration: underline;
}

#hours {
	margin-bottom: 20px;
	font-family: raleway-regular;
	padding-left: 15px;
}

#footer-right {
	width: 50%;
	padding-left: clamp(20px, 5vw, 95px);
	display: flex;
	flex-direction: column;
	gap: 36px 0;
}

#socials {
	display: flex;
	gap: 20px;
}

#socials a {
	display: flex;
	width: 25px;
}

#socials a svg {
	width: 100%;
	height: auto;
	fill: var(--white);
}

#footer #footer-e-contact a {
	position: relative;
	padding-left: 30px;
}

#footer #footer-e-contact a::before {
	position: absolute;
	content: '';
	width: 22px;
	height: 22px;
	top: 1px;
	left: 0;
	display: block;
	background-repeat: no-repeat;
}

#footer #footer-e-contact .phone::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='none' height='256' width='256'/%3E%3Cpath d='M222,158.4l-46.9-20a15.6,15.6,0,0,0-15.1,1.3l-25.1,16.7a76.5,76.5,0,0,1-35.2-35h0L116.3,96a15.9,15.9,0,0,0,1.4-15.1L97.6,34a16.3,16.3,0,0,0-16.7-9.6A56.2,56.2,0,0,0,32,80c0,79.4,64.6,144,144,144a56.2,56.2,0,0,0,55.6-48.9A16.3,16.3,0,0,0,222,158.4Z' fill='%23fff'/%3E%3Cpath d='M157.4,47.7a72.6,72.6,0,0,1,50.9,50.9,8,8,0,0,0,7.7,6,7.6,7.6,0,0,0,2.1-.3,7.9,7.9,0,0,0,5.6-9.8,88,88,0,0,0-62.2-62.2,8,8,0,1,0-4.1,15.4Z' fill='%23fff'/%3E%3Cpath d='M149.1,78.6a40.4,40.4,0,0,1,28.3,28.3,7.9,7.9,0,0,0,7.7,6,6.4,6.4,0,0,0,2-.3,7.9,7.9,0,0,0,5.7-9.8,55.8,55.8,0,0,0-39.6-39.6,8,8,0,1,0-4.1,15.4Z' fill='%23fff'/%3E%3C/svg%3E");
}

#footer #footer-e-contact .text::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='none' height='256' width='256'/%3E%3Cpath d='M216,48H40A16,16,0,0,0,24,64V222.8a15.7,15.7,0,0,0,9.3,14.5,14.7,14.7,0,0,0,6.7,1.6,16,16,0,0,0,10.3-3.8l31.8-26.7L216,208a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM80,140a12,12,0,1,1,12-12A12,12,0,0,1,80,140Zm48,0a12,12,0,1,1,12-12A12,12,0,0,1,128,140Zm48,0a12,12,0,1,1,12-12A12,12,0,0,1,176,140Z' fill='%23fff'/%3E%3C/svg%3E");
}

#footer #footer-e-contact .email::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 160'%3E%3Crect fill='none' height='160' width='208'/%3E%3Cpath d='M200,0H8C3.58,0,0,3.58,0,8v136c0,8.84,7.16,16,16,16h176c8.84,0,16-7.16,16-16V8c0-4.42-3.58-8-8-8ZM74.7,80l-58.7,53.8V26.2l58.7,53.8ZM86.5,90.9l12.1,11c3.06,2.8,7.74,2.8,10.8,0l12.1-11,57.9,53.1H28.6l57.9-53.1ZM133.3,80l58.7-53.8v107.6l-58.7-53.8Z' fill='%23fff' stroke-width='0'/%3E%3C/svg%3E");
	width: 18px;
	height: 18px;
	left: 2px;
	top: 6px;
}

#contact-privacy {
	display: flex;
}

#contact-privacy > div:first-child {
	position: relative;
	margin-right: 40px;
}

#contact-privacy > div:first-child::after {
	content: '';
	width: 1px;
	height: calc(100%);
	opacity: .35;
	position: absolute;
	top: 0;
	right: -20px;
	background-color: var(--white);
}

#footer_nav {
	order: 1;
	text-align: right;
}

#footer_nav a {
	text-transform: uppercase;
	margin: 0 20px;
}

#footer_nav a:last-child {
	margin-right: 0;
}

#footer_nav a:link,
#footer_nav a:visited,
body.is-mobile #footer_nav a:link,
body.is-mobile #footer_nav a:visited,
body.is-mobile #footer_nav a:hover,
body.is-mobile #footer_nav a:active {
	color: #f3f3f3;
}

#footer_nav a:hover,
#footer_nav a:active {
	color: #dacaf4;
}

#copyright {
	opacity: .35;
	padding: 12px 0 0;
	text-align: center;
	width: 100%;
	border-top: 1px solid var(--white);
	font-size: .7em;
	margin-top: 30px;
}

#copyright span {
	white-space: nowrap;
}

.holiday-hours-wrap > div {
	max-width: 1500px;
	padding: 0 100px;
	margin: 0 auto 50px;
	color: var(--white);
}

.holiday-hours-wrap > div h2 {
	text-align: center;
}

#holiday-hours {
	display: flex;
	justify-content: center;
	gap: 60px;
	align-items: flex-start;
}

#holiday-hours > div {
	padding: 20px 20px 10px;
	border-radius: 6px;
	overflow: hidden;
}

#holiday-hours > div h3 {
	margin: -20px -20px 5px;
	text-align: center;
	padding: 5px 20px;
}

#hol-tg {
	background-color: #954f2b;
}

#hol-tg h3 {
	background-color: #6d3a20;
}

#holiday-hours > div#hol-ch {
	width: auto;
	background-color: #c71e1b;
}

#hol-ch h3 {
	background-color: #9a1715;
}

#hol-ny {
	background-color: #f0b03a;
	color: var(--main-color);
}

#hol-ny h3 {
	background-color: #e69b11;
}

#hol-ch > div {
	display: flex;
	gap: 60px;
}

/* ===== MAIN ===== */

.box-wrap {
	margin-bottom: 10px;
}

.button,
a.button,
body.is-mobile .button:link,
body.is-mobile .button:visited,
body.is-mobile .button:hover,
body.is-mobile .button:active,
body.is-mobile a.button:hover {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 0 4px;
	flex-wrap: wrap;
	text-align: center;
	transition: background-color 0.3s ease-in-out;
	background-color: var(--pink);
	color: var(--white);
	text-transform: uppercase;
	font-size: .8em;
	padding: 16px;
	margin: 0 auto;
	/*width: 100%;
	max-width: 325px;*/
	border-radius: 4px;
	font-family: raleway-bold;
	cursor: pointer;
	position: relative;
	line-height: 1em;
}

body.is-windows .button {
	letter-spacing: 1px;
	padding-top: 20px;
}

.button:hover,
a.button:hover {
	background-color: var(--pink-hover);
}

a.button {
	margin: 0;
}

.button.lg {
	width: 100%;
	max-width: 325px;
}

.button.md {
	padding: 12px;
}

body.is-windows .button.md {
	padding-top: 16px;
}

.button.sm,
body.is-mobile .button.sm {
	padding: 8px 16px;
}

body.is-windows .button.sm {
	padding-top: 12px;
}

.button.anim.clicked,
.button.anim.clicked:hover {
	background-color: var(--gray);
	cursor: default;
}

.button.anim > span:last-child {
	opacity: 0;
	position: absolute;
	padding-right: calc(24px + 10px);
}

.button.anim.clicked > span:first-child {
	visibility: hidden;
}

.button.anim.clicked > span:last-child {
	opacity: 1;
}

.button.anim > span:last-child::before,
.button.anim > span:last-child::after {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid var(--white);
	position: absolute;
	top: 50%;
	right: 0;
}

.button.anim > span:last-child::before {
	transform: translateY(-50%);
	opacity: .25;
}

.button.anim > span:last-child::after {
	transform: translateY(-50%) rotate(0deg);
	transform-origin: center;
	border-top-color: transparent;
	animation: spin .75s linear infinite;
}

@keyframes spin {
	100% {
		transform: translateY(-50%) rotate(360deg);
	}
}

@keyframes anim-fade-in-left-skew8 {
	from {
		opacity: 0;
		transform: translate3d(-60px, 0, 0) skew(-8deg);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0) skew(-8deg);
	}
}

@keyframes anim-fade-in-left {
	from {
		opacity: 0;
		transform: translate3d(-60px, 0, 0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-fade-in-right {
	from {
		opacity: 0;
		transform: translate3d(60px, 0, 0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-fade-in-bottom {
	from {
		opacity: 0;
		transform: translate3d(0, 60px, 0);
	}
	
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.slide-in {
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.slide-in.from-left.skew8.animate {
	animation-name: anim-fade-in-left-skew8;
}

.slide-in.from-left.animate {
	animation-name: anim-fade-in-left;
}

.slide-in.from-right.animate {
	animation-name: anim-fade-in-right;
}

.slide-in.from-bottom.animate {
	animation-name: anim-fade-in-bottom;
}

/* ===== MEDIA QUERIES ===== */

@media screen and (max-width: 1250px) {
	#hol-ch > div {
		display: block;
	}
}

@media screen and (max-width: 1165px) {
	#nav-inner {
		flex-wrap: wrap;
	}
	
	#nav-inner > div {
		width: 50%;
	}
	
	#nav-inner > div:nth-of-type(3)::before {
		height: 1px;
		width: 81%;
		right: 20px;
		left: auto;
	}

	#nav-inner > div:last-child::after {
		content: '';
		position: absolute;
		top: 0;
		height: 1px;
		width: calc(81% + 40px);
		left: -20px;
		background-color: var(--dark-blue);
		opacity: .35;
	}
	
	#nav-inner > div:nth-child(-1n + 2) {
		margin-bottom: 20px;
	}
	
	#nav-inner > div:nth-child(1n + 3) {
		padding-top: 20px;
	}
	
	#nav-inner > div:last-child::before {
		height: calc(100% - 20px);
		top: 20px;
	}
}

@media screen and (max-width: 1100px) {
	#header {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	#header-e-contact {
		flex-direction: column;
		gap: 4px 0;
	}
	
	#header-e-contact > div {
		justify-content: right;
	}
	
	#header-e-contact > div:first-child {
		margin-right: 0;
	}
	
	#header-e-contact a {
		width: 140px;
	}
}

@media screen and (max-width: 990px) {
	.holiday-hours-wrap > div {
		padding: 0 20px;
	}
	
	#holiday-hours {
		flex-direction: column;
		align-items: center;
	}
	
	#hol-ch > div {
		display: flex;
	}
}

@media screen and (max-width: 840px) {
	#header,
	#main,
	#footer {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media screen and (max-width: 700px) {
	#main {
		padding-bottom: 40px;
	}
	
	#nav-inner {
		display: block;
	}
	
	#nav-inner > div {
		width: auto;
	}
	
	#nav-inner > div:nth-child(1n)::before {
		display: none;
	}
	
	#nav-inner > div:not(:first-child)::after {
		content: '';
		position: absolute;
		top: 0;
		height: 1px;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--dark-blue);
		opacity: .35;
	}
	
	#nav-inner > div:nth-of-type(2) {
		padding-top: 20px;
	}
	
	#nav-inner > div:nth-of-type(3) {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 600px) {
	#header {
		flex-wrap: wrap;
		gap: 4px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	#header #menu {
		position: absolute;
		top: 16px;
		width: auto;
	}
	
	#header-logo {
		display: inline-block;
		margin: 0 auto;
		position: relative;
		top: -4px;
	}
	
	#header-e-contact {
		width: calc(100% + 40px);
		flex-direction: row;
		justify-content: center;
		margin-left: -20px;
		margin-right: -20px;
		margin-bottom: -18px;
		padding: 10px;
		gap: 0;
	}
	
	#header-e-contact > div:first-child {
		margin-right: 40px;
	}
	
	#footer {
		flex-direction: column;
		align-items: center;
	}
	
	#footer-left {
		margin-bottom: 28px;
		padding-right: 0;
		align-items: baseline;
		width: auto;
	}
	
	#footer-right {
		padding-left: 0;
		width: auto;
	}
	
	#socials,
	#contact-privacy {
		justify-content: center;
	}
	
	#nav-brands .w-hoffmann a,
	#nav-brands .ritmuller a {
		padding: 11px;
	}
}

@media screen and (max-width: 460px) {
	#header-logo a {
		width: 200px;
	}
	
	#header #menu {
		top: 13px;
	}
	
	#holiday-hours {
		align-items: stretch;
	}
	
	#hol-ch > div {
		display: block;
	}
}