#topbanner {
    padding-top:    25%;
}
#topbanner video {
    width:      100%;
    height:     auto;
}

#content-title {
    padding:    2em 0 .5em 0;
}
#content-title .title-primary,
#content-title .title-primary::after {
    padding-bottom: 0;
    margin-bottom:  0;
}
#content-title .customer-logo {
    display:        inline-block;
}
#content-title .customer-logo img {
    display:        inline-block;
    width:          5em;
}



/**** ALL PROJECTS ******/
#content-projects .grid-wrapper .grid-item {
    position:       relative;
    display:        inline-block;
    vertical-align: top;
    padding-top:    75%;
    margin:         2% 0;
    width:          100%;
    font-size:      1.1em;
    background-color:   #555;
    background-position: center;
    background-repeat:  no-repeat;
    background-size:    cover;
}
#content-projects .grid-wrapper .grid-item span {
    position:       absolute;
    bottom:         0;
    left:           0;
    display:        block;
    width:          100%;
    padding:        1em .2em;
    color:          #fff;
    line-height:    1.3em;
    background:     rgba(0,0,0,.75);
    backdrop-filter: blur(3px);
}
#content-projects .grid-wrapper .grid-item span::first-line {
    font-size:      1.3em;
}



/**** SPECIFIC PROJECT ****/

#content-description {
    padding-top:    .5em;
}
#content-description .content-main-image {
    text-align:     center;
    padding-bottom: 2em;
}
#content-description .content-main-image img {
    margin:         0 auto;
    width:          100%;
}

#content-description .content-main-desc h4 {
    padding-bottom: 1em;
    font-size:      1.2em;
    text-decoration: underline;
}
#content-description .content-main-desc div {
    text-align:     left;
    padding-bottom: 2em;
    font-size:      .9em;
    line-height:    1.3em;
}
#content-description .content-main-desc div p {
    padding-bottom: 1em;
}

#content-description .content-main-button {
    padding:        2em 0;
}
#content-description .content-main-button a {
    width:          80%;
}


#content-gallery .gallery-wrapper {
    position:       relative;
}
#content-gallery .gallery-wrapper a {
    display:        inline-block;
    vertical-align: top;
    margin:         .2em 1%;
    width:          98%;
    padding-top:    75%;
    background-color:       #444;
    background-repeat:      no-repeat;
    background-position:    center;
    background-size:        cover;
}



#gallery-prompt {
    position:       fixed;
    z-index:        10;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    min-height:     100vh;
    background:     #000;
    background:     rgba(0,0,0,.95);
    animation:      fadeIn 200ms ease-out;
}
#gallery-prompt-image,
#gallery-prompt-video {
    display:        block;
    width:          100%;
    height:         100%;
    min-height:     100vh;
    background-position:    center;
    background-repeat:      no-repeat;
    background-size:        contain;
    animation:      scaleIn 200ms ease-out;
}
#gallery-prompt.close {
    animation:  fadeOut 200ms ease-out forwards;
}
#gallery-prompt-image.video {
    position:   fixed;
    z-index:    10;
    top:        0;
    right:      0;
    width:      3em;
    height:     3em;
    min-height: 3em;
    background: #000;
}
#gallery-prompt-image.video::before,
#gallery-prompt-image.video::after {
    content:    '';
    display:    block;
    width:      1em;
    height:     1em;
    border-bottom:  .1em solid #fff;
    border-right:   .1em solid #fff;
    transform:  translateX(.9em) translateY(.3em) rotateZ(45deg);
}
#gallery-prompt-image.video::after {
    transform:  translateX(.9em) translateY(.6em) rotateZ(225deg);
}


@media (min-width: 1px)
{
    #content-gallery .gallery-wrapper a {
        margin:         .2em 0;
        width:          100%;
    }
    #content-gallery .gallery-layout1 a.gallery-item9 {
        width:      100%;
    }
}
@media (min-width: 19em)
{
    #content-title .title-primary {
        font-size:      1.5em;
    }

    #content-projects .main-wrapper {
        padding-left:   .25em;
        padding-right:  .25em;
    }
    #content-projects .grid-wrapper .grid-item {
        margin-top:     0%;
        padding-top:    45%;
        width:          49%;
        font-size:      .85em;
    }
    #content-projects .grid-wrapper .grid-item:nth-child(2n-1) {
        margin-right:   1%;
    }
    #content-projects .grid-wrapper .grid-item:nth-child(2n) {
        margin-left:   1%;
    }

    #content-description .content-main-desc h4 {
        font-size:      1.4em;
    }

    #content-gallery .gallery-wrapper a {
        margin-right:   1% 1%;
        padding-top:    37%;
        width:          48%;
    }
    #content-gallery .gallery-wrapper a:nth-child(2n-1) {
        margin-right: 1%;
    }
    #content-gallery .gallery-wrapper a:nth-child(2n) {
        margin-left: 1%;
    }
}
@media (min-width: 32em)
{
    #topbanner {
        padding-top:    19%;
    }

    #content-description {
        padding:        2em 0;
    }
    #content-description .content-main-image,
    #content-description .content-main-desc {
        display:        inline-block;
        vertical-align: top;
        width:          67%;
    }
    #content-description .content-main-image {
        width:          27%;
        margin-right:   3%;
    }
    #content-description .content-main-desc h4 {
        font-size:      1.3em;
    }
    #content-description .content-main-desc div {
        padding-bottom: 3em;
        font-size:      .8em;
    }


    #content-gallery .gallery-layout1 a {
        padding-top:    31%;
        width:          31%;
        margin-right:   1%;
        margin-left:    1%;
    }
    #content-gallery .gallery-layout1 a:nth-child(3n-2) {
        margin-left:    0;
    }
    #content-gallery .gallery-layout1 a:nth-child(3n),
    #content-gallery .gallery-layout1 a:last-child {
        margin-right:   0;
    }
    #content-gallery .gallery-layout1 a.gallery-item9 {
        width:      31%;
    }

    #content-gallery .gallery-layout2 a,
    #content-gallery .gallery-layout3 a {
        margin-bottom:  2%;
        padding-top:    35%;
        width:          47%;
        margin-right:   2%;
        margin-left:    2%;
    }
}

@media (min-width: 40em){

    #content-projects .grid-wrapper .grid-item {
        padding-top:    31%;
        width:          31%;
        font-size:      .55em;
        margin:         .5em 1%;
    }
    #content-projects .grid-wrapper .grid-item:nth-child(3n-1) {
        margin-right:   1%;
    }
    #content-projects .grid-wrapper .grid-item:nth-child(3n) {
        margin-left:   1%;
    }
    #content-projects .grid-wrapper .grid-item span {
        padding:        1.5em 0;
    }
    #content-projects .grid-wrapper .grid-item span::first-line {
        font-size:      1.5em;
        line-height:    1.2em;
    }

}
@media (min-width: 45em){

    #content-projects .title-primary {
        padding-bottom: .2em;
    }
    #content-projects .grid-wrapper .grid-item {
        margin-top:     1.5%;
        padding-top:    23%;
        width:          23%;
        font-size:      .75em;
    }

    #content-title {
        font-size:  1.3em;
    }
    #content-title .customer-logo img {
        width:      7em;
    }

    #content-description .content-main-image,
    #content-description .content-main-desc {
        display:        inline-block;
        vertical-align: top;
        width:          47%;
    }
    #content-description .content-main-image {
        margin-right:   3%;
    }

    #content-description .content-main-button a {
        width:          auto;
    }


    #content-gallery .gallery-layout1 {
        font-size:      1.5vw;
        padding-top:    42%;
    }
    #content-gallery .gallery-layout1 a {
        position:       absolute;
        top:            0;
        left:           0;
        padding-top:    0;
        margin:         0!important;
    }
    #content-gallery .gallery-layout1 a.gallery-item1 {
        width:          11.75em;
        height:         10em;
    }
    #content-gallery .gallery-layout1 a.gallery-item2 {
        left:           12.25em;
        width:          20.25em;
        height:         15.5em;
    }
    #content-gallery .gallery-layout1 a.gallery-item3 {
        left:           33em;
        width:          18.5em;
        height:         15.5em;
    }
    #content-gallery .gallery-layout1 a.gallery-item4 {
        left:           52em;
        width:          13em;
        height:         9.25em;
    }
    #content-gallery .gallery-layout1 a.gallery-item5 {
        top:            10.5em;
        width:          11.75em;
        height:         16em;
    }
    #content-gallery .gallery-layout1 a.gallery-item6 {
        top:            16em;
        left:           12.25em;
        width:          15em;
        height:         10.5em;
    }
    #content-gallery .gallery-layout1 a.gallery-item7 {
        top:            16em;
        left:           27.75em;
        width:          13em;
        height:         10.5em;
    }
    #content-gallery .gallery-layout1 a.gallery-item8 {
        top:            16em;
        left:           41.25em;
        width:          10.25em;
        height:         10.5em;
    }
    #content-gallery .gallery-layout1 a.gallery-item9 {
        top:            9.75em;
        left:           52em;
        width:          13em;
        height:         16.75em;
    }

    #content-gallery .gallery-layout2 a,
    #content-gallery .gallery-layout3 a {
        margin-bottom:  1%;
        padding-top:    17%;
        width:          23%;
        margin-right:   1%;
        margin-left:    1%;
    }
}

@media (min-width: 80em){

    #topbanner {
        padding-top:    13em;
    }

    #content-gallery .gallery-wrapper {
        font-size:      1em;
    }
    #content-gallery .gallery-layout1 {
        padding-top:    27em;
    }
}