html {
    -webkit-font-smoothing: antialiased;
}
body {
    background-color: #fff;
}
/* Animating Link Underlines from http://tobiasahlin.com/blog/css-trick-animating-link-underlines/ */

.nav-animate,
.link-animate,
.projects * .link-title {
    position: relative;
    text-decoration: none;
}
.link-animate:hover,
.projects * .link-title:hover {
    /*    color: #23527c;*/
    
    color: #2E3192;
    /* hover: #23527c  std: #2E3192 */
    
    ;
}
@media (min-width: 705px) {
    .link-animate:after,
    .projects * .link-title:after {
        position: absolute;
        height: 1px;
        margin: 0 auto;
        content: "";
        left: 0;
        right: 0;
        width: 100%;
        color: #000;
        background-color: rgba(35, 82, 124, 0.25);
        left: 0;
        top: 40px;
        bottom: 0px;
    }
    .link-animate:before,
    .projects * .link-title:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        top: 40px;
        left: 0;
        z-index: 1;
        background-color: rgba(35, 82, 124, 0.95);
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }
    .projects * .link-title:before,
    .projects * .link-title:after {
        top: 32px;
    }
    .link-animate:hover:before,
    .projects * .link-title:hover:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    .no-margin-left {
        margin-left: 0px;
    }
}
.nav-animate:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    top: 51px;
    left: 0;
    z-index: 1;
    background-color: #F78500;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.nav-animate:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
nav a:hover {
    color: #F7931E;
}
.img-animate {
    -webkit-transition: transform 0.35s ease-in-out;
    transition: transform 0.35s ease-in-out;
}
.img-animate:hover {
    transform: scale(0.98);
}
.img-animate-down {
    transform: translateY(0px);
    -webkit-transition: transform 0.35s ease-in-out;
    transition: transform 0.35s ease-in-out;
}
.img-animate-down:hover {
    transform: translateY(10px);
}
/* TypeKit Font Load Fade from https://blog.ed.gs/2012/10/16/fade-in-typekit-fonts/ */

.wf-loading {
    opacity: 0;
    visibility: hidden;
}
.ie.wf-loading {
    visibility: hidden;
}
.ie.wf-active {
    visibility: visible;
}
.wf-active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.64s ease-in-out;
    -moz-transition: opacity 0.64s ease-in-out;
    transition: opacity 0.64s ease-in-out;
}
.lazy {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 0.55s ease-in-out;
    -moz-transition: all 0.55s ease-in-out;
    transition: all 0.55s ease-in-out;
}
.animate-in,
.animate-in-delay,
.animate-in-delay-group {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
    -webkit-transition: all 0.55s ease-in-out;
    -moz-transition: all 0.55s ease-in-out;
    transition: all 0.55s ease-in-out;
}
.animate-in-left {
    -webkit-transform: translate(20px, 0px);
    transform: translate(20px, 0px);
    opacity: 0;
}
.animate-in-right {
    -webkit-transform: translate(-20px, 0px);
    transform: translate(-20px, 0px);
    opacity: 0;
}
.animated-in {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
}
.img-logo {
    margin: 0.7em;
    width: 60px;
}
.col-sm-offset-pt5 {
    margin-left: 4%;
}
.col-sm-push-pt5 {
    left: 4.15%;
}
@media (max-width: 767px) {
    .col-sm-offset-pt5 {
        margin-left: 0%;
    }
    .sm-center {
        text-align: center;
        margin-top: 2em;
    }
}
nav a {
    font-family: "filson-soft", sans-serif;
    text-transform: lowercase;
    font-weight: 700;
    font-size: 1.75em;
    color: #F7931E;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
nav a:hover {
    text-decoration: none;
}
nav li {
    display: inline-block;
    list-style-type: none;
    padding: 1em 1em 0 1em;
}
nav {
    padding-right: 0;
    padding-top: 0;
    margin-bottom: 0;
}
nav ul {
    margin-bottom: 0;
}
label {
    font-family: "ff-meta-serif-web-pro", serif;
    color: #808080;
    font-weight: normal;
}
input[type=submit] {
    font-family: "filson-soft", sans-serif;
    color: #fff;
    font-weight: 500;
    background-color: #F7931E;
    border: 0;
    padding: 0.25em 0.75em;
    text-transform: lowercase;
    font-size: 1.25em;
    margin-right: 0.5em;
    -webkit-transition: background-color 0.25s ease-out;
    transition: background-color 0.25s ease-out;
}
input[type=submit]:hover {
    background-color: #2E3192;
}
input[type=reset] {
    font-family: "filson-soft", sans-serif;
    color: #fff;
    font-weight: 500;
    background-color: #CCCCCC;
    border: 0;
    padding: 0.25em 0.75em;
    text-transform: lowercase;
    font-size: 1.25em;
    -webkit-transition: background-color 0.25s ease-out;
    transition: background-color 0.25s ease-out;
}
input[type=reset]:hover {
    background-color: #2E3192;
}
h1,
h2,
h3 {
    font-family: "brandon-grotesque", serif;
    text-transform: uppercase;
}
h4 {
    font-family: "ff-meta-serif-web-pro", serif;
    text-transform: uppercase;
    color: #808080;
    font-size: 1.17em;
}
ul {
    font-family: "ff-meta-serif-web-pro", serif;
    font-weight: 400;
    color: #808080;
    margin-bottom: 2em;
}
ol {
    font-family: "ff-meta-serif-web-pro", serif;
    font-weight: 400;
    color: #808080;
    margin-bottom: 2em;
}
blockquote:before {
    content: url('../img/icon-quote.png');
    margin-right: 0.15em;
}
blockquote {
    font-family: "ff-meta-serif-web-pro", serif;
    font-size: 1.5em;
    color: #000;
    border-left: 4px solid #808080;
    padding-left: 1em;
    width: 85%;
    margin: 2em auto;
}
blockquote:after {
    /*  content: url('../img/icon-quote-end.png');
    margin-left: 0.25em;*/
}
twitterwidget {
    margin: 0 auto;
}
#twitter-widget-0 {
    margin: 0 auto;
}
.form-control {
    font-family: "ff-meta-serif-web-pro", serif;
    margin-bottom: 1.45em;
    border-radius: 0;
}
.top-nav {
    background: rgba(255, 255, 255, 0.90);
    /*    background: rgba(255,244,232,0.95);*/
    
    width: 90%;
    margin-bottom: 2.5em;
    border-bottom: 1px solid rgba(247, 147, 30, 0.25);
    margin: auto;
}
.nav-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}
.container {
    margin-top: 140px;
}
.project-view {
    max-width: 960px;
}
@media (max-width: 705px) {
    .top-nav {
        width: 100%;
        border: 0;
    }
    .container {
        margin-top: 0px;
    }
}
.top-nav-scrolled {
    position: fixed;
    top: 0;
}
.footer {
    border-color: #F7931E;
}
.bottom-footer {
    background: #F7931E;
    overflow: auto;
    margin-top: 3.5em;
    padding: 0 1em 0 1em;
}
.footer-content {
    width: 90%;
    margin: auto;
}
.footer-nav a {
    font-size: 1.0em;
    color: #fff;
}
.footer-nav a:hover {
    color: black;
}
.footer-nav {
    margin-top: 0;
    width: 90%;
    margin: auto;
}
.footer-nav ul {
    padding: 0;
    margin: 0;
    display: inline;
}
.footer-nav li {
    padding-left: 0
}
.credits {
    font-family: "filson-soft", sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1em;
}
.credits a {
    color: #fff;
}
p {
    font-family: "ff-meta-serif-web-pro", serif;
    color: #3B3B3B;
    font-weight: 400;
    font-size: 1.125em;
}
p.cta {
    margin-top: 0;
}
.feature-wrap {
    background: #F5F5F5;
    padding-bottom: 2em;
}
.feature-start {
    padding-top: 3em;
    background: #F5F5F5;
}
.sub-title {
    font-family: "filson-soft", sans-serif;
    color: #808080;
    font-size: 1.55em;
    font-weight: 700;
}
.sub-title2 {
    font-family: "filson-soft", sans-serif;
    color: #808080;
    font-size: 1.25em;
    font-weight: 700;
    margin-bottom: 0px;
}
.main-title {
    background-color: #F7931E;
    font-family: "brandon-grotesque", sans-serif;
    color: #fff;
    font-size: 3.75em;
    padding-left: 0.35em;
    position: relative;
    margin-bottom: 4.25rem;
    font-weight: 900;
    text-transform: uppercase;
}
.main-img {
    position: relative;
}
.main-title-alt {
    background: none;
    padding: 0;
    margin: 0;
    color: #F7931E;
}
.link-title {
    font-family: "filson-soft", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #2E3192;
    position: absolute;
    left: 55%;
    top: 2.75em;
    -webkit-transition: color 0.35s ease-in-out;
    transition: color 0.35s ease-in-out;
}
.link-title:hover {
    text-decoration: none;
}
.link-title-alt {
    position: inherit;
    left: 0;
    top: 0;
}
.link-view-work {
    top: -20px;
}
.link-title-sm {
    position: inherit;
    left: 0;
    top: 0;
    font-size: 2.0rem;
}
.img-title {
    position: absolute;
    left: 55%;
    top: -10.25em;
    max-width: 373px;
    max-height: auto;
}
.img-contact-max {
    max-width: 430px;
    max-height: auto;
}
.img-social {
    margin: 0 1.15em 0 1.15em;
    opacity: 0.5;
    -webkit-transition: opacity 0.25s ease-out;
    transition: opacity 0.25s ease-out;
}
.img-social:hover {
    opacity: 1;
}
.img-icon {
    display: block;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
}
.img-area {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center;
    overflow: hidden;
}
.img-area-nocenter {
    text-align: none;
    margin-top: 2em;
    margin-bottom: 2em;
}
.img-area iframe {
    width: 70%;
    max-width: 700px;
    border: 0px;
    overflow: hidden;
}
.img-outline {
    border: 1px solid #808080;
}
.gif-90 {
    width: 90%;
    height: auto;
}
.img-100 {
    width: 100%;
    height: auto;
}
.img-90 img {
    width: 90%;
    height: auto;
}
.img-80 img {
    width: 80%;
    height: auto;
    max-width: 800px;
}
.img-70 img {
    width: 70%;
    height: auto;
    max-width: 700px;
}
.img-60 img {
    width: 60%;
    height: auto;
    max-width: 600px;
}
.img-40 img {
    width: 40%;
    height: auto;
    max-width: 400px;
}
.image-40 {
    width: 40%;
    height: auto;
}
.img-30 img {
    width: 30%;
    height: auto;
}
.img-20 img {
    width: 20%;
    height: auto;
}
.text-hook {
    font-family: "ff-meta-serif-web-pro", serif;
    font-size: 1.65em;
    width: 54%;
    margin-top: 0;
    color: #333;
}
.text-hook-alt {
    width: 100%;
}
.text-center {
    text-align: center;
}
.vertical-center {
    display: flex;
    align-items: center;
}
.vertical-bottom {
    display: flex;
    align-items: flex-end;
}
@media (max-width: 991px) {
    .row.vertical-center {
        display: block;
    }
}
.caption {
    font-family: "ff-meta-serif-web-pro", serif;
    font-style: italic;
    font-size: 0.9em;
    color: #808080;
    margin-top: 0.5rem;
    margin-bottom: 0.85rem;
}
.text-hook strong {
    box-shadow: inset 0 -0.65em 0 rgba(247, 147, 30, 0.5);
}
.highlight {
    box-shadow: inset 0 -0.65em 0 rgba(247, 147, 30, 0.5);
}
.projects {
    margin-top: 2em;
    margin-bottom: 0em;
    overflow: hidden;
}
.project {
    width: 95%;
    margin-bottom: 2em;
}
.project-thumb {
    margin-bottom: 1.5em;
}
.project-thumb p {
    margin-top: 0;
}
.project-hero {
    margin-bottom: 1em;
}
.video-hero {
    margin-bottom: 0em;
    padding-bottom: 56%;
    position: relative;
}
.video-inline {
    margin-bottom: 0em;
    padding-bottom: 44.95%;
    padding-left: 10%;
    width: 80%;
    position: relative;
}
/* Responsive iFrame Video Fix */

.video-hero iframe,
.video-inline iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0px;
    overflow: hidden;
}
.summary p {
    padding: 0;
    padding-bottom: 1em;
    margin: 0;
}
.summary p.first {
    margin: 0;
    padding: 0;
}
.project-end {
    margin-top: 1em;
}
.side-projects {
    margin-bottom: 1em;
}
.vertical-space-less {
    margin-top: 2em;
    margin-bottom: 1em;
}
.vertical-space {
    margin-top: 4em;
    margin-bottom: 2em;
}
.vertical-space-more {
    margin-top: 6em;
    margin-bottom: 4em;
}
.problem-spacer {
    margin-top: 10em;
    margin-bottom: 10em;
}
.first {
    margin-top: 0;
    font-weight: 700;
}
.resume {
    margin-top: 3em;
    margin-bottom: 2em;
    overflow: auto;
}
.resume ul {
    padding: 0;
    list-style-type: none;
}
.contact {
    margin-bottom: 2rem;
}
.hr-contact {
    margin-top: 0px;
}
.social {
    margin-bottom: 3em;
}
.twitter {
    color: #33CCFF;
}
.linkedin {
    color: #0077B5;
}
.facebook {
    color: #3B5998;
}
.contact-form {
    margin-top: 2em;
    margin-bottom: 2em;
}
.mobile-only {
    display: none;
}
@media (max-width: 705px) {
    .img-title {
        position: inherit;
    }
    .link-title {
        position: inherit;
        left: 0%;
        top: 0;
    }
    .text-hook {
        margin-top: 1.5em;
        width: 100%;
        max-width: none;
    }
    .desktop-only {
        display: none;
    }
    .mobile-only {
        display: block;
    }
    nav {
        padding-right: 0em;
        padding-top: 0em;
        margin-bottom: 0rem;
    }
    nav a {
        color: #fff;
    }
    nav.no-mobile a {
        color: #F7931E;
    }
    nav li {
        display: block;
    }
    .footer-nav li {
        display: inline-block;
    }
    .side-bar {
        margin-top: 10vh;
        margin-left: 4em;
    }
    .side-bar .cta {
        color: #fff;
        width: 60%;
    }
    .img-logo {
        padding: 10vh 0 3vh 1.5em;
    }
    .img-area iframe {
        width: 80%;
    }
    .footer-content {
        margin-top: 0;
        text-align: center;
    }
    .footer-content .pull-right {
        float: none !important;
    }
}
/* No Javascript Burger Nav */

.burger {
    display: block;
    margin-top: 2em;
    border: 0;
    background: none;
    position: fixed;
    z-index: 999;
    outline: 0;
    padding: 0;
    cursor: pointer;
    border-bottom: 4px solid currentColor;
    width: 28px;
    transition: border-bottom 1s ease-in-out;
    -webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.burger:before {
    content: "";
    display: block;
    border-bottom: 4px solid currentColor;
    width: 100%;
    margin-bottom: 5px;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
    content: "";
    display: block;
    border-bottom: 4px solid currentColor;
    width: 100%;
    margin-bottom: 5px;
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check {
    display: none;
}
.menu {
    position: fixed;
    z-index: 0;
    left: 50px;
    top: 28px;
    font-family: "filson-soft", sans-serif;
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
}
.burger-check:checked~ .burger {
    border-bottom: 4px solid transparent;
    transition: border-bottom 0.8s ease-in-out;
    -webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked~ .burger .menu {
    color: #F7931E;
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
}
.burger-check:checked~ .burger:before {
    content: "";
    transform: rotate(-405deg) translateY(1px) translateX(-3px);
    -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked~ .burger:after {
    content: "";
    transform: rotate(405deg) translateY(-4px) translateX(-5px);
    -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
    transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-nav {
    overflow: hidden;
    max-height: 0;
    margin-bottom: 3em;
    height: 105vh;
    width: 105vw;
    position: fixed;
    z-index: 998;
    background-color: #F7931E;
    margin-left: -2em;
    padding-left: 2em;
    -webkit-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
.burger-check:checked~ .burger-nav {
    max-height: 105vh;
    -webkit-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
.link-min-deco,
.link-min-deco:hover,
.link-min-deco:active,
.link-min-deco:visited {
    color: #808080;
    text-decoration: none;
    border-bottom: 1px dotted #808080;
}
.glyphicon {
    top: 0px;
    font-size: 14px;
    -webkit-transition: transform 0.35s ease-in-out;
    transition: transform 0.35s ease-in-out;
}
.material-icons {
    position: relative;
    top: 7px;
    -webkit-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}
.material-icons-small {
    position: relative;
    top: 0px;
    font-size: 14px;
}
.link-animate:hover> .material-icons {
    -webkit-transform: translate(0.25em, 0);
    transform: translate(0.25em, 0);
}
.link-min-deco:hover> .glyphicon {
    -webkit-transform: translate(0, -0.25em);
    transform: translate(0, -0.25em);
}
.link-min-deco:hover> .glyphicon-arrow-up {
    -webkit-transform: translate(0, -0.25em);
    transform: translate(0, -0.25em);
}
.link-animate:hover> .glyphicon-new-window {
    -webkit-transform: translate(0.25em, -0.25em);
    transform: translate(0.25em, -0.25em);
}
.icons-big {
    font-size: 29px;
}
.company-desc {
    -moz-box-shadow: 0px 3px 7px 4px #f3f3f3;
    -webkit-box-shadow: 0px 3px 7px 4px #f3f3f3;
    box-shadow: 0px 3px 7px 4px #f3f3f3;
}
.no-margin-top {
    margin-top: 0px;
}
.no-margin-bottom {
    margin-bottom: 0.25em;
}
#processbook {
    display: none;
}
.play {} figure {
    position: relative;
    height: 450px;
}
.gifs {
    width: 30%;
    margin: auto;
    min-width: 279px;
}
figure:before,
figure:after {
    position: absolute;
}
figure:after {
    content: 'gif';
    position: relative;
    display: inline-block;
    width: 40px;
    text-align: center;
    top: -435px;
    left: 95px;
    right: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 5px;
    border-radius: 3px;
    color: #fff;
    background-color: rgba(170, 178, 189, 0.5);
    text-transform: uppercase;
}
figure.play:before {
    display: none;
}
figure.play:after {
    color: #fff;
    background-color: #8CC152;
}
#pb-activate {
    cursor: hand;
    cursor: pointer;
}

#player .vp-player-layout .vp-player-inner .controls-wrapper {
    display: none !important;
}