.ctrl {
	flex: 0 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	font-size: 15px;
}
.ctrl-counter {
	background-color:#FFF;
	position: relative;
	width: 80px;
	height: 50px;
	text-align: center;
	overflow: hidden;
}
.ctrl-counter-input {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
	box-shadow: none;
	outline: none;
	border: none;
	color: #333C48;
	font-size: 15px;
	text-align: center;
	visability: hidden;
	opacity: 0;
	-webkit-transition: opacity 100ms ease-in;
	transition: opacity 100ms ease-in;
}
.ctrl-counter-num {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: 50px;
	visability: visible;
	opacity: 1;
	-webkit-transition: opacity 100ms ease-in;
	transition: opacity 100ms ease-in;
}
.ctrl-counter-num.is-increment-hide {
	opacity: 0;
	-webkit-transform: translateY(-50px);
	transform: translateY(-50px);
	-webkit-animation: increment-prev 100ms ease-in;
	animation: increment-prev 100ms ease-in;
}
.ctrl-counter-num.is-increment-visible {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-animation: increment-next 100ms ease-out;
	animation: increment-next 100ms ease-out;
}
.ctrl-counter-num.is-decrement-hide {
	opacity: 0;
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-animation: decrement-prev 100ms ease-in;
	animation: decrement-prev 100ms ease-in;
}
.ctrl-counter-num.is-decrement-visible {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-animation: decrement-next 100ms ease-out;
	animation: decrement-next 100ms ease-out;
}
.ctrl-button {
	width: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	background-color: #8498a7;
	-webkit-transition: background-color 100ms ease-in;
	transition: background-color 100ms ease-in;
}
.ctrl-button:hover {
	background-color: #90a2b0;
	-webkit-transition: background-color 100ms ease-in;
	transition: background-color 100ms ease-in;
}
.ctrl-button:active {
	background-color: #778996;
	-webkit-transition: background-color 100ms ease-in;
	transition: background-color 100ms ease-in;
}
.ctrl-button-decrement {
	border-radius: 5px 0 0 5px;
}
.ctrl-button-increment {
	border-radius: 0 5px 5px 0;
}
 @-webkit-keyframes decrement-prev {
 from {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@keyframes decrement-prev {
 from {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@-webkit-keyframes decrement-next {
 from {
 opacity: 0;
 -webkit-transform: translateY(-50px);
 transform: translateY(-50px);
}
}
@keyframes decrement-next {
 from {
 opacity: 0;
 -webkit-transform: translateY(-50px);
 transform: translateY(-50px);
}
}
@-webkit-keyframes increment-prev {
 from {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@keyframes increment-prev {
 from {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
@-webkit-keyframes increment-next {
 from {
 opacity: 0;
 -webkit-transform: translateY(50px);
 transform: translateY(50px);
}
}
@keyframes increment-next {
 from {
 opacity: 0;
 -webkit-transform: translateY(50px);
 transform: translateY(50px);
}
}