@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-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');
}
@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');
}
::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: 1.9rem;
}
h2 {
font-size: 1.7rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.4rem;
}
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 !important;
}
.invisible {
visibility: hidden !important;
}
.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, .soon:after {
display: inline-block;
content: 'Free!';
color: var(--linkC);
font-size: 12px;
font-weight: 400;
margin: 0 5px;
}
.new::after {
content: 'New!';
}
.soon::after {
content: 'Coming soon!';
}
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;
}
.lazy.loaded, .tocL, .pVws:not(.hidden) {
animation: opaCity .5s 0s;
-webkit-animation: opaCity .5s 0s;
}
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;
animation: opaCity 1s 0s;
-webkit-animation: opaCity 1s 0s;
}
.secIn {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
max-width: var(--contentW);
}
.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;
}
.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;
}
.headI, .bIc {
display: flex;
align-items: center;
}
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(--headerLogo);
}
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 .h2, .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);
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 .headS {
}
.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);
}
.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;
}
ul.headIc li .fCls, .headR .headM, .isDrk .cusW {
cursor: auto;
}
.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 .section:not(:first-child), .blogCont footer .widget:not(:first-child), .blogCont .section.mobMn, #notif-widget .widget:not(:first-child) {
margin-top: 0;
}
.blogAd .section:not(.no-items) {
margin-bottom: 40px;
}
#notif-widget .widget:first-child {
margin-bottom: 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);
}
.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;
}
}
.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);
}
.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;
}
.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;
}
.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;
}
.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 {
font-size: 97%;
line-height: 1.8em;
color: var(--fotT);
padding: 40px 0 20px;
}
.footer {
padding: 20px;
background: var(--fotB);
box-shadow: 0 5px 35px rgba(0,0,0,.1);
border-radius: 10px;
}
footer .LinkList a, footer .sL li >* {
display: inline-block;
color: inherit;
line-height: 20px;
}
footer .LinkList a:hover {
text-decoration: underline;
}
footer .LinkList ul:not(.sL) li::before {
content: '\2013';
opacity: .3;
padding-right: 5px;
}
footer .sL {
display: flex;
flex-wrap: wrap;
align-items: baseline;
font-size: 13px;
opacity: .8;
}
footer .sL li {
display: inline-flex;
align-items: baseline;
}
footer .sL li:not(:first-child)::before {
content: '/';
margin: 0 5px;
}
footer .sL li >*::before {
content: attr(data-text);
}
.fotIn ul {
list-style: none;
margin: 0;
padding: 0;
}
.fotIn {
display: flex;
flex-wrap: wrap;
position: relative;
width: calc(100% + 30px);
left: -15px;
right: -15px;
}
.fotIn >* {
width: calc(21.666% - 30px);
margin: 0 15px;
}
.fotIn >*:first-child {
width: calc(35% - 30px);
}
.fotIn .widget {
margin-bottom: 30px;
}
.fotIn .widget .title {
color: inherit;
margin-bottom: 12px;
font-weight: 700;
font-size: 14px;
}
.abtU {
max-width: calc(100% - 25px);
}
.abtU::before {
content: attr(data-text);
font-size: 13px;
opacity: .6;
display: block;
margin-bottom: 3px;
}
.abtU >* {
align-items: center;
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.abtU .pu-views::before {
content: 'We have served the best performance ' attr(data-text) ' times.';
opacity: .8;
}
.abtL {
flex: 0 0 70px;
width: 70px;
height: 70px;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
border-radius: 10px;
}
.abtT {
flex: 0 0 calc(100% - 82px);
}
.abtT .tl {
color: inherit;
font-size: 1.3rem;
}
.abtD {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
line-height: 1.4em;
margin: 4px 0 0;
overflow: hidden;
}
footer .credit a {
display: inline-flex;
align-items: center;
}
footer .credit a svg {
width: 13px;
height: 13px;
margin: 0 3px;
fill: var(--linkC);
}
.cdtIn {
display: flex;
align-items: baseline;
justify-content: space-between;
position: relative;
width: calc(100% + 20px);
left: -10px;
right: -10px;
}
.cdtIn >* {
margin: 0 10px;
}
.cdtIn .HTML {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fotCd {
display: inline-flex;
}
.fotCd .creator {
opacity: 0;
}
.tTop svg {
width: 20px;
height: 20px;
stroke: var(--fotT);
}
.toTop {
display: flex;
align-items: center;
white-space: nowrap;
}
.toTop::before {
content: attr(data-text);
opacity: .7;
margin: 0 5px;
}
.toTopF {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--linkB);
position: fixed;
bottom: 20px;
right: 20px;
}
.toTopF svg {
stroke: #fffdfc;
stroke-width: 2;
}
.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: 0;
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;
}
.drK .wvH {
background: var(--darkW);
}
.drK .plx > use {
fill: var(--darkW);
}
@keyframes waveMove {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
.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 {
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;
}
}
.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;
}
.blogPts .noPosts {
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 40px;
}
.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.03);
-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;
}
.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 {
overflow: hidden;
cursor: pointer;
}
.iFxd .bM::after {
content: attr(aria-label);
white-space: nowrap;
transition: all .4s cubic-bezier(.18,.89,.32,1.28);
width: 0;
opacity: 0;
visibility: hidden;
}
.iFxd .bM:hover::after {
width: 63px;
opacity: 1;
visibility: visible;
}
.iFxd .bM.a::after {
content: attr(data-added);
}
.iFxd .bM.a:hover::after {
width: 50px;
}
.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);
}
.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: '/';
}
.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);
}
.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;
}
.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 .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;
}
.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;
}
.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 > a.link.newerLink:before {
content: unset;
}
.blogPg > a.link.newerLink:after {
content: attr(data-text);
}
.blogPg >* {
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
padding: 10px 13px;
margin: 5px;
color: inherit;
background: var(--pagenavB);
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 {
}
.blogPg .jsLd {
margin-left: auto;
margin-right: auto;
}
.blogPg .nwLnk::before, .blogPg .jsLd::before {
display: none;
}
.blogPg .jsLd::after {
margin: 0 8px;
}
.blogPg .olLnk::before {
}
.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);
}
.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;
}
.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;
}
.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;
}
.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 {
position: relative;
padding: 16px 20px 16px 50px;
background: var(--notifU);
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: rgba(0,0,0,.4);
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::after {
content: '\0021';
}
.drK .note {
background: var(--darkBs);
color: rgba(255,255,255,.9);
}
.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>");
}
.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;
}
.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, .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;
}
.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;
}
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;
}
.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);
}
.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;
}
.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; }
.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);
}
.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);
}
.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 {
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;
}
.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 {
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>");
}
@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;
}
}
.admAbt {
padding-top: 30px;
}
.admPs {
display: flex;
width: 100%;
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;
}
.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 .x {
background: black;
}
.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;
}
.lbHt {
position: relative;
display: block;
width: calc(100% + 40px);
right: -20px;
left: -20px;
padding: 8px 17px 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lbHt >* {
color: var(--bodyC);
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);
display: inline-flex;
margin: 0 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: .8;
}
.drK .lbHt >* {
background: var(--darkBa);
color: var(--darkT);
}
.Rtl .lbHt {
text-align: right;
}
.Rtl .lbHt {
margin-right: 0;
margin-left: 5px;
}
.widget .imgThm {
display: block;
position: absolute;
top: 50%;
left: 50%;
max-width: none;
max-height: 108%;
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;
}
.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;
}
}
.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;
}
.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);
}
@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);
}
.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;
}
.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 {
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;
}
.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;
}
.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;
}
.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;
}
}
.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;
}
#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);
}
.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);
}
.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 5s ease forwards;
-webkit-animation: slidein 5s 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;
}
.tNtf span i.del {
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(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'/><line x1='16.8651429' y1='4.47980952' x2='0.714666667' y2='4.47980952'/><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'/></g></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;
}
.tNtf.alt span, .Rtl .tNtf.alt span {
left: 0;
right: 0;
margin-bottom: -25px;
justify-content: left;
text-align: left;
font-size: 15px;
padding: 15px 24px;
border-radius: 0;
}
.Rtl .tNtf.alt span {
justify-content: right;
text-align: right;
}
.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;
}
.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%;
}
}
.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);
}
.ancrA {
position: fixed;
bottom: 0;
left: 0;
right: 0;
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);
}
.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;
}
.iFxd.bl {
top: auto;
bottom: 0;
right: auto;
left: 0;
}
.aNm.t {
background: rgba(255,255,255,.8);
padding: 6px;
}
.aNm.t .im {
width: 16px;
height: 16px;
margin-right: 4px;
}
.aNm.t .nm {
font-size: 13px;
color: var(--bodyC);
}
.aNm.t svg {
width: 13px;
height: 13px;
fill: #1DA1F2;
margin-left: 4px;
}
.Rtl .iFxd.bl {
top: auto;
bottom: 0;
right: 0;
left: auto;
}
.Rtl .aNm.t .im {
margin-left: 4px;
margin-right: 0;
}
.Rtl .aNm.t svg {
margin-left: 0;
margin-right: 4px;
}
.onIndx .blogPts .ntry, .PopularPosts, .widget.Label, .footer {
position: relative;
overflow: hidden;
}
.onIndx .blogPts .ntry::before, .itemFt .iCtnt::before, .PopularPosts::before, .widget.Label::before, .footer::before {
content: '';
width: 70px;
height: 70px;
position: absolute;
z-index: 0;
background: rgba(0,0,0,.04);
bottom: 0;
left: 0;
border-radius: 0 70px 0 0;
}
.onIndx.Rtl .blogPts .ntry::before, .Rtl .itemFt .iCtnt::before, .Rtl .PopularPosts::before, .Rtl .widget.Label::before, .Rtl .footer::before {
border-radius: 70px 0 0 0;
bottom: 0;
left: unset;
right: 0;
}
@media screen and (min-width:501px) {
.itemFt .iCtnt::before {
display: none;
}
}
.pTtmp[data-type] {
display: inline-flex;
align-items: center;
}
.pTtmp[data-type]::before {
content: attr(data-type);
display: inline;
background: var(--linkB);
color: #fff;
font-size: 10px;
line-height: .6rem;
padding: 3px;
border-radius: 2px;
margin-right: 4px;
}
.drK .pTtmp[data-type]::before {
background: var(--darkU);
}
.pTtmp[data-type]::after {
display: inline;
}
.Rtl .pTtmp[data-type]::before {
margin-left: 4px;
margin-right: 0;
}
.Rtl .FeaturedPost .itemFt::after {
left: 0;
right: unset;
border-radius: 0 0 20px 0;
}
.Rtl .toTopB {
right: unset;
left: 20px;
}
.Rtl .mainWrp .headIc .tNav svg {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
@media screen and (min-width:897px) {
.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);
}
.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;
}
.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) {
.nBtm.qEdit .qeBtn {
margin-bottom: 85px;
}
.nBtm.toTopB {
margin-bottom: 80px;
}
}
@media screen and (max-width:1100px) {
.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);
}
.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;
}
.fotIn >*, .fotIn >*:first-child {
width: calc(50% - 30px);
}
}
@media screen and (max-width:896px) {
.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;
}
.bD:not(.hdMn) .navI:not(:checked) ~ .mainWrp .headIc .tNav .h1, .bD:not(.hdMn) .navI:checked ~ .mainWrp .headIc .tNav .h3 {
opacity: 1;
}
.bD:not(.hdMn) .navI:not(:checked) ~ .mainWrp .headIc .tNav .h2, .bD:not(.hdMn) .navI:checked ~ .mainWrp .headIc .tNav .h1 {
opacity: 0;
}
.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);
}
.onIndx.onHm .blogPts >* {
flex: 0 0 calc(33.33% - 20px);
width: calc(33.33% - 20px);
}
.itemFt .pSnpt {
display: -webkit-box;
}
.bD:not(.MN-4) .mobMn:not(.no-items) + footer {
padding-bottom: calc(55px + 20px);
}
.bD:not(.MN-4) .wvH {
height: calc(100px + 60px);
}
.HD-2 .navS {
box-shadow: 0 0 25px rgba(0,0,0,.07);
}
.bD:not(.MN-4) .toTopB {
margin-bottom: 55px;
}
.bD:not(.MN-4) .nBtm.toTopB {
margin-bottom: 145px;
}
.MN-4 .nBtm.toTopB {
margin-bottom: 80px;
}
}
@media screen and (max-width:768px) {
.onIndx.onHm .blogPts >*, .onIndx.onMlt .blogPts >* {
flex: 0 0 calc(50% - 20px);
width: calc(50% - 20px);
}
}
@media screen and (max-width:640px) {
.headCn {
height: var(--headerHm);
}
.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 {
padding-top: 30px;
}
}
@media screen and (max-width:500px) {
.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;
}
.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);
}
.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;
}
.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%;
}
.fotIn >*, .fotIn >*:first-child {
width: calc(100% - 30px);
}
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
@keyframes slidein {
0% {
opacity: 0;
}
10% {
opacity: 1;
bottom: 24px;
}
50% {
opacity: 1;
bottom: 24px;
}
90% {
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;
}
}
@keyframes opaCity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-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;
}
10% {
opacity: 1;
bottom: 24px;
}
50% {
opacity: 1;
bottom: 24px;
}
90% {
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);
}
}
@-webkit-keyframes opaCity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.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;
}
.scrlH::-webkit-scrollbar {
width: 0;
height: 0;
}
.scrlH::-webkit-scrollbar-track {
background: transparent;
}
.scrlH::-webkit-scrollbar-thumb {
background: transparent;
border: none;
}
.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);
}
.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 .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;
}
}
@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;
}
}
.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;
}
.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;
}
.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 .erroC h3 span.e {
color: var(--darkBa);
}
.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 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, .drK footer .credit a svg {
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);
}
}
.googleTrans #goog-gt-tt,.googleTrans .goog-logo-link,.googleTrans .goog-te-balloon-frame,.googleTrans .goog-te-gadget img,.googleTrans .goog-te-gadget>span,.googleTrans .goog-te-menu-value span,.googleTrans .goog-tooltip,.googleTrans .goog-tooltip:hover,.googleTrans .google-logo-link .googleTrans .goog-te-banner-frame.skiptranslate,.googleTrans img.goog-te-gadget-icon,body>.skiptranslate {
display: none!important;
}
.googleTrans .goog-te-gadget {
display: block!important;
width: initial!important;
height: initial!important;
font-size: 0;
line-height: 0;
}
.googleTrans .goog-te-gadget select.goog-te-combo {
--border-color: var(--linkB);
outline: 0;
margin: 0;
width: 100%;
height: 40px;
color: var(--bodyC);
background-color: transparent;
text-align: left;
font-size: 14px;
font-family: var(--fontB)!important;
line-height: 1.25;
padding: 8px 16px;
border-width: 1px;
border-color: var(--border-color);
border-radius: 4px;
cursor: pointer;
--t-prop: border-color,top,padding,margin,-webkit-transform,-webkit-box-shadow;
--t-dura: 0.15s;
--t-func: cubic-bezier(.4,0,.2,1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition-property: var(--t-prop);
-o-transition-property: var(--t-prop);
transition-property: var(--t-prop);
-webkit-transition-duration: var(--t-dura);
-o-transition-duration: var(--t-dura);
transition-duration: var(--t-dura);
-webkit-transition-timing-function: var(--t-func);
-o-transition-timing-function: var(--t-func);
transition-timing-function: var(--t-func);
}
.googleTrans .goog-te-gadget select.goog-te-combo:focus {
box-shadow: inset 0 0 0 1px var(--border-color);
border-color: var(--border-color);
}
.googleTrans .goog-te-gadget select.goog-te-combo>* {
background: var(--contentB);
}
.drK .googleTrans .goog-te-gadget select.goog-te-combo {
--border-color: var(--darkU);
color: var(--darkT);
}
.drK .googleTrans .goog-te-gadget select.goog-te-combo>* {
background: var(--darkB);
}
.transW {
visibility: hidden;
opacity: 0;
position: fixed;
right: 20px;
left: 20px;
bottom: 0;
display: block;
transition: var(--trans-1);
-webkit-transition: var(--trans-1);
z-index: 21;
background: var(--contentB);
border-radius: 10px;
box-shadow: 0 5px 30px 0 rgba(0,0,0,.05);
}
.transH {
width: 100%;
padding: 20px 20px 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.transH::before {
content: attr(data-text);
font-size: 13px;
opacity: .8;
}
.transCl::after {
content: '\2715';
font-size: 14px;
}
.transP {
width: 100%;
padding: 0 20px 20px;
}
.transI:checked~.transW {
visibility: visible;
opacity: 1;
bottom: 20px;
}
.transI:checked~.transW+.fCls {
background: rgba(0,0,0,.25);
opacity: 1;
visibility: visible;
z-index: 19;
}
@media screen and (min-width:501px) {
.transW {
position: absolute;
width: 280px;
top: -5px;
bottom: auto;
right: 0;
left: auto;
border-radius: 15px 5px 15px 15px;
}
.transI:checked~.transW {
top: 0;
right: 0;
bottom: auto;
}
.transI:checked~.transW+.fCls {
background: 0 0;
}
}
.drK .transW {
background: var(--darkBs);
}
.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: none;
}
.blogPg .jsLd::after {
content: attr(data-text);
margin: 0 8px;
}
.blogPg .olLnk::before {
}
.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);
}
.drK .inline_post {
background: var(--darkBa);
}
.drK .inline_post:active, .drK .inline_post:hover {
background: var(--darkBa);
}
.drK .inline_post .postTitle, .drK span.credit {
color: var(--darkT)!important;
}
.drK .blogPts .post {
background: unset!important;
}
.drK .blogPts > *, .drK .rPst, .drK .PopularPosts, .drK .Label {
background: var(--darkBa);
}
.inline_post , .inline_post .postImageUrl , .inline_post .centered-text-area {
min-height: 80px;
position: relative;
}
.inline_post , .inline_post:hover , .inline_post:visited , .inline_post:active {
border: 0!important;
}
.inline_post .clearfix:after {
content: "";
display: table;
clear: both;
}
.inline_post {
display: block;
transition: background-color 250ms;
webkit-transition: background-color 250ms;
width: 100%;
opacity: 1;
transition: opacity 250ms;
webkit-transition: opacity 250ms;
background-color: var(--notifU);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.inline_post:active , .inline_post:hover {
opacity: 1;
transition: opacity 250ms;
webkit-transition: opacity 250ms;
background-color: var(--notifU);
}
.inline_post .centered-text-area {
width: 100%;
position: relative;
}
.inline_post .ctaText {
border-bottom: 0 solid #fff;
color: var(--synxOrange);
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
text-decoration: underline;
}
.inline_post .postTitle {
color: var(--linkC);
font-size: 16px;
font-weight: 600;
margin: 0;
padding: 0;
width: 100%;
}
.inline_post .ctaButton {
background-color: var(--linkC)!important;
color: #ECF0F1;
border: none;
border-radius: 3px;
box-shadow: none;
font-size: 14px;
font-weight: bold;
line-height: 26px;
moz-border-radius: 3px;
text-align: center;
text-decoration: none;
text-shadow: none;
width: 80px;
min-height: 80px;
background: url(//www.myjamplus.com/wp-content/themes/plusui/assets/img/simple-arrow.png)no-repeat;
position: absolute;
right: 0;
top: 0;
}
.inline_post:hover .ctaButton {
background-color: var(--synxOrange)!important;
}
.inline_post .centered-text {
display: table;
height: 80px;
padding-left: 18px;
top: 0;
}
.inline_post .inline_post-content {
display: table-cell;
margin: 0;
padding: 0;
padding-right: 108px;
position: relative;
vertical-align: middle;
width: 100%;
}
.inline_post:after {
content: "";
display: block;
clear: both;
}