@media (width>=768px) and (width<=991.98px) {
    .headline-medium,p.headline-medium {
        font-size: 28px;
        font-weight: 700;
        line-height: 160%
    }

    .headline-small,.title-large,p.headline-small,p.title-large {
        font-size: 24px;
        font-weight: 700;
        line-height: 160%
    }

    .title-large,p.title-large {
        font-size: 20px
    }

    .title-medium,p.title-medium {
        font-size: 16px;
        font-weight: 600;
        line-height: 160%
    }

    .body-large,.body-medium,p.body-large,p.body-medium {
        font-size: 18px;
        font-weight: 400;
        line-height: 180%
    }

    .body-medium,p.body-medium {
        font-size: 16px
    }

    .body-small,.card-p,p.body-small {
        font-size: 14px;
        font-weight: 400;
        line-height: 180%
    }

    .card-p {
        font-size: 16px
    }

    .blu-btn {
        font-size: .875rem;
        line-height: 170%
    }

    .blu-top-bar {
        padding: .75rem 1.5rem
    }

    .blu-topbar-image {
        background: url(../banner/blu-banner-blugame-mobile.jpg) 0/cover
    }

    .blu-topbar {
        padding: 26px 24px
    }

    .px-36 {
        padding: 0 24px
    }

    .px-96 {
        padding: 0
    }

    .navbar-toggler {
        margin: 12px;
        padding: 0
    }

    .navbar-toggler-icon {
        width: 24px;
        height: 24px
    }

    .blu-brand {
        margin-left: 0
    }

    .navbar-brand {
        margin: 12px;
        padding: 0
    }

    header .blu-nav-link li,header .nav-link,header .navbar li a {
        text-align: right
    }

    header .navbar-expand-lg .navbar-nav .nav-link {
        padding: .5rem
    }

    header .dropdown-menu {
        box-shadow: none;
        border: 0;
        padding: .5rem
    }

    .nav-item-underline:after {
        border: 0
    }

    .navbar-nav:last-child {
        margin: 1rem
    }

    .blu-hero-title {
        font-size: 36px
    }
}

@media (width<=575.98px) {
    .card-p {
        font-size: 16px;
        font-weight: 400;
        line-height: 180%
    }

    .blu-btn {
        font-size: .875rem;
        line-height: 170%
    }

    .blu-top-bar {
        padding: .75rem 1.5rem
    }

    .blu-topbar-image {
        background: url(../banner/blu-banner-blugame-mobile.jpg) 0/cover
    }

    .px-36 {
        padding: 0 24px
    }

    .px-96 {
        padding: 0
    }

    .navbar-toggler {
        margin: 12px;
        padding: 0
    }

    .navbar-toggler-icon {
        width: 24px;
        height: 24px
    }

    .blu-brand {
        margin-left: 0
    }

    .navbar-brand {
        margin: 12px;
        padding: 0
    }

    header .blu-nav-link li,header .nav-link,header .navbar li a {
        text-align: right
    }

    header .navbar-expand-lg .navbar-nav .nav-link {
        padding: .5rem
    }

    header .dropdown-menu {
        box-shadow: none;
        border: 0;
        padding: .5rem
    }

    .nav-item-underline:after {
        border: 0
    }

    .navbar-nav:last-child {
        margin: 1rem
    }

    .blu-hero-title {
        font-size: 36px;
        font-weight: 800;
        line-height: 160%
    }

    .blu-hero-lead {
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 180%
    }

    .mt-sm-32 {
        margin-top: 32px!important
    }

    .mb-sm-8 {
        margin-bottom: 8px!important
    }

    .card-title,.section-title {
        color: #081f3c;
        margin: 12px 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 160%
    }

    .section-lead {
        text-align: center;
        color: #718e9c;
        margin: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 180%
    }

    .card-video-section {
        min-height: 430px;
        padding: 0;
        overflow: hidden
    }

    .card-colors-selection {
        top: 85%
    }

    .rounded-box {
        padding: 2rem
    }

    .rounded-card-title,h2.rounded-card-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 160%!important
    }

    .rounded-card-text {
        font-size: 16px;
        font-weight: 400;
        line-height: 180%
    }

    .blu-card-btn,.rounded-box-btn {
        width: 3rem;
        height: 3rem
    }

    .blue-back {
        background-position-x: -50%
    }

    .blu-line-chat-group {
        max-height: 300px
    }

    .blu-line-chat-item:nth-child(2n) {
        margin-right: 20%
    }

    .blu-line-chat-item {
        width: 213px
    }

    .bluLine_chat-body {
        border-radius: 8px;
        padding: 1rem
    }

    .bluLine_chat-body p {
        margin: 6px 0 0;
        font-size: 10px;
        font-weight: 500;
        line-height: 170%
    }

    .bluLine_chat-body p.title {
        font-size: 8px;
        font-weight: 500;
        line-height: 160%
    }

    .bluline-description {
        padding-right: 56px
    }

    .blu-card-colors-animate {
        font-size: 16px;
        font-weight: 600;
        line-height: 160%
    }

    .blu-card-other-colors {
        width: 50%
    }

    .tweet-item {
        width: 314px;
        height: 135px;
        padding: 1rem
    }

    @keyframes tweet-run-right {
        0% {
            left: 0;
            transform: translate(-314px)
        }

        to {
            left: 100%
        }
    }

    @keyframes tweet-run-left {
        0% {
            right: 0;
            transform: translate(314px)
        }

        to {
            right: 100%
        }
    }

    .teaser-content {
        margin: 0;
        padding: 32px 24px
    }

    .teaser-content p {
        margin: 0
    }

    .teaser-title {
        margin-bottom: 8px;
        font-size: 24px;
        font-weight: 700;
        line-height: 160%
    }

    p.teaser-text {
        max-width: 100%;
        margin: 0 0 1rem;
        font-size: 14px;
        font-weight: 400;
        line-height: 180%
    }

    .filter-button {
        max-width: 115px
    }

    .blu-accordion-button {
        padding: 24px 1rem;
        font-weight: 600;
        line-height: 160%;
        font-size: 16px!important
    }

    .blu-accordion-body {
        padding: 0 31px 0 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 170%
    }

    .footer-copyright,.footer-sign {
        margin-top: 1.5rem
    }

    .blu-topbar {
        padding: 0
    }
}

@media (width>=768px) and (width<=991.98px) {
    .blu-topbar {
        padding: 0
    }
}
