.container {
    margin:0 auto;
    overflow:hidden;
    width:100%;
    }
           

#content-slider {
    width:100%;
    height:700px;
    margin:0 0 0 0;
    }
        
        
#slider {
    background:#21252B;
    height:700px;
    width:100%;
    margin: 0 0 0 0;
    overflow:visible;
    position:relative;
    }


#mask {
    overflow:hidden;
    height:700px;
    }
 
      
#slider ul {
    margin:0;
    padding:0;
    position:relative;
    }


#slider li {
    width:100%;
    height:700px;
    position:absolute;
    list-style:none;
    }







/*  SLIDER LIST ANIMATIONS - each one works on a 25 second cycle  */

#slider li.firstanimation {
        animation:cycleone 25s linear infinite;
        }
#slider li.secondanimation {
        animation:cycletwo 25s linear infinite;
        }
#slider li.thirdanimation {
        animation:cyclethree 25s linear infinite;
        }
#slider li.fourthanimation {
        animation:cyclefour 25s linear infinite;
        }
#slider li.fifthanimation {
        animation:cyclefive 25s linear infinite;
        }





@keyframes cycleone {
        0%  { left:0; }
        4%  { left:0; }
        16% { left:0; opacity:1; z-index:0; }
        20% { left:-945px; opacity:0; z-index:0; }
        21% { left:100%; opacity:0; z-index:-1; }
        50% { left:100%; opacity:0; z-index:-1; }
        92% { left:100%; opacity:0; z-index:0; }
        96% { left:100%; opacity:0; }
        100%{ left:0; opacity:1; }
        }

@keyframes cycletwo {
        0%  { left:100%; opacity:0; }
        16% { left:100%; opacity:0; }
        20% { left:0; opacity:1; }
        24% { left:0; opacity:1; }
        36% { left:0; opacity:1; z-index:0; }
        40% { left:-945px; opacity:0; z-index:0; }
        41% { left:100%; opacity:0; z-index:-1; }
        100%{ left:100%; opacity:0; z-index:-1; }
        }

@keyframes cyclethree {
        0%  { left:100%; opacity:0; }
        36% { left:100%; opacity:0; }
        40% { left:0; opacity:1; }
        44% { left:0; opacity:1; }
        56% { left:0; opacity:1; z-index:0; }
        60% { left:-945px; opacity:0; z-index:0; }
        61% { left:100%; opacity:0; z-index:-1; }
        100%{ left:100%; opacity:0; z-index:-1; }
        }

@keyframes cyclefour {
        0%  { left:100%; opacity:0; }
        56% { left:100%; opacity:0; }
        60% { left:0; opacity:1; }
        64% { left:0; opacity:1; }
        76% { left:0; opacity:1; z-index:0; }
        80% { left:-945px; opacity:0; z-index:0; }
        81% { left:100%; opacity:0; z-index:-1; }
        100%{ left:100%; opacity:0; z-index:-1; }
        }

@keyframes cyclefive {
        0%  { left:945px; opacity:0; }
        76% { left:945px; opacity:0; }
        80% { left:0; opacity:1; }
        84% { left:0; opacity:1; }
        96% { left:0; opacity:1; z-index:0; }
        100%{ left:-945px; opacity:0; z-index:0; }
        }