/* BA components. Based on Bootstrap 5.3. Jan 2023. */
/*	
	1.	main navigation
	2.	aside nav
	10.	accordion
	11.	breadcrumbs
	12.	tables
	14.	side-col-banner
	34.	image-50-text
*/



/* ************************* */
/* 1. MAIN NAVIGATION		 */
/* ************************* */

/* navbar */
#header{height:var(--header-height);}

#header .navbar{ position: fixed; top:0px; left:0; width:100vw; padding:0; background:transparent; z-index: 1030; transition:box-shadow 0.8s ease, top 0.8s ease;}
.navbar-brand{position: absolute; top:1rem; z-index: 2; width:17.62rem; padding:0; flex:none; margin:0; transition:top 0.8s ease, width 0.8s ease; }
.navbar-brand:focus{outline:0;}
.navbar-brand img{width:100%;}

#header .navbar.affix{box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2); top:calc(var(--header-height-sticky) - var(--header-height));}
.affix .navbar-brand{top:4rem; width:10rem;}

/*navigation */
#navigation{justify-content: flex-end; width:100%;}
#navigation > .inner-wrap{width:100%; height:var(--header-height); top:0; flex:none; display: flex; flex-direction: column-reverse; align-items: flex-end; }

.navbar-nav .placeholder-item {cursor: default;}
.navbar-nav li{display: flex; align-items: center;}
.navbar-nav > li > a{line-height:1.2; display: block; text-decoration: none;}
.navbar-nav .dropdown-toggle{z-index: 2; text-align: right;}
.navbar-nav .dropdown-toggle:after{content: '\f078'; font: var(--font-icon); transition:transform 0.4s ease; border:0;}
.navbar-nav .dropdown-toggle.show:after{ transform:rotate(-180deg);}

.navbar-nav .dropdown-menu{top:100%; background: #fff; min-width:14rem; max-width: 15rem; padding:0; margin:0; border:0; border-radius:var(--radius-normal); box-shadow: 0 1rem 3rem rgba(0,0,0,0.17);}
.navbar-nav .dropdown-menu > li{align-items: flex-start;}
.navbar-nav .dropdown-menu > li > a{line-height: 1.2; display: block; text-decoration: none; flex-grow:1;}
.navbar-nav .dropdown-menu.open-left {left:auto; right:-1px;}
.navbar-nav .dropdown-menu .dropdown-menu{left:100%;}
.navbar-nav .dropdown-menu .dropdown-menu.open-left{left:auto; right:100%;}
.navbar-nav .dropdown-menu .dropdown-toggle:after{transform:rotate(-90deg);}
.navbar-nav .dropdown-menu .dropdown-toggle.show:after{ transform:rotate(90deg);}

/* main-nav */
.main-nav{width:100%; height:3.06rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.035rem; text-transform: uppercase; gap:2rem; display: flex; align-items: center;}
.main-nav:before{content: ''; background: var(--color-overlay-80); left:calc(-1*var(--page-side-gap)); right:calc(-1*var(--page-side-gap)); position: absolute; top:0; bottom:0;}
.main-nav > .navbar-nav{width:100%; gap:inherit; justify-content: space-between;}
.main-nav > .navbar-nav > li > a{padding:1rem 0; }
.main-nav .navbar-nav > li > a:before{content: ''; background: var(--color-light-blue); position: absolute; left:0; width:0; height:0.25rem; bottom:0; transition:width 0.2s ease;}
.main-nav .navbar-nav > .dropdown > a:not(.dropdown-toggle){padding-right:1.13rem;}
.main-nav .navbar-nav > .dropdown > .dropdown-toggle{position: absolute; right:0;}
.main-nav .navbar-nav > .dropdown > .dropdown-toggle:after{font-size: 0.81rem; vertical-align: 10%;}
.main-nav .navbar-nav > .dropdown > .dropdown-toggle:before{display: none;}

.main-nav .navbar-nav > li > a{color:#fff;}
.main-nav .navbar-nav > .active > a{color:var(--color-light-blue);}
.main-nav .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .navbar-nav > .show > a{color:var(--color-light-blue);}
.main-nav .navbar-nav > li > a:hover:before, .main-nav .navbar-nav > li > a:focus:before, .main-nav .navbar-nav > .show > a:before{width:100%;}

.main-nav .dropdown-menu{font-family: 'Base'; font-size:1rem; font-weight: 400; text-transform: none; letter-spacing: normal; padding:0;}
.main-nav .dropdown-menu > li > a{padding:0.8rem 3rem 0.8rem 1rem;}
.main-nav .dropdown-menu .dropdown-menu{top:0;}
.main-nav .dropdown-menu .dropdown-menu > li > a{padding-right:1rem;}
.main-nav .dropdown-menu > .dropdown > a{padding-right:0.5rem;}
.main-nav .dropdown-menu > .dropdown > .dropdown-toggle{ color:var(--color-dark-grey); padding-left:0.5rem; padding-right:1rem; flex:none;} 
.main-nav .dropdown-menu > .dropdown > .dropdown-toggle:after{font-size: 0.75rem; vertical-align: 10%;}

.main-nav .dropdown-menu > li > a{color:var(--color-black);}
.main-nav .dropdown-menu > .active > a{color:var(--color-active);}
.main-nav .dropdown-menu > li > a:hover, .main-nav .dropdown-menu > li > a:focus, .main-nav .dropdown-menu > .show > a{color:var(--color-hover);}
.main-nav .dropdown-menu > li:hover{background: var(--color-light-grey);}

/* top-nav */
.secondary-nav{height:6.75rem; width:100%; gap:3.5rem; font-size:1rem; display: flex; align-items: center; transition:height 0.8s ease;}
.affix .secondary-nav{height:3rem;}
.secondary-nav:before{content: ''; background: #fff; position: absolute; top:0; bottom:0; left:calc(-1*var(--page-side-gap)); right:calc(-1*var(--page-side-gap));}
.secondary-nav > .navbar-nav{gap:inherit; width:100%; justify-content: flex-end;}
.secondary-nav > .navbar-nav > li > a{padding:0;}
.secondary-nav > .navbar-nav > li > a:after{content: ''; background: var(--color-hover); position: absolute; left:0; width:0; height:1px; bottom:0; transition:width 0.2s ease;}

.secondary-nav .navbar-nav > li > a{color:var(--color-black);}
.secondary-nav .navbar-nav > .active > a{color:var(--color-active);}
.secondary-nav .navbar-nav > li > a:hover, .secondary-nav .navbar-nav > li > a:focus{color:var(--color-hover);}
.secondary-nav .navbar-nav > li > a:hover:after, .secondary-nav .navbar-nav > li > a:focus:after{width:100%;}

@media (max-width: 1199.98px) {
	.secondary-nav{gap:1.5rem;}
	.main-nav{gap:1rem;}
}
@media (max-width: 991.98px) {
	#header{height:var(--header-height-mobile); background: #fff;}
	
	.navbar-toggler {padding:0.7rem 1rem; color:inherit; margin:0.25rem 0; height:3.5rem; width:3.5rem; line-height:1; border:0; border-radius:var(--radius-normal); box-shadow:none!important; transition:color 0.2s ease, background-color 0.2s ease; }
	[aria-expanded='true'].navbar-toggler [class*='fa']:before{ content:'\f00d';}
	.navbar-toggler:hover, [aria-expanded='true'].navbar-toggler{ background-color:var(--color-hover); color:#fff;}
	.navbar-toggler:focus{ background-color:transparent; color:inherit;}
	[aria-expanded='true'].navbar-toggler:focus{ background-color:var(--color-hover); color:#fff;}

	#header .navbar{ position:relative; width:auto; padding:0;}
	#header .navbar > .container{display: flex; align-items: center; flex-wrap: nowrap; padding-left:calc(var(--bs-gutter-x)*0.5); padding-right:calc(var(--bs-gutter-x)*0.5);}
	
	#header .navbar.affix{transition: none; top:0; box-shadow:none;}
	.affix .navbar-brand, .navbar-brand{top:0; position: relative; width:13rem; margin-top:0.25rem; transition: none;}

	#navigation{position:absolute; top:100%; width:100%; left:0; padding-left:0; padding-right:0; box-shadow:0 1rem 1rem rgba(0,0,0,0.3); background-color: #fff;}
	#navigation > .inner-wrap{height:auto; display: block;}
	.navbar-nav{margin:0;}
	.navbar-nav li{display: block;}
	.navbar-nav li a:not(.dropdown-toggle){margin-right:3.5rem; display: inline-block;}
	.navbar-nav .dropdown-toggle{margin-left:auto; position: absolute; top:0;}
	.navbar-nav .dropdown-toggle:after{content: '\2b';}
	.navbar-nav .dropdown-toggle.show:after{ transform:rotate(135deg);}
	.navbar-nav .dropdown-menu{width:100%; position:relative; padding:0; float:none; box-shadow:none; min-width:auto; max-width: none; background-color:transparent; margin-top:1px;}
	.navbar-nav .dropdown-menu .dropdown-toggle:after{transform:rotate(0);}
	.navbar-nav .dropdown-menu .dropdown-toggle.show:after{ transform:rotate(135deg);}
	.navbar-nav .dropdown-menu .dropdown-menu{left:0;}
	.navbar-nav .dropdown-menu.open-left {left:0; right:0;}
	.navbar-nav .dropdown-menu .dropdown-menu.open-left{left:0; right:0;}

	/* main-nav */
	.main-nav{height:auto; padding:1rem 0.75rem; gap:0; font-size: 1.2rem; display: block; }
	.main-nav:before{display: none;}
	.main-nav .navbar-nav > li > a{padding:1rem; }	
	.main-nav .navbar-nav > .dropdown > a:not(.dropdown-toggle){padding-right:1rem;}
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle{ width:3.5rem; padding-left:1rem; right:0; text-align: center;}
	.main-nav .navbar-nav > .dropdown > .dropdown-toggle::after{font-size: 1.2rem;}
	
	.main-nav .dropdown-menu{ font-size: 1rem; background-color: transparent; padding:0 0 0 2rem;}
	.main-nav .dropdown-menu > li:hover{background: transparent;}
	.main-nav .dropdown-menu > li > a{padding:1rem; flex:none;}
	.main-nav .dropdown-menu > .dropdown > a{padding-right:1rem;}
	.main-nav .dropdown-menu > .dropdown > .dropdown-toggle{ width:3.5rem; right:0; padding-left:1rem; padding-right:1rem; text-align: center;}
	.main-nav .dropdown-menu > .dropdown > .dropdown-toggle:after{font-size: 1rem;}
	.main-nav .dropdown-menu .dropdown-menu{top:0;}
	
	.main-nav .navbar-nav > li > a,
	.main-nav .dropdown-menu > li > a{color:var(--color-black);}
	
	.main-nav .navbar-nav > li > a:hover, 
	.main-nav .navbar-nav > li > a:focus,
	.main-nav .navbar-nav > .active > a,
	.main-nav .dropdown-menu > li > a:focus,
	.main-nav .dropdown-menu > li > a:hover,
	.main-nav .dropdown-menu > .active > a{color:var(--color-hover);}
	
	.main-nav .navbar-nav > li > a:before{display: none;}

	/* top-nav */
	.secondary-nav{height:auto; gap:0; background-color: var(--color-light-grey); font-size: 1rem; padding:1rem 0.75rem; display: block;}
	.secondary-nav:before{display: none;}
	.secondary-nav .navbar-nav > li > a{padding:1rem; color:var(--color-black);}	

	.secondary-nav .navbar-nav > li > a:hover, 
	.secondary-nav .navbar-nav > li > a:focus,
	.secondary-nav .navbar-nav > .active > a{color:var(--color-hover);}
	
	.secondary-nav > .navbar-nav > li > a:after{display: none;}
}



/* ************************* */
/* 2. ASIDE NAV   			 */
/* ************************* */
.side-nav-title{font-size: var(--h4);}
.side-nav-wrap{font-family: 'Heading'; text-transform: uppercase; font-size: 0.87rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.035rem; padding:0.5rem 0 0.5rem 0.5rem; background: var(--color-light-grey); border-radius: var(--radius-normal);}
.side-nav-wrap .sublevel{padding-left:1.5rem;}
.side-nav-wrap a{display:block; padding:0.9rem 1rem; text-decoration: none; flex-grow:1;}
.side-nav-wrap .item:not(.has_sublevel) a{padding-right:3.25rem;}
.side-nav-wrap .sublevel-toggle{color:var(--color-dark-grey); margin-top:0.25rem; padding-left:0.5rem; padding-right:1rem; flex:none; }
.side-nav-wrap .sublevel-toggle:focus{outline: 0;}
.side-nav-wrap .sublevel-toggle:after{ content: '\f078'; display: block; font:var(--font-icon); font-size: 0.81rem; transition: transform 0.4s ease; }
.side-nav-wrap .sublevel-toggle[aria-expanded='true']:after{transform:rotate(180deg);}

.side-nav-wrap .item{display: flex; align-items: flex-start; border-radius:1.4rem 0 0 1.4rem; transition:background 0.2s ease;}
.side-nav-wrap .item:hover{background-color:var(--color-red);}
.side-nav-wrap .item:hover a{color:#fff;}
.side-nav-wrap a{color:var(--color-base);}
.side-nav-wrap .active a{color:var(--color-active);}
.side-nav-wrap a:focus{color:var(--color-hover);}



/* ************************* */
/* 3. ANCHORS NAV			 */
/* ************************* */
#anchors-nav-section{margin-top:var(--padding-normal); z-index: 1029; background: #fff;  transition:box-shadow 0.4s ease; }
#anchors-nav-section .anchors-nav{padding:0 2.5rem; margin-bottom:calc(-1*var(--margin-small)); flex-grow:1; display: flex; align-items: center; justify-content: space-between; }
#anchors-nav-section .anchors-nav:before, #anchors-nav-section .anchors-nav:after{display: none;}
#anchors-nav-section .anchors-nav > li{margin-bottom:var(--margin-small);}
#anchors-nav-section .anchors-nav > li > a{font-weight: 700; text-transform: uppercase; padding:0; font-size: 1.12rem; color:var(--color-link); text-align: center; line-height: 1.2; text-decoration: none; }
#anchors-nav-section .anchors-nav > li > a:hover, #anchors-nav-section .anchors-nav > li > a:focus{color:var(--color-hover); background: transparent;}
#anchors-nav-section .anchors-nav > li > .active, #anchors-nav-section .anchors-nav > li > .active:hover, #anchors-nav-section .anchors-nav > li > .active:focus{color:var(--color-active);}

.anchors-nav-wrap{background-color: var(--color-light-grey); padding:var(--margin-normal) 0; border-radius:var(--radius-normal); display: flex; align-items: flex-start; transition:background 0.4s ease;}

#anchors-nav-section.affix{position: sticky; top:var(--header-height-sticky); box-shadow: 0 0.2rem 1.25rem rgba(0,0,0,0.15);}
#anchors-nav-section.affix .anchors-nav-wrap{ background: #fff; }

@media (max-width: 991.98px) {
	#anchors-nav-section.affix{position: relative; top:0; box-shadow: none;}
	#anchors-nav-section.affix .anchors-nav-wrap{ background: var(--color-light-grey);}
}
@media (max-width: 767.98px) {
	#anchors-nav-section .anchors-nav{display: block; padding-left:var(--bs-gutter-x); padding-right:var(--bs-gutter-x);}
}



/* ************************* */
/* 10. ACCORDION	 		 */
/* ************************* */
.accordion .accordion-item{border:0; background: transparent;}
.accordion .accordion-item + .accordion-item{margin-top:0.31rem;}
.accordion .accordion-header {margin:0;}
.accordion .accordion-button{border-radius:0!important; background: var(--color-light-grey); color:var(--color-base); box-shadow: none; font-size: var(--h4); padding:0.9rem 2rem;}
.accordion .accordion-button::after {content: '\f078'; font:var(--font-icon); font-size: 0.81rem; background: none; width:auto; height:auto; transition-duration:0.4s;}
.accordion .accordion-button[aria-expanded='true']{background-color: var(--color-light-grey); color:var(--color-base);}
.accordion .accordion-button:focus, .accordion .accordion-button:hover{color:var(--color-red); background-color: var(--color-light-grey); box-shadow: none;}
.accordion .accordion-body {padding:1.5rem 2rem; position:static;}
.accordion .decor{pointer-events: none; position: absolute; top:0; right:0; bottom:0; left:0; opacity: 0; transition: opacity 0.2s ease;}
.accordion .decor:before{content: ''; clip-path: polygon(0 0, 100% 0, 0.25rem 0.44rem, 0.25rem calc(100% - 0.44rem), 100% 100%, 0 100%); background: var(--color-red); position: absolute; top:0; bottom:0; left:0; width:1rem;}
.accordion .decor:after{content: ''; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(100% - 0.25rem) calc(100% - 0.44rem), calc(100% - 0.25rem) 0.44rem); background: var(--color-red); position: absolute; top:0; bottom:0; right:0; width:1rem;}
.accordion .accordion-button:focus .decor, .accordion .accordion-button:hover .decor{opacity:1;}



/* ************************* */
/* 11. BREABCRUMBS			 */
/* ************************* */
.breadcrumbs-section{margin-bottom:var(--margin-normal); color:var(--color-grey); font-size: var(--text-small); padding:0 0 1rem 0; border-bottom:1px solid rgba(255,255,255,0.2);}
.breadcrumbs-section ol{padding:0; list-style-type: none; display: flex; align-items: center; flex-wrap:wrap;}
.breadcrumbs-section ol li+li:before{content: '\f054'; font:var(--font-icon); font-size: 0.75rem; margin:0 1rem; color:var(--color-dark-grey);}
.breadcrumbs-section ol li a:hover, .breadcrumbs-section ol li a:focus{color:var(--color-hover);}
.breadcrumbs-section .placeholder-item{cursor: default;}

@media (max-width: 991.98px) {
	.breadcrumbs-section{padding:0.5rem 0;}
	.breadcrumbs-section ol li+li:before{margin:0 0.5rem;}
}



/* ************************* */
/* 12. TABLES				 */
/* ************************* */
.textbox table{font-size: inherit; max-width: 100%; width: 100%; border-bottom:1px solid var(--color-light-grey);}
.textbox table td, .textbox table th{padding:1rem 1rem;}
.textbox table thead th{ vertical-align:bottom; background-color: var(--color-dark-blue); color:#fff; }
.textbox table td{ vertical-align:top;}
.textbox table tr:nth-child(even){background-color:var(--color-light-grey);}
.textbox table tr{transition:background 0.2s ease;}
.textbox table tr:hover{background-color:var(--color-grey);} 
.textbox table th{position: sticky; top:calc(var(--header-height-sticky)); z-index: 2;}

.textbox table.content-table{border:0;}
.textbox table.content-table:not(:last-child){margin-bottom:var(--margin-normal);}
.textbox table.content-table tr{background: transparent;}
.textbox table.content-table td{padding:0; vertical-align: middle;}
.textbox table.content-table td img{max-width: 100%;}
@media (max-width: 991.98px) {
	.textbox table th{top:0;}
}
@media (max-width: 767.98px) {
	.textbox table{border-top:1px solid var(--color-light-grey);}
	.textbox table, .textbox table tbody, .textbox table tfoot, .textbox table tr, .textbox table caption{ display: block;}
	.textbox table thead {display: none;}
	.textbox table tr{ padding-top:0.5rem; padding-bottom:0.5rem; margin:0;}
	.textbox table td {display: flex; padding:0.5rem; text-align: left; border:0; margin:0;}
	.textbox table td:before{ content: attr(data-th); display: block; font-weight: bold; padding-right:1rem; width:40%; flex:none;}
	
	.textbox table.content-table tr{padding:0;}
	.textbox table.content-table tr:not(:last-child), .textbox table.content-table td:not(:last-child){margin-bottom:var(--margin-normal);}
	.textbox table.content-table td{display: block;}
}



/* ************************* */
/* 14. SIDE-COL-BANNER		 */
/* ************************* */
.side-col-banner{padding:var(--padding-normal) 2rem;}
.side-col-banner:before{content: ''; clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0.5rem 100%, 0 calc(100% - 0.5rem));  position: absolute; top:-0.5rem; left:-0.5rem; width:10rem; height:7.5rem; background:var(--color-red);}
.side-col-banner:after{content: ''; z-index: -1; clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0.5rem 100%, 0 calc(100% - 0.5rem));  position: absolute; bottom:-0.5rem; right:-0.5rem; width:10rem; height:7.5rem; background:var(--color-red);}
.side-col-banner .image{position: absolute; top:0; right:0; bottom:0; left:0;}
.side-col-banner .image img{object-fit: cover; width:100%; height:100%;}
.side-col-banner .image:after{content: ''; background: var(--color-overlay-60); position: absolute; top:0; right:0; bottom:0; left:0; transition:background 0.4s ease;}
.side-col-banner:hover .image:after, .side-col-banner .area-link:focus ~ .image:after{background: var(--color-overlay-80);}
.side-col-banner .title{font-size: var(--h4);}
.side-col-banner .cta-link{ z-index:5;}
.side-col-banner .area-link{ z-index:4;}



/* ************************* */
/* 34. IMAGE-50-TEXT		 */
/* ************************* */
.image-50-text-block{display: flex; align-items: center; gap:var(--padding-large); }
.image-50-text-block .image-wrap{width:calc(50% - 0.75rem); flex:none;}
.image-50-text-block .image-wrap img{width:100%; max-width: 100%;}
.image-50-text-block .text-wrap{flex-grow:1;}
.image-50-text-block .image-wrap:before{content: ''; clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0.5rem 100%, 0 calc(100% - 0.5rem));  position: absolute; top:-0.5rem; left:-0.5rem; width:10rem; height:7.5rem; background:var(--color-red);}
.image-50-text-block .image-wrap:after{content: ''; z-index: -1; clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 0.5rem, 100% 100%, 0.5rem 100%, 0 calc(100% - 0.5rem));  position: absolute; bottom:-0.5rem; right:-0.5rem; width:10rem; height:7.5rem; background:var(--color-red);}
.image-50-text-block .area-link{ text-decoration: none; background: var(--color-overlay-60); display: flex; align-items: center; justify-content: center;}
.image-50-text-block .area-link:after{content: '\f144'; font:var(--font-icon); font-size: 3.5rem; color:#fff; opacity:0.8; transition:opacity 0.2s ease;}
.image-50-text-block .area-link:hover:after, .image-50-text-block .area-link:focus:after{opacity:1;}


.image-50-text-block.reverse{flex-direction: row-reverse;}

@media (max-width: 1399.98px) {
	.image-50-text-block{gap:var(--padding-normal);}
}
@media (max-width: 1199.98px) {
	.image-50-text-block{gap:var(--margin-big);}
}
@media (max-width: 991.98px) {
	.image-50-text-block{gap:3rem;}
}
@media (max-width: 767.98px) {
	.image-50-text-block, .image-50-text-block.reverse{flex-direction: column;}
	.image-50-text-block .image-wrap{width:100%;}
	.image-50-text-block .text-wrap{width:100%;}
}