@import url("color-palette.css");

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

.homepage {
  background-color: var(--dark-blue-grey);
  color: var(--white);
}

/*----------------------------------
  SECTIONS
------------------------------------*/
div.main {
  margin-top: 192px;
  float: left;
  width: 100%;
  z-index: 2;
}

div.main div.wrapper div.title {
  /*width: 495px;*/
  /*width: 595px;*/
  /*height: 154px;*/
  width: 80%;
  padding-left: 60px;
  font-family: "Saira Extra Condensed", sans-serif;
  font-size: 72px;
  font-weight: normal;
  text-transform: none;
  /*font-weight: 300;*/
  font-stretch: extra-condensed;
  text-align: center;
  color: var(--white);
}

div.main div.wrapper div.content {
  /*width: 495px;*/
  /*width: 80%;*/
  font-family: "Noto Sans", sans-serif;
  margin-top: 22px;
  padding-left: 60px;
  font-size: 20px;
  line-height: 1.6;
  text-align: left;
  color: var(--white);
}

div.main div.wrapper {
  float: left;
  width: 100%;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  padding-left: 0px;
}

div.main div.illustration {
  float: right;
  width: 50%;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  top: 294px;
}

@media screen and (max-width: 575px) {
  div.main {
    margin-top: 100px;
  }

  div.main div.wrapper {
    width: 100%;
    float: left;
    display: flex;
  }

  div.main div.illustration {
    margin-top: 60px;
    width: 100%;
    float: left;
    right: auto;
  }

  div.main div.wrapper div.title {
    width: 80%;
    padding-left: 0px;
    font-size: 40px;
    text-align: center;
  }

  div.main div.wrapper div.content {
    /*width: 495px;*/
    width: 241px;
    padding-left: 0px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
    text-align: center;
  }

  div.main div.wrapper div.illustration {
    position: absolute;
    padding-left: 0px;
    top: 294px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  div.main {
    margin-top: 120px;
  }

  div.main div.wrapper {
    width: 100%;
    float: left;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }

  div.main div.illustration {
    margin-top: 60px;
    width: 100%;
    float: left;
  }

  div.main div.wrapper div.title {
    width: 80%;
    padding-left: 0px;
    font-size: 60px;
    text-align: center;
  }

  div.main div.wrapper div.content {
    /*width: 495px;*/
    width: 345px;
    padding-left: 0px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
    text-align: center;
  }

  div.main div.wrapper div.illustration {
    position: absolute;
    padding-left: 0px;
    top: 294px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  div.main {
    margin-top: 149px;
  }

  div.main div.wrapper {
    width: 100%;
    float: left;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }

  div.main div.illustration {
    margin-top: 60px;
    width: 100%;
    float: left;
    right: auto;
  }

  div.main div.wrapper div.title {
    width: 80%;
    padding-left: 0px;
    font-size: 50px;
    text-align: center;
  }

  div.main div.wrapper div.content {
    width: 495px;
    padding-left: 0px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
    text-align: center;
  }

  div.main div.wrapper div.illustration {
    position: absolute;
    padding-left: 0px;
    top: 294px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  div.main {
    margin-top: 190px;
    padding-left: 60px;
  }

  div.main div.wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0px;
  }

  div.main div.wrapper div.title {
    /*width: 495px;*/
    padding-left: 0px;
    font-size: 50px;
    text-align: left;
  }

  div.main div.wrapper div.content {
    /*width: 495px;*/
    padding-left: 0px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
    text-align: left;
  }

  div.main div.wrapper div.illustration {
    position: absolute;
    padding-left: 0px;
    top: 294px;
  }
}

@media screen and (min-width: 1200px) {
  div.main {
    margin: 10% 0 0 0;
    padding-left: 0;
  }

  div.main div.wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0px;
  }

  div.main div.wrapper div.content {
    /*width: 635px;*/
    padding-left: 0px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 2;
    text-align: left;
  }

  div.main div.wrapper div.illustration {
    position: absolute;
    padding-left: 0px;
    top: 294px;
  }
}

/*----------------------------------
  PROJECTS
------------------------------------*/
div.see-our-projects {
  margin-top: 25px !important;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0 auto;
}

div.see-our-projects a {
  /*width: 218px;*/
  width: 100%;
  height: 59px;
  line-height: 3;
  font-family: "Saira Extra Condensed", sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-stretch: extra-condensed;
  letter-spacing: 6.8px;
  text-align: left;
  color: var(--robin-s-egg) !important;
  text-transform: uppercase;
}

div.wrapper.center {
  width: 100%;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
  justify-content: center;
}

div.see-our-projects.standalone {
  height: 30px;
  float: left;
  display: flex;
  text-align: center;
  align-items: center;
  align-content: center;
  align-self: center;
  /*width: 351px;*/
}

/*div.see-our-projects:hover {
  cursor: pointer;
  background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
  background-image: -moz-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
  background-image: -o-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
  background-image: linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
}*/

@media screen and (max-width: 575px) {
  div.see-our-projects {
    text-align: center;
  }

  div.see-our-projects.standalone {
    margin-top: 140px !important;
    width: 269px;
    height: 49px;
  }

  /*div.see-our-projects:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
  }

  div.see-our-projects.standalone:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 39px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 39px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 39px);
    background-image: linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 39px);
  }*/
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  div.see-our-projects {
    text-align: center;
    font-size: 18px;
    line-height: 1.83;
    letter-spacing: 6.1px;
  }

  div.see-our-projects.standalone {
    margin-top: 140px !important;
    width: 298px;
    height: 49px;
  }

  /*div.see-our-projects:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
  }

  div.see-our-projects.standalone:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
    background-image: linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
  }*/
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  div.see-our-projects {
    text-align: center;
    font-size: 20px;
    line-height: 1.65;
    letter-spacing: 6.8px;
  }

  div.see-our-projects.standalone {
    margin-top: 150px !important;
    width: 306px;
    height: 49px;
  }

  /*div.see-our-projects:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
    background-image: linear-gradient(to right, transparent 0px, transparent 176px, rgba(103, 252, 230, 0.11) 176px, rgba(103, 252, 230, 0.11) 13px);
  }

  div.see-our-projects.standalone:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
    background-image: linear-gradient(to right, transparent 0px, transparent 159px, rgba(103, 252, 230, 0.11) 159px, rgba(103, 252, 230, 0.11) 30px);
  }*/
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  div.see-our-projects {
    font-size: 20px;
    line-height: 1.65;
    letter-spacing: 6.8px;
  }

  div.see-our-projects.standalone {
    margin-top: 150px !important;
    width: 306px;
    height: 49px;
  }

  /*div.see-our-projects:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
    background-image: linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
  }

  div.see-our-projects.standalone:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
    background-image: linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
  }*/
}

@media screen and (min-width: 1200px) {
  div.see-our-projects {
    font-size: 20px;
    line-height: 1.65;
    letter-spacing: 6.8px;
  }

  div.see-our-projects.standalone {
    margin-top: 150px !important;
    width: 306px;
    height: 49px;
  }

  /*div.see-our-projects:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
    background-image: linear-gradient(to right, transparent 0px, transparent 109px, rgba(103, 252, 230, 0.11) 109px, rgba(103, 252, 230, 0.11) 13px);
  }

  div.see-our-projects.standalone:hover {
    background-image: -webkit-linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -moz-linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
    background-image: -o-linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
    background-image: linear-gradient(to right, transparent 0px, transparent 104px, rgba(103, 252, 230, 0.11) 104px, rgba(103, 252, 230, 0.11) 30px);
  }*/
}

/*----------------------------------
  SCROLL DOWN SECTION
------------------------------------*/
div.scroll-down-section {
  float: left;
  width: 100%;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 142px;
}

div.scroll-down {
  /*margin: 0 auto;
  position: absolute;
  top: 748px;*/
}

div.scroll-down div.text {
  width: 111px;
  height: 66px;
  font-family: "Saira Extra Condensed", sans-serif;
  font-size: 14px;
  /*font-weight: 500;*/
  font-stretch: extra-condensed;
  line-height: 2.36;
  letter-spacing: 4.8px;
  text-align: center;
  color: #ffffff;
  color: var(--white);
  text-transform: uppercase;
}

div.scroll-down div.line {
  width: 3px;
  height: 92px;
  border: solid 2px #00ffdd;
  margin: -10px 54px 0 54px;
}

@media screen and (max-width: 575px) {
  div.scroll-down-section {
    margin-top: 50px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  div.scroll-down-section {
    margin-top: 105px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  div.scroll-down-section {
    margin-top: 100px;
  }
}

@media screen and (min-width: 992px) {
  div.scroll-down-section {
    margin-top: 140px;
  }
}