/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
    scroll-behavior: smooth;
  }

.img-rounded {
	border-radius: 8px;
}

.img-shadow {
	box-shadow: 0px 20px 40px rgba(0,0,0,0.15);
}

.img-border {
	border: 1px solid rgba(0,0,0,0.16);
}


.full-width {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4rem;
}

.full-width img {
	width: 100%;
    position: relative;
    z-index: 999;
}

img.client-logo {
	display: flex;
	margin: 0 auto;
	max-width: 300px;
	width: 100%;
	height: 100vh;
}


.browserscroll {
    height: 600px; /* Adjust height to fit your portfolio layout */
    overflow-y: scroll; /* Enables vertical scrolling */
    overflow-x: hidden;
    border-radius: 10px;
    clear: both;
    box-shadow: 0px 20px 40px rgba(0,0,0,.25);
    margin: 2rem 0;
}

.browserscroll img {
    width: 100%; /* Ensures the image fits the width */
    height: auto; /* Maintains aspect ratio */

}

.callout {
    text-align: center;
    padding: 5rem 0px;
}
.callout h5 {
    font-size: 2rem;
    text-align: center;
    margin: 0;
    padding: 0;
}
.callout p {
    margin-bottom: 0;
}


@media screen and (max-width: 900px) {
	img.client-logo {
		width: 75%;
	}
}

#twentytwenty-container {
	max-width: 800px;
	margin: 0 auto;
}


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

.background-images, .background-image {
	width: 100%;
    position: absolute;
    left: 0;
    height: auto;
}


a.button {
	border-radius: 30px;
	padding: 10px 20px;
	border: 2px solid black;
	color: black !important;
	font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
	transform: translateY(5%);	
	transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-webkit-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
    text-transform: uppercase;
}
@media screen and (max-width: 900px) {
    a.button {
        padding: 10px 0px; border: none;
        font-size: 12px;
    }
}

a.button:hover {
	background: rgba(0,0,0,1);
	border: 2px solid black;
	transform: translateY(0);
	color: white !important;
	box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

a.button.simple {
    border: none;
    padding: 10px 20px;
}

#hero-bg a {
  padding-top: 60px;
  z-index: 100;
}

#hero-bg a span {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
#hero-bg a span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb10 2s infinite;
  animation: sdb10 2s infinite;
  box-sizing: border-box;
}

body.ccs #hero-bg a span {
	border: 2px solid #FFDF1C;
}

body.ccs #hero-bg a span::before {
	background-color: #FFDF1C;
}

@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}










html {
    color: #111;
    font-size: 1em;
    line-height: 1.4;
    position: relative;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

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

textarea {
    resize: vertical;
}

iframe {
    border: 0;
    width: 100%;
    height: 100%;
}

/* Text selections */

::-moz-selection {
    color: #fff;
    background: #000;
}

::selection {
    color: #fff; 
    background: #000;
}




/*======================================================================================
   

PRELOADER

   
======================================================================================== */

.loader {
    background: #ffffff;
    height: 100%;
    left: 0px;
    opacity: 1;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-inner { /* http://loading.io */
    background: url('/images/loading4.gif') center;
    background-size: cover;
    height: 200px;
    position: absolute;
    width: 200px;
}




/*======================================================================================
   

GLOBAL

   
======================================================================================== */


#header {
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 0px) {

    .container {
        width: 100%;
        margin: 0 auto;        
        padding: 50px 0 25px 0;
    }

    .nopad {
        padding: 0;
    }
}

@media only screen and (min-width: 768px) {
    .container {
        padding: 80px 0 0 0;
    }

    .nopad {
        padding: 0;
    }        
}

@media only screen and (min-width: 1025px) {
    
    .container {
        padding: 140px 0 0 0;
    }

    .nopad {
        padding: 0;
    }    

}

.wrapper {
    position: relative;
    margin: 0 auto;
}




/*----------------------------------------------------------------------------*

H1 LOGO

------------------------------------------------------------------------------*/

.header-logo {
    max-width: 200px;
}

#portfolio .header-logo {
    max-width:32px;
}

h1.logo {
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 90px; 
    z-index: 9999;
}

h1.logo a {
    background: url(/images/logo-dark.png) no-repeat 50% 50%;
    background-size: 85px 19px;
    color: #fff;
    display: block;
    font-size: 12px;
    overflow: hidden;
    text-indent: -999px;
    z-index: 9999;

   -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
    transition: all 0.35s ease;  
}



@media only screen and (min-width: 0px) {
    h1.logo {
        left: -2px; /*optically aligns logo on mobile*/
    }

    h1.logo a {
        height: 80px;
    }
}

@media only screen and (min-width: 768px) {
    h1.logo {
        left: 0;
    }

    h1.logo a {
        height: 100px;
    }
}

@media only screen and (min-width: 1025px) {
    h1.logo a {
        height: 100px;
    }
}



h1.logo a.invert {
    background: url(/images/logo_w.png) no-repeat 50% 50%;
}

    @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
        h1.logo a {
/*             background: url(/images/logo_b@2x.png) no-repeat 50% 50%; */
            background-size: 85px 19px;
        }
        h1.logo a.invert {
/*             background: url(/images/logo_w@2x.png) no-repeat 50% 50%; */
            background-size: 85px 19px;
        }        
    }

h1.logo a:hover {
    opacity: 0.5;
}




/*----------------------------------------------------------------------------*

GLOBAL - HEADER AND COPY STYLES

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    h1, h2, h3, h4, h5 {
        font-family: 'Figtree', -apple-system, Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: left;
    }

    h2 {
        font-size: 130px;
        font-style: normal;
        text-decoration: none;
        letter-spacing: -0.04em;
        line-height: 1.1em;
        margin: 80px 0;
        z-index: 9999; /* places it 1 above preloader*/
    }

    h2#seo {
        display:none;
    }

    h2#seoo {
        font-size: 7rem;
        margin-bottom: 1.5rem;
    }
    

    @media (max-width: 900px) {
        h2#seoo {
            font-size: 6rem;
        }
    }

    @media (max-width: 600px) {
        h2#seoo {
            font-size: 2.75rem;
        }
    }

    @media (max-width: 400px) {
        h2#seoo {
            font-size: 2.65rem;
        }
    }

    h2 span {
        display: inline-block;
        opacity: 1;
    }


    /*Intro animation*/

    h2 span.hello-anim1 {
        animation-name: hello-anim1;
        animation-duration: 600ms;
        animation-timing-function: ease-in-out;
        transform-origin: top left;
    }
        @keyframes hello-anim1 {
            0%   { transform: translate(0, 30px); color:#fff; }
            100% { color:#111;}
        }

    h2 span.hello-anim2 {
        animation-name: hello-anim2;
        animation-duration: 700ms;
        animation-timing-function: ease-in-out;
        transform-origin: top left;
    }
        @keyframes hello-anim2 {
            0%   { transform: translate(0, 35px); color:#fff; }
            100% { color:#111;}
        }            

    h2 span.hello-anim3 {
        animation-name: hello-anim3;
        animation-duration: 800ms;
        animation-timing-function: ease-in-out;
        transform-origin: top left;
    }
        @keyframes hello-anim3 {
            0%   { transform: translate(0, 40px); color:#fff; }
            100% { color:#111;}
        }  

    h2 span.hello-anim4 {
        animation-name: hello-anim4;
        animation-duration: 900ms;
        animation-timing-function: ease-in-out;
        transform-origin: top left;
    }
        @keyframes hello-anim4 {
            0%   { transform: translate(0, 45px); color:#fff; }
            100% { color:#111;}
        }      

    h2 span.hello-anim5 {
        animation-name: hello-anim5;
        animation-duration: 1000ms;
        animation-timing-function: ease-in-out;
        transform-origin: top left;
    }
        @keyframes hello-anim5 {
            0%   { transform: translate(0, 50px); color:#fff; }
            100% { color:#111;}
        }   



    h3 {
        font-size: 40px;
        font-style: normal;
        letter-spacing: -0.025em;
        line-height: 100%;
        margin: 3rem 0 25px 0;
        text-decoration: none;
        text-transform: none;
    }

    h4 {
        color: #111;
        font-size: 26px;
        letter-spacing: -0.04em;
    }

    h4 span {
        text-transform: uppercase;
        font-size: 12px;
        float: right;
        letter-spacing: 0;
        font-family: 'Figtree';
        font-weight: 500;
    }

    body {
        color: #111;
        font-family: 'Figtree', -apple-system, Arial, Helvetica, sans-serif;
        font-size: 19px;
        font-weight: 400;
        line-height: 27px;
        letter-spacing: -0.01em;
        -webkit-font-smoothing: antialiased; /* reduces thickness of Circular*/
    }
    
    @media screen and (max-width: 767px) {
	    body {
		    font-size: 16px;
	    }
	}

    a {
        color: #777;
        text-decoration: none;
    }

    strong {
        font-weight: 800;
    }

}

@media only screen and (min-width: 768px) {

    h2 {
        margin: 160px 0 80px 0;
    }


    h3 {
        font-size: 50px;
        margin-top: 30px;
    }

    h4 {
        font-size: 40px;
        letter-spacing: -0.05em;
        margin: 50px 0 0 0;
        padding: 50px 0 0 0;
    }       

    body {
        font-size: 20px;
/*         line-height: 33px; */
    }
}

@media only screen and (min-width: 1025px) {

    h2 {
        margin: 100px 0;
    }

    h3 {
        font-size: 50px;
        margin-top: 60px;
    }

    h4 {
        margin: 80px 0 0 0;
    }     
}


/* Fittext tuning */


@media only screen and (min-width: 0px) {
    #hello {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    #hello {
        width: 92%;
    }
}

@media only screen and (min-width: 1025px) {
    #hello {
        width: 92%;
    }
}



/*======================================================================================


HOMEPAGE


======================================================================================== */

/* Featured Project Section */
.featured-project {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 3rem;
    margin: 3rem 0 4rem 0;
}

.featured-project h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #777;
    margin: 0 0 1rem 0;
    padding: 0;
    font-weight: 500;
}

.featured-project h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    padding: 0;
}

.featured-project > p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #111;
    max-width: 800px;
    margin: 0 0 1.5rem 0;
}

.featured-metrics {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.featured-metric {
    flex: 0 0 auto;
}

.featured-metric-value {
    font-size: 2rem;
    font-weight: 500;
    color: #111;
    line-height: 1;
}

.featured-metric-label {
    font-size: 0.875rem;
    color: #777;
    margin-top: 0.25rem;
}

@media screen and (max-width: 768px) {
    .featured-project {
        padding: 2rem 1.5rem;
    }

    .featured-project h3 {
        font-size: 1.75rem;
    }

    .featured-project > p {
        font-size: 1rem;
    }

    .featured-metric-value {
        font-size: 1.5rem;
    }
}


@media only screen and (min-width: 0px) {
    /* div.intro::before {
        content:"";
        border-bottom: 1px solid rgba(0,0,0,.25);
        width: 10%;
        display: block;
    } */

    .intro {
        position: relative;
    }

    .keyline {
        border-bottom: 2px solid #111;
        display: block;
        height: 1px;
        left: 0;
        position: absolute;
        top: 0;
        width: 24px;
    }

    .intro p {
        color: #111;
        margin: 0;
        padding: 2rem 0 0 0;
        width: 100%;
        font-size: 1.3rem;
        line-height: 2rem;
    }

    @media (max-width: 400px) {
        .intro p {
            font-size: 1rem;
        }
    }

    .split {
        clear: both;
        margin: 80px auto 80px auto;
        position: relative;
        text-align: center;
    }

    .split h4 {
        text-align: center;
    }

    .split .keyline {
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) 
    }
}

@media only screen and (min-width: 768px) {
    .keyline {
        border-bottom: 2.5px solid #111;
    }
}

@media only screen and (min-width: 1025px) {

}




/*----------------------------------------------------------------------------*

APPLE GRID

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    ul.apple-grid {
        margin: 30px 0 0 0;
        padding: 0;
        width: 100%;
    }
    
    ul.apple-grid:hover li img, ul.apple-grid:hover div.title {
	    opacity: 0.5;
        -webkit-transition: opacity 0.4s ease, -webkit-transform 2.55s ease;
        transition: opacity 0.4s ease, transform 2.55s ease;	    
    }
    
    ul.apple-grid:hover li:hover img, ul.apple-grid:hover li:hover div.title {
	    opacity: 1;
    }

    ul.apple-grid li {
        background: #000;
        cursor: pointer;
        float: left;
        list-style: none;
        margin: 0 0 14px 0;
        overflow: hidden;
        position: relative;
        width: 100%;
        -webkit-transition: opacity 0.4s ease, -webkit-transform 2.55s ease, box-shadow 0.2s ease, transform 0.2 ease;
        transition: opacity 0.4s ease, transform 2.55s ease, box-shadow 0.2s ease, transform 0.2s ease;
        border-radius: 4px;
    }

    ul.apple-grid li:hover {
        box-shadow: 0px 10px 30px rgba(0,0,0,0.25);
        transform: scale(1.02);
    }

    ul.apple-grid li:nth-child(even) {
        margin-right: 0;
    }

    ul.apple-grid li img {
        display: block;
        min-height: 100%;
        max-width: 100%;
        opacity: 1;
        position: relative;
        width: 100%;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition: opacity 0.4s ease, -webkit-transform 2.55s ease;
        transition: opacity 0.4s ease, transform 2.55s ease;
    }

    ul.apple-grid li:hover img {
        opacity: 0.75;
        -webkit-transform: scale(1.06);
        transform: scale(1.06);
    }


    ul.apple-grid li div.title {
        color: #fff;
        display: block;
        font-size: 30px;
        font-weight: 800;
        font-family: 'Figtree';
        letter-spacing: -0.04em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        line-height: 1em;
        padding: 1rem;
        text-align: center;
        transform: translate(-50%, -50%)
    }

    ul.apple-grid li div.role {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.85);
        margin-top: 0.5rem;
        font-weight: 400;
        position: absolute;
        top: calc(50% + 1.5rem);
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0);
        padding: 0 1rem;
        text-align: center;
        width: 90%;
    }

    ul.apple-grid li div.impact {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.95);
        margin-top: 0.5rem;
        font-weight: 500;
        line-height: 1.3;
        position: absolute;
        top: calc(50% + 3.5rem);
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0);
        padding: 0 1rem;
        text-align: center;
        width: 90%;
    }

    ul.apple-grid li a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

}

@media only screen and (min-width: 768px) {

    ul.apple-grid {
        margin: 80px 0 0 0;
    }

    ul.apple-grid li {
        margin: 0 20px 20px 0; */
        width: calc(50% - 25px);
    }

    ul.apple-grid li div.title {
        font-size: 30px;
    }

}

@media only screen and (min-width: 1025px) {
    
    ul.apple-grid {
        margin: 50px 0 0 0;
    }

    ul.apple-grid li {
        margin: 0 50px 50px 0;
        width: calc(50% - 25px);
    }

    ul.apple-grid li div.title {
        font-size: 40px;
    }

}


/*----------------------------------------------------------------------------*

WORK ARCHIVE GRID

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    ul.archive-grid {
        margin: 40px 0 0 0;
        padding: 0;
        width: 100%;
    }

    ul.archive-grid li {
        cursor: pointer;
        display: block;
        float: left;
        list-style: none;
        margin: 0 0 14px 0;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 100%;

        -webkit-transition: all 0.35s ease;
        -moz-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        -ms-transition: all 0.35s ease;
        transition: all 0.35s ease;       
    }

    ul.archive-grid li:nth-child(3n+3) {
        margin-right: 0;
    }

    ul.archive-grid li img {
        display: block;
        margin: 0 auto;   
        max-height: 365px;
        max-width:  365px; 
        opacity: 1;
        position: relative;
        width: 100%;

        -webkit-transition: -webkit-transform 0.55s;
        transition: transform 0.55s;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    ul.archive-grid li:hover img {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

    ul.archive-grid li a {
        height: 100%;
        left: 0;
        overflow: hidden;
        opacity: 0;
        position: absolute;
        text-indent: 200%;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
}

@media only screen and (min-width: 768px) {

    ul.archive-grid {
        margin: 60px 0 0 0;
    }

    ul.archive-grid li {
        margin: 0 20px 20px 0;
        width: calc(50% - 20px);
    }

    ul.archive-grid li:nth-child(3n+3) {
        margin-right: 20px;
    }    
}

@media only screen and (min-width: 1025px) {

    ul.archive-grid {
        margin: 140px 0 0 0;
    }

    ul.archive-grid li {
        margin: 0 50px 50px 0;
        width: calc(33% - 31px);
    }

    ul.archive-grid li:nth-child(3n+3) {
        margin-right: 0;
    }    
}




/*----------------------------------------------------------------------------*

HOMEPAGE - OTHER

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    .wrapper {
        margin: 0 auto;
        width: 85%; 
    }

    .intro p {
        width: 100%;
    }

    ul.contact-home {
        margin: 100px 0 0 0;
        min-height: 50px;
        padding: 0;
        display: table;
        margin: 0 auto;
    }

    ul.contact-home li {
        clear: left;
        display: block;
        float:left;
        list-style: inside;
        padding: 14px 0;
    }

    ul.contact-home li:nth-child(2) {
        display: none;
    }

    ul.contact-home li:first-child {
        padding: 0 0 20px 0;
        margin: 0;
    }


    ul.contact-home li:last-child {
        padding-bottom: 100px;
    }

    ul.contact-home li a {
        border-bottom: none;
        color: #777;
        padding-bottom: 20px;

        -webkit-transition: all 0.35s ease;
        -moz-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        -ms-transition: all 0.35s ease;
        transition: all 0.35s ease;
    }

    ul.contact-home li a:hover {
        border-bottom: none;
        color: #777;
        padding-bottom: 0;
    }
}


@media only screen and (min-width: 768px) {

    .wrapper {
        margin: 0 auto;
        width: 80%; 
    }

    .intro p {
        width: 100%;
    }

}


@media only screen and (min-width: 1025px) {

    .wrapper {
        margin: 0 auto;
        width: 85%;
        max-width: 1200px; 
    }

    .intro p {
        width: 70%;
    }

    ul.contact-home {
        margin: 150px 0 100px 0;
        display: table;
        margin: 0 auto;
        margin-top: 150px;
    }

   ul.contact-home li {
        clear: none;
        display: inline;
        list-style: none;
        padding: 0 20px;
    }

    ul.contact-home li:first-child {
        padding: 0;
    }

    ul.contact-home li:nth-child(2) {
        display: inline;
    }

    ul.contact-home li a {
        border-bottom: 2px solid #fff;
        color: #111;
        padding-bottom: 20px;

        -webkit-transition: all 0.35s ease;
        -moz-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        -ms-transition: all 0.35s ease;
        transition: all 0.35s ease;
    }

    ul.contact-home li a:hover {
        border-bottom: 2px solid #777;
        color: #777;
        padding-bottom: 5px;
    }
}


/*======================================================================================
   
PORTFOLIO
   
======================================================================================== */


#portfolio .breakout  {
    margin: 0 auto;
    text-align:center;
}

#portfolio .breakout img {
    width: 100%;
    max-width: 1900px;
}


/* VIDEO - RESPONSIVE
   From http://embedresponsively.com. 
   Change padding-bottom to Y/X=Z%. 
   Example: 16:9 video would be 9/16 = 56.25% 
   
   Calculated with https://www.ninjaunits.com/calculators/aspect-ratio

   1200 x 980   60:49       ar6049      was ar1122
   1280 x 960   4:3         ar43
   1920 x 1264  120:79      ar12079 
   1280 x 800   8:5         ar85        was ar6140
   1920 x 1080  16:9        ar169    
   1024 x 566   512:283     ar512283    was ar3821
   1920 x 678   320:113     ar320113
   2500 x 270   250:27      ar25027     was ar1926
*/

.video-wrapper { 
    height: 0; 
    max-width: 100%; 
    overflow: hidden; 
    position: relative; 
}

.ar6049     { padding-bottom: 81.666%   }
.ar43       { padding-bottom: 75%       }
.ar12079    { padding-bottom: 65.83%    }
.ar85       { padding-bottom: 62.5%     }
.ar7945     { padding-bottom: 56.96%    }
.ar169      { padding-bottom: 56.25%    }
.ar512283   { padding-bottom: 55.26%    }
.ar320113   { padding-bottom: 35.3125%  }
.ar25027    { padding-bottom: 10.8%     }


.video-wrapper iframe, 
.video-wrapper object, 
.video-wrapper embed { 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}




/*----------------------------------------------------------------------------*

PORTFOLIO - BACKGROUND COLORS

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    /*Adds a 100% white to 0% white gradient on touch devices
    because Skrollr which is affecting background color
    on desktop isn't enabled on touch devices*/

    #portfolio {   
        background-color: rgb(255,255,255);
        background-image: -webkit-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: -moz-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(255,255,255,1.0), rgba(255,255,255,1.0), rgba(255,255,255,0));
        background-repeat: no-repeat;
        background-size: 100% 1050px;
        background-position: 0% 0%;
    }
}

@media only screen and (min-width: 1025px) { /*Removes white to gray gradient from small and applies white for Skrollr color fade effect*/
    #portfolio {
    /*This is the default, but overridden by Skrollr on desktop*/
        background-color: #ffffff;
    }   
}


@media (any-hover: none) { 

    /*Use the same RGB value as declared on their respective pages here*/

    #portfolio.heytell,
    #portfolio.target 
        { background-color: rgb(247,247,247)} /*f7f7f7*/

    #portfolio.atlantis,
    #portfolio.att,
    #portfolio.blackberry,
    #portfolio.dominos,
    #portfolio.ge,
    #portfolio.loudcity
        { background-color: rgb(245,245,245)} /*f5f5f5*/

    #portfolio.apple-homepod,
    #portfolio.apple-30yom,
    #portfolio.express,
    #portfolio.statefarm
        { background-color: rgb(242,242,242)} /*f2f2f2*/

    #portfolio.apple-airpods,
    #portfolio.apple-ipad-pro,
    #portfolio.apple-pay-japan,    
    #portfolio.bestbuy,
    #portfolio.metro 
        { background-color: rgb(240,240,240)} /*f0f0f0*/

    #portfolio.apple-iphone-7,
    #portfolio.apple-watch    
        { background-color: rgb(237,237,237)} /*ededed*/

}


/*----------------------------------------------------------------------------*

PORTFOLIO - HERO SIZE, IMAGE, AND COLOR 

------------------------------------------------------------------------------*/


@media only screen and (min-width: 0px) {

    #hero {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    #hero-bg {
	    background: #f1f1f1;
        background-position: 50% 0;
        background-repeat: no-repeat;
        background-size: cover !important;    
        position: absolute;
        bottom: 0;
        height: 750px;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

    #hero, #hero-bg {
        height: calc(100vw * (8/10));
/*         height: 100vh; */
        max-height: 800px;
    }    
	
	@media screen and (max-width: 600px) {
		#hero, #hero-bg {
			height: 200px;
		}
		a.scroller {
			display: none;
		}
	}
	
	
    #darken {
        background-color: #000;
        height: 100%;
        opacity: 0;
        position: absolute;
        width: 100%;
        z-index: 1;
    }
}

@media only screen and (min-width: 768px) {
    #hero, #hero-bg {
        height: calc(100vw * (8.75/16));
    } 
}

@media only screen and (min-width: 1600px) { 
    #hero, #hero-bg {
        background-size: contain;  /* Stops images from getting to cut off with super wide browsers */
    } 

    .apple-airpods #hero-bg,
    .apple-siri #hero-bg,
    .apple-pay-japan #hero-bg {
        background-size: cover; /* Ignores the above for select heros */
    } 

}



@media only screen and (min-width: 0px) {

/* Hero Background Colors */

    .arcanna #hero        { background-color: #f5f5f5;}

/* Hero Background Images */
	
    .arcanna #hero-bg        	{ background-image: url('/images/bg-arcanna.png'); }
    .kindel #hero-bg         	{ background-image: url('/images/bg-kindel.png'); }    
    .sectigo #hero-bg         	{ background-image: url('/images/bg-sectigo.jpg'); }
    .ccs #hero-bg        		{ background-image: url('/images/bg-ccs.png'); }
    .corewell-health #hero-bg   { background-image: url('/images/bg-corewell-health.png'); }
    .testifysec #hero-bg        { background-image: url('/images/bg-testifysec.png'); }
}

@media only screen and (min-width: 768px) {
    .arcanna #hero-bg        	{ background-image: url('/images/bg-arcanna.png'); }
    .kindel #hero-bg         	{ background-image: url('/images/bg-kindel.png'); }    
    .sectigo #hero-bg         	{ background-image: url('/images/bg-sectigo.jpg'); }        
    .ccs #hero-bg				{ background-image: url('/images/bg-ccs.png'); }
    .corewell-health #hero-bg   { background-image: url('/images/bg-corewell-health.png'); }
    .testifysec #hero-bg        { background-image: url('/images/bg-testifysec.png'); }    
}

@media only screen and (min-width: 1025px) {

}



/*----------------------------------------------------------------------------*

PORTFOLIO - PROJECT INFO

------------------------------------------------------------------------------*/


@media only screen and (min-width: 0px) {
    
    #project-info {
        margin: 30px auto 0 auto;
        padding-top: 20px;
        width: 100%;
        text-align: left;
    }
}

@media only screen and (min-width: 768px) {

    #project-info {
        margin: 50px auto 0 auto;
        padding-top: 30px;
    }
}

@media only screen and (min-width: 1025px) {

    #project-info {
        margin: 30px auto 0 auto;
        padding-top: 20px;
        margin-left: 7.5%;
        width: 85%;
        padding-top: 10px;
    }

}

@media screen and (max-width: 767px) {
	#project-info {
	    display: flex;
	    flex-direction: column;
    }
    
    #project-info h3 {
	    order: 1;
	    -webkit-order: 1;
    }
    
    #project-info .meta {
	    order: 1;
	    -webkit-order: 2;	    
    }
    
    #project-info .images {
	    order: 3;
	    -webkit-order: 4;	    
    }
    
    #project-info .description {
	    order: 4;
	    -webkit-order: 	3;    
    }

}



/*----------------------------------------------------------------------------*

PORTFOLIO - PROJECT INFO CHILD ELEMENTS

------------------------------------------------------------------------------*/

/* Impact Metrics Grid */
.impact-metrics {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem 0;
}

.impact-metrics h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #777;
    margin: 0 0 1.5rem 0;
    padding: 0;
    font-weight: 500;
}

.impact-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.impact-metric-item {
    text-align: left;
}

.impact-metric-item-value {
    font-size: 1.75rem;
    font-weight: 500;
    color: #111;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.impact-metric-item-label {
    font-size: 0.875rem;
    color: #777;
}

.impact-metrics-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #d2d2d7;
    font-size: 0.875rem;
}

@media screen and (max-width: 768px) {
    .impact-metrics {
        padding: 1.5rem;
    }

    .impact-metric-item-value {
        font-size: 1.5rem;
    }
}

/* Section Detail Enhancements */
.section-detail h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
    color: #111;
}

.section-detail ul {
    margin-left: 2rem;
    line-height: 1.6;
}

.section-detail ul li {
    margin-bottom: 0.75rem;
}


@media only screen and (min-width: 0px) {

    div.description, p.description {
        margin: 0;
        padding: 0;
        text-align: left;
        width: 100%;
        font-weight: 300;
    }

    div.description, p.description {
        color: #111;
/*         color: #5B5B5B; */
        float: left;
        margin-bottom: 20px;
        width: 100%;
    }

    ul.meta {
        clear: both;
        float: left;
        line-height: 25px;
        margin: 0;
        margin-bottom: 70px;
        padding: 0;
        width: 100%;
    }

    ul.meta li {
        float: left;
        list-style: none;
        padding: 12px 40px 4px 0;
        text-align: left;
    }

    ul.meta li:first-child {
        padding-top: 12px;
    }


    ul.meta h5 {
        color: #696969;
        display: block;
        font-family: 'Figtree', -apple-system, Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.15em;
        margin: 0 auto;
        text-transform: uppercase;
    }
}


@media only screen and (min-width: 768px) {

    p.description {
        margin-bottom: 20px;
    }    

    ul.meta {
        margin-bottom: 120px;
    }
}


@media only screen and (min-width: 1025px) {

}


@media only screen and (min-width: 1240px) {
    
    p.description {
        clear: none;
        float: left;
        margin-bottom: 50px;        
        width: 60%;
    }

    ul.meta {
        clear: none;
        float: right;
        min-width: 220px;
        width: 30%;
    }   
}


/*----------------------------------------------------------------------------*

PORTFOLIO - SECTION DETAIL

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    .section-detail {
        margin: 0 auto 50px auto;
        position: relative;
        text-align: left;
        width: 100%;
    }  

    .section-detail p {
        display: block;
        width: 100%;
    }  

    p.notitle {
        padding-top: 40px;
    }  

    #project-info a,
    .section-detail a {
        color: #777;
        display: inline-block;

        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;

    }

    #project-info a span, 
    .section-detail a span {
        color: #777;
        padding-left: 5px;
        padding-right: 10px;

        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #project-info a:hover,
    .section-detail a:hover {
        color: #111;
    }  

    #project-info a:hover span,
    .section-detail a:hover span {
        color: #111;
        padding-left: 10px;
        padding-right: 0px;
    }

}


@media only screen and (min-width: 768px) {

    .section-detail {
        margin: 0 auto 80px auto;
        position: relative;
    }  

    p.notitle {
        padding-top: 40px;
    }  
}


@media only screen and (min-width: 1025px) {

    .section-detail {
        margin: 0 auto 120px auto;
        width: 85%;
    }  

    .section-detail p {
        width: 65%;
    }

    .section-detail.wide p {
        width: 100%;
    }
}



/*----------------------------------------------------------------------------*

PORTFOLIO - PAGE ELEMENT MARGINS

------------------------------------------------------------------------------*/

#portfolio .wrapper {
   // text-align: center;
}

#portfolio #header {
    position: relative;
    width: 100%;
    z-index: 999;
    margin: 0 auto;
    width: 85%;
    max-width: 1200px;
}
@media only screen and (min-width: 0px) {

    #portfolio .wrapper img, 
    #portfolio .wrapper video, 
    #portfolio .video-wrapper, 
    #portfolio .breakout {
        height: auto;
        margin-bottom: 50px;
        width: 100%;
    }

    #portfolio .wrapper .nogap {
        margin-bottom: 0px;
    }   

    .slideshow-break { /* Needed to clear space under slideshow*/
        clear: both; 
        height: 50px !important;  /*Set to same as margin-bottom above*/
        width: 100%; 
    }
}

@media only screen and (min-width: 768px) {

    #portfolio .wrapper img, 
    #portfolio .wrapper video, 
    #portfolio .video-wrapper, 
    #portfolio .breakout {
        margin-bottom: 100px;
    }

    #portfolio .nogap {
        margin-bottom: 0px;
    }       

    #portfolio img.last {
        margin-bottom: 20px !important;
    }

    #portfolio .overlap {
        margin-bottom: -120px;
    }

    #portfolio .tighten img {
        margin-bottom: 80px;
    }

    .slideshow-break { 
        height: 100px !important;  /*Set to same as margin-bottom above*/
    }
}

@media only screen and (min-width: 1025px) {
    
    #portfolio .wrapper img, 
    #portfolio .wrapper video, 
    #portfolio .video-wrapper,
    #portfolio .breakout {
/*         top: 50px; */
    }

    #portfolio .nogap {
        margin-bottom: 0px;
    }    

    #portfolio img.last {
        margin-bottom: 50px;
    }

    #portfolio .tighten img {
        margin-bottom: 100px;
    }    

    .slideshow-break { 
        height: 160px !important;  /*Set to same as margin-bottom above*/
    }
}


/*Places video inside MacBook frame*/

@media only screen and (min-width: 0px) {

    .video-hw-wrapper {
        clear: both;
        display: block;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .video-hw-wrapper video {
        position: absolute;
        width: 75.27% !important;
        left: 12.35%;
        margin: 0;
        padding: 0;
        z-index: 1;
        bottom: 5.9vw;
    }
}

@media only screen and (min-width: 768px) {
    .video-hw-wrapper video {
        bottom: 5.5vw;
    }
}

@media only screen and (min-width: 1025px) {
    .video-hw-wrapper video {
        bottom: 5.9vw;
    }
}

@media only screen and (min-width: 1400px) {
    .video-hw-wrapper video {
        bottom: 83px;
    }
}




/*----------------------------------------------------------------------------*

PORTFOLIO - COMP COLUMNS

------------------------------------------------------------------------------*/

.comp-col {
    width: 100%;
}


/* 2-UP -- Set image width to 1128 @2x 564 @1x */

/*@media only screen and (min-width: 0px) {
    .comp-col-left {
        float: left;
        width: 50%;
    }

    .comp-col-right {
        float: left;
        width: 50%;
    }

    .comp-col img {
        width: 94% !important;
    }

    .comp-col-left img {
        float: left;
    }

    .comp-col-right img {
        float: right;
    }
}

@media only screen and (min-width: 1025px) {
    .comp-col img {
        max-width: 564px;
    }
}*/


/* 3-UP -- Set image width to 540 @2x 270 @1x */

@media only screen and (min-width: 0px) {

    .comp-col .comp-col-3:first-child{
        text-align: left;
    }


    .comp-col .comp-col-3:nth-child(2){
        text-align: center;
    }

    .comp-col .comp-col-3:nth-child(3){
        text-align: right;
    }

    .comp-col-3 {
        float: left;
        width: 33.3333%;
    }

    .comp-col-3 img {
        width: calc(100% - 10px) !important;
        max-width: 366px;
    }
}

@media only screen and (min-width: 768px) {

    .comp-col-3 img {
        width: calc(100% - 25px) !important;
        max-width: 366px;
    }
}

@media only screen and (min-width: 1025px) {
    .comp-col-3 img {
        width: 100%;
    }
}




/* 2-UP -- For Metro Posters */

/*@media only screen and (min-width: 0px) {
    .metro .comp-col img {
        width: 100%;
        float: none;
        clear: both;
    }
}

@media only screen and (min-width: 768px) {
    .metro .comp-col img {
        width: 50% !important;
        float: left;
        clear:none;
    }
}

@media only screen and (min-width: 1025px) {

}*/




/*----------------------------------------------------------------------------*

PORTFOLIO - CSS SLIDESHOW GALLERY
http://fofwebdesign.co.uk/template/_testing/cross-fade-slideshow-img-js.htm

------------------------------------------------------------------------------*/

/*VIP Photoshoot*/
#slideshow-vip { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 66.666% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-vip img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-vip img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-vip .show, #slideshow-vip .show { opacity:1 }


/*BBMCC Photoshoot*/
#slideshow-bbmcc { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 48.333% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-bbmcc img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-bbmcc img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-bbmcc .show, #slideshow-bbmcc .show { opacity:1 }


/*Domino's Promos*/
#slideshow-dominos-promo { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 39.166% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-dominos-promo img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-dominos-promo img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-dominos-promo .show, #slideshow-dominos-promo .show { opacity:1 }


/*Domino's Pizza Builder*/
#slideshow-dominos-builder { 
    text-align: left;
    clear: both;
    max-width: 1200px; 
    position: relative; 
    padding-bottom: 77.666% /* (img px height / img px width x 100) = padding-bottom % */
} 
#slideshow-dominos-builder img { 
    position: absolute; 
    max-width: 100%; 
    -webkit-transition: opacity 3s; 
    transition: opacity 3s;
}
.js #slideshow-dominos-builder img { opacity:0 } /* only hide images if js enabled */
.js #slideshow-dominos-builder .show, #slideshow-dominos-builder .show { opacity:1 }



/*----------------------------------------------------------------------------*

PORTFOLIO - PROJECT NAV

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {

    #home .project-nav {
        visibility: hidden;
    }

    .project-nav {
        height: 80px;
        margin: 20px 0 50px 0;
        position: relative;
    }

    .project-nav a {
        display: block;
        height: 40px;
        margin: 0;
        opacity: 1;
        padding: 20px 0 20px 0;
        position: relative;
        width: 33.3%;
        
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        -ms-transition: all 0.25s;
        transition: all 0.25s;
    }

    .project-nav a.backtohome {
        height: 40px;
        float: left;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        text-indent: -9999px;
        width: 33.3%;
    }

    .project-nav a.prev {
        float: left;
    }

    .project-nav a.next {
        float: right;
    }

    .project-nav a span {
        display: block;
        height: 20px;
        margin-top: 10px;
        position: absolute;
        width: 20px;
    }

    .project-nav a.prev span {
        background: url(/images/prev_project_small.png) no-repeat 50% 50%;
        left: 0px;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.prev span {
                background: url(/images/prev_project_small@2x.png) no-repeat 50% 50%;
                background-size: 20px 20px;
            }
        }

    .project-nav a.next span {
        background: url(/images/next_project_small.png) no-repeat 50% 50%;
        right: 0px;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.next span {
                background: url(/images/next_project_small@2x.png) no-repeat 50% 50%;
                background-size: 20px 20px;
            }
        }

    .project-nav a.backtohome {
        background: url(/images/backtohome.png) no-repeat 50% 50%;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.backtohome {
                background: url(/images/backtohome@2x.png) no-repeat 50% 50%;
                background-size: 20px 20px;
            }
        }


    .project-nav a.prev span,
    .project-nav a.next span {
        opacity: 1;
    
    /*  -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none; */
    }

    .project-nav a h3 {
        color: #111;
        display: none;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 3.6;
        margin: 0;
        opacity: 1;
        position: relative;
        white-space: nowrap;
        /* -webkit-transition: none, -webkit-transform none;
        transition: opacity none, transform none; */
    }

    .project-nav a.prev h3 {
        padding-left: 20px;
        -webkit-transform: none;
        transform: none;
    }

    .project-nav a.next h3 {
        padding-right: 20px;
        text-align: right;

        -webkit-transform: none;
        transform: none;
    }

    .no-touch .project-nav a:hover {
        /*background: transparent;*/        
        box-shadow: none; 
    }

    .no-touch .project-nav a:hover h3 {
        opacity: 1;
        -webkit-transition-delay: 0;
        transition-delay: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .no-touch .project-nav a:hover {
        opacity: 1;
    }


}


@media only screen and (min-width: 768px) {

   .project-nav {
        height: 80px;
        margin-bottom: 0;
    }

    .project-nav a {
        opacity: 1;
        height: 80px;
        margin: 0;
        overflow: hidden;
        padding: 0 0;
        position: fixed;
        top: 50%;
        top: calc(50% - 40px);
        width: 60px;
        z-index: 9998;

        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        -ms-transition: all 0.25s;
        transition: all 0.25s;
    }

    .project-nav a.backtohome {
        display: none;
    }

    .project-nav a.prev {
        left: 0;
    }

    .project-nav a.next {
        right: 0;
    }

    .project-nav a span {
        display: block;
        height: 60px;
        margin-top: 10px;
        position: absolute;
        width: 60px;
    }

    .project-nav a.prev span,
    .project-nav a.next span {
        opacity: 0.25;

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .project-nav a.prev span {
        background: url(/images/prev_project_large.png) no-repeat 50% 50%;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.prev span {
                background: url(/images/prev_project_large@2x.png) no-repeat 50% 50%;
                background-size: 60px 60px;
            }
        }

    .project-nav a.next span {
        right: 0px;
        background: url(/images/next_project_large.png) no-repeat 50% 50%;
    }

        @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .project-nav a.next span {
                background: url(/images/next_project_large@2x.png) no-repeat 50% 50%;
                background-size: 60px 60px;
            }
        }

    .project-nav a h3 {
        color: #111;
        display: block;
        font-size: 20px;
        font-weight: 800;
        line-height: 4;
        margin: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        white-space: nowrap;

        -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
        transition: opacity 0.2s, transform 0.2s;
    }

    .project-nav a h3.small-title {
        display: none;
    }    

    .project-nav a.prev h3 {
        right: 30px;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .project-nav a.next h3 {
        left: 30px;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .no-touch .project-nav a:hover {
        background: #fff;
        box-shadow: 0 0 50px rgba(0,0,0,0.1); 
        width: 270px;
        background: rgba(255,255,255,0.8);
        -webkit-backdrop-filter: blur(40px);
        backdrop-filter: blur(40px);
    }
    
    .no-touch .project-nav a.next:hover {
        border-radius: 60px 0 0 60px;
    }
    
    .no-touch .project-nav a.prev:hover {
        border-radius: 0px 60px 60px 0px;
    }

    .no-touch .project-nav a:hover h3 {
        opacity: 1;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .no-touch .project-nav a:hover {
        opacity: 1;
    }

    .no-touch .project-nav a:hover span {
        opacity: 1;
        transform: scale(0.85);
    }
}

@media only screen and (min-width: 1025px) {

}



/*----------------------------------------------------------------------------*

PORTFOLIO - BACK TO TOP

------------------------------------------------------------------------------*/

@media only screen and (min-width: 0px) {
    
    .backtotop {
        display: none;
    }
}

@media only screen and (min-width: 768px) {

    .backtotop {
        display: block;
    }

    .backtotop {
        height: 160px;
    }
    
    .backtotop a {
        background: url('/images/backtotop.png') no-repeat 50% 50%;
        display: block;
        height: 60px;
        margin: 0 auto;
        opacity: 0.2;
        overflow: hidden;
        text-indent: -9999px;
        width: 60px;

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

       @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
            .backtotop a {
                background: url('/images/backtotop@2x.png') no-repeat 50% 50%;
                background-size: 60px 60px;
            }
         }

    .no-touch .backtotop a:hover {
        opacity: 1;
        transform: scale(0.90);
    }
}

@media only screen and (min-width: 1023px) {
    
}




/*======================================================================================
   

HELPER CLASSES

   
======================================================================================== */


.hidden {
    opacity: 0;

}

.visuallyhidden {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


/*======================================================================================
   

BREAKPOINTS

   
======================================================================================== */

@media only screen and (min-width: 0px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1025px) {
}