@charset "utf-8";
/* CSS Document */
/* Released: 11th Oct 2014 - Beverley Hooton @ Focus on Function Web Design */
/* Updated: 27th October 2014 - IE7 support added via horizontal scrollbar to match IE8  */

/* #### - slider css below - #### */

#slider-outer { width:500px; } /* change padding to move arrows */
#slider { display:block; overflow:hidden;}
#slider-outer .slide-check { position:absolute; left:-9999px }

#slider .slides { /*width:500%*/ } /* #### (slides x 100) #### */
#slider .slides > div { /*width:20%;*/ /* #### (100 / slides) #### */
	float:left; overflow:hidden; position:relative; 
	-webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */
	-webkit-transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out
	}

#slider-outer .ctrl span, #slider-outer .arrows { font:1em/2em Arial; text-indent:0.1875em; text-align:center; position:absolute; display:none; z-index:9999; 
	bottom:1px; color:#fff; background:#222; width:2em; border-radius:2em; border:3px solid #fff; cursor:pointer; box-shadow:0 0 0 1px rgb(153,153,153)
	}
#slider-outer .ctrl { position:absolute; z-index:9998; bottom:1px; text-align:center; width:100%; margin-left:-1.25em }
#slider-outer .ctrl div { display:inline-block; margin:auto }
#slider-outer .ctrl span { float:left; position:relative; margin:0 0.25em -0.55em }
#slider-outer .ctrl .stop { display:block; font-weight:bold; text-indent:-0.1em; letter-spacing:-0.175em }
#slider-outer .ctrl span:hover, #slider-outer .arrows:hover { background:#666 }

/* #### - extra css for js enhancement - #### */
#slider-outer .ctrl { display:none }
.js #slider-outer .ctrl { display:inline }

/* #### - define ids of checked buttons/arrows here - #### */
#btn-goto-first:checked ~ #arrow-1, 
#btn-1:checked ~ #arrow-2, 
#btn-2:checked ~ #arrow-3,
#btn-3:checked ~ #arrow-4, 
#btn-4:checked ~ #arrow-5, 
#btn-5:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
	right:1px; display:block
	}

/* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */
#btn-2:checked ~ #arrow-1, 
#btn-3:checked ~ #arrow-2,
#btn-4:checked ~ #arrow-3, 
#btn-5:checked ~ #arrow-4, 
#btn-1:checked ~ #arrow-5 { /* #btn-1 always goes to last arrow */
	left:1px; display:block; 
	-webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg);
	}



/* - #### custom styles for slide content - #### */
#slider .slides > div > div { font-size:0.875em; padding:1.25em 2em }
#slider .slides img { float:left; margin-top:0.25em; margin-right:1em }
#slider .slides .title { display:inline-block; margin-bottom:0.75em }
#slider .slides .num { float:right; font-size:0.625em; color:#999 }
#slider .slides .more { text-align:right; font-size:0.875em }


@media ( max-width:30em ) { /* #### - make better use of space at 480px (480/16=30 - 16px being default browser font-size) - #### */
	#slider-outer { font-size:0.9375em; line-height:1.5em; padding:0 0 0 0; width:300px; }
	#slider-outer .ctrl { margin-left:0 }
	#slider-outer .ctrl span { margin-bottom:-0.4em }
	#slider .slides > div > div { padding:1em 0.75em 1.25em }
	#slider .slides .more { text-align:center }
}