html {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
    font-size: 62.5%;
  }

  /* Particle */
  #particles-js {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    z-index: 0;
  }

  *, 
  *:before, 
  *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 0;
    font-size: 10px;
    overflow-x: hidden;
    background-color: #1a1b1c;
  }

  header {
    padding: 0.8rem 1.6rem;
    display: flex;
    flex: 1 1 auto;
    z-index: 3;
    position: relative;
    border-top: 3px solid;
    justify-content: center;
    /* border-image: linear-gradient(45deg,  #FA6A09, #FCC509) 1; */
  }

  h1 {
    color: #fff;
    font-size: 3.6rem;
    line-height: 1.1em;
  }

@media only screen and (max-width: 480px) {
    h1 {
      font-size: 2.4rem;
    }

  }

  p {
    color: #aaa;
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  .hero {
    display: flex;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-top: -9.9rem;
    margin-bottom: 6.4rem;
  }

  @media only screen and (max-width: 600px) {
    .hero {
      margin-top: -7.2rem;
    }
  }

  .hero h1 {
    color: #fff;
    font-size: 6.4rem;
    padding: 0 1.6rem;
    margin-bottom: 0.8rem;
  }

  .hero p {
    margin-bottom: 3.2rem;
    font-size: 1.8rem;
    padding: 0 1.6rem;
  }

  @media only screen and (max-width: 600px) {
    .hero h1 {
      font-size: 4.8rem;
    }

    .hero p {
      font-size: 1.6rem;
    }
  }

@media only screen and (max-width: 480px) {
    .hero h1 {
      font-size: 3.2rem;
    }

  }

  .hero > * {
    max-width: 80rem;
    position: relative;
    z-index: 3;
  }

  .hero .btn-primary:link,
  .hero .btn-primary:visited,
  .btn-primary,
  .hero .btn-primary {
    transition: background 0.3s fade;
    display: inline-block;
    padding: 1rem 2.8rem;
    font-size: 1.4rem;
    background:  #fcc700;
    border: 2px solid #fcc700;
    border-radius: 32px;
    cursor: pointer;
    margin: 1.6rem 0.8rem;
    box-sizing: border-box;
    text-decoration: none;
    color: #1a1b1c;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: bold;
  }

  .hero .btn-primary:hover,
  .hero .btn-primary:active,
  .btn-primary:hover,
  .btn-primary:active {
    color: #1a1b1c;
    text-decoration: none;
    border: 2px solid #f5af19;
    background: linear-gradient(45deg,  #fcc700, #f5af19);
  }

  .hero .btn-secondary {
    transition: all 0.3s ease-out;
    display: inline-block;
    padding: 1rem 2.8rem;
    border: 2px solid;
    font-size: 1.4rem;
    cursor: pointer;
    margin: 1.6rem 0.8rem;
    box-sizing: border-box;
    border-radius: 32px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: bold;
  }

  .hero .btn-secondary:hover,
  .hero .btn-secondary:active {
    background-color: #fff;
    color: #000;
    border: 2px solid #fff;
  }

  .hero a:link,
  .hero a:visited {
    color: #fff;
    text-decoration: none;
  }




  /* Stats */
  .stats-box {
    box-shadow: 0px 20px 50px rgba(0,0,0,20%);
    display: flex;
    max-width: 1170px;
    margin: 0 auto 6.4rem auto;
    flex: 1 1 auto;
    padding: 1.6rem;
    border-radius: 0.8rem;
  }

  @media only screen and (max-width: 600px) {
    .stats-box {
      flex-direction: column;
    }

    .logo {
      width: 20rem;
      height: auto;
    }
  }

  .stat {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem;
  }

  .stat h3 {
    color: #fff;
    font-size: 2.4rem;
  }




  /* Projects */

  /* Web */
  .web-showcase {
    max-width: 160rem;
    margin: 0 auto 6.4rem auto;
    display: flex;
  }

  .web-showcase > div:first-child {
    width: 70%;
    display: flex;
    align-items: flex-end;
  }

  .web-showcase > div:last-child {
    width: 30%;
    display: flex;
    align-items: flex-start;
  }

  .web-showcase.project2 > div:last-child {
    width: 70%;
    display: flex;
    align-items: flex-end;
  }

  .web-showcase.project2 > div:first-child {
    width: 30%;
    display: flex;
    align-items: flex-end;
  }

  .web-showcase.project2 > div:first-child p {
    text-align: right;
  }

  /* App */
  .app-showcase {
    max-width: 960px;
    margin: 0 auto 6.4rem auto;
    display: flex;
  }

  .app-showcase > div:first-child {
    width: 50%;
    display: flex;
    align-items: flex-end;
    text-align: right;
  }

  .app-showcase > div:last-child {
    width: 50%;
    display: flex;
    justify-content: flex-start;
  }

  .app-showcase.project4 > div:last-child {
    width: 50%;
    display: flex;
    justify-content: center;
  }

  .app-showcase .showcase-text img {
    height: 5rem;
    margin: 0.8rem 0.4rem;
    width: auto;
    display: inline-block;
  }

  .app-showcase .showcase-text .app-store-links {
    display: flex;
    flex-direction: row;
  }

  .showcase-img img {
    max-width: 100%;
    height: auto;
  }

  .app-showcase .showcase-img img {
    max-width: 100%;
    width: 48rem;
    height: auto;
  }

  .showcase-text {
    justify-content: center;
    flex-direction: column;
  }

@media (max-width: 480px) {
	.hero .btn-primary, 
	.hero .btn-secondary {
		margin: 0.8rem 0.8rem !important;
		padding: 1rem 2rem;
		width: 80%;
	}
}

  /* Footer */
  footer {
    border-top: 3px solid rgb(44,62,80);
    padding: 3.2rem;
    font-size: 1.6rem;
    text-align: center;
  }

  footer p {
    color: #ccc;
  }

  footer span {
    font-weight: bold;
    color: #fff;
  }

  footer a:link,
  footer a:visited {
    color: #fff;
    text-decoration: underline;
  }

  footer a:hover,
  footer a:active {
    color: #fff;
    text-decoration: none;
  }

  h2 {
    text-align: center;
    color: #fff;
    font-size: 4.8rem;
    padding: 1.6rem 0;
  }
	
	@media only screen and (max-width: 480px) {
	h2 {
		font-size: 2.8rem;
	}
	}

  #imprint {
    display:  none;
    max-width:  80rem;
    color: #aaa;
    margin:  3.2rem auto;
    text-align: left;
  }

  #imprint h2 {
    font-size: 3rem;
  }

  #imprint.show {
    display: block;
  }

  #imprint strong, h3, h4 {
    color: #fff;
    font-weight:  bold;
  }

  #imprint h3, h4 {
    line-height: 1.2;
  }

  #imprint li {
    color: #ccc;
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-left: 1.6rem;
  }

  #imprint p {
    margin-bottom: 1.6rem;
  }

  #imprint table {
    border-spacing: 0px;
  }

  #imprint table td {
    border:  1px solid #555;
    text-align: left;
    padding: 0.4rem;
  }

  @media only screen and (min-width: 769px) and (max-width: 1024px) {
    section {
      padding: 0 3.2rem;
    }
  }

  @media only screen and (max-width: 768px) {


    #imprint table {
      max-width: 100%;
    }

    #imprint table td {
        display: block;
    }

    .app-showcase,
    .web-showcase {
      flex-direction: column;
    }

    .app-showcase > div:first-child,
    .web-showcase > div:first-child,
    .web-showcase.project2 > div:first-child,
    .app-showcase.project4 > div:first-child  {
      width: 48rem;
      max-width: 100%;
      margin: 0 auto;
      align-items: center;
      padding: 0 1.6rem;
      text-align: center;
    }

    .app-showcase > div:last-child,
    .web-showcase > div:last-child,
    .web-showcase.project2 > div:last-child,
    .app-showcase.project4 > div:last-child  {
      width: 48rem;
      max-width: 100%;
      margin: 0 auto;
      align-items: center;
      text-align: center;
      padding: 0 1.6rem;
    }

    .web-showcase.project2 > div:first-child p {
      text-align: center;
    }

    .web-showcase.project2,
    .app-showcase.project3 {
      flex-direction: column-reverse;
    }
  }

  @font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.woff2');
    font-weight: normal;
    font-style: normal;
  }
  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
  /*
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.svg?1382051#fontello') format('svg');
    }
  }
  */
  [class^="icon-"]:before, 
  [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: never;
  
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
  
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
  
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
  
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
  
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
  
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
  
  .icon-user:before { content: '\e800'; } /* '' */
  .icon-chart-bar:before { content: '\e801'; } /* '' */
  .icon-doc:before { content: '\e802'; } /* '' */
  .icon-check:before { content: '\e803'; } /* '' */
  .icon-docs:before { content: '\f0c5'; } /* '' */
  .icon-coffee:before { content: '\f0f4'; } /* '' */
  .icon-doc-text:before { content: '\f0f6'; } /* '' */
  .icon-doc-inv:before { content: '\f15b'; } /* '' */
  .icon-doc-text-inv:before { content: '\f15c'; } /* '' */
  .icon-calendar-check-o:before { content: '\f274'; } /* '' */