body {
    width: 100%;
    height: 100%;
    margin: 0;
}

@font-face {
    font-family: 'linecons';
    src: url('../fonts/linecons/linecons.eot') format('embedded-opentype'), url('../fonts/linecons/linecons.ttf') format('truetype'), url('../fonts/linecons/linecons.woff') format('woff'), url('../fonts/linecons/linecons.svg') format('svg'), url('../fonts/linecons/linecons.dev.svg') format('svg');
}

@font-face {
    font-family: 'm_plus';
    src: url('../fonts/RoundedMplus1c-Medium.eot');
    src: url('../fonts/RoundedMplus1c-Medium.woff2') format('woff2'), url('../fonts/RoundedMplus1c-Medium.woff') format('woff'), url('../fonts/RoundedMplus1c-Medium.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'm_plus_xtrabold';
    src: url('../fonts/RoundedMplus1c-ExtraBold.eot');
    src: url('../fonts/RoundedMplus1c-ExtraBold.woff2') format('woff2'), url('../fonts/RoundedMplus1c-ExtraBold.woff') format('woff'), url('../fonts/MPLUSRounded1c-ExtraBold.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'm_plus_reg';
    src: url('../fonts/RoundedMplus1c-Regular.eot');
    src: url('../fonts/RoundedMplus1c-Regular.woff2') format('woff2'), url('../fonts/RoundedMplus1c-Regular.woff') format('woff'), url('../fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Monserrat_Medium';
    src: url('../fonts/Montserrat/Montserrat-Medium.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Monserrat_Regular';
    src: url('../fonts/Montserrat/Montserrat-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Balsamiq-Regular';
    src: url('../fonts/Balsamiq_Sans/BalsamiqSans-Regular.ttf');
    font-weight: normal;
}


.article-wrapper {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

.d_article-wrapper {
    max-width: 800px;
    width: 90%;
    margin: 33px auto;
}

    .article-filter-row {
        margin: 28px 0;
        margin-top: 48px;
    }

.articlefilter{
    margin-bottom:20px;
}

    .articlefilter.search {
        background-size: 18px;
        background-repeat: no-repeat;
        background-position: right 4.5% center;
        background-image: url(../images/search-icon.png);
    }


.article-item {
    margin-bottom: 48px;
}

.article-item-body {
    box-shadow: 0 0 16px 4px rgba(0,0,0,0.1);
}

.article-itemcontent {
    display: block;
    vertical-align: middle;
    padding: 27px;
    width: 100%;
}


.article-itemimage {
    display: block;
}

.article-itemimg {
    display:block;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 43vw;
}

.article-header {
    width: 100%;
    display:flex;
}

.back-text {
    color:black;
    font-size:16px;
    font-family:m_plus;
    margin-top: 14px;
    text-align: right;
}

.back-text img {
    width: 28px;
}

    .back-text:hover{

    }

    .article-title {
        font-family: m_plus;
        font-size: 18px;
    }

.article-date {
    padding-bottom: 22px;
    align-self: center;
    font-size: 12px;
    color: #3ab3ff;
    font-family: Monserrat_Regular;
}

.article-itemcontent-text {
    font-size: 14px;
    line-height: 26px;
    min-height: 104px;
    font-family: m_plus_reg;
    font-weight: 600;
    overflow: hidden;
    text-align: justify;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}


.article-link {
    display: flex;
    margin-top: 30px;
}

.article-link > div{
    width:50%;
}

.read-text a {
    color: white;
    background-color: #3ab3ff;
    font-family: Monserrat_Medium;
    font-size: 14px;
    border-radius: 30px;
    padding: 10px 17px;
}


.d_img {
    height: 55vw;
    width: 100%;
    margin: 0 !important;
}

.d_article_link {
    padding: 20px 0;
    margin-left: -8px;
}


.override-clamp {
    overflow: initial;
    text-overflow: initial;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
}
}

@media screen and (min-width:550px) {
    .read-text a {
        padding: 10px 25px;
    }
}

@media screen and (min-width:880px) {

    .article-item-body {
        display: table; 
    }

    .articlefilter {
        width:300px;
        margin-right:20px;
        vertical-align:middle;
        display:inline-block;
    }

    .article-itemcontent {
        display: table-cell;
        padding: 0 4.5%;
    }


    .article-itemimage {
        display: table-cell;
    }

    .article-itemimg {
        width: 390px;
        height: 285px;
    }

    .d_img {
        height: 46vw;
        width: 100%;
    }
}

@media screen and (min-width:1124px) {
}

@media screen and (min-width:1280px) {
}

@media screen and (min-width:1360px) {

    .articlefilter.search {
        background-size: 1.324vw;
    }

    .articlefilter {
        width: 22.059vw;
        margin-right: 1.471vw;
    }

    .article-wrapper {
        max-width: 73.529vw;
    }

    .article-itemimg {
        width: 28.676vw;
        height: 20.956vw;
    }

    .article-itemcontent {

    }

    .article-header {
        margin-bottom: 1.618vw;
    }

    .article-title {
        font-size: 1.324vw;
    }

    .article-date {
        padding-bottom: 1.618vw;
        font-size: 0.882vw;
    }

    .article-itemcontent-text {
        min-height: 7.647vw;
        font-size: 1.029vw;
        line-height: 1.912vw;
    }

    .article-link {
        margin-top: 2.206vw;
    }

    .read-text a {
        padding: 0.735vw 1.838vw;
        font-size: 1.029vw;
        border-radius: 2.206vw;
    }

    .d_article-wrapper {
        max-width: 62.500vw;
        width: 90%;
        margin: 2.426vw auto;
    }


    .back-text {
        font-size: 1.176vw;
        margin-top: 1.029vw;
    }

        .back-text img {
            width: 2.059vw;
        }

    .d_img{
        height:40vw;
        width:100%;
    }

    .d_article_link {
        padding: 1.471vw 0;
        margin-left: -0.588vw;
    }

}