/*

سلام دوستان فرهان هستم سازنده این  قالب تمامی قالب های من
قابلیت های متنوعی دارند و همگی هم رایگان هستند
راستش این رو مینویسم تا بتونید با این راهنمای کوچیک قالب رو ادیت کنید
برای تغییر هدر کافیه به خط : 300 بری
و اونجا توی اون پرانتز لینک تصویر مورد علاقتو بزاری کدش این شکلیه
background: url('لینک تصویرتون رو اینجا بزارید');
پس برید به خط 300 و تغییرش بدید 
285 :واسه تغییر پس زمینه کل وب باید به خط
و اونجا به یه همچین کدی میرسید :
background: powderblue url('#');
خب اگر میخواید پس زمینه وبتون رنگ باشه کافیه به جای کلمه 
powderblue
یه رنگ دیگه بزارید و اگر خواستید تصویر بزارید کافیه فقط به جای اون علامت # لینک تصویر
خودتون رو بزارید در مورد قسمت ها و قابلیت های دیگه این وب کافیه به آدرس زیر برید و 
قالب شماره 3 رو انتخاب کنید و بخونید محض اطلاع باید بگم این قالب 
هم پلی لیست موزیک داره و هم مای تسک که خیلی جالبه حتما ببینیدش

https://farhanwd.blog.ir/flag/templates-room 

و آدرس وب من :

https://farhanwd.blog.ir

//--------------------------------------------------------------//
copyright 12/19/2021 7:50 PM Farhan Theme's collection Num : 03
//--------------------------------------------------------------//

*/

@charset "UTF-8";

/* reset kinde of */

* {
	box-sizing: border-box;
	outline: none !important;
}

/* global */

p {
	margin: 0.25em 0;
}

a {
	text-decoration: none;
}

img, table {
	max-width: 100%;
}

.imgFeat {
	width: 100%;
	height: auto;
}

video {
	width:100% !important;
	height:100% !important;
}

.hr {
	border: 0;
	height: 15px;
	background: transparent !important;
}

/* html */

html {
	scroll-behavior: smooth;
}

/* margin and padding */

.mrg0, .ul {
	margin: 0;
}

.mrgb {
	margin-bottom: 1rem;
}

.pad10 {
	padding: 10px;
}

.pad15 {
	padding: 15px;
}

/* lists */

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

.li:last-child,.lib:last-child {
	margin-bottom: 0;
}

.lib:last-child {
	border-bottom: 0;
}

/* flex */

.fl,.flW,.flRe,.flWRe,.plmc {
	display: flex;
}

.flW,.flWRe {
	flex-wrap: wrap;
}

.flRe,.flWRe {
	flex-direction: row-reverse;
}

.aliI-CE,.plmc {
	align-items: center;
}

.jusCo-SP {
	justify-content: space-between;
}

.jusCo-CE,.plmc {
	justify-content: center;
}

.fl-im {
	display: flex !important;
}

/* border-radius */

.borOK {
	border-radius: 50%;
}

.borNOK {
	border-radius: 10rem;
}

/* buttons and input[type="submit"] */

.but, input[type="submit"] {
	padding: 0;
	border: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* positioning */

.por{
	position: relative;
}

.pos,.farhana  {
	position: absolute;
}

.farhana {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset: 0;
}

.zin1 {
	z-index: 1;
}

.zin2 {
	z-index: 2;
}

.zin3 {
	z-index: 3;
}

.zin4 {
	z-index: 4;
}

.zin5 {
	z-index: 5;
}

.zin6 {
	z-index: 6;
}

.zin7 {
	z-index: 7;
}

.zin8 {
	z-index: 8;
}

.zin9 {
	z-index: 9;
}

.zin10 {
	z-index: 10;
}

/* aligns */

.txt-R {
	text-align: right;
}

.txt-C,.plmc {
	text-align: center;
}

.txt-L {
	text-align: left;
}

.dir-L {
	direction: ltr;
}

.dir-R {
	direction: rtl;
}

/* summary */

summary {
	cursor: pointer;
}

.non-mark {
	list-style-type: none;
}

/* displays */

.disp-B {
	display: block;
}

/* float */

.floR {
	float: right;
}

.floL {
	float: left;
}

.clear {
	clear: both;
}

/* overflow */

.ovf-H {
	overflow: hidden;
}

.ovf-YS {
	overflow-y: scroll;
}

/*fonts in blog never change*/

/* فونت های وبلاگ اینجاست بچه ها اصن تغییر ندید  این قسمت نیازی به ادیت نداره */

/* fonts */

@font-face {
	font-family: 'main';
	src: url(https://bayanbox.ir/download/1133625635203418600/Vazir.ttf);
}

@font-face {
	font-family: 'main2';
	src: url(https://bayanbox.ir/download/4157849144148293191/Normal.ttf);
}

textarea, input, select, body, button, h1, h2, h3, h4, h5, h6,.followBx, .followThis, .cke_reset_all .cke_rtl * {
	font-family: main2, main;
}

/* body */

body {
	background: powderblue url('#'); /*اگر خواستید تصویر پس زمینه وبتون رو تغییر بدید به جای # لینک تصویر روبزارید*/
	font-size: 14px;
}

/* main */

main {
	width: 720px;
	margin: 50px auto;
}

/*header*/

.header-1 {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;  /* پایین میتونید لینک هدر وب رو بزارید همون عکس گلگلیه که توی دمو یا همون پیشنمایش دیدید کافیه توی پرانتز پایین لینک خودتون رو بزارید */
    background: url('https://images.dunelm.com/30680158.jpg?$standardplayerdefault$&img404=noimagedefault');
    background-size: 100% 100%;
    flex-direction: column;
}

.header-1 .blt {
    font-size:25px;
    padding:6px;
    background:rgba(0,0,0,0.5);
    margin: 0 0 5px;
    border-radius:5px;
}

.header-1 .blt a {
    color: #fff;
}

.header-1 strong {
    color:#fff;
    padding:4px;
    background:rgba(0,0,0,.5);
    font-size:12px;
    border-radius:5px;
}

/* article block list */

.article-block {
	width: 405px;
}

/* post item */

.post-I {
	border: 1px solid #6fc1cb;
	margin-bottom: 15px;
}

/* post name */

/* موقع ترجمه پدینگ رایت باید باشه */

.post-name a {
	font-size: 21px;
	color: #387e87;
}

/* post category just one */

.follow-but1,
.menu[name*="https://blog.ir/panel/-/followed_blogs?follow="] {
	display: none;
}

.follow-but1[name*="https://blog.ir/panel/-/followed_blogs?follow="] {
	display: block;
}

/* post footer */

.post-footer {
	padding: 10px 15px;
	border-top: 1px solid #6fc1cb;
	margin-top: 6px;
}

.post-details .sum {
	width: 16px;
}

.post-details .sum div {
	width: 6px;
	height: 6px;
	margin: 1px;
	border: 1px solid #78a7b7;
}

.post-details .sum .close-ov {
	display: none;
}

.post-details[open] .sum .close-ov {
	display: block;
}

.close-ov {
	position: fixed;
	inset: 0;
	height: 100vh;
	backdrop-filter: blur(4px);
	background: rgba(0,0,0,0.2);
}

/* like and go to comments */

.like {
	padding: 2px 0 0;
}

.rated .like i:before,.rated .like-task i:before {
	content:"\f004";
}

.rated .like-task {
	color:#123456;
}

.anim-like-farhan {
	width: 35px;
	height: 35px;
	background: blue; /*رنگ قلب لایک همون انیمیشنه که کلیک میکنید روی لایک نشون داده میشه*/
	transform: rotate(45deg);
	position: relative;
}

.left-top-cir{
	width: 35px;
	height: 35px;
	border-radius: 100px;
	background: inherit;
	top: -17.5px;
	position: absolute;
}

.right-top-cir {
	right: 17.5px;
	width: 35px;
	height: 35px;
	border-radius: 100px;
	background: inherit;
	position: absolute;
}

.red-anim {
	opacity: 0;
	visibility:hidden;
	animation-name: anim-red;
	animation-timing-function: linear;
	animation-duration: 1s;
	animation-play-state: paused;
	animation-iteration-count: 1;
}

.rated .like .red-anim {
	animation-play-state: running;
	visibility:visible;
}

@keyframes anim-red {
	0% {
		transform:translate(0,0);
		opacity:1;
	}
	
	25% {
		transform:translate(3px,-20px)
	}
	
	50% {
		transform:translate(-3px,-40px)
	}
	
	75% {
		transform:translate(3px,-60px)
	}
	
	100% {
		transform:translate(-3px,-80px);
		opacity:0;
	}
}


.like,
.comGo {
	display: inline-block;
	color: #2a73a0;
}

.comGo {
	padding-right: 6px;
}

/* read more */

.read-more {
	padding: 0 10px;
	color: #fff;
	font-size: 12px;
	margin-right: 10px;
	background: linear-gradient(45deg, #040846, #33bae7);
	border-radius: 2px;
}

/* post profile */

.post-profile {
	width: 300px;
	border-radius: 3px;
	background: #fff;
	bottom: -100px;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* header post profile */

.post-profile-header {
	height: 100px;
	border-radius: 3px 3px 0 0;
}

.headimg-pro {
	height: 100%;
	width: 100%;
}

.overlay {
	backdrop-filter: blur(3px);
}

.img-post-avatar {
	height: 64px;
	width: 64px;
	border-radius: 10px;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.img-post-avatar img {
	padding: 6px;
	background: #fff;
	border-radius: inherit;
}

/* top data for post */

.top-date-for-post {
	padding: 6px;
	width: 100%;
	background: rgba(0, 0, 0, 0.3);
}

.top-data-aR {
	width: calc(100% - 50px);
	padding-left: 10px;
	white-space: pre;
	text-overflow: ellipsis;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

.top-data-aL {
	direction: ltr;
	padding: 0 6px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 14px;
}

/* main post profile */

.main-data-post .b {
	text-align: center;
	display: block;
	padding-top: 12px;
}

.main-data-post {
	padding: 25px 10px 5px;
}

/* rate for post */

.rate-prof-post {
	margin-top: 10px;
}

.rate-I {
	margin: 0 5px 5px 0;
}

.rate-I span:not(.rate-counter) {
	width: 50px;
	height: 50px;
	background: aliceblue;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #15a3d1;
	font-size: 30px;
	border-radius: 7px;
	padding-top: 5px;
}

.rate-I div {
	margin-top: 10px;
	text-align: center;
	background: aliceblue;
	border: 1px solid #478fcf;
	border-radius: 100px;
	color: #000;
	font-weight: 400;
}

.rate-I div:after {
	z-index: -1;
	content: '';
	position: absolute;
	border: 0;
	border-right: 10px solid #1886e7;
	border-bottom: 10px solid transparent;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-50deg);
}

/* how much seen */

.rate-I.seen span {
	padding: 0;
	background: aliceblue;
	color: #15a3d1;
}

.rate-I.seen div {
	background: aliceblue;
	border: 1px solid #478fcf;
	color: #000;
}

.rate-I.seen div:after {
	border-right-color: #1886e7;
}

/* how much comment */

.rate-I.feedback span {
	padding: 0;
	background: aliceblue;
	color: #15a3d1;
}

.rate-I.feedback div {
	background: aliceblue;
	border: 1px solid #478fcf;
	color: #000;
}

.rate-I.feedback div:after {
	border-right-color: #1886e7;
}

/* tag-and-cat in post profile */

.tag-and-cat .sum {
	width: 30px;
	height: 30px;
	background: #ffe6e6;
	border-radius: 100px;
	box-shadow: 0 0 3px #eaf4ff;
	font-size: 16px;
	padding-top: 3px;
	color: blueviolet;
	transition: all 0.6s ease-in-out;
}

.tag-and-cat[open] .sum {
	color: red;
	background: #fff;
	transform: rotate(46deg);
}

.tag-and-cat ul.por {
	padding: 10px;
	margin-top: 25px;
	background: #ffedf2;
	border-radius: 15px;
}

.more-I {
	padding: 5px;
	margin-bottom: 3px;
}

.more-I:first-child {
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.6);
	color: #000;
	font-size: 11px;
}

.tag-post-pro {
	padding: 0 3px;
	margin: 0 0 1px 1px;
	background: rgba(255, 0, 0, 0.1);
	border-radius: 2px;
	font-size: 10px;
}

.tag-post-pro a {
	color: #000;
	font-weight: 600;
}

.tag-and-cat ul.por:after {
	content: '';
	border: 0;
	border-right: 15px solid #ffedf2;
	border-bottom: 15px solid transparent;
	position: absolute;
	top: -6px;
	transform: rotate(-44deg);
	z-index: -1;
}

/* pagination box */

.pagination-box {
	background: powderblue;
	padding: 10px;
	border: 1px solid #6fc1cb;
	margin: 25px 0;
}

.pagination-box a {
	margin: 5px;
	padding: 4px 10px;
	border: 1px solid #6fc1cb;
	color: #00545e;
	background: powderblue;
	text-align: center;
	border-radius: 100px;
	font-weight: 600;
}

.pagination-box a.current {
    box-shadow: 0 0 6px 1px #6fc1cb;
    background: #6fc1cb;
}

/* دکمه قبلی */

.befo {
	border: 1px solid #6fc1cb;
	color: #00545e;
	background: powderblue;
}

/* دکمه بعدی */

.afte {
	border: 1px solid #6fc1cb;
	color: #00545e;
	background: powderblue;
}

/* جدا کننده ... */

.spacer {
	font-size: 15px;
	font-weight: 600;
	color: cadetblue;
}

/* comments in posts and pages */

.if-post-has-com {
	padding: 5px;
	display: block;
	text-align: center;
	border: 1px solid #6fc1cb;
	margin: 0 0 15px;
	border-radius: 100px;
	color: #000;
}

.no-comm {
	color: #000;
	font-size: 14px;
	display:none;
}

.no-comm[name="۰"] {
	display:block;
}

.dot-com-no {
	font-size: 15px;
	font-weight: 600;
	color: #000;
	animation-name: farhanComments;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.dot-com1 {
	animation-delay: 0.3s;
}

.dot-com2 {
	animation-delay: 0.6s;
}

.dot-com3 {
	animation-delay: 0.9s;
}

@keyframes farhanComments {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

/* per comment */

.comments {
	margin-bottom: 10px;
}

.commet-header-extra {
	width: calc(100% - 35px);
	margin-right: 15px;
}

.comment-name {
	color: #000;
	font-weight: 600;
}

.comment-web {
	color: aliceblue;
	width: 25px;
	height: 25px;
	background: linear-gradient(45deg, #2196f3, #00dc5ed6);
	padding-top: 2px;
}

.comment-main {
	border-right: 1px solid #6fc1cb;
	padding: 0 10px;
	margin: 8px 17px 8px 0;
	color: #000;
}

/* comment reply */

.coms-rep-but .sum {
	margin-bottom: 8px;
	width:fit-content;
}

.coms-rep-but[open] .sum {
	margin-bottom: 0;
}

.coms-rep-but .sum, .coms-rep-but .sum::marker {
	color: #2a73a0;
	font-weight: 600;
}

.comment-second {
	margin: 10px 20px;
}

/*comment form*/

.toprelo {
	display: block;
	top: 100%;
	left: 50%;
	width: 25px;
	height: 25px;
	transform: translate(-50%, -50%);
	background: #335a99;
	border-radius: 50%;
}



.toprelo:after {
	content: '↺';
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	padding-top: 3px;
}

.formField2 textarea {
	width:100%;
	border:0;
	background:#7ab3c5;
	resize:none;
	max-height:100px;
}

.formField2 label {
	font-size:10px;
	text-align:right;
}

.formField2 .fldcontent {
	margin-right:0;
	padding-left:0;
}

.bComForm .commentAvatar img {
	border:0;
	border-radius:50%;
	width:35px;
	height:35px;
}

div.inputFix input.text,select {
	padding:2px;
	border:0;
	width:100%;
	color:#000;
	background:#83cae1;
	appearance:none;
	font-size:11px;
	border-radius:0;
}

select {
	cursor:pointer;
}

.smalltip,.bComForm .commentAvatar span {
	display:none !important;
}

.in {
	display:flex;
	flex-wrap:wrap;
	width:100%;
}

.inputFix {
	padding:0;
}

.bComForm .hasComment {
	margin-left:0;
}

.in .formField2 {
	padding-left:5px;
	flex-grow:1;
}

.formField2 input[type="submit"] {
	margin-top: 0 !important;
	text-align: center;
	width: 100%;
	padding: 5px;
	background: #92cadb;
	color: #065b75;
	margin-bottom:8px;
}


/* side bar */

aside {
	width: 300px;
}

/* side per part😂 */

.side-part {
	padding: 15px;
	border: 1px solid #6fc1cb;
	margin-bottom: 15px;
}

.side-header {
	border: 1px solid #6fc1cb;
	padding: 0 5px;
}

.side-header:after,
.field .sum:after {
	content: '';
	position: absolute;
	border-right: 12px solid #8dc7e7;
	border-bottom: 11px solid transparent;
	transform: rotate(271deg);
	bottom: 0px;
	left: 100%;
}

/* about Me */

.info strong {
	color: #000;
}

/* 

بخش زیر صرفا به این خاطر نوشته شده
که اگر خواستید عکس توی بخش درباره من رو گردالی کنی
بتونید کافیه اون عدد رو بین 0 تا 100 تغییر بدید

*/

.info img {
	border-radius: 0;
}

/* long description */

.info div {
	color: #000;
	font-size: 14px;
}

/* follow button */

.follow-but1 {
	text-align: center;
	margin-top: 10px;
	
}

.follow-but1 a {
	color: #000;
	display: block;
	border: 1px solid #6fc1cb;
	padding: 5px;
	border-radius: 100px;
}

/*search*/

div#srchBx {
    margin: 0;
    padding: 0;
    border: 0;
    background: #92cee2;
    border-radius: 0;
}

.search-box .submit {
    background: transparent;
    position: absolute;
    left: 0;
}

.search-box input.text::placeholder {
    color: #fff;
}

.search-box input.text {
    color: #fff;
    padding: 0 6px 0 40px;
}

form[action="https://www.google.com/search"] {
    position: relative;
}

.search-box .search-wrapper {
    margin: 0;
    width: 100%;
    position: relative;
}

.search-box .search-wrapper:after {
	content:"\f002";
	color:#093867;
	position: absolute;
	left: 0;
	width: 35px;
	height: 30px;
	display: flex !important;
	justify-content: center;
	align-items: center;
}

/* menu */

.menu {
	margin-bottom: 6px;
	text-align: center;
}

.menu a {
	padding: 5px;
	border: 1px solid #6fc1cb;
	display: block;
	border-radius: 2px 16%;
	color: #000;
	overflow: hidden;
	position: relative;
	transition: all 0.6s ease;
}

.menu a:after {
	content: '';
	background: linear-gradient(45deg, powderblue, #8dc7e7);
	position: absolute;
	width: 0;
	inset: 0;
	z-index: -1;
	transition: all 0.6s ease;
}

.menu a:hover {
	color: #000;
}

.menu a:hover:after,
.recent-comment a:hover:after {
	width: 100%;
}

/* recent comments */

.recent-comment {
	margin-bottom: 8px;
}

.recent-comment a {
	color: #000;
	padding: 4px;
	border: 1px solid #9ccddd;
}

.recent-comment a div {
	width: calc(100% - 48px);
	padding-left: 5px;
}

.recent-comment a:after {
	left: 0;
	content: '';
	width: 0%;
	position: absolute;
	background: linear-gradient(45deg, powderblue, #8dc7e7);
	top: 0;
	z-index: -1;
	bottom: 0;
	transition: all 0.6s ease;
}

.recent-comment a:hover {
	color: #000;
}

/* MT.BT.MP.THE = you can use this feature for these names => My Tasks . Blue Tags . Mini Posts . The Events */

.task-I {
	margin: 0 0 2px 2px;
	padding: 4px 6px;
	background: lightskyblue;
	font-size: 12px;
	font-weight: 600;
	flex-grow: 1;
	text-align: center;
}

.shnotOp {
	display: inline-block;
}

.shOp {
	position: fixed;
	top: 15px;
	right: 15px;
	background: #040846;
	color: #fff;
	display: none !important;
	width: 25px;
	height: 25px;
}

.task-I[open] .sum .shOp {
	display: flex !important;
}

.task-I .sum:before {
	content: '\f0c6';
	padding-left: 4px;
	color: #000;
}

.put-task-here {
	position: fixed;
	height: 100vh;
	backdrop-filter: blur(3px);
	background: rgba(0,0,0,0.2);
	inset: 0;
}

.MT-BT-MP-THE {
	width: 250px;
	background: powderblue;
	box-shadow: 0 0 30px 6px #6f9ff5;
	border-radius: 5px;
	margin: 25px auto;
}

.date-tasks {
	padding: 5px;
	width: fit-content;
	display: inline-block;
	margin: 5px auto;
	border-radius: 3px;
	background: #8dc1d2;
}

.main-txt-task {
	font-weight: normal;
	font-size: 13px;
	padding: 0 5px 5px;
}

.name-task {
	padding: 0 5px 4px;
	display: block;
	font-size: 16px;
}

.footer-task {
	padding: 5px;
	border-top: 1px solid #8dc1d2;
}

.like-task, .com-task {
	font-size: 15px;
	color: #040846;
}

.read-task {
	color: #0b5c81;
}

/* music */

.music-I {
	margin-bottom: 10px;
	background: #9ccddd;
}

.name-music {
	padding: 5px;
	margin-right: auto;
}

.img-con-music:after {
	content: '';
	border: 3px solid #fff;
	top: 5px;
	position: absolute;
	right: 5px;
	bottom: 5px;
	left: 5px;
	z-index: 1;
}

.music-con {
	width: 35px;
	height: 35px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.music-con p {
	margin:0;
}

.img-con-music {
	width: 73px;
	height: 73px;
	margin-right: 5px;
}

.img-con-music img {
	width: 100%;
	height: 100%;
}

.music-con audio {
	position: absolute;
	left: -8px;
	width: 100px;
	height: 36px;
	filter: opacity(0.5);
	-moz-transform: scale(0.9);
}

/* recent and popular and most view and most commented posts */

.field {
	padding: 15px;
	border: 0;
	border-top: 1px solid #6fc1cb;
}

.field[open] {
	border: 1px solid #6fc1cb;
}

.field .sum {
	top: -12px;
	padding: 0 5px;
	border: 1px solid #6fc1cb;
	background: powderblue;
	color: #000;
}

.field .sum::marker {
	color: #268daf;
}

.field ul.ul {
	margin: 8px 0 0;
}

.side-post {
	margin-bottom: 10px;
}

.side-post a {
	justify-content: space-between;
	padding: 5px;
	background: #9ccddd;
	color: #000;
}

/* links and daily links and archive */

.link {
	margin-bottom: 8px;
}

.link a {
	padding: 5px;
	display: block;
	text-align: center;
}

/* links */

.Links .link a {
	color: #000;
	background: lightskyblue;
}

/* daily link */

.Daily .link a {
	color: #000;
	background: lightskyblue;
}

/* archive */

.Archive .link a {
	color: #000;
	background: lightskyblue;
	display: flex;
}

.Archive .link a div.plmc,
.cate a div.plmc {
	min-width: 25px;
	height: 25px;
	font-weight: 600;
	color: #000;
	border: 1px solid #6fc1cb;
	background: lightskyblue;
}

/* categories */

.cate,
ul.ul.subC {
	margin-bottom: 8px;
}

.cate a {
	color: #000;
	background: lightskyblue;
	padding: 5px;
}

.cate a div.plmc {
	color: #000;
	border: 1px solid #6fc1cb;
	background: lightskyblue;
}


/* category child */

.subC .cate a {
	background: #58a3d1;
	margin-right: 20px;
	color: #fff;
	position: relative;
}

.subC .cate a:before {
	content: '↯';
	position: absolute;
	right: -21px;
	color: #000;
	font-size: 15px;
	transform: rotate(30deg);
	width: 15px;
	height: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #58a3d1;
	border-radius: 100px;
}

.subC .cate a div.plmc {
	color: #fff;
	border: 1px solid #6fc1cb;
	background: #58a3d1;
}

/* tag cloud */

.tag-C {
	padding: 1px 6px;
	margin: 0 0 2px 2px;
	font-size: 12px;
	background: lightblue;
	border: 1px solid lightseagreen;
	font-weight: 600;
}

.tag-C a {
	color: #000;
}

.footer-web {
    padding: 15px;
    background: lightskyblue;
    margin-top:20px;
}

.footer-web a {
    color: #000;
    font-family: cursive;
    background: linear-gradient(45deg, #54a1d0, #87cefa);
    padding: 2px 6px;
    border-radius: 100px 0 0 100px;
}

/* موقع ترجمه بکنمش بیفور */

.tag-C:after {
	content: '#';
}

/* side bar */

aside {
	width: 300px;
}

/*typo graphy*/

.mainTxt {
    font-size: 12px;
}

blockquote {
    border: 0;
    padding: 10px 5px 5px;
    text-align: center;
    margin: 18px 0;
    font-style: normal;
    position: relative;
    background: lightskyblue;
    border-radius: 5px;
}

blockquote:after {
    content: '❝';
    position:absolute;
    top: 0;
    left: 50%;
    display: block;
    font-size: 25px;
    width:25px;
    transform: translate(-50%, -50%) rotate(180deg);
    height:25px;
    background: #3385b7;
    color: lightblue;
    border-radius: 3px 57% 15px;
    box-shadow: 0 0 6px #3385b7;
}

.mainTxt a, .main-txt-task a {
	color:#0f3862;
	text-decoration:1px underline solid #3a6b9c;
}

span[style="text-decoration: line-through;"] {
    text-decoration: 1px wavy line-through red !important;
}

.main-txt-task audio, .mainTxt audio {
	max-width:100%;
	height:36px;
	display:block;
	margin:8px auto;
	border-radius: 100px;
	filter: invert(1) sepia(1) hue-rotate(113deg);
}

.main-txt-task hr, .mainTxt hr {
    border: 0;
    border-bottom: 1px dashed #7ab3c5;
}


/* این قسمت اصلا نباید تغییر داده بشه لطفا به هیچ وجه این قسمت رو تغییر ندهید */

.fa,.field .sum::marker,.sum:after,.sum:before,.search-box .search-wrapper:after {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}