html * { -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; box-sizing:border-box; text-rendering:optimizeLegibility; }
html { scroll-behavior:smooth; }
/* Missing BNPP Serif light */
body { font-family:'bnpp_sanslight', sans-serif; color:#000; font-style:normal; font-weight:normal; font-size:19px; line-height:1.42em;position:relative;  /*padding-top:120px;*/ }

body.menu-open { height:100vh; overflow-y:hidden; }
  
/* General */
img { max-width:100%; height:auto; }
a { color:inherit; text-decoration:underline; cursor:pointer; }
a:hover { color:inherit; }
hr { border-top:1px solid #000; width:100%; }
strong { font-weight:normal; font-style:normal; font-family:'bnpp_sansbold', sans-serif; }
body ::selection { background:#000; color:#FFF; }
body ::-moz-selection { background:#000; color:#FFF; }
body.noscroll { overflow:hidden; }
ol { counter-reset:item; }
ol li { display:block; position:relative; margin:1em 0; }
ol li:before { content:counters(item, ".")"."; counter-increment:item; position:absolute; margin-right:100%; right:10px; /* space between number and text */ }
.clear { clear:both; }

/* Typography */
h1 { font-family:'bnpp_sanslight', sans-serif; font-weight:normal; font-style:normal; font-size:46px; line-height:1.2em; margin:0; margin-bottom:0; }
h2 { font-family:'bnpp_sanslight', sans-serif; font-weight:normal; font-style:normal; font-size:30px; line-height:1.2em; margin:0; margin-bottom:19px; border-bottom:1px solid #45BCD4; padding-bottom:5px; }
h3 { font-family:'bnpp_sansregular', sans-serif; font-weight:normal; font-style:normal; font-size:24px; line-height:1.2em; margin:0; margin-bottom:19px; }
h4 { font-family:'bnpp_sans_condensedregular', sans-serif; font-weight:normal; font-style:normal; font-size:32px; line-height:1.2em; margin:0; margin-bottom:19px; }
ul { padding-left:26px; }
ul li { margin-bottom:14px; }


.section-title { border-top:1px solid #B3B3B3; padding-top:10px; text-transform:uppercase; font-size:15px; color:#000; padding-bottom:20px; font-family:'bnpp_sansregular', sans-serif; }

.hero-block { /*border-bottom:1px solid #B3B3B3; padding-bottom:30px;*/ }
.hero-block h1 { font-family:'bnpp_sanslight', sans-serif; font-weight:normal; font-style:normal; font-size:60px; line-height:1.2em; margin:0; margin-bottom:19px; padding-right:15%; }
.hero-block .hero-img { float:right; margin-top:93px; shape-margin:15px; margin-left:15px; width:50%; }
.hero-block .col-md-4 { padding-top:67px; position:relative; }
.hero-block .mrk { width:100px; margin-top:30px; }
.hero-block .mrk2 { position:absolute; width:80px; top:0px; left:-40px; }


.connect-with-us {  }
/* Layout */
.connect-with-us .connect-row { display:flex; align-items:stretch; flex-wrap:nowrap; }

.connect-with-us .col-left { flex:0 0 237px; max-width:237px; display:flex; flex-direction:column; }

.connect-with-us .col-right { flex:1 1 auto; min-width:0; }

/* Links: equal height, centered text */
.connect-with-us .col-left a { flex:1; display:flex; align-items:center; text-decoration:none; padding:0 50px 0 10px; border-bottom:1px solid #B3B3B3; background-image:url('../imgs/more-arrow.svg'); background-repeat:no-repeat; background-position:right 10px center;  background-size:auto 20px; }
.connect-with-us .col-left a:last-child { border-bottom:0; }

/* Image fills right column width and sets the overall height */
.connect-with-us .col-right img { display:block; width:100%; height:auto; }

/* Responsive: stack on small screens if desired */
@media (max-width: 768px){
	.connect-with-us .connect-row{
		flex-direction:column;
	}
	.connect-with-us .col-left,
	.connect-with-us .col-right{
		flex:0 0 auto;
		max-width:100%;
	}
	/* Optional: make links shorter on mobile */
	.connect-with-us .col-left a{
		padding:0.75rem 1rem;
		flex:0 0 auto;
	}
}


/* Related content */
.related-content .headrow .col-4 { text-align:right; }
.related-content .headrow hr { margin-top:0; }
.back-btn { display:inline-block; font-family:'bnpp_sans_condensedregular', sans-serif; font-weight:normal; font-style:normal; font-size:32px; line-height:1.2em; margin-bottom:19px; padding:0 0 0 35px; background:url('../imgs/icon-back.svg') center left no-repeat; background-size:contain; text-decoration:none; transition:padding 0.4s ease; }
.back-btn:hover { padding-left:45px;}
.related-grid {  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, /*1fr*/200px)); grid-gap:2vw;  }
.related-grid .box { display:block; width:100%; height:0; padding-bottom:100%; position:relative; }
.related-grid .box .bubble { position:absolute; top:0; left:0; display:block; height:100%; width:100%; border-radius:50%; background:rgba(169, 202, 78, 0.5); padding:8%; text-decoration:none; transition:background-color 0.4s ease, scale 0.4s ease; }
.related-grid .box .bubble .inner { height:100%; width:100%; border:3px solid #FFF; border-radius:50%; background:rgba(169, 202, 78, 1); color:#FFF; text-align:center; display:flex; justify-content:center; align-items:center; font-family:'bnpp_sans_condensedregular', sans-serif; font-weight:normal; font-style:normal; font-size:24px; line-height:1.1em; padding:5%; }
.related-grid .box .bubble:hover { scale:1.2; background:rgba(169, 202, 78, 0); }
.related-grid .box.on { pointer-events:none; }
.related-grid .box.on .bubble-blocker { height:100%; width:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); border-radius:50%; }





/* Layout wrapper: visually 5 equal columns (1 + 4) */
.mosaic { display:grid; grid-template-columns:1fr 4fr; gap:12px; align-items:stretch; margin-bottom:16px; }

/* Left column (the first grid item) */
.tile--hero { display:grid; /*place-items:center;*/ padding:16px; background:#111; color:#fff; min-height:80px; }

/* Right side: a 4-column auto-flowing grid of 80px rows */
.mosaic__grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:80px; grid-auto-flow:row dense; gap:12px; }

/* Individual tiles on the right */
.mosaic .tile { display:grid; justify-items:start; align-items:start; position:relative; text-decoration:none; color:#000; overflow:hidden; padding:10px 16px; text-transform:uppercase; }
.mosaic .tile .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); }
.mosaic .tile .title { position:relative; line-height:1.2em; }
.mosaic .tile img { position:absolute; bottom:10px; right:16px; height:20px; }
.mosaic .tile .blob { display:block; position:absolute; top:151%; right:-47%; width:96%; aspect-ratio:1 / 1; border-radius:50%; background:rgba(255,255,255,0.25); transform:translateY(-50%) scale(1); transform-origin:right center; pointer-events:none; transition:transform 0.4s ease; will-change:transform; }
.mosaic .tile--finance .blob, .mosaic .tile--health .blob, .mosaic .tile--mind .blob { width:auto; height:120%; right:-40%; top:70%; }
.tile--finance, .tile--health, .tile--mind, .tile--family { color:#FFF; }

/* grow the circle to cover the whole tile */
.mosaic .tile:hover { color:#000; }
.tile--finance:hover, .tile--health:hover, .tile--mind:hover, .tile--family:hover { color:#FFF; }
.mosaic .tile:hover .blob {
	/* scale big enough to overshoot width (tweak if your columns are very wide) */
	transform: translateY(-50%) scale(2.25);
}


/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tile .blob { transition: none; }
}

/* Optional: allow some items to span multiple columns/rows if you ever want */
.tile.--span-2c { grid-column:span 2; }
.tile.--span-2r { grid-row:span 2; }

/* Responsive nicety: collapse to a single column on small screens */
@media (max-width: 700px) {
	.mosaic { grid-template-columns:1fr; /* stack hero above grid */ }
	.mosaic__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); /* or 1 if you prefer */ }
}


/* Home grid */
.home-grid {  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); grid-gap:3vw; }
.home-grid .box { display:block; width:100%; height:0; padding-bottom:100%; position:relative; }
.home-grid .box .bubble { position:absolute; top:0; left:0; display:block; height:100%; width:100%; border-radius:50%; padding:8%; text-decoration:none; border:5px solid #FFF; background:rgba(169, 202, 78, 1); }
.home-grid .box .bubble .inner { height:100%; width:100%; border-radius:50%; color:#FFF; text-align:center; display:flex; justify-content:center; align-items:center; font-family:'bnpp_sans_condensedbold', sans-serif; font-weight:normal; font-style:normal; font-size:46px; line-height:1.1em; padding:5%; text-align:center; transition:scale 0.4s ease; }
.home-grid .box .bubble .inner img { display:inline-block; height:75px; margin-top:5px; }
.home-grid .box .bubble:hover .inner { scale:1.2; background:rgba(169, 202, 78, 0); }




/* Content path */
.content-grid { position:relative; }
.content-grid .cg-mobile-path { display:none; }
.cg-bg-path svg { max-width:100%; }
.content-grid .bubble-area { position:absolute; top:0; left:0; width:100%; height:100%; }
.content-grid .bubble { position:absolute; display:block; height:200px; width:200px; border-radius:50%; background:rgba(169, 202, 78, 0.5); padding:15px; text-decoration:none; transition:background-color 0.4s ease, scale 0.4s ease; margin-left:-100px; margin-top:-100px; }
.content-grid .bubble .inner { height:100%; width:100%; border:3px solid #FFF; border-radius:50%; background:rgba(169, 202, 78, 1); color:#FFF; text-align:center; display:flex; justify-content:center; align-items:center; font-family:'bnpp_sans_condensedregular', sans-serif; font-weight:normal; font-style:normal; font-size:28px; line-height:1.1em; padding:10%; }
.content-grid .bubble:hover { scale:1.2; background:rgba(169, 202, 78, 0); }
	/* Bubble positions */
	.content-grid .bubble1 { top:18%; left:8%; }
	.content-grid .bubble2 { top:17%; left:47%; }
	.content-grid .bubble3 { top:9%; right:0%; }
	.content-grid .bubble4 { top:62%; right:10%; }
	.content-grid .bubble5 { top:51%; left:32%; }
	.content-grid .bubble6 { bottom:21%; left:8%; }
	.content-grid .bubble7 { top:53%; left:44%; }
	.content-grid .bubble8 { top:57%; left:15%; }
	
	.content-grid.layout-2 .bubble2 { top:30%; left:31%; }
	.content-grid.layout-2 .bubble3 { top:10%; left:55%; right:initial; }
	.content-grid.layout-2 .bubble4 { top:5%; right:5%; }
	.content-grid.layout-2 .bubble5 { top:53%; right:-1%; left:initial; }
	.content-grid.layout-2 .bubble6 { top:63%; right:24%; left:initial; }
	
	.content-grid.layout-3 .bubble2 { top:29%; left:28%; }
	.content-grid.layout-3 .bubble3 { top:14%; left:50%; right:initial; }
	.content-grid.layout-3 .bubble4 { top:1%; right:19%; }
	.content-grid.layout-3 .bubble5 { top:12%; right:-1%; left:initial; }
	.content-grid.layout-3 .bubble6 { top:53%; right:0%; left:initial; }
	.content-grid.layout-3 .bubble7 { top:64%; right:21%; left:initial; }
	.content-grid.layout-3 .bubble8 { top:54%; left:47%; }
	.content-grid.layout-3 .bubble9 { top:54%; left:21%; }
	.content-grid.layout-3 .bubble10 { top:77%; left:3%; }


.content-grid-mobile { position:relative; display:none; }
.content-grid-mobile .cgm-group { position:relative; margin-bottom:90px; }
.content-grid-mobile .cgm-group svg { max-width:80%; margin-left:10%; }
.content-grid-mobile .bubble { position:absolute; display:block; height:200px; width:200px; border-radius:50%; background:rgba(169, 202, 78, 0.5); padding:15px; text-decoration:none; transition:background-color 0.4s ease, scale 0.4s ease; margin-left:-100px; margin-top:-100px; z-index:1; }
.content-grid-mobile .bubble .inner { height:100%; width:100%; border:3px solid #FFF; border-radius:50%; background:rgba(169, 202, 78, 1); color:#FFF; text-align:center; display:flex; justify-content:center; align-items:center; font-family:'bnpp_sans_condensedregular', sans-serif; font-weight:normal; font-style:normal; font-size:28px; line-height:1.1em; padding:10%; }
.content-grid-mobile .cmg0 .bubble { position:absolute; top:0; left:100px; }
.content-grid-mobile .cmg1 .bubble { position:absolute; top:0; right:0px; }
.content-grid-mobile .bubble:hover { scale:1.2; background:rgba(169, 202, 78, 0); }


/* Did you know block */
.did-you-know { padding:1px 10px;}

.plus-block { text-align:right; }
.plus-block img { width:62px; }

.plus-block-offset { position:relative; left:-85px; margin-top:80px; margin-bottom:40px; }
.plus-block-offset img { width:170px; }


/* Content */
.content { max-width:1200px; position:relative; padding:0 20px; margin:auto; }
.page { padding-top:20px; padding-bottom:200px; }

.padding-top-large { padding-top:60px; }
.padding-top-medium { padding-top:40px; }
.padding-top-small { padding-top:20px; }

.padding-bottom-large { padding-bottom:60px; }
.padding-bottom-medium { padding-bottom:40px; }
.padding-bottom-small { padding-bottom:20px; }

.margin-top-large { margin-top:60px; }
.margin-top-medium { margin-top:40px; }
.margin-top-small { margin-top:20px; }

.margin-bottom-large { margin-bottom:60px; }
.margin-bottom-medium { margin-bottom:40px; }
.margin-bottom-small { margin-bottom:20px; }

.spacer { height:30px; }
.spacer.sh-medium { height:60px; }
.spacer.sh-large { height:100px; }

.section .row { display:flex; align-items:center; }
.section.va-top .row > div, .va- .row > div { align-self:flex-start; }
.section.va-middle .row > div {  }
.section.va-bottom .row > div { align-self:flex-end; }

.padding-left-1 { padding-left:8.33%; }
.padding-right-1 { padding-right:8.33%; }
.padding-left-2 { padding-left:16.66%; }
.padding-right-2 { padding-right:16.66%; }
.padding-left-3 { padding-left:25%; }
.padding-right-3 { padding-right:25%; }
.padding-left-4 { padding-left:33.33%; }
.padding-right-4 { padding-right:33.33%; }

.col-sm-6 .padding-left-1 { padding-left:16.66%; }
.col-sm-6 .padding-right-1 { padding-right:16.66%; }

/* Form elements */
::placeholder { color:#000; opacity:1; transition:color 0.4s ease; }
:-ms-input-placeholder { color:#000; transition:color 0.4s ease; }
::-ms-input-placeholder { color:#000; transition:color 0.4s ease; }
input:focus { outline:none; }
.input-group { margin-bottom:12px; }
.input-group label { font-size:14px; font-family:'HelveticaNow-Regular', sans-serif; text-transform:uppercase; }
.input-group input[type='text'], .input-group input[type='password'], .input-group textarea { border:1px solid #000; border-radius:10px; width:100%; font-size:17px; font-family:'HelveticaNow-Regular', sans-serif; line-height:1.41em; padding:5px 10px; background:#FFF; transition:all 0.4s ease; }
input[type='submit'], .pre-submit-btn { border:1px solid #000; color:#000; font-weight:normal; background:#FFF; border-radius:25px; text-transform:uppercase; font-size:17px; padding:10px 15px; font-family:'HelveticaNow-Regular', sans-serif; margin:30px 0; cursor:pointer; transition:all 0.4s ease; text-decoration:none; line-height:1em; }
.pre-submit-btn { display:inline-block; }
input[type='submit']:hover, .pre-submit-btn:hover { background:#000; color:#FFF; }
input[type='submit'].processing, .pre-submit-btn.processing { opacity:0.5; padding-right:50px; background:url('../imgs/processing.gif') right 15px center no-repeat; background-size:20px 20px; pointer-events:none; }
input[type='submit'].delete-confirm, .darkmode input[type='submit'].delete-confirm { border:1px solid #CB3540; color:#CB3540; }
input[type='submit'].delete-confirm:hover, .darkmode input[type='submit'].delete-confirm:hover { background:#CB3540; color:#FFF; }

/* Checkboxes */
.checkbox-area { display:inline-block; margin-right:15px; margin-bottom:15px; }
input[type="checkbox"] { -webkit-appearance:none; appearance:none; background-color:#FFF; margin:0; font:inherit; color:#000; width:24px; height:24px; border:1px solid #000; border-radius:1em; display:grid; place-content:center; }
input[type="checkbox"]::before { content:""; width:16px; height:16px; border-radius:1em; transform:scale(0); transform-origin:center center; transition: 120ms transform ease-in-out; background-color:#000; }
input[type="checkbox"]:checked::before { transform:scale(1); }
input[type="checkbox"]:focus { outline:max(1px, 1px) solid #000; outline-offset:max(3px, 3px); }
input[type="checkbox"]:disabled { opacity:0.5; cursor: not-allowed; }
.error input[type="checkbox"], .darkmode .error input[type="checkbox"] { color:#EF7773; border:1px solid #EF7773;}
.error input[type="checkbox"]::before, .darkmode .error input[type="checkbox"]::before { background-color:#EF7773; }
.error input[type="checkbox"]:focus, .darkmode .error input[type="checkbox"]:focus { outline:max(1px, 1px) solid #EF7773; outline-offset:max(3px, 3px); }

.input-group textarea  { min-height:50px; display:block; }
.textarea-container { position:relative; overflow:hidden; }
.textarea-container:before { content:''; background:#000 url('../imgs/icon-textarea-white.svg') left 3px center no-repeat; position:absolute; width:60px; height:60px; bottom:-30px; right:-30px; pointer-events:none; transform: rotateY(0deg) rotate(45deg); transition:background 0.4s ease; }

.input-group select { width:100%; border:1px solid #000; height:37px; border-radius:10px; font-size:17px; font-family:'HelveticaNow-Regular', sans-serif; line-height:1.41em; padding:5px 40px 5px 10px; background:#FFF; transition:all 0.4s ease; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:#FFF url('../imgs/select-arrow.svg') center right 15px no-repeat; }
.darkmode .input-group select { border:1px solid #FFF; background:#000 url('../imgs/select-arrow-white.svg') center right 15px no-repeat; color:#FFF; }

.field-error { background:#FFF; border-radius:10px 10px 10px 10px; transition:all 0.4s ease; }
.input-group.error .field-error { background:#EF7773; }

.input-group .field-error span { display:none; color:#FFF; font-size:14px; padding:10px 20px 12px 30px; background:url('../imgs/icon-error-white.svg') top 13px left 10px no-repeat; line-height:1.3em; }
.input-group.error .field-error span { display:block; }

.input-group.error input[type='text'], .input-group.error input[type='password'], .input-group.error textarea { border-color:#EF7773; }

.text-align-left, .button-align-left { text-align:left; }
.text-align-center, .button-align-center { text-align:center; }
.text-align-right, .button-align-right { text-align:right; }

.form-feedback .error { background:#EF7773; color:#FFF; border-radius:10px; padding:10px; }
.form-feedback .success { background:#73EF76; color:#000; border-radius:10px; padding:10px; }
.form-feedback .warning { background:#EFC273; color:#FFF; border-radius:10px; padding:10px; }

/* Button */
.button { display:inline-block; height:30px; line-height:30px; font-size:14px; border-radius:20px; padding:0 20px; text-transform:uppercase; text-decoration:none; background:#CCC; color:#000; font-family:'bnpp_sansregular', sans-serif; }
/*.button.large { font-size:28px; height:60px; line-height:58px; padding:0 40px; border-radius:40px; }
.button:hover { background:#000; color:#FFF; }
.button.solid { background:#000; color:#FFF; }
.darkmode .button.solid { background:#FFF; color:#000; }*/

/* Contact form */
/*.contact-form .input-group textarea { height:273px; }
.contact-form-thanks { display:none; }*/

/* Header bar */
header { font-family:'bnpp_sans_condensedregular', sans-serif; /*position:fixed; top:0; left:0;*/ width:100%; /*z-index:21;*/ background:#FFF; }
header .spectrum { width:100%; display:block; }
header a { text-decoration:none; }
header .logo { display:inline-block; margin:24px 0; }
header .logo img {  display:inline-block; height:42px; }
header .bnpp-logo { position:absolute; right:20px; top:30px; }
header .bnpp-logo img { height:34px; }

header .menu-row { padding:20px 0; font-family:'bnpp_sansregular', sans-serif;  }
header .menu-row a { color:#999999; display:inline-block; margin-right:15px; font-size:15px;  }
header .menu-row a.on { color:#000; text-decoration:underline; }
header .menu-row .left-menu { display:inline-block; }
header .menu-row .right-menu { display:inline-block; float:right; }

header .search-row { border-bottom:1px solid #B3B3B3; padding-bottom:40px; }
header .search-open-btn { font-family:'bnpp_sanslight', sans-serif; display:block; width:100%; background:#EDEDED; color:#000; padding:2px 15px; font-size:24px; text-transform:uppercase; }
/* header .search-open-btn { position:absolute; right:20px; top:30px; cursor:pointer; }
header .search-open-btn img { width:25px; }
header .upper-menu { position:absolute; right:60px; top:34px; text-transform:uppercase; }
header .upper-menu a { display:inline-block; margin-left:20px; text-decoration:none; font-size:25px; line-height:1em;  }
header .upper-menu a span { color:#000!important; transition:color 0.4s ease; }
header .upper-menu a:hover span { color:inherit!important; } */

.page-tag { display:inline-block; padding:0px 30px; text-transform:uppercase; color:#FFF; text-decoration:none;font-family:'bnpp_sansregular', sans-serif; font-size:15px; margin-bottom:15px; }
.page-tag.pt-time-off, .page-tag.pt-lifestyle { color:#000; }
.page-tag:hover { color:#FFF; }
.page-tag.pt-time-off:hover, .page-tag.pt-lifestyle:hover { color:#000; }

#tab-menu { overflow:hidden; position:relative; width:100%; z-index:9; padding:0; height:90px; margin-bottom:20px; }
.mobmenubounce1 { padding:0!important; height:90px; }
.swiper-container { width:100%; height:100%; }
.mobmenubounce1 .swiper-slide { width:auto; float:left; margin-right:10px; height:90px; }
.mobmenubounce1 .swiper-slide a { padding:0 25px; }
.swiper-button-next, .swiper-button-prev { position:absolute; height:90px; width:35px; text-indent:999999px; cursor:pointer; top:0; }
.swiper-button-prev { left:0; background:#FFF url(../imgs/left.svg) left center no-repeat; }
.swiper-button-next { right:0; background:#FFF url(../imgs/right.svg) right center no-repeat; }
#tab-menu a { display:flex; align-items:center; justify-content:center; text-decoration:none; text-transform:uppercase; width:90px; height:90px; border-radius:90px; line-height:1.1em; font-size:16px; text-align:center; position:relative; }
#tab-menu a .bg { display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); }
#tab-menu a .title { position:relative; }


/* Mobile menu icon */
.mobile-menu-icon { display:none; position:absolute; top:17px; right:20px; width:32px; height:23px; transform:rotate(0deg); transition:.5s ease-in-out; cursor:pointer; }
.mobile-menu-icon span { display:block; position:absolute; height:3px; width:100%; background:#000; border-radius:5px; opacity:1;
  left:0; transform:rotate(0deg); transition:.25s ease-in-out; }
.mobile-menu-icon span:nth-child(1){ top:0px; transform-origin:left center; }
.mobile-menu-icon span:nth-child(2){ top:10px; transform-origin:left center; }
.mobile-menu-icon span:nth-child(3){ top:20px; transform-origin:left center; }
.mobile-menu-icon.open span:nth-child(1){ transform:rotate(45deg); top:-3px; left:8px; }
.mobile-menu-icon.open span:nth-child(2){ width:0%; opacity:0; }
.mobile-menu-icon.open span:nth-child(3){ transform:rotate(-45deg); top:20px; left:8px; }



/* Mobile menu */
.mobile-menu { position:fixed; top:0; right:0; width:0%; max-width:320px; height:100%; background:#FFF; z-index:20; text-align:center; overflow:hidden; transition:background-color 0.4s ease; display:none; }
.mobile-menu .menu { font-size:32px; font-family:'bnpp_sans_condensedregular', sans-serif; line-height:1.1em; padding-top:90px; }
.mobile-menu .menu a { text-decoration:none; text-transform:uppercase; display:inline-block; padding:8px 0; }


/* Sections */
.section { position:relative; }





/* Text block */
.text-block {  }



/* Image block */
.image-block { position:relative; margin-bottom:30px; }
.image-block img { width:auto; max-width:100%; }
/* .image-block-caption { margin:10px 0; font-size:14px; line-height:1.29em; max-width:656px; background:url('../imgs/icon-dot.svg') top 4px left no-repeat; padding-left:15px; transition:background-image 0.4s ease; } */

/* Page icon block */
.page-icon-block { position:relative; margin-bottom:30px; max-width:300px; }
.page-icon-block img { width:auto; max-width:100%; }


/* Video block */
.video-block { height:0px; padding-bottom:/*46.58%*/56.25%; background:#F4F4F4 no-repeat; background-size:cover; overflow:hidden; position:relative; }
.video-block .overlay { cursor:pointer; display:flex; justify-content:center; align-items:center; background-size:cover; }
.video-block-caption { margin:10px 0; font-size:14px; line-height:1.29em; max-width:656px; background:url('../imgs/icon-dot.svg') top 4px left no-repeat; padding-left:15px; transition:background-image 0.4s ease; }
.video-block .video-consent { position:absolute; background:#FFF; top:0; left:0; height:100%; width:100%; display:none; align-items:center; text-align:center; }
.darkmode .video-block .video-consent { background:#000; }
.video-block .video-consent > div { width:100%; }
.video-block .video-consent .button { margin:0 10px 10px 10px; }
.video-block .video-hide { display:none; }
.video-block iframe, .video-block object, .video-block embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* Accordion */
.accordion-group { border-bottom:1px solid #000; transition:border-color 0.4s ease; }
.accordion-title { position:relative; display:block; padding-bottom:20px; padding-right:40px; background:url('../imgs/icon-plus.svg') right top no-repeat; margin-bottom:0; margin-top:20px; cursor:pointer; }
.accordion-title.open { background:url('../imgs/icon-minus.svg') right top 13px no-repeat; }
.accordion-content { display:none; }

.watch-video-area { background:#FF99E8; margin-top:25px; }



.slider .sliderswiper { overflow:hidden; }
.slider .sliderswiper .swiper-slide { width:100%; height:100%; }
.slider .sliderswiper .swiper-slide a { display:block; position:relative; text-decoration:none; }
.slider .sliderswiper .swiper-slide .tag { position:absolute; top:0; left:0; display:block; padding:10px; font-size:20px; text-transform:uppercase; color:#FFF; }
.slider .sliderswiper .swiper-slide .tag.tag-lifestyle, .slider .sliderswiper .swiper-slide .tag.tag-time-off { color:#000; }
.slider .sliderswiper .swiper-slide .overlay { position:absolute; bottom:0; left:0; display:block; width:100%; background:linear-gradient(to bottom, rgba(0,0,0,0), #000); color:#FFF; padding:30px 20px; }
.slider .sliderswiper .swiper-slide .overlay .title { display:block; font-size:28px; font-family:'bnpp_sansregular', sans-serif; margin-bottom:5px; }
.slider .sliderswiper .swiper-slide .overlay .subtitle { display:block; }


.slider .swiper-pagination { text-align:center; top:initial; left:initial; right:initial; bottom:initial; position:relative; padding:13px; }

.slider .swiper-pagination-bullet { background:#E6E6E6; height:12px; width:12px; margin:4px; opacity:1; }
.slider .swiper-pagination-bullet-active { background:#B3B3B3; }
.slider .swiper-button-next, .slider .swiper-button-prev { top:50%; }
.slider .swiper-button-prev { left:30px; background: url(../imgs/left.svg) left center no-repeat; margin-top:-45px; }
.slider .swiper-button-next { right:30px; background: url(../imgs/right.svg) left center no-repeat; margin-top:-45px; }


/* Macy Masonry test grid */
#macy-container { min-height:50vh; }
#macy-container .item { height:100px; line-height:100px; background:pink; text-align:center; font-size:40px; }

/* CSS Grid Demo */
/* .mgrid { display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:masonry; gap:20px; } */
/* Masonry isn't a native option even 2 years after working under a flag on Firefox, will need to use JS for masonry */
.mgrid { display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-flow:dense; gap:20px; }
/* This type of grid will allow for a mix of depths maintaining the correct sizing, will also work for team grids */
.mgrid .item { margin:0;
  height:100px; line-height:100px; background:pink; text-align:center; font-size:40px; }
.mgrid .item.s2 { grid-column-end:span 2; grid-row-end: span 2; height:100%; }



/* Filter grid */
.grid-filter-toggle { text-decoration:none; padding-right:25px; background:url('../imgs/select-arrow.svg') center right no-repeat; }
.grid-filter-toggle.on { background:url('../imgs/select-arrow-up.svg') center right no-repeat; }
.darkmode .grid-filter-toggle { background:url('../imgs/select-arrow-white.svg') center right no-repeat; }
.darkmode .grid-filter-toggle.on { background:url('../imgs/select-arrow-up-white.svg') center right no-repeat; }
.grid-filter-toggle span { position:relative; top:2px; display:inline-block; width:19px; margin-right:10px; height:1em; background:url('../imgs/icon-filter.svg') center center no-repeat; }
.darkmode .grid-filter-toggle span { background:url('../imgs/icon-filter-white.svg') center center no-repeat; }
.grid-filter-toggle-area.on { display:block!important; }
.grid-filter-toggle-area { padding-top:20px; }

.filter-drop-area { border:1px solid #000; border-radius:10px; width:100%; position:relative; z-index:9; transition:border 0.4s ease; }
.filter-drop-area.open { z-index:10; }
.darkmode .filter-drop-area { border:1px solid #FFF; }
.filter-drop-area .label { height:50px; line-height:50px; cursor:pointer; padding:0 15px; background:url('../imgs/select-arrow.svg') center right 15px no-repeat; }
.darkmode .filter-drop-area .label { background:url('../imgs/select-arrow-white.svg') center right 15px no-repeat; }
.filter-drop-area.open .label { background:url('../imgs/select-arrow-up.svg') center right 15px no-repeat; }
.darkmode .filter-drop-area.open .label { background:url('../imgs/select-arrow-up-white.svg') center right 15px no-repeat; }
.filter-drop-area .drop-zone { position:absolute; top:40px; left:-1px; width:calc(100% + 2px); background:#FFF; border:1px solid #000; border-radius:0 0 10px 10px; display:none; padding:15px 0; border-top:none; max-height:300px; overflow:auto; }
.darkmode .filter-drop-area .drop-zone { background:#000; border:1px solid #FFF; border-top:none; }
.filter-drop-area.open .drop-zone { display:block; padding-right:14px; }
.filter-group { padding:0 15px; }
.filter-group span { text-transform:uppercase; cursor:pointer; }
.filter-group input[type="checkbox"]:focus, .darkmode .filter-group input[type="checkbox"]:focus { outline:none; outline-offset:0; }
.filter-group .checkbox-area { margin-right:10px; margin-bottom:10px; position:relative; top:2px; cursor:pointer; }
.filter-group .checkbox-area input { cursor:pointer;}
.clear-filters { display:inline-block; background:url('../imgs/icon-remove-project.svg') center left no-repeat; padding-left:26px; text-decoration:none; transition:background 0.4s ease; }
.darkmode .clear-filters { background-image:url('../imgs/icon-remove-project-white.svg'); }



/* Multi selects */
.multi-select { border:1px solid #000; background:#FFF; color:#000; border-radius:10px; width:100%; position:relative; z-index:9; transition:border 0.4s ease;}
.multi-select.open { z-index:10; }
/* .darkmode .filter-drop-area { border:1px solid #FFF; } */
.multi-select .label { height:40px; line-height:40px; cursor:pointer; padding:0 10px; background:url('../imgs/select-arrow.svg') center right 15px no-repeat; font-size:17px; font-family: 'HelveticaNow-Regular', sans-serif; }
/* .darkmode .filter-drop-area .label { background:url('../imgs/select-arrow-white.svg') center right 15px no-repeat; } */
.multi-select.open .label { background:url('../imgs/select-arrow-up.svg') center right 15px no-repeat; }
/* .darkmode .filter-drop-area.open .label { background:url('../imgs/select-arrow-up-white.svg') center right 15px no-repeat; } */
.multi-select .drop-zone { position:absolute; top:33px; left:-1px; width:calc(100% + 2px); background:#FFF; border:1px solid #000; border-radius:0 0 10px 10px; display:none; padding:15px 0; border-top:none; max-height:300px; overflow:auto; }
/* .darkmode .filter-drop-area .drop-zone { background:#000; border:1px solid #FFF; border-top:none; } */
.multi-select.open .drop-zone { display:block; padding-right:14px; }
.select-group { padding:0 10px; }
.select-group span { font-size:15px; font-family: 'HelveticaNow-Regular', sans-serif; text-transform:uppercase; cursor:pointer; }
.darkmode .select-group input[type="checkbox"] { background:#FFF; border:1px solid #000; }
.select-group input[type="checkbox"]:focus, .darkmode .select-group input[type="checkbox"]:focus { outline:none; outline-offset:0; }
.darkmode .select-group input[type="checkbox"]::before { background:#000; }
.select-group .checkbox-area { margin-right:10px; margin-bottom:10px; position:relative; top:2px; cursor:pointer; }
.select-group .checkbox-area input { cursor:pointer;}


/* Search */
#searchoverlay { display:none; position:fixed; top:0; left:0; background:#FFF; height:100%; width:100%; z-index:20; overflow:auto; padding-top:150px; }
#searchoverlay .close-search { display:block; height:40px; width:40px; position:absolute; top:40px; right:40px; background:url('../imgs/icon-close-modal.svg') center center no-repeat; cursor:pointer; }
#searchoverlay .content { position:relative; }
#searchoverlay .search-term-area { border-bottom:1px solid #000;}
#searchoverlay .search-term-area input { width:100%; font-size:62px; line-height:1em; padding:0; border:none; background:none; font-family:'bnpp_sansregular', sans-serif; }
#searchoverlay .search-feedback { margin-top:30px; margin-bottom:0; }
#searchoverlay .search-results { padding-bottom:100px; }


.search-grid { padding-top:30px; display:grid;grid-template-columns:repeat(4, minmax(0, 1fr)); /*grid-template-columns:repeat(auto-fit, minmax(160px,200px));*/ grid-gap:16px; }
/* .search-grid .grid-item { display:block; width:100%; height:0; padding-bottom:100%; position:relative; }
.search-grid .grid-item .bubble { position:absolute; top:0; left:0; display:block; height:100%; width:100%; border-radius:50%; background:#999; border:3px solid #FFF; text-decoration:none; transition:background-color 0.4s ease, scale 0.4s ease; }
.search-grid .grid-item .bubble .inner { height:100%; width:100%; border-radius:50%; color:#FFF; text-align:center; display:flex; justify-content:center; align-items:center; font-family:'bnpp_sans_condensedregular', sans-serif; font-weight:normal; font-style:normal; font-size:24px; line-height:1.1em; padding:5%; } */

.search-grid .tile { display:grid; justify-items:start; align-items:start; position:relative; text-decoration:none; color:#000; overflow:hidden; padding:10px 16px; text-transform:uppercase; min-height:80px; }
.search-grid .tile .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); }
.search-grid .tile .title { position:relative; line-height:1.2em; }
.search-grid .tile img { position:absolute; bottom:10px; right:16px; height:20px; }
.search-grid .tile .blob { display:block; position:absolute; top:151%; right:-47%; width:96%; aspect-ratio:1 / 1; border-radius:50%; background:rgba(255,255,255,0.25); transform:translateY(-50%) scale(1); transform-origin:right center; pointer-events:none; transition:transform 0.4s ease; will-change:transform; }
.search-grid .tile--finance, .search-grid .tile--health, .search-grid .tile--mind, .search-grid .tile--family { color:#FFF; }

/* grow the circle to cover the whole tile */
.search-grid .tile:hover { color:#000; }
.search-grid .tile--finance:hover, .search-grid .tile--health:hover, .search-grid .tile--mind:hover, .search-grid .tile--family:hover { color:#FFF; }
.search-grid .tile:hover .blob {
	/* scale big enough to overshoot width (tweak if your columns are very wide) */
	transform: translateY(-50%) scale(2.25);
}

.related-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); /*grid-template-columns:repeat(auto-fit, minmax(160px,200px));*/ grid-gap:16px; margin-bottom:60px; }
.related-item { text-decoration:none; }
.related-grid .tile { display:grid; justify-items:start; align-items:start; position:relative; text-decoration:none; color:#000; overflow:hidden; padding:10px 16px; text-transform:uppercase; min-height:80px; }
.related-grid .tile .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); }
.related-grid .tile .title { position:relative; line-height:1.2em; }
.related-grid .tile img { position:absolute; bottom:10px; right:16px; height:20px; }
.related-grid .tile .blob { display:block; position:absolute; top:151%; right:-47%; width:96%; aspect-ratio:1 / 1; border-radius:50%; background:rgba(255,255,255,0.25); transform:translateY(-50%) scale(1); transform-origin:right center; pointer-events:none; transition:transform 0.4s ease; will-change:transform; }
.related-grid .tile--finance, .related-grid .tile--health, .related-grid .tile--mind, .related-grid .tile--family { color:#FFF; }

.related-grid .tile:hover { color:#000; }
.related-grid .tile--finance:hover, .related-grid .tile--health:hover, .related-grid .tile--mind:hover, .related-grid .tile--family:hover { color:#FFF; }
.related-grid .related-item:hover .blob {
	/* scale big enough to overshoot width (tweak if your columns are very wide) */
	transform: translateY(-50%) scale(2.25);
}

.tile-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); grid-gap:16px; }
.tile-grid .tile { display:block; position:relative; }
.tile-grid .tile .overlay { display:block; position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(to bottom, rgba(0,0,0,0), #000); color:#FFF; padding:15px 10px; }
.tile-grid .tile .overlay .title { display:block; font-size:20px; }
.tile-grid .tile .overlay .subtitle { display:block; font-size:16px; line-height:1.2em; }


/* Modal panel */
.mfp-close-btn-in .mfp-close { display:block; height:32px; width:32px; background:url('../imgs/icon-close-modal-white.svg') center center no-repeat; top:-45px; right:2px; }
.mfp-close-btn-in .mfp-close { color:#000; }
.mfp-iframe-holder .mfp-content { max-width:90%; }
.mfp-iframe-scaler { height:80vh; padding-top:0; }
.modal-panel { position:relative; overflow:hidden; border:1px solid #FFF; background:#000; border-radius:10px; background:#FFF; margin:15px auto; width:100%; max-width:790px; }
.mfp-iframe-scaler iframe { border:5px solid #FFF;}


/* Cookie consent */
.hidecookies { display:none; }
.cookie-overlay { display:none; position:fixed; top:0; left:0; height:100%; width:100%; background:rgba(11, 11, 11, 0.6); z-index:999999; }
.cookie-header-bar { position:fixed; bottom:0; left:0; width:100%; padding:40px 0; background:#000; color:#FFF; }
.cookie-header-bar .button { border:1px solid #FFF; display:inline-block; margin:5px 0 5px 20px; font-size:17px; cursor:pointer; }
.cookie-header-bar .button:hover { background:#FFF; color:#000; }
.cookie-modal .mfp-close { display:none; }
.cookie-modal .panel-content { padding-top:0; }
.cookie-modal .cookie-group { border-bottom:1px solid #000; padding-top:15px; }
.darkmode .cookie-modal .cookie-group { border-bottom:1px solid #FFF; }
.cookie-modal h6 { margin-bottom:5px; }
.cookie-modal p { margin-bottom:15px; }
/* Cookie toggle switch */
.cookie-modal .toggle-area { display:inline-block; border:1px solid #000; width:71px; height:31px; line-height:29px; border-radius:17px; position:relative; background:#FFF; vertical-align:middle; margin-top:-4px; transition:all 0.4s ease; }
.darkmode .cookie-modal .toggle-area { background:#000; border:1px solid #FFF; }
.cookie-modal .toggle-area .indicator { border-radius:50%; background:#000; display:block; height:23px; width:23px; position:absolute; left:4px; top:3px; transition:all 0.4s ease; }
.darkmode .cookie-modal .toggle-area .indicator {  background:#FFF; }
.cookie-modal .toggle-area .on-text { display:none; position:absolute; left:10px; top:3px; line-height:23px; color:#000; }
.cookie-modal .toggle-area .off-text { display:block; position:absolute; right:10px; top:3px; line-height:23px; color:#000; }
.darkmode .cookie-modal .toggle-area .on-text, .darkmode .cookie-modal .toggle-area .off-text { color:#FFF; }
.cookie-modal .toggle-area.on .on-text { display:block; position:absolute; }
.cookie-modal .toggle-area.on .off-text { display:none; position:absolute; }
.cookie-modal .toggle-area.on .indicator { left:42px; }
.cookie-modal .toggle-area.disabled { opacity:0.6; pointer-events:none; }
.cookie-modal .button-area { padding-top:30px; padding-bottom:20px; }
.cookie-modal .button-area .button { margin-left:0; margin-right:20px; }


@media (max-width:1100px){
	.content-grid .bubble { height:150px; width:150px;padding:10px; margin-left:-75px; margin-top:-75px; }
	.content-grid .bubble .inner { font-size:20px; line-height:1.1em; padding:10%; }
}

@media (max-width:970px){
	body { font-size:16px; line-height:1.42em; }
	header .search-open-btn { font-size:22px; }
	header .menu-row a { font-size:14px; }
	.hero-block h1 { font-size:50px; }
	.button { font-size:13px; height:28px; line-height:28px; }
	.hero-block .mrk2 { width:70px; left:-35px; }
	.hero-block .mrk { width:85px; }
	.swiper-button-prev, .swiper-button-next { background-size:auto 30px; }
	#tab-menu a { font-size:15px; height:85px; width:85px; }
	.section-title { padding-top:8px; padding-bottom:18px; font-size:14px; }
	.slider .sliderswiper .swiper-slide .tag { font-size:17px; }
	.slider .sliderswiper .swiper-slide .overlay .title { font-size:25px; }
	.tile-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
	.tile-grid .tile .overlay .title { font-size:18px; }
	.tile-grid .tile .overlay .subtitle { font-size:15px; }
	.mosaic__grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}


/* Medium */
@media (max-width:768px){
	/* 
	* iPad mini 6th Gen 
	*/
	header .menu-row .right-menu { float:initial; text-align:left; }
	header .logo { margin:14px 0; }
	header .logo img { height:30px; }
	header .bnpp-logo { top:18px; }
	header .bnpp-logo img { height:20px; }
	.hero-block h1 { font-size:36px; }
	.hero-block .hero-img { margin-top:105px; }
	.hero-block .mrk2 { display:none; }
	.slider .sliderswiper .swiper-slide .tag { font-size:14px; padding:5px 10px; }
	.slider .sliderswiper .swiper-slide .overlay { padding:10px; }
	.slider .sliderswiper .swiper-slide .overlay .title { font-size:20px; line-height:1.2em; }
	.slider .sliderswiper .swiper-slide .overlay .subtitle { font-size:14px; line-height:1.2em; }
	.slider .swiper-button-next, .slider .swiper-button-prev { background-size:auto 30px; }
	.slider .swiper-button-next { right:10px; }
	.slider .swiper-button-prev { left:10px; }
	.tile-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
	h1 { font-size:36px; line-height:1.2em; }
	.related-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
	
	
}

/* Small */
@media (max-width:576px){
	/* 
	* iPhone 13 Pro Max
	* iPhone 13 Mini
	* iPhone SE
	*/
	.tile-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.tile-grid .tile .overlay .title {  font-size:16px; line-height:1.2em; }
	.tile-grid .tile .overlay .subtitle {  font-size:14px; line-height:1.2em; }
	.mosaic__grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	.related-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
	
	
}

/* Small */
@media (max-width:476px){
	/* Page icon block */
	
}

/* Extra small */
@media (max-width:372px){
	/* 
	* iPod touch
	*/
	
	
}