:root,
:root .lgT:not(.drK),
:root .theme0:not(.drK) {
  /* Theme */
  --themeC: #482dff;
  /* Body */
  --headC: #08102b;
  --bodyC: #08102b;
  --bodyCa: #989b9f;
  --bodyB: #FFFFFF;
  /* Link */
  --linkC: #482dff;
  --linkB: #482dff;
  /* Wave */
  --waveB: #C6DAFC;
  /* Icon */
  --iconC: #08102b;
  --iconCa: #08102b;
  --iconCs: #767676;
  /* Header */
  --headerC: #48525c;
  --headerT: 16px;
  --headerW: 400;
  /* write 400(normal) or 700(bold) */
  --headerB: #fffdfc;
  --headerL: 1px;
  --headerI: #262d3d;
  --headerH: 60px;
  --headerHi: -60px;
  --headerHm: 60px;
  --headerR: 30px;
  /* Notif */
  --notifH: 60px;
  --notifU: #e8f0fe;
  --notifC: #01579b;
  /* Content */
  --contentB: #fffdfc;
  --contentL: #eceff1;
  --contentW: 1280px;
  --sideW: 300px;
  --transB: rgba(0, 0, 0, .05);
  /* Page */
  --pageW: 780px;
  --pageW: 780px;
  --postT: 36px;
  --postF: 16px;
  --postTm: 28px;
  --postFm: 15px;
  /* Widget */
  --widgetT: 15px;
  --widgetTw: 400;
  /* write 400(normal) or 700(bold) */
  --widgetTa: 25px;
  /* Nav */
  --navW: 230px;
  --navT: #08102b;
  --navI: #08102b;
  --navB: #fffdfc;
  --navL: 1px;
  /* Search */
  --srchI: #48525c;
  --srchB: #FFFFFF;
  /* Mob Men */
  --mobT: #08102b;
  --mobHv: #f1f1f0;
  --mobB: #EEEEEE;
  --mobL: 2px;
  --mobBr: 33px;
  /* Footer */
  --fotT: #08102b;
  --fotB: #fffdfc;
  --fotL: 2px;
  /* Font family */
  --fontH: Google Sans Text, Arial, Helvetica, sans-serif;
  --fontB: Google Sans Text, Arial, Helvetica, sans-serif;
  --fontBa: Google Sans Text, Arial, Helvetica, sans-serif;
  --fontC: Google Sans Mono, monospace;
  /* Trans */
  --trans-1: all .1s ease;
  --trans-2: all .2s ease;
  --trans-3: all .3s ease;
  --trans-4: all .4s ease;
  /* Synx */
  --synxBg: #f6f6f6;
  --synxC: #2f3337;
  --synxOrange: #b75501;
  --synxBlue: #015692;
  --synxGreen: #54790d;
  --synxRed: #f15a5a;
  --synxGray: #656e77;
  /* Border Radius */
  --buttonR: 50px;
  --greetR: 25px;
  --iconHr: 15px;
  --thumbEr: 15px;
  --srchMr: 20px;
  --srchDr: 20px;
  /* Dark */
  --darkT: #fffdfc;
  --darkTa: #989b9f;
  --darkU: #41B375;
  --darkW: #343435;
  --darkB: #1e1e1e;
  --darkBa: #2d2d30;
  --darkBs: #252526;
}

/* Dark Mode */
:root .drK {
  /* Theme */
  --themeC: #1e1e1e;
}

/* Theme 1 - Red */
:root .theme1:not(.drK) {
  /* Theme */
  --themeC: #D32F2F;
  /* Body */
  --bodyB: #FFFCFD;
  /* Link */
  --linkC: #F44336;
  --linkB: #F44336;
  /* Header */
  --headerB: #FFEBEE;
  /* Notif */
  --notifU: #FFEBEE;
  --notifC: #B71C1C;
  /* Search */
  --srchB: #FFEBEE;
  /* MobMn */
  --mobB: #FFEBEE;
  /* Wave */
  --waveB: #FFEBEE;
}

/* Theme 2 - Green */
:root .theme2:not(.drK) {
  /* Theme */
  --themeC: #00796B;
  /* Body */
  --bodyB: #FCFFFC;
  /* Link */
  --linkC: #009688;
  --linkB: #009688;
  /* Header */
  --headerB: #E0F2F1;
  /* Notif */
  --notifU: #E0F2F1;
  --notifC: #00796B;
  /* Search */
  --srchB: #E0F2F1;
  /* MobMn */
  --mobB: #E0F2F1;
  /* Wave */
  --waveB: #E0F2F1;
}

/* Theme 3 - Blue */
:root .theme3:not(.drK) {
  /* Theme */
  --themeC: #1565C0;
  /* Body */
  --bodyB: #FBFEFF;
  /* Link */
  --linkC: #1976D2;
  --linkB: #1976D2;
  /* Header */
  --headerB: #E3F2FD;
  /* Notif */
  --notifU: #E3F2FD;
  --notifC: #1565C0;
  /* Search */
  --srchB: #E3F2FD;
  /* MobMn */
  --mobB: #E3F2FD;
  /* Wave */
  --waveB: #E3F2FD;
}

/* Theme 4 - Yellow */
:root .theme4:not(.drK) {
  /* Theme */
  --themeC: #FFC107;
  /* Body */
  --bodyB: #FFFEFA;
  /* Link */
  --linkC: #FF8F00;
  --linkB: #FF8F00;
  /* Header */
  --headerB: #FFF8E1;
  /* Notif */
  --notifU: #FFF8E1;
  --notifC: #FF8F00;
  /* Search */
  --srchB: #FFF8E1;
  /* MobMn */
  --mobB: #FFF8E1;
  /* Wave */
  --waveB: #FFF8E1;
}

/* Theme 5 - Pink */
:root .theme5:not(.drK) {
  /* Theme */
  --themeC: #C2185B;
  /* Body */
  --bodyB: #FFFCFD;
  /* Link */
  --linkC: #D81B60;
  --linkB: #D81B60;
  /* Header */
  --headerB: #FCE4EC;
  /* Notif */
  --notifU: #FCE4EC;
  --notifC: #C2185B;
  /* Search */
  --srchB: #FCE4EC;
  /* MobMn */
  --mobB: #FCE4EC;
  /* Wave */
  --waveB: #FCE4EC;
}

/* Theme 6 - Orange */
:root .theme6:not(.drK) {
  /* Theme */
  --themeC: #E64A19;
  /* Body */
  --bodyB: #FBFEFF;
  /* Link */
  --linkC: #F4511E;
  --linkB: #F4511E;
  /* Header */
  --headerB: #FBE9E7;
  /* Notif */
  --notifU: #FBE9E7;
  --notifC: #E64A19;
  /* Search */
  --srchB: #FBE9E7;
  /* MobMn */
  --mobB: #FBE9E7;
  /* Wave */
  --waveB: #FBE9E7;
}

/* Theme 7 - Blue Grey */
:root .theme7:not(.drK) {
  /* Theme */
  --themeC: #455A64;
  /* Body */
  --bodyB: #FBFEFF;
  /* Link */
  --linkC: #546E7A;
  --linkB: #546E7A;
  /* Header */
  --headerB: #ECEFF1;
  /* Notif */
  --notifU: #ECEFF1;
  --notifC: #455A64;
  /* Search */
  --srchB: #ECEFF1;
  /* MobMn */
  --mobB: #ECEFF1;
  /* Wave */
  --waveB: #ECEFF1;
}

/* Theme 8 - Brown */
:root .theme8:not(.drK) {
  /* Theme */
  --themeC: #5D4037;
  /* Body */
  --bodyB: #FBFEFF;
  /* Link */
  --linkC: #5D4037;
  --linkB: #5D4037;
  /* Header */
  --headerB: #EFEBE9;
  /* Notif */
  --notifU: #EFEBE9;
  --notifC: #5D4037;
  /* Search */
  --srchB: #EFEBE9;
  /* MobMn */
  --mobB: #EFEBE9;
  /* Wave */
  --waveB: #EFEBE9;
}

/* Theme 9 - Purple */
:root .theme9:not(.drK) {
  /* Theme */
  --themeC: #7B1FA2;
  /* Body */
  --bodyB: #FBFEFF;
  /* Link */
  --linkC: #8E24AA;
  --linkB: #8E24AA;
  /* Header */
  --headerB: #F3E5F5;
  /* Notif */
  --notifU: #F3E5F5;
  --notifC: #7B1FA2;
  /* Search */
  --srchB: #F3E5F5;
  /* MobMn */
  --mobB: #F3E5F5;
  /* Wave */
  --waveB: #F3E5F5;
}

/* Theme 10 - Indigo */
:root .theme10:not(.drK) {
  /* Theme */
  --themeC: #283593;
  /* Body */
  --bodyB: #FBFEFF;
  /* Link */
  --linkC: #3949AB;
  --linkB: #3949AB;
  /* Header */
  --headerB: #E8EAF6;
  /* Notif */
  --notifU: #E8EAF6;
  --notifC: #283593;
  /* Search */
  --srchB: #E8EAF6;
  /* MobMn */
  --mobB: #E8EAF6;
  /* Wave */
  --waveB: #E8EAF6;
}

.acdn {
  position: relative;
  list-style: none;
  margin: 30px 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.7em;
  font-family: inherit
}

.acdn .ac {
  width: 100%;
  padding: 20px 0 20px 15px;
  margin: 10px 0;
  background: #f0f0ff;
  border-radius: 10px;
  border-left: 4px solid #8a8aff;
  box-shadow: 0 5px 10px rgba(51, 51, 51, .1)
}

.acdn .ac:nth-child(4n + 1) {
  background: #f0f0ff;
  border-left-color: #8a8aff
}

.acdn .ac:nth-child(4n + 2) {
  background: #fff0f3;
  border-left-color: #ff8aa1
}

.acdn .ac:nth-child(4n + 3) {
  background: #f0faff;
  border-left-color: #8ad8ff
}

.acdn .ac:nth-child(4n + 4) {
  background: #fff7f0;
  border-left-color: #ffc08a
}

.acdn .cont {
  margin: 0;
  padding-left: 27px;
  padding-right: 27px;
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: all .3s ease;
  color: #08102b
}

.acdn .cont ul,
.acdn .cont ol {
  padding-left: 13px
}

.acdn .cont li {
  padding: 0
}

.acdn .cont a {
  text-decoration: none;
  color: #08102b
}

.acdn .cont a:hover {
  text-decoration: underline
}

.acdn p:first-child {
  margin-top: 0
}

.acdn p:last-child {
  margin-bottom: 0
}

.acTtl {
  display: flex;
  align-items: center;
  font-weight: 700;
  color: #08102b
}

.acTtl span {
  display: flex;
  flex-grow: 1
}

.acTtl span:before {
  content: '';
  padding-left: 15px
}

.acIcn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 12px;
  height: 12px;
  position: relative
}

.acIcn:before,
.acIcn:after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #08102b
}

.acIcn:after {
  position: absolute;
  transform: rotate(90deg)
}

.acMn {
  display: none
}

.acMn:checked~.acTtl .acIcn:after {
  visibility: hidden;
  opacity: 0
}

.acMn:checked~.cont {
  max-height: 100vh;
  padding-top: 15px;
  padding-bottom: 8px
}

.darkMode .acdn .ac {
  background: #252526;
  border-left-color: #4c4c4e
}

.darkMode .acdn .cont,
.darkMode .acdn .cont a,
.darkMode .acTtl,
.darkMode .acMn:checked~.acTtl {
  color: #fefefe
}

.darkMode .acTtl .acIcn:before,
.darkMode .acTtl .acIcn:after,
.darkMode .acMn:checked~.acTtl .acIcn:before,
.darkMode .acMn:checked~.acTtl .acIcn:after {
  background: #fefefe
}

/* Widget Script for img click/ */
.Blog .post-entry img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none
}

/*<![CDATA[*/
/* Desktop Fonts */
/* Font Body and Alternative */

@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Google Sans Text'), local('Google-Sans-Text'), url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2')
}

/* Font Heading */
@font-face {
  font-family: 'Google Sans Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Google Sans Text'), local('Google-Sans-Text'), url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2')
}

/* Source Code Font */
@font-face {
  font-family: 'Google Sans Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Google Sans Mono'), local('Google-Sans-Mono'), url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format('woff2')
}

/*]]>*/
/*<![CDATA[*/
/* Standar CSS */
::selection {
  color: #fff;
  background: var(--linkB)
}

.drK ::selection {
  background: var(--darkU)
}

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

* {
  -webkit-tap-highlight-color: transparent
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  font-family: var(--fontH);
  color: var(--headC)
}

h1 {
  font-size: 2.5rem
}

h2 {
  font-size: 2rem
}

h3 {
  font-size: 1.7rem
}

h4 {
  font-size: 1.6rem
}

h5 {
  font-size: 1.3rem
}

h6 {
  font-size: 1.2rem
}

a {
  color: var(--linkC);
  text-decoration: none
}

a:hover {
  opacity: .9;
  transition: opacity .1s
}

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
}

input::placeholder {
  color: rgba(0, 0, 0, .5)
}

img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto
}

svg {
  width: 22px;
  height: 22px;
  fill: var(--iconC)
}

svg.line,
svg .line {
  fill: none !important;
  stroke: var(--iconC);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1
}

svg.c-1 {
  fill: var(--iconCa)
}

svg.c-2 {
  fill: var(--iconCs);
  opacity: .4
}

.hidden {
  display: none
}

.invisible {
  visibility: hidden
}

.clear {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  float: none;
  clear: both
}

.fCls {
  display: block;
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  z-index: 1;
  transition: var(--trans-1);
  background: transparent;
  opacity: 0;
  visibility: hidden
}

.free::after,
.new::after {
  display: inline-block;
  content: 'Free!';
  color: var(--linkC);
  font-size: 12px;
  font-weight: 400;
  margin: 0 5px
}

.new::after {
  content: 'New!'
}

svg .svgC {
  fill: var(--linkC)
}

svg.line .svgC {
  fill: none;
  stroke: var(--linkC)
}

.drK svg .svgC {
  fill: var(--darkU)
}

.drK svg.line .svgC {
  fill: none;
  stroke: var(--darkU)
}

.blog-admin,
.bD .bmPs,
.pInf .pIc .bmPs,
.bmPs>svg .d,
.isBkm,
.cBkPs,
.ckW,
.tocL,
.headR .headM .themeBtn,
.cusW {
  display: none
}

/* Unfilled Ads */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important
}

/* Main Element */
html {
  scroll-behavior: smooth;
  overflow-x: hidden
}

body {
  -webkit-font-smoothing: antialiased;
  position: relative;
  top: 0 !important;
  margin: 0;
  padding: 0 !important;
  width: 100%;
  font-family: var(--fontB);
  font-size: 14px;
  color: var(--bodyC);
  background: var(--bodyB);
  -webkit-font-smoothing: antialiased
}

.secIn {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  max-width: var(--contentW)
}

/* Notif Section */
.ntfC {
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--notifH);
  background: var(--notifU);
  color: var(--notifC);
  padding: 10px 15px;
  font-size: 13px;
  transition: var(--trans-1);
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px
}

.ntfC::before {
  content: '';
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, .15);
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  left: -12px;
  opacity: .1
}

.Rtl .ntfC::before {
  left: unset;
  right: -12px
}

.ntfC .secIn {
  width: 100%;
  position: relative
}

.ntfC .c {
  display: flex;
  align-items: center
}

.ntfT {
  width: 100%;
  padding-right: 15px;
  text-align: center
}

.ntfT a {
  color: var(--linkC);
  font-weight: 700
}

.ntfI:checked~.ntfC {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden
}

.ntfA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: initial
}

.ntfA>a {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-block;
  margin-left: 10px;
  padding: 8px 12px;
  border-radius: var(--buttonR);
  background: #fffdfc;
  color: var(--notifC);
  font-size: 12px;
  font-weight: 400;
  box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%);
  text-decoration: none
}

.drK .ntfA>a {
  background: var(--darkU);
  color: #fffdfc
}

/* Fixed/Pop-up Element */
.fixL {
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: -100%;
  z-index: 20;
  transition: var(--trans-1);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden
}

.fixLi,
.fixL .cmBri {
  width: 100%;
  max-width: 680px;
  max-height: calc(100% - 60px);
  border-radius: 12px;
  transition: inherit;
  z-index: 3;
  display: flex;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05)
}

.fixLs {
  padding: 60px 20px 20px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  background: var(--contentB)
}

.fixH,
.mnH {
  display: flex;
  background: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 10px;
  z-index: 2
}

.fixH .cl {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex-shrink: 0;
  min-width: 40px
}

.fixH .c::after,
.ntfC .c::after,
.mnH .c::before {
  content: '\2715';
  line-height: 18px;
  font-size: 14px
}

.fixT::before {
  content: attr(data-text);
  flex-grow: 1;
  padding: 16px 10px;
  font-size: 90%;
  opacity: .7
}

.fixT .c::before,
.mnH .c::after {
  content: attr(aria-label);
  font-size: 11px;
  margin: 0 8px;
  opacity: .6
}

.fixi:checked~.fixL,
#comment:target .fixL {
  margin-bottom: 0;
  opacity: 1;
  visibility: visible
}

.fixi:checked~.fixL .fCls,
#comment:target .fixL .fCls,
.BlogSearch input:focus~.fCls {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px)
}

.shBri {
  max-width: 520px
}

/* display:flex */
.headI,
.bIc {
  display: flex;
  align-items: center
}

/* Header Section */
header {
  width: 100%;
  z-index: 10;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, .07)
}

header a {
  display: block;
  color: var(--bodyC)
}

header svg {
  width: 20px;
  height: 20px;
  fill: var(--headerI);
  opacity: .8
}

header svg.line {
  fill: none;
  stroke: var(--headerI)
}

.headIc .tNav svg>* {
  opacity: 0;
  transition: var(--trans-1)
}

.hdMn .navI:not(:checked)~.mainWrp .headIc .tNav .h1,
.hdMn .navI:checked~.mainWrp .headIc .tNav .h2,
.bD:not(.hdMn) .navI:not(:checked)~.mainWrp .headIc .tNav .h3,
.bD:not(.hdMn) .navI:checked~.mainWrp .headIc .tNav .h1 {
  opacity: 1
}

.headCn {
  position: relative;
  height: var(--headerH);
  color: var(--headerC);
  background: var(--headerB);
  display: flex
}

.headL {
  display: flex;
  align-items: center;
  width: var(--navW);
  /* change var(--navW) to increase header title width */
  padding: 0 0 0 20px;
  transition: var(--trans-1)
}

.headL .headIc {
  flex: 0 0 30px
}

.headL .headN {
  width: calc(100% - 30px);
  padding: 0 0 0 5px
}

.headR {
  padding: 0 25px;
  flex-grow: 1;
  transition: var(--trans-1)
}

.headI .headP {
  display: flex;
  justify-content: flex-end;
  position: relative
}


.headI {
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: calc(100% + 15px);
  left: -7.5px;
  right: -7.5px
}

.headI>* {
  margin: 0 7.5px
}

.headIc {
  font-size: 11px;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0
}

.headIc>* {
  position: relative
}

.headIc svg {
  z-index: 1
}

.headIc .tNav .l {
  stroke: var(--linkC)
}

.drK .headIc .tNav .l {
  stroke: var(--darkU)
}

.headIc .isSrh {
  display: none
}

ul.headIc {
  position: relative;
  width: calc(100% + 14px);
  left: -7px;
  right: -7px;
  justify-content: flex-end
}

ul.headIc li {
  margin: 0 2px
}

ul.headIc li>* {
  cursor: pointer
}

.Header {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center
}

.Header img {
  max-width: 160px;
  max-height: 45px
}

.Header .headH {
  display: block;
  color: inherit;
  font-size: var(--headerT);
  font-weight: var(--headerW)
}

.Header .headH.hasSub {
  display: flex;
  align-items: baseline
}

.Header .headTtl {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block
}

.Header .headSub {
  margin: 0 5px;
  font: 400 11px var(--fontB);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 60px;
  opacity: .6
}

.Header .headSub::before {
  content: attr(data-text)
}

/* Icon */
.tIc {
  width: 30px;
  height: 30px;
  justify-content: center
}

.tIc::after {
  content: '';
  background: var(--transB);
  border-radius: var(--iconHr);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: var(--trans-1);
  opacity: 0;
  visibility: hidden
}

.tIc:hover::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1.3, 1.3)
}

.tDL .d2,
.drK .tDL .d1 {
  display: none
}

/* mainIn Section */
.mainWrp:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 170px;
  height: 170px;
  border-radius: 0 0 0 200px;
  background: rgba(0, 0, 0, .02);
  z-index: -1
}

.drK .mainWrp:after {
  background: rgba(0, 0, 0, .10)
}

.blogCont {
  flex-grow: 1;
  padding: 20px 0 0;
  position: relative;
  transition: var(--trans-1)
}

.blogCont .section:not(.no-items),
.blogCont .widget:not(:first-child) {
  margin-top: 40px
}

.blogCont .section:first-child,
.blogCont footer .widget:not(:first-child),
.blogCont .section.mobMn {
  margin-top: 0
}

.blogAd .section:not(.no-items) {
  margin-bottom: 40px
}

#notif-widget .widget:not(:first-child) {
  margin-top: 20px
}

.blogM {
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 40px
}

.sidebar {
  max-width: 500px;
  margin: 50px auto 0
}

.sideSticky {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--headerH) + 10px)
}

.onPs .blogM .mainbar {
  max-width: var(--pageW)
}

.onPg .blogM .mainbar {
  max-width: var(--pageW)
}

/* mainNav */
.mnBrs {
  background: var(--contentB)
}

.mnBr a {
  color: inherit
}

.mnBr ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.mnMob {
  align-self: flex-end;
  background: inherit;
  border-top: 1px solid var(--contentL);
  bottom: 0;
  left: 0;
  padding: 15px 20px 20px;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 1
}

.mnMob .mSoc {
  display: flex;
  justify-content: center;
  left: -7px;
  margin-top: 5px;
  position: relative;
  right: -7px;
  width: calc(100% + 14px)
}

.mnMob:not(.no-items)+.mnMen {
  padding-bottom: 100px
}

.mnMen {
  padding: 20px 15px
}

.mMenu {
  margin-bottom: 10px
}

.mMenu>* {
  display: inline
}

.mMenu>*:not(:last-child)::after {
  content: '\00B7';
  font-size: 90%;
  opacity: .6
}

.mMenu a:hover {
  text-decoration: underline
}

.mSoc>* {
  position: relative
}

.mSoc svg {
  z-index: 1
}

.mSoc svg,
.mnMn svg {
  width: 20px;
  height: 20px;
  opacity: .8
}

.mSoc span,
.mMenu span {
  opacity: .7
}

.mNav {
  display: none;
  position: relative;
  max-width: 30px
}

.mNav svg {
  height: 18px;
  opacity: .7;
  z-index: 1
}

.mnMn>li {
  position: relative
}

.mnMn>li.br::after {
  content: '';
  display: block;
  border-bottom: 1px solid var(--contentL);
  margin: 12px 5px
}

.mnMn li:not(.mr) .a:hover,
.mnMn ul li>*:hover {
  background: var(--transB)
}

.mnMn li:not(.mr) .a:hover,
.mnMn ul li a:hover {
  color: var(--linkC)
}

.mnMn li:not(.mr) ul {
  padding-left: 30px
}

.mnMn li ul {
  display: none;
  opacity: 0;
  visibility: hidden
}

.mnMn ul li>*,
.mnMn .a {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  position: relative;
  width: calc(100% + 10px);
  left: -5px;
  right: -5px;
  border-radius: 8px;
  transition: var(--trans-1)
}

.mnMn ul li>* {
  padding: 10px
}

.mnMn li li a>* {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  display: flex;
  line-height: 20px;
  overflow: hidden
}

.mnMn li li a>* svg {
  margin-right: 5px
}

.mnMn .a>* {
  margin: 0 5px
}

.mnMn .a:hover svg:not(.d) {
  fill: var(--linkC)
}

.mnMn .a:hover svg.line:not(.d) {
  fill: none;
  stroke: var(--linkC)
}

.mnMn .n,
.mnMn ul li>* {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 0 calc(100% - 64px)
}

.mnMn svg {
  flex-shrink: 0
}

.mnMn svg.d {
  width: 14px;
  height: 14px
}

.mnMn .drp.mr .a {
  font-size: 13px;
  padding-bottom: 0;
  opacity: .7
}

.mnMn .drp.mr svg.d {
  display: none
}

.mnMn .drpI:checked~.a svg.d {
  transform: rotate(180deg)
}

.mnMn .drpI:checked~ul {
  display: block;
  position: relative;
  opacity: 1;
  visibility: visible
}

@media screen and (min-width:897px) {

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn :not(.mr) ul li>*,
  .hdMn .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
    margin-left: 5px;
    overflow: visible;
    width: calc(100% + 5px)
  }

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul::before,
  .hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul::before {
    border-left: 1px solid;
    content: '';
    display: block;
    height: calc(100% - 20px);
    left: 15px;
    opacity: .2;
    position: absolute;
    width: 1px
  }

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul li a::before,
  .hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul li a::before {
    border-bottom: 1px solid;
    content: '';
    display: block;
    height: 1px;
    left: -15px;
    opacity: .2;
    position: absolute;
    top: 17.5px;
    width: 13px
  }

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul.s li a::before,
  .hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul.s li a::before {
    top: 20px
  }

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp:not(.mr) ul:not(.s)::before,
  .hdMn .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul:not(.s)::before {
    height: calc(100% - 18.5px)
  }

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg,
  .hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
    fill: var(--linkC)
  }

  .bD:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg.line,
  .hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
    fill: none;
    stroke: var(--linkC)
  }

  .drK:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg,
  .drK.hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
    fill: var(--darkU)
  }

  .drK:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn li li a:hover svg.line,
  .drK.hdMn .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
    fill: none;
    stroke: var(--darkU)
  }

  .Rtl:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .drp ul:before,
  .Rtl.hdMn .navI:checked~.mainWrp .blogMn .drp ul:before {
    left: unset;
    right: 15px
  }

  .Rtl:not(.hdMn) .navI:not(:checked)~.mainWrp .blogMn .mnMn :not(.mr) ul li>*,
  .Rtl.hdMn .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
    margin-left: 0;
    margin-right: 5px
  }

  .Rtl:not(.hdMn) .navI:not(checked)~.mainWrp .blogMn .drp ul li a:before,
  .Rtl.hdMn .navI:checked~.mainWrp .blogMn .drp ul li a:before {
    left: unset;
    right: -15px
  }
}

@media screen and (max-width:896px) {
  .bD .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
    margin-left: 5px;
    overflow: visible;
    width: calc(100% + 5px)
  }

  .bD .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul::before {
    border-left: 1px solid;
    content: '';
    display: block;
    height: calc(100% - 20px);
    left: 15px;
    opacity: .2;
    position: absolute;
    width: 1px
  }

  .bD .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul li a::before {
    border-bottom: 1px solid;
    content: '';
    display: block;
    height: 1px;
    left: -15px;
    opacity: .2;
    position: absolute;
    top: 17.5px;
    width: 13px
  }

  .bD .navI:checked~.mainWrp .blogMn .drp:not(.mr) ul.s li a::before {
    top: 20px
  }

  .bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
    fill: var(--linkC)
  }

  .bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
    fill: none;
    stroke: var(--linkC)
  }

  .drK.bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg {
    fill: var(--darkU)
  }

  .drK.bD .navI:checked~.mainWrp .blogMn .mnMn li li a:hover svg.line {
    fill: none;
    stroke: var(--darkU)
  }

  .Rtl .navI:checked~.mainWrp .blogMn .drp ul:before {
    left: unset;
    right: 15px
  }

  .Rtl .navI:checked~.mainWrp .blogMn .mnMn :not(.mr) ul li>* {
    margin-left: 0;
    margin-right: 5px
  }

  .Rtl .navI:checked~.mainWrp .blogMn .drp ul li a:before {
    left: unset;
    right: -15px
  }
}

/* Mobile Menu */
.mobMn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--mobL);
  border-radius: var(--mobBr) var(--mobBr) 0 0;
  background: var(--mobB);
  color: var(--mobT);
  padding: 0 20px;
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, .1);
  z-index: 2;
  font-size: 12px
}

.mobMn svg.line {
  stroke: var(--mobT);
  opacity: .8
}

.mobMn ul {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0
}

.mobMn li {
  display: flex;
  justify-content: center;
  flex: 1 0 20%
}

.mobMn li>* {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  height: 35px;
  border-radius: 20px;
  padding: 0 8px;
  transition: var(--trans-1);
  color: inherit
}

.mobMn li svg {
  margin: 0 3px;
  flex-shrink: 0
}

.mobMn li>*::after {
  content: attr(data-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
  margin: 0;
  transition: inherit;
  opacity: .7
}

.mobMn li>*:hover::after {
  max-width: 70px;
  margin: 0 3px
}

.mobMn .nmH {
  opacity: .7
}

.mobMn li>*:hover {
  background: var(--mobHv)
}

.mobMn li>*:hover svg.line {
  fill: var(--mobT) !important;
  opacity: .5
}

.mobMn li>*:hover svg.line .svgC {
  fill: var(--linkB) !important;
  stroke: var(--linkB)
}

/* Style 2 */
.MN-2 .mobMn {
  font-size: 10px
}

.mobS .mobMn li>* {
  flex-direction: column;
  position: relative
}

.mobS .mobMn li>*:hover {
  background: transparent
}

.MN-2 .mobMn li>*::after {
  max-width: none
}

/* Style 3 */
.MN-3 .mobMn li>*::after,
.MN-4 .mobMn li>*::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  bottom: -2px;
  opacity: 0
}

.MN-3 .mobMn li>*:hover::after,
.MN-4 .mobMn li>*:hover::after {
  background: var(--linkB);
  opacity: .7
}

.MN-3 .mobMn li>*:hover svg.line,
.MN-4 .mobMn li>*:hover svg.line {
  stroke: var(--linkB);
  fill: var(--linkB) !important;
  opacity: .7
}

/* Style 4 */
.MN-4 .mobMn {
  left: 15px;
  right: 15px;
  bottom: 15px;
  padding: 0 10px;
  border-radius: var(--headerR);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .1);
  transition: bottom 1.2s ease;
  -webkit-transition: bottom 1.2s ease
}

.MN-4 .mobMn.slide {
  bottom: -150px;
  transition: bottom 1.5s ease;
  -webkit-transition: bottom 1.5s ease
}

/* Back to Top */
.toTopB {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  transform: scale(0);
  transition: transform .3s ease, opacity .3s ease, visibility .3s ease, margin-bottom 1s ease
}

.toTopB.vsbl {
  visibility: visible;
  opacity: 1;
  transform: scale(1)
}

.MN-4 .toTopB {
  bottom: 20px
}

.toTopB:hover {
  opacity: .8
}

.toTopB svg {
  height: 100%;
  width: 100%;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  stroke-width: 1.5;
  cursor: pointer
}

.toTopB svg .b {
  fill: #fff;
  stroke: #e6e6e6;
  opacity: .9
}

.toTopB svg .c {
  fill: none;
  stroke: var(--linkC);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round
}

.toTopB svg .d {
  fill: none;
  stroke: var(--iconC)
}

.drK .toTopB svg .b {
  fill: var(--darkBa);
  stroke: #404045
}

.drK .toTopB svg .c {
  stroke: var(--darkU)
}

.drK .toTopB svg .d {
  stroke: var(--darkT)
}

/* Footer */
footer {
  padding: 40px 0 0;
  border-radius: 50px;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
  backdrop-filter: blur(10.1px);
  -webkit-backdrop-filter: blur(10.1px);
  color: var(--fotT);
  font-size: 95%;
  line-height: 1.8em;
  box-shadow: 0 0 15px rgb(0 0 0 / 7%);
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px
}

footer .widget {
  margin-bottom: 35px
}

footer .widget ul {
  list-style: none;
  margin: 0;
  padding: 0
}

footer .footerContent {
  display: flex;
  flex-wrap: wrap;
  padding: 0 25px
}

footer .footerContent>:first-child {
  width: 25%;
  margin-right: auto
}

footer .footerContent>:last-child {
  width: 30%;
  margin-left: auto
}

footer .footerContent>* {
  width: 18%
}

footer .footerContent .title {
  color: inherit;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600
}

footer .footerContent .title:after {
  display: none
}

footer .LinkList a {
  display: inline-flex;
  align-items: center;
  color: inherit;
  line-height: 24px
}

footer .LinkList a svg.line {
  width: 15px;
  height: 15px;
  margin-right: 15px
}

footer .aboutUs {
  margin-right: 25px
}

footer .aboutUs .titleText:before {
  content: attr(data-text);
  font-size: 13px;
  opacity: .6;
  display: block;
  margin-bottom: 5px
}

footer .aboutUs .aboutDesc {
  margin: 20px 0 0;
  line-height: 1.5em
}

footer .aboutLinks {
  display: flex;
  align-items: flex-start
}

footer .aboutLinks li:not(:last-child) {
  margin-right: 5px
}

footer .LinkList .aboutLinks a svg.line {
  width: 20px;
  height: 22px;
  margin-right: 0;
  stroke: var(--iconCa);
  stroke-width: 1.5
}

.drK footer .LinkList .aboutLinks a svg.line {
  stroke: var(--darkT)
}

footer .LinkList .aboutLinks a {
  display: flex
}

footer .creditInner {
  padding: 28px 25px
}

footer .creditInner {
  display: flex;
  justify-content: space-between
}

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;
  opacity: .6;
  white-space: nowrap
}

footer .toTop:before {
  content: 'To top'
}

footer .toTop svg {
  stroke: #262d3d;
  margin-left: 5px;
  width: 22px;
  height: 22px
}

@media screen and (max-width:896px) {
  footer {
    padding: 40px 0 3rem;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px
  }
}

@media screen and (max-width:640px) {

  footer .footerContent>*,
  footer .footerContent>:first-child,
  footer .footerContent>:last-child {
    width: 50%
  }
}

@media screen and (max-width:480px) {
  footer .creditInner {
    font-size: 12px
  }

  footer .footerContent>*,
  footer .footerContent>:first-child,
  footer .footerContent>:last-child {
    width: 100%
  }

  footer .footerContent>:nth-child(1) {
    order: 1
  }

  footer .footerContent>:nth-child(2) {
    order: 2
  }

  footer .footerContent>:nth-child(3) {
    order: 3
  }

  footer .footerContent>:nth-child(4) {
    order: 4
  }

  footer .toTop:before {
    content: 'Top'
  }
}

/* Wave Animation */
.wvC {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: -1
}

.wvS {
  position: relative
}

.wvS .waves {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  min-height: 100px;
  max-height: 150px
}

.wvH {
  position: relative;
  height: 60px;
  background: var(--waveB)
}

.plx>use {
  fill: var(--waveB);
  animation: waveMove 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.plx>use:nth-child(1) {
  opacity: .7;
  animation-delay: -2s;
  animation-duration: 7s
}

.plx>use:nth-child(2) {
  opacity: .5;
  animation-delay: -3s;
  animation-duration: 10s
}

.plx>use:nth-child(3) {
  opacity: .3;
  animation-delay: -4s;
  animation-duration: 13s
}

.plx>use:nth-child(4) {
  opacity: 1;
  animation-delay: -5s;
  animation-duration: 20s
}

@media (max-width: 768px) {
  .wvS .waves {
    height: 40px;
    min-height: 50px;
  }

  .wvC .wvH {
    height: 100px
  }
}

@keyframes waveMove {
  0% {
    transform: translate3d(-90px, 0, 0)
  }

  100% {
    transform: translate3d(85px, 0, 0)
  }
}

.drK .wvH {
  background: var(--darkW)
}

.drK .plx>use {
  fill: var(--darkW)
}

/* Article Section */
.onIndx .blogPts,
.itemFt .itm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  width: calc(100% + 20px);
  left: -10px;
  right: -10px
}

.onIndx .blogPts>*,
.itemFt .itm>* {
  flex: 0 0 calc(50% - 20px);
  width: calc(50% - 20px);
  margin-bottom: 0;
  margin-left: 10px;
  margin-right: 10px
}

.onIndx .blogPts>* {
  background: var(--contentB);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 10px 10px 45px;
  position: relative
}

.onIndx .blogPts .pTag {
  padding-bottom: 0
}

.onIndx .pTag .pInf {
  display: none
}

.onIndx .blogPts .pInf {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px
}

.onIndx .blogPts {
  align-items: stretch
}

.onIndx .blogPts.mty {
  display: block;
  width: 100%;
  left: 0;
  right: 0
}

.onIndx .blogPts.mty .noPosts {
  width: 100%;
  margin: 0
}

.onIndx .blogPts div.ntry {
  padding-bottom: 0;
  flex: 0 0 calc(100% - 20px)
}

.blogPts .ntry.noAd .widget

/*, .Blog ~ .HTML*/
  {
  display: none
}

.cPst .pLbls>* {
  padding: 16px 3px
}

.cPst .pLbls>*:not(:last-child) {
  padding-right: 0
}

.cPst .pLbls>*:not(:last-child)::after {
  padding-left: 3px
}

.ctgry article {
  animation: ctgryFade 1.5s;
  -webkit-animation: ctgryFade 1.5s
}

@keyframes ctgryFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes ctgryFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* Blog title */
.blogTtl {
  font-size: 14px;
  margin: 0 0 30px;
  width: calc(100% + 16px);
  display: flex;
  justify-content: space-between;
  position: relative;
  left: -8px;
  right: -8px
}

.blogTtl .t,
.blogTtl.hm .title {
  margin: 0 8px;
  flex-grow: 1
}

.blogTtl .t span {
  font-weight: 400;
  font-size: 90%;
  opacity: .7
}

.blogTtl .t span::before {
  content: attr(data-text)
}

.blogTtl .t span::after {
  content: '';
  margin: 0 4px
}

.blogTtl .t span.hm::after {
  content: '/';
  margin: 0 8px
}

/* No Post */
.blogPts .noPosts {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px
}

/* Thumbnail */
.pThmb {
  flex: 0 0 calc(50% - 12.5px);
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  margin-bottom: 20px;
  background: var(--transB)
}

.pThmb .thmb {
  display: block;
  position: relative;
  padding-top: 52.335%;
  color: inherit;
  transition: var(--trans-4);
  -webkit-transition: var(--trans-4)
}

article:hover .thmb {
  transform: scale(1.0);
  -webkit-transform: scale(1.03)
}

.pThmb .thmb amp-img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  max-height: 108%;
  text-align: center;
  transform: translate(-50%, -50%)
}

.pThmb div.thmb span::before {
  content: attr(data-text);
  opacity: .7;
  white-space: nowrap
}

.pThmb:not(.nul)::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .6) 60%, rgba(255, 255, 255, 0));
  animation: shimmer 2s infinite;
  content: ''
}

.pThmb.iyt:not(.nul) .thmb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .4) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z'/></svg>") center / 35px no-repeat;
  opacity: 0;
  transition: var(--trans-1)
}

.pThmb.iyt:not(.nul):hover .thmb::after {
  opacity: 1
}

/* Sponsored */
.iFxd {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 6px;
  font-size: 13px;
  line-height: 16px
}

.iFxd.l {
  right: auto
}

.Rtl .iFxd.l {
  right: 0;
  left: auto
}

.iFxd>* {
  display: flex;
  align-items: center;
  margin: 0 5px;
  padding: 5px 2.5px;
  border-radius: var(--thumbEr);
  background: var(--contentB);
  color: inherit;
  box-shadow: 0 8px 25px 0 rgba(0, 0, 0, .1)
}

.iFxd>* svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  margin: 0 2.5px;
  opacity: .7
}

.iFxd .cmnt,
.iFxd .pV {
  padding: 5px;
  color: var(--bodyC)
}

.iFxd .bM {
  cursor: pointer
}

.iFxd .bM:hover {
  opacity: .8
}

.iFxd .pV.hidden {
  display: none
}

.iFxd .cmnt::after,
.iFxd .pV::after {
  content: attr(data-text);
  margin: 0 2.5px;
  opacity: .8
}

.drK .iFxd>* svg.line {
  stroke: var(--iconC)
}

/* Label */
.pLbls::before,
.pLbls>*::before {
  content: attr(data-text)
}

.pLbls::before {
  opacity: .7
}

.pLbls a:hover {
  text-decoration: underline
}

.pLbls>* {
  color: inherit;
  display: inline;
  padding: 16px 0
}

.pLbls>*:not(:last-child)::after {
  content: '/'
}

/* Profile Images and Name */
.im {
  width: 35px;
  height: 35px;
  border-radius: 16px;
  background-color: var(--transB);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center
}

.im svg {
  width: 18px;
  height: 18px;
  opacity: .4
}

.nm::after {
  content: attr(data-text)
}

/* Title and Entry */
.pTtl {
  font-size: 1.1rem;
  line-height: 1.5em
}

.pTtl.sml {
  font-size: 1rem
}

.pTtl.itm {
  font-size: var(--postT);
  font-family: var(--fontBa);
  font-weight: 700;
  line-height: 1.3em
}

.pTtl.itm.nSpr {
  margin-bottom: 30px
}

.aTtl a:hover {
  color: var(--linkC)
}

.aTtl a,
.pSnpt {
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.pEnt {
  margin-top: 40px;
  font-size: var(--postF);
  font-family: var(--fontBa);
  line-height: 1.8em
}


.para {
  margin-top: 40px;
  font-size: 18px;
  font-family: var(--fontBa);
  line-height: 1.8em
}

/* Snippet, Description, Headers and Info */
.onIndx .pCntn {
  padding: 0 5px
}

.pHdr {
  margin-bottom: 8px
}

.pHdr .pLbls {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8
}

.pSml {
  font-size: 93%
}

.pSnpt {
  -webkit-line-clamp: 2;
  margin: 12px 0 0;
  font-family: var(--fontB);
  font-size: 14px;
  line-height: 1.5em;
  opacity: .8
}

.pSnpt.nTag {
  color: var(--linkC);
  opacity: 1;
  margin-bottom: 10px
}

.pDesc {
  font-size: 16px;
  line-height: 1.5em;
  margin: 8px 0 25px;
  opacity: .7
}

.pInf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 15px
}

.pInf.nTm {
  margin: 0
}

.pInf.nSpr .pJmp {
  opacity: 1
}

.pInf.nSpr .pJmp::before {
  content: attr(aria-label)
}

.pInf.ps {
  background: var(--contentB);
  box-shadow: 0 0 25px rgba(0, 0, 0, .07);
  padding: 15px;
  border-radius: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 25px;
  position: relative;
  width: 100%
}

.drK .pInf.ps {
  background: var(--darkBa)
}

.pInf.ps .pTtmp {
  opacity: 1
}

.pInf.ps .pTtmp::before {
  content: attr(data-date) ' '
}

.pInf.ps .pTtmp::after {
  display: inline
}

.pInf.ps.nul {
  display: none
}

.pInf .pIm {
  flex-shrink: 0;
  margin-right: 8px
}

.Rtl .pInf .pIm {
  margin-right: 0;
  margin-left: 8px
}

.pInf .pNm {
  flex-grow: 1;
  width: calc(100% - 160px);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline
}

.pInf .pNm.l {
  display: none
}

.pInf .pCm {
  flex-shrink: 0;
  max-width: 58px;
  margin: 0 2px
}

.pInf .pCm.l {
  max-width: 95px
}

.pInf .pIc {
  display: inline-flex;
  justify-content: flex-end;
  position: relative;
  width: calc(100% + 10px);
  left: -5px;
  right: -5px
}

.pInf .pIc>* {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: relative;
  margin: 0 2px;
  color: inherit
}

.pInf .pIc svg {
  width: 20px;
  height: 20px;
  opacity: .8;
  z-index: 1
}

.pInf .pIc .cmnt::before {
  content: attr(data-text);
  font-size: 11px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e6e6e6;
  color: var(--bodyC);
  position: absolute;
  top: -5px;
  right: 0;
  z-index: 2
}

.pInf .pDr {
  opacity: .7;
  display: inline-block;
  margin: 0 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%
}

.pInf .pDr>*:not(:first-child)::before {
  content: '\00B7';
  margin: 0 5px
}

.pInf a.nm {
  color: var(--bodyC)
}

.pInf a.nm:hover::after {
  text-decoration: underline
}

.drK .pInf a.nm {
  color: var(--darkT)
}

.pInf .pIn {
  display: inline
}

.pInf .nm {
  margin: 0 4px
}

/*.pInf .n .nm::before{content:attr(data-write) ' ';opacity:.7}*/
.pInf .im {
  width: 28px;
  height: 28px
}

.aTtmp {
  opacity: .8
}

.aTtmp,
.pJmp {
  overflow: hidden
}

.pTtmp::after,
.pJmp::before,
.iTtmp::before {
  content: attr(data-text);
  display: block;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.pJmp {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: var(--trans-2)
}

.pJmp::before {
  content: attr(aria-label)
}

.pJmp svg {
  height: 18px;
  width: 18px;
  stroke: var(--linkC);
  flex-shrink: 0
}

.ntry:hover .pJmp,
.itm:hover .pJmp {
  opacity: 1
}

.ntry:not(.noAd) .pJmp,
.itemFt .itm .pJmp {
  animation: indicator 2s 3s infinite
}

.ntry:not(.noAd):hover .pJmp,
.itemFt:hover .itm .pJmp {
  animation: none
}

/* Product view */
.pTag .pPad {
  padding: 10px 0
}

.pTag .pPric {
  font-size: 20px;
  color: var(--linkC);
  padding-top: 20px
}

.pTag .pPric::before,
.pTag .pInfo small {
  content: attr(data-text);
  font-size: small;
  opacity: .8;
  display: block;
  line-height: 1.5em;
  color: var(--bodyC)
}

.pTag .pInfo {
  font-size: 14px;
  line-height: 1.6em
}

.pTag .pInfo:not(.o) {
  position: relative;
  width: calc(100% + 20px);
  left: -10px;
  right: -10px;
  display: flex
}

.pTag .pInfo:not(.o)>* {
  width: 50%;
  padding: 0 10px
}

.pTag .pMart {
  margin: 10px 0 12px;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.6em;
  position: relative;
  width: calc(100% + 8px);
  left: -4px;
  right: -4px
}

.pTag .pMart>* {
  margin: 0 4px
}

.pTag .pMart small {
  width: calc(100% - 8px);
  margin-bottom: 10px
}

.pTag .pMart a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--contentL);
  border-radius: 12px;
  margin-bottom: 8px
}

.pTag .pMart img {
  width: 20px;
  display: block
}

/* Blog pager */
.blogPg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 90%;
  font-family: var(--fontB);
  line-height: 20px;
  color: #fffdfc;
  margin: 25px 0 50px;
  max-width: 100%
}

.blogPg>* {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  padding: 10px 13px;
  margin: 5px;
  color: inherit;
  background: var(--linkB);
  border-radius: var(--buttonR);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px
}

.blogPg>* svg {
  width: 18px;
  height: 18px;
  stroke: var(--darkT);
  stroke-width: 1.5
}

.blogPg>*::before {
  content: attr(data-text)
}

.blogPg .jsLd {
  margin-left: auto;
  margin-right: auto
}

.blogPg .nwLnk::before,
.blogPg .jsLd::before {
  display: flex;
}

.blogPg .nwLnk::after,
.blogPg .jsLd::after {
  content: attr(data-text);
  margin: 0 8px
}

.blogPg .olLnk::before {
  margin: 0 8px
}

.blogPg .nPst,
.blogPg .current {
  background: var(--contentL);
  color: var(--bodyCa)
}

.blogPg .nPst.jsLd svg {
  fill: var(--darkTa);
  stroke: var(--darkTa)
}

.blogPg .nPst svg.line {
  stroke: var(--darkTa)
}

/* Breadcrumb */
.brdCmb {
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.brdCmb a {
  color: var(--bodyC)
}

.brdCmb>*:not(:last-child)::after {
  content: '/';
  margin: 0 4px;
  font-size: 90%;
  opacity: .6
}

.brdCmb>* {
  display: inline
}

.brdCmb .tl::before {
  content: attr(data-text)
}

.brdCmb .hm a {
  font-size: 90%;
  opacity: .7
}

/* Article Style */
.pS h1,
.pS h2,
.pS h3,
.pS h4,
.pS h5,
.pS h6 {
  margin: 1.5em 0 18px;
  font-family: var(--fontBa);
  font-weight: 700;
  line-height: 1.5em
}

.pS h1:target,
.pS h2:target,
.pS h3:target,
.pS h4:target,
.pS h5:target,
.pS h6:target {
  padding-top: var(--headerH);
  margin-top: 0
}

/* Paragraph */
.pS p {
  margin: 1.7em 0
}

.pIndent {
  text-indent: 2.5rem
}

.onItm:not(.Rtl) .dropCap {
  float: left;
  margin: 4px 8px 0 0;
  font-size: 55px;
  line-height: 45px;
  opacity: .8
}

.pS hr {
  margin: 3em 0;
  border: 0
}

.pS hr::before {
  content: '\2027 \2027 \2027';
  display: block;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  opacity: .8;
  clear: both
}

.pRef {
  display: block;
  font-size: 14px;
  line-height: 1.5em;
  opacity: .7;
  word-break: break-word
}

/* Img and Ad */
.pS img {
  display: inline-block;
  border-radius: 5px;
  height: auto !important
}

.pS img.full {
  display: block !important;
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  max-width: none
}

.pS .widget,
.ps .pAd>* {
  margin: 40px 0
}

/* Note */
.note {
  position: relative;
  padding: 16px 20px 16px 50px;
  background: #e1f5fe;
  color: #3c4043;
  font-size: .85rem;
  font-family: var(--fontB);
  line-height: 1.6em;
  border-radius: 10px;
  overflow: hidden
}

.note::before {
  content: '';
  width: 60px;
  height: 60px;
  background: #81b4dc;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  left: -12px;
  opacity: .1
}

.note::after {
  content: '\002A';
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 20px;
  min-width: 15px;
  text-align: center
}

.note.wr {
  background: #ffdfdf;
  color: #48525c
}

.note.wr::before {
  background: #e65151
}

.note.wr::after {
  content: '\0021'
}

/* Ext link */
.extL {
  display: inline-flex;
  align-items: center
}

.extL::after {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  margin: 0 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='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 11L21.2 2.80005'/><path d='M22 6.8V2H17.2'/><path d='M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13'/></svg>") center / 14px no-repeat
}

.extL.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='2' 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>")
}

/* Scroll img */
.psImg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  margin: 2em 0;
  position: relative;
  left: -7px;
  right: -7px;
  width: calc(100% + 14px)
}

.psImg>* {
  width: calc(50% - 14px);
  margin: 0 7px 14px;
  position: relative
}

.psImg img {
  display: block
}

.scImg>* {
  width: calc(33.3% - 14px);
  margin: 0 7px
}

.btImg label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  transition: var(--trans-1);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  color: var(--darkT);
  font-size: 13px;
  font-family: var(--fontB)
}

.hdImg .shImg {
  width: 100%;
  margin: 0;
  left: 0;
  right: 0;
  transition: var(--trans-1);
  max-height: 0;
  opacity: 0;
  visibility: hidden
}

.inImg:checked~.hdImg .shImg {
  max-height: 1000vh;
  opacity: 1;
  visibility: visible
}

.inImg:checked~.hdImg .btImg label {
  opacity: 0;
  visibility: hidden
}

/* Post related */
.pRelate {
  margin: 40px 0;
  padding: 20px 0;
  border: 1px solid #989b9f;
  border-left: 0;
  border-right: 0;
  font-size: 14px;
  line-height: 1.8em
}

.pRelate a,
.drK .pRelate a {
  color: inherit
}

.pRelate a:hover {
  text-decoration: underline
}

.pRelate b {
  font-weight: 400;
  margin: 0;
  opacity: .8
}

.pRelate ul,
.pRelate ol {
  margin: 8px 0 0;
  padding: 0 20px
}

/* Blockquote */
blockquote,
.cmC i[rel=quote] {
  position: relative;
  font-size: .97rem;
  opacity: .8;
  line-height: 1.6em;
  margin-left: 0;
  margin-right: 0;
  padding: 5px 20px;
  border-left: 2px solid var(--contentL)
}

blockquote.s-1,
details.sp {
  font-size: .93rem;
  padding: 25px 25px 25px 45px;
  border: 1px solid #989b9f;
  border-left: 0;
  border-right: 0;
  line-height: 1.7em
}

blockquote.s-1::before {
  content: '\201D';
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 60px;
  line-height: normal;
  opacity: .5
}

/* Table */
.ps table {
  margin: 0 auto;
  font-size: 14px;
  font-family: var(--fontB)
}

.ps table:not(.tr-caption-container) {
  min-width: 90%;
  border: 1px solid var(--contentL);
  border-radius: 3px;
  overflow: hidden
}

.ps table:not(.tr-caption-container) td {
  padding: 16px
}

.ps table:not(.tr-caption-container) tr:not(:last-child) td {
  border-bottom: 1px solid var(--contentL)
}

.ps table:not(.tr-caption-container) tr:nth-child(2n+1) td {
  background: rgba(0, 0, 0, .01)
}

.ps table th {
  padding: 16px;
  text-align: inherit;
  border-bottom: 1px solid var(--contentL)
}

.ps .table {
  display: block;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-behavior: smooth
}

/* Img caption */
figure {
  margin-left: 0;
  margin-right: 0
}

.ps .tr-caption,
.psCaption,
figcaption {
  display: block;
  font-size: 14px;
  line-height: 1.6em;
  font-family: var(--fontB);
  opacity: .7
}

/* Syntax */
.pre {
  background: var(--synxBg);
  color: var(--synxC);
  direction: ltr
}

.pre:not(.tb) {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  margin: 1.7em auto;
  font-family: var(--fontC)
}

.pre pre {
  margin: 0;
  color: inherit;
  background: inherit
}

.pre:not(.tb)::before,
.cmC i[rel=pre]::before {
  content: '</>';
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  background: inherit;
  color: var(--synxGray);
  font-size: 10px;
  padding: 0 10px;
  z-index: 2;
  line-height: 30px
}

.pre:not(.tb).html::before {
  content: '.html'
}

.pre:not(.tb).css::before {
  content: '.css'
}

.pre:not(.tb).js::before {
  content: '.js'
}

.pre:not(.tb):hover::before {
  content: 'Double click to copy | </>'
}

.pre:not(.tb).html:hover::before {
  content: 'Double click to copy | .html'
}

.pre:not(.tb).css:hover::before {
  content: 'Double click to copy | .css'
}

.pre:not(.tb).js:hover::before {
  content: 'Double click to copy | .js'
}

.pre[data-text]:not([data-text='']):not(.tb)::before {
  content: attr(data-text)
}

.pre[data-text]:not([data-text='']):not(.tb):hover::before {
  content: 'Double Click to Copy | ' attr(data-text)
}

pre,
.cmC i[rel=pre] {
  display: block;
  position: relative;
  font-family: var(--fontC);
  font-size: 13px;
  line-height: 1.6em;
  border-radius: 3px;
  background: var(--synxBg);
  color: var(--synxC);
  padding: 30px 20px 20px;
  margin: 1.7em auto;
  -moz-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  overflow: auto;
  direction: ltr;
  white-space: pre
}

pre i {
  font-style: normal
}

pre i.block {
  color: #fff;
  background: var(--synxBlue)
}

pre i.green {
  color: var(--synxGreen)
}

pre i.gray {
  color: var(--synxGray)
}

pre i.red {
  color: var(--synxOrange)
}

pre i.blue {
  color: var(--synxBlue)
}

code {
  display: inline;
  padding: 5px;
  font-size: 14px;
  border-radius: 3px;
  line-height: inherit;
  color: var(--synxC);
  background: #f2f3f5;
  font-family: var(--fontC)
}

/* Multi syntax */
.pre.tb {
  border-radius: 5px
}

.pre.tb pre {
  margin: 0;
  background: inherit
}

.pre.tb .preH {
  font-size: 13px;
  border-color: rgba(0, 0, 0, .05);
  margin: 0
}

.pre.tb .preH>* {
  padding: 13px 20px
}

.pre.tb .preH::after {
  content: '</>';
  font-size: 10px;
  font-family: var(--fontC);
  color: var(--synxGray);
  padding: 15px;
  margin-left: auto
}

.pre.tb>:not(.preH) {
  display: none
}

.pS input[id*="1"]:checked~div[class*="C-1"],
.pS input[id*="2"]:checked~div[class*="C-2"],
.pS input[id*="3"]:checked~div[class*="C-3"],
.pS input[id*="4"]:checked~div[class*="C-4"] {
  display: block
}

/* ToC */
.pS details summary {
  list-style: none;
  outline: none
}

.pS details summary::-webkit-details-marker {
  display: none
}

details.sp {
  padding: 16px 20px;
  background: var(--contentB);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  border: 0;
  border-radius: 10px;
}

details.sp summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

details.sp summary::after {
  content: attr(data-show);
  padding: 4px 10px;
  background: var(--linkB);
  color: #fffdfc;
  font-size: 12px;
  border-radius: var(--buttonR);
  cursor: pointer
}

details.sp[open] summary::after {
  content: attr(data-hide)
}

details.toc a:hover {
  text-decoration: underline
}

details.toc a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: inherit
}

details.toc ol,
details.toc ul {
  padding: 0 20px;
  list-style-type: decimal
}

details.toc li ol,
details.toc li ul {
  margin: 5px 0 10px;
  list-style-type: lower-alpha
}

/* Accordion */
.showH {
  margin: 1.7em 0;
  font-size: .93rem;
  font-family: var(--fontB);
  line-height: 1.7em
}

details.ac {
  padding: 18px 15px;
  background: var(--contentB);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  margin: 20px 0;
  border-radius: 10px
}

details.ac summary {
  font-weight: 700;
  cursor: default;
  display: flex;
  align-items: baseline;
  transition: var(--trans-1);
  cursor: pointer
}

details.ac summary::before {
  content: '\203A';
  flex: 0 0 25px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5px;
  font-weight: 400;
  font-size: 1.33rem;
  color: inherit
}

details.ac[open] summary {
  color: var(--linkC)
}

details.ac:not(.alt)[open] summary::before {
  transform: rotate(90deg);
  padding: 0 0 0 5px;
  justify-content: center
}

details.ac.alt summary::before {
  content: '\002B';
  padding: 0 2px
}

details.ac.alt[open] summary::before {
  content: '\2212'
}

details.ac .aC {
  padding: 0 15px;
  opacity: .9
}

.drK details.sp,
.drK details.ac {
  background: var(--darkBs)
}

.drK details.sp summary::after {
  background: var(--darkU)
}

/* Tabs */
.tbHd {
  display: flex;
  border-bottom: 1px solid var(--contentL);
  margin-bottom: 30px;
  font-size: 14px;
  font-family: var(--fontB);
  line-height: 1.6em;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch
}

.tbHd>* {
  padding: 12px 15px;
  border-bottom: 1px solid transparent;
  transition: var(--trans-1);
  opacity: .6;
  white-space: nowrap;
  scroll-snap-align: start
}

.tbHd>*::before {
  content: attr(data-text)
}

.tbCn>* {
  display: none;
  width: 100%
}

.tbCn>* p:first-child {
  margin-top: 0
}

.pS input[id*="1"]:checked~.tbHd label[for*="1"],
.pS input[id*="2"]:checked~.tbHd label[for*="2"],
.pS input[id*="3"]:checked~.tbHd label[for*="3"],
.pS input[id*="4"]:checked~.tbHd label[for*="4"] {
  border-color: var(--linkB);
  opacity: 1
}

.pS input[id*="1"]:checked~.tbCn div[class*="Text-1"],
.pS input[id*="2"]:checked~.tbCn div[class*="Text-2"],
.pS input[id*="3"]:checked~.tbCn div[class*="Text-3"],
.pS input[id*="4"]:checked~.tbCn div[class*="Text-4"] {
  display: block
}

.tbHd.stick {
  position: -webkit-sticky;
  position: sticky;
  top: var(--headerH);
  background: var(--bodyB)
}

/* Split */
.ps .blogPg {
  font-size: 13px;
  justify-content: center;
  position: relative;
  width: calc(100% + 8px);
  left: -4px;
  right: -4px
}

.ps .blogPg>* {
  padding: 8px 15px;
  margin: 0 4px 8px
}

/* Button */
.button {
  display: inline-flex;
  align-items: center;
  margin: 10px 0;
  padding: 12px 15px;
  outline: 0;
  border: 0;
  border-radius: var(--buttonR);
  line-height: 20px;
  color: #fffdfc;
  background: var(--linkB);
  font-size: 14px;
  font-family: var(--fontB);
  white-space: nowrap;
  overflow: hidden;
  max-width: 320px
}

.button.ln {
  color: inherit;
  background: transparent;
  border: 1px solid var(--bodyCa)
}

.button.ln:hover {
  border-color: var(--linkB);
  box-shadow: 0 0 0 1px var(--linkB) inset
}

.btnF {
  display: flex;
  justify-content: center;
  margin: 10px 0;
  width: calc(100% + 12px);
  left: -6px;
  right: -6px;
  position: relative
}

.btnF>* {
  margin: 0 6px
}

/* Download btn */
.dlBox {
  max-width: 500px;
  background: #f1f1f0;
  border-radius: 10px;
  padding: 12px;
  margin: 1.7em 0;
  display: flex;
  align-items: center;
  font-size: 14px
}

.dlBox .fT {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 10px;
  background: rgba(0, 0, 0, .1);
  border-radius: var(--buttonR)
}

.dlBox .fT::before {
  content: attr(data-text);
  opacity: .7
}

.dlBox .fT.lazy {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat
}

.dlBox .fT.lazy::before {
  display: none
}

.dlBox a {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--buttonR);
  font-size: 13px
}

.dlBox a::after {
  content: attr(aria-label)
}

.dlBox .fN {
  flex-grow: 1;
  width: calc(100% - 200px);
  padding: 0 15px
}

.dlBox .fN>* {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.dlBox .fS {
  line-height: 16px;
  font-size: 12px;
  opacity: .8
}

.dldCo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  background: rgba(0, 0, 0, .03);
  border-radius: 10px;
  margin: 30px 0;
  transition: margin .6s ease;
  -webkit-transition: margin .6s ease
}

.dldCo::before {
  content: 'Generating Download Link...';
  position: absolute;
  z-index: 1;
  font-size: 13px;
  font-family: var(--fontB);
  opacity: .8
}

.dldBx {
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease;
  -webkit-transition: opacity .3s ease
}

.dldSl {
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, bottom .6s ease;
  -webkit-transition: opacity .3s ease, bottom .6s ease
}

.drK .dldCo {
  background: var(--darkBa)
}

/* Icon btn */
.icon {
  flex-shrink: 0;
  display: inline-flex
}

.icon::before {
  content: '';
  width: 18px;
  height: 18px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center
}

.icon::after {
  content: '';
  padding: 0 6px
}

.icon.dl::before,
.drK .button.ln .icon.dl::before {
  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'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")
}

.icon.demo::before {
  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='M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z'/><path d='M10.11 13.6501L13.69 10.0601'/></svg>")
}

.button.ln .icon.dl::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308102b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><polyline points='8 17 12 21 16 17'/><line x1='12' y1='12' x2='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg>")
}

/* Article Style Responsive */
@media screen and (max-width: 640px) {
  .pS img.full {
    width: calc(100% + 40px);
    left: -20px;
    right: -20px;
    border-radius: 0
  }

  .note {
    font-size: 13px
  }

  .scImg {
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
    width: calc(100% + 40px);
    left: -20px;
    right: -20px;
    padding: 0 13px;
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch
  }

  .scImg>* {
    flex: 0 0 80%;
    scroll-snap-align: center
  }

  .ps .table {
    position: relative;
    width: calc(100% + 40px);
    left: -20px;
    right: -20px;
    padding: 0 20px;
    display: flex
  }
}

@media screen and (max-width:500px) {
  .hdImg {
    width: 100%;
    left: 0;
    right: 0
  }

  .hdImg>*,
  .shImg>* {
    width: 100%;
    margin: 0 0 16px
  }

  .ps .tr-caption,
  .psCaption,
  figcaption {
    font-size: 13px
  }

  .btnF>* {
    flex-grow: 1;
    justify-content: center
  }

  .btnF>*:first-child {
    flex: 0 0 auto
  }

  .dlBox a {
    width: 42px;
    height: 42px;
    justify-content: center
  }

  .dlBox a::after,
  .dlBox .icon::after {
    display: none
  }
}

/* Author profile */
.admAbt {
  padding-top: 30px
}

.admPs {
  display: flex;
  max-width: 480px;
  margin: 30px 0;
  padding: 12px 12px 15px;
  background: var(--contentB);
  border-radius: 8px;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .1)
}

.admIm {
  flex-shrink: 0;
  padding: 5px 0 0
}

.admIm .im {
  width: 34px;
  height: 34px
}

.admI {
  flex-grow: 1;
  width: calc(100% - 34px);
  padding: 0 12px
}

.admN::before {
  content: attr(data-write) ' ';
  opacity: .7;
  font-size: 90%
}

.admN::after {
  content: attr(data-text)
}

.admA {
  margin: 5px 0 0;
  font-size: 90%;
  opacity: .9;
  line-height: 1.5em;
  /*display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden*/
}

/* Share btn */
.pSh {
  margin: 15px 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05)
}

.pShc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  width: calc(100% + 18px);
  left: -9px;
  right: -9px;
  font-size: 13px
}

.pShc::before {
  content: attr(data-text);
  margin: 0 9px;
  flex-shrink: 0
}

.pShc>* {
  margin: 0 5px;
  display: flex;
  align-items: center;
  color: inherit;
  padding: 12px;
  border-radius: var(--buttonR);
  background: #f1f1f0
}

.pShc .c {
  color: #fffdfc
}

.pShc .c svg {
  fill: #fffdfc
}

.pShc .c::after {
  content: attr(aria-label)
}

.pShc .fb {
  background: #1778F2
}

.pShc .wa {
  background: #128C7E
}

.pShc .tw {
  background: #1DA1F2
}

.pShc a::after {
  content: attr(data-text);
  margin: 0 3px
}

.pShc svg,
.cpL svg {
  width: 18px;
  height: 18px;
  margin: 0 3px
}

.shL {
  position: relative;
  width: calc(100% + 20px);
  left: -10px;
  right: -10px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

.shL>* {
  margin: 0 10px 20px;
  text-align: center
}

.shL>*::after {
  content: attr(data-text);
  font-size: 90%;
  opacity: .7;
  display: block
}

.shL a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 65px;
  height: 65px;
  color: inherit;
  margin: 0 auto 5px;
  padding: 8px;
  border-radius: 26px;
  background: #f1f1f0
}

.shL svg {
  opacity: .8
}

.cpL {
  padding-bottom: 15px
}

.cpL::before {
  content: attr(data-text);
  display: block;
  margin: 0 0 15px;
  opacity: .8
}

.cpL svg {
  margin: 0 4px;
  opacity: .7
}

.cpL input {
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(8, 16, 43, .4);
  padding: 18px 8px;
  flex-grow: 1
}

.cpL label {
  color: var(--linkC);
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  padding: 0 8px
}

.cpLb {
  display: flex;
  align-items: center;
  position: relative;
  background: #f1f1f0;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  padding: 0 8px
}

.cpLb:hover {
  border-color: rgba(0, 0, 0, .42);
  background: #ececec
}

.cpLn span {
  display: block;
  padding: 5px 14px 0;
  font-size: 90%;
  color: #2e7b32;
  transition: var(--trans-1);
  animation: fadein 2s ease forwards;
  opacity: 0;
  height: 22px
}

/* Label Hashtags */
.lbsHs {
  display: block;
  direction: ltr;
  text-align: left;
  margin-bottom: 25px
}

.lbsHs>a {
  color: var(--bodyC)
}

.drK .lbsHs>a {
  color: var(--darkT)
}

.lbHs {
  padding: 9px 12px;
  background: var(--contentB);
  font-family: var(--fontVa);
  font-size: 13px;
  border-radius: var(--greetR);
  box-shadow: 3px 6px 15px rgba(0, 0, 0, .07);
  margin-right: 5px
}

.lbHs::before {
  content: attr(data-text);
  opacity: .8
}

.drK .lbHs {
  background: var(--darkBa)
}

.Rtl .lbsHs {
  text-align: right
}

.Rtl .lbHs {
  margin-right: 0;
  margin-left: 5px
}

/* Widget Style */
.widget .imgThm {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: 100%;
  font-size: 12px;
  text-align: center;
  transform: translate(-50%, -50%)
}

.widget .title {
  margin: 0 0 25px;
  font-size: var(--widgetT);
  font-weight: var(--widgetTw);
  position: relative
}

.widget .title.dt::before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 20px;
  height: 20px;
  display: inline-block;
  opacity: .3;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 276.167 276.167' fill='%23989b9f'><path d='M33.144,2.471C15.336,2.471,0.85,16.958,0.85,34.765s14.48,32.293,32.294,32.293s32.294-14.486,32.294-32.293 S50.951,2.471,33.144,2.471z'/><path d='M137.663,2.471c-17.807,0-32.294,14.487-32.294,32.294s14.487,32.293,32.294,32.293c17.808,0,32.297-14.486,32.297-32.293 S155.477,2.471,137.663,2.471z'/><path d='M243.873,67.059c17.804,0,32.294-14.486,32.294-32.293S261.689,2.471,243.873,2.471s-32.294,14.487-32.294,32.294 S226.068,67.059,243.873,67.059z'/><path d='M243.038,170.539c17.811,0,32.294-14.483,32.294-32.293c0-17.811-14.483-32.297-32.294-32.297 s-32.306,14.486-32.306,32.297C210.732,156.056,225.222,170.539,243.038,170.539z'/><path d='M136.819,170.539c17.804,0,32.294-14.483,32.294-32.293c0-17.811-14.478-32.297-32.294-32.297 c-17.813,0-32.294,14.486-32.294,32.297C104.525,156.056,119.012,170.539,136.819,170.539z'/><path d='M243.771,209.108c-17.804,0-32.294,14.483-32.294,32.294c0,17.804,14.49,32.293,32.294,32.293 c17.811,0,32.294-14.482,32.294-32.293S261.575,209.108,243.771,209.108z'/></svg>") center / 20px no-repeat
}

.Rtl .widget .title::before {
  right: auto;
  left: 0;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg)
}

.widget .title::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: var(--widgetTa);
  margin: 0 10px;
  border-bottom: 1px solid var(--widgetTac);
  opacity: .5
}

.widget input[type=text],
.widget input[type=email],
.widget textarea {
  display: block;
  width: 100%;
  outline: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  border-radius: 4px 4px 0 0;
  background: #f3f3f4;
  padding: 25px 16px 8px 16px;
  line-height: 1.6em;
  transition: var(--trans-1)
}

.widget input[type=text]:hover,
.widget input[type=email]:hover,
.widget textarea:hover {
  border-color: rgba(0, 0, 0, .42);
  background: #ececec
}

.widget input[type=text]:focus,
.widget input[type=email]:focus,
.widget textarea:focus,
.widget input[data-text=fl],
.widget textarea[data-text=fl] {
  border-color: var(--linkB);
  background: #ececec
}

.widget input[type=button],
.widget input[type=submit] {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  outline: 0;
  border: 0;
  border-radius: 4px;
  color: #fffdfc;
  background: var(--linkB);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%
}

.widget input[type=button]:hover,
.widget input[type=submit]:hover {
  opacity: .7
}

/* Widget BlogSearch */
.BlogSearch {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12
}

.BlogSearch form {
  position: relative;
  min-width: 320px
}

.BlogSearch input {
  position: relative;
  display: block;
  background: var(--srchB);
  border: 0;
  outline: 0;
  margin-top: -100%;
  padding: 10px 55px;
  width: 100%;
  height: 72px;
  transition: var(--trans-1);
  z-index: 2;
  border-radius: 0 0 var(--srchMr) var(--srchMr)
}

.BlogSearch input:focus {
  margin-top: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}

.BlogSearch input:focus~button.sb {
  opacity: .9
}

.BlogSearch .sb {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 3;
  opacity: .7;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0
}

.BlogSearch .sb svg {
  width: 18px;
  height: 18px;
  stroke: var(--srchI)
}

.BlogSearch button.sb {
  left: auto;
  right: 0;
  opacity: 0;
  font-size: 13px
}

.BlogSearch button.sb::before {
  content: '\2715'
}

@media screen and (min-width:897px) {
  header .BlogSearch {
    position: static;
    z-index: 1
  }

  header .BlogSearch input {
    margin-top: 0;
    padding: 12px 42px;
    height: auto;
    font-size: 13px;
    border-radius: var(--srchDr);
    background: rgba(0, 0, 0, .03);
    width: calc(100% + 26px);
    left: -13px;
    right: -13px;
    transition: var(--trans-2)
  }

  header .BlogSearch input:hover {
    background: var(--transB)
  }

  header .BlogSearch input:focus {
    box-shadow: none;
    margin-top: 0;
    background: var(--transB)
  }

  header .BlogSearch .sb {
    padding: 0
  }

  header .BlogSearch .fCls {
    display: none
  }
}

/* Widget Profile */
.prfI:checked~.mainWrp .wPrf {
  top: 0;
  opacity: 1;
  visibility: visible
}

.prfI:checked~.mainWrp .wPrf~.fCls {
  z-index: 3;
  opacity: 1;
  visibility: visible
}

.wPrf {
  display: flex;
  position: absolute;
  top: -5px;
  right: 0;
  background: var(--contentB);
  border-radius: 16px 5px 16px 16px;
  width: 260px;
  max-height: 400px;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, .1);
  transition: var(--trans-1);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  overflow: hidden
}

.wPrf .prfS {
  background: inherit
}

.wPrf.tm .im {
  width: 39px;
  height: 39px;
  flex-shrink: 0
}

.wPrf.sl .im {
  width: 60px;
  height: 60px;
  border-radius: 26px;
  margin: 0 auto
}

.wPrf.sl .prfC {
  text-align: center
}

.prfH .c {
  display: none
}

.prfL {
  display: flex;
  align-items: center;
  position: relative;
  width: calc(100% + 16px);
  left: -8px;
  right: -8px;
  border-radius: 8px;
  padding: 8px 0;
  transition: var(--trans-1)
}

.prfL::after {
  content: attr(data-text);
  margin: 0 2px
}

.prfL>* {
  margin: 0 8px;
  flex-shrink: 0
}

a.prfL:hover {
  background: var(--transB)
}

.sInf {
  margin-bottom: 0
}

.sInf .sDt .l {
  display: inline-flex;
  align-items: center
}

.sInf .sTxt {
  margin: 5px auto 0;
  max-width: 320px;
  font-size: 93%;
  opacity: .9;
  line-height: 1.5em
}

.sInf .sTxt a {
  text-decoration: underline
}

.sInf .lc {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
  opacity: .8;
  font-size: 90%
}

.sInf .lc svg {
  width: 16px;
  height: 16px
}

.sInf .lc::after {
  content: attr(data-text);
  margin: 0 4px
}

/* Widget Scroll Menu */
.navS {
  background: var(--navB);
  overflow-y: hidden;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  padding: 0;
  border-radius: 10px
}

.navS ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap
}

.navS li {
  margin: 0 15px;
  padding: 10px 0;
  position: relative;
  scroll-snap-align: start
}

.navS li:first-child {
  margin-left: auto
}

.navS li:last-child {
  margin-right: auto
}

.navS .l {
  display: block;
  color: var(--bodyC);
  padding: 8px 0
}

.navS .l::before {
  content: attr(data-text)
}

.navS .l::after {
  content: '';
  height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--linkC);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0
}

.navS span.l {
  opacity: .7
}

.navS a.l:hover,
.navS .l.a {
  color: var(--linkC)
}

@media screen and (max-width:896px) {
  .navS .secIn {
    padding: 0
  }

  .navS li {
    margin: 0;
    padding: 8px 0;
    display: flex
  }

  .navS li::before {
    content: '';
    padding: 10px
  }

  .navS ul::after {
    content: '';
    display: block;
    padding: 10px;
    scroll-snap-align: start
  }

  .navS .l {
    position: relative
  }

  .navS .l::after {
    bottom: -8px
  }

  .navS a.l:hover::after,
  .navS .l.a::after {
    opacity: 1
  }
}

@media screen and (max-width:500px) {
  .navS {
    font-size: 13px
  }
}

.drK .navS {
  background: var(--darkBs)
}

.drK .navS .l {
  color: var(--darkC)
}

.drK .navS a.l:hover,
.drK .navS .l.a {
  color: var(--darkU)
}

.drK .navS .l::after {
  background: var(--darkU)
}

/* Widget FeaturedPost */
@media screen and (min-width:501px) {
  .FeaturedPost .itemFt {
    position: relative;
    overflow: hidden;
    padding: 10px;
    background: var(--contentB);
    box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
    border-radius: 10px
  }

  .drK .FeaturedPost .itemFt {
    background: var(--darkBa)
  }

  .FeaturedPost .itemFt::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 15px;
    background: var(--linkB);
    border-radius: 0 0 0 20px;
    opacity: .2
  }
}

.itemFt .itm>* {
  flex: 0 0 310px;
  width: 310px
}

.itemFt .itm>*:last-child {
  flex: 1 0 calc(100% - 310px - 40px);
  width: calc(100% - 310px - 40px)
}

/* Widget PopularPosts */
.PopularPosts {
  padding: 20px 20px 30px;
  background: var(--contentB);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  border-radius: 10px
}

.itemPp {
  counter-reset: p-cnt
}

.itemPp .iCtnt {
  display: flex
}

.itemPp>*:not(:last-child) {
  margin-bottom: 25px
}

.itemPp .iCtnt::before {
  flex-shrink: 0;
  content: '0' counter(p-cnt);
  counter-increment: p-cnt;
  width: 25px;
  opacity: .6;
  font-size: 85%;
  line-height: 1.8em
}

.iInr {
  flex: 1 0;
  width: calc(100% - 25px)
}

.iTtl {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5em
}

.iTtmp {
  display: inline-flex
}

.iTtmp::after {
  content: '\2014';
  margin: 0 5px;
  color: var(--widgetTac);
  opacity: .7
}

.iInf {
  margin: 0 25px 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.iInf .pLbls {
  display: inline;
  opacity: .8
}

/* Widget Label */
/* List Label */
.Label {
  padding: 20px;
  background: var(--contentB);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  border-radius: 10px
}

.wL ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: calc(100% + 30px);
  left: -15px;
  right: -15px;
  font-size: 13px
}

.wL li {
  width: calc(50% - 10px);
  margin: 0 5px
}

.wL li>* {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--bodyC);
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  line-height: 20px
}

.wL li>* svg {
  width: 18px;
  height: 18px;
  opacity: .8
}

.wL li>*:hover svg,
.wL li>div svg {
  /*fill:var(--linkC) !important;*/
  stroke: var(--linkC)
}

.wL li>*:hover .lbC,
.wL li>div .lbC {
  color: var(--linkC)
}

.wL .lbR {
  display: inline-flex;
  align-items: center
}

.wL .lbR .lbC {
  margin: 0 5px
}

.wL .lbAl {
  max-height: 0;
  overflow: hidden;
  transition: var(--trans-4)
}

.wL .lbM {
  display: inline-block;
  margin-top: 10px;
  line-height: 20px;
  color: var(--linkC);
  cursor: pointer
}

.wL .lbM::before {
  content: attr(data-show)
}

.wL .lbM::after,
.wL .lbC::after {
  content: attr(data-text)
}

.wL .lbM::after {
  margin: 0 8px
}

.wL .lbT {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .7
}

.wL .lbC,
.wL .lbM::after {
  flex-shrink: 0;
  font-size: 12px;
  opacity: .7
}

.lbIn:checked~.lbAl {
  max-height: 1000vh
}

.lbIn:checked~.lbM::before {
  content: attr(data-hide)
}

.lbIn:checked~.lbM::after {
  visibility: hidden
}

.wL.bg ul {
  width: calc(100% + 10px);
  left: -5px;
  right: -5px
}

.wL.bg li {
  margin-bottom: 10px
}

.wL.bg li>* {
  background: #f6f6f6
}

/* Cloud Label */
.wL.cl {
  display: flex;
  flex-wrap: wrap
}

.wL.cl>*,
.wL.cl .lbAl>* {
  display: block;
  max-width: 100%
}

.wL.cl .lbAl {
  display: flex;
  flex-wrap: wrap
}

.wL.cl .lbC::before {
  content: '';
  margin: 0 4px;
  flex: 0 0
}

.wL.cl .lbN {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 9px 13px;
  border: 1px solid var(--contentL);
  border-radius: 3px;
  color: inherit;
  line-height: 20px
}

.wL.cl .lbN:hover .lbC,
.wL.cl div.lbN .lbC {
  color: var(--linkB);
  opacity: 1
}

.wL.cl .lbN:not(div):hover,
.wL.cl div.lbN {
  border-color: var(--linkB)
}

.wL.cl .lbSz {
  display: flex
}

.wL.cl .lbSz::after {
  content: '';
  margin: 0 4px;
  flex: 0 0
}

/* Widget ContactForm */
.ContactForm {
  max-width: 500px;
  font-family: var(--fontB);
  font-size: 14px
}

.cArea:not(:last-child) {
  margin-bottom: 25px
}

.cArea label {
  display: block;
  position: relative
}

.cArea label .n {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: rgba(8, 16, 43, .4);
  line-height: 1.6em;
  padding: 15px 16px 0;
  border-radius: 4px 4px 0 0;
  transition: var(--trans-1)
}

.cArea label .n.req::after {
  content: '*';
  font-size: 85%
}

.cArea textarea {
  height: 100px
}

.cArea textarea:focus,
.cArea textarea[data-text=fl] {
  height: 200px
}

.cArea input:focus~.n,
.cArea textarea:focus~.n,
.cArea input[data-text=fl]~.n,
.cArea textarea[data-text=fl]~.n {
  padding-top: 5px;
  color: rgba(8, 16, 43, .7);
  font-size: 90%;
  background: #ececec
}

.cArea .h {
  display: block;
  font-size: 90%;
  padding: 5px 16px 0;
  opacity: .7;
  line-height: normal
}

.nArea .contact-form-error-message-with-border {
  color: #d32f2f
}

.nArea .contact-form-success-message-with-border {
  color: #2e7b32
}

.tNtf img.contact-form-cross {
  display: none
}

/* Widget Sliders */
.sldO {
  position: relative;
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  -ms-overflow-style: none
}

.sldO.no-items {
  display: none
}

.sldO.no-items+.section {
  margin-top: 0
}

.sldO .widget:not(:first-child) {
  margin-top: 0
}

.sldO .widget {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background: transparent;
  outline: 0;
  border: 0
}

.sldC {
  position: relative
}

.sldS {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  z-index: -1
}

.sldIm {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--transB);
  display: block;
  padding-top: 40%;
  border-radius: 5px;
  color: #fffdfc;
  font-size: 13px
}

.sldT {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  padding: 20px;
  background: linear-gradient(0deg, rgba(30, 30, 30, .1) 0%, rgba(30, 30, 30, .05) 60%, rgba(30, 30, 30, 0) 100%);
  border-radius: 0 0 3px 3px
}

.sldS {
  animation-name: tonext, snap;
  animation-timing-function: ease;
  animation-duration: 4s;
  animation-iteration-count: infinite
}

.sldO .widget:last-child .sldS {
  animation-name: tostart, snap
}

.Rtl .sldS {
  animation-name: tonext-rev, snap
}

.Rtl .sldO .widget:last-child .sldS {
  animation-name: tostart-rev, snap
}

.sldO:hover .widget .sldS,
.Rtl .sldO:hover .widget .sldS,
.sldO:focus-within .widget .sldS,
.Rtl .sldO:focus-within .widget .sldS {
  animation-name: none
}

@media (prefers-reduced-motion:reduce) {

  .sldS,
  .Rtl .sldS {
    animation-name: none
  }
}

@media screen and (max-width:640px) {
  .sldO {
    width: calc(100% + 40px);
    left: -20px;
    right: -20px;
    padding: 0 12.5px 10px;
    border-radius: 0
  }

  .sldO .widget {
    flex: 0 0 90%;
    width: 90%;
    margin: 0 7.5px;
    box-shadow: 0 10px 8px -8px rgb(0 0 0 / 12%)
  }

  .sldT {
    padding: 10px 15px
  }

  .sldIm {
    font-size: 12px
  }
}

/* Google Transalte */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-simple img,
img.goog-te-gadget-icon,
.goog-te-menu-value span,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-logo-link,
.goog-te-balloon-frame {
  display: none !important
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important
}

.goog-te-menu-frame {
  box-shadow: none !important
}

.goog-te-gadget-simple {
  background-color: transparent !important;
  border: none !important;
  outline: 0 !important;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important
}

#google_translate_element {
  position: absolute !important;
  z-index: 2 !important;
  overflow: hidden !important
}

#google_translate_element,
.skiptranslate.goog-te-gadget,
.goog-te-gadget-simple {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important
}

/* Widget Music Player */
#musicPlayer {
  position: relative;
  direction: ltr;
  width: 100%;
  min-height: 200px;
  max-width: 480px;
  margin: 20px 0;
  background: rgba(0, 0, 0, .03);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center
}

#musicPlayer::before {
  content: 'Loading Tracks...';
  position: absolute;
  color: inherit;
  font-size: 13px;
  font-family: var(--fontB);
  opacity: .8
}

.drK #musicPlayer {
  background: var(--darkBs)
}

/* Pop-up */
.fxPu {
  position: fixed;
  top: -50%;
  bottom: -50%;
  top: -50%;
  left: -50%;
  right: -50%;
  z-index: 70;
  background: rgba(0, 0, 0, .4);
  visibility: hidden;
  opacity: 0;
  transition: all .6s ease;
  -webkit-transition: all .6s ease
}

.fxPu.visible {
  visibility: visible;
  opacity: 1
}

.fxPuW {
  position: fixed;
  top: 0;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 71;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.fxPuC {
  position: relative;
  background: #fffdfc;
  width: 100%;
  max-width: 500px;
  padding: 20px 25px 25px;
  border-radius: 20px
}

.fxPuCl::after {
  content: '\2715';
  line-height: 16px;
  font-size: 12px;
  color: #fffdfc;
  position: absolute;
  top: -15px;
  right: 15px;
  background: var(--linkC);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: var(--trans-1);
  -webkit-transition: var(--trans-1);
  cursor: pointer
}

.fxPuCl:hover::after {
  transform: scale(1.03);
  -webkit-transform: scale(1.03)
}

.fxPuS {
  display: block;
  text-align: center;
  margin-bottom: 5px
}

.fxPuS svg.line {
  stroke-width: 1;
  width: 50px;
  height: 50px
}

.fxPuH {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--fontBa);
  margin-bottom: 10px;
  text-align: center
}

.fxPuD {
  line-height: 1.7em;
  font-size: 15px
}

.fxPuB {
  text-align: center;
  margin-top: 20px
}

.fxPuB .btn {
  width: 45px;
  height: 45px;
  outline: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--linkC);
  border-radius: 50%
}

.fxPuB .btn:hover {
  opacity: .8
}

.fxPuB .btn svg {
  stroke: #fffdfc
}

.drK .fxPuC {
  background: var(--darkBs)
}

.drK .fxPuCl::after,
.drK .fxPuB .btn {
  background: var(--darkU)
}

/* Toast Notif */
.tNtf span {
  position: fixed;
  left: 24px;
  bottom: -70px;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  z-index: 997;
  background: #323232;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  font-family: var(--fontB);
  border-radius: 3px;
  padding: 13px 24px;
  box-shadow: 0 5px 35px rgba(149, 157, 165, .3);
  opacity: 0;
  transition: var(--trans-1);
  animation: slidein 2.3s ease forwards;
  -webkit-animation: slidein 2.3s ease forwards
}

.tNtf span i {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  margin: 0 5px;
  opacity: .8
}

.tNtf span i.check {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>") center / 14px no-repeat
}

.tNtf span i.warn {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(2.500000, 3.000000)'><path 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'/><line x1='9.5' y1='5.5' x2='9.5' y2='9.395'/><line x1='9.4957' y1='12.895' x2='9.5047' y2='12.895'/></g></svg>") center / 14px no-repeat
}

.tNtf span i.copy {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>") center / 14px no-repeat
}

.tNtf span i.clipboard {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1' ry='1'/></svg>") center / 14px no-repeat
}

.tNtf span i.onCloud {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/></svg>") center / 14px no-repeat
}

.tNtf span i.offCloud {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3'/><line x1='1' y1='1' x2='23' y2='23'/></svg>") center / 14px no-repeat
}

.tNtf span i.onWifi {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.55a11 11 0 0 1 14.08 0'/><path d='M1.42 9a16 16 0 0 1 21.16 0'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>") center / 14px no-repeat
}

.tNtf span i.offWifi {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='1' x2='23' y2='23'/><path d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/><path d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/><path d='M10.71 5.05A16 16 0 0 1 22.58 9'/><path d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>") center / 14px no-repeat
}

.Rtl .tNtf span {
  left: auto;
  right: 24px
}

@media screen and (max-width:896px) {
  .tNtf span {
    margin-bottom: 50px
  }
}

@media screen and (max-width:500px) {
  .tNtf span {
    left: 20px;
    right: 20px;
    font-size: 13px
  }

  .Rtl .tNtf span {
    left: 20px;
    right: 20px
  }
}

.drK .tNtf span {
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}

.MN-4 .tNtf span {
  margin-bottom: 0;
  animation-duration: 2s;
  -webkit-animation-duration: 2s
}

/* Neon Lighting */
.nLght::before,
.nLght::after {
  content: '';
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 55;
  background: linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132, #4086F4, #31A952, #FBBE01, #EB4132);
  background-size: 200%;
  -webkit-animation: animeNeon 5s linear infinite;
  animation: animeNeon 5s linear infinite;
  visibility: none;
  opacity: 0;
  transition: all 1s ease
}

.nLght::after {
  height: 10px;
  filter: blur(10px)
}

.nLght.vsbl::before,
.nLght.vsbl::after {
  visibility: visible;
  opacity: .7
}

@-webkit-keyframes animeNeon {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

@keyframes animeNeon {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

/* Maintenance Mode */
.mtm {
  position: fixed;
  left: 0;
  right: 0;
  top: -35%;
  bottom: -35%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bodyB);
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  visibility: visible;
  opacity: 1;
  z-index: 499
}

.mtm.hdn {
  visibility: hidden;
  opacity: 0
}

.mtmC {
  max-width: 450px;
  padding: 20px;
  text-align: center
}

.mtmH {
  font-weight: 700;
  font-size: 1.5rem;
  font-family: var(--fontBa);
  margin-bottom: 10px
}

.mtmD {
  margin-bottom: 10px
}

.mtm .clock {
  width: 100%;
  font-size: 25px;
  text-align: center;
  font-family: var(--fontBa);
  font-weight: 400;
  position: relative;
  left: 0;
  right: 0
}

.mtm .tBox {
  width: 65px;
  height: 65px;
  margin: 3px;
  padding-top: 8px;
  background-color: #f4efff;
  border-radius: 20px;
  display: inline-block
}

.mtm .unit {
  display: block;
  font-size: 10px;
  margin: auto;
  font-family: var(--fontB);
  opacity: 0.8
}

.drK .mtm {
  background: var(--darkB)
}

.drK .mtm .tBox {
  background: var(--darkBa)
}

/* Sticky Ad */
.ancrA {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 70px;
  max-height: 200px;
  padding: 5px;
  box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
  transition: var(--trans-1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fffdfc;
  z-index: 50;
  border-top: 1px solid var(--contentL)
}

.ancrC {
  width: 40px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px 0 0;
  border: 1px solid var(--contentL);
  border-bottom: 0;
  border-right: 0;
  position: absolute;
  right: 0;
  top: -30px;
  background: inherit
}

.ancrC svg {
  width: 18px;
  height: 18px;
  fill: none !important;
  stroke: var(--iconC);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4
}

.ancrCn {
  flex-grow: 1;
  overflow: hidden;
  display: block;
  position: relative
}

.ancrI:checked~.ancrA {
  padding: 0;
  min-height: 0
}

.ancrI:checked~.ancrA .ancrCn {
  display: none
}

.ancrI:checked~.ancrA .ancrC svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

/* Error Page */
.erroP {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  padding: 0
}

.erroC {
  width: calc(100% - 40px);
  max-width: 450px;
  margin: auto;
  font-family: var(--fontBa)
}

.erroC h3 {
  font-size: 1.414rem;
  font-family: inherit
}

.erroC h3 span:not(.e) {
  position: relative
}

.erroC h3 span.e {
  display: block;
  font-size: 140px;
  line-height: .8;
  margin-bottom: -1rem;
  color: #ebebf0
}

.erroC h3 span.e {
  animation: glitch 1s linear infinite
}

.erroC h3 span.e::before,
.erroC h3 span.e::after {
  content: attr(title);
  position: absolute;
  left: 0;
  right: 0
}

.erroC h3 span.e::before {
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%)
}

.erroC h3 span.e::after {
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%)
}

.erroC p {
  margin: 30px 5%;
  line-height: 1.6em;
  opacity: .7
}

.erroC .button {
  margin: 0;
  padding-left: 2em;
  padding-right: 2em;
  font-size: 14px
}

/* Responsive */
@media screen and (min-width:897px) {

  /* mainIn */
  .mainIn,
  .blogM {
    display: flex
  }

  .blogMn {
    width: var(--navW);
    flex-shrink: 0;
    position: relative;
    transition: var(--trans-1);
    z-index: 1
  }

  .blogCont {
    padding-top: 30px
  }

  .blogCont::before {
    content: '';
    position: absolute;
    top: var(--headerHi);
    left: 0;
    height: calc(100% + var(--headerH))
  }

  .blogCont {
    width: calc(100% - var(--navW))
  }

  .mnBrs {
    box-shadow: 0 0 15px rgba(0, 0, 0, .07)
  }

  .blogCont .secIn {
    padding-left: 25px;
    padding-right: 25px
  }

  .mainbar {
    flex: 1 0 calc(100% - var(--sideW) - 25px);
    width: calc(100% - var(--sideW) - 25px)
  }

  .sidebar {
    display: flex;
    flex: 0 0 calc(var(--sideW) + 25px);
    width: calc(var(--sideW) + 25px);
    margin: 0
  }

  .sidebar::before {
    content: '';
    flex: 0 0 25px
  }

  .sidebar .sideIn {
    width: calc(100% - 25px)
  }

  /* mainNav */
  .mnBr {
    position: sticky;
    position: -webkit-sticky;
    top: var(--headerH)
  }

  .mnBrs {
    display: flex;
    height: calc(100vh - var(--headerH));
    font-size: 13px;
    position: relative
  }

  .mnBrs>*:not(.mnMob) {
    width: 100%
  }

  .mnMen {
    padding: 20px;
    overflow-y: hidden;
    overflow-x: hidden
  }

  .mnMen:hover {
    overflow-y: scroll
  }

  .mnMob {
    position: fixed;
    width: var(--navW)
  }

  .mnH,
  .mobMn {
    display: none
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .blogMn,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMob,
  .hdMn .navI:not(:checked)~.mainWrp .blogMn,
  .hdMn .navI:not(:checked)~.mainWrp .mnMob {
    width: 75px
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn a:hover,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn a:hover {
    opacity: 1;
    color: inherit
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .a,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn .a {
    max-width: 40px;
    border-radius: 15px
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .drp.mr,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn svg.d,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMob .PageList,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMob .mSoc,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn .drp.mr,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn svg.d,
  .hdMn .navI:not(:checked)~.mainWrp .mnMob .PageList,
  .hdMn .navI:not(:checked)~.mainWrp .mnMob .mSoc {
    display: none
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMob .mNav,
  .hdMn .navI:not(:checked)~.mainWrp .mnMob .mNav {
    display: flex
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn>li.br::after,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn>li.br::after {
    max-width: 20px
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMen,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMen:hover,
  .hdMn .navI:not(:checked)~.mainWrp .mnMen,
  .hdMn .navI:not(:checked)~.mainWrp .mnMen:hover {
    overflow-y: visible;
    overflow-x: visible
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .n,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn .n,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
    position: absolute;
    left: 35px;
    top: 3px;
    margin: 0 5px;
    padding: 8px 10px;
    border-radius: 5px 16px 16px 16px;
    max-width: 160px;
    background: var(--contentB);
    color: var(--bodyC);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .1);
    z-index: 1
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
    padding: 0 5px;
    margin: 0;
    overflow: hidden;
    display: block
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr):last-child ul,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr):last-child ul {
    top: auto;
    bottom: 3px;
    border-radius: 16px 16px 16px 5px
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.drp) .a:hover .n,
  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr):hover ul,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.drp) .a:hover .n,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr):hover ul {
    opacity: 1;
    visibility: visible
  }

  .bD:not(.hdMn) .navI:checked~.mainWrp .mnMn ul li>*,
  .hdMn .navI:not(:checked)~.mainWrp .mnMn ul li>* {
    border-radius: 0
  }

  /* Article */
  .onIndx.onHm .blogPts>* {
    flex: 0 0 calc(33.33% - 20px);
    width: calc(33.33% - 20px)
  }

  .onIndx.onMlt .blogPts>* {
    flex: 0 0 calc(25% - 20px);
    width: calc(25% - 20px)
  }
}

@media screen and (min-width:768px) {
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 5px
  }

  ::-webkit-scrollbar-track {
    background: transparent
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .15);
    border-radius: 10px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .35)
  }

  ::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, .35)
  }
}

@media screen and (max-width:1600px) {

  /* Quick Edit */
  .nBtm.qEdit .qeBtn {
    margin-bottom: 85px
  }

  /* Back to Top */
  .nBtm.toTopB {
    margin-bottom: 80px
  }
}

@media screen and (max-width:1100px) {

  /* Article */
  .onIndx.onHm .blogPts>* {
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px)
  }

  .onIndx.onMlt .blogPts>* {
    flex: 0 0 calc(33.33% - 20px);
    width: calc(33.33% - 20px)
  }

  /* Widget */
  .itemFt .itm>*,
  .itemFt .itm>*:last-child {
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px)
  }

  .itemFt .itm>*:last-child {
    flex-grow: 1
  }

  .itemFt .pSnpt {
    display: none
  }
}

@media screen and (max-width:896px) {

  /* Header */
  .ntfC {
    padding-left: 20px;
    padding-right: 20px
  }

  header,
  .drK header {
    box-shadow: none;
    border: none
  }

  header.stick {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .07)
  }

  .drK:not(.HD-2) header.stick {
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    box-shadow: none
  }

  .HD-2 header {
    position: relative;
    padding: 15px 15px 0
  }

  .HD-2 header.stick {
    box-shadow: none
  }

  .HD-2 .headCn {
    border-radius: var(--headerR);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .07)
  }

  .drK.HD-2 .headCn {
    background: var(--darkBa)
  }

  .headL {
    padding: 0 0 0 15px;
    flex-grow: 1;
    width: 50%
  }

  .headR {
    padding: 0 20px 0 0;
    flex-grow: 0
  }

  .headIc .isSrh {
    display: block
  }

  .headI .headS {
    margin: 0
  }

  /* mainNav */
  .blogMn {
    display: flex;
    justify-content: flex-start;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    margin-left: -100%;
    z-index: 20;
    transition: var(--trans-1);
    width: 100%;
    height: 100%
  }

  .flT .blogMn {
    left: 15px;
    top: 15px;
    bottom: 15px;
    height: auto
  }

  .flT .mnBr {
    border-radius: 20px;
    width: 80%
  }

  .Rtl.flT .blogMn {
    left: auto;
    right: 15px
  }

  .mnBr {
    width: 85%;
    max-width: 480px;
    height: 100%;
    border-radius: 0 12px 12px 0;
    transition: inherit;
    z-index: 3;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05)
  }

  .mnBrs {
    padding: 60px 0 0;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
    height: 100%
  }

  .mnH {
    padding: 0 15px
  }

  .mnH label {
    padding: 15px 10px
  }

  .mnH .c::after {
    margin: 0 13px
  }

  .mnMen {
    padding-top: 0
  }

  .navI:checked~.mainWrp .blogMn {
    margin-left: 0
  }

  .navI:checked~.mainWrp .blogMn .fCls {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px)
  }

  /* Article */
  .onIndx.onHm .blogPts>* {
    flex: 0 0 calc(33.33% - 20px);
    width: calc(33.33% - 20px)
  }

  /* Widget */
  .itemFt .pSnpt {
    display: -webkit-box
  }

  .bD:not(.MN-4) .mobMn:not(.no-items)+footer {
    padding-bottom: calc(55px + 30px)
  }

  .bD:not(.MN-4) .wvH {
    height: calc(100px + 60px)
  }

  /* Widget Scroll Menu */
  .HD-2 .navS {
    box-shadow: 0 0 25px rgba(0, 0, 0, .07)
  }

  /* Back To Top */
  .bD:not(.MN-4) .toTopB {
    margin-bottom: 45px
  }

  .bD:not(.MN-4) .nBtm.toTopB {
    margin-bottom: 145px
  }

  .MN-4 .nBtm.toTopB {
    margin-bottom: 80px
  }
}

@media screen and (max-width:768px) {

  /* Article */
  .onIndx.onHm .blogPts>*,
  .onIndx.onMlt .blogPts>* {
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px)
  }
}

@media screen and (max-width:640px) {

  /* Header */
  .headCn {
    height: var(--headerHm)
  }

  /* Pop-up */
  .fixL {
    align-items: flex-end
  }

  .fixL .fixLi,
  .fixL .cmBri {
    border-radius: 12px 12px 0 0;
    max-width: 680px
  }

  .fixL .cmBri:not(.mty) {
    border-radius: 0;
    height: 100%;
    max-height: 100%
  }

  /* Footer */
  footer {
    padding-top: 30px
  }
}


@media screen and (max-width:500px) {

  /* Font and Blog */
  .iFxd,
  .crdtIn {
    font-size: 12px
  }

  .brdCmb {
    font-size: 13px
  }

  .pDesc {
    font-size: 14px
  }

  .pEnt {
    font-size: var(--postFm)
  }

  .pTtl.itm {
    font-size: var(--postTm)
  }

  .pInf.ps .pTtmp::after {
    content: attr(data-time)
  }

  .pInf.ps .pDr {
    font-size: 12px
  }

  .pInf .pNm,
  .pInf .pDr {
    display: flex;
    flex-direction: column
  }

  .pInf .pDr>*:not(:first-child)::before {
    display: none
  }

  /* Article */
  .onIndx:not(.oneGrd) .blogPts {
    width: calc(100% + 10px);
    left: -5px;
    right: -5px
  }

  .onIndx:not(.oneGrd) .blogPts>* {
    padding: 8px 8px 40px;
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px
  }

  .onIndx:not(.oneGrd) .blogPts .pTag {
    padding-bottom: 5px
  }

  .onIndx:not(.oneGrd) .blogPts div.ntry {
    flex: 0 0 calc(100% - 10px)
  }

  .onIndx:not(.oneGrd) .pCntn {
    padding: 0
  }

  .onIndx:not(.oneGrd) .ntry .pSml {
    font-size: 12px
  }

  .onIndx:not(.oneGrd) .blogPts .pInf {
    bottom: 10px;
    left: 8px;
    right: 8px
  }

  .onIndx:not(.oneGrd) .ntry .iFxd {
    font-size: 10px
  }

  .onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* {
    margin-left: 0
  }

  .Rtl.onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* {
    margin-left: 5px;
    margin-right: 0
  }

  .onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.7
  }

  .onIndx:not(.oneGrd) .ntry .iFxd:not(.l)>* svg {
    margin: 0 1.5px
  }

  .onIndx:not(.oneGrd) .ntry .iFxd.l .edit {
    padding: 5px
  }

  .onIndx:not(.oneGrd) .ntry .iFxd.l>* svg {
    margin: 0px
  }

  .onIndx:not(.oneGrd) .ntry .pTtl {
    font-size: .8rem;
    font-weight: 600
  }

  .onIndx:not(.oneGrd) .ntry:not(.pTag) .pSnpt,
  .onIndx:not(.oneGrd) .ntry .pInf:not(.nSpr) .pJmp,
  .onIndx:not(.oneGrd) .ntry .iFxd .spnr,
  .onIndx:not(.oneGrd) .iFxd .bM {
    display: none
  }

  .onIndx:not(.oneGrd) .ntry .iFxd {
    padding: 8px 3px
  }

  .onIndx:not(.oneGrd) .ntry .iFxd.l {
    top: auto;
    bottom: 0;
    right: 0
  }

  .Rtl.onIndx:not(.oneGrd) .ntry .iFxd.l {
    right: auto;
    left: 0
  }

  .onIndx:not(.oneGrd) .ntry .iFxd .cmnt,
  .onIndx:not(.oneGrd) .ntry .iFxd .pV {
    padding: 3.5px
  }

  .onIndx:not(.oneGrd) .ntry .iFxd>* svg {
    padding: 1px
  }

  .onIndx.oneGrd .blogPts>* {
    flex: 0 0 calc(100% - 20px);
    width: calc(100% - 20px)
  }

  /* Share */
  .pShc {
    width: calc(100% + 10px);
    left: -5px;
    right: -5px
  }

  .pShc::before {
    width: calc(100% - 10px);
    margin: 0 5px 12px
  }

  .pShc .wa::after,
  .pShc .tw::after {
    display: none
  }

  /* Widget */
  .prfI:checked~.mainWrp .wPrf {
    top: auto;
    bottom: 0
  }

  .prfI:checked~.mainWrp .Profile .fCls {
    background: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px)
  }

  .prfH .c {
    display: flex
  }

  .wPrf {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: -100%;
    width: 100%;
    max-height: calc(100% - var(--headerH));
    border-radius: 12px 12px 0 0
  }

  .itemFt .itm {
    padding-bottom: 80px
  }

  .itemFt .itm>* {
    flex: 0 0 calc(100% - 20px);
    width: calc(100% - 20px)
  }

  .itemFt .itm .iCtnt {
    flex: 0 0 calc(100% - 42px);
    width: calc(100% - 42px);
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px;
    background: rgba(255, 253, 252, .92);
    border-radius: 10px;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px)
  }

  .itemFt .pTtl {
    font-size: 1rem
  }

  .itemFt .pSnpt {
    font-size: 93%
  }
}

/* Keyframes Animation */
@keyframes shimmer {
  100% {
    transform: translateX(100%)
  }
}

@keyframes slidein {
  0% {
    opacity: 0
  }

  20% {
    opacity: 1;
    bottom: 24px
  }

  50% {
    opacity: 1;
    bottom: 24px
  }

  80% {
    opacity: 1;
    bottom: 24px
  }

  100% {
    opacity: 0;
    bottom: -70px;
    visibility: hidden
  }
}

@keyframes fadein {
  50% {
    opacity: 1
  }

  80% {
    opacity: 1;
    padding-top: 5px;
    height: 22px
  }

  100% {
    opacity: 0;
    padding-top: 0;
    height: 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
  }
}

@keyframes indicator {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-webkit-keyframes fadein {
  50% {
    opacity: 1
  }

  80% {
    opacity: 1;
    padding-top: 5px;
    height: 22px
  }

  100% {
    opacity: 0;
    padding-top: 0;
    height: 0
  }
}

@-webkit-keyframes slidein {
  0% {
    opacity: 0
  }

  20% {
    opacity: 1;
    bottom: 24px
  }

  50% {
    opacity: 1;
    bottom: 24px
  }

  80% {
    opacity: 1;
    bottom: 24px
  }

  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)
  }
}

@-webkit-keyframes tonext {
  75% {
    left: 0
  }

  95% {
    left: 100%
  }

  98% {
    left: 100%
  }

  99% {
    left: 0
  }
}

@-webkit-keyframes tostart {
  75% {
    left: 0
  }

  95% {
    left: -300%
  }

  98% {
    left: -300%
  }

  99% {
    left: 0
  }
}

@-webkit-keyframes tonext-rev {
  75% {
    right: 0
  }

  95% {
    right: 100%
  }

  98% {
    right: 100%
  }

  99% {
    right: 0
  }
}

@-webkit-keyframes tostart-rev {
  75% {
    right: 0
  }

  95% {
    right: -300%
  }

  98% {
    right: -300%
  }

  99% {
    right: 0
  }
}

@-webkit-keyframes snap {
  96% {
    scroll-snap-align: center
  }

  97% {
    scroll-snap-align: none
  }

  99% {
    scroll-snap-align: none
  }

  100% {
    scroll-snap-align: center
  }
}

@-webkit-keyframes indicator {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-moz-keyframes indicator {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes glitch {

  2%,
  64% {
    transform: translate(2px, 0) skew(0deg)
  }

  4%,
  60% {
    transform: translate(-2px, 0) skew(0deg)
  }

  62% {
    transform: translate(0, 0) skew(5deg)
  }
}

@keyframes glitchTop {

  2%,
  64% {
    transform: translate(2px, -2px)
  }

  4%,
  60% {
    transform: translate(-2px, 2px)
  }

  62% {
    transform: translate(13px, -1px) skew(-13deg)
  }
}

@keyframes glitchBotom {

  2%,
  64% {
    transform: translate(-2px, 0)
  }

  4%,
  60% {
    transform: translate(-2px, 0)
  }

  62% {
    transform: translate(-22px, 5px) skew(21deg)
  }
}

/* Noscript Option */
.lazy:not([lazied]) {
  display: none
}

.bD .pS img.lazy:not([lazied]) {
  display: none !important
}

.noJs {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 99;
  max-width: 640px;
  border-radius: 12px;
  margin: auto;
  padding: 10px 5px;
  background: #ffdfdf;
  font-size: 13px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .1);
  color: #48525c
}

.noJs::before {
  content: attr(data-text);
  padding: 0 10px;
  flex-grow: 1
}

.noJs label {
  flex-shrink: 0;
  padding: 10px
}

.noJs label::after {
  content: '\2715';
  line-height: 18px;
  font-size: 14px
}

.nJs:checked~.noJs {
  display: none
}

/* Hide Scroll */
.scrlH::-webkit-scrollbar {
  width: 0;
  height: 0
}

.scrlH::-webkit-scrollbar-track {
  background: transparent
}

.scrlH::-webkit-scrollbar-thumb {
  background: transparent;
  border: none
}

/* --- Remove to reduce CSS size or if you aren't using RTL --- */
.adB {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--darkTa);
  border: 1px solid var(--contentL);
  border-radius: 3px
}

.adB.h240 {
  min-height: 240px
}

.adB.h360 {
  min-height: 360px
}

.adB.h480 {
  min-height: 480px
}

.h240,
.h360,
.h480 {
  border-radius: 5px 15px 5px 5px
}

.adB::before {
  content: attr(data-text)
}

/* Article Style RTL */
.Rtl .note {
  padding: 20px 50px 20px 20px
}

.Rtl .note::before {
  left: auto;
  right: -12px
}

.Rtl .note::after {
  left: auto;
  right: 18px
}

.Rtl .pS hr::before {
  text-indent: -0.6em
}

.Rtl .dropCap {
  margin: 0;
  line-height: inherit;
  font-size: inherit;
  float: none
}

.Rtl blockquote,
.Rtl .cmC i[rel=quote] {
  border-left: 0;
  border-right: 2px solid var(--contentL)
}

.Rtl blockquote.s-1 {
  padding: 25px 45px 25px 25px;
  border-right: 0
}

.Rtl blockquote.s-1::before {
  left: auto;
  right: 0
}

/* RTL Mode */
.Rtl .mnMn li li a>* svg {
  margin-right: 0;
  margin-left: 5px
}

.Rtl .ntfT {
  padding: 0 0 0 15px
}

.Rtl .headL {
  padding: 0 20px 0 0
}

.Rtl .headL .headN {
  padding: 0 5px 0 0
}

.Rtl .BlogSearch .sb {
  left: auto;
  right: 0
}

.Rtl .BlogSearch button.sb {
  left: 0;
  right: auto
}

.Rtl .wPrf {
  right: auto;
  left: 0;
  border-radius: 5px 16px 16px 16px
}

.Rtl .toTopF {
  right: auto;
  left: 18px
}

.Rtl .cmAc a::before {
  content: '\2935'
}

.Rtl .cmHl>li {
  padding: 0 17.5px 0 0
}

.Rtl .cmHl>li>.cmAv {
  left: auto;
  right: 0
}

.Rtl .cmHl>li>.cmIn {
  padding: 12px 28px 12px 15px
}

.Rtl .mnMn li:not(.mr) ul {
  padding-left: 0;
  padding-right: 30px
}

.Rtl .tocL {
  right: auto;
  left: -280px
}

.Rtl .tocLi {
  border-radius: 0 12px 12px 0
}

.Rtl .tocLi::before {
  left: auto;
  right: 0
}

.Rtl .tocC {
  left: auto;
  right: -45px
}

.Rtl .tocC span {
  border-radius: 0 20px 20px 0
}

.Rtl .tocL svg.rad {
  right: auto;
  left: -2px;
  transform: rotate(176deg)
}

.Rtl .tocL svg.rad.in {
  transform: rotate(-86deg)
}

.Rtl .tocI:checked~.tocL {
  right: auto;
  left: 0
}

.Rtl .mainWrp:after {
  right: unset;
  left: 0;
  border-radius: 0 0 200px 0
}

@media screen and (min-width:897px) {
  .Rtl .blogCont::before {
    left: auto;
    right: 0
  }

  .Rtl:not(.hdMn) .navI:checked~.mainWrp .mnMn .n,
  .Rtl:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
  .Rtl.hdMn .navI:not(:checked)~.mainWrp .mnMn .n,
  .Rtl.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
    left: auto;
    right: 35px;
    border-radius: 16px 5px 16px 16px
  }

  .Rtl:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr):last-child ul,
  .Rtl.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr):last-child ul {
    border-radius: 16px 16px 5px 16px
  }
}

@media screen and (max-width:896px) {
  .Rtl .headR {
    padding: 0 0 0 20px
  }

  .Rtl .headL {
    padding: 0 15px 0 0
  }

  .Rtl .blogMn {
    left: auto;
    right: 0;
    margin-right: -100%
  }

  .Rtl .mnBr {
    border-radius: 12px 0 0 12px
  }

  .Rtl.flT .mnBr {
    border-radius: 20px
  }

  .Rtl .navI:checked~.mainWrp .blogMn {
    margin-left: auto;
    margin-right: 0
  }
}

@media screen and (max-width:500px) {
  .Rtl .wPrf {
    right: 0;
    border-radius: 12px 12px 0 0
  }

  .Rtl .ftMn {
    right: auto;
    left: -4px;
    border-radius: 16px 16px 16px 5px
  }

  .Rtl .cdtIn .PageList {
    margin-left: 9px;
    margin-right: auto
  }
}

/* Basic Layout */
@media screen and (min-width:897px) {

  .LS-2 header,
  .LS-2 .tocLi::before,
  .LS-3 header {
    border: 0
  }

  .LS-2,
  .LS-2 .headCn,
  .LS-2 .mnBrs,
  .LS-3 .mnBrs,
  .LS-3 .headL {
    background: #fafafc
  }

  .LS-2 .blogCont::before {
    border: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
    background: var(--contentB);
    border-radius: 15px 0 0 0
  }

  .LS-3 .headCn {
    background: transparent
  }

  .LS-3 .headR {
    background: var(--headerB)
  }

  .LS-3 .blogCont::before {
    z-index: 10
  }

  .LS-3 .blogMn {
    z-index: 11
  }

  .LS-3 .tocL {
    top: var(--headerHi);
    z-index: 10
  }

  .LS-3 .tocI:checked~.tocL {
    z-index: 10
  }

  .LS-3:not(.hdMn) .navI:checked~.mainWrp .headN,
  .LS-3.hdMn .navI:not(:checked)~.mainWrp .headN {
    display: none
  }

  .LS-3:not(.hdMn) .navI:checked~.mainWrp .headL,
  .LS-3 .navI:not(:checked)~.mainWrp .headL {
    width: 75px
  }
}

/* --- Your Custom CSS goes here --- */



    .progress {
      position: relative;
      height: 2px;
      display: block;
      z-index: 9999;
      width: 100%;
      background-color: transparent;
      /* Set the background color to transparent */
      border-radius: 2px;
      background-clip: padding-box;
      overflow: hidden;
    }

    .progress .indeterminate {
      background-color: purple;
    }

    .progress .indeterminate:before {
      content: '';
      position: absolute;
      background-color: #9303FA;
      top: 0;
      left: -100%;
      /* Start the bar from outside the progress bar */
      bottom: 0;
      will-change: left, right;
      -webkit-animation: indeterminate 5s linear infinite;
      /* Change animation duration to 5 seconds */
      animation: indeterminate 5s linear infinite;
      /* Change animation duration to 5 seconds */
    }

    @-webkit-keyframes indeterminate {
      0% {
        left: -100%;
        /* Move the bar from outside the progress bar */
        right: 100%;
      }

      100% {
        left: 100%;
        /* Fill the progress bar completely */
        right: -100%;
      }
    }

    @keyframes indeterminate {
      0% {
        left: -100%;
        /* Move the bar from outside the progress bar */
        right: 100%;
      }

      100% {
        left: 100%;
        /* Fill the progress bar completely */
        right: -100%;
      }
    }



/*<![CDATA[*/
/* Change Mode */
.headR .headM {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 0;
  width: 150px;
  background: var(--contentB);
  font-size: 13px;
  border-radius: 10px 5px 10px 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, .07);
  -webkit-transition: var(--trans-2);
  transition: var(--trans-2);
  overflow: hidden;
  z-index: 18;
  opacity: 0;
  visibility: hidden
}

.headR .headM:before {
  content: attr(data-text);
  display: block;
  padding: 0 15px 10px;
  width: 100%;
  font-size: 11px;
  opacity: .7
}

.headR .headM>* {
  display: block;
  padding: 9px 15px;
  width: 100%;
  cursor: pointer
}

.headR .headM>*:before {
  content: attr(aria-label);
  opacity: .9
}

.headR .headM>*:hover {
  background: rgba(0, 0, 0, .05)
}

.navM:checked~.mainWrp .headM {
  visibility: visible;
  opacity: 1
}

.navM:checked~.mainWrp .headM+.fCls {
  visibility: visible;
  opacity: 1;
  z-index: 17
}

.headR .headM .sydB {
  display: none
}

.bD:not(.drK):not(.syD) .headR .headM .lgtB {
  background-color: rgba(0, 0, 0, .1)
}

.drK:not(.syD) .headR .headM .drkB {
  background-color: rgba(0, 0, 0, .1)
}

.syD .headR .headM .sydB {
  background-color: rgba(0, 0, 0, .1)
}

.drK .headR .headM {
  background: var(--darkBs)
}

.Rtl .headR .headM {
  right: auto;
  left: 0;
  border-radius: 5px 10px 10px 10px
}

/* Author No Image */
.aFl {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden
}

.admPs .aFl {
  width: 34px;
  height: 34px
}

.aFl::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--linkB);
  opacity: .8
}

.aFl>span {
  position: absolute;
  z-index: 1;
  font-size: 0;
  color: transparent;
  padding-top: 1.5px;
}

.admPs .aFl>span {
  padding-top: 2px
}

.aFl>span:first-letter {
  color: #fffdfc;
  font-size: 13px
}

.admPs .aFl>span:first-letter {
  font-size: 16px
}

.drK .aFl::before {
  background: var(--darkU);
  opacity: 1
}

/* Dark Mode */
.drK.onIndx .blogPts>*,
.drK .rPst,
.drK .PopularPosts,
.drK .Label {
  background: var(--darkBa)
}

.drK .tDL .d2 {
  display: block
}

.drK .tDL::after {
  content: attr(data-light)
}

.drK .tDL svg .f {
  stroke: none;
  fill: var(--darkT)
}

.drK .pThmb:not(.nul)::before {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .07) 20%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0))
}

.drK input::placeholder,
.drK .cpL input,
.drK .cArea label .n {
  color: rgba(255, 255, 255, .25)
}

.drK .nArea .contact-form-error-message-with-border {
  color: #f94f4f
}

.drK .cmC i[rel=image]::before,
.drK .widget input[type=text],
.drK .widget input[type=email],
.drK .widget textarea {
  background: var(--darkBs);
  border-color: rgba(255, 255, 255, .15)
}

.drK .erroC h3 span {
  color: rgba(255, 255, 255, .1)
}

.drK svg,
.drK svg.c-1 {
  fill: var(--darkT)
}

.drK svg.line,
.drK .ancrC svg {
  fill: none;
  stroke: var(--darkT)
}

.drK svg.c-2 {
  fill: var(--darkTa);
  opacity: .4
}

.drK,
.drK .headCn,
.drK .mnBrs {
  background: var(--darkB);
  color: var(--darkT)
}

.drK .ntfC,
.drK .mobMn {
  background: var(--darkBa);
  color: var(--darkTa)
}

.drK .ntfC {
  color: rgba(255, 255, 255, .9)
}

.drK header,
.drK .mnMn>li.br::after,
.drK .blogCont::before,
.drK .tbHd,
.drK .cmHl>li>.cmIn,
.drK .pTag .pMart a,
.drK .pRelate,
.drK blockquote,
.drK .cmC i[rel=quote],
.drK blockquote.s-1,
.drK details.sp,
.drK .ps table:not(.tr-caption-container),
.drK .ps table th,
.drK .ps table:not(.tr-caption-container) tr:not(:last-child) td,
.drK .pre.tb .preH,
.drK details.ac,
.drK .ancrA,
.drK .ancrC,
.drK .mnMob {
  border-color: rgba(255, 255, 255, .15)
}

.drK .pre {
  background: var(--darkBs);
  color: var(--darkT)
}

.drK .footer {
  background: var(--darkBs)
}

.drK .mnMn li:not(.mr) .a:hover,
.drK .mnMn ul li>*:hover,
.drK .wL.bg li>*,
.drK .mobMn li>*:hover,
.drK .shL a,
.drK .cpLb {
  background: rgba(0, 0, 0, .15)
}

.drK .tIc::after {
  background: var(--darkBs)
}

.drK .wPrf {
  background: var(--darkBa);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2)
}

.drK header a,
.drK h1,
.drK h2,
.drK h3,
.drK h4,
.drK h5,
.drK h6,
.drK footer,
.drK .button {
  color: var(--darkT)
}

.drK .dlBox,
.drK .fixLs,
.drK .cArea input:focus~.n,
.drK .cArea textarea:focus~.n,
.drK .cArea input[data-text=fl]~.n,
.drK .cArea textarea[data-text=fl]~.n {
  background: var(--darkBs)
}

.drK .tocLi {
  background: var(--darkB)
}

.drK .admPs,
.drK .tocC span,
.drK .pShc>*:not(.c),
.drK .ancrA,
.drK .BlogSearch input,
.drK .cmHl>li>.cmIn {
  background: var(--darkBa)
}

.drK .tocC span::before {
  background: var(--darkBa)
}

.drK .tocC span::after {
  background: var(--darkU)
}

.drK .tocL svg.rad {
  fill: var(--darkBa)
}

.drK .mobMn li>*:hover svg.line {
  fill: var(--darkT) !important
}

.drK .mobMn li>*:hover svg.line .svgC {
  fill: var(--darkU) !important;
  stroke: var(--darkU)
}

.drK.mobS .mobMn li>*:hover,
.drK .button.ln {
  background: transparent
}

.drK .pTag .pPric::before,
.drK .pTag .pInfo small {
  color: var(--darkTa)
}

.drK::selection,
.drK a,
.drK .free::after,
.drK .new::after,
.drK .mnMn li:not(.mr) .a:hover,
.drK .mnMn ul li a:hover,
.drK .aTtl a:hover,
.drK .pSnpt.nTag,
.drK .pTag .pPric,
.drK details.ac[open] summary,
.drK .cpL label,
.drK .wL li>*:hover .lbC,
.drK .wL li>div .lbC,
.drK .wL .lbM,
.drK .cmBtn.ln:hover,
.drK .wL.cl .lbN:hover .lbC,
.drK .wL.cl div.lbN .lbC {
  color: var(--darkU)
}

.drK .mnMn .a:hover svg:not(.d) {
  fill: var(--darkU)
}

.drK .mnMn .a:hover svg.line:not(.d),
.drK .pJmp svg {
  fill: none;
  stroke: var(--darkU)
}

.drK .wL li>*:hover svg,
.drK .wL li>div svg {
  stroke: var(--darkU)
}

.drK.MN-3 .mobMn li>*:hover::after,
.drK.MN-4 .mobMn li>*:hover::after,
.drK .toTopF,
.drK .blogPg>*,
.drK .button,
.drK .zmImg::after,
.drK .widget input[type=button],
.drK .widget input[type=submit] {
  background: var(--darkU)
}

.drK.MN-3 .mobMn li>*:hover svg.line,
.drK.MN-4 .mobMn li>*:hover svg.line {
  stroke: var(--darkU);
  fill: var(--darkU) !important
}

.drK.MN-3 .mobMn li>*:hover svg .f,
.drK.MN-4 .mobMn li>*:hover svg .f {
  fill: var(--darkU)
}

.drK .pS input[id*="1"]:checked~.tbHd label[for*="1"],
.drK .pS input[id*="2"]:checked~.tbHd label[for*="2"],
.drK .pS input[id*="3"]:checked~.tbHd label[for*="3"],
.drK .pS input[id*="4"]:checked~.tbHd label[for*="4"],
.drK .widget input[type=text]:focus,
.drK .widget input[type=email]:focus,
.drK .widget textarea:focus,
.drK .widget input[data-text=fl],
.drK .widget textarea[data-text=fl],
.drK .wL.cl .lbN:not(div):hover,
.drK .wL.cl div.lbN {
  border-color: var(--darkU)
}

.drK .button.ln:hover {
  border-color: var(--darkU);
  box-shadow: 0 0 0 1px var(--darkU) inset
}

.drK .mnBr a,
.drK .pLbls>*,
.drK .aTtl a,
.drK .blogPg>*,
.drK .brdCmb a,
.drK .wL li>*,
.drK .mobMn li>*,
.drK .cmAc a {
  color: var(--darkT)
}

.drK .blogPg .nPst,
.drK .blogPg .current {
  background: var(--contentL);
  color: var(--bodyCa)
}

.drK .FeaturedPost .itemFt::after {
  background: var(--darkTa)
}

@media screen and (min-width:897px) {
  .drK header .BlogSearch input {
    background: var(--darkBs)
  }

  .drK header .BlogSearch input:focus,
  .drK header .BlogSearch input:hover {
    background: var(--darkBa)
  }

  .drK.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn .n,
  .drK.bD:not(.hdMn) .navI:checked~.mainWrp .mnMn li:not(.mr) ul,
  .drK.hdMn .navI:not(:checked)~.mainWrp .mnMn .n,
  .drK.hdMn .navI:not(:checked)~.mainWrp .mnMn li:not(.mr) ul {
    background: var(--darkBa);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    color: var(--darkTa)
  }

  .drK.LS-2 .blogCont::before {
    background: var(--darkBs)
  }

  .drK.LS-3 .headCn {
    background: transparent
  }

  .drK.LS-3 .headL,
  .drK.LS-3 .mnBrs {
    background: var(--darkBs)
  }

  .drK.LS-3 .headR {
    background: var(--darkB)
  }

  .drK .tocLi::before {
    border-color: rgba(255, 255, 255, .15)
  }
}

@media screen and (min-width:897px) {
  .drK header {
    border-bottom: var(--headerL) solid rgba(255, 255, 255, .15);
    box-shadow: none
  }

  .drK .blogCont::before {
    border-right: 1px solid rgba(255, 255, 255, .15)
  }

  .drK .mnBrs {
    box-shadow: none
  }
}

@media screen and (min-width:641px) {
  .drK .ftMn a:hover {
    color: var(--darkU)
  }
}

@media screen and (max-width:640px) {
  .drK .ftMn {
    background: var(--darkBa)
  }
}

@media screen and (max-width:500px) {
  .drK .itemFt .itm .iCtnt {
    background: var(--darkBa)
  }
}

/*]]>*/

.pGV {
  display: flex;
  justify-content: space-between;
  position: relative;
  font-size: 13px;
  padding-top: 6px;
  padding-bottom: 20px;
}

.pGV>* {
  padding: 10px;
  background: var(--contentB);
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  border-radius: var(--greetR);
  display: flex;
  align-items: center;
  justify-content: center
}

.pGV>*:first-child {
  margin-right: 5px
}

.pGV>*:last-child {
  margin-left: 5px
}

.Rtl .pGV>*:first-child {
  margin-right: 0;
  margin-left: 5px
}

.Rtl .pGV>*:last-child {
  margin-left: 0;
  margin-right: 5px
}

.pGV .pVws.hidden {
  display: none
}

.pGV .pGrt::after {
  content: attr(data-text)
}

.pGV .pVws::after {
  content: attr(data-text) ' views'
}

.pGV svg {
  width: 15px;
  height: 15px;
  margin-right: 6px
}

.pGV svg.line {
  stroke-width: 1.5
}

.Rtl .pGV svg {
  margin-right: 0;
  margin-left: 6px
}

.drK .pGV>* {
  background: var(--darkBa)
}

/* Comments */
.pCmnts {
  margin-top: 50px
}

.cmDis {
  text-align: center;
  margin-top: 20px;
  opacity: .7
}

.cmMs {
  margin-bottom: 20px
}

.cm iframe {
  width: 100%
}

.cm:not(.cmBr) .cmBrs {
  background: transparent;
  position: relative;
  padding: 80px 20px 0;
  width: calc(100% + 40px);
  left: -20px;
  right: -20px
}

.fixLs.cmBrs {
  padding-top: 80px
}

.cmH h3.title {
  margin: 0;
  flex-grow: 1;
  padding: 16px 10px
}

.cmH .s {
  margin: 0 14px
}

.cmH .s::before {
  content: attr(data-text);
  margin: 0 6px;
  opacity: .7;
  font-size: 90%
}

.cmH .s::after {
  content: '\296E';
  line-height: 18px;
  font-size: 17px
}

.cmAv .im {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative
}

.cmBd.del .cmCo {
  font-style: italic;
  font-size: 90%;
  line-height: normal;
  border: 1px dashed rgba(0, 0, 0, .2);
  border-radius: 3px;
  margin: .5em 0;
  padding: 15px;
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cmHr {
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cmHr .d {
  font-size: 90%;
  opacity: .7
}

.cmHr .d::before {
  content: '\00B7';
  margin: 0 7px
}

.cmHr.a .n {
  display: inline-flex;
  align-items: center
}

.cmHr.a .n::after {
  content: '\2714';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 8px;
  background: #519bd6;
  color: #fefefe;
  border-radius: 50%;
  margin: 0 3px
}

.cmCo {
  line-height: 1.6em;
  opacity: .9
}

.cmC i[rel=image] {
  font-size: 90%;
  display: block;
  position: relative;
  min-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 1em auto
}

.cmC i[rel=image]::before {
  content: 'This feature isn\0027t available!';
  border: 1px dashed rgba(0, 0, 0, .2);
  border-radius: 3px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--contentB)
}

.cmC i[rel=pre],
.cmC i[rel=quote] {
  margin-top: 1em;
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
  padding: 20px
}

.cmC i[rel=pre]::before {
  display: block;
  width: auto
}

.cmC i[rel=quote] {
  display: block;
  font-style: italic;
  font-size: inherit;
  padding: 5px 15px
}

.cmCo img {
  margin-top: 1em;
  margin-bottom: 1em
}

.cmAc {
  margin-top: 10px
}

.cmAc a {
  font-size: 90%;
  color: inherit;
  opacity: .7;
  display: inline-flex
}

.cmAc a::before {
  content: '\2934';
  line-height: 18px;
  font-size: 16px;
  transform: rotate(90deg)
}

.cmAc a::after {
  content: attr(data-text);
  margin: 0 6px
}

.cmR {
  margin: 10px 40px 0
}

.cmRp~.cmAc,
.cmBd.del~.cmAc,
.onItm:not(.Rtl) .cmHr .date {
  display: none
}

.cmRi:checked~.cmRp .thTg {
  margin-bottom: 0
}

.cmRi:checked~.cmRp .thTg::after {
  content: attr(aria-label)
}

.cmRi:checked~.cmRp .thCh,
.cmRi:checked~.cmRp .cmR {
  display: none
}

.cmAl:checked~.cm .cmH .s::before {
  content: attr(data-new)
}

.cmAl:checked~.cm .cmCn>ol {
  flex-direction: column-reverse
}

.thTg {
  display: inline-flex;
  align-items: center;
  margin: 15px 0 18px;
  font-size: 90%
}

.thTg::before {
  content: '';
  width: 28px;
  border-bottom: 1px solid var(--widgetTac);
  opacity: .5
}

.thTg::after {
  content: attr(data-text);
  margin: 0 12px;
  opacity: .7
}

.cmCn ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column
}

.cmCn li {
  margin-bottom: 18px;
  position: relative
}

.cmCn li .cmRbox {
  margin-top: 20px
}

.cmCn li li {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 12px);
  left: -6px;
  right: -6px
}

.cmCn li li:last-child {
  margin-bottom: 0
}

.cmCn li li .cmAv {
  flex: 0 0 28px;
  margin: 0 6px
}

.cmCn li li .cmAv .im {
  width: 28px;
  height: 28px
}

.cmCn li li .cmIn {
  width: calc(100% - 52px);
  margin: 0 6px
}

.cmHl>li {
  padding-left: 17.5px
}

.cmHl>li>.cmAv {
  position: absolute;
  left: 0;
  top: 12px
}

.cmHl>li>.cmIn {
  background: var(--contentB);
  padding: 12px 15px 12px 28px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .07)
}

.pCmnts .cmIn img {
  border-radius: 3px
}

/* Comments Show/Hide */
#comment:target {
  margin: 0;
  padding-top: 60px
}

.cmSh:checked~.cmShw,
.cmShw~.cm:not(.cmBr),
#comment:target .cmShw,
#comment:target .cmSh:checked~.cm:not(.cmBr) {
  display: none
}

.cmSh:checked~.cm:not(.cmBr),
#comment:target .cm:not(.cmBr),
#comment:target .cmSh:checked~.cmShw {
  display: block
}

.cmBtn {
  display: block;
  padding: 20px;
  text-align: center;
  max-width: 100%
}

.cmBtn.ln:hover {
  color: var(--linkB)
}

/* Comments Pop-up */
#comment:target .cmSh:checked~.cm.cmBr {
  bottom: -100%;
  opacity: 0;
  visibility: hidden
}

#comment:target .cmSh:checked~.cm.cmBr .fCls {
  opacity: 0;
  visibility: hidden
}

.cmDl {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 20px;
  height: 20px;
  background: #ffcdd2;
  border-radius: 50%;
  transition: var(--trans-2)
}

.cmDl.rp {
  top: 2.5px;
  right: 10px
}

.cmDl:hover {
  opacity: .8;
  transform: scale(1.08)
}

.cmDl a {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center
}

.cmDl a svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.2
}

.Rtl .cmDl {
  right: unset;
  left: 20px
}

.Rtl .cmDl.rp {
  left: 10px
}

.drK .cmDl {
  background: var(--darkB)
}

.iCmn {
  cursor: pointer;
  outline: none;
  border: none;
  display: block;
  font-weight: 700;
  margin: 0 auto;
  max-width: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: var(--contentB)
}

.iCmn::before {
  content: attr(data-text)
}

.iCmn:hover::before {
  opacity: .7
}

.drK .iCmn {
  background: var(--darkBs)
}

/* Youtube fullpage */
.videoYt {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 5px
}

.videoYt iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0
}

/* Lazy Youtube */
.lazyYt {
  background: var(--synxBg);
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  border-radius: 5px
}

.lazyYt img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: .95
}

.lazyYt img,
.lazyYt iframe,
.lazyYt .play {
  position: absolute
}

.lazyYt iframe {
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0
}

.lazyYt .play {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: all .5s ease;
  display: block;
  width: 70px;
  height: 70px;
  z-index: 1;
  cursor: pointer
}

.lazyYt .play svg {
  width: inherit;
  height: inherit;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-width: 8
}

.lazyYt .play .c {
  stroke: rgba(255, 255, 255, .85);
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  transition: all .4s ease-in-out;
  opacity: .3
}

.lazyYt .play .t {
  stroke: rgba(255, 255, 255, .75);
  stroke-dasharray: 240;
  stroke-dashoffset: 480;
  transition: all .6s ease-in-out;
  transform: translateY(0)
}

.lazyYt .play:hover .t {
  animation: nudge .6s ease-in-out;
  -webkit-animation: nudge .6s ease-in-out
}

.lazyYt .play:hover .t,
.lazyYt .play:hover .c {
  stroke-dashoffset: 0;
  opacity: .7;
  stroke: #FF0000
}

.nAmp .lazyYt {
  display: none
}

/* Quick Edit */
.qeMn,
.qeBtn .svg-2 {
  display: none
}

.qeBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, .1);
  border-radius: 50px;
  z-index: 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  -webkit-transition: all .2s ease, margin 1s ease;
  transition: all .2s ease, margin 1s ease;
  cursor: pointer
}

.qeBtns .qeBtn.a {
  bottom: 22.5px;
  right: 22.5px;
  width: 30px;
  height: 30px;
  z-index: 4;
  box-shadow: none;
  opacity: 0
}

.qeBtns .qeBtn.a:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  opacity: 1
}

.qeBtn svg {
  width: 18px;
  height: 18px;
  margin: auto
}

.qeBtn svg.line {
  stroke-width: 1.3
}

.qeBtn.a svg {
  width: 16px;
  height: 16px
}

.qeMn:checked+.qeBtn {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg)
}

.qeMn:checked+.qeBtn .svg-1 {
  display: none
}

.qeMn:checked+.qeBtn .svg-2 {
  display: block
}

.qeMn:checked~.qeBtns .qeBtn {
  box-shadow: 0 0 15px rgba(0, 0, 0, .1)
}

.qeMn:checked~.qeBtns .qeBtn.a {
  opacity: 1
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(1) {
  bottom: 60px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(2) {
  bottom: 95px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(3) {
  bottom: 130px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(4) {
  right: 60px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(5) {
  right: 95px
}

.qeMn:checked~.qeBtns .qeBtn.a:nth-child(6) {
  right: 130px
}

.qeMn:checked~.qeBtns+.fCls {
  visibility: visible;
  opacity: 1;
  z-index: 4
}

@media screen and (max-width:896px) {
  .qeBtn {
    margin-bottom: 50px;
    margin-right: 55px
  }

  .qEdit.nBtm .qeBtn {
    margin-bottom: 150px;
    margin-right: 55px
  }

  .MN-4 .qeBtn {
    margin-bottom: 60px;
    margin-right: 5px
  }

  .MN-4 .qEdit.nBtm .qeBtn {
    margin-right: 55px;
    margin-bottom: 85px
  }
}

@media screen and (min-width:897px) {
  .qeBtn {
    margin-bottom: 5px;
    margin-right: 55px
  }
}

.drK .qeBtn {
  background: var(--darkBa)
}

/* Preloader */
.pldW {
  direction: ltr;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: var(--bodyB);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: visible;
  opacity: 1;
  transition: all .8s ease
}

.pldW.e {
  display: flex
}

.pldW.h {
  opacity: 0;
  visibility: hidden
}

.pldS {
  position: relative;
  transform: rotate(165deg)
}

.pldS:before,
.pldS:after {
  content: '';
  position: absolute;
  display: block;
  width: .5em;
  height: .5em;
  border-radius: .25em;
  transform: translate(-50%, -50%)
}

.pldS:before {
  animation: pldBefore 2s infinite
}

.pldS:after {
  animation: pldAfter 2s infinite
}

@keyframes pldBefore {
  0% {
    width: .5em;
    box-shadow: 1em -.5em rgba(225, 20, 98, .75), -1em .5em rgba(111, 202, 220, .75)
  }

  35% {
    width: 2.5em;
    box-shadow: 0 -.5em rgba(225, 20, 98, .75), 0 .5em rgba(111, 202, 220, .75)
  }

  70% {
    width: .5em;
    box-shadow: -1em -.5em rgba(225, 20, 98, .75), 1em .5em rgba(111, 202, 220, .75)
  }

  100% {
    box-shadow: 1em -.5em rgba(225, 20, 98, .75), -1em .5em rgba(111, 202, 220, .75)
  }
}

@keyframes pldAfter {
  0% {
    height: .5em;
    box-shadow: .5em 1em rgba(61, 184, 143, .75), -.5em -1em rgba(233, 169, 32, .75)
  }

  35% {
    height: 2.5em;
    box-shadow: .5em 0 rgba(61, 184, 143, .75), -.5em 0 rgba(233, 169, 32, .75)
  }

  70% {
    height: .5em;
    box-shadow: .5em -1em rgba(61, 184, 143, .75), -.5em 1em rgba(233, 169, 32, .75)
  }

  100% {
    box-shadow: .5em 1em rgba(61, 184, 143, .75), -.5em -1em rgba(233, 169, 32, .75)
  }
}

.drK .pldW {
  background: var(--darkB)
}

/* Lightbox image */
.zmImg:not(.s) {
  position: relative
}

.zmImg:not(.s)::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  margin: 0 5px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23363637' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/></svg>") center / 14px no-repeat;
  background-color: rgba(0, 0, 0, .2);
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  transition: var(--trans-2);
  -webkit-transition: var(--trans-2);
  cursor: pointer
}

.zmImg:not(.s):hover::before {
  opacity: 1
}

.zmImg.s {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  margin: 0;
  background: rgba(0, 0, 0, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px)
}

.zmImg.s a,
.zmImg.s a:hover {
  opacity: 1
}

.zmImg.s img {
  display: block;
  max-width: 92%;
  max-height: 92%;
  width: auto;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05)
}

.zmImg.s img.full {
  left: auto;
  right: auto;
  border-radius: 10px;
  width: auto
}

.zmImg::after {
  content: '\2715';
  line-height: 16px;
  font-size: 14px;
  color: #fffdfc;
  background: var(--linkB);
  position: fixed;
  bottom: -20px;
  right: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: var(--trans-1);
  opacity: 0;
  visibility: hidden
}

.zmImg.s::after {
  bottom: 20px;
  right: 20px;
  opacity: 1;
  visibility: visible;
  cursor: pointer
}

/* Highlight */
.pre .pre-subst {
  color: var(--synxC)
}

.pre .pre-comment {
  color: #656e77
}

.pre .pre-attr,
.pre .pre-doctag,
.pre .pre-meta,
.pre .pre-meta-keyword,
.pre .pre-section,
.pre .pre-selector-class {
  color: #015692
}

.pre .pre-selector-pseudo,
.pre .pre-keyword {
  color: #0a8356
}

.pre .pre-selector-tag {
  color: #167406
}

.pre .pre-attribute {
  color: #803378
}

.pre .pre-built_in,
.pre .pre-literal,
.pre .pre-name,
.pre .pre-number,
.drK .pre .pre-number,
.pre .pre-quote,
.pre .pre-selector-id,
.pre .pre-template-tag,
.pre .pre-title,
.pre .pre-type {
  color: #b75501
}

.pre .pre-link,
.pre .pre-meta-string,
.pre .pre-regexp,
.pre .pre-selector-attr,
.pre .pre-string,
.pre .pre-symbol,
.pre .pre-template-variable,
.pre .pre-variable {
  color: #54790d
}

.pre .pre-bullet,
.pre .pre-code {
  color: #535a60
}

.pre .pre-deletion {
  color: #c02d2e
}

.pre .pre-addition {
  color: #2f6f44
}

.pre .pre-emphasis {
  font-style: italic
}

.pre .pre-strong {
  font-weight: 700
}

.drK .pre {
  color: var(--darkT)
}

.drK .pre .pre-subst,
.drK .pre .pre-property,
.drK .pre .pre-function {
  color: #fefefe
}

.drK .pre .pre-strong {
  font-weight: bold
}

.drK .pre .pre-code,
.drK .pre .pre-emphasis {
  font-style: italic
}

.drK .pre .pre-tag {
  color: #62c8f3
}

.drK .pre .pre-name {
  color: #ff7086
}

.drK .pre .pre-attr {
  color: #ffb244
}

.drK .pre .pre-variable,
.drK .pre .pre-template-variable,
.drK .pre .pre-selector-id,
.drK .pre .pre-selector-class {
  color: #ade5fc
}

.drK .pre .pre-string,
.drK .pre .pre-bullet {
  color: #a2fca2
}

.drK .pre .pre-type,
.drK .pre .pre-title,
.pre .pre-section,
.drK .pre .pre-attribute,
.drK .pre .pre-quote,
.drK .pre .pre-built_in,
.drK .pre .pre-builtin-name {
  color: #ffa
}

.pre .pre-number,
.drK .pre .pre-symbol,
.drK .pre .pre-bullet {
  color: #d36363
}

.drK .pre .pre-keyword,
.drK .pre .pre-literal {
  color: #fcc28c
}

.drK .pre .pre-selector-pseudo {
  color: #fbc796
}

.drK .pre .pre-selector-tag {
  color: #fbb46e
}

.drK .pre .pre-comment,
.drK .pre .pre-deletion,
.drK .pre .pre-code {
  color: #888
}

.pre .pre-regexp,
.drK .pre .pre-regexp,
.drK .pre .pre-link {
  color: #c6b4f0
}

.drK .pre .pre-meta {
  color: #fc9b9b
}

.drK .pre .pre-deletion {
  background-color: #fc9b9b;
  color: #333
}

.drK .pre .pre-addition {
  background-color: #a2fca2;
  color: #333
}

/* Article Rating */
.pRt {
  display: none;
  padding-top: 30px
}

.rTitle::after {
  content: attr(data-text)
}

.pRtC {
  display: flex;
  max-width: 480px;
  margin-top: 30px;
  padding: 25px 17px;
  line-height: 25px;
  background: var(--contentB);
  border-radius: 8px;
  box-shadow: 0 5px 35px rgba(0, 0, 0, .07);
  font-size: 16px;
  text-align: center;
  justify-content: center
}

.pRtC .ld {
  display: inline-flex;
  align-items: center;
  font-family: var(--fontB);
  font-size: 13px;
  opacity: .8
}

.pRtC .ld svg {
  width: 18px;
  height: 18px;
  margin-right: 5px
}

.pRtS {
  background: var(--contentB);
  position: absolute;
  font-family: var(--fontBa)
}

.drK .pRtC,
.drK .pRtS {
  background: var(--darkBa)
}

/* Post Next or Prev */
.chpN {
  margin: 4em 0 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  width: calc(100% + 20px);
  left: -10px;
  right: -10px;
  font-size: 14px;
  font-family: var(--fontB);
  line-height: 1.6em
}

.chpN>* {
  margin: 0 10px;
  flex: 0 0 calc(50% - 20px);
  display: inline-flex;
  flex-direction: column;
  color: inherit !important;
  cursor: default
}

.chpN>*::after {
  content: attr(data-text);
  display: block;
  /*display:-webkit-box;*/
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: .6;
  font-size: 12px;
  font-family: var(--fontBa);
  line-height: 1.5em;
  margin-top: 4px;
  cursor: pointer
}

.chpN>*:hover::after {
  text-decoration: underline
}

.chpN .cN {
  align-items: flex-end;
  text-align: right
}

.chpN.n {
  justify-content: flex-end
}

.chpN.p {
  justify-content: flex-start
}


.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-top: 30px !important;
  padding: clamp(17px, 5%, 40px) clamp(17px, 7%, 50px) !important;
  max-width: none !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25) !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview,
.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview * {
  box-sizing: border-box !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading {
  width: 100% !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-heading h5 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field {
  margin-top: 20px !important;
  width: 100% !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
  width: 100% !important;
  height: 40px !important;
  border-radius: 6px !important;
  border: 2px solid #e9e8e8 !important;
  background-color: #fff !important;
  outline: none !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input {
  color: #000000 !important;
  font-family: "Montserrat" !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  text-align: center !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input:-ms-input-placeholder {
  color: #000000 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-input-field input::-ms-input-placeholder {
  color: #000000 !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button {
  margin-top: 10px !important;
  width: 100% !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button {
  width: 100% !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 6px !important;
  line-height: 0px !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .form-preview .preview-submit-button button:hover {
  cursor: pointer !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line {
  color: #231f20 !important;
  font-family: "Montserrat" !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 25px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.followit--follow-form-container[attr-a][attr-b][attr-c][attr-d][attr-e][attr-f] .powered-by-line img {
  margin-left: 10px !important;
  height: 1.13em !important;
  max-height: 1.13em !important;
}


@media only screen and (max-width: 767px) {
  footer {
    margin-bottom: -100px !important;
  }
}

/* For mobile */
@media only screen and (max-width: 767px) {
  #footer-widget-2 {
    width: none;
    margin-left: auto !important;
    margin-top: 10px;
  }
}

@media only screen and (max-width: 767px) {
  #footer-widget-3 {
    width: none;
    margin-left: auto !important;
    margin-top: -10px;
  }
}

@media only screen and (max-width: 767px) {
  #footer-widget-4 {
    width: none;
    margin-left: auto !important;
    margin-top: -20px;
  }
}