:root {
  --color-white: #fff;
  --color-primary-text: #575757;
  --color-error-red: #a70000;

  --color-purple: #744888;
  --color-purple-light: #cbaeee;

  --color-petrol: #003c46;
  --color-petrol-90: #1A5059;
  --color-petrol-70: #4d777e;
  --color-petrol-50: #668a90;
  --color-petrol-40: #d9e2e3;
  --color-petrol-30: #99b1b5;

  --color-petrol-30b: #b2c4c7;
  --color-petrol-10: #e5ebec;

  --color-blue: #0096ff;
  --color-blue-50: #80cbff;
  --color-blue-30: #b2dfff;
  --color-blue-10: #e5f4ff;

  --color-yellow: #ffe500;
  --color-yellow-light: #fff099;
  --color-yellow-10: #fffacc;

  --color-red: #f16545;
  --color-red-light: #e89582;
  --color-red-10: #fce0da;

  --color-green: #0d935e;
  --color-green-light: #0dffad;
  --color-green-10: #dbfff3;

  --color-grey: #c8c8c8;
  --color-grey-light: #eff4f4;
  --color-grey-10: #f0f0f0;

  --breakpoint-xxl: 1400px;
  --breakpoint-xl: 1200px;
  --breakpoint-lg: 992px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 600px;
  --breakpoint-xs: 576px;
}

/*  BRAND COLORS  */
.brand-color-petrol {
  color: var(--color-petrol);
}
.brand-color-blue {
  color: var(--color-blue);
}
.brand-color-yellow-light {
  color: var(--color-yellow-light);
}
.brand-color-yellow {
  color: var(--color-yellow);
}
.brand-color-green-light {
  color: var(--color-green-light);
}
.brand-color-green {
  color: var(--color-green);
}
.brand-color-red-light {
  color: var(--color-red-light);
}
.brand-color-red {
  color: var(--color-red);
}
.brand-color-grey {
  color: var(--color-grey);
}
.brand-color-grey-light {
  color: var(--color-grey-light);
}
.brand-color-petrol-50 {
  color: var(--color-petrol-50);
}
.brand-color-petrol-30 {
  color: var(--color-petrol-30);
}
.brand-color-blue-50 {
  color: var(--color-blue-50);
}
.brand-color-blue-30 {
  color: var(--color-blue-30);
}
.brand-color-white {
  color: var(--color-white);
}


.brand-color-background-blue {
  background-color: var(--color-blue);
  color: var(--color-white);
}
	.brand-color-background-blue h1, 
	.brand-color-background-blue h2, 
	.brand-color-background-blue h3, 
	.brand-color-background-blue h4, 
	.brand-color-background-blue h5, 
	.brand-color-background-blue h6 {
 		color: var(--color-white);
	}
.brand-color-background-yellow-light {
  background-color: var(--color-yellow-light);
}
.brand-color-background-yellow {
  background-color: var(--color-yellow);
  color: var(--color-petrol);
}
	.brand-color-background-yellow h1, 
	.brand-color-background-yellow h2, 
	.brand-color-background-yellow h3, 
	.brand-color-background-yellow h4, 
	.brand-color-background-yellow h5, 
	.brand-color-background-yellow h6 {
 		color: var(--color-petrol);
	}


.brand-color-background-green-light {
  background-color: var(--color-green-light);
}
.brand-color-background-green {
  background-color: var(--color-green);
}
.brand-color-background-red-light {
  background-color: var(--color-red-light);
}
.brand-color-background-red {
  background-color: var(--color-red);
}
.brand-color-background-grey {
  background-color: var(--color-grey);
}
.brand-color-background-grey-light {
  background-color: var(--color-grey-light);
}
.brand-color-background-petrol-50 {
  background-color: var(--color-petrol-50);
}
.brand-color-background-petrol-30 {
  background-color: var(--color-petrol-30);
}
.brand-color-background-blue-50 {
  background-color: var(--color-blue-50);
}
.brand-color-background-blue-30 {
  background-color: var(--color-blue-30);
}
.brand-color-background-blue-10 {
  background-color: var(--color-blue-10);
}
	.brand-color-background-blue-10 h1, 
	.brand-color-background-blue-10 h2, 
	.brand-color-background-blue-10 h3, 
	.brand-color-background-blue-10 h4, 
	.brand-color-background-blue-10 h5, 
	.brand-color-background-blue-10 h6 {
 		color: var(--color-petrol);
	}

.brand-color-background-petrol-10 {
  background-color: var(--color-petrol-10);
}
	.brand-color-background-petrol-10 h1, 
	.brand-color-background-petrol-10 h2, 
	.brand-color-background-petrol-10 h3, 
	.brand-color-background-petrol-10 h4, 
	.brand-color-background-petrol-10 h5, 
	.brand-color-background-petrol-10 h6 {
 		color: var(--color-petrol);
	}

.brand-color-background-white {
  background-color: var(--color-white);
}
	.brand-color-background-white h1, 
	.brand-color-background-white h2, 
	.brand-color-background-white h3, 
	.brand-color-background-white h4, 
	.brand-color-background-white h5, 
	.brand-color-background-white h6 {
 		color: var(--color-petrol-90);
	}

.brand-color-background-petrol {
  background-color: var(--color-petrol);
  color: var(--color-white);
}
	.brand-color-background-petrol h1, 
	.brand-color-background-petrol h2, 
	.brand-color-background-petrol h3, 
	.brand-color-background-petrol h4, 
	.brand-color-background-petrol h5, 
	.brand-color-background-petrol h6 {
 		color: var(--color-white);
	}






/* highlight color */
::selection {
  background: var(--color-green-light);
}



















@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
  .p,
  p {
    font-size: calc(0.55rem + 0.375vw);
    margin-bottom: calc(0.55rem + 0.375vw);
  }
}

.vl {
  border-left: 2px solid var(--color-green-light);
  padding-left: 2%;
}

.p-xs {
  font-size: 10px;
  line-height: 16px;
  font-weight: 400;
  font-family: "Lexend Deca";
  font-style: normal;
}

.p-large {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  font-family: "Lexend Deca";
  font-style: normal;
}

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

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

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

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

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

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

.bg-grey-white-gradient {
  background: linear-gradient(0deg, #ccd8da, var(--color-grey-light)),
    var(--color-white);
}

.bg-light-grey-white-gradient {
  background: linear-gradient(
      0deg,
      rgba(229, 235, 236, 0.5),
      rgba(229, 235, 236, 0.5)
    ),
    var(--color-white);
}

.font-white {
  color: var(--color-white) !important;
}

.font-grey {
  color: #ccd8da !important;
}

.font-green {
  color: var(--color-green-light) !important;
}

.font-dark-grey {
  color: var(--color-primary-text) !important;
}

.font-dark-green {
  color: var(--color-petrol);
}

.font-red {
  color: #dc341c;
}

.hr-light-green {
  border: 2px solid var(--color-green-light);
  opacity: 1;
  width: 20%;
}

/* Classes */
.responsive {
  max-width: 90%;
  height: auto;
}

.wrap-word-break {
  word-wrap: break-word;
}

@media only screen and (max-width: 600px) {
  .responsive {
    max-width: 100%;
    height: auto;
  }
}

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

.img-grid-responsive {
  max-width: 100%;
  height: auto;
  min-height: 300px;
  object-fit: cover;
}

.bordered {
  border: 2px solid var(--color-green-light);
}

.container-only-left {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}
@media (min-width: 576px) {
  .container-only-left {
    margin-left: calc(50% - 272px);
    margin-right: calc(50% - 265px);
  }
}
@media (min-width: 768px) {
  .container-only-left {
    margin-left: calc(50% - 362px);
    margin-right: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 992px) {
  .container-only-left {
    margin-left: calc(50% - 480px);
    margin-right: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 1200px) {
  .container-only-left {
    margin-left: calc(50% - 572px);
    margin-right: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 1400px) {
  .container-only-left {
    margin-left: calc(50% - 662px);
    margin-right: 0px;
    padding-right: 0px;
  }
}

.container-only-right {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}
@media (min-width: 576px) {
  .container-only-right {
    margin-left: calc(50% - 272px);
    margin-right: calc(50% - 265px);
  }
}
@media (min-width: 768px) {
  .container-only-right {
    margin-right: calc(50% - 362px);
    margin-left: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 992px) {
  .container-only-right {
    margin-right: calc(50% - 480px);
    margin-left: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 1200px) {
  .container-only-right {
    margin-right: calc(50% - 572px);
    margin-left: 0px;
    padding-left: 0px;
  }
}
@media (min-width: 1400px) {
  .container-only-right {
    margin-right: calc(50% - 662px);
    margin-left: 0px;
    padding-left: 0px;
  }
}

.col-padding-left {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.fs-edit {
  position: absolute;
  z-index: 999;
  width: 25%;
  height: 32px;
  margin: 16px;
}
.fs-edit a {
  background: var(--color-white);
  padding: 6px;
  border: 2px solid var(--color-petrol);
  color: var(--color-petrol);
  border-radius: 2px;
  font-size: 12px;
}

.height-100 {
  height: 100%;
}

.row-gap-100 {
  row-gap: 100px;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}






















body main { transition: all .4s ease-in-out; max-width: 1600px; background-color: var(--color-white); margin: auto auto; min-height: 62vh; position: relative;}
body:has(nav li:hover .nav-link + div.sub-nav) main {filter: brightness(0.75); transition: all .2s ease-in-out;}
body:has(nav li:hover .nav-link + div.sub-nav) { background-color: #BFBFBF;  transition: all .2s ease-in-out;}



/* main nav */
header { background-color: var(--color-white); }
header nav {
	display: grid;
	grid-template-columns: [logo] 200px [left-nav] auto [right-nav] 30%;
	width: 100%;
	padding-top: 1.5em;
	background: var(--color-white);
	max-width: 1600px;
	margin: auto auto;
}

header nav > a img {
	padding: .5em 1.5em 1.5em 2em;
	max-width: 200px;
}

header nav > ul {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: stretch;
}

header nav > ul li {
	list-style-type: none;
	padding: 1em;
	margin: 0;
	
}

header nav ul li a.nav-link.active { color: var(--color-petrol); }

header nav span#site-selector { cursor: pointer;}

header nav div#toggle-button { display: none; }





/* mega nav */

a:link.nav-link,
a:visited.nav-link { border-bottom: transparent 2px solid;}
a:hover.nav-link { border-bottom: var(--color-blue) 2px solid;}


nav div.sub-nav {
	display: none; 
	border-top: solid 2px var(--color-grey-light);
	border-bottom: solid 2px var(--color-grey-light);
	background: var(--color-white);
	min-height: 300px;
    
    position: absolute;
    left: 0;
    width: 100%;
	padding: 0 0em;
    top: 100px;
	left: 50%;
	transform: translate(-50%, 0%);

}

nav li:hover .nav-link + div.sub-nav { 
	display: flex; 
	justify-content: center;
	max-width: 1600px;
}



nav div.sub-nav div.sub-nav-primary {
	order: 1; 

	flex-basis: 37%;
	flex-grow: 2;

}

nav div.sub-nav div.sub-nav-secondary {
	order: 2;

	width: 38%;

	border-left: solid 2px var(--color-grey-light);
}


nav div.sub-nav div.sub-nav-featured {
	order: 3;

	background: var(--color-petrol-10);
	width: 25%;
	padding: 2em 3em;
}

@media (max-width: 1200px) {
	nav div.sub-nav div.sub-nav-secondary { width: auto; }
	nav div.sub-nav div.sub-nav-featured { display: none;}
}




nav div.sub-nav div.sub-nav-primary,
nav div.sub-nav div.sub-nav-secondary {

	padding: 0 2em;
	margin: 2em 0;

}


nav div.sub-nav div.sub-nav-primary-header,
nav div.sub-nav div.sub-nav-secondary-header {
	margin: 0 0 2em 0;
}

nav div.sub-nav div.sub-nav-primary-header a,
nav div.sub-nav div.sub-nav-secondary-header a {
	color: var(--color-petrol);
	display: block;
	margin: 0 0 1em 0;
	text-decoration: none;
}

nav div.sub-nav div.sub-nav-primary-header a::after,
nav div.sub-nav div.sub-nav-secondary-header a::after {
    content: "\e8e4";
    font-family: "Material Symbols Outlined";
	font-size: 1.4em;
    position: relative;
    top: 0.33rem;
    left: 0.5em;
    transition: all .2s ease-in-out;
    line-height: 0;

}

nav div.sub-nav div.sub-nav-primary-header a:hover::after,
nav div.sub-nav div.sub-nav-secondary-header a:hover::after {
    transition: all .2s ease-in-out;
    left: 1em;
}



nav div.sub-nav div.sub-nav-tiles-container {
	display: grid;

	grid-template-columns: repeat(auto-fill, 200px);
	grid-template-rows: 180px 180px auto;
	grid-template-areas: "main main";
	column-gap: 3em;
	row-gap: 20px;
}



nav div.sub-nav div.sub-nav-tiles-container .tile-nav {
	width: 200px;
}

nav div.sub-nav div.sub-nav-tiles-container .tile-nav a:link {
	text-decoration: none;
	display: inline-flex;
	column-gap: 5px;
}

nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-image {
	order: 1;	
}

nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-image img {
	max-width: 16px;
}
nav div.sub-nav div.sub-nav-tiles-container .tile-nav a:hover .tile-image img {filter: brightness(0.75);}


nav div.sub-nav div.sub-nav-tiles-container .tile-nav a { color: var(--color-petrol);}

nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-content{
	order: 2; 
}
nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-content .tile-title {font-size: 1.2em; margin: 0 0 0.75em 0; }
nav div.sub-nav div.sub-nav-tiles-container .tile-nav a:hover .tile-content .tile-title {color: var(--color-petrol-70);}


nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-content .tile-description {
	color: var(--color-primary-text);
	font-size: 0.8em;
	line-height: 1.5em;
}

body:lang(de) nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-content .tile-description,
body:lang(es) nav div.sub-nav div.sub-nav-tiles-container .tile-nav a .tile-content .tile-description {
	line-height: 1.35em;
}

nav div.sub-nav div.sub-nav-tiles-container .tile-nav a:hover .tile-content .tile-description { color: var(--color-petrol) }








/* featured nav cta list */

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list {}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul {
	list-style-type: none;
	padding: 0;
	margin: 1em 0 3em 0;
}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li {
	padding: .75em 0;
	margin: 0;
	display: block;
	width: 100%;
	border-bottom: 2px solid var(--color-grey);
	position: relative;
}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li:last-child {
	border-bottom: 2px solid transparent;
}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li a:link,
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li a:visited {
	color: var(--color-petrol);
	text-decoration: none;
	display: block;
	max-width: 80%;
}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li a:hover {
	color: var(--color-petrol-70);

}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li a:link::after {
    content: "\e8e4";
    font-family: "Material Symbols Outlined";
	font-size: 2em;
    position: absolute;
    top: 1.5rem;
   	right: 0;
    transition: all .2s ease-in-out;
    line-height: 0;

}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-cta-list ul li a:hover::after,
nav div.sub-nav div.sub-nav-secondary-header a:hover::after {
    transition: all .2s ease-in-out;
    right: -.5em;
}

/* featured nav small tile */


nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile { margin: 1em 0 3em 0; }
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile a:link { text-decoration: none; }
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-eyebrow  { font-size: .75rem; color: var(--color-petrol);}
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-eyebrow.keyline::before  { top: -.75rem; }
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-title {margin: 1em 0; font-size: 1.25rem; line-height: 1.75rem; color: var(--color-petrol);} 
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-image img{ max-width: 100%; }
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-description {font-size: 1.0rem; color: var(--color-primary-text); margin-bottom: 1.5em;}
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-link {font-size: 1.0rem; color: var(--color-petrol-70);}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile a:hover .tile-eyebrow  { font-size: .75rem; color: var(--color-petrol-70);}
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile a:hover .tile-title {margin: 1em 0; font-size: 1.25rem; color: var(--color-petrol-70);} 
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile a:hover .tile-link {font-size: 1.0rem; color: var(--color-petrol-50);}

nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-link p { position: relative; }
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile .tile-link p::after {
    content: "\e8e4";
    font-family: "Material Symbols Outlined";
	font-size: 2em;
    position: absolute;
    top: 1.0rem;
   	right: 0;
    transition: all .2s ease-in-out;
    line-height: 0;
}
nav div.sub-nav div.sub-nav-featured div.sub-nav-featured-tile a:hover .tile-link p::after {
    transition: all .2s ease-in-out;
    right: -.5em;
}









/* mobile nav */

nav#nav-mobile {
	display: none;
}


@media only screen and (max-width: 1070px) {
	header.sticky-top {
		position: relative;
		z-index: 1;
	}
	nav#nav-mobile {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: var(--color-white);
		z-index: 1000;
		padding: 1em 0em;
	}

	nav#nav-mobile div#toggle-button-mobile {
		position: absolute;
		right: 2em;
		top: 2.0em;
		font-size: 1.25em;
		color: var(--color-petrol);
	}

	nav#nav-mobile div#nav-mobile-header img{
		padding: 1em;
		max-height: 75px;
	}

	nav#nav-mobile a {
		color: var(--color-petrol);
		text-decoration: none;
	}

	nav#nav-mobile a:hover {
		border-bottom: solid 2px transparent;
		color: var(--color-petrol-50);
	}

	nav#nav-mobile ul {
		padding: 0 1em;
	}
	nav#nav-mobile ul li {
		width: 100%;
		margin: 1em 0;
		list-style-type: none;
	}

	nav#nav-mobile form#mobile-search-form {
		position: relative;
		top: 2em;
		margin: 0 1em;
		z-index: 20;
	}

	nav#nav-mobile form#mobile-search-form > div{
		box-shadow: 0px 6px 24px 0px #0000001A;
		display: grid;
		grid-template-columns: [icon] 40px [input] auto [button] 60px;
		padding: 0;
		background-color: var(--color-white);
	}

	nav#nav-mobile form#mobile-search-form #search-box-icon-mobile{
		padding: .75em;
	}

	nav#nav-mobile form#mobile-search-form input {
		border: none;
		padding: 1em 1em 1em 3em;
	}

	nav#nav-mobile form#mobile-search-form input:focus-visible {
		border: none;
		outline: none;
	}

	nav#nav-mobile form#mobile-search-form button {
		background-color: var(--color-petrol);
		color: var(--color-white);
		padding: 1em;
		border: none;
	}

	nav#nav-mobile div#nav-mobile-footer {
		background-color: var(--color-petrol-40);
		padding: 4em 0 1em 0;
		position: relative;
		z-index: 10;
	}

	nav#nav-mobile div#nav-mobile-footer #site-selector {
		position: absolute;
		right: 1em;
		bottom: 1.5em;
	}

}









































/* OneTrust Badge that is repetative of the footer link */
#ot-sdk-btn-floating { display: none; }




/* xl buttons - buttons are in like five places now and need to be consolodated. */
        .button-xlarge,
        a.button-xlarge {
            cursor: pointer;
            display: block;
            font-size: 1.0em;
            color: var(--color-white);
            padding: 2em 4em;
            margin: 1em 0;
            background-color:var(--color-petrol);
            text-decoration: none;
            border: none;
            display: inline-block;
        }

        .button-xlarge:hover {
            text-decoration: none;
        }

        .button-xlarge.disabled {
            cursor:not-allowed;
            color: var(--color-white);
            background-color: var(--color-petrol-30);
        }
        .button-xlarge.disabled:hover {
            text-decoration: none;
            border: none;
        }


        .button-xlarge.alternate {
            color: var(--color-petrol);
            background-color: var(--color-green-light);
        }

        .button-xlarge.alternate.disabled {
            background-color: var(--color-petrol-30);
            color: var(--color-petrol);
        }


        
        .button-xlarge span:after {
            content: "\e941";
            font-family: "Material Symbols Outlined";
            font-size: 1.4em;
        
            position: relative;
            top: .25em;
            left: .4em;
            transition: all .2s ease-in-out;
            line-height: 0;
        }


        .button-xlarge:hover span:after {
            left: .9em;
        }

        .button-xlarge.disabled:hover span:after {
            left: 0.4em;
        }

        .button-xlarge span {
            padding: 0 1.0em 6px 0;
        }
        .button-xlarge:hover span {
            border-bottom: solid 2px var(--color-white);   
        }
        .button-xlarge.alternate:hover span {
            border-bottom: solid 2px var(--color-petrol);   
        }
        .button-xlarge.disabled:hover span {
            border-bottom:  solid 2px transparent;
        }





/********************** sections *******************/
section.padded { padding: 6em;}



/* callout - product schedule a call */


section.section-product-schedule-call-callout + section.section-product-highlights { padding-top: 110px;}

section.section-product-schedule-call-callout { position: relative; height: 0; }



 
div.product-schedule-call-callout {
	
	box-shadow: -10px 48px 120px rgba(0, 0, 0, 0.1);
	width: 90%;
	margin: 0 5%;

	display: flex;
	position: absolute;
	top: -60px;
}

div.product-schedule-call-callout div.callout-text {
	padding: 3em 2em;
	background: var(--color-white);
	width: 75%;
}

div.product-schedule-call-callout div.callout-link {
	background: var(--color-petrol);
	width: 25%;
}

div.product-schedule-call-callout div.callout-link a {
	color: var(--color-white);
	padding: 2em 15%;
	display: inline-block;
}





/* section - section-product-highlights  */
section.section-product-highlights  {
	padding: 6em;

}

section.section-product-highlights div.tab-container div.tab-content {
	
	display: flex;
	column-gap: 7em;
}

section.section-product-highlights div.media-tile {
	padding: 3em 0 0 0;
	flex: 1;
}




/* section - section-statistics */

section.section-statistics {
	padding: 6em;
}



/* section - section-partners */
section.section-partners  {
	padding: 6em;
}


/* section - section-full-width-text */
section.section-full-width-text {
	padding: 6em;
}
	
/* section - section-large-text-callout */
section.section-large-text-callout  {
	padding: 6em;
}

section.section-large-text-callout p {
	font-size: 3.0rem;
	margin: 3.0rem 0;
	width: 66%;
}






/* section - section-statistics */
section.section-content-tiles {
	padding: 6em;
}

section.section-content-tiles div.div-content-tiles-container {
	margin: 3em 0;
	display: flex;
	justify-content: center;
	column-gap: 3.0em;
	row-gap: 3.0em;
	flex-wrap: wrap;
}
section.section-content-tiles div.div-content-tiles-container div.div-text-with-keyline-content,
section.section-content-tiles div.div-content-tiles-container div.div-text-with-icon-header {
	width: 320px;
}

section.section-content-tiles div.div-content-tiles-container div.div-text-with-keyline-content div.keyline{
	margin: 3em 0 0 0;
}
section.section-content-tiles div.div-content-tiles-container div.div-text-with-icon-header {
	text-align: center;
	margin: 2em 0;
}

section.section-content-tiles div.div-content-tiles-container div.div-text-with-icon-header img {
	max-width: 100%;
	height: 100px;
}
section.section-content-tiles div.div-content-tiles-container div.div-text-with-icon-header div.div-text-header{
	font-size: 1.5em;
	line-height: 1.25em;
	margin: 1.5em 0 0 0;
}

section.section-content-tiles div.div-content-tiles-container div.div-text-with-icon-header div.div-text-content {
	font-size: 1.0em;
	margin: 1.5em 0 0 0;
}

/* section - section-product-tiles */
section.section-product-tiles {
	padding: 6em;
}

section.section-product-tiles div.product-tile-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

section.section-product-tiles div.product-tile-container div.product-tile {
	position: relative;
}

section.section-product-tiles div.product-tile-container div.product-tile .heading {
	font-size: 2.0em;
	
}

section.section-product-tiles div.product-tile-container div.product-tile .description {
  font-size: 1.0rem;
  line-height: 1.5rem;
	width: 75%;
}

section.section-product-tiles div.product-tile-container div.product-tile a {
	text-decoration: none;
	border: none;
	margin: 2em 0; 
}

section.section-product-tiles div.product-tile-container div.product-tile a .heading::after {
    content: "\e8e4";
    font-family: "Material Symbols Outlined";
	font-size: 1.4em;
    position: absolute;
    top: 2.5rem;
    right: 2.0em;
    transition: all .2s ease-in-out;
    line-height: 0;
}


section.section-product-tiles div.product-tile-container div.product-tile a:hover .heading::after {
    right: 1.5em;
    transition: all .2s ease-in-out;
}




section.section-video {
	padding: 6em;
}

section.section-video div.video-container{
	margin-top: 3em;
}



section.section-content-two-column { padding: 6em;}
section.section-content-two-column div.content-two-column-container {
	margin: 2em 0;	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: 3em;
}

section.section-content-two-column div.content-two-column-container > div {
	width: calc(50% - 3em);

}











/* control - gridview */

div.gridview {
    width: 100%;
    font-size: 1.0em;
    color: var(--color-petrol);


}

div.gridview div.gridview-header {
    padding: 1.0em 0;
    border-bottom: none;
    font-size: 1.25rem;

    display: grid;
    grid-template-columns: minmax(50%, 66%) auto;
    column-gap: 1.0em;
    row-gap: 1.5em;

}

div.gridview div.gridview-item {
    padding: 1.0em 0;
    border-bottom: solid 1px var(--color-petrol-30);
    display: grid;
    column-gap: 1em;
}


div.gridview div.gridview-header,
div.gridview div.gridview-item {
    grid-template-columns: 2fr 1fr;
}

div.gridview.halves div.gridview-header,
div.gridview.halves div.gridview-item {
    grid-template-columns: 1fr 1fr;
}




div.gridview div.gridview-item:last-of-type {
    /*border-bottom: none; remove when the repeater works*/
}


main div.gridview a {
    border: solid 2px transparent;       
}

main div.gridview a:hover {
    border-bottom: solid 2px var(--color-green-light);
}

div.gridview div.gridview-item p {
	color: var(--color-primary-text);
	margin: .5em 0;
	font-size: .875em;
}





table {
	width: 100%;
	margin: 2em 0;
}

table tr {
	border-bottom: solid 1px var(--color-petrol-30b);
}

table tr:last-of-type {
	border: none;
}

table tr td {
	padding: 1em 0;
	vertical-align: top;
}










/* videos */
div.video-container {}
div.video-container + div{ position: relative;}

div.video-container div.video-no-cookie-placeholder {
	position: absolute;
	width: 100%;
	height: 100%;
	
}

div.video-container div.video-no-cookie-placeholder img {
	filter: grayscale(100%);
	width: 100%;
}

div.video-container div.video-no-cookie-placeholder p {
position: absolute;
    bottom: calc(50% - 3em);
    font-size: 1.75em;
    padding: 2em;
    background-color:rgba(0, 60, 70, 0.90);
	color: var(--color-white);

}

main div.video-container div.video-no-cookie-placeholder p a,
main div.video-container div.video-no-cookie-placeholder p span.ot-pref-opener {
	color: var(--color-white);
	border-color: var(--color-white);
}

main div.video-container div.video-no-cookie-placeholder p span.ot-pref-opener {
	border-color: var(--color-white);
}
main div.video-container div.video-no-cookie-placeholder p a:hover,
main div.video-container div.video-no-cookie-placeholder p span.ot-pref-opener:hover {
	border-color: var(--color-green-light);
}







/* tii-diversity */
        div.bar-chart{
            width: 100%;
        }
        
        .brand-color-background-petrol div.bar-chart{
        	color: var(--color-white)
        }
        
        #diversity {
        	padding: 2em 6em;
        }
        
        #diversity h2,
        #diversity h3{
            color: #fff;
            margin: 4em 0 2em 0;
        }

        div.bar-chart .bar-chart-row {
            width: 100%;
            display: grid;
            grid-template-columns:  25% 15% 60%;
            line-height: 1.65vh;
            margin: 0em;
        }

        div.bar-chart .bar-chart-row.total {
            border-top: solid 1px var(--color-white);
            padding-top: 1em;
            margin-top: 1em;
        }

        div.bar-chart .bar-chart-row .bar-chart-display .bar-chart-display-bar {
            background-color: var(--color-petrol-70);
            border-left: solid 1px var(--color-petrol-70);
            
        }

        div.bar-chart .bar-chart-row .bar-chart-display .bar-chart-display-bar.alternative {
            background-color: var(--color-petrol-50);
            border-left: solid 1px var(--color-petrol-50);
        }

        div.bar-chart .bar-chart-row .bar-chart-display .bar-chart-display-bar label {
            line-height: 1.75vh;
            padding: 0 1em;
            border: none;
        }

        div.bar-chart.bar-chart-single .bar-chart-display .bar-chart-display-bar{
            height: 3em;
        }

        div.bar-chart.bar-chart-single .bar-chart-row{
            margin: 0 0 .5em 0;
        }

        div.bar-chart.bar-chart-double .bar-chart-display .bar-chart-display-bar{
            height: 2.5em;
        }

        div.bar-chart.bar-chart-double .bar-chart-row:has(div.last) {
            margin: 0 0 .5em 0;
        }



     	#progress {
     		padding: 2.0em 6.0em;
     	}
     	
     	#progress h2,
     	#progress h3,
     	#progress h4{
     		
            margin: 4em 0 2em 0;
     	}
     	#progress h4 {
     		margin-top: 0;
     	}
     
		section.section-diversity-stats div.progress-stat-container{
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			justify-content: space-between;
		}
     
        section.section-diversity-stats div.stat {
            height: 280px;
            border: solid 0px var(--color-white);
            width: calc(20% - 3em);
        }

        section.section-diversity-stats div.stat .stat-primary {
            font-size: 4.5rem;
            line-height: 0.875em;
            letter-spacing: -3px;
            color: var(--color-white);
        }

        section.section-diversity-stats div.stat .stat-secondary-text {
            font-size: 4.0vw;
            color: var(--color-petrol-30);
            letter-spacing: -1px;
        }

        section.section-diversity-stats div.stat .stat-byline {
            font-size: 0.875em;
			line-height: 1.125em;
            color: var(--color-petrol-30);
            margin: 1em 0 0 0;
            max-width: 100%;
			min-height: 80px;
        }

		section.section-diversity-stats div.stat .stat-secondary {
			font-size: 1.25em;
			line-height: 1.25em;
		}





.section-full-width-cta {
	padding: 3em 6em;
	font-size: 1.25em;
	text-align: center;
}
main .section-full-width-cta a:link,
main .section-full-width-cta a:visited {
	margin: .5em 0;
	font-size: 1.8em;
	line-height: 2.2em;
	display: inline-block;
	padding-right: 0.75em;
}

main .section-full-width-cta a::after {
    content: "\e8e4";
    font-family: "Material Symbols Outlined";
	font-size: 1.4em;
    position: relative;
    top: 0.75rem;
    left: 0.5em;
    transition: all .2s ease-in-out;
    line-height: 0;

}

main .section-full-width-cta a:hover::after {
    transition: all .2s ease-in-out;
    left: 1em;
}




section#section-editor-info { 
	position: absolute;
	right: 1em;;
	bottom: 2em;
}

section#section-editor-info span {
	position: relative;
	top: 5px;
}




.product-logo-eyebrow {
	max-width: 200px;
	margin-bottom: 2em;
}







.cta-container {
	padding: 3em 0 2em 0;
	font-size: 1.25em;
	text-align: center;
}

.cta-container a {
	padding-right: 0.5em;
}

.cta-container a::after {
  content: "\e8e4";
  font-family: "Material Symbols Outlined";
  font-size: 1.4em;
  position: relative;
  top: 0.33rem;
  left: 0.25em;
  transition: all 0.2s ease-in-out;
  line-height: 0;
}

.cta-container a:hover::after {
  left: 0.5em;
  transition: all 0.2s ease-in-out;
}






section.section-resources-news,
section.section-resources-press,
section.section-resources-conferences,
section.section-resources-awards
{
	padding: 3em 6em;
}






section.section-product-content-with-text {
	padding: 6em;
	display: flex;
	flex-wrap: wrap;
	column-gap: 10em;
	align-items: flex-end;
}	


section.section-product-content-with-text div.product-intro {
	width: 50%;
}
@media only screen and (max-width: 768px) {
	section.section-product-content-with-text div.product-intro {
		width: 100%;
	}
}

section.section-product-content-with-text div.product-intro div.product-intro-logo {
	max-width: 200px;
	margin-bottom: 3em;
}

section.section-product-content-with-text div.product-intro div.product-intro-logo img {
	width: 100%;
}

section.section-product-content-with-text div.product-details {
	width: 30%;
}

@media only screen and (max-width: 768px) {
	section.section-product-content-with-text div.product-details {
		width: 100%;
	}
}


section.section-product-content-with-text div.product-details div.product-details-description{
	margin-bottom: 2em;
}