.carousel {
    position: relative;
    width: 1000px;
    padding: 10px 0;

}

.carousel img {
    width: 200px;
    height: 200px;
    display: block;
}

.arrow img {
    width: 24px;
    height: 42px;
}

.arrow img:hover {
}

.arrow {
    position: absolute;
    top: 79px;
    padding: 0;
    height: 42px;
    z-index: 15;
}

.arrow:focus {
    outline: none;
}

.arrow:hover {
    background: #ccc;
    cursor: pointer;
}

.prev {
    left: 0px;
}

.next {
    right: 0px;
}

.gallery {
    /*width: 1000px;*/
    overflow: hidden;
}

.gallery ul {
    height: 200px;
    width: 9999px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: margin-left 750ms;
    /* удаляем пустое пространство между элементами li, у которых установлен inline-block */
    /* http://davidwalsh.name/remove-whitespace-inline-block */
    font-size: 0;
}

.gallery li {
    display: inline-block;
    padding: 0 25px;
}


@media (max-width: 1024px) {

    .carousel {
        width: 750px;
    }

}

@media (max-width: 784px) {

    .carousel {
        width: 500px;
    }

}

@media (max-width: 540px) {

    .carousel {
        width: 250px;
    }

}