@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,700,700i");
html,
body {
  padding: 0;
  margin: 0; }

* {
  box-sizing: border-box; }

ul, ol {
  padding: 0;
  margin: 0; }

li {
  padding: 0;
  margin: 0 0 0 1rem; }

a {
  text-decoration: none; }

ul ul {
  margin: 0 0 0 1em; }

ul ul ul {
  margin: 0 0 0 2em; }

.mpFrame {
  display: flex;
  flex-direction: column;
  width: 100%; }

.mpSidebar {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0; }
  .mpSidebar > * {
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center; }

.mpContent {
  background-color: #f5eff0;
  display: flex;
  flex-direction: column;
  align-items: center; }

.mpTextWrap {
  width: 100%;
  max-width: 650px;
  padding: 4rem 1.5rem; }

.mpBrand .mpLogo {
  width: 6rem;
  height: auto; }

.mpNav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; }
  .mpNav a {
    text-decoration: none;
    color: #242424;
    font-weight: 700;
    margin-right: 1.5rem; }

@media (min-width: 800px) {
  .mpFrame {
    flex-direction: row;
    min-height: 100vh;
    justify-content: flex-end; }
  .mpSidebar {
    width: 350px;
    height: 100vh;
    padding: 3rem 0;
    position: fixed;
    left: 0;
    top: 0; }
    .mpSidebar > * {
      max-width: 250px;
      text-align: left; }
  .mpContent {
    width: calc(100% - 350px); }
  .mpBrand .mpLogo {
    width: 9rem; }
  .mpNav {
    flex-direction: column; }
    .mpNav a {
      font-size: 18px;
      margin-bottom: .8rem; } }

input, select, option, textarea {
  width: 100%;
  padding: .5rem;
  border: 1px solid #d1c7c9;
  border-radius: 3px;
  font-size: 1rem;
  font-weight: 300;
  min-height: 30px; }

input[type=checkbox], input[type=radio] {
  width: 20px; }

.hcForm input, .hcForm select, .hcForm option, .hcForm textarea {
  background-color: white;
  max-width: 480px; }

.hcForm textarea {
  height: auto;
  min-height: 150px; }

button {
  background-color: #551F75;
  border-radius: 4px;
  padding: .5rem .7rem;
  font-size: 1rem;
  border: 0px;
  color: #fff;
  cursor: pointer; }

.hcLabel {
  color: white;
  text-transform: uppercase;
  font-size: .85rem; }

.hcFormElement {
  margin-bottom: 2rem; }

.hcLabelName {
  margin-bottom: .3rem;
  font-weight: bold; }

.hcLabelInfo {
  margin-bottom: .3rem; }

.hcFormElementItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; }

.hcLabelInfo {
  font-size: .85rem; }

.hcformMessage {
  font-size: .85rem; }

.hcformMessageFieldOK input, .hcformMessageFieldOK select, .hcformMessageFieldOK textarea {
  background-image: url("/images/form/icon-valid-V.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 40px; }

.hcformMessageFieldWarning {
  color: #c43631; }
  .hcformMessageFieldWarning input, .hcformMessageFieldWarning select, .hcformMessageFieldWarning textarea {
    background-image: url("/images/form/icon-valid-X.png");
    border: 1px solid #c43631;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40px; }

.mpHero {
  height: auto;
  width: 100%;
  background-color: #da203d;
  color: #fff;
  background-image: url("../images/mpHero.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  background-blend-mode: darken;
  display: flex;
  justify-content: center;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); }
  .mpHero a {
    color: #fff;
    text-decoration: underline; }

.mpSiteTilte {
  font-size: 4rem;
  font-weight: 700;
  line-height: 80%; }

.mpHomeCols {
  display: flex;
  flex-direction: column; }
  .mpHomeCols > * {
    padding: 1.5rem; }

.mpHomeCol1 {
  display: flex;
  flex-direction: column;
  background-color: #edcfe0;
  margin-top: -3rem; }

.mpHomeCol2 {
  display: flex;
  flex-direction: column; }

@media (min-width: 800px) {
  .mpHero {
    min-height: 85vh; }
  .mpSiteTilte {
    font-size: 8rem;
    font-weight: 700;
    line-height: 90%; }
  .mpHomeCols {
    flex-direction: row;
    width: 100%; }
    .mpHomeCols > * {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .mpHomeCols > * h2, .mpHomeCols > * p {
        max-width: 400px;
        width: 100%; } }

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 140%;
  font-style: normal;
  color: #242424; }

h1 {
  font-size: 1.5em;
  line-height: 130%;
  font-weight: 700; }

h2 {
  font-size: 1.3em;
  line-height: 130%;
  font-weight: 700; }

h3 {
  font-size: 1em;
  line-height: 130%;
  font-weight: 700; }

h4 {
  font-size: .85em;
  line-height: 130%;
  font-weight: 300;
  font-style: italic; }

strong {
  font-weight: 700; }

.links {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: .5rem;
  background-color: #252525;
  color: #fff; }
  .links a {
    color: #fff; }

.mpLogedInMenu {
  background-color: #ECE6F0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 1rem -1rem;
  border-radius: 4px;
  color: #551F75; }
  .mpLogedInMenu a {
    color: #551F75;
    font-weight: 700; }

.mpLoginInfo {
  margin-bottom: 1rem; }

#gegevens {
  width: 100%;
  max-width: 650px;
  border-collapse: collapse; }
  #gegevens td {
    border-bottom: 1px solid #e2d0d3;
    padding: .5rem; }
  #gegevens td:nth-child(1) {
    font-weight: 700;
    max-width: 70px;
    color: #8d5863; }

.warning {
  width: 100%;
  background-color: #f2dad9;
  padding: 1rem;
  margin: 1rem -1rem;
  border-radius: 4px; }