@charset "utf-8";
/* CSS Document */

.boton {height:0px; overflow:hidden}

input[id^="spoiler"]{
	visibility:hidden;
}
/* Estilo botón clicable */
input[id^="spoiler"] + label {
display: block;
width: 100%;
text-align:center;
margin: 0 auto;
background: #FFF;
color:#000;
font-family:Verdana, Geneva, sans-serif;
cursor: pointer;
}

/* Estilo botón cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label {
color: #FFFFFF;
background: #000;
}
/* Estilo caja SPOILER (inicialmente oculto) */
input[id^="spoiler"] ~ .spoiler {
display:none;
}
/* Estilo caja SPOILER cuando su INPUT está seleccionado */
input[id^="spoiler"]:checked + label + .spoiler{
height: auto;
display:block;
opacity: 1;
}

#but {font-size:100%; text-align:center; background-color:#FFF; padding-top:1px; padding-bottom:2px}
#but li {width:100%}
#but a {color:#000}
#but a:hover {color:#000099}


@media all and (max-width:768px) {
.boton {height:100%; display:block; float:left}	
.menu {display:none}
#but {font-family:Verdana, Geneva, sans-serif; font-size:80%; text-align:center; background-color:#FFF; padding-top:1px; padding-bottom:2px; height:auto}
#but li {width:100%}
}