/*! Cream Slider 1.02 | Daniel Abel - http://zkreations.com | Free to use under terms of MIT license */
.cream-slider-3 {
    font-size: 14px;
    line-height: 1.5;
    z-index: 30;
    position: relative;
    margin: 0 auto;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    background: #263238;
    color: #fff;
}
/*Se aplica para todo dentro del slider*/
.cream-slider-3 * {
    box-sizing: border-box;
}
/*
=>Algunas estilos para comenzar
*/
.cream-slider-3 > input {display: none;}
.cream-slider-3 > ul > li.tab > img {height: 100%;display: block;max-width: none;background: none;padding: 0;margin: 0;border: 0;border-radius: 0;}
.cream-slider-3 > ul > li.tab {padding: 0;margin: 0;list-style-type: none;}
.cream-slider-3 > ul {padding: 0;margin: 0;list-style-type: none;}
/*transition*/
.cream-slider-3 ul > li.tab {
   -webkit-transition: flex .6s cubic-bezier(0.54, 0, 0.1, 1);
   -webkit-transition: -webkit-box-flex .6s cubic-bezier(0.54, 0, 0.1, 1);
   transition: -webkit-box-flex .6s cubic-bezier(0.54, 0, 0.1, 1);
   transition: flex .6s cubic-bezier(0.54, 0, 0.1, 1);
   transition: flex .6s cubic-bezier(0.54, 0, 0.1, 1), -webkit-box-flex .6s cubic-bezier(0.54, 0, 0.1, 1), -ms-flex .6s cubic-bezier(0.54, 0, 0.1, 1);
}
li.tab > div {
   -webkit-transition: opacity 0s ease .5s, transform .3s ease 0s;
   -webkit-transition: opacity .3s ease 0s, transform .3s ease 0s;
   -webkit-transition: opacity .3s ease 0s, -webkit-transform .3s ease 0s;
   transition: opacity .3s ease 0s, -webkit-transform .3s ease 0s;
   transition: opacity .3s ease 0s, transform .3s ease 0s;
   transition: opacity .3s ease 0s, transform .3s ease 0s, -webkit-transform .3s ease 0s;
}
/*
=>Ahora si, lo que nos interesa
*/
.cream-slider-3 > ul {
    overflow: hidden; 
    position: relative;
    height: 420px;
    box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.3), 0 1px 0px 0px rgba(0, 0, 0, 0.05);
    /*soporte para flex*/
    display: -moz-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*justify*/
    -moz-justify-content: flex-start;
         -webkit-box-pack: start;
             -ms-flex-pack: start;
            justify-content: flex-start;
    /*align*/
    -moz-align-items: flex-start;
         -webkit-box-align: start;
             -ms-flex-align: start;
            align-items: flex-start;
}
/*Estilos para cada slide*/
.cream-slider-3 > ul > li.tab {
    height: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 5px solid transparent;
    box-shadow: -2px 0px 2px -1px rgba(0, 0, 0, 0.4), 0 1px 0px 0px rgba(0, 0, 0, 0.05);
    -ms-flex-preferred-size: 0px;
        flex-basis: 0px;
    -moz-flex-grow: 1;
         -webkit-box-flex: 1;
             -ms-flex-positive: 1;
            flex-grow: 1;
}
/*para textos*/
.cream-slider-3 > ul > li.tab > div {
    left: 0;
    -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
    bottom: 0;
    position: absolute;
    padding: 0 3em 2.5em;
    width: 100%;
    opacity: 0;
    white-space: nowrap;
}
.cream-slider-3 > ul > li.tab > div a {color: #FFF;font-weight: 400;text-decoration: none;}
.cream-slider-3 > ul > li.tab > div a:hover {color: #FFDD15;text-decoration: none;}
.cream-slider-3 > ul > li.tab > div h3 {
	font-family: 'robotoregular';
    font-size: 16px;
    margin: 2px;
    padding: 0.25em 0.6em 0.2em;
    background: #000;
    
    color: #FFDD15;
    font-weight: 500;
}
.cream-slider-3 li.tab > div span {
    font-size: 30px;
	font-family: 'robotobold';
    padding: 5px 10px;
	margin: 2px;
    background: #000;
}
.cream-slider-3 ul > li.tab > div h3, .cream-slider-3 li.tab > div span {float: left;clear: both;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);}
/*y para el label*/
.cream-slider-3 ul > li.tab > label {
    cursor: pointer;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 45;
    height: 100%;
}
/*
=>Para que el slider funcione debemos...
*/
#m1:checked ~ ul > li.tab:nth-child(1),
#m2:checked ~ ul > li.tab:nth-child(2),
#m3:checked ~ ul > li.tab:nth-child(3),
#m4:checked ~ ul > li.tab:nth-child(4),
#m5:checked ~ ul > li.tab:nth-child(5),
#m6:checked ~ ul > li.tab:nth-child(6),
#m7:checked ~ ul > li.tab:nth-child(7),
#m8:checked ~ ul > li.tab:nth-child(8) {
    -moz-flex-grow: 20;
         -webkit-box-flex: 20;
             -ms-flex-positive: 20;
            flex-grow: 20;
    border-color: #00838F;
}
#m1:checked ~ ul > li.tab:nth-child(1) > label,
#m2:checked ~ ul > li.tab:nth-child(2) > label,
#m3:checked ~ ul > li.tab:nth-child(3) > label,
#m4:checked ~ ul > li.tab:nth-child(4) > label,
#m5:checked ~ ul > li.tab:nth-child(5) > label,
#m6:checked ~ ul > li.tab:nth-child(6) > label,
#m7:checked ~ ul > li.tab:nth-child(7) > label,
#m8:checked ~ ul > li.tab:nth-child(8) > label {display: none;}

#m1:checked ~ ul > li.tab:nth-child(1) > div,
#m2:checked ~ ul > li.tab:nth-child(2) > div,
#m3:checked ~ ul > li.tab:nth-child(3) > div,
#m4:checked ~ ul > li.tab:nth-child(4) > div,
#m5:checked ~ ul > li.tab:nth-child(5) > div,
#m6:checked ~ ul > li.tab:nth-child(6) > div,
#m7:checked ~ ul > li.tab:nth-child(7) > div,
#m8:checked ~ ul > li.tab:nth-child(8) > div {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: opacity .7s ease .3s, transform .7s ease .3s;
    -webkit-transition: opacity .7s ease .3s, -webkit-transform .7s ease .3s;
    transition: opacity .7s ease .3s, -webkit-transform .7s ease .3s;
    transition: opacity .7s ease .3s, transform .7s ease .3s;
    transition: opacity .7s ease .3s, transform .7s ease .3s, -webkit-transform .7s ease .3s;
}
@media only screen and (max-width: 840px) {
.cream-slider-3 > ul {height: 350px;}
}
@media only screen and (max-width: 730px) {
.cream-slider-3 {font-size: 13px;}
.cream-slider-3 > ul {height: 280px;}
	.cream-slider-3 li.tab > div span { font-size: 20px;}
}
@media only screen and (max-width: 620px) {
	.cream-slider-3 {font-size: 11px;}
	.cream-slider-3 > ul {height: 240px;}
	.cream-slider-3 > ul > li.tab > div h3 {font-size: 13px;	}
	.cream-slider-3 li.tab > div span { font-size: 11px;padding: 1px 5px;	margin: 1px;}
}