/* Styles */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
@font-face {
  font-family: 'Cunia';
  src: url("/css/fonts/Cunxia-webfont.eot");
  src: url("/css/fonts/Cunia-webfont.eot?#iefix") format("embedded-opentype"), url("/css/fonts/Cunia-webfont.woff2") format("woff2"), url("/css/fonts/Cunia-webfont.woff") format("woff"), url("/css/fonts/Cunia-webfont.ttf") format("truetype"), url("/css/fonts/Cunia-webfont.svg#boldbold") format("svg");
  font-weight: normal;
  font-style: normal; }
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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1.3; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

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

img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%; }
  img.featured-img {
    margin-top: 60px;
    max-width: 200px; }
  img.shadow {
    -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); }

.icons .slick-slide img {
  box-shadow: none; }

.circle {
  border-radius: 50%;
  max-width: 300px !important; }

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  overflow: hidden; }
  html .slides, html > .dg, body .slides, body > .dg {
    display: none; }

body {
  background-color: white;
  -webkit-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -moz-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -ms-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -o-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
 /*
&#work {
	h1 {
		@include transition(all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95));
		opacity: 1;
	}
}*/ }
  body.menu-is-active {
    height: 100vh;
    width: 100vw; }
  body .animsition-loading, body .animsition-loading:after {
    width: 84px;
    height: 84px;
    opacity: 0;
    z-index: 99999;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease; }
  body .animsition-loading-1, body .animsition-loading-1:after {
    opacity: 0.65;
    width: 90px;
    height: 90px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -45px;
    z-index: 99999999; }
  body .animsition-loading, body .animsition-loading:after {
    opacity: 1;
    width: 120px;
    height: 120px;
    z-index: 99999; }
  body.nav-active {
    padding-left: 120px;
   /*
  &#work {
  	h1 {
  		padding-left:$base-percentage-size;
  	}
  }*/ }
    body.nav-active #sidebar {
      left: 0; }
  body.downscroll section > .row, body#portfolio-item section > .row {
    position: relative;
    -webkit-transition: all 0.66s ease;
    -moz-transition: all 0.66s ease;
    -ms-transition: all 0.66s ease;
    -o-transition: all 0.66s ease;
    transition: all 0.66s ease;
    opacity: 0;
    top: 100px; }
  body.downscroll section.active > .row, body#portfolio-item section.active > .row {
    top: 0;
    opacity: 1; }
  body.downscroll section:before, body#portfolio-item section:before {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -10%;
    height: 120px;
    width: 120%;
    border-radius: 0% 0% 100% 100%;
    background-color: white; }
  body.downscroll section.grey:before, body#portfolio-item section.grey:before {
    background-color: #eff4f6; }
  body.downscroll section.aqua, body#portfolio-item section.aqua {
    background-image: -webkit-linear-gradient(top, #29cae6 0%, #32fedf 100%);
    background-image: -o-linear-gradient(top, #29cae6 0%, #32fedf 100%);
    background-image: linear-gradient(to bottom, #29cae6 0%, #32fedf 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29CAE6', endColorstr='#FF32FEDF', GradientType=0); }
    body.downscroll section.aqua:before, body#portfolio-item section.aqua:before {
      z-index: -1;
      background-color: #32fedf; }

span.grey {
  color: #c1ccd0; }

a:focus {
  outline: none; }

.main {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
  .main::-webkit-scrollbar {
    display: none; }

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-bottom: 360px;
  max-width: 640px;
  height: 0;
  margin: 60px auto; }
  .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

#sidebar {
  -webkit-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -moz-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -ms-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -o-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  width: 120px;
  height: 100%;
  position: fixed;
  left: -120px;
  top: 0;
  z-index: 100; }
  #sidebar::before {
    content: '';
    background: rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 0;
    width: 120px;
    height: 120px;
    display: block; }

@media (max-width: 960px) {
  .nav-item2 {
    display: none !important; } }

.loading {
  position: fixed;
  height: 120px;
  width: 120px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url("../img/logo-no-border.svg");
  background-size: 125%;
  background-position: center;
  z-index: 99999; }
  .loading:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 4px solid #32fedf;
    border-left: 4px solid #32fedf;
    border-right: 4px solid #32fedf;
    border-top: 4px solid #eff4f6;
    border-radius: 100%;
    height: 100%;
    width: 100%;
    animation: rot .6s infinite linear; }

@keyframes rot {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
span.corner-link {
  display: none; }

#sidebar {
  background-color: #32fedf; }

#sidebar.complete {
  background-color: #4bd7eb; }

a.logo {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  padding: 12px;
  margin: 0;
  z-index: 999;
  width: 120px;
  height: 120px; }
  a.logo img {
    display: block;
    max-width: 100%;
    height: auto; }
  a.logo svg path {
    -webkit-transition: all 0.66s ease;
    -moz-transition: all 0.66s ease;
    -ms-transition: all 0.66s ease;
    -o-transition: all 0.66s ease;
    transition: all 0.66s ease;
    fill: white; }
  a.logo svg circle {
    -webkit-transition: all 0.66s ease;
    -moz-transition: all 0.66s ease;
    -ms-transition: all 0.66s ease;
    -o-transition: all 0.66s ease;
    transition: all 0.66s ease;
    stroke: white; }

.aqua a.logo svg path {
  fill: #262626; }
.aqua a.logo svg circle {
  stroke: #262626; }

h1, h2, h3, h4, h5 {
  font-family: "Cunia", "Open Sans", sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: white;
  margin: 0;
  line-height: 1;
  margin-bottom: 24px; }
  h1 span.aqua, h2 span.aqua, h3 span.aqua, h4 span.aqua, h5 span.aqua {
    color: #32fedf; }
  h1 span.grey, h2 span.grey, h3 span.grey, h4 span.grey, h5 span.grey {
    color: #c1ccd0; }
  @media (max-width: 600px) {
    h1, h2, h3, h4, h5 {
      letter-spacing: -1px; } }

.hide-desktop {
  display: none !important; }
  @media (max-width: 960px) {
    .hide-desktop {
      display: block !important; } }

.hide-mobile {
  display: none !important; }
  @media (min-width: 961px) {
    .hide-mobile {
      display: block !important; } }

h1 {
  font-size: 60px; }
  @media (max-width: 600px) {
    h1 {
      letter-spacing: -2px; } }

h2 {
  font-size: 50px; }

h3 {
  font-size: 40px; }

h4 {
  font-size: 30px; }

h5 {
  font-size: 20px; }

p {
  color: white;
  font-weight: bold;
  margin-bottom: 24px; }
  p:last-child {
    margin-bottom: 0 !important; }

a {
  color: #32fedf;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

main {
  overflow: hidden; }

#home main {
  width: 500vw; }
  #home main section.style-1 .container {
    padding-top: 60px; }
    #home main section.style-1 .container h1 span {
      color: white; }

body#work h1 {
  font-size: 50px;
  color: #262626;
  font-size: 50px;
  position: fixed;
  z-index: 998;
  top: -240px;
  left: 120px;
  /* right: 0; */
  bottom: 0;
  margin: auto;
  height: 50px; }
body#work p {
  color: #262626; }
body#work main {
  width: 200vw; }

#portfolio-item section.style-alternate .container {
  padding-top: 60px;
  transform: none;
  padding: 120px 0 30px 0;
  max-width: 100%; }

@media (max-width: 960px) {
  #home section.style-alternate .container, #portfolio-item section.style-alternate .container {
    transform: none;
    padding: 120px 60px 200px 60px;
    max-width: 100%; } }
section {
  position: relative;
  float: left;
  height: 100vh;
  width: 100vw; }
  @media (max-width: 960px) {
    section {
      height: auto; } }
  section:last-child {
    width: calc(100vw - 90px); }
  section h1 {
    color: #32fedf; }
    section h1 span.sub {
      display: block;
      color: white; }
  section h2 span.sub, section h3 span.sub {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    color: #c1ccd0; }
  section:before {
    content: '';
    position: absolute;
    top: -10vh;
    left: -120px;
    height: 120vh;
    width: 120px;
    border-radius: 100% 0% 0% 100%;
    background-color: white; }
    @media (max-width: 960px) {
      section:before {
        top: auto;
        bottom: -59px;
        left: -10%;
        height: 60px;
        width: 120%;
        border-radius: 0% 0% 100% 100%;
        background-color: white;
        z-index: 1; } }
  section.style {
    background: white; }
    section.style h1 span.sub {
      color: #262626; }
    section.style p {
      color: #262626; }
    section.style:before {
      background: white; }
  section.style-alternate {
    width: 767px;
    background: #262626; }
    section.style-alternate:before {
      background: #262626; }
    section.style-alternate .button {
      background-color: #32fedf;
      border-color: #32fedf;
      color: #262626;
      margin-right: 0; }
      section.style-alternate .button:hover {
        background-color: white;
        border-color: white; }
    section.style-alternate h2 {
      color: #32fedf; }
  section.style-1 {
    /* fallback/image non-cover color */
    background-color: #29cae6;
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(left, #29cae6 0%, #32fedf 100%);
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #29cae6), color-stop(100%, #32fedf));
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient(left, #29cae6 0%, #32fedf 100%);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(left, #29cae6 0%, #32fedf 100%);
    /* IE10+ */
    background: -ms-linear-gradient(left, #29cae6 0%, #32fedf 100%);
    /* Standard */
    background: linear-gradient(to right, #29cae6 0%, #32fedf 100%);
    /* IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
    @media (max-width: 960px) {
      section.style-1 {
        background-image: -webkit-linear-gradient(top, #29cae6 0%, #32fedf 100%);
        background-image: -o-linear-gradient(top, #29cae6 0%, #32fedf 100%);
        background-image: linear-gradient(to bottom, #29cae6 0%, #32fedf 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29CAE6', endColorstr='#FF32FEDF', GradientType=0); } }
    section.style-1 h1 {
      color: #262626; }
    section.style-1 p {
      color: #262626; }
    section.style-1:before {
      background: #29cae6; }
  section.style-2 {
    /* fallback/image non-cover color */
    background-color: #2ca8fc;
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(left, #2ca8fc 0%, #29cae6 100%);
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #2ca8fc), color-stop(100%, #29cae6));
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient(left, #2ca8fc 0%, #29cae6 100%);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(left, #2ca8fc 0%, #29cae6 100%);
    /* IE10+ */
    background: -ms-linear-gradient(left, #2ca8fc 0%, #29cae6 100%);
    /* Standard */
    background: linear-gradient(to right, #2ca8fc 0%, #29cae6 100%);
    /* IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
    section.style-2:before {
      background: #2ca8fc; }
  section.style-3 {
    /* fallback/image non-cover color */
    background-color: #1a35fb;
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(left, #1a35fb 0%, #2ca8fc 100%);
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1a35fb), color-stop(100%, #2ca8fc));
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient(left, #1a35fb 0%, #2ca8fc 100%);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(left, #1a35fb 0%, #2ca8fc 100%);
    /* IE10+ */
    background: -ms-linear-gradient(left, #1a35fb 0%, #2ca8fc 100%);
    /* Standard */
    background: linear-gradient(to right, #1a35fb 0%, #2ca8fc 100%);
    /* IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
    section.style-3:before {
      background: #1a35fb; }
  section.style-4 {
    /* fallback/image non-cover color */
    background-color: #1a35fb;
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(left, #1a35fb 0%, #1a35fb 100%);
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1a35fb), color-stop(100%, #1a35fb));
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient(left, #1a35fb 0%, #1a35fb 100%);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(left, #1a35fb 0%, #1a35fb 100%);
    /* IE10+ */
    background: -ms-linear-gradient(left, #1a35fb 0%, #1a35fb 100%);
    /* Standard */
    background: linear-gradient(to right, #1a35fb 0%, #1a35fb 100%);
    /* IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
    section.style-4:before {
      background: #1a35fb; }
  section.style-5 {
    /* fallback/image non-cover color */
    background-color: #1b5fe4;
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(left, #1b5fe4 0%, #1a35fb 100%);
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1b5fe4), color-stop(100%, #1a35fb));
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient(left, #1b5fe4 0%, #1a35fb 100%);
    /* Opera 11.10+ */
    background-image: -o-linear-gradient(left, #1b5fe4 0%, #1a35fb 100%);
    /* IE10+ */
    background: -ms-linear-gradient(left, #1b5fe4 0%, #1a35fb 100%);
    /* Standard */
    background: linear-gradient(to right, #1b5fe4 0%, #1a35fb 100%);
    /* IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
    section.style-5:before {
      background: #1b5fe4; }
  section .container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    padding-right: 240px;
    padding-left: 120px;
    padding-left: 120px;
    width: 100%; }

section.grey {
  background: #eff4f6; }
  section.grey h3 span.sub {
    color: #c1ccd0; }
  section.grey:before {
    background: #eff4f6; }
section.aqua {
  background-image: -webkit-linear-gradient(top, #32fedf 0%, #29cae6 100%);
  background-image: -o-linear-gradient(top, #32fedf 0%, #29cae6 100%);
  background-image: linear-gradient(to bottom, #32fedf 0%, #29cae6 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF32FEDF', endColorstr='#FF29CAE6', GradientType=0); }
  section.aqua:before {
    background: #29cae6; }
section.no-overflow {
  overflow: hidden; }
section.right-side .column-1-2, section.right-side .column-1-3, section.right-side .column-2-3 {
  float: right;
  padding-right: 0; }
  section.right-side .column-1-2:first-child, section.right-side .column-1-3:first-child, section.right-side .column-2-3:first-child {
    padding-left: 120px; }
section.right-side .column-1-3 {
  float: left; }
section .container {
  -webkit-transition: all 0.66s ease;
  -moz-transition: all 0.66s ease;
  -ms-transition: all 0.66s ease;
  -o-transition: all 0.66s ease;
  transition: all 0.66s ease;
  position: relative;
  left: 300px;
  opacity: 0; }
section.active .container {
  opacity: 1;
  left: 0px; }

.percent-container {
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  overflow: hidden;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 99;
  -webkit-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -moz-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -ms-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -o-transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  transition: all 0.66s cubic-bezier(0.94, 0.06, 0.05, 0.95); }
  .percent-container .percent {
    z-index: 1;
    position: relative;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
    height: 8px;
    width: 100%;
    left: 0;
    /* bottom: 90px; */
    z-index: 999; }
    .percent-container .percent .fill {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      transition: background 0.15s ease; }

.nav-active .percent-container {
  padding-left: 240px; }

span.corner-link {
  position: absolute;
  background: #32fedf;
  bottom: -480px;
  right: -480px;
  width: 0px;
  height: 0px;
  z-index: 1;
  border-radius: 50% 50% 50% 50%;
  overflow: hidden;
  -webkit-transition: all 1s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -moz-transition: all 1s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -ms-transition: all 1s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  -o-transition: all 1s cubic-bezier(0.94, 0.06, 0.05, 0.95);
  transition: all 1s cubic-bezier(0.94, 0.06, 0.05, 0.95); }
  span.corner-link span {
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    position: absolute;
    color: #262626;
    position: absolute;
    right: 240px;
    text-align: right;
    position: absolute;
    top: 45px;
    width: 190px;
    text-align: right; }
    span.corner-link span h3 {
      color: #262626 !important;
      font-size: 24px !important;
      max-width: 135px;
      float: right;
      margin-bottom: 12px; }
    span.corner-link span p {
      float: left;
      color: #262626 !important;
      font-size: 12px !important;
      line-height: 1.5 !important;
      margin-bottom: 12px; }

.active span.corner-link {
  bottom: -240px;
  right: -220px;
  width: 480px;
  height: 480px;
  z-index: 1; }
  .active span.corner-link span .button {
    margin: 0px 0px 0px 12px;
    font-size: 12px;
    padding: 12px 18px;
    background: white;
    border-color: white; }
  .active span.corner-link:hover {
    background-color: white;
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -ms-transition: all 0s ease;
    -o-transition: all 0s ease;
    transition: all 0s ease; }
    .active span.corner-link:hover span .button {
      background-color: #32fedf;
      border-color: #32fedf; }
      .active span.corner-link:hover span .button:hover {
        color: white;
        background: #262626;
        border-color: #262626; }

nav.arrows {
  position: absolute;
  z-index: 999;
  bottom: 0;
  margin: 50px 0;
  width: 100%;
  padding: 0 100px; }
  nav.arrows a {
    display: block;
    float: left;
    width: 80px;
    height: 80px;
    background: none;
    border-radius: 50%;
    text-indent: 1000px;
    overflow: hidden;
    border: 4px solid white; }
    nav.arrows a.right {
      float: right; }
    nav.arrows a:hover {
      cursor: pointer;
      background: #fff;
      border-color: white; }

nav.navigation {
  position: absolute;
  bottom: 0;
  z-index: 999;
  width: 200px;
  left: 0;
  right: 0;
  margin: auto; }
  nav.navigation a {
    display: block;
    float: left;
    background: #32fedf;
    width: 20px;
    font-size: 15px;
    text-align: center;
    margin: 0 10px; }

nav ul a:hover {
  background: none; }

#right {
  position: relative;
  display: flex;
  align-self: center;
  flex-direction: row;
  width: 200px;
  padding: 10px 0;
  margin-top: 35px; }

.reh {
  width: 50px;
  height: 50px;
  position: relative;
  box-shadow: 15px -15px #fff;
  transform: rotate(45deg);
  border-radius: 5px; }

.m1 {
  animation: ani3 1s steps(5, start) infinite;
  -webkit-animation: ani3 1s steps(5, start) infinite; }

.m2 {
  animation: ani2 1s steps(5, start) infinite;
  -webkit-animation: ani2 1s steps(5, start) infinite; }

.m3 {
  animation: ani1 1s steps(5, start) infinite;
  -webkit-animation: ani1 1s steps(5, start) infinite; }

@keyframes ani1 {
  0% {
    opacity: 0.1; }
  11% {
    opacity: 0.1; }
  22% {
    opacity: 0.1; }
  33% {
    opacity: 0.15; }
  44% {
    opacity: 0.25; }
  55% {
    opacity: 0.5; }
  66% {
    opacity: 1; }
  77% {
    opacity: 0.5; }
  88% {
    opacity: 0.25; }
  100% {
    opacity: 0.15; } }
@keyframes ani2 {
  0% {
    opacity: 0.1; }
  11% {
    opacity: 0.15; }
  22% {
    opacity: 0.25; }
  33% {
    opacity: 0.5; }
  44% {
    opacity: 1; }
  55% {
    opacity: 0.5; }
  66% {
    opacity: 0.25; }
  77% {
    opacity: 0.15; }
  88% {
    opacity: 0.1; }
  100% {
    opacity: 0.1; } }
@keyframes ani3 {
  0% {
    opacity: 0.25; }
  11% {
    opacity: 0.5; }
  22% {
    opacity: 1; }
  33% {
    opacity: 0.5; }
  44% {
    opacity: 0.25; }
  55% {
    opacity: 0.15; }
  66% {
    opacity: 0.1; }
  77% {
    opacity: 0.1; }
  88% {
    opacity: 0.1; }
  100% {
    opacity: 0.15; } }
/* work.html */
#portfolio-section, section#work {
  width: calc(((240px + 120px)*6) + 240px + 0px); }

#work-page #portfolio-section, #work-page section#work {
  width: calc(((240px + 120px)*8) + 240px + 120px); }
#work-page #work .container {
  padding-top: 40px; }

#work .container {
  max-width: none;
  width: 100%;
  padding-right: 0;
  padding-top: 240px;
  float: left;
  opacity: 1;
  left: 0; }
  #work .container h1 {
    margin-bottom: 60px; }
  #work .container .big-link {
    position: absolute;
    top: 60px;
    right: 0;
    margin-right: 240px;
    font-size: 36px; }
    @media (max-width: 960px) {
      #work .container .big-link {
        display: none; } }
    #work .container .big-link svg {
      margin-left: 6px; }
    #work .container .big-link a {
      color: #262626; }
      #work .container .big-link a:hover {
        color: white;
        text-decoration: none; }
        #work .container .big-link a:hover:after {
          content: '';
          width: 100%;
          margin: auto;
          height: 5px;
          background: white;
          position: absolute;
          bottom: -10px;
          left: 0;
          right: 0; }

.dummy-img {
  display: block;
  width: 240px;
  height: 240px;
  background-color: #262626; }

.portfolio-item.feature .portfolio-img {
  width: 84px;
  height: 84px; }
  .portfolio-item.feature .portfolio-img img {
    width: 48px;
    height: 48px; }

.portfolio-img {
  -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  height: 240px;
  width: 240px;
  background: #262626; }
  .portfolio-img img {
    -webkit-transition: all 0.33s ease;
    -moz-transition: all 0.33s ease;
    -ms-transition: all 0.33s ease;
    -o-transition: all 0.33s ease;
    transition: all 0.33s ease; }
  .portfolio-img:hover img {
    opacity: 0.75; }
  .portfolio-img.freelance {
    background-image: -webkit-linear-gradient(top, #32fedf 0%, #00ffd8 100%);
    background-image: -o-linear-gradient(top, #32fedf 0%, #00ffd8 100%);
    background-image: linear-gradient(to bottom, #32fedf 0%, #00ffd8 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF32FEDF', endColorstr='#FF00FFD8', GradientType=0); }
    .portfolio-img.freelance img {
      width: 120px;
      height: 120px; }
  .portfolio-img.bournemouth-uni {
    background: #ffffff; }
    .portfolio-img.bournemouth-uni img {
      width: 120px;
      height: 120px; }
  .portfolio-img.kolab {
    background-image: -webkit-linear-gradient(top, #ff8400 0%, #ff6600 100%);
    background-image: -o-linear-gradient(top, #ff8400 0%, #ff6600 100%);
    background-image: linear-gradient(to bottom, #ff8400 0%, #ff6600 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFF8400', endColorstr='#FFFF6600', GradientType=0); }
  .portfolio-img.intergage {
    background-image: -webkit-linear-gradient(top, #0097ea 0%, #0082ca 100%);
    background-image: -o-linear-gradient(top, #0097ea 0%, #0082ca 100%);
    background-image: linear-gradient(to bottom, #0097ea 0%, #0082ca 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0097EA', endColorstr='#FF0082CA', GradientType=0); }
  .portfolio-img.bfx {
    background: #fccc46; }
  .portfolio-img.paintworks {
    background: #ff4b62; }
    .portfolio-img.paintworks img {
      width: 120px;
      height: 120px; }
  .portfolio-img.uni {
    background-image: -webkit-linear-gradient(top, #9933ff 0%, #6600ff 100%);
    background-image: -o-linear-gradient(top, #9933ff 0%, #6600ff 100%);
    background-image: linear-gradient(to bottom, #9933ff 0%, #6600ff 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9933FF', endColorstr='#FF6600FF', GradientType=0); }
  .portfolio-img.illustration {
    background-image: -webkit-linear-gradient(top, #e1e8eb 0%, #c1ccd0 100%);
    background-image: -o-linear-gradient(top, #e1e8eb 0%, #c1ccd0 100%);
    background-image: linear-gradient(to bottom, #e1e8eb 0%, #c1ccd0 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE1E8EB', endColorstr='#FFC1CCD0', GradientType=0); }
    .portfolio-img.illustration img {
      width: 100px;
      height: 100px; }
  .portfolio-img img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 140px;
    height: 140px;
    display: block;
    margin: auto; }

#work.active .portfolio .portfolio-item {
  top: 0;
  opacity: 1; }
  #work.active .portfolio .portfolio-item:nth-child(1) {
    transition-delay: .2s; }
  #work.active .portfolio .portfolio-item:nth-child(2) {
    transition-delay: .4s; }
  #work.active .portfolio .portfolio-item:nth-child(3) {
    transition-delay: .6s; }
  #work.active .portfolio .portfolio-item:nth-child(4) {
    transition-delay: .8s; }
  #work.active .portfolio .portfolio-item:nth-child(5) {
    transition-delay: 1s; }
  #work.active .portfolio .portfolio-item:nth-child(6) {
    transition-delay: 1.2s; }
  #work.active .portfolio .portfolio-item:nth-child(7) {
    transition-delay: 1.4s; }
  #work.active .portfolio .portfolio-item:nth-child(8) {
    transition-delay: 1.6s; }
  #work.active .portfolio .portfolio-item:nth-child(9) {
    transition-delay: 1.8s; }
  #work.active .portfolio .portfolio-item:nth-child(10) {
    transition-delay: 2s; }
#work .portfolio {
  position: relative;
  float: left;
  display: block; }
  #work .portfolio .portfolio-item {
    top: 0;
    float: left;
    display: inline-block;
    margin-right: 120px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    position: relative;
    top: 120px;
    opacity: 0; }
    #work .portfolio .portfolio-item:hover a {
      text-decoration: none; }
    #work .portfolio .portfolio-item:last-child {
      margin-right: 0; }
    #work .portfolio .portfolio-item h2 {
      font-size: 20px;
      line-height: 1.2;
      margin: 0;
      margin-top: 12px;
      color: #262626; }
    #work .portfolio .portfolio-item p {
      color: white;
      font-size: 17px;
      font-weight: 100; }

#portfolio-end {
  width: 300px;
  z-index: 999; }

#hide-header {
  position: absolute;
  width: 10px;
  height: 50px;
  display: block;
  top: -325px;
  left: -220px;
  bottom: 0;
  margin: auto;
  z-index: 99999999;
  -webkit-box-shadow: -5px 0px 10px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: -5px 0px 10px 0px rgba(50, 50, 50, 0.5);
  box-shadow: -5px 0px 10px 0px rgba(50, 50, 50, 0.5);
  content: ''; }
  #hide-header:after {
    position: absolute;
    content: '';
    width: 108px;
    height: 60px;
    background-color: yellow;
    display: block;
    top: 0px;
    bottom: 0;
    margin: auto;
    left: -5px; }

nav#main-navigation-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000; }
  nav#main-navigation-fixed-top ul {
    padding: 0;
    margin: 0;
    list-style: none; }
    nav#main-navigation-fixed-top ul li {
      float: left; }
      nav#main-navigation-fixed-top ul li a {
        padding: 18px 24px;
        padding-left: 12px;
        display: block;
        font-size: 16px;
        background: white;
        color: #262626;
        font-weight: bold; }
        nav#main-navigation-fixed-top ul li a:hover {
          color: #32fedf;
          text-decoration: none; }
      nav#main-navigation-fixed-top ul li#featured-link a {
        background: #262626;
        padding: 18px 24px;
        color: #fff; }
        nav#main-navigation-fixed-top ul li#featured-link a:hover {
          background: #32fedf;
          color: #262626; }
      nav#main-navigation-fixed-top ul li:first-child a {
        padding-right: 12px;
        padding-left: 24px; }

#particle-slider {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(100% + 300px);
  margin: auto;
  visibility: hidden;
  -webkit-transition: all 0.33s ease;
  -moz-transition: all 0.33s ease;
  -ms-transition: all 0.33s ease;
  -o-transition: all 0.33s ease;
  transition: all 0.33s ease;
  overflow: hidden; }

.menu-is-active #particle-slider {
  top: -120px; }
.menu-is-active .animsition-overlay-slide {
  position: fixed; }

.slide {
  width: 300px;
  height: 300px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

.draw {
  position: fixed;
  z-index: 1; }

#next-arrow {
  display: none;
  position: fixed;
  bottom: 75px;
  right: 10vw;
  width: 36px;
  height: 36px;
  background: white;
  z-index: 999;
  border-radius: 50%;
  cursor: pointer; }

.sidescroll .menu-is-active .animsition-overlay {
  overflow-y: hidden; }

.downscroll .menu-is-active .animsition-overlay {
  overflow-x: hidden; }

.bg-init, .animsition-overlay-slide {
  background-color: white;
  z-index: 9999; }

.overlay-slide-in-right:before, .overlay-slide-out-right:before, .overlay-slide-in-left:before, .overlay-slide-out-left:before {
  content: '';
  position: absolute;
  top: -10vh;
  left: -120px;
  height: 120vh;
  width: 120px;
  border-radius: 100% 0% 0% 100%;
  background: white; }

.overlay-slide-in-top:before, .overlay-slide-out-top:before, .overlay-slide-in-bottom:before, .overlay-slide-out-bottom:before {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -10%;
  height: 120px;
  width: 120%;
  border-radius: 0% 0% 100% 100%;
  background-color: white;
  z-index: 999; }

.overlay-slide-in-top, .overlay-slide-out-top {
  margin-top: -120px; }

.overlay-slide-in-bottom, .overlay-slide-out-bottom {
  margin-bottom: -120px; }
  .overlay-slide-in-bottom:before, .overlay-slide-out-bottom:before {
    bottom: auto;
    top: -120px;
    border-radius: 100% 100% 0% 0%; }

.overlay-slide-in-right {
  margin-right: -120px; }

.overlay-slide-in-left, .overlay-slide-out-left {
  margin-left: -120px; }
  .overlay-slide-in-left:before, .overlay-slide-out-left:before {
    left: auto;
    right: -120px;
    border-radius: 0% 100% 100% 0%; }

#portfolio-item a:hover {
  text-decoration: none; }
#portfolio-item h1 {
  font-size: 60px; }
#portfolio-item h2 {
  font-size: 36px; }
#portfolio-item h3 {
  font-size: 27px; }
#portfolio-item h4 {
  font-size: 23px; }
#portfolio-item section {
  height: auto;
  width: 100%;
  padding: 60px 0;
  padding-bottom: 60px; }
  #portfolio-item section.prev-next {
    background: #e1e8eb; }
    #portfolio-item section.prev-next:before {
      background-color: #e1e8eb; }
    #portfolio-item section.prev-next:after {
      content: '';
      width: 1px;
      background: #c1ccd0;
      height: 90px;
      position: absolute;
      z-index: 99;
      left: 0;
      right: 0;
      top: 60px;
      bottom: 0;
      margin: auto; }
    #portfolio-item section.prev-next .row {
      padding: 30px 120px;
      padding-top: 60px; }
    #portfolio-item section.prev-next .column-1-2 {
      padding-right: 0 !important;
      width: 50% !important; }
      #portfolio-item section.prev-next .column-1-2 a {
        display: block;
        height: 100%;
        width: 100%;
        position: relative;
        height: 120px;
        z-index: 1; }
        #portfolio-item section.prev-next .column-1-2 a h4, #portfolio-item section.prev-next .column-1-2 a h5 {
          margin-bottom: 0;
          padding-bottom: 24px;
          position: absolute; }
        #portfolio-item section.prev-next .column-1-2 a > * {
          color: #c1ccd0; }
        #portfolio-item section.prev-next .column-1-2 a img {
          max-width: 120px;
          margin: auto; }
        #portfolio-item section.prev-next .column-1-2 a svg {
          font-size: 24px;
          position: absolute;
          bottom: -24px;
          margin: auto; }
        #portfolio-item section.prev-next .column-1-2 a:hover > * {
          color: #262626; }
      #portfolio-item section.prev-next .column-1-2:first-child a {
        text-align: left;
        padding-right: 60px; }
        #portfolio-item section.prev-next .column-1-2:first-child a svg, #portfolio-item section.prev-next .column-1-2:first-child a h4, #portfolio-item section.prev-next .column-1-2:first-child a h5 {
          left: 0; }
      #portfolio-item section.prev-next .column-1-2:last-child a {
        text-align: right;
        padding-left: 60px; }
        #portfolio-item section.prev-next .column-1-2:last-child a svg, #portfolio-item section.prev-next .column-1-2:last-child a h4, #portfolio-item section.prev-next .column-1-2:last-child a h5 {
          right: 0; }
  #portfolio-item section.style-alternate {
    text-align: center;
    padding-bottom: 30px; }
    #portfolio-item section.style-alternate:before {
      background-color: #262626; }
    #portfolio-item section.style-alternate h1, #portfolio-item section.style-alternate h2, #portfolio-item section.style-alternate h3, #portfolio-item section.style-alternate h4, #portfolio-item section.style-alternate h5 {
      color: #32fedf; }
    #portfolio-item section.style-alternate p {
      color: white; }
  #portfolio-item section h1, #portfolio-item section h2, #portfolio-item section h3, #portfolio-item section h4, #portfolio-item section h5, #portfolio-item section p {
    color: #262626; }
  #portfolio-item section p {
    font-size: 17px;
    line-height: 27px;
    font-weight: 100;
    left: 0;
    opacity: 1; }
    #portfolio-item section p.intro {
      margin-top: 60px;
      font-size: 27px;
      line-height: 1.5;
      margin-bottom: 24px; }
  #portfolio-item section blockquote {
    margin: 60px 0;
    margin-bottom: 0; }
    #portfolio-item section blockquote a {
      color: #262626; }
    #portfolio-item section blockquote p {
      font-weight: bold;
      /* font-family: $header-font; */
      margin-bottom: 8px;
      font-size: 24px;
      text-align: right;
      font-weight: 100;
      line-height: 1.3;
      color: #acbfc6;
      padding-top: 50px; }
    #portfolio-item section blockquote span {
      font-size: 13px;
      text-align: right;
      width: 100%;
      display: block;
      font-style: italic; }
  #portfolio-item section .row {
    display: flex;
    padding: 90px 120px 60px 120px;
    margin: 0 auto; }
    #portfolio-item section .row .column-1-3 {
      width: calc(100%/3);
      flex: 1; }
    #portfolio-item section .row .column-2-3 {
      width: calc((100%/3)*2);
      flex: 2; }
    #portfolio-item section .row .column-1-2 {
      width: calc(100%/2);
      flex: 1; }
    #portfolio-item section .row .column-1-1 {
      width: 100%;
      float: left; }
      #portfolio-item section .row .column-1-1.middle {
        max-width: 960px;
        margin: 0 auto; }
      #portfolio-item section .row .column-1-1 h1, #portfolio-item section .row .column-1-1 h2, #portfolio-item section .row .column-1-1 h3, #portfolio-item section .row .column-1-1 h4, #portfolio-item section .row .column-1-1 h5 {
        padding-top: 60px; }
    #portfolio-item section .row .column-1-3, #portfolio-item section .row .column-1-2, #portfolio-item section .row .column-2-3 {
      position: relative;
      padding-right: 120px;
      float: left;
      min-height: 1px; }
      #portfolio-item section .row .column-1-3 h1, #portfolio-item section .row .column-1-3 h2, #portfolio-item section .row .column-1-3 h3, #portfolio-item section .row .column-1-3 h4, #portfolio-item section .row .column-1-3 h5, #portfolio-item section .row .column-1-2 h1, #portfolio-item section .row .column-1-2 h2, #portfolio-item section .row .column-1-2 h3, #portfolio-item section .row .column-1-2 h4, #portfolio-item section .row .column-1-2 h5, #portfolio-item section .row .column-2-3 h1, #portfolio-item section .row .column-2-3 h2, #portfolio-item section .row .column-2-3 h3, #portfolio-item section .row .column-2-3 h4, #portfolio-item section .row .column-2-3 h5 {
        padding-top: 60px; }
      @media (max-width: 960px) {
        #portfolio-item section .row .column-1-3, #portfolio-item section .row .column-1-2, #portfolio-item section .row .column-2-3 {
          width: 100%;
          display: block;
          flex: none;
          width: 100%;
          padding: 0; } }
    @media (max-width: 960px) {
      #portfolio-item section .row {
        display: block; } }
    #portfolio-item section .row > div:last-child {
      padding-right: 0; }
    #portfolio-item section .row:after {
      content: "";
      display: table;
      clear: both; }
  #portfolio-item section.no-overflow .row {
    padding-bottom: 60px; }
  #portfolio-item section.section.style-1 {
    padding: 120px 120px;
    background-image: -webkit-linear-gradient(top, #29cae6 0%, #32fedf 100%);
    background-image: -o-linear-gradient(top, #29cae6 0%, #32fedf 100%);
    background-image: linear-gradient(to bottom, #29cae6 0%, #32fedf 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29CAE6', endColorstr='#FF32FEDF', GradientType=0); }
    #portfolio-item section.section.style-1 h2 {
      color: white;
      margin-bottom: 0; }
    #portfolio-item section.section.style-1 .container {
      padding: 0;
      padding-top: 120px;
      margin: 0;
      top: 0;
      left: 0;
      position: relative;
      transform: none; }
    #portfolio-item section.section.style-1:before {
      background-color: #32fedf;
      z-index: -1; }
  #portfolio-item section.section.intro-section p {
    margin: 0; }
  #portfolio-item section.section.intro-section .row:first-child {
    padding-bottom: 60px; }
  #portfolio-item section.section.intro-section .row:last-child {
    padding-top: 0; }
    #portfolio-item section.section.intro-section .row:last-child .column-1-3 {
      padding-right: 60px; }
  #portfolio-item section.stats .row .column-1-3 {
    padding: 0;
    text-align: center; }
  #portfolio-item section.stats h4 {
    color: #32fedf;
    font-size: 72px;
    padding: 0;
    margin-bottom: 12px; }
  #portfolio-item section.stats p {
    margin-left: 5px; }
  #portfolio-item section.stats.aqua {
    background-image: -webkit-linear-gradient(top, #29cae6 0%, #32fedf 100%);
    background-image: -o-linear-gradient(top, #29cae6 0%, #32fedf 100%);
    background-image: linear-gradient(to bottom, #29cae6 0%, #32fedf 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF29CAE6', endColorstr='#FF32FEDF', GradientType=0); }
    #portfolio-item section.stats.aqua:before {
      background-color: #32fedf; }
    #portfolio-item section.stats.aqua h4 {
      color: #262626;
      opacity: 0.5; }
  #portfolio-item section:before {
    content: '';
    position: absolute;
    top: auto;
    bottom: -60px;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    z-index: 1;
    border-radius: 0;
    background-size: cover; }
#portfolio-item main {
  overflow-x: hidden;
  padding: 0; }

/*.bottom {
	position: absolute;
  background: #9e978e;
  display: inline-block;
  margin: 0 1em 1em 0;
}

.top,
.bottom {
  height: $size;
  width: $size * 2;
}

.right,
.left {
  height: $size * 2;
  width: $size;
}

.top {
  border-top-left-radius: $size * 2;
  border-top-right-radius: $size * 2;
}

.right {
  border-bottom-right-radius: $size * 2;
  border-top-right-radius: $size * 2;
}

.bottom {
  border-bottom-left-radius: $size * 2;
  border-bottom-right-radius: $size * 2;
}

.left {
  border-bottom-left-radius: $size * 2;
  border-top-left-radius: $size * 2;
}

.rotate {
  animation: 1s linear infinite rotate;
  position: relative;
  top: $size * -1;
  transform-origin: 50% 100%;
}

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}*/
/* =========
VARIABLES
========= */
:root {
  --offset-value: 30;
  --btn-size: 60; }

/* =====================
NAVIGATION BACKGROUND
===================== */
#nav-bg {
  transform-origin: center center;
  transition: transform 0.33s;
  transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));
  will-change: transform;
  pointer-events: none;
  background-color: #32fedf; }

/* ======
BUTTON
====== */
.btn {
  position: fixed;
  height: calc(var(--btn-size)*1px);
  width: calc(var(--btn-size)*1px);
  top: 15px;
  right: 15px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  margin: 0;
  padding: 0 15px;
  border: none;
  z-index: 999;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  box-shadow: none !important; }

#toggle-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #32fedf;
  color: #29cae6;
  /*box-shadow: 0 6px 12px rgba(0,0,0,.1);*/
  box-shadow: none;
  transition: transform 0.3s; }
  #toggle-btn span {
    position: relative;
    width: 100%;
    margin-top: -4px; }
    #toggle-btn span + span {
      margin-top: 7px; }
    #toggle-btn span:before, #toggle-btn span:after {
      content: "";
      position: absolute;
      top: 0;
      background: #262626;
      opacity: 0.8;
      height: 100%;
      width: 50%;
      height: 4px;
      transition: 0.25s cubic-bezier(0.6, 0, 0.3, 1);
      transform-origin: center center; }
    #toggle-btn span:before {
      left: 0;
      border-radius: 3px 0 0 3px; }
    #toggle-btn span:after {
      right: 0;
      border-radius: 0 3px 3px 0; }
  #toggle-btn:before {
    content: "";
    transition: 0.2s 0.2s;
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    border-radius: inherit;
    filter: blur(5px);
    z-index: -2; }
  #toggle-btn:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1; }

.menu-is-active #particle-slider {
  display: block;
  visibility: visible;
  z-index: 9999; }
.menu-is-active #toggle-btn {
  z-index: 99999; }
  .menu-is-active #toggle-btn span:nth-of-type(1):before {
    transform: translate3d(3px, 3.5px, 0) rotate(45deg); }
  .menu-is-active #toggle-btn span:nth-of-type(1):after {
    transform: translate3d(-3px, 3.5px, 0) rotate(-45deg); }
  .menu-is-active #toggle-btn span:nth-of-type(3):before {
    transform: translate3d(3px, -3.5px, 0) rotate(-45deg); }
  .menu-is-active #toggle-btn span:nth-of-type(3):after {
    transform: translate3d(-3px, -3.5px, 0) rotate(45deg); }
  .menu-is-active #toggle-btn span:nth-of-type(2):after, .menu-is-active #toggle-btn span:nth-of-type(2):before {
    opacity: 0.0001; }
  .menu-is-active #toggle-btn span:nth-of-type(2):before {
    transform: translateX(-200%); }
  .menu-is-active #toggle-btn span:nth-of-type(2):after {
    transform: translateX(200%); }
  .menu-is-active #toggle-btn span:before {
    transform: scale(0.6);
    transition: 0.2s; }

.button {
  font-family: "Cunia", "Open Sans", sans-serif;
  padding: 14px 32px;
  font-size: 16px;
  line-height: 1;
  background-color: #262626;
  display: inline-block;
  margin-top: 12px;
  border-radius: 100px;
  color: #262626;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 24px;
  border: 2px solid;
  border-color: #262626;
  color: white; }
  .button svg {
    position: absolute;
    right: 24px;
    font-size: 24px;
    color: #262626;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transition: all 0.33s ease;
    -moz-transition: all 0.33s ease;
    -ms-transition: all 0.33s ease;
    -o-transition: all 0.33s ease;
    transition: all 0.33s ease; }
  .button:hover svg {
    right: 12px; }
  .button.ghost {
    background: transparent;
    border-color: #262626;
    color: #262626; }
    .button.ghost:hover {
      border-color: #32fedf; }
    .button.ghost.hover-white:hover {
      background-color: white;
      border-color: white; }
  .button.next {
    -webkit-transition: all 0.33s ease;
    -moz-transition: all 0.33s ease;
    -ms-transition: all 0.33s ease;
    -o-transition: all 0.33s ease;
    transition: all 0.33s ease;
    position: relative;
    padding-right: calc(24px + 46px);
    background-color: #32fedf;
    border-color: #32fedf;
    color: #262626;
    /* &:after {
    	@include transition(all 0.33s ease);
    	width: 46px;
        height: 46px;
        position: absolute;
        right: -13px;
        top: 0;
        display: block;
        font-family: 'FontAwesome';
        content: '\f30b';
        line-height: 46px;
        font-size: 36px;
        opacity: 0.35;
        color: $black;
    } */ }
    .button.next:before {
      width: 48px;
      height: 48px;
      position: absolute;
      right: -2px;
      top: -2px;
      display: block;
      content: '';
      color: white;
      background-color: #32fedf;
      border-radius: 50%;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      -webkit-transition: all 0.33s ease;
      -moz-transition: all 0.33s ease;
      -ms-transition: all 0.33s ease;
      -o-transition: all 0.33s ease;
      transition: all 0.33s ease; }
    .button.next:hover {
      padding-left: 40px;
      background: #32fedf; }
      .button.next:hover svg {
        right: 8px; }
      .button.next:hover:before {
        opacity: 1;
        background: #32fedf;
        background: white;
        text-decoration: none;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%; }
      .button.next:hover:after {
        right: -16px;
        opacity: 1; }
      .button.next:hover svg {
        animation-name: bounceSideSmall;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out; }
  .button:hover {
    background: #32fedf;
    text-decoration: none;
    color: #262626;
    border-color: #32fedf; }
  .button.pdf {
    -webkit-transition: all 0.33s ease;
    -moz-transition: all 0.33s ease;
    -ms-transition: all 0.33s ease;
    -o-transition: all 0.33s ease;
    transition: all 0.33s ease;
    position: relative;
    padding-right: calc(24px + 46px);
    background-color: #32fedf;
    border-color: #32fedf;
    color: #262626; }
    .button.pdf:before {
      width: 48px;
      height: 48px;
      position: absolute;
      right: -2px;
      top: -2px;
      display: block;
      content: '';
      color: white;
      background-color: #32fedf;
      border-radius: 50%;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      -webkit-transition: all 0.33s ease;
      -moz-transition: all 0.33s ease;
      -ms-transition: all 0.33s ease;
      -o-transition: all 0.33s ease;
      transition: all 0.33s ease; }
      @media (max-width: 600px) {
        .button.pdf:before {
          width: 44px;
          height: 44px; } }
    .button.pdf:hover {
      padding-left: 40px;
      background: #32fedf; }
      .button.pdf:hover svg {
        right: 8px; }
      .button.pdf:hover:before {
        opacity: 1;
        background: #32fedf;
        background: white;
        text-decoration: none;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%; }
      .button.pdf:hover:after {
        right: -16px;
        opacity: 1; }
      .button.pdf:hover svg {
        animation-name: bounceSideSmall;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out; }

/* ==========
NAVIGATION
========== */
nav#main-navigation {
  width: 100%;
  height: 100%;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  pointer-events: none; }
  nav#main-navigation ul {
    margin: auto;
    padding: 0;
    margin-bottom: 120px;
    pointer-events: auto;
    text-align: center;
    list-style: none; }
    @media (max-width: 600px) {
      nav#main-navigation ul {
        margin-bottom: auto;
        margin-top: 120px; } }
    nav#main-navigation ul li {
      float: left;
      margin: 0 36px;
      user-select: none;
      transform: translate(-24px, 24px) scale(0.9);
      transition: 0s;
      opacity: 0.0001;
      visibility: hidden;
      will-change: transform; }
      @media (max-width: 960px) {
        nav#main-navigation ul li {
          margin: 0 18px; } }
      @media (max-width: 600px) {
        nav#main-navigation ul li {
          margin: 24px 0;
          display: block;
          width: 100%; } }
      nav#main-navigation ul li a {
        font-family: "Cunia", "Open Sans", sans-serif;
        font-size: 50px;
        font-size: 4.25vw;
        color: #262626;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none; }
        nav#main-navigation ul li a:hover {
          text-decoration: none;
          color: white;
          cursor: pointer; }
          @media (min-width: 601px) {
            nav#main-navigation ul li a:hover:after {
              content: '';
              width: 100%;
              margin: auto;
              height: 8px;
              background: white;
              position: absolute;
              bottom: -6px;
              left: 0;
              right: 0; } }
        @media (max-width: 600px) {
          nav#main-navigation ul li a {
            font-size: 50px; } }

.menu-is-active nav#main-navigation {
  z-index: 99999; }
  .menu-is-active nav#main-navigation li {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: 0.35s cubic-bezier(0.4, 2.08, 0.55, 1); }
    .menu-is-active nav#main-navigation li:nth-child(1) {
      transition-delay: 0.175s; }
    .menu-is-active nav#main-navigation li:nth-child(2) {
      transition-delay: 0.15s; }
    .menu-is-active nav#main-navigation li:nth-child(3) {
      transition-delay: 0.125s; }
    .menu-is-active nav#main-navigation li:nth-child(4) {
      transition-delay: 0.1s; }

.typed-cursor {
  opacity: 1;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite; }

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
svg.curve {
  position: absolute;
  bottom: -60px;
  left: -10vw;
  width: 120vw;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  z-index: 1; }

.image-container {
  margin-top: 60px; }
  .image-container img {
    -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); }

/*********/
#screen {
  background: none;
  overflow: hidden; }

#screen-img, .screen-img {
  width: 100%;
  height: 100%;
  background-size: 100%;
  animation-name: slide;
  animation-duration: 10s;
  animation-timing-function: easeOutQuart;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  animation-play-state: running; }

/* This is the animation code. */
@keyframes slide {
  0% {
    background-position: 0 0%; }
  15% {
    background-position: 0 20%; }
  30% {
    background-position: 0 40%; }
  45% {
    background-position: 0 60%; }
  60% {
    background-position: 0 80%; }
  75% {
    background-position: 0 100%; }
  85% {
    background-position: 0 0%; } }
@keyframes slide-img {
  0% {
    top: 0%; }
  15% {
    top: 20%; }
  30% {
    top: 40%; }
  45% {
    top: 60%; }
  60% {
    top: 80%; }
  75% {
    top: 100%; }
  85% {
    top: 0%; } }
/*********/
#portfolio-item section {
  padding: 0; }
  #portfolio-item section.carousel {
    padding-top: 0;
    padding-bottom: 0; }
    #portfolio-item section.carousel .row {
      padding: 60px 0; }
      #portfolio-item section.carousel .row .column-1-1 {
        padding-top: 60px; }
      #portfolio-item section.carousel .row h2, #portfolio-item section.carousel .row h3, #portfolio-item section.carousel .row h4, #portfolio-item section.carousel .row h5 {
        padding: 60px 120px;
        padding-bottom: 24px; }

/* Slider */
.slide-one {
  max-width: 960px;
  margin: 0 auto; }
  .slide-one .slick-slide {
    margin: 0; }
    @media (max-width: 960px) {
      .slide-one .slick-slide {
        margin: 0 60px; } }

.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  min-height: 1px;
  margin: 0 30px;
  padding: 60px 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  display: none; }
  @media (max-width: 600px) {
    .slick-slide {
      margin: 0 15px; } }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block;
    -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.slider {
  width: 100%;
  margin: 0px auto; }
  .slider.center .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0px 8px; }
  .slider .slick-slide {
    transition: all ease-in-out .3s; }
    .slider .slick-slide.slick-active {
      opacity: 1; }
    .slider .slick-slide img {
      width: 100%; }

.slick-prev, .slick-next {
  display: block;
  z-index: 1;
  height: auto;
  width: auto; }
  .slick-prev:before, .slick-next:before {
    color: #acbfc6;
    font-size: 32px;
    opacity: 1; }
  .slick-prev:hover, .slick-next:hover {
    color: #32fedf; }

.slick-prev {
  left: 0; }

.slick-next {
  right: 0; }

.slick-active {
  opacity: 1; }

.slick-current {
  opacity: 1; }

.slick-prev, .slick-next {
  height: calc(100% - 120px);
  width: 60px;
  background: #eff4f6;
  opacity: 0.95;
  padding-top: 10px; }
  .slick-prev:focus, .slick-next:focus {
    background: #eff4f6; }
  .slick-prev:before, .slick-next:before {
    font-size: 26px;
    color: white; }
  .slick-prev:hover, .slick-next:hover {
    background: #32fedf;
    opacity: .95; }
  @media (max-width: 600px) {
    .slick-prev, .slick-next {
      width: 75px; } }

section .slick-prev:before, section .slick-next:before {
  color: #262626;
  opacity: 0.25; }
section .slick-prev:hover:before, section .slick-next:hover:before {
  color: white; }

.slick-dotted.slick-slider {
  margin-bottom: -6px; }

.slick-dots {
  left: 0;
  bottom: 24px; }
  .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0 6px; }
    .slick-dots li button {
      width: 100%;
      height: 100%;
      background-color: #c1ccd0;
      border-radius: 50%; }
      .slick-dots li button:before {
        display: none; }
    .slick-dots li.slick-active button {
      background: #32fedf; }

/* PhotoSwipe */
/* Gallery container */
.gallery-container {
  float: left;
  width: 100%;
  position: relative;
  padding: 90px 0;
  display: inline-block;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; }
  @media (max-width: 767px) {
    .gallery-container {
      padding: 60px; } }

.slider figure {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  line-height: 0; }
  .slider figure a:focus {
    outline: none; }
  .slider figure figcaption {
    display: none; }

.pswp__bg {
  background: rgba(0, 0, 0, 0.9); }

.site-container {
  clear: both;
  padding: 36px 0 0;
  border-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #e1e8eb;
  position: relative;
  margin: 0 auto;
  line-height: 0;
  margin-top: 60px;
  -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); }
  .site-container.mobile, .site-container.tablet {
    z-index: 1;
    max-width: 320px;
    padding: 72px 12px 72px 12px !important;
    background: #fff;
    border: 2px solid #e1e8eb;
    border-radius: 36px;
    /* box-shadow: none; */ }
    .site-container.mobile.half, .site-container.tablet.half {
      padding-bottom: 0 !important;
      max-height: 450px;
      overflow: hidden;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: 0px solid;
      max-width: 320px;
      width: 100%;
      position: absolute;
      bottom: 0; }
      .site-container.mobile.half:after, .site-container.tablet.half:after {
        display: none; }
    .site-container.mobile.offset, .site-container.tablet.offset {
      margin-top: -120px;
      margin-bottom: -120px; }
    .site-container.mobile:after, .site-container.tablet:after {
      content: '';
      display: block;
      width: 48px;
      height: 48px;
      position: absolute;
      bottom: 12px;
      background: #eff4f6;
      border-radius: 50%;
      left: 0;
      right: 0;
      margin: auto; }
    .site-container.mobile .screen, .site-container.tablet .screen {
      height: 480px;
      border: 1px solid #e1e8eb; }
    .site-container.mobile .frame, .site-container.tablet .frame {
      width: 100%; }
      .site-container.mobile .frame span, .site-container.tablet .frame span {
        background: #e1e8eb; }
        .site-container.mobile .frame span:nth-child(1), .site-container.tablet .frame span:nth-child(1) {
          position: absolute;
          top: 12px;
          left: 0;
          right: 0;
          margin: auto;
          width: 8px;
          height: 8px; }
        .site-container.mobile .frame span:nth-child(2), .site-container.tablet .frame span:nth-child(2) {
          position: absolute;
          top: 36px;
          left: 0;
          right: 0;
          margin: auto;
          height: 4px;
          width: 48px;
          border-radius: 12px; }
        .site-container.mobile .frame span:nth-child(3), .site-container.tablet .frame span:nth-child(3) {
          position: absolute;
          left: -100px;
          right: 0;
          top: 30px;
          margin: auto;
          width: 16px;
          height: 16px; }
  .site-container.tablet {
    max-width: 768px; }
  .site-container .screen {
    position: relative;
    background-color: #e1e8eb;
    overflow: hidden;
    height: auto; }
  .site-container.hover:hover {
    background-color: #32fedf; }
  .site-container .frame {
    top: 0;
    left: 0;
    padding: 9px;
    position: absolute; }
    .site-container .frame span {
      height: 18px;
      width: 18px;
      border-radius: 50%;
      background-color: white;
      float: left;
      margin: 0;
      margin-right: 6px; }
  .site-container.small {
    padding-top: 32px; }
    .site-container.small .frame {
      padding: 12px; }
      .site-container.small .frame span {
        width: 9px;
        height: 9px; }
  @media (max-width: 960px) {
    .site-container {
      padding-top: 32px; }
      .site-container .frame {
        padding: 12px; }
        .site-container .frame span {
          width: 9px;
          height: 9px; } }
  .site-container.desktop .screen {
    height: 600px; }

.no-padding-bottom .row {
  padding-bottom: 0 !important; }
.no-padding-bottom:before {
  display: none; }

.no-padding-top .row, .no-padding-top .column-1-1 {
  padding-top: 0 !important; }

.wrapper-bottom {
  margin-bottom: 60px; }

.wrapper-top {
  margin-top: 60px; }

a.icon.down {
  position: absolute;
  /* left: 0; */
  right: 0;
  bottom: -120px;
  margin: auto;
  padding: 12px;
  font-size: 48px;
  color: white; }

.next-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 12px;
  font-size: 48px;
  color: #32fedf;
  color: white; }
  .next-icon:before {
    color: white;
    font-size: 13px;
    position: absolute;
    left: -120px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 20px;
    font-weight: bold; }

.bounce {
  animation-name: bounce;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
  .bounce.right {
    animation-name: bounceSide; }

@keyframes bounce {
  0%, 50%, 100% {
    transform: translateY(-12px); }
  25% {
    transform: translateY(0%); }
  75% {
    transform: translateY(6px); } }
@keyframes bounceSide {
  0%, 50%, 100% {
    transform: translateX(-12px); }
  25% {
    transform: translateX(0%); }
  75% {
    transform: translateX(6px); } }
@keyframes bounceSideSmall {
  0%, 50%, 100% {
    transform: translateX(-6px); }
  25% {
    transform: translateX(0%); }
  75% {
    transform: translateX(3px); } }
#contact-form {
  height: 100vh;
  /* label color */
  /* label focus color */
  /* label underline focus color */
  /* valid color */
  /* invalid color */
  /* icon prefix focus color */
  /*Change text in autofill textbox*/ }
  #contact-form .form-container {
    /*margin-top:90px;
    margin-bottom: 30px;*/ }
  #contact-form .form-container .row {
    margin-bottom: 0; }
  #contact-form .input-field label {
    color: #262626;
    font-family: "Cunia", "Open Sans", sans-serif; }
  #contact-form .input-field input[type=text]:focus + label {
    color: #9c9c9c; }
  #contact-form .input-field input[type=text]:focus {
    border-bottom: 1px solid #9c9c9c;
    box-shadow: 0 1px 0 0 #9c9c9c; }
  #contact-form .input-field input[type=text].valid {
    border-bottom: 1px solid #9c9c9c;
    box-shadow: 0 1px 0 0 #9c9c9c; }
  #contact-form .input-field input[type=text].invalid {
    border-bottom: 1px solid #9c9c9c;
    box-shadow: 0 1px 0 0 #9c9c9c; }
  #contact-form .input-field .prefix.active {
    color: #9c9c9c; }
  #contact-form input:not([type]):focus:not([readonly]),
  #contact-form input[type=text]:focus:not([readonly]),
  #contact-form input[type=password]:focus:not([readonly]),
  #contact-form input[type=email]:focus:not([readonly]),
  #contact-form input[type=url]:focus:not([readonly]),
  #contact-form input[type=time]:focus:not([readonly]),
  #contact-form input[type=date]:focus:not([readonly]),
  #contact-form input[type=datetime]:focus:not([readonly]),
  #contact-form input[type=datetime-local]:focus:not([readonly]),
  #contact-form input[type=tel]:focus:not([readonly]),
  #contact-form input[type=number]:focus:not([readonly]),
  #contact-form input[type=search]:focus:not([readonly]),
  #contact-form textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid white;
    box-shadow: 0 1px 0 0 white; }
  #contact-form input:not([type]):focus:not([readonly]) + label,
  #contact-form input[type=text]:focus:not([readonly]) + label,
  #contact-form input[type=password]:focus:not([readonly]) + label,
  #contact-form input[type=email]:focus:not([readonly]) + label,
  #contact-form input[type=url]:focus:not([readonly]) + label,
  #contact-form input[type=time]:focus:not([readonly]) + label,
  #contact-form input[type=date]:focus:not([readonly]) + label,
  #contact-form input[type=datetime]:focus:not([readonly]) + label,
  #contact-form input[type=datetime-local]:focus:not([readonly]) + label,
  #contact-form input[type=tel]:focus:not([readonly]) + label,
  #contact-form input[type=number]:focus:not([readonly]) + label,
  #contact-form input[type=search]:focus:not([readonly]) + label,
  #contact-form textarea.materialize-textarea:focus:not([readonly]) + label {
    color: white; }
@-webkit-keyframes autofill {
  to {
    color: #666;
    background: transparent; } }
  #contact-form input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both; }
  #contact-form .form-container .btn {
    background-color: #009ddc; }
  #contact-form .submitbtn {
    line-height: 1.2;
    display: block;
    height: 48px;
    width: 100%;
    margin-top: 12px; }
  #contact-form .form-container h3 {
    font-size: 42px;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top: -46px; }
  #contact-form .input-field.col.s12 {
    padding-top: 12px; }
  #contact-form input:not([type]), #contact-form input[type=text], #contact-form input[type=password], #contact-form input[type=email], #contact-form input[type=url], #contact-form input[type=time], #contact-form input[type=date], #contact-form input[type=datetime], #contact-form input[type=datetime-local], #contact-form input[type=tel], #contact-form input[type=number], #contact-form input[type=search], #contact-form textarea.materialize-textarea {
    height: 36px;
    border-color: #262626; }
  @media all and (max-width: 640px) {
    #contact-form .form-container {
      position: static;
      width: 100%; } }
  #contact-form input:-webkit-autofill {
    -webkit-text-fill-color: #262626 !important; }

#contact #backBtn {
  left: 120px;
  top: 60px; }
  @media (max-width: 960px) {
    #contact #backBtn {
      left: 60px;
      top: 150px;
      font-size: 20px; } }
#contact main {
  width: inherit !important; }
#contact section:last-child {
  width: 100%; }
#contact section .container {
  float: left;
  padding-top: 120px;
  padding-right: 120px; }
#contact section .wrap {
  float: left;
  width: 50%; }
  #contact section .wrap:first-child {
    padding-right: 60px; }
  #contact section .wrap:last-child {
    margin-top: -24px;
    float: right; }

#contactus {
  /* spam_trap: This input is hidden. This is here to trick the spam bots*/ }
  #contactus .spmhidip {
    display: none;
    width: 10px;
    height: 3px; }
  #contactus input, #contactus textarea {
    padding: 18px;
    font-size: 18px;
    font-family: "Cunia", "Open Sans", sans-serif;
    background: rgba(255, 255, 255, 0.65);
    border: 0;
    display: block;
    width: 100%;
    float: left;
    margin: 0px 0 24px 0px;
    -webkit-transition: all 0.66s ease;
    -moz-transition: all 0.66s ease;
    -ms-transition: all 0.66s ease;
    -o-transition: all 0.66s ease;
    transition: all 0.66s ease; }
    #contactus input:hover, #contactus input:focus, #contactus textarea:hover, #contactus textarea:focus {
      background: white;
      outline: none; }
  #contactus label {
    display: none; }
  #contactus input[type="submit"] {
    background: #32fedf;
    /* display: block; */
    /* width: 100%; */ }

#fg_crdiv {
  font-size: 0.3em;
  opacity: .2;
  -moz-opacity: .2;
  filter: alpha(opacity=20); }

#fg_crdiv p {
  display: none; }

#backBtn {
  -webkit-transition: all 0.33s ease;
  -moz-transition: all 0.33s ease;
  -ms-transition: all 0.33s ease;
  -o-transition: all 0.33s ease;
  transition: all 0.33s ease;
  position: absolute;
  left: 0;
  top: 60px;
  font-size: 36px;
  color: #262626; }
  #backBtn:hover {
    opacity: .8; }
  #backBtn span {
    font-size: 24px;
    font-weight: bold;
    font-family: "Cunia", "Open Sans", sans-serif;
    position: absolute;
    top: 4px;
    left: 48px; }

.sidebar-container a#backBtn {
  left: 0;
  margin: 42px;
  top: 75px;
  color: #262626;
  opacity: 1; }
  .sidebar-container a#backBtn:hover {
    opacity: 0.5; }

.aqua .sidebar-container a#backBtn {
  left: 120px; }

.form-container.z-depth-5 {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  background: rgba(255, 255, 255, 0);
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  padding: 0; }
  .form-container.z-depth-5 input, .form-container.z-depth-5 textarea {
    margin-bottom: 0; }
  .form-container.z-depth-5 .input-field label:not(.label-icon).active {
    font-size: 13px; }
  .form-container.z-depth-5 h4 {
    margin: 24px 0px;
    margin-top: 60px;
    /* position: relative; */ }

.floating {
  float: left;
  -webkit-animation-name: Floatingx;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: Floating;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
  margin-left: -20px;
  margin-top: 10px; }

@-webkit-keyframes Floatingx {
  from {
    -webkit-transform: translate(0, 0px); }
  65% {
    -webkit-transform: translate(0, 20px); }
  to {
    -webkit-transform: translate(0, 0px); } }
@-moz-keyframes Floating {
  from {
    -moz-transform: translate(0, 0px); }
  65% {
    -moz-transform: translate(0, 20px); }
  to {
    -moz-transform: translate(0, 0px); } }
.budFeature {
  position: relative;
  max-width: 320px;
  margin: auto;
  margin-top: 60px;
  height: 329px;
  z-index: 10;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  overflow: hidden;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  /* fallback/image non-cover color */
  background-color: #32fedf;
  /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(left, #32fedf 0%, #29cae6 100%);
  /* Safari 4+, Chrome 1+ */
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #32fedf), color-stop(100%, #29cae6));
  /* Safari 5.1+, Chrome 10+ */
  background-image: -webkit-linear-gradient(left, #32fedf 0%, #29cae6 100%);
  /* Opera 11.10+ */
  background-image: -o-linear-gradient(left, #32fedf 0%, #29cae6 100%);
  /* IE10+ */
  background: -ms-linear-gradient(left, #32fedf 0%, #29cae6 100%);
  /* Standard */
  background: linear-gradient(to right, #32fedf 0%, #29cae6 100%);
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=1 ); }
  .budFeature img {
    width: 100%;
    height: auto;
    margin-left: 0;
    position: relative;
    top: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease; }
  @media (min-width: 961px) {
    .budFeature {
      top: 60px;
      bottom: 0;
      position: absolute;
      margin: auto; } }

span.stroke-through {
  position: relative; }
  span.stroke-through:after {
    content: '';
    position: absolute;
    left: -2%;
    top: 13px;
    width: 104%;
    height: 6px;
    background: #32fedf;
    opacity: 0.85; }

#home a.next-icon.bounce.down {
  display: none; }

@media (max-width: 960px) {
  p.home-buttons {
    position: absolute;
    top: 200px; }
    p.home-buttons a {
      margin-bottom: 24px; }

  body.downscroll section:before, body#portfolio-item section:before {
    height: 60px;
    bottom: -59px; }

  #contact section .wrap {
    margin-top: 0px !important;
    float: left !important;
    width: 100%; }

  #contact section .container {
    padding: 120px 60px;
    padding-top: 180px; }

  #contact section .container h1 {
    font-size: 48px;
    margin-bottom: 0; }

  .form-container.z-depth-5 {
    margin: 0; }

  #portfolio-item section.section.style-1 {
    padding: 120px 60px; }

  a.logo.animsition-link {
    width: 64px;
    padding: 0px; }

  body.downscroll section.active > .row, body#portfolio-item section.active > .row {
    padding: 60px; }

  #portfolio-item h1 {
    font-size: 36px; }

  #portfolio-item h2 {
    font-size: 30px;
    line-height: 1.2; }

  #backBtn span {
    font-size: 18px;
    top: 2px;
    left: 30px; }

  #backBtn {
    font-size: 24px; }

  #portfolio-item section.section.style-1 .container {
    padding-top: 100px; }

  img.featured-img {
    margin: 60px auto 0px auto; }

  #portfolio-item section.section.style-1 h2 {
    font-size: 24px; }

  .sidebar-container a#backBtn {
    top: 50px;
    margin: 36px 20px; }

  .btn {
    top: 5px;
    right: 5px;
    height: 48px;
    width: 48px;
    padding: 12px; }

  #toggle-btn span:before, #toggle-btn span:after {
    height: 3px; }

  .carousel .row {
    padding: 0 !important; }

  section.section.style-alternate.active {
    padding: 180px 0px 460px 0px;
    text-align: center; }

  span.corner-link {
    right: -10%;
    bottom: -360px;
    height: 360px;
    width: 120%;
    right: -50%;
    width: 200%;
    bottom: -180px; }

  .active span.corner-link {
    bottom: -180px;
    height: 360px;
    width: 120%;
    right: -10%; }

  span.corner-link span {
    text-align: center;
    width: 300px;
    top: 40px;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 20px !important; }

  span.corner-link span h3 {
    max-width: 100%;
    width: 100%;
    float: left;
    display: block;
    text-align: center; }

  #portfolio-section, section#work, main {
    width: 100% !important; }

  section#work {
    padding: 60px 0; }

  html, body {
    overflow: auto; }

  #section-1 {
    height: calc(100vh - 120px); }

  #home main section#work .container, #work-page main section#work .container {
    height: inherit;
    transform: none;
    /* top: auto; */
    padding: 68px;
    width: 375px;
    margin: 0 auto;
    display: block;
    float: none;
    clear: both; }

  #home main section#work .container h1, #work-page main section#work .container h1 {
    position: relative;
    top: 0;
    font-size: 28px;
    padding-bottom: 0;
    text-align: center; }

  #work-page main section#work .container h1 {
    font-size: 48px;
    text-align: left;
    padding: 0; }

  #work .portfolio .portfolio-item {
    margin-bottom: 48px;
    margin-right: 0; }

  section.style-alternate {
    width: 100%;
    height: 50vh;
    padding: 48px; }

  #home main section.style-alternate .container {
    transform: none;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%; }

  #home main section.style-alternate .container h1 {
    position: relative;
    top: 0; }

  section.style-1:before {
    background: #32fedf !important; }

  .percent-container {
    display: none; }

  #home a.next-icon.bounce.right {
    display: none; }

  #home a.next-icon.bounce.down {
    display: block;
    bottom: -60px;
    font-size: 48px; }

  #home main section .container {
    padding-right: 120px; }

  #home main section .container h1 {
    font-size: 5vw; }

  #home main section#section-1, #work-page main section#section-1 {
    padding: 120px 60px; }
    #home main section#section-1 .container, #work-page main section#section-1 .container {
      padding-top: 0;
      height: 290px;
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      margin: auto;
      padding-left: 60px;
      padding-right: 60px; }
  #home main section .container, #work-page main section .container {
    transform: none;
    top: 0;
    left: 0;
    padding: 0;
    height: auto; }
  #home main section .container h1, #work-page main section .container h1 {
    font-size: 38px;
    line-height: 1.2;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 0 60px;
    left: 0; }
  #home main section.style-alternate, #work-page main section.style-alternate {
    height: 0; } }
@media (max-width: 600px) {
  #home main section.style-alternate, #work-page main section.style-alternate {
    padding: 120px 30px 480px 30px; }

  #portfolio-item section.prev-next .column-1-2 {
    width: 100% !important;
    float: none; }

  #portfolio-item section.prev-next:after {
    height: 1px;
    width: 80%;
    top: 90px;
    display: none; }

  #portfolio-item section.prev-next .column-1-2 a {
    padding: 0 !important; }

  #home main section.style-1 .container h1 span.typed-cursor {
    /* position: absolute; */
    font-size: 36px; }

  section.section.style-alternate.active {
    padding: 240px 30px 640px 30px; }

  .active span.corner-link {
    width: 200%;
    right: -50%; }

  #portfolio-item section p {
    font-size: 14px; }

  #portfolio-item section.prev-next h4 {
    font-size: 18px;
    margin-top: 12px; }

  .button {
    padding: 13px 24px;
    font-size: 14px; }

  .button.next:before {
    height: 43px; }

  .menu-is-active #particle-slider {
    visibility: hidden; }

  section.style-alternate .container {
    top: 0;
    transform: none;
    padding: 120px 60px 60px 60px; }

  .btn {
    top: 8px;
    right: 8px; } }
@media (max-width: 475px) {
  .site-container.mobile .screen, .site-container.tablet .screen {
    height: 100vw; }

  .site-container.desktop .screen {
    height: 41.5vw; }

  .site-container.mobile.half, .site-container.tablet.half {
    position: relative;
    width: 100%; }

  .site-container.mobile.half .screen {
    height: 75vw; } }
.masonry-page section.carousel {
  padding: 0 120px !important; }
  @media (max-width: 960px) {
    .masonry-page section.carousel {
      padding: 0 60px !important; } }
  .masonry-page section.carousel a img {
    -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15); }
    .masonry-page section.carousel a img:hover {
      opacity: 0.92; }
.masonry-page * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
@media (max-width: 480px) {
  .masonry-page .masonry {
    margin: 0;
    margin-top: 60px; }
    .masonry-page .masonry .grid-sizer {
      width: 97.5%; }
    .masonry-page .masonry .gutter-sizer {
      width: Infinity%; }
    .masonry-page .masonry .item {
      width: 97.5%;
      margin-bottom: Infinity%; } }
    @media (max-width: 480px) and (max-width: 480px) {
      .masonry-page .masonry .item {
        margin-top: 60px; } }
@media (max-width: 480px) {
      .masonry-page .masonry .item img {
        width: 100%; } }
@media only screen and (max-width: xxspx) {
  .masonry-page .masonry {
    margin: 0;
    margin-top: 60px; }
    .masonry-page .masonry .grid-sizer {
      width: 97.5%; }
    .masonry-page .masonry .gutter-sizer {
      width: Infinity%; }
    .masonry-page .masonry .item {
      width: 97.5%;
      margin-bottom: Infinity%; } }
    @media only screen and (max-width: xxspx) and (max-width: 480px) {
      .masonry-page .masonry .item {
        margin-top: 60px; } }
@media only screen and (max-width: xxspx) {
      .masonry-page .masonry .item img {
        width: 100%; } }
@media (min-width: 481px) and (max-width: 767px) {
  .masonry-page .masonry {
    margin: 0;
    margin-top: 60px; }
    .masonry-page .masonry .grid-sizer {
      width: 47.5%; }
    .masonry-page .masonry .gutter-sizer {
      width: 5%; }
    .masonry-page .masonry .item {
      width: 47.5%;
      margin-bottom: 5%; } }
    @media (min-width: 481px) and (max-width: 767px) and (max-width: 480px) {
      .masonry-page .masonry .item {
        margin-top: 60px; } }
@media (min-width: 481px) and (max-width: 767px) {
      .masonry-page .masonry .item img {
        width: 100%; } }
@media (min-width: 768px) {
  .masonry-page .masonry {
    margin: 0;
    margin-top: 60px; }
    .masonry-page .masonry .grid-sizer {
      width: 30.8333333333%; }
    .masonry-page .masonry .gutter-sizer {
      width: 3.75%; }
    .masonry-page .masonry .item {
      width: 30.8333333333%;
      margin-bottom: 3.75%; } }
    @media (min-width: 768px) and (max-width: 480px) {
      .masonry-page .masonry .item {
        margin-top: 60px; } }
@media (min-width: 768px) {
      .masonry-page .masonry .item img {
        width: 100%; } }
@media (min-width: 992px) {
  .masonry-page .masonry {
    margin: 0;
    margin-top: 60px; }
    .masonry-page .masonry .grid-sizer {
      width: 30.8333333333%; }
    .masonry-page .masonry .gutter-sizer {
      width: 3.75%; }
    .masonry-page .masonry .item {
      width: 30.8333333333%;
      margin-bottom: 3.75%; } }
    @media (min-width: 992px) and (max-width: 480px) {
      .masonry-page .masonry .item {
        margin-top: 60px; } }
@media (min-width: 992px) {
      .masonry-page .masonry .item img {
        width: 100%; } }
@media (min-width: 1200px) {
  .masonry-page .masonry {
    margin: 0;
    margin-top: 60px; }
    .masonry-page .masonry .grid-sizer {
      width: 30.8333333333%; }
    .masonry-page .masonry .gutter-sizer {
      width: 3.75%; }
    .masonry-page .masonry .item {
      width: 30.8333333333%;
      margin-bottom: 3.75%; } }
    @media (min-width: 1200px) and (max-width: 480px) {
      .masonry-page .masonry .item {
        margin-top: 60px; } }
@media (min-width: 1200px) {
      .masonry-page .masonry .item img {
        width: 100%; } }

iframe.cv-container {
  -webkit-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  height: calc(100vh - 120px);
  max-width: 767px;
  margin: 0 auto;
  display: block;
  margin-top: 60px; }
  @media (max-width: 600px) {
    iframe.cv-container {
      display: none; } }

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