/*  
---------------------------------------------------
Page Components - Small Breakpoint
---------------------------------------------------  
*/


/*  
---------------------------------------------------
Sticky

Choose preset class 'Sticky' to sticky anything
---------------------------------------------------  
*/

body.no-header .item_block.sticky,
body:not(.no-header) .sticky { 
    top: calc(var(--small-header) - 1px);
}

body.no-header .item_block.sticky,
body:not(.no-header) .sticky { 
    top: calc(var(--small-header) - 1px);
}

html.nav-down body:not(.show_header-on-scroll-sm) .item_block.sticky { 
    top: calc(var(--base-half-spacing) - 1px);
}


/* No header or hide header on scroll */

html.nav-up body.hide_header-on-scroll-lg .sticky,
body.no-header .sticky { 
    top: -1px;
}


@media (min-width:0) and (max-width:767px) {
    .item_block.sticky,
    body:not(.no-header) .item_block.sticky { 
        position:relative!important;
        top:0!important;
    }

}

@media (min-width:768px) {

    body.no-header .item_block.sticky,
    html.nav-down body:not(.show_header-on-scroll-sm) .item_block.sticky { 
        top: calc(var(--base-half-spacing) - 1px);
    }

    body:not(.no-header) .item_block.sticky { 
        top: calc(var(--small-header) + var(--base-half-spacing) - 1px);
    }

    /* Extra space for when stick anchor nav is present */

    body.no-header .component.usn_cmp_anchornavigation.sticky ~ .component .item_block.sticky,
    html.nav-down body:not(.show_header-on-scroll-sm) .component.usn_cmp_anchornavigation.sticky ~ .component .item_block.sticky { 
        top: calc(var(--small-header) + var(--base-half-spacing) - 1px);
    }

    body:not(.no-header) .component.usn_cmp_anchornavigation.sticky ~ .component .item_block.sticky { 
        top: calc((var(--small-header) * 1.5) + var(--base-half-spacing) - 1px);
    }


    /* No header or hide header on scroll */

    body.no-header .item_block.sticky { 
        top: calc(var(--base-half-spacing) - 1px);
    }

}

#bannerPracticalTips {
    aspect-ratio: 1260 / 250;
}

@media (min-width: 0) and (max-width: 599px) {
    #bannerPracticalTips .breadcrumb-trail ol.breadcrumb li.breadcrumb-item {
        flex: none !important;
    }
    #bannerPracticalTips .breadcrumb-trail ol.breadcrumb li.breadcrumb-item span {
        color: #fff!important;
    }
    #bannerPracticalTips .breadcrumb-trail ol.breadcrumb li.active {
        display: none !important;
    }

}

@media (max-width: 1440px) {
    #bannerPracticalTips h1 {
        font-size: 28px !important;
        word-break: break-word;
    }
/*
    #commingsoon {
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: 24px;
        margin-right: 24px;
    }*/



    #bannerPracticalTips {
/*        aspect-ratio: 375 / 308 !important;*/
/*        height: 375px !important;*/
        display: flex !important;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        border-radius: unset !important;
    }

        #bannerPracticalTips .breadcrumb-trail ol.breadcrumb {
            display: flex !important;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

    #bannerPreacticalTips .breadcrumb-trail ol.breadcrumb li.breadcrumb-item {
        flex: none !important;
    }

    #bannerPracticalTips .inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: 24px;
        margin-right: 24px;
    }

    #bannerPracticalTips h1 {
        font-size: 28px !important;
    }
}
@media (max-width: 768px) {
    #bannerPracticalTips h1 {
        font-size: 28px !important;
        word-break: break-word;
        max-width: 375px !important;
    }
    #commingsoon {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }



    #bannerPracticalTips {
        aspect-ratio: 375 / 308 !important;
        height: 375px !important;
        display: flex !important;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        border-radius: unset !important;
    }
        #bannerPracticalTips .breadcrumb-trail ol.breadcrumb {
            display: flex !important;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

    #bannerPreacticalTips .breadcrumb-trail ol.breadcrumb li.breadcrumb-item {
        flex:none !important;
    }
    #bannerPracticalTips .inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
        margin-left: 24px;
        margin-right: 24px;
    }

        #bannerPracticalTips h1 {
            font-size: 28px !important;
        }
}

.button-info-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    /* CTA */
    background: #00ACC6;
    border-radius: 100px;
    width: 264px;
    height: 33px;
    opacity: 1;
    border-radius: 100px;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    color: #fff;
    margin: 60px auto;
}

.resource-media-inner {
    justify-content: flex-start!important;
}

.resource-media-breadcrumb .breadcrumb-trail ol.breadcrumb li.breadcrumb-item a,
.resource-media-breadcrumb .breadcrumb-trail ol.breadcrumb li.breadcrumb-item > span {
    color: #fff !important;
}

.resource-media-breadcrumb .breadcrumb-trail ol.breadcrumb {
    background-color: transparent !important;
}

.resource-media-breadcrumb .breadcrumb-item.active {
    display: none !important;
}
.resource-media-breadcrumb {
    padding-left: 0;
    padding-right: 0;
}