:root {
    --white: rgb(255, 255, 255);
    --black: rgb(35, 31, 32);
    --gray: rgb(88, 89, 91);
    --light-gray: rgb(190, 190, 190);
    --red: rgb(237, 33, 38);
    --red-orange: rgb(247, 92, 30);
    --orange: rgb(247, 147, 30);
    --gold: rgb(255, 199, 0);
    --yellow: rgb(255, 240, 0);
    --light-blue: rgb(63, 169, 245);
    --blue: rgb(0, 113, 188);
    --dark-blue: rgb(8, 31, 130);

    --ease-in-out: cubic-bezier(0.620, 0.005, 0.310, 1.000);
}

body {
    font: calc(21px + 0.9vw) 'Raleway', sans-serif;
    color: var(--black);
}

h1 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 300;
    color: var(--red);
    line-height: 1.1;
}

h2 {
    margin: 0 0 0.25em;
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1;
}

h3 {
    margin-bottom: 0;
    font-size: 1em;
    font-weight: 300;
    color: var(--red);
}

h5 {
    margin: 0.6em 0;
    font-size: 0.8em;
    font-weight: 400;
}

h6 {
    margin: 0.6em 0;
    font-size: 0.72em;
    font-weight: 400;
}

a {
    font-weight: 300;
    color: var(--red);
    text-decoration: none;
}

em {
    font-weight: 800;
    font-style: normal;
}

img {
    width: 100%;
}

ul {
    margin-top: 0;
    padding-left: 0;
    list-style-position: inside;
}

.mt-0 {
    margin-top: 0;
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.red {
    color: var(--red);
}

.red-orange {
    color: var(--red-orange);
}

.orange {
    color: var(--orange);
}

.gold {
    color: var(--gold);
}

.yellow {
    color: var(--yellow);
}

.light-blue {
    color: var(--light-blue);
}

.blue {
    color: var(--blue);
}

.dark-blue {
    color: var(--dark-blue);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-light-gray {
    background-color: var(--light-gray);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

header {
    box-sizing: border-box;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1em 2em 0;
    z-index: 1;
    background-color: var(--white);
    transition: padding-top 0.2s var(--ease-in-out),
         box-shadow 0.2s var(--ease-in-out);
}

header.sm {
    padding-top: 0;
    box-shadow: 0 0 0.75em rgba(0, 0, 0, 0.3);
}

.header-spacer {
    height: 4.2em;
}

.logo {
    max-width: 9em;
    padding-bottom: 0.5em;
    transition: padding-bottom 0.2s var(--ease-in-out);
}

header.sm .logo {
    padding-bottom: 0;
}

.logo img {
    display: block;
}

nav {
    display: flex;
    font-size: 0.4em;
}

@media (min-width: 981px) {
    nav {
        height: auto !important;
    }
}

nav a span {
    position: relative;
}

nav .parent {
    padding: 3.5em 2em;
    transition: padding 0.2s var(--ease-in-out);
}

header.sm nav .parent {
    padding: 2.5em 2em;
}

nav .parent,
nav .parent > a {
    color: var(--black);
    font-weight: 500;
    letter-spacing: 0.08em;
}

nav .parent.active>span::after,
nav .parent.active>a>span::after {
    content: '';
    position: absolute;
    bottom: -0.25em;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--red);
}

nav .parent:hover,
nav .parent > a:hover,
nav .parent.active,
nav .parent.active > a {
    color: var(--red);
}

nav .emphasize {
    color: var(--red);
    font-weight: 800;
}

nav img {
    position: relative;
    top: -0.1em;
    height: 0.45em;
    width: auto;
    margin-left: 0.3em;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform 0.2s var(--ease-in-out);
}

nav .parent:hover img {
    transform: rotate(180deg);
}

.subpages {
    display: none;
    position: absolute;
    top: 4em;
    left: 0;
    width: 100%;
    color: rgb(0, 0, 0);
    font-size: 2.3em;
    letter-spacing: initial;
    transition: top 0.2s var(--ease-in-out);
}

header.sm .subpages {
    top: 2.65em;
}

.tagline {
    width: 24%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--blue);
    text-align: center;
}

.tagline p:not(.smaller) {
    margin-bottom: 0;
    color: var(--white);
    font-weight: 300;
}

.smaller {
    margin: 0.6em 0;
    font-size: 0.6em;
    font-weight: 400;
    line-height: 1.5;
}

.subpages .links div {
    margin-right: 2em;
}

.subpages .links div:last-child {
    margin-right: 0;
}

.subpages .links p {
    font-size: 0.45em;
    color: rgb(0, 0, 0);
    line-height: 1.7;
}

.subpages .links p {
    margin: 0;
}

.subpages .links a {
    font-weight: 500;
}

.subpages .links a:hover {
    color: var(--white);
}

section {
    padding-top: 1.6em;
    padding-bottom: 1.6em;
}

.jumbotron {
    position: relative;
    padding: 0 0 1em;
    margin-top: 0.5em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.scale {
    display: block;
    opacity: 0;
    width: 100%;
}

.menu-icon,
.only-mobile {
    display: none;
}

.jumbotron .scale {
    max-width: 25em;
}

.circles {
    position: absolute;
    bottom: 0.5em;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.circle {
    position: relative;
    margin: 0.25em;
    width: 0.4em;
    height: 0.4em;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--gray);
    opacity: 0.2;
}

.square-link .scale {
    opacity: 1;
}

.jumbo-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.jumbo-img>img {
    max-width: 11em;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s var(--ease-in-out);
}

.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 11em;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s var(--ease-in-out);
}

.bubbles::after {
    content: '';
    position: absolute;
    top: -2em;
    left: 1em;
    width: 40%;
    height: 90%;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#000000", GradientType=1);
    transition: 0s top 0.5s, 0s left 0.5s, 0s transform 0.5s;
    transform: rotate(-40deg);
}

.bubbles img {
    width: 41%;
    position: absolute;
    left: -0.1em;
    top: -1.4em;
}

.jumbo-img p {
    position: relative;
    opacity: 0;
    margin: 0.5em 0;
    font-weight: 300;
    transition: opacity 0.75s var(--ease-in-out);
}

.jumbo-img.active>img,
.jumbo-img.active .bubbles,
.jumbo-img.active p {
    opacity: 1;
}

.jumbo-img.active .bubbles::after {
    transition: 2.5s top 0.75s, 2.5s left 0.75s cubic-bezier(0.395, -0.800, 1.000, 0.160), 2.5s transform 0.75s;
    top: -9em;
    left: 4em;
    transform: rotate(40deg);
}

.jumbo-img:nth-of-type(1) span {
    color: var(--red);
}

.jumbo-img:nth-of-type(2) span {
    color: var(--blue);
}

.jumbo-img:nth-of-type(3) span {
    color: var(--dark-blue);
}

.jumbo-img:nth-of-type(4) span {
    color: var(--orange);
}

.jumbo-img:nth-of-type(5) span {
    color: var(--light-blue);
}

.standard {
    padding-top: 0;
    padding-left: 2.8em;
    padding-right: 2.8em;
    line-height: 1.5;
    font-weight: 300;
}

.standard p {
    margin: 0;
}

.standard.flex .img {
    flex-basis: 10.7em;
    flex-shrink: 0;
    margin-left: 5%;
}

.secondary {
    padding-top: 0;
    padding-left: 30%;
    padding-right: 2.8em;
    line-height: 1.3;
    font-weight: 300;
    background-repeat: no-repeat;
    background-position: -43% 10%;
    background-size: 31% auto;
    transition: background-position 1s ease-out;
}

.secondary.show-bg-img {
    background-position: 6% calc(0.1em + 10%);
}

.secondary p {
    margin-top: 0;
}

.main-info {
    padding-left: 2.8em;
    padding-right: 2.8em;
    color: var(--white);
    background-color: var(--light-blue);
    border-bottom: 0.6em solid var(--dark-blue);
    line-height: 1.6;
}

.inline-img {
    height: 1em;
    width: auto;
    vertical-align: text-bottom;
}

.banner {
    display: flex;
    justify-content: center;
    font-weight: 300;
}

.right .banner {
    text-align: right;
}

.banner p {
    margin: 0;
    padding: 0.3em 0;
    width: calc(11em + (50% - 14.4em));
}

.left .banner p {
    order: 2;
}

.banner div {
    flex-grow: 1;
}

.left .banner div {
    order: 1;
}

.red-gradient {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(237, 33, 38) 100%);
    background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(237, 33, 38) 100%);
    background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(237, 33, 38) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ed2126', GradientType=1);
}

.dark-blue-gradient {
    background: rgb(8, 31, 130);
    background: -moz-linear-gradient(left, rgb(8, 31, 130) 0%, rgb(255, 255, 255) 100%);
    background: -webkit-linear-gradient(left, rgb(8, 31, 130) 0%, rgb(255, 255, 255) 100%);
    background: linear-gradient(to right, rgb(8, 31, 130) 0%, rgb(255, 255, 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#081f82', endColorstr='#ffffff', GradientType=1);
}

.orange-gradient {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(247, 147, 30) 100%);
    background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(247, 147, 30) 100%);
    background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(247, 147, 30) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7931e', GradientType=1);
}

.light-blue-gradient {
    background: rgb(63, 169, 245);
    background: -moz-linear-gradient(left, rgb(63, 169, 245) 0%, rgb(255, 255, 255) 100%);
    background: -webkit-linear-gradient(left, rgb(63, 169, 245) 0%, rgb(255, 255, 255) 100%);
    background: linear-gradient(to right, rgb(63, 169, 245) 0%, rgb(255, 255, 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fa9f5', endColorstr='#ffffff', GradientType=1);
}

.text-img-pair {
    display: flex;
    justify-content: center;
    margin-top: 0.9em;
    overflow: hidden;
}

.text-img-pair .img {
    max-width: 11em;
}

.right .text-img-pair .img {
    margin-right: 1.8em;
}

.left .text-img-pair .img {
    order: 2;
    margin-left: 1.8em;
}

.text-img-pair .text {
    position: relative;
    top: -0.3em;
    max-width: 16em;
}

.left .text-img-pair .text {
    order: 1;
    text-align: right;
}

.text-img-pair .text p {
    margin-top: 0;
    margin-bottom: 1.5em;
    font-size: 0.69em;
    line-height: 1.9;
}

.text-img-pair a {
    position: relative;
    font-size: 0.8em;
    opacity: 0;
    transition: left 0.2s var(--ease-in-out),
        opacity 0.2s var(--ease-in-out);
}

.right .text-img-pair a {
    left: 5em;
}

.left .text-img-pair a {
    left: -5em;
}

.text-img-pair a.active {
    left: 0;
    opacity: 1;
}

.text-img-pair a::before,
.form #submit::before {
    content: '';
    position: absolute;
    top: -0.22em;
    width: 1.4em;
    height: 1.4em;
    background-color: var(--red);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: left 0.2s var(--ease-in-out),
        right 0.2s var(--ease-in-out),
        top 0.2s var(--ease-in-out),
        width 0.2s var(--ease-in-out),
        height 0.2s var(--ease-in-out),
        opacity 0.2s var(--ease-in-out);
}

.right .text-img-pair a::before,
.form #submit::before {
    right: 0;
}

.left .text-img-pair a::before {
    left: 0;
}

.text-img-pair a img,
.form #submit img {
    transform: rotate(0deg);
    transition: transform 0.2s var(--ease-in-out);
}

.text-img-pair a:hover img,
.form #submit:hover img {
    transform: rotate(120deg);
}

.text-img-pair a:hover::before,
.form #submit:hover::before {
    opacity: 0.5;
    top: -0.54em;
    width: 2em;
    height: 2em;
}

.right .text-img-pair a:hover::before,
.form #submit:hover::before {
    right: -0.3em;
}

.left .text-img-pair a:hover::before {
    left: -0.3em;
}

.text-img-pair .inline-img,
.form .inline-img {
    height: 1.4em;
}

.right .text-img-pair .inline-img,
.form .inline-img {
    margin-left: 0.6em;
}

.left .text-img-pair .inline-img {
    margin-right: 0.6em;
}

.centered-header {
    padding: 0.3em 1em;
    color: var(--white);
    font-size: 1.1em;
    text-align: center;
}

.centered-header p {
    margin: 0;
    font-weight: 300;
}

.centered-header a {
    display: block;
    color: inherit;
}

.centered-header a:hover {
    color: var(--red);
}

.centered-header.bg-light-gray a:hover {
    color: var(--black);
}

.flex {
    display: flex;
}

.links a {
    color: var(--black);
}

.links a:hover {
    color: var(--white);
}

.contact,
.links {
    padding: 1em 1.75em;
}

.contact {
    width: 24%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info {
    display: inline-block;
    margin: 0 auto;
}

.info a {
    display: block;
    font-size: 0.8em;
    margin-bottom: 1em;
}

address {
    font-size: 0.5em;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 5em;
}

.fine-print {
    font-size: 0.3em;
    font-weight: 500;
}

.links {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    background-color: var(--light-blue);
    color: rgb(0, 0, 0);
}

.quick-links,
.services-cols div:first-child {
    margin-right: 2em;
}

.quick-links > p,
.services > p {
    margin: 0 0 0.5em;
    font-size: 0.8em;
    font-weight: 300;
    color: var(--white);
}

.quick-links a {
    display: block;
    margin-bottom: 1em;
    font-size: 0.6em;
    font-weight: 400;
}

.services-cols {
    display: flex;
    line-height: 1.7;
}

.services-cols p {
    margin: 0;
    font-size: 0.4em;
    font-weight: 500;
}

.circle-links {
    display: flex;
    justify-content: center;
}

.circle-link {
    position: relative;
    display: block;
    margin: 1em;
    border-radius: 50%;
    width: 100%;
    max-width: 6em;
}

.circle-link .content,
.rollover {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.circle-link .content,
.square-link .rollover {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circle-link .content {
    top: 0;
    padding: 0.75em;
    justify-content: space-between;
}

.circle-link .icon {
    max-width: 1.4em;
}

.square-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1em;
}

.square-link {
    flex-basis: 23%;
    flex-shrink: 1;
    position: relative;
    display: block;
    margin: 0.8%;
    border: 2px solid var(--dark-blue);
    overflow: hidden;
}

.rollover {
    justify-content: center;
    top: 100%;
    background-color: rgba(8, 31, 130, 0.8);
    transition: top 0.2s var(--ease-in-out);
}

.square-link:hover .rollover,
.employee:hover .rollover {
    top: 0;
}

.red-circle {
    position: relative;
}

.red-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.4em;
    height: 1.4em;
    background-color: var(--red);
    border-radius: 50%;
    opacity: 0;
}

.circle-link .red-circle::before {
    transition: left 0.2s var(--ease-in-out),
        right 0.2s var(--ease-in-out),
        top 0.2s var(--ease-in-out),
        width 0.2s var(--ease-in-out),
        height 0.2s var(--ease-in-out),
        opacity 0.2s var(--ease-in-out);
}

.square-link .red-circle::before {
    transition: 0.2s left 0.2s var(--ease-in-out),
        0.2s right 0.2s var(--ease-in-out),
        0.2s top 0.2s var(--ease-in-out),
        0.2s width 0.2s var(--ease-in-out),
        0.2s height 0.2s var(--ease-in-out),
        0.2s opacity 0.2s var(--ease-in-out);
}

.circle-link:hover .red-circle::before,
.square-link:hover .red-circle::before {
    opacity: 0.5;
    top: -0.3em;
    left: -0.3em;
    width: 1.8em;
    height: 1.8em;
}

.red-circle img {
    position: relative;
    display: block;
    max-width: 1.2em;
    transform: rotate(0deg);
    transition: transform 0.2s var(--ease-in-out);
}

.square-link .red-circle img {
    transition: 0.2s transform 0.2s var(--ease-in-out);
}

.circle-link:hover .red-circle img,
.square-link:hover .red-circle img {
    transform: rotate(120deg);
}

.circle-link p,
.square-link p {
    font-weight: 800;
    color: var(--white);
}

.square-link p {
    margin-bottom: 0.25em;
}

.fading-lines {
    position: relative;
    height: 2.75em;
}

.fading-lines p {
    position: absolute;
    top: 0.9em;
    width: 100%;
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
    color: var(--dark-blue);
    opacity: 0;
}

/* PROJECTS SLIDESHOW */

.projects {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.project {
    box-sizing: border-box;
    display: flex;
    position: absolute;
    top: 0;
    left: 10vw;
    width: 100%;
    font-size: 0.9em;
    opacity: 0;
}

.project .text {
    flex-basis: 17em;
    margin-left: 0.5em;
}

.controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    margin: 0.5em 2.8em 2em;
    border-top: 1px solid var(--dark-blue);
}

.controls p {
    margin: 0;
    padding: 0.25em 0;
    color: var(--black);
    font-size: 0.6em;
    letter-spacing: 0.05em;
    opacity: 0;
    cursor: default;
}

.controls p:hover {
    color: var(--red);
}

#prev-project {
    padding-right: 0.3em;
}

#next-project {
    padding-left: 0.3em;
}

.text-graphic-pairs {
    max-width: 27em;
    margin: 2.25em auto 0;
}

.text-graphic-pair {
    display: flex;
    max-width: 27em;
}

.text-graphic-pair .graphic {
    position: relative;
    width: 28%;
    opacity: 0.2;
    transition: opacity 0.2s var(--ease-in-out);
}

.gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 5%;
    margin: 0 auto;
    z-index: -1;
}

.gradient img {
    content: '';
    position: absolute;
    bottom: 100%;
    left: -125%;
    width: 350%;
    background-size: 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 1em 0.5em rgb(255, 255, 255);
    opacity: 1;
    transition: 0.2s bottom 0.2s var(--ease-in-out), 0.2s opacity 0.2s ease-in;
}

.gradient::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    transition: 0.2s height 0.2s var(--ease-in-out);
}

.text-graphic-pair.active .gradient img {
    bottom: 0;
}

.text-graphic-pair.active .gradient::before {
    height: 15%;
}

.text-graphic-pair.finish .gradient img {
    bottom: -20%;
    opacity: 0;
}

.text-graphic-pair.finish .gradient::before {
    height: 0;
}

.yellow-gold {
    background: rgb(255, 240, 0);
    background: -moz-linear-gradient(top, rgb(255, 240, 0) 0%, rgb(255, 199, 0) 100%);
    background: -webkit-linear-gradient(top, rgb(255, 240, 0) 0%, rgb(255, 199, 0) 100%);
    background: linear-gradient(to bottom, rgb(255, 240, 0) 0%, rgb(255, 199, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff000', endColorstr='#ffc700', GradientType=0);
}

.gold-orange {
    background: rgb(255, 199, 0);
    background: -moz-linear-gradient(top, rgb(255, 199, 0) 0%, rgb(247, 147, 30) 100%);
    background: -webkit-linear-gradient(top, rgb(255, 199, 0) 0%, rgb(247, 147, 30) 100%);
    background: linear-gradient(to bottom, rgb(255, 199, 0) 0%, rgb(247, 147, 30) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc700', endColorstr='#f7931e', GradientType=0);
}

.orange-red-orange {
    background: rgb(247, 147, 30);
    background: -moz-linear-gradient(top, rgb(247, 147, 30) 0%, rgb(247, 92, 30) 100%);
    background: -webkit-linear-gradient(top, rgb(247, 147, 30) 0%, rgb(247, 92, 30) 100%);
    background: linear-gradient(to bottom, rgb(247, 147, 30) 0%, rgb(247, 92, 30) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7931e', endColorstr='#f75c1e', GradientType=0);
}

.red-orange-red {
    background: rgb(247, 92, 30);
    background: -moz-linear-gradient(top, rgb(247, 92, 30) 0%, rgb(237, 33, 38) 100%);
    background: -webkit-linear-gradient(top, rgb(247, 92, 30) 0%, rgb(237, 33, 38) 100%);
    background: linear-gradient(to bottom, rgb(247, 92, 30) 0%, rgb(237, 33, 38) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f75c1e', endColorstr='#ed2126', GradientType=0);
}

.text-graphic-pair .text {
    width: 72%;
    margin-bottom: 2.25em;
    padding-left: 1.75em;
}

.text-graphic-pair.active .graphic {
    opacity: 1;
}

.form {
    flex-basis: 16.8em;
    flex-shrink: 0;
    margin-left: 5%;
}

.form #submit {
    display: inline;
    position: relative;
    margin-top: 0.5em;
    cursor: pointer;
}

.field {
    padding: 0.1em 0.25em 0.25em;
    margin-bottom: 0.5em;
    background-color: rgb(220, 220, 220);
    border-radius: 0.2em;
}

label {
    display: block;
    font-size: 0.4em;
    font-weight: 400;
}

input,
input:focus {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
}

.field input {
    display: block;
    font-size: 0.85em;
}

.bios {
    display: flex;
    justify-content: center;
    margin-top: 1em;
    padding-left: 2.8em;
    padding-right: 2.8em;
}

.bio {
    max-width: 15em;
    font-size: 0.8em;
    line-height: 1.4;
}

.bio img {
    display: block;
}

.bio p {
    margin-bottom: 0;
}

.thin {
    margin: 0;
    font-weight: 300;
}

.spacer {
    width: 4em;
}

.employees {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1em calc(50% - 14.5em) 3.5em calc(50% - 14.5em);
}

.employee {
    position: relative;
    width: 31%;
    margin: 1.1%;
    overflow: hidden;
    color: var(--white);
    font-size: 0.8em;
}

.employee img {
    display: block;
}

.employee .rollover {
    padding: 0.75em;
    background-color: rgba(0, 113, 188, 0.8);
}

.employee p {
    margin: 0;
}

@media (max-width: 1250px) {
    .banner p {
        width: calc(11em + (50% - 14.7em));
        font-size: 0.8em;
    }

    .right .text-img-pair .img {
        margin-right: 1em;
    }

    .left .text-img-pair .img {
        margin-left: 1em;
    }
}

@media (max-width: 1200px) {
    .square-link {
        flex-basis: 31%;
    }
}

@media (max-width: 980px) {
    h1 {
        font-size: 1.8em;
    }

    a {
        font-weight: 400;
    }

    .centered-header {
        font-size: 1.4em;
    }

    .centered-header a {
        font-weight: 300;
    }

    header {
        padding: 0;
    }

    .logo,
    header.sm .logo {
        width: 13em;
        max-width: calc(100% - 3.8em);
        padding: 0.6em 0 0.6em 0.75em;
    }

    nav {
        position: absolute;
        top: 3.5em;
        left: 0;
        display: block;
        width: 100%;
        height: 0;
        font-size: 0.8em;
        overflow: hidden;
    }

    nav a {
        display: block;
    }

    nav .parent,
    header.sm nav .parent,
    .subpages a {
        padding: 0.75em 1.2em;
        background-color: var(--light-blue);
        border-bottom: 1px solid var(--white);
        font-weight: 400;
    }

    nav .parent>a {
        font-weight: 400;
        padding: 0.75em 1.2em;
    }

    #services {
        padding: 0;
    }

    nav .emphasize,
    header.sm nav .emphasize {
        color: var(--black);
        font-weight: 400;
        border-bottom: none;
    }

    nav .parent:hover,
    nav .parent>a:hover,
    nav .parent.active,
    nav .parent.active>a {
        color: var(--white);
        background-color: var(--blue);
        font-weight: 300;
    }

    nav .parent.active span::after,
    nav .parent.active>a span::after {
        content: unset;
    }

    .subpages {
        display: none !important;
    }

    .subpages .links {
        display: block;
        padding: 0;
    }

    .menu-icon {
        display: flex;
    }

    .header-spacer {
        height: 3.7em;
    }

    .jumbotron {
        margin-top: 0;
    }

    .jumbotron .scale {
        max-width: 11.7em;
    }

    .only-mobile {
        display: initial;
    }

    .jumbo-img {
        width: 12.9em;
    }

    .jumbo-img img {
        max-width: 11.8em;
    }

    section {
        padding-top: 2.1em;
    }

    .main-info {
        padding: 0.7em 2em;
        line-height: 1.4;
        font-weight: 300;
    }

    .banner {
        font-weight: 400;
    }

    .banner div {
        flex-grow: 0;
    }

    .banner p {
        margin: 0 auto;
        padding: 0.3em 2em;
        width: 16em;
        font-size: 0.96em;
    }

    .red-gradient {
        background: rgb(241, 84, 88);
        background: -moz-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(241, 84, 88) 100%);
        background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(241, 84, 88) 100%);
        background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(241, 84, 88) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f15458', GradientType=1);
    }

    .dark-blue-gradient {
        background: rgb(71, 88, 162);
        background: -moz-linear-gradient(left, rgb(71, 88, 162) 0%, rgb(255, 255, 255) 100%);
        background: -webkit-linear-gradient(left, rgb(71, 88, 162) 0%, rgb(255, 255, 255) 100%);
        background: linear-gradient(to right, rgb(71, 88, 162) 0%, rgb(255, 255, 255) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#081f82', endColorstr='#ffffff', GradientType=1);
    }

    .orange-gradient {
        background: rgb(249, 175, 88);
        background: -moz-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(249, 175, 88) 100%);
        background: -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgb(249, 175, 88) 100%);
        background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(249, 175, 88) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7931e', GradientType=1);
    }

    .light-blue-gradient {
        background: rgb(113, 191, 248);
        background: -moz-linear-gradient(left, rgb(113, 191, 248) 0%, rgb(255, 255, 255) 100%);
        background: -webkit-linear-gradient(left, rgb(113, 191, 248) 0%, rgb(255, 255, 255) 100%);
        background: linear-gradient(to right, rgb(113, 191, 248) 0%, rgb(255, 255, 255) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3fa9f5', endColorstr='#ffffff', GradientType=1);
    }

    .right .banner {
        text-align: left;
    }

    .text-img-pair {
        flex-direction: column;
        align-items: center;
    }

    .right .text-img-pair .img,
    .left .text-img-pair .img {
        margin: 0;
        padding: 0 2em 0.75em;
        max-width: 15.3em;
    }

    .left .text-img-pair .img {
        order: 1;
    }

    .text-img-pair .text {
        top: 0;
        margin: initial;
        padding: 0 2em;
        font-weight: 500;
        max-width: 15.3em;
    }

    .left .text-img-pair .text {
        order: 2;
        text-align: left;
    }

    .left .text-img-pair a {
        display: inline-flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .left .text-img-pair .inline-img {
        position: relative;
        top: -0.1em;
        margin-right: 0;
        margin-left: 0.6em;
    }

    .left .text-img-pair a::before {
        left: unset;
        right: 0;
    }

    .left .text-img-pair a:hover::before {
        left: unset;
        right: -0.3em;
    }

    .standard {
        padding-left: 2em;
        padding-right: 2em;
        line-height: 1.4;
    }

    .circle-links {
        flex-direction: column;
        align-items: center;
        margin-top: 1em;
    }

    .circle-link {
        max-width: 8em;
    }

    .circle-link .content {
        padding: 1em;
    }

    .circle-link .icon {
        max-width: 1.7em;
    }

    .circle-link p {
        font-size: 1.5em;
    }

    .red-circle img {
        max-width: 1.6em;
    }

    .text-graphic-pair {
        flex-direction: column-reverse;
    }

    .text-graphic-pair .text {
        width: 100%;
        margin-bottom: 0.75em;
        padding-left: 0;
    }

    .text-graphic-pair .graphic {
        width: 100%;
        max-width: 8em;
        margin: 0 auto 1em;
    }

    .flex {
        display: block;
    }

    .standard.flex .img {
        margin: 0 auto;
        width: 100%;
        max-width: 12em;
    }

    .bios {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 0.5em;
    }

    .bio {
        margin-bottom: 1.5em;
    }

    .employee {
        font-size: 0.64em;
    }

    .employee .rollover,
    .employee:hover .rollover {
        top: unset;
        bottom: 0;
        height: auto;
    }

    .standard.flex address {
        font-size: 0.9em;
        font-weight: 400;
    }

    .form {
        margin-left: 0;
        margin-bottom: 1em;
    }

    .project {
        flex-direction: column;
    }

    .controls {
        margin-left: 2em;
        margin-right: 2em;
    }

    .contact {
        box-sizing: border-box;
        width: 100%;
        text-align: center;
        padding-top: 1.25em;
        padding-bottom: 0.25em;
    }

    .contact img {
        width: 100%;
        max-width: 12.5em;
        margin: 0 auto;
    }

    .info {
        margin-top: 0.5em;
        font-size: 1.8em;
    }

    address {
        margin-bottom: 2.5em;
    }

    footer .links {
        padding: 1em 0 0.5em;
    }

    .quick-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-right: 0;
        width: 100%;
        font-size: 1.5em;
        text-align: center;
    }

    .quick-links p {
        width: 100%;
    }

    .quick-links a {
        padding: 0 1.3em;
        font-size: 0.55em;
    }

    .tagline,
    .services,
    .text-graphic-pair .gradient,
    .no-mobile {
        display: none;
    }
}

@media (max-width: 820px) {
    .secondary {
        padding: 0 2em 2em;
    }

    .secondary.show-bg-img {
        background-position: 10% 3em;
        background-size: 55% auto;
    }

    .employee {
        width: 47%;
    }
}

@media (max-width: 650px) {
    .square-link {
        flex-basis: 47%;
    }
}

@media (max-width: 500px) {
    .square-link {
        margin: 0.75em 0;
        flex-basis: 100%;
    }
}

@media (max-width: 482px) {
    body {
        font-size: calc(18px + 0.9vw);
    }

    .employee {
        width: 100%;
        margin: 1.1% 2%;
        font-size: 1em;
    }
}