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


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


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


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







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

#slider li.firstanimation {
        -moz-animation:cycle 25s ease-out infinite;
        -webkit-animation:cycle 25s ease-out infinite;
        animation:cycle 25s ease-out infinite;
        }
#slider li.secondanimation {
        -moz-animation:cycle2 25s ease-out infinite;
        -webkit-animation:cycle2 25s ease-out infinite;
        animation:cycle2 25s ease-out infinite;
        }
#slider li.thirdanimation {
        -moz-animation:cycle3 25s ease-out infinite;
        -webkit-animation:cycle3 25s ease-out infinite;
        animation:cycle3 25s ease-out infinite;
        }
#slider li.fourthanimation {
        -moz-animation:cycle4 25s ease-out infinite;
        -webkit-animation:cycle4 25s ease-out infinite;
        animation:cycle4 25s ease-out infinite;
        }

















/* ANIMATION */




@-moz-keyframes cycle {
        0%  { opacity:1; z-index:7;}
        20% { opacity:1; z-index:7;}
        25% { opacity:0 z-index: 7; }
        26% { opacity:0; z-index:-1;}
        95% { opacity:0; z-index: 7;}
        100% {opacity:1; z-index: 7;}
        }

@-moz-keyframes cycle2 {
        0%  { opacity:0; z-index:-1;}
        20% { opacity:0; z-index:7;}
        25% { opacity:1 z-index: 7; }
        45% { opacity:1; z-index:7;}
        50% { opacity:0; z-index: 7;}
        51% { opacity:0; z-index: -1;}
        100% {opacity:0; z-index: -1;}
        }

@-moz-keyframes cycle3 {
        0%  { opacity:0; z-index:-1;}
        45% { opacity:0; z-index:7;}
        50% { opacity:1 z-index: 7; }
        70% { opacity:1; z-index:7;}
        75% { opacity:0; z-index: 7;}
        76% { opacity:0; z-index: -1;}
        100% {opacity:0; z-index: -1;}
         }

@-moz-keyframes cycle4 {
        0%  { opacity:0; z-index:-1;}
        1% {opacity:0; z-index:-1;}
        70% { opacity:0; z-index:7;}
        75% { opacity:1 z-index: 7; }
        95% { opacity:1; z-index:7;}
        100% { opacity:0; z-index: 7;}
         }






@-webkit-keyframes cycle {
        0%  { opacity:1; z-index:7;}
        20% { opacity:1; z-index:7;}
        25% { opacity:0 z-index: 7; }
        26% { opacity:0; z-index:-1;}
        95% { opacity:0; z-index: 7;}
        100% {opacity:1; z-index: 7;}
        }

@-webkit-keyframes cycle2 {
        0%  { opacity:0; z-index:-1;}
        20% { opacity:0; z-index:7;}
        25% { opacity:1 z-index: 7; }
        45% { opacity:1; z-index:7;}
        50% { opacity:0; z-index: 7;}
        51% { opacity:0; z-index: -1;}
        100% {opacity:0; z-index: -1;}
        }

@-webkit-keyframes cycle3 {
        0%  { opacity:0; z-index:-1;}
        45% { opacity:0; z-index:7;}
        50% { opacity:1 z-index: 7; }
        70% { opacity:1; z-index:7;}
        75% { opacity:0; z-index: 7;}
        76% { opacity:0; z-index: -1;}
        100% {opacity:0; z-index: -1;}
         }

@-webkit-keyframes cycle4 {
        0%  { opacity:0; z-index:-1;}
        1% {opacity:0; z-index:-1;}
        70% { opacity:0; z-index:7;}
        75% { opacity:1 z-index: 7; }
        95% { opacity:1; z-index:7;}
        100% { opacity:0; z-index: 7;}
         }







@keyframes cycle {
        0%  { opacity:1; z-index:7;}
        20% { opacity:1; z-index:7;}
        25% { opacity:0 z-index: 7; }
        26% { opacity:0; z-index:-1;}
        95% { opacity:0; z-index: 7;}
        100% {opacity:1; z-index: 7;}
        }

@keyframes cycle2 {
        0%  { opacity:0; z-index:-1;}
        20% { opacity:0; z-index:7;}
        25% { opacity:1 z-index: 7; }
        45% { opacity:1; z-index:7;}
        50% { opacity:0; z-index: 7;}
        51% { opacity:0; z-index: -1;}
        100% {opacity:0; z-index: -1;}
        }

@keyframes cycle3 {
        0%  { opacity:0; z-index:-1;}
        45% { opacity:0; z-index:7;}
        50% { opacity:1 z-index: 7; }
        70% { opacity:1; z-index:7;}
        75% { opacity:0; z-index: 7;}
        76% { opacity:0; z-index: -1;}
        100% {opacity:0; z-index: -1;}
         }

@keyframes cycle4 {
        0%  { opacity:0; z-index:-1;}
        1% {opacity:0; z-index:-1;}
        70% { opacity:0; z-index:7;}
        75% { opacity:1 z-index: 7; }
        95% { opacity:1; z-index:7;}
        100% { opacity:0; z-index: 7;}
         }

















/*   THE OVERLAY TEXT ANIMATIONS   */

.c1 {   position:absolute;
        top: 0px;
        left: 0px;
        width: 300px;
        background: #646466;
        z-index: 7;
        -moz-animation:overlaytext1 25s ease-out infinite;
        -webkit-animation:overlaytext1 25s ease-out infinite;
        animation:overlaytext1 25s ease-out infinite;
        }
        
.c2 {   position:absolute;
        top: 0px;
        left: 0px;
        width: 300px;
        background: #646466;
        opacity:0.7;
        z-index: 7;
        -moz-animation:overlaytext2 25s ease-out infinite;
        -webkit-animation:overlaytext2 25s ease-out infinite;
        animation:overlaytext2 25s ease-out infinite;
        }

.c3 {   position:absolute;
        top: 0px;
        left: 0px;
        width: 300px;
        opacity:0.7;
        background: #646466;
        z-index: 7;
        -moz-animation:overlaytext3 25s ease-out infinite;
        -webkit-animation:overlaytext3 25s ease-out infinite;
        animation:overlaytext3 25s ease-out infinite;
        }

.c4 {   position:absolute;
        top: 0px;
        left: 0px;
        width: 300px;
        opacity:0.7;
        background: #646466;
        z-index: 7;
        -moz-animation:overlaytext4 25s ease-out infinite;
        -webkit-animation:overlaytext4 25s ease-out infinite;
        animation:overlaytext4 25s ease-out infinite;
        }












@-moz-keyframes overlaytext1 {
        0%  { visibility:hidden; height: 0px; opacity:0;}
        1%  { visibility:hidden; height: 0px; opacity:0;}
        5% { visibility:visible; height: 60px; opacity:0.7;}
        20% { visibility:visible; height: 60px; opacity:0.7;}
        24% { visibility:visible; height: 0px; opacity:0;}
        25% { visibility:hidden; height: 0px; opacity:0;}
        100% { visibility:hidden; height: 0px; opacity:0;}
        }
        
@-moz-keyframes overlaytext2 {
        0%  { visibility:hidden; height: 0px; }
        25% { visibility:hidden; height:0px; }
        26% { visibility:visible; height:0px; opacity:0;}
        30% { visibility:visible; height:60px; opacity:0.7;}
        45% { visibility:visible; height:60px; opacity:0.7;}
        49% { visibility:visible; height:0px; opacity:0;}
        50% { visibility:hidden; height: 0px; }
        100% { visibility:hidden; height:0px; }
        }

@-moz-keyframes overlaytext3 {
        0%  { visibility:hidden; height: 0px; }
        50% { visibility:hidden; height:0px; }
        51% { visibility:visible; height:0px; opacity:0;}
        55% { visibility:visible; height:60px; opacity:0.7;}
        70% { visibility:visible; height:60px; opacity:0.7;}
        74% { visibility:visible; height:0px; opacity:0;}
        75% { visibility:hidden; height: 0px; }
        100% { visibility:hidden; height:0px; }
        }


@-moz-keyframes overlaytext4 {
        0%  { visibility:hidden; height:0px; }
        75% { visibility:hidden; height: 0px; }
        76% { visibility:visible; height: 0px; opacity:0;}
        80% { visibility:visible; height: 60px; opacity:0.7;}
        90% { visibility:visible; height: 60px; opacity:0.7;}
        94% { visibility:visible; height: 0px; opacity:0;}
        95% { visibility:hidden; height:0px; }
        100% { visibility:hidden; height:0px; }
        }

        

        
        
        
@-webkit-keyframes overlaytext1 {
        0%  { visibility:hidden; height: 0px; opacity:0;}
        1%  { visibility:hidden; height: 0px; opacity:0;}
        5% { visibility:visible; height: 60px; opacity:0.7;}
        20% { visibility:visible; height: 60px; opacity:0.7;}
        24% { visibility:visible; height: 0px; opacity:0;}
        25% { visibility:hidden; height: 0px; opacity:0;}
        100% { visibility:hidden; height: 0px; opacity:0;}
        }
        
@-webkit-keyframes overlaytext2 {
        0%  { visibility:hidden; height: 0px; }
        25% { visibility:hidden; height:0px; }
        26% { visibility:visible; height:0px; opacity:0;}
        30% { visibility:visible; height:60px; opacity:0.7;}
        45% { visibility:visible; height:60px; opacity:0.7;}
        49% { visibility:visible; height:0px; opacity:0;}
        50% { visibility:hidden; height: 0px; }
        100% { visibility:hidden; height:0px; }
        }

@-webkit-keyframes overlaytext3 {
        0%  { visibility:hidden; height: 0px; }
        50% { visibility:hidden; height:0px; }
        51% { visibility:visible; height:0px; opacity:0;}
        55% { visibility:visible; height:60px; opacity:0.7;}
        70% { visibility:visible; height:60px; opacity:0.7;}
        74% { visibility:visible; height:0px; opacity:0;}
        75% { visibility:hidden; height: 0px; }
        100% { visibility:hidden; height:0px; }
        }

         
@-webkit-keyframes overlaytext4 {
        0%  { visibility:hidden; height:0px; }
        75% { visibility:hidden; height: 0px; }
        76% { visibility:visible; height: 0px; opacity:0;}
        80% { visibility:visible; height: 60px; opacity:0.7;}
        90% { visibility:visible; height: 60px; opacity:0.7;}
        94% { visibility:visible; height: 0px; opacity:0;}
        95% { visibility:hidden; height:0px; }
        100% { visibility:hidden; height:0px; }
        }




         

@keyframes overlaytext1 {
        0%  { visibility:hidden; height: 0px; opacity:0;}
        1%  { visibility:hidden; height: 0px; opacity:0;}
        5% { visibility:visible; height: 60px; opacity:0.7;}
        20% { visibility:visible; height: 60px; opacity:0.7;}
        24% { visibility:visible; height: 0px; opacity:0;}
        25% { visibility:hidden; height: 0px; opacity:0;}
        100% { visibility:hidden; height: 0px; opacity:0;}
        }

@keyframes overlaytext2 {
        0%  { visibility:hidden; height: 0px; }
        25% { visibility:hidden; height:0px; }
        26% { visibility:visible; height:0px; opacity:0;}
        30% { visibility:visible; height:60px; opacity:0.7;}
        45% { visibility:visible; height:60px; opacity:0.7;}
        49% { visibility:visible; height:0px; opacity:0;}
        50% { visibility:hidden; height: 0px; }
        100% { visibility:hidden; height:0px; }
        }

@keyframes overlaytext3 {
        0%  { visibility:hidden; height: 0px; }
        50% { visibility:hidden; height:0px; }
        51% { visibility:visible; height:0px; opacity:0;}
        55% { visibility:visible; height:60px; opacity:0.7;}
        70% { visibility:visible; height:60px; opacity:0.7;}
        74% { visibility:visible; height:0px; opacity:0;}
        75% { visibility:hidden; height: 0px; }
        100% { visibility:hidden; height:0px; }
        }

@keyframes overlaytext4 {
        0%  { visibility:hidden; height:0px; }
        75% { visibility:hidden; height: 0px; }
        76% { visibility:visible; height: 0px; opacity:0;}
        80% { visibility:visible; height: 60px; opacity:0.7;}
        90% { visibility:visible; height: 60px; opacity:0.7;}
        94% { visibility:visible; height: 0px; opacity:0;}
        95% { visibility:hidden; height:0px; }
        100% { visibility:hidden; height:0px; }
        }