.wrap {
	margin: 0 auto;
	width: 100%;
	height: 0;
	padding-top: 58%; /* ratio of image * 100 */
	overflow: hidden;
	position: relative;
}


@media (max-width: 768px) {
.wrap {
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding-top: 158%; /* ratio of image * 100  default 58%*/
	/*overflow: hidden;*/
	position: relative;
}
	/*.wrap::after {
	content: '';
	position: absolute;
		z-index: 5000;
background: rgba(0,0,0,0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 102%;
	pointer-events: none;
}*/

}

.mockup {
	position: absolute;
	top: 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
}

.mockup::after {
	content: '';
	position: absolute;
/*background: rgba(51,71,89,0.4);*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.mockup__img {
	display: block;
	width: 1900px;
}

.screen,
.mobile,
.mobscreen{
	position: absolute;
	overflow: hidden;
	z-index: 100;
	/*background: #f60;*/
	outline: 1px solid transparent;
	-webkit-transform-origin: 0px 0px 0px;
	transform-origin: 0px 0px 0px;
	-moz-transform-origin: 0px 0px 0px;
	-o-transform-origin: 0px 0px 0px;
}


.screen {
	width: 600px;
	height: 400px;
	top: 250px;
	left: 1050px;
	
	/*opacity: 0.5;
	background: rgba(255,0,0,0.6);*/
	-webkit-transform: matrix3d(0.452711184975633, 0.139863853789781, 0, -0.000095269465775677, -0.00319943882448498, 0.673512589529646, 0, 0.000049453592261685, 0, 0, 1, 0, 382, 8, 0, 1);
	/*transform: matrix3d(0.422711184975633, 0.139863853789781, 0, -0.000095269465775677, -0.00319943882448498, 0.673512589529646, 0, 0.000049453592261685, 0, 0, 1, 0, 382, 8, 0, 1);*/
	  /* transform: matrix(1, 2, -1, 1, 80, 80);*/
	/*transform: matrix3d(2.571147, 0.086484, 0, -0.001094, 
                    0.208972, 2.068148, 0, 0.000159, 
                    5, 2, 1, 3, 
                    600, 400, 5.5, 3.5);*/
	
	 /*transform: matrix3d(2.443411, -0.214147, 0, -0.001341, 
                    -0.008802, 2.022989, 0, -0.000086, 
                    0, 0, 1, 0, 
                    600, 400, 0, 3.5);*/
	
 transform: matrix3d(0.629618, 0.068047, 0, -0.000227, 
                    0.083182, 0.743338, 0, 0.000058, 
                    0, 0, 1, 0, 
                    68.301358, 56.142877, 0, 1);
 transform-origin: 5px 1px 0px;
	-moz-transform: matrix3d(0.452711184975633, 0.139863853789781, 0, -0.000095269465775677, -0.00319943882448498, 0.673512589529646, 0, 0.000049453592261685, 0, 0, 1, 0, 382, 8, 0, 1);
		-o-transform: matrix3d(0.452711184975633, 0.139863853789781, 0, -0.000095269465775677, -0.00319943882448498, 0.673512589529646, 0, 0.000049453592261685, 0, 0, 1, 0, 382, 8, 0, 1);

}


/*.screen::after {
	content: '';
	position: absolute;
	background: rgba(255,0,0,0.6);
top: 248px;
	left: 1049px;
width: 600px;
	height: 400px;
	pointer-events: none;
	z-index: 150000;
}*/

.mobile {
	width: 320px;
	height: 480px;
	top: 450px;
	left: 338px;

	-webkit-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
	/*transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);*/
	
  transform: matrix3d(0.193845, 0.054058, 0, -0.00012, 
                    -0.433944, 0.146913, 0, -0.000054, 
                    0, 0, 1, 0, 
                    441.822775, 252.581483, 0, 1);
 transform-origin: 5px 1px 0px;
	
		-moz-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
			-o-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
}

.mobscreen {
	width: 320px;
	height: 480px;
	top: 860px;
	left: 100px;

	/*-webkit-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
	transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);*/
	
transform: matrix3d(2.600049, -0.642062, 0, 0.00012, 
                    0.987486, 1.47151, 0, -0.000439, 
                    0, 0, 1, 0, 
                    42.983063, 170.233509, 0, 1);
 transform-origin: 5px 1px 0px;
	
		-moz-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
			-o-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
}

.slideshow {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	list-style-type: none;
}

.slideshow__item {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	-o-transform: translate3d(-100%, 0, 0);
}




.slideshow__item.current{
	pointer-events: auto;
	z-index: 100;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
}

.slideshow img {
	width: 100%;
}

.slideshow__item.in--next {
	-webkit-animation: inNext 0.5s forwards ease-in-out;
	animation: inNext 0.5s forwards ease-in-out;
	-moz-animation: inNext 0.5s forwards ease-in-out;
	-o-animation: inNext 0.5s forwards ease-in-out;
}

.slideshow__item.out--next {
	-webkit-animation: outNext 0.5s forwards ease-in-out;
	animation: outNext 0.5s forwards ease-in-out;
	-moz-animation: outNext 0.5s forwards ease-in-out;
	-o-animation: outNext 0.5s forwards ease-in-out;
}

.slideshow__item.in--prev {
	-webkit-animation: inPrev 0.5s forwards ease-in-out;
	animation: inPrev 0.5s forwards ease-in-out;
	-moz-animation: inPrev 0.5s forwards ease-in-out;
	-o-animation: inPrev 0.5s forwards ease-in-out;
}

.slideshow__item.out--prev {
	-webkit-animation: outPrev 0.5s forwards ease-in-out;
	animation: outPrev 0.5s forwards ease-in-out;
	-moz-animation: outPrev 0.5s forwards ease-in-out;
	-o-animation: outPrev 0.5s forwards ease-in-out;
}

@-webkit-keyframes inPrev {
	0% {
		-webkit-transform: translate3d(-30%, 0, 0);
		transform: translate3d(-30%, 0, 0);
		-moz-transform: translate3d(-30%, 0, 0);
		-o-transform: translate3d(-30%, 0, 0);
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
	}
}

@keyframes inPrev {
	0% {
		-webkit-transform: translate3d(-30%, 0, 0);
		transform: translate3d(-30%, 0, 0);
		-moz-transform: translate3d(-30%, 0, 0);
		-o-transform: translate3d(-30%, 0, 0);
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
	}
}

@-webkit-keyframes inNext {
	0% {
		-webkit-transform: translate3d(30%, 0, 0);
		transform: translate3d(30%, 0, 0);
		-moz-transform: translate3d(30%, 0, 0);
		-o-transform: translate3d(30%, 0, 0);
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
	}
}

@keyframes inNext {
	0% {
		-webkit-transform: translate3d(30%, 0, 0);
		transform: translate3d(30%, 0, 0);
		-moz-transform: translate3d(30%, 0, 0);
		-o-transform: translate3d(30%, 0, 0);
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
	}
}

@-webkit-keyframes outPrev {
	100% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		-moz-transform: translate3d(100%, 0, 0);
		-o-transform: translate3d(100%, 0, 0);
	}
}

@keyframes outPrev {
	100% {
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		-moz-transform: translate3d(100%, 0, 0);
		-o-transform: translate3d(100%, 0, 0);
	}
}

@-webkit-keyframes outNext {
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		-moz-transform: translate3d(-100%, 0, 0);
		-o-transform: translate3d(-100%, 0, 0);
	}
}

@keyframes outNext {
	100% {
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		-moz-transform: translate3d(-100%, 0, 0);
		-o-transform: translate3d(-100%, 0, 0);
	}
}