.show {
    display: grid;
}

.hide {
    display: none;
}

.center-title {
    grid-row: 1 / span 1;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.detail-view-facts {
    display: none;
}

.client-indicator-letter {
    height: 1em;
}

.client-indicator-letter img {
    width: 2em;
    margin-top: -0.75em;
}

.detail-view-section {
    /*display: none;*/
    grid-column: 3 / span 1;
    grid-template-rows: 20% 80%;
    width: inherit;
    height: inherit;
    border-width: 1px;
    color: black;
    z-index: 0;
    margin-top: 20vh;
    cursor: pointer;
}

.detail-view-title {
    grid-row: 1 / span 1;
    font-size: 1.5em;
    margin-top: 0.33em;
    margin-left: 1em;
    margin-right: 1em;
    color: #005e4a;
}

.detail-view-title-mobile {
    display: none;
    grid-row: 1 / span 1;
    font-size: 1.5em;
    margin-top: 0.33em;
    margin-left: 1em;
    margin-right: 1em;
}

.detail-view-body {
    grid-row: 2 / span auto;
    font-size: 0.9em;
    height: 45vh;
    overflow: auto;
    margin-left: 1.8em;
    padding-right: 1.8em;
    margin-bottom: 2.75em;
}

.detail-view-content-mobile {
    margin-top: 0em;
}

.detail-view-facts-stack {
    display: none;
}

.detail-view-facts-personal {
    display: none;
}

.detail-view-pre-body {
    color: #005e4a;
    font-size: 0.8em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 2em;
    display: none;
}

.detail-view-pre-body-mobile {
    color: #005e4a;
    font-size: 0.8em;
    margin-bottom: 2em;
    grid-area: body;
    display: block;
    grid-row: 0 / span 1;
}

.spotlight-outer-circle {
    display: flex;
    width: 400px;
    height: 400px;
    left: -15%;
    margin: auto;
    background-color: #fff;
    border-color: #005e4a;
    border-style: solid;
    border-radius: 50%;
    position: relative;
    margin-top: 20vh;
}

.spotlight-outer-circle {
    grid-column: 2 / span 1 ;
    background-color: rgba(0,94,74,0.15) ;
    border-color: #005e4a;
    color: black;
    border-width: 2px;

}

.spotlight-spot-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    border-radius: 50%;
    background-color: #ededed;
    transform: translate(-50%, -50%);
    width: 4em;
    height: 4em;
    border-color: #005e4a;
    border-style: solid;
}

.header {
    background-color: #ededed;
}

.main-menu {
    background-color: #ededed;
}

.spotlight-detail-grid{
    display: none;
    grid-template-rows: 50% 50%;
    row-gap: 2em;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.spotlight-detail-body-upper {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
}

.spotlight-detail-body-lower {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spotlight-detail-body-image-size {
    width: 5em;
}

.spotlight-detail-stats {
    padding-left: 3.5em;
    color: #005e4a;
    font-size: 0.8em;
}

.spotlight-detail-stats-ch {
    justify-self: center;
}

.spotlight-detail-nda {
    display: flex;
    justify-content: center;
}

.spotlight-detail-stack {
    display: flex;
    justify-content: center;
}

.detail-view-icon-size {
    /*width: 3em;*/
    height: 2em;
}

.spotlight-detail-stack-grid {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-row-gap: .5em;
    grid-column-gap: .5em;
}

.spotlight-detail-stack-icon {
    width: 2em;
    height: 2em;
}

.spotlight-detail-title-md {
    font-size: max(1em, 2.25em);
}

.spotlight-detail-title-sm {
    text-align: center;
    font-size: max(1em, 1.25em);
}

.logo-mobile {
    display: block;
    width: 120px;
    padding: 10px 0 10px 0;
}

.mobile-industry-icon {
    display: none;
}

.footer-container {
    margin-left: 10em;
    margin-right: 10em;
}

.footer ul {
    justify-content: left;
}

.footer-email {
    margin-top: 1.30em;
    /*margin-left: 7.5em*/
}

.hero-image-setheight {
    height: 300px;
}

.hero-image {
    background-color: #003F32;
}

.strip {
    height: 500px;
}

.footer-logo {
    margin-top: 1.25em;
    color: #005e4a;
    white-space: nowrap;
    justify-self: flex-end;
    text-decoration: none;
}

.footer-grid a:hover {
    color: #005e4a;
}

.footer-logo-mobile {
    display: none;
}

.footer-email-icon {
    height: 1em;
    margin-bottom: .2em;
}

.footer-grid {
    display: grid;
    grid-template-areas: "menu email logo";
    grid-template-columns: 33% 33% 33%;
    align-items: center;
    justify-items: center;
    margin-bottom: 1em;
}

.footer-menu:nth-child(odd) {
    /*grid-area: menu;*/
    width: 100%;
    text-align: center;
}

.footer-menu:nth-child(even) {
    color: #005e4a;
    /*grid-area: menu-2;*/
    width: 100%;
    background-color: #ededed;
    color: #005e4a;
    text-align: center;
}

.footer-menu-item ul li:nth-child(1) {
    margin-right: 2em;
}

.footer-menu-item {
    position: relative;
    margin-top: 1.25em;
    justify-self: start;
}

.footer-menu-item li {
    display: inline-block;
}
.margin-top-desktop-5 {
    margin-top: -5em;
}

@media (min-width: 576px) {
    .logo-mobile {
        display: none;
    }
}

.page {
    /*background-color: #ABBEB3;*/
    background-color: #ededed;
}

.grid-4-col-wide {
    display: grid;
    grid-template-columns: 20% 30% 30% 20%;
    column-gap: 1em;
    row-gap: 1em;
}

.detail-view-icon {
    display: none;
}

.common-top-space {
    display: none;
    grid-column: 3 / span 1;
}

.common-bottom-space {
    display: none;
    grid-column: 3 / span 1;
}

@media (max-width: 1279px) {
    .grid-4-col-wide {
        display: grid;
        grid-template-columns: 15% 65% 15%;
        column-gap: 1em;
    }

    .detail-view-section {
        grid-column: 2 / span 1;
        display: grid;
        align-items: center;
        /*align-content: center;*/
        grid-template-areas: "title icon"
                             "facts-stack facts-personal"
                             "body  body";
        grid-template-columns: 90% 10%;
        grid-template-rows: initial;
        margin-top: 3vh;
        padding: 1em;
        border-style: solid;
        border-color: #005e4a;
        border-width: 1px;
    }

    .detail-view-facts {
        grid-area: facts;
        font-size: 0.8em;
        color: #005e4a;
        display: block;
    }


    .detail-view-content-mobile {
        margin-top: 5em;
    }

    .detail-view-facts-stack {
        display: inline-block;
        float: left;
        text-align: left;
        width: 50%;
        font-size: 0.8em;
        margin-top: 1.5em;
    }

    .detail-view-facts-personal {
        display: inline-block;
        text-align: right;
        grid-area: facts-personal;
        font-size: 0.8em;
        float: right;
        color: #005e4a;
        width: 50%;
    }

    .spotlight-outer-circle {
        display: none;
    }

    .detail-view-title {
        grid-area: title;
        grid-column: 1 / span 1;
    }

    .detail-view-body {
        grid-area: body;
        display: none;
        overflow: auto;
        /*margin-bottom: 0;*/
        height: inherit;
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .detail-view-icon {
        display: block;
        grid-area: icon;
        /*grid-column: 2 / span 1;*/
    }

    .detail-view-pre-body {
        grid-area: icon;
        margin-left: 2em;
        display: block;
    }

    .common-top-space {
        display: block;
        grid-column: 2 / span 1;
        margin-top: 20vh;
    }

    .common-bottom-space {
        display: block;
        grid-column: 3 / span 1;
        margin-bottom: 10vh;
    }

    .detail-view-title-mobile {
        font-size: 1em;
        display: block;
        margin-left: 1.5em;
    }

    .detail-view-title {
        display: none;
    }

    .mobile-industry-icon {
        display: block;
        width: 3em;
        height: 2.5em;
        margin-left: -1em;
        padding-right: 0.5em;
    }

    .footer-email {
        /*margin-left: 5em;*/
    }
}

@media (max-width: 1020px) {
    .footer-menu-item {
        position: relative;
        padding: 0.5em;
        margin-top: 0.75em;
    }

    .footer-email-text {
        display: none;
    }

    .footer-logo {
        /*margin-left: -10em;*/
    }

    .margin-top-desktop-5 {
        margin-top: 0em;
    }
}

@media (max-width: 890px) {
    .detail-view-section {
        grid-column: 2 / span 1;
        display: grid;
        align-items: center;
        /*align-content: center;*/
        grid-template-areas: "title icon"
                             "body  body";
        grid-template-columns: 90% 10%;
        /*grid-template-rows: 20% 80%;*/
        /*grid-row-gap: 1em;*/
        margin-top: 3vh;
        padding: 1em;
        border-style: solid;
        border-color: #005e4a;
        border-width: 1px;
        cursor: pointer;
    }

    .detail-view-title-mobile {
        display: block;
        font-size: 1em;
        margin-left: 1.5em;
    }

    .detail-view-icon {
        display: block;
        font-size: 1em;
        margin-left: -1.5em;
    }

    .detail-view-pre-body {
        font-size: .75em;
        margin-left: 0em;
        display: block;
    }

    .mobile-industry-icon {
        display: block;
        width: 3em;
        height: 2.5em;
    }

    .footer-email {
        /*margin-left: 3em;*/
    }

    .footer-menu-item {
        position: relative;
        margin-top: 0.75em;
        padding: 0em;
        /*margin-left: -2em;*/
    }

    .footer-email-text {
        display: none
    }

    .hero-text {
        padding-left: 2em;
        padding-right: 2em;
    }

    .hero-text h1 {
        font-size: 2em !important;
    }

    .hero-row-text {
        margin-top: -10em;
        padding-left: 2em;
        padding-right: 2em;
        font-size: 0.85em;
    }

    .hero-row-title {
        font-size: 1.25em;
    }
}

@media (max-width: 640px) {
    .detail-view-section {
        grid-column: 2 / span 1;
        display: grid;
        align-items: center;
        /*align-content: center;*/
        grid-template-areas: "title icon"
                             "body body";
        grid-template-columns: 90% 10%;
        /*grid-template-rows: 20% 80%;*/
        /*grid-row-gap: 1em;*/
        margin-top: 3vh;
        padding: 1em;
        border-style: solid;
        border-color: #005e4a;
        border-width: 1px;
        font-size: 0.8em;
    }

    .detail-view-pre-body {
        grid-area: icon;
        margin-left: 2em;
        display: block;
    }

    .detail-view-pre-body-mobile {
        color: #005e4a;
        font-size: 0.8em;
        margin-bottom: 1em;
        grid-area: body;
        display: block;
    }

    .mobile-industry-icon {
        display: block;
        width: 3em;
        height: 2.5em;
        margin-left: -2em;
    }

    .footer-grid {
        display: grid;
        width: inherit;
        grid-template-areas:
                "menu"
                "menu"
                "email"
                "logo";
        grid-template-columns: 100%;
        margin-left: 0em;
    }

    .footer-menu-item {
        width: 100%;
        background-color: #005e4a;
        color: #ffffff;
        text-align: center;
        margin-left: 0em;
    }

    .footer-menu-item a {
        width: 100%;
        background-color: #005e4a;
        color: #ffffff;
    }

    .footer-menu-item {
        position: relative;
        padding: 0.5em;
        margin-top: 0em;
    }

    .footer-menu-item li {
        display: block;
    }

    .footer-email {
        text-align: center;
        padding: 2em;
        margin-left: 0em;
    }

    .footer-logo {
        text-align: center;
        padding-bottom: 2em;
        display: none;
    }

    .footer-logo-mobile {
        text-align: center;
        padding-bottom: 2em;
        display: block;
    }

    .footer-logo-mobile img {
        width: 8em;
    }

    .footer-email-icon {
        height: 1em;
        margin-bottom: .2em;
    }

    .footer ul li.copyright {
        display: block;
        position: absolute;
        top: 2em;
        left: 50%
    }

    .footer-email-text {
        display: inline;
    }

    .footer-container {
        margin-left: 0em;
        margin-right: 0em;
    }

    .footer-menu-item ul li:nth-child(1) {
        margin-right: 0em;
    }
}