/*BlogMaster Begin*/

.BlogFrontMaster { width: 100%; background-color: #FFF; margin: 0px; padding: 0px; }

    .BlogFrontMaster .SidebarTop { margin-top: 0; text-align: left; }
.row.BlogMainDiv { margin-top: 30px; margin-bottom: 30px; }
/*BlogMaster End*/
/*CommonSidebar Begin*/
.BlogSidebarTop { position: relative; width: 100%; padding-bottom: 10px; }

    .BlogSidebarTop::before { content: ""; position: absolute; width: 80%; height: 3px; position: absolute; left: 0; bottom: 0; background: linear-gradient(to right, #406037,#406037); }
.BlogSidebarTopTitle { font-size: 26px; line-height: 1.3; text-transform: uppercase; font-family: ThaiSansNeueBold; color: #406037; }
.BlogSidebarRight { padding: 12px 0; }

.BlogSidebarTopImgLeft, .BlogSidebarTopImgRight, .BlogSidebarBottom { display: none; }

/*CommonSidebar End*/
/*CommonSideBanner Begin*/
.SideBannerTop { display: none; }

.SideBannerBottom { display: none; }
/*CommonSideBanner End*/
/*ArchiveList Begin*/
.ArchiveListGridView { clear: both; margin: 20px auto; text-align: left; border: solid 1px #b7b7b7; }
.CommonGridView.ArchiveListGridView { width: 240px; }
    .CommonGridView.ArchiveListGridView,
    .CommonGridView.ArchiveListGridView tr,
    .CommonGridView.ArchiveListGridView td { border: 0; background: none; text-align: left; }
.ArchiveListDateHeaderColumnDateStyle { display: none; }
.ArchiveListTopicItemColumnTopicStyle { font-size: 20px; font-family: ThaiSansNeueBold; }
.CommonGridView .ArchiveListTopicItemColumnTopicStyle a { text-decoration: none; line-height: 35px; text-transform: uppercase; letter-spacing: 1px; }
.ArchiveListTopicItemColumnTopicStyle a:before { content: "\e91e"; font-family: 'icomoon'; font-size: 20px; margin-right: 12px; color: #406037; }
.ArchiveListEmptyRowStyle { border: solid 1px #a7a7a7; }

.ArchiveListDateItemsColumnDateStyle { color: #406037; }
/*ArchiveList End*/
/*BlogNavList Begin*/
.BlogNavList { width: 100%; clear: left; float: left; margin-bottom: 15px }
/*BlogNavList End*/
/*BlogNavNormalList Begin*/
.BlogNavNormalList { width: 100%; }
.BlogNavNormalListLink a { padding: 8px 0 8px 20px; width: 100%; vertical-align: middle; display: block; text-decoration: none; white-space: normal; text-align: left; background: url(Images/Bullet/bullet1.png) no-repeat 2px 15px; font-size: 20px; line-height: 22px; }

.BlogNavNormalListMoreLink { text-align: right; padding: 8px 5px; }

    .BlogNavNormalListMoreLink a { text-decoration: underline; padding-right: 19px; background: url(images/bullet/more.png) no-repeat right center; font-size: 16px; color: #888; }

/*BlogNavNormalList End*/
/*BlogDetails Begin*/
.BlogDetails { width: 100%; margin: 0 auto 10px; }

.BlogDetailsTop { width: 100%; min-height: 40px; line-height: 30px; vertical-align: middle; text-align: left; padding-bottom: 30px; display: none; }

.BlogDetailsTopTitle { font-size: 24px; line-height: 1.4; font-family: ThaiSansNeueBold; }

.BlogDetailsTopImgLeft, .BlogDetailsTop .BlogDetailsImgLeft { display: none; }

.BlogDetailsTopImgRight, .BlogDetailsTop .BlogDetailsImgRight { display: none; }

.BlogDetailsRight { padding: 0 0 20px; }

.BlogDetailsBottom { display: none; }
.BlogFormView { width: 770px; }

.FacebookCommentBox { margin-top: 10px; }
/*BlogDetails End*/

/*BlogDetailsDefault Begin*/
.BlogDetailInfo { float: left; width: 33%; padding-right: 10px; }
.BlogDetailsImage { float: right; width: 66%; margin-bottom: 15px }
.BlogDetailTitle { clear: left; float: left; width: 100%; font-family: ThaiSansNeueBold; color: #406037}
.BlogDetailCategory { clear: left; float: left; margin-bottom: 15px; width: 100%; }
    .BlogDetailCategory a { display: block; padding: 5px 10px; line-height: 26px; text-transform: uppercase; color: #0e75ba; background-color: #ada9b1; }
        .BlogDetailCategory a:hover { color: #fff; background-color: #0e75ba }
.BlogDetailsDefaultPublisherDiv { clear: left; float: left; width: 100%; margin-top: 20px; }

.BlogDetailsDefaultBlogContentDiv { clear: both; float: left; margin: 10px 0; width: 100%;   }
    .BlogDetailsDefaultBlogContentDiv p { line-height: initial; margin-bottom: 20px;  }
.BlogDetailsDefaultTagsCategoryDiv { clear: left; float: left; width: 50%; line-height: 24px; margin: 10px 0; }


.CategoryLabel, .TagsLabel { display: inline-block; margin-right: 10px; font-family: ThaiSansNeueSemiBold; }

.BlogDetailsDefaultTagsPanel { text-align: left; width: 100%; clear: left; float: left; line-height: 25px; }

.BlogDetailsDefaultCatPanel { padding-top: 0px; width: 100%; clear: left; float: left; font-size: 17px; }

.BlogDetailsDefaultTagsDiv,
.BlogDetailsDefaultCatDiv { display: inline-block; } 

.BlogDetailsSocialButton { float: right; margin-bottom: 5px; margin-top: 10px; display: flex; }

.BlogDetailsFacebookDiv { display: inline-block; height: 20px; vertical-align: top; margin-bottom: 5px; display: flex; margin-right: 3px; }
    .BlogDetailsFacebookDiv .fb-like { margin-right: 3px; }
.BlogDetailsGooglePlusDiv, .BlogDetailsTwitterDiv, .BlogDetailsLineDiv { display: inline-block; height: 20px; vertical-align: top; margin-right: 3px; margin-bottom: 5px; }
/*BlogDetailsDefault End*/

/*BlogList Begin*/
.BlogList { position: relative; }
.BlogListTop { margin-bottom: 20px; padding-bottom: 0; position: relative; background: none; width: 100%; text-align: center; }
    .BlogListTop .BlogDetailsTopTitle { background-color: #fff; position: relative; line-height: 40px; display: inline-block; text-transform: uppercase; z-index: 1; color: #406037; font-family: 'ThaiSansNeueBold'; padding-bottom: 5px; }
    .BlogListTop:before { content: ""; position: absolute; top: 50%; width: 100%; left: 0; height: 2px; background: #a8a6a6; }

    .BlogListTopImgLeft, .BlogListTop .BlogListImgLeft { display: none; }
    .BlogListTopImgRight, .BlogListTop .BlogListImgRight { display: none; }
.BlogListLeft { width: 100%; clear: left; float: left; padding: 0 0 10px; position: relative }

.BlogListBottom { display: none; }

.BlogNoData { margin-top: 20px; border: solid 1px #ccc; background-color: #fafafa; text-align: center; clear: left; width: 100%; line-height: 30px; padding: 5px 0; display: table; }
/*BlogList End*/

.BlogListViewMore { clear: both; float: left; width: 100%; text-align: center; margin: 20px auto 10px; }

    .BlogListViewMore .ViewMoreLink { float: none; display: inline-block; transition: all 0.1s linear; font-family: ThaiSansNeueSemiBold; border-radius: 5px; padding: 3px 30px 6px; line-height: 30px; font-size: 22px; text-transform: uppercase; color: #fff; background: linear-gradient(to right, #406037 0%,#406037 75%); }
        .BlogListViewMore .ViewMoreLink:hover { background: linear-gradient(to right, #ff393e,#7c0000); color: #fff; }
         

.BlogListItemShortContentDiv { margin-top: 10px; }

.BlogListItemDetailsColumn { padding: 10px 0px; vertical-align: top; }
.BlogListItemReadmore { color: #a7a7a7; position: relative; top: 9px; background: url(images/bullet/more.png) no-repeat; background-color: rgba(0, 0, 0, 0); background-position-x: 0%; background-position-y: 0%; background-position: 90% center; background-color: #fff; padding-right: 25px; text-decoration: underline; font-size: 14px; }
.BlogListItemMessageDiv { background: url("Images/Background/dot-line.jpg") repeat-x left bottom; height: 2px; width: 100%; display: none; }
.BlogListItemSocialButton { float: right; line-height: 35px; padding-top: 2px; }

.BlogListItemFacebookDiv { float: left; }

.BlogListItemGooglePlusDiv, .BlogListItemTwitterDiv, .BlogListItemLineDiv { float: left; padding-left: 5px; padding-top: 3px; }
.BlogListItemTable { width: 100%; }

/*BlogListItem End*/

/*BlogListRowStyle Begin*/
.BlogListDefault { }

.BlogListDefaultPageControlPanel { clear: both; line-height: 26px; padding: 6px 8px 4px; margin-bottom: 20px; width: 100%; background-color: #f6f8fb; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; }

.BlogListDefaultItemPerPage { float: left; line-height: 22px; }

    .BlogListDefaultItemPerPage select { float: left; margin-right: 10px; width: 40px; height: 24px; }

.BlogListDefaultPagingControl { text-align: right; float: right; }

    .BlogListDefaultPagingControl .PagingPrev { padding-right: 5px; }

    .BlogListDefaultPagingControl .PagingNext { padding-left: 5px; }

.BlogListDefaultDataList { width: 98%; clear: left; float: left; margin-bottom: 20px; }

.BlogListDefaultDataListHeader { display: none; }

.BlogListDefaultDataListItemStyle { vertical-align: top; }
.BlogListItemBlogTitleDiv { margin: 20px 0; }
.CategoryLabel { background: url(images/icon/icon-category.png) no-repeat; background-position-x: 0%; background-position-y: 0%; background-position: left center; padding-left: 25px; color: #666; width: auto; display: block; float: left; }
/*BlogListRowStyle End*/

/*SearchBox Begin*/
.SearchBox { clear: left; width: 100%; margin-bottom: 15px; }
    .SearchBox .SidebarRight { line-height: 34px; margin-top: 10px; }

.SidebarTopImgLeft, .SidebarTopImgRight, .SidebarBottom { display: none; }

input[type="text"].SearchBoxTextBox { width: 75%; float: left; height: 34px; line-height: 34px; padding-left: 10px; border-color: #b7b7b7; border-right: 0; }

.SearchBox .BtnStyle1 { width: 25%; float: right; padding: 0; margin: 0; height: 34px; overflow: hidden; position: relative; font-size: 0; line-height: 0; color: #fff; background-color: #406037; border: solid 1px #406037; }
    .SearchBox .BtnStyle1:hover { color: #fff; background-color: #0e75ba; }
    .SearchBox .BtnStyle1:after { position: absolute; text-align: center; content: "\e911"; z-index: 1; font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100%; text-align: center; font-size: 18px; left: 0; top: 0; line-height: 30px; color: #fff; }

    .SearchBox .BtnStyle1:hover:after { color: #fff; }
/*SearchBox End*/ /*Blog Comment*/
.BlogComment .CommonPageTop { display: none; }
.BlogComment .CommonPageRight { padding-top: 0; }
.BlogCommentDiv { width: 100%; background-color: #fff; }

    .BlogCommentDiv table { width: 100%; letter-spacing: 0.5px; font-size: 17px; }

.BlogCommentTitle { float: left; }

    .BlogCommentTitle .CommonPageTopTitle { font-size: 16px; }

.BlogCommentDotted { clear: left; border-bottom: dotted 1px #bbbaba; padding-top: 10px; }

.BlogCommentTextArea { width: 100%; height: 114px; font-size: 14px; font-family: Tahoma; }

.BlogCommentUserName { float: left; color: #0e75ba; font-family: ThaiSansNeueSemiBold; }
.BlogCommentCreateDate { font-style: italic; float: right; color: #888; }

.BlogCommentPost { margin-top: 5px; clear: both; float: left; width: 100%; }

.BlogCommentPostDiv { width: 100%; margin: 0; }

.BlogCommentPagingDiv { text-align: right; clear: both; line-height: 30px; width: 100%; padding: 5px; font-size: 17px; background-color: #f6f8fb; border-top: solid 1px #c9d3dd; border-bottom: solid 1px #c9d3dd; }
.BlogCommentPostLabel { padding-bottom: 10px; font-family: ThaiSansNeueBold; }

.BlogCommentListStyle { padding: 10px; width: 100%; border-bottom: solid 1px #c9d3dd; }

.BlogCommentListAlterStyle { padding: 10px; border-bottom: solid 1px #c9d3dd; width: 100%; }

.BlogCommentPostButton { float: right; margin-top: 10px; }
.BlogCommentTextValidator { font-size: 11px; margin-top: 10px; font-family: Tahoma; }

.BlogCommentValidateDiv { width: 136px; border-bottom: dotted; border-width: 1px; margin-bottom: 2px; }

.fb_iframe_widget iframe { width: 100% !important; }

.BlogCommentPagingBox { }
/*ArchiveBox*/
.ArchiveBox .BlogSidebarRight { border: 0; }
/* RecentPost Box Begin */
/* RecentPost Box Begin */
.RecentPost .ImageRecentPost { float: left; position: relative; width: 40%; }
    .RecentPost .ImageRecentPost a { width: 100%;  display: block; overflow: hidden; }
    .RecentPost .ImageRecentPost img { object-fit: cover; height: 100%; width: 100%; }
.TitleRecentPost { width: 100%; clear: left; float: left; margin: 0 0 5px; text-align: left; min-height: initial; padding: 0; }
.DateRecentPost { width: 100%; clear: left; float: left; color: #888; font-size: 16px; font-family: 'ThaiSansNeueLight'; }
    .DateRecentPost .BlogListItemPublisher { margin-bottom: 0; }
.RecentPost .BlogNavNormalListLink { padding: 10px 0; border-bottom: solid 1px #c9d3dd; display: flex; align-items: center; flex-wrap: wrap; }
    .RecentPost .BlogNavNormalListLink a { padding: 0; background: none; font-family: ThaiSansNeueSemiBold; line-height: 1.1; font-size: 18px; }

.InfoRecentPost { width: calc(60% - 10px); float: left; margin-left: 10px; } 
/* RecentPost Box End */

/* Blog Category Box Begin */
.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 #cccccc; }
        .sticky-share a, .sticky-share a:hover { color: #ffffff; }
    .sticky-share .Facebook { background-color: #3c5b9a; }
    .sticky-share .Twitter { background-color: #1da0f1; }
    .sticky-share .Line { background-color: #36b419; }
    .sticky-share .GPlus { background-color: #e55e48; }
    .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 .gp { background-image: url(Images/button/sticky-share-gplus.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 41px; display: table; margin: auto; }
    .sticky-share .text1 { font-size: 20px; line-height: 50px; margin: auto; height: 50px; }

    .sticky-share.fouritem a { width: 25%; }
    .sticky-share.threeitem a { width: 33.33%; }
    .sticky-share.twoitem a { width: 50%; }
    .sticky-share.oneitem a { width: 100%; }
    .sticky-share.fouritem .text1 { font-size: 0; line-height: 0; padding: 0; width: 100%; background-position: center center; }

.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; }
    .balloon-share .GPlus { width: 40px; height: 40px; background: url(Images/button/balloon-share-gplus.svg) no-repeat center center; position: inherit; bottom: 18px; }
    .balloon-share .forth-pos { left: 153px; }
    .balloon-share .third-pos { left: 108px; }
    .balloon-share .second-pos { left: 63px; }
    .balloon-share .first-pos { left: 18px; }
/* Blog Category Box End */
.BlogListModernize { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.BlogListModernizePageControlPanel { top: -54px; right: 0; position: absolute; padding-left: 10px; background-color: #fff; font-size: 17px; }
.BlogDetailTitle { font-size: 28px; }
/*------------------ Custom Responsive Layout ------------------*/ 
@media only screen and (max-width: 979.99px) /*Screen width 768-980 px ---------- For step 3---------*/
{
    .BlogDetailInfo { width: 100%; padding-right: 0; }
    .BlogDetailsImage { width: 100%; }
    .BlogDetailsDefaultPublisherDiv { margin: 15px 0; }
    .BlogDetailsDefaultTagsCategoryDiv { width: 100%; }
    .BlogCommentPostDiv { width: 100%; }
    .BlogDetailsSocialButton { clear: left; float: left; }
    .BlogListItemSocialButton { float: left; }
    .BlogDetailsTopTitle { font-size: 20px; }

    input[type="text"].SearchBoxTextBox { height: 30px; line-height: 28px; }
    .SearchBox .BtnStyle1 { height: 30px; }
}

@media only screen and (min-width: 768px) {
    .BlogListModernize.NewsEventList { margin-top: 10px; }
}

@media only screen and (max-width: 767.99px) /*Screen width 480-767 px -------------- For step 2 ------------ */
{
    .BlogListItem { width: 50%; margin: 0 0 10px; padding: 10px; }
    .BlogListItemImage { width: 210px; height: 210px; }
    .BlogListItemNameLink { font-size: 18px; line-height: 22px; }
    .BlogListItemDate { margin-top: 10px; }
    .BlogListModernizePageControlPanel { display: none; }
    .BlogDetailsSocialButton { display: none; }
    .BlogSidebarTop { text-align: left; } 

    .BlogDetailsTop { padding-bottom: 0; margin: 20px 0; }
    .BlogDetailsRight { padding-top: 0; }
    .BlogDetailsDefaultBlogContentDiv { border: 0; padding-top: 0; margin-bottom: 0; }
    .BlogListItemBlogTitleDiv { margin: 10px 0 20px; }
    .SearchBox { width: 100%; }
    .BlogCommentListStyle, .BlogCommentListAlterStyle { font-size: 17px; }
    .BlogCommentCreateDate { font-size: 16px; }

    .row.BlogMainDiv { padding-left: 10px; padding-right: 10px; }
    .BlogListModernize.NewsEventList { padding-left: 0; padding-right: 0; }

    .BlogListLeft { padding-top: 5px; }
    .BlogDetailTitle { font-size: 24px; }
}

@media only screen and (max-width: 479.99px) /*Screen width lower than 480 px -------------- For step 1 ------------ */
{

    /* Blog list */
    .BlogListDefaultItemPerPage { clear: left; float: none; display: none; margin: 0 auto; }
    .BlogListDefaultPagingControl { clear: left; float: none; display: table; margin: 0 auto; }
    .BlogListItemSocialButton { clear: left; float: left; width: 100%; padding-bottom: 20px; }
    .BlogListItemFacebookDiv { float: left; width: auto; }
    .BlogListItemTwitterDiv, .BlogListItemLineDiv { width: 24%; }
    .BlogListItemGooglePlusDiv { float: left; width: 100%; padding-left: 0; }
    .BlogListItemBlogTitleDiv, .BlogListItemPublisherDiv, .BlogListItemShortContentDiv, .BlogDetailsDefaultDiv { padding: 0; }
    .BlogListItem { width: 100%; margin: 0 0 10px; padding: 10px; }

    /* Blog Detail */
    .BlogDetailsTop { line-height: 25px; margin: 20px 0; }

    .BlogCommentTitle .CommonPageTopTitle { width: 100%; display: table; margin: 8px 0; }

    .BlogCommentPagingBox { text-align: center; float: none; }

    .BlogCommentTitle { float: none; text-align: center; }

    .BlogCommentPagingDiv { text-align: center; }

    .BlogDetailsDefaultPublisherDiv { width: 100%; padding: 0 0 15px; }

    .BlogDetailsFacebookDiv, .BlogDetailsGooglePlusDiv, .BlogDetailsTwitterDiv, .BlogDetailsLineDiv { width: auto; }

    .BlogDetailsDefaultTagsDiv, .BlogDetailsDefaultCatDiv { width: 65%; }
 
    .BlogCommentPostButton .BtnStyle2 { padding: 5px 25px; } 
    .SearchBox { width: 100%; margin-top: 20px; } 
    .BlogDetailsDefaultBlogContentDiv p { line-height: 22px; }
}

@media only screen and (orientation: portrait) {
}