/* 
    Document   : Nextcast
    Created on : Nov 22, 2013, 5:00:40 AM
    Author     : Green
    Description:
        Purpose of the stylesheet follows.
*/
             @-webkit-keyframes rangeOfGrays {
                0% {
                    background-image: url(image/index-a.png);
                }
                15% {
                    background-image: url(image/index-a.png);
                }
              
                25% {
                    background-image: url(image/index-b.png);
                }
                40% {
                    background-image: url(image/index-b.png);
                }
                50% {
                    background-image: url(image/index-c.png);
                }
                65% {
                    background-image: url(image/index-c.png);
                }
                75% {
                    background-image: url(image/index-d.png);
                }
                90% {
                    background-image: url(image/index-d.png);
                }                
                100% {
                    background-image: url(image/index-a.png);
                 }
            }



            @-moz-keyframes rangeOfGrays {
                0% {
                    background-image: url(image/index-a.png);
                }
                15% {
                    background-image: url(image/index-a.png);
                }
              
                25% {
                    background-image: url(image/index-b.png);
                }
                40% {
                    background-image: url(image/index-b.png);
                }
                50% {
                    background-image: url(image/index-c.png);
                }
                65% {
                    background-image: url(image/index-c.png);
                }
                75% {
                    background-image: url(image/index-d.png);
                }
                90% {
                    background-image: url(image/index-d.png);
                }                
                100% {
                    background-image: url(image/index-a.png);
                 }
            }



            @-o-keyframes rangeOfGrays {
                0% {
                    background-image: url(image/index-a.png);
                }
                15% {
                    background-image: url(image/index-a.png);
                }
              
                25% {
                    background-image: url(image/index-b.png);
                }
                40% {
                    background-image: url(image/index-b.png);
                }
                50% {
                    background-image: url(image/index-c.png);
                }
                65% {
                    background-image: url(image/index-c.png);
                }
                75% {
                    background-image: url(image/index-d.png);
                }
                90% {
                    background-image: url(image/index-d.png);
                }                
                100% {
                    background-image: url(image/index-a.png);
                 }
            }

            @keyframes rangeOfGrays {
                0% {
                    background-image: url(image/index-a.png);
                }
                15% {
                    background-image: url(image/index-a.png);
                }
              
                25% {
                    background-image: url(image/index-b.png);
                }
                40% {
                    background-image: url(image/index-b.png);
                }
                50% {
                    background-image: url(image/index-c.png);
                }
                65% {
                    background-image: url(image/index-c.png);
                }
                75% {
                    background-image: url(image/index-d.png);
                }
                90% {
                    background-image: url(image/index-d.png);
                }                
                100% {
                    background-image: url(image/index-a.png);
                 }
            }
    
            #sf-animation {
                width: 1000px;
                height: 450px;
                background-image: url(image/index-a.png);

                -webkit-animation-name: rangeOfGrays;
                -moz-animation-name: rangeOfGrays;
                -o-animation-name: rangeOfGrays;
                animation-name: rangeOfGrays;

                -webkit-animation-duration: 50s;
                -moz-animation-duration: 50s;
                -o-animation-duration: 50s;        
                animation-duration: 50s;  

                -webkit-animation-iteration-count: 5;
                -moz-animation-iteration-count: 5;
                -o-animation-iteration-count: 5;
                animation-iteration-count: 5;
            }