@charset "UTF-8";
/* =========================================================================
   Katya Gotsdiner-McMahan — main stylesheet
   -------------------------------------------------------------------------
   Static rebuild of the retired dynamic site, reproducing its "Chameleon"
   design. Hand-editable: no build step, no preprocessor, no framework.

   Section map
     1.  Web fonts (self-hosted)
     2.  Reset
     3.  Base typography
     4.  Page background and the white card
     5.  Header: logo, tagline, navigation, social icon, search
     6.  Mobile navigation
     7.  Quote / page-title band
     8.  Breadcrumbs
     9.  Homepage: three-panel blurb row
     10. Inner pages: article column + sidebar
     11. Content elements (images, captions, lists, quotes, forms)
     12. Page-specific blocks (recordings, performances, gallery, affiliations)
     13. Photo-gallery lightbox
     14. Footer
     15. Responsive rules  <-- ALL media queries live down there, labelled
   ========================================================================= */


/* =========================================================================
   1. WEB FONTS  (self-hosted; the site makes no third-party font requests)
   -------------------------------------------------------------------------
   Kreon      — legacy static cut, version 1.001 (2010). This is the release
                the 2013 design was drawn against, NOT today's redesigned
                variable Kreon (v2.x), whose letterforms differ.
                SIL Open Font License 1.1 — see fonts/OFL-Kreon.txt
   Droid Sans — genuine Ascender Droid Sans v1.00.
                Apache License 2.0 — see fonts/LICENSE-DroidSans-Apache-2.0.txt
   ========================================================================= */

@font-face {
	font-family: 'Kreon';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(../fonts/kreon-300.woff2) format('woff2');
}
@font-face {
	font-family: 'Kreon';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/kreon-400.woff2) format('woff2');
}
@font-face {
	font-family: 'Droid Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/droid-sans-400.woff2) format('woff2');
}
@font-face {
	font-family: 'Droid Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/droid-sans-700.woff2) format('woff2');
}

/* ---- Cyrillic, for the Russian pages -----------------------------------
   Neither Kreon nor Droid Sans contains a single Cyrillic glyph — verified
   against the font files themselves, not just the subsets. Without these
   rules every Russian page falls back to whatever sans-serif the visitor's
   machine happens to have, and looks nothing like the English site.

   So the two families are EXTENDED rather than replaced: these faces are
   declared under the same family names but limited by unicode-range to the
   Cyrillic block, so Latin text (including the English names of American
   churches and orchestras inside Russian sentences) still renders in the
   genuine Kreon and Droid Sans, and only Cyrillic switches.

   Roboto Slab stands in for Kreon — both are light slab-serifs, and Kreon
   has no Cyrillic in any release. Noto Sans stands in for Droid Sans, which
   is Google's own designated successor to it.
   Licences: fonts/LICENSE-RobotoSlab-Apache-2.0.txt, fonts/OFL-NotoSans.txt
   ----------------------------------------------------------------------- */

@font-face {
	font-family: 'Kreon';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(../fonts/roboto-slab-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Kreon';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/roboto-slab-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Droid Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/noto-sans-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Droid Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/noto-sans-cyrillic.woff2) format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* =========================================================================
   2. RESET  (trimmed Meyer reset, as the original theme used)
   ========================================================================= */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, em, img, small, strong, sub, sup,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, figcaption, footer, header, main, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, figure, figcaption, footer, header, main, nav, section {
	display: block;
}
ul, ol {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Float containment. Used on the header, the blurb row and the content row. */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clear {
	clear: both;
}

/* Visible only to screen readers. */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus. The original had none; this is an accessibility addition. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid #427d8b;
	outline-offset: 2px;
}


/* =========================================================================
   3. BASE TYPOGRAPHY
   -------------------------------------------------------------------------
   Body copy is Droid Sans 12px/20px in #929292.
   Every heading is Kreon 300 with letter-spacing:-1px — that tight tracking
   is most of this design's character. Do not remove it.
   ========================================================================= */

body {
	font-family: 'Droid Sans', Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #929292;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

p {
	padding-bottom: 10px;
	line-height: 24px;
}

a {
	color: #00b7f3;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

strong, b {
	font-weight: bold;
	color: #1c1c1c;
}
cite, em, i {
	font-style: italic;
}
pre, code {
	font-family: "Courier New", Courier, monospace;
	margin-bottom: 10px;
}
small {
	font-size: 11px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Kreon', Arial, sans-serif;
	font-weight: 300;
	color: #808080;
	letter-spacing: -1px;
	line-height: 1em;
	padding-bottom: 5px;
	text-shadow: none;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #808080;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

/* Nothing may ever be wider than its column. */
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
embed, iframe, object, video {
	max-width: 100%;
}


/* =========================================================================
   4. PAGE BACKGROUND AND THE WHITE CARD
   -------------------------------------------------------------------------
   The wooden texture is a TRANSLUCENT greyscale PNG (40% alpha) laid over
   #6f6755 and tiled on both axes. Compositing the two is what produces the
   rendered #635e54. Do not replace the pair with a flat colour.
   ========================================================================= */

body {
	background-color: #6f6755;
	background-image: url(../images/design/body-bg15.png);
	background-repeat: repeat;
	padding: 48px 0 98px;
}

#container {
	width: 960px;
	max-width: 100%;              /* card must never exceed the viewport */
	margin: 0 auto;
	position: relative;
	background-color: #fff;
	/* Replaces header-shadow.png: a ~2% black gradient over the top 28px. */
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0) 28px);
	background-repeat: repeat-x;
	border-radius: 7px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}


/* =========================================================================
   5. HEADER
   ========================================================================= */

#header {
	position: relative;
	padding: 30px 35px 3px;
}

#logo {
	float: left;
	max-width: 100%;
	height: auto;
	width: auto;
}

/* The tagline is dragged back underneath the floated logo by a negative
   margin. -143px is the original theme value, calibrated for a 195px stock
   logo rather than the 300px one actually in use — so the words sit slightly
   right of centre. This is deliberate: the site owner asked to keep it. */
p#slogan {
	float: left;
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 12.5px;
	color: #66929c;
	text-transform: uppercase;
	padding-top: 0;
	padding-bottom: 10px;
	margin-left: -143px;
	margin-top: 27px;
}

/* ---- primary navigation ------------------------------------------------ */

/* The menu sits right-aligned on its own line, below the logo and tagline.
   In the original that happened by accident — six long menu items would not
   fit beside the logo, so the float dropped. With five shorter items it now
   fits, so `clear` states the intent explicitly instead of relying on the
   menu staying wide. The padding lands the links exactly where they were. */
#primary-nav {
	float: right;
	clear: both;
	padding-top: 14px;
}
#top-menu li {
	float: left;
	position: relative;
	padding: 0 9px;
}
#top-menu a {
	display: block;
	float: left;
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #393939;
	text-decoration: none;
}
#top-menu a:hover {
	color: #427d8b;
	text-decoration: none;
}
/* Current page. Steps from weight 300 to 400 as well as changing colour. */
#top-menu a[aria-current="page"] {
	color: #427d8b;
	font-weight: 400;
}

/* ---- facebook icon and search pill ------------------------------------- */

#additional-info {
	position: absolute;
	top: 1px;
	right: 1px;
}

#social-icons {
	float: left;
	padding-top: 9px;
	padding-right: 20px;
}
#social-icons a {
	padding-left: 3px;
}

/* ---- language switcher (EN | RU) --------------------------------------- */

#lang-switch {
	position: absolute;
	top: 5px;
	right: 44px;                  /* just left of the Facebook icon */
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1;
}
#lang-switch a {
	color: #929292;
	text-decoration: none;
	padding: 0 5px;
}
#lang-switch a:hover {
	color: #427d8b;
	text-decoration: none;
}
#lang-switch a[aria-current="page"] {
	color: #427d8b;
	font-weight: 400;
}
#lang-switch span {
	color: #d0d0d0;
}

#search-form {
	float: right;
	background: url(../images/design/search-bg.png) no-repeat;
	width: 161px;
	height: 28px;
}
#search-form #searchinput {
	background: none;
	border: none;
	float: left;
	margin: 5px 7px 0 5px;
	width: 114px;
	padding-left: 9px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 11px;
	font-style: italic;
	color: #a3a3a3;
	text-shadow: 1px 1px 0 #ffffff;
	-webkit-appearance: none;
}
#search-form #searchinput::placeholder {
	color: #a3a3a3;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	opacity: 1;
}
#search-form #searchsubmit {
	float: right;
	margin-top: 7px;
	margin-right: 7px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}


/* =========================================================================
   6. MOBILE NAVIGATION
   -------------------------------------------------------------------------
   Hidden above 767px. The button and the panel are siblings (the original
   theme nested a <ul> inside an <a>, which is invalid HTML).
   ========================================================================= */

#mobile-nav-wrap {
	display: none;
	position: relative;
	text-align: center;
}

#mobile_nav {
	display: inline-block;
	position: relative;
	padding: 12px 26px 12px 53px;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 15px;
	color: #464646;
	text-shadow: 1px 1px 0 #fff;
	background: #f9f9f9;
	border: 1px solid #ececec;
	box-shadow: inset 0 0 1px 1px #fff;
	cursor: pointer;
	line-height: 20px;
}
#mobile_nav:hover {
	color: #111;
	text-decoration: none;
}
#mobile_nav > span {
	display: block;
	width: 17px;
	height: 11px;
	background: url(../images/design/mobile-chevron.png) no-repeat;
	position: absolute;
	top: 17px;
	left: 19px;
	transition: transform 0.5s ease-in-out;
}
#mobile_nav.opened > span {
	transform: rotate(-180deg);
}

#mobile_menu {
	position: absolute;
	top: 43px;
	left: 0;                      /* JS re-centres this under the button */
	width: 365px;
	max-width: 100%;
	background: #f9f9f9;
	border: 1px solid #ececec;
	box-shadow: inset 0 0 1px 1px #fff;
	text-align: center;
	z-index: 1000;
	padding: 0;
	/* Slide open/closed over 500ms, the same duration the original used. */
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition: max-height 0.5s ease-in-out, visibility 0s linear 0.5s;
}
#mobile_menu.open {
	max-height: 400px;
	visibility: visible;
	transition: max-height 0.5s ease-in-out, visibility 0s linear 0s;
}
#mobile_menu ul {
	padding: 15px 0 9px;
}
#mobile_menu li {
	padding-bottom: 15px;
}
#mobile_menu a {
	font-family: 'Droid Sans', Arial, Verdana, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: #393939;
}
#mobile_menu a:hover,
#mobile_menu a[aria-current="page"] {
	color: #427d8b;
	text-decoration: none;
}


/* =========================================================================
   7. QUOTE / PAGE-TITLE BAND
   -------------------------------------------------------------------------
   890px centred inside the 960px card. The two hairlines replace the
   near-invisible top-/bottom-category-bg.png gradients.
   ========================================================================= */

#category-name {
	text-align: center;
	width: 890px;
	max-width: 100%;
	margin: 0 auto;
	padding-top: 38px;
	border-top: 1px solid #f0f0f0;
}
#category-inner {
	padding-bottom: 28px;
	border-bottom: 1px solid #f0f0f0;
}

/* Inner-page title. */
.category-title {
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 28px;
	font-weight: 300;
	color: #1d1d1d;
	letter-spacing: -1px;
	line-height: 1em;
	padding-bottom: 5px;
}

/* Homepage quote. Same metrics, a slightly softer black. */
.quote-text {
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 28px;
	font-weight: 300;
	color: #3b3b3b;
	letter-spacing: -1px;
	line-height: 1em;
	padding-bottom: 5px;
}
.quote-attribution {
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #929292;
	line-height: 24px;
	padding-bottom: 10px;
}


/* =========================================================================
   8. BREADCRUMBS
   ========================================================================= */

#breadcrumbs {
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #1d1d1d;
	padding-top: 17px;
	padding-left: 48px;
	margin-bottom: 28px;
}
#breadcrumbs a {
	color: #929292;
	text-decoration: none;
}
#breadcrumbs a:hover {
	color: #1d1d1d;
}
#breadcrumbs .raquo {
	color: #929292;
}


/* =========================================================================
   9. HOMEPAGE — THREE-PANEL BLURB ROW
   -------------------------------------------------------------------------
   960 - (2 x 48) = 864 = (3 x 244) + (2 x 66). Exact.
   ========================================================================= */

#content-area {
	padding: 45px 48px 60px;
}

#services {
	margin-bottom: 40px;
	/* The theme printed an empty <h3> above each panel, which contributed
	   9px of padding+margin. Reproduced here so the row sits where it did. */
	padding-top: 9px;
}

.service {
	float: left;
	width: 244px;
	max-width: 100%;
	margin-right: 66px;
}
.service.last {
	margin-right: 0;
}
.service p {
	margin-left: 5px;
}
.service .widget-title {
	margin-left: 5px;
}
.service .soundcloud-embed,
.service .blurb-image {
	margin-left: 0;
}


/* =========================================================================
   10. INNER PAGES — ARTICLE COLUMN + SIDEBAR
   -------------------------------------------------------------------------
   586 + 40 + 238 = 864 = 960 - (2 x 48). Exact.
   The 1px #f0f0f0 rule sits at x=633 and spans the full height of #content
   (which is why it is a background, not a border on either column).
   ========================================================================= */

#content {
	padding: 0 48px 60px;
	background-image: linear-gradient(#f0f0f0, #f0f0f0);
	background-repeat: repeat-y;
	background-position: 633px 0;
	background-size: 1px 100%;
}
#content.fullwidth {
	background-image: none;
}
/* Ordinary text pages. The right-hand sidebar held only the "Upcoming
   Events" empty-state widget, which now lives solely on the homepage, so
   these pages have no sidebar and no divider rule — but the article column
   keeps its 586px measure so the line length stays readable. */
#content.textpage {
	background-image: none;
}

#left-area {
	width: 586px;
	max-width: 100%;
	float: left;
}
.fullwidth #left-area {
	width: 100%;
}

.entry {
	padding: 35px 35px 25px 0;
}
.fullwidth .entry {
	padding-right: 0;
}

#sidebar {
	width: 238px;
	float: left;
	padding-top: 35px;
	padding-left: 40px;
}

.widget {
	width: 230px;
	max-width: 100%;
	padding-bottom: 25px;
}
/* The ConcertPress widget printed its heading as a plain <div>, so it has
   always rendered at body size rather than as a Kreon heading. Kept, but
   marked up as a real heading for structure. */
.widget-title {
	font-family: 'Droid Sans', Arial, Verdana, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	letter-spacing: 0;
	color: #929292;
	padding: 0;
}
.widget ul li {
	padding-bottom: 8px;
	padding-left: 15px;
	position: relative;
}
/* Replaces sidebar-bullet.png: a 5px #929292 dot. */
.widget ul li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #929292;
}
.widget ul li a {
	color: #929292;
	text-decoration: none;
}
.widget ul li a:hover {
	color: #b2b2b2;
}


/* =========================================================================
   11. CONTENT ELEMENTS
   ========================================================================= */

/* Lists only get their markers back inside article copy — same scoping the
   original used, because the reset zeroes list-style globally.
   :not([class]) keeps these rules off the gallery grid and the affiliation
   list, which are lists for structure only and carry their own layout. */
.entry ul:not([class]) {
	list-style-type: disc;
	padding: 10px 0 10px 20px;
}
.entry ol:not([class]) {
	list-style-type: decimal;
	list-style-position: inside;
	padding: 10px 0 10px 2px;
}
.entry ul:not([class]) li ul, .entry ul:not([class]) li ol {
	padding: 2px 0 2px 20px;
}
.entry ol:not([class]) li ul, .entry ol:not([class]) li ol {
	padding: 2px 0 2px 35px;
}

blockquote {
	margin: 1.5em;
	padding: 1em;
	color: #666666;
	background: #e6e6e6;
	font-style: italic;
	border: 1px solid #dcdcdc;
}
blockquote p {
	padding-bottom: 0;
}

address {
	font-style: italic;
	padding-bottom: 10px;
	line-height: 24px;
}

/* Image alignment helpers, carried over from the original page content. */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
img.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
}
img.alignright {
	display: inline;
	float: right;
	margin-left: 15px;
}

/* Captioned image (the biography headshot). */
.caption-figure {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding: 8px;
	margin-bottom: 10px;
	max-width: 96%;
}
.caption-figure.alignleft {
	float: left;
	margin-right: 15px;
}
.caption-figure img {
	display: block;
}
.caption-figure figcaption {
	font-size: 11px;
	line-height: 17px;
	padding: 4px 4px 0;
	margin: 0;
	color: #929292;
}

input[type=text], input[type=search], input[type=email], textarea, select {
	background-color: #fff;
	border: 1px solid #bbb;
	padding: 2px;
	color: #4e4e4e;
	margin: 0.5em 0;
	font-family: inherit;
	font-size: inherit;
}
textarea {
	padding: 4px;
}


/* =========================================================================
   12. PAGE-SPECIFIC BLOCKS
   ========================================================================= */

/* ---- Sample Recordings -------------------------------------------------- */

.recording {
	margin-bottom: 34px;
}
.recording-title {
	padding-bottom: 0;
	line-height: 20px;
}
.recording-note {
	padding-bottom: 6px;
	line-height: 20px;
}
.soundcloud-embed iframe {
	display: block;
	width: 100%;
	height: 166px;
	border: 0;
}

/* ---- Performances (upcoming stub + the full past archive) --------------- */

.no-events {
	padding-bottom: 10px;
}

/* Matches the weight and colour of the "Upcoming Performances:" heading
   above it, which the original page got from a <strong> inside its <h2>. */
.section-heading {
	color: #1c1c1c;
	font-weight: bold;
	padding-top: 30px;
}

.performance-list {
	padding: 0;
	margin: 0;
}
.performance-year {
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 22px;
	font-weight: 300;
	color: #1d1d1d;
	letter-spacing: -1px;
	line-height: 1em;
	padding: 22px 0 12px;
	border-top: 1px solid #f0f0f0;
	margin-top: 18px;
}
.performance-list .performance-year:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}
.performance {
	padding-bottom: 14px;
	line-height: 20px;
}
.performance .date {
	display: block;
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 15px;
	font-weight: 300;
	color: #1d1d1d;
	letter-spacing: 0;
}
.performance .programme {
	display: block;
	color: #1c1c1c;
	font-weight: bold;
}
.performance .venue {
	display: block;
	color: #929292;
}

/* ---- Affiliations ------------------------------------------------------- */

.affiliation-list li {
	padding-bottom: 45px;
}
.affiliation-list a {
	display: inline-block;
	line-height: 0;
}
.affiliation-list img {
	display: block;
}

/* ---- Photo Gallery ------------------------------------------------------ */

.gallery-intro {
	padding-bottom: 14px;
}

.gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
}
.gallery-grid li {
	padding: 0;
	margin: 0;
}
.gallery-thumb {
	display: block;
	padding: 4px;
	border: 1px solid #f0f0f0;
	background: #fff;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
	line-height: 0;
}
.gallery-thumb:hover,
.gallery-thumb:focus {
	border-color: #427d8b;
}
.gallery-thumb img {
	display: block;
	width: 100px;
	height: 75px;
}


/* =========================================================================
   13. PHOTO-GALLERY LIGHTBOX
   -------------------------------------------------------------------------
   Replaces the NextGEN "Shutter" lightbox. Vanilla; see js/site.js.
   ========================================================================= */

#lightbox[hidden] {
	display: none;
}
#lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	background: rgba(24, 22, 18, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px 70px;
}
.lightbox-figure {
	margin: 0;
	text-align: center;
	max-width: 100%;
	max-height: 100%;
}
.lightbox-figure img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 72vh;
	background: #fff;
	padding: 6px;
	border-radius: 2px;
}
.lightbox-figure figcaption {
	font-family: 'Droid Sans', Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #e8e6e2;
	padding-top: 14px;
}
.lightbox-count {
	display: block;
	color: #a9a49a;
	padding-top: 4px;
}

.lightbox-btn {
	position: absolute;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #ececec;
	border-radius: 7px;
	color: #1d1d1d;
	font-family: 'Kreon', Arial, sans-serif;
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	padding: 10px 16px;
	cursor: pointer;
}
.lightbox-btn:hover {
	background: #fff;
	color: #427d8b;
}
.lightbox-prev { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-close { right: 18px; top: 18px; font-size: 18px; padding: 7px 12px; }


/* =========================================================================
   14. FOOTER
   -------------------------------------------------------------------------
   958px inside a 960px card leaves a 1px white sliver each side so the
   card's rounded corners still show through.
   ========================================================================= */

#footer {
	border-top: 1px solid #ececec;
}
#footer-content {
	margin: 1px;
	background-color: #f9f9f9;
	border-radius: 0 0 7px 7px;
	padding-top: 78px;            /* the empty footer widget area's height */
}
p#copyright {
	float: right;
	color: #cdcdcd;
	text-shadow: 1px 1px 1px #ffffff;
	padding-bottom: 20px;
	padding-right: 48px;
}
p#copyright a {
	color: #929292;
}
p#copyright a:hover {
	color: #d0d0d0;
	text-decoration: none;
}


/* =========================================================================
   15. RESPONSIVE RULES
   -------------------------------------------------------------------------
   The card is a fixed width at each step — 960 / 750 / 460 / 300 — exactly
   as the original. Two changes from the original, both deliberate:

     (a) every fixed width is paired with a max-width so the card and its
         contents can never be wider than the viewport. The original had a
         460px card between 461 and 479px of viewport, which scrolled
         sideways. That bug is fixed here.
     (b) below 767px the tagline no longer carries margin-top:-25px, which
         made it overlap the bottom of the logo. It now sits below it.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BREAKPOINT 1 — tablet: 768px to 960px. Card 750px.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 960px) {

	#container {
		width: 750px;
	}

	#content-area {
		padding: 45px 36px 60px;
	}
	.service {
		width: 206px;             /* (3 x 206) + (2 x 29) = 678 = 750 - 72 */
		margin-right: 29px;
	}

	#category-name {
		width: 100%;
	}
	#category-inner {
		padding-left: 30px;
		padding-right: 30px;
	}

	#content {
		padding: 0 36px 60px 31px;
		background-position: 518px 0;
	}
	#left-area {
		width: 487px;
	}
	#sidebar {
		width: 155px;
		padding-left: 37px;
	}
	.widget {
		width: auto;
	}

	#breadcrumbs {
		padding-left: 31px;
	}
}

/* -------------------------------------------------------------------------
   BREAKPOINT 2 — phone / small tablet: up to 767px. Card 460px.
   Navigation collapses to the button; sidebar and search are dropped.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

	#container {
		width: 460px;
		/* keeps a 10px margin of wood either side at 461-479px, where the
		   original overflowed the viewport */
		max-width: calc(100% - 20px);
	}

	#header {
		text-align: center;
	}
	#logo {
		float: none;
	}
	/* BUG FIX: the original used margin-top:-25px here, which dropped the
	   tagline on top of the logo. */
	p#slogan {
		float: none;
		margin-left: 0;
		margin-top: 6px;
		padding-top: 0;
	}

	#additional-info {
		display: none;            /* facebook icon */
	}
	#primary-nav {
		display: none;
	}
	/* The switcher must survive on phones, so it leaves the absolutely
	   positioned corner and sits centred under the menu button. */
	#lang-switch {
		position: static;
		margin-top: 12px;
		font-size: 14px;
	}
	#mobile-nav-wrap {
		display: block;
		margin-top: 14px;
	}

	#sidebar {
		display: none;
	}

	#category-name {
		width: 100%;
	}
	#category-inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	#content-area {
		padding: 35px 36px 10px;
	}
	#services {
		margin-bottom: 10px;
	}
	.service {
		float: none;
		width: 386px;
		max-width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}

	#breadcrumbs {
		padding-left: 28px;
	}
	#content {
		padding: 0 28px 60px;
		background-image: none;
	}
	#left-area {
		width: 404px;
		max-width: 100%;
		float: none;
	}
	.entry {
		padding-right: 0;
	}

	p#copyright {
		float: none;
		text-align: center;
		padding-top: 20px;
		padding-right: 0;
	}

	.lightbox-prev { left: 8px; }
	.lightbox-next { right: 8px; }
	.lightbox-close { right: 8px; top: 8px; }
}

/* -------------------------------------------------------------------------
   BREAKPOINT 3 — small phone: up to 479px. Card 300px.
   ------------------------------------------------------------------------- */
@media (max-width: 479px) {

	#container {
		width: 300px;
		max-width: calc(100% - 20px);
	}

	#content-area {
		padding: 35px 30px 10px;
	}
	.service {
		width: 240px;
		max-width: 100%;
	}

	#mobile-nav-wrap {
		margin-bottom: 10px;
	}
	#mobile_menu {
		width: 240px;
	}

	#category-inner {
		padding-left: 10px;
		padding-right: 10px;
	}

	#breadcrumbs {
		padding-left: 28px;
	}
	#left-area {
		width: 244px;
		max-width: 100%;
	}

	p#copyright {
		padding: 20px 10px;
		text-align: center;
	}

	.gallery-grid {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   Users who prefer reduced motion: drop the nav slide and chevron spin.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#mobile_menu,
	#mobile_nav > span {
		transition: none;
	}
}