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


/* CONTENT SLIDER */
#content-slider {
        width:100%;
        height:250px;
        margin:0 0 0 0;
        }
        
        
        
/* SLIDER */
#slider {
        background:#FFF;
        height:250px;
        width:91%; /* overall width of image and border */
        margin: 0 auto;
        overflow:visible;
        position:relative;
        }
        



#mask {
        overflow:hidden;
        height:250px;
        width:100%;
        }
        
#slider ul {
        margin:0;
        padding:0;
        position:relative;
        }


#slider li {
        width:91%; /* picture is this percent of slider width starting at the left hand margin */
        height:250px;
        position:absolute;
        list-style:none;
        }



.toprounded {
        -moz-border-radius: 0px;
        -webkit-border-radius: 37px 37px 0px 0px;
        border-radius: 37px 37px 0px 0px;
        border:3px solid #1E698B;
        }



/*  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;
        }








/* THE TOOLTIP BAR */

#slider .tooltip {
        background:rgba(0,0,0,0.5);
        width:300px;
        height:60px;
        position:relative;
        bottom:75px;
        left:-320px;
        opacity: 0;
        -moz-transition:all 0.3s ease-in-out;
        -webkit-transition:all 0.3s ease-in-out;
        }
        
#slider .tooltip h1 {
        color:#fff;
        font-size:24px;
        font-weight:300;
        line-height:60px;
        padding:0 0 0 20px;
        }
        
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {left:0px; opacity:1;}



/*  UNCOMMENT TO MAKE THE SLIDESHOW AND PROGRESS FREEZE ON HOVER
#slider:hover li,
#slider:hover .progress-bar {
        -moz-animation-play-state:paused;
        -webkit-animation-play-state:paused;
        }
*/















/* 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   */

.cgeneral {
        position:absolute;
        top: 0px;
        left: 40px;
        width: 300px;
        background: #0453E8;
        opacity:0.7;
        z-index: 7;
        padding-top:6px;
        padding-left:6px;
        color: #FFF;
        font-size: 36px;
        font-weight: normal;
        font-family: 'Open Sans', Verdana, Arial, sans-serif;
        }

.c1 {
        -moz-animation:overlaytext1 25s ease-out infinite;
        -webkit-animation:overlaytext1 25s ease-out infinite;
        animation:overlaytext1 25s ease-out infinite;
        }
        
.c2 {
        -moz-animation:overlaytext2 25s ease-out infinite;
        -webkit-animation:overlaytext2 25s ease-out infinite;
        animation:overlaytext2 25s ease-out infinite;
        }

.c3 {
        -moz-animation:overlaytext3 25s ease-out infinite;
        -webkit-animation:overlaytext3 25s ease-out infinite;
        animation:overlaytext3 25s ease-out infinite;
        }

.c4 {
        -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: 250px; opacity:0.7;}
        20% { visibility:visible; height: 250px; 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:250px; opacity:0.7;}
        45% { visibility:visible; height:250px; 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:250px; opacity:0.7;}
        70% { visibility:visible; height:250px; 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: 250px; opacity:0.7;}
        90% { visibility:visible; height: 250px; 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: 250px; opacity:0.7;}
        20% { visibility:visible; height: 250px; 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:250px; opacity:0.7;}
        45% { visibility:visible; height:250px; 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:250px; opacity:0.7;}
        70% { visibility:visible; height:250px; 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: 250px; opacity:0.7;}
        90% { visibility:visible; height: 250px; 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: 250px; opacity:0.7;}
        20% { visibility:visible; height: 250px; 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:250px; opacity:0.7;}
        45% { visibility:visible; height:250px; 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:250px; opacity:0.7;}
        70% { visibility:visible; height:250px; 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: 250px; opacity:0.7;}
        90% { visibility:visible; height: 250px; opacity:0.7;}
        94% { visibility:visible; height: 0px; opacity:0;}
        95% { visibility:hidden; height:0px; }
        100% { visibility:hidden; height:0px; }
        }