/* === BLOG OVERVIEW === */


body.blog .blogheader.blog-overview { padding-bottom: 0; }
body.blog .blogheader.blog-overview h1 { margin-bottom: .5em; }
body.blog .blogheader.blog-overview p.like-h2 { width: 100%; display: block; margin-bottom: 0; }
body.blog .blogheader.blog-overview .highlighted { border-left: 2px solid #009bff; padding-left: 1.5em; margin-bottom: 2em; }

body.blog .blogheader ul.blogmenu li { display: block; margin: 0; padding: 0; }
body.blog .blogheader ul.blogmenu li:before { display: none; }
body.blog .blogheader ul.blogmenu li a { display: inline-block; width: auto; background: #fff; color: #000; border-radius: 60px; padding: .5em 1em; margin: .5em 0; }
body.blog .blogheader ul.blogmenu li a:hover:after { display: none; }
body.blog .blogheader ul.blogmenu li a:hover, 
body.blog .blogheader ul.blogmenu li.current-menu-item a { background: #000; color: #fff; }

body.blog .bloglist { padding-top: 3em; }
body.blog .bloglist .item { background: #fff; margin-bottom: 2em; transition: all .2s ease; }
body.blog .bloglist .item:hover { transform: scale(1.05); box-shadow: 0 24px 36px -16px rgba(52,73,94,.45); }
body.blog .bloglist .item .item-text { padding: 1em; }
body.blog .bloglist .item .item-text * { color: #202935; }
body.blog .bloglist .item .item-text h3 { font-size: clamp(1.0rem,1.5vw,2.0rem); line-height: 1.2; }


/* === BLOG SINGLE === */


body.blog .blogheader { padding-bottom: 5em; height: auto; overflow: hidden; }
body.blog .blogheader h1 { margin-bottom: 0; line-height: 1.1; font-size: clamp(2.5rem,3.5vw,4.5rem); }
body.blog .blogcontent p:last-of-type { margin: 0 0 2em; }
body.blog .blogheader .clmn { overflow: visible; }
body.blog .blogheader .blog-image { height: 400px; border-radius: 400px; background-size: cover; background-position: center center; }

body.blog .blogcontent { padding-top: 0; }
body.blog .blogcontent .blog-article { overflow: visible; padding: 3em; }
body.blog .blogcontent .blog-article img { display: block; border-radius: .75em; margin-left: -5em; margin-bottom: 4em; width: calc(100% + 5em); max-width: calc(100% + 5em); box-shadow: 0 24px 36px -16px rgba(52,73,94,.45); }
body.blog .blogcontent .blog-article ul.arrowlist { margin-bottom: 3em; }
body.blog .blogcontent .blog-article ul.arrowlist li { margin-bottom: .5em; }

body.blog .blogcontent .blog-article h2 { font-size: clamp(2.25rem,3.5vw,3.5rem); }
body.blog .blogcontent .blog-article h3 + h4 { margin-top: 0; }

body.blog .blogcontent .navigation { margin-top: 4em; padding-top: 4em; border-top: 1px solid #f2f2f2; }
body.blog .blogcontent .navigation .prev-posts { float: left; }
body.blog .blogcontent .navigation .next-posts { float: right; }
body.blog .blogcontent .navigation .prev-posts a,
body.blog .blogcontent .navigation .next-posts a { display: block; width: auto; padding: .5em 1em; background: #f5f5f7; color: #000; border-radius: 60px; }
body.blog .blogcontent .navigation .prev-posts a:hover,
body.blog .blogcontent .navigation .next-posts a:hover { background: #000; color: #fff; }

body.blog .blogcontent .blog-sidebar { padding-top: 3em; }
body.blog .blogcontent .blog-sidebar ul li { margin: 0; padding: 0; display: block; }
body.blog .blogcontent .blog-sidebar ul li:before { display: none; }
body.blog .blogcontent .blog-sidebar ul li a { display: block; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.1); padding: .5em 0; }


body.blog .blogcontent .yarpp h2 { margin-top: 2em; }
body.blog .blogcontent .yarpp-thumbnails-horizontal .yarpp-thumbnail { border: none; vertical-align: top; width: 47%; height: auto; margin-right: 2%; display: inline-block; overflow: hidden; }
body.blog .blogcontent .yarpp-related .yarpp-thumbnail-title { width: 100%; }

body.blog .blogcontent .yarpp-thumbnails-horizontal img { margin-left: 0;
  width: 100%; max-width: 100%; height: auto; box-shadow: none; margin-bottom: 1em; }


/* === RESPONSIVENESS === */


@media screen and (max-width:1280px) {
	body.blog .blogheader { padding-bottom: 4em; }
	body.blog .blogheader .blog-image { height: 340px; }
}

@media screen and (max-width:1085px) {
	body.blog .blogheader { padding-top: 5em; }
	body.blog .blogheader .blog-image { height: 300px; }
}

@media screen and (max-width:1023px) {
	body.blog .blogheader .blog-image { height: 240px; }
	body.blog .blogcontent .navigation { margin-top: 2em; padding-top: 2em; }
}


@media screen and (max-width:720px) {
	body.blog .blogheader .clmn + .clmn { margin-top: 0; }
	body.blog .blogheader ul.blogmenu { width: 100%; text-align: center; margin-bottom: 0; }
	body.blog .blogheader ul.blogmenu li { display: inline-block; }
	body.blog .blogheader ul.blogmenu li a { padding: .25em .5em; margin: .25em 0; font-size: .9em; }
}

@media screen and (max-width:640px) {
	body.blog .blogheader { padding-bottom: 2em; }
	body.blog .blogheader h1 { line-height: 1.1; }
	body.blog .blogheader a.button { display: none; }
	body.blog .blogheader .blog-image { height: 230px; }
	body.blog .blogcontent .blog-article { padding: 2em; }
	body.blog .blogcontent .blog-article img { margin-left: -4em; width: calc(100% + 4em); max-width: calc(100% + 4em); }
	body.blog .blogcontent .navigation { font-size: .8em; }
	body.blog .blogcontent .navigation a { padding: 1em !important; }
	body.blog .blogcontent .blog-sidebar { padding-top: 0; }
}