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

#slider-outer { 
	z-index:1;
	width:100%;
	margin:auto;
	position:relative;
	line-height:1.75em;
	padding:0;
} /* change padding to move arrows */
	
#slider {
	display:block;
	overflow:hidden;
	border:0px;
	}

#slider-outer .slide-check {
	display:none;
	position:absolute;
	left:0px;
}

#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 .9s ease-in-out; transition:transform .9s ease-in-out
	}

/*Esto mueve toda la botonera y da el estilo a los botones*/
#slider-outer .ctrl span{
	font:15px Arial;
	text-indent:0.1875em;
	text-align:center;
	position:relative;
	display:none;
	z-index:2; 
	bottom:50px;
	color:#fff;
	background:transparent;
	padding:6px 3px 0px 2px;
	cursor:pointer;
}


#slider-outer .arrows {
	font:1em/2em Arial;
	text-indent:0.1875em;
	text-align:center;
	position:absolute;
	display:none;
	z-index:2; 
	bottom:300px;
	color:#fff;
	background:rgba(0,0,0,0.7);
	width:50px;
	cursor:pointer;
	box-shadow:0 0 0 1px rgb(153,153,153)
	}
	
@media (max-width: 1799px) {
#slider-outer .arrows{
	bottom:250px;
}}

@media (max-width: 1600px) {
#slider-outer .arrows{
	bottom:250px;
}}

@media (max-width: 1500px) {
#slider-outer .arrows{
	bottom:250px;
}}

@media (max-width: 1450px) {
#slider-outer .arrows{
	bottom:200px;
}}

@media (max-width: 1300px) {
#slider-outer .arrows{
	bottom:150px;
}}

@media (max-width: 1250px) {
#slider-outer .arrows{
	bottom:10px;
}}
	
	
#slider .texto {
	font:13px Arial;
	text-align:center;
	position:absolute;
	z-index:2; 
	bottom:50px;
	height:auto;
	padding:5px 5px 5px 5px;
	color:#fff;
	background:rgba(0,0,0,0.5);
	width:100%;
}


#slider .num {
	font:13px Arial;
	text-align:center;
	position:absolute;
	right:20px;
	z-index:2; 
	bottom:90%;
	height:auto;
	padding:5px 5px 5px 5px;
	border-radius:10px;
	color:#fff;
	background:rgba(0,0,0,0.7);
	width:auto;}

	
/*Este mueve solo el boton de pausa*/
#slider-outer .ctrl { position:absolute; z-index:1; bottom:-40px; 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:absolute;}
#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:block}

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

/* #### - define ids of checked buttons/arrows here - (% increment per slide) - move slides when checked - #### */
#slider-outer #btn-1:checked ~ #slider .slides > div, #slider #btn-goto-first:checked ~ #slider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }
#slider-outer #btn-2:checked ~ #slider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0) }
#slider-outer #btn-3:checked ~ #slider .slides > div { -webkit-transform:translate(-200%,0); -ms-transform:translate(-200%,0); transform:translate(-200%,0) }
#slider-outer #btn-4:checked ~ #slider .slides > div { -webkit-transform:translate(-300%,0); -ms-transform:translate(-300%,0); transform:translate(-300%,0) }
#slider-outer #btn-5:checked ~ #slider .slides > div, #slider #btn-goto-last:checked ~ #slider .slides > div { -webkit-transform:translate(-400%,0); -ms-transform:translate(-400%,0); transform:translate(-400%,0) }