/* Sass Document */
@import url("reset.css");
@import url("https://fonts.googleapis.com/css?family=Raleway:400,600,700,900");
.red {
  color: #ff4a4a;
}

.green {
  color: #7ED321;
}

.blue {
  color: #3FBBEE;
}

.purple {
  color: #E461FF;
}

body, html {
  height: 100%;
  background-color: #2D2A3F;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
}

body > header, html > header {
  width: 100%;
  color: white;
  background: #222030;
  font-weight: 600;
  min-height: 2em;
  font-size: 1.5em;
  line-height: 2em;
  text-indent: 1.5em;
}

body > section, html > section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
}

body > section > nav, html > section > nav {
  display: flex;
  flex-direction: column;
  flex-basis: 25%;
  /*background: rgba(255,255,255,0.05);*/
  padding: 3em 0 0 2em;
}

body > section > nav > *, html > section > nav > * {
  width: 80%;
  margin: 0 auto .6em auto;
}

body > section > nav h3, html > section > nav h3 {
  color: #7ED321;
  font-weight: 600;
  text-transform: uppercase;
  margin: .5em auto;
  font-size: 1.2em;
}

body > section > nav h3:first-of-type, html > section > nav h3:first-of-type {
  margin-top: 0;
}

body > section > nav a, html > section > nav a {
  color: #3FBBEE;
  text-decoration: none;
}

body > section > nav a:hover, html > section > nav a:hover {
  color: #fff;
}

body > section > section, html > section > section {
  padding-top: 3em;
  flex-basis: 75%;
}

body > section > section .siteMessage, html > section > section .siteMessage {
  background: #7ED321;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: .9em;
  width: 80%;
  text-align: center;
  padding: .5em;
  box-sizing: border-box;
  color: #fff;
  margin: 1em 0;
  border-radius: 5px;
}

body > section > section > .module, html > section > section > .module {
  width: 80%;
  border-radius: 15px;
  background: white;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 2em;
}

body > section > section > .module header, html > section > section > .module header {
  background: #222030;
  padding: 1em;
  color: #fff;
  font-weight: 700;
  border-radius: 15px 15px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body > section > section > .module header a, html > section > section > .module header a {
  color: #3FBBEE;
  align-self: flex-end;
  font-size: 1.2em;
}

body > section > section > .module header a:hover, html > section > section > .module header a:hover {
  color: #fff;
}

body > section > section > .module header form, html > section > section > .module header form {
  margin: 0;
  display: inline;
  padding: 0;
}

body > section > section > .module header form select, html > section > section > .module header form select {
  border-radius: 5px;
  background: #2D2A3F;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  padding: .1em;
  font-size: 1.2em;
  border: none;
  outline: none;
  outline-style: none;
  margin-right: 2em;
}

body > section > section > .module section, body > section > section > .module form, html > section > section > .module section, html > section > section > .module form {
  padding: .5em 1em 1em 1em;
  display: flex;
  flex-direction: column;
}

body > section > section > .module section.list > div, html > section > section > .module section.list > div {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: .3em 0;
  padding: .5em 0;
  font-weight: 600;
}

body > section > section > .module section.list > div span, html > section > section > .module section.list > div span {
  text-align: center;
  flex-grow: 1;
}

body > section > section > .module section.list > div span:first-of-type, html > section > section > .module section.list > div span:first-of-type {
  text-align: left;
  text-indent: .5em;
}

body > section > section > .module section.list > div span:last-of-type, html > section > section > .module section.list > div span:last-of-type {
  flex-basis: 20%;
  flex-grow: 0;
}

body > section > section > .module section.list > div span a, html > section > section > .module section.list > div span a {
  color: #000;
  text-decoration: none;
}

body > section > section > .module section.list > div span a:hover, html > section > section > .module section.list > div span a:hover {
  color: #3FBBEE;
}

body > section > section > .module section.list > div span a.bad:hover, html > section > section > .module section.list > div span a.bad:hover {
  color: #ff4a4a;
}

body > section > section > .module section.list > div:nth-child(odd), html > section > section > .module section.list > div:nth-child(odd) {
  background: rgba(63, 187, 238, 0.05);
}

body > section > section > .module section.list > div.head, html > section > section > .module section.list > div.head {
  background: #fff;
}

body > section > section > .module section.list > div.head span, html > section > section > .module section.list > div.head span {
  font-weight: 900;
}

body > section > section > .module section.list > div:not(.head):hover, html > section > section > .module section.list > div:not(.head):hover {
  background: rgba(63, 187, 238, 0.2);
}

body > section > section > .module section.list > div.inactive span, html > section > section > .module section.list > div.inactive span {
  color: #A6A6A6;
  font-style: italic;
}

body > section > section > .module form label, body > section > section > .module form .row, html > section > section > .module form label, html > section > section > .module form .row {
  display: flex;
  flex-direction: column;
  margin: .3em 0;
  padding: .5em 0;
  font-weight: 700;
  font-size: 1em;
}

body > section > section > .module form label section, body > section > section > .module form .row section, html > section > section > .module form label section, html > section > section > .module form .row section {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin: 0;
  padding-bottom: 0;
}

body > section > section > .module form label input, body > section > section > .module form label textarea, body > section > section > .module form label select, body > section > section > .module form .row input, body > section > section > .module form .row textarea, body > section > section > .module form .row select, html > section > section > .module form label input, html > section > section > .module form label textarea, html > section > section > .module form label select, html > section > section > .module form .row input, html > section > section > .module form .row textarea, html > section > section > .module form .row select {
  border-radius: 5px;
  background: #2D2A3F;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  padding: .6em;
  font-size: 1.2em;
  border: none;
  outline: none;
  outline-style: none;
  margin-top: .5em;
}

body > section > section > .module form label input[type="radio"], body > section > section > .module form label input[type="checkbox"], body > section > section > .module form label textarea[type="radio"], body > section > section > .module form label textarea[type="checkbox"], body > section > section > .module form label select[type="radio"], body > section > section > .module form label select[type="checkbox"], body > section > section > .module form .row input[type="radio"], body > section > section > .module form .row input[type="checkbox"], body > section > section > .module form .row textarea[type="radio"], body > section > section > .module form .row textarea[type="checkbox"], body > section > section > .module form .row select[type="radio"], body > section > section > .module form .row select[type="checkbox"], html > section > section > .module form label input[type="radio"], html > section > section > .module form label input[type="checkbox"], html > section > section > .module form label textarea[type="radio"], html > section > section > .module form label textarea[type="checkbox"], html > section > section > .module form label select[type="radio"], html > section > section > .module form label select[type="checkbox"], html > section > section > .module form .row input[type="radio"], html > section > section > .module form .row input[type="checkbox"], html > section > section > .module form .row textarea[type="radio"], html > section > section > .module form .row textarea[type="checkbox"], html > section > section > .module form .row select[type="radio"], html > section > section > .module form .row select[type="checkbox"] {
  border: none;
  margin: 0 .5em;
}

body > section > section > .module form label input[type="radio"]:first-of-type, body > section > section > .module form label input[type="checkbox"]:first-of-type, body > section > section > .module form label textarea[type="radio"]:first-of-type, body > section > section > .module form label textarea[type="checkbox"]:first-of-type, body > section > section > .module form label select[type="radio"]:first-of-type, body > section > section > .module form label select[type="checkbox"]:first-of-type, body > section > section > .module form .row input[type="radio"]:first-of-type, body > section > section > .module form .row input[type="checkbox"]:first-of-type, body > section > section > .module form .row textarea[type="radio"]:first-of-type, body > section > section > .module form .row textarea[type="checkbox"]:first-of-type, body > section > section > .module form .row select[type="radio"]:first-of-type, body > section > section > .module form .row select[type="checkbox"]:first-of-type, html > section > section > .module form label input[type="radio"]:first-of-type, html > section > section > .module form label input[type="checkbox"]:first-of-type, html > section > section > .module form label textarea[type="radio"]:first-of-type, html > section > section > .module form label textarea[type="checkbox"]:first-of-type, html > section > section > .module form label select[type="radio"]:first-of-type, html > section > section > .module form label select[type="checkbox"]:first-of-type, html > section > section > .module form .row input[type="radio"]:first-of-type, html > section > section > .module form .row input[type="checkbox"]:first-of-type, html > section > section > .module form .row textarea[type="radio"]:first-of-type, html > section > section > .module form .row textarea[type="checkbox"]:first-of-type, html > section > section > .module form .row select[type="radio"]:first-of-type, html > section > section > .module form .row select[type="checkbox"]:first-of-type {
  margin-left: 0;
}

body > section > section > .module form label .half, body > section > section > .module form .row .half, html > section > section > .module form label .half, html > section > section > .module form .row .half {
  flex-basis: 45%;
  margin: 0;
  padding: 0 .5em 0 0;
  flex-shrink: 1;
}

body > section > section > .module form label .half:last-child, body > section > section > .module form .row .half:last-child, html > section > section > .module form label .half:last-child, html > section > section > .module form .row .half:last-child {
  padding: 0;
}

body > section > section > .module form label .half label, body > section > section > .module form .row .half label, html > section > section > .module form label .half label, html > section > section > .module form .row .half label {
  flex-direction: column;
  margin: 0;
}

body > section > section > .module form label cite, body > section > section > .module form .row cite, html > section > section > .module form label cite, html > section > section > .module form .row cite {
  font-size: .8em;
  color: #848484;
  font-weight: 600;
  margin-top: .3em;
  padding: 0;
}

body > section > section > .module form label cite a, body > section > section > .module form .row cite a, html > section > section > .module form label cite a, html > section > section > .module form .row cite a {
  color: #3FBBEE;
  font-weight: 600;
  text-decoration: none;
}

body > section > section > .module form label cite a:hover, body > section > section > .module form .row cite a:hover, html > section > section > .module form label cite a:hover, html > section > section > .module form .row cite a:hover {
  color: #7ED321;
}

body > section > section > .module form .row, html > section > section > .module form .row {
  flex-direction: row;
  justify-content: space-between;
}

body > section > section > .module form section.buttons, html > section > section > .module form section.buttons {
  display: flex;
  align-items: flex-end;
}

body > section > section > .module form section.buttons button, html > section > section > .module form section.buttons button {
  background: #3FBBEE;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
  font-family: "Raleway", sans-serif;
  padding: .5em 1em;
  border-radius: .6em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 1.5em;
}

body > section > section > .module form section.buttons button:hover, html > section > section > .module form section.buttons button:hover {
  background: #7ED321;
}

body > section > section > .module footer, html > section > section > .module footer {
  display: flex;
  justify-content: center;
  padding: 1em 0;
}

body > section > section > .module footer a, html > section > section > .module footer a {
  text-decoration: none;
  color: black;
  font-weight: 600;
  font-size: 1.1em;
  margin: 0 .2em;
}

body > section > section > .module footer a:hover, html > section > section > .module footer a:hover {
  color: #3FBBEE;
}

body > section > section > .module footer a.bad:hover, html > section > section > .module footer a.bad:hover {
  color: #ff4a4a;
}

body > section > section > .module footer a.active, html > section > section > .module footer a.active {
  font-weight: 800;
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 750px) {
  body {
    background-size: contain;
  }
}