div#sp-position2{display: none;}

/* --- the logo/menu bar --- */
#sp-header.header-sticky {
    position: relative !important;
}
.sp-megamenu-parent>li>a {
    color: #fff !important;
}
.sp-megamenu-parent>li:after {
    color: #fff;
}

/* ----- SCROLLABLE DISPLAY ---- */

#page-content-scrollable{ /* the entire scrollable region.  set background color */
    background:#fff;
}
/* ---- common, reusable row styling --- */
.project-row.limited-width{ /* for a row that is not to be full-width, with a fixed maximum width centered within the page */
    max-width:1320px;margin: 0 auto;padding:0 1rem;
}
.project-row .item-column.img-col img{ /* the image within an image column - can set width, margin, border, etc of the image */
    width:100%;
}


/* ------ Details Section ---- */
#maven-project-details .project-row{ /* the row inside the details row */
    margin-left:25px;
}
.top-details-row{ /* full-width background of details row: title, descr, size, scope, awards */
    background: #f6f6f6 !important;
    padding-top:0;margin-left:0;
    padding-bottom:8rem;}

.title-on-top {
    padding-top: 50px;
}
#project-title-row {
    margin-bottom: 30px;
}
h1.maven-title{ /* project's title */
    font-family: franklin-gothic-atf, sans-serif;
    font-weight: 600;
    font-size: 50px;
    line-height: 1.3;
}
.maven-city-state {
    font-size: 1.5rem;
    font-weight: 400;
}
@media screen and (min-width: 768px) {
    .project-description{
        margin-right: 90px;
    }}

#project-details-row.project-row{ /* the flexbox row for details (descr, scope, etc) under the title row.  responsively manages the two parts/columns. */

}

.item-column.details-col-left{ /* groups the project's left section of text (description) into a column */

}
.item-column.details-col-right{ /* column holding size, scope, and awards.  May wrap below description on narrow viewports */

}

h3.profile-subtitle{ /* title for: size, scope, awards */
    font-size: 15.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
    margin-bottom: 10px;
}
.maven-project-details .profile-text-block{ /* blocks of text for size, scope, awards */
    font-size:1.25rem;
    font-weight:500;
    margin-bottom: 30px;
}

ul.project-scope-list {
    margin-bottom: 30px;
}
.project-details.details-size .profile-text-block{margin-bottom: 30px;}

/* ---- IMAGE ROW ---*/
#maven-image-row.image-row{ /* the two-image row.  a flexbox that responsively displays them side-by-side or stacked. */
    column-gap:.6rem;
    padding-top:0;
}

@media only screen and (max-width: 1023px) {
    .image-row .row-image-container {
        padding-left: 10%;
        padding-right: 10%;
    }
}



/* ----- QUOTE ROW --- */
#maven-profile-quote{ /* full-width wrapper around the row for Quote content */
    margin: 100px 0;
}
.project-row.quote-row{ /* limited-width row that contains the Quote content. a flexbox to responsively position its parts. */
    padding:1.5rem;
}
.project-row.quote-row.uses-headshot{ /* the responsive flexbox for quote when headshot is PRESENT */

}
.project-row.quote-row.no-headshot{ /* the responsive flexbox for quote when headshot is ABSENT */

}

.quote-content{
    padding: 1rem 0;
}
.headshot-column{
    padding:0 .5rem 0 .5rem;
}
.headshot-container{
    justify-content:center;
}
.headshot-container img {
    max-width:300px;
    border-radius: 200px;
}


div#maven-profile-quote{ /* row spanning the quote content */
    padding: 100px 0;
    background: #284A66;
}
.project-row.quote-row.limited-width { /* flexbox for responsively managing the main two parts (headshot/attribute, quote) */
    column-gap: 80px;
}

blockquote.quote-text{/* text for quote and attribute */
    font-size: 2.7rem;
}

.maven-quote{ /* just the quote text */
    color: #fff; /*#2c262e;*/
    font-weight: 500;
    text-align: left;
    line-height: 1.5;
}
.quote-attribute-container{ /* container of all attribute parts */
    text-align:center;
}
.quote-attribute{ /* just the attribute line for the quote */
    font-size: 1.7rem;
    margin-top: 20px;
    color: #fff;
}
.quote-attribute-title {
    font-style: italic;
    color: #fff;
}

@media only screen and (max-width: 1023px) {
    .project-row.quote-row {
        justify-content: center;
        align-content: center;
    }
}

/* --- INSPIRATION ROW --- */
#inspiration-row{ /* flexbox to responsively manage the positioining of its parts (image, text) */
    gap:1.5rem;
    padding: 100px 0 50px 0;
}
#inspiration-row .project-text-col{ /* groups headline with text */
    margin-right:1.5em;
}
.inspiration-headline{
    font-weight:bold;
    margin-bottom:2rem;
    font-size: 25px;
}
@media screen and (min-width: 768px) {
    .inspiration-text{
        margin-right: 40px;
    }}
.inspiration-image{
   /* transition-timing-function: ease;
    transition-duration: 0.1s;
    transform-origin: center center;
    transform-style: preserve-3d;
    filter: blur(0px);
    opacity: 1;
    transform: perspective(1000px) translate3d(0px, -44.7425px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    visibility: visible;
    animation-duration: 300ms;
    animation-name: zoomIn;*/
}

/* --- IMPACT ROW --- */
#impact-row{ /* flexbox to responsively manage the positioning of its parts (image, text) */
    gap:1.5rem;
    padding: 50px 0 100px 0;
}
#impact-row .project-text-col{ /* groups headline with text */

}
.impact-headline{
    font-weight:bold;
    padding-bottom:2rem;
    font-size: 25px;
}
@media screen and (min-width: 768px) {
    .impact-headline{
        margin-left: 40px;
    }}

@media screen and (min-width: 768px) {
    .impact-text{
        margin-left: 40px;
    }}
.impact-image{
    transition: all .4s ease;
    visibility: visible;
    animation-duration: 300ms;
    animation-name: zoomIn;
}

/* ---- MASONRY ROW ---- */
#masonry-row{ /* the flexbox container for the masonry */
    padding: 0 45px;
}
.vert-flow .masonry-item{ /* each 'figure' that contains an image (each figure stacks within a column of the masonry grid) */
    min-width:100%;
    margin:0;
    padding:0 .4rem .8rem .4rem;
}
@media only screen and (max-width: 1023px) {
    .maven-masonry .vert-flow { /* each of the three columns, but at this narrower viewport we have the columns stacked instead of side-by-side */
        padding-left: 10%;
        padding-right: 10%;
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
        min-width: 66%; /* change so each item takes up the full column */
    }
}

    /* ---- LEARN MORE ROW (links) --- */
#learnmore-row.project-row{ /* the limited-width container for the content of Learn More */
padding: 100px 0;
}
#learnmore-row.project-row .learnmore-row-container{ /* the inset container holding the row's title and list */
    margin-top:1.5rem;
    padding-left:30px;padding-right:10%;
}

#learnmore-row .learnmore-col{ /* the column of content (heading and bulleted list) */
    width:100%;
    margin: 0 auto 0 0;
}
h3.learnmore-heading{

}
ul.learnmore-list{
    width:100%;
}

li.learn-more-link{

}
#related-projects h4 {font-weight: 300;margin-bottom: 50px;}
#related-projects {
    padding: 3rem;
    /*border-top: 1px solid var(--bs-primary);*/
    background: #284A66;
    color: wheat;
}
.related-project-title {
    color: wheat;
}





/* ---- RELATED PROJECTS --- */

#related-projects{ /* the section/row of related projects and the section's title */

}
.related-projects-row a{ /* link on a related article - wraps around both image and title */

}
h4.related-projects{ /* title of Related Projects section */

}
.related-projects-row{ /* container row for the displayed set of related projects */

}
.image-container-related{ /* holds the image for the related article */

}
.related-project-title{ /* title for a given related article */

}


/* ===== Area Below Component's Content - e.g., footer, etc. ===== */
body section#sp-bottom{background-color:#fff;}

/* =================================================================
      RESPONSIVE RULES FOR GENERAL LAYOUT
=================================================================== */
/* for widths greater than our first breakpoint, the layout rules above are adequate.  What follows is overriding rules for smaller widths:  */
@media only screen and (max-width: 1023px) {
    div.project-row .item-column.width-half {
        width: 100%;
        padding: 0 10% 1rem 10%;
    }

    #maven-image-row.image-row {
        justify-content: center;
        gap: .5rem;
        margin-top: 1.5rem;
    }

}

@media only screen and (max-width: 767px) {


}