@font-face{
font-family: 'Calibri light';
	src: url('font/Calibri light');
	font-weight: normal;
	font-style: normal;

}

*{
	box-sizing: border-box;
}
.acordeon input{
	display: none;
}
.acordeon_titulo{
	display: block;
	padding: 15px;
	background: rgb(211, 164, 246);
	color: #fff;
	font-family: Calibri light;
	font-size: 20px;
	cursor: pointer;
	border-bottom: 1px solid #fff;
}
.acordeon_titulo:hover{  /*hover: atributo que hace referencia cuando el cursor esta sobre algo*/
	background-color: rgb(228, 199, 249);
	font-family: Calibri light;
	font-size: 25px;
}
.acordeon_contenido{
	font-size: 18px;
	font-family: Calibri;
	height: 0;
	overflow: hidden;
	margin: 0;
	transition: all 0.5s;
}
.acordeon input:checked ~.acordeon_contenido{
	height: auto;
	margin: 15px 0;

}
.banner{
	width: 300px;
	height: 150px;
	border: 3px solid purple;
	margin: auto;

	background-size: 100% 100%;

	/*animation-name: banner;
	animation-duration: 10s;
	animation-iteration-count: infinite;*/
	animation: banner 10s infinite;
}
@keyframes banner{
	0%, 30%{
	background-image: url(apps.jpg);
	opacity: 1;
	}
	31%, 34%{
		opacity: 0.1;
	}
	35%, 55%{
	background-image: url(apps2.jpg);
	opacity: 1;
	}
	56%, 59%{
		opacity: 0.1;
	}
	60%, 80%{
	background-image: url(apps3.jpg);
	opacity: 1;
	}
	81%, 85%{
		opacity: 0.1;
	}
	86%, 100%{
	background-image: url(apps4.jpg);
	opacity: 1;
	}
}