#acordeon{margin-top: 100px;}
#acordeon li li{background: url("../imagenes/i-lentes.png") no-repeat center top; background-size: 25px; padding-top: 25px;}
#nav {
    margin: 0 auto;}
#nav ul {
  padding: 0; margin: 0 0 40px 0 ; font-size: 18px; margin-top: 30px;}
#nav li {
  list-style: none; margin-bottom: 25px; }
#nav li a {
	display: block; padding: 15px; text-decoration: none; color: #7b787a; background: #f1eff0;}
#nav li a:hover{
    color: #d23b8d; background: #f7f5f6;}
#nav li a.active {
    color: #d23b8d; }
#nav li a h3{
	font-size: 22px; font-weight: 500; margin-top: 0;}
#nav section {
	overflow: hidden; max-height: 0; transition: 1.3s ease; -webkit-transition: 1.3s ease;}
.no-js #nav section {
  display: block; }
#nav li { 
    display: block; padding: 0px; }
#nav section.is-open {
	max-height: 100%; background: #f7f5f6; padding: 60px 0 80px 0;}
#nav section p{
	font-size: 0.9em;}
#nav .boton a{margin: 30px auto;}
	
	
@media screen and (max-width: 700px) {
#nav li a h3{
	font-size: 17px;}
	#acordeon{margin-top: 40px;}
	#nav section.is-open {  padding: 25px 0 50px 0;}
	#nav section p {  padding: 0 15px;}	}
@media only screen 
and (min-width : 701px)
and (max-width : 999px) {
	#acordeon{margin-top: 60px;}
	#nav section.is-open {  padding: 25px 0 50px 0;}
	#nav section p {  padding: 0 30px;}}
@media only screen 
	and (min-width : 1000px){
	#nav section p {  padding: 0 50px;}}