.gallery .images {
    position: relative;
    width: 70%;
    padding-bottom: 65%;
    height: 500px;
    float: right;
}

    .gallery .images > div,
    .gallery .images > span {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
    }

    .gallery .images > div {
        display: none;
        background: center no-repeat;
        background-size: contain;
        border-radius: 3px;
        -webkit-transition: all 0.88s ease;
        transition: all 0.88s ease;
        height: 500px;
    }

        .gallery .images > div.active {
            display: block;
        }

    .gallery .images > span {
        cursor: pointer;
        width: 50px;
        color: black;
        font-size: 50px;
        height: 100%;
        line-height: 44px;
    }

        .gallery .images > span.right {
            right: 0;
            text-align:right;
        }

        .gallery .images > span.left {
            left: 0;
            text-align: left;
        }

        .gallery .images > span:before {
            margin-top: -25px;
            top: 50%;
            position: absolute;
            bottom: 0;
            opacity: 25%;
        }

        .gallery .images > span.left:before {
            content: "\276C";
            left: 0;
        }

        .gallery .images > span.right:before {
            content: "\276D";
            right: 0;
        }

.gallery .thumbs {
    display: inline-block;
    cursor: pointer;
    width: 25%;
    float: left;
    padding-left:0px;
}

    .gallery .thumbs > div {
        box-sizing: border-box;
        background: center no-repeat;
        background-size: cover;
        display: inline-block;
        position: relative;
        margin: 4px;
        border: 1px solid rgba(35,31,32,0.2);
        width: 89px;
        height: 89px;
        cursor: pointer;
        /*-webkit-transition: all 0.88s ease;
        transition: all 0.88s ease;*/
    }

@media (max-width: 768px) {
    .gallery .thumbs > div {
        width: 65px;
        height: 65px;
    }
}

.gallery .thumbs > div:before {
    content: '';
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 0 5px 5px 5px;
    position: absolute;
    left: 45px;
    top: -8px;
    -webkit-transition: all 0.88s ease;
    transition: all 0.88s ease;
}

@media (max-width: 768px) {
    .gallery .thumbs > div:before {
        left: 25px;
    }

    .gallery .thumbs {
        width: 100%;
        display: flex;
        position: relative;
        z-index: 1;
    }

    .gallery .images {
        width: 100%;
        position: relative;
        height:285px;
    }

        .gallery .images > div {
            height: 275px;
        }
        .gallery .images > span {
            display: none;
        }
}

.gallery .thumbs > div.active {
    border: 3px solid black;
}
@media (min-width:480px) and (max-width:992px) {
    .gallery .thumbs {
        width: 22%;
    }
}
@media (min-width:480px) and (max-width:768px) {
    .gallery .images > div {
        width: 400px;
        height: 400px;
    }
    .imageview{
        flex-direction:row;
    }
    .gallery .thumbs{
        display:inline-block;
    }
    .gallery .images {
        width: 100%;
        height: 400px;
    }
}