/* @group Lightbox
------------------------------------ */
.lightbox { position: fixed; top: 0; bottom: 0; right: 0; left: 0; opacity: 0; pointer-events: none; z-index: -1; transition: all .3s ease; }
.lightbox .row { background-color:rgba(0,0,0,.5); height: 100%; }
.lightbox article { background-color: var(--white); }
.lightbox article .txt-box .header-box span { font: var(--tag); letter-spacing: var(--tag-letterspacing); text-transform: uppercase; color: var(--white); background-color: var(--light-grey); display: inline-block; padding: .35rem .8rem; margin-right: .5rem; }
.lightbox article .txt-box .header-box time,
.lightbox article .txt-box .header-box .location { font: 700 1.6em / 1.2em var(--nobel-font); letter-spacing: .17em; color: var(--white); text-transform: uppercase;}
.lightbox article .txt-box .header-box time { display: block; margin: 2rem 0 2rem; }
.lightbox article .txt-box .header-box .location:hover { color: var(--gold); }
.lightbox article .txt-box h3 { font: 700 3em / 1.2em var(--nobel-font); letter-spacing: .15em; text-transform: uppercase; color: var(--white); margin: 0 0 1rem; }
.lightbox article .txt-box .description { color: var(--black); margin: 0 0 3rem; }

.lightbox [data-comp="close-lightbox"] { position: absolute; z-index: 9991; right: 3rem; top: 2.5rem; cursor: pointer; display: inline-block; }
.lightbox [data-comp="close-lightbox"] i { font-size: 4rem; color: var(--white); pointer-events: none; }

.lightbox.show { opacity: 1; pointer-events: all; z-index: 999; }
@media only screen
and (min-width : 961px) {
    .lightbox article [data-comp="close-lightbox"] { right: 2.1rem; top: 3.1rem; transition: all .4s ease; }
    .lightbox article [data-comp="close-lightbox"]:hover { scale: 1.05; }
    .lightbox article [data-comp="close-lightbox"] i { font-size: 4rem; color: var(--gold); }

    .lightbox article { padding: 5.2rem 8rem 3.4rem 4.7rem; display: flex; }
    .lightbox article .img-box { flex: 0 1 35.9rem; max-width: 35.9rem; height: auto; border-radius: 0 5rem; margin-right: 5rem; }
    .lightbox article .txt-box { flex: 0 1 calc(100% - 40.9rem); min-width: calc(100% - 40.9rem); max-height: 60rem; overflow-y: scroll; }
    .lightbox article .txt-box::-webkit-scrollbar { width: 1rem; }
    .lightbox article .txt-box::-webkit-scrollbar-track { background: var(--white); width: 1rem; }
    .lightbox article .txt-box::-webkit-scrollbar-thumb { border-radius: 2rem; background: var(--gold); }
    .lightbox article .txt-box .header-box span { font: var(--body-desktop); letter-spacing: 0; padding: .3rem 1.3rem .5rem; margin: 0 0 3.4rem; margin-right: 1.5rem; }
    .lightbox article .txt-box .header-box time,
    .lightbox article .txt-box .header-box .location { font: 400 2em / 1.4em var(--brandon-font); letter-spacing: 0; color: var(--black);  }
    .lightbox article .txt-box .header-box time { margin: 0 0 .5rem; }
    .lightbox article .txt-box .header-box .location { text-transform: none; }
    .lightbox article .txt-box h3 { font: 900 3.5em / 1.085em var(--brandon-font); color: var(--green); padding-right: 5rem; }
    .lightbox article .txt-box .description { margin: 4.1rem 0 5rem; }
    .lightbox article .txt-box .textlink { margin: 0 0 2rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1240px) {
    .lightbox article .img-box { flex: 0 1 27rem; max-width: 27rem; }
    .lightbox article .txt-box { flex: 0 1 calc(100% - 32rem); max-width: calc(100% - 32rem); }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .lightbox .row { padding: 0 2rem; }
    .lightbox article { padding: 3rem 2rem; border-top-right-radius: 5rem; overflow: hidden; }
    .lightbox article [data-comp="close-lightbox"] i::before { content: "\e902"; }
    .lightbox article .img-box { position: absolute; top: 0; left: 0; width: 100%; height: 28rem; }
    .lightbox article .img-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 28rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); background-blend-mode: multiply, normal; }
    .lightbox article .txt-box { position: relative; }
    .lightbox article .txt-box .header-box { height: 22rem; padding-right: 5rem; margin-bottom: 5rem; }
}

/* @end */