.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #191919;
    z-index: 99999999;
  }

  svg#loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      filter: drop-shadow(0px 1px 2px rgba(250, 250, 250, 0.40));
  }

  #OO_loader {
    stroke: #fafafa;
    stroke-dasharray: 1135;
    stroke-dashoffset: 0;
    animation: infinity 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;
  }

  @keyframes infinity {
    to {
      stroke-dashoffset: 2270px;
    }
  }


/* General 
========================================================================== */
p, a {
    text-rendering: optimizelegibility;
    -moz-font-feature-settings: "kern" 1;
    -moz-font-feature-settings: "kern=1";
    -ms-font-feature-settings: "kern" 1;
    -o-font-feature-settings: "kern" 1;
    -webkit-font-feature-settings: "kern" 1;
    font-feature-settings: "kern" 1;  
}

a {
    cursor: pointer;
}

.pl-top {
    padding-top: 400px;
}
.pl-bottom {
    padding-bottom: 400px;
}
.pml-bottom {
    padding-bottom: 300px;
}

.pm-top {
    padding-top: 200px;
}

.pm-bottom {
    padding-bottom: 200px;
}

.ps-top {
    padding-top: 100px;
}

.ps-bottom {
    padding-bottom: 100px;
}

.pxs-top {
    padding-top: 60px;
}

.pxs-bottom {
    padding-bottom: 60px;
}

.p2xs-top {
    padding-top: 20px;
}
.p2xs-bottom {
    padding-bottom: 20px;
}
.p2xs-right {
    padding-right: 20px;
}

/* Use for most content on white/light background */
p.main-content {
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 36px;
    font-size: 20px;
    color: #191919;
}

p.main-content-white {
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 36px;
    font-size: 20px;
    color: rgba(250, 250, 250, 0.60);
}

img {
    width: 100%;
}

figure {
    margin-bottom: 0;
}

.figure-caption {
    font-family: akagi-pro,sans-serif;
    font-weight: 600;
    color: rgba(25, 25, 25, 0.6);
    margin-bottom: 10px;
}

.figure-img {
    margin-bottom: 0;
    line-height: 1;
}



/* END OF General 
========================================================================== */


/* My nav 
========================================================================== */
.myNav {
    position: fixed;
    padding: 60px 20px 20px 40px;
    font-family: eb-garamond, serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    z-index: 100;

}

/* ---- Main nav list background theme classes ---- */
.main-nav-list-background-white {
    background-color: rgba(255, 255, 255, 0.95);
    opacity: 0;
    left: 254px;
    position: absolute;
    width: 370px;
    height: 103px;
    top: 0px;
    transition: opacity 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
.main-nav-list-background-dark {
    background-color: rgba(25, 25, 25, 0.80);
    opacity: 0;
    left: 254px;
    position: absolute;
    width: 370px;
    height: 103px;
    top: 0px;
    transition: opacity 350ms cubic-bezier(0.390, 0.575, 0.565, 1.000);

}
div.myNav:hover .main-nav-list-background-white {
    opacity: 1;
}
div.myNav:hover .main-nav-list-background-dark {
    opacity: 1;
}

.main-nav-item a {
    padding: 0px 10px 10px 10px;
    color: rgba(250, 250, 250, 0.75);
}

.main-nav-item {
    margin-left: 50px;
    height: 100%;
}

/* ---- ROO Logo ---- */
li.logo-list {
    margin: 0;
}

a.logo-link {
    padding: 0px 20px 20px 20px;
}

/* ---- R theme classes ---- */
.R-white{
    fill: #fafafa;
    transition: all 150ms ease-in;
}
.R-dark{
    fill: #191919;
    transition: all 150ms ease-in;

}
/* ---- OO theme classes ---- */
.OO-white {
    stroke: #fafafa;
    transition: all 150ms ease-in;    
}
.OO-dark {
    stroke: #191919;
    transition: all 150ms ease-in;
}
/* ---- Logo theme classes for drop-shadow ---- */
.logo-white {
    filter: drop-shadow(0px 1px 2px rgba(250, 250, 250, 0.25));
}

.logo-dark {
    filter: drop-shadow(0px 1px 2px rgba(25, 25, 25, 0.6));
}

svg#logo {
    width: 94px;
    transition: all, .25s ease-out;
}
 /* Animating the infinity logo */
.animate {
    stroke-dasharray: 1135;
    stroke-dashoffset: 0;
    animation: infinity .8s cubic-bezier(0.455, 0.030, 0.515, 0.955) forwards;
  }
  
  @keyframes infinity {
    to {
      stroke-dashoffset: 2270px;
    }
  }


/* ---- About ---- */
li.about-list {
    margin-left: 100px;
}
/* ---- Characters above sliding down INTO VIEW on hover---- */
/* ---- Links theme classes ---- */
.slide-vertical-white .char:before {
    color:#fafafa;
    
}
.slide-vertical-dark .char:before {
color:#191919;
}

.slide-vertical .char:before {
visibility: visible;
transform: translateY(-100%);
transition: transform .35s cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
transition-delay: calc(0.02s * ( var(--char-index)));
}

.slide-vertical:hover .char:before {
transform: translateY(0%);
transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}

/* ---- Current characters sliding down OUT OF view on hover ---- */
/* ---- Links theme classes ---- */
.slide-vertical-white .char:after {
color: rgba(250, 250, 250, 0.6);
}

.slide-vertical-dark .char:after {
color: rgba(25, 25, 25, 0.60);
}

/* Active link */
.slide-vertical-dark-active .char:after {
color: rgba(25, 25, 25, 1);
}

.slide-vertical .char:after {
visibility: visible;
transition: transform .35s cubic-bezier(0.860, 0.000, 0.070, 1.000);
transition-delay: calc(0.2s + ( 0.02s * ( var(--char-index)) ));
}

.slide-vertical:hover .char:after {
transition-delay: calc(0.02s * ( var(--char-index)));
transform: translateY(100%);
}


/* ---- Styling the tooltip ---- */
.tooltip-inner {
    font-size: 13px;
    color: rgba(250, 250, 250, 0.85);    
    font-family: akagi-pro,sans-serif;
    background-color: rgba(0, 0, 0, .9);
    font-weight: 500;
    transform: translateY(-16px);
    max-width: 300px;
    padding: 6px 12px;
    border-radius: 30px;
}
/* ---- Hiding the tooltip arrow --- */
.tooltip .arrow {
    visibility: hidden;
}

/* ---- WORK ---- */
/* ---- Work menu container ---- */
.work-menu {
    position: relative;
    background: #fafafa;

}
/* ---- Work menu button ---- */
.work-menu-label {
    padding: 16px 45px 16px 24px;
    width: 100%;
    color: #191919;
    transition: all 350ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    letter-spacing: normal;
}

li#work_list {
    font-family: akagi-pro,sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 0;
    border-radius: 0;
    transform: translateY(-16px);
    height: 59px;
    width: 115px;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 0 6px rgba(0,0,0,.08), 0 6px 12px rgba(0,0,0,.10);
    /* ---- Closing side menu curve ---- */
    transition: all 350ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    /* ---- Delaying the animation so the burger animation can finish ---- */
    transition-delay: .3s;
}

li#work_list > a {
    padding: 0;
}

/* ---- Adding a drop-shadow on the buger on hover ---- */
li#work_list > a:hover svg {
    filter: drop-shadow(0px 12px 6px rgba(25, 25, 25, 0.6));
}


/* ---- Opening up the menu ---- */
.side-nav-active {
    width: 200px !important;
    height: 413px !important;
    border-radius: 2px !important;
    /* ---- Opening side menu curve ---- */
    transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000) !important;
    /* ---- Delaying the animation so the burger animation can finish ---- */
    transition-delay: .18s !important;
}

/* ---- Burger lines ---- */
svg#burger {
    transition: filter .3s ease-out;  
}

.ham {
    transition: transform 400ms;
    position: absolute;
    top: 8px;
    right: 10px;  
}
.hamRotate.active {
    transform: rotate(45deg);
}
.hamRotate180.active {
    transform: rotate(180deg);
}
.line {
    fill:none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke:rgba(25, 25, 25, 1);
    stroke-width: 5;
    stroke-linecap:round;
    transition: transform, .3s ease-out;    
}
.ham8 .top {
    stroke-dasharray: 40 160;
}
.ham8 .middle {
    stroke-dasharray: 40 142;
    transform-origin: 50%;
    transition: transform 400ms;
}
.ham8 .bottom {
    stroke-dasharray: 40 85;
    transform-origin: 50%;
    transition: transform 400ms, stroke-dashoffset 400ms;
}
.ham8.active .top {
    stroke-dashoffset: -64px;
}
.ham8.active .middle {
    transform: rotate(90deg);
}
.ham8.active .bottom {
    stroke-dashoffset: -64px;
}
.active {
    filter: drop-shadow(0px 12px 6px rgba(25, 25, 25, 0.6));
}
/* ---- END OF Burger lines ---- */


/* Work Side nav 
======================================================= */
/* ---- Side-nav theme classes ---- */
ul.side-nav{
    background: #fafafa;
}

.side-nav-item {
    margin: 0;
    transition: all .3s cubic-bezier(.62,.13,.31,.9) !important;
}

.side-nav-item:hover {
    background: rgba(25,25,25,0.06);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
/* ---- Reverse shadow for the last item ---- */
.side-nav-item-last:hover {
    box-shadow: 0 -10px 20px rgba(0,0,0,0.12); 
}

ul.side-nav a {
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #191919;
    padding: 16px 0px 16px 24px;
    letter-spacing: normal;
    transition: all .3s cubic-bezier(.62,.13,.31,.9) !important;
}

/* ---- Micronudging the labels ---- */
ul.side-nav a:hover {
    padding-left: 30px;
}

.slide-vertical .char {
    overflow: hidden;
    color: transparent;
}

/* ---- Styles for active link / Same as hover  ---- */
.side-nav-link-active {
    padding-left: 30px !important;
}
.side-nav-item-active {
    background: rgba(25,25,25,0.06) !important;
}

/* END OF Work Side nav 
======================================================= */
/* END OF My nav 
========================================================================== */


/* Intro
========================================================================== */
.intro {
    width: 100vw;
    background-color: #191919;
}

.home-intro {
    position: relative;
}

/* ---- Scroller indicator---- */
.scroller {
    width: 1px;
    background: rgba(255, 255, 255, 0.04);
    position: absolute;  
    height: 188px;
    left: 50%;
    bottom: 0;
    overflow: hidden;
}
.scroller::before {
    content: '';
    position: absolute;
    height: 52px;
    background: #fafafa;
    width: 1px;
    animation: scroller 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@keyframes scroller {
    0% {transform: translateY(-52px)}
    100%  {transform: translateY(188px)}
}

  /* Intro H1
======================================================= */
h1.intro-text {
    font-size: 112px;
    color: rgba(250, 250, 250, 0.4);
    font-family: eb-garamond, serif;
    font-weight: 400;
    padding-top: 30vh;
    padding-bottom: 30vh;
}
.kern-designer {
    cursor: pointer;
    color: #fafafa;
}
/* ---- Offsetting the kerning on each letter ---- */
h1.intro-text .char:first-child {
    letter-spacing: -10px;
}
h1.intro-text .char:nth-child(2) {
    letter-spacing: 5px;
}
h1.intro-text .char:nth-child(3) {
    letter-spacing: 4px;
}
h1.intro-text .char:nth-child(4) {
    letter-spacing: -8px;
}
h1.intro-text .char:nth-child(5) {
    letter-spacing: -11px;
}
h1.intro-text .char:nth-child(6) {
    letter-spacing: 6px;
}
h1.intro-text .char:nth-child(7) {
    letter-spacing: 8px;
}

.kern-designer .char {
    transition: letter-spacing 350ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
} 
/* END OF Intro H1
======================================================= */
/* END OF Intro 
========================================================================== */


/* Projects 
========================================================================== */
.projects {
    background-color: #ffffff;
}
/* ---- Project tag ---- */
span.tag {
    display: block;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    color: rgba(25, 25, 25, 0.20);
    text-transform: uppercase;
    padding-bottom: 16px;
    margin: 0;
    letter-spacing: 1.2px;
}
/* ---- Project title ---- */
h3.title, h3.title-word {
    font-family: eb-garamond, serif;
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    color: #191919;
    padding-bottom: 32px;;
    margin: 0;
}

/* ---- Animating project title by char ---- */
h3.title .char {
    color: transparent;
    overflow: hidden;
}
h3.title .char::after {
    visibility: visible;
    color: #191919;
    opacity: 0;
    transform: translateY(30%);
    transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-delay: calc(.2s + (.04s * var(--char-index) ) );
}

[data-scroll="in"] h3.splitting .char::after {
    opacity: 1;
    transform: translateY(0);
}


/* ---- Project button ---- */
.project-button-container {
   position: absolute;
   bottom: 0;
}
.project-button-container-right {
   right: 0;
}

a.project-button {
    display: block;
    float: right;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #191919;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 16px 48px 16px 24px;
    box-shadow: 0 6px 12px rgba(25,25,25,.02);
    border: 0.1px solid rgba(25, 25, 25, 0.05);
    overflow: hidden;
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
/* ---- Project button stroke right ---- */
a.project-button::after {
    content: ' ';
    position: absolute;
    height: 1px;
    width: 22px;
    background: #191919;
    top: 50%;
    right: 16px;
    /* ---- Moving stroke right back to the left transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: .2s;
}
/* ---- Project button label ---- */
a.project-button div{
    /* ---- Moving Project button label back to the left transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: .05s;
}
/* ---- Project button stroke left ---- */
a.project-button::before {
    content: ' ';
    position: absolute;
    height: 1px;
    width: 22px;
    background: #191919;
    top: 50%;
    left: -24px;
    opacity: 0;
    /* ---- Moving stroke left back to the left transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: 0s;
}


/* ---- Moving stroke right to the right ---- */
a.project-button:hover::after {
    transform: translateX(40px);
    opacity: 0;
    /* ---- Moving stroke right to the right transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: 0s;
}
/* ---- Moving project label to the right ---- */
a.project-button:hover div{
    transform: translateX(28px);
     /* ---- Moving Project button label to the right transition ---- */
     transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
     transition-delay: .05s;
}
/* ---- Moving stroke left to the right ---- */
a.project-button:hover::before {
    transform: translateX(40px);
    opacity: 1;
     /* ---- Moving stroke left to the right transition ---- */
     transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
     transition-delay: .2s;
}

a.project-button:hover{
    text-decoration: none;
    box-shadow: 13px 32px 36px -14px rgba(25,25,25,0.1);
    border: 0.1px solid rgba(25, 25, 25, 1);

}
.project-img-container {
	position: relative;
	width: 540px;
	height: 435px;
    perspective: 600px;
    border: none;
}
.project-img {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
    transition:  all 1200ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    box-shadow: 0 4px 20px 0px rgba(25,25,25,.18);
    background-size: contain;
}

/* ---- All project images are exported @2x ---- */
.paypal-project-img {
    background-image: url(../images/paypal-img.png);
}
.atm-project-img {
    background-image: url(../images/atm-img.jpg);
}
.vig-project-img {
    background-image: url(../images/vig-img.png);
}
.wallet-project-img {
    background-image: url(../images/wallet-img.png);
}
.utapp-project-img {
    background-image: url(../images/utapp-img.png);
}
.playground-project-img {
    background-image: url(../images/playground-img.png);
}

.project-img-container:hover .project-img {
	box-shadow: 0 8px 100px 4px rgba(25,25,25,.32);
}

.project-img .highlight {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* END OF Projects 
========================================================================== */

/* Common styles between project pages 
========================================================================== */
div.project-page-intro {
    width: 100%;
    height: 100vh;
}

div.project-page-content {
    width: 50%;
    height: 100%;
    background: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
}

div.project-page-text {
    width: 600px;
}
span.year {
    display: block;
    font-family: akagi-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: rgba(255, 255, 243, .8);
    position: relative;
    transform: translateX(95px);
    animation-duration: 1s;
    text-transform: lowercase;
}

span.year::before {
    content:'';
    height: 1px;
    width: 85px;
    background: rgba(255, 255, 243, .8);
    position: absolute;
    top: 50%;
    transform: translateX(-95px);
    animation-duration: 1s;
}
 /* White H2 >> Use for project titles in Hero section */
h2.project-page-title {
    font-family: eb-garamond, serif;
    font-weight: 600;
    font-style: normal;
    font-size: 48px;
    color: #fafafa;
    padding-bottom: 38px;
    padding-top: 20px;
}


/* White P >> Use for project copy in Hero section */ 
p.project-page-copy {
    font-family: akagi-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    color: rgba(250, 250, 250, 0.6);
    line-height: 36px;
    animation-duration: 1s;
}

div.project-page-img {
    width: 50%;
    height: 100%;
    float: right;
}

/* ---- Project page scroll indicator >> moving to the middle ---- */
.project-page-scroller {
    left: auto;
}

/* A black and thin H2 */
h2.black-thin {
    font-family: eb-garamond, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    padding-bottom: 38px;
    color: rgba(25, 25, 25, 1);
}

h2.black-transparent {
    color: rgba(25, 25, 25, .8);
    padding: 0;
    margin: 0;
}

/* A white and thin H2 */
h2.white-thin {
    font-family: eb-garamond, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 48px;
    padding-bottom: 38px;
    color: #fafafa;
}

div.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 200px;
    bottom:0;
}

.img-box-shadow {
    box-shadow: 0 4px 20px 0px rgba(25,25,25,.18);
}
img.img-box-shadow_less {
    box-shadow: 0 4px 20px 0px rgba(25,25,25,.08);
}

/* Y position of cascading images */
.casc-imgContainer-1 {
    transform: translateY(-80px);
}
.casc-imgContainer-2 {
    transform: translateY(calc(-80px * 2));
}
.casc-imgContainer-3 {
    transform: translateY(calc(-80px * 3));
}
.casc-imgContainer-4 {
    transform: translateY(calc(-80px * 4));
}

/* ScrollOut Classes
======================================================= */
/* MyFadeIn Classes */

/* Generic FadeInUp >> Tweak Transform, Transition and Delay values to liking */
[data-scroll].MyFadeIn {
    opacity: 0;
    transform: translateY(20px);
    transition: all .65s ease;
}[data-scroll="in"].MyFadeIn {
    opacity: 1;
    transform: translateY(0px);
}

/* Cascading animation for three elements with different delays */
[data-scroll].MyFadeIn .MyFadeIn-delay0 {
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease;
}[data-scroll="in"].MyFadeIn .MyFadeIn-delay0 {
    opacity: 1;
    transform: translateY(0px);
}

[data-scroll].MyFadeIn .MyFadeIn-delay1 {
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease;
    transition-delay: .4s;
}[data-scroll="in"].MyFadeIn .MyFadeIn-delay1 {
    opacity: 1;
    transform: translateY(0px);
}

[data-scroll].MyFadeIn .MyFadeIn-delay2 {
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease;
    transition-delay: .75s;
}[data-scroll="in"].MyFadeIn .MyFadeIn-delay2 {
    opacity: 1;
    transform: translateY(0px);
}
[data-scroll].MyFadeIn .MyFadeIn-delay3 {
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease;
    transition-delay: 1.10s;
}[data-scroll="in"].MyFadeIn .MyFadeIn-delay3 {
    opacity: 1;
    transform: translateY(0px);
}
/* END OF Cascading animation for three elements with different delays */

[data-scroll].MyFadeIn div.MyFadeInRight-delay2  {
    opacity: 0;
    transform: translateX(20px);
    transition: all .8s ease;
    transition-delay: .8s;
}[data-scroll="in"].MyFadeIn div.MyFadeInRight-delay2  {
    opacity: 1;
    transform: translateX(0px);
}
[data-scroll].MyFadeIn div.MyFadeInLeft-delay2  {
    opacity: 0;
    transform: translateX(-20px);
    transition: all .8s ease;
    transition-delay: .8s;
}[data-scroll="in"].MyFadeIn div.MyFadeInLeft-delay2  {
    opacity: 1;
    transform: translateX(0px);
}
/* ---- Animating H3 title by word ---- */
h3.title-word span.word {
    color: transparent;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30%);

}
[data-scroll="in"] h3.title-word span.word {
    visibility: visible;
    color: #191919;
    transform: translateY(0);
    transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-delay: calc(.2s + (.04s * var(--word-index) ) );
    opacity: 1;
}

[data-scroll].MyFadeIn p.main-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease;
    transition-delay: .65s;
}[data-scroll="in"].MyFadeIn p.main-content{
    opacity: 1;
    transform: translateY(0px);
}
[data-scroll].MyFadeIn div.imgContainer  {
    opacity: 0;
    transform: translateY(20px);
    transition: all .8s ease;
    transition-delay: .8s;
}[data-scroll="in"].MyFadeIn div.imgContainer  {
    opacity: 1;
    transform: translateY(0px);
}




[data-scroll].MyFadeIn div.imgContainer_scaleDown  {
    opacity: 0;
    transform: scale(1.05);
    transition: all .8s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-delay: 1s;
}[data-scroll="in"].MyFadeIn div.imgContainer_scaleDown  {
    opacity: 1;
    transform: scale(1);
}
 /* END OF ScrollOut Classes
======================================================= */

div.next_button {
    padding-left: 0;
}
div.prev_button {
    padding-right: 0;
}

div.next_prev_button {
    text-align: center;
}

div.next_prev_button-container {
    cursor: pointer;
}

div.next_prev_button a {
    display: block;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    color: #fafafa;
    background-color: rgba(25, 25, 25, 1);
    padding: 50px 40px;
    border: none;
    box-shadow: 0 6px 12px rgba(25,25,25,.12);
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

div.next_prev_button a span {
    font-family: eb-garamond, serif;
    font-weight: 600;
    font-style: normal;
    color: rgba(250, 250, 250, 0.4);
}

div.next_prev_button-container:hover a {
    box-shadow: 13px 32px 36px -14px rgba(25,25,25,0.22);
    transform: translateY(-20px) scale(1.06);
    background-color: #fafafa;
    color: #191919;
    text-decoration: none;
}

div.next_prev_button-container:hover a span {
    color: rgba(25, 25, 25, 0.4);

}

/* END OF Common between project pages 
========================================================================== */


/* PayPal project page 
========================================================================== */

/* ---- All project page images are exported @2x ---- */
div.paypal-project-page-img {
    background: url(../images/paypayl-project.png) no-repeat center;
    background-size: cover;
}

div.article-img-container {
    height: 40px;
}

div.article-img-container img {
    height: 100%;
    width: auto;
}

/* Headline of article */
h4 {
    font-family: eb-garamond, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 36px;
    padding-top: 36px;
    padding-bottom: 14px;
    color: rgba(25, 25, 25, .5);
}
/* ---- Article link ---- */
a.article-link {
    display: block;
    float: left;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #191919;
    border: none;
    cursor: pointer;
    position: relative;
    /* ---- Moving the link to align with the article headline ---- */
    transform: translateX(-22px);
    padding: 16px 48px 16px 24px;
    overflow: hidden;
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
/* ---- Article link stroke right ---- */
a.article-link::after {
    content: ' ';
    position: absolute;
    height: 3px;
    width: 22px;
    background: #191919;
    top: 47%;
    right: 18px;
    /* ---- Moving stroke right back to the left transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: .2s;
}
/* ---- Article link label ---- */
a.article-link div{
    /* ---- Moving Project button label back to the left transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: .05s;
}
/* ---- Article link stroke left ---- */
a.article-link::before {
    content: ' ';
    position: absolute;
    height: 3px;
    width: 22px;
    background: #191919;
    top: 47%;
    left: -18px;
    opacity: 0;
    /* ---- Moving stroke left back to the left transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: 0s;
}
/* ---- Moving stroke right to the right ---- */
a.article-link:hover::after {
    transform: translateX(40px);
    opacity: 0;
    /* ---- Moving stroke right to the right transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: 0s;
}
/* ---- Moving article label to the right ---- */
a.article-link:hover div{
    transform: translateX(28px);
    /* ---- Moving Project button label to the right transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: .05s;
}
/* ---- Moving stroke left to the right ---- */
a.article-link:hover::before {
    transform: translateX(40px);
    opacity: 1;
    /* ---- Moving stroke left to the right transition ---- */
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
    transition-delay: .2s;
}
a.article-link:hover{
    text-decoration: none;
}

div.overview {
    background: #fafafa;
}
/* END OF PayPal project page 
========================================================================== */

/* ATM finder project page 
========================================================================== */
/* ---- All project page images are exported @2x ---- */
div.atm-project-page-img {
    background: url(../images/atm-project.jpg) no-repeat center;
    background-size: cover;
} 

/* Setting a height on the div so the img overlap the black background */
div.atm-intro-img {
    height: 980px;
}

/* Image modals */
.MyModal {
    cursor: pointer;
    transition:  all 1200ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.MyModal:hover {
    transform: scale(1.08);
}

.modal-content {
    background: none;
    border: none;
}
.modal-backdrop.show {
    opacity: .65;
}
.modal-backdrop {
    background-color: #191919;
}
/* Adding 220px to the padding to keep the 200px as the total padding from the top */
.atm-pm-top {
    padding-top: calc(200px + 220px);
}

ul.atm-points, ul.atm-icons {
    padding-left: 0;
}
ul.atm-points h4, ul.atm-icons h4{
    padding: 0;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(25, 25, 25, 0.2);
    letter-spacing: 1.2px;
    margin: 0;
}

.atm-points li {
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #191919;
    list-style: none;
    padding: 14px 0;
}

.atm-points li:before {
    margin: 0 12px 0 0;
}
.atm-points li:nth-child(2):before {
    content: "💳";
}
.atm-points li:nth-child(3):before {
    content: "🙅🏻‍";
}
.atm-points li:nth-child(4):before {
    content: "🚶🏽‍";
}
.atm-points li:nth-child(5):before {
    content: "🏦";
}
.atm-points li:nth-child(6):before {
    content: "🤓";
}

.atm-icons li {
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #191919;
    list-style: none;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 34px;
    padding-right: 0;
    position: relative;
}
.atm-icons li span {
    position: absolute;
    left: 0px;
    height: 26px;
    width: 26px;
}
.atm-icons li:nth-child(2) span {
    background-image: url(../images/ic_24hr.png);
    background-size: contain;
}
.atm-icons li:nth-child(3) span {
    background-image: url(../images/ic_drivethru.png);
    background-size: contain;
}
.atm-icons li:nth-child(4) span {
    background-image: url(../images/ic_weelchair.png);
    background-size: contain;
}
.atm-icons li:nth-child(5) span {
    background-image: url(../images/ic_direction.png);
    background-size: contain;
}
.atm-icons li:nth-child(6) span {
    background-image: url(../images/ic_nofee.png);
    background-size: contain;
}
.atm-icons li:nth-child(7) span {
    background-image: url(../images/ic_fee.png);
    background-size: contain;
}

/* Animating the ATM-icons list in from the left */
[data-scroll].MyFadeIn div ul.MyFadeInLeft li,[data-scroll].MyFadeIn div ul.MyFadeInLeft h4   {
    opacity: 0;
    transform: translateX(-20px);
    transition: all .6s ease;
}[data-scroll="in"].MyFadeIn div ul.MyFadeInLeft li,[data-scroll="in"].MyFadeIn div ul.MyFadeInLeft h4 {
    opacity: 1;
    transform: translateX(0px);
}
/* Adding cascading delay's of .2s on each item in the list >>> Also being used in utapp-func list */
[data-scroll].MyFadeIn div ul.MyFadeInLeft h4  {
    transition-delay: .8s;
}
[data-scroll].MyFadeIn div ul.MyFadeInLeft li:nth-child(2)  {
    transition-delay: 1s;
}
[data-scroll].MyFadeIn div ul.MyFadeInLeft li:nth-child(3)  {
    transition-delay: 1.2s;
}
[data-scroll].MyFadeIn div ul.MyFadeInLeft li:nth-child(4)  {
    transition-delay: 1.4s;
}
[data-scroll].MyFadeIn div ul.MyFadeInLeft li:nth-child(5)  {
    transition-delay: 1.6s;
}
[data-scroll].MyFadeIn div ul.MyFadeInLeft li:nth-child(6)  {
    transition-delay: 1.8s;
}
[data-scroll].MyFadeIn div ul.MyFadeInLeft li:nth-child(7)  {
    transition-delay: 2s;
}
/* END OF ATM finder project page 
========================================================================== */

/* VIG finder project page 
========================================================================== */
/* ---- All project page images are exported @2x ---- */
div.vig-project-page-img {
    background: url(../images/vig-project.png) no-repeat center;
    background-size: cover;
} 
/* END OF VIG finder project page 
========================================================================== */

/* Wallet finder project page 
========================================================================== */
/* ---- All project page images are exported @2x ---- */
div.wallet-project-page-img {
    background: url(../images/wallet-project.png) no-repeat center;
    background-size: cover;
} 
/* END OF Wallet finder project page 
========================================================================== */

/* uTapp finder project page 
========================================================================== */
/* ---- All project page images are exported @2x ---- */
div.utapp-project-page-img {
    background: url(../images/utapp-project.png) no-repeat center;
    background-size: cover;
} 

div.uTapp-overview {
    background:linear-gradient(-221deg, #F78567 2%, #F27979 98%);
}

div.uTapp-overview > div.container {
    position: relative; 
}
svg#utapp {
    width: 500px;
    position: absolute;
    top: 50%;
    left: -10px;
    opacity: .3;
}

svg#utapp path {
    fill: #ffffff;
}

ul.utapp-func {
    padding-left: 0;
}
ul.utapp-func h4{
    padding: 0;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(25, 25, 25, 0.2);
    letter-spacing: 1.2px;
    margin: 0;
}

.utapp-func li {
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    color: #191919;
    list-style: none;
    padding: 20px 0;
}

.utapp-func li:before {
    margin: 0 18px 0 0;
}

.utapp-func li:nth-child(2):before {
    content: "👉";
}
.utapp-func li:nth-child(3):before {
    content: "👉🏼";
}
.utapp-func li:nth-child(4):before {
    content: "👉🏽";
}
.utapp-func li:nth-child(5):before {
    content: "👉🏿";
}

/* END OF uTapp finder project page 
========================================================================== */

/* Playground finder project page 
========================================================================== */
/* ---- All project page images are exported @2x ---- */
div.playground-project-page-img {
    background: url(../images/playground-project.png) no-repeat center;
    background-size: cover;
} 
/* END OF Playground finder project page 
========================================================================== */

/* About page 
========================================================================== */
h1.me-headline{
    font-size: 120px;
    color: white;
    -webkit-text-stroke: 1.4px #191919;
    font-family: akagi-pro, sans-serif;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 0px 1px 4px #191919;
}

h1.me-headline span a {
    color: #191919;
    letter-spacing: 2px;
    cursor: pointer;
    text-shadow: none;
}

span.iceland a {
    width: auto;
    background: -webkit-linear-gradient(transparent, transparent), url(../images/reykjavik.jpg) 0 0 no-repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

span.iceland a:hover {
    background-position: 0 -185px;
    text-decoration: underline;

}
span.nyc a {
    width: auto;
    background: -webkit-linear-gradient(transparent, transparent), url(../images/nyc.jpg) 0 0 no-repeat;
    background: -o-linear-gradient(transparent, transparent);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

span.nyc a:hover {
    background-position: 0 -440px;
    text-decoration: underline;
}

img.hide-img {
    display:none;
}

div.about-container {
    position: relative;
}

p.design-words span {
    font-family: akagi-pro, sans-serif;
    font-weight: 500;
    font-style: italic;
}

div.quote {
    position: absolute;
    -webkit-transform-origin: 0 0;
    transform-origin: top left;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg) translate3d(0,-95%,0);
    width: 1600px;
}

div.quote p {
    font-family: eb-garamond, serif;
    font-weight: 800;
    font-style: normal;
    font-size: 120px;
    color: #191919;
    margin: 0;
}

div.social-links {
    padding: 0;
    transition: all 250ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}


div.social-links a {
    position: relative;
    color: #191919;
    display: block;
    padding: 50px 0px 16px 0px;
    margin: 0 20px;
    border-bottom: 1px solid #191919;
    font-size: 18px;
    font-family: akagi-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    transition: all 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

div.social-links a span {
    position: absolute;
    top: 16px;
    text-transform: uppercase;
    font-family: akagi-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: rgba(25, 25, 25, 0.25);
    letter-spacing: 1.0px;
}

div.social-links:hover {
    background: #191919;
    box-shadow: 13px 32px 36px -14px rgba(25,25,25,0.22);
    /* cursor: pointer; */
}

div.social-links:hover a {
    text-decoration: none;
    color: #fafafa;
}

div.social-links:hover a span {
    color: rgba(250, 250, 250, 0.45);
}

/* END OF About page
========================================================================== */

/* 
======================*/
@media (max-width: 1200px) { 
    h1.intro-text {
        font-size: 10.5vw;
        padding-top: 200px;
        padding-bottom: 100px;
    }
    /* Reducing PL from 400 to 200 */
    .pl-top {
        padding-top: 200px;
    }
    .pl-bottom {
        padding-bottom: 200px;
    }
    .scroller {
        height: 40px;
    }
    div.project-page-content {
        padding-right: 30px;
        padding-left: 30px;
    }
}

/* 
======================*/
@media (max-width: 992px) {
    .project-img-container {
        width: auto;
        height: 507px;
    }
    .project-img {
        background-size: cover;
    }

    div.project-page-text {
        padding-top: 100px;
    }
    p.project-page-copy {
        font-size: 18px;
        line-height: 30px;
    }
    div.next_prev_button a {
        font-size: 22px;
    }
    .atm-pm-top {
        padding-top: 300px;
    }
}

/* Tablets 
======================*/
@media (max-width: 768px) { 

    .main-nav-list-background-white, .main-nav-list-background-dark {
        left: 164px;
        width: 230px;
        opacity: 1;
    }

    .myNav {
        padding-left: 20px;
        padding-bottom: 0;
    }
    li.about-list {
        margin-left: 20px;
    }

    /* Hiding the Work menu and Dribbble link in main nav (along with other things)*/
    #work_list, ul.main-nav > li:nth-child(5), ul.main-nav > li:nth-child(6), h1.intro-text br, .project-page-scroller {
        display: none;
    }
    h1.intro-text {
        font-size: 9.5vw;
    }
    h1.intro-text .char {
        letter-spacing: normal !important;
    }

    a.project-button {
        float: left;
    }

    .project-button-container {
        position: relative;
        margin-top: 40px;
    }

    .project-img-container {
        padding-top: 40px;
    }

    div.project-page-content, div.project-page-img {
        float:none;
        width: 100%;
        
    }

    div.project-page-intro {
        height: auto;
        padding-top: 100px;
    }

    div.project-page-text {
        padding-bottom: 100px;
    }

    div.project-page-img {
        height: 100vh;
    }

     /* Adding 100px padding-top */
    .add-pt100 {
        padding-top: 100px;
    }

    div.sticky-header {
        padding-bottom: 60px;
    }

    .imgContainer {
        padding-top: 50px;
    }

    .casc-imgContainer-1, .casc-imgContainer-2, .casc-imgContainer-3, .casc-imgContainer-4 {
        transform: none;
    }
    
     /* Adding 20px padding-top,bottom */
    .add-ptb20 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .add-pb20  {
        padding-bottom: 20px;
    }
    .add-pt20  {
        padding-top: 20px;
    }
     /* Adding 40px padding-top */
    .add-pt40  {
        padding-top: 40px;
    }

     /* Adding 100px padding-bottom */
    .add-pb100  {
        padding-bottom: 100px;
    }

    div.atm-intro-img {
        height: auto;
    }

    /* Reducing PL from 200 to 100 */
    .pl-bottom {
        padding-bottom: 100px;
    }

    /* Reducing PS from 100 to 50 */
    .ps-top {
        padding-top: 50px;
    }
    .ps-bottom {
        padding-bottom: 50px;
    }

    .atm-pm-top {
        padding-top: 200px;
    }

    /* Reducing PML from 300 to 100 */
    .pml-bottom {
        padding-bottom: 100px;
    }

    svg#utapp, div.next_prev_button-container span  {
        display: none;
    }
    
    div.quote p {
        font-size: 80px;
    }

    div.social-links a span {
        font-size: 12px;
    }

}

/* Mobile 
======================*/
@media (max-width: 576px) { 
    svg#logo {
        width: 60px;
    }
    a.logo-link {
        padding: 0px 0px 10px 10px;
    }
    .main-nav-item {
        margin-left: 20px;
    }
    li.about-list {
        padding-left: 20px;
    }

    .main-nav-list-background-white, .main-nav-list-background-dark {
        left: 130px;
        width: 170px;
    }
    
    .casc-imgContainer-1, .casc-imgContainer-2 {
        padding-bottom: 40px;
    }
    
    .article {
        padding-top: 100px !important   ;
    }

    /* Reducing PL from 200 to 100 */
    .pl-top, .pm-top {
        padding-top: 100px;
    }

    .remove {
        display: none;
    }

    .pm-bottom {
        padding-bottom: 100px;
    }
    .pm-top {
        padding-top: 100px;
    }
    
    /* Adding 40px padding-bottom ONLY on mobile size */
    .add-pt40_mobile {
        padding-top: 40px;
    }

    .button-reset {
        opacity: 1 !important;
    }

    h1.me-headline {
        font-size: 40px;
        padding-top: 40px;
        text-shadow: none;
    }

    div.quote {
        position: relative;
        transform: none;
        width: auto;
        padding-bottom: 40px;
    }

    div.quote p {
        font-size: 40px;
    }
}