Untitled
unknown
plain_text
a year ago
320 kB
10
Indexable
Never
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale.language' 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'>
<b:attr name='xmlns' value=''/>
<b:attr name='xmlns:b' value=''/>
<b:attr name='xmlns:expr' value=''/>
<b:attr name='xmlns:data' value=''/>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>
<!--[ <head> Open ]-->
<head>
<!--
Name : Median AMP
Version : 1.5
Date : May 15, 2021
Demo : median-amp.blogspot.com
Type : Premium
Designer : Muhammad Maki
Website : www.jagodesain.com
Publisher :
============================================================================
NOTE :
This theme is premium (paid).
You can only get it by purchasing officially.
If you get it for free through any method, that means you get it illegally.
============================================================================
-->
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:view.isHomepage'>
<!--[ Homepage title ]-->
<title><data:blog.title.escaped/></title>
<b:elseif cond='data:view.search.query'/>
<!--[ Search title ]-->
<title><data:messages.search/>: <data:view.search.query/></title>
<b:elseif cond='data:view.search.label'/>
<!--[ Label title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
<b:elseif cond='data:view.isArchive'/>
<!--[ Archive title ]-->
<title>Blog archive in: <data:blog.pageName.escaped/></title>
<b:else/>
<title>Blog: <data:blog.title.escaped/></title>
</b:if>
<b:elseif cond='data:view.isError'/>
<!--[ Error title ]-->
<title>Error 404: Not Found</title>
<b:else/>
<!--[ SingleItem title ]-->
<title><data:blog.pageName.escaped/> - <data:blog.title.escaped/></title>
</b:if>
<!-- JavaScript Google AMP -->
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
<b:if cond='data:blog.analyticsAccountNumber'>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
</b:if>
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!--[ Meta for browser ]-->
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<!-- Link Canonical -->
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:view.url' rel='alternate'/>
<b:else/>
<link expr:href='data:view.url + "?m=1"' rel='alternate'/>
<link expr:href='data:view.url params { amp: "1" }' rel='amphtml'/>
</b:if>
<b:if cond='!data:view.isError'>
<!--[ Browser data, description and keyword ]-->
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='description'/>
<b:elseif cond='data:view.isSingleItem'/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='description'/>
</b:if>
<meta expr:content='data:blog.title.escaped + ", " + data:blog.pageName.escaped + ", Amil Zakat, Zakat, Infak, Sedekah, Donasi, Muzaki, Mustahik, Penajam "' name='keywords'/>
<b:tag cond='data:view.isPost' expr:href='resizeImage(data:blog.postImageUrl, 0)' name='link' rel='image_src'/>
<!--[ Generator and rrs ]-->
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl.canonical + "feeds/posts/default"' expr:title='data:blog.title + " » Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl.canonical + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " » Feed"' rel='alternate' type='application/rss+xml'/>
<link expr:href='data:blog.homepageUrl.canonical + "feeds/comments/default?alt=rss"' expr:title='data:blog.title + " » Comments Feed"' rel='alternate' type='application/rss+xml'/>
<!--[ Theme Color ]-->
<meta expr:content='data:skin.vars.themeColor' name='theme-color'/>
<meta expr:content='data:skin.vars.themeColor' name='msapplication-navbutton-color'/>
<meta expr:content='data:skin.vars.themeColor' name='apple-mobile-web-app-status-bar-style'/>
<meta expr:content='yes' name='apple-mobile-web-app-capable'/>
<!--[ Favicon ]-->
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>
<!--[ Open graph ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
</b:if>
<b:else/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>
<b:else/>
<meta content='Add_your_image_url_here' property='og:image'/>
</b:if>
<!--[ Twitter Card ]-->
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
</b:if>
<b:else/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' name='twitter:image:src'/>
<b:else/>
<meta content='Add_your_image_url_here' name='twitter:image:src'/>
</b:if>
</b:if>
<b:if cond='data:view.isLayoutMode'>
<!--[ CSS Layout ]-->
<b:template-skin><![CDATA[
body#layout:before{content: 'Median UI v1.5 AMP By ULA-THEMES-COM' ;position:absolute;top:15px;right:15px;font-size:.8rem;font-family:Roboto, sans-serif;color:rgba(0,0,0,0.52)}
body#layout{width:1025px;margin:0 ;padding:60px 0 0 ;border:0 ;text-align:left ;position:relative}
body#layout div.layout-widget-description{font-size:12px ;line-height:1.6em}
body#layout div.layout-title{font-size:15px }
body#layout div.section{border-radius:2px}
body#layout .section h4{font-size:15px ;margin-left:0 }
body#layout .add_widget a{font-size:13px }
body#layout .Blog .widget-content{height:auto }
body#layout #header-notif, body#layout #HTML01 .widget-content, body#layout #HTML02 .widget-content, body#layout #HTML04 .widget-content, body#layout #HTML05 .widget-content, body#layout #HTML06 .widget-content, body#layout #large-content, body#layout #side-sticky{background-color:#f0f8ff}
body#layout #HTML99{display:none}
body#layout header, body#layout .mainContent{border-top:1px solid #e5e5e5;padding:30px 0 30px;position:relative}
body#layout header:before, body#layout .mainContent:before, body#layout .mobileContent:before{content:'Header';position:absolute;top:-14px;left:20px;padding:5px 20px;border:1px solid #e5e5e5;border-radius:20px;font-size:.8rem;font-family:Roboto,sans-serif;color:rgba(0,0,0,0.52);background-color:#f1f1f1}
body#layout .headerContent, body#layout .mainContent, body#layout .blogContent{display:flex}
body#layout #header-notif .widget{margin-top:0 }
body#layout #header-notif h4, body#layout #header-notif .layout-widget-description{display:none }
body#layout header #header-widget{width:50%}
body#layout header #profile-widget{width:50%}
body#layout .mainContent:before{content:'Main Content'}
body#layout .mainContent .mainMenu{width:30%}
body#layout .mainContent .mainInner{width:70%}
body#layout .blogContent .mainbar, body#layout .blogContent .sidebar{width:50%}
body#layout .mobileContent{border-top:1px solid #e5e5e5;padding:30px 0 30px;position:relative}
body#layout .mobileContent:before{content:'Mobile Menu'}
]]></b:template-skin>
</b:if>
<!--[ CSS stylesheet ]-->
<!-- /* <b:skin version='1.3.0'><![CDATA[
/*
<Group description="Theme Color">
<Variable name="themeColor" description="Address bar color" type="color" default="#fefefe" value="#fefefe"/>
</Group>
<Group description="(Do not edit) New Blogger comment required">
<Variable name="body.background" description="Background" color="#505050" type="background" default="$(color) none repeat scroll center center" value="$(color) url() no-repeat scroll center center"/>
<Variable name="body.text.font" description="Font Blogger comment" type="font" default="'Roboto', sans-serif" value="400 14px 'Roboto', sans-serif"/>
<Variable name="body.text.color" description="Color" type="color" default="#505050" value="#505050"/>
<Variable name="body.link.color" description="Link color" type="color" default="#262d3d" value="#989b9f"/>
<Variable name="posts.title.color" description="Post title color" type="color" default="#262d3d" value="#989b9f"/>
<Variable name="posts.text.color" description="Post text color" type="color" default="#48525c" value="#989b9f"/>
<Variable name="posts.icons.color" description="Post info color" type="color" default="#262d3d" value="#989b9f"/>
<Variable name="posts.background.color" description="Post background color" type="color" default="#f7f7fc" value="transparent"/>
<Variable name="tabs.font" description="Font" type="font" default="'Roboto', sans-serif" value="400 14px 'Roboto', sans-serif"/>
<Variable name="tabs.color" description="Text color" type="color" default="#4d4d4d" value="#48525c"/>
<Variable name="tabs.selected.color" description="Selected color" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.background.color" description="Popup background color" type="color" default="$(posts.background.color)" value="#ffffff"/>
<Variable name="tabs.overflow.color" description="Popup text color" type="color" default="#48525c" value="#48525c"/>
<Variable name="tabs.overflow.selected.color" description="Popup selected color" type="color" default="#262d3d" value="#989b9f"/>
<Variable name="labels.background.color" description="Labels background color" type="color" default="#fff" value="#ffffff"/>
<Variable name="blog.title.font" description="Blog title font" type="font" default="'Roboto', sans-serif" value="400 14px 'Roboto', sans-serif"/>
<Variable name="blog.title.color" description="Blog title color" type="color" default="#fff" value="#ffffff"/>
</Group>
*/
]]></b:skin>
<style amp-custom='amp-custom'>/*<![CDATA[*/
/* Variable color */
:root{
--head-color: #262d3d ;
--body-color: #48525c ;
--body-altColor: #767676 ;
--body-bg: #fefefe ;
--link-color: #204ecf ;
--link-bg: #204ecf ;
--icon-color: #48525c ;
--icon-alt: #455065 ;
--icon-sec: #767676 ;
--header-text: #48525c ;
--header-title: 17px ;
--header-bg: #fefefe ;
--header-icon: #262d3d ;
--header-height: 60px ;
--notif-height: 45px ;
--notif-bg: #e1f5fe ;
--notif-color: #01579b ;
--content-bg: #fefefe ;
--content-border: #eceff1 ;
--transparent-bg: rgba(0,0,0,.03);
--page-maxContent: 780px ;
--post-titleSize: 32px ;
--post-fontSize: 15px ;
--post-titleSizeMobile: 22px ;
--post-fontSizeMobile: 15px ;
--widget-titleSize: 15px ;
--widget-titleWeight: 400 ; /* Fill with 400(normal) or 700(bold) */
--widget-titleAfter: 1px ;
--nav-width: 260px ;
--nav-border: 1px ;
--nav-text: #262d3d ;
--nav-icon: #48525c ;
--nav-bg: #fefefe ;
--font-head: Poppins, sans-serif ;
--font-body: 'Noto Sans', sans-serif ;
--font-code: 'Fira Mono', monospace ;
--transition-1: all .1s ease ;
--transition-2: all .2s ease ;
--transition-4: all .4s ease ;
--highlight-bg: #f6f6f6 ;
--highlight-color: #2f3337 ;
--highlight-orange: #b75501 ;
--highlight-blue: #015692 ;
--highlight-green: #54790d ;
--highlight-red: #f15a5a ;
--highlight-comment: #656e77 ;
--dark-text: #fefefe ;
--dark-textAlt: #989b9f ;
--dark-link: #005af0 ;
--dark-bg: #1e1e1e ;
--dark-bgAlt: #2d2d30 ;
--dark-bgSec: #252526 ;
}
/* Font Body */
@font-face{font-family: 'Noto Sans';font-style: italic;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4ARMQ_m87A.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff')}
@font-face{font-family: 'Noto Sans';font-style: italic;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff')}
@font-face{font-family: 'Noto Sans';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff')}
@font-face{font-family: 'Noto Sans';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff')}
/* Font Heading */
@font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v13/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2')}
@font-face {font-family: 'Poppins';font-style: italic;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmy15lEw.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmy15VF9eO.woff2) format('woff2')}
@font-face {font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6V1g.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2')}
@font-face {font-family: 'Poppins';font-style: italic;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19lEw.woff) format('woff'), url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VF9eO.woff2) format('woff2')}
/* Source Code Font */
@font-face {font-family: 'Fira Mono';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/firamono/v9/N0bX2SlFPv1weGeLZDtQIg.woff) format('woff'), url(https://fonts.gstatic.com/s/firamono/v9/N0bX2SlFPv1weGeLZDtgJv7S.woff2) format('woff2')}
/* Standar CSS */
*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box} h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--font-head);color:var(--head-color)} h1{font-size:1.8rem} h2{font-size:1.7rem} h3{font-size:1.5rem} h4{font-size:1.3rem} h5{font-size:1.2rem} h6{font-size:1.1rem} a{color:var(--link-color);text-decoration:none} a:hover{opacity:.7;transition:opacity .15s} table{border-spacing:0} iframe{max-width:100%;border:0;margin-left:auto;margin-right:auto} input, button, select, textarea{font:inherit;font-size:100%;color:inherit;line-height:normal;vertical-align:baseline} img{display:block;position:relative;max-width:100%;height:auto} svg{width:22px;height:22px;fill:var(--icon-color)} svg.line, svg .line{fill:none ;stroke:var(--icon-color);stroke-linecap:round;stroke-linejoin:round;stroke-width:1} svg.c-1, svg .c-1{fill:var(--icon-alt)} svg.c-2, svg .c-2{fill:var(--icon-sec); opacity:.4} .hidden, .replaced{display:none} .invisible{visibility:hidden} .clear{width:100%;display:block;margin:0;padding:0;float:none;clear:both} .fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;-webkit-transition:var(--transition-1);transition:var(--transition-1);background:transparent;opacity:0;visibility:hidden} .free:after, .new:after{display:inline-block;content:'Free!';color:var(--link-color);font-size:85%;font-weight:400;margin:0 5px} .new:after{content:'New!'}
/* Main Element */
html{scroll-behavior:smooth;overflow-x:hidden} body{position:relative;margin:0;padding:0 ;width:100%;font-family:var(--font-body);font-size:14px;color:var(--body-color);background-color:var(--body-bg);-webkit-font-smoothing: antialiased; word-break: break-word} .mainWrapper{position:relative}
/* Header Notification */
.notifContent{display:flex;align-items:center; position:relative; background-color:var(--notif-bg);color:var(--notif-color); padding:10px 25px; font-size:90%;line-height:normal; -webkit-transition:var(--transition-1);transition:var(--transition-1);overflow:hidden} .notifContent label{margin-left:auto; display:flex;align-items:center} .notifContent label svg.line{width:20px;height:20px; stroke:var(--notif-color)} .notifText{width:calc(100% - 20px); padding-right:12px} .notifInput:checked ~ .notifContent{height:0; padding-top:0;padding-bottom:0; opacity:0;visibility:hidden} .notifAlt{display:flex;align-items:center;justify-content:center} .notifAlt a{flex-shrink:0;white-space:nowrap;display:block; margin-left:10px;padding:8px 12px;border-radius:3px; background-color:#fff; font-size:12px; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)}
/* Header Section */
header{width:100%;background-color:var(--header-bg);color:var(--header-text);z-index:10; -webkit-transition:var(--transition-1);transition:var(--transition-1);border-bottom:1px solid var(--content-border); position:-webkit-sticky;position:sticky;top:0} header a{color:inherit} header svg{width:20px;height:20px;fill:var(--header-icon)} header svg.line, header svg .line{fill:none;stroke:var(--header-icon)}
.Header{margin:auto 0;background-repeat:no-repeat;background-size:100%;background-position:center} .Header a{display:block} .Header img{max-width:150px;max-height:45px} .Header h1, .Header h2{display:block; font-size:var(--header-title); font-weight:700;color:inherit} .Header .headerTitle{max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; display:block}
.headerContent{position:relative;height:var(--header-height);display:flex} .headerDiv{display:flex;align-items:center} .headerLeft{padding-left:25px;flex:0 0 auto;width:var(--nav-width)} .headerLeft .headerIcon{margin-right:15px} .headerRight{padding-left:25px;padding-right:25px; flex:1 0 auto;width:calc(100% - var(--nav-width))} .headerRight .headerIcon{margin-left:auto; position:relative}
.headerSearch{width:100%;max-width:550px} .headerSearch form{position:relative;width:100%;font-size:95%} .headerSearch input[type=text]{display:block;width:100%;outline:0;border:0;border-radius:10px; background-color:var(--transparent-bg); padding:12px 48px} .headerSearch input[type=text]:focus ~ .close{opacity:1;visibility:visible} .headerSearch button{background:transparent;border:0;outline:0;padding:0; position:absolute;left:15px;top:0;bottom:0; display:flex;align-items:center} .headerSearch button svg{width:18px;height:18px; opacity:.7} .headerSearch button.close{right:12px;left:auto;opacity:0;visibility:hidden; transition:var(--transition-4)} .headerSearch button.close svg{width:16px;height:16px}
.headerIcon{display:flex;align-items:center; font-size:11px} .headerIcon > *{display:flex;align-items:center; position:relative} .headerIcon > *:not(:first-child){margin-left:12px} .headerIcon label.navMenu:after{content:'';width:45px;height:45px;display:block; background-color:var(--transparent-bg); border-radius:50%; position:absolute;top:-12.5px;left:-12.5px;right:-12.5px; opacity:0;visibility:hidden; -webkit-transition:var(--transition-1);transition:var(--transition-1);transform: scale(.75,.75)} .headerIcon a.navMenu:after{content:attr(data-text); opacity:.7;margin:0 8px} .headerIcon .navMenu:hover:after{opacity:1;visibility:visible;transform: scale(1,1)} .headerIcon .navMenu svg, .headerIcon .navMenu .ham{display:block; -webkit-transition:var(--transition-2);transition:var(--transition-2);z-index:2} .headerIcon .navMenu .svg-2{position:absolute; opacity:0;visibility:hidden} .headerIcon .navMenu .ham{width:20px;height:20px; display:flex;align-items:center} .headerIcon .navMenu .ham span{display:block;padding: 0 2px; width:inherit; opacity:.8} .headerIcon .navMenu .ham i, .headerIcon .navMenu .ham span:before, .headerIcon .navMenu .ham span:after{content:'';display:block;width:100%; border-top:1px solid var(--header-icon)} .headerIcon .navMenu .ham i{margin:4px 0} .headerIcon .navSearch, .headerIcon a.navMenu{display:none} .headerIcon .navDark i{display:flex;align-items:center; width:26px;height:18px; border-radius:10px;border:1px solid var(--header-icon); opacity:.8} .headerIcon .navDark i:before{content:'';display:block;position:relative;left:3px; width:10px;height:10px; border-radius:50%;background-color:var(--header-icon); -webkit-transition:var(--transition-1);transition:var(--transition-1)} .headerIcon .navDark:before{content:attr(data-text);opacity:0; -webkit-transition:var(--transition-2);transition:var(--transition-2); white-space:nowrap; position:absolute;right:0} .headerIcon .navDark:hover:before{opacity:.7;padding-right:8px;padding-left:8px;right:26px}
/* Widget Social Media */
.socialLink{display:flex;align-items:flex-start;justify-content:center; margin:0;padding:0;list-style:none} .socialLink li{margin:0 5px} .socialLink li .link{display:flex;align-items:center} .socialLink li a{opacity:.8}
#LinkList002{position:fixed;left:0;right:0;bottom:0; width:calc(var(--nav-width) - var(--nav-border));background-color:var(--nav-bg); padding:20px 20px 30px 25px; -webkit-transition:var(--transition-1);transition:var(--transition-1)} #LinkList002 ul{justify-content:flex-start} #LinkList002 li:first-child{margin-left:0} #LinkList002 label{display:none;align-items:center; opacity:0;visibility:hidden}
#mobile-menu{position:fixed;left:0;right:0;bottom:0; background-color:var(--nav-bg);border-top:var(--nav-border) solid var(--content-border); padding:0 25px; border-radius:0px 0px 0 0; box-shadow:0 5px 15px 0 rgb(0 0 0 / 12%); z-index:1} #mobile-menu .mobileMenu{display:flex;align-items:center;justify-content:center; height:50px; margin:0;padding:0;list-style:none} #mobile-menu .mobileMenu li{width:20%;text-align:center} #mobile-menu .mobileMenu li > *{display:inline-flex;align-items:center} #mobile-menu .mobileMenu li > *:hover svg, .onHome #mobile-menu .mobileMenu li.mHome svg{opacity:.7} #mobile-menu .mobileMenu li > *:hover svg .fill, .onHome #mobile-menu .mobileMenu li.mHome svg .fill{fill:var(--nav-icon)} .darkMode #mobile-menu .mobileMenu li > *:hover svg .fill, .darkMode #mobile-menu .mobileMenu li.mDark svg .fill, .darkMode.onHome #mobile-menu .mobileMenu li.mHome svg .fill{fill:var(--dark-text)}
/* Mobile Menu */
#mobile-menu{display:none}
/* Main Menu */
.mainInner{margin-left:var(--nav-width);margin-bottom:0; padding:25px; -webkit-transition:var(--transition-1);transition:var(--transition-1); position:relative} .mainMenu{position:fixed;top:0;left:0;bottom:0; height:100%;width:var(--nav-width);background-color:var(--nav-bg);border-right:var(--nav-border) solid var(--content-border); font-size:13px;color:var(--nav-text); -webkit-transition:var(--transition-1);transition:var(--transition-1); z-index:2} .mainMenu .section{padding-top:calc(var(--header-height) + 15px);padding-bottom:90px; height:100%; overflow-y:hidden} .mainMenu .section:hover{overflow-y:scroll} .mainMenu .fullClose.menu{-webkit-transition:var(--transition-1);transition:var(--transition-1)} .mainMenu svg{width:20px;height:20px;fill:var(--nav-icon)} .mainMenu svg.line{fill:none;stroke:var(--nav-icon)} .mainMenu ul{margin:0;padding:0;list-style:none} .htmlMenu > li{position:relative} .htmlMenu > li.break:after{content:'';display:block;width:calc(100% - 50px);border-bottom:1px solid var(--content-border);margin:12px 25px} .htmlMenu > li li{-webkit-transition:var(--transition-2);transition:var(--transition-2); max-height:0;opacity:0;visibility:hidden} .htmlMenu > li li a{white-space:nowrap; display:block;position:relative; padding:10px 25px 10px 60px; color:inherit; opacity:.7} .htmlMenu .link:before, .htmlMenu > li li a:before{content:''; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; position:absolute;top:0;left:0;bottom:0; display:block;background-color:transparent; width:2px; border-radius:0 2px 2px 0} .htmlMenu .link:hover:before, .htmlMenu > li li a:hover:before{background-color:var(--link-color); opacity:.7} .htmlMenu .link:hover svg, #LinkList002 label:hover svg, .socialLink li .link:hover svg{fill:var(--link-color)} .htmlMenu .link:hover svg.line, #LinkList002 label:hover svg.line, .socialLink li .link:hover svg.line{fill:none;stroke:var(--link-color)} .htmlMenu .link{white-space:nowrap; display:flex;align-items:center;width:100%; padding:10px 25px;position:relative; color:inherit} .htmlMenu .link svg{flex-shrink:0;margin-right:15px} .htmlMenu .link svg.down{width:16px;height:16px; margin-left:auto;margin-right:0} .htmlMenu .link .name{display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight:400} .htmlMenu a.link:hover, .htmlMenu > li li a:hover{background-color:var(--transparent-bg)} .htmlMenu .close{position:fixed;top:0;left:0;right:0; width:calc(var(--nav-width) - var(--nav-border));height:var(--header-height);background-color:var(--nav-bg); display:flex;align-items:center; -webkit-transition:var(--transition-1);transition:var(--transition-1); z-index:2} .htmlMenu .close .link:before{display:none} .htmlMenu .close .link .name:before{content:attr(data-text); font-size:12px;opacity:.7}
.htmlMenu .dropMenu:checked ~ .link svg.down{transform: rotate(180deg)} .htmlMenu .dropMenu:checked ~ ul li{max-height:40px; opacity:1;visibility:visible} .navInput:checked ~ .mainWrapper .mainInner, .navInput:checked ~ .mainWrapper footer{margin-left:68px} .navInput:checked ~ .mainWrapper .mainMenu{width:68px} .navInput:checked ~ .mainWrapper .htmlMenu .close, .navInput:checked ~ .mainWrapper .mainMenu #LinkList002{width:calc(68px - var(--nav-border))} .navInput:checked ~ .mainWrapper .mainMenu #LinkList002 ul{display:none} .navInput:checked ~ .mainWrapper .mainMenu #LinkList002 label{display:flex; opacity:1;visibility:visible} .navInput:checked ~ .mainWrapper .htmlMenu a.link:hover{background-color:transparent} .navInput:checked ~ .mainWrapper .htmlMenu .link .name, .navInput:checked ~ .mainWrapper .htmlMenu .link svg.down{display:none} .navInput:checked ~ .mainWrapper .htmlMenu .dropMenu:checked ~ ul li{max-height:0; opacity:0;visibility:hidden} .navInput:checked ~ .mainWrapper .htmlMenu > li.break:after{width:calc(100% - 45px)}
@media screen and (max-width:896px){ .headerIcon .navSearch{display:flex} header{position:relative;border-bottom:0} .Header .headerTitle{max-width:170px} .headerLeft{width:auto; flex-grow:1;padding-right:20px} .headerRight{width:auto; flex:0 0 auto} .headerSearch{position:fixed;top:0;left:0;right:0; padding:0 20px;max-width:none;z-index:10} .headerSearch button{z-index:3} .headerSearch input[type=text]{position:relative;background-color:var(--content-bg); padding:20px 48px;margin-top:-100%;z-index:3; -webkit-transition:var(--transition-1);transition:var(--transition-1)} .headerSearch input[type=text]:focus{margin-top:25px;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)} .headerSearch input[type=text]:focus ~ .fullClose.search{background:rgba(0,0,0,.5);opacity:1;visibility:visible} .headerSearch input[type=text]:focus ~ .fullClose.search, .navInput:checked ~ .mainWrapper .mainMenu .fullClose.menu{-webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)}
#LinkList002{width:85%;max-width:480px;margin-left:-100%; border-radius:0 0 15px 0} #mobile-menu{display:block}
.mainMenu{width:100%;background-color:transparent;overflow:hidden; margin-left:-100%; border-right:0; z-index:11} .mainMenu .section{background-color:var(--nav-bg); position:relative; width:85%;max-width:480px; z-index:3;overflow-y:auto; -webkit-transition:var(--transition-1);transition:var(--transition-1); box-shadow:-4px 9px 25px -6px rgb(0 0 0 / 10%);border-radius:0 15px 15px 0} .htmlMenu .close{width:85%;max-width:480px;margin-left:-100%; border-radius:0 15px 0 0} .htmlMenu .link, #LinkList002{padding-left:20px;padding-right:20px} .htmlMenu > li li a{padding:10px 20px 10px 55px} .htmlMenu > li.break:after{width:calc(100% - 40px);margin-left:20px;margin-right:20px}
.navInput:checked ~ .mainWrapper .mainMenu{width:100%; margin-left:0} .navInput:checked ~ .mainWrapper .mainMenu .section{} .navInput:checked ~ .mainWrapper .mainMenu .fullClose.menu{background:rgba(0,0,0,.5);opacity:1;visibility:visible} .navInput:checked ~ .mainWrapper .htmlMenu .link .name, .navInput:checked ~ .mainWrapper .htmlMenu .link svg.down{display:block} .navInput:checked ~ .mainWrapper .htmlMenu .dropMenu:checked ~ ul li{max-height:40px;opacity:1;visibility:visible} .navInput:checked ~ .mainWrapper .htmlMenu a.link:hover{background-color:var(--transparent-bg)} .navInput:checked ~ .mainWrapper .mainInner, .mainInner, .navInput:checked ~ .mainWrapper footer{margin-left:0} .navInput:checked ~ .mainWrapper .htmlMenu .close, .navInput:checked ~ .mainWrapper .mainMenu #LinkList002{width:85%;max-width:480px;margin-left:0} .navInput:checked ~ .mainWrapper .mainMenu #LinkList002 label{display:none} .navInput:checked ~ .mainWrapper .mainMenu #LinkList002 ul{display:flex}}
/* Large Section */
.largeSection .widget{margin-bottom:30px}
/* blogTitle Section */
.blogTitle{display:flex;justify-content:space-between;align-items:flex-start} .blogTitle .postMode{display:flex;align-items:center;font-size:11px;line-height:20px} .blogTitle .postMode:before{content:'List';margin:0 8px;opacity:.7} .blogTitle .postMode svg{width:20px;height:20px} .blogTitle .postMode .svg-2, .listMode .blogTitle .postMode .svg-1{display:none} .listMode .blogTitle .postMode .svg-2{display:block} .listMode .blogTitle .postMode:before{content:'Grid'}
/* blogContent Section */
.blogContent .widget .title{display:flex;align-items:center;justify-content:space-between; margin:0 0 30px; font-size:var(--widget-titleSize);font-weight:var(--widget-titleWeight);font-family:var(--font-body);position:relative} .blogContent .widget .title:after{content:'';display:block;width:18px;position:absolute;bottom:-8px;border-bottom:var(--widget-titleAfter) solid var(--dark-textAlt)} .blogContent .widget .title.search{font-size:14px; display:block} .blogContent .widget .title.search:after{display:none} .blogContent .widget .title.search span{font-weight:400;font-size:90%; opacity:.7; margin-right:8px} .blogContent .widget .title.search span:before{content:attr(data-text)} .blogContent .widget .title.search span.home:after{content:'/'; margin-left:8px} .blogContent .widget .title svg{height:18px;width:18px; opacity:.7} .blogContent .widget .imgThumb{display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:105%; font-size:12px;text-align:center; transform:translate(-50%, -50%)} .blogContent .widget:not(:last-child), .blogContent .sidebar > *:not(:last-child){margin-bottom:50px} .blogContent .widget input[type=text], .blogContent .widget input[type=email], .blogContent .widget textarea{display:block;width:100%;border:1px solid rgba(230,230,230,1);border-radius:2px;outline:0; padding:15px 15px;margin-bottom:15px} .blogContent .widget input[type=text]:focus, .blogContent .widget input[type=email]:focus, .blogContent .widget textarea:focus{border-color:var(--body-altColor)} .blogContent .widget input[type=button], .blogContent .widget input[type=submit]{display:inline-flex;align-items:center; margin:15px 0 0;padding:10px 20px; outline:0;border:0;border-radius:2px; color:#fefefe; background-color:var(--link-bg); font-size:14px;font-family:var(--font-body); white-space:nowrap;overflow:hidden;max-width:100%} .blogContent .widget input[type=button]:hover, .blogContent .widget input[type=submit]:hover{opacity:.7} .blogContent{display:flex;flex-wrap:wrap} .blogContent .mainbar{flex:1 0 calc(100% - 330px);width:calc(100% - 330px); } .blogContent .mainbar{margin-right:auto;margin-left:auto; -webkit-transition:var(--transition-1);transition:var(--transition-1)} .blogContent .mainbar > *:not(:last-child){margin-bottom:25px;padding-bottom:25px; border-bottom:1px solid var(--content-border)} .blogContent .mainbar > .no-items{margin-bottom:0;padding-bottom:0;border-bottom:0} .blogContent .mainbar{max-width:780px} .blogContent .sidebar{max-width:600px} .blogContent .sidebar{flex:0 0 330px;width:330px; padding-left:30px} .blogContent .sidebar #side-sticky{position:-webkit-sticky;position:sticky;top:75px}
.onPage .blogContent .mainbar, .onPage footer .creditInner{max-width:var(--page-maxContent); margin-left:auto;margin-right:auto}
/* blogPosts Section */
.blogPosts{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .blogPosts.empty{width:100%;left:0} .blogPosts.empty ~ .blogPager{justify-content:flex-start} .blogPosts .hentry{display:block;position:relative; width:calc(33.333% - 20px); margin-left:10px;margin-right:10px;margin-bottom:40px; padding-bottom:38px} .blogPosts .hentry.noInfo, .blogPosts .hentry.product, .blogPosts div.hentry, .blogPosts .hentry.noComment{padding-bottom:0} .blogPosts .hentry.noAd .widget, .Blog ~ .HTML{display:none} .onItem .blogPosts{display:block; width:100%;left:0;right:0} .onItem .blogPosts .hentry{width:100%; margin-left:0;margin-right:0;margin-bottom:0;padding-bottom:0}
/* gridLayout */
@media screen and (max-width:480px){.gridLayout .blogPosts .hentry{width:calc(100% - 15px); margin-bottom:0} .gridLayout .blogPosts .hentry:not(:last-child){margin-bottom:50px} .gridLayout .postEntry.snippet, .gridLayout .postHeader, .gridLayout .postInfo, .gridLayout .postLabel.sponsored{font-size:90%} .gridLayout .postEntry.snippet.productPrice, .gridLayout.listMode .blogPosts .postEntry.snippet.productPrice{font-size:14px} .gridLayout .postTitle{font-size:1.1rem} .gridLayout.listMode .blogPosts .hentry, .gridLayout.listMode .blogPosts .hentry:not(:last-child){margin-bottom:30px} .gridLayout.listMode .blogPosts .postEntry.snippet, .gridLayout.listMode .blogPosts .postHeader, .gridLayout.listMode .blogPosts .postInfo, .gridLayout.listMode .blogPosts .postLabel.sponsored{font-size:12px}}
/* blogPager */
.blogPager, .postNav{display:flex;flex-wrap:wrap;justify-content:space-between; font-size:90%;line-height:20px; color:var(--dark-text); margin-top:30px;margin-bottom:0} .blogPager > *, .postNav > *{display:flex;align-items:center; padding:10px 13px;margin-bottom:10px; color:inherit;background-color:var(--link-bg); border-radius:2px} .blogPager > * svg{width:18px;height:18px; fill:var(--dark-text)} .blogPager > * svg.line{fill:none;stroke:var(--dark-text); stroke-width:1.5} .blogPager > *:before{content:attr(data-text)} .blogPager .moreLink{padding:10px 35px} .blogPager .jsLoad{margin-left:auto;margin-right:auto} .blogPager .newerLink:before, .blogPager .jsLoad:before{display:none} .blogPager .newerLink:after, .blogPager .jsLoad:after{content:attr(data-text)} .blogPager .newerLink svg , .blogPager .jsLoad svg{margin-right:8px} .blogPager .olderLink svg{margin-left:8px} .blogPager .noPost{cursor:not-allowed} .blogPager .noPost, .blogPager .current, .postNav .current{background-color:var(--transparent-bg); color:var(--dark-textAlt)} .blogPager .noPost svg, .blogPager .noPost.jsLoad svg{fill:var(--dark-textAlt)} .blogPager .noPost svg.line{fill:none;stroke:var(--dark-textAlt)}
/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:baseline; margin-bottom:10px} .breadcrumbs a{color:inherit} .breadcrumbs > *:not(:last-child):after{content:'/'; margin-left:8px;font-size:90%;opacity:.7} .breadcrumbs > *{display:inline-flex;align-items:baseline;flex-shrink:0; margin-right:8px} .breadcrumbs .titleLink:before{content:attr(data-text)} .breadcrumbs .homeLink a{font-size:90%;opacity:.8}
/* Article Section */
.postThumbnail{flex:0 0 calc(33.333% - 12.5px);overflow:hidden;border-radius:2px; margin-bottom:20px} .postThumbnail > *{display:block;position:relative;padding-top:52.335%; -webkit-transition:var(--transition-2);transition:var(--transition-2); color:inherit} .itemFeatured .postThumbnail > *, .itemPopulars .itemThumbnail > *, .onIndex .hentry .postThumbnail > *{padding-top:0} .postThumbnail a{background: var(--transparent-bg) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 50 50'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z' fill='rgba(0,0,0,.1)'><animateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/></path></svg>") center / 26px no-repeat} .postThumbnail div{background: var(--transparent-bg)} .postThumbnail div span:before{content:attr(data-text); opacity:.7; white-space:nowrap} .postTitle{font-size:.9rem;line-height:normal} .postTitle a, .postEntry.snippet, .itemTitle a, .itemEntry{color:inherit; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .postTitle a, .itemTitle a{-webkit-line-clamp:3}
.postTitle a:hover, .itemTitle a:hover{} /* Add color here to change Post Title hover efect */
.postEntry.snippet, .itemEntry{display:-webkit-box} /* Change to display:none if you want to hide post snippets */
.postEntry.snippet, .itemEntry{margin:12px 0 0;font-size:90%;line-height:1.6em; opacity:.8} .postEntry.snippet, .postHeader, .postInfo, .postLabel.sponsored{font-size:90%} .postEntry.snippet.productPrice, .itemEntry.productPrice{display:block; font-size:14px; color:var(--link-color);opacity:1} .postHeader{margin-bottom:8px; line-height:normal} .postInfo{display:flex;align-items:flex-start;justify-content:space-between;margin-top:18px; position:absolute;bottom:0;left:0;right:0} .postInfo a{color:inherit} .postTimestamp, .postMore{padding-right:10px} .postComment, .postTimestamp, .postMore{overflow:hidden} .postComment:before, .postTimestamp:after, .postMore:before{content:attr(data-text); display:block;line-height:20px; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; opacity:.8} .postComment{display:flex;align-items:flex-start;flex-shrink:0} .postComment svg{width:16px;height:16px; margin-left:5px} .postComment:hover svg{fill:var(--link-color)} .postComment:hover svg.line{fill:none;stroke:var(--link-color)} .postComments, .postTimes > *{display:flex;align-items:center; flex-shrink:0} .postComments > *{display:flex;align-items:center;justify-content:center; width:34px;height:34px; border:1px solid rgb(230,230,230);border-radius:12px; position:relative} .postComments > a{overflow:visible} .postComments > a:before{line-height:18px; position:absolute;top:-7px;right:-5px; padding:0 6px;border-radius:10px;font-size:11px; z-index:1;opacity:1; background-color:rgb(230,230,230)} .postComments > *:not(:last-child){margin-right:8px} .postComments svg{width:18px;height:18px; margin:0} .postComments > *:hover{border-color:var(--icon-color); opacity:.8} .postComments > *:hover svg, .postComments > *:hover svg.line .fill{fill:var(--icon-color)} .postComments > *:hover svg.line{fill:none;stroke:var(--icon-color)}
.postLabel{font-size:inherit; white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .postLabel:before{content:attr(data-text) ' '; opacity:.7} .postLabel > *{font-weight:400;color:inherit} .postLabel > *:before{content:attr(data-text)} .postLabel > *:not(:last-child):after{content:','} .postLabel > a{display:inline-flex} .postLabel > a:hover, .postMore:hover{color:var(--link-color)} .postLabel.sponsored{display:flex;align-items:center; margin-bottom:8px; line-height:normal} .postLabel.sponsored svg{width:14px;height:14px; margin-right:5px; flex-shrink:0} .postLabel.sponsored svg:before, .postLabel.sponsored > *:not(:last-child):after{display:none} .postLabel.sponsored span{width:calc(100% - 23px); white-space:nowrap;text-overflow:ellipsis;overflow:hidden; opacity:.8} .postLabel.sponsored a{opacity:.8}
.postAuthor, .postTimes{display:flex;align-items:center;flex-grow:1; width:50%;padding-right:15px} .postAuthorImage{flex-shrink:0; margin-right:12px} .postAuthorImage .authorImage, .postAuthors .authorImg{width:34px;height:34px;border-radius:12px; background-size:100%;background-position:center;background-repeat:no-repeat;overflow:hidden} .postAuthorName{flex-grow:1; width:calc(100% - 44px)} .postAuthorName .authorName:after{content:attr(data-write); opacity:.7;display:block;font-size:11px} .postAuthorName .authorName{max-width:170px; display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .postAuthorName .authorName > *:before{content:attr(data-text)} .postAuthorName .authorName > *:hover{text-decoration:underline}
.postAuthors{display:flex; max-width:400px;margin:30px 0; padding:12px;line-height:1.7em; border:1px solid var(--content-border);border-radius:5px; box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%); font-size:13px} .postAuthors .authorImage{flex-shrink:0; margin-top:6px;margin-right:12px} .postAuthors .authorImg{display:flex;align-items:center;justify-content:center} .postAuthors .authorImg amp-img{width:100%} .postAuthors .authorInfo{flex-grow:1; width:calc(100% - 46px)} .postAuthors .authorName:before{content:attr(data-write) ' '; font-size:12px; opacity:.7} .postAuthors .authorName:after, .postAuthors .authorAbout:before{content:attr(data-text)} .postAuthors .authorAbout{margin:0; font-size:12px;opacity:.8;line-height:normal; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .darkMode .postAuthors{background-color:var(--dark-bgSec); border:0}
.postTimes{width:100%; margin-top:25px; font-size:90%;line-height:20px} .postTimes svg{width:14px;height:14px; margin-right:6px} .postTimes .postTimestamp{padding-right:20px} .postTimes .postTimestamp:before{opacity:.8} .postTimes .postTimestamp:after{display:inline} .postTimes .postReadtime span{opacity:.8}
.postTimes .postTimestamp.updated:before{content:'Updated: '}
.postTimes .postTimestamp.published:before{content:'Published: '}
.postShare{margin:30px 0;padding-bottom:30px;border-bottom:1px solid var(--content-border)} .ampMode .postShare{border-bottom:0;padding-bottom:0} .postShare svg.line{stroke-width:1.5} .shareContent{display:flex;align-items:center;line-height:1.8em} .shareContent:before{content:attr(data-text); flex:0 0 auto;margin-right:30px;line-height:20px} .shareIcon:not(:last-child){margin-right:10px} .shareIcon > *{display:flex;align-items:center; padding:10px 12px;border:1px solid var(--body-altColor);border-radius:2px; font-size:90%;color:#fefefe;line-height:20px;white-space:nowrap} .shareIcon svg{width:20px;height:20px; flex-shrink:0} .shareIcon.facebook a{background-color:#568fce;border-color:#568fce} .shareIcon.twitter a{background-color:#27c2f5;border-color:#27c2f5} .shareIcon.whatsapp a{background-color:#25D366;border-color:#25D366} .shareIcon a svg{fill:#fefefe} .shareIcon a:after{content:attr(aria-label); padding-left:12px} .darkMode .shareIcon svg{opacity:.8} .shareInner{position:fixed;top:0;right:0;bottom:0;left:0; width:100%;height:100%; display:flex;align-items:center;justify-content:center; z-index:20; -webkit-transition:var(--transition-1);transition:var(--transition-1); opacity:0;visibility:hidden} .shareBlock{width:100%;max-width:500px;max-height:90%; display:flex; margin:0 auto -50%; background-color:var(--content-bg);border-radius:8px; transition:inherit; z-index:3;overflow:hidden; position:relative; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)} .shareBox{padding-top:60px;max-height:100%;width:100%;overflow-y:auto} .shareHeader{padding:20px; background-color:inherit; display:flex;align-items:center;justify-content:space-between; position:absolute;top:0;left:0;right:0; z-index:1} .shareHeader:before, .sharePreview .previewTitle:before, .sharePreview .previewLabel > *:before{content:attr(data-text)} .shareHeader label{display:flex;align-items:center; font-size:11px} .shareHeader label svg.line{width:20px;height:20px; stroke-width:1} .shareHeader label:before{content:'Close'; opacity:.7;padding:0 8px} .sharePreview{padding:15px 20px; border:1px solid var(--content-border);border-left:0;border-right:0; display:flex;align-items:center} .sharePreview .previewImg{width:70px;height:70px;display:flex;flex-shrink:0;align-items:center;justify-content:center; background-color:var(--transparent-bg);background-size:cover;background-position:center;background-repeat:no-repeat; border-radius:5px; margin-right:15px} .sharePreview .previewImg svg{stroke-width:1;opacity:.6} .sharePreview .previewTitle{font-size:13px;line-height:1.5em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sharePreview .previewLabel{font-size:12px;opacity:.7; margin-top:5px} .shareInner ul{display:flex;flex-wrap:wrap; list-style:none;margin:0;padding:10px 20px 20px} .shareInner li{width:25%;text-align:center} .shareInner li a, .shareInner li .copyLink{display:block; max-width:80px;height:80px; margin:0 auto;padding:15px 0;border-radius:2px;color:inherit} .shareInner li a:hover, .shareInner li .copyLink:hover{background-color:rgba(0,0,0,.03)} .shareInner li > * svg{width:26px;height:26px; opacity:.8} .shareInner li a:after, .shareInner li .copyLink:after{content:attr(data-text);display:block; margin-top:3px;font-size:12px;opacity:.7} .shareInner li input{margin:0;padding:0;outline:0;border:0;width:1px;height:0;opacity:0} .shareNotif span{position:absolute;left:0;right:0;bottom:-70px; font-size:90%; display:block;width:240px;margin:0 auto 20px;padding:15px 10px; border-radius:3px; background-color:rgba(0,0,0,.8);color:#fefefe; line-height:20px;text-align:center; opacity:0; -webkit-transition:var(--transition-1);transition:var(--transition-1); -webkit-animation:slidein 2s ease forwards;animation:slidein 2s ease forwards} .shareIn:checked ~ .shareInner{opacity:1;visibility:visible} .shareIn:checked ~ .shareInner .shareBlock{margin:0 auto} .shareIn:checked ~ .shareInner .fullClose{background:rgba(0,0,0,.5);opacity:1;visibility:visible; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)} .darkMode .shareBlock{background-color:var(--dark-bgSec)} .darkMode .sharePreview .previewImg{background-color:rgba(255,255,255,.1)} @media screen and (max-width: 640px){.shareIcon a:after{display:none}} @media screen and (max-width: 480px){.postShare:before{content:attr(data-text); display:block;width:100%;margin:0 0 15px} .shareContent:before{display:none} .shareIcon.facebook{flex-grow:1} .shareIcon.facebook a:after{content:attr(data-text); display:block} .shareInner{align-items:flex-end} .shareIn:checked ~ .shareInner .shareBlock{border-radius:15px 15px 0 0} .shareInner li > * svg{width:24px;height:24px}}
.onItem .postTitle{font-size:var(--post-titleSize); line-height:1.4em} .onItem .postInfo{align-items:center;position:relative; margin-top:30px} .onItem .postInfo.noAuthor.noComment, .onItem .postInfo.onSponsored{margin-top:0; display:none} .onItem .postEntry{margin-top:40px; font-size:var(--post-fontSize); line-height:1.8em}
/* Article Style */
.postEntry h1, .postEntry h2, .postEntry h3, .postEntry h4, .postEntry h5, .postEntry h6{margin:1.7em 0 20px; font-weight:700; line-height:1.4em} .postEntry h1:target, .postEntry h2:target, .postEntry h3:target, .postEntry h4:target, .postEntry h5:target, .postEntry h6:target{padding-top:70px;margin-top:0} .postEntry p{margin:1.7em 0} .postEntry img{display:inline-block;border-radius:2px;height:auto } .postEntry img.fullImg{display:block ; margin-bottom:10px; position:relative;left:0; width:100%;max-width:none} .postEntry .widget, .post .postAd > *{margin:50px 0}
.post .separate{display:block;margin:4em 0} .post .separate:before{content:'\2027 \2027 \2027'; display:block;text-align:center; font-size:28px;font-style:normal; letter-spacing:0.6em;text-indent:0.6em;clear:both}
.post .note{position:relative; padding:20px 30px 20px 50px; background-color:#e1f5fe;color:#01579b; font-size:.85rem; line-height:1.62em;border-radius:2px} .post .note:before{content:'';position:absolute;left:18px;top:23px; width:20px;height:20px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301579b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' y1='22' x2='4' y2='15'/></svg>") center / 20px no-repeat} .post .noteAlert{background-color:#ffdfdf;color:#48525c} .post .noteAlert:before{background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>") center / 20px no-repeat}
.post .textIndent{text-indent:2.2rem} .post .dropCap{float:left;margin:4px 8px 0 0; font-size:55px;line-height:45px} .post .extLink{display:inline-flex;align-items:center} .post .extLink:after{content:''; width:16px;height:16px; display:inline-block;margin-left:5px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>") center / 16px no-repeat} .post .extLink.alt:after{background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3'/><line x1='8' y1='12' x2='16' y2='12'/></svg>")} .post .postCaption{display:block; font-size:13px;line-height:normal; margin-top:5px} .post .postReference{display:block; font-size:13px;line-height:normal; opacity:.8}
.post .scrollImage, .post .gridImage, .post .hideImage, .post .showImage{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center; margin:2em 0; position:relative;left:-7.5px;right:-7.5px; width:calc(100% + 15px)} .post .scrollImage > *{width:calc(33.333% - 15px); margin:0 7.5px 15px}
.post .gridImage > *, .post .hideImage > *, .post .showImage > *{width:calc(50% - 15px); margin:0 7.5px 15px} .post .gridImage > *:nth-last-child(1){margin-bottom:0} .post .gridImage img, .post .hideImage img{display:block}
.post .buttonImage{position:relative} .post .buttonImage label{position:absolute;top:0;left:0;right:0;bottom:0; border-radius:2px; display:flex;align-items:center;justify-content:center; background-color:rgba(0,0,0,.5); -webkit-transition:var(--transition-2);transition:var(--transition-2); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)} .post .buttonImage label:before{content:'Show All'; color:var(--dark-text); font-size:13px} .post .hideImage .showImage{width:100%;margin:0; left:0;right:0; -webkit-transition:var(--transition-2);transition:var(--transition-2); max-height:0;opacity:0;visibility:hidden} .post .imageInput:checked ~ .hideImage .showImage{max-height:1000vh;opacity:1;visibility:visible} .post .imageInput:checked ~ .hideImage .buttonImage label{opacity:0;visibility:hidden}
.postRelated{position:relative; margin:42px 0;padding:1.5em 0; border:1px solid var(--content-border);border-left:0;border-right:0; font-size:14px;line-height:1.8em} .postRelated h3, .postRelated h4, .postRelated b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:var(--content-bg);border:1px solid var(--content-border);border-radius:15px; position:absolute;top:-15.5px;left:20px} .postRelated ul, .postRelated ol{margin:8px 0 0;padding-left:20px} .darkMode .postRelated h3, .darkMode .postRelated h4, .darkMode .postRelated b, .darkMode .post .tabsHead > *:after{background-color:var(--dark-bg)}
.post blockquote, .commentContent i[rel="quote"]{position:relative;font-size:.97rem; opacity:.8; line-height:1.7em ;margin-left:0;margin-right:0; padding:30px 25px; border-left:1px solid var(--content-border)} .post blockquote.style-1{font-size:15px; padding:30px 25px 30px 55px; border:1px solid var(--content-border);border-left:0;border-right:0} .post blockquote.style-1:before{content:'\201D';display:block; position:absolute;top:18px;left:0; font-weight:700;font-size:60px; line-height:normal}
.post table{min-width:70%;margin:0 auto;border:0;overflow:hidden;font-size:14px; word-break: normal} .post table th{padding:17px 25px; border:1px solid rgba(0,0,0,.1);border-left-width:0} .post table th:last-child{border-radius:0 5px 0 0} .post table th:first-child{border-left-width:1px;border-radius:5px 0 0} .post table td:first-child{border-left-width:1px} .post table td{padding:20px 25px; border:1px solid rgba(0,0,0,.1);border-left-width:0;border-top:0; vertical-align:middle} .post table tr:last-child td:first-child{border-radius:0 0 0 5px} .post table tr:last-child td:last-child{border-radius:0 0 5px 0} .post table tr:nth-child(2n+1) td{background-color:rgba(0,0,0,.01)} .post .table{display:block; overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth}
.post .tr-caption-container{min-width:0;width:auto;margin:0 auto;border:0;position:relative;overflow:inherit} .post .tr-caption-container tr td, .post .tr-caption-container tr:nth-child(2n+1) td{border:0;background:transparent;padding:0} .post .tr-caption-container .tr-caption{display:block; font-size:13px;opacity:.8;line-height:normal}
.post pre{position:relative;font-family:var(--font-code);line-height:1.6em;font-size:.8rem; direction:ltr} .post pre:before, .commentContent i[rel="pre"]:before{content:'</>';position:absolute;right:0;top:0;color:var(--highlight-comment);font-size:10px;padding:0 10px;z-index:2;line-height:35px} .post pre.html:before{content:'.html'} .post pre.css:before{content:'.css'} .post pre.js:before{content:'.js'} .post code, .commentContent i[rel="pre"]{display:block;white-space:pre; font-size:.8rem; position:relative;width:100%; border-radius:2px;background-color:var(--highlight-bg);color:var(--highlight-color); padding:20px;margin:25px auto; -moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto; font-family:var(--font-code);line-height:1.6em; text-align:left} .post pre span{color:var(--highlight-green)} .post pre span.block{color:#fff;background:var(--highlight-blue)} .post pre i{color:var(--highlight-blue);font-style:normal} .post pre i{user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .post pre i.comment, article pre i.tag, article pre i.blue{color:var(--highlight-comment);user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;-webkit-user-select:text;-webkit-touch-callout:text;} article pre i.tag{color:var(--highlight-orange)} article pre i.blue{color:var(--highlight-blue)} .post .code{display:inline;padding:2px 4px;font-size:85%;line-height:inherit;color:var(--highlight-color);background-color:rgba(0,0,0,.05);font-family:var(--font-code)} .darkMode .post code, .darkMode .commentContent i[rel="pre"]{background-color:rgba(0,0,0,.09);color:var(--dark-textAlt)} .darkMode .post .code{color:var(--dark-textAlt);background-color:rgba(255,255,255,.1)}
.post .tocInner, .post .spoiler{border:1px solid var(--content-border);border-left:0;border-right:0; padding:15px 15px;margin:30px 0; font-size:14px} .post .tocTitle, .post .spoilerTitle{outline:0;font-weight:700;line-height:1.8em; display:flex;align-items:center;justify-content:space-between} .post .tocTitle:after{content:'Hide all'; font-weight:400;font-size:85%;font-family:var(--font-body)} .post .tocContent, .post .spoilerContent{max-height:1000vh; -webkit-transition:var(--transition-4);transition:var(--transition-4); overflow:hidden} .post .tocInput:checked ~ .tocContent{max-height:0} .post .tocInput:checked ~ .tocTitle:after{content:'Show all'} .post .tocInner a{display:flex;color:inherit} .post .tocInner ol, .post .tocInner ul, .tableOfContent ol{padding:0;list-style:none; font-size:inherit;font-weight:400; counter-reset:toc-count;line-height:1.75em} .post .tocInner li, .tableOfContent li{display:flex;flex-wrap:wrap} .post .tocInner li ol, .post .tocInner li ul, .tableOfContent li ol{width:100%; padding-left:26px;margin-bottom:10px;margin-top:5px} .post .tocInner li > *:before, .tableOfContent li > a:before{content:counters(toc-count,'.')'. ';counter-increment:toc-count; display:inline-block;min-width:20px;margin-right:5px;flex-shrink:0;font-weight:400}
.post .spoilerTitle label{color:#fefefe;background-color:var(--link-bg); border-radius:2px;padding:0 15px; line-height:30px;font-size:12px;font-weight:400;font-family:var(--font-body)} .post .spoilerTitle label:before{content:'Show all'} .post .spoilerContent{max-height:0} .post .spoilerInput:checked ~ .spoilerTitle label:before{content:'Hide all'} .post .spoilerInput:checked ~ .spoilerContent{max-height:1000vh}
.post .tabsHead{display:flex; border-bottom:1px solid var(--content-border);margin-bottom:30px;font-size:13px;line-height:1.7em} .post .tabsHead > *:not(:last-child){margin-right:8px} .post .tabsHead > *{padding:8px 12px; border:1px solid var(--content-border);border-bottom:0; border-radius:4px 4px 0 0; position:relative} .post .tabsHead > *:before{content:attr(data-text)} .post .tabsHead > *:after{content:'';display:block;width:100%;height:2px;background-color:var(--body-bg); position:absolute;left:0;bottom:-1px; visibility:hidden;opacity:0} .post .tabsContent{position:relative} .post .tabsContent > *{display:none;width:100%} .post .tabsContent > * p:first-child{margin-top:0} .post .postBody input[id*="1"]:checked ~ .postTabs label[for*="1"]:after, .post .postBody input[id*="2"]:checked ~ .postTabs label[for*="2"]:after, .post .postBody input[id*="3"]:checked ~ .postTabs label[for*="3"]:after, .post .postBody input[id*="4"]:checked ~ .postTabs label[for*="4"]:after{visibility:visible;opacity:1} .post .postBody input[id*="1"]:checked ~ .postTabs .tabsContent div[class*="Content-1"], .post .postBody input[id*="2"]:checked ~ .postTabs .tabsContent div[class*="Content-2"], .post .postBody input[id*="3"]:checked ~ .postTabs .tabsContent div[class*="Content-3"], .post .postBody input[id*="4"]:checked ~ .postTabs .tabsContent div[class*="Content-4"]{display:block}
.post .postNav{font-size:13px; margin:50px 0; justify-content:center} .post .postNav > *{padding:8px 15px;border-radius:2px;margin-bottom:8px} .post .postNav > *:not(:last-child){margin-right:8px}
.post .proPrice, .post .proInfoL, .post .proInfoR, .post .proInfo.one{padding:15px 0;margin-bottom:0; border-bottom:1px solid var(--content-border); flex:0 0 50%;display:block} .post .proPrice{font-size:22px; color:var(--link-color)} .post .proPrice:before, .post .proInfo small{content:attr(data-text); font-size:small;color:var(--body-color);display:block; opacity:.8} .post .proInfo{display:flex; font-size:14px; line-height:1.6em} .post .proInfoL{padding-right:20px} .post .proInfoR{padding-left:0} .post .proMarket{margin:20px 0 30px; display:flex;flex-wrap:wrap; line-height:1.6em} .post .proMarket > *{display:block} .post .proMarket > small{width:100%; margin-bottom:10px} .post .proMarket > a{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px; margin:0 8px 8px 0;border:1px solid var(--content-border);border-radius:3px} .post .proMarket > a:last-of-type{margin-right:0} .post .proMarket > a img{width:20px;height:20px;display:block} .darkMode .post .proPrice:before, .darkMode .post .proInfo small{color:var(--dark-textAlt)}
/* Article Style Responsive */
@media screen and (max-width: 640px){.post .postEntry img.fullImg{width:calc(100% + 40px);left:-20px;right:-20px; border-radius:0} .post .note{width:calc(100% + 40px);left:-20px;right:-20px; font-size:.8rem;border-radius:0}} @media screen and (max-width:480px){.post .scrollImage{flex-wrap:nowrap;justify-content:flex-start;position:relative;width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px; overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .post .scrollImage > *{display:block;flex-shrink:0; width:80%; margin:0 15px 0 0; scroll-snap-align:center} .post .scrollImage > *:last-child{margin-right:0} .post .scrollImage:after{content:'';display:block;flex-shrink:0; align-self:stretch;padding-left:20px} .post .hideImage > *, .post .showImage > *{width:calc(100% - 15px)} .post .table{position:relative; width:calc(100% + 40px);left:-20px;right:-20px;padding:0 20px; display:flex}article .table:after{content:'';display:block;padding-left:20px} .post blockquote, .post blockquote.style-1{font-size:14px} .postRelated > *{font-size:13px} .postRelated h3, .postRelated h4, .postRelated b, .post .tabsHead, .post .postNav{font-size:12px}}
/* Article Comments */
.comments iframe{width:100%} .commentsDisable{text-align:center} .blogComments{margin:40px 0 0} .blogComments .commentsTitle{display:flex;justify-content:space-between; margin:0 0 30px;padding-bottom:15px;border-bottom:1px solid var(--content-border)} .blogComments .commentsTitle .title{margin:0; flex-grow:1} .blogComments .commentsTitle .title:after{display:none} .commentsIcon{display:flex;flex-shrink:0; font-size:12px} .commentsIcon > *{display:flex;align-items:center} .commentsIcon svg{width:20px;height:20px} .commentsIcon .commentClose{margin-left:12px;padding-left:0;border-left:0px solid var(--content-border)} .commentsIcon .commentSort:before{content:attr(data-text);opacity:.7;margin:0 8px} .commentAll:checked ~ .commentsTitle .commentsIcon .commentSort:before{content:attr(data-new)} .commentAll:checked ~ .commentsTitle .commentsIcon .commentSort svg.line{stroke:var(--link-color)} .commentAll:checked ~ .commentsInner .commentsContent > ol{flex-direction:column-reverse} .commentsButton.button.outline{font-size:14px} .commentsButton.button.outline, .commentsAdd .commentsReply{margin:0;padding:20px; display:block;text-align:center} .commentsButton.button.outline > *:before{content:attr(data-text)} .commentShow:checked ~ .commentsButton, .commentsButton ~ .comments, #comment:target .commentsButton{display:none} .commentShow:checked ~ .commentsButton ~ .comments, #comment:target .comments{display:block} #comment:target .commentShow:checked ~ .commentsButton ~ .comments{display:none} #comment:target .commentShow:checked ~ .commentsButton{display:block}
.commentsContent ol, .commentsContent ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .commentsContent ol > li{position:relative; margin:0 0 20px 21px; background-color:var(--content-bg);border:1px solid var(--content-border);border-radius:8px; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)} .commentsContent ol > li > .commentAvatar{position:absolute;top:10px;left:-21px} .commentsContent ol > li > .commentInner > .commentBlock{padding:20px 15px 0 35px} .commentsContent ol > li > .commentInner > .commentBlock > .commentContent{margin-bottom:12px} .commentsContent ul{padding:15px 15px 0 18px} .commentsContent ul > li{display:flex} .commentsContent ul > li:not(:last-child){margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed rgba(0,0,0,0.2)} .commentsContent ul > li > .commentAvatar{width:32px;height:32px; flex-shrink:0} .commentsContent ul > li > .commentInner{flex-grow:1;padding-left:12px;padding-top:5px; width:calc(100% - 32px)} .commentsContent ul > li > .commentInner .commentHeader{display:flex} .commentAvatar{width:42px;height:42px; border-radius:18px;background-color:#f6f6f6; overflow:hidden} .commentAvatar div{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat} .commentHeader{font-size:13px} .commentHeader .name{display:inline-flex;align-items:flex-start; font-family:var(--font-head);font-weight:600} .commentHeader .name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; max-width:180px} .commentHeader .name svg{width:20px;height:16px;fill:#519bd6;margin-left:3px} .commentHeader .datetime{margin-left:3px;font-size:12px;opacity:.8; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .commentHeader .datetime:before{content:'\2022';margin-right:5px} .commentContent{margin-top:10px; line-height:1.6em} .commentContent.hasDeleted{border:1px dashed rgba(0,0,0,.1);padding:15px;font-size:.8rem;font-style:italic;opacity:.8; border-radius:3px} .commentContent i[rel="pre"], .commentContent i[rel="quote"]{margin:1.2em auto; font-style:normal} .commentContent i[rel="quote"]{display:block;font-style:italic;font-size:.85rem;padding:12px 20px} .commentContent i[rel="image"]{font-size:.8rem; display:block;position:relative; min-height:55px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; opacity:.8} .commentContent i[rel="image"]:before{content:'This feature isn\0027t available!';border:1px dashed rgba(0,0,0,.1);border-radius:3px;padding:15px;font-size:.8rem;white-space:nowrap;display:flex;align-items:center;position:absolute;top:0;left:0;bottom:0;right:0;background-color:var(--content-bg)} .commentReplies, .commentActions, .commentReply{margin-top:10px} .commentReplies ~ .commentActions{display:none} .commentActions{padding-bottom:15px} .commentReply{margin-left:62px} .commentReplies{padding:15px 0; background-color:var(--transparent-bg); border-radius:0 0 8px 8px} .commentReplies .threadShow:checked ~ .commentThread .threadToggle svg{transform:rotate(180deg)} .commentReplies .threadShow:checked ~ .commentThread .threadChrome, .commentReplies .threadShow:checked ~ .commentReply{display:none} .commentThread .threadToggle, .commentActions a{margin-left:35px} .commentThread .threadToggle, .commentActions a, .commentReply a{font-size:13px;opacity:.8;display:inline-flex;align-items:center; color:inherit} .commentThread .threadToggle:after, .commentActions a:after, .commentReply a:after{content:attr(data-text)} .commentThread .threadToggle svg, .commentActions svg, .commentReply svg{width:18px;height:16px;margin-right:8px} .comment-replybox-single{padding:15px 15px 15px 35px}
/* Widget FeaturedPost */
.itemTitle{line-height:normal; -webkit-transition:var(--transition-1);transition:var(--transition-1)} .itemInfo{position:relative} .itemFeatured .item{display:flex;align-items:center; position:relative} .itemFeatured .itemThumbnail{flex:1 0 310px; overflow:hidden;border-radius:2px; margin-bottom:0} .itemFeatured .itemContent{flex-grow:1; width:calc(100% - 310px);padding-left:25px} .itemFeatured .itemTitle{font-size:17px} .itemFeatured .itemEntry{font-size:95%} .itemFeatured .itemEntry.productPrice{font-size:14px}
/* Widget PopularPosts */
.itemPopulars{counter-reset:popular-count} .itemPopulars .itemThumbnail > *{padding-top:0} .itemPopulars .itemTitle{font-size:.9rem} .itemPopular:not(:last-child){margin-bottom:25px} .itemPopular .itemInner{display:flex} .itemPopular .itemInner:before{flex-shrink:0; content:'0' counter(popular-count);counter-increment:popular-count; width:32px;font-weight:700;font-size:16px;font-family:var(--font-head); opacity:.3} .itemPopular .itemFlex{width:calc(100% - 32px)} .itemPopular .postHeader, .itemPopular .postLabel.sponsored{margin-left:32px;margin-bottom:5px} .itemPopular .itemInfo, .itemPopular .itemEntry{margin-top:10px}
/* Widget ContactForm */
.ContactForm{max-width:500px;font-size:92%;margin-bottom:40px} .ContactForm .inputArea{position:relative} .ContactForm label{display:inline-block;margin-bottom:8px} .ContactForm label span{color:var(--highlight-red);font-size:small}
/* Widget Label */
.Label{font-size:90%} .Label ul, .Label .cloud, .Label .cloud .labelAll{display:flex;flex-wrap:wrap; list-style:none;margin:0;padding:0} .Label li{width:calc(50% - 10px); margin-bottom:15px} .Label li:nth-child(2n+1){margin-right:20px} .Label li a .labelTitle:hover{text-decoration:underline} .Label li > *{display:flex;align-items:center; color:inherit} .Label li > * svg{flex-shrink:0; width:18px;height:18px; margin-left:5px} .Label li > a:hover svg{fill:var(--link-color)} .Label li > a:hover svg.line{fill:none;stroke:var(--link-color)} .Label li:nth-child(2n+1).labelShow{margin:0} .Label .labelShow .hidden{display:none} .Label .labelShow{width:100%;margin:0} .Label .labelShow ul, .Label .cloud .labelAll{width:100%;margin:0;padding:0; max-height:0; overflow:hidden; transition:var(--transition-4)} .Label .labelShow label{display:inline-flex;align-items:baseline; margin-top:10px;line-height:20px; color:var(--link-color)} .Label .labelShow label:before{content:attr(data-show)} .Label .labelShow label:after, .Label .labelCount:before{content:attr(data-text)} .Label .labelInput:checked ~ .labelAll ul, .Label .cloud .labelInput:checked ~ .labelAll{max-height:1000vh} .Label .labelInput:checked ~ label:before{content:attr(data-hide)} .Label .labelInput:checked ~ label:after{visibility:hidden} .Label .labelTitle{margin-right:auto; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .Label .labelCount, .Label .labelShow label:after{flex-shrink:0; font-size:11px; margin-left:8px; opacity:.7} .Label .cloud > *, .Label .cloud .labelAll > *{display:block;max-width:100%} .Label .cloud .labelName{display:flex;justify-content:space-between; margin:0 8px 8px 0;padding:9px 13px; border:1px solid rgb(230,230,230);border-radius:2px; color:inherit;line-height:20px} .Label .cloud .labelSize > *:hover, .Label .cloud div.labelName, .darkMode .Label .cloud .labelSize > *:hover, .darkMode .Label .cloud div.labelName{border-color:var(--link-bg)} .Label .cloud .labelSize > *:hover .labelCount, .Label .cloud div.labelName .labelCount{color:var(--link-bg); opacity:1}
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; -webkit-transition:var(--transition-1);transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}
/* Error Page */
.error404{display:flex;align-items:center;justify-content:center;height:100vh;text-align:center;padding:0} .errorPage{width:calc(100% - 40px);max-width:500px;margin:auto} .errorPage h3{font-size:1.414rem;font-family:var(--font-body)} .errorPage h3 span{display:block;font-size:140px;line-height:.8;margin-bottom:-1rem;color:#ebebf0} .errorPage p{margin:30px 5%;line-height:1.6em;font-family:var(--font-body)} .errorPage .button{margin:0;padding-left:2em;padding-right:2em;font-size:14px}
/* Button */
.button{display:inline-flex;align-items:center; margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:0; border-radius:2px;line-height:20px; color:#fefefe; background-color:var(--link-bg); font-size:13px;font-family:var(--font-body); white-space:nowrap;overflow:hidden;max-width:100%} .button.outline{color:inherit; background-color:transparent; border:1px solid var(--body-altColor)} .button.outline:hover{border-color:var(--link-bg)} .button.whatsapp{background-color:#25D366} .buttonInfo{display:flex;flex-wrap:wrap;justify-content:center; margin:12px 0 0} .buttonInfo > *{margin:0 12px 12px 0} .buttonInfo > *:last-child{margin-right:0} @media screen and (max-width:480px){.buttonInfo > *{flex-grow:1;justify-content:center} .buttonInfo > *:last-child{flex:0 0 auto}}
/* Button Download */
.downloadInfo{max-width:500px;background-color:#fefefe; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid var(--content-border);border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px} .downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:#f1f1f0;border-radius:10px} .downloadInfo a{background-color:var(--link-bg);color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px} .downloadInfo a:after{content:attr(aria-label)} .downloadInfo .fileType:before{content:attr(data-text)} .downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px} .downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8} .darkMode .downloadInfo{background-color:var(--dark-bgSec); border:0} .darkMode .downloadInfo .fileType{background-color:var(--dark-bg)} @media screen and (max-width:480px){.downloadInfo{padding:12px} .downloadInfo a{width:50px;height:50px;border-radius:10px} .downloadInfo a:after{display:none} .downloadInfo a .icon{margin:0}}
/* CSS icon background */
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center} .icon.download, .darkMode .button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")} .icon.demo{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' x2='21' y1='14' y2='3'/></svg>")} .icon.cart{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7.42226 19.8203C7.84426 19.8203 8.18726 20.1633 8.18726 20.5853C8.18726 21.0073 7.84426 21.3493 7.42226 21.3493C7.00026 21.3493 6.65826 21.0073 6.65826 20.5853C6.65826 20.1633 7.00026 19.8203 7.42226 19.8203Z'/><path d='M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z'/><path d='M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.16388'/></svg>")} .icon.whatsapp{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fefefe'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg>")} .button.outline .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348525c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
/* Accordion */
.accordion{position:relative; list-style:none;margin:30px 0 0;padding:0; font-size:14px;line-height:1.7em} .accordion li{width:100%;padding:18px 0;border-bottom:1px solid var(--content-border)} .accordion .content{margin:0;padding-left:32px; position:relative; font-family:var(--font-body); overflow:hidden;max-height:0; -webkit-transition:var(--transition-2);transition:var(--transition-2); opacity:.8} .accordion p:first-child{margin-top:0} .accordion p:last-child{margin-bottom:0} .accorTitle{display:flex;align-items:center; font-weight:900;font-family:var(--font-body); color:var(--head-color);padding:0 5px} .accorTitle span{flex-grow:1} .accorIcon{flex-shrink:0; display:flex;align-items:center;justify-content:center; width:12px;height:12px;margin-right:15px;position:relative} .accorIcon:before, .accorIcon:after{content:''; display:block;width:100%;height:2px; border-radius:2px; background-color:var(--head-color)} .accorIcon:after{position:absolute; transform:rotate(90deg)} .accorMenu:checked ~ .accorTitle span{color:var(--link-color)} .accorMenu:checked ~ .accorTitle .accorIcon:before, .accorMenu:checked ~ .accorTitle .accorIcon:after{background-color:var(--link-color)} .accorMenu:checked ~ .accorTitle .accorIcon:after{visibility:hidden;opacity:0} .accorMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px} .darkMode .accorTitle{color:var(--dark-text)} .darkMode .accorIcon:before, .darkMode .accorIcon:after{background-color:var(--dark-text)}
/* Keyframes Animation */
@-webkit-keyframes slidein{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} @keyframes slidein{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} @-webkit-keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}} @keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}} @keyframes tonext{ 75%{left:0} 95%{left:100%} 98%{left:100%} 99%{left:0}} @keyframes tostart{ 75%{left:0} 95%{left:-300%} 98%{left:-300%} 99%{left:0}} @keyframes tonext-rev{ 75%{right:0} 95%{right:100%} 98%{right:100%} 99%{right:0}} @keyframes tostart-rev{ 75%{right:0} 95%{right:-300%} 98%{right:-300%} 99%{right:0}} @keyframes snap{ 96%{scroll-snap-align:center} 97%{scroll-snap-align:none} 99%{scroll-snap-align:none} 100%{scroll-snap-align:center}}
/* Sticky Ad */
.stickAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition:var(--transition-1);transition:var(--transition-1);display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid var(--content-border)} .stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid var(--content-border);border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background-color:inherit} .stickAdclose svg{width:18px;height:18px} .stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative} .stickAdin:checked ~ .stickAd{padding:0;min-height:0} .stickAdin:checked ~ .stickAd .stickAdcontent{display:none} .darkMode .stickAd{background-color:var(--dark-bgAlt)} .darkMode .stickAd, .darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}
/* Responsive */
@media screen and (min-width:768px){::-webkit-scrollbar{-webkit-appearance:none;width:4px;height:5px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.15);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.45)}::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.45)}}
@media screen and (min-width:1600px){.blogContent .mainbar{max-width:896px}}
@media screen and (max-width:1100px){.blogContent .sidebar{flex:0 0 300px;width:300px} .itemFeatured .item{flex-wrap:nowrap} .itemFeatured .itemThumbnail{flex:0 0 calc(50% - 10px); margin-bottom:0} .itemFeatured .itemContent{padding-left:20px} .itemFeatured .itemEntry, .shareIcon a:after{display:none} .blogPosts .hentry{width:calc(50% - 20px)}}
@media screen and (max-width:896px){.itemFeatured .item{flex-wrap:nowrap} .itemFeatured .itemThumbnail{flex:1 0 310px; margin-bottom:0} .itemFeatured .itemContent{padding-left:25px} .itemFeatured .itemEntry{display:-webkit-box} .blogPosts .hentry{width:calc(33.333% - 20px)} .shareIcon a:after{display:block} .blogContent{display:block} .blogContent .mainbar, .blogContent .sidebar{width:100%;padding:0; margin-right:auto;margin-left:auto} .blogContent .sidebar{margin-top:50px} .blogPosts div.hentry{width:calc(100% - 20px)} .onIndex .blogContent .mainbar{max-width:none} .onItem .postTitle{font-size:26px} footer{padding-bottom:50px;margin-left:0}}
@media screen and (max-width:640px){.Header h1, .Header h2{font-size:16px} .headerLeft{padding-left:20px} .headerRight, .notifContent, .sectionInner{padding-left:20px;padding-right:20px} .blogPosts .hentry{width:calc(50% - 20px)} .itemFeatured .itemThumbnail{flex:1 0 calc(50% - 10px)} .itemFeatured .itemContent{width:calc(50% + 10px)} .itemFeatured .itemTitle, .itemPopulars .itemTitle{font-size:16px} .shareIcon a:after{display:none}}
@media screen and (max-width:480px){.blogContent .widget .title, .tableOfHeader{font-size:14px} .blogContent .widget .title.search, .breadcrumbs, .commentContent{font-size:13px} .blogPosts{width:calc(100% + 15px);left:-7.5px;right:-7.5px} .blogPosts .hentry{width:calc(50% - 15px); margin-left:7.5px;margin-right:7.5px} .blogPosts div.hentry{width:calc(100% - 15px)} .postTitle, .itemFeatured .itemTitle, .itemPopulars .itemTitle{font-size:14px} .postEntry.snippet, .postHeader, .postInfo, .postTimes, .postLabel.sponsored, .blogPager, .postNav, .itemFeatured .itemEntry, footer, .commentHeader{font-size:12px} .postEntry .separator, .postEntry .separator a{margin-left:auto ;margin-right:auto } .onItem .headerIcon label.navMenu, .onItem #header-widget{display:none} .onItem .headerIcon a.navMenu{display:flex; margin-left:0;left:-5px} .onItem .postTitle{font-size:var(--post-titleSizeMobile)} .onItem .postEntry{font-size:var(--post-fontSizeMobile)} .itemFeatured{padding-bottom:70px} .itemFeatured .item{display:block} .itemFeatured .itemContent{position:absolute;left:0;right:0;bottom:-70px; width:calc(100% - 30px);margin:auto;padding:12.5px;border-radius:8px;box-shadow:0 10px 15px 0 rgb(30 30 30 / 7%); background-color:var(--content-bg)} .itemFeatured .itemTitle a, .itemPopulars .itemTitle a{-webkit-line-clamp:2} footer .toTop:before{content:'Top'}}
/*]]>*/</style>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<style>/*<![CDATA[*/
.headerIcon .headerProfile{display:block; position:absolute;top:-10px;right:0; margin:0; width:250px;max-height:400px; background-color:var(--content-bg); border:1px solid var(--content-border);border-radius:8px;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); -webkit-transition:var(--transition-1);transition:var(--transition-1); overflow:hidden;z-index:3;opacity:0;visibility:hidden; font-size:12px} .headerIcon .headerProfile ul{margin:0;padding:0;list-style:none} .headerIcon .headerProfile .socialLink{padding:15px 15px; border-top:1px solid var(--content-border)} .headerIcon .headerProfile .widget:not(:first-child){margin-top:15px} .headerIcon .closeProfile{display:block;position:fixed;margin:0}
.profInput:checked ~ .mainWrapper .headerIcon .headerProfile{opacity:1;visibility:visible; top:0} .profInput:checked ~ .mainWrapper .headerIcon .closeProfile{opacity:1;visibility:visible} .navInput:checked ~ .mainWrapper .headerIcon .navMenu .svg-1{opacity:0;visibility:hidden} .navInput:checked ~ .mainWrapper .headerIcon .navMenu .svg-2{opacity:1;visibility:visible} .darkMode .headerIcon label.navMenu:after, .darkMode .headerSearch input[type=text]{background-color:rgba(255,255,255,.1)} .darkMode .headerIcon .navDark i, .darkMode .headerIcon .navMenu .ham i, .darkMode .headerIcon .navMenu .ham span:before, .darkMode .headerIcon .navMenu .ham span:after{border-color:var(--dark-text)} .darkMode .headerIcon .navDark i:before{left:10px;background-color:var(--dark-text)}
/* Widget Profile */
.Profile .profileHeader{padding:12px 10px 10px; font-size:12px} .Profile .profileHeader svg{width:18px;height:18px} .Profile .profileHeader label{display:flex;align-items:center} .Profile .profileHeader label:after{content:attr(data-text);padding-left:8px;padding-right:8px;opacity:.7} .Profile .defaultAvatar{width:100%;height:100%; display:flex;align-items:center;justify-content:center} .Profile .profileImg{width:100%;height:100%;background-repeat:no-repeat;background-size:100%;background-position:center} .Profile .team{padding:10px 0; overflow-y:auto;max-height:280px} .Profile .team .profileLink{display:flex;align-items:center;padding:7px 15px} .Profile .team .profileLink:hover{background-color:var(--transparent-bg)} .Profile .team .profileImage{flex-shrink:0; width:36px;height:36px; border-radius:27px;background-color:var(--transparent-bg); overflow:hidden} .Profile .team .profileName{flex-grow:1;padding-left:12px;padding-right:12px; color:inherit; font-weight:600;font-family:var(--font-head); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .Profile .team .profileName:after{content: 'Author' ; display:block; font-weight:400;font-size:11px;font-family:var(--font-body); opacity:.7} .Profile .team li:not(:first-child) .profileName:after{content: 'Contributor' }
.Profile .solo{padding:15px;text-align:center} .Profile .solo .profileImage{margin:0 auto 10px; width:60px;height:60px; border-radius:30px;background-color:var(--transparent-bg); overflow:hidden} .Profile .solo .profileLink{display:block;color:inherit; font-weight:600;font-size:13px;font-family:var(--font-head); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .Profile .solo .profileText{opacity:.7; line-height:1.6em} .Profile .solo .profileData{display:inline-flex;margin-top:10px; font-size:12px; color:var(--link-color)} .Profile .solo .profileData:after{content:attr(data-text); padding-left:8px} .Profile .solo .profileData svg{width:18px;height:18px;fill:var(--link-color)} .Profile .solo .profileData svg.line{fill:none;stroke:var(--link-color)}
@media screen and (max-width:480px){.headerIcon .headerProfile{position:fixed;left:0; margin:0 auto auto; width:calc(100vw - 40px); border:0;border-radius:15px} .profInput:checked ~ .mainWrapper .headerIcon .headerProfile{top:25px} .profInput:checked ~ .mainWrapper .headerIcon .closeProfile{background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)} .Profile .team .profileLink{padding:7px 35px} .Profile .solo{padding:35px 30px 15px}}
/* listMode */
.listMode .blogPosts .hentry{width:calc(100% - 20px); display:flex;align-items:center; padding-bottom:0;margin-bottom:25px} .listMode .blogPosts div.hentry{display:block} .listMode .blogPosts .postThumbnail{margin-bottom:0} .listMode .blogPosts .postContent{width:calc(100% - (33.333% - 12.5px)); padding-left:25px} .listMode .blogPosts .postTitle{font-size:18px} .listMode .blogPosts .postEntry.snippet{display:none} .listMode .blogPosts .postEntry.snippet.productPrice{display:block} .listMode .blogPosts .postInfo{position:relative} @media screen and (max-width:640px){.listMode .blogPosts .hentry{flex-direction:row-reverse; margin-bottom:30px} .listMode .blogPosts .postContent{padding-left:0;padding-right:25px}} @media screen and (max-width:480px){.listMode .blogPosts .hentry{width:calc(100% - 15px)} .listMode .blogPosts .postThumbnail{flex:0 0 95px} .listMode .blogPosts .postThumbnail amp-img{min-height:95px} .listMode .blogPosts .postThumbnail amp-img img{position:absolute;max-width:initial;width:auto;height:initial;max-height:100%;top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, 0)} .listMode .blogPosts .postContent{width:calc(100% - 95px); padding-right:20px} .listMode .blogPosts .postTitle, .gridLayout.listMode .blogPosts .postTitle{font-size:14px} .listMode .blogPosts .postHeader{margin-bottom:5px} .listMode .blogPosts .postInfo{margin-top:15px}}
/* Slider */
.slider, .sliderSection{position:relative} .sliderViewport{position:relative;height:100%;display:flex;overflow-y:hidden;overflow-x:scroll; scroll-behavior:smooth;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0; -ms-overflow-style: none;} .sliderViewport::-webkit-scrollbar{width:0} .sliderViewport::-webkit-scrollbar-track{background:transparent} .sliderViewport::-webkit-scrollbar-thumb{background:transparent;border:none} .sliderDiv{position:relative;flex:0 0 100%;width:100%;background-color:transparent; outline:0;border:0} .sliderDiv:nth-child(even){background-color:inherit} .sliderSnapper{position:absolute;top:0;left:0;width:100%;height:100%;scroll-snap-align:center;z-index:-1} .sliderImg{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;padding-top:40%;border-radius:3px} @media (hover:hover){.sliderSnapper{animation-name:tonext, snap;animation-timing-function:ease;animation-duration:4s;animation-iteration-count:infinite} .rtlMode .sliderSnapper{animation-name:tonext-rev, snap} .sliderDiv:last-child .sliderSnapper{animation-name:tostart, snap} .rtlMode .sliderDiv:last-child .sliderSnapper{animation-name:tostart-rev, snap}} @media (prefers-reduced-motion:reduce){.sliderSnapper, .rtlMode .sliderSnapper{animation-name:none}} .slider:hover .sliderSnapper, .rtlMode .slider:hover .sliderSnapper, .slider:focus-within .sliderSnapper, .rtlMode .slider:focus-within .sliderSnapper{animation-name:none} @media screen and (max-width:896px){.sliderSection .widget{margin-top:30px} .sliderViewport{width:100%;padding:0 20px 10px} .sliderViewport:after{content:'';display:block;position:relative;padding:10px} .sliderDiv{flex:0 0 90%;width:90%;margin-right:15px; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%)} .rtlMode .sliderDiv{margin-right:0;margin-left:15px} .sliderDiv:last-child{margin-right:0} .rtlMode .sliderDiv:last-child{margin-left:0} .slider{width:calc(100% + 50px);left:-25px;right:-25px} .sliderSnapper{animation-name:none}} @media screen and (max-width:640px){.slider{width:calc(100% + 40px);left:-20px;right:-20px}}
/* Lazy Youtube */
.lazyYoutube{background-color:var(--highlight-bg);position:relative;overflow:hidden;padding-top:56.25%;border-radius:2px} .lazyYoutube img{width:100%;top:-16.84%;left:0;opacity:.95} .lazyYoutube img, .lazyYoutube iframe, .lazyYoutube .playBut{position:absolute} .lazyYoutube iframe{width:100%;height:100%;bottom:0;right:0} .lazyYoutube .playBut{top:50%;left:50%; transform:translate3d(-50%,-50%,0); transition:all .5s ease} .lazyYoutube .playBut{display:block;width:70px;height:70px;z-index:1} .lazyYoutube .playBut svg{width:inherit;height:inherit; fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:8} .lazyYoutube .playBut .circle{stroke:rgba(255,255,255,.85);stroke-dasharray:650;stroke-dashoffset:650; transition:all .4s ease-in-out; opacity:.3} .lazyYoutube .playBut .triangle{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480; transition:all .6s ease-in-out; transform:translateY(0);-webkit-transform:translateY(0)} .lazyYoutube .playBut:hover .triangle{animation:nudge .6s ease-in-out;-webkit-animation:nudge .6s ease-in-out} .lazyYoutube .playBut:hover .triangle, .lazyYoutube .playBut:hover .circle{stroke-dashoffset:0; opacity:1;stroke:var(--highlight-red)}
/* Dark Mode */
.darkMode{background-color:var(--dark-bg);color:var(--dark-text)} .darkMode a, .darkMode .free:after, .darkMode .new:after, .darkMode .postLabel > a:hover, .darkMode .postMore:hover{color:var(--dark-link)} .darkMode svg{fill:var(--dark-text)} .darkMode svg.line, .darkMode svg .line{fill:none;stroke:var(--dark-text)} .darkMode svg.c-1, .darkMode svg .c-1{fill:var(--dark-text)} .darkMode svg.c-2, .darkMode svg .c-2{fill:var(--dark-textAlt); opacity:.4} .darkMode h1, .darkMode h2, .darkMode h3, .darkMode h4, .darkMode h5, .darkMode h6, .darkMode header a, .darkMode footer{color:inherit} .darkMode header, .darkMode .mainMenu, .darkMode .htmlMenu .close, .darkMode #LinkList002{background-color:var(--dark-bg);color:inherit} .darkMode .headerIcon .headerProfile, .darkMode #mobile-menu, .darkMode .commentsContent ol > li, .darkMode .commentContent i[rel="image"]:before{background-color:var(--dark-bgSec)} .darkMode header, .darkMode .headerIcon .headerProfile, .darkMode .headerIcon .headerProfile .socialLink, .darkMode .blogContent .mainbar > *, .darkMode .mainMenu, .darkMode .htmlMenu > li.break:after, .darkMode .Label .cloud .labelName, .darkMode .postComments > *, .darkMode .postTimes, .darkMode .postRelated, .darkMode .postRelated h3, .darkMode .postRelated h4, .darkMode .postRelated b, .darkMode .post blockquote, .darkMode .post .commentContent i[rel="quote"], .darkMode .post table th, .darkMode .post table td, .darkMode .post .tocInner, .darkMode .post .spoiler, .darkMode .accordion li, .darkMode .postShare, .darkMode .shareIcon > *, .darkMode .sharePreview, .darkMode .blogComments .commentsTitle, .darkMode .commentsIcon .commentClose, .darkMode .commentsContent ul > li:not(:last-child), .darkMode .commentContent.hasDeleted, .darkMode .commentContent i[rel="image"]:before, .darkMode .commentContent i[rel="quote"], .darkMode .post .tabsHead, .darkMode .post .tabsHead > *, .darkMode .post .proPrice, .darkMode .post .proInfoL, .darkMode .post .proInfoR, .darkMode .post .proInfo.one, .darkMode .post .proMarket > a{border-color:rgba(255,255,255,.1)} .darkMode .Profile .team .profileLink:hover, .darkMode .htmlMenu a.link:hover, .darkMode .htmlMenu > li li a:hover, .darkMode .postThumbnail div, .darkMode .postThumbnail a, .darkMode .blogPager .noPost, .darkMode .blogPager .current, .darkMode .postNav .current{background-color:rgba(255,255,255,.1)} .darkMode #mobile-menu, .darkMode .commentsContent ol > li{border-color:transparent;color:inherit} .darkMode .postLabel > a, .darkMode .postTitle a, .darkMode .itemTitle a, .darkMode .postInfo a, .darkMode .blogPager a, .darkMode .postNav a, .darkMode .breadcrumbs a, .darkMode .button, .darkMode .shareIcon a, .darkMode .commentActions a, .darkMode .commentReply a, .darkMode .tableOfContent a, .darkMode .post .tocInner a{color:var(--dark-text)} .darkMode .commentReplies{background-color:rgba(0,0,0,.1)} .darkMode .postComments > a:before{background-color:var(--dark-bgAlt)} .darkMode .postComments svg, .darkMode .postComments > *:hover svg.line .fill{fill:var(--dark-text);opacity:.8} .darkMode .postComments svg.line{fill:none;stroke:var(--dark-text);opacity:.8} .darkMode .blogContent .widget input[type=text], .darkMode .blogContent .widget input[type=email], .darkMode .blogContent .widget textarea{border-color:rgba(255,255,255,.1); background-color:var(--dark-bgAlt)} .darkMode .blogContent .widget input[type=text]:focus, .darkMode .blogContent .widget input[type=email]:focus, .darkMode .blogContent .widget textarea:focus{border-color:var(--body-altColor)} @media screen and (max-width:896px){.darkMode .headerSearch input[type=text]{background-color:var(--dark-bgAlt)} .darkMode .mainMenu{background-color:transparent} .darkMode .mainMenu .section{background-color:var(--dark-bg)} .darkMode .navInput:checked ~ .mainWrapper .htmlMenu a.link:hover{background-color:rgba(255,255,255,.1)}}@media screen and (max-width:480px){.darkMode .itemFeatured .itemContent{background-color:var(--dark-bgSec)}}
/*]]>*/</style>
</b:if>
<b:if cond='data:view.isSingleItem and data:view.url != data:view.url params { amp: "1" }'>
<style>/*<![CDATA[*/
/* Related Posts */
.relatedPosts{margin:40px 0 0;line-height:1.6em} .relatedPosts ul{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px;right:-10px; list-style:none;margin:0;padding:0} .relatedPosts li{display:block;width:calc(33.333% - 20px); margin:0 10px 30px} .relatedPosts .itemThumbnail a{background-image:none; color:inherit} .relatedPosts .itemThumbnail > *:before{content:'No image';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%); font-size:12px; opacity:.7} .relatedPosts .itemThumbnail div{background-position:center;background-size:cover;background-repeat:no-repeat; display:block;position:absolute;top:0;left:0;bottom:0;right:0} .relatedPosts .itemTitle{font-size:.85rem;line-height:normal; font-family:var(--font-head);font-weight:700}
@media screen and (max-width:1100px){.relatedPosts li{width:calc(50% - 20px)}} @media screen and (max-width:896px){.relatedPosts li{width:calc(33.333% - 20px)}} @media screen and (max-width:640px){.relatedPosts li{width:calc(50% - 20px)}} @media screen and (max-width:480px){.relatedPosts ul{flex-wrap:nowrap;width:calc(100% + 40px);left:-20px;right:-20px;margin-bottom:50px;padding:0 20px; overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .relatedPosts li{display:block;flex-shrink:0; width:70%; margin:0 15px 0 0; scroll-snap-align:center} .relatedPosts li:last-child{margin-right:0} .relatedPosts ul:after{content:'';display:block;flex-shrink:0; align-self:stretch;padding-left:20px} .relatedPosts .itemTitle{font-size:13px} .rtlMode .relatedPosts li{margin:0 0 0 15px} .rtlMode .relatedPosts li:last-child{margin-left:0}}
.blogComments .commentFixed{display:flex;align-items:center;justify-content:flex-end; position:fixed;top:0;left:0;right:0;bottom:0; z-index:20; -webkit-transition:var(--transition-1);transition:var(--transition-1); opacity:0;visibility:hidden} .blogComments .commentFixed .commentSection{width:100%;max-width:600px;max-height:calc(100% - 40px); margin:auto -100% auto auto;background-color:var(--content-bg);border-radius:10px; position:relative; box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); display:flex; overflow:hidden; transition:inherit;z-index:3} .blogComments .commentFixed .commentsTitle{position:absolute;left:0;top:0;right:0; padding:15px;z-index:3;background-color:var(--content-bg)} .blogComments .commentFixed .commentsInner{padding:81px 15px 15px; overflow-y:auto; width:100%} .blogComments .commentShow:checked ~ .commentFixed, #comment:target .commentFixed{display:flex; opacity:1;visibility:visible} .blogComments .commentShow:checked ~ .commentFixed .commentSection, #comment:Target .commentFixed .commentSection{margin-right:20px} .blogComments .commentShow:checked ~ .commentFixed .fullClose, #comment:target .commentFixed .fullClose{background:rgba(0,0,0,.5);opacity:1;visibility:visible; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px)} #comment:target .commentShow:checked ~ .commentsButton ~ .commentFixed{display:flex} #comment:target .commentShow:checked ~ .commentFixed{opacity:0;visibility:hidden} #comment:target .commentShow:checked ~ .commentFixed .commentSection{margin-right:-100%} #comment:target .commentShow:checked ~ .commentFixed .fullClose{background:transparent;opacity:0;visibility:hidden; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0)} .darkMode .blogComments .commentFixed .commentSection, .darkMode .blogComments .commentFixed .commentsTitle{background-color:var(--dark-bg)} @media screen and (max-width:480px){.commentsContent ol > li > .commentInner > .commentBlock{padding-top:15px} .commentsContent ol > li > .commentInner > .commentBlock > .commentHeader .name{display:flex} .commentsContent ol > li > .commentInner > .commentBlock > .commentHeader .datetime{margin-left:0} .commentsContent ol > li > .commentInner > .commentBlock > .commentHeader .datetime:before{display:none} .blogComments .commentFixed .commentSection{margin:auto auto -100%; border-radius:15px 15px 0 0} .blogComments .commentFixed .commentSection.show{border-radius:0;max-height:100%} .blogComments .commentFixed .commentsTitle{padding:20px 15px} .blogComments .commentFixed .commentsInner{padding-top:91px} .blogComments .commentShow:checked ~ .commentFixed .commentSection, #comment:Target .commentFixed .commentSection{margin:auto auto 0} #comment:target .commentShow:checked ~ .commentFixed .commentSection{margin-right:-100%}}
.postToc{position:fixed;top:0;right:-355px;bottom:0;left:0; width:355px;margin-left:auto; -webkit-transition:var(--transition-1);transition:var(--transition-1); display:flex;align-items:center;justify-content:flex-end; z-index:2} .tableOfContainer{width:100%;height:100%; background-color:var(--body-bg); -webkit-transition:var(--transition-1);transition:var(--transition-1); display:flex; position:relative;z-index:3} .tableOfHeader{display:flex;align-items:center;justify-content:space-between; padding:15px 20px 15px 30px; background-color:var(--body-bg); font-size:var(--widget-titleSize);font-weight:var(--widget-titleWeight); position:absolute;top:70px;right:0;left:0; z-index:1; transition:inherit} .tableOfHeader svg{width:20px;height:20px} .tableOfHeader span:before{content:attr(data-text)} .tableOfIcon{width:55px;height:40px; display:flex;align-items:center;justify-content:center; background-color:var(--content-bg); border-radius:50px 0 0 50px;border:1px solid var(--content-border);border-right:0;box-shadow:0 10px 20px 0 rgb(30 30 30 / 8%); position:absolute;top:10px;left:-55px; -webkit-transition:var(--transition-1);transition:var(--transition-1)} .tableOfIcon:before{content:'';display:block; width:12px;height:12px; background-color:var(--link-color);border:2px solid var(--content-bg); border-radius:50%; position:absolute;top:8px;left:15px} .tableOfInner{margin-top:70px;padding:50px 25px 50px 30px; width:100%; overflow-y:auto} .tableOfContent a{color:inherit; display:flex} .tableOfContent ol{margin:0} .tableOfContent li > a:before{opacity:.7} .tocMenu:checked ~ .postToc{right:0} .tocMenu:checked ~ .postToc .tableOfIcon{opacity:0;visibility:hidden} .darkMode .tableOfContainer, .darkMode .tableOfHeader{background-color:var(--dark-bg)} .darkMode .tableOfIcon{background-color:var(--dark-bgAlt);border-color:transparent} .darkMode .tableOfIcon:before{border-color:var(--dark-bgAlt)} @media screen and (max-width:896px){.postToc{right:0;width:75%;max-width:480px;margin-right:-480px} .tableOfContainer{ border-radius:15px 0 0 15px} .tableOfHeader, .tableOfIcon{top:40px} .tableOfInner{margin-top:40px} .tocMenu:checked ~ .postToc{z-index:10;margin-right:0} .tocMenu:checked ~ .postToc .fullClose{background:rgba(0,0,0,.25);opacity:1;visibility:visible} .darkMode .tableOfContainer, .darkMode .tableOfHeader{background-color:var(--dark-bgSec)}} @media screen and (max-width:480px){.postToc{margin-right:-75%} .tableOfHeader, .tableOfInner{padding-left:20px;padding-right:20px}} .rtlMode .postToc{left:-355px;right:0; margin-left:0;margin-right:auto} .rtlMode .tocMenu:checked ~ .postToc{left:0} .rtlMode .tableOfHeader{padding:15px 30px 15px 20px} .rtlMode .tableOfIcon{border-radius:0 50px 50px 0;border-right:1px solid var(--content-border);border-left:0;left:auto;right:-55px} .rtlMode .tableOfInner{padding:50px 30px 50px 25px} @media screen and (max-width:896px){.rtlMode .postToc{margin-left:-480px} .rtlMode .tocMenu:checked ~ .postToc{margin-left:0;margin-right:auto} .rtlMode .tableOfContainer{border-radius:0 15px 15px 0}} @media screen and (max-width:480px){.rtlMode .postToc{margin-left:-75%}.rtlMode .tableOfHeader, .rtlMode .tableOfInner{padding-left:20px;padding-right:20px}} @media screen and (max-width:1100px){.postToc{right:-325px;width:325px} .rtlMode .postToc{left:-325px;right:0}} @media screen and (max-width:896px){.postToc{right:0;width:75%} .rtlMode .postToc{left:0}}
/*]]>*/</style>
</b:if>
<b:defaultmarkups>
<!--[ Blogger defaultmarkups ]-->
<b:defaultmarkup type='Common'>
<!--[ In-feed ad ]-->
<b:includable id='post-adIn'>
<div class='hentry postAdIn'>
<!--[ InFeed Ad ]-->
<div style='background-color:#ddd;min-height:100px;height:100%'/>
<!--<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='fluid' data-ad-layout-key='-5d+cj+3n+y-3a' data-ad-slot='0000000000' style='display:block'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>-->
</div>
</b:includable>
<!--[ Top article ad ]-->
<b:includable id='post-adTop'>
<div class='postAd'>
<!--[ Top article Ad ]-->
<!--<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>-->
</div>
</b:includable>
<!--[ Bottom article ad ]-->
<b:includable id='post-adBot'>
<div class='postAd'>
<!--[ Bottom article Ad ]-->
<!--<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>-->
</div>
</b:includable>
<!--[ Matched content Ad ]-->
<b:includable id='post-relatedAd'>
<div class='relatedPosts'>
<!--[ Matched content Ad ]-->
<!--<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='autorelaxed' data-ad-slot='0000000000' style='display:block'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>-->
</div>
</b:includable>
<!--[ Index title ]-->
<b:includable id='titlePost'>
<div class='blogTitle'>
<h2 class='title'>
<b:class cond='data:view.search or data:view.isArchive and data:view.url != data:blog.homepageUrl.canonical path "search"' name='search'/>
<b:if cond='data:view.isHomepage'>
<!--[ Change <data:messages.latestPosts/> to replace 'Latest Posts' with your special text ]-->
<data:messages.latestPosts/>
<b:else/>
<b:if cond='data:view.search.label'>
<span class='home' expr:data-text='data:messages.home'/><data:blog.pageName/>
<b:elseif cond='data:view.search.query'/>
<span expr:data-text='data:messages.search + ":"'/><data:view.search.query/>
<b:else/>
<!--[ Change <data:messages.posts/> to replace 'Posts' with your special text ]-->
<data:messages.posts/>
</b:if>
<b:if cond='data:view.isArchive'><span expr:data-text='data:messages.blogArchive + ":"'/><data:blog.pageName/></b:if>
</b:if>
</h2>
<b:if cond='data:view.isMultipleItems and !data:posts.empty and data:view.url != data:view.url params { amp: "1" }'>
<div class='postMode' onclick='listMode()'>
<svg class='line svg-1' viewBox='0 0 24 24'><rect height='7' rx='2' ry='2' width='18' x='3' y='3'/><rect height='7' rx='2' ry='2' width='18' x='3' y='14'/></svg>
<svg class='line svg-2' viewBox='0 0 24 24'><rect height='7' width='7' x='3' y='3'/><rect height='7' width='7' x='14' y='3'/><rect height='7' width='7' x='14' y='14'/><rect height='7' width='7' x='3' y='14'/></svg>
</div>
<script>/*<![CDATA[*/ (localStorage.getItem('list')) === 'listmode' ? document.querySelector('#mainContent').classList.add('listMode') : document.querySelector('#mainContent').classList.remove('listMode') /*]]>*/</script>
</b:if>
</div>
</b:includable>
<!--[ Related post ]-->
<b:includable id='post-related'>
<div class='relatedPosts'>
<div id='relatedPosts'>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl.canonical/>",
widgetTitle: "<h3 class='title'><b:if cond='data:post.labels none (label => label.name in ["Product" , "Label_1"])'><data:messages.youMayLikeThesePosts/><b:else/>Related products!</b:if></h3>",
numPosts: 6,
summaryLength: 20,
titleLength:"auto",
thumbnailSize: 260,
noImage: "data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
containerId: "relatedPosts",
newTabLink: false,
moreText: "Read more",
widgetStyle: 2,
callBack:function(){}
}
</script>
<script>/*<![CDATA[*/ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h3 class='title'>Related Posts</h3>",widgetStyle:1,homePage:"http://www.jagodesain.com",numPosts:7,summaryLength:320,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",containerId:"related-posts",newTabLink:false,moreText:"Read more",callBack:function(){}}; for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.async="async";b.rel="preload";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<!-- <div class="clear"/> -->',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t; r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+(\-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"} if(A==2){c+='<li><div class="item"><div class="itemThumbnail postThumbnail"><a aria-label="'+w+'" href="'+v+'"><div class="lazy" data-bg="'+r+'"></div></a></div><div class="itemTitle"><a href="'+v+'"><span>'+w+'</span></a></div></div></li>'} else{c+='<li><div class="item"><div class="itemThumbnail posthumbnail"><a aria-label="'+w+'" href="'+v+'"><div class="lazy" data-bg="'+r+'"></div></a></div><div class="itemTitle"><a href="'+v+'"><span>'+w+'</span></a></div></div></li>'} }s.innerHTML=c+="</ul>";d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); /*]]>*/</script>
</div>
</div>
</b:includable>
<!--[ Post authors ]-->
<b:includable id='post-authorProfile'>
<div class='postAuthors'>
<div class='authorImage'>
<b:if cond='data:post.author.authorPhoto.image'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div class='authorImg lazy' expr:data-bg='resizeImage(data:post.author.authorPhoto.image,80,"1:1")'/>
<b:else/>
<div class='authorImg'>
<amp-img expr:alt='data:post.author.name' expr:src='resizeImage(data:post.author.authorPhoto.image,80,"1:1")' height='1' layout='responsive' width='1'/>
</div>
</b:if>
<b:else/>
<div class='authorImg'><b:include name='profile-icon'/></div>
</b:if>
</div>
<div class='authorInfo'>
<div class='authorName' data-write='Written by' expr:data-text='data:post.author.name'/>
<div class='authorAbout' expr:data-text='data:post.author.aboutMe snippet {length: 100, links: false, linebreaks: false}'/>
</div>
</div>
</b:includable>
<!--[ Post article ]-->
<b:includable id='postHeaders'>
<b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
<div class='postHeader'>
<!--[ Post labels ]-->
<b:include name='postLabel'/>
</div>
</b:if>
</b:includable>
<b:includable id='postSponsored'>
<b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
<div class='postLabel sponsored'>
<b:include name='hearth-icon'/>
<b:loop index='s' values='data:post.labels' var='label'>
<b:if cond='data:s == 0'>
<b:tag expr:data-text='data:label.name' name='span'/>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='postProduct'>
<b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
<div class='postLabel sponsored'>
<b:include name='tag-icon'/>
<b:loop index='s' values='data:post.labels' var='label'>
<b:if cond='data:s == 0'>
<a expr:aria-label='data:label.name' expr:data-text='data:label.name' expr:href='data:label.url.canonical' rel='tag'/>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='postAuthorImage'>
<b:if cond='data:widgets.Blog.first.allBylineItems.author and data:post.author.authorPhoto.image'>
<div class='postAuthorImage'>
<b:if cond='!data:view.isPost'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div class='authorImage lazy' expr:data-bg='resizeImage(data:post.author.authorPhoto.image,18,"1:1")'/>
<b:else/>
<div class='authorImage'>
<amp-img expr:alt='data:post.author.name' expr:src='resizeImage(data:post.author.authorPhoto.image,18,"1:1")' height='1' layout='responsive' width='1'/>
</div>
</b:if>
<b:else/>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div class='authorImage lazy' expr:data-bg='resizeImage(data:post.author.authorPhoto.image,34,"1:1")'/>
<b:else/>
<div class='authorImage'>
<amp-img expr:alt='data:post.author.name' expr:src='resizeImage(data:post.author.authorPhoto.image,34,"1:1")' height='1' layout='responsive' width='1'/>
</div>
</b:if>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postAuthorName'>
<b:if cond='data:widgets.Blog.first.allBylineItems.author'>
<div class='authorName fn' data-write='Contributor' expr:data-text='data:widgets.Blog.first.allBylineItems.author.label'>
<b:if cond='data:post.author.profileUrl'>
<meta expr:content='data:post.author.profileUrl' property='author'/>
<a expr:aria-label='data:post.author.name' expr:data-text='data:post.author.name' expr:href='data:post.author.profileUrl' rel='author noreferrer' target='_blank'/>
<b:else/>
<span expr:data-text='data:post.author.name'/>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postLabel'>
<div class='postLabel' expr:data-text='data:widgets.Blog.first.allBylineItems.labels.label'>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i <= 1'>
<b:tag expr:data-text='data:label.name' expr:name='data:blog.url != data:label.url ? "a" : "span"'>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.url.canonical' name='href'/>
<b:attr cond='data:blog.url != data:label.url' name='rel' value='tag'/>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.name' name='aria-label'/>
</b:tag>
</b:if>
</b:loop>
<b:else/>
<span expr:data-text='data:messages.posts'/>
</b:if>
</div>
</b:includable>
<b:includable id='postJumpLinks'>
<a class='postMore' expr:aria-label='data:blog.jumpLinkMessage' expr:data-text='data:messages.keepReading + "..."' expr:href='data:post.url.canonical'/>
</b:includable>
<b:includable id='postCommentsLinks'>
<b:if cond='data:post.allowComments and data:post.numberOfComments > 0'>
<a class='postComment' expr:aria-label='data:messages.comments' expr:data-text='data:post.numberOfComments' expr:href='data:post.url.canonical fragment "comment"'>
<b:include name='chat-icon'/>
</a>
</b:if>
</b:includable>
<b:includable id='postCommentLink'>
<b:if cond='data:post.allowComments and data:post.numberOfComments > 0'>
<a class='postComment' expr:aria-label='data:messages.comments' expr:data-text='data:post.numberOfComments' href='#comment'>
<b:include name='chat-icon'/>
</a>
</b:if>
</b:includable>
<b:includable id='postTimestamps'>
<b:if cond='data:post.lastUpdated != data:post.date'>
<time class='postTimestamp updated' expr:data-text='format(data:post.lastUpdated, "MMMM d, YYYY")' expr:datetime='data:post.lastUpdated.iso8601' expr:title='"Last updated: " + data:post.lastUpdated format "MMMM d, YYYY"'/>
<b:else/>
<time class='postTimestamp published' expr:data-text='format(data:post.date, "MMMM d, YYYY")' expr:datetime='data:post.date.iso8601' expr:title='"Published: " + data:post.date format "MMMM d, YYYY"'/>
</b:if>
</b:includable>
<b:includable id='postEntrySnippet'>
<b:eval expr='snippet(data:post.body, {length: 100, links: false, linebreaks: false})'/>
</b:includable>
<b:includable id='postEntryThumbnail'>
<amp-img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 600, "18:9")' height='9' layout='responsive' width='18'/>
<noscript><img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 600, "18:9")'/></noscript>
</b:includable>
<b:includable id='postTableofContent'>
<input class='tocMenu hidden' id='offtoc-menu' type='checkbox'/>
<div class='postToc'>
<div class='tableOfContainer'>
<label class='tableOfHeader' for='offtoc-menu'>
<span class='tableOfIcon'><b:include name='document-icon'/></span>
<span data-text='Table of contents'/>
<b:include name='forward-icon'/>
</label>
<div class='tableOfInner'>
<div class='tableOfContent' id='tocContent'/>
</div>
<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', () => new TableOfContents({from: document.querySelector('#postBody'), to: document.querySelector('#tocContent')}).generateToc() ); /*]]>*/</script>
</div>
<label class='fullClose' for='offtoc-menu'/>
</div>
</b:includable>
<!--[ Comment button ]-->
<b:includable id='post-commentButton'>
<!--[ Show/hide Comment ]-->
<label class='commentsButton button outline' for='forshow-comment'>
<b:if cond='data:post.numberOfComments > 0'>
<span expr:data-text='data:messages.joinTheConversation + " (" + data:post.numberOfComments + ")"'/>
<b:else/>
<span expr:data-text='data:messages.postAComment'/>
</b:if>
</label>
</b:includable>
<!--[ Comment disqus ]-->
<b:includable id='post-commentDisqus'>
<div class='commentDisqus' id='disqus_thread'>
<div class='commentsButton button outline' id='disqusshow' onclick='load_Comments()'>
<span expr:data-text='data:messages.joinTheConversation'/>
</div>
</div>
<script>/*<![CDATA[*/ var disqus_shortname = "jagodesain"; !function(){var e=document.createElement("script");e.defer=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}(); function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="jagodesain";!function(){var e=document.createElement("script");e.defer=!0,e.src="https://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()}; var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri); }; /*]]>*/</script>
</b:includable>
<!--[ Comment disqus on-scroll ]-->
<b:includable id='post-commentDisqusScroll'>
<div class='commentDisqus' id='disqus_thread'>
<div id='disqus_empty'/>
</div>
<!--[ Disqus script by bungfrangki.com, change 'jagodesain' with your disqus_shortname ]-->
<script>var disqus_blogger_current_url = "<data:blog.canonicalUrl/>"; if (!disqus_blogger_current_url.length) {disqus_blogger_current_url = "<data:blog.url/>";} var disqus_blogger_homepage_url = "<data:blog.canonicalHomepageUrl/>"; var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";</script>
<script>/*<![CDATA[*/ function load_disqus( disqus_shortname ) {var y = document.getElementById('disqus_empty'), t = document.getElementById('disqus_thread'), e = document.createElement('script'), d = document.createElement('script'), h = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]); if( t && y ) {e.async = true; e.src = '//' + disqus_shortname + '.disqus.com/embed.js'; h.appendChild(e); d.async = !0; d.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js'; h.appendChild(d); y.remove(); } }; window.addEventListener('scroll', function(e) {var currentScroll = document.scrollingElement.scrollTop; var t = document.getElementById('disqus_thread'); if( t && (currentScroll > t.getBoundingClientRect().top - 150) ) {load_disqus('jagodesain'); console.log('Disqus loaded.'); }}, false); var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri); }; /*]]>*/</script>
</b:includable>
<!--[ Comment FB ]-->
<b:includable id='post-commentFB'>
<div id='fb-root'/>
<script defer='defer' src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='commentFB'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
<script>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri); }; /*]]>*/</script>
</b:includable>
<!--[ Loadmore pagination ]-->
<b:includable id='post-paginationMore'>
<script> /*! Simple AJAX infinite scroll by Taufik Nurrohman dte.web.id */ !function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend"," "),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin"," "),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);
if(typeof InfiniteScroll !== "undefined") { var infinite_scroll = new InfiniteScroll ({ type: 0,
target: { posts: ".blogPosts", post: ".hentry", anchors: ".blogPager", anchor: ".olderLink"},
text: {
load: "<a class='jsLoad' expr:aria-label='data:messages.loadMorePosts' expr:data-text='data:messages.loadMorePosts' href='javascript:;'/>",
loading: "<div class='jsLoad wait noPost' expr:data-text='data:messages.loading'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg></div>",
loaded: "<div class='jsLoad noPost' expr:data-text='data:messages.noResultsFound'/>",
error: "<a class='jsLoad error' expr:aria-label='data:messages.loadMorePosts' expr:data-text='data:messages.moreEllipsis' href='javascript:;'/>"} }); }</script>
</b:includable>
<!--[ Single page condition ]-->
<b:includable id='post-singlePage'>
<style>/*<![CDATA[*/ .sidebar{display:none} footer .creditInner{max-width:780px; margin-right:auto;margin-left:auto} /*]]>*/</style>
</b:includable>
<!--[ SVG Icon ]-->
<b:includable id='close-icon'>
<!--[ Close icon ]-->
<svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
</b:includable>
<b:includable id='back-icon'>
<!--[ Back icon ]-->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</b:includable>
<b:includable id='forward-icon'>
<!--[ Forward icon ]-->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</b:includable>
<b:includable id='arow-down-icon'>
<!--[ Arrow down icon ]-->
<svg class='line down' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</b:includable>
<b:includable id='arow-up-icon'>
<!--[ Arrow up icon ]-->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</b:includable>
<b:includable id='arow-up-circle-icon'>
<!--[ Arrow up circle icon ]-->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 3.000000)'><path class='fill' d='M9.5,18 C3.00557739,18 0.456662548,17.5386801 0.0435259337,15.2033146 C-0.36961068,12.8679491 2.27382642,8.47741935 3.08841712,7.02846996 C5.81256986,2.18407813 7.66371927,0 9.5,0 C11.3362807,0 13.1874301,2.18407813 15.9115829,7.02846996 C16.7261736,8.47741935 19.3696107,12.8679491 18.9564741,15.2033146 C18.5443995,17.5386801 15.9944226,18 9.5,18 Z'/></g></svg>
</b:includable>
<!--[ Profile icon ]-->
<b:includable id='profile-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(5.000000, 2.400000)'><path d='M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z'/><path d='M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z'/></g></svg>
</b:includable>
<!--[ Profiles icon ]-->
<b:includable id='profiles-icon'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.749500, 2.549500)'><path d='M6.809,18.9067 C3.137,18.9067 9.41469125e-14,18.3517 9.41469125e-14,16.1277 C9.41469125e-14,13.9037 3.117,11.8997 6.809,11.8997 C10.481,11.8997 13.617,13.8847 13.617,16.1077 C13.617,18.3307 10.501,18.9067 6.809,18.9067 Z'/><path d='M6.809,8.728 C9.219,8.728 11.173,6.774 11.173,4.364 C11.173,1.954 9.219,-2.48689958e-14 6.809,-2.48689958e-14 C4.399,-2.48689958e-14 2.44496883,1.954 2.44496883,4.364 C2.436,6.766 4.377,8.72 6.778,8.728 L6.809,8.728 Z'/><path d='M14.0517,7.5293 C15.4547,7.1543 16.4887007,5.8753 16.4887007,4.3533 C16.4897,2.7653 15.3627,1.4393 13.8647,1.1323'/><path d='M14.7113,11.104 C16.6993,11.104 18.3973,12.452 18.3973,13.655 C18.3973,14.364 17.8123,15.092 16.9223,15.301'/></g></svg>
</b:includable>
<!--[ Location icon ]-->
<b:includable id='location-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 3.000000)'><path d='M10.010211,7.71050782 C10.010211,6.32923624 8.89097476,5.21 7.50970318,5.21 C6.12944724,5.21 5.010211,6.32923624 5.010211,7.71050782 C5.010211,9.09076376 6.12944724,10.21 7.50970318,10.21 C8.89097476,10.21 10.010211,9.09076376 10.010211,7.71050782 Z'/><path d='M7.49951162,18 C4.60148466,18 0,12.9586541 0,7.59863646 C0,3.40246316 3.357101,0 7.49951162,0 C11.6419223,0 15,3.40246316 15,7.59863646 C15,12.9586541 10.3985153,18 7.49951162,18 Z'/></g></svg>
</b:includable>
<!--[ Search icon ]-->
<b:includable id='search-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><circle class='fill' cx='9.76659044' cy='9.76659044' r='8.9885584'/><line x1='16.0183067' x2='19.5423342' y1='16.4851259' y2='20.0000001'/></g></svg>
</b:includable>
<!--[ Share icon ]-->
<b:includable id='share-icon'>
<svg class='line' viewBox='0 0 24 24'><path class='fill' d='M92.30583,264.72053a3.42745,3.42745,0,0,1-.37,1.57,3.51,3.51,0,1,1,0-3.13995A3.42751,3.42751,0,0,1,92.30583,264.72053Z' transform='translate(-83.28571 -252.73452)'/><circle class='fill' cx='18.48892' cy='5.49436' r='3.51099'/><circle class='fill' cx='18.48892' cy='18.50564' r='3.51099'/><line class='cls-3' x1='12.53012' x2='8.65012' y1='8.476' y2='10.416'/><line class='cls-3' x1='12.53012' x2='8.65012' y1='15.496' y2='13.556'/></svg>
</b:includable>
<!--[ Blogger icon ]-->
<b:includable id='blogger-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M22,15H20.44A3.91,3.91,0,0,0,21,13a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h6a4,4,0,0,0,4-4V16A1,1,0,0,0,22,15ZM11,13a2,2,0,0,1,2-2h4a2,2,0,0,1,0,4H11Zm10,6a2,2,0,0,1-2,2H13a2,2,0,0,1-2-2V17H21Z'/></svg>
</b:includable>
<!--[ Instagram icon ]-->
<b:includable id='instagram-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M22,3H10a7,7,0,0,0-7,7V22a7,7,0,0,0,7,7H22a7,7,0,0,0,7-7V10A7,7,0,0,0,22,3Zm5,19a5,5,0,0,1-5,5H10a5,5,0,0,1-5-5V10a5,5,0,0,1,5-5H22a5,5,0,0,1,5,5Z'/><path d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'/><circle cx='23' cy='9' r='1'/></svg>
</b:includable>
<!--[ Facebook icon ]-->
<b:includable id='facebook-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H17V18h4a1,1,0,0,0,0-2H17V14a2,2,0,0,1,2-2h2a1,1,0,0,0,0-2H19a4,4,0,0,0-4,4v2H12a1,1,0,0,0,0,2h3v9H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/></svg>
</b:includable>
<!--[ Twitter icon ]-->
<b:includable id='twitter-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M13.35,28A13.66,13.66,0,0,1,2.18,22.16a1,1,0,0,1,.69-1.56l2.84-.39A12,12,0,0,1,5.44,4.35a1,1,0,0,1,1.7.31,9.87,9.87,0,0,0,5.33,5.68,7.39,7.39,0,0,1,7.24-6.15,7.29,7.29,0,0,1,5.88,3H29a1,1,0,0,1,.9.56,1,1,0,0,1-.11,1.06L27,12.27c0,.14,0,.28-.05.41a12.46,12.46,0,0,1,.09,1.43A13.82,13.82,0,0,1,13.35,28ZM4.9,22.34A11.63,11.63,0,0,0,13.35,26,11.82,11.82,0,0,0,25.07,14.11,11.42,11.42,0,0,0,25,12.77a1.11,1.11,0,0,1,0-.26c0-.22.05-.43.06-.65a1,1,0,0,1,.22-.58l1.67-2.11H25.06a1,1,0,0,1-.85-.47,5.3,5.3,0,0,0-4.5-2.51,5.41,5.41,0,0,0-5.36,5.45,1.07,1.07,0,0,1-.4.83,1,1,0,0,1-.87.2A11.83,11.83,0,0,1,6,7,10,10,0,0,0,8.57,20.12a1,1,0,0,1,.37,1.05,1,1,0,0,1-.83.74Z'/></svg>
</b:includable>
<!--[ Telegram icon ]-->
<b:includable id='telegram-icon'>
<svg viewBox='0 0 32 32'><path d='M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z'/></svg>
</b:includable>
<!--[ Tumblr icon ]-->
<b:includable id='tumblr-icon'>
<svg viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/><path d='M20,19a1,1,0,0,0-1,1,1,1,0,0,1-1,1H17a1,1,0,0,1-1-1V15h3a1,1,0,0,0,0-2H16V10a1,1,0,0,0-2,0v3H12a1,1,0,0,0,0,2h2v5a3,3,0,0,0,3,3h1a3,3,0,0,0,3-3A1,1,0,0,0,20,19Z'/></svg>
</b:includable>
<!--[ line icon ]-->
<b:includable id='line-icon'>
<svg viewBox='0 0 32 32'><path d='M16,2C8.28,2,2,7.38,2,14c0,5.48,4.34,10.24,10.44,11.6L12,28.87a1,1,0,0,0,.37.91A1,1,0,0,0,13,30a1,1,0,0,0,.35-.06C14,29.68,30,23.58,30,14,30,7.38,23.72,2,16,2ZM14.22,27.4l.33-2.47a1,1,0,0,0-.83-1.12C8.09,22.91,4,18.78,4,14,4,8.49,9.38,4,16,4S28,8.49,28,14C28,20.61,18.14,25.66,14.22,27.4Z'/><path d='M10,15.25H8.75V12a.75.75,0,0,0-1.5,0v4a.76.76,0,0,0,.75.75h2a.75.75,0,0,0,0-1.5Z'/><path d='M24,12.75a.75.75,0,0,0,0-1.5H22a.76.76,0,0,0-.75.75v4a.76.76,0,0,0,.75.75h2a.75.75,0,0,0,0-1.5H22.75v-.5H24a.75.75,0,0,0,0-1.5H22.75v-.5Z'/><path d='M13,11.25a.76.76,0,0,0-.75.75v4a.75.75,0,0,0,1.5,0V12A.76.76,0,0,0,13,11.25Z'/><path d='M19,11.25a.76.76,0,0,0-.75.75v1.75l-1.65-2.2a.75.75,0,0,0-1.35.45v4a.75.75,0,0,0,1.5,0V14.25l1.65,2.2a.75.75,0,0,0,.6.3.67.67,0,0,0,.24,0,.75.75,0,0,0,.51-.71V12A.76.76,0,0,0,19,11.25Z'/></svg>
</b:includable>
<!--[ Youtube icon ]-->
<b:includable id='youtube-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'/></svg>
</b:includable>
<!--[ LinkedIn icon ]-->
<b:includable id='linkedIn-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z'/><path d='M11,14a1,1,0,0,0-1,1v6a1,1,0,0,0,2,0V15A1,1,0,0,0,11,14Z'/><path d='M19,13a4,4,0,0,0-4,4v4a1,1,0,0,0,2,0V17a2,2,0,0,1,4,0v4a1,1,0,0,0,2,0V17A4,4,0,0,0,19,13Z'/><circle cx='11' cy='11' r='1'/></svg>
</b:includable>
<!--[ Whatsapp icon ]-->
<b:includable id='whatsapp-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></svg>
</b:includable>
<!--[ Pinterest icon ]-->
<b:includable id='pinterest-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26a12,12,0,0,1-3.81-.63l1.2-4.81A7.93,7.93,0,0,0,16,23a8.36,8.36,0,0,0,1.4-.12,8,8,0,1,0-9.27-6.49,1,1,0,0,0,2-.35,6,6,0,1,1,3.79,4.56L15,16.24A1,1,0,1,0,13,15.76l-2.7,10.81A12,12,0,1,1,16,28Z'/></svg>
</b:includable>
<!--[ Circle icon ]-->
<b:includable id='circle-icon'>
<svg class='c-1' viewBox='0 0 32 32'><path d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/><path d='M16,9.5A6.5,6.5,0,1,0,22.5,16,6.51,6.51,0,0,0,16,9.5Zm0,11A4.5,4.5,0,1,1,20.5,16,4.51,4.51,0,0,1,16,20.5Z'/></svg>
</b:includable>
<!--[ Home icon ]-->
<b:includable id='home-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.400000, 2.000000)'><line x1='6.6787' x2='12.4937' y1='14.1354' y2='14.1354'/><path class='fill' d='M1.24344979e-14,11.713 C1.24344979e-14,6.082 0.614,6.475 3.919,3.41 C5.365,2.246 7.615,0 9.558,0 C11.5,0 13.795,2.235 15.254,3.41 C18.559,6.475 19.172,6.082 19.172,11.713 C19.172,20 17.213,20 9.586,20 C1.959,20 1.24344979e-14,20 1.24344979e-14,11.713 Z'/></g></svg>
</b:includable>
<!--[ Home alt icon ]-->
<b:includable id='home-alt-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.400000, 2.000000)'><path class='fill' d='M1.24344979e-14,11.713 C1.24344979e-14,6.082 0.614,6.475 3.919,3.41 C5.365,2.246 7.615,0 9.558,0 C11.5,0 13.795,2.235 15.254,3.41 C18.559,6.475 19.172,6.082 19.172,11.713 C19.172,20 17.213,20 9.586,20 C1.959,20 1.24344979e-14,20 1.24344979e-14,11.713 Z'/></g></svg>
</b:includable>
<!--[ Folder icon ]-->
<b:includable id='folder-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'/></g></svg>
</b:includable>
<!--[ Message icon ]-->
<b:includable id='message-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.452080, 2.851980)'><path d='M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017'/><path d='M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z'/></g></svg>
</b:includable>
<!--[ Paper icon ]-->
<b:includable id='paper-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.649800, 2.749900)'><line x1='10.6555' x2='5.2555' y1='12.6999' y2='12.6999'/><line x1='8.6106' x2='5.2546' y1='8.6886' y2='8.6886'/><path d='M16.51,5.55 L10.84,0.15 C10.11,0.05 9.29,0 8.39,0 C2.1,0 -1.95399252e-14,2.32 -1.95399252e-14,9.25 C-1.95399252e-14,16.19 2.1,18.5 8.39,18.5 C14.69,18.5 16.79,16.19 16.79,9.25 C16.79,7.83 16.7,6.6 16.51,5.55 Z'/><path d='M10.2844,0.0827 L10.2844,2.7437 C10.2844,4.6017 11.7904,6.1067 13.6484,6.1067 L16.5994,6.1067'/></g></svg>
</b:includable>
<!--[ Document icon ]-->
<b:includable id='document-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.610000, 2.750100)'><line x1='11.9858' x2='4.7658' y1='12.9463' y2='12.9463'/><line x1='11.9858' x2='4.7658' y1='9.1865' y2='9.1865'/><line x1='7.521' x2='4.766' y1='5.4272' y2='5.4272'/><path d='M7.63833441e-14,9.25 C7.63833441e-14,16.187 2.098,18.5 8.391,18.5 C14.685,18.5 16.782,16.187 16.782,9.25 C16.782,2.313 14.685,0 8.391,0 C2.098,0 7.63833441e-14,2.313 7.63833441e-14,9.25 Z'/></g></svg>
</b:includable>
<!--[ Buy icon ]-->
<b:includable id='buy-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.650200, 2.850200)'><path d='M2.044,3.58024493 C7.3705141,2.243 13.9926469,2.32498848 15.5231061,4.06777179 C17.0535652,5.8105551 17.0220031,11.638 15.2330031,13.237 C13.4450031,14.836 5.68,14.988 3.22,13.237 C0.621,11.386 2.129,5.692 2.044,2.243 C2.095,0.313 -1.13686838e-13,0 -1.13686838e-13,0'/><line x1='10.5059' x2='13.2789' y1='7.8696' y2='7.8696'/><path d='M3.6138,17.2773 C3.9138,17.2773 4.1578,17.5213 4.1578,17.8213 C4.1578,18.1223 3.9138,18.3663 3.6138,18.3663 C3.3128,18.3663 3.0688,18.1223 3.0688,17.8213 C3.0688,17.5213 3.3128,17.2773 3.6138,17.2773 Z'/><path d='M13.9453,17.2773 C14.2463,17.2773 14.4903,17.5213 14.4903,17.8213 C14.4903,18.1223 14.2463,18.3663 13.9453,18.3663 C13.6453,18.3663 13.4013,18.1223 13.4013,17.8213 C13.4013,17.5213 13.6453,17.2773 13.9453,17.2773 Z'/></g></svg>
</b:includable>
<!--[ Download icon ]-->
<b:includable id='download-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='9.8791' x2='9.8791' y1='12.791' y2='0.75'/><polyline points='12.7951 9.8642 9.8791 12.7922 6.9631 9.8642'/><path d='M14.3703,5.2587 C17.9493,5.5887 19.2503,6.9287 19.2503,12.2587 C19.2503,19.3587 16.9393,19.3587 10.0003,19.3587 C3.0593,19.3587 0.7503,19.3587 0.7503,12.2587 C0.7503,6.9287 2.0503,5.5887 5.6303,5.2587'/></g></svg>
</b:includable>
<!--[ Lock icon ]-->
<b:includable id='lock-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M12.9709,7.4033 L12.9709,5.2543 C12.9399,2.7353 10.8719,0.7193 8.3539,0.7503 C5.8869,0.7813 3.8919,2.7673 3.8499,5.2343 L3.8499,7.4033'/><line x1='8.4103' x2='8.4103' y1='12.1562' y2='14.3772'/><path d='M8.4103,6.8242 C2.6653,6.8242 0.7503,8.3922 0.7503,13.0952 C0.7503,17.7992 2.6653,19.3672 8.4103,19.3672 C14.1553,19.3672 16.0713,17.7992 16.0713,13.0952 C16.0713,8.3922 14.1553,6.8242 8.4103,6.8242 Z'/></g></svg>
</b:includable>
<!--[ Shield done icon ]-->
<b:includable id='shield-done-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.000000)'><path d='M8.4845,19.6057 C10.8195,19.6057 16.1565,17.2837 16.1565,10.8787 C16.1565,4.4747 16.4345,3.9737 15.8195,3.3577 C15.2035,2.7417 11.9935,0.7507 8.4845,0.7507 C4.9755,0.7507 1.7655,2.7417 1.1505,3.3577 C0.5345,3.9737 0.8125,4.4747 0.8125,10.8787 C0.8125,17.2837 6.1505,19.6057 8.4845,19.6057 Z'/><polyline points='5.8859 9.8748 7.7779 11.7698 11.6759 7.8698'/></g></svg>
</b:includable>
<!--[ Plus icon ]-->
<b:includable id='plus-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.300000, 2.300000)'><line x1='9.73684179' x2='9.73684179' y1='6.162632' y2='13.3110531'/><line x1='13.3146315' x2='6.158842' y1='9.73684179' y2='9.73684179'/><path d='M-3.55271368e-14,9.73684211 C-3.55271368e-14,2.43473684 2.43473684,2.13162821e-14 9.73684211,2.13162821e-14 C17.0389474,2.13162821e-14 19.4736842,2.43473684 19.4736842,9.73684211 C19.4736842,17.0389474 17.0389474,19.4736842 9.73684211,19.4736842 C2.43473684,19.4736842 -3.55271368e-14,17.0389474 -3.55271368e-14,9.73684211 Z'/></g></svg>
</b:includable>
<!--[ Category icon ]-->
<b:includable id='category-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(3.000000, 3.000000)'><path class='fill' d='M18.00036,3.6738 C18.00036,5.7024 16.35516,7.3476 14.32656,7.3476 C12.29796,7.3476 10.65366,5.7024 10.65366,3.6738 C10.65366,1.6452 12.29796,-6.39488462e-15 14.32656,-6.39488462e-15 C16.35516,-6.39488462e-15 18.00036,1.6452 18.00036,3.6738 Z'/><path class='fill' d='M7.3467,3.6738 C7.3467,5.7024 5.7024,7.3476 3.6729,7.3476 C1.6452,7.3476 4.79616347e-15,5.7024 4.79616347e-15,3.6738 C4.79616347e-15,1.6452 1.6452,-6.39488462e-15 3.6729,-6.39488462e-15 C5.7024,-6.39488462e-15 7.3467,1.6452 7.3467,3.6738 Z'/><path class='fill' d='M18.00036,14.26194 C18.00036,16.29054 16.35516,17.93484 14.32656,17.93484 C12.29796,17.93484 10.65366,16.29054 10.65366,14.26194 C10.65366,12.23334 12.29796,10.58814 14.32656,10.58814 C16.35516,10.58814 18.00036,12.23334 18.00036,14.26194 Z'/><path class='fill' d='M7.3467,14.26194 C7.3467,16.29054 5.7024,17.93484 3.6729,17.93484 C1.6452,17.93484 4.79616347e-15,16.29054 4.79616347e-15,14.26194 C4.79616347e-15,12.23334 1.6452,10.58814 3.6729,10.58814 C5.7024,10.58814 7.3467,12.23334 7.3467,14.26194 Z'/></g></svg>
</b:includable>
<!--[ Moon icon ]-->
<b:includable id='moon-icon'>
<svg class='line' viewBox='0 0 24 24'><path class='fill' d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'/></svg>
</b:includable>
<!--[ Chat icon ]-->
<b:includable id='chat-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path class='fill' d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg>
</b:includable>
<!--[ Chatting icon ]-->
<b:includable id='chatting-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'/><line x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'/><line x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'/><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg>
</b:includable>
<!--[ Font icon ]-->
<b:includable id='font-icon'>
<svg class='line' viewBox='0 0 24 24'><path class='fill' d='M5.12,14L7.5,7.67L9.87,14M6.5,5L1,19H3.25L4.37,16H10.62L11.75,19H14L8.5,5H6.5M18,7L13,12.07L14.41,13.5L17,10.9V17H19V10.9L21.59,13.5L23,12.07L18,7Z'/></svg>
</b:includable>
<!--[ Volume down icon ]-->
<b:includable id='volume-down-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.000000, 5.000000)'><path d='M14.6559111,3.63457778 C15.9092444,5.90568889 15.9092444,8.67724444 14.6559111,10.9403556'/><path d='M0.6672,7.28728889 C0.663644444,8.50595556 0.6672,9.93528889 1.67342222,10.7895111 C2.67964444,11.6446222 3.47875556,11.2917333 4.78097778,11.7201778 C6.08408889,12.1495111 7.90897778,14.7966222 9.92497778,13.6010667 C11.0147556,12.8268444 11.5285333,11.3655111 11.5285333,7.28728889 C11.5285333,3.20906667 11.0378667,1.76373333 9.92497778,0.973511111 C7.90897778,-0.221155556 6.08408889,2.42595556 4.78097778,2.8544 C3.47875556,3.28373333 2.67964444,2.93084444 1.67342222,3.78506667 C0.6672,4.63928889 0.663644444,6.06862222 0.6672,7.28728889 Z'/></g></svg>
</b:includable>
<!--[ Edit square icon ]-->
<b:includable id='edit-square-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path d='M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001'/><path d='M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z'/><line x1='13.009' x2='16.604' y1='3.8008' y2='6.9838'/></g></svg>
</b:includable>
<!--[ Hearth icon ]-->
<b:includable id='hearth-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.550170, 3.550158)'><path d='M0.371729633,8.89614246 C-0.701270367,5.54614246 0.553729633,1.38114246 4.07072963,0.249142462 C5.92072963,-0.347857538 8.20372963,0.150142462 9.50072963,1.93914246 C10.7237296,0.0841424625 13.0727296,-0.343857538 14.9207296,0.249142462 C18.4367296,1.38114246 19.6987296,5.54614246 18.6267296,8.89614246 C16.9567296,14.2061425 11.1297296,16.9721425 9.50072963,16.9721425 C7.87272963,16.9721425 2.09772963,14.2681425 0.371729633,8.89614246 Z'/><path d='M13.23843,4.013842 C14.44543,4.137842 15.20043,5.094842 15.15543,6.435842'/></g></svg>
</b:includable>
<!--[ Tag icon ]-->
<b:includable id='tag-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><line x1='7' x2='7.01' y1='7' y2='7'/></svg>
</b:includable>
<!--[ Bookmark icon ]-->
<b:includable id='bookmark-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.500000, 2.500000)'><path d='M7.47024319,0 C1.08324319,0 0.00424318741,0.932 0.00424318741,8.429 C0.00424318741,16.822 -0.152756813,19 1.44324319,19 C3.03824319,19 5.64324319,15.316 7.47024319,15.316 C9.29724319,15.316 11.9022432,19 13.4972432,19 C15.0932432,19 14.9362432,16.822 14.9362432,8.429 C14.9362432,0.932 13.8572432,0 7.47024319,0 Z'/></g></svg>
</b:includable>
<!--[ Feather icon ]-->
<b:includable id='feather-icon'>
<svg class='line' viewBox='0 0 24 24'><path d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/><line x1='16' x2='2' y1='8' y2='22'/><line x1='17' x2='9' y1='15' y2='15'/></svg>
</b:includable>
<!--[ Calendar icon ]-->
<b:includable id='calendar-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.749800, 2.050100)'><path d='M-1.0658141e-14,10.7255 C-1.0658141e-14,3.7695 2.319,1.4515 9.274,1.4515 C16.23,1.4515 18.549,3.7695 18.549,10.7255 C18.549,17.6815 16.23,19.9995 9.274,19.9995 C2.319,19.9995 -1.0658141e-14,17.6815 -1.0658141e-14,10.7255 Z'/><line x1='0.2754' x2='18.2834' y1='7.2739' y2='7.2739'/><line x1='13.2832' x2='13.2832' y1='2.84217094e-14' y2='3.262'/><line x1='5.2749' x2='5.2749' y1='2.84217094e-14' y2='3.262'/></g></svg>
</b:includable>
<!--[ Time square icon ]-->
<b:includable id='time-square-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path d='M0.7501,10.0001 C0.7501,16.9371 3.0631,19.2501 10.0001,19.2501 C16.9371,19.2501 19.2501,16.9371 19.2501,10.0001 C19.2501,3.0631 16.9371,0.7501 10.0001,0.7501 C3.0631,0.7501 0.7501,3.0631 0.7501,10.0001 Z'/><polyline points='13.3902 12.0181 9.9992 9.9951 9.9992 5.6341'/></g></svg>
</b:includable>
<!--[ Image icon ]-->
<b:includable id='image-icon'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path d='M4.0706,14.459 C4.0706,14.459 4.8826,12.822 6.0646,12.822 C7.2466,12.822 7.8506,14.197 9.1606,14.197 C10.4696,14.197 11.9386,10.749 13.4226,10.749 C14.9046,10.749 15.9706,13.14 15.9706,13.14'/><path d='M8.1393,7.1049 C8.1393,7.9649 7.4423,8.6629 6.5813,8.6629 C5.7213,8.6629 5.0243,7.9649 5.0243,7.1049 C5.0243,6.2449 5.7213,5.5469 6.5813,5.5469 C7.4423,5.5479 8.1393,6.2449 8.1393,7.1049 Z'/><path d='M0.7503,10.0001 C0.7503,16.9371 3.0633,19.2501 10.0003,19.2501 C16.9373,19.2501 19.2503,16.9371 19.2503,10.0001 C19.2503,3.0631 16.9373,0.7501 10.0003,0.7501 C3.0633,0.7501 0.7503,3.0631 0.7503,10.0001 Z'/></g></svg>
</b:includable>
<!--[ Filter icon ]-->
<b:includable id='filter-icon'>
<!--<svg class='line' viewBox='0 0 24 24'><g transform='translate(4.000000, 4.000000)'><line x1='7.14366842' x2='0.671142105' y1='13.8828263' y2='13.8828263'/><path d='M11.2049684,13.8837211 C11.2049684,15.9255105 11.8858632,16.6055105 13.9267579,16.6055105 C15.9676526,16.6055105 16.6485474,15.9255105 16.6485474,13.8837211 C16.6485474,11.8419316 15.9676526,11.1619316 13.9267579,11.1619316 C11.8858632,11.1619316 11.2049684,11.8419316 11.2049684,13.8837211 Z'/><line x1='10.1765579' x2='16.6481895' y1='3.39418421' y2='3.39418421'/><path d='M6.11525789,3.39284211 C6.11525789,1.35194737 5.43436316,0.671052632 3.39346842,0.671052632 C1.35167895,0.671052632 0.670784211,1.35194737 0.670784211,3.39284211 C0.670784211,5.43463158 1.35167895,6.11463158 3.39346842,6.11463158 C5.43436316,6.11463158 6.11525789,5.43463158 6.11525789,3.39284211 Z'/></g></svg>-->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.900000, 4.600000)'><line x1='4.0791' x2='4.0791' y1='0.0013' y2='12.6193'/><path d='M-2.57571742e-14,4.1 C-2.57571742e-14,4.1 2.169,1.0658141e-14 4.078,1.0658141e-14 C5.986,1.0658141e-14 8.156,4.1 8.156,4.1'/><line x1='14.0059' x2='14.0059' y1='14.8275' y2='2.2095'/><path d='M18.085,10.7284 C18.085,10.7284 15.915,14.8284 14.007,14.8284 C12.099,14.8284 9.929,10.7284 9.929,10.7284'/></g></svg>
</b:includable>
<!--[ Reply icon ]-->
<b:includable id='reply-icon'>
<svg class='line' viewBox='0 0 24 24'><polyline points='15 14 20 9 15 4'/><path d='M4 20v-7a4 4 0 0 1 4-4h12'/></svg>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>
<b:if cond='!data:view.isError and data:view.isPost and data:view.url != data:view.url params { amp: "1" }'>
<script>/*<![CDATA[*/ /* Table of Content, Credit: blustemy.io/creating-a-table-of-contents-in-javascript */
class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; }; static generateId(headingElement) { return headingElement.textContent.replace(/\s+/g, "_"); }; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if (!headingElement.id) { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = `#${headingElement.id}`; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } } /*]]>*/</script>
</b:if>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "<data:blog.homepageUrl.canonical/>",
"name": "<data:blog.title/>",
"alternateName": "<data:blog.title/>",
"potentialAction": {
"@type": "SearchAction",
"target": "<data:blog.homepageUrl.canonical/>search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!--[ </head> close ]-->
<!--<head/>--></head>
<!--[ <body> open ]-->
<body class='' id='mainContent'>
<b:class cond='data:view.url == data:view.url params { amp: "1" }' name='ampMode'/>
<b:class cond='data:blog.languageDirection == "rtl"' name='rtlMode'/>
<b:class cond='data:view.isMultipleItems' name='onIndex'/>
<b:class cond='data:view.isMultipleItems != data:view.isHomepage' name='onBlog'/>
<b:class cond='data:view.isHomepage' name='onHome'/>
<b:class cond='data:view.isSingleItem' name='onItem'/>
<b:class cond='data:view.isPage' name='onPage'/>
<b:class cond='data:view.isPost' name='onPost'/>
<b:class cond='data:view.isError' name='error404'/>
<b:if cond='!data:view.isError'>
<!--[ Adsense script placement ]-->
<!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->
<b:if cond='data:blog.analyticsAccountNumber'>
<!--[ AMP Analytics ]-->
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": { "account": "<data:blog.analyticsAccountNumber/>" },
"triggers": {
"trackPageview": { "on": "visible", "request": "pageview" }
}
}
</script>
</amp-analytics>
</b:if>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<script>/*<![CDATA[*/ (localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('#mainContent').classList.add('darkMode') : document.querySelector('#mainContent').classList.remove('darkMode') /*]]>*/</script>
</b:if>
<!--[ Active function ]-->
<input class='profInput hidden' id='offprofile-box' type='checkbox'/>
<input class='navInput hidden' id='offnav-input' type='checkbox'/>
</b:if>
<b:tag class='mainWrapper' cond='!data:view.isError' name='div'>
<b:if cond='!data:view.isError'>
<!--[ Header section ]-->
<header class='header' id='header'>
<!--[ Header Notification ]-->
<b:section cond='!data:view.isPreview' id='header-notif' maxwidgets='1' showaddelement='false'>
<b:widget cond='data:view.url != data:view.url params { amp: "1" }' id='HTML0' locked='true' title='Header Notification' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'><!--[ Your content here ]-->
<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit.-->
<!--[ Alternatif content with button link ]-->
<div class='notifAlt'>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
<a href='#' target='_blank' rel='noopener'>Download</a>
</div></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<input class='notifInput hidden' id='offnotif-box' type='checkbox'/>
<div class='notifContent'>
<div class='notifText'><data:content/></div>
<label for='offnotif-box'><b:include name='close-icon'/></label>
</div>
</b:includable>
</b:widget>
<b:widget cond='!data:view.isLayoutMode and data:view.url == data:view.url params { amp: "1" }' id='HTML99' locked='true' title='AMP Notification' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<!--[ Edit this widget via HTML template ]-->]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<input class='notifInput hidden' id='offnotifAMP-box' type='checkbox'/>
<div class='notifContent'>
<div class='notifText'>You're viewing AMP page. <a expr:href='data:view.url.canonical'><u>View non-AMP</u></a></div>
<label for='offnotifAMP-box'><b:include name='close-icon'/></label>
</div>
</b:includable>
</b:widget>
</b:section>
<!--[ Header content ]-->
<b:tag class='headerContent' name='div'>
<b:tag class='headerDiv headerLeft' cond='!data:view.isLayoutMode' name='div'>
<b:if cond='!data:view.isLayoutMode'>
<!--[ Header button and icon ]-->
<div class='headerIcon'>
<!--[ Nav button ]-->
<label aria-label='Menu Navigation' class='navMenu' for='offnav-input'>
<!--<span class='ham svg-1'><span><i/></span></span>-->
<svg class='line svg-1' viewBox='0 0 24 24'><line x1='3' x2='21' y1='12' y2='12'/><line x1='3' x2='21' y1='6' y2='6'/><line x1='3' x2='21' y1='18' y2='18'/></svg>
<svg class='line svg-2' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</label>
<b:if cond='data:view.isSingleItem'>
<a aria-label='Homepage' class='navMenu' expr:data-text='data:messages.home' expr:href='data:blog.homepageUrl.canonical' role='button'><b:include name='back-icon'/></a>
</b:if>
</div>
</b:if>
<!--[ Header widget ]-->
<b:section id='header-widget' maxwidgets='1' showaddelement='false'>
<b:widget id='Header1' locked='true' title='Blog Nu Aing (Header)' type='Header' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>-1</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title'/>
<b:include cond='data:imagePlacement != "REPLACE"' name='description'/>
<b:include cond='data:imagePlacement == "BEHIND"' name='behindImageStyle'/>
</b:includable>
<b:includable id='behindImageStyle'>
<b:if cond='data:sourceUrl'>
<b:include cond='data:this.image' data='{image: data:this.image, selector: ".Header"}' name='responsiveImageStyle'/>
</b:if>
</b:includable>
<b:includable id='description'>
<b:if cond='data:this.description'>
<div class='headerDesc hidden'><data:this.description/></div>
</b:if>
</b:includable>
<b:includable id='image'>
<!--[ Header image ]-->
<a expr:href='data:blog.homepageUrl.canonical'>
<amp-img expr:alt='data:title' expr:height='data:height' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title' expr:width='data:width' layout='intrinsic'/>
<noscript><img expr:alt='data:title' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title'/></noscript>
</a>
<b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>
</b:includable>
<b:includable id='title'>
<!--[ Header title ]-->
<div class='headerInner'>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:tag expr:name='!data:view.isSingleItem ? "h1" : "h2"'>
<b:tag class='headerTitle' expr:name='!data:view.isHomepage ? "a" : "span"'>
<b:attr cond='!data:view.isHomepage' expr:value='data:blog.homepageUrl.canonical' name='href'/>
<data:title/>
</b:tag>
</b:tag>
</div>
</b:includable>
</b:widget>
</b:section>
</b:tag>
<b:tag class='headerDiv headerRight' cond='!data:view.isLayoutMode' name='div'>
<!--[ Header Search ]-->
<b:if cond='!data:view.isLayoutMode'>
<div class='headerSearch'>
<!--[ Search Form ]-->
<form class='searchForm' expr:action='data:blog.homepageUrl.canonical path "search"' method='get' target='_top'>
<input aria-label='Search' autocomplete='off' expr:placeholder='data:messages.search + "..."' id='searchInput' name='q' type='text'/>
<button aria-label='Search button' class='searchButton' type='submit'><b:include name='search-icon'/></button>
<button aria-label='Search close' class='close' type='reset'><b:include name='close-icon'/></button>
<span class='fullClose search'/>
</form>
</div>
</b:if>
<!--[ Header button and icon ]-->
<b:tag class='headerIcon' cond='!data:view.isLayoutMode' name='div'>
<b:if cond='!data:view.isLayoutMode'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<!--[ Dark mode button ]-->
<span aria-label='Dark' class='navDark' data-text='Dark' onclick='darkMode()' role='button'><i/></span>
<b:else/>
<!--[ AMP button ]-->
<a expr:href='data:view.url.canonical'><svg class='line' viewBox='0 0 24 24'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg></a>
</b:if>
<!--[ Search button ]-->
<label aria-label='Search' class='navSearch' for='searchInput'>
<b:include name='search-icon'/>
</label>
<b:if cond='data:view.isHomepage and data:view.url != data:view.url params { amp: "1" }'>
<!--[ Profile button ]-->
<label aria-label='profile' class='navProfile' for='offprofile-box'>
<b:include name='profile-icon'/>
</label>
</b:if>
</b:if>
<b:if cond='data:view.isHomepage and data:view.url != data:view.url params { amp: "1" }'>
<!--[ Profile widget ]-->
<b:tag class='headerProfile' cond='!data:view.isLayoutMode' name='div'>
<b:section cond='data:view.isHomepage' id='profile-widget' maxwidgets='2' showaddelement='false'>
<b:widget id='Profile00' locked='true' title='Author profile' type='Profile' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showaboutme'>true</b:widget-setting>
<b:widget-setting name='showlocation'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='profileHeader'>
<label for='offprofile-box'>
<b:attr cond='data:team' name='data-text' value='All authors/contributors'/>
<b:attr cond='!data:team' name='data-text' value='Author'/>
<b:include name='back-icon'/>
</label>
</div>
<b:include name='content'/>
</b:includable>
<b:includable id='authorProfileImage'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div class='profileImg lazy' expr:data-bg='resizeImage(data:authorPhoto.image, 60)'/>
<b:else/>
<div class='profileImg'>
<amp-img expr:src='resizeImage(data:authorPhoto.image, 60)' height='1' layout='responsive' width='1'>
<b:attr cond='data:team' expr:value='data:display-name' name='alt'/>
<b:attr cond='!data:team' expr:value='data:displayname' name='alt'/>
</amp-img>
</div>
</b:if>
</b:includable>
<b:includable id='content'>
<b:if cond='data:team'>
<div class='widget-content team'>
<b:include name='teamProfile'/>
</div>
<b:else/>
<div class='widget-content solo'>
<b:class cond='data:showlocation and data:location != ""' name='hasLocation'/>
<b:include name='userProfile'/>
</div>
</b:if>
</b:includable>
<b:includable id='defaultProfileImage'>
<div class='defaultAvatar imgThumb'>
<b:include name='profile-icon'/>
</div>
</b:includable>
<b:includable id='profileImage'>
<b:if cond='data:authorPhoto.image'>
<b:include name='authorProfileImage'/>
<b:else/>
<b:include name='defaultProfileImage'/>
</b:if>
</b:includable>
<b:includable id='teamProfile'>
<ul>
<b:loop index='team' values='data:authors' var='author'>
<li>
<div class='teamMember'>
<b:include data='author' name='teamProfileMember'/>
</div>
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='teamProfileLink'>
<a class='profileLink' expr:href='data:userUrl' rel='noreferrer' target='_blank'>
<div class='profileImage'><b:include name='profileImage'/></div>
<div class='profileName'><data:display-name/></div>
</a>
</b:includable>
<b:includable id='teamProfileMember'>
<div class='profileLink'>
<div class='profileImage'><b:include name='profileImage'/></div>
<div class='profileName'><data:display-name/></div>
</div>
</b:includable>
<b:includable id='userGoogleProfile'/>
<b:includable id='userLocation'>
<div class='profileData location' expr:data-text='data:location'>
<b:include name='location-icon'/>
</div>
</b:includable>
<b:includable id='userProfile'>
<b:include name='userProfileImage'/>
<b:include name='userProfileInfo'/>
</b:includable>
<b:includable id='userProfileData'>
<b:include name='userProfileLink'/>
</b:includable>
<b:includable id='userProfileImage'>
<div class='profileImage'>
<b:include name='profileImage'/>
</div>
</b:includable>
<b:includable id='userProfileInfo'>
<div class='profileInfo'>
<b:include name='userProfileData'/>
<b:include cond='data:aboutme != ""' name='userProfileText'/>
<b:include cond='data:showlocation and data:location != ""' name='userLocation'/>
</div>
</b:includable>
<b:includable id='userProfileLink'>
<div class='profileLink'><data:displayname/></div>
</b:includable>
<b:includable id='userProfileText'>
<div class='profileText'><b:eval expr='data:aboutme snippet {length: 80, links: true, linebreaks: false}'/></div>
</b:includable>
<b:includable id='viewProfileLink'/>
</b:widget>
<b:widget id='LinkList001' locked='true' title='Social Media Link' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='text-3'>Youtube</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
<b:widget-setting name='text-5'>Pinterest</b:widget-setting>
<b:widget-setting name='text-4'>LinkedIn</b:widget-setting>
<b:widget-setting name='text-6'>Whatsapp</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='socialLink'>
<b:loop index='soc' values='data:links' var='link'>
<b:if cond='data:soc <= 5'>
<li>
<a class='link' expr:aria-label='data:link.name' expr:href='data:link.target'>
<b:if cond='data:link.name == "Instagram"'>
<b:include name='instagram-icon'/>
<b:elseif cond='data:link.name == "Facebook"'/>
<b:include name='facebook-icon'/>
<b:elseif cond='data:link.name == "Twitter"'/>
<b:include name='twitter-icon'/>
<b:elseif cond='data:link.name == "Youtube"'/>
<b:include name='youtube-icon'/>
<b:elseif cond='data:link.name == "LinkedIn"'/>
<b:include name='linkedIn-icon'/>
<b:elseif cond='data:link.name == "Whatsapp"'/>
<b:include name='whatsapp-icon'/>
<b:elseif cond='data:link.name == "Pinterest"'/>
<b:include name='pinterest-icon'/>
<b:else/>
<b:include name='circle-icon'/>
</b:if>
</a>
</li>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</b:tag>
<b:tag class='fullClose closeProfile' cond='!data:view.isLayoutMode' for='offprofile-box' name='label'/>
</b:if>
</b:tag>
</b:tag>
</b:tag>
</header>
<b:tag class='mainContent' cond='data:view.isLayoutMode' name='div'>
<!--[ Navigation section ]-->
<div class='mainMenu'>
<b:section id='main-menu' maxwidgets='4' showaddelement='false'>
<b:widget id='HTML000' locked='true' title='Navigation Menu' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<!--[ You can edit this widget in HTML template ]-->]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<ul class='htmlMenu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<!--[ Close button ]-->
<li class='close'>
<label class='link' for='offnav-input'>
<b:include name='back-icon'/>
<span class='name' data-text='Back'/>
</label>
</li>
<b:if cond='!data:view.isHomepage'>
<!--[ Home link ]-->
<li class='homeLink'>
<a class='link' expr:href='data:blog.homepageUrl.canonical' itemprop='url'>
<b:include name='home-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'><data:messages.home/></span>
</a>
</li>
</b:if>
<!--[ Dropdown style 1 with checked atribut ]-->
<li class='dropDown'>
<input class='dropMenu hidden' id='offdropMenu1' name='dropDown' type='checkbox'/>
<label class='link' for='offdropMenu1'>
<!--[ Icon ]-->
<b:include name='folder-icon'/>
<!--[ Title navigation ]-->
<span class='name'>Sub menu</span>
<b:include name='arow-down-icon'/>
</label>
<ul>
<!--[ Change attribute href='#' to add url ]-->
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 02</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 04</a></li>
</ul>
</li>
<!--[ Dropdown style 1 with checked atribut ]-->
<li class='dropDown break'>
<input class='dropMenu hidden' id='offdropMenu2' name='dropDown' type='checkbox'/>
<label class='link' for='offdropMenu2'>
<!--[ Icon ]-->
<b:include name='folder-icon'/>
<!--[ Title navigation ]-->
<span class='name'>Sub menu</span>
<b:include name='arow-down-icon'/>
</label>
<ul>
<!--[ Change attribute href='#' to add url ]-->
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 05</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 06</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 07</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 08</a></li>
</ul>
</li>
<!--[ Standar menu ]-->
<li>
<!--[ Change attribute href='#' to add url ]-->
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='profiles-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'>About</span>
</a>
</li>
<!--[ Standar menu ]-->
<li class='break'>
<!--[ Change attribute href='#' to add url ]-->
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='message-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'>Contact</span>
</a>
</li>
<!--[ Standar menu ]-->
<li>
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='folder-icon'/>
<!--[ Title navigation ]-->
<span class='name new' itemprop='name'>Custom Menu 01</span>
</a>
</li>
<!--[ Standar menu ]-->
<li>
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='folder-icon'/>
<!--[ Title navigation ]-->
<span class='name free' itemprop='name'>Custom Menu 02</span>
</a>
</li>
<!--[ Standar menu ]-->
<li class='break'>
<a class='link' href='https://theme.jagodesain.com/2020/05/template-median-ui.html' itemprop='url'>
<!--[ Icon ]-->
<b:include name='download-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'>Download template</span>
</a>
</li>
<!--[ Standar menu ]-->
<li>
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='document-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'>Sitemap</span>
</a>
</li>
<!--[ Standar menu ]-->
<li>
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='shield-done-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'>Disclaimers</span>
</a>
</li>
<!--[ Standar menu ]-->
<li>
<a class='link' href='#' itemprop='url'>
<!--[ Icon ]-->
<b:include name='lock-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'>Privacy</span>
</a>
</li>
</ul>
</b:includable>
</b:widget>
<b:widget id='LinkList000' locked='true' title='Navigation Menu (Simple)' type='LinkList' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Contact</b:widget-setting>
<b:widget-setting name='text-0'>About</b:widget-setting>
<b:widget-setting name='text-3'>Sitemap</b:widget-setting>
<b:widget-setting name='text-2'>Download</b:widget-setting>
<b:widget-setting name='text-5'>Privacy</b:widget-setting>
<b:widget-setting name='text-4'>Disclaimers</b:widget-setting>
<b:widget-setting name='text-6'>Custom Menu</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='htmlMenu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<!--[ Close button ]-->
<li class='close'>
<label class='link' for='offnav-input'>
<b:include name='back-icon'/>
<span class='name' data-text='Back'/>
</label>
</li>
<b:if cond='!data:view.isHomepage'>
<li>
<a class='link' expr:href='data:blog.homepageUrl.canonical' itemprop='url'>
<b:include name='home-icon'/>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'><data:messages.home/></span>
</a>
</li>
</b:if>
<b:loop values='data:links' var='link'>
<li>
<a class='link' expr:href='data:link.target' itemprop='url'>
<b:if cond='data:link.name == "About"'>
<b:include name='profiles-icon'/>
<b:elseif cond='data:link.name == "Contact"'/>
<b:include name='message-icon'/>
<!--[ Download icon ]-->
<b:elseif cond='data:link.name == "Download"'/>
<b:include name='download-icon'/>
<!--[ Document icon ]-->
<b:elseif cond='data:link.name == "Sitemap"'/>
<b:include name='document-icon'/>
<!--[ Shield done icon ]-->
<b:elseif cond='data:link.name == "Disclaimers"'/>
<b:include name='shield-done-icon'/>
<!--[ Lock icon ]-->
<b:elseif cond='data:link.name == "Privacy"'/>
<b:include name='lock-icon'/>
<b:else/>
<!--[ Folder/Default icon ]-->
<b:include name='folder-icon'/>
</b:if>
<!--[ Title navigation ]-->
<span class='name' itemprop='name'><data:link.name/></span>
</a>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
<b:widget id='LinkList002' locked='true' title='Social Media Link' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Instagram</b:widget-setting>
<b:widget-setting name='text-0'>Facebook</b:widget-setting>
<b:widget-setting name='text-3'>Youtube</b:widget-setting>
<b:widget-setting name='text-2'>Twitter</b:widget-setting>
<b:widget-setting name='text-5'>Pinterest</b:widget-setting>
<b:widget-setting name='text-4'>LinkedIn</b:widget-setting>
<b:widget-setting name='text-6'>Whatsapp</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<label class='link' for='offnav-input'><b:include name='plus-icon'/></label>
<ul class='socialLink'>
<b:loop index='soc' values='data:links' var='link'>
<b:if cond='data:soc <= 5'>
<li>
<a class='link' expr:aria-label='data:link.name' expr:href='data:link.target'>
<b:if cond='data:link.name == "Instagram"'>
<b:include name='instagram-icon'/>
<b:elseif cond='data:link.name == "Facebook"'/>
<b:include name='facebook-icon'/>
<b:elseif cond='data:link.name == "Twitter"'/>
<b:include name='twitter-icon'/>
<b:elseif cond='data:link.name == "Youtube"'/>
<b:include name='youtube-icon'/>
<b:elseif cond='data:link.name == "LinkedIn"'/>
<b:include name='linkedIn-icon'/>
<b:elseif cond='data:link.name == "Whatsapp"'/>
<b:include name='whatsapp-icon'/>
<b:elseif cond='data:link.name == "Pinterest"'/>
<b:include name='pinterest-icon'/>
<b:else/>
<b:include name='circle-icon'/>
</b:if>
</a>
</li>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
<b:tag class='fullClose menu' cond='!data:view.isLayoutMode' for='offnav-input' name='label'/>
</div>
<!--[ Content section ]-->
<div class='mainInner sectionInner'>
<b:if cond='data:view.isMultipleItems and !data:view.isPreview'>
<!--[ Large ads ]-->
<div class='largeSection'>
<b:section id='large-content' maxwidgets='1' showaddelement='false'>
<b:widget cond='!data:view.isPreview' id='HTML03' locked='true' title='Large Ads' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<!--[ Blog content ]-->
<div class='blogContent'>
<!--[ Main content ]-->
<main class='mainbar'>
<b:section cond='data:view.isHomepage' id='top-widget' showaddelement='true'>
<b:widget cond='data:view.url != data:view.url params { amp: "1" }' id='HTML00' locked='true' title='Slider Mini' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'><li id='sliderDiv1' class='sliderDiv'>
<!--[ add the content right below ]-->
<div class='sliderImg lazy' data-bg='https://1.bp.blogspot.com/-yMSpgmjn390/YF1Q5CvGIcI/AAAAAAAAQlg/59LxYemhlyEbbhqlpdfypu5OXRav4t-JgCNcBGAsYHQ/s0/slider-1-min.png'></div>
<div class='sliderSnapper'></div>
</li>
<li id='sliderDiv2' class='sliderDiv'>
<!--[ add the content right below ]-->
<a class='sliderImg lazy' href='#' data-bg='https://1.bp.blogspot.com/-dGxoQ9YQYsM/YF1Q71CYmII/AAAAAAAAQlo/0scDqH__JA87HT6QpRcFZt9Y7CucundjQCNcBGAsYHQ/s0/slider-2-min.png' aria-label='Slider'></a>
<div class='sliderSnapper'></div>
</li>
<li id='sliderDiv3' class='sliderDiv'>
<!--[ add the content right below ]-->
<a class='sliderImg lazy' href='#' data-bg='https://1.bp.blogspot.com/-vK7BQxXeYnk/YF1Q9MVgZ8I/AAAAAAAAQls/OanP_Tl4sd4616Y1RaD2JPA_UOWtMkDAQCNcBGAsYHQ/s0/slider-3-min.png' aria-label='Slider'></a>
<div class='sliderSnapper'></div>
</li>
<li id='sliderDiv4' class='sliderDiv'>
<!--[ add the content right below ]-->
<a class='sliderImg lazy' href='#' data-bg='https://1.bp.blogspot.com/-Q_BGkGuukLE/YF1Q67reH4I/AAAAAAAAQlk/jXe6LIyIjkkNpJu7ShtztoUWV4JylmCkgCNcBGAsYHQ/s0/slider-4-min.png' aria-label='Slider'></a>
<div class='sliderSnapper'></div>
</li></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<section aria-label='Gallery' class='slider'>
<ol class='sliderViewport'>
<data:content/>
</ol>
</section>
</b:includable>
</b:widget>
<b:widget cond='!data:view.isPreview' id='HTML04' locked='true' title='Mini Ads' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='FeaturedPost00' locked='true' title='Pinned Post' type='FeaturedPost' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showSnippet'>true</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='postId'>1073926185808722226</b:widget-setting>
<b:widget-setting name='showFirstImage'>true</b:widget-setting>
<b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/><b:include name='feather-icon'/></h2>
</b:if>
<b:include name='snippetedPosts'/>
</b:includable>
<b:includable id='blogThisShare'/>
<b:includable id='bylineByName' var='byline'/>
<b:includable id='bylineRegion' var='regionItems'/>
<b:includable id='commentsLink'/>
<b:includable id='commentsLinkIframe'/>
<b:includable id='emailPostIcon'/>
<b:includable id='facebookShare'/>
<b:includable id='footerBylines'/>
<b:includable id='googlePlusShare'/>
<b:includable id='headerByline'/>
<b:includable id='linkShare'/>
<b:includable id='otherSharingButton'/>
<b:includable id='platformShare'/>
<b:includable id='postAuthor'/>
<b:includable id='postCommentsLink'/>
<b:includable id='postInfo'>
<div class='itemInfo postInfo'>
<b:if cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])'>
<!--[ Post jumplinks ]-->
<b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postJumpLinks'/>
<b:else/>
<!--[ Post timestamp ]-->
<b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postTimestamps'/>
</b:if>
<!--[ Post comment count ]-->
<b:if cond='data:widgets.Blog.first.allBylineItems.comments'>
<b:include name='postCommentsLinks'/>
</b:if>
</div>
</b:includable>
<b:includable id='postJumpLink'/>
<b:includable id='postLabels'/>
<b:includable id='postLocation'/>
<b:includable id='postReactions'/>
<b:includable id='postShareButtons'/>
<b:includable id='postTimestamp'/>
<b:includable id='sharingButton'/>
<b:includable id='sharingButtonContent'/>
<b:includable id='sharingButtons'/>
<b:includable id='sharingButtonsMenu'/>
<b:includable id='sharingPlatformIcon'/>
<b:includable id='snippetedPostByline'/>
<b:includable id='snippetedPostContent'>
<!--[ Post Thumbnail ]-->
<b:include name='snippetedPostThumbnail'/>
<div class='itemContent'>
<!--[ Post header ]-->
<b:if cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])'>
<b:include name='postSponsored'/>
<b:elseif cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])'/>
<b:include name='postProduct'/>
<b:else/>
<b:include name='postHeaders'/>
</b:if>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:include name='snippetedPostEntry'/>
<b:if cond='data:post.labels none (label => label.name in ["Product" , "Label_1"])'>
<!--[ Post info ]-->
<b:include cond='!data:view.isPage' name='postInfo'/>
</b:if>
</div>
</b:includable>
<b:includable id='snippetedPostEntry'>
<b:if cond='data:this.postDisplay.showSnippet'>
<p class='itemEntry'>
<b:class cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='productPrice'/>
<b:include name='postEntrySnippet'/>
</p>
<b:elseif cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])'/>
<p class='itemEntry productPrice'><b:include name='postEntrySnippet'/></p>
</b:if>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='itemThumbnail postThumbnail'>
<b:tag expr:name='data:this.postDisplay.showFeaturedImage and data:post.featuredImage ? "a" : "div"'>
<b:attr cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' expr:value='data:post.url' name='href'/>
<b:if cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage'>
<b:include name='postEntryThumbnail'/>
<b:else/>
<span class='imgThumb' data-text='No image'/>
</b:if>
</b:tag>
</div>
</b:includable>
<b:includable id='snippetedPostTitle'>
<h3 class='itemTitle'><a expr:href='data:post.url.canonical'><data:post.title.escaped/></a></h3>
</b:includable>
<b:includable id='snippetedPosts'>
<div class='itemFeatured' role='feed'>
<!-- Don't render the post that we're currently already looking at. -->
<b:loop values='data:posts filter (p => p.id != data:view.postId)' var='post'>
<article class='item'>
<b:class cond='data:this.postDisplay.showFeaturedImage and !data:post.featuredImage' name='noThumbnail'/>
<b:class cond='!data:this.postDisplay.showFeaturedImage' name='noImage'/>
<b:class cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='product'/>
<b:include name='snippetedPostContent'/>
</article>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section id='main-widget' showaddelement='true'>
<b:widget cond='!data:view.isPreview and !data:view.isPost' id='HTML05' locked='true' title='Mini Ads' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='commentLabel'>Comment</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>Oleh</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='timestampLabel'>On</b:widget-setting>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>true</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#000000</b:widget-setting>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#505050</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#989b9f</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#fefefe</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#000000</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'>in</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include cond='data:view.isMultipleItems' name='titlePost'/>
<div class='blogPosts'>
<b:class cond='data:posts.empty' name='empty'/>
<!--[ Fullpage condition ]-->
<b:class cond='data:view.url != data:view.url params { amp: "1" } and data:view.isSingleItem and data:posts any (p => p.labels any (l => l.name in [ "Fullpage" , "Label_2" ]))' name='singlePage'/>
<b:include cond='data:view.url != data:view.url params { amp: "1" } and data:view.isSingleItem and data:posts any (p => p.labels any (l => l.name in [ "Fullpage" , "Label_2" ]))' name='post-singlePage'/>
<!--[ If no content found ]-->
<b:include name='noContentPlaceholder'/>
<b:with value='data:widgets.FeaturedPost filter (w => w.sectionId == "top-widget") map (w => w.postId)' var='featuredPostIds'>
<b:with value='data:view.isHomepage ? data:posts filter (post => post.id not in data:featuredPostIds) : data:posts' var='posts'>
<b:loop index='i' values='data:posts' var='post'>
<!--[ Remove comment tag below to enable in-feed ad ]-->
<!--<b:if cond='data:i == 2'>
<b:include name='post-adIn'/>
</b:if>
<b:if cond='data:i == 5'>
<b:include name='post-adIn'/>
</b:if>-->
<b:include data='post' name='postCommentsAndAd'/>
</b:loop>
</b:with>
</b:with>
</div>
<b:include cond='data:view.isMultipleItems' name='postPagination'/>
</b:includable>
<b:includable id='aboutPostAuthor'/>
<b:includable id='addComments'/>
<b:includable id='blogThisShare'/>
<b:includable id='breadcrumb' var='post'>
<!--[ Post breadcrumbs ]-->
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<b:class cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])' name='sponsored'/>
<div class='homeLink' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl.canonical' itemprop='item'><span itemprop='name'><data:messages.home/></span></a>
<meta content='1' itemprop='position'/>
</div>
<b:if cond='data:post.labels'>
<b:loop index='num' values='data:post.labels' var='label'>
<b:if cond='data:num == 0'>
<div class='labelLink' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url.canonical' itemprop='item'><span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+2' itemprop='position'/>
</div>
</b:if>
<b:if cond='data:num == 1 and data:post.labels none (label => label.name in ["Sponsored" , "Advertorial" , "Product" , "Label_1"])'>
<div class='labelLink' itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url.canonical' itemprop='item'><span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+2' itemprop='position'/>
</div>
</b:if>
</b:loop>
<b:elseif cond='data:view.isPost'/>
<div class='labelLink noLabel'><data:messages.posts/></div>
</b:if>
<b:tag class='titleLink' cond='data:view.isPage' expr:data-text='data:post.title' name='div'/>
</div>
</b:includable>
<b:includable id='bylineByName' var='byline'/>
<b:includable id='bylineRegion' var='regionItems'/>
<b:includable id='commentAuthorAvatar'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='commentForm' var='post'/>
<b:includable id='commentFormIframeSrc' var='post'/>
<b:includable id='commentItem' var='comment'/>
<b:includable id='commentList' var='comments'/>
<b:includable id='commentPicker' var='post'/>
<b:includable id='commentblock' var='cb'>
<div class='commentAvatar'>
<b:if cond='data:cb.level.authorAvatarSrc'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div class='lazy' expr:data-bg='resizeImage(data:cb.level.authorAvatarSrc, 100, "1:1")'/>
<b:else/>
<div>
<amp-img expr:alt='data:post.author.name' expr:src='resizeImage(data:cb.level.authorAvatarSrc, 100, "1:1")' height='1' layout='responsive' width='1'/>
</div>
</b:if>
</b:if>
</div>
<div class='commentInner'>
<div class='commentBlock' itemscope='itemscope' itemtype='https://schema.org/Comment'>
<div class='commentHeader'>
<b:if cond='data:cb.level.author != "Anonymous"'>
<span class='name' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<span itemprop='name'><data:cb.level.author/></span>
<b:if cond='data:post.author.name == data:cb.level.author'>
<svg viewBox='0 0 24 24'><path clip-rule='evenodd' d='M9.3764 20.0279L18.1628 8.66544C18.6403 8.0527 18.8101 7.3443 18.6509 6.62299C18.513 5.96726 18.1097 5.34377 17.5049 4.87078L16.0299 3.69906C14.7459 2.67784 13.1541 2.78534 12.2415 3.95706L11.2546 5.23735C11.1273 5.39752 11.1591 5.63401 11.3183 5.76301C11.3183 5.76301 13.812 7.76246 13.8651 7.80546C14.0349 7.96671 14.1622 8.1817 14.1941 8.43969C14.2471 8.94493 13.8969 9.41792 13.377 9.48242C13.1329 9.51467 12.8994 9.43942 12.7297 9.29967L10.1086 7.21422C9.98126 7.11855 9.79025 7.13898 9.68413 7.26797L3.45514 15.3303C3.0519 15.8355 2.91395 16.4912 3.0519 17.1255L3.84777 20.5761C3.89021 20.7589 4.04939 20.8879 4.24039 20.8879L7.74222 20.8449C8.37891 20.8341 8.97316 20.5439 9.3764 20.0279ZM14.2797 18.9533H19.9898C20.5469 18.9533 21 19.4123 21 19.9766C21 20.5421 20.5469 21 19.9898 21H14.2797C13.7226 21 13.2695 20.5421 13.2695 19.9766C13.2695 19.4123 13.7226 18.9533 14.2797 18.9533Z' fill-rule='evenodd'/></svg>
</b:if>
</span>
<b:else/>
<span class='name' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<span itemprop='name'>Anonymous</span>
</span>
</b:if>
<span class='datetime' expr:data-datetime='data:cb.level.timestamp' itemprop='datePublished'><data:cb.level.timestamp/></span>
</div>
<div class='commentContent' itemprop='text'>
<b:class cond='data:cb.level.isDeleted' name='hasDeleted'/>
<b:if cond='data:cb.level.author != data:post.author.name'>
<b:eval expr='data:cb.level.body snippet { links: false }'/>
<b:else/>
<data:cb.level.body/>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='comments' var='post'/>
<b:includable id='commentsLink'/>
<b:includable id='commentsLinkIframe'/>
<b:includable id='commentsTitle'>
<h3 class='title'>
<b:if cond='data:post.numberOfComments > 0'>
<b:message name='messages.numberOfComments'>
<b:param expr:value='data:post.numberOfComments' name='numComments'/>
</b:message>
<b:else/>
<data:messages.postAComment/>
</b:if>
</h3>
</b:includable>
<b:includable id='defaultAdUnit'>
<ins class='adsbygoogle' data-ad-format='auto' expr:data-ad-client='data:adClientId ?: data:blog.adsenseClientId' expr:data-ad-host='data:blog.adsenseHostId' expr:data-analytics-uacct='data:blog.analyticsAccountNumber' expr:style='data:style ?: "display: block;"'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</b:includable>
<b:includable id='emailPostIcon'/>
<b:includable id='facebookShare'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='footerBylines'/>
<b:includable id='googlePlusShare'/>
<b:includable id='headerByline'/>
<b:includable id='homePageLink'/>
<b:includable id='iframeComments' var='post'/>
<b:includable id='inlineAd' var='post'>
<b:if cond='!data:view.isPreview'>
<b:if cond='data:this.adCode or data:this.adClientId or data:blog.adsenseClientId'>
<!-- Ad -->
<div class='inline-ad'>
<b:if cond='data:this.adCode != ""'>
<data:this.adCode/>
<b:else/>
<b:include cond='data:this.adClientId or data:blog.adsenseClientId' name='defaultAdUnit'/>
</b:if>
</div>
</b:if>
<b:else/>
<div class='inline-ad'>
<div class='inline-ad-placeholder'>
<span><b:message name='messages.adsGoHere'/></span>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='linkShare'/>
<b:includable id='manageComments'/>
<b:includable id='nextPageLink'/>
<b:includable id='noContentPlaceholder'>
<b:if cond='data:posts.empty'>
<!--[ No posts messages ]-->
<div class='noPosts'><data:messages.noResultsFound/>...</div>
</b:if>
</b:includable>
<b:includable id='otherSharingButton'/>
<b:includable id='platformShare'/>
<b:includable id='post' var='post'/>
<b:includable id='postAuthor'/>
<b:includable id='postBody' var='post'/>
<b:includable id='postBodySnippet' var='post'/>
<b:includable id='postCommentsAndAd' var='post'>
<!--[ Post article ]-->
<article class='hentry'>
<b:class cond='data:view.isSingleItem' name='post'/>
<b:class cond='data:view.isMultipleItems and !data:post.featuredImage' name='noThumbnail'/>
<b:class cond='!data:widgets.Blog.first.allBylineItems.timestamp and !data:widgets.Blog.first.allBylineItems.comments' name='noInfo'/>
<b:class cond='!data:widgets.Blog.first.allBylineItems.timestamp and data:post.numberOfComments == 0' name='noComment'/>
<b:class cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='product'/>
<b:class cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial", "Product" , "Label_1"])' name='noAd'/>
<!--[ Post breadcrumbs ]-->
<b:include cond='data:view.isSingleItem' data='post' name='breadcrumb'/>
<b:if cond='data:view.isMultipleItems'>
<!--[ Post thumbnail ]-->
<div class='postThumbnail'>
<b:tag expr:name='data:post.featuredImage ? "a" : "div"'>
<b:attr cond='data:post.featuredImage' expr:value='data:post.url' name='href'/>
<b:if cond='data:post.featuredImage'>
<b:include name='postEntryThumbnail'/>
<b:else/>
<span class='imgThumb' data-text='No image'/>
</b:if>
</b:tag>
</div>
</b:if>
<b:tag class='postContent' cond='data:view.isMultipleItems' name='div'>
<b:if cond='data:view.isMultipleItems'>
<!--[ Post header ]-->
<b:if cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])'>
<b:include name='postSponsored'/>
<b:elseif cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])'/>
<b:include name='postProduct'/>
<b:else/>
<b:include name='postHeaders'/>
</b:if>
</b:if>
<!--[ Post title-->
<b:tag class='postTitle' expr:name='data:post.link or (data:post.url and data:view.url != data:post.url) ? "h2" : "h1"'>
<b:tag expr:name='data:post.link or (data:post.url and data:view.url != data:post.url) ? "a" : "span"'>
<b:attr cond='data:post.link or (data:post.url and data:view.url != data:post.url)' expr:value='data:post.url.canonical' name='href'/>
<b:attr cond='data:post.link or (data:post.url and data:view.url != data:post.url)' expr:value='data:post.title' name='data-text'/>
<b:attr cond='data:post.link or (data:post.url and data:view.url != data:post.url)' name='rel' value='bookmark'/>
<data:post.title/>
</b:tag>
</b:tag>
<b:if cond='data:view.isMultipleItems and data:widgets.Blog.first.allBylineItems.backlinks'>
<!--[ Post snippets ]-->
<p class='postEntry snippet'>
<b:class cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='productPrice'/>
<b:include name='postEntrySnippet'/>
</p>
</b:if>
<b:if cond='data:post.labels none (label => label.name in ["Product" , "Label_1"])'>
<!--[ Post info ]-->
<b:include cond='!data:view.isPage' name='postInfo'/>
<b:include cond='data:view.isPost' name='postInfoDate'/>
</b:if>
<b:tag class='postInner' cond='data:view.isSingleItem' name='div'>
<b:if cond='data:post.labels none (label => label.name in ["Sponsored" , "Advertorial" , "Product" , "Label_1"])'>
<!--[ Post top ad ]-->
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-adTop'/>
</b:if>
<b:if cond='data:view.isSingleItem'>
<!--[ Post body ]-->
<div class='postEntry' expr:id='"postID-" + data:post.id'>
<div class='postBody' id='postBody'><data:post.body/></div>
</div>
</b:if>
<b:if cond='data:post.labels none (label => label.name in ["Sponsored" , "Advertorial" , "Product" , "Label_1"])'>
<!--[ Post bottom ad ]-->
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-adBot'/>
</b:if>
<b:include data='post' name='postMetadataJSON'/>
<b:if cond='data:view.isPost and data:widgets.Blog.first.allBylineItems.timestamp and data:post.labels none (label => label.name in ["Product" , "Label_1"])'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<script>/*<![CDATA[*/ function get_text(el) {ret = ""; var length = el.childNodes.length; for(var i = 0; i < length; i++) {var node = el.childNodes[i]; if(node.nodeType != 8) {ret += node.nodeType != 1 ? node.nodeValue : get_text(node);} } return ret;} var words = get_text(document.getElementById('postBody')); var count = words.split(' ').length; var avg = 200; var counted = count / avg; var maincount = Math.round(counted); document.getElementById("readTime").innerHTML = maincount + " minute read"; /*]]>*/</script>
</b:if>
</b:if>
</b:tag>
<b:if cond='data:post.labels none (label => label.name in ["Sponsored" , "Advertorial" , "Product" , "Label_1"])'>
<!--[ Post writter ]-->
<b:include cond='data:post.author.aboutMe and data:view.isPost and !data:view.isPreview' name='post-authorProfile'/>
</b:if>
<!--[ Share button ]-->
<b:include cond='data:post.shareUrl and data:view.isPost and !data:view.isPreview' name='postInfoShare'/>
</b:tag>
</article>
<!--[ Post footer ]-->
<b:tag class='postFooter' cond='data:view.isPost' name='div'>
<!--[ Related post ]-->
<b:include cond='data:view.isPost and !data:view.isPreview and data:view.url != data:view.url params { amp: "1" }' data='post' name='post-related'/>
<!--[ Matched content ad ]-->
<!--<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-relatedAd'/>-->
<b:tag class='blogComments' cond='data:post.allowComments and data:view.isPost and !data:view.isPreview' id='comment' name='div'>
<!--[ Blogger Comments ]-->
<b:include cond='data:post.allowComments and data:view.isPost and !data:view.isPreview' data='post' name='threadedComments-modifV3'/>
</b:tag>
</b:tag>
<!--[ Post table of content ]-->
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<b:include cond='data:view.isPost and !data:view.isPreview and data:post.labels none (label => label.name in ["Product" , "Label_1"])' data='post' name='postTableofContent'/>
</b:if>
</b:includable>
<b:includable id='postCommentsLink'/>
<b:includable id='postFooter' var='post'/>
<b:includable id='postFooterAuthorProfile' var='post'/>
<b:includable id='postHeader'/>
<b:includable id='postInfo'>
<b:tag class='postInfo' name='div'>
<b:class cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])' name='onSponsored'/>
<b:class cond='data:view.isPost and !data:widgets.Blog.first.allBylineItems.author' name='noAuthor'/>
<b:class cond='data:view.isPost and !data:post.allowComments' name='noComment'/>
<b:if cond='data:view.isMultipleItems'>
<b:if cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])'>
<!--[ Post jumplinks ]-->
<b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postJumpLinks'/>
<b:else/>
<!--[ Post timestamp ]-->
<b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postTimestamps'/>
</b:if>
<!--[ Post comment count ]-->
<b:if cond='data:widgets.Blog.first.allBylineItems.comments'>
<b:include name='postCommentsLinks'/>
</b:if>
<b:else/>
<!--[ Info in item page ]-->
<b:if cond='data:post.labels none (label => label.name in ["Sponsored" , "Advertorial"])'>
<b:tag class='postAuthor' cond='data:widgets.Blog.first.allBylineItems.author' name='div'>
<b:include name='postAuthorImage'/>
<b:tag class='postAuthorName' cond='data:widgets.Blog.first.allBylineItems.author' name='div'>
<b:include name='postAuthorName'/>
</b:tag>
</b:tag>
<div class='postComments'>
<!--[ Post comment count ]-->
<b:if cond='data:post.allowComments and data:widgets.Blog.first.allBylineItems.comments'>
<b:include name='postCommentLink'/>
</b:if>
<b:if cond='data:post.shareUrl and data:widgets.Blog.first.allBylineItems.share'>
<!--[ Share button ]-->
<label for='offshare-check'>
<b:include name='share-icon'/>
</label>
</b:if>
</div>
</b:if>
</b:if>
</b:tag>
</b:includable>
<b:includable id='postInfoDate'>
<b:if cond='data:widgets.Blog.first.allBylineItems.timestamp and data:post.labels none (label => label.name in ["Product" , "Label_1"])'>
<div class='postTimes'>
<b:if cond='data:post.labels none (label => label.name in ["Sponsored" , "Advertorial"])'>
<div class='postDatetime'>
<b:include name='calendar-icon'/>
<b:include name='postTimestamps'/>
</div>
</b:if>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<!--[ Reading time ]-->
<div class='postReadtime'>
<b:include name='time-square-icon'/>
<span id='readTime'/>
</div>
</b:if>
</div>
</b:if>
</b:includable>
<b:includable id='postInfoShare'>
<div class='postShare' expr:data-text='data:messages.share + ":"'>
<div class='shareContent' expr:data-text='data:messages.share + ":"'>
<!-- Share to Facebook -->
<div class='shareIcon facebook'>
<a aria-label='Share on Facebook' data-text='Facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url.canonical' rel='noopener' role='button' target='_blank'>
<b:include name='facebook-icon'/>
</a>
</div>
<!-- Share to Whatsapp -->
<div class='shareIcon whatsapp'>
<a aria-label='Share on Whatsapp' data-text='Whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:blog.url.canonical' rel='noopener' role='button' target='_blank'>
<b:include name='whatsapp-icon'/>
</a>
</div>
<!-- Share to Twitter -->
<div class='shareIcon twitter'>
<a aria-label='Twitter' expr:href='"https://twitter.com/share?url=" + data:blog.url.canonical' rel='noopener' role='button' target='_blank' title='Share to Twitter'>
<b:include name='twitter-icon'/>
</a>
</div>
<div class='shareIcon shareButton'>
<label for='offshare-check'>
<b:include name='share-icon'/>
</label>
</div>
</div>
<input class='shareIn hidden' id='offshare-check' type='checkbox'/>
<div class='shareInner'>
<div class='shareBlock'>
<div class='shareHeader' expr:data-text='data:messages.shareToOtherApps'>
<label for='offshare-check'><b:include name='close-icon'/></label>
</div>
<div class='shareBox'>
<!--[ Preview post ]-->
<div class='sharePreview'>
<b:if cond='data:post.featuredImage'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<div class='previewImg lazy' expr:data-bg='resizeImage(data:post.featuredImage, 120, "1:1")'/>
<b:else/>
<div class='previewImg'><b:include name='image-icon'/></div>
</b:if>
<b:else/>
<div class='previewImg'><b:include name='image-icon'/></div>
</b:if>
<div class='previewContent'>
<div class='previewTitle' expr:data-text='data:post.title'/>
<b:if cond='data:widgets.Blog.first.allBylineItems.labels'>
<div class='previewLabel'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i == 0'>
<b:tag expr:data-text='"#" + data:label.name' name='span'/>
</b:if>
</b:loop>
</div>
</b:if>
</div>
</div>
<ul>
<!--<li>-->
<!-- Share to Twitter -->
<!--<a aria-label='Twitter' data-text='Twitter' expr:href='"https://twitter.com/share?url=" + data:blog.url.canonical' rel='noopener' target='_blank'>
<b:include name='twitter-icon'/>
</a>
</li>-->
<li>
<!-- Share to Telegram -->
<a aria-label='Telegram' data-text='Telegram' expr:href='"https://t.me/share/url?url=" + data:blog.url.canonical' rel='noopener' target='_blank'>
<b:include name='telegram-icon'/>
</a>
</li>
<li>
<!-- Pin to Pinterst -->
<a aria-label='Pinterest' data-pin-config='beside' data-text='Pinterest' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:blog.url.canonical + "&media=" + resizeImage(data:blog.postImageUrl, 1600)' rel='noopener' target='_blank'>
<b:include name='pinterest-icon'/>
</a>
</li>
<li>
<!-- Share Linkedin -->
<a aria-label='Linkedin' data-text='Linkedin' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:blog.url.canonical' rel='noopener' target='_blank'>
<b:include name='linkedIn-icon'/>
</a>
</li>
<li>
<!-- Share to Line -->
<a aria-label='Line' data-text='Line' expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:blog.url.canonical' rel='nofollow noreferrer' target='_blank'>
<b:include name='line-icon'/>
</a>
</li>
<li>
<!-- Share to Tumblr -->
<a aria-label='Tumblr' data-text='Tumblr' expr:href='"https://www.tumblr.com/share/link?url=" + data:blog.url.canonical' rel='noopener' target='_blank'>
<b:include name='tumblr-icon'/>
</a>
</li>
<li>
<!-- Send to email -->
<a aria-label='Email' data-text='Email' expr:href='"mailto:?body=" + data:blog.url.canonical' target='_blank'>
<b:include name='message-icon'/>
</a>
</li>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<li>
<!-- Copy link -->
<div class='copyLink' data-text='Copy link' onclick='copyFunction()'>
<b:include name='paper-icon'/>
</div>
<input expr:value='data:blog.url.canonical' id='getlink' readonly='readonly' type='text'/>
<div class='shareNotif' id='shareNotif'/>
</li>
</b:if>
</ul>
</div>
</div>
<label class='fullClose' for='offshare-check'/>
</div>
</div>
</b:includable>
<b:includable id='postJumpLink' var='post'/>
<b:includable id='postLabels'/>
<b:includable id='postLocation'/>
<b:includable id='postMeta' var='post'>
<b:include data='post' name='postMetadataJSON'/>
</b:includable>
<b:includable id='postMetadataJSONImage'>
"image": {
"@type": "ImageObject",
<b:if cond='data:post.featuredImage.isResizable'>
"url": "<b:eval expr='resizeImage(data:post.featuredImage, 1200, "1200:630")'/>",
"height": 720,
"width": 1200
<b:else/>
"url": "https://1.bp.blogspot.com/-E250bQMM8tk/XomH5DdorOI/AAAAAAAAPY8/SCYwi79WjckWC8wHKK7OblI82BpT9JquACNcBGAsYHQ/s1600/jagotheme-img.png",
"height": 720,
"width": 1280
</b:if>
},
</b:includable>
<b:includable id='postMetadataJSONPublisher'>
"publisher": {
"@type": "Organization",
"name": "Jago Desain",
"logo": {
"@type": "ImageObject",
"url": "https://1.bp.blogspot.com/-50s1RMWV7jI/X8OaYjJcMiI/AAAAAAAAQK4/sWcpbaP0Sq0hsW473Vnb8AyBvYvdSQEPwCNcBGAsYHQ/s0/jd-logo.png",
"width": 297,
"height": 45
}
},
</b:includable>
<b:includable id='postPagination'>
<!--[ Blog navigation ]-->
<div class='blogPager' id='blogPager'>
<b:tag class='noPost' cond='data:view.url == data:blog.homepageUrl and !data:olderPageUrl' expr:data-text='data:messages.noResultsFound' name='div'/>
<b:include cond='!data:posts.empty' name='postPagination.new'/>
<b:include name='postPagination.home'/>
<b:include cond='!data:posts.empty' name='postPagination.old'/>
</div>
</b:includable>
<b:includable id='postPagination.home'>
<b:tag class='homeLink' expr:name='data:view.url != data:blog.homepageUrl ? "a" : "div"'>
<b:class cond='data:view.url == data:blog.homepageUrl' name='noPost'/>
<b:attr cond='data:view.url != data:blog.homepageUrl' expr:value='data:blog.homepageUrl.canonical' name='href'/>
<b:attr cond='data:view.url != data:blog.homepageUrl' expr:value='data:messages.home' name='aria-label'/>
<b:attr cond='data:posts.empty' expr:value='data:messages.home' name='data-text'/>
<b:include cond='!data:posts.empty' name='home-alt-icon'/>
</b:tag>
</b:includable>
<b:includable id='postPagination.new'>
<b:if cond='data:newerPageUrl and data:view.url != data:blog.homepageUrl.canonical path "search"'>
<a class='newerLink' expr:aria-label='data:messages.newest' expr:data-text='data:messages.newest' expr:href='data:newerPageUrl.canonical'>
<b:include name='back-icon'/>
</a>
<b:else/>
<div class='newerLink noPost' expr:data-text='data:messages.newest'>
<b:include name='back-icon'/>
</div>
</b:if>
</b:includable>
<b:includable id='postPagination.old'>
<b:tag class='olderLink' expr:data-text='data:messages.oldest' expr:name='data:olderPageUrl ? "a" : "div"'>
<b:class cond='!data:olderPageUrl' name='noPost'/>
<b:attr cond='data:olderPageUrl' expr:value='data:olderPageUrl.canonical' name='href'/>
<b:attr cond='data:olderPageUrl' expr:value='data:messages.oldest' name='aria-label'/>
<b:include name='forward-icon'/>
</b:tag>
</b:includable>
<b:includable id='postReactions'/>
<b:includable id='postShareButtons'/>
<b:includable id='postTimestamp'/>
<b:includable id='postTitle' var='post'/>
<b:includable id='previousPageLink'/>
<b:includable id='sharingButton'/>
<b:includable id='sharingButtonContent'/>
<b:includable id='sharingButtons'/>
<b:includable id='sharingButtonsMenu'/>
<b:includable id='sharingPlatformIcon'/>
<b:includable id='threadedCommentForm' var='post'/>
<b:includable id='threadedCommentJs' var='post'/>
<b:includable id='threadedComments' var='post'/>
<b:includable id='threadedComments-form'>
<div id='threaded-comment-form'>
<!--[ Comment message ]-->
<b:if cond='data:this.messages.blogComment != ""'>
<div class='commentMessages'>
<data:this.messages.blogComment/>
</div>
</b:if>
<!--[ Comment iframe (remove comment tag below to improve height of comment form) ]-->
<!--<a aria-label='Comment Form' expr:href='data:post.commentFormIframeSrc + "&skin=contempo" + data:variantParam' id='comment-editor-src'/>-->
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<iframe class='blogger-iframe-colorize blogger-comment-from-post lazy' expr:data-src='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' height='296' id='comment-editor' name='comment-editor' width='100'/>
<b:else/>
<amp-iframe class='blogger-iframe-colorize blogger-comment-from-post' expr:data-src='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' expr:src='data:post.commentFormIframeSrc appendParams {skin: "contempo"}' height='296' id='comment-editor' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-forms allow-top-navigation'/>
</b:if>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<!--<script src='https://www.blogger.com/static/v1/jsbin/1875144490-comment_from_post_iframe.js'/>
<script>BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');</script>-->
</b:if>
</div>
</b:includable>
<b:includable id='threadedComments-modifV3' var='post'>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<input class='commentShow hidden' id='forshow-comment' type='checkbox'/>
</b:if>
<b:include cond='data:post.allowComments and data:view.url != data:view.url params { amp: "1" }' name='post-commentButton'/>
<section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
<b:class name='commentFixed'/>
<b:tag class='commentSection' id='commentSection' name='div'>
<b:tag class='commentAll hidden' id='forall-comment' name='input' type='checkbox'/>
<!--[ Comments title ]-->
<div class='commentsTitle'>
<b:class cond='data:post.numberOfComments == 0' name='empty'/>
<b:include name='commentsTitle'/>
<div class='commentsIcon'>
<b:if cond='data:post.numberOfComments > 0'>
<!-- Sort comments -->
<label class='commentSort' expr:aria-label='data:messages.manageComments' expr:data-new='data:messages.newest' expr:data-text='data:messages.oldest' for='forall-comment'>
<b:include name='filter-icon'/>
</label>
</b:if>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<label aria-label='Close comment' class='commentClose' data-text='Close' for='forshow-comment'>
<b:include name='close-icon'/>
</label>
</b:if>
</div>
</div>
<div class='commentsInner'>
<b:if cond='data:post.numberOfComments > 0'>
<div class='commentsContent'>
<ol id='commentHolder'>
<b:loop values='data:post.comments where (c => not c.inReplyTo)' var='commentLevel1'>
<li class='comment' expr:id='"c" + data:commentLevel1.id'>
<b:class cond='data:cb.level.author == data:post.author.name' name='author'/>
<b:include data='{level: data:commentLevel1,d: true}' name='commentblock'/>
<b:with value='data:post.comments where (c => c.inReplyTo == data:commentLevel1.id)' var='commentL2'>
<b:if cond='data:commentL2.size != "0"'>
<div class='commentReplies'>
<input class='threadShow hidden' expr:id='"off-" + data:commentLevel1.id' type='checkbox'/>
<div class='commentThread' expr:id='"c" + data:commentLevel1.id + "-rt"'>
<label class='threadToggle' data-text='Response' expr:for='"off-" + data:commentLevel1.id'>
<b:include name='arow-down-icon'/>
</label>
<ul class='threadChrome'>
<b:loop values='data:commentL2' var='commentLevel2'>
<li class='comment' expr:id='"c" + data:commentLevel2.id'>
<b:class cond='data:cb.level.author == data:post.author.name' name='author'/>
<b:include data='{level: data:commentLevel2,d: true}' name='commentblock'/>
</div>
</li>
</b:loop>
</ul>
</div>
<b:if cond='data:view.url != data:view.url params { amp: "1" } and data:post.allowNewComments'>
<div class='commentReply'>
<a aria-label='Reply' class='replyTo' data-text='Reply' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' role='button' target='_self'>
<b:include name='reply-icon'/>
</a>
</div>
</b:if>
</div>
</b:if>
</b:with>
<b:if cond='data:view.url != data:view.url params { amp: "1" } and data:post.allowNewComments'>
<div class='commentActions'>
<a aria-label='Reply' class='replyTo' data-text='Reply' expr:data-reply-to='data:commentLevel1.id' href='javascript:;' role='button' target='_self'>
<b:include name='reply-icon'/>
</a>
</div>
</b:if>
</div>
</li>
</b:loop>
</ol>
<b:if cond='data:blog.languageDirection != "rtl" and data:view.url != data:view.url params { amp: "1" }'>
<!--[ Timeago script ]-->
<script>/*<![CDATA[*/ (function timeAgo(selector) { var templates = {prefix: "", suffix: " ago", seconds: "Seconds", minute: "Minute", minutes: "%d min", hour: "An hour", hours: "%d hours", day: "A day", days: "%d days", month: "A month", months: "%d months", year: "A year", years: "%d years"}; var template = function(t, n) { return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n))); }; var timer = function(time) { if (!time) return; time = time.replace(/\.\d+/, ""); time = time.replace(/-/, "/").replace(/-/, "/"); time = time.replace(/T/, " ").replace(/Z/, " UTC"); time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); time = new Date(time * 1000 || time); var now = new Date(); var seconds = ((now.getTime() - time) * .001) >> 0; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; var years = days / 365; return templates.prefix + ( seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years) ) + templates.suffix; }; var elements = document.getElementsByClassName('datetime'); for (var i in elements) { var $this = elements[i]; if (typeof $this === 'object') { $this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('data-datetime')); } } setTimeout(timeAgo, 60000); })(); /*]]>*/</script>
</b:if>
</div>
<b:if cond='data:post.allowNewComments'>
<div class='commentsAdd'>
<div aria-label='Berkomentar' class='hidden' id='addcomment' role='button'><data:messages.postAComment/></div>
</div>
</b:if>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<script>var comment = true;</script>
</b:if>
<b:else/>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<script>var comment = false;</script>
</b:if>
</b:if>
<div class='commentForm'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include name='threadedComments-form'/>
<b:else/>
<!--[ If comment was disable ]-->
<div class='commentsDisable'><data:post.noNewCommentsText/></div>
</b:if>
</b:if>
</div>
</div>
</b:tag>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<script>/*<![CDATA[*/ function resizeCommentScroll() {const distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 20, commentEl = document.getElementById('commentSection');if (distanceY > shrinkOn) {commentEl.classList.add("show");} else {commentEl.classList.remove("show");} } window.addEventListener('scroll', resizeCommentScroll); /*]]>*/</script>
</b:if>
<label class='fullClose' for='forshow-comment'/>
</section>
<b:if cond='data:view.url != data:view.url params { amp: "1" } and data:post.allowNewComments'>
<script>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded", function() { var a=document, b = a.getElementById("comment-editor"), d = b.getAttribute("data-src"); if (b.setAttribute("src", d), 1 == comment) { var f = a.getElementsByClassName("replyTo"), c = a.getElementById("threaded-comment-form"), h = f.length, k = function(b, d, e, f) { b.addEventListener("click", function() { var c = b.getAttribute("data-reply-to"); a.getElementById("c" + c).appendChild(d); a.getElementById("threaded-comment-form").className = 'comment-replybox-single'; a.getElementById("addcomment").className = 'commentsReply button outline'; e.src = f + "&parentID=" + c }) }; for (i = 0; i < h; i++) k(f[i], c, b, d); var l = a.getElementsByClassName("commentForm")[0]; a.getElementById("addcomment").addEventListener("click", function() { l.appendChild(c); a.getElementById("threaded-comment-form").className = 'comment-replybox-thread'; a.getElementById("addcomment").className = 'hidden'; b.src = d }) } }); /*]]>*/</script>
</b:if>
</b:includable>
</b:widget>
<b:widget cond='data:view.url != data:view.url params { amp: "1" } and data:view.isPost and !data:view.isPreview' id='HTML01' locked='true' title='Middle Post Ad 01' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<div class='adsHere ads-here'></div>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Middle article Ad ]-->
<data:content/>
<!--[ Script to move widget to the middle of article ]-->
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd01 = document.getElementById("HTML01"); var showAd01 = tgt.getElementsByTagName("p"); if (showAd01.length > 0) {insertAfter(midAd01,showAd01[15]);}; /*]]>*/</script>
</div>
</b:includable>
</b:widget>
<b:widget cond='data:view.url != data:view.url params { amp: "1" } and data:view.isPost and !data:view.isPreview' id='HTML02' locked='true' title='Middle Post Ad 02' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Middle article Ad ]-->
<data:content/>
<!--[ Script to move widget to the middle of article ]-->
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd02 = document.getElementById("HTML02"); var showAd02 = tgt.getElementsByTagName("p"); if (showAd02.length > 0) {insertAfter(midAd02,showAd02[25]);}; /*]]>*/</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section cond='!data:view.isPreview and !data:view.isSingleItem' id='add-widget' showaddelement='true'>
<b:widget cond='data:view.isHomepage' id='HTML06' locked='true' title='Mini Ads' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</main>
<!--[ Sidebar content ]-->
<b:tag class='sidebar' cond='!data:view.isPage' name='aside'>
<b:section cond='!data:view.isPage' id='side-widget' showaddelement='true'>
<b:widget cond='data:view.isHomepage or data:view.isPost' id='PopularPosts00' locked='false' title='Popular post' type='PopularPosts' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>5</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:include name='snippetedPosts'/>
</div>
</b:includable>
<b:includable id='blogThisShare'/>
<b:includable id='bylineByName' var='byline'/>
<b:includable id='bylineRegion' var='regionItems'/>
<b:includable id='commentsLink'/>
<b:includable id='commentsLinkIframe'/>
<b:includable id='emailPostIcon'/>
<b:includable id='facebookShare'/>
<b:includable id='footerBylines'/>
<b:includable id='googlePlusShare'/>
<b:includable id='headerByline'/>
<b:includable id='linkShare'/>
<b:includable id='otherSharingButton'/>
<b:includable id='platformShare'/>
<b:includable id='postAuthor'/>
<b:includable id='postCommentsLink'/>
<b:includable id='postInfo'>
<div class='itemInfo postInfo'>
<b:if cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])'>
<!--[ Post jumplinks ]-->
<b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postJumpLinks'/>
<b:else/>
<!--[ Post timestamp ]-->
<b:include cond='data:widgets.Blog.first.allBylineItems.timestamp' name='postTimestamps'/>
</b:if>
<!--[ Post comment count ]-->
<b:if cond='data:widgets.Blog.first.allBylineItems.comments'>
<b:include name='postCommentsLinks'/>
</b:if>
</div>
</b:includable>
<b:includable id='postJumpLink' var='post'/>
<b:includable id='postLabels'/>
<b:includable id='postLocation'/>
<b:includable id='postReactions'/>
<b:includable id='postShareButtons'/>
<b:includable id='postTimestamp'/>
<b:includable id='sharingButton'/>
<b:includable id='sharingButtonContent'/>
<b:includable id='sharingButtons'/>
<b:includable id='sharingButtonsMenu'/>
<b:includable id='sharingPlatformIcon'/>
<b:includable id='snippetedPostByline'/>
<b:includable id='snippetedPostContent'>
<!--[ Post thumbnail ]-->
<b:include cond='data:i == 0 and data:this.postDisplay.showFeaturedImage' name='snippetedPostThumbnail'/>
<div class='itemContent'>
<!--[ Post header ]-->
<b:if cond='data:post.labels any (label => label.name in ["Sponsored" , "Advertorial"])'>
<b:include name='postSponsored'/>
<b:elseif cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])'/>
<b:include name='postProduct'/>
<b:else/>
<b:include name='postHeaders'/>
</b:if>
<div class='itemInner'>
<div class='itemFlex'>
<b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>
<b:include cond='data:i == 0 or data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='snippetedPostEntry'/>
<b:if cond='data:post.labels none (label => label.name in ["Product" , "Label_1"])'>
<!--[ Post info ]-->
<b:include cond='!data:view.isPage' name='postInfo'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='snippetedPostEntry'>
<b:if cond='data:this.postDisplay.showSnippet'>
<p class='itemEntry'>
<b:class cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='productPrice'/>
<b:include name='postEntrySnippet'/>
</p>
<b:elseif cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])'/>
<p class='itemEntry productPrice'><b:include name='postEntrySnippet'/></p>
</b:if>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='itemThumbnail postThumbnail'>
<b:tag expr:name='data:post.featuredImage ? "a" : "div"'>
<b:attr cond='data:post.featuredImage' expr:value='data:post.url' name='href'/>
<b:if cond='data:post.featuredImage'>
<amp-img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 600, "20:9")' height='9' layout='responsive' width='20'/>
<noscript><img expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 600, "20:9")'/></noscript>
<b:else/>
<span class='imgThumb' data-text='No image'/>
</b:if>
</b:tag>
</div>
</b:includable>
<b:includable id='snippetedPostTitle'>
<h3 class='itemTitle'><a expr:href='data:post.url.canonical'><data:post.title.escaped/></a></h3>
</b:includable>
<b:includable id='snippetedPosts'>
<div class='itemPopulars' role='feed'>
<!-- Don't render the post that we're currently already looking at. -->
<b:loop index='i' values='data:posts filter (p => p.id != data:view.postId)' var='post'>
<article class='itemPopular'>
<b:class cond='data:this.postDisplay.showFeaturedImage and !data:post.featuredImage' name='noThumbnail'/>
<b:class cond='!data:this.postDisplay.showFeaturedImage' name='noImage'/>
<b:class cond='data:post.labels any (label => label.name in ["Product" , "Label_1"])' name='product'/>
<b:class cond='data:i == 0 and data:this.postDisplay.showFeaturedImage and data:post.featuredImage' name='mostPopular'/>
<b:include name='snippetedPostContent'/>
</article>
</b:loop>
</div>
</b:includable>
</b:widget>
<b:widget id='Label00' locked='false' title='Labels' type='Label' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>CLOUD</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='widget-title'/>
<b:include name='content'/>
</b:includable>
<b:includable id='cloud'>
<b:loop index='tags' values='data:labels' var='label'>
<!--[ Only show 6 label ]-->
<b:if cond='data:tags <= 5'>
<div class='labelSize'>
<b:class expr:name='"size-" + data:label.cssSize'/>
<b:tag class='labelName' expr:name='data:blog.url != data:label.url ? "a" : "div"'>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.url' name='href'/>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.name' name='aria-label'/>
<span class='labelTitle'><data:label.name/></span>
<b:tag class='labelCount' cond='data:this.showFreqNumbers' expr:data-text='"(" + data:label.count + ")"' name='span'/>
</b:tag>
</div>
</b:if>
<!--[ Hide another label from 7th list ]-->
<b:if cond='data:tags == 6'>
<div class='labelShow'>
<input class='labelInput hidden' id='offall-label2' type='checkbox'/>
<div class='labelAll'>
<b:loop index='alltags' values='data:labels' var='label'>
<!--[ Show label from 7th list ]-->
<b:if cond='data:alltags >= 6'>
<div class='labelSize'>
<b:class expr:name='"labelSize-" + data:label.cssSize'/>
<b:tag class='labelName' expr:name='data:blog.url != data:label.url ? "a" : "div"'>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.url' name='href'/>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.name' name='aria-label'/>
<span class='labelTitle'><data:label.name/></span>
<b:tag class='labelCount' cond='data:this.showFreqNumbers' expr:data-text='"(" + data:label.count + ")"' name='span'/>
</b:tag>
</div>
</b:if>
</b:loop>
</div>
<label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='"+" + (data:labels.length - 6)' for='offall-label2'/>
</div>
</b:if>
</b:loop>
</b:includable>
<b:includable id='content'>
<div class='widgetContent'>
<b:class expr:name='data:this.display'/>
<b:include cond='data:this.display == "list"' name='list'/>
<b:include cond='data:this.display == "cloud"' name='cloud'/>
</div>
</b:includable>
<b:includable id='list'>
<ul>
<b:loop index='tags' values='data:labels' var='label'>
<!--[ Only show 6 label ]-->
<b:if cond='data:tags <= 5'>
<li>
<b:tag class='labelName' expr:name='data:blog.url != data:label.url ? "a" : "div"'>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.url' name='href'/>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.name' name='aria-label'/>
<span class='labelTitle'><data:label.name/></span>
<b:tag class='labelCount' cond='data:this.showFreqNumbers' expr:data-text='data:label.count' name='span'/>
<b:include name='bookmark-icon'/>
</b:tag>
</li>
</b:if>
<!--[ Hide another label from 7th list ]-->
<b:if cond='data:tags == 6'>
<li class='labelShow'>
<input class='labelInput hidden' id='offall-label2' type='checkbox'/>
<div class='labelAll'>
<ul>
<b:loop index='alltags' values='data:labels' var='label'>
<!--[ Show label from 7th list ]-->
<b:if cond='data:alltags >= 6'>
<li>
<b:tag class='labelName' expr:name='data:blog.url != data:label.url ? "a" : "div"'>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.url' name='href'/>
<b:attr cond='data:blog.url != data:label.url' expr:value='data:label.name' name='aria-label'/>
<span class='labelTitle'><data:label.name/></span>
<b:tag class='labelCount' cond='data:this.showFreqNumbers' expr:data-text='data:label.count' name='span'/>
<b:include name='bookmark-icon'/>
</b:tag>
</li>
</b:if>
</b:loop>
</ul>
</div>
<label aria-label='Show label' class='label-more' expr:data-hide='data:messages.showLess' expr:data-show='data:messages.showMore' expr:data-text='"+" + (data:labels.length - 6)' for='offall-label2' role='button'/>
</li>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
<!--[ Sidebar sticky ]-->
<b:section cond='!data:view.isPreview and !data:blog.isMobileRequest and !data:view.isPage' id='side-sticky' showaddelement='true'>
<b:widget cond='!data:view.isPreview' id='HTML07' locked='true' title='Sticky Ad' type='HTML' version='2' visible='false'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<!--[ Sidebar Ad ]-->
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</b:tag>
</div>
</div>
</b:tag>
<!--[ Mobile Menu ]-->
<b:tag class='mobileContent' cond='data:view.isLayoutMode' name='div'>
<b:section id='mobile-menu' maxwidgets='1' showaddelement='false'>
<b:widget id='LinkList003' locked='true' title='Mobile Menu' type='LinkList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='link-5'>#</b:widget-setting>
<b:widget-setting name='link-6'>#</b:widget-setting>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='link-4'>#</b:widget-setting>
<b:widget-setting name='text-1'>Search</b:widget-setting>
<b:widget-setting name='text-0'>Home</b:widget-setting>
<b:widget-setting name='text-3'>Dark</b:widget-setting>
<b:widget-setting name='text-2'>Navigation</b:widget-setting>
<b:widget-setting name='text-5'>Share</b:widget-setting>
<b:widget-setting name='text-4'>Top</b:widget-setting>
<b:widget-setting name='text-6'>Comment</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<ul class='mobileMenu'>
<b:loop index='soc' values='data:links' var='link'>
<b:if cond='data:soc <= 2'>
<li>
<b:if cond='data:link.name == "Home"'>
<b:class name='mHome'/>
<a expr:aria-label='data:link.name' expr:href='data:blog.homepageUrl.canonical' role='button'>
<b:include name='home-alt-icon'/>
</a>
<b:elseif cond='data:link.name == "Search"'/>
<b:class name='mSearch'/>
<label for='searchInput'><b:include name='search-icon'/></label>
<b:elseif cond='data:link.name == "Navigation"'/>
<b:class name='mNav'/>
<label for='offnav-input'><b:include name='category-icon'/></label>
<b:elseif cond='data:link.name == "Dark"'/>
<b:class name='mDark'/>
<div onclick='darkMode()'><b:include name='moon-icon'/></div>
<b:elseif cond='data:link.name == "Top"'/>
<b:class name='mTop'/>
<div onclick='window.scrollTo({top: 0});'>
<b:include name='arow-up-circle-icon'/>
</div>
<b:elseif cond='data:link.name == "Share"'/>
<b:class name='mShare'/>
<label for='offshare-check'><b:include name='share-icon'/></label>
<b:elseif cond='data:link.name == "Comment"'/>
<b:class name='mComment'/>
<a aria-label='Show comments' href='#comment'><b:include name='chat-icon'/></a>
</b:if>
</li>
</b:if>
<b:if cond='data:soc == 3'>
<b:if cond='data:view.isPost'>
<li class='mShare'>
<label for='offshare-check'><b:include name='share-icon'/></label>
</li>
<b:elseif cond='data:view.url != data:view.url params { amp: "1" }'/>
<li class='mDark'>
<div onclick='darkMode()'><b:include name='moon-icon'/></div>
</li>
</b:if>
</b:if>
<b:if cond='data:soc == 4'>
<b:if cond='data:view.isPost'>
<li class='mComment'>
<a aria-label='Show comments' href='#comment'><b:include name='chat-icon'/></a>
</li>
<b:elseif cond='data:view.url != data:view.url params { amp: "1" }'/>
<li class='mTop'>
<div onclick='window.scrollTo({top: 0});'>
<b:include name='arow-up-circle-icon'/>
</div>
</li>
</b:if>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</b:tag>
<!--[ Footer section ]-->
<footer class='sectionInner'>
<!--[ Credit ]-->
<div class='creditInner'>
<p>© <span id='getYear'>2021</span> ‧ <a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a>. All rights reserved</p>
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<!--[ Back top button ]-->
<div class='toTop' onclick='window.scrollTo({top: 0});'><b:include name='arow-up-icon'/></div>
</b:if>
</div>
</footer>
<a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a>
<b:if cond='!data:view.isHomepage and !data:view.isPage and data:blog.isMobileRequest'>
<!--[ Sticky ad ]-->
<!--<input class='stickAdin hidden' id='stickAdin' type='checkbox'/>
<div class='stickAd'>
<label class='stickAdclose' for='stickAdin'><b:include name='close-icon'/></label>
<div class='stickAdcontent'>
<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block;text-align:center'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>-->
</b:if>
<b:else/>
<!--[ Error pages ]-->
<section class='errorPage'>
<div class='errorContent'>
<h3><span>404</span>Something Wrong!</h3>
<p>The page you've requested can't be found. Why don't you browse around?</p>
<a class='button' expr:href='data:blog.homepageUrl.canonical'>Take me back</a>
</div>
</section>
</b:if>
</b:tag>
<b:if cond='!data:view.isError and data:view.url != data:view.url params { amp: "1" }'>
<!--[ additional javascript ]-->
<script>/*<![CDATA[*/ function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#mainContent").classList.add("darkMode"):document.querySelector("#mainContent").classList.remove("darkMode")}; function listMode(){localStorage.setItem("list","listmode"===localStorage.getItem("list")?"grid":"listmode"),"listmode"===localStorage.getItem("list")?document.querySelector("#mainContent").classList.add("listMode"):document.querySelector("#mainContent").classList.remove("listMode")}; function copyFunction(){document.getElementById("getlink").select(),document.execCommand("copy"),document.getElementById("shareNotif").innerHTML="<span>Link copied!</span>" };
/*! lazysizes - v5.3.0 by github.com/aFarkas */
!function(e){var t=function(u,D,f){"use strict";var k,H;if(function(){var e;var t={lazyClass:"lazy",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached",iframeLoadMode:0,srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:true,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:true,ricTimeout:0,throttleDelay:125};H=u.lazySizesConfig||u.lazysizesConfig||{};for(e in t){if(!(e in H)){H[e]=t[e]}}}(),!D||!D.getElementsByClassName){return{init:function(){},cfg:H,noSupport:true}}var O=D.documentElement,i=u.HTMLPictureElement,P="addEventListener",$="getAttribute",q=u[P].bind(u),I=u.setTimeout,U=u.requestAnimationFrame||I,o=u.requestIdleCallback,j=/^picture$/i,r=["load","error","lazyincluded","_lazyloaded"],a={},G=Array.prototype.forEach,J=function(e,t){if(!a[t]){a[t]=new RegExp("(\\s|^)"+t+"(\\s|$)")}return a[t].test(e[$]("class")||"")&&a[t]},K=function(e,t){if(!J(e,t)){e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)}},Q=function(e,t){var a;if(a=J(e,t)){e.setAttribute("class",(e[$]("class")||"").replace(a," "))}},V=function(t,a,e){var i=e?P:"removeEventListener";if(e){V(t,a)}r.forEach(function(e){t[i](e,a)})},X=function(e,t,a,i,r){var n=D.createEvent("Event");if(!a){a={}}a.instance=k;n.initEvent(t,!i,!r);n.detail=a;e.dispatchEvent(n);return n},Y=function(e,t){var a;if(!i&&(a=u.picturefill||H.pf)){if(t&&t.src&&!e[$]("srcset")){e.setAttribute("srcset",t.src)}a({reevaluate:true,elements:[e]})}else if(t&&t.src){e.src=t.src}},Z=function(e,t){return(getComputedStyle(e,null)||{})[t]},s=function(e,t,a){a=a||e.offsetWidth;while(a<H.minSize&&t&&!e._lazysizesWidth){a=t.offsetWidth;t=t.parentNode}return a},ee=function(){var a,i;var t=[];var r=[];var n=t;var s=function(){var e=n;n=t.length?r:t;a=true;i=false;while(e.length){e.shift()()}a=false};var e=function(e,t){if(a&&!t){e.apply(this,arguments)}else{n.push(e);if(!i){i=true;(D.hidden?I:U)(s)}}};e._lsFlush=s;return e}(),te=function(a,e){return e?function(){ee(a)}:function(){var e=this;var t=arguments;ee(function(){a.apply(e,t)})}},ae=function(e){var a;var i=0;var r=H.throttleDelay;var n=H.ricTimeout;var t=function(){a=false;i=f.now();e()};var s=o&&n>49?function(){o(t,{timeout:n});if(n!==H.ricTimeout){n=H.ricTimeout}}:te(function(){I(t)},true);return function(e){var t;if(e=e===true){n=33}if(a){return}a=true;t=r-(f.now()-i);if(t<0){t=0}if(e||t<9){s()}else{I(s,t)}}},ie=function(e){var t,a;var i=99;var r=function(){t=null;e()};var n=function(){var e=f.now()-a;if(e<i){I(n,i-e)}else{(o||r)(r)}};return function(){a=f.now();if(!t){t=I(n,i)}}},e=function(){var v,m,c,h,e;var y,z,g,p,C,b,A;var n=/^img$/i;var d=/^iframe$/i;var E="onscroll"in u&&!/(gle|ing)bot/.test(navigator.userAgent);var _=0;var w=0;var M=0;var N=-1;var L=function(e){M--;if(!e||M<0||!e.target){M=0}};var x=function(e){if(A==null){A=Z(D.body,"visibility")=="hidden"}return A||!(Z(e.parentNode,"visibility")=="hidden"&&Z(e,"visibility")=="hidden")};var W=function(e,t){var a;var i=e;var r=x(e);g-=t;b+=t;p-=t;C+=t;while(r&&(i=i.offsetParent)&&i!=D.body&&i!=O){r=(Z(i,"opacity")||1)>0;if(r&&Z(i,"overflow")!="visible"){a=i.getBoundingClientRect();r=C>a.left&&p<a.right&&b>a.top-1&&g<a.bottom+1}}return r};var t=function(){var e,t,a,i,r,n,s,o,l,u,f,c;var d=k.elements;if((h=H.loadMode)&&M<8&&(e=d.length)){t=0;N++;for(;t<e;t++){if(!d[t]||d[t]._lazyRace){continue}if(!E||k.prematureUnveil&&k.prematureUnveil(d[t])){R(d[t]);continue}if(!(o=d[t][$]("data-expand"))||!(n=o*1)){n=w}if(!u){u=!H.expand||H.expand<1?O.clientHeight>500&&O.clientWidth>500?500:370:H.expand;k._defEx=u;f=u*H.expFactor;c=H.hFac;A=null;if(w<f&&M<1&&N>2&&h>2&&!D.hidden){w=f;N=0}else if(h>1&&N>1&&M<6){w=u}else{w=_}}if(l!==n){y=innerWidth+n*c;z=innerHeight+n;s=n*-1;l=n}a=d[t].getBoundingClientRect();if((b=a.bottom)>=s&&(g=a.top)<=z&&(C=a.right)>=s*c&&(p=a.left)<=y&&(b||C||p||g)&&(H.loadHidden||x(d[t]))&&(m&&M<3&&!o&&(h<3||N<4)||W(d[t],n))){R(d[t]);r=true;if(M>9){break}}else if(!r&&m&&!i&&M<4&&N<4&&h>2&&(v[0]||H.preloadAfterLoad)&&(v[0]||!o&&(b||C||p||g||d[t][$](H.sizesAttr)!="auto"))){i=v[0]||d[t]}}if(i&&!r){R(i)}}};var a=ae(t);var S=function(e){var t=e.target;if(t._lazyCache){delete t._lazyCache;return}L(e);K(t,H.loadedClass);Q(t,H.loadingClass);V(t,B);X(t,"lazyloaded")};var i=te(S);var B=function(e){i({target:e.target})};var T=function(e,t){var a=e.getAttribute("data-load-mode")||H.iframeLoadMode;if(a==0){e.contentWindow.location.replace(t)}else if(a==1){e.src=t}};var F=function(e){var t;var a=e[$](H.srcsetAttr);if(t=H.customMedia[e[$]("data-media")||e[$]("media")]){e.setAttribute("media",t)}if(a){e.setAttribute("srcset",a)}};var s=te(function(t,e,a,i,r){var n,s,o,l,u,f;if(!(u=X(t,"lazybeforeunveil",e)).defaultPrevented){if(i){if(a){K(t,H.autosizesClass)}else{t.setAttribute("sizes",i)}}s=t[$](H.srcsetAttr);n=t[$](H.srcAttr);if(r){o=t.parentNode;l=o&&j.test(o.nodeName||"")}f=e.firesLoad||"src"in t&&(s||n||l);u={target:t};K(t,H.loadingClass);if(f){clearTimeout(c);c=I(L,2500);V(t,B,true)}if(l){G.call(o.getElementsByTagName("source"),F)}if(s){t.setAttribute("srcset",s)}else if(n&&!l){if(d.test(t.nodeName)){T(t,n)}else{t.src=n}}if(r&&(s||l)){Y(t,{src:n})}}if(t._lazyRace){delete t._lazyRace}Q(t,H.lazyClass);ee(function(){var e=t.complete&&t.naturalWidth>1;if(!f||e){if(e){K(t,H.fastLoadedClass)}S(u);t._lazyCache=true;I(function(){if("_lazyCache"in t){delete t._lazyCache}},9)}if(t.loading=="lazy"){M--}},true)});var R=function(e){if(e._lazyRace){return}var t;var a=n.test(e.nodeName);var i=a&&(e[$](H.sizesAttr)||e[$]("sizes"));var r=i=="auto";if((r||!m)&&a&&(e[$]("src")||e.srcset)&&!e.complete&&!J(e,H.errorClass)&&J(e,H.lazyClass)){return}t=X(e,"lazyunveilread").detail;if(r){re.updateElem(e,true,e.offsetWidth)}e._lazyRace=true;M++;s(e,t,r,i,a)};var r=ie(function(){H.loadMode=3;a()});var o=function(){if(H.loadMode==3){H.loadMode=2}r()};var l=function(){if(m){return}if(f.now()-e<999){I(l,999);return}m=true;H.loadMode=3;a();q("scroll",o,true)};return{_:function(){e=f.now();k.elements=D.getElementsByClassName(H.lazyClass);v=D.getElementsByClassName(H.lazyClass+" "+H.preloadClass);q("scroll",a,true);q("resize",a,true);q("pageshow",function(e){if(e.persisted){var t=D.querySelectorAll("."+H.loadingClass);if(t.length&&t.forEach){U(function(){t.forEach(function(e){if(e.complete){R(e)}})})}}});if(u.MutationObserver){new MutationObserver(a).observe(O,{childList:true,subtree:true,attributes:true})}else{O[P]("DOMNodeInserted",a,true);O[P]("DOMAttrModified",a,true);setInterval(a,999)}q("hashchange",a,true);["focus","mouseover","click","load","transitionend","animationend"].forEach(function(e){D[P](e,a,true)});if(/d$|^c/.test(D.readyState)){l()}else{q("load",l);D[P]("DOMContentLoaded",a);I(l,2e4)}if(k.elements.length){t();ee._lsFlush()}else{a()}},checkElems:a,unveil:R,_aLSL:o}}(),re=function(){var a;var n=te(function(e,t,a,i){var r,n,s;e._lazysizesWidth=i;i+="px";e.setAttribute("sizes",i);if(j.test(t.nodeName||"")){r=t.getElementsByTagName("source");for(n=0,s=r.length;n<s;n++){r[n].setAttribute("sizes",i)}}if(!a.detail.dataAttr){Y(e,a.detail)}});var i=function(e,t,a){var i;var r=e.parentNode;if(r){a=s(e,r,a);i=X(e,"lazybeforesizes",{width:a,dataAttr:!!t});if(!i.defaultPrevented){a=i.detail.width;if(a&&a!==e._lazysizesWidth){n(e,r,i,a)}}}};var e=function(){var e;var t=a.length;if(t){e=0;for(;e<t;e++){i(a[e])}}};var t=ie(e);return{_:function(){a=D.getElementsByClassName(H.autosizesClass);q("resize",t)},checkElems:t,updateElem:i}}(),t=function(){if(!t.i&&D.getElementsByClassName){t.i=true;re._();e._()}};return I(function(){H.init&&t()}),k={cfg:H,autoSizer:re,loader:e,init:t,uP:Y,aC:K,rC:Q,hC:J,fire:X,gW:s,rAF:ee}}(e,e.document,Date);e.lazySizes=t,"object"==typeof module&&module.exports&&(module.exports=t)}("undefined"!=typeof window?window:{});
/*! lazysizes unveilhooks - v5.3.0 */
!function(e,t){var a=function(){t(e.lazySizes),e.removeEventListener("lazyunveilread",a,!0)};t=t.bind(null,e,e.document),"object"==typeof module&&module.exports?t(require("lazysizes")):"function"==typeof define&&define.amd?define(["lazysizes"],t):e.lazySizes?a():e.addEventListener("lazyunveilread",a,!0)}(window,function(e,i,o){"use strict";var l,d,u={};function s(e,t,a){var n,r;u[e]||(n=i.createElement(t?"link":"script"),r=i.getElementsByTagName("script")[0],t?(n.rel="stylesheet",n.href=e):(n.onload=function(){n.onerror=null,n.onload=null,a()},n.onerror=n.onload,n.src=e),u[e]=!0,u[n.src||n.href]=!0,r.parentNode.insertBefore(n,r))}i.addEventListener&&(l=function(e,t){var a=i.createElement("img");a.onload=function(){a.onload=null,a.onerror=null,a=null,t()},a.onerror=a.onload,a.src=e,a&&a.complete&&a.onload&&a.onload()},addEventListener("lazybeforeunveil",function(e){var t,a,n;if(e.detail.instance==o&&!e.defaultPrevented){var r=e.target;if("none"==r.preload&&(r.preload=r.getAttribute("data-preload")||"auto"),null!=r.getAttribute("data-autoplay"))if(r.getAttribute("data-expand")&&!r.autoplay)try{r.play()}catch(e){}else requestAnimationFrame(function(){r.setAttribute("data-expand","-10"),o.aC(r,o.cfg.lazyClass)});(t=r.getAttribute("data-link"))&&s(t,!0),(t=r.getAttribute("data-script"))&&(e.detail.firesLoad=!0,s(t,null,function(){e.detail.firesLoad=!1,o.fire(r,"_lazyloaded",{},!0,!0)})),(t=r.getAttribute("data-require"))&&(o.cfg.requireJs?o.cfg.requireJs([t]):s(t)),(a=r.getAttribute("data-bg"))&&(e.detail.firesLoad=!0,l(a,function(){r.style.backgroundImage="url("+(d.test(a)?JSON.stringify(a):a)+")",e.detail.firesLoad=!1,o.fire(r,"_lazyloaded",{},!0,!0)})),(n=r.getAttribute("data-poster"))&&(e.detail.firesLoad=!0,l(n,function(){r.poster=n,e.detail.firesLoad=!1,o.fire(r,"_lazyloaded",{},!0,!0)}))}},!(d=/\(|\)|\s|'/)))});
/* lazy youtube */
( function() {var youtube = document.querySelectorAll(".lazyYoutube"); for (var i = 0; i < youtube.length; i++) {var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg"; var image = new Image(); image.setAttribute("class", "lazy"); image.setAttribute("data-src",source); image.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="); image.setAttribute("alt","Youtube video"); image.addEventListener( "load", function() {youtube[ i ].appendChild( image );}( i ) ); youtube[i].addEventListener( "click", function() {var iframe = document.createElement( "iframe" ); iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); this.innerHTML = ""; this.appendChild( iframe ); }); }; })(); /*]]>*/</script>
<!--[ Load More - Delete this section if you want to disable this feature ]-->
<b:include cond='data:view.isMultipleItems' name='post-paginationMore'/>
</b:if>
<!--[ </body> close ]-->
<!--</body>--></body>
<a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a><a href='https://www.techypranav.eu.org' style='display:none;'>Techy Pranav PKD ART</a>
</html>