/* cairo-regular - latin */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/cairo-v4-latin-regular.eot");
  src: local("Cairo"), local("Cairo-Regular"), url("../fonts/cairo-v4-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/cairo-v4-latin-regular.woff2") format("woff2"), url("../fonts/cairo-v4-latin-regular.woff") format("woff"), url("../fonts/cairo-v4-latin-regular.ttf") format("truetype"), url("../fonts/cairo-v4-latin-regular.svg#Cairo") format("svg"); }
/* lato-regular - latin */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/lato-v14-latin-regular.eot");
  src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/lato-v14-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-v14-latin-regular.woff2") format("woff2"), url("../fonts/lato-v14-latin-regular.woff") format("woff"), url("../fonts/lato-v14-latin-regular.ttf") format("truetype"), url("../fonts/lato-v14-latin-regular.svg#Lato") format("svg"); }
/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-v18-latin-regular.eot");
  src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v18-latin-regular.woff2") format("woff2"), url("../fonts/roboto-v18-latin-regular.woff") format("woff"), url("../fonts/roboto-v18-latin-regular.ttf") format("truetype"), url("../fonts/roboto-v18-latin-regular.svg#Roboto") format("svg"); }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%; }

body {
  font-family: "Lato Light", Gotham, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: lighter;
  color: #ffffff;
  background-color: #181921;
  overflow-x: hidden; }
  body * {
    box-sizing: border-box; }

a {
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  transition-duration: 150ms;
  -webkit-tap-highlight-color: transparent; }
  a:hover, a:focus {
    border-color: #ffffff; }
  a:active {
    border-color: #3498db; }

#wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  right: 0;
  opacity: 1;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }

nav#mobileMenu {
  width: 250px;
  height: 100%;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  right: -250px;
  z-index: 2;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  background-color: #181921;
  box-shadow: 0 0 15px transparent;
  padding-top: 82px; }
  nav#mobileMenu > div {
    min-height: calc(100% - 34px);
    position: relative;
    padding-bottom: 54px; }
  nav#mobileMenu ul {
    list-style: none;
    padding: 0;
    position: relative; }
    nav#mobileMenu ul li {
      display: inline-block;
      width: 100%; }
      nav#mobileMenu ul li a {
        display: inline-block;
        width: 100%;
        padding: 10px 10px 10px 20px;
        -webkit-tap-highlight-color: transparent;
        border-bottom: none;
        border-left: solid 2px transparent; }
        nav#mobileMenu ul li a.active {
          border-left: solid 2px #3498db; }
      nav#mobileMenu ul li:nth-last-of-type(2) a {
        margin-top: 60px; }
      nav#mobileMenu ul li:nth-last-of-type(-n+2) a {
        opacity: 0.6;
        background-color: transparent; }
  nav#mobileMenu #mobileSocial {
    width: 100%;
    text-align: center;
    height: 32px;
    bottom: 10px;
    position: absolute; }
    nav#mobileMenu #mobileSocial a {
      border: none;
      padding: 0;
      display: inline-block;
      width: 32px;
      height: 32px; }
      nav#mobileMenu #mobileSocial a:first-of-type {
        margin-right: 15px; }

#mobileMenuOpener {
  width: 40px;
  height: 45px;
  position: absolute;
  right: 20px;
  top: 47px;
  transform: rotate(0deg);
  transition: 500ms cubic-bezier(0.86, 0, 0.07, 1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: none;
  z-index: 3; }
  @media screen and (max-width: 860px) {
    #mobileMenuOpener {
      display: block; } }
  #mobileMenuOpener span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 500ms cubic-bezier(0.86, 0, 0.07, 1); }
    #mobileMenuOpener span:nth-child(1) {
      top: 0; }
    #mobileMenuOpener span:nth-child(2), #mobileMenuOpener span:nth-child(3) {
      top: 18px; }
    #mobileMenuOpener span:nth-child(4) {
      top: 36px; }
  #mobileMenuOpener.open {
    position: fixed; }
    #mobileMenuOpener.open span:nth-child(1) {
      top: 18px;
      width: 0;
      left: 50%; }
    #mobileMenuOpener.open span:nth-child(2) {
      transform: rotate(45deg); }
    #mobileMenuOpener.open span:nth-child(3) {
      transform: rotate(-45deg); }
    #mobileMenuOpener.open span:nth-child(4) {
      top: 18px;
      width: 0;
      left: 50%; }
    #mobileMenuOpener.open + nav#mobileMenu {
      right: 0;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
    #mobileMenuOpener.open ~ #wrapper {
      right: 250px;
      opacity: 0.2; }

header {
  position: absolute;
  z-index: 3;
  width: 100%;
  max-width: 1400px;
  height: 170px;
  transform: translateX(-50%);
  left: 50%; }
  header #logo {
    width: 180px;
    position: relative;
    transform: scale(1.5);
    transform-origin: top left;
    display: inline-block;
    margin-top: 5px;
    margin-left: 60px; }
    header #logo a {
      position: absolute;
      font-size: 1em;
      line-height: 22px;
      text-transform: lowercase;
      top: 5px;
      left: 0;
      text-align: center;
      width: 80px;
      text-shadow: none;
      font-family: "Cairo", sans-serif;
      border: none; }
      header #logo a span {
        display: inline-block;
        width: 100%; }
    header #logo svg {
      width: 80px;
      height: 80px; }
      header #logo svg polygon {
        background-blend-mode: hard-light;
        stroke-dasharray: 590;
        animation: logoAnimation 3s forwards;
        stroke-dashoffset: 590px;
        transform-origin: 50% 50%;
        stroke: #ffffff;
        fill: transparent;
        stroke-width: 3px;
        transition-duration: 1s;
        /** IE 10+ exception for failing SVG animation */ }
@keyframes logoAnimation {
  0% {
    stroke-dashoffset: 590px; }
  100% {
    stroke-dashoffset: 0; } }
        .withTeaser header #logo svg polygon {
          animation-delay: 2s; }
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          header #logo svg polygon {
            stroke-dashoffset: 0; } }
    @media screen and (max-width: 860px) {
      header #logo {
        margin-left: 0; } }
  header nav {
    position: absolute;
    right: 150px;
    top: 50px; }
    header nav ul {
      list-style: none;
      margin: 0;
      padding: 0; }
      header nav ul li {
        float: left; }
        header nav ul li a {
          display: inline-block;
          padding: 10px 20px;
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none;
          text-transform: lowercase;
          position: relative;
          border-bottom: none; }
          header nav ul li a:hover, header nav ul li a:focus {
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.1); }
          header nav ul li a.active, header nav ul li a:active {
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.2); }
          header nav ul li a.active {
            cursor: default; }
    @media screen and (max-width: 860px) {
      header nav {
        display: none; } }

#teaser {
  width: 100%;
  text-align: center;
  position: absolute;
  font-size: 250%;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  z-index: 3;
  transform: translateY(-50%);
  top: 42%; }
  #teaser div {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    font-size: 130%;
    overflow: hidden; }
    #teaser div:first-of-type {
      font-size: 200%; }
      #teaser div:first-of-type span {
        display: inline-block;
        opacity: 0;
        transform: translateY(100%);
        animation: teaserFade 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    #teaser div:last-of-type span {
      opacity: 0;
      animation: teaserFade 0.5s 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
      display: inline-block; }
      #teaser div:last-of-type span:last-of-type {
        animation-delay: 1.5s; }
@keyframes teaserFade {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  100% {
    opacity: 1;
    transform: translateY(0%); } }
@keyframes teaserFade2 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  @media screen and (max-width: 1060px) {
    #teaser {
      font-size: 180%; } }
  @media screen and (max-width: 1060px) and (max-height: 760px) {
    #teaser {
      margin-top: 50px; } }

  @media screen and (max-width: 740px) {
    #teaser {
      font-size: 140%; } }
  @media screen and (max-width: 740px) and (max-height: 640px) {
    #teaser {
      margin-top: 50px; } }

#background {
  width: 100%;
  height: 95%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1; }
  #background > div {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1; }
    #background > div#octagonLayer {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      z-index: 1;
      background-image: linear-gradient(0deg, #3498db 25%, #2c3e50 100%), url(../img/poly_bg.jpg);
      background-size: cover;
      background-blend-mode: hard-light;
      opacity: 0.5; }
    #background > div.gradient#blue {
      background-image: linear-gradient(0deg, #3498db 25%, #2c3e50 100%); }
  #background #lights {
    position: absolute;
    pointer-events: none;
    z-index: 2; }

.contentWrapper {
  width: 100%;
  position: relative;
  z-index: 3;
  top: 130px;
  min-height: calc(100% - 130px);
  background-color: #181921;
  padding-bottom: 80px; }
  .withTeaser .contentWrapper {
    top: 95%;
    min-height: 5%; }
  .contentWrapper #transition {
    min-height: 70px;
    position: relative;
    background-image: linear-gradient(0deg, #181921 50%, transparent 50%);
    display: none; }
    .withTeaser .contentWrapper #transition {
      display: block; }
    .contentWrapper #transition svg {
      width: 120%;
      min-height: 70px;
      margin-left: -10%;
      fill: #181921;
      stroke: rgba(255, 255, 255, 0);
      stroke-width: 2px;
      margin-top: -50%;
      bottom: 50%;
      position: absolute; }
    .contentWrapper #transition:after {
      content: "";
      display: block;
      background-color: #181921;
      width: 100%;
      height: 20px;
      z-index: 20;
      position: absolute;
      bottom: 50%; }
  .contentWrapper h1 {
    margin: 0;
    padding-top: 50px;
    letter-spacing: 10px;
    font-size: 220%;
    position: relative;
    max-width: 100%;
    word-break: break-word; }
    @media screen and (max-width: 420px) {
      .contentWrapper h1 {
        letter-spacing: 0;
        text-align: center; } }
  .contentWrapper .section {
    width: 100%;
    position: relative;
    line-height: 60px;
    padding-bottom: 20px; }
    .contentWrapper .section p {
      line-height: initial; }
    .contentWrapper .section .centered {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      position: relative; }
      @media screen and (max-width: 1400px) {
        .contentWrapper .section .centered {
          padding-left: 10px;
          padding-right: 10px; } }
    .contentWrapper .section#intro {
      margin-top: -100px;
      z-index: 20; }
      .contentWrapper .section#intro .centered svg#benIntro {
        width: 220px;
        height: 220px;
        stroke: white;
        stroke-width: 4px;
        overflow: visible;
        position: absolute;
        top: -158px;
        left: 10px;
        animation: benAnimation 1s 5s ease-in-out forwards; }
@keyframes benAnimation {
  0% {
    stroke-width: 4px; }
  50% {
    stroke-width: 20px; }
  100% {
    stroke-width: 4px; } }
      .contentWrapper .section#intro .centered div {
        padding-left: 250px;
        line-height: initial; }
      @media screen and (max-width: 860px), screen and (max-height: 570px) {
        .contentWrapper .section#intro {
          margin-top: -70px; }
          .contentWrapper .section#intro .centered {
            position: relative; }
            .contentWrapper .section#intro .centered svg#benIntro {
              width: 150px;
              height: 150px;
              transform: translateX(-50%);
              left: 50%;
              top: -85px; }
            .contentWrapper .section#intro .centered div {
              padding: 10px;
              padding-top: 70px; } }
  @media screen and (max-width: 860px) and (max-height: 430px), screen and (max-height: 570px) and (max-height: 430px) {
    .contentWrapper .section#intro .centered svg#benIntro {
      width: 100px;
      height: 100px;
      top: -45px; } }

    .contentWrapper .section#news {
      background-color: #20212b; }
    .contentWrapper .section#games #kirmesTycoon .logo,
    .contentWrapper .section#games #funfairTycoon .logo {
      max-width: 90%;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%); }
    .contentWrapper .section#games #kirmesTycoon table,
    .contentWrapper .section#games #funfairTycoon table {
      width: 100%;
      display: block; }
      .contentWrapper .section#games #kirmesTycoon table tr td:first-of-type,
      .contentWrapper .section#games #funfairTycoon table tr td:first-of-type {
        vertical-align: top; }
      .contentWrapper .section#games #kirmesTycoon table tr td:last-of-type,
      .contentWrapper .section#games #funfairTycoon table tr td:last-of-type {
        opacity: 0.8;
        padding-left: 15px; }
      @media screen and (max-width: 400px) {
        .contentWrapper .section#games #kirmesTycoon table,
        .contentWrapper .section#games #funfairTycoon table {
          font-size: 80%; }
          .contentWrapper .section#games #kirmesTycoon table tr td:last-of-type,
          .contentWrapper .section#games #funfairTycoon table tr td:last-of-type {
            padding-left: 10px; } }
    .contentWrapper .section#games #kirmesTycoon .image,
    .contentWrapper .section#games #funfairTycoon .image {
      background-image: url(../img/kt-bg.png); }
    .contentWrapper .section#games #funfairTycoon .image {
      background-image: url(../img/ft-bg.jpg);
      background-position: center; }
    .contentWrapper .section#websites #geisterpalast .image {
      background-image: url(../img/geisterpalast.jpg);
      background-position: center; }
    .contentWrapper .section#websites #flipfly .image {
      background-image: url(../img/flipfly.jpg);
      background-position: bottom; }
    .contentWrapper .section#websites #artec .image {
      background-image: url(../img/artec.jpg);
      background-position: top left; }
    .contentWrapper .section#contact img {
      width: 18px; }
  .contentWrapper footer {
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 25px;
    padding-bottom: 10px;
    font-size: 70%;
    line-height: 32px;
    position: absolute;
    bottom: 0; }
    .contentWrapper footer div.centered {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      display: flex; }
      @media screen and (max-width: 1400px) {
        .contentWrapper footer div.centered {
          padding-left: 10px;
          padding-right: 10px; } }
      .contentWrapper footer div.centered a, .contentWrapper footer div.centered span {
        margin-right: 15px; }
      .contentWrapper footer div.centered #social {
        flex: 1; }
        .contentWrapper footer div.centered #social a {
          border: solid 1px transparent;
          padding-bottom: 0;
          opacity: 0.7;
          display: inline-block;
          width: 34px;
          height: 34px; }
          .contentWrapper footer div.centered #social a:hover {
            opacity: 1; }
          .contentWrapper footer div.centered #social a:active {
            border: solid 1px #ffffff; }
      .contentWrapper footer div.centered #legal {
        flex: 1;
        text-align: right;
        opacity: 0.4; }
      @media screen and (max-width: 860px) {
        .contentWrapper footer div.centered #legal {
          padding-right: 10px; }
          .contentWrapper footer div.centered #legal a {
            display: none; }
          .contentWrapper footer div.centered #legal span {
            white-space: nowrap; } }
  .contentWrapper .presentationItem {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap; }
    .contentWrapper .presentationItem .facts {
      flex: 1;
      width: 40%;
      min-width: 400px;
      padding: 20px;
      padding-top: 10px;
      font-size: 80%;
      position: relative;
      margin: 0 auto;
      z-index: 2;
      background-color: rgba(255, 255, 255, 0.1); }
      @media screen and (max-width: 840px) {
        .contentWrapper .presentationItem .facts {
          order: 2;
          min-width: 300px; } }
      .contentWrapper .presentationItem .facts:after {
        content: "";
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        position: absolute;
        top: 0;
        padding: 20px;
        left: -20px;
        transform: skewY(-5deg); }
    .contentWrapper .presentationItem .image {
      width: 60%;
      min-height: 400px;
      z-index: 1;
      position: relative;
      margin: 0 auto;
      background-size: cover; }
      @media screen and (max-width: 1040px) {
        .contentWrapper .presentationItem .image {
          width: 50%; } }
      @media screen and (max-width: 840px) {
        .contentWrapper .presentationItem .image {
          width: 100%;
          order: 1; } }
    .contentWrapper .presentationItem .cta {
      flex: 1;
      width: 40%;
      min-width: 400px;
      padding: 20px;
      min-height: 150px;
      position: relative;
      margin: 0 auto;
      background-color: rgba(255, 255, 255, 0.05);
      white-space: nowrap; }
      @media screen and (max-width: 840px) {
        .contentWrapper .presentationItem .cta {
          order: 4;
          min-width: 300px; } }
      .contentWrapper .presentationItem .cta a {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%); }
    .contentWrapper .presentationItem .backgroundStory {
      width: 60%;
      background-color: rgba(255, 255, 255, 0.03);
      padding: 20px;
      z-index: 1;
      font-size: 80%;
      margin: 0 auto; }
      @media screen and (max-width: 840px) {
        .contentWrapper .presentationItem .backgroundStory {
          order: 3; } }
      @media screen and (max-width: 1040px) {
        .contentWrapper .presentationItem .backgroundStory {
          width: 50%; } }
      @media screen and (max-width: 840px) {
        .contentWrapper .presentationItem .backgroundStory {
          width: 100%; } }
      .contentWrapper .presentationItem .backgroundStory p {
        line-height: 26px; }

/*# sourceMappingURL=main.css.map */