@import url('/static/styles/fonts.css');

* {
box-sizing: border-box;
font-family: 'Muli', sans-serif;
}

body {
text-align:center;
margin:0;
padding:0;
background-color: #fafafa;
background-color: #EBEBEB;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}

#header {
background: white;
display: flex;
align-items: center;
justify-content: center;
height: 58px;
}

#header .logo {
height: 48px;
width: 241px;
background: url(/static/media/logo-bow.png) center center no-repeat;
background-size: contain;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
-ms-animation: fadein 1s ease-in;
-o-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
position:relative;
}

#header .logo span {
display:none;
}

#header .logo a {
    position: absolute;
    width: 100%;
    height: 100%;
    display:block;
}
#navigation {
background-color: white;
display: flex;
justify-content: center;
height: 40px;
line-height: 30px;
}

a.navigation-item {
display:inline-block;
padding: 3px 10px;
font-weight: bold;
font-weight: 600;
-webkit-animation: fadein 1s ease-in;
-moz-animation: fadein 1s ease-in;
-ms-animation: fadein 1s ease-in;
-o-animation: fadein 1s ease-in;
animation: fadein 1s ease-in;
color: black;
text-decoration: none;
}

a.navigation-item:hover {
text-decoration: none;
}

#content-title {
background: white;
font-size: 30px;
line-height: 60px;
font-weight: 500;
color:#666;
}

#content-wrapper{
border-top:1px solid #00000000;
}

#content {
min-height: 470px;
text-align:left;
padding:0px 1em;
}

.page {
max-width: 90ex;
padding-top: 10px;
margin:0 auto;
}

#footer {
padding:10px;
font-size: 18px;
line-height: 26px;
}

#copyright {
color: #cacaca;
padding:10px;
}

.card-deck {
margin: 20px 0 0 0;
}

.card-deck > div {
background: linear-gradient(#ffffff42 90%, rgba(0,0,0,0));
}

.card-header {
margin:0;
padding: 0 5px;
line-height: 30px;
background: white;
}

.card-body {
padding: 10px;
}

.card-body :first-child {
margin-top: 0px;
}

a {
text-decoration: none;
color: #4040cc;
color: #06c;
color: #2997ff;
}

.muted {
color: #aaaa;
}

a.muted {
color: #A6A6DE;
}

a:hover{
text-decoration: underline;
}

h1 {
font-size: 2em;
font-weight: bold;
text-align: center;
margin: 20px 0 0 0;
}

h2 {
font-size: 1.2em;
font-weight: bold;
margin: 10px 0 0 0;
}

p{
    margin: 16px 0 0 0;
}

.typo-center-large {
    font-size: 19px;
    font-weight: bold;
    color: #333;
    text-align: center;
    max-width: 500px;
    margin: 20px auto 0 auto;
}

.typo-center-largest {
    font-size: 26px;
    line-height: 30px;
    margin: 20px 0 0 0;
    text-align: center;
}

.typo-center-medium {
    font-size: 17px;
    line-height: 30px;
    margin: 20px 0 0 0;
    text-align: center;
}

.article {
margin-top:1em;
}

.card {
padding: .5em;
margin-top: 1em;
background: hsla(0, 0%, 96%, 1);
background: linear-gradient(#ffffff42 70%, #ebebeb);
}

hr {
border: 0px none;
border-top: 1px solid #ccc;
margin: 60px 0px 0 0;
}

.full-width #content{
max-width: none;
margin:0;
padding:0em;
}

.grid-wrapper-2x {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}

/* blackout */

body.blackout  {
background:black;
color:white;
}

.blackout #header{
background:none;
}

.blackout #header .logo{
background:url("/static/media/logo-wob.png") center center no-repeat;
background-size: contain;
}

.blackout #navigation{
background:none;

}

.blackout a.navigation-item{
color:white
}

.blackout a.muted {
color: #cccccc;
}

.blackout #copyright {
color:#5f5f5f;
}

.blackout .card {
background: #222224;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

@-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}


.fade-1s {
-webkit-animation: fadein 1s;
-moz-animation: fadein 1s;
-ms-animation: fadein 1s;
-o-animation: fadein 1s;
animation: fadein 1s;
}
.fade-7s{
-webkit-animation: fadein 7s;
-moz-animation: fadein 7s;
-ms-animation: fadein 7s;
-o-animation: fadein 7s;
animation: fadein 7s;
}

@-webkit-keyframes pulse {
    0% { opacity: 1; }
    50% {  opacity: 0.8; }
    100% { opacity: 1; }
}


@-moz-keyframes pulse {
    0% { opacity: 1; }
    50% {  opacity: 0.8; }
    100% { opacity: 1; }
}


@-ms-keyframes pulse {
    0% { opacity: 1; }
    50% {  opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% {  opacity: 0.8; }
    100% { opacity: 1; }
}


.pulse {

    -webkit-animation: pulse 3s infinite ease-in-out;
    -moz-animation: pulse 3s infinite ease-in-out;
    -o-animation: pulse 3s infinite ease-in-out;
    animation: pulse 3s infinite ease-in-out;
}

.fade-n-pulse {
    -webkit-animation: fadein 5s ease-in;
    -moz-animation: fadein 5s ease-in;
    -o-animation: fadein 5s ease-in;
    animation: fadein 5s ease-in;

    animation-name: fadein, pulse;
    animation-delay: 1.5s, 5s;
    animation-timing-function: ease-in, ease-in-out;
    animation-duration: 4s, 5s;
    animation-iteration-count: 1, infinite;
}

@media screen and (max-width: 600px) {
    h1 {
        font-size: 1.6em;
    }

    .grid-wrapper-2x {
        grid-template-columns: 1fr;
    }
}


.article-date {
    text-align: center;
    color:#333;
    margin: 20px 0;
}