.blogPage { padding-top:4rem }

.featuredPost { border-radius:12px; min-height:380px; margin:0; overflow:hidden; box-shadow:0 3px 6px rgba(51, 69, 79, .1) }
.featuredPost .featuredImage { padding:0; overflow:hidden }
.featuredPost .featuredImage img, .postBanner img { min-width:100%; min-height:100%; transition:all .5s }
.featuredPost:hover .featuredImage img { transform:scale(1.05) }
.featuredPost .featuredPostContent { padding:2rem }
.featuredPost .featuredPostContent h1, .postDetails h1 { font-size:2.25rem; font-weight:500 }
.featuredPost .featuredPostCategory, .postDetails .postCategory { color:#ff008a; text-transform:uppercase; display:inline-block }

.newsletterCTA { max-width:80%; margin:0 auto; background:#f7f8fa; border-radius:4px; padding:2rem 3rem; order:8 }
.newsletterCTA md-input-container { position:relative; padding-right:0 }
.newsletterCTA md-input-container input { background-color:#fff; height:48px; border:1px solid #ccd0d3 !important; border-radius:4px; padding-left:1rem; padding-right:3rem }
.newsletterCTA md-input-container.md-input-focused input { border:1px solid #ccd0d3 !important }
.newsletterCTA md-input-container .md-button { position:absolute; right:0 !important; top:2px; margin:0; background:#ff008a; width:48px; height:48px; border-radius:4px; text-align:center; color:#fff; cursor:pointer }
.newsletterCTA md-input-container .md-button:hover, .newsletterCTA md-input-container .md-button:focus { background:#ff008a !important; color:#fff }
.newsletterCTA md-input-container .md-errors-spacer { display:none }

.blogPagination { display:flex; align-items:center; justify-content:center; margin:0; list-style:none }
.blogPagination li { display:flex; list-style:none }
.blogPagination .md-button { text-transform:capitalize; border-radius:4px }
.blogPagination .md-button.active { background-color:#e6e8e9 }
.blogPagination .md-button:hover, .blogPagination .md-button.active:focus { background-color:#e6e8e9 !important }

/* BLOG INNER PAGE */
.blogInnerPage { padding:4rem 0 }
.blogInnerPage .mx-60 { max-width:60vw; margin:0 auto }
.socialShare { display:flex; flex-direction:column; position:-webkit-sticky; position:sticky; top:3rem; z-index:9 }
.socialShare a { text-align:center; border-radius:50%; margin-bottom:4px; display:inline-block; width:48px; height:48px; line-height:3.7; transition:all .3s }
.socialShare a:hover { background:#f5f5f5 }
.postDetails p { line-height:1.5rem }
.postDetails h2 { font-size:1.67rem; margin-top:2rem; font-weight:500 }
.postDetails ul { padding-left:1rem; margin-top:1rem; line-height:2.4rem }
.postDetails img { height:auto;}
.postBanner img { border-radius:12px; min-width:100%; object-fit:cover; min-height:100%; border:1.6px solid rgba(0, 0, 0, .1); transition:all .5s }
.postDetails .postCategory { color:#ff008a; text-transform:uppercase; display:inline-block }
.postDetails h1 { font-size:2.25rem; font-weight:500; margin:0 }

.toc { background:rgba(255, 196, 44, .25); padding:2rem 3rem; margin:2rem 0 }
.toc h3 { margin-top:0; font-size:1.6rem; font-weight:500; margin-bottom:1rem }
.toc ul { margin:0 }
.toc ul li a { color:#1a2d39; padding:.2rem 0; display:inline-block; text-decoration:underline; transition:all .3s }
.toc ul li a:hover { color:#ff008a }

.popularResources h3 { font-size:1.5rem }
.popularResources hr { opacity:.3 }

.cardItem md-card .md-card-image { object-fit:initial !important; }

/* RESPONSIVE */
@media screen and (max-width:1024px){
    .blogInnerPage .mx-60 { max-width:80% }
    .cardItem md-card .md-card-image { height:auto !important }
}

@media screen and (max-width:767px){
    .blogInnerPage .mx-60 { max-width:100% }
    section.blogInnerPage { padding:2rem 1rem }
    .featuredPost .featuredPostContent h1, .postDetails h1 { font-size:1.8rem }
    .socialShare { flex-direction:initial; position:relative; top:5px; padding-top: 1rem !important;}
    .postDetails.pt-5 { padding-top:1rem !important;}
}

@media screen and (max-width:579px){
    .newsletterCTA { max-width:100% }
    .postDetails h2 { font-size:1.4rem }
    .toc { padding:2rem }
    .blogPage { padding:2rem 0 }
    .blogPagination li:nth-child(3) .md-button { display:none }
}




/* UI - Om (The Catalyst) ***************************************************************************/
.articleHeading { font:300 42px "Open Sans", Arial, Helvetica, sans-serif; color:#000; margin-top:0;}
.articleImageDiv { width:100%; display:inline-block; margin:10px 20px 10px 0;}
.articleImageDiv img { width:100%; height:100%;}
.articleBody { font:18px/30px "Open Sans", Arial, Helvetica, sans-serif; color:#000; text-align:left;}
.articleBody > p { line-height:inherit; text-align:justify;}
.articleBody > p:nth-of-type(1)::first-letter { float:left; font:115px/90px "Times New Roman",Times,serif; padding-right:7px;}
.red-heading { color:#ff2693; font:bold 24px "Open Sans", Arial, Helvetica, sans-serif; margin-top:20px; margin-bottom:10px;}
.twitterFeedsTitle { background:#ffcf1d; color:#fff; padding:8px 15px; font:600 16px "Open Sans", Arial, Helvetica, sans-serif; text-transform:uppercase; margin-bottom:15px; text-align:left;}
.articleContainerTitle { background:#00cafd; color:#fff; padding:8px 15px; font:600 18px "Open Sans", Arial, Helvetica, sans-serif; text-transform:uppercase; margin-bottom:15px; text-align:left;}
/****************************************************************************************************/
.owlStoryCarousel { width:100%; display:inline-block; position:relative; margin-bottom:15px;}
.owlStoryCarousel .owl-controls { width:100%; height:32px; display:inline-block; position:absolute; bottom:50%; left:0;}
.owlStoryCarousel .owl-prev, .owlStoryCarousel .owl-next { background:#0cf; display:inline-block; width:40px; height:40px; line-height:40px; text-align:center; border-radius:50%; color:#fff; position:absolute; top:0;}
.owlStoryCarousel .owl-prev { left:-10px;}
.owlStoryCarousel .owl-next { right:-10px;}
/****************************************************************************************************/
.PopularStoriesTitle { width:100%; padding:10px 15px; background:#f4f4f4; color:#ff2693; font:bold 18px "Open Sans", Arial, Helvetica, sans-serif; text-align:left;}
.popularStories { margin:10px -10px;}
.storiesBox { width:100%; display:inline-block;}
.popularStory { width:50%; display:inline-block; padding:7.5px 10px; float:left;}
.owlStory { width:100%; display:inline-block; padding:0 10px; float:left;}
.popularStory a, .owlStory a { width:100%; display:inline-block; background:rgba(0, 0, 0, .04); box-shadow:0 0 1px rgba(0, 0, 0, .2);}
.popularStory img, .owlStory img { width:100%; display:block;}
.popularStory .storyTitle, .owlStory .storyTitle { width:100%; display:block; font:600 14px 'Open Sans', Arial, Helvetica, sans-serif; color:#333; padding:10px; cursor:pointer; text-decoration:none; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.popularStory:hover .storyTitle, .owlStory:hover .storyTitle { color:#0cf;}
/****************************************************************************************************/
.userbox { position:relative; min-height:130px; background:#f5f5f5; padding:15px 15px 15px 130px; margin-bottom:15px; text-align:left;}
.userbox img { background:#c8c8c8; width:100px; height:100px; display:inline-block; border-radius:50%; position:absolute; left:15px; top:15px;}
.userbox .articleAuthor { color:#ff008a; font:600 24px "Open Sans", Arial, Helvetica, sans-serif;}
.userbox .articleDate { display:inline-block; font:14px "Open Sans", Arial, Helvetica, sans-serif; color:#aaafb9;}
.userbox .authorTwitter { color:#20303a; font:14px "Open Sans", Arial, Helvetica, sans-serif;}
.userbox .twitterLink  { color:#0cf;}
.userbox .twitterLink:hover { color:#0393ef;}
.authorIcons { margin-top:15px;}
.authorIcons a { color:#000; margin-right:15px; cursor:pointer;}
.authorIcons a:hover { color:#0cf;}
.authorIcons a span.material-icons { font-size:18px; vertical-align:sub;}
.authorIcons span { margin:0 15px;}
/****************************************************************************************************/
.articleGallery { position:relative; width:100%; display:inline-block;}
.articleGallery > div { padding:10px;}
.articleGallery .thumb { display:inline-block; width:100%; height:200px; background-color:#fff; padding:5px; border:1px solid #ccc;}
.articleGallery a { display:inline-block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; cursor:pointer;}
.articleGallery a:hover { opacity: 0.60; filter:alpha(opacity=60);}

md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) { background-color:rgb(0, 202, 253);}
md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) h2 { color:#fff;}
/****************************************************************************************************/
.blogNavigation { background:#f8f8f8; width:100%; display:inline-block; padding:15px;}
.blogNavigation a { display:inline-block; color:#000; font:bold 14px/22px 'Open Sans', Arial, Helvetica, sans-serif; text-transform:uppercase;}
.blogNavigation a:hover { color:#f05682; text-decoration:none;}
.blogNavigation a span { color:#000; font:13px/18px 'Roboto', Arial, Helvetica, sans-serif; display:block;}
.blogNavigation .prev-post,.blogNavigation .next-post { width:50%; display:inline-block; float:left; position:relative;}
.blogNavigation .prev-post { text-align:left;}
.blogNavigation .next-post { text-align:right;}
.blogNavigation .prev-post a { padding-left:20px;}
.blogNavigation .next-post a { padding-right:20px;}
.blogNavigation .prev-post a:after,.blogNavigation .next-post a:after { content:""; position:absolute; top:5px; width:0; height:0; border:15px solid transparent;}
.blogNavigation .prev-post a:after { left:-15px; border-right-color:#f05682;}
.blogNavigation .next-post a:after { right:-15px; border-left-color:#f05682;}

.fb-commentsFull { width:100%;}
.fb-commentsFull > span, .fb-commentsFull iframe { width:100% !important;}
/****************************************************************************************************/
.articleContainer { margin:10px -10px; overflow:hidden; clear:both;}
.articleOuter { padding:10px;}
.invisible { position:relative; box-shadow:none !important;}
.invisible:after { content:""; display:inline-block; width:100%; height:100%; background:rgba(255, 255, 255, .9); position:absolute; left:0; top:0; z-index:1;}
.articleMain { background:#fff; box-shadow:0 0 1px rgba(0, 0, 0, .2);}
.articleMain:hover { box-shadow:1px 1px 2px rgba(0, 0, 0, .3);}
.articleBox { width:100%; height:140px; display:inline-block; padding:15px 15px 0 15px;}
.articleLeft { width:150px; display:inline-block; float:left; text-align:center;}
.articleRight { width:calc(100% - 150px); display:inline-block; float:right; padding-left:15px;}
.articleImg { max-width:100%; max-height:125px; display:block;}
.articleTitle { color:#000; font:18px/20px 'Open Sans', Arial, Helvetica, sans-serif; text-align:left; margin:0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.articleTitle { color:#000; text-decoration:none; cursor:pointer;}
.articleTitle:hover { color:#0bf;}
.articleBody { width:100%; display:inline-block; overflow:hidden;}
.articleDes { color:#888; font:13px/18px 'Open Sans', Arial, Helvetica, sans-serif; text-align:left; height:72px; overflow:hidden; margin-bottom:0;}
.articleActions { opacity:0.6; padding:10px 15px;}
.articleMain:hover .articleActions { opacity:1; background:rgba(0, 0, 0, .04);}
.articleActions .hashLink { font:600 14px 'Open Sans', Arial, Helvetica, sans-serif; color:#333; margin-right:10px; cursor:pointer; text-decoration:none;}
.articleActions .hashLink:hover { color:#0bf;}
.articleActions .matBox { float:right; display:inline-block;}
.articleActions .matIcon { color:#444; margin-left:10px; cursor:pointer;}
.articleActions .matIcon i { margin:0;}
.articleActions .matIcon:hover, .articleActions .matIcon.active { color:#0bf;}
/****************************************************************************************************/
.pagination { width:100%; display:inline-block; background:#fff; text-align:center; padding:15px;}
.pagination a { width:32px; height:32px; display:inline-block; text-align:center; color:#333; font:15px/32px 'Open Sans', Arial, Helvetica, sans-serif; text-decoration:none; border-radius:50%; cursor:pointer;}
.pagination a:hover { color:#0bf;}
.pagination a.active { background:#0bf; color:#fff; cursor:default;}
.pagination a.disabled { opacity:.2; cursor:default;}

.ctaBox { width:100%; display:inline-block; padding:30px 15px; color:#fff; position:relative;}
.ctaHeader { width:100%; display:inline-block; text-align:center;}
.ctaBoxHeading { font:italic 30px 'Roboto', Arial, Helvetica, sans-serif; margin-bottom:0; margin-top:0;}
.overlayPink { width:100%; background:rgba(255, 0, 138, .7); position:absolute !important; left:0; top:0; height:100%;}
.btnEC { background:#fff; border:2px solid #fff; font:500 16px 'Roboto', Arial, Helvetica, sans-serif; color:#ff008a; text-transform:uppercase; padding:10px 15px; border-radius:4px; cursor:pointer; transition:all .5s; display:inline-block;}
.btnEC:hover { color:#fff; background:none;}
.textContent { font:400 16px 'Roboto', Arial, Helvetica, sans-serif; color:rgba(255,255,255,.9);}
.ctaBoxBuzz .ctaBoxHeading { font-size:24px;}
.ctaBoxBuzz .btnEC { font-size:12px; padding:6px 12px;}
.authorImage { width:62px; height:62px; border-radius:40px; }
.dot { height:7px; width:7px; background-color:#545050; border-radius:50%; display:inline-block; margin-bottom:1px; margin-left: 5px; margin-right: 5px; }
/****************************************************************************************************/
@media screen and (min-width:768px) and (max-width:960px)
{
  .articleTitle { font-size:30px;}
  .popularStory { width:100%; float:none;}
  .articleActions .hashLink { width:36%; display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
  .authorIconsMob .forwardFMob { display:block;}
  .authorIconsMob span { display:none;}
}
@media screen and (min-width:0) and (max-width:768px)
{
  .articleHeading { font-size:36px; margin-top:15px;}
  .articleTitle { font-size:24px; margin-top:15px;}
  .articleBody { font-size:16px; line-height:24px;}
  .articleBody > p { text-align:left;}
  .articleBody > p:nth-of-type(1)::first-letter { font-size:96px; line-height:72px;}
  .userbox .articleAuthor { font-size:18px;}
  .userbox { min-height:90px; padding:10px 10px 10px 90px;}
  .userbox img { width:70px; height:70px;  left:10px; top:10px;}
  .authorIcons { margin-top:0;}
  .ctaBoxMob { display:none;}
  .articleActions .hashLink { width:36%; display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
  .authorIconsMob .forwardFMob { display:block;}
  .authorIconsMob span { display:none;}
}
@media screen and (min-width:320px) and (max-width:480px)
{
  .authorIconsMob a { display:block;}

}