@font-face {
    font-family:'B Yekan';
    src:url('font/BYekan.eot') format('eot');
    src:url('font/BYekan.eot?#') format('eot'),    
          url('font/BYekan.woff') format('woff'),
          url('font/BYekan.ttf') format('truetype'); 
}

html,body
{
	padding:0px;
	margin:0px;
	direction:ltr;
	text-align:left;	
	font-family:"B Yekan", "B Traffic", "B Roya", "B Koodak", "Times New Roman", Arial;
}

img{
	border:0px;
	padding:0px;
	margin:0px;	
}

a{	
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	text-decoration:none;
	-webkit-transition:color 0.5s ease-in-out, background 0.5s ease-in-out;
	-moz-transition:color 0.5s ease-in-out, background 0.5s ease-in-out;
	-ms-transition:color 0.5s ease-in-out, background 0.5s ease-in-out;
	-o-transition:color 0.5s ease-in-out, background 0.5s ease-in-out;
	transition:color 0.5s ease-in-out, background 0.5s ease-in-out;
}

a:hover{
	-webkit-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-moz-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-ms-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-o-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
}

div, form, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary{
	position:relative;
	display:block;
	width:auto;
	height:auto;
	padding:0px;
	margin:0px;
	outline:0px;
	border:0px;
	overflow:hidden;
	background:transparent;
	direction:inherit;
	text-align:inherit;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	-webkit-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-moz-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-ms-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-o-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
}

input, button, textarea, select, option, table, tbody, tr, td{
	font-family:"B Yekan", "B Traffic", "B Roya", "B Koodak", "Times New Roman", Arial;
	font-size:inherit;
	font-weight:inherit;	
}

p{
	padding:7px 0px 3px 0px;
	margin:0px;
	outline:0px;
	text-indent:7px;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	color:inherit;
	direction:inherit;
	text-align:inherit;
}

/*/////////////////////////*/

body{
	position:absolute;
	top:0px;
	right:0px;
	left:0px;
	bottom:0px;
	width:100%;
	height:100%;
	padding:0px;
	background:#fff;
	font-size:13px;
	overflow:hidden;
	background:#09C;
}

body.xs{
	position:relative;
	bottom:auto;
	height:auto;
	overflow:visible;
}

.page-selector{
	position:absolute;
	display:block;
	width:30px;
	right:70px;
	bottom:70px;
	z-index:100000;
}

.xs .page-selector{
	display:none;
	visibility:hidden;	
}

.page-selector div, .page-selector span{
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;	
}

.page-selector div{
	width:25px;
	height:25px;
	background:url(img/home-page-selector-caret.png) no-repeat 0px 0px;	
	_background-image:url(img/home-page-selector-caret.gif);	
	margin:0px 0px 10px 0px;
	cursor:pointer;
}


.xs .page-selector div{
	display:none;
	visibility:hidden;	
}

.page-selector div:hover{
	opacity:0.8;	
}

.page-selector div.active{
	cursor:default;
	opacity:1;
}

.page-selector div span{
	display:block;
	position:relative;
	width:25px;
	height:25px;
	background:url(img/home-page-selector-caret.png) no-repeat 0px -25px;	
	_background-image:url(img/home-page-selector-caret.gif);	
	visibility:hidden;
	opacity:0;
}

.page-selector div.active span{
	visibility:visible;
	opacity:1;
}

.main-page{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:#0C3;
	overflow:hidden;	
}

.main-page.hide{
	display:none;	
}

.xs .main-page.hide{
	display:block;	
}

.xs .main-page{
	position:relative;
	height:500px;
	display:block;
}

.main-page section, .main-page figure, .main-page footer{
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;		
}


/*//////////////////////*/

.sitelogo{
	position:absolute;
	display:block;
	width:230px;
	height:77px;
	top:3%;
	left:11%;
	margin:0px;	
	z-index:10000;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}

.sitelogo figure{
	display:block;
	width:100%;
	height:100%;
}

.sitelogo img{
	display:block;
	width:100%;
	_behavior:expression(this.src = this.src.replace('.png', '.gif'));
}

.sitelogo figcaption{
	display:none;
}

.po .sitelogo{
	width:230px;
	height:77px;
	top:3%;
	left:10%;	
	visibility:visible;
	opacity:1;
}

.xs.po .sitelogo{
	visibility:hidden;	
}


.contactus-link{
	position:absolute;
	display:block;
	top:5%;
	right:11%;
	height:16px;
	line-height:16px;
	padding:2px 27px 2px 5px;
	background:url(img/home/contactus.png) no-repeat right 4px;
	_background-image:url(img/home/contactus.gif);
	color:#fff;
	font-size:13px;
	z-index:10000;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}

.po .contactus-link{
	visibility:visible;
	opacity:1;
}

.xs.po .contactus-link{
	display:none;
	visibility:hidden;
	opacity:0;
}

/*//////////////////////*/

.moreinfo-part{
	display:block;
	position:absolute;
	width:50%;
	height:100px;
	bottom:-100px;
	left:25%;
	color:#fff;
	text-align:center;
	direction:rtl;
	font-size:18px;
	opacity:0;
}

.xs .moreinfo-part{
	position:relative;
	width:90%;
	height:auto;
	left:0px;
	bottom:auto;
	padding:5%;
	font-size:11px;
}

.main-page.active .moreinfo-part{
	bottom:10px;
	opacity:1;
}

.xs .main-page.active .moreinfo-part{
	bottom:auto;
}

.moreinfo-part .moreinfo-button{
	display:block;
	padding:20px 0px 0px 0px;
	text-align:center;
}

.moreinfo-part .moreinfo-button a{
	position:relative;
	display:inline-block;
	height:30px;
	line-height:30px;
	padding:10px 80px 10px 20px;
	font-size:18px;
	color:#fff;
	background:#1f5e9e url(img/home/button-caret.png) no-repeat right 0px;
	overflow:visible;
}

.xs .moreinfo-part .moreinfo-button a{
	font-size:13px;
}

.moreinfo-part .moreinfo-button a:hover{
	background-color:#2f6eae;
}

/*//////////////////////*/

.page0{
	background:#1eb9e0;
}

.xs .page0{
	height:auto;
}

.page0 .sitelogo{
	position:absolute;
	width:500px;
	height:141px;
	top:50%;
	left:50%;
	margin:-141px 0px 0px 0px;	
	opacity:1;
	visibility:visible;
}

.xs .page0 .sitelogo{
	width:55%;
	height:auto;
	top:5%;
	left:5%;
	margin:0px;
}

.page0 .leftbg{
	position:absolute;
	height:100%;
	width:49%;
	left:-3%;
	border:0px solid #fff;
	border-width:0px 3px 0px 0px;
	background:#000;
	overflow:hidden;
	opacity:0;
}

.xs .page0 .leftbg{
	position:relative;
	width:100%;
	height:auto;
	left:0px;	
}

.page0.active .leftbg{
	left:0%;
	opacity:1;
}

.page0 .leftbg img{
	position:absolute;
	height:100%;
	width:auto;
	top:0px;
	right:0px;
}

.xs .page0 .leftbg img{
	position:relative;
	width:100%;
	height:auto;
}

.page0 .workinfo{
	position:absolute;
	top:54%;
	left:51%;
	width:40%;
	color:#fff;
	opacity:1;
	direction:rtl;
	text-align:left;
}

.xs .page0 .workinfo{
	position:relative;
	top:0px;
	left:0px;
	width:auto;
	text-align:right;
	padding:10px;
}

.page0 .langinfo{
	position:absolute;
	top:90%;
	left:51%;
	width:40%;
	height:110px;
	margin:-110px 0px 0px 0px;
	color:#fff;
	opacity:1;
	direction:ltr;
	text-align:left;
}

.xs .page0 .langinfo{
	position:relative;
	top:0px;
	left:0px;
	width:auto;
	height:auto;
	text-align:left;
	padding:10px;
	margin:0px;
}

.page0 .langinfo footer{
	padding:30px 0px 0px 0px;
	color:#fff;
}

.xs .page0 .langinfo footer{
	text-align:center;
}

.page0 .langinfo footer a{
	color:#fff;
}

.page0 .langinfo footer a:hover{
	color:#CCC;
}

.page0 .footerinfo{
	position:absolute;
	bottom:-60px;
	left:0px;
	height:30px;	
	width:100%;
	padding:10px 0px 10px 0px;
	border:0px solid #fff;
	border-width:3px 0px 0px 0px;
	background:#2e73b9;
	color:#fff;
	direction:rtl;
	text-align:center;
	font-size:18px;
	line-height:30px;
	-webkit-transition:all 0.8s ease-in-out;
	-moz-transition:all 0.8s ease-in-out;
	-ms-transition:all 0.8s ease-in-out;
	-o-transition:all 0.8s ease-in-out;
	transition:all 0.8s ease-in-out;	
}

.xs .page0 .footerinfo{
	display:none;
}

.page0.active .footerinfo{
	bottom:0px;
}

/*//////////////////////*/

.page1{
	background:#2e73b9;	
}

.xs .page1{
	height:auto;
}

.page1 .idea{
	position:absolute;
	width:480px;
	height:290px;
	top:55%;
	left:50%;
	margin:-290px 0px 0px -240px;
	opacity:0;
	visibility:hidden;
}

.xs .page1 .idea{
	position:relative;
	width:90%;
	height:auto;
	left:0px;
	top:0px;
	margin:0px;
	padding:5% 5% 0% 5%;
}

.page1 .idea img{
	width:100%;
	height:100%;
}

.xs .page1 .idea img{
	width:100%;
	height:auto;
}

.page1.active .idea{
	width:500px;
	height:300px;
	margin:-300px 0px 0px -250px;
	opacity:1;
	visibility:visible;
}

.xs .page1.active .idea{
	width:90%;
	height:auto;
	left:0px;
	top:0px;
	margin:0px;
}

.page1 .idea figcaption{
	display:none;
}

.page1 article{
	position:absolute;
	width:50%;
	top:57%;
	left:25%;
	margin:0px;
	direction:rtl;
	text-align:center;
	font-size:18px;
	font-weight:normal;
	color:#fff;
}

.xs .page1 article{
	position:relative;
	width:90%;
	top:0px;
	left:0px;
	padding:10px 5% 5% 5%;
	font-size:13px;
	text-align:justify;
}

.page1 .moreinfo-button a{
	background-color:#1f5e9e;
}

.page1 .moreinfo-button a:hover{
	background-color:#0f4e8e;
}


/*//////////////////////*/

.page2{
	background-color:#0fa37b;
}

.xs .page2{
	height:auto;
}


.page2 article{
	position:absolute;
	width:35%;
	top:12%;
	left:46%;
	direction:rtl;
	text-align:justify;
	color:#fff;
	font-size:18px;
	overflow:visible;
}

.xs .page2 article{
	position:relative;
	width:90%;
	padding:5%;
	top:0px;
	left:0px;
	font-size:13px;
}

.page2 article .title{
	position:relative;
	display:block;
	margin:0px;
	padding:0px 0px 20px 0px;
	direction:rtl;
	text-align:right;
	color:#fff;
	font-size:36px;
	font-weight:normal;
}

.xs .page2 article .title{
	font-size:21px;
}

.page2 .images-panel{
	position:absolute;
	display:block;
	overflow:hidden;
	right:58%;
	top:18%;
	width:20%;
	opacity:0;
}

.xs .page2 .images-panel{
	position:relative;
	right:5%;
	top:0px;
	width:90%;
	padding:5%;
}

.page2.active .images-panel{
	right:56%;	
	opacity:1;
}

.xs .page2.active .images-panel{
	right:0%;
}

.page2 figure{
	position:relative;
	display:block;
	float:right;
	overflow:hidden;
}

.page2 figure img{
	position:relative;
	display:block;
	width:100%;	
	padding:4px;
	border:5px solid #fff;
	_iewidthpr:1;
	_iewidthpx:18;
	_width:expression((this.parentNode.offsetWidth * this.currentStyle.iewidthpr - this.currentStyle.iewidthpx) + 'px');
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-izing:border-box;
	box-sizing:border-box;
}

.page2 figure figcaption{
	display:none;
}

.page2 .image-top{
	width:100%;
}

.page2 .image-bottom-right img, .page2 .image-bottom-left img{
	_iewidthpx:12;
	border-width:3px;
	padding:3px;
}

.page2 .image-bottom-right{
	width:49%;	
	margin:5px 0px 0px 0px;
}

.page2 .image-bottom-left{
	float:left;
	width:49%;
	margin:5px 0px 0px 0px;
}


.page2 .moreinfo-button a{
	background-color:#0f7c5f;
}

.page2 .moreinfo-button a:hover{
	background-color:#0f6c4f;
}

/*//////////////////////*/

.page3{
	background-color:#73b6fa;
}

.xs .page3{
	height:auto;
}

.page3 .leftbg{
	position:absolute;
	left:-1%;
	top:50%;
	width:51%;
	margin-top:-25%;
	opacity:0;
	padding:0px;
	overflow:visible;
}

.xs .page3 .leftbg{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	margin:20px 0px 0px 0px;
}

.page3 article{
	position:absolute;
	width:35%;
	top:12%;
	left:46%;
	direction:rtl;
	text-align:justify;
	color:#fff;
	font-size:18px;
	overflow:visible;
}

.xs .page3 article{
	position:relative;
	width:90%;
	padding:5%;
	top:0px;
	left:0px;
	font-size:13px;
}

.page3 article .title{
	position:relative;
	display:block;
	margin:0px;
	padding:0px 0px 20px 0px;
	direction:rtl;
	text-align:right;
	color:#fff;
	font-size:36px;
	font-weight:normal;
}

.xs .page3 article .title{
	font-size:21px;
}


@-webkit-keyframes page3spin{ 100%{-webkit-transform:rotate(-360deg)} }
@-moz-keyframes page3spin{ 100%{-moz-transform:rotate(-360deg)} }
@-o-keyframes page3spin{ 100%{-o-transform:rotate(-360deg)} }
@keyframes page3spin{ 100%{-webkit-transform:rotate(-360deg); transform:rotate(-360deg); } }

.page3 .leftbg img{
	width:100%;
	-webkit-transform-origin:49.9% 52.2%;
	-moz-transform-origin:49.9% 52.2%;
	-ms-transform-origin:49.9% 52.2%;
	-o-transform-origin:49.9% 52.2%;
	transform-origin:49.9% 52.2%;
    -webkit-animation:page3spin 250s linear infinite;
    -moz-animation:page3spin 250s linear infinite;
    -ms-animation:page3spin 250s linear infinite;
    -o-animation:page3spin 250s linear infinite;	
    animation:page3spin 250s linear infinite;	

}


.page3 .leftbg .leftbg-center{
	position:absolute;
	display:block;
	top:51.4%;
	left:50.1%;
	width:30.5%;
	height:30.5%;
	margin:-15.3% 0px 0px -15.3%;
	z-index:1000;
	overflow:hidden;
	border:0px;
	padding:0px;
    -webkit-animation:none;
    -moz-animation:none;
    -ms-animation:none;
    -o-animation:none;	
    animation:none;	
	-webkit-border-radius:500px;
	-moz-border-radius:500px;
	-ms-border-radius:500px;
	-o-border-radius:500px;
	border-radius:500px;
}

.page3.active .leftbg{
	opacity:1;
}



.page3 .moreinfo-button a{
	background-color:#5a83ad;
}

.page3 .moreinfo-button a:hover{
	background-color:#4a739d;
}


/*//////////////////////*/

.page4{
	background-color:#f9b42e;	
}

.xs .page4{
	height:auto;
}

.page4 .widebg{
	position:relative;
	left:0px;
	padding:100px 0px 0px 0px;
	width:100%;
	height:30%;
	overflow:hidden;	
}

.xs .page4 .widebg{
	padding:5% 0px 0px 0px;
	height:auto;
}

.page4 .widebg img{
	width:100%;
}

.page4 article{
	position:relative;
	display:block;
	padding:2% 16% 0px 40%;
	direction:rtl;
	color:#fff;
	font-size:18px;
	text-align:justify;
	overflow:visible;
}

.xs .page4 article{
	width:90%;
	padding:5%;
	top:0px;
	left:0px;
	font-size:13px;
}

.page4 article .title{
	position:absolute;
	display:block;
	top:12%;
	right:63%;
	left:auto;
	width:30%;
	_width:400px;
	margin:0px;
	padding:0px;
	direction:rtl;
	text-align:right;
	color:#fff;
	font-size:36px;
	font-weight:normal;
}

.xs .page4 article .title{
	position:relative;
	top:0px;
	right:auto;
	left:auto;
	width:auto;
	font-size:21px;
	padding:0px 0px 20px 0px;
}

.page4 .moreinfo-button a{
	background-color:#c07f02;
}

.page4 .moreinfo-button a:hover{
	background-color:#b06f02;
}

/*//////////////////////*/

.page5{
	background-color:#a29f98;
}

.xs .page5{
	height:auto;
}

.page5 .sitelogo{
	position:absolute;
	width:270px;
	height:77px;
	top:22%;
	right:40%;
	left:auto;
	margin:-77px -135px 0px 0px;	
	opacity:0;
	visibility:visible;
}

.xs .page5 .sitelogo{
	display:none;	
}

.page5.active .sitelogo{
	opacity:1;
}

.page5 .leftbg{
	position:absolute;
	height:100%;
	width:auto;
	left:-3%;
	background:#000;
	overflow:hidden;
	opacity:0;
}

.xs .page5 .leftbg{
	position:relative;
	width:100%;
	height:auto;
}

.page5.active .leftbg{
	left:0%;
	opacity:1;
}

.page5 .leftbg img{
	position:relative;
	display:block;
	height:100%;
	width:auto;
}

.xs .page5 .leftbg img{
	width:100%;
	height:autol	
}

.page5 article{
	position:absolute;
	width:30%;
	top:22%;
	right:25%;
	margin:40px 0px 0px 0px;
	direction:rtl;
	text-align:justify;
	color:#fff;
	font-size:18px;
	overflow:visible;
}

.xs .page5 article{
	position:relative;
	width:90%;
	padding:5%;
	top:0px;
	left:0px;
	right:0px;
	font-size:13px;
}

.page5 footer{
	position:absolute;
	width:30%;
	bottom:6%;
	right:25%;
	direction:rtl;
	text-align:right;
	color:#fff;
	font-size:18px;
	overflow:visible;
}

.xs .page5 footer{
	position:relative;
	width:90%;
	padding:5%;
	top:0px;
	left:0px;
	right:0px;
	font-size:13px;
}