* {
    margin: 0;
    padding: 0;
}

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

body {
    font-family: sans-serif;
    color: #FFF;
    background: #FFF url(assets/spinner.gif) no-repeat center;
    background-size: 50px;
    background-attachment: fixed;
    -ms-overflow-x: hidden !important;
    overflow-x: hidden !important;
}
body.loaded {
    background: #fff;
}

em {
    font-style: italic;
}

strong {
    font-weight: 600;
}

a {
    /*display: inline-block;*/
    color:inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    border-bottom:  1px solid rgba(0, 0, 0, 0.2);
    /*border-color: inherit;*/
}

a img {
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.0);

}

html.no-mobile a img:hover {}

html.no-mobile a.rainbow:hover {
    /*color: #F00;*/
    /*border-bottom:  2px solid rgba(255, 0, 0, 1.0);*/
    /*border-color: inherit;*/

    border: none;

   background: linear-gradient(270deg, #e20a0a, #ffc200, #74e10b, #12b1e1, #bb11e1, #e20a0a);

    background-size: 500% 500%;

    -webkit-animation: HoverGradient 2s linear infinite;
    -moz-animation: HoverGradient 2s linear infinite;
    animation: HoverGradient 2s linear infinite;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


}

.mobile {
    display: none; 
}


h5 {
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
}

@-webkit-keyframes rotateColor {
    0% {
        -webkit-filter: hue-rotate(0deg);
    }
    100% {
        -webkit-filter: hue-rotate(360deg);
    }
}

@-webkit-keyframes HoverGradient {
    0%{background-position:0% 50%}
    100%{background-position:250% 50%}
    /*100%{background-position:0% 52%}*/
}

#strategyAestheticsBlk {
    -webkit-animation: 5s rotateColor linear infinite;
}

br {
    line-height: 50%;
}

p {
    font-family: 'Sharp Sans No1';
    line-height: 140%;
    font-weight: 300;
}

.description {
    color: #444444;
    max-width: 380px;
    font-family: 'sharp';
    /*font-weight: 200;*/
    letter-spacing: 0.5px;
    font-size: 18px;
    line-height: 27px;
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;
}

.wht {
    color: #5a5a5a;
}

.visibleIpad,
.hiddenDesktop,
.visibleMobile,
.visible1024 {
    display: none;
}

#wrapper {
    width: 100vw;
    height: 100%;
    overflow: hidden;
    position: relative;
}

html.with-works,
html.with-works body {
    overflow: visible;
}
html.with-works #wrapper {
    height: auto;
}
html.with-works #canvas {
    /*-webkit-transform: perspective(800px) rotateX(-4deg);
    -moz-transform: perspective(800px) rotateX(-4deg);
    -ms-transform: perspective(800px) rotateX(-4deg);
    -o-transform: perspective(800px) rotateX(-4deg);
    transform: perspective(800px) rotateX(-4deg);*/
    opacity: 0;
}

html.with-works .bottomLeft,
html.with-works .bottomRight {
    opacity: 0;
    visibility: hidden;
}

html.with-works .topRight .works-toggler {
    border: none;
    background: linear-gradient(270deg, #e20a0a, #ffc200, #74e10b, #12b1e1, #bb11e1, #e20a0a);
    background-size: 500% 500%;
    -webkit-animation: HoverGradient 2s linear infinite;
    -moz-animation: HoverGradient 2s linear infinite;
    animation: HoverGradient 2s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.with-works #works {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

html.with-works .logo {
    opacity: 1;
    visibility: visible;
}

html.with-works .header:not(.clone),
html.with-works .header .description {
    position: static !important;
}

#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100;
    -webkit-transition-property: opacity, transform;
    -moz-transition-property: opacity, transform;
    -ms-transition-property: opacity, transform;
    -o-transition-property: opacity, transform;
    transition-property: opacity, transform;
    -webkit-transition-duration: 750ms;
    -moz-transition-duration: 750ms;
    -ms-transition-duration: 750ms;
    -o-transition-duration: 750ms;
    transition-duration: 750ms;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: 10s rotateColor linear infinite;

}
#canvas canvas {
    width: 100%;
    height: 100%;
}
#canvas canvas[style] {
    background-color: #fff;
}

.logo {
    position: absolute;
    top: 48px;
    left: 50px;
    border: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 750ms;
    -moz-transition: all 750ms;
    -ms-transition: all 750ms;
    -o-transition: all 750ms;
    transition: all 750ms;
    z-index: 10;
    width: 60px;
    height: 24px;
    background-image: url("assets/logo-sc.png");
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .logo {
        background-image: url("assets/logo-sc@2x.png");
    }
}
.logo img {
    display: block;
    width: 100%;
}

#works {
    text-align: left;
    position: relative;
    top: 105%;
    left: 0;
    background-color: #fff;
    -webkit-transition: transform 650ms ease-out;
    -moz-transition: transform 650ms ease-out;
    -ms-transition: transform 650ms ease-out;
    -o-transition: transform 650ms ease-out;
    transition: transform 650ms ease-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

#works .container {
    margin: 0 49px;
    font: 0/0 a;
}
#works .item {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 10px);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    border: none;
    opacity: 0;
    -webkit-transition: opacity 400ms;
    -moz-transition: opacity 400ms;
    -ms-transition: opacity 400ms;
    -o-transition: opacity 400ms;
    transition: opacity 400ms;
}

html.is-mobile #works .item {
    color: #444;
}
html.no-mobile #works .item:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 250ms;
    -moz-transition: opacity 250ms;
    -ms-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    transition: opacity 250ms;
}
#works .item:nth-child(2n) {
    margin-left: 20px;
}
#works .item.shown {
    opacity: 1;
}
#works .item.animate {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: moveUp 0.65s ease forwards;
    animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
    0% { }
    100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
    0% { }
    100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
#works .item img {
    width: 100%;
    display: block;
}
#works .item span {
    font: 18px/27px 'sharp';
}

html.no-mobile #works .item:hover:after {
    opacity: 1;
}
html.no-mobile #works .item:hover span {
    bottom: 25px;
    opacity: 1;
}
html.no-mobile #works .item span {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 25px;
    right: 25px;
    z-index: 2;
    opacity: 0;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -ms-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

html.is-mobile #works .item span {
    position: static;
    display: block;
    padding-top: 7px;
}

#works .footer {
    padding-top: 70px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
#works .footer-col {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 10px);
    padding-bottom: 50px;
}
#works .footer-col:before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: #444;
    margin-bottom: 50px;
}
#works .footer-col:nth-child(2n) {
    margin-left: 20px;
}
#works .footer-address {
    color: #444;
    font: 13px/1.35em 'sharp';
}
#works .footer-social li {
    display: inline-block;
    vertical-align: bottom;
    margin-right: 23px;
}
#works .footer-social li:last-child {
    margin-right: 0;
}
#works .footer-social a {
    border: none;
    display: block;
    background-color: #000;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
html.no-mobile #works .footer-social a:hover {
    background: linear-gradient(270deg, #e20a0a, #ffc200, #74e10b, #12b1e1, #bb11e1, #e20a0a);
    background-size: 500% 500%;
    -webkit-animation: HoverGradient 2s linear infinite;
    -moz-animation: HoverGradient 2s linear infinite;
    animation: HoverGradient 2s linear infinite;
}
#works .footer-social a.tw {
    width: 21px;
    height: 18px;
    -webkit-mask-image: url("assets/Twitter.svg");
    mask-image: url("assets/Twitter.svg");
}
#works .footer-social a.be {
    width: 24px;
    height: 15px;
    -webkit-mask-image: url("assets/Behance.svg");
    mask-image: url("assets/Behance.svg");
}
#works .footer-social a.ig {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("assets/Instagram.svg");
    mask-image: url("assets/Instagram.svg");
}
#works .footer-social a.li {
    width: 20px;
    height: 18px;
    -webkit-mask-image: url("assets/LinkedIn.svg");
    mask-image: url("assets/LinkedIn.svg");
}
#works .footer-social a.dr {
    width: 19px;
    height: 18px;
    -webkit-mask-image: url("assets/Dribbble.svg");
    mask-image: url("assets/Dribbble.svg");
}
#works .footer-social a svg {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    fill: currentcolor;
}
#works .footer-social p {
    color: rgba(0,0,0,0.4);
    font: 11px/1.35em 'sharp';
    padding-top: 16px;
}

#rasters {
    display: none;
    position: fixed;
    top: -100%;
    left: -100%;
}

.plus-mark {
    vertical-align: 5px;
}

#about,
#work,
#projectPage {
    position: absolute;
    top: -30000%;
    left: 0;
    width: 86%;
    margin: 0 7%;
    text-align: center;
    opacity: 0;
    overflow: hidden;
    height: 0;
}

#work {
    margin: 0;
    padding: 0 7%;
}

#about {
    z-index: 5;
}

#work,
#projectPage {
    color: #000;
    background: #FFF;
}

#projectPage {
    margin: 0;
    opacity: 1;
    width: 100%;
    padding: 0;
    margin: 0;
}

#projectMain {
    border-radius: 5px;
}

#top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

#bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
}

.header {
    width: 100vw;
    height: 150px;
    position: fixed;
}
.header.clone {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: transform 300ms;
    -moz-transition: transform 300ms;
    -ms-transition: transform 300ms;
    -o-transition: transform 300ms;
    transition: transform 300ms;
    top: 0;
    left: 0;
    z-index: 150;
    background-color: #fff;
}
.header.clone.hidden {
    visibility: hidden;
    opacity: 0;
}
.header.clone.visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.topLeft {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
}

.topRight {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    margin-top: 35px;
    margin-right: 40px;
}

.bottomRight {
    position: fixed;
    bottom: 35px;
    right: 47px;
    z-index: 100;
}

.bottomLeft {
    position: fixed;
    bottom: 35px;
    left: 49px;
    z-index: 100;
}

.left {
    float: left;
}

.right {
    float: right;
}

.right div {
    float: left;
}

.right .icon2,
.left .icon2,
.right div {
    z-index: 1000;
}

.icon {
    display: block;
    width: 70px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999em;
    -webkit-animation: 5s rotateColor linear infinite;
}

.info {
    background-size: 47px;
    background-position: 16px 20px;
}

.work {
    background-size: 43px;
    background-position: 9px 18px;
}

.work.rainbowtextlink {
    font-family: 'freight-micro-pro';
    font-size: 32px;
    background-image: none!important;
}

html.no-mobile .icon:hover {}

.icon2 {
    background-position: center;
    background-size: 56px 31px;
    width: 56px;
    height: 31px;
    display: block;
    text-indent: -9999em;
    background-repeat: no-repeat;
    opacity: 0;
    position: fixed;
    -webkit-animation: 5s rotateColor linear infinite;
}

html.no-mobile .icon2:hover {
    opacity: 1;
    background-size: 56px 31px;
    overflow: visible;
}

.behance {
    left: 22px;
    bottom: 25px;
    /*background-image: url(img/canvas/behanceBlk.png);*/
}

html.no-mobile .behance:hover {
    /*background-image: url(img/behanceGradient.png);*/
}

.twitter {
    left: 22px;
    bottom: 80px;
    /*background-image: url(img/canvas/twitterBlk.png);*/
}

html.no-mobile .twitter:hover {
    /*background-image: url(img/twitterGradient.png);*/
}

.linkedin {
    left: 22px;
    bottom: 135px;
    /*background-image: url(img/canvas/linkedinBlk.png);*/
}

html.no-mobile .linkedin:hover {
    /*background-image: url(img/linkedinGradient.png);*/
}

.flipboard {
    left: 22px;
    bottom: 190px;
    /*background-image: url(img/canvas/flipboardBlk.png);*/
}

html.no-mobile .flipboard:hover {
    /*background-image: url(img/flipboardGradient.png);*/
}

.location {
    right: 22px;
    bottom: 25px;
    /*background-image: url(img/canvas/locationBlk.png);*/
}

html.no-mobile .location:hover {
    /*background-image: url(img/locationGradient.png);*/
}

.phone {
    right: 22px;
    bottom: 80px;
    /*background-image: url(img/canvas/phoneBlk.png);*/
}

html.no-mobile .phone:hover {
    /*background-image: url(img/phoneGradient.png);*/
}

.email {
    right: 22px;
    bottom: 135px;
    /*background-image: url(img/canvas/emailBlk.png);*/
}

html.no-mobile .email:hover {
    /*background-image: url(img/mailGradient.png);*/
}

.jobs {
    right: 22px;
    bottom: 190px;
    /*background-image: url(img/canvas/jobsBlk.png);*/
}

html.no-mobile .jobs:hover {
    /*background-image: url(img/jobsGradient.png);*/
}

.popup {
    position: fixed;
    bottom: 10px;
    right: 90px;
    padding: 10px 15px;
    background-color: #000;
    color: #FFF;
    height: 20px;
    display: none;
    opacity: 0;
    border: 1px solid #FFF;
}

.popup a {
    -webkit-animation: 5s rotateColor linear infinite;
}

html.no-mobile .popup a:hover {
    background: -webkit-linear-gradient(left, #F00 0%, #FF0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.locationDiv .popup {
    bottom: 24px;
}

.phoneDiv .popup {
    bottom: 80px;
}

.emailDiv .popup {
    bottom: 136px;
}

.popup a {
    color: #FFF;
}

.speechtail {
    /*background: url(img/speechtailBlk.png) no-repeat;*/
    background-size: 100%;
    width: 20px;
    height: 18px;
    position: absolute;
    right: -20px;
    top: 10px;
}

.popup.white {
    color: #000;
    background-color: #FFF;
    border: 1px solid #000;
}

.popup.white a {
    color: #000;
}

.popup.white .speechtail {
    /*background-image: url(img/speechtailWht.png);*/
}

.atHome .popup a {
    color: transparent;
}

.atHome .popup,
.atHome .popup.white {
    background: transparent;
    border: none;
    color: transparent;
    opacity: 1;
}

.atHome .speechtail {
    display: none;
}

#aboutHeader,
#workHeader,
#projectHeader {
    padding: 30px 0 0 0;
    position: fixed;
    top: inherit;
    left: 0;
    width: 86%;
    margin: 0 7%;
    background: rgba(0, 0, 0, .8);
    -webkit-transform: translateZ(0);
    z-index: 1;
}

#aboutHeader {
    border-bottom: 0px solid rgba(255, 255, 255, .2);
    padding: 30px 0;
}

#about h1 {
    /*background: url(img/logoWht.svg) no-repeat center;*/
    background-size: auto 100%;
    height: 60px;
    width: 200px;
    margin: auto;
}

#about h2 {
    font-family: 'freight-big-pro';
    margin-top: 180px;
    font-size: 80px;
    font-weight: 300;
    line-height: 80px;
    padding: 0 10% 0 10%;
}

#about h2 strong {
    font-weight: bold;
}

#about h3 {
    font-family: "freight-micro-pro", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 32px;
}

#workHeader,
#projectHeader {
    background: rgba(255, 255, 255, .8);
    top: inherit;
    left: inherit;
    z-index: 50;
    border-bottom: 0px solid rgba(0, 0, 0, .2);
    padding: 30px 0;
}

#work h1 {
    /*background: url(img/logoBlk.svg) no-repeat center;*/
    background-size: auto 100%;
    height: 60px;
    width: 200px;
    margin: auto;
}

#about h1,
#work h1,
#projectHeader h1 {
    -webkit-animation: 5s rotateColor linear infinite;
    cursor: pointer;
}

html.no-mobile #about h1:hover,
html.no-mobile #work h1:hover,
html.no-mobile #projectHeader h1:hover {
    /*background-image: url(img/logoGradient.svg);*/
}

.teamLinks {
    display: none;
}

#workTable {
    margin-top: 165px;
}

#workTable .row {
    overflow: hidden;
    width: 100%;
}

#workTable .row_half {
    overflow: hidden;
    width: 50%;
    float: left;
}

#about table td {
    width: 33%;
    line-height: 1.2em;
    text-align: center;
}

#about span {
    margin: 0 3px;
    line-height: 140%;
}

#aboutServices {
    border-top: 0px solid rgba(255, 255, 255, .2);
    border-bottom: 0px solid rgba(255, 255, 255, .2);
    padding: 60px 10% 75px 10%;
    margin: 80px 0 70px 0;
    overflow: hidden;
    font-size: 18px;
}

#aboutClients {
    border-bottom: 0px solid rgba(255, 255, 255, .2);
    padding-bottom: 60px;
    margin-bottom: 70px;
}

#aboutTeam {
    padding: 0 7.5% 10px 7.5%;
    overflow: hidden;
}

#teamTable {
    margin-top: 40px;
}

.teamMember {
    float: left;
    width: 14.66%;
    margin: 1%;
}

#teamTable .teamImg {
    width: 100%;
    height: 50%;
    margin-bottom: 10px;
    overflow: hidden;
    text-align: center;
    position: relative;
    border-radius: 4px;
}

#teamTable .teamImg video {
    height: 164px;
    margin-left: -55px;
}

.teamPopup .teamImg {
    overflow: hidden;
}

.teamPopup .teamImg video,
.teamPopup .teamImg img {
    width: 100%;
}

#aboutFooter {
    clear: both;
    padding-top: 50px;
    width: 165px;
    margin: auto;
    height: 30px;
}

#aboutFooter a {
    display: block;
    background: #FFF;
    color: #000;
    font-weight: bold;
    border-radius: 16px;
    padding: 3px 15px;
    margin: auto;
    float: left
}

#aboutFooter .linkWrapper {
    background: #000;
}

#aboutFooter span {
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: block;
    top: 15px;
    position: relative;
}

#teamWrapper {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    z-index: 1500;
    display: none;
    opacity: 0;
}

#teamWrapper a {
    color: #FFF;
}

#teamWrapper.inverted {
    background: rgba(255, 255, 255, .8);
}

#teamClose {
    display: block;
    position: fixed;
    left: 66.5%;
    top: 7%;
    color: #FFF;
    text-indent: -9999em;
    width: 30px;
    height: 30px;
    /*background: url(img/closeTeamInvert.png);*/
    background-size: 100%;
    z-index: 150;
    -webkit-animation: 5s rotateColor linear infinite;
}

#teamWrapper.inverted #teamClose {
    /*background-image: url(img/closeTeam.png);*/
}

html.no-mobile #teamClose:hover,
html.no-mobile #teamWrapper.inverted #teamClose:hover {
    /*background-image: url(img/closeTeamGradient.png);*/
}

.teamInfo {
    display: block;
    width: 20px;
    height: 20px;
    /*background: url(img/iWht.png);*/
    background-size: 100%;
    text-indent: -9999em;
    margin: 5px auto;
    -webkit-animation: 5s rotateColor linear infinite;
    margin-bottom: 10px;
}

html.no-mobile .teamInfo:hover {
    /*background-image: url(img/infoGradient.png);*/
}

.teamPopup {
    display: none;
    position: fixed;
    z-index: 100;
    left: 30%;
    top: 5%;
    width: 40%;
    height: 90%;
    background: #000;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    overflow: scroll;
    border: 1px solid white;
    height: auto!important;
    letter-spacing: 1px;
    border-radius: 4px;
}

#teamWrapper.inverted .teamPopup {
    background: #FFF;
    color: #000;
    border: 1px solid black;
}

#teamWrapper.inverted a {
    color: #000;
}

.teamBio {
    padding: 40px 80px 60px 80px;
}

.teamPopup h3 {
    font-family: 'freight-micro-pro';
    font-weight: 300;
    font-size: 28px;
    margin-bottom: 5px;
    font-size: 32px;
}

.teamPopup h4 {
    font-weight: normal;
    margin-bottom: 15px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.teamName {
    font-size: 18px;
    line-height: 130%;
    font-family: 'freight-micro-pro';
    font-weight: 300;
}

.teamTitle {
    font-size: 14px;
}

#teamJobs {
    padding: 40px 40px 40px 40px;
    height: auto;
}

#jobsHeader {
    padding-bottom: 20px;
    border-bottom: 0px solid rgba(255, 255, 255, .2);
}

#teamWrapper.inverted #jobsHeader {
    border-bottom: 0px solid rgba(0, 0, 0, .2);
}

#teamJobs h3 {
    margin-bottom: 10px;
    display: none;
}

#jobsList a {
    font-family: 'freight-micro-pro';
    font-weight: 300;
    display: block;
    padding: 12px 0;
    font-size: 32px;
    border-bottom: 0px solid rgba(255, 255, 255, .2);
    /*background-image: url(img/link.png) center right no-repeat;*/
    background-size: 16px;
    -webkit-animation: 5s rotateColor linear infinite;
}

#teamWrapper.inverted #jobsHeader,
#teamWrapper.inverted #jobsList a {
    border-bottom: 0px solid rgba(0, 0, 0, .2);
}

html.no-mobile #jobsList a:hover {
    background: -webkit-linear-gradient(left, #F00 0%, #FF0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#work .project {
    font-family: 'freight-micro-pro';
    font-weight: 300;
    display: block;
    width: 46.78%;
    padding: 20px 2% 50px 2%;
    float: left;
    -webkit-transition: all 100ms;
    transition: all 100ms;
    font-size: 20px;
    line-height: 26px;
}

#work .projectImg {
    width: 99.3%;
    height: auto;
    background: transparent;
    margin-bottom: 0px;
    border-radius: 5px;
}

#work .project.first4 {
    padding: 20px 2% 50px 0%;
}

#work .project.last4 {
    padding: 20px 0 50px 2%;
}

html.no-mobile #work .project:hover {
    padding-top: 10px;
    padding-bottom: 20px;
    cursor: pointer;
}

html.no-mobile #work .project img:hover,
html.no-mobile #work .project:hover>img {
    border: 1px solid black;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

#projectPage {
    padding-top: 120px;
}

#projectMain {
    border: 0px solid rgba(0, 0, 0, .2);
    width: 86%;
    margin: 0 7%;
    background: #FFF;
}

#projectHeader {
    margin: 0;
    width: 86.2%;
    margin: 0 6.9%;
    padding: 30px 0 0 0;
    border-left: 1px solid transparent;
}

#projectHeader h1 {
    display: block;
    /*background: url(img/logoBlk.svg) no-repeat center;*/
    background-size: auto 100%;
    height: 60px;
    width: 200px;
    margin: auto;
}

#projectImage,
#projectImage img {
    width: 100%;
    background-position: center;
    background-size: auto 100%;
    padding-bottom: 56.25%;
    border-radius: 5px 5px 0px 0px;
}

#projectOverview {
    font-size: 26px;
    padding: 150px 20% 95px 20%;
    border-bottom: 0px solid rgba(0, 0, 0, .2);
}

#projectOverview p {
    font-family: 'freight-micro-pro';
    font-weight: 300;
}

#projectOverview h2 {
    font-size: 80px;
    font-family: 'freight-big-pro';
    margin-bottom: 25px;
    line-height: 80px;
    font-weight: 300;
}

#projectContent .module {
    border-bottom: 0px solid rgba(0, 0, 0, .2);
    overflow: hidden;
}

#projectContent .module:last-child {
    border-bottom: none;
}

.modLeft {
    float: left;
}

.modRight {
    float: right;
}

.modImage {
    width: 60%;
}

.modImage img {
    width: 100%;
    display: block;
}

.modText {
    width: 40%;
    text-align: center;
    font-size: 16px;
    font-family: 'freight-micro-pro';
    line-height: 22px;
    font-weight: 300;
}

.modText h3 {
    font-size: 24px;
    font-family: 'freight-micro-pro';
    margin-bottom: 10px;
    font-weight: 300;
    line-height: 120%;
}

.modRight .modParagraph {
    border-left: 0px solid rgba(0, 0, 0, .1);
    padding: 0 21% 0 9%;
}

.modLeft .modParagraph {
    border-right: 0px solid rgba(0, 0, 0, .1);
    padding: 0 9% 0 21%;
}

#projectMasonry {
    overflow: hidden;
    font-size: 16px;
    font-family: 'freight-micro-pro';
    border-top: 2px solid rgba(0, 0, 0, .2);
    font-weight: 300;
    margin-top: 30px;
}

#projectMasonry a {
    text-decoration: none;
    font-size: 18px;
    line-height: 28px;
}

#projectMasonry .column {
    float: left;
    width: 33.333%;
}

#projectMasonry .column.center {
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    margin: 0 -1px -1px -1px;
}

#projectMasonry .module {
    padding: 14% 20% 10% 20%;
    border-top: 1px solid rgba(0, 0, 0, .2);
    float: left;
    width: 60%;
}

#projectMasonry .module:first-child {
    border-top: none;
}

#projectMasonry .double {
    overflow: hidden;
    float: left;
    width: 100%;
    height: 100%;
}

#projectMasonry .double .module:first-child {
    border-top: 1px solid rgba(0, 0, 0, .2)
}

#projectMasonry .half {
    width: 30%;
    padding: 10%;
}

#projectMasonry .half.modLeft {
    border-right: 1px solid #CCC;
    margin-right: -1px;
}

#projectMasonry h4 {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-family: 'freight-sans-pro';
    font-weight: 600;
    letter-spacing: 1px;
}

#projectMasonry h3 {
    font-size: 24px;
    font-family: 'freight-micro-pro';
    padding-top: 0px;
    margin-bottom: 5px;
    font-weight: 300;
}

#projectMasonry p {
    margin-bottom: 20px;
    font-size: 16px;
    margin: 0 auto 20px auto;
}

#projectMasonry .modDivider {
    width: 20px;
    margin: auto;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin-bottom: 10px;
}

#projectFooter {
    border-top: 0px none;
    margin-top: 40px;
}

#projectFooterInner {
    width: 86%;
    margin: 0 7%;
}

#projectRelated {
    padding-top: 40px;
}

#projectRelated h2 {
    font-size: 32px;
    font-weight: normal;
    font-family: 'freight-micro-pro';
}

#projectFooter .projectBack {
    display: block;
    width: 135px;
    height: 30px;
    margin: auto;
    margin-bottom: 40px;
    text-indent: -9999em;
    /*background: url(img/projectBack.png);*/
    -webkit-animation: 5s rotateColor linear infinite;
    background-size: 100%;
}

html.no-mobile #projectFooter .projectBack:hover {
    /*background-image: url(img/projectBackGradient.png);*/
}

#loadingDiv {
    width: 100%;
    height: 100%;
    background: url(assets/spinner.gif) no-repeat center rgba(255, 255, 255, .8);
    position: fixed;
    z-index: 1500;
    background-size: 50px;
    display: none;
}

@media(max-width:1750px) {
	
	#projectPage{padding-top:119px;}
	
	#workHeader {width: 88.2%;margin: 0 5.9%;}
	#aboutHeader {width: 88.2%;margin: 0 5.9%;}
	#projectHeader {width: 88.2%;margin: 0 5.9%;}
	#projectFooterInner {width: 88.2%;margin: 0 5.9%;}
	#about { width:88%; margin:0 6%; }
	#work { width:88%; padding:0 6%; }
	#projectMain { width: 88%; margin: 0 6%; border-radius: 5px;}
	
}

@media(max-width:1550px){
	#projectPage{padding-top:119px;}
	
	#workHeader {width: 86.2%;margin: 0 6.9%;}
	#aboutHeader {width: 86.2%;margin: 0 6.9%;}
	#projectHeader {width: 86.2%;margin: 0 6.9%;}
	#projectFooterInner {width: 86.2%;margin: 0 6.9%;}
	#about { width:86%; margin:0 7%; }
	#work { width:86%; padding:0 7%; }
	#projectMain { width: 86%; margin: 0 7%; }
}

@media(max-width:1250px){
	#work .project {font-size: 20px;}
	#projectPage{padding-top:119px;}
	
	#projectOverview {padding: 90px 12.5% 75px 12.5%;}
	#workHeader {width: 84.2%;margin: 0 7.9%;}
	#aboutHeader {width: 84.2%;margin: 0 7.9%;}
	#projectHeader {width: 84.2%;margin: 0 7.9%;}
	#projectFooterInner {width: 84.2%;margin: 0 7.9%;}
	#about { width:84%; margin:0 8%; }
	#work { width:84%; padding:0 8%; }
	#projectMain { width: 84%; margin: 0 8%; }
}
	
@media(max-width:1024px){
	
	#projectPage{padding-top:105px;}
		
	#about, #work {width:76%;margin:0 12%;}
	#work{padding:0 12%;margin:0;}
	#projectPage{padding-top:120px;}
	/*#projectMain { width: 76%; margin: 0 12%; }*/
	.visible1024{display:block;}
	.hidden1024{display:none;}
	
	#work .project{width:31%;padding-left:1.75%;padding-right:1.75%;}
	html.no-mobile #work .project.first3, #work .project.first3:hover{padding-left:0;}
	html.no-mobile #work .project.last3, #work .project.last3:hover{padding-right:0;}
	.teamBio{padding:40px 60px 60px 60px;}
	
}



@media(min-width:769px){
	

	#projectPage{padding-top:120px;}

	#workTable .lastrow4_3 .row_half:first-child{margin-left:12.75%;}
	#workTable .lastrow4_3 .row_half:last-child{width:25%;}
	#workTable .lastrow4_3 .row_half:last-child .project{width:96%;padding-left:4%}
	.lastrow4_2 .row_half:first-child{margin-left:25.5%;}
	.lastrow4_1 .row_half:first-child{margin-left:38.5%;}
	
	#workTable .lastrow3_2 .project:first-child{margin-left:17.5%;}
	#workTable .lastrow3_1 .project:first-child{margin-left:34.5%;}
}

.dinyFooter{border-top:0px none;padding:0;margin-top:130px;clear:both;}
.dinyFooter img{display:none;}
#about .dinyFooter{border-top:0px none;}
#about .dinyFooter img{display:none;}
#work .dinyFooter {margin-top:55px;}

.linkWrapper{width:160px;margin:auto;background:#FFF;position:relative;top:-15px;}


.tabular .tabCol{width:24%;padding:1%;float:left;text-align:center; padding: 0 2% 0 2%; margin-top:10px;}
.tabular .tabCol p{font-size: 18px; margin-bottom:10px;}
.tabular .tabCol .services-header {font-size: 26px; font-family:'freight-micro-pro'; margin-bottom: 15px;font-weight:300;}
.tabular .tabLeft{text-align:right; border-right: none;width: 32%;}
.tabular .tabRight{text-align:left; border-left: none;width: 32%;}

.invisibleMobile{display:inherit;}
.visibleMobile{display:none;}

/*.soundcloudLink{display:block;width:37px;height:21px;margin:auto;background:url(img/soundcloud.png);*/
	/*margin-top:20px;text-indent:-9999em;}*/
	

@media(min-width:1024px){
}

@media(max-width:1023px){
	
	#work .project {font-size: 18px; line-height:22px;}
			
	#projectOverview p {font-size: 20px;}
	
	#projectOverview h2 {line-height: 55px;}
	
	#about h1, #workHeader h1, #projectPage h1{height:45px;}
	#aboutHeader {padding: 35px 0;}
	
	.teamName {font-size: 16px;}
	
	.tabular .tabCol .services-header {font-size: 24px;}
	
	#about h3 {font-size: 30px;}
	
	p {font-size: 16px;}
	
	.tabular .tabCol p {font-size: 16px;}
	
	#about h2 {margin-top: 170px;font-size: 60px;line-height: 70px;padding: 0 5% 0 5%;}
	
	.featured-clients {padding-bottom: 20px;}
	
	.tabular .tabRight {border-left: 0px none;}
	.tabular .tabLeft {border-right: 0px none;}
	
	.tabular .tabCol {width: 100%;padding: 2%;}
	
	#aboutTeam {padding: 0 5% 10px 5%;}
	
	#aboutServices {margin: 70px 0 70px 0;padding:60px 5% 75px 5%;}
		
	.visibleIpad{display:block;}
	.hiddenIpad, .visibleDesktop {display:none;}
	
	#about, #work{width:70%;margin:0 15%;padding:0px;}
	#aboutHeader, #workHeader{width:70%;margin-left:15%;margin-right:15%;}
		
	.teamPopup{width:66%;left:17%;top:15%;height:70%;}
	#teamClose{left:85%;top:17%;}
	
	.teamMember {padding-bottom: 5px;}
	
	#work h1{width:70%;margin:0 15%;}
	#work .row_half{width:100%;}
	#work .project{width: 30.5%;padding:10px 2% 40px 2%;}
	
	#work .project.first2{padding:30px 2% 30px 0%;}
	#work .project.last2{padding:30px 0 30px 2%;}
	#workTable {margin-top: 135px;}
	
	html.no-mobile #work .project:hover{padding:10px 2% 5px 2%;}
	
	#workTable .lastrow4_1 .project:first-child, #workTable .lastrow4_3 .row_half:last-child .project:first-child
		{margin-left:26%;}
  
	#projectMain{margin:0 12%;width:76%}
	#projectHeader{width:76%;margin-left:12%;}
	#projectImage{padding-bottom:56.625%;}
	#projectOverview{padding:90px 12.5% 50px 12.5%;}
	#projectOverview h2{font-size:55px;margin-bottom:15px;}
	
	.modImage{width:100%;}
	.modText{width:80%;text-align:center;padding:0 0 50px 0;margin:0 10%;border-bottom:0px none;}
	.modText h3{font-size:24px;font-family:'freight-micro-pro';margin-bottom:10px;}
	.modRight .modParagraph{border-left:none;padding:0;}
	.modLeft .modParagraph{border-right:none;padding:0;}
	
	.tabular .tabCol{width:96%;padding:2%;float:left;}
	.tabular .tabLeft, .tabular .tabRight{text-align:center;}
	.tabHalfLeft, .tabHalfRight{width:48%;padding:1%;float:left;}
	.tabHalfLeft{text-align:right;}
	.tabHalfRight{text-align:left;}
	.tabHalfLeft, .tabHalfRight {width: 46%;padding: 0 2% 0 2%;}
	
	
	#projectMasonry .column{float:left;width:50%;}
	#projectMasonry .column:first-child{border-right:1px solid rgba(0,0,0,.2);margin-right:-1px;}
	#projectMasonry .column.center{display:none;}
	
	.teamMember{float:left;width:30%;margin:1.6666%;}
}

@media(max-width:1022px){
	#projectPage{padding-top:105px;}
	
	#workHeader {width: 80.2%;margin: 0 9.9%;}
	#aboutHeader {width: 80.2%;margin: 0 9.9%;}
	#projectHeader {width: 80.2%;margin: 0 9.9%;}
	#projectFooterInner {width: 80.2%;margin: 0 9.9%;}
	#about { width:80%; margin:0 10%; }
	#work { width:80%; padding:0 10%; margin: 0; }
	#projectMain { width: 80%; margin: 0 10%; }
	.visibleIpad, .hiddenDesktop, .visibleMobile, .visible1024 {display: block; margin: 0;}
	#aboutClients img {margin: 0 5% 0 5%;}
	#aboutLinks {display: none;}
	#workLinks {display: none;}
	#projectLinks {display: none;}
	.dinyFooter {margin-top: 100px;}

}
@media(max-width:900px){
	#projectPage{padding-top:105px;}
	
	#workHeader {width: 78.2%;margin: 0 10.9%;}
	#aboutHeader {width: 78.2%;margin: 0 10.9%;}
	#projectHeader {width: 78.2%;margin: 0 10.9%;}
	#projectFooterInner {width: 78.2%;margin: 0 10.9%;}
	#about { width:78%; margin:0 11%; }
	#work { width:78%; padding:0 11%; }
	#projectMain { width: 78%; margin: 0 11%; }
	#aboutLinks {display: none;}
	#workLinks {display: none;}
	#projectLinks {display: none;}
	.dinyFooter {margin-top: 90px;}

}

@media(max-width:800px){
	
	#work .project {font-size: 20px;line-height: 24px;}
	
	#projectPage{padding-top:105px;}
	
	#workHeader {width: 76.2%;margin: 0 11.9%;}
	#aboutHeader {width: 76.2%;margin: 0 11.9%;}
	#projectHeader {width: 76.2%;margin: 0 11.9%;padding-bottom:30px;}
	#projectFooterInner {width: 76.2%;margin: 0 11.9%;}
	#about { width:76%; margin:0 12%; }
	#work { width:76%; padding:0 12%; }
	#projectMain { width: 76%; margin: 0 12%; }
	#work .project {font-size: 20px;line-height: 32px;}
	#aboutLinks {display: none;}
	#workLinks {display: none;}
	#projectLinks {display: none;}
	.dinyFooter {margin-top: 80px;}
}

@media(max-width:768px){
	
	#work .project {font-size: 18px;line-height: 22px;}
	
  .hidden1024{display:block;}
  .visible1024{display:none;}
  
  #work .project, html.no-mobile #work .project:hover,#work .project.first2, #work .project.last2
	{width: 47.7%;padding:10px 2% 45px 2%;}
  #work .project.first2{padding-left:0;}
  #work .project.last2{padding-right:0;}
	#aboutLinks {display: none;}
	#workLinks {display: none;}
	#projectLinks {display: none;}
	.dinyFooter {margin-top: 70px;}
}

@media(max-width:736px){
    .desktop {
        display: none; 
    }
    .mobile {
        display: block; 
        text-align: right;
        /*max-width: 100px;*/
    }
    .description{
        max-width: 100%;
        font-size: 15px;
        line-height: 23px;
    }

    .topRight{
        margin-top: 15px;
        margin-right: 15px;
        margin-left: 24px;
        margin-left: 25px;
    }

    .bottomLeft{
        padding-left: 0px;
        /*margin-left: -10px;*/
        bottom: 20px;
        left: 25px;
    }
    .bottomRight{
        bottom: 20px;
        right: 24px;
    }
    .header {
        height: 120px;
    }
}

@media(max-width:569px){
    .logo {
        top: 23px;
        left: 25px;
        background-image: url("assets/logo-sc-mobile.png");
    }
    #works .container {
        margin: 0 25px;
    }
    #works .item,
    #works .footer-col {
        text-align: left;
        width: 100%;
    }
    #works .footer-col {
        display: block;
    }
    #works .item:nth-child(2n),
    #works .footer-col:nth-child(2n) {
        margin-left: 0;
    }
    #works .footer-col:nth-child(2n):before {
        display: none;
    }
    #works .footer {
        display: block;
        text-align: left;
        padding-top: 100px;
    }
}

@media(max-width:414px){
    .description{
        font-size: 15px;
        line-height: 23px;
        max-width: 350px;   
        /*margin-left: 20px;*/
    }

    .topRight{
        margin-top: 60px;
        margin-right: 20px;
        left: 0;
        right: 0;
        /*padding-right: 5px;*/
    }

    .desktop {
        display: block; 
    }
    .mobile {
        display: none; 
        /*text-align: right;*/
        /*max-width: 100px;*/
    }
    .header {
        height: 130px;
    }

}

@media(max-width:320px){
    .desktop {
        display: none; 
    }
    .mobile {
        display: block; 
        text-align: left;
        margin-right: 15px;
        /*max-width: 100px;*/
    }
    
    .topRight{
        margin-top: 60px;
        margin-right: 9px;
        left: 0;
        right: 0;
        /*padding-right: 5px;*/
    }



}