/* Custom "Blog" CSS Definitions */

.blog_header {
	display: block;
	background: transparent url(https://www.uxmatters.com/images/blog_bg.png) no-repeat 0 0 !important;
	margin: 0 auto;
	width: 960px;
	height: 200px;
	position: relative;
}

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	position: absolute;
	top: 40px;
	left: 33px;
	font-family: 'Produkt Web Regular Italic';
	font-style: italic;
	font-size: 1.083em !important;
	background: transparent !important;
}

.blog_header h1 a:hover, .blog_header h2 a:hover, .section_heading h2.blog_header a:hover {
	border-color: transparent;
}

@media (max-width: 1200px) {

.blog_header {
	width: 100%;
}

}

@media (max-width: 992px) and (min-width: 575px) {

.topics_page .community_topics,
.topics_page .experiences_topics,
.topics_page .research_topics,
.topics_page .strategy_topics {
    clear: both;
    padding-top: 0.813em;
}

}

@media (max-width: 768px) {

.blog_header {
	background-image: url(https://www.uxmatters.com/images/blog_bg_768px_wide.png) !important;
	height: 150px;
}

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	top: 30px;
	left: 5px;
}

}

@media (max-width: 600px) {

.blog_header {
	background-image: url(https://www.uxmatters.com/images/blog_bg_600px_wide.png) !important;
	height: 125px;
}

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	top: 25px;
	left: 21px;
}

}

@media (max-width: 480px) {

.blog_header {
	background-image: url(https://www.uxmatters.com/images/blog_bg_480px_wide.png) !important;
	height: 100px;
}

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	top: 20px;
	left: 17px;
}

}

@media (max-width: 440px) {

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	font-size: 1em !important;
}

}

@media (max-width: 360px) {

.blog_header {
	background-image: url(https://www.uxmatters.com/images/blog_bg_360px_wide.png) !important;
	height: 75px;
}

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	top: 15px;
	left: 12px;
}

}

@media (max-width: 340px) {

.blog_header h1, .blog_header h2, .section_heading h2.blog_header {
	font-size: 0.875em !important;
}

}

.blog_header h1 a, .blog_header h2 a, .section_heading h2.blog_header a {
	color: #fff;
}

.topic_tag a {
    color: #fff !important;
}

.article_title {
    color: #134F5C;
}

.article_title a {
    color: #134F5C;
}

.article_title a:hover, .article_title a:focus {
    color: #134F5C;
    border-bottom: 1px dotted #134F5C;
}

.author a {
    color: #134F5C;
}

.comments_block > a .fa, .comments_block > span .fa {
    color: #134F5C;
}

.comments_block > a span, .comments_block > span span {
    color: #134F5C;
}

.subtopic .subtopic_link {
    color: #134F5C;
}

.btn.btn-primary {
    border-color: #004431;
    background: #0c4b4c;
    background: -webkit-gradient(linear, left top, left bottom, from(#1f5576), to(#134F5C));
    background: -webkit-linear-gradient(top, #1f5576 0%, #134F5C 100%);
    background: linear-gradient(to bottom, #1f5576 0%, #134F5C 100%);
}

.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active {
    background: #134F5C;
    background: -webkit-gradient(linear, left top, left bottom, from(#134F5C), to(#1f5576));
    background: -webkit-linear-gradient(top, #134F5C 0%, #1f5576 100%);
    background: linear-gradient(to bottom, #134F5C 0%, #1f5576 100%);
}

.comments_title {
    color: #0c4b4c;
}

h3 {
    color: #0c4b4c;
}

#sharesModal .modal-dialog .modal-content .modal-body .shares_block .fa {
    background: #88cbbb;
}

#sharesModal .modal-dialog .close-box {
    color: #3a6471;
}

.page_title, .section_heading {
    background: #3a6471;
}

.page_title h1, .page_title h2, .section_heading h2 {
    background: #3a6471;
}

.content ul > li:before {
    color: #0c4b4c;
}

.new-wrapper.bullets a {
    color: #0c4b4c;
}

.new-wrapper.bullets a :hover, .new-wrapper.bullets a :focus {
    color: #0c4b4c;
    border-bottom: 1px dotted #0c4b4c;
}

.pullquote {
    border-top: .3125em solid #134F5C;
}

.pullquote a {
    color: #134F5C;
}

.pullquote a:hover, a:focus {
    color: #134F5C;
    border-bottom: 1px dotted #134F5C;
}