@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.container {
	width: 40%;
	margin: 10px auto;
}
.carousel{
	border: 2px solid #ccc;
	height: 400px;
	position: relative;
	overflow: hidden;
}
.slider {
	height: 100%;
	display: flex;
	width: 400%;
	border: 1px solid red;
	transition: all 0.3s;
}
.slider section{
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.controls .arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.controls .arrow i{
	font-size: 60px;
}
.arrow.left{
	left: 10px;
}
.arrow.right{
	right: 10px;
}

/*.arrow i{
	font-size: 70px;
	webkit-user-select: none;
}*/

.controls ul{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%);
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
}
.controls ul li{
	width: 14px;
	height: 14px;
	border: 2px solid #333;
	border-radius: 50px;
	margin: 10px;
	background: #333;
	cursor: pointer;
}
.controls ul li.selected{
	background: transparent;
}