/*
    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: 100%; min-width: 200px; max-width: 1020px; margin: 10px auto; padding: 0; position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;

 }

/* 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%; padding: 0; display: block;height:auto;cursor: pointer;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;visibilty:hidden;
}
/* pager 1*/
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;
}


.cycle-pager span { 
    font-family: arial; font-size: 16px; width: 16px; height: 16px; 
    display: inline-block; color:#999; border: solid 1px black;cursor: pointer;background:#999; margin-right:3px;
}
.cycle-pager span.cycle-pager-active { color:#cccccc;background:#cccccc;margin-right:3px;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
/*
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}
*/

/* overlay modded*/



.cycle-overlay { 
    position: absolute; z-index: 600;width:100%;top:20%;
     color: white; font-size:2em;line-height: 1.5em; 
}
.cycle-overlay a:link { color: white;text-decoration:none;}
.cycle-overlay a:visited { color: white;text-decoration:none;}
.cycle-overlay a:hover { color: white;text-decoration:underline;}

.cycle-overlay > div > span.black a:link { color: black;text-decoration:none;}
.cycle-overlay > div > span.black a:visited { color: black;text-decoration:none;} 
.cycle-overlay > div > span.black a:hover { color: black;text-decoration:underline;}

.cycle-overlay > div > span.notext a:link { display:none;text-decoration:none;}
.cycle-overlay > div > span.notext a:visited { display:none;text-decoration:none;} 
.cycle-overlay > div > span.notext a:hover { display:none;text-decoration:underline;}

.cycle-overlay > div > span.newsright a{  position: absolute;right:3em;width:25%;top:20%;}
.cycle-overlay  > div > span.newsleft a{  position: absolute;left:3em;width:25%;top:20%;} 

 .mobiledesigntoggle .cycle-overlay-text { 
    
    position: absolute; z-index: 600;width:100%;top:20%;bottom:0 !important;
     color: black; line-height: 1.0em;font-size:1em; height:auto;
}
 
 .mobiledesigntoggle.cycle-overlay-text > div > span.newsright a{  position: absolute;left:3em;width:100%;top:0%;bottom:0 !important;height:auto;}

 .mobiledesigntoggle .cycle-overlay-text  > div > span.newsleft a{  position: absolute;left:3em;width:100%;top:0%;bottom:0 !important;height:auto;}




/* .newsright .newscarouseltitle { position:absolute;top:20%;left:3em; width:30%;color:black; font-size:200%; line-height:1.5em;} */ /* 40px */
/*  .newsleft .newscarouseltitle { position:absolute;top:20%;left:3em; width:30%;color:black;font-size:200%;line-height:1.5em; } */

/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top:35%; opacity:0;   z-index: 800;  height:auto;cursor: pointer;font-size:400%; 
color:white;background: transparent; line-height:1.1em; }
.cycle-prev { left: 0%; }

.cycle-next { right: 0%;}
#carouselfwd { display:none; line-height:1.1em;padding:0px 0px 10px 0px;cursor: pointer;position:absolute; right:0%; top:35%; font-size:400%; color:white;background: transparent; 
/* fallback color   background: rgba(0, 0, 0, 0.7);*/
} 
.cycle-prev:hover, .cycle-next:hover { opacity:1;  }

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


/* display paused text on top of paused slideshow */
/*
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}
*/
/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/
@media (max-width: 640px) {

    .cycle-slideshow { width: 100%;margin-bottom:0px;}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }
    .cycle-pager {position: relative;margin-top:20px;}

  .cycle-overlay { 
    
    position: relative; z-index: 600;width:100%;
     color: black;line-height:1.0em;font-size:1em; overflow:hidden; text-align:left; }
.cycle-overlay > div > span.newsright a{  position: relative !important;left:1em !important;width:100% !important;text-align:left;color: black !important;} 
.cycle-overlay  > div > span.newsleft a{  position: relative !important;left:1em !important;width:100% !important;text-align:left;color: black !important;}

.cycle-prev, .cycle-next {top:25%;font-size:250%;}
}
 .mobiledesigntoggle .cycle-slideshow { width: 100%;margin-bottom:0px;}
  .mobiledesigntoggle .cycle-overlay { padding: 4px }
  .mobiledesigntoggle .cycle-caption { bottom: 4px; right: 4px }
  .mobiledesigntoggle .cycle-pager {position: relative;margin-top:20px;}

  .mobiledesigntoggle .cycle-overlay { 
    
    position: relative; z-index: 600;width:100%;
     color: black;line-height:1.0em;font-size:1em; overflow:hidden; text-align:left; }

 .mobiledesigntoggle .cycle-overlay > div > span.newsright a{  position: relative !important;left:1em !important;width:100% !important;bottom:0;text-align:left;color: black !important;} 

 .mobiledesigntoggle .cycle-overlay  > div > span.newsleft a{  position: relative !important;left:1em !important;width:100% !important;bottom:0;text-align:left;color: black !important;}

 .mobiledesigntoggle .cycle-prev, .mobiledesigntoggle .cycle-next {top:25%;font-size:250%;}
 
/* .mobiledesigntoggle.cycle-overlay > div > span.right a{  position: absolute;right:3em;width:30%;bottom:0;} */

/* .mobiledesigntoggle .cycle-overlay  > div > span.left a{  position: absolute;left:3em;width:30%;bottom:0;} */
}