.cream-slider {
    font-size: 14px;
    line-height: 1.5;
    z-index: 30;
    position: relative;
    margin: 0 auto;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    background: transparent;
    color: #fff;
}
/*Se aplica para todo dentro del slider*/
.cream-slider * {
    box-sizing: border-box;
}
/*
=>Algunas estilos para comenzar
*/
.cream-slider > input {display: none;}
.cream-slider > ul > li.tab > img {height: 100%;display: block;max-width: none;background: none;padding: 0;margin: 0;border: 0;border-radius: 0;}
.cream-slider > ul > li.tab {padding: 0;margin: 0;list-style-type: none;}
.cream-slider > ul {padding: 0;margin: 0;list-style-type: none;}
/*transition*/
.cream-slider 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 > ul {
    overflow: hidden; 
    position: relative;
    height: 470px;
    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 > ul > li.tab {
    height: 100%;
    overflow: hidden;
    position: relative;
    /*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 > ul > li.tab > div {
    left: 0;
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
    bottom: 0;
    position: absolute;
    /*padding: 16px 26px 16px 47px;*/
    padding: 16px 26px 16px 36px;
    width: 100%;
    opacity: 0;
    white-space: nowrap;
}
.cream-slider > ul > li.tab > div a {color: #00BCD4;font-weight: 400;text-decoration: none;}
.cream-slider > ul > li.tab > div a:hover {color: #80DEEA;text-decoration: none;}
.cream-slider > ul > li.tab > div h3 {
    color: #FEFEFE;
    font-family: 'BebasNeue', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 100px;
    line-height: 105px;
    margin: 0;
}
/*.cream-slider li.tab > div span {
    color: #FEFEFE;
    font-family: 'UbuntuMedium', Arial, Helvetica, sans-serif;
}*/
.cream-slider ul > li.tab > div h3, .cream-slider li.tab > div span {float: left;clear: both;}
/*y para el label*/
.cream-slider 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...
*/
#c1:checked ~ ul > li.tab:nth-child(1),
#c2:checked ~ ul > li.tab:nth-child(2),
#c3:checked ~ ul > li.tab:nth-child(3),
#c4:checked ~ ul > li.tab:nth-child(4),
#c5:checked ~ ul > li.tab:nth-child(5),
#c6:checked ~ ul > li.tab:nth-child(6),
#c7:checked ~ ul > li.tab:nth-child(7),
#c8: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;*/
}
#c1:checked ~ ul > li.tab:nth-child(1) > label,
#c2:checked ~ ul > li.tab:nth-child(2) > label,
#c3:checked ~ ul > li.tab:nth-child(3) > label,
#c4:checked ~ ul > li.tab:nth-child(4) > label,
#c5:checked ~ ul > li.tab:nth-child(5) > label,
#c6:checked ~ ul > li.tab:nth-child(6) > label,
#c7:checked ~ ul > li.tab:nth-child(7) > label,
#c8:checked ~ ul > li.tab:nth-child(8) > label {display: none;}

#c1:checked ~ ul > li.tab:nth-child(1) > div,
#c2:checked ~ ul > li.tab:nth-child(2) > div,
#c3:checked ~ ul > li.tab:nth-child(3) > div,
#c4:checked ~ ul > li.tab:nth-child(4) > div,
#c5:checked ~ ul > li.tab:nth-child(5) > div,
#c6:checked ~ ul > li.tab:nth-child(6) > div,
#c7:checked ~ ul > li.tab:nth-child(7) > div,
#c8: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 > ul {height: 350px;}*/
}
@media only screen and (max-width: 730px) {
.cream-slider {font-size: 13px;}
.cream-slider > ul {height: 280px;}
}
@media only screen and (max-width: 620px) {
.cream-slider > ul > li.tab > div {display: none;}
.cream-slider > ul {height: 240px;}
}