.gallery {
	position: absolute;
	top: 41%;
    left: calc((100% - 600px)/2);
    width: 600px;
	height: 350px;
}

.qq	{
	background: #9a9a9a;
    width: 100%;
	height: 100%;
	position: relative;
}

.qq:after {
	content: 'wait...';
	font-size: 7em;
    position: absolute;
    top: 40%;
    left: 25%;
}

.origimg {
	display: none;
}

.prew {
	position: absolute;
	overflow: hidden;
	top: -85px;
	width: 100%;
}

.inner {
	padding-left: 5px;
}

.before, .next {
	position: absolute;
	font-weight: 900;
	top: -65px;
	font-size: 75px;
	line-height: 40px;
	cursor: pointer;
	color: #8e6f52;
	display: none;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	-o-transition: 1s;
	-ms-transition: 1s;
	transition: 1s;
}

.before {
	left: -105px;
}

.next {
	right: -70px;	
}

.before:hover, .next:hover {
	-webkit-transform: scaleX(1.5);
	-moz-transform: scaleX(1.5);
	-o-transform: scaleX(1.5);
	-ms-transform: scaleX(1.5);
	transform: scaleX(1.5);
}

.inner > img {
	cursor: pointer;
	margin-left: 3px;
	-webkit-transition: 0.7s;
	-moz-transition: 0.7s;
	-o-transition: 0.7s;
	-ms-transition: 0.7s;
	transition: 0.7s;
}	

.inner > img:hover {
	-webkit-box-shadow: 1px 1px 11px 3px rgba(0,0,0,0.85);
	-moz-box-shadow: 1px 1px 11px 3px rgba(0,0,0,0.85);
	-o-box-shadow: 1px 1px 11px 3px rgba(0,0,0,0.85);
	-ms-box-shadow: 1px 1px 11px 3px rgba(0,0,0,0.85);
	box-shadow: 1px 1px 11px 3px rgba(0,0,0,0.85);
}

.qq > img {
	position: absolute;
	cursor: pointer;
	z-index: 10;
	-webkit-transform-origin: center bottom;
	-moz-transform-origin: center bottom;
	-o-transform-origin: center bottom;
	-ms-transform-origin: center bottom;
	transform-origin: center bottom;
 	-webkit-perspective-origin: bottom;
	-moz-perspective-origin: bottom;
	-o-perspective-origin: bottom;
	-ms-perspective-origin: bottom;
	perspective-origin: bottom;

	transition: 2.5s;

}

.disp {
	display: block;
}

/*.anim {
	-webkit-animation: Or 2s linear forwards;
	-moz-animation: Or 2s linear forwards;
	-o-animation: Or 2s linear forwards;
	-ms-animation: Or 2s linear forwards;
	animation: Or 2s linear forwards;
}*/
.anim {
	animation: Or2 2s linear forwards;
	/*opacity: 0;*/

}

/*черновик*/

@keyframes Or2 {
	99% {
		opacity: 0;
		z-index: 20;

	}
	100% {
		z-index: 0;
		opacity: 0;
	}
}

/*конец черновика*/

@keyframes Or {
	
	50% {
	-webkit-transform: perspective(700px) rotateX(-90deg);
	-moz-transform: perspective(700px) rotateX(-90deg);
	-o-transform: perspective(700px) rotateX(-90deg);
	-ms-transform: perspective(700px) rotateX(-90deg);
	transform: perspective(700px) rotateX(-90deg);
		}	

	80% {
	-webkit-transform: perspective(700px) rotateX(-85deg);
	-moz-transform: perspective(700px) rotateX(-85deg);
	-o-transform: perspective(700px) rotateX(-85deg);
	-ms-transform: perspective(700px) rotateX(-85deg);
	transform: perspective(700px) rotateX(-85deg);
		}
	95% {
	-webkit-transform: perspective(700px) rotateX(-87deg);
	-moz-transform: perspective(700px) rotateX(-87deg);
	-o-transform: perspective(700px) rotateX(-87deg);
	-ms-transform: perspective(700px) rotateX(-87deg);
	transform: perspective(700px) rotateX(-87deg);
		}
	100% {
	-webkit-transform: perspective(700px) rotateX(-90deg);
	-moz-transform: perspective(700px) rotateX(-90deg);
	-o-transform: perspective(700px) rotateX(-90deg);
	-ms-transform: perspective(700px) rotateX(-90deg);
	transform: perspective(700px) rotateX(-90deg);
	}
}

@media screen and (max-width: 720px) {
.next, .before {
		font-size: 45px;
		top: -55px;
	}

	.before {
	left: -50px;
	}
	
	.next {
		right: -30px;	
	}

	.gallery {
	    width: 80%;
		left: 10%;
	}

	.prew {
		top: -80px;
	}
}

@media screen and (max-width: 520px) {
	.next, .before {
		font-size: 30px;
	}

	.before {
	left: -35px;
	}
	
	.next {
		right: -20px;	
	}

	.prew {
		top: -60px;
	}

	.qq:after {
		font-size: 2em;
	}
}
@media screen and (max-width: 400px) {
	.prew {
		top: -55px;
	}

}