:root {
  --red: #d0112a;
  --yellow: #fcda46;
  --orange: #ed7d21;
  --grey: #41414a;
  --grey-light: #eee;

  --sans: 'Helvetica Neue', helvetica, arial, sans-serif;
  --serif: serif;
}

* {
  margin: 0;
}

body {
  background: #EEEEEE;
  font-family: var(--sans);
  line-height: 1.35;
  font-size: 14pt;
}

body>* {
  width: auto;
  padding: 0 .5em;
  overflow-y: auto;
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
svg,
.block,
ul {
  /*  margin-left:  1.5rem;
  margin-right: 1.5rem;*/
}

h1,
h2,
h3 {
  font-family: var(--sans);
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: .4em;
  /*  padding-left: 1.5rem;
  text-indent: -1.5rem;*/
}

h3 {}

.subtitle {
  text-transform: none;
  margin-top: -.5rem;
}

h1 {
  font-size: 2em;
}

h1.subtitle {
  font-size: 1.75em;
}

h2 {
  font-size: 1.5em;
  margin-top: 3em;
  /* margin-bottom: .3rem; */
}

h2.subtitle {
  font-size: .9em;
  color: var(--grey);
}

p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.block p,
.block h3 {
  margin-left: 0;
  margin-right: 0;
}

img {
  display: block;
  width: 100%;
  /*width: calc(100% + 1em);
  transform: translateX(-.5em);*/
}

img.cover {
  /* margin-left: 0;
  width: 92vw;
  position: relative;
  top: -20vw;
  margin-bottom: -10vw; */
}

.block {
  width: 100%;
  width: calc(100% + 1em);
  transform: translateX(-.5em);
}

.block img {
  width: 100%;
}

.block.space {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.nobreak {
  white-space: nowrap;
}

ul {
  position: relative;
  list-style: none;
  padding-left: 1.8em;
}

ul li:before {
  content: "–";
  position: absolute;
  left: .7em;
}

ul li {
  margin-bottom: .3em;
}

#header {
  padding-bottom: 2rem;
  background-color: #FFFFFF;
  /* background-image: url('assets/logo.svg');
  background-repeat: no-repeat;
  background-size: 256px;
  background-position: 2rem 0;
  padding-top: 10rem; */
}

.clear {
  clear: both;
}

#main {
  background: #FFFFFF;
  padding-bottom: 3rem;
}

#footer {
  background-color: #555555;
  padding: 1rem 0 1rem;
  /* background-image: url(corner.svg); */
  color: #FFFFFF;
}

.right {
  text-align: right;
}

.wide {
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 0 8px #CCCCCC;
}

.corner {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDE0IDIwIiBoZWlnaHQ9IjI1IiB3aWR0aD0iMTgiPjxwYXRoIHN0eWxlPSJmaWxsOiNmZmZmZmY7c3Ryb2tlOm5vbmUiIGQ9Ik0wLDAgMCwyMCAxNCwwIHoiIC8+PC9zdmc+Cg==);
  background-position: 4rem 0;
  background-repeat: no-repeat;
}

p.indent {
  padding-left: 1rem;
}

p.note {
  font-size: .8em;
  font-style: italic;
}

p.quote {
  min-height: 3.5rem;
  padding: 1.4rem;
  text-align: center;
}

.quote.big {
  font-style: italic;
  font-size: 1.2em;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: var(--orange);
}

.btn {
  /* font-size: 1em;
  line-height: inherit;
  border: none; */

  line-height: 1.5em;
  display: inline-block;
  padding: .2em .8em;
  height: 1.7rem;
  vertical-align: middle;
  background-color: #fff;
  color: var(--red);
  font-family: var(--sans);
  font-weight: bold;
  /* border-radius: .2rem; */
  margin: .2rem .3rem;

  transform: skew(-8deg);
  border: 2px solid var(--red);
  transition: 0.3s background-color;
}

.btn.date {
  padding: .2em;
  width: 1.5em;
  text-align: center;
  margin-bottom: .55em;
}

.btn.taken {
  background-color: var(--grey-light);
  color: var(--grey);
  border-color: var(--grey-light);
}

/* input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus */
.btn.chosen {
  background-color: var(--red);
  color: #fff;
}

.choice {
  margin: .2rem .3rem;
  color: inherit;
}

a.choice::before {
  content: "\00a0";
  display: inline-block;
  margin-right: .5em;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  background-color: var(--grey-light);
  color: var(--grey);
  border: 1px solid var(--grey);
}

a.choice.chosen::before {
  content: "✓";
  background-color: var(--red);
  color: #FFFFFF;
  border-color: transparent;
}

a.block {
  display: block;
  background-size: cover;
}

form {
  /* position: relative; */
  display: block;
  /* border: 1px solid var(--grey); */
  box-shadow: 0 0 8px rgba(0, 0, 0, .2);
  padding: 1rem;
  margin-top: 2rem;
}

/* form p {
  padding-right: 2rem;
} */
input {
  /* box-sizing: border-box; */
  display: inline-block;
  vertical-align: middle;
  font-size: inherit;
  height: 1.8rem;
  padding: .2rem .8rem;
  background-color: var(--grey-light);
  border: none;
  color: inherit;
  font-family: inherit;
  /* border-radius: .2rem; */
  margin: .2rem 0;
  margin-bottom: .4rem;
  width: 90%;
}

input+.btn {
  margin-left: 0;
}

.background {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

.emoji {
  font-style: normal !important;
}

.hidden,
.toggle {
  display: none;
}

.hidden.reveal,
.toggle.reveal {
  display: block;
}

.toggler {
  cursor: pointer;
}

.toggler:before {
  content: "› ";
}

iframe {
  border: none;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  height: 60vmin;
}

#footer p,
#footer h3,
#footer a {
  color: #FFFFFF;
}

#footer a:hover {
  text-decoration: underline;
}

#barometer {
  position: relative;
  height: 2.5rem;
}

#barometer span {
  position: absolute;
}

@media (min-width: 500px) {
  h1 {
    font-size: 2.7rem;
  }
}

@media (min-width: 620px) {
  .wide {
    margin-top: 2rem;
  }

  h1,
  h2,
  h3,
  p,
  svg,
  .block {
    /*margin-left:  2rem;
    margin-right: 2rem;*/
  }

  .background {
    width: 100%;
  }
}

/*
@media (min-width: 1450px) {
  main {
    background-image: url(background.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}
*/
@media (hover: hover) {
  a.choice:hover::before {
    content: "✓";
    background-color: var(--red);
    color: #FFFFFF;
    border-color: transparent;
  }

  .btn:hover,
  .btn.chosen {
    background-color: var(--red);
    color: #fff;
    border-color: var(--red);
  }

  .toggler:hover {
    color: var(--pink);
  }
}

/*
.sans {
  font-family: Calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight: bold;
}
.serif {
  font-family: Palatino,Georgia,'Droid Serif',serif;
  font-weight: normal;
}
.green {
  color: #D3D80A;
}
.pink {color: #E8335E;}
.pink-fill {background-color: #E8335E; color: #FFFFFF;}
.grey-fill {background-color: #888888; color: #FFFFFF;}
.petrol {
  color: #005667;
}
.bg {
  background-color: #EEEEEE;
}
.white {
  background-color: #FFFFFF;
}
.h {
  margin: 1.5em 0 .3em;
}


.huge {
  font-size: 30pt;
  margin-bottom: 0;
}
.big {
  font-size: 26pt;
  margin-top: .5em;
}
h2 {
  font-size: 1.4em;
}
h3 {
  font-size: 1.2em;
}
h4 {
  font-size: 16pt;
}
p {
  margin-top: .1em;
  margin-bottom: .8em;
}
.link {
  color: #777777;
}
.btn {
  padding: .4em 1em;
  text-decoration: none;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 1em;
}
.image {
  width: 100%;
  margin-top: 1em;
}
.caption {
  text-align: right;
}

li {
  margin-bottom: .3em;
}
.small {
  color: #666666;
  font-size: 11pt;
}

.main {
  width: 540px;
}
table {
  border-collapse: collapse;
}
.border-h {
  height: 20px;
}
.space {
  margin-bottom: 40px;
}
.border-b {
  height: 2px;
  background-color: #DDDDDD;
}
.border-lr {
  width: 10px;
}
.pink-line {
  height: 6px;
  background: #E8335E;
}
.text {
  padding: 20px;
  line-height: 1.5em;
  font-size: 14pt;
}
.logo {
  padding: 0 20px 20px;
}
.cover {
  padding: 0;
}
.center {
  text-align: center;
}


.first {
  padding-top: .7em;
}
.bullet-current {
  color: #f00;
}
.bullet-other {
}
*/



header {
  background-color: var(--red);
  color: #fff;
}

header img.cover {
  max-width: 1024px;
  margin: 0 auto;
}

.content {
  max-width: 650px;
  margin: 0 auto;
  overflow-x: visible;
}

#logo {
  display: inline-block;
  height: 3em;
  width: auto;
  margin: 0 auto;
  padding: 1em 1em 0em;
}

img#happy {}

.red-tile {
  display: block;
  margin: 1em auto;
  max-width: 300px;
  background-color: var(--red);
  transform: skew(-8deg);
  padding-top: 2em;
}

.red-tile img {
  transform: skew(8deg);
}

main {
  background-color: #fff;
  padding-bottom: 3em;
}

main h1 {
  margin-top: 2em;
  margin-bottom: .5em;
}

.box {
  background-color: var(--yellow);
  color: #000;
  font-weight: bold;
  padding: .3em .8em;
  display: inline-block;
}

.box+h1 {
  margin-top: .25em;
}

footer {
  background-color: var(--yellow);
  padding: 2em .5em;
}

.cover {
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

img.deco {}

#ethiopia {
  width: 10em;
  max-width: 30vw;
  float: right;
}

#quote {
  width: 4em;
  max-width: 20vw;
  float: left;
  margin-bottom: -.5em;
  margin-top: -.5em;
}

#puzzle {
  width: 10em;
  max-width: 50vw;
  float: right;
  margin-top: 2.5em;
}