/* ###################################################
    News and Announcements Index Custom StyleSheet
#################################################### */

/* ======== News And Announcements Content Container ======== */
    .news-announcements-pano-wrapper,
    .news-card-data-filter-wrapper,
    .news-card-data-result-wrapper {
        margin: auto;
    }
    .news-card-data-result-wrapper{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .news-announcements-pano-wrapper{ padding: 0 1rem; }

    /* news announcements pano contents */
    .news-announcements-pano-contents {
        padding: 1rem 0;
        display: flex;
        flex-flow: column wrap;
    }
    .news-announcements-pano-title {
        margin: 0;
        font-size: 25px;
    }
    .news-announcements-pano-descriptions {
        font-size: 13px;
        color: #656464;
    }
    .news-announcements-pano-read-more-button {
        width: 95px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: white;
        border-radius: 5px;
        cursor: pointer;
    }

    /* news announcements pano image wrapper */
    .news-announcements-pano-image-wrapper { display: none; }
    .news-announcements-pano-image-wrapper img { width: 100%; }
    /* mobile news announcements pano image wrapper */
    .mobile-news-announcements-pano-image-wrapper { 
        padding: 1rem; 
        margin: auto;
    }
    .mobile-news-announcements-pano-image-wrapper img{ width: 100%; }

    /* News Card Listing Contents Block */
    .news-card-listing-contents-wrapper {
        padding: 1rem 0;
        background-color: #DAFDEC;
    }
    .news-card-listing-title {
        margin: 0;
        font-size: 20px;
        text-align: center;
    }

    /* news card data filter wrapper */
    .news-card-data-filter-wrapper {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
    }
    .news-types-filter-search-wrapper,
    .news-years-filter-wrapper{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .news-years-filter-wrapper{ margin-top: 15px; }
    .filter-by-text,
    .type-filter,
    .name-filter,
    .year-filter {
        font-size: 11px;
        color: #656464;
        border: none;
        outline: none;
        border-radius: 5px;
    }
    .name-filter { height: 33px; }
    .type-filter,
    .year-filter {
        height: 35px;
    }
    .filter-by-text { width: 15%; }
    .type-filter { width: 84%; }
    .name-filter,
    .year-filter {
        width: 48%;
    }

    /* news card data result wrapper */
    .news-card-data-wrapper {
        margin: auto;
        margin-bottom: .7rem;
        display: flex;
        flex-flow: column wrap;
        background-color: white;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        cursor: pointer;
        text-decoration: none;
    }
    .news-card-data-wrapper:hover { border-bottom: 1px solid #058248; }
    .news-card-thumbnail-block {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;
    }
    .news-card-thumbnail-block img { width: 100%; }
    .news-card-details-block {
        margin-top: -.3rem;
        padding: .8rem;
    }
    .news-card-details-title {
        margin: 0;
        font-size: 14px;
        color: black;
    }
    .news-card-details-description {
        margin-top: 1rem;
        font-size: 12px;
        color: #656464;
    }
    .news-card-details-footer {
        margin-top: 1rem;
        display: flex;
        flex-flow: row wrap;
        font-size: 12px;
    }
    .news-card-detail-date {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }
    .news-card-detail-date img {
        width: 15px;
        margin-right: .3rem;
    }
    .news-card-date { color: #656464a4; }
    .news-card-detail-read-more-button {
        margin-left: auto;
        cursor: pointer;
        transition: font-size .7s;
    }
    .news-card-detail-read-more-button:hover { font-size: 14px; }

/* ################
    Media Query
################### */
/* =====  Mobile View (!) Width ( 320px <-> 425px ) (!) ===== */
    @media only screen and ( min-width: 425px ) { 
        .mobile-news-announcements-pano-image-wrapper { width: 24rem; }
        /* news card data result wrapper */
        .news-card-data-wrapper,
        .news-card-data-filter-wrapper { width: 390px; } 
    }

/* =====  Teblate View (!) Width ( 425px <-> 768px ) (!) ===== */
    @media only screen and ( min-width: 600px ){
        .news-card-data-result-wrapper {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }
        .news-card-data-wrapper { width: 270px; } 
        .news-card-data-filter-wrapper,
        .news-card-data-result-wrapper { width: 550px; }
    }

/* ===== Medium Laptop View (!) Width ( 768px <-> 1024px ) (!) ===== */
    @media only screen and ( min-width: 768px ){
        .news-announcements-pano-wrapper,
        .news-card-data-filter-wrapper,
        .news-card-data-result-wrapper { width: 38rem; }
        .mobile-news-announcements-pano-image-wrapper{ display: none; }
        .news-announcements-pano-image-wrapper{ 
            width: 100rem;
            display: flex; 
        }
        .news-announcements-pano-title { font-size: 35px; }

        /* News Announcements Pano Block */
        .news-announcements-pano-wrapper {
            padding-top: .8rem;
            display: flex;
            justify-content: space-between;
        }
        .news-announcements-pano-descriptions { padding-right: 30px; } 

        /* search */
        .news-years-filter-wrapper{ margin-top: unset; }

        /* news card data result wrapper */
        .news-card-data-wrapper { width: 12.2rem; }
        .news-card-thumbnail-block { width: 195px; }
        .news-card-details-title,
        .news-card-details-description { font-size: 11px; }
        .news-card-details-footer { font-size: 11px; }
        .news-card-details-description { margin-top: .5rem; }
        .news-card-details-footer { margin-top: .8rem; }
        .filter-by-text { width: 50px; }
        .type-filter { width: 250px; }
        .name-filter,
        .year-filter {
            width: 130px;
        }
        .news-types-filter-search-wrapper, 
        .news-years-filter-wrapper{ width: auto; }
        .name-filter{ margin-right: 22px; }
        .news-card-details-block { padding: .5rem; }

    }
    @media only screen and ( min-width: 912px ){
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 45rem;
        }
        .news-announcements-pano-title { font-size: 40px; }
        .news-announcements-pano-descriptions,
        .news-announcements-pano-read-more-button {
            font-size: 14px;
        }
        .news-announcements-pano-read-more-button { margin-top: .5rem; }
        .news-announcements-pano-image-wrapper { width: 90rem; }
        .news-card-listing-title { font-size: 23px; }
        .filter-by-text, 
        .type-filter, 
        .name-filter, 
        .year-filter {
            font-size: 13px;
        }
        .type-filter, 
        .year-filter,
        .name-filter {
            padding-left: .5rem;
        }
        .news-card-data-wrapper {
            width: 14.2rem;
            margin-bottom: 1rem;
        }
        .name-filter, 
        .year-filter {
            width: 170px;
        }
        .type-filter { width: 270px; }
        .news-card-thumbnail-block { width: 227px; }
        .news-card-details-title { font-size: 13px; }
        .news-card-details-description { font-size: 12px; }
        .news-card-details-footer { font-size: 12px; }
        .news-card-details-block { padding: .7rem; }
    }

/* =====  Large Laptop View (!) Width ( 1024px <-> 1920px ) (!) ===== */
    @media only screen and ( min-width: 1024px ){
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 50.5rem;
        }
        .news-announcements-pano-title { font-size: 47px; }
        .news-announcements-pano-descriptions, 
        .news-announcements-pano-read-more-button {
            font-size: 15px;
        }
        .news-announcements-pano-read-more-button {
            width: 110px;
            height: 35px;
        }
        .news-card-listing-title { font-size: 26px; }
        .news-card-data-filter-wrapper { margin-top: 1.5rem; }
        .news-card-data-wrapper {
            width: 16.2rem;
            margin-bottom: 1.2rem;
        }
        .filter-by-text, .type-filter, 
        .name-filter, 
        .year-filter {
            font-size: 14px;
        }
        .name-filter { margin-right: 38px; }
        .news-card-thumbnail-block { width: 259px; }
        .news-card-details-title { font-size: 14px; }
        .news-card-details-description { font-size: 13px; }
        .news-card-details-block { padding: 1rem; }
        .filter-by-text { width: 60px; }
        .news-card-details-footer { margin-top: 1rem; }
        .name-filter, 
        .year-filter {
            width: 185px;
        }
        .type-filter { width: 290px; }
    }

    @media only screen and ( min-width: 1200px ){
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 58.5rem;
        }
        .news-announcements-pano-title { font-size: 55px; }
        .news-announcements-pano-descriptions, 
        .news-announcements-pano-read-more-button {
            font-size: 17px;
        }
        .news-announcements-pano-read-more-button {
            width: 125px;
            height: 45px;
            margin-top: .8rem;
        }
        .news-announcements-pano-image-wrapper { width: 95rem; }
        .news-card-listing-title { font-size: 32px; }
        .news-card-listing-contents-wrapper { padding: 1.5rem 0; }
        .news-card-data-wrapper {
            width: 18.7rem;
            margin-bottom: 1.5rem;
        }
        .news-card-data-filter-wrapper { margin-bottom: 1.5rem; }
        .news-card-thumbnail-block { width: 299px; }
        .news-card-details-title { font-size: 16px; }
        .news-card-details-description { font-size: 15px; }
        .news-card-detail-date img {
            width: 18px;
            margin-right: .5rem;
        }
        .news-card-details-footer { font-size: 14px; }
        .filter-by-text, 
        .type-filter, 
        .name-filter, 
        .year-filter {
            font-size: 16px;
        }
        .type-filter, 
        .year-filter,
        .name-filter {
            height: 45px;
        }
        .name-filter, 
        .year-filter {
            width: 215px;
        }
        .name-filter { margin-right: 43px; }
        .type-filter { width: 350px; }
    }

    @media only screen and ( min-width: 1280px ){
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 60rem;
        }
        .news-card-data-wrapper { width: 19.2rem; }
        .news-card-thumbnail-block { width: 307px; }
        .name-filter { margin-right: 54px; }
    }

    @media only screen and ( min-width: 1366px ){
        .news-announcements-pano-contents { padding-top: 2.5rem; }
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 67.5rem;
        }
        .news-announcements-pano-title { font-size: 57px; }
        .news-announcements-pano-descriptions, 
        .news-announcements-pano-read-more-button {
            font-size: 19px;
        }
        .news-announcements-pano-read-more-button { width: 140px; }
        .news-announcements-pano-image-wrapper { width: 115rem; }
        .news-card-listing-title { font-size: 35px; }
        .filter-by-text, 
        .type-filter, 
        .name-filter, 
        .year-filter {
            font-size: 19px;
        }
        .name-filter { margin-right: 34px; }
        .news-card-data-wrapper { width: 21.6rem; }
        .news-card-thumbnail-block { width: 346px; }
        .news-card-details-title { font-size: 19px; }
        .news-card-details-description {
            margin-top: 1rem;
            font-size: 18px;
        }
        .news-card-details-footer {
            margin-top: 1.5rem;
            font-size: 16px;
        }
        .news-card-detail-date img {
            width: 20px;
            margin-right: .8rem;
        }
        .news-card-details-block { padding: 1.2rem; }
        .filter-by-text { width: 80px; }
        .name-filter, 
        .year-filter {
            width: 250px;
        }
        .type-filter { width: 420px; }
    }

    @media only screen and ( min-width: 1680px ){
        .news-card-data-filter-wrapper { margin: 2rem auto; }
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 80rem;
        }
        .news-announcements-pano-title { font-size: 75px; }
        .news-announcements-pano-descriptions, 
        .news-announcements-pano-read-more-button {
            font-size: 24px;
        }
        .news-announcements-pano-read-more-button {
            width: 200px;
            height: 60px;
        }
        .news-announcements-pano-image-wrapper { width: 135rem; }
        .news-card-listing-title { font-size: 45px; }
        .news-card-listing-contents-wrapper { padding: 2.5rem 0; }
        .filter-by-text, 
        .type-filter, 
        .name-filter, 
        .year-filter {
            font-size: 22px;
        }
        .name-filter { margin-right: 38px; }
        .news-card-data-wrapper { width: 25.6rem; }
        .news-card-thumbnail-block { width: 410px; }
        .news-card-details-title { font-size: 23px; }
        .news-card-details-description { font-size: 21px; }
        .news-card-detail-date img { width: 25px; }
        .news-card-details-footer { font-size: 18px; }
        .news-card-details-block { padding: 1.5rem; }
        .filter-by-text { width: 90px; }
        .name-filter, 
        .year-filter {
            width: 295px;
        }
        .type-filter, 
        .year-filter, 
        .name-filter {
            height: 60px;
        }
        .type-filter, 
        .year-filter, 
        .name-filter {
            padding-left: 1.5rem;
        }
        .type-filter { width: 500px; }
    }

    @media only screen and ( min-width: 1920px ){
        .news-announcements-pano-wrapper, 
        .news-card-data-filter-wrapper, 
        .news-card-data-result-wrapper {
            width: 91rem;
        }
        .news-announcements-pano-title { font-size: 85px; }
        .news-announcements-pano-descriptions, 
        .news-announcements-pano-read-more-button {
            font-size: 26px;
        }
        .news-announcements-pano-read-more-button {
            width: 220px;
            height: 65px;
        }
        .news-announcements-pano-image-wrapper { width: 140rem; }
        .news-card-listing-title { font-size: 50px; }
        .filter-by-text, 
        .type-filter, 
        .name-filter, 
        .year-filter {
            font-size: 25px;
        }
        .name-filter { margin-right: 48px; }
        .news-card-data-wrapper { width: 29.2rem; }
        .news-card-thumbnail-block { width: 467px; }
        .news-card-details-title { font-size: 26px; }
        .news-card-details-description {
            margin-top: 1.5rem;
            font-size: 22px;
        }
        .news-card-detail-date img { width: 27px; }
        .news-card-details-footer {
            font-size: 21px;
            margin-top: 2rem;
        }
        .news-card-details-block { padding: 2rem; }
        .filter-by-text { width: 100px; }
        .name-filter, 
        .year-filter {
            width: 340px;
        }
        .type-filter { width: 555px; }
        .type-filter, 
        .year-filter, 
        .name-filter {
            height: 70px;
        }
    }