/*** app.css */

/*** CSS variables */
:root {
	--focus: transparent; /* disable buttons outline:; or change its color */

	/* --fontScale: 1.4; /* change body font size */
	/* --hScale: 1.3; /* change headings font size */
	--globalScale: 1.2; /* change both body & headings font size */
    --fontWeight: 400;

    --color: rgba(255, 255, 255, 75%); /* #f6f4f2; c5c5ce change default text color */

    --linkDecoration: underline;
    --linkColor: var(--color);

    --bodyDark: #121212;  /*#181818 #060606; */
    --backgroundDark: #060606;
    --menuNav: rgba(24, 24, 24, 100%);
    --menuBar: rgba(24, 24, 24, 75%);
    --menuSide: rgba(255, 255, 255, 10%);
    --menuBorder: rgba(255, 255, 255, 15%);
    --cardDark: rgba(255, 255, 255, 10%);
    --cardDarkActive: rgba(255, 255, 255, 20%);
    --cardBorder: rgba(255, 255, 255, 10%);
    --cardBorderActive: rgba(255, 255, 255, 70%);
    --titleColor: rgba(255, 255, 255, 90%);
    --previewColor: rgba(255, 255, 255, 45%);
    --dateColor: rgba(255, 255, 255, 60%);
    --textColor: rgba(255, 255, 255, 75%);
    --photoLabel: rgba(0, 0, 0, 60%);
    --figureColor: rgba(255, 255, 255, 65%);
    --footerText: rgba(255, 255, 255, 50%);
    --footerCopy: rgba(6, 6, 6, 100%);
    --footerCopyText: rgba(255, 255, 255, 30%);
    --line-height: 1.4;

}

/*** Dark mode */
/** :where(.dark-mode, #dark-mode, [dark-mode], [data-mode="dark"]) { } **/

@supports (font-variation-settings: normal) { :root { --fontFamily: var(--fontFamilyVar); } } /* If Variable fonts are supported */

a, a:hover { text-decoration: none; } /* underline linksvar(--color)*/
/* Remove outline for non-keyboard :focus */
*:focus:not(:focus-visible) {outline: none}
/* Optional: Customize :focus-visible */
*:focus-visible {outline-color:var(--linkHover)}
blockquote {max-width:30rem; margin:6rem auto 6rem auto; text-indent:0}
button {border:none; margin:1rem; text-align:center; text-decoration:none; display:inline-block}

/* ------------------
  media query
------------------ */
@media (prefers-reduced-motion: reduce) {} /* User prefers NO motion-based animation */

/*** Detect OS Dark/Light mode */
@media (prefers-color-scheme: dark) {} /* if OS in DARK mode */
/*@media (prefers-color-scheme: light) {}*/ /* if OS in LIGHT mode */

/*** Responsive */
/** Skelet. BREAKING POINTS */
@media (max-width: 777px) {} /* Grid SMALL becomes active */
@media (min-width: 778px) and (max-width: 1024px) {} /* Grid MEDIUM becomes active */
@media (min-width: 1599px) {}/* Grid LARGE becomes active */

/** General breaking points */
/* Device = Most of Mobile (Portrait) | Screen = b/w 0 to 480px */
@media (max-width: 480px) {
.menu-bar {display: none}
.menu-button {display: block}
.page-wrap {padding:0 2rem}
}
/* Device = Low Resolution Tablet, Mobile (Landscape) | Screen = b/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
#nav-right {top:10%}
#lang-menu {top:10%}
.menu-bar {display: none}
.menu-button {display: block}
.page-wrap {padding:0 3rem}
}
/* Device = Tablet, iPad (landscape) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.menu-bar {display: block}
.menu-button {display: none}
.page-wrap {padding:0 4rem}
}
/* Device = Tablet, iPad (portrait) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
#nav-right {top:15%}
#lang-menu {top:15%}
.menu-bar {display: block}
.menu-button {display: none}
.page-wrap {padding:0 4rem}
}
/* Device = Laptop, Desktop | Screen = b/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
#nav-right {top:20%}
#lang-menu {top:20%}
.menu-bar {display: block}
.menu-button {display: none}
.page-wrap {padding:0 5rem}
}
/* Device = Desktop | Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
#nav-right {top:25%; border-top-left-radius:2rem; border-bottom-left-radius:2rem}
#lang-menu {top:25%}
.menu-bar {display: block}
.menu-button {display: none}
.page-wrap {padding:0 5rem}
}
/* Device = Desktop | Screen = 1599px huge resolution desktops */
@media (min-width: 1900px) {
#nav-right {top:30%; border-top-left-radius:2rem; border-bottom-left-radius:2rem; border-top-right-radius:2rem; border-bottom-right-radius:2rem}
#lang-menu {top:30%}
.menu-bar {display: block}
.menu-button {display: none}
.page-wrap {padding:0 6rem}
}

/** General **/
.fade { transition: all 0.6s; }
.fade.out { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }

/** Site **/
.site-wrap {max-width:100%; padding:0 1rem; background:var(--backgroundDark)}
.app {display:flex; min-height:100vh; flex-direction:column; overflow-x:hidden; box-sizing:border-box}
.app a:hover {color:var(--linkHover)}

/** Header */
.banner-img {margin:0 auto !important; position:relative; background:var(--bodyDark)}

/* New Menu Bar */
.menu {z-index:90}
.menu-bar {} /* display defined in media queries */
.menu-button {} /* display defined in media queries */
.nav-sticky {position: -webkit-sticky; position:sticky; top:0; z-index:80; backdrop-filter:blur(4rem); -webkit-backdrop-filter:blur(4rem)}
.nav-bar {margin:0 auto !important; background:var(--menuBar)}
.nav-bar-menu {padding:.5rem .7rem; z-index:95}
.nav-bar-menu a {font-size:1.7rem; font-weight:bold; text-decoration:none}
.nav-bar-menu a:focus:not(:focus-visible) {outline:none}
.nav-bar-menu a:focus-visible {outline-color:var(--linkHover)}
.nav-bar-menu button {margin:0; padding: .5rem !important; font-size:1.2rem; white-space:normal}
.nav-bar-menu button:focus:not(:focus-visible) {outline:none}
.nav-bar-menu button:focus-visible {outline-color:var(--linkHover)}
.nav-bar-menu img {height:2rem; width:2rem}
.nav-bar-btn {color:var(--titleColor); border:none; background-color:transparent; z-index:90; outline:none; box-shadow:none}
.nav-bar-btn i {margin:auto .5rem !important; font-size:1.7em}
.home-icon {list-style:none; max-height:2.2em}

/** Body */
.body-wrap {display:flex; align-items:center; justify-content:center; max-width:96rem; margin:auto; padding:auto}
.breadcrumb {position:-webkit-sticky; position:sticky; top:0; margin:0 1rem; z-index:81; overflow:hidden}
.breadcrumb-container {margin:1rem; max-height:3.5rem; text-wrap:nowrap; overflow:hidden}
.breadcrumb-container li {list-style:none; text-wrap:nowrap; margin-block-end:0; color:var(--dateColor); z-index:90}
.breadcrumb-container a {color:var(--titleColor); font-weight:bold; text-wrap:nowrap; text-decoration:none}
.breadcrumb-container button {color:var(--titleColor); font-weight:bold; padding:0; margin:0 0 .2rem 0; text-decoration:none}
.page-wrap {align-self:center; margin:2rem; width:fit-content; background:var(--bodyDark); border-radius: 2rem}
.page-title {margin:0 1rem; padding:0 !important; color:var(--titleColor)}
.page-title p {padding:0 !important; color:var(--titleColor)}
.page-text {margin:0; padding:1em; max-width:90vw; color:var(--textColor)}
.page-text h1, h2, h3, h4, h5, h6 {color:var(--textColor)}
.page-text li {}
.home-text {margin:auto 1rem; color:var(--textColor)}
.home-intro {padding: 2rem; color:var(--textColor)}
.cell-wrap {margin:1rem}
.media-wrap {margin:auto 2rem}
.media-title p {width:100%; padding:0 !important; color:var(--titleColor)}

/* Menu */
.menu-btn {color:var(--titleColor); border:none; background-color:transparent; z-index:95; outline:none; box-shadow:none}
#canvas {width: auto; height: auto; padding: 5.5% 0; position: fixed; z-index: 100; -webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#nav-reset {height:100%; width:100%; z-index:80; display:none}

/* Right Sidebar */
#nav-right {width:auto; height:auto; background:var(--menuNav); /*background:var(--menuSide); backdrop-filter:blur(4rem) brightness(30%); -webkit-backdrop-filter:blur(4rem) brightness(30%);*/ position:fixed; right:0; display:none; z-index:95; box-shadow: -2px -2px 2px 2px rgb(0 0 0 / 50%); border:solid; border-color:var(--menuBorder); border-width:.1rem ; border-top-left-radius:2rem; border-bottom-left-radius:2rem;-webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#nav-right-toggle {padding:3rem 2rem 0 2rem; list-style:none; min-width:100%; color:var(--color)}
#nav-right-toggle li {cursor:pointer; display:block}
#nav-right-toggle i {margin: .5rem 2rem .5rem 1rem; line-height: var(--line-height)}
#nav-right-toggle li a {display:block; width:auto}
#nav-right-toggle a {display:block; text-decoration:none; padding:0; line-height: var(--line-height)}
/*#nav-right-toggle a:focus {outline:none}*/
#nav-right-toggle ul {list-style:none; display:none}
#nav-right-toggle ul li {cursor:pointer; display:block; padding:0 1rem 0 2rem; list-style:none}
#nav-right-toggle ul li button {padding: 0; line-height:var(--line-height); color:var(--color); background:transparent}
#nav-right-toggle ul li button:hover {color: var(--linkHover)}
/* Remove outline for non-keyboard :focus */
#nav-right-toggle a:focus:not(:focus-visible) {outline:none}
/* Optional: Customize :focus-visible */
#nav-right-toggle a:focus-visible {outline-color:var(--linkHover)}
#nav-right-toggle button {margin:1rem; line-height:var(--line-height); color:var(--color); background:transparent}
#nav-right-toggle button:hover {color: var(--linkHover)}
#nav-right-sub-toggle {display:none}
#nav-right-sub-toggle {padding:0; margin:0 1rem; color:var(--color)}
.nav-right-sub button {margin:.5rem 1rem !important; padding:0 !important; line-height:var(--line-height); color:var(--color) !important; background:transparent}
.nav-right-sub button:hover {color: var(--linkHover)}
.nav-right-btn {color:var(--color); border:none; background-color:transparent; outline:none; box-shadow:none}
.nav-right-btn i {margin:auto .5rem !important}

/* Left Sidebar */
#nav-left {width:auto; height:80%; background:var(--menuNav); /*background:var(--menuSide); backdrop-filter:blur(4rem) brightness(30%); -webkit-backdrop-filter:blur(4rem) brightness(30%);*/ position:fixed; left:0; display:none; z-index:95; box-shadow: -2px -2px 2px 2px rgb(0 0 0 / 50%); border:solid; border-color:var(--menuBorder); border-width:.1rem ; border-top-right-radius:2rem; border-bottom-right-radius:2rem;-webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#nav-left-toggle {padding:1.5rem 2rem 1.5rem 3rem; list-style:none; min-width:100%; overflow:hidden; overflow-y:scroll; color:var(--color)}
#nav-left-toggle li {cursor:pointer; display:block}
#nav-left-toggle i {margin: .5rem 1rem .5rem 2rem; line-height: var(--line-height)}
#nav-left-toggle li a {color:var(--titleColor); display:block; width:auto}
#nav-left-toggle li a:hover {color:var(--primary)}
#nav-left-toggle a {color:var(--titleColor); display:block; text-decoration:none; padding:0; line-height: var(--line-height)}
#nav-left-toggle a:hover {color:var(--primary)}

/*#nav-right-toggle a:focus {outline:none}*/
#nav-left-toggle ul {list-style:none; display:none}
#nav-left-toggle ul li {cursor:pointer; display:block; padding:0 2rem 0 1rem; list-style:none}
#nav-left-toggle ul li button {padding: 0; line-height:var(--line-height); color:var(--color); background:transparent}
#nav-left-toggle ul li button:hover {color: var(--linkHover)}
/* Remove outline for non-keyboard :focus */
#nav-left-toggle a:focus:not(:focus-visible) {outline:none}
/* Optional: Customize :focus-visible */
#nav-left-toggle a:focus-visible {outline-color:var(--linkHover)}
#nav-left-toggle a.contents-preview {color:var(--previewColor); text-decoration:none; font-weight:500}
#nav-left-toggle a.contents {color:var(--textColor); text-decoration:none; font-weight:600}

/* End New Menu Bar */

/* Language Menu */
.lang-btn {color:var(--titleColor); border:none; background-color:transparent; z-index:90; outline:none; box-shadow:none}
.lang-btn i {margin:auto .4rem !important}
#lang-menu {width:auto; height:auto; background:var(--menuNav); /*backdrop-filter:blur(4rem) brightness(30%); -webkit-backdrop-filter:blur(4rem) brightness(30%);*/ position:fixed; right:0; display:none; z-index:100; box-shadow: -2px -2px 2px 2px rgb(0 0 0 / 50%); border:solid; border-color:var(--menuBorder); border-width:.1rem ; border-bottom-left-radius:2rem; border-top-left-radius:2rem;-webkit-transitimon:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all}
#lang-menu-toggle {padding:1rem 1rem;list-style:none; min-width:100%; color:var(--color)}
#lang-menu-toggle a button {margin:0 2rem !important; padding:0 !important; line-height:var(--line-height); color:var(--color); background:transparent}
#lang-menu-toggle a button:hover {color: var(--linkHover)}
#lang-menu-toggle a {display:block; text-decoration:none; padding:0; line-height: var(--line-height)}
/* Remove outline for non-keyboard :focus */
#lang-menu-toggle a:focus:not(:focus-visible) {outline:none}
/* Optional: Customize :focus-visible */
#lang-menu-toggle a:focus-visible {outline-color:var(--linkHover)}

/** Intro */
.about-menu {display:flex; flex-direction:column; align-items:flex-start; margin-top:1em; margin-bottom:1em; margin-left:1em; list-style:none;}
.featured-content {margin:5em 0 5em 0}

/** Content */
.title-wrap {margin:0 1rem}
.flex-wrap {max-width:80vw}

/* OSM */
.geomap-static {width:auto;height:auto;max-width:60rem}
.geomap-tile {margin:0;padding:0}
.geomap-row td, tr {margin:0;padding:0;border:none}

/* Book */
.book-preview {max-width:30rem; padding:2rem auto; border:none; --linkDecoration:none}
.book-preview-soon {max-width:20rem; padding:2rem auto; border:none; --linkDecoration:none}
.book-contents {margin:3rem; min-width:30rem; max-width:50rem}
.book-contents a {padding:auto 5rem}
.book-order {max-width:40rem; padding:1rem; border:none; --linkDecoration:none}
.book-icon {margin: 0 auto; padding: 1rem}
.book-icon-bn {padding: 2.25rem}
.book-online {max-width: 65rem}
.book-cover img {max-width:30rem; padding:2rem}
.book-media img, video {padding 1rem; border:solid; border-width:.2rem; border-color:var(--cardBorder); box-shadow: 2px 3px 3px rgb(0 0 0 / 100%)}

/* Chapter */
.chapter-preview {background:var(--cardDark); max-width:35rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); border-radius:0 0 1rem 1rem; margin:3rem}
.chapter-preview:hover {background:var(--cardDark); border-color:var(--dateColor)}
.chapter-preview:hover .article-preview-img {filter:brightness(75%)}
.chapter-preview a {text-decoration:none}
.chapter-preview a:hover {color:var(--linkHover)}
.chapter-preview-card {position:relative}
.chapter-preview-figure a:hover {filter:brightness(75%)}
.chapter-preview-label-upper {width:auto; background-color:var(--photoLabel); border-radius: 0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; list-style:none; color:var(--figureColor)}
.chapter-preview-title {flex:auto; padding:0; font-size:larger; font-weight:bold}
.chapter-preview-title a {color:var(--titleColor)}
.chapter-preview-description {font-size:1.5rem; padding:.5rem 1rem 1rem 1rem; color:var(--textColor)}
.chapter-preview-text {color:var(--textColor)}
.chapter-preview-date {margin:0 0 0 1rem; color:var(--dateColor)}
.chapter-preview-date li {list-style:none; margin:0; padding:0 1rem 0 1rem}
.chapter-title {}
.chapter-title p {color:var(--titleColor)}
.chapter-description {padding:0 1rem; color:var(--textColor)}
.chapter-text {max-width:85rem; color:var(--textColor)}
.chapter-text h1, h2, h3, h4, h5, h6 {text-indent:0; color:var(--titleColor)}
.chapter-text li {text-indent:0}
.chapter-img {max-width:55rem}
.chapter-date {color:var(--dateColor)}
.chapter-date li {list-style:none}
.chapter-related {padding:4rem 2rem 4rem 2rem; color:var(--titleColor)}

.chapter-pager {max-width:55rem; color:var(--titleColor); padding:.5rem}
.chapter-pager button {color:var(--titleColor)}
.chapter-pager a {color:var(--titleColor); text-decoration:none}
.chapter-btn {color:var(--titleColor); border:none; background-color:transparent; outline:none; box-shadow:none}
.chapter-btn:hover {color:var(--primary)}

.chapter-block {min-width:100%}
.chapter-media {display:flex; justify-content:space-around}

a.contents-preview {color:var(--previewColor); text-decoration:none; font-weight:600}
a.contents {color:var(--titleColor); text-decoration:none; font-weight:600}

.chapter-photo {display:flex; justify-content:space-around}

/** Article / Words */
/*.article {padding:0 1rem 0 1rem}*/
.article-preview {background:var(--cardDark); max-width:45rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); border-radius:0 0 1rem 1rem; margin:3rem}
.article-preview:hover {background:var(--cardDark); border-color:var(--dateColor)}
.article-preview:hover .article-preview-img {filter:brightness(75%)}
.article-preview a {text-decoration:none}
.article-preview a:hover {color:var(--linkHover)}
.article-preview-card {position:relative}
.article-preview-figure a:hover {filter:brightness(75%)}
.article-preview-label-upper {width:auto; background-color:var(--photoLabel); border-radius: 0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; list-style:none; color:var(--figureColor)}
.article-preview-title {flex:auto; padding:0; font-size:larger; font-weight:bold}
.article-preview-title a {color:var(--titleColor)}
.article-preview-description {font-size:1.5rem; padding:.5rem 1rem 1rem 1rem; color:var(--textColor)}
.article-preview-text {color:var(--textColor)}
.article-preview-date {margin:0 0 0 1rem; color:var(--dateColor)}
.article-preview-date li {list-style:none; margin:0; padding:0 1rem 0 1rem}
.article-title {margin:0 1rem}
.article-title p {color:var(--titleColor)}
.article-description {margin:0 1rem; color:var(--textColor)}
.article-text {margin:0 1rem; max-width:85rem; color:var(--textColor)}
.article-text h1, h2, h3, h4, h5, h6 {text-indent:0; color:var(--titleColor)}
.article-img {max-width:55rem}
.article-date {margin:1rem; color:var(--dateColor)}
.article-date li {list-style:none}
.article-related {margin:4rem 2rem 4rem 2rem; color:var(--titleColor)}
.accordion {}
.left {float:left}
.left img {margin:1rem 2rem}
.right {float:right}
.right img {margin:1rem 2rem}
.block {display:flex; justify-content:center}

/** Photos **/
.photo-search-preview {position:relative; margin:1rem; max-width:25rem; border:solid; border-width:.1rem; border-color:var(--cardBorder)}
.photo-search-preview a {text-decoration:none}
.photo-search-preview:hover {border-color:var(--dateColor); color:var(--linkHover)}
.photo-search-preview:hover a {color:var(--linkHover)}
.photo-search-preview img:hover {filter:brightness(75%)}
.photo-search-preview-upper {width:auto; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; color:var(--figureColor)}
.photo-preview {position:relative; margin:2rem; max-width:40rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); font-size:1.7rem; color:var(--textColor)}
.photo-preview:hover {background:var(--cardDarkActive); border-color:var(--dateColor); color:var(--textColor)}
.photo-preview img:hover {filter:brightness(75%)}
.photo-preview a {text-decoration:var(--linkDecoration); color:var(--textColor)}
.photo-preview-title {padding:.2rem}
.photo-search {max-width:30rem}
.photo-title {}
.photo-description {margin:0}
.photo-date {flex:initial; margin:0; font-size:1.7rem; color:var(--textColor)}
.photo-location {flex:auto; margin:0}
.photo-location a {text-decoration:var(--linkDecoration); font-size:1.7rem; color:var(--textColor)}
.photo-label-upper {width:auto; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; list-style:none; color:var(--textColor)}
.photo-label-lower {width:100%; display:flex; background-color:var(--photoLabel); padding:0 1rem 0 1rem; position:absolute; left:0; bottom:0}

/** Preview Images**/
.preview {position:relative; margin:2rem; max-width:40rem; border:solid; border-width:.2rem; border-color:var(--bodyDark); font-size:1.7rem; color:var(--figureColor)}
.preview:hover {border-color:var(--cardBorderActive); color:var(--linkHover)}
.preview img:hover {filter:brightness(75%)}
.preview-label-upper {width:auto; background-color:var(--photoLabel); border-radius:0 0 .75rem 0; padding:0 1rem 0 1rem; position:absolute; left:0; top:0; color:var(--figureColor)}
.preview-label-lower {width:auto; display:flex; background-color:var(--photoLabel); border-radius: 0 .75rem 0 0; padding:.3rem 1rem .3rem 1rem; position:absolute; left:0; bottom:0}
.preview-title {flex:auto}
.preview-location {flex:auto; text-decoration:underline}
.preview-location a {font-size:1.7rem; color:var(--figureColor); text-decoration:underline}
.preview-date {flex:initial; margin:0; font-size:1.7rem; color:var(--figureColor)}

.image-overlay {backdrop-filter:none}

/** Media Featured**/
.media-featured {max-width:90vw; margin:1rem; background:var(--cardDark); border-radius:0 0 1rem 1rem}
.media-featured-label {display:flex}
.media-featured-location {flex:auto; padding:1rem}
.media-featured-location a {font-size:1.7rem; color:var(--textColor)}
.media-featured-date {flex:initial; padding:1.3rem 1rem .7rem 1rem; font-size:1.7rem; color:var(--textColor)}

/** Social **/
.social {display:flex; background:var(--cardDark); max-width:30rem; padding:.2rem; border:solid; border-width:.1rem; border-color:var(--cardBorder); border-radius:1rem}
.social-button a {margin:.5rem 1rem .5rem 1rem; width:2.2rem; height:2.5rem}
.social-icon img {width:100%; height:100%}

/** Stripe **/
.order-now {max-width:35rem}
.stripe-box {color:var(--textColor)}
.stripe-button {background-color:#FFD700}
.stripe-button a {color:#090909 !important; text-decoration:none}

/** Zotonic Styles **/
.list-unstyled {list-style:none}
.button-unstyled a {color:white; text-decoration:none}
.button-unstyled a:hover {color:white}
.text-muted { color: rgba(255, 255, 255, 50%) !important}
.z-logon-box #signup_error_tos_agree, .z-logon-box #signup_error_duplicate_username, .z-logon-box #signup_error_duplicate_identity {display:none}
.z-logon-box.error_tos_agree #signup_error_tos_agree, .z-logon-box.error_duplicate_username #signup_error_duplicate_username, .z-logon-box.error_duplicate_identity #signup_error_duplicate_identity, .z-logon-box.error_custom_1 #signup_error_custom_1, .z-logon-box.error_custom_2 #signup_error_custom_2 {display:block}
.z-logon-title {margin:1rem 3rem}
.z_validation_message {display: block; margin:.5rem 0 0 0}
.z_invalid {color:var(--red)}
.invalid {color:var(--red)}
.z-logon-box #signup_verify {display:none}
.z-logon-box p {margin:auto 2rem}
#signup_error_tos_agree {display:none}
#signup_error_duplicate_username {display:none}
#signup_error_duplicate_identity {display:none}

/** Logon / Signup **/
.logon-page {margin:2rem 1rem; padding:2rem; max-width:60rem; border-radius:1rem /* Extra login options */}
.logon-page ul {list-style-type:none}
.logon-page p {color:var(--textColor)}
.logon-page .logon-page-form {margin:0}
.logon-page-title {margin:0; font-weight:bold}
.logon-page-unstyled {list-style:none}
.logon-page-back {margin:4rem 2rem}
.logon-page-prompt {text-align:center; max-width:40rem; margin:auto}
.logon-page-form {margin:auto}
.logon-page-alert {padding:1rem; margin-bottom:1rem; border-radius:1rem; color:#fff; text-transform:uppercase}
.logon-page-alert-info{border:2px solid white}
.logon-page-alert-success{background-color:var(--green)}
.logon-page-alert-warning{background-color:var(--yellow)}
.logon-page-alert-error{background-color:var(--red)}
.logon-page button[type="submit"], .logon-page input[type="submit"] {min-width:35%; margin:2rem auto 1rem auto}
.logon-page input[type="text"], .logon-page input[type="password"], textarea {}
.logon-page input[type="checkbox"] {}
.logon-page img.loading {display:block; margin:0 auto; opacity:0.5; height:1.6rem}

/** Form / Input Styles **/
.form-control-sk {display:block}
.form-group-sk {display:flex; flex:0 0 auto; flex-flow:row wrap; align-items:center; margin-bottom:1rem; color:var(--textColor)}
.form-group-sk h1, h2, h3, h4, h5, h6 {color:var(--titleColor)}
.form-group-sk input {}
.form-button .button {}
.form-group input, textarea {background: #000}

/** Search **/
.pagination li {list-style:none; padding:1em}
.disabled li {color:grey}

/** Figure */
.figure {max-width:100vw; height:auto; display:block; margin:0; border:solid; border-width:.2rem; border-color:var(--bodyDark)}
.figure img {filter: brightness(85%)}
.figure:hover {background:var(--cardDarkActive); border-color:var(--dateColor); color:var(--textColor)}
.figure img:hover{filter: brightness(70%)}
.figure-title {margin:0 0 1em 0}
.figure-summary {margin:.3em .3em 0 .3em}
.figure-caption {margin:.4rem .5rem .3rem .5rem; font-size:1.7rem; text-align:center; color:var(--figureColor)}
.figure-date {margin:.5em 1em 0 1em; font-size:1.7rem; color:var(--figureColor)}
.figure-location {margin:.5em 1em 0 1em; font-size:1.7rem; color:var(--figureColor)}

/* Footer */
.footer {}
.footer-wrap {background:var(--bodyDark); margin:0 -1rem 0 -1rem !important; padding: 2rem}
.foot-items {color:var(--footerText)}
.foot-items a {color:var(--footerText); margin:.5rem; text-decoration:none}
.foot-img {max-width:10rem; margin:1rem}
.foot-copy {background:var(--backgroundDark); font-size:small; margin:0 -1rem !important; padding:1rem}
.foot-copy a {color:var(--footerCopyText); text-decoration:none}

/** Spacing */
.space-half {display:block; width:100%; margin:2vw auto; margin-top:2vw; margin-right:auto; margin-bottom:2vw; margin-left:auto}
.space1 {display:block; width:100%; margin:5vw auto; margin-top:5vw; margin-right:auto; margin-bottom:5vw; margin-left:auto}
.space2 {display:block; width:100%; margin:10vw auto; margin-top:10vw; margin-right:auto; margin-bottom:10vw; margin-left:auto}