#main-slider{
	position: relative;
	height: 450px;
	margin-bottom: 20px;
}
#main-slider .slider{
	overflow: hidden;
	position: absolute;
	width: 990px;
	height: 450px;
	top: 0;
	left: 0;
	z-index: 1;
	background:#000;
}

#slider1>div{
	/* width: 67px; */
	height: 450px;
	background-repeat: no-repeat;
	background-position: top left;
	position: absolute;
}
#slider1>div:nth-child(1){
	left: 0px;
	width: 67px;
	background-image: url(../images/slider/slider1-1.jpg);

}

#slider1.active>div:nth-child(1){
	animation: piecetop 3s 1;
	animation-delay: 3s;
}
#slider1>div:nth-child(2){
	left: 67px;
	width: 67px;
	background-image: url(../images/slider/slider1-2.jpg);

}

#slider1.active>div:nth-child(2){
	animation: piecebottom 3s 1;
	animation-delay: 3.07s;
}
#slider1>div:nth-child(3){
	left: 134px;
	width: 67px;
	background-image: url(../images/slider/slider1-3.jpg);

}

#slider1.active>div:nth-child(3){
	animation: piecetop 3s 1;
	animation-delay: 3.14s;
}
#slider1>div:nth-child(4){
	left: 201px;
	width: 67px;
	background-image: url(../images/slider/slider1-4.jpg);

}

#slider1.active>div:nth-child(4){
	animation: piecebottom 3s 1;
	animation-delay: 3.21s;
}
#slider1>div:nth-child(5){
	left: 268px;
	width: 67px;
	background-image: url(../images/slider/slider1-5.jpg);

}

#slider1.active>div:nth-child(5){
	animation: piecetop 3s 1;
	animation-delay: 3.28s;
}
#slider1>div:nth-child(6){
	left: 335px;
	width: 67px;
	background-image: url(../images/slider/slider1-6.jpg);

}

#slider1.active>div:nth-child(6){
	animation: piecebottom 3s 1;
	animation-delay: 3.35s;
}
#slider1>div:nth-child(7){
	left: 402px;
	width: 67px;
	background-image: url(../images/slider/slider1-7.jpg);

}

#slider1.active>div:nth-child(7){
	animation: piecetop 3s 1;
	animation-delay: 3.42s;
}
#slider1>div:nth-child(8){
	left: 469px;
	width: 67px;
	background-image: url(../images/slider/slider1-8.jpg);

}

#slider1.active>div:nth-child(8){
	animation: piecebottom 3s 1;
	animation-delay: 3.49s;
}
#slider1>div:nth-child(9){
	left: 536px;
	width: 67px;
	background-image: url(../images/slider/slider1-9.jpg);

}

#slider1.active>div:nth-child(9){
	animation: piecetop 3s 1;
	animation-delay: 3.56s;
}
#slider1>div:nth-child(10){
	left: 603px;
	width: 67px;
	background-image: url(../images/slider/slider1-10.jpg);

}

#slider1.active>div:nth-child(10){
	animation: piecebottom 3s 1;
	animation-delay: 3.63s;
}
#slider1>div:nth-child(11){
	left: 670px;
	width: 67px;
	background-image: url(../images/slider/slider1-11.jpg);

}

#slider1.active>div:nth-child(11){
	animation: piecetop 3s 1;
	animation-delay: 3.7s;
}
#slider1>div:nth-child(12){
	left: 737px;
	width: 67px;
	background-image: url(../images/slider/slider1-12.jpg);

}

#slider1.active>div:nth-child(12){
	animation: piecebottom 3s 1;
	animation-delay: 3.77s;
}
#slider1>div:nth-child(13){
	left: 804px;
	width: 67px;
	background-image: url(../images/slider/slider1-13.jpg);

}

#slider1.active>div:nth-child(13){
	animation: piecetop 3s 1;
	animation-delay: 3.84s;
}
#slider1>div:nth-child(14){
	left: 871px;
	width: 67px;
	background-image: url(../images/slider/slider1-14.jpg);

}

#slider1.active>div:nth-child(14){
	animation: piecebottom 3s 1;
	animation-delay: 3.91s;
}
#slider1>div:nth-child(15){
	left: 938px;
	width: 52px;
	background-image: url(../images/slider/slider1-15.jpg);

}

#slider1.active>div:nth-child(15){
	animation: piecetop 3s 1;
	animation-delay: 3.98s;
}
#slider1:after{
content: "";
width: 3000px;
height: 450px;
position: absolute;
top: 0;
right: 0;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.02) 0% , rgba(0, 0, 0, 0.02) 51%, transparent 52%, rgba(0, 0, 0, .9) 75%, rgba(0, 0, 0, 1) 100%);

}
#slider1.active:after{
	animation: markslider 6s 1;
}
/*
#main-slider #slider1.active{
	animation: fadeOut 6s 1;
}*/

#main-slider #slider1{
	z-index: 3;
}
#main-slider #slider1.active{
	z-index: 9;
}
#main-slider .slider.active + .slider{
	z-index: 5;	
}
#main-slider .slider{
	opacity: 0;
}
#main-slider .slider.active{
	opacity: 1;
	transition: opacity .85s;
}
#main-slider .slider.active{
	opacity: 1;
	display: block;
	z-index: 9;
	/*animation: fadeOut 7s 1;*/
}
#main-slider .slider img{
	position: absolute;
	bottom: -292px;
}
#main-slider .slider.active img{
	animation: moveToTop 8s 1;
}
@keyframes fadeOut {
	0%		{opacity: 1;}			
	60%		{opacity: 1;}
	80%		{opacity: 0;}
	100%	{opacity: 0;}
}
@keyframes piecetop {
	0%		{top: 0;}
	50%		{top: -450px;}
	100%	{top: -450px;}
}
@keyframes piecebottom {
  	0%		{top: 0;}
  	50%		{top: 450px;}
	100%	{top: 450px;}
}
@keyframes markslider {
  0% {right: 0;}
  80% {right: -2000px;}
  100% {right: -2000px;}
}
@keyframes moveToTop {
  0% {bottom: -292px;}
  100% {bottom: -210px;}
}
@media screen and (max-width: 1000px) {
	#main-slider .slider{
		width: 100%;
		height: 400px;
	}
	#slider1:after{
		height: 400px;
	}
	#main-slider{
		height: 400px;
	}
	#slider1>div:nth-child(1){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
	}
	#slider1>div:nth-child(2){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:6.7%;
	}
	#slider1>div:nth-child(3){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:13.4%;
	}
	#slider1>div:nth-child(4){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:20.1%;
	}
	#slider1>div:nth-child(5){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:26.8%;
	}
	#slider1>div:nth-child(6){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:33.5%;
	}
	#slider1>div:nth-child(7){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:40.2%;
	}
	#slider1>div:nth-child(8){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:46.9%;
	}
	#slider1>div:nth-child(9){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:53.6%;
	}
	#slider1>div:nth-child(10){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:60.3%;
	}
	#slider1>div:nth-child(11){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:67%;
	}
	#slider1>div:nth-child(12){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:73.7%;
	}
	#slider1>div:nth-child(13){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:80.4%;
	}
	#slider1>div:nth-child(14){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:87.1%;
	}
	#slider1>div:nth-child(15){
		width: 6.7%;
		background-size: cover;
		background-position: center center;
		height: 100%;
		left:93.8%;
	}
	@keyframes fadeOut {
		0%		{opacity: 1;}			
		60%		{opacity: 1;}
		80%		{opacity: 0;}
		100%	{opacity: 0;}
	}
	@keyframes piecetop {
		0%		{top: 0;}
		50%		{top: -400px;}
		100%	{top: -400px;}
	}
	@keyframes piecebottom {
		  0%		{top: 0;}
		  50%		{top: 400px;}
		100%	{top: 400px;}
	}
	@keyframes markslider {
	  0% {right: 0;}
	  80% {right: -2000px;}
	  100% {right: -2000px;}
	}
	@keyframes moveToTop {
		0% {bottom: -180px;}
		100% {bottom: -120px;}
	  }
}	
@media screen and (max-width: 767px) {
	#main-slider .slider{
		width: 100%;
		height: 331px;
	}
	#slider1:after{
		height: 331px;
	}
	#main-slider{
		height: 331px;
	}
	@keyframes fadeOut {
		0%		{opacity: 1;}			
		60%		{opacity: 1;}
		80%		{opacity: 0;}
		100%	{opacity: 0;}
	}
	@keyframes piecetop {
		0%		{top: 0;}
		50%		{top: -331px;}
		100%	{top: -331px;}
	}
	@keyframes piecebottom {
		  0%		{top: 0;}
		  50%		{top: 331px;}
		100%	{top: 331px;}
	}
	@keyframes markslider {
	  0% {right: 0;}
	  80% {right: -2000px;}
	  100% {right: -2000px;}
	}
	@keyframes moveToTop {
	  0% {bottom: -100px;}
	  100% {bottom: -80px;}
	}
}
@media screen and (max-width: 420px) {
	#main-slider{
		height: 182px;
	}
	#main-slider .slider{
		width: 100%;
		height: 182px;
	}
	#slider1:after{
		height: 182px;
	}
	@keyframes moveToTop {
		0% {bottom: -100px;}
		100% {bottom: -50px;}
	  }
}