/** default **/
.gallery-flex {
    display: flex;
    flex-wrap: wrap;
    height: auto !important;
}

.gallery-thumbs .swiper-slide {
    background: #fff;
    opacity: 1 !important;
}

.gallery-flex .p_img {
    background: #fff !important;
}

.gallery-thumbs .swiper-slide>.p_img {
    opacity: .5;
    background: none !important;
    transition: all ease .3s;
    cursor: pointer;
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active>.p_img,
.gallery-thumbs .swiper-slide:hover>.p_img {
    opacity: 1;
}

.gallery-flex .swiper-button-next,
.gallery-flex .swiper-button-prev {
    background: #000;
    font-size: 12px;
    color: #fff;
    opacity: .3;
    transition: all ease .3s;
}

.gallery-flex .swiper-button-next::after,
.gallery-flex .swiper-button-prev::after {
    font-size: 15px;
}

.gallery-flex .swiper-button-next:hover,
.gallery-flex .swiper-button-prev:hover {
    opacity: .8;
}

/** default **/

/** Bottom **/
.gallery-thumbs-bottom {
    width: 100%;
    height: auto !important;
    padding: 0 !important;
}

.gallery-flex .gallery-bottom {
    margin-bottom: 20px;
    width: 100%;
}

.gallery-flex .gallery-bottom .swiper-slide {
    width: 100%;
}

/** Bottom **/

/** Top **/
.gallery-thumbs-top {
    width: 100%;
    height: auto !important;
    padding: 0 !important;
}

.gallery-flex .gallery-top {
    margin-top: 20px;
    width: 100%;
    order: 2;
}

.gallery-flex .gallery-top .swiper-slide {
    width: 100%;
}

/** Top **/

/** Left **/
.gallery-thumbs-left {
    width: 20%;
    padding: 0 !important;
    height: 400px;
}

.gallery-flex .gallery-left {
    margin-left: 20px;
    width: calc(80% - 20px);
    order: 2;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.gallery-flex .gallery-left .swiper-wrapper {
    height: auto;
}

.gallery-thumbs-left .swiper-slide {
    width: 100% !important;
    height: auto;
}

/** Left **/

/** Right **/
.gallery-thumbs-right {
    width: 20%;
    padding: 0 !important;
    height: 400px !important;
}

.gallery-flex .gallery-right {
    margin-right: 20px;
    width: calc(80% - 20px);
    order: -2;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.gallery-flex .gallery-right .swiper-wrapper {
    height: auto;
}

.gallery-thumbs-right .swiper-slide {
    width: 100% !important;
    height: auto;
}

/** Right **/

@media screen and (max-width:768px){
    .gallery-flex .gallery-right {
        margin-right: 10px;
        width: calc(80% - 10px);
        height: 410px;
    }
    .gallery-thumbs-right {
        height: 410px !important;
    }
}