/* BA custom framework. Based on Bootstrap 5.3. Jan 2023. */
/*
1. vars
2. layout
3. colors, background, overlays
4. typography
5. margins
6. buttons
7. links
8. alerts
*/
/* ************************* */
/* 1. VARS */
/* ************************* */
:root{
--color-base:#000;
--color-base-rgb:0,0,0;
--color-black:#000;
--color-black-rgb:0,0,0;
--color-black65:rgba(var(--color-black-rgb),0.65);
--color-black30:rgba(var(--color-black-rgb),0.3);
--color-grey:#DBDCE3;
--color-light-grey:#F0F0F5;
--color-dark-grey:#A2A5B0;
--color-navy:#0C1C59;
--color-dark-navy:#06123F;
--color-maroon:#831923;
--color-maroon-rgb:131,25,35;
--color-blue:#7F90CE;
--color-red-grey:#BB858A;
--color-light-blue:#C5CCE8;
--color-light-red:#E87781;
--color-link:var(--color-maroon);
--color-hover:var(--color-blue);
--color-active:var(--color-red-grey);
--color-disabled:var(--color-light-grey);
--color-danger:#842029;
--color-success:#0F5132;
--font-base:400 1rem/1.5 'Base', sans-serif;
--font-icon:900 1rem/1 'Font Awesome 6 Free';
--font-heading:800 1rem/1.2 'Heading', sans-serif;
--text-lead:1.25rem;
--text-small:0.81rem;
--h1:3.12rem;
--h2:2.75rem;
--h3:2.37rem;
--h4:1.56rem;
--h5:1.31rem;
--h6:1.00rem;
--margin-small:0.5rem;
--margin-normal:1.5rem;
--margin-big:3.5rem;
--padding-normal:5rem;
--padding-large:7.5rem;
--radius-normal:0;
--radius-small:0;
--container:1766px;
--page-side-gap:calc(50vw - var(--container)/2 + 0.75rem);
--input-height:4rem;
--header-height:7.1875rem;
--header-height-sticky:6rem;
--header-height-mobile:4rem;
--scroll-width:0.5rem;
}
@media (max-width: 1919.98px) {
:root{
--container:92vw;
}
}
@media (max-width: 1399.98px) {
:root{
--container:93vw;
}
}
@media (max-width: 1199.98px) {
:root{
--container:94vw;
--h1:3.05rem;
--h2:2.44rem;
--h3:1.95rem;
--h4:1.56rem;
--h5:1.25rem;
--h6:1.00rem;
}
}
@media (max-width: 991.98px) {
:root{
--container:98vw;
--padding-normal:5rem;
--padding-large:6.5rem;
}
}
@media (max-width: 767.98px) {
:root{
--margin-small:0.5rem;
--margin-normal:1.5rem;
--margin-big:3rem;
--padding-normal:4.5rem;
--padding-large:6rem;
--h1:2.48rem;
--h2:2.07rem;
--h3:1.73rem;
--h4:1.44rem;
--h5:1.20rem;
--h6:1.00rem;
}
}
/* ************************* */
/* 2. LAYOUT */
/* ************************* */
html, body{height:100%;}
body{color: var(--color-base); background:white; display: flex; flex-direction: column; overflow-x: hidden;}
body *{ position:relative;}
#page-wrap{flex:1 0 auto;}
.container{width:var(--container); max-width: var(--container); margin-left:calc(50vw - var(--container)/2);}
.content-section{ padding-top:var(--padding-normal); padding-bottom:var(--padding-normal); }
.large-padding-top{ padding-top:var(--padding-large);}
.large-padding-bottom{ padding-bottom:var(--padding-large);}
.content-section:not([class*='bg-'])+.content-section:not([class*='bg-']){padding-top:0;}
#header + .content-section{border-top:1px solid var(--color-grey);}
.section-bg{position: absolute; top:0; right:0; bottom:0; left:0;}
.section-bg img, .section-bg video{object-fit: cover; width:100%; height:100%;}
.image-fit img, .image-fit video{object-fit: cover; width:100%; height:100%;}
[class*='col-'].indent-right{padding-right:calc(var(--container)/24);}
[class*='col-'].indent-left{padding-left:calc(var(--container)/24);}
.textbox:after{ content:''; display:block; clear:both; font-size: 1px; line-height: 0px; margin:0; padding:0;}
.text-image-wrap img, .text-image-wrap figure{border-radius:var(--radius-normal); overflow: hidden; display:inline-block; margin:0.35rem 0; max-width:100%; z-index:2;}
.text-image-wrap.align-left{float:left; width:33.33%; margin-right:2rem; margin-bottom:1rem;}
.text-image-wrap.align-right{float:right; width:33.33%; margin-left:2rem; margin-bottom:1rem;}
.text-image-wrap.align-left img, .text-image-wrap.align-right img{width:100%;}
.text-image-wrap.align-center{text-align:center;}
.text-image-wrap.align-center img{width:auto; max-width: 100%}
.text-image-wrap.align-stretch img{width:100%;}
.text-image-wrap figure img{margin:0; width:100%;}
.text-image-wrap figcaption{ z-index:2; position:absolute; left:0; bottom:0; padding:0.5rem 1rem; background-color:rgba(9, 4, 47, 0.56); color:white;}
.text-image-wrap.align-left figure, .text-image-wrap.align-right figure, .text-image-wrap.align-stretch figure{width:100%;}
.text-image-wrap.align-left.width-50, .text-image-wrap.align-right.width-50{width:46.5%;}
.textbox iframe {max-width:100%;}
#scrollup { position:fixed; display:block; color:white!important; opacity:0; box-shadow:0 1rem 3rem rgba(0,0,0,0.5); background-color:rgba(0,0,0,0.5); border-radius:50%; text-align:center; line-height:2.5rem; width:2.5rem; height:2.5rem; bottom:-3.5rem; left:calc(100vw - 3.7rem); z-index: 1000; transition:opacity 1s ease, bottom 1s ease, color 0.2s ease, background-color 0.2s ease; text-decoration:none; }
#scrollup:after{ content:'\f30c'; font:var(--font-icon);}
#scrollup:hover{ background-color:var(--color-hover);}
#scrollup.affix{ opacity:1; bottom:3.5rem;}
* {scrollbar-width: thin; scrollbar-color: var(--color-dark-grey) var(--color-light-grey);}
*::-webkit-scrollbar {height: var(--scroll-width); width: var(--scroll-width);}
*::-webkit-scrollbar-track {background: var(--color-light-grey);}
*::-webkit-scrollbar-thumb {background: var(--color-dark-grey); border-radius: 0; border: 0;}
*::-webkit-scrollbar-thumb:hover {background: var(--color-dark-grey);}
:root { scroll-behavior: auto; }
@media (max-width: 991.98px) {
.container{max-width: var(--container);}
[class*='col-'].indent-right{padding-right:calc(var(--bs-gutter-x) * .5);}
[class*='col-'].indent-left{padding-left:calc(var(--bs-gutter-x) * .5);}
}
@media (max-width: 767.98px) {
.text-image-wrap.align-left, .text-image-wrap.align-right, .text-image-wrap.align-left.width-50, .text-image-wrap.align-right.width-50{float:none; width:auto; max-width:100%; margin-right:0; margin-left:0; margin-bottom:var(--margin-normal);}
.text-image-wrap.align-left img, .text-image-wrap.align-right img, .text-image-wrap.align-left figure, .text-image-wrap.align-right figure{width:auto;}
}
/* ************************* */
/* 3. COLORS & BACKGROUNDS */
/* ************************* */
.color-white{color:#fff;}
.color-black{color:var(--color-black);}
.color-grey{color:var(--color-grey);}
.color-dark-grey{color:var(--color-dark-grey);}
.color-navy{color:var(--color-navy);}
.color-dark-navy{color:var(--color-dark-navy);}
.color-maroon{color:var(--color-maroon);}
.color-blue{color:var(--color-blue);}
.color-red-grey{color:var(--color-red-grey);}
.color-light-blue{color:var(--color-light-blue);}
.color-light-red{color:var(--color-light-red);}
.bg-color-grey{ background-color:var(--color-grey);}
.bg-color-light-grey{ background-color:var(--color-light-grey);}
.bg-color-dark-grey{ background-color:var(--color-dark-grey);}
.bg-color-black{ background-color:var(--color-black);}
.bg-color-navy{ background-color: var(--color-navy);}
.bg-color-maroon{ background-color: var(--color-maroon);}
.bg-color-white{background-color: #fff;}
[class*='overlay-color-']:after{ content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0;}
.overlay-color-dark56:after{ background-color:rgba(9, 4, 47, 0.56);}
.overlay-color-dark32:after{ background-color:rgba(9, 4, 47, 0.32);}
/* ************************* */
/* 4. TYPOGRAPHY */
/* ************************* */
html{font-size: 16px;}
body{font: var(--font-base);}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font:var(--font-heading);}
h1, h2, h3, h4, h5, h6{color:var(--color-navy);}
.color-white h1, .color-white h2, .color-white h3, .color-white h4, .color-white h5, .color-white h6{color:inherit;}
h1, .h1{font-size:var(--h1);}
h2, .h2{font-size:var(--h2);}
h3, .h3{font-size:var(--h3);}
h4, .h4{font-size:var(--h4);}
h5, .h5{font-size:var(--h5);}
h6, .h6{font-size:var(--h6);}
.lead, .big{ font-size:var(--text-lead); font-weight: 400;}
.small{ font-size:var(--text-small);}
.in-form-header{margin-bottom:var(--margin-small);}
.textbox ul{ list-style-type:none; padding-left:1.5rem; overflow:hidden;}
.textbox ul li{padding-left:1rem; background:url(../../img/list-marker.svg) no-repeat 0 0.6rem;}
.textbox ul li ul{margin-top:var(--margin-small); padding-left:0.5rem;}
.textbox ol{counter-reset: listCounter; padding-left:2.5rem; overflow:hidden;}
.textbox ol li{ list-style:none;}
.textbox ol li:before{counter-increment: listCounter; content:counter(listCounter)'. '; color:var(--color-navy); display:inline-block; margin-left:-1.3rem; margin-right:0.3rem; min-width:1rem; text-align:center;}
.textbox ol li ol{padding-left:2.3rem; margin-top:var(--margin-small); counter-reset: subCounter;}
.textbox ol li ol li:before{counter-increment: subCounter; content:counter(listCounter)'.'counter(subCounter)'. '; margin-left:-2.1rem; margin-right:0.3rem; min-width:1.7rem;}
.textbox ul, .textbox ol{display: flex; flex-direction: column; gap:var(--margin-small);}
.textbox blockquote{ padding-left:2.44rem; background: url("../../img/quote-mark.svg") no-repeat left 0.3rem; font-size: var(--text-lead); font-style: normal; display: flex;}
.textbox .floating-list{overflow:visible; display: block;}
.textbox .floating-list li{background: none;}
.textbox .floating-list li+li{margin-top:var(--margin-small);}
.textbox .floating-list li::before{content: '\f111'; vertical-align: 30%; color:var(--color-navy); margin-left:-1rem; width:0.5rem; font:var(--font-icon); font-size: 0.35rem; margin-right:0.5rem; display: inline-block; }
.textbox{font-size: 1.1rem;}
@media (max-width: 991.98px) {
html{font-size: 14px;}
}
@media (max-width: 767.98px) {
.textbox ol{padding-left: 2.5rem;}
.textbox ul{padding-left: 1.5rem;}
}
/* ************************* */
/* 5. MARGINS */
/* ************************* */
h1, h2, h3, h4, h5, h6, ul, ol, p, .alert, address, dl, blockquote, figure{margin:0;}
h1, h2, h3, h4, h5, h6, .h2, .h3, .h4, .h5, .h6, .textbox p, .textbox ul, .textbox ol, .text-image-wrap
{margin-bottom:var(--margin-normal); margin-top:0;}
.textbox, .form-wrap, .accordion, .side-nav, .tabs-wrap, .side-nav-wrap, .side-col-banner
{margin-bottom:var(--margin-big);}
.textbox:last-child, .form-wrap:last-child, .accordion:last-child, .side-nav:last-child, .textbox ul:last-child, .textbox ol:last-child, .textbox p:last-child, .textbox .text-image-wrap:last-child,
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child,
.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child, .h6:last-child,
[class*='mb']:last-child, .tabs-wrap:last-child, .textbox blockquote:last-child, .form-group:last-child, .side-col-banner:last-child
{margin-bottom:0;}
.mb-half{margin-bottom:var(--margin-small);}
.mb{margin-bottom:var(--margin-normal);}
.mb-big{margin-bottom:var(--margin-big);}
.mb-0{margin-bottom:0!important;}
@media (max-width: 1399.98px) {
.mb-big-xl{margin-bottom:var(--margin-big);}
.mb-xl{margin-bottom:var(--margin-normal);}
.mb-half-xl{margin-bottom:var(--margin-small);}
}
@media (max-width: 1199.98px) {
.mb-big-lg{margin-bottom:var(--margin-big);}
.mb-lg{margin-bottom:var(--margin-normal);}
.mb-half-lg{margin-bottom:var(--margin-small);}
}
@media (max-width: 991.98px) {
.mb-big-md{margin-bottom:var(--margin-big);}
.mb-md{margin-bottom:var(--margin-normal);}
.mb-half-md{margin-bottom:var(--margin-small);}
}
@media (max-width: 767.98px) {
.mb-big-sm{margin-bottom:var(--margin-big);}
.mb-sm{margin-bottom:var(--margin-normal);}
.mb-half-sm{margin-bottom:var(--margin-small);}
}
/* ************************* */
/* 6. BUTTONS */
/* ************************* */
.btn {font-family: 'Heading'; display: inline-flex; align-items: center; justify-content: center; gap:0.5rem; border-width:2px; border-radius:1.76rem; height:3.56rem; padding:1.1rem 2rem; text-transform: uppercase; font-size: 1rem; font-weight: 600; letter-spacing: 0.1rem; line-height: 1.2; transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease, padding 0.2s ease; }
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus,
button:focus, button:active:focus, button.active:focus, button.focus, button:active.focus, button.active.focus{outline:0!important;}
.btn:focus-visible{box-shadow:none;}
.btn.has-arrow .arrow{display: block; width:1rem; height:0.75rem; transition:width 0.2s ease, background 0.2s ease;
background: url('data:image/svg+xml,') no-repeat right center / auto 100%,
linear-gradient(90deg, transparent 0%, transparent 100%) no-repeat left center / 1.4rem 2px;
}
.btn.has-arrow:hover, .btn.has-arrow:focus, .focus.btn.has-arrow, .btn.has-arrow:active, .active.btn.has-arrow, .btn.has-arrow:active:focus, .btn.has-arrow:active:hover, .btn.has-arrow.active:hover, .btn.has-arrow.active:focus, .btn.has-arrow:active.focus, .btn.has-arrow.active.focus, .open > .btn.has-arrow.dropdown-toggle{padding-left:1.5rem; padding-right:1.5rem;}
.btn.has-arrow:hover .arrow, .btn.has-arrow:focus .arrow, .focus.btn.has-arrow .arrow, .btn.has-arrow:active .arrow, .active.btn.has-arrow .arrow, .btn.has-arrow:active:focus .arrow, .btn.has-arrow:active:hover .arrow, .btn.has-arrow.active:hover .arrow, .btn.has-arrow.active:focus .arrow, .btn.has-arrow:active.focus .arrow, .btn.has-arrow.active.focus .arrow, .open > .btn.has-arrow.dropdown-toggle .arrow{width:2rem;}
.btn-primary{color:white; border-color:var(--color-link); background:var(--color-link);}
.btn-primary:hover, .btn-primary:focus, .focus.btn-primary, .btn-primary:active, .active.btn-primary, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle{
color:var(--color-link); border-color:var(--color-link); background:transparent;}
.btn-primary.has-arrow:hover .arrow, .btn-primary.has-arrow:focus .arrow, .focus.btn-primary.has-arrow .arrow, .btn-primary.has-arrow:active .arrow, .active.btn-primary.has-arrow .arrow, .btn-primary.has-arrow:active:focus .arrow, .btn-primary.has-arrow:active:hover .arrow, .btn-primary.has-arrow.active:hover .arrow, .btn-primary.has-arrow.active:focus .arrow, .btn-primary.has-arrow:active.focus .arrow, .btn-primary.has-arrow.active.focus .arrow, .open > .btn-primary.has-arrow.dropdown-toggle .arrow{
background: url('data:image/svg+xml,') no-repeat right center / auto 100%,
linear-gradient(90deg, var(--color-link) 0%, var(--color-link) 100%) no-repeat left center / 1.4rem 2px;
}
.btn-default{ color:#fff; border-color:var(--color-navy); background: var(--color-navy);}
.btn-default:hover, .btn-default:focus, .focus.btn-default, .btn-default:active, .active.btn-default, .btn-default:active:focus, .btn-default:active:hover, .btn-default.active:hover, .btn-default.active:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .btn-default.dropdown-toggle{
color:var(--color-navy); border-color:var(--color-navy); background:transparent;}
.btn-default.has-arrow:hover .arrow, .btn-default.has-arrow:focus .arrow, .focus.btn-default.has-arrow .arrow, .btn-default.has-arrow:active .arrow, .active.btn-default.has-arrow .arrow, .btn-default.has-arrow:active:focus .arrow, .btn-default.has-arrow:active:hover .arrow, .btn-default.has-arrow.active:hover .arrow, .btn-default.has-arrow.active:focus .arrow, .btn-default.has-arrow:active.focus .arrow, .btn-default.has-arrow.active.focus .arrow, .open > .btn-default.has-arrow.dropdown-toggle .arrow{
background: url('data:image/svg+xml,') no-repeat right center / auto 100%,
linear-gradient(90deg, var(--color-navy) 0%, var(--color-navy) 100%) no-repeat left center / 1.4rem 2px;
}
.btn-white{ color:var(--color-navy); border-color:#fff; background:#fff;}
.btn-white:hover, .btn-white:focus, .focus.btn-white, .btn-white:active, .active.btn-white, .btn-white:active:focus, .btn-white:active:hover, .btn-white.active:hover, .btn-white.active:focus, .btn-white:active.focus, .btn-white.active.focus, .open > .btn-white.dropdown-toggle{
color:#fff; border-color:#fff; background:transparent;}
.btn-white.has-arrow .arrow{
background: url('data:image/svg+xml,') no-repeat right center / auto 100%,
linear-gradient(90deg, #fff 0%, #fff 100%) no-repeat left center / 1.4rem 2px;
}
.btn-white.has-arrow:hover .arrow, .btn-white.has-arrow:focus .arrow, .focus.btn-white.has-arrow .arrow, .btn-white.has-arrow:active .arrow, .active.btn-white.has-arrow .arrow, .btn-white.has-arrow:active:focus .arrow, .btn-white.has-arrow:active:hover .arrow, .btn-white.has-arrow.active:hover .arrow, .btn-white.has-arrow.active:focus .arrow, .btn-white.has-arrow:active.focus .arrow, .btn-white.has-arrow.active.focus .arrow, .open > .btn-white.has-arrow.dropdown-toggle .arrow{
background: url('data:image/svg+xml,') no-repeat right center / auto 100%,
linear-gradient(90deg, #fff 0%, #fff 100%) no-repeat left center / 1.4rem 2px;
}
.btn-link{padding:0; height:auto; text-decoration: none; color:var(--color-link);}
.btn-link:hover, .btn-link:focus, .btn-link:focus-visible{color:var(--color-hover); text-decoration: none; box-shadow: none;}
.btn-link.has-arrow .arrow{width:2rem;
background: url('data:image/svg+xml,') no-repeat left center / auto 100%,
linear-gradient(90deg, var(--color-hover) 0%, var(--color-hover) 100%) no-repeat center center / 0 2px;
}
.btn-link.has-arrow:hover, .btn-link.has-arrow:focus, .btn-link.has-arrow:focus-visible{padding:0;}
.btn-link.has-arrow:hover .arrow, .btn-link.has-arrow:focus .arrow, .btn-link.has-arrow:focus-visible .arrow{
background: url('data:image/svg+xml,') no-repeat right center / auto 100%,
linear-gradient(90deg, var(--color-hover) 0%, var(--color-hover) 100%) no-repeat left center / 1.4rem 2px;
}
.color-white .btn-link{color:inherit;}
.color-white .btn-link:hover, .color-white .btn-link:focus, .color-white .btn-link:focus-visible{color:var(--color-hover);}
.textbox .btn{margin-top:0.35rem; margin-bottom:0.35rem;}
.btn [class*='fa']{font-size: 0.875rem;}
@media (max-width: 767.98px) {
.btn:not(.btn-link){white-space:normal;}
}
/* ************************* */
/* 7. LINKS */
/* ************************* */
a {color:var(--color-link); transition:color 0.2s ease, background 0.2s ease;}
a:hover, A:focus{color:var(--color-hover);}
a:focus, a:active, a:active:focus{outline:none;}
.color-white a:not(.btn){color:var(--color-light-red);}
.color-white a:not(.btn):hover, .color-white a:not(.btn):focus{color:var(--color-hover);}
a img{border:0;}
a[href*='mailto:']{word-break: break-all;}
.area-link{ position:absolute; top:0; left:0; width:100%; height:100%; z-index: 2;}
.anchor-link{display:block; top:-3rem; width:100%; height:0;}
.scroll-spy-anchor{position: absolute; top:0; width:100%; bottom:0; z-index: -10; pointer-events: none;}
.sp-link{font-family: 'Heading'; padding-right:0.5rem; font-size: 1rem; font-weight: 600; letter-spacing: 0.1rem; display: inline-flex; align-items: center; gap:0.25rem; white-space: nowrap; text-transform: uppercase; text-decoration: none; line-height: 1.2;}
.sp-link:after{content: ''; position: relative; left:0; display: block; width:1.875rem; height:1.875rem; border-radius:50%; border:2px solid var(--color-link); transition:left 0.2s ease, border 0.2s ease, background 0.2s ease;
background: url('data:image/svg+xml,') no-repeat center;
}
.sp-link:hover:after, .sp-link:focus:after{left:0.5rem; border-color:var(--color-hover);
background: url('data:image/svg+xml,') no-repeat center var(--color-hover);
}
.color-white a.sp-link{color:#fff;}
.color-white a.sp-link:after{border-color:#fff; background: url('data:image/svg+xml,') no-repeat center;}
.color-white .sp-link:hover:after, .color-white .sp-link:focus:after{border-color:var(--color-hover);
background: url('data:image/svg+xml,') no-repeat center var(--color-hover);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{ color:inherit;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus{
color:var(--color-hover);}
@media (max-width: 991.98px) {
.anchor-link{top:0;}
}
/* ************************* */
/* 8. ALERTS */
/* ************************* */
.alert{padding:1.25rem 1.5rem; display: flex; flex-direction: column; gap:1rem; border-radius: var(--radius-normal); word-wrap: break-word;}
.alert-danger{color:var(--color-danger); border-color:#F1AEB5; background:#F8D7DA; }
.alert-success{color:var(--color-success); border-color:#A3CFBB; background:#D1E7DD; }