/*  Archivo de estilos para tipos de 
    letras
	
	Hoy inicie la segmentacion del los
	archivos de estilo.
	15 de Abril de 2015
*/

#slideshow-wrap {
    height: 310px;
    margin: auto;
    position: relative; 
    width: 847px;
}

#slideshow-wrap input[type=radio] {
    position: absolute;
    visibility: hidden;
}

#slideshow-wrap label {
    background-color: rgba(200,200,200,1);
    border-radius: 50%;
    bottom: -28px;
    box-shadow: 0 0 3px rgba(0,0,0,.8);
    cursor: pointer;
    height: 12px;
    left: 90%;
    position: absolute;
	-webkit-transition: background-color .2s;
    transition: background-color .2s;
    width: 12px;
    z-index: 100;
}

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-3] { margin-left: 0px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-inner {
    background-color: black;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#slideshow-inner>ul {
    height: 100%;
    left: 0;
    list-style: none;
    overflow: hidden;
    position: relative;
	-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    width: 500%;
}

#slideshow-inner>ul>li {
    float: left;
    height: 310px;
    position: relative;
    width: 20%;
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
}