.slide-img-left,
.slide-img-right {
	margin-bottom: -100%;
	-webkit-animation-name: slide-up;
	animation-name: slide-up;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.slide-img-left {
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}
.slide-img-right {
	-webkit-animation-delay: 2.1s;
	animation-delay: 2.1s;
}
@-webkit-keyframes slide-up {
	0% {
		margin-bottom: -100%;
	}
	100% {
	    margin-bottom: 0;
	}
}
@keyframes slide-up {
	0% {
		margin-bottom: -100%;
	}
	100% {
	    margin-bottom: 0;
	}
}


.in-viewport .slide-phone-decorator {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: .11s;
	animation-delay: .1s;
}
@-webkit-keyframes go-up {
	0% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-120px);
		   -moz-transform: translateY(-120px);
		    -ms-transform: translateY(-120px);
		     -o-transform: translateY(-120px);
		        transform: translateY(-120px);
	}
}
@keyframes go-up {
	0% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(-120px);
		   -moz-transform: translateY(-120px);
		    -ms-transform: translateY(-120px);
		     -o-transform: translateY(-120px);
		        transform: translateY(-120px);
	}
}

.chart-box li.cost,
.chart-box li.cost2,
.chart-box li.cost3,
.chart-box li.cost4,
.chart-box.in-viewport li {
	height: 0;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.chart-box.in-viewport li.cost {
	-webkit-animation-name: growth-1;
	animation-name: growth-1;
}
@-webkit-keyframes growth-1 {
	0% {height: 0;}
	100% {height: 35%;}
}
@keyframes growth-1 {
	0% {height: 0;}
	100% {height: 35%;}
}
.chart-box.in-viewport li.cost2 {
	-webkit-animation-name: growth-2;
	animation-name: growth-2;
}
@-webkit-keyframes growth-2 {
	0% {height: 0;}
	100% {height: 54%;}
}
@keyframes growth-2 {
	0% {height: 0;}
	100% {height: 54%;}
}
.chart-box.in-viewport li.cost3 {
	-webkit-animation-name: growth-3;
	animation-name: growth-3;
}
@-webkit-keyframes growth-3 {
	0% {height: 0;}
	100% {height: 72%;}
}
@keyframes growth-3 {
	0% {height: 0;}
	100% {height: 72%;}
}
.chart-box.in-viewport li.cost4 {
	-webkit-animation-name: growth-4;
	animation-name: growth-4;
}
@-webkit-keyframes growth-4 {
	0% {height: 0;}
	100% {height: 100%;}
}
@keyframes growth-4 {
	0% {height: 0;}
	100% {height: 100%;}
}

.chart-box li.cost .t,
.chart-box li.cost2 .t,
.chart-box li.cost3 .t,
.chart-box li.cost4 .t {
	height: 0;
}
.chart-box.in-viewport li .t {
	height: 0;
	-webkit-animation-name: growth-custom;
	animation-name: growth-custom;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
@-webkit-keyframes growth-custom {
	0% {height: 0;}
	100% {height: 26px;}
}
@keyframes growth-custom {
	0% {height: 0;}
	100% {height: 26px;}
}
.chart-box.in-viewport li.cost3 .t {
	-webkit-animation-name: growth-custom-1;
	animation-name: growth-custom-1;
}
@-webkit-keyframes growth-custom-1 {
	0% {height: 0;}
	100% {height: 44px;}
}
@keyframes growth-custom-1 {
	0% {height: 0;}
	100% {height: 44px;}
}
.chart-box.in-viewport li.cost4 .t {
	-webkit-animation-name: growth-custom-2;
	animation-name: growth-custom-2;
}
@-webkit-keyframes growth-custom-2 {
	0% {height: 0;}
	100% {height: 60px;}
}
@keyframes growth-custom-2 {
	0% {height: 0;}
	100% {height: 60px;}
}

.chart-box li .price,
.chart-box li .price.b {
	opacity: 0;
}
.chart-box.in-viewport li .price,
.chart-box.in-viewport li .price.b { 
	-webkit-animation-name: show-labels;
	animation-name: show-labels;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 2.5s;
	animation-delay: 2.5s;
}
@-webkit-keyframes show-labels {
	0% {opacity: 0;}
	100% {opacity: 100;}
}
@keyframes show-labels {
	0% {opacity: 0;}
	100% {opacity: 100;}
}