div#sp-position2{display: none;}
div#sp-top-bar {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;
}
span.sp-menu-separator {
    color: #fff;
}
.burger-icon>span {background-color: #fff !important;} 
.connect-btn {color: #fff !important;}
/* ----- 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%;
}
#scrollable-content-top-placeholder {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.76) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 100%);
}

/* ------ Details Section ---- */
#maven-project-details .project-row{ /* the row inside the details row */
    margin-left:25px;
}
#maven-profile-details {
    background: #f6f6f6;
}
.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:50px;}

.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;
    }}
.description-headline{
    font-weight:bold;
    padding-bottom:2rem;
    font-size: 25px;
}

#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;}

.link-to-tagged-articles a{ /* link to the page of articles that share the project's tag */

}
.link-to-tagged-articles a:hover {
    text-underline-offset: 6px;
    text-decoration: underline;
}

.link-to-tagged-articles {
    padding-top: 45px;
}
/* ---- IMAGE ROW ---*/
#maven-image-row.image-row{ /* the two-image row.  a flexbox that responsively displays them side-by-side or stacked. */
    column-gap:1rem;
    padding-top:0;
    background: #f6f6f6;
}

.row-img-count-1 .row-image-container{ /* single image within image row */
    max-width:1500px;
}
.row-img-count-1 .row-image-container img{
    max-height:1000px;
}
@media only screen and (max-width: 1023px) {
    .image-row .row-image-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}



/* ----- 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;
}
    /* ---- font-size for quote based upon char count --- */

blockquote.quote-text.quote-length-short .maven-quote,  /* -- short -- */
blockquote.quote-text.quote-length-short .maven-quote p {
    font-size: 2.2rem;
}
blockquote.quote-text.quote-length-medium .maven-quote,   /* -- medium -- */
blockquote.quote-text.quote-length-medium .maven-quote p {
    font-size: 1.9rem;
}
blockquote.quote-text.quote-length-long .maven-quote,   /* -- long -- */
blockquote.quote-text.quote-length-long .maven-quote p {
    font-size: 1.6rem;
}
blockquote.quote-text.quote-length-xlong .maven-quote,    /* -- xlong -- */
blockquote.quote-text.quote-length-xlong .maven-quote p {
    font-size: 1.4rem;
}
blockquote.quote-text.quote-length-xxlong .maven-quote,     /* -- xxlong -- */
blockquote.quote-text.quote-length-xxlong .maven-quote p {
    font-size: 1.25rem;
}

.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;
    font-size: 1.5rem;
}
.quote-attribute-company {
    color: #ccc;
    font-size: 1.3rem;
}
@media only screen and (max-width: 1023px) {
    .project-row.quote-row {
        justify-content: center;
        align-content: center;
    }
}

/* --- vertical spacing when No Quote  --- */
.no-quote-row{
    height:100px;
}
@media (max-width: 1024px) {
    .no-quote-row {
    height: 30px;
}}
/* --------------- INSPIRATION ROW ---------------*/
#inspiration-row{ /* flexbox to responsively manage the positioining of its parts (image, text) */
    gap:1.5rem;
    /*padding: 100px 0 50px 0; -- see .a-narrative-row class below foe vertical spacing */
}
#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 {
    -webkit-box-shadow: 1px 1px 6px 1px rgba(0,0,0,0.23); 
box-shadow: 1px 1px 6px 1px rgba(0,0,0,0.23);
}

/*--------------- PROCESS & IMPACT ROWS ---------------*/
.a-narrative-row{
    padding-bottom:100px;
}
@media (max-width: 480px) {
    .a-narrative-row{
    padding-bottom:0px;
}}


#process-row,
#impact-row{ /* flexbox to responsively manage the positioning of this row and its parts (image, text) */
    gap:4rem;
    padding-top: 50px;
}

.project-row .item-column.text-col-left{
    padding-right:0; /* gutter already applied between text & image, but set here to add more padding */
}
.project-row .item-column.text-col-right{
    padding-left:0; /* gutter already applied between text & image, but set here to add more padding */
}

.process-headline,
.impact-headline{
    font-weight:bold;
    padding-bottom:2rem;
    font-size: 25px;
}

.process-image,
.impact-image{
    -webkit-box-shadow: 1px 1px 6px 1px rgba(0,0,0,0.23); 
box-shadow: 1px 1px 6px 1px rgba(0,0,0,0.23);
}

   /* - mobile sizes -- */
@media only screen and (max-width: 1023px) {
    #process-row,
    #impact-row{
        padding-top: 0;
    }
    .a-narrative-row{ 
        margin-bottom:40px; /* when image/text wrap to single column, and when viewed in mobile mode, reduce vertical spacing per row */
    }    

}

/* ---- THOUGHT LEADERSHOP ROW ---- */
#leadership-master-row{ /* the comprehensive row that contains title & articles and bleeds at edges */
    /*background:radial-gradient(farthest-corner at 298px 300px, #DB6631 0%, #db6631c4 15%, #DB6631 45%);*/
    background: url(/images/backgrounds/teal-folds.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding:85px 0;
    margin-bottom: 75px;
}
div#leadership-master-row h3.learn-more-heading {
    color: white;
    margin-bottom: 40px;
}
@media (max-width: 480px) {
    div#leadership-master-row h3.learn-more-heading {
        font-size: 2rem;
}}

.leadership-title-line h3{ /* the title above this row 'Relevant Thought Leadership */

}
#leadership-row{ /* the horzonal flex box that contains the article items */
    gap: 2rem;
}
@media only screen and (max-width: 1023px) {
    #leadership-row {
        gap: 4rem !important;
}}

#leadership-row > .leadership-row-container{  /* outer container per article, forcing each to 1/3 width */

}

#leadership-row a:hover > .article-box{ /* hover effect for link on article */
    transform: scale(1.02);
    transition: transform 0.4s ease;
}
#leadership-row .article-box { /* the box that displays the article */

}
@media only screen and (max-width: 1023px) {
    #leadership-row .article-box {
        padding-left: 0 !important; 
        padding-right: 0 !important;
}}

#leadership-row .article-img-box{ /* box that contains the image */

}
#leadership-row .article-title-box{ /* box that contains the title */
    color: #fff;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 20px;
}


/* ---- MASONRY ROW ---- */
@media (min-width: 1024px) {
    #masonry-row{ /* the flexbox container for the masonry */
    padding: 0 0 45px 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 */
    }
}
@media (max-width: 480px) {
    .maven-masonry .vert-flow {
        padding: 0 10px;
}}


    /* ---- LEARN MORE ROW (links) --- */
#learnmore-row.project-row{ /* the limited-width container for the content of Learn More */
padding: 0 0 50px 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 --- */
#related-projects h4 {font-weight: 500;margin: 30px 0 50px 0;}
#related-projects {
    background: url(/images/backgrounds/blue-folds.png);
    color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
    /*border-top: 1px solid var(--bs-primary);*/
    /*background: #284A66;*/
    /*background: radial-gradient(ellipse 80% 60% at 60% 20%, #f2d36e94, transparent 65%), radial-gradient(ellipse 70% 80% at 20% 80%, #DB6631, transparent 65%), radial-gradient(ellipse 60% 50% at 60% 65%, #284a66, transparent 62%), radial-gradient(ellipse 65% 50% at 50% 60%, #284a66, transparent 38%), linear-gradient(139deg, #DB6631 20%, #284a66 100%);*/
    /*background: radial-gradient(farthest-corner at 298px 300px, #284a66d9 0%, #66859B 15%, #284a66 45%);*/
    /*background-image: 
        linear-gradient(45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%);
      background-size: 40px 40px;
        webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%);*/
}
@media (min-width: 1024px) {
    #related-projects {
    padding: 5rem 3rem;
}}
.related-project-title {
    color: #fff;
}

#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 */

}
.image-container-related img:hover {
    background: rgba(0, 0, 0, 0.4) !important;
}
.related-project-title{ /* title for a given related article */

}
@media only screen and (max-width: 500px) {
    .related-project-title {
        font-size: 1.5rem;
    }
}
#related-projects .project-row {
    padding-bottom: 75px;
}

/* ===== 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 10px 1rem 10px;
    }

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

}

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


}