/* ===== IMPORTING FONTS ===== */
@font-face {
  font-family: 'Gotham SSm';
  src: url("../FONTS/GothamSSm-Bold.woff2.html") format("woff2"), url("../FONTS/GothamSSm-Bold.woff") format("woff"), url("../FONTS/GothamSSm-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }
@font-face {
  font-family: 'Gotham SSm';
  src: url("../FONTS/GothamSSm-Book.woff2.html") format("woff2"), url("../FONTS/GothamSSm-Book.woff") format("woff"), url("../FONTS/GothamSSm-Book.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Gotham SSm';
  src: url("../FONTS/GothamSSm-Light.woff2.html") format("woff2"), url("../FONTS/GothamSSm-Light.woff") format("woff"), url("../FONTS/GothamSSm-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }
/* ===== SASS VARIABLES ===== */
/* MEDIA BREAKPOINTS */
/* FONTS */
/* COLOURS */
/* Brand colours */
/* ANIMATION */
/* ===== DEFAULT STYLES ===== */
/* BODY */
html, body {
  padding: 0;
  margin: 0; }

/* HEADER */
@keyframes header-show {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% - 120px);
  height: 40px;
  padding: 20px 60px;
  background: white;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  transition: background cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; }
  @media screen and (max-width: 769px) {
    header {
      width: calc(100% - 80px);
      padding: 20px 40px; } }
  @media screen and (max-width: 569px) {
    header {
      width: calc(100% - 50px);
      padding: 15px 25px; } }
  header .logo {
    display: inline-block;
    position: relative;
    width: 180px;
    height: 100%; }
    header .logo img {
      width: auto;
      height: 40px; }
  header nav {
    display: block;
    position: relative;
    float: right;
    text-align: right;
    width: calc(100% - 180px); }
    header nav a {
      display: inline-block;
      position: relative;
      padding: 0 15px;
      margin-left: 5px;
      color: #666666;
      font-size: 16px;
      line-height: 40px;
      font-weight: 300; }
      header nav a:hover, header nav a.active {
        color: #25B47B; }
    @media screen and (max-width: 769px) {
      header nav {
        position: absolute;
        top: 80px;
        left: 100%;
        width: auto;
        height: auto;
        padding: 0px 25px 10px;
        background: white;
        transform: translateX(0);
        transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.5s, background cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; }
        header nav.show {
          transform: translateX(-100%); }
        header nav a {
          display: block;
          padding: 2px 15px; } }
    @media screen and (max-width: 569px) {
      header nav {
        top: 70px; } }
  header .burger {
    display: none;
    position: relative;
    float: right;
    width: 30px;
    height: 22px;
    margin: 9px 0;
    cursor: pointer; }
    header .burger span {
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 3px;
      background: #666666;
      border-radius: 1.5px;
      transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.3s, background ease 0.2s; }
      header .burger span:first-of-type {
        top: 0;
        transform: translateY(0); }
      header .burger span:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%); }
      header .burger span:last-of-type {
        bottom: 0;
        transform: translateY(0); }
    header .burger:hover span {
      background: #25B47B; }
    header .burger.open span {
      background: #25B47B; }
      header .burger.open span:first-of-type {
        transform: translateY(10px); }
      header .burger.open span:last-of-type {
        transform: translateY(-9px); }
    @media screen and (max-width: 769px) {
      header .burger {
        display: block; } }
  header.show {
    animation: header-show 1.2s cubic-bezier(0.77, 0, 0.175, 1) 1 forwards; }
  header.down {
    background: #f6f7f7; }
    @media screen and (max-width: 769px) {
      header.down nav {
        background: #f6f7f7; } }

/* FOOTER */
footer .upper-footer {
  max-width: none;
  margin: 0;
  background: #2c3038; }
  footer .upper-footer .logo {
    display: block;
    position: relative; }
    footer .upper-footer .logo img {
      width: auto;
      height: 40px; }
  footer .upper-footer .content {
    display: block;
    position: relative; }
    footer .upper-footer .content .about {
      display: inline-block;
      position: relative;
      width: 25%;
      min-width: 280px;
      margin-right: 80px;
      vertical-align: top; }
      footer .upper-footer .content .about * {
        color: white; }
    footer .upper-footer .content .links {
      display: inline-block;
      position: relative;
      width: auto;
      vertical-align: top; }
footer .lower-footer {
  max-width: none;
  margin: 0;
  background: #21242c;
  padding: 25px 0; }
  footer .lower-footer .left {
    display: inline-block;
    position: relative; }
  footer .lower-footer .right {
    display: block;
    position: relative;
    float: right; }

/* REVEAL */
.reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition-property: opacity, visibility, transform;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  .reveal.revealed {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px); }

/* ===== TEXT STYLES ===== */
/* HEADING STYLES */
h1, h2, h3, h4, h5, h6, p, li, label, a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Gotham SSm", arial, sans-serif; }

h1 {
  font-size: 47px;
  line-height: 54px;
  font-weight: 300;
  margin-top: 10px;
  margin-bottom: 15px;
  color: #666666; }
  @media screen and (max-width: 769px) {
    h1 {
      font-size: 40px;
      line-height: 47px; } }

h2 {
  font-size: 40px;
  line-height: 50px;
  font-weight: 300;
  margin-top: 20px;
  margin-bottom: 30px;
  color: #25B47B; }
  @media screen and (max-width: 769px) {
    h2 {
      font-size: 34px;
      line-height: 42px; } }

h3 {
  font-size: 40px;
  line-height: 43px;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 15px; }
  @media screen and (max-width: 769px) {
    h3 {
      font-size: 34px;
      line-height: 39px; } }

h4 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 300;
  margin-top: 18px;
  margin-bottom: 12px;
  color: #25B47B; }

h5 {
  font-size: 16px;
  line-height: 20px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #25B47B; }

h6 {
  font-size: 14px;
  line-height: 17px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 12px;
  color: #666666; }

/* NORMAL STYLES */
p, li, label {
  color: #666666;
  font-size: 16px;
  line-height: 27px;
  font-weight: 300; }
  p strong, p b, li strong, li b, label strong, label b {
    font-weight: bold; }
  p a, li a, label a {
    color: #25B47B;
    border-bottom: 1px solid rgba(37, 180, 123, 0);
    transition: border-bottom ease .15s; }
    p a:hover, li a:hover, label a:hover {
      border-bottom: 1px solid #25b47b; }

p {
  margin-top: 15px;
  margin-bottom: 15px; }
  p.center {
    text-align: center; }
  p.small {
    font-size: 12px;
    line-height: 20px; }

li {
  margin-top: 10px; }

a {
  text-decoration: none; }

/* CODE STYLES */
pre, code {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  color: #666666;
  font-size: 14px; }

code {
  padding: 2px 4px;
  line-height: 27px;
  background: #fbfcfc; }

pre {
  display: block;
  position: relative;
  width: calc(100% - 30px);
  height: auto;
  padding: 10px 15px;
  line-height: 24px;
  overflow-x: auto;
  background: #fbfcfc; }
  pre code {
    max-width: 100%;
    padding: 0; }

/* ===== COMPONENTS ===== */
/* SECTIONS */
section {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 1500px;
  padding: 100px 0;
  margin: 0 auto;
  /* Wide section with light bg */
  /* Wide section with image bg */
  /* Wide section with gradient bg */ }
  @media screen and (max-width: 1025px) {
    section {
      padding: 80px 0; } }
  @media screen and (max-width: 769px) {
    section {
      padding: 60px 0; } }
  @media screen and (max-width: 569px) {
    section {
      padding: 40px 0; } }
  section .section-inner {
    display: block;
    position: relative;
    width: calc(100% - 100px);
    margin: 80px 0;
    padding: 80px 50px;
    background: white;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); }
    @media screen and (max-width: 1025px) {
      section .section-inner {
        width: calc(100% - 80px);
        margin: 60px 0;
        padding: 60px 40px; } }
    @media screen and (max-width: 769px) {
      section .section-inner {
        margin: 40px 0;
        padding: 40px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); } }
  section.has-bg {
    background: #fbfcfc;
    max-width: 100%; }
  section.has-image-bg {
    background-image: url("../IMG/section-bg.png");
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%; }
    section.has-image-bg.image-bg-2 {
      background-image: url("../IMG/section-bg-2.png"); }
  section.cta {
    background: #25B47B;
    max-width: 100%; }
    section.cta h2 {
      color: white;
      margin-top: 0;
      margin-bottom: 20px; }

/* ARTICLES */
article {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 650px;
  margin: 0 auto 60px; }
  article:last-of-type {
    margin-bottom: 0; }
  article.center-headers h2 {
    margin-top: 0;
    padding-top: 20px; }

/* WRAPPERS */
.wrapper {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-width: 1300px;
  padding: 0 60px;
  margin: 0 auto; }
  @media screen and (max-width: 769px) {
    .wrapper {
      padding: 0 40px; } }
  @media screen and (max-width: 569px) {
    .wrapper {
      padding: 0 25px; } }

/* BUTTONS */
.btn {
  display: inline-block;
  position: relative;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 21px;
  overflow: hidden;
  /* Light style */ }
  .btn.white {
    background: white;
    border: 2px solid white;
    color: #25B47B;
    z-index: 2;
    transition: color cubic-bezier(0.77, 0, 0.175, 1) 0.3s, background ease 0.5s; }
    .btn.white span {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: white;
      z-index: -1;
      transform: translateX(0%);
      transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.3s; }
    .btn.white:hover {
      background: transparent;
      color: white;
      transition: color cubic-bezier(0.77, 0, 0.175, 1) 0.3s, background 0s; }
      .btn.white:hover span {
        transform: translateX(100%); }

/* ===== CONTENT ===== */
/* HOME PAGE */
/* Top banner */
.header-banner {
  display: block;
  position: relative;
  width: 100%;
  height: 700px;
  margin-top: 80px;
  background: white;
  overflow: hidden; }
  @media screen and (max-width: 1301px) {
    .header-banner {
      height: 650px; } }
  @media screen and (max-width: 1025px) {
    .header-banner {
      height: 580px; } }
  @media screen and (max-width: 769px) {
    .header-banner {
      height: 460px; } }
  @media screen and (max-width: 569px) {
    .header-banner {
      height: 380px; } }
  .header-banner .line-anim {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%); }
    @media screen and (max-width: 769px) {
      .header-banner .line-anim {
        top: auto;
        bottom: 0;
        transform: none; } }
@keyframes splash-show {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px); }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px); } }
  .header-banner .splash {
    display: block;
    position: absolute;
    top: 60px;
    left: 140px;
    width: auto;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
    animation: splash-show 1.5s 2.4s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards; }
    @media screen and (max-width: 1025px) {
      .header-banner .splash {
        top: 40px;
        left: 90px; } }
    @media screen and (max-width: 769px) {
      .header-banner .splash {
        top: 20px;
        left: 40px; } }
    @media screen and (max-width: 569px) {
      .header-banner .splash {
        top: 10px;
        left: 25px; } }

/* Projects using GPflow */
.projects .slider {
  display: block;
  position: relative; }
  .projects .slider .project {
    background: white;
    height: auto;
    padding: 25px 20px;
    margin: 15px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); }
    .projects .slider .project h5 {
      margin-top: 0; }
    .projects .slider .project p:last-of-type {
      margin-bottom: 0; }
  .projects .slider .slider-btn {
    display: inline-block;
    position: absolute;
    width: 35px;
    height: 35px;
    top: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    background: white;
    color: #25B47B;
    border-radius: 50%;
    font-size: 20px;
    line-height: 35px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow cubic-bezier(0.77, 0, 0.175, 1) 0.2s; }
    .projects .slider .slider-btn:hover {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.15); }
    .projects .slider .slider-btn.prev {
      left: -40px; }
    .projects .slider .slider-btn.next {
      right: -40px; }
  .projects .slider .slick-dots {
    display: block;
    position: relative;
    list-style: none;
    padding: 0;
    text-align: center; }
    .projects .slider .slick-dots li {
      display: inline-block;
      position: relative;
      width: 20px;
      height: 20px;
      margin: 0 3px;
      padding: 0;
      cursor: pointer; }
      .projects .slider .slick-dots li button {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0;
        line-height: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        padding: 0;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: 0;
        background: rgba(102, 102, 102, 0.2);
        transition: background cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s; }
      .projects .slider .slick-dots li:hover button {
        background: rgba(102, 102, 102, 0.5); }
      .projects .slider .slick-dots li.slick-active button {
        background: #25b47b; }

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