#SiteGrid { max-width: 1200px; /* padding: 0 15px; */ }
#GridPage { float: right; width: 70%; margin: 0; }
#GridRight { float: none; width: 100%; display: block; margin: 0; padding-top: 7%; margin-bottom: 40px; }
#GridRight::before { content: ''; position: absolute; top: 0; left: 0; right: 0; background-color: #e0c4df; width: 100%; height: 50%; z-index: -1; }

#GridLeft { float: left; width: 30%; display: block; margin: 0; }
#KDM { padding: 0 15px; }
#GridContent { padding: 0 15px; }



@media(max-width: 767px) {
    #GridRight { padding-top: 0; }
    #GridRight::before { content: none; }
    #GridLeft, #GridPage { float: none; width: 100%; }
    #KDM { padding: 0 15px; border-right: none; }
}

#PageView #body { font-size: 1.8rem; line-height: 1.6; }
#body { margin: 0; width: 100% !important; }
h2, h3, h4 { font-weight: 600; }
#body > h3 {  color: #9b288c; margin: 0 0 10px; }
#body > h3 { margin: 0 0 15px; }
#headline h1 { margin: 0; padding: 0; width: 100%; }
#subheadline h2 { margin: 0; width: 100%; }
#writer { margin: 0; width: 100%; }


/* Single Post */
.post-head { background-color: #9b288c; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 1170px; margin: 0 auto; }

.post-head > div { -webkit-box-flex: 1; -ms-flex: 1 0 50%; flex: 1 0; width: 50%; }

.post-head-title { font-size: 5rem; font-weight: 600; margin: 0; line-height: 1.05; }
.post-head-text { font-size: 1.8rem; color: rgb(255 255 255 / 80%); }
.post-head-content { padding: 5% 4% 3%; }
.post-head-info { position: relative; font-size: 1.6rem; margin-top: 10px; }
.post-head-author::before { content: ''; display: block; width: 35px; height: 2px; background-color: #fff; margin-bottom: 10px; }
.post-head-img { position: relative; background-size: cover; background-position: top center; }
.post-head-img::before { content: ''; display: block; padding-top: 68.38%; }
.post-head-date { margin-top: 5px; }
.post-head-tags { margin-top: 15px; }
.post-head-tags > a { display: inline-block; margin-left: 5px; background-color: #f9ecbe; font-size: 1.3rem; border-radius: 100px; padding: 4px 10px; color: #000; pointer-events:none; }
.post-head-social { margin-top: 40px; }
.post-head-duration { position: absolute; bottom: 0; right: 0; background-color: #9b288c; padding: 3px 7px; color: #fff; }
.post-head-duration > * { display: inline-block; vertical-align: middle; }
.post-head-duration svg { fill: #fff; }
.shareTitle { display: inline-block; margin-left: 8px; }
.socialShare { display: inline-block; direction: ltr; font-size: 1.8rem; text-align: right; }
.socialShare > a { display: inline-block; vertical-align: middle; height: 22px; }
.socialShare > a.mailShareIcon { height: 16px; }
.socialShare > a.facebookShareIcon { height: 20px; }
.socialShare > a + a { margin-left: 15px; }
.socialShare svg { height: 100%; }




@media(min-width: 1025px) {
    #KDM { border-right: 1px solid #ccc; }
    #MoreArticles [class*="col-"] { padding: 0; }
    #MoreArticles > .row { margin: 0; }
}




@media(max-width: 991px) {
    #GridLeft, #GridPage { float: none; width: auto; margin: 0; }
    #GridLeft { margin: 0; }
}


@media(max-width: 767px) {

    /* Social Share */

    .socialShare { font-size: 1.4rem; }
    .socialShare > a { height: 16px; }
    .socialShare > a.facebookShareIcon { height: 16px; }
    .socialShare > a.mailShareIcon { height: 14px; }


    /* Single Post */
    .post-head { flex-direction: column-reverse; background-color: transparent; }
    .post-head .post-head-content { width: calc(100% - 30px); flex-basis: calc(100% - 30px); margin: 0 auto; background: #9b288c; }
    .post-head .post-head-img { width: 100%; margin-bottom: -15%; z-index: -1; }
    .post-head-title { font-size: 3rem; }
    .post-head-social { position: absolute; left: 0; bottom: 0; margin: 0; display: flex; flex-direction: column-reverse; overflow: hidden; align-self: flex-end; }
    .post-head-content { padding: 5%; }
    .post-head-text, .post-head-info { font-size: 1.6rem; }
    .post-head-info > div:not(.post-head-social) { margin-top: 10px; }
    .post-head-tags > a { padding: 4px 8px; }
    .post-head-duration { top: 0; bottom: auto; }

    .post-head-social > .socialShare { display: flex; flex-direction: column; align-items: center; transform: translateY(100%); opacity: 0; pointer-events: none; transition: .35s ease-in-out; margin-left: auto; }

    .post-head-social .shareTitle { margin: 0; background: #9b288c; position: relative; z-index: 1; }

    .post-head-social .socialShare > a { margin: 0 0 10px; }
    .post-head-social.open .socialShare { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .post-head-social .shareTitle::after { content: ''; display: inline-block; width: 16px; height: 16px; background-image: url(../../../000Frames/site/images/share.svg); background-size: 100%; vertical-align: middle; margin-right: 10px; }
}