.caret-up {
    width: 0; 
    height: 0; 
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid;
    
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}
body{margin-top:50px;}



@-webkit-keyframes spinner {
  from {
	  -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
	
  }
  to {
	  	 -moz-transform: rotateY(-360deg);
    -webkit-transform: rotateY(-360deg);

  }
}

#stage {
  margin: 1em auto;
   -moz-perspective: 1200px;
  -webkit-perspective: 1200px;
  
}

#spinner {
	  
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 6s;
  -moz-transform-style: preserve-3d;
	
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  -webkit-transform-style: preserve-3d;
  

}
#spinner:hover {
	 -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
 
}

#spinner img {
  position: absolute;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}







.rar2{
	margin-left:100px;
 animation:rar 5s infinite;
 margin-top: 1em;

 position: relative;
 animation-name: example-4 ;
-webkit-animation-name: example-4 ;
animation-duration: 5s ;
 animation-timing-function: infinite;
 animation-delay: 1s;    
 animation-iteration-count: 2; 
animation-direction: alternate;

	}
@keyframes example-4 { 
 
  0%   {left: 0px; top: 0px;}
  30%  {left: 180px; top: 0px;}
  80%  {left: 220px; top: 50px;}
90%  {left: 0px; top: 50px;}
100%  {left: 0px; top: 0px;}

}
.ex4{
	animation:rar 5s linear; 
	font-size:50px;
	font-family:Algerian;

}


@keyframes rar{ 
		0%,10%{
		opacity: .1;
		text-shadow: 5px 5px 50px blue;
		-moz-transform: scale(.1);
		-webkit-transform: scale(.1);

}