.center { /* Minerva skin doesn't provide this */
text-align: center;
}
.darkvector-banner-image {
max-width: 100%;
height: 100%;
object-fit: contain;
margin-top: 1vh;
}
.darkvector-subtitle {
text-align: center;
}
.darkvector-header {
display: flex;
flex-direction:row;
flex-wrap: wrap;
text-align:center; /* noflex */
padding: 5px;
margin-bottom:1em;
}
.darkvector-header + .darkvector-header {
margin-top: -2em;
}
.darkvector-header > .darkvector-tab {
display:inline-block; /* noflex */
flex:1 1 0;
align-self: flex-end;
vertical-align:bottom; /* noflex */
text-align:center;
font-size:larger;
margin: 5px;
}
.darkvector-tab > .orange-marker {
visibility: hidden;
background-color: #f8f9fa;
height: 0.8em;
}
.darkvector-tab.selected > .orange-marker {
visibility: visible;
}
@media (max-width:550px) {
.darkvector-header {
flex-direction:column;
padding:0;
margin-top: 0!important; /* cancels out the sibling styling */
}
.darkvector-header > .darkvector-tab {
width: 100%;
margin:0;
}
/* At smaller sizes we make the hr the orange marker */
.darkvector-tab > .orange-marker {
display:none;
}
.darkvector-tab > p {
margin:0 2vw 0 2vw;
}
.darkvector-tab.selected > hr {
background-color: #f8f9fa;
height: 5px;
}
}
@media (min-width:551px) {
.darkvector-subtitle {
font-size:155%;
}
}