@font-face {
  font-family: 'Metropolis';
  src: url("../fonts/Metropolis-Light.woff") format("woff");
  font-weight: 300;
}
@font-face {
  font-family: 'Metropolis';
  src: url("../fonts/Metropolis-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: 'Metropolis';
  src: url("../fonts/Metropolis-Medium.woff") format("woff");
  font-weight: 500;
}
@font-face {
  font-family: 'Metropolis';
  src: url("../fonts/Metropolis-SemiBold.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: 'Metropolis';
  src: url("../fonts/Metropolis-Bold.woff") format("woff");
  font-weight: 700;
}
/* line 32, ../sass/_generic.scss */
::selection {
  background: #12171c;
  /* WebKit/Blink Browsers */
}

/* line 35, ../sass/_generic.scss */
::-moz-selection {
  background: #12171c;
  /* Gecko Browsers */
}

/* line 39, ../sass/_generic.scss */
a {
  text-decoration: none;
}

/* line 43, ../sass/_generic.scss */
h1 {
  color: #FFF;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 10px;
  z-index: 3;
}

/* line 51, ../sass/_generic.scss */
h2 {
  color: #c6c6c6;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  z-index: 3;
}

/* line 60, ../sass/_generic.scss */
p {
  color: #FFF;
  font-size: 14px;
  line-height: 20px;
}

/* line 66, ../sass/_generic.scss */
p.portfolio-info {
  color: #FFF;
  font-size: 12px;
}

/* line 72, ../sass/_generic.scss */
p.footer-text {
  color: #828282;
  font-size: 12px;
  margin: 0px;
  margin-top: 10px;
}

/* line 79, ../sass/_generic.scss */
hr {
  width: 100px;
  height: 1px;
  border: none;
  background: #FFF;
  opacity: 0.1;
  position: relative;
  left: 0px;
}

/* line 89, ../sass/_generic.scss */
#nav a.white {
  color: #FFF;
  transition: 0.25s;
}

/* line 94, ../sass/_generic.scss */
.logo_sm {
  padding-left: 8px !important;
}

/* line 98, ../sass/_generic.scss */
.logo_sm_sel {
  vertical-align: middle;
  width: 36px;
}

/* line 104, ../sass/_generic.scss */
.logo_sm_sel_wht {
  vertical-align: middle;
}

/* line 108, ../sass/_generic.scss */
.logo-filter {
  -webkit-filter: none !important;
  filter: none !important;
}

/* line 113, ../sass/_generic.scss */
.row-full {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

/* line 122, ../sass/_generic.scss */
.row-nav {
  width: 100%;
  min-width: 320px;
  margin: 0 auto;
  position: fixed;
  background: linear-gradient(to bottom, rgba(18, 23, 28, 0.75), transparent);
  z-index: 100;
  transition: .25s;
}

/* line 133, ../sass/_generic.scss */
.row-nav-change {
  background: #0e1115 !important;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: .25s;
}

/* line 140, ../sass/_generic.scss */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  top: 0px;
  z-index: 10;
}

/* line 148, ../sass/_generic.scss */
.row {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  top: 0px;
  z-index: 10;
  transition: .25s;
}

/* line 157, ../sass/_generic.scss */
.portfolio-box {
  width: 50%;
  height: 50vh;
  min-height: 300px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

/* line 171, ../sass/_generic.scss */
.pbox-inside {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* line 178, ../sass/_generic.scss */
.content-box {
  width: 50%;
  height: 50vh;
  min-height: 300px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

/* line 192, ../sass/_generic.scss */
.content-box-info {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5vw;
  align-items: left !important;
}

/* line 200, ../sass/_generic.scss */
.content-box-footer {
  background: none;
  background-repeat: no-repeat;
  background-position: top right !important;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 35px 30px 35px 20px;
}

/* line 216, ../sass/_generic.scss */
.content-box-1-1 {
  width: 100%;
  height: 50vh;
  min-height: 300px;
  background: linear-gradient(to left, transparent 49.99%, #191919 50%);
  background-repeat: no-repeat;
  background-position: top right !important;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

/* line 233, ../sass/_generic.scss */
#video-background {
  position: absolute;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  filter: blur(7px);
}

/* line 245, ../sass/_generic.scss */
.hero-case-video:hover #video-background {
  filter: blur(0px);
}

/* line 249, ../sass/_generic.scss */
.hero-case-video:hover .lpad20 {
  opacity: 0;
}

/* line 253, ../sass/_generic.scss */
.hero-case-video:hover {
  background: none;
}

/* line 258, ../sass/_generic.scss */
.lpad20 {
  padding-left: 20px;
  padding-bottom: 150px;
  opacity: 1;
}

/* line 264, ../sass/_generic.scss */
.mb0 {
  margin-bottom: 0px;
}

/* line 268, ../sass/_generic.scss */
.pl20 {
  padding-left: 20px;
}

/* line 272, ../sass/_generic.scss */
.pr20 {
  padding-right: 20px;
}

/* line 276, ../sass/_generic.scss */
.whttxt {
  color: #FFF !important;
}

/* line 280, ../sass/_generic.scss */
.ft1 {
  display: inline;
}

/* line 286, ../sass/_generic.scss */
.content-box:nth-child(1) {
  order: 1;
}

/* line 290, ../sass/_generic.scss */
.content-box:nth-child(2) {
  order: 2;
}

/* line 294, ../sass/_generic.scss */
.content-box:nth-child(3) {
  order: 3;
}

/* line 298, ../sass/_generic.scss */
.content-box:nth-child(4) {
  order: 4;
}

/* line 302, ../sass/_generic.scss */
.content-box:nth-child(5) {
  order: 5;
}

/* line 306, ../sass/_generic.scss */
.content-box:nth-child(6) {
  order: 6;
}

/* line 312, ../sass/_generic.scss */
.cc-img {
  width: 25px;
  height: 25px;
  padding-right: 10px;
  margin-top: 5px;
}

/* line 319, ../sass/_generic.scss */
.social-img {
  width: 15px;
  height: 15px;
  padding-right: 10px;
  margin-top: 10px;
  filter: invert(70%);
}

/* line 327, ../sass/_generic.scss */
a.social:hover .social-img {
  filter: invert(0%);
}

/* line 331, ../sass/_generic.scss */
.portfolio-text {
  opacity: 0;
}

/* line 336, ../sass/_generic.scss */
.portfolio-box:hover .portfolio-text {
  opacity: 1;
}

/* line 341, ../sass/_generic.scss */
.portfolio-box:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* line 345, ../sass/_generic.scss */
.portfolio-hod {
  background-image: url("../img/hideordie/preview.jpg");
}

/* line 349, ../sass/_generic.scss */
.portfolio-iag {
  background-image: url("../img/iag/preview.jpg");
}

/* line 353, ../sass/_generic.scss */
.portfolio-nk {
  background-image: url("../img/nk/preview.jpg");
}

/* line 357, ../sass/_generic.scss */
.portfolio-cyberflight {
  background-image: url("../img/cyberflight/preview.jpg");
}

/* line 361, ../sass/_generic.scss */
.portfolio-miscreated {
  background-image: url("../img/miscreated/preview.jpg");
}

/* line 365, ../sass/_generic.scss */
.portfolio-premiercoastal {
  background-image: url("../img/premiercoastal/preview.jpg");
}

/* line 369, ../sass/_generic.scss */
.portfolio-runnr {
  background-image: url("../img/runnr/preview.jpg");
}

/* line 373, ../sass/_generic.scss */
.portfolio-homepainter {
  background-image: url("../img/homepainter/preview.jpg");
}

/* line 377, ../sass/_generic.scss */
.portfolio-destiny2 {
  background-image: url("../img/destiny2/preview.jpg");
}

/* line 381, ../sass/_generic.scss */
.portfolio-i01 {
  background-image: url("../img/i01/cover.jpg");
  background-size: cover;
}

/* line 386, ../sass/_generic.scss */
.portfolio-aresone {
  background-image: url("../img/aresone/preview.jpg");
}

/* line 390, ../sass/_generic.scss */
.box1 {
  background-image: url("../img/case-study1.jpg");
}

/* line 394, ../sass/_generic.scss */
.box2 {
  background-image: url("../img/case-study2.jpg");
}

/* line 398, ../sass/_generic.scss */
.box3 {
  background-image: url("../img/portfolio1.jpg");
}

/* line 402, ../sass/_generic.scss */
.box4 {
  background-image: url("../img/portfolio2.jpg");
}

/* line 406, ../sass/_generic.scss */
.box5 {
  background-image: url("../img/portfolio4.jpg");
}

/* line 410, ../sass/_generic.scss */
.box6 {
  background-image: url("../img/portfolio3.jpg");
}

/* line 414, ../sass/_generic.scss */
.miscreated1 {
  background-image: url("../img/miscreated/img2.jpg");
}

/* line 418, ../sass/_generic.scss */
.miscreated2 {
  background-image: url("../img/miscreated/img1-1.jpg");
}

/* line 422, ../sass/_generic.scss */
.miscreated3 {
  background-image: url("../img/miscreated/img3.jpg");
}

/* line 426, ../sass/_generic.scss */
.installation1 {
  background-image: url("../img/i01/img1.jpg");
}

/* line 430, ../sass/_generic.scss */
.installation1:hover {
  background-image: url("../img/i01/img1-1.jpg");
}

/* line 434, ../sass/_generic.scss */
.installation2 {
  background-image: url("../img/i01/img3.jpg");
}

/* line 438, ../sass/_generic.scss */
.installation3 {
  background-image: url("../img/i01/img2.jpg");
}

/* line 442, ../sass/_generic.scss */
.aresone1 {
  background-image: url("../img/aresone/img1.jpg");
}

/* line 446, ../sass/_generic.scss */
.pacificfront1 {
  background-image: url("../img/pacificfront/img2.jpg");
}

/* line 450, ../sass/_generic.scss */
.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;
  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;
  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
  0% {
    background-color: none;
  }
  50% {
    background-color: #cccccc;
  }
  100% {
    background-color: none;
  }
}
@-moz-keyframes flash {
  0% {
    background-color: none;
  }
  50% {
    background-color: #cccccc;
  }
  100% {
    background-color: none;
  }
}
@-ms-keyframes flash {
  0% {
    background-color: none;
  }
  50% {
    background-color: #cccccc;
  }
  100% {
    background-color: none;
  }
}
/* line 483, ../sass/_generic.scss */
.container-new {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  top: 0px;
  z-index: 10;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2rem;
  min-height: 600px;
  padding-top: 50px;
  padding-bottom: 100px;
}

/* line 497, ../sass/_generic.scss */
.portfolio-block {
  position: relative;
  background-position: center;
  border-radius: 5px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  transition: .25s;
  margin-top: 15px;
}

/* line 509, ../sass/_generic.scss */
.portfolio-block:hover {
  margin-top: 12px;
  box-shadow: 0px 30px 50px -18px #000;
  transition: .25s;
}

/* line 515, ../sass/_generic.scss */
.portfolio-threefourths {
  width: -webkit-calc(75% - 1rem);
  width: calc(75% - 1rem);
  height: 450px;
  margin-right: 1rem;
}

/* line 522, ../sass/_generic.scss */
.portfolio-half {
  width: -webkit-calc(50% - 1rem);
  width: calc(50% - 1rem);
  height: 450px;
  margin-right: 1rem;
}

/* line 529, ../sass/_generic.scss */
.portfolio-fourth {
  width: -webkit-calc(25% - 1rem);
  width: calc(25% - 1rem);
  height: 450px;
  margin-right: 1rem;
}

/* line 536, ../sass/_generic.scss */
.title-section {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(24, 28, 37, 0)), to(rgba(24, 28, 37, 0.8)));
  background: -webkit-linear-gradient(top, rgba(24, 28, 37, 0) 0%, rgba(24, 28, 37, 0.8) 100%);
  background: -o-linear-gradient(top, rgba(24, 28, 37, 0) 0%, rgba(24, 28, 37, 0.8) 100%);
  background: linear-gradient(to bottom, rgba(24, 28, 37, 0) 0%, rgba(24, 28, 37, 0.8) 100%);
  display: flex;
  flex-direction: column;
  padding: 5em 2em 2em;
  transition: .25s;
}

/* line 549, ../sass/_generic.scss */
.portfolio-tags {
  letter-spacing: 1px;
  font-weight: 300;
  text-transform: uppercase;
  font-family: 'NHaasGroteskDSPro-45Lt', sans-serif;
}

/* line 556, ../sass/_generic.scss */
.case-tag {
  background: #927920;
  padding: 2px 4px;
  border: 1px solid #ffce1f;
  color: #ffce1f;
  margin-right: 5px;
}

/* line 564, ../sass/_generic.scss */
.hr-block {
  width: 100%;
  margin: 0 auto;
  max-width: 300px;
  margin-left: 0px;
}

/* line 571, ../sass/_generic.scss */
.portfolio-title {
  letter-spacing: 2px;
}

/* line 575, ../sass/_generic.scss */
.yellow-btn {
  background: #ffce1f;
  padding: 10px 20px;
  color: #161c21;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  transition: .25s;
}

/* line 586, ../sass/_generic.scss */
.yellow-btn:hover {
  background: #283038;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 3px;
  transition: .25s;
}

/* line 1, ../sass/_colors.scss */
.miscreated-color-1 {
  background: #393529;
}

/* line 5, ../sass/_colors.scss */
.miscreated-color-2 {
  background: #25262b;
}

/* line 9, ../sass/_colors.scss */
.miscreated-color-3 {
  background: #111119;
}

/* line 13, ../sass/_colors.scss */
.installation-color-1 {
  background: #203c51;
}

/* line 17, ../sass/_colors.scss */
.installation-color-2 {
  background: #111111;
}

/* line 21, ../sass/_colors.scss */
.installation-color-3 {
  background: #1e3043;
}

/* line 25, ../sass/_colors.scss */
.aresone-color-1 {
  background: #6d4a37;
}

/* line 29, ../sass/_colors.scss */
.pacificfront-color-1 {
  background: #2b343a;
}

@media only screen and (max-width: 500px) {
  /* line 2, ../sass/_query.scss */
  .hero-portfolio {
    height: 97vh !important;
  }

  /* line 6, ../sass/_query.scss */
  .portfolio-image-fifth img {
    width: 100% !important;
    height: 100% !important;
  }
}
@media only screen and (max-width: 800px) {
  /* line 13, ../sass/_query.scss */
  .content-box, .portfolio-box {
    width: 100%;
  }

  /* line 17, ../sass/_query.scss */
  .content-box:nth-child(3) {
    order: 4;
  }

  /* line 21, ../sass/_query.scss */
  .content-box:nth-child(4) {
    order: 3;
  }
}
/*
@media only screen and (max-width: 600px) {
  #nav li:nth-child(2), #nav li:nth-child(3), #nav li:nth-child(4) {
    display: none;
  }

  .hamburger-menu {
    display: block !important;
  }

  .hero-case-video {
    height: 70vh !important;
  }
}

@media only screen and (max-width: 400px) {
  .ft1 {
    display: none;
  }
}
*/
@media only screen and (max-width: 1400px) {
  /* line 50, ../sass/_query.scss */
  .portfolio-half, .portfolio-threefourths, .portfolio-fourth {
    width: -webkit-calc(50% - 1rem);
    width: calc(50% - 1rem);
  }

  /* line 55, ../sass/_query.scss */
  .tilter_figure {
    display: none;
  }

  /* line 59, ../sass/_query.scss */
  .d2-final {
    display: block !important;
  }
}
@media only screen and (max-width: 1200px) {
  /* line 65, ../sass/_query.scss */
  .portfolio-ui img {
    width: calc(50% - 1rem) !important;
    height: 50% !important;
  }
}
@media only screen and (max-width: 1000px) {
  /* line 72, ../sass/_query.scss */
  .portfolio-ui img, .portfolio-image-half img, .portfolio-image-third img {
    width: 100% !important;
    height: 100% !important;
  }

  .portfolio-image-third-video {
    justify-content: center !important;
  }
}
@media only screen and (max-width: 850px) {
  /* line 79, ../sass/_query.scss */
  .portfolio-half, .portfolio-threefourths, .portfolio-fourth {
    width: -webkit-calc(100% - 1rem);
    width: calc(100% - 1rem);
    margin-right: 0px;
  }
}
@media only screen and (max-width: 450px) {
  /* line 87, ../sass/_query.scss */
  .content-box-footer {
    flex-direction: column;
    align-items: stretch;
  }

  /* line 92, ../sass/_query.scss */
  .content-box-footer a {
    margin-top: 20px;
  }
}
/* line 1, ../sass/_body.scss */
body {
  background: #12171c;
  overflow-x: hidden;
  font-family: 'NHaasGroteskDSPro-55Rg', sans-serif;
  margin: 0;
}
/* line 7, ../sass/_body.scss */
body header {
  height: 200px;
  background: #263238;
}

/* line 1, ../sass/_hero.scss */
.hero {
  width: 100vw;
  height: 80vh;
  background-size: cover;
  background-position: top center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: relative;
}

/* line 16, ../sass/_hero.scss */
.hero-parallax {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(../img/nk/main-cover.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 1;
  opacity: 1;
}

/* line 29, ../sass/_hero.scss */
.hero-parallax:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: -webkit-gradient(linear, left bottom, left top, from(#12171c), color-stop(60%, rgba(18, 23, 28, 0.35)));
  background: -webkit-linear-gradient(bottom, #12171c 0%, rgba(18, 23, 28, 0.35) 60%);
  background: -o-linear-gradient(bottom, #12171c 0%, rgba(18, 23, 28, 0.35) 60%);
  background: linear-gradient(to top, #12171c 0%, rgba(18, 23, 28, 0.35) 60%);
}

/* line 43, ../sass/_hero.scss */
.hero-parallax-2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(../img/hero-image-dark-cyan.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  mix-blend-mode: lighten;
  z-index: 1;
}

/* line 55, ../sass/_hero.scss */
.hero-parallax-3 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #3d3d3d url(../img/hero-image-dark.jpg) no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* line 65, ../sass/_hero.scss */
p.tagline {
  color: #f9f9f9;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  padding-top: 12px;
  z-index: 1;
}

/* line 75, ../sass/_hero.scss */
p.casetitle {
  color: #FFF;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 10px;
}

/* line 83, ../sass/_hero.scss */
p.casesub {
  color: #FFF;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  z-index: 3;
}

/* line 92, ../sass/_hero.scss */
.hero-case {
  width: 100vw;
  height: 85vh;
  background: #3d3d3d url(../img/case-study1-hero.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
  display: flex;
  justify-content: center;
  align-items: left;
  flex-direction: column;
}

/* line 104, ../sass/_hero.scss */
.hero-case-video {
  width: 100vw;
  height: 85vh;
  background: rgba(25, 25, 25, 0.75);
  background-size: cover;
  background-position: top center;
  display: flex;
  justify-content: flex-end;
  align-items: left;
  flex-direction: column;
}

/* line 116, ../sass/_hero.scss */
.nk-contain {
  position: relative;
  width: 89px;
  height: 51px;
  z-index: 1;
}

/* line 123, ../sass/_hero.scss */
#stereo {
  mix-blend-mode: color-dodge;
}

/* line 127, ../sass/_hero.scss */
#hero-container {
  width: 100%;
  max-width: 1600px;
  z-index: 10;
  -webkit-box-sizing: border-box;
  padding: 2rem;
  margin-bottom: 5vh;
}

@keyframes mymove {
  0% {
    background: #FFF;
  }
  2% {
    background: #FFF;
  }
  10% {
    background: #19ffff;
  }
  11% {
    background: #FFF;
  }
  55% {
    background: #FFF;
  }
  56% {
    background: #ff1919;
  }
  65% {
    background: #FFF;
  }
  100% {
    background: #FFF;
  }
}
/* line 12, ../sass/_navigation.scss */
#nav-right {
  list-style-type: none;
  font-size: 12px;
  text-align: right;
}
/* line 17, ../sass/_navigation.scss */
#nav-right li {
  display: inline-block;
}

/* line 22, ../sass/_navigation.scss */
#nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-padding-start: 0px;
  padding-right: 23px;
  margin: 0 auto;
  padding-left: 0px;
  transition: 0.25s;
}
/* line 36, ../sass/_navigation.scss */
#nav a {
  text-transform: uppercase;
  text-decoration: none;
  color: #363d3d;
  font-size: 0.8rem;
  margin-left: 15px;
  margin-right: 15px;
  display: block;
  line-height: 70px;
  position: relative;
  transition: 0.25s;
  font-family: 'NHaasGroteskDSPro-45Lt', sans-serif;
  letter-spacing: 1px;
}

/* line 53, ../sass/_navigation.scss */
#nav a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  content: "";
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  background: #ffce1f;
}

/* line 66, ../sass/_navigation.scss */
#nav a:hover:after {
  left: 0;
  width: 100%;
  background: #ffce1f;
  transition: 0.25s;
}

/* line 73, ../sass/_navigation.scss */
#nav a.logo_sm:hover:after {
  left: 0;
  width: 0px;
  background: none;
  transition: 0.25s;
}

/* line 80, ../sass/_navigation.scss */
#nav li:first-child {
  margin-right: auto;
}

/* line 84, ../sass/_navigation.scss */
#nav li a:hover {
  color: #ffce1f !important;
}

/* line 88, ../sass/_navigation.scss */
#nav-container {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  top: 0px;
  z-index: 10;
  transition: .25s;
}

/* line 97, ../sass/_navigation.scss */
#pre-nav-container {
  transition: .25s;
}

/* line 101, ../sass/_navigation.scss */
.gray-text {
  color: #999 !important;
}

/* line 105, ../sass/_navigation.scss */
.hamburger-menu {
  margin: auto;
  width: 26px;
  height: 52px;
  cursor: pointer;
  display: none;
  position: relative;
}

/* line 115, ../sass/_navigation.scss */
.bar, .bar:after, .bar:before {
  width: 26px;
  height: 2px;
}

/* line 120, ../sass/_navigation.scss */
.bar {
  position: relative;
  transform: translateY(25px);
  background: #000;
  transition: all 0ms 300ms;
}

/* line 126, ../sass/_navigation.scss */
.bar.animate {
  background: rgba(255, 255, 255, 0);
}

/* line 130, ../sass/_navigation.scss */
.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 7px;
  background: #000;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* line 139, ../sass/_navigation.scss */
.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  background: #000;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* line 148, ../sass/_navigation.scss */
.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* line 154, ../sass/_navigation.scss */
.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* line 160, ../sass/_navigation.scss */
#menu_mobile {
  position: fixed;
  top: 60px;
  left: 0px;
  z-index: 9999;
  list-style-type: none;
  background-color: #191919;
  width: 100%;
  -webkit-padding-start: 0px;
  text-align: center;
  transition: 0s;
  margin: 0px;
  margin-top: 20px;
  padding: 0px;
  display: none;
}

/* line 178, ../sass/_navigation.scss */
#menu_mobile a:link, #menu_mobile a:visited, #menu_mobile a:active {
  color: #797979;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding: 10px 0 10px 0;
  font-size: 14px;
  text-transform: uppercase;
}

/* line 188, ../sass/_navigation.scss */
#menu_mobile a:hover {
  color: #FFF;
  background-color: #323232;
}

/* line 193, ../sass/_navigation.scss */
.mmtop {
  margin-top: 0px !important;
}

/* line 197, ../sass/_navigation.scss */
.bar-bg {
  filter: invert(100%);
}

/* line 201, ../sass/_navigation.scss */
.op1 {
  opacity: 1;
}

/* line 205, ../sass/_navigation.scss */
.fab {
  font-size: 14px;
}

/* line 1, ../sass/_footer.scss */
footer {
  background: #161c21;
}

/* line 1, ../sass/portfolio.scss */
.hero-portfolio {
  width: 100vw;
  height: 70vh;
  background-size: cover;
  background-position: top center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  position: relative;
}

/* line 13, ../sass/portfolio.scss */
.title-main {
  font-size: 24px;
}

/* line 17, ../sass/portfolio.scss */
.title-two {
  font-size: 11px;
}

/* line 21, ../sass/portfolio.scss */
.portfolio-list {
  color: #FFF;
  font-size: 14px;
  line-height: 24px;
  margin-top: 0px;
}

/* line 28, ../sass/portfolio.scss */
.portfolio-link {
  color: #ffce1f;
}

/* line 32, ../sass/portfolio.scss */
.code-btn {
  background: #ffce1f;
  padding: 10px 20px;
  color: #161c21;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  transition: .25s;
  width: 80px;
}

/* line 44, ../sass/portfolio.scss */
.code-btn:hover {
  background: #283038;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 3px;
  transition: .25s;
  cursor: pointer;
}

/* line 52, ../sass/portfolio.scss */
.portfolio-link:hover {
  text-decoration: underline;
}

/* line 56, ../sass/portfolio.scss */
.row-full-portfolio {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* align-content: center; */
  flex-wrap: wrap;
}

/* line 65, ../sass/portfolio.scss */
.space {
  margin-top: 50px;
}

/* line 69, ../sass/portfolio.scss */
.space-lg {
  margin-top: 100px;
}

/* line 73, ../sass/portfolio.scss */
.portfolio-ui {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-content: center; */
  flex-wrap: wrap;
}

/* line 82, ../sass/portfolio.scss */
.portfolio-ui img {
  width: calc(33% - 1rem);
  height: 33%;
  margin-top: 10px;
}

/* line 88, ../sass/portfolio.scss */
.portfolio-image-half, .portfolio-image-third, .portfolio-image-fifth {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-content: center; */
  flex-wrap: wrap;
  overflow: hidden;
}

.portfolio-image-third-video {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align-content: center; */
  flex-wrap: wrap;
  overflow: hidden;
}

/* line 98, ../sass/portfolio.scss */
.portfolio-image-half img {
  width: calc(50.8% - 1rem);
  height: 50.8%;
  margin-top: 10px;
}

/* line 104, ../sass/portfolio.scss */
.portfolio-image-third img {
  width: calc(33.8% - 1rem);
  height: 33.8%;
  margin-top: 10px;
}

/* line 110, ../sass/portfolio.scss */
.portfolio-image-fifth img {
  width: calc(20.0% - 1rem);
  height: 20.0%;
  margin-top: 10px;
}

/* line 116, ../sass/portfolio.scss */
.tilter_figure {
  position: relative;
  width: 1280px;
  height: 720px;
  margin: 0;
  padding: 0;
}

/* line 124, ../sass/portfolio.scss */
.d2-background, .d2-circles, .d2-linework, .d2-weapon, .d2-bars, .d2-info, .d2-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: .5s ease-out;
  transform: translate3d(0, 0, 0);
}

/* line 134, ../sass/portfolio.scss */
.spin {
  -webkit-animation: spin1 20s infinite linear;
  -moz-animation: spin1 20s infinite linear;
  -o-animation: spin1 20s infinite linear;
  -ms-animation: spin1 20s infinite linear;
  animation: spin1 20s infinite linear;
}

@-webkit-keyframes spin1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin1 {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes spin1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* line 156, ../sass/portfolio.scss */
.d2-crossfade, .d2-iconography {
  position: relative;
  width: 85px;
  height: 66px;
  margin-right: 20px;
}

/* line 163, ../sass/portfolio.scss */
.icon-sm {
  margin-top: 80px;
  font-size: 12px;
  color: #7d7d7d;
}

/* line 169, ../sass/portfolio.scss */
.cursors {
  display: flex;
  align-items: center;
}

/* line 174, ../sass/portfolio.scss */
.d2-crossfade img {
  position: absolute;
  -webkit-animation-name: fade, spin1;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: fade, spin1;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* line 195, ../sass/portfolio.scss */
#crossfade-2 {
  -webkit-animation-delay: -3s;
}

/* line 200, ../sass/portfolio.scss */
.hod-bg {
  background-image: url(../img/hideordie/cover.jpg);
}

/* line 204, ../sass/portfolio.scss */
.iag-bg {
  background-image: url(../img/iag/cover.jpg);
}

/* line 208, ../sass/portfolio.scss */
.nk-bg {
  background-image: url(../img/nk/cover.jpg);
}

/* line 212, ../sass/portfolio.scss */
.cyberflight-bg {
  background-image: url(../img/cyberflight/cover.jpg);
}

/* line 216, ../sass/portfolio.scss */
.miscreated-bg {
  background-image: url(../img/miscreated/cover2.jpg);
}

/* line 220, ../sass/portfolio.scss */
.premiercoastal-bg {
  background-image: url(../img/premiercoastal/cover.jpg);
}

/* line 224, ../sass/portfolio.scss */
.i01-bg {
  background-image: url(../img/i01/cover.jpg);
}

/* line 228, ../sass/portfolio.scss */
.runnr-bg {
  background-image: url(../img/runnr/cover.jpg);
}

/* line 232, ../sass/portfolio.scss */
.d2-bg {
  background-image: url(../img/destiny2/cover.jpg);
}

/* line 236, ../sass/portfolio.scss */
.aresone-bg {
  background-image: url(../img/aresone/cover.jpg);
}

/* line 240, ../sass/portfolio.scss */
.homepainter-bg {
  background-image: url(../img/homepainter/cover.jpg);
}

/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
/* line 19, ../sass/swipebox.scss */
html.swipebox-html.swipebox-touch {
  overflow: hidden !important;
}

/* line 23, ../sass/swipebox.scss */
#swipebox-overlay img {
  border: none !important;
}

/* line 27, ../sass/swipebox.scss */
#swipebox-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999 !important;
  overflow: hidden;
  user-select: none;
}

/* line 38, ../sass/swipebox.scss */
#swipebox-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* line 44, ../sass/swipebox.scss */
#swipebox-slider {
  transition: transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  position: absolute;
  display: none;
  cursor: pointer;
}
/* line 55, ../sass/swipebox.scss */
#swipebox-slider .slide {
  height: 100%;
  width: 100%;
  line-height: 1px;
  text-align: center;
  display: inline-block;
}
/* line 62, ../sass/swipebox.scss */
#swipebox-slider .slide:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}
/* line 70, ../sass/swipebox.scss */
#swipebox-slider .slide img,
#swipebox-slider .slide .swipebox-video-container,
#swipebox-slider .slide .swipebox-inline-container {
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  vertical-align: middle;
}
/* line 83, ../sass/swipebox.scss */
#swipebox-slider .slide .swipebox-video-container {
  background: none;
  max-width: 1140px;
  max-height: 100%;
  width: 100%;
  padding: 5%;
  box-sizing: border-box;
}
/* line 90, ../sass/swipebox.scss */
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}
/* line 96, ../sass/swipebox.scss */
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}
/* line 106, ../sass/swipebox.scss */
#swipebox-slider .slide-loading {
  background: url(../img/loader.gif) no-repeat center center;
}

/* line 112, ../sass/swipebox.scss */
#swipebox-bottom-bar,
#swipebox-top-bar {
  transition: 0.5s;
  position: absolute;
  left: 0;
  z-index: 999;
  height: 50px;
  width: 100%;
}

/* line 122, ../sass/swipebox.scss */
#swipebox-bottom-bar {
  bottom: -50px;
}
/* line 125, ../sass/swipebox.scss */
#swipebox-bottom-bar.visible-bars {
  transform: translate3d(0, -50px, 0);
}

/* line 130, ../sass/swipebox.scss */
#swipebox-top-bar {
  top: -50px;
}
/* line 133, ../sass/swipebox.scss */
#swipebox-top-bar.visible-bars {
  transform: translate3d(0, 50px, 0);
}

/* line 138, ../sass/swipebox.scss */
#swipebox-title {
  display: block;
  width: 100%;
  text-align: center;
}

/* line 144, ../sass/swipebox.scss */
#swipebox-prev,
#swipebox-next,
#swipebox-close {
  background-image: url(../img/icons.png);
  background-repeat: no-repeat;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
  width: 50px;
  height: 50px;
  top: 0;
}

/* line 158, ../sass/swipebox.scss */
#swipebox-arrows {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 50px;
}

/* line 165, ../sass/swipebox.scss */
#swipebox-prev {
  background-position: -32px 13px;
  float: left;
}

/* line 170, ../sass/swipebox.scss */
#swipebox-next {
  background-position: -78px 13px;
  float: right;
}

/* line 175, ../sass/swipebox.scss */
#swipebox-close {
  top: 0;
  right: 0;
  position: absolute;
  z-index: 9999;
  background-position: 15px 12px;
}

/* line 183, ../sass/swipebox.scss */
.swipebox-no-close-button #swipebox-close {
  display: none;
}

/* line 189, ../sass/swipebox.scss */
#swipebox-prev.disabled,
#swipebox-next.disabled {
  opacity: 0.3;
}

/* line 195, ../sass/swipebox.scss */
.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
  animation: rightSpring 0.3s;
}
/* line 199, ../sass/swipebox.scss */
.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
  animation: leftSpring 0.3s;
}

/* line 206, ../sass/swipebox.scss */
.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
  backface-visibility: hidden;
  transition: all .3s ease;
  content: ' ';
  position: absolute;
  z-index: 999;
  top: 0;
  height: 100%;
  width: 20px;
  opacity: 0;
}
/* line 219, ../sass/swipebox.scss */
.swipebox-touch #swipebox-container:before {
  left: 0;
  box-shadow: inset 10px 0px 10px -8px #656565;
}
/* line 224, ../sass/swipebox.scss */
.swipebox-touch #swipebox-container:after {
  right: 0;
  box-shadow: inset -10px 0px 10px -8px #656565;
}
/* line 231, ../sass/swipebox.scss */
.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
  opacity: 1;
}
/* line 238, ../sass/swipebox.scss */
.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after {
  opacity: 1;
}

@keyframes rightSpring {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@keyframes leftSpring {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@media screen and (min-width: 800px) {
  /* line 274, ../sass/swipebox.scss */
  #swipebox-close {
    right: 10px;
  }

  /* line 278, ../sass/swipebox.scss */
  #swipebox-arrows {
    width: 92%;
    max-width: 800px;
  }
}
/* Skin 
--------------------------*/
/* line 286, ../sass/swipebox.scss */
#swipebox-overlay {
  background: #0d0d0d;
}

/* line 290, ../sass/swipebox.scss */
#swipebox-bottom-bar,
#swipebox-top-bar {
  text-shadow: 1px 1px 1px black;
  background: #000;
  opacity: 0.95;
}

/* line 302, ../sass/swipebox.scss */
#swipebox-top-bar {
  color: white !important;
  font-size: 15px;
  line-height: 43px;
  font-family: Helvetica, Arial, sans-serif;
}

/* line 1, ../sass/plyr.scss */
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
  background: #ffce1f !important;
}

/* line 5, ../sass/plyr.scss */
.plyr__control.plyr__tab-focus {
  box-shadow: 0 0 0 5px rgba(255, 236, 51, 0.5) !important;
}

/* line 9, ../sass/plyr.scss */
.plyr--full-ui input[type=range] {
  color: #ffce1f !important;
}

/* line 13, ../sass/plyr.scss */
.plyr__control--overlaid {
  background: rgba(255, 206, 31, 0.8) !important;
}