/*Designed By Prowebplus.blog.ir*/
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

@font-face {
    font-family: 'tanha';
    src: url('//bayanbox.ir/download/6569803721922940607/Tanha.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'estedad';
    font-style:normal;
    font-weight:400;
    src: url('//bayanbox.ir/download/3394188548996175807/Estedad-Light.woff') format('woff');
}
@font-face {
    font-family: 'estedad';
    font-style:normal;
    font-weight:bold;
    src: url('//bayanbox.ir/download/5964064727761107919/Estedad-Bold.woff') format('woff');
}
*{font-family:'Balsamiq Sans','estedad','tanha';}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #010204;
    border: 2px solid #fffcfc;

}

::-webkit-scrollbar-track {
    background: #ffffff;
    border: 1px dotted #ffffff;

}
textarea, input, select{font-family: 'Balsamiq Sans','estedad','tanha'!important;}
:root {
    font-size: 10px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
*:focus {
    outline: 0;
}
a{
    color: #0061ae;
}
a:hover{color:#bc0000;}
p,font,span,div{color:#000;}
a,a:hover,a:before,a:after,a:active,a:visited,a:focus{text-decoration:none;}
audio,video{max-width:100%;}
pre{text-align:left;}
ul{
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6{
    font-family: estedad;
}
body {
    font-family: tanha;
    color: #262626;
    background: #ffffff;
    font-size: 16px;
    height: 100vh;
    transform-style: preserve-3d;
    perspective: 600px;
}

img {
    max-width:100%;
    height:auto;
}

.container {
    max-width: 99%;
    margin: 2em auto;
    padding: 0px 1rem;
}
.btn {
    display: inline-block;
    font: inherit;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

.btn:focus {
    outline: 0.5rem auto #4d90fe;
}
.maintainbox{
    width: 62.66666%;
    display:inline-block;
    float:left;
}
.gallery-item-info a{color:#fff;z-index: 2;position: relative;}
.visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    color: #fff;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* Profile Section */
.item_err,.item_warn,.item_success {

    display: inline-block;
}

.fa-check{
    border-radius:10px;
    color:#fff;
    background: #2196F3;
    border:1px inset #ccc;
    padding:3px;
    text-shadow:1px 1px 1px #333;
}
/* Gallery Section */

.gallery {
    padding-bottom: 3rem;
}
.tag-cloud h3 {
    margin: 0px;
    font: normal 11px tanha;
    display: inline-block;
    *
    display: inline;
    *
    margin: 2px;
}

.tag-cloud span {
    display: inline-block;
    margin: 1px 0px 1px 0px;
}

.tag-cloud a {
    font-family: 'Balsamiq Sans','estedad','tanha';
    color: #000;
    background: rgb(249 249 249 / 0%);
    padding: 3px 7px;
    display: inline-block;
    *
    display: inline-block;
    margin-left: 1px;
    /*margin: 2px 0px 2px 0px;*/
}

.tag-cloud a:hover {
    color: #03A9F4;
    font-weight: 900;
}

.tag-cloud a.selected {
    color: #216cf3;
    font-weight: 900;
}

.box-tags .post-tags h3{margin: 10px 5px;display: inline-block;}
.box-tags .post-tags h3 a{ color: #0064b3;transition:0.4s ease-in-out;}
.box-tags .post-tags h3 a:hover{color:#008;transition:0.4s ease-in-out;}
.gallery-item {
    margin: 1rem!important;
    margin-top: 0!important;
}
.more-desk{
    background: #dadada;
}
.more-desk .content-part{
    text-align:justify;
    line-height:1.7;
    margin:10px 0px;
    word-break: break-word;
    padding: 15px 15px;
    outline: none;
    cursor: default;
}
.more-desk .post_de{padding: 2px 15px;width: 100%;display: block;}
.post_details_more{
    padding: 2px 0pc;
    font-size: 14px;
    vertical-align: super;
}
.more-desk .content-part a h2{color:#000;margin-bottom: 0;}
.more-desk .content-part a{color:blue;}
.more-desk .content-part a:hover{color:red;}

.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    border-radius:9px;
    height: 100%;
    background-color: #0000004d;
}

.gallery-item-info {
    display: none;
    direction: ltr;
}
.gallery-item-info a.post-link{z-index: 0;width:100%;height:100%;position:absolute;}
.gallery-item-comments{z-index:2}
.gallery-item-info li {
    display: inline-block;
    font-size: 2rem;
    font-weight: 600;
}

.gallery-item-likes {
    margin-right: 2.2rem;
    z-index: 2;
}

.gallery-item-type {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-envelope-o{
    color:#000;
    transition: all 1s ease;
}
.fa-comment-o:before {
    color: #ffffff;
    transition: all 1s ease;
}
.fa-envelope-o:hover:before {
    content:"\f0e0";
    color:#292929;
    transition: all 1s ease;
}
.fa-envelope-o:after{
    transition: all 1s ease;
}
.fa-clone,
.fa-comment {
    transform: rotateY(180deg);
}
.rate-counter{font-family: 'Balsamiq Sans','estedad','tanha';font-weight:600;color: #000;}
.more-desk .rate-counter{color:#000;}
.gallery-image {
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
}
.view-port{}
.comment-port{
    width:100%;
    display:inline-block;
    float:left;
    display:inline-block;
    border-radius: 5px;
    margin-bottom: 1px;
}
.more-desk .rate-box{padding: 9px 16px;margin-bottom: 0px;margin-top: -35px;text-align: left;display: block;font-size: 9px;}
.fa-heart-o{color: #fff;}

.rate-box .fa-heart-o:before {
    color: #ff0000;
    transition: all .4s ease;
}
.more-desk .rate-box .fa-heart-o:before {
    color: #ff0000;
    text-shadow:1px 1px 1px #000;
    transition: all .4s ease;
}
.rate-box:hover .fa-heart-o:before {
    content:"\f004";
}
.rate-box.rated .fa-heart-o:before {
    content:"\f004";
    color:#ff0000;
}

.fa-comment-o:before {
    color: #000;
    transition: all .4s ease;
}
.fa-comment-o:hover:before {
    content:"\f075";
    transition: all .4s ease;
}
.messages h2 {
    color: #222;
    font-size: 21px;
    padding-right:5px;
    cursor: default;
    background: #c5c5c5;
    margin: 0 0 7px;
    text-align: center;
}

.messages h2 a.comment_count {
    color: #333;
}

.messages  h2 a.comment_count:hover {
    color: #000;
    cursor: pointer;
}
.view-port .align .messages{text-align:center;}
/*COMMENT  --------------------------------------------- */
.post_comments{

}
.cmt_break{
    margin-bottom:10px;
}
.post_comments .title_cmt{
    height:20px;
    width:100%;
}
.post_comments .body_cmt{
    height:auto;
    line-height:1.9em; /*new*/
    padding-top:5px;
    padding-bottom:8px;
    background:#383838;
    border:1px solid #666;
    border-top:none;
    border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;-webkit-border-radius:0px 0px 4px 4px;
}
.post_comments .body_cmt .cnt{
    color:#ccc;
}
.post_comments .body_cmt .cnt .cnt_l{
    display:inline-block;
    margin-right:-70px;
    vertical-align:top;
}
.post_comments .body_cmt .cnt .cnt_r{
    display:inline-block;
    margin-right:-70px;
    min-width:50px;
    height:auto;
    float:right;
}
.post_comments .body_cmt .cnt .cnt_r img{
    width:30px;
    height:auto;
}
.post_comments .body_cmt .cnt a{
    color:#ccc;
}
.post_comments .body_cmt .cnt a:hover{
    color:#fff;
}
.post_comments .body_cmt .cnt{
    padding:0 80px 0 20px;
}
.post_comments .body_cmt .cnt ul{
    margin-top:-4px;
}
.post_comments .body_cmt .cnt ul li{
    margin-right:5px;
    line-height:1.9em; /*new*/
}

/*-- Comment Details --*/
.post-comments {
    font: 14px "tanha","estedad";
}

.post-comment {
    margin-bottom: 0px;
    border-radius: 5px;
}

.comment-details {
    padding: 0;
    cursor: default;
    padding-bottom: 5px;
}

.comment-details a {
    color: #040404;
    cursor: pointer;
    margin-right: 0px;
    vertical-align: super;
    -moz-transition-duration: .0s;
    -webkit-transition-duration: .0s;
    -o-transition-duration: .0s;
    -khtml-transition-duration: .0s;
    padding: 1px 5px;
    border-radius: 7px;
}
.comment-details a:hover{color:#03a9f4}
.comment-details-left {
    padding: 4px 0 0 5px;
    float: left;
}

.comment-avatar img {
    width: 50px;
    height: auto;
    border-radius: 100%;
    display: inline-block;
}

.comment-name {
    color: #000;
    cursor: default;
    vertical-align: sub;
    padding: 0px 5px;
}

.comment-body {
    padding: 10px;
    background: #333;
    display: block;
    border-radius: 18px 9px 18px 18px;
    margin: auto;
    width: 90%;
}

.comment-body-content div,.comment-body-content span,.comment-body-content p,.comment-body-content {
    color: #ccc;
    word-break: break-word;
}

.comment-date {
    color: #000;
    display: block;
    text-align: left;
    font-size: 10px;
    float: left;
}
.comment-date span{
    background: #b5b5b5;
    padding: 2px 8px;
    border: 1px solid #272727;
    border-radius: 7px;
}
.comment-website {
    background: url(//cdn.bayan.ir/blog/templates/41199/details_ico_cmt.png) center -102px no-repeat;
    width: 18px;
    height: 23px;
    display: inline-block;
}

.comment-website:hover {
    background-position: center -125px;
    cursor: pointer;
}

.comment-email {
    background: url(//cdn.bayan.ir/blog/templates/41199/details_ico_cmt.png) center -60px no-repeat;
    width: 18px;
    height: 23px;
    display: inline-block;
}

.comment-email:hover {
    background-position: center -79px;
    cursor: pointer;
}

/*-- Reply --*/
.reply-align{text-align:left;}
.comment-reply {
    margin: 14px 23px 35px 0px;
}
.comment-reply .comment-reply-details{
    padding: 0;
    padding-bottom: 5px;
}
.comment-reply .comment-name{text-align: left;margin-bottom: 0px;display: inline-block;}
.comment-reply .comment-name span{color: #000;padding: 2px 7px;border-radius: 7px;}
.comment-reply-details {
    padding: 5px 10px 0;
}

.comment-reply-date {
    color: #000;
    margin-left: 1px;
    font-size: 10px;
    margin-bottom: 5px;
}
.comment-reply-date span{
    background: #888;
    padding: 2px 8px;
    border: 1px solid #6d6d6d;
    border-radius: 7px;
}
.comment-reply-date .left-date{text-align:left;float:left;}
.comment-reply-date .reply-name{text-align:right;border:0px;font-size:14px;background: none;}

.comment-reply-name {
    color: #31ace0;
    cursor: default;
}

.comment-reply-body {
    color: #000000;
    padding: 10px;
    word-break: break-word;
    text-align: right;
    background: #bbb;
    margin-bottom: 0px;
    margin-top: 0px;
    border: 1px solid #ffffff;
    box-shadow: 0 3px 5px rgba(117, 100, 100, 0.1);
    border-radius: 20px 20px 20px 20px;
    display: block;
    width: 90%;
    margin: auto;
}


.comment_add_form{
    color:#CCC;
}
div.commentForm input.sendbutton{
    padding:5px 15px 6px 15px;
    float: right;
    background: #777;
    color: #000;
    display: block;
    font-family: 'Balsamiq Sans','estedad','tanha';
    cursor:pointer;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
div.commentForm input.sendbutton:hover{
    background: #666;
}
.comment_add_form{
    font-family: 'Balsamiq Sans','estedad','tanha';
    background: #c0c0c0;
    border-bottom:1px solid #5f5f5f;
    border-radius:4px;
    font-size: 14px;
    padding: 15px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
.comment_add_form div.inputFix input.text {
    font-family: 'Balsamiq Sans','estedad','tanha'!important;
}
.comment-add-form div.formField2 input.text,
select {
    height: 25px;
    width: 100%;
}
div.commentForm iframe {background:#FFF;}
/*DB Prowebplus.blog.ir*/
.pagination {
    cursor: default;
    display: inline-block;
    margin: auto;
    float: none;
    text-align: center;
    margin-bottom: 0;
    font: 13px "tanha";
}

.pagination .left {
    margin-left: -3px;
}

.pagination a {
    padding: 10px 18px 10px;
    margin-left: 3px;
    cursor: pointer;
    float: none;
    margin-top:15px;
    font-family:'Balsamiq Sans','estedad','tanha';
    display: inline-block;
    color: #ffffff;
    border: #302f2f 1px solid;
    background: #737272;
    border-radius: 3px;
}

.pagination a:hover {
    color: #000000;
    border: #6d7375 1px solid;
    background: #b5b5b5;
}

.pagination a.current {
    color: #000000;
    border: #6d7375 1px solid;
    background: #b5b5b5;
}

.pagination .spacer {
    padding: 1px 8px;
    color: #999;
}

.pagination {
    padding-top: 3em;
}
.pagination .pagesList{display:inline-block;}
footer{
    display:inline-block;
    direction: ltr;
    padding: 0px 10px;
    text-align: center;
    width:100%;
    margin:0px;
}
footer a{font-weight: 600;transition:0.3s ease-in-out;cursor:pointer;color: #010204;}
footer a:hover{color:#ff0000;transition:0.3s ease-in-out;}
footer .fa-heart{color: #ff0000;font-size: 14px;font-weight:600;text-shadow:1px 0.5px 0px #000;}
/* Media Query */

@media screen and (max-width: 40rem) {
    .comment-port{background:none;box-shadow:none;}
    .hideme{display:none;visibility:hidden;opacity:0;}
    .more-desk{
        width: 100%;
        display:inline-block;
        margin-right: 0px!important;
        float:none;
    }
    .view-port{
        width:100%;
        position:unset;
    }
    .comment-port{
        border:0px;
        width:100%;
        display:inline-block;
        float:none;
        margin-bottom: 8px;
        height: 100%;
        overflow: visible;
    }
    .maintainbox{
        display:none;
        visibility:hidden;
        opacity:0;
    }
}

/*Designed By Prowebplus.blog.ir*/
.gallery {
}
.gal-port{margin: auto;width: 75%;}

@media (max-width: 40rem) {
    .gallery-item-info {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        width: 100%;
        border-radius:9px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .item_err,.item_warn,.item_success {
        display: inline-block;
    }
}

/*Designed By Prowebplus.blog.ir*/
:root {
    --color: #3c3163;
    --transition-time: 0.5s;
}
.card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0.25rem;
    -moz-column-gap: 0.25rem;
    column-gap: 0.25rem;
    orphans: 1;
    widows: 1;
}
.section-columns {
}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}

.cardonhover{
    height: 485px;
    display:inline-block;
    padding: 0px 10px 0px 10px;
    margin-bottom: 1em;
}
.card {
    height: 400px;
    background-color: #000000;
    font-size: 1.5em;
    margin-top: 1em;
    color: white;
    display: inline-block;
    margin-bottom: -32px;
    width: 100%;
    background-color: #ffff00;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
    border-radius: 1em;
    padding: 1em;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 5px 0em black;
    transition: all,1s;
    position: relative;
    overflow: hidden;
    border: 10px solid #ccc;
    text-decoration: none;
}

.hoverlink:hover{animation: 8s shake ease;animation-delay:2s;}
@keyframes shake{
    0%{background-position:50% 50%;}
    50%{background-position:100% 100%;}
    75%{background-position:0% 0%;}
    100%{background-position:50% 50%;}
}
.card .hoverlink{
    position:absolute;
    width: 100%;
    right: 0;
    top: 0;
    height: 100%;
    content: '';
    z-index: 98;
    background-size: cover;
    background-position: center;
    transition:.5s all;
}

a.hoverlink:before, a.hoverlink:after {
    content: '';
    transform: scale(1);
    transform-origin: top left;
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: 0;
    transition: all, 1s;
    transition-timing-function: ease-in-out;
}

a.hoverlink:after {
    width: 100%;
    z-index: 9999;
    height: 100%;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.6) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#99000000',GradientType=0 );
}
.card:hover a.hoverlink:before,.card:hover a.hoverlink:after{
    transform: scale(0);
    border-radius:0% 0% 50% 0%;
}
.card h2 {
    margin: 0 0 8px;
    text-align: center;
    font-size: 0.9em;
    font-weight: 100;
    top: 1.5em;
    position: relative;
    color: #ccc;
    text-shadow: 1px 1px 1px #000;
    z-index: 98;
    padding: 15px 7px;
    /* Fallback for older browsers */
    line-height: normal;
}

.card p {
    font-size: 0.75em;
    font-family: 'Open Sans';
    margin-top: 0.5em;
    line-height: 2em;
}

.features {
    z-index: 99;
    width: 100vw;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=90, Direction=0, Color=#000000)";/*IE 8*/
    -moz-box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/*FF 3.5+*/
    -webkit-box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
    box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=90, Direction=135, Color=#000000); /*IE 5.5-7*/
    height: 60px;
    padding: 2em 0em 8px 0em;
    border-radius: 0px 0px 20px 20px;
    vertical-align: middle;
    display: table-cell;
}

.features .fitems {
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    cursor: default;
    background: #ffffff;
    box-shadow: 1px 1px 5px 1px inset;
    border: 1px solid #3c3c3c;
    border-radius: 0.3rem;
    padding: 8px 0.5em;
    margin-right: 0.5em;
    line-height: 1.5em;
    transition: all, var(--transition-time);
}
.features .fitems a{
    color:#000;
}

.card .date {
    position: absolute;
    top: 8px;
    border-radius: 5px;
    right: 8px;
    font-size: 14px;
    background: #fff;
    padding: 1em;
    z-index: 99;
    opacity: .7;
    cursor: default;
    line-height: 0;
}
.card .author {
    position: absolute;
    top: 8px;
    border-radius: 5px;
    left: 4px;
    margin-right: 99px;
    font-size: 14px;
    background: #fff;
    padding: 5.4px;
    cursor: default;
    z-index: 99;
    opacity: .7;
    line-height: 17px;
}

.card:hover {
    color: var(--color);
}

.card:hover:before, .card:hover:after {
    transform: scale(1);
}

.card-grid-space .num {
    font-size: 3em;
    margin-bottom: 1.2rem;
    margin-left: 1rem;
}

header .hcontainer {
    max-width: 93.5rem;
    margin: 0 auto;
    padding: 0 2rem;
}

header .cbtn {
    display: inline-block;
    font: inherit;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
}

header .cbtn:focus {
    outline: 0.5rem auto #4d90fe;
}
header .profile {
    padding: 5rem 0;
}

header .profile::after {
    content: "";
    display: block;
    clear: both;
}

header .profile-image {
    float: left;
    width: calc(33.333% - 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3rem;
}

header .profile-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
}

header .profile-user-settings,
header .profile-stats,
header .profile-bio {
    float: left;
    width: calc(66.666% - 2rem);
}

header .profile-user-settings {
    margin-top: 1.1rem;
}

header .profile-user-name {
    display: inline-block;
}
header .profile-user-name a{
    color: #000;
    font-size: 3.2rem;
}

header .profile-edit-btn {
    font-size: 1.4rem;
    line-height: 1.8;
    border: 0.1rem solid #a9a9a9;
    border-radius: 0.3rem;
    padding: 0 2.4rem;
    color: #fff;
    background: #0490ff;
    margin-left: 2rem;
}

header .profile-settings-btn {
    font-size: 3rem;
    margin-left: 1rem;
    color: #0490ff;
    text-shadow: 1px 1px 0px #666;
}
header .profile-settings-btn .fa-check-circle{vertical-align:super;}
header .profile-stats {
    margin-top: 2.3rem;
}
header .profile-stats ul{padding:0px;line-height: 35px;}
header .profile-stats li {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-left: 4rem;
    cursor: pointer;
}

header .profile-stats li:last-of-type {
    margin-right: 0;
}

header .profile-bio {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2.3rem;
}

header .profile-stat-count {
    font-weight: 600;
}
header .menu_items_hashtags{line-height: 2.5;padding-left: 20px;display: inline-block;}
/* Media Query */

@media screen and (max-width: 40rem) {
    header .profile {
        display: flex;
        flex-wrap: wrap;
        padding: 4rem 0;
    }

    header .profile::after {
        display: none;
    }

    header .profile-user-settings,
    header .profile-bio,
    header .profile-stats {
        float: none;
        width: auto;
    }

    header .profile-image {
        width: 77px;
        height: 77px;
    }
    header .profile-user-name a{font-size:14px}
    header .profile-user-settings {
        flex-basis: calc(100% - 10.7rem);
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    header .profile-user-name {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    header .profile-edit-btn {
        order: 1;
        padding: 0;
        text-align: center;
        margin-top: 1rem;
    }

    header .profile-edit-btn {
        margin-left: 0;
    }

    header .profile-bio {
        font-size: 1.4rem;
        margin-top: 1.5rem;
    }

    header .profile-edit-btn,
    header .profile-bio,
    header .profile-stats {
        flex-basis: 100%;
    }

    header .profile-stats {
        order: 1;
        margin-top: 1.5rem;
    }

    header .profile-stats ul {
        display: flex;
        text-align: center;
        padding: 1.2rem 0;
        border-top: 0.1rem solid #dadada;
        border-bottom: 0.1rem solid #dadada;
    }

    header .profile-stats li {
        font-size: 1.4rem;
        flex: 1;
        margin: 0;
    }

    header .profile-stat-count {
        display: block;
    }
}

@supports (display: grid) {
    header .profile {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 3rem;
        align-items: center;
    }

    header .profile-image {
        grid-row: 1 / -1;
    }
    header #stat_summary_div{display:contents!important;text-align: right;}
    header .profile-user-settings,
    header .profile-stats,
    header .profile-bio {
        width: auto;
        margin: 0;
    }

    @media (max-width: 40rem) {
        header .profile {
            grid-template-columns: auto 1fr;
            grid-row-gap: 1.5rem;
        }

        header .profile-image {
            grid-row: 2 / 1;
        }

        header .profile-user-settings {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-gap: 1rem;
        }

        header .profile-edit-btn,
        header .profile-stats,
        header .profile-bio {
            grid-column: 1 / -1;
        }

        header .profile-user-settings,
        header .profile-edit-btn,
        header .profile-settings-btn,
        header .profile-bio,
        header .profile-stats {
            margin: 0;
        }
    }
}
span#value_VIEW_STAT_TOTAL,span#lang_VIEW_STAT_TOTAL,span#lang_HIT_STAT_TOTAL,span#value_HIT_STAT_TOTAL,span#lang_HIT_STAT_TODAY,span#value_HIT_STAT_TODAY,span#lang_VIEW_STAT_TODAY,span#value_VIEW_STAT_TODAY,span#lang_HIT_STAT_YESTERDAY,span#value_HIT_STAT_YESTERDAY,span#lang_VIEW_STAT_YESTERDAY,span#value_VIEW_STAT_YESTERDAY,span#lang_HIT_STAT_DAY_AVERAGE,span#value_HIT_STAT_DAY_AVERAGE,span#lang_VIEW_STAT_DAY_AVERAGE,span#value_VIEW_STAT_DAY_AVERAGE,span#lang_HIT_STAT_PREVISION,span#value_HIT_STAT_PREVISION,span#lang_VIEW_STAT_PREVISION,span#value_VIEW_STAT_PREVISION,span#lang_VIEW_STAT_COMMENTS_COUNT,span#value_VIEW_STAT_COMMENTS_COUNT,span#lang_VIEW_STAT_BLOG_LIFE_TIME,span#value_VIEW_STAT_BLOG_LIFE_TIME,span#lang_VIEW_STAT_ONLINE_USER,span#value_VIEW_STAT_ONLINE_USER{display:none;position:absolute}span#lang_VIEW_STAT_FOLLWING_COUNT,span#lang_VIEW_STAT_POSTS_COUNT,span#lang_VIEW_STAT_FOLLWER_COUNT{font-size:0}span#lang_VIEW_STAT_FOLLWING_COUNT:before{font-size:1.6rem;content:'دنبال شده '}span#lang_VIEW_STAT_FOLLWER_COUNT:before{font-size:1.6rem;content:'دنبال کننده '}span#lang_VIEW_STAT_POSTS_COUNT:before{font-size:1.6rem;content:'تعداد پست ها '}
.storycontainer{display: block;text-align: right;white-space: nowrap;overflow-x: scroll;direction: rtl;}
.story {
    width: 100px;
    height: 100px;
    margin: 0px 15px;
    display: inline-block;
}
.story img {
    width:70px;
    border-radius:50%;
}
.story svg {
    fill:none;
    stroke:#8a3ab8;
    stroke-width: 4px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    stroke-dasharray: 0;
    background-image: linear-gradient( 89.9deg,  rgba(255,18,18,1) -2.8%, rgba(252,246,19,1) 50.8%, rgba(0,159,8,1) 107.9% );
}
.story svg:hover{animation: loading  3500ms ease-in-out infinite alternate;}
.story svg:active{animation: 8s shake linear;}
@keyframes loading {
    100% {
        stroke:#cd476b;
        stroke-dasharray:10;
    }
}

/* MEDIA QUERIES */
@media screen and (max-width: 1285px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 2.25rem;
        -moz-column-gap: 2.25rem;
        column-gap: 2.25rem;
    }
}

@media screen and (max-width: 900px) {
    header .profile-settings-btn .fa-check-circle{vertical-align: top;font-size: 20px;}
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 8.25rem;
        -moz-column-gap: 8.25rem;
        column-gap: 2.25rem;
    }
    .info {
        justify-content: center;
    }
    .card-grid-space .num {
    /margin-left: 0;
    /text-align: center;
    }
}
@media screen and (max-width: 768px){
    .gal-port{width: 100%;}
    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 2.25rem;
        -moz-column-gap: 2.25rem;
        column-gap: 2.25rem;
    }
    .card h2{bottom:2em;}
}

@media screen and (max-width: 500px) {
    .card h2{bottom: 2em;}
}

@media screen and (max-width: 450px) {
    .card h2{font-size: 0.6em;font-weight: 100;}
    .card .date{font-size:0.6em;}
    .info {
        display: block;
        text-align: center;
    }
    .info h1 {
        margin: 0;
    }
}