/* Base
--------------------------------------- */
/* Base - Reset
--------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700italic|PT+Sans+Caption:700&subset=latin,latin-ext);
/* line 4, ../scss/base/_reset.scss */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* line 11, ../scss/base/_reset.scss */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

/* Color-Swatches
--------------------------------------- */
/* Color-Mapping
--------------------------------------- */
/* Typo */
/* Body */
/* Header */
/* Footer */
/* Base - Webfonts
--------------------------------------- */
/* Base - Typography
--------------------------------------- */
/* line 3, ../scss/base/_typography.scss */
html {
  font-size: 62.5%;
  font-family: Helvetica, Arial, sans-serif;
  color: #5E5E5E;
}

/* line 9, ../scss/base/_typography.scss */
h1, h2, h3 {
  font-family: Georgia, Times, serif;
  font-style: italic;
  font-weight: 400;
  color: #17345E;
}

/* line 16, ../scss/base/_typography.scss */
h1 {
  font-size: 3rem;
}

/* line 19, ../scss/base/_typography.scss */
h2 {
  font-size: 3rem;
}

/* line 22, ../scss/base/_typography.scss */
h3 {
  font-size: 2rem;
}

/* line 26, ../scss/base/_typography.scss */
h1 + h2, h2 + h3 {
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
}

/* line 32, ../scss/base/_typography.scss */
p {
  font-size: 1.8rem;
}

/* line 36, ../scss/base/_typography.scss */
p + p {
  margin: 1rem 0 0;
}

/* line 8, ../scss/mhwp.scss */
::selection {
  color: #FFFFFF;
  background: #90B2E4;
}

/* line 12, ../scss/mhwp.scss */
::-moz-selection {
  color: #FFFFFF;
  background: #90B2E4;
}

/* Page
--------------------------------------- */
/* Page - Layout
--------------------------------------- */
/* line 3, ../scss/pages/_pagelayout.scss */
body {
  direction: ltr;
  background: linear-gradient(to bottom, #ECEEF2 25%, #FFFFFF 75%) no-repeat;
}

/* line 8, ../scss/pages/_pagelayout.scss */
.left {
  float: left;
}

/* line 12, ../scss/pages/_pagelayout.scss */
.right {
  float: right;
}

/* line 16, ../scss/pages/_pagelayout.scss */
.flex-item {
  flex: 1;
  margin: 10px;
  padding: 20px;
}
/* line 21, ../scss/pages/_pagelayout.scss */
.flex-item:first-child {
  margin-top: 0;
}

/* line 26, ../scss/pages/_pagelayout.scss */
.backtotop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: .5;
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  text-align: center;
  line-height: 45px;
  font-size: 2rem;
  color: #90B2E4;
  background: #17345E;
}
/* line 41, ../scss/pages/_pagelayout.scss */
.backtotop:hover {
  display: inline;
  transition: opacity 600ms;
  opacity: 1;
  border-bottom: 0;
}

/* line 49, ../scss/pages/_pagelayout.scss */
.page-logo {
  display: block;
  padding-top: 125px;
  margin: 25px auto 65px auto;
  opacity: .5;
}

/* line 56, ../scss/pages/_pagelayout.scss */
.content-wrapper {
  display: table;
  display: flex;
  flex-flow: column;
  position: relative;
  width: 95%;
  margin: 0 auto;
  padding-top: 25rem;
  padding-bottom: 20.5rem;
}
/* line 66, ../scss/pages/_pagelayout.scss */
.content-wrapper:after {
  content: '';
  position: absolute;
  bottom: 15.25rem;
  left: -0.75rem;
  width: 76px;
  height: 79px;
  z-index: 0;
  background: url("/assets/bg-main-bottomleft.png") no-repeat;
}

/* line 78, ../scss/pages/_pagelayout.scss */
.content-container {
  display: table;
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* line 89, ../scss/pages/_pagelayout.scss */
.content-main {
  position: relative;
  flex: 1;
}
/* line 93, ../scss/pages/_pagelayout.scss */
.content-main article + article {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #D0D0D0;
}

/* line 100, ../scss/pages/_pagelayout.scss */
.content-aside {
  flex: 1;
  display: table;
  display: flex;
  flex-direction: column wrap;
  justify-content: center;
}
/* line 108, ../scss/pages/_pagelayout.scss */
.content-aside .flex-item {
  display: table;
  display: flex;
  flex: 1;
  width: 100%;
}

@media (min-width: 48em) {
  /* line 122, ../scss/pages/_pagelayout.scss */
  .content-wrapper {
    width: 90%;
    min-height: 100%;
    margin: 0 auto;
    padding-bottom: 20.5rem;
    flex-flow: row;
    flex-direction: row;
    justify-content: center;
  }
  /* line 131, ../scss/pages/_pagelayout.scss */
  .content-wrapper:after {
    bottom: 18.25em;
  }

  /* line 136, ../scss/pages/_pagelayout.scss */
  .content-main {
    flex: 3;
    margin: 0 0 3rem 0;
    padding: 0;
  }

  /* line 146, ../scss/pages/_pagelayout.scss */
  .content-aside {
    display: none !important;
    flex: 1;
    align-self: flex-start;
    display: table;
    display: flex;
    flex-direction: column wrap;
    margin-left: 2.5rem;
  }
  /* line 158, ../scss/pages/_pagelayout.scss */
  .content-aside .flex-item {
    flex: 2;
    border: 1px solid green;
  }
  /* line 162, ../scss/pages/_pagelayout.scss */
  .content-aside .flex-item img {
    width: 100%;
    max-height: 100%;
    border: 1px solid red;
  }
  /* line 168, ../scss/pages/_pagelayout.scss */
  .content-aside .contact-teaser {
    background: #BBB;
  }
  /* line 171, ../scss/pages/_pagelayout.scss */
  .content-aside .contact-teaser h2, .content-aside .contact-teaser p, .content-aside .contact-teaser dl {
    display: block;
    width: 100%;
    background: lime;
  }
}
/* line 180, ../scss/pages/_pagelayout.scss */
dt, dd {
  display: inline;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* line 187, ../scss/pages/_pagelayout.scss */
dd + dt:before {
  content: '';
  display: block;
}

/* line 192, ../scss/pages/_pagelayout.scss */
form, fieldset {
  display: block;
  display: none;
  width: 100%;
}

/* line 198, ../scss/pages/_pagelayout.scss */
section {
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
  padding: 3.5rem 3rem 3.5rem;
  background: #FFF;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.35);
}
/* line 206, ../scss/pages/_pagelayout.scss */
section:last-child {
  padding-bottom: 75px;
}
/* line 210, ../scss/pages/_pagelayout.scss */
section:before {
  content: '';
  position: absolute;
  top: -3px;
  left: -4px;
  z-index: 0;
  display: block;
  width: 165px;
  height: 65px;
  background: url("/assets/bg-box-topleft.png") no-repeat;
}
/* line 222, ../scss/pages/_pagelayout.scss */
section:after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -3px;
  z-index: 0;
  width: 165px;
  height: 65px;
  background: url("/assets/bg-box-bottomright.png") no-repeat;
}
/* line 233, ../scss/pages/_pagelayout.scss */
section .preheadline {
  position: absolute;
  top: -15rem;
  padding: 5rem 0;
}
/* line 238, ../scss/pages/_pagelayout.scss */
section .preheadline:before {
  content: '';
  position: absolute;
  top: 0;
  left: -12px;
  display: block;
  width: 2px;
  height: 100%;
  border-left: 4px solid red;
}

/* line 252, ../scss/pages/_pagelayout.scss */
section + section {
  margin-top: 20rem;
}

/* line 256, ../scss/pages/_pagelayout.scss */
img {
  max-width: 100%;
}

/* line 262, ../scss/pages/_pagelayout.scss */
a:link {
  text-decoration: none;
  color: #90B2E4;
}
/* line 267, ../scss/pages/_pagelayout.scss */
a:hover {
  border-bottom: 1px dotted;
}

@media (min-width: 75em) {
  /* line 277, ../scss/pages/_pagelayout.scss */
  .content-wrapper {
    width: 85%;
  }
  /* line 280, ../scss/pages/_pagelayout.scss */
  .content-wrapper:after {
    bottom: 18.25rem;
  }
}
/* Page - Navigation
--------------------------------------- */
/* line 3, ../scss/pages/_pagenavigation.scss */
.main-navigation {
  flex: 1;
  display: table;
  display: flex;
  flex-flow: row wrap;
  align-self: center;
  height: 36px;
  margin-right: 5%;
  border-radius: 6px;
  background: linear-gradient(to bottom, #1c3f72, #17345E), repeating-linear-gradient(136deg, #FFF, #FFF 1px, #17345E 0, #17345E 5px);
  transition: all .5s;
}
/* line 14, ../scss/pages/_pagenavigation.scss */
.main-navigation ul {
  display: table;
  display: flex;
  flex-flow: row wrap;
  flex: 1;
  list-style-type: none;
  padding: 0;
}
/* line 21, ../scss/pages/_pagenavigation.scss */
.main-navigation ul li {
  flex: 1;
  align-self: center;
  margin: 0;
  text-align: center;
  border-right: 1px solid #000;
}
/* line 27, ../scss/pages/_pagenavigation.scss */
.main-navigation ul li a {
  display: block;
  line-height: auto;
}
/* line 31, ../scss/pages/_pagenavigation.scss */
.main-navigation ul li:last-child {
  border-right: 0;
}
/* line 35, ../scss/pages/_pagenavigation.scss */
.main-navigation ul li + li {
  border-left: 1px solid #90B2E4;
}
/* line 39, ../scss/pages/_pagenavigation.scss */
.main-navigation ul a {
  text-decoration: none;
  font-weight: normal;
  font-size: 1.6rem;
  color: #90B2E4;
  text-shadow: 0 0 1px #000;
}
/* line 45, ../scss/pages/_pagenavigation.scss */
.main-navigation ul a:hover, .selected .main-navigation ul a {
  color: #FFF;
  text-decoration: none;
  border-bottom: 0;
}

/* line 55, ../scss/pages/_pagenavigation.scss */
.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  border-radius: 0;
  transition: all .5s;
}

/* line 66, ../scss/pages/_pagenavigation.scss */
.meta-navigation {
  flex: 1;
  display: none;
}
/* line 70, ../scss/pages/_pagenavigation.scss */
.meta-navigation li {
  display: inline-block;
  margin: 0;
}
/* line 73, ../scss/pages/_pagenavigation.scss */
.meta-navigation li a {
  font-size: 12px;
}

/* Sections
--------------------------------------- */
/* Page - Header
--------------------------------------- */
/* line 3, ../scss/sections/_header.scss */
.header {
  display: table;
  display: flex;
  flex-direction: row wrap;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 20px 0 10px;
  color: #838383;
  font-family: Georgia, Times, serif;
  transition: top 0.2s ease-in-out;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  transition: all 1s;
}
/* line 20, ../scss/sections/_header.scss */
.header:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  border-bottom: 1px solid #FFF;
  background: #17345E;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 100%), repeating-linear-gradient(136deg, #546C90, #546C90 1px, #17345E 0, #17345E 5px);
}
/* line 33, ../scss/sections/_header.scss */
.header .hgroup {
  flex: 1;
  margin-left: 5%;
}
/* line 37, ../scss/sections/_header.scss */
.header .hgroup h1 {
  font-size: 36px;
  color: #888;
}
/* line 42, ../scss/sections/_header.scss */
.header .hgroup h2 {
  font-size: 28px;
  color: #888;
}
/* line 47, ../scss/sections/_header.scss */
.header .hgroup img {
  max-width: 180px;
}

/* line 54, ../scss/sections/_header.scss */
.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100px;
  border-radius: 0;
  transition: all 1s;
  background: red;
}

/* line 66, ../scss/sections/_header.scss */
.nav-up {
  top: -70px;
}

/* Page - Footer
--------------------------------------- */
/* line 3, ../scss/sections/_footer.scss */
.footer {
  position: relative;
  padding: 35px 0;
  color: #99CCFF;
  background-color: #17345E;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 5%), linear-gradient(to bottom, transparent 0%, #17345E 65%), repeating-linear-gradient(-36deg, #546C90 0, #546C90 1px, #17345E 0, #17345E 6px);
}
/* line 13, ../scss/sections/_footer.scss */
.footer .copyright {
  width: 80%;
  margin: 0 auto;
  font-size: 1.3rem;
}
/* line 19, ../scss/sections/_footer.scss */
.footer .footer-visual {
  position: absolute;
  right: 0;
  bottom: 1.3rem;
  display: block;
  width: 100%;
  height: auto;
  max-width: 96rem;
  padding-bottom: 75px;
}

@media (min-width: 48em) {
  /* line 33, ../scss/sections/_footer.scss */
  .footer .footer-visual {
    bottom: 0;
    padding-bottom: 0;
  }
}
/* Section - About me
--------------------------------------- */
/* line 4, ../scss/sections/_aboutme.scss */
.aboutme {
  display: table;
  display: flex;
  align-content: flex-start;
}
/* line 9, ../scss/sections/_aboutme.scss */
.aboutme img {
  flex: 1;
  max-width: 250px;
  max-height: 250px;
  border-radius: 50%;
  background: radial-gradient(#90b2e4, #ffffff 65%);
}
/* line 16, ../scss/sections/_aboutme.scss */
.aboutme article {
  flex: 2;
}
/* line 19, ../scss/sections/_aboutme.scss */
.aboutme p {
  padding-right: 5em;
}

/* Section - References
--------------------------------------- */
/* line 4, ../scss/sections/_references.scss */
.reference-wrapper {
  display: table;
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  justify-content: center;
}

/* line 12, ../scss/sections/_references.scss */
.reference-container {
  display: table;
  display: flex;
  flex: 3;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
}
/* line 23, ../scss/sections/_references.scss */
.reference-container .ref-item {
  flex: 1;
  margin: 5px;
  padding: 5px;
}
/* line 29, ../scss/sections/_references.scss */
.reference-container .ref-item figure, .reference-container .ref-item figcaption {
  text-align: center;
  margin: 0;
}
/* line 34, ../scss/sections/_references.scss */
.reference-container .ref-item img {
  max-width: 195px;
}
/* line 39, ../scss/sections/_references.scss */
.reference-container .ref-item-last {
  flex: 1;
  order: 5;
  align-self: flex-end;
}

/* Contact - Section
--------------------------------------- */
/* line 4, ../scss/sections/_contact.scss */
.contact-wrapper {
  width: 100%;
}

/* Elements
--------------------------------------- */
/* Element - Image Box
--------------------------------------- */
/* line 4, ../scss/elements/_imagebox.scss */
.imagebox > figure {
  max-width: 400px;
}

/* Element - Text Image Box
--------------------------------------- */
/* line 4, ../scss/elements/_textimagebox.scss */
.textimagebox {
  display: table;
  display: flex;
  flex: 2;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 2px 0;
}
/* line 11, ../scss/elements/_textimagebox.scss */
.textimagebox > figure {
  flex: 1;
  max-width: 400px;
}
/* line 15, ../scss/elements/_textimagebox.scss */
.textimagebox > div {
  flex: 3;
  padding-top: 10px;
}

/* line 21, ../scss/elements/_textimagebox.scss */
.textimagebox-left > figure {
  order: 1;
  margin-left: 0;
}
/* line 25, ../scss/elements/_textimagebox.scss */
.textimagebox-left > div {
  order: 2;
}

/* line 30, ../scss/elements/_textimagebox.scss */
.textimagebox-right > figure {
  order: 2;
  margin-right: 0;
}
/* line 34, ../scss/elements/_textimagebox.scss */
.textimagebox-right > div {
  order: 1;
}

/* line 1, ../scss/elements/_charts.scss */
.single-value-chart {
  max-width: 95%;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}
/* line 7, ../scss/elements/_charts.scss */
.single-value-chart li {
  width: 100%;
}
/* line 10, ../scss/elements/_charts.scss */
.single-value-chart .bar {
  margin: 5px 0;
  padding: 0 10px;
  border: 1px solid #546C90;
  border-radius: 4px;
}
/* line 16, ../scss/elements/_charts.scss */
.single-value-chart .bar-fill {
  max-width: 100%;
  margin: 0 0 0 -10px;
  padding: 5px 10px;
  border-radius: 2px 0 0 2px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #17345E;
  background: #82A9C8;
}
/* line 27, ../scss/elements/_charts.scss */
.single-value-chart .label {
  font-style: italic;
}

/* line 33, ../scss/elements/_charts.scss */
.graph {
  background: red;
}
/* line 35, ../scss/elements/_charts.scss */
.graph table {
  border: 0;
  background: lime;
}
/* line 40, ../scss/elements/_charts.scss */
.graph tbody tr {
  float: left;
  border: 1px solid #96000;
  background: aqua;
}
/* line 45, ../scss/elements/_charts.scss */
.graph tbody th, .graph tbody td {
  display: block;
}
/* line 48, ../scss/elements/_charts.scss */
.graph tbody td {
  float: left;
}