.spring {
    flex: 1 1 auto
}


/* ==================== Article List Control ==================== */


/* Introduction Three Columns Image */

.article-list-control.three-col-image {}

.article-list-control.three-col-image .content {
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden
}

.article-list-control.three-col-image .content>.title {
    font-size: 2.4em;
    font-weight: 700;
    text-align: center
}

.article-list-control.three-col-image .content>.description {
    font-weight: 700;
    font-size: 1em;
    line-height: 1.9em;
    text-align: center
}

.article-list-control.three-col-image .content .articles {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
    padding-top: 60px
}

.article-list-control.three-col-image .content .articles .item {
    width: 33.33%;
    margin: 20px 0;
    padding: 0 20px;
    color: #1e1e1e;
    text-decoration: none;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 60px;
}

.article-list-control.three-col-image .content .articles .item .image {
    padding-bottom: 61.11111111%;
    border-radius: 5px;
    background: center;
    background-size: cover;
    background-repeat: no-repeat
}

.article-list-control.three-col-image .content .articles .item .title {
    margin: 1em 0;
    font-weight: 600
}

.article-list-control.three-col-image .content .articles .item .excerpt {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 1em
}


/* Introduction Three Columns Image B */

.article-list-control.three-col-image-b {}

.article-list-control.three-col-image-b>.Content {
    overflow: hidden
}

.article-list-control.three-col-image-b .content {
    display: flex;
    overflow: hidden;
    margin: 0 -15px
}

.article-list-control.three-col-image-b .content .panel1 {
    width: 25%;
    padding: 0 15px;
    box-sizing: border-box
}

.article-list-control.three-col-image-b .content .panel1 .title {
    font-size: 2em;
    font-weight: 700
}

.article-list-control.three-col-image-b .content .panel1 .description {
    margin-top: 10px;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.9em
}

.article-list-control.three-col-image-b .content .panel1 .body {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: 300
}

.article-list-control.three-col-image-b .content .panel1 .action {
    margin-top: 30px;
    padding: 9px 0;
    text-align: center;
    background: #EC0328;
    font-size: 1.2em;
    color: #fff;
    border-radius: 6px;
    transition: background 0.4s
}

.article-list-control.three-col-image-b .content .panel1 .action:hover {
    background: #B2001C
}

.article-list-control.three-col-image-b .content .articles {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    margin: -15px 0
}

.article-list-control.three-col-image-b .content .articles .item {
    width: 33.33%;
    padding: 15px;
    color: #1e1e1e;
    text-decoration: none;
    box-sizing: border-box
}

.article-list-control.three-col-image-b .content .articles .item:hover {
    color: #2a377a
}

.article-list-control.three-col-image-b .content .articles .item .image {
    padding-bottom: 61.11111111%;
    border-radius: 5px;
    background: center;
    background-size: cover
}

.article-list-control.three-col-image-b .content .articles .item .title {
    margin-top: 1.1em;
    font-weight: 500;
    font-size: 1.12em
}

.article-list-control.three-col-image-b .content .articles .item .learn-more {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    color: #EC0328;
    text-decoration: none
}

.article-list-control.three-col-image-b .content .articles .item .learn-more::after {
    content: "\e902";
    margin: 2px 0 0 6px;
    font-family: icomoon;
    font-size: 1.5em
}


/* Introduction Two Columns Image */

.article-list-control.three-col-image {}

.article-list-control.two-col-image .content {
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden
}

.article-list-control.two-col-image .content>.title {
    margin-top: 10px;
    font-size: 2.4em;
    font-weight: 700;
    text-align: center
}

.article-list-control.two-col-image .content>.description {
    font-weight: 700;
    font-size: 1em;
    line-height: 1.9em;
    text-align: center
}

.article-list-control.two-col-image .content .articles {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px;
    padding-top: 30px
}

.article-list-control.two-col-image .content .articles .item {
    display: flex;
    align-items: center;
    width: 50%;
    padding: 15px 20px;
    color: #1e1e1e;
    box-sizing: border-box
}

.article-list-control.two-col-image .content .articles .item .image {
    flex: 0 0 auto;
    width: 260px;
    height: 225px;
    border-radius: 5px;
    background: center;
    background-size: cover
}

.article-list-control.two-col-image .content .articles .item .panel2 {
    margin: 0 40px
}

.article-list-control.two-col-image .content .articles .item .panel2 .title {
    font-weight: 500;
    font-size: 1.14em
}

.article-list-control.two-col-image .content .articles .item .panel2 .learn-more {
    margin-top: 30px
}

.article-list-control.two-col-image .content .articles .item .panel2 .learn-more a {
    display: inline-flex;
    align-items: center;
    color: #ec0328;
    text-decoration: none
}

.article-list-control.two-col-image .content .articles .item .panel2 .learn-more a::after {
    content: "\e902";
    margin: 2px 0 0 6px;
    font-family: icomoon;
    font-size: 1.5em
}


/* Introduction Vertical */

.article-list-control.intro-vertical {}

.article-list-control.intro-vertical>.Content {
    overflow: hidden
}

.article-list-control.intro-vertical .content {
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden
}

.article-list-control.intro-vertical .content>.title {
    margin-bottom: 18px;
    font-size: 2.4em;
    font-weight: 700
}

.article-list-control.intro-vertical .content>.description {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.9em
}

.article-list-control.intro-vertical .content>.body {
    font-size: 16px
}

.article-list-control.intro-vertical .content .articles {
    display: flex;
    flex-direction: column;
    margin-top: 35px;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6
}

.article-list-control.intro-vertical .content .articles .item {
    display: flex;
    align-items: center;
    padding: 4px 0px;
    color: #1e1e1e;
    text-decoration: none;
    border-bottom: 1px dashed #e6e6e6
}

.article-list-control.intro-vertical .content .articles .item:last-child {
    border-bottom: none
}

.article-list-control.intro-vertical .content .articles .item .title-container {
    display: flex
}

.article-list-control.intro-vertical .content .articles .item .title-container .title {
    padding-bottom: .4em;
    font-weight: 500
}

.article-list-control.intro-vertical .content .articles .item .title-container .arrow {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    overflow: hidden;
    color: #ec0328
}

.article-list-control.intro-vertical .content .articles .item .title-container .arrow::before {
    content: "\e902";
    margin-left: -16px;
    font-family: icomoon;
    transition: all .4s
}

.article-list-control.intro-vertical .content .articles .item .title-container .arrow::after {
    content: "\e902";
    font-family: icomoon
}

.article-list-control.intro-vertical .content .articles .item .description {
    font-size: 0.8em;
    color: #7d7d7d
}

.article-list-control.intro-vertical .content .articles .item .image {
    width: 240px;
    height: 120px;
    margin-left: 10px;
    border-radius: 5px;
    background: center;
    background-size: cover
}

.article-list-control.intro-vertical .content .articles .item:hover .title {
    color: #2a377a
}

.article-list-control.intro-vertical .content .articles .item:hover .arrow::before {
    margin-left: 0px;
}

.vertical-list .thumb-right-list li .image-cell {
    margin-top: 20px;
    margin-bottom: 20px;
}

.article-list-control.intro-vertical h6 {
    color: #222;
}

.vertical-list .h4 {
    font-size: 18px !important;
    margin-bottom: 20px
}

.vertical-list p {
    font-size: 16px !important;
}

.vertical-list .thumb-right-list li .content-list .image-cell {
    height: 250px;
    background: center;
    background-size: cover;
}

.article-list-control .thumb-right-list .content-list {
    flex-direction: row !important;
}

.article h2.title {
    font-size: 32px;
    text-align: center;
}

img.articleImg {
    max-width: 100%;
    float: left;
    margin-bottom: 30px;
}

@media (min-width: 1024px) {
    .vertical-list .thumb-right-list li .content-list .content-cell {
        width: calc(100% - 300px);
    }
    .vertical-list .thumb-right-list li .content-list .image-cell {
        width: 100%;
    }
    .article-list-control .thumb-right-list .content-list .content-cell {
        padding-left: 30px;
    }
}

@media (max-width: 768px) {
    .content-list .image-cell {
        width: 100%;
        max-width: 100%;
    }
    .vertical-list .thumb-right-list li .content-list .content-cell {
        width: 100%;
        margin-left: 0;
    }
    .content-cell .icon-font {
        display: none;
    }
}

.article-list-control.vertical-list .content>.title {
    font-size: 42px;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
}

.vertical-list .post-tilte {
    margin-bottom: 10px !important;
    width: 100% !important;
}

.vertical-list .post-tilte .color-primary {
    color: #2ADB98
}


/* Three Columns Text Only */

.article-list-control.three-columns-text-only {}

.article-list-control.three-columns-text-only>.Content {
    overflow: hidden
}

.article-list-control.three-col-image .content>.title {
    font-size: 42px;
    font-weight: 500;
    text-align: center;
    line-height: 60px;
}

.article-list-control.three-columns-text-only>.Content .content>.description {
    margin-top: 10px;
    font-weight: 700;
    color: #1e1e1e
}

.article-list-control.three-columns-text-only>.Content .content>.articles {
    display: flex;
    flex-wrap: wrap;
    margin: 30px -20px 0
}

.article-list-control.three-columns-text-only>.Content .content>.articles .item {
    display: flex;
    padding: 30px 20px;
    width: 33.333%;
    flex-direction: column;
    box-sizing: border-box
}

.article-list-control.three-columns-text-only>.Content .content>.articles .item>.title {
    font-weight: 700;
    color: #1e1e1e
}

.article-list-control.three-columns-text-only>.Content .content>.articles .item>.description {
    margin-top: 10px;
    color: #7d7d7d
}

.article-list-control.three-columns-text-only>.Content .content>.articles .item>.learn-more {
    display: flex;
    align-items: center;
    margin-top: 15px;
    text-decoration: none;
    color: #EC0328
}

.article-list-control.three-columns-text-only>.Content .content>.articles .item>.learn-more::after {
    content: "\e902";
    margin-left: 5px;
    font-family: icomoon
}


/* Video + Media Slider */

.article-list-control.video-media-slider {}

.article-list-control.video-media-slider>.Content {
    overflow: hidden
}

.article-list-control.video-media-slider>.Content .content>.title {
    font-size: 2.4em;
    font-weight: 700
}

.article-list-control.video-media-slider>.Content .content>.description {
    margin-top: 10px;
    font-weight: 700;
    color: #1e1e1e
}

.article-list-control.video-media-slider>.Content .content>.articles {
    margin: 30px -10px 0
}

.article-list-control.video-media-slider>.Content .content>.articles .item {
    display: flex;
    padding: 0 10px;
    width: 33.333%;
    flex-direction: column;
    box-sizing: border-box;
    text-decoration: none;
    color: #1e1e1e
}

.article-list-control.video-media-slider>.Content .content>.articles .item:hover {
    color: #2a377a
}

.article-list-control.video-media-slider>.Content .content>.articles .item>.image {
    padding-bottom: 61.11111111%;
    background-size: cover;
    border-radius: 6px
}

.article-list-control.video-media-slider>.Content .content>.articles .item>.title {
    margin-top: .8em;
    font-weight: 700
}

.article-list-control.video-media-slider>.Content .content>.articles .item.has-video {}

.article-list-control.video-media-slider>.Content .content>.articles .item.has-video>.image {
    position: relative
}

.article-list-control.video-media-slider>.Content .content>.articles .item.has-video>.image::before {
    content: "\e91c";
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -.5em 0 0 -.5em;
    font-family: icomoon;
    font-size: 4em;
    color: #fff;
    transition: color .4s
}

.article-list-control.video-media-slider>.Content .content>.articles .item.has-video:hover>.image::before {
    color: #EC0328
}


/* =================== Article Data Page =================== */

.article {
    padding: 40px 0 40px 0
}

.article .content {
    max-width: 1000px;
    margin: 0 auto
}

.article .content .feature-top-image,
.article .content img.articleImg {
    width: 450px;
    margin: 0 40px 20px 0;
    background: top center no-repeat;
    background-size: cover;
    float: left;
}

.article .content h1.title {
    font-size: 2em;
    text-align: center;
}

.article .content .article-date {
    text-align: center;
    color: #666
}

.articles .item .article-date {
    margin-top: 1rem;
}

.article .content .article-header {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.article .content .article-header .author {
    font-weight: 500
}

.article .content .article-header .author:not(:empty) {
    margin-right: 10px
}

.article .content .article-header .create-date {
    margin-right: 8px;
    font-weight: 500
}

.article .content .article-header .update-date {
    opacity: .7;
    font-weight: 500
}

.relatedPost {
    background-color: #F6F7F8
}

.relatedPost h4.title {
    font-size: 1.8em !important;
    text-align: center;
}

.relatedPost .articles {
    padding-top: 20px !important
}

.relatedPost .image {
    cursor: pointer;
    transition: all 0.4s ease
}

.relatedPost .image:hover {
    opacity: 0.7
}

.relatedPost .title {
    font-weight: 600 !important;
    transition: all 0.4s ease
}

.relatedPost .item {
    padding-bottom: 20px !important
}

.article .content .body {
    margin-top: 25px;
    max-width: 1000px;
    margin: 20px auto
}

.article .content .body p {
    font-size: 16px;
    line-height: 25px;
}

.article .content ul {
    padding-left: 30px
}

.article .content ul li {
    list-style-type: disc
}

.article h3 {
    font-size: 20px;
    line-height: 45px;
    color: #162930 !important;
}