html {
    --container-max-width : 1200px;
    --main-blue : #133c72;
    --light-blue : #dce2ea;
    --lg : 100px;
    --md : 50px;
    --sm : 20px;
    --gray : #6d6e70;
}

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

.margin-bottom-lg {
    margin-bottom : var(--lg) !important;
}

.margin-bottom-md {
    margin-bottom : var(--md) !important;
}

.margin-bottom-sm {
    margin-bottom : var(--sm) !important;
}

.margin-top-sm {
    margin-top : var(--sm) !important;
}

.margin-right-md {
    margin-right : var(--md) !important;
}

.margin-top-md {
    margin-top : var(--md) !important;
}

.textUppercase {
    text-transform : uppercase;
}

body {
    margin : 0;
    font-family: proxima-nova, sans-serif;
}

a {
    text-decoration : none;
}

ul {
    padding : 0;
}

li {
    list-style-type : none;
}

p {
    font-size : 18px;
    line-height : 30px;
    font-weight : 300;
}

.container {
    width : 90%;
    max-width : var(--container-max-width);
    margin : auto;
}

header {
    height : 100vh;
    background-size : cover;
    display : flex;
    align-items : center;
    justify-content : center;
}

footer {
    background-color : var(--main-blue);
    color : white;
    font-size : 18px;
    text-transform : uppercase;
}

footer h5 {
    font-weight : 300;
    margin-bottom : 20px;
    font-size : 14px;
    letter-spacing : 1px;
}

footer p {
    font-size : 14px;
    line-height : 22px;
    margin : 0;
    letter-spacing : 1px;
}

footer a {
    color : white;
    font-weight : 700;
    font-size : 16px;
    letter-spacing : 1px;
}

footer li {
    margin : 15px 0;
}

.header-content {
    color : white;
    text-align : center;
}

header h2 {
    font-size : 84px;
    font-weight : 300;
    margin-top : 30px;
}

h3 {
    color : var(--gray);
    font-size : 22px;
    text-transform : uppercase;
    letter-spacing : 1px;
}

header h3 {
    margin-bottom : 0;
    font-size : 32px;
    text-transform : uppercase;
    font-weight : 400;
    letter-spacing : 3px;
    color : #fff;
}

h4 {
    font-size : 36px;
    font-weight : 700;
    text-transform : uppercase;
    letter-spacing : 2px;
    margin : 0;
}

h5 {
    font-size : 26px;
    font-weight : 700;
    text-transform : uppercase;
    letter-spacing : 2px;
    margin : 10px 0;
}

h6 {
    font-size : 16px;
    font-weight : 300;
    text-transform : uppercase;
    margin : 0;
}

nav#main {
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    padding : 10px 0 0 0;
    z-index : 99999999;
    overflow : hidden;
}

nav#main li {
    display : inline-block;
    margin : 0 20px;
    text-transform : uppercase;
}

nav#main li.current-menu-item a {
    border-bottom : 2px solid #fff;
}

nav#main .menu-toggle {
    display : none;
}

nav#main .menu-toggle i {
    font-size : 36px;
}

nav#mobile {
    width : 100%;
    background-color : white;
    height : 100vh;
    position : fixed;
    top : 0;
    left : -100%;
    transition-property : left;
    transition-duration : 0.5s;
    z-index : 9999999999999;
}

nav#mobile ul {
    padding : 40px;
}

nav#mobile li {
    margin-bottom : 40px;
}

nav#mobile li a {
    font-size : 36px;
    color : black;
    text-transform : uppercase;
}

nav#mobile .nav-btn a {
    padding : 0;
    border : none;
}

.nav-open nav#mobile {
    left : 0;
}

nav#mobile .menu-toggle {
    position : absolute;
    top : 20px;
    right : 20px;
    color : black;
}

nav#mobile .menu-toggle i {
    font-size : 42px;
}

body.below_fold_b nav#main li.current-menu-item a {
    border-bottom : 2px solid var(--main-blue);
}

body.below_fold_b nav#main li.nav-btn a {
    border-color : var(--main-blue);
    color : var(--main-blue);
}

nav#main li.current-menu-item.nav-btn a {
    background-color : white;
    color : var(--main-blue);
}

body.below_fold_b nav#main li.current-menu-item.nav-btn a {
    background-color : transparent;
}

nav#main li:last-child {
    margin-right : 0;
}

nav#main li.nav-btn a, .btn {
    font-weight : 600;
    text-decoration : none;
    letter-spacing : 1px;
    text-transform : uppercase;
}

.btn:hover {
    background-color : #fff;
    color : var(--main-blue);
}

nav#main li a {
    border-bottom : 2px solid transparent;
}

nav#main a {
    color : white;
    font-weight : 700;
    letter-spacing : 1px;
    padding-bottom : 4px;
}

nav#main .btn {
    border-width : 1px;
}

.btn, .nav-btn a, nav#main li.nav-btn a {
    border: 2px solid white;
    padding : 22px 30px;
    color : white;
    display : inline-block;
    border-bottom: 2px solid white;
    transition-property : background-color;
    transition-duration : 0.25s;
}

main .btn {
    border: 2px solid var(--main-blue);
    color : var(--main-blue);
}

main .btn:hover, main .btn.active {
    border: 2px solid var(--main-blue);
    color : white;
    background-color : var(--main-blue);
}

.sprite {
    display : inline-block;
    background-size : 100% auto;
    background-repeat : no-repeat;
    background-position : center;
}

.sprite.logo {
    background-image : url('img/logo.png');
    width : 188px;
    height : 56px;
}

section, footer {
    padding : 100px 0;
}

section h2 {
    color : var(--main-blue);
    text-transform: uppercase;
    font-size : 36px;
    margin : 0;
    letter-spacing : 2px;
    position : relative;
    padding-top : 16px;
}

section h2:before {
    content : " ";
    position : absolute;
    background-color : var(--main-blue);
    top : 0;
    left : 0;
    height : 2px;
    width : 125px;
}

.two-col-section, .three-col-section {
    display : flex;
}

.two-col-section > *:first-child {
    width : 70%;
}

.two-col-section > *:last-child {
    width : 30%;
}

.three-col-section > * {
    width : calc(33% - 40px);
    padding-right : 40px;
}

.callout {
    font-size : 46px;
    font-weight : 300;
    line-height : 56px;
    text-transform : uppercase;
}

.photo-grid {
    display : flex;
    flex-wrap : wrap;
}

.photo-grid > .grid-item {
    width : 50%;
    height : 700px;
    background-size : cover;
    background-position : center;
    color : white;
}

.photo-grid > .grid-item p {
    margin : 0;
}

.grid-item .item-content {
    padding : 60px;
    display : flex;
    height : calc(100% - 120px);
    flex-direction : column;
    justify-content : space-between;
    opacity : 0;
    visibility : hidden;
    transition-property : opacity, visibility;
    transition-duration : 0.5s;
    background-color : rgba(16, 87, 132, 0.6);
}

.grid-item:hover .item-content {
    opacity : 1;
    visibility : visible;
}

strong {
    font-weight : 700;
}

.flex-ends {
    display : flex;
    justify-content : space-between;
    align-items : center;
}

footer #social {
    display : flex;
}

footer #social li {
    margin : 0 40px;
    font-weight : 300;
}

footer #social a {
    font-size : 24px;
    color : white;
}

footer .email {
    font-weight : 300;
    font-size : 14px;
}

.three-col {
    display : flex;
}

.three-col > * {
    flex : 1;
}

address {
    font-style : normal;
}

body.below_fold_b nav#main a {
    color : var(--main-blue);
}

body.below_fold_b nav#main {
    background-color : white;
}

body.below_fold_b .sprite.logo {
    background-image : url('img/logo_blue.png');
}

body.below_fold_b footer .sprite.logo {
    background-image : url('img/logo.png');
}

body.below_fold_b nav#main .btn {
    border-color : var(--main-blue);
}

.project-image {
    width : calc(100% - 100px);
    height : 400px;
}

.two-col-section > *:first-child > * {
    padding-right : 100px;
}

article .two-col-section > *:first-child > * {
    padding-right : 50px;
}

.project-detail {
    color : var(--gray);
}

.project-detail h3 {
    margin : 0;
}

.project-detail p {
    margin : 0;
    font-weight : 100;
    letter-spacing : 1px;
}

.project-detail .attributes {
    font-size : 12px;
}

.project-detail .attributes div {
    margin : 6px 0;
    letter-spacing : 0.5px;
    text-transform : uppercase;
}

.project-detail .description {
    font-weight : 100;
    line-height : 24px;
    font-size : 18px;
}

.project-detail .status {
    font-size : 12px;
    text-transform: uppercase;
    color : var(--main-blue);
    font-weight : 400;
    line-height : 12px;
}

.gallery {
    opacity : 0;
    visibility : hidden;
    position : fixed;
    top : 0;
    left : 0;
    width : 100%;
    height : 100vh;
    background-color : rgba(255, 255, 255, 0.85);
    z-index : 99999;
    transition-property : opacity, visibility;
    transition-duration : 0.5s;
}

.gallery.inline {
    opacity : 1;
    visibility: visible;
    position : relative;
    background-color : black;
    top : auto;
    left : auto;
    width : 100%;
    height : 500px;
}

.gallery .img-container {
    width : 80%;
    height : 90vh;
    text-align : center;
    position : relative;
}

.gallery.inline .img-container {
    width : 100%;
    height : 100%;
}

.gallery .gallery-image {
    opacity : 0;
    visibility : hidden;
    transition-property : opacity, visibility;
    transition-duration : 0.5s;
    position : absolute;
    width : 100%;
    height : 100%;
    display : flex;
    align-items : center;
    justify-content : center;
    background-color : var(--light-blue);
}

.gallery.inline .gallery-image {
    height : 500px;
}

.gallery .gallery-image img {
    max-width : 100%;
    max-height : 100%;
}

.project.gallery-open .gallery .gallery-image.active, .gallery.inline .gallery-image.active {
    opacity : 1;
    visibility : visible;
}

.gallery .outer-container {
    width : 100%;
    height : 100vh;
    display : flex;
    align-items: center;
    justify-content : center;
}

.gallery .nav-button {
    position : absolute;
    top : calc(50% - 50px);
    height : 100px;
    width : 50px;
    background-size : 100% auto;
}

.gallery .nav-button.left {
    left : 20px;
    background-image : url('img/nav-back.png');
}

.gallery .nav-button.right {
    right : 20px;
    background-image : url('img/nav-forward.png');
}

.project.gallery-open .gallery {
    opacity : 1;
    visibility : visible;
}

body.gallery-open {
    overflow-y : hidden;
}

@media(max-width : 700px) {

    nav#main .flex-ends {
        display : block;
    }

    .container {
        width : calc(100% - 40px);
        margin : 0 20px;
    }

    nav#main .menu-toggle {
        display : inline-block;
        position : absolute;
        top : 20px;
        right : 20px;
    }

    nav#main #menu-main-nav {
        display : none;
    }

    .two-col-section {
        flex-direction : column-reverse;
    }

    .two-col-section.no-reverse-on-mobile {
        flex-direction : column;
    }

    .two-col-section > *:first-child, .two-col-section > *:last-child {
        width : 100%;
    }

    .three-col {
        display : block;
    }

    .callout {
        font-size : 28px;
        line-height : 32px;
    }

    .photo-grid > .grid-item {
        width : 100%;
        height : 400px;
    }

    .grid-item .item-content {
        opacity : 1;
        visibility : visible;
        padding : 30px;
        height : calc(100% - 60px);
    }

    footer {
        text-align : center;
    }

    footer #social {
        justify-content : space-between;
        margin-top : 50px;
    }

    .two-col-section > *:first-child > * {
        padding : 0;
    }

    footer > .container.flex-ends {
        display : block;
    }

    section, footer {
        padding : 60px 0;
    }

    .two-col-section margin-bottom-lg {
        margin-bottom : 20px !important;
    }

    .project-select {
        width : calc(100% - 100px);
        margin-bottom : 5px;
    }

    .project-image {
        width : 100%;
    }

    .gallery {
        z-index : 999999999;
    }

    article .two-col-section > *:first-child > * {
        padding : 0;
    }

    .gallery .img-container {
        width : 100%;
        height : 100vh;
    }

    .gallery .nav-button.right {
        /*right : 50px;*/
    }

    .three-col-section.project-detail {
        display : block;
    }

    .three-col-section > * {
        width : 100%;
        padding : 0;
        margin-bottom : 20px;
    }

    header h3 {
        font-size : 22px;
    }

    header h2 {
        font-size : 64px;
    }

}