/*** 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: #090909;  /*#181818 #060606; */
    --menuDark: #202020;
    --menuBar: rgba(9, 9, 9, 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%);
    --dateColor: rgba(255, 255, 255, 60%);
    --textColor: rgba(255, 255, 255, 75%);
    --photoLabel: rgba(0, 0, 0, 60%);
    --figureColor: rgba(255, 255, 255, 65%);
    --footerColor: rgba(255, 255, 255, 50%);

}

/*** 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)}


/* ------------------
  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) {}
/* Device = Low Resolution Tablet, Mobile (Landscape) | Screen = b/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
#nav-right {top:10%}
}
/* Device = Tablet, iPad (landscape) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}
/* Device = Tablet, iPad (portrait) | Screen = b/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
#nav-right {top:15%}
}
/* Device = Laptop, Desktop | Screen = b/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
#nav-right {top:20%}
}
/* 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}
}
/* 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}
}

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

/** Site **/
.site-wrap {max-width:100%;background:var(--bodyDark)}
.app {display:flex; min-height:100vh; flex-direction:column; justify-content:space-between; overflow-x:hidden; box-sizing:border-box}

/** Header */
.header {background:var(--bodyDark); margin: 0 auto}
.banner-img {margin:0 a:uto !important; position:relative; background:var(--bodyDark)}
.menu-bar {z-index:90}
.nav-bar {max-width:1600px; margin:0 auto !important; background:var(--menuBar)}
.nav-sticky {position: -webkit-sticky; position:sticky; top:0; z-index:80; backdrop-filter:blur(4rem); -webkit-backdrop-filter:blur(4rem)}
.home-icon {list-style:none; max-height:2.2em}

/** Body */
.body-wrap {background:var(--bodyDark);max-width:1440px; margin:0 auto}
.app a:hover {color:var(--linkHover)}
.breadcrumb {position:-webkit-sticky; position:sticky; top:0; margin:0 1rem; z-index:81}
.breadcrumb-container {max-height:4rem; overflow:hidden}
.breadcrumb-container li {list-style:none; color:var(--dateColor); z-index:90}
.breadcrumb-container a {color:var(--dateColor); text-decoration:none}
.page-title {margin:0 1rem; padding:0 !important; color:var(--titleColor)}
.page-title p {padding:0 !important; color:var(--titleColor)}
.page-text {margin:auto 1rem; max-width:85rem; color:var(--textColor)}
.page-text h1, h2, h3, h4, h5, h6 {color:var(--textColor)}
.home-text {margin:auto 1rem; color:var(--textColor)}
.cell-wrap {margin:1rem}

/* Menu */
.menu-btn{color::var(--titleColor); border:none; background-color:transparent; z-index:90; 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-right {width:auto; height:auto; 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-reset {height:100%; width:100%; z-index:80; display:none}
#nav-right-toggle {padding:3rem 5rem 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)}

/* End New Menu Bar */

/** 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}

/** 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 {text-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 irem; color:var(--textColor)}
.article-text {margin:0 1rem; max-width:85rem; color:var(--textColor)}
.article-text h1, h2, h3, h4, h5, h6 {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; margin:1rem 2rem}
.right {float:right; 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%}

/** Zotonic Styles **/
.list-unstyled {list-style:none}
.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_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}
#signup_error_tos_agree {display:none}
#signup_error_duplicate_username {display:none}
#signup_error_duplicate_identity {display:none}

/** Logon / Signup **/
.logon-page {margin:0; padding:1rem; 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{background-color:none; 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 {}


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

/** Figure */
.figure {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 {max-width:1440px; margin:6rem auto 2rem auto !important}
.foot-items {color:var(--footerColor); padding:1rem}
.foot-items a {color:var(--footerColor); margin:.5rem; text-decoration:none}
.foot-img {max-width:10rem; margin:1rem}

/** 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}