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

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

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

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

.mobile {
    overflow                 : hidden;
    position                 : absolute;
    z-index                  : 100;
    background               : #333;
    width                    : 320px;
    height                   : 480px;
    top                      : 200px;
    left                     : 500px;
    outline                  : 1px solid transparent;
    -webkit-transform-origin : 0 0 0;
    transform-origin         : 0 0 0;
    -webkit-transform        : matrix3d(0.518299, -0.21128, 0, 0.000140996, 0.610733, 0.580524, 0, -0.0000935502, 0, 0, 1, 0, -424, -16, 0, 1);
    transform                : matrix3d(0.518299, -0.21128, 0, 0.000140996, 0.610733, 0.580524, 0, -0.0000935502, 0, 0, 1, 0, -424, -16, 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);
}

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

.slideshow img {
    width : 100%;
}

.slideshow__item.in--next {
    -webkit-animation : inNext 0.3s forwards;
    animation         : inNext 0.3s forwards;
}

.slideshow__item.out--next {
    -webkit-animation : outNext 0.3s forwards;
    animation         : outNext 0.3s forwards;
}

.slideshow__item.in--prev {
    -webkit-animation : inPrev 0.3s forwards;
    animation         : inPrev 0.3s forwards;
}

.slideshow__item.out--prev {
    -webkit-animation : outPrev 0.3s forwards;
    animation         : outPrev 0.3s forwards;
}

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

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

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

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

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

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

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

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