#divPromo {
   
}

    #divPromo.loading .bf_logo_loader {
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    #divPromo .back_bar {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        position: -webkit-sticky;
        position: sticky;
        top: 3.75rem
    }

        #divPromo .back_bar .back_wrapper {
            cursor: pointer;
            margin-left: .625rem
        }

            #divPromo .back_bar .back_wrapper .icon-back {
                font-size: 1.5625rem;
                text-decoration: none
            }

            #divPromo .back_bar .back_wrapper:hover .icon-back {
                -webkit-filter: brightness(1.2);
                filter: brightness(1.2)
            }

        #divPromo .back_bar h1 {
            font-size: 1.25rem;
            color: var(--text);
            margin-left: 1.1875rem
        }

    #divPromo .content {
        margin: 0.1rem auto 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 1.1rem;
        -webkit-column-gap: 1.1rem;
        -moz-column-gap: 1.1rem;
        column-gap: 1.1rem;
        max-width: 100rem
    }

    #divPromo .bf_skeleton {
        width: 100%;
        height: 11.25rem
    }

    #divPromo .promocontainer {
        background: var(--quaternary);
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        #divPromo .promocontainer img {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            width: 100%
        }

        #divPromo .promocontainer h2 {
            margin-top: 1.1rem;
            color: var(--secondary);
            font-size: 24px;
            font-weight: 800;
            margin-bottom:0px!important;
        }

        #divPromo .promocontainer p {
            margin-top: .5rem;
            color: var(--lightfont);
            font-size: 16px;
        }

        #divPromo .promocontainer .more_wrapper {
            width: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -webkit-justify-content: flex-end;
            -moz-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            -webkit-box-align: end;
            -webkit-align-items: flex-end;
            -moz-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end
        }

            #divPromo .promocontainer .more_wrapper .promobutton {
                margin-top: .625rem
            }

@media screen and (max-width: 734px) {
    #divPromo .content {
        padding: .625rem;
        grid-template-columns: 1fr;
        row-gap: .625rem;
    }
    #divPromo .contentDetails {
        padding: .625rem;
        grid-template-columns: 1fr;
        row-gap: .625rem;
    }
}

.promocontainer {
    background: var(--surface);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 100%;
    padding: 1.1rem;
    width: 100%;
}

.bf_app_bar {
    background: var(--secondary);
    -webkit-box-shadow: 0 .1875rem .375rem rgba(0, 0, 0, .32);
    -moz-box-shadow: 0 .1875rem .375rem rgba(0, 0, 0, .32);
    box-shadow: 0 .1875rem .375rem rgba(0, 0, 0, .32);
    height: 3.75rem;
    width: 100%;
}

.icon-back:before {
    content: "\e902";
}

.promobutton.contained:hover {
    border: 2px solid var(--primary);
    -webkit-filter: unset;
    filter: unset;
}

.promobutton.contained {
    background: var(--primary);
    border: 2px solid var(--primary);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--lightfont);
    -webkit-transition: -webkit-filter .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
    -moz-transition: filter .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
    -o-transition: filter .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
    transition: -webkit-filter .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
    transition: filter .2s ease-in-out, background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
}

.promobutton.contained, .promobutton.gradient {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    height: 3.375rem;
    min-width: 9.25rem;
    padding: 0 .625rem;
    text-transform: uppercase;
    font-size: 16px;
}

#divPromo .promoDetails {
    background: var(--tertiary);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#divPromo .contentDetails {
    margin: 0.1rem auto 0 auto;
    display: grid;
    grid-template-columns: 1fr ;
    row-gap: 1.1rem;
    -webkit-column-gap: 1.1rem;
    -moz-column-gap: 1.1rem;
    column-gap: 1.1rem;
    max-width: 100rem
}