/**************** ROOT ****************/

:root {
    --white: hsla(0,0%,100%,1);
    --black: hsla(0,0%,0%,1);

    --accent-bg: hsla(6,84%,60%,1);
    --accent-tx: hsla(6,96%,66%,1);

    --dark-soft: hsla(0,0%,18%,1);
    --dark: hsla(0,0%,12%,1);
    --dark-hard: hsla(0,0%,6%,1);
    
    --light-soft: hsla(0,0%,66%,1);
    --light: hsla(0,0%,72%,1);
    --light-hard: hsla(0,0%,78%,1);
    --light-ultra-hard: hsla(0,0%,90%,1);
}



/**************** BODY ****************/

body {font-family: 'Open Sans', sans-serif; font-weight: 400; font-stretch: 100%; font-size: 14px; line-height: 1; color: var(--light); background-color: var(--dark);}

#noclick {display: none; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 99999999999999999999;}

.ccbox {
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
    width: 100%; height: auto;
}
.cwbox {width: 100%; max-width: 1200px; padding-left: 24px; padding-right: 24px;}


@media screen and (max-width: 800px) {
    .cwbox {padding-left: 18px; padding-right: 18px;}
}



/**************** BTN ****************/

.btn {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
    position: relative; min-height: 48px; padding: 0px 18px 0px 15px; font-weight: 700; font-size: 16px; line-height: 1; text-align: center;
    color: var(--white); background-color: var(--accent-bg); border-radius: 9px; opacity: 1; transition: opacity ease 240ms; box-sizing: border-box; cursor: pointer; overflow: hidden;
}
.btn:hover {opacity: 0.84;}
.btn > i {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
    position: relative; width: 24px; aspect-ratio: 1; margin: 0px 12px 0px 0px;
}
.btn > i > svg {display: block; width: 100%; height: 100%; fill: var(--white);}
.btn > b {display: block; flex: 1 1 auto; font-weight: inherit;}
.btn.icon > i {margin: 0px !important;}


/*** *** ***/
html[dir="rtl"] .btn {padding: 0px 15px 0px 18px;}
html[dir="rtl"] .btn > i {margin: 0px 0px 0px 12px;}



/**************** TAG ****************/

.tag {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
    position: relative; min-height: 36px; padding: 0px 15px 0px 12px; font-weight: 700; font-size: 14px; line-height: 1; text-align: center;
    color: var(--light-hard); background-color: var(--dark-soft); border-radius: 6px; opacity: 1; transition: opacity ease 240ms; box-sizing: border-box; cursor: pointer; overflow: hidden;
}
.tag:hover {opacity: 0.84;}
.tag > i {
    display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center;
    position: relative; width: 16px; aspect-ratio: 1; margin: 0px 12px 0px 0px;
}
.tag > i > svg {display: block; width: 100%; height: 100%; fill: var(--accent-tx);}
.tag > b {display: block; flex: 1 1 auto; font-weight: inherit;}
.tag-box {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start;
    width: calc(100% + 12px); margin: -6px;
}
.tag-box .tag {margin: 6px;}


/*** *** ***/
html[dir="rtl"] .tag {padding: 0px 12px 0px 15px;}
html[dir="rtl"] .tag > i {margin: 0px 0px 0px 12px;}



/**************** HEADER ****************/

header {width: 100%; padding: 18px 0px; background-color: var(--dark);}
header .cwbox {justify-content: space-between;}
header .logo {display: block; position: relative; height: 30px; aspect-ratio: 8.23;}
header .logo svg {display: block; width: 100%; height: 100%; fill: var(--accent-bg);}
header .btn-box {max-width: calc(100% - 48px); margin: 0px -24px;}
header .btn {margin: 0px 24px; padding: 0px; min-height: 30px; background-color: transparent;}
header .btn > i > svg {transform: rotate(-30deg); fill: var(--accent-bg);}
header .btn.stories > i {width: 24px; margin: 0px 20px 0px 1px;}
header .btn.themes > i {width: 24px; margin: 0px 18px 0px 0px;}
header .btn.request > i {width: 20px; margin: 0px 24px 0px 3px;}

/*** *** ***/
html[dir="rtl"] header .btn {padding: 0px;}
html[dir="rtl"] header .btn > i {margin: 0px 0px 0px 18px;}
html[dir="rtl"] header .btn.stories > i {margin: 0px 1px 0px 20px;}
html[dir="rtl"] header .btn.themes > i {margin: 0px 0px 0px 18px;}
html[dir="rtl"] header .btn.request > i {margin: 0px 3px 0px 24px;}


@media screen and (max-width: 800px) {
    header .cwbox {justify-content: center;}
    header .logo {height: 24px;}
    header .btn-box {width: calc(100% + 36px); max-width: calc(100% + 18px); margin: 9px -9px -6px -9px; justify-content: center;}
    header .btn {margin: 0px 9px; min-height: 30px; font-size: 14px;}
    header .btn.stories > i {width: 16px; margin: 0px 10px 0px 0px;}
    header .btn.themes > i {width: 16px; margin: 0px 9px 0px 0px;}
    header .btn.request > i {width: 14px; margin: 0px 11px 0px 0px;}
    html[dir="rtl"] header .btn.stories > i {margin: 0px 0px 0px 11px;}
    html[dir="rtl"] header .btn.themes > i {margin: 0px 0px 0px 9px;}
    html[dir="rtl"] header .btn.request > i {margin: 0px 0px 0px 12px;}
}


/**************** FOOTER ****************/

footer {width: 100%; margin-top: 90px; padding: 30px 0px 33px 0px; background-color: var(--dark-soft);}
footer .links {width: calc(100% + 24px); margin: -12px;}
footer .links a {display: block; margin: 12px; font-weight: 700; font-size: 16px; line-height: 24px; color: var(--accent-tx); transition: opacity ease 240ms;}
footer .links a:hover {opacity: 0.84;}
footer .copy {padding-top: 24px; font-weight: 700; font-size: 16px; line-height: 24px; text-align: center; color: var(--light-hard);}

@media screen and (max-width: 800px) {
    footer {margin-top: 60px;}
    footer .links {width: calc(100% + 18px); margin: -9px;}
    footer .links a {margin: 9px; font-size: 14px; line-height: 22px;}
    footer .copy {font-size: 14px; line-height: 22px;}
}


/**************** PAGE IMG TITLE ****************/

.page-img-title {width: 100%;}
.page-img-title img {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.page-img-title .img-fix {display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--black); opacity: 0.60; z-index: 2;}
.page-img-title .title-box {width: 100%; max-width: 900px; padding: 120px 0px; text-align: center; z-index: 3;}
.page-img-title .title-box h1 {width: 100%; padding: 9px 0px 12px 0px; font-weight: 700; font-size: 36px; line-height: 42px; color: var(--white);}
.page-img-title .title-box .text {width: 100%; padding: 12px 0px 15px 0px; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--white);}
.page-img-title .title-box .data {width: 100%; padding: 12px 0px 12px 0px;}
.page-img-title .title-box .data .tag {min-height: 30px; margin: 0px 12px; padding: 0px; font-weight: 500; color: var(--light-hard); background-color: transparent; pointer-events: none;}
.page-img-title .title-box .data .tag.date > i {width: 16px;}
.page-img-title .title-box .data .tag.views > i {width: 18px;}


@media screen and (max-width: 800px) {
    .page-img-title .title-box {padding: 60px 0px;}
    .page-img-title .title-box h1 {font-size: 30px; line-height: 36px;}
    .page-img-title .title-box .text {font-size: 14px; line-height: 22px;}
    .page-img-title .title-box .data {padding: 12px 0px 12px 0px;}
    .page-img-title .title-box .data .tag {min-height: 24px; margin: 0px 6px; font-size: 14px;}
    .page-img-title .title-box .data .tag.date > i {width: 14px;}
    .page-img-title .title-box .data .tag.views > i {width: 16px;}
}


/**************** STORIES LIST ****************/

.stories-list {width: 100%; padding-top: 60px;}
.stories-list .wrapper {margin: -12px;}
.stories-list .list-title {width: 100%; padding: 0px 0px 24px 0px; font-weight: 700; font-size: 30px; line-height: 36px; text-align: center; color: var(--light-ultra-hard);}
.stories-list .story-pad {width: 33.333333%; padding: 12px;}
.stories-list .story {display: block; width: 100%; background-color: var(--dark-soft); border-radius: 9px; overflow: hidden;}
.stories-list .story img {display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;}
.stories-list .story .name {display: block; width: 100%; padding: 12px 18px 0px 18px; font-weight: 700; font-size: 20px; line-height: 28px; color: var(--light-ultra-hard);}
.stories-list .story .data {width: 100%; padding: 3px 6px 12px 6px;}
.stories-list .story .data .tag {min-height: 30px; margin: 0px 12px; padding: 0px; font-weight: 500; color: var(--light-hard); background-color: transparent; pointer-events: none;}
.stories-list .story .data .tag.date > i {width: 16px;}
.stories-list .story .data .tag.views > i {width: 18px;}
.stories-list .list-more {width: 100%; padding: 36px 0px 0px 0px;}


/*** *** ***/
html[dir="rtl"] .stories-list .story .data .tag {padding: 0px;}


@media screen and (max-width: 800px) {
    .stories-list {padding-top: 42px;}
    .stories-list .wrapper {margin: -9px;}
    .stories-list .list-title {padding: 0px 0px 30px 0px; font-size: 24px; line-height: 30px;}
    .stories-list .story-pad {width: 50%; padding: 9px;}
    .stories-list .story .name {padding: 12px 18px 0px 18px; font-size: 18px; line-height: 26px;}
    .stories-list .story .data {width: 100%; padding: 3px 12px 12px 12px;}
    .stories-list .story .data .tag {min-height: 30px; margin: 0px 6px; font-size: 14px;}
    .stories-list .story .data .tag.date > i {width: 14px;}
    .stories-list .story .data .tag.views > i {width: 16px;}
}

@media screen and (max-width: 500px) {
    .stories-list .story-pad {width: 100%;}
}


/**************** PAGE TEXT MAIN ****************/

.page-main-text {width: 100%; padding-top: 60px;}
.page-main-text .cwbox.flex {flex-wrap: nowrap;}
.page-main-text .main {flex: 1 1 auto; max-width: 100%; color: var(--light);}
.page-main-text .main h2, .page-main-text .main h3, .page-main-text .main h4 {width: 100%; padding: 12px 0px 12px 0px; font-weight: 700; font-size: 20px; line-height: 28px; color: var(--light-ultra-hard);}
.page-main-text .main h2:first-child, .page-main-text .main h3:first-child, .page-main-text .main h4:first-child {padding: 0px 0px 12px 0px;}
.page-main-text .main p {width: 100%; padding: 0px 0px 12px 0px; font-weight: 500; font-size: 16px; line-height: 24px; box-sizing: border-box;}
.page-main-text .main p:last-child {padding: 0px 0px 0px 0px;}
.page-main-text .main a {font-weight: 700; color: var(--accent-tx);}
.page-main-text .main b, .page-main-text .main strong {font-weight: 700; color: var(--light-ultra-hard);}
.page-main-text .main li {width: 100%; max-width: 660px; padding: 0px 0px 12px 18px; font-weight: 500; font-size: 16px; line-height: 24px;}
.page-main-text .main li::after {content: '•'; display: block; position: absolute; top: 0px; left: 0px; font-weight: 700; font-size: 16px; line-height: 24px; color: var(--light-soft);}
.page-main-text .main :last-child li:last-child {padding: 0px 0px 0px 18px;}

.page-main-text .side {width: 420px; padding: 0px 0px 0px 120px;}
.page-main-text .side .side-title {padding: 0px 0px 18px 0px; font-weight: 700; font-size: 20px; line-height: 28px; color: var(--light-ultra-hard);}


/*** *** ***/
html[dir="rtl"] .page-main-text .main li {padding: 0px 18px 12px 0px;}
html[dir="rtl"] .page-main-text .main li::after {left: auto; right: 0px;}
html[dir="rtl"] .page-main-text .main :last-child li:last-child {padding: 0px 18px 0px 0px;}
html[dir="rtl"] .page-main-text .side {padding: 0px 120px 0px 0px;}


@media screen and (max-width: 800px) {
    .page-main-text {padding-top: 42px;}
    .page-main-text .cwbox.flex {flex-wrap: wrap; flex-direction: row-reverse;}
    .page-main-text .main h2, .page-main-text .main h3, .page-main-text .main h4 {font-size: 18px; line-height: 26px;}
    .page-main-text .main p {font-size: 14px; line-height: 22px;}
    .page-main-text .main li {font-size: 14px; line-height: 22px;}
    .page-main-text .main li::after {font-size: 14px; line-height: 22px;}
    .page-main-text .side {width: 100%; padding: 42px 0px 0px 0px;}
    .page-main-text .side .side-title {text-align: center;}
    .page-main-text .side .tag-box {justify-content: center;}
    html[dir="rtl"] .page-main-text .side {padding: 42px 0px 0px 0px;}
}