/* 
* Table of Contents
*
* 1. Planes
* 2. Lists
*    Check-list
* 3. Breadcrumbs
* 4. Call to Action
* 5. Blog Card
* 6. Backgrounds and Colors
* 7. Utility Classes
* 8. Blog landing Template
* 9. Custom tab styling
* 10. Mom App logos
* 11. Motion UI - Angular apps
* 12. Info Cards Expander
* 13. Resource Centre
* 14. ChatBots
* 15. Media Queries

* 16. Custom

*/


/* ===================== Base Classes ===================== */
a:focus>.material-icons,
a:focus>h1,
a:focus>h2, 
a:focus>h3,
a:focus>h4,
a:focus>h5,
a:focus>h6,
a:hover>.material-icons,
a:hover h1,
a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6 {
    color: inherit;
}

/* ===================== 1. Planes ===================== */
.plane-w-auto{
    width:auto !important;
    min-width: 224px !important;
}

/* ===================== 2. Lists ===================== */
ul.check-list{
  list-style: none;
}

/* ===================== 3. Breadcrumbs ===================== */
/*.breadcrumb-item+.breadcrumb-item:nth-child(2) {
    text-transform: capitalize;
}*/
.motion-breadcrumbs { 
    height: auto !important;
    width: 100% !important;
}
.breadcrumb .breadcrumb-item a {
    white-space: unset ;
}
.breadcrumb {
flex-wrap: wrap;
}

/* ===================== 3. Call to Action ===================== */
@media (min-width: 992px) {
.call-to-action-btn-container {
    display: inline-flex !important;
}
}
.call-to-action-btn-container > .mdc-btn-container {
    margin-left: 10px;
    margin-right: 10px;
}

/* ===================== 4. Blog Card ===================== */
/*.blog-card a {
    text-decoration: none;
}*/
.no-shadow-blog-cards .blog-card .motion-picture--responsive {
    box-shadow: none;
}
.blog-card .motion-picture--responsive {
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, .15), 0 1px 5px 0 rgba(0, 0, 0, .15), 0 2px 10px 0 rgba(0, 0, 0, .16);
}
.blog-card .time_stamp {
    text-transform: uppercase;
}
.blog-card .mb-4 {
    margin-bottom: 10px!important; 
    width: 100%;
}

/* ===================== 5. Backgrounds and Colors ===================== */
.bg-primary-blue a,
.bg-primary-blue a > span {
    color: var(--mdc-theme-on-primary,#fff);
}

/* ===================== 6. utility Classes ===================== */
.play:before {
    background: inherit;
    border-radius: 5%/50%;
    bottom: 9%;
    left: -5%;
    right: -5%;
    top: 9%;
}
.play:after,
.play:before {
    content: "";
    position:absolute;
}
.play:after {
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 1em 0 1em 1.732em;
    font-size: .65em;
    height: 0;
    margin: -11px 0 0 -6px;
    top: 50%;
    left: 50%;
    width: 0;
}

/* ======================= 8. Blog landing template styling =====================*/
#featured-heading {
    margin-bottom: -31px;
    margin-top: -21px;
}
.cus-height-blog-curtain > .motion-cardbanner-container {
    min-height: 520px !important;
}
.cus-height-blog-curtain > .motion-cardbanner-container > .motion-cardbanner {
    padding-top: 128px !important;
}
.cardsheadingspace {
    margin-top: -56px;
}
#media-center-header{
    margin-top: 73px;
    margin-bottom: 103px;
}

/* ======================= 9. Custome tab styling =====================*/
.mdc-tab-barr .mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
    color: #ff3a30;
    font-weight: 400!important;
    color: #1a1a1a!important
}

.mdc-tab-barr .mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: #de2329
}

.mdc-tab-barr .mdc-tab.mdc-tab--active .mdc-tab-indicator__content--underline {
    background-color: #de2329
}
.mdc-tab-indicator >.mdc-tab-indicator__content--underline {
    background-color: #ff3a30;
    height: 2px;
}
.mdc-tab-barr.mdc-tab-bar--fixed {
    position: fixed;
    z-index: 5;
    background-color: #f9f9f9;
    top: 48px;
    height: 47px;
    left: 0
}
.mdc-tab-barr.mdc-tab-bar--fixed,.mdc-tab-bar.mdc-tab-bar--fixed-scrolled {
    -webkit-transition: box-shadow .2s linear;
    transition: box-shadow .2s linear
}
.mdc-tab-barr.mdc-tab-bar--fixed-scrolled {
    box-shadow: 0 4px 4px 0 rgba(0,0,0,.2),0 3px 3px 0 rgba(0,0,0,.08),0 1px 1px 0 rgba(0,0,0,.08)
}

@media (max-width: 804px) {
    .mobileZlayoutPad .mobilePad,
    #in-page-banner,
    #section-MomentumFutures .motion-homebanner__elements{
        padding-left:0px !important;
        padding-right:0px !important;
    }
    .app-banner {
        height: 700px !important;
    }
    .app-banner .mdc-btn-container {
        margin-top: 16px!important;
    }
    .motion-homebanner__elements {
        padding-left:16px !important;
        padding-right:16px !important;
    }

    #livestream-second-order{
        padding-top: 230px;
    }
    #blue-book-livestream {
        order: 1;
        position: absolute;
        top: 121px;
        width: 100%;
    }
}
.mdc-tab .mdc-tab__icon, .mdc-tab .mdc-tab__text-label {
    text-transform: unset;
}
.motion-homebanner {
    background-position: center;
}
.app-banner{
    aspect-ratio: 16 / 9 !important;
    min-height: auto!important;
}
.mdc-top-app-bar__toplinks {
    padding: 6px 16px !important;
}
#app-bar-login {
    color: #de2329 !important;
}
#will-drafting-banner > div > .section-spacing--tier-1 {
    padding-top: 0px !important;
    margin-bottom: 0px !important;
}
@media (max-width: 768px) {
    .rc-mdc-expander .mdc-list-item {
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }
    #ppfm-download {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}
.rc-download-card{
    margin-bottom: -5px !important;
}

@media (min-width: 1248px) {
    .motion-z-layout__image {
        width:100% !important;
    }
}

/* ======================= 10. Mom App Logos =====================*/
@media (max-width: 767px) {
    .mdc-typography--body1+.cta-appstore,
    .mdc-typography--body2+.cta-appstore,
    .mdc-typography--body1+p+.cta-appstore,
    .mdc-typography--body2+p+.cta-appstore {
        /*flex-flow: column;*/
        flex-wrap: wrap;
    }
    .mdc-typography--body1+.cta-appstore .cta-appstore__btn:last-child,
    .mdc-typography--body2+.cta-appstore .cta-appstore__btn:last-child,
    .mdc-typography--body1+p+.cta-appstore .cta-appstore__btn:last-child,
    .mdc-typography--body2+p+.cta-appstore .cta-appstore__btn:last-child {
        margin: 0;
    }
    .mdc-typography--body1+.cta-appstore .cta-appstore__btn:not(:last-child),
    .mdc-typography--body2+.cta-appstore .cta-appstore__btn:not(:last-child),
    .mdc-typography--body1+p+.cta-appstore .cta-appstore__btn:not(:last-child),
    .mdc-typography--body2+p+.cta-appstore .cta-appstore__btn:not(:last-child) {
        margin-bottom: 8px;
    }
    .mdc-typography--body1+.cta-appstore .cta-appstore__btn:first-child,
    .mdc-typography--body2+.cta-appstore .cta-appstore__btn:first-child,
    .mdc-typography--body1+p+.cta-appstore .cta-appstore__btn:first-child,
    .mdc-typography--body2+p+.cta-appstore .cta-appstore__btn:first-child {
        margin-right: 16px;
    }
    .mdc-typography--body1+.cta-appstore .cta-appstore__btn:nth-child(2),
    .mdc-typography--body2+.cta-appstore .cta-appstore__btn:nth-child(2),
    .mdc-typography--body1+p+.cta-appstore .cta-appstore__btn:nth-child(2),
    .mdc-typography--body2+p+.cta-appstore .cta-appstore__btn:nth-child(2) {
        margin-right: 0;
    }
}

/* ======================= 11. Motion UI - Angular apps =====================*/
/* Upgraded Angular apps - aligned form fields with current Motion UI */

.motion-form-field .mat-form-field-required-marker {
    display: none !important;
}
.mlr-0 {
    margin: 0 auto;
}
.mdc-button,
.mdc-button--outlined {
 overflow: hidden !important;
 border-width: 1px !important;

}

/* ======================= 12. Info Cards Expander =====================*/
.expandable_content--open .card-panel__data-item.bt-1-motion-grey--light:first-child {
    border-top: none;
}

/* ======================= 13. Resource Centre =====================*/
@media (min-width: 1248px) {
    #investo_rc_menu .mdc-drawer__accordioncontent .mdc-list-item:first-child,
    #mim_resource_centre .mdc-drawer__accordioncontent .mdc-list-item:first-child,
    #wealth_resource_centre .mdc-drawer__accordioncontent .mdc-list-item:first-child {
        display: none;
    }
    #myfinancialtipsandresources > div > div > div > .motion-chip-container {
        width: 60%;
        margin: 0 auto;
    }
    
}
#full_page_rc_accordions .grid {
    padding-right: 0;
    padding-left: 0;
}

/* ======================= 14. ChatBots =====================
@media (max-width: 767px) {
    iframe#launcher {
        height: 64px !important;
        min-height: 64px !important;
    }
    iframe[title="Message from company"] {
        height: 50.2812px !important;
        min-height: 50.2812px !important;
    }
    iframe[title="Close message"] {
        height: 35.7143px !important;
        min-height: 35.7143px !important;
    }
}
iframe#launcher {
    width: 64px!important;
    min-height: 60px !important;
    height: 64px!important;
}
iframe[title="Message from company"] {
    width: 144.82px!important;
    min-height: 40px !important;
    height: 44px!important;
}
iframe[title="Close message"] {
    width: 40px!important;
    min-height: 35.7143px !important;
    height: 40px !important;
}*/

/* ======================= 15. Media Queries =====================*/
@media (max-width: 839px) {
    .headline5-mobile-size {
        font-size: 1rem!important;
    }
    .rc-download-card .mdc-card__primary-action .mdc-list-item {
        height: auto;
    }
    
}
@media (min-width: 1248px) {
    .grid__inner--layout-b10b>.grid__cell {
        grid-column: 2 / span 10;
    }
    .px-4 {
        padding: 0 32px;
    }
    
}


.professionals__section {
	-webkit-column-break-inside: avoid;
	break-inside: avoid-column;
	page-break-inside: avoid;
	margin-bottom: 24px;
}
#professionals {
	-webkit-column-gap: 20px;
	column-gap: 20px;
}

/* Phone */
@media (max-width: 803.98px) {
	.professionals--side-spacing {
		margin-left: 16px;
		margin-right: 16px;
	}
	#professionals {
		-webkit-columns: 256px;
		columns: 256px;
	}

}


/* Tablet */
@media (min-width: 804px) and (max-width: 1283.98px) {
	.professionals--side-spacing {
		margin-left: 56px;
		margin-right: 56px;
	}
	#professionals {
		-webkit-columns: 300px 3;
		columns: 300px 3;
	}


}

/* Desktop */
@media (min-width: 1284px) {
	.professionals--side-spacing {
		margin-left: 144px;
		margin-right: 144px;
	}
	#professionals {
		-webkit-columns: 300px 3;
		columns: 300px 3;
	}
	
}
		
#momentum-investo > div > div > section > div > div > .mobilePad,
#momentum-investo  .mobilePad{
    padding:0px !important;
}
#ppfm-download{
    padding: 0px 0px 30px 0px!important;
}
@media (max-width: 500px) {	
    .cta-appstore__btn {
        margin-bottom: 16px;
    }
}
@media (max-width: 1247px) {
    #branch-maps .grid__inner--layout-b10b {
         grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    #motion-footer__app-stores .cta-appstore__btn {
        margin-bottom: 16px;
    }
    #tools-and-calculators-cards,
    #brochures-unit-trusts-header-section > div > div > section.grid,
     #brochures-unit-trusts-header-section > div > div > .grid,
    #mfp-accordions .grid,
    #rc_accordions .grid {
        padding-left:0px !important;
        padding-right:0px !important;
    }

}
#Tools-and-calculators-rc-cards .mdc-card{
    margin-bottom:16px !important;
}
.reduce-spaing30 {
    margin-top:-120px !important;
}
.section-spacing--tier-top-1{
    padding-top: 72px;
    margin-bottom: 0px;
}

/* ======================= 16. Custom =====================*/
.hide {
    display:none !important;
}

.section-spacing--tier-1 {
    padding-top: 100px;
}

.mdc-text-link:last-child a {
    color: #000;
}


.mdc-top-app-bar__toplinks span{
    border-right:1px solid black;
    padding-left: 20px;
}

.mdc-top-app-bar--dense .mdc-top-app-bar__col{
    height:74px;
}

.motion-breadcrumbs  {
    top:74px;
}

img.brandLogo{
    position:relative;
    left:-100px;
}
                .flex-wrap {
                  flex-wrap:wrap !important;
                }
                .motion-social-media a img {
                   width: 32px;
                   height:32px;
                }

                .motion-carousel__indicator {
                  transition: background-color 0.3s ease !important;
                }

                .motion-carousel-indicators .active, .motion-carousel-indicators .motion-carousel__indicator:hover {
                  background-color: #fcd3c1!important;
                }
                .motion__popup-notice {
                    opacity: 0;
                    transition: opacity 0.3s ease !important;
                }

                .motion__popup-notice.visible,
                .motion__popup-notice.slidein-up  {
                    opacity: 1!important;
                }

#motion-footer__caption {
        border-top: 1px solid rgba(0, 0, 0, .13);
        margin-top:16px;
}

/* ======================= Start carousel =====================*/
.carousel {
    position: relative;
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-inner::after {
    display: block;
    clear: both;
    content: "";
}
.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
.carousel-item {
    transition: none;
}
}
.carousel-item.active, .carousel-item-next, .carousel-item-prev {
    display: block;
}
/* rtl:begin:ignore */
.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end {
    transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start {
    transform: translateX(-100%);
}
/* rtl:end:ignore */
.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
}
.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end {
    z-index: 1;
    opacity: 1;
}
.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {
.carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end {
    transition: none;
}
}
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: none;
    border: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
.carousel-control-prev, .carousel-control-next {
    transition: none;
}
}
.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 0.9;
}
.carousel-control-prev {
    left: 0;
}
.carousel-control-next {
    right: 0;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.5;
    transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
.carousel-indicators [data-bs-target] {
    transition: none;
}
}
.carousel-indicators .active {
    opacity: 1;
}
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 1.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}
.carousel-dark .carousel-control-prev-icon, .carousel-dark .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: #000;
}
.carousel-dark .carousel-caption {
    color: #000;
}

.motion-homebanner__heading-body--text-on-dark strong {
    color: unset !important;
}
.motion-homebanner {
    position: relative !important;
    height: 582px;
    margin-top: -25px;
}
.motion-carousel-indicators .motion-carousel__indicator:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
margin-left: 3px !important;
}

@media (min-width: 1248px) {
.motion-homebanner__heading-body {
    margin: 10% 0 18% !important
}
#Download-app {
    margin-top: 9px;
}
#Momentum-careers {
    margin-top: -48px;
    margin-bottom: 72px;
}
.call-to-action-btn-container {
    margin-top: -32px !important
}
}
#XlargeCarousel, #largeCarousel, #MidCarousel, #SmallCarousel {
    display: none;
}

@media (max-width: 803px) {
#SmallCarousel {
    display: block !important;
}
.motion-homebanner {
    background-position: center;
    aspect-ratio: 48 / 55;
}
.motion-carousel {
    height: 550px !important;
}
.cus-top-h {
    margin-top: 40px !important;
}
}

@media (min-width: 804px) and (max-width: 1247px) {
#MidCarousel {
    display: block !important;
}
.cus-top-h {
    margin-top: 40px !important;
}
}

@media (min-width: 1248px) and (max-width: 2000px) {
#largeCarousel {
    display: block !important;
}
}

@media (min-width: 2001px) {
#XlargeCarousel {
    display: block !important;
}
}
.text-white, .text-white p {
    color: white !important;
}
.white-back{
    background-color:#FFF;
}
.text-black, .text-black p {
    color: #000 !important;
}
.text-navy, .text-navy p {
    color: #036!important
}

.flex-wrap {
        flex-wrap: wrap !important;
    }

    .motion-social-media a img {
        width: 32px;
        height: 32px;
    }

    .motion-carousel__indicator {
        transition: background-color 0.3s ease !important;
    }

    .motion-carousel-indicators .active,
    .motion-carousel-indicators .motion-carousel__indicator:hover {
        background-color: #fcd3c1 !important;
    }

    .motion__popup-notice {
        opacity: 0;
        transition: opacity 0.3s ease !important;
    }

    .motion__popup-notice.visible,
    .motion__popup-notice.slidein-up {
        opacity: 1 !important;
    }

/* ======================= END carousel =====================*/

.mdc-expander__content-inner > .mdc-expander__content-inner{padding:0px !important;}
.mdc-expander .py-0 {
    padding-top: 0;
    padding-bottom: 0;
}
.mdc-expander .py-1 {
    padding-top: 8px;
    padding-bottom: 8px;
}
.mdc-expander .py-2 {
    padding-top: 16px;
    padding-bottom: 16px;
}
.mdc-expander .py-3 {
    padding-top: 24px;
    padding-bottom: 24px;
}
.mdc-expander .py-4 {
    padding-top: 32px;
    padding-bottom: 32px;
}
.mdc-expander .px-0 {
    padding-right: 0;
    padding-left: 0;
}
.mdc-expander .px-1 {
    padding-right: 8px;
    padding-right: 8px;
}
.mdc-expander .px-2 {
    padding-right: 16px;
    padding-left: 16px;
}
.mdc-expander .px-3 {
    padding-right: 24px;
    padding-left: 24px;
}
.mdc-expander .px-4 {
    padding-right: 32px;
    padding-left: 32px;
}



    @media (min-width: 1240px) {
        .five-plus-links .motion-sidetab_content {
            height: 100%;
            min-height: 360px;
        }
    }