@charset "UTF-8";
@font-face {
  font-family: Oswald;
  src: url("../fonts/Oswald.ttf");
}
@font-face {
  font-family: Monteserrat-Regular;
  src: url("../fonts/Montserrat-Regular.ttf");
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  min-height: 100%;
  position: relative;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  scroll-behavior: smooth; /* No support in IE */
}

body {
  font: 19px/1.6 "Open Sans", Ubuntu, "Nimbus Sans L", Avenir, AvenirNext, "Segoe UI", Helvetica, Arial, sans-serif;
  margin-bottom: 50px;
  color: #222;
}

body.no-bottom-margin {
  margin-bottom: 0px;
  /*background-color: #130d1e;*/
}

/*  ----- Landing page css ----- */
div#landing-page h1, h2, h3 {
  font-family: Oswald;
}

div#landing-page p {
  font-family: Monteserrat-Regular;
  font-size: calc(14px + 0.2vw);
}

.boxed-container {
  max-width: 1920px;
  margin: 0 auto;
  box-shadow: 0 20px 48px rgba(22, 30, 42, 0.16);
}

.body-wrap {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

div.padded-text {
  padding: 12% 15%;
}

.padded-text > h2 {
  font-size: 1.5em;
  font-weight: 800;
  text-transform: uppercase;
}

.padded-text > p {
  padding-top: 1em;
}

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 375px) {
  body {
    font-size: 0.8em;
  }
  div.padded-text {
    padding: 12% 5%;
  }
}
/*  ----- Site Menu ----- */
nav#default-menu {
  padding-bottom: 100px;
  background-image: url(../img/assets/top_menu_cut.png);
  background-repeat: no-repeat;
  background-position: top right;
  /*background-size: 100%;*/
  z-index: 1;
  font-family: Monteserrat-Regular;
}

@media screen and (max-width: 800px) {
  nav li {
    display: block;
  }
}
nav a {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 1.3em;
  color: #2c2c2c;
  transition: color 0.3s ease;
}

nav a:hover {
  color: cadetblue;
}

nav ul {
  float: right;
  padding-right: 2em;
  padding-top: 1em;
}

nav li {
  list-style: none;
  display: inline-block;
  padding: 1em;
}

/*  ----- Burger Menu ----- */
nav#burger-menu {
  display: none;
  position: fixed;
  z-index: 20;
}

nav#burger-menu a {
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

nav#burger-menu a:hover {
  color: tomato;
}

#menuToggle {
  display: block;
  position: relative;
  top: 30px;
  left: 30px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul {
  transform: none;
}

@media screen and (max-width: 850px) {
  nav#burger-menu {
    display: inherit;
  }
  nav#default-menu {
    display: none;
  }
  nav {
    background-image: none;
  }
}
/*  ----- Hero ----- */
section#hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding-top: 4em;
  padding-bottom: 4em;
}

div#hero-text {
  display: grid;
  grid-template-columns: 20% 80%;
  font-size: calc(16px + 0.3vw);
}

#text-box img#title-text {
  max-width: 100%;
}

#left-green-blob {
  background-image: url(../img/assets/left_yellow_blob.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 70%;
}

div#text-box {
  padding-left: 1em;
}

div#text-box img {
  display: block;
  max-width: 300px;
  margin: 0 auto;
}

h1.hero {
  font-size: calc(28px + 2.5vw);
  font-weight: 700;
  text-transform: uppercase;
  padding-top: 10px;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  #left-green-blob {
    display: none;
  }
  h1.hero {
    padding-top: 0.9em;
    padding-bottom: 0.5em;
  }
  div#hero-text {
    grid-template-columns: 1fr;
  }
  section#hero {
    padding-top: 1em;
    display: block;
  }
}
@media screen and (max-width: 816px) {
  img#city-img {
    display: none;
  }
}
/*  ----- Projects ----- */
section#projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 50%));
}

@media screen and (max-width: 850px) {
  section#projects {
    grid-template-columns: 1fr;
  }
}
section#projects > div {
  object-fit: contain;
}

div#first-project {
  min-height: 450px;
  background-image: url(../img/assets/right_white_blob.png);
  background-repeat: no-repeat;
  background-position: right;
}

div.project-img {
  transition: opacity 0.5s ease-in-out;
  position: relative;
}

div.project-img:hover {
  cursor: pointer;
  opacity: 0.7;
}

img#first-proj-img {
  image-mask: url(../img/assets/first_mask_1.png);
  mask-size: cover;
  -webkit-mask-image: url(../img/assets/first_mask_1.png);
  -webkit-mask-size: cover;
}

img#yellow-side-blob {
  position: absolute;
  top: 40%;
  width: 26%;
  height: auto;
}

img#second-proj-img {
  mask-image: url(../img/assets/right_mask.png);
  mask-size: cover;
  mask-position: right;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url(../img/assets/right_mask.png);
  -webkit-mask-size: cover;
  -webkit-mask-position: right;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  margin-left: 10%;
}

img#green-side-blob {
  position: absolute;
  top: 58%;
  right: 0;
  width: 23%;
  height: auto;
}

img#third-proj-img {
  mask-image: url(../img/assets/second_mask.png);
  mask-size: cover;
  -webkit-mask-image: url(../img/assets/second_mask.png);
  -webkit-mask-size: cover;
}

img#violet-blob {
  position: absolute;
  top: 80%;
  left: 44%;
  width: 25%;
  height: auto;
}

@media screen and (width: 1366px) {
  img#yellow-side-blob {
    top: 34%;
  }
  img#violet-blob {
    top: 59%;
  }
}
/*  ----- Contact Form ----- */
section#contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 2em;
  padding-bottom: 3em;
}

form#contact-form {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  padding-top: 5%;
  padding-right: 20%;
  padding-left: 10%;
}

@media screen and (max-width: 850px) {
  section#contacts {
    grid-template-columns: 1fr;
    padding: 0;
  }
  form#contact-form {
    padding: 1em;
  }
}
#contact-form input, #contact-form textarea {
  background-color: #268ba4;
  background: linear-gradient(45deg, rgb(38, 139, 164) 0%, rgb(44, 84, 158) 100%);
  margin-top: 3%;
  width: 100%;
  border-radius: 25px;
  padding-left: 20px;
  box-shadow: inset 0 0 8px #555;
}

#contact-form input:focus, #contact-form textarea:focus {
  outline: none;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: white;
  font-size: calc(18px + 0.1vw);
}

#contact-form input {
  height: 70px;
}

#contact-form textarea {
  padding-top: 15px;
  height: 280px;
}

button#send-email {
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  width: 250px;
  height: 50px;
  background-color: #2A65A0;
  border-radius: 15px;
  color: white;
  text-align: center;
  line-height: 45px;
  transition: background-color 0.5s, box-shadow 0.5s;
  box-shadow: 0 0 8px #777;
}

button#send-email:hover {
  cursor: pointer;
  background-color: #287CA3;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 8px #444;
}

form.contact-form {
  margin-top: 2em;
  margin-left: -90px;
}

form div + div {
  margin-top: 1em;
}

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 110px;
  text-align: right;
}

input, textarea {
  /* To make sure that all text fields have the same font settings
   By default, textareas have a monospace font */
  font: 1em sans-serif;
  /* To give the same size to all text fields */
  width: 300px;
  box-sizing: border-box;
  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;
  /* To give enough room to type some text */
  height: 5em;
}

.submit-button {
  padding: 0 1em;
  height: 3em;
  margin-left: 110px;
}

/*  ----- Partners ----- */
section#partners {
  padding-top: 2em;
  background-image: url(../img/assets/partners-blob-big.png);
  background-repeat: no-repeat;
  background-position: right 0px bottom -200px;
  min-height: 520px;
}

section#partners > h2 {
  padding-left: 7.5%;
  font-size: 1.5em;
  font-weight: 800;
  text-transform: uppercase;
  max-height: 50px;
}

div.partners-holder {
  padding-left: 10%;
  padding-top: 4em;
}

div.partners-holder > div {
  display: inline-block;
}

div.partners-holder a, img {
  text-decoration: none;
}

span.partner-wrapper {
  height: 80px;
  width: 100%;
  margin-left: 1em;
}

div.partners-holder .pad-bottom {
  padding-bottom: 1em;
}

@media screen and (max-width: 850px) {
  section#partners {
    display: block;
    min-height: 650px;
  }
  section#partners > h2 {
    padding-top: 2em;
    padding-bottom: 4em;
  }
  div.partners-holder {
    padding-top: 0;
  }
  span.partner-wrapper {
    margin-left: 2em;
  }
  div.partners-holder .pad-bottom {
    padding-bottom: 2em;
  }
}
/*  ----- About us ----- */
section#about {
  padding-left: 7%;
  display: grid;
  grid-template-columns: 33% 34% 33%;
  min-height: 200px;
  z-index: 10;
  color: white;
}

section#about a {
  text-decoration: none;
  color: white;
}

div#contact-text {
  text-align: center;
}

div#bottom-logo {
  margin-right: 20%;
  position: relative;
}

div#bottom-logo img {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  height: auto;
}

section#about h2 {
  padding-bottom: 1em;
  font-size: 1.5em;
  font-weight: 800;
  text-transform: uppercase;
}

img#bottom-background {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 400px;
}

@media screen and (max-width: 715px) {
  section#about {
    padding-top: 2em;
    display: block;
    background-color: #287CA3;
    height: 300px;
  }
  div#bottom-logo {
    display: none;
  }
  img#bottom-background {
    display: none;
  }
}
.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 1.5em;
}

.siteheader {
  text-align: right;
  padding: 0.8em 1.5em 1em 1.5em;
}
.siteheader p {
  font-size: 2em;
}
.siteheader a {
  color: #222;
  text-decoration: none;
}

.header-image {
  padding-top: 4em;
  background-image: url(/img/assets/logo-blue-full.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.header-text {
  padding: 1em 0.5em 1em 0.5em;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
main {
  animation: fade-in 1s ease;
}

b, strong {
  font-weight: 600;
}

a {
  color: #0070be;
}
a:hover, a:focus {
  text-decoration: none;
}

img, iframe {
  max-width: 100%;
}

img {
  height: auto;
}

h1, h2, h3, h4 {
  font-weight: normal;
}

ul, ol {
  padding-left: 2em;
}

time {
  color: rgb(97.75, 97.75, 97.75);
  font-size: 0.85em;
}

.post {
  padding-bottom: 2em;
}
.post header h1 {
  margin: 0.2em 0;
  line-height: 1.3;
  font-size: 2.5em;
  font-weight: lighter;
}
.post header h1 a {
  color: #222;
  text-decoration: none;
}
.post > div p {
  margin: 1em 0;
  word-wrap: break-word;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.post > div img {
  padding: 0.5em;
}
.post > div ul {
  list-style: none;
  text-indent: -1em;
}
.post > div ul li:before {
  content: "» ";
  opacity: 0.5;
  margin-right: 0.3em;
}
.post > footer {
  border-top: 1px solid #dfdfdf;
  padding-top: 0.5em;
  clear: both;
}
.post h2, .post h3, .post h4, .post h5, .post h6 {
  margin: 1em 0 -0.5em 0;
}
.post blockquote {
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  color: rgb(110.5, 110.5, 110.5);
  font-size: 1.3em;
  width: 90%;
  margin: 1.5em auto;
  font-style: italic;
  font-weight: lighter;
}
.post blockquote p {
  margin: 1em 0.5em;
}
.post pre {
  font-size: 0.9em;
  line-height: 1.3;
  overflow: auto;
  padding: 5px 10px;
  -ms-word-wrap: normal;
  word-wrap: normal;
  background: #f7f7f7;
  box-shadow: 5px 5px 5px #dfdfdf;
}
.post code {
  background: #f7f7f7;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
.post table {
  font-size: 0.9em;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.post tr:nth-child(2n) {
  background: #f7f7f7;
}
.post th {
  border-bottom: 1px solid #dfdfdf;
  text-align: left;
}
.post td, .post th {
  padding: 2px 7px;
}

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