/* 
* 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
*/


/* ===================== 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;
}
/* ---- new home page styling ---- */
.gray-bg-remover {
    background-color: transparent !important;
}
@media (min-width: 1248px) {
    .home-lestest-awards > .grid__inner--layout-444-44{
        width:87% !important;
        margin: 0 auto;
    }
}
/*-- 
.motion-spotlight-slider > .center {
    margin-top: -40px;
}
.motion-slider-wrapper > .left-arrow, .motion-slider-wrapper > .right-arrow {
    bottom: -2%;
} 
--*/
@media (max-width: 1247px) {
    #market-leading-insurance-rewards img.spotlight-picture__image, 
    #market-leading-insurance-rewards .spotlight-picture__image {
        max-width: 535px !important;
    }
}
#motion-main-content {
    overflow-x: hidden;
}