/* --- Website Persian Fonts --- */
@font-face {
  font-family: 'BHoma';
  src: url('../fonts/BHoma.eot?#') format('eot'),  /* IE6–8 */
       url('../fonts/BHoma.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('../fonts/BHoma.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
  font-family: 'BTitrTGEBold';
  src: url('../fonts/BTitrTGEBold.eot?#') format('eot'),  /* IE6–8 */
       url('../fonts/BTitrTGEBold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('../fonts/BTitrTGEBold.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
 font-family: 'BKoodakBold';
 src: url('../fonts/BKoodakBold.eot?#') format('eot'),  /* IE6–8 */
      url('../fonts/BKoodakBold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
      url('../fonts/BKoodakBold.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
 font-family: 'BFarnaz';
 src: url('../fonts/BFarnaz.eot?#') format('eot'),  /* IE6–8 */
      url('../fonts/BFarnaz.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
      url('../fonts/BFarnaz.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
.Homa {font-family: BHoma, Arial, Helvetica, sans-serif;}
.TitrTGE {font-family: BTitrTGEBold,Arial,Helvetica,sans-serif;}
.Farnaz {font-family: BFarnaz, Arial, Helvetica, sans-serif;}
.koodak{font-family: BKoodakBold, Arial, Helvetica, sans-serif; font-size: 16px;}
.en-font{font-family: sans-serif; }
/* --- Website Persian Fonts End --- */
html, body{overflow: hidden; height: 100%;}
body:before {  
        content: "";  
        position: fixed;  
        top: -10px;  
        left: 0;  
        width: 100%;  
        height: 10px;  
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
        z-index: 100;  
    }  
body{
 background: url('../img/city___.png') ,url('../img/bggra2.png');
 background-repeat: repeat-x;
 background-position: center bottom , center top;
}
h1{letter-spacing: -3px;}
h2{font-size: 20px;}
h2.text-center{font-size: 30px; letter-spacing: -4px;}
.answer{padding-right: 30px;}
.contentColor{
    padding: 20px;
        background-color: white;
        -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
.trans{
 -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
}
section{
 background: url('../img/Logo.png') no-repeat;
 width: 408px;
 height: 408px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 border-radius: 100%;
}
.glow{
 background: url('../img/glow.png') no-repeat;
 width: 500px;
 height: 500px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
}
div#id{
 position: absolute;
 width: 160px;
 height: 160px;
 background-color: olive;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 border-radius: 100%;
 margin: auto;
 background: url('../img/stand.png') no-repeat;
 -webkit-animation: myfirst 5s linear ; /* Chrome, Safari 5 */
       -moz-animation: myfirst 5s linear ; /* Firefox 5-15 */
         -o-animation: myfirst 5s linear ; /* Opera 12+ */
            animation: myfirst 5s linear ; /* Chrome, Firefox 16+*/
}
.left-my-nav{
 width: 300px;
 height: 400px;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 left: -50px;
}
.right-my-nav{
 width: 300px;
 height: 200px;
 position: absolute;
 top: -200px;
 right: 50px;
}
.nav-element{
 width: 200px;
 height: 50px;
 position: relative;
 border-radius: 0 5px 5px 0;
 margin-top: 15px;
 padding: 12px 15px 10px 0;
 direction: rtl;
 left: -150px;
 -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
         box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.right-nav-element{
 background-color: #141414;
 width: 50px;
 height: 200px;
 position: relative;
 border-radius: 0 0 5px 0;
 top: -170px;
 float: left;
 margin-left: 10px;
 cursor: pointer;
 -webkit-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
     -ms-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
         box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
#rnav1{background: url('../img/haram.png');}
#rnav2{background: url('../img/iran.jpg');}
#rnav3{background: url('../img/e_khomeini.jpg');}
#rnav4{background: url('../img/aqa.png');}
#rnav1:hover,#rnav2:hover,#rnav3:hover,#rnav4:hover{top: 0;}
#nav1{background-color: #8872d2; border-bottom: 5px solid #5a34d6 ;}
#nav2{background-color: #43abdb; border-bottom: 5px solid #307b9e;}
#nav3{background-color: #5bba23; border-bottom: 5px solid #34780c;}
#nav4{background-color: #ffdc50; border-bottom: 5px solid #ffcc00 ;}
#nav5{background-color: #f96670; border-bottom: 5px solid #d10210;}
#nav6{background-color: #a5a0a1; border-bottom: 5px solid #141414 ;}
#nav6:hover,#nav5:hover,#nav4:hover,#nav3:hover,#nav2:hover,#nav1:hover{left: 0px;}
.left-my-nav span{color: white; font-size: 20px; padding-left: 15px;}
.left-my-nav a{color: white; text-decoration: none; cursor: pointer; font-size: 18px;}
.rtl-direction{direction: rtl;}
.content{
 height: 500px;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 display: none;
 padding: 10px;
 overflow: hidden;
 z-index: 5;
}
.in-content{
 display: none;
 background-color: white;
 background-image: linear-gradient(#eee .1em, transparent .1em);
 background-size: 100% 1.2em;
 padding: 10px;
 min-height: 480px;
}
.clsbtn{position: relative; top: -3px; color: red; left: -15px;}
.clsbtn:hover{color: #5a34d6;}
.my-bg{
 background-color: #fbfbfb;
 -webkit-box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
     -ms-box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
         box-shadow: 0 4px 0px rgba(0, 0, 0, 0.2);
position: relative;z-index: 90;
}
#typer{color: white;}
#ca1{background-color: rgba(136,114,210,0.5); border-bottom: 5px solid #5a34d6 ;}
#ca2{background-color: rgba(67,171,219,0.5); border-bottom: 5px solid #307b9e ;}
#ca3{background-color: rgba(91,186,35,0.5); border-bottom: 5px solid #34780c ;}
#ca4{background-color: rgba(255,220,80,0.5); border-bottom: 5px solid #ffcc00 ;}
#ca5{background-color: rgba(249,102,112,0.5); border-bottom: 5px solid #d10210 ;}
#ca6{background-color: rgba(165,160,161,0.5); border-bottom: 5px solid #141414 ;}
#sun{
 -webkit-animation: myOrbit 25s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 25s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 25s linear infinite; /* Opera 12+ */
            animation: myOrbit 25s linear infinite; /* Chrome, Firefox 16+*/
}
.mybtn{position: absolute; width: 24px; height: 24px; bottom: 5px; left: 0; right: 0; margin: auto; border: none;}
.playbtn{background: url(../img/playerButton.png) no-repeat;}
.pausebtn{background: url(../img/playerButton.png) no-repeat; background-position: -25px 0px; display: none;}
.ribbon{
 position: absolute; top: 20px; left: -6px; z-index: 10;
 width: 30px;
 height: 96px;
 background: url('../img/ribbons.png') no-repeat;
}
.FAQ{background-position: -32px 0px;}
.register{background-position: -64px 0px;}
.news{background-position: -96px 0px;}
.Champion{background-position: -128px 0px;}
.contact{background-position: -160px 0px;}
.img-logo{margin-top: 100px;}
#register_note{background-color: rgba(91,186,35,0.2);}
#pic:hover{
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}
.notation {position: relative; top: -150px; z-index: 2; height: 300px;}
.notation p{
 background-color: rgba(151,0,255,1); border-radius: 5px;
 font-size: 15px; color:white; padding: 10px; padding-right: 30px;}
.notation-img{
 position: absolute; top: 10px; right: 12px;
 width: 30px;
 height: 96px;
 background: url('../img/ribbons.png') no-repeat -194px 0px;
}
#not2{background-color: rgba(87,185,69,1);}
.img-rotate:hover{
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(3600deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}
.XS-logo-animate{
    -webkit-animation: myOrbit 25s linear infinite; /* Chrome, Safari 5 */
       -moz-animation: myOrbit 25s linear infinite; /* Firefox 5-15 */
         -o-animation: myOrbit 25s linear infinite; /* Opera 12+ */
            animation: myOrbit 25s linear infinite; /* Chrome, Firefox 16+*/
}
#logo-anim{width: 270px; height: 270px;}
#logo-stand{width: 108px; height: 108px;}
.XS-logo{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 10; }
#XS-nav{position: fixed; z-index: 200; }
#XS-nav1{ z-index: 200; }
.XS-content{
    background: url('../img/xsLogo.png') no-repeat center center;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    color: white;
}
.holy{position: absolute; width: 100%;height: 100%;
 background-color: rgba(0,0,0,0.6); z-index: 9999; display: none;}
.center{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
#ica2 div p span{color: rgb(67,171,219);}
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@-o-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}
@keyframes myOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@-webkit-keyframes myfirst {
    from   {opacity: 0;}
    to {opacity: 1;}
}
@-moz-keyframes myfirst {
   from   {opacity: 0;}
    to {opacity: 1;}
}
@-o-keyframes myfirst {
  from   {opacity: 0;}
    to {opacity: 1;}
}
@keyframes myfirst {
   from   {opacity: 0;}
    to {opacity: 1;}
}