@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; background:#f1f1f1; direction:rtl; font:normal 12px/18px 'Sahel',tehoma;}
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:bold; font-family:'IRANSans',arial}
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:block; 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(../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(../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:64px; background-position:-388px -4px;}
.icon-menu-2{width:54px; background-position:-333px -4px;}
.icon-menu-3{width:53px; background-position:-279px -4px;}
.icon-menu-4{width:54px; background-position:-224px -4px;}
.icon-menu-5{width:41px; background-position:-182px -4px;}
.icon-menu-6{width:65px; background-position:-116px -4px;}
.icon-menu-7{width:47px; background-position:-68px -4px;}
.icon-menu-8{width:55px; 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}
#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;}

#feature{
	display:table; width:100%; position:relative;
	background: rgb(65,60,41); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(65,60,41,1) 0%, rgba(110,104,72,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(65,60,41,1) 0%,rgba(110,104,72,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(65,60,41,1) 0%,rgba(110,104,72,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#413c29', endColorstr='#6e6848',GradientType=0 ); /* IE6-9 */
}
#feature .col-12{padding:0}
#feature .feature-stage{display:block; width:100%; height:410px; position:relative;}
#feature .feature-stage:before{content:"صفحه ویژه"; position:absolute; top:0; left:0; background:#6f6948; color:#fff; line-height:30px; padding:0 30px; border-radius:0 0 5px 5px; font-size:16px;}
#feature .feature-stage .feature-photo{margin:-153px 0 0 0; top:50%; position:absolute; left:0}
#feature .feature-stage .feature-photo img{position:relative; z-index:1}
#feature .feature-stage .feature-logo{display:inline; float:right; margin:30px 0}

#topics,#main{display:table; width:100%; padding:30px 0;}
#topics{padding:10px 0 20px;}
#topics .topics-wrapper{display:block; margin:0 -10px;}
#topics .topics-wrapper ul{display:table; width:100%; position:relative;}
#topics .topics-wrapper ul:after{content:""; position:absolute; bottom:-20px; left:10px; right:10px; border-bottom:1px solid #938b60; height:1px}
#topics .topics-wrapper ul li{display:inline; float:right; width:33.33%; padding:0 10px}
#topics .topics-wrapper ul li a{line-height:0; display:block;}
#topics .topics-wrapper ul li figcaption{visibility:hidden}
#topics .topics-wrapper ul li img{width:100%;}


#contents-lists{position:relative;}
#contents-lists:before{content:""; position:absolute; top:10px; bottom:25px; width:1px; background:#938b60;left:calc(50% + 10px)}
#contents-lists .contents-list-wrapper{display:table; width:100%; height:auto;}
#contents-lists .contents-list-wrapper:first-child{padding-left:20px}
#contents-lists .contents-list-wrapper:last-child{padding-left:20px}
#contents-lists .contents-list-wrapper .header{display:table; width:100%; padding:0 0 10px}
#contents-lists .contents-list-wrapper .header .title{font-family:SahelBold; font-weight:normal; font-size:18px; line-height:28px; color:#938b60; word-spacing:-3px}

#contents-lists .contents-list-wrapper .thumbnail{display:table; width:100%;}
#contents-lists .contents-list-wrapper .thumbnail a{display:block; line-height:0}
#contents-lists .contents-list-wrapper .thumbnail img{width:100%;}

#contents-lists .contents-list-wrapper .list{display:table; width:100%; padding-top:30px;}
#contents-lists .contents-list-wrapper .list ul{display:table; width:100%;}
#contents-lists .contents-list-wrapper .list ul li{display:table; width:100%; padding:0 0 10px 0}
#contents-lists .contents-list-wrapper .list .item{}
#contents-lists .contents-list-wrapper .list .item .title{font-family:Sahel; font-weight:normal; font-size:14px; line-height:24px;  word-spacing:-1px}
#contents-lists .contents-list-wrapper .list .item .title a{color:#333; display:table; position:relative; width:100%; padding-right:15px;}
#contents-lists .contents-list-wrapper .list .item .title a:before{content:""; position:absolute; width:8px; height:8px; background:#938b60; top:9px; right:0}
#contents-lists .contents-list-wrapper .list .item .lead{font-family:tahoma; padding:5px 40px 5px 0; text-align:justify;}
#contents-lists .contents-list-wrapper .list .item .lead a{color:#666}



#footer .copyright{display:table; width:100%; padding:10px 0; text-align:center; border-top:1px solid #938b60; color:#999}

#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);
}


@media only screen and (max-width: 1150px) {
	.container{width:900px;} 
}
@media only screen and (max-width: 1000px) {
	.container{width:760px;}
	
	#feature .feature-stage{height:auto; display:table}
	
	#feature .feature-stage .feature-photo{margin-top:-80px}
	#feature .feature-stage .feature-photo img{width:140px;}
	
	#feature .feature-stage .feature-logo{margin:32px 0;}
	#feature .feature-stage .feature-logo img{width:250px;}
	
	#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:#f1f1f1; 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}
	
	#feature .feature-stage .feature-photo{margin-top:-80px}
	#feature .feature-stage .feature-photo img{width:140px;}
	#feature .feature-stage .feature-logo{margin:40px 0}
	#feature .feature-stage .feature-logo img{width:200px}
	
	#contents-lists .col-4{width:50%; margin-right: 0; margin-left:0}
}
@media only screen and (max-width: 625px) {
	.container{width:100%;}
	#header .menu button.open-menu{margin-right:15px}
	#header .logo{left:15px}
	
	#topics .topics-wrapper ul li{width:100%; padding:5px 10px}
	
	#feature .col-12{padding:0 15px}
	
	#feature .feature-stage .feature-logo img{width:50vw; margin-right:-20px;}
	#feature .feature-stage .feature-photo{margin-top:-62px}
	#feature .feature-stage .feature-photo img{width:100px;}
}
@media only screen and (max-width: 500px) {
	#feature .feature-stage .feature-photo{margin-top:-40px}
	#feature .feature-stage .feature-photo img{width:80px;}

	
	#contents-lists .contents-list-wrapper{padding:0 !important}
	#contents-lists .col-4{width:100%; margin-right: 0; margin-left:0; margin-bottom:20px;}
	#contents-lists .col-4.span-l-2{position:relative;}
	#contents-lists .col-4.span-l-2:before{content:""; position:absolute; top:-10px; left:10px; right:10px; height:1px; background:#938b60}
	#contents-lists:before{background:transparent; visibility:hidden}
}

@media only screen and (max-width: 420px) {
	#form .form-description{width: 100%}
	#form .col-6, #main .col-6{padding:10px 15px}
}
