/*
Theme Name: cshl-coresite
Theme URI: http://underscores.me/
Author: Communications Department, ÐÇ¿Õ´«Ã½
Author URI: https://www.cshl.edu
Description: Custom styles for CSHL core-site theme
Version: 1.40
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cshl-coresite

cshl-coresite is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/


/* ===========================================================
    PREMLIMARY STYLESHEET CONTENTS
    
    1.  >>FONTS
    
    2.  >>MENUS and NAVBAR
    
    3.  >>GLOBAL TAG STYLES
    
    4.  >>PROVIDED BY CSHL
    
    5.  >>MEDIAQUERY TWEAKS
    
    6.  >>CALLOUTS
    
    7.  >>FOOTER
    
    8.  >>COLORS & CAROUSEL
    
    9.  >>MODULES
    
    10. >>UTILITY
    
    11. >>SPECIAL CASES & TWEAKS
	
	12. >> LABDISH
    
    
 ============================================================ */

/*--------------------------------------------------------------
 1. >>FONTS
--------------------------------------------------------------*/

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/wp-content/themes/cshl-coresite/fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/wp-content/themes/cshl-coresite/fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf');
  font-weight: bold;
  font-style: italic;
}


@font-face {
  font-family: 'Source Sans Pro';
  src: url('/wp-content/themes/cshl-coresite/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/wp-content/themes/cshl-coresite/fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/wp-content/themes/cshl-coresite/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf');
  font-weight: 300;
  font-style: normal;

}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('/wp-content/themes/cshl-coresite/fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf');
  font-weight: 300;
  font-style: italic;
}



@font-face {
  font-family: 'Noto Serif';
  src: url('/wp-content/themes/cshl-coresite/fonts/Noto_Serif/NotoSerif-Bold.ttf');
  font-weight: bold;
  font-style: normal;

}


@font-face {
  font-family: 'Noto Serif';
  src: url('/wp-content/themes/cshl-coresite/fonts/Noto_Serif/NotoSerif-BoldItalic.ttf');
       font-weight: bold;
       font-style: italic;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('/wp-content/themes/cshl-coresite/fonts/Noto_Serif/NotoSerif-Italic.ttf');
       font-style: italic;

}

@font-face {
  font-family: 'Noto Serif';
  src: url('/wp-content/themes/cshl-coresite/fonts/Noto_Serif/NotoSerif-Regular.ttf');
       font-weight: normal;
       font-style: normal;
}

/* font awesome 5 brand icons for Flipboard icon */
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fab.fa-pull-left { margin-right: .3em; }
.fab.fa-pull-right { margin-left: .3em; }

.fa-flipboard:before { content: "\f44d"; }

/* end font awesome 5 brand icons */


body {

   /* margin-top: 60px;*/
}

.percent50 {
    width: 50%;
    height: auto;
}



/* Additional Styles */

#jp-carousel-comments-loading {
    display: none !important;
}




/*--------------------------------------------------------------
 Galleries styles based on those in 2017 theme
--------------------------------------------------------------*/

.gallery-item {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    margin: 0 0 1.5em;
    padding: 0 1em 0 0;
    width: 50%;
}

.gallery-columns-1 .gallery-item {
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
    display: inline-block;
    max-width: 100%;
}

.gallery-item a img {
    display: block;
    -webkit-transition: -webkit-filter 0.2s ease-in;
    transition: -webkit-filter 0.2s ease-in;
    transition: filter 0.2s ease-in;
    transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gallery-item a:hover img,
.gallery-item a:focus img {
    -webkit-filter: opacity(60%);
    filter: opacity(60%);
}

.gallery-caption {
    display: block;
    text-align: left;
    padding: 0 10px 0 0;
    margin-bottom: 0;
}

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


/* Gallery Columns */

@media screen and (min-width: 639px) {
    .gallery-item {
        max-width: 25%;
    }
    .gallery-columns-1 .gallery-item {
        max-width: 100%;
    }
    .gallery-columns-2 .gallery-item {
        max-width: 50%;
    }
    .gallery-columns-3 .gallery-item {
        max-width: 33.33%;
    }
    .gallery-columns-4 .gallery-item {
        max-width: 25%;
    }
}

@media screen and (max-width: 638px) {
    .gallery-item {
        display: block;
        width: 100%;
    }
    .gallery-columns-2 .gallery-item {
        max-width: 100%;
    }
    .gallery-item img {
        max-width: 100%;
        height: auto;
    }
}


/*--------------------------------------------------------------
2. >>MENUS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
megamenu.js styles 
--------------------------------------------------------------*/
#primary-menu > li > a
{
font-family:"Source Sans Pro";
text-transform:uppercase;

}

.menu-container {

    margin: 0 auto;
    background: #e9e9e9;
    margin-right: 15px;
}

.menu-mobile {
    display: none;
/*    padding: 20px; */
    padding: 0px 20px 20px 20px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

 li.menu-minus-icon:before {
    content: "\f209";
    font-family: "Ionicons";
    cursor: pointer;
    float: right;
    padding: 1em 2em;
    background: #fff;
    color: #666;
    font-size: 95%;
    font-weight: 100;
}

 .menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;

    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
   /* background: #e9e9e9;*/
    padding: 0;
    margin: 0;
}

.menu > ul > li a {
    text-decoration: none;
    padding: 1.5em 3em;
    display: block;
}

.menu > ul > li:hover {
    background: #f0f0f0;
}   


.menu > ul > li.active a {
   /* color: #444;*/
   background: #f0f0f0;

}
.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: #f0f0f0;
    padding: 20px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    list-style: none;
    width: 25%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
	font-family:"Source Sans Pro"; /* added by Sue 3/26/18 */
    color: #777;
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 0;
    font-size: .9em; /* .8em; updated by Sue 3/26/18 */
}

.menu > ul > li > ul > li > ul > li a {
    border: 0;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}

#primary-menu ul.sub-menu, #primary-menu ul.sub-menu.normal-sub {
/*opacity:  1;*/
left: -100000px;
}

/* fixes  --added FLOAT */
.menu-container {
    width: auto;
    background:#F8F8F8;
    float:left;
    margin-left: 4px; /*to avoid menu hitting navbar-brand at smallest view before hamburger */
}
ul.show-on-mobile{

}
/*changed from 767px to 891x */
@media only screen and (max-width: 891px) {
#primary-menu ul.sub-menu, #primary-menu ul.sub-menu.normal-sub {
   left: 0;
   }
   
/*   .menu > ul > li > ul > li > ul.sub-menu{
   display:none;
   }*/
.menu-container {
    width: 100%;
   float: none;
   margin-top: 0px;
   clear:both;
}
.navbar-right {
    float: none;
    width: 100%;
}

 /* changed to absolute  */
    .menu-mobile {
        display: block;
        position:absolute;
        top:55px; /*38px;*/
        right:0;
    }
    .menu-dropdown-icon:before {
        display: block;
    }
    .menu > ul {
        display: none;
    }
    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }
    .menu > ul > li a {
        padding: 1em;
        width: 100%;
        display: block;
    }
    .menu > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul.normal-sub {
        width: 100%;
    }
    .menu > ul > li > ul > li {
        float: none;
        width: 100%;
        margin-top: 20px;
    }
    .menu > ul > li > ul > li:first-child {
        margin: 0;
    }
    .menu > ul > li > ul > li > ul {
        position: relative;
    }
    .menu > ul > li > ul > li > ul > li {
        float: none;
    }
    .menu .show-on-mobile {
        display: block;
    }
}

/*@media only screen and (max-width: 554px) {
    .menu-mobile { top:81px; }
}

@media only screen and (max-width: 349px) {
    .menu-mobile { top:107px; }
}*/

#primary-menu > li.menu-item.menu-item-has-children > ul > li > a
{
	line-height:1em;
	border: none;
}
/*--------------------------------------------------------------
#  Additional mobile menu styles -- rcg
--------------------------------------------------------------*/ 
@media only screen and (max-width: 891px) {

#primary-menu > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-dropdown-icon > a:first-of-type  {
padding-top: 16px;  
}

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children > a {
    width: 80%;
} 

li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children > a:first-child {
    padding-top: 28px;
} 
}
/*--------------------------------------------------------------
#  Clear Additional mobile menu styles at desktop for main menu -- rcg
--------------------------------------------------------------*/ 
@media only screen and (min-width: 891px) {

li.menu-minus-icon:before {
    content: "";
    padding: 0;
    }

.menu-dropdown-icon:before {
    content: "";
    padding:0;
    }
    
div.menu-container #primary-menu > li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-has-children.menu-dropdown-icon > a  {
    padding-top: 16px;  
    }   
    
        
}

/* ------------- NAVBAR  --------------------*/
ul.navbar-nav { font-family: 'Source Sans Pro',sans-serif; }
/*.navbar-brand {padding:5px 15px;}*/
.navbar { border-radius:0;
}


a.navbar-brand {
width:240px;
height:40px;
background-image:url(/wp-content/uploads/2017/04/cshllogo_standard_RGB.svg);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
margin-left:0px !important;
margin-top:7px;
}

@media (min-width: 768px) and (max-width: 991px){
a.navbar-brand {
/*width:100px;
height:50px;*/
/*background-image:url(/wp-content/uploads/2017/04/logo-alternate.svg);*/
background-size:contain;
background-position:center;
background-repeat:no-repeat;
margin: 10px 0px 4px 0px;
}
nav.navbar.navbar-default.navbar-static-top li a {
font-size: 13px;
padding: 16px 10px 17px 10px;
}
}
@media only screen and (max-width: 768px) {
a.navbar-brand {
/*width:100px;
height:50px;
background-image:url(/wp-content/uploads/2017/04/logo-alternate.svg);*/
background-size:contain;
background-position:center;
background-repeat:no-repeat;
/*margin-left:15px !important;*/
margin: 7px 0px 7px 7px;
}
}
@media (min-width: 992px) and (max-width: 1218px) {
nav.navbar.navbar-default.navbar-static-top li a {
font-size: 13px;
padding: 13px 10px 13px 10px;
}
}
@media (min-width: 1219px){
nav.navbar.navbar-default.navbar-static-top li a {
font-size: 14px;
padding: 13px 10px 13px 10px;
}
}


/* ------------- END NAVBAR  --------------------*/

/* ------------- Global Search Form  --------------------
#topContent > div > div > form > div span#theIcon{
position:relative;
left:23px;
vertical-align:middle;
z-index:100;
color:#999;
font-size:13px;
} */

/*--------------------------------------------------------------
3. >>GLOBAL Tag Styles
--------------------------------------------------------------*/
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #444444;
    font-family: 'Noto Serif',serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.5px;
}


h1 { font-family: 'Source Sans Pro',sans-serif; }
h2,h3,h4,h5,h6 {
    /*color: #444444;*/
    font-family: 'Source Sans Pro',sans-serif;
    font-weight: 400;
}

h1 {
    font-size: 33px;
    font-weight: 300;
    line-height: 38px;
    margin-top:0;
    margin-bottom:0;
}

/*Deck From sue mockups*/
.deck {
    font-style: italic;
    font-family: 'Source Sans Pro',sans-serif;
}

@media only screen and (min-width: 769px) {
    h1 {
        font-size:45px;
        line-height: 50px;
    }
    .deck {
        font-size:23px;
        line-height: 30px;
        margin-bottom:37.5px;
    }
}

h2 {
    font-size: 28px;
    line-height: 31px;
}

@media only screen and (min-width: 769px) {
    h2 {
        font-size:33px;
        line-height: 38px;
    }
}

h3 {
    font-size: 23px;
    line-height: 28.5px;
}

@media only screen and (min-width: 769px) {
    h3 {
        font-size:28px;
        line-height: 31px;
    }
}

h4 {
    font-size: 19px;
    line-height: 25.5px;
}

@media only screen and (min-width: 769px) {
    h4 {
        font-size:23px;
        line-height: 28.5px;
    }
}

h5, h6 {
    font-size: 17px;
    line-height: 23.5px;
    margin-bottom: 12.75px;
}

@media only screen and (min-width: 769px) {
    h5, h6 {
        font-size:20px;
        line-height: 25.5px;
    }
}

p {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Noto Serif',serif;
    font-size: 16px;
    font-weight: 400;
    line-height:26.5px; 
}

label {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Noto Serif',serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.5px;


}


a { color: #004982; }
a:hover { color: #6588a8; }




/*hr.hr-gradient {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.1), rgba(0, 0, 0,0));
} */

div.acf-field.acf-field-checkbox.acf-field-59c9431794557.pub-gradient > div.acf-input > ul > li {
/*    content : "YO";*/
   /* border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.1), rgba(0, 0, 0,0));
*/

background-color: black;
}




/*--------------------------------------------------------------
4. >>PROVIDED BY CSHL (through mockup HTML Bootstrap 3 code)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Sue's custom.css from mockups minus some global tag styles
# moved to appropriate sections
--------------------------------------------------------------*/
p { margin-bottom: 25.5px; }
p.mission { margin-top:25px; }
.callouts { margin-top:20px; }
.secondary { margin-top:75px; /*margin-bottom:50px;*/}
.white-row { background-color:#fff; padding:20px 0 40px 0; margin-top:40px; margin-bottom:40px; }
.gray-row { background-color:#efefef; padding:20px 0 40px 0; margin-top:60px; margin-bottom:40px; }
.gray-row h2,
.white-row h2 { margin-bottom:40px; font-weight:300; }

/*#topContent p { font-family:'Source Sans Pro',sans-serif; font-size:13px; margin:5px 0; }*/

.btn, button { font-family:'Source Sans Pro', sans-serif; }
.tag-cloud-link.btn { white-space:normal; } /* to prevent tag cloud buttons from extending past the viewport area */ 



p.social { width:90%; }
.wsbs { color:#8a132b; }



.boilerplate { font-size:15px; font-family: 'Source Sans Pro',sans-serif; }

.caption,
.article-text figcaption, 
article figure figcaption, 
figure figcaption, 
figcaption.wp-caption-text {
    color: #76736c;
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0 20px 0;
}
.caption.black,
.article-text figcaption.black, 
article figure figcaption.black, 
figure figcaption.black, 
figcaption.wp-caption-text.black { color:#000; }

p.social a:hover { color:#eee; }

.lead { font-family:'Source Sans Pro', sans-serif; } 


/*--------------------------------------------------------------
# Post Dateline
--------------------------------------------------------------*/

.article-date { 
    font-size: 16px; 
    color: #444444;
    font-family: 'Source Sans Pro',sans-serif; 
}
.video-meta p {
    font-family: 'Source Sans Pro',sans-serif; 
	color:#666;
	font-size:16px;
	margin-bottom:0;
}

li.quick-facts-li{ 
    font-size: 16px; 
    font-family: 'Noto Serif', serif; 
    color: #444444!important;
}



/*--------------------------------------------------------------
5. >>MEDIAQUERY TWEAKS
--------------------------------------------------------------*/


/* Large desktops and laptops */
         
         @media (min-width: 1200px) {

            .callout-label {

                    top: 1px;
                    left: 16px;
                    position:absolute; 
                    z-index:10; 
                    padding: 10px;
            }
           
         }
         
         
         /* Landscape tablets and medium desktops */
         
         @media (min-width: 992px) and (max-width: 1199px) {
            .callout-label {

                font-size: 10px;
            }
         
         }
        
        /*ipad Pro*/
        @media (min-width: 991px) and (max-width: 1200px) {

             .callout-label {

                    top: 1px;
                    left: 16px;
                    position:absolute; 

                    z-index:10; 
                    
                    padding: 10px;


            }

        }
        
         /* Portrait tablets and small desktops */
         
         @media (min-width: 768px) and (max-width: 991px) {

             .callout-label {

                top: 1px;
                left: 16px;
                position:absolute; 

                z-index:10; 
                
                padding: 8px;

                font-size: 8px;


            }
             
         }
        
        
        
         /* Landscape phones and portrait tablets */
         
         @media (max-width: 767px) {

            .callout-label {

                top: 1px;
                left: 16px;
                position:absolute; 

                z-index:10; 
                
                padding: 10px;

                font-size: 10px;


            }
             
         }

/*RG TEMP FIX FOR RANDOM SHIFT AT UNDER 600*/
          @media (min-width: 600px) and (max-width: 766px) {

              .callout-label {

                top: 1px;
                left: 16px;
                position:absolute; 

                z-index:10; 
                
                padding: 10px;

                font-size: 8px;


            }

          }
         
         
         
         /* Portrait phones and smaller */
         @media (max-width: 599px) {

            .callout-label {

                top: 16px;
                left: 16px;
                position:absolute; 

                z-index:10; 
                
                padding: 10px;

            }
             
  
           }
         
/*--------------------------------------------------------------
# 6. >>CALLOUTS
--------------------------------------------------------------*/

        
/**/
/**/
/*IMPORTANT!!!!*/
/*YOU CANNOT CHANGE THESE CSS NAMES OR IT WILL BREAK THE CALLOUT COLORING*/
/**/
/**/

/*DO NOT EDIT NAME FOR CALLOUT*/
div.callout-label{
font-family: 'Source Sans Pro', sans-serif !important;
}

.callout-gold-bg {
background: rgb(197,167,80)!important;
color: white;

}


/*DO NOT EDIT NAME FOR CALLOUT*/
.callout-blue-bg {

background: rgb(0,73,130) !important;
color: white;

}

/*DO NOT EDIT NAME FOR CALLOUT*/
.callout-red-bg {

background: rgb(138,19,43) !important;
color: white;


}

/*DO NOT EDIT NAME FOR CALLOUT*/
.callout-green-bg {

background: rgb(178,216,131) !important;
color: white;


}

a.calloutbox h3,
a.calloutbox p { color:#444; }
a:hover.calloutbox { text-decoration:none; }
a.calloutbox i.fa { color:#004982; }
a:hover.calloutbox i.fa { color:#6588a8; }

/*--------------------------------------------------------------
# Callout panels
--------------------------------------------------------------*/
.panel.panel-default.panel-callout { margin-bottom:20px; }
.panel-default.panel-callout div.panel-heading { border-color:transparent; background-color:transparent; }
.panel-default.panel-callout a { width:100%; }
.panel-callout { border-radius:0px; border:1px solid #d4d4d4!important; }
.panel-callout .panel-heading .panel-title img { border-radius:0px; width:100%; }
.panel-callout .panel-heading { padding: 0px; width:100%; color:#fff; }
.panel-callout .panel-heading h4 { line-height: 0; }
.panel-callout a:hover { text-decoration:none; }

.panel-callout .panel-heading h5.panel-subtitle { text-transform:uppercase; background-color:#004982; margin-top:0; padding:10px 15px; /*letter-spacing:0px;*/ font-size:18px;}

.panel-callout a div.panel-heading h5.panel-subtitle { color:#fff; }
/*.panel-callout a div.panel-heading h5:hover.panel-subtitle { text-decoration:none; } */

.panel-callout .panel-body { width:100%; }
.panel-callout .panel-body h4 { margin-top:0; margin-bottom: 15px; }
.panel-callout a div.panel-body h4,
.panel-callout a div.panel-body p { color: #444; }
span.calloutButtonText { font-weight:600; display:inline-block; }

@media (min-width: 768px) { 
	.panel.panel-default.panel-callout { margin-bottom:0; }
}


/*--------------------------------------------------------------
# Newsstand/Division Carousel 
--------------------------------------------------------------*/

div#divisionCarousel { margin-top:10px; margin-bottom:30px; }
#divisionCarousel ol.news-carousel-indicators { bottom:-40px!important; }
#divisionCarousel .carousel-indicators li { margin:0 3px; vertical-align:middle; }

#divisionCarousel .carousel-inner>.item>img, #divisionCarousel .carousel-inner>.item>a>img { width:100%; }

ol.news-carousel-indicators{ bottom:0px!important; }

.news-button-position { text-align:center!important; }

/* Since positioning the image, we need to help out the caption */
.news-carousel-caption { z-index: 10; }

#divisionCarousel .news-carousel-caption { padding-bottom:20px; }

.news-carousel-caption { width:100%; left:0; right:0; bottom:0; padding-top:0; padding-left:20px; padding-right:20px; background: rgba(0,0,0,.5); }
.news-carousel-caption a:hover { color:#fff; text-decoration:none; }
.news-carousel-caption span.carouselButtonText { font-weight:600; }

.news-carousel-caption h2 { color:#fff; font-size:20px; line-height:24px; text-align:left; margin-top:10px; margin-bottom:5px; }
.news-carousel-caption p { display:none; }

.news .carousel-control .glyphicon-chevron-left,
.news .carousel-control .icon-prev { left:0; }

.news .carousel-control .glyphicon-chevron-right,
.news .carousel-control .icon-next { right:0; }



@media (min-width: 768px) { 
	div#divisionCarousel { margin-top:0; }
	.news-carousel-caption h2 { font-size:30px; line-height:32px; }
	.news-carousel-caption p { font-size:16px; line-height: 20px; color:#fff; text-align:left; margin-bottom:5px; display:block; }
    .news .carousel-control .glyphicon-chevron-left,
	.news .carousel-control .glyphicon-chevron-right,
	.news .carousel-control .icon-prev,
	.news .carousel-control .icon-next {
        width:70px; 
		height:70px; 
		font-size:70px;
		top:45%;
    }

}


/*--------------------------------------------------------------
# Carousel - fixed heading
--------------------------------------------------------------*/

.item {
  background-size: cover;
  background-position: 50% 30%;
  width: 100%;
  height: 100%;
}
#home-carousel .item { height:500px; }

.carousel .heading h4 { font-weight:300; }

.carousel-caption {

    padding-bottom: 40px; /*100px;*/
}

.carousel-caption span { padding: 6px 8px; }


 /* Large desktops and laptops */

 @media (min-width: 1200px) {

.carousel .heading {
    top: 20%;
    position:absolute;
    /*right:15%; */
    /*top:40%;; */
    /*left:10%;*/
    z-index:10;

    padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    /*padding-bottom:20px; */
    /*text-align:center; */
    /*text-shadow:0 1px 1px */
   /* color: #fff;
    background-color: rgba(0,0,0,0.6);  */


}


 }


 /* Landscape tablets and medium desktops */

 @media (min-width: 992px) and (max-width: 1199px) {

    .carousel .heading {
    top: 20%;
    position:absolute;
    /*right:15%; */
    /*top:40%;; */
    /*left:5%; */
    z-index:10;
      padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    /*padding-bottom:20px; */
    /*text-align:center; */
   /* text-shadow:0 1px 1px */
   /* color: #fff;
    background-color: rgba(0,0,0,0.6); */
	}
}



 /* Portrait tablets and small desktops */

 @media (min-width: 768px) and (max-width: 991px) {

     .carousel .heading {
    top: 20%;
    position:absolute;
    /*right:15%; */
    /*top:40%;; */
    /*left:5%; */
    z-index:10;
      padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    /*padding-bottom:20px; */
    /*text-align:center; */
    /*text-shadow:0 1px 1px */
    /*color: #fff;
    background-color: rgba(0,0,0,0.6); */
	}
}

/*ipad Pro*/
 @media (min-width: 991px) and (max-width: 1200px) {

     .carousel .heading {
    top: 20%;
    position:absolute;
    /*right:15%; */
    /*top:40%;; */
    /*left:5%; */
    z-index:10;
      padding-top: 15px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    /*padding-bottom:20px; */
    /*text-align:center; */
    /*text-shadow:0 1px 1px */
    /*color: #fff;
    background-color: rgba(0,0,0,0.6); */
	}
}


 /* Landscape phones and portrait tablets */

 @media (max-width: 767px) {
         .carousel .heading {
/*    top: 20%;*/  /* commented out by Sue 3/26/18 so carousel header text pins under the navbar */
    position:absolute;
    /*right:15%; */
    /*top:40%;; */
    /*left:10%;*/
    z-index:10;
      padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    /*padding-bottom:20px; */
    /*text-align:center; */
    /*text-shadow:0 1px 1px */
   /* color: #fff;
    background-color: rgba(0,0,0,0.6);
*/

}

    div.heading h1 {

        font-size: 40px;
        font-weight: 300;
        line-height: 38px; 

    }

    div.heading h4 {
        font-size: 20px;
        line-height: 20px;
    }

 }



 /* Portrait phones and smaller */

 @media (max-width: 480px) {

    .carousel .heading {
    top: 0;
    position:absolute;   
    z-index:10;
    padding:10px;
    width: 100%;

}

div.heading h1 {

        font-size: 30px; /* 40px; updated by Sue 3/26/18 */
        font-weight: 300;
        line-height: 32px; /* 38px; updated by Sue 3/26/18 */

    }

    div.heading h4 {
        font-size: 18px; /* 20px; updated by Sue 3/26/18 */
        line-height: 20px;
    }

    .carousel-indicators {

        display: none;

    }



     }


#moreFromLab .carousel-inner.ag-eqht {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}





/*--------------------------------------------------------------
7. >>FOOTER - CSHL Sue
--------------------------------------------------------------*/

/*footer {
    background:#004982;

    color:#eee;
    padding-top:20px;
    color:#c5a750;
    font-size:19px;
    line-height:29px;
    font-family: 'Source Sans Pro', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: grayscale;
    margin-top:50px;
    }*/

/*Moved here From Rob's temporary fix */

/*footer#colophon.site-footer{
    background:#004982;
     color:#fff;
}

footer p {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:19px;

}

.site-footer h3 {color:#c5a750; font-size:28px; margin-bottom:8px; }
.site-footer a { color:#f0f0f0; }
.site-footer a:hover { color:#c5a750; }
.site-footer a.btn.btn-warning { color:#fff; width:100%; }
.site-footer a.btn.btn-default { color:#333; width:100%; }
.site-footer label { color:#c5a750; font-size:22px; font-weight:400; font-family: 'Source Sans Pro', sans-serif; }
.site-footer p.social { width:100%; margin-top:0; margin-bottom:15px; }
.site-footer p.social a:hover { color:#c5a750; }
.site-footer .flipboard { color:#004982;  font-family:arial; font-weight:600; margin-top:0.04em; }
.site-footer .fa-stack { margin-bottom:14px; }
*/
/*@media only screen and (max-width: 991px) {
	.footer-nav  div.col-sm-4:nth-child(3n+5) { clear:both; }
}
*/
/*setting max-width here to remove the photo when the screen is wider than the photo dimensions*/
/*@media (min-width:768px) and (max-width:2000px) {
    footer {
        background:#004982 url('/wp-content/uploads/2017/09/footer-background2.jpg') no-repeat right top;
        font-size:15px;
        font-weight:300;
        line-height:24px;
    }
        footer#colophon.site-footer{
    background:#004982 url('/wp-content/uploads/2017/09/footer-background2.jpg') no-repeat right top;
     color:#fff;
}


footer p {
    font-family: 'Source Sans Pro', sans-serif;
    font-size:15px;

}

    .site-footer h3 { font-size:22px; margin-bottom:5px; }
    .site-footer a .glyphicon { font-size:85%; }
    .site-footer label { font-size:17px; }
    .site-footer a.btn.btn-warning,
    .site-footer a.btn.btn-default { width:auto; }
}

span.social.pull-right { margin-left:20px; }

*/


/*--------------------------------------------------------------
8. >>COLORS & CAROUSEL 
--------------------------------------------------------------*/

/*Light Grey

#a2a2a2;

rgba(162, 162, 162, 0.9);

Grey

#444444;
rgba(68, 68, 68, 0.9);

Black

#000000;


Orange

#ef4e22;
rgba(239, 78, 34, 0.9);

Gold

#c5a750
rgba(197, 167, 80, 0.9);


CSHL Blue

#004982;
rgba(0, 73, 130, 0.9);


Light Blue

#6588a8;
rgba(101, 136,168, 0.9);


Green

#b2d883;
rgba(178, 216,131, 0.9);

Watson School Red

#8a132b;
rgba(138, 19, 43, 0.9);


DNALC Red

#9c182f;
rgba(156, 24, 47, 0.9);*/



/*--------------------------------------------------------------
# Background Colors: CSHL Color Palette
--------------------------------------------------------------*/

.transparent-gray-bg {
    color: #fff;
    /*background: rgba(0,0,0,0.6); */
    background: rgba(162, 162, 162, 0.3);
}

.carousel-transparent-gray-bg {
    color: #fff;
    background: rgba(0,0,0,0.6);

}

.carousel-transparent-watson-red-bg {

    color: #fff;
    background: rgba(138, 19, 43, 0.6);

}

.carousel-transparent-gold-bg {
    color: #fff;
    background: rgba(197,167,80,0.6);

}

.carousel-transparent-gold-bg-black-text {
    color: black;
    background-color: rgba(197,167,80,0.6);

}


.gray-bg {

    background-color: #444444;
    color: white;


}

.lt-gray-bg {

  background-color: #a2a2a2;
  color: white;


}

.orange-bg {


    background-color: #ef4e22;
    color: white;

}

.gold-bg {

background: #c5a750;

}




.blue-bg {


    background: #004982;

    color: white;

}



.transparent-blue-bg {
    background-color: rgba(0, 73, 130, 0.9);
    color: #fff;
    }


.light-blue-bg{
background-color: #6588a8;
}



.green-bg {

background: #b2d883;
color: #fff;

}

.watson-red-bg{

background: #8a132b;
color: #fff;

}



.dnalc-red-bg {

background: #9c182f;

}

/*--------------------------------------------------------------
# Font Colors: CSHL Color Palette


/**/
/*!!!IMPORTANT!!! 
FONT NAMES CANNOT BE CHANGED, OTHERWISE CALLOUTS WILL NOT RENDER WITH COLORS*/
/**/
/*--------------------------------------------------------------*/


/*DO NOT EDIT NAME for callout*/
.blue-font {

    color: #004982;
}

/*DO NOT EDIT NAME for callout*/
.gold-font{
    
    color: #c5a750;
}

/*DO NOT EDIT NAME for callout*/
.red-font {

    color: #8a132b;
}


/*DO NOT EDIT NAME for Student Perspective*/
.watson-red-font {

    color: #8a132b;
}


.orange-font {

 color: #ef4e22;

}

.green-font {

 color: #b2d883;

}

/*--------------------------------------------------------------
# Box Borders
--------------------------------------------------------------*/
.gray-border{ border: 1px solid #d4d4d4; }

.gray-border-bottom { border-bottom: 1px solid #d4d4d4; }


/*--------------------------------------------------------------
# Font Mods
--------------------------------------------------------------*/

        .juicy {
             font-weight: 400;
         }


         /* feather does not work with the VAG Rounded Font so not implemented */
         .feather {
             font-weight: 200;
         }

         .bigify {
             font-size: 30px;
         }




/*--------------------------------------------------------------
# Overrides
--------------------------------------------------------------*/


  .make-hidden {

    display: none;

  }

 img.sm-border-radius {
             border-radius: 5px;

}

.contain {


    max-height: 300px;
    /*border: 5px dotted red;*/
}

.contain img {
    background-size: 100% auto;
    /*max-height: inherit;*/
}


.banner-overlay-header {
    z-index: 10;
    color: #444;
    /*padding-top: 50px;
    padding-bottom: 30px;*/
    font-size: 45px;
    line-height: 48px;
}

.overlay-caption {
    position: absolute;
    bottom: 20px;
    /*left: 50%;*/
    left: -5px;
    z-index: 10;
    color: white;
    padding: 20px;
    font-size: 24px;
    font-style: italic;
    
}

 /* Landscape phones and portrait tablets */

         @media (max-width: 767px) {

        .banner-overlay-header{

            /* padding-top: 30px;
             padding-bottom: 15px;*/

             font-size: 40px;

            }
         }

/* Portrait phones and smaller */

         @media (max-width: 480px) {

            .overlay-caption { font-size: 15px; }
            .banner-overlay-header{

                /*padding-top: 30px;
                padding-bottom: 15px;*/

                font-size: 39px;

         }

}

/*--------------------------------------------------------------
# Bootstrap Right Offset
--------------------------------------------------------------*/

@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}


/*--------------------------------------------------------------
# Carousel overrides - Sue
--------------------------------------------------------------*/

.carousel-indicators li { border: 1px solid #ef4e22; }
.carousel-indicators .active { background-color:#ef4e22; }
.carousel-indicators li:last-child { border-bottom: 1px solid #ef4e22; }




/*--------------------------------------------------------------
9. >>MODULES
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Text over image
--------------------------------------------------------------*/
.ribbon {
    position: relative;
}
.ribbon img {
    width: 100%;
}
.photo-caption {
    position: absolute;
    /*top: 15px;*/
    right: 30px;

    bottom: 15px;
    left: 30px;
    color: #fff;
    background: rgba(0,0,0,0.7);
}

/*--------------------------------------------------------------
# Content card
--------------------------------------------------------------*/


.content-card {


    border-top: 4px solid #d4d4d4;
    border-bottom: 4px solid #d4d4d4;

}

/*--------------------------------------------------------------
# Bottom Feature Box
--------------------------------------------------------------*/

.bottom-feature-box,
         .bottom-feature-box h2,
         .bottom-feature-box h3,
         .bottom-feature-box p {
             margin-bottom: 1.08em;
         }

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

/* bootstrap overrides */
.btn-warning { color:#000000!important; }
.btn-lg {
    font-size: 19px!important;
    line-height: 1.3333333!important;
}
/* end bootstrap overrides */

  .bottomaligned {position:relative; bottom:0;  margin-bottom:20px;}


button.btn-learn-more-ag,
button.libchat_online,
button.btn-learn-more-ag-red,
button.btn-learn-more-ag-gold,
button.btn-index,
a.btn-learn-more-ag,
a.btn-learn-more-ag-blue,
a.btn-learn-more-ag-green,
a.btn-learn-more-ag-light-blue,
a.btn-learn-more-ag-gold,
a.btn-learn-more-ag-red {
	border-radius: 0;
 	text-transform: uppercase;
	padding: 10px 20px 10px 20px;
	margin: 8px 0;
	font-size: 1.2em;
}

/* CSHL Blue ghost button */
.btn-ghost { border-radius: 0; text-transform: uppercase; }
.btn-ghost { color:#004982; background:#fff; border-color:#004982; /*padding:9px 20px 9px 20px; */ }
.btn-ghost:hover { color:#fff; background:#004982; }

button.btn-learn-more-ag,
button.libchat_online {
	background: #004982;
	color: white;
	border: none;
}

button.btn-learn-more-ag:hover,
button.libchat_online:hover  {
	background: #6588a8;
	color: white;
	border: none;
}

button.btn-learn-more-ag:focus,
button.libchat_online:focus  { color:#fff; }

button.btn-learn-more-ag-red {
	background: #8a132b;
	color: white;
	border: none;
}

button.btn-learn-more-ag-red:hover {
	background: #5d0d1d; /*#b5304b; */
	color: white;
	border: none;
}
button.btn-learn-more-ag-red:focus { color:#fff; }

button.btn-learn-more-ag-gold {
	background: #c5a750;
	color: #000;
	border: none;
}

button.btn-learn-more-ag-gold:hover {
	background: #a88950; /*#f7e3a8; */
	color: #000;
	border: none;
}

button.btn-index {
	background:#fff;
	color:#004982;
	border-color:#004982;
	/*font-weight:800;*/
	padding: 5px 15px;
}
button.btn-index:hover {
	background: #004982;
	color: #fff;
}
button.btn-index:focus {
	background: #ef4e22;
	color:#000;
    outline-offset: 0;
	/*outline-color:#ef4e22;*/
}
button.btn-index.jplist-selected {
	background: #ef4e22;
	color:#000;
}
/*CSHL Blue Button Fallback:*/
a.btn-learn-more-ag {
	background: #004982;
	color: white;
	border: none;
}

a.btn-learn-more-ag:hover {
	background: #6588a8;
	color: white;
	border: none;
}
a.btn-learn-more-ag:focus { color:#fff; }


/*CSHL Blue Buttons:*/
a.btn-learn-more-ag-blue {
	background: #004982;
	color: white;
	border: none;
}

a.btn-learn-more-ag-blue:hover {
	background: #6588a8;
	color: white;
	border: none;
}
a.btn-learn-more-ag-blue:focus { color:#fff; }

/*Green Buttons*/
a.btn-learn-more-ag-green {
	background: #b2d883;
	color: #000;
	border: none;
}

a.btn-learn-more-ag-green:hover {
	background: #85A262; /*#00ff99*/;
	color: #000;
	border: none;
}

/*Light Blue Button*/
a.btn-learn-more-ag-light-blue {
	background: #6588a8;
	color: #000000; /*white;*/
	border: none;
}

a.btn-learn-more-ag-light-blue:hover {
	background: #004982;
	color: #000000; /*white;*/
	border: none;
}

/*Gold Button*/
a.btn-learn-more-ag-gold {
	background: #c5a750;
	color: #000;
	border: none;
}

a.btn-learn-more-ag-gold:hover {
	background: #a88950; /*#f7e3a8; */
	color: #000;
	border: none;
}

/*WSBS Red*/
a.btn-learn-more-ag-red {
	background: #8a132b;
	color: white;
	border: none;
}

a.btn-learn-more-ag-red:hover {
	background: #5d0d1d; /*#b5304b; */
	color: white;
	border: none;
}
a.btn-learn-more-ag-red:focus { color:#fff; }

/* wsbs social icons */
a:hover.watson-red-font span.fa,
a:hover.watson-red-font i.fa { color: #5d0d1d; }

/*Load More Button*/
.juicer-feed .j-paginate {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: normal;                
    border-radius: 0;
    border: none;
    background: #c5a750;
    color: white;
    text-transform: uppercase;
    padding: 10px 20px 10px 20px;
    margin: 8px 0;
}

.juicer-feed:hover .j-paginate:hover {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    font-weight: normal;                
    border-radius: 0;
    border: none;
    background: #f7e3a8;
    color: white;
    text-transform: uppercase;
    background-repeat: no-repeat;
    padding: 10px 20px 10px 20px;
    margin: 8px 0;
}


@media (min-width: 992px) {
/*	.btn-ghost,*/
	button.btn-learn-more-ag,
	button.btn-learn-more-ag:hover,
	button.libchat_online,
	button.libchat_online:hover,
	button.btn-learn-more-ag-red,
	button.btn-learn-more-ag-gold,
	a.btn-learn-more-ag,
	a.btn-learn-more-ag:hover,
	a.btn-learn-more-ag-blue,
	a.btn-learn-more-ag-blue:hover,
	a.btn-learn-more-ag-green,
	a.btn-learn-more-ag-green:hover,
	a.btn-learn-more-ag-light-blue,
	a.btn-learn-more-ag-light-blue:hover,
	a.btn-learn-more-ag-gold,
	a.btn-learn-more-ag-gold:hover,
	a.btn-learn-more-ag-red,
	a.btn-learn-more-ag-red:hover { font-size: 1em; }
}
/*--------------------------------------------------------------
# Impact Box
--------------------------------------------------------------*/

/*ca moved the h2 and h3 to the media-body area and set this to 0px so they are
 flush with the image so this style is no longer needed*/
 /* increases the h2 margin-top for impact boxes */

         div.impact h2 {
             margin-top: 0px;
         }

          div.impact-video h2 {
             margin-top: 0px;
         }

         

         div.impact h2,
         div.impact h3, 
         div.impact h4 {
             padding-left: 15px;
         }


          div.impact-video h2,
         div.impact-video h3, 
         div.impact-video h4 {
             padding-left: 0px;
         }

        div.media {
             margin-top: 15px;
             padding: 15px;
         }

        div.media-body, 
        div.media-body h2, 
        div.media-body h3,
        div.media-body h4,
        div.media-body p {
             padding: 0 15px;
         }


         .media-object-ag {
             max-width: 44%;
             height: auto;
             padding: 0 10px 10px 0;
         }


/*--------------------------------------------------------------
10. >>UTILITY 
--------------------------------------------------------------*/

.alignleft {
float:left;
margin-right:25px;
}
.alignright {
float:right;
margin-left:25px;
}

/*--------------------------------------------------------------
# Padding
--------------------------------------------------------------*/

.pad-5 { padding: 5px; }
.pad-10 { padding: 10px; }
.pad-15 { padding: 15px; }
.pad-20 { padding: 20px; }
.pad-25 { padding: 25px; }
.pad-30 { padding: 30px; }
.pad-35 { padding: 35px; }
.pad-40 { padding: 40px; }
.pad-45 { padding: 45px; }
.pad-50 { padding: 50px; }
.pad-top-10 { padding-top: 10px; }
.pad-top-20 { padding-top: 20px; }
.pad-top-30 { padding-top: 30px; }
.pad-top-40 { padding-top: 40px; }
.pad-top-50 { padding-top: 50px; }
.pad-top-60 { padding-top: 60px; }


/*--------------------------------------------------------------
# Margins
--------------------------------------------------------------*/

/*place this on the div container that the image is in to make it take up the full width*/
.img-margin-none {
    margin-right: -15px;
    margin-left: -15px;
}

.area-start { margin-top: 20px; }

.negative-margin-left-20 { margin-left: -20px; }

.bottom-margin-0 { margin-bottom: 0px; }
.bottom-margin-5 { margin-bottom: 5px; }
.bottom-margin-10 { margin-bottom: 10px; }
.bottom-margin-15 { margin-bottom: 15px; }
.bottom-margin-20 { margin-bottom: 20px; }
.bottom-margin-25 { margin-bottom: 25px; }
.bottom-margin-30 { margin-bottom: 30px; }
.bottom-margin-35 { margin-bottom: 35px; }
.bottom-margin-40 { margin-bottom: 40px; }
.bottom-margin-45 { margin-bottom: 45px; }
.bottom-margin-50 { margin-bottom: 50px; }
.bottom-margin-75 { margin-bottom: 75px; }
.bottom-margin-100 { margin-bottom: 100px; }

.top-margin-0 { margin-top: 0; }
.top-margin-5 { margin-top: 5px; }
.top-margin-10 { margin-top: 10px; }
.top-margin-15 { margin-top: 15px; }
.top-margin-20 { margin-top: 20px; }
.top-margin-25 { margin-top: 25px; }
.top-margin-30 { margin-top: 30px; }
.top-margin-35 { margin-top: 35px; }
.top-margin-40 { margin-top: 40px; }
.top-margin-45 { margin-top: 45px; }
.top-margin-50 { margin-top: 50px; }
.top-margin-60 { margin-top: 60px; }
.top-margin-70 { margin-top: 70px; }
.top-margin-75 { margin-top: 75px; }
.top-margin-80 { margin-top: 80px; }
.top-margin-90 { margin-top: 90px; }
.top-margin-100 { margin-top: 100px; }
.top-margin-110 { margin-top: 110px; }
.top-margin-120 { margin-top: 120px; }
.top-margin-130 { margin-top: 130px; }
.top-margin-140 { margin-top: 140px; }
.top-margin-150 { margin-top: 150px; }
.top-margin-160 { margin-top: 160px; }
.top-margin-170 { margin-top: 170px; }
.top-margin-180 { margin-top: 180px; }
.top-margin-190 { margin-top: 190px; }
.top-margin-200 { margin-top: 200px; }


/*--------------------------------------------------------------
11. >>SPECIAL CASES AND TWEAKS 
--------------------------------------------------------------*/

/* MEDIA QUERY TWEAKS ############################################### */
    
         /* Large desktops and laptops */

         @media (min-width: 1200px) {
           /*  h2:after {
                 content: " (Large Width)";
             }*/

             h2.note-ag:after{

            content: "(Large Width)";

             }

             div.panel-heading a {
               /*  display: none; */
             }
             /* BASE  STYLES */
             .captionWrapper {
                 position: relative;
                 display: inline-block;
             }
             .captionWrapper img {
                 display: inline-block;
                 width: 100%;
             }
             div.captionCustom {
                 background: #005DAB;
                 top: 5%;
                 height: 90%;
                 padding: 10px;
                 position: absolute;
                 right: 2%;
                 width: 40%;
             }
             div.captionCustom p {
                 color: #fff;
                 font-size: .8em;
                 line-height: 1.4;
                 font-family: 'Noto Serif', serif;
             }
             div.captionCustom p:first-child {
                 margin-top: -5px;
             }
             div.captionCustom h3 {
                 font-size: 1.4em;
                 line-height: 1.4;
                 font-weight: normal;
                 color: white;
                 font-family: 'Noto Serif', serif;
             }

             .row-bread {
                 padding-left: 15px;
             }
             /* to horizontally align buttons */
             .min-heightify {
                 min-height: 625px;
             }
             .btnWrapper {
                 width: 90%;
                 margin-left: 10%;
             }
         }


         /* Landscape tablets and medium desktops */

         @media (min-width: 992px) and (max-width: 1199px) {
          /*   h2:after {
                 content: " (Medium Width)";
             }*/

               h2.note-ag:after{

            content: "(Medium Width)";

             }
             div.panel-heading a {
                /* display: none;*/
             }
             div.panel-heading a {
                 /* display: none;*/
             }
             /* CAPTION STYLES */
             .captionWrapper {
                 position: relative;
                 display: inline-block;
             }
             .captionWrapper img {
                 display: inline-block;
                 width: 100%;
             }
             div.captionCustom {
                 background: #005DAB;
                 top: 5%;
                 height: 90%;
                 padding: 10px;
                 position: absolute;
                 right: 2%;
                 width: 40%;
             }
             div.captionCustom p {
                 color: #fff;
                 font-size: .8em;
                 line-height: 1.4;
                 font-family: 'Noto Serif', serif;
             }
             div.captionCustom h3 {
                 font-size: 1.2em;
                 line-height: 1.4;
                 font-weight: normal;
                 color: white;
                 font-family: 'Noto Serif', serif;
             }


             .row-bread {
                 padding-left: 15px;
             }
             .active-parent-agsw {
                 background-position: left 35%;
             }
             /* to horizontally align buttons */
             .min-heightify {
                 min-height: 625px;
             }
             .btnWrapper {
                 width: 100%;
                 margin-left: 0px;
             }
             div.col-sm-2 a.give-main {
                 margin-top: 14px;
             }
         }



         /* Portrait tablets and small desktops */

         @media (min-width: 768px) and (max-width: 991px) {
             div.panel-heading a {
                /* display: none;*/
             }
          /*   h2:after {
                 content: " (Small Width)";
             }*/

               h2.note-ag:after{

            content: "(Small Width)";

             }

             div.panel-heading a {
                /* display: none;*/
             }
             div.captionCustom {
                 background: #005DAB;
                 height: 90%;
                 left: 0;
                 padding: 10px;
                 position: relative;
                 top: 100%;
                 width: 100%;
             }
             div.captionCustom p {
                 color: #fff;
                 font-size: .7em;
                 line-height: 1.3;
                 font-family: 'Noto Serif', serif;
             }
             div.container div.captionCustom h3 {
                 font-size: 1em;
                 line-height: 1.4;
                 font-weight: normal;
                 color: white;
                 font-family: 'Noto Serif', serif;
             }



             /* to horizontally align buttons */
             .min-heightify {
                 min-height: 350px;
             }

             .btnWrapper {
                 width: 100%;
                 margin-left: 0px;
             }
             div.col-sm-2 a.give-main {
                 margin-top: 16px;
             }
             .panel-heading {
                 padding: 10px 15px;
             }
         }



         /* Landscape phones and portrait tablets */

         @media (max-width: 767px) {
             div.panel-heading a {
                 display: inline-block;
                 color: #0072c6;
             }
          /*   h2:after {
                 content: " (Extra Small Width, Landscape)";
             }*/

               h2.note-ag:after{

            content: "(Extra Small, Landscape)";

             }

             div.panel-heading a {
                 display: inline-block;
                 color: #0072c6;
             }
             div.captionCustom {
                 background: #005DAB;
                 height: 90%;
                 left: 0;
                 padding: 10px;
                 position: relative;
                 top: 100%;
                 width: 100%;
             }
             div.captionCustom p {
                 color: #fff;
                 font-size: .7em;
                 line-height: 1.3;
                 font-family: 'Noto Serif', serif;
             }
             div.captionCustom h3 {
                 font-size: 1em;
                 line-height: 1.4;
                 font-weight: normal;
                 color: white;
                 font-family: 'Noto Serif', serif;
             }

             div.container h1 {
                 padding-left: 0px;
             }
             .row-bread {
                 padding-left: 0px;
             }

             .btnWrapper {
                 width: 100%;
                 margin-left: 0px;
             }

             div.col-sm-2 a.give-main {
                 margin-top: 0px;
             }
                .panel-heading {
                 padding: 10px 15px;
             }
         }



         /* Portrait phones and smaller */

         @media (max-width: 480px) {
             div.panel-heading a {
                 display: inline-block;
                 color: #0072c6;
             }
             div.panel-cshl>.panel-heading a { display: inline-block; color: #ffffff; }

               h2.note-ag:after{

            content: "(Extra Small, Portrait)";

             }

             div.captionCustom {
                 background: #005DAB;
                 height: 90%;
                 left: 0;
                 padding: 10px;
                 position: relative;
                 top: 100%;
                 width: 100%;
             }
             div.captionCustom p {
                 color: #fff;
                 font-size: .7em;
                 line-height: 1.3;
                 font-family: 'Noto Serif', serif;
             }
             div.container div.captionCustom h3 {
                 font-size: 1em;
                 line-height: 1.4;
                 font-weight: normal;
                 color: white;
                 font-family: 'Noto Serif', serif;
             }
             .media-object-ag {
                 float: none !important;
                 height: auto;
                 max-width: 100%;
                 padding: 0;
                 width: 100%;
             }
             .panel-heading {
                 padding: 10px 15px;
             }
             div.media {
                 padding: 0px;
             }


            div.media-body
            div.media-body h2, 
            div.media-body h3,
            div.media-body h4,
            div.media-body p
              {
                 padding: 5px 0;
             }
             div.impact h2,
             div.impact h3 {
                 padding-left: 0px;
             }

                          .btnWrapper {
                 width: 100%;
                 margin-left: 0px;
             }

             div.col-sm-2 a.give-main {
                 margin-top: 0px;
             }
         }

/*--------------------------------------------------------------
# AG Strategic Notation Classes
--------------------------------------------------------------*/


h2.note-ag {
   padding: 10px;
   border: 1px solid;
   margin-top: 100px;
   margin-bottom: 50px;
   color: orange;
   text-transform: uppercase;
   font-family: Arial;
}

h2.note-ag:after {
   content: none;
}

/*--------------------------------------------------------------
# AG Strategic Equal Height Columns
--------------------------------------------------------------*/
body:not(.home) .flex,
body:not(.home) .flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

body:not(.home) .eqht-wrapper {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-content: stretch;
    -webkit-flex-direction: column;
    -webkit-align-content: stretch;
}

body:not(.home) .eqht-wrapper-body {
    display: flex;
    display: -webkit-flex;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -webkit-flex-direction: column;

}

body.home #main > div.row.area-start.flex.ag-eqht.row-special-gray.home-know-us, 
body.home #main > div.row.flex.ag-eqht.row-special-gray.home-know-us,
body.home #main > div.row.flex.ag-eqht.participate-home,
.flex.ag-eqht.participate-home > div[class*='col-'],
.flex.ag-eqht.row-special-gray.home-know-us > div[class*='col-']  {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

body.home #main > div.row.area-start.flex.ag-eqht.row-special-gray.home-know-us  .eqht-wrapper {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-content: stretch;
    -webkit-flex-direction: column;
    -webkit-align-content: stretch;
}

body.home #main > div.row.area-start.flex.ag-eqht.row-special-gray.home-know-us  .eqht-wrapper-body {
    display: flex;
    display: -webkit-flex;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -webkit-flex-direction: column;

}

.participate-home { margin-bottom:40px; }

@media only screen and (min-width: 900px) {
body.home.page-template-homepageTest #main > div.row.area-start.flex.ag-eqht.participate-home, .flex.ag-eqht.participate-home > div[class*='col-'], body.home.page-template-homepage #main > div.row.area-start.flex.ag-eqht.participate-home
 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

body.home.page-template-homepageTest div.participate-home .eqht-wrapper, body.home.page-template-homepage div.participate-home .eqht-wrapper {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-content: stretch;
    -webkit-flex-direction: column;
    -webkit-align-content: stretch;
}

body.home.page-template-homepageTest div.participate-home .eqht-wrapper-body, body.home.page-template-homepage div.participate-home .eqht-wrapper-body {
    display: flex;
    display: -webkit-flex;
    flex-grow: 1;
    -webkit-flex-grow: 1;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    -webkit-flex-direction: column;

}
}

div.row.area-start.flex.ag-eqht.participate-home > div.col-xs-12.col-sm-6.col-md-3 {
margin-top:15px;
}
/* hide the recurring info here */
div.row.area-start.flex.ag-eqht.participate-home > div.col-xs-12.col-sm-6.col-md-3 div.recurringinfo {
	display: none;	
}
.eqht-wrapper-body div.pad-10 {
    width: 100%;    
}   

.force-width-100 {

    width:100%;
}

.testimonial-text-box{  
   /* padding-left: 30%; 
    padding-right:20%*/
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 600px) {
    .ag-eqht {
        flex-direction: column;
        -webkit-flex-direction: column;
    }
    .eqht-wrapper {
        margin-top: 15px;
    }
}




/*--------------------------------------------------------------
# This targets IE10 and IE11 and turns off flexbox on the callouts
--------------------------------------------------------------*/

@media all and (-ms-high-contrast:none)
     {


	div.eqht-wrapper-body {
	display:block !important;
		}
	#main > div.row.area-start.flex.ag-eqht.participate-home > div.col-xs-12.col-sm-6.col-md-3, div.eqht-wrapper.gray-border  {
  	display:block !important;
  	}
  
     }

/*--------------------------------------------------------------
#  Fixes 
--------------------------------------------------------------*/

div[class*='col-'] ul li {

    font-family: 'Noto Serif', serif;
    font-size: 16px;
    line-height:1.8em;

}

/*--------------------------------------------------------------
# These are the Offnav Drawer styles - rcg
--------------------------------------------------------------*/


 .drawer-open {
        overflow: hidden!important
    }   
    .drawer-nav {
        position: fixed;
        z-index: 2;
        top: 0;
        overflow: hidden;
        width: 16.25rem;
        height: 100%;
        color: #222;
        background-color: #fff
    }    
    .drawer-brand {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 3.75rem;
        display: block;
        padding-right: .75rem;
        padding-left: .75rem;
        text-decoration: none;
        color: #222
    }    
    .drawer-menu {
        margin: 0;
        padding: 0;
        list-style: none
    }
    
    .drawer-menu-item {
        font-size: 1rem;
        display: block;
        padding: .75rem;
        text-decoration: none;
        color: #222
    }
    
    .drawer-menu-item:hover {
        text-decoration: underline;
        color: #555;
        background-color: transparent
    }
    
    .drawer-overlay {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .2)
    }
    
    .drawer-open .drawer-overlay {
        display: block
    }
    
    .drawer--top .drawer-nav {
        top: -100%;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        -webkit-transition: top .6s cubic-bezier(.19, 1, .22, 1);
        transition: top .6s cubic-bezier(.19, 1, .22, 1)
    }
    
    .drawer--top.drawer-open .drawer-nav {
        top: 0
    }
    
    .drawer--top .drawer-hamburger,
    .drawer--top.drawer-open .drawer-hamburger {
        right: 0
    }
    
    .drawer--left .drawer-nav {
        left: -16.25rem;
        -webkit-transition: left .6s cubic-bezier(.19, 1, .22, 1);
        transition: left .6s cubic-bezier(.19, 1, .22, 1)
    }
    
    .drawer--left .drawer-hamburger,
    .drawer--left.drawer-open .drawer-nav,
    .drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
        left: 0
    }
    
    .drawer--left.drawer-open .drawer-hamburger {
        left: 16.25rem
    }
    
    .drawer--right .drawer-nav {
        right: -16.25rem;
        -webkit-transition: right .6s cubic-bezier(.19, 1, .22, 1);
        transition: right .6s cubic-bezier(.19, 1, .22, 1)
    }
    
    .drawer--right .drawer-hamburger,
    .drawer--right.drawer-open .drawer-nav,
    .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
        right: 0
    }
    
    .drawer--right.drawer-open .drawer-hamburger {
        right: 16.25rem
    }
    
    .drawer-hamburger {
        position: fixed;
        z-index: 4;
        top: 0;
        display: block;
        box-sizing: content-box;
        width: 3rem;
        padding: 0;
        padding: 5px 1rem;
        /*padding: 18px 1rem 30px;*/
        -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
        transition: all .6s cubic-bezier(.19, 1, .22, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        border: 0;
        outline: 0;
        background-color: transparent;
    }
    
    .drawer-hamburger:hover {
        cursor: pointer;
        background-color: transparent;
    }
    
    .drawer-hamburger-icon {
        position: relative;
        display: block;
        margin-top: 9px;
        -webkit-transform: unset;
        transform: unset;
    }
    
    .drawer-hamburger-icon,
    .drawer-hamburger-icon:after,
    .drawer-hamburger-icon:before {
        width: 100%;
        height: 2px;
        -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
        transition: all .6s cubic-bezier(.19, 1, .22, 1);
        background-color: #222
    }
    
    .drawer-hamburger-icon:after,
    .drawer-hamburger-icon:before {
        position: absolute;
        top: -9px;
        left: 0; 
        content: " ";
    }

    .drawer-open .drawer-hamburger-icon:after,
    .drawer-open .drawer-hamburger-icon:before {
        position: absolute;
        top: -22px;
        left: 0; 
        content: " ";
    }

    @media (min-width:992px) {
    	.drawer-open .drawer-hamburger-icon:after,
    	.drawer-open .drawer-hamburger-icon:before { 
    		top: -22px;
        	left: -12px;
		}
	}

    .drawer-hamburger-icon:after {
        top: 9px;
    }
    
    .drawer-open .drawer-hamburger-icon {
        background-color: transparent
    }
    
/*    .drawer-open .drawer-hamburger-icon:after,
    .drawer-open .drawer-hamburger-icon:before {
        top: 0
    }*/
    
    .drawer-open .drawer-hamburger-icon:before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    
    .drawer-open .drawer-hamburger-icon:after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    .sr-only {
        position: absolute;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0
    }
    
    .sr-only-focusable:active,
    .sr-only-focusable:focus {
        position: static;
        overflow: visible;
        clip: auto;
        width: auto;
        height: auto;
        margin: 0
    }
    
    .drawer--sidebar,
    .drawer--sidebar .drawer-contents {
        background-color: #fff
    }
    
    @media (min-width:64em) {
        .drawer--sidebar .drawer-hamburger {
            display: none;
            visibility: hidden
        }
        .drawer--sidebar .drawer-nav {
            display: block;
            -webkit-transform: none;
            transform: none;
            position: fixed;
            width: 12.5rem;
            height: 100%
        }
        .drawer--sidebar.drawer--left .drawer-nav {
            left: 0;
            border-right: 1px solid #ddd
        }
        .drawer--sidebar.drawer--left .drawer-contents {
            margin-left: 12.5rem
        }
        .drawer--sidebar.drawer--right .drawer-nav {
            right: 0;
            border-left: 1px solid #ddd
        }
        .drawer--sidebar.drawer--right .drawer-contents {
            margin-right: 12.5rem
        }
        .drawer--sidebar .drawer-container {
            max-width: 48rem
        }
    }
    
    @media (min-width:75em) {
        .drawer--sidebar .drawer-nav {
            width: 16.25rem
        }
        .drawer--sidebar.drawer--left .drawer-contents {
            margin-left: 16.25rem
        }
        .drawer--sidebar.drawer--right .drawer-contents {
            margin-right: 16.25rem
        }
        .drawer--sidebar .drawer-container {
            max-width: 60rem
        }
    }
    
    .drawer--navbarTopGutter {
        padding-top: 3.75rem
    }
    
    .drawer-navbar .drawer-navbar-header {
        border-bottom: 1px solid #ddd;
        background-color: #fff
    }
    
    .drawer-navbar {
        z-index: 3;
        top: 0;
        width: 100%
    }
    
    .drawer-navbar--fixed {
        position: fixed
    }
    
    .drawer-navbar-header {
        position: relative;
        z-index: 3;
        box-sizing: border-box;
        width: 100%;
        height: 3.75rem;
        padding: 0 .75rem;
        text-align: center
    }
    
    .drawer-navbar .drawer-brand {
        line-height: 3.75rem;
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;
        text-decoration: none
    }
    
    .drawer-navbar .drawer-brand:hover {
        background-color: transparent
    }
    
    .drawer-navbar .drawer-nav {
        padding-top: 3.75rem
    }
    
    .drawer-navbar .drawer-menu {
        padding-bottom: 7.5rem
    }
    
    @media (min-width:64em) {
        .drawer-navbar {
            height: 3.75rem;
            border-bottom: 1px solid #ddd;
            background-color: #fff
        }
        .drawer-navbar .drawer-navbar-header {
            position: relative;
            display: block;
            float: left;
            width: auto;
            padding: 0;
            border: 0
        }
        .drawer-navbar .drawer-menu--right {
            float: right
        }
        .drawer-navbar .drawer-menu li {
            float: left
        }
        .drawer-navbar .drawer-menu-item {
            line-height: 3.75rem;
            padding-top: 0;
            padding-bottom: 0
        }
        .drawer-navbar .drawer-hamburger {
            display: none
        }
        .drawer-navbar .drawer-nav {
            position: relative;
            left: 0;
            overflow: visible;
            width: auto;
            height: 3.75rem;
            padding-top: 0;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }
        .drawer-navbar .drawer-menu {
            padding: 0
        }
        .drawer-navbar .drawer-dropdown-menu {
            position: absolute;
            width: 16.25rem;
            border: 1px solid #ddd
        }
        .drawer-navbar .drawer-dropdown-menu-item {
            padding-left: .75rem
        }
    }
    
    .drawer-dropdown-menu {
        display: none;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff
    }
    
    .drawer-dropdown-menu>li {
        width: 100%;
        list-style: none
    }
    
    .drawer-dropdown-menu-item {
        line-height: 3.75rem;
        display: block;
        padding: 0;
        padding-right: .75rem;
        padding-left: 1.5rem;
        text-decoration: none;
        color: #222
    }
    
    .drawer-dropdown-menu-item:hover {
        text-decoration: underline;
        color: #555;
        background-color: transparent
    }
    
    .drawer-dropdown.open>.drawer-dropdown-menu {
        display: block
    }
    
    .drawer-dropdown .drawer-caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
        transition: opacity .2s ease, -webkit-transform .2s ease;
        transition: transform .2s ease, opacity .2s ease;
        transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        vertical-align: middle;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent
    }
    
    .drawer-dropdown.open .drawer-caret {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    
    .drawer-container {
        margin-right: auto;
        margin-left: auto
    }
    
    @media (min-width:64em) {
        .drawer-container {
            max-width: 60rem
        }
    }
    
    @media (min-width:75em) {
        .drawer-container {
            max-width: 70rem
        }
    }
    /*!------------------------------------*\
    Right
\*!------------------------------------*/
 
    .drawer-nav {
        position: fixed;
        z-index: 10000000;
        top: 0;
        overflow: hidden;
        width: 250px;
        height: 100%;
        color: #222;
        background-color: #fff;
    }
    
    .drawer--right .drawer-nav {
        right: -300px;
        -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
        padding: 5px 5px 0 5px;
    }
    
    .drawer--right .drawer-nav ul li a {
        font-family: Source Sans Pro;
    }
    
    .drawer--right .drawer-nav ul li {
        list-style-type: none;
        border-bottom: 1px dotted #999;
        width: 90%;
    }
    
    .drawer--right .drawer-hamburger,
    .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
        right: 25px;
    }
    /* dealing with close button visibility rcg */
    .drawer--right.drawer-open .drawer-hamburger {
        right: 250px;
        top: 35px !important;
/*        top: 30px !important; */
        background: white;
        border-bottom-left-radius: 6px;
        padding-top: 35px;
    }
    
    #main>div>button.drawer-hamburger {
        top: /*77px;*/ 53px; 
    }
    /*#main>div.insite-nav span { margin:48px 0 0 15px!important; }*/
    @media (min-width:992px) {
    	#main>div>button.drawer-hamburger { top:37px; }
    	#main>div.insite-nav span { margin:25px 0 0 15px!important; }
    	.drawer--right .drawer-hamburger,
    	.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
        	right: 40px; /*25px;*/
    	}
    	.drawer--right.drawer-open .drawer-hamburger { padding-top: 25px; }


    }
    .drawer-hamburger-icon,
    .drawer-hamburger-icon:after,
    .drawer-hamburger-icon:before {
        background-color: #004982;
    }
    
    ul.drawer-menu {
        padding-bottom: 60px;
    }
    
    .insite-nav {
        position: fixed;
        top: 37px; /*4px; */
        right: 18px;
        width: auto;
        height: auto;
        z-index: 10000;
        color: #004982;
        font-size: 10px;
        font-family: 'Source Sans Pro';
        text-transform: uppercase;
        /*  background:rgba(0, 73, 130, 0.9);*/
    }
    
    /* Offnav general tweaks rcg */
    
    ul.drawer-menu {
        margin-left: 10px;
        padding: 5px;
    }
    
    .drawer-menu li {
        font-weight: normal;
    }
    
    ul.children {
        margin-left: -7px;
    }
    
    #main > nav > ul > li.ancestors a,
    h3.ancestors {
        margin-left: -9px;
    }


/*--------------------------------------------------------------
# Subsite right-hand drawer -
--------------------------------------------------------------*/
@media only screen and (max-width: 891px) {
.drawer--right .drawer-nav, div.insite-nav {
    display: none;
}
}
@media only screen and (min-width: 892px) {
.drawer--right .drawer-nav, div.insite-nav{
    display: block;
}
}

/*--------------------------------------------------------------
#  Offnav menu tweaks to to deal with child uls that render on three lines
--------------------------------------------------------------*/ 


.drawer--right .drawer-nav ul ul ul ul li  {
    line-height: 1.2;
    }
    
.drawer--right .drawer-nav ul ul ul ul li:last-child,.drawer--right .drawer-nav ul li:last-child, .drawer--right .drawer-nav ul ul li:last-child, .drawer--right .drawer-nav ul li:last-child, ul ul ul, li:last-child{
    border-bottom: none;
}

/*--------------------------------------------------------------
# Fix so that you can scroll the mobile menu - rcg
--------------------------------------------------------------*/
@media (max-width:891px) {
    /*div#content.site-content {
    margin-top: 0px;
    }*/
    main.site-main{
    margin-top: 0px;        
    }
}
@media (min-width:892px) {
    body {
    margin-top:90px;
    height:100%;
    }
    .navbar-static-top {
    position:fixed;
    top:0;
    right:0;
    left:0;
    }
    /*div#content.site-content {
    margin-top: -10px;
    }*/
    main.site-main{
    margin-top: 0px;        
    }

    div.media.profile {
    margin-top: 20px;
    }
    div.carousel-inner {
    margin-top: 0px;
    }
}

.page-template-newsstand div.carousel-inner { margin-bottom:20px; }

@media (max-width:891px) {
    div.carousel-inner {
    margin-top: -20px;
    }   
    div.media.profile {
    margin-top: 0px;
    }
    .page-template-newsstand div.carousel-inner { margin-top:0; }
}
/*--------------------------------------------------------------
# Fix so that undersized slides dont fail at retina and new top margin
--------------------------------------------------------------*/

div#myCarousel .carousel-inner>.item>img {

max-width: none;
width: 100%;
display: none;
}

div#home-carousel.carousel-inner { height:500px; }
.carousel.homepage { height:500px; }

div.carousel-inner {

height: 90vh;

}
/* shallower newsstand carousel */ 
body.page-template-newsstand div.carousel-inner {
height: 100%; /*65vh; */
}
body.page-template-newsstand div.carousel-inner .item{
background-position:center top;	
}	

body.page-template-newsstand .carousel-caption {
	padding-bottom: 45px; /*60px;	*/
}
@media (max-width:480px) {
body.page-template-newsstand .carousel-caption {
   padding-bottom: 5px;
	}	
}
ol.carousel-indicators{

bottom:37px;

}



/*--------------------------------------------------------------
# Fix because inline style getting injected into figures
* styles for post inline images
--------------------------------------------------------------*/

figure.wp-caption.alignleft {
	width: 40%;
}
figure.wp-caption.alignright {
	width: 40%;
}
figure.wp-caption.aligcenter{
	width: 100%;
}

body.single-post figure img, 
body.single-giving_news figure img,
body.single-wsbs_news figure img,
body.single-press_news figure img,
body.single-banbury_news figure img,
body.single-giving_news div.entry-content img,
body.single-wsbs_news div.entry-content img,
body.single-press_news div.entry-content img,
body.single-banbury_news div.entry-content img,
body.page figure img {
/* all inline images are responsive by default */
	display:block;
	max-width:100%;
	height:auto;	
}
.percent40 {
    width: 40%; 
    margin-bottom:20px;
    height: auto;
}
.percent50 { width: 100%; margin-bottom:20px; height: auto;} 
.percent30 { width: 100%; margin-bottom:20px; height: auto;} 
.percent20 { width: 100%; margin-bottom:20px; height: auto;} 

.banner-image { width:100%; }

/*--------------------------------------------------------------
# Make left and right aligned images full width on mobile - Sue
--------------------------------------------------------------*/
@media (max-width:991px) {
	.percent40 { width: 100%; float:none; margin:auto auto 20px auto; }
	figure.wp-caption.alignleft,
	figure.wp-caption.alignright { width: 100%; float:none; margin:auto; }
	figure.wp-caption.alignleft img,
	figure.wp-caption.alignright img { width:100%; }
}
@media (min-width:768px) {
	.percent30 { width: 30%; } 
	.percent20 { width: 20%; } 
	.percent50 { width: 50%; } 
}

/*--------------------------------------------------------------
# Offset #anchor links so the content is visible and not covered 
# by the navbar - Sue
--------------------------------------------------------------*/
a.top-offset { position:absolute; top:-115px; }


/*--------------------------------------------------------------
# Position the Yoast plugin breadcrumbs
--------------------------------------------------------------*/

#breadcrumbs a { padding-bottom:2px; }

p#breadcrumbs.landingbread {
	margin-top: 25px;
	margin-bottom:0;
	font-family: "Source Sans Pro", sans-serif;
}

p#breadcrumbs.detailbread {
	margin-top: 25px;
	margin-bottom:22px;
	font-family: "Source Sans Pro", sans-serif;
}

p#breadcrumbs.profilebread {
	margin-top: 25px;
	margin-bottom:22px;
	font-family: "Source Sans Pro", sans-serif;
}

/*--------------------------------------------------------------
# Custom Post BreadCrumb Bottom Margin - moves featured image and
# Headline below breadcrumb
# CA 9/1
--------------------------------------------------------------*/
/*p#breadcrumbs.postbread {
margin-top: 24px;
font-family: "Source Sans Pro", sans-serif;

}*/

@media screen and (max-width:891px){
    p#breadcrumbs.profilebread {
    	margin-top:0;
    	margin-bottom:15px;
    }
    p#breadcrumbs.detailbread {
    	margin-top: 0;
    	margin-bottom:18px;
    }

/*    p#breadcrumbs.postbread {
    margin-top: 25px;
    margin-bottom:25px;
    
    }*/
}

/*--------------------------------------------------------------
# Custom Post BreadCrumb Bottom Margin ** Special for Events **
# Headline below breadcrumb
# CA 9/1
--------------------------------------------------------------*/
p#breadcrumbs.postbreadEvent {
	margin-top: 45px;
	font-family: "Source Sans Pro", sans-serif;
}

@media screen and (max-width:891px){
    p#breadcrumbs.profilebreadEvent {
    	margin-top: 15px;
    	margin-bottom:0px;
    }
    p#breadcrumbs.detailbreadEvent {
    	margin-top: 5px;
    	margin-bottom:0px;
    }

/*    p#breadcrumbs.postbreadEvent {
    margin-top: 5px;
    margin-bottom:5px;
    
    }*/
}

/*--------------------------------------------------------------
# style the utility links
--------------------------------------------------------------
#topContent {
width:100%;
background-color:#fff;
border-bottom:
1px solid #eee;
}*/

/*--------------------------------------------------------------
# css columns just to dress up plain pages rcg
--------------------------------------------------------------*/
.csscolumns2, .csscolumns3 {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}

.csscolumns2 p, .csscolumns3 p {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

@media screen and (min-width:769px){
	.csscolumns2 {
    	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    	-moz-column-count: 2; /* Firefox */
    	column-count: 2;
	}
	.csscolumns3 {
    	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
/*--------------------------------------------------------------
# table addl. class for simple two td tables to line things up on pages rcg
--------------------------------------------------------------*/
table.table-cshl-2 > tbody > tr > td {
width:50%;
font-family:'Noto Serif', serif;
font-size: 16px;
padding-left: 0px;
/*border-bottom:1px solid #eee;*/
border:none;
}
table.table-cshl-2 > tbody > tr > td:nth-child(1){
background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
   -moz-background-size:100% 1px;
   background-size: 100% 1px;
   background-position:0 0,  0 100% ;
   background-repeat:no-repeat;
   border: none;
}
table.table-cshl-2 > tbody > tr > td:nth-child(2) {
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    -moz-background-size:100% 1px;
    background-size: 100% 1px;
    background-position:0 0,  0 100% ;
    background-repeat:no-repeat;
    border: none;
}


.ag-eqht.row-special-gray div div {
background:white;
}

.row-special-gray {
padding:30px 0;
background-size:100% 100%;
background-repeat:no-repeat;
background-position:49%;
/*background-image: linear-gradient(to right, rgba(238, 238, 238,1), rgba(238, 238, 238,1));*/
background-color:#f2f5f7;
}

.row-special-gray.newsstand { padding:15px 0; }

.ag-eqht.row-special-gold div div {
background:white;
}


.row-special-gold {

margin-left:15px;
margin-right:15px;
padding:20px 0 20px 0;
background-size:84% 100%;
background-repeat:no-repeat;background-position:49%;
background-image: linear-gradient(to right, rgba(197, 167, 80, 1), rgba(197, 167, 80, 1))
}


.h2-special-gray {
background-size: 100%;
margin-left:-15px;
margin-right:-15px;
margin-bottom: -10px;

}


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

.row-special-gray {
background-size: 100%;
margin-left:-15px;
margin-right:-15px;

}

.row-special-gold {
background-size: 100%;
margin-left:0;
margin-right:0;

}
}

.h2-special-gray {
padding:30px 0px 0px 0px;
background-size:100% 100%;
background-repeat:no-repeat;
background-position:49%;
/*background-image: linear-gradient(to right, rgba(238, 238, 238,1), rgba(238, 238, 238,1))*/
background-color: #f2f5f7;
}

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

.h2-special-gray {
background-size: 100%;
margin-left:-15px;
margin-right:-15px;

margin-bottom: -10px;

}
}

/*--------------------------------------------------------------
# footer color tweaks -- rcg 
--------------------------------------------------------------*/
footer.entry-footer, footer.comment-meta {
background:white;       
}

/*--------------------------------------------------------------
# video gallery overrides -- rcg
--------------------------------------------------------------*/
.yrc-shell-cover {
    
    width: 100%;
    
}

.yrc-item .yrc-thumb {
    transform: scale(1);
    
}

/*--------------------------------------------------------------
# soundcloud overrides -- rcg/ca
--------------------------------------------------------------*/

         /* Landscape phones and portrait tablets */
         
         @media (max-width: 767px) {

            .more-soundcloud-box{
                min-height:500px;    
            }
             
         }
         
         
         
         /* Portrait phones and smaller */
         
         @media (max-width: 480px) {

            .more-soundcloud-box{
             min-height:500px;    
            }
             
             }
    
    /*--------------------------------------------------------------
    #  applying p styles to just text in a div -- rcg
    --------------------------------------------------------------*/ 
       div.row.area-start div {
            font-family: 'Noto Serif', serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 25.5px;
         }

/*--------------------------------------------------------------
#  student events. -- rcg
--------------------------------------------------------------*/    
    p.citeyear{     
    font-size: 1.2em;   
    font-weight:bold;
    }   
/*--------------------------------------------------------------
#  public events, make only these buttons yellow -- rcg
--------------------------------------------------------------*/        

body.page-template-flexible-content-template-events-php a.btn-learn-more-ag {   
    background:#c5a750; 
}

/*--------------------------------------------------------------
#  tweak to make galleries work -- rcg
--------------------------------------------------------------*/    
.gallery-item {
    width: 49%;
}

/*--------------------------------------------------------------
#  tweak to make auto generated lists of child pages prettier -- rcg
--------------------------------------------------------------*/   

article div.area-start li.page_item {
    list-style-type: square;    
}
ul.display-posts-listing li.listing-item {
    list-style-type: none;
    padding-top:7px;
    clear: both;    
}
ul.display-posts-listing li.listing-item a.title {
    margin-top: 100px;  
    
}
li.listing-item a.image img.attachment-medium.size-medium.wp-post-image {
width: 250px;
height:auto;
float: left;
padding-right: 7px;
padding-top: 3px;
padding-bottom:3px;
}

div.listing-item{
clear: both;
border-bottom:1px solid #e1e1e1;
display:flex;
display: -webkit-flex;
align-items: center;
padding-bottom:0px;
padding-top:0px;
}
div.listing-item a.image img.attachment-medium.size-medium.wp-post-image, body.page-template-archive-stafflisting div.listing-item a.image img, body.page-template-piprofile div.listing-item a.image img  {
width: 250px;
height:auto;
float: left;
padding-right: 7px;
padding-top: 5px;
padding-bottom:5px;
}
div.listing-item a.title {
float: left;
font-weight: bold;
margin-top: -12px;
}

div.tab-pane  ul.display-posts-listing {
padding-left:5px;   
}
ul.student-perspectives li{
list-style:square;  
}

/* stack the program page news listings at mobile */
@media (max-width: 599px) {

div.listing-item {
display: block;	
padding-bottom:8px;
padding-top:8px;
}
div.listing-item a.image img.attachment-medium.size-medium.wp-post-image, body.page-template-archive-stafflisting div.listing-item a.image img, body.page-template-piprofile div.listing-item a.image img {
width: 100%;
height:auto;
float: none;
padding-right: 0px;
padding-top: 5px;
padding-bottom:5px;
}

div.listing-item a.title {
float: none;
font-weight: bold;
margin-top: 0px;
}
               
}


/*--------------------------------------------------------------
#  overriding bootstrap vertical align for specific td elements -- rcg
--------------------------------------------------------------*/   
.table > tbody > tr > td.vmiddle {
 vertical-align: middle;
}

/*--------------------------------------------------------------
#  Dealing with different code structure in pi profile template 
as compared to other places where we bung in the offnav menu -- rcg
--------------------------------------------------------------*/   

body.page-template-piprofile-php #content > div > div > div.insite-nav > button {
	top: 53px; /*45px;*/
	right:25px;
}

/*--------------------------------------------------------------
#  Dealing with conditional float in research staff listing text fields -- rcg
--------------------------------------------------------------*/ 
.conditional-floatright {
    float: right;
    padding: 10px;
    max-width: 100%;
    width: 40%;
    height: auto;       
}

@media (max-width: 700px) {
.conditional-floatright {
    float: none;
    padding: 0 0 10px 0; 
    width: 100%;
    }             
}

/*--------------------------------------------------------------
#  emergency nav fix for ipad portrait -- rcg
--------------------------------------------------------------*/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
div.menu-container{
    margin-top:60px;    
    }
}

/*--------------------------------------------------------------
#  style for floated program logos to avoid pixellation on retina
while still floating on mobile (images for which available source
less than 480) -- rcg
--------------------------------------------------------------*/ 
.floated-logo {
width: 250px; 
height: auto;   
}

.page-header {
    padding-bottom: 9px;
    margin: 20px 0 20px;
    border-bottom: none;
}

/*--------------------------------------------------------------
#  override for excessive h1 margin -- rcg
--------------------------------------------------------------*/ 

header.page-header {    
margin-bottom:0px;  
margin-top:0px;
}

/* added by Sue 3/26/18 */
@media (max-width:768px) {
	h1 { line-height:35px; }
}

/*--------------------------------------------------------------
#  Archive Pages Nav Overrides -- ca
--------------------------------------------------------------*/ 

div#ag-archive-navigation { margin-top:25px; font-family:'Source Sans Pro', sans-serif; }

#ag-archive-navigation a {
width:200px;
margin-left: 5px;
    float:left;
    border-radius: 4px;
             border: none;
             background: #004982;
             color: white;
             text-transform: uppercase;
             padding: 10px 20px 10px 20px;
             margin-top: 5px;
             margin-bottom: 5px;
             text-align: center;


}



#ag-archive-navigation a:hover{
    width:200px;
    float: left;
    border-radius: 4px;
             border: none;
             background: #6588a8;
             color: white;
             text-transform: uppercase;
             background-repeat: no-repeat;
             padding: 10px 20px 10px 20px;
             margin-top: 5px;
             margin-bottom: 5px;
             text-align: center;
	text-decoration:none;
}


/*--------------------------------------------------------------
#  Newsstand Panel Overrides -- ca
--------------------------------------------------------------*/ 

/*.panel {


    border: 0px;
    border-radius: 4px; 
    -webkit-box-shadow: 0px 0px 0px 0px;
    box-shadow: 0px 0px 0px 0px;
    border-bottom: 1px solid #e5e5e5; */
   /* border-right: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;*/
/*
}
.panel-primary>.panel-heading {

color: white;
background-color: #004982;
border-color: #004982;
border-bottom: 1px solid #e5e5e5;
}
.panel-heading {

padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 0px;
border-top-left-radius: 0px;

}
*/
.panel.panel-cshl { border: 1px solid #004982; }
.panel.panel-cshl h4 { margin-top:0; }
.panel-cshl>.panel-heading { padding:5px 15px 8px 15px; }
.panel-cshl>.panel-heading h4 { margin-top:5px; margin-bottom:5px; }
.panel-cshl>.panel-heading,
.panel-cshl>.panel-footer { color:#fff; background-color:#004982; border-color:#004982; }

@media only screen and (min-width: 992px) {
	#newsletter.panel.panel-cshl { width:65%; margin:30px auto 25px auto; }
}

/*--------------------------------------------------------------
#  Accordion component
--------------------------------------------------------------*/ 
#accordion .panel-group .panel-heading+.panel-collapse>.panel-body { border-top:none; }
#accordion .panel { border-bottom:none; }

.panel-accordion .panel-title > a.accordion-toggle::before,
a#accordion[data-toggle="collapse"]::before,
#accordion a[data-toggle="collapse"]::before {
	content: "\f077";
    float: left;
	font-family: FontAwesome;
	margin-right :1em;
}

.panel-accordion .panel-title > a.accordion-toggle.collapsed::before, 
a#accordion.collapsed[data-toggle="collapse"]::before,
#accordion a.collapsed[data-toggle="collapse"]::before { content:"\f078"}

#accordion.panel-group .panel-heading+.panel-collapse>.panel-body, 
#accordion.panel-group .panel-heading+.panel-collapse>.list-group { border:1px solid #ddd; }

#accordion.panel-group .panel.panel-cshl {border:none;}
#accordion.panel-group .panel-cshl .panel-heading+.panel-collapse>.panel-body, 
#accordion.panel-group .panel-cshl .panel-heading+.panel-collapse>.list-group { border:1px solid #004982; border-radius:0 0 4px 4px;}

.panel-accordion .panel-title > a {
	display: block;
	padding: 0.4em 0.6em;
    outline: none;
    text-decoration: none;
	font-size: 18px;
}
.panel-accordion>.panel-heading {
	color: #004982;
	background-color: #f5f5f5;
	border-color: #004982;
	border-bottom: 1px solid #e5e5e5;
	padding:5px 15px 5px 15px;
	text-transform:uppercase;
}
.panel-accordion>.panel-heading h4 { margin-top:0; font-weight:700; }
.panel.panel-accordion { margin-bottom:10px; border: 1px solid #e5e5e5; border-radius:4px; }


/*--------------------------------------------------------------
#  client request to put bottom border on the callout images -- rcg
--------------------------------------------------------------*/ 
div.eqht-wrapper-body a img,
div.eqht-wrapper-body img {
	border-bottom: 1px solid #e5e5e5;       
}

/*--------------------------------------------------------------
#  Category and Tag index pages need a larger top margin on the h1 at non mobile -- rcg
--------------------------------------------------------------*/ 

/* following is a class to address default page w/no breadcrumb */
body.page-template-default h1.entry-title {
margin-top:20px;
}
/* tweak to move up archive headers - rcg */

body.page-template.page-template-archive header.page-header, body.page-template.page-template-archive-all header.page-header{
margin-top: -5px;
}

#main > header.page-header > h1.search-title {
margin-top: 50px;
}

/*--------------------------------------------------------------
#  Styles needed for PI pages -- rcg
--------------------------------------------------------------*/ 

#myTab > li > a {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 20px;
}

.pi-headshot {
    margin-top: 10px;
    margin-bottom: 10px;
}

.pi-summary {
    margin-top: 0px;
    margin-bottom: 0px;
}

span.optional-news-content p {      
    margin-left: 6px;
    clear: both;    
}

@media (max-width: 891px) {

#myTab.piprofile > li > a{
    font-size: 14px;
}
    .pi-headshot {
        margin-bottom: 15px;
    }
    li.listing-item a:empty{
        display:none;
    }
    .js-tabcollapse-panel-body li.listing-item a:empty + a {
        margin-left: -36px;
        display: inline-block;
        margin-top: 0 !important;       
    }
}

@media (min-width:1025px) {
    p.pi-summary { margin-top:20px; }
}

.list-description {

    margin-left: 10px;

}

.cshl-social-icon {
margin-left:6px;
vertical-align: middle;
color: #004982;
}

.cshl-social-icon:hover {
color: #6588a8;
}

/*--------------------------------------------------------------
#  Styles needed for Faculty & Staff page - 4/11/22
--------------------------------------------------------------*/ 
h2.header { text-transform: uppercase; letter-spacing:0.3px; font-size: 26px; color: #ef4e22; }
.content-tile { position:relative; background: transparent; }

div.faculty-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 1em;
    opacity: 0;
    z-index: 2;
    overflow:hidden;
    color:#444;
}
div.faculty-details.cancer { border:2px solid #b2d883; }

div.content-tile:hover div.faculty-details,
div.content-tile:hover div.faculty-details.cancer,
a>div.content-tile:hover div.faculty-details,
a>div.content-tile:hover div.faculty-details.cancer { opacity:1; transition: opacity 1s;}

.content-tile a:hover { text-decoration:none; }

p.faculty-title { 
	line-height:20px; 
	letter-spacing:0.3px; 
	font-family: 'Source Sans Pro', sans-serif; 
	margin-bottom:12px; 
	text-transform:uppercase; 
	font-size:14px; 
	color:#004982;
}
p.faculty-keywords {
	font-size:14px; 
	line-height:19px;
	margin-bottom:0;
	color:#004982;
}
a>div.content-tile div.nameOverlay,  
div.content-tile div.nameOverlay { 
	position:absolute;
	bottom:7%;
	right:0;
	/*bottom:40px;*/
	background:#004982;
	padding:7px 9px 9px 13px;
	border-radius: 10px 0 0 10px;
	z-index:50;
}

.nameOverlay p.facultyname { 
	position:relative;
	font-family:'Source Sans Pro',sans-serif;
	font-size: 16px;
    line-height: 19px;
    margin-bottom:0;
    color:#fff;
    letter-spacing:0.3px; 
    font-weight:400;
}
p.cancer-member { 
	font-family:'Source Sans Pro',sans-serif; 
	letter-spacing:0.3px; 
	color:#b2d883; 
	font-size:12px; 
	line-height:15px; 
	text-transform:uppercase; 
	margin-bottom:0; 
}

/* Misc Staff styles */
.vertical-align-col > div { display: inline-block; vertical-align:middle; float:none; }
p.name { font-family: 'Source Sans Pro', sans-serif; margin-bottom:0; font-size:19px; color:#000; letter-spacing:0.3px; }
p.misc-title { 
	line-height:25px; 
	letter-spacing:0.3px; 
	font-family:'Source Sans Pro', sans-serif; 
	font-variant:small-caps; 
	margin-bottom:0; 
	text-transform:uppercase; 
	font-size:15px; 
}
p.lab { font-family: 'Source Sans Pro', sans-serif; text-transform:uppercase; font-size:19px; letter-spacing:0.3px; line-height:20px;}


/*--------------------------------------------------------------
#  responsive tabs styles -- rcg
--------------------------------------------------------------*/ 
div.tab-pane a.btn.btn-default.pull-right{
float: none !important; 
}

.responsive-tabs-container .tab-pane {
  margin-bottom: 15px;
  padding-left:4px;
}
.responsive-tabs-container .accordion-link {
  display: none;
  margin-bottom: 10px;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  background-color: #f5f5f5;;
}
@media (max-width: 767px) {
  .responsive-tabs-container.accordion-xs .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-xs .accordion-link {
    display: block;
  }
  a.accordion-link:hover { text-decoration:none; }
}
@media (min-width: 768px) and (max-width: 991px) {
	div.tab-pane { margin-top:25px; }
  .responsive-tabs-container.accordion-sm .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-sm .accordion-link {
    display: block;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
	div.tab-pane { margin-top:25px; }
  .responsive-tabs-container.accordion-md .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-md .accordion-link {
    display: block;
  }
}
@media (min-width: 1200px) {
	div.tab-pane { margin-top:25px; }
  .responsive-tabs-container.accordion-lg .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-lg .accordion-link {
    display: block;
  }
}

/*--------------------------------------------------------------
# PI Profile nav tabs for the tabs repeater
--------------------------------------------------------------*/
body.page-template-piprofile ul.nav-tabs.piprofile { 
	background-color:#004982; 
	border-radius:7px 7px 0 0; 
	-webkit-border-radius:7px 7px 0 0;
	-moz-border-radius:7px 7px 0 0;
}

.page-template-piprofile .nav-tabs.piprofile { border-bottom: 1px solid #004982; }
.page-template-piprofile .nav-tabs.piprofile>li:first-child>a { border-top-left-radius:7px; }

.page-template-piprofile .nav-tabs.piprofile>li.active>a, 
.page-template-piprofile .nav-tabs.piprofile>li.active>a:hover, 
.page-template-piprofile .nav-tabs.piprofile>li.active>a:focus { border:1px solid #004982; }

.page-template-piprofile .nav-tabs.piprofile>li>a { color:#ffffff; margin-right:0; border-radius:0; border-color:#004982; padding:12px 23px; } 
.page-template-piprofile .nav.piprofile>li>a:focus { background-color:#004982; margin-bottom:-1px;}


.page-template-piprofile .nav-tabs.piprofile>li.active>a { margin-bottom:0; background-color:#004982; color:#b2d883; }

.page-template-piprofile .nav-tabs.piprofile>li.active>a:hover { color:#b2d883; /* color:#ffffff; background-color:#ffffff;*/ }
.page-template-piprofile .nav.piprofile>li>a:focus { /*background-color:#004982; color:#ffffff; */ outline:none; }
.page-template-piprofile .nav-tabs.piprofile>li>a:hover { color:#b2d883; background-color:#004982; /*background-color:#ffffff; color:#004982; border-color:#004982;*/ }

.page-template-piprofile .nav-tabs.piprofile>li.active:after {
	content: "";
    border-bottom: 10px solid #ffffff;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: 0;
    left: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}



/*--------------------------------------------------------------
# Responsive iFrame container
--------------------------------------------------------------*/

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}   


/*--------------------------------------------------------------
# 404 page 
--------------------------------------------------------------*/

.error-top-margin {
    margin-top:50px;
}
    @media (max-width:892px){
    .error-top-margin {
    margin-top:0px;
    }
}

/*--------------------------------------------------------------
# sticky footer
--------------------------------------------------------------*/
@media (min-width:992px){
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height, changed from 640px */
  margin-bottom: 805px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  min-height: 550px;
 }

}

/*--------------------------------------------------------------
# Global site search form client changes
--------------------------------------------------------------*/

/*div#topContent.container-fluid div.row div form {
float:right;
margin-top:4px;
margin-left:5px;
}*/
.mobileInput {
width:140px; 
font: 12px "Source Sans Pro", Arial;
padding-left:20px;
margin-right:10px;
border:1px solid #e5e5e5;
border-radius:0;
-webkit-appearance:none;
}

@media screen and (max-width:320px) {
.mobileInput {
width:90px
}
/*#topContent > div > div > form > div.search-container {
position:relative;
width:140px;
}*/

input#search:hover,  input#search:active, input#search:focus {
outline:none;
border:1px solid blue;
}
}

/*nav div#topContent { padding:5px 15px 4px 15px; }
nav div#topContent ul { margin:0; }
nav div#topContent ul li a { padding:0 3px; }
nav div#topContent ul li { font: 13px "Source Sans Pro", sans-serif; }
nav.navbar.navbar-default.navbar-static-top div#topContent ul li a { font: 13px "Source Sans Pro", sans-serif; }

div#topContent ul#contact { float:right; } 
div#topContent .list-inline>li { padding:0; }
div#topContent ul li a.search  { padding:5px 10px; }
div#topContent ul li a.search i.fa { padding:5px; width:100%; height:100%; }
div#topContent ul#contact button.search { border:none; background:transparent; color:#004982; font-size:18px;  }
div#topContent ul#contact li.desktopOnly { display:none; }

@media screen and (min-width:892px) {
	div#topContent ul#contact li.desktopOnly { display:inline-block; }
}*/

/*---------- dropdown search-inline styles -------------------------*/
.search-inline {
	width: 100%;
	left: 0;
	padding-left: 15px;
	padding-right: 15px;
	top: 35px;
	height: 56px;
	position: absolute;
	background-color: #004982; /*#fff;*/
	z-index: 10010;
	transition: all .5s ease-in-out;
	background-color:#004982;
}
.hide { display:none; }
.inVisible,
.inVisible:before,
.inVisible:after { visibility: hidden; }
.noTransition,
.noTransition:before,
.noTransition:after {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

.search-inline button[type="submit"] {
	position: absolute;
	right: 0; /*52px;*/
	top: 0;
	background-color: transparent;
	border: 0px;
	top: 0;
	padding: 0px;
	cursor: pointer;
	width: 50px;
	height: 100%;
	background: #004982;
	color: #fff;
}
.search-inline .form-control {
	border: 0px;
	font-size: 2rem;
	position: absolute;
	top: 11px; 
	outline: none;
	width:75%;
	right:52px;
}
@media screen and (min-width:892px) {
	.search-inline .form-control { width:50%; }
}

.search-inline .form-control:focus { border-color:none; box-shadow:none; -webkit-box-shadow:none; }
		
.search-inline .form-control {
	display: block;
	padding: .375rem .75rem;
	font-size: 1.5rem;
	line-height: 1.5;
}

/*--------------------------------------------------------------
# Special Post/content.php styles
--------------------------------------------------------------*/


.takeaway-box {

padding:15px; 
border:1px solid #bbb;

}
/* the following mobile style added by Sue 3/22/18 */
@media (max-width:991px){
	.takeaway-box { margin-bottom:25px; }
}

figcaption.cshl-post-caption {

    margin-top:10px; 
    margin-bottom:0;
    font-family:'Source Sans Pro',sans-serif; 
    line-height:20px;
    font-size: 14px;

}


.post-cloud > a {

-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
background-color: rgb(255, 255, 255);
background-image: none;
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(51, 51, 51);
cursor: pointer;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 13.203251838684082px;
font-weight: normal;
height: 32px;
line-height: 18px;
margin-bottom: 0px;
margin-top: 10px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;

}


.post-cloud > a:hover {



-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
color: #333;
background-color: #d4d4d4;
background-image: none;
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;

cursor: pointer;
display: inline-block;
font-family: "Source Sans Pro", sans-serif;
font-size: 13.203251838684082px;
font-weight: normal;
height: 32px;
line-height: 18px;
margin-bottom: 0px;
margin-top: 10px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;

}

/*--------------------------------------------------------------
# pointer:cursor style for the onclick callout divs 
--------------------------------------------------------------*/

#main > div.row.area-start.flex.ag-eqht.participate-home > div > div.force-width-100.eqht-wrapper.gray-border > div > div, #main > div.row.area-start.flex.ag-eqht.participate-home > div.col-lg-offset-right-1.col-xs-12.col-sm-6.col-md-3 > div.eqht-wrapper.gray-border > div > div, #main > div.row.area-start.flex.ag-eqht.row-special-gray > div.col-lg-offset-1.col-xs-12.col-sm-4.col-md-4 > div.eqht-wrapper.gray-border > div > div, #main > div.row.area-start.flex.ag-eqht.row-special-gray > div:nth-child(2) > div.force-width-100.eqht-wrapper.gray-border > div > div, #main > div.row.area-start.flex.ag-eqht.row-special-gray > div.col-lg-offset-right-1.col-xs-12.col-sm-4.col-md-4 > div.force-width-100.eqht-wrapper.gray-border > div > div, #newsitems > div.list > div > article, div.row.area-start.ag-eqht div.col-xs-12.col-sm-6.col-md-6 div.eqht-wrapper.gray-border div.eqht-wrapper-body div.pad-10, html body.page-template.page-template-archive-podcasts.page-template-archive-podcasts-php.page div.row.bottom-margin-50, html body.page-template.page-template-archive-videos.page-template-archive-videos-php.page div.row.bottom-margin-50 {
cursor:pointer;
}

#nopointer, #no-pointer > div > div, #no-pointer > div > div  p, #main > div.row.area-start.flex.ag-eqht.row-special-gray > div.col-lg-offset-right-1.col-xs-12.col-sm-4.col-md-4 > div#no-pointer.force-width-100.eqht-wrapper.gray-border > div > div, div#no-pointer.pad-10  {
cursor:default !important;
}
/*--------------------------------------------------------------
# in the news tweak - commented out 2-21-23
--------------------------------------------------------------

.cshl-in-the-news-sidebar {

    max-height: 450px;
}*/

/*--------------------------------------------------------------
# news post styles
--------------------------------------------------------------*/

h3.news-story { color:#ef4e22; margin-top:0px; }
div.takeaway-box { margin-bottom:20px; }

/*--------------------------------------------------------------
# blockquotes as per client screenshot 
--------------------------------------------------------------*/
blockquote.blockquote-left {
width:35%; 
float:left; 
margin-right:20px;
border: none;
margin-top: -15px;
}

blockquote.blockquote-left  p{
font-family:'Source Sans Pro', sans-serif;
font-size:30px; 
line-height: 36px;
}

blockquote.blockquote-left > p:nth-child(2) {
font-family:'Source Sans Pro', sans-serif;
font-size:16px; 
line-height: 20px;
margin-top:-10px;
float:right;	
margin-bottom:20px; /* added by Sue 3/26/18 */
}

blockquote.blockquote-left:before{
	content: "\f10d";
	font-family: FontAwesome;
	color:#ef4e22;
	float: left;
	padding-right: 10px;
	font-size: 30px;
	margin-top: 10px;
}

blockquote.blockquote-right {
 width:35%; 
float:right; 
margin-left:20px;
border: none;
margin-top: -15px;
}

blockquote.blockquote-right p{
font-family:'Source Sans Pro', sans-serif;
font-size:30px; 
line-height: 36px;
}

blockquote.blockquote-right > p:nth-child(2) {
font-family:'Source Sans Pro', sans-serif;
font-size:16px; 
line-height: 20px;
margin-top:-10px;
float:left;	
margin-bottom:20px; /* added by Sue 3/26/18 */
}

blockquote.blockquote-right:before{
	content: "\f10d";
	font-family: FontAwesome;
	color:#ef4e22;
	float: left;
	padding-right: 10px;
	font-size: 30px;
	margin-top:10px;
}

blockquote.blockquote-full {
width:100%; 
border: none;
margin-top: -15px;
}

blockquote.blockquote-full  p{
font-family:'Source Sans Pro', sans-serif;
font-size:30px; 
line-height: 36px;
}

blockquote.blockquote-full > p:nth-child(2) {
font-family:'Source Sans Pro', sans-serif;
font-size:16px; 
line-height: 20px;
margin-top:-20px;
float:right;	
margin-bottom:20px; /* added by Sue 3/26/18 */
}

blockquote.blockquote-full:before{
	content: "\f10d";
	font-family: FontAwesome;
	color:#ef4e22;
	float: left;
	padding-right: 10px;
	font-size: 30px;
	margin-top: 10px;
}


@media screen and (max-width: 700px) {
blockquote.blockquote-left, blockquote.blockquote-right, blockquote.blockquote-full {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
}

/*--------------------------------------------------------------
# new style pull quotes
--------------------------------------------------------------*/

div.inside { border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin:60px 0; } 
div.inside div { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;margin: 5px 0; } 
div.inside div span.quote { 
	font-size:2.9em; 
	line-height:1.2em; 
	font-weight:300; 
	font-family: 'Source Sans Pro', sans-serif; 
	/*color:#ef4e22; */
	padding: 60px 40px; 
	position:relative; 
	/*text-align: center; */
	margin: 0 auto; 
	display: block; 
	width:80%; 
}
div.inside div span.quote:before { 
	font-family: 'Source Sans Pro', sans-serif; 
	font-size: 2em; 
	position: absolute; 
	color: #d6d5d1; 
} 
div.inside div span.quote:before { 
	font-family:Ionicons; 
	content:'\f347';
	top: 50px; 
	left:-50px; 
	float:left; 
}



/*--------------------------------------------------------------
# forcing bold on active public events
--------------------------------------------------------------*/
li.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item.page-item-208.current_page_item.menu-item-has-children.menu-item-221.active.menu-dropdown-icon {
	font-weight: bold;
}



/*--------------------------------------------------------------
# Fixing Font-size Carousel Right and Left Arrows
--------------------------------------------------------------*/
#myCarousel > a.right.carousel-control > span.icon-next {
    font-size: 40px;
}

#myCarousel > a.left.carousel-control > span.icon-prev    {
    font-size: 40px;
}

/*--------------------------------------------------------------
# Contact Form 7 Tweaks
--------------------------------------------------------------*/

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea { 
width: 100% !important;
}

/*--------------------------------------------------------------
# preventing horizontal scrollbar on posts
--------------------------------------------------------------*/

body.single-post article {	
	overflow-x: hidden;
}

/*--------------------------------------------------------------
# formatting news format date field included on staff listing tabs
--------------------------------------------------------------*/
body.page-template.page-template-archive-stafflisting div.listing-item span.date {
margin-left:5px;
width:50%;
font-weight:400;
}

/*--------------------------------------------------------------
# override style for lightbox, wp_quiz has added styles which
# are corrupting the close 'x' style causing it to jump
--------------------------------------------------------------*/
.mfp-image-holder .mfp-close { padding-right:0!important; }

/*--------------------------------------------------------------
# override caption color for metaslider
--------------------------------------------------------------*/

div.metaslider div.caption-wrap div.caption{
color:#ffffff;
}

/*--------------------------------------------------------------
# embed-responsive bottom margin and caption styles
--------------------------------------------------------------*/
.embed-responsive { margin-bottom:35px; }
.embed-responsive.caption { margin-bottom:5px; }


/*--------------------------------------------------------------
# set select field text color to orange bold sans serif
--------------------------------------------------------------*/
form#logoform select#color.form-control, form#logoform select#printed.form-control{
color:#ef4e22;
font-family: 'Source Sans Pro', sans-serif;
font-size:18px;
}
form#logoform select#color.form-control option, form#logoform select#printed.form-control option{
color:#000;
font-family: 'Source Sans Pro', sans-serif;	
}

/*--------------------------------------------------------------
# Newsstand Pagination Styles
--------------------------------------------------------------*/
.pagination,
.pagination>li>a { 
/*	clear:both; */
	position:relative;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:16px; /* Pagination text size */
	line-height:25.5px;
	float:left; /* Pagination float direction */
}
.pagination .badge { background-color:#444; }
.pagination>.disabled>span, 
.pagination>.disabled>span:hover, 
.pagination>.disabled>span:focus, 
.pagination>.disabled>a, 
.pagination>.disabled>a:hover, 
.pagination>.disabled>a:focus { color:#444; }
.pagination>li>a, .pagination>li>span { color: #004982; }

div.pagination { margin:40px 0; }
div.pagination.jpList { margin:0; }
a.page-item.btn-default { color:#004982; }
a.page-item.btn-default.active { background: #ef4e22; border-color:#ef4e22; }
a.page-item.btn-default.active,
a.page-item.btn-default.active:hover,
a.page-item.btn-default:hover { color:#000; }
a.page-item.btn-default:hover,
a.page-item.btn-default.disabled:focus { text-decoration:none; }
a.page-item.btn-default:hover { background: #6588a8; border-color:#6588a8; }
a.page-item.btn-default.disabled:hover { background:#fff; border-color:#ccc; }
a.page-item.btn-default.disabled:hover { color:#004982; }

ul.pagination { margin-top:0; }
.pagination>a.page-item { color:#004982; }
.pagination>.active>a.page-item { background: #ef4e22; border-color:#ef4e22; }
.pagination>.active>a.page-item,
.pagination>.active:hover>a.page-item,
.pagination>li>a.page-item:hover { color:#000; }

.pagination>li>a.page-item:hover { background: #6588a8; border-color:#6588a8; }
.pagination>.disabled>a.page-item:hover { background:#fff; border-color:#ccc; }
.pagination>.disabled>a.page-item:hover { color:#004982; }



a.nav-first:hover,
a.nav-previous:hover,
a.nav-last:hover,
a.nav-next:hover { text-decoration:none; }

.pagination a.btn,
.pagination>li>a.page-item { font-size:18px; padding: 10px 16px; }
.pagination .badge { font-size:18px; line-height:1; font-family:'Source Sans Pro', sans-serif; padding:4px 16px; font-weight:400; margin-left:20px; }
.pagination .badge.jpList { margin-top:0; padding:10px 16px; line-height:1.5; float:left; }

.pagination.jpList span.indexOf,
.pagination span.indexOf { float:left; margin-right:10px; font-family:'Source Sans Pro', sans-serif; line-height:40px; }
@media ( min-width:991px ) {
	.pagination .badge.jpList  { margin:0 0 10px 10px; float:right; }
	.pagination .badge { margin:0 0 0 20px; }
}

/*--------------------------------------------------------------
# Related Content plugin additional styles/overrides - added by Sue 3/22/18
--------------------------------------------------------------*/

@media ( max-width:991px ) {
	.related-content-tile { margin-bottom:20px; }
}

/*--------------------------------------------------------------
# Search Result Styles 
--------------------------------------------------------------*/
h2.entry-title.search-item {
font-size:24px;
margin-top:0px;
margin-bottom:0px;
}
.entry-meta.search-item-date {
	font-family:'Source Sans Pro', sans-serif!important;
	font-size:16px;
	text-transform:uppercase;
	font-weight:600!important;
}

div.form-group select.search-sort,
div.input-group .search-sort,
div.form-group.search-sort select { font-family:'Source Sans Pro', sans-serif; }
div.input-group .search-sort { font-size:20px; font-weight:700; }
div.form-group.search-sort select { font-size:20px; }


/* Faceted Search tweaks -- as per client request RCG  */

div.facetwp-template article.labdish { 
margin-bottom:0 
} 

.cshl-search-wrapper .facetwp-radio,
.cshl-search-wrapper .facetwp-checkbox {
    font-family: 'Source Sans Pro', sans-serif;
    color: #004982;
}

.cshl-search-wrapper .facetwp-radio:hover,
.cshl-search-wrapper .facetwp-checkbox:hover {
    color: #6588a8;
    font-weight:normal;
}

/*--------------------------------------------------------------
#  image zoom on hover css -- chris F
--------------------------------------------------------------*/    

.img-zoom {
  overflow: hidden;
  width: 350px;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}


.img-zoom:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*--------------------------------------------------------------
#  HT content styles
--------------------------------------------------------------*/

li.HT a { font-size: 20px;
line-height:1em; font-family:'Source Sans Pro', sans-serif; }

li.HT .list-description { margin-bottom:10px; }

/*--------------------------------------------------------------
#  cookie notice styles & overrides
--------------------------------------------------------------*/
.cli-bar-message {font-family: 'Noto Serif',serif; font-size: 14px; width:100%!important; }
.cli-style-v2 a { color:#000; }
.cli_action_button {
	font-family:'Source Sans Pro', sans-serif;
	line-height:1.42857143;
	text-transform:uppercase; 
	border-radius:0; 
	border:0; /* #adadad 1px solid; */
	color:#333!important; 
	padding:8px 10px; /*5px 10px 5px 10px; */
	font-size:14px!important; 
	margin:5px 10px!important;
}
.cli-bar-btn_container { margin-left:10px; }
.cli_action_button:hover { background: #e6e6e6!important; }


/*--------------------------------------------------------------
#  Newsstand content styles
--------------------------------------------------------------*/hover
article.mediaItem a div,
article.mediaItem a div p,
article.mediaItem a div p.summary { color:#444; }
article.mediaItem a div p span.link,
.panel-callout a div.panel-body p span.link,
span.link { color:#004982; font-weight:700; display: inline-block; }
article.mediaItem a:hover,
article.mediaItem a:hover div p span.link,
article.mediaItem a:hover div p,
article.mediaItem a:hover div ul li,
article.mediaItem a:hover div ul.blog-meta.tags:before,
.panel-callout a:hover div.panel-body h4,
.panel-callout a:hover div.panel-body p span.link,
.panel-callout a:hover div.panel-body ul.blog-meta li,
.panel-callout a:hover div.panel-body ul.blog-meta li:before,
.panel-callout a:hover div.panel-body ul.blog-meta.tags:before,
.panel-callout a:hover div.panel-body p,
.panel-callout a:hover div.panel-body { color:#6588a8; }

article.mediaItem a p.date { margin-bottom:15px; }
div.iconOverlay { position:absolute; /*top:40%; left:44%;*/ left: calc(50% - 2em); top: calc(50% - .75em);}
div.iconOverlay.youtube-orange:before { content: '\f16a'; color:#ef4e22; font-family: FontAwesome; font-size:calc(3.5em + 1vw); opacity:.8; }
div.iconOverlay.podcast-orange:before { content: '\f2ce'; color:#ef4e22; font-family: FontAwesome; font-size:calc(3.5em + 1vw); opacity:.9; }
div.iconOverlay.quiz-orange:before { content: '\f059'; color:#ef4e22; font-family: FontAwesome; font-size:calc(3.5em + 1vw); opacity:.8; }


/* KnightLabs Timeline styles */
iframe.tl-timeline,
div.tl-timeline {
	padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}



/*--------------------------------------------------------------
12. >>LABDISH 
--------------------------------------------------------------*/
/*  Styles for LabDish homepage*/

.post-label { position: absolute; top: 0; left: 15px; padding: 10px 15px; line-height: 44px; background: #ef4e22; color: #fff; float: left; font-family:'Source Sans Pro', sans-serif; }
.post-label span { font-family:'Source Sans Pro', sans-serif; font-size:18px; }
.post-label svg { float: left; fill: #fff; }
.post-label span { margin-left: 5px; line-height: 21px; }
.icon-star:before { font-family:FontAwesome; content: '\f005'; font-weight:600; }
img.img-full-width { width:100%; max-width:100%; display:block; height:auto; }

.blog-meta,
.blog-meta a { color:#444; font-family:'Source Sans Pro', sans-serif; font-size:15px; line-height:16px; margin-bottom:10px; }
.single-labdish .blog-meta a { color:#004982; }
p.blog-meta { margin-bottom:20px; }

div ul.blog-meta.list-inline { margin-left:0; }
div ul.blog-meta.list-inline>li { padding-right:0; }
div ul.blog-meta li { list-style:none; display:inline-block; color:#444; font-family:'Source Sans Pro', sans-serif; font-size:15px; line-height:1.4em; margin-bottom:0; }
div ul.blog-meta.tags li:after { content: '\0002C'; margin-right:5px; }
div ul.blog-meta.tags li:last-child::after { content: ''; }
div ul.blog-meta li.timestamp { padding-left:0; }
div ul.blog-meta li.timestamp:before { content: '\f133'; color:#444; font-family: FontAwesome; font-size:14px; line-height:16px; margin:0 7px 10px 0; }
div ul.blog-meta li.timestamp:after  { content: ''; margin-right:10px; }
div ul.blog-meta li.byline:before { content: '\f007'; color:#444; font-family: FontAwesome; font-size:14px; line-height:16px; margin:0 7px 10px 0; }
div ul.blog-meta.tags li span { display:inline-block; }
div ul.blog-meta.tags:before { content: '\f02c'; color:#444; font-family: FontAwesome; font-size:14px; line-height:16px; }
div ul.blog-meta.category:before { content: '\f07b'; color:#444; font-family: FontAwesome; font-size:14px; line-height:16px; margin:0 3px 10px 0; }

/* styles to make story boxes all the same height on each LabDish page */
.blogFlexbox {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;	
	flex-wrap: wrap;
}
.blogFlexbox > div[class*='col-md-6'] { display: flex; flex-direction: column; }
.blogFlexbox > div[class*='col-md-6'] div.panel { height:100%; }
.blogFlexbox > div[class*='col-xs-12'] { padding:0; }
.blogFlexbox > div[class*='col-xs-12'] div.post-label { left:0; }

/* styles for LabDish stories */
.featured-image-wrap { margin-bottom:10px; }
div.img-full-width { margin-bottom:25.5px; }
div.img-full-width img { width:100%; max-width:100%; display:block; height:auto; }
body.labdish figure img { width:auto; max-width:100%; height:auto; }
div ul.blog-meta { padding-inline-start:0; margin-block-start:0; -webkit-padding-start:0; -moz-padding-start:0; }
.row.area-start div.blog-social-share-wrapper { font-family:'Source Sans Pro', sans-serif; font-size:20px; line-height:25.5px; margin-top:0; margin-bottom:25px; }
		
article.labdish { margin-bottom:75px; }
		
.drop-cap { color: #ef4e22; float: left; font-size: 75px; line-height: 56px; padding-right:5px; padding-left: 3px; /*line-height: 60px; padding-top: 4px; padding-right: 8px;*/ }
div.row.area-start div div.pull-quote,
div.row div div.pull-quote { color: #444; font-family:'Source Sans Pro', sans-serif; font-size:30px; line-height:36px; font-weight:400; padding:10px 15px 30px 15px; }
div.pull-quote:before { color: #ef4e22; font-family:FontAwesome; content:'\f10d'; float:left; padding-right:10px; font-size:30px; }
div.row.area-start div div.pull-quote p:nth-child(2) { color:#777; font-family:'Source Sans Pro', sans-serif; font-size:16px; line-height: 20px; margin-top:-30px; float:right;	padding:5px 15px 0 15px; }
div.row.area-start div div.pull-quote p:nth-child(2)::before { content: '\2014 \00A0'; margin-bottom: 25px; }

@media only screen and (min-width:992px) {
	.row.area-start div.blog-social-share-wrapper { text-align:right; }
	.blogFlexbox > div[class*='col-md-6'] { padding:0 10px; }

}

/* override for link color in mobile menu */
@media (max-width:891px){
.menu ul > li > ul > li > a {
color:#004982;
}
}

/* Added styles for late change requesting dynamic labeling of mobile navigation division menus */
div.title-on-mobile{
	display:none;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bold;
    margin-left: 10px;
    text-transform: uppercase;
    color: #004982;	
}

@media only screen and (max-width: 891px){
	div.title-on-mobile .show-on-mobile {
    display: block;
	}
}
@media (min-width:892px){
	div.title-on-mobile{
	display:none;	
	}
}

/* Added styles for late change requesting other divisions list after division choices */

ul.addl-on-mobile{
    display:none;
    font-family: "Source Sans Pro", sans-serif;
   /* margin-left: 10px;*/
    text-transform: uppercase;
    color: #004982; 
	 font-size: 14px;
}
@media only screen and (max-width: 891px){
    ul.addl-on-mobile show-on-mobile  li a {
    display: block;
	    font-size: 14px;
    font-family: "Source Sans Pro", sans-serif;
    text-transform: uppercase;
    padding-top: 1em;
    padding-bottom: 1em;
}
	ul.addl-on-mobile span.addl-title {
		font-size:16px;
		font-weight:bold;
		margin-left: 10px;
		display:inline-block;
		margin-top:5px;
	}
}
@media (min-width:892px){
    ul.addl-on-mobile{
    display:none;   
    }
}


/* overrides  -- leaving here for easy access while iterating -- rcg */
/*For Firefox*/
#new-primary-background {
height:56px;
}
/* for gap */
@media (min-width:892px){
.menu > ul > li > ul.normal-sub {margin-top:-2px !important}
}

@media (min-width:1107px){
.menu > ul > li > ul.normal-sub {margin-top:0px !important}
}

/* turn off hamburger menu on the search page */
body.page-id-33098 div.insite-nav { display:none; }


/*special header alignment for the archives collections*/
@media (min-width:992px) {
        
h3.archive-collections-sidebar-header {
  
    margin-top: 0px; 
    margin-bottom: 10px;
    
}

ul.archive-collections-sidebar-list {

    margin-bottom: 20px;
}

}

.media-meta { color:#444; font-family:'Source Sans Pro', sans-serif; font-size:16px; line-height:17px; padding-top:8px; }
div ul.media-meta.list-inline { margin-left:0; }
div ul.media-meta.list-inline>li { padding-right:0; }
div ul.media-meta li { list-style:none; display:inline-block; color:#444; font-family:'Source Sans Pro', sans-serif; font-size:16px; line-height:1.4em; margin-bottom:0; }
div ul.media-meta.tags li:after { content: '\0002C'; /*margin-right:5px;*/ }
div ul.media-meta.tags li:last-child::after { content: ''; }
div ul.media-meta.tags li span { display:inline-block; }
div ul.media-meta.tags:before { content: '\f02c'; color:#444; font-family: FontAwesome; font-size:14px; line-height:16px; }

div.soundcite-audio { display:none; } /* to suppress the auto generated knightlabs audio players located below the footer and avoid conflicts with the styles from the html5 audio player plugin */


.container {
  max-width: 1920px;
  padding-left: clamp(25px, 140px, 140px);
  padding-right: clamp(25px, 140px, 140px);
  margin-right: 5%;
  margin-left: 5%;
}

.container.narrow {
  /* min-width: 992px */
}
@media (min-width: 992px) {
  .container.narrow {
    padding-left: clamp(25px, 175px, 175px);
    padding-right: clamp(25px, 175px, 175px);
  }
}

@media (min-width: 1441px) {
  .container.narrow {
    padding-left: clamp(25px, 278px, 278px);
    padding-right: clamp(25px, 278px, 278px);
  }
}

@media (max-width: 991px) {
  .container {
    padding-left: 25px;
    padding-right: 25px;
  }
}
/* =========================
   HOMEPAGE HERO (updated)
   ========================= */
.section-homepage_hero {
    min-height: 800px;           /* full screen height */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* keep text left-aligned */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    overflow: hidden;            /* crops overflowing video edges */
    padding: 0;                  /* remove top/bottom padding */
    margin: 0;
}


/* Gradient overlay above video */
/* .section-homepage_hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,.9) 30%, rgba(255,255,255,0) 60%);
  z-index: 1;              
  pointer-events: none;     
} */

.section-homepage_hero .container {
    height: 100%;
    display: flex;
    z-index: 2;
    /* padding-left: unset;
    margin-right: unset; */
    flex-direction: column;
}
/* Force the Inter design-system font across every Page Builder (template-sections) page - the
   giving / research initiative pages. Without this the theme defaults (Source Sans Pro headings,
   Noto Serif list items) leak in and fonts look inconsistent across sections. The real homepage
   uses a different template, so it is unaffected. */
.page-template-template-sections .page-builder-section,
.page-template-template-sections .page-builder-section * {
  font-family: 'Inter', sans-serif !important;
}

/* Typography */
.section-homepage_hero .container h2{
    color: #004982;
    font-size: 50px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 50px;
    font-family: 'Inter', sans-serif !important;
}
.section-homepage_hero .logo {
    width: 300px;
    height: auto;
    z-index: 100;
}


.section-homepage_hero .container h3{
    color: black;
    font-size: 17px;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
}

/* MNP CHANGED: Science - made larger* from 72px to 84px*/
.section-homepage_hero .container h2 span{ 
    font-style: italic;
    font-weight: 700 !important;
    font-size: 84px;
}

@Media (max-width: 976px) {
    .section-homepage_hero .container h2 span{ 
        font-size: 48px;
    }
}

.section-homepage_hero .container p{
    color: #000;
    font-family: "Noto Serif";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}

/* MNP CHANGED: Overlay height changed from 600 to 550px, bg-color: 0.5 from 0.7 */
.section-homepage_hero .container .bgoverlay { 
    max-width: 400px;
    padding: 20px;
    background-color: rgba(255,255,255,0.5);
    height: 550px;
    display: flex;
    align-items: start;
}

@media (max-width: 767px) {
    .section-homepage_hero .container .bgoverlay { 
        max-width: 100%;
        height: 500px;
        align-items: center;
    }
}
/* CTA button + arrow reveal */
.section-homepage_hero .container .homepage_text .btn-homepage_text { 
    background-color: #004982;
    border-radius: 0;
    padding: 10px 20px;
    margin: 8px 0;
    font-size: 16px;
    font-weight: 600 !important;
    color: #fff;
    transition: all 0.3s ease-in-out;
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.section-homepage_hero .container .homepage_text .btn-homepage_text::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
    position: relative;
    right: -10px;
    display: none;
}

.section-homepage_hero .container .homepage_text .btn-homepage_text:hover { 
    background-color: #7FC3F9;
    color: #000;
    padding-right: 35px; /* grows to the right */
}

.section-homepage_hero .container .homepage_text .btn-homepage_text:hover::after {
    opacity: 1;
    transform: translateX(0);
    display: inline-block;
}

/* =========================
   BACKGROUND VIDEO LAYER
   ========================= */
/* Background video wrapper pinned to the hero */
.section-homepage_hero .video-bg {
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

/* Native video element - always fills container */
.section-homepage_hero .video-bg__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ensures video covers entire area */
  border: 0;
}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 1400px) {
    .section-homepage_hero {
        background-position-x: unset;
    }
    .section-homepage_hero::before {
        background: linear-gradient(to right, rgba(255,255,255,0.89) 25%, rgba(255,255,255,0) 50%);
    }
    .section-homepage_hero .container h2{
        font-size: 55px;
        line-height: 55px;
    }
}

@media (max-width: 993px) {
    .section-homepage_hero {
        background-position-x: -250px; /* harmless if video is used */
    }
    .section-homepage_hero .container h2{
        font-size: 45px;
        line-height: 45px;
    }
}

@media (max-width: 767px) {
    .section-homepage_hero .container .homepage_text{ 
        width: 100%;
    }
    .section-homepage_hero::before {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 80%);
    }
    .section-homepage_hero {
        background-size: 794px;
        background-repeat: no-repeat;
        background-position: bottom center;
        background-image: linear-gradient(to bottom, white 55%, rgba(255, 255, 255, 0) 63%), url(https://ll-dev-cshl-core.pantheonsite.io/wp-content/uploads/2025/10/1Screen-Recording-2025-10-01-at-12.59.55-PM-1.png);
        align-items: flex-start;
        min-height: 870px;
    }
    .section-homepage_hero .container {
        margin-top: 125px;
    }
}


/* ------------------------------------- START SECTION HOMEPAGE CURIOSITY ------------------------------------- */

/* ===== Section base ===== */
.section-homepage_curiosity {
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-color: #004982;   /* fallback/solid side color */
    padding: 50px 0;
}

/* Keep all content above video + overlay */
.section-homepage_curiosity .container {
    width: 100%;
    position: relative;
    z-index: 2;
}

/* ===== Typography ===== */
.section-homepage_curiosity .container h2{
    color: #fff;
    font-size: 45px;
    font-weight: 500 !important;
    line-height: 45px;
    margin-top: 55px;
}
.section-homepage_curiosity .container h2 span{
    font-weight: 700 !important;
    font-style: italic;
}
.section-homepage_curiosity .container p{
    color: #fff;
    font-family: "Noto Serif";
    font-size: 16px;
    line-height: 21px;
}
.section-homepage_curiosity .container .curiosity_text{
    display: flex;
    justify-content: space-between;
    margin-left: auto;    /* center the block when a max-width is set (ACF curiosity_text_max_width) */
    margin-right: auto;
}
.section-homepage_curiosity .container .curiosity_p{
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: flex-start;
}

/* ===== Button ===== */
.section-homepage_curiosity .container .curiosity_text .btn-homepage_curiosity {
    background-color: #7FC3F9;
    border-radius: 0;
    padding: 10px 20px;
    margin: 8px 0;
    font-size: 16px;
    color: #000;
    transition: all 0.3s ease-in-out;
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    font-weight: 600 !important;
}
.section-homepage_curiosity .container .curiosity_text .btn-homepage_curiosity::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
    position: relative;
    right: -10px;
    color: #000;
    display: none;
}
.section-homepage_curiosity .container .curiosity_text .btn-homepage_curiosity:hover {
    background-color: white;
    color: #000;
    padding-right: 35px;
}
.section-homepage_curiosity .container .curiosity_text .btn-homepage_curiosity:hover::after {
    opacity: 1;
    transform: translateX(0);
    display: inline-block;
}

/* MNP CHANGE - max width of video from 60% to 100% */
/* ===== Video area (left 40%) ===== */
.section-homepage_curiosity .curiosity_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;  /* base layer */
}

.section-homepage_curiosity .curiosity_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
}

.section-homepage_curiosity .curiosity_video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #004982;
  mix-blend-mode: multiply;
  opacity: 0.93; /* make lighter: try 0.75–0.85 */
  pointer-events: none;
  z-index: 1;
}




/* ===== Responsive ===== */
@media (max-width: 1400px) {
    .section-homepage_curiosity .container h2{
        font-size: 55px;
        line-height: 55px;
    }
}
@media (max-width: 993px) {
    .section-homepage_curiosity .container h2{
        font-size: 40px;
        line-height: 40px;
    }
    .section-homepage_curiosity .container .curiosity_text {
        flex-direction: column;
    }
    .section-homepage_curiosity .container .curiosity_p {
        width: 100%;
    }
    /* Make video full-width on small screens if desired */
/* MNP CHANGE - max height of video from 45% to 100% */
    .section-homepage_curiosity .curiosity_video {
        position: absolute;
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 767px) {
}


/* ------------------------------------- START SECTION HOMEPAGE DISCOVERY ------------------------------------- */

.section-homepage_discovery {
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    padding: 50px 0px;
    background-position: right;
    /* Removed background-color and z-index */
}

/* Single overlay for the entire section */
/* .section-homepage_curiosity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(0, 73, 130, 0.9) 0%, 
        rgba(0, 73, 130, 0.95) 35%, 
        rgba(0, 73, 130, 1) 40%, 
        rgba(0, 73, 130, 1) 100%
    );
    z-index: 1;
} */

.section-homepage_discovery .container {
    width: 100%;
    position: relative;
    z-index: 2; /* Keeps content above the overlay */
}

.section-homepage_discovery .container h2{
    color: #004982;
    font-size: 45px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 52px;
    margin-top: 55px;
    margin-bottom: 20px;   /* gap between the headline and the description below */
    /* Removed z-index: 2; (not needed since container has it) */
}

.section-homepage_discovery .container h2 span{
    font-weight: 700 !important;
    font-style: italic;
}

.section-homepage_discovery .container p{
    color: black;
    font-family: "Noto Serif";
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: unset !important;
}

/* Emphasis <span> inside the description (Figma): white, uppercase, Inter Medium 17/24.
   Scoped to .container p so it does NOT touch the headline span (.container h2 span).
   display:block puts it on its own line above the body copy (the description is rendered as a
   single <p>, so an inline span would otherwise run straight into the body text). */
.section-homepage_discovery .container p span {
    display: block !important;
    margin-bottom: 20px;                   /* gap under the label; an inline style can override */
    color: #FFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;          /* 141.176% */
    text-transform: uppercase !important;
}

.section-homepage_discovery .container .curiosity_text{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

.section-homepage_discovery .container .curiosity_p{
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: flex-start;
    gap: 10px;
}


.section-homepage_discovery .container .curiosity_text .btn-homepage_curiosity { 
    background-color: #004982;
    border-radius: 0;
    padding: 10px 20px;
    margin: 8px 0;
    font-size: 16px;
    color: white;
    transition: all 0.3s ease-in-out;
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    font-weight: 600 !important;
}

/* Arrow initially hidden */
.section-homepage_discovery .container .curiosity_text .btn-homepage_curiosity::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
    position: relative;
    right: -10px;
    display: none;
}

/* Hover effects */
.section-homepage_discovery .container .curiosity_text .btn-homepage_curiosity:hover { 
    background-color: white;
    color: black;
    padding-right: 35px; /* grows to the right */
}

.section-homepage_discovery .container .curiosity_text .btn-homepage_curiosity:hover::after {
    opacity: 1;
    transform: translateX(0);
    display: inline-block;
}

.section-homepage_discovery .curiosity_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* Video stays behind the overlay */
}

.section-homepage_discovery .curiosity_video video{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 80% 50%;
}

@media (max-width: 1400px) {
    .section-homepage_discovery .container h2{
        font-size: 55px;
        line-height: 55px;
    }
}

@media (max-width: 993px) {
    .section-homepage_discovery .container h2{
        font-size: 40px;
        line-height: 40px;
    }
    .section-homepage_discovery .container .curiosity_text {
        flex-direction: column;
    }
    .section-homepage_discovery .container .curiosity_p {
        width: 100%;
    }
    .section-homepage_discovery {
        min-height: 400px;
    }
}

@media (max-width: 767px) {
    .section-homepage_discovery {
        background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 60%), url(https://ll-dev-cshl-core.pantheonsite.io/wp-content/uploads/2025/11/CSHL-250915-078-1.png);
        min-height: 750px !important;
        background-size: 498px !important;
        background-repeat: no-repeat !important;
        background-position: bottom !important;
        align-items: flex-start !important;
    }

}

/* ------------------------------------- START SECTION HOMEPAGE BOXES ------------------------------------- */

.section-homepage_boxes {
    min-height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5% 0%;
    background-color: #f1f1f1;
    padding-top: 50px;
    padding-bottom: 50px;
    position: relative;
}

.section-homepage_boxes .container {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.section-homepage_boxes .container img{
    height: auto;
    object-fit: cover;
    align-self: center;
    width: 100%;
    margin-top: 55px;
}

.section-homepage_boxes .container h2{
    color: #004982;
    font-size: 45px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 52px;
    text-align: center;
}

.section-homepage_boxes .container h2 span{
    font-weight: 700 !important;
    font-style: italic;
}

.section-homepage_boxes .container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
}

.section-homepage_boxes .container .content .items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 80px;
}

.section-homepage_boxes .container .content .cta {
    display: flex;
    justify-content: center;
}

/* CARD */
.section-homepage_boxes .container .content .items .item {
    flex: 0 0 calc(33.333% - 20px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible; /* allow panel to grow upward outside its start height */
    text-decoration: none;
}

.section-homepage_boxes .container .content .items .item .image-wrapper {
    overflow: hidden; /* keeps image zoom masked */
}

.section-homepage_boxes .container .content .items .item img {    
    transition: transform .3s ease;
}

/* SLIDING-UP (GROWING) TEXT PANEL */
.section-homepage_boxes .container .content .items .item .text {
    --collapsed: 78px;           /* approx. headline + padding; tweak as needed */
    --expanded: 480px;           /* big enough for longest copy */

    position: absolute;
    left: 0;
    bottom: -55px;                   /* anchor to bottom */
    width: 100%;
    padding: 5%;
    background: #fff;
    overflow: hidden;            /* hide content while height grows */
    max-height: var(--collapsed);
    transition: max-height .75s ease, background .75s ease;
    will-change: max-height, background;
    z-index: 2;
}

/* HEADLINE (visible in base state) */
.section-homepage_boxes .container .content .items .item .text .headline-text {
    color: #004982;
    text-align: left;
    font-family: "Noto Serif";
    font-size: 17px;
    font-style: normal;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    transition: color .75s ease, transform .75s ease;
    transform: translateY(4px);
}

/* DESCRIPTION PARAGRAPH (hidden in base state, revealed on hover) */
.section-homepage_boxes .container .content .items .item .text p:not(.headline-text) {
    font-size: 15px;
    margin-bottom: unset !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    color: white !important;
    text-align: left !important;
    transition: max-height .75s ease, opacity .75s ease, transform .75s ease;
    will-change: max-height, opacity, transform;
    line-height: 18px;
}

/* HOVER STATES: panel grows upward; top edge slides up */
.section-homepage_boxes .container .content .items .item:hover .text {
    background: #004982;
    max-height: var(--expanded);
}

.section-homepage_boxes .container .content .items .item:hover .text .headline-text {
    color: #fff;
    transform: translateY(0);
}

.section-homepage_boxes .container .content .items .item:hover .text p:not(.headline-text) {
    max-height: 200px;           /* enough for your copy */
    opacity: 1;
    transform: translateY(0);
}

/* IMAGE ZOOM */
.section-homepage_boxes .container .content .items .item:hover img {
    transform: scale(1.03);
}

/* CTA BUTTON */
.section-homepage_boxes .container .content .btn-homepage_curiosity {
  background-color: #BE854C;
  border-radius: 0;
  padding: 10px 20px 10px 20px;
  margin: 8px 0;
  font-size: 1.2em;
  color: white;
  transition: all 0.3s ease-in-out;
  font-weight: 600 !important;
}

.section-homepage_boxes .container .content .btn-homepage_curiosity:hover {
  background-color: #BE854C;
}

/* TYPE SCALE */
@media (max-width: 1400px) {
    .section-homepage_boxes .container h2{
        font-size: 55px;
        line-height: 55px;
    }
}

@media (max-width: 993px) {
    .section-homepage_boxes .container h2{
        font-size: 40px;
        line-height: 40px;
        text-align: left;
    }
    .section-homepage_boxes {
        min-height: 65vh;
    }
}

@media (max-width:767px) {
    .section-homepage_boxes .container img {
        margin-top: unset !important;
    }
    .section-homepage_boxes .container .content {
        gap: 20px;
    }
    .section-homepage_boxes .container .content .items {
        margin-bottom: unset;
    }
}

/* 2 columns at 994px and below */
@media (max-width: 994px) {
    .section-homepage_boxes .container .content .items .item {
        flex: 0 0 calc(50% - 20px);
    }
}

/* 1 column at 600px and below */
@media (max-width: 600px) {
    .section-homepage_boxes .container .content .items .item {
        flex: 0 0 100%;
    }
}

/* Force hover-state by default on touch (phones + tablets) */
@media (hover: none), (max-width: 1024px) {
  .section-homepage_boxes .container .content .items .item .text {
    background: #004982;
    max-height: var(--expanded);
    bottom: 0;                 /* sit flush with the card on mobile */
    transition: none;          /* no grow animation on touch */
  }

  .section-homepage_boxes .container .content .items .item .text .headline-text {
    color: #fff;
    transform: none;
  }

  .section-homepage_boxes .container .content .items .item .text p:not(.headline-text) {
    max-height: 200px;
    opacity: 1;
    transform: none;
    color: #fff !important;
  }

  /* Prevent image zoom effect on touch */
  .section-homepage_boxes .container .content .items .item img{
    transform: none !important;
    transition: none !important;
  }
}

.page-template-template-sections #site-navigation {
    margin-bottom: unset !important;
}
/* ========================= HOMEPAGE BLOGS SECTION ========================= */

.section-homepage_blogs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding: 50px 0;
  background-color: white;
}

/* Container */
.section-homepage_blogs .container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  gap: 20px;
  box-sizing: border-box;
  flex-direction: column;
}

.section-homepage_blogs .container .items {
  display: flex;
  gap: 20px;
  align-items: stretch !important;
}

/* Heading */
.section-homepage_blogs .container h2 {
  font-size: 45px;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 55px;
  margin-top: 55px;
  color: black;
}

.section-homepage_blogs .container h2 span {
  font-weight: 700 !important;
  font-style: italic;
}

.section-homepage_blogs .container .heading {
  color: #004982;
  font-weight: 300 !important;
  font-size: 22px;
  font-family: Inter;
}

.section-homepage_blogs .container .mobile_hide {
  display: inline-block;
}

/* 50/50 Column Layout */
.section-homepage_blogs .container .featured,
.section-homepage_blogs .container .right {
  flex: 0 0 calc(50% - 10px);
  max-width: calc(50% - 10px);
  box-sizing: border-box;
}

/* Featured Card (Left) */
.section-homepage_blogs .container .featured .item-blog {
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
}


.section-homepage_blogs .container .featured:not(.featured--stacked):hover .box {
  background-color: #004982 !important;
  color: white !important;
}

.section-homepage_blogs .container .featured .image {
  display: block;
  overflow: hidden;
  flex: 1 1 auto !important;
}

@media (max-width: 1199px) and (min-width: 768px) {
    .section-homepage_blogs .container .featured .image {
            flex: 0 0 230px !important;
            width: 230px;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            display: block;
    }
    .section-homepage_blogs .container .items .item-blog .image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

.section-homepage_blogs .container .featured .image img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.section-homepage_blogs .container .featured .box {
  background-color: #f1f1f1;
  padding: 30px;
  margin: 0 !important;
  gap: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto !important;
  transition: all 0.3s ease;
  justify-content: center;

}

/* Right Column */
.section-homepage_blogs .container .right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section-homepage_blogs .container .right .items {
  display: flex;
  flex-direction: column;
  height: auto !important;
  justify-content: flex-start !important;
  gap: 20px;
}

/* Right Side Cards */
.section-homepage_blogs .container .right .box {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto !important;
  overflow: visible !important;
  min-height: 0;
  background: transparent;
}

.section-homepage_blogs .container .right .box .thumb {
    height: 100%;
    aspect-ratio: 1 / 1;
    max-width: 251px;
}

.section-homepage_blogs .container .right .box .thumb img,
.section-homepage_blogs .container .items .item-blog .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-homepage_blogs .container .right .box .body {
  background-color: #f1f1f1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  transition: background-color 0.3s ease;
  gap: 10px;
  justify-content: center;
}
.section-homepage_blogs .container .box .title a {
    font-size: 17px !important;
    font-weight: 600 !important;
}
/* Typography */
.section-homepage_blogs .container .box h3,
.section-homepage_blogs .container .box p {
  margin: 0 !important;
  transition: color 0.3s ease;
}

.section-homepage_blogs .container .box .meta {
  display: flex;
  color: #8D8D8D;
  gap: 10px;
  align-items: center;
}

.section-homepage_blogs .container .box .meta p {
  margin: 0 !important;
}

.section-homepage_blogs .container .right .box .title {
  margin: unset;
  overflow-wrap: anywhere;
}

.section-homepage_blogs .container .right .box .excerpt {
  margin-top: 6px;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.section-homepage_blogs .container .featured .box .excerpt p{ 
    color: #000;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
}



.section-homepage_blogs .container .right .box .body p,
 .section-homepage_blogs .container .featured .box p{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 18px;
}

@media (max-width:767px) {
  .site-footer img {
    width: 320px !important;
  }
}


/* Prevent text squeeze */
.section-homepage_blogs .container .right,
.section-homepage_blogs .container .right .box,
.section-homepage_blogs .container .right .box .body {
  min-width: 0;
}
@media(max-width:500px) {
    .jck_ab_hidden {
        width: fit-content;
    }
}

/* Image transitions */
.section-homepage_blogs .container .items .box img {
  transition: transform 0.3s ease;
}

.section-homepage_blogs .container .items .box a,
.section-homepage_blogs .container .items .box span {
    transition: color 0.3s ease;
    font-weight: 600 !important;
    color: #004982 !important;
    font-size: 15px; 
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important;
}

/* 11/25  - font size increase */
.section-homepage_blogs .container .items .box .eyebrow,
.section-homepage_blogs .container .items .box .mobile-hide,
.section-homepage_blogs .container .items .box .date {
    color: #8F8F8F !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 16px !important;
}

.section-homepage_blogs .container .items .box .feature-eyebrow,
.section-homepage_blogs .container .items .box .feature-date {
    color: #8F8F8F !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 16px !important;
}

.section-homepage_blogs .container .right .box .title a {
    color: #004982 !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 24px !important;
}
.section-homepage_blogs .container .right .box .excerpt {
    overflow: hidden !important;
    color: #000 !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 18px !important;
}

.section-homepage_blogs .container .right .box .link {
    color: #004982 !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 22px !important;
}

/* Hover Effects */
.section-homepage_blogs .container .items .box:hover .body {
  background-color: #004982;
}
.section-homepage_blogs .container .items .featured:not(.featured--stacked):hover .box p,
.section-homepage_blogs .container .items .featured:not(.featured--stacked):hover .box a,
.section-homepage_blogs .container .items .featured:not(.featured--stacked):hover .box span,
.section-homepage_blogs .container .items .featured:not(.featured--stacked):hover .box h3 {
  color: #fff !important;
}

.section-homepage_blogs .container .items .box:hover p,
.section-homepage_blogs .container .items .box:hover a,
.section-homepage_blogs .container .items .box:hover span,
.section-homepage_blogs .container .items .box:hover h3 {
  color: #fff !important;
}

.section-homepage_blogs .container .items .box:hover img {
  transform: scale(1.03);
}

/* Arrow Animation */
.section-homepage_blogs .container .items .box .link::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 0.3s ease, margin-left 0.3s ease;
}

.section-homepage_blogs .container .items .box:hover .link::after {
  transform: scaleX(1.4) translateX(3px);
  margin-left: 10px;
}
.section-homepage_blogs .container .box h3 a {
    color: #004982 !important;
}

/* --- Stacked text-only featured (toggle: featured_stacked) ---
   Left column shows two stacked items with NO image; per-item hover (the whole-column
   hover is excluded via :not(.featured--stacked) on the rules above). Placed after the
   base rules so the equal-specificity height override wins on source order. */
.section-homepage_blogs .container .featured--stacked {
    display: flex;
    flex-direction: column;
    gap: 0;   /* no uniform gap: keeps heading->first-card spacing = the 10px heading margin, matching the right column */
}
.section-homepage_blogs .container .featured--stacked .item-blog + .item-blog {
    margin-top: 20px;   /* 20px only BETWEEN the two cards (the right column's card gap) - NOT heading->card */
}
.section-homepage_blogs .container .featured--stacked .heading {
    flex: 0 0 auto;
}
.section-homepage_blogs .container .featured--stacked .item-blog {
    height: auto !important;
    flex: 1 1 0 !important;      /* stretch: the 2 cards fill the column so it matches the 3-card right column top-to-bottom */
    min-height: 0;
}
.section-homepage_blogs .container .featured--stacked .item-blog .box {
    flex: 1 1 auto !important;   /* grey panel fills its half of the column */
    justify-content: flex-start !important;   /* type / date / title / text top-aligned */
}
.section-homepage_blogs .container .featured--stacked .item-blog .box .link {
    margin-top: auto !important;   /* push the "Learn More" link to the bottom of the box */
}
.section-homepage_blogs .container .featured--stacked .item-blog:hover .box {
    background-color: #004982 !important;   /* per-item hover; text color handled by .box:hover rules above */
}

/* ========================= RESPONSIVE BREAKPOINTS ========================= */

/* Large Desktop Adjustments */
@media (max-width: 1820px) and (min-width: 1211px) {
  .section-homepage_blogs .container {
    gap: 16px;
  }
  .section-homepage_blogs .container .right .box .body {
    padding: 16px;
  }
  .section-homepage_blogs .container .right .box .title {
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.2;
  }
}

@media (max-width: 1685px) and (min-width: 1211px) {
  .section-homepage_blogs .container {
    gap: 16px;
  }
  .section-homepage_blogs .container .right .box .body {
    padding: 14px;
  }
}

@media (max-width: 1520px) and (min-width: 1211px) {
  .section-homepage_blogs .container .right .box .body {
    padding: 14px;
  }
}

@media (max-width: 1400px) {
  .section-homepage_blogs .container h2 {
    font-size: 55px;
    line-height: 55px;
  }
}

@media (max-width: 1360px) and (min-width: 1211px) {
  .section-homepage_blogs .container .right .box .body {
    padding: 12px;
  }
}

@media (max-width: 1280px) and (min-width: 1211px) {
  .section-homepage_blogs .container .right .box .body {
    padding: 12px;
  }
}

@media (min-width: 1200px) and (max-width: 1680px) {
  .section-homepage_blogs .container .featured,
  .section-homepage_blogs .container .right {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Vertical Stack Layout */
@media (max-width: 1210px) {
  .section-homepage_blogs .container .items {
    flex-direction: column;
    gap: 30px;
  }
  
  .section-homepage_blogs .container .items .item-blog {
    display: flex;
    flex-direction: row !important;
  }
  
  .section-homepage_blogs .container .items .item-blog .image img {
    width: 300px;
    height: 300px;
    object-fit: cover;
  }
  
  .section-homepage_blogs .container .featured,
  .section-homepage_blogs .container .right {
    width: 100%;
    flex: 0 0 auto;
  }
  
  .section-homepage_blogs .container .right {
    gap: 16px;
  }
  
  .section-homepage_blogs .container .right .box {
    flex: 0 1 auto;
  }
  
  .section-homepage_blogs .container .heading {
    font-size: 30px !important;
  }

  .section-homepage_blogs .container .featured .box {
    flex: unset !important;
  }
}

@media (max-width: 1199px) {
  .section-homepage_blogs .container {
    flex-direction: column;
  }
  
  .section-homepage_blogs .container .featured,
  .section-homepage_blogs .container .right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 993px) {
  .section-homepage_blogs .container h2 {
    font-size: 40px;
    line-height: 40px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .section-homepage_blogs .container .items .item-blog {
    flex-direction: column;
  }
  
  .section-homepage_blogs .container .items .item-blog .image img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  
  .section-homepage_blogs .container .right .box {
    flex-direction: column !important;
  }
  
  
  .section-homepage_blogs .container .right .box .thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  
  .section-homepage_blogs .container .meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-homepage_blogs .container .mobile_hide {
    display: none !important;
  }
  
  .section-homepage_blogs .container .box .meta {
    align-items: flex-start;
  }
  .section-homepage_blogs .container .featured .item-blog {
    flex-direction: column !important;
  }
  .section-homepage_blogs .container .right .box .thumb {
    max-width: unset !important;
    width: unset !important;
  }
}


/* ==============================================================
   FIX: Uniform image sizes + proper zoom behavior
   ============================================================== */

/* Right column thumbnails: fixed squares, same size */
.section-homepage_blogs .container .right .box .thumb {
    flex: 0 0 230px;      /* adjust 220–250px if needed */
    width: 230px;
    aspect-ratio: 1 / 1;
    overflow: hidden;     /* keep zoom inside frame */
    display: block;
}

/* Featured story image: also ensure zoom is contained */
.section-homepage_blogs .container .featured .image {
    overflow: hidden !important;
}

/* Base image styles (right + left) */
.section-homepage_blogs .container .right .box .thumb img,
.section-homepage_blogs .container .featured .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
    transform-origin: center center;
}

/* Hover zoom inside the frame */
.section-homepage_blogs .container .right .box:hover .thumb img,
.section-homepage_blogs .container .featured:hover .image img {
    transform: scale(1.05);
}

/* Remove the old hover grow rule */
.section-homepage_blogs .container .items .box:hover img {
    transform: none !important;
}

/* Fix featured card overflowing: let it size naturally */
.section-homepage_blogs .container .featured .item-blog {
    display: flex !important;
    flex-direction: column;
}

/* Make sure the featured column itself stretches with the right column */
.section-homepage_blogs .container .featured {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

/* AI VENTURE PAGE START */


/* ----------- HERO ----------- */

.section-ai_ventures_hero {
    height: 85vh;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 4%;
    padding-bottom: 4%;
    position: relative;
}

.section-ai_ventures_hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.section-ai_ventures_hero .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.section-ai_ventures_hero .container h2{
    color: white;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
    margin-top: 55px;
    text-align: center;
}

.section-ai_ventures_hero .container p{
    color: white;
    font-size: 18px;
    text-align: center;
}

/* @media (min-width: 1510px) {
    .section-ai_ventures_hero .container {
        margin-left: unset !important;
        padding-left: unset !important;
    }
} */


@media (max-width: 1400px) {
    .section-ai_ventures_hero .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-ai_ventures_hero .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-ai_ventures_hero .container h2{
        font-size: 35px;
        line-height: 35px;
    }
}

/* ----------- CENTER TEXT ----------- */

.section-center_text {
    height: 55vh;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f1f1f1;
    padding-top: 4%;
    padding-bottom: 4%;
}

/* Theme select (ACF: theme) controls the background. Gray (#f1f1f1) is the default. */
.section-center_text.theme-white {
    background-color: #fff;
}
.section-center_text.theme-black {
    background-color: #000;
}
.section-center_text.theme-black .container h2,
.section-center_text.theme-black .container p {
    color: #fff;
}

/* Text alignment select (ACF: text_align). Default is centered; this left-aligns header + text. */
.section-center_text.align-left .container {
    align-items: flex-start;
}
.section-center_text.align-left .container .text,
.section-center_text.align-left .container h2,
.section-center_text.align-left .container p {
    text-align: left !important;
}

.section-center_text .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Heading (non-span) - Figma: Inter 45/52, #004982, weight 500. #004982 is the default; the ACF
   Headline Color picker (inline style on the h2) overrides it and the span inherits from here. */
.section-center_text .container h2{
    color: #004982;
    font-family: 'Inter', sans-serif;
    font-size: 45px;
    font-style: normal;
    font-weight: 500;
    line-height: 52px;
    text-align: center;
}

/* Italic emphasis span - Figma: Inter 45/52, bold italic. NO color here on purpose: it inherits
   the heading color, so it follows the Headline Color picker (default #004982) instead of being
   locked to blue. */
.section-center_text .container h2 span {
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 52px !important;
}

.section-center_text .container p{
    color: black;
    font-size: var(--ct-desc-size, 18px);   /* ACF "Description Font Size" override; default 18px */
    text-align: center;
}



@media (max-width: 993px) {
    .section-center_text .container p{
        font-size: var(--ct-desc-size, 16px);
        line-height: 16px;
    }
}


/* ----------- Headline Text Image ----------- */

.section-headline_text_image {
    min-height: auto;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5% 0%;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-headline_text_image .container {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.section-headline_text_image .container img{
    height: auto;
    object-fit: cover;
    align-self: center;
    width: 100%;
    margin-top: 30px;
}

.section-headline_text_image .container h2{
    color: black;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
}

.section-headline_text_image .container p{
    color: black;
    font-size: 18px;
    text-align: center;
}

.section-headline_text_image .container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

/* ---- Theme background (ACF: theme = white | gray | black) ---- */
.section-headline_text_image.theme-white { background-color: #fff; }
.section-headline_text_image.theme-gray  { background-color: #f1f1f1; }
.section-headline_text_image.theme-black { background-color: #000; }
.section-headline_text_image.theme-black .container h2,
.section-headline_text_image.theme-black .container p,
.section-headline_text_image.theme-black .subheading,
.section-headline_text_image.theme-black .split-desc p { color: #fff; }

/* ---- Split-layout variant (ACF: split_layout) - Figma 16014:2029 ----
   Centered title block (headline + subheading) on top, then image LEFT / text RIGHT (left-aligned). */
.section-headline_text_image--split {
    display: block;               /* override the base flex so the container fills width instead of shrinking to content */
    padding: 100px 20px;          /* Figma py 100 + side gutter */
}
.section-headline_text_image--split .container {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 !important;        /* beat Bootstrap's fixed container width + 15px padding so 1040 is exact */
    height: auto;
}
.section-headline_text_image--split .container .content {
    width: 100%;
    gap: 64px;                    /* title block -> image row */
    align-items: center;
}
.section-headline_text_image--split .text {
    max-width: 692px;            /* Figma title block 692px */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;                   /* headline -> subheading */
    align-items: center;
}
.section-headline_text_image--split .container h2 {
    font-size: 45px;             /* Figma 45 / 52; default #004982 (ACF headline_color overrides) */
    line-height: 52px;
    color: #004982;
    margin: 0;
}
.section-headline_text_image--split .container h2 span {
    color: #004982 !important;   /* italic emphasis stays blue regardless of headline color */
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 52px !important;
}
.section-headline_text_image--split .subheading {
    color: #000;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    margin: 0;
}
.section-headline_text_image--split .split-row {
    display: flex;
    align-items: center;         /* Figma items-center */
    justify-content: center;
    gap: 64px;
    margin: 0;
    width: 100%;
    max-width: 1040px;
}
.section-headline_text_image--split .split-image {
    flex: 0 1 510px;             /* Figma photo 510 x 300 */
    max-width: 510px;
    height: 300px;
}
.section-headline_text_image--split .split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: 0 !important;    /* cancel the base img margin-top */
    display: block;
}
.section-headline_text_image--split .split-desc {
    flex: 0 1 442px;            /* Figma text column 442 */
    max-width: 442px;
}
.section-headline_text_image--split .split-desc p {
    text-align: left !important; /* Figma: text left-aligned */
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 21px;
    margin: 0 0 16px;
}
.section-headline_text_image--split .split-desc p:last-child { margin-bottom: 0; }
/* Keep the whole description (incl. bullet lists) left-aligned - the theme centers .container p,
   so without this an inherited center could creep back into the <ul>/<li>. */
.section-headline_text_image--split .split-desc,
.section-headline_text_image--split .split-desc ul,
.section-headline_text_image--split .split-desc ol,
.section-headline_text_image--split .split-desc li {
    text-align: left !important;
}

/* The wysiwyg sometimes nests the bullet list (<ul><li><ul>...items...</ul></li></ul>), which
   renders as hollow circles at a doubled (~80px) indent. Normalize to one shallow indent + filled
   bullets, and collapse the empty wrapper <li>/<ul> so items sit near the paragraph's left edge. */
.section-headline_text_image--split .split-desc ul,
.section-headline_text_image--split .split-desc ol {
    margin: 0 0 16px;
    padding-left: 20px;
    list-style: disc outside;
}
.section-headline_text_image--split .split-desc li {
    margin-bottom: 8px;
}
.section-headline_text_image--split .split-desc li:has(> ul, > ol) {
    list-style: none;   /* no stray bullet on the wrapper li */
    margin: 0;
}
.section-headline_text_image--split .split-desc li > ul,
.section-headline_text_image--split .split-desc li > ol {
    padding-left: 0;    /* don't add a second level of indent */
    margin: 0;
}
@media (max-width: 767px) {
    .section-headline_text_image--split .split-row {
        flex-direction: column;
        gap: 24px;
    }
    .section-headline_text_image--split .split-image {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .section-headline_text_image--split .split-image img { height: auto; }
    .section-headline_text_image--split .split-desc { flex: none; width: 100%; max-width: 100%; }
}

@media (max-width: 1400px) {
    .section-headline_text_image .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-headline_text_image .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-headline_text_image .container h2{
        font-size: 35px;
        line-height: 35px;
    }
    .section-headline_text_image .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-headline_text_image {
        min-height: 65vh;
    }
}


/* Three Image Text Headers Section */


.section-images_cta {
    min-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5% 0%;
    background-color: black;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-images_cta .container {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: unset !important;
}

.section-images_cta .container img{
    height: auto;
    object-fit: cover;
    align-self: center;
    width: 50%;
    margin-top: 30px;
}

.section-images_cta .container h2{
    color: white;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
}

.section-images_cta .container h3{
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif";
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
}

.section-images_cta .container p{
    color: white;
    font-size: 18px;
    text-align: center;
}

.section-images_cta .container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.section-images_cta .container .content .items {
    display: flex;
    gap: 20px;
}
.section-images_cta .container .content .cta {
    display: flex;
    justify-content: center;
}

.section-images_cta .container .content .items .item {
    display: flex;
    flex-direction: column;
}
.section-images_cta .container .content .items .item img{
    filter: invert(1);
    max-width: 400px;
}

.section-images_cta .container .content .btn-homepage_curiosity:hover {
  background-color: #002642;
}
.section-images_cta .container .content .btn-homepage_curiosity {
  background-color: white;
  border-radius: 0;
  padding: 10px 20px 10px 20px;
  margin: 8px 0;
  font-size: 1.2em;
  background-color: #004982;
  color: white;
  transition: all 0.3s ease-in-out;
}


@media (max-width: 1400px) {
    .section-images_cta .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-images_cta .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-images_cta .container h2{
        font-size: 35px;
        line-height: 35px;
    }
    .section-images_cta .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-images_cta {
        min-height: 65vh;
    }
    .section-images_cta .container .content .items {
        flex-direction: column;
    }
}

/* ---------- Quote Start ----------- */

.section-quote {
    height: auto;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f1f1f1;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-quote .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-quote .container h2{
    color: black;
    font-size: 55px;
    font-style: normal;
    font-weight: 400;
    line-height: 55px;
    text-align: center;
}

.section-quote .container p{
    color: black;
    font-size: 18px;
    text-align: center;
}

.section-quote .container p span{
    color: #004982;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: "Source Sans 3";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 70px; /* 388.889% */
    text-transform: uppercase;
}


@media (max-width: 1400px) {
    .section-quote .container h2{
        font-size: 45px;
        line-height: 45px;
    }
    .section-quote .container h2 span{
        font-size: 50px;
        line-height: 50px;
    }
}

@media (max-width: 993px) {
    .section-quote .container h2{
        font-size: 30px;
        line-height: 30px;
    }
        .section-quote .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-quote .container h2 span{
        font-size: 35px;
        line-height: 35px;
    }
}


/* ---------- Meet Our Team ----------- */

.section-meet_our_team {
    min-height: auto;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5% 0%;
    background-color: white;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-meet_our_team  .container {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: unset !important;
}

.section-meet_our_team  .container img{
    height: auto;
    object-fit: cover;
    align-self: center;
    width: 100%;
    margin-top: 30px;
}

.section-meet_our_team  .container h2{
    color: black;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
}

.section-meet_our_team  .container h3{
    color: #004982;
    text-align: center;
    font-family: "Noto Serif";
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
}

.section-meet_our_team .container p{
    color: black;
    font-size: 18px;
    text-align: center;
}

.section-meet_our_team .container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.section-meet_our_team .container .content .items {
    display: flex;
    gap: 20px;
}
.section-meet_our_team .container .content .cta {
    display: flex;
    justify-content: center;
}

.section-meet_our_team .container .content .items .item {
    display: flex;
    flex-direction: column;
}
.section-meet_our_team .container .content .items .item img{
    max-width: 400px;
}

.section-meet_our_team .container .content .btn-homepage_curiosity{ 
    background-color: #004982;
    border-radius: 0;
    padding: 10px 20px 10px 20px;
    margin: 8px 0;
    font-size: 1.2em;
    color: white;
    transition: all 0.3s ease-in-out;
}

.section-meet_our_team .container .content .btn-homepage_curiosity:hover{ 
    background-color: #002642;
    color: white;
}

@media (max-width: 1400px) {
    .section-meet_our_team .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-meet_our_team .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-meet_our_team .container h2{
        font-size: 35px;
        line-height: 35px;
    }
    .section-meet_our_team .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-meet_our_team {
        min-height: 65vh;
    }
    .section-meet_our_team .container .content .items {
        flex-direction: column;
    }
}

/* ---------- Left Text Right Image ---------- */

.section-left_text_right_image {
    display: flex;
    flex-direction: column;
    align-items: center;       /* center the rows on the page */
    gap: 60px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f1f1f1;
    padding: 100px 20px;       /* Figma 16014:2575 - 100px top/bottom; 20px side gutter below 1040 */
}

/* Each row - Figma 16014:2579: 1040px content row, centered, image left / text right */
.section-left_text_right_image .container {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;        /* centered */
    display: flex;
    align-items: stretch;      /* image is as tall as the text beside it */
    justify-content: center;
    gap: 64px;
    padding: unset !important;
}

/* Bootstrap's .container adds ::before/::after (clearfix) which, inside this flex row, become
   extra flex items. With gap they steal two extra gap-widths and shrink the columns (510 -> 454,
   442 -> 394). Remove them so the Figma 510/442 dimensions hold. */
.section-left_text_right_image .container::before,
.section-left_text_right_image .container::after {
    display: none;
}

/* Image on the left: single (ACF image_side=left) OR even repeater rows. Desktop only -
   on mobile every row stacks (column-reverse below). */
@media (min-width: 994px) {
    .section-left_text_right_image .container.ltri-row--reverse {
        flex-direction: row-reverse;
    }
}

/* Headline - Figma 16014:2616: 45px / 52px, #004982, line 1 Medium + line 2 (span) Bold Italic.
   #004982 is the default; the ACF headline_color option (inline style) still overrides it. */
.section-left_text_right_image .container h2 {
    color: #004982;
    font-size: clamp(30px, 3.6vw, 45px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.156;        /* 52 / 45 */
    margin: 0;
}
.section-left_text_right_image .container h2 span {
    font-family: 'Inter', sans-serif !important;
    font-style: italic !important;
    font-weight: 700 !important;
    /* size + color inherit from h2 (Figma: same 45px / #004982, just bold italic) */
}

/* Description - Figma 16014:2632: 14px / 21px black, 20px between paragraphs */
.section-left_text_right_image .container .text p {
    color: #000;
    font-size: 14px;
    line-height: 21px;
    margin: 0 0 20px;
}
.section-left_text_right_image .container .text p:last-child {
    margin-bottom: 0;
}
/* List items match the paragraphs: black, 14px / 21px (not the theme's gray 16px default). */
.section-left_text_right_image .container .text li {
    color: #000 !important;
    font-size: 14px !important;
    line-height: 21px !important;
}

.section-left_text_right_image .container .text {
    flex: 0 1 442px;           /* Figma: 442px text column */
    max-width: 442px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;                 /* Figma: 32px headline -> description */
}

.section-left_text_right_image .container .image {
    flex: 0 1 510px;           /* Figma: 510px photo */
    max-width: 510px;
    align-self: stretch;
    min-height: 383px;         /* Figma: 383px photo height (grows to match taller text) */
}

.section-left_text_right_image .container .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tablet / mobile: stack image over text, full width */
@media (max-width: 993px) {
    .section-left_text_right_image {
        padding: 60px 20px;
        gap: 40px;
    }
    .section-left_text_right_image .container {
        flex-direction: column-reverse;
        gap: 24px;
    }
    .section-left_text_right_image .container .text,
    .section-left_text_right_image .container .image {
        flex: unset;
        width: 100%;
        max-width: 100%;
    }
    .section-left_text_right_image .container .image {
        min-height: 0;
    }
    .section-left_text_right_image .container .image img {
        height: auto;          /* natural height when stacked on mobile */
        max-height: 450px;
    }
}


/* ---------- CALL TO ACTION START ---------- */

.page-id-74696 .section-call_to_action {
    background-color: #F1F1F1;
}
.page-id-74696 .section-call_to_action .container h2{
    color: black;
}


.section-call_to_action {
    height: 55vh;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-color: black;
    /* background-size: contain; */
    background-position: center;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-call_to_action .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: unset !important;
}

.section-call_to_action .container h2{
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 4.2vw, 45px);   /* non-span heading: fluid up to 45px desktop */
    font-style: normal;
    font-weight: 500;
    line-height: 1.156;                    /* 52/45 ratio, scales with the font-size */
    text-align: center;
}

/* Header emphasis span (italic) */
.section-call_to_action .container h2 span {
    color: #FFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(26px, 4.2vw, 45px) !important;   /* matches the non-span size, fluid */
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 1.156 !important;
}

/* Optional copy below the CTA button (ACF: text) */
.section-call_to_action .container .text .cta-text {
    color: #fff;
    font-family: 'Inter', sans-serif;
    text-align: center;
    margin: 20px auto 0;
    max-width: 640px;
    font-size: clamp(14px, 1.3vw, 18px);   /* fluid body copy for all viewports */
    line-height: 1.5;
}
.section-call_to_action .container .text .cta-text p {
    color: #fff;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

.section-call_to_action .container .text .cta {
    display: flex;
    justify-content: center;
}

.section-call_to_action .container .btn-homepage_curiosity{ 
    background-color: #004982;
    border-radius: 0;
    padding: 10px 20px 10px 20px;
    margin: 8px 0;
    font-size: 1.2em;
    color: white;
    transition: all 0.3s ease-in-out;
}

.section-call_to_action .container .btn-homepage_curiosity:hover{ 
    background-color: #002642;
    color: white;
}

.section-call_to_action .container .text .cta {
    margin-top: 30px;
}

/* Optional color/opacity overlay over the bg image (ACF: overlay_color; opacity via the swatch alpha) */
.section-call_to_action {
    position: relative;   /* anchor the overlay */
    overflow: hidden;
}
.section-call_to_action .cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;           /* above the bg image, below the content */
    pointer-events: none;
}
.section-call_to_action .container {
    position: relative;
    z-index: 1;           /* keep the heading + CTA above the overlay */
}

/* CTA heading + copy scale fluidly via clamp() in the base rules above, so the old
   fixed-px @media steps (h2 55/35px, span 65px, p 16px) were removed - they would
   otherwise override the fluid sizing on smaller viewports. */

/* CTA button colors (ACF: button_color / button_text_color / button_hover_color, applied inline
   as --cta-btn-* custom properties). Empty = falls back to the current colors, so existing/other
   buttons are untouched. Placed after the base button rules above so it wins on source order.
   Also gives the button the arrow-slide-out hover effect the curiosity / learn-more CTAs use. */
.section-call_to_action .container .btn-homepage_curiosity {
    background-color: var(--cta-btn-bg, #004982);
    color: var(--cta-btn-color, #fff);
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}
.section-call_to_action .container .btn-homepage_curiosity:hover {
    background-color: var(--cta-btn-bg-hover, var(--cta-btn-bg, #002642));
    color: var(--cta-btn-color, #fff);
    padding-right: 35px;   /* make room for the arrow that slides in */
}
.section-call_to_action .container .btn-homepage_curiosity::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
    position: relative;
    right: -10px;
    display: none;
    color: inherit;        /* tracks the button text color (incl. custom Button Text Color) */
}
.section-call_to_action .container .btn-homepage_curiosity:hover::after {
    opacity: 1;
    transform: translateX(0);
    display: inline-block;
}


div#content.site-content {
    margin: unset !important
}


/* ---------- Icon Two Rows Start ---------- */

.section-icons_two_rows {
    min-height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5% 0%;
    background-color: white;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-icons_two_rows .container {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: unset !important;
}

.section-icons_two_rows .container img{
    height: auto;
    object-fit: cover;
    align-self: center;
    width: 50%;
    margin-top: 30px;
}

.section-icons_two_rows .container h2{
    color: black;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
    text-align: center;
}

.section-icons_two_rows .container h3{
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif";
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
}

.section-icons_two_rows .container p{
    color: black;
    font-size: 18px;
    text-align: center;
}

.section-icons_two_rows .container .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.section-icons_two_rows .container .content .items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}
.section-icons_two_rows .container .content .cta {
    display: flex;
    justify-content: center;
}

.section-icons_two_rows .container .content .items .item {
    display: flex;
    flex-direction: column;
}
.section-icons_two_rows .container .content .items .item img{
    max-width: 400px;
}

.section-icons_two_rows .container .content .btn-homepage_curiosity:hover {
  background-color: #002642;
}
.section-icons_two_rows .container .content .btn-homepage_curiosity {
  background-color: white;
  border-radius: 0;
  padding: 10px 20px 10px 20px;
  margin: 8px 0;
  font-size: 1.2em;
  background-color: #004982;
  color: white;
  transition: all 0.3s ease-in-out;
}


@media (max-width: 1400px) {
    .section-icons_two_rows .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-icons_two_rows .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-icons_two_rows .container h2{
        font-size: 35px;
        line-height: 35px;
    }
    .section-icons_two_rows .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-icons_two_rows {
        min-height: 65vh;
    }
    .section-icons_two_rows .container .content .items {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .section-icons_two_rows .container .content .items {
        grid-template-columns: 1fr;
    }
}

/* ---------- Image Over Text ---------- */

.section-image_over_text {
    height: 75vh;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f1f1f1;
    padding-top: 4%;
    padding-bottom: 4%;
    position: relative;
}

.section-image_over_text .container {
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: unset !important;
    gap: 50px;
}

.section-image_over_text .container h2{
    color: black;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.section-image_over_text .container p{
    color: black;
    font-size: 18px;
}

.section-image_over_text .container .text {
    width: 50%;
    background-color: white;
    padding: 5%;
    z-index: 2;
}

.section-image_over_text .container .image {
    position: absolute;
    left: 15%;
    top: 22%;
}


.section-image_over_text .container .image img {
    height: auto;
    object-fit: cover;
    align-self: center;
    width: 100%;
    margin-top: 30px;
    max-height: 450px;
}

@media (max-width: 1400px) {
    .section-image_over_text .container h2{
        font-size: 25px;
        line-height: 25px;
    }
    .section-image_over_text .container .image {
        left: 9%;
    }
}

@media (max-width: 1080px) {
    .section-image_over_text .container .image {
        position: static;
    }
    .section-image_over_text .container .text {
        width: 100%;
        flex: 50 !important;
    }
    .section-image_over_text .container {
        flex-direction: column;
        gap: 20px;
    }
    .section-image_over_text {
        height: auto;
    }
}

@media (max-width: 993px) {
    .section-image_over_text .container h2{
        font-size: 35px;
        line-height: 35px;
    }
        .section-image_over_text .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-image_over_text .container .text {
    flex: unset;
    }
    .section-image_over_text .container .image {
        flex: unset;
        width: 100%;
    }
}


/* ---------- Meet Our Team Vertical ---------- */

.section-meet_our_team_vertical {
    min-height: 75vh;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-meet_our_team_vertical .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: unset !important;
    gap: 50px;
    flex-direction: column;
}


.section-meet_our_team_vertical .container .members {
    gap: 125px;
    display: flex;
    flex-direction: column;
}

.section-meet_our_team_vertical .container .members .member {
    display: flex
}
.section-meet_our_team_vertical .container .members .member:nth-child(odd) {
    display: flex;
    flex-direction: row-reverse;
}

.section-meet_our_team_vertical .container h2{
    color: black;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
}

.section-meet_our_team_vertical .container p{
    color: black;
    font-size: 18px;
}

.section-meet_our_team_vertical .container .member .text {
    flex: 50;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .section-meet_our_team_vertical .container .member .text .text-container {
    width: 85%;
} */

.section-meet_our_team_vertical .container .member .text .text-container span {
    font-family: Source Sans 3;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 18px;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: #004982;
}

.section-meet_our_team_vertical .container .member .text .text-container h3 {
    font-family: Noto Serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 45px;
    line-height: 50px;
    letter-spacing: 0%;
}
.section-meet_our_team_vertical .container .member .text .text-container p {
    font-family: Noto Serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0%;
}
.section-meet_our_team_vertical .container .member .text .text-container .socials-row {
    display: flex;
    gap: 30px;
}

.section-meet_our_team_vertical .container .member .image {
    flex: 50;
    align-items: center;
    justify-content: center;
    display: flex;
}


.section-meet_our_team_vertical .container .member .image img {
    height: auto;
    object-fit: cover;
    align-self: center;
    /* width: 100%; */
    /* margin-top: 30px; */
    max-height: 450px;
}

@media (max-width: 1400px) {
    .section-meet_our_team_vertical .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-meet_our_team_vertical .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-meet_our_team_vertical .container .members .member {
        gap: 20px;
        flex-direction: column-reverse;
    }

    .section-meet_our_team_vertical .container .members {
        gap: 50px;
    }

    .section-meet_our_team_vertical .container .members .member:nth-child(odd) {
        gap: 20px;
        flex-direction: column-reverse;
    }
    .section-meet_our_team_vertical .container h2{
        font-size: 35px;
        line-height: 35px;
    }
        .section-meet_our_team_vertical .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-meet_our_team_vertical .container {
        flex-direction: column;
        gap: 25px;
    }
    .section-meet_our_team_vertical .container .text {
    flex: unset;
    }
    .section-meet_our_team_vertical .container .image {
        flex: unset;
        width: 100%;
    }
    .section-meet_our_team_vertical .container .member .image { 
        justify-content: flex-start;
    }
    .section-meet_our_team_vertical .container .member .text .text-container h3 {
        font-size: 25px;
        line-height: 30px;
    }
}

/* ---------- CONTACT FORM STYLES ---------- */

.section-contact_form {
    height: 75vh;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f1f1f1;
    padding-top: 4%;
    padding-bottom: 4%;
}

.section-contact_form .wpcf7-form label {
    width: 100% !important;
}

.section-contact_form .name-fields {
    display: flex;
    gap: 20px;
}

.section-contact_form .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: unset !important;
    gap: 50px;
}

.section-contact_form .container h2{
    color: black;
    font-size: 65px;
    font-style: normal;
    font-weight: 500;
    line-height: 65px;
}

.section-contact_form .container p{
    color: black;
    font-size: 18px;
}

.section-contact_form .container .text {
    flex: 50;
}

.section-contact_form .container .form {
    flex: 50;
}

@media (max-width: 1400px) {
    .section-contact_form .container h2{
        font-size: 55px;
        line-height: 55px;
    }
    .section-contact_form .container h2 span{
        font-size: 65px;
        line-height: 65px;
    }
}

@media (max-width: 993px) {
    .section-contact_form .container h2{
        font-size: 35px;
        line-height: 35px;
    }
        .section-contact_form .container p{
        font-size: 16px;
        line-height: 16px;
    }
    .section-contact_form .container {
        flex-direction: column;
        gap: unset;
        align-items: unset;
    }
    .section-contact_form .container .text {
    flex: unset;
    }
    .section-contact_form .container .form {
        flex: unset;
        width: 100%;
    }
}

/* ---------- NAV ---------- */

.section-nav {
    padding: 20px 10px;
    background: #004982;
}

.section-nav .container {
    margin: auto !important;
}

.section-nav .container .links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.section-nav .container .links a {
    color: white;
}

.grecaptcha-badge {
    display: none !important;
}


/* ============================================================
   GIVING PAGE BLOCKS
   ============================================================ */

/* ---------- 1. Giving Hero Block ---------- */

.section-giving_hero {
    min-height: 440px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.section-giving_hero .giving-hero__bg {
    position: absolute;
    top: 0;
    right: -3%;
    width: 58%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top 15%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, #000 40%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 20%, #000 40%);
    z-index: 1;
}

.section-giving_hero .container {
    height: 100%;
    display: flex;
    z-index: 2;
    flex-direction: column;
}

.section-giving_hero .giving-hero__content {
    max-width: 480px;
    padding: 60px 0;
}

.section-giving_hero .giving-hero__content h2 {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 50px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 52px !important;
    margin-bottom: 15px;
}

.section-giving_hero .giving-hero__content h2 span,
.section-giving_hero .giving-hero__content h2 strong,
.section-giving_hero .giving-hero__content h2 b,
.section-giving_hero .giving-hero__content h2 em,
.section-giving_hero .giving-hero__content h2 i {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 50px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 52px !important;
}

.section-giving_hero .giving-hero__description,
.section-giving_hero .giving-hero__description p {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    max-width: 400px;
    margin-bottom: 20px;
}

/* Shared Giving CTA Button — arrow on hover */
.section-giving_hero .btn-learn-more-ag,
.section-giving_basic_text .btn-learn-more-ag,
.section-giving_text_image .btn-learn-more-ag,
.section-giving_learn_more .btn-learn-more-ag {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.section-giving_hero .btn-learn-more-ag::after,
.section-giving_basic_text .btn-learn-more-ag::after,
.section-giving_text_image .btn-learn-more-ag::after,
.section-giving_learn_more .btn-learn-more-ag::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease-in-out;
    position: relative;
    right: -10px;
    display: none;
}

.section-giving_hero .btn-learn-more-ag:hover,
.section-giving_basic_text .btn-learn-more-ag:hover,
.section-giving_text_image .btn-learn-more-ag:hover,
.section-giving_learn_more .btn-learn-more-ag:hover {
    padding-right: 35px;
}

.section-giving_hero .btn-learn-more-ag:hover::after,
.section-giving_basic_text .btn-learn-more-ag:hover::after,
.section-giving_text_image .btn-learn-more-ag:hover::after,
.section-giving_learn_more .btn-learn-more-ag:hover::after {
    opacity: 1;
    transform: translateX(0);
    display: inline-block;
}

@media (max-width: 1400px) {
    .section-giving_hero .giving-hero__content h2 {
        font-size: 42px !important;
        line-height: 44px !important;
    }
    .section-giving_hero .giving-hero__content h2 span,
    .section-giving_hero .giving-hero__content h2 strong,
    .section-giving_hero .giving-hero__content h2 b,
    .section-giving_hero .giving-hero__content h2 em,
    .section-giving_hero .giving-hero__content h2 i {
        font-size: 42px !important;
        line-height: 44px !important;
    }
}

@media (max-width: 993px) {
    .section-giving_hero .giving-hero__content h2 {
        font-size: 34px !important;
        line-height: 36px !important;
    }
    .section-giving_hero .giving-hero__content h2 span,
    .section-giving_hero .giving-hero__content h2 strong,
    .section-giving_hero .giving-hero__content h2 b,
    .section-giving_hero .giving-hero__content h2 em,
    .section-giving_hero .giving-hero__content h2 i {
        font-size: 34px !important;
        line-height: 36px !important;
    }
    .section-giving_hero {
        min-height: 380px !important;
    }
    .section-giving_hero .giving-hero__bg {
        width: 55%;
    }
    .section-giving_hero .giving-hero__description,
    .section-giving_hero .giving-hero__description p {
        font-size: 13px !important;
        line-height: 19px !important;
    }
}

@media (max-width: 767px) {
    .section-giving_hero {
        min-height: auto !important;
        flex-direction: column;
        padding-top: 70px;
    }
    .section-giving_hero .giving-hero__bg {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        right: 0;
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    }
    .section-giving_hero .giving-hero__content {
        max-width: 100%;
        padding: 30px 0;
    }
    .section-giving_hero .giving-hero__content h2 {
        font-size: 28px !important;
        line-height: 30px !important;
    }
    .section-giving_hero .giving-hero__content h2 span,
    .section-giving_hero .giving-hero__content h2 strong,
    .section-giving_hero .giving-hero__content h2 b,
    .section-giving_hero .giving-hero__content h2 em,
    .section-giving_hero .giving-hero__content h2 i {
        font-size: 28px !important;
        line-height: 30px !important;
    }
}


/* ---------- 2. Giving Nav Block ---------- */

.section-giving_nav {
    background-color: #f1f1f1;
    height: 150px !important;
    padding: 15px 0 0 0;
    display: flex;
    align-items: flex-start;
}

.section-giving_nav .container {
    margin: auto !important;
}

/* Breadcrumb */
.section-giving_nav .giving-nav__breadcrumb {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    margin-bottom: 5px;
}

.section-giving_nav .giving-nav__breadcrumb a {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    text-decoration: none !important;
}

.section-giving_nav .giving-nav__breadcrumb a:hover {
    text-decoration: underline !important;
}

/* Breadcrumb active page */
.section-giving_nav .giving-nav__current {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 21px !important;
}

/* Nav title */
.section-giving_nav .giving-nav__title {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 10px;
}

.section-giving_nav .giving-nav__menu {
    border-top: none;
    padding-top: 0;
}

.section-giving_nav .giving-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    gap: 0;
}

.section-giving_nav .giving-nav__item {
    position: relative;
    flex: none;
    border: none;
}

.section-giving_nav .giving-nav__item + .giving-nav__item::before {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background: #ccc;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* First item aligns with title */
.section-giving_nav .giving-nav__item:first-child .giving-nav__link {
    padding-left: 0;
}

/* Nav item link */
.section-giving_nav .giving-nav__link {
    display: block;
    padding: 10px 15px;
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 21px !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 0.2s;
}

.section-giving_nav .giving-nav__link:hover {
    color: #002642 !important;
}

/* Current page: highlight its parent nav-bar link (the dropdown holds the current item) like the
   hover state, plus a persistent underline so it reads as the active section. */
.section-giving_nav .giving-nav__menu .giving-nav__list .giving-nav__item:has(.giving-nav__dropdown-item--current) > .giving-nav__link,
.section-giving_nav .giving-nav__link--current {
    color: #002642 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}

.section-giving_nav .giving-nav__arrow {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.section-giving_nav .giving-nav__arrow svg {
    display: block;
}

.section-giving_nav .giving-nav__item:hover .giving-nav__arrow {
    transform: rotate(180deg);
}

.section-giving_nav .giving-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #f1f1f1;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.section-giving_nav .giving-nav__item:hover .giving-nav__dropdown {
    max-height: 400px;
    opacity: 1;
    padding: 10px 0;
}

.section-giving_nav .giving-nav__dropdown-item a {
    display: block;
    padding: 8px 20px;
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    text-decoration: none !important;
    transition: background 0.2s;
}

.section-giving_nav .giving-nav__dropdown-item a:hover {
    background-color: #fff;
}

/* Current page in the dropdown: stays in the list, highlighted, but unclickable (rendered as a
   <span>, not a link, by section-giving_nav.php). */
.section-giving_nav .giving-nav__dropdown-item--current span {
    display: block;
    padding: 8px 20px;
    background-color: #fff;
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 21px !important;
    cursor: default;
}

@media (max-width: 993px) {
    .section-giving_nav .giving-nav__list {
        flex-wrap: wrap;
        gap: 0;
    }
    .section-giving_nav .giving-nav__title {
        font-size: 20px !important;
        line-height: 24px !important;
    }
    .section-giving_nav .giving-nav__link {
        font-size: 13px !important;
        padding: 8px 12px;
    }
    .section-giving_nav .giving-nav__item:first-child .giving-nav__link {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .section-giving_nav {
        height: auto !important;
        padding: 15px 0 15px 0;
    }
    .section-giving_nav .giving-nav__list {
        flex-direction: column;
    }
    .section-giving_nav .giving-nav__item + .giving-nav__item::before {
        display: none;
    }
    .section-giving_nav .giving-nav__title {
        font-size: 18px !important;
    }
    .section-giving_nav .giving-nav__link {
        font-size: 13px !important;
        padding: 8px 0;
    }
    .section-giving_nav .giving-nav__dropdown {
        position: static;
        box-shadow: none;
        padding-left: 15px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        background: #f1f1f1;
    }
    .section-giving_nav .giving-nav__item:hover .giving-nav__dropdown {
        max-height: 400px;
        opacity: 1;
        padding: 5px 0 5px 15px;
    }
    .section-giving_nav .giving-nav__dropdown-item a,
    .section-giving_nav .giving-nav__dropdown-item--current span {
        padding: 6px 0;
        font-size: 13px !important;
    }
}


/* ---------- 3. Giving Basic Text Block ---------- */

.section-giving_basic_text {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 60px 0;
}

.section-giving_basic_text .container {
    margin: auto !important;
}

/* Title */
.section-giving_basic_text h2 {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 52px !important;
    margin-bottom: 20px;
}

/* Title span/bold/italic */
.section-giving_basic_text h2 span,
.section-giving_basic_text h2 strong,
.section-giving_basic_text h2 b,
.section-giving_basic_text h2 em,
.section-giving_basic_text h2 i {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 52px !important;
}

/* Body text */
.section-giving_basic_text .giving-basic-text__body,
.section-giving_basic_text .giving-basic-text__body p {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    margin-bottom: 15px;
}

/* Links in text */
.section-giving_basic_text .giving-basic-text__body a {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-skip-ink: auto !important;
    text-decoration-thickness: auto !important;
    text-underline-offset: auto !important;
    text-underline-position: from-font !important;
}

.section-giving_basic_text .giving-basic-text__body a:hover {
    color: #002642 !important;
}

@media (max-width: 1400px) {
    .section-giving_basic_text h2 {
        font-size: 38px !important;
        line-height: 44px !important;
    }
    .section-giving_basic_text h2 span,
    .section-giving_basic_text h2 strong,
    .section-giving_basic_text h2 b,
    .section-giving_basic_text h2 em,
    .section-giving_basic_text h2 i {
        font-size: 38px !important;
        line-height: 44px !important;
    }
}

@media (max-width: 993px) {
    .section-giving_basic_text h2 {
        font-size: 30px !important;
        line-height: 34px !important;
    }
    .section-giving_basic_text h2 span,
    .section-giving_basic_text h2 strong,
    .section-giving_basic_text h2 b,
    .section-giving_basic_text h2 em,
    .section-giving_basic_text h2 i {
        font-size: 30px !important;
        line-height: 34px !important;
    }
    .section-giving_basic_text {
        padding: 40px 0;
    }
    .section-giving_basic_text .giving-basic-text__body,
    .section-giving_basic_text .giving-basic-text__body p {
        font-size: 13px !important;
        line-height: 19px !important;
    }
}

@media (max-width: 767px) {
    .section-giving_basic_text h2 {
        font-size: 26px !important;
        line-height: 30px !important;
    }
    .section-giving_basic_text h2 span,
    .section-giving_basic_text h2 strong,
    .section-giving_basic_text h2 b,
    .section-giving_basic_text h2 em,
    .section-giving_basic_text h2 i {
        font-size: 26px !important;
        line-height: 30px !important;
    }
}


/* ---------- 3a. Giving Basic Text - Quote Variant (toggle: quote_mode) ---------- */
/* Repurposes the Basic Text block as a pull-quote: decorative quotation mark,
   28px blue quote (headline field) + 14px attribution (text field).
   Matches Figma node 16038:635 - quotation mark sits top-LEFT, above the quote.
   These selectors intentionally sit AFTER the base .section-giving_basic_text rules
   so the equal-specificity !important overrides win on source order. */

.section-giving_basic_text--quote .giving-basic-text__quote-mark {
    position: absolute;
    top: 0;              /* sits in the h2 padding-top space, above the first line */
    left: -12px;         /* nudged just left of the quote's left edge (anchored to the h2) */
    width: 49px;
    height: 37px;
    line-height: 0;
    pointer-events: none;
}

.section-giving_basic_text--quote .giving-basic-text__quote-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The quote itself (headline field). padding-right keeps text clear of the mark. */
.section-giving_basic_text--quote h2 {
    position: relative;                  /* positioning context for the quotation mark */
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 32px !important;        /* 114.286% per Figma */
    margin-bottom: 32px;                 /* Figma gap to the attribution */
    padding-top: 52px;                   /* clear the quotation mark sitting above-left */
}

.section-giving_basic_text--quote h2 span,
.section-giving_basic_text--quote h2 strong,
.section-giving_basic_text--quote h2 b,
.section-giving_basic_text--quote h2 em,
.section-giving_basic_text--quote h2 i {
    font-size: 28px !important;
    line-height: 32px !important;
}

/* Attribution (text field) - already matches the base body style, restated for clarity. */
.section-giving_basic_text--quote .giving-basic-text__body,
.section-giving_basic_text--quote .giving-basic-text__body p {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;        /* 150% per Figma */
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .section-giving_basic_text--quote h2 {
        font-size: 22px !important;
        line-height: 26px !important;
        padding-top: 42px;
    }
    .section-giving_basic_text--quote .giving-basic-text__quote-mark {
        width: 38px;
        height: 29px;
    }
}


/* ---------- 4. Giving Stories / Video Block ---------- */

.section-giving_stories {
    background-color: #004982;
    padding: 60px 0 80px 0;
    text-align: center;
}

.section-giving_stories .container {
    max-width: 1050px !important;
    margin: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Heading */
.section-giving_stories h2 {
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 48px !important;
    margin-bottom: 15px;
}

/* Heading span/bold/italic */
.section-giving_stories h2 span,
.section-giving_stories h2 strong,
.section-giving_stories h2 b,
.section-giving_stories h2 em,
.section-giving_stories h2 i {
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 48px !important;
}

/* Description text */
.section-giving_stories .giving-stories__description {
    color: #fff !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px !important;
    padding-bottom: 0;
}

.section-giving_stories .giving-stories__description p {
    color: #fff !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
}

/* A pasted video embed (Vimeo/YouTube) lands in the description, which is a 530px text column, so the
   video renders small. When the description holds an embed, let it span the full content width and
   keep a 16:9 box (Vimeo's wrapper already does 56.25%; this also covers a bare YouTube iframe). */
.section-giving_stories .giving-stories__description:has(iframe) {
    max-width: 100% !important;
}
.section-giving_stories .giving-stories__description iframe {
    width: 100% !important;
}
.section-giving_stories .giving-stories__description > iframe,
.section-giving_stories .giving-stories__description p > iframe {
    aspect-ratio: 16 / 9;
    height: auto !important;
}
/* No uploaded MP4/poster (the video is a description embed) -> hide the empty video area so its
   play button doesn't float with nothing behind it. */
.section-giving_stories .giving-stories__video-wrapper:not(:has(video, img)) {
    display: none;
}

/* Poster image fallback */
.section-giving_stories .giving-stories__poster {
    width: 100%;
    display: block;
    object-fit: cover;
}

.section-giving_stories .giving-stories__video-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
}

.section-giving_stories .giving-stories__video,
.section-giving_stories .giving-stories__poster {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.section-giving_stories .giving-stories__video-wrapper:hover .giving-stories__video,
.section-giving_stories .giving-stories__video-wrapper:hover .giving-stories__poster {
    transform: scale(1.03);
}

.section-giving_stories .giving-stories__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s;
    width: 100px;
    height: 100px;
}

.section-giving_stories .giving-stories__play-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.section-giving_stories .giving-stories__play-circle path {
    transition: fill 0.4s ease;
}

.section-giving_stories .giving-stories__video-wrapper:hover .giving-stories__play-circle {
    transform: rotate(30deg);
}

.section-giving_stories .giving-stories__video-wrapper:hover .giving-stories__play-circle path {
    fill: #7FC3F9;
}

.section-giving_stories .giving-stories__play-triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    width: 28px;
    height: 32px;
    transition: transform 0.4s ease;
}

.section-giving_stories .giving-stories__video-wrapper:hover .giving-stories__play-triangle {
    transform: translate(-45%, -50%) scale(1.25);
}

.section-giving_stories .giving-stories__video-wrapper.is-playing .giving-stories__play-btn {
    opacity: 0;
}

@media (max-width: 1400px) {
    .section-giving_stories h2 {
        font-size: 38px !important;
        line-height: 42px !important;
    }
    .section-giving_stories h2 span,
    .section-giving_stories h2 strong,
    .section-giving_stories h2 b,
    .section-giving_stories h2 em,
    .section-giving_stories h2 i {
        font-size: 38px !important;
        line-height: 42px !important;
    }
}

@media (max-width: 993px) {
    .section-giving_stories h2 {
        font-size: 30px !important;
        line-height: 34px !important;
    }
    .section-giving_stories h2 span,
    .section-giving_stories h2 strong,
    .section-giving_stories h2 b,
    .section-giving_stories h2 em,
    .section-giving_stories h2 i {
        font-size: 30px !important;
        line-height: 34px !important;
    }
    .section-giving_stories {
        padding: 40px 0 60px 0;
    }
    .section-giving_stories .giving-stories__description,
    .section-giving_stories .giving-stories__description p {
        font-size: 13px !important;
        line-height: 19px !important;
    }
}

@media (max-width: 767px) {
    .section-giving_stories h2 {
        font-size: 26px !important;
        line-height: 30px !important;
    }
    .section-giving_stories h2 span,
    .section-giving_stories h2 strong,
    .section-giving_stories h2 b,
    .section-giving_stories h2 em,
    .section-giving_stories h2 i {
        font-size: 26px !important;
        line-height: 30px !important;
    }
}


/* ---------- 5. Giving Learn More / Cards Block ---------- */

.section-giving_learn_more {
    background-color: #f1f1f1;
    padding: 60px 80px;
    text-align: center;
}

.section-giving_learn_more .container {
    /* max-width: 100% !important;
    margin-left: 80px !important;
    margin-right: 80px !important; */
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    margin: unset !important;
}


/* Section title */
.section-giving_learn_more h2 {
    color: #004982 !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 52px !important;
    margin-bottom: 35px;
}

/* Title span/bold/italic */
.section-giving_learn_more h2 span,
.section-giving_learn_more h2 strong,
.section-giving_learn_more h2 b,
.section-giving_learn_more h2 em,
.section-giving_learn_more h2 i {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 45px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 52px !important;
}

.section-giving_learn_more .giving-learn-more__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* center the boxes, including a partial last row */
    gap: 14px;
    text-align: left;
}

.section-giving_learn_more .giving-learn-more__card {
    flex: 0 0 calc((100% - 4 * 14px) / 5);   /* 5 per row; the container centers each row */
    max-width: calc((100% - 4 * 14px) / 5);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease;
}

/* Count-aware layout: EXACTLY 6 cards -> 3 + 3 instead of 5 + 1 (5 cards keep the 5-across default).
   :first-child:nth-last-child(6) only matches when the row has exactly 6 cards. Desktop only -
   below 1400px the section already drops to 3 (then 2) per row. Team mode excluded (324px cards). */
@media (min-width: 1401px) {
    .section-giving_learn_more:not(.section-giving_learn_more--team) .giving-learn-more__card:first-child:nth-last-child(6),
    .section-giving_learn_more:not(.section-giving_learn_more--team) .giving-learn-more__card:first-child:nth-last-child(6) ~ .giving-learn-more__card {
        flex-basis: calc((100% - 2 * 14px) / 3);
        max-width: calc((100% - 2 * 14px) / 3);
    }
}

.section-giving_learn_more .giving-learn-more__card:hover {
    background-color: #004982;
}

.section-giving_learn_more .giving-learn-more__card:hover h3,
.section-giving_learn_more .giving-learn-more__card:hover p,
.section-giving_learn_more .giving-learn-more__card:hover a {
    color: #fff !important;
}

.section-giving_learn_more .giving-learn-more__card-image {
    width: 100%;
    overflow: hidden;
}

.section-giving_learn_more .giving-learn-more__card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.section-giving_learn_more .giving-learn-more__card:hover .giving-learn-more__card-image img {
    transform: scale(1.05);
}

.section-giving_learn_more .giving-learn-more__card-content {
    padding: 25px 20px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Card headline */
.section-giving_learn_more .giving-learn-more__card-content h3 {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 10px;
}

/* Card description */
.section-giving_learn_more .giving-learn-more__card-content p {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 19px !important;
    margin-bottom: 15px;
    flex: 1;
}

/* Card read more link */
.section-giving_learn_more .giving-learn-more__cta {
    color: #004982 !important;
    text-align: left !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    text-decoration: none !important;
    transition: color 0.3s;
    margin-top: auto;
}

.section-giving_learn_more .giving-learn-more__cta::after {
    content: "→";
    display: inline-block;
    margin-left: 6px;
    transform-origin: left center;
    transform: scaleX(1);
    transition: transform 0.3s ease, margin-left 0.3s ease;
}

.section-giving_learn_more .giving-learn-more__card:hover .giving-learn-more__cta::after {
    transform: scaleX(1.4) translateX(3px);
    margin-left: 10px;
}

@media (max-width: 1400px) {
    .section-giving_learn_more .giving-learn-more__card {
        flex-basis: calc((100% - 2 * 14px) / 3);   /* 3 per row */
        max-width: calc((100% - 2 * 14px) / 3);
    }
    .section-giving_learn_more h2 {
        font-size: 38px !important;
        line-height: 44px !important;
    }
    .section-giving_learn_more h2 span,
    .section-giving_learn_more h2 strong,
    .section-giving_learn_more h2 b,
    .section-giving_learn_more h2 em,
    .section-giving_learn_more h2 i {
        font-size: 38px !important;
        line-height: 44px !important;
    }
}

@media (max-width: 993px) {
    .section-giving_learn_more .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .section-giving_learn_more .giving-learn-more__card {
        flex-basis: calc((100% - 1 * 14px) / 2);   /* 2 per row */
        max-width: calc((100% - 1 * 14px) / 2);
    }
    .section-giving_learn_more {
        padding: 40px 0;
    }
    .section-giving_learn_more h2 {
        font-size: 30px !important;
        line-height: 34px !important;
    }
    .section-giving_learn_more h2 span,
    .section-giving_learn_more h2 strong,
    .section-giving_learn_more h2 b,
    .section-giving_learn_more h2 em,
    .section-giving_learn_more h2 i {
        font-size: 30px !important;
        line-height: 34px !important;
    }
    .section-giving_learn_more .giving-learn-more__card-content h3 {
        font-size: 16px !important;
        line-height: 21px !important;
    }
    .section-giving_learn_more .giving-learn-more__card-content p {
        font-size: 12px !important;
        line-height: 17px !important;
    }
}

@media (max-width: 767px) {
    .section-giving_learn_more h2 {
        font-size: 26px !important;
        line-height: 30px !important;
    }
    .section-giving_learn_more h2 span,
    .section-giving_learn_more h2 strong,
    .section-giving_learn_more h2 b,
    .section-giving_learn_more h2 em,
    .section-giving_learn_more h2 i {
        font-size: 26px !important;
        line-height: 30px !important;
    }
}

@media (max-width: 480px) {
    .section-giving_learn_more .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .section-giving_learn_more .giving-learn-more__cards {
        grid-template-columns: 1fr;
    }
}


/* ---------- 5a. Giving Learn More - Team Members variant (toggle: team_mode) ---------- */
/* Repurposes the Learn More cards as people/team cards per Figma node 16038:875: photo on top,
   white box, blue name, uppercase gray role, "See Profile" link. Scoped to --team so the default
   Learn More cards are untouched. Placed AFTER the base rules so equal-specificity overrides win. */

/* Section spacing per Figma redlines: 100px top/bottom (sides handled by the centered block) */
.section-giving_learn_more--team {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
/* Heading left-aligned within the same centered ~1040px block as the cards; 64px gap to cards */
.section-giving_learn_more--team h2 {
    text-align: left !important;
    max-width: 1040px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 64px !important;
}

/* Centered ~1040px block of people cards (so a few cards don't pack to the left edge) */
.section-giving_learn_more--team .giving-learn-more__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
.section-giving_learn_more--team .giving-learn-more__card {
    flex: 0 1 324px;     /* Figma card width; shrinks + wraps on smaller screens */
    max-width: 324px;
}

/* Photo (~324x230 ratio, full width) */
.section-giving_learn_more--team .giving-learn-more__card-image img {
    aspect-ratio: 324 / 230;
    width: 100%;
    object-fit: cover;
}

/* White content box. NOTE: the base card hover (blue bg + white text + photo zoom) passes
   through, so team cards highlight on hover just like the standard Learn More cards. */
.section-giving_learn_more--team .giving-learn-more__card-content {
    padding: 20px !important;
}

/* Name (default; turns white on the base blue hover) */
.section-giving_learn_more--team .giving-learn-more__card-content h3 {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    margin: 0 0 12px 0 !important;
}

/* Role (default, uppercase gray; turns white on the base blue hover) */
.section-giving_learn_more--team .giving-learn-more__card-content p {
    color: #8D8D8D !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    text-transform: uppercase !important;
    margin: 0 0 20px 0 !important;
    flex: 0 0 auto !important;
}

/* "See Profile" link (default; keeps the base arrow, turns white on the base blue hover) */
.section-giving_learn_more--team .giving-learn-more__cta {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    margin-top: 0 !important;
}

/* Single column (mobile): cards span the full width instead of capping at 324px */
@media (max-width: 767px) {
    .section-giving_learn_more--team .giving-learn-more__card {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}


/* ---------- 6. Giving Text and Image Block ---------- */

.section-giving_text_image {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 0;
}

.section-giving_text_image .container {
    display: flex;
    align-items: stretch;
    padding: unset !important;
    margin: unset !important;
    gap: 0;
    max-width: 100% !important;
    width: 100% !important;
}

.section-giving_text_image .giving-text-image__image {
    flex: 1;
    min-height: 400px;
    max-width: 50%;
}

.section-giving_text_image .giving-text-image__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-giving_text_image .giving-text-image__text {
    flex: 1;
    max-width: 50%;
    padding: 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section-giving_text_image .giving-text-image__text .content-container {
    max-width: 450px;
}

/* Title */
.section-giving_text_image .giving-text-image__text h2 {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 35px !important;
    margin-bottom: 15px;
}

/* Body text */
.section-giving_text_image .giving-text-image__description,
.section-giving_text_image .giving-text-image__description p {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    margin-bottom: 15px;
}

@media (max-width: 1400px) {
    .section-giving_text_image .giving-text-image__text h2 {
        font-size: 28px !important;
        line-height: 31px !important;
    }
    .section-giving_text_image .giving-text-image__text {
        padding: 40px 35px;
    }
}

@media (max-width: 993px) {
    .section-giving_text_image .container {
        flex-direction: column;
    }
    .section-giving_text_image .giving-text-image__image {
        min-height: 300px;
        max-width: 100% !important;
    }
    .section-giving_text_image .giving-text-image__text {
        padding: 30px 20px;
        max-width: 100% !important;
    }
    .section-giving_text_image .giving-text-image__text h2 {
        font-size: 24px !important;
        line-height: 27px !important;
    }
    .section-giving_text_image .giving-text-image__description,
    .section-giving_text_image .giving-text-image__description p {
        font-size: 13px !important;
        line-height: 19px !important;
    }
}

@media (max-width: 767px) {
    .section-giving_text_image .giving-text-image__text h2 {
        font-size: 22px !important;
        line-height: 25px !important;
    }
}


/* ============================================================
   GIVING SUPPORT BLOCK (layout: giving_support)
   Title (left) + logo / supporter cards (right). Figma node 16038:1654.
   ============================================================ */

.section-giving_support {
    background-color: #fff;
    padding: 64px 0;
}

/* Constrain to the Figma content width (1040px = 1440 frame - 2x200px gutters), centered.
   Overrides the theme's very wide base .container (1920px / 140px / 5%) and forces plain block
   display so the inner flex row fills it and space-between can actually spread title + logos. */
.section-giving_support .container {
    display: block !important;
    max-width: 1040px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.section-giving_support .giving-support__inner {
    width: 100%;           /* fill the container so title + logos spread (not shrink-to-fit) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* Title (left) - fluid up to 45px */
.section-giving_support .giving-support__title {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(28px, 4vw, 45px) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.156 !important;   /* 52/45 */
    margin: 0 !important;
}

/* Logo group (right) */
.section-giving_support .giving-support__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
    width: min(700px, 100%);   /* Figma: ~700px logo area on the right; cards centered within it */
}

/* Each logo card */
.section-giving_support .giving-support__logo {
    border: 1px solid #f1f1f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 10px;
    width: 160px;
    min-height: 156px;     /* keep cards level across rows even when some have no logo */
}

/* No-image cards: drop the empty logo box so the caption is vertically centered (the card already
   centers its content; min-height keeps it the same height as the logo cards). */
.section-giving_support .giving-support__logo--no-image .giving-support__logo-img {
    display: none;
}

.section-giving_support .giving-support__logo-img {
    width: 100%;
    height: 64px;          /* fixed logo box (Figma 140x64) - keeps cards compact */
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-giving_support .giving-support__logo-img img {
    max-width: 100%;
    max-height: 100%;      /* max-* + auto beats the theme's global img{height:auto} */
    width: auto;
    height: auto;
    object-fit: contain;   /* show the full logo, no crop */
    display: block;
}

/* Optional bold caption under the logo */
.section-giving_support .giving-support__logo-caption {
    color: #000 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
    margin: 0 !important;
}

/* ============================================================
   BULLET POINTS - all page-builder sections
   - Brand-blue (#004982) markers everywhere.
   - Flatten the wysiwyg's accidental nested-list wrapper (<ul><li><ul>...</ul></li></ul>) that
     otherwise renders as hollow circles at a doubled indent. The :only-child guard means a real
     sub-list (a <li> with its own text AND a nested list) keeps its normal indent.
   ============================================================ */
.page-builder-section li::marker { color: #004982 !important; }
.page-builder-section li:has(> ul:only-child),
.page-builder-section li:has(> ol:only-child) {
    list-style: none;
    margin: 0;
}
.page-builder-section li > ul:only-child,
.page-builder-section li > ol:only-child {
    padding-left: 0;
}

/* Very wide screens (>2000px): the base .container caps at max-width:1920px but uses margin:5%
   (margin:0 on giving sections), so it pins left and pulls every section's content off-center on
   2560-wide monitors. Center the container so all section content stays centered. */
@media (min-width: 2000px) {
    .page-builder-section > .container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Tablet and down: stack the title above the logos; logos stay centered and wrap 2 -> 1 cleanly
   (avoids the awkward partial-wrap the 700px row caused between ~768-992px). */
@media (max-width: 992px) {
    .section-giving_support .giving-support__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .section-giving_support .giving-support__logos {
        width: 100%;
        justify-content: center;
    }
}

/* Small phones: tighten the vertical padding */
@media (max-width: 480px) {
    .section-giving_support {
        padding: 40px 0;
    }
}


/* ============================================================
   PILLARS BLOCK (layout: pillars) - Figma 16014:2245
   Heading + repeater of cards: background image + white title (left, blue gradient overlay),
   #f1f1f1 description box (right), equal height to the image.
   ============================================================ */
.section-pillars {
    background-color: #fff;
    padding: 100px 20px;
}
.section-pillars .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 !important;   /* beat Bootstrap's fixed container width so the 1040-wide cards are exact */
}

/* Heading "Pillars of <span>Impact</span>" */
.section-pillars .pillars__heading {
    color: #004982 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(28px, 4vw, 45px) !important;
    font-weight: 500 !important;
    line-height: 1.156 !important;
    text-align: center !important;
    margin: 0 !important;
}
.section-pillars .pillars__heading span,
.section-pillars .pillars__heading strong,
.section-pillars .pillars__heading b,
.section-pillars .pillars__heading em,
.section-pillars .pillars__heading i {
    font-style: italic !important;
    font-weight: 700 !important;
}

.section-pillars .pillars__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1040px;
}

/* Each card: image left + description box right, equal height */
.section-pillars .pillars__card {
    display: flex;
    align-items: stretch;
    min-height: 300px;
}

/* Left: background image with a left-fading blue gradient + white title */
.section-pillars .pillars__media {
    position: relative;
    flex: 0 0 484px;
    max-width: 484px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.section-pillars .pillars__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0,73,130,0) 0%, #004982 75%);
    pointer-events: none;
}
.section-pillars .pillars__title {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);   /* vertically centered in the card (Figma) */
    z-index: 1;
    max-width: 300px;
    color: #FFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-style: normal !important;
    font-weight: 400 !important;   /* first line regular */
    line-height: 30px !important;
}
.section-pillars .pillars__title span,
.section-pillars .pillars__title strong,
.section-pillars .pillars__title b,
.section-pillars .pillars__title em,
.section-pillars .pillars__title i {
    display: block;                /* emphasis on its own line */
    color: #FFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-style: italic !important;
    font-weight: 700 !important;
    line-height: 30px !important;
}

/* Right: #f1f1f1 description box, vertically centered text */
.section-pillars .pillars__desc {
    flex: 1 1 auto;
    min-width: 0;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    padding: 24px 32px;
}
.section-pillars .pillars__desc-inner,
.section-pillars .pillars__desc-inner p,
.section-pillars .pillars__desc-inner li {
    color: #000;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 21px;
}
.section-pillars .pillars__desc-inner :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .section-pillars { padding: 60px 0; }
    .section-pillars .container { gap: 40px; }
    .section-pillars .pillars__card {
        flex-direction: column;
        min-height: 0;
    }
    .section-pillars .pillars__media {
        flex: none;
        max-width: 100%;
        min-height: 240px;
    }
    .section-pillars .pillars__title { left: 20px; bottom: 20px; }
}