/* Clearfix */
.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* The best bit of code ever */
* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'ProximaNova-Thin';
    src: url('../fonts/proxima-nova-thin.eot');
    src: url('../fonts/proxima-nova-thin.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-thin.woff2') format('woff2'), url('../fonts/proxima-nova-thin.woff') format('woff'), url('../fonts/proxima-nova-thin.ttf') format('truetype'), url('../fonts/proxima-nova-thin.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova-Light';
    src: url('../fonts/proxima-nova-light.eot');
    src: url('../fonts/proxima-nova-light.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-light.woff2') format('woff2'), url('../fonts/proxima-nova-light.woff') format('woff'), url('../fonts/proxima-nova-light.ttf') format('truetype'), url('../fonts/proxima-nova-light.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ProximaNova-Medium';
    src: url('../fonts/proxima-nova-medium.eot');
    src: url('../fonts/proxima-nova-medium.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-medium.woff2') format('woff2'), url('../fonts/proxima-nova-medium.woff') format('woff'), url('../fonts/proxima-nova-medium.ttf') format('truetype'), url('../fonts/proxima-nova-medium.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova-Regular';
    src: url('../fonts/proxima-nova-regular.eot');
    src: url('../fonts/proxima-nova-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-regular.woff2') format('woff2'), url('../fonts/proxima-nova-regular.woff') format('woff'), url('../fonts/proxima-nova-regular.ttf') format('truetype'), url('../fonts/proxima-nova-regular.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova-Semibold';
    src: url('../fonts/proxima-nova-semibold.eot');
    src: url('../fonts/proxima-nova-semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-semibold.woff2') format('woff2'), url('../fonts/proxima-nova-semibold.woff') format('woff'), url('../fonts/proxima-nova-semibold.ttf') format('truetype'), url('../fonts/proxima-nova-semibold.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ProximaNova-Bold';
    src: url('../fonts/proxima-nova-bold.eot');
    src: url('../fonts/proxima-nova-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-bold.woff2') format('woff2'), url('../fonts/proxima-nova-bold.woff') format('woff'), url('../fonts/proxima-nova-bold.ttf') format('truetype'), url('../fonts/proxima-nova-bold.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova-Extrabld';
    src: url('../fonts/proxima-nova-extrabold.eot');
    src: url('../fonts/proxima-nova-extrabold.eot?#iefix') format('embedded-opentype'), url('../fonts/proxima-nova-extrabold.woff2') format('woff2'), url('../fonts/proxima-nova-extrabold.woff') format('woff'), url('../fonts/proxima-nova-extrabold.ttf') format('truetype'), url('../fonts/proxima-nova-extrabold.svg#youworkforthem') format('svg');
    font-weight: normal;
    font-style: normal;
}




/* Fixin' it */
body {
    margin: 0;
    padding: 0;
    font-family: 'ProximaNova-Regular', sans-serif;
    color: #666;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: #14212b;
}

p {
    line-height: 1.5;
}

a {
    text-decoration: none;
}

.center {
    text-align: center;
}

    .center .btn {
        text-align: center;
        margin: 30px 0 0 0;
    }

.banner .center .btn {
    margin: 30px 15px 0 15px;
}

img.center {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.underline-center {
    margin: 28px auto 28px;
    max-width: 50px;
}

/* Text and Title Styles */
h3 {
    font-family: 'ProximaNova-Thin';
    font-weight: normal;
    text-transform: uppercase;
    font-size: 54px;
    line-height: 1;
}

    h3 span {
        font-family: 'ProximaNova-Bold';
        display: block;
    }

h4 {
    font-size: 19px;
    margin: 30px 0;
    line-height: 1.3;
    font-weight: 400;
}

h5 {
    font-size: 32px;
    line-height: 1.2;
    font-family: 'ProximaNova-Thin';
    font-weight: 100;
}

.amp {
    font-family: "Adobe Caslon Pro", Baskerville, Garamond, serif;
}

.sub-title {
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 6px;
    color: #14212b;
    font-family: 'ProximaNova-Light';
    font-weight: 300;
}

.very-large {
    font-size: 26px;
    line-height: 1.3;
    max-width: 950px;
    margin: 0 auto 10px;
    color: #14212b;
}

.large {
    font-size: 22px;
    line-height: 1.3;
    color: #14212b;
}

/* Margins & Paddings */
.margin-top-1 {
    margin-top: 40px !important;
}

.margin-top-2 {
    margin-top: 60px !important;
}

.margin-bottom-1 {
    margin-bottom: 30px !important;
}

.margin-bottom-2 {
    margin-bottom: 40px !important;
}

.margin-bottom-3 {
    margin-bottom: 80px !important;
}

/* Generic fixes */
.overflow-hidden {
    overflow: hidden;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

/* Generic colours */
.mustard {
    color: #ffcb0d;
}

.teal {
    color: #65b7b5;
}

.orange {
    color: #da4e41;
}

.dark-blue {
    color: #14212b;
}

.white {
    color: #fff;
}

/* Generic borders */
.light-grey-border-top {
    border-top: 1px solid #DAE8E8;
}

.light-grey-border-bottom {
    border-bottom: 1px solid #DAE8E8;
}

.light-grey-border-right {
    border-right: 1px solid #DAE8E8;
}

/* Background colours */
.mustard-bg {
    background: #ffcb0d;
    color: #fff;
}

    .mustard-bg h2, .mustard-bg h3 {
        color: #fff;
    }

.teal-bg {
    background: #65b7b5;
    color: #fff;
}

    .teal-bg h2, .teal-bg h3, .teal-bg p, .teal-bg span {
        color: #fff;
    }

    .teal-bg .border-white {
        border: 3px solid #fff;
        color: #fff;
    }

        .teal-bg .border-white:hover {
            color: #14212b;
        }

        .teal-bg .border-white:after {
            background: #fff;
        }

.orange-bg {
    background: #da4e41;
    color: #fff;
}

    .orange-bg h2, .orange-bg h3 {
        color: #fff;
    }

.dark-blue-bg {
    background: #14212b;
    color: #fff;
}

    .dark-blue-bg h2, .dark-blue-bg h3 {
        color: #fff;
    }

.light-grey-bg {
    background-color: #f9f9f9;
}

/* Background colours */
.dark-blue-bg h1, .dark-blue-bg h2, .dark-blue-bg h3, .dark-blue-bg h4, .dark-blue-bg h5, .dark-blue-bg h6 {
    color: #fff;
}

.portfolio-latest h1, .portfolio-latest h2, .portfolio-latest h3, .portfolio-latest h4, .portfolio-latest h5, .portfolio-latest h6, .portfolio-item h3 {
    color: #fff;
}

.back {
    position: absolute;
    top: 130px;
    left: 4%;
    z-index: 1;
    display: none;
}

p.portfolio-back {
    color: #fff;
    display: inline-block;
}

.back-button {
    border: 0;
    text-indent: -10000px;
    border: 2px solid white;
    border-radius: 50%;
    outline: none;
    z-index: 1;
    padding: 10px;
    margin-right: 7px;
    vertical-align: -79%;
}

.dark-blue-bg p, a {
    color: #b3b3b3;
}

.contact-details a {
    color: #666;
    border-bottom: 1px dotted #666;
}

.dark-blue-bg p.large, .dark-blue-bg p.sub-title {
    color: #fff;
    margin: 0 0 30px;
}

/* Floating Blocks */
.floating-block {
    width: 33.3333333%;
    position: absolute;
    bottom: 0;
    z-index: 999;
    padding: 5%;
}

    .floating-block p, .floating-block h2 {
        color: #fff;
    }

    .floating-block p {
        margin-bottom: 30px;
    }

.floating {
    position: absolute;
    top: 50%;
    left: 50%;
}

.letter-k {
    margin-top: 50px;
    margin-left: -180px;
}

.letter-d {
    margin-top: 600px;
    margin-left: -180px;
}

/* Responsive Maps */
.google-maps {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .google-maps iframe {
        position: relative;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

.map-overlay {
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Carousel arrows */
.prev-arrow {
    margin-right: 10px;
    background: url(../images/left-arrow.png) no-repeat center;
}

.next-arrow {
    background: url(../images/right-arrow.png) no-repeat center;
}

.prev-arrow, .next-arrow {
    border: 3px solid #fff;
    padding: 30px;
    border-radius: 50%;
    float: left;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
}

    .prev-arrow:hover, .next-arrow:hover {
        opacity: 1;
    }

/* Title underlines */
.underline {
    border-bottom: 3px solid #fff;
    transition: width 0.4s;
    margin-top: 24px;
    margin-bottom: 40px;
    width: 8%;
    min-width: 50px;
}

.mustard-underline {
    border-color: #ffcb0d;
}

.teal-underline {
    border-color: #65b7b5;
}

.orange-underline {
    border-color: #da4e41;
}

.black-underline {
    border-color: #000;
}

.floating-block .underline {
    margin-top: 24px;
    margin-bottom: 30px;
}

.dot-divider {
    font-family: 'ProximaNova-Bold';
}

/* Generic Layouts */
.half {
    width: 50%;
    background-size: cover;
    background-position: center;
    float: left;
}

.services .half {
    float: none;
    display: table-cell;
}

.third {
    width: 33.33%;
    float: left;
    padding: 0 2%;
}

.portfolio .third {
    width: 50%;
    float: left;
    padding: 0 4% 5% 0;
}

.jobs .third {
    width: 50%;
    float: left;
    padding: 50px 4% 5% 0;
}

.jobs ul li {
    margin-bottom: 5px;
}

.unslider-arrow.prev {
    top: 50%;
}

.unslider-arrow.next {
    top: 50%;
}

.next-case-study {
    position: relative;
    z-index: 2;
    color: #fff;
}

    .next-case-study p, .next-case-study h2, .next-case-study h3, .next-case-study a {
        color: #fff;
    }

.two-thirds {
    width: 66.66%;
    float: left;
}

.quarter {
    width: 25%;
    float: left;
}

.fifth {
    width: 20%;
    float: left;
}

.strip {
    position: relative;
    width: 100%;
}

    .strip.clients-bg {
        height: auto;
    }

    .strip.image-strip {
        height: auto;
    }

    .strip.strip-auto {
        height: auto;
    }

    .strip.come-visit {
        display: table;
    }

.col-1 {
    width: 40%;
    position: relative;
    display: table-cell;
}

.col-2 {
    width: 60%;
    position: relative;
}

.specialist-services {
    padding: 120px 0 160px;
}

    .specialist-services .underline {
        margin-bottom: 50px;
    }

    .specialist-services .content {
        padding-bottom: 90px;
        max-width: 950px;
        margin: 0 auto;
    }

    .specialist-services .half {
        padding: 0 10%;
    }

.contact-banner {
    padding: 200px 0;
    background-attachment: fixed;
}

.home .strip .padding-one {
    padding: 200px 10%;
}

.padding-one {
    padding: 160px 10%;
}


.padding-two {
    padding: 150px 10% 100px;
}

.padding-left {
    padding: 0 0 0 4%;
}

.padding-right {
    padding: 0 4% 0 0;
}

.padding-two-left {
    padding-top: 160px;
    padding-bottom: 160px;
    padding-right: 5%;
    padding-left: 7%;
}

.about .equal-height-outer {
    display: table;
}

.equal-height {
    display: table-cell;
    height: 100%;
}

.strip.strip-auto .padding-two-left, .strip.strip-auto .padding-two-right {
    padding-right: 5%;
    padding-left: 7%;
    position: static;
    display: table-cell;
}

.padding-two-right {
    padding-top: 160px;
    padding-bottom: 160px;
    padding-left: 5%;
    padding-right: 7%;
}

.child-right {
    background-size: cover;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.greenishCover {
    width: 60% !important;
}

.margin-left-one {
    margin-left: 60%;
}

.straight-links {
    width: 100%;
    text-align: center;
    background: rgba(233,245,245,0.9);
    transition: all 0.3s;
}

    .straight-links li {
        display: inline;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .straight-links a {
        color: #222;
        padding: 30px 30px;
        display: inline-block;
        font-family: 'ProximaNova-Light';
        font-size: 15px;
    }

.straight-links-sticky {
    position: fixed;
    top: 66px;
    z-index: 1000;
    background: #ffcb0d;
    transition: all 0.3s;
}

    .straight-links-sticky a {
        padding: 20px 30px;
    }

.extra-pad {
    padding-top: 150px;
}



/* Buttons */
.btn {
    overflow: hidden;
    background: none;
    cursor: pointer;
    padding: 21px 50px;
    margin: 20px 20px 0 0;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'ProximaNova-Bold';
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .btn:after {
        content: '';
        position: absolute;
        z-index: -1;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        width: 0;
        height: 100%;
        top: 50%;
        left: 50%;
        background: #fff;
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-50%) rotate(-70deg);
        -moz-transform: translateX(-50%) translateY(-50%) rotate(-70deg);
        -ms-transform: translateX(-50%) translateY(-50%) rotate(-70deg);
        transform: translateX(-50%) translateY(-50%) skew(-30deg);
    }

.btn-hover {
    position: relative;
    z-index: 1;
}

.btn:hover {
    border-radius: 0;
}


.border-white {
    border: 3px solid #14212b;
    color: #14212b;
}

@media(min-width: 1025px) {
    .btn:hover:after {
        width: 140%;
        opacity: 1;
    }

    .border-white:hover {
        color: #fff;
    }
    
}

    .border-white:after {
        background: #14212b;
    }

.dark-blue-bg .border-white, .banner .border-white, .portfolio-latest .border-white, .portfolio-preview .border-white, .image-strip .border-white {
    border: 3px solid #fff;
    color: #fff;
}

    .dark-blue-bg .border-white:hover, .banner .border-white:hover, .portfolio-latest .border-white:hover, .portfolio-preview .border-white:hover, .image-strip .border-white:hover {
        color: #14212b;
    }

    .dark-blue-bg .border-white:after, .banner .border-white:after, .portfolio-latest .border-white:after, .portfolio-preview .border-white:after, .image-strip .border-white:after {
        background: #fff;
    }


/* Fixed Images */
.fixed-image-right, .fixed-image-left {
    background-attachment: fixed;
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: table-cell;
    height: 100%;
}

.fixed-image {
    background-attachment: fixed;
}

.fixed-image-right {
    background-position: right;
}

.fixed-image-left {
    background-position: left;
}

/* Header */
.header {
    position: fixed;
    padding: 10px 40px 20px 40px;
    margin-top: 30px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 10000;
}

.logo {
    width: 15%;
    position: absolute;
    float: left;
}

img.logo {
    width: 69px;
    margin-top: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

ul.main-menu {
    width: 100vw;
    margin: 0 auto;
    text-align: center;
}

    ul.main-menu li {
        margin: 0 10px;
        display: inline;
    }

        ul.main-menu li a {
            color: #fff;
            opacity: 0.8;
            padding: 25px 15px 15px;
            transition: all 0.2s;
            display: inline-block;
            font-size: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

            ul.main-menu li a:hover {
                opacity: 1;
                color: #ffcb0d;
                border-bottom: 3px solid #ffcb0d;
            }

            ul.main-menu li a.active {
                opacity: 1;
                color: #ffcb0d;
                border-bottom: 3px solid #ffcb0d;
            }

.header-sticky {
    margin-top: 0;
    background: rgba(30,33,43,1);
    padding: 0 30px 0 30px;
}

    .header-sticky img.logo {
        width: 49px;
        margin-top: 21px;
    }

    .header-sticky ul.main-menu li a {
        padding: 25px 15px 25px;
    }

/* Footer */
.footer {
    background: #14212b;
    color: #ccc;
}

    .footer a {
        transition: color 0.2s;
    }

        .footer a strong {
            color: #eee;
        }

    .footer a {
        color: #ccc;
    }

        .footer a:hover, .footer a strong:hover {
            color: #6ec0c0;
        }

    .footer ul {
        float: left;
        width: 25%;
        margin-right: 5%;
    }

        .footer ul li a {
            display: inline;
        }

        .footer ul:first-of-type {
            width: 40%;
        }

            .footer ul:first-of-type li {
                width: 49%;
                float: left;
            }

        .footer ul li:first-of-type {
            width: 100%;
            border-bottom: 1px dashed rgba(255,255,255,0.2);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .footer ul:last-of-type {
            margin-right: 0%;
        }

ul.link-col li a {
    padding: 6px 0;
    margin: 3px 0;
    display: block;
}

.link-columns {
    padding: 80px 7%;
}

.copyright {
    border-top: 1px solid #4d4d4d;
    padding: 25px 7%;
}

/* Banners */
.banner {
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

    .banner h2, .banner h3, .banner h1 {
        text-align: center;
        font-family: proxima-nova, sans-serif;
        color: #fff;
        text-transform: uppercase;
        font-family: 'ProximaNova-Thin';
        font-weight: 100;
        line-height: 1.4;
    }

        .banner h2 span {
            font-family: 'ProximaNova-Bold';
            color: #fecb0e;
        }

    .banner h1 {
        font-size: 21px;
        letter-spacing: 4px;
        opacity: 0.8;
        clear: both;
        font-family: 'ProximaNova-Regular';
        padding: 0 5%;
    }

.banner-content {
    transition: height 1s;
    z-index: 2;
    padding: 0 5%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.home-banner {
    background-position: bottom;
    height: 100vh;
}

    .home-banner h2 {
        font-size: 86px;
        letter-spacing: 35px;
        margin-bottom: 30px;
        color: #fff;
        font-family: 'ProximaNova-Thin';
        font-weight: 100;
        line-height: 1;
    }

    .home-banner h1 span {
        display: inline;
        font-family: 'ProximaNova-Regular';
    }

    .home-banner .center .btn {
        margin-top: 60px;
    }

.reveal-container {
    height: 0;
    overflow: hidden;
    transition: height 1s;
}


.generic-banner {
    padding: 245px 0 156px;
}

    .generic-banner h2 {
        font-size: 54px;
        letter-spacing: 3px;
        margin-bottom: 25px;
    }

.generic-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

.two-thirds .generic-overlay {
    width: 66.66%;
    right: 0;
    left: auto;
}

.colour-banner {
    padding-top: 260px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

    .colour-banner img.service-logo {
        display: block;
        margin: 0 auto 40px;
        max-width: 100%;
    }

    .colour-banner h1 {
        color: #fff;
        font-family: 'ProximaNova-Thin';
        font-weight: 100;
        font-size: 54px;
        margin-bottom: 60px;
        text-align: center;
        text-transform: none;
        letter-spacing: 3px;
    }

    .colour-banner h5 {
        color: #fff;
    }

.shard-1 {
    position: absolute;
    width: 80%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    left: -30%;
    top: 0;
    transform: skewX(40deg);
    z-index: 1;
    transition: width 6s, transform 6s, height 6s;
}

/* Portfolio Latest */
.portfolio-latest {
    /*background:url(/assets/images/latest-work-bg.png) bottom center;*/
    background-size: cover;
    color: #fff;
    position: relative;
    overflow: hidden;
    height: 820px;
}

    .portfolio-latest .half {
        padding: 0 10%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .portfolio-latest img {
        max-width: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding-top: 40px;
    }

    .portfolio-latest .child-right {
        position: relative;
        margin-top: 0;
        width: 50%;
        float: left;
        padding-right: 8%;
    }

    .portfolio-latest .sub-title {
        color: #fff;
    }

.project-sub-nav {
    display: table;
}

    .project-sub-nav .third, .project-sub-nav .two-thirds {
        display: table-cell;
        float: none;
    }

.projects {
    display: table;
}

    .projects .half {
        float: none;
        display: table-cell;
        vertical-align: top;
    }

/* --------------------- Portfolio Page -------------------------- */

.portfolio ul {
    /*list-style-type: disc;
    list-style-position: inside;*/
}

.portfolio ul li{
    margin-bottom: 15px;
}

.portfolio ul li::before{
 content: "\0BB \020";

}

.designs-outer {
    background: #fcfcfc url('/assets/images/repeat-grain.png');
    padding: 60px 20% 50px;
    background-attachment: fixed;
}

h2.designs-title {
    font-size: 46px;
    font-family: 'ProximaNova-Thin';
    font-weight: 100;
    margin-top: 60px;
}

.designs-outer img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 3px;
    width: 100%;
}

/* Browser Frame */
.portfolio-design {
    position: relative;
}

.design-title {
    position: absolute;
    top: 20px;
    left: -15%;
    width: 12%;
    font-size: 14px;
}

    .design-title span {
        font-size: 18px;
        display: block;
    }

    .design-title .underline {
        border-bottom: 1px solid #999;
    }

.browser-frame {
    background: #f1f1f1 url('/assets/images/browser-top.png') no-repeat;
    padding-top: 52px;
    padding-bottom: 5px;
    border-radius: 10px 10px 5px 5px;
    border-top: 1px solid #fff;
    border-left: 5px solid #f1f1f1;
    border-right: 5px solid #f1f1f1;
    margin-bottom: 50px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    position: relative;
}

    .browser-frame:before {
        position: absolute;
        top: 12px;
        left: 97px;
        background: #fff;
        border-radius: 5px;
        height: 28px;
        width: calc(70% - 97px);
        content: '';
    }

    .browser-frame:after {
        position: absolute;
        top: 12px;
        left: calc(70% + 13px);
        background: #fff;
        border-radius: 5px;
        height: 28px;
        width: calc(20%);
        content: '';
    }

/* Mobile Frame */
.mobile-frame-outer {
    width: 28.33333%;
    margin-right: 5%;
    position: relative;
    float: left;
    margin-bottom: 50px;
    border-radius: 37px 37px 30px 37px;
    box-shadow: rgb(211, 211, 211) 1px 1px, rgb(211, 211, 211) 2px 2px, rgb(211, 211, 211) 3px 3px, rgb(211, 211, 211) 4px 4px, rgb(211, 211, 211) 5px 5px, rgb(211, 211, 211) 6px 6px, rgb(211, 211, 211) 7px 7px, rgb(211, 211, 211) 8px 8px, rgb(211, 211, 211) 9px 9px, rgb(212, 212, 212) 10px 10px, rgb(213, 213, 213) 11px 11px, rgb(214, 214, 214) 12px 12px, rgb(214, 214, 214) 13px 13px, rgb(215, 215, 215) 14px 14px, rgb(216, 216, 216) 15px 15px, rgb(217, 217, 217) 16px 16px, rgb(218, 218, 218) 17px 17px, rgb(218, 218, 218) 18px 18px, rgb(219, 219, 219) 19px 19px, rgb(220, 220, 220) 20px 20px, rgb(221, 221, 221) 21px 21px, rgb(222, 222, 222) 22px 22px;
    border-bottom: 8px solid #111;
    border-right: 3px solid #000;
    border-left: 3px solid #555;
    background: #333;
    max-width: 380px;
    min-width: 260px;
}

    .mobile-frame-outer:last-of-type {
        margin-right: 0%;
    }

    .mobile-frame-outer:before {
        width: 4px;
        height: 40px;
        position: absolute;
        top: 100px;
        left: -7px;
        content: '';
        background: #333;
        border-radius: 2px 0 0 2px;
    }

    .mobile-frame-outer:after {
        width: 4px;
        height: 40px;
        position: absolute;
        top: 160px;
        left: -7px;
        content: '';
        background: #333;
        border-radius: 2px 0 0 2px;
    }

.mobile-frame {
    background: #333;
    padding-top: 46px;
    margin-bottom: 80px;
    border-left: 10px solid #333;
    border-right: 10px solid #333;
    border-radius: 30px 30px 5px 5px;
    max-height: 595px;
    overflow: hidden;
}

    .mobile-frame:before {
        border-radius: 3px;
        background: #444;
        width: 70px;
        height: 5px;
        content: '';
        position: absolute;
        top: 20px;
        left: calc(50% - 25px);
        border-top: 1px solid #000;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .mobile-frame:after {
        border-radius: 50%;
        background: #444;
        background: -webkit-linear-gradient(#222,#444); /*Safari 5.1-6*/
        background: -o-linear-gradient(#222,#444); /*Opera 11.1-12*/
        background: -moz-linear-gradient(#222,#444); /*Fx 3.6-15*/
        background: linear-gradient(#222,#444); /*Standard*/
        width: 46px;
        height: 46px;
        content: '';
        position: absolute;
        bottom: 16px;
        left: calc(50% - 26px);
        border-bottom: 2px solid #555;
        border-top: 2px solid #000;
    }

.mobile-frame-inner {
    border: 2px solid #000;
    border-radius: 8px;
}

    .mobile-frame-inner:before {
        border-radius: 0 3px 3px 0;
        background: #444;
        width: 4px;
        height: 60px;
        content: '';
        position: absolute;
        top: 100px;
        right: -7px;
    }

    .mobile-frame-inner:after {
        border-radius: 4px;
        background: #444;
        width: 9px;
        height: 9px;
        content: '';
        position: absolute;
        top: 18px;
        left: calc(50% - 50px);
        border-bottom: 1px solid #555;
        border-top: 1px solid #000;
    }

/* Related Projects */
.related-projects {
    padding: 80px 20%;
}

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
}

    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        height: 360px;
        width: 49%;
        background: #3085a3;
        text-align: center;
        cursor: pointer;
        margin: 0 2% 0 0;
        overflow: hidden;
    }
    
        .grid figure:last-of-type {
            margin: 0;
        }

        .grid figure img {
            position: relative;
            display: block;
            min-height: 100%;
            max-width: 100%;
            opacity: 0.25;
        }

        .grid figure figcaption {
            padding: 2em;
            color: #fff;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

            .grid figure figcaption::before,
            .grid figure figcaption::after {
                pointer-events: none;
            }

            .grid figure figcaption,
            .grid figure figcaption > a {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

                .grid figure figcaption > a {
                    z-index: 1000;
                    text-indent: 200%;
                    white-space: nowrap;
                    font-size: 0;
                    opacity: 0;
                }

        .grid figure h2 {
            font-family: 'ProximaNova-Light';
            color: #fff;
        }

            .grid figure h2 span {
                font-family: 'ProximaNova-Extrabld';
            }

        .grid figure h2,
        .grid figure p {
            margin: 0;
        }

        .grid figure p {
            font-size: 14px;
            font-weight: 1px;
            color: #fcfcfc;
        }

figure.effect-sarah {
}

    figure.effect-sarah img {
        max-width: none;
        width: -webkit-calc(100% + 20px);
        width: calc(100% + 20px);
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(-10px,0,0);
        transform: translate3d(-10px,0,0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    figure.effect-sarah:hover img {
        opacity: 0.4;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    figure.effect-sarah figcaption {
        text-align: left;
        max-width: 80%;
    }

    figure.effect-sarah h2 {
        position: relative;
        overflow: hidden;
        padding-bottom: 20px;
        line-height: 1.1em;
    }

        figure.effect-sarah h2::after {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: #fff;
            content: '';
            -webkit-transition: -webkit-transform 0.35s;
            transition: transform 0.35s;
            -webkit-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
        }

    figure.effect-sarah:hover h2::after {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    figure.effect-sarah p {
        padding: 20px 0;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }

    figure.effect-sarah:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }


/* Carousel */
.slick-slide {
    outline: none;
}

.map-right {
    height: 100%;
    vertical-align: top;
    display: table-cell;
}

.slider-outer {
    position: absolute;
}

.unslider {
    overflow: hidden;
}

    .slider-outer, .unslider, .unslider-wrap, .my-slider, .unslider li {
        height: 79.36%;
        width: 50%;
    }

        .unslider li {
            background-size: cover;
        }

/* Skews */
.skew {
    height: 100%;
    overflow: hidden;
    width: 126%;
    transition: all 0.3s;
}

.counterskew {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    margin-left: -150px;
    width: 100%;
    transition: all 0.3s;
}

.client-skew {
    transform: skewX(-15deg);
    overflow: hidden;
}

.client-counterskew {
    transform: skewX(15deg);
}

.home-clients {
    padding: 180px 5% 0 0;
}

.home-canvas {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(199, 104, 102);
}

.canvas-overflow {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Contact */
.image-strip {
    background-size: cover;
    background-position: center;
}

    .image-strip p {
        color: #fff;
    }

.contact .dark-blue-bg {
    padding: 150px 10% 60px;
}

.dark-blue-bg .very-large {
    color: #b3b3b3;
}

.contact-form {
    width: 100%;
    margin: 0 auto;
    background: #fafafa;
    padding: 60px 0%;
}

    .contact-form .field {
        margin-bottom: 25px;
    }

        .contact-form .field:last-of-type {
            margin-bottom: 0;
        }

.contact-form-inner {
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
}

.contact-form label {
    float: left;
    width: 30%;
    text-align: left;
    font-size: 16px;
    text-transform: uppercase;
    padding-top: 10px;
}

.contact-form input, .contact-form textarea {
    float: right;
    width: 70%;
    padding: 10px;
    font-size: 16px;
}

.contact-form button {
    padding: 0;
    background: 0;
    font-size: 16px;
    float: right;
    width: 35%;
}

.contact-form button {
    margin-right: 0;
    margin-top: 40px;
    padding: 21px 0;
}

.deets {
    font-size: 18px;
}

.deets-title {
    float: left;
    width: 30%;
}

.deets-content {
    float: left;
    width: 40%;
}

/* Portfolio */
.portfolio .padding-two {
    padding-top: 0;
}
.jobs .padding-two {
    padding: 100px 10% 50px
}

.job-title img {
    float:left;margin-right:20px;height:110px;
}
.job-title p.sub-title {
    margin:5px 0 8px
}
.job-title p.large {
    margin:5px 0 0
}

@media (min-width: 1800px){

    .portfolio .padding-two, .jobs .padding-two {
        padding-left: 20%;
        padding-right: 20%;
    }
}

.portfolio-client-logo {
    max-width: 200px;
    margin-bottom: 20px;
    max-height: 200px;
}

.portfolio-canvas {
    position: absolute;
    top: 0;
    left: 0;
}


.portfolio-item {
    background-size: cover;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 0 0 70px;
    height: 870px;
}

.next-portfolio-item, .previous-portfolio-item {
    max-width: 350px;
    top: 50%;
    position: absolute;
}

.previous-portfolio-item {
    left: 5%;
}

    .previous-portfolio-item .portfolio-item-descriptor {
        margin-left: 80px;
    }

.next-portfolio-item {
    right: 5%;
    text-align: right;
}

.portfolio-item-descriptor {
    opacity: 0;
    transition: all 0.3s;
}

.next-portfolio-item:hover .portfolio-item-descriptor, .previous-portfolio-item:hover .portfolio-item-descriptor {
    opacity: 1;
}

.next-portfolio-item .portfolio-item-descriptor {
    margin-right: 80px;
}

.next-portfolio-item h4, .previous-portfolio-item h4 {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 0px;
    font-size: 20px;
    font-family: ProximaNova-Bold;
    line-height: 1.1;
    margin-top: 47px;
}

.next-portfolio-item h5, .previous-portfolio-item h5 {
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-family: ProximaNova-Thin;
    line-height: 1.1;
}

.portfolio-preview {
    background-size: cover;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 20px 0 70px;
    -webkit-transition: background-position 1s, padding-top 1s, height 1s;
    -moz-transition: background-position 1s, padding-top 1s, height 1s;
    -ms-transition: background-position 1s, padding-top 1s, height 1s;
    -o-transition: background-position 1s, padding-top 1s, height 1s;
    transition: background-position 1s, padding-top 1s, height 1s;
    background-repeat: no-repeat;
}

    .portfolio-preview h3 {
        color: #fff;
    }

        .portfolio-preview h3 strong {
            font-family: 'ProximaNova-Bold';
        }

    .portfolio-preview .child-right img {
        max-width: 100%;
        min-width: 80%;
        position: absolute;
        bottom: 0;
    }


    .portfolio-preview .child-right {
        right: 8%;
        margin-top: 30px;
        -webkit-transition: transform 1s;
        -moz-transition: transform 1s;
        -ms-transition: transform 1s;
        -o-transition: transform 1s;
        transition: transform 1s;
        -webkit-transform: scale(0.9) translateY(10%);
        -moz-transform: scale(0.9) translateY(10%);
        -ms-transform: scale(0.9) translateY(10%);
        -o-transform: scale(0.9) translateY(10%);
        transform: scale(0.9) translateY(10%);
    }

    .portfolio-preview .portfolio-child img {
        position: static;
    }


.portfolio-items .portfolio-preview {
    display: none;
}

    .portfolio-items.slick-initialized .portfolio-preview,
    .portfolio-items .portfolio-preview.on {
        display: block;
    }


.portfolio-preview .preview-image {
    position: absolute;
    right: 10%;
    top: 150px;
    width: 45%;
    -webkit-transition: transform 1s, width 1s, top 1s, right 1s;
    -moz-transition: transform 1s, width 1s, top 1s, right 1s;
    -ms-transition: transform 1s, width 1s, top 1s, right 1s;
    -o-transition: transform 1s, width 1s, top 1s, right 1s;
    transition: transform 1s, width 1s, top 1s, right 1s;
}


    .portfolio-preview .preview-image.animating {
        -webkit-animation-name: none;
        -moz-animation-name: none;
        -ms-animation-name: none;
        -o-animation-name: none;
        animation-name: none;
    }

    .portfolio-preview .preview-image img {
        width: 100%;
        -webkit-transition: width 1s;
        -moz-transition: width 1s;
        -ms-transition: width 1s;
        -o-transition: width 1s;
        transition: width 1s;
    }

.animating.preview-image {
    top: 140px;
}

.portfolio-intro img {
    float: left;
}

.portfolio-intro p.sub-title {
    float: left;
}

.portfolio-preview.on .preview-image img {
    width: 100%;
}

.portfolio-child {
    padding-top: 10%;
    display: none;
}

.portfolio-preview.on .portfolio-child {
    height: 765px;
}

#ascrail2000-hr {
    display: none;
}


@-webkit-keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-200%, 0, 0);
        transform: translate3d(-200%, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-200%, 0, 0);
        transform: translate3d(-200%, 0, 0);
    }
}


@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideOutUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }
}

@-webkit-keyframes homepageSlideInUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes homepageSlideInUp {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}


@-webkit-keyframes homepageSlideInDown {
    from {
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes homepageSlideInDown {
    from {
        -webkit-transform: translate3d(0, -80px, 0);
        transform: translate3d(0, -80px, 0);
        opacity: 0;
    }

    to {
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
        opacity: 1;
    }
}


.homepageSlideInUp {
    -webkit-animation-name: fadeIn, homepageSlideInUp;
    -moz-animation-name: fadeIn, homepageSlideInUp;
    -ms-animation-name: fadeIn, homepageSlideInUp;
    -o-animation-name: fadeIn, homepageSlideInUp;
    animation-name: fadeIn, homepageSlideInUp;
    animation-delay: 0.3s;
}

.homepageSlideInDown {
    -webkit-animation-name: homepageSlideInDown;
    -moz-animation-name: homepageSlideInDown;
    -ms-animation-name: homepageSlideInDown;
    -o-animation-name: homepageSlideInDown;
    animation-name: homepageSlideInDown;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

.sub-banner-content {
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
}

.slideOutLeft {
    -webkit-animation-delay: 0.15s;
    -moz-animation-delay: 0.15s;
    -ms-animation-delay: 0.15s;
    -o-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.fadeOut {
    -webkit-animation-name: fadeOut, slideOutUp;
    -moz-animation-name: fadeOut, slideOutUp;
    -ms-animation-name: fadeOut, slideOutUp;
    -o-animation-name: fadeOut, slideOutUp;
    animation-name: fadeOut, slideOutUp;
}

.fadeIn {
    -webkit-animation-name: fadeIn, slideInUp;
    -moz-animation-name: fadeIn, slideInUp;
    -ms-animation-name: fadeIn, slideInUp;
    -o-animation-name: fadeIn, slideInUp;
    animation-name: fadeIn, slideInUp;
}

.portfolio-preview.slick-slide {
    padding-bottom: 0;
    height: 820px;
}

.portfolio-items .padding-one {
    padding: 190px 7% 0 11%;
}

.portfolio-preview .preview-image.on {
    width: 100%;
    /* left: 0; */
    /* right: auto; */
    /* top: 0; */
    margin-top: 0;
    height: auto;
    position: static;
    float: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

.portfolio-preview.animating {
    padding-top: 80px;
    padding-bottom: 110px;
}

    .portfolio-preview.animating::after,
    .portfolio-preview.on::after {
        display: block;
        content: "";
        padding-top: 80px;
        padding-bottom: 1.1%;
        -webkit-transition: padding 1s;
        -moz-transition: padding 1s;
        -ms-transition: padding 1s;
        -o-transition: padding 1s;
        transition: padding 1s;
    }


.portfolio-preview.animating,
.portfolio-preview.on {
    padding-top: 3.25%;
    height: 870px;
}

    .portfolio-preview.on .text-section {
        position: absolute;
    }

    .portfolio-preview.on.slick-slide .text-section {
        position: static;
    }


.portfolio-child-items {
    text-align: center;
}


    .portfolio-child-items img {
        min-width: 50%;
    }

.portfolio-title.padding-two {
    padding-bottom: 0;
    padding-top: 50px;
    color: #fff;
}

.portfolio-title p {
    max-width: 680px;
    margin: 1em auto;
}

.portfolio-child-items.slick-slider {
    margin-bottom: 6.3%;
    padding-top: 100px;
}



.portfolio-preview .preview-image .portfolio-child-items img {
    width: 633px;
}

.portfolio-preview .preview-image.animating {
    -webkit-transform: translate3d(calc(50% - 40vw), 0, 0);
    -moz-transform: translate3d(calc(50% - 40vw), 0, 0);
    -ms-transform: translate3d(calc(50% - 40vw), 0, 0);
    -o-transform: translate3d(calc(50% - 40vw), 0, 0);
    transform: translate3d(calc(50% - 40vw), 0, 0);
}

.hands {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    -o-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    width: 1009px;
    z-index: 2;
}

    .hands img {
        display: block;
    }

.portfolio-item .slick-slide {
    padding: 0 100px;
    opacity: 0.3;
    width: 833px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: transform 0.33s;
    -moz-transition: transform 0.33s;
    -ms-transition: transform 0.33s;
    -o-transition: transform 0.33s;
    transition: transform 0.33s;
}

.slick-slide.slick-active {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.slick-dots {
    display: none !important;
}

.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    border: 0;
    text-indent: -10000px;
    width: 46px;
    height: 46px;
    border: 2px solid white;
    border-radius: 50%;
    outline: none;
    z-index: 1;
}

.slick-prev {
    left: 4%;
    background: url('/assets/images/left-arrow.png') 11px 11px no-repeat;
}

.slick-next {
    right: 4%;
    background: url('/assets/images/right-arrow.png') 11px 11px no-repeat;
}

.clients {
    margin-left: 1%;
    margin-top: 1.1%;
}

    .clients .third-box {
        width: 32.3333333%;
        margin-right: 1%;
        float: left;
        height: 0;
        padding-bottom: 30%;
    }

.client-bg {
    position: relative;
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    overflow: hidden;
    width: 31.33%;
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
    -webkit-transition: opacity 0.3s, transform 1s;
    -moz-transition: opacity 0.3s, transform 1s;
    -ms-transition: opacity 0.3s, transform 1s;
    -o-transition: opacity 0.3s, transform 1s;
    transition: opacity 0.3s, transform 1s;
}

.clients .client-bg, .clients .client-bg img {
    -webkit-transform: skewX(0deg);
    -moz-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    -o-transform: skewX(0deg);
    transform: skewX(0deg);
}

.clients:hover > .client-bg img {
    -ms-opacity: 1;
    opacity: 1;
    transition: transform 0.5s;
}

.clients:hover > .client-bg a img:hover {
    -ms-opacity: 1;
    opacity: 1;
    transform: scale(1.1);
}

.client-bg img {
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    transform: skewX(15deg);
}

.clients-row:nth-of-type(2) {
    -webkit-transform: translateX(-9%);
    -moz-transform: translateX(-9%);
    -ms-transform: translateX(-9%);
    -o-transform: translateX(-9%);
    transform: translateX(-9%);
}

.clients .client-bg a {
    display: block;
    width: 100%;
    height: 100%;
}

.client-heading {
    background-color: #14212b;
}

    .client-heading .content {
        padding: 11%;
    }

        .client-heading .content h3 {
            color: #fff;
        }

        .client-heading .content .sub-title {
            color: #fff;
        }

.clients-bg {
    background-color: #2C3841;
    color: #fff;
}

.clients .client-bg {
    width: 15.66666%;
    margin-right: 1%;
    margin-bottom: 1%;
    float: left;
}

    .clients .client-bg img {
        width: 100%;
        margin: 0;
    }

/*Team*/

.team {
    margin-left: 1%;
    margin-top: 1%;
}

    .team .half-box {
        width: 49%;
        margin-right: 1%;
        margin-bottom: 1%;
        float: left;
        height: 0;
        padding-bottom: 49%;
    }

.team-heading {
    background-color: #F3F4F4;
    color: #333;
}

    .team-heading .content {
        padding: 50px;
    }

        .team-heading .content h3 {
            color: #333;
        }

        .team-heading .content .sub-title {
            color: #333;
        }

.team .team-bg {
    width: 24%;
    margin-right: 1%;
    margin-bottom: 1%;
    float: left;
    padding-bottom: 24%;
    height: 0;
}

    .team .team-bg .content {
        padding: 50px;
    }

    .team .team-bg img {
        width: 100%;
        margin: 0;
    }

/* Fixed arrow */
#arrow-outer {
    position: fixed;
    height: 50px;
    bottom: 50px;
    width: 50px;
    left: 50%;
    margin-left: -25px;
    z-index: 9;
    cursor: pointer;
}

div.arrow {
    position: relative;
    top: 20px;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border: 3px solid #FFF;
    border-top: none;
    border-left: none;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

    div.arrow:after {
        content: "";
        display: block;
        position: absolute;
        top: calc(50% - 23px);
        left: calc(50% - 23px);
        width: 50px;
        height: 50px;
        border: 1px solid rgba(255,255,255,.8);
        border: 1px solid #FFF;
        border-radius: 50%;
        -webkit-animation: circleBounce 1.2s linear infinite;
        animation: circleBounce 1.2s linear infinite;
    }





@-webkit-keyframes circleBounce {
    0% {
        -webkit-transform: scale(0.9);
        opacity: 0;
    }

    20% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    80% {
        opacity: 0.5;
    }

    100% {
        -webkit-transform: scale(1.1);
        opacity: 0;
    }
}

.next-project-title {
    opacity: 0;
}

.slick-next:hover .next-project-title {
    opacity: 1;
}

/* Copyright & social link styles */
.copyright p {
    float: left;
    margin: 6px 0;
}

.social-links {
    float: right;
}

.social-link {
    float: left;
}

/* Hide mobile menu */
.c-hamburger {
    display: none;
}


        .fancy:before {
                position: absolute;
                top: 51%;
                overflow: hidden;
                width: 45%;
                height: 1px;
                content: '\a0';
                background-color: #ddd;
                margin-left: -50%;
                text-align: right;
            }

            .fancy:after {
                position: absolute;
                top: 51%;
                overflow: hidden;
                width: 45%;
                height: 1px;
                margin-left: 5%;
                content: '\a0';
                background-color: #ddd;
            }

@media (min-width: 1980px) {
    .portfolio-preview .preview-image {
        top: 80px;
        max-width: 930px;
        
    }
}

@media (min-width: 2400px) {
    .portfolio-preview .preview-image {
        right: 15%;
        
    }

    .portfolio-preview .preview-image.animating {
        right: 10%;
    }
}

@media(min-width:1850px) {
    .clients-row:nth-of-type(2) {
        -webkit-transform: translateX(-71px);
        -moz-transform: translateX(-71px);
        -ms-transform: translateX(-71px);
        -o-transform: translateX(-71px);
        transform: translateX(-71px);
    }
}


@media(max-width:1750px) {
    .portfolio-preview .preview-image {
        top: 180px;
    }
}

@media(max-width:1500px) {
    .portfolio-preview .preview-image {
        top: 210px;
    }

    .clients .client-bg {
        width: 19%;
    }

    .clients .third-box {
        width: 39%;
        padding-bottom: 36.1%;
    }
}

@media(max-width:1330px) {
    .portfolio-preview .preview-image {
        top: 180px;
    }

    .slick-slider,
    .portfolio-item {
        height: 700px;
    }

    .portfolio-items .padding-one {
        padding: 140px 7% 0 11%;
    }

    .slick-slider h3 {
        font-size: 42px;
    }
}

@media(max-width:1400px) {
    .home-banner h2 {
        letter-spacing: 26px;
    }

    .padding-two-left, .padding-two-right {
        padding: 100px 5%;
    }

    .floating-block {
        padding: 3% 4% 2%;
    }
}

@media(max-width:1280px) {
    .home .strip .padding-one {
        padding: 150px 10%;
    }

    .home-banner h2 {
        font-size: 76px;
        letter-spacing: 17px;
    }

    .padding-two-left, .padding-two-right {
        padding: 70px 5%;
    }

    .col-1, .col-2 {
        width: 50%;
    }

    .floating-block {
        width: 70%;
        padding: 9% 10% 7%;
    }

    .clients .client-bg {
        width: 24%;
    }

    .clients .third-box {
        width: 49%;
        padding-bottom: 45.4%;
    }

    .portfolio-preview .preview-image {
        top: 200px;
    }
}

@media(max-width:1024px) {
    /* General */
    h3 {
        font-size: 42px;
    }

    h4 {
        margin: 20px 0;
    }

    .very-large {
        font-size: 21px;
    }

    .home .half {
        float: none;
        width: 100%;
    }

    .strip {
        height: auto;
    }

    .child-right {
        position: static;
        display: none;
    }
    /* Home General */
    .letter-k, .letter-d {
        display: none;
    }

    .home .strip .padding-one {
        padding: 100px 10%;
    }
    /* Home Banner */
    .home-banner h2 {
        font-size: 70px;
        letter-spacing: 17px;
    }
    /* Home Clients */
    .home-clients {
        position: static;
        padding: 0 8% 40px 10%;
        transform: translateY(-30px);
    }

    .client-bg {
        transform: skewX(0deg);
    }

        .client-bg img {
            transform: skewX(0deg);
            width: auto;
            height: auto;
        }

    .clients-row:nth-of-type(2) {
        transform: translateX(0);
    }
    /* Home Portfolio */
    .portfolio-latest {
        height: auto;
        background: #14212b;
        padding-bottom: 70px;
        border-bottom: 1px dotted rgba(255,255,255,0.3);
    }

    .home-canvas {
        display: none;
    }

    .portfolio-latest .half {
        padding: 100px 10% 0;
    }

    .portfolio-latest .half, .portfolio-latest img {
        top: auto;
        transform: translateY(0);
    }

    .portfolio-latest .child-right {
        display: block;
        padding: 0 10%;
        width: auto;
    }
    /* Services Page */
    .specialist-services .half {
        padding: 0 5%;
    }

    .services .padding-one {
        padding: 80px 6%;
    }

    .specialist-services {
        padding: 80px 0 100px;
    }

        .specialist-services .content {
            padding: 0 7% 70px;
        }

        .specialist-services img.center {
            max-width: 200px;
        }

    .contact-banner {
        padding: 100px 0;
    }
    /* Footer */
    .copyright p {
        max-width: 360px;
        margin: 0;
    }
}

@media(max-width:980px) {
    .services .half {
        display: none;
        width: 100%;
    }

    .portfolio .third, .third, .jobs .third {
        width: 100%;
        float: none;
    }

    .mobile-frame-outer {
        width: 45%;
    }

    .services .padding-one {
        display: block;
    }

    .col-1 {
        width: 100%;
    }

    .col-2 {
        width: 100%;
        position: absolute;
        padding: 20%;
    }

    .about .col-1:nth-of-type(2) {
        background: rgba(20,33,43,0.7);
        color: #fff;
    }

        .about .col-1:nth-of-type(2) p, .about .col-1:nth-of-type(2) h4 {
            color: #fff;
        }
.about .col-2 {
    display: none;
}

.about .meet-the-team .col-2 {
    display: block;
}

    .floating-block {
        display: none;
    }

    .contact-banner {
        background-attachment: inherit;
    }

    .contact-details {
        display: block;
    }

        .contact-details .col-1, .contact-details .col-2 {
            display: block;
        }

        .contact-details .col-1 {
            text-align: center;
        }

        .contact-details .col-2 {
            padding: 0;
        }

    .deets-title, .deets-content {
        float: none;
        width: 100%;
    }

    .contact-details .underline {
        margin: 28px auto 28px;
        max-width: 50px;
    }

    .contact-details .col-2, .google-maps {
        position: static;
        height: 600px;
    }

    .map-overlay {
        height: auto;
    }

    .clients .client-bg {
        width: 32.3333%;
    }

    .clients .third-box {
        width: 99%;
        padding-bottom: 95.4%;
    }

    .portfolio-items .portfolio-preview .preview-image {
        display: none;
    }

    .portfolio-items .padding-one {
        padding-left: 15%;
        width: 70%;
    }

    
    .grid figure {
        width: 99%;
        margin-bottom: 2%;
    }
}
    .job-bg {
        padding-top:180px;
    }

@media(max-width:767px) {
    /* General */
    .job-bg {
        padding-top:110px;
    }
    .jobs .padding-two {
        padding: 60px 10% 50px;
    }
    .jobs .job-bg {
        padding-bottom:80px
    }
    .jobs .third {
        padding:30px 4% 0px 0;
    }
    .job-title img {
        height: 60px;
        margin-right: 13px;
        margin-bottom: 10px;
    }
    .jobs h1 {
        font-size: 1.6em;
    }
    .sub-title {
        font-size: 12px;
        letter-spacing: 2px;
    }
    .job-title p.sub-title {
        margin: 5px 0 3px;
    }
    .job-title p.large {
        margin: 15px 0 0;
        clear: both;
        font-size:18px
    }
    .header-gap{
    display: none;
    }
    
    .very-large {
        font-size: 18px;
    }
    .related-projects {
        padding: 60px 7%;
    }
    .designs-outer {
        padding-left: 4%;
        padding-right: 4%;
    }

    .design-title {
        position: static;
    }

    .portfolio-preview .preview-image {
        display: none;
    }

    .portfolio-item {
        height: auto;
        padding-bottom: 0;
    }

    .clients .client-bg {
        width: 49%;
    }

    .portfolio-items .padding-one {
        padding-top: 20px;
        width: 100%;
    }

    .previous-portfolio-item, .next-portfolio-item{
        display: none;
    }
    .portfolio-item .portfolio-preview.animating, .portfolio-item .portfolio-preview.on {
        height: auto;
        padding-bottom: 0;
    }

    .portfolio-item .portfolio-preview .preview-image.animating {
        position: static;
        width: 80%;
        margin: 0 auto;
    }

    .portfolio-canvas.portfolio-single {
        display: none;
    }

    .mobile-frame-outer {
        width: 95%;
    }

    .portfolio-items .slick-prev, .portfolio-items .slick-next {
        top: auto;
        bottom: 5%;
    }

    .padding-two {
        padding: 50px 7% 60px;
    }

    .header {
        position: static;
    }

    .half {
        float: none;
        width: 100%;
    }

    .specialist-services .half:first-of-type {
        margin-bottom: 60px;
    }

    .specialist-services .content {
        padding-bottom: 50px;
    }

    .center .btn {
        margin-top: 15px;
    }

    .mobile-menu-icon {
        width: 75px;
        height: 67px;
        position: absolute;
        top: 0;
        right: 0;
        overflow: hidden;
    }

    .header-sticky {
        height: 67px;
        padding: 0 30px 0 5%;
    }

    .c-hamburger {
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 75px;
        height: 67px;
        font-size: 0;
        text-indent: -9999px;
        appearance: none;
        box-shadow: none;
        border-radius: none;
        border: none;
        cursor: pointer;
        transition: background 0.3s;
    }

        .c-hamburger:focus {
            outline: none;
        }

        .c-hamburger span {
            display: block;
            position: absolute;
            top: 32px;
            left: 22px;
            right: 22px;
            height: 4px;
            background: white;
        }

            .c-hamburger span::before,
            .c-hamburger span::after {
                position: absolute;
                display: block;
                left: 0;
                width: 100%;
                height: 4px;
                background-color: #fff;
                content: "";
            }

            .c-hamburger span::before {
                top: -10px;
            }

            .c-hamburger span::after {
                bottom: -10px;
            }

    .c-hamburger--htx {
        background-color: #14212b;
    }

        .c-hamburger--htx span {
            transition: background 0s 0.3s;
        }

            .c-hamburger--htx span::before, .c-hamburger--htx span::after {
                transition-duration: 0.3s, 0.3s;
                transition-delay: 0.3s, 0s;
            }

            .c-hamburger--htx span::before {
                transition-property: top, transform;
            }

            .c-hamburger--htx span::after {
                transition-property: bottom, transform;
            }
        /* active state, i.e. menu open */
        .c-hamburger--htx.is-active {
            background-color: #65b3b1;
        }

            .c-hamburger--htx.is-active span {
                background: none;
            }

                .c-hamburger--htx.is-active span::before {
                    top: 0;
                    transform: rotate(45deg);
                }

                .c-hamburger--htx.is-active span::after {
                    bottom: 0;
                    transform: rotate(-45deg);
                }

                .c-hamburger--htx.is-active span::before,
                .c-hamburger--htx.is-active span::after {
                    transition-delay: 0s, 0.3s;
                }

    ul.main-menu {
        position: fixed;
        top: 0;
        left: -80vw;
        background: #222;
        height: 100vh;
        width: 80vw;
        transition: left 0.7s;
        z-index: 100;
    }

    ul.slide-in {
        left: 0;
    }

    ul.main-menu li {
        display: block;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        margin: 0;
    }

        ul.main-menu li a {
            padding: 20px;
        }

    .header-sticky ul.main-menu li a {
        width: 100%;
    }

    h3 {
        font-size: 32px;
    }

    .underline {
        margin-top: 25px;
        margin-bottom: 30px;
    }
    /* Home General */
    .home .strip .padding-one {
        padding: 50px 7% 60px;
    }

    .home .portfolio-latest .half {
        padding: 50px 7% 60px;
    }

    .portfolio-latest .child-right {
        padding: 0 7%;
    }

        .portfolio-latest .child-right img {
            padding: 0;
        }
    /* Home Banner */
    .home-banner h2 {
        font-size: 50px;
        letter-spacing: 10px;
    }

    .home-banner h3 {
        font-size: 18px;
    }

    .home-banner {
        height: calc(100vh - 67px);
    }
    /* Home Clients */
    .home-clients {
        display: none;
    }

    /* Contact Us Page*/
    .contact-form label {
        text-transform: none;
    }

    .contact .dark-blue-bg {
        padding: 50px 5% 30px;
    }

    .contact-form button {
        width: 70%;
    }

    /* Footer */
    .footer ul:first-of-type, .footer ul {
        width: 100%;
        margin-bottom: 40px;
    }

    .link-columns {
        padding: 40px 7% 20px;
    }

    .footer ul:first-of-type li {
        width: 100%;
    }

    .copyright p {
        float: none;
    }

    .social-links {
        float: left;
        margin-top: 20px;
    }
}

@media(max-width:380px) {
    .clients .client-bg {
        width: 99%;
    }

    .clients .third-box {
        width: 99%;
        padding-bottom: 0;
        height: auto;
    }
}