﻿.BlogFrontMaster { width: 100%; background-color: #fff; margin: 0; padding: 0 }

    .BlogFrontMaster .SidebarTop { margin-top: 0; text-align: center }

.BlogSidebarTop { min-height: 34px; border-bottom: solid 2px #6a6a6a; width: 100%; text-align: center; padding: 10px 0 }

.BlogSidebarTopTitle { color: #000; font-size: 24px; font-family: Prompt-Bold; line-height: 34px }

.BlogSidebarRight { padding: 20px; border-bottom: solid 2px #6a6a6a }

.BlogSidebarBottom,
.BlogSidebarTopImgLeft,
.BlogSidebarTopImgRight { display: none }

.BlogNavList { width: 100%; clear: left; float: left }

.BlogNavNormalList { width: 100% }

.BlogNavNormalListLink a { padding: 5px 0 5px 20px; width: 100%; vertical-align: middle; display: block; text-decoration: none; white-space: normal; text-align: left; font-size: 14px; background: url(Images/Bullet/bullet3.gif) no-repeat left center }

.BlogNavNormalListMoreLink { text-align: right; padding: 4px 5px 0; display: none }

    .BlogNavNormalListMoreLink a { color: #333; text-decoration: underline; padding-right: 19px; background: url(images/bullet/more.gif) no-repeat right center; font-size: 12px }

        .BlogNavNormalListMoreLink a:hover { color: #806ab0 }

.BlogDetails { width: 100%; margin: 0 auto 10px }

.BlogDetailsTop { width: 100%; min-height: 40px; line-height: 30px; vertical-align: middle; text-align: left; border-bottom: solid 1px #6a6a6a; display: none }

.BlogDetailsTopTitle { color: #333; font-size: 18px; line-height: 30px; font-weight: 700 }

.BlogDetailsTopImgLeft { display: none }

.BlogDetailsTopImgRight { display: none }

.BlogDetailsRight { padding: 0 0 20px; border-bottom: solid 1px #bbbaba }

.BlogDetailsBottom { display: none }

.BlogFormView { width: 770px }

.BlogDetailInfo { float: left; width: 33%; padding-right: 10px }

.BlogDetailsImage { float: right; width: 66% }

.BlogDetailTitle { clear: left; float: left; width: 100%; font-size: 30px; line-height: 36px; font-family: Prompt-Bold; text-transform: uppercase }

.BlogDetailCategory { clear: left; float: left; margin-bottom: 15px }

    .BlogDetailCategory a { float: left; background-color: #604d8d; padding: 5px 18px; font-size: 12px; line-height: 30px; font-family: Prompt-Medium; text-transform: uppercase; color: #fff }

        .BlogDetailCategory a:hover { background-color: #806ab0; color: #fff }

.BlogDetailsDefaultPublisherDiv { clear: left; float: left; width: 100%; margin-top: 60px; font-size: 14px }

.BlogPublisher { color: #604d8d }

.BlogDetailsDefaultBlogContentDiv { clear: both; float: left; font-size: 14px; line-height: 24px; margin: 10px 0; width: 100%; border-top: solid 4px #f3f2f2; padding-top: 35px }

    .BlogDetailsDefaultBlogContentDiv p { line-height: initial; margin-bottom: 20px }

.BlogDetailsDefaultTagsCategoryDiv { clear: left; float: left; width: 50%; font-size: 14px; color: #604d8d; line-height: 24px; margin: 10px 0 }

.BlogDetailsSocialButton { float: right; margin: 15px 0 0 }

.BlogDetailsFacebookDiv { float: left }

.BlogDetailsLineDiv,
.BlogDetailsTwitterDiv { float: left; padding-left: 5px }

.BlogListTop { width: 100%; margin: 0 auto; clear: left; float: left; padding: 5px 0 }

.BlogListTop { width: 100%; line-height: 40px; vertical-align: middle; text-align: center; border-bottom: solid 1px #d6d6d6; text-align: center }

    .BlogListTop .BlogDetailsTopTitle { color: #000; font-size: 30px; font-family: Prompt-Bold; line-height: 40px }

.BlogListRight { padding: 5px 0 }

.BlogListItem { margin: 20px 0 20px .5%; width: 32.5%; display: inline-block; vertical-align: top; padding-bottom: 20px }

.BlogListItemImage { width: 100%; margin-bottom: 10px; min-height: 285px; max-height: 285px }

    .BlogListItemImage img { max-height: 285px }

.BlogListItemName { clear: left; float: left; width: 100%; line-height: 28px; font-size: 22px; text-align: left; font-family: Prompt-Bold }

.BlogListItemDate { clear: left; float: left; width: 100%; font-size: 14px; line-height: 20px; color: #6a6a6a; margin-top: 28px; font-family: Prompt-Regular }

.BlogListDefaultItemPerPage { float: left; font-size: 12px; line-height: 30px }

    .BlogListDefaultItemPerPage select { float: left; margin-right: 10px; margin-top: 6px; width: 40px; background-color: #f4f4f4 }

    .BlogListDefaultItemPerPage .OptionControlTitle { float: left; margin-right: 10px }

.SearchBox { width: 100%; margin-bottom: 0; clear: left; padding-top: 10px }

    .SearchBox .SidebarTop { border-bottom: solid 2px #6a6a6a; padding: 10px 0 }

    .SearchBox .SidebarRight { padding: 20px 0; width: 100% }

.SidebarBottom,
.SidebarTopImgLeft,
.SidebarTopImgRight { display: none }

input[type=text].SearchBoxTextBox { z-index: 1; width: 82% !important; border: solid 2px #a1a1a1; border-right: none; font-size: 14px; height: 40px; line-height: 36px; float: left; margin-bottom: 5px; font-family: Prompt-Regular; padding: 0 10px }

.SearchBox .BtnStyle1 { width: 18%; margin: 0; padding: 0; height: 40px; background: #000 url(Images/Icon/icon-search-blog.png) no-repeat center center; font-size: 0; line-height: 0 }

    .SearchBox .BtnStyle1:hover { background: #604d8d url(Images/Icon/icon-search-blog.png) no-repeat center center }

.BlogComment .CommonPageTop { display: none }

.BlogComment .CommonPageRight { padding-top: 0 }

.BlogCommentDiv { width: 100% }

    .BlogCommentDiv table { width: 100% }

.BlogCommentTitle { float: left; font-family: Prompt-Bold; font-size: 18px }

.BlogCommentTextArea { width: 100%; height: 114px; font-size: 13px }

.BlogCommentPostDiv { width: 66%; margin: 0 }

.BlogCommentPagingDiv { line-height: 30px; padding: 10px 0; text-align: right }

.BlogCommentPostLabel { padding-bottom: 10px; font-weight: 700 }

.BlogCommentPostButton { float: right; margin-top: 10px }

    .BlogCommentPostButton .BtnStyle2 { background-color: #24252a }

        .BlogCommentPostButton .BtnStyle2:hover { background-color: #604d8d }

.review-item { font-family: Prompt-Regular; font-size: 14px }

.ArchiveBox .BlogSidebarRight { border: 0 }

.RecentPost .BlogSidebarRight { padding: 20px 0 10px }

.RecentPost .ImageRecentPost { float: left; width: 50%; height: 102px; padding-right: 8px; position: relative }

    .RecentPost .ImageRecentPost img { max-height: 102px }

.TitleRecentPost { width: 50%; float: right; margin-top: 10px }

.DateRecentPost { width: 50%; float: right; font-size: 10px; color: #868688; line-height: 14px; margin-top: 20px; clear: right }

.RecentPost .BlogNavNormalListLink { border-top: solid 2px #dfdfe0; padding-bottom: 10px }

    .RecentPost .BlogNavNormalListLink a { padding: 0; font-size: 12px; line-height: 16px; font-family: Prompt-Medium; background: 0 0 }

.sticky-share { position: fixed; bottom: 0; z-index: 100; width: 100%; display: none }

    .sticky-share a { display: block; float: left; font-size: 0; height: 50px; border-top: solid 1px #ccc }

        .sticky-share a,
        .sticky-share a:hover { color: #fff }

    .sticky-share .Facebook { background-color: #3c5b9a }

    .sticky-share .Twitter { background-color: #1da0f1 }

    .sticky-share .Line { background-color: #36b419 }

    .sticky-share .fb { background-image: url(Images/button/sticky-share-facebook.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 23px; display: table; margin: auto }

    .sticky-share .tw { background-image: url(Images/button/sticky-share-twitter.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 32px; display: table; margin: auto }

    .sticky-share .ln { background-image: url(Images/button/sticky-share-line.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 38px; display: table; margin: auto }

    .sticky-share .text1 { font-size: 16px; line-height: 50px; margin: auto; height: 50px }

    .sticky-share.threeitem a { width: 33.33% }

.balloon-share { position: fixed; z-index: 100; display: none; background: url(Images/button/share-icon.svg) no-repeat center center; width: 30px; height: 30px; bottom: 63px; left: 18px }

    .balloon-share .Facebook { width: 40px; height: 40px; background: url(Images/button/balloon-share-fb.svg) no-repeat center center; position: inherit; bottom: 18px }

    .balloon-share .Twitter { width: 40px; height: 40px; background: url(Images/button/balloon-share-tw.svg) no-repeat center center; position: inherit; bottom: 18px }

    .balloon-share .Line { width: 40px; height: 40px; background: url(Images/button/balloon-share-line.svg) no-repeat center center; position: inherit; bottom: 18px }

.BlogListModernize { width: 100%; clear: left; float: left; position: relative }

.BlogListModernizePageControlPanel { right: 0; top: 10px; position: absolute }

@media only screen and (max-width:1189px) {
    .BlogListItem { width: 32.25% }
    .BlogListItemImage { max-height: 250px; min-height: 230px; max-height: 230px }
    .BlogDetailsDefaultPublisherDiv { margin-top: 40px }
}

@media only screen and (max-width:979px) {
    .BlogListItemDate { font-size: 14px; line-height: 20px; margin-top: 20px }
    .BlogListItemName { font-size: 18px; line-height: 24px }
    .BlogListItemImage { max-height: 185px; min-height: 185px }
    .BlogDetailInfo { width: 100%; padding-right: 0 }
    .BlogDetailsImage { width: 100% }
    .BlogDetailTitle { font-size: 20px; line-height: 26px; font-family: Prompt-Medium }
    .BlogDetailCategory { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; width: 100% }
    .BlogDetailsDefaultPublisherDiv { margin: 15px 0 }
    .BlogSidebarTop,
    .SearchBox .SidebarTop { min-height: 20px }
    .ArchiveBox .SidebarTopTitle,
    .BlogSidebarTopTitle,
    .SearchBox .SidebarTopTitle { font-size: 20px; line-height: 28px; font-family: Prompt-Medium }
    .BlogDetailsDefaultTagsCategoryDiv { width: 100% }
    .BlogCommentPostDiv { width: 100% }
    .BlogCommentTitle { font-size: 14px }
    .BlogDetailsSocialButton { clear: left; float: left }
}

@media only screen and (max-width:767px) {
    .BlogListItem { width: 100%; margin: 0 0 5px; padding: 0; clear: left; float: left; border-top: solid 2px #dfdfe0 }
    .BlogListItemImage { width: 49%; min-height: 0; max-height: none; float: left; margin-top: -2px }
        .BlogListItemImage a img { max-height: inherit; max-width: 100% }
    .BlogListItemName { width: 49%; clear: none; float: right; margin: 15px 0; font-size: 16px; font-family: Prompt-Medium; line-height: 22px }
    .BlogListItemDate { font-size: 12px; margin-top: 20px }
    .BlogListItem:nth-child(1) { border: 0 }
        .BlogListItem:nth-child(1) .BlogListItemImage { width: 100% }
        .BlogListItem:nth-child(1) .BlogListItemName { width: 100%; font-size: 18px; margin-top: 5px }
    .BlogListTop { margin-bottom: 14px }
    .BlogListModernizePageControlPanel { display: none }
    .BlogDetailsSocialButton { display: none }
    .ArchiveBox,
    .BlogCategoryBox,
    .SearchBox { display: none }
    .BlogSidebarTop { text-align: left }
    .BlogSidebarTopTitle { font-size: 18px; line-height: 24px }
    .RecentPost { padding: 10px 0; border-top: solid 1px #ccc }
        .RecentPost .BlogSidebarRight,
        .RecentPost .BlogSidebarTop { border-bottom: 0; padding: 12px 0 }
        .RecentPost .ImageRecentPost { width: 40%; height: 115px }
            .RecentPost .ImageRecentPost img { max-height: 115px }
    .TitleRecentPost { width: 60%; margin-top: 10px }
    .RecentPost .BlogNavNormalListLink a { font-size: 14px; line-height: 20px }
    .DateRecentPost { width: 60%; font-size: 12px }
    .BlogDetailsRight { padding-top: 0 }
    .BlogDetailCategory { border-top: 0 }
    .BlogDetailsDefaultPublisherDiv { font-size: 12px; color: #868688 }
    .BlogPublisher { color: #868688 }
    .BlogDetailTitle { font-size: 18px }
    .BlogDetailsDefaultBlogContentDiv { border: 0; padding-top: 10px; margin-bottom: 0 }
    .BlogDetailMaster .ContentMenuSitemapDiv .row { padding: 0 }
}

@media only screen and (max-width:479px) {
    .BlogListTop { line-height: 25px }
    .BlogListDefaultItemPerPage { clear: left; float: none; display: none; margin: 0 auto 5px }
    .BlogDetailsTop { line-height: 25px }
    .BlogCommentPagingBox { text-align: center; float: none }
    .BlogCommentTitle { float: none; font-weight: 700; text-align: center }
    .BlogCommentPagingDiv { text-align: center }
    .BlogDetailsDefaultPublisherDiv { width: 100%; padding: 0 0 15px }
    .BlogDetailsFacebookDiv,
    .BlogDetailsLineDiv,
    .BlogDetailsTwitterDiv { width: auto }
    .BlogListItem { margin: 0 0 5px }
    .BlogListItemName { font-size: 13px; line-height: 18px; margin: 10px 0 }
    .BlogListItemDate { font-size: 10px }
    .BlogListItem:nth-child(1) .BlogListItemImage { width: 100% }
    .BlogListItem:nth-child(1) .BlogListItemName { width: 100%; font-size: 18px; margin-top: 5px }
    .BlogListItem:nth-child(1) .BlogListItemDate { font-size: 12px }
    .RecentPost .ImageRecentPost { width: 50%; height: 102px }
        .RecentPost .ImageRecentPost img { max-height: 102px }
    .TitleRecentPost { width: 50%; margin-top: 10px }
    .RecentPost .BlogNavNormalListLink a { font-size: 12px; line-height: 16px }
    .DateRecentPost { width: 50%; font-size: 10px }
    .BlogDetailTitle { font-size: 16px; line-height: 22px }
    .BlogNavList { margin: 10px 0 }
}
