.container {
    position: relative
}

img {
    width: 100%
}

.swiper-container {
    width: 100%
}

#thumbs {
    box-sizing: border-box;
    padding: 10px;
    width: 60%;
    position: absolute;
    bottom: 0px;
    left: 0;
    background-color: rgba(35, 24, 21, .8);
    box-sizing: border-box
}

#thumbs .swiper-slide {
    width: 16%;
    height: auto;
    opacity: .5
}

#thumbs .swiper-slide-active {
    opacity: 1
}

@keyframes zoom {
    from {
        transform: scale(1.1)
    }
    to {
        transform: scale(1)
    }
}

.swiper-container .swiper-wrapper .swiper-slide {
    overflow: hidden
}

.main .swiper-wrapper .swiper-slide-prev img,
.main .swiper-wrapper .swiper-slide-active img,
.main .swiper-wrapper .swiper-slide-duplicate-active img {
    animation-name: zoom;
    animation-duration: 4s;
    animation-fill-mode: forwards
}

.main figure {
    position: relative
}

@media only screen and (max-width:980px) {
    .mvs .main figure {
        position: relative;
        overflow: hidden;
        height: 420px
    }
    .mvs .main img {
        position: absolute;
        left: -10%;
        width: 120%
    }
    #thumbs {
        box-sizing: border-box;
        padding: 5px;
        width: 100%;
        position: absolute;
        bottom: -60px;
        left: 0;
        background-color: #231815;
        box-sizing: border-box
    }
    #thumbs .swiper-slide {
        width: 20%
    }
}

@media only screen and (max-width:680px) {
    .mvs .main figure {
        position: relative;
        overflow: hidden;
        height: 280px
    }
    .mvs .main img {
        position: absolute;
        left: -25%;
        width: 150%
    }
    #thumbs {
        bottom: -50px;
        background-color: #231815
    }
    #thumbs .swiper-slide {
        width: 25%
    }
    .swiper-button-next,
    .swiper-button-prev {
        top: 50%;
        width: 22px;
        height: 37px;
        margin-top: -10px;
        z-index: 10;
        cursor: pointer;
        -moz-background-size: 22px 37px;
        -webkit-background-size: 22px 37px;
        background-size: 22px 37px
    }
}

@media only screen and (max-width:380px) {
    .mvs .main figure {
        position: relative;
        overflow: hidden;
        height: 250px
    }
    .mvs .main img {
        position: absolute;
        left: -25%;
        width: 150%
    }
    #thumbs {
        bottom: -45px;
        background-color: #231815
    }
    #thumbs .swiper-slide {
        width: 25%
    }
    .swiper-button-next,
    .swiper-button-prev {
        top: 50%;
        width: 20px;
        height: 35px;
        margin-top: -10px;
        z-index: 10;
        cursor: pointer;
        -moz-background-size: 20px 35px;
        -webkit-background-size: 20px 35px;
        background-size: 20px 35px
    }
}