@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: "Anderson Grotesk";
    src: url(dist/fonts/andersongrotesk-black-webfont.woff2) format("woff2"), url(dist/fonts/andersongrotesk-black-webfont.woff) format("woff");
/*    font-weight: 900;*/
    font-style: normal;
}
html {margin:0 !important;padding:0;scroll-behavior: smooth;}
body {margin:0; padding:0;}
body.logged-in header#site-header {top:0;}
main {background: #d5ded5 url(/wp-content/themes/boi-clean-currents/collage/dist/sky-bg.jpg) center no-repeat fixed;}

.zoomHolder {
	height: 100vh;
}
.pinchzoomer {cursor: all-scroll !important;}
#map {max-width:none;}
@media (pointer: coarse) {
	/* Targets touchscreens like phones and tablets */
	.zoomHolder {
		height: 100dvh;
	}
}
.hamburger-nav {
	background: rgba(0,0,0,.2) url(/wp-content/themes/boi-clean-currents/map-template/img/hamburger.svg) center no-repeat;
	background-size: contain;
	width: 35px;
	height: 35px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 998;
	cursor: pointer;
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,.2);
}
.marker {
	background:linear-gradient(rgba(0, 125, 171, 1), rgba(0, 112, 154, 0.8));
	width: 60px;
	height: 60px;
	display:flex;
	align-items: center;
	justify-content: center;
	border-radius:100%;
	box-sizing:border-box;
	box-shadow: 0px 0px 5px rgba( 0, 0, 0, 1);
}
.marker:hover {
	background:linear-gradient(#00A5E2, #007DAB);
	box-shadow: 0px 0px 1px 2px rgba( 255, 255, 255, 1);
	cursor: pointer;
}
.marker-icon {
	background-image:url(/wp-content/themes/boi-clean-currents/map-template/img/map-icons.svg);
	background-repeat: no-repeat;
	background-size: 1100% 1100%;
	display: block;
	width: 45px;
	height: 45px;
}
.marker label {
		position: absolute;
		left: auto;
		top: 65px;
		text-align: center;
		color: white;
		text-shadow: 0px 0px 5px black;
		font-family: Roboto, Arial, sans-serif;
		font-weight: bold;
		font-size: 13px;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		white-space: nowrap;
	}


/* ====================================
		UI Overlay Buttons
========================================== */ 
.flyouts-ui {
	position: absolute;
	display: flex;
	gap: 5px;
	background-color: rgba(0,0,0,.2);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,.2);
	z-index: 998;
}
.flyouts-ui a, .flyouts-ui a label {cursor: pointer;}
#info-flyout-ui {
	flex-flow: column;
	top: 0px;
	left: 0px;
}
#info-flyout-ui i {
	background: #007DAB center center no-repeat;
	background-size: 25px auto;
}
#info-flyout-ui a:hover i {
	background-color: #0097CF;
}
#cs-flyouts-ui {
	flex-flow: column;
	bottom: 10px;
	left: 10px;
}
#cs-flyouts-ui i {
	opacity: .8;
	background-size: contain;
}
#cs-flyouts-ui a:hover i {
	opacity: 1;
}
.flyouts-ui .ui-button {
	display: flex;
	flex-flow: row;
	align-items: center;
	gap: 10px;
}
#info-flyout-ui .ui-button i {
	display: block;
	width: 45px;
	height: 45px;
}
#cs-flyouts-ui i {
	display: block;
	width: 50px;
	height: 50px;
}
.ui-button label {
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	text-shadow: 0px 0px 5px black;
	text-transform: uppercase;
	font-weight: bold;
	color: white;
	letter-spacing: 0.03em;
}
.ui-button label small {
	text-transform: capitalize;
	font-weight: normal;
}
#principles-btn i {background-image: url(/wp-content/themes/boi-clean-currents/map-template/img/i-list.svg);}
#whitepaper-btn i {background-image: url(/wp-content/themes/boi-clean-currents/map-template/img/i-doc-download.svg);}
#panama-cs-btn i {background-image: url(/wp-content/themes/boi-clean-currents/map-template/img/i-panama-cs.svg);}
#thailand-cs-btn i {background-image: url(/wp-content/themes/boi-clean-currents/map-template/img/i-thailand-cs.svg);}
/*=========END UI OVERLAY BUTTONS=============*/



/* ====================================
		Panel Boxes
====================================== */ 
.panel-box {
	position: absolute;
	right: -500px;
	opacity: 0;
	top: 0;
	height: 100%;
	background: rgba(255,255,255,.8);
	backdrop-filter: blur(20px);
	z-index: 999;
	width: 85%;
	max-width: 500px;
	box-sizing:border-box;
	display:flex;
	flex-flow: column nowrap;
}
.panel-box > .wp-block-group__inner-container {
	overflow: auto;
	scrollbar-color: rgba(255,255,255,.33) rgba(0,0,0,.15);
	scrollbar-width: thin;
}
@media (min-width:481px) {
	.panel-box {padding: 50px;}
}
@media (max-width:480px) {
	.panel-box {padding: 30px;}
}
.panel-box .close {
	background: white url(/wp-content/themes/boi-clean-currents/map-template/img/close.svg) center no-repeat;
	background-size: contain;
	width: 35px;
	height: 35px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 999;
	cursor: pointer;
	border: 0;
	border-radius: 50px;
	opacity: .8;
}
.panel-box .close:hover {
	opacity: 1;
}
.panel-box h2,
.panel-box h3,
.panel-box h4,
.panel-box h5 {
	margin: 0 0 10px 0;
	font-family: Roboto, Arial, sans-serif;
	font-weight: bold;
	color: #004660;
}
.panel-box h2 {font-size: 30px;padding:0;}
.panel-box h3 {font-size: 24px;}
.panel-box h4 {font-size: 20px;}
.panel-box h5 {font-size: 16px;}

.panel-box p, .panel-box li {
	margin: 0 0 10px 0;
	font-size: 16px;
	font-family: Roboto, Arial, sans-serif;
	line-height: 1.5;
}
section.wp-block-group .panel-box p {
	padding: 0;
	font-size: 16px;
}
.panel-box ul {padding-left: 20px;}
.panel-box ul li {list-style: initial;}
.panel-box .numbers > .wp-block-group__inner-container {
	display: flex;
	gap: 5px;
	flex-flow: row wrap;
}
.intersectional {cursor: context-menu;}
.panel-box .intersectional::after {
	content: url(/wp-content/themes/boi-clean-currents/map-template/img/arrow-right-panel-icon.png);
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: -3px auto auto 10px;
	vertical-align: middle;
}
.panel-box .numbers > .wp-block-group__inner-container figure {
	width: 25px;
}

.panel-box.case-study {
	background: rgba(0, 96, 192, 0.90);
}
.panel-box.case-study .gutena-accordion-block__panel-title-inner figure {
	width: 45px;
	flex-shrink: 0;
}
.panel-box.case-study .gutena-accordion-block__panel-title-inner figure,
.panel-box.case-study .gutena-accordion-block__panel-title-inner figure img {
	margin: 0;
}
.panel-box.case-study .gutena-accordion-block__panel-title-inner {
	
}
.panel-box.case-study .gutena-accordion-block>.gutena-accordion-block__panel {
	background-color: white;
}
.panel-box.case-study .gutena-accordion-block>.gutena-accordion-block__panel p {
	color: black;
	font-size: 16px;
}
.case-study .gutena-accordion-block {
	margin-top: 15px;	
}
.panel-box.case-study {
	padding: 30px;
}
.panel-box.case-study h2,
.panel-box.case-study h3,
.panel-box.case-study h4,
.panel-box.case-study h5,
.panel-box.case-study h6,
.panel-box.case-study p {
	color: white;
	margin: 5px 0;
}
.panel-box.case-study h2 {
	font-family: "Anderson Grotesk Black", "AndersonGrotesk-Black";
	font-weight: normal;
	letter-spacing: 0.03em;
	font-size: 30px;
}
.panel-box.case-study h6 {
	font-size: 16px;
}
.panel-box.case-study h5 {
	font-size: 18px;
}
.case-study .feature {
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
#principles {
	background: rgba(0, 70, 96, 0.90);
	max-width: none;
	justify-content: center;
	right: -85%;
}
#principles h2,
#principles h3,
#principles h4,
#principles h5,
#principles h6,
#principles ol,
#principles li,
#principles p {
	color: white;
	max-width: none;
}
#principles h2,
#principles h3,
#principles h4 {
	font-family: "Anderson Grotesk Black", 'AndersonGrotesk-Black';
	font-weight: normal;
	letter-spacing: 0.03em;
	line-height: 1.2;
}
#principles h2 {
	font-size: 48px;
}
@media (max-width: 480px) {
	#principles h2 {
		font-size: 36px;
	}
}
#principles h2 span {
	font-family: "Anderson Grotesk";
	font-weight: Bold;
}
#principles ol {
	padding-bottom: 0;
	font-size: 20px;
}
#principles p {
	font-size: 20px;
}
#principles p.info {
	font-size: 16px;
	padding: 5px 0 5px 35px;
	background-size: auto 25px;
	background-position: left 5px;
	background-repeat: no-repeat;
	background-image: url(/wp-content/uploads/2026/02/i-info.png);
}
#principles ol li {
	list-style: none;
	padding: 5px 0 5px 35px;
	font-size: 20px;
	background-size: auto 25px;
	background-position: left 8px;
	background-repeat: no-repeat;
}
#principles ol li:nth-child(1) {
	background-image: url(/wp-content/uploads/2026/02/Property-11.png);
}
#principles ol li:nth-child(2) {
	background-image: url(/wp-content/uploads/2026/02/Property-12.png);
}
#principles ol li:nth-child(3) {
	background-image: url(/wp-content/uploads/2026/02/Property-13.png);
}
#principles ol li:nth-child(4) {
	background-image: url(/wp-content/uploads/2026/02/Property-14.png);
}
#principles ol li:nth-child(5) {
	background-image: url(/wp-content/uploads/2026/02/Property-15.png);
}
#principles ol li:nth-child(6) {
	background-image: url(/wp-content/uploads/2026/02/Property-16.png);
}
#principles ol li:nth-child(7) {
	background-image: url(/wp-content/uploads/2026/02/Property-17.png);
}
#principles ol li:nth-child(8) {
	background-image: url(/wp-content/uploads/2026/02/Property-18.png);
}
#principles ol li:nth-child(9) {
	background-image: url(/wp-content/uploads/2026/02/Property-19.png);
}
#principles ol li:nth-child(10) {
	background-image: url(/wp-content/uploads/2026/02/Property-110.png);
}

/* Intro Overlay Panel */
#intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	max-height: 100vh;
    z-index: 999;
	padding: 7.5%;
	display: flex;
	align-items:center;
	overflow: auto;
	scrollbar-color: rgba(255,255,255,.33) rgba(0,0,0,.15);
	scrollbar-width: thin;
}
@media (max-height: 600px) {
	#intro {
		display: block;
	}
}

#intro p {padding:0;}
	
#intro>.wp-block-group__inner-container {
	max-width: 1400px;
}
#intro>.wp-block-group__inner-container>.wp-block-column {
	
}
#intro h5 {margin: 20px 0;font-family: "Anderson Grotesk Black", "AndersonGrotesk-Black", Roboto, sans-serif;font-weight: normal;letter-spacing:0.03em;line-height:1.2;}
#intro h1 {
	font-family: "Anderson Grotesk Black", "AndersonGrotesk-Black", Roboto, sans-serif;font-weight: normal;letter-spacing:0.03em;line-height:1.2;
}
#intro .wp-block-buttons .wp-element-button {
	white-space: nowrap;
}
#intro .wp-block-buttons.primary .wp-element-button {
	background-color: #007DAB;
}
#intro .wp-block-buttons.primary .wp-element-button:hover {
	background-color: #0097CF;
}
#intro .wp-block-button.secondary .wp-element-button {
	background: none;
}
#intro .wp-block-button.secondary .wp-element-button:hover {
	background: none;
	text-shadow: 0px 0px 10px #0097CF;
}

#intro .col-right {
	background: url(/wp-content/themes/boi-clean-currents/map-template/img/blue-glow-bg.svg) center center no-repeat;
	background-size: 90% auto;
	overflow: visible;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-self: auto;
	padding-top: 30px;
}
@media (min-width:782px) {
	#intro .col-right {aspect-ratio: 1 / 1;}
}
#intro .col-right:hover {
	background-size: 100% auto;
	transition: .4s;
}
#intro .col-right figure {
	margin-bottom: 20px;
	width: 80px;
}
#start {cursor: pointer;}

@media (max-width: 781px) {
	#intro {
		display: block;
	}
	#intro h1 {font-size: 38px;}
	#intro h5 {font-size: 20px;}
	#intro p {font-size: 16px;}
	#intro .start-buttons {display:none;}
	#intro .cols {gap: 0;margin:0;}
	#intro .col-right {background-size: auto 90%;}
	#intro .col-right:hover {background-size: auto 100%;}
}











/* ==========================
    WEBPAGE Section Styles
============================ */
#handbook > .wp-block-group__inner-container,
#contact > .wp-block-group__inner-container {
	max-width: 1200px;
	padding: 100px 50px;
	margin: 0 auto;
}
@media (max-width: 481px) {
	#handbook > .wp-block-group__inner-container {
		padding: 75px 30px;
	}
}
.wp-element-button {
	background-color:#004660;
	font-family: "Anderson Grotesk Black", "AndersonGrotesk-Black", Roboto, sans-serif;
	font-weight: normal;
	color: white;
	font-size: 18px;
	border-radius: 0;
	padding: 15px 30px;
}
.wp-element-button:hover {
	background-color:#007DAB;
	color: white;
}
#contact {
	background: #004660 url(/wp-content/themes/boi-clean-currents/map-template/img/underwater-turtle.jpg) center no-repeat;
	background-size: cover;
	color: white;
}
#contact h1,
#contact h2,
#contact h3,
#contact h4,
#contact h5,
#contact h6 {
	color: white;
}
#contact .wp-element-button {
	background-color:#007DAB;
}
#contact .wp-element-button:hover {
	background-color:#0097CF;
}
section.wp-block-group p {font-size: 18px;line-height:1.5;}
@media (min-width: 481px) {
section.wp-block-group:not(.marker-panels, .ui-panels) h1 {font-size: 54px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h2 {font-size: 42px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h3 {font-size: 36px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h4 {font-size: 30px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h5 {font-size: 24px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h6 {font-size: 18px;}
}
@media (max-width: 480px) {
section.wp-block-group:not(.marker-panels, .ui-panels) h1 {font-size: 38px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h2 {font-size: 34px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h3 {font-size: 30px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h4 {font-size: 26px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h5 {font-size: 22px;}
section.wp-block-group:not(.marker-panels, .ui-panels) h6 {font-size: 18px;}
}


/* OVERWRITES FOR WORDPRESS THEME */
#site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    /* Smooth slide duration */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The "Out of Sight" state */
header#site-header.header-hidden {
    position: relative !important;
}
body.logged-in header#site-header.header-hidden {
	top: 0;
}
body .is-layout-constrained > :where( :not(.alignleft):not(.alignright):not(.alignfull) ) {
	width: 100%;
}
.panel-box .gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h3, 
.panel-box .gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h4 {
	font-family: Roboto, Arial, sans-serif;
	color: #004660 !important;
	font-weight: bold;
}
.gutena-accordion-block__panel img {margin-bottom:10px;}
.gutena-accordion-block>.gutena-accordion-block__panel {
	border-radius: 10px;
	background-color: rgba(255, 255, 255, .75);
}