/*

Kirby Starterkit

Author: Bastian Allgeier / Sascha Lack
URL:    http://getkirby.com
Email:  support@getkirby.com

*/
/* Source Sans Pro
-------------------------------------------------- */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/sourcesanspro-300.woff) format("woff"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/sourcesanspro-400.woff) format("woff"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/sourcesanspro-600.woff) format("woff"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/sourcesanspro-400-italic.woff) format("woff"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/SourceSansPro-Bold.ttf) format("ttf"); }
/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block; }

/* Pix
-------------------------------------------------- */
img {
  display: block;
  max-width: 100%; }

/* Links
-------------------------------------------------- */
a {
  color: #000;
  text-decoration: none;
  -webkit-transition: color .3s, background .3s, border .3s;
          transition: color .3s, background .3s, border .3s; }

/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both; }

/* Site
-------------------------------------------------- */
html {
  height: 101%;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 20px; }

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0;
  background: #fff;
  color: #222; }

/* Header
-------------------------------------------------- */
/* Navigation
-------------------------------------------------- */
.menu a {
  display: block;
  color: #222; }

.menu a:hover {
  text-decoration: none; }

.menu .active {
  color: red; }

.menu li {
  list-style: none; }

.menu > li {
  position: relative; }

.menu > li > a {
  padding: .35em 0;
  border-top: 1px solid #ddd;
  font-weight: 600; }

.submenu {
  position: absolute;
  z-index: 1;
  display: none;
  left: 1em; }

.submenu:before {
  position: absolute;
  z-index: -1;
  content: '';
  top: -.5em;
  left: 0;
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  border-left: .5em solid #222; }

.submenu li {
  border-bottom: 1px solid #444; }

.submenu a {
  padding: .5em 1.5em;
  font-size: .9em;
  font-weight: 300;
  color: #fff;
  background: #222;
  white-space: nowrap; }

.submenu a:hover {
  background: #333;
  color: #fff; }

@media screen and (min-width: 40em) {
  body {
    padding: 0px; }

  .logo {
    float: left; }

  .menu {
    float: right;
    margin-right: -1em; }

  .menu > li {
    float: left; }

  .menu > li > a {
    padding: 30px 1em;
    border: 0; }

  .menu > li:hover .submenu {
    display: block; } }
/* Headings
-------------------------------------------------- */
h1 {
  font-size: 2em;
  line-height: 1.25em;
  font-weight: 400;
  margin-bottom: .5em; }

h2 {
  font-size: 2em;
  line-height: 1.25em;
  font-weight: 300;
  margin-bottom: .5em;
  color: red; }

h3 {
  font-size: 1.4em;
  line-height: 1.5em;
  font-weight: 400;
  margin-bottom: .5em; }

h4 {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.5em;
  margin-bottom: .5em;
  color: red; }

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important; }

/* Main
-------------------------------------------------- */
.main {
  padding-bottom: 1.5em;
  border-bottom: 2px solid #aaa; }

.main hr {
  margin: 3em 0;
  height: 1px;
  background: #ddd; }

.main p,
.main figure,
.main ul,
.main ol {
  margin-bottom: 1.5em; }

/* Text blocks */
.text ul,
.text ol {
  margin-left: 1em; }

/* Project meta
-------------------------------------------------- */
.meta {
  margin-bottom: 1.5em; }

.meta li {
  float: left;
  list-style: none;
  margin-right: 2em;
  color: red; }

.meta li b {
  font-weight: 400;
  color: #000;
  padding-right: .25em; }

/* Project teaser
-------------------------------------------------- */
.teaser {
  list-style: none; }

.teaser li {
  margin-bottom: 1.5em;
  list-style: none; }

@media screen and (min-width: 50em) {
  .teaser li {
    float: left;
    width: 30%;
    margin-left: 5%; }

  .teaser li:first-child {
    margin-left: 0; } }
/* Next/Prev nav
-------------------------------------------------- */
.nextprev {
  padding: 1em 0; }

.nextprev a {
  border: 0; }

.nextprev .prev {
  float: left; }

.nextprev .next {
  float: right; }

/* Footer
-------------------------------------------------- */
.footer {
  padding: 1em 0 3em;
  font-size: .8em; }

.copyright {
  float: left; }

.colophon {
  float: right; }

.colophon a b {
  color: red;
  padding-left: .25em; }

@media screen and (max-width: 620px) {
  nav ul.cf {
    overflow: auto;
    display: block; } }

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

#megabg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(179deg, #18c15a, #6f72f7, #ff002b);
  background: linear-gradient(271deg, #18c15a, #6f72f7, #ff002b);
  background-size: 600% 600%;
  -webkit-animation: fetzi 20s linear infinite;
          animation: fetzi 20s linear infinite;
  opacity: 1;
  z-index: 0; }
@-webkit-keyframes fetzi {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 51%; }
  100% {
    background-position: 0% 50%; } }
@keyframes fetzi {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 51%; }
  100% {
    background-position: 0% 50%; } }
header.header {
  z-index: 10;
  width: 100%;
  border-bottom: 4px solid #fff;
  position: relative;
  padding: 0 25px;
  background-color: transparent; }
  header.header #headerinner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto; }
    header.header #headerinner a.logo {
      margin-bottom: 0; }
      header.header #headerinner a.logo h1#logofx {
        line-height: 90px;
        margin-bottom: 0;
        font-size: 1.2em;
        font-weight: normal;
        color: #fff; }

.footer {
  background: rgba(0, 0, 0, 0.7);
  padding: 3em 1.618em;
  width: 100%;
  position: relative; }
  .footer .footer-logo {
    margin-bottom: 2em;
    text-align: center; }
    .footer .footer-logo img {
      height: 3em; }
  .footer .footer-links {
    margin-bottom: 1.5em; }
    .footer .footer-links::after {
      clear: both;
      content: "";
      display: table; }
    @media screen and (min-width: 40em) {
      .footer .footer-links {
        margin-left: 25.58941%; } }
  .footer ul {
    margin-bottom: 3em;
    padding: 0; }
    @media screen and (min-width: 40em) {
      .footer ul {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 48.82117%; }
        .footer ul:last-child {
          margin-right: 0; }
        .footer ul:nth-child(6n) {
          margin-right: 0; }
        .footer ul:nth-child(6n+1) {
          clear: left; }
        .footer ul::after {
          clear: both;
          content: "";
          display: table; } }
  .footer li {
    line-height: 1.5em;
    list-style: none;
    text-align: center;
    color: rgba(255, 255, 255, 0.4); }
    @media screen and (min-width: 40em) {
      .footer li {
        text-align: left; } }
  .footer li a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none; }
    .footer li a:focus, .footer li a:hover {
      color: white; }
  .footer li h3 {
    color: white;
    font-size: 1em;
    font-weight: 800;
    margin-bottom: 0.4em; }
  .footer hr {
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 auto 1.5em;
    width: 12em; }
  .footer p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9em;
    line-height: 1.5em;
    margin: auto;
    max-width: 35em;
    text-align: center; }

ul.projectslist {
  width: 100%;
  max-width: 1100px; }
  ul.projectslist li {
    max-width: 68em;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: 170px;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 10px; }
    ul.projectslist li::after {
      clear: both;
      content: "";
      display: table; }
    ul.projectslist li div.projectimage {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%;
      height: 150px;
      overflow: hidden; }
      ul.projectslist li div.projectimage:last-child {
        margin-right: 0; }
      ul.projectslist li div.projectimage img {
        width: 100%;
        height: auto; }
    ul.projectslist li div.projecttext {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%; }
      ul.projectslist li div.projecttext:last-child {
        margin-right: 0; }
      ul.projectslist li div.projecttext div.inner h2.title {
        float: left;
        display: block;
        margin-right: 3.57866%;
        width: 100%;
        color: black; }
        ul.projectslist li div.projecttext div.inner h2.title:last-child {
          margin-right: 0; }
      ul.projectslist li div.projecttext div.inner div.projectdesc {
        float: left;
        display: block;
        margin-right: 3.57866%;
        width: 100%; }
        ul.projectslist li div.projecttext div.inner div.projectdesc:last-child {
          margin-right: 0; }
    @media screen and (max-width: 610px) {
      ul.projectslist li {
        height: auto !important; }
        ul.projectslist li div.projectimage {
          float: left;
          display: block;
          margin-right: 2.35765%;
          width: 100%;
          max-height: 250px;
          height: auto !important; }
          ul.projectslist li div.projectimage:last-child {
            margin-right: 0; }
        ul.projectslist li div.projecttext {
          float: left;
          display: block;
          margin-right: 2.35765%;
          width: 100%; }
          ul.projectslist li div.projecttext:last-child {
            margin-right: 0; }
          ul.projectslist li div.projecttext div.inner h2.title {
            float: left;
            display: block;
            margin-right: 2.35765%;
            width: 100%;
            color: black;
            font-size: 1.6em;
            line-height: 1.3em;
            margin: 0; }
            ul.projectslist li div.projecttext div.inner h2.title:last-child {
              margin-right: 0; }
          ul.projectslist li div.projecttext div.inner div.projdesc {
            float: left;
            display: block;
            margin-right: 2.35765%;
            width: 100%;
            font-size: 0.8em; }
            ul.projectslist li div.projecttext div.inner div.projdesc:last-child {
              margin-right: 0; } }

main.project {
  overflow: auto; }
  main.project .normalrow {
    max-width: 1000px; }
  main.project div.deschead {
    max-width: 68em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px; }
    main.project div.deschead::after {
      clear: both;
      content: "";
      display: table; }
    main.project div.deschead .leftsmall {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 65.88078%;
      font-size: 1.2em;
      line-height: 1.4em;
      color: white; }
      main.project div.deschead .leftsmall:last-child {
        margin-right: 0; }
    main.project div.deschead .rightsmall {
      float: left;
      display: block;
      margin-right: 2.35765%;
      width: 31.76157%;
      font-size: 1em;
      line-height: 1.4em;
      color: black; }
      main.project div.deschead .rightsmall:last-child {
        margin-right: 0; }
    @media screen and (max-width: 740px) {
      main.project div.deschead .leftsmall {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 100%;
        font-size: 1.2em;
        line-height: 1.4em;
        color: white; }
        main.project div.deschead .leftsmall:last-child {
          margin-right: 0; }
        main.project div.deschead .leftsmall:nth-child(1n) {
          margin-right: 0; }
        main.project div.deschead .leftsmall:nth-child(1n+1) {
          clear: left; }
      main.project div.deschead .rightsmall {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 100%;
        font-size: 1em;
        line-height: 1.4em;
        color: black; }
        main.project div.deschead .rightsmall:last-child {
          margin-right: 0; } }
  main.project figure {
    position: relative;
    margin: 20px 0 35px;
    padding-top: 67px;
    max-width: 1000px; }
    main.project figure::before {
      content: "";
      width: 100%;
      height: 67px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: url(../images/browserbar.png) center bottom no-repeat transparent;
      background-size: contain; }
    main.project figure img {
      width: 100%;
      border-radius: 0 0px 5px 5px; }

.menu a {
  display: block;
  color: #fff; }

.menu a:hover {
  color: #000;
  text-decoration: none; }

.menu .active {
  color: #000; }

body {
  background-color: transparent; }

.main {
  position: relative;
  z-index: 10;
  border-bottom: 0px;
  margin-top: 10px;
  padding: 0 25px; }
  .main p {
    margin: 0 0 1em 0 !important; }

.normalrow {
  max-width: 1100px;
  margin: 1em auto 2em; }

h2.fat-inner {
  font-weight: 700;
  font-size: 3.8em;
  letter-spacing: -1px;
  line-height: 0.9em;
  color: #fff;
  clear: both;
  display: block;
  width: 100%;
  margin: 40px 0px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
  @media screen and (min-width: 481px) and (max-width: 800px) {
    h2.fat-inner {
      margin: 20px 0px;
      font-size: 2.5em; } }
  @media screen and (max-width: 480px) {
    h2.fat-inner {
      margin: 20px 0px;
      font-size: 2.5em; } }
  h2.fat-inner span.black {
    color: #000;
    clear: both; }

.extratext {
  font-size: 0.85em;
  font-weight: normal;
  max-width: 640px;
  color: #444; }

main.projects .text, main.blog .text {
  max-width: 1100px;
  margin: 1em auto; }

ul.aboutsection {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  list-style-type: none !important;
  list-style-image: none !important;
  overflow: visible !important;
  position: relative; }
  ul.aboutsection::after {
    clear: both;
    content: "";
    display: table; }
  ul.aboutsection::after {
    clear: both;
    content: "";
    display: table; }
  ul.aboutsection li {
    display: block;
    background-color: transparent;
    min-height: 230px;
    margin-bottom: 1.5em;
    font-size: 0.85em;
    list-style-type: none !important;
    list-style-image: none !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    border: 0px solid #fff;
    position: relative; }
    ul.aboutsection li h3 {
      padding: 0px 0 5px 10px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white !important; }
    ul.aboutsection li div.minibg {
      background-color: white;
      position: absolute;
      top: 35px;
      right: 0;
      bottom: 0;
      left: 0; }
    ul.aboutsection li div.txt {
      background-color: white;
      padding: 10px 15px;
      /*@include position(absolute, 35px 0 0 0);*/
      position: relative; }
    @media screen and (min-width: 1050px) {
      ul.aboutsection li {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 31.76157%;
        min-height: 250px; }
        ul.aboutsection li:last-child {
          margin-right: 0; }
        ul.aboutsection li:nth-child(3n) {
          margin-right: 0; } }
    @media screen and (min-width: 540px) and (max-width: 1050px) {
      ul.aboutsection li {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 48.82117%;
        min-height: 300px; }
        ul.aboutsection li:last-child {
          margin-right: 0; }
        ul.aboutsection li:nth-child(2n) {
          margin-right: 0; }
        ul.aboutsection li:nth-child(2n+1) {
          clear: left; }
        ul.aboutsection li h3 {
          font-size: 0.9em !important; }
        ul.aboutsection li div.minibg {
          position: absolute;
          top: 32px;
          right: 0;
          bottom: 0;
          left: 0; } }
    @media screen and (max-width: 540px) {
      ul.aboutsection li {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 100%;
        min-height: 150px; }
        ul.aboutsection li:last-child {
          margin-right: 0; } }
    ul.aboutsection li h3 {
      padding: 5px 0 5px 10px;
      font-size: 1em;
      text-transform: uppercase;
      font-weight: bolder;
      color: black;
      border-bottom: 1px solid #ccc;
      border-top: 0px solid #fff; }
    ul.aboutsection li .txt {
      font-size: 0.9em; }

ul#customers {
  margin-top: 30px;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  list-style-type: none !important;
  list-style-image: none !important;
  overflow: visible !important;
  position: relative; }
  ul#customers::after {
    clear: both;
    content: "";
    display: table; }
  ul#customers::after {
    clear: both;
    content: "";
    display: table; }
  ul#customers li {
    display: block;
    background-color: transparent;
    min-height: 230px;
    margin-bottom: 1.5em;
    font-size: 0.85em;
    list-style-type: none !important;
    list-style-image: none !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    border: 0px solid #fff;
    position: relative; }
    ul#customers li h3 {
      padding: 0px 0 5px 10px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white !important; }
    ul#customers li div.minibg {
      background-color: white;
      position: absolute;
      top: 35px;
      right: 0;
      bottom: 0;
      left: 0; }
    ul#customers li div.txt {
      background-color: white;
      padding: 10px 15px;
      /*@include position(absolute, 35px 0 0 0);*/
      position: relative; }
    @media screen and (min-width: 1050px) {
      ul#customers li {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 23.23176%;
        min-height: 250px; }
        ul#customers li:last-child {
          margin-right: 0; }
        ul#customers li:nth-child(4n) {
          margin-right: 0; } }
    @media screen and (min-width: 540px) and (max-width: 1050px) {
      ul#customers li {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 48.82117%;
        min-height: 300px; }
        ul#customers li:last-child {
          margin-right: 0; }
        ul#customers li:nth-child(2n) {
          margin-right: 0; }
        ul#customers li:nth-child(2n+1) {
          clear: left; }
        ul#customers li h3 {
          font-size: 0.9em !important; }
        ul#customers li div.minibg {
          position: absolute;
          top: 32px;
          right: 0;
          bottom: 0;
          left: 0; } }
    @media screen and (max-width: 540px) {
      ul#customers li {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 100%;
        min-height: 150px; }
        ul#customers li:last-child {
          margin-right: 0; } }
    ul#customers li h3 {
      padding: 5px 0 5px 10px;
      font-size: 1em;
      text-transform: uppercase;
      font-weight: bolder;
      color: black;
      border-bottom: 1px solid #ccc;
      border-top: 0px solid #fff; }
    ul#customers li .txt {
      font-size: 0.9em; }

.firstrowstart {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  margin: 20px auto 55px !important;
  overflow: auto;
  max-width: 1100px;
  position: relative; }
  .firstrowstart::after {
    clear: both;
    content: "";
    display: table; }
  .firstrowstart #firstrowleft {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%; }
    .firstrowstart #firstrowleft:last-child {
      margin-right: 0; }
  .firstrowstart #firstrowright {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background-color: transparent; }
    .firstrowstart #firstrowright:last-child {
      margin-right: 0; }
    .firstrowstart #firstrowright #profileimage {
      position: absolute;
      top: 35px;
      right: 35px;
      bottom: 35px;
      left: 35px;
      background: url("../images/meprofile.png") center center no-repeat transparent;
      background-size: contain; }
  @media screen and (max-width: 605px) {
    .firstrowstart {
      background-color: transparent; }
      .firstrowstart #firstrowleft {
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: 100%; }
        .firstrowstart #firstrowleft:last-child {
          margin-right: 0; }
      .firstrowstart #firstrowright {
        display: none !important;
        float: left;
        display: block;
        margin-right: 2.35765%;
        width: -2.35765%; }
        .firstrowstart #firstrowright:last-child {
          margin-right: 0; } }

#frontskillset {
  overflow: auto;
  margin: 20px auto 55px !important;
  overflow: auto;
  max-width: 1100px; }
  #frontskillset ul li {
    list-style: none;
    list-style-position: inside;
    background-color: white;
    padding: 9px 25px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    float: left;
    margin: 9px;
    font-size: 1.4em; }

body.Kontakt .text {
  padding-bottom: 3em; }
  body.Kontakt .text p {
    font-size: 3em;
    line-height: 1em;
    font-weight: bolder; }
  @media screen and (max-width: 800px) {
    body.Kontakt .text {
      padding-bottom: 2em; }
      body.Kontakt .text p {
        font-size: 2.0em;
        line-height: 1em;
        font-weight: bolder; } }
  @media screen and (max-width: 520px) {
    body.Kontakt .text {
      padding-bottom: 1.6em; }
      body.Kontakt .text p {
        font-size: 1.4em;
        line-height: 1em;
        font-weight: bolder; } }

/*# sourceMappingURL=fdx-pref.css.map */