/*=============================================================================

CSS RESET

=============================================================================*/

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp {
	border: 0;
	margin: 0;
	/* padding: 0; */
	font-size: 100%;
	zoom: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
	display: block;
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote {
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	line-height: normal;
	font-weight: normal;
}

a {
	text-decoration: none;
	outline: none;
	cursor: pointer;
}

b, strong {
	font-weight: bold;
}

img {
	color: transparent;
	font-size: 0;
	vertical-align: middle;
	border: none;
	-ms-interpolation-mode: bicubic;
	max-width: 100%;
	height: auto !important;
	border-radius: var(--radius-lg);
}

ul, li {
	display: list-item;
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td, caption {
	font-weight: normal;
	vertical-align: top;
	text-align: left;
}

svg {
	overflow: hidden;
}

input[type="checkbox"] {
	margin: 0 4px 0 0;
	width: 13px;
	height: 13px;
	padding: 0;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

input, textarea, select {
	outline: none;
	margin: 0;
	font-family: inherit;
}

textarea {
	overflow: auto;
	resize: none;
}

input:focus, select:focus, textarea:focus {
	outline: none;
}


/*=============================================================================

VARIABLES

=============================================================================*/

:root {

	/* Color definitions */
	--color-white: #fff;
	--color-white-10: rgba(255, 255, 255, .1);
	--color-white-20: rgba(255, 255, 255, .2);
	--color-white-30: rgba(255, 255, 255, .3);
	--color-white-40: rgba(255, 255, 255, .4);
	--color-white-50: rgba(255, 255, 255, .5);
	--color-white-60: rgba(255, 255, 255, .6);
	--color-white-70: rgba(255, 255, 255, .7);
	--color-white-80: rgba(255, 255, 255, .8);
	--color-white-90: rgba(255, 255, 255, .9);
	--color-black: #000;
	--color-black-10: rgba(0, 0, 0, .1);
	--color-black-20: rgba(0, 0, 0, .2);
	--color-black-30: rgba(0, 0, 0, .3);
	--color-black-40: rgba(0, 0, 0, .4);
	--color-black-50: rgba(0, 0, 0, .5);
	--color-black-60: rgba(0, 0, 0, .6);
	--color-black-70: rgba(0, 0, 0, .7);
	--color-black-80: rgba(0, 0, 0, .8);
	--color-black-90: rgba(0, 0, 0, .9);
	--color-primary-1: #35BAD3;
	--color-primary-2: #001C55;
	--color-secondary-1: #F3F9FB;
	--color-secondary-2: #EEC643;
	--color-secondary-3: #A4B3B6;
	--color-neutral-light: #F8F9FB;
	--color-neutral-medium: #727880;
	--color-neutral-dark: #363D47;
	--color-stroke: #E7E9ED;
	/* Text Selection */
	--text-selection-color: var(--color-white);
	--text-selection-bg: var(--color-primary-1);
	/* Page elements colors */
	--body-bg-color: var(--color-white);
	--text-color: var(--color-neutral-medium);
	--headings-color: var(--color-black);
	--header-bg: var(--color-white-70);
	--site-nav-links-color-desktop: var(--color-neutral-dark);
	--site-nav-links-hover-color-desktop: var(--color-primary-3);
	--site-nav-bg-mobile: var(--color-neutral-dark);
	--site-nav-links-color-mobile: var(--color-white);
	--site-nav-links-hover-color-mobile: var(--color-primary-3);
	--mobile-nav-button-color: var(--color-neutral-dark);
	--mobile-nav-button-active-color: var(--color-primary-3);

	/* Font definitions */
	--body-font: "Inter", Arial, Helvetica, sans-serif;
	--alt-font: "Montserrat", monospace;
	--h1-size: 5rem;
	--h1-alt-size: 4rem;
	--h2-size: 2.75rem;
	--h3-size: 1.5rem;
	--h4-size: 1.5625rem;
	--h5-size: 1.25rem;
	--h6-size: 1.125rem;
	--h6-size: 1.025rem;
	--p-size: 1.125rem;
	--h1-size-mobile: 2.25rem;
	--h2-size-mobile: 1.85rem;
	--h3-size-mobile: 1.4rem;
	--h4-size-mobile: 1.125rem;
	--h5-size-mobile: 1.125rem;
	--h6-size-mobile: 1.025rem;
	--p-size-mobile: 1rem;
	--mobile-nav-button-size: 60px;
	--site-nav-items-font-size-desktop: 16px;
	--site-nav-items-font-size-mobile: 26px;
	--site-nav-items-font-size-mobile-sm: 18px;
	--site-nav-items-font-weight-desktop: 400;
	--site-nav-items-font-weight-mobile: 300;

	/* Content Fonts */
	--site-nav-items-font-size: var(--site-nav-items-font-size-desktop);
	--site-nav-items-font-weight: var(--site-nav-items-font-weight-desktop);

	/* Spacing */
	--spacing-4: 4px;
	--spacing-8: 8px;
	--spacing-12: 12px;
	--spacing-16: 16px;
	--spacing-20: 20px;
	--spacing-24: 24px;
	--spacing-32: 32px;
	--spacing-40: 40px;
	--spacing-48: 48px;
	--spacing-56: 56px;
	--spacing-64: 64px;
	--spacing-96: 96px;
	--spacing-100: 100px;

	/* Type Spacing */
	--h1-mt: var(--spacing-48);
	--h1-mb: var(--spacing-32);
	--h2-mt: var(--spacing-48);
	--h2-mb: var(--spacing-48);
	--h3-mt: var(--spacing-24);
	--h3-mb: var(--spacing-16);
	--h4-mt: var(--spacing-20);
	--h4-mb: var(--spacing-16);
	--h5-mt: var(--spacing-20);
	--h5-mb: var(--spacing-16);
	--h6-mt: var(--spacing-20);
	--h6-mb: var(--spacing-16);
	--p-mt: var(--spacing-16);
	--p-mb: var(--spacing-8);

	/* Content Spacing */
	--content-max-width-xs: 600px;
	--content-max-width-sm: 760px;
	--content-max-width-md: 960px;
	--content-max-width-lg: 1200px;
	--content-max-width-xl: 1496px;
	--page-min-width: 320px;
	--page-max-width: 2000px;
	--page-side-margin: var(--spacing-24);
	--page-side-padding: var(--spacing-48);
	--block-spacing: var(--spacing-100);
	--block-md-spacing: var(--spacing-48);
	--header-height: var(--spacing-100);
	--site-logo-width: 200px;
	--site-nav-height: var(--spacing-56);
	--site-nav-items-gap-desktop: var(--spacing-48);
	--site-nav-items-gap-mobile: var(--spacing-24);
	--site-nav-items-gap-mobile-sm: var(--spacing-16);
	--site-nav-items-column-gap: var(--site-nav-items-gap-desktop);
	--site-nav-items-row-gap: var(--site-nav-items-gap-mobile);

	/* Border Radius */
	--radius-sm: 5px;
	--radius-md: 10px;
	--radius-lg: 15px;
	--radius-xl: 40px;
	--section-radius: var(--radius-xl);

	/* Shadows */
	--box-shadow-card: 0 16px 32px -8px rgba(12, 12, 13, 0.3);
	--box-shadow-natural: 0 6px 9px rgba(0, 0, 0, 0.2);
	--box-shadow-deep: 0 12px 30px rgba(0, 0, 0, 0.4);
	--box-shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
	--box-shadow-outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
	--box-shadow-crisp: 6px 6px 0px rgba(0, 0, 0, 1);

	/* Buttons */
	--button-height-normal: var(--spacing-48);
	--button-height-sm: var(--spacing-32);
	--button-height-md: var(--spacing-56);
	--button-height-lg: var(--spacing-64);
	--button-height: var(--button-height-normal);
	--botton-font-size-sm: 0.9rem;
	--botton-font-size-normal: 1rem;
	--botton-font-size-md: 1.125rem;
	--botton-font-size-lg: 1.889rem;
	--botton-font-size: var(--botton-font-size-normal);
	--button-font-weight: 500;
	--button-border-width: 2px;
	--button-border-radius: 3px;
	--button-min-width: 200px;

	/* Sections Blocks */
	--block-padding-sm: var(--spacing-20);
	--block-padding-md: var(--spacing-64);
	--block-padding-lg: var(--spacing-100);
	--block-padding: var(--block-padding-lg);


	/* Form Elements */
	--form-placeholder-color: var(--color-white-50);
	--form-element-font-size: 1rem;
	--form-element-font-weight: 300;
	--form-element-placeholder-color: var(--color-neutral-light);
	--form-element-color: var(--color-white-70);
	--form-element-bg-color: transparent;
	--form-element-border-color: var(--color-white);
	--form-element-focus-color: var(--color-white);
	--form-element-focus-bg-color: transparent;
	--form-element-focus-border-color: var(--color-primary-3);
	--form-element-border-width: 1px;
	--form-element-border-radius: var(--radius-md);
	--form-element-padding: var(--spacing-4) var(--spacing-12);
	--form-element-height: var(--spacing-48);
	--form-element-margin-bottom: 0;
	--form-textarea-height: 200px;
	--form-textarea-padding: var(--spacing-12);
	--form-label-font-size: 1rem;
	--form-label-font-weight: 300;
	--form-label-color: var(--color-white);
	--form-label-padding: var(--spacing-12) 0 var(--spacing-8);


	/* Transitions */
	--transition-default: all 0.2s ease-out;

	/* Responsive Breakpoints */
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;
	--tabs-nav-height: 84px;
	--tabs-nav-font-size: 1.3rem;
}

/* Bootstrap Overwrite */

.row {
	row-gap: var(--bs-gutter-y);
}

.gx-6, .g-6 {
	--bs-gutter-x: 3rem;
}

.gy-6, .g-6 {
	--bs-gutter-y: 3rem;
}


/* colors */

.white {
	color: var(--color-white);
}

.black {
	color: var(--color-black);
}

.light-grey {
	color: var(--color-grey-10);
}

.medium-grey {
	color: var(--color-grey-30);
}

.dark-grey {
	color: var(--color-grey-90);
}

.color-primary-1 {
	color: var(--color-primary-1);
}

.color-primary-2 {
	color: var(--color-primary-2);
}

.color-primary-3 {
	color: var(--color-primary-3);
}

.color-primary-4 {
	color: var(--color-primary-4);
}

.color-secondary-1 {
	color: var(--color-secondary-1);
}

.color-secondary-2 {
	color: var(--color-secondary-2);
}

.color-neutral-medium {
	color: var(--color-neutral-medium);
}

.color-neutral-dark {
	color: var(--color-neutral-dark);
}

/* backgrounds */

.bg-white {
	background-color: var(--color-white);
}

.bg-black {
	background-color: var(--color-black);
}

.bg-light {
	background-color: var(--color-light);
}

.bg-color-primary-1 {
	background-color: var(--color-primary-1);
}

.bg-color-primary-2 {
	background-color: var(--color-primary-2);
}

.bg-color-secondary-1 {
	background-color: var(--color-secondary-1);
}

.bg-color-secondary-2 {
	background-color: var(--color-secondary-2);
}

.bg-gradient {}

.image-radius {
	border-radius: var(--radius-lg);
}

/*=============================================================================

TYPOGRAPHY

=============================================================================*/

::selection {
	color: var(--text-selection-color);
	background: var(--text-selection-bg);
	text-shadow: none;
}

::-webkit-selection {
	color: var(--text-selection-color);
	background: var(--text-selection-bg);
	text-shadow: none;
}

::-moz-selection {
	color: var(--text-selection-color);
	background: var(--text-selection-bg);
	text-shadow: none;
}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}

body {
	font: 16px/1.5 var(--body-font);
	background: var(--body-bg-color);
	color: var(--text-color);
	text-align: left;
	font-optical-sizing: auto;
	font-variation-settings: "wdth"100;
}

a, img, svg, input, select, textarea, .transition, button, .button, :before, :after {
	transition: var(--transition-default);
}


a:active, .button:active, button:active {
	-webkit-transition: all 0.05s ease-out;
	-moz-transition: all 0.05s ease-out;
	transition: all 0.05s ease-out;
}

.no-transition {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

a {
	color: var(--color-primary-1);
}

a:hover {
	text-decoration: none;
	outline: none;
}

a:active, a:focus {
	outline: none;
}



/* Tyopgraphy Elements*/

h1, h2, h3, h4, h5, h6 {
	color: var(--headings-color);
}

h1, h2, h3 {
	line-height: 1.1;
}

h4, h5, h6 {
	line-height: 1.4;
}

h1 {
	font-size: var(--h1-size);
	font-family: var(--alt-font);
	font-weight: bold;
	line-height: 1;
	letter-spacing: -1.8px;
	margin-top: var(--h1-mt);
	margin-bottom: var(--h1-mb);
}

h1.alt {
	font-size: var(--h1-alt-size);
	letter-spacing: -1.2px;
}

h1 em {
	font-weight: 400;
	font-style: italic;
	display: inline-block;
}

h2 {
	font-size: var(--h2-size);
	font-family: var(--alt-font);
	line-height: 1.25;
	margin-bottom: var(--spacing-48);
	margin-top: var(--spacing-48);
	letter-spacing: -1.4px;
	margin-top: var(--h2-mt);
	/* text-transform: uppercase; */
	font-weight: 400;
}

h2:first-child {}

h3 {
	font-size: var(--h3-size);
	font-family: var(--alt-font);
	line-height: 1.38;
	color: var(--color-black);
	letter-spacing: -0.4px;
	font-weight: 700;
	margin-top: var(--h3-mt);
	margin-bottom: var(--h3-mb);
}

h4 {
	font-size: var(--h4-size);
	margin-top: var(--h4-mt);
	margin-bottom: var(--h4-mb);
	color: var(--color-neutral-medium);
	line-height: 1.35;
}

h5 {
	font-size: var(--h5-size);
	margin-bottom: var(--spacing-20);
	color: var(--color-neutral-medium);
	font-weight: 500;
	line-height: 1.5;
	margin-top: var(--h5-mt);
	margin-bottom: var(--h5-mb);
	letter-spacing: 0.5px;
}

h6 {
	font-size: var(--h6-size);
	letter-spacing: .5px;
	font-weight: 400;
	margin-top: var(--h6-mt);
	margin-bottom: var(--h6-mb);
	color: var(--color-neutral-medium);
}

h6.mt-0 {}

p {
	font-size: var(--p-size);
	line-height: 1.5;
	font-weight: 400;
	margin-bottom: var(--p-mb);
	color: var(--text-color);
	letter-spacing: .2px;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	margin-top: 0;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child {
	margin-bottom: 0;
}

.font-thin {
	font-weight: 100
}

.font-light {
	font-weight: 300
}

.font-normal {
	font-weight: 400
}

.font-medium {
	font-weight: 600
}

.font-bold {
	font-weight: 700
}

.uppercase {
	text-transform: uppercase;
}

.normalcase {
	text-transform: none;
}

.lowercase {
	text-transform: lowercase;
}

.underline {
	text-decoration: underline;
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}


/* images */

figure.image {
	position: relative;
}

.image figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: var(--spacing-48) var(--spacing-32);
}

.image:before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 10px;
	background: var(--color-secondary-2);
}

.image.dash-b-l:before {
	bottom: 0;
	left: 0;
}

.image.dash-b-r:before {
	bottom: 0;
	right: 0;
}

.image.dash-t-l:before {
	top: 0;
	left: 0;
}

.image.dash-t-r:before {
	top: 0;
	right: 0;
}

.image img {
	width: 100%;
}

.image figcaption h3 {
	margin-bottom: var(--spacing-8);
}

.image figcaption h5 {
	margin: 0;
}



/* lists */

.simple-list {
	margin-bottom: var(--p-mb);
	margin-top: var(--p-mt);
	padding: 0;
}

.simple-list li {
	padding-left: var(--spacing-20);
	margin-bottom: 10px;
	position: relative;
}

.simple-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 4px;
	height: 4px;
	background: #1080f2;
	border-radius: 100%;
}

.simple-list.white li:before {
	background: var(--color-white);
}

.check-list {
	font-size: 1rem;
	padding: 0;
}

.check-list li {
	padding-left: 30px;
	margin-bottom: 10px;
	position: relative;
	font-size: inherit;
}

.check-list li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	background: url(../images/blue-checkmark.svg) no-repeat;
	background-size: contain;
}


.ordered-list {
	counter-reset: section;
	list-style-type: none;
	margin-bottom: 30px;
}

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

.ordered-list li:before {
	counter-increment: section;
	content: counters(section, ".") ")";
	margin-right: 8px;
}


/* Quotes */

/* quotes */

.quote {
	padding: var(--spacing-48) var(--spacing-24) var(--spacing-48) var(--spacing-128);
	background: var(--color-main);
	color: var(--color-white);
	border-radius: var(--border-radius-sm);
	position: relative;
}

.quote:before {
	content: "";
	width: 150px;
	height: 103px;
	display: block;
	position: absolute;
	left: -37px;
	top: -8px;
	background: url(images/quote-icon.svg);
}

.quote blockquote {
	margin: 0;
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	font-size: 1.5em;
	margin-bottom: var(--spacing-24);
	letter-spacing: 0.5px;
}

.quote cite {
	font-family: var(--headline-font);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 1.375em;
	opacity: .7;
}


.qoute2 {
	position: relative;
	margin: var(--spacing-24) 0;
	padding-left: 100px;
	padding-right: var(--spacing-32);
}

.qoute2:before {
	content: "";
	position: absolute;
	left: var(--spacing-16);
	top: calc(var(--spacing-16)*-1);
	background: url(images/icon-quote.svg) no-repeat;
	background-size: contain;
	width: 62px;
	height: 50px;
}

.qoute2 blockquote {
	color: var(--color-primary-2);
	font-family: var(--alt-font);
	font-size: 2rem;
	margin-bottom: var(--spacing-16);
	line-height: 1.35;
	letter-spacing: -0.7px;
}

.qoute2 cite {
	color: var(--color-neutral-dark);
	letter-spacing: 1px;
	font-size: 1.25rem;
}


/* Images */

.images-group figure {
	height: 100%;
}

.images-group figure img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}


/* Tables */

.simple-table {
	width: 100%;
}

.simple-table th, .simple-table td {
	padding: 5px 10px;
}

.simple-table th {}

.simple-table td {}


/* Responsive videos */

.responsive-video {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 56%;
	border-radius: var(--radius-lg);
}

.responsive-video iframe, .responsive-video video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.responsive-video.aspect-4by3 {
	padding-bottom: 75%;
}

.responsive-video.aspect-portrait {
	padding-bottom: 142%;
}

.responsive-video video {
	object-fit: cover;
}

/* Popup youtube */

.popup-youtube {
	position: relative;
	display: block;
	overflow: hidden;
}

.popup-youtube img {
	display: block;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.popup-youtube:hover img {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);

}

.popup-youtube:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background: rgba(255, 255, 255, 0.3);
	z-index: 9;
}

.popup-youtube:hover:before {
	width: 100%;
}

.popup-youtube:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 48px;
	margin-left: -34px;
	margin-top: -24px;
	background: url(images/youtube-play-button.png) no-repeat center center;
	background-size: contain;
	z-index: 10;
}


/* Maps */

.google-map {
	background: #ccc;
	position: relative;
	height: 500px;
}

.google-map iframe {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* Buttons */

button, button:active, button:focus {
	cursor: pointer;
	outline: none;
}

.button {
	--button-height: var(--button-height-normal);
	--botton-font-size: var(--botton-font-size-normal);
	height: var(--button-height);
	line-height: calc(var(--button-height) - 2*var(--button-border-width));
	border-radius: var(--button-height);
	border: var(--button-border-width) solid;
	padding: 0 var(--spacing-20);
	font-size: var(--botton-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: 0.5px;
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	position: relative;
	-webkit-appearance: none;
	text-decoration: none;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	column-gap: var(--spacing-8);
	justify-content: center;
}

.button .selected-text, .button .default-text {
	display: inline-flex;
	align-items: center;
}

.button .selected-text, .button.selected .default-text {
	display: none;
}

.button.selected .selected-text {
	display: inline-flex;
}

.button svg {
	fill: currentColor;
}

.button.size-sm {
	--button-height: var(--button-height-sm);
	--botton-font-size: var(--botton-font-size-sm);
}

.button.size-md {
	--button-height: var(--button-height-md);
	--botton-font-size: var(--botton-font-size-md);
}

.button.size-lg {
	--button-height: var(--button-height-lg);
	--botton-font-size: var(--botton-font-size-lg);
}

.button.margin-left {
	margin-left: var(--spacing-12);
}

.button.margin-right {
	margin-right: var(--spacing-12);
}

button.button, input[type="button"] {
	line-height: normal;
}

.button.wider {
	padding: 0 var(--spacing-32);
}

.button.min-width {
	min-width: var(--button-min-width);
}

.button.full-width {
	width: 100%;
	text-align: center;
	justify-content: center;
}


.button.button-radius {
	border-radius: var(--button-border-radius);
}

.button.button-primary {
	background: var(--color-primary-1);
	border-color: var(--color-primary-1);
	color: var(--color-white);
}

.button.button-primary:hover {
	background: var(--color-primary-2);
	border-color: var(--color-primary-2);
	color: var(--color-secondary-2);
}

.button.button-primary-inverted {
	background: var(--color-primary-3);
	color: var(--color-neutral-dark);
	border-color: var(--color-primary-3);
}

.button.button-primary-inverted:hover {
	background: var(--color-neutral-dark);
	border-color: var(--color-neutral-dark);
	color: var(--color-primary-3);

}

.button.button-secondary {
	background: var(--color-secondary-2);
	color: var(--color-primary-2);
	border-color: var(--color-secondary-2);
}

.button.button-secondary:hover {
	background: var(--color-primary-2);
	color: var(--color-secondary-2);
	border-color: var(--color-primary-2);
}

.button.button-primary-outline {
	background: transparent;
	color: var(--color-primary-1);
	border-color: var(--color-primary-1);
}

.button.button-primary-outline:hover {
	border-color: var(--color-primary-1);
	background: var(--color-primary-1);
	color: var(--color-white);
}

.button.button-secondary-outline {
	background: transparent;
	color: var(--color-secondary-2);
	border-color: var(--color-secondary-2);
}

.button.button-secondary-outline:hover {
	background: var(--color-secondary-2);
	color: var(--color-primary-2);
}

.button.button-plain {
	background: none;
	padding: 0;
	border: none;
	color: var(--color-secondary-2);
}

.button.button-plain:hover {}

.buttons-group .button {
	margin: 0 var(--spacing-12);
}

.button .button-arrow {
	width: var(--spacing-20);
	fill: currentColor;
	position: relative;
	top: -1px;
}

.button:hover .button-arrow {
	transform: translateX(4px);
}

.button svg {
	fill: currentcolor;
}


/* forms */

form {
	margin: 0 auto var(--spacing-48);
}

form label {
	display: block;
	padding: var(--form-label-padding);
	color: var(--form-label-color);
	font-size: var(--form-label-font-size);
	font-weight: var(--form-label-font-weight);
	letter-spacing: 0.5px;
}

label .required-star {
	color: var(--color-white);
	margin-left: var(--spacing-4);
}

form .form-row {
	display: block;
	margin-bottom: var(--spacing-20);
}

form .form-button {
	margin-top: var(--spacing-32);
}

input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select, textarea {
	background: var(--form-element-bg-color);
	color: var(--form-element-color);
	border: var(--form-element-border-width) solid var(--form-element-border-color);
	border-radius: var(--form-element-border-radius);
	padding: var(--form-element-padding);
	height: var(--form-element-height);
	max-width: 100%;
	width: 100%;
	font-size: var(--form-element-font-size);
	font-weight: var(--form-element-font-weight);
	margin-bottom: var(--form-element-margin-bottom);
	vertical-align: top;
}

textarea {
	height: var(--form-textarea-height);
	width: 100%;
	padding: var(--form-textarea-padding);
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
	border-color: var(--form-element-focus-border-color);
	color: var(--form-element-focus-color);
	background: var(--form-element-focus-bg-color);
}

select[multiple] {
	height: var(--form-textarea-height);
}

::placeholder {
	color: var(--form-placeholder-color);
}

:focus::placeholder {
	color: var(--form-placeholder-color);
}



.custom-file-input {
	color: transparent;
}

.custom-file-input::-webkit-file-upload-button {
	visibility: hidden;
	display: none;
}

.custom-file-input::before {
	content: 'Choose file...';
	display: inline-block;
	border: none;
	padding: var(--form-element-padding);
	outline: none;
	white-space: nowrap;
	user-select: none;
	cursor: pointer;
	font-weight: var(--form-element-font-weight);
	font-size: var(--form-element-font-size);
	border-radius: var(--form-element-border-radius);
	background: var(--form-element-bg-color);
	color: var(--form-element-color);
	font-weight: var(--form-element-font-weight);
	margin: var(--form-element-margin-bottom);
}

.custom-file-input:hover::before {}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	padding-right: 50px;
	background: url(images/drop-down-arrow.svg) no-repeat #fff;
	background-position: calc(100% - 25px) center;
	background-size: 19px auto;
}


/* WP CF7 */

:root {
	--wpcf7-success: var(--color-primary-3);
	--wpcf7-warning: #ffa500;
	--wpcf7-danger: var(--color-primary-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="password"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
}

.wpcf7-form .required {
	color: var(--wpcf7-danger);
}

span.wpcf7-not-valid-tip {
	font-size: 0.9em;
	color: var(--wpcf7-danger);
	position: relative;
	top: var(--spacing-4);
	text-align: left;
	letter-spacing: 0.3px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0;
	border: none;
	color: var(--color-white);
	padding: var(--spacing-12) var(--spacing-16);
	font-size: 1rem;
	line-height: 1.4;
	border-radius: var(--form-element-border-radius);
}

.wpcf7 form.sent .wpcf7-response-output {
	background: var(--wpcf7-success);
	/* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background: var(--wpcf7-danger);
	/* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	background: var(--wpcf7-warning);
	/* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	background: var(--wpcf7-warning);
}


div.wpcf7 img.ajax-loader, div.wpcf7 span.ajax-loader {
	display: block;
	margin: 10px auto 0;
}

/* icons */

i[class~="icon-"] {
	display: inline-block;
	background-repeat: no-repeat;
}

.icon-outline-24 {
	stroke: var(--color-primary-1);
	fill: none;
}


/*=============================================================================

PAGE LAYOUT

=============================================================================*/

.page {
	margin: 0 auto;
	max-width: var(--page-max-width);
	min-width: var(--page-min-width);
	padding: 0 var(--page-side-margin);
	overflow-x: hidden;
}

.wrap {
	position: relative;
	margin: 0 auto;
	padding: 0 var(--page-side-padding);
	max-width: var(--content-max-width-xl);
	width: 100%;
}

.wrap.size-xs {
	max-width: var(--content-max-width-xs);
}

.wrap.size-sm {
	max-width: var(--content-max-width-sm);
}

.wrap.size-md {
	max-width: var(--content-max-width-md);
}

.wrap.size-lg {
	max-width: var(--content-max-width-lg);
}

.wrap.size-xl {
	max-width: var(--content-max-width-xl);
}


.section {
	padding-top: var(--block-spacing);
	padding-bottom: var(--block-spacing);
}

.section.size-md {
	padding-top: var(--spacing-48);
	padding-bottom: var(--spacing-48);
}

.rounded-block {
	border-radius: var(--block-radius);
	z-index: 10;
	position: relative;
}

.rounded-block-top {
	border-radius: var(--block-radius) var(--block-radius) 0 0;
	z-index: 10;
	position: relative;
}

.has-sub-sections {
	display: flex;
	flex-direction: column;
	row-gap: var(--spacing-64);
}

.has-sub-sections.section-gap-md {
	row-gap: var(--spacing-48);
}

.has-sub-sections.section-gap-sm {
	row-gap: var(--spacing-32);
}


.wrap> :last-child {
	margin-bottom: 0;
}

/* spacing */

.gap-10 {
	height: 10px;
}

.gap-20 {
	height: 20px;
}

.gap-30 {
	height: 30px;
}

.gap-40 {
	height: 40px;
}

.gap-50 {
	height: 50px;
}

.gap-60 {
	height: 60px;
}

.gap-70 {
	height: 70px;
}

.gap-80 {
	height: 80px;
}

.gap-90 {
	height: 90px;
}

.gap-100 {
	height: 100px;
}


/* helpers */

.center-block {
	margin-left: auto;
	margin-right: auto;
}

.overflow-hidden {
	overflow: hidden;
}




/*=============================================================================

MAIN STYLES

=============================================================================*/

/* page header */

.site-header {
	/* position: fixed; */
	z-index: 10000;
	min-width: var(--page-min-width);
	left: 0;
	right: 0;
	top: 0;
	/* padding: var(--spacing-16) 0; */
	background: var(--header-bg);
	height: var(--header-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.site-header:hover {
	background: var(--color-white);
}

.header-inside {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header .site-logo {
	display: block;
}

.site-header .site-logo img {
	width: var(--site-logo-width);
}


/* Mobile Nav Button */

.mobile-nav-btn {
	position: absolute;
	width: var(--mobile-nav-button-size);
	height: var(--mobile-nav-button-size);
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	overflow: hidden;
	background-color: transparent;
	transition: all .25s ease-in-out;
	outline: none;
	z-index: 20000;
}

.mobile-nav-btn span {
	position: absolute;
	display: block;
	background-color: var(--mobile-nav-button-color);
	width: 28px;
	height: 2px;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 300ms ease-in-out;
}

.mobile-nav-btn span:nth-child(1) {
	top: 35%;
}

.mobile-nav-btn span:nth-child(2) {
	top: 50%;
}

.mobile-nav-btn span:nth-child(3) {
	top: 65%;
}

body.open-nav .mobile-nav-btn {}

body.open-nav .mobile-nav-btn span {
	background-color: var(--mobile-nav-button-active-color);
}

body.open-nav .mobile-nav-btn span:nth-child(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

body.open-nav .mobile-nav-btn span:nth-child(2) {
	left: 150%;
}

body.open-nav .mobile-nav-btn span:nth-child(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Desktop Menu */

.site-header .site-navigation .menu {
	display: flex;
	flex-wrap: nowrap;
	column-gap: var(--site-nav-items-column-gap);
	row-gap: var(--site-nav-items-row-gap);
	align-items: center;
}

.menu>li {
	position: relative;
}

.site-nav .menu a:not(.button) {
	color: var(--site-nav-links-color-desktop);
	font-weight: var(--site-nav-items-font-weight);
	font-size: var(--site-nav-items-font-size);
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
}

.site-nav .menu>li>a:not(.button) {
	height: var(--site-nav-height);
	line-height: var(--site-nav-height);
}

.site-nav .menu li a:hover, .menu li.current-menu-item>a {
	/* color: var(--site-nav-links-hover-color-desktop); */
}


.site-nav .menu .sub-menu {
	position: absolute;
	z-index: 1000;
	left: 0;
	top: 70px;
	background: #fff;
	background: #1c2732;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	display: none;
}

.site-nav .menu .menu-item:hover>.sub-menu {
	display: block;
}

.site-nav .menu .sub-menu li a {
	display: block;
	padding: 12px 20px;
	color: #ffffff;
	min-width: 200px;
}

.site-nav .sub-menu>li.current-menu-item>a {
	color: var(--color-primary-3);
}

@media only screen and (max-width: 768px) {
	.site-header .site-navigation .menu .mobile-element a {
		transform: translateX(-22%);
		max-height: 200px;
	}
}

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

	:root {
		--site-nav-items-font-size: var(--site-nav-items-font-size-mobile);
		--site-nav-items-font-weight: var(--site-nav-items-font-weight-mobile);
	}

	body.open-nav {
		overflow: hidden;
	}

	.site-header .site-navigation .menu {
		position: fixed;
		flex-direction: column;
		left: 0;
		right: var(--mobile-nav-button-size);
		top: var(--header-height);
		top: 0;
		bottom: 0;
		background: var(--site-nav-bg-mobile);
		padding: var(--header-height) calc(var(--page-side-padding) * 2);
		padding-top: 0;
		transform: translateX(-100%);
		opacity: 0;
		pointer-events: none;
		transition: all 0.15s ease-out;
		box-shadow: var(--box-shadow-deep);
		z-index: 10000;
		justify-content: flex-end;
		align-items: start;
	}

	body.open-nav .site-header .site-navigation .menu {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}

	.site-header .site-navigation .menu .mobile-element {
		content: "";
		width: calc(var(--page-side-padding) * 2);
		/* background: var(--color-primary-3); */
		flex-grow: 1;
		position: relative;
		left: calc(calc(var(--page-side-padding) * -2));
		border-bottom-right-radius: calc(var(--page-side-padding) * 2);
	}

	.site-header .site-navigation .menu .mobile-element a {
		content: "";
		position: absolute;
		left: 100%;
		top: calc(var(--header-height) * .5);
		bottom: calc(var(--header-height) * .5);
		width: calc(var(--page-side-padding) * 4);
		max-height: 300px;
		background: url(images/site-logo-rotated.svg) no-repeat;
		background-size: contain;
		transform: translateX(-19%);
	}



	.site-nav .menu li {
		display: block;
		float: none;
		margin: 0;
		width: 100%;
	}

	.site-nav .menu li a:not(.button) {
		font-size: var(--site-nav-items-font-size);
		font-weight: var(--site-nav-items-font-weight);
	}

	.site-nav .menu li a:not(.button) {
		display: block;
		color: var(--site-nav-links-color-mobile);
		height: auto;
		line-height: inherit;
		letter-spacing: 1.2px;
		padding: var(--spacing-8) 0;
	}

	.site-nav .menu .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		background: none;
	}

	.site-nav .menu .sub-menu>.menu-item {
		padding-left: 25px;
	}

	.site-nav .menu .sub-menu li a {
		padding: 9px 20px;
	}

	.site-nav .menu .sub-menu>li.current-menu-item>a {
		color: var(--site-nav-links-color-mobile);
	}
}




/*=============================================================================

PAGES

=============================================================================*/

/* banners */

.header-banner {
	background-repeat: no-repeat;
	background-position: center top;
	background-color: var(--color-primary-2);
	background-size: cover;
	padding: 4% 0;
	height: calc(100vh - var(--header-height) - var(--page-side-margin));
	height: calc(100dvh - var(--header-height) - var(--page-side-margin));
	height: calc(100svh - var(--header-height) - var(--page-side-margin));
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: flex-end;
	border-radius: var(--section-radius);
}

.header-banner .banner-video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.header-banner .banner-video .responsive-video {
	padding-bottom: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.header-banner.banner-overlay:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-primary-1);
	opacity: 0.5;
	z-index: 1;
}

.header-banner>.wrap {
	position: relative;
	z-index: 10;
}

.header-banner.banner-science {
	background-image: url(../images/corridor/banner-corridor-science.jpg);
}

.header-banner.banner-conservation {
	background-image: url(../images/corridor/banner-corridor-conservation.jpg);
}

.header-banner.banner-community {
	background-image: url(../images/corridor/banner-corridor-community.jpg);
}

.header-banner.banner-about {
	background-image: url(../images/corridor/banner-corridor-about.jpg);
}

.header-banner.banner-magdalena-science {
	background-image: url(../images/magdalena/banner-magdalena-science.jpg);
	background-position: 35% top;
}

.header-banner.banner-magdalena-conservation {
	background-image: url(../images/magdalena/banner-magdalena-conservation.jpg);
	background-position: 85% top;
}

.header-banner.banner-magdalena-community {
	background-image: url(../images/magdalena/banner-magdalena-community.jpg);
}

.header-banner.banner-magdalena-about {
	background-image: url(../images/magdalena/banner-magdalena-about.jpg);
}

.header-banner.banner-white-science {
	background-image: url(../images/white-sharks/banner-white-shark-science.jpg);
	background-position: 80% top;
}

.header-banner.banner-white-conservation {
	background-image: url(../images/white-sharks/banner-white-shark-conservation.jpg);
	background-position: 85% top;
}

.header-banner.banner-white-community {
	background-image: url(../images/white-sharks/banner-white-shark-community.jpg);
}

.header-banner.banner-white-about {
	background-image: url(../images/white-sharks/banner-white-shark-about.jpg);
}

.header-banner .banner-buttons {
	display: flex;
	column-gap: var(--spacing-32);
}


/* Tabs Nav */

.tabs-navigation {
	position: relative;
	padding: var(--spacing-64) 0 var(--spacing-100);
	background: var(--Tabs-BG-Shadow, radial-gradient(45.12% 19.15% at 48.59% 57.45%, var(--Colors-Primary-Variant, rgba(0, 28, 85, 0.63)) 0%, rgba(0, 28, 85, 0.00) 100%));
}

.tabs-navigation .tabs {
	background: var(--color-primary-2);
	display: flex;
	column-gap: var(--spacing-12);
	border-radius: var(--tabs-nav-height);
	position: relative;
	justify-content: space-evenly;
	padding: 0;
}

.tabs-navigation .tab-item {
	/* width: 25%; */
	text-align: center;
	opacity: .4;
	transition: all .25s ease-out;
}

.tabs-navigation .tab-item:hover, .tabs-navigation .tab-item.current-tab-item {
	opacity: 1;
}

.tabs-navigation .tab-item.current-tab-item a {
	color: var(--color-secondary-2);
}

.tabs-navigation .tab-item a {
	display: block;
	height: var(--tabs-nav-height);
	line-height: var(--tabs-nav-height);
	font-family: var(--body-font);
	font-weight: 400;
	font-size: var(--tabs-nav-font-size);
	color: var(--color-white);
	padding: 0 var(--spacing-20);
	white-space: nowrap;
}

.tabs-navigation .tab-item:hover a {}

.tabs-navigation .tab-highlight {
	position: absolute;
	z-index: -1;
	font-family: var(--alt-font);
	white-space: nowrap;
	color: var(--color-black);
	opacity: .03;
	font-size: 200px;
	/* font-size: calc(3rem + 9.2vw); */
	font-weight: bold;
	top: 12%;
	left: 0;
	line-height: 1.15;
	letter-spacing: 3px;
	text-transform: lowercase;
}


.section-header {}

.section-header h2 {
	position: relative;
}

.section-header h2:before {
	content: attr(data-header);
	position: absolute;
	left: 0%;
	display: block;
	transform: rotate(90deg);
	transform-origin: left top;
	font-family: var(--alt-font);
	font-weight: 900;
	font-size: 145px;
	color: var(--color-black);
	opacity: .03;
	letter-spacing: 3px;
}

.section-header h2:after {
	content: "";
	position: absolute;
	left: 0;
	width: 64px;
	height: var(--spacing-8);
	bottom: -24px;
	background: var(--color-primary-1);
}

h2 strong {
	display: inline-block;
	margin-right: var(--spacing-12);
	position: relative;
	font-weight: 900;
	letter-spacing: 1px;
}




.section-action {
	border-radius: var(--section-radius);
	background: url(../images/corridor/take-action-bg.jpg) no-repeat center center;
	background-color: var(--color-primary-2);
	background-size: contain;
}

.section-action .action-item {}

.section-action .action-title {
	display: flex;
	align-items: center;
	column-gap: var(--spacing-16);
	color: var(--color-white);
	margin-bottom: var(--spacing-8);
}

.section-action .action-icon {}

.section-action p {
	margin: 0 0 var(--spacing-20);
	color: var(--color-white);
	font-weight: 300;
	font-size: 1rem;
}

.section-action .action-button {}

.card {
	position: relative;
	overflow: hidden;
	background: var(--color-primary-2);
	border-radius: var(--radius-lg);
	padding: var(--spacing-32);
}

.card.full-height {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card.theme-1 .card-number, .card.theme-2 .card-number {
	right: 0;
	left: auto;
}

.card.theme-1 .card-number:before,
.card.theme-2 .card-number:before {
	right: -64px;
	left: auto;
}

.card.theme-1 .card-number:after,
.card.theme-2 .card-number:after {
	right: -40px;
	left: auto;
}

.card.theme-1 .card-number:before,
.card.theme-1 .card-number:after {
	background: var(--color-secondary-2);
}

.card.theme-1 h4 {
	color: var(--color-secondary-2);
}

.card.theme-1 .check-list li:before {
	background-image: url(../images/yellow-checkmark.svg);
}

.card.theme-2 h4 {
	color: var(--color-primary-1);
}

.card h6 {
	color: var(--color-white);
}

.card.theme-1 .check-list, .card.theme-2 .check-list {
	color: var(--color-white);
	margin: var(--spacing-32) 0;
}

.cards-group {}

.cards-group .card {
	height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cards-group .card .card-content {
	flex-grow: 0;
}

.card .card-number {
	position: absolute;
	left: 0;
	top: 0;
	width: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 22px;
	color: var(--color-secondary-2);
	font-family: var(--alt-font);
	font-weight: 600;
}

.card .card-number:before,
.card .card-number:after {
	content: "";
	position: absolute;
	width: 125px;
	height: 125px;
	background: var(--color-primary-1);
	opacity: .15;
	border-radius: var(--radius-sm);
}

.card .card-number:before {
	left: -64px;
	top: -40px;
}

.card .card-number:after {
	left: -40px;
	top: -64px;
}

.card .card-content {
	font-size: 1.275em;
	line-height: 1.35;
	font-weight: 500;
	color: var(--color-primary-1);
	flex-grow: 1;
}


/* Site footer */

.site-footer {
	padding: var(--spacing-48) 0 0;
	text-align: center;
	background: var(--color-white);
}

.site-footer .footer-top {
	display: flex;
	justify-content: space-between;
}

.site-footer .footer-nav {}

.site-footer .menu {
	display: flex;
	align-items: center;
	column-gap: var(--spacing-32);
	row-gap: var(--spacing-16);
	padding: 0;
}

.site-footer .menu li {
	display: block;
}

.site-footer .menu li a:not(.button) {
	color: var(--color-primary-2);
}

.site-footer .menu li a:not(.button):hover {
	color: var(--color-primary-1);
}

.site-footer .footer-logo {
	width: 185px;
	display: inline-block;
	text-align: left;
	color: var(--color-primary-2);
}

.site-footer .footer-logo:hover {
	color: var(--color-primary-1);
}

.back-to {
	font-size: 12px;
	letter-spacing: 0.2px;
	color: var(--color-black-60);
}

.site-footer .footer-logo img {}

.site-footer .footer-copyright {
	font-size: 12px;
	padding: var(--spacing-32) 0;
	color: var(--color-neutral-medium);
	text-align: left;
	border-top: 1px solid var(--color-stroke);
	margin-top: var(--spacing-32);
}

.site-footer .footer-copyright p {
	margin: 0;
	font-size: 14px;
}

.back-to-top {
	width: 60px;
	height: 60px;
	position: fixed;
	bottom: -80px;
	right: var(--page-side-margin);
	z-index: 1000;
	cursor: pointer;
	border-radius: 3px;
	background: url(../images/back-to-top-arrow.svg) no-repeat center 21px;
	background-color: var(--color-primary-2);
	background-size: 24px auto;
	box-shadow: 0 4px 10px 0 rgba(13, 57, 101, 0.17);
	transition: all .2s ease-in-out;
	border-radius: 100%;
}

body.show-back-to-top .back-to-top:hover {
	background-color: var(--color-primary-1);
	background-position: center 19px;
	opacity: 1;
}

body.show-back-to-top .back-to-top {
	bottom: 20px;
}


/* Donations pages */

.shark-selector-container {}

.shark-selector {
	--shark-selector-radius: var(--radius-lg);
	background: var(--color-primary-2);
	border-radius: var(--shark-selector-radius);
	position: relative;
	overflow: hidden;
	transition: var(--transition-default);
	cursor: pointer;
}

.shark-selector-container.hasSelected .shark-selector:not(.selected) {
	opacity: .3;
}

.shark-selector:hover, .shark-selector-container.hasSelected .shark-selector:hover {
	opacity: 1;
}

.shark-selector .shark-name {
	line-height: 70px;
	padding: 0 var(--spacing-20);
	margin: 0;
	color: var(--color-white);
}

.shark-selector:hover .shark-name,
.shark-selector.selected .shark-name {
	color: var(--color-secondary-2);
	transition: var(--transition-default);
}

.shark-selector .shark-info {
	position: relative;
	overflow: hidden;
	border-radius: var(--shark-selector-radius);
}

.shark-selector .shark-info:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* background: var(--color-secondary-2); */
	opacity: 0;
}

.shark-selector:hover .shark-info:after,
.shark-selector.selected .shark-info:after {
	opacity: .5;
}

.shark-selector .shark-info img {
	transform: scale(1);
}

.shark-selector:hover .shark-info img,
.shark-selector.selected .shark-info img {
	transform: scale(1.1);
}

.shark-selector .shark-button {
	position: absolute;
	z-index: 10;
	bottom: var(--spacing-16);
	left: var(--spacing-16);
	right: var(--spacing-16);
	transition: var(--transition-default);
	;
	transform: translateY(70px);
	opacity: 0;
}

.shark-selector:hover .shark-button,
.shark-selector.selected .shark-button {
	transform: translateY(0px);
	opacity: 1;
}

.shark-adoption-container {
	margin-top: var(--spacing-48);
}

.shark-adoption-container>* {
	display: none;
}

.shark-adoption-container .shark-adoption-options {}



/* About page */

.photo-credits {}

.photographer {
	display: flex;
	align-items: center;
	column-gap: var(--spacing-24);
	padding-bottom: var(--spacing-24);
	margin-bottom: var(--spacing-24);
	border-bottom: 1px solid var(--color-stroke);
}

.photographer .photographer-picture {
	width: 180px;
}

.photographer .photographer-info {}

.photographer .photographer-name {
	margin-top: 0;
	margin-bottom: var(--spacing-4);
}

.photographer .photographer-company {
	margin-top: 0;
	margin-bottom: var(--spacing-16);
}

.photographer .photographer-website a {
	display: inline-flex;
	align-items: center;
	column-gap: var(--spacing-8);
}



/*=============================================================================

RESPONSIVE

=============================================================================*/


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


@media only screen and (max-width: 1024px) {
	.google-map {
		padding-bottom: 48%;
		height: auto;
		min-height: 300px;
	}

	:root {
		--page-side-padding: var(--spacing-32);
		--tabs-nav-height: 64px;
		--tabs-nav-font-size: var(--p-size);
		--page-side-margin: var(--spacing-8);
	}

	.tabs-navigation .tab-highlight {
		font-size: calc(3rem + 9.2vw);
		top: 39%;
	}

	.site-footer .footer-top {
		flex-direction: column;
		text-align: left;
		row-gap: var(--spacing-32);
	}

	.site-footer .menu {
		flex-direction: column;
		text-align: left;
		align-items: self-start;
	}

}

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

	:root {
		--h1-size: var(--h1-size-mobile);
		--h1-margin-top: var(--spacing-48);
		--h1-margin-bottom: var(--spacing-32);

		--h1-alt-size: var(--h1-size-mobile);
		--h1-alt-margin-top: var(--spacing-48);
		--h1-alt-margin-bottom: var(--spacing-32);

		--h2-size: var(--h2-size-mobile);
		--h2-margin-top: var(--spacing-32);
		--h2-margin-bottom: var(--spacing-24);

		--h3-size: var(--h3-size-mobile);
		--h2-margin-top: var(--spacing-24);
		--h2-margin-bottom: var(--spacing-20);

		--h4-size: var(--h4-size-mobile);
		--h3-margin-top: var(--spacing-24);
		--h3-margin-bottom: var(--spacing-20);

		--h5-size: var(--h5-size-mobile);

		--p-size: var(--p-size-mobile);

		--h1-mt: var(--spacing-32);
		--h1-mb: var(--spacing-24);
		--h2-mt: var(--spacing-24);
		--h2-mb: var(--spacing-20);
		--h3-mt: var(--spacing-24);
		--h3-mb: var(--spacing-20);
		--h4-mt: var(--spacing-20);
		--h4-mb: var(--spacing-16);
		--h5-mt: var(--spacing-20);
		--h5-mb: var(--spacing-16);
		--h6-mt: var(--spacing-20);
		--h6-mb: var(--spacing-16);
		--p-mt: var(--spacing-16);
		--p-mb: var(--spacing-8);


		--page-side-padding: var(--spacing-24);
		--section-radius: var(--spacing-20);
		--block-spacing: var(--block-md-spacing);
		--header-height: var(--spacing-64);
		--site-logo-width: 150px;

		--section-padding: 2.5rem;

	}

	.gy-6, .g-6 {
    	--bs-gutter-y: var(--section-padding);
	}

	img{
		border-radius: var(--radius-md);
	}

	.image:before{
		width: 60px;
		height: 7px;
	}

	.has-sub-sections.section-gap-md, section>.wrap.has-sub-sections{
		row-gap: var(--section-padding);
	}

	.section-header h2:after{
		height: var(--spacing-4);
		bottom: -16px;
	}

	.tabs-navigation {
		margin: var(--spacing-24) 0 var(--spacing-48);
		padding: var(--spacing-8) 0;
		border-radius: var(--tabs-nav-height);
	}

	.image figcaption {
		display: none;
	}


}

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

	:root {
		--page-side-padding: var(--spacing-16);
		--block-radius: var(--spacing-24);
		--site-logo-width: 140px;
		--button-height-normal: 44px;

	}

	.header-banner .banner-buttons {
		flex-direction: column;
		row-gap: var(--spacing-12);
	}



	.tabs-navigation {
		background: var(--color-neutral-light);
		overflow: hidden;
		--fade-gradient-color-begin: rgba(0,28,85,.45);
		--fade-gradient-color-end: rgba(248, 249, 251, 0);
		--fade-gradient-position-begin: 0;
		--fade-gradient-position-end: 100%;
	}

	.tabs-navigation::before,
	.tabs-navigation::after {
		content: "";
		position: absolute;
		top: 0;
		height: 100%;
		pointer-events: none;
		width: 17px;
		z-index: 10;
		opacity: 0;
	}

	/* fade LEFT */
	.tabs-navigation::before {
		left: 0;
		background: linear-gradient(to right,
				var(--fade-gradient-color-begin) var(--fade-gradient-position-begin),
				var(--fade-gradient-color-end) var(--fade-gradient-position-end));
		border-radius: var(--tabs-nav-height) 0 0 var(--tabs-nav-height);
		box-shadow: inset 4px 0px 4px 0 var(--fade-gradient-color-begin);
	}

	/* fade RIGHT */
	.tabs-navigation::after {
		right: 0;
		background: linear-gradient(to left,
				var(--fade-gradient-color-begin) var(--fade-gradient-position-begin),
				var(--fade-gradient-color-end) var(--fade-gradient-position-end));
		box-shadow: inset -4px 0px 4px 0 var(--fade-gradient-color-begin);
		border-radius: 0 var(--tabs-nav-height) var(--tabs-nav-height) 0;
	}

	.tabs-navigation.has-left::before,
	.tabs-navigation.has-right::after {
		opacity: 1;
	}

	.tabs-navigation .tabs {
		display: flex;
		overflow-x: auto;
		padding: 0;
		scroll-snap-type: x mandatory;
		background: none;
		border-radius: 0;
		--tabs-nav-height: 44px;
		padding: 0 var(--spacing-8);
		scroll-padding-left: var(--spacing-8);
		scroll-padding-right: var(--spacing-8);
		gap: var(--spacing-8);
	}

	.tabs-navigation .tabs a {
		white-space: nowrap;
		scroll-snap-align: start;
		border-radius: var(--tabs-nav-height);
		color: var(--color-primary-2);
	}

	.tabs-navigation .tabs .current-tab-item{
	}

	

	.tabs-navigation .tabs .current-tab-item a {
		background: var(--color-primary-2);
	}

	.tabs-navigation .tabs::-webkit-scrollbar {
		display: none;
	}


	.tabs-navigation .tab-highlight {
		display: none;
	}

	.qoute {
		padding-left: 70px;
		padding-right: 0;
	}

	.qoute :before {
		width: 40px;
	}

	.qoute p {
		font-size: 1.6rem;
		margin-bottom: var(--spacing-8);
	}

	.qoute cite {
		font-size: 1rem;
		;
	}

	section:not(.header-banner,
		.section-action)>.wrap,
	.site-header>.wrap,
	.header-banner+.wrap,
	.site-footer>.wrap {
		padding: 0;
	}

}


.donor {
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-sm);
	transition: all 0.2s ease-out;
	filter: grayscale(1);
}

.donor:hover {
	border: 1px solid transparent;
	box-shadow: 0 0 0 8px rgb(53 186 211 / 15%);
	filter: grayscale(0);
}

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

@media only screen and (max-height: 750px) {
	:root {
		--site-nav-items-font-size: var(--site-nav-items-font-size-mobile-sm);
		--site-nav-items-row-gap: var(--site-nav-items-gap-mobile-sm);
	}
}





/*=============================================================================

CSS GRID

=============================================================================*/


.css-grid {
	display: grid;
	grid-auto-rows: 1fr;
}

.css-grid.grid-gap-xs {
	gap: var(--spacing-8);
}

.css-grid.grid-gap-sm {
	gap: var(--spacing-16);
}

.css-grid.grid-gap-md {
	gap: var(--spacing-32);
}

.css-grid.grid-gap-lg {
	gap: var(--spacing-48);
}


.css-grid.grid-col-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.css-grid.grid-col-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.css-grid.grid-col-2 {
	grid-template-columns: 1fr 1fr;
}

.css-grid.grid-col-1 {
	grid-template-columns: 1fr;
}


@media only screen and (min-width: 576px) {
	.css-grid.grid-col-sm-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.css-grid.grid-col-sm-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.css-grid.grid-col-sm-2 {
		grid-template-columns: 1fr 1fr;
	}

	.css-grid.grid-col-sm-1 {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 768px) {
	.css-grid.grid-col-md-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.css-grid.grid-col-md-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.css-grid.grid-col-md-2 {
		grid-template-columns: 1fr 1fr;
	}

	.css-grid.grid-col-md-1 {
		grid-template-columns: 1fr;
	}
}


@media only screen and (min-width: 992px) {
	.css-grid.grid-col-lg-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.css-grid.grid-col-lg-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.css-grid.grid-col-lg-2 {
		grid-template-columns: 1fr 1fr;
	}

	.css-grid.grid-col-lg-1 {
		grid-template-columns: 1fr;
	}
}


@media only screen and (min-width: 1200px) {
	.css-grid.grid-col-xl-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.css-grid.grid-col-xl-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.css-grid.grid-col-xl-2 {
		grid-template-columns: 1fr 1fr;
	}

	.css-grid.grid-col-xl-1 {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 1400px) {
	.css-grid.grid-col-xxl-4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.css-grid.grid-col-xxl-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.css-grid.grid-col-xxl-2 {
		grid-template-columns: 1fr 1fr;
	}

	.css-grid.grid-col-xxl-1 {
		grid-template-columns: 1fr;
	}
}