/* --------------------------------------------
   1. FONTS & TYPOGRAPHY
   -------------------------------------------- */
 
/* Google Font Import - Cormorant Garamond */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

.fl-page-nav .navbar-toggle *{
  font-family: "Font Awesome 5 Pro";
}


/* Headings - Default Font Stack */
h1, h2, h3, h4, h5, h6 {
  font-family: 'TideSans', 'Red Hat Display', 'Helvetica', Arial, Tahoma, sans-serif;
  line-height:1;
}

h1 {
  font-size:90px;
}

/* Headings - Cormorant Garamond Accent Style */
.cormorant .fl-heading,
h1.cormorant,
.cormorant,
.page-id-1311 h4 {
  font-family: "Cormorant Garamond";
  font-style: normal;
  color: #72dbff;
  font-weight: 500;
}

/* Paragraph - Light Weight */
p {
  font-weight: 300;
}

/* Team Page - Garamond heads */
.page-id-1311 h4 {
  font-size:24px;
  
}


/* --------------------------------------------
   2. GLOBAL / BODY
   -------------------------------------------- */
html{overflow-x:hidden;}

body, .home .fl-page-content {
  background-color: #000000;
}


/* --------------------------------------------
   3. HEADER & NAVIGATION
   -------------------------------------------- */



/* Shrink Header - Admin Bar Offset */
.fl-shrink-header-enabled.admin-bar .fl-page-header {
  top: 32px !important;
}

/* Hide Page Top Bar */
.fl-page-bar {
  display: none;
}

/* Logo - Max Width */
img.fl-logo-img {
  max-width: 200px !important;
}

/* Header Background - Semi-Transparent Black */
.fl-page-nav-right .fl-page-header-wrap {
  background: rgb(0 0 0 / 76%);
}

/* Remove border */
.fl-page-nav-right .fl-page-header-wrap {
    border-bottom: 0px;
}

/* Nav Items - Spacing */
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li {
  margin: 0 .75em;
}

/* Nav Links - Lowercase */
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li a {
  text-transform: lowercase;
}

/*Active state for menu*/
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a {
  color: #00C0FF;
  cursor: pointer;
  border: none;
}

/* CTA Button in Nav (Menu Item #1238) */
li#menu-item-1238 {
  background: #00C0FF;
  border-radius: 50px;
  padding: 0 10px;
}

li#menu-item-1238 a{
   color: #000;
   font-weight: 400;
}
li#menu-item-1238:hover a,
li#menu-item-1238 a:hover {
  color: #fff;
}


/* --------------------------------------------
   4. GRAVITY FORMS - General Styles (Forms #2 & #3)
   -------------------------------------------- */

/* Submit Buttons */
#gform_fields_2 #gform_submit_button_2,
#gform_fields_3 #gform_submit_button_3 {
  background: #00A9E0;
}

#gform_2 #gform_submit_button_2,
#gform_3 #gform_submit_button_3 {
  background: #00A9E0;
  border: 0px;
  padding: 14px 28px;
  color: #fff;
  font-weight: 600;
  text-transform: lowercase;
  border-radius: 8px;
}

/* Form Inputs, Selects & Textareas */
#gform_2 input, #gform_2 select, #gform_2 textarea,
#gform_3 input, #gform_3 select, #gform_3 textarea {
  background: #E5E6E32E;
  border-color: #70707082;
  border-radius: 2px;
  border-width: 1px;
}

/* Placeholder Text */
#gform_2 input::placeholder, #gform_2 select::placeholder, #gform_2 textarea::placeholder, #gform_2 select,
#gform_3 input::placeholder, #gform_3 select::placeholder, #gform_3 textarea::placeholder, #gform_3 select {
  color: #707070;
}


/* --------------------------------------------
   5. OCEAN SCIENCE MEETING FORM - Page Layout
   -------------------------------------------- */

/* "Back" / Secondary Link - Positioned Right */
.fl-node-ru0ysx24abgl a.left {
  float: right;
  margin-top: -65px;
  font-size: 26px;
  color: #00A9E0;
  text-decoration: underline;
}

/* Form Container - Centered, Max Width */
.fl-module.fl-module-html.fl-node-ru0ysx24abgl {
  max-width: 900px;
  margin: auto;
}


/* --------------------------------------------
   6. OCEAN SCIENCE MEETING FORM - Modal (Form #3)
   -------------------------------------------- */

/* Modal Heading */
#modal-yql6dpu20gjc h1 {
  font-size: 6rem;
  margin-bottom: 4px;
}

/* Modal Subheading */
#modal-yql6dpu20gjc h2 {
  font-size: 2.75rem;
  font-weight: 300;
  margin-bottom: 37px;
}

/* Modal Submit Button - Align Left */
#modal-yql6dpu20gjc #gform_submit_button_3 {
  float: left;
}

/* Modal Secondary Link - Align Right */
#modal-yql6dpu20gjc #gform_wrapper_3 ~ a.left {
  float: right;
  color: #00A9E0;
  font-size: 24px;
  text-decoration: underline;
  margin-top: -14px;
}

/* --------------------------------------------
   MOBILE STYLES
   -------------------------------------------- */

/* Tablet & Below (max-width: 992px) */
@media (max-width: 992px) {



}

/* Mobile Only (max-width: 768px) */
@media (max-width: 768px) {



}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
#modal-yql6dpu20gjc .pp-modal .pp-modal-content {
  padding: 40px 20px;
}
#modal-yql6dpu20gjc h1 {
  font-size: 5rem;
  margin-bottom: 4px;
  line-height: .8;
  text-wrap: pretty;
  margin-bottom: 25px;
}
#modal-yql6dpu20gjc h2 {
  font-size: 2rem;
  font-weight: 300;
  margin-bottom: 37px;
}
#modal-yql6dpu20gjc #gform_wrapper_3 ~ a.left {
  float: none;
  color: #00A9E0;
  font-size: 19px;
  text-decoration: underline;
  margin-top: 0px;
}
.fl-node-ru0ysx24abgl a.left {
  float: none;
  margin-top: 0px;
  font-size: 20px;
  color: #00A9E0;
  text-decoration: underline;
  text-align: center;
  margin: auto;
  width: 100%;
  display: block;
}
#gform_2 #gform_submit_button_2, #gform_3 #gform_submit_button_3 {
  background: #00A9E0;
  border: 0px;
  padding: 7px 24px;
  color: #fff;
  font-weight: 600;
  text-transform: lowercase;
  float: none;
  margin: auto;
  text-align: center;
  display: block;
}
}

.fl-node-uin1apmtybfl .fl-icon-wrap:hover a,
.fl-node-uin1apmtybfl .fl-icon-wrap:hover i,
.fl-node-uin1apmtybfl .fl-icon-wrap:hover i:before,
.fl-node-uin1apmtybfl .fl-icon-wrap:hover a p {
  color: #72dbff !important;
}
.pp-image-panels-wrap .pp-panel-link {
  border-radius: 16px;
}


/* ============================================
   BENTO POST GRID
   Breakpoints:
     Hi-res / large desktop: 1440px+
     Laptop: 1025px – 1439px
     Tablet: 769px – 1024px
     Mobile: 768px and below
   ============================================ */

/* --- Hide Masonry sizer & pseudo-element --- */
.bento-grid .fl-post-grid::before {
  display: none !important;
}
.bento-grid .fl-post-grid-sizer {
  display: none;
}

/* --- Base grid (hi-res / large desktop 1440px+) --- */
.bento-grid .fl-post-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 420px 470px auto 400px;
    gap: 40px;
    height: auto !important;
    width: 100% !important;
    position: static !important;
}

/* --- Post card base --- */
.bento-grid .fl-post-grid-post {
  position: relative !important;
  visibility: visible !important;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a2e;
  width: 100% !important;
  margin-bottom: 0px !important;
  top: 0px !important;
}

/* --- Images fill their cards --- */
.bento-grid .fl-post-image,
.bento-grid .fl-post-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.bento-grid .fl-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Item placement (desktop/hi-res) --- */
.bento-grid .fl-post-grid-post:nth-child(1) {
    grid-column: span 4;
}
.bento-grid .fl-post-grid-post:nth-child(2) {
    grid-column: span 8;
}
.bento-grid .fl-post-grid-post:nth-child(3) {
    grid-column: span 6;
    grid-row: span 2;
}
.bento-grid .fl-post-grid-post:nth-child(4) {
    grid-column: span 6;
}
.bento-grid .fl-post-grid-post:nth-child(5) {
    grid-column: span 6;
}
.bento-grid .fl-post-grid-post:nth-child(6) {
    grid-column: span 7;
}
.bento-grid .fl-post-grid-post:nth-child(7) {
    grid-column: span 5;
}
.bento-grid .fl-post-grid-post:nth-child(n+8) {
    grid-column: span 4;
}




/* ============================================
   Katherine's Mods 
   ============================================ */



@media (max-width: 480px) {
  

  .fl-node-661ea252ee333 > .fl-row-content-wrap:before {
    background-color: rgba(0, 0, 0, 0.5);
}
}



b, strong {
  font-weight: 500 !important;
}
.pp-image-panels-wrap .pp-panel-item {
  margin: 0px 8px;
  border-radius: 16px;
}

.cormorant{
font-family:"Cormorant Garamond", serif;
}

ul#menu-main-menu li:before {
  display: none;
}

#menu-main-menu li a {
  width: max-content;
  margin-right: 20px;
  display: block;
  text-indent: 0;
  text-decoration: none;
}
#menu-main-menu .menu-contact a {
  padding: 7px 6px;
  margin-left: 0px;
  margin-right: 0px;
}

/* ============================================
   LAPTOP — 1025px to 1439px
   Same layout, slightly tighter spacing & rows
   ============================================ */
@media (max-width: 1439px) {
    .bento-grid .fl-post-grid {
        grid-template-rows: 360px auto auto 340px;
        gap: 30px;
    }
    .bento-grid .fl-post-grid-post {
        border-radius: 10px;
    }
		.fl-page-nav-right .fl-page-header-container {
  padding-bottom: 20px;
  width: 100%;
  max-width: 1100px;
}
}

/* ============================================
   TABLET — 769px to 1024px
   2-column grid, uniform cards
   ============================================ */
@media (max-width: 1024px) {
	.fl-page-nav-right .fl-page-header-container {
  padding-bottom: 20px;
  width: 100%;
  max-width: 1100px;
}
	.col-md-5.col-sm-12.fl-page-header-logo-col {
  width: 40%;
}
.fl-page-nav-col.col-md-7.col-sm-12 {
  width: 60%;
}
	.fl-page-nav-right .fl-page-header-container {
  padding-bottom: 20px;
  width: 100%;
  max-width: 1100px;
}
	.fl-page-nav-right .fl-page-header-logo {
  padding-bottom: 5px;
  padding-top: 10px;
		padding-left: 10px;
}
	.fl-page-nav-wrap {
  border-bottom: 0px;
  border-top: 0px;
  background-color: transparent;
  color: #fff;
}
    .bento-grid .fl-post-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 20px;
    }
    .bento-grid .fl-post-grid-post:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16/9;
    }
    /* Item 3 goes full-width as a feature card */
    .bento-grid .fl-post-grid-post:nth-child(3) {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 21/9;
    }
    .bento-grid .fl-post-grid-post {
        border-radius: 10px;
    }
}

/* ============================================
   MOBILE — 768px and below
   Single column, uniform cards
   ============================================ */
@media (max-width: 768px) {
  .fl-shrink-header-enabled.admin-bar .fl-page-header .fl-page-header-container.container {
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 22px;
}
   .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav .navbar-toggle{
     top: 11px;
   }
     .fl-page-nav .navbar-toggle:hover, .fl-page-nav .navbar-toggle:focus {
    background: transparent;
    border-top: none;
    border-bottom: none;
    outline: none;
  }
  
    .bento-grid .fl-post-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .bento-grid .fl-post-grid-post:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 16/9;
    }
    /* Item 3 no longer needs special treatment */
    .bento-grid .fl-post-grid-post:nth-child(3) {
        grid-column: span 1;
        aspect-ratio: 16/9;
    }
    .bento-grid .fl-post-grid-post {
        border-radius: 8px;
    }
}

/* ============================================
   SMALL MOBILE — 480px and below
   Tighter gaps, smaller radius
   ============================================ */
@media (max-width: 480px) {
    .bento-grid .fl-post-grid {
        gap: 12px;
    }
    .bento-grid .fl-post-grid-post:nth-child(n) {
        aspect-ratio: 4/3;
    }
    .bento-grid .fl-post-grid-post:nth-child(3) {
        aspect-ratio: 4/3;
    }
    .bento-grid .fl-post-grid-post {
        border-radius: 6px;
    }
}

/* Overlay base — covers the full card */
.bento-grid .bento-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px;
  background: #00C0FFF0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* Show overlay on hover */
.bento-grid .fl-post-grid-post:hover .bento-overlay {
    opacity: 1;
}

/* Category term */
.bento-grid .bento-overlay .term {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #000 !important;
  margin-bottom: 12px;
  align-self: flex-start;
  transform: translateY(10px);
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}

/* Post title */
.bento-grid .bento-overlay .fl-post-title {
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  margin: 0;
  padding: 0;
  transform: translateY(10px);
  transition: transform 0.35s ease 0.05s, opacity 0.35s ease 0.05s;
  opacity: 0;
  font-family: Cormorant Garamond;
}

/* Title link inherits color */
.bento-grid .bento-overlay .fl-post-title a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
}
.bento-grid .bento-overlay .fl-post-title a:hover {
    
}

/* Animate children in on hover */
.bento-grid .fl-post-grid-post:hover .bento-overlay .term,
.bento-grid .fl-post-grid-post:hover .bento-overlay .fl-post-title {
    transform: translateY(0);
    opacity: 1;
}

/* Optional: subtle zoom on the image */
.bento-grid .fl-post-image img {
    transition: transform 0.5s ease;
}
.bento-grid .fl-post-grid-post:hover .fl-post-image img {
    transform: scale(1.04);
}

/* ============================================
   Responsive adjustments for overlay
   ============================================ */
@media (max-width: 1439px) {
    .bento-grid .bento-overlay {
        padding: 24px;
    }
    .bento-grid .bento-overlay .fl-post-title {
        font-size: 20px;
    }
}

@media (max-width: 1024px) {
    .bento-grid .bento-overlay {
        padding: 20px;
    }
    .bento-grid .bento-overlay .term {
        font-size: 15px;
        padding: 4px 10px;
    }
    .bento-grid .bento-overlay .fl-post-title {
        font-size: 40px;
    }
	 .fl-page-content {
    padding: 0 0px;
  }
}

@media (max-width: 768px) {
	.fl-node-661ea252ee333 > .fl-row-content-wrap {
		 align-items: end !important;
  justify-content: end;
  -webkit-align-items: end;
  -webkit-box-align: end;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-align: end;
  -ms-flex-pack: end;
		background-position: 0% -60px !important;
    background-attachment: fixed;
    background-size: 100%;
    background-image:url(https://website.whoi.edu/creative/wp-content/uploads/sites/71/2026/02/GulfStreamMeanderMap_Oceanus-Fall-24-1.png) !important;
}
    .bento-grid .bento-overlay {
        padding: 16px;
    }
      .bento-grid .bento-overlay .term {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-left: 0px;
  }
    .bento-grid .bento-overlay .fl-post-title {
        font-size: 38px;
    }
}

@media (max-width: 480px) {
	
	.view-work a {
		font-size: 13px;}
	
	.fl-node-ch5agb8mndio .pp-headline-dynamic-wrapper, .fl-node-ch5agb8mndio .pp-headline-dynamic-text {
    font-size: 40px;
  }
	
	.fl-node-661ea252ee333 > .fl-row-content-wrap {
		 align-items: end !important;
  justify-content: end;
  -webkit-align-items: end;
  -webkit-box-align: end;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
  -ms-flex-align: end;
  -ms-flex-pack: end;
		background-position: 0% -20px !important;
    background-attachment: fixed;
    background-size: 100%;
    background-image:url(https://website.whoi.edu/creative/wp-content/uploads/sites/71/2026/02/GulfStreamMeanderMap_Oceanus-Fall-24-1.png) !important;
}
	
	.fl-module.fl-module-menu.fl-node-8sb2nu7afv90.fl-node-8sb2nu7afv90-clone.fl-menu-mobile-clone {
    background: #000000bf;
    padding-bottom: 20px;
  }
	
	#menu-main-menu a {
  padding-top: 5px;
  padding-bottom: 12px;
}
  .fl-shrink-header-enabled.admin-bar .fl-page-header {
  top: 0px !important;
}
  
    .bento-grid .bento-overlay {
        padding: 14px;
    }
    .bento-grid .bento-overlay .fl-post-title {
        font-size: 35px;
    }
	.page-id-1311 .fl-node-9dw0fahsp38i .fl-module.fl-module-photo,
	.page-id-1311 .fl-node-l6t90fvnjym8 .fl-module.fl-module-photo,
	.page-id-1311 .fl-node-1ytcmud3jgia .fl-module.fl-module-photo{
  max-height: 300px;
  overflow: hidden;
}
	
	.page-id-1311 .fl-node-9dw0fahsp38i .fl-module .fl-rich-text h4,
	.page-id-1311 .fl-node-l6t90fvnjym8 .fl-module .fl-rich-text h4,
	.page-id-1311 .fl-node-1ytcmud3jgia .fl-module .fl-rich-text h4 {
  padding-bottom: 10px;
  font-size: 40px;
}
	
	
	
}


@supports (-webkit-touch-callout: none){
	.fl-row.fl-row-bg-fixed.fl-node-661ea252ee333 .fl-row-content-wrap{
		background-position: 0% -20px !important;
	}
	
}

@supports (-webkit-touch-callout: inherit){
	.fl-row.fl-row-bg-fixed.fl-node-661ea252ee333 .fl-row-content-wrap{
		background-position: 0% -20px !important;
	}
	
}



.view-work {
  position: absolute;
  bottom: 35px;
  font-weight: 500;
}

 /* ── Button wrapper ── */
  .view-work {
    display: inline-block;
  }

   .view-work a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
transform: translateY(10px);
  transition: transform 0.35s ease 0.05s, opacity 0.35s ease 0.05s;
  opacity: 0;
}

  /* ── Arrow via pseudo-element ── */
  .view-work a::after {
    content: '→';
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    /* default state — no animation */
  }

  /* ── Bounce keyframes: 2 bounces then settles ── */
  @keyframes arrowBounce {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(8px); }
    35%  { transform: translateX(0); }
    50%  { transform: translateX(6px); }
    65%  { transform: translateX(0); }
    100% { transform: translateX(0); }
  }

  /* ── Trigger on hover ── */
  .fl-post-grid-post:hover .view-work a {
	transform: translateY(10px);
    opacity: 1;
  }

  .fl-post-grid-post :hover .view-work a::after {
    animation: arrowBounce 0.7s ease forwards;
  }