/*
FILENAME: hh_blog.css
VERSION: 1.0
DMS VERSION: 3.5
CREATED ON: 
NOTES:
	Basic color and layout, should be styled site specific.
	Empty CSS tags listed here for structure only.
*/

.blog-header {
	background:#333;
	-webkit-background-size:cover;
	background-size:cover;
	color:#fff;
	text-align:center;
	padding:50px 0 32px 0;
}

#blog-container {
	min-height:400px;
}

.blog-container.setcontainer {
	/*max-width:1100px;*/
	width:100%;
	margin:0 auto;
	
}

.blog-header .blog-container.setcontainer {
	text-align:center;
}

.blog-header p {
	margin:0;
	color:#fff;
	line-height:1;
}

.blog-header p.heading {
	font-size:48px;
	font-family: "bebasregular";
}

.blog-header p.subheading {
	font-size:24px;
    text-transform: uppercase;
}

.blog-header a,
.blog-header a:visited,
.blog-header a:active,
.blog-header a:hover {
	color:#fff;
	text-decoration:none;
}

#blog-container {
	padding:30px 0;
}

#blog-container:after {
	clear:both;
	display:block;
	content:"";
}

/* BLOG TOOLBAR */

.blog-toolbar {
	background:#f3f3f3;
	border-bottom:1px solid #ddd;
	padding:15px 0;
	position:relative;
	z-index:99;
}

.blog-toolbar:after {
	clear:both;
	display:block;
	content:"";
}

.blog-toolbar .BlogSearchBox {
	float:left;
}

.blog-toolbar .BlogSearchBox h2 {
	font-size:18px;
}

.blog-toolbar .BlogSearchBox input[type="text"] {
	padding:9px 7px;
	background:#fff;
	border:1px solid #bbb;
	font-size:16px;
	-webkit-appearance: none;
  	-webkit-border-radius: 0;
	height:auto;
	color:#777;
	text-indent:0;
}

.blog-toolbar .BlogSearchBox input[type="text"]:hover,
.blog-toolbar .BlogSearchBox input[type="text"]:focus {
	border:1px solid #999;
}

.blog-toolbar .BlogSearchBox input[type="submit"] {
	background:#d0112b;
	color:#fff;
	border:none;
	font-size:14px;
	border-radius:0;
	padding:9px 10px;
	margin:0 0 0 3px;
	vertical-align:top;
	width:auto;
	height:auto;
	box-shadow:none;
	position:relative;
	top:0;
}

.blog-toolbar .BlogSearchBox input[type="submit"]:hover {
	opacity:.80;
}

.blog-toolbar .blog-category {
	position:relative;
	float:right;
}

.blog-toolbar .blog-category h2 {
	font-size:16px;
	margin:0;
	padding:10px;
	background:#fff;
	border-radius:3px;
	border:1px solid #ccc;
	cursor:pointer;
	color:#777;
}

.blog-toolbar .blog-category h2:after {
	font-family:"FontAwesome";
	display:inline-block;
	content: "\f0d7";
	margin-left:10px;
}

.blog-toolbar .blog-category ul {
	display:none;
	position:absolute;
	top:98%;
	right:0;
	min-width:200px;
	background:#fff;
	border:1px solid #ccc;
	border-radius:3px 0 3px 3px;
	padding-left:0;
	overflow:hidden;
	margin:0;
}

.blog-toolbar .blog-category.blog-category-open ul {
	display:block;
}

.blog-toolbar .blog-category ul li {
	list-style:none;
	border-top:1px solid #ccc;
	text-transform:none;
}

.blog-toolbar .blog-category ul li:first-child {
	border-top:none;
}

.blog-toolbar .blog-category ul li a {
	display:block;
	padding:10px;
	text-align:left;
	color:#777;
	text-decoration:none;
	text-transform:uppercase;
	font-size:13px;
}

.blog-toolbar .blog-category ul li a:before {
	font-family:"FontAwesome";
	display:inline-block;
	content: "\f054";
	margin-right:5px;
	font-size:11px;
}

.blog-toolbar .blog-category ul li a:hover {
	color:#d0112b;	
}



/* RIGHT CONTENT */
#blog-container #blog-right {
	float:none;
	overflow:visible;
	max-width:960px;
	width:100%;
	padding:0 15px;
	margin:0 auto;
}

/* BLOG PAGE */
#blog-container #blog-right .blog-results{}
#blog-container #blog-right .blog-results .blog-result{
	padding: 10px;
	border: 1px solid #ccc;
	background-color: #f6f6f6;
	margin-bottom: 50px;
	box-shadow:0 2px 0 #ccc;
	}
#blog-container #blog-right .blog-results .blog-result .blog-image-result{
	margin: 0px auto 15px auto;
	background-color: #fff;
	width:100%;
	height:0;
	padding-bottom:50%;
	border:1px solid #ddd;
	}
#blog-container #blog-right .blog-result-header {
	margin-bottom: 20px;
	}
#blog-container #blog-right .blog-result-header h1 {
	font-size:28px;	
	margin-bottom:15px;
}
#blog-container #blog-right .blog-results .blog-result .blog-result-title h2 {
	font-size:24px;
	margin-bottom:5px;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-title h2 a {
	color:#d0112b;
	text-decoration:none;
}
#blog-container #blog-right .blog-results .blog-result .blog-result-body{}
#blog-container #blog-right .blog-results .blog-result .blog-result-body p.blog-result-author{
	margin-bottom: 10px;
	color:#777;
	font-size:14px;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-body p.blog-result-author a {
	color:#333;	
	text-decoration:underline;
}
#blog-container #blog-right .blog-results .blog-result .blog-result-body p.blog-result-snippet{
	margin-bottom: 10px; 
	line-height: 1.5;
	font-size:14px;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-body p.blog-result-snippet:first-letter{
	font-size: 175%;
	text-transform: uppercase;
	line-height: 1;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-body ul{
	margin:0;
	padding-left:0;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-body ul:after {
	clear:both;
	display:block;
	content:"";
}
#blog-container #blog-right .blog-results .blog-result .blog-result-body ul li{
	display: inline;
	float: left;
	line-height:1;
	margin-bottom:0;
	font-size:13px;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-body ul li.blog-date{
	width: 75%;
	}
#blog-container #blog-right .blog-results .blog-result .blog-result-body ul li.blog-comments{
	width: 25%;
	}

	
/* SUB BLOG PAGE */
#blog-container #blog-right .blog-detail{
	margin-bottom: 15px;
}
#blog-container #blog-right .blog-detail .retweet{display: none;}
#blog-container #blog-right .blog-detail .blog-image{
	overflow: hidden;
	background-color: #fff;
	width:100%;
	height:0;
	padding-bottom:50%;
	border:1px solid #ddd;
	margin-bottom:15px;
}

#blog-container #blog-right .blog-detail p.blog-detail-author,
#blog-container #blog-right .blog-detail p.blog-detail-comments {
	font-size:14px;
	line-height:1.5;
	color:#777;
	margin-bottom:15px;
}

#blog-container #blog-right .blog-detail h1 {
	font-size:28px;
	margin-bottom:5px;
	color:#d0112b;
}

.blog-info-right {
	text-align:right;
}

.blog-share-bottom {
	margin-bottom:15px;
}

.social-share a {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:1px;
	display:inline-block;
	padding:5px;
	border-radius:2px;
	color:#fff;
	width:30px;
	height:30px;
	font-size:18px;
	text-align:center;
	opacity:1;
	-webkit-transition:opacity .3s;
	transition:opacity .3s;
}

.social-share a:hover {
	opacity:.80;
	color:#fff;
}

a.share-facebook {
	background:#3B5998;
}

a.share-x {
	background:#000000;
}

a.share-linkedin {
	background:#0077B5;
}

a.share-pinterest {
	background:#BD081C;
}

a.share-email {
	background:#e69a15;
}

.social-share a i {
	line-height:21px; /* Same as height of buttons */
}

.blogtext {
    padding-bottom:15px;
}

.blogtext.hcontent h3,
.blogtext.hcontent h4,
.blogtext.hcontent h5,
.blogtext.hcontent h6 {
  text-transform:uppercase;
}

.blogtext.hcontent h2 {
    font-size: 42px;
}

.blogtext.hcontent h3 {
    font-size: 36px;
}

.blogtext.hcontent h4 {
    font-size: 30px;
}

.blogtext.hcontent h5 {
    font-size: 24px;
}

.blogtext.hcontent h6 {
    font-size: 21px;
}

.blogtext.hcontent h3,
.blogtext.hcontent h5 {
    color:#d0112b;
}

.blogtext.hcontent h2,
.blogtext.hcontent h4,
.blogtext.hcontent h6 {
    color:#d93931;
}

.blogtext.hcontent h2,
.blogtext.hcontent h3{
    padding-top:14px;
}

.blogtext.hcontent h4,
.blogtext.hcontent h5,
.blogtext.hcontent h6 {
    padding-top:8px;
}



#blog-container #blog-right .blog-detail p.blog-detail-comments {
	margin-bottom:15px;
	display:none;
}

#blog-container #blog-right .blog-detail p.blog-detail-author a,
#blog-container #blog-right .blog-detail p.blog-detail-comments a {
	color:#333;
	text-decoration:underline;
}

#blog-container #blog-right .blog-detail .blogtag ul{margin:0 0 15px 0; overflow: hidden;}
#blog-container #blog-right .blog-detail .blogtag ul li{display: inline; float: left; margin-right: 5px; list-style:none; font-size:14px;}

#blog-container #blog-right .blog-detail .related-blogs {margin:50px 0;}
#blog-container #blog-right .blog-detail .related-blogs h3{font-size:18px; text-transform:uppercase; font-weight:bold; text-align:center; margin:0 0 25px 0;}
#blog-container #blog-right .blog-detail .related-blogs ul{margin:0; padding:0;}
#blog-container #blog-right .blog-detail .related-blogs ul:after {clear:both; display:block; content:"";}
#blog-container #blog-right .blog-detail .related-blogs ul li {float:left; width:47%; margin:0 1.5%; list-style:none;}
#blog-container #blog-right .blog-detail .related-blogs ul li .flexFill {padding-bottom:50%; border:1px solid #ccc;}
#blog-container #blog-right .blog-detail .related-blogs ul li > a {
	text-align:center;
	font-size:16px;
	margin-top:10px;
	display:block;
}

#blog-container #blog-right .blog-detail .comments-box {
	clear:left;
	padding-top:20px;
}

.blog-comment {
	margin-bottom:40px;
}

.blog-comment-top h2 {
    font-size: 24px;
	text-transform:uppercase;
	color:#d0112b;
}

.blog-comment-item {
	padding: 20px 0;
  	border-bottom: 1px dotted #ccc;
}

.blog-comment-item p {
  margin-bottom: 0px;
  font-size: 13px;
  text-transform: uppercase;
  color: #d0112b;
}

.blog-comment-item p.comment-text {
  font-size: 16px;
  text-transform: none;
  color: #777;
}

#wrapper_blog .hhForm label {
	line-height:22px;
}

.hhForm p {
	margin-bottom:0;
	line-height:1;
}

#wrapper_blog .hhError, #wrapper_blog .hhSuccessful {
	margin-left:10px;	
}

#row-comments .hhFormRowInput p label {
	line-height:20px;
	padding-left:5px;
	font-size:11px;
}

#row-captcha .hhFormRowInput label {
	min-width:140px;
	max-width:140px;	
}

#row-comments textarea {
	clear:left;
	margin-top:10px;
	width:290px;
}

#row-comments .hhToolTip {
	margin-top:10px;
}

.hhForm .hhFormController input[type="submit"] {
	background-color: #d93931;
    color: #fff;
    font: 17px/51px "bebasregular";
    height: 41px;
    margin-right: 1px;
    margin-top: 7px;
    padding: 0 21px;
	border:none;
	box-shadow:none;
	border-radius:0;
}

.hhForm .hhFormController input[type="submit"]:hover {
	background-color: rgba(217,57,49,0.8);
}

div#BlogComment label {
	font-size: 14px;
}

.blogs-none-found {
	min-height:300px;
}

.blog-meta {
	padding:20px;
	background:#f3f3f3;
	margin:30px 0 20px 0;
}

.blog-meta:after {
	clear:both;
	display:block;
	content:"";
}

.blog-meta .author-image {
	float:left;
	width:20%;
}

.blog-meta .author-image .flexFill {
	border:1px solid #ddd;
	background:#fff;
	padding-bottom:100%;
}

.blog-meta .meta-right {
	float:left;	
	width:76.1%;
	padding-left:20px;
}

.blog-meta .author-name {
	font-size:24px;
}

.blog-author-text {
	padding:20px;
	background:#f3f3f3;
}

.blog-author-text:after {
	clear:both;
	display:block;
	content:"";
}

.blog-author-image {
	float:left;
	width:20%;
}

.blog-author-image .flexFill {
	border:1px solid #ddd;
	background:#fff;
	padding-bottom:100%;
}

.blog-author-text p {
	float:left;
	width:76.1%;
	padding-left:20px;
}



.blog-loader{
	visibility:hidden;	
}


div.blog-loader {
    font-size: 36px;
    margin-bottom: 10px;
}

#blog-container a.view-more{
	margin:0 auto;
	text-align:center;
	min-width:125px;
	color: #fff;
    display: inline-block;
	width:125px;
    font-size: 14px;
	text-align:center;
	padding:5px;
    text-transform: uppercase;
   border: medium none;
    border-radius: 3px;
    line-height: 100%;
    padding: 18px;
    text-align: center;	
}

.view-more-row {
	text-align:center;
}


@media (max-width:1024px) {
	#blog-container #blog-left .blog-calendar .blog-calendar-body ul.blog-calendar-dayname {
		display:none;
	}
	
@media (max-width:768px) {

	#blog-container #blog-right .blog-detail .related-blogs {
		float:none; 
		width:100%; 
		margin:0 0 15px 0;
	}

	#blog-container #blog-right .blog-detail .related-blogs ul li > a {
		font-size:15px;
	}

}

@media (min-width:320px) and (max-width:480px) {
	#blog-container {
		padding:30px 15px;
	}
	
	#blog-container #blog-left,
	#blog-container #blog-right {
		padding:0;
		border:none;
	}
	
	#blog-container #blog-right {
		width:100%;
	}
	
	.blog-header p.heading {
		font-size: 36px;
	}
	
	.blog-toolbar .BlogSearchBox {
		float:none;
	}
	
	.blog-toolbar .blog-category {
		float:none;
		display:inline-block;
		margin-top:10px;
	}
	
	.blog-toolbar .blog-category ul {
		left:0;
		right:auto;
		border-radius:0 3px 3px 3px;
	}

	.blog-info-left {
		float:none;
		width:100%;
	}

	.blog-info-right {
		float:none;
		width:100%;
		text-align:left;
		margin-left:0;
	}


	#blog-container #blog-right .blog-detail .related-blogs h3 {
		margin-bottom:10px;
	}
	
	#blog-container #blog-right .blog-detail .related-blogs ul li > a {
		font-size:14px;
	}

	.blog-meta .author-image {
		float:none;
		width:50%;
		margin:0 auto;
	}
	
	.blog-meta .author-image .flexFit {
		padding-bottom:100%;
	}
	
	.blog-meta .meta-right {
		float:none;	
		width:100%;
		padding-left:0;
		text-align:center;
	}
	
	.blog-meta .author-name {
		font-size:21px;
		margin-top:10px;
	}
	
	#blog-container #blog-right .blog-detail .related-blogs h3 {
		margin-bottom:10px;
	}
	
	#blog-container #blog-right .blog-detail .related-blogs ul li > a {
		font-size:14px;
	}
	
	.blog-author-image {
		float:none;
		width:50%;
		margin:0 auto 10px auto;
	}
	
	.blog-author-text p {
		float:none;
		width:100%;
		padding-left:0;
	}


}