/*@font-face {
    font-family: 'SahelBlack';
    src: url('../fonts/Sahel-Black.eot');
    src: local('Sahel Black'), local('Sahel-Black'),
        url('../fonts/Sahel-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Sahel-Black.woff2') format('woff2'),
        url('../fonts/Sahel-Black.woff') format('woff'),
        url('../fonts/Sahel-Black.ttf') format('truetype'),
        url('../fonts/Sahel-Black.svg#Sahel-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
@font-face {
    font-family: 'SahelBold';
    src: url('../fonts/Sahel-Bold.eot');
    src: local('Sahel Bold'), local('Sahel-Bold'),
        url('../fonts/Sahel-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Sahel-Bold.woff2') format('woff2'),
        url('../fonts/Sahel-Bold.woff') format('woff'),
        url('../fonts/Sahel-Bold.ttf') format('truetype'),
        url('../fonts/Sahel-Bold.svg#Sahel-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Sahel';
    src: url('../fonts/Sahel.eot');
    src: local('Sahel'),
        url('../fonts/Sahel.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Sahel.woff2') format('woff2'),
        url('../fonts/Sahel.woff') format('woff'),
        url('../fonts/Sahel.ttf') format('truetype'),
        url('../fonts/Sahel.svg#Sahel') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
	margin:0; padding:0; direction:rtl; font:normal 12px/18px 'Sahel',tehoma;
	background:#f1f1f1;
}
body *{box-sizing:border-box}
ul,ol{list-style:none; margin:0; padding:0}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-weight:normal; font-family:'SahelBold',arial; line-height:normal}
p{margin:0; padding:0}
a{text-decoration:none}
figure{margin:0; padding:0; position:relative; overflow:hidden; line-height:0}
figure a{line-height:0}
img{border:none;}
blockquote{margin:0; padding:0;}
input, textarea, button, select, a{outline: none !important}
input, textarea, button, select{font:normal 12px/18px 'Sahel',tehoma; color:#333;}
figure{margin:0; padding:0; position:relative;}


.container{width:1105px; display:table; margin:0 auto;} 
.container-float{width:100%; display:table; margin:0}
.row{display:flex; margin:0;}
.row .row{margin:0 -10px;}
[class^="col-"]{display:inline; float:right; margin:0; padding:10px; position:relative;}
[class^="col-"] [class^="col-"]{padding-top:0; padding-bottom:0}
.col-12{width:100%}
.col-11{width:91.66666666666667%}
.col-10{width:83.33333333333333%}
.col-9{width:75%}
.col-8{width:66.66666666666667%}
.col-7{width:58.33333333333333%}
.col-6{width:50%}
.col-5{width:41.66666666666667%}
.col-4{width:33.33333333333333%}
.col-3{width:25%}
.col-2{width:16.66666666666667%}
.col-1{width:8.333333333333333%}

.span-l-11{margin-left:91.66666666666667%}
.span-l-10{margin-left:83.33333333333333%}
.span-l-9{margin-left:75%}
.span-l-8{margin-left:66.66666666666667%}
.span-l-7{margin-left:58.33333333333333%}
.span-l-6{margin-left:50%}
.span-l-5{margin-left:41.66666666666667%}
.span-l-4{margin-left:33.33333333333333%}
.span-l-3{margin-left:25%}
.span-l-2{margin-left:16.66666666666667%}
.span-l-1{margin-left:8.333333333333333%}

.span-r-11{margin-right:91.66666666666667%}
.span-r-10{margin-right:83.33333333333333%}
.span-r-9{margin-right:75%}
.span-r-8{margin-right:66.66666666666667%}
.span-r-7{margin-right:58.33333333333333%}
.span-r-6{margin-right:50%}
.span-r-5{margin-right:41.66666666666667%}
.span-r-4{margin-right:33.33333333333333%}
.span-r-3{margin-right:25%}
.span-r-2{margin-right:16.66666666666667%}
.span-r-1{margin-right:8.333333333333333%}

.icon{display:inline-block; background-image:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/objects.png); background-position: 0px 0px;}

.icon-menu-1,
.icon-menu-2,
.icon-menu-3,
.icon-menu-4,
.icon-menu-5,
.icon-menu-6,
.icon-menu-7,
.icon-menu-8{
	background:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/objects.png) no-repeat top left; height:30px;
	-webkit-opacity:0.5;
	-moz-opacity:0.5;
	-ms-opacity:0.5;
	-o-opacity:0.5;
	opacity:0.5;
}
a:hover .icon-menu-1,
a:hover .icon-menu-2,
a:hover .icon-menu-3,
a:hover .icon-menu-4,
a:hover .icon-menu-5,
a:hover .icon-menu-6,
a:hover .icon-menu-7,
a:hover .icon-menu-8{
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
	opacity:1;
}

.icon-menu-1{width:63px; background-position:-389px -4px;}
.icon-menu-2{width:52px; background-position:-333px -4px;}
.icon-menu-3{width:52px; background-position:-279px -4px;}
.icon-menu-4{width:52px; background-position:-225px -4px;}
.icon-menu-5{width:39px; background-position:-183px -4px;}
.icon-menu-6{width:63px; background-position:-117px -4px;}
.icon-menu-7{width:45px; background-position:-69px -4px;}
.icon-menu-8{width:54px; background-position:-12px -4px;}
.icon-logo{
	width:147px; background-position:-648px -3px;
	-webkit-opacity:0.5;
	-moz-opacity:0.5;
	-ms-opacity:0.5;
	-o-opacity:0.5;
	opacity:0.5;
}

#header{
	display:table; width:100%; height:65px; overflow:hidden;/* position:fixed; top:0; left:0; z-index:20; background:rgba(235,233,222,0);*/
}
#header .container{height:inherit; background:none; border-bottom:1px solid #938b60}
#header .menu{position:absolute; top:0; height:65px; right:0}
#header .menu button.open-menu{
	display:none;
	position: relative;
	top: 50%;
	margin-top: -16px;
	height: 35px;
	width:45px;
	border:none;
	background:rgba(0,0,0,0.4);
	cursor:pointer; border-radius:3px;
}
#header .menu button.open-menu span{display:block; width:25px; height:0; border-top:1px solid rgba(255,255,255,0.5); position:absolute; top:50%; left:50%; margin-left:-12px;}
#header .menu button.open-menu span:first-child{top:30%}
#header .menu button.open-menu span:last-child{top:70%}

#header .menu button.close-menu{display:none; position:relative; width:100%; height:45px; border:none; background:rgba(0,0,0,0.5); cursor:pointer;}
#header .menu button.close-menu span{
	position:absolute; width:25px; height:0; border-top:1px solid rgba(255,255,255,0.9); top:50%; left:50%; margin-left: -12px;
	-webkit-transform-origin:center center;
	-moz-transform-origin:center center;
	-ms-transform-origin:center center;
	-o-transform-origin:center center;
	transform-origin:center center;
}
#header .menu button.close-menu span:first-child{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#header .menu button.close-menu span:last-child{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#header .menu ul{position:relative; top:50%; right:0; height:30px; margin-top: -15px}
#header .menu li{display:inline; float: right;}
#header .menu li a{display:block; padding:0 3px; position:relative; height:30px}
#header .menu li a:after{content:""; width:1px; height:10px; position:absolute; top:50%; left:0px; margin-top: -5px; background:rgba(0,0,0,0.3);}
#header .menu li:last-child a:after{background: transparent}
#header .logo{position:absolute; top:0; height:65px; left:0}
#header .logo a{display:block; position:relative; top:50%; margin-top:-16px; height:35px;}
#header .logo a .icon{height:35px; position:relative; overflow:hidden; line-height:100px; background:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/site-logo.svg) no-repeat center center; background-size: contain; }


#main{position:relative; min-height: calc(100vh - 65px - 38px)}
#main .col-3:first-child{padding-right:0}
#main .col-3:last-child{padding-left:0}

#main .main-image{width:100%; text-align: center; height:100%; /*min-height:calc(100vh - 85px - 38px);*/ display:flex; flex-direction:column;justify-content:center}
#main .main-image img{width:96%; margin:24px 2%; height:auto; object-fit: contain;}

#main .main-description{width:100%; height:100%; /*min-height:calc(100vh - 85px - 38px);*/ display:flex; flex-direction:column;justify-content:center}
#main .main-description .headline{color:#0a7561; font-size:28px; margin-bottom:16px;}
#main .main-description .sub-headline{color:#444; font-size:16px; margin-bottom:2px;}
#main .main-description .lead{color:#333; text-align:justify; font-size:14px; line-height:24px;}

#main .main-actions{width:100%; height:100%; /*min-height:calc(100vh - 85px - 38px);*/ display:flex; flex-direction:column;justify-content:center}
#main .main-actions .imam-photo{text-align:center; margin-bottom:64px}
#main .main-actions .imam-photo img{width:100px; height: auto;}
#main .main-actions .page-logo{text-align:center; margin-bottom:16px}
#main .main-actions .page-logo img{width:168px; height: auto;}
#main .main-actions .hamgam-logo{text-align:center; margin-top:16px;}
#main .main-actions .actions{border-top:1px solid #938b60; border-bottom:1px solid #938b60; padding:4px 0; position:relative}
#main .main-actions .actions ul{display:flex; flex-direction:column}
#main .main-actions .actions.user-invalid ul{transform: scale(0.8); opacity:0.5;}
#main .main-actions .actions li{width:100%; height:50px; margin:4px 0}
#main .main-actions .actions li button{width:100%; height:100%; overflow:hidden; background:none; border:none; cursor:pointer}
#main .main-actions .actions li button span{display:inline; float:right; width:calc(100% - 58px); height:50px; line-height:48px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#0a7561; color:#fff; padding:0 16px; text-align:right; font-size:16px;}
#main .main-actions .actions li button img{display:inline; float:left; width:50px; height:50px; background:#114d3f; padding:6px;}
#main .main-actions .actions li button[disabled]{-webkit-filter:blur(1px) grayscale(1) opacity(0.6); filter:blur(1px) grayscale(1) opacity(0.6); cursor:not-allowed}

#main .main-actions .actions .login-overlay{display:none; flex-direction: column; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; bottom:0; backdrop-filter:blur(5px); background: rgba(241,241,241,0.3);}
#main .main-actions .actions.user-invalid .login-overlay{display:flex;}
#main .main-actions .actions:not(.loading) .login-overlay .loading-text{display:none;}
#main .main-actions .actions .login-overlay .login-text,
#main .main-actions .actions .login-overlay .login-link{display:block; margin:8px; text-align:center}
#main .main-actions .actions .login-overlay .login-link{width:fit-content; padding:4px 8px; margin:8px auto; background:#0a7561; color:#fff; border-radius:4px;}
#main .main-actions .actions .login-overlay .login-link:after{content:""; position: absolute; top:0; left:0; right:0; bottom:0}
#main .main-actions .actions.loading .login-overlay .login-text,
#main .main-actions .actions.loading .login-overlay .login-link{display:none;}

/*.header .header-actions>*{height:37px; margin-right:8px; position:relative;}
.header .header-actions>*>button{height:37px; min-width:45px; background:transparent; border:1px solid #5d7892; border-radius:4px; cursor:pointer}*/
#main .main-actions .actions .user-toggle{position:relative; z-index: 9}
#main .main-actions .actions .user-toggle button{display:flex; padding:6px 8px; height:37px; width:100%; margin-bottom:16px; background:transparent; border:1px solid #5d7892; border-radius:4px; cursor:pointer}
#main .main-actions .actions .user-toggle button.active{background:#fff;}
#main .main-actions .actions .user-toggle .user-fullname{color:#5d7892; font-family: 'Sahel'; font-size:14px; line-height:22px; margin-left:8px; white-space:nowrap; width:100%; text-align: right}
#main .main-actions .actions .user-toggle .user-fullname:empty:before{content:"کاربر جدید"}
#main .main-actions .actions .user-toggle img{width:18px; height:18px; margin-top:2px}
#main .main-actions .actions .user-toggle ul{position:absolute; top:40px; left:0; background:#fff; border-radius:4px; border:1px solid #5d7892; width:150px; display:none}
#main .main-actions .actions .user-toggle button.active ~ ul{display:block;}
#main .main-actions .actions .user-toggle ul li{height:35px; width:100%; border-bottom:1px solid #5d7892}
#main .main-actions .actions .user-toggle ul li:last-child{border-bottom:none;}
#main .main-actions .actions .user-toggle ul li>*{display:block; width:100%; height:100%; border:none; background:none; color:#5d7892; text-align:center; line-height:35px; cursor: pointer; font-family:iransans; padding:0; font-size:12px;}



#footer .copyright{display:table; width:100%; padding:10px 24px; text-align:center; /*border-top:1px solid #938b60;*/ color:#ffffe9; background:#0a7561}
#goto-top{
	position:fixed; bottom:30px; right:-55px; margin:0; padding:14px 12px 12px; background:rgba(236,212,159,0.5); border:1px solid rgba(230,183,82,1); border-radius:3px; width:50px; height:50px; cursor:pointer; z-index: 9999;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	opacity:0;
	-webkit-transition:all ease-out 0.3s;
	-moz-transition:all ease-out 0.3s;
	-ms-transition:all ease-out 0.3s;
	-o-transition:all ease-out 0.3s;
	transition:all ease-out 0.3s;
}
#goto-top.show{
	right:30px;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
	opacity:1;
}
#goto-top svg{
	color:#fff;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
}

body *{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}



#canvas{position:absolute; z-index:1; width:100%; height:100%; object-fit:contain; visibility:hidden}
#canvas.show{visibility: visible}
#canvas.show ~ #camera-view{display:none !important}
#camera{position:fixed; top:0; left:0; right:0; bottom:0; display:none; overflow: hidden; background:#000; }
#camera.show{display:block}
#camera-view{position:absolute; top:0; left:0; width:100%; height:100%; background:#000; z-index: 0; }
#camera-buttons,
#canvas-buttons{
	position:absolute; bottom:0; left:0; width:100%; height:100px; z-index:3;
	transition:bottom ease-in 0.1s;
}
#camera-buttons.hide{bottom:-100px;}
#canvas-buttons{bottom:-100px;}
#canvas-buttons.show{bottom:0;}

#camera-light{
	position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0); z-index: 2;
	transition: background ease-in 0.1s;
}
#camera-light.show{background:rgba(255,255,255,0.3);}
#videoSourceSwitch,
#exit-camera,
#tackPhoto{
	position:absolute; top:50%; padding:0; border-radius:50%; background-color:rgba(255,255,255,0.1);backdrop-filter:blur(10px);  color:#fff; border:1px solid #fff; cursor:pointer; overflow:hidden;
	transition: background-color ease-out 0.1s;
}
#videoSourceSwitch:active,
#exit-camera:active,
#tackPhoto:active{background-color:rgba(255,255,255,0.3); }
#videoSourceSwitch{right:20px; transform:translateY(-50%); width:40px; height:40px; padding-top:2px;}
#exit-camera{left:20px; transform:translateY(-50%); width:40px; height:40px; padding-top:2px;}
#tackPhoto{left:50%; transform:translateY(-50%) translateX(-50%); width:70px; height:70px; padding-top:2px}
#videoSourceSwitch>img,
#exit-camera>img,
#tackPhoto>img{width:60%; height:60%; object-fit: contain; border-radius:50%:}

#photo-is-ok,
#take-photo-again{
	position:absolute; width:50px; height:50px; top:50%; padding:2px 0 0; border-radius:50%; background-color:rgba(255,255,255,0.1);backdrop-filter:blur(10px);  color:#fff; border:1px solid #fff; cursor:pointer; overflow:hidden;
	transform:translateY(-50%);
	transition: background-color ease-out 0.1s;
}
#photo-is-ok:active,
#take-photo-again:active{background-color:rgba(255,255,255,0.3); }
#photo-is-ok{right:20px;}
#take-photo-again{left:20px;}
#photo-is-ok>img,
#take-photo-again>img{width:50%; height:50%; object-fit: contain; border-radius:50%:}

#upload-form{position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; background:rgba(0,0,0,0.3); backdrop-filter:blur(10px); display:flex; flex-direction:column; justify-content: center; display:none}
#upload-form.show{display:flex}
#upload-form .upload-form-stage{width:600px; margin:0 auto; background:#fff; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.5); padding:16px; max-height:calc(100vh - 64px); overflow:auto}
#upload-form .upload-form-stage .title{font-size:18px; font-family:'SahelBold',Arial; margin-bottom:16px; padding:0 10px}
#upload-form .upload-form-stage #file-upload-view{width:100%; height:185px; background:#ddd; border-radius:8px; display:block; overflow:hidden}
#upload-form .upload-form-stage #file-upload-view *{max-width:100%; max-height:100%; height:100%}
#upload-form .upload-form-stage #file-upload-view img{width:100%; height:100%; object-fit: contain}
#upload-form .upload-form-stage #file-upload-view video{width:100%; height:100%; background:#000}
#upload-form .upload-form-stage label{width:100%; display: table; cursor: pointer; margin-bottom:2px;}
#upload-form .upload-form-stage input,
#upload-form .upload-form-stage select,
#upload-form .upload-form-stage textarea{width:100%; height:40px; border-radius:4px; border:1px solid #ccc; background:#fff; padding:0 8px;}
#upload-form .upload-form-stage textarea{width: 100%; max-height:100px; min-height:50px; resize: vertical; padding:8px; line-height:24px;}

#upload-form .upload-form-stage button{height:35px; border-radius:4px; padding:0 24px;color:#fff; border:none; cursor:pointer;}
#upload-form .upload-form-stage button#upload-start{background:#008c44;}
#upload-form .upload-form-stage button#upload-cancel{background:#fe0000; float: left;}
#upload-form .upload-form-stage .row:last-child>.col-12{padding-bottom:0}
#upload-form .upload-form-stage .row:first-child>.col-12{padding-top:0}

#upload-form.by-system .upload-form-stage input#uf-province-alt,
#upload-form.by-system .upload-form-stage input#uf-city-alt{display:none}

#upload-form:not(.by-system) .upload-form-stage select#uf-province,
#upload-form:not(.by-system) .upload-form-stage select#uf-city{display:none}

#upload-form .uploading{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,233,0.5); backdrop-filter:blur(10px); display:none; flex-direction: column; justify-content: center}
#upload-form .uploading.show{display:flex}
#upload-form .uploading .loading{margin:0 auto;display: flex; flex-direction: column; text-align: center;}
#upload-form .uploading .loading>div{margin:4px 0}


#popup{position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; background:rgba(0,0,0,0.3); backdrop-filter:blur(10px); display:flex; flex-direction:column; justify-content: center; display:none}
#popup.show{display:flex}
#popup .popup-stage{width:600px; margin:0 auto; background:#fff; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.5); padding:16px; max-height:calc(100vh - 64px); overflow:auto}
#popup .popup-stage .title{font-size:18px; font-family:'SahelBold',Arial; margin-bottom:16px; padding:0 10px}
#popup .popup-stage #popup-list li{margin-bottom:8px;}
#popup .popup-stage #popup-list .box-item-content-elm-title>a{color:#0097d1}
#popup .popup-stage #popup-list .box-item-content-elm-title>a:before{content:""; display: inline-block; margin-left:6px; width:6px; height: 6px; background: #77dc79; border-radius:50%;}
#popup .popup-stage button{height:35px; border-radius:4px; padding:0 24px;color:#fff; border:none; cursor:pointer;}
#popup .popup-stage button#popup-close{background:#fe0000; float: left;}



.col-list-items{padding-right:0; padding-left:0}
.col-list-items>.list-items{position:relative; padding-top:70px; margin-top:32px !important}
.col-list-items>.list-items:before{content:""; width:100%; height:1px; background: #fff; position:absolute; top:0; left:0}
.col-list-items>.list-items:after{content:"تصاویر ارسالی"; position:absolute; top:0; right:0; display: inline-block; height: 50px;padding: 0 32px;background: #fff;line-height: 50px;font-size: 32px;font-family: 'SahelBold';color: #033c4a;}
.col-list-items>.list-items{display:flex; width:calc(100% + 8px); flex-wrap: wrap; margin:0 -4px;}
.col-list-items>.list-items .list-item{width:calc(25% - 8px); margin:4px; height:200px; position:relative; overflow:hidden; border-radius:8px;}
.col-list-items>.list-items .item-image,
.col-list-items>.list-items .video-player{position:absolute; z-index:0; top:0; left:0; right:0; bottom:0; background:#fff}
.col-list-items>.list-items .video-player{background:#666}
.col-list-items>.list-items .item-image img{width:100%; height:100%; object-fit: cover}
.col-list-items>.list-items .video-player video{width:100%; height:100%; object-fit: contain}
.col-list-items>.list-items .item-details{
	position:absolute; top:0; left:0; right:0; bottom:0; color:#fff;; display:flex; flex-direction:column; justify-content: flex-end; padding:8px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+50,000000+100&0+50,0.85+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 50%, rgba(0,0,0,0.85) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 50%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 ); /* IE6-9 */
}
.col-list-items>.list-items .item-details .item-author a{color:#fff; text-shadow:1px 1px 1px #000; display:block; width:100%;}
.col-list-items>.list-items .item-details .item-author a:after{content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:99}
.col-list-items>.list-items .item-details .location{position:relative}
.col-list-items>.list-items .item-details .location:before{content:""; width:16px; height:16px; margin-left:2px; background:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/location.svg) no-repeat center center; background-size: contain; display:inline-block; vertical-align:middle}

.col-list-items>.list-items .item-details .like-button{position:absolute; top:8px; left:8px; width:42px; height:42px; z-index:999; border:none; background:rgba(0,0,0,0.2); border-radius:8px; padding:8px; backdrop-filter:blur(5px); cursor:pointer}
.col-list-items>.list-items .item-details .like-button span{display:block; width:100%; height:100%; background:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/heart.svg) no-repeat center center; background-size: contain;}
.col-list-items>.list-items .item-details .like-button[data-mode="dislike"] span{background:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/red-heart.svg) no-repeat center center; background-size: contain;}
.col-list-items>.list-items .item-details .like-button[data-mode="dislike"]{background:rgba(255,255,255,0.2);}

.col-list-items .list-items-more{width:100%; height:50px; cursor:pointer; margin-top:8px;  font-size:16px; background:#5489ae; color: #fff; border:none; border-radius:8px;}
.col-list-items .list-items-more[disabled]{background:#999}

.fancybox__caption{text-align:center; direction:rtl}
.fancybox__caption span[data-fullname]{font-family:'SahelBold',Arial; font-size:18px; line-height:28px; margin-bottom:8px; display:block}
.fancybox__caption span[data-location]:before{content:""; width:16px; height:16px; margin-left:2px; background:url(https://farsi.khamenei.ir/event/ruhollah/assets/images/location.svg) no-repeat center center; background-size: contain; display:inline-block; vertical-align:middle}

.main-description .highlight{color:#0a7561;display: inline-block;font-weight: normal; font-family:SahelBold; position: relative;cursor: pointer;}
.main-description .highlight:after{content:""; position:absolute; bottom:3px; left:-2px; right:-2px; border-radius:2px; height:5px; background:rgba(200,200,200,0.5); transition:bottom ease-out 0.1s,height ease-out 0.1s, background ease-out 0.2s;}
.main-description .highlight:hover:after{bottom:1px; height:1px; background:rgba(200,200,200,1);}

#progress-percent{position:relative;}
#progress-percent:before{content:attr(data-percent)" ﹪"; color:#5489ae; direction:ltr; position:absolute; width:100%; left:0; height:30px; top:-40px; line-height:30px; font-size:18px; font-weight:bold;}

.box{margin:0 -8px; display:block}
.box-header{border-top:1px solid #fff;}
.box-header span{display:inline-block; height:50px; padding:0 32px; background:#fff; line-height:50px; font-size:32px; font-family:SahelBold; color:#033c4a}

#koolebar{display: flex; flex-wrap: wrap; margin:16px -8px;}
#koolebar .box-item{width:calc(33.33% - 16px); margin:8px;}
#koolebar .box-item .box-title{display:block; width:100%; height:80px; text-align:center; line-height:80px; font-size:32px; }
#koolebar .box-item .box-title a{display:block; width:100%; height:100%; background:#fff; border-radius:8px; color:#0097d1}
#koolebar .box-item .box-item-content{display:none}
#koolebar .box-item .box-item-content-elm{}
#koolebar .box-item .box-item-content-elm-title{}
#koolebar .box-item .box-item-content-elm-title a{}


.custom-complex-type{display:none;}

.fancybox__toolbar__items--left{display:none !important}
@media only screen and (max-width: 1150px) {
	.container{width:900px;} 
}
@media only screen and (max-width: 1000px) {
	.col-list-items > .list-items .list-item{width:calc(33.33% - 8px)}
	
	.container{width:760px;}

	#main .row{flex-wrap: wrap}
	#main .col-actions{order:1; width:80%; min-height:auto; margin:32px 10% 0; padding:10px !important;}
	#main .main-actions{min-height:auto}
	#main .col-description{order:2; width:50%; padding-right:24px !important;}
	#main .main-description{min-height:auto}
	#main .col-image{order:3; width:50%;}
	#main .main-image{min-height:auto}

	#form .textarea-wrapper:after{left:-4px; top:-2px;}
}
@media only screen and (max-width: 800px) {
	.container{width:600px;}
	#header .menu button.open-menu,
	#header .menu button.close-menu{display:block}
	#header .menu ul{position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,233,0.8); backdrop-filter: blur(10px); height:100%; z-index:999999; margin-top: 0; overflow:auto; display:none}
	body.show-menu #header .menu ul{display:block}
	body.show-menu{overflow:hidden}
	#header .menu ul li{display:block; width:100%; text-align:center;border-bottom:1px solid rgba(0,0,0,0.1)}
	#header .menu li a{height:50px; line-height:70px}
	#header .menu li a:after{background:transparent}
	
	#main .col-4{width:50%; margin-right: 0; margin-left:0}
	
	#upload-form .upload-form-stage{width:500px;}
	#popup .popup-stage{width:500px;}
}
@media only screen and (max-width: 625px) {
	.col-list-items > .list-items .list-item{width:calc(50% - 8px)}
	.col-list-items > .list-items{width:90%; margin:0 5%}
	.container{width:100%;}
	#header .menu button.open-menu{margin-right:15px}
	#header .logo{left:15px}
	
	.col-list-items>.list-items:before{content:"تصاویر ارسالی شما:"/*"تصاویر ارسالی شما (مجموع:"attr(data-count)")"*/;}

	.box-header {margin:0 8px;}
	#koolebar{margin:16px 0;}
	#koolebar .box-item{width:calc(50% - 16px)}

}
@media only screen and (max-width: 530px) {
	#main .col-actions{width:100%; margin-right:0; margin-left:0; padding-right:24px !important; padding-left:24px !important}
	#main .col-description{padding-right:24px !important; padding-left:24px !important; width:100%; order:3}
	#main .col-image{padding-right:24px !important; padding-left:24px !important; width:100%; order:2}
	#upload-form .upload-form-stage{width:450px;}
	#popup .popup-stage{width:450px;}
}
@media only screen and (max-width: 500px) {
	#main .contents-list-wrapper{padding:0 !important}
	#main .col-4{width:100%; margin-right: 0; margin-left:0; margin-bottom:20px;}
	#main .col-4.span-l-2{position:relative;}
	#main .col-4.span-l-2:before{content:""; position:absolute; top:-10px; left:10px; right:10px; height:1px; background:#938b60}
	#main:before{background:transparent; visibility:hidden}
	#upload-form .upload-form-stage{width:90%;}
	#popup .popup-stage{width:90%;}

}


@media only screen and (max-width: 420px) {
	#form .form-description{width: 100%}
	.col-list-items>.list-items:before{content:"تصاویر ارسالی شما:"/*"تصاویر ارسالی شما ("attr(data-count)")"*/;}
	#koolebar .box-item{width:calc(100% - 16px)}

	/*#main .col-6{padding:10px 15px}*/
}
@media only screen and (max-width: 360px) {
	.col-list-items > .list-items .list-item{width:calc(100% - 8px); height:250px;}

}