@charset "utf-8";
/* preferred box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%) */
/* Site wide fixes  */
/* Fixes to text elements */




h1{ margin-top: 1rem!important;margin-bottom: 0.75rem!important;}
h3 { color: #b90054;}

/* Add margin to text only components */
.yCmsComponent {
    margin: 0 0 15px 0;
}
/* Ensures images across the site do not expand their parent container   */
img {
    max-width: 100%;
}
/* Fixes alignment issue with podcast and film icons   */
.podcast-film-wrap h6.card-title {display: table;}

p:last-child {
    margin-bottom: 0px !important;
}
:is(ul, ol) {
    padding-left: 1.5rem;
}
:is(ul, ol) li {
    margin-bottom: 0.5rem;
}
.navbar-nav li{margin-bottom: 0px !important;}
/* Ensures images inside the smart edit banner component are at least 100% width of their parent  */
.simple-banner img {width: 100%;}
/* Ensures images inside the smart edit banner component are styled as a banner (same styling as article pages, add class 'banner' to componenst)  */
.simple-banner.banner img {width: 100%;max-height: 220px;object-fit: cover;}
/* Fixes alignment issue on componets with see all links   */


.articleSection .articleBanner {height: 375px; width: 100%;}
@media only screen and (max-width: 767px){
.articleSection .articleBanner{height: 200px !important;}
}
.news_block h2 .all_links {margin-top: 0px;width: auto;}

/* Fixes the above css on the logo   */
.simple-banner.logo img {
    width: auto;
}
/* Fixes recommended article component styling on the homepage*/
.card-body.publications.pl-0.pr-0{padding-bottom: 0px !important;}
.card.articleItem{border-bottom: none;}

.articlesListView .articleContent{padding: 1rem 12px 0px;}
.flex-change .articlesListView .articleContent{padding: .25rem 1rem .5rem;}

/* Fixes image height issue on recommended conference componet */
.owl-carousel .owl-item img {
    height: 100%;
}

/* Fixes image issue on the re purposed individual membership component */
.card-img-top {
    height: auto;
    flex-grow: 1;
}
/* Fixes styling on the recommended articles component*/
.articleItem {
    margin: 0px 7.5px;
}
/* Fixes styling on all components with a see all link*/
.news_block h2 .all_links {
    margin-top: 0px;
}
/* Fixes styling on the recommended article components when not in carousel mode*/
.contentListing .col-12:first-child .articleItem {
    margin-left: 15px;
}
.contentListing .col-12:last-child .articleItem {
    margin-right: 15px;
}
/* Fixes horizontal alignment issue when a governance component is used*/
.row.office-list {
    margin-left: 0px;
    margin-right: 0px;
}
.row.office-list .card .card-body:last-child {
    border-bottom: none;
}
/* styling on the recommended articles components when a summary is to be included. Must wrap summary in <div class="sumamry"> in smart edit */
.summary {
    padding: 0px 15px;
    margin-bottom: 15px;
}

.page-cmsitem-00013006 .podcast-film-wrap h6.card-title{height:  auto !important; padding-bottom: 7.5px;}


/* Forces the position of the 'see all link' to within the recommended article componet header */
.summary a.see-all{position: absolute; top: -55px; z-index: 1; right: 15px;}
.summary a.see-all:after{content: "\f061";    font-family: 'Font Awesome 5 Free';font-weight: 900;margin-left: 5px; -moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;font-size: 16px;color: #01277a;}

/* Individual membership component - custom class  */
/* The class one-third-image-wrap alters the layout of the cards, so the image on desktop only has a width of 1 3rd */
@media (min-width: 767px) {
.one-third-image-wrap .card-group .card{flex: none;width: 33.3%;}
.one-third-image-wrap .card-group .card img{flex:1;}
.one-third-image-wrap .card-group .card.bg-light{;width: 66.7%;}
}
/* Individual membership component - custom clases  */
/* Add the class align-components to the individual membership component to align the height of the components in a row, this will align the buttons*/
.align-components, .align-components-paragraph  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.align-components .card-body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.align-components .card-body div, .align-components .card-body p {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.align-components .card-body .btn-primary {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}
.align-components .card-img-top {
    -webkit-box-flex: initial;
    -ms-flex-positive: initial;
    flex-grow: initial;
}

.align-components-paragraph .content{flex: 1; display: flex; flex-direction: inherit;}
.align-components-paragraph .content p, .align-components-paragraph .content div{flex: 1;}
   
   



/* Add the class secondary-btn-wrap to the individual membership component to change the button styling*/
.secondary-btn-wrap .btn-primary {
    border: 1px solid #01277a;
    background: none;
    color: #01277a;
}
.secondary-btn-wrap .btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}
/*adds a border to the individual membership component*/
.border-wrap .card-body, .border-wrap .content {
    border: 1px solid rgba(0, 0, 0, .125);
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    box-shadow: 5px 5px 15px rgb(0 0 0 / 8%);
    padding: 1.25rem;
}
.border-wrap .card-img-top {
    box-shadow: 5px 0px 15px rgb(0 0 0 / 8%)
}
/*Hides the component button - needed when we need a modal (have to manually include button*/
.no-btn .card-body .btn-primary {
    display: none;
}
.btn-center-wrap .btn-primary {
    margin: 0 auto;
    display: table;
}
.include-arrow-wrap .btn-primary {
    margin: 0 auto;
    display: table;
}
.include-arrow-wrap .btn-primary:after, .btn-primary.include-arrow:after {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f061";
    margin-left: 10px;
    color: #fff;
}
.include-member-wrap .btn-primary {
    margin: 0 auto;
    display: table;
}
.include-member-wrap .btn-primary:before, .btn-primary.include-member:before {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f0c0";
    margin-right: 10px;
    color: #fff;
}
/* Adds icon to .moreinfo-btn */
.more-info-wrap .btn-primary:after, .btn-primary.more-info:after {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f05a";
    margin-left: 10px;
    color: #fff;
}
/* Adds icon to .download-btn */
.download-btn-wrap .btn-primary:after, .btn-primary.download-btn:after {
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f019";
    margin-left: 10px;
    color: #fff;
}
.btn-modal {
    display: block !important;
    position: relative;
    z-index: 1072;
}
.btn-secondary {
    border: 1px solid #01277a;
    background: none;
    color: #01277a;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #00287a;
    border-color: #0062cc;
}
/* White version of IBA button, no background */
.btn-white {
    color: #fff;
    background: none;
    border: 1px solid #fff
}
.btn-white:after {
    color: #fff
}
/* Recommended articles component - custom classes  */
.align-components-wrap .no-gutters > [class*=col-] {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 0px !important;
}
.align-components-wrap .articleItem {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.align-components-wrap .card-img-top {
    flex-grow: unset;
}
.flex-change .news_block .contentListing {
    flex-direction: column;
}
.flex-change .news_block .contentListing .col-12 {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0px 7.5px;
}
.flex-change .publications {
    padding-bottom: 2.5px;
}
.flex-change .news_block .contentListing .col-12 .articleItem {
    margin: 0px 7.5px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-change .news_block .contentListing .col-12 .articleItem img.card-img-top {
    width: 33%;
    border-radius: 0px;
    max-width: 33.3%;
}
.flex-change .articleItem h6.card-title{height: auto !important;}
    

.btn-governance {
    margin-top: -25px;
    position: relative;
    z-index: 1;
    width: auto;
}
/* IBA carousel styling (add .carousel-fade to the div class="carousel ..."") */
.carousel-indicators {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    width: 100%;
    left: 0px;
    margin: 0px;
    padding: 15px 10px 5px;
    bottom: 0px;
}
.carousel-indicators li {
    cursor: pointer;
}
.carousel-control-next, .carousel-control-prev {
    opacity: 1;
    z-index: 2;
}
.carousel-control-next .fas, .carousel-control-prev .fas {
    font-size: 2.5rem;
}
.carousel-caption {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    left: 0px;
    margin: 0px;
    padding: 25px 30px 30px;
    width: 100%;
    bottom: 0px;
    text-align: left;
}
.carousel-caption h5 a {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.4rem;
}
/* add the class .include-caption after the .carousel class if using captions on the carousel to remove background colour on indicators */
.carousel.include-caption .carousel-indicators {
    background: none !important;
}
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .6s;
    transition-property: opacity;
}
.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right {
    opacity: 1;
}
.carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
    opacity: 0;
}
.carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev {
    transform: translateX(0);
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    left: 0;
}


/* styling for the IGI Carousel on the homepage  */
.align-carousel .content{ display: flex;flex: 1;}
.align-carousel .carousel-inner{height: 100%;}   
.align-carousel .carousel-item{height: 100%;}
.align-carousel .carousel-item img{ height: 100%;object-fit: cover;}
   


/* Group Membership carousel styling (#GroupCarousel) */
#GroupCarousel .item-inner span {font-size: 1.6rem;color: #00287a;margin-right: 5px;}
#GroupCarousel .item-inner span:nth-child(even) {font-weight: 500;color: #ee9200;}


/* IBA table styling (#table-component) */
#table-component { width: 100%;background: #fff;box-shadow: 0 5px 15px rgb(0 0 0 / 8%); border: 1px solid #dee2e6!important;border-top: 0px !important;}
#table-component tr:last-child td:first-child {border-bottom-left-radius: .25rem;}
#table-component tr:last-child td:last-child {border-bottom-right-radius: .25rem;}
#table-component thead {background-color: #00287a;color: #ffffff;font-weight: 700;}
#table-component thead h2, #table-component thead h3, #table-component thead h2, #table-component thead h4 {color: #ffffff;margin: 0px;}
#table-component td {vertical-align: top;width: 100%;padding: 1rem;}
#table-component tbody tr:nth-child(even) {background-color: #f2f3f4}
/* Displays table header on mobile and tablet */
@media (max-width: 767px) {
#table-component thead {display: -webkit-box;display: -ms-flexbox;display: flex;}
.btn-wrap .btn-secondary {margin-bottom: 20px;}
}
@media (min-width: 767px) {
.col-md-25 {-webkit-box-flex: 0;-ms-flex: 0 0 20%;flex: 0 0 20%;max-width: 20%;}
}
/* Fixes stylging on accordions */
#accordion .card .card-body, .accordion-component .card .card-body {max-height: 50vh;overflow-y: auto;}
#accordion .card .card-header h5.mb-0 button{white-space: normal;}

/* styling for bootstrap pills. See example on free guides and materials webpage  */
ul.nav-tabs{display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap;  width: 100%;border-bottom: none;}
 ul.nav-tabs li{margin:0px;}
ul.nav-tabs li a{display: block;background: #FFFFFF;text-decoration: none;padding: 10px 15px;text-transform: initial;border: 1px solid rgba(0, 0, 0, .125);border-top-left-radius: 5px;border-top-right-radius: 5px;color: #01277a; height: 100%;}
ul.nav-tabs > li > a:hover{border-width: 1px;background: #f8f9fa; color: #01277a;}
ul.nav-tabs > li > a:active {border-width: 1px;background: #01277a;color: #FFFFFF;border-color: #01277a;}
ul.nav-tabs > li > a.active{background: #01277a;color: #FFFFFF;}
ul.nav-tabs > li > a.active:hover{background: #01277a !important;color: #FFFFFF;}
@media (max-width: 767px) {
ul.nav-tabs{flex-wrap: wrap;}	
ul.nav-tabs li{width: 100%;}
.tab-content>.tab-pane {display: none !important;}		
.tab-content .tab-pane.active { display: block!important;}
}

/* styling for wrapping social media icons. See example on IBAHRI webpage  */  
.social-icons-wrap{ display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: baseline;-ms-flex-align: baseline;align-items: baseline;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.social-icons-wrap h4{font-weight: 700; font-size: 1.6rem;  margin-right: 12.5px; color: #01277a;}
.social-icons-wrap a { font-size: 1.6rem; margin: 0px 5px;}

/* Fixes aspect ratio issue on 25th anniversary video  */  
.embed-responsive-16by9.ibahri-video-25th:before{ padding-top: 42.6% !important;}


/* gives the IGI carousel a height on mobile devices when not in flex   */
@media (max-width: 767px) {
.IGI-carousel{min-height: 300px;}
.flex-change-sm .news_block .contentListing .col-12 {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0px 7.5px;
	margin-bottom: 1rem!important;
}
.flex-change-sm .publications {
    padding-bottom: 2.5px;
}
.flex-change-sm .news_block .contentListing .col-12 .articleItem {
    margin: 0px 7.5px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-change .news_block .contentListing .col-12 .articleItem img.card-img-top, .flex-change-sm .news_block .contentListing .col-12 .articleItem img.card-img-top {
    width: 33%;
    border-radius: 0px;
    max-width: 33.3%;
	height: 100px;
}
.flex-change-sm .articleItem h6.card-title{height: auto !important;}
.flex-change .articlesListView .articleContent, .flex-change-sm .articlesListView .articleContent {
padding: 0rem 1rem .5rem;
}		
}
.conference-banner-clone .bg-banner {
    background-color: #ececec;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 80px;
    padding-top: 25px;
    background-position: right;
}
.conference-banner-clone .bg-banner:before {
    content: "";
    height: 100%;
    width: 100%;
    background: linear-gradient( 0deg, rgba(199,84,84,.52), #04256f);
    left: 0;
    top: 0;
    position: absolute;
}
.overlayConferenceLinks {
    position: relative;
    margin-top: -130px;
    min-height: 200px;
    margin-bottom: 60px;
    background: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
}
.conferenceLinks .card-body {
    border-top: 1px solid #ccc;
    margin-right: 10px;
    margin-bottom: -1px;
    padding: 15px 10px;
    border-bottom: 1px solid #ccc;
}
.line-device:before {
    content: "";
    display: block;
    height: 0;
    border-top-width: .2em;
    border-top-style: solid;
    width: 2.625em;
    border-color: #b90053;
    margin-top: 10px;
}

@media only screen and (max-width: 767px) {
.overlayConferenceLinks .btn-mobile {
    margin-left: 0!important;
}
}
.pageLabel--IBA-Global-Showcase-Registration h1, .pageLabel--IBA-Global-Showcase-FAQs h1{display:none !important;}
.pageLabel--IBA-Global-Showcase-Registration .reglink{display: none !important;}
.pageLabel--IBA-Global-Showcase-FAQs .faqlink{display: none !important;}


.event-banner{
background-size: cover;
background-position: center;
width: 100%;
z-index: 1;
position: relative;
padding: 45px 30px 30px;
box-shadow: 0 5px 15px rgb(0 0 0 / 25%);
border-bottom: 1px solid #FFFFFF;
min-height:30vh;
}

.event-banner:before {
content: "";
height: 100%;
width: 100%;
background: linear-gradient( 
0deg, rgba(199,84,84,.52), #04256f);
left: 0;
top: 0;
position: absolute;
}
.event-banner .container{position: relative;z-index: 1;}