/* BA components. Based on Bootstrap 5.3. Jan 2023. */
/*	
	4.	modals
	5.	pagination
	6.	aside search
	8.	accordion
	9.	breadcrumbs
	10.	tables
	11.	aside nav
	12.	aside CTA banner
	14.	main navigation
	15. section header
	16. separators
*/




/* ************************* */
/* 4. MODALS	   			 */
/* ************************* */
.modal-content{padding:3rem; border-radius:var(--border-radius); border:0; gap:var(--margin-normal); }
.modal-content > form{display: flex; width:100%; flex-direction: column; gap:var(--margin-normal);}
.modal-header{ border:0; padding:0; }
.modal .close{border:0; width:1.5rem; height:1.5rem; color:var(--color-dark-grey); font-size: 1rem; line-height: 0.5; right:0.5rem; top:0.5rem; float:none; position:absolute; z-index:2; opacity:1; filter:alpha(opacity=100); text-shadow:none; transition:color 0.2s ease; background:transparent;}
.modal .close:hover, .modal .close:focus{color:var(--color-hover);}
.modal-body{padding:0;}
.modal-footer{border:0; padding:0.35rem 0; gap:2rem;}
.modal-footer .btn{margin:0;}

@media (max-width: 767.98px) {
	.modal-content{padding:2rem;}
	.modal-footer{gap:1.5rem;}
}
@media (max-width: 575.98px) {
	.modal-content{padding:1.5rem;}
	.modal-footer{flex-direction: column; gap:var(--margin-normal);}
	.modal-footer .btn:not(.btn-link){width:100%;}
}



/* ************************* */
/* 5. PAGINATION			 */
/* ************************* */
.pagination-wrap{ text-align:center; display:flex; justify-content:center;}
.pagination > li+li{margin-left:1px;}
.pagination > li > a, .pagination > li > span{color:var(--color-base); background-color:transparent; border:1px solid transparent; border-radius:var(--border-radius); width:3rem; height:3rem; padding:0.5rem; display:flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; transition:border 0.2s ease;}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{background-color:transparent; color:var(--color-hover); border-color:var(--color-hover);}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{color:inherit; background-color:var(--color-light-cyan); font-weight:bold; border:1px solid var(--color-light-cyan);}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus{color:var(--color-disabled); background-color:transparent; border-color:transparent;}



/* ************************* */
/* 6. ASIDE SEARCH 			 */
/* ************************* */
.side-search-block .search-button { font-size: 1.18rem; color:var(--color-tiffany); height:calc(100% - 2px); width:3.31rem; position: absolute; right: 1px; top: 1px; outline: none; border:0; padding: 0; transition:color 0.2s ease; z-index: 4; background: none; }
.side-search-block .search-button:hover, .side-search-block .search-button:focus{color:var(--color-hover);}
.side-search-block .form-control{padding-right: 3rem;}
.side-search-block label{right:3rem;}
.side-search-block .form-control:focus{outline: 0; box-shadow:none;}




/* ************************* */
/* 8. ACCORDION	   			 */
/* ************************* */
.accordion .accordion-item + .accordion-item{margin-top:0.18rem;}
.accordion .accordion-item{border:0;}
.accordion .accordion-header {margin:0; font-weight: 400;}
.accordion .accordion-button{box-shadow: none; display: flex; align-items: flex-start; justify-content: space-between;  border-radius:1.84rem!important; background: var(--color-light-yellow); color:var(--color-black); font-size: inherit; font-weight: inherit; padding:0.95rem 1.5rem 0.95rem 1.88rem;}
.accordion .accordion-button::after {content: '\f067'; font:var(--font-icon); font-size: 0.81rem; margin-left:2rem; margin-top:0.5rem; color:var(--color-dark-grey); background: none; width:auto; height:auto; transition:color .2s ease, transform 0.4s ease; }
.accordion .accordion-button[aria-expanded='true']{color:inherit;}
.accordion .accordion-button[aria-expanded='true']:after{content: '\f068'; transform:rotate(180deg);}
.accordion .accordion-button:focus, .accordion .accordion-button:hover{color:#fff; background-color: var(--color-tiffany); box-shadow: none;}
.accordion .accordion-button:focus:after, .accordion .accordion-button:hover:after{color:#fff;}

.accordion .accordion-body {padding:1.5rem; position:static;}
@media (max-width: 767.98px){
	.accordion .accordion-button::after {margin-top:0.35rem;}
}




/* ************************* */
/* 9. BREABCRUMBS			 */
/* ************************* */
.breadcrumbs-section{padding:1rem 0; border-bottom:1px solid var(--color-grey);}
.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.62rem; 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) {/* md */
	.breadcrumbs-section{padding:0.5rem 0;}
	.breadcrumbs-section ol li+li:before{margin:0 0.5rem;}
}


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

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



/* ************************* */
/* 11. ASIDE NAV   			 */
/* ************************* */
.side-nav-wrap{padding:0.5rem 0; background: var(--color-light-yellow); border-radius: var(--border-radius);}
.side-nav-wrap .sublevel{padding-left:1.5rem;}
.side-nav-wrap a{font-size:1rem; text-transform: uppercase; font-weight: 500; display:block; padding:1rem 3rem 1rem 2rem; text-decoration: none; flex-grow:1;}
.side-nav-wrap .sublevel-toggle{color:var(--color-dark-grey); position: absolute; right:1rem; top:0.25rem; padding-left:0.5rem; padding-right:0.5rem; 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; transition: background 0.2s ease;}
.side-nav-wrap a{color:inherit;}
.side-nav-wrap .item:hover{background: var(--color-tiffany); color:#fff;}
.side-nav-wrap a:hover + .sublevel-toggle, .side-nav-wrap a:focus + .sublevel-toggle{color:#fff}
.side-nav-wrap .active a{color:var(--color-tiffany);}
.side-nav-wrap a:hover, .side-nav-wrap a:not(.sublevel-toggle):focus{color:#fff; background: var(--color-tiffany);}

@media (max-width: 1199.98px){
	.side-nav-wrap a{padding-left: 1.5rem; padding-right:2.5rem;}
	.side-nav-wrap .sublevel-toggle{right:0.5rem;}
}
	
	



/* ************************* */
/* 12. ASIDE CTA BANNER		 */
/* ************************* */
.cta-box{overflow: hidden; padding:11.56rem 2rem 1.5rem 2rem; border-radius:var(--border-radius);}
.cta-box .cta-link{ z-index:3;}
.cta-box .area-link{border:3px solid transparent; transition:border 0.2s ease; border-radius:inherit;}
.cta-box:hover .area-link{border-color:var(--color-yellow);}
.cta-box:before{content:''; position: absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgba(8, 91, 95, 0.1) 0%, rgba(8, 91, 95, 0.7) 50%, rgba(8, 91, 95, 1) 100%) top left / 100% 200%; transition:background 0.4s ease;}
.cta-box:hover:before{background-position:bottom left;}




/* ************************* */
/* 14. MAIN NAVIGATION		 */
/* ************************* */

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

.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, background 0.2s ease;}
.navbar-brand{top:8.45rem; z-index: 2; position: absolute; width: 25.31rem; padding:0; flex:none; margin:0.25rem 0; transition:top 0.8s ease, width 0.8s ease; }
.navbar-brand:focus{outline:0;}
.navbar-brand img{width:100%;}

.navbar.affix{background: #fff; 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:11rem; width:13rem;}

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

.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: var(--color-tiffany); min-width:100%; padding:0; margin:0; border:0; border-radius:0; box-shadow: none;}
.navbar-nav .dropdown-menu > li > a{white-space: nowrap; 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{margin-top:0.75rem; font-size: 1rem; font-weight: 500; text-transform: uppercase; order:3; display: flex; align-items:center; gap:2.56rem;}
#main-nav > li > a{padding:0.6rem 0; }
#main-nav > .dropdown > a:not(.dropdown-toggle){padding-right:0.25rem;}
#main-nav > .dropdown > .dropdown-toggle{padding-left:0.25rem;}
#main-nav > .dropdown > .dropdown-toggle:after{font-size: 0.75rem;}

#main-nav > li > a{color:var(--color-dark-cyan);}
#main-nav > li > a:hover, #main-nav > li > a:focus, #main-nav > .active > a, #main-nav > .show > a{color:var(--color-tiffany);}

#main-nav .dropdown-menu{ font-size:1rem; font-weight: 400; text-transform: none; padding:0;}
#main-nav .dropdown-menu > li > a{padding:1rem 1.25rem;}
#main-nav .dropdown-menu .dropdown-menu{top:0;}
#main-nav .dropdown-menu > .dropdown > a{padding-right:3rem;}
#main-nav .dropdown-menu > .dropdown > .dropdown-toggle{top:0.1rem; position: absolute; right:0; padding-left:0.5rem; padding-right:1.25rem; flex:none;} 
#main-nav .dropdown-menu > .dropdown > .dropdown-toggle:after{font-size: 0.62rem;}

#main-nav .dropdown-menu > li > a{color:#fff;}
#main-nav .dropdown-menu > li > a:hover, #main-nav .dropdown-menu > li > a:focus{color:#fff;}
#main-nav .dropdown-menu > li:hover{background: var(--color-cyan);}
#main-nav .dropdown-menu > .active > a, #main-nav .dropdown-menu > .active > a:hover, #main-nav .dropdown-menu > .active > a:focus{color:var(--color-light-yellow);}

#main-nav .dropdown-menu .dropdown-menu{background: var(--color-cyan); }
#main-nav .dropdown-menu .dropdown-menu > li:hover{background: var(--color-dark-cyan);}


/* second-nav */
#second-nav{margin-top:2.6rem;order:2; font-size: 1rem; font-weight: 500; display: flex; align-items:center; gap:3.5rem;}
#second-nav > li > a{padding:0; color:var(--color-dark-grey);}
#second-nav > li > a:hover, #second-nav > li > a:focus, #second-nav > .active > a{color:var(--color-tiffany);}

/* top-bar */
#top-bar{font-size: 1.5rem; line-height: 1.2; order:1; height:7.18rem; width:100%; display: flex; align-items:center; justify-content: space-between; padding-bottom:1rem;}
#top-bar:before{content: ''; background: url("../../img/bg-top-bar.svg") no-repeat center top / 100% 100%; position: absolute; top:0; bottom:0; left:calc(var(--container)/2 - 50vw - 0.75rem); right:calc(var(--container)/2 - 50vw - 0.75rem);}
#top-bar a{text-decoration: none;}
#top-bar a .icon{margin-right:0.5rem; vertical-align: -15%;}
#top-bar .top-bar-inner{display: flex; align-items: center; gap:3rem;}

@media (max-width: 2500px){
	#top-bar:before{background: url("../../img/bg-top-bar.svg") no-repeat center top / auto auto;}	
}
@media (max-width: 1399.98px) {
	#top-bar{font-size: 1.25rem; height:auto; padding:0.5rem 0 1.5rem 0;}
	#top-bar:before{content: ''; background: url("../../img/bg-top-bar.svg") no-repeat center top / 156% 100%; position: absolute; top:0; bottom:0; left:calc(var(--container)/2 - 50vw - 0.75rem); right:calc(var(--container)/2 - 50vw - 0.75rem);}
	#top-bar a .icon{vertical-align: -20%;}
	#second-nav{margin-top:1.5rem; gap:2rem;}
	.navbar-brand{top:5.5rem;}
	.affix .navbar-brand{top:8rem;}
	#main-nav{gap:1.5rem;}
}
@media (max-width: 1199.98px) {
	#top-bar{font-size: 1.15rem;}
	#top-bar .top-bar-inner{gap:1.5rem;}
	#top-bar a .icon{vertical-align: -28%;}
	#top-bar .btn{height:2.5rem; padding:0.75rem 1rem;}
	#main-nav{gap:0.85rem; transition:margin 0.8s ease;}
	.affix #main-nav{margin-top:0.6rem;}
	#second-nav{gap:1.5rem;}
	.navbar-brand{width:18rem;}
	.affix .navbar-brand{top:7rem;}
	
}
@media (max-width: 991.98px) {/* md */
	#header, #navigation > .inner-wrap{height:auto;}
	
	.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(--border-radius); box-shadow:none!important; transition:color 0.2s ease, background-color 0.2s ease; }
	[aria-expanded='true'].navbar-toggler .fas: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;}

	.navbar{ position:relative; width:auto; padding:0;}
	.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);}
	
	.navbar.affix{transition: none; top:0; box-shadow:none;}
	
	.navbar-brand{position: relative; top:0; width:18rem; transition:none;}
	.affix .navbar-brand{margin-top:0.25rem; transition: none; width:18rem; top:0;}

	#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{display: block;}
	#navigation.has-search > .inner-wrap{padding-right:0;}
	.navbar-nav{margin:0;}
	.navbar-nav li{flex-wrap:wrap; align-items: stretch;}
	.navbar-nav .dropdown-toggle{margin-left:auto;}
	.navbar-nav .dropdown-menu{width:100%; position:relative; padding:0; float:none; box-shadow:none; min-width:auto; 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(180deg);}
	.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{padding:1rem; display: block; margin-top:0;}
	.affix #main-nav{margin-top:0;}
	#main-nav > li > a{padding:1rem; font-size: 1.2rem;}	
	#main-nav > .dropdown > a:not(.dropdown-toggle){padding-right:1rem;}
	#main-nav > .dropdown > .dropdown-toggle{ width:3.5rem; padding-left:1rem; text-align: center;}
	#main-nav > .dropdown > .dropdown-toggle::after{font-size: 1rem;}
	
	#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; 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; background:transparent;}
	#main-nav .dropdown-menu .dropdown-menu > li:hover{background:transparent;}

	
	#main-nav > li > a,
	#main-nav .dropdown-menu > li > a{color:var(--color-black);}
	
	#main-nav > .show > a{color:inherit;}

	#main-nav > li > a:hover, 
	#main-nav > li > a:focus,
	#main-nav .dropdown-menu > li > a:focus,
	#main-nav .dropdown-menu > li > a:hover{color:var(--color-dark-yellow);}
	
	#main-nav > .active > a,
	#main-nav > .active > a:hover,
	#main-nav > .active > a:focus,
	#main-nav .dropdown-menu > .active > a,
	#main-nav .dropdown-menu > .active > a:hover,
	#main-nav .dropdown-menu > .active > a:focus{color:var(--color-tiffany);}

	/* second-nav */
	#second-nav{background-color: var(--color-light-yellow); padding:1rem; margin:0; gap:0; align-items: flex-start;}
	#second-nav > li > a{padding:1rem; font-size: 1.2rem; color:var(--color-black);}	

	#second-nav > li > a:hover, 
	#second-nav > li > a:focus{color:var(--color-dark-yellow);}
	#second-nav > .active > a{color:var(--color-tiffany);}
	
	/* top bar */
	#top-bar{flex-direction: column; gap:1rem; padding:1rem 0 2rem 0;}
	
}
@media (max-width: 767.98px){
	#top-bar{padding-bottom:1rem;}
	#top-bar .top-bar-inner{flex-direction: column; gap:1rem; }
	#top-bar::before {background: var(--color-yellow);}
}




/* ************************* */
/* 15. SECTION HEADER		 */
/* ************************* */
.section-header{display: flex; align-items: center;}
.section-header > div:last-child{margin-left:auto; flex-grow:1;}
.section-header > div:first-child{margin-right:3rem; flex-shrink: 1;}
.section-header .buttons-group{display: flex; gap:1.5rem;}




/* ************************* */
/* 16. SEPARATORS 			 */
/* ************************* */
.sep{height:1px;}