﻿.newsCarouselContainer {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .newsCarouselContainer .carouselArrow {
        background: none;
        border: none;
        width:5rem;
        font-size: 3.5rem;
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: center;
        cursor: pointer;
        z-index: 2;
        transition: all .1s ease;
        padding: 0 .5rem;
        -webkit-text-stroke: 1px rgba(0 0 0 / .7); 
        text-stroke: 1px #000;
    }

        .newsCarouselContainer .carouselArrow:hover,
        .newsCarouselContainer .carouselArrow:focus{
            color: var(--cc-yellowAccent);
            font-size:4rem;
        }

        .newsCarouselContainer .carouselArrow.left {
            left: 0.25em;
        }

        .newsCarouselContainer .carouselArrow.right {
            right: 0.25em;
        }

.newsCarousel {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 2em 0;
}

    .newsCarousel .news-item {
        width: 15em;
        height: 22em;
        flex: 0 0 15em;
        overflow: hidden;
        margin: 1em 1.25em;
        box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 12px;
        background: #fff;
        border-radius: 5px;
        padding-bottom: .5em;
        transition: transform .2s ease, box-shadow .25s ease-out;
    }

        .newsCarousel .news-item:hover {
            transform: scale(1.05);
            box-shadow: rgba(0, 0, 0, 0.6) 5px 5px 16px;
        }


        .newsCarousel .news-item .newsImage {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 7em;
            text-align: end;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            padding: .25em;
        }

            .newsCarousel .news-item .newsImage .newsDate {
                color: rgb(255, 255, 255);
                font-size: 12px;
                background: rgba(0, 0, 0, 0.8);
                padding: 5px 5px 0px 5px;
                border-radius: 3px;
            }

        .newsCarousel .news-item .news-text {
            margin: 0 .5em .5em .5em;
        }

            .newsCarousel .news-item .news-text h3 {
                font-size: 1.2em !important;
            }

            .newsCarousel .news-item .news-text p {
                font-size: .9em !important;
                padding: 0 .5em;
            }
