.component-headlines { }

.component-headlines .carousel-control-pp {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    height: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
    text-decoration: none;
}
.component-headlines .carousel-control-pp:focus,
.component-headlines .carousel-control-pp:hover{
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
}
/*====================================
layout-basic
====================================*/
/*=====================================================
layout-featured-slider
======================================================*/
.component-headlines.layout-basic { overflow:hidden; }
.component-headlines.layout-basic .slick-list { display:flex !important; }
.component-headlines.layout-basic .slick-track { display:flex; align-items:stretch; justify-content:center;   }
.component-headlines.layout-basic .slick-track .slick-slide { float:none; box-sizing: border-box; }
.component-headlines.layout-basic .slick-arrow-controls {  }
.component-headlines.layout-basic .slick-arrow-controls .slick-arrow{ position: absolute; left: -2rem; top: 50%; margin-top:-1.5rem; bottom:auto; z-index: 1; width: 2rem; height: 3rem; padding: 0; border: none; font-size: 1rem; line-height: 3rem; cursor: pointer;text-decoration: none;text-align: center;overflow: hidden;transition:all .2s linear; }
.component-headlines.layout-basic .slick-arrow-controls .prev { }
.component-headlines.layout-basic .slick-arrow-controls .next { left: auto; right: -2rem; }
.component-headlines.layout-basic:focus .slick-arrow.prev,
.component-headlines.layout-basic:focus-within .slick-arrow.prev,
.component-headlines.layout-basic:active .slick-arrow.prev,
.component-headlines.layout-basic:hover .slick-arrow.prev{ left:0.25rem; }
.component-headlines.layout-basic:focus .slick-arrow.next,
.component-headlines.layout-basic:focus-within .slick-arrow.next,
.component-headlines.layout-basic:active .slick-arrow.next,
.component-headlines.layout-basic:hover .slick-arrow.next{ right:0.25rem; }

.component-headlines.layout-basicOLD .carousel-caption {
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 2rem 10% 3rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 33%, rgba(0,0,0,0.85) 100%);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
    position:relative;
}

/*====================================
layout-carousel
====================================*/
.component-headlines.layout-carousel .carousel-caption{
    width:100%;
    left:0;
    right:0;
    bottom:0;
    top:0;
    padding:2rem 10% 3rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}


/*=====================================================
layout-featured-slider
======================================================*/
.component-headlines.layout-featured-slider { overflow:hidden; }
.component-headlines.layout-featured-slider .slick-list { display:flex !important; }
.component-headlines.layout-featured-slider .slick-track { display:flex; align-items:stretch; justify-content:center;   }
.component-headlines.layout-featured-slider .slick-track .slick-slide { float:none; box-sizing: border-box; }
.component-headlines.layout-featured-slider .slick-arrow-controls {  }
.component-headlines.layout-featured-slider .slick-arrow-controls .slick-arrow{ position: absolute; left: -2rem; top: 50%; margin-top:-1.5rem; bottom:auto; z-index: 1; width: 2rem; height: 3rem; padding: 0; border: none; font-size: 1rem; line-height: 3rem; cursor: pointer;text-decoration: none;text-align: center;overflow: hidden;transition:all .2s linear; }
.component-headlines.layout-featured-slider .slick-arrow-controls .prev { }
.component-headlines.layout-featured-slider .slick-arrow-controls .next { left: auto; right: -2rem; }
.component-headlines.layout-featured-slider:focus .slick-arrow.prev,
.component-headlines.layout-featured-slider:focus-within .slick-arrow.prev,
.component-headlines.layout-featured-slider:active .slick-arrow.prev,
.component-headlines.layout-featured-slider:hover .slick-arrow.prev{ left:0.25rem; }
.component-headlines.layout-featured-slider:focus .slick-arrow.next,
.component-headlines.layout-featured-slider:focus-within .slick-arrow.next,
.component-headlines.layout-featured-slider:active .slick-arrow.next,
.component-headlines.layout-featured-slider:hover .slick-arrow.next{ right:0.25rem; }

/*=====================================================
layout-stacked-carousel
======================================================*/
.component-headlines.layout-stacked-carousel { overflow:hidden; }
@media only screen and (min-width:768px) {
    .component-headlines.layout-stacked-carousel .my-md-n1{
        margin:-0.25rem 0 !important;
    }
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators [data-bs-target] {
    height:auto;
    box-sizing: border-box;
    text-indent:initial;
    background:transparent;
    opacity:1;
    cursor:default;
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item{

}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item:hover,
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item:focus{
    background:rgba(0,0,0,0.125);
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active{
    background:var(--bs-primary);
    color:#fff;
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active .card-body > *:not(.card-title) {
    opacity:0.75;
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active .card-body a{
    color:#fff;
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active a:hover,
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item.active a:focus{
   opacity:0.75;
}
.component-headlines.layout-stacked-carousel .aside-carousel .carousel-indicators .item .card .row > .col-12.my-md-n1 {
    margin-left:-1px !important;
}
.component-headlines.layout-stacked-carousel .date{
    font-size: .875em;
    opacity:0.75;
}
.component-headlines.layout-stacked-carousel .carousel-caption {
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 2rem 10% 3rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 33%, rgba(0,0,0,0.85) 100%);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}



/*=====================================================
layout-card-slider
======================================================*/
.component-headlines.layout-card-slider { overflow:hidden; }
.component-headlines.layout-card-slider .slick-list { display:flex !important; margin:0 -calc(1rem + 1px); }
.component-headlines.layout-card-slider .slick-track { display:flex; align-items:stretch; justify-content:center; gap: 1rem; }
.component-headlines.layout-card-slider .slick-track .slick-slide { float:none; box-sizing: border-box; }
.component-headlines.layout-card-slider .slick-arrow-controls {  }
.component-headlines.layout-card-slider .slick-arrow-controls .slick-arrow{ position: absolute; left: -2rem; top: 50%; margin-top:-1.5rem; bottom:auto; z-index: 1; width: 2rem; height: 3rem; padding: 0; border: none; font-size: 1rem; line-height: 3rem; cursor: pointer;text-decoration: none;text-align: center;overflow: hidden;transition:all .2s linear; }
.component-headlines.layout-card-slider .slick-arrow-controls .prev { }
.component-headlines.layout-card-slider .slick-arrow-controls .next { left: auto; right: -2rem; }
.component-headlines.layout-card-slider:focus .slick-arrow.prev,
.component-headlines.layout-card-slider-slider:focus-within .slick-arrow.prev,
.component-headlines.layout-card-slider:active .slick-arrow.prev,
.component-headlines.layout-card-slider:hover .slick-arrow.prev{ left:0.25rem; }
.component-headlines.layout-card-slider-slider:focus .slick-arrow.next,
.component-headlines.layout-card-slider:focus-within .slick-arrow.next,
.component-headlines.layout-card-slider:active .slick-arrow.next,
.component-headlines.layout-card-slider:hover .slick-arrow.next{ right:0.25rem; }

/*=====================================================
layout-card-grid
======================================================*/
.component-headlines.layout-grid .grid { row-gap:1.5rem }
.component-headlines.layout-grid .item { display:flex; align-items:center; flex:0 0 100% }
.component-headlines.layout-grid .item .thumbnail { width:50% }
.component-headlines.layout-grid .item .details { width:50%; padding-left:1rem }

.component-headlines.layout-grid .grid.md { column-gap:4% }
.component-headlines.layout-grid .grid.md .item { flex-basis:48% }

.component-headlines.layout-grid .grid.xl  { column-gap:2% }
.component-headlines.layout-grid .grid.xl .item { flex-basis:32% }

/*=====================================================
RESPONSIVE
======================================================*/
@media only screen and (min-width:992px) {

}
@media (max-width: 991px) {

}
@media only screen and (min-width:992px) {

}


@media only screen and (min-width:768px) {

}
@media only screen and (min-width:992px) {

}
@media only screen and (min-width:1200px) {

}

/*=====================================================
LAYOUT FLOW
======================================================*/
@keyframes slide-up-fade-in {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.component-headlines.layout-flow { overflow:hidden }
.component-headlines.layout-flow .slick-slider { margin:0; overflow:hidden }
.component-headlines.layout-flow .slick-list { max-width:1200px; padding:0 !important; margin:0 auto; overflow:visible }
.component-headlines.layout-flow .slick-track { display:flex; align-items:stretch }
.component-headlines.layout-flow .slick-slider .slick-dots { display:flex; align-items:center; position:static }
.component-headlines.layout-flow .slick-arrow { width:40px; top:auto; bottom:0; transform:none; transition:all .4s linear; border-radius:0; --bs-btn-color:#fff; --bs-btn-bg:var(--bs-primary); --bs-btn-hover-bg:var(--bs-primary); --bs-btn-hover-color:#fff }
.component-headlines.layout-flow .slick-arrow-controls { display:none; max-width:1200px; margin:0 auto; position:absolute; left:0; right:0; top:0; bottom:50%; z-index:3 }
.component-headlines.layout-flow .slick-pp { right:17px; top:10px !important; bottom:auto !important; display:block; width:40px !important; height:40px !important; padding:0 !important }

.component-headlines.layout-flow .slick-arrow.prev { left:0 }
.component-headlines.layout-flow .slick-arrow.next { left:auto; right:0 }
.component-headlines.layout-flow .slick-slide:not(.slick-active) .card-thumbnail { filter:blur(2px) }

.component-headlines.layout-flow .slick-slide > div .item { overflow: hidden; vertical-align:top; overflow:hidden }
.component-headlines.layout-flow .slick-slide .view-more { display:none !important }

.component-headlines.layout-flow .boxscores { display:none } 
.component-headlines.layout-flow .boxscores .nav { display:flex; flex-wrap:nowrap; margin:0 !important }
.component-headlines.layout-flow .boxscores .nav-pills .nav-link { padding:3px 1rem; border-radius:2px 2px 0 0 }
.component-headlines.layout-flow .boxscores .nav-pills .nav-link.active,
.component-headlines.layout-flow .boxscores .nav-pills .show > .nav-link { background:var(--bs-primary) }

.component-headlines.layout-flow .card-thumbnail .img-container { background-position:center top !important } 
.component-headlines.layout-flow .card-title .stretched-link::after { content:none }
.component-headlines.layout-flow .date-category { display:flex; align-items:center; opacity:0.6; font-size:0.9rem }
.component-headlines.layout-flow .category::before { content:'-'; margin:0 1rem; }
.component-headlines.layout-flow .related-links { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

@media only screen and (min-width:1024px) {
    .component-headlines.layout-flow .slick-slide .card-body { display:flex; flex-direction:column; position:absolute; left:0; right:0; bottom:0; padding:0; opacity:0; transform: translateY(300px) }
    .component-headlines.layout-flow .slick-active .card-body { opacity:1; visibility:visible; animation: slide-up-fade-in 0.5s ease-out 0.8s forwards; }
    .component-headlines.layout-flow .slick-slide .card-details { display:flex; justify-content:space-between; align-items:center; gap:2rem; min-height:120px; padding:20px; color:#fff; background:rgba(0,0,0,0.7) }
    .component-headlines.layout-flow .slick-slide a:not(.btn) { color:#fff; opacity:0.8; transition:opacity .2s }
    .component-headlines.layout-flow .slick-slide a:not(.btn):hover { opacity:1 } 
    .component-headlines.layout-flow .slick-slide .view-more { display:block !important }

    .component-headlines.layout-flow .boxscores { display:block; position: absolute; margin:1rem; align-self:flex-end; font-size:0.8rem; z-index:2; opacity:0 }
    .component-headlines.layout-flow .boxscores .content { padding:10px; background:rgba(0,0,0,0.75) }
    .component-headlines.layout-flow .slick-active .boxscores { bottom:150px; opacity:1; visibility:visible; animation: slide-up-fade-in 0.5s ease-out 0.8s forwards; }
    .component-headlines.layout-flow .boxscores .gamebox { display:none }
    .component-headlines.layout-flow .linescore { margin:0 !important } 
    .component-headlines.layout-flow .table { margin:0 !important; background:transparent !important }
    .component-headlines.layout-flow .table tr { border:none }
    .component-headlines.layout-flow .table th,
    .component-headlines.layout-flow .table td { border:none; color:#ccc; background:transparent; box-shadow:none }
    .component-headlines.layout-flow .text-muted { color:#999 !important }
    .component-headlines.layout-flow .table a { color:#ccc }

    .component-headlines.layout-flow .slick-arrow-controls { display:block }
    .component-headlines.layout-flow:hover .slick-prev { left:0 }
    .component-headlines.layout-flow:hover .slick-next { left:auto; right:0 }
}

@media only screen and (min-width:1200px) {
    .component-headlines.layout-flow .slick-slide > div { padding:0 !important; transition:transform .2s ease-in }
    .component-headlines.layout-flow .slick-slide.slick-active > div { transition:transform 1s .2s ease-out }
    .component-headlines.layout-flow .slick-slide:not(.slick-active) > div { transform:scale(0.95); transform-origin:right }
    .component-headlines.layout-flow .slick-slide.slick-active + .slick-slide > div { transform-origin:left }
    .component-headlines.layout-flow .slick-slide.slick-active .item { transform:none; transition:none }
    .component-headlines.layout-flow .slick-slider .slick-dots { display:none !important }
    .component-headlines.layout-flow .slick-track { gap:14px }
    .component-headlines.layout-flow .slick-arrow.prev { left:-18px }
    .component-headlines.layout-flow .slick-arrow.next { left:auto; right:-18px }
}

/*=====================================================
LAYOUT DYNASTY
======================================================*/
.component-headlines.layout-dynasty .carousel-item:after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 33%, rgba(0,0,0,0.85) 100%) }
.component-headlines.layout-dynasty .carousel-caption { position:absolute; left:0; right:0; bottom:80px; z-index:3 !important; text-align:left; text-transform:uppercase; padding:0; z-index:1; line-height:1.1 }
.component-headlines.layout-dynasty .carousel-controls { display:none; padding:0; position:absolute; bottom:1rem; left:0; right:0; margin:0 auto; color:#fff }
.component-headlines.layout-dynasty .carousel-controls .control { position:relative; flex:1; width:auto; height:auto; margin:0; border:none; background:transparent; text-indent:0; line-height:1  }
.component-headlines.layout-dynasty .carousel-controls .control .container { position:relative; padding:1rem; display:flex; flex-direction:column; justify-content:center; gap:0.5rem }
.component-headlines.layout-dynasty .carousel-controls .control .container:before { content:''; position:absolute; left:1rem; bottom:0; width:1px; height:2px; background:var(--bs-tertiary) !important; opacity:0; transition:all .6s ease-out }
.component-headlines.layout-dynasty .carousel-controls .control.active .container:before { right:1rem; opacity:1; width:100% }
.component-headlines.layout-dynasty .carousel-caption-title { font-size:2rem !important; font-weight:700; text-transform:uppercase } 
.component-headlines.layout-dynasty .control-caption-title { font-weight:700; text-transform:uppercase }
.component-headlines.layout-dynasty .carousel-caption-title .stretched-link:after { content:none }

@media only screen and (min-width:992px) {
    .component-headlines.layout-dynasty .carousel-controls { display:flex; gap:3rem }
    .component-headlines.layout-dynasty .carousel-caption { bottom:auto; top:50%; transform:translateY(-50%) }
}

@media only screen and (min-width:1200px) {
    .component-headlines.layout-dynasty .carousel-controls { bottom:2rem }
    .component-headlines.layout-dynasty .carousel-caption-title { font-size:4rem !important; padding-right:100px }     
}

/*=====================================================
LAYOUT FLEX
======================================================*/
.component-headlines.layout-flex .grid { row-gap:1.5rem }
.component-headlines.layout-flex .item { display:flex; align-items:center; flex:0 0 100% }
.component-headlines.layout-flex .item .details { position:absolute; top:100%; right:0; left:0; height:100%; padding:1rem; color:#fff; background-color:rgba(var(--bs-primary-rgb),.65); transition:top .2s }
.component-headlines.layout-flex .item:hover .details,
.component-headlines.layout-flex .item:focus .details { top:0 }
.component-headlines.layout-flex .item .details > div:first-of-type { font-size:.875rem; padding-bottom:.5rem; margin-bottom:.5rem; border-bottom:1px solid #fff }
.component-headlines.layout-flex .item .details .card-title a { color:#fff }
.component-headlines.layout-flex .item .related-links a:hover { text-decoration:underline }
.component-headlines.layout-flex .grid.md { column-gap:4% }
.component-headlines.layout-flex .grid.md .item { flex-basis:48% }
.component-headlines.layout-flex .grid.lg  { column-gap:2% }
.component-headlines.layout-flex .grid.lg .item { flex-basis:32% }