:root {
font-size: 16px;
}
body {
font-family: 'Source Sans Pro', sans-serif;
margin: 0 auto;
padding-bottom: 20px; /* Prevent overlay on the bottom of the iframe */
max-width: 660px;
color: #1a1a1a;
}
h1 {
font-size: 48px;
line-height: 50px;
font-weight: 700;
margin-top: 1.5em;
}
h2 {
font-size: 36px;
line-height: 40px;
font-weight: 700;
margin-top: 1em;
}
h3 {
font-size: 28px;
line-height: 32px;
font-weight: 700;
margin-top: 1em;
}
a {
color: #1a1a1a;
text-decoration: underline;
}
p {
line-height: 1.75;
font-size: 1.1rem;
margin: 1em 0 3em 0;
}
ul, ol {
line-height: 1.5;
font-size: 1.1rem;
margin: 1em 0 3em 0;
}
li {
margin: 0.25em;
padding: 0;
}
.lead p {
font-size: 20px;
font-weight: 600;
}
.quote {
position: relative;
}
.quote p::before {
content: "«";
color: #4dd898;
font-size: 3em;
position: absolute;
top: -0.6em;
left: 0;
font-style: normal;
}
.quote p::after {
content: "»";
color: #4dd898;
font-size: 3em;
position: absolute;
bottom: -0.5em;
left: 0;
font-style: normal;
}
.quote p {
font-size: 24px;
font-style: italic;
line-height: 32px;
padding-left: 1em;
margin: 3em 0;
}
.info-box {
margin-top: 3em;
margin-bottom: 3em;
padding: 1em 0;
border-top: #4dd898 2px solid;
border-bottom: #4dd898 2px solid;
border-left: none;
border-right: none;
background-color: inherit;
}
.info-box ul li::marker {
color: #4dd898;
}
.info-box li p {
color: black;
margin: 1em 0;
}
.doi-box {
border: none;
padding: 0;
margin: 0;
}
.button {
margin-top: 2em;
margin-bottom: 1em;
border: #1a1a1a 1px solid;
padding: 0.75em 1em;
text-decoration: none;
}
.button-blue {
margin-top: 2em;
margin-bottom: 1em;
color: white;
background-color: #4159AC;
padding: 0.75em 1em;
text-decoration: none;
}
.button-secondary {
margin-top: 2em;
margin-bottom: 1em;
border: #4159AC 1px solid;
color: #4159AC;
padding: 0.75em 1em;
text-decoration: none;
}
.download-button {
margin-top: 2em;
margin-bottom: 1em;
border: #1a1a1a 1px solid;
padding: 0.75em 1em 0.75em 2.5em;
text-decoration: none;
background: url('data:image/svg+xml;utf8,') no-repeat left center;
}
.download-button-blue {
margin-top: 2em;
margin-bottom: 1em;
padding: 0.75em 1em 0.75em 2.5em;
text-decoration: none;
background: url('data:image/svg+xml;utf8,') no-repeat left center;
background-color: #4159AC;
color: white;
}
.download-button-secondary {
margin-top: 2em;
margin-bottom: 1em;
border: #4159ac 1px solid;
padding: 0.75em 1em 0.75em 2.5em;
text-decoration: none;
background: url('data:image/svg+xml;utf8,') no-repeat left center;
color: #4159AC;
}
@media screen and (max-width: 768px) {
.hide-mobile {
display: none;
}
body {
margin: 0 20px;
}
h1 {
font-size: 36px;
line-height: 40px;
}
h2 {
font-size: 32px;
line-height: 36px;
font-weight: 700;
margin-top: 1em;
}
h3 {
font-size: 28px;
line-height: 32px;
font-weight: 700;
margin-top: 1em;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.hide-tablet {
display: none;
}
}
@media screen and (min-width: 1024px) {
.hide-desktop {
display: none;
}
}
.plot-title {
font-weight:bold;
margin-bottom: 15px;
}
.caption p {
text-align:left;
font-size:0.7rem;
color:#4e4d47;
line-height:1.25;
}