/** 
  * news-section
  *     - title
  *     - navigation
  *     - slide-points
  *     - slide-content
*/


/* news-section
-------------------------------------------------------------- */
.news-section {
    font-family: "Karla", sans-serif;
    margin: 40px 150px 20px 150px;
}        
    /* title */
    .news-section .title-section {
        text-align: center;
        margin-bottom: 0;
    }
    .news-section .title-section .title {
        font-family: 'Silka-Regular', sans-serif;
        font-size: 30px;
        line-height: 1.1;
        color: var(--department-color-3);
    }
        @media (max-width: 767px) {
            .news-section .title-section .title {
                font-size: 26px;
            }
        }
        @media (min-width: 768px) {
            .news-section .title-section {
                margin-bottom: 40px;
            }
            .news-section .title-section .title br {
                    display: none !important;
                }
        }

    /* navigation */
    .news-section .navigation {
        position: relative;
        width: 100%;
    }
        .news-section .navigation a.left {
            left: -60px;
        }
        .news-section .navigation a.right {
            right: -60px;
        }
        .news-section .navigation a:before {
            display: inline-block;
        }
        .news-section .navigation a {
            display: block;
            position: absolute;
            top: 30px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid var(--nav-anhor-color);
            border-radius: 50%;
            transition: all 0.3s ease-in-out;
            z-index: 1;
        }
        .news-section .navigation a:hover,
        .news-section .navigation a:focus,
        .news-section .navigation a:active {
            background-color: var(--nav-anhor-hover-color);
        }
        .news-section .navigation i {
            color: var(--nav-anhor-icon-color);
        }
        .news-section .navigation a:hover i,  
        .news-section .navigation a:focus i,
        .news-section .navigation a:active i {
            color: #fff;
        }

    /* slide-points */
    .news-section .slide-points {
        list-style: none;
        padding: 0;
        margin-bottom: 0;
    }
        @media (min-width: 768px) {
            .news-section .slide-points {
                margin-bottom: 1rem;
            }
        }
        .news-section .slide-points li:before {
            position: absolute;
            left: 50%;
            bottom: 0;
            z-index: 20;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--item-inactiv-bg-color);
            content: "";
            margin-left: -5px;
            z-index: 20;
            -webkit-transition: all 0.3s ease-in-out;
               -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                 -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
        }
        .news-section .slide-points li {
            width: 250px;
            margin-right: 1px;
            float: left;
            display: block;
            cursor: pointer;
            text-align: center;
            padding: 11px 0 23px;
            position: relative;
        }
        .news-section .slide-points li:after {
            position: absolute;
            left: 0;
            bottom: 4px;
            width: 100%;
            height: 3px;
            background-color: var(--item-inactiv-bg-color);
            content: "";
            z-index: 1;
        }
        .news-section .slide-points li.active:before {
            background-color: var(--item-activ-bg-color);
        }
        .news-section .slide-points li .event-date {
            font: 14px/28px "Karla", sans-serif;
            color: #666666;
        }
        .news-section .slide-points li .event-date:after {
            position: absolute;
            opacity: 0;
            left: -100%;
            z-index: 20;
            bottom: 4px;    
            width: 50%;
            height: 3px;   
            background-color: var(--item-activ-bg-color);
            content: "";   
            -webkit-transition: all 0.3s ease-in-out;
               -moz-transition: all 0.3s ease-in-out;
                -ms-transition: all 0.3s ease-in-out;
                 -o-transition: all 0.3s ease-in-out;
                    transition: all 0.3s ease-in-out;
            
        }
        .news-section .slide-points li.active .event-date:after {
            position: absolute;
            opacity: 1;
            left: 0;
            bottom: 4px;
            width: 50%;
            z-index: 20;
            height: 2px;
            background-color: var(--item-activ-bg-color);
            content: "";
        }

    /* slide-content */
    .news-section .slide-content {
        display: block;
        position: relative;
        line-height: 1.5em;
        height: calc(1.5em * 10);
        width: 100%;
        overflow: hidden;
    }
    .news-section .slide-content .gradient {
        position: absolute;
        bottom: 0;  
        height: 100px;
        width: 100%;
    }
    .news-section .slide-content .gradient:after {
        position: absolute;
        height: 100%;
        width: 100%;
        content: "";
        background: linear-gradient(to top,
         rgba(255,255,255, .9) 0%, 
         rgba(255,255,255, 0) 100%
        );
        pointer-events: none;
		z-index: 1;
    }
        .news-section .slide-content .item {
            position: absolute;
            top: 0 !important;
            opacity: 0;
            transition: transform 0.5s ease-in-out;
            transform: translateX(200%);
            overflow: hidden;
        }
        .news-section .slide-content .item.active {
            opacity: 1;
            transform: translateX(0) !important;
        }
            .news-section .slide-content .item .title {
                font-family: 'Silka-Regular', sans-serif;
                font-size: 16px;
            }
                .news-section .slide-content .item .title a:before {
                    font-family: 'Font Awesome 6 Free';
                    content: "\f064\00a0\00a0\00a0";
                }
            .news-section .slide-content .item .content {
                font-family: "Karla", sans-serif;
                font-size: 14px;
                color: #666666;
                margin-top: 20px;
            }
            .news-section .slide-content .item .content p {
                margin-bottom: 10px;
                line-height: 1.6;
            }

    
@media (max-width: 767px) {
    .news-section {
        margin-left: 10px;
        margin-right: 10px;
    }
    .news-section .slide-content .item {
        padding: 0 10px 0 10px;
    }
}
@media (max-width: 639px) {
    .news-section {
        margin-left: 5px;
        margin-right: 5px;
    }        
    .news-section .container {
        padding-left: 0;
        padding-right: 0;
    }        
    .news-section .navigation a.left {
        left: 0;
    }
    .news-section .navigation a.right {
        right: 0;
    }
    .news-section .navigation a {
        top: -40px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}