@import url('https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&display=swap');

.sharethis-buttons-incline-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.content-block__cards {
    margin: auto;
}


/*#region Landing Page*/
/*#region screen and (min-width: 1200px)*/
@media screen and (min-width: 1200px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 40px;
        margin-top: -130px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 76px/91.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 75px/84px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding: 30px 0px;
    }

    .landing-hero-image-description {
        font: normal 20px/24px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 85% !important;
    }

    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }


    .vietnameunchronicled-landing-image {
        width: 470px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 22px/26.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 36px/42.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/*#endregion*/

/*#region (min-width: 992px) and (max-width: 1199.99px)*/
@media (min-width: 992px) and (max-width: 1199.99px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 30px;
        margin-top: -130px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 74px/86.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 67px/80px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding: 30px 10px;
    }

    .landing-hero-image-description {
        font: normal 20px/24px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }


    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 440px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 22px/26.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 36px/42.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/*#endregion*/

/*#region  Tablets (min-width: 768px) and (max-width: 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 30px;
        margin-top: -130px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 70px/80.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 64px/75px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding: 30px 10px;
    }

    .landing-hero-image-description {
        font: normal 20px/24px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }

    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 328px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 22px/26.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 33px/38.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/*#endregion*/

/*#region Tablets (min-width: 567px) and (max-width: 767px)*/
@media (min-width: 567px) and (max-width: 767.99px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 30px;
        margin-top: -50px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 66px/77.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 60px/65px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding-bottom: 10px;
        padding: 25px 10px;
    }

    .landing-hero-image-description {
        font: normal 18px/22px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }



    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 328px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 22px/26.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 33px/38.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/*#endregion*/

/*#region Mobiles (min-width: 480px) and (max-width: 566px)*/
@media (min-width: 480px) and (max-width: 566.99px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 15px;
        margin-top: -30px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 60px/65.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 56px/58px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding-bottom: 10px;
        padding: 20px 10px;
    }

    .landing-hero-image-description {
        font: normal 18px/22px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }


    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 328px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 22px/26.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 30px/30.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/*#endregion*/

/*#region Mobiles (min-width: 375px) and (max-width: 479px)*/
@media (min-width: 375px) and (max-width: 479.99px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 15px;
        margin-top: -30px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 50px/55.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 50px/50px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding-bottom: 10px;
        padding: 20px 10px;
    }

    .landing-hero-image-description {
        font: normal 16px/20px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }

    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 16px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 16px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 328px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*-webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 20px/24.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 26px/26.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/*#endregion*/

/*#region Mobiles (min-width: 320px) and (max-width: 374px)*/
@media (min-width: 320px) and (max-width: 374.99px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 10px;
        margin-top: -25px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 42px/48.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 42px/40px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: 0px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding-bottom: 10px;
        padding: 10px 10px;
    }

    .landing-hero-image-description {
        font: normal 16px/20px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }

    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 16px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 16px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 285px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 20px/24.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 26px/26.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container--vertical-spacing {
        margin-top: 0px !important;
    }
}

/*#endregion*/

/*#region Extra Small Devices(max-width: 319px)*/
@media (max-width: 319.99px) {
    .landing-hero-container {
        position: relative;
    }

    .landing-hero-image-container {
        z-index: -1;
        position: relative;
    }

    .landing-hero-image {
        width: 100%;
    }

    .landing-hero-image-title {
        /*background-color: #2B4242;*/
        background: linear-gradient(180deg, #e6dfdf00, #2B4242 25% 100%);
        text-align: right;
        padding-right: 10px;
        margin-top: -25px;
    }

        .landing-hero-image-title .hero-image-title__first-line {
            font: normal 42px/48.2px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .landing-hero-image-title .hero-image-title__second-line {
            font: normal 42px/40px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: 0px;
        }

    .landing-hero-image-description-container {
        width: 100%;
        background-color: #2B4242;
        padding-bottom: 10px;
        padding: 10px;
    }

    .landing-hero-image-description {
        font: normal 16px/20px 'Anton', sans-serif;
        letter-spacing: 0px;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0px;
        background-color: #2B4242;
        max-width: 95% !important;
    }

    .landing-hero-image-description-more {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 16px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .landing-hero-image-description-less {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 0;
        height: 0;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 16px solid #ff6a00;
        margin: 10px 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .vietnameunchronicled-content-card {
        width: auto;
        height: auto;
        padding: 20px;
    }

    .vietnameunchronicled-content-card__info {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image img {
        width: 100%;
        height: 100%;
    }

    .vietnameunchronicled-landing-image {
        width: 285px !important;
        height: auto !important;
        /*        box-shadow: 1px 1px 2px #e6e6e6;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);*/
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

        .vietnameunchronicled-landing-image:hover {
            /*            -webkit-filter: sepia(0);
            filter: sepia(0);*/
            filter: grayscale(0);
            -webkit-filter: grayscale(0);
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }

    .vietnameunchronicled-landing__new_article {
        background-color: #F7941D;
        font: normal 20px/24.4px 'Permanent Marker', cursive;
        color: #2B4242;
        position: absolute;
        padding: 5px 15px;
        top: 20px;
        left: 20px;
        z-index: 999;
    }


    .vietnameunchronicled-landing-text {
        font: normal 26px/26.2px 'Anton', sans-serif;
        color: #F89721;
        padding: 10px;
        background-color: #231F20;
    }

    .vietnamunchronicled-landing-container {
        max-width: 100% !important;
        width: 100%;
        /*background-color: #232322;*/
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 50px;
    }


    .contetent-block-cards {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .vietnamunchronicled-landing-cards {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container--vertical-spacing {
        margin-top: 0px !important;
    }
}

/*#endregion*/
/*#endregion*/

/*#region Article Page*/
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    margin: 0px;
}



.article-image img {
    width: 100%;
    height: 100%;
    box-shadow: 1px 1px 2px #e6e6e6;
}

.article-sub-header {
    font-family: 'Anton', sans-serif;
}


/*#region screen and (min-width: 1200px)*/
@media screen and (min-width: 1200px) {
    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 50px;
        right: 45px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 58px/69.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 57px/62.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -10px;
        }

    .article-title {
        font: normal 45.6px/54.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 800px;
        height: 465px;
    }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        max-width: 500px;
        font: normal 38px/42.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 24px/29.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 5px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 41.8px/50.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 20px solid #ff6a00;
        display: inline-block;
        margin-bottom: -10px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #ff6a00;
        display: inline-block;
        margin-bottom: -10px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 282px !important;
        /*height: 186px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 1.5em;
        font-weight: bold;
        margin: 0px;
        padding: 10px 5px;
        text-align: center;
        min-height: 128px;
        width: 282px;
    }

    .swiper-autoheight {
        height: 500px !important;
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        animation: zoom-in-zoom-out 6s ease infinite;
        /*filter: grayscale(100%);*/
        /*animation: wiggle 2s linear infinite;*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#region (min-width: 992px) and (max-width: 1199.99px)*/
@media (min-width: 992px) and (max-width: 1199.99px) {
    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }

    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 50px;
        right: 45px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 58px/69.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 57px/62.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFF;
            margin-top: -10px;
        }

    .article-title {
        font: normal 45.6px/54.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 800px;
        height: 465px;
    }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        max-width: 500px;
        font: normal 38px/42.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 24px/29.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 5px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 41.8px/50.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-right: 18px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 18px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 229px !important;
        /*height: 149px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 1.3em;
        font-weight: bold;
        margin: 0px;
        padding: 5px;
        text-align: center;
        min-height: 128px;
        width: 229px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        animation: zoom-in-zoom-out 6s ease infinite;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}


/*#endregion*/

/*#region  Tablets (min-width: 768px) and (max-width: 991px) */
@media (min-width: 768px) and (max-width: 991.99px) {
    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 35px;
        right: 40px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 56px/65.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 55px/60.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -10px;
        }

    .article-title {
        font: normal 43.6px/51.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100%;
        height: auto;
    }

        .article-image img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px #e6e6e6;
        }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        font: normal 35px/40.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 24px/29.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 3px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 37.8px/46.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-right: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 229px !important;
        /*height: 149px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 1.1em;
        font-weight: bold;
        margin: 0px;
        padding: 5px;
        text-align: center;
        min-height: 128px;
        width: 229px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        animation: zoom-in-zoom-out 6s ease infinite;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#region Tablets (min-width: 567px) and (max-width: 767px)*/
@media (min-width: 567px) and (max-width: 767.99px) {
    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 30px;
        right: 35px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 52px/60.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 51px/58.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -10px;
        }

    .article-title {
        font: normal 40.6px/49.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100%;
        height: auto;
    }

        .article-image img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px #e6e6e6;
        }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        font: normal 33px/37.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 24px/29.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 3px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 35.8px/38.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-right: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 167px !important;
        /*height: 112px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 1.0em;
        font-weight: bold;
        margin: 0px;
        padding: 5px;
        text-align: center;
        min-height: 100px;
        width: 167px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        animation: zoom-in-zoom-out 6s ease infinite;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#region Mobiles (min-width: 480px) and (max-width: 566px)*/
@media (min-width: 480px) and (max-width: 566.99px) {
    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 25px;
        right: 25px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 46px/50.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 45px/54.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -10px;
        }

    .article-title {
        font: normal 36.6px/45.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100%;
        height: auto;
    }

        .article-image img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px #e6e6e6;
        }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        font: normal 30px/34.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 24px/29.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 3px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 32.8px/34.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-right: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 138px !important;
        /*height: 87px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 0.8em;
        font-weight: bold;
        margin: 0px;
        padding: 3px;
        text-align: center;
        min-height: 80px;
        width: 138px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#region Mobiles (min-width: 375px) and (max-width: 479px)*/
@media (min-width: 375px) and (max-width: 479.99px) {
    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 38px/35.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 38px/48.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -6px;
        }

    .article-title {
        font: normal 30.6px/35.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100%;
        height: auto;
    }

        .article-image img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px #e6e6e6;
        }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        font: normal 26px/30.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 24px/29.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 2px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 30.8px/30.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-right: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 16px solid transparent;
        border-bottom: 16px solid transparent;
        border-left: 16px solid #ff6a00;
        display: inline-block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 157px !important;
        /*height: 99px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 0.8em;
        font-weight: bold;
        margin: 0px;
        padding: 3px;
        text-align: center;
        min-height: 60px;
        width: 157px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#region Mobiles (min-width: 320px) and (max-width: 374px)*/
@media (min-width: 320px) and (max-width: 374.99px) {
    .container--vertical-spacing {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 5px;
        right: 5px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 32px/28.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 32px/40.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -3px;
        }

    .article-title {
        font: normal 25.6px/28.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100%;
        height: auto;
    }

        .article-image img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px #e6e6e6;
        }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        font: normal 23px/25.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 20px/25.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 2px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 26.8px/25.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 14px solid #ff6a00;
        display: inline-block;
        margin-bottom: -5px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 14px solid #ff6a00;
        display: inline-block;
        margin-bottom: -5px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 130px !important;
        /*height: 80px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 0.7em;
        font-weight: bold;
        margin: 0px;
        padding: 3px;
        text-align: center;
        min-height: 60px;
        width: 130px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#region Extra Small Devices(max-width: 319px)*/
@media (max-width: 319.99px) {
    .container--vertical-spacing {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .vietnamunchronicled-container div {
        padding: 10px 0px;
    }

    .vietnamunchronicled-container {
        max-width: 85% !important;
    }


    .vietnamunchronicled-article-content {
        padding: 0px;
    }
    /*Article Title*/
    .hero-container {
        position: relative;
    }

    .hero-image {
        width: 100%;
        height: 100%;
    }

    .hero-image-title {
        text-align: right;
        position: absolute;
        bottom: 5px;
        right: 5px;
    }

        .hero-image-title .hero-image-title__first-line {
            font: normal 30px/25.6px 'Permanent Marker', cursive;
            letter-spacing: 0px;
            color: #F89721;
        }

        .hero-image-title .hero-image-title__second-line {
            font: normal 30px/30.4px 'Anton', sans-serif;
            letter-spacing: 0px;
            color: #FFFFFF;
            margin-top: -15px;
        }

    .article-title {
        font: normal 20.6px/23.8px 'Anton', sans-serif;
    }

    .article-text {
        font: normal 'lato', sans-serif;
    }

    .article-image {
        text-align: center;
        margin-right: auto !important;
        margin-left: auto !important;
        width: 100%;
        height: auto;
    }

        .article-image img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 2px #e6e6e6;
        }

    .image-credit {
        margin-top: 12px;
        font-size: 18px;
        line-height: 22px;
        color: #666;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .article-quote {
        text-align: center;
        font: normal 20px/21.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .backtohome-link {
        text-align: center;
        font: normal 20px/25.6px 'Permanent Marker', cursive;
        letter-spacing: 0px;
        color: #2B4242;
    }

        .backtohome-link a, .backtohome-link a:hover {
            color: #2B4242;
        }


    .article-text-more, .article-text-less {
        color: #ee9999;
        float: right;
        cursor: pointer;
    }

        .article-text-more i, .article-text-less i {
            position: relative;
            top: -40px;
            border: 2px solid #ee9999;
            padding: 1px;
        }

    .article-carousel-container {
        background-image: url("../img/Article_Carousel_Background.png");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        /*background-attachment: fixed;*/
    }

    .carousel-title {
        display: inline-block;
        font: normal 22.8px/20.16px 'Permanent Marker', cursive;
        padding: 0px 5px !important;
    }

    .swiper-button-nav {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 10px 0px;
    }

    .carousel-button-prev {
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 14px solid #ff6a00;
        display: inline-block;
        margin-bottom: -5px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel-button-next {
        width: 0;
        height: 0;
        border-top: 14px solid transparent;
        border-bottom: 14px solid transparent;
        border-left: 14px solid #ff6a00;
        display: inline-block;
        margin-bottom: -5px;
        cursor: pointer;
        padding: 0px !important;
    }

    .carousel__image {
        width: 264px !important;
        /*height: 135px !important;*/
        height: auto !important;
    }

    .carousel__text {
        background-color: #000000;
        color: #F89721;
        font-size: 0.7em;
        font-weight: bold;
        margin: 0px;
        padding: 3px;
        text-align: center;
        min-height: 60px;
        width: 264px;
    }

    .swiper-autoheight {
        padding: 50px 0px !important;
    }

    .swiper-slide {
        position: static !important;
    }

    .swiper-wrapper .swiper-slide-active {
        box-shadow: 10px 10px 20px 0 #1b1a1a, 0 6px 20px 0 #1b1a1a;
        transform: scale(1.3, 1.3);
        transition: transform .5s, filter 1.2s ease-in-out;
        z-index: 9999;
        /*filter: grayscale(100%);*/
    }

        .swiper-wrapper .swiper-slide-active:hover {
            filter: grayscale(0);
            transform: scale(1.1);
        }
}

/*#endregion*/

/*#endregion*/

/*#region Animation*/
.zoom-in-out-box {
    /*margin: 24px;
    width: 50px;
    height: 50px;
    background: #f500cc;*/
    animation: zoom-in-zoom-out 20s ease infinite;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.15, 1.15);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

/* Keyframes */
@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%, 100% {
        transform: rotateZ(0);
    }
}

/*#endregion*/