body{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Indie Flower', cursive;
  font-family: 'Lobster', cursive;
  font-family: 'Otomanopee One', sans-serif;
  font-size: xxx-large;
  font-weight: bolder;
}
.slider{
	display: flex;
	justify-content: center;
	align-items: center;
}
.item{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: grey;
	flex-basis: 25%;
	transition: all 0.2s;
}
.item:hover{
	flex-basis: 100%
}
.item span{
	font-size: 2.5rem;
}
.item1{
	background: url('1.jpg')no-repeat center center;
	background-size: cover;
	color: rgb(243, 11, 11);
}
.item2{
	background: url('2.jpg')no-repeat center center;
	background-size: cover;
	color: rgb(236, 8, 198);
}
.item3{
	background: url('3.jpg')no-repeat center center;
	background-size: cover; 
	color: rgb(200, 255, 0);
}
.item4{
	background: url('4.jpg')no-repeat center center;
	background-size: cover;
	color: rgb(253, 251, 251);
}


@media (max-width: 640px){
	.slider{
		flex-flow: column;
		height: 100vh;
	}
	.item{
		width: 100%;
		height: 25vh;
	}
	.item:hover{
		flex-grow: 30%;
	}
	}