/* LAYOUT */
.container {
        margin:0 auto;
        overflow:hidden;
        width:460px;
        }
        
        


/* CONTENT SLIDER */
#content-slider {
        width:100%;
        height:400px;
        margin:0 0 0 0;
        }
        
        
        
/* SLIDER */
#slider {
        background:#FFF;
        height:400px;
        width:460px;
        margin: 0 0 0 0;
        overflow:visible;
        position:relative;
        }


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


#slider li {
        width:460px;
        height:400px;
        position:absolute;
        list-style:none;
        }




.slideshowimg {
        border-style:none;
        }
        
.overlay {
        border-style:none;
        }






/* PROGRESS BAR - CHANGE THE VISIBILITY PROPERTY IF YOU WISH IT TO BE SEEN */

.progress-bar {
        visibility : hidden;
        position:relative;
        top:-5px;
        width:460px;
        height:5px;
        background:#000;
        -moz-animation:fullexpand 25s ease-out infinite;
        -webkit-animation:fullexpand 25s ease-out infinite;
        }








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

#slider li.s1 {
        -moz-animation:cycle 25s linear infinite;
        -webkit-animation:cycle 25s linear infinite;
        animation:cycle 25s linear infinite;
        }
#slider li.s2 {
        -moz-animation:cycletwo 25s linear infinite;
        -webkit-animation:cycletwo 25s linear infinite;
        animation:cycletwo 25s linear infinite;
        }
#slider li.s3 {
        -moz-animation:cyclethree 25s linear infinite;
        -webkit-animation:cyclethree 25s linear infinite;
        animation:cyclethree 25s linear infinite;
        }
#slider li.s4 {
        -moz-animation:cyclefour 25s linear infinite;
        -webkit-animation:cyclefour 25s linear infinite;
        animation:cyclefour 25s linear infinite;
        }
#slider li.s5 {
        -moz-animation:cyclefive 25s linear infinite;
        -webkit-animation:cyclefive 25s linear infinite;
        animation:cyclefive 25s linear infinite;
        }








/* ANIMATION */

@-moz-keyframes cycle {
        0%  { left:0px; }
        4%  { left:0px; }
        16% { left:0px; opacity:1; z-index:1; }
        20% { left:-460px; opacity:0; z-index:1; }
        21% { left:460px; opacity:0; z-index:0; }
        50% { left:460px; opacity:0; z-index:0; }
        92% { left:460px; opacity:0; z-index:1; }
        96% { left:460px; opacity:0; }
        100%{ left:0px; opacity:1; }
        }
        
@-moz-keyframes cycletwo {
        0%  { left:460px; opacity:0; }
        16% { left:460px; opacity:0; }
        20% { left:0px; opacity:1; }
        24% { left:0px; opacity:1; }
        36% { left:0px; opacity:1; z-index:1; }
        40% { left:-460px; opacity:0; z-index:1; }
        41% { left:460px; opacity:0; z-index:0; }
        100%{ left:460px; opacity:0; z-index:0; }
        }
        
@-moz-keyframes cyclethree {
        0%  { left:460px; opacity:0; }
        36% { left:460px; opacity:0; }
        40% { left:0px; opacity:1; }
        44% { left:0px; opacity:1; }
        56% { left:0px; opacity:1; z-index:1; }
        60% { left:-460px; opacity:0; z-index:1; }
        61% { left:460px; opacity:0; z-index:0; }
        100%{ left:460px; opacity:0; z-index:0; }
        }
        
@-moz-keyframes cyclefour {
        0%  { left:460px; opacity:0; }
        56% { left:460px; opacity:0; }
        60% { left:0px; opacity:1; }
        64% { left:0px; opacity:1; }
        76% { left:0px; opacity:1; z-index:1; }
        80% { left:-460px; opacity:0; z-index:1; }
        81% { left:460px; opacity:0; z-index:0; }
        100%{ left:460px; opacity:0; z-index:0; }
        }
        
@-moz-keyframes cyclefive {
        0%  { left:460px; opacity:0; z-index:0;}
        76% { left:460px; opacity:0; }
        80% { left:0px; opacity:1; }
        84% { left:0px; opacity:1; }
        96% { left:0px; opacity:1; z-index:1; }
        100%{ left:-460px; opacity:0; z-index:1; }
        }







/*    NOW ALL OVER AGAIN FOR CHROME AND SAFARI    */

@-webkit-keyframes cycle {
        0%  { left:0px; }
        4%  { left:0px; }
        16% { left:0px; opacity:1; z-index:1; }
        20% { left:-460px; opacity:0; z-index:1; }
        21% { left:460px; opacity:0; z-index:0; }
        50% { left:460px; opacity:0; z-index:0; }
        92% { left:460px; opacity:0; z-index:1; }
        96% { left:460px; opacity:0; }
        100%{ left:0px; opacity:1; }
        }
        
@-webkit-keyframes cycletwo {
        0%  { left:460px; opacity:0; }
        16% { left:460px; opacity:0; }
        20% { left:0px; opacity:1; }
        24% { left:0px; opacity:1; }
        36% { left:0px; opacity:1; z-index:1; }
        40% { left:-460px; opacity:0; z-index:1; }
        41% { left:460px; opacity:0; z-index:0; }
        100%{ left:460px; opacity:0; z-index:0; }
        }
        
@-webkit-keyframes cyclethree {
        0%  { left:460px; opacity:0; }
        36% { left:460px; opacity:0; }
        40% { left:0px; opacity:1; }
        44% { left:0px; opacity:1; }
        56% { left:0px; opacity:1; z-index:1; }
        60% { left:-460px; opacity:0; z-index:1; }
        61% { left:460px; opacity:0; z-index:0; }
        100%{ left:460px; opacity:0; z-index:0; }
        }
        
@-webkit-keyframes cyclefour {
        0%  { left:460px; opacity:0; }
        56% { left:460px; opacity:0; }
        60% { left:0px; opacity:1; }
        64% { left:0px; opacity:1; }
        76% { left:0px; opacity:1; z-index:1; }
        80% { left:-460px; opacity:0; z-index:1; }
        81% { left:460px; opacity:0; z-index:0; }
        100%{ left:460px; opacity:0; z-index:0; }
        }
        
@-webkit-keyframes cyclefive {
        0%  { left:460px; opacity:0; z-index:0;}
        76% { left:460px; opacity:0; }
        80% { left:0px; opacity:1; }
        84% { left:0px; opacity:1; }
        96% { left:0px; opacity:1; z-index:1; }
        100%{ left:-460px; opacity:0; z-index:1; }
        }






/*    NOW ALL OVER AGAIN FOR IE    */

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

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

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

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

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