@import url("https://fonts.googleapis.com/css?family=Lato:300");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

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

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center; }

h2 {
  line-height: 120%;
  font-size: 40px;
  color: #d50b0b;
  text-transform: uppercase; }
  @media screen and (max-width: 650px) {
    h2 {
      font-size: 36px; } }
  h2 + p {
    margin-top: 50px; }

p {
  line-height: 34px;
  font-size: 20px;
  color: black; }
  @media screen and (max-width: 650px) {
    p {
      font-size: 16px; } }
  p + h2 {
    margin-top: 32px; }

.red-color {
  color: #d50b0b; }

body {
  background-image: url("/images/body-background.jpg");
  background-repeat: repeat;
  background-position: center top; }

.container {
  display: block;
  width: 100%;
  height: auto; }

header, main, footer {
  width: 100%;
  font-family: 'Lato', sans-serif; }
  header .x-container, main .x-container, footer .x-container {
    position: relative;
    display: block;
    margin: 0 auto; }

header {
  position: fixed;
  height: 152px;
  left: 0;
  top: 0;
  background-image: url("/images/header-background.png");
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 0.9;
  z-index: 1; }
  header .x-container {
    width: 1140px;
    line-height: 100px; }
    @media screen and (max-width: 1140px) {
      header .x-container {
        width: 100%; } }
  header .logo {
    display: inline-block;
    width: 110px;
    height: 45px;
    margin-right: 52px;
    background-image: url("/images/logo.png?1");
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    vertical-align: middle; }
    header .logo h1, header .logo a {
      display: block;
      width: 100%;
      height: 100%; }
    header .logo a {
      text-indent: -1000px; }
    @media screen and (max-width: 580px) {
      header .logo {
        margin-right: 0; } }
  header nav {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 205px); }
    header nav ul {
      line-height: 36px; }
      header nav ul li {
        display: inline-block;
        margin: 0 9px; }
        header nav ul li a {
          color: #000;
          text-transform: uppercase;
          text-decoration: none;
          -moz-transition: color 0.2s ease;
          -o-transition: color 0.2s ease;
          -webkit-transition: color 0.2s ease;
          transition: color 0.2s ease; }
          header nav ul li a:hover {
            color: #d50b0b; }
        @media screen and (max-width: 1130px) {
          header nav ul li {
            margin: 0 12px; } }
    @media screen and (max-width: 580px) {
      header nav {
        display: none; } }

main {
  margin-top: 152px; }
  main section {
    padding: 0 10px; }
  main a {
    color: #d50b0b;
    text-decoration: none;
    text-transform: uppercase;
    -moz-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease; }
    main a:hover {
      color: #000; }
  main .what-is-the-koan-platform {
    height: 502px;
    padding-top: 125px;
    background-image: url("/images/what-is-the-koan-platform-background.png");
    background-repeat: no-repeat;
    background-position: center top; }
    @media screen and (max-width: 500px) {
      main .what-is-the-koan-platform {
        padding-top: 100px; } }
    @media screen and (max-width: 400px) {
      main .what-is-the-koan-platform {
        padding-top: 60px; } }
  main .white-label-advantages {
    height: 982px;
    padding-top: 300px;
    background-image: url("/images/white-label-advantages-background.png");
    background-repeat: no-repeat;
    background-position: center top; }
    main .white-label-advantages h2, main .white-label-advantages p, main .white-label-advantages ul li {
      color: #fff; }
    main .white-label-advantages .suitable-list {
      width: 960px;
      margin: 85px auto 0;
      padding-left: 230px; }
      main .white-label-advantages .suitable-list p {
        text-transform: uppercase; }
      main .white-label-advantages .suitable-list p, main .white-label-advantages .suitable-list ul li {
        text-align: left; }
      main .white-label-advantages .suitable-list ul {
        padding-left: 55px;
        list-style-type: disc; }
        main .white-label-advantages .suitable-list ul li {
          font-size: 20px;
          line-height: 170%; }
          @media screen and (max-width: 650px) {
            main .white-label-advantages .suitable-list ul li {
              font-size: 16px; } }
      @media screen and (max-width: 960px) {
        main .white-label-advantages .suitable-list {
          width: auto;
          padding-left: 50px; } }
    @media screen and (max-width: 500px) {
      main .white-label-advantages .suitable-list {
        margin-top: 50px;
        padding-left: 20px; } }
    @media screen and (max-width: 400px) {
      main .white-label-advantages {
        padding-top: 250px; } }
  main .who-we-are {
    height: 506px;
    padding-top: 100px;
    background-image: url("/images/who-we-are-background.png");
    background-repeat: no-repeat;
    background-position: center top; }
  main .running-engine {
    height: 698px;
    padding-top: 134px;
    background-image: url("/images/running-engine-background.png");
    background-repeat: no-repeat;
    background-position: center top; }
    main .running-engine h2 + p {
      margin-top: 64px; }
    main .running-engine .project-logos {
      position: relative;
      height: 84px;
      margin-top: 70px;
      margin-bottom: 67px; }
      main .running-engine .project-logos .project-logo {
        position: absolute;
        top: 0;
        height: 84px;
        background-position: left top;
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        -moz-transition: filter 0.3s ease;
        -o-transition: filter 0.3s ease;
        -webkit-transition: filter 0.3s ease;
        transition: filter 0.3s ease; }
        main .running-engine .project-logos .project-logo:hover {
          -webkit-filter: grayscale(0);
          filter: grayscale(0); }
        main .running-engine .project-logos .project-logo a {
          display: block;
          height: 100%;
          width: 100%;
          text-indent: -1000px;
          overflow: hidden; }
      main .running-engine .project-logos .hello-website {
        width: 139px;
        left: calc(50% - 332px);
        background-image: url("/images/projects/hello-website.png"); }
      main .running-engine .project-logos .domdom {
        width: 83px;
        left: calc(50% - 36px);
        background-image: url("/images/projects/domdom.png"); }
      main .running-engine .project-logos .stemotion {
        width: 315px;
        left: calc(50% + 156px);
        background-image: url("/images/projects/stemotion.png"); }
      @media screen and (max-width: 950px) {
        main .running-engine .project-logos {
          height: 200px; }
          main .running-engine .project-logos .hello-website {
            left: calc(50% - 170px); }
          main .running-engine .project-logos .domdom {
            left: calc(50% + 90px); }
          main .running-engine .project-logos .stemotion {
            left: calc(50% - 156px);
            top: 110px; } }
      @media screen and (max-width: 500px) {
        main .running-engine .project-logos .hello-website {
          left: calc(50% - 120px); }
        main .running-engine .project-logos .domdom {
          left: calc(50% + 40px); } }
  main .contact {
    height: 705px;
    padding-top: 235px;
    background-image: url("/images/contact-background.png");
    background-repeat: no-repeat;
    background-position: center bottom; }
    main .contact h2, main .contact p {
      color: #fff; }
    main .contact .email {
      text-transform: uppercase; }
    main .contact .copyright {
      position: absolute;
      left: calc(50% - 72px);
      bottom: 66px;
      font-size: 16px;
      color: #fff; }