html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,img{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{outline:none;padding:0;margin:0}*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
/*******/
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 400;
    src: url('fonts/IRANSansWeb(FaNum).eot');
    src: url('fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),url('fonts/IRANSansWeb(FaNum).woff2') format('woff2'),url('fonts/IRANSansWeb(FaNum).woff') format('woff'),url('fonts/IRANSansWeb(FaNum).ttf') format('truetype');
}
@font-face {font-family: 'IRANSans_Bold';src: url('fonts/IRANSans_Bold.eot');src: url('fonts/IRANSans_Bold.eot') format('embedded-opentype'),url('fonts/IRANSans_Bold.woff2') format('woff2'),url('fonts/IRANSans_Bold.woff') format('woff'),url('fonts/IRANSans_Bold.ttf') format('truetype'),url('fonts/IRANSans_Bold.svg#IRANSans_Bold') format('svg');}
.bold {font-family: 'IRANSans_Bold';}
body {color: #000;font-size:0.93em;font-family:IRANSans;overflow-x:hidden;background:#f5f5f5;line-height:25px;width:100%;}
.clearfix:after {
  content: "";
  clear: both;
  display: table;
}
img {max-width:100%}
#home {padding:15px;text-align:center;}
#main-content {background:url(img/bg.jpg);direction:rtl;text-align:right;min-height:100vh}
#logo {
    margin: 0 auto;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border:5px solid #90642c
}
#item-home {margin:20px 0;text-align:center;}
#item-home .item {margin-bottom:20px}
#item-home a {margin-bottom:20px;font-size:1.2em;color:#fff;text-decoration:none}
#item-home a img {display: block;margin: 0 auto 7px;border-radius: 50%;-webkit-border-radius: 50%;border:6px solid #90642c;}
/****/
#link {text-align:center;}
#link a {    display: inline-block;
    background-color: #90642c;
    width: 45px;
    height: 45px;
    border-radius: 5px;
    padding: 7px;
    margin: 0 5px;}
#link a svg {    width: 30px;
    height: 30px;
    fill: #d2b896;}
#side {    width: 130px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ebe5de;
    text-align: center;
    padding: 10px;
    box-shadow: 2px 0px 10px rgb(0 0 0 / 40%);
    -webkit-box-shadow: 2px 0px 10px rgb(0 0 0 / 40%);
    overflow-y: auto;
    font-size: 0.95em;}
#side a {display:block;margin-bottom:15px;color:#000;text-decoration:none;padding:5px;-webkit-transition: all 0.4s  ease-out;-moz-transition: all 0.4s  ease-out;-ms-transition: all 0.4s  ease-out;-o-transition: all 0.4s  ease-out;transition: all 0.4s  ease-out;background-color:#ebe5de;border: 2px solid #ebe5de;}
#side a.active {background-color:#fff;    border-radius: 10px;-webkit-border-radius: 10px;
    border-color:#90642c;}
#side a img {    display: block;
    margin: 0 auto 5px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid #90642c;}

#content {width:calc(100% - 130px);padding:20px}
#content .items .title {    background-color: #8b5f27;
    color: #fff;
    font-size: 1.2em;
    padding: 15px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    margin-bottom: 30px;text-align:center;}

#content .item {background-color:#fff;border-radius: 7px;
    -webkit-border-radius: 7px;padding:15px;margin-bottom:30px;}
#content .item img {width:150px;float:right;border-radius: 4px;
    -webkit-border-radius: 4px;margin-left:15px}
#content .item p {font-size:0.95em;margin-top:5px}
#modal-box {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999999;
    top: 0;
    left: 0;
    display:none
}


#modal-box .bg {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:20px}
#modal-box .bg .cnt {width:500px;background-color:#fff;border-radius:10px;-webkit-border-radius:10px;padding:10px;direction:rtl;text-align:right;max-width:90%;}
#modal-box .bg h3 {float:right;}
#modal-box .bg .close {float:left;text-decoration:none;font-size:1.2em}
#modal-box .bg img {margin:15px 0}
#modal-box .bg p {font-size:0.95em}
@media (max-width:500px) {
    #content .item img  {width:100%;margin:0 0 5px 0}
	
}