/* SVG */
svg {
  padding: 1.5rem 0;
  vertical-align: top;
}
@keyframes enterIn {
  0% {
    transform: translateY(-100%);
    will-change: transform;
  }
  100% {
    transform: translateY(0);
    will-change: transform;
  }
}
svg .cycle-in-1 {
  animation: 0.5s linear 0s 1 enterIn;
}
svg .cycle-in-2 {
  animation: 0.75s linear 0s 1 enterIn;
}
svg .cycle-in-3 {
  animation: 1s linear 0s 1 enterIn;
}
svg .cycle-in-4 {
  animation: 1.25s linear 0s 1 enterIn;
}
svg .cycle-in-5 {
  animation: 1.5s linear 0s 1 enterIn;
}
svg .cycle-in-6 {
  animation: 1.75s linear 0s 1 enterIn;
}
@keyframes enterUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
svg .cycle-up-text {
  animation-duration: 1s;
  animation-name: enterUp;
}
.h1a,
.h1b,
.h1c {
  fill: #187fe7;
}
.h1a {
  font-size: 5em;
  font-weight: bold;
}
.h1b {
  font-size: 5em;
}
.h1c {
  font-size: 5em;
}
@media (min-width: 300px) {
  * {
    box-sizing: border-box;
    vertical-align: baseline;
  }
  a,
  a:visited {
    color: #187fe7;
    text-decoration: none;
  }
  a:active,
  a:hover {
    outline: 0;
  }
  article,
  header,
  main {
    display: block;
    margin: 0 auto;
    text-align: left;
  }
  body {
    color: #000;
    font: 1.125rem/1.5 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    margin: 0;
    min-width: 300px;
    text-align: center;
    text-rendering: optimizeLegibility;
  }
  footer {
    padding: 0 1.5rem 1.5rem;
  }
  h1,
  h2,
  h3,
  h4 {
    text-align: center;
  }
  h1 {
    line-height: 1.125;
    padding: 0 1.5rem;
  }
  h2 {
    border-bottom: 2px solid #187fe7;
    font-size: 1.5em;
    line-height: 1.125;
    margin: 0 0 1.5rem;
    padding: 0 0 0.75rem;
  }
  h3 {
    color: #A040C0;
    font-size: 1.125em;
    line-height: 1.125;
    margin: 0 0 1.5rem;
  }
  h2 + h3 {
    margin-top: 2rem;
  }
  p + h3 {
    margin-top: 1.5rem;
  }
  header {
    background: #187fe7;
  }
  header > div {
    margin: 0 0.5rem;
    padding: 0.5rem 0;
  }
  html {
    background: #F4F2F0;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  img {
    border: 0;
    border-style: none;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  li + li {
    margin-top: 1.5rem;
  }
  .bullets li {
    margin-top: 0;
  }
  main {
    margin-bottom: 1.5rem;
  }
  nav {
    position: relative;
  }
  p,
  ul {
    hyphens: auto;
    margin: 0;
  }
  p + p,
  ul + p,
  .img-group + p {
    margin-top: 1.5rem;
  }
  ul {
    padding: 0 0 0 1.5rem;
  }
  [class^="coll-"],
  [class*=" coll-"] {
    float: none;
    width: 100%;
  }
  .address {
    color: #808080;
  }
  .b-butt-group {
    margin: 1.5rem 0 0;
    text-align: center;
  }
  .b-button-2 {
    margin-top: 1.5rem;
  }
  .bullets {
    margin: 0.75rem 0 0 0.75rem;
  }
  .button-text {
    background: #187fe7;
    color: #E4F2FC;
    display: block;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
  }
  .button-text-add {
    background: #E4F2FC;
    border-bottom: 2px solid;
    border-radius: 16px;
    display: inline-block;
    font-weight: bold;
    margin-top: -3rem;
    padding: 0.75rem 1.5rem;
  }
  .button-text-more {
    background: #E4F2FC;
    display: block;
    font-style: italic;
    padding: 0.75rem 1.5rem;
  }
  .donate-button {
    background: #00AF00;
    border: ;
    border-radius: 16px;
    color: #f8f4e8;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    margin: 1.5rem auto 0;
    overflow: hidden;
    padding: 0.75rem 1.5rem;
  }
  .donate-button:visited {
    color: #f8f4e8;
  }
  .card {
    background: #FFF;
    border-bottom: 2px solid #C0C0C0;
    border-radius: 0 0 16px 16px;
    border-top: 2px solid #C0C0C0;
    margin-top: 1.5rem;
    padding: 1.5rem;
  }
  .card-add {
    border-radius: 16px;
    border-top: none;
    margin-top: 0.5rem;
  }
  .card-how {
    background: #FFF;
    border: 2px solid #A040C0;
    border-radius: 0;
    border-width: 2px 0;
    color: #A040C0;
    margin-bottom: 1.5rem;
    margin-top: 0;
  }
  .clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .emoji {
    border-right: 1px solid;
    display: inline-block;
    margin-right: 0.5rem;
    padding-right: 0.5rem;
  }
  .h-button {
    background: #E4F2FC;
    border-radius: 8px;
    display: block;
    float: right;
    font-size: 1.125rem;
    padding: 0.25rem 0.75rem;
  }
  .img-group {
    margin: 0.5rem auto 0;
    text-align: center;
  }
  .img-group + .img-group {
    margin-top: 0;
  }
  .inset {
    background: #f8f4e8;
    border-radius: 0 0 16px 16px;
    border-top: 2px solid #d0c0b0;
    color: #000;
    margin-top: 1.5rem;
    padding: 1.5rem;
    text-align: center;
  }
  .minor {
    color: #808080;
    font-size: 1rem;
  }
  .photo-credit {
    font-size: 1rem;
    margin: 1.5rem;
    text-align: center;
  }
  .svg-cont {
    display: none;
  }
  .title {
    float: left;
  }
  .video {
    display: block;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    width: 100%;
  }
  .video-container {
    height: 0;
    margin: 0.5rem auto;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    text-align: center;
  }
  .video-container:last-child {
    margin-bottom: 0;
  }
/* !!!! */
  #idk {
    margin-top: 0;
  }
  #site-title {
    color: #187fe7;
  }
/* form */
  form {
    border: 2px solid #C0C0C0;
    border-width: 2px 0;
    padding: 1.5rem 0.75rem;
  }
  input,
  label,
  textarea {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    display: block;
    font: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  input {
    padding: 0.75rem 1rem;
  }
  input[type=submit] {
    background: #E4F2FC;
    border: 2px solid;
    border-radius: 16px;
    color: #187fe7;
    cursor: pointer;
    font-weight: bold;
    margin: 1.5rem auto 0;
    overflow: hidden;
    padding: 0.75rem 1.5rem;
    text-align: center;
    width: auto;
  }
  label {
    border-top: 1px solid #C0C0C0;
    color: #A040C0;
    margin: 1.5rem 0 0 ;
    padding: 1.5rem 1rem 0.75rem;
  }
  label:first-of-type {
    border: none;
    margin-top: 0;
    padding-top: 0;
  }
  textarea {
    overflow: auto;
    padding: 0.75rem 1rem;
  }
  .form-feedback {
    background: #A040C0;
    color: #FFF;
    font-style: italic;
    margin: 0 1.5rem 1.5rem;
    text-align: center;
  }
/* menu */
  #menu {
    max-height: 0;
    overflow: auto;
  }
  #menu.active {
    max-height: 256rem;
    position: absolute;
    width: 100%;
    z-index: 2;
  }
  #menu li > a {
    border-top: 1px solid #187fe7;
    display: block;
    padding: 0.75rem;
    width: 100%;
  }
  #menu li:first-of-type > a {
    border: none;
  }
  #menu ul > ul > li > a {
    border-top-style: dashed;
    padding-left: 0;
  }
  #menu li + li {
    margin-top: 0;
  }
  #menu ul > ul > li {
    color: #187fe7;
    margin-left: 1.5rem;
  }
  #menu ul {
    background: #E4F2FC;
    border-bottom: 2px solid #187fe7;
    border-radius: 0 0 8px 8px;
    list-style: none;
    margin: 0 auto;
    padding: 0 0.75rem;
    width: 100%;
  }
  #menu ul > ul {
    border: none;
    border-radius: 0;
    border-top: 1px dashed #187fe7;
    list-style-type: disc;
    padding-right: 0;
  }
}
@media (min-width: 500px) {
  body {
    font-size: 1.25rem;
  }
  h4 {
      border-width: 2px;
  }
  header > div {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  nav {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .b-butt-group {
    margin: 1.5rem 1.5rem 0;
  }
  .button-image-1 {
    border-radius: 0 0 0 16px;
  }
  .button-image-2 {
    border-radius: 0 0  16px 0;
  }
  .button-text {
    border-radius: 16px 16px 0 0;
  }
  .card {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .card-add {
    margin-top: 1.5rem;
  }
  .coll-1-2 {
    float: left;
    width: 50%;
  }
  /*.coll-1-2-lag {
    float: none;
    width: 100%;
  }*/
  .coll-1-2-text {
    padding-right: 0.75rem;
  }
  .coll-1-2-text-rule {
    border-right: 1px solid #C0C0C0;
    padding-right: 1.5rem;
  }
  .coll-2-2 {
    float: left;
    width: 50%;
  }
  /*.coll-2-2-lag {
    float: none;
    width: 100%;
  }*/
  .coll-2-2-text {
    padding-left: 0.75rem;
  }
  .coll-2-2-text-rule {  
    padding-left: 1.5rem;
  }
  .coll-1-3 {
    float: left;
    width: 33.33333%;
  }
  .coll-2-3 {
    float: left;
    width: 66.66667%;
  }
  .img-group {
    margin-top: 1.5rem;
  }
  .photo-credit {
    margin: 1.5rem 1.5rem 0;
  }
  .video-container {
    margin: 1.5rem auto;
  }
/* form */
  form {
    border-width: 2px;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding: 1.5rem;
  }
}
@media (min-width: 800px) {
  body {
    font-size: 1.5rem;
  }
  p,
  ul {
    hyphens: auto;
    margin: 0;
  }
  .card {
    padding: 3rem;
  }
  .coll-1-2-lag {
    float: left;
    width: 50%;
  }
  .coll-2-2-lag {
    float: left;
    width: 50%;
  }
  .img-single {
    width: 600px;
  }
  .svg-cont {
    display: block;
    padding: 0 1.5rem;
  }
  .video-container {
    max-width: ;
  }
  #site-title {
    display: none;
    height: 0;
  }
/* SVG */
  .h1a {
    font-size: 4em;
  }
  .h1b {
    font-size: 4em;
  }
  .h1c {
    font-size: 4em;
  }
}
@media (min-width: 1100px) {
  header > div {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  main,
  nav {
    max-width: 1200px;
  }
  nav {
    margin: 0 auto;
  }
  .b-butt-group {
    margin: 1.5rem 1.5rem 0;
  }
/* Menu */
  #menu.active {
    padding: 0 1.5rem;