0% found this document useful (0 votes)
42 views29 pages

FFF

This document is the HTML code for a blog template. It includes metadata, stylesheets, scripts and other code needed to display the template. It defines variables for colors, fonts, and other styling elements. The template code is wrapped in comments and XML tags.

Uploaded by

RM imed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
42 views29 pages

FFF

This document is the HTML code for a blog template. It includes metadata, stylesheets, scripts and other code needed to display the template. It defines variables for colors, fonts, and other styling elements. The template code is wrapped in comments and XML tags.

Uploaded by

RM imed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 29

<?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>
<!-- Title SEO -->
<script czid='yr62htxpub' data-adel='atag' data-cfasync='false'
src='//acacdn.com/script/atg.js' type='text/javascript'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-
scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:view.title.escaped/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title> Error 404 - <data:blog.title/> </title>
</b:if>
</b:if>
<b:if cond='data:view.isHomepage'>
<script
type='application/ld+json'>{&quot;@context&quot;:&quot;http://schema.org&quot;,&quo
t;@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>
<b:include name='theme-head'/>

<!-- Google Fonts -->


<link href='//fonts.googleapis.com/css?
family=Dosis: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: A-Game
Version: 1.0.0
License: Free Version
Author: Templates River
Author Url: https://www.templatesriver.com/
----------------------------------------------- */

<!-- Variable definitions -->


<Variable name="keycolor" description="Key Color" type="color" default="$(main)"
value="#0074b7"/>

<Group description="Theme Body" selector="body">


<Variable name="main" description="Main" type="color" default="#0074b7"
value="#0074b7"/>
<Variable name="body.background" description="Body Background" type="color"
default="#fff" value="#ffffff"/>
<Variable name="body.font" description="Body Font Style" type="font"
default="400 14px Dosis,sans-serif" value="400 14px Dosis,sans-serif"/>
<Variable name="body.color" description="Body Main Color" type="color"
default="#181a1c" value="#181a1c"/>
<Variable name="body.box" description="Body Box Color" type="color"
default="#f5f6f9" value="#f5f6f9"/>
<Variable name="link.color" description="Link Color" type="color"
default="#24272a" value="#24272a"/>
<Variable name="link.black" description="Link Black Color" type="color"
default="$(link.color)" value="#24272a"/>
<Variable name="link.hover" description="Link Color Hover" type="color"
default="$(main)" value="#0074b7"/>
</Group>

<Group description="Theme Background" selector="body">


<Variable name="bg.default" description="Body Background Color" type="color"
default="$(body.background)" value="#ffffff"/>
<Variable name="bg.color" description="Background Color 1" type="color"
default="$(main)" value="#0074b7"/>
<Variable name="bg.color2" description="Background Color 2" type="color"
default="#004a75" value="#004a75"/>
<Variable name="bg.custom" description="Background Color Custom" type="color"
default="#3c3b47" value="#3c3b47"/>
</Group>

<Group description="Theme Colors Custom" selector="body">


<Variable name="text.white" description="Text Color White" type="color"
default="#fff" value="#ffffff"/>
<Variable name="text.black" description="Text Color Black" type="color"
default="#000" value="#000000"/>
<Variable name="text.muted" description="Text Color Muted" type="color"
default="#859098" value="#859098"/>
<Variable name="text.danger" description="Text Color Danger" type="color"
default="#dc3545" value="#dc3545"/>
<Variable name="text.button" description="Button Text Color" type="color"
default="$(text.white)" value="#ffffff"/>
<Variable name="button" description="Button Background Color" type="color"
default="$(main)" value="#0074b7"/>
</Group>

<Group description="Border System" selector="body">


<Variable name="border.color" description="Border Color" type="color"
default="#efefef" value="#efefef"/>
<Variable name="rounded" description="Border Radius Rounded" type="length"
min="2px" max="5px" default="3px" value="3px"/>
<Variable name="rounded.0" description="Border Radius Rounded No"
type="length" min="0" max="0" default="0" value="0"/>
<Variable name="rounded.circle" description="Border Radius Rounded Circle"
type="length" min="20px" max="50px" default="50px" value="50px"/>
</Group>

<Group description="Theme Widget" selector="body">


<Variable name="widget.title" description="Widget Font Title" type="font"
default="$(body.font)" value="400 14px Nunito Sans,sans-serif"/>
<Variable name="widget.background" description="Widget background"
type="color" default="#0074b7" value="#0074b7"/>
<Variable name="widget.color" description="Widget Font Color" type="color"
default="#181a1c" value="#181a1c"/>
</Group>

<Group description="Theme Navbar" selector="body">


<Variable name="top.navigation" description="Top Navigation background"
type="color" default="#0074b7" value="#0074b7"/>
<Variable name="menu.wrapper" description="Menu Wrapper background"
type="color" default="#0074b7" value="#0074b7"/>
<Variable name="mega.menu" description="Widget Mega Menu Background"
type="color" default="$(mega.menu)" value="#2b373a"/>
</Group>

<Group description="Theme Footer" selector="body">


<Variable name="footer.background" description="Footer Text Color"
type="color" default="#004a75" value="#004a75"/>
<Variable name="footer.copyright" description="Footer Copyright Color"
type="color" default="#00314e" value="#00314e"/>
<Variable name="footer.hover" description="Footer Text Color Hover"
type="color" default="#03a9f4" value="#03a9f4"/>
</Group>

<Group description="Theme Email" selector="body">


<Variable name="followByEmail" description="Follow By Email Text"
type="string" default="Get all latest content delivered straight to your inbox."
value="Get all latest content delivered straight to your inbox."/>
</Group>

/* 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,la
bel,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;}
input {font: $(body.font);letter-spacing: .5px;}
dl,ul{list-style-position:inside;font-weight:400;list-style:none}
ul li{list-style:none}
img{border:none;position:relative}
*, ::after, ::before {box-sizing: border-box;}
.clearfix,.clear{clear:both}
.section,.widget,.widget ul{margin:0;padding: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}
.text-danger {color:$(text.danger)}
.Text{font-size:13px}
h1 {font-size: 32px}
h2 {font-size: 26px}
h3 {font-size: 22px}
h4 {font-size: 20px}
h5 {font-size: 16px}
h6 {font-size: 14px}
h4, h5, h6 {font-weight: 500;}
a img{border:0}
a,a:visited{text-decoration:none}
a {color: $(link.color); transition: all .17s ease}
a:hover {transition: background .17s ease; text-decoration: none; outline: none;
color: $(link.hover)}

/* Custom Css */

.px-15 {
padding-left:15px!important;
padding-right:15px!important
}

.mx-15 {
margin-left:15px;
margin-right:15px
}

.d-flex {
display:flex!important
}

.d-none {
display:none
}

.d-block {
display:block!important
}

.mt-40 {
margin-top:40px!important
}

.mb-40 {
margin-bottom:40px!important
}

.my-40 {
margin:40px 0!important
}

.m-0 {
margin:0!important
}

.p-0 {
padding:0!important
}

@media (min-width: 768px) {


.m-md-0 {
margin:0!important
}
}
@media (max-width: 767.92px) {
.px--md-15 {
padding:0 15px!important
}
}

.no-posts {
float:left;
width:100%;
height:100px;
line-height:100px;
text-align:center;
color: $(text.danger);
}

/* Body CSS */

html {
scroll-behavior: smooth;
}

body {
background: $(body.background);
font: $(body.font);
color: $(body.color);
word-wrap: break-word;
margin: 0;
padding: 0;
}

.text-muted {
color: $(text.muted)
}

.outer-wrapper {
margin: 0 auto;
overflow: hidden;
}

.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}

.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}

.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px
}

.index #content-container {
margin: 20px auto 40px;
}

#content-container {
margin: 40px auto;
overflow: hidden
}

#content-wrapper {
margin: 40px -15px;
overflow: hidden;
transition: opacity .35s ease, transform .35s ease;
}

.ads-wrapper {
text-align: center;
}

.ads-wrapper .widget-title {
display: none;
}

.ads-wrapper .widget-content {
position: relative;
max-width: 100%;
max-height: 90px;
line-height: 1;
margin: auto;
}

/* Header */

.top-wrapper {
position: relative;
width: 100%;
background: $(bg.color)
}

.top-wrapper .row {
position: relative;
width: 100%;
line-height: 45px;
display: flex;
align-items: center;
}

.header-wrapper {
margin-right: 20px;
}

.header-wrapper .header-wrap {
position: relative;
background-color: transparent;
color: $(text.white);
padding: 0;
text-align: center;
}

.header-wrapper .header-wrap .header-logo h1 {


font-size: 28px;
margin: 0;
padding: 0;
}

.header-wrapper .header-wrap .header-logo h1 a {


color: $(text.white);
padding: 15px 0;
}

.header-wrapper .header-wrap .header-logo h1:hover {


color: inherit;
}

.header-wrapper .header-wrap .header-logo img {


max-width: 100%;
height: 50px;
margin: 0;
}

.header-wrapper .header-wrap .header-logo p {


display: none;
font-size: 13px;
margin: 5px 0;
color: $(text.muted)
}

.header-ads .widget .widget-content {


width: 728px;
max-width: 100%;
max-height: 90px;
line-height: 1
}

/* Main Menu */

.menu-wrapper {
background: $(menu.wrapper);
margin: 0 50px 0 auto;
}

.main-menu {
display: flex;
justify-content: center;
}

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

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

#main-menu #main-menu-nav {
padding-left: 0;
}

#main-menu-nav>li>a {
text-transform: uppercase
}

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

#main-menu ul>li.li-home a {
font-size: 22px;
padding: 0 20px
}

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

#main-menu ul>li:hover>a {
color: $(text.white);
background-color: transparent;
}

#main-menu ul>li>ul {
position: absolute;
display: none;
white-space: nowrap;
float: left;
left: 0;
top: 45px;
width: 180px;
background-color: $(text.white);
z-index: 99999;
padding: 0;
margin: 0;
}

#main-menu ul>li>ul>li {
display: block;
float: none;
position: relative;
}

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

#main-menu ul>li>ul>li:hover {
background-color: rgba(255, 255, 255, 0.01)
}

#main-menu ul>li>ul>li a {
background-color: $(text.white);
border-bottom: 1px solid $(border.color);
color: $(text.black);
font-size: 12px;
font-weight: 500;
display: block;
text-transform: uppercase;
line-height: 34px;
opacity: .7;
box-sizing: border-box;
padding: 4px 15px;
margin: 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
transition: all .17s ease
}

#main-menu ul>li>ul>li:hover a {
color: $(main);
}

#main-menu ul>li>ul>li a:hover {


color: $(text.white);
background-color: $(bg.color);
}

#main-menu ul>li.sub-drop>a:after,
#main-menu ul>li.mega-menu > a:after {
content: '\f107';
float: right;
font-family: FontAwesome;
font-size: 13px;
font-weight: 400;
opacity: .8;
margin: 0 0 0 5px
}

#main-menu ul>li.sub-drop>a:after{
color: $(text.white);
}

#main-menu ul>li.mega-icon:after {
color: $(text.white);
}

#main-menu ul>li>ul>li.sub-drop>a:after {
content: '\f107';
float: right;
font-family: FontAwesome;
font-size: 13px;
font-weight: 400;
opacity: .8;
margin: 0 0 0 5px;
transform: rotate(-90deg)
}

#main-menu ul>li>ul>li.sub-drop>a:after {
color: $(body.color);
}

#main-menu ul>li:hover.sub-drop>a:after,
#main-menu ul>li:hover .mega-menu:after {
content: '\f107';
}

#main-menu ul>li:hover.sub-drop>a:after {
color: $(body.color);
}

#main-menu ul>li:hover>ul {
display: block;
}

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

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

#main-menu .mega-menu>ul.mega-menu-inner {
overflow: hidden;
background-color: $(bg.color);
}

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

.mega-menu-inner .mega-item {
float: left;
width: 20%;
padding: 0 10px;
}

.mega-menu-inner .mega-content {
position: relative;
width: 100%;
overflow: hidden;
padding: 0
}

.mega-content .post-image-wrap {
width: 100%;
height: 120px
}

.mega-content .post-image-link {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: relative;
overflow: hidden;
padding: 0
}

.mega-content .post-title {
position: relative;
font-size: 13px;
line-height: 1.5em;
margin: 10px 0 0;
padding: 0
}

.mega-content .post-title a {
display: block;
color: $(text.white);
transition: color .17s
}

.mega-content .post-title a:hover {


color: $(bg.color2)
}

/* Search */
.show-search,
.hide-search {
position: absolute;
right: 15px;
top: 0;
display: block;
width: 48px;
height: 48px;
line-height: 45px;
z-index: 20;
color: $(text.white);
font-size: 16px;
text-align: right;
cursor: pointer;
transition: opacity .17s ease;
padding: 0;
}

.show-search {
position: absolute;
right: 15px;
top: 0;
}
.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 {
opacity: .8
}

#nav-search {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 45px;
z-index: 99;
background-color: #fff;
padding: 0
}

#nav-search .search-form {
width: 100%;
height: 45px;
background-color: $(bg.color);
line-height: 45px;
overflow: hidden;
padding: 0
}

#nav-search .search-input {
width: 100%;
height: 45px;
text-align: left;
font-family: inherit;
color: $(text.white);
margin: 0;
padding: 0 45px 0 25px;
background-color: $(bg.color);
font-size: 14px;
font-weight: 400;
border: 0
}

#nav-search .search-input::placeholder {
color: $(text.white);
background-color: $(bg.color)
}
#nav-search .search-input:focus {
background-color: $(bg.color);
color: $(text.white);
outline: none;
z-index: 26
}

/* Mobile Navigation */
.slide-menu-toggle {
display: none;
position: absolute;
height: 48px;
width: 48px;
top: 0;
left: 0;
line-height: 45px;
font-family: FontAwesome;
color: $(main);
font-size: 16px;
font-weight: 400;
text-align: left;
cursor: pointer;
z-index: 4;
padding: 0;
transition: all .5s ease
}

.slide-menu-toggle:before {
content: "\f0c9"
}

.nav-active .slide-menu-toggle:before {
content: "\f00d"
}

.slide-menu-toggle:hover {
opacity: .7
}

.mobile-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 100%;
background-color: $(text.white);
box-sizing: border-box;
padding: 20px 0;
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 {
background: #000000d9;
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: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.01)
}

.mobile-menu>ul li ul {
overflow: hidden;
display: none
}

.mobile-menu>ul>li:first-child {
border-top: 0
}

.mobile-menu ul li a {
color: #fff;
padding: 0;
display: block;
transition: all .17s ease
}

.mobile-menu ul li.sub-drop .submenu-toggle {


position: absolute;
top: 0;
right: 0;
color: #fff;
cursor: pointer
}

.mobile-menu ul li.sub-drop .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.sub-drop.show>.submenu-toggle:after {
transform: rotate(90deg)
}

.mobile-menu>ul>li>ul>li a {
opacity: .7;
padding: 0 0 0 15px
}

.mobile-menu>ul>li>ul>li>ul>li>a {
padding: 0 0 0 30px
}

.mobile-menu ul li a:hover,
.mobile-menu ul>li>.submenu-toggle:hover {
opacity: .7
}

.mobile-menu>ul>li>ul>li a:hover {
opacity: 1
}

/* Featured Posts */

.featured-posts,
.bottom-posts {
position: relative;
width: 33.33%;
padding: 0;
margin: 0
}

.featured-posts .widget-title,
.bottom-posts .widget-title {
border-bottom: 1px solid $(bg.color);
margin: 0 0 20px;
}

.featured-posts .widget-title h3,


.bottom-posts .widget-title h3 {
text-transform: uppercase;
color: $(main);
margin: 25px 0 0
}

.featured-posts .feat-posts,
.bottom-posts .feat-posts {
position: relative;
width: 100%;
padding: 0;
margin: 20px 0
}
.featured-posts .feat-posts,
.bottom-posts .feat-posts {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}

.featured-posts .feat-item,
.bottom-posts .feat-item {
position: relative;
padding: 2px;
margin: 8px 0;
transition: all .17s ease;
width: 130px;
border-radius: $(rounded);
box-shadow: 0 0 10px 0 rgba(24, 26, 28, 0.2)
}

.featured-posts .feat-item .post-thumb,


.bottom-posts .feat-item .post-thumb {
display: block;
width: 125px;
height: 100px;
object-fit: cover;
}

.featured-posts .feat-item .post-info,


.bottom-posts .feat-item .post-info {
text-align: center;
}

.featured-posts .feat-item .post-info h3,


.bottom-posts .feat-item .post-info h3 {
font-size: 16px;
padding: 7px 5px;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.hot-section .show-hot,
.featured-posts .show-feat {
display: block!important;
}

.hot-section {
position: relative;
width: 33.33%;
margin: 0;
padding: 0 15px !important
}

.hot-section .widget-title {
border-bottom: 1px solid $(bg.color);
margin: 0 0 20px;
}
.hot-section .widget-title h3 {
text-transform: uppercase;
color: $(main);
margin: 25px 0 0
}

.hot-section .hot-posts {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}

.hot-section .hot-item {
position: relative;
padding: 2px;
margin: 8px 0;
transition: all .17s ease;
width: 130px;
border-radius: $(rounded);
box-shadow: 0 0 10px 0 rgba(24, 26, 28, 0.2)
}

.hot-section .hot-item .post-thumb {


display: block;
width: 125px;
height: 100px;
object-fit: cover;
}

.hot-section .hot-item:first-child {
width: 100%;
}

.hot-section .hot-item:first-child .post-thumb {


display: block;
width: 100%;
height: 253px;
}

.hot-section .hot-item .post-info {


text-align: center;
}

.hot-section .hot-item .post-info h3 {


font-size: 16px;
padding: 7px 5px;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

/* Main Wrapper */
.main .widget {
position: relative
}

.index .main-wrapper {
float: left;
overflow: hidden;
width: 100%;
padding: 10px 15px
}

.main-wrapper {
float: left;
overflow: hidden;
width: 66.66666667%;
padding: 10px 15px;
}

.main-wrapper .home-title {
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
color: $(main);
border-bottom: 1px solid $(bg.color);
margin: 0 0 20px;
}

.blog-post.item-post {
padding: 10px;
box-shadow: 0 0 10px 0 rgb(24 26 28 / 20%);
border-radius: 10px;
}

.blog-post {
display: block;
overflow: hidden;
}

.grid-posts {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.index-post {
position: relative;
overflow: visible;
margin: 8px 0;
padding: 2px;
transition: all .17s ease;
width: calc(130px + 2px);
border-radius: $(rounded);
box-shadow: 0 0 10px 0 rgba(24, 26, 28, 0.2)
}

.index-post-inside-wrap {
text-align: left;
display: block;
align-items: center;
}

.post-image-wrap {
position: relative;
display: block
}

.index-post .post-image-wrap {
position: relative;
width: 100%;
height: 110px;
overflow: hidden;
float: none;
}

.index-post .post-image-wrap .post-image-link {


position: relative;
display: block;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden
}

.post-thumb {
display: block;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: opacity .35s ease, transform .35s ease;
opacity: 0
}

.post-thumb.lazy-load {
opacity: 1
}

.index-post .post-image-link .post-thumb {


display: block;
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}

.post-image-wrap:hover .post-image-link img {


opacity: .8
}

.index-post h2.post-title {
font-size: 16px;
padding: 7px 5px;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: center;
}

.index-post h2.post-title>a {
color: $(link.color);
transition: all .17s ease
}

.index-post h2.post-title>a:hover {
color: $(link.hover)
}

.item-post h1.post-title {
font-size: 28px;
font-weight: 700;
margin: 16px 0;
}

.index-post .post-info {
width: 100%;
padding: 0;
}

.index-post .post-summary {
padding: 2px 0 20px;
}

.post-info .post-tag {}

.post-tag>a {
display: inline-block;
padding: 0 4px;
margin-bottom: 10px;
font-size: 11px;
font-weight: 500;
transition: .17s ease;
}

.post-tag>a:first-child {
margin-right: 3px;
}

.post-tag>a {
background-color: $(bg.color);
color: $(text.white);
border-radius: 2.5px;
padding: 2px 8px;
}

.post-tag>a:hover {
background: $(main);
}

.post-meta {
font-size: 12px;
margin: 0;
color: $(text.muted);
line-height: 32px;
}

.post-meta .author-avatar {
float: left;
width: 32px;
height: 32px;
object-fit: cover;
border-radius: 20px;
margin-right: 10px;
}

.post-meta .post-author a {
color: $(text.muted);
font-weight: 400;
}

.post-meta .post-author a:hover {


color: $(link.hover)
}

.index .post-meta .author-avatar {


float: left;
width: 24px;
height: 24px;
object-fit: cover;
border-radius: $(rounded.circle);
margin: 5px 10px 5px 0;
}

.index-post .post-meta .post-date::before {


content: '\f073';
font-family: FontAwesome;
margin: 0 4px;
color: $(bg.color);
}

.item .post-meta .post-author::after {


content: '\f073';
font-family: FontAwesome;
margin: 0 2px 0 4px;
color: $(text.muted);
}

.item-post-wrap {
background-color: #fff;
}

.item-post .post-body {
display: block;
font-size: 14px;
line-height: 1.6em;
margin-top: 20px;
padding: 25px 0 20px;
border-top: 1px solid $(border.color);
overflow: hidden
}

.post-body img {
max-width: 100%;
height: auto;
}

.static_page .item-post .post-body {


padding: 20px 0
}
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
color: $(link.color);
margin: 0 0 15px
}

.post-body h1,
.post-body h2 {
font-size: 26px
}

.post-body h3 {
font-size: 22px
}

.post-body h4 {
font-size: 18px
}

.post-body h5 {
font-size: 16px
}

.post-body h6 {
font-size: 13px
}

.post-body h1,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
margin: 1rem 0;
}

.widget .post-body ul,


.widget .post-body ol {
line-height: 1.5;
font-weight: 400;
margin: 13px 0
}

.widget .post-body li {
margin: 7px 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: 900;
margin: 0 5px 0 0;
color: $(text.muted)
}

.post-body u {
text-decoration: underline
}

.post-body a {
transition: color .17s ease
}

.post-body strike {
text-decoration: line-through
}

.post-snippet {
display: block;
line-height: 1.8;
font-weight: 400;
margin: 10px 0 20px
}

a.read-more {
background-color: transparent;
height: 32px;
color: $(body.color);
font-size: 12px;
font-weight: 600;
line-height: 28px;
text-transform: uppercase;
transition: background .17s;
padding: 8px 16px;
border-radius: $(rounded);
border: 1px solid $(bg.color);
transition: all .3s ease;
}

a.read-more:hover {
background-color: $(bg.color2);
color: $(text.white);
border: 1px solid $(bg.color2);
transition: all .3s ease
}

a.read-more:after {
display: none;
content: '';
position: absolute;
margin: 15px 0;
left: 0;
height: 1px;
width: 100%;
background: $(main);
z-index: -1
}
.load-more {
background-color: $(main);
color: $(text.white);
font-size: 16px;
padding: 4px 12px;
border-radius: 2px;
}

.load-more:hover {
background-color: $(bg.color2);
color: $(text.white)
}

/* Widget */
.sidebar-wrapper {
float: right;
overflow: hidden;
width: 33.33333333%;
padding: 10px 15px
}

.index .sidebar-wrapper {
visibility: hidden;
display: none;
}

.item .sidebar-wrapper {
visibility: visible;
display: block;
}

.sidebar .widget {
position: relative;
overflow: hidden;
margin: 0 0 20px;
background-color: $(text.white);
box-shadow: 0 0 10px 0 rgb(24 26 28 / 20%);
border-radius: 10px;
}

.sidebar .widget .title {


background: transparent;
position: relative;
color: $(widget.color);
font-size: 20px;
font-weight: 600;
padding: 10px 20px;
margin: 0;
}

.sidebar .widget .title:before {


content: '';
display: none;
position: absolute;
top: 0;
left: 0px;
width: 4px;
height: 100%;
background: $(main)
}

.widget iframe,
.widget img {
max-width: 100%
}

.sidebar .widget-content {
width: 100%;
margin: 0;
padding: 20px !important;
border-top: 2px solid $(border.color)
}

.widget input:focus,
.widget textarea:focus {
outline: none
}

.widget.Attribution,
.widget.Attribution .blogger svg {
display: none
}

. .widget.Followers {
display: none
}

.sidebar .widget.HTML .widget-content {


padding: 20px;
}

.ReportAbuse .title {
margin: 0 !important;
padding: 15px 20px !important
}

.ReportAbuse .title a {
color: $(text.black)
}

.ReportAbuse .title a:hover {


color: $(text.black)
}

.widget.Text span,
.widget.Text p {
padding: 0 10px;
margin: 0;
display: block;
font-family: $(body.font)
}

.TextList ul>li {
padding: 0 10px
}

.sidebar .PageList .widget-content,


.sidebar .LinkList .widget-content {
padding: 0 10px 10px;
}

.sidebar .PageList ul>li,


.sidebar .LinkList ul>li {
margin: 5px 0;
padding: 0 10px;
}

.Translate #google_translate_element {
padding: 0 20px 15px;
}

.Subscribe .widget-content {
padding: 0 20px 10px;
}

.Wikipedia .widget-content {
padding: 10px;
}

.Wikipedia .wikipedia-search-form .wikipedia-search-wiki-link img {


display: block;
width: 32px;
padding: 0 5px;
margin: 0 10px 10px
}

.Wikipedia .wikipedia-search-bar .wikipedia-input-box input {


width: 62%;
height: 30px;
font-size: 13px;
line-height: 30px;
box-sizing: border-box;
padding: 5px 10px;
margin: 0 10px 10px;
border: 1px solid $(border.color);
border-radius: $(rounded);
}

.Wikipedia .wikipedia-search-button {
float: right;
width: 25%;
height: 30px;
font-size: 12px;
text-transform: uppercase;
line-height: 30px;
cursor: pointer;
box-sizing: border-box;
background-color: $(main);
color: $(text.white);
padding: 0 5px;
margin-right: 10px;
border: 0;
border-radius: $(rounded);
transition: background .17s ease
}
.Wikipedia .wikipedia-search-button:hover {
background-color: $(bg.color2);
color: $(text.white)
}

.Wikipedia .wikipedia-search-results-header,
.Wikipedia .wikipedia-search-results {
padding: 0 20px;
}

.Wikipedia .wikipedia-search-results a {
color: $(text.muted);
margin: 10px 0;
transition: all .15s ease
}

.Wikipedia .wikipedia-search-results a:hover {


color: $(link.hover);
}

.Wikipedia #Wikipedia1_wikipedia-search-more {
padding: 10px 20px;
}

.Label .widget-content {
padding: 20px !important
}

.list-label li {
position: relative;
display: block;
padding: 5px;
border-bottom: 1px solid $(border.color);
}

.list-label li:last-child {
padding-bottom: 0;
border-bottom: 0;
}

.list-label li a {
display: block;
color: $(link.color);
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
transition: color .17s ease
}

.list-label li a:before {
content: "\f105";
float: left;
color: $(link.color);
font-family: FontAwesome;
margin: 2px 5px 0 0
}

.list-label li a:hover {
color: $(link.hover)
}

.list-label .label-count {
background-color: $(main);
color: $(text.white);
font-size: 12px;
font-weight: 400;
position: relative;
float: right;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
border-radius: 100%;
transition: all .17s ease
}

.cloud-label ul {
display: table;
padding-bottom: 10px;
}

.cloud-label li {
position: relative;
float: left;
margin: 5px 3px
}

.cloud-label li a {
display: block;
color: $(text.muted);
border: 1px solid $(text.muted);
font-size: 11px;
font-weight: 400;
line-height: 26px;
padding: 1px 11px;
border-radius: $(rounded);
transition: all .17s ease
}

.cloud-label li a:hover {
color: $(link.hover);
}

.cloud-label .label-count {
display: none;
float: left;
margin: 0 5px;
}

.BlogArchive .widget-content {
padding: 0 10px 10px
}

#ArchiveList .flat li {
color: $(link.color);
font-size: 15px;
font-weight: 400;
padding: 8px 5px;
}

#ArchiveList .flat li>a {


color: $(link.color);
transition: color .17s
}

#ArchiveList .flat li>a:hover {


color: $(link.hover)
}

#ArchiveList .flat li>a:before {


content: "\f105";
float: left;
color: $(link.color);
font-family: FontAwesome;
margin: 1px 5px 0 0;
}

#ArchiveList .flat li>a>span {


color: $(text.muted);
font-size: 12px;
font-weight: 400;
position: relative;
background-color: transparent;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
border-radius: 18px;
transition: all .17s ease;
margin: 0 5px;
}

#ArchiveList .flat li>a>span:before {


content: '('
}

#ArchiveList .flat li>a>span:after {


content: ')'
}

.FeaturedPost .widget-content {
padding: 0 0 10px

You might also like