@font-face {
  font-family: "Azuro";
  src: url("../typeface/azuro-regular.woff") format("woff");
}
@font-face {
  font-family: "Azuro";
  src: url("../typeface/azuro-bold.woff") format("woff");
  font-weight: bold;
}
@font-face {
  font-family: "Azuro";
  src: url("../typeface/azuro-italic.woff") format("woff");
  font-style: italic;
}
@font-face {
  font-family: "Azuro";
  src: url("../typeface/azuro-bolditalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
/*
10px baseline no nonsense root em values
0.1rem = 1px / 1rem = 10px / 10rem = 100px
*/
html,
body {
  font-size: 10px;
  font-family: Azuro, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.2;
  color: #2d2d2d;
}

div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input, button, textarea, select,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-size: 1.6rem;
}

h1 {
  font-size: 4.5rem;
}

h2 {
  font-size: 4rem;
}

h3 {
  font-size: 3.5rem;
}

h4 {
  font-size: 3rem;
}

h5 {
  font-size: 2.5rem;
}

h6 {
  font-size: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  text-shadow: 0.1rem 0.1rem 0.1rem rgba(177, 177, 177, 0.5);
  letter-spacing: -0.05rem;
}

label,
legend {
  font-weight: bold;
}

label,
legend,
input,
select,
textarea,
output {
  font-size: 1.8rem;
}

legend {
  font-size: 2rem;
}

input[type=datetime-local],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input,
select,
textarea,
output,
input.toggle:empty + label.toggle,
.radio-list li label {
  font-family: Courier, monospace;
}

[data-icon]:before {
  content: attr(data-icon);
  font-smoothing: antialiased;
  margin-left: 1rem;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.off-screen {
  text-indent: -9999%;
  display: block;
  position: absolute;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}
.flex-row .col {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}

@media screen and (min-width: 650px) {
  .flex-row .col {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
  }
}
.responsive-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  display: block;
  margin-bottom: 3rem;
}
.responsive-table thead,
.responsive-table tbody,
.responsive-table th,
.responsive-table tr,
.responsive-table td {
  display: block;
}
.responsive-table thead tr {
  display: none;
}
.responsive-table tbody tr th[scope=row] {
  padding: 1rem;
}
.responsive-table tbody tr td {
  padding: 3.5rem 1rem 1rem;
  position: relative;
  vertical-align: top;
}
.responsive-table tbody tr td:before {
  content: attr(data-label);
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 0;
  padding: 1rem;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}
@media screen and (min-width: 480px) {
  .responsive-table tbody tr td {
    padding: 1rem 1rem 1rem 34%;
  }
  .responsive-table tbody tr td:before {
    max-width: 30%;
    font-weight: bold;
  }
}
@media screen and (min-width: 768px) {
  .responsive-table {
    display: table;
  }
  .responsive-table thead {
    display: table-header-group;
  }
  .responsive-table thead tr {
    display: table-row;
  }
  .responsive-table thead tr th {
    display: table-cell;
    padding: 1rem;
  }
  .responsive-table tbody {
    display: table-row-group;
  }
  .responsive-table tbody tr {
    display: table-row;
  }
  .responsive-table tbody tr th[scope=row] {
    display: table-cell;
  }
  .responsive-table tbody tr td {
    display: table-cell;
    padding: 1rem;
  }
  .responsive-table tbody tr td:before {
    content: "";
  }
}
html, body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#Main-Content-Wrapper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 4rem 10% 0;
}

.colspan-1,
.colspan-2,
.colspan-3,
.colspan-4,
.colspan-5,
.colspan-6,
.colspan-7,
.colspan-8,
.colspan-9,
.colspan-10 {
  width: 100%;
}

.before-colspan-1,
.before-colspan-2,
.before-colspan-3,
.before-colspan-4,
.before-colspan-5,
.before-colspan-6,
.before-colspan-7,
.before-colspan-8,
.before-colspan-9,
.after-colspan-1,
.after-colspan-2,
.after-colspan-3,
.after-colspan-4,
.after-colspan-5,
.after-colspan-6,
.after-colspan-7,
.after-colspan-8,
.after-colspan-9 {
  margin: 0.5rem;
}

@media screen and (min-width: 650px) {
  .flex-row .colspan-1 {
    max-width: 10%;
  }
  .flex-row .colspan-2 {
    max-width: 20%;
  }
  .flex-row .colspan-3 {
    max-width: 30%;
  }
  .flex-row .colspan-4 {
    max-width: 40%;
  }
  .flex-row .colspan-5 {
    max-width: 50%;
  }
  .flex-row .colspan-6 {
    max-width: 60%;
  }
  .flex-row .colspan-7 {
    max-width: 70%;
  }
  .flex-row .colspan-8 {
    max-width: 80%;
  }
  .flex-row .colspan-9 {
    max-width: 90%;
  }
  .flex-row .colspan-10 {
    max-width: 100%;
  }
  .flex-row .before-colspan-1 {
    margin-left: 10%;
  }
  .flex-row .before-colspan-2 {
    margin-left: 20%;
  }
  .flex-row .before-colspan-3 {
    margin-left: 30%;
  }
  .flex-row .before-colspan-4 {
    margin-left: 40%;
  }
  .flex-row .before-colspan-5 {
    margin-left: 50%;
  }
  .flex-row .before-colspan-6 {
    margin-left: 60%;
  }
  .flex-row .before-colspan-7 {
    margin-left: 70%;
  }
  .flex-row .before-colspan-8 {
    margin-left: 80%;
  }
  .flex-row .before-colspan-9 {
    margin-left: 90%;
  }
  .flex-row .after-colspan-1 {
    margin-right: 10%;
  }
  .flex-row .after-colspan-2 {
    margin-right: 20%;
  }
  .flex-row .after-colspan-3 {
    margin-right: 30%;
  }
  .flex-row .after-colspan-4 {
    margin-right: 40%;
  }
  .flex-row .after-colspan-5 {
    margin-right: 50%;
  }
  .flex-row .after-colspan-6 {
    margin-right: 60%;
  }
  .flex-row .after-colspan-7 {
    margin-right: 70%;
  }
  .flex-row .after-colspan-8 {
    margin-right: 80%;
  }
  .flex-row .after-colspan-9 {
    margin-right: 90%;
  }
}
form {
  max-width: 80rem;
  margin: 0 auto;
}

label,
input,
select,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}

input,
select,
textarea {
  border: 0.1rem solid #888888;
  background-color: white;
}

label {
  display: block;
  text-align: left;
  color: #333333;
  margin: 0 0 0.6rem 0;
  text-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
}

fieldset {
  border: 0.1rem solid #aaaaaa;
  margin: 0;
  padding: 0 2rem;
  border-radius: 0.5rem;
  background-color: #c1c1c1;
  margin-bottom: 3rem;
}
fieldset legend {
  text-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
  color: #333333;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

[type=search] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  right: 1rem;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 0.5rem;
  background: green;
  background-image: url("../img/ui/close-x.svg");
  background-size: contain;
  cursor: pointer;
}

[type=radio] {
  -webkit-appearance: radio;
     -moz-appearance: radio;
          appearance: radio;
  -webkit-box-shadow: none;
          box-shadow: none;
}
[type=radio]:focus {
  border-radius: 100%;
}

input[type=date],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url] {
  width: 100%;
  border-radius: 0.5rem;
  padding: 0 1rem;
}

input[type=date],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
textarea,
select,
fieldset {
  margin-bottom: 2rem;
}

textarea {
  border-radius: 0.5rem;
  resize: none;
}

textarea,
select {
  width: 100%;
  padding: 1rem;
  margin-bottom: 3rem;
}

select:not([multiple]) {
  height: 3.5rem;
  border-radius: 0.5rem;
  padding: 0 1rem;
  background-image: linear-gradient(45deg, transparent 50%, #333333 50%), linear-gradient(135deg, #333333 50%, transparent 50%), linear-gradient(#cccccc, #aaaaaa);
  background-position: calc(100% - 1.6rem), calc(100% - 0.8rem), 100% 0;
  background-size: 0.8rem 0.8rem, 0.8rem 0.8rem, 3.5rem 3.5rem;
  background-repeat: no-repeat;
}
select:not([multiple]):hover {
  cursor: pointer;
}
select:not([multiple])[disabled] {
  background-image: linear-gradient(45deg, transparent 50%, #888888 50%), linear-gradient(135deg, #888888 50%, transparent 50%), linear-gradient(#888888, #888888);
}

input[type=date],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
select:not([multiple]) {
  height: 3.5rem;
}

.input-description {
  margin: -2.6rem 1rem 2rem 1rem;
  color: #555555;
  margin-top: -1.6rem;
  margin-bottom: 1rem;
}

/* form element attributes */
.required:after {
  content: "*";
  color: #c63c4c;
  margin-left: 0.5rem;
}

[disabled] {
  color: #eeeeee;
  background-color: #888888;
  border: 0.1rem solid #888888;
  -webkit-box-shadow: none;
          box-shadow: none;
}

[disabled]::-webkit-datetime-edit {
  color: #333333;
}

[readonly] {
  border: 0.1rem dotted #bbbbbb;
  -webkit-box-shadow: none;
          box-shadow: none;
}

:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}

::-webkit-input-placeholder {
  color: #888888;
}

::-ms-input-placeholder {
  color: #888888;
}

::placeholder {
  color: #888888;
}

.interacted:invalid, .interacted:out-of-range {
  border: 0.1rem solid red;
  background-color: red;
  -webkit-animation-name: required;
          animation-name: required;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.interacted:valid {
  border: 0.1rem solid green;
  background-color: green;
  color: green;
}

/* Range Slider */
input[type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 1rem 0 3rem 0;
  width: 80%;
  border: 0.1rem solid transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}
input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1.4rem;
  cursor: pointer;
  -webkit-box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
          box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
  background: #cccccc;
  border-radius: 2.5rem;
  border: 0 solid black;
}
input[type=range]::-webkit-slider-thumb {
  border: 0.1rem solid #cccccc;
  height: 2.4rem;
  width: 6rem;
  border-radius: 1.5rem;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #444444;
          box-shadow: 0.1rem 0.1rem 0.1rem #444444;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.6rem;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1.4rem;
  cursor: pointer;
  box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
  background: #cccccc;
  border-radius: 2.5rem;
  border: 0 solid black;
}
input[type=range]::-moz-range-thumb {
  border: 0.1rem solid #cccccc;
  height: 2.4rem;
  width: 6rem;
  border-radius: 1.5rem;
  box-shadow: 0.1rem 0.1rem 0.1rem #444444;
  background: white;
  cursor: pointer;
  -moz-appearance: none;
  margin-top: -0.6rem;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 1.3rem;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 3.9rem 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  height: 1.4rem;
  cursor: pointer;
  box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
  background: #cccccc;
  border-radius: 2.5rem;
  border: 0 solid black;
}
input[type=range]::-ms-fill-upper {
  background: red;
  border: 0 solid red;
  border-radius: 5rem;
  box-shadow: 0 0 0 red, 0 0 0 red;
}
input[type=range]::-ms-thumb {
  border: 0.1rem solid #cccccc;
  height: 2.4rem;
  width: 6rem;
  border-radius: 1.5rem;
  box-shadow: 0.1rem 0.1rem 0.1rem #444444;
  background: white;
  cursor: pointer;
  margin-top: -0.6rem;
  cursor: pointer;
}
input[type=range]::-ms-fill-upper {
  height: 1.4rem;
  cursor: pointer;
  box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
  background: #cccccc;
  border-radius: 2.5rem;
  border: 0 solid black;
}

output {
  border: 0.1rem dashed #999999;
  padding: 0.5rem;
  vertical-align: top;
  margin: 0.2rem 1rem;
  display: inline-block;
  border-radius: 0.5rem;
}

input[type=submit]:hover {
  cursor: pointer;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}
input[type=submit]:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}

input[type=file] {
  background-color: white;
  color: #444444;
  border: 1px solid #888888;
  width: 100%;
  border-radius: 0.5rem;
  margin: 0 0 3rem 0;
  min-height: 3.5rem;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
          box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
  padding: 0.5rem;
}
input[type=file]:hover {
  cursor: pointer;
}
input[type=file]:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}

.cke_chrome {
  margin-bottom: 2rem !important;
  border: 0.1rem solid #888888 !important;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
          box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
  border-radius: 0.5rem;
  -webkit-transition: -webkit-box-shadow 0.2s ease-in-out !important;
  transition: -webkit-box-shadow 0.2s ease-in-out !important;
  transition: box-shadow 0.2s ease-in-out !important;
  transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out !important;
}
.cke_chrome.cke_focus {
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}
.cke_chrome.invalid {
  border: 0.1rem solid red !important;
}
.cke_chrome.invalid .cke_top {
  background: red;
  -webkit-animation-name: required;
          animation-name: required;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.cke_chrome.valid {
  border: 0.1rem solid green !important;
}
.cke_chrome.valid .cke_top {
  background: green;
}
.cke_chrome .cke_inner.cke_reset {
  border-radius: 0.5rem;
}
.cke_chrome .cke_top {
  border-radius: 0.5rem 0.5rem 0 0;
}
.cke_chrome .cke_bottom {
  border-radius: 0 0 0.5rem 0.5rem;
}

@-webkit-keyframes required {
  0% {
    background-color: red;
  }
  25% {
    background-color: white;
  }
  50% {
    background-color: red;
  }
  75% {
    background-color: white;
  }
  100% {
    background-color: red;
  }
}

@keyframes required {
  0% {
    background-color: red;
  }
  25% {
    background-color: white;
  }
  50% {
    background-color: red;
  }
  75% {
    background-color: white;
  }
  100% {
    background-color: red;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes loader {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
.radio-list {
  list-style: none;
  margin: 3em 0;
  padding: 0;
}
.radio-list li {
  position: relative;
  display: block;
}
.radio-list li:first-child label {
  border-radius: 0.5rem 0.5rem 0 0;
}
.radio-list li:first-child label:after {
  border-radius: 0.5rem 0.5rem 0 0;
}
.radio-list li:last-child label {
  border-radius: 0 0 0.5rem 0.5rem;
  border-bottom: 0.1rem solid #888888;
}
.radio-list li:last-child label:after {
  border-radius: 0 0 0.5rem 0.5rem;
}
.radio-list li label {
  background-color: white;
  padding: 1rem 2rem;
  cursor: pointer;
  margin: auto;
  font-size: 1.6rem;
  font-weight: normal;
  text-shadow: none;
  border: 0.1rem solid #888888;
  border-bottom: none;
  white-space: normal;
}
.radio-list li input[type=radio] {
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: transparent;
}
.radio-list li input[type=radio]:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.radio-list li input[type=radio]:checked + label {
  background-color: green;
  color: white;
  -webkit-box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
          box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
  text-shadow: 0.1rem 0.1rem 0.1rem #444444;
}
.radio-list li input[type=radio]:checked:focus + label:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
  z-index: 1;
  top: 0;
  left: 0;
}

@media screen and (min-width: 650px) {
  .radio-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .radio-list li {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
  }
  .radio-list li:first-child {
    border-left: none;
  }
  .radio-list li:first-child label {
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .radio-list li:first-child label:after {
    border-radius: 0.5rem 0 0 0.5rem;
  }
  .radio-list li:last-child label {
    border-radius: 0 0.5rem 0.5rem 0;
    border-right: 0.1rem solid #888888;
  }
  .radio-list li:last-child label:after {
    border-radius: 0 0.5rem 0.5rem 0;
  }
  .radio-list li label {
    border: 0.1rem solid #888888;
    border-right: none;
    height: 100%;
  }
}
@-webkit-keyframes required-checkbox {
  0% {
    background-color: red;
  }
  25% {
    background-color: #cccccc;
  }
  50% {
    background-color: red;
  }
  75% {
    background-color: #cccccc;
  }
  100% {
    background-color: red;
  }
}
@keyframes required-checkbox {
  0% {
    background-color: red;
  }
  25% {
    background-color: #cccccc;
  }
  50% {
    background-color: red;
  }
  75% {
    background-color: #cccccc;
  }
  100% {
    background-color: red;
  }
}
input.toggle:empty {
  opacity: 0;
  position: absolute;
  padding: 0;
  margin: 0;
}
input.toggle:empty + label.toggle {
  position: relative;
  padding: 0.25rem 0 0.25rem 7rem;
  line-height: 1.5;
  font-size: 1.6rem;
  font-weight: normal;
  margin: 0 0 3rem 0;
  cursor: pointer;
  display: inline-block;
  white-space: normal;
  min-height: 3rem;
}
input.toggle:empty + label.toggle span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
input.toggle:empty + label.toggle:before, input.toggle:empty + label.toggle:after {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: " ";
  background: #cccccc;
  border-radius: 2rem;
  -webkit-box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
          box-shadow: inset 0.1rem 0.1rem 0.1rem #444444;
  -webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}
input.toggle:empty + label.toggle:before {
  width: 6rem;
  height: 3rem;
}
input.toggle:empty + label.toggle:after {
  width: 3rem;
  height: 2.6rem;
  top: 0.2rem;
  margin-left: 0.2rem;
  background: white;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #444444;
          box-shadow: 0.1rem 0.1rem 0.1rem #444444;
  border: 0.2rem solid #cccccc;
}
input.toggle:empty:focus + label.toggle:before {
  -webkit-box-shadow: inset 0.1rem 0.1rem 0.1rem #444444, 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: inset 0.1rem 0.1rem 0.1rem #444444, 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
}
input.toggle:empty:checked + label.toggle:before {
  background: green;
}
input.toggle:empty:checked + label.toggle:after {
  margin-left: 2.8rem;
}
input.toggle:empty[disabled]:checked + label.toggle:after {
  border-color: green;
}
input.toggle:empty[disabled] + label.toggle {
  cursor: default;
  color: #aaaaaa;
}
input.toggle:empty[disabled] + label.toggle:before {
  -webkit-box-shadow: none;
          box-shadow: none;
}
input.toggle:empty[disabled] + label.toggle:after {
  -webkit-box-shadow: none;
          box-shadow: none;
}
input.toggle:empty.interacted:invalid + label.toggle:before {
  background-color: red;
  -webkit-animation-name: required-checkbox;
          animation-name: required-checkbox;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
input.toggle:empty[required]:invalid + label.toggle:after {
  border-color: red;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checklist li:first-child input.toggle:empty {
  opacity: 0;
  position: absolute;
  padding: 0;
  margin: 0;
}
.checklist li:first-child input.toggle:empty + label.toggle {
  margin-top: 3rem;
}

input[type=submit] {
  border: 1px solid #ed9b45;
  background-color: #febc35;
  color: #825942;
  height: 3.5rem;
  border-radius: 0.5rem;
  font-family: Courier, monospace;
  font-size: 1.8rem;
  padding: 0 1.8rem;
  -webkit-box-shadow: 0.3rem 0.3rem 0.3rem #dddddd;
          box-shadow: 0.3rem 0.3rem 0.3rem #dddddd;
  display: block;
  margin: 0 auto 3rem;
  -webkit-transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}
input[type=submit]:hover {
  cursor: pointer;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
          box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
  border: 1px solid #febc35;
  background-color: #ed9b45;
  color: #fefefe;
}
input[type=submit]:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
  border: 1px solid #aaaaaa;
  background-color: #c63c4c;
}
input[type=submit].active {
  font-size: 0;
  border-radius: 3.5rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #d2efdf;
  border-right-color: #4abf7e;
  border-width: 0.3rem;
  padding: 0 1.5rem;
  -webkit-animation: loader 1s linear 0.3s infinite;
          animation: loader 1s linear 0.3s infinite;
}
input[type=submit].active:disabled {
  cursor: default;
}
input[type=submit].active:disabled:hover {
  border-color: #d2efdf;
  border-right-color: #4abf7e;
}

audio {
  width: 100%;
}

input[type=submit] {
  border: 1px solid #ed9b45;
  background-color: #febc35;
  color: #825942;
  height: 3.5rem;
  border-radius: 0.5rem;
  font-family: Courier, monospace;
  font-size: 1.8rem;
  padding: 0 1.8rem;
  -webkit-box-shadow: 0.3rem 0.3rem 0.3rem #dddddd;
          box-shadow: 0.3rem 0.3rem 0.3rem #dddddd;
  display: block;
  margin: 0 auto 3rem;
  -webkit-transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, font-size 0.3s ease-in-out, border 0.3s ease-in-out, box-shadow 0.3s ease-in-out, color 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}
input[type=submit]:hover {
  cursor: pointer;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
          box-shadow: 0.1rem 0.1rem 0.1rem #dddddd;
  border: 1px solid #febc35;
  background-color: #ed9b45;
  color: #fefefe;
}
input[type=submit]:focus {
  outline: none;
  -webkit-box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
          box-shadow: 0 0 0.4rem 0.3rem rgba(82, 171, 255, 0.75);
  border: 1px solid #aaaaaa;
  background-color: #c63c4c;
}
input[type=submit].active {
  font-size: 0;
  border-radius: 3.5rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #d2efdf;
  border-right-color: #4abf7e;
  border-width: 0.3rem;
  padding: 0 1.5rem;
  -webkit-animation: loader 1s linear 0.3s infinite;
          animation: loader 1s linear 0.3s infinite;
}
input[type=submit].active:disabled {
  cursor: default;
}
input[type=submit].active:disabled:hover {
  border-color: #d2efdf;
  border-right-color: #4abf7e;
}

#Browser-List {
  text-align: center;
  margin: 3rem;
  padding: 0;
}
#Browser-List li {
  display: inline-block;
}
#Browser-List li a {
  display: block;
  width: 12.5rem;
  height: 13.5rem;
  background-image: url("../img/browser-logos.png");
  background-size: 50rem;
  text-indent: -999rem;
}
#Browser-List li a.chrome {
  background-position: 0 0;
}
#Browser-List li a.edge {
  background-position: 12.5rem 0;
}
#Browser-List li a.firefox {
  background-position: 37.5rem 0;
}
#Browser-List li a.safari {
  background-position: 25rem 0;
}

html,
body {
  background-color: #fefefe;
  line-height: 1.2;
}

body.modal-open {
  overflow: hidden;
}

#Modal-Container {
  position: fixed;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #c1c1c1;
  z-index: 100;
  opacity: 0;
  -webkit-transition: top 0.3s ease-in-out, bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: top 0.3s ease-in-out, bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
#Modal-Container.open {
  top: 0;
  opacity: 1;
}
#Modal-Container #Modal-Controls {
  position: relative;
  height: 8rem;
  border-bottom: 1px dashed #dddddd;
}
#Modal-Container #Modal-Controls #Close-Modal {
  position: absolute;
  top: 2.3rem;
  right: 2.3rem;
  border: 1px solid #FBB9B9;
  background-color: #F77272;
  color: #c1c1c1;
  height: 3.5rem;
  border-radius: 0.5rem;
  margin: 0 0 2rem 0;
  font-family: Courier, monospace;
  font-size: 1.6rem;
  padding: 0 1.8rem;
  -webkit-box-shadow: 0.3rem 0.3rem 0.3rem #ddd;
          box-shadow: 0.3rem 0.3rem 0.3rem #ddd;
}
#Modal-Container #Modal-Controls #Close-Modal:hover {
  cursor: pointer;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #ddd;
          box-shadow: 0.1rem 0.1rem 0.1rem #ddd;
  border: 1px solid #F77272;
  background-color: #FBB9B9;
  color: #A8001E;
}
#Modal-Container #Modal-Content {
  padding: 1.2rem 5rem 5rem 5rem;
  height: 90%;
  overflow: auto;
  max-width: 80rem;
  margin: 0 auto;
}
#Modal-Container #Modal-Content .modal-title {
  margin: 0 0 2rem 0;
}
#Modal-Container #Modal-Content .image {
  width: 100%;
  padding: 0 0 3rem 0;
}
#Modal-Container #Modal-Content iframe {
  height: 100%;
  width: 100%;
}

#Main-Header {
  margin-bottom: 6rem;
}
#Main-Header #Site-Title .title {
  font-family: "Azuro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: calc(1rem + 10vw);
}
#Main-Header #Site-Title .subtitle {
  font-weight: normal;
  font-size: calc(1rem + 2.5vw);
}

#Main-Nav-Container {
  background-color: #c1c1c1;
  -webkit-box-shadow: 0 0.3rem 0.3rem #dddddd;
          box-shadow: 0 0.3rem 0.3rem #dddddd;
}
#Main-Nav-Container #Main-Nav-List {
  list-style: none;
  margin: 0;
  padding: 0;
}
#Main-Nav-Container #Main-Nav-List .main-nav-item {
  display: block;
  border-bottom: 1px solid #dddddd;
}
#Main-Nav-Container #Main-Nav-List .main-nav-item .main-nav-link {
  display: block;
  padding: 1.4rem;
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
}
#Main-Nav-Container #Main-Nav-List .main-nav-item .main-nav-link:hover {
  color: #c1c1c1;
  background-color: blue;
}
#Main-Nav-Container #Main-Nav-List .main-nav-item:last-child {
  border: none;
}

@media screen and (min-width: 575px) {
  #Main-Nav-Container #Main-Nav-List .main-nav-item {
    display: inline-block;
    border: none;
  }
}
#Main-Content {
  -webkit-transition: opacity 0.15s ease-in-out;
  transition: opacity 0.15s ease-in-out;
}
#Main-Content .topic {
  border-bottom: 1px dotted rgba(177, 177, 177, 0.5);
  margin-bottom: 5rem;
}

#Main-Footer {
  padding: 0.5rem 0.5rem 5.5rem;
}
#Main-Footer > .flex-row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#Main-Footer .copyright {
  text-align: center;
}
#Main-Footer .social-icons {
  text-align: center;
}
#Main-Footer .social-icons .social-icon {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 4.5rem;
  height: 4.5rem;
  margin: 2rem 1rem 3rem;
  position: relative;
}
#Main-Footer .social-icons .social-icon .social-label {
  display: block;
  position: absolute;
  font-size: 1rem;
  width: 100%;
  text-align: center;
  bottom: -16px;
  color: #2d2d2d;
}
#Main-Footer .social-icons .social-icon:hover .social-label, #Main-Footer .social-icons .social-icon:focus .social-label {
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  color: #c63c4c;
}
#Main-Footer .social-icons .social-icon:hover .social-svg .cls-1,
#Main-Footer .social-icons .social-icon:hover .social-svg .cls-2, #Main-Footer .social-icons .social-icon:focus .social-svg .cls-1,
#Main-Footer .social-icons .social-icon:focus .social-svg .cls-2 {
  -webkit-transition: fill 0.3s ease-in-out;
  transition: fill 0.3s ease-in-out;
  fill: #c63c4c;
}
#Main-Footer .author {
  text-align: center;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  95% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes wiggle {
  0% {
    -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  85% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  95% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
h1.wiggle {
  display: inline-block;
  -webkit-animation: wiggle 2.5s infinite;
          animation: wiggle 2.5s infinite;
}

h1.wiggle:hover {
  -webkit-animation: none;
          animation: none;
}

@media screen and (min-width: 768px) {
  #Main-Footer {
    padding: 2rem 5rem 6rem;
  }
}
img {
  width: 100%;
}

.topic-description {
  font-size: calc(1rem + 1.2vw);
  padding: 0 0.4rem;
  line-height: 1.4;
}
.topic-description * {
  font-size: calc(1rem + 1.2vw);
}

.topic .title {
  font-size: calc(1rem + 3.5vw);
  margin-top: 2em;
}
.topic .title:first-child {
  margin-top: 0;
}
.topic .title + .subtitle {
  margin-top: 0;
}
.topic .subtitle {
  font-size: calc(1rem + 2vw);
  font-weight: normal;
  margin-bottom: 2rem;
  margin-top: 4rem;
}
.topic .example-description {
  margin: 0 0 4rem 0;
  text-align: left;
  font-size: calc(1rem + 1vw);
}

.banners {
  text-align: center;
}
.banners .banner {
  display: inline-block;
}
.eight-bit-banner {
  width: 45%;
}

.women-in-peril-banner {
  width: 64%;
}

.secret-lives-banner {
  width: 40%;
}

.two-side-flyer {
  position: relative;
}
.two-side-flyer:hover .flyer-back {
  z-index: 1;
}
.two-side-flyer .flyer-front {
  z-index: 0;
}
.two-side-flyer .flyer-back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#Process-Flow {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  list-style: none;
  z-index: 1;
  position: relative;
}
#Process-Flow .process {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  border-radius: 2rem 2rem 0.5rem 2rem;
  color: #fefefe;
  margin: 0.7rem 0.7rem 0;
  padding: calc(1rem + 1vw);
}
#Process-Flow .process.empathise {
  background-color: #98bd3d;
}
#Process-Flow .process.determine {
  background-color: #febc35;
}
#Process-Flow .process.interpret {
  background-color: #ed9b45;
}
#Process-Flow .process.prototype {
  background-color: #c63c4c;
}
#Process-Flow .process.test {
  background-color: #825942;
}
#Process-Flow .process.repeat {
  background-color: #077cad;
}
#Process-Flow .process.repeat::after {
  content: "";
  display: block;
  width: 100%;
  background-color: rgba(7, 124, 173, 0.1);
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 2rem;
}
#Process-Flow .process:last-child {
  width: 100%;
  margin: 0.7rem 0 0;
  border-radius: 0.5rem 0.5rem 2rem 2rem;
}
#Process-Flow .process .process-title {
  font-size: calc(1rem + 1.2vw);
  text-shadow: 0.1rem 0.1rem 0.6rem rgba(130, 89, 66, 0.8);
}
#Process-Flow .process .process-description {
  font-size: calc(1rem + 0.8vw);
  margin: 1rem 0 0;
  text-shadow: 0.1rem 0.1rem 0.6rem rgba(130, 89, 66, 0.8);
}

@media screen and (min-width: 768px) {
  .topic-description {
    font-size: calc(1rem + 0.8vw);
  }
  .topic-description * {
    font-size: calc(1rem + 0.8vw);
  }

  #Process-Flow .process {
    -webkit-box-flex: 18%;
        -ms-flex: 18%;
            flex: 18%;
    border-radius: 3rem 3rem 1rem 3rem;
    margin: 0.7rem 0 0 0.7rem;
  }
  #Process-Flow .process.repeat::after {
    border-radius: 3rem;
  }
  #Process-Flow .process:nth-child(5) {
    margin-right: 0.7rem;
  }
  #Process-Flow .process:last-child {
    margin-right: 0;
    border-radius: 1rem 1rem 3rem 3rem;
  }
  #Process-Flow .process .process-title {
    font-size: calc(1rem + 1vw);
  }
  #Process-Flow .process .process-description {
    font-size: calc(1rem + 0.8vw);
  }
}