p{
    color: rgb(255, 0, 0);
    font-size: 20px;
    font-weight: bold;
    direction:rtl;
	text-align: center;
    
}
body{
        background: #0d2969;
        

    }
	
h1
{
  color:#ffffff;
  font-family: 'Roboto', 'sans-serif';
  font-weight: 400 ;
  letter-spacing: 4px ;
  font-size:82px;
  text-align:center;
  margin:0;
  -webkit-animation:header 3.5s;
  -webkit-animation-fill-mode:backwards;
}

#wrapper
{
  height:400px;
  width:960px;
  position:relative;
  top:60px;
  margin-left:auto;
  margin-right:auto;
}


#bar
{
  background:#01ff95;
  height:5px;
  width:960px;
  position:relative;
  top:5px;
  -webkit-animation:bargrow 5s;
  -webkit-animation-fill-mode:backwards;
  -webkit-animation-delay:1s;
}

#bar2
{
  background:#f53100;
  height:5px;
  width:960px;
  position:relative;
  left:960px;
  top:0px;
  opacity:0;
  -webkit-animation:bargrow2 5s;
  -webkit-animation-fill-mode:forwards;
  -webkit-animation-delay:1s;
}

#bar3
{
  background:#02f8f8;
  width:5px;
  height:270px;
  position:relative;
  left:25px;
  bottom:110px;
  z-index:-1;
  -webkit-animation: bargrow3 4s;
  -webkit-animation-delay:1.5s; 
  -webkit-animation-fill-mode:backwards;
}

#bar4
{
  background:#b21c9e;
  width:5px;
  height:190px;
  position:absolute;
  left:925px;
  top:-60px;
  -webkit-animation: bargrow4 2.5s;
  -webkit-animation-delay: 2s;
  -webkit-animation-fill-mode:backwards;
 
}

#bar5
{
  background:#01ff56;
  width:5px;
  height:210px;
  position:absolute;
  left:940px;
  top:-20px;
  -webkit-animation: bargrow5 2s;
  -webkit-animation-delay: 3.5s;
  -webkit-animation-fill-mode:backwards;
}

#bar6 {
  background:#7db21c;
  height:5px;
  width:760px;
  position:absolute;
  top:-12.5px;
  left:200px;
  -webkit-animation: bargrow6 3s;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode:backwards;
}

@-webkit-keyframes header
{
  0% {opacity:0}
  100% {opacity:100}
}

@-webkit-keyframes bargrow
{
  0% {width:0px;}
 100% {width:960px;} 
}

@-webkit-keyframes bargrow2
{
  0% {width:0px; opacity:100;}
 100% {width:960px; left:0px;
 opacity:100;} 
}

@-webkit-keyframes bargrow3
{
  0% {height:0px;}
  100% {height:270px;}
}

@-webkit-keyframes bargrow4
{
   0% {height:0px; top:130px}
  100% {height:190px; top:-60px;}
}

@-webkit-keyframes bargrow5
{
   0% {height:0px;}
  100% {height:210px; top:-20px;}
}

@-webkit-keyframes bargrow6
{
  0% {width:0px;left:960px;}
 100% {width:760px;} 
}