body {
    overflow-x: hidden;
}

a {
    color: #CD00CD;
}

a:hover {
    color: #FF0FFF;
}

#header {
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#header a {
    line-height: 1;
}

section.step {
    display: none;
}

section.step.active {
    display: initial;
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
    background-color: #CD00CD;
    border-color: #8D278D;
}

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
    background-color: #FF0FFF;
    border-color: #CD00CD;
}

ul.socialaccount_providers {
    list-style-type: none;
}

ul.socialaccount_providers li {
    display: inline-block;
}

#event-list {
    font-size: smaller;
}

#event-list th {
    padding-top: 0;
}

.notice,
.message
{
    color: #505;
    background-color: #FEEFB3;
    padding: .25em 0;
    text-align: center;
    font-weight: bold;
    margin-bottom: 1rem;
    border-radius: .5rem;
}

.message {
    color: white;
    background-color: #609ab6;
}

#footer {
    background-color: black;
    padding: 1rem 0 1rem 0;
    color: white;
}

#footer a {
    color: #f5def7;
    margin-right: 0.5rem;
}

#logo {
    pointer-events: none;
}

#volunteer-event-list {
    list-style-type: none;
}

.hero {
    margin-bottom: 1rem;
    padding-top: 2rem;
}

#season-hero {
    color: white;
    text-shadow: rgb(3, 3, 3) 2px 3px 4px;
    background-image: url("bg.136b8b890aa5.jpg");
}

#season-hero a {
    text-shadow: none;
}

.nav-trigger {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  position: fixed;
  right: 15px;
  top: 10px;
  z-index: 2;

  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
  background-size: contain;
}

ul.navigation {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  list-style: none;
  background: #111;
}

ul.navigation li {
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

ul.navigation a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

ul.navigation a:hover {
  color: #f5def7;
}

.site-wrap {
  min-height: 100%;
  min-width: 100%;
  background-color: white;
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
}

.site-wrap {
  transition: left 0.2s;
}
.nav-trigger + label {
  transition: right 0.2s;
}

.nav-trigger:checked + label {
  right: 215px;
}

.nav-trigger:checked ~ .site-wrap {
  left: -200px;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}

#region-title {
    font-size: 120%;
}