*{box-sizing:border-box;}
body{overflow:hidden; margin:0; padding:0; background:#006600; color:#ffffff; font:12px/18px tahoma; direction:rtl;}
img{border:none;}

#stage{position:absolute; top:0; bottom:0; right:0; left:0; overflow:hidden;}

.site-logo{position:absolute; top:20px; left:20px; z-index:1000;}
.text-logo{
	width:560px; height:215px; margin:-108px -280px 0 0; position:absolute; right:50%; top:50%; z-index:1000; display:none;
	
}

.text-logo.step1{
	transform:rotate(-90deg) scale(0.5);
	right:56%; top:50%;
}
.text-logo.step2{
	transform:rotate(0deg) translate(0px, 0px) scale(1); top:30%; right:50%;
}
.text-logo.step3{
	transform:scale(0.25); top:40px; right:95px;
}

.text-logo .line-text{position:absolute; width:inherit; height:inherit; top:0; right:0}
.text-logo div, .text-logo div img{position:absolute; overflow:hidden}
.text-logo div img{
	transition:all 0.6s ease-in-out 0s;
}

.text-logo div.point-1{top:0; right:12px; height:105px; width:35px}
.text-logo div.point-1 img{top:105px; right:-7px; transition-delay:1.1s;}
.text-logo.step2 div.point-1 img{top:0px}

.text-logo div.point-2{bottom:0; right:45px; height:70px; width:50px}
.text-logo div.point-2 img{top:-212px; right:-45px; transition-delay:1s;}/*top:-145px*/
.text-logo.step2 div.point-2 img{top:-145px}

.text-logo div.point-3{top:0; right:123px; height:145px; width:47px;}
.text-logo div.point-3 img{top:120px; right:-111px; transition-delay:1.3s;}/*top:0px*/
.text-logo.step2 div.point-3 img{top:0px}

.text-logo div.point-4{bottom:0; right:178px; height:86px; width:50px}
.text-logo div.point-4 img{top:-172px; right:-175px; transition-delay:1.4s;}/*top:-112px*/
.text-logo.step2 div.point-4 img{top:-112px}

.text-logo div.point-5{top:0; right:363px; height:120px; width:47px;}
.text-logo div.point-5 img{top:85px; right:-365px; transition-delay:1.5s;}/*top:1px*/
.text-logo.step2 div.point-5 img{top:1px}

.text-logo div.point-6{top:0; right:428px; height:111px; width:60px;}
.text-logo div.point-6 img{top:120px; right:-438px; transition-delay:1.25s;}/*top:0px*/
.text-logo.step2 div.point-6 img{top:0px}

#intro{position:absolute; top:0; bottom:0; right:0; left:0; overflow:hidden; background:#006600; z-index:999;}

#intro .medal{
	position:absolute; width:102px; height:146px; top:60%; right:50%; margin:-51px -56px 0 0;
	transition:all 0.6s ease-in-out 0s;
}
#intro .medal .m-stage{
	position:absolute; top:0; right:0; left:0; height:0%; overflow:hidden;
	transition:all 0.6s ease-in-out 0s;
}
#intro .medal img, #intro .medal div{position:absolute;}
#intro .medal img.flag-part1{top:0; right:0; left:0;}
#intro .medal .flag-part2{top:42px; right:0; left:0; bottom:104px; background:url(../images/flag4.png)}
#intro .medal .flag-part3{position:absolute; top:42px; right:0; left:0;}
#intro .medal .flag-part4{
	position:absolute; top:42px; right:0; left:0; transform:rotate(-180deg);
	transition:all 0.6s ease-in-out 1s;
}

#intro.step1 .medal{transform:rotate(-90deg) scale(0.8); right:46%; top:48%;}
#intro.step1 .medal .flag-part4{transform:rotate(-270deg)}
#intro.show .medal .m-stage{height:100%}

#intro .description{
	width:800px; height:20px; position:absolute; top:48%; right:50%; margin:-10px -400px 0 0; text-align:center; opacity:0;
}

#intro .lead{
	width:800px; color:#fff; position:absolute; right:50%; margin:0 -400px; bottom:30px; opacity:0; text-align:justify; opacity:0;
}
#intro .lead a{color:#f3cb9b; text-decoration:none;}
#intro.step2 .description, #intro.step2 .lead{opacity:1}

#intro .next-arrow{opacity:0; left:-100px !important; transition:ease-in-out 0.4s; transition-delay:5s;}
#intro.step2 .next-arrow{opacity:1; left:0px !important;}


#body{position:absolute; top:0; bottom:0; right:0; left:0; background:#006600; z-index:998;} 

#body .description{position:absolute; top:40px; right:50%; width:360px; height:20px; margin:-10px -180px 0 0; text-align:center; color:#fff;}
#body .description a{color:#D0944B; transition:ease-in-out 0.3s; display:inline-block; margin-top:3px; text-decoration:none;}
#body .description a:hover{color:#f3cb9b;}

#body .items-title{margin:0; padding:0; position:absolute; top:100px; right:100px; width:42%; z-index:99999; display:block; overflow:hidden; overflow-y:auto; transition:ease-in-out 0.3s;}
#body .items-title>li{display:inline; float:right; width:100%; position:relative;}
#body .items-title>li .small-madel{display:inline-block; position:absolute; right:0; top:9px; width:30px; height:21px; background:url(../images/madel-small.png) center no-repeat; transition:ease-in-out 0.3s;}
#body .items-title>li.selected .small-madel{transform:rotate(30deg)}
#body .items-title>li a{color:#fff; font:13px/18px droidnaskhbold,tahoma; padding:3px 33px 3px 10px; margin:2px 0; display:block; text-decoration:none; transition:ease-in-out 0.3s;}
#body .items-title>li:hover a, #body .items-title>li.selected a{color:#f3cb9b;}

.prev-arrow{position:absolute; top:0; bottom:0; right:0; width:100px; cursor:pointer; z-index:999}
.prev-arrow span{display:block; width:29px; height:110px; margin:-55px -15px 0 0; top:50%; right:50%; background:url(../images/panel_right.png); position:absolute; transition:ease-in-out 0.3s;}
.prev-arrow:hover span{right:45%}
.prev-arrow:active span{right:40%}
.next-arrow{position:absolute; top:0; bottom:0; left:0; width:100px; cursor:pointer; z-index:999;}
.next-arrow span{display:block; width:29px; height:110px; margin:-55px -15px 0 0; top:50%; right:50%; background:url(../images/panel_left.png); position:absolute; transition:ease-in-out 0.3s;}
.next-arrow:hover span{right:55%}
.next-arrow:active span{right:60%}

.items-boxes{position:absolute; top:200px; right:100px; left:100px; bottom:50px; list-style:none; padding:0; margin:0;}
.items-boxes li{position:absolute; top:0; bottom:0; display:none; width:100%;}
.items-boxes li.active{display:block;}

.content-box{position:absolute; bottom:0; right:0; width:100%; z-index:9999999999;}

.content-box .title-box{background:#003300; color:#fff; font:18px/28px DroidNaskhBold, Arial, sans-serif; padding:10px 130px 10px 25px; position:relative;}
.content-box .title-box a{font:12px/18px tahoma; color:#f3cb9b; display:inline-block; transition:ease-in-out 0.3s; text-decoration:none; position:absolute; top:14px; left:110px}
.content-box .title-box a:hover{color:#fff;}
.content-box .lead-box{background:#003300; padding:10px 130px 10px 25px; text-align:justify; margin-top:10px; font-size:13px; line-height:23px; min-height:100px;}

.content-box .madel{ background:url(../images/madel-1.png); width:102px; height:146px; position:absolute; top:0; right:10px;}
.date{ position:absolute; top:-5px; left:25px; background:url(../images/date-bg.png); width:70px; height:73px;}
.date span{display:block; padding:38px 4px 0; color:#442D19; font:13px/18px droidnaskhbold,tahoma; transform:rotate(35deg) translate(9px,-3px);}


.photo-box{position:absolute; left:0; background:#330000; bottom:190px; width:45%; text-align:center; line-height:0; overflow:hidden; z-index:999999}
.photo-box .photo-stage{position:relative; margin:15px; overflow:hidden;}

/*Player*/
._mm-player{bottom:10px; position:absolute; right:50%; z-index:9999999; width:280px; margin:0 -140px;}
._mm-player a{color:#f3cb9b; text-decoration:none; position:absolute; left:0; top:0;}
.gotoNextPage{color:#f3cb9b; text-decoration:none;}