@charset "UTF-8";

/* GLOBAL STYLES */

p {
    position: relative;
}

.no-margin-top {
    margin-top: 0 !important;
}

.lineheight-normal {
    line-height: normal !important;
}

#acf-pages > div > div.main-container {
	color: #aaa;
    font-weight: 400;
	text-shadow: 3px 3px 6px #000;
    background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: left top;
	background-image: linear-gradient(transparent, rgba(0,0,0,0.9)), url("../img/site/milkyway.webp");
}

#acf-pages > div > div.main-container .sectionTitle {
    color: #bbb;
}

#acf-pages > div > div.main-container h2,
#acf-pages > div > div.main-container .pageTitle {
    color: #b597d1; /*#97b9d1*/
}

#acf-pages > div > div.main-container .pageTitle {
    margin-bottom: 16px;
}

#acf-ui-mask {
	background-image: linear-gradient(to right, rgba(204, 204, 204, 1) 100px, rgba(0, 0, 0, 0.5) 101px);
}

div.main-container > div.scrolling {
    outline: none;
}

main.acf {
    position: relative;
    z-index: 1;
    padding: 70px 20px 20px 20px;
}
/* ------------------------------------- */



/* FLYOUT MENU */

#acf-flyout nav li {
    padding-right: 64px;
}

li[data-patches]::after {
    content: attr(data-patches);
    position: absolute;
    top: 9px;
    right: 28px;
    min-width: 24px;
    border-radius: 998px;
    padding: 2px 6px;
    line-height: 14px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background-color: #999;
}

.touch li[data-patches]::after {
    top: 8px;
}
/* ------------------------------------- */



/* PAGE STRUCTURE */

/* SECTION & PAGE TITLES */

.sectionTitle, .pageTitle, .topic, h2 {
	font-family: Roboto, sans-serif;
}

.accordion.topic {
	font-family: Roboto, sans-serif;
}

main.acf header.sectionTitle {
    border-bottom-width: 1px;
}

/* NAVIGATION FOOTER */

footer.acf {
    border-top-color: #444;
}

footer.acf div.container div.section {
    color: rgba(255, 255, 255, 0.4);
}
/* ------------------------------------- */



/* COMMON PAGE ELEMENTS */

/* HERO FIGURE */

figure.hero {
    position: relative;
    margin: 40px 0;
}

figure.hero img,
figure.hero a.zoomable {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 230px);
}

figure.hero figcaption {
    display: block;
    padding: 0 60px;
    font-size: 12px;
    text-align: center;
}


/* INSET IMAGE */

img.inset {
    margin: 16px 0;
    width: 100%;
    height: auto;
}


/* INSET CAPTION */

span.caption {
    display: block;
    margin: 0 20px 1em;
    font-size: 12px;
    text-align: center;
}


/* BLOCKQUOTE */

.cursive {
    font-family: Satisfy, cursive;
    font-size: 24px;
}

blockquote {
    position: relative;
    clear: both;
    line-height: inherit;
}

blockquote.cursive {
    margin-bottom: 0;
}

blockquote span.credit {
    display: block;
    width: 100%;
    text-align: right;
    white-space: nowrap;
}

blockquote span.credit::before {
    content: '\2014';
    padding-right: 6px;
}

section.blockquote-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

section.blockquote-center > blockquote {
    display: inline-block;
}


/* PAGE FOOTER: DISCLOSURES, FOOTNOTES AND EXTERNAL LINKS */

div.main-container main.acf footer {
    padding-top: 8px;
    border-top: 1px dashed #444;
}

div.main-container main.acf footer {
    font-size: 12px;
    padding-top: 16px;
}

div.main-container div.cols-2 p:first-child,
div.main-container main.acf footer p:first-child {
    margin-top: 0;
}

div.main-container main.acf footer p.footnote {
    position: relative;
}

div.main-container main.acf footer p.footnote::before {
    position: absolute;
    left: -8px;
    top: 0px;
    content: attr(data-notation);
    font-size: 8px;
}

div.main-container main.acf footer p:not(.no-hlist) > a + a::before {
    display: inline-block;
    content: "\2022";
    margin: 0 8px;
    color: #aaa;
}
/* ------------------------------------- */



/* PATCH RELATED CONTENT */

/* MISSION & CREW DATA */

ul.mission,
ul.crew-list {
    padding-left: 0;
}

ul.mission ul,
ul.crew-list ul {
    padding-left: 0;
}

ul.mission li,
ul.crew-list li {
    list-style: none;
}

ul.mission > li,
ul.crew-list > li {
    padding-left: 0px;
}

ul.mission ul,
ul.crew-list ul {
    margin-top: 0px;
    margin-bottom: 0px;
}

ul.mission ul > li,
ul.crew-list ul > li {
    padding-left: 16px;
    line-height: normal;
}

ul.mission ul > li:last-child,
ul.crew-list ul > li:last-child {
    margin-bottom: 0;
}

ul.mission small {
    margin-left: 8px;
}

li span.label {
    margin-right: 4px;
}

span.label {
    font-style: normal;
    color: #ddd;
}


/* PATCH COUNT TAG */

h1[data-count],
h2[data-count] {
    margin-right: 16px !important;
}

h1[data-count]::after,
h2[data-count]::after {
    position: relative;
    bottom: 2px;
    content: attr(data-count);
    color: #aaa;
    background-image: radial-gradient(transparent, rgba(255,255,255,0.15));
    margin-top: 16px;
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    font-family: Roboto, sans-serif;
    white-space: pre;
}

h1[data-count]::after {
    font-size: 18px;
}

h2[data-count]::after {
    font-size: 14px;
}


/* NEW PATCH TAG */

article.image > div > a[data-new]::before {
    position: absolute;
    left: 0;
    content: attr(data-new);
    border: 1px solid #97b9d1;
    border-radius: 10px;
    color: #fff;
    background-image: radial-gradient(transparent, rgba(151,185,209,0.4));
    padding: 4px 8px;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    white-space: pre;
    text-decoration: none;
    text-shadow: none;
}


/* PATCH PROPERTIES */

article.image div.props p {
    display: flex;
    line-height: normal;
}

article.image div.props p span.label {
    min-width: 98px;
    max-width: 98px;
}

article.image div.props p span.content {
    line-height: normal;
}

article.image div.props p span.content.note {
/*    margin-top: 2px;*/
/*    line-height: normal;*/
}

article.image div.props p span.content br.margin {
    display: block;
    margin: 0.5em 0;
    content: ' ';
}


/* PATCH DIMENSIONS */

span.fraction {
    position: relative;
    margin-left: -5px;
    padding: 0px !important;
    font-style: italic;
}

span.fraction span{
    position: relative;
    display: inline-block;
    font-size: 11px;
    font-style: normal;
}

span.fraction span:first-child {
    top: 0px;
    left: 2px;
    margin-left: 1px;
    vertical-align: text-top;
}

span.fraction span:last-child {
    left: 0px;
}


/* PATCH IMAGE */

article.image::before,
article.image::after {
    display: none;
} 

article.image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

article.image > div {
    position: relative;
    flex: 1 1 auto;
}

article.image > div:first-child {
    flex: 1 0 auto;
    width: 100%;
    text-align: center;
}

article.image > div:last-child {
    flex: 1 1 auto;
}

article.image img {
    width: 100%;
}

article.image {
    margin-top: 16px;
}

article.image + article.image {
    padding-top: 16px;
    border-top: 1px dashed #444;
}

article.image div.hallmark {
    position: relative;
}

article.image div.hallmark img {
    width: 100%;
}

article.image div.hallmark img.hallmark {
    position: absolute;
    -webkit-animation: hallmark 3s 2s infinite alternate; /* Safari 4+ */
    -moz-animation: hallmark 3s 2s infinite alternate; /* Fx 5+ */
    -o-animation: hallmark 3s 2s infinite alternate; /* Opera 12+ */
    animation: hallmark 3s 5s ease-in-out infinite alternate; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes hallmark {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes hallmark{
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes hallmark {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes hallmark {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
/* ------------------------------------- */



/* MISSION TIMELINE LAYOUT */

div.timeline div.segment {
    position: relative;
    padding-left: 46px;
    line-height: normal;
}

div.timeline div.segment::before {
    content: attr(data-label);
    position: absolute;
    top: 0;
    right: calc(100% - 34px);
    color: #ddd;
}

div.timeline div.segment.year::before {
    color: #b597d1;
    font-weight: 700;;
}

div.timeline div.segment div.node {
    display: block;
    position: relative;
    padding-left: 30px;
    padding-bottom: 16px;
    background-image: linear-gradient(#444, #444), linear-gradient(rgba(128,128,128,0), rgba(128,128,128,0));
    background-repeat: no-repeat;
    background-position: left 6px top, left 4px top 11px;
    background-size: 4px 100%, 20px 2px;
}

div.timeline div.segment div.node::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #000;
    background-image: radial-gradient(circle at top left, #bbbbbb, #333333);
}

div.timeline div.segment.year > div.node::before {
    background-image: radial-gradient(circle at top left, #b597d1, #333333);
    border: 2px solid #999;
    width: 20px;
    height: 20px;
    top: -1px;
    left: -2px;
}

div.timeline div.segment div.node.no-node::before {
    display: none;
}

div.timeline div.segment:first-child div.node:first-child {
    background-position: left 6px top 7px;
}
/*
div.timeline div.segment:last-child div.node:last-child {
    background-size: 4px 10px;
}
*/
div.timeline div.segment div.node > p:first-child {
    margin-top: 0;
    margin-bottom: 0;
    color: #ccc;
    font-weight: 500;
}

div.timeline div.segment div.node p small {
    display: block;
    font-size: 12px;
    line-height: normal;
}

div.timeline div.patch {
    margin-top: 16px;
}

div.timeline div.patch img {
    width: 100%;
    height: auto;
}

div.timeline div.segment.collapsed div.node:first-child {
    padding-bottom: 30px;
}

div.timeline div.segment.year.collapsed > div.segment, 
div.timeline div.segment.collapsed:not(.year) div.node + div.node {
    display: none;
    opacity: 0;
}

div.timeline div.segment.year.collapsed.active > div.segment, 
div.timeline div.segment.collapsed.active:not(.year) div.node + div.node {
    display: block;
    animation: fade-in 0.5s forwards;
}

div.timeline div.segment > div.segment {
    padding-left: 0;
}

div.timeline div.segment.year > div.segment::before {
    right: calc(100% + 12px);
}

div.timeline div.segment.year.no-show::before,
div.timeline div.segment.year.no-show > div.node {
    display: none;
}

div.timeline div.segment.month:not(.collapsed) > div.node:first-child {
    display: none;
}
/* ------------------------------------- */



/* ZOOMABLE IMAGES */

a.zoomable,
img.zoomable {
    /* this rule correctly wraps an anchor tag around a floating image to make the entire image accept an event */
    position: relative;
    z-index: 10;
}

.no-touch img.zoomable.inset:hover,
.no-touch img.zoomable:hover {
    cursor: zoom-in;
}

a.zoomable:not(.inset) {
    display: inline-block;    
}

div.node img.zoomable {
    display: inherit;
}


/* FRONTBACK OVERLAY */

div.frontback-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    background-image: url("../icon/frontback.svg");
    z-index: 11;
    opacity: 0;
    transition: all 0.7s;
    cursor: zoom-in;
}

figure.hero div.frontback-overlay {
    width: 180px;
    height: 180px;
}

.no-touch div.node div.patch div.frontback-overlay {
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
}

.no-touch a.zoomable.backside:hover div.frontback-overlay {
    opacity: 1;
}


/* FANCYBOX */

.fancybox__caption {
    text-align: center;
}


/* ZOOM-IN BUTTON */

div.zoom-in {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center;
    background-image: url("../icon/zoom-plus.svg");
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 11;
}

.no-touch div.zoom-in:hover {
    background-color: rgba(128, 128, 128, 0.8);
}

img.zoomable.inset + div.zoom-in {
    top: 0;
    left: 0;
}

img.zoomable.inset.right + div.zoom-in {
    left: auto;
    right: 0;
}

.no-touch img.zoomable:hover {
    cursor: zoom-in;
}


/* ZOOM-IN COLLECTION BUTTON */

div.zoom-in.collection {
    padding-left: 40px;
    padding-right: 10px;
    width: auto;
    font-size: 32px;
    line-height: 44px;
    color: #fff;
    text-shadow: none;
    border-radius: 998px;
    text-align: right;
    background-position: left 10px center;
}


/* ZOOM-IN + FRONTBACK ICON */

div.zoom-in.frontback {
    width: 76px;
    border-radius: 998px;
    background-size: 24px, 26px;
    background-position: left 10px center, right 10px center;
    background-image: url("../icon/zoom-plus.svg"), url("../icon/frontback.svg");
}
/* ------------------------------------- */



/* ACCORDION LAYOUT */

section.group > header {
    margin-bottom: 20px;
    border-bottom: 1px solid #666;
    padding-bottom: 8px;
    font-size: 26px;
}

section.group.accordions > header {
    margin-bottom: 0;
}

div.accordion[data-count]::after {
    position: absolute;
    right: 16px;
    content: attr(data-count);
}

div.accordion {
    position: relative;
    padding-left: 40px;
    padding-right: 60px;
    font-size: 22px;
    color: #71bae8;
    border-bottom: 1px solid #666;
    line-height: 40px;
    background-color: rgba(255,255,255,0.1);
    text-shadow: 1px 1px 1px #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s;
}

.no-touch div.accordion:hover {
    background-color: rgba(0,0,0,0.4);
    color: #3a8bbb;
    cursor: pointer;
}

div.accordion::before {
    content: '';
    display: block;
    position: absolute;
    height: 40px;
    width: 40px;
    top: 50%;
    left: 0;
    background-repeat: no-repeat;
    background-size: 18px auto;
    background-position: center;
    background-image: url(../acf/img/close-dddddd.svg);
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
}

div.accordion.active:hover,
div.accordion.active {
    background-color: rgba(0,0,0,0);
    border-bottom-color: transparent;
}

div.accordion.active {
    background-color: rgba(0,0,0,0);
}

div.accordion.active:hover {
    background-color: rgba(0,0,0,0.4);
}

div.accordion.active::before {
    background-size: 18px auto;
    transform: translateY(-50%) rotate(0deg);
}

div.accordion + section {
    margin: 0 12px 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}

div.accordion.active + section {
    margin: 16px 12px 40px;
    max-height: 10000px;
    opacity: 1;
}

div.accordion + section p.intro {
    margin: 0 0 24px;
}

div.collection + div.collection,
div.collection + article.image {
    margin-top: 16px;
    border-top: 5px solid #444;
    padding-top: 20px;
}

article.image + div.collection {
    margin-top: 16px;
    border-top: 1px dashed #444;
    padding-top: 16px;
}

div.expand-collection + article.image,
div.collection article.image + article.image,
article.image.fade-in {
    display: none;
    opacity: 0;
    transition: opacity 0.5s linear;
}

div.expand-collection + article.image.flex,
div.collection article.image + article.image.flex,
article.image.fade-in.flex {
    display: flex;
}

div.expand-collection + article.image.active,
div.collection article.image + article.image.active,
article.image.fade-in.active {
    opacity: 1;
}

article.image h3 {
    color: #ddd;
}
/* ------------------------------------- */



/* EXPAND COLLECTION */

div.expand-collection {
    margin-top: 16px;
    height: 44px;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center bottom 10px;
    background-size: 30px;
    background-image: url("../acf/img/chevron-down-wide-ffffff.svg");
}

div.expand-collection a {
    display: block;
    height: 100%;
}
/* ------------------------------------- */



/* CROPPED TEXT: SHOW MORE */

div.cropped-text {
    position: relative;
    width: 100%;
    max-height: 80px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

div.cropped-text.active {
    max-height: 10000px;
}

div.cropped-text div.show-more {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 30px;
    background-image: linear-gradient(90deg, rgba(24,24,24,0.1), rgba(24,24,24, 1) 36px);
    color: #71bae8;
    transition: all 0.3s;
}

div.cropped-text.active div.show-more {
    display: none;
}

div.cropped-text div.show-more::after {
    content: '... Show more';
}

div.cropped-text p {
    cursor: pointer;
    transition: all 0.2s;
}

.no-touch div.cropped-text:not(.active):hover p {
    color: #ccc;
}

.no-touch div.cropped-text:not(.active):hover div.show-more {
    color: #3a8bbb;
}
/* ------------------------------------- */



/* SHARE BUTTON */

div.share-button {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center;
    background-image: url("../icon/share.svg");
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transform: scale(1);
    transition: all 0.5s;
    cursor: pointer;
    z-index: 11;
}

img.zoomable.inset + div.share-button {
    top: 0;
    left: 0;
}

img.zoomable.inset.right + div.share-button {
    left: auto;
    right: 0;
}

.no-touch div.share-button:hover {
    background-color: rgba(128, 128, 128, 0.8);
    transform: scale(1.10);
}
/* ------------------------------------- */



/* DIALOG ELEMENTS */

/* DIALOG OVERLAY */

#dialog-mask {
	display: block;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background-color: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: opacity 0.5s;
	z-index: -1;
}

#dialog-mask.active {
    opacity: 1;
    z-index: 300;
}

.no-touch #dialog-mask.active:hover {
	cursor: default;
}


/* DIALOG */

.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 0;
    opacity: 0;
    transition: all 0.5s;
    border-radius: 10px;
    box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.42), 0px 20px 28px 0px rgba(0, 0, 0, 0.50);
    overflow: hidden;
    z-index: -1;
}

.dialog.clone {
    z-index: 301;
}

.dialog.clone.active {
    opacity: 1;
    max-height: calc(100vh - 32px);
}

.dialog.clone div.container {
    background-color: #111;
    overflow: hidden;
}

.dialog.clone div.container header {
    display: flex;
    height: 40px;
    padding-left: 16px;
    padding-right: 8px;
    align-items: center;
}

.dialog.clone div.container header div.title {
    font-weight: 500;
    flex: 1 0 auto;
    color: #888;
}

.dialog.clone div.container header div.close {
    height: 30px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    background-image: url("../icon/close-ffffff.svg");
    background-color: transparent;
    border-radius: 50%;
    transition: all 0.5s;
}

.no-touch .dialog.clone div.container header div.close:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.8);
}

.dialog.clone div.container main {
    max-height: calc(100vh - 72px);
    font-weight: 400;
    color: #aaa;
    text-shadow: 3px 3px 6px #000;
    overflow-x: hidden;
    overflow-y: auto;
}
/* ------------------------------------- */



/* SHARE DIALOG */

.dialog.share {
    width: 340px;
}

.dialog.share div.container main > section.patch {
    padding: 0 16px 16px;
    text-align: center;
}

.dialog.share div.container main > section.patch figure {
    margin-bottom: 8px;
}

.dialog.share div.container main > section.patch figure img {
    width: auto;
    max-width: 80%;
    max-height: 290px;
}

.dialog.share div.container main > section.patch figcaption {
    font-size: 14px;
    line-height: normal;
}

.dialog.share div.container main > section.sharing {
    display: flex;
}

.dialog.share div.container main > section.sharing > div.action {
    flex: 1 0 auto;
    width: 50%;
}

.dialog.share div.container main p.heading {
    margin: 0px;
    padding: 0 16px;
    font-size: 18px;
    text-align: center;
}

.dialog.share div.container main p.heading.connection {
    margin-top: 8px;
    border-top: 1px dashed #999;
    padding-top: 8px;
}

.dialog.share div.action a {
    display: block;
    padding: 0 16px 0 50px;
    height: 40px;
    line-height: 40px;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left 16px center;
    background-color: transparent;
    transition: background-color 0.3s;
}

.dialog.share div.action.facebook a {
    background-image: url("../icon/facebook-square-bbbbbb.svg");
}

.dialog.share div.action.facebook a:hover {
    background-image: url("../icon/facebook-square-4eb0f4.svg");
}

.dialog.share div.action.twitter a {
    background-image: url("../icon/twitter-bbbbbb.svg");
}

.dialog.share div.action.twitter a:hover {
    background-image: url("../icon/twitter-4eb0f4.svg");
}

.dialog.share div.action.instagram a {
    background-image: url("../icon/instagram-bbbbbb.svg");
}

.dialog.share div.action.instagram a:hover {
    background-image: url("../icon/instagram-4eb0f4.svg");
}

.dialog.share div.action.reddit a {
    background-image: url("../icon/reddit-alien-bbbbbb.svg");
}

.dialog.share div.action.reddit a:hover {
    background-image: url("../icon/reddit-alien-4eb0f4.svg");
}

.dialog.share div.action.email a {
    background-image: url("../icon/envelope-bbbbbb.svg");
}

.dialog.share div.action.email a:hover {
    background-image: url("../icon/envelope-4eb0f4.svg");
}

.dialog.share div.action.collectspace a {
    background-image: url("../icon/collectspace-bbbbbb.svg");
    background-size: 28px;
}

.dialog.share div.action.collectspace a:hover {
    background-image: url("../icon/collectspace-4eb0f4.svg");
}

.dialog.share div.action.link a {
    background-image: url("../icon/link-bbbbbb.svg");
}

.dialog.share div.action.link:not(.copied) a:hover {
    background-image: url("../icon/link-4eb0f4.svg");
}

.dialog.share div.action.link.copied a {
    background-image: url("../icon/check-circle-green.svg");
    color: inherit;
}

.dialog.share div.action a:hover {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.dialog.share section.connection {
    display: flex;
    justify-content: center;
    margin: 0 16px 8px;
}

.dialog.share section.connection > div {
    flex: 0 1 auto;
    text-align: center;
}

.dialog.share section.connection > div.action a {
    display: inline-block;
    padding: 0;
    width: 44px;
    height: 40px;
    background-position: center;
}

#CopyLink {
    position: absolute;
    left: -10000px;
}
/* ------------------------------------- */



/* PAYLOAD UPDATES: SOURCE & DIALOG */

.dialog.payload-updates div.list {
    display: none;
}

.dialog.payload-updates {
    width: max-content;
    max-width: calc(100vw - 32px);
}

.dialog.payload-updates div.list {
    padding-bottom: 16px;
}

.dialog.payload-updates.active div.list {
    display: block;
}
/* ------------------------------------- */



/* CARD */

section.card {
    position: relative;
    margin-bottom: 0;
    border: 1px solid #444;
    border-radius: 10px;
    overflow: hidden;
}

section.card div.banner {
    height: 160px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.7;
}

section.card div.caption {
    position: absolute;
    top: 0;
    height: 160px;
    width: 100%;
}

section.card div.caption h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    padding: 8px 24px;
    margin: 0;
    font-size: 36px;
    text-align: center;
    text-shadow: 0 0 10px #000, 1px 0 10px #000, 0 1px 10px #000, -1px 0 10px #000, 0 -1px 15px #000, 0 0 15px #000, 2px 0 15px #000, 0 2px 15px #000, -2px 0 15px #000, 0 -2px 15px #000;
    text-transform: uppercase;
}

section.card div.content {
    margin: 0 16px;
}

section.card div.content.messages {
    border-bottom: 2px dashed #333;
}

section.card div.content p {
    font-size: 18px;
}

section.card p strong {
    color: #eee;
}

section.card.mission div.banner {
    background-position: left bottom, right 30px top 16px, center;
    background-size: auto, auto, cover;
    background-image: url("../img/banner/artemis.webp"), url("../img/banner/apollo-csm.webp"), url("../img/banner/mission.webp");
}
/* ------------------------------------- */



/* SXP DASHBOARD */

/* MISSION CONTROL SECTION */

div.timeline.mission-control img {
    width: 100%;
    height: auto;
}

div.timeline.mission-control div.segment div.node.current {
    background-position: left 6px top 30px;
    background-image: linear-gradient(to bottom, #bbbbbb, #333333);
}

div.timeline.mission-control div.segment div.node.current::before {
    top: 0px;
    height: 26px;
    background-image: url("../icon/rocket-launch.svg");
    background-repeat: no-repeat;
    border-radius: 0px;
    border: none;
    z-index: 10;
}

div.timeline.mission-control div.node.launch-day {
    padding-bottom: 0;
    background-size: 4px 10px;
}

div.timeline.mission-control div.node.launch-day::before {
    top: 9px;
    height: 8px;
    background-image: none;
    background-color: #777;
}


/* PAYLOAD SECTION */

section.payload div.payload-accounting {
    display: flex;
    flex-direction: column;
    row-gap: 26px;
    margin-top: 16px;
}

section.payload div.payload-accounting > div {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    column-gap: 20px;
    align-items: center;
}

section.payload div.payload-accounting > div > div {
    text-align: center;
}

section.payload div.payload-accounting > div > div:first-child {
    border-bottom: 1px solid #555;
    padding-bottom: 8px;
}

section.payload div.payload-accounting div.patchcount {
    font-size: 96px;
    font-weight: 900;
    color: #ccc;
    line-height: 76px;
    margin-bottom: 12px;
}

section.payload div.payload-accounting div.unit {
    font-size: 27px;
    font-weight: 300;
    line-height: 1;
    color: #888;
}

section.payload div.payload-accounting div.date {
    text-align: center;
    color: #888;
}

section.payload div.payload-accounting div.action {
    align-items: center;
    font-size: 20px;
}


/* PAYLOAD TILES */

section.payload div.payload-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
    gap: 20px;
    padding: 24px 16px 16px;
}

section.payload div.payload-tiles div.tile {
    position: relative;
    height: 200px;
    border: 1px solid #665675;
    border-radius: 10px;
    background-color: #000;
    box-shadow: 0 0 6px #b597d1;
    overflow: hidden;
    transition: all 0.3s;
}

.no-touch section.payload div.payload-tiles div.tile:hover {
    box-shadow: 0 0 14px #ccc;
    background-image: radial-gradient(circle at bottom 75px left 75px, #000, #222);
    cursor: pointer;
}

section.payload div.payload-tiles div.tile div.title {
    position: absolute;
    top: 0;
    padding: 8px 8px;
    width: 100%;
    line-height: 1.15;
    font-size: 36px;
    font-weight: 900;
}

section.payload div.payload-tiles div.tile img {
    position: absolute;
    left: -30px;
    bottom: -50px;
    width: 150px;
}

section.payload div.payload-tiles div.tile div.patchcount {
    position: absolute;
    top: 65%;
    left: 65%;
    transform: translate(-35%, -35%);
    display: block;
    font-size: 60px;
    font-weight: 900;
    color: #aaa;
    margin: 0;
    line-height: normal;
}

section.payload div.payload-tiles div.tile div.subtext {
    position: absolute;
    left: 65%;
    bottom: 12px;
    transform: translateX(-35%);
    font-size: 18px;
    color: #888;
}


/* PAYLOAD LISTING */

.dialog.payload-group {
    min-width: 328px;
    width: fit-content;
    max-width: calc(100% - 32px);
}

.dialog.payload-group div.list {
    padding-bottom: 16px;
}

div.payload-updates:not(.clone) {
    display: none;
}

div.payload-updates.clone.active {
    display: block;
}

div.payload-updates div.list h4 {
    position: sticky;
    top: 0px;
    margin: 0;
    padding: 16px;
    color: #b597d1;
    font-size: 20px;
    background-color: #111;
    z-index: 302;
}

div.payload-group div.list ul,
div.payload-updates div.list ul {
    margin-bottom: 0;
}

div.payload-updates div.list ul {
    padding-left: 0;
}

div.payload-group div.list ul li,
div.payload-updates div.list ul li {
    list-style: none;
    line-height: normal;
    font-size: 18px;
}

div.payload-updates div.list ul > li {
    padding-left: 16px;
}

div.payload-updates div.list ul + ul > li {
    margin-top: 16px;;
}

div.payload-group div.list  ul,
div.payload-updates div.list ul > li > ul {
    display: flex;
    flex-direction: column;
    padding-left: 0;
}

div.payload-updates div.list ul > li > ul {
    margin-left: -16px;
}

div.payload-group div.list ul > li,
div.payload-updates div.list ul > li > ul > li {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 0 54px 0 76px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 1px, 3px 0%, 0% 100%;
    background-position: left 76px top, left center, left 76px center;
    background-image: linear-gradient(90deg, #444, transparent), linear-gradient(#000, #000), linear-gradient(90deg, #1A1A1A, #111);
	transition: background-color .4s, background-size 0.3s;
    cursor: pointer;
}

div.payload-group div.list ul > li:last-child,
div.payload-updates div.list ul > li > ul > li:last-child {
    background-size: 100% 1px, 100% 1px, 3px 0%, 0% 100%;
    background-position: left 76px bottom, left 76px top, left center, left 76px center;
    background-image: linear-gradient(90deg, #444, transparent), linear-gradient(90deg, #444, transparent), linear-gradient(#000, #000), linear-gradient(90deg, #1A1A1A, #111);
}

div.payload-group div.list a,
div.payload-updates div.list a {
    display: inline-block;
}

div.payload-group div.list a[data-patches]::after {
    content: attr(data-patches);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    min-width: 24px;
    border-radius: 998px;
    padding: 2px 6px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: #ddd;
    background-color: #444;
}

div.payload-group div.thumbnail,
div.payload-updates div.thumbnail {
    width: 50px;
    height: 40px;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

div.payload-group div.list img,
div.payload-updates div.list img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    max-width: 50px;
    object-fit: contain;
}

.no-touch div.payload-group div.list ul > li:hover,
.no-touch div.payload-updates div.list ul > li > ul > li:hover {
    background-size: 100% 1px, 3px 100%, 100% 100%;
    background-position: left 76px top, left center, left 76px center;
    background-image: linear-gradient(90deg, #444, transparent), linear-gradient(#3a8bbb, #3a8bbb), linear-gradient(90deg, #1A1A1A, #111);
}

.no-touch div.payload-group div.list ul > li:last-child:hover,
.no-touch div.payload-updates div.list ul > li > ul > li:last-child:hover {
    background-size: 100% 1px, 100% 1px, 3px 100%, 100% 100%;
    background-position: left 76px bottom, left 76px top, left center, left 76px center;
    background-image: linear-gradient(90deg, #444, transparent), linear-gradient(90deg, #444, transparent), linear-gradient(#3a8bbb, #3a8bbb), linear-gradient(90deg, #1A1A1A, #111);
}

.no-touch div.payload-group div.list ul > li:hover a,
.no-touch div.payload-updates div.list ul > li > ul > li:hover a {
    color: #3a8bbb;
}
/* ------------------------------------- */


/* URANIA */

/* URANIA SPACEFLIGHT SECTION */

section.virtual-spaceflight article.flex p span.label {
    min-width: 130px;
    max-width: 130px;
}

section.virtual-spaceflight header {
    margin-top: 16px;
    font-size: 18px;
    color: #ddd;
    background-image: linear-gradient(to right, #555, transparent);
    background-position: left center;
    background-size: 100% 1px;
    background-repeat: no-repeat
}

section.virtual-spaceflight .time-display span.years::after {
    content: 'y';
}

section.virtual-spaceflight .time-display span.months::after {
    content: 'm';
}

section.virtual-spaceflight .time-display span.days::after {
    content: 'd';
}

section.virtual-spaceflight .time-display span.hours::after {
    content: 'h';
}

section.virtual-spaceflight .time-display span.minutes::after {
    content: 'm';
}

section.virtual-spaceflight .time-display span.seconds::after {
    content: 's';
}

section.virtual-spaceflight .time-display span.total-hours::after {
    content: ' hours';
}

/* SPACECRAFT PROGRESS */

section.virtual-spaceflight div.progress {
    position: relative;
    height: 80vh;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.4);
    overflow: hidden;
}

section.virtual-spaceflight div.progress div.object {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

section.virtual-spaceflight div.progress div.object.track {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top 10px;
    background-size: 1px calc(100% - 18px);
    background-image: linear-gradient(#666, #aaa);
}

section.virtual-spaceflight div.progress div.object.sun {
    top: -70px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image:  radial-gradient(circle, rgba(177,87,7,1) 0%, rgba(219,150,11,1) 45%, rgba(254,255,0,1) 67%, rgba(254,255,0,0.5) 94%);
    box-shadow: 0 0 12px 1px rgb(254,255,0);
}

section.virtual-spaceflight div.progress div.object.heliopause {
    top: -100px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 0 10px 6px rgba(224,128,60,0.7);
}

section.virtual-spaceflight div.progress div.object.oort-cloud {
    top: -101vh;
    width: 206vh;
    height: 206vh;
    border-radius: 50%;
    background-size: contain;
    background-image:radial-gradient(circle, rgba(91,181,41,0) 0%, rgba(41,181,168,0.3) 44%, rgba(125,10,100,0.7) 54%, rgba(125,10,100,0.7) 100%), radial-gradient(circle, rgba(41,181,168,0) 18%, rgba(41,181,168,0.7) 54%, rgba(125,10,100,0.7) 100%);
}

section.virtual-spaceflight div.progress div.object.proxima-centauri {
    bottom: 6px;
    left: calc(50% + 0.5px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-image: radial-gradient(circle at top left, #fff, #333);
}

section.virtual-spaceflight div.progress div.proxima-centauri::after {
    position: absolute;
    bottom: 8px;
    left: calc(100% + 8px);
    content: attr(data-label);
    color: #ddd;
    line-height: normal;
}

section.virtual-spaceflight div.progress div.urania {
    position: absolute;
    left: calc(50% + 0.5px);
    top: 0;
    transform: translateX(-50%);
    width: 15px;
    height: 25px;
    background-image: url("../icon/urania.svg");
    background-repeat: no-repeat;
}

section.virtual-spaceflight div.progress div.urania::after {
    position: absolute;
    left: calc(100% + 10px);
    content: attr(data-progress);
    color: #ddd;
}

section.virtual-spaceflight div.progress div.urania::before {
    position: absolute;
    left: -56px;
    content: "Urania";
    color: #ddd;
}

#MissionAccomplished {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    font-size: 24px;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    border-radius: 20px;
    line-height: normal;
}

#MissionAccomplished.active {
    display: block;
}

section.virtual-spaceflight div.progress div.urania.landed {
    background-image: url("../icon/urania-landed.svg");
}

section.virtual-spaceflight div.progress div.urania.landed::before {
    content: "Urania";
    top: -1px;
}

section.virtual-spaceflight div.progress div.urania.landed::after {
    display: none;
}

section.virtual-spaceflight div.progress div.label {
    position: absolute;
    left: 8px;
    color: #ddd;
}

section.virtual-spaceflight div.progress div.label.oort-cloud {
    top: 40%;
}

section.virtual-spaceflight div.progress div.label.heliosphere {
    left: 0;
    width: 100%;
    padding-left: 8px;
    background-repeat: no-repeat;
    background-size: calc(50% - 156px) 1px;
    background-image: linear-gradient(#bbb, #bbb);
    background-position: left 120px center;
}

section.virtual-spaceflight div.progress div.label.voyager1 {
    top: 10px;
    left: 0;
    width: 100%;
    padding-left: calc(50% + 80px);
    background-repeat: no-repeat;
    background-size: 70px 1px;
    background-image: linear-gradient(#bbb, #bbb);
    background-position: left calc(50% + 35px) top 12px;
}

section.virtual-spaceflight div.progress div.label.voyager1::before {
    position: absolute;
    top: 10px;
    left: calc(50% - 2px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ddd;
    content: '';
}

section.virtual-spaceflight div.progress div.label.alpha-centauri {
    bottom: 10%;
    max-width: 20%;
    line-height: normal;
}
/* ------------------------------------- */



/* MISSION PLAN */

section.mission-plan header {
    margin-top: 16px;
    font-size: 18px;
    color: #ddd;
    background-image: linear-gradient(to right, #555, transparent);
    background-position: left center;
    background-size: 100% 1px;
    background-repeat: no-repeat
}

section.mission-plan li {
    position: relative;
    list-style: circle;
    margin-left: 2px;
}

section.mission-plan li.check,
section.mission-plan li.mod {
    list-style: none;
}

section.mission-plan li.check::before,
section.mission-plan li.mod::before {
    content: '';
    position: absolute;
    top: 4px;
    left: -21px;
    height: 14px;
    width: 14px;
    background-color: black;
    background-repeat: no-repeat;
}

section.mission-plan li.check::before {
    background-image: url(../acf/img/check-circle-green.svg);
}

section.mission-plan li.mod::before {
    background-image: url("../acf/img/icon-modified.svg");
}

section.mission-plan header {
    background-position: left 50px center;
}

section.mission-plan article > ul {
    padding-left: 70px;
}

section.mission-plan p.view-next {
    margin-top: 0;
    padding-left: 50px;
}
/* ------------------------------------- */



/* DATA TABLE  */

table.data {
    width: 100%;
}

table.data tr {
    border-bottom: 1px solid #444;
}

table.data tbody tr:first-child {
    border-color: transparent;
}

table.data tr > th {
    background-color: rgba(255,255,255,0.1);
    text-shadow: none;
    font-weight: 400;
    vertical-align: bottom;
}

table.data tr > th,
table.data tr > td:first-child {
    color: #ddd;
}

table.mission-types tr > th:nth-child(1),
table.mission-types tr > td:nth-child(1),
table.mission-types tr > th:nth-child(2),
table.mission-types tr > td:nth-child(2) {
    text-align: center;
}

table.mission-types tr > th:nth-child(1) {
    width: 30px;
}

table.call-signs tr > th:nth-child(1),
table.mission-types tr > th:nth-child(2) {
    width: 90px;
}

table.call-signs tr > th,
table.mission-types tr > th:nth-child(3) {
    text-align: left;
}

table.call-signs tr > td:nth-child(2) {
    padding-right: 12px;
}
/* ------------------------------------- */



/* ORBIT SPINNER */

.orb {
    position: relative;
}

.orb::before {
    content: "Loading";
    position: absolute;
    top: calc(50% - 10px);
    left: 50%;
    width: 100%;
    transform: translate(-50%, calc(-50% - 5px));
    color: black;
    text-shadow: none;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    z-index: 21;
}

.orb::after {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    left: 50%;
    border-radius: 50%;
    width: calc(100vw - 75vw);
    max-width: 200px;
    height: calc(100vw - 75vw);
    max-height: 200px;
    background-image: radial-gradient(at top left, rgba(97, 75, 110, 1) 0%, rgba(201, 145, 234, 1) 56%, rgb(31 22 36) 100%);
    box-shadow: 0 3px 26px rgba(122, 184, 194, .7);
    z-index: 20;
    animation: rotation 3s linear infinite;
}

.zoomable.orb::after {
    width: 100px;
    max-width: 100px;
    height: 100px;
    max-height: 100px;
}

@keyframes rotation {
  from {
            transform: translate(-50%, calc(-50% - 5px)) rotate(0deg);
  }
  to {
            transform: translate(-50%, calc(-50% - 5px)) rotate(359deg);
  }
}

/* ------------------------------------- */



/* MEDIA QUERIES */

@media screen and (min-width: 360px) {
    section.virtual-spaceflight div.progress div.proxima-centauri::after {
        width: max-content;
    }
}

@media screen and (min-width: 460px) {
    /* figue hero */
    figure.hero figcaption {
        font-size: 14px;
    }
    
    /* inset image & caption */
    img.inset {
        float: left;
        margin: 16px 40px 16px 0;
        width: 50%;
    }
    
    img.inset.shape {
        shape-margin: 40px;
    }

    img.inset.right {
        float: right;
        margin-left: 40px;
        margin-right: 0;
    }
    
    img.inset + span.caption {
        float: left;
        clear: left;
        margin: 0 40px 1em 0;
        width: 50%;
        text-align: center;
    }

    img.inset.right + span.caption {
        float: right;
        clear: right;
        margin: 0 0 1em 40px;
    }

    img.inset.maxw15,
    img.inset.maxw15 + span.caption {
        width: 15%;
    }
    
    img.inset.maxw20,
    img.inset.maxw20 + span.caption {
        width: 20%;
    }
    
    img.inset.maxw30,
    img.inset.maxw30 + span.caption {
        width: 30%;
    }

    img.inset.maxw35,
    img.inset.maxw35 + span.caption {
        width: 35%;
    }

    img.inset.maxw40,
    img.inset.maxw40 + span.caption {
        width: 40%;
    }
    
    img.inset.maxw45,
    img.inset.maxw45 + span.caption {
        width: 45%;
    }
    
    img.inset.maxw50,
    img.inset.maxw50 + span.caption {
        width: 50%;
    }
    
    img.inset.maxw60,
    img.inset.maxw60 + span.caption {
        width: 60%;
    }
    
    span.caption {
        font-size: 14px;
    }
        
    /* zoomable buttons */
    p.zoomable span.acf-nav-button.right.zoomable {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
    }
}

@media screen and (min-width: 480px) {
    ul.mission {
        column-count: 2;
        column-gap: 20px;
    }
    
    /* timeline UI */
    div.timeline div.segment div.node::before,
    div.timeline div.segment div.node::after {
        content: " ";
        display: table;
    } 

    div.timeline div.segment div.node::after {
        clear: both;
    } 
    
    div.timeline div.segment div.node div.patch {
        float: left;
        margin-top: 8px;
        margin-right: 20px;
        width: 130px;
        text-align: center;
    }
    
    div.timeline div.segment div.node div.patch img {
        width: auto;
        max-width: 130px;
        max-height: 100px;
    }
}

@media screen and (min-width: 494px) {
    section.payload div.payload-tiles div.tile img {
        left: -70px;
    }
    
    section.payload div.payload-tiles div.tile div.patchcount {
        top: auto;
        left: auto;
        bottom: 16px;
        right: 8px;
        transform: none;
    }

    section.payload div.payload-tiles div.tile div.subtext {
        left: auto;
        bottom: 3px;
        right: 8px;
        transform: none;
    }
}

@media screen and (min-width: 560px) {
    section.payload div.payload-accounting {
        flex-direction: row;
    }
    
    section.payload div.payload-accounting > div.total {
        row-gap: 24px;
    }
}

@media screen and (min-width: 600px) {
    /* patch layout */
    article.image {
        flex-direction: row;
    }

    article.image > div:first-child {
        min-width: 40%;
        max-width: 40%;
    }

    article.image {
        gap: 40px;
    }

    section.payload div.payload-tiles div.tile img {
        left: -30px;
    }
    
    section.payload div.payload-tiles div.tile div.patchcount {
        top: 65%;
        left: 65%;
        bottom: auto;
        right: auto;
        transform: translate(-35%, -35%);
    }

    section.payload div.payload-tiles div.tile div.subtext {
        left: 65%;
        bottom: 12px;
        right: auto;
        transform: translateX(-35%);
    }

}
    
@media screen and (min-width: 640px) {
    div.timeline div.patch + div {
        margin-left: 150px;
    }
    
    div.timeline div.patch + div::before,
   div.timeline div.patch + div::after {
        content: " ";
        display: table;
    } 

    div.timeline div.patch + div::after {
        clear: both;
    }
}

@media screen and (min-width: 680px) {
    ul.crew-list ul {
        display: inline;
    }
    
    ul.crew-list ul > li {
        display: inline;
        white-space: nowrap;
        padding-left: 0;
    }
    
    ul.crew-list ul > li + li::before {
        display: inline-block;
        content: "\2022";
        margin: 0 5px 0 2px;
        color: #aaa;
    }
    
    div.timeline div.segment div.node p small {
        display: inline-block;
        padding-left: 6px;
    }
    
    div.main-container div.cols-2,
    div.main-container main.acf footer {
        column-count: 2;
        column-gap: 32px;
    }
    
    div.main-container main.acf footer.no-columns {
        column-count: 1;
    }
}

@media screen and (min-width: 714px) {
    section.payload div.payload-tiles div.tile img {
        left: -70px;
    }
    
    section.payload div.payload-tiles div.tile div.patchcount {
        top: auto;
        left: auto;
        bottom: 16px;
        right: 8px;
        transform: none;
    }

    section.payload div.payload-tiles div.tile div.subtext {
        left: auto;
        bottom: 3px;
        right: 8px;
        transform: none;
    }
}

@media screen and (min-width: 740px) {
    div.console {
        display: flex;
        column-gap: 40px;
        margin: 40px 0;
    }
    
    div.console > div {
        flex: 50%;
        max-width: 50%;
    }
    
    div.console > div > section {
        margin: 0;
    }

    div.console > div > section + section {
        margin-top: 40px;
    }
}

@media screen and (min-width: 760px) {
    section.payload div.payload-accounting > div.total {
        row-gap: 2px;
    }
    
    section.payload div.payload-accounting > div > div {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        column-gap: 20px;
        margin: 0 16px;
    }
    
    section.payload div.payload-accounting div.patchcount {
        margin-bottom: 0;
    }

    section.payload div.payload-accounting div.unit {
        width: 100px;
        text-align: left;
    }
    
    section.payload div.payload-accounting div.date {
        text-align: left;
    }
    
    /* urania virtual spaceflight */
    section.virtual-spaceflight article.status {
        display: flex;
        flex-direction: row;
        column-gap: 20px;
        margin-top: 16px;
    }
    
    section.virtual-spaceflight article.status > div {
        flex: 1 1 50%;
    }
    
    .apollo-collage {
        width: 20% !important;
    }
}

@media screen and (min-width: 860px) {
    section.payload div.payload-tiles div.tile img {
        left: -30px;
    }
    
    .apollo-collage {
        width: 14% !important;
    }
}

@media screen and (min-width: 934px) {
    section.payload div.payload-tiles div.tile img {
        left: -70px;
    }
}