/*
  Custom Properties & Variables
*/
:root {
  --ff-main: 'Nunito Sans', Arial, Helvetica, sans-serif;
  --fw-regular: 300;
  --fw-bold: 600;
  --lh-extra: 1.4;
  --lh-plus: 1.3;
  --lh-main: 1.25;
  --lh-minus: 1.2;
  --c-white: #fff;
/* slightly warm gray */
  --c-dark: #1a1b18;
  --c-medium: #78736d;
  --c-medium-light: #918d87;
  --c-light: #b6b3af;
  --bg-c-extra-light: #e7e6e4;
/* muted red-purple hue */
  --c-accent-dark: #783a44;
  --c-accent-medium: #8f3d4b;
  --c-accent-light: #a63f50;
/* muted orange-brown hue */
  --c-link: #a17745;
  --c-link-hover: #7a5114;
}

/*
  Custom Property overrides of UIkit 3.
*/
html {font-family: var(--ff-main); color: var(--c-dark); line-height: var(--lh-main);}

/* NOTE: uk-link simply applies the standard link attributes. Only needed for overriding other styles. */
a, .uk-link {color: var(--c-link); transition: color 0.125s ease-in-out;}
a:hover, .uk-link:hover {color: var(--c-link-hover);}
.uk-button {text-transform: none;}

h1, .uk-h1, h2, .uk-h2, h3, .uk-h3, h4, .uk-h4, h5, .uk-h5, h6, .uk-h6 {
  font-family: var(--ff-main); color: var(--c-dark); margin-bottom: 30px;}
h1, .uk-h1 {font-size: 2rem; line-height: var(--lh-minus); font-weight: var(--fw-bold);}
h2, .uk-h2 {font-size: 1.4rem; line-height: var(--lh-main); font-weight: var(--fw-bold); color: var(--c-medium);}
h3, .uk-h3 {font-size: 1.1rem; line-height: var(--lh-plus); font-weight: var(--fw-bold);}
h4, .uk-h4 {font-size: 1rem; line-height: var(--lh-main);}
h5, .uk-h5 {font-size: 0.9375rem; line-height: var(--lh-plus);}
h6, .uk-h6 {/* default: font-size: 0.875rem; line-height: 1.4; */}

::selection {background: var(--c-medium-light);}

blockquote {font-size: 1rem; line-height: var(--lh-extra); color: var(--c-dark);}
blockquote cite {
  font-style: normal;
  display: block;
  text-align: right;
  margin: 20px 0 20px 0; /* normalize for multiple p tags in blockquote */
  line-height: var(--lh-plus);
}
blockquote cite::before {content: "— ";}
em {font-style: italic; color: var(--c-dark);} /* q also uses font-style: italic */

/* Nav customizations */
.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle {font-family: var(--ff-main);}

h1.logotype {font-size: 1.6rem; font-weight: var(--fw-regular);}
.uk-logo {
  font-size: 1.6rem;
  font-family: var(--ff-main);
  color: var(--c-dark);
  font-weight: var(--fw-regular);
  line-height: var(--lh-minus);
}
a.uk-logo:hover, a.uk-logo:focus {color: var(--c-medium);}

.tv-nav-menu-icon.uk-icon-link {color: var(--c-dark); padding: 2px 0 0 0; margin-left: -2px;}
.tv-nav-menu-icon.uk-icon-link:hover, .tv-nav-menu-icon.uk-icon-link:focus {color: var(--c-medium);}
.tv-nav-menu-icon.uk-icon-link:active, .uk-active > .uk-icon-link {color: var(--c-medium);}

/* Offcanvas customizations */
.uk-offcanvas-bar {background: var(--c-medium); padding: 5px 20px 10px 30px; left: -300px; width: 300px;}
.uk-offcanvas-bar .uk-nav-default > li {margin-bottom: 10px; line-height: var(--lh-minus);}

.uk-offcanvas-bar .uk-nav-default > li > a.uk-logo {color: var(--c-dark);}
.uk-offcanvas-bar .uk-nav-default > li > a.uk-logo:hover,
.uk-offcanvas-bar .uk-nav-default > li > a.uk-logo:focus {color: rgba(255, 255, 255, 0.5);}
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a {color: var(--c-white);}
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a:hover,
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a:focus {color: var(--c-white);}

.uk-offcanvas-bar .uk-nav-default > li > a {font-size: 1.6rem; color: var(--c-dark);}
.uk-offcanvas-bar .uk-nav-default > li > a:hover,
.uk-offcanvas-bar .uk-nav-default > li > a:focus {color: var(--c-light);}
.uk-offcanvas-bar .uk-nav-default li.uk-active > a:hover,
.uk-offcanvas-bar .uk-nav-default li.uk-active > a:focus {color: var(--c-white);}

.uk-offcanvas-bar .uk-nav-default ul.uk-nav-sub {padding: 0 0 0 10px;}
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub li {padding-left: 20px; line-height: 1.1; padding-bottom: 8px;}
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {font-size: 1.1rem; color: var(--c-dark);}
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:focus {color: var(--c-light);}
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active > a:hover,
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub li.uk-active > a:focus {color: var(--c-white);}

.uk-offcanvas-bar .uk-nav-default > li > a.hover-light {color: var(--c-light);}
.uk-offcanvas-bar .uk-nav-default .uk-nav-sub a.hover-light {color: var(--c-light);}

.uk-offcanvas-overlay::before {background: rgba(26, 27, 24, 0.3);}

/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {left: auto; right: -300px;}

/* Tablet landscape */
@media (min-width: 640px) and (max-width: 959px) {
  .uk-offcanvas-bar {padding: 15px 20px 10px 30px;}
}
/* Notebook and bigger */
@media (min-width: 960px) {
  .uk-offcanvas-bar {padding: 35px 20px 10px 40px; left: -400px; width: 400px;}
  .uk-offcanvas-bar .uk-nav-default .uk-nav-sub li {padding-left: 30px;}
  .uk-offcanvas-flip .uk-offcanvas-bar {right: -400px;}
}

/*  CSS inherited uk-active values to reduce need for multiple PHP nav includes.
    * portfolio-page & portfolio-main-set-page highlight both as active because they are the same page.
    * portfolio-piece-page doesn't highlight anything in the nav; however it does manage page layout presentation.
    * ONLY archive-nav exists in the main nav.
    * uk-active can still be used if this method becomes unsustainable.
*/
.home-page nav#offcanvas-slide li.home-nav > a,
.home-page nav#offcanvas-slide li.home-nav > a:hover,
.home-page nav#offcanvas-slide li.home-nav > a:focus,
.info-page nav#offcanvas-slide li.info-nav > a,
.info-page nav#offcanvas-slide li.info-nav > a:hover,
.info-page nav#offcanvas-slide li.info-nav > a:focus,
.portfolio-page nav#offcanvas-slide li.portfolio-nav > a,
.portfolio-page nav#offcanvas-slide li.portfolio-nav > a:hover,
.portfolio-page nav#offcanvas-slide li.portfolio-nav > a:focus,
.portfolio-page nav#offcanvas-slide li.portfolio-main-set-nav > a,
.portfolio-page nav#offcanvas-slide li.portfolio-main-set-nav > a:hover,
.portfolio-page nav#offcanvas-slide li.portfolio-main-set-nav > a:focus,
.portfolio-main-set-page nav#offcanvas-slide li.portfolio-nav > a,
.portfolio-main-set-page nav#offcanvas-slide li.portfolio-nav > a:hover,
.portfolio-main-set-page nav#offcanvas-slide li.portfolio-nav > a:focus,
.portfolio-main-set-page nav#offcanvas-slide li.portfolio-main-set-nav > a,
.portfolio-main-set-page nav#offcanvas-slide li.portfolio-main-set-nav > a:hover,
.portfolio-main-set-page nav#offcanvas-slide li.portfolio-main-set-nav > a:focus,
.portfolio-second-set-page nav#offcanvas-slide li.portfolio-second-set-nav > a,
.portfolio-second-set-page nav#offcanvas-slide li.portfolio-second-set-nav > a:hover,
.portfolio-second-set-page nav#offcanvas-slide li.portfolio-second-set-nav > a:focus,
.archive-page nav#offcanvas-slide li.archive-nav > a,
.archive-page nav#offcanvas-slide li.archive-nav > a:hover,
.archive-page nav#offcanvas-slide li.archive-nav > a:focus,
.archive-set-page nav#offcanvas-slide li.archive-nav > a,
.archive-set-page nav#offcanvas-slide li.archive-nav > a:hover,
.archive-set-page nav#offcanvas-slide li.archive-nav > a:focus,
.archive-piece-page nav#offcanvas-slide li.archive-nav > a,
.archive-piece-page nav#offcanvas-slide li.archive-nav > a:hover,
.archive-piece-page nav#offcanvas-slide li.archive-nav > a:focus {color: var(--c-white);}

/*
  uk-slidenav for PIECE pages
*/
.uk-slidenav {transition: color 0.125s ease-in-out;}
.uk-dark .uk-slidenav {color: rgba(26, 27, 24, 0.7);}
.uk-dark .uk-slidenav:hover, .uk-dark .uk-slidenav:focus {color: rgba(26, 27, 24, 0.95);}
.uk-dark .uk-slidenav:active {color: rgba(26, 27, 24, 0.7);}
/* USE uk-flex-top & uk-flex-POSITION for nav consistency; MUST set padding. */
.uk-slidenav-large {z-index:2;}
.piece-number {z-index:1;}
@media (max-width: 639px) {
  .uk-slidenav-large {width: 28%; padding: 40px 30px 30px 30px;}
  .piece-number {padding-top: 50px;}
}
@media (min-width: 640px) and (max-width: 799px) {
  .uk-slidenav-large {width: 32%; padding: 60px 40px 40px 40px;}
  .piece-number {padding-top: 70px;}
}
@media (min-width: 800px) {
  .uk-slidenav-large {width: 34%; padding: 60px 40px 40px 40px;}
  .piece-number {padding-top: 70px;}
}
@media (min-width: 960px) {
  .uk-slidenav-large {padding: 70px 40px 40px 40px;}
  .piece-number {padding-top: 80px;}
}
@media (min-width: 1200px) {
  .uk-slidenav-large {width: 38%;}
}
@media (min-width: 1600px) {
  .uk-slidenav-large {width: 40%;}
}

/* Make small & medium shadow effects the same opacity as large & xlarge; with hover even darker & richer color. */
.uk-box-shadow-small {box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);}
.uk-box-shadow-medium {box-shadow: 0 5px 15px rgba(0, 0, 0, 0.16);}
.uk-box-shadow-hover-small:hover {box-shadow: 0 2px 8px rgba(26, 27, 24, 0.3);}
.uk-box-shadow-hover-medium:hover {box-shadow: 0 5px 15px rgba(26, 27, 24, 0.3);}
.uk-box-shadow-hover-large:hover {box-shadow: 0 14px 25px rgba(26, 27, 24, 0.3);}
.uk-box-shadow-hover-xlarge:hover {box-shadow: 0 28px 50px rgba(26, 27, 24, 0.3);}

/* MUST set a subtle background color for images with the shadow effect during loading for best UX results. */
img.uk-box-shadow-small {background-color: rgba(0, 0, 0, 0.08);}
img.uk-box-shadow-medium {background-color: rgba(0, 0, 0, 0.08);}
img.uk-box-shadow-large {background-color: rgba(0, 0, 0, 0.08);}
img.uk-box-shadow-xLarge {background-color: rgba(0, 0, 0, 0.08);}

.uk-list-striped > li {padding: 8px 8px; font-size: 0.9375rem;}
.uk-list-striped > li:nth-of-type(odd) {border-top: 1px solid var(--bg-c-extra-light); border-bottom: 1px solid var(--bg-c-extra-light);}
.uk-list-striped > li:nth-of-type(odd) {background: #f3f3f1;}
@media (min-width: 1px) and (max-width: 639px) {
  .uk-list-striped > li {padding: 6px 6px; font-size: 0.875rem;}
}
@media (min-width: 960px) and (max-width: 1252px) {
  .initial-content-container {margin-top: 32px !important;}
}
@media (min-width: 1253px) {
  .initial-content-container {margin-top: 52px !important;}
}

/*
  Extensions and additions to UIkit 3.
  * These styles attempt to logically extend and add to the functionality of UIkit 3. These classnames do not exist in UIkit 3.
 *
*/
.uk-margin-large-top-always {margin-top: 70px;}
.uk-max-width-1-1 {max-width: 100%;}
.uk-max-height-1-1 {max-height: 100%;}
.uk-responsive-height-landscape {
  box-sizing: border-box;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}
.uk-responsive-height-landscape-wide { /* Same as landscape, but may be useful for specificity. */
  box-sizing: border-box;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}
.uk-responsive-height-portrait { /* Stumbled upon this functional hack using uk-responsive-height & uk-responsive-width together to fix a Safari vertical stretch issue in smaller viewports. MUST USE BOTH classes in the following order: class="uk-responsive-height uk-responsive-width"; consolidating attributes from "uk-responsive-height uk-responsive-width" DOESN'T WORK! */
}
.uk-divider-large {height: 1px;}
.uk-divider-large::after {
  content: "";
  display: inline-block;
  width: 100%;
  max-width: 100%;
  border-top: 1px solid var(--bg-c-extra-light);
  vertical-align: top;
}
.uk-text-extra-small {
  font-size: 0.72rem;
  line-height: 1.6;
}
.uk-label-private-collection {
  background-color: var(--c-white);
  color: var(--c-accent-medium);
  padding: 0 7px;
  font-weight: var(--fw-bold);
  border: 1px solid var(--c-accent-light);
  font-size: 0.575rem;
  line-height: 1.6;
}
.pc {color: var(--c-accent-light); padding: 0 1px;} /* Surrounds the asterisk (*) to indicate Private Collection. */
.asterisk-key {color: var(--c-light); margin-top: 30px;}
.asterisk-key .pc {font-size: 1rem; color: var(--c-accent-light);}

/*
  LAYOUT
*/
.menu-col-width {width: 30px;}
@media (min-width: 640px) {
  .menu-col-width {width: 40px;}
}

.wrap-layout {margin-bottom: 40px !important;}
.wrap-left-bottom {margin-bottom: 40px !important;}
.wrap-right-full {padding-left: 50px;} /* Index thumbnail pages at all viewport widths, responsive mod below. */
.wrap-piece-portrait, .wrap-piece-landscape {height: calc(100vh - 80px);} /* ALWAYS functioning in all viewports and orientations. */

@media (min-width: 1px) and (max-width: 510px) { /* ACTUAL WIDTH max-width: 499px */
  .wrap-info, .wrap-archive, .wrap-piece {padding-left: 30px; padding-right: 10px;}
}
@media (min-width: 511px) and (max-width: 639px) { /* ACTUAL WIDTH min-width: 500px */
  .wrap-info, .wrap-archive, .wrap-piece {padding-left: 30px; padding-right: 30px;}
}
@media (max-width: 639px) {
  .wrap-main {margin-top: 10px !important; margin-bottom: 10px !important;}
}
@media (min-width: 640px) and (max-width: 959px) {
  .wrap-info, .wrap-archive, .wrap-piece {padding-left: 40px; padding-right: 40px;}
  .wrap-right-full {padding-left: 40px;}
  .wrap-main {margin-top: 20px !important; margin-bottom: 20px !important;}
}
@media (max-width: 959px) {
  .wrap-left-top {margin-bottom: 10px !important;}
}
@media (min-width: 960px) {
  .wrap-left-top {margin-bottom: 20px !important;}
  .wrap-left-bottom {padding-bottom: 30px; margin-bottom: 70px !important;}
  .wrap-main {margin-top: 40px !important; margin-bottom: 20px !important;}
}

/* NOTE: Safari seems to use "vh" for (min-width: 960px) as a constraint, but not when the viewport width is less than 959px. Putting this into a specialized @media or @supports doesn't seem to work either.

* Surprisingly this ONLY works to shore up the extra length of the web page height on Mac Chrome, but not iOS or Android devices in portrait orientation.@media screen and (orientation: portrait) {
  .wrap-piece-portrait, .wrap-piece-landscape {height: auto;}
}

* CSS specific to iOS devices
@supports (-webkit-overflow-scrolling: touch) {
  @media (min-width: 960px) {
    }
  }
}
*/

.boshy {
  unicode-bidi: bidi-override;
	direction: rtl;
	text-align:left;
}
.boshy b {display: inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 0;}

/*
  PAGE-TITLE
*/
.page-title {color: var(--c-dark); font-weight: var(--fw-regular) !important; font-size: 1.6rem !important; margin-bottom: 30px !important;}
.page-title a {color: var(--c-dark);}
.page-title a:hover {color: var(--c-medium); text-decoration: none;}

/*
  SET-TITLE
*/
.set-title {
  color: var(--c-dark);
  font-weight: var(--fw-regular);
  font-size: 1.1rem;
  margin-bottom: 20px;
}
.set-title a {color: var(--c-dark);}
.set-title a:hover, .set-title a:focus {color: var(--c-medium); text-decoration: none;}
.home-page .set-title {/* This sets the PIECE-TITLE in the same position whenever the PAGE-TITLE is absent, only on the home page. Extra margin not needed at smaller viewport sizes becuase uk-margin-large-top takes care of that responsively. */}
@media (min-width: 960px) {
  .home-page .set-title {margin-top: 100px !important;}
}
/* archive */
.set-year {color: var(--c-medium); font-size: 1rem;} /* side column info area */
a.archive-set-title .set-year {color: var(--c-medium); font-size: 1rem;} /* archive index */
a.archive-set-title {color: var(--c-dark);}
a.archive-set-title:hover,
a.archive-set-title:focus {color: var(--c-medium); text-decoration: none;}
a.archive-set-title:hover h2.set-title,
a.archive-set-title:focus h2.set-title {color: var(--c-medium); text-decoration: none;}

/*
  SIDE-NAV
*/
.info-sticky-position {padding-top: 51px;} /* This mod helps keep the sticky side-nav on the info page from "jumping" & for positioning it at the same baseline as the piece-title on other pages. ALSO, compensates for 2px first-child fix (modified from 40px to 51px). */
.side-nav .uk-nav li {line-height: var(--lh-minus);}
.side-nav .uk-nav > li > a {padding: 4px 0;}
.side-nav .uk-nav-default {font-size: 1rem;}
.side-nav .uk-nav-default > li > a {color: var(--c-medium-light);}
.side-nav .uk-nav-default > li > a:hover,
.side-nav .uk-nav-default > li > a:focus {color: var(--c-dark);}
.side-nav .uk-nav-default > li.uk-active > a {color: var(--c-medium); font-weight: var(--fw-bold);}
.side-nav .uk-nav-default > li:first-child > a {padding-top: 2px;}

.side-nav .uk-nav-header {padding: 4px 0; text-transform: uppercase; font-size: 0.875rem;}
.side-nav .uk-nav-header:not(:first-child) {margin-top: 20px;}
.side-nav .uk-nav-divider {margin: 8px 0;}
.side-nav .uk-nav-default .uk-nav-header {color: var(--c-dark);}
.side-nav .uk-nav-default .uk-nav-divider {border-top: 1px solid #e7e6e4;}

.side-nav ul.uk-nav-sub {padding: 4px 0 4px 15px;}
.side-nav .uk-nav-sub ul {padding-left: 15px;}
.side-nav .uk-nav-sub a {padding: 4px 0;}

.side-nav .uk-nav-default .uk-nav-sub a {color: var(--c-medium-light);}
.side-nav .uk-nav-default .uk-nav-sub a:hover,
.side-nav .uk-nav-default .uk-nav-sub a:focus {color: var(--c-dark);}
.side-nav .uk-nav-default .uk-nav-sub li.uk-active > a {color: var(--c-medium); font-weight: var(--fw-bold);}
.hover-dark {color: var(--c-dark) !important;}

/* archive set list ONLY */
li.sn-li_set-title {font-size: 1.1rem;}
.side-nav .uk-nav > li.sn-li_set-title > a {padding: 5px 0;}
.side-nav .uk-nav-default > li.sn-li_set-title:first-child > a {padding-top: 0;}
.side-nav ol.uk-nav.lower-alpha {color: var(--c-medium-light); list-style-type: lower-alpha; list-style-position: outside;}
.side-nav ol.uk-nav.decimal {color: var(--c-medium-light); list-style-type: decimal; list-style-position: outside;}

/*
  PIECE
*/
.piece-container .uk-list>li:nth-child(n+2), .piece-container .uk-list>li>ul {margin-top: 2px;}
.piece-title {
  font-weight: var(--fw-regular);
  margin-bottom: 10px !important;
}
.piece-title a {color: var(--c-dark);}
.piece-title a:hover, .piece-title a:focus {color: var(--c-medium); text-decoration: none;}
.piece-details {color: var(--c-medium); font-size: 0.875rem; margin-top: 10px !important; margin-bottom: 0;}
@media (max-width: 959px) {
  .li-inline-block-m {display: inline-block; padding-right: 15px;} /* also used for footer list items */
}

@media (max-width: 639px) {
  .portfolio-piece-page .set-title, .archive-piece-page .set-title {padding-right: 20px;}
  .portfolio-piece-page .piece-title, .archive-piece-page .piece-title {padding-right: 20px;}
}

/*
  FOOTER
*/
footer {color: var(--c-light); line-height: var(--lh-minus);}
@media (max-width: 959px) {
  footer ul {margin-bottom: 0;}
}
@media (min-width: 960px) {
  footer {margin-top: -114px;}
  .home-page footer, .portfolio-piece-page footer, .archive-piece-page footer {margin-top: -94px;}
  /*  Footer is aligned with bottom margin -94px, -70px is minimum. ALSO, apply 18px bottom padding on container of left col content - SEE wrap-left-bottom */
}
footer a {color: var(--c-light);}
footer a:hover {color: var(--c-medium); text-decoration: none;}
footer .uk-list>li:nth-child(n+2), footer .uk-list>li>ul {margin-top: 0px;}
a.rl-link {color: var(--c-light);}
a.rl-link:hover {color: #fe5010;}