@font-face {
    font-family: Lato;
    src: local("Lato"), url(../fonts/Lato/Lato-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: local("Lato"), url(../fonts/Lato/Lato-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: local("Lato"), url(../fonts/Lato/Lato-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: local("Lato"), url(../fonts/Lato/Lato-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: local("Lato"), url(../fonts/Lato/Lato-Black.ttf) format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Lato;
    src: local("Lato"), url(../fonts/Lato/Lato-BlackItalic.ttf) format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(../fonts/OpenSans/OpenSans-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(../fonts/OpenSans/OpenSans-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(../fonts/OpenSans/OpenSans-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(../fonts/OpenSans/OpenSans-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(../fonts/OpenSans/OpenSans-ExtraBold.ttf) format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Open Sans";
    src: local("Open Sans"), url(../fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf) format("truetype");
    font-weight: 800;
    font-style: italic;
    font-display: swap
}

#main-nav .nav-link,
body {
    font-family: "Open Sans", sans-serif;
    font-size: .9rem;
    color: #000
}

body,
main {
    background-color: #fff
}

.b1-bbend:after,
.b1-bbstart:after {
    content: "";
    position: absolute;
    height: 28px;
    width: 40px
}

.text-truncate-2-lines,
.text-truncate-3-lines,
.text-truncate-4-lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.b1-bg-red,
.btn-danger,
.paging.active {
    background-color: #d01e27
}

.avatar-inner img,
.lazy {
    object-fit: cover
}

.fit-ratio {
    object-fit: cover;
    width: 100%;
    height: 100%
}

#canvasAccordion .accordion-button,
#canvasAccordion .accordion-button:focus {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0var (--bs-accordion-border-color)
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Lato, sans-serif;
    font-weight: 700;
    color: #232323;
    letter-spacing: .03rem
}

a {
    text-decoration: none !important;
    color: #202020
}

.body-content a {
    color: #0d6efd
}

.body-content {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem
}

.body-content p {
    margin-top: 0;
    margin-bottom: 1.3rem;
    color: #1a1a1a
}

.body-content h2,
.body-content h3,
.body-content h4 {
    font-size: 1.15rem !important;
    line-height: 1.5 !important;
    font-weight: 700
}

.body-content img {
    width: 100%;
    height: auto
}

.yellowColor {
    color: #fdb446
}

.fs-tag {
    font-size: .9rem
}

.b1-fs-std {
    font-family: "Open Sans";
    font-size: .95rem;
    color: #232323
}

.b1-grid {
    width: 1008px;
    min-width: 1008px
}

.b1-grid > .row:first-of-type > .col:first-of-type{
    max-width: 688px;
}

.b1-gradient {
    background-image: linear-gradient(to right, #d01e27, #072569)
}

.b1-gradient-50 {
    background-image: linear-gradient(to right, #d01e2755, #07256955)
}

.b1-gradient-10 {
    background-image: linear-gradient(to right, #d01e2722, #07256922)
}

.b1-login-gradient {
    background-image: linear-gradient(to bottom, #d01e27, #072569)
}

.b1-grad-video {
    background-image: linear-gradient(to right, #072569, #2653ba)
}

.b1-border-navy {
    border: 1px solid #072569
}

#pills-tab li,
.b1-border-bottom-navy {
    border-bottom: 1px solid #072569
}

.b1-btn-grad {
    background-image: linear-gradient(to right, #d01e27, #072569);
    color: #fff
}

.b1-btn-grad:hover {
    background-image: linear-gradient(to right, #b81019, #031b54);
    color: #fff
}

.b1-bg-navy {
    background-color: #072569
}

.b1-gradient-navy {
    background-image: linear-gradient(to bottom right, #072569, #274a9a)
}

.b1-text-navy {
    color: #072569 !important
}

.b1-hollow-footer {
    color: #e3e3e3
}

.b1-tbg-footer {
    background-color: #232323
}

.b1-text-footer {
    color: #232323
}

.b1-bbstart-mob:after,
.b1-bbstart:after {
    left: 0;
    background-image: linear-gradient(to right, #000, #0000)
}

.b1-bbend-mob:after,
.b1-bbend:after {
    right: 0;
    background-image: linear-gradient(to right, #0000, #000)
}

.b1-bbend-mob:after,
.b1-bbstart-mob:after {
    content: "";
    position: absolute;
    height: 28px;
    width: 30px
}

.b1-date {
    padding: .1rem 0;
    font-size: 10px;
    white-space: nowrap
}

.b1-article {
    font-size: 13pt;
    line-height: 1.7
}

.b1-title-editor {
    font-size: 10pt
}

.searchbar {
    width: 707px;
    padding: 1rem;
    margin-left: 5.85rem !important
}

.p-time {
    padding: .1rem 0 .1rem .5rem
}

.text-truncate-2-lines {
    -webkit-line-clamp: 2
}

.text-truncate-3-lines {
    -webkit-line-clamp: 3
}

.text-truncate-4-lines {
    -webkit-line-clamp: 4
}

.caption {
    font-size: .8rem;
    line-height: 1.2rem;
    padding: .5rem 0
}

.paging {
    border: 1px solid #d01e27;
    color: #d01e27 !important;
    border-radius: .375rem;
    padding: .25rem .5rem
}

.paging.active {
    color: #fff !important
}

.box-index {
    padding: 1.5rem 0 1.25rem 1rem;
    border-bottom: 1px dashed #232323;
    display: flex
}

.box-index.first {
    border-top: 1px dashed #232323
}

.box-index.last {
    border-bottom: 0
}

.sub-cat .box-index {
    border-color: #bbb
}

.sub-cat .box-index h6 {
    color: #052c65 !important
}

.sub-cat .box-index::after {
    background-image: url("data:image/svgxml,<svgxmlns='http://www.w3.org/2000/svg'viewBox='001616'fill='#052c65'><pathfill-rule='evenodd'd='M4.6461.646a.5.5001.7080l66a.5.50010.708l-66a.5.5001-.708-.708L10.29384.6462.354a.5.50010-.708z'/></svg>")
}

.box-index.sub::after,
.box-index::after {
    width: 1.25rem;
    height: 1.25rem;
    margin: auto .5rem auto auto;
    content: "";
    background-image: url("data:image/svgxml,<svgxmlns='http://www.w3.org/2000/svg'viewBox='001616'fill='#000'><pathfill-rule='evenodd'd='M4.6461.646a.5.5001.7080l66a.5.50010.708l-66a.5.5001-.708-.708L10.29384.6462.354a.5.50010-.708z'/></svg>");
    background-repeat: no-repeat;
    background-size: 1.25rem
}

.box-index::after {
    flex-shrink: 0
}

.box-index.sub::after {
    flex-shrink: 0;
    transform: rotate(90deg)
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none
}

.b1-fb {
    padding-top: 6px;
    color: #3c69c0
}

.b1-tw,
.b1-url,
.b1-wa {
    border-radius: 50%;
    margin-top: 6px;
    color: #fff;
    width: 35px;
    height: 35px
}

.b1-tw {
    background-color: #5bdbf8;
    padding-bottom: 2px
}

.b1-wa {
    background-color: #47c664;
    padding: 0 0 2px 1px
}

.b1-tg {
    padding-top: 6px;
    color: #27abc8
}

.b1-url {
    background-color: #807f7f
}

.b1-tw-mob,
.b1-url-mob,
.b1-wa-mob {
    margin-top: 6px;
    color: #fff;
    width: 28px;
    border-radius: 50%
}

.b1-tw-mob {
    background-color: #5bdbf8;
    height: 28px
}

.b1-wa-mob {
    background-color: #47c664;
    height: 28px
}

.b1-url-mob {
    background-color: #807f7f;
    height: 28px
}

.b1-box-category {
    background-color: #ffe5e5;
    padding: .3rem .6rem .4rem;
    margin-right: .3rem;
    color: #d01e27;
    font-size: xx-small
}

.b1-box-video {
    background-image: linear-gradient(to bottom right, #ffd8d9, #d8e4ff)
}

.b1-text-gradient {
    background: -webkit-linear-gradient(#d01e27, #072569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.btn-light:hover,
.btn-navy {
    background-color: #072569;
    color: #fff
}

.b1-hr-white {
    border-top: 1px solid #fff;
    opacity: 1
}

.b1-hr-dash {
    border-top: 1px dashed #232323;
    opacity: 1
}

.b1-group {
    border-left: 6px solid #d01e27;
    padding: .2rem 0 .23rem .5rem;
    line-height: 1.4
}

.b1-head-right,
.b1-width-right {
    width: 320px
}

.half-circle {
    height: 28px;
    width: 14px;
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px
}

.avatar-inner img,
.bnetLogo,
.lazy {
    width: 100%;
    height: 100%
}

.play-box {
    opacity: 0;
    transition: opacity .3s linear
}

.lazy,
.stretched-link::after .lazy,
a .lazy {
    transform: scale(1, 1);
    transition: transform .4s
}

.stretched-link:hover::after .play-box {
    display: block;
    opacity: 1
}

.btn-navy:hover {
    background-color: #163786;
    color: #fff
}

.pagination .page-link,
.text-danger {
    color: #d01e27
}

.lazy.zoom,
.lazy:hover,
.stretched-link:hover::after .lazy,
a:hover .lazy {
    transform: scale(1.1, 1.1)
}

.bnetLogo {
    object-fit: contain
}

.box-ads {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    min-width: 300px;
    min-height: 250px;
    background-color: #f4f4f4
}

.avatar-outer,
header {
    position: relative;
    background-color: #fff
}

.pagination .page-link.active {
    background-color: #d01e27;
    border-color: #d01e27;
    color: #fff
}

.pagination .page-item.disabled .page-link {
    color: #bbb
}

#headline .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%
}

.carousel-indicators [data-bs-target] {
    margin-right: 5px;
    margin-left: 5px
}

#subHeadline .carousel-control-next-icon {
    background-image: url("data:image/svgxml,<svgxmlns='http://www.w3.org/2000/svg'viewBox='001616'fill='#000'><pathd='M80a88011016A8800180zM4.57.5a.5.500001h5.793l-2.1472.146a.5.5000.708.708l3-3a.5.50000-.708l-3-3a.5.5010-.708.708L10.2937.5H4.5z")
}

#subHeadline .carousel-control-next,
#subHeadline .carousel-control-prev {
    width: 37px
}

#subHeadline .carousel-control-next {
    right: -16px
}

#subHeadline .carousel-control-prev {
    left: -16px
}

.circle-prev {
    width: 36px;
    height: 36px;
    padding: 5px 0 5px 10px
}

.circle-next {
    width: 36px;
    height: 36px;
    padding: 5px 10px 5px 0
}

#main-nav .nav-link {
    color: #fff;
    font-weight: 700
}

#main-nav .nav-link:hover {
    color: #fffb
}

#main-nav .nav-link.active {
    color: #fdb446 !important
}

#main-nav .dropdown:hover .dropdown-menu,
.ddwn:hover .dropdown-menu {
    display: block;
    margin-top: 0
}

#main-nav .dropdown:hover .dropdown-menu.dropdown-menu-end {
    display: block;
    right: 0;
    margin-top: 0
}

#pills-tab .nav-link {
    font-family: Lato;
    letter-spacing: .05rem;
    font-weight: 700;
    border-radius: 0;
    border-bottom: 6px solid transparent;
    color: #bbb
}

#pills-tab .nav-link.active {
    background-color: transparent;
    border-bottom: 6px solid #072569;
    color: #000
}

.b1-popular-num {
    width: 3.5rem;
    font-family: Lato;
    text-align: center;
    color: #232323
}

.py-breaking {
    padding-bottom: 2px
}

.h-28 {
    height: 28px
}

.breadcrumb-item.active {
    color: #d01e27;
    font-weight: 700
}

.b1-gradient-headline {
    background-image: linear-gradient(to top, #000 5%, rgba(255, 255, 255, 0) 100%);
    color: #fff;
    padding: 3rem 1rem 1rem
}

.b1-caption-headline {
    z-index: 1;
    bottom: 0;
    left: 0;
    height: 80px
}

.avatar-outer {
    width: 45px !important;
    height: 45px !important;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff
}

.avatar-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center
}

.pic-grayscale {
    filter: grayscale(100%)
}

#icon-password {
    cursor: pointer
}

footer {
    background-color: #e3e3e3;
    font-size: 9pt
}

.carousel-control-next,
.carousel-control-prev {
    width: 8%
}

#frameInfo.standard {
    max-height: 375px
}

#frameInfo.standard .lazy {
    height: unset
}

header {
    z-index: 1046 !important
}

.b1-offcanvas {
    width: 100% !important
}

#canvasAccordion .accordion-item {
    border: 0
}

#canvasAccordion .accordion-button:focus {
    border-color: transparent !important;
    outline: 0 !important
}

#canvasAccordion .accordion-button.no-carret::after {
    background-image: none
}

#canvasAccordion .accordion-button::after {
    background-image: url("data:image/svgxml,<svgxmlns='http://www.w3.org/2000/svg'viewBox='001616'fill='#D01E27'><pathfill-rule='evenodd'd='M1.6464.646a.5.5001.7080L810.293l5.646-5.647a.5.5001.708.708l-66a.5.5001-.7080l-6-6a.5.50010-.708z'/></svg>")
}

#canvasAccordion .accordion-button:not(.collapsed)::after {
    transform: scaleY(-1)
}

.table-responsive::-webkit-scrollbar {
    display: none
}

.table-responsive {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: hidden
}

.nav-dd {
    top: 73px !important
}

.nav-sub .nav-link {
    font-size: 10pt;
    border-radius: 5px
}

.nav-sub .nav-link:hover {
    background-color: #fff3
}

.ddprofile {
    transform: translate(0, 75px) !important
}

.ratio-9x16 {
    --bs-aspect-ratio: 177.61%;
    width: 100%;
    max-width: 375px
}

figcaption {
    font-size: .8rem;
    line-height: 1.2rem;
    padding: .5rem 0;
    color: #595c5f
}


/** B1 Custom Scrollbar **/
.b1-scrollbar{
    overflow-y: auto;
    max-height: 272px;
}
/* width */
.b1-scrollbar::-webkit-scrollbar {
    width: 8px;
}
  
/* Track */
.b1-scrollbar::-webkit-scrollbar-track {
    background: #082B7C;
}
  
/* Handle */
.b1-scrollbar::-webkit-scrollbar-thumb {
    background: #FF0000;
    border-radius: 24px;
}
  
/* Handle on hover */
.b1-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #D01F27;
}
/** END B1 Custom Scrollbar **/

/** CUSTOM TOGGLE SLIDER **/
.switch {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 40px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #0C92D1 0%, #08638D 100%);
    -webkit-transition: 1s;
    transition: 1s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 28px;
    width: 28px;
    left: 4px;
    bottom: 6px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background: linear-gradient(90deg, #AA0A12 1%, #D01F27 100%);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(114px);
    -ms-transform: translateX(114px);
    transform: translateX(114px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
    z-index: 5;
}

/** END CUSTOM TOGGLE SLIDER **/

.truncate-overflow-2lines {
    /* --max-lines: 2; */
    position: relative;
    /* 1.2 is line height */
    max-height: calc(1.2rem * 2);
    overflow: hidden;
    /* padding-right: 1rem; space for ellipsis */
}
.truncate-overflow-2lines::before {
    position: absolute;
    /* content: "..."; */
    content: "";
    inset-block-end: 0; /* "bottom" */
    inset-inline-end: 0; /* "right" */
}
.truncate-overflow-2lines::after {
    content: "";
    position: absolute;
    inset-inline-end: 0; /* "right" */
    /* width: 1rem;
    height: 1rem; */
    background: transparent;
}


@media only screen and (min-width:1200px) {
    .b1-grid {
        width: 1008px
    }
    .b1-logo {
        height: 40px
    }
    .b1-date {
        padding: .1rem 0;
        font-size: 10px;
        white-space: nowrap
    }
    .footer-left {
        width: 240px;
        text-align: center
    }
    .searchbar {
        width: 707px;
        padding: 1rem;
        margin-left: 5.85rem !important
    }
    .sky-left {
        top: 190px;
        right: calc(50% + 520px)
    }
    .sky-left-scroll,
    .sky-right-scroll {
        top: 110px !important
    }
    .sky-right {
        top: 190px;
        left: calc(50% + 520px)
    }
}

@media only screen and (min-width:1400px) {
    .b1-grid > .row:first-of-type > .col:first-of-type{
        max-width: 760px;
    }
    .b1-grid {
        width: 1080px
    }
    .b1-logo {
        height: 41px
    }
    .b1-date {
        padding: .1rem 0;
        font-size: 10px;
        white-space: nowrap;
        letter-spacing: normal !important;
        font-weight: 400 !important
    }
    .searchbar {
        width: 765px;
        padding: 1.1rem;
        margin-left: 6.3rem !important
    }
    .footer-left {
        width: 280px;
        text-align: center
    }
    .sky-left {
        top: 322px;
        right: calc(50% + 560px);
        transition: .2s;
        -wenkit-transition: all .2s;
        -moz-transition: .2s;
        -o-transition: .2s;
        -ms-transition: .2s
    }
    .sky-left-scroll,
    .sky-right-scroll {
        top: 105px !important
    }
    .sky-right {
        top: 322px;
        left: calc(50% + 560px);
        transition: .2s;
        -wenkit-transition: all .2s;
        -moz-transition: .2s;
        -o-transition: .2s;
        -ms-transition: .2s
    }
}