/*     
    Name: _variables.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
/* Colors */
/* Fonts */
/* Transforms */
/* Breakpoints */
/*     
    Name: _animations.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Reveal Content */
.reveal-x {
  opacity: 0;
  -webkit-transform: translateX(-70px);
          transform: translateX(-70px);
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  will-change: transform;
}

.reveal-y {
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  will-change: transform;
}

.reveal-anim {
  -webkit-transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s;
  transition: 0.75s transform cubic-bezier(0.32, 1.01, 0.35, 1.01), 0.5s opacity 0.1s, 0.75s -webkit-transform cubic-bezier(0.32, 1.01, 0.35, 1.01);
}

/* Reveal Text */
.reveal-text,
.reveal-text::after {
  -webkit-animation-delay: var(--animation-delay, 2s);
          animation-delay: var(--animation-delay, 2s);
  -webkit-animation-iteration-count: var(--iterations, 1);
          animation-iteration-count: var(--iterations, 1);
  -webkit-animation-duration: var(--duration, 800ms);
          animation-duration: var(--duration, 800ms);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.reveal-text {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  -webkit-animation-name: clip-text;
          animation-name: clip-text;
  white-space: nowrap;
  opacity: 1 !important;
}

.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  pointer-events: none;
  -webkit-animation-name: text-revealer;
          animation-name: text-revealer;
}

@-webkit-keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@keyframes clip-text {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}

@-webkit-keyframes text-revealer {
  0%,
  50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%,
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes text-revealer {
  0%,
  50% {
    -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
  }
  60%,
  100% {
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@-webkit-keyframes slideLink {
  0% {
    opacity: 0;
    left: -2rem;
  }
  20% {
    opacity: 1;
    left: 0rem;
  }
  80% {
    opacity: 1;
    left: 0rem;
  }
  100% {
    left: 2rem;
    opacity: 0;
  }
}

@keyframes slideLink {
  0% {
    opacity: 0;
    left: -2rem;
  }
  20% {
    opacity: 1;
    left: 0rem;
  }
  80% {
    opacity: 1;
    left: 0rem;
  }
  100% {
    left: 2rem;
    opacity: 0;
  }
}

@-webkit-keyframes chevronBounce {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes chevronBounce {
  0% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
}

@keyframes vibrate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
            transform: translate(-50%, -50%) rotate(-10deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(10deg);
            transform: translate(-50%, -50%) rotate(10deg);
  }
}

@-webkit-keyframes spinLoader {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinLoader {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* Mixins */
/*
    HTML5 Reset :: reset.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:

    Eric Meyer                  :: http://ericmeyer.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate   :: http://html5boilerplate.com

-------------------------------------------------------------------------------*/
/* Let's default this puppy out
-------------------------------------------------------------------------------*/
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {
  max-width: 100%;
}

/* force a vertical scrollbar to prevent a jumpy page */
/* we use a lot of ULs that aren't bulleted.
  don't forget to restore the bullets within content. */
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}

/* tables still need cellspacing="0" in the markup */
th {
  font-weight: bold;
  vertical-align: bottom;
}

td {
  font-weight: normal;
  vertical-align: top;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */
}

input[type="radio"] {
  vertical-align: text-bottom;
}

input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline;
}

select,
input,
textarea {
  font: 99% sans-serif;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}

/* Accessible focus treatment
    people.opera.com/patrickl/experiments/keyboard/test
a:hover,
a:focus,
a:active {
  outline: none;
}*/
small {
  font-size: 85%;
}

strong,
th {
  font-weight: bold;
}

td,
td img {
  vertical-align: top;
}

/* Make sure sup and sub don't screw with your line-heights
    gist.github.com/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* standardize any monospaced elements */
pre,
code,
kbd,
samp {
  font-family: monospace, sans-serif;
}

/* hand cursor on clickable elements */
.clickable,
input[type="button"],
input[type="submit"],
button {
  cursor: pointer;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* Style clickable inputs in iOS */
}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
  margin: 0;
}

/* make buttons play nice in IE */
/* button {width: auto; overflow: visible;} */
button::-moz-focus-inner,
input::-moz-focus-inner {
  /* Inner padding and border oddities in FF3/4 */
  padding: 0;
  border: 0;
}

/* let's clear some floats */
.clearfix:before, .page-content:before,
.clearfix:after,
.page-content:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}


.clearfix:after,
.page-content:after {
  clear: both;
}

.clearfix, .page-content {
  zoom: 1;
}

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
  font: 16px Helmet, Freesans, sans-serif;
}

body,
html {
  width: 100%;
  height: 100%;
}

a,
button {
  cursor: pointer;
}

button {
  border: 0;
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}*/
/*a:link {-webkit-tap-highlight-color: #fcd700;}*/
input,
select {
  -webkit-appearance: none;
  border-radius: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
span,
li,
q,
th,
td,
input,
div {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

input,
button {
  outline: none;
}

/*     
    Name: _base.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
/**
 * Set up a decent box model on the root element
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/**
 * Make all elements from the DOM inherit from the parent box-sizing
 * Since `*` has a specificity of 0, it does not override the `html` value
 * making all elements inheriting from the root box-sizing value
 * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
  font-weight: normal;
  line-height: auto;
  -webkit-font-smoothing: subpixel-antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/**
 * Basic styles for Main
 */
header,
main,
footer {
  width: 100%;
}

/* Anchor */
a {
  text-decoration: none;
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  color: #0a0a0a;
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
}

a:hover {
  opacity: 1 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: lowercase;
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
}

@media only screen and (max-width: 600px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.1rem;
  }
}

h3 {
  line-height: 1.4;
}

/*     
    Name: _typo.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
/* Font Name */
@font-face {
  font-family: "Helvetica-Neue-Light";
  src: url("../../assets/fonts/helvetica/HelveticaNeueLight.woff") format("woff"), url("../../assets/fonts/helvetica/HelveticaNeueLight.ttf") format("ttf");
}

@font-face {
  font-family: "Helvetica-Neue-Medium";
  src: url("../../assets/fonts/helvetica/HelveticaNeueMedium.woff") format("woff"), url("../../assets/fonts/helvetica/HelveticaNeueMedium.ttf") format("ttf");
}

@font-face {
  font-family: "Helvetica-Neue-Bold";
  src: url("../../assets/fonts/helvetica/HelveticaNeueBold.woff") format("woff"), url("../../assets/fonts/helvetica/HelveticaNeueBold.ttf") format("ttf");
}

/* Responsive font sizes */
.size-1, #home-welcome .welcome-content .mission-statement .text p {
  font-size: 64px;
}

@media (min-width: 320px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: calc(46px + 100vw * 0.05625);
  }
}

@media (min-width: 1600px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: 136px;
  }
}

.size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
  font-size: 36px;
}

@media (min-width: 320px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: calc(31px + 100vw * 0.01562);
  }
}

@media (min-width: 1600px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: 56px;
  }
}

.size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
  font-size: 28px;
}

@media (min-width: 320px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: calc(26px + 100vw * 0.00625);
  }
}

@media (min-width: 1600px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: 36px;
  }
}

.size-4, header .top-header .logo-link a .initial-part {
  font-size: 20px;
}

@media (min-width: 320px) {
  .size-4, header .top-header .logo-link a .initial-part {
    font-size: calc(19px + 100vw * 0.00313);
  }
}

@media (min-width: 1600px) {
  .size-4, header .top-header .logo-link a .initial-part {
    font-size: 24px;
  }
}

.size-5, header .top-header .logo-link a .logo-part, .slide-txt .desc, #work #work-grid .project-item .project-txt .desc, #single #single-intro .boxed .intro-txt, #contact .boxed .bottom-navigation .navigation-container ul li {
  font-size: 17px;
}

@media (min-width: 320px) {
  .size-5, header .top-header .logo-link a .logo-part, .slide-txt .desc, #work #work-grid .project-item .project-txt .desc, #single #single-intro .boxed .intro-txt, #contact .boxed .bottom-navigation .navigation-container ul li {
    font-size: calc(16.5px + 100vw * 0.00156);
  }
}

@media (min-width: 1600px) {
  .size-5, header .top-header .logo-link a .logo-part, .slide-txt .desc, #work #work-grid .project-item .project-txt .desc, #single #single-intro .boxed .intro-txt, #contact .boxed .bottom-navigation .navigation-container ul li {
    font-size: 19px;
  }
}

.size-6, html,
body, .slide-txt .category, #work #work-grid .project-item .project-txt .category {
  font-size: 14px;
}

@media (min-width: 320px) {
  .size-6, html,
  body, .slide-txt .category, #work #work-grid .project-item .project-txt .category {
    font-size: calc(13.5px + 100vw * 0.00156);
  }
}

@media (min-width: 1600px) {
  .size-6, html,
  body, .slide-txt .category, #work #work-grid .project-item .project-txt .category {
    font-size: 16px;
  }
}

.size-7, .slide-txt .indicator, #home-welcome .welcome-content .mission-statement .scroll-bottom .scroll-txt, #work #work-intro .scroll-bottom .scroll-txt, #single #single-content .next-post-nav .next-link {
  font-size: 12px;
}

@media (min-width: 320px) {
  .size-7, .slide-txt .indicator, #home-welcome .welcome-content .mission-statement .scroll-bottom .scroll-txt, #work #work-intro .scroll-bottom .scroll-txt, #single #single-content .next-post-nav .next-link {
    font-size: calc(11.5px + 100vw * 0.00156);
  }
}

@media (min-width: 1600px) {
  .size-7, .slide-txt .indicator, #home-welcome .welcome-content .mission-statement .scroll-bottom .scroll-txt, #work #work-intro .scroll-bottom .scroll-txt, #single #single-content .next-post-nav .next-link {
    font-size: 14px;
  }
}

@media only screen and (max-width: 1280px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: 56px;
  }
}

@media only screen and (max-width: 1280px) and (min-width: 320px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: calc(53px + 100vw * 0.00937);
  }
}

@media only screen and (max-width: 1280px) and (min-width: 1600px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: 68px;
  }
}

@media only screen and (max-width: 1280px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 1280px) and (min-width: 320px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: calc(32.5px + 100vw * 0.01094);
  }
}

@media only screen and (max-width: 1280px) and (min-width: 1600px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: 50px;
  }
}

@media only screen and (max-width: 1280px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: 24px;
  }
}

@media only screen and (max-width: 1280px) and (min-width: 320px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: calc(22px + 100vw * 0.00625);
  }
}

@media only screen and (max-width: 1280px) and (min-width: 1600px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: 32px;
  }
}

@media only screen and (max-width: 600px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: 36px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: calc(33px + 100vw * 0.00937);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-1, #home-welcome .welcome-content .mission-statement .text p {
    font-size: 48px;
  }
}

@media only screen and (max-width: 600px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: calc(28.5px + 100vw * 0.00469);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-2, .headline, .slide-txt .title, #home-textpath .text-container text, #work #work-intro .intro-txt, #work #work-grid .project-item .project-txt .title, #single #single-intro .boxed h1, #contact .boxed .contact-info h2 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 600px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: 20px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: calc(18.5px + 100vw * 0.00469);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-3, #home-about .about-intro, .no-posts, #single #single-content .next-post-nav .next-label {
    font-size: 26px;
  }
}

@media only screen and (max-width: 600px) {
  .size-4, header .top-header .logo-link a .initial-part {
    font-size: 18px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 320px) {
  .size-4, header .top-header .logo-link a .initial-part {
    font-size: calc(17.25px + 100vw * 0.00234);
  }
}

@media only screen and (max-width: 600px) and (min-width: 1600px) {
  .size-4, header .top-header .logo-link a .initial-part {
    font-size: 21px;
  }
}

@media only screen and (max-width: 600px) {
  .size-5, header .top-header .logo-link a .logo-part, .slide-txt .desc, #work #work-grid .project-item .project-txt .desc, #single #single-intro .boxed .intro-txt, #contact .boxed .bottom-navigation .navigation-container ul li {
    font-size: 15px;
  }
  .size-6, html,
  body, .slide-txt .category, #work #work-grid .project-item .project-txt .category {
    font-size: 13px;
  }
}

/*     
    Name: _helpers.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
/**
 * Clear inner floats
 */

.clearfix:after,
.page-content:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix, .page-content {
  display: inline-block;
}

html[xmlns] .clearfix, html[xmlns] .page-content {
  display: block;
}

* html .clearfix, * html .page-content {
  height: 1%;
}

.absolute-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.fixed-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.neg-z-index {
  z-index: -1;
}

.pos-z-index {
  z-index: 1;
}

.is-visible {
  opacity: 1;
  visibility: visible;
}

.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.full-background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.highlight {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  text-decoration: underline;
}

.highlight-u {
  text-decoration: underline;
}

.d-table {
  height: 100%;
  display: table;
}

.v-middle {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
}

.no-scroll {
  overflow: hidden;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capcase {
  text-transform: capitalize;
}

.notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

/*     
    Name: _media.scss    
    Author: Zakaria El Khachia
    Client:
*/
/*     
    Name: _header.scss    
    Author: Zakaria El Khachia
    Client:
*/
header {
  position: fixed;
  width: 100%;
  padding: 3rem;
  background: rgba(255, 255, 255, 0);
  z-index: 20;
}

@media only screen and (max-width: 600px) {
  header {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

header.scrolled {
  padding: 1.8rem 3rem;
  background: white;
}

@media only screen and (max-width: 600px) {
  header.scrolled {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

header .top-header {
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

header .top-header .logo-link {
  display: inline-block;
  color: #0a0a0a;
  overflow: hidden;
  position: relative;
}

header .top-header .logo-link a {
  font-weight: normal;
}

header .top-header .logo-link a .initial-part {
  font-family: "Helvetica-Neue-Medium", Arial, sans-serif;
  text-transform: uppercase;
}

header .top-header .logo-link a .logo-part {
  font-family: "Helvetica-Neue-Medium", Arial, sans-serif;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}

header .top-header .logo-link a .logo-part:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 110%;
  position: absolute;
  top: -10%;
  left: 0;
  background-color: #ffffff;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

header .top-header .logo-link a .logo-part.scrolled:after {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

header .top-header .logo-link a:hover .logo-part.scrolled:after {
  -webkit-transform: translateX(120px);
          transform: translateX(120px);
}

header .top-header .logo-signature {
  text-align: center;
  padding-top: 0.6rem;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-60px);
          transform: translateX(-60px);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  display: none;
}

header .top-header .logo-signature img {
  width: 120px;
}

header .top-header .logo-signature.off {
  opacity: 0;
}

/*     
    Name: _footer.scss    
    Author: Zakaria El Khachia
    Client:
*/
footer {
  width: 100%;
  padding: 2rem 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-top: -120px;
}

@media only screen and (max-width: 600px) {
  footer {
    padding: 2rem;
  }
}

footer .copyright {
  text-align: left;
}

footer .logo-footer {
  width: 100px;
}

footer .logo-footer img {
  width: 100%;
  margin-bottom: 0px;
}

@media only screen and (max-width: 600px) {
  footer .logo-footer img {
    margin-bottom: -15px;
  }
}

/*     
    Name: _nav.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Nav Toggle */
.burger-menu {
  position: absolute;
  width: 30px;
  height: 24px;
  cursor: pointer;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -15px);
          transform: translate(-50%, -15px);
  z-index: 2;
  display: none;
}

@media only screen and (max-width: 600px) {
  .burger-menu {
    width: 25px;
    height: 25px;
  }
}

.burger-menu span {
  width: 100%;
  height: 2px;
  display: block;
  position: absolute;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  -webkit-transform-origin: right;
          transform-origin: right;
}

.burger-menu span:nth-child(2) {
  width: 80%;
  top: 11px;
}

.burger-menu span:nth-child(3) {
  width: 60%;
  bottom: 0;
}

.burger-menu.open {
  z-index: 2;
}

.burger-menu.open span {
  width: 100% !important;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.burger-menu.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.burger-menu.open span:nth-child(2) {
  opacity: 0;
}

.burger-menu.open span:nth-child(3) {
  margin-top: 0;
  bottom: 1px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.burger-menu:hover span:nth-child(2),
.burger-menu:hover span:nth-child(3) {
  width: 100% !important;
}

/* Nav Menu */
@media only screen and (max-width: 600px) {
  .nav-wrapper {
    right: 2rem;
  }
}

.nav-wrapper .nav-container .nav-menu a {
  text-transform: lowercase;
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  padding: 0.1rem 0.5rem;
  z-index: 30;
}

.nav-wrapper .nav-container .nav-menu a:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  -webkit-transform: translate3d(-110%, 0, 0);
          transform: translate3d(-110%, 0, 0);
  width: 100%;
  z-index: -1;
  height: 100%;
  background-color: #0a0a0a;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.nav-wrapper .nav-container .nav-menu a:hover {
  color: #ffffff;
}

.nav-wrapper .nav-container .nav-menu a:hover:before {
  -webkit-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
}

.nav-wrapper .nav-container .nav-menu .nav-sep {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  background: #0a0a0a;
  border-radius: 50%;
  margin: 0 1.2rem 0 1.4rem;
}

@media only screen and (max-width: 600px) {
  .nav-wrapper .nav-container .nav-menu .nav-sep {
    margin: 0 4px;
  }
}

@media (max-width: 310px) {
  .nav-wrapper .nav-container .nav-menu .nav-sep {
    display: none;
  }
}

/*     
    Name: _common.scss    
    Author: Zakaria El Khachia
    Client:
*/
.page-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-content section {
  padding-top: 140px;
  padding-bottom: 140px;
}

.boxed {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media only screen and (max-width: 600px) {
  .boxed {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.full {
  padding-left: 0px;
  padding-right: 0px;
}

.intro {
  margin-bottom: 1rem;
}

.headline {
  display: inline-block;
  margin-bottom: 1.2rem;
}

.intro-text {
  width: 50%;
}

@media only screen and (max-width: 600px) {
  .intro-text {
    width: 100%;
  }
}

.left-m img,
.right-m img {
  width: 100%;
}

/*     
    Name: _grid.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Grid System */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1140px;
}

.container-l {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
}

.col-1 {
  -ms-flex-preferred-size: 8.33333%;
      flex-basis: 8.33333%;
}

@media only screen and (max-width: 768px) {
  .col-1 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-2 {
  -ms-flex-preferred-size: 16.66667%;
      flex-basis: 16.66667%;
}

@media only screen and (max-width: 768px) {
  .col-2 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-3 {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
}

@media only screen and (max-width: 768px) {
  .col-3 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-4 {
  -ms-flex-preferred-size: 33.33333%;
      flex-basis: 33.33333%;
}

@media only screen and (max-width: 768px) {
  .col-4 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-5 {
  -ms-flex-preferred-size: 41.66667%;
      flex-basis: 41.66667%;
}

@media only screen and (max-width: 768px) {
  .col-5 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-6 {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

@media only screen and (max-width: 768px) {
  .col-6 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-7 {
  -ms-flex-preferred-size: 58.33333%;
      flex-basis: 58.33333%;
}

@media only screen and (max-width: 768px) {
  .col-7 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-8 {
  -ms-flex-preferred-size: 66.66667%;
      flex-basis: 66.66667%;
}

@media only screen and (max-width: 768px) {
  .col-8 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-9 {
  -ms-flex-preferred-size: 75%;
      flex-basis: 75%;
}

@media only screen and (max-width: 768px) {
  .col-9 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-10 {
  -ms-flex-preferred-size: 83.33333%;
      flex-basis: 83.33333%;
}

@media only screen and (max-width: 768px) {
  .col-10 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-11 {
  -ms-flex-preferred-size: 91.66667%;
      flex-basis: 91.66667%;
}

@media only screen and (max-width: 768px) {
  .col-11 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

.col-12 {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

@media only screen and (max-width: 768px) {
  .col-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

/* Isotop Masonry */
/* Grid Item Sizer*/
.grid-sizer,
.grid-item {
  width: 47%;
}

.gutter-sizer {
  width: 6%;
}

/* Grid Item */
.grid-item {
  float: right;
  margin-bottom: 5rem;
}

/* Floated Columns */
.col-wrapper {
  position: relative;
}

.col {
  position: relative;
  width: calc(100% * 1 / 2);
}

.col:nth-child(2n + 1) {
  clear: both;
  float: left;
}

.col:nth-child(2n + 2) {
  clear: none;
  float: right;
}

/* Col Padding */
.left-t,
.left-m {
  padding-right: 5%;
}

.right-t,
.right-m {
  padding-left: 5%;
}

/*     
    Name: _home.scss    
    Author: TrioTech
    Client:
*/
/*     
    Name: _rolling.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
/*     
    Name: _scratch.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
/*     
    Name: _slider.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Classic Slider */
.slider-container {
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: auto;
  padding-bottom: 50%;
  position: relative;
}

@media only screen and (max-width: 1280px) {
  .slider-container {
    padding-bottom: 60%;
  }
}

@media only screen and (max-width: 768px) {
  .slider-container {
    padding-bottom: 0;
  }
}

.slider-container .slider-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
  z-index: 1;
}

.slider-container .slider {
  width: 100%;
  height: 85%;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  list-style: none;
  -webkit-transition: 0.5s -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s transform cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: 0.5s transform cubic-bezier(0.165, 0.84, 0.44, 1), 0.5s -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media only screen and (max-width: 768px) {
  .slider-container .slider {
    position: relative;
  }
}

.slider-container .more-link {
  margin-top: 1rem;
  display: inline-block;
  position: absolute;
  bottom: 3rem;
  right: 0;
}

@media only screen and (max-width: 768px) {
  .slider-container .more-link {
    position: relative;
    margin-left: 0;
    margin-top: 2rem;
    bottom: 0;
  }
}

.slider-container .more-link:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-image: url("../img/svg/chevron-min.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  margin-left: 0.5rem;
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.slider-container .more-link:hover:after {
  -webkit-transform: scale3d(1.2, 1.2, 1.2);
          transform: scale3d(1.2, 1.2, 1.2);
}

.slide {
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

@media only screen and (max-width: 768px) {
  .slide {
    position: relative;
    margin-bottom: 6rem;
  }
}

@media only screen and (max-width: 600px) {
  .slide {
    margin-bottom: 4rem;
  }
}

.slide.current-slide {
  z-index: 1;
}

.slide.current-slide .slide-txt {
  opacity: 1;
}

.slide.current-slide .slide-visual .mask {
  width: 0%;
}

.slide:last-child {
  margin-bottom: 0rem;
}

.slide-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
  .slide-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

.slide-txt {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  color: #0a0a0a;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  will-change: transform;
}

@media only screen and (max-width: 768px) {
  .slide-txt {
    opacity: 1;
    margin: 0.9rem 0rem 0;
  }
}

.slide-txt .slide-txt-content {
  position: absolute;
  top: 50%;
  width: 100%;
  -webkit-transform: translateY(-60%);
          transform: translateY(-60%);
}

@media only screen and (max-width: 768px) {
  .slide-txt .slide-txt-content {
    position: relative;
    top: 0;
    width: auto;
    display: inline-block;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.slide-txt .indicator {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
}

@media only screen and (max-width: 768px) {
  .slide-txt .indicator {
    display: none;
  }
}

.slide-txt .title {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  padding-right: 1rem;
  text-transform: lowercase;
}

@media only screen and (max-width: 600px) {
  .slide-txt .title {
    margin-bottom: 0.6rem;
  }
}

.slide-txt .category {
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
  color: #666666;
  text-transform: lowercase;
}

.slide-txt .category:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #0a0a0a;
  margin: 1.5rem 0;
}

@media only screen and (max-width: 768px) {
  .slide-txt .category:after {
    height: 0px;
  }
}

.slide-txt .desc {
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
  padding-right: 1rem;
  max-width: 350px;
}

.slide-visual {
  position: relative;
  height: 100%;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  overflow: hidden;
}

.slide-visual img {
  width: 100%;
  position: relative;
}

.slide-visual .mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

@media only screen and (max-width: 768px) {
  .slide-visual .mask {
    width: 0;
  }
}

.slider-nav {
  position: absolute;
  display: block;
  text-align: left;
  bottom: 20%;
  z-index: 10;
}

@media only screen and (max-width: 768px) {
  .slider-nav {
    display: none;
  }
}

.slider-nav button {
  background-image: url("../img/svg/chevron-min-w.svg");
  background-size: 18px;
  background-position: 55% 50%;
  background-repeat: no-repeat;
  border: 1px solid #0a0a0a;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  cursor: pointer;
  z-index: 2;
  -webkit-transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s;
  outline: none;
}

.slider-nav button:hover {
  background-color: #ffffff;
  background-image: url("../img/svg/chevron-min.svg");
}

@media only screen and (max-width: 768px) {
  .slider-nav button {
    background-size: 15px;
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 600px) {
  .slider-nav button {
    background-size: 10px;
    width: 30px;
    height: 30px;
  }
}

.slider-nav .__prev {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  background-color: #0a0a0a;
}

.slider-nav .__next {
  background-color: #0a0a0a;
}

.slider-nav .is-off {
  background-color: #ffffff;
  background-image: url("../img/svg/chevron-min.svg");
}

/* Auto Moving Slider */
.moving-slider {
  width: 90%;
  height: 100%;
  position: relative;
  margin-right: -70px;
  float: right;
}

@media only screen and (max-width: 1280px) {
  .moving-slider {
    width: 100%;
    height: 100%;
  }
}

@media only screen and (max-width: 768px) {
  .moving-slider {
    float: none;
    margin: auto;
  }
}

.moving-slider .slider-content {
  height: 80vh;
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 1280px) {
  .moving-slider .slider-content {
    height: 60vh;
  }
}

@media only screen and (max-width: 768px) {
  .moving-slider .slider-content {
    height: 40vh;
  }
}

@media only screen and (max-width: 600px) {
  .moving-slider .slider-content {
    height: 35vh;
    max-height: 300px;
  }
}

.moving-slider .slider-content .slide {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  left: -5em;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 750ms linear, -webkit-transform 5s 0.75s linear;
  transition: opacity 750ms linear, -webkit-transform 5s 0.75s linear;
  transition: opacity 750ms linear, transform 5s 0.75s linear;
  transition: opacity 750ms linear, transform 5s 0.75s linear, -webkit-transform 5s 0.75s linear;
  will-change: opacity, transform;
  width: calc(100% + 7em);
}

.moving-slider .slider-content .slide.displayed {
  opacity: 1;
  -webkit-transform: translate(5em, 0);
          transform: translate(5em, 0);
  -webkit-transition: opacity 750ms linear, -webkit-transform 15s linear;
  transition: opacity 750ms linear, -webkit-transform 15s linear;
  transition: opacity 750ms linear, transform 15s linear;
  transition: opacity 750ms linear, transform 15s linear, -webkit-transform 15s linear;
}

/*     
    Name: _nav.scss    
    Author: Zakaria El Khachia
    Client:
*/
.video-wrapper {
  position: relative;
  overflow: hidden;
}

.video-modal {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  background: #0a0a0a;
  -webkit-transition: 0.25s all ease-out;
  transition: 0.25s all ease-out;
}

.close-modal {
  position: absolute;
  top: 2rem;
  right: 2rem;
  z-index: 2;
  cursor: pointer;
}

.close-modal span {
  width: 30px;
  height: 2px;
  background: #fff;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform-origin: right;
          transform-origin: right;
  display: block;
}

.close-modal span:first-child {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-bottom: 20px;
}

.close-modal span:last-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.video-modal-inner {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.player {
  width: 90%;
  border: 5px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  font-size: 0;
  overflow: hidden;
  margin: auto;
}

/* This css is only applied when fullscreen is active. */
.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}
.player:-moz-full-screen {
  max-width: none;
  width: 100%;
}
.player:-ms-fullscreen {
  max-width: none;
  width: 100%;
}
.player:fullscreen {
  max-width: none;
  width: 100%;
}

.player:-webkit-full-screen {
  max-width: none;
  width: 100%;
}

.player__video {
  width: 100%;
}

.player__button {
  background: none;
  border: 0;
  line-height: 1;
  color: white;
  text-align: center;
  outline: 0;
  padding: 0;
  cursor: pointer;
  max-width: 50px;
}

.player__button:focus {
  border-color: #ffc600;
}

.player__slider {
  width: 10px;
  height: 30px;
}

.player__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  -webkit-transform: translateY(100%) translateY(-5px);
          transform: translateY(100%) translateY(-5px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.1);
}

.player:hover .player__controls {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.player:hover .progress {
  height: 15px;
}

.player__controls > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.progress {
  -webkit-box-flex: 10;
      -ms-flex: 10;
          flex: 10;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  height: 5px;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  background: rgba(0, 0, 0, 0.5);
  cursor: ew-resize;
}

.progress__filled {
  width: 50%;
  background: #ffc600;
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

/* unholy css to style input type="range" */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0 5px;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type="range"]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.5px;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #bada55;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
}

/*     
    Name: _button.scss    
    Author: Zakaria El Khachia
    Client:
*/
/* Button */
svg,
.label,
.arrow {
  pointer-events: none;
}

/*     
    Name: _home.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
#home .side-visual {
  position: fixed;
  width: 300px;
  height: 200px;
  right: 100px;
  top: 30%;
  z-index: 5;
  opacity: 0.6;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  display: none;
}

@media only screen and (max-width: 1280px) {
  #home .side-visual {
    right: 40px;
    top: 25%;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
}

@media only screen and (max-width: 768px) {
  #home .side-visual {
    right: -50px;
    top: 70%;
    -webkit-transform: scale(0.5) translateY(-70%);
            transform: scale(0.5) translateY(-70%);
  }
}

#home .side-visual canvas {
  height: 100%;
  display: block;
}

#home .side-visual.scrolled {
  top: 40%;
  right: -80px;
  -webkit-transform: scale(0.4) translateY(-40%);
          transform: scale(0.4) translateY(-40%);
}

#home-welcome {
  width: 100%;
  height: 100vh;
  position: relative;
  padding-top: 0px;
  padding-bottom: 0px;
}

#home-welcome .welcome-content {
  width: 100%;
  height: 100%;
  position: relative;
  padding-left: 3rem;
  padding-right: 3rem;
}

@media only screen and (max-width: 600px) {
  #home-welcome .welcome-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

#home-welcome .welcome-content .mission-statement {
  width: 55%;
  height: 100%;
  max-width: 991px;
  display: table;
  padding-left: 0rem;
}

@media only screen and (max-width: 1280px) {
  #home-welcome .welcome-content .mission-statement {
    width: 60%;
    height: 100%;
    padding-left: 0rem;
  }
}

@media only screen and (max-width: 768px) {
  #home-welcome .welcome-content .mission-statement {
    width: 100%;
    height: 100%;
    padding-left: 0;
  }
}

#home-welcome .welcome-content .mission-statement .text {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.1;
  padding-top: 60px;
}

@media only screen and (max-width: 1280px) {
  #home-welcome .welcome-content .mission-statement .text {
    line-height: 1.1;
  }
}

@media only screen and (max-width: 768px) {
  #home-welcome .welcome-content .mission-statement .text {
    padding-top: 0px;
    width: 70%;
  }
}

@media only screen and (max-width: 600px) {
  #home-welcome .welcome-content .mission-statement .text {
    width: 70%;
  }
}

#home-welcome .welcome-content .mission-statement .text p {
  display: inline;
  margin: 0;
}

@media only screen and (max-width: 1280px) {
  #home-welcome .welcome-content .mission-statement .text p {
    font-size: 7rem;
  }
}

@media only screen and (max-width: 768px) {
  #home-welcome .welcome-content .mission-statement .text p {
    font-size: 7rem;
  }
}

@media only screen and (max-width: 600px) {
  #home-welcome .welcome-content .mission-statement .text p {
    font-size: 4.5rem;
  }
}

#home-welcome .welcome-content .mission-statement .text p:nth-child(2) {
  position: relative;
}

#home-welcome .welcome-content .mission-statement .text .word {
  position: absolute;
  width: 500px;
  margin-left: 2rem;
  margin-top: -0.8rem;
  opacity: 0;
  text-transform: lowercase;
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
}

@media only screen and (max-width: 1280px) {
  #home-welcome .welcome-content .mission-statement .text .word {
    margin-top: -0.7rem;
  }
}

@media only screen and (max-width: 768px) {
  #home-welcome .welcome-content .mission-statement .text .word {
    margin-top: -0.7rem;
    margin-left: 1.5rem;
  }
}

@media only screen and (max-width: 600px) {
  #home-welcome .welcome-content .mission-statement .text .word {
    margin-top: -0.3rem;
    margin-left: 1rem;
  }
}

#home-welcome .welcome-content .mission-statement .text .letter {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
          transform-origin: 50% 50% 25px;
}

#home-welcome .welcome-content .mission-statement .text .letter.out {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  -webkit-transition: -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

#home-welcome .welcome-content .mission-statement .text .letter.behind {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}

#home-welcome .welcome-content .mission-statement .text .letter.in {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#home-welcome .welcome-content .mission-statement .scroll-bottom {
  position: absolute;
  bottom: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: auto;
  display: block;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  #home-welcome .welcome-content .mission-statement .scroll-bottom {
    bottom: 20px;
  }
}

#home-welcome .welcome-content .mission-statement .scroll-bottom .scroll-label {
  margin-bottom: 6px;
  text-transform: uppercase;
}

#home-welcome .welcome-content .mission-statement .scroll-bottom .scroll-txt {
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
}

#home-textpath {
  padding-bottom: 0;
  padding-top: 0;
}

#home-textpath .text-container {
  padding: 70px 0;
}

#home-textpath .text-container text {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
}

@media only screen and (max-width: 768px) {
  #home-textpath .text-container text {
    font-size: 5rem;
  }
}

#home-textpath .middle-eye .eye-border {
  width: 100%;
  height: 4px;
}

/* About Section  */
#home-about .boxed {
  max-width: 1140px;
}

#home-about .about-intro {
  margin-bottom: 4rem;
  max-width: 900px;
  line-height: 1.3;
}

#home-about .scratch-module {
  position: relative;
  margin-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#home-about .scratch-module .scratch-label {
  width: 2.2rem;
  height: 100%;
}

@media only screen and (max-width: 768px) {
  #home-about .scratch-module .scratch-label {
    display: none;
  }
}

#home-about .scratch-module .scratch-label img {
  width: 100%;
}

#home-about .scratch-module .canvasContainer {
  margin-left: 30px;
  max-width: 750px;
  height: 100%;
  position: relative;
}

@media only screen and (max-width: 768px) {
  #home-about .scratch-module .canvasContainer {
    margin-left: 0;
    height: 50vh;
  }
}

#home-about .scratch-module .canvasContainer #scratcher {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  cursor: url(../img/svg/hand.svg) 60 60, crosshair;
  background-size: cover;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 768px) {
  #home-about .scratch-module .canvasContainer #scratcher {
    background-size: 100%;
    background-position: center right;
    height: auto;
  }
}

#home-about .scratch-module .canvasContainer .cursor-object {
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: vibrate 1s infinite forwards;
          animation: vibrate 1s infinite forwards;
}

#home-about .scratch-module .canvasContainer .cursor-object.off {
  display: none;
}

@media only screen and (max-width: 768px) {
  #home-about .scratch-module .canvasContainer .cursor-object {
    display: none;
  }
}

#bridge {
  display: block;
  margin: 0 auto;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg");
  background-image: -webkit-image-set(url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpg") 1x, url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943-2x.jpg") 2x);
  background-size: cover;
  width: 100%;
  max-width: 750px;
  height: auto;
  cursor: crosshair;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png) 53 53, crosshair;
}

#bridgeContainer {
  text-align: center;
  font-family: Avenir, sans-serif;
}

#bridgeContainer figcaption {
  margin-top: 2rem;
}

/*     
    Name: _work.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
#work #work-intro {
  padding-top: 220px;
  padding-bottom: 140px;
}

@media only screen and (max-width: 768px) {
  #work #work-intro {
    padding-bottom: 80px;
  }
}

#work #work-intro .boxed {
  max-width: 1140px;
  width: 80%;
}

@media only screen and (max-width: 600px) {
  #work #work-intro .boxed {
    width: 100%;
  }
}

#work #work-intro .intro-txt {
  line-height: 1.3;
}

#work #work-intro .scroll-bottom {
  margin: auto;
  display: block;
  text-align: right;
  padding-right: 3rem;
  margin-top: 2rem;
}

#work #work-intro .scroll-bottom .scroll-label {
  margin-bottom: 6px;
  text-transform: uppercase;
}

#work #work-intro .scroll-bottom .scroll-txt {
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
}

@media only screen and (max-width: 600px) {
  #work #work-grid {
    padding-top: 0;
  }
}

#work #work-grid .project-item {
  width: 100%;
  height: auto;
  max-height: 80vh;
  position: relative;
  overflow: hidden;
  max-width: 1140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0 auto 15rem;
  opacity: 0;
  -webkit-transform: translate3d(-100px, 0, 0);
          transform: translate3d(-100px, 0, 0);
  -webkit-transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#work #work-grid .project-item.ajax {
  -webkit-transition: opacity 0.3s ease-out 0.2s;
  transition: opacity 0.3s ease-out 0.2s;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0 auto 7rem;
    max-height: 100%;
  }
  #work #work-grid .project-item:nth-child(odd) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

#work #work-grid .project-item:last-child {
  margin-bottom: 0;
}

#work #work-grid .project-item:hover .project-txt .more-link {
  -webkit-transform: translate3d(6px, 0, 0);
          transform: translate3d(6px, 0, 0);
}

#work #work-grid .project-item .project-txt {
  position: relative;
  max-width: 600px;
  background-color: #ffffff;
  color: #0a0a0a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  will-change: transform;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item .project-txt {
    margin-top: 1rem;
  }
}

#work #work-grid .project-item .project-txt .project-txt-content:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#work #work-grid .project-item .project-txt .title {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  line-height: 1;
  margin-bottom: 1rem;
  text-transform: lowercase;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item .project-txt .title {
    margin-bottom: 0.8rem;
  }
}

#work #work-grid .project-item .project-txt .category {
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
  color: #666666;
  text-transform: lowercase;
}

#work #work-grid .project-item .project-txt .category:after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #0a0a0a;
  margin: 1.5rem 0;
  -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item .project-txt .category:after {
    display: none;
  }
}

#work #work-grid .project-item .project-txt .desc {
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
  max-width: 450px;
  margin-top: 1rem;
}

#work #work-grid .project-item .project-txt .more-link {
  position: relative;
  margin-top: 2rem;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item .project-txt .more-link {
    margin-top: 1rem;
  }
}

#work #work-grid .project-item .project-txt .more-link:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-image: url("../img/svg/chevron-min.svg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  margin-left: 0.2rem;
}

#work #work-grid .project-item .project-txt .more-link:hover {
  -webkit-transform: translate3d(6px, 0, 0);
          transform: translate3d(6px, 0, 0);
}

#work #work-grid .project-item .project-visual {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.25s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  overflow: hidden;
}

#work #work-grid .project-item .project-visual .mask:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item .project-visual .mask:after {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

#work #work-grid .project-item .project-visual img {
  width: 100%;
  max-width: 600px;
  height: auto;
  position: relative;
}

#work #work-grid .project-item.l-side .project-txt .project-txt-content {
  right: 0;
}

#work #work-grid .project-item.l-side .project-txt .project-txt-content:after {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

#work #work-grid .project-item.l-side .project-txt .project-txt-content .title,
#work #work-grid .project-item.l-side .project-txt .project-txt-content .category,
#work #work-grid .project-item.l-side .project-txt .project-txt-content .desc {
  padding-right: 3rem;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item.l-side .project-txt .project-txt-content .title,
  #work #work-grid .project-item.l-side .project-txt .project-txt-content .category,
  #work #work-grid .project-item.l-side .project-txt .project-txt-content .desc {
    padding-right: 0;
  }
}

#work #work-grid .project-item.l-side .project-txt .project-txt-content .category:after {
  width: calc(100% + 3rem);
  margin: 1.5rem 0;
}

#work #work-grid .project-item.l-side .project-visual .mask {
  display: inline-block;
}

#work #work-grid .project-item.l-side .project-visual .mask:after {
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#work #work-grid .project-item.r-side .project-txt .project-txt-content {
  left: 0;
}

#work #work-grid .project-item.r-side .project-txt .project-txt-content .title,
#work #work-grid .project-item.r-side .project-txt .project-txt-content .category,
#work #work-grid .project-item.r-side .project-txt .project-txt-content .desc,
#work #work-grid .project-item.r-side .project-txt .project-txt-content .more-link {
  padding-left: 3rem;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item.r-side .project-txt .project-txt-content .title,
  #work #work-grid .project-item.r-side .project-txt .project-txt-content .category,
  #work #work-grid .project-item.r-side .project-txt .project-txt-content .desc,
  #work #work-grid .project-item.r-side .project-txt .project-txt-content .more-link {
    padding-left: 0;
  }
}

#work #work-grid .project-item.r-side .project-txt .project-txt-content .category:after {
  width: 0;
  margin: 1.5rem 0rem 1.5rem -3rem;
}

#work #work-grid .project-item.r-side .project-visual img {
  float: right;
}

@media only screen and (max-width: 600px) {
  #work #work-grid .project-item.r-side .project-visual img {
    float: none;
  }
}

#work #work-grid .project-item.r-side .project-visual .mask:after {
  -webkit-transition: -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#work #work-grid .project-item.on {
  opacity: 1;
  -webkit-transform: translate3d(0px, 0, 0);
          transform: translate3d(0px, 0, 0);
}

#work #work-grid .project-item.on .project-txt {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}

#work #work-grid .project-item.on .project-txt .project-txt-content:after {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

#work #work-grid .project-item.on .project-txt .project-txt-content .category:after {
  width: calc(100% + 3rem);
}

#work #work-grid .project-item.on .project-visual .mask:after {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

.post-load-more {
  width: 50px;
  height: 50px;
  margin: 100px auto 0;
  display: block;
  clear: both;
  opacity: 0;
  visibility: hidden;
  position: relative;
  -webkit-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
  -webkit-animation: spinLoader 1s linear infinite;
          animation: spinLoader 1s linear infinite;
}

.post-load-more.loading {
  opacity: 1;
  visibility: visible;
}

.post-load-more .loading-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  z-index: 1;
  border: 5px solid #0a0a0a;
  border-radius: 50%;
  border-top: 5px solid #666666;
  width: 40px;
  height: 40px;
  -webkit-animation: spinLoader 2s linear infinite;
  animation: spinLoader 2s linear infinite;
}

.no-posts {
  position: relative;
  top: 200px;
  margin: auto;
  width: 80%;
  max-width: 700px;
  line-height: 1.4;
}

@media only screen and (max-width: 600px) {
  .no-posts {
    top: 100px;
  }
}

/*     
    Name: _single.scss    
    Author: Zakaria El Khachia
    Client: Grace Choy
*/
#single #single-intro {
  padding-top: 240px;
  padding-bottom: 100px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

#single #single-intro .boxed h1 {
  text-align: center;
  margin: 2rem auto;
  display: block;
}

#single #single-intro .boxed .intro-txt {
  text-align: left;
  display: block;
  line-height: 1.3;
}

@media only screen and (max-width: 600px) {
  #single #single-intro .boxed .intro-txt {
    font-size: 1.2rem;
  }
}

#single #single-content {
  padding-top: 0;
  padding-bottom: 0;
}

#single #single-content .gallery-wrapper .cover {
  width: 100%;
  height: 100%;
  margin: 0 auto 15rem;
  position: relative;
  overflow: hidden;
  max-width: 768px;
}

@media only screen and (max-width: 768px) {
  #single #single-content .gallery-wrapper .cover {
    margin-bottom: 7rem;
  }
}

@media only screen and (max-width: 600px) {
  #single #single-content .gallery-wrapper .cover {
    margin-bottom: 3rem;
  }
}

#single #single-content .gallery-wrapper .cover .cover-mask {
  display: none;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.9;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#single #single-content .gallery-wrapper .cover img {
  max-height: 85vh;
  width: auto;
  margin: auto;
  display: block;
}

#single #single-content .gallery-wrapper .gallery-item {
  width: 100%;
  height: 100%;
  margin-bottom: 15rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 768px) {
  #single #single-content .gallery-wrapper .gallery-item {
    margin-bottom: 7rem;
  }
}

@media only screen and (max-width: 600px) {
  #single #single-content .gallery-wrapper .gallery-item {
    margin-bottom: 3rem;
    display: block;
  }
}

#single #single-content .gallery-wrapper .gallery-item:last-child {
  margin-bottom: 0;
}

#single #single-content .gallery-wrapper .gallery-item img {
  max-height: 80vh;
}

#single #single-content .gallery-wrapper .gallery-item.g-full img {
  margin: auto;
}

#single #single-content .gallery-wrapper .gallery-item.g-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#single #single-content .gallery-wrapper .gallery-item.g-left img {
  max-width: 55vw;
  margin: auto;
  -webkit-transform: translateX(-30%);
          transform: translateX(-30%);
}

@media only screen and (max-width: 768px) {
  #single #single-content .gallery-wrapper .gallery-item.g-left img {
    max-width: 100%;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

#single #single-content .gallery-wrapper .gallery-item.g-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

#single #single-content .gallery-wrapper .gallery-item.g-right img {
  max-width: 55vw;
  margin: auto;
  -webkit-transform: translateX(30%);
          transform: translateX(30%);
}

@media only screen and (max-width: 768px) {
  #single #single-content .gallery-wrapper .gallery-item.g-right img {
    max-width: 100%;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

#single #single-content .gallery-wrapper .gallery-item.g-centered img {
  max-width: 60vw;
  margin: auto;
  display: block;
}

@media only screen and (max-width: 768px) {
  #single #single-content .gallery-wrapper .gallery-item.g-centered img {
    max-width: 100%;
  }
}

#single #single-content .gallery-wrapper .gallery-item.video {
  width: 100%;
  height: 100%;
  margin: auto;
}

#single #single-content .gallery-wrapper .gallery-item.video div {
  width: 100%;
  height: 100%;
  margin: auto;
}

#single #single-content .gallery-wrapper .gallery-item.video p {
  width: 100%;
  height: 100%;
  margin: auto;
}

#single #single-content .gallery-wrapper .gallery-item.video p iframe {
  position: relative !important;
}

#single #single-content .next-post-nav {
  display: block;
  margin: 5rem auto 0;
  text-align: center;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  -webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#single #single-content .next-post-nav .next-link {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

#single #single-content .next-post-nav .next-link:before {
  content: attr(data-label);
  position: absolute;
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  top: 0;
  left: 0;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  color: #dd0c3d;
  -webkit-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
}

@media only screen and (max-width: 600px) {
  #single #single-content .next-post-nav .next-link:before {
    display: none;
  }
}

#single #single-content .next-post-nav .stroke {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 1px;
  background: #0a0a0a;
  margin: 0 1rem;
}

@media only screen and (max-width: 600px) {
  #single #single-content .next-post-nav .stroke {
    display: block;
    width: 1px;
    height: 20px;
    background: #0a0a0a;
    margin: 1rem auto 0.8rem;
  }
}

#single #single-content .next-post-nav .next-label {
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  text-transform: lowercase;
}

@media only screen and (max-width: 600px) {
  #single #single-content .next-post-nav .next-label {
    display: block;
    overflow: auto;
  }
}

#single #single-content .next-post-nav .next-label:before {
  content: attr(data-label);
  position: absolute;
  font-family: "Helvetica-Neue-Bold", Arial, sans-serif;
  top: 0;
  left: 0;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  color: #dd0c3d;
  -webkit-transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
  transition: width 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
}

@media only screen and (max-width: 600px) {
  #single #single-content .next-post-nav .next-label:before {
    display: none;
  }
}

#single #single-content .next-post-nav:hover .next-link:before {
  width: 100%;
}

#single #single-content .next-post-nav:hover .next-label:before {
  width: 100%;
}

/*     
    Name: _contact.scss    
    Author: Zakaria El Khachia
    Client:
*/
#contact {
  position: relative;
  padding-bottom: 0px;
}

#contact .boxed .contact-info {
  margin-bottom: 10rem;
}

#contact .boxed .contact-info h2 {
  margin-bottom: 3rem;
}

#contact .boxed .contact-info .info {
  margin-left: 0;
}

#contact .boxed .contact-info .info a {
  margin-bottom: 1rem;
  display: block;
  font-family: "Helvetica-Neue-Light", Arial, sans-serif;
  font-weight: normal;
}

#contact .boxed .contact-info .info a:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 1rem;
  background-size: 100%;
  background-repeat: no-repeat;
}

#contact .boxed .contact-info .info a.email:before {
  background-image: url("../img/svg/email.svg");
}

#contact .boxed .contact-info .info a.phone:before {
  background-image: url("../img/svg/phone.svg");
}

#contact .boxed .bottom-navigation {
  max-width: 600px;
  margin: 0;
}

#contact .boxed .bottom-navigation .navigation-container ul li {
  margin-bottom: 1rem;
}

#contact .boxed .bottom-navigation .navigation-container ul li:last-child {
  margin-bottom: 0rem;
}

@media only screen and (max-width: 768px) {
  #contact .boxed .bottom-navigation .navigation-container ul li:last-child {
    margin-bottom: 1rem;
  }
}

#contact .boxed .bottom-navigation .navigation-container ul li a {
  color: #0a0a0a;
  -webkit-animation: none ease-in-out;
          animation: none ease-in-out;
  position: relative;
  text-transform: lowercase;
}

#contact .boxed .bottom-navigation .navigation-container ul li a:before {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  color: #dd0c3d;
  -webkit-transition: width 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: width 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#contact .boxed .bottom-navigation .navigation-container ul li a:hover:before {
  width: 100%;
}

/*glow for webkit*/
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #111111, 0 0 35px #111111, 0 0 40px #111111, 0 0 50px #111111, 0 0 75px #111111;
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #111111, 0 0 17px #000000, 0 0 20px #111111, 0 0 25px #111111, 0 0 35px #111111;
  }
}
@keyframes neon1 {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #111111, 0 0 35px #111111, 0 0 40px #111111, 0 0 50px #111111, 0 0 75px #111111;
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #111111, 0 0 17px #000000, 0 0 20px #111111, 0 0 25px #111111, 0 0 35px #111111;
  }
}
/*# sourceMappingURL=main.css.map */