/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/************************************************GRID STYLES************************************/
.demo-span {
    border: 2px dotted grey;
    min-height: 32px;
    display: block;
    margin: 8px 0;
}

.bmo-container {
    margin-left: auto;
    margin-right: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    max-width: var(--default-screen-max);
}

    .bmo-container:after {
        clear: both;
        content: "";
        display: block;
    }

.row {
    min-height: 1px;
    clear: both;
    display: block;
}

    .row:after {
        clear: both;
        content: "";
        display: block;
    }

@media only screen and (max-width: 5000px) and (min-width: 1168px) {
    .grid-container {
        max-width: 1280px;
        width: 100%;
    }
}

@media only screen and (max-width: 1503px) and (min-width: 0px) {
    .bmo-container {
        min-width: 320px;
    }
}

.grid {
    display: block;
    float: left;
    padding: 0 var(--each-grid-gutter);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .grid:after {
        display: block;
        clear: both;
        content: "";
    }

    .grid.col-100 {
        width: 100%;
    }

    .grid.col-90 {
        width: 90%;
    }

    .grid.col-80 {
        width: 80%;
    }

    .grid.col-75 {
        width: 75%;
    }

    .grid.col-70 {
        width: 70%;
    }

    .grid.col-66 {
        width: 66.666666666%;
    }

    .grid.col-60 {
        width: 60%;
    }

    .grid.col-50 {
        width: 50%;
    }

    .grid.col-40 {
        width: 40%;
    }

    .grid.col-33 {
        width: 33.333333333%;
    }

    .grid.col-30 {
        width: 30%;
    }

    .grid.col-25 {
        width: 25%;
    }

    .grid.col-20 {
        width: 20%;
    }

    .grid.col-16 {
        width: 16.666666666%;
    }

    .grid.col-12 {
        width: 12.5%;
    }

    .grid.col-10 {
        width: 10%;
    }

    .grid.col-8 {
        width: 8.33333333333%;
    }

@media only screen and (max-width: 1279px) {
    .grid {
        padding-left: var(--each-grid-gutter);
        padding-right: var(--each-grid-gutter);
    }

        .grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .grid.xl-col-100 {
            width: 100%;
        }

        .grid.xl-col-90 {
            width: 90%;
        }

        .grid.xl-col-80 {
            width: 80%;
        }

        .grid.xl-col-75 {
            width: 75%;
        }

        .grid.xl-col-70 {
            width: 70%;
        }

        .grid.xl-col-66 {
            width: 66.666666666%;
        }

        .grid.xl-col-60 {
            width: 60%;
        }

        .grid.xl-col-50 {
            width: 50%;
        }

        .grid.xl-col-40 {
            width: 40%;
        }

        .grid.xl-col-33 {
            width: 33.333333333%;
        }

        .grid.xl-col-30 {
            width: 30%;
        }

        .grid.xl-col-25 {
            width: 25%;
        }

        .grid.xl-col-20 {
            width: 20%;
        }

        .grid.xl-col-16 {
            width: 16.666666666%;
        }

        .grid.xl-col-12 {
            width: 12.5%;
        }

        .grid.xl-col-10 {
            width: 10%;
        }

        .grid.xl-col-8 {
            width: 8.33333333333%;
        }
}

@media only screen and (max-width: 1023px) {
    .grid {
        display: block;
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: var(--each-grid-gutter);
        padding-right: var(--each-grid-gutter);
    }

        .grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .grid.lg-col-100 {
            width: 100%;
        }

        .grid.lg-col-90 {
            width: 90%;
        }

        .grid.lg-col-80 {
            width: 80%;
        }

        .grid.lg-col-75 {
            width: 75%;
        }

        .grid.lg-col-70 {
            width: 70%;
        }

        .grid.lg-col-66 {
            width: 66.666666666%;
        }

        .grid.lg-col-60 {
            width: 60%;
        }

        .grid.lg-col-50 {
            width: 50%;
        }

        .grid.lg-col-40 {
            width: 40%;
        }

        .grid.lg-col-33 {
            width: 33.333333333%;
        }

        .grid.lg-col-30 {
            width: 30%;
        }

        .grid.lg-col-25 {
            width: 25%;
        }

        .grid.lg-col-20 {
            width: 20%;
        }

        .grid.lg-col-16 {
            width: 16.666666666%;
        }

        .grid.lg-col-12 {
            width: 12.5%;
        }

        .grid.lg-col-10 {
            width: 10%;
        }

        .grid.lg-col-8 {
            width: 8.33333333333%;
        }
}

@media only screen and (max-width: 1064px) {
    .grid {
        padding-left: var(--md-each-grid-gutter);
        padding-right: var(--md-each-grid-gutter);
    }

        .grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .grid.md-col-100 {
            width: 100%;
        }

        .grid.md-col-90 {
            width: 90%;
        }

        .grid.md-col-80 {
            width: 80%;
        }

        .grid.md-col-75 {
            width: 75%;
        }

        .grid.md-col-70 {
            width: 70%;
        }

        .grid.md-col-66 {
            width: 66.666666666%;
        }

        .grid.md-col-60 {
            width: 60%;
        }

        .grid.md-col-50 {
            width: 50%;
        }

        .grid.md-col-40 {
            width: 40%;
        }

        .grid.md-col-33 {
            width: 33.333333333%;
        }

        .grid.md-col-30 {
            width: 30%;
        }

        .grid.md-col-25 {
            width: 25%;
        }

        .grid.md-col-20 {
            width: 20%;
        }

        .grid.md-col-16 {
            width: 16.666666666%;
        }

        .grid.md-col-12 {
            width: 12.5%;
        }

        .grid.md-col-10 {
            width: 10%;
        }

        .grid.md-col-8 {
            width: 8.33333333333%;
        }
}

@media only screen and (max-width: 599px) {
    .bmo-container {
        padding: 0 8px;
    }

    .grid {
        padding-left: var(--sm-each-grid-gutter);
        padding-right: var(--sm-each-grid-gutter);
    }

        .grid.sm-col-100 {
            width: 100%;
        }

        .grid.sm-col-75 {
            width: 75%;
        }

        .grid.sm-col-66 {
            width: 66.66666666666%;
        }

        .grid.sm-col-50 {
            width: 50%;
        }

        .grid.sm-col-33 {
            width: 33.333333333333333%;
        }

        .grid.sm-col-25 {
            width: 25%;
        }
}

@media only screen and (max-width: 374px) {
    .grid.xsm-col-100 {
        width: 100%;
    }

    .grid.xsm-col-75 {
        width: 75%;
    }

    .grid.xsm-col-66 {
        width: 66.66666666666%;
    }

    .grid.xsm-col-50 {
        width: 50%;
    }

    .grid.xsm-col-33 {
        width: 33.333333333333333%;
    }

    .grid.xsm-col-25 {
        width: 25%;
    }
}

.no-margin {
    margin: 0 !important;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/***********************************************************************************************/
/************************************************GRID STYLES************************************/
/***********************************************************************************************/
.bmo-container {
    margin-left: auto;
    margin-right: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .bmo-container.padding {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bmo-container:after {
        clear: both;
        content: "";
        display: block;
    }

.row {
    min-height: 1px;
    clear: both;
    display: block;
}

    .row:after {
        clear: both;
        content: "";
        display: block;
    }

.padding {
    margin-left: auto;
    margin-right: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
}

@media only screen and (max-width: 5000px) and (min-width: 1168px) {
    .bmo-container {
        max-width: 1280px;
        width: 100%;
    }
}

/******************************************************MOBILE FIRST GRID*************************************************/
/******************************************************MOBILE FIRST GRID*************************************************/
/******************************************************MOBILE FIRST GRID*************************************************/
@media only screen and (min-width: 0px) {
    .mf.grid {
        display: block;
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        tranition: all .3s ease;
        margin-left: 8px;
        margin-right: 8px;
    }

        .mf.grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .mf.grid.col-100 {
            width: -o-calc(100% - 16px);
            width: calc(100% - 16px);
        }

        .mf.grid.col-75 {
            width: -o-calc(75% - 16px);
            width: calc(75% - 16px);
        }

        .mf.grid.col-66 {
            width: -o-calc(66% - 16px);
            width: calc(66% - 16px);
        }

        .mf.grid.col-50 {
            width: -o-calc(50% - 16px);
            width: calc(50% - 16px);
        }

        .mf.grid.col-33 {
            width: -o-calc(33.33% - 16px);
            width: calc(33.33% - 16px);
        }

        .mf.grid.col-25 {
            width: -o-calc(25% - 16px);
            width: calc(25% - 16px);
        }
}

@media only screen and (min-width: 375px) {
    .mf.grid.sm-col-100 {
        width: -o-calc(100% - 16px);
        width: calc(100% - 16px);
    }

    .mf.grid.sm-col-50 {
        width: -o-calc(50% - 16px);
        width: calc(50% - 16px);
    }

    .mf.grid.sm-col-25 {
        width: -o-calc(25% - 16px);
        width: calc(25% - 16px);
    }
}

@media only screen and (min-width: 600px) {
    .mf.grid {
        margin-left: 12px;
        margin-right: 12px;
        /*****************************************************************************************************/
        /*********************************************GUTTER RESET********************************************/
        /*****************************************************************************************************/
    }

        .mf.grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .mf.grid.col-100 {
            width: -o-calc(100% - 24px);
            width: calc(100% - 24px);
        }

        .mf.grid.col-90 {
            width: -o-calc(90% - 24px);
            width: calc(90% - 24px);
        }

        .mf.grid.col-80 {
            width: -o-calc(80% - 24px);
            width: calc(80% - 24px);
        }

        .mf.grid.col-75 {
            width: -o-calc(75% - 24px);
            width: calc(75% - 24px);
        }

        .mf.grid.col-70 {
            width: -o-calc(70% - 24px);
            width: calc(70% - 24px);
        }

        .mf.grid.col-66 {
            width: -o-calc(66.6% - 24px);
            width: calc(66.6% - 24px);
        }

        .mf.grid.col-60 {
            width: -o-calc(60% - 24px);
            width: calc(60% - 24px);
        }

        .mf.grid.col-50 {
            width: -o-calc(50% - 24px);
            width: calc(50% - 24px);
        }

        .mf.grid.col-40 {
            width: -o-calc(40% - 24px);
            width: calc(40% - 24px);
        }

        .mf.grid.col-33 {
            width: -o-calc(33.3333333% - 24px);
            width: calc(33.3333333% - 24px);
        }

        .mf.grid.col-30 {
            width: -o-calc(30% - 24px);
            width: calc(30% - 24px);
        }

        .mf.grid.col-25 {
            width: -o-calc(100% / 4 - 24px);
            width: calc(100% / 4 - 24px);
        }

        .mf.grid.col-20 {
            width: -o-calc(100% / 5 - 24px);
            width: calc(100% / 5 - 24px);
        }

        .mf.grid.col-16 {
            width: -o-calc(100% / 6 - 24px);
            width: calc(100% / 6 - 24px);
        }

        .mf.grid.col-12 {
            width: -o-calc(100% / 8 - 24px);
            width: calc(100% / 8 - 24px);
        }

        .mf.grid.col-10 {
            width: -o-calc(10% - 24px);
            width: calc(10% - 24px);
        }

        .mf.grid.col-8 {
            width: -o-calc(100% / 12 - 24px);
            width: calc(100% / 12 - 24px);
        }

        .mf.grid.xl-col-100 {
            width: -o-calc(100% - 24px);
            width: calc(100% - 24px);
        }

        .mf.grid.xl-col-90 {
            width: -o-calc(90% - 24px);
            width: calc(90% - 24px);
        }

        .mf.grid.xl-col-80 {
            width: -o-calc(80% - 24px);
            width: calc(80% - 24px);
        }

        .mf.grid.xl-col-75 {
            width: -o-calc(75% - 24px);
            width: calc(75% - 24px);
        }

        .mf.grid.xl-col-70 {
            width: -o-calc(70% - 24px);
            width: calc(70% - 24px);
        }

        .mf.grid.xl-col-66 {
            width: -o-calc(66.6% - 24px);
            width: calc(66.6% - 24px);
        }

        .mf.grid.xl-col-60 {
            width: -o-calc(60% - 24px);
            width: calc(60% - 24px);
        }

        .mf.grid.xl-col-50 {
            width: -o-calc(50% - 24px);
            width: calc(50% - 24px);
        }

        .mf.grid.xl-col-40 {
            width: -o-calc(40% - 24px);
            width: calc(40% - 24px);
        }

        .mf.grid.xl-col-33 {
            width: -o-calc(33.3333333% - 24px);
            width: calc(33.3333333% - 24px);
        }

        .mf.grid.xl-col-30 {
            width: -o-calc(30% - 24px);
            width: calc(30% - 24px);
        }

        .mf.grid.xl-col-25 {
            width: -o-calc(100% / 4 - 24px);
            width: calc(100% / 4 - 24px);
        }

        .mf.grid.xl-col-20 {
            width: -o-calc(100% / 5 - 24px);
            width: calc(100% / 5 - 24px);
        }

        .mf.grid.xl-col-16 {
            width: -o-calc(100% / 6 - 24px);
            width: calc(100% / 6 - 24px);
        }

        .mf.grid.xl-col-12 {
            width: -o-calc(100% / 8 - 24px);
            width: calc(100% / 8 - 24px);
        }

        .mf.grid.xl-col-10 {
            width: -o-calc(10% - 24px);
            width: calc(10% - 24px);
        }

        .mf.grid.lg-col-100 {
            width: -o-calc(100% - 24px);
            width: calc(100% - 24px);
        }

        .mf.grid.lg-col-90 {
            width: -o-calc(90% - 24px);
            width: calc(90% - 24px);
        }

        .mf.grid.lg-col-80 {
            width: -o-calc(80% - 24px);
            width: calc(80% - 24px);
        }

        .mf.grid.lg-col-75 {
            width: -o-calc(75% - 24px);
            width: calc(75% - 24px);
        }

        .mf.grid.lg-col-70 {
            width: -o-calc(70% - 24px);
            width: calc(70% - 24px);
        }

        .mf.grid.lg-col-66 {
            width: -o-calc(66.6% - 24px);
            width: calc(66.6% - 24px);
        }

        .mf.grid.lg-col-60 {
            width: -o-calc(60% - 24px);
            width: calc(60% - 24px);
        }

        .mf.grid.lg-col-50 {
            width: -o-calc(50% - 24px);
            width: calc(50% - 24px);
        }

        .mf.grid.lg-col-40 {
            width: -o-calc(40% - 24px);
            width: calc(40% - 24px);
        }

        .mf.grid.lg-col-33 {
            width: -o-calc(33.3333333% - 24px);
            width: calc(33.3333333% - 24px);
        }

        .mf.grid.lg-col-30 {
            width: -o-calc(30% - 24px);
            width: calc(30% - 24px);
        }

        .mf.grid.lg-col-25 {
            width: -o-calc(100% / 4 - 24px);
            width: calc(100% / 4 - 24px);
        }

        .mf.grid.md-col-100 {
            width: -o-calc(100% - 24px);
            width: calc(100% - 24px);
        }

        .mf.grid.md-col-90 {
            width: -o-calc(90% - 24px);
            width: calc(90% - 24px);
        }

        .mf.grid.md-col-80 {
            width: -o-calc(80% - 24px);
            width: calc(80% - 24px);
        }

        .mf.grid.md-col-75 {
            width: -o-calc(75% - 24px);
            width: calc(75% - 24px);
        }

        .mf.grid.md-col-70 {
            width: -o-calc(70% - 24px);
            width: calc(70% - 24px);
        }

        .mf.grid.md-col-66 {
            width: -o-calc(66.6% - 24px);
            width: calc(66.6% - 24px);
        }

        .mf.grid.md-col-60 {
            width: -o-calc(60% - 24px);
            width: calc(60% - 24px);
        }

        .mf.grid.md-col-50 {
            width: -o-calc(50% - 24px);
            width: calc(50% - 24px);
        }

        .mf.grid.md-col-40 {
            width: -o-calc(40% - 24px);
            width: calc(40% - 24px);
        }

        .mf.grid.md-col-33 {
            width: -o-calc(33.3333333% - 24px);
            width: calc(33.3333333% - 24px);
        }

        .mf.grid.md-col-25 {
            width: -o-calc(25% - 24px);
            width: calc(25% - 24px);
        }
}

@media only screen and (min-width: 1065px) {
    .mf.grid {
        display: block;
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 16px;
        margin-right: 16px;
    }

        .mf.grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .mf.grid.col-100 {
            width: -o-calc(100% - 32px);
            width: calc(100% - 32px);
        }

        .mf.grid.col-90 {
            width: -o-calc(90% - 32px);
            width: calc(90% - 32px);
        }

        .mf.grid.col-80 {
            width: -o-calc(80% - 32px);
            width: calc(80% - 32px);
        }

        .mf.grid.col-75 {
            width: -o-calc(75% - 32px);
            width: calc(75% - 32px);
        }

        .mf.grid.col-70 {
            width: -o-calc(70% - 32px);
            width: calc(70% - 32px);
        }

        .mf.grid.col-66 {
            width: -o-calc(66.6% - 32px);
            width: calc(66.6% - 32px);
        }

        .mf.grid.col-60 {
            width: -o-calc(60% - 32px);
            width: calc(60% - 32px);
        }

        .mf.grid.col-50 {
            width: -o-calc(50% - 32px);
            width: calc(50% - 32px);
        }

        .mf.grid.col-40 {
            width: -o-calc(40% - 32px);
            width: calc(40% - 32px);
        }

        .mf.grid.col-33 {
            width: -o-calc(33.3333333% - 32px);
            width: calc(33.3333333% - 32px);
        }

        .mf.grid.col-30 {
            width: -o-calc(30% - 32px);
            width: calc(30% - 32px);
        }

        .mf.grid.col-25 {
            width: -o-calc(100% / 4 - 32px);
            width: calc(100% / 4 - 32px);
        }

        .mf.grid.col-20 {
            width: -o-calc(100% / 5 - 32px);
            width: calc(100% / 5 - 32px);
        }

        .mf.grid.col-16 {
            width: -o-calc(100% / 6 - 32px);
            width: calc(100% / 6 - 32px);
        }

        .mf.grid.col-12 {
            width: -o-calc(100% / 8 - 32px);
            width: calc(100% / 8 - 32px);
        }

        .mf.grid.col-10 {
            width: -o-calc(10% - 32px);
            width: calc(10% - 32px);
        }

        .mf.grid.col-8 {
            width: -o-calc(100% / 12 - 32px);
            width: calc(100% / 12 - 32px);
        }

        .mf.grid.xl-col-100 {
            width: -o-calc(100% - 32px);
            width: calc(100% - 32px);
        }

        .mf.grid.xl-col-90 {
            width: -o-calc(90% - 32px);
            width: calc(90% - 32px);
        }

        .mf.grid.xl-col-80 {
            width: -o-calc(80% - 32px);
            width: calc(80% - 32px);
        }

        .mf.grid.xl-col-75 {
            width: -o-calc(75% - 32px);
            width: calc(75% - 32px);
        }

        .mf.grid.xl-col-70 {
            width: -o-calc(70% - 32px);
            width: calc(70% - 32px);
        }

        .mf.grid.xl-col-66 {
            width: -o-calc(66.6% - 32px);
            width: calc(66.6% - 32px);
        }

        .mf.grid.xl-col-60 {
            width: -o-calc(60% - 32px);
            width: calc(60% - 32px);
        }

        .mf.grid.xl-col-50 {
            width: -o-calc(50% - 32px);
            width: calc(50% - 32px);
        }

        .mf.grid.xl-col-40 {
            width: -o-calc(40% - 32px);
            width: calc(40% - 32px);
        }

        .mf.grid.xl-col-33 {
            width: -o-calc(33.3333333% - 32px);
            width: calc(33.3333333% - 32px);
        }

        .mf.grid.xl-col-30 {
            width: -o-calc(30% - 32px);
            width: calc(30% - 32px);
        }

        .mf.grid.xl-col-25 {
            width: -o-calc(100% / 4 - 32px);
            width: calc(100% / 4 - 32px);
        }

        .mf.grid.xl-col-20 {
            width: -o-calc(100% / 5 - 32px);
            width: calc(100% / 5 - 32px);
        }

        .mf.grid.xl-col-16 {
            width: -o-calc(100% / 6 - 32px);
            width: calc(100% / 6 - 32px);
        }

        .mf.grid.xl-col-12 {
            width: -o-calc(100% / 8 - 32px);
            width: calc(100% / 8 - 32px);
        }

        .mf.grid.xl-col-10 {
            width: -o-calc(10% - 32px);
            width: calc(10% - 32px);
        }

        .mf.grid.lg-col-100 {
            width: -o-calc(100% - 32px);
            width: calc(100% - 32px);
        }

        .mf.grid.lg-col-90 {
            width: -o-calc(90% - 32px);
            width: calc(90% - 32px);
        }

        .mf.grid.lg-col-80 {
            width: -o-calc(80% - 32px);
            width: calc(80% - 32px);
        }

        .mf.grid.lg-col-75 {
            width: -o-calc(75% - 32px);
            width: calc(75% - 32px);
        }

        .mf.grid.lg-col-70 {
            width: -o-calc(70% - 32px);
            width: calc(70% - 32px);
        }

        .mf.grid.lg-col-66 {
            width: -o-calc(66.6% - 32px);
            width: calc(66.6% - 32px);
        }

        .mf.grid.lg-col-60 {
            width: -o-calc(60% - 32px);
            width: calc(60% - 32px);
        }

        .mf.grid.lg-col-50 {
            width: -o-calc(50% - 32px);
            width: calc(50% - 32px);
        }

        .mf.grid.lg-col-40 {
            width: -o-calc(40% - 32px);
            width: calc(40% - 32px);
        }

        .mf.grid.lg-col-33 {
            width: -o-calc(33.3333333% - 32px);
            width: calc(33.3333333% - 32px);
        }

        .mf.grid.lg-col-30 {
            width: -o-calc(30% - 32px);
            width: calc(30% - 32px);
        }

        .mf.grid.lg-col-25 {
            width: -o-calc(100% / 4 - 32px);
            width: calc(100% / 4 - 32px);
        }

        .mf.grid.md-col-100 {
            width: -o-calc(100% - 32px);
            width: calc(100% - 32px);
        }

        .mf.grid.md-col-90 {
            width: -o-calc(90% - 32px);
            width: calc(90% - 32px);
        }

        .mf.grid.md-col-80 {
            width: -o-calc(80% - 32px);
            width: calc(80% - 32px);
        }

        .mf.grid.md-col-75 {
            width: -o-calc(75% - 32px);
            width: calc(75% - 32px);
        }

        .mf.grid.md-col-70 {
            width: -o-calc(70% - 32px);
            width: calc(70% - 32px);
        }

        .mf.grid.md-col-66 {
            width: -o-calc(66.6% - 32px);
            width: calc(66.6% - 32px);
        }

        .mf.grid.md-col-60 {
            width: -o-calc(60% - 32px);
            width: calc(60% - 32px);
        }

        .mf.grid.md-col-50 {
            width: -o-calc(50% - 32px);
            width: calc(50% - 32px);
        }

        .mf.grid.md-col-40 {
            width: -o-calc(40% - 32px);
            width: calc(40% - 32px);
        }

        .mf.grid.md-col-33 {
            width: -o-calc(33.3333333% - 32px);
            width: calc(33.3333333% - 32px);
        }

        .mf.grid.md-col-25 {
            width: -o-calc(25% - 32px);
            width: calc(25% - 32px);
        }

        .mf.grid.lg-col-100 {
            width: -o-calc(100% - 32px);
            width: calc(100% - 32px);
        }

        .mf.grid.lg-col-90 {
            width: -o-calc(90% - 32px);
            width: calc(90% - 32px);
        }

        .mf.grid.lg-col-80 {
            width: -o-calc(80% - 32px);
            width: calc(80% - 32px);
        }

        .mf.grid.lg-col-75 {
            width: -o-calc(75% - 32px);
            width: calc(75% - 32px);
        }

        .mf.grid.lg-col-70 {
            width: -o-calc(70% - 32px);
            width: calc(70% - 32px);
        }

        .mf.grid.lg-col-66 {
            width: -o-calc(66.6% - 32px);
            width: calc(66.6% - 32px);
        }

        .mf.grid.lg-col-60 {
            width: -o-calc(60% - 32px);
            width: calc(60% - 32px);
        }

        .mf.grid.lg-col-50 {
            width: -o-calc(50% - 32px);
            width: calc(50% - 32px);
        }

        .mf.grid.lg-col-40 {
            width: -o-calc(40% - 32px);
            width: calc(40% - 32px);
        }

        .mf.grid.lg-col-33 {
            width: -o-calc(33.3333333% - 32px);
            width: calc(33.3333333% - 32px);
        }

        .mf.grid.lg-col-30 {
            width: -o-calc(30% - 32px);
            width: calc(30% - 32px);
        }

        .mf.grid.lg-col-25 {
            width: -o-calc(100% / 4 - 32px);
            width: calc(100% / 4 - 32px);
        }
}

@media only screen and (min-width: 1024px) {
    .mf.grid {
        display: block;
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 16px;
        margin-right: 16px;
    }

        .mf.grid:after {
            display: block;
            clear: both;
            content: "";
        }

        .mf.grid.xl-col-100 {
            width: -o-calc(100% - 32px);
            width: calc(100% - 32px);
        }

        .mf.grid.xl-col-90 {
            width: -o-calc(90% - 32px);
            width: calc(90% - 32px);
        }

        .mf.grid.xl-col-80 {
            width: -o-calc(80% - 32px);
            width: calc(80% - 32px);
        }

        .mf.grid.xl-col-75 {
            width: -o-calc(75% - 32px);
            width: calc(75% - 32px);
        }

        .mf.grid.xl-col-70 {
            width: -o-calc(70% - 32px);
            width: calc(70% - 32px);
        }

        .mf.grid.xl-col-66 {
            width: -o-calc(66.6% - 32px);
            width: calc(66.6% - 32px);
        }

        .mf.grid.xl-col-60 {
            width: -o-calc(60% - 32px);
            width: calc(60% - 32px);
        }

        .mf.grid.xl-col-50 {
            width: -o-calc(50% - 32px);
            width: calc(50% - 32px);
        }

        .mf.grid.xl-col-40 {
            width: -o-calc(40% - 32px);
            width: calc(40% - 32px);
        }

        .mf.grid.xl-col-33 {
            width: -o-calc(33.3333333% - 32px);
            width: calc(33.3333333% - 32px);
        }

        .mf.grid.xl-col-30 {
            width: -o-calc(30% - 32px);
            width: calc(30% - 32px);
        }

        .mf.grid.xl-col-25 {
            width: -o-calc(100% / 4 - 32px);
            width: calc(100% / 4 - 32px);
        }

        .mf.grid.xl-col-20 {
            width: -o-calc(100% / 5 - 32px);
            width: calc(100% / 5 - 32px);
        }

        .mf.grid.xl-col-16 {
            width: -o-calc(100% / 6 - 32px);
            width: calc(100% / 6 - 32px);
        }

        .mf.grid.xl-col-12 {
            width: -o-calc(100% / 8 - 32px);
            width: calc(100% / 8 - 32px);
        }

        .mf.grid.xl-col-10 {
            width: -o-calc(10% - 32px);
            width: calc(10% - 32px);
        }

        .mf.grid.xl-col-8 {
            width: -o-calc(100% / 12 - 32px);
            width: calc(100% / 12 - 32px);
        }
}

@media only screen and (min-width: 1280px) {
    .mf.grid.max-col-100 {
        width: -o-calc(100% - 32px);
        width: calc(100% - 32px);
    }

    .mf.grid.max-col-90 {
        width: -o-calc(90% - 32px);
        width: calc(90% - 32px);
    }

    .mf.grid.max-col-80 {
        width: -o-calc(80% - 32px);
        width: calc(80% - 32px);
    }

    .mf.grid.max-col-75 {
        width: -o-calc(75% - 32px);
        width: calc(75% - 32px);
    }

    .mf.grid.max-col-70 {
        width: -o-calc(70% - 32px);
        width: calc(70% - 32px);
    }

    .mf.grid.max-col-66 {
        width: -o-calc(66.6% - 32px);
        width: calc(66.6% - 32px);
    }

    .mf.grid.max-col-60 {
        width: -o-calc(60% - 32px);
        width: calc(60% - 32px);
    }

    .mf.grid.max-col-50 {
        width: -o-calc(50% - 32px);
        width: calc(50% - 32px);
    }

    .mf.grid.max-col-40 {
        width: -o-calc(40% - 32px);
        width: calc(40% - 32px);
    }

    .mf.grid.max-col-33 {
        width: -o-calc(33.3333333% - 32px);
        width: calc(33.3333333% - 32px);
    }

    .mf.grid.max-col-30 {
        width: -o-calc(30% - 32px);
        width: calc(30% - 32px);
    }

    .mf.grid.max-col-25 {
        width: -o-calc(100% / 4 - 32px);
        width: calc(100% / 4 - 32px);
    }

    .mf.grid.max-col-20 {
        width: -o-calc(100% / 5 - 32px);
        width: calc(100% / 5 - 32px);
    }

    .mf.grid.max-col-16 {
        width: -o-calc(100% / 6 - 32px);
        width: calc(100% / 6 - 32px);
    }

    .mf.grid.max-col-12 {
        width: -o-calc(100% / 8 - 32px);
        width: calc(100% / 8 - 32px);
    }

    .mf.grid.max-col-10 {
        width: -o-calc(10% - 32px);
        width: calc(10% - 32px);
    }

    .mf.grid.max-col-8 {
        width: -o-calc(100% / 12 - 32px);
        width: calc(100% / 12 - 32px);
    }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.bmo-container-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1280px;
    margin: auto;
}

.flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-fill {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex-equal {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.flex-col-expand {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.flex-equal-fixed {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.flow-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flow-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flow-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flow-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

/* --- END --- Classes for declaring flex parent, default orientation and wrap --- */
.jc-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.jc-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.jc-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.jc-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.jc-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.ai-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.ai-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.ai-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ai-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.ai-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.ac-start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

.ac-end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}

.ac-center {
    -ms-flex-line-pack: center;
    align-content: center;
}

.ac-between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}

.ac-around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

.ac-stretch {
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

.flex {
    padding: 0 var(--each-grid-gutter);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .flex.col-100 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .flex.col-90 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }

    .flex.col-80 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }

    .flex.col-75 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .flex.col-70 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .flex.col-66 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666666666%;
        flex: 0 0 66.666666666%;
        max-width: 66.6666%;
    }

    .flex.col-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
    }

    .flex.col-50 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .flex.col-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
    }

    .flex.col-33 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333333%;
        flex: 0 0 33.333333333%;
    }

    .flex.col-30 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
    }

    .flex.col-25 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }

    .flex.col-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
    }

    .flex.col-16 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666666666%;
        flex: 0 0 16.666666666%;
    }

    .flex.col-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
    }

    .flex.col-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
    }

    .flex.col-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333333333%;
        flex: 0 0 8.33333333333%;
    }

@media only screen and (max-width: 1279px) {
    .flex {
        padding: 0 var(--each-grid-gutter);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .flex.xl-col-100 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }

        .flex.xl-col-90 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 90%;
            flex: 0 0 90%;
            max-width: 90%;
        }

        .flex.xl-col-80 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 80%;
            flex: 0 0 80%;
            max-width: 80%;
        }

        .flex.xl-col-75 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 75%;
            flex: 0 0 75%;
            max-width: 75%;
        }

        .flex.xl-col-70 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 70%;
            flex: 0 0 70%;
            max-width: 70%;
        }

        .flex.xl-col-66 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 66.666666666%;
            flex: 0 0 66.666666666%;
            max-width: 66.666666%;
        }

        .flex.xl-col-60 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 60%;
            flex: 0 0 60%;
            max-width: 60%;
        }

        .flex.xl-col-50 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }

        .flex.xl-col-40 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }

        .flex.xl-col-33 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 33.333333333%;
            flex: 0 0 33.333333333%;
            max-width: 33.3333333%;
        }

        .flex.xl-col-30 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 30%;
            flex: 0 0 30%;
            max-width: 30%;
        }

        .flex.xl-col-25 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }

        .flex.xl-col-20 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }

        .flex.xl-col-16 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 16.666666666%;
            flex: 0 0 16.666666666%;
            max-width: 16.66666666%;
        }

        .flex.xl-col-12 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 12.5%;
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }

        .flex.xl-col-10 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
            max-width: 10%;
        }

        .flex.xl-col-8 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 8.33333333333%;
            flex: 0 0 8.33333333333%;
            max-width: 8.3333333%;
        }
}

@media only screen and (max-width: 1023px) {
    .flex.lg-col-100 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .flex.lg-col-90 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }

    .flex.lg-col-80 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }

    .flex.lg-col-75 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .flex.lg-col-70 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .flex.lg-col-66 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666666666%;
        flex: 0 0 66.666666666%;
        max-width: 66.66666666%;
    }

    .flex.lg-col-60 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60%;
        flex: 0 0 60%;
        max-width: 60%;
    }

    .flex.lg-col-50 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .flex.lg-col-40 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 40%;
        flex: 0 0 40%;
        max-width: 40%;
    }

    .flex.lg-col-33 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333333%;
        flex: 0 0 33.333333333%;
        max-width: 33.3333333%;
    }

    .flex.lg-col-30 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .flex.lg-col-25 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .flex.lg-col-20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .flex.lg-col-16 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666666666%;
        flex: 0 0 16.666666666%;
        max-width: 16.6666666%;
    }

    .flex.lg-col-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .flex.lg-col-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }

    .flex.lg-col-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.33333333333%;
        flex: 0 0 8.33333333333%;
        max-width: 8.3333333%;
    }
}

@media only screen and (max-width: 1064px) {
    .flex {
        padding: 0 var(--md-each-grid-gutter);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .flex.md-col-100 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }

        .flex.md-col-90 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 90%;
            flex: 0 0 90%;
            max-width: 90%;
        }

        .flex.md-col-80 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 80%;
            flex: 0 0 80%;
            max-width: 80%;
        }

        .flex.md-col-75 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 75%;
            flex: 0 0 75%;
            max-width: 75%;
        }

        .flex.md-col-70 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 70%;
            flex: 0 0 70%;
            max-width: 70%;
        }

        .flex.md-col-66 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 66.666666666%;
            flex: 0 0 66.666666666%;
            max-width: 66.6666666%;
        }

        .flex.md-col-60 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 60%;
            flex: 0 0 60%;
            max-width: 60%;
        }

        .flex.md-col-50 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }

        .flex.md-col-40 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 40%;
            flex: 0 0 40%;
            max-width: 40%;
        }

        .flex.md-col-33 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 33.333333333%;
            flex: 0 0 33.333333333%;
            max-width: 33.3333333%;
        }

        .flex.md-col-30 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 30%;
            flex: 0 0 30%;
            max-width: 30%;
        }

        .flex.md-col-25 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }

        .flex.md-col-20 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }

        .flex.md-col-16 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 16.666666666%;
            flex: 0 0 16.666666666%;
            max-width: 16.666666666%;
        }

        .flex.md-col-12 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 12.5%;
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }

        .flex.md-col-10 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
            max-width: 10%;
        }

        .flex.md-col-8 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 8.33333333333%;
            flex: 0 0 8.33333333333%;
            max-width: 8.3333333333%;
        }
}

@media only screen and (max-width: 599px) {
    .bmo-container-flex {
        padding: 0 var(--sm-each-grid-gutter);
        min-width: 320px;
    }

    .flex {
        padding: 0 8px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .flex.sm-col-100 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }

        .flex.sm-col-50 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
        }

        .flex.sm-col-33 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 33.3333333%;
            flex: 0 0 33.3333333%;
            max-width: 33.333333%;
        }

        .flex.sm-col-25 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
        }
}

@media only screen and (max-width: 374px) {
    .flex.xsm-col-100 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .flex.xsm-col-50 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .flex.xsm-col-33 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333333%;
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }

    .flex.xsm-col-25 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/***********************************************************************************************/
/************************************************SPACING STYLES*********************************/
/***********************************************************************************************/
.p-xxxxsmall {
    padding-bottom: 4px;
    padding-top: 4px;
}

.pt-xxxxsmall {
    padding-top: 4px;
}

.pb-xxxxsmall {
    padding-bottom: 4px;
}

.p-xxxsmall {
    padding-bottom: 8px;
    padding-top: 8px;
}

.pt-xxxsmall {
    padding-top: 8px;
}

.pb-xxxsmall {
    padding-bottom: 8px;
}

.p-xxsmall {
    padding-bottom: 16px;
    padding-top: 16px;
}

.pt-xxsmall {
    padding-top: 16px;
}

.pb-xxsmall {
    padding-bottom: 16px;
}

.p-xsmall {
    padding-bottom: 24px;
    padding-top: 24px;
}

.pt-xsmall {
    padding-top: 24px;
}

.pb-xsmall {
    padding-bottom: 24px;
}

.p-small {
    padding-bottom: 32px;
    padding-top: 32px;
}

.pt-small {
    padding-top: 32px;
}

.pb-small {
    padding-bottom: 32px;
}

.p-medium {
    padding-bottom: 40px;
    padding-top: 40px;
}

.pt-medium {
    padding-top: 40px;
}

.pb-medium {
    padding-bottom: 40px;
}

.p-large {
    padding-bottom: 48px;
    padding-top: 48px;
}

.pt-large {
    padding-top: 48px;
}

.pb-large {
    padding-bottom: 48px;
}

.p-xlarge {
    padding-bottom: 80px;
    padding-top: 80px;
}

.pt-xlarge {
    padding-top: 80px;
}

.pb-xlarge {
    padding-bottom: 80px;
}

.p-xxlarge {
    padding-bottom: 120px;
    padding-top: 120px;
}

.pt-xxlarge {
    padding-top: 120px;
}

.pb-xxlarge {
    padding-bottom: 120px;
}

.m-xxxxsmall {
    margin-bottom: 4px;
    margin-top: 4px;
}

.mt-xxxxsmall {
    margin-top: 4px;
}

.mb-xxxxsmall {
    margin-bottom: 4px;
}

.m-xxxsmall {
    margin-bottom: 8px;
    margin-top: 8px;
}

.mt-xxxsmall {
    margin-top: 8px;
}

.mb-xxxsmall {
    margin-bottom: 8px;
}

.m-xxsmall {
    margin-bottom: 16px;
    margin-top: 16px;
}

.mt-xxsmall {
    margin-top: 16px;
}

.mb-xxsmall {
    margin-bottom: 16px;
}

.m-xsmall {
    margin-bottom: 24px;
    margin-top: 24px;
}

.mt-xsmall {
    margin-top: 24px;
}

.mb-xsmall {
    margin-bottom: 24px;
}

.m-small {
    margin-bottom: 32px;
    margin-top: 32px;
}

.mt-small {
    margin-top: 32px;
}

.mb-small {
    margin-bottom: 32px;
}

.m-medium {
    margin-bottom: 40px;
    margin-top: 40px;
}

.mt-medium {
    margin-top: 40px;
}

.mb-medium {
    margin-bottom: 40px;
}

.m-large {
    margin-bottom: 48px;
    margin-top: 48px;
}

.mt-large {
    margin-top: 48px;
}

.mb-large {
    margin-bottom: 48px;
}

.m-xlarge {
    margin-bottom: 80px;
    margin-top: 80px;
}

.mt-xlarge {
    margin-top: 80px;
}

.mb-xlarge {
    margin-bottom: 80px;
}

.m-xxlarge {
    margin-bottom: 120px;
    margin-top: 120px;
}

.mt-xxlarge {
    margin-top: 120px;
}

.mb-xxlarge {
    margin-bottom: 120px;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.alert-notification {
    display: block;
    padding: 16px 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .alert-notification:after {
        content: "";
        display: block;
        clear: both;
    }

    .alert-notification .bmo-container {
        background-size: 24px 24px;
        background-position: 16px 0;
        background-repeat: no-repeat;
        padding-left: 56px;
    }

        .alert-notification .bmo-container .primary.micro, .alert-notification .bmo-container a.primary.micro {
            margin-left: -8px;
        }

        .alert-notification .bmo-container .tertiary,
        .alert-notification .bmo-container a.button.tertiary {
            margin-left: -12px;
            height: 32px;
            line-height: 24px;
            padding: 0 8px;
            padding-left: 8px;
            padding-right: 8px;
            text-align: left;
        }

    .alert-notification .alert-message-wrap {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        width: 75%;
    }

    .alert-notification p {
        margin: 0;
        font-size: 1.4rem;
        line-height: 24px;
    }

    .alert-notification.alert-success {
        background: rgba(11, 130, 36, 0.1);
        border-bottom: 2px solid #0B8224;
    }

        .alert-notification.alert-success .bmo-container {
            background-image: url(../img/icons/24/24-success-green.svg);
        }

    .alert-notification.alert-info {
        background: rgba(0, 121, 193, 0.1);
        border-bottom: 2px solid #0075be;
    }

        .alert-notification.alert-info .bmo-container {
            background-image: url(../img/icons/24/24-announcement-blue.svg);
        }

    .alert-notification.alert-warning {
        background-color: #FFFAEB;
        border-bottom: 2px solid #D07704;
    }

        .alert-notification.alert-warning .bmo-container {
            background-image: url(../img/icons/24/24-warning-yellow.svg);
        }

    .alert-notification.alert-danger {
        background: rgba(237, 28, 36, 0.1);
        border-bottom: 2px solid #C81414;
    }

        .alert-notification.alert-danger .bmo-container {
            background-image: url(../img/icons/24/24-error-red.svg);
        }

    .alert-notification .alert-close {
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin: 0;
        display: block;
        float: right;
        border: none;
        border-radius: 4px;
        background-color: transparent;
        background-image: url(../img/icons/24/24-close-granite.svg);
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: center center;
        min-width: 24px;
        padding: 0;
    }

@media only screen and (max-width: 599px) {
    .alert-notification button.tertiary,
    .alert-notification a.button.tertiary {
        margin-left: -32px;
        width: auto;
    }

    .alert-notification .alert-message-wrap {
        width: calc(100% - 32px);
    }

    .alert-notification .alert-close {
        width: 24px;
        height: 24px;
        cursor: pointer;
        margin: 0;
        display: block;
        float: right;
        border: none;
        background-color: transparent;
        background-image: url(../img/icons/24/24-close-granite.svg);
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: center center;
        min-width: 24px;
        padding: 0;
        position: relative;
        right: -8px;
    }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.profile-image {
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    border: 1px solid #D8D8D8;
    margin-right: 16px;
    overflow: hidden;
}

    .profile-image.avatar {
        background-position: center center;
        background-repeat: no-repeat;
    }

        .profile-image.avatar.a {
            background-image: url(../img/profile-avatars/a.svg);
        }

        .profile-image.avatar.b {
            background-image: url(../img/profile-avatars/b.svg);
        }

        .profile-image.avatar.c {
            background-image: url(../img/profile-avatars/c.svg);
        }

        .profile-image.avatar.d {
            background-image: url(../img/profile-avatars/d.svg);
        }

        .profile-image.avatar.e {
            background-image: url(../img/profile-avatars/e.svg);
        }

        .profile-image.avatar.f {
            background-image: url(../img/profile-avatars/f.svg);
        }

        .profile-image.avatar.g {
            background-image: url(../img/profile-avatars/g.svg);
        }

        .profile-image.avatar.h {
            background-image: url(../img/profile-avatars/h.svg);
        }

        .profile-image.avatar.i {
            background-image: url(../img/profile-avatars/i.svg);
        }

        .profile-image.avatar.j {
            background-image: url(../img/profile-avatars/j.svg);
        }

        .profile-image.avatar.k {
            background-image: url(../img/profile-avatars/k.svg);
        }

        .profile-image.avatar.l {
            background-image: url(../img/profile-avatars/l.svg);
        }

        .profile-image.avatar.m {
            background-image: url(../img/profile-avatars/m.svg);
        }

        .profile-image.avatar.n {
            background-image: url(../img/profile-avatars/n.svg);
        }

        .profile-image.avatar.o {
            background-image: url(../img/profile-avatars/o.svg);
        }

        .profile-image.avatar.p {
            background-image: url(../img/profile-avatars/p.svg);
        }

        .profile-image.avatar.q {
            background-image: url(../img/profile-avatars/q.svg);
        }

        .profile-image.avatar.r {
            background-image: url(../img/profile-avatars/r.svg);
        }

        .profile-image.avatar.s {
            background-image: url(../img/profile-avatars/s.svg);
        }

        .profile-image.avatar.t {
            background-image: url(../img/profile-avatars/t.svg);
        }

        .profile-image.avatar.u {
            background-image: url(../img/profile-avatars/u.svg);
        }

        .profile-image.avatar.v {
            background-image: url(../img/profile-avatars/v.svg);
        }

        .profile-image.avatar.w {
            background-image: url(../img/profile-avatars/w.svg);
        }

        .profile-image.avatar.x {
            background-image: url(../img/profile-avatars/x.svg);
        }

        .profile-image.avatar.y {
            background-image: url(../img/profile-avatars/y.svg);
        }

        .profile-image.avatar.z {
            background-image: url(../img/profile-avatars/z.svg);
        }

@media only screen and (max-width: 599px) {
    .profile-image {
        height: 48px;
        width: 48px;
    }
}

button:hover > .icon.blue,
.button:hover > .icon.blue,
.link:hover > .icon.blue {
    -webkit-filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
    filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
}

button:focus > .icon.blue,
.button:focus > .icon.blue,
.link:focus > .icon.blue {
    -webkit-filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
    filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
}

@supports (-ms-ime-align: auto) {
    .icon,
    .icon.blue {
        -webkit-filter: unset;
        filter: unset;
    }

        .icon:hover,
        .icon.blue:hover {
            -webkit-filter: brightness(70%);
            filter: brightness(70%);
        }

    button:focus > .icon.blue,
    button:hover > .icon.blue,
    .link:hover > .icon.blue,
    .link:focus > .icon.blue {
        -webkit-filter: brightness(70%);
        filter: brightness(70%);
    }
}

.icon {
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    -webkit-filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(1103%) hue-rotate(177deg) brightness(94%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(1103%) hue-rotate(177deg) brightness(94%) contrast(102%);
}

    .icon:hover {
        -webkit-filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
        filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
    }

    .icon.error-red, .icon.announcement-blue, .icon.warning-yellow, .icon.success-green, .icon.inline-error, .icon.positive, .icon.negative {
        -webkit-filter: grayscale(0) invert(0) brightness(100%);
        filter: grayscale(0) invert(0) brightness(100%);
    }

    .icon.blue {
        -webkit-filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(1103%) hue-rotate(177deg) brightness(94%) contrast(102%);
        filter: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(1103%) hue-rotate(177deg) brightness(94%) contrast(102%);
    }

        .icon.blue:hover {
            -webkit-filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
            filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
        }

        .icon.blue.error-red, .icon.blue.announcement-blue, .icon.blue.warning-yellow, .icon.blue.success-green, .icon.blue.inline-error, .icon.blue.positive, .icon.blue.negative {
            -webkit-filter: grayscale(0) invert(0) brightness(100%);
            filter: grayscale(0) invert(0) brightness(100%);
        }

    .icon.white {
        -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(122deg) brightness(112%) contrast(101%);
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(122deg) brightness(112%) contrast(101%);
        background-color: transparent;
    }

        .icon.white:hover {
            -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(122deg) brightness(112%) contrast(101%);
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(122deg) brightness(112%) contrast(101%);
            background-color: transparent;
        }

        .icon.white.error-red, .icon.white.announcement-blue, .icon.white.warning-yellow, .icon.white.success-green, .icon.white.inline-error, .icon.white.positive, .icon.white.negative {
            -webkit-filter: grayscale(0) invert(0) brightness(100%);
            filter: grayscale(0) invert(0) brightness(100%);
        }

    .icon.granite {
        -webkit-filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%);
        filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%);
    }

        .icon.granite:hover {
            -webkit-filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%);
            filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%);
            background-color: transparent;
        }

        .icon.granite.error-red, .icon.granite.announcement-blue, .icon.granite.warning-yellow, .icon.granite.success-green, .icon.granite.inline-error {
            -webkit-filter: grayscale(0) invert(0) brightness(100%);
            filter: grayscale(0) invert(0) brightness(100%);
        }

    .icon.ultramarine {
        -webkit-filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
        filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
    }

@supports (-ms-ime-align: auto) {
    .icon,
    .icon.blue {
        -webkit-filter: brightness(0) saturate(0) brightness(0) invert(0) sepia(0) saturate(0) hue-rotate(0) brightness(0) contrast(0);
        filter: brightness(0) saturate(0) brightness(0) invert(0) sepia(0) saturate(0) hue-rotate(0) brightness(0) contrast(0);
        -webkit-filter: none;
        filter: none;
    }
}

.icon:focus {
    -webkit-filter: none;
    filter: none;
    outline: 0;
}

.icon.small {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.icon.medium {
    width: 24px;
    height: 24px;
    display: inline-block;
}

.icon.large {
    width: 48px;
    height: 48px;
    display: inline-block;
}

/*******************************************************************/
/*****************************SMALL ICON STYLES*********************/
/*******************************************************************/
.icon.small.checkmark {
    background-image: url(../img/icons/16/16-checkmark-blue.svg);
}

.icon.small.baby-chevy-down {
    background-image: url(../img/icons/16/16-baby-chevy-down-blue.svg);
}

.icon.small.baby-chevy-up {
    background-image: url(../img/icons/16/16-baby-chevy-up-blue.svg);
}

.icon.small.baby-chevy-right {
    background-image: url(../img/icons/16/16-baby-chevy-right-blue.svg);
}

.icon.small.baby-chevy-left {
    background-image: url(../img/icons/16/16-baby-chevy-left-blue.svg);
}

.icon.medium.baby-chevy-left {
    background-image: url(../img/icons/16/16-baby-chevy-left-blue.svg);
    background-size: 16px 16px !important;
}

.icon.medium.baby-chevy-down {
    background-image: url(../img/icons/16/16-baby-chevy-down-blue.svg);
    background-size: 16px 16px !important;
}

.icon.medium.baby-chevy-up {
    background-image: url(../img/icons/16/16-baby-chevy-up-blue.svg);
    background-size: 16px 16px !important;
}

.icon.medium.baby-chevy-right {
    background-image: url(../img/icons/16/16-baby-chevy-right-blue.svg);
    background-size: 16px 16px !important;
}

.icon.small.chevron-down {
    background-image: url(../img/icons/16/16-chevron-down-blue.svg);
}

.icon.small.chevron-left {
    background-image: url(../img/icons/16/16-chevron-left-blue.svg);
}

.icon.small.chevron-up {
    background-image: url(../img/icons/16/16-chevron-up-blue.svg);
}

.icon.small.chevron-right {
    background-image: url(../img/icons/16/16-chevron-right-blue.svg);
}

.icon.small.filter {
    background-image: url(../img/icons/16/16-filter-blue.svg);
}

.icon.small.fingerprint {
    background-image: url(../img/icons/16/16-fingerprint-blue.svg);
}

.icon.small.star {
    background-image: url(../img/icons/16/16-star-blue.svg);
}

.icon.small.recurring {
    background-image: url(../img/icons/16/16-recurring-blue.svg);
}

.icon.small.inline-error {
    background-image: url(../img/icons/16/16-inline-error.svg);
}

/*******************************************************************/
/****************************MEDIUM ICON STYLES*********************/
/*******************************************************************/
.icon.medium.airplane {
    background-image: url(../img/icons/24/24-airplane-blue.svg);
}

.icon.medium.alert {
    background-image: url(../img/icons/24/24-alert-blue.svg);
}

.icon.medium.arrow-left {
    background-image: url(../img/icons/24/24-arrow-left-blue.svg);
}

.icon.medium.arrow-right {
    background-image: url(../img/icons/24/24-arrow-right-blue.svg);
}

.icon.medium.arrow-up {
    background-image: url(../img/icons/24/24-arrow-up-blue.svg);
}

    .icon.medium.arrow-up.positive {
        background-image: url(../img/icons/24/24-arrow-up-positive.svg);
    }

.icon.medium.arrow-down {
    background-image: url(../img/icons/24/24-arrow-down-blue.svg);
}

    .icon.medium.arrow-down.negative {
        background-image: url(../img/icons/24/24-arrow-down-negative.svg);
    }

.icon.medium.bar-graph {
    background-image: url(../img/icons/24/24-bar-graph-blue.svg);
}

.icon.medium.bill {
    background-image: url(../img/icons/24/24-bill-blue.svg);
}

.icon.medium.book {
    background-image: url(../img/icons/24/24-book-blue.svg);
}

.icon.medium.business {
    background-image: url(../img/icons/24/24-business-blue.svg);
}

    .icon.medium.business.ultramarine {
        background-image: url(../img/icons/24/24-business-ultramarine.svg);
    }

.icon.medium.calculator {
    background-image: url(../img/icons/24/24-calculator-blue.svg);
}

.icon.medium.calendar {
    background-image: url(../img/icons/24/24-calendar-blue.svg);
}

.icon.medium.camera {
    background-image: url(../img/icons/24/24-camera-blue.svg);
}

.icon.medium.card {
    background-image: url(../img/icons/24/24-card-blue.svg);
}

.icon.medium.car {
    background-image: url(../img/icons/24/24-car-blue.svg);
}

.icon.medium.celebration {
    background-image: url(../img/icons/24/24-celebration-blue.svg);
}

.icon.medium.checkmark {
    background-image: url(../img/icons/24/24-checkmark-blue.svg);
}

.icon.medium.chevron-down {
    background-image: url(../img/icons/24/24-chevron-down-blue.svg);
}

.icon.medium.chevron-up {
    background-image: url(../img/icons/24/24-chevron-up-blue.svg);
}

.icon.medium.chevron-right {
    background-image: url(../img/icons/24/24-chevron-right-blue.svg);
}

.icon.medium.chevron-left {
    background-image: url(../img/icons/24/24-chevron-left-blue.svg);
}

.icon.medium.close {
    background-image: url(../img/icons/24/24-close-blue.svg);
}

.icon.medium.collapse {
    background-image: url(../img/icons/24/24-collapse-blue.svg);
}

.icon.medium.contact {
    background-image: url(../img/icons/24/24-contact-blue.svg);
}

.icon.medium.controls {
    background-image: url(../img/icons/24/24-controls-blue.svg);
}

.icon.medium.copy {
    background-image: url(../img/icons/24/24-copy-blue.svg);
}

.icon.medium.document {
    background-image: url(../img/icons/24/24-document-blue.svg);
}

.icon.medium.document-download {
    background-image: url(../img/icons/24/24-document-download-blue.svg);
}

.icon.medium.download {
    background-image: url(../img/icons/24/24-download-blue.svg);
}

.icon.medium.edit {
    background-image: url(../img/icons/24/24-edit-blue.svg);
}

.icon.medium.education {
    background-image: url(../img/icons/24/24-education-blue.svg);
}

.icon.medium.enclosed-add {
    background-image: url(../img/icons/24/24-enclosed-add-blue.svg);
}

.icon.medium.enclosed-check {
    background-image: url(../img/icons/24/24-enclosed-check-blue.svg);
}

.icon.medium.enclosed-close {
    background-image: url(../img/icons/24/24-enclosed-close-blue.svg);
}

.icon.medium.enclosed-help {
    background-image: url(../img/icons/24/24-enclosed-help-blue.svg);
}

.icon.medium.enclosed-minus {
    background-image: url(../img/icons/24/24-enclosed-minus-blue.svg);
}

.icon.medium.enclosed-more {
    background-image: url(../img/icons/24/24-enclosed-more-blue.svg);
}

.icon.medium.external-link {
    background-image: url(../img/icons/24/24-external-link-blue.svg);
}

.icon.medium.exit {
    background-image: url(../img/icons/24/24-exit-blue.svg);
}

.icon.medium.expand {
    background-image: url(../img/icons/24/24-expand-blue.svg);
}

.icon.medium.globe {
    background-image: url(../img/icons/24/24-globe-blue.svg);
}

.icon.medium.home {
    background-image: url(../img/icons/24/24-home-blue.svg);
}

.icon.medium.information {
    background-image: url(../img/icons/24/24-information-blue.svg);
}

.icon.medium.insurance {
    background-image: url(../img/icons/24/24-insurance-blue.svg);
}

.icon.medium.lightbulb {
    background-image: url(../img/icons/24/24-lightbulb-blue.svg);
}

.icon.medium.loading {
    background-image: url(../img/icons/24/24-loading-blue.svg);
}

.icon.medium.location {
    background-image: url(../img/icons/24/24-location-blue.svg);
}

.icon.medium.lock {
    background-image: url(../img/icons/24/24-lock-blue.svg);
}

.icon.medium.mail {
    background-image: url(../img/icons/24/24-mail-blue.svg);
}

.icon.medium.maintenance {
    background-image: url(../img/icons/24/24-maintenance-blue.svg);
}

.icon.medium.medical {
    background-image: url(../img/icons/24/24-medical-blue.svg);
}

.icon.medium.mail {
    background-image: url(../img/icons/24/24-mail-blue.svg);
}

.icon.medium.microphone {
    background-image: url(../img/icons/24/24-microphone-blue.svg);
}

.icon.medium.mobile-phone {
    background-image: url(../img/icons/24/24-mobile-phone-blue.svg);
}

.icon.medium.money-bag {
    background-image: url(../img/icons/24/24-money-bag-blue.svg);
}

.icon.medium.money {
    background-image: url(../img/icons/24/24-money-blue.svg);
}

.icon.medium.more-horizontal {
    background-image: url(../img/icons/24/24-more-horizontal-blue.svg);
}

.icon.medium.more-vertical {
    background-image: url(../img/icons/24/24-more-vertical-blue.svg);
}

.icon.medium.part-time {
    background-image: url(../img/icons/24/24-part-time-blue.svg);
}

.icon.medium.percentage {
    background-image: url(../img/icons/24/24-percentage-blue.svg);
}

.icon.medium.phone {
    background-image: url(../img/icons/24/24-phone-blue.svg);
}

.icon.medium.pie-chart {
    background-image: url(../img/icons/24/24-pie-chart-blue.svg);
}

.icon.medium.profile {
    background-image: url(../img/icons/24/24-profile-blue.svg);
}

.icon.medium.reload {
    background-image: url(../img/icons/24/24-reload-blue.svg);
}

.icon.medium.rewards {
    background-image: url(../img/icons/24/24-rewards-blue.svg);
}

.icon.medium.search {
    background-image: url(../img/icons/24/24-search-blue.svg);
}

.icon.medium.send-plane {
    background-image: url(../img/icons/24/24-send-plane-blue.svg);
}

.icon.medium.settings {
    background-image: url(../img/icons/24/24-settings-blue.svg);
}

.icon.medium.social-messenger {
    background-image: url(../img/icons/24/24-social-messenger-blue.svg);
}

.icon.medium.social-twitter {
    background-image: url(../img/icons/24/24-social-twitter-blue.svg);
}

.icon.medium.spouse {
    background-image: url(../img/icons/24/24-spouse-blue.svg);
}

.icon.medium.start-date {
    background-image: url(../img/icons/24/24-start-date-blue.svg);
}

.icon.medium.suitcase {
    background-image: url(../img/icons/24/24-suitcase-blue.svg);
}

.icon.medium.time {
    background-image: url(../img/icons/24/24-time-blue.svg);
}

.icon.medium.transfer-arrow {
    background-image: url(../img/icons/24/24-transfer-arrow-blue.svg);
}

.icon.medium.trash {
    background-image: url(../img/icons/24/24-trash-blue.svg);
}

.icon.medium.unlock {
    background-image: url(../img/icons/24/24-unlock-blue.svg);
}

.icon.medium.upload {
    background-image: url(../img/icons/24/24-upload-blue.svg);
}

.icon.medium.wallet {
    background-image: url(../img/icons/24/24-wallet-blue.svg);
}

.icon.medium.announcement-blue {
    background-image: url(../img/icons/24/24-announcement-blue.svg);
}

.icon.medium.error-red {
    background-image: url(../img/icons/24/24-error-red.svg);
}

.icon.medium.success-green {
    background-image: url(../img/icons/24/24-success-green.svg);
}

.icon.medium.warning-yellow {
    background-image: url(../img/icons/24/24-warning-yellow.svg);
}

/*******************************************************************/
/***************************LARGE ICONS*****************************/
/*******************************************************************/
.icon.large.accelerate {
    background-image: url(../img/icons/48/48-accelerate-blue.svg);
}

.icon.large.accessibility {
    background-image: url(../img/icons/48/48-accessibility-blue.svg);
}

.icon.large.account {
    background-image: url(../img/icons/48/48-account-blue.svg);
}

.icon.large.achievement {
    background-image: url(../img/icons/48/48-achievement-blue.svg);
}

.icon.large.achieving-targets {
    background-image: url(../img/icons/48/48-achieving-targets-blue.svg);
}

.icon.large.airplane {
    background-image: url(../img/icons/48/48-airplane-blue.svg);
}

.icon.large.alert {
    background-image: url(../img/icons/48/48-alert-blue.svg);
}

.icon.large.appointment {
    background-image: url(../img/icons/48/48-appointment-blue.svg);
}

.icon.large.atm {
    background-image: url(../img/icons/48/48-atm-blue.svg);
}

.icon.large.baby {
    background-image: url(../img/icons/48/48-baby-blue.svg);
}

.icon.large.bill {
    background-image: url(../img/icons/48/48-bill-blue.svg);
}

.icon.large.branch {
    background-image: url(../img/icons/48/48-branch-blue.svg);
}

.icon.large.boat {
    background-image: url(../img/icons/48/48-boat-blue.svg);
}

.icon.large.branch-achievement {
    background-image: url(../img/icons/48/48-branch-achievement-blue.svg);
}

.icon.large.branch-operations {
    background-image: url(../img/icons/48/48-branch-operations-blue.svg);
}

.icon.large.branch-target {
    background-image: url(../img/icons/48/48-branch-target-blue.svg);
}

.icon.large.branch-target-met {
    background-image: url(../img/icons/48/48-branch-target-met-blue.svg);
}

.icon.large.budget {
    background-image: url(../img/icons/48/48-budget-blue.svg);
}

.icon.large.business {
    background-image: url(../img/icons/48/48-business-blue.svg);
}

.icon.large.calculator {
    background-image: url(../img/icons/48/48-calculator-blue.svg);
}

.icon.large.calendar {
    background-image: url(../img/icons/48/48-calendar-blue.svg);
}

.icon.large.call-center {
    background-image: url(../img/icons/48/48-call-center-blue.svg);
}

.icon.large.camera {
    background-image: url(../img/icons/48/48-camera-blue.svg);
}

.icon.large.car {
    background-image: url(../img/icons/48/48-car-blue.svg);
}

.icon.large.car-loans {
    background-image: url(../img/icons/48/48-car-loans-blue.svg);
}

.icon.large.cash {
    background-image: url(../img/icons/48/48-cash-blue.svg);
}

.icon.large.celebration {
    background-image: url(../img/icons/48/48-celebration-blue.svg);
}

.icon.large.certification {
    background-image: url(../img/icons/48/48-certification-blue.svg);
}

.icon.large.charity {
    background-image: url(../img/icons/48/48-charity-blue.svg);
}

.icon.large.chat {
    background-image: url(../img/icons/48/48-chat-blue.svg);
}

.icon.large.cheque {
    background-image: url(../img/icons/48/48-cheque-blue.svg);
}

.icon.large.chequing-account {
    background-image: url(../img/icons/48/48-chequing-account-blue.svg);
}

.icon.large.chevron-down {
    background-image: url(../img/icons/48/48-chevron-down-blue.svg);
}

.icon.large.chevron-left {
    background-image: url(../img/icons/48/48-chevron-left-blue.svg);
}

.icon.large.chevron-up {
    background-image: url(../img/icons/48/48-chevron-up-blue.svg);
}

.icon.large.chevron-right {
    background-image: url(../img/icons/48/48-chevron-right-blue.svg);
}

.icon.large.classroom {
    background-image: url(../img/icons/48/48-classroom-blue.svg);
}

.icon.large.close {
    background-image: url(../img/icons/48/48-close-blue.svg);
}

.icon.large.coaching {
    background-image: url(../img/icons/48/48-coaching-blue.svg);
}

.icon.large.combined-statement {
    background-image: url(../img/icons/48/48-combined-statement-blue.svg);
}

.icon.large.compare {
    background-image: url(../img/icons/48/48-compare-blue.svg);
}

.icon.large.compass {
    background-image: url(../img/icons/48/48-compass-blue.svg);
}

.icon.large.contributing {
    background-image: url(../img/icons/48/48-contributing-blue.svg);
}

.icon.large.controls {
    background-image: url(../img/icons/48/48-controls-blue.svg);
}

.icon.large.couple {
    background-image: url(../img/icons/48/48-couple-blue.svg);
}

.icon.large.credit-card {
    background-image: url(../img/icons/48/48-credit-card-blue.svg);
}

.icon.large.credit-cards {
    background-image: url(../img/icons/48/48-credit-cards-blue.svg);
}

.icon.large.currency-exchange {
    background-image: url(../img/icons/48/48-currency-exchange-blue.svg);
}

.icon.large.customer {
    background-image: url(../img/icons/48/48-customer-blue.svg);
}

.icon.large.customer-conversations {
    background-image: url(../img/icons/48/48-customer-conversations-blue.svg);
}

.icon.large.customer-experience {
    background-image: url(../img/icons/48/48-customer-experience-blue.svg);
}

.icon.large.customer-in-branch {
    background-image: url(../img/icons/48/48-customer-in-branch-blue.svg);
}

.icon.large.customer-loyalty {
    background-image: url(../img/icons/48/48-customer-loyalty-blue.svg);
}

.icon.large.customer-pulse {
    background-image: url(../img/icons/48/48-customer-pulse-blue.svg);
}

.icon.large.daycare {
    background-image: url(../img/icons/48/48-daycare-blue.svg);
}

.icon.large.debit-card {
    background-image: url(../img/icons/48/48-debit-card-blue.svg);
}

.icon.large.deposits {
    background-image: url(../img/icons/48/48-deposits-blue.svg);
}

.icon.large.desktop {
    background-image: url(../img/icons/48/48-desktop-blue.svg);
}

.icon.large.digital-channels {
    background-image: url(../img/icons/48/48-digital-channels-blue.svg);
}

.icon.large.dining {
    background-image: url(../img/icons/48/48-dining-blue.svg);
}

.icon.large.dollar-climb {
    background-image: url(../img/icons/48/48-dollar-climb-blue.svg);
}

.icon.large.download {
    background-image: url(../img/icons/48/48-download-blue.svg);
}

.icon.large.edit {
    background-image: url(../img/icons/48/48-edit-blue.svg);
}

.icon.large.education {
    background-image: url(../img/icons/48/48-education-blue.svg);
}

.icon.large.e-learning {
    background-image: url(../img/icons/48/48-e-learning-blue.svg);
}

.icon.large.employee {
    background-image: url(../img/icons/48/48-employee-blue.svg);
}

.icon.large.enclosed-add {
    background-image: url(../img/icons/48/48-enclosed-add-blue.svg);
}

.icon.large.enclosed-check {
    background-image: url(../img/icons/48/48-enclosed-check-blue.svg);
}

.icon.large.enclosed-minus {
    background-image: url(../img/icons/48/48-enclosed-minus-blue.svg);
}

.icon.large.enrollment {
    background-image: url(../img/icons/48/48-enrollment-blue.svg);
}

.icon.large.entertainment {
    background-image: url(../img/icons/48/48-entertainment-blue.svg);
}

.icon.large.environment {
    background-image: url(../img/icons/48/48-environment-blue.svg);
}

.icon.large.euro-climb {
    background-image: url(../img/icons/48/48-euro-climb-blue.svg);
}

.icon.large.external-link {
    background-image: url(../img/icons/48/48-external-link-blue.svg);
}

.icon.large.family {
    background-image: url(../img/icons/48/48-family-blue.svg);
}

.icon.large.family-home {
    background-image: url(../img/icons/48/48-family-home-blue.svg);
}

.icon.large.fingerprint {
    background-image: url(../img/icons/48/48-fingerprint-blue.svg);
}

.icon.large.gift {
    background-image: url(../img/icons/48/48-gift-blue.svg);
}

.icon.large.globe {
    background-image: url(../img/icons/48/48-globe-blue.svg);
}

.icon.large.goals {
    background-image: url(../img/icons/48/48-goals-blue.svg);
}

.icon.large.home {
    background-image: url(../img/icons/48/48-home-blue.svg);
}

.icon.large.insurance {
    background-image: url(../img/icons/48/48-insurance-blue.svg);
}

.icon.large.investment {
    background-image: url(../img/icons/48/48-investment-blue.svg);
}

.icon.large.laptop {
    background-image: url(../img/icons/48/48-laptop-blue.svg);
}

.icon.large.leads {
    background-image: url(../img/icons/48/48-leads-blue.svg);
}

.icon.large.growth {
    background-image: url(../img/icons/48/48-growth-blue.svg);
}

.icon.large.legal-document {
    background-image: url(../img/icons/48/48-legal-document-blue.svg);
}

.icon.large.light-bulb {
    background-image: url(../img/icons/48/48-light-bulb-blue.svg);
}

.icon.large.loan {
    background-image: url(../img/icons/48/48-loan-blue.svg);
}

.icon.large.location {
    background-image: url(../img/icons/48/48-location-blue.svg);
}

.icon.large.mail {
    background-image: url(../img/icons/48/48-mail-blue.svg);
}

.icon.large.maintenance {
    background-image: url(../img/icons/48/48-maintenance-blue.svg);
}

.icon.large.market-factors {
    background-image: url(../img/icons/48/48-market-factors-blue.svg);
}

.icon.large.market-fact-pack {
    background-image: url(../img/icons/48/48-market-fact-pack-blue.svg);
}

.icon.large.market-opportunity {
    background-image: url(../img/icons/48/48-market-opportunity-blue.svg);
}

.icon.large.markets {
    background-image: url(../img/icons/48/48-markets-blue.svg);
}

.icon.large.medical {
    background-image: url(../img/icons/48/48-medical-blue.svg);
}

.icon.large.mobile {
    background-image: url(../img/icons/48/48-mobile-blue.svg);
}

.icon.large.mortality {
    background-image: url(../img/icons/48/48-mortality-blue.svg);
}

.icon.large.mortgage {
    background-image: url(../img/icons/48/48-mortgage-blue.svg);
}

.icon.large.nav-cheque {
    background-image: url(../img/icons/48/48-nav-cheque-blue.svg);
}

.icon.large.net-performance-score {
    background-image: url(../img/icons/48/48-net-performance-score-blue.svg);
}

.icon.large.new-message {
    background-image: url(../img/icons/48/48-new-message-blue.svg);
}

.icon.large.offline {
    background-image: url(../img/icons/48/48-offline-blue.svg);
}

.icon.large.one-on-one {
    background-image: url(../img/icons/48/48-one-on-one-blue.svg);
}

.icon.large.online {
    background-image: url(../img/icons/48/48-online-blue.svg);
}

.icon.large.partnership {
    background-image: url(../img/icons/48/48-partnership-blue.svg);
}

.icon.large.part-time {
    background-image: url(../img/icons/48/48-part-time-blue.svg);
}

.icon.large.pdf {
    background-image: url(../img/icons/48/48-pdf-blue.svg);
}

.icon.large.people-fact-pack {
    background-image: url(../img/icons/48/48-people-fact-pack-blue.svg);
}

.icon.large.percentage {
    background-image: url(../img/icons/48/48-percentage-blue.svg);
}

.icon.large.performance {
    background-image: url(../img/icons/48/48-performance-blue.svg);
}

.icon.large.phone {
    background-image: url(../img/icons/48/48-phone-blue.svg);
}

.icon.large.pie-chart {
    background-image: url(../img/icons/48/48-pie-chart-blue.svg);
}

.icon.large.play {
    background-image: url(../img/icons/48/48-play-blue.svg);
}

.icon.large.playbook {
    background-image: url(../img/icons/48/48-playbook-blue.svg);
}

.icon.large.premium {
    background-image: url(../img/icons/48/48-premium-blue.svg);
}

.icon.large.primary-customer {
    background-image: url(../img/icons/48/48-primary-customer-blue.svg);
}

.icon.large.print {
    background-image: url(../img/icons/48/48-print-blue.svg);
}

.icon.large.product {
    background-image: url(../img/icons/48/48-product-blue.svg);
}

.icon.large.products {
    background-image: url(../img/icons/48/48-products-blue.svg);
}

.icon.large.profile {
    background-image: url(../img/icons/48/48-profile-blue.svg);
}

.icon.large.qualification {
    background-image: url(../img/icons/48/48-qualification-blue.svg);
}

.icon.large.recurring-bill {
    background-image: url(../img/icons/48/48-recurring-bill-blue.svg);
}

.icon.large.recurring {
    background-image: url(../img/icons/48/48-recurring-blue.svg);
}

.icon.large.referrals {
    background-image: url(../img/icons/48/48-referrals-blue.svg);
}

.icon.large.resp {
    background-image: url(../img/icons/48/48-resp-blue.svg);
}

.icon.large.retirement {
    background-image: url(../img/icons/48/48-retirement-blue.svg);
}

.icon.large.rewards {
    background-image: url(../img/icons/48/48-rewards-blue.svg);
}

.icon.large.rmb-climb {
    background-image: url(../img/icons/48/48-rmb-climb-blue.svg);
}

.icon.large.sale {
    background-image: url(../img/icons/48/48-sale-blue.svg);
}

.icon.large.sales-play {
    background-image: url(../img/icons/48/48-sales-play-blue.svg);
}

.icon.large.savings {
    background-image: url(../img/icons/48/48-savings-blue.svg);
}

.icon.large.scorecard {
    background-image: url(../img/icons/48/48-scorecard-blue.svg);
}

.icon.large.search {
    background-image: url(../img/icons/48/48-search-blue.svg);
}

.icon.large.security {
    background-image: url(../img/icons/48/48-security-blue.svg);
}

.icon.large.self-study {
    background-image: url(../img/icons/48/48-self-study-blue.svg);
}

.icon.large.send-plane {
    background-image: url(../img/icons/48/48-send-plane-blue.svg);
}

.icon.large.shopping {
    background-image: url(../img/icons/48/48-shopping-blue.svg);
}

.icon.large.side-by-side {
    background-image: url(../img/icons/48/48-side-by-side-blue.svg);
}

.icon.large.social-facebook {
    background-image: url(../img/icons/48/48-social-facebook-blue.svg);
}

.icon.large.social-google {
    background-image: url(../img/icons/48/48-social-google-blue.svg);
}

.icon.large.social-messenger {
    background-image: url(../img/icons/48/48-social-messenger-blue.svg);
}

.icon.large.social-linkedin {
    background-image: url(../img/icons/48/48-social-linkedin-blue.svg);
}

.icon.large.social-outlook {
    background-image: url(../img/icons/48/48-social-outlook-blue.svg);
}

.icon.large.social-rss-feed {
    background-image: url(../img/icons/48/48-social-rss-feed-blue.svg);
}

.icon.large.social-twitter {
    background-image: url(../img/icons/48/48-social-twitter-blue.svg);
}

.icon.large.social-youtube {
    background-image: url(../img/icons/48/48-social-youtube-blue.svg);
}

.icon.large.spouse {
    background-image: url(../img/icons/48/48-spouse-blue.svg);
}

.icon.large.start-date {
    background-image: url(../img/icons/48/48-start-date-blue.svg);
}

.icon.large.success {
    background-image: url(../img/icons/48/48-success-blue.svg);
}

.icon.large.swap-view {
    background-image: url(../img/icons/48/48-swap-view-blue.svg);
}

.icon.large.tablet {
    background-image: url(../img/icons/48/48-tablet-blue.svg);
}

.icon.large.take-action {
    background-image: url(../img/icons/48/48-take-action-blue.svg);
}

.icon.large.tap {
    background-image: url(../img/icons/48/48-tap-blue.svg);
}

.icon.large.target {
    background-image: url(../img/icons/48/48-target-blue.svg);
}

.icon.large.tax-planning {
    background-image: url(../img/icons/48/48-tax-planning-blue.svg);
}

.icon.large.team {
    background-image: url(../img/icons/48/48-team-blue.svg);
}

.icon.large.thumbs-up {
    background-image: url(../img/icons/48/48-thumbs-up-blue.svg);
}

.icon.large.tools-to-reach-target {
    background-image: url(../img/icons/48/48-tools-to-reach-target-blue.svg);
}

.icon.large.top-performer {
    background-image: url(../img/icons/48/48-top-performer-blue.svg);
}

.icon.large.transfer {
    background-image: url(../img/icons/48/48-transfer-blue.svg);
}

.icon.large.travellers-insurance {
    background-image: url(../img/icons/48/48-travellers-insurance-blue.svg);
}

.icon.large.trophy {
    background-image: url(../img/icons/48/48-trophy-blue.svg);
}

.icon.large.truck {
    background-image: url(../img/icons/48/48-truck-blue.svg);
}

.icon.large.unlock {
    background-image: url(../img/icons/48/48-unlock-blue.svg);
}

.icon.large.vacation {
    background-image: url(../img/icons/48/48-vacation-blue.svg);
}

.icon.large.virtual-classroom {
    background-image: url(../img/icons/48/48-virtual-classroom-blue.svg);
}

.icon.large.walkabout-observation {
    background-image: url(../img/icons/48/48-walkabout-observation-blue.svg);
}

.icon.large.wallet {
    background-image: url(../img/icons/48/48-wallet-blue.svg);
}

.icon.large.warning {
    background-image: url(../img/icons/48/48-warning-blue.svg);
}

.icon.large.wellness {
    background-image: url(../img/icons/48/48-wellness-blue.svg);
}

/**********************************BUTTON STYLES*****************************************/
/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

:root {
    /***global button variables***/
    --button-border-radius: 28px;
    --button-border-radius-default: 32px;
    --button-border-radius-small: 28px;
    --button-border-radius-micro: 4px;
    --button-border-radius-icon: 4px;
    --button-padding: 0 32px;
    --button-font-size: 1.4rem;
    /***primary***/
    /***secondary***/
    --secondary-bg-color: transparent;
    --secondary-bg-color-disabled: transparent;
    --secondary-bg-color-over: transparent;
    /***tertiary***/
    --tertiary-bg-color: transparent;
    --tertiary-bg-color-disabled: transparent;
    --tertiary-bg-color-over: transparent;
}

button.primary,
.button.primary {
    background: #0075be;
    border: 2px solid #0075be;
    color: #ffffff;
    display: inline-block;
    border-radius: var(--button-border-radius-default);
    padding: var(--button-padding);
    font-family: "heebo";
    font-weight: 700;
    font-size: var(--button-font-size);
    cursor: pointer;
    text-transform: uppercase;
    line-height: 52px;
    overflow: hidden;
    margin: 8px 32px 8px 0;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 132px;
    text-align: center;
}

    button.primary:hover, button.primary:focus,
    .button.primary:hover,
    .button.primary:focus {
        background: #005587;
        border: 2px solid #005587;
        color: #ffffff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    button.primary:disabled, button.primary.disabled,
    .button.primary:disabled,
    .button.primary.disabled {
        background-color: #ECECEE;
        color: #646c76;
        border: 2px solid #646c76;
        cursor: none;
    }

        button.primary:disabled:hover, button.primary.disabled:hover,
        .button.primary:disabled:hover,
        .button.primary.disabled:hover {
            background-color: #ECECEE;
            border: 2px solid #646c76;
            cursor: default;
            color: #646c76;
        }

    button.primary.small,
    .button.primary.small {
        border-radius: var(--button-border-radius-small);
        font-style: normal;
        font-weight: 500;
        height: unset;
        line-height: 16px;
        padding: 8px 8px;
        min-width: 80px;
        margin-right: 16px;
    }

    button.primary.micro,
    .button.primary.micro {
        height: 32px;
        line-height: 16px;
        padding: 6px 8px;
        background-color: transparent;
        border-radius: var(--button-border-radius-micro);
        color: #0075be;
        min-width: auto;
        border: 2px solid transparent;
        margin-right: 16px;
    }

        button.primary.micro:hover, button.primary.micro:focus,
        .button.primary.micro:hover,
        .button.primary.micro:focus {
            background-color: transparent;
            color: #005587;
        }

        button.primary.micro:hover,
        .button.primary.micro:hover {
            border: 2px solid transparent;
        }

        button.primary.micro:disabled, button.primary.micro.disabled,
        .button.primary.micro:disabled,
        .button.primary.micro.disabled {
            color: #646c76;
            cursor: default;
        }

            button.primary.micro:disabled:hover, button.primary.micro.disabled:hover,
            .button.primary.micro:disabled:hover,
            .button.primary.micro.disabled:hover {
                color: #646c76;
            }

    button.primary .icon.medium,
    .button.primary .icon.medium {
        position: relative;
        top: 12px;
        margin-right: 8px;
        margin-left: -6px;
        float: left;
    }

        button.primary .icon.medium.pull-right,
        .button.primary .icon.medium.pull-right {
            margin-left: 8px;
            margin-right: unset;
        }

    button.primary.no-marg,
    .button.primary.no-marg {
        margin: unset;
        margin-left: unset;
        margin-right: unset;
        margin-top: unset;
        margin-bottom: unset;
    }

        button.primary.no-marg.small,
        .button.primary.no-marg.small {
            margin: unset;
            margin-left: unset;
            margin-right: unset;
            margin-top: unset;
            margin-bottom: unset;
        }

        button.primary.no-marg.micro,
        .button.primary.no-marg.micro {
            margin: unset;
            margin-left: unset;
            margin-right: unset;
            margin-top: unset;
            margin-bottom: unset;
        }

button.secondary,
.button.secondary {
    font-family: "heebo";
    background: var(--secondary-bg-color);
    border: 2px solid #0075be;
    color: #0075be;
    height: 56px;
    border-radius: var(--button-border-radius-default);
    padding: var(--button-padding);
    font-weight: 700;
    font-size: var(--button-font-size);
    cursor: pointer;
    text-transform: uppercase;
    line-height: 52px;
    position: relative;
    overflow: hidden;
    margin: 8px 32px 8px 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 132px;
    text-align: center;
}

    button.secondary:hover,
    .button.secondary:hover {
        background: rgba(255, 255, 255, 0);
        border: 2px solid #005587;
        color: #005587;
    }

    button.secondary:focus,
    .button.secondary:focus {
        border: 2px solid #005587;
        color: #005587;
    }

    button.secondary:disabled, button.secondary.disabled,
    .button.secondary:disabled,
    .button.secondary.disabled {
        background: rgba(0, 0, 0, 0);
        border: 2px solid #ECECEE;
        cursor: default;
        color: #646c76;
    }

        button.secondary:disabled:hover, button.secondary.disabled:hover,
        .button.secondary:disabled:hover,
        .button.secondary.disabled:hover {
            background: rgba(0, 0, 0, 0);
            border: 2px solid #ECECEE;
            cursor: default;
            color: #646c76;
        }

    button.secondary .icon.medium,
    .button.secondary .icon.medium {
        position: relative;
        top: 12px;
        margin-right: 8px;
        margin-left: -6px;
        float: left;
    }

        button.secondary .icon.medium.pull-right,
        .button.secondary .icon.medium.pull-right {
            margin-left: 8px;
            margin-right: unset;
        }

    button.secondary.small,
    .button.secondary.small {
        border-radius: var(--button-border-radius-small);
        font-style: normal;
        font-weight: 500;
        height: unset;
        line-height: 16px;
        padding: 8px 8px;
        min-width: 80px;
        margin-right: 16px;
    }

    button.secondary.micro,
    .button.secondary.micro {
        height: 32px;
        line-height: 16px;
        padding: 6px 8px;
        background-color: transparent;
        border-radius: var(--button-border-radius-micro);
        color: #0075be;
        border: 2px solid transparent;
        min-width: auto;
        font-weight: 400;
        margin-right: 16px;
    }

        button.secondary.micro:hover, button.secondary.micro:focus,
        .button.secondary.micro:hover,
        .button.secondary.micro:focus {
            background-color: transparent;
            color: #005587;
        }

        button.secondary.micro:hover,
        .button.secondary.micro:hover {
            border: 2px solid transparent;
        }

        button.secondary.micro:disabled, button.secondary.micro.disabled,
        .button.secondary.micro:disabled,
        .button.secondary.micro.disabled {
            color: #646c76;
            cursor: default;
        }

            button.secondary.micro:disabled:hover, button.secondary.micro.disabled:hover,
            .button.secondary.micro:disabled:hover,
            .button.secondary.micro.disabled:hover {
                color: #646c76;
                border: 2px solid transparent;
            }

    button.secondary.no-marg,
    .button.secondary.no-marg {
        margin: unset;
        margin-left: unset;
        margin-right: unset;
        margin-top: unset;
        margin-bottom: unset;
    }

        button.secondary.no-marg.small,
        .button.secondary.no-marg.small {
            margin: unset;
            margin-left: unset;
            margin-right: unset;
            margin-top: unset;
            margin-bottom: unset;
        }

        button.secondary.no-marg.micro,
        .button.secondary.no-marg.micro {
            margin: unset;
            margin-left: unset;
            margin-right: unset;
            margin-top: unset;
            margin-bottom: unset;
        }

button.tertiary,
.button.tertiary {
    background-color: var(--tertiary-bg-color);
    border: 2px solid transparent;
    color: #0075be;
    height: 56px;
    border-radius: var(--button-border-radius-default);
    padding: var(--button-padding);
    font-weight: 700;
    font-size: var(--button-font-size);
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    line-height: 52px;
    overflow: hidden;
    margin: 8px 32px 8px 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 132px;
    text-align: center;
}

    button.tertiary span,
    .button.tertiary span {
        color: #0075be;
        line-height: 20px;
        display: inline-block;
        border-bottom: 2px solid transparent;
    }

    button.tertiary:hover span,
    .button.tertiary:hover span {
        color: #005587;
        line-height: 20px;
        display: inline-block;
        border-bottom: 2px solid #005587;
    }

    button.tertiary:hover .icon,
    .button.tertiary:hover .icon {
        border-bottom: 2px solid rgba(0, 0, 0, 0);
    }

    button.tertiary:focus span,
    .button.tertiary:focus span {
        color: #005587;
    }

    button.tertiary:focus .icon,
    .button.tertiary:focus .icon {
        border-bottom: 2px solid rgba(0, 0, 0, 0);
    }

    button.tertiary.disabled, button.tertiary:disabled,
    .button.tertiary.disabled,
    .button.tertiary:disabled {
        cursor: default;
        color: #646c76;
    }

        button.tertiary.disabled:hover, button.tertiary:disabled:hover,
        .button.tertiary.disabled:hover,
        .button.tertiary:disabled:hover {
            cursor: default;
            color: #646c76;
        }

            button.tertiary.disabled:hover .icon, button.tertiary:disabled:hover .icon,
            .button.tertiary.disabled:hover .icon,
            .button.tertiary:disabled:hover .icon {
                border-bottom: 2px solid transparent;
            }

        button.tertiary.disabled span, button.tertiary:disabled span,
        .button.tertiary.disabled span,
        .button.tertiary:disabled span {
            border: none;
            cursor: default;
            color: #646c76;
            background-color: transparent;
        }

        button.tertiary.disabled .icon, button.tertiary:disabled .icon,
        .button.tertiary.disabled .icon,
        .button.tertiary:disabled .icon {
            border-bottom: 2px solid transparent;
        }

    button.tertiary.small,
    .button.tertiary.small {
        border-radius: var(--button-border-radius-small);
        height: 36px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 16px;
        padding: 0 8px;
        min-width: 80px;
        margin-right: 16px;
    }

    button.tertiary .icon.medium,
    .button.tertiary .icon.medium {
        position: relative;
        top: 12px;
        margin-right: 8px;
        margin-left: -6px;
        float: left;
    }

        button.tertiary .icon.medium.pull-right,
        .button.tertiary .icon.medium.pull-right {
            margin-left: 8px;
            margin-right: unset;
        }

    button.tertiary.no-marg,
    .button.tertiary.no-marg {
        margin: unset;
        margin-left: unset;
        margin-right: unset;
        margin-top: unset;
        margin-bottom: unset;
    }

        button.tertiary.no-marg.small,
        .button.tertiary.no-marg.small {
            margin: unset;
            margin-left: unset;
            margin-right: unset;
            margin-top: unset;
            margin-bottom: unset;
        }

        button.tertiary.no-marg.micro,
        .button.tertiary.no-marg.micro {
            margin: unset;
            margin-left: unset;
            margin-right: unset;
            margin-top: unset;
            margin-bottom: unset;
        }

/********************BUTTON ANIMATIONS***************************/
.primary::-moz-focus-inner,
.secondary::-moz-focus-inner,
.tertiary::-moz-focus-inner,
.tertiary-icon::-moz-focus-inner,
.icon-button::-moz-focus-inner {
    border: 0;
}

a.button {
    display: block;
    float: left;
}

    .primary:after,
    .secondary:after,
    .tertiary:after,
    .tertiary-icon:after,
    a.button:after {
        content: '';
        display: block;
        left: 50%;
        position: absolute;
        top: 50%;
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
        background: #010101;
        border-radius: 100%;
        opacity: .3;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}

@keyframes ripple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}

.primary:not(:active):after,
.secondary:not(:active):after,
.tertiary:not(:active):after,
.tertiary-icon:not(:active):after,
a.button:not(:active):after {
    -webkit-animation: ripple .3s ease-in;
    animation: ripple .3s ease-in;
}

.primary:after,
.secondary:after,
.tertiary:after,
.tertiary-icon:after,
a.button:after {
    visibility: hidden;
}

.primary:focus:after,
.secondary:focus:after,
.tertiary:focus:after,
.tertiary-icon:focus:after,
a.button:focus:after {
    visibility: visible;
}

.icon-button {
    border-radius: var(--button-border-radius-icon);
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-top: unset;
    margin-bottom: unset;
    padding: 0;
    font-size: 0;
    display: inline-block;
}

    .icon-button.small {
        width: 16px;
        height: 16px;
    }

    .icon-button.medium {
        width: 24px;
        height: 24px;
    }

    .icon-button.large {
        width: 24px;
        height: 24px;
    }

@media only screen and (max-width: 599px) {
    a.button,
    button.primary,
    a.button.primary,
    button.secondary,
    a.button.secondary,
    button.tertiary,
    a.button.tertiary {
        min-width: 232px;
        margin: 8px auto;
        float: none;
        display: block;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        text-align: center;
    }

    button .icon.medium,
    .button .icon.medium {
        top: 6px !important;
        float: none !important;
    }
}

.p-link {
    color: #0075be;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-family: 'heebo-bold';
    text-decoration: underline;
    padding: 0;
}

    .p-link:hover, .p-link:focus {
        color: #005587;
    }

.link {
    color: #0075be;
    font-size: 1.4rem;
    font-family: 'heebo-bold';
    letter-spacing: 0.25px;
    line-height: 30px;
    padding: 0 2px 2px 2px;
    display: inline-block;
    text-transform: uppercase;
    margin-right: 24px;
}

    .link:focus, .link:hover {
        color: #005587;
        outline: 0;
        text-decoration: underline;
    }

    .link .icon {
        background-position: left center;
        position: relative;
        top: 6px;
        margin-right: 4px;
        line-height: 32px;
    }

.link-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

    .link-group.stacked {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .link-group.stacked .link {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
        }

@media only screen and (max-width: 599px) {
    .link-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

        .link-group .link {
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
        }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.bread-crumb {
    padding: 24px 0;
}

    .bread-crumb li {
        display: inline-block;
    }

        .bread-crumb li:first-child a {
            padding-left: 0;
        }

        .bread-crumb li:last-child a {
            background-image: none;
        }

            .bread-crumb li:last-child a:hover {
                background-image: none;
                color: #001928;
                cursor: default;
            }

        .bread-crumb li .bread-crumb-link {
            padding: 6px 0;
            padding-right: 32px;
            padding-left: 8px;
            font-size: 1.4rem;
            background-image: url(../img/icons/16/16-breadcrumb-chevy-blue.svg);
            background-position: right center;
            background-size: 16px 16px;
            background-repeat: no-repeat;
            color: #0075be;
            font-family: 'heebo-bold';
            cursor: pointer;
            line-height: 24px;
            /*&.last {
				background-image: none;
				&:hover {
					background-image: none;
		
					cursor: default;
				}
			}*/
        }

            .bread-crumb li .bread-crumb-link:focus {
                color: #005587;
                background-image: url(../img/icons/16/16-breadcrumb-chevy-ultramarine.svg);
            }

            .bread-crumb li .bread-crumb-link.first-of-type {
                padding-left: 0;
            }

            .bread-crumb li .bread-crumb-link:hover {
                color: #005587;
                background-image: url(../img/icons/16/16-breadcrumb-chevy-ultramarine.svg);
                background-position: right center;
                background-size: 16px 16px;
                background-repeat: no-repeat;
            }

            .bread-crumb li .bread-crumb-link.active {
                color: #001928;
            }

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.bmo-card {
    border: 1px solid #d9dce1;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 40px;
    margin: 8px 0;
    background: #ffffff;
    padding: 8px 16px;
    margin: 8px 0;
    position: relative;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    width: 100%;
}

    .bmo-card.hover:hover {
        -webkit-box-shadow: 0 0 8px 0 rgba(0, 25, 40, 0.12), 0 4px 24px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 8px 0 rgba(0, 25, 40, 0.12), 0 4px 24px 0 rgba(0, 25, 40, 0.07);
        cursor: pointer;
    }

    .bmo-card.flat {
        -webkit-box-shadow: 0 0 0px 0 rgba(0, 25, 40, 0), 0 0px 0px 0 rgba(0, 25, 40, 0);
        box-shadow: 0 0 0px 0 rgba(0, 25, 40, 0), 0 0px 0px 0 rgba(0, 25, 40, 0);
        border: 0px solid #fff;
    }

    .bmo-card:after {
        display: block;
        content: "";
        clear: both;
    }

    .bmo-card.no-pad {
        padding: 0 0 8px 0;
    }

    .bmo-card .top-of-card-link {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 8px 16px 0;
        display: block;
        width: 100%;
    }

        .bmo-card .top-of-card-link:focus {
            border-radius: 4px;
            -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            outline: 0;
        }

    .bmo-card .card-account-nickname {
        font-family: "heebo-bold";
        font-size: 1.8rem;
        line-height: 32px;
        display: block;
        float: left;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bmo-card .card-account-total {
        color: #0075be;
        font-size: 1.8rem;
        line-height: 32px;
        text-align: right;
        display: block;
        float: right;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .bmo-card .card-account-total .card-account-currency {
            color: #646c76;
            font-family: Heebo;
            font-size: 1.2rem;
            line-height: 32px;
            text-align: right;
            display: inline-block;
            margin-right: 4px;
        }

    .bmo-card .card-account-name {
        color: #646c76;
        font-size: 1.6rem;
        line-height: 24px;
        display: block;
        float: left;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bmo-card .account-gain-loss {
        font-size: 1.6rem;
        line-height: 24px;
        text-align: right;
        display: block;
        float: right;
        position: relative;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .bmo-card .account-gain-loss.gain {
            color: #0B8224;
        }

        .bmo-card .account-gain-loss.loss {
            color: #C81414;
        }

        .bmo-card .account-gain-loss .icon {
            position: absolute;
            margin-left: -20px;
            margin-top: 0px;
            width: 24px;
            height: 16px;
            background-size: 24px 24px;
            background-position: center top 2px;
        }

    .bmo-card .card-account-avail-credit {
        float: right;
        color: #646c76;
        font-size: 1.6rem;
        line-height: 24px;
        text-align: right;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .bmo-card .card-account-avail-credit .availble-label {
            color: #646c76;
            font-family: "heebo-medium";
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 24px;
            text-align: right;
        }

    .bmo-card .keyline {
        margin: 4px 0 8px;
        width: 56px;
        height: 4px;
        border-right: 4px solid rgba(0, 0, 0, 0.5);
        border-radius: 2px;
        border-top: 0;
        display: block;
    }

        .bmo-card .keyline.investments {
            background: #6A88C3;
        }

        .bmo-card .keyline.credit-card {
            background: #00E7B4;
        }

        .bmo-card .keyline.chequing {
            background: #009EC9;
        }

        .bmo-card .keyline.savings {
            background: #009EC9;
        }

        .bmo-card .keyline.line-of-credit {
            background: #FFC700;
        }

        .bmo-card .keyline.mortgage {
            background: #C3C070;
        }

    .bmo-card .below-keyline-left {
        color: #646c76;
        font-family: "heebo-medium";
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 24px;
        display: block;
        float: left;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bmo-card .below-keyline-right {
        color: #646c76;
        font-size: 1.6rem;
        line-height: 24px;
        text-align: right;
        display: block;
        float: right;
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bmo-card .account-card-divide {
        border-bottom: 1px solid #d9dce1;
        display: block;
        margin: 4px 16px;
    }

    .bmo-card .account-card-action-list {
        list-style: none;
        margin: 8px 16px 0;
        display: block;
    }

        .bmo-card .account-card-action-list li {
            display: inline-block;
        }

            .bmo-card .account-card-action-list li a.link {
                margin: 0 16px 0 0;
            }

@media only screen and (max-width: 599px) {
    .bmo-card .card-account-nickname {
        font-size: 1.6rem;
        line-height: 24px;
    }

    .bmo-card .card-account-name {
        font-size: 1.4rem;
        line-height: 24px;
    }

    .bmo-card .card-account-total {
        font-size: 1.6rem;
        line-height: 24px;
    }

        .bmo-card .card-account-total .card-account-currency {
            font-size: 1.2rem;
            line-height: 24px;
        }

    .bmo-card .below-keyline-left {
        font-size: 1.4rem;
        line-height: 24px;
    }

    .bmo-card .below-keyline-right {
        font-size: 1.4rem;
        line-height: 24px;
    }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.display-1,
.font-size-xxxxlarge {
    font-size: 4.4rem;
    line-height: 48px;
    letter-spacing: -0.35px;
}

    .display-1.light,
    .font-size-xxxxlarge.light {
        letter-spacing: -0.5px;
    }

.font-size-xxxlarge {
    font-size: 3.6rem;
    line-height: 48px;
    letter-spacing: -0.35px;
}

    .font-size-xxxlarge.bold {
        letter-spacing: 0px;
    }

.font-size-xxlarge {
    font-size: 2.8rem;
    line-height: 40px;
}

    .font-size-xxlarge.bold {
        letter-spacing: -0.2px;
    }

.font-size-xlarge {
    font-size: 2.4rem;
    line-height: 32px;
    letter-spacing: 0px;
}

.font-size-large {
    font-size: 2.2rem;
    line-height: 32px;
    letter-spacing: 0px;
}

    .font-size-large.bold {
        letter-spacing: .35px;
    }

.font-size-medium {
    font-size: 1.8rem;
    line-height: 24px;
    letter-spacing: .15px;
}

    .font-size-medium.bold {
        letter-spacing: .25px;
    }

.font-size-small {
    font-size: 1.6rem;
    line-height: 24px;
    letter-spacing: 0.15px;
}

    .font-size-small.bold {
        letter-spacing: 0.25px;
    }

.font-size-xsmall {
    font-size: 1.4rem;
    line-height: 24px;
    letter-spacing: .25px;
}

.font-size-xxsmall {
    font-size: 1.2rem;
    line-height: 16px;
    letter-spacing: 0.3px;
}

.font-size-xxxsmall {
    font-size: 1rem;
    line-height: 20px;
    letter-spacing: .3px;
}

.bold {
    font-family: 'heebo-bold';
}

.medium {
    font-family: 'heebo-medium';
}

.light {
    font-family: 'heebo-light';
}

.thin {
    font-family: 'heebo-thin';
}

.body-copy {
    font-size: 18px;
    line-height: 24px;
}

.body-copy-sm {
    font-size: 16px;
    line-height: 24px;
}

.body-copy-xsm {
    font-size: 14px;
    line-height: 22px;
}

.disclaimer {
    font-size: 12px;
    line-height: 16px;
}

.disclaimer-sm {
    font-size: 10px;
    line-height: 16px;
}

a.badge,
.badge {
    text-transform: uppercase;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 16px;
    line-height: 26px;
    font-size: 1.4rem;
    height: 32px;
    border-radius: 4px;
    line-height: 32px;
    font-family: "heebo-bold";
    margin-right: 16px;
}

    a.badge.small,
    .badge.small {
        font-size: 1.0rem;
        height: 16px;
        border-radius: 2px;
        line-height: 16px;
        vertical-align: top;
        margin-right: 8px;
        padding: 0 4px;
    }

    a.badge.bmo-ultramarine,
    .badge.bmo-ultramarine {
        background: #005587;
    }

    a.badge.bmo-light-grey,
    .badge.bmo-light-grey {
        background: #d9dce1;
        color: #001928;
    }

    a.badge:focus,
    .badge:focus {
        outline: 0;
        -webkit-box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.65);
        box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.65);
    }

.bmo-card .badge {
    float: right;
    margin: 8px 0;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.bmo-accordion-wrap {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: visible;
    width: calc(100% + 48px);
    margin-left: -48px;
}

    .bmo-accordion-wrap .short-border {
        border-bottom: 1px solid #d9dce1;
        position: relative;
        display: block;
        width: calc(100% - 32px);
        float: left;
        margin-left: 48px;
    }

    .bmo-accordion-wrap button:after {
        content: '';
        display: block;
        left: 0;
        position: absolute;
        top: 0;
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background: #010101;
        border-radius: 0%;
        opacity: .0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    .bmo-accordion-wrap .accordion-trigger {
        border-radius: 0;
        background-color: transparent;
        border: none;
        color: #001928;
        overflow: visible;
        display: block;
        cursor: pointer;
        padding: 15px 0 16px 0;
        text-decoration: none;
        text-align: left;
        text-transform: capitalize;
        text-indent: 0px;
        overflow-x: visible;
        position: relative;
        left: -16px;
        top: -1px;
        font-size: 2.2rem;
        line-height: 28px;
        font-family: "heebo-bold";
        margin: 0;
        margin-left: 32px;
        width: calc(100% - 32px);
        min-height: 63px;
    }

        .bmo-accordion-wrap .accordion-trigger:focus {
            border-radius: 4px;
        }

        .bmo-accordion-wrap .accordion-trigger .icon {
            margin-right: 16px;
            margin-top: 4px;
            pointer-events: none;
        }

        .bmo-accordion-wrap .accordion-trigger.is-expanded .icon {
            background-image: url(../img/icons/16/16-chevron-up-blue.svg);
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: left top 2px;
        }

    .bmo-accordion-wrap .accordion-panel .accordion-panel__inner {
        opacity: 1;
        -webkit-transition: opacity ease .3s, visibility ease .3s, overflow ease .3s, max-height ease .3s;
        transition: opacity ease .3s, visibility ease .3s, overflow ease .3s, max-height ease .3s;
        visibility: visible;
    }

    .bmo-accordion-wrap .accordion-panel.is-hidden .accordion-panel__inner {
        padding: 0px 16px 0px 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        -webkit-transition: opacity ease .3s, visibility ease .3s, overflow ease .3s, max-height ease .3s;
        transition: opacity ease .3s, visibility ease .3s, overflow ease .3s, max-height ease .3s;
        visibility: hidden;
    }

    .bmo-accordion-wrap .accordion-panel__inner {
        padding: 16px 16px 16px 32px;
    }

@media only screen and (max-width: 1279px) {
    .bmo-accordion-wrap {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: visible;
        width: calc(100% + 0px);
        margin-left: -0px;
    }

        .bmo-accordion-wrap .accordion-trigger {
            width: 100%;
            max-width: 100%;
        }

            .bmo-accordion-wrap .accordion-trigger .short-border {
                width: calc(100%);
            }

        .bmo-accordion-wrap .accordion-panel__inner {
            padding: 16px 16px 16px 0;
        }
}

@media only screen and (max-width: 599px) {
    .bmo-accordion-wrap {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: visible;
        width: calc(100% + 0px);
        margin-left: -0px;
    }

        .bmo-accordion-wrap .short-border {
            border-bottom: 1px solid #d9dce1;
            position: relative;
            display: block;
            width: calc(100%);
            margin-left: 0px;
            float: left;
        }

        .bmo-accordion-wrap .accordion-trigger {
            margin-left: 0;
            width: calc(100% - 0px);
            left: 0;
            padding-left: 8px;
        }

            .bmo-accordion-wrap .accordion-trigger .icon {
                right: 0;
                position: absolute;
            }

        .bmo-accordion-wrap .accordion-panel__inner {
            padding: 16px 16px 16px 0;
        }
}

/* CSS Document */
/****************************************************************************************/
/**********************************HEADER STYLES*****************************************/
/****************************************************************************************/
.bmo-header {
    background: #0075be;
    height: 80px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
    width: 100%;
}

    .bmo-header .bmo-container {
        max-width: 1280px;
        width: auto;
        margin: auto;
    }

    .bmo-header .bmo-logo {
        padding-left: 16px;
    }

    .bmo-header .bmo-container .hidden-label:focus {
        position: absolute;
        background: #0075be;
        color: #ffffff;
        display: block;
        z-index: 1045;
        margin-top: 80px;
        padding: 4px 8px;
        clip: auto;
    }

    .bmo-header .bmo-logo img {
        width: 116px;
        display: block;
        float: left;
        height: 80px;
        padding: 20px 24px 20px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .bmo-header img {
        font-size: 1.4rem;
        color: #ffffff;
        font-family: "heebo-medium";
        line-height: 32px;
        text-align: center;
        padding: 24px 24px;
    }

    .bmo-header .primary-nav a:hover {
        background: #F5F6F7;
        color: #001928;
    }

    .bmo-header .primary-nav a:focus {
        border-radius: 4px;
        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
    }

    .bmo-header a.active {
        background: #ffffff;
        color: #001928;
    }

    .bmo-header nav ul {
        margin: 0;
    }

    .bmo-header nav li {
        display: block;
        float: left;
        height: 80px;
    }

        .bmo-header nav li a {
            display: block;
        }

    .bmo-header .profile-menu-wrap {
        float: right;
    }

    .bmo-header button.profile-menu-button {
        height: 48px;
        margin: 16px 0 16px 16px;
        border-radius: 4px;
        line-height: 40px;
        text-transform: capitalize;
        background-image: url(../img/icons/24/24-profile-white.svg), url(../img/icons/16/16-baby-chevy-down-white.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: 8px center, right 12px bottom 14px;
        background-size: 24px 24px, 16px 16px;
        background-color: transparent;
        border: 2px solid rgba(0, 121, 193, 0);
        color: #ffffff;
        padding: 0 40px;
        background-color: #005587;
        cursor: pointer;
    }

        .bmo-header button.profile-menu-button:hover {
            background-color: #005587;
        }

    .bmo-header .profile-menu {
        height: 46px;
        width: 190px;
        border-radius: 4px;
        background-color: #005587;
        -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        position: absolute;
        margin-top: -64px;
        z-index: 2000;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: visibility 0s, opacity 0s linear, height .3s ease-in, width .3s ease-in, margin .3s ease-in, background-color .3s ease-in;
        transition: visibility 0s, opacity 0s linear, height .3s ease-in, width .3s ease-in, margin .3s ease-in, background-color .3s ease-in;
        -moz-transition: visibility 0s, opacity 0s linear, height .3s ease-in, width .3s ease-in, margin .3s ease-in, background-color .3s ease-in;
        -webkit-transition: visibility 0s, opacity 0s linear, height .3s ease-in, width .3s ease-in, margin .3s ease-in, background-color .3s ease-in;
        margin-left: 18px;
        padding: 4px 16px 6px 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        color: #ffffff;
        margin-left: 44px;
    }

        .bmo-header .profile-menu.active {
            background-color: #ffffff;
            height: 216px;
            width: 285px;
            visibility: visible;
            opacity: 1;
            /* margin-left: 76px; */
            z-index: 1045;
            margin-left: -56px;
        }

    .bmo-header .profile-menu-header {
        background-image: url(../img/icons/24/24-profile-granite.svg), url(../img/icons/16/16-baby-chevy-down-granite.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: left 4px top 0px, right 1px bottom 36px;
        background-size: 24px 24px, 16px 16px;
        min-height: 50px;
        border-bottom: 1px solid #D9DCE1;
        padding-bottom: 8px;
    }

        .bmo-header .profile-menu-header h2 {
            padding-left: 40px;
            font-size: 1.4rem;
            font-weight: bold;
            margin-top: 4px;
        }

            .bmo-header .profile-menu-header h2 span.signed-in-to {
                display: block;
                font-size: 1.4rem;
                margin-top: -2px;
                height: 24px;
                line-height: 24px;
                color: #646C76;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

    .bmo-header .profile-menu ul li {
        width: 100%;
        display: block;
        height: 56px;
        border-bottom: 1px solid #D9DCE1;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .bmo-header .profile-menu ul li a {
            color: #005587;
            display: block;
            text-align: left;
            padding: 8px 16px;
            font-weight: bold;
            text-indent: 24px;
            line-height: 36px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            height: 56px;
        }

            .bmo-header .profile-menu ul li a.sign-out {
                background-image: url(../img/icons/24/24-exit-granite.svg);
                background-repeat: no-repeat;
                background-size: 24px 24px;
                background-position: left top 12px;
            }

            .bmo-header .profile-menu ul li a.dash-settings-icon {
                background-image: url(../img/icons/24/24-settings-granite.svg);
                background-repeat: no-repeat;
                background-size: 24px 24px;
                background-position: left top 12px;
            }

            .bmo-header .profile-menu ul li a:hover {
                color: #001928;
            }

    .bmo-header .profile-menu .sign-out-link {
        border-top: 1px solid #D9DCE1;
        margin-top: 8px;
        padding-top: 8px;
    }

.profile-nav span.last-login {
    display: block;
    text-align: center;
    padding-bottom: 8px;
    color: #929BA9;
    clear: both;
    font-size: 1.2rem;
    padding-top: 12px;
}

nav.mobile-task-bar ul {
    display: none;
}

.bmo-header .sub-nav-container {
    position: absolute;
    background: #ffffff;
    left: 0;
    width: 100%;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    height: 0;
    visibility: hidden;
    overflow-y: hidden;
}

    .bmo-header .sub-nav-container.expanded {
        height: 64px;
        visibility: visible;
    }

    .bmo-header .sub-nav-container .sub-nav {
        position: absolute;
    }

        .bmo-header .sub-nav-container .sub-nav li:first-of-type {
            margin-left: 112px;
        }

        .bmo-header .sub-nav-container .sub-nav li a {
            color: #001928;
            border-bottom: 4px solid #ffffff;
            line-height: 12px;
        }

            .bmo-header .sub-nav-container .sub-nav li a.active {
                border-bottom: 4px solid #0075be;
            }

            .bmo-header .sub-nav-container .sub-nav li a:hover {
                background-color: #ffffff;
                border-bottom: 4px solid #0075be;
            }

@media only screen and (max-width: 1279px) {
    .bmo-header .profile-menu {
        right: 16px;
        margin-right: 0;
    }

        .bmo-header .profile-menu.active {
            right: 16px;
            margin-right: 0;
        }

    .bmo-header button.profile-menu-button {
        margin-right: 16px;
    }
}

@media only screen and (max-width: 1064px) {
    .bmo-header .profile-menu {
        right: 16px;
        margin-right: 0;
    }

        .bmo-header .profile-menu.active {
            right: 16px;
            margin-right: 0;
        }

    .primary-nav,
    .profile-menu-wrap {
        display: none;
    }

    .bmo-header {
        background-color: #0075be;
        z-index: 999;
    }

        .bmo-header,
        .bmo-header .bmo-container {
            -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }

    .bmo-header {
        height: 64px;
    }

        .bmo-header .bmo-logo {
            padding-left: 16px;
        }

            .bmo-header .bmo-logo a {
                width: 96px;
                display: block;
                float: left;
                height: 56px;
                padding: 16px 24px 16px 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

    nav.mobile-task-bar ul {
        display: block;
        height: 56px;
        width: 88px;
        float: right;
        padding: 8px 0 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        top: 0px;
        right: 16px;
    }

        nav.mobile-task-bar ul li {
            display: inline-block;
            height: 36px;
            width: 36px;
            margin-right: 8px;
        }

            nav.mobile-task-bar ul li a {
                width: 36px;
                height: 36px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

                nav.mobile-task-bar ul li a.user-menu-trigger {
                    background: url(../img/icons/24/24-profile-white.svg) no-repeat center center;
                    background-size: 24px 24px;
                }

                nav.mobile-task-bar ul li a.contact {
                    background: url(../img/icons/24/24-profile-white.svg) no-repeat center center;
                    background-size: 24px 24px;
                }

                nav.mobile-task-bar ul li a.mobile-menu-button {
                    background: url(../img/icons/24/24-hamburger-menu-white.svg) no-repeat center center;
                    background-size: 24px 24px;
                }

                    nav.mobile-task-bar ul li a.mobile-menu-button.active {
                        background: url(../img/icons/24/24-close-white.svg);
                        background-size: 24px 24px;
                        background-repeat: no-repeat;
                        background-position: center center;
                    }

            nav.mobile-task-bar ul li ul.mobile-nav-list {
                padding: 0 16px;
            }

                nav.mobile-task-bar ul li ul.mobile-nav-list.first-drawer,
                nav.mobile-task-bar ul li ul.mobile-nav-list.first-drawer ul.mobile-nav-list.second-drawer {
                    position: fixed;
                    right: -100%;
                    height: calc(100vh - 64px);
                    top: 64px;
                    background-color: #ffffff;
                    width: 100%;
                    transition: all .3s ease;
                    -moz-transition: all .3s ease;
                    -webkit-transition: all .3s ease;
                }

                    nav.mobile-task-bar ul li ul.mobile-nav-list.first-drawer.active,
                    nav.mobile-task-bar ul li ul.mobile-nav-list.first-drawer ul.mobile-nav-list.second-drawer.active {
                        display: block;
                        right: 0;
                        width: 100%;
                        background-color: #ffffff;
                        max-width: 400px;
                        z-index: 1045;
                    }

            nav.mobile-task-bar ul li ul li {
                display: block;
                width: 100%;
                clear: both;
                border-bottom: 1px solid #D9DCE1;
                height: 64px;
            }

                nav.mobile-task-bar ul li ul li a.mobile-menu-expandable {
                    background-image: url(../img/icons/24/24-chevron-right-blue.svg);
                    background-repeat: no-repeat;
                    background-size: 16px 16px;
                    background-position: 100% center;
                }

                nav.mobile-task-bar ul li ul li ul li a.drawer-header-back {
                    text-align: right;
                    color: #0075be;
                    background-image: url(../img/icons/24/24-chevron-left-blue.svg);
                    background-repeat: no-repeat;
                    background-size: 16px 16px;
                    background-position: 0 center;
                }

                nav.mobile-task-bar ul li ul li a {
                    color: #001928;
                    width: 100%;
                    text-align: left;
                    font-size: 1.4rem;
                    font-weight: bold;
                    padding: 16px 0;
                    height: 100%;
                    clear: both;
                    display: block;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                }

    nav.mobile-task-bar .mobile-menu-fixed-nav-bar {
        position: fixed;
        background: #ffffff;
        height: 36px;
        bottom: 0;
        width: 100%;
        max-width: 480px;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
        margin-left: 100%;
        padding-bottom: 16px;
    }

        nav.mobile-task-bar .mobile-menu-fixed-nav-bar.active {
            left: 0;
            margin-left: 0;
        }

        nav.mobile-task-bar .mobile-menu-fixed-nav-bar ul {
            width: 100%;
        }

            nav.mobile-task-bar .mobile-menu-fixed-nav-bar ul li {
                display: inline-block;
                width: 33.3333%;
                margin-right: 0;
            }

                nav.mobile-task-bar .mobile-menu-fixed-nav-bar ul li a {
                    display: inline-block;
                    width: 100%;
                    padding: 8px;
                    font-weight: 500;
                    font-size: 1.4rem;
                    line-height: 16px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    height: 48px;
                    text-align: left;
                }

                    nav.mobile-task-bar .mobile-menu-fixed-nav-bar ul li a.active {
                        color: #001928;
                    }

                    nav.mobile-task-bar .mobile-menu-fixed-nav-bar ul li a.mobile-menu-fixed-nav-contact {
                        text-align: right;
                    }

    .mobile-menu-fixed-nav-bar ul {
        float: left;
    }

        .mobile-menu-fixed-nav-bar ul li {
            display: inline-block;
        }

            .mobile-menu-fixed-nav-bar ul li a {
                color: #0075be;
            }

    .bmo-header .user-setting-menu {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 9999;
        background: #F5F6F7;
        right: -400px;
        max-width: 400px;
        top: 0;
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
    }

        .bmo-header .user-setting-menu.active {
            top: 0;
            right: 0;
            opacity: 1;
            visibility: visible;
            overflow: hidden;
            border-left: 1px solid #D9DCE1;
        }

        .bmo-header .user-setting-menu .profile-image {
            margin: 48px auto 24px;
            display: block;
        }

    .bmo-header .user-setting-menu-header {
        background: #0075BE;
        color: #fff;
        height: 64px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .bmo-header .user-setting-menu ul.user-setting-menu-list {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-top: 16px;
        position: static;
        display: block;
        padding: 0;
    }

        .bmo-header .user-setting-menu ul.user-setting-menu-list li {
            display: block;
            width: 100%;
            height: 56px;
        }

            .bmo-header .user-setting-menu ul.user-setting-menu-list li a {
                display: block;
                background: #fff;
                border-top: 1px solid #D9DCE1;
                padding: 16px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                color: #001928;
                font-size: 1.6rem;
                text-align: left;
                height: 56px;
                padding-left: 88px;
                line-height: 24px;
            }

                .bmo-header .user-setting-menu ul.user-setting-menu-list li a.settings {
                    background-image: url(../img/icons/24/24-settings-blue.svg);
                    background-repeat: no-repeat;
                    background-position: left 48px center;
                    background-size: 24px 24px;
                }

                .bmo-header .user-setting-menu ul.user-setting-menu-list li a.sign-out {
                    background-image: url(../img/icons/24/24-exit-blue.svg);
                    background-repeat: no-repeat;
                    background-position: left 52px center;
                    background-size: 16px;
                    background-size: 24px 24px;
                }

    .bmo-header .user-setting-menu-header-back {
        position: absolute;
        width: 44px;
        height: 44px;
        left: 8px;
        top: 10px;
        background-image: url(../img/icons/24/24-arrow-left-white.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 24px 24px;
        padding: 0;
        cursor: pointer;
    }

    .bmo-header .user-setting-menu-header-title {
        text-align: center;
        color: #fff;
        display: block;
        height: 24px;
        font-size: 1.6rem;
        line-height: 24px;
        text-align: center;
        font-family: 'heebo-medium';
        padding-top: 20px;
    }

    .bmo-header .user-setting-menu-name {
        height: 24px;
        color: #001928;
        font-family: 'heebo-bold';
        font-size: 1.6rem;
        line-height: 24px;
        text-align: center;
        display: block;
    }

    .bmo-header .user-setting-signed-in {
        height: 24px;
        color: #646C76;
        font-size: 1.4rem;
        line-height: 24px;
        text-align: center;
        display: block;
    }

    .bmo-header .user-setting-last-login {
        height: 24px;
        color: #646C76;
        font-family: Heebo;
        font-size: 1.4rem;
        line-height: 24px;
        margin-left: 16px;
        margin-top: 72px;
        display: inline-block;
    }
}

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    display: none;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

input,
select {
    font-family: 'Heebo';
    font-size: 1.8rem;
    color: #001928;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

    input:disabled,
    select:disabled {
        color: #646c76;
    }

    input:first-letter,
    select:first-letter {
        text-transform: capitalize;
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
        opacity: 1;
        color: #646c76;
    }

        input:disabled + .slide-label .label-text,
        select:disabled + .slide-label .label-text,
        textarea:disabled + .slide-label .label-text {
            color: #646c76;
        }

select {
    cursor: pointer;
    background-image: url("../img/icons/16/16-baby-chevy-down-blue.svg");
    background-repeat: no-repeat;
    background-position: right 8px top 20px;
    background-size: 16px 16px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

    select:disabled {
        background-image: url("../img/icons/16/16-baby-chevy-down-granite.svg");
    }

    select::-ms-expand {
        display: none;
    }

    select:focus::-ms-value {
        color: #3d3c4c;
        background-color: transparent;
    }

    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000;
    }

.input-wrap {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 24px;
}

    .input-wrap input {
        display: block;
    }

option {
    font-size: 1.6rem;
    padding: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
    border: none;
    border-bottom: 2px solid #d9dce1;
    width: 393px;
    font-size: 1.8rem;
    line-height: 24px;
    height: 24px;
    resize: vertical;
    font-family: 'heebo';
    padding-bottom: 8px;
    overflow: hidden;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

    textarea.active {
        width: 100%;
        height: 64px;
        border-bottom: 2px solid #0075be;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    textarea::-webkit-input-placeholder {
        height: 24px;
        color: #929ba9;
        font-size: 1.8rem;
        line-height: 24px;
    }

    textarea::-moz-placeholder {
        height: 24px;
        color: #929ba9;
        font-size: 1.8rem;
        line-height: 24px;
    }

    textarea:-ms-input-placeholder {
        height: 24px;
        color: #929ba9;
        font-size: 1.8rem;
        line-height: 24px;
    }

    textarea:-moz-placeholder {
        height: 24px;
        color: #929ba9;
        font-size: 1.8rem;
        line-height: 24px;
    }

.form-field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    position: relative;
    padding: 12px 0 36px;
}

    .form-field .popover-wrapper {
        position: relative;
        top: 12px;
    }

.form-label-group {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative;
    padding: 0px 0px 6px 0px;
}

    .form-label-group label.slide-label {
        line-height: 1.2;
        z-index: 0;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        pointer-events: none;
        height: 42px;
        cursor: pointer;
        border-radius: 4px 0px 0px 4px;
    }

label.slide-label:before {
    z-index: 4;
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 0px;
    left: 0px;
    background: #0075be;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    top: 44px;
}

label.slide-label:after {
    z-index: 3;
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0px;
    left: 0px;
    background: #646c76;
    top: 44px;
}

label.slide-label span.label-text {
    display: block;
    padding: 18px 0px 0px 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 1.8rem;
    color: #0075be;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}

label.slide-label.error-field:before {
    background: #C81414;
}

label.slide-label.error-field:after {
    background: #C81414;
}

label.slide-label.valid:after {
    background: #0B8224;
}

label.slide-label.disabled {
    color: #646c76;
}

    label.slide-label.disabled span.label-text {
        color: #646c76;
    }

label.active-label span.label-text {
    padding: 0px;
    font-size: 1.4rem;
    margin-top: -4px;
}

textarea {
    font-size: 1.8rem;
    font-family: 'heebo';
    resize: none;
    overflow-x: hidden;
    word-wrap: normal;
}

.form-field textarea {
    width: 100%;
    height: unset;
    padding: 6px 0;
    min-height: 40px;
    max-height: 50vh;
    overflow-y: auto;
    line-height: normal;
    white-space: pre-wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .form-field textarea + label.slide-label {
        position: static;
    }

        .form-field textarea + label.slide-label span {
            position: absolute;
            top: 0;
        }

        .form-field textarea + label.slide-label:after, .form-field textarea + label.slide-label:before {
            margin-top: -3px;
            position: relative;
            top: unset;
            display: block;
        }

        .form-field textarea + label.slide-label:before {
            float: left;
        }

    .form-field textarea:disabled + label.slide-label span {
        color: #646c76;
    }

textarea,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
select {
    width: 100%;
    height: 36px;
    line-height: 40px;
    margin: 7px 0px 0 0px;
    padding: 0px;
    white-space: nowrap;
    border: none;
    background-color: rgba(225, 225, 225, 0);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

    textarea:focus + label.slide-label:before,
    input[type="search"]:focus + label.slide-label:before,
    input[type="text"]:focus + label.slide-label:before,
    input[type="email"]:focus + label.slide-label:before,
    input[type="password"]:focus + label.slide-label:before,
    select:focus + label.slide-label:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }

    textarea:focus + label.slide-label span.label-text,
    input[type="search"]:focus + label.slide-label span.label-text,
    input[type="text"]:focus + label.slide-label span.label-text,
    input[type="email"]:focus + label.slide-label span.label-text,
    input[type="password"]:focus + label.slide-label span.label-text,
    select:focus + label.slide-label span.label-text {
        padding: 0px;
        font-size: 14px;
        margin-top: -4px;
    }

select {
    margin: 8px 0px 0 0px;
    -webkit-margin-start: 0px;
    line-height: 56px;
    height: 44px;
    position: relative;
    top: -10px;
}

_:-ms-lang(x),
select {
    position: relative;
    top: -4px;
    background-position: right 8px top 12px;
}

_:-ms-lang(x),
bmo-select .error-message {
    margin-top: -4px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .form-field .icon-button {
        position: relative;
        top: 12px;
    }

    .form-field .popover.active {
        margin-top: -33px;
    }
}

@-moz-document url-prefix() {
    select {
        height: 55px;
    }

    .error-message.select {
        margin-top: -16px;
    }
}

.input-helper-text {
    color: #646C76;
    font-size: 1.4rem;
    line-height: 16px;
    display: block;
    margin-top: 8px;
    letter-spacing: 0.25px;
}

.form-field-select .form-label-group label.slide-label {
    line-height: 1.2;
}

    .form-field-select .form-label-group label.slide-label span.label-text {
        letter-spacing: 0.25px;
    }

.form-field-select .form-label-group select {
    background-position: right 8px top 14px;
    top: -4px;
    line-height: 24px;
    letter-spacing: 0.15px;
}

    .form-field-select .form-label-group select:not(:focus) + label.slide-label:not(.active-label) span.label-text {
        padding: 18px 0px 0px 0px;
    }

.form-field-select .form-label-group .input-helper-text {
    margin-top: 0px;
}

.form-field-select .form-label-group .error-message.has-error {
    margin-top: 0px;
}

    .form-field-select .form-label-group .error-message.has-error + .input-helper-text {
        margin-top: 8px;
    }

.error-message {
    width: 100%;
    min-width: 150px;
    padding: 0px 32px 0px 19px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 16px;
    color: #C81414;
    background-image: url(../img/icons/16/16-inline-error.svg);
    background-repeat: no-repeat;
    background-position: left top;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    margin-top: 8px;
    display: none;
    margin-bottom: 6px;
}

    .error-message span {
        display: block;
    }

    .error-message.select {
        margin-top: 2px;
    }

    .error-message.has-error {
        visibility: visible;
        opacity: 1;
        display: block;
    }

bmo-select .error-message {
    margin-top: -1px;
}

bmo-select .input-helper-text {
    margin-top: -2px;
}

.half-input-width {
    width: 50%;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 3px;
}

    .half-input-width .input-helper-text-pass-fail {
        display: block;
        color: #646C76;
        font-family: Heebo;
        font-size: 1.4rem;
        line-height: 24px;
        padding: 4px 0 4px 32px;
        background-image: url(../img/icons/24/24-close-granite.svg);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 24px 24px;
    }

        .half-input-width .input-helper-text-pass-fail.pass {
            background-image: url(../img/icons/24/24-checkmark-green.svg);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 24px 24px;
            color: #646C76;
        }

        .half-input-width .input-helper-text-pass-fail.fail {
            background-image: url(../img/icons/24/24-cross-red.svg);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 24px 24px;
            color: #646C76;
        }

/***********************************************************************************************/
/************************************************INPUT Checkbox STYLES**************************/
/***********************************************************************************************/
.input-wrap.input-checkbox {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 32px;
    padding-top: 0;
}

    .input-wrap.input-checkbox label {
        cursor: pointer;
        position: relative;
        top: 0px;
        left: 12px;
        color: #001928;
        font-family: "heebo";
        font-size: 1.6rem;
        font-weight: 400;
        letter-spacing: 0.15px;
        line-height: 24px;
    }

    .input-wrap.input-checkbox input[type="checkbox"] {
        position: relative;
        top: 26px;
        left: -28px;
        margin: 0px;
        width: 24px;
        height: 24px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 2px solid #646c76;
        border-radius: 4px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        opacity: 0;
    }

        .input-wrap.input-checkbox input[type="checkbox"]:first-of-type {
            margin-top: -24px;
        }

        .input-wrap.input-checkbox input[type="checkbox"]:checked {
            opacity: 0;
        }

        .input-wrap.input-checkbox input[type="checkbox"] + label:before {
            content: '';
            position: absolute;
            top: 0px;
            left: -40px;
            display: inline-block;
            vertical-align: middle;
            margin: 0px;
            width: 24px;
            height: 24px;
            border: 2px solid #646c76;
            border-radius: 4px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            .input-wrap.input-checkbox input[type="checkbox"] + label:before:hover {
                cursor: pointer;
            }

        .input-wrap.input-checkbox input[type="checkbox"]:checked + label:before {
            content: '';
            background-color: #0075be;
            background-image: url("../img/icons/16/16-checkmark-white.svg");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 15px;
            border-color: #0075be;
            cursor: pointer;
            border: 2px solid #0075be;
            padding-bottom: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            .input-wrap.input-checkbox input[type="checkbox"]:checked + label:before:focus + label:before {
                border: 2px solid #BEDCEB;
            }

        .input-wrap.input-checkbox input[type="checkbox"]:focus + label:before {
            border-radius: 4px;
            -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        }

        .input-wrap.input-checkbox input[type="checkbox"]:checked:focus + label:before {
            border-radius: 4px;
            -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        }

        .input-wrap.input-checkbox input[type="checkbox"].has-error + label:before {
            border: 2px solid #C81414;
        }

        .input-wrap.input-checkbox input[type="checkbox"]:disabled + label:before {
            background-color: #d9dce1;
            border: 2px solid #646c76;
        }

        .input-wrap.input-checkbox input[type="checkbox"]:disabled + label {
            color: #646c76;
        }

        .input-wrap.input-checkbox input[type="checkbox"]:checked:disabled + label:before {
            background-color: #646c76;
            background-image: url("../img/icons/16/16-checkmark-white.svg");
            border: 2px solid #646c76;
        }

        .input-wrap.input-checkbox input[type="checkbox"]:focus {
            border: 2px solid #005587;
            padding-bottom: 0;
            -webkit-box-shadow: 0 0 2px 1px rgba(115, 195, 235, 0.65);
            box-shadow: 0 0 2px 1px rgba(115, 195, 235, 0.65);
        }

/***********************************************************************************************/
/************************************************CARD Checkbox STYLTES**************************/
/***********************************************************************************************/
.grid .checkbox-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
}

.checkbox-cards input[type="checkbox"] {
    display: none;
}

.bmo-card-checkbox.check-fixed-cards {
    margin: 0px 0px 16px 0px;
    display: block;
    float: left;
}

    .bmo-card-checkbox.check-fixed-cards label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        position: relative;
        width: 234px;
        height: 100%;
        min-height: 170px;
        margin: 0px 8px;
        padding: 17px 8px;
        border: 3px solid #ffffff;
        border-radius: 4px;
        cursor: pointer;
        background: #ffffff;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    }

        .bmo-card-checkbox.check-fixed-cards label:first-of-type {
            margin-left: 0;
        }

        .bmo-card-checkbox.check-fixed-cards label span {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        }

            .bmo-card-checkbox.check-fixed-cards label span:last-child {
                margin: 0px;
            }

            .bmo-card-checkbox.check-fixed-cards label span.image {
                text-align: center;
                width: 96px;
                height: 72px;
                margin-top: 16px;
                margin-left: auto;
                margin-right: auto;
            }

                .bmo-card-checkbox.check-fixed-cards label span.image img {
                    pointer-events: none;
                    /* - Fix for IE11 (tile not clickable on image) - */
                    -moz-user-select: none;
                    /* - Fix for Firefox (image auto selected when clicking on image - only when "pointer-events: none;
    " is set) - */
                }

            .bmo-card-checkbox.check-fixed-cards label span.description {
                text-align: center;
                padding: 8px 0px 0px 0px;
                font-family: "heebo-bold";
                font-size: 1.6rem;
                color: #001928;
            }

            .bmo-card-checkbox.check-fixed-cards label span.check {
                opacity: 0;
                visibility: hidden;
                position: absolute;
                top: -1px;
                /* - Fix for IE11 - keep -1px, not 0px */
                right: -1px;
                /* - Fix for IE11 - keep -1px, not 0px */
                width: 24px;
                height: 24px;
                border-radius: 0px 0px 0px 4px;
                background-image: url("../img/icons/16/16-checkmark-white.svg");
                background-repeat: no-repeat;
                background-color: #68bbe8;
                background-size: 16px 16px;
                background-position: center center;
                transition: all .3s ease-in;
                -moz-transition: all .3s ease-in;
                -webkit-transition: all .3s ease-in;
            }

    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"] {
        opacity: 0;
        width: 0px;
        height: 0px;
        overflow: hidden;
    }

        .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:checked + label span.check {
            opacity: 1;
            visibility: visible;
            background: #0075be url(../img/icons/16/16-checkmark-white.svg) 8px no-repeat;
            background-position: center center;
            background-size: 16px;
        }

    .bmo-card-checkbox.check-fixed-cards.error-field label {
        border: 3px solid #C81414;
    }

    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:checked + label,
    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:focus + label,
    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:checked:focus + label {
        border: 3px solid #0075be;
    }

    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:focus + label {
        border-radius: 4px;
        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
    }

    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:checked:focus + label {
        border-radius: 4px;
        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
    }

        .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:checked:focus + label span.check {
            display: block;
        }

    .bmo-card-checkbox.check-fixed-cards input[type="checkbox"]:hover + label {
        -webkit-box-shadow: 0 0 8px 0 rgba(0, 25, 40, 0.12), 0 4px 24px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 8px 0 rgba(0, 25, 40, 0.12), 0 4px 24px 0 rgba(0, 25, 40, 0.07);
    }

    .bmo-card-checkbox.check-fixed-cards.error-field input[type="checkbox"]:focus + label {
        border: 3px solid #C81414;
    }

/***********************************************************************************************/
/************************************************Parent Child Checkbox STYLTES**************************/
/***********************************************************************************************/
.parent-checkbox.input-wrap.input-checkbox input[type="checkbox"][aria-checked="mixed"] + label:before {
    background-color: #0075be;
    background-image: url("../img/icons/16/16-dash.svg");
}

.parent-checkbox.input-wrap.input-checkbox input[type="checkbox"][aria-checked="false"] + label:before {
    background-color: none;
    background-image: none;
}

.parent-checkbox.input-wrap.input-checkbox input[type="checkbox"][aria-checked="true"] + label:before {
    background-color: #0075be;
    background-image: url("../img/icons/16/16-checkmark-white.svg");
}

.parent-checkbox + ul.checkboxes {
    padding-left: 24px;
}

    .parent-checkbox + ul.checkboxes li {
        list-style: none;
    }

        .parent-checkbox + ul.checkboxes li .input-wrap.input-checkbox {
            padding-top: 24px;
        }

/************************************************INPUT Radio STYLTES****************************/
.input-wrap.input-radio {
    margin: 0;
}

    .input-wrap.input-radio input {
        position: relative;
        left: -5px;
        opacity: 0;
        margin-top: -4px;
        width: 24px;
        height: 24px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 2px solid #646c76;
        border-radius: 24px;
    }

        .input-wrap.input-radio input:checked {
            opacity: 0;
        }

    .input-wrap.input-radio label {
        position: relative;
        top: -32px;
        margin-left: 12px;
        color: #001928;
        font-family: "heebo";
        font-size: 1.6rem;
        font-weight: 400;
        letter-spacing: 0.15px;
        line-height: 24px;
    }

        .input-wrap.input-radio label::before {
            content: "";
            position: relative;
            top: 8px;
            left: -12px;
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 2px solid #646c76;
            border-radius: 24px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: background-color ease-in-out 250ms;
            transition: background-color ease-in-out 250ms;
            -webkit-transition: border ease-in-out 250ms;
            transition: border ease-in-out 250ms;
        }

        .input-wrap.input-radio label:hover {
            cursor: pointer;
        }

    .input-wrap.input-radio input:checked + label::before {
        background-color: #ffffff;
        border: 6px solid #0075be;
    }

    .input-wrap.input-radio input.has-error + label::before {
        border: 2px solid #C81414;
    }

    .input-wrap.input-radio input:disabled + label::before {
        border: 2px solid #646c76;
        background-color: #D5D8DE;
    }

    .input-wrap.input-radio input:checked:disabled + label::before {
        background-color: #d9dce1;
        border: 6px solid #646c76;
    }

    .input-wrap.input-radio input:focus + label::before {
        background-color: transparent;
        border: 2px solid #929ba9;
        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
    }

    .input-wrap.input-radio input[type="radio"]:checked:focus + label::before {
        background-color: #ffffff;
        border: 6px solid #0075be;
    }

    .input-wrap.input-radio input[type="radio"]:disabled + label::before {
        background-color: #D9DCE1;
    }

    .input-wrap.input-radio input[type="radio"]:disabled + label {
        color: #646c76;
    }

/*******************************************/
/******************BOX RADIOS***************/
/*******************************************/
.input-wrap.box-radio-wrap .error-message {
    margin-top: 8px;
}

.input-wrap.box-radio-wrap input[type="radio"] {
    display: inline-block;
    opacity: 0;
}

.input-wrap.box-radio-wrap input + label.box-radio-label {
    font-family: "heebo-bold";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: bold;
    color: #0075be;
    border: 2px solid #646c76;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    padding: 6px 14px;
    margin-left: -16px;
    margin-right: 12px;
    text-transform: capitalize;
    line-height: 16px;
    letter-spacing: 0.25px;
}

    .input-wrap.box-radio-wrap input + label.box-radio-label.has-error {
        border: 2px solid #C81414;
    }

    .input-wrap.box-radio-wrap input + label.box-radio-label:disabled {
        border: 2px solid #646c76;
        color: #646c76;
    }

@media screen and (max-width: 374px) {
    .input-wrap.box-radio-wrap input + label.box-radio-label {
        min-width: calc(50% - 53px);
    }
}

.input-wrap.box-radio-wrap input + label.box-radio-label:focus {
    background: #0075be;
    border: 2px solid #0075be;
    color: #ffffff;
    -webkit-box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.65);
    box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.65);
}

.input-wrap.box-radio-wrap input[type="radio"]:hover + label,
.input-wrap.box-radio-wrap input[type="radio"]:checked + label,
.input-wrap.box-radio-wrap input[type="radio"]:checked:focus + label {
    background: #0075be;
    border: 2px solid #0075be;
    color: #ffffff;
}

.input-wrap.box-radio-wrap input[type="radio"]:focus + label,
.input-wrap.box-radio-wrap input[type="radio"]:checked:focus + label {
    -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
    box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
}

.input-wrap.box-radio-wrap input[type="radio"]:disabled + label {
    border: 2px solid #929ba9;
    color: #646c76;
    cursor: default;
    background-color: transparent;
}

.input-wrap.box-radio-wrap input[type="radio"]:checked:disabled + label {
    border: 2px solid #646c76;
    color: #ffffff;
    background-color: #646c76;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/**************SWITCH CHECKBOX ***************/
.bmo-switch-wrap {
    width: 32px;
    cursor: pointer;
    width: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

    .bmo-switch-wrap:after {
        display: block;
        clear: both;
        content: "";
    }

    .bmo-switch-wrap .switch-label {
        font-size: 1.6rem;
        width: auto;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        display: inline-block;
        line-height: 24px;
        letter-spacing: .15px;
        cursor: pointer;
    }

        .bmo-switch-wrap .switch-label::first-letter {
            text-transform: capitalize;
        }

        .bmo-switch-wrap .switch-label.left {
            margin-right: 20px;
            position: relative;
            top: -2px;
        }

        .bmo-switch-wrap .switch-label.right {
            left: -8px;
            position: relative;
            top: -2px;
        }

    .bmo-switch-wrap input {
        display: inline;
        width: 0px;
        height: 0px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
    }

    .bmo-switch-wrap .bmo-switch-rail {
        height: 16px;
        border-radius: 8px;
        background: #646c76;
        width: 100%;
        width: 34px;
        display: inline-block;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
    }

        .bmo-switch-wrap .bmo-switch-rail.active {
            background: #73C3EB;
        }

    .bmo-switch-wrap .bmo-switch {
        height: 24px;
        width: 24px;
        min-width: 24px;
        max-width: 24px;
        padding: 0;
        border: none;
        background-color: #d9dce1;
        -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
        position: relative;
        border-radius: 12px;
        top: 4px;
        left: -40px;
        transition: all .3s ease;
        -moz-transition: all .3s ease;
        -webkit-transition: all .3s ease;
        display: inline-block;
        cursor: pointer;
    }

        .bmo-switch-wrap .bmo-switch.active {
            background-color: #0075be;
            left: -20px;
        }

        .bmo-switch-wrap .bmo-switch:focus {
            -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        }

    .bmo-switch-wrap.dual .bmo-switch {
        background-color: #0075be;
    }

    .bmo-switch-wrap.dual .bmo-switch-rail {
        background-color: #73C3EB;
    }

    .bmo-switch-wrap.full-width {
        width: 100%;
    }

        .bmo-switch-wrap.full-width .switch-label.left {
            position: relative;
            top: -2px;
            float: left;
        }

        .bmo-switch-wrap.full-width .bmo-switch-rail {
            float: right;
        }

        .bmo-switch-wrap.full-width .bmo-switch {
            float: right;
            top: -4px;
            left: 16px;
        }

            .bmo-switch-wrap.full-width .bmo-switch.active {
                top: -4px;
                left: 40px;
            }

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.bmo-footer {
    background-color: #ffffff;
    padding-top: 25px;
    padding-bottom: 25px;
}

    .bmo-footer .bmo-container {
        width: 100%;
        max-width: 1280;
        margin: auto;
        bottom: 0;
    }

        .bmo-footer .bmo-container .live-chat {
            background-color: #0075be;
            color: #ffffff;
            height: 48px;
            border-radius: 16px 16px 0 0;
            border: none;
            position: absolute;
            text-align: center;
            line-height: 24px;
            font-family: 'heebo-bold';
            letter-spacing: .25px;
            font-size: 1.4rem;
            margin-left: 16px;
            margin-top: -96px;
            background-image: url(../img/icons/24/24-contact-white.svg);
            background-size: 24px 24px;
            background-position: left 24px center;
            background-repeat: no-repeat;
            padding: 0 32px 0 56px;
            min-width: unset;
            cursor: pointer;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

            .bmo-footer .bmo-container .live-chat:hover {
                background-color: #005587;
            }

            .bmo-footer .bmo-container .live-chat:focus {
                background-color: #005587;
            }

        .bmo-footer .bmo-container .footer-nav {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

            .bmo-footer .bmo-container .footer-nav li {
                margin: 0;
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
            }

                .bmo-footer .bmo-container .footer-nav li .footer-link {
                    color: #0075be;
                    font-family: 'heebo-bold';
                    font-size: 1.4rem;
                    letter-spacing: 0.18px;
                    line-height: 32px;
                    padding-right: 24px;
                    padding-left: 0;
                }

                    .bmo-footer .bmo-container .footer-nav li .footer-link:hover {
                        color: #005587;
                        text-decoration: underline;
                    }

                    .bmo-footer .bmo-container .footer-nav li .footer-link:focus {
                        color: #005587;
                    }

        .bmo-footer .bmo-container .bmo-disclaimer {
            margin-top: 40px;
            margin-bottom: 24px;
            padding-top: 32px;
        }

            .bmo-footer .bmo-container .bmo-disclaimer .disclaimer-info {
                font-size: 1.2rem;
                line-height: 16px;
                margin: 12px 0;
            }

        .bmo-footer .bmo-container .footer-more-button {
            padding-left: 0;
            height: auto;
            background-image: url(../img/icons/16/16-baby-chevy-down-blue.svg);
            background-repeat: no-repeat;
            background-size: 16px 16px;
            background-position: right 8px center;
            height: 36px;
            line-height: 24px;
            font-size: 1.2rem;
        }

            .bmo-footer .bmo-container .footer-more-button.active {
                background-image: url(../img/icons/16/16-baby-chevy-up-blue.svg);
                background-repeat: no-repeat;
                background-size: 16px 16px;
                background-position: right 8px center;
            }

        .bmo-footer .bmo-container .footer-logo-wrap {
            width: 240px;
            float: left;
        }

            .bmo-footer .bmo-container .footer-logo-wrap img {
                width: 100%;
                position: relative;
                top: -16px;
            }

@media only screen and (max-width: 1064px) {
    .bmo-footer {
        padding-top: 24px;
        padding-bottom: 16px;
    }

        .bmo-footer .bmo-container .footer-more-button {
            max-width: 64px;
            float: left;
        }

        .bmo-footer .bmo-container .live-chat {
            height: 56px;
            border-radius: 50%;
            margin-left: 16px;
            margin-top: -56px;
            background-color: #005587;
            background-image: url(../img/icons/24/24-contact-white.svg);
            background-size: 24px 24px;
            background-position: center center;
            background-repeat: no-repeat;
            padding: 0;
            width: 56px;
            right: 16px;
            min-width: 56px;
            -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 2px rgba(0, 0, 0, 0.2);
        }

            .bmo-footer .bmo-container .live-chat span {
                display: none;
            }

            .bmo-footer .bmo-container .live-chat:hover {
                background-color: #005587;
            }

            .bmo-footer .bmo-container .live-chat:focus {
                background-color: #005587;
            }

        .bmo-footer .bmo-container .bmo-disclaimer {
            margin-top: 16px;
            margin-bottom: 24px;
            padding-top: 0;
        }

        .bmo-footer .bmo-container .footer-logo-wrap img {
            top: 0;
        }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

section.hero {
    background-color: #0079c1;
    color: #fff;
}

    section.hero .bmo-container {
        background-image: url(../img/hero-bg.svg);
        background-repeat: no-repeat;
        background-position: right -28px;
        background-size: 480px 177px;
        min-height: 144px;
    }

    section.hero h1 {
        font-size: 3.5rem;
        line-height: 40px;
        margin-bottom: 8px;
        padding-top: 40px;
        color: #ffffff;
        font-family: "heebo-light";
    }

    section.hero .hero-name {
        font-weight: bold;
        font-size: 3.5rem;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
    }

    section.hero .hero-copy {
        height: 24px;
        font-size: 1.8rem;
        font-family: "heebo";
        line-height: 24px;
        padding-top: 4px;
        display: block;
        padding-bottom: 32px;
    }

    section.hero .hero-name {
        font-family: "heebo-bold";
        font-size: 3.5rem;
        height: 40px;
        line-height: 40px;
    }

section.interior-hero {
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.1), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.1), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
}

    section.interior-hero h1 {
        font-size: 3.5rem;
        line-height: 40px;
        margin-bottom: 8px;
        padding-top: 40px;
        padding-bottom: 0;
    }

    section.interior-hero .hero-copy {
        font-size: 1.8rem;
        font-weight: 300;
        line-height: 24px;
        display: block;
        padding-bottom: 32px;
    }

@media only screen and (max-width: 599px) {
    section.hero {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-image: url(../img/mobile-bg.png);
        min-height: 0;
        padding-bottom: 0;
    }

        section.hero .bmo-container {
            background-image: none;
            min-height: auto;
        }

            section.hero .bmo-container h1 {
                padding-top: 0;
                font-size: 2.4rem;
                line-height: 32px;
                padding-top: 16px;
                margin-bottom: 0;
            }

            section.hero .bmo-container .hero-name {
                padding-top: 4px;
                font-size: 2.4rem;
                display: block;
            }

            section.hero .bmo-container .hero-copy {
                font-size: 1.4rem;
                line-height: 24px;
                padding-bottom: 16px;
            }

    section.interior-hero {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid #D9DCE1;
        -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        min-height: auto;
        padding-bottom: 16px;
    }

        section.interior-hero h1 {
            font-size: 2.2rem;
            line-height: 32px;
            margin-bottom: 0;
            padding-top: 16px;
        }

        section.interior-hero .hero-copy {
            font-size: 1.4rem;
            line-height: 24px;
        }
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bmo-loading {
    width: 80px;
    height: 80px;
    display: block;
    margin: auto;
    -webkit-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

    .bmo-loading.white img {
        width: 100%;
    }

.bmo-loading-text {
    color: #646c76;
    font-size: 1.4rem;
    line-height: 24px;
    text-align: center;
    display: block;
    margin-top: 24px;
}

button.loading-and-checkmark svg {
    height: 25px;
}

button.loading-and-checkmark #success1 {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
}

    button.loading-and-checkmark #success1 img {
        width: inherit;
    }

    button.loading-and-checkmark #success1.fade-in, button.loading-and-checkmark #success1.fade-out {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

button.loading-and-checkmark .spinner {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 24px;
    width: 24px;
}

    button.loading-and-checkmark .spinner.fade-in, button.loading-and-checkmark .spinner.fade-out {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

button.loading-and-checkmark .loader {
    background-image: url(../img/loading-small-white.svg);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    display: block;
    margin: 0 auto 0;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@media only screen and (max-width: 599px) {
    button.loading-and-checkmark {
        min-width: 232px;
    }
}

.fade-in {
    -webkit-animation: fadein 0.3s;
    animation: fadein 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.fade-out {
    -webkit-animation: fadeout 0.3s;
    animation: fadeout 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.fade-to-white {
    -webkit-animation: fade-white 0.3s;
    animation: fade-white 0.3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hide-me {
    display: none;
}

@-webkit-keyframes fade-white {
    to {
        background-color: #fff;
    }
}

@keyframes fade-white {
    to {
        background-color: #fff;
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes dash-check {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 200;
    }
}

@keyframes dash-check {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 200;
    }
}

/****************************************************************************************/
/**********************************LOADING STENCILS**************************************/
/****************************************************************************************/
@-webkit-keyframes stencil {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

@keyframes stencil {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.stencil {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: stencil;
    animation-name: stencil;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    height: 8px;
    position: relative;
    overflow: hidden;
    height: 8px;
    border-radius: 100px;
    background-color: #D9DCE1;
    min-width: 10px;
    display: inline-block;
    margin-right: 8px;
}

div.stencil {
    display: block;
    clear: both;
}

.stencil.circle {
    display: inline-block;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 28px;
    border: 0 solid #ccc;
    margin-right: 16px;
    float: left;
    overflow: hidden;
}

.stencil.float-right {
    float: right;
}

.stencil.center {
    margin: auto;
}

.stencil.tall {
    height: 32px;
    border-radius: 8px;
}

.stencil.stencil-2 {
    width: 2%;
}

.stencil.stencil-5 {
    width: 5%;
}

.stencil.stencil-10 {
    width: 10%;
}

.stencil.stencil-20 {
    width: 20%;
}

.stencil.stencil-30 {
    width: 30%;
}

.stencil.stencil-40 {
    width: 40%;
}

.stencil.stencil-50 {
    width: 50%;
}

.stencil.stencil-60 {
    width: 60%;
}

.stencil.stencil-70 {
    width: 70%;
}

.stencil.stencil-80 {
    width: 80%;
}

.stencil.stencil-90 {
    width: 90%;
}

.stencil.stencil-95 {
    width: 95%;
}

.stencil.stencil-100 {
    width: 100%;
}

.modal {
    max-width: 744px;
    width: 100%;
    border-radius: 4px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    padding: 48px 32px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    left: 50%;
    margin-left: -372px;
    top: 18%;
    overflow-y: scroll;
    z-index: 1050;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    visibility: hidden;
    opacity: 0;
    box-sizing: border-box;
    border: 2px solid #ffffff;
}

    .modal.active {
        top: 20%;
        visibility: visible;
        opacity: 1;
    }

    .modal .icon-button.modal-close {
        position: absolute;
        left: calc(100% - 44px);
        margin-top: -36px;
    }

    .modal .modal-buttons-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        clear: both;
        margin-top: -20px;
    }

        .modal .modal-buttons-wrap.center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .modal .modal-buttons-wrap .primary {
            margin-right: 16px;
            margin-bottom: 0;
        }

        .modal .modal-buttons-wrap .secondary, .modal .modal-buttons-wrap .tertiary {
            margin-bottom: 0;
        }

    .modal .modal-body .body-copy {
        margin: 24px 0;
    }

    .modal .bmo-overlay-dark {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.75);
        display: none;
    }

        .modal .bmo-overlay-dark.active {
            display: block;
            z-index: 1040;
        }

@media only screen and (max-width: 1064px) {
    .bmo-overlay-dark.active {
        background-color: rgba(0, 0, 0, 0);
    }

    .modal {
        left: 0;
        margin-left: 0;
        height: 100%;
        max-width: 1065px;
        top: 0;
        border-radius: 0;
    }

        .modal.active {
            top: 0;
        }

        .modal .icon-button.modal-close {
            position: absolute;
            left: 16px;
            margin-top: 0px;
            top: 16px;
        }

        .modal .modal-title h1 {
            color: #001928;
            font-family: 'heebo-bold';
            font-size: 1.6rem;
            letter-spacing: 0.11px;
            line-height: 24px;
        }

        .modal .modal-body {
            width: calc(100% + 8px);
            padding-right: 16px;
        }

        .modal .modal-buttons-wrap {
            display: block;
            clear: both;
        }

            .modal .modal-buttons-wrap .primary {
                margin-right: auto;
                margin-bottom: 8px;
            }

            .modal .modal-buttons-wrap .secondary, .modal .modal-buttons-wrap .tertiary {
                margin-bottom: 0;
            }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/*********************************************************************/
/*********************************POPOVER STYLES**********************/
/*********************************************************************/
.popover-wrapper {
    position: relative;
}

.popover {
    position: absolute;
    width: 250px;
    background: #ffffff;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 56px 16px 16px;
    font-size: 1.4rem;
    line-height: 18px;
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
    box-sizing: border-box;
    transition: .3s all ease;
    -moz-transition: .3s all ease;
    -webkit-transition: .3s all ease;
    opacity: 0;
    visibility: hidden;
    margin-left: 50px;
    text-align: left;
    z-index: 1060;
    display: none;
}

    .popover.active {
        opacity: 1;
        width: 250px;
        visibility: visible;
        margin-left: 0px;
        display: block;
    }

    .popover:hover.top:after, .popover:hover.bottom:after, .popover:hover.left:after, .popover:hover.right:after {
        -webkit-filter: none;
        filter: none;
    }

    .popover.top {
        margin-top: -150px;
        margin-left: -20px;
    }

        .popover.top::after {
            content: '';
            position: absolute;
            border-style: solid;
            border-width: 8px 8px 0;
            border-color: #FFFFFF transparent;
            display: block;
            width: 0;
            z-index: 1;
            margin-left: -8px;
            bottom: -8px;
            left: 32px;
        }

    .popover.bottom {
        margin-left: -20px;
        margin-top: 5px;
    }

        .popover.bottom::after {
            content: '';
            position: absolute;
            border-style: solid;
            border-width: 0 8px 8px;
            border-color: #FFFFFF transparent;
            display: block;
            width: 0;
            z-index: 1;
            margin-left: -8px;
            top: -8px;
            left: 32px;
        }

    .popover.right {
        margin-left: 30px;
        margin-top: -50px;
    }

        .popover.right::after {
            content: '';
            position: absolute;
            border-style: solid;
            border-width: 8px 8px 8px 0;
            border-color: transparent #FFFFFF;
            display: block;
            width: 0;
            z-index: 1;
            margin-top: -8px;
            left: -8px;
            top: 32px;
        }

    .popover.left {
        margin-top: -45px;
        margin-left: -258px;
    }

        .popover.left::after {
            content: '';
            position: absolute;
            border-style: solid;
            border-width: 8px 0 8px 8px;
            border-color: transparent #FFFFFF;
            display: block;
            width: 0;
            z-index: 1;
            margin-top: -8px;
            right: -8px;
            top: 32px;
        }

    .popover .popover-header {
        content: attr(data-popover-header);
        font-family: 'heebo-bold';
        font-size: 1.4rem;
        color: #001928;
        line-height: 18px;
    }

    .popover .popover-content {
        content: attr(data-popover-content);
        font-size: 1.4rem;
        color: #001928;
        line-height: 18px;
        max-width: 100%;
    }

    .popover .icon {
        width: 24px;
        height: 24px;
        margin: 0;
        display: block;
        float: right;
        border: none;
        min-width: 24px;
        padding: 0;
        cursor: pointers;
    }

    .popover .icon-button {
        margin-top: -8px;
        margin-left: 197px;
        position: absolute;
    }

    .popover:hover {
        -webkit-box-shadow: 0 0 8px 0 rgba(0, 25, 40, 0.12), 0 4px 24px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 8px 0 rgba(0, 25, 40, 0.12), 0 4px 24px 0 rgba(0, 25, 40, 0.07);
    }

@media only screen and (max-width: 599px) {
    .popover.left,
    .popover.right,
    .popover.top,
    .popover.bottom {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 16px 56px 16px 16px;
        font-size: 1.4rem;
        line-height: 18px;
        margin-left: 0;
        z-index: 1060;
        border-radius: 0;
    }

        .popover.left:after,
        .popover.right:after,
        .popover.top:after,
        .popover.bottom:after {
            display: none;
        }

    .popover .icon {
        width: 24px;
        height: 24px;
        margin: 0;
        display: block;
        float: right;
        border: none;
        min-width: 24px;
        padding: 0;
        cursor: pointer;
    }

    .popover .icon-button {
        margin-left: 0;
        right: 16px;
        position: absolute;
    }
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.tab-page {
    overflow-x: visible;
}

.bmo-tabs-wrap {
    overflow-x: scroll;
    display: block;
    white-space: nowrap;
    margin: 32px 0 0 0;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    position: relative;
    /* for true centeredness when using "offsetLeft" */
}

    .bmo-tabs-wrap::-webkit-scrollbar {
        width: 0 !important;
    }

    .bmo-tabs-wrap .tab-list {
        margin-bottom: 24px;
    }

        .bmo-tabs-wrap .tab-list:before {
            content: '';
            display: inline-block;
        }

        .bmo-tabs-wrap .tab-list::after {
            content: '';
            display: inline-block;
        }

        .bmo-tabs-wrap .tab-list li,
        .bmo-tabs-wrap .tab-list .tab {
            display: inline-block;
            font-size: 1.6rem;
            cursor: pointer;
            transition: all .3s ease;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            font-family: 'heebo-medium';
            color: #646c76;
            padding: 8px 16px;
            position: relative;
            top: 4px;
        }

            .bmo-tabs-wrap .tab-list li:first-of-type,
            .bmo-tabs-wrap .tab-list .tab:first-of-type {
                margin-left: 2px;
            }

            .bmo-tabs-wrap .tab-list li:focus,
            .bmo-tabs-wrap .tab-list .tab:focus {
                color: #0075be;
                z-index: 1;
                border-radius: 4px;
                -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
                box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            }

            .bmo-tabs-wrap .tab-list li:focus-within,
            .bmo-tabs-wrap .tab-list .tab:focus-within {
                color: #0075be;
                z-index: 1;
                border-radius: 4px;
                -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
                box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            }

            .bmo-tabs-wrap .tab-list li:hover,
            .bmo-tabs-wrap .tab-list .tab:hover {
                color: #0075be;
            }

            .bmo-tabs-wrap .tab-list li.active-tab-label,
            .bmo-tabs-wrap .tab-list .tab.active-tab-label {
                color: #001928;
                text-align: center;
            }

                .bmo-tabs-wrap .tab-list li.active-tab-label .tab-indicator,
                .bmo-tabs-wrap .tab-list .tab.active-tab-label .tab-indicator {
                    background-color: #0075be;
                    width: calc(100% + 32px);
                    left: -16px;
                    border-radius: 2px;
                }

            .bmo-tabs-wrap .tab-list li .tab-indicator,
            .bmo-tabs-wrap .tab-list .tab .tab-indicator {
                display: block;
                position: relative;
                top: 8px;
                width: calc(100% + 34px);
                left: -17px;
                height: 4px;
                background-color: #d9dce1;
            }

        .bmo-tabs-wrap .tab-list .tablist-guideline {
            height: 4px;
            background-color: #d9dce1;
            border-radius: 2px;
            position: relative;
            top: 48px;
            display: block;
        }

.tab-panel {
    -webkit-transition: opacity 1.5s ease-out;
    transition: opacity 1.5s ease-out;
    display: none;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

    .tab-panel.active-tab-content {
        opacity: 1;
        display: block;
        height: auto;
        font-size: 1.6rem;
        padding: 0 4px 0 0;
        width: 100%;
    }

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

.table {
    background-color: transparent;
    width: 100%;
}

    .table thead {
        width: 100%;
        display: table-header-group;
        border-bottom: 2px solid #929ba9;
    }

        .table thead .table-heading {
            font-family: "heebo-bold";
            font-size: 1.4rem;
            display: table-cell;
            text-align: left;
            padding: 16px 16px 16px 16px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    .table tbody .table-row {
        border-bottom: 1px solid #d9dce1;
        width: 100%;
        padding: 0;
    }

        .table tbody .table-row .table-data {
            font-size: 1.4rem;
            vertical-align: middle;
            display: table-cell;
            line-height: 32px;
            padding: 8px 16px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

            .table thead .table-row .table-heading .input-wrap.input-checkbox,
            .table tbody .table-row .table-data .input-wrap.input-checkbox {
                padding-left: 0;
            }

                .table thead .table-row .table-heading .input-wrap.input-checkbox input[type="checkbox"] + label:before,
                .table tbody .table-row .table-data .input-wrap.input-checkbox input[type="checkbox"] + label:before {
                    top: 0px;
                    left: -24px;
                }

                .table thead .table-row .table-heading .input-wrap.input-checkbox input[type="checkbox"],
                .table tbody .table-row .table-data .input-wrap.input-checkbox input[type="checkbox"] {
                    top: 12px;
                    left: 0px;
                }

                .table thead .table-row .table-heading .input-wrap.input-checkbox label,
                .table tbody .table-row .table-data .input-wrap.input-checkbox label {
                    top: -8px;
                    left: 24px;
                }

                .table thead .table-row .table-heading .input-wrap.input-checkbox label {
                    text-indent: 8px;
                    font-family: 'heebo-bold';
                    padding-left: 8px;
                    font-size: 1.4rem;
                }

                .table tbody .table-row .table-data .input-wrap.input-checkbox input[type="checkbox"] + label:before,
                .table tbody .table-row .table-data .input-wrap.input-checkbox input[type="checkbox"] {
                    width: 24px;
                    height: 24px;
                    position: relative;
                    top: 4px;
                }

                .table thead .table-row .table-heading .input-wrap.input-checkbox input[type="checkbox"] + label:before,
                .table thead .table-row .table-heading .input-wrap.input-checkbox input[type="checkbox"] {
                    margin-right: 16px;
                }

    .table caption {
        position: absolute;
        clip: rect(1px 1px 1px 1px);
        /* IE6, IE7 */
        clip: rect(1px, 1px, 1px, 1px);
        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
    }

    .table.sortable thead .table-heading:not(.no-sort) {
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
        cursor: pointer;
    }

        .table.sortable thead .table-heading:not(.no-sort):focus {
            -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
            outline: 0;
        }

        .table.sortable thead .table-heading:not(.no-sort):not(.sorted):not(.reverse):after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url(../img/icons/16/16-baby-chevy-down-granite.svg) no-repeat;
            opacity: .6;
            vertical-align: middle;
            margin-left: 4px;
        }

    .table.sortable thead .table-heading:not(no-sort):not(.no-sort):not(.reverse):hover:after {
        opacity: 1;
        background: url(../img/icons/16/16-baby-chevy-down-blue.svg) no-repeat;
    }

    .table.sortable thead .table-heading span#sorttable_sortrevind,
    .table.sortable thead .table-heading span#sorttable_sortfwdind {
        font-size: 0;
        display: inline-block;
        vertical-align: middle;
        margin-left: 4px;
        width: 16px;
        height: 16px;
    }

    .table.sortable thead .table-heading span#sorttable_sortfwdind {
        background: url(../img/icons/16/16-baby-chevy-down-blue.svg) no-repeat;
    }

    .table.sortable thead .table-heading span#sorttable_sortrevind {
        background: url(../img/icons/16/16-baby-chevy-up-blue.svg) no-repeat;
    }

.responsive-table-wrap {
    overflow: scroll;
}

    .responsive-table-wrap .table.responsive-table {
        min-width: 1240px;
    }

.sticky-left-table-wrap {
    overflow: scroll;
    max-height: 300px;
}

    .sticky-left-table-wrap .sticky-left-table {
        width: 100%;
        max-width: 1280px;
        margin: auto;
        min-width: 1240px;
    }

        .sticky-left-table-wrap .sticky-left-table .table-head {
            border: none;
        }

            .sticky-left-table-wrap .sticky-left-table .table-head .table-row .table-heading {
                border-bottom: 2px solid #929ba9;
                background-color: #f5f6f7;
            }

                .sticky-left-table-wrap .sticky-left-table .table-head .table-row .table-heading.dead-zone {
                    position: -webkit-sticky;
                    position: sticky;
                    left: 0;
                    z-index: 999;
                    border-bottom: 2px solid #929ba9;
                }

        .sticky-left-table-wrap .sticky-left-table .table-body {
            overflow: scroll;
        }

            .sticky-left-table-wrap .sticky-left-table .table-body .table-row .table-heading {
                text-align: left;
                vertical-align: middle;
                padding-left: 16px;
                position: -webkit-sticky;
                position: sticky;
                left: 0;
                background-color: #f5f6f7;
            }

.double-sticky-table-wrap {
    overflow: scroll;
    max-height: 300px;
}

    .double-sticky-table-wrap .double-sticky {
        width: 100%;
        max-width: 1280px;
        margin: auto;
        min-width: 1240px;
    }

        .double-sticky-table-wrap .double-sticky .table-head {
            border: none;
        }

            .double-sticky-table-wrap .double-sticky .table-head .table-row .table-heading {
                position: -webkit-sticky;
                position: sticky;
                top: 0;
                border-bottom: 2px solid #929ba9;
                background-color: #f5f6f7;
            }

                .double-sticky-table-wrap .double-sticky .table-head .table-row .table-heading.dead-zone {
                    position: -webkit-sticky;
                    position: sticky;
                    left: 0;
                    top: 0;
                    z-index: 999;
                    border-bottom: 2px solid #929ba9;
                }

        .double-sticky-table-wrap .double-sticky .table-body {
            overflow: scroll;
        }

            .double-sticky-table-wrap .double-sticky .table-body .table-row .table-heading {
                text-align: left;
                vertical-align: middle;
                padding-left: 16px;
                position: -webkit-sticky;
                position: sticky;
                left: 0;
                background-color: #f5f6f7;
            }

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

/*********************************************************************/
/*********************************Tooltip STYLES**********************/
/*********************************************************************/
[tooltip] {
    position: relative;
    font-family: "heebo";
}

    [tooltip]::before, [tooltip]::after {
        text-transform: none;
        font-size: 1.4rem;
        line-height: 24px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: none;
        position: absolute;
        opacity: 1;
        display: none;
    }

    [tooltip]::before {
        content: '';
        border: 7px solid transparent;
        z-index: 1001;
    }

    [tooltip]::after {
        content: attr(tooltip);
        text-align: left;
        min-width: 280px;
        max-width: 336px;
        padding: 16px;
        border-radius: 4px;
        background: #fff;
        color: #000;
        line-height: 24px;
        z-index: 1000;
        -webkit-box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        box-shadow: 0 0 2px 0 rgba(0, 25, 40, 0.12), 0 2px 2px 0 rgba(0, 25, 40, 0.07);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    [tooltip]:hover::before, [tooltip]:hover::after {
        display: block;
    }

    [tooltip]:focus::before, [tooltip]:focus::after {
        display: block;
    }

[tooltip='']::before, [tooltip='']::after {
    display: none;
}

[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #fff;
}

[tooltip]:not([flow])::after, [tooltip][flow^="up"]::after {
    bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after {
    left: 50%;
    -webkit-transform: translate(-50%, -0.5em);
    transform: translate(-50%, -0.5em);
}

[tooltip][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #fff;
}

[tooltip][flow^="down"]::after {
    top: calc(100% + 5px);
}

[tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after {
    left: 50%;
    -webkit-transform: translate(-50%, 0.5em);
    transform: translate(-50%, 0.5em);
}

[tooltip][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #fff;
    left: calc(0em - 5px);
    -webkit-transform: translate(-0.5em, -50%);
    transform: translate(-0.5em, -50%);
}

[tooltip][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    -webkit-transform: translate(-0.5em, -50%);
    transform: translate(-0.5em, -50%);
}

[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #fff;
    right: calc(0em - 5px);
    -webkit-transform: translate(0.5em, -50%);
    transform: translate(0.5em, -50%);
}

[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    -webkit-transform: translate(0.5em, -50%);
    transform: translate(0.5em, -50%);
}

@-webkit-keyframes tooltips-vert {
    to {
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-vert {
    to {
        opacity: 1;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}

@-webkit-keyframes tooltips-horz {
    to {
        opacity: 1;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: 1;
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
}

[tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after, [tooltip]:not([flow]):focus::before, [tooltip]:not([flow]):focus::after, [tooltip][flow^="up"]:focus::before, [tooltip][flow^="up"]:focus::after, [tooltip][flow^="down"]:focus::before, [tooltip][flow^="down"]:focus::after {
    -webkit-animation: tooltips-vert 300ms ease-out forwards;
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after, [tooltip][flow^="left"]:focus::before, [tooltip][flow^="left"]:focus::after, [tooltip][flow^="right"]:focus::before, [tooltip][flow^="right"]:focus::after {
    -webkit-animation: tooltips-horz 300ms ease-out forwards;
    animation: tooltips-horz 300ms ease-out forwards;
}

/************************************/
/*************LOGO COLOURS***********/
/************************************/
/************************************/
/**********PRIMARY COLOURS***********/
/************************************/
/************************************/
/*********FEEDBACK COLOURS***********/
/************************************/
/************************************/
/******COMPLIMENTARY COLOURS*********/
/************************************/
/************************************/
/************BMO SKY BLUE************/
/************************************/
/************************************/
/**************BMO OLIVE*************/
/************************************/
/************************************/
/*************BMO POOLSIDE***********/
/************************************/
/************************************/
/*************BMO SUNFLOWER**********/
/************************************/
/************************************/
/*************BMO LILAC**************/
/************************************/
/************************************/
/**********BMO RETROSPECT************/
/************************************/
/************************************/
/**********BMO OrchidT************/
/************************************/
/************************************/
/********GRID SCREEN SIZES***********/
/************************************/
/************************************/
/**************FONTS*****************/
/************************************/
/************************************/
/**************SPACING***************/
/************************************/
/************************************/
/**************Z-Index Stack*********/
/************************************/
/************************************/
/**************ICONS*****************/
/************************************/
:root {
    /************GUTTER WIDTH*************/
    --gutter-width: 32px;
    --each-grid-gutter: calc(var(--gutter-width) / 2);
    --md-each-grid-gutter: calc(var(--gutter-width) / 2.66);
    --sm-each-grid-gutter: calc(var(--gutter-width) / 4);
    --default-screen-max: 1280px;
    /***ZINDEX STACK***/
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-overlay: 1040;
    --zindex-dropdown: 1045;
    --zindex-modal: 1050;
    --zindex-popover: 1060;
}

input[type="date"] {
    width: 100%;
    height: 36px;
    line-height: 40px;
    margin: 7px 0px 0 0px;
    padding: 0px;
    white-space: nowrap;
    border: none;
    background-color: rgba(225, 225, 225, 0);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.date-picker {
    /* a.icon-button {
		border-radius: 0;
	} */
}

    .date-picker input:not(:focus) ~ .input-helper-text {
        visibility: hidden;
    }

    .date-picker label.slide-label:not(.active-label) ~ .input-helper-text {
        visibility: visible;
    }

    .date-picker .form-field-button {
        padding: 12px 0 0 8px;
    }

    .date-picker .icon-button.widget-trigger:disabled span {
        -webkit-filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%) !important;
        filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%) !important;
        cursor: default;
    }

    .date-picker .icon-button.widget-trigger:hover span {
        -webkit-filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
        filter: brightness(0) saturate(100%) brightness(70%) invert(19%) sepia(33%) saturate(6007%) hue-rotate(185deg) brightness(95%) contrast(101%);
    }

.calendar-widget-container {
    position: relative;
}

    .calendar-widget-container .calendar-widget {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 16px;
        /* padding-left: 16px;
		padding-right: 16px; */
        border-radius: 0;
        font-size: 1.8rem;
        min-height: 0;
        max-height: 0;
        overflow: hidden;
        width: 402px;
        opacity: 0;
        position: absolute;
        z-index: 1040;
        top: 32px;
        /* &[aria-expanded="true"] {
			display: block;
		} */
    }

        .calendar-widget-container .calendar-widget.active {
            opacity: 1;
            min-height: 472px;
            max-height: 472px;
            top: 16px;
        }

        .calendar-widget-container .calendar-widget .head {
            padding: 12px 0;
            text-align: center;
            position: relative;
            border-bottom: #d9dce1 solid 2px;
        }

            .calendar-widget-container .calendar-widget .head .icon-button.close-btn {
                position: absolute;
                right: 0;
            }

            .calendar-widget-container .calendar-widget .head span {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                line-height: 24px;
            }

        .calendar-widget-container .calendar-widget .dp-body {
            padding: 24px 16px;
        }

            .calendar-widget-container .calendar-widget .dp-body .dp-cycler {
                text-align: center;
                position: relative;
            }

                .calendar-widget-container .calendar-widget .dp-body .dp-cycler .icon-button {
                    vertical-align: middle;
                }

                    .calendar-widget-container .calendar-widget .dp-body .dp-cycler .icon-button.chvy-left:disabled {
                        -webkit-filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%) !important;
                        filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%) !important;
                        cursor: default;
                    }

                    .calendar-widget-container .calendar-widget .dp-body .dp-cycler .icon-button.chvy-right:disabled {
                        -webkit-filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%) !important;
                        filter: brightness(0) saturate(100%) invert(41%) sepia(4%) saturate(1225%) hue-rotate(174deg) brightness(97%) contrast(78%) !important;
                        cursor: default;
                    }

                    .calendar-widget-container .calendar-widget .dp-body .dp-cycler .icon-button.blue {
                        cursor: pointer;
                    }

                .calendar-widget-container .calendar-widget .dp-body .dp-cycler > span {
                    line-height: 24px;
                    min-width: 170px;
                    display: inline-block;
                    vertical-align: middle;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                .calendar-widget-container .calendar-widget .dp-body .dp-cycler div[role="alert"] {
                    font-size: 0;
                }

            .calendar-widget-container .calendar-widget .dp-body .grid-template {
                display: -ms-grid;
                display: grid;
                grid-gap: 4px;
                -ms-grid-columns: (1fr)[7];
                grid-template-columns: repeat(7, 1fr);
            }

                .calendar-widget-container .calendar-widget .dp-body .grid-template div {
                    min-height: 44px;
                    padding-top: 8px;
                    font-size: 1.6rem;
                    text-align: center;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    font-family: 'heebo-medium';
                    border: transparent solid 2px;
                    border-radius: 4px;
                    color: #929ba9;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }

                    .calendar-widget-container .calendar-widget .dp-body .grid-template div[tabindex="0"]:focus {
                        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
                        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
                        outline: 0;
                    }

                    .calendar-widget-container .calendar-widget .dp-body .grid-template div.weekday {
                        font-size: 1.2rem;
                        padding: 32px 0 12px;
                        min-height: unset;
                        color: #001928;
                    }

                    .calendar-widget-container .calendar-widget .dp-body .grid-template div.today {
                        border: #929ba9 solid 2px;
                    }

                        .calendar-widget-container .calendar-widget .dp-body .grid-template div.today:after {
                            content: 'TODAY';
                            font-size: 10px;
                            display: block;
                            font-family: inherit;
                            padding-top: 3px;
                        }

                    .calendar-widget-container .calendar-widget .dp-body .grid-template div.selectable {
                        color: #0075be;
                        cursor: pointer;
                    }

                        .calendar-widget-container .calendar-widget .dp-body .grid-template div.selectable:hover {
                            border: #0075be solid 2px;
                        }

                        .calendar-widget-container .calendar-widget .dp-body .grid-template div.selectable.selected {
                            background-color: #0075be;
                            color: white;
                        }

                        .calendar-widget-container .calendar-widget .dp-body .grid-template div.selectable.today {
                            border: #0075be solid 2px;
                        }

                    .calendar-widget-container .calendar-widget .dp-body .grid-template div.not-this-month {
                        color: #d9dce1;
                        font-size: 1.4rem;
                    }

        .calendar-widget-container .calendar-widget.long-term {
            min-height: 0;
        }

            .calendar-widget-container .calendar-widget.long-term.active {
                min-height: 382px;
                max-height: 382px;
            }

            .calendar-widget-container .calendar-widget.long-term .head .icon-button.larr {
                position: absolute;
                left: 0;
            }

                .calendar-widget-container .calendar-widget.long-term .head .icon-button.larr:disabled {
                    display: none;
                }

            .calendar-widget-container .calendar-widget.long-term .grid-template > div {
                color: #0075be;
                cursor: pointer;
            }

                .calendar-widget-container .calendar-widget.long-term .grid-template > div:hover {
                    border: #0075be solid 2px;
                }

                .calendar-widget-container .calendar-widget.long-term .grid-template > div.selected {
                    background-color: #0075be;
                    color: white;
                }

            .calendar-widget-container .calendar-widget.long-term .grid-template.grid-col-3 {
                display: -ms-grid;
                display: grid;
                grid-gap: 4px;
                -ms-grid-columns: (1fr)[3];
                grid-template-columns: repeat(3, 1fr);
            }

                .calendar-widget-container .calendar-widget.long-term .grid-template.grid-col-3 div {
                    min-height: 44px;
                    padding-top: 8px;
                    font-size: 1.6rem;
                    text-align: center;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    font-family: 'heebo-medium';
                    border: transparent solid 2px;
                    border-radius: 4px;
                    color: #929ba9;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    padding-top: 12px;
                }

                    .calendar-widget-container .calendar-widget.long-term .grid-template.grid-col-3 div[tabindex="0"]:focus {
                        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
                        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
                        outline: 0;
                    }

                    .calendar-widget-container .calendar-widget.long-term .grid-template.grid-col-3 div[tabindex="0"] {
                        color: #0075be;
                        cursor: pointer;
                    }

                        .calendar-widget-container .calendar-widget.long-term .grid-template.grid-col-3 div[tabindex="0"]:hover {
                            border: #0075be solid 2px;
                        }

                        .calendar-widget-container .calendar-widget.long-term .grid-template.grid-col-3 div[tabindex="0"].selected {
                            background-color: #0075be;
                            color: white;
                        }

        .calendar-widget-container .calendar-widget.fr .today:after, .calendar-widget-container .calendar-widget.fr-ca .today:after {
            content: 'AUJ' !important;
        }

.input-helper-text, span.error-message {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media only screen and (max-width: 599px) {
    .calendar-widget-container {
        position: static;
    }

        .calendar-widget-container .calendar-widget {
            top: 0 !important;
            left: 0 !important;
            margin: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-shadow: none;
            box-shadow: none;
            overflow-y: auto;
            min-height: auto;
            max-height: unset !important;
            border: none;
        }

            .calendar-widget-container .calendar-widget .dp-body {
                padding: 24px 0;
            }

            .calendar-widget-container .calendar-widget button {
                margin: unset !important;
            }
}

:root {
    --circle-list-bullet: url(../img/icons/8/8-bullet.svg);
    --circle-list-bullet-nested: url(../img/icons/8/8-nested-bullet.svg);
}

[dark-theme] {
    --circle-list-bullet: url(../img/icons/8/8-bullet-dm.svg);
    --circle-list-bullet-nested: url(../img/icons/8/8-nested-bullet-dm.svg);
}

.ul {
    list-style-position: inside;
}

    .ul.bullet-list {
        list-style-type: none;
    }

        .ul.bullet-list .li {
            background-image: var(--circle-list-bullet);
            background-repeat: no-repeat;
            background-position: left 10px;
            padding-left: 16px;
            line-height: 28px;
            font-size: 1.6rem;
        }

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .ul.bullet-list .li {
            background-image: url(../img/icons/8/8-bullet.svg);
        }
    }
}

.ul.bullet-list .bullet-list-nested {
    margin-left: 16px;
    list-style-type: none;
}

    .ul.bullet-list .bullet-list-nested .li {
        background-image: var(--circle-list-bullet-nested);
        background-repeat: no-repeat;
        background-position: left 10px;
        padding-left: 16px;
        line-height: 24px;
        margin-left: 20px;
        font-size: 1.6rem;
    }

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .ul.bullet-list .bullet-list-nested .li {
            background-image: url(../img/icons/8/8-nested-bullet.svg);
        }
    }
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        [dark-theme] .ul.bullet-list .li {
            background-image: url(../img/icons/8/8-bullet-dm.svg);
        }
    }
}

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        [dark-theme] .ul.bullet-list .bullet-list-nested .li {
            background-image: url(../img/icons/8/8-nested-bullet-dm.svg);
        }
    }
}

.ol {
    list-style-position: inside;
    word-break: break-all;
}

    .ol .li {
        line-height: 28px;
        font-size: 1.6rem;
    }

        .ol .li:before {
            content: "";
            display: inline-block;
            width: 4px;
        }

    .ol .nested {
        list-style-type: lower-roman;
        margin-left: 24px;
        list-style-position: outside;
        padding-left: 28px;
    }

        .ol .nested .li {
            line-height: 24px;
        }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .icon {
        background-position: center center;
        background-repeat: no-repeat;
    }

        .icon:focus {
            -webkit-box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.65);
            box-shadow: 0 0 4px 3px rgba(115, 195, 235, 0.65);
            outline: 0;
        }

        .icon.small {
            width: 16px;
            height: 16px;
            display: inline-block;
        }

        .icon.medium {
            width: 24px;
            height: 24px;
            display: inline-block;
        }

        .icon.large {
            width: 48px;
            height: 48px;
            display: inline-block;
        }
        /*******************************************************************/
        /*****************************SMALL ICON STYLES*********************/
        /*******************************************************************/
        .icon.small.checkmark.blue {
            background-image: url(../img/icons/16/16-checkmark-blue.svg);
        }

        .icon.small.checkmark.ultramarine {
            background-image: url(../img/icons/16/16-checkmark-ultramarine.svg);
        }

        .icon.small.checkmark.white {
            background-image: url(../img/icons/16/16-checkmark-white.svg);
        }

        .icon.small.checkmark.granite {
            background-image: url(../img/icons/16/16-checkmark-granite.svg);
        }

        .icon.small.baby-chevy-down.blue {
            background-image: url(../img/icons/16/16-baby-chevy-down-blue.svg);
        }

        .icon.small.baby-chevy-up.blue {
            background-image: url(../img/icons/16/16-baby-chevy-up-blue.svg);
        }

        .icon.small.baby-chevy-right.blue {
            background-image: url(../img/icons/16/16-baby-chevy-right-blue.svg);
        }

        .icon.small.baby-chevy-left.blue {
            background-image: url(../img/icons/16/16-baby-chevy-left-blue.svg);
        }

        .icon.small.baby-chevy-down.ultramarine {
            background-image: url(../img/icons/16/16-baby-chevy-down-ultramarine.svg);
        }

        .icon.small.baby-chevy-up.ultramarine {
            background-image: url(../img/icons/16/16-baby-chevy-up-ultramarine.svg);
        }

        .icon.small.baby-chevy-right.ultramarine {
            background-image: url(../img/icons/16/16-baby-chevy-right-ultramarine.svg);
        }

        .icon.small.baby-chevy-left.ultramarine {
            background-image: url(../img/icons/16/16-baby-chevy-left-ultramarine.svg);
        }

        .icon.small.baby-chevy-down.white {
            background-image: url(../img/icons/16/16-baby-chevy-down-white.svg);
        }

        .icon.small.baby-chevy-up.white {
            background-image: url(../img/icons/16/16-baby-chevy-up-white.svg);
        }

        .icon.small.baby-chevy-right.white {
            background-image: url(../img/icons/16/16-baby-chevy-right-white.svg);
        }

        .icon.small.baby-chevy-left.white {
            background-image: url(../img/icons/16/16-baby-chevy-left-white.svg);
        }

        .icon.small.baby-chevy-down.granite {
            background-image: url(../img/icons/16/16-baby-chevy-down-granite.svg);
        }

        .icon.small.baby-chevy-up.granite {
            background-image: url(../img/icons/16/16-baby-chevy-up-granite.svg);
        }

        .icon.small.baby-chevy-right.granite {
            background-image: url(../img/icons/16/16-baby-chevy-right-granite.svg);
        }

        .icon.small.baby-chevy-left.granite {
            background-image: url(../img/icons/16/16-baby-chevy-left-granite.svg);
        }

        .icon.small.chevron-down.blue {
            background-image: url(../img/icons/16/16-chevron-down-blue.svg);
        }

        .icon.small.chevron-down.ultramarine {
            background-image: url(../img/icons/16/16-chevron-down-ultramarine.svg);
        }

        .icon.small.chevron-down.white {
            background-image: url(../img/icons/16/16-chevron-down-white.svg);
        }

        .icon.small.chevron-down.granite {
            background-image: url(../img/icons/16/16-chevron-down-granite.svg);
        }

        .icon.small.chevron-left.blue {
            background-image: url(../img/icons/16/16-chevron-left-blue.svg);
        }

        .icon.small.chevron-left.ultramarine {
            background-image: url(../img/icons/16/16-chevron-left-ultramarine.svg);
        }

        .icon.small.chevron-left.white {
            background-image: url(../img/icons/16/16-chevron-left-white.svg);
        }

        .icon.small.chevron-left.granite {
            background-image: url(../img/icons/16/16-chevron-left-granite.svg);
        }

        .icon.small.chevron-up.blue {
            background-image: url(../img/icons/16/16-chevron-up-blue.svg);
        }

        .icon.small.chevron-up.ultramarine {
            background-image: url(../img/icons/16/16-chevron-up-ultramarine.svg);
        }

        .icon.small.chevron-up.white {
            background-image: url(../img/icons/16/16-chevron-up-white.svg);
        }

        .icon.small.chevron-up.granite {
            background-image: url(../img/icons/16/16-chevron-up-granite.svg);
        }

        .icon.small.chevron-right.blue {
            background-image: url(../img/icons/16/16-chevron-right-blue.svg);
        }

        .icon.small.chevron-right.ultramarine {
            background-image: url(../img/icons/16/16-chevron-right-ultramarine.svg);
        }

        .icon.small.chevron-right.white {
            background-image: url(../img/icons/16/16-chevron-right-white.svg);
        }

        .icon.small.chevron-right.granite {
            background-image: url(../img/icons/16/16-chevron-right-granite.svg);
        }

        .icon.small.filter.blue {
            background-image: url(../img/icons/16/16-filter-blue.svg);
        }

        .icon.small.filter.ultramarine {
            background-image: url(../img/icons/16/16-filter-ultramarine.svg);
        }

        .icon.small.filter.white {
            background-image: url(../img/icons/16/16-filter-white.svg);
        }

        .icon.small.filter.granite {
            background-image: url(../img/icons/16/16-filter-granite.svg);
        }

        .icon.small.fingerprint.blue {
            background-image: url(../img/icons/16/16-fingerprint-blue.svg);
        }

        .icon.small.fingerprint.ultramarine {
            background-image: url(../img/icons/16/16-fingerprint-ultramarine.svg);
        }

        .icon.small.fingerprint.white {
            background-image: url(../img/icons/16/16-fingerprint-white.svg);
        }

        .icon.small.fingerprint.granite {
            background-image: url(../img/icons/16/16-fingerprint-granite.svg);
        }

        .icon.small.star.blue {
            background-image: url(../img/icons/16/16-star-blue.svg);
        }

        .icon.small.star.ultramarine {
            background-image: url(../img/icons/16/16-star-ultramarine.svg);
        }

        .icon.small.star.white {
            background-image: url(../img/icons/16/16-star-white.svg);
        }

        .icon.small.star.granite {
            background-image: url(../img/icons/16/16-star-granite.svg);
        }

        .icon.small.recurring.blue {
            background-image: url(../img/icons/16/16-recurring-blue.svg);
        }

        .icon.small.recurring.ultramarine {
            background-image: url(../img/icons/16/16-recurring-ultramarine.svg);
        }

        .icon.small.recurring.white {
            background-image: url(../img/icons/16/16-recurring-white.svg);
        }

        .icon.small.recurring.granite {
            background-image: url(../img/icons/16/16-recurring-granite.svg);
        }

        .icon.small.inline-error {
            background-image: url(../img/icons/16/16-inline-error.svg);
        }
        /*******************************************************************/
        /****************************MEDIUM ICON STYLES*********************/
        /*******************************************************************/
        .icon.medium.airplane.blue {
            background-image: url(../img/icons/24/24-airplane-blue.svg);
        }

        .icon.medium.airplane.ultramarine {
            background-image: url(../img/icons/24/24-airplane-ultramarine.svg);
        }

        .icon.medium.airplane.white {
            background-image: url(../img/icons/24/24-airplane-white.svg);
        }

        .icon.medium.airplane.granite {
            background-image: url(../img/icons/24/24-airplane-granite.svg);
        }

        .icon.medium.alert.blue {
            background-image: url(../img/icons/24/24-alert-blue.svg);
        }

        .icon.medium.alert.ultramarine {
            background-image: url(../img/icons/24/24-alert-ultramarine.svg);
        }

        .icon.medium.alert.white {
            background-image: url(../img/icons/24/24-alert-white.svg);
        }

        .icon.medium.alert.granite {
            background-image: url(../img/icons/24/24-alert-granite.svg);
        }

        .icon.medium.arrow-left.blue {
            background-image: url(../img/icons/24/24-arrow-left-blue.svg);
        }

        .icon.medium.arrow-left.ultramarine {
            background-image: url(../img/icons/24/24-arrow-left-ultramarine.svg);
        }

        .icon.medium.arrow-left.white {
            background-image: url(../img/icons/24/24-arrow-left-white.svg);
        }

        .icon.medium.arrow-left.granite {
            background-image: url(../img/icons/24/24-arrow-left-granite.svg);
        }

        .icon.medium.arrow-right.blue {
            background-image: url(../img/icons/24/24-arrow-right-blue.svg);
        }

        .icon.medium.arrow-right.ultramarine {
            background-image: url(../img/icons/24/24-arrow-right-ultramarine.svg);
        }

        .icon.medium.arrow-right.white {
            background-image: url(../img/icons/24/24-arrow-right-white.svg);
        }

        .icon.medium.arrow-right.granite {
            background-image: url(../img/icons/24/24-arrow-right-granite.svg);
        }

        .icon.medium.arrow-up.blue {
            background-image: url(../img/icons/24/24-arrow-up-blue.svg);
        }

        .icon.medium.arrow-up.ultramarine {
            background-image: url(../img/icons/24/24-arrow-up-ultramarine.svg);
        }

        .icon.medium.arrow-up.white {
            background-image: url(../img/icons/24/24-arrow-up-white.svg);
        }

        .icon.medium.arrow-up.granite {
            background-image: url(../img/icons/24/24-arrow-up-granite.svg);
        }

        .icon.medium.arrow-up.positive {
            background-image: url(../img/icons/24/24-arrow-up-positive.svg);
        }

        .icon.medium.arrow-down.blue {
            background-image: url(../img/icons/24/24-arrow-down-blue.svg);
        }

        .icon.medium.arrow-down.ultramarine {
            background-image: url(../img/icons/24/24-arrow-down-ultramarine.svg);
        }

        .icon.medium.arrow-down.white {
            background-image: url(../img/icons/24/24-arrow-down-white.svg);
        }

        .icon.medium.arrow-down.granite {
            background-image: url(../img/icons/24/24-arrow-down-granite.svg);
        }

        .icon.medium.arrow-down.negative {
            background-image: url(../img/icons/24/24-arrow-down-negative.svg);
        }

        .icon.medium.bar-graph.blue {
            background-image: url(../img/icons/24/24-bar-graph-blue.svg);
        }

        .icon.medium.bar-graph.ultramarine {
            background-image: url(../img/icons/24/24-bar-graph-ultramarine.svg);
        }

        .icon.medium.bar-graph.white {
            background-image: url(../img/icons/24/24-bar-graph-white.svg);
        }

        .icon.medium.bar-graph.granite {
            background-image: url(../img/icons/24/24-bar-graph-granite.svg);
        }

        .icon.medium.bill.blue {
            background-image: url(../img/icons/24/24-bill-blue.svg);
        }

        .icon.medium.bill.ultramarine {
            background-image: url(../img/icons/24/24-bill-ultramarine.svg);
        }

        .icon.medium.bill.white {
            background-image: url(../img/icons/24/24-bill-white.svg);
        }

        .icon.medium.bill.granite {
            background-image: url(../img/icons/24/24-bill-granite.svg);
        }

        .icon.medium.book.blue {
            background-image: url(../img/icons/24/24-book-blue.svg);
        }

        .icon.medium.book.ultramarine {
            background-image: url(../img/icons/24/24-book-ultramarine.svg);
        }

        .icon.medium.book.white {
            background-image: url(../img/icons/24/24-book-white.svg);
        }

        .icon.medium.book.granite {
            background-image: url(../img/icons/24/24-book-granite.svg);
        }

        .icon.medium.business.blue {
            background-image: url(../img/icons/24/24-business-blue.svg);
        }

        .icon.medium.business.ultramarine {
            background-image: url(../img/icons/24/24-business-ultramarine.svg);
        }

        .icon.medium.business.white {
            background-image: url(../img/icons/24/24-business-white.svg);
        }

        .icon.medium.business.granite {
            background-image: url(../img/icons/24/24-business-granite.svg);
        }

        .icon.medium.calculator.blue {
            background-image: url(../img/icons/24/24-calculator-blue.svg);
        }

        .icon.medium.calculator.ultramarine {
            background-image: url(../img/icons/24/24-calculator-ultramarine.svg);
        }

        .icon.medium.calculator.white {
            background-image: url(../img/icons/24/24-calculator-white.svg);
        }

        .icon.medium.calculator.granite {
            background-image: url(../img/icons/24/24-calculator-granite.svg);
        }

        .icon.medium.calendar.blue {
            background-image: url(../img/icons/24/24-calendar-blue.svg);
        }

        .icon.medium.calendar.ultramarine {
            background-image: url(../img/icons/24/24-calendar-ultramarine.svg);
        }

        .icon.medium.calendar.white {
            background-image: url(../img/icons/24/24-calendar-white.svg);
        }

        .icon.medium.calendar.granite {
            background-image: url(../img/icons/24/24-calendar-granite.svg);
        }

        .icon.medium.camera.blue {
            background-image: url(../img/icons/24/24-camera-blue.svg);
        }

        .icon.medium.camera.ultramarine {
            background-image: url(../img/icons/24/24-camera-ultramarine.svg);
        }

        .icon.medium.camera.white {
            background-image: url(../img/icons/24/24-camera-white.svg);
        }

        .icon.medium.camera.granite {
            background-image: url(../img/icons/24/24-camera-granite.svg);
        }

        .icon.medium.card.blue {
            background-image: url(../img/icons/24/24-card-blue.svg);
        }

        .icon.medium.card.ultramarine {
            background-image: url(../img/icons/24/24-card-ultramarine.svg);
        }

        .icon.medium.card.white {
            background-image: url(../img/icons/24/24-card-white.svg);
        }

        .icon.medium.card.granite {
            background-image: url(../img/icons/24/24-card-granite.svg);
        }

        .icon.medium.car.blue {
            background-image: url(../img/icons/24/24-car-blue.svg);
        }

        .icon.medium.car.ultramarine {
            background-image: url(../img/icons/24/24-car-ultramarine.svg);
        }

        .icon.medium.car.white {
            background-image: url(../img/icons/24/24-car-white.svg);
        }

        .icon.medium.car.granite {
            background-image: url(../img/icons/24/24-car-granite.svg);
        }

        .icon.medium.celebration.blue {
            background-image: url(../img/icons/24/24-celebration-blue.svg);
        }

        .icon.medium.celebration.ultramarine {
            background-image: url(../img/icons/24/24-celebration-ultramarine.svg);
        }

        .icon.medium.celebration.white {
            background-image: url(../img/icons/24/24-celebration-white.svg);
        }

        .icon.medium.celebration.granite {
            background-image: url(../img/icons/24/24-celebration-granite.svg);
        }

        .icon.medium.checkmark.blue {
            background-image: url(../img/icons/24/24-checkmark-blue.svg);
        }

        .icon.medium.checkmark.ultramarine {
            background-image: url(../img/icons/24/24-checkmark-ultramarine.svg);
        }

        .icon.medium.checkmark.white {
            background-image: url(../img/icons/24/24-checkmark-white.svg);
        }

        .icon.medium.checkmark.granite {
            background-image: url(../img/icons/24/24-checkmark-granite.svg);
        }

        .icon.medium.chevron-down.blue {
            background-image: url(../img/icons/24/24-chevron-down-blue.svg);
        }

        .icon.medium.chevron-down.ultramarine {
            background-image: url(../img/icons/24/24-chevron-down-ultramarine.svg);
        }

        .icon.medium.chevron-down.white {
            background-image: url(../img/icons/24/24-chevron-down-white.svg);
        }

        .icon.medium.chevron-down.granite {
            background-image: url(../img/icons/24/24-chevron-down-granite.svg);
        }

        .icon.medium.chevron-up.blue {
            background-image: url(../img/icons/24/24-chevron-up-blue.svg);
        }

        .icon.medium.chevron-up.ultramarine {
            background-image: url(../img/icons/24/24-chevron-up-ultramarine.svg);
        }

        .icon.medium.chevron-up.white {
            background-image: url(../img/icons/24/24-chevron-up-white.svg);
        }

        .icon.medium.chevron-up.granite {
            background-image: url(../img/icons/24/24-chevron-up-granite.svg);
        }

        .icon.medium.chevron-right.blue {
            background-image: url(../img/icons/24/24-chevron-right-blue.svg);
        }

        .icon.medium.chevron-right.ultramarine {
            background-image: url(../img/icons/24/24-chevron-right-ultramarine.svg);
        }

        .icon.medium.chevron-right.white {
            background-image: url(../img/icons/24/24-chevron-right-white.svg);
        }

        .icon.medium.chevron-right.granite {
            background-image: url(../img/icons/24/24-chevron-right-granite.svg);
        }

        .icon.medium.chevron-left.blue {
            background-image: url(../img/icons/24/24-chevron-left-blue.svg);
        }

        .icon.medium.chevron-left.ultramarine {
            background-image: url(../img/icons/24/24-chevron-left-ultramarine.svg);
        }

        .icon.medium.chevron-left.white {
            background-image: url(../img/icons/24/24-chevron-left-white.svg);
        }

        .icon.medium.chevron-left.granite {
            background-image: url(../img/icons/24/24-chevron-left-granite.svg);
        }

        .icon.medium.close.blue {
            background-image: url(../img/icons/24/24-close-blue.svg);
        }

        .icon.medium.close.ultramarine {
            background-image: url(../img/icons/24/24-close-ultramarine.svg);
        }

        .icon.medium.close.white {
            background-image: url(../img/icons/24/24-close-white.svg);
        }

        .icon.medium.close.granite {
            background-image: url(../img/icons/24/24-close-granite.svg);
        }

        .icon.medium.collapse.blue {
            background-image: url(../img/icons/24/24-collapse-blue.svg);
        }

        .icon.medium.collapse.ultramarine {
            background-image: url(../img/icons/24/24-collapse-ultramarine.svg);
        }

        .icon.medium.collapse.white {
            background-image: url(../img/icons/24/24-collapse-white.svg);
        }

        .icon.medium.collapse.granite {
            background-image: url(../img/icons/24/24-collapse-granite.svg);
        }

        .icon.medium.contact.blue {
            background-image: url(../img/icons/24/24-contact-blue.svg);
        }

        .icon.medium.contact.ultramarine {
            background-image: url(../img/icons/24/24-contact-ultramarine.svg);
        }

        .icon.medium.contact.white {
            background-image: url(../img/icons/24/24-contact-white.svg);
        }

        .icon.medium.contact.granite {
            background-image: url(../img/icons/24/24-contact-granite.svg);
        }

        .icon.medium.controls.blue {
            background-image: url(../img/icons/24/24-controls-blue.svg);
        }

        .icon.medium.controls.ultramarine {
            background-image: url(../img/icons/24/24-controls-ultramarine.svg);
        }

        .icon.medium.controls.white {
            background-image: url(../img/icons/24/24-controls-white.svg);
        }

        .icon.medium.controls.granite {
            background-image: url(../img/icons/24/24-controls-granite.svg);
        }

        .icon.medium.copy.blue {
            background-image: url(../img/icons/24/24-copy-blue.svg);
        }

        .icon.medium.copy.ultramarine {
            background-image: url(../img/icons/24/24-copy-ultramarine.svg);
        }

        .icon.medium.copy.white {
            background-image: url(../img/icons/24/24-copy-white.svg);
        }

        .icon.medium.copy.granite {
            background-image: url(../img/icons/24/24-copy-granite.svg);
        }

        .icon.medium.document.blue {
            background-image: url(../img/icons/24/24-document-blue.svg);
        }

        .icon.medium.document.ultramarine {
            background-image: url(../img/icons/24/24-document-ultramarine.svg);
        }

        .icon.medium.document.white {
            background-image: url(../img/icons/24/24-document-white.svg);
        }

        .icon.medium.document.granite {
            background-image: url(../img/icons/24/24-document-granite.svg);
        }

        .icon.medium.document-download.blue {
            background-image: url(../img/icons/24/24-document-download-blue.svg);
        }

        .icon.medium.document-download.ultramarine {
            background-image: url(../img/icons/24/24-document-download-ultramarine.svg);
        }

        .icon.medium.document-download.white {
            background-image: url(../img/icons/24/24-document-download-white.svg);
        }

        .icon.medium.document-download.granite {
            background-image: url(../img/icons/24/24-document-download-granite.svg);
        }

        .icon.medium.download.blue {
            background-image: url(../img/icons/24/24-download-blue.svg);
        }

        .icon.medium.download.ultramarine {
            background-image: url(../img/icons/24/24-download-ultramarine.svg);
        }

        .icon.medium.download.white {
            background-image: url(../img/icons/24/24-download-white.svg);
        }

        .icon.medium.download.granite {
            background-image: url(../img/icons/24/24-download-granite.svg);
        }

        .icon.medium.edit.blue {
            background-image: url(../img/icons/24/24-edit-blue.svg);
        }

        .icon.medium.edit.ultramarine {
            background-image: url(../img/icons/24/24-edit-ultramarine.svg);
        }

        .icon.medium.edit.white {
            background-image: url(../img/icons/24/24-edit-white.svg);
        }

        .icon.medium.edit.granite {
            background-image: url(../img/icons/24/24-edit-granite.svg);
        }

        .icon.medium.education.blue {
            background-image: url(../img/icons/24/24-education-blue.svg);
        }

        .icon.medium.education.ultramarine {
            background-image: url(../img/icons/24/24-education-ultramarine.svg);
        }

        .icon.medium.education.white {
            background-image: url(../img/icons/24/24-education-white.svg);
        }

        .icon.medium.education.granite {
            background-image: url(../img/icons/24/24-education-granite.svg);
        }

        .icon.medium.enclosed-add.blue {
            background-image: url(../img/icons/24/24-enclosed-add-blue.svg);
        }

        .icon.medium.enclosed-add.ultramarine {
            background-image: url(../img/icons/24/24-enclosed-add-ultramarine.svg);
        }

        .icon.medium.enclosed-add.white {
            background-image: url(../img/icons/24/24-enclosed-add-white.svg);
        }

        .icon.medium.enclosed-add.granite {
            background-image: url(../img/icons/24/24-enclosed-add-granite.svg);
        }

        .icon.medium.enclosed-check.blue {
            background-image: url(../img/icons/24/24-enclosed-check-blue.svg);
        }

        .icon.medium.enclosed-check.ultramarine {
            background-image: url(../img/icons/24/24-enclosed-check-ultramarine.svg);
        }

        .icon.medium.enclosed-check.white {
            background-image: url(../img/icons/24/24-enclosed-check-white.svg);
        }

        .icon.medium.enclosed-check.granite {
            background-image: url(../img/icons/24/24-enclosed-check-granite.svg);
        }

        .icon.medium.enclosed-close.blue {
            background-image: url(../img/icons/24/24-enclosed-close-blue.svg);
        }

        .icon.medium.enclosed-close.ultramarine {
            background-image: url(../img/icons/24/24-enclosed-close-ultramarine.svg);
        }

        .icon.medium.enclosed-close.white {
            background-image: url(../img/icons/24/24-enclosed-close-white.svg);
        }

        .icon.medium.enclosed-close.granite {
            background-image: url(../img/icons/24/24-enclosed-close-granite.svg);
        }

        .icon.medium.enclosed-help.blue {
            background-image: url(../img/icons/24/24-enclosed-help-blue.svg);
        }

        .icon.medium.enclosed-help.ultramarine {
            background-image: url(../img/icons/24/24-enclosed-help-ultramarine.svg);
        }

        .icon.medium.enclosed-help.white {
            background-image: url(../img/icons/24/24-enclosed-help-white.svg);
        }

        .icon.medium.enclosed-help.granite {
            background-image: url(../img/icons/24/24-enclosed-help-granite.svg);
        }

        .icon.medium.enclosed-minus.blue {
            background-image: url(../img/icons/24/24-enclosed-minus-blue.svg);
        }

        .icon.medium.enclosed-minus.ultramarine {
            background-image: url(../img/icons/24/24-enclosed-minus-ultramarine.svg);
        }

        .icon.medium.enclosed-minus.white {
            background-image: url(../img/icons/24/24-enclosed-minus-white.svg);
        }

        .icon.medium.enclosed-minus.granite {
            background-image: url(../img/icons/24/24-enclosed-minus-granite.svg);
        }

        .icon.medium.enclosed-more.blue {
            background-image: url(../img/icons/24/24-enclosed-more-blue.svg);
        }

        .icon.medium.enclosed-more.ultramarine {
            background-image: url(../img/icons/24/24-enclosed-more-ultramarine.svg);
        }

        .icon.medium.enclosed-more.white {
            background-image: url(../img/icons/24/24-enclosed-more-white.svg);
        }

        .icon.medium.enclosed-more.granite {
            background-image: url(../img/icons/24/24-enclosed-more-granite.svg);
        }

        .icon.medium.external-link.blue {
            background-image: url(../img/icons/24/24-external-link-blue.svg);
        }

        .icon.medium.external-link.ultramarine {
            background-image: url(../img/icons/24/24-external-link-ultramarine.svg);
        }

        .icon.medium.external-link.white {
            background-image: url(../img/icons/24/24-external-link-white.svg);
        }

        .icon.medium.external-link.granite {
            background-image: url(../img/icons/24/24-external-link-granite.svg);
        }

        .icon.medium.exit.blue {
            background-image: url(../img/icons/24/24-exit-blue.svg);
        }

        .icon.medium.exit.ultramarine {
            background-image: url(../img/icons/24/24-exit-ultramarine.svg);
        }

        .icon.medium.exit.white {
            background-image: url(../img/icons/24/24-exit-white.svg);
        }

        .icon.medium.exit.granite {
            background-image: url(../img/icons/24/24-exit-granite.svg);
        }

        .icon.medium.expand.blue {
            background-image: url(../img/icons/24/24-expand-blue.svg);
        }

        .icon.medium.expand.ultramarine {
            background-image: url(../img/icons/24/24-expand-ultramarine.svg);
        }

        .icon.medium.expand.white {
            background-image: url(../img/icons/24/24-expand-white.svg);
        }

        .icon.medium.expand.granite {
            background-image: url(../img/icons/24/24-expand-granite.svg);
        }

        .icon.medium.globe.blue {
            background-image: url(../img/icons/24/24-globe-blue.svg);
        }

        .icon.medium.globe.ultramarine {
            background-image: url(../img/icons/24/24-globe-ultramarine.svg);
        }

        .icon.medium.globe.white {
            background-image: url(../img/icons/24/24-globe-white.svg);
        }

        .icon.medium.globe.granite {
            background-image: url(../img/icons/24/24-globe-granite.svg);
        }

        .icon.medium.home.blue {
            background-image: url(../img/icons/24/24-home-blue.svg);
        }

        .icon.medium.home.ultramarine {
            background-image: url(../img/icons/24/24-home-ultramarine.svg);
        }

        .icon.medium.home.white {
            background-image: url(../img/icons/24/24-home-white.svg);
        }

        .icon.medium.home.granite {
            background-image: url(../img/icons/24/24-home-granite.svg);
        }

        .icon.medium.information.blue {
            background-image: url(../img/icons/24/24-information-blue.svg);
        }

        .icon.medium.information.ultramarine {
            background-image: url(../img/icons/24/24-information-ultramarine.svg);
        }

        .icon.medium.information.white {
            background-image: url(../img/icons/24/24-information-white.svg);
        }

        .icon.medium.information.granite {
            background-image: url(../img/icons/24/24-information-granite.svg);
        }

        .icon.medium.insurance.blue {
            background-image: url(../img/icons/24/24-insurance-blue.svg);
        }

        .icon.medium.insurance.ultramarine {
            background-image: url(../img/icons/24/24-insurance-ultramarine.svg);
        }

        .icon.medium.insurance.white {
            background-image: url(../img/icons/24/24-insurance-white.svg);
        }

        .icon.medium.insurance.granite {
            background-image: url(../img/icons/24/24-insurance-granite.svg);
        }

        .icon.medium.lightbulb.blue {
            background-image: url(../img/icons/24/24-lightbulb-blue.svg);
        }

        .icon.medium.lightbulb.ultramarine {
            background-image: url(../img/icons/24/24-lightbulb-ultramarine.svg);
        }

        .icon.medium.lightbulb.white {
            background-image: url(../img/icons/24/24-lightbulb-white.svg);
        }

        .icon.medium.lightbulb.granite {
            background-image: url(../img/icons/24/24-lightbulb-granite.svg);
        }

        .icon.medium.loading.blue {
            background-image: url(../img/icons/24/24-loading-blue.svg);
        }

        .icon.medium.loading.ultramarine {
            background-image: url(../img/icons/24/24-loading-ultramarine.svg);
        }

        .icon.medium.loading.white {
            background-image: url(../img/icons/24/24-loading-white.svg);
        }

        .icon.medium.loading.granite {
            background-image: url(../img/icons/24/24-loading-granite.svg);
        }

        .icon.medium.location.blue {
            background-image: url(../img/icons/24/24-location-blue.svg);
        }

        .icon.medium.location.ultramarine {
            background-image: url(../img/icons/24/24-location-ultramarine.svg);
        }

        .icon.medium.location.white {
            background-image: url(../img/icons/24/24-location-white.svg);
        }

        .icon.medium.location.granite {
            background-image: url(../img/icons/24/24-location-granite.svg);
        }

        .icon.medium.lock.blue {
            background-image: url(../img/icons/24/24-lock-blue.svg);
        }

        .icon.medium.lock.ultramarine {
            background-image: url(../img/icons/24/24-lock-ultramarine.svg);
        }

        .icon.medium.lock.white {
            background-image: url(../img/icons/24/24-lock-white.svg);
        }

        .icon.medium.lock.granite {
            background-image: url(../img/icons/24/24-lock-granite.svg);
        }

        .icon.medium.mail.blue {
            background-image: url(../img/icons/24/24-mail-blue.svg);
        }

        .icon.medium.mail.ultramarine {
            background-image: url(../img/icons/24/24-mail-ultramarine.svg);
        }

        .icon.medium.mail.white {
            background-image: url(../img/icons/24/24-mail-white.svg);
        }

        .icon.medium.mail.granite {
            background-image: url(../img/icons/24/24-mail-granite.svg);
        }

        .icon.medium.maintenance.blue {
            background-image: url(../img/icons/24/24-maintenance-blue.svg);
        }

        .icon.medium.maintenance.ultramarine {
            background-image: url(../img/icons/24/24-maintenance-ultramarine.svg);
        }

        .icon.medium.maintenance.white {
            background-image: url(../img/icons/24/24-maintenance-white.svg);
        }

        .icon.medium.maintenance.granite {
            background-image: url(../img/icons/24/24-maintenance-granite.svg);
        }

        .icon.medium.medical.blue {
            background-image: url(../img/icons/24/24-medical-blue.svg);
        }

        .icon.medium.medical.ultramarine {
            background-image: url(../img/icons/24/24-medical-ultramarine.svg);
        }

        .icon.medium.medical.white {
            background-image: url(../img/icons/24/24-medical-white.svg);
        }

        .icon.medium.medical.granite {
            background-image: url(../img/icons/24/24-medical-granite.svg);
        }

        .icon.medium.mail.blue {
            background-image: url(../img/icons/24/24-mail-blue.svg);
        }

        .icon.medium.mail.ultramarine {
            background-image: url(../img/icons/24/24-mail-ultramarine.svg);
        }

        .icon.medium.mail.white {
            background-image: url(../img/icons/24/24-mail-white.svg);
        }

        .icon.medium.mail.granite {
            background-image: url(../img/icons/24/24-mail-granite.svg);
        }

        .icon.medium.microphone.blue {
            background-image: url(../img/icons/24/24-microphone-blue.svg);
        }

        .icon.medium.microphone.ultramarine {
            background-image: url(../img/icons/24/24-microphone-ultramarine.svg);
        }

        .icon.medium.microphone.white {
            background-image: url(../img/icons/24/24-microphone-white.svg);
        }

        .icon.medium.microphone.granite {
            background-image: url(../img/icons/24/24-microphone-granite.svg);
        }

        .icon.medium.mobile-phone.blue {
            background-image: url(../img/icons/24/24-mobile-phone-blue.svg);
        }

        .icon.medium.mobile-phone.ultramarine {
            background-image: url(../img/icons/24/24-mobile-phone-ultramarine.svg);
        }

        .icon.medium.mobile-phone.white {
            background-image: url(../img/icons/24/24-mobile-phone-white.svg);
        }

        .icon.medium.mobile-phone.granite {
            background-image: url(../img/icons/24/24-mobile-phone-granite.svg);
        }

        .icon.medium.money-bag.blue {
            background-image: url(../img/icons/24/24-money-bag-blue.svg);
        }

        .icon.medium.money-bag.ultramarine {
            background-image: url(../img/icons/24/24-money-bag-ultramarine.svg);
        }

        .icon.medium.money-bag.white {
            background-image: url(../img/icons/24/24-money-bag-white.svg);
        }

        .icon.medium.money-bag.granite {
            background-image: url(../img/icons/24/24-money-bag-granite.svg);
        }

        .icon.medium.money.blue {
            background-image: url(../img/icons/24/24-money-blue.svg);
        }

        .icon.medium.money.ultramarine {
            background-image: url(../img/icons/24/24-money-ultramarine.svg);
        }

        .icon.medium.money.white {
            background-image: url(../img/icons/24/24-money-white.svg);
        }

        .icon.medium.money.granite {
            background-image: url(../img/icons/24/24-money-granite.svg);
        }

        .icon.medium.more-horizontal.blue {
            background-image: url(../img/icons/24/24-more-horizontal-blue.svg);
        }

        .icon.medium.more-horizontal.ultramarine {
            background-image: url(../img/icons/24/24-more-horizontal-ultramarine.svg);
        }

        .icon.medium.more-horizontal.white {
            background-image: url(../img/icons/24/24-more-horizontal-white.svg);
        }

        .icon.medium.more-horizontal.granite {
            background-image: url(../img/icons/24/24-more-horizontal-granite.svg);
        }

        .icon.medium.more-vertical.blue {
            background-image: url(../img/icons/24/24-more-vertical-blue.svg);
        }

        .icon.medium.more-vertical.ultramarine {
            background-image: url(../img/icons/24/24-more-vertical-ultramarine.svg);
        }

        .icon.medium.more-vertical.white {
            background-image: url(../img/icons/24/24-more-vertical-white.svg);
        }

        .icon.medium.more-vertical.granite {
            background-image: url(../img/icons/24/24-more-vertical-granite.svg);
        }

        .icon.medium.part-time.blue {
            background-image: url(../img/icons/24/24-part-time-blue.svg);
        }

        .icon.medium.part-time.ultramarine {
            background-image: url(../img/icons/24/24-part-time-ultramarine.svg);
        }

        .icon.medium.part-time.white {
            background-image: url(../img/icons/24/24-part-time-white.svg);
        }

        .icon.medium.part-time.granite {
            background-image: url(../img/icons/24/24-part-time-granite.svg);
        }

        .icon.medium.percentage.blue {
            background-image: url(../img/icons/24/24-percentage-blue.svg);
        }

        .icon.medium.percentage.ultramarine {
            background-image: url(../img/icons/24/24-percentage-ultramarine.svg);
        }

        .icon.medium.percentage.white {
            background-image: url(../img/icons/24/24-percentage-white.svg);
        }

        .icon.medium.percentage.granite {
            background-image: url(../img/icons/24/24-percentage-granite.svg);
        }

        .icon.medium.phone.blue {
            background-image: url(../img/icons/24/24-phone-blue.svg);
        }

        .icon.medium.phone.ultramarine {
            background-image: url(../img/icons/24/24-phone-ultramarine.svg);
        }

        .icon.medium.phone.white {
            background-image: url(../img/icons/24/24-phone-white.svg);
        }

        .icon.medium.phone.granite {
            background-image: url(../img/icons/24/24-phone-granite.svg);
        }

        .icon.medium.pie-chart.blue {
            background-image: url(../img/icons/24/24-pie-chart-blue.svg);
        }

        .icon.medium.pie-chart.ultramarine {
            background-image: url(../img/icons/24/24-pie-chart-ultramarine.svg);
        }

        .icon.medium.pie-chart.white {
            background-image: url(../img/icons/24/24-pie-chart-white.svg);
        }

        .icon.medium.pie-chart.granite {
            background-image: url(../img/icons/24/24-pie-chart-granite.svg);
        }

        .icon.medium.profile.blue {
            background-image: url(../img/icons/24/24-profile-blue.svg);
        }

        .icon.medium.profile.ultramarine {
            background-image: url(../img/icons/24/24-profile-ultramarine.svg);
        }

        .icon.medium.profile.white {
            background-image: url(../img/icons/24/24-profile-white.svg);
        }

        .icon.medium.profile.granite {
            background-image: url(../img/icons/24/24-profile-granite.svg);
        }

        .icon.medium.reload.blue {
            background-image: url(../img/icons/24/24-reload-blue.svg);
        }

        .icon.medium.reload.ultramarine {
            background-image: url(../img/icons/24/24-reload-ultramarine.svg);
        }

        .icon.medium.reload.white {
            background-image: url(../img/icons/24/24-reload-white.svg);
        }

        .icon.medium.reload.granite {
            background-image: url(../img/icons/24/24-reload-granite.svg);
        }

        .icon.medium.rewards.blue {
            background-image: url(../img/icons/24/24-rewards-blue.svg);
        }

        .icon.medium.rewards.ultramarine {
            background-image: url(../img/icons/24/24-rewards-ultramarine.svg);
        }

        .icon.medium.rewards.white {
            background-image: url(../img/icons/24/24-rewards-white.svg);
        }

        .icon.medium.rewards.granite {
            background-image: url(../img/icons/24/24-rewards-granite.svg);
        }

        .icon.medium.search.blue {
            background-image: url(../img/icons/24/24-search-blue.svg);
        }

        .icon.medium.search.ultramarine {
            background-image: url(../img/icons/24/24-search-ultramarine.svg);
        }

        .icon.medium.search.white {
            background-image: url(../img/icons/24/24-search-white.svg);
        }

        .icon.medium.search.granite {
            background-image: url(../img/icons/24/24-search-granite.svg);
        }

        .icon.medium.send-plane.blue {
            background-image: url(../img/icons/24/24-send-plane-blue.svg);
        }

        .icon.medium.send-plane.ultramarine {
            background-image: url(../img/icons/24/24-send-plane-ultramarine.svg);
        }

        .icon.medium.send-plane.white {
            background-image: url(../img/icons/24/24-send-plane-white.svg);
        }

        .icon.medium.send-plane.granite {
            background-image: url(../img/icons/24/24-send-plane-granite.svg);
        }

        .icon.medium.settings.blue {
            background-image: url(../img/icons/24/24-settings-blue.svg);
        }

        .icon.medium.settings.ultramarine {
            background-image: url(../img/icons/24/24-settings-ultramarine.svg);
        }

        .icon.medium.settings.white {
            background-image: url(../img/icons/24/24-settings-white.svg);
        }

        .icon.medium.settings.granite {
            background-image: url(../img/icons/24/24-settings-granite.svg);
        }

        .icon.medium.social-messenger.blue {
            background-image: url(../img/icons/24/24-social-messenger-blue.svg);
        }

        .icon.medium.social-messenger.ultramarine {
            background-image: url(../img/icons/24/24-social-messenger-ultramarine.svg);
        }

        .icon.medium.social-messenger.white {
            background-image: url(../img/icons/24/24-social-messenger-white.svg);
        }

        .icon.medium.social-messenger.granite {
            background-image: url(../img/icons/24/24-social-messenger-granite.svg);
        }

        .icon.medium.social-twitter.blue {
            background-image: url(../img/icons/24/24-social-twitter-blue.svg);
        }

        .icon.medium.social-twitter.ultramarine {
            background-image: url(../img/icons/24/24-social-twitter-ultramarine.svg);
        }

        .icon.medium.social-twitter.white {
            background-image: url(../img/icons/24/24-social-twitter-white.svg);
        }

        .icon.medium.social-twitter.granite {
            background-image: url(../img/icons/24/24-social-twitter-granite.svg);
        }

        .icon.medium.spouse.blue {
            background-image: url(../img/icons/24/24-spouse-blue.svg);
        }

        .icon.medium.spouse.ultramarine {
            background-image: url(../img/icons/24/24-spouse-ultramarine.svg);
        }

        .icon.medium.spouse.white {
            background-image: url(../img/icons/24/24-spouse-white.svg);
        }

        .icon.medium.spouse.granite {
            background-image: url(../img/icons/24/24-spouse-granite.svg);
        }

        .icon.medium.start-date.blue {
            background-image: url(../img/icons/24/24-start-date-blue.svg);
        }

        .icon.medium.start-date.ultramarine {
            background-image: url(../img/icons/24/24-start-date-ultramarine.svg);
        }

        .icon.medium.start-date.white {
            background-image: url(../img/icons/24/24-start-date-white.svg);
        }

        .icon.medium.start-date.granite {
            background-image: url(../img/icons/24/24-start-date-granite.svg);
        }

        .icon.medium.suitcase.blue {
            background-image: url(../img/icons/24/24-suitcase-blue.svg);
        }

        .icon.medium.suitcase.ultramarine {
            background-image: url(../img/icons/24/24-suitcase-ultramarine.svg);
        }

        .icon.medium.suitcase.white {
            background-image: url(../img/icons/24/24-suitcase-white.svg);
        }

        .icon.medium.suitcase.granite {
            background-image: url(../img/icons/24/24-suitcase-granite.svg);
        }

        .icon.medium.time.blue {
            background-image: url(../img/icons/24/24-time-blue.svg);
        }

        .icon.medium.time.ultramarine {
            background-image: url(../img/icons/24/24-time-ultramarine.svg);
        }

        .icon.medium.time.white {
            background-image: url(../img/icons/24/24-time-white.svg);
        }

        .icon.medium.time.granite {
            background-image: url(../img/icons/24/24-time-granite.svg);
        }

        .icon.medium.transfer-arrow.blue {
            background-image: url(../img/icons/24/24-transfer-arrow-blue.svg);
        }

        .icon.medium.transfer-arrow.ultramarine {
            background-image: url(../img/icons/24/24-transfer-arrow-ultramarine.svg);
        }

        .icon.medium.transfer-arrow.white {
            background-image: url(../img/icons/24/24-transfer-arrow-white.svg);
        }

        .icon.medium.transfer-arrow.granite {
            background-image: url(../img/icons/24/24-transfer-arrow-granite.svg);
        }

        .icon.medium.trash.blue {
            background-image: url(../img/icons/24/24-trash-blue.svg);
        }

        .icon.medium.trash.ultramarine {
            background-image: url(../img/icons/24/24-trash-ultramarine.svg);
        }

        .icon.medium.trash.white {
            background-image: url(../img/icons/24/24-trash-white.svg);
        }

        .icon.medium.trash.granite {
            background-image: url(../img/icons/24/24-trash-granite.svg);
        }

        .icon.medium.unlock.blue {
            background-image: url(../img/icons/24/24-unlock-blue.svg);
        }

        .icon.medium.unlock.ultramarine {
            background-image: url(../img/icons/24/24-unlock-ultramarine.svg);
        }

        .icon.medium.unlock.white {
            background-image: url(../img/icons/24/24-unlock-white.svg);
        }

        .icon.medium.unlock.granite {
            background-image: url(../img/icons/24/24-unlock-granite.svg);
        }

        .icon.medium.upload.blue {
            background-image: url(../img/icons/24/24-upload-blue.svg);
        }

        .icon.medium.upload.ultramarine {
            background-image: url(../img/icons/24/24-upload-ultramarine.svg);
        }

        .icon.medium.upload.white {
            background-image: url(../img/icons/24/24-upload-white.svg);
        }

        .icon.medium.upload.granite {
            background-image: url(../img/icons/24/24-upload-granite.svg);
        }

        .icon.medium.wallet.blue {
            background-image: url(../img/icons/24/24-wallet-blue.svg);
        }

        .icon.medium.wallet.ultramarine {
            background-image: url(../img/icons/24/24-wallet-ultramarine.svg);
        }

        .icon.medium.wallet.white {
            background-image: url(../img/icons/24/24-wallet-white.svg);
        }

        .icon.medium.wallet.granite {
            background-image: url(../img/icons/24/24-wallet-granite.svg);
        }

        .icon.medium.announcement-blue {
            background-image: url(../img/icons/24/24-announcement-blue.svg);
        }

        .icon.medium.error-red {
            background-image: url(../img/icons/24/24-error-red.svg);
        }

        .icon.medium.success-green {
            background-image: url(../img/icons/24/24-success-green.svg);
        }

        .icon.medium.warning-yellow {
            background-image: url(../img/icons/24/24-warning-yellow.svg);
        }
        /*******************************************************************/
        /***************************LARGE ICONS*****************************/
        /*******************************************************************/
        .icon.large.accelerate.blue {
            background-image: url(../img/icons/48/48-accelerate-blue.svg);
        }

        .icon.large.accelerate.ultramarine {
            background-image: url(../img/icons/48/48-accelerate-ultramarine.svg);
        }

        .icon.large.accelerate.white {
            background-image: url(../img/icons/48/48-accelerate-white.svg);
        }

        .icon.large.accelerate.granite {
            background-image: url(../img/icons/48/48-accelerate-granite.svg);
        }

        .icon.large.accessibility.blue {
            background-image: url(../img/icons/48/48-accessibility-blue.svg);
        }

        .icon.large.accessibility.ultramarine {
            background-image: url(../img/icons/48/48-accessibility-ultramarine.svg);
        }

        .icon.large.accessibility.white {
            background-image: url(../img/icons/48/48-accessibility-white.svg);
        }

        .icon.large.accessibility.granite {
            background-image: url(../img/icons/48/48-accessibility-granite.svg);
        }

        .icon.large.account.blue {
            background-image: url(../img/icons/48/48-account-blue.svg);
        }

        .icon.large.account.ultramarine {
            background-image: url(../img/icons/48/48-account-ultramarine.svg);
        }

        .icon.large.account.white {
            background-image: url(../img/icons/48/48-account-white.svg);
        }

        .icon.large.account.granite {
            background-image: url(../img/icons/48/48-account-granite.svg);
        }

        .icon.large.achievement.blue {
            background-image: url(../img/icons/48/48-achievement-blue.svg);
        }

        .icon.large.achievement.ultramarine {
            background-image: url(../img/icons/48/48-achievement-ultramarine.svg);
        }

        .icon.large.achievement.white {
            background-image: url(../img/icons/48/48-achievement-white.svg);
        }

        .icon.large.achievement.granite {
            background-image: url(../img/icons/48/48-achievement-granite.svg);
        }

        .icon.large.achieving-targets.blue {
            background-image: url(../img/icons/48/48-achieving-targets-blue.svg);
        }

        .icon.large.achieving-targets.ultramarine {
            background-image: url(../img/icons/48/48-achieving-targets-ultramarine.svg);
        }

        .icon.large.achieving-targets.white {
            background-image: url(../img/icons/48/48-achieving-targets-white.svg);
        }

        .icon.large.achieving-targets.granite {
            background-image: url(../img/icons/48/48-achieving-targets-granite.svg);
        }

        .icon.large.airplane.blue {
            background-image: url(../img/icons/48/48-airplane-blue.svg);
        }

        .icon.large.airplane.ultramarine {
            background-image: url(../img/icons/48/48-airplane-ultramarine.svg);
        }

        .icon.large.airplane.white {
            background-image: url(../img/icons/48/48-airplane-white.svg);
        }

        .icon.large.airplane.granite {
            background-image: url(../img/icons/48/48-airplane-granite.svg);
        }

        .icon.large.alert.blue {
            background-image: url(../img/icons/48/48-alert-blue.svg);
        }

        .icon.large.alert.ultramarine {
            background-image: url(../img/icons/48/48-alert-ultramarine.svg);
        }

        .icon.large.alert.white {
            background-image: url(../img/icons/48/48-alert-white.svg);
        }

        .icon.large.alert.granite {
            background-image: url(../img/icons/48/48-alert-granite.svg);
        }

        .icon.large.appointment.blue {
            background-image: url(../img/icons/48/48-appointment-blue.svg);
        }

        .icon.large.appointment.ultramarine {
            background-image: url(../img/icons/48/48-appointment-ultramarine.svg);
        }

        .icon.large.appointment.white {
            background-image: url(../img/icons/48/48-appointment-white.svg);
        }

        .icon.large.appointment.granite {
            background-image: url(../img/icons/48/48-appointment-granite.svg);
        }

        .icon.large.atm.blue {
            background-image: url(../img/icons/48/48-atm-blue.svg);
        }

        .icon.large.atm.ultramarine {
            background-image: url(../img/icons/48/48-atm-ultramarine.svg);
        }

        .icon.large.atm.white {
            background-image: url(../img/icons/48/48-atm-white.svg);
        }

        .icon.large.atm.granite {
            background-image: url(../img/icons/48/48-atm-granite.svg);
        }

        .icon.large.baby.blue {
            background-image: url(../img/icons/48/48-baby-blue.svg);
        }

        .icon.large.baby.ultramarine {
            background-image: url(../img/icons/48/48-baby-ultramarine.svg);
        }

        .icon.large.baby.white {
            background-image: url(../img/icons/48/48-baby-white.svg);
        }

        .icon.large.baby.granite {
            background-image: url(../img/icons/48/48-baby-granite.svg);
        }

        .icon.large.bill.blue {
            background-image: url(../img/icons/48/48-bill-blue.svg);
        }

        .icon.large.bill.ultramarine {
            background-image: url(../img/icons/48/48-bill-ultramarine.svg);
        }

        .icon.large.bill.white {
            background-image: url(../img/icons/48/48-bill-white.svg);
        }

        .icon.large.bill.granite {
            background-image: url(../img/icons/48/48-bill-granite.svg);
        }

        .icon.large.branch.blue {
            background-image: url(../img/icons/48/48-branch-blue.svg);
        }

        .icon.large.branch.ultramarine {
            background-image: url(../img/icons/48/48-branch-ultramarine.svg);
        }

        .icon.large.branch.white {
            background-image: url(../img/icons/48/48-branch-white.svg);
        }

        .icon.large.branch.granite {
            background-image: url(../img/icons/48/48-branch-granite.svg);
        }

        .icon.large.boat.blue {
            background-image: url(../img/icons/48/48-boat-blue.svg);
        }

        .icon.large.boat.ultramarine {
            background-image: url(../img/icons/48/48-boat-ultramarine.svg);
        }

        .icon.large.boat.white {
            background-image: url(../img/icons/48/48-boat-white.svg);
        }

        .icon.large.boat.granite {
            background-image: url(../img/icons/48/48-boat-granite.svg);
        }

        .icon.large.branch-achievement.blue {
            background-image: url(../img/icons/48/48-branch-achievement-blue.svg);
        }

        .icon.large.branch-achievement.ultramarine {
            background-image: url(../img/icons/48/48-branch-achievement-ultramarine.svg);
        }

        .icon.large.branch-achievement.white {
            background-image: url(../img/icons/48/48-branch-achievement-white.svg);
        }

        .icon.large.branch-achievement.granite {
            background-image: url(../img/icons/48/48-branch-achievement-granite.svg);
        }

        .icon.large.branch-operations.blue {
            background-image: url(../img/icons/48/48-branch-operations-blue.svg);
        }

        .icon.large.branch-operations.ultramarine {
            background-image: url(../img/icons/48/48-branch-operations-ultramarine.svg);
        }

        .icon.large.branch-operations.white {
            background-image: url(../img/icons/48/48-branch-operations-white.svg);
        }

        .icon.large.branch-operations.granite {
            background-image: url(../img/icons/48/48-branch-operations-granite.svg);
        }

        .icon.large.branch-target.blue {
            background-image: url(../img/icons/48/48-branch-target-blue.svg);
        }

        .icon.large.branch-target.ultramarine {
            background-image: url(../img/icons/48/48-branch-target-ultramarine.svg);
        }

        .icon.large.branch-target.white {
            background-image: url(../img/icons/48/48-branch-target-white.svg);
        }

        .icon.large.branch-target.granite {
            background-image: url(../img/icons/48/48-branch-target-granite.svg);
        }

        .icon.large.branch-target-met.blue {
            background-image: url(../img/icons/48/48-branch-target-met-blue.svg);
        }

        .icon.large.branch-target-met.ultramarine {
            background-image: url(../img/icons/48/48-branch-target-met-ultramarine.svg);
        }

        .icon.large.branch-target-met.white {
            background-image: url(../img/icons/48/48-branch-target-met-white.svg);
        }

        .icon.large.branch-target-met.granite {
            background-image: url(../img/icons/48/48-branch-target-met-granite.svg);
        }

        .icon.large.budget.blue {
            background-image: url(../img/icons/48/48-budget-blue.svg);
        }

        .icon.large.budget.ultramarine {
            background-image: url(../img/icons/48/48-budget-ultramarine.svg);
        }

        .icon.large.budget.white {
            background-image: url(../img/icons/48/48-budget-white.svg);
        }

        .icon.large.budget.granite {
            background-image: url(../img/icons/48/48-budget-granite.svg);
        }

        .icon.large.business.blue {
            background-image: url(../img/icons/48/48-business-blue.svg);
        }

        .icon.large.business.ultramarine {
            background-image: url(../img/icons/48/48-business-ultramarine.svg);
        }

        .icon.large.business.white {
            background-image: url(../img/icons/48/48-business-white.svg);
        }

        .icon.large.business.granite {
            background-image: url(../img/icons/48/48-business-granite.svg);
        }

        .icon.large.calculator.blue {
            background-image: url(../img/icons/48/48-calculator-blue.svg);
        }

        .icon.large.calculator.ultramarine {
            background-image: url(../img/icons/48/48-calculator-ultramarine.svg);
        }

        .icon.large.calculator.white {
            background-image: url(../img/icons/48/48-calculator-white.svg);
        }

        .icon.large.calculator.granite {
            background-image: url(../img/icons/48/48-calculator-granite.svg);
        }

        .icon.large.calendar.blue {
            background-image: url(../img/icons/48/48-calendar-blue.svg);
        }

        .icon.large.calendar.ultramarine {
            background-image: url(../img/icons/48/48-calendar-ultramarine.svg);
        }

        .icon.large.calendar.white {
            background-image: url(../img/icons/48/48-calendar-white.svg);
        }

        .icon.large.calendar.granite {
            background-image: url(../img/icons/48/48-calendar-granite.svg);
        }

        .icon.large.call-center.blue {
            background-image: url(../img/icons/48/48-call-center-blue.svg);
        }

        .icon.large.call-center.ultramarine {
            background-image: url(../img/icons/48/48-call-center-ultramarine.svg);
        }

        .icon.large.call-center.white {
            background-image: url(../img/icons/48/48-call-center-white.svg);
        }

        .icon.large.call-center.granite {
            background-image: url(../img/icons/48/48-call-center-granite.svg);
        }

        .icon.large.camera.blue {
            background-image: url(../img/icons/48/48-camera-blue.svg);
        }

        .icon.large.camera.ultramarine {
            background-image: url(../img/icons/48/48-camera-ultramarine.svg);
        }

        .icon.large.camera.white {
            background-image: url(../img/icons/48/48-camera-white.svg);
        }

        .icon.large.camera.granite {
            background-image: url(../img/icons/48/48-camera-granite.svg);
        }

        .icon.large.car.blue {
            background-image: url(../img/icons/48/48-car-blue.svg);
        }

        .icon.large.car.ultramarine {
            background-image: url(../img/icons/48/48-car-ultramarine.svg);
        }

        .icon.large.car.white {
            background-image: url(../img/icons/48/48-car-white.svg);
        }

        .icon.large.car.granite {
            background-image: url(../img/icons/48/48-car-granite.svg);
        }

        .icon.large.car-loans.blue {
            background-image: url(../img/icons/48/48-car-loans-blue.svg);
        }

        .icon.large.car-loans.ultramarine {
            background-image: url(../img/icons/48/48-car-loans-ultramarine.svg);
        }

        .icon.large.car-loans.white {
            background-image: url(../img/icons/48/48-car-loans-white.svg);
        }

        .icon.large.car-loans.granite {
            background-image: url(../img/icons/48/48-car-loans-granite.svg);
        }

        .icon.large.cash.blue {
            background-image: url(../img/icons/48/48-cash-blue.svg);
        }

        .icon.large.cash.ultramarine {
            background-image: url(../img/icons/48/48-cash-ultramarine.svg);
        }

        .icon.large.cash.white {
            background-image: url(../img/icons/48/48-cash-white.svg);
        }

        .icon.large.cash.granite {
            background-image: url(../img/icons/48/48-cash-granite.svg);
        }

        .icon.large.celebration.blue {
            background-image: url(../img/icons/48/48-celebration-blue.svg);
        }

        .icon.large.celebration.ultramarine {
            background-image: url(../img/icons/48/48-celebration-ultramarine.svg);
        }

        .icon.large.celebration.white {
            background-image: url(../img/icons/48/48-celebration-white.svg);
        }

        .icon.large.celebration.granite {
            background-image: url(../img/icons/48/48-celebration-granite.svg);
        }

        .icon.large.certification.blue {
            background-image: url(../img/icons/48/48-certification-blue.svg);
        }

        .icon.large.certification.ultramarine {
            background-image: url(../img/icons/48/48-certification-ultramarine.svg);
        }

        .icon.large.certification.white {
            background-image: url(../img/icons/48/48-certification-white.svg);
        }

        .icon.large.certification.granite {
            background-image: url(../img/icons/48/48-certification-granite.svg);
        }

        .icon.large.charity.blue {
            background-image: url(../img/icons/48/48-charity-blue.svg);
        }

        .icon.large.charity.ultramarine {
            background-image: url(../img/icons/48/48-charity-ultramarine.svg);
        }

        .icon.large.charity.white {
            background-image: url(../img/icons/48/48-charity-white.svg);
        }

        .icon.large.charity.granite {
            background-image: url(../img/icons/48/48-charity-granite.svg);
        }

        .icon.large.chat.blue {
            background-image: url(../img/icons/48/48-chat-blue.svg);
        }

        .icon.large.chat.ultramarine {
            background-image: url(../img/icons/48/48-chat-ultramarine.svg);
        }

        .icon.large.chat.white {
            background-image: url(../img/icons/48/48-chat-white.svg);
        }

        .icon.large.chat.granite {
            background-image: url(../img/icons/48/48-chat-granite.svg);
        }

        .icon.large.cheque.blue {
            background-image: url(../img/icons/48/48-cheque-blue.svg);
        }

        .icon.large.cheque.ultramarine {
            background-image: url(../img/icons/48/48-cheque-ultramarine.svg);
        }

        .icon.large.cheque.white {
            background-image: url(../img/icons/48/48-cheque-white.svg);
        }

        .icon.large.cheque.granite {
            background-image: url(../img/icons/48/48-cheque-granite.svg);
        }

        .icon.large.chequing-account.blue {
            background-image: url(../img/icons/48/48-chequing-account-blue.svg);
        }

        .icon.large.chequing-account.ultramarine {
            background-image: url(../img/icons/48/48-chequing-account-ultramarine.svg);
        }

        .icon.large.chequing-account.white {
            background-image: url(../img/icons/48/48-chequing-account-white.svg);
        }

        .icon.large.chequing-account.granite {
            background-image: url(../img/icons/48/48-chequing-account-granite.svg);
        }

        .icon.large.chevron-down.blue {
            background-image: url(../img/icons/48/48-chevron-down-blue.svg);
        }

        .icon.large.chevron-down.ultramarine {
            background-image: url(../img/icons/48/48-chevron-down-ultramarine.svg);
        }

        .icon.large.chevron-down.white {
            background-image: url(../img/icons/48/48-chevron-down-white.svg);
        }

        .icon.large.chevron-down.granite {
            background-image: url(../img/icons/48/48-chevron-down-granite.svg);
        }

        .icon.large.chevron-left.blue {
            background-image: url(../img/icons/48/48-chevron-left-blue.svg);
        }

        .icon.large.chevron-left.ultramarine {
            background-image: url(../img/icons/48/48-chevron-left-ultramarine.svg);
        }

        .icon.large.chevron-left.white {
            background-image: url(../img/icons/48/48-chevron-left-white.svg);
        }

        .icon.large.chevron-left.granite {
            background-image: url(../img/icons/48/48-chevron-left-granite.svg);
        }

        .icon.large.chevron-up.blue {
            background-image: url(../img/icons/48/48-chevron-up-blue.svg);
        }

        .icon.large.chevron-up.ultramarine {
            background-image: url(../img/icons/48/48-chevron-up-ultramarine.svg);
        }

        .icon.large.chevron-up.white {
            background-image: url(../img/icons/48/48-chevron-up-white.svg);
        }

        .icon.large.chevron-up.granite {
            background-image: url(../img/icons/48/48-chevron-up-granite.svg);
        }

        .icon.large.chevron-right.blue {
            background-image: url(../img/icons/48/48-chevron-right-blue.svg);
        }

        .icon.large.chevron-right.ultramarine {
            background-image: url(../img/icons/48/48-chevron-right-ultramarine.svg);
        }

        .icon.large.chevron-right.white {
            background-image: url(../img/icons/48/48-chevron-right-white.svg);
        }

        .icon.large.chevron-right.granite {
            background-image: url(../img/icons/48/48-chevron-right-granite.svg);
        }

        .icon.large.classroom.blue {
            background-image: url(../img/icons/48/48-classroom-blue.svg);
        }

        .icon.large.classroom.ultramarine {
            background-image: url(../img/icons/48/48-classroom-ultramarine.svg);
        }

        .icon.large.classroom.white {
            background-image: url(../img/icons/48/48-classroom-white.svg);
        }

        .icon.large.classroom.granite {
            background-image: url(../img/icons/48/48-classroom-granite.svg);
        }

        .icon.large.close.blue {
            background-image: url(../img/icons/48/48-close-blue.svg);
        }

        .icon.large.close.ultramarine {
            background-image: url(../img/icons/48/48-close-ultramarine.svg);
        }

        .icon.large.close.white {
            background-image: url(../img/icons/48/48-close-white.svg);
        }

        .icon.large.close.granite {
            background-image: url(../img/icons/48/48-close-granite.svg);
        }

        .icon.large.coaching.blue {
            background-image: url(../img/icons/48/48-coaching-blue.svg);
        }

        .icon.large.coaching.ultramarine {
            background-image: url(../img/icons/48/48-coaching-ultramarine.svg);
        }

        .icon.large.coaching.white {
            background-image: url(../img/icons/48/48-coaching-white.svg);
        }

        .icon.large.coaching.granite {
            background-image: url(../img/icons/48/48-coaching-granite.svg);
        }

        .icon.large.combined-statement.blue {
            background-image: url(../img/icons/48/48-combined-statement-blue.svg);
        }

        .icon.large.combined-statement.ultramarine {
            background-image: url(../img/icons/48/48-combined-statement-ultramarine.svg);
        }

        .icon.large.combined-statement.white {
            background-image: url(../img/icons/48/48-combined-statement-white.svg);
        }

        .icon.large.combined-statement.granite {
            background-image: url(../img/icons/48/48-combined-statement-granite.svg);
        }

        .icon.large.compare.blue {
            background-image: url(../img/icons/48/48-compare-blue.svg);
        }

        .icon.large.compare.ultramarine {
            background-image: url(../img/icons/48/48-compare-ultramarine.svg);
        }

        .icon.large.compare.white {
            background-image: url(../img/icons/48/48-compare-white.svg);
        }

        .icon.large.compare.granite {
            background-image: url(../img/icons/48/48-compare-granite.svg);
        }

        .icon.large.compass.blue {
            background-image: url(../img/icons/48/48-compass-blue.svg);
        }

        .icon.large.compass.ultramarine {
            background-image: url(../img/icons/48/48-compass-ultramarine.svg);
        }

        .icon.large.compass.white {
            background-image: url(../img/icons/48/48-compass-white.svg);
        }

        .icon.large.compass.granite {
            background-image: url(../img/icons/48/48-compass-granite.svg);
        }

        .icon.large.contributing.blue {
            background-image: url(../img/icons/48/48-contributing-blue.svg);
        }

        .icon.large.contributing.ultramarine {
            background-image: url(../img/icons/48/48-contributing-ultramarine.svg);
        }

        .icon.large.contributing.white {
            background-image: url(../img/icons/48/48-contributing-white.svg);
        }

        .icon.large.contributing.granite {
            background-image: url(../img/icons/48/48-contributing-granite.svg);
        }

        .icon.large.controls.blue {
            background-image: url(../img/icons/48/48-controls-blue.svg);
        }

        .icon.large.controls.ultramarine {
            background-image: url(../img/icons/48/48-controls-ultramarine.svg);
        }

        .icon.large.controls.white {
            background-image: url(../img/icons/48/48-controls-white.svg);
        }

        .icon.large.controls.granite {
            background-image: url(../img/icons/48/48-controls-granite.svg);
        }

        .icon.large.couple.blue {
            background-image: url(../img/icons/48/48-couple-blue.svg);
        }

        .icon.large.couple.ultramarine {
            background-image: url(../img/icons/48/48-couple-ultramarine.svg);
        }

        .icon.large.couple.white {
            background-image: url(../img/icons/48/48-couple-white.svg);
        }

        .icon.large.couple.granite {
            background-image: url(../img/icons/48/48-couple-granite.svg);
        }

        .icon.large.credit-card.blue {
            background-image: url(../img/icons/48/48-credit-card-blue.svg);
        }

        .icon.large.credit-card.ultramarine {
            background-image: url(../img/icons/48/48-credit-card-ultramarine.svg);
        }

        .icon.large.credit-card.white {
            background-image: url(../img/icons/48/48-credit-card-white.svg);
        }

        .icon.large.credit-card.granite {
            background-image: url(../img/icons/48/48-credit-card-granite.svg);
        }

        .icon.large.credit-cards.blue {
            background-image: url(../img/icons/48/48-credit-cards-blue.svg);
        }

        .icon.large.credit-cards.ultramarine {
            background-image: url(../img/icons/48/48-credit-cards-ultramarine.svg);
        }

        .icon.large.credit-cards.white {
            background-image: url(../img/icons/48/48-credit-cards-white.svg);
        }

        .icon.large.credit-cards.granite {
            background-image: url(../img/icons/48/48-credit-cards-granite.svg);
        }

        .icon.large.currency-exchange.blue {
            background-image: url(../img/icons/48/48-currency-exchange-blue.svg);
        }

        .icon.large.currency-exchange.ultramarine {
            background-image: url(../img/icons/48/48-currency-exchange-ultramarine.svg);
        }

        .icon.large.currency-exchange.white {
            background-image: url(../img/icons/48/48-currency-exchange-white.svg);
        }

        .icon.large.currency-exchange.granite {
            background-image: url(../img/icons/48/48-currency-exchange-granite.svg);
        }

        .icon.large.customer.blue {
            background-image: url(../img/icons/48/48-customer-blue.svg);
        }

        .icon.large.customer.ultramarine {
            background-image: url(../img/icons/48/48-customer-ultramarine.svg);
        }

        .icon.large.customer.white {
            background-image: url(../img/icons/48/48-customer-white.svg);
        }

        .icon.large.customer.granite {
            background-image: url(../img/icons/48/48-customer-granite.svg);
        }

        .icon.large.customer-conversations.blue {
            background-image: url(../img/icons/48/48-customer-conversations-blue.svg);
        }

        .icon.large.customer-conversations.ultramarine {
            background-image: url(../img/icons/48/48-customer-conversations-ultramarine.svg);
        }

        .icon.large.customer-conversations.white {
            background-image: url(../img/icons/48/48-customer-conversations-white.svg);
        }

        .icon.large.customer-conversations.granite {
            background-image: url(../img/icons/48/48-customer-conversations-granite.svg);
        }

        .icon.large.customer-experience.blue {
            background-image: url(../img/icons/48/48-customer-experience-blue.svg);
        }

        .icon.large.customer-experience.ultramarine {
            background-image: url(../img/icons/48/48-customer-experience-ultramarine.svg);
        }

        .icon.large.customer-experience.white {
            background-image: url(../img/icons/48/48-customer-experience-white.svg);
        }

        .icon.large.customer-experience.granite {
            background-image: url(../img/icons/48/48-customer-experience-granite.svg);
        }

        .icon.large.customer-in-branch.blue {
            background-image: url(../img/icons/48/48-customer-in-branch-blue.svg);
        }

        .icon.large.customer-in-branch.ultramarine {
            background-image: url(../img/icons/48/48-customer-in-branch-ultramarine.svg);
        }

        .icon.large.customer-in-branch.white {
            background-image: url(../img/icons/48/48-customer-in-branch-white.svg);
        }

        .icon.large.customer-in-branch.granite {
            background-image: url(../img/icons/48/48-customer-in-branch-granite.svg);
        }

        .icon.large.customer-loyalty.blue {
            background-image: url(../img/icons/48/48-customer-loyalty-blue.svg);
        }

        .icon.large.customer-loyalty.ultramarine {
            background-image: url(../img/icons/48/48-customer-loyalty-ultramarine.svg);
        }

        .icon.large.customer-loyalty.white {
            background-image: url(../img/icons/48/48-customer-loyalty-white.svg);
        }

        .icon.large.customer-loyalty.granite {
            background-image: url(../img/icons/48/48-customer-loyalty-granite.svg);
        }

        .icon.large.customer-pulse.blue {
            background-image: url(../img/icons/48/48-customer-pulse-blue.svg);
        }

        .icon.large.customer-pulse.ultramarine {
            background-image: url(../img/icons/48/48-customer-pulse-ultramarine.svg);
        }

        .icon.large.customer-pulse.white {
            background-image: url(../img/icons/48/48-customer-pulse-white.svg);
        }

        .icon.large.customer-pulse.granite {
            background-image: url(../img/icons/48/48-customer-pulse-granite.svg);
        }

        .icon.large.daycare.blue {
            background-image: url(../img/icons/48/48-daycare-blue.svg);
        }

        .icon.large.daycare.ultramarine {
            background-image: url(../img/icons/48/48-daycare-ultramarine.svg);
        }

        .icon.large.daycare.white {
            background-image: url(../img/icons/48/48-daycare-white.svg);
        }

        .icon.large.daycare.granite {
            background-image: url(../img/icons/48/48-daycare-granite.svg);
        }

        .icon.large.debit-card.blue {
            background-image: url(../img/icons/48/48-debit-card-blue.svg);
        }

        .icon.large.debit-card.ultramarine {
            background-image: url(../img/icons/48/48-debit-card-ultramarine.svg);
        }

        .icon.large.debit-card.white {
            background-image: url(../img/icons/48/48-debit-card-white.svg);
        }

        .icon.large.debit-card.granite {
            background-image: url(../img/icons/48/48-debit-card-granite.svg);
        }

        .icon.large.deposits.blue {
            background-image: url(../img/icons/48/48-deposits-blue.svg);
        }

        .icon.large.deposits.ultramarine {
            background-image: url(../img/icons/48/48-deposits-ultramarine.svg);
        }

        .icon.large.deposits.white {
            background-image: url(../img/icons/48/48-deposits-white.svg);
        }

        .icon.large.deposits.granite {
            background-image: url(../img/icons/48/48-deposits-granite.svg);
        }

        .icon.large.desktop.blue {
            background-image: url(../img/icons/48/48-desktop-blue.svg);
        }

        .icon.large.desktop.ultramarine {
            background-image: url(../img/icons/48/48-desktop-ultramarine.svg);
        }

        .icon.large.desktop.white {
            background-image: url(../img/icons/48/48-desktop-white.svg);
        }

        .icon.large.desktop.granite {
            background-image: url(../img/icons/48/48-desktop-granite.svg);
        }

        .icon.large.digital-channels.blue {
            background-image: url(../img/icons/48/48-digital-channels-blue.svg);
        }

        .icon.large.digital-channels.ultramarine {
            background-image: url(../img/icons/48/48-digital-channels-ultramarine.svg);
        }

        .icon.large.digital-channels.white {
            background-image: url(../img/icons/48/48-digital-channels-white.svg);
        }

        .icon.large.digital-channels.granite {
            background-image: url(../img/icons/48/48-digital-channels-granite.svg);
        }

        .icon.large.dining.blue {
            background-image: url(../img/icons/48/48-dining-blue.svg);
        }

        .icon.large.dining.ultramarine {
            background-image: url(../img/icons/48/48-dining-ultramarine.svg);
        }

        .icon.large.dining.white {
            background-image: url(../img/icons/48/48-dining-white.svg);
        }

        .icon.large.dining.granite {
            background-image: url(../img/icons/48/48-dining-granite.svg);
        }

        .icon.large.dollar-climb.blue {
            background-image: url(../img/icons/48/48-dollar-climb-blue.svg);
        }

        .icon.large.dollar-climb.ultramarine {
            background-image: url(../img/icons/48/48-dollar-climb-ultramarine.svg);
        }

        .icon.large.dollar-climb.white {
            background-image: url(../img/icons/48/48-dollar-climb-white.svg);
        }

        .icon.large.dollar-climb.granite {
            background-image: url(../img/icons/48/48-dollar-climb-granite.svg);
        }

        .icon.large.download.blue {
            background-image: url(../img/icons/48/48-download-blue.svg);
        }

        .icon.large.download.ultramarine {
            background-image: url(../img/icons/48/48-download-ultramarine.svg);
        }

        .icon.large.download.white {
            background-image: url(../img/icons/48/48-download-white.svg);
        }

        .icon.large.download.granite {
            background-image: url(../img/icons/48/48-download-granite.svg);
        }

        .icon.large.edit.blue {
            background-image: url(../img/icons/48/48-edit-blue.svg);
        }

        .icon.large.edit.ultramarine {
            background-image: url(../img/icons/48/48-edit-ultramarine.svg);
        }

        .icon.large.edit.white {
            background-image: url(../img/icons/48/48-edit-white.svg);
        }

        .icon.large.edit.granite {
            background-image: url(../img/icons/48/48-edit-granite.svg);
        }

        .icon.large.education.blue {
            background-image: url(../img/icons/48/48-education-blue.svg);
        }

        .icon.large.education.ultramarine {
            background-image: url(../img/icons/48/48-education-ultramarine.svg);
        }

        .icon.large.education.white {
            background-image: url(../img/icons/48/48-education-white.svg);
        }

        .icon.large.education.granite {
            background-image: url(../img/icons/48/48-education-granite.svg);
        }

        .icon.large.e-learning.blue {
            background-image: url(../img/icons/48/48-e-learning-blue.svg);
        }

        .icon.large.e-learning.ultramarine {
            background-image: url(../img/icons/48/48-e-learning-ultramarine.svg);
        }

        .icon.large.e-learning.white {
            background-image: url(../img/icons/48/48-e-learning-white.svg);
        }

        .icon.large.e-learning.granite {
            background-image: url(../img/icons/48/48-e-learning-granite.svg);
        }

        .icon.large.employee.blue {
            background-image: url(../img/icons/48/48-employee-blue.svg);
        }

        .icon.large.employee.ultramarine {
            background-image: url(../img/icons/48/48-employee-ultramarine.svg);
        }

        .icon.large.employee.white {
            background-image: url(../img/icons/48/48-employee-white.svg);
        }

        .icon.large.employee.granite {
            background-image: url(../img/icons/48/48-employee-granite.svg);
        }

        .icon.large.enclosed-add.blue {
            background-image: url(../img/icons/48/48-enclosed-add-blue.svg);
        }

        .icon.large.enclosed-add.ultramarine {
            background-image: url(../img/icons/48/48-enclosed-add-ultramarine.svg);
        }

        .icon.large.enclosed-add.white {
            background-image: url(../img/icons/48/48-enclosed-add-white.svg);
        }

        .icon.large.enclosed-add.granite {
            background-image: url(../img/icons/48/48-enclosed-add-granite.svg);
        }

        .icon.large.enclosed-check.blue {
            background-image: url(../img/icons/48/48-enclosed-check-blue.svg);
        }

        .icon.large.enclosed-check.ultramarine {
            background-image: url(../img/icons/48/48-enclosed-check-ultramarine.svg);
        }

        .icon.large.enclosed-check.white {
            background-image: url(../img/icons/48/48-enclosed-check-white.svg);
        }

        .icon.large.enclosed-check.granite {
            background-image: url(../img/icons/48/48-enclosed-check-granite.svg);
        }

        .icon.large.enclosed-minus.blue {
            background-image: url(../img/icons/48/48-enclosed-minus-blue.svg);
        }

        .icon.large.enclosed-minus.ultramarine {
            background-image: url(../img/icons/48/48-enclosed-minus-ultramarine.svg);
        }

        .icon.large.enclosed-minus.white {
            background-image: url(../img/icons/48/48-enclosed-minus-white.svg);
        }

        .icon.large.enclosed-minus.granite {
            background-image: url(../img/icons/48/48-enclosed-minus-granite.svg);
        }

        .icon.large.enrollment.blue {
            background-image: url(../img/icons/48/48-enrollment-blue.svg);
        }

        .icon.large.enrollment.ultramarine {
            background-image: url(../img/icons/48/48-enrollment-ultramarine.svg);
        }

        .icon.large.enrollment.white {
            background-image: url(../img/icons/48/48-enrollment-white.svg);
        }

        .icon.large.enrollment.granite {
            background-image: url(../img/icons/48/48-enrollment-granite.svg);
        }

        .icon.large.entertainment.blue {
            background-image: url(../img/icons/48/48-entertainment-blue.svg);
        }

        .icon.large.entertainment.ultramarine {
            background-image: url(../img/icons/48/48-entertainment-ultramarine.svg);
        }

        .icon.large.entertainment.white {
            background-image: url(../img/icons/48/48-entertainment-white.svg);
        }

        .icon.large.entertainment.granite {
            background-image: url(../img/icons/48/48-entertainment-granite.svg);
        }

        .icon.large.environment.blue {
            background-image: url(../img/icons/48/48-environment-blue.svg);
        }

        .icon.large.environment.ultramarine {
            background-image: url(../img/icons/48/48-environment-ultramarine.svg);
        }

        .icon.large.environment.white {
            background-image: url(../img/icons/48/48-environment-white.svg);
        }

        .icon.large.environment.granite {
            background-image: url(../img/icons/48/48-environment-granite.svg);
        }

        .icon.large.euro-climb.blue {
            background-image: url(../img/icons/48/48-euro-climb-blue.svg);
        }

        .icon.large.euro-climb.ultramarine {
            background-image: url(../img/icons/48/48-euro-climb-ultramarine.svg);
        }

        .icon.large.euro-climb.white {
            background-image: url(../img/icons/48/48-euro-climb-white.svg);
        }

        .icon.large.euro-climb.granite {
            background-image: url(../img/icons/48/48-euro-climb-granite.svg);
        }

        .icon.large.external-link.blue {
            background-image: url(../img/icons/48/48-external-link-blue.svg);
        }

        .icon.large.external-link.ultramarine {
            background-image: url(../img/icons/48/48-external-link-ultramarine.svg);
        }

        .icon.large.external-link.white {
            background-image: url(../img/icons/48/48-external-link-white.svg);
        }

        .icon.large.external-link.granite {
            background-image: url(../img/icons/48/48-external-link-granite.svg);
        }

        .icon.large.family.blue {
            background-image: url(../img/icons/48/48-family-blue.svg);
        }

        .icon.large.family.ultramarine {
            background-image: url(../img/icons/48/48-family-ultramarine.svg);
        }

        .icon.large.family.white {
            background-image: url(../img/icons/48/48-family-white.svg);
        }

        .icon.large.family.granite {
            background-image: url(../img/icons/48/48-family-granite.svg);
        }

        .icon.large.family-home.blue {
            background-image: url(../img/icons/48/48-family-home-blue.svg);
        }

        .icon.large.family-home.ultramarine {
            background-image: url(../img/icons/48/48-family-home-ultramarine.svg);
        }

        .icon.large.family-home.white {
            background-image: url(../img/icons/48/48-family-home-white.svg);
        }

        .icon.large.family-home.granite {
            background-image: url(../img/icons/48/48-family-home-granite.svg);
        }

        .icon.large.fingerprint.blue {
            background-image: url(../img/icons/48/48-fingerprint-blue.svg);
        }

        .icon.large.fingerprint.ultramarine {
            background-image: url(../img/icons/48/48-fingerprint-ultramarine.svg);
        }

        .icon.large.fingerprint.white {
            background-image: url(../img/icons/48/48-fingerprint-white.svg);
        }

        .icon.large.fingerprint.granite {
            background-image: url(../img/icons/48/48-fingerprint-granite.svg);
        }

        .icon.large.gift.blue {
            background-image: url(../img/icons/48/48-gift-blue.svg);
        }

        .icon.large.gift.ultramarine {
            background-image: url(../img/icons/48/48-gift-ultramarine.svg);
        }

        .icon.large.gift.white {
            background-image: url(../img/icons/48/48-gift-white.svg);
        }

        .icon.large.gift.granite {
            background-image: url(../img/icons/48/48-gift-granite.svg);
        }

        .icon.large.globe.blue {
            background-image: url(../img/icons/48/48-globe-blue.svg);
        }

        .icon.large.globe.ultramarine {
            background-image: url(../img/icons/48/48-globe-ultramarine.svg);
        }

        .icon.large.globe.white {
            background-image: url(../img/icons/48/48-globe-white.svg);
        }

        .icon.large.globe.granite {
            background-image: url(../img/icons/48/48-globe-granite.svg);
        }

        .icon.large.goals.blue {
            background-image: url(../img/icons/48/48-goals-blue.svg);
        }

        .icon.large.goals.ultramarine {
            background-image: url(../img/icons/48/48-goals-ultramarine.svg);
        }

        .icon.large.goals.white {
            background-image: url(../img/icons/48/48-goals-white.svg);
        }

        .icon.large.goals.granite {
            background-image: url(../img/icons/48/48-goals-granite.svg);
        }

        .icon.large.home.blue {
            background-image: url(../img/icons/48/48-home-blue.svg);
        }

        .icon.large.home.ultramarine {
            background-image: url(../img/icons/48/48-home-ultramarine.svg);
        }

        .icon.large.home.white {
            background-image: url(../img/icons/48/48-home-white.svg);
        }

        .icon.large.home.granite {
            background-image: url(../img/icons/48/48-home-granite.svg);
        }

        .icon.large.insurance.blue {
            background-image: url(../img/icons/48/48-insurance-blue.svg);
        }

        .icon.large.insurance.ultramarine {
            background-image: url(../img/icons/48/48-insurance-ultramarine.svg);
        }

        .icon.large.insurance.white {
            background-image: url(../img/icons/48/48-insurance-white.svg);
        }

        .icon.large.insurance.granite {
            background-image: url(../img/icons/48/48-insurance-granite.svg);
        }

        .icon.large.investment.blue {
            background-image: url(../img/icons/48/48-investment-blue.svg);
        }

        .icon.large.investment.ultramarine {
            background-image: url(../img/icons/48/48-investment-ultramarine.svg);
        }

        .icon.large.investment.white {
            background-image: url(../img/icons/48/48-investment-white.svg);
        }

        .icon.large.investment.granite {
            background-image: url(../img/icons/48/48-investment-granite.svg);
        }

        .icon.large.laptop.blue {
            background-image: url(../img/icons/48/48-laptop-blue.svg);
        }

        .icon.large.laptop.ultramarine {
            background-image: url(../img/icons/48/48-laptop-ultramarine.svg);
        }

        .icon.large.laptop.white {
            background-image: url(../img/icons/48/48-laptop-white.svg);
        }

        .icon.large.laptop.granite {
            background-image: url(../img/icons/48/48-laptop-granite.svg);
        }

        .icon.large.leads.blue {
            background-image: url(../img/icons/48/48-leads-blue.svg);
        }

        .icon.large.leads.ultramarine {
            background-image: url(../img/icons/48/48-leads-ultramarine.svg);
        }

        .icon.large.leads.white {
            background-image: url(../img/icons/48/48-leads-white.svg);
        }

        .icon.large.leads.granite {
            background-image: url(../img/icons/48/48-leads-granite.svg);
        }

        .icon.large.growth.blue {
            background-image: url(../img/icons/48/48-growth-blue.svg);
        }

        .icon.large.growth.ultramarine {
            background-image: url(../img/icons/48/48-growth-ultramarine.svg);
        }

        .icon.large.growth.white {
            background-image: url(../img/icons/48/48-growth-white.svg);
        }

        .icon.large.growth.granite {
            background-image: url(../img/icons/48/48-growth-granite.svg);
        }

        .icon.large.legal-document.blue {
            background-image: url(../img/icons/48/48-legal-document-blue.svg);
        }

        .icon.large.legal-document.ultramarine {
            background-image: url(../img/icons/48/48-legal-document-ultramarine.svg);
        }

        .icon.large.legal-document.white {
            background-image: url(../img/icons/48/48-legal-document-white.svg);
        }

        .icon.large.legal-document.granite {
            background-image: url(../img/icons/48/48-legal-document-granite.svg);
        }

        .icon.large.light-bulb.blue {
            background-image: url(../img/icons/48/48-light-bulb-blue.svg);
        }

        .icon.large.light-bulb.ultramarine {
            background-image: url(../img/icons/48/48-light-bulb-ultramarine.svg);
        }

        .icon.large.light-bulb.white {
            background-image: url(../img/icons/48/48-light-bulb-white.svg);
        }

        .icon.large.light-bulb.granite {
            background-image: url(../img/icons/48/48-light-bulb-granite.svg);
        }

        .icon.large.loan.blue {
            background-image: url(../img/icons/48/48-loan-blue.svg);
        }

        .icon.large.loan.ultramarine {
            background-image: url(../img/icons/48/48-loan-ultramarine.svg);
        }

        .icon.large.loan.white {
            background-image: url(../img/icons/48/48-loan-white.svg);
        }

        .icon.large.loan.granite {
            background-image: url(../img/icons/48/48-loan-granite.svg);
        }

        .icon.large.location.blue {
            background-image: url(../img/icons/48/48-location-blue.svg);
        }

        .icon.large.location.ultramarine {
            background-image: url(../img/icons/48/48-location-ultramarine.svg);
        }

        .icon.large.location.white {
            background-image: url(../img/icons/48/48-location-white.svg);
        }

        .icon.large.location.granite {
            background-image: url(../img/icons/48/48-location-granite.svg);
        }

        .icon.large.mail.blue {
            background-image: url(../img/icons/48/48-mail-blue.svg);
        }

        .icon.large.mail.ultramarine {
            background-image: url(../img/icons/48/48-mail-ultramarine.svg);
        }

        .icon.large.mail.white {
            background-image: url(../img/icons/48/48-mail-white.svg);
        }

        .icon.large.mail.granite {
            background-image: url(../img/icons/48/48-mail-granite.svg);
        }

        .icon.large.maintenance.blue {
            background-image: url(../img/icons/48/48-maintenance-blue.svg);
        }

        .icon.large.maintenance.ultramarine {
            background-image: url(../img/icons/48/48-maintenance-ultramarine.svg);
        }

        .icon.large.maintenance.white {
            background-image: url(../img/icons/48/48-maintenance-white.svg);
        }

        .icon.large.maintenance.granite {
            background-image: url(../img/icons/48/48-maintenance-granite.svg);
        }

        .icon.large.market-factors.blue {
            background-image: url(../img/icons/48/48-market-factors-blue.svg);
        }

        .icon.large.market-factors.ultramarine {
            background-image: url(../img/icons/48/48-market-factors-ultramarine.svg);
        }

        .icon.large.market-factors.white {
            background-image: url(../img/icons/48/48-market-factors-white.svg);
        }

        .icon.large.market-factors.granite {
            background-image: url(../img/icons/48/48-market-factors-granite.svg);
        }

        .icon.large.market-fact-pack.blue {
            background-image: url(../img/icons/48/48-market-fact-pack-blue.svg);
        }

        .icon.large.market-fact-pack.ultramarine {
            background-image: url(../img/icons/48/48-market-fact-pack-ultramarine.svg);
        }

        .icon.large.market-fact-pack.white {
            background-image: url(../img/icons/48/48-market-fact-pack-white.svg);
        }

        .icon.large.market-fact-pack.granite {
            background-image: url(../img/icons/48/48-market-fact-pack-granite.svg);
        }

        .icon.large.market-opportunity.blue {
            background-image: url(../img/icons/48/48-market-opportunity-blue.svg);
        }

        .icon.large.market-opportunity.ultramarine {
            background-image: url(../img/icons/48/48-market-opportunity-ultramarine.svg);
        }

        .icon.large.market-opportunity.white {
            background-image: url(../img/icons/48/48-market-opportunity-white.svg);
        }

        .icon.large.market-opportunity.granite {
            background-image: url(../img/icons/48/48-market-opportunity-granite.svg);
        }

        .icon.large.markets.blue {
            background-image: url(../img/icons/48/48-markets-blue.svg);
        }

        .icon.large.markets.ultramarine {
            background-image: url(../img/icons/48/48-markets-ultramarine.svg);
        }

        .icon.large.markets.white {
            background-image: url(../img/icons/48/48-markets-white.svg);
        }

        .icon.large.markets.granite {
            background-image: url(../img/icons/48/48-markets-granite.svg);
        }

        .icon.large.medical.blue {
            background-image: url(../img/icons/48/48-medical-blue.svg);
        }

        .icon.large.medical.ultramarine {
            background-image: url(../img/icons/48/48-medical-ultramarine.svg);
        }

        .icon.large.medical.white {
            background-image: url(../img/icons/48/48-medical-white.svg);
        }

        .icon.large.medical.granite {
            background-image: url(../img/icons/48/48-medical-granite.svg);
        }

        .icon.large.mobile.blue {
            background-image: url(../img/icons/48/48-mobile-blue.svg);
        }

        .icon.large.mobile.ultramarine {
            background-image: url(../img/icons/48/48-mobile-ultramarine.svg);
        }

        .icon.large.mobile.white {
            background-image: url(../img/icons/48/48-mobile-white.svg);
        }

        .icon.large.mobile.granite {
            background-image: url(../img/icons/48/48-mobile-granite.svg);
        }

        .icon.large.mortality.blue {
            background-image: url(../img/icons/48/48-mortality-blue.svg);
        }

        .icon.large.mortality.ultramarine {
            background-image: url(../img/icons/48/48-mortality-ultramarine.svg);
        }

        .icon.large.mortality.white {
            background-image: url(../img/icons/48/48-mortality-white.svg);
        }

        .icon.large.mortality.granite {
            background-image: url(../img/icons/48/48-mortality-granite.svg);
        }

        .icon.large.mortgage.blue {
            background-image: url(../img/icons/48/48-mortgage-blue.svg);
        }

        .icon.large.mortgage.ultramarine {
            background-image: url(../img/icons/48/48-mortgage-ultramarine.svg);
        }

        .icon.large.mortgage.white {
            background-image: url(../img/icons/48/48-mortgage-white.svg);
        }

        .icon.large.mortgage.granite {
            background-image: url(../img/icons/48/48-mortgage-granite.svg);
        }

        .icon.large.nav-cheque.blue {
            background-image: url(../img/icons/48/48-nav-cheque-blue.svg);
        }

        .icon.large.nav-cheque.ultramarine {
            background-image: url(../img/icons/48/48-nav-cheque-ultramarine.svg);
        }

        .icon.large.nav-cheque.white {
            background-image: url(../img/icons/48/48-nav-cheque-white.svg);
        }

        .icon.large.nav-cheque.granite {
            background-image: url(../img/icons/48/48-nav-cheque-granite.svg);
        }

        .icon.large.net-performance-score.blue {
            background-image: url(../img/icons/48/48-net-performance-score-blue.svg);
        }

        .icon.large.net-performance-score.ultramarine {
            background-image: url(../img/icons/48/48-net-performance-score-ultramarine.svg);
        }

        .icon.large.net-performance-score.white {
            background-image: url(../img/icons/48/48-net-performance-score-white.svg);
        }

        .icon.large.net-performance-score.granite {
            background-image: url(../img/icons/48/48-net-performance-score-granite.svg);
        }

        .icon.large.new-message.blue {
            background-image: url(../img/icons/48/48-new-message-blue.svg);
        }

        .icon.large.new-message.ultramarine {
            background-image: url(../img/icons/48/48-new-message-ultramarine.svg);
        }

        .icon.large.new-message.white {
            background-image: url(../img/icons/48/48-new-message-white.svg);
        }

        .icon.large.new-message.granite {
            background-image: url(../img/icons/48/48-new-message-granite.svg);
        }

        .icon.large.offline.blue {
            background-image: url(../img/icons/48/48-offline-blue.svg);
        }

        .icon.large.offline.ultramarine {
            background-image: url(../img/icons/48/48-offline-ultramarine.svg);
        }

        .icon.large.offline.white {
            background-image: url(../img/icons/48/48-offline-white.svg);
        }

        .icon.large.offline.granite {
            background-image: url(../img/icons/48/48-offline-granite.svg);
        }

        .icon.large.one-on-one.blue {
            background-image: url(../img/icons/48/48-one-on-one-blue.svg);
        }

        .icon.large.one-on-one.ultramarine {
            background-image: url(../img/icons/48/48-one-on-one-ultramarine.svg);
        }

        .icon.large.one-on-one.white {
            background-image: url(../img/icons/48/48-one-on-one-white.svg);
        }

        .icon.large.one-on-one.granite {
            background-image: url(../img/icons/48/48-one-on-one-granite.svg);
        }

        .icon.large.online.blue {
            background-image: url(../img/icons/48/48-online-blue.svg);
        }

        .icon.large.online.ultramarine {
            background-image: url(../img/icons/48/48-online-ultramarine.svg);
        }

        .icon.large.online.white {
            background-image: url(../img/icons/48/48-online-white.svg);
        }

        .icon.large.online.granite {
            background-image: url(../img/icons/48/48-online-granite.svg);
        }

        .icon.large.partnership.blue {
            background-image: url(../img/icons/48/48-partnership-blue.svg);
        }

        .icon.large.partnership.ultramarine {
            background-image: url(../img/icons/48/48-partnership-ultramarine.svg);
        }

        .icon.large.partnership.white {
            background-image: url(../img/icons/48/48-partnership-white.svg);
        }

        .icon.large.partnership.granite {
            background-image: url(../img/icons/48/48-partnership-granite.svg);
        }

        .icon.large.part-time.blue {
            background-image: url(../img/icons/48/48-part-time-blue.svg);
        }

        .icon.large.part-time.ultramarine {
            background-image: url(../img/icons/48/48-part-time-ultramarine.svg);
        }

        .icon.large.part-time.white {
            background-image: url(../img/icons/48/48-part-time-white.svg);
        }

        .icon.large.part-time.granite {
            background-image: url(../img/icons/48/48-part-time-granite.svg);
        }

        .icon.large.pdf.blue {
            background-image: url(../img/icons/48/48-pdf-blue.svg);
        }

        .icon.large.pdf.ultramarine {
            background-image: url(../img/icons/48/48-pdf-ultramarine.svg);
        }

        .icon.large.pdf.white {
            background-image: url(../img/icons/48/48-pdf-white.svg);
        }

        .icon.large.pdf.granite {
            background-image: url(../img/icons/48/48-pdf-granite.svg);
        }

        .icon.large.people-fact-pack.blue {
            background-image: url(../img/icons/48/48-people-fact-pack-blue.svg);
        }

        .icon.large.people-fact-pack.ultramarine {
            background-image: url(../img/icons/48/48-people-fact-pack-ultramarine.svg);
        }

        .icon.large.people-fact-pack.white {
            background-image: url(../img/icons/48/48-people-fact-pack-white.svg);
        }

        .icon.large.people-fact-pack.granite {
            background-image: url(../img/icons/48/48-people-fact-pack-granite.svg);
        }

        .icon.large.percentage.blue {
            background-image: url(../img/icons/48/48-percentage-blue.svg);
        }

        .icon.large.percentage.ultramarine {
            background-image: url(../img/icons/48/48-percentage-ultramarine.svg);
        }

        .icon.large.percentage.white {
            background-image: url(../img/icons/48/48-percentage-white.svg);
        }

        .icon.large.percentage.granite {
            background-image: url(../img/icons/48/48-percentage-granite.svg);
        }

        .icon.large.performance.blue {
            background-image: url(../img/icons/48/48-performance-blue.svg);
        }

        .icon.large.performance.ultramarine {
            background-image: url(../img/icons/48/48-performance-ultramarine.svg);
        }

        .icon.large.performance.white {
            background-image: url(../img/icons/48/48-performance-white.svg);
        }

        .icon.large.performance.granite {
            background-image: url(../img/icons/48/48-performance-granite.svg);
        }

        .icon.large.phone.blue {
            background-image: url(../img/icons/48/48-phone-blue.svg);
        }

        .icon.large.phone.ultramarine {
            background-image: url(../img/icons/48/48-phone-ultramarine.svg);
        }

        .icon.large.phone.white {
            background-image: url(../img/icons/48/48-phone-white.svg);
        }

        .icon.large.phone.granite {
            background-image: url(../img/icons/48/48-phone-granite.svg);
        }

        .icon.large.pie-chart.blue {
            background-image: url(../img/icons/48/48-pie-chart-blue.svg);
        }

        .icon.large.pie-chart.ultramarine {
            background-image: url(../img/icons/48/48-pie-chart-ultramarine.svg);
        }

        .icon.large.pie-chart.white {
            background-image: url(../img/icons/48/48-pie-chart-white.svg);
        }

        .icon.large.pie-chart.granite {
            background-image: url(../img/icons/48/48-pie-chart-granite.svg);
        }

        .icon.large.play.blue {
            background-image: url(../img/icons/48/48-play-blue.svg);
        }

        .icon.large.play.ultramarine {
            background-image: url(../img/icons/48/48-play-ultramarine.svg);
        }

        .icon.large.play.white {
            background-image: url(../img/icons/48/48-play-white.svg);
        }

        .icon.large.play.granite {
            background-image: url(../img/icons/48/48-play-granite.svg);
        }

        .icon.large.playbook.blue {
            background-image: url(../img/icons/48/48-playbook-blue.svg);
        }

        .icon.large.playbook.ultramarine {
            background-image: url(../img/icons/48/48-playbook-ultramarine.svg);
        }

        .icon.large.playbook.white {
            background-image: url(../img/icons/48/48-playbook-white.svg);
        }

        .icon.large.playbook.granite {
            background-image: url(../img/icons/48/48-playbook-granite.svg);
        }

        .icon.large.premium.blue {
            background-image: url(../img/icons/48/48-premium-blue.svg);
        }

        .icon.large.premium.ultramarine {
            background-image: url(../img/icons/48/48-premium-ultramarine.svg);
        }

        .icon.large.premium.white {
            background-image: url(../img/icons/48/48-premium-white.svg);
        }

        .icon.large.premium.granite {
            background-image: url(../img/icons/48/48-premium-granite.svg);
        }

        .icon.large.primary-customer.blue {
            background-image: url(../img/icons/48/48-primary-customer-blue.svg);
        }

        .icon.large.primary-customer.ultramarine {
            background-image: url(../img/icons/48/48-primary-customer-ultramarine.svg);
        }

        .icon.large.primary-customer.white {
            background-image: url(../img/icons/48/48-primary-customer-white.svg);
        }

        .icon.large.primary-customer.granite {
            background-image: url(../img/icons/48/48-primary-customer-granite.svg);
        }

        .icon.large.print.blue {
            background-image: url(../img/icons/48/48-print-blue.svg);
        }

        .icon.large.print.ultramarine {
            background-image: url(../img/icons/48/48-print-ultramarine.svg);
        }

        .icon.large.print.white {
            background-image: url(../img/icons/48/48-print-white.svg);
        }

        .icon.large.print.granite {
            background-image: url(../img/icons/48/48-print-granite.svg);
        }

        .icon.large.product.blue {
            background-image: url(../img/icons/48/48-product-blue.svg);
        }

        .icon.large.product.ultramarine {
            background-image: url(../img/icons/48/48-product-ultramarine.svg);
        }

        .icon.large.product.white {
            background-image: url(../img/icons/48/48-product-white.svg);
        }

        .icon.large.product.granite {
            background-image: url(../img/icons/48/48-product-granite.svg);
        }

        .icon.large.products.blue {
            background-image: url(../img/icons/48/48-products-blue.svg);
        }

        .icon.large.products.ultramarine {
            background-image: url(../img/icons/48/48-products-ultramarine.svg);
        }

        .icon.large.products.white {
            background-image: url(../img/icons/48/48-products-white.svg);
        }

        .icon.large.products.granite {
            background-image: url(../img/icons/48/48-products-granite.svg);
        }

        .icon.large.profile.blue {
            background-image: url(../img/icons/48/48-profile-blue.svg);
        }

        .icon.large.profile.ultramarine {
            background-image: url(../img/icons/48/48-profile-ultramarine.svg);
        }

        .icon.large.profile.white {
            background-image: url(../img/icons/48/48-profile-white.svg);
        }

        .icon.large.profile.granite {
            background-image: url(../img/icons/48/48-profile-granite.svg);
        }

        .icon.large.qualification.blue {
            background-image: url(../img/icons/48/48-qualification-blue.svg);
        }

        .icon.large.qualification.ultramarine {
            background-image: url(../img/icons/48/48-qualification-ultramarine.svg);
        }

        .icon.large.qualification.white {
            background-image: url(../img/icons/48/48-qualification-white.svg);
        }

        .icon.large.qualification.granite {
            background-image: url(../img/icons/48/48-qualification-granite.svg);
        }

        .icon.large.recurring-bill.blue {
            background-image: url(../img/icons/48/48-recurring-bill-blue.svg);
        }

        .icon.large.recurring-bill.ultramarine {
            background-image: url(../img/icons/48/48-recurring-bill-ultramarine.svg);
        }

        .icon.large.recurring-bill.white {
            background-image: url(../img/icons/48/48-recurring-bill-white.svg);
        }

        .icon.large.recurring-bill.granite {
            background-image: url(../img/icons/48/48-recurring-bill-granite.svg);
        }

        .icon.large.recurring.blue {
            background-image: url(../img/icons/48/48-recurring-blue.svg);
        }

        .icon.large.recurring.ultramarine {
            background-image: url(../img/icons/48/48-recurring-ultramarine.svg);
        }

        .icon.large.recurring.white {
            background-image: url(../img/icons/48/48-recurring-white.svg);
        }

        .icon.large.recurring.granite {
            background-image: url(../img/icons/48/48-recurring-granite.svg);
        }

        .icon.large.referrals.blue {
            background-image: url(../img/icons/48/48-referrals-blue.svg);
        }

        .icon.large.referrals.ultramarine {
            background-image: url(../img/icons/48/48-referrals-ultramarine.svg);
        }

        .icon.large.referrals.white {
            background-image: url(../img/icons/48/48-referrals-white.svg);
        }

        .icon.large.referrals.granite {
            background-image: url(../img/icons/48/48-referrals-granite.svg);
        }

        .icon.large.resp.blue {
            background-image: url(../img/icons/48/48-resp-blue.svg);
        }

        .icon.large.resp.ultramarine {
            background-image: url(../img/icons/48/48-resp-ultramarine.svg);
        }

        .icon.large.resp.white {
            background-image: url(../img/icons/48/48-resp-white.svg);
        }

        .icon.large.resp.granite {
            background-image: url(../img/icons/48/48-resp-granite.svg);
        }

        .icon.large.retirement.blue {
            background-image: url(../img/icons/48/48-retirement-blue.svg);
        }

        .icon.large.retirement.ultramarine {
            background-image: url(../img/icons/48/48-retirement-ultramarine.svg);
        }

        .icon.large.retirement.white {
            background-image: url(../img/icons/48/48-retirement-white.svg);
        }

        .icon.large.retirement.granite {
            background-image: url(../img/icons/48/48-retirement-granite.svg);
        }

        .icon.large.rewards.blue {
            background-image: url(../img/icons/48/48-rewards-blue.svg);
        }

        .icon.large.rewards.ultramarine {
            background-image: url(../img/icons/48/48-rewards-ultramarine.svg);
        }

        .icon.large.rewards.white {
            background-image: url(../img/icons/48/48-rewards-white.svg);
        }

        .icon.large.rewards.granite {
            background-image: url(../img/icons/48/48-rewards-granite.svg);
        }

        .icon.large.rmb-climb.blue {
            background-image: url(../img/icons/48/48-rmb-climb-blue.svg);
        }

        .icon.large.rmb-climb.ultramarine {
            background-image: url(../img/icons/48/48-rmb-climb-ultramarine.svg);
        }

        .icon.large.rmb-climb.white {
            background-image: url(../img/icons/48/48-rmb-climb-white.svg);
        }

        .icon.large.rmb-climb.granite {
            background-image: url(../img/icons/48/48-rmb-climb-granite.svg);
        }

        .icon.large.sale.blue {
            background-image: url(../img/icons/48/48-sale-blue.svg);
        }

        .icon.large.sale.ultramarine {
            background-image: url(../img/icons/48/48-sale-ultramarine.svg);
        }

        .icon.large.sale.white {
            background-image: url(../img/icons/48/48-sale-white.svg);
        }

        .icon.large.sale.granite {
            background-image: url(../img/icons/48/48-sale-granite.svg);
        }

        .icon.large.sales-play.blue {
            background-image: url(../img/icons/48/48-sales-play-blue.svg);
        }

        .icon.large.sales-play.ultramarine {
            background-image: url(../img/icons/48/48-sales-play-ultramarine.svg);
        }

        .icon.large.sales-play.white {
            background-image: url(../img/icons/48/48-sales-play-white.svg);
        }

        .icon.large.sales-play.granite {
            background-image: url(../img/icons/48/48-sales-play-granite.svg);
        }

        .icon.large.savings.blue {
            background-image: url(../img/icons/48/48-savings-blue.svg);
        }

        .icon.large.savings.ultramarine {
            background-image: url(../img/icons/48/48-savings-ultramarine.svg);
        }

        .icon.large.savings.white {
            background-image: url(../img/icons/48/48-savings-white.svg);
        }

        .icon.large.savings.granite {
            background-image: url(../img/icons/48/48-savings-granite.svg);
        }

        .icon.large.scorecard.blue {
            background-image: url(../img/icons/48/48-scorecard-blue.svg);
        }

        .icon.large.scorecard.ultramarine {
            background-image: url(../img/icons/48/48-scorecard-ultramarine.svg);
        }

        .icon.large.scorecard.white {
            background-image: url(../img/icons/48/48-scorecard-white.svg);
        }

        .icon.large.scorecard.granite {
            background-image: url(../img/icons/48/48-scorecard-granite.svg);
        }

        .icon.large.search.blue {
            background-image: url(../img/icons/48/48-search-blue.svg);
        }

        .icon.large.search.ultramarine {
            background-image: url(../img/icons/48/48-search-ultramarine.svg);
        }

        .icon.large.search.white {
            background-image: url(../img/icons/48/48-search-white.svg);
        }

        .icon.large.search.granite {
            background-image: url(../img/icons/48/48-search-granite.svg);
        }

        .icon.large.security.blue {
            background-image: url(../img/icons/48/48-security-blue.svg);
        }

        .icon.large.security.ultramarine {
            background-image: url(../img/icons/48/48-security-ultramarine.svg);
        }

        .icon.large.security.white {
            background-image: url(../img/icons/48/48-security-white.svg);
        }

        .icon.large.security.granite {
            background-image: url(../img/icons/48/48-security-granite.svg);
        }

        .icon.large.self-study.blue {
            background-image: url(../img/icons/48/48-self-study-blue.svg);
        }

        .icon.large.self-study.ultramarine {
            background-image: url(../img/icons/48/48-self-study-ultramarine.svg);
        }

        .icon.large.self-study.white {
            background-image: url(../img/icons/48/48-self-study-white.svg);
        }

        .icon.large.self-study.granite {
            background-image: url(../img/icons/48/48-self-study-granite.svg);
        }

        .icon.large.send-plane.blue {
            background-image: url(../img/icons/48/48-send-plane-blue.svg);
        }

        .icon.large.send-plane.ultramarine {
            background-image: url(../img/icons/48/48-send-plane-ultramarine.svg);
        }

        .icon.large.send-plane.white {
            background-image: url(../img/icons/48/48-send-plane-white.svg);
        }

        .icon.large.send-plane.granite {
            background-image: url(../img/icons/48/48-send-plane-granite.svg);
        }

        .icon.large.shopping.blue {
            background-image: url(../img/icons/48/48-shopping-blue.svg);
        }

        .icon.large.shopping.ultramarine {
            background-image: url(../img/icons/48/48-shopping-ultramarine.svg);
        }

        .icon.large.shopping.white {
            background-image: url(../img/icons/48/48-shopping-white.svg);
        }

        .icon.large.shopping.granite {
            background-image: url(../img/icons/48/48-shopping-granite.svg);
        }

        .icon.large.side-by-side.blue {
            background-image: url(../img/icons/48/48-side-by-side-blue.svg);
        }

        .icon.large.side-by-side.ultramarine {
            background-image: url(../img/icons/48/48-side-by-side-ultramarine.svg);
        }

        .icon.large.side-by-side.white {
            background-image: url(../img/icons/48/48-side-by-side-white.svg);
        }

        .icon.large.side-by-side.granite {
            background-image: url(../img/icons/48/48-side-by-side-granite.svg);
        }

        .icon.large.social-facebook.blue {
            background-image: url(../img/icons/48/48-social-facebook-blue.svg);
        }

        .icon.large.social-facebook.ultramarine {
            background-image: url(../img/icons/48/48-social-facebook-ultramarine.svg);
        }

        .icon.large.social-facebook.white {
            background-image: url(../img/icons/48/48-social-facebook-white.svg);
        }

        .icon.large.social-facebook.granite {
            background-image: url(../img/icons/48/48-social-facebook-granite.svg);
        }

        .icon.large.social-google.blue {
            background-image: url(../img/icons/48/48-social-google-blue.svg);
        }

        .icon.large.social-google.ultramarine {
            background-image: url(../img/icons/48/48-social-google-ultramarine.svg);
        }

        .icon.large.social-google.white {
            background-image: url(../img/icons/48/48-social-google-white.svg);
        }

        .icon.large.social-google.granite {
            background-image: url(../img/icons/48/48-social-google-granite.svg);
        }

        .icon.large.social-messenger.blue {
            background-image: url(../img/icons/48/48-social-messenger-blue.svg);
        }

        .icon.large.social-messenger.ultramarine {
            background-image: url(../img/icons/48/48-social-messenger-ultramarine.svg);
        }

        .icon.large.social-messenger.white {
            background-image: url(../img/icons/48/48-social-messenger-white.svg);
        }

        .icon.large.social-messenger.granite {
            background-image: url(../img/icons/48/48-social-messenger-granite.svg);
        }

        .icon.large.social-linkedin.blue {
            background-image: url(../img/icons/48/48-social-linkedin-blue.svg);
        }

        .icon.large.social-linkedin.ultramarine {
            background-image: url(../img/icons/48/48-social-linkedin-ultramarine.svg);
        }

        .icon.large.social-linkedin.white {
            background-image: url(../img/icons/48/48-social-linkedin-white.svg);
        }

        .icon.large.social-linkedin.granite {
            background-image: url(../img/icons/48/48-social-linkedin-granite.svg);
        }

        .icon.large.social-outlook.blue {
            background-image: url(../img/icons/48/48-social-outlook-blue.svg);
        }

        .icon.large.social-outlook.ultramarine {
            background-image: url(../img/icons/48/48-social-outlook-ultramarine.svg);
        }

        .icon.large.social-outlook.white {
            background-image: url(../img/icons/48/48-social-outlook-white.svg);
        }

        .icon.large.social-outlook.granite {
            background-image: url(../img/icons/48/48-social-outlook-granite.svg);
        }

        .icon.large.social-rss-feed.blue {
            background-image: url(../img/icons/48/48-social-rss-feed-blue.svg);
        }

        .icon.large.social-rss-feed.ultramarine {
            background-image: url(../img/icons/48/48-social-rss-feed-ultramarine.svg);
        }

        .icon.large.social-rss-feed.white {
            background-image: url(../img/icons/48/48-social-rss-feed-white.svg);
        }

        .icon.large.social-rss-feed.granite {
            background-image: url(../img/icons/48/48-social-rss-feed-granite.svg);
        }

        .icon.large.social-twitter.blue {
            background-image: url(../img/icons/48/48-social-twitter-blue.svg);
        }

        .icon.large.social-twitter.ultramarine {
            background-image: url(../img/icons/48/48-social-twitter-ultramarine.svg);
        }

        .icon.large.social-twitter.white {
            background-image: url(../img/icons/48/48-social-twitter-white.svg);
        }

        .icon.large.social-twitter.granite {
            background-image: url(../img/icons/48/48-social-twitter-granite.svg);
        }

        .icon.large.social-youtube.blue {
            background-image: url(../img/icons/48/48-social-youtube-blue.svg);
        }

        .icon.large.social-youtube.ultramarine {
            background-image: url(../img/icons/48/48-social-youtube-ultramarine.svg);
        }

        .icon.large.social-youtube.white {
            background-image: url(../img/icons/48/48-social-youtube-white.svg);
        }

        .icon.large.social-youtube.granite {
            background-image: url(../img/icons/48/48-social-youtube-granite.svg);
        }

        .icon.large.spouse.blue {
            background-image: url(../img/icons/48/48-spouse-blue.svg);
        }

        .icon.large.spouse.ultramarine {
            background-image: url(../img/icons/48/48-spouse-ultramarine.svg);
        }

        .icon.large.spouse.white {
            background-image: url(../img/icons/48/48-spouse-white.svg);
        }

        .icon.large.spouse.granite {
            background-image: url(../img/icons/48/48-spouse-granite.svg);
        }

        .icon.large.start-date.blue {
            background-image: url(../img/icons/48/48-start-date-blue.svg);
        }

        .icon.large.start-date.ultramarine {
            background-image: url(../img/icons/48/48-start-date-ultramarine.svg);
        }

        .icon.large.start-date.white {
            background-image: url(../img/icons/48/48-start-date-white.svg);
        }

        .icon.large.start-date.granite {
            background-image: url(../img/icons/48/48-start-date-granite.svg);
        }

        .icon.large.success.blue {
            background-image: url(../img/icons/48/48-success-blue.svg);
        }

        .icon.large.success.ultramarine {
            background-image: url(../img/icons/48/48-success-ultramarine.svg);
        }

        .icon.large.success.white {
            background-image: url(../img/icons/48/48-success-white.svg);
        }

        .icon.large.success.granite {
            background-image: url(../img/icons/48/48-success-granite.svg);
        }

        .icon.large.swap-view.blue {
            background-image: url(../img/icons/48/48-swap-view-blue.svg);
        }

        .icon.large.swap-view.ultramarine {
            background-image: url(../img/icons/48/48-swap-view-ultramarine.svg);
        }

        .icon.large.swap-view.white {
            background-image: url(../img/icons/48/48-swap-view-white.svg);
        }

        .icon.large.swap-view.granite {
            background-image: url(../img/icons/48/48-swap-view-granite.svg);
        }

        .icon.large.tablet.blue {
            background-image: url(../img/icons/48/48-tablet-blue.svg);
        }

        .icon.large.tablet.ultramarine {
            background-image: url(../img/icons/48/48-tablet-ultramarine.svg);
        }

        .icon.large.tablet.white {
            background-image: url(../img/icons/48/48-tablet-white.svg);
        }

        .icon.large.tablet.granite {
            background-image: url(../img/icons/48/48-tablet-granite.svg);
        }

        .icon.large.take-action.blue {
            background-image: url(../img/icons/48/48-take-action-blue.svg);
        }

        .icon.large.take-action.ultramarine {
            background-image: url(../img/icons/48/48-take-action-ultramarine.svg);
        }

        .icon.large.take-action.white {
            background-image: url(../img/icons/48/48-take-action-white.svg);
        }

        .icon.large.take-action.granite {
            background-image: url(../img/icons/48/48-take-action-granite.svg);
        }

        .icon.large.tap.blue {
            background-image: url(../img/icons/48/48-tap-blue.svg);
        }

        .icon.large.tap.ultramarine {
            background-image: url(../img/icons/48/48-tap-ultramarine.svg);
        }

        .icon.large.tap.white {
            background-image: url(../img/icons/48/48-tap-white.svg);
        }

        .icon.large.tap.granite {
            background-image: url(../img/icons/48/48-tap-granite.svg);
        }

        .icon.large.target.blue {
            background-image: url(../img/icons/48/48-target-blue.svg);
        }

        .icon.large.target.ultramarine {
            background-image: url(../img/icons/48/48-target-ultramarine.svg);
        }

        .icon.large.target.white {
            background-image: url(../img/icons/48/48-target-white.svg);
        }

        .icon.large.target.granite {
            background-image: url(../img/icons/48/48-target-granite.svg);
        }

        .icon.large.tax-planning.blue {
            background-image: url(../img/icons/48/48-tax-planning-blue.svg);
        }

        .icon.large.tax-planning.ultramarine {
            background-image: url(../img/icons/48/48-tax-planning-ultramarine.svg);
        }

        .icon.large.tax-planning.white {
            background-image: url(../img/icons/48/48-tax-planning-white.svg);
        }

        .icon.large.tax-planning.granite {
            background-image: url(../img/icons/48/48-tax-planning-granite.svg);
        }

        .icon.large.team.blue {
            background-image: url(../img/icons/48/48-team-blue.svg);
        }

        .icon.large.team.ultramarine {
            background-image: url(../img/icons/48/48-team-ultramarine.svg);
        }

        .icon.large.team.white {
            background-image: url(../img/icons/48/48-team-white.svg);
        }

        .icon.large.team.granite {
            background-image: url(../img/icons/48/48-team-granite.svg);
        }

        .icon.large.thumbs-up.blue {
            background-image: url(../img/icons/48/48-thumbs-up-blue.svg);
        }

        .icon.large.thumbs-up.ultramarine {
            background-image: url(../img/icons/48/48-thumbs-up-ultramarine.svg);
        }

        .icon.large.thumbs-up.white {
            background-image: url(../img/icons/48/48-thumbs-up-white.svg);
        }

        .icon.large.thumbs-up.granite {
            background-image: url(../img/icons/48/48-thumbs-up-granite.svg);
        }

        .icon.large.tools-to-reach-target.blue {
            background-image: url(../img/icons/48/48-tools-to-reach-target-blue.svg);
        }

        .icon.large.tools-to-reach-target.ultramarine {
            background-image: url(../img/icons/48/48-tools-to-reach-target-ultramarine.svg);
        }

        .icon.large.tools-to-reach-target.white {
            background-image: url(../img/icons/48/48-tools-to-reach-target-white.svg);
        }

        .icon.large.tools-to-reach-target.granite {
            background-image: url(../img/icons/48/48-tools-to-reach-target-granite.svg);
        }

        .icon.large.top-performer.blue {
            background-image: url(../img/icons/48/48-top-performer-blue.svg);
        }

        .icon.large.top-performer.ultramarine {
            background-image: url(../img/icons/48/48-top-performer-ultramarine.svg);
        }

        .icon.large.top-performer.white {
            background-image: url(../img/icons/48/48-top-performer-white.svg);
        }

        .icon.large.top-performer.granite {
            background-image: url(../img/icons/48/48-top-performer-granite.svg);
        }

        .icon.large.transfer.blue {
            background-image: url(../img/icons/48/48-transfer-blue.svg);
        }

        .icon.large.transfer.ultramarine {
            background-image: url(../img/icons/48/48-transfer-ultramarine.svg);
        }

        .icon.large.transfer.white {
            background-image: url(../img/icons/48/48-transfer-white.svg);
        }

        .icon.large.transfer.granite {
            background-image: url(../img/icons/48/48-transfer-granite.svg);
        }

        .icon.large.travellers-insurance.blue {
            background-image: url(../img/icons/48/48-travellers-insurance-blue.svg);
        }

        .icon.large.travellers-insurance.ultramarine {
            background-image: url(../img/icons/48/48-travellers-insurance-ultramarine.svg);
        }

        .icon.large.travellers-insurance.white {
            background-image: url(../img/icons/48/48-travellers-insurance-white.svg);
        }

        .icon.large.travellers-insurance.granite {
            background-image: url(../img/icons/48/48-travellers-insurance-granite.svg);
        }

        .icon.large.trophy.blue {
            background-image: url(../img/icons/48/48-trophy-blue.svg);
        }

        .icon.large.trophy.ultramarine {
            background-image: url(../img/icons/48/48-trophy-ultramarine.svg);
        }

        .icon.large.trophy.white {
            background-image: url(../img/icons/48/48-trophy-white.svg);
        }

        .icon.large.trophy.granite {
            background-image: url(../img/icons/48/48-trophy-granite.svg);
        }

        .icon.large.truck.blue {
            background-image: url(../img/icons/48/48-truck-blue.svg);
        }

        .icon.large.truck.ultramarine {
            background-image: url(../img/icons/48/48-truck-ultramarine.svg);
        }

        .icon.large.truck.white {
            background-image: url(../img/icons/48/48-truck-white.svg);
        }

        .icon.large.truck.granite {
            background-image: url(../img/icons/48/48-truck-granite.svg);
        }

        .icon.large.unlock.blue {
            background-image: url(../img/icons/48/48-unlock-blue.svg);
        }

        .icon.large.unlock.ultramarine {
            background-image: url(../img/icons/48/48-unlock-ultramarine.svg);
        }

        .icon.large.unlock.white {
            background-image: url(../img/icons/48/48-unlock-white.svg);
        }

        .icon.large.unlock.granite {
            background-image: url(../img/icons/48/48-unlock-granite.svg);
        }

        .icon.large.vacation.blue {
            background-image: url(../img/icons/48/48-vacation-blue.svg);
        }

        .icon.large.vacation.ultramarine {
            background-image: url(../img/icons/48/48-vacation-ultramarine.svg);
        }

        .icon.large.vacation.white {
            background-image: url(../img/icons/48/48-vacation-white.svg);
        }

        .icon.large.vacation.granite {
            background-image: url(../img/icons/48/48-vacation-granite.svg);
        }

        .icon.large.virtual-classroom.blue {
            background-image: url(../img/icons/48/48-virtual-classroom-blue.svg);
        }

        .icon.large.virtual-classroom.ultramarine {
            background-image: url(../img/icons/48/48-virtual-classroom-ultramarine.svg);
        }

        .icon.large.virtual-classroom.white {
            background-image: url(../img/icons/48/48-virtual-classroom-white.svg);
        }

        .icon.large.virtual-classroom.granite {
            background-image: url(../img/icons/48/48-virtual-classroom-granite.svg);
        }

        .icon.large.walkabout-observation.blue {
            background-image: url(../img/icons/48/48-walkabout-observation-blue.svg);
        }

        .icon.large.walkabout-observation.ultramarine {
            background-image: url(../img/icons/48/48-walkabout-observation-ultramarine.svg);
        }

        .icon.large.walkabout-observation.white {
            background-image: url(../img/icons/48/48-walkabout-observation-white.svg);
        }

        .icon.large.walkabout-observation.granite {
            background-image: url(../img/icons/48/48-walkabout-observation-granite.svg);
        }

        .icon.large.wallet.blue {
            background-image: url(../img/icons/48/48-wallet-blue.svg);
        }

        .icon.large.wallet.ultramarine {
            background-image: url(../img/icons/48/48-wallet-ultramarine.svg);
        }

        .icon.large.wallet.white {
            background-image: url(../img/icons/48/48-wallet-white.svg);
        }

        .icon.large.wallet.granite {
            background-image: url(../img/icons/48/48-wallet-granite.svg);
        }

        .icon.large.warning.blue {
            background-image: url(../img/icons/48/48-warning-blue.svg);
        }

        .icon.large.warning.ultramarine {
            background-image: url(../img/icons/48/48-warning-ultramarine.svg);
        }

        .icon.large.warning.white {
            background-image: url(../img/icons/48/48-warning-white.svg);
        }

        .icon.large.warning.granite {
            background-image: url(../img/icons/48/48-warning-granite.svg);
        }

        .icon.large.wellness.blue {
            background-image: url(../img/icons/48/48-wellness-blue.svg);
        }

        .icon.large.wellness.ultramarine {
            background-image: url(../img/icons/48/48-wellness-ultramarine.svg);
        }

        .icon.large.wellness.white {
            background-image: url(../img/icons/48/48-wellness-white.svg);
        }

        .icon.large.wellness.granite {
            background-image: url(../img/icons/48/48-wellness-granite.svg);
        }
}

/*********************************************************/
/*********************RESET*******************************/
/*********************************************************/
article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section {
    display: block;
}

a, hr {
    padding: 0;
}

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
}

html {
    scroll-behavior: smooth;
}

ins, mark {
    background-color: #ff9;
    color: #000;
}

body {
    line-height: 1;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:after, blockquote:before, q:after, q:before {
        content: '';
        content: none;
    }

a {
    margin: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
}

ins {
    text-decoration: none;
}

mark {
    font-style: italic;
    font-weight: 700;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
}

input, select {
    vertical-align: middle;
}

a, abbr, address, article, blockquote, caption, h1, h2, h3, h4, h5, h6, li, p, table, td, tr, strong, bold {
    color: #001928;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.4rem;
    letter-spacing: 0;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: none;
}

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-weight: 300;
}

html,
body {
    font-size: 62.5%;
    color: #001928;
    letter-spacing: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'heebo', sans-serif;
    background: #f5f6f7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/****************Global STYLES*********************/
[role="button"] {
    cursor: pointer;
}

    a:focus,
    [role="button"]:focus,
    button:focus,
    a.button:focus,
    span.icon-button:focus,
    .filter-results-list-item-anchor:focus {
        -webkit-box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        box-shadow: 0 0 0 2px #BEDCEB, 0 0 0 3px #005587;
        outline: 0;
    }

a:focus,
span.icon-button:focus,
.filter-results-list-item-anchor:focus {
    border-radius: 4px;
}

.positive {
    color: #0B8224;
}

.negative {
    color: #C81414;
}

.hidden-label {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
}

a.header-skip {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

    a.header-skip:focus {
        position: absolute;
        width: 200px;
        left: 50%;
        margin-left: -100px;
        text-align: center;
        color: #fff;
        overflow: visible;
        clip: auto;
        height: 32px;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.align-center {
    text-align: center !important;
}

.align-right {
    text-align: right !important;
}

.align-left {
    text-align: left !important;
}

.v-align-top {
    vertical-align: top !important;
}

.v-align-middle {
    vertical-align: middle !important;
}

.v-align-bottom {
    vertical-align: bottom !important;
}

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

section:after {
    display: block;
    content: "";
    clear: both;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.center-self {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.no-margin {
    margin: 0 !important;
}

/*****************************************************************************************************************/
/*************************************************SCROLLBAR*******************************************************/
/*****************************************************************************************************************/
.scrollbar {
    scrollbar-width: thin;
}

    .scrollbar::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0);
    }

    .scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: rgba(255, 255, 255, 0);
    }

    .scrollbar::-webkit-scrollbar-thumb {
        background-color: #D9DCE1;
    }

/*****************************************************************************************************************/
/************************************************Overlay Styles****************************************************/
/*****************************************************************************************************************/
.bmo-overlay-dark {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
}

    .bmo-overlay-dark.active {
        display: block;
        z-index: 1040;
    }

.bmo-overlay-light {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    display: none;
}

    .bmo-overlay-light.active {
        display: block;
        z-index: 1040;
    }

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    display: none;
}


.display-2 {
    display: block;
    font-size: 3.6rem;
    line-height: 5.4rem;
}

.white {
    color: #ffffff;
}

.pt-3qu {
    padding-top: 12px;
}

.img-cell {
    vertical-align: middle;
    text-align: center;
}

.img-width {
    width: 80%;
}

.img-width-mob {
    width: 50%;
}

@media only screen and (max-width: 1026px) {
    #ctl00_maincontent_recommended-assest-text {
        display: none;
    }

    #ctl00_maincontent_recommended-asset-img {
        display: none;
    }

    #ctl00_maincontent_recommended-assest-padding-col {
        display: none;
    }

    #ctl00_maincontent_recommended-assest-text-mobile {
        display: table-row !important;
    }

    #ctl00_maincontent_recommended-asset-img-mobile {
        display: table-row !important;
    }
}


@media only screen and (min-width: 1026px) {
    #ctl00_maincontent_recommended-assest-text {
        display: table-cell !important;
    }

    #ctl00_maincontent_recommended-asset-img {
        display: table-cell !important;
    }

    #ctl00_maincontent_recommended-assest-padding-col {
        display: table-cell !important;
    }

    #ctl00_maincontent_recommended-assest-text-mobile {
        display: none !important;
    }

    #ctl00_maincontent_recommended-asset-img-mobile {
        display: none !important;
    }
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.ddlwidth {
    width: fit-content;
}

.textWidth {
    padding-right: 30px;
    text-overflow: ellipsis;
}

#step3cardcontent {
    padding-top: inherit;
}

#ddlfield {
    padding: initial !important;
}

.focusheader:focus {
    box-shadow: 0 0 0 2px #bedceb, 0 0 0 3px #005587;
    border-radius: 4px;
}

a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}

    a.skip-main:focus, a.skip-main:active {
        color: #fff;
        background-color: #000;
        left: -34%;
        top: -1%;
        width: 10%;
        height: auto;
        line-height: 1.2rem;
        overflow: auto;
        margin: 10px 35%;
        border-radius: 15px;
        text-align: center;
        font-size: 1.2em;
        z-index: 999;
    }

#ui-datepicker-div {
    width:30em;
}
    #ui-datepicker-div select.ui-datepicker-month, #ui-datepicker-div select.ui-datepicker-year {
        font-size: 2.5em;
        margin-left:0.4em;
    }
/*****************************************************************************************************************/
/************************************************GLOBAL MEDIA QUERIES*********************************************/
/*****************************************************************************************************************/
/*# sourceMappingURL=global.css.map */