Demo Code HTML Thiết Lập Màu Chữ Cho Phần Tử

Màu chữ của các phần tử HTML được hiển thị mặc định là màu đen. Để thiết lập các màu sắc khác cho phần nội dung là chữ viết của phần tử HTML chúng ta sử dụng đặc tính CSS là color với giá trị màu sắc tương ứng với màu bạn muốn sử dụng:

[Demo Code HTML Thiết Lập Màu Chữ Cho Phần Tử](https://www.codehub.com.vn/doan-ma/Demo-Code-HTML-Thiet-Lap-Mau-Chu-Cho-Phan-Tu-23-04-2019)

2 Bình Luận

Hương Gia Hương Gia

hãy nói

Yi Fy Yi Fy

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:if cond='data:view.isHomepage'>

    <script type='application/ld+json'>{&quot;@context&quot;:&quot;http://schema.org&quot;,&quot;@type&quot;:&quot;WebSite&quot;,&quot;name&quot;:&quot;<data:view.title.escaped/>&quot;,&quot;url&quot;:&quot;<data:view.url.canonical/>&quot;,&quot;potentialAction&quot;:{&quot;@type&quot;:&quot;SearchAction&quot;,&quot;target&quot;:&quot;<data:view.url.canonical/>search?q={search_term_string}&quot;,&quot;query-input&quot;:&quot;required name=search_term_string&quot;}}</script>

  </b:if>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>

<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,400i,500,500i,600,600i,700,700i' media='all' rel='stylesheet' type='text/css'/>
 <link href='//fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i' media='all' rel='stylesheet' type='text/css'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

<!-- Template Style CSS -->
<b:skin version='1.0.0'><![CDATA[/*

Blogger Template Style
Name: NDGroup
License: Free Version
Version: 1.0
Author: Nguyễn Duy
Author Url: http://www.vaynhanhtoanquoc.top/
----------------------------------------------- */

/*
<!-- Variable definitions -->
<Variable name="keycolor" description="Main Color" type="color" default="$(main.color)" value="#ff749f"/>
<Variable name="followByEmail" description="Follow By Email Text" type="string" default="To stay on top of the ever-changing world of business, subscribe now to our newsletters." value="To stay on top of the ever-changing world of business, subscribe now to our newsletters."/>

<Group description="Theme Colors" selector="body">
<Variable name="main.color" description="Theme Color" type="color" default="#ff749f" value="#f6da09"/>
<Variable name="main.dark.color" description="Dark Color" type="color" default="#202020" value="#d9ecdb"/>
<Variable name="menu.color" description="Menu Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="title.color" description="Title Color" type="color" default="#333333" value="#333333"/>
<Variable name="title.hover" description="Title Color on Hover" type="color" default="$(main.color)" value="#f6d900"/>
<Variable name="footer.color" description="Footer Color" type="color" default="#f1ffff" value="#f1ffff"/>
</Group>

<Group description="Theme Body" selector="body">
<Variable name="body.background.color" description="Body Background Color" type="color" default="#f8f8f8" value="#f8f8f8"/>
<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) url() repeat fixed top left" value="$(color) url() repeat fixed top left"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#656565" value="#656565"/>
<Variable name="body.link.color" description="Link Color" type="color" default="$(main.color)" value="#ff749f"/>
</Group>

<!-- Extra Variables -->
<Variable name="body.text.font" description="Font" hideEditor="true" type="font" default="13px Poppins, sans-serif" value="13px Poppins, sans-serif"/>
<Variable name="posts.background.color" description="Post background color" hideEditor="true" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="tabs.font" description="Font 2" hideEditor="true" type="font" default="13px Poppins, sans-serif" value="13px Poppins, sans-serif"/>
<Variable name="posts.title.color" description="Post title color" hideEditor="true" type="color" default="#333333" value="#333333"/>
<Variable name="posts.text.color" description="Post text color" hideEditor="true" type="color" default="#656565" value="#656565"/>
<Variable name="posts.icons.color" description="Post icons color" hideEditor="true" type="color" default="$(main.color)" value="#ff749f"/>
<Variable name="labels.background.color" description="Label background color" hideEditor="true" type="color" default="$(main.color)" value="#ff749f"/>
*/

/-- Reset CSS --/
a,abbr,acronym,address,applet,b,big,blockquote,body,caption,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,object,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,u,ul,var{
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:0 0;
text-decoration:none
}
form,textarea,input,button{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border-radius:0
}
dl,ul{
list-style-position:inside;
font-weight:400;
list-style:none
}
ul li{
list-style:none
}
caption,th{
text-align:center
}
img{
border:none;
position:relative
}
a,a:visited{
text-decoration:none
}
.clearfix{
clear:both
}
.section,.widget,.widget ul{
margin:0;
padding:0
}
a{
color:$(body.link.color)
}
a img{
border:0
}
abbr{
text-decoration:none
}
.CSS_LIGHTBOX{
z-index:999999!important
}
.separator a{
clear:none!important;
float:none!important;
margin-left:0!important;
margin-right:0!important
}

navbar-iframe,.widget-item-control,a.quickedit,.home-link,.feed-links{

display:none!important

}
.center{
display:table;
margin:0 auto;
position:relative
}
.widget > h2,.widget > h3{
display:none
}
/-- Body Content CSS --/
body{
background:$(body.background);
background-color:$(body.background.color);
font-family: 'Open Sans', sans-serif;
font-size:14px;
font-weight:400;
color:$(body.text.color);
word-wrap:break-word;
margin:0;
padding:0
}

outer-wrapper{

margin:0 auto;
background-color:#fff;
box-shadow:0 0 5px rgba(0,0,0,.1)

}
.row{
margin: 0 auto;
width:1170px
}

content-wrapper{

margin:40px auto 0;
overflow:hidden

}

content-wrapper > .container{

margin:0 -15px

}

main-wrapper{

float:left;
overflow:hidden;
width:66.66666667%;
box-sizing:border-box;
word-wrap:break-word;
padding:0 15px;
margin:0

}
.item #main-wrapper {

}

sidebar-wrapper{

float:right;
overflow:hidden;
width:33.33333333%;
box-sizing:border-box;
word-wrap:break-word;
padding:0 15px

}
.item #sidebar-wrapper{

}
.post-image-wrap{
position:relative;
display:block
}
.post-image-link,.about-author .avatar-container,.comments .avatar-image-container{
background-color:rgba(155,155,155,0.07);
color:transparent!important
}
.post-thumb{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .6s ease-in-out;
transition: .6s ease-in-out;
display:block;
position:relative;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
border-radius: 2px;
}
.post-image-link:hover .post-thumb,.post-image-wrap:hover .post-image-link .post-thumb,.hot-item-inner:hover .post-image-link .post-thumb{
opacity:.9
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.post-title a{
display:block
}

top-bar{

width:100%;
height:34px;
background-color:#fff;
overflow:hidden;
margin:0;
border-bottom:1px solid #eee

}

top-bar .container{

margin:0 auto

}
.top-bar-nav{
position:relative;
float:left;
display:block
}
.top-bar-nav .widget > .widget-title{
display:none
}
.top-bar-nav ul li{
float:left
}
.top-bar-nav ul li > a{
height:34px;
display:block;
color:$(main.color);
font-size:12px;
font-weight:500;
line-height:34px;
text-transform:uppercase;
margin:0 10px 0 0;
padding:0 5px;
transition:color .17s
}
.top-bar-nav ul li:first-child > a{
padding:0 5px 0 0
}
.top-bar-nav ul > li:hover > a{
color:$(title.color)
}
.top-bar-social{
position:relative;
float:right;
display:block
}
.top-bar-social .widget > .widget-title{
display:none
}
.top-bar-social ul > li{
float:left;
display:inline-block
}
.top-bar-social ul > li > a{
line-height:48px;
display:block;
color:#fff;
text-decoration:none;
font-size:14px;
text-align:center;
padding:0 7px;
margin:0 0 0 10px;
transition:color .17s
}
.top-bar-social ul > li:last-child > a{
padding-right: 0px;
}

.social a:before{
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400
}
.social .blogger a:before{
content:"\f37d"
}
.social .facebook a:before{
content:"\f09a"
}
.social .twitter a:before{
content:"\f099"
}
.social .gplus a:before{
content:"\f0d5"
}
.social .rss a:before{
content:"\f09e"
}
.social .youtube a:before{
content:"\f167"
}
.social .skype a:before{
content:"\f17e"
}
.social .stumbleupon a:before{
content:"\f1a4"
}
.social .tumblr a:before{
content:"\f173"
}
.social .vk a:before{
content:"\f189"
}
.social .stack-overflow a:before{
content:"\f16c"
}
.social .github a:before{
content:"\f09b"
}
.social .linkedin a:before{
content:"\f0e1"
}
.social .dribbble a:before{
content:"\f17d"
}
.social .soundcloud a:before{
content:"\f1be"
}
.social .behance a:before{
content:"\f1b4"
}
.social .digg a:before{
content:"\f1a6"
}
.social .instagram a:before{
content:"\f16d"
}
.social .pinterest a:before{
content:"\f0d2"
}
.social .twitch a:before{
content:"\f1e8"
}
.social .delicious a:before{
content:"\f1a5"
}
.social .codepen a:before{
content:"\f1cb"
}
.social .reddit a:before{
content:"\f1a1"
}
.social .whatsapp a:before{
content:"\f232"
}
.social .snapchat a:before{
content:"\f2ac"
}
.social .email a:before{
content:"\f0e0"
}
.social .external-link a:before{
content:"\f35d"
}
.social-color .blogger a{
background-color:#ff5722
}
.social-color .facebook a{
background-color:#3b5999
}
.social-color .twitter a{
background-color:#00acee
}
.social-color .gplus a{
background-color:#db4a39
}
.social-color .youtube a{
background-color:#f50000
}
.social-color .instagram a{
background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)
}
.social-color .pinterest a{
background-color:#ca2127
}
.social-color .dribbble a{
background-color:#ea4c89
}
.social-color .linkedin a{
background-color:#0077b5
}
.social-color .tumblr a{
background-color:#365069
}
.social-color .twitch a{
background-color:#6441a5
}
.social-color .rss a{
background-color:#ffc200
}
.social-color .skype a{
background-color:#00aff0
}
.social-color .stumbleupon a{
background-color:#eb4823
}
.social-color .vk a{
background-color:#4a76a8
}
.social-color .stack-overflow a{
background-color:#f48024
}
.social-color .github a{
background-color:#24292e
}
.social-color .soundcloud a{
background:linear-gradient(#ff7400,#ff3400)
}
.social-color .behance a{
background-color:#191919
}
.social-color .digg a{
background-color:#1b1a19
}
.social-color .delicious a{
background-color:#0076e8
}
.social-color .codepen a{
background-color:#000
}
.social-color .reddit a{
background-color:#ff4500
}
.social-color .whatsapp a{
background-color:#3fbb50
}
.social-color .snapchat a{
background-color:#ffe700
}
.social-color .email a{
background-color:#888
}
.social-color .external-link a{
background-color:$(main.dark.color)
}

header-wrap{

position:relative;
margin:0

}
.header-header{
background-color:$(main.dark.color);
width:100%;
height:90px;
position:relative;
overflow:hidden;
padding:20px 0
}
.header-header .container{
height: 90px;
position:relative;
margin:0 auto;
padding:0
}
.header-logo{
line-height: 90px;
position:relative;
float:left;
width:auto;
max-width:350px;
max-height:60px;
margin:0;
padding:15px 0
}
.header-logo .header-image-wrapper{
display:block
}
.header-logo img{
max-width:100%;
max-height:60px;
margin:0
}
.header-logo h1{
color:$(title.color);
font-size:20px;
line-height:1.4em;
margin:0
}
.header-logo p{
font-size:12px;
margin:5px 0 0
}
.header-header .header-ads {
float:right;
}
.header-ads{
text-align: -webkit-center;
position: relative;
}
.header-ads .widget > .widget-title{
display:none
}
.header-ads .widget{
max-width:100%
}
.header-ads .widget .widget-content{
width:728px;
max-width:100%;
max-height:90px;
line-height:1
}

/ ######## Menu Css ######################### /

.header-menu{background:#375f43;position:relative;width:100%;height:48px;z-index:10;font-size:13px;margin:0}
.header-menu .container{height:48px;position:relative;margin:0 auto;padding:0}

main-menu .widget,#main-menu .widget > .widget-title{display:none}

main-menu .show-menu{display:block}

main-menu{display:inline-block;height:48px;z-index:15}

main-menu ul > li{float:left;position:relative;margin:0;padding:0;transition:background .17s}

main-menu ul > li > a{letter-spacing:.1px;position:relative;color:$(menu.color);font-size:13px;font-weight:600;text-transform:uppercase;line-height:48px;display:inline-block;margin:0;padding:0 13px;transition:color .17s ease}

main-menu ul#main-menu-nav > li:first-child > a{padding-left:0;color:#f6da09}

main-menu ul > li:hover > a{color:#fff}

main-menu ul > li > ul{position:absolute;float:left;left:0;top:48px;width:180px;background-color:#fff;z-index:99999;margin:0;padding:0;box-shadow:0 3px 5px rgba(0,0,0,0.2);visibility:hidden;opacity:0}

main-menu ul > li > ul > li > ul{position:absolute;float:left;top:0;left:100%;margin:0}

main-menu ul > li > ul > li{display:block;float:none;position:relative;transition:all .17s ease}

main-menu ul > li > ul > li a{font-weight:600;display:block;height:36px;font-size:12px;color:#000;line-height:36px;box-sizing:border-box;margin:0;padding:0 15px;transition:all .17s ease}

main-menu ul > li > ul > li:hover{background-color:#f6da09}

main-menu ul > li > ul > li:hover > a{color:#000}

main-menu ul > li.has-sub > a:after{content:'\f107';float:right;font-family:FontAwesome;font-size:14px;font-weight:400;margin:0 0 0 3px}

main-menu ul > li > ul > li.has-sub > a:after{content:'\f105';float:right;margin:0}

main-menu .mega-menu{position:static!important}

main-menu .mega-menu > ul{width:100%;box-sizing:border-box;padding:20px 10px}

main-menu .mega-menu > ul.mega-menu-inner{overflow:hidden}

main-menu ul > li:hover > ul,#main-menu ul > li > ul > li:hover > ul{visibility:visible;opacity:1}

main-menu ul ul{transition:all .17s ease}

.mega-menu-inner .mega-item{float:left;width:25%;box-sizing:border-box;padding:0 10px}
.mega-menu-inner .mega-content{position:relative;width:100%;overflow:hidden;padding:0}
.mega-content .post-image-wrap{width:100%;height:140px;overflow:hidden}
.mega-content .post-image-link{width:100%;height:100%;z-index:1;display:block;position:relative;overflow:hidden}
.mega-content .post-title{letter-spacing:-.02em;font-size:15px;overflow:hidden;font-weight:700;line-height:1.4em;margin:5px 0}
.mega-content .post-title a{display:block;color:#000;transition:color .17s}
.mega-content:hover .post-title a{}
.mega-content .post-meta{color:#aaa}
.no-posts{float:left;width:100%;height:100px;line-height:100px;text-align:center}
.mega-menu .no-posts{line-height:60px;color:$(title.color)}
.show-search,.hide-search{position:absolute;right:0;top:0;display:block;width:48px;height:48px;line-height:48px;z-index:20;color:$(menu.color);font-size:15px;text-align:center;cursor:pointer;transition:color .17s ease}
.show-search:before{content:"\f002";font-family:FontAwesome;font-weight:400}
.hide-search:before{content:"\f00d";font-family:FontAwesome;font-weight:400}
.show-search:hover,.hide-search:hover{color:#fff}

nav-search{display:none;position:absolute;left:0;top:0;width:100%;height:48px;z-index:99;background-color:$(main.color);box-sizing:border-box;padding:0}

nav-search .search-form{width:100%;height:48px;background-color:rgba(0,0,0,0);line-height:48px;overflow:hidden;padding:0}

nav-search .search-input{width:100%;height:48px;font-family:inherit;color:$(menu.color);margin:0;padding:0 70px 0 15px;background-color:rgba(0,0,0,0);font-size:14px;font-weight:400;box-sizing:border-box;border:0}

nav-search .search-input:focus{color:$(menu.color);outline:none}

.slide-menu-toggle{display:none;position:absolute;line-height:48px;height:48px;width:48px;top:0;left:0;font-family:FontAwesome;color:#fff;font-size:17px;font-weight:400;text-align:left;cursor:pointer;z-index:4;padding:0}
.slide-menu-toggle:before{content:"\f0c9"}
.nav-active .slide-menu-toggle:before{content:"\f00d"}
.mobile-menu{display:none;position:absolute;top:48px;left:0;width:100%;background-color:$(main.dark.color);box-sizing:border-box;padding:20px;border-top:1px solid rgba(255,255,255,0.08);visibility:hidden;opacity:0;transform-origin:0 0;transform:scaleY(0);transition:all .17s ease}
.nav-active .mobile-menu{visibility:visible;opacity:1;transform:scaleY(1)}
.mobile-menu > ul{margin:0}
.mobile-menu .m-sub{display:none;padding:0}
.mobile-menu ul li{position:relative;display:block;overflow:hidden;float:left;width:100%;font-size:13px;font-weight:500;text-transform:uppercase;line-height:38px;margin:0;padding:0}
.mobile-menu > ul li ul{overflow:hidden}
.mobile-menu ul li a{color:#fff;padding:0;display:block;transition:all .17s ease}
.mobile-menu ul li.has-sub .submenu-toggle{position:absolute;top:0;right:0;color:#fff;cursor:pointer}
.mobile-menu ul li.has-sub .submenu-toggle:after{content:'\f105';font-family:FontAwesome;font-weight:400;float:right;width:34px;font-size:16px;text-align:center;transition:all .17s ease}
.mobile-menu ul li.has-sub.show > .submenu-toggle:after{transform:rotate(90deg)}
.mobile-menu > ul > li > ul > li > a{color:#fff;opacity:.7;padding:0 0 0 15px}
.mobile-menu > ul > li > ul > li > ul > li > a{color:#fff;opacity:.7;padding:0 0 0 30px}
.mobile-menu ul li a:hover,.mobile-menu ul > li > .submenu-toggle:hover{color:$(main.color)}
.post-meta{overflow:hidden;color:#a0a0a0;font-size:11px;font-weight:500;text-transform:uppercase;padding:0 1px}
.post-meta .post-author,.post-meta .post-date{float:left;display:inline-block;margin:0 10px 0 0}
.post-meta .post-author:before,.post-meta .post-date:before{font-family:FontAwesome;font-weight:400;margin:0 3px 0 0}
.post-meta .post-author:before{content:'\f007'}
.post-meta .post-date:before{content:'\f017'}
.post-meta a{color:#00214f;transition:color .17s;font-weight:700}
.post-meta a:hover{color:$(title.color)}

/ ######## Slider Css ######################### /

slider-wrapper .no-items{margin:0;border-bottom:1px solid #ebebeb}

slider-section{margin:0 auto}

slider-section .widget,#slider-section .widget > .widget-title{display:none}

slider-section .show-slider{display:block!important}

slider-section .show-slider .widget-content{height:450px;overflow:hidden}

.loader{position:relative;height:100%;overflow:hidden;display:block;margin:0}
.loader:after{content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-16px 0 0 -16px;border:2px solid $(main.color);border-right-color:rgba(155,155,155,0.2);border-radius:100%;animation:spinner 1.1s infinite linear;transform-origin:center}
@-webkit-keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
@keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
.index-post-wrap .social{margin-top:0}
.index-post-wrap .social ul:before{border-top:1px solid #e1e1e1;bottom:50%;margin-bottom:-1px;content:"";right:185px;position:absolute;width:100%}
.index-post-wrap .social ul:after{border-top:1px solid #e1e1e1;bottom:50%;margin-bottom:-1px;content:"";left:185px;position:absolute;width:100%}
.index-post-wrap .social ul{position:relative;display:inline-block}
.index-post-wrap .social ul li{display:inline-block}
.index-post-wrap .social ul li a{margin:0 0 0 2px;display:block;border-radius:50%;width:25px;height:25px;line-height:24px;border:1px solid #d2d2d2;color:#d2d2d2;-webkit-transition:all .3s ease;transition:all .3s ease}
.index-post-wrap .social ul li a:hover{color:#fff;background:#9272ce}

.lower-menu {
display: inline-block;
float: right;
}

.lower-menu ul {
}

.lower-menu ul li {
display:inline-block;
}

.lower-menu ul li a {
letter-spacing: 0.1px;
font-size: 13px;
font-weight: 600;
color: #fff;
height: 34px;
line-height: 34px;
display: block;
margin-left: 10px;
}

blog-pager{

overflow:hidden;
clear:both;
margin:0 0 30px

}
.blog-pager a,.blog-pager span{
float:left;
display:block;
min-width:30px;
height:30px;
background-color:#fff;
color: #212121;
font-size:13px;
font-weight:700;
line-height:30px;
text-align:center;
box-sizing:border-box;
margin:0 5px 0 0;
border-radius:3px;
text-shadow: 1px 2px 0 rgba(0,0,0,0.15);
transition:all .17s ease;
border: 1px solid #ededed;
}
.blog-pager .blog-pager-newer-link,.blog-pager .blog-pager-older-link{
padding:0 15px
}
.blog-pager .blog-pager-newer-link{
float:left
}
.blog-pager .blog-pager-older-link{
float:right
}
.blog-pager span.page-dots{
min-width:20px;
background-color:#fff;
font-size:16px;
color:$(title.color);
line-height:30px;
font-weight:400;
letter-spacing:-1px;
border:0
}
.blog-pager .page-of{
display:none;
width:auto;
float:right;
border-color:rgba(0,0,0,0);
margin:0
}
.blog-pager .page-active,.blog-pager a:hover{
background-color:$(main.dark.color);
color:#fff
}
.blog-pager .page-prev:before,.blog-pager .page-next:before{
font-family:FontAwesome;
font-size:16px;
font-weight:400
}
.blog-pager .page-prev:before{
content:'\f104'
}
.blog-pager .page-next:before{
content:'\f105'
}
.blog-pager .blog-pager-newer-link:after{
content:'\f104';
float:left;
font-family:FontAwesome;
font-weight:400;
margin:0 3px 0 0
}
.blog-pager .blog-pager-older-link:after{
content:'\f105';
float:right;
font-family:FontAwesome;
font-weight:400;
margin:0 0 0 3px
}
.archive #blog-pager{
display:none
}

/ ######## Grid Css ######################### /

main-wrapper h3.title{color:#02010a;text-transform:capitalize;letter-spacing:-.02em;font-family:'Montserrat',sans-serif;font-size:16px;overflow:hidden;font-weight:700;margin:0 0 15px;height:36px;line-height:36px}

.grid-small li{position:relative;display:inline-block;vertical-align:top;width:calc(33.33333333% - 40px / 3);overflow:hidden;margin:20px 0 0 20px}
.grid-small .post-tag{position:absolute}
.grid-small li:nth-child(3n+1){margin:20px 0 0}
.grid-small li.item-0{margin:0}
.grid-small li.item-1,.grid-small li.item-2{margin:0 0 0 20px}
.grid-small .post-image-link{position:relative;float:left;width:100%;height:140px;display:block;overflow:hidden;margin:0 0 7px}
.grid-small .post-title{letter-spacing:-.02em;text-transform:capitalize;font-size:16px;font-weight:700;line-height:1.4em;text-decoration:none;margin:0 0 5px}
.grid-small .post-info{float:left}
.grid-small .post-title a{display:block;color:#02010a;transition:color .17s}
.grid-small .post-title a:hover{}
.grid-small .post-meta{font-size:11px}

featured-posts-1 > .widget{margin:30px 0}

ul.grid-big{float:left;display:flex;flex-wrap:wrap;margin:0 -15px}
.grid-big li{position:relative;float:left;width:50%;overflow:hidden;box-sizing:border-box;padding:0 15px;margin:30px 0 0}
.grid-big li.item-0,.grid-big li.item-1{margin:0}

featured-wrapper .grid-big li{width:calc(100% / 4);height:300px}

featured-wrapper .grid-big li.item-0,#featured-wrapper .grid-big li.item-1,#featured-wrapper .grid-big li.item-2,#featured-wrapper .grid-big li.item-3{margin:0}

featured-wrapper .grid-big li .post-snippet{display:none}

.grid-big .feat-inner{position:relative;float:left;width:100%;height:100%;overflow:hidden}
.grid-big .post-image-link{position:relative;float:left;width:100%;height:100%;display:block;overflow:hidden;margin:0}
.grid-big .post-info-wrap .post-tag{position:static;display:inline-block;height:20px;background-color:$(main.color);color:#fff;text-transform:uppercase;line-height:20px;padding:0 8px;margin:0 0 10px;transition:all .17s ease}
.grid-big .post-info-wrap{position:absolute;left:0;bottom:0;text-align:left;overflow:hidden;z-index:5;width:100%;padding:0 10px 10px;background-image:linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0));box-sizing:border-box}
.grid-big .post-title{overflow:hidden;font-size:18px;font-weight:700;line-height:1.5em;margin:0 0 10px}
.grid-big .post-info{float:left;width:100%}
.grid-big .post-title a{color:#fff;transition:color .17s ease}
.grid-big .post-title a:hover{color:$(title.hover)}

.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}
.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loaded{display:block}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel .owl-refresh .owl-item{display:none}
.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:visible;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}
.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.no-js .owl-carousel{display:block}
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:1}
.owl-carousel .owl-animated-out{z-index:0}
.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-prev,.owl-next{position:relative;float:left;width:24px;height:24px;background-color:#fff;font-family:FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:23px;font-weight:900;color:$(main.dark.color);text-align:center;cursor:pointer;border:1px solid rgba(0,0,0,0.08);box-sizing:border-box;transition:all .25s ease}
.owl-prev:before{content:'\f104'}
.owl-next:before{content:'\f105'}
.owl-prev:hover,.owl-next:hover{background-color:$(main.color);color:#fff;border-color:$(main.color)}

break-wrapper{background-color:#f5f5f5;padding:5px;box-sizing:border-box;margin:20px auto}

break-section .widget{display:none}

break-section .show-ticker{display:block;margin:0}

ul.loading-post{line-height:30px;margin-left:10px}

break-section .no-posts{height:30px;line-height:30px;text-align:left;padding:0 0 0 15px;box-sizing:border-box}

break-section .widget > .widget-title{display:none;position:relative;float:left;background-color:$(main.dark.color);height:30px;color:#fff;font-size:9px;font-weight:400;line-height:30px;text-transform:uppercase;padding:0 12px}

break-section .show-ticker > .widget-title{display:block}

break-section .widget > h2,#break-section .widget > h3{display:none}

break-section .widget > .widget-title > h3{font-weight:500;color:#fff;margin:0;font-size:12px;height:auto;line-height:unset}

break-section .widget > .widget-title > h3:before{content:'\f0e7';font-family:FontAwesome;float:left;font-size:11px;font-weight:900;margin:0 5px 0 0;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

break-section .widget-content{position:relative;font-size:13px;display:block;overflow:hidden;height:30px;line-height:29px;padding:0;box-sizing:border-box}

ul.ticker-widget{width:100%!important;box-sizing:border-box;padding:0 0 0 15px}
.ticker-widget .ticker-item{position:relative;float:left;display:block;height:30px;padding:0}
.ticker-widget .post-date{height:30px;line-height:30px}
.ticker-widget .post-image-link{position:relative;float:left;width:35px;height:30px;display:block;overflow:hidden;margin:0 10px 0 0}
.ticker-widget .post-title{height:30px;font-size:13px;font-weight:500;line-height:30px;margin:0;padding:0;float:left}
.ticker-widget .post-title a{margin-right:12px;position:relative;display:block;overflow:hidden;color:#212121;transition:color .25s}
.ticker-widget .post-title a:hover{}
.ticker-widget .post-tag{position:static;float:left;margin:6px 10px 0 0}
.ticker-widget .owl-nav{position:absolute;top:0;right:0;width:52px;height:24px;z-index:5}
.ticker-widget .owl-nav .owl-prev{margin-top:3px}
.ticker-widget .owl-nav .owl-next{margin:3px 0 0 4px}
@keyframes fadeInLeft {
from{opacity:0;transform:translate3d(-30px,0,0)}
to{opacity:1;transform:none}
}
@keyframes fadeOutLeft {
from{opacity:1}
to{opacity:0;transform:translate3d(-30px,0,0)}
}
@keyframes fadeInRight {
from{opacity:0;transform:translate3d(30px,0,0)}
to{opacity:1;transform:none}
}
.fadeInRight{animation-name:fadeInRight}
@keyframes fadeOutRight {
from{opacity:1}
to{opacity:0;transform:translate3d(30px,0,0)}
}
.fadeOutRight{animation-name:fadeOutRight}
@keyframes fadeInUp {
from{opacity:0;transform:translate3d(0,30px,0)}
to{opacity:1;transform:none}
}
.fadeInUp{animation-name:fadeInUp}
@keyframes fadeOutUp {
from{opacity:1}
to{opacity:0;transform:translate3d(0,-30px,0)}
}
.fadeOutUp{animation-name:fadeOutUp}

h3.home-title span{color:#02010a;text-transform:capitalize;letter-spacing:-.02em;font-family:'Montserrat',sans-serif;font-size:16px;overflow:hidden;font-weight:700;margin:0 0 15px;height:36px;line-height:36px}
.search-bar{position:relative;width:auto;max-height:60px;margin:0;padding:15px 0;display:inline-block;margin-left:50px}

hbz-searchbox{height:40px;position:relative;min-width:320px;margin:0 auto}

.hbz-buttonwrap{background:#fff;width:14%;height:42px;display:block;position:absolute;top:0;right:0;cursor:pointer;border:1px solid #eaeaea}
.hbz-submit{width:35px;height:40px;background:transparent;cursor:pointer;position:absolute;right:50%;top:50%;margin-top:-17.5px;margin-right:-17.5px;border:none}
.hbz-submit:after{content:'';position:absolute;width:8px;height:8px;border:2px solid #000;border-radius:50%;left:10px;top:9px;box-sizing:content-box}
.hbz-submit:before{content:'';position:absolute;height:8px;width:2px;background:#000;transform:rotate(-35deg);top:19px;left:21px}

hbz-input{height:40px;width:82%;position:absolute;padding-left:4%;border:none;outline:none;right:14%;border-bottom:1px solid #eaeaea;border-left:1px solid #eaeaea;background-color:#fbfbfb;border-top:1px solid #eaeaea}

.featured-posts > .widget{position:relative;float:left;width:100%;margin:0 0 30px;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.social-counter .facebook a{color:#3b5999}
.social-counter .twitter a{color:#00acee}
.social-counter .gplus a{color:#db4a39}
.social-counter .youtube a{color:#f50000}
.social-counter .instagram a{color:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)}
.social-counter .pinterest a{color:#ca2127}
.social-counter .dribbble a{color:#ea4c89}
.social-counter .tumblr a{color:#365069}
.social-counter .twitch a{color:#6441a5}
.social-counter .rss a{color:#ffc200}
.social-counter .skype a{color:#00aff0}
.social-counter .stumbleupon a{color:#eb4823}
.social-counter .vk a{color:#4a76a8}
.social-counter .stack-overflow a{color:#f48024}
.social-counter .github a{color:#24292e}
.social-counter .soundcloud a{color:linear-gradient(#ff7400,#ff3400)}
.social-counter .behance a{color:#191919}
.social-counter .digg a{color:#1b1a19}
.social-counter .delicious a{color:#0076e8}
.social-counter .codepen a{color:#000}
.social-counter .reddit a{color:#ff4500}
.social-counter .whatsapp a{color:#3fbb50}
.social-counter .snapchat a{color:#ffe700}
.social-counter .email a{color:#888}
.social-counter .external-link a{color:#202020}#hot-wrapper{margin:0 auto}

hot-section .widget,#hot-section .widget > .widget-title{display:none}

hot-section .show-hot{display:block!important}

hot-section .show-hot .widget-content{position:relative;overflow:hidden;height:380px;margin:0 0 40px}

.hot-loader{position:relative;height:100%;overflow:hidden;display:block}
.hot-loader:after{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-15px 0 0 -15px;border:2px solid #ddd;border-left-color:$(main.color);border-top-color:$(main.color);border-radius:100%;animation:spinner .8s infinite linear;transform-origin:center}
@-webkit-keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
@keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
ul.hot-posts{position:relative;overflow:hidden;height:380px;margin:0 -5px}
.hot-posts .hot-item{position:relative;float:left;width:50%;height:380px;overflow:hidden;box-sizing:border-box;padding:0 5px}
.hot-posts .hot-item.item-0{width:50%;height:380px}
.hot-posts .hot-item.item-1,.hot-posts .hot-item.item-2{margin:0 0 10px}
.hot-item-inner{position:relative;float:left;width:100%;height:100%;overflow:hidden;display:block}
.hot-posts .post-image-link{width:100%;height:100%;position:relative;overflow:hidden;display:block}
.hot-posts .post-info{width:400px;position:absolute;top:50%;left:0;right:0;margin:auto;padding:25px;z-index:3;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.hot-item.item-0 .hot-item-inner:after{content:'';display:block;position:absolute;width:100%;top:0;bottom:0;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,1) 65%,rgba(0,0,0,1) 100%);background:#1a237e;background:linear-gradient(45deg,#1a237e,#d84315);opacity:.6;z-index:2}
.hot-item-inner:after{content:'';display:block;position:absolute;width:100%;top:0;bottom:0;background:#004d40;background:linear-gradient(45deg,#004d40,#827717);opacity:.6;z-index:2}
.hot-item-inner:before{content:'';display:block;position:absolute;width:100%;top:0;bottom:0;opacity:.6;z-index:2;background:hsla(0,0%,100%,.25)}
.hot-posts .post-title{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:600;display:block;line-height:1.3em;margin:10px 0 5px}
.hot-posts .post-title a{color:#fff;display:block}
.hot-posts .post-meta,.hot-posts .post-meta a{color:#fff;display:inline-block}
.show-hot .no-posts{position:absolute;top:calc(50% - 50px);left:0;width:100%}
.queryMessage{overflow:hidden;background-color:#f2f2f2;color:$(title.color);font-size:13px;font-weight:400;padding:8px 10px;margin:0 0 25px}
.queryMessage .query-info{margin:0 5px}
.queryMessage .search-query,.queryMessage .search-label{font-weight:700;text-transform:uppercase}
.queryMessage .search-query:before,.queryMessage .search-label:before{content:"\201c"}
.queryMessage .search-query:after,.queryMessage .search-label:after{content:"\201d"}
.queryMessage a.show-more{float:right;color:$(title.hover);text-decoration:underline;transition:opacity .17s}
.queryMessage a.show-more:hover{opacity:.8}
.queryEmpty{font-size:13px;font-weight:400;padding:10px 0;margin:0 0 25px;text-align:center}
.title-wrap{position:relative;float:left;width:100%;height:32px;background-color:$(main.dark.color);display:block;margin:0 0 20px}
.title-wrap > h3{position:relative;display:block;height:32px;font-size:12px;color:#fff;font-weight:500;line-height:32px;text-align:center;text-transform:uppercase;padding:0;margin:0}
.custom-widget li{overflow:hidden;margin:20px 0 0}
.custom-widget li:first-child{padding:0;margin:0;border:0}
.custom-widget .post-image-link{position:relative;width:80px;height:70px;float:left;overflow:hidden;display:block;vertical-align:middle;margin:0 12px 0 0}

sidebar-wrapper .custom-widget .post-image-link{width:120px;height:85px}

.custom-widget .post-info{overflow:hidden}

sidebar-wrapper .custom-widget .post-title{letter-spacing:-.02em;text-transform:capitalize;font-size:15px;font-weight:700;line-height:1.4em;text-decoration:none;margin:0 0 5px}

.custom-widget .post-title{letter-spacing:0;text-transform:capitalize;font-size:13px;font-weight:700;line-height:1.45em;text-decoration:none;margin:0 0 5px}
.custom-widget .post-title a{display:block;color:#02010a;transition:color .17s}
.index-post-wrap{position:relative;float:left;width:100%}
.blog-post{display:block;overflow:hidden;word-wrap:break-word}
.grid-posts{display:flex;flex-wrap:wrap;margin:0 -15px}
.index-post{display:block;width:100%;box-sizing:border-box;padding:0 15px;margin:0 0 40px}
.index-post .post-image-wrap{float:left;width:34%;height:190px;overflow:hidden;margin:0 30px 10px 0}
.index-post .post-image-wrap .post-image-link{width:100%;height:100%;position:relative;display:block;z-index:1;overflow:hidden}
.post-tag{position:absolute;top:10px;left:10px;height:18px;z-index:5;background-color:$(main.color);color:#02010a;font-size:11px;line-height:18px;font-weight:500;text-transform:uppercase;padding:0 6px}
.hot-posts .post-tag{position:unset}
.index-post .post-info{overflow:hidden}
.index-post .post-info > h2{letter-spacing:-.02em;text-transform:capitalize;font-size:22px;font-weight:700;line-height:1.4em;text-decoration:none;margin:0}
.index-post .post-info > h2 > a{display:block;color:#02010a;transition:color .17s}
.index-post .post-info > h2:hover > a{}
.widget iframe,.widget img{max-width:100%}
.date-header{display:block;overflow:hidden;font-weight:400;margin:0!important;padding:0}
.index-post .post-meta{margin:10px 0 0}
.post-snippet{color:#666;position:relative;display:none;overflow:hidden;font-size:13px;line-height:1.6em;font-weight:400;margin:10px 0}
a.read-more{display:none;color:#fff;background-color:#002e5b;font-size:12px;font-weight:600;text-transform:uppercase;margin:5px 0 0;transition:color .17s ease;padding:6px 18px;border:1px solid #e0e0e0}

breadcrumb{font-size:12px;font-weight:400;color:#aaa;margin:0 0 15px}

breadcrumb a{color:#aaa;transition:color .17s}

breadcrumb a:hover{color:$(title.hover)}

breadcrumb a,#breadcrumb em{display:inline-block}

breadcrumb .delimiter:after{content:'\f054';font-family:FontAwesome;font-size:8px;font-weight:400;font-style:normal;vertical-align:middle;margin:0 3px}

.item-post h1.post-title{color:#02010a;font-size:27px;line-height:1.4em;font-weight:700;position:relative;display:block;margin:0 0 15px;padding:0}
.static_page .item-post h1.post-title{margin:0}
.item-post .post-body{width:100%;font-size:15px;line-height:1.5em;overflow:hidden;padding:20px 0 0;margin:20px 0 0;border-top:1px solid #eee}
.item-post .post-outer{padding:0}
.item-post .post-body img{max-width:100%}
.main .widget{margin:0}
.main .Blog{border-bottom-width:0}
.post-footer{position:relative;float:left;width:100%;margin:20px 0 0}
.inline-ad{position:relative;display:block;max-height:60px;margin:0 0 30px}
.inline-ad > ins{display:block!important;margin:0 auto!important}
.item .inline-ad{float:left;width:100%;margin:20px 0 0}
.item-post-wrap > .inline-ad{margin:0 0 20px}
.post-labels{overflow:hidden;height:auto;position:relative;margin:0 0 20px;padding:0}
.post-labels span,.post-labels a{float:left;height:22px;background-color:#f2f2f2;color:$(title.color);font-size:12px;line-height:22px;font-weight:400;margin:0;padding:0 10px}
.post-labels span{background-color:$(main.color);color:#000}
.post-labels a{margin:0 0 0 5px;transition:all .17s ease}
.post-labels a:hover{background-color:$(main.color);color:#fff;border-color:$(main.color)}
.post-reactions{height:28px;display:block;margin:0 0 15px}
.post-reactions span{float:left;color:$(title.color);font-size:11px;line-height:25px;text-transform:uppercase;font-weight:500}
.reactions-inner{float:left;margin:0;height:28px}
.post-share{position:relative;overflow:hidden;line-height:0;margin:0 0 30px}
ul.share-links{position:relative}
.share-links li{width:70px;float:left;box-sizing:border-box;margin:0 5px 0 0}
.share-links li a{float:left;display:inline-block;cursor:pointer;width:100%;height:32px;line-height:32px;color:#fff;font-weight:400;font-size:15px;text-align:center;box-sizing:border-box;opacity:1;transition:all .17s ease}
.share-links li a:hover{opacity:.8}
ul.post-nav{position:relative;overflow:hidden;display:block;margin:0 0 30px}
.post-nav li{display:inline-block;width:50%}
.post-nav .post-prev{float:left;text-align:left;box-sizing:border-box;padding:0 10px}
.post-nav .post-next{float:right;text-align:right;box-sizing:border-box;padding:0 10px}
.post-nav li a{color:$(title.color);line-height:1.4em;display:block;overflow:hidden;transition:color .17s}
.post-nav li:hover a{color:$(title.hover)}
.post-nav li span{display:block;font-size:11px;color:#aaa;font-weight:700;text-transform:uppercase;padding:0 0 2px}
.post-nav .post-prev span:before{content:"\f053";float:left;font-family:FontAwesome;font-size:10px;font-weight:400;text-transform:none;margin:0 2px 0 0}
.post-nav .post-next span:after{content:"\f054";float:right;font-family:FontAwesome;font-size:10px;font-weight:400;text-transform:none;margin:0 0 0 2px}
.post-nav p{font-size:12px;font-weight:400;line-height:1.4em;margin:0}
.post-nav .post-nav-active p{color:#aaa}
.about-author{position:relative;display:block;overflow:hidden;background-color:#f9f9f9;padding:20px;margin:0 0 30px}
.about-author .avatar-container{position:relative;float:left;width:80px;height:80px;background-color:rgba(255,255,255,0.05);overflow:hidden;margin:0 15px 0 0}
.about-author .author-avatar{float:left;width:100%;height:100%}
.author-name{overflow:hidden;display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;line-height:14px;margin:7px 0 3px}
.author-name span{color:$(title.color)}
.author-name a{color:#02010a;transition:opacity .17s}
.author-name a:hover{opacity:.8}
.author-description{color:#02010a;display:block;overflow:hidden;font-size:13px;font-weight:500;line-height:1.6em}
.author-description a:hover{text-decoration:underline}

related-wrap{overflow:hidden;margin:0 0 30px}

related-wrap .related-tag{display:none}

.related-ready{float:left;width:100%}
.related-ready .loader{height:178px}
ul.related-posts{position:relative;overflow:hidden;margin:0 -10px;padding:0}
.related-posts .related-item{width:33.33333333%;position:relative;overflow:hidden;float:left;display:block;box-sizing:border-box;padding:0 10px;margin:0}
.related-posts .post-image-link{width:100%;height:130px;position:relative;overflow:hidden;display:block}
.related-posts .post-title{font-size:13px;font-weight:600;line-height:1.5em;display:block;margin:7px 0 5px}
.related-posts .post-title a{color:#02010a;transition:color .17s}
.related-posts .related-item:hover .post-title a{color:$(title.hover)}

blog-pager{float:left;width:100%;font-size:15px;font-weight:500;text-align:center;clear:both;box-sizing:border-box;padding:0;margin:0 0 15px;border-top:1px solid rgba(155,155,155,0.1)}

blog-pager .load-more{display:inline-block;height:34px;background-color:$(main.color);font-size:14px;color:#fff;font-weight:400;line-height:34px;box-sizing:border-box;padding:0 30px;margin:0;border:1px solid rgba(0,0,0,.1);border-bottom-width:2px;border-radius:2px}

blog-pager #load-more-link{color:#fff;cursor:pointer}

blog-pager #load-more-link:hover{background-color:$(main.color);color:#fff}

blog-pager .load-more.no-more{background-color:rgba(155,155,155,0.05);color:$(main.color)}

blog-pager .loading,#blog-pager .no-more{display:none}

blog-pager .loading .loader{position:relative;height:100%;overflow:hidden;display:block;margin:0;height:34px}

blog-pager .no-more.show{display:inline-block}

blog-pager .loading .loader:after{width:26px;height:26px;margin:-15px 0 0 -15px;content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-16px 0 0 -16px;border:2px solid $(main.color);border-right-color:rgba(155,155,155,0.2);border-radius:100%;animation:spinner 1.1s infinite linear;transform-origin:center}

@-webkit-keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
@keyframes spinner {
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
}
.archive #blog-pager,.home .blog-pager .blog-pager-newer-link,.home .blog-pager .blog-pager-older-link{display:none}
.post-animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
.post-fadeIn{animation-name:fadeIn}
@keyframes fadeInUp {
from{opacity:0;transform:translate3d(0,5px,0)}
to{opacity:1;transform:translate3d(0,0,0)}
}
.post-fadeInUp{animation-name:fadeInUp}
.post-animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
.post-fadeIn{animation-name:fadeIn}
@keyframes fadeInUp {
from{opacity:0;transform:translate3d(0,5px,0)}
to{opacity:1;transform:translate3d(0,0,0)}
}
.post-fadeInUp{animation-name:fadeInUp}
.blog-post-comments{display:none;margin:0 0 30px}
.blog-post-comments .comments-title{margin:0 0 20px}
.comments-system-disqus .comments-title,.comments-system-facebook .comments-title{margin:0}

comments{margin:0}

gpluscomments{float:left!important;width:100%!important;margin:0 0 25px!important}

gpluscomments iframe{float:left!important;width:100%}

.comments{display:block;clear:both;margin:0;color:$(title.color)}
.comments .comment-thread > ol{padding:0}
.comments > h3{font-size:13px;font-weight:400;font-style:italic;padding-top:1px}
.comments .comments-content .comment{list-style:none;margin:0;padding:0 0 8px}
.comments .comments-content .comment:first-child{padding-top:0}
.facebook-tab,.fb_iframe_widget_fluid span,.fb_iframe_widget iframe{width:100%!important}
.comments .item-control{position:static}
.comments .avatar-image-container{float:left;overflow:hidden;position:absolute}
.comments .avatar-image-container,.comments .avatar-image-container img{height:35px;max-height:35px;width:35px;max-width:35px;border-radius:100%}
.comments .comment-block{overflow:hidden;padding:0 0 10px}
.comments .comment-block,.comments .comments-content .comment-replies{margin:0 0 0 50px}
.comments .comments-content .inline-thread{padding:0}
.comments .comment-actions{float:left;width:100%;position:relative;margin:0}
.comments .comments-content .comment-header{font-size:15px;display:block;overflow:hidden;clear:both;margin:0 0 3px;padding:0 0 5px;border-bottom:1px dashed #d6d6d6}
.comments .comments-content .comment-header a{color:$(title.color);transition:color .17s}
.comments .comments-content .comment-header a:hover{color:$(title.hover)}
.comments .comments-content .user{font-style:normal;font-weight:600;display:block}
.comments .comments-content .icon.blog-author{display:none}
.comments .comments-content .comment-content{float:left;font-size:13px;color:#5E5E5E;font-weight:600;text-align:left;line-height:1.4em;margin:5px 0 9px}
.comments .comment .comment-actions a{margin-right:5px;padding:2px 5px;color:$(title.color);font-weight:400;background-color:#f2f2f2;font-size:10px;transition:all .17s ease}
.comments .comment .comment-actions a:hover{color:#fff;background-color:$(main.color);border-color:$(main.color);text-decoration:none}
.comments .comments-content .datetime{float:left;font-size:11px;font-weight:400;color:#aaa;position:relative;padding:0 1px;margin:4px 0 0;display:block}
.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{color:#aaa}
.comments .thread-toggle{margin-bottom:4px}
.comments .thread-toggle .thread-arrow{height:7px;margin:0 3px 2px 0}
.comments .thread-count a,.comments .continue a{transition:opacity .17s;color:#000}
.comments .thread-count a:hover,.comments .continue a:hover{opacity:.8}
.comments .thread-expanded{padding:5px 0 0}
.comments .thread-chrome.thread-collapsed{display:none}
.thread-arrow:before{content:'';font-family:FontAwesome;color:$(title.color);font-weight:400;margin:0 2px 0 0}
.comments .thread-expanded .thread-arrow:before{content:'\f0d7'}
.comments .thread-collapsed .thread-arrow:before{content:'\f0da'}
.comments .comments-content .comment-thread{margin:0}
.comments .continue a{padding:0 0 0 60px;font-weight:400}
.comments .comments-content .loadmore.loaded{margin:0;padding:0}
.comments .comment-replybox-thread{margin:0}
.comments .comments-content .loadmore,.comments .comments-content .loadmore.loaded{display:none}

comment-editor{margin:0 0 20px}

.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{color:$(title.color);font-weight:700;margin:0 0 15px}
.post-body h1,.post-body h2{font-size:24px}
.post-body h3{font-size:21px}
.post-body h4{font-size:18px}
.post-body h5{font-size:16px}
.post-body h6{font-size:13px}
blockquote{font-style:italic;padding:10px;margin:0;border-left:4px solid $(main.color)}
blockquote:before,blockquote:after{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;color:#aaa;line-height:1}
blockquote:before{content:'\f10d';margin:0 10px 0 0}
blockquote:after{content:'\f10e';margin:0 0 0 10px}
.widget .post-body ul,.widget .post-body ol{line-height:1.5;font-weight:400}
.widget .post-body li{margin:5px 0;padding:0;line-height:1.5}
.post-body ul{padding:0 0 0 20px}
.post-body ul li:before{content:"\f105";font-family:FontAwesome;font-size:13px;font-weight:400;margin:0 5px 0 0}
.post-body u{text-decoration:underline}
.post-body a{transition:color .17s ease}
.post-body strike{text-decoration:line-through}
.contact-form{overflow:hidden}
.contact-form .widget-title{display:none}
.contact-form .contact-form-name{width:calc(50% - 5px)}
.contact-form .contact-form-email{width:calc(50% - 5px);float:right}
.sidebar .widget{position:relative;overflow:hidden;background-color:#fff;box-sizing:border-box;padding:0;margin:0 0 35px}
.sidebar .widget-title{position:relative;float:left;height:32px;display:inline-block;margin:0 0 20px}
.sidebar .widget-title > h3{color:#02010a;text-transform:capitalize;letter-spacing:-.02em;font-family:'Montserrat',sans-serif;font-size:16px;overflow:hidden;font-weight:700;margin:0 0 15px;height:36px;line-height:36px}
.sidebar .widget-content{float:left;width:100%;margin:0}
ul.social-counter{margin:0 -5px}
.social-counter li{float:left;width:25%;box-sizing:border-box;padding:0 5px;margin:10px 0 0}
.social-counter li:nth-child(1),.social-counter li:nth-child(2),.social-counter li:nth-child(3),.social-counter li:nth-child(4){margin-top:0}
.social-counter li a{display:block;height:40px;font-size:22px;color:$(main.color);text-align:center;line-height:40px;border:2px solid #ededed;transition:color .17s}
.social-counter li a:hover{color:$(title.color)}
.list-label li{position:relative;display:block;padding:7px 0}
.list-label li:first-child{padding-top:0;border-top:0}
.list-label li:last-child{padding-bottom:0;border-bottom:0}
.list-label li a{display:block;color:$(title.color);font-size:12px;font-weight:400;text-transform:capitalize;transition:color .17s}
.list-label li a:hover{color:$(title.hover)}
.list-label .label-count{position:relative;float:right;width:16px;height:16px;background-color:$(main.color);color:#fff;font-size:11px;font-weight:400;text-align:center;line-height:16px}
.cloud-label li{position:relative;float:left;margin:0 5px 5px 0}
.cloud-label li a{display:block;height:26px;color:$(main.color);font-size:12px;line-height:26px;font-weight:400;padding:0 10px;border:1px solid #eee;transition:all .17s ease}
.cloud-label .label-count{display:none}
.sidebar .FollowByEmail > .widget-title > h3{margin:0}
.FollowByEmail .widget-content{position:relative;overflow:hidden;font-weight:400;box-sizing:border-box;border-radius:2px}
.FollowByEmail .before-text{font-size:13px;line-height:1.5em;margin:0 0 15px;display:block;padding:0;overflow:hidden}
.FollowByEmail .follow-by-email-inner{position:relative}
.FollowByEmail .follow-by-email-inner .follow-by-email-address{width:55%;height:40px;color:$(title.color);font-size:11px;font-family:inherit;padding:0 10px;margin:0 0 10px;box-sizing:border-box;border:1px solid #eee;transition:ease .17s}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit{letter-spacing:.5px;width:43%;height:40px;font-family:inherit;font-size:12px;color:#000;background-color:#f6da09;text-transform:uppercase;text-align:center;font-weight:700;cursor:pointer;margin:0;border:0;transition:opacity .17s ease}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{opacity:.85}

ArchiveList ul.flat li{color:$(title.color);font-size:13px;font-weight:400;padding:7px 0;border-bottom:1px dotted #eaeaea}

ArchiveList ul.flat li:first-child{padding-top:0}

ArchiveList ul.flat li:last-child{padding-bottom:0;border-bottom:0}

ArchiveList .flat li > a{display:block;color:$(title.color);transition:color .17s}

ArchiveList .flat li > a:hover{color:$(title.hover)}

ArchiveList .flat li > a:before{content:"\f054";float:left;color:#161619;font-weight:400;font-family:FontAwesome;font-size:6px;margin:6px 3px 0 0;display:inline-block;transition:color .17s}

ArchiveList .flat li > a > span{position:relative;float:right;width:16px;height:16px;background-color:$(main.color);color:#fff;font-size:11px;font-weight:400;text-align:center;line-height:16px}

.PopularPosts .post{overflow:hidden;margin:20px 0 0}
.PopularPosts .post:first-child{padding:0;margin:0;border:0}

sidebar-wrapper .PopularPosts .post-image-link{position:relative;width:120px;height:85px}

.PopularPosts .post-image-link{position:relative;width:80px;height:70px;float:left;overflow:hidden;display:block;vertical-align:middle;margin:0 12px 0 0}
.PopularPosts .post-info{overflow:hidden}

sidebar-wrapper .PopularPosts .post-title{letter-spacing:-.02em;text-transform:capitalize;font-size:15px;font-weight:700;line-height:1.4em;text-decoration:none;margin:0 0 5px}

.PopularPosts .post-title{letter-spacing:0;text-transform:capitalize;font-size:13px;font-weight:700;line-height:1.4em;text-decoration:none;margin:0 0 5px}
span.caption{font-size:13px;line-height:1.6em;margin:5px 0;display:block;padding:0;overflow:hidden;color:#b2c0cd}
.PopularPosts .post-title a{display:block;color:#02010a;transition:color .17s}
.PopularPosts .post-date:before{font-size:10px}
.FeaturedPost .post-image-link{display:block;position:relative;width:48%;float:left;height:242px;overflow:hidden;margin:0 30px 10px 0}
.FeaturedPost .post-info{overflow:hidden}
.FeaturedPost .post-title{letter-spacing:-.02em;font-size:22px;overflow:hidden;font-weight:700;line-height:1.3em;margin:0 0 8px}
.FeaturedPost .post-title a{color:#02010a}
.FeaturedPost .post-title a:hover{}
.Text{font-size:13px}
.contact-form-widget form{font-weight:400}
.contact-form-name{float:left;width:100%;height:30px;font-family:inherit;font-size:13px;line-height:30px;box-sizing:border-box;padding:5px 10px;margin:0 0 10px;border:1px solid #ebebeb;border-radius:2px}
.contact-form-email{float:left;width:100%;height:30px;font-family:inherit;font-size:13px;line-height:30px;box-sizing:border-box;padding:5px 10px;margin:0 0 10px;border:1px solid #ebebeb;border-radius:2px}
.contact-form-email-message{float:left;width:100%;font-family:inherit;font-size:13px;box-sizing:border-box;padding:5px 10px;margin:0 0 10px;border:1px solid #ebebeb;border-radius:2px}
.contact-form-button-submit{float:left;width:100%;height:30px;background-color:$(main.color);font-size:13px;color:#fff;line-height:30px;cursor:pointer;box-sizing:border-box;padding:0 10px;margin:0;border:0;border-radius:2px;transition:background .17s ease}
.contact-form-button-submit:hover{background-color:$(main.dark.color)}
.contact-form-error-message-with-border{float:left;width:100%;background-color:#fbe5e5;font-size:11px;text-align:center;line-height:11px;padding:3px 0;margin:10px 0;box-sizing:border-box;border:1px solid #fc6262}
.contact-form-success-message-with-border{float:left;width:100%;background-color:#eaf6ff;font-size:11px;text-align:center;line-height:11px;padding:3px 0;margin:10px 0;box-sizing:border-box;border:1px solid #5ab6f9}
.contact-form-cross{margin:0 0 0 3px}
.contact-form-error-message,.contact-form-success-message{margin:0}
.BlogSearch .search-input{float:left;width:75%;height:30px;background-color:#fff;font-weight:400;font-size:13px;line-height:30px;box-sizing:border-box;padding:5px 10px;border:1px solid #ebebeb;border-right-width:0;border-radius:2px 0 0 2px}
.BlogSearch .search-action{font-weight:700;float:right;width:25%;height:30px;font-family:inherit;font-size:13px;line-height:30px;cursor:pointer;box-sizing:border-box;background-color:$(main.color);color:#000;padding:0 5px;border:0;border-radius:0 2px 2px 0;transition:background .17s ease}
.BlogSearch .search-action:hover{background-color:$(main.dark.color);color:#fff}
.Profile .profile-img{float:left;width:80px;height:80px;margin:0 15px 0 0;transition:all .17s ease}
.Profile .profile-datablock{margin:0}
.Profile .profile-data .g-profile{display:block;font-size:18px;color:$(title.color);font-weight:700;margin:0 0 5px;transition:color .17s ease}
.Profile .profile-data .g-profile:hover{color:$(title.hover)}
.Profile .profile-info > .profile-link{color:$(title.color);font-size:11px;margin:5px 0 0;transition:color .17s ease}
.Profile .profile-info > .profile-link:hover{color:$(title.hover)}
.Profile .profile-datablock .profile-textblock{display:none}
.common-widget .LinkList ul li,.common-widget .PageList ul li{width:calc(50% - 5px);padding:7px 0 0}
.common-widget .LinkList ul li:nth-child(odd),.common-widget .PageList ul li:nth-child(odd){float:left}
.common-widget .LinkList ul li:nth-child(even),.common-widget .PageList ul li:nth-child(even){float:right}
.common-widget .LinkList ul li a,.common-widget .PageList ul li a{display:block;color:$(title.color);font-size:13px;font-weight:400;transition:color .17s ease}
.common-widget .LinkList ul li a:hover,.common-widget .PageList ul li a:hover{color:$(title.hover)}
.common-widget .LinkList ul li:first-child,.common-widget .LinkList ul li:nth-child(2),.common-widget .PageList ul li:first-child,.common-widget .PageList ul li:nth-child(2){padding:0}

footer-wrapper{background-color:$(main.dark.color)}

footer-wrapper .container{position:relative;overflow:hidden;margin:0 auto;padding:25px 0}

.footer-widgets-wrap{position:relative;display:flex;margin:0 -15px}

footer-wrapper .footer{display:inline-block;float:left;width:33.33333333%;box-sizing:border-box;padding:0 15px}

footer-wrapper .footer .widget{float:left;width:100%;padding:0;margin:25px 0 0}

footer-wrapper .footer .Text{margin:10px 0 0}

footer-wrapper .footer .widget:first-child{margin:0}

.footer .widget > .widget-title > h3{position:relative;color:$(main.color);font-size:14px;line-height:14px;font-weight:600;text-transform:uppercase;margin:0 0 25px;letter-spacing:.5px}
.footer .custom-widget .post-title a,.footer .PopularPosts .post-title a,.footer .FeaturedPost .post-title a,.footer .LinkList ul li a,.footer .PageList ul li a,.footer .Profile .profile-data .g-profile,.footer .Profile .profile-info > .profile-link{color:$(footer.color)}
.footer .custom-widget .post-title a:hover,.footer .PopularPosts .post-title a:hover,.footer .FeaturedPost .post-title a:hover,.footer .LinkList ul li a:hover,.footer .PageList ul li a:hover,.footer .Profile .profile-data .g-profile:hover,.footer .Profile .profile-info > .profile-link:hover{color:$(title.hover)}
.footer .no-posts{color:$(footer.color)}
.footer .post-meta{color:#aaa}
.footer .FollowByEmail .widget-content > h3{position:relative;color:#f6da09;font-size:14px;line-height:14px;font-weight:600;text-transform:uppercase;margin:0 0 25px;letter-spacing:.5px}
.footer .FollowByEmail .before-text,#footer-wrapper .footer .Text{color:#b2c0cd}
.footer .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover{background:$(main.dark.color);color:#fff}
.footer .FollowByEmail .follow-by-email-inner .follow-by-email-address{background-color:rgba(255,255,255,0.05);color:$(footer.color);border-color:rgba(255,255,255,0.05)}
.footer #ArchiveList .flat li > a{color:$(footer.color)}
.footer .list-label li,.footer .BlogArchive #ArchiveList ul.flat li{border-color:rgba(255,255,255,0.05)}
.footer .list-label li:first-child{padding-top:0}
.footer .list-label li a,.footer .list-label li a:before,.footer #ArchiveList .flat li > a,.footer #ArchiveList .flat li > a:before{color:$(footer.color)}
.footer .list-label li > a:hover,.footer #ArchiveList .flat li > a:hover{color:$(title.hover)}
.footer .list-label .label-count,.footer #ArchiveList .flat li > a > span{background-color:rgba(255,255,255,0.05);color:$(footer.color)}
.footer .cloud-label li a{border-color:rgba(255,255,255,0.05);color:$(footer.color)}
.footer .cloud-label li a:hover{background-color:$(main.color);color:#000}
.footer .BlogSearch .search-input{background-color:rgba(255,255,255,0.05);color:$(footer.color);border-color:rgba(255,255,255,0.05)}
.footer .contact-form-name,.footer .contact-form-email,.footer .contact-form-email-message{background-color:rgba(255,255,255,0.05);color:$(footer.color);border-color:rgba(255,255,255,0.05)}
.footer .BlogSearch .search-action:hover,.footer .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover,.footer .contact-form-button-submit:hover{background-color:rgba(0,0,0,0.3)}

sub-footer-wrapper{background-color:rgba(0,0,0,0.2);color:$(footer.color);display:block;padding:0;width:100%;overflow:hidden}

sub-footer-wrapper .container{overflow:hidden;margin:0 auto;padding:10px 0}

sub-footer-wrapper .copyright-area{font-size:12px;display:inline-block;height:34px;line-height:34px;text-align:center;text-transform:uppercase;font-weight:400}

sub-footer-wrapper .copyright-area a{color:$(main.color);transition:color .17s}

.hidden-widgets{display:none;visibility:hidden}
.back-top{display:none;z-index:1010;width:32px;height:32px;position:fixed;bottom:25px;right:25px;cursor:pointer;overflow:hidden;font-size:13px;color:#fff;text-align:center;line-height:32px}
.back-top:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:$(main.color);opacity:.5;transition:opacity .17s ease}
.back-top:after{content:'\f077';position:relative;font-family:FontAwesome;font-weight:400;opacity:.8;transition:opacity .17s ease}
.back-top:hover:before,.back-top:hover:after,.nav-active .back-top:after,.nav-active .back-top:before{opacity:1}
.error404 #main-wrapper{width:100%!important;margin:0!important}
.error404 #sidebar-wrapper{display:none}
.errorWrap{color:$(title.color);text-align:center;padding:80px 0 100px}
.errorWrap h3{font-size:160px;line-height:1;margin:0 0 30px}
.errorWrap h4{font-size:25px;margin:0 0 20px}
.errorWrap p{margin:0 0 10px}
.errorWrap a{display

Content must not be empty

Related Snippets

Output
Loading...