@font-face {
  font-family: "Coranto";
  src: url("assets/fonts/Coranto2-Regular.woff2") format("woff2"), url("/shared/fonts/Coranto2-Regular.woff2") format("woff2"), url("/shared/fonts/Coranto2-Regular.woff") format("woff");
}
@font-face {
  font-family: "Coranto";
  font-weight: bold;
  src: url("assets/fonts/Coranto2-Bold.woff2") format("woff2"), url("/shared/fonts/Coranto2-Bold.woff2") format("woff2"), url("/shared/fonts/Coranto2-Bold.woff") format("woff");
}
html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: #fef7ea;
  font-size: 12pt;
  font-family: Coranto, serif;
}
article {
  max-width: 774px;
  padding: 1em;
  margin: 3.5em auto;
}
h1 {
  font-size: 3.5em;
}
h3 {
  font-size: 1.4em;
  margin-top: 5em;
}
p {
  font-size: 13pt;
  line-height: 1.5;
}
summary p {
  font-size: 15pt;
  line-height: 1.6;
}
span.savings {
  padding: 0.05em 0.2em;
  background: #7fcbc3;
}
span.expenditures {
  padding: 0.05em 0.2em;
  background: #f9b3a6;
}
.proposal h6 {
  font-size: 1em;
  font-family: Roboto, sans-serif;
  font-weight: normal;
  margin: 0.25em 0;
  text-align: center;
}
.proposal .proposal-choices {
  margin: 2em 10%;
}
.proposal p.proposal-choice {
  font-size: 0.9em;
  display: block;
  padding: 0.5em 0.7em 0.3em 0.7em;
  border-left: 4px solid #ccc;
  cursor: pointer;
  color: #555;
}
.proposal p.proposal-choice.acceptance.selected {
  border-color: #009f9d;
  background: #e4eee2;
}
.proposal p.proposal-choice.rejection.selected {
  border-color: #f56f62;
  background: #fde9dc;
}
.proposal p.proposal-choice.selected {
  color: #000;
}
figcaption {
  font-size: 1.2em;
  font-family: Roboto, sans-serif;
  font-weight: bold;
  text-align: center;
  margin: 1em 0 1.5em 0;
}
figure {
  padding: 2em 15%;
  margin: 5em 0;
  background: #fff;
}
@media (max-width: 600px) {
  figure {
    padding: 2em 0;
  }
  .proposal {
    margin: 1em 0;
  }
}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-family: Roboto, sans-serif;
  font-size: 0.9em;
}
table th,
table td {
  padding: 0.5em;
}
table th {
  text-align: left;
}
table tr.budget-header {
  margin-top: 0.5em;
}
table tr td {
  color: #999;
}
table tr.selected td {
  color: #000;
  color: #009f9d;
}
table tr.selected td.budget-amount {
  font-weight: bold;
  color: #009f9d;
}
table .budget-amount {
  text-align: right;
  min-width: 100px;
}
table thead th {
  text-transform: uppercase;
}
.progress {
  font-family: Roboto, sans-serif;
  font-weight: bold;
  font-size: 1em;
  height: 1em;
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 42px;
  z-index: 1000;
}
.progress span.label {
  width: 15%;
  text-overflow: clip;
  height: 100%;
  height: 1em;
  display: inline-block;
  vertical-align: top;
  text-shadow: #fef7ea 0 0 2px;
}
.progress span.label.left {
  text-align: right;
}
.progress span.label.right {
  text-align: left;
}
.progress svg {
  height: 1.2em;
  width: 85%;
}
.progress svg rect {
  stroke: #fef7ea;
  stroke-width: 5px;
  stroke-location: outside;
  rx: 10;
  ry: 10;
}
.progress svg rect.background {
  fill: #e4eee2;
}
.progress svg rect.foreground {
  fill: #009f9d;
}
@media (max-width: 700px) {
  .progress svg {
    width: 72.5%;
  }
  .progress span.label {
    width: 27.5%;
  }
}
p.credits {
  text-align: center;
  margin: 5% 15%;
  font-size: 0.9em;
  font-family: Roboto, sans-serif;
  color: #cec2ab;
}
p.credits span {
  text-transform: uppercase;
  font-weight: bold;
  color: #bdad8e;
}
a {
  color: #000;
}
a:visited {
  color: #000;
}
a:hover {
  color: #000;
}
/* Navigation */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  height: 38px;
  background-color: #741518;
  border-bottom: 1px solid #59554e;
  z-index: 1000;
}
nav > * {
  display: table-cell;
}
nav .fa-bars {
  display: none;
  cursor: pointer;
}
.sitebrand {
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  border-bottom-width: 0;

}
.sitebrand a{
  display: block;
  height: 38px;
}
.sitebrand p {
  margin: 0;
  line-height: 38px;
}
.sitebrand.tijd {
  width: 109px;
  height: 38px;
  background-image: url("assets/images/nav/DeTijdLogoMini.png");
  background-position-y: 9px;
}
.sitebrand.echo {
  width: 97px;
  height: 38px;
  background-image: url("assets/images/nav/LechoLogoMini.png");
  background-position-y: 7px;
}
.sitebrand p {
  line-height: 38px;
}
.sharing {
  position: absolute;
  top: 0;
  right: 8px;
  height: 100%;
}
.sharing img {
  height: 25px;
  margin: 6px 0 7px;
}