html, body, div, span, h1, h2, h3, p, img, ol, ul, li, form, table, tbody, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: top; }

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-spacing: 0; }

*,
*:before,
*:after {
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

body {
  background: #fff;
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  line-height: 1; }
  @media (max-width: 1024px) {
    body {
      font-size: 16px; } }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #efefef;
  padding: 0;
  margin-bottom: 60px; }
  @media (max-width: 480px) {
    hr {
      margin-bottom: 15px; } }

strong {
  font-weight: 500; }

a {
  color: #000;
  transition: all ease .4s; }
  a:hover {
    color: #a9cd51;
    transition: all ease .4s; }

blockquote {
  margin: 0 0 60px; }
  blockquote p {
    position: relative;
    font-size: 1.2em;
    padding-left: 50px;
    margin: 45px 0 50px;
    line-height: 1.5em;
    text-align: left !important; }
    @media (max-width: 1024px) {
      blockquote p {
        font-size: 1em;
        padding-left: 35px; } }
    @media (max-width: 480px) {
      blockquote p {
        padding: 20px 0 0 0; } }
    blockquote p span {
      font-size: 5em;
      display: block;
      position: absolute;
      top: -20px;
      left: 0;
      line-height: 1em;
      color: #a9cd51;
      height: 30px; }
      blockquote p span:last-child {
        left: auto;
        top: auto;
        bottom: -20px;
        right: 0; }
  blockquote .title {
    font-size: 1.2em;
    width: 100%;
    text-align: right;
    font-style: italic; }
    @media (max-width: 640px) {
      blockquote .title {
        font-size: 1em; } }
    blockquote .title:after {
      left: auto !important;
      right: 0 !important; }

.hidden {
  display: none; }

.fx {
  display: flex;
  flex-wrap: wrap; }
  .fx.-nowrap {
    flex-wrap: nowrap; }

img {
  opacity: 1;
  transition: opacity 0.3s ease; }

img[data-src] {
  display: inline-block;
  opacity: 0; }

h1, h2, h3, h4, h5, .title, .titleBig {
  font-family: 'Rubik', sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  position: relative; }
  h1.splitter, h2.splitter, h3.splitter, h4.splitter, h5.splitter, .title.splitter, .titleBig.splitter {
    padding-bottom: 15px;
    margin-bottom: 25px; }
    h1.splitter:after, h2.splitter:after, h3.splitter:after, h4.splitter:after, h5.splitter:after, .title.splitter:after, .titleBig.splitter:after {
      content: "";
      width: 40px;
      border-bottom: 2px solid #a9cd51;
      position: absolute;
      left: 0;
      bottom: 0; }

h1 {
  font-size: 2.250em;
  line-height: 40px;
  margin-bottom: 20px; }
  @media (max-width: 1024px) {
    h1 {
      font-size: 1.8em; } }

h2 {
  font-size: 1.875em;
  line-height: 36px;
  margin-bottom: 25px; }

h3 {
  font-size: 24px;
  line-height: 22px;
  margin-bottom: 15px; }

h4 {
  font-size: 21px;
  line-height: 19px;
  margin-bottom: 10px;
  font-weight: 400; }

p {
  font-weight: 300;
  margin-bottom: 40px;
  line-height: 2; }
  @media (max-width: 1024px) {
    p {
      margin-bottom: 30px;
      line-height: 1.5; } }

.btn {
  display: block;
  background: #a9cd51;
  font-weight: 500;
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 0.8; }
  .btn:hover {
    color: #fff;
    background: #bdd879; }

.link, #breadcrumb a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  position: relative; }
  .link:before, #breadcrumb a:before {
    content: "";
    position: absolute;
    border-bottom: 2px solid #a9cd51;
    width: 0;
    transition: all ease 0.2s;
    bottom: -10px; }
  @media (min-width: 1024px) {
    .link:hover, #breadcrumb a:hover {
      color: #fff; }
      .link:hover:before, #breadcrumb a:hover:before {
        width: 100%; } }

.slider {
  background: grey;
  width: 100%; }
  .slider__nav span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    background: url(/images/template/down-arrow.svg) no-repeat center;
    background-size: 70%;
    padding: 18px;
    cursor: pointer;
    z-index: 4;
    left: 20px;
    transition: all ease 0.2s; }
    @media (min-width: 1024px) {
      .slider__nav span:hover {
        transform: translateY(-50%) rotate(90deg) scale(1.5);
        transition: all ease 0.2s; } }
    .slider__nav span:last-child {
      right: 20px;
      left: auto;
      transform: translateY(-50%) rotate(-90deg);
      transition: all ease 0.2s; }
      @media (min-width: 1024px) {
        .slider__nav span:last-child:hover {
          transform: translateY(-50%) rotate(-90deg) scale(1.5);
          transition: all ease 0.2s; } }
  .slider ul {
    width: 100%; }
  .slider .slide {
    visibility: hidden;
    z-index: -1;
    opacity: 0;
    transition: all ease 0.5s;
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    widtH: 100%; }
    .slider .slide.is-active {
      opacity: 1;
      z-index: 1;
      visibility: visible;
      transition: all ease 0.5s;
      opacity: 1; }
  @media (max-width: 1024px) {
    .slider {
      display: inline-block; }
      .slider .slide.is-active {
        position: relative; }
      .slider__nav span {
        top: 100px; } }
  @media (max-width: 380px) {
    .slider__nav span {
      top: 90px; } }

.slider-auto li {
  transition: transform 2s linear, opacity 2s linear 1s; }

.project-thumbs p {
  text-align: center; }

.project-thumbs .row {
  display: block; }

.project-thumbs .active {
  opacity: 1;
  transition: all ease 0.5s; }

.project-thumbs .caption-container {
  text-align: center;
  padding: 2px 16px;
  color: #fff;
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 100%;
  padding: 20px 50px; }
  @media (max-width: 640px) {
    .project-thumbs .caption-container {
      padding: 20px; } }

.project-thumbs #caption {
  font-size: 1em;
  margin-bottom: 0; }
  @media (max-widtH: 1024px) {
    .project-thumbs #caption {
      font-size: .8em; } }

.project-thumbs .prev, .project-thumbs .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  background: url(/images/template/down-arrow.svg) no-repeat center;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 4;
  left: 20px;
  transition: all ease 0.2s;
  user-select: none; }
  @media (min-width: 1024px) {
    .project-thumbs .prev:hover, .project-thumbs .next:hover {
      transform: translateY(-50%) rotate(90deg) scale(1.5);
      transition: all ease 0.2s; } }

.project-thumbs .next {
  right: 20px;
  left: auto;
  transform: translateY(-50%) rotate(-90deg);
  transition: all ease 0.2s; }
  @media (min-width: 1024px) {
    .project-thumbs .next:hover {
      transform: translateY(-50%) rotate(-90deg) scale(1.5);
      transition: all ease 0.2s; } }

.project-thumbs .close {
  color: white;
  position: absolute;
  top: 15px;
  right: 35px;
  font-size: 3em;
  font-weight: 400;
  transition: all ease 0.2s;
  z-index: 99; }
  @media (max-width: 480px) {
    .project-thumbs .close {
      top: 10px;
      right: 20px; } }
  .project-thumbs .close:hover, .project-thumbs .close:focus {
    transform: scale(1.5);
    cursor: pointer;
    transition: all ease 0.2s; }

.project-thumbs .slides {
  display: none;
  text-align: center;
  transition: all ease 0.2s; }
  .project-thumbs .slides img {
    max-width: 100%; }
    @media (max-width: 1024px) and (orientation: landscape) {
      .project-thumbs .slides img {
        animation: move 40s linear infinite; } }

.lBoxOverlay {
  display: none;
  position: fixed;
  z-index: 99;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%); }

.lBoxContent {
  position: absolute;
  margin: auto;
  padding: 0;
  width: auto;
  max-width: 75%;
  height: auto;
  max-height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  @media (max-width: 1024px) {
    .lBoxContent {
      max-width: 100%;
      width: 100%; } }

.lBoxInner {
  position: relative;
  height: 100%;
  width: 100%; }

.thumbs {
  text-align: center; }
  .thumbs > div {
    display: inline-block;
    margin: 0 4px 10px;
    transition: all ease .3s;
    cursor: pointer;
    height: 164px;
    overflow: hidden; }
    @media (min-width: 1024px) {
      .thumbs > div:hover {
        transform: scale(1.05);
        transition: all ease .3s; } }
    @media (max-width: 480px) {
      .thumbs > div {
        height: 115px; } }
  .thumbs img {
    width: 200px; }
    @media (max-width: 480px) {
      .thumbs img {
        width: 140px; } }

.numbers {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  top: 0; }
  @media (max-width: 1024px) and (orientation: landscape) {
    .numbers {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99; } }

.thumbsAlt div {
  display: inline-block;
  opacity: 0.6;
  transition: all ease 0.5s; }
  .thumbsAlt div:hover {
    opacity: 1;
    transition: all ease 0.5s; }

.thumbsAlt img {
  width: 120px; }

#breadcrumb {
  display: block;
  width: 80%;
  margin: 20px auto 0; }
  @media (max-width: 640px) {
    #breadcrumb {
      width: 90%; } }
  #breadcrumb a {
    color: #000;
    text-decoration: none;
    font-size: 1em;
    text-transform: initial;
    font-weight: 400; }
    #breadcrumb a:before {
      border-bottom-width: 1px;
      bottom: -3px; }
    #breadcrumb a:hover {
      color: #000; }
  #breadcrumb li {
    display: inline;
    background: url(/images/template/right-chev.svg) no-repeat 0 8px;
    padding-left: 20px;
    background-position: 4px 3px;
    background-size: 9px 10px;
    font-size: .8em; }
    #breadcrumb li:first-of-type {
      background: none;
      padding: 0; }

.checkbox {
  font-size: .75em;
  text-align: center;
  padding: 5px 10px;
  margin: 0 auto 25px;
  cursor: pointer;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  background: #dedede;
  border-radius: 25px;
  width: 152px; }
  .checkbox img {
    width: 15px;
    height: 5px;
    margin-right: 5px;
    opacity: .5; }
  .checkbox ._title {
    margin-right: 5px; }
  .checkbox ._btn {
    position: relative;
    border-radius: 30px;
    border: 2px solid #dedede;
    overflow: hidden; }
    .checkbox ._btn ._wrap {
      width: 100%;
      position: relative;
      transition: all ease 0.2s; }
      .checkbox ._btn ._wrap:after {
        position: absolute;
        content: "";
        width: 36px;
        height: 100%;
        border-radius: 30px;
        top: 0;
        left: 100%;
        transform: translate(-50%);
        background: #fff;
        border: 2px solid #CCC; }
    .checkbox ._btn span {
      width: auto;
      min-width: 100%;
      background: #a9cd51;
      padding: 5px;
      color: #fff;
      border-radius: 50px; }
      .checkbox ._btn span:first-child {
        text-indent: -6px;
        padding-right: 10px; }
      .checkbox ._btn span:last-child {
        text-indent: 6px;
        padding-left: 10px;
        box-shadow: inset 1px 2px 15px #718f29; }
    .checkbox ._btn .-pink {
      background: #000; }

.checkbox input:checked + ._btn ._wrap {
  transform: translate(-100%, 0); }

.container {
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 1024px) {
    .container {
      width: 100%; } }

.container-wide {
  position: relative;
  margin-left: auto;
  margin-right: auto; }
  .container-wide.alt {
    background: #f2f2f2; }

.container-narrow {
  width: 80%;
  position: relative;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 1024px) {
    .container-narrow {
      widtH: 100%; } }
  .container-narrow.alt {
    background: #f2f2f2; }

.flex {
  display: flex; }

.vAlignCenter {
  align-items: center; }

.row {
  display: flex;
  flex-wrap: wrap; }

.colFull {
  width: 100%; }

.colHalf {
  width: 50%; }
  @media (max-width: 1024px) {
    .colHalf {
      widtH: 100%; } }

.colThird {
  width: 33.333333%; }
  @media (max-width: 1024px) {
    .colThird {
      widtH: 100%; } }

.colTwoThird {
  width: 66.666666%; }
  @media (max-width: 1024px) {
    .colTwoThird {
      widtH: 100%; } }

.colSmall {
  width: 25%; }

@media (max-width: 480px) {
  .innerBox {
    padding: 15px; } }

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  display: inline-block; }

header {
  padding: 4vh 0;
  transition: all ease 0.5s;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 12vh; }
  header .logo {
    width: 20%; }
    header .logo img {
      width: 268px; }
  header .socialIcons {
    width: 10%;
    display: flex;
    justify-content: flex-end;
    height: 25px;
    margin-top: 15px; }
    header .socialIcons .facebook, header .socialIcons .instagram {
      margin-right: 20px; }
      header .socialIcons .facebook img, header .socialIcons .instagram img {
        width: 21px; }
    header .socialIcons .houzz img {
      width: 14px; }
    header .socialIcons div {
      position: relative; }
      header .socialIcons div:before {
        content: "";
        position: absolute;
        border-bottom: 2px solid #a9cd51;
        width: 0;
        transition: all ease 0.2s;
        bottom: -10px; }
      header .socialIcons div:hover {
        cursor: pointer; }
        header .socialIcons div:hover:before {
          width: 100%;
          transition: all ease 0.2s; }
  @media (min-width: 1024px) {
    header {
      width: 80%;
      margin: 0 auto;
      display: block; }
      header .toggle {
        width: 60%;
        margin: 15px 0 0 10%;
        justify-content: flex-end; }
      header .toggle .title {
        display: none; } }
  @media (max-width: 1024px) {
    header {
      padding: 0;
      background: none;
      height: 80px;
      width: 100%; }
      header .logo {
        width: 100%;
        margin-top: 12px; }
        header .logo img {
          margin: 10px auto;
          display: block;
          widtH: 230px; }
      header .socialIcons {
        display: none; }
      header .toggle {
        width: 100%;
        margin: 0; } }
  @media (max-width: 480px) {
    header .logo img {
      width: 200px;
      margin: 12px 0 0 15px; } }

nav li {
  display: inline-block;
  margin: 0 15px;
  line-height: 21px; }
  nav li a {
    font-size: 14px;
    color: #848992;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    position: relative; }
    nav li a:before {
      content: "";
      position: absolute;
      border-bottom: 2px solid #a9cd51;
      width: 0;
      transition: all ease 0.2s;
      bottom: -10px; }
    @media (min-width: 1024px) {
      nav li a:hover {
        color: #848992; }
        nav li a:hover:before {
          width: 100%;
          transition: all ease 0.2s; } }

@media (max-width: 1024px) {
  .navButton {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    right: 20px;
    top: 15px;
    transition: all ease 0.5s;
    z-index: 100; }
    .navButton span {
      display: inline-block;
      width: 30px;
      height: 3px;
      background: #848992;
      margin: 13px 0 0 10px;
      transition: all ease 0.5s; }
      .navButton span:before, .navButton span:after {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        background: #848992;
        transition: all ease 0.5s; }
      .navButton span:before {
        margin-top: 10px; }
      .navButton span:after {
        margin-top: 7px; }
    .navButton.active span {
      transform: translateY(-50px);
      background: #fff; }
      .navButton.active span:before {
        transform: translateY(50px) rotate(45deg);
        background: #fff; }
      .navButton.active span:after {
        transform: translate(0, 40px) rotate(-45deg);
        background: #fff; }
  .toggle {
    opacity: 0;
    transition: all ease 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    margin: 0;
    width: 100%;
    height: 100vh;
    visibility: hidden;
    z-index: 99; }
    .toggle ul {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%); }
    .toggle li {
      width: 100%;
      display: block;
      text-align: center;
      margin: 0 0 25px 0; }
      .toggle li a {
        color: #fff; }
    .toggle.active {
      visibility: visible;
      opacity: 1;
      transition: all ease 0.5s; }
    .toggle .title {
      color: #fff;
      text-align: center;
      margin-top: 30px;
      position: relative; }
      .toggle .title.splitter:after {
        left: 50%;
        transform: translateX(-50%); } }

footer {
  width: 100%;
  background: #3d434f;
  padding: 100px 50px;
  text-align: center; }
  @media (max-width: 1024px) {
    footer {
      padding: 20px; } }
  footer .footerLogo {
    width: 268px;
    margin: 0 auto 20px;
    position: relative;
    display: block; }
    @media (max-width: 1024px) {
      footer .footerLogo {
        width: 200px;
        margin-bottom: 10px; } }
    footer .footerLogo:before {
      content: "";
      width: 268px;
      height: 44px;
      background: url(/images/template/logo.svg);
      position: absolute;
      top: 0;
      left: 0;
      background-size: 268px;
      z-index: 1;
      transition: all ease 0.3s;
      opacity: 0;
      cursor: pointer; }
    @media (min-width: 1024px) {
      footer .footerLogo:hover:before {
        opacity: 1;
        transition: all ease 0.3s; } }
  footer ul {
    width: 100%; }
    footer ul li {
      display: inline-block;
      margin: 0 15px; }
      @media (max-width: 1024px) {
        footer ul li {
          margin: 10px; } }
      footer ul li a {
        font-size: 14px;
        color: #fff;
        font-weight: 500;
        text-transform: uppercase;
        text-decoration: none;
        position: relative; }
        footer ul li a:before {
          content: "";
          position: absolute;
          border-bottom: 2px solid #a9cd51;
          width: 0;
          transition: all ease 0.2s;
          bottom: -10px; }
        footer ul li a:hover {
          color: #fff; }
          footer ul li a:hover:before {
            width: 100%;
            transition: all ease 0.2s; }

.centered {
  text-align: center; }

.introBox {
  text-align: center;
  width: 100%;
  padding: 10px; }
  .introBox p {
    font-size: 1.5em;
    line-height: 1.5;
    margin-bottom: 20px; }
    @media (max-width: 1024px) {
      .introBox p {
        font-size: 1.2em;
        line-height: 1.2em;
        margin-bottom: 10px; } }
  .introBox h1, .introBox h2 {
    font-size: 2.250em;
    line-height: 1.5; }
    @media (max-width: 1024px) {
      .introBox h1, .introBox h2 {
        font-size: 1.8em;
        line-height: 1.2em; } }
    .introBox h1.splitter, .introBox h2.splitter {
      margin-bottom: 45px;
      padding-bottom: 35px; }
      @media (max-width: 1024px) {
        .introBox h1.splitter, .introBox h2.splitter {
          margin-bottom: 15px;
          padding-bottom: 15px; } }
    .introBox h1:after, .introBox h2:after {
      left: 50%;
      transform: translateX(-50%);
      width: 100px; }
  .introBox.side {
    text-align: left; }
    .introBox.side h1:after, .introBox.side h2:after {
      left: 0;
      transform: translateX(0); }
  .introBox.outro {
    padding-top: 50px; }
    .introBox.outro a {
      color: #000; }
      .introBox.outro a:hover {
        color: #a9cd51; }
    .introBox.outro p {
      font-size: 2em; }
      @media (max-width: 1024px) {
        .introBox.outro p {
          font-size: 1.4em; } }

.thirdBox {
  width: 370px;
  height: 300px;
  position: relative; }
  @media (max-width: 1024px) {
    .thirdBox {
      margin: 10px auto;
      width: 90%; } }
  @media (max-width: 480px) {
    .thirdBox {
      height: 150px; } }

@media (min-width: 1024px) {
  .landingBox {
    margin-top: 40px; } }

.landingBox h2 {
  color: #fff; }

.landingBox .thirdBox {
  overflow: hidden;
  transition: all ease 0.3s;
  opacity: 0; }
  @media (min-width: 1024px) {
    .landingBox .thirdBox {
      box-shadow: 6px 15px 50px rgba(0, 0, 0, 0.5); } }
  .landingBox .thirdBox .hoverBox {
    top: 0;
    left: 0;
    transition: all ease 0.3s;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%; }
  .landingBox .thirdBox .contentBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; }
  .landingBox .thirdBox a {
    position: relative;
    transition: all ease 0.3s; }
    .landingBox .thirdBox a:after {
      content: "";
      background: url(/images/template/link-open.svg) no-repeat;
      width: 20px;
      height: 20px;
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
      transition: all ease 0.3s; }
    .landingBox .thirdBox a:before {
      display: none; }
    .landingBox .thirdBox a:hover {
      color: #a9cd51 !important;
      transition: all ease 0.3s; }
      .landingBox .thirdBox a:hover:after {
        background: url(/images/template/link-open-hover.svg) no-repeat;
        transition: all ease 0.3s; }
  .landingBox .thirdBox img {
    transition: all ease 0.8s; }
    @media (max-width: 1024px) {
      .landingBox .thirdBox img {
        width: 100%; } }
  .landingBox .thirdBox:hover {
    transform: scale(1.05);
    transition: all ease 0.3s;
    box-shadow: 8px 25px 75px rgba(0, 0, 0, 0.5); }
    .landingBox .thirdBox:hover .hoverBox {
      opacity: 1;
      transition: all ease 0.3s; }
    .landingBox .thirdBox:hover img {
      animation: move 40s ease infinite; }

.numberBoxOuter {
  display: flex; }
  .numberBoxOuter .numberBox {
    padding: 50px 50px 50px 250px;
    position: relative;
    transition: all ease 0.3s;
    flex: 1;
    opacity: 0; }
    .numberBoxOuter .numberBox.show {
      opacity: 1; }
    .numberBoxOuter .numberBox h2 {
      margin-top: 30px; }
    .numberBoxOuter .numberBox:before {
      content: "1";
      font-size: 5.313em;
      position: absolute;
      left: 80px;
      top: 50%;
      transform: translateY(-50%);
      color: #cdcdcd;
      transition: all ease 0.3s; }
    .numberBoxOuter .numberBox.box1 {
      border-bottom: dashed 2px #dedede;
      border-right: dashed 2px #dedede; }
    .numberBoxOuter .numberBox.box2 {
      border-bottom: dashed 2px #dedede; }
      .numberBoxOuter .numberBox.box2:before {
        content: "2"; }
    .numberBoxOuter .numberBox.box3 {
      border-right: dashed 2px #dedede; }
      .numberBoxOuter .numberBox.box3:before {
        content: "3"; }
    .numberBoxOuter .numberBox.box4:before {
      content: "4"; }
    .numberBoxOuter .numberBox:hover {
      background: #dedede;
      transition: all ease 0.5s; }
      .numberBoxOuter .numberBox:hover:before {
        color: #a9cd51;
        transition: all ease 0.5s; }
  @media (max-width: 1024px) {
    .numberBoxOuter {
      display: block; }
      .numberBoxOuter .numberBox {
        padding: 30px;
        border-bottom: dashed 2px #dedede;
        border-right: none !important;
        border-top: none !important;
        bottom-left: none !important;
        text-align: center; }
        .numberBoxOuter .numberBox:before {
          position: relative;
          left: auto; } }

.aniStart .box1, .aniStart2 .box1 {
  animation: fadeTwo 1s ease;
  opacity: 1 !important; }

.aniStart .box2, .aniStart2 .box2 {
  animation: fadeTwo 1.5s ease;
  opacity: 1; }

.aniStart .box3, .aniStart2 .box3 {
  animation: fadeTwo 2s ease;
  opacity: 1; }

.aniStart .box4, .aniStart2 .box4 {
  animation: fadeTwo 2.5s ease;
  opacity: 1; }

.padTopBotBig {
  padding: 100px 0; }
  @media (max-width: 1024px) {
    .padTopBotBig {
      padding: 30px 0; } }

.padTopBotMed {
  padding: 50px 0; }
  @media (max-width: 1024px) {
    .padTopBotMed {
      padding: 15px 0; } }

.paddingMed {
  padding: 50px; }
  @media (max-width: 1024px) {
    .paddingMed {
      padding: 20px; } }

.marginBottomMed {
  margin-bottom: 30px; }

.topLine {
  width: 80%;
  margin-bottom: 0; }
  @media (max-width: 640px) {
    .topLine {
      width: 100%;
      margin: 0; } }

.list li {
  margin-bottom: 15px;
  line-height: 1.5em;
  padding-left: 20px;
  position: relative; }
  .list li:last-child {
    margin-bottom: 40px; }
    @media (max-width: 640px) {
      .list li:last-child {
        margin-bottom: 20px; } }
  .list li:before {
    content: "";
    position: absolute;
    background: url("/images/template/right-chev.svg") no-repeat;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    left: 0;
    top: 5px; }

.hero {
  background-size: cover;
  overflow: hidden;
  position: relative;
  height: 88vh;
  width: 100%;
  z-index: 1; }
  .hero img {
    z-index: -1;
    animation: move 40s linear infinite;
    background-size: cover; }
    @media (min-width: 1920px) {
      .hero img {
        width: 100%; } }
  .hero .titleBig {
    color: #fff;
    font-size: 4.500em;
    line-height: 1.2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6%;
    border-left: 6px solid #a9cd51;
    padding-left: 2%;
    overflow: hidden;
    animation: fadeTwo 2s ease; }
  .hero .subBox {
    background: rgba(132, 137, 147, 0.8);
    padding: 40px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 140px;
    transform: translateY(-50%);
    width: 410px;
    animation: fadeTwo 2.5s ease; }
    .hero .subBox .title {
      font-size: 1.5em; }
    .hero .subBox .buttonBox {
      display: flex;
      flex-wrap: wrap;
      align-items: center; }
      .hero .subBox .buttonBox .btn {
        display: inline-block;
        margin-right: 20px; }
  .hero .downLink {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: url(/images/template/down-arrow.svg) no-repeat center 15px;
    background-size: 30px;
    animation: downarrow 1s ease-in-out infinite;
    z-index: 1; }
  @media (max-width: 1024px) {
    .hero {
      height: auto;
      width: 100%;
      display: inline-block; }
      .hero img {
        width: 100%;
        background-size: contain;
        position: relative;
        display: inline-block; }
      .hero .subBox {
        position: relative;
        display: inline-block;
        right: auto;
        top: auto;
        width: 100%;
        transform: translateY(0);
        background: #404040;
        animation: none;
        padding: 20px 30px; }
        .hero .subBox .title {
          font-size: 1.2em;
          margin-bottom: 10px; }
      .hero .downLink {
        display: none; }
      .hero p {
        font-size: .8em;
        margin-bottom: 10px; } }

.avatarBox {
  justify-content: space-evenly;
  margin-bottom: 40px; }
  .avatarBox .profileBox {
    position: relative;
    background: #f2f2f2;
    padding: 20px;
    display: flex;
    align-items: center;
    width: 40%;
    cursor: pointer;
    transition: all ease 0.3s; }
    .avatarBox .profileBox:hover {
      background: #dedede;
      transition: all ease 0.3s; }
      .avatarBox .profileBox:hover.active:before {
        transition: all ease 0.3s;
        border-color: #dedede transparent transparent transparent; }
    .avatarBox .profileBox.active:before {
      transition: all ease 0.3s;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -20px;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 20px 20px 0 20px;
      border-color: #f2f2f2 transparent transparent transparent; }
  .avatarBox img {
    border-radius: 50%;
    display: inline-block; }
  .avatarBox .details {
    display: inline-block;
    border-left: 2px solid #a9cd51;
    margin-left: 15px;
    padding-left: 15px; }
  .avatarBox .name {
    font-size: 1.5em;
    margin-bottom: 0.3em; }
  .avatarBox .honours {
    font-size: 0.875em; }
  @media (max-width: 1024px) {
    .avatarBox {
      width: 100%; }
      .avatarBox .profileBox {
        display: block;
        padding: 10px;
        text-align: center; }
        .avatarBox .profileBox img {
          width: 75px;
          height: 75px;
          display: block;
          margin: -45px auto 10px;
          border: 2px solid #fff; }
        .avatarBox .profileBox .details {
          display: block;
          margin: 0 auto;
          border: none;
          padding: 0; }
          .avatarBox .profileBox .details .honours {
            font-size: 11px; }
      .avatarBox .name {
        font-size: 1.2em; }
      .avatarBox .active img {
        border: 2px solid #a9cd51; } }

.descBox {
  position: relative; }
  .descBox .profileContent {
    background: #f2f2f2;
    padding: 30px;
    display: none;
    visibility: hidden;
    opacity: 0; }
    .descBox .profileContent.active {
      display: flex;
      visibility: visible;
      opacity: 1; }
  .descBox .details {
    margin-left: 30px; }
  .descBox .title {
    font-size: 1.5em;
    margin-bottom: 1em; }
  .descBox ul li {
    display: inline-block; }
  @media (max-width: 1024px) {
    .descBox {
      display: inline-block; }
      .descBox img {
        display: none; }
      .descBox .details {
        display: inline-block;
        margin: 0; }
      .descBox .profileContent.active {
        display: block; }
      .descBox ul li {
        margin-bottom: 10px; } }
  @media (max-width: 380px) {
    .descBox .details {
      width: 100%;
      margin: 15px 0 0 0; }
    .descBox .profileContent {
      padding: 10px; } }

.email:before, .phone:before {
  content: "";
  width: 20px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px; }

.email {
  margin-right: 30px; }
  .email:before {
    background: url(/images/template/mail.svg) no-repeat 0 5px; }
  @media (max-width: 1024px) {
    .email:before {
      background-position: 0 0; } }

.phone {
  margin-right: 30px; }
  .phone:before {
    background: url(/images/template/phone.svg) no-repeat;
    height: 25px;
    vertical-align: middle; }

@media (max-width: 1024px) {
  #profile .paddingMed {
    padding: 15px; } }

#slide-2, #slide-4 {
  z-index: 2;
  background: #fff; }

.associations p {
  margin-bottom: 0; }

@media (max-width: 640px) {
  .associations img {
    max-width: 100%; } }

.associations .title {
  font-size: 1.875em;
  line-height: 26px;
  margin-bottom: 25px; }

.associations .affLinks {
  display: flex;
  justify-content: center; }
  .associations .affLinks img {
    width: 100%; }
  @media (max-width: 640px) {
    .associations .affLinks li {
      display: inline-block;
      width: 40%;
      margin: 0 5% 20px; } }

/* The typing effect */
/* The typewriter cursor effect */
.projectsBox {
  display: flex;
  position: relative;
  justify-content: space-evenly;
  widtH: 100%; }
  @media (max-width: 480px) {
    .projectsBox {
      display: inline-block; } }
  .projectsBox img {
    position: absolute;
    top: 0;
    left: 0;
    width: 370px; }
    @media (max-width: 480px) {
      .projectsBox img {
        background-size: cover; } }
  .projectsBox .linkBox {
    width: 370px;
    height: 297px;
    text-align: center;
    color: #fff;
    display: flex;
    position: relative;
    overflow: hidden; }
    @media (min-width: 1024px) {
      .projectsBox .linkBox {
        box-shadow: 6px 15px 50px rgba(0, 0, 0, 0.5); } }
    @media (max-width: 480px) {
      .projectsBox .linkBox {
        display: flex;
        width: 90%;
        margin: 15px auto; } }
    .projectsBox .linkBox:hover .hoverBox {
      opacity: 1 !important;
      transition: all ease 0.3s; }
    .projectsBox .linkBox:hover .title {
      opacity: 0;
      transition: all ease 0.3s; }
    @media (max-width: 480px) {
      .projectsBox .linkBox:last-child {
        margin-bottom: 0; } }
    .projectsBox .linkBox p {
      line-height: 1.5; }
  .projectsBox .title {
    font-size: 1.5em;
    align-self: flex-end;
    background: rgba(0, 0, 0, 0.5);
    padding: 30px;
    width: 100%;
    transition: all ease 0.3s; }
    @media (max-width: 480px) {
      .projectsBox .title {
        display: none; } }
  .projectsBox .hoverBox {
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 30px;
    opacity: 0;
    transition: all ease 0.3s;
    background: rgba(0, 0, 0, 0.5);
    text-decoration: none; }
    .projectsBox .hoverBox p {
      color: #fff; }
    .projectsBox .hoverBox .link {
      position: relative;
      transition: all ease 0.3s;
      display: block; }
      .projectsBox .hoverBox .link:after {
        content: "";
        background: url(/images/template/link-open.svg) no-repeat;
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        transition: all ease 0.3s; }
      .projectsBox .hoverBox .link:before {
        display: none; }
      .projectsBox .hoverBox .link:hover {
        color: #a9cd51 !important;
        transition: all ease 0.3s; }
        .projectsBox .hoverBox .link:hover:after {
          background: url(/images/template/link-open-hover.svg) no-repeat;
          transition: all ease 0.3s; }
    @media (max-width: 480px) {
      .projectsBox .hoverBox {
        opacity: 1;
        height: auto;
        align-self: flex-end;
        position: relative;
        justify-content: center; }
        .projectsBox .hoverBox p {
          display: none; } }
    .projectsBox .hoverBox .subTitle {
      font-size: 1.3em;
      margin-bottom: 15px;
      color: #fff; }
  .projectsBox .contentBox {
    width: 100%; }

@media (max-width: 480px) {
  .projects {
    margin-bottom: 0; } }

.projects.media {
  margin-top: 20px; }
  .projects.media .linkBox {
    margin-bottom: 30px; }
    @media (min-width: 1024px) {
      .projects.media .linkBox {
        flex-grow: 1;
        width: calc(100% * (1/4) - 15px);
        margin-left: 15px; } }
    @media (min-width: 1024px) {
      .projects.media .linkBox {
        box-shadow: 6px 10px 35px rgba(0, 0, 0, 0.5); } }
  .projects.media .projectsBox {
    flex-wrap: wrap; }
    @media (min-width: 1024px) {
      .projects.media .projectsBox {
        margin: -10px 0 0 -15px; } }
    .projects.media .projectsBox img {
      width: 100%; }

.project.main img {
  background-size: cover;
  width: 100%;
  animation: move 10s linear infinite;
  animation-play-state: paused; }

.project .projectContent {
  padding: 50px;
  background: #f2f2f2;
  align-items: center;
  display: flex; }
  @media (max-width: 480px) {
    .project .projectContent {
      padding: 25px 15px; } }

.project .subTitle {
  color: #fff;
  background: #a9cd51;
  display: inline-block;
  padding: 8px 15px 5px;
  margin-bottom: 15px;
  text-align: center;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase; }

.project .projectImg {
  position: relative;
  overflow: hidden;
  background: #f2f2f2; }
  @media (max-width: 1199px) {
    .project .projectImg {
      display: flex;
      flex-direction: column; }
      .project .projectImg img {
        order: 1; }
      .project .projectImg .caption {
        order: 2; } }
  @media (min-width: 1199px) {
    .project .projectImg:hover img {
      animation-play-state: running; }
    .project .projectImg:hover .caption {
      opacity: 1;
      transition: all ease 0.5s;
      bottom: 0;
      z-index: 99; } }

.project .caption {
  position: absolute;
  bottom: 0;
  left: 10%;
  padding: 30px;
  background: rgba(132, 137, 147, 0.8);
  color: #fff;
  margin-right: 10%;
  z-index: 99; }
  @media (min-width: 1199px) {
    .project .caption {
      bottom: -100px;
      opacity: 0;
      transition: all ease 0.5s; } }
  .project .caption .title {
    line-height: 1.5em;
    margin-bottom: 10px; }
  @media (max-width: 1199px) {
    .project .caption {
      padding: 8px;
      font-size: 10px;
      width: 100%;
      position: static; }
      .project .caption .splitter {
        margin: 0;
        padding: 0; }
        .project .caption .splitter:after {
          display: none; } }

.project .left-aligned .caption {
  left: auto;
  right: 10%;
  margin-left: 10%;
  margin-right: 0; }
  @media (max-width: 1199px) {
    .project .left-aligned .caption {
      margin: 0; } }

@media (max-width: 1024px) {
  .project .left-aligned {
    margin-bottom: 20px; } }

@media (max-width: 1024px) {
  .project .right-aligned:first-of-type {
    margin-bottom: 20px; } }

.project-thumbs #lightboxarea {
  text-align: center;
  margin: 60px 0; }
  .project-thumbs #lightboxarea p {
    margin-bottom: 5px; }
  .project-thumbs #lightboxarea a {
    display: inline-block;
    margin: 5px;
    position: relative;
    width: 135px;
    height: 90px;
    transition: all ease 0.3s; }
    .project-thumbs #lightboxarea a img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }
    .project-thumbs #lightboxarea a:before {
      transition: all ease 0.3s; }
    .project-thumbs #lightboxarea a:hover {
      background: rgba(0, 0, 0, 0.5);
      transition: all ease 0.3s; }
      .project-thumbs #lightboxarea a:hover:before {
        content: "";
        background-image: url("/images/template/maximize.svg");
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-size: 30px 30px;
        transition: all ease 0.3s; }

.project-thumbs .subTitle {
  margin-top: 30px;
  width: 100%;
  text-align: right;
  font-size: 0.8em; }
  @media (max-width: 1024px) {
    .project-thumbs .subTitle {
      margin-right: 5%;
      width: 95%;
      display: inline-block; } }
  @media (max-width: 480px) {
    .project-thumbs .subTitle {
      text-align: center;
      margin-top: 10px; } }
  .project-thumbs .subTitle span {
    color: #666; }

.twoColImg {
  align-items: center;
  margin-bottom: 80px; }
  .twoColImg p:last-child {
    margin-bottom: 0; }
  .twoColImg .rightSide img {
    max-width: 80%;
    float: right; }
    @media (max-width: 640px) {
      .twoColImg .rightSide img {
        float: none;
        display: block;
        margin: 20px auto; } }
  .twoColImg .subTitle {
    color: #fff;
    background: #a9cd51;
    display: inline-block;
    padding: 8px 15px 5px;
    margin-bottom: 15px;
    text-align: center;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase; }
    @media (max-width: 640px) {
      .twoColImg .subTitle {
        margin: 25px 0 15px; } }

.contact .title {
  font-size: 1.4em;
  font-weight: 300;
  margin-bottom: 15px; }

.contact .details {
  margin-bottom: 25px; }
  .contact .details li {
    margin-bottom: 10px; }

.contact .map iframe {
  width: 100%;
  min-height: 400px; }

.address {
  margin-bottom: 15px;
  display: inline-block; }
  .address li {
    margin-bottom: 5px; }

.question {
  padding: 20px 20px 20px 50px;
  margin: 0;
  font-size: 1.4em;
  line-height: 36px;
  position: relative;
  cursor: pointer;
  transition: all ease 0.2s; }
  .question:before {
    content: "+";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    font-size: 1.1em;
    background: #a9cd51;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: all ease 0.2s; }
  .question:hover {
    background: #f2f2f2;
    transition: all ease 0.2s;
    padding-left: 75px; }
    .question:hover:before {
      left: 25px;
      transition: all ease 0.2s; }

.faq {
  border-bottom: 1px solid #f2f2f2; }
  .faq:last-child {
    border: none; }

.faqs > h2 {
  margin-top: 30px; }
  .faqs > h2:first-of-type {
    margin-top: 0; }

.answer {
  background: #fff;
  margin-bottom: 30px; }
  .answer p {
    margin: 0 0 25px 30px; }
    .answer p:last-child {
      margin-bottom: 0; }
  @media (max-width: 480px) {
    .answer {
      padding: 20px; } }

.question.is-active {
  transition: all ease 0.2s;
  margin-bottom: 20px; }
  .question.is-active:before {
    content: "-"; }

.js-collapsible {
  height: 0;
  overflow: hidden;
  transition: all ease 0.2s; }
  .js-collapsible.is-active {
    height: auto; }

@-webkit-keyframes move {
  0% {
    transform-origin: bottom left;
    transform: scale(1); }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  40% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeTwo {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  70% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeThree {
  0% {
    opacity: 0; }
  90% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes downarrow {
  0% {
    bottom: 30px; }
  50% {
    bottom: 10px; }
  100% {
    bottom: 30px; } }

/*# sourceMappingURL=_sourcemaps/styles.css.map */