/* 
    Document   : cycler-slider-css
    Created on : Jan 27, 2014, 5:45:14 PM
    Author     : Aleksandar Silovski
    Description:
*/



.cycle-container {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.cycler-container {
    height: 300px;
    width: 660px;
    overflow: hidden;
}
.cycle-slideshow-thumb {
    height: 290px;
    max-width: 440px;
    margin: 3px;
}

/*cycler-generates extra dots (doubles) - dont show 11 to 20*/
.cycle-pager span:nth-child(n+11) {
    display: none;
}
    
.cycle-title, .cycle-img {
    display: inline-block;
}

.cycle-title {
    width: 200px;
    padding: 5px;
    /*vertical-align: top;*/
    position: relative;
    bottom: 5rem;
}
.cycle-title .entry-title {
    border-left: 0 solid #FFFFFF;
    line-height: normal;
    font-size: 11px;
    bottom: 5rem;
    text-align: center;
   
}
.cycle-title .entry-title a {
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;

}
.cycle-slideshow .byline {
    text-align: center;
}

/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/

/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { 
    width: 99%; 
    min-width: 200px; 
    max-width: 650px; 
    margin: 4px auto; 
    padding: 0; 
    position: relative;
    /*background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;*/
    background-color: #252525;
    height: 300px;

 }
 
/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
     
/*    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content*/
    
    position: absolute; top: 0; left: 0;
    width: 100%; 
    max-width:440px;
    padding: 0; 
    display: inline-block;
}

 /*in case script does not load*/ 
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

 /*pager*/ 
.cycle-pager { 
    /*text-align: center;*/ 
    /*width: 100%;*/ 
    width: 200px;
    z-index: 500; 
    position: absolute; 
    bottom: 10px; 
    bottom: 10px;
    overflow: hidden;
    text-align: center;
}
.cycle-pager span { 
    font-family: arial; 
    font-size: 40px; 
    width: 15px; 
    height: 15px; 
    display: inline-block; 
    color: #ddd; 
    cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #888888;}
.cycle-pager > * { cursor: pointer;}


 /*prev / next links*/ 
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 200px;  background: url(/wp-content/plugins/cycler-slider/img/nav-prev.png) 25% 50% no-repeat;}
.cycle-next { right: 0; background: url(/wp-content/plugins/cycler-slider/img/nav-next.png) 75% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

.disabled { opacity: .5; filter:alpha(opacity=50); }