/*! Sheet Slider 1.02 | Daniel Abel - http://zkreations.com | Free to use under terms of MIT license */
.sheet-slider {
    font-size: 16px;
    line-height: 1.5;
    z-index: 30;
    position: relative;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    background: #263238;
}
/*Se aplica para todo dentro del slider*/
.sheet-slider * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*
=>Algunas estilos para comenzar
*/
.sheet-slider > input {display: none;}
.sheet-slider img {width: 100%;display: block;max-width: none;background: none;padding: 0;margin: 0;border: 0;    border-radius: 0;}
.sheet-slider li.tab {display:block;}
.sheet-slider .sh-btns {bottom: 0;left: 0;margin: 0 auto;position: absolute;right: 0;}

/*Todas las reglas que usan animacion estaran aqui*/
.sheet-slider ul {
   -moz-transition: left .7s cubic-bezier(0.54, 0, 0.1, 1);
   -ms-transition: left .7s cubic-bezier(0.54, 0, 0.1, 1);
   -o-transition: left .7s cubic-bezier(0.54, 0, 0.1, 1);
   -webkit-transition: left .7s cubic-bezier(0.54, 0, 0.1, 1);
   transition: left .7s cubic-bezier(0.54, 0, 0.1, 1);
}
.sh-arrows, .sh-arrows label {
   -moz-transition: opacity .3s, right .3s, width .5s;
   -ms-transition: opacity .3s, right .3s, width .5s;
   -o-transition: opacity .3s, right .3s, width .5s;
   -webkit-transition: opacity .3s, right .3s, width .5s;
   transition: opacity .3s, right .3s, width .5s;
}
li.tab > div {
   -moz-transition: opacity .7s ease .5s, top .7s ease .5s;
   -ms-transition: opacity .7s ease .5s, top .7s ease .5s;
   -o-transition: opacity .7s ease .5s, top .7s ease .5s;
   -webkit-transition: opacity .7s ease .5s, top .7s ease .5s;
   transition: opacity .7s ease .5s, top .7s ease .5s;
}
/*
=>Ahora si, lo que nos interesa
*/
.sheet-slider ul {
    position: relative;
    height: 540px;
}
.sheet-slider ul > li.tab {
    position: absolute;
    top: 0;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    bottom: 0;
}

.sheet-slider ul.sty2 {
    position: relative;
	height: 496px;
}
.sheet-slider ul.sty2 > li.tab {
	border: 7px solid #fff;
}
.sheet-slider ul.sty2 > li.tab > div {
	text-shadow: none;
}

.sheet-slider ul.sty3 {
    position: relative;
	height: 700px;
}
.sheet-slider ul.sty3 > li.tab > div {
	text-shadow: none;
}

.sheet-slider ul.sty4 {
    position: relative;
	height: 700px;
}

/*estilo para textos*/
.sheet-slider li.tab > div {
    left: 0;
    top: 1em;
    position: absolute;
    padding-left: 3.5em;
    padding-top: 3em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.16);
    max-width: 80%;
    opacity: 0;
}
/*.sheet-slider li.tab > div a {color: #009688;font-weight: 500;text-decoration: none;}
.sheet-slider li.tab > div a:hover {color: #4DB6AC;text-decoration: none;}
.sheet-slider li.tab > div h3 {font-size: 2em;margin: 0;font-weight: 700;}
.sheet-slider li.tab > div span {font-size: 1.1em;font-weight: 500;}*/
/*para los botones*/
.sheet-slider .sh-btns {
    width: 100%;
    z-index: 35;
    padding: 0 3em;
    /*Soporte para flex*/
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    /*direction*/
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    /*justify*/
    -webkit-justify-content: space-between;
       -moz-justify-content: space-between;
            justify-content: space-between;
}
.sheet-slider .sh-btns label {
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    margin: 0 2px;
    height: 7px;
    -webkit-flex-basis: 0px;
       -moz-flex-basis: 0px;
            flex-basis: 0px;
    -webkit-flex-grow: 1;
       -moz-flex-grow: 1;
            flex-grow: 1;

}
.sheet-slider .sh-btns label:hover {background-color: rgba(255, 255, 255, 0.95);}
/*y para las flechas*/
.sheet-slider .sh-arrows {
    position: absolute;
    right: -140px;
    z-index: 40;
    width: auto;
    bottom: calc(3em + 7px);
    opacity: 0;
}
.sheet-slider:hover .sh-arrows {opacity: 1;right: 0}
.sheet-slider .sh-arrows label {
    background-color: rgba(255, 255, 255, 0.8);
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    display: none;
    height: 60px;
    position: relative;
    width: 70px;
}
.sheet-slider .sh-arrows label:hover {background-color: rgba(255, 255, 255, 0.95);width: 80px;}
/*
=>Para que el slider funcione debemos...
*/
/*Especificar un maximo de 8 imagenes, se pueden agregar o quitar "slides" del css siguiendo la misma lógica*/
.sheet-slider ul > li:nth-child(1) {left: 0;}
.sheet-slider ul > li:nth-child(2) {left: 100%;}
.sheet-slider ul > li:nth-child(3) {left: 200%;}
.sheet-slider ul > li:nth-child(4) {left: 300%;}
.sheet-slider ul > li:nth-child(5) {left: 400%;}
.sheet-slider ul > li:nth-child(6) {left: 500%;}
.sheet-slider ul > li:nth-child(7) {left: 600%;}
.sheet-slider ul > li:nth-child(8) {left: 700%;}

/*segun el estado del input, el contenedor (ul) se desplaza un porcentaje*/
#s1:checked ~ ul {left: 0;}
#s2:checked ~ ul {left: -100%;}
#s3:checked ~ ul {left: -200%;}
#s4:checked ~ ul {left: -300%;}
#s5:checked ~ ul {left: -400%;}
#s6:checked ~ ul {left: -500%;}
#s7:checked ~ ul {left: -600%;}
#s8:checked ~ ul {left: -700%;}

/*basado en lo anterior, el texto aparece o no*/
#s1:checked ~ ul > li:nth-child(1) > div,
#s2:checked ~ ul > li:nth-child(2) > div,
#s3:checked ~ ul > li:nth-child(3) > div,
#s4:checked ~ ul > li:nth-child(4) > div,
#s5:checked ~ ul > li:nth-child(5) > div,
#s6:checked ~ ul > li:nth-child(6) > div,
#s7:checked ~ ul > li:nth-child(7) > div,
#s8:checked ~ ul > li:nth-child(8) > div {opacity: 1;top: 0;}

/*los botones se pintan*/
#s1:checked ~ .sh-btns label:nth-child(1),
#s2:checked ~ .sh-btns label:nth-child(2),
#s3:checked ~ .sh-btns label:nth-child(3),
#s4:checked ~ .sh-btns label:nth-child(4),
#s5:checked ~ .sh-btns label:nth-child(5),
#s6:checked ~ .sh-btns label:nth-child(6),
#s7:checked ~ .sh-btns label:nth-child(7),
#s8:checked ~ .sh-btns label:nth-child(8) {background-color: #009688;}

/*y las flechas aparecen*/
/*Flecha derecha*/
#s1:checked ~ .sh-arrows label:nth-child(2),
#s2:checked ~ .sh-arrows label:nth-child(3),
#s3:checked ~ .sh-arrows label:nth-child(4),
#s4:checked ~ .sh-arrows label:nth-child(5),
#s5:checked ~ .sh-arrows label:nth-child(6),
#s6:checked ~ .sh-arrows label:nth-child(7),
#s7:checked ~ .sh-arrows label:nth-child(8),
#s2:checked:last-of-type ~ .sh-arrows label:nth-child(1),
#s3:checked:last-of-type ~ .sh-arrows label:nth-child(1),
#s4:checked:last-of-type ~ .sh-arrows label:nth-child(1),
#s5:checked:last-of-type ~ .sh-arrows label:nth-child(1),
#s6:checked:last-of-type ~ .sh-arrows label:nth-child(1),
#s7:checked:last-of-type ~ .sh-arrows label:nth-child(1),
#s8:checked:last-of-type ~ .sh-arrows label:nth-child(1) {
   background-image: url(arrow/right1x.png);
   display: block;
   float: right;
}
/*Flecha izquierda*/
#s1:checked ~ #s2:last-of-type ~ .sh-arrows label:nth-child(2),
#s1:checked ~ #s3:last-of-type ~ .sh-arrows label:nth-child(3),
#s1:checked ~ #s4:last-of-type ~ .sh-arrows label:nth-child(4),
#s1:checked ~ #s5:last-of-type ~ .sh-arrows label:nth-child(5),
#s1:checked ~ #s6:last-of-type ~ .sh-arrows label:nth-child(6),
#s1:checked ~ #s7:last-of-type ~ .sh-arrows label:nth-child(7),
#s1:checked ~ #s8:last-of-type ~ .sh-arrows label:nth-child(8),
#s2:checked ~ .sh-arrows label:nth-child(1),
#s3:checked ~ .sh-arrows label:nth-child(2),
#s4:checked ~ .sh-arrows label:nth-child(3),
#s5:checked ~ .sh-arrows label:nth-child(4),
#s6:checked ~ .sh-arrows label:nth-child(5),
#s7:checked ~ .sh-arrows label:nth-child(6),
#s8:checked ~ .sh-arrows label:nth-child(7) {
   background-image: url(arrow/left1x.png);
   display: block;
   float: left;
}

@media only screen and (min-width: 991px) and (max-width: 1169px){
.sheet-slider ul.sty2 {
	height: 411px;
}
.sheet-slider ul.sty4 {
	height: 500px;
}
}

@media only screen and (max-width: 840px) {
.sheet-slider {font-size: 14px;}
.sheet-slider ul {height: 350px;}

.sheet-slider ul.sty2 {
	height: 317px;
}
.sheet-slider.sty3 {
	height: 540px;
}
.sheet-slider ul.sty4 {
	height: 400px;
}
}
@media only screen and (max-width: 730px) {
.sheet-slider {font-size: 13px;}
.sheet-slider ul {height: 280px;}
.sheet-slider .sh-arrows {right: 0;opacity: 1;bottom: 0;}
.sheet-slider .sh-btns {display: none;}
.sheet-slider li.tab > div {padding-left: 2em;padding-top: 1.5em;}

.sheet-slider ul.sty2 {
	height: 270px;
}

}
@media only screen and (max-width: 620px) {
.sheet-slider li.tab > div {display: none;}
.sheet-slider ul {height: 240px;}
}
@media only screen and (max-width: 510px) {
.sheet-slider img {height: 100%;min-width: 100%;width: auto;}
.sheet-slider.sty3 {
	height: 340px;
}
.sheet-slider.sty3 ul {
    height: 100%;
}
}